/* TippFlug · space.css — v1.1: Weltraum-Design (grün-blau), moderne Tastatur, Meteor-Spiel */
[hidden] { display: none !important; }
.kbd-capture { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; pointer-events: none; font-size: 16px; }
.view { animation-duration: 0.18s; }

/* ---------- space background with planets ---------- */
body { background: var(--bg); }
.space { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(8, 145, 178, 0.22), transparent 65%),
              radial-gradient(ellipse 60% 50% at 0% 100%, rgba(16, 185, 129, 0.16), transparent 65%),
              radial-gradient(ellipse 50% 40% at 40% 60%, rgba(56, 189, 248, 0.07), transparent 70%),
              linear-gradient(180deg, #020814 0%, #041326 55%, #03101f 100%); }
.stars { position: absolute; inset: -50%; background-repeat: repeat; }
.stars.s1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 140px, #cffafe, transparent), radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent), radial-gradient(1px 1px at 230px 200px, #a7f3d0, transparent); background-size: 260px 260px; animation: drift 180s linear infinite, twinkle 5s ease-in-out infinite; opacity: 0.7; }
.stars.s2 { background-image: radial-gradient(1.5px 1.5px at 50px 80px, #e0f2fe, transparent), radial-gradient(1px 1px at 300px 20px, #fff, transparent), radial-gradient(2px 2px at 180px 260px, #99f6e4, transparent); background-size: 380px 380px; animation: drift 260s linear infinite reverse, twinkle 7s ease-in-out infinite 2s; opacity: 0.55; }
@keyframes drift { to { transform: translate(260px, 130px); } }
@keyframes twinkle { 50% { opacity: 0.3; } }
.planet { position: absolute; border-radius: 50%; }
.planet.p1 { width: 560px; height: 560px; right: -170px; bottom: -250px;
  background: radial-gradient(circle at 32% 28%, #7dd3c0 0%, #14b8a6 18%, #0e7490 42%, #073a4f 68%, #021624 100%);
  box-shadow: inset -60px -40px 120px rgba(0, 0, 0, 0.65), 0 0 120px rgba(20, 184, 166, 0.28); }
.planet.p1::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(160deg, transparent 0 38px, rgba(255, 255, 255, 0.05) 38px 52px, transparent 52px 90px); animation: spinSlow 240s linear infinite; }
.planet-ring { position: absolute; right: -300px; bottom: -40px; width: 820px; height: 190px; border-radius: 50%; border: 2px solid rgba(94, 234, 212, 0.35); box-shadow: 0 0 0 10px rgba(56, 189, 248, 0.06), 0 0 0 22px rgba(94, 234, 212, 0.04); transform: rotate(-16deg); }
.planet.p2 { width: 120px; height: 120px; right: 14%; top: 9%; background: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 35%, #047857 70%, #022c22); box-shadow: inset -18px -14px 30px rgba(0, 0, 0, 0.55), 0 0 50px rgba(34, 197, 94, 0.25); animation: floatY 14s ease-in-out infinite; }
.planet.p3 { width: 44px; height: 44px; left: 22%; top: 72%; background: radial-gradient(circle at 35% 30%, #e0f2fe, #38bdf8 40%, #0c4a6e 85%); box-shadow: inset -8px -6px 14px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.35); animation: floatY 10s ease-in-out infinite 1s; }
.planet.p4 { width: 18px; height: 18px; left: 48%; top: 16%; background: radial-gradient(circle at 35% 30%, #fff, #5eead4 50%, #115e59); opacity: 0.8; animation: floatY 8s ease-in-out infinite 3s; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes floatY { 50% { transform: translateY(-14px); } }
.shooting { position: absolute; top: 12%; left: -10%; width: 160px; height: 2px; background: linear-gradient(90deg, transparent, #a5f3fc); border-radius: 2px; transform: rotate(18deg); animation: shoot 11s ease-in infinite 4s; opacity: 0; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(18deg); } 2% { opacity: 1; } 9% { opacity: 0; transform: translate(900px, 290px) rotate(18deg); } 100% { opacity: 0; transform: translate(900px, 290px) rotate(18deg); } }
:root[data-theme="light"] .space { background: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(14, 165, 164, 0.16), transparent 65%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(56, 189, 248, 0.14), transparent 65%), linear-gradient(180deg, #f3fcfb, #e6f6f7); }
:root[data-theme="light"] .stars { display: none; }
:root[data-theme="light"] .planet { opacity: 0.35; }
:root[data-theme="light"] .planet-ring { opacity: 0.4; }

/* glass surfaces over the galaxy */
.card, .live-item, .hud-item, .head-stats > div, .typed-line { background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.nav a.active, .seg-btn.on, .stage-num, .choice-badge, .keycaps.big kbd, .avatar { background: var(--grad); }
.bar span, .progress span, .level-bar span { background: var(--grad); }
.ring-fg { stroke: var(--primary-2); }
.page-head h1, .hero h1 { background: linear-gradient(90deg, var(--text) 55%, var(--primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- typing text: spaces are real gaps (no dots) ---------- */
.ch.sp { display: inline-block; min-width: 0.62em; }
.ch.cur { background: color-mix(in srgb, var(--primary-2) 22%, transparent); box-shadow: inset 0 -3px 0 var(--primary-2); animation: curBlink 1.1s ease-in-out infinite; }
@keyframes curBlink { 50% { box-shadow: inset 0 -3px 0 transparent; } }
.ch.err, .ch.err.sp { background: color-mix(in srgb, var(--err) 35%, transparent); box-shadow: inset 0 -3px 0 var(--err); animation: shake 0.22s; }
.start-hint { background: var(--grad); }

/* ---------- modern keyboard ---------- */
.kb { background: linear-gradient(180deg, rgba(10, 32, 52, 0.82), rgba(3, 14, 28, 0.9)); border: 1px solid rgba(94, 234, 212, 0.16); border-radius: 22px; padding: 14px; gap: 7px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kb-row { gap: 7px; }
.key { background: linear-gradient(180deg, #17395a 0%, #0f2a44 100%); color: #d6f5ff; border: 1px solid rgba(165, 243, 252, 0.1); border-radius: 11px;
  box-shadow: 0 4px 0 #041221, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -3px 0 color-mix(in srgb, var(--fc) 70%, transparent);
  transition: transform 0.08s, box-shadow 0.12s, background 0.12s; }
.key.mod { opacity: 0.5; }
.key .ks { opacity: 0.45; }
.key.bump::after { bottom: 7px; background: var(--primary-2); opacity: 0.9; }
.key.next { background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 70%, #fff), var(--fc)); color: #04121c; transform: translateY(-3px);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--fc) 45%, #000), 0 0 0 2px color-mix(in srgb, var(--fc) 40%, transparent), 0 0 28px color-mix(in srgb, var(--fc) 70%, transparent);
  animation: keyGlow 1.2s ease-in-out infinite; }
@keyframes keyGlow { 50% { box-shadow: 0 4px 0 color-mix(in srgb, var(--fc) 45%, #000), 0 0 0 4px color-mix(in srgb, var(--fc) 25%, transparent), 0 0 40px color-mix(in srgb, var(--fc) 85%, transparent); } }
.key.hit-ok { transform: translateY(3px); background: linear-gradient(180deg, #34d399, #0d9488); color: #fff; box-shadow: 0 1px 0 #041221, 0 0 22px rgba(52, 211, 153, 0.6); animation: none; }
.key.hit-err { transform: translateY(3px); background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; box-shadow: 0 1px 0 #041221, 0 0 22px rgba(251, 113, 133, 0.6); animation: shake 0.2s; }
.key.heat { background: color-mix(in srgb, var(--err) calc(var(--heat) * 100%), #12304a); }
:root[data-theme="light"] .kb { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(226, 244, 244, 0.95)); border-color: rgba(13, 148, 136, 0.18); box-shadow: 0 20px 50px rgba(8, 80, 90, 0.15); }
:root[data-theme="light"] .key { background: linear-gradient(180deg, #ffffff, #eef7f8); color: #0f2e38; border-color: rgba(8, 80, 90, 0.12); box-shadow: 0 4px 0 #c3dcdf, 0 6px 10px rgba(8, 80, 90, 0.08), inset 0 -3px 0 color-mix(in srgb, var(--fc) 70%, transparent); }
:root[data-theme="light"] .key.next { color: #04121c; }
:root[data-theme="light"] .key.heat { background: color-mix(in srgb, var(--err) calc(var(--heat) * 100%), #fff); }

/* ---------- Bibo bubble ---------- */
.bibo-bubble { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(94, 234, 212, 0.3); }

/* ---------- game: space arena, meteors, laser ---------- */
.gm-art { background: radial-gradient(ellipse at 80% 120%, rgba(16, 185, 129, 0.35), transparent 55%), linear-gradient(180deg, #020a17, #06243a) !important; }
.gm-planet { position: absolute; left: -60px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #99f6e4, #0d9488 40%, #064e3b 75%); box-shadow: inset -30px -20px 50px rgba(0, 0, 0, 0.6), 0 0 60px rgba(20, 184, 166, 0.4); }
.drop { background: rgba(10, 30, 50, 0.9); color: #e9fbff; border-color: rgba(94, 234, 212, 0.4); }
.drop.orb { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; background: radial-gradient(circle at 35% 30%, #cffafe, #22d3ee 45%, #0e7490); color: #03202c; border: 0; box-shadow: 0 0 22px rgba(34, 211, 238, 0.7); }
.seg-col { flex-direction: column; }
.seg-col .seg-btn { justify-content: flex-start; padding: 10px 14px; }
.gm-keys { display: flex; flex-direction: column; gap: 8px; }
.gm-keys kbd.new { background: var(--grad); color: #fff; }
.arena { background: radial-gradient(ellipse at 50% 125%, rgba(16, 185, 129, 0.35), transparent 50%), radial-gradient(ellipse at 90% 0%, rgba(8, 145, 178, 0.25), transparent 50%), linear-gradient(180deg, #020814 0%, #052038 100%) !important; border-color: rgba(94, 234, 212, 0.25); }
.arena-stars { opacity: 1 !important; }
:root[data-theme="light"] .banner b { color: #fff; text-shadow: 0 4px 24px rgba(45, 212, 191, 0.9); }
.banner b { text-shadow: 0 4px 24px rgba(45, 212, 191, 0.9); }
.banner span { color: #5eead4; }
.arena-planet { position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 30% 70%, #5eead4, #0e7490 40%, #082f49 75%); box-shadow: inset 30px -30px 60px rgba(0, 0, 0, 0.55), 0 0 80px rgba(14, 165, 164, 0.35); opacity: 0.8; }
.ground { background: linear-gradient(0deg, rgba(16, 185, 129, 0.45), rgba(16, 185, 129, 0.05)); border-top: 2px solid rgba(94, 234, 212, 0.7); box-shadow: 0 -6px 24px rgba(45, 212, 191, 0.35); }
.word { color: #e9fbff; background: linear-gradient(180deg, rgba(14, 42, 66, 0.95), rgba(6, 24, 40, 0.95)); border: 1.5px solid rgba(94, 234, 212, 0.35); border-radius: 14px; box-shadow: 0 0 18px rgba(45, 212, 191, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4); }
.word::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 46px; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(0deg, rgba(94, 234, 212, 0.7), transparent); pointer-events: none; }
.word .w-done { color: #5eead4; text-shadow: 0 0 10px rgba(94, 234, 212, 0.8); }
.word .w-hint { color: #9cc4cf; }
.word.letter { width: 58px; height: 58px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.6rem; border: 0; color: #03202c;
  background: radial-gradient(circle at 35% 30%, #ecfeff, #67e8f9 30%, #0891b2 70%, #0e4f66); box-shadow: 0 0 26px rgba(34, 211, 238, 0.65), inset -6px -8px 14px rgba(0, 0, 0, 0.35); }
.word.letter::before { width: 30px; height: 70px; background: linear-gradient(0deg, rgba(103, 232, 249, 0.55), transparent); filter: blur(4px); }
.word.locked { border-color: #fbbf24; background: linear-gradient(180deg, rgba(60, 50, 14, 0.95), rgba(30, 24, 6, 0.95)); box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4), 0 0 26px rgba(251, 191, 36, 0.45); }
.word.letter.locked { background: radial-gradient(circle at 35% 30%, #fffbeb, #fcd34d 35%, #d97706 80%); }
.word.danger { border-color: var(--err); box-shadow: 0 0 22px rgba(251, 113, 133, 0.55); }
.word.letter.danger { background: radial-gradient(circle at 35% 30%, #fff1f2, #fb7185 40%, #9f1239 85%); }
.cannon { position: absolute; left: 50%; bottom: 14px; width: 64px; height: 80px; margin-left: -32px; z-index: 2; animation: hover 3s ease-in-out infinite; }
.cannon svg { width: 100%; height: 100%; overflow: visible; }
.cannon .eyes-open, .cannon .mouth-smile { display: inline; }
.cannon.fire svg { animation: recoil 0.18s ease-out; }
@keyframes recoil { 40% { transform: translateY(5px) scale(1.06); } }
.laser { position: absolute; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 4px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.2), #5eead4 30%, #ecfeff); box-shadow: 0 0 12px #2dd4bf, 0 0 26px #22d3ee; animation: laser 0.26s ease-out forwards; }
@keyframes laser { 0% { opacity: 1; } 100% { opacity: 0; } }
.spark { background: #5eead4; box-shadow: 0 0 8px #5eead4; }
.spark:nth-child(odd) { background: #fde68a; box-shadow: 0 0 8px #fbbf24; }
.t-done { color: var(--primary-2); }
.t-caret { background: var(--primary-2); }
.ach.got .ach-ic { background: var(--grad); color: #fff; }
.chart .line { stroke: var(--primary-2); }
.chart .dot { stroke: var(--primary-2); }
.chart .area { fill: color-mix(in srgb, var(--primary-2) 16%, transparent); }