/* Galumio — a retro pixel-terminal cockpit floating in 3D space.
   Square panels with stacked pixel outlines, a pixel display font, chunky press-down buttons and faint
   CRT scanlines. Logical properties throughout for right-to-left layouts. */

@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/pixelify-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/pixelify-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/pixelify-sans-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/pixelify-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/pixelify-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/pixelify-sans-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --deep: #040814;
  --navy: #0a1326;
  --panel: rgba(12, 22, 44, 0.9);
  --panel-solid: #0c162c;
  --line: #1d3358;
  --line-hi: #2f5488;
  --ink: #e8f1ff;
  --muted: #8fa5c9;
  --cyan: #5fe3ff;
  --violet: #a78bfa;
  --gold: #f6c453;
  --pink: #ff7ad9;
  --coral: #ff8a65;
  --ok: #7ee2a8;
  --warn: #ffb37a;
  --t-common: #9db4e8;
  --t-uncommon: #5fe3ff;
  --t-rare: #b79cff;
  --t-exceptional: #f6c453;
  --t-cosmic: #ff8ad8;
  --t-none: #7f8aa8;
  --font-sys: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", "Yu Gothic", "Malgun Gothic", "Noto Sans Devanagari", "Noto Sans Arabic", "Noto Sans Georgian", "Sylfaen", sans-serif;
  --font-body: "VT323", ui-monospace, var(--font-sys);
  --font-display: "Pixelify Sans", "VT323", var(--font-sys);
  --fs: 20px;
  --lh: 1.25;
  /* the pixel outline: dark gap, coloured line, dark drop below */
  --px-frame: 0 0 0 2px var(--deep), 0 0 0 4px var(--line), 0 4px 0 4px var(--deep);
  --px-frame-hi: 0 0 0 2px var(--deep), 0 0 0 4px var(--line-hi), 0 4px 0 4px var(--deep);
  --vvh: 100vh;
  color-scheme: dark;
}
/* VT323 covers Latin only: other scripts use the system font at a normal size; Russian keeps the
   pixel display face, which includes Cyrillic. */
html:is([lang="ru"], [lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) { --font-body: var(--font-sys); --fs: 16px; --lh: 1.5; }
html:is([lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) { --font-display: var(--font-sys); }
html[lang="ar"], html[lang="hi"] { --lh: 1.75; }
:root[data-contrast="high"] {
  --panel: #050a18;
  --panel-solid: #050a18;
  --line: #9fb6e0;
  --line-hi: #ffffff;
  --ink: #ffffff;
  --muted: #e2e8f6;
  --t-common: #cfdcff;
  --t-none: #d0d4e6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; font-size: var(--fs); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh);
  color: var(--ink);
  /* a cheap CSS starfield that shows instantly, before the 3D view has loaded */
  background-color: var(--deep);
  background-image:
    radial-gradient(1px 1px at 23px 41px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 141px 97px, #cfe9ff 99%, transparent),
    radial-gradient(1px 1px at 77px 160px, #fff1d6 99%, transparent),
    radial-gradient(2px 2px at 190px 23px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 52px 230px, #dcd2ff 99%, transparent),
    radial-gradient(1px 1px at 233px 181px, #ffffff 99%, transparent),
    radial-gradient(120% 70% at 75% -10%, #18275a 0%, transparent 60%),
    radial-gradient(90% 60% at 0% 100%, #24164f 0%, transparent 60%);
  background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 330px 330px, 330px 330px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}
/* faint CRT scanlines over everything */
body::after { content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); opacity: 0.45; }
:root[data-contrast="high"] body::after { display: none; }
#space { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: #02030a; opacity: 0; transition: opacity 0.9s steps(9); }
#space.ready { opacity: 1; }

.mode-ambient #space.ready { opacity: 0.6; }
:root[data-contrast="high"] #space { opacity: 0.35; }
#shell { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 780px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3, p, ol, ul, dl, dd, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }
ol, ul { list-style: none; }
fieldset { border: 0; }
a { color: var(--cyan); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1:focus, h2:focus, main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--gold); color: #1a1100; padding: 8px 14px; font-family: var(--font-display); }
.skip-link:focus { top: 12px; }
.art svg, .glyph-wrap svg, .icon-wrap svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.icon-wrap { display: inline-block; width: 22px; height: 22px; flex: none; }
.glyph-wrap { display: inline-block; width: 1em; height: 1em; flex: none; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 0.86rem; }
/* instant landing screen (static HTML, before scripts) */
.landing { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.landing-art { width: 128px; height: 120px; animation: hover 3.2s steps(8) infinite; }
.landing-art svg, .hero-placeholder svg { display: block; width: 100%; height: 100%; }
.landing-title { font-family: "Pixelify Sans", "VT323", var(--font-sys); font-weight: 700; font-size: clamp(3rem, 13vw, 4.6rem); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; text-shadow: 3px 3px 0 var(--violet), 6px 6px 0 #2a1d5e; }
.landing-bar { width: 180px; height: 12px; background: var(--deep); box-shadow: 0 0 0 2px var(--line-hi); overflow: hidden; }
.landing-bar span { display: block; height: 100%; width: 40%; background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 11px); animation: loading 1.2s steps(10) infinite; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.hero-placeholder { position: absolute; inset: 30px 60px 18px; transition: opacity 0.6s steps(6); }
.space-ready .hero-placeholder { opacity: 0; }
.boot { text-align: center; padding: 30vh 0; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.3em; color: var(--muted); }
.pix { display: block; image-rendering: pixelated; width: 48px; height: 48px; flex: none; }
.pix.mini { width: 28px; height: 28px; }
.pix.tiny { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-inline-end: 8px; }

/* header and tabs */
#top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; }
.logo { width: 32px; height: 32px; display: block; }
.logo svg { width: 100%; height: 100%; display: block; }
.top-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lang { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); box-shadow: var(--px-frame); padding: 6px 10px; min-height: 40px; margin: 4px; }
.lang select { background: transparent; border: 0; max-width: 11em; padding: 4px 2px; cursor: pointer; }
.lang select option { color: #111; background: #fff; }
.lang.wide select { max-width: none; }
.lang.compact { position: relative; justify-content: center; width: 40px; height: 40px; padding: 0; flex: none; cursor: pointer; }
.lang.compact:hover { box-shadow: var(--px-frame-hi); }
.lang.compact:focus-within { outline: 3px solid var(--gold); outline-offset: 5px; }
.lang.compact select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 4px; background: var(--navy); box-shadow: var(--px-frame); border: 0; color: var(--ink); cursor: pointer; text-decoration: none; flex: none; }
.icon-btn:hover { box-shadow: var(--px-frame-hi); color: var(--cyan); }
.icon-btn:active { transform: translateY(2px); }

#view { flex: 1; padding-bottom: 100px; }
#tabs { position: fixed; inset-inline: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(4, 8, 20, 0.96); border-top: 2px solid var(--line); }
.tab { flex: 1; max-width: 150px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 0.82rem; line-height: 1.05; text-align: center; padding: 4px 2px; overflow-wrap: anywhere; hyphens: auto; text-transform: uppercase; letter-spacing: 0.06em; }
html:is([lang="ru"], [lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) .tab { font-size: 0.72rem; text-transform: none; letter-spacing: 0; }
/* Georgian words are long and wide: a slightly smaller label keeps them whole on phones. */
html[lang="ka"] .tab { font-size: 0.6rem; overflow-wrap: normal; }
.tab[aria-current="page"] { color: var(--gold); background: rgba(246, 196, 83, 0.08); box-shadow: inset 0 -3px 0 var(--gold); }
.tab:hover { color: var(--ink); }
.mode-play #tabs, .mode-play #top .top-actions .icon-btn { display: none; }

/* building blocks */
.page { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.page > h1 { font-size: 1.9rem; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 3px 3px 0 #1c1440; }
.card { background: var(--panel); box-shadow: var(--px-frame); margin: 4px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.card h3 { font-size: 1rem; margin-top: 6px; letter-spacing: 0.05em; }
.row { display: flex; flex-wrap: wrap; gap: 14px; }
.row > * { flex: 1 1 140px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 2px solid var(--line-hi); background: var(--navy); font-size: 0.86rem; color: var(--ink); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; }
.chip.gold { border-color: var(--gold); color: var(--gold); }

.btn { touch-action: manipulation; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 4px; padding: 8px 18px; border: 0; border-radius: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; cursor: pointer; text-align: center; transition: transform 0.06s steps(2), box-shadow 0.06s steps(2); }
.btn.primary { background: var(--gold); color: #1d1300; box-shadow: 0 0 0 2px #2b1c00, 0 0 0 4px #ffe6a3, 0 6px 0 4px #8d5c00; }
.btn.primary:hover { background: #ffd56e; }
.btn.primary:active { transform: translateY(4px); box-shadow: 0 0 0 2px #2b1c00, 0 0 0 4px #ffe6a3, 0 2px 0 4px #8d5c00; }
.btn.ghost { background: var(--navy); color: var(--ink); box-shadow: var(--px-frame); }
.btn.ghost:hover { box-shadow: var(--px-frame-hi); color: var(--cyan); }
.btn.ghost:active { transform: translateY(3px); }
.btn.big { min-height: 58px; font-size: 1.15rem; }
.btn:disabled { opacity: 0.55; cursor: default; }
html:is([lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) .btn { letter-spacing: 0; font-weight: 700; }
.link { background: none; border: 0; padding: 4px 0; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: start; }

/* rarity: every tier has its own glyph shape as well as a colour */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border: 2px solid currentColor; font-size: 0.9rem; white-space: nowrap; background: rgba(0, 0, 0, 0.35); text-transform: uppercase; letter-spacing: 0.06em; }
.badge.big { font-size: 1.05rem; padding: 4px 14px 4px 10px; }
.badge-points { font-variant-numeric: tabular-nums; }
.tier-common { color: var(--t-common); }
.tier-uncommon { color: var(--t-uncommon); }
.tier-rare { color: var(--t-rare); }
.tier-exceptional { color: var(--t-exceptional); }
.tier-cosmic { color: var(--t-cosmic); }
.tier-none { color: var(--t-none); }
.tier-pending { color: rgba(143, 165, 201, 0.55); }
.markers { display: flex; gap: 5px; align-items: center; }
.marker { display: inline-grid; place-items: center; font-size: 1.1rem; }

.ship { display: block; width: 100%; }
.ship svg { display: block; width: 100%; height: auto; overflow: visible; }
[dir="rtl"] .ship { transform: scaleX(-1); }
.ship-flame { animation: flame 0.3s steps(2) infinite; }
@keyframes flame { 50% { opacity: 0.35; } }

/* home */
.hero { text-align: center; padding-top: 4px; }
.hero-art { position: relative; width: min(100%, 320px); height: 240px; margin: 0 auto 4px; }
.hero-ship { position: absolute; width: 72px; top: 10px; inset-inline-end: 0; animation: hover 3.2s steps(8) infinite; }
.hero-ship .ship { transform: rotate(-18deg); }
[dir="rtl"] .hero-ship .ship { transform: scaleX(-1) rotate(-18deg); }
@keyframes hover { 50% { transform: translateY(-8px); } }
.hero h1 { font-family: "Pixelify Sans", "VT323", var(--font-sys); font-size: clamp(3rem, 13vw, 4.6rem); letter-spacing: 0.08em; line-height: 1; color: var(--ink); text-transform: uppercase; text-shadow: 3px 3px 0 var(--violet), 6px 6px 0 #2a1d5e, 9px 9px 0 rgba(0, 0, 0, 0.6); }
:root[data-contrast="high"] .hero h1 { text-shadow: none; }
.tagline { margin-top: 14px; color: var(--cyan); font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; }
html:is([lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) .tagline { letter-spacing: 0.02em; text-transform: none; }
.mission-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mission-head h2 { font-size: 1.5rem; margin-inline-end: auto; color: var(--ink); }
.status { color: var(--gold); }
.reset-card { text-align: center; }
.countdown { font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--cyan); letter-spacing: 0.08em; text-shadow: 0 0 8px rgba(95, 227, 255, 0.5); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat { background: var(--panel); box-shadow: var(--px-frame); margin: 4px; padding: 12px; text-align: center; display: flex; flex-direction: column; }
.stat dd { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); overflow-wrap: anywhere; }
.stat dt { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* play */
.play { gap: 10px; }
.play-top { display: flex; align-items: center; gap: 10px; }
.play-title { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.energy { text-align: end; line-height: 1; }
.energy-label { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.energy strong { font-family: var(--font-display); font-size: 1.7rem; font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 2px 2px 0 #5a3c00; }
.question { gap: 12px; }
.prompt { font-size: clamp(1.25rem, 5.2vw, 1.75rem); line-height: 1.2; text-wrap: balance; font-family: var(--font-body); font-weight: 400; }
html:is([lang="ru"], [lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) .prompt { font-weight: 700; font-size: clamp(1.1rem, 4.6vw, 1.45rem); }
.timer { display: flex; align-items: center; gap: 12px; }
/* a segmented, blocky timer bar */
.timer-bar { flex: 1; height: 14px; background: var(--deep); box-shadow: 0 0 0 2px var(--line); overflow: hidden; }
.timer-fill { height: 100%; inline-size: 100%; background: repeating-linear-gradient(90deg, var(--cyan) 0 10px, transparent 10px 13px); }
.timer-bar.low .timer-fill { background: repeating-linear-gradient(90deg, var(--coral) 0 10px, transparent 10px 13px); }
.timer-secs { min-width: 3.2em; text-align: end; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.timer-bar.low + .timer-secs { color: var(--warn); animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.45; } }
.answer-row { display: flex; gap: 12px; align-items: stretch; }
.answer-input { flex: 1; min-width: 0; min-height: 54px; margin: 4px; padding: 8px 14px; border: 0; border-radius: 0; background: #030712; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--line-hi); font-size: 1.3rem; caret-color: var(--gold); }
html:is([lang="ru"], [lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) .answer-input { font-size: 1.1rem; }
.answer-input:focus { outline: none; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--cyan), 0 0 14px rgba(95, 227, 255, 0.35); }
.answer-input::placeholder { color: #5f7396; }
.submit-btn { min-height: 54px; flex: none; }
@media (max-width: 480px) { .submit-btn { padding-inline: 12px; letter-spacing: 0.04em; } .answer-row { gap: 8px; } }
.feedback { min-height: 1.4em; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.feedback.unverified, .feedback.ambiguous, .feedback.empty { color: var(--warn); }
.feedback.incorrect { color: #ffb0b0; }
.feedback span::before { content: "! "; }
.feedback.incorrect span::before { content: "✕ "; }
.q-foot { display: flex; justify-content: flex-end; }
.skip-btn { min-height: 44px; }
.skip-btn.armed { color: var(--coral); box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--coral), 0 4px 0 4px var(--deep); }
.kb-open #top { display: none; }
.kb-open .route-hud { display: none; }
.kb-open .play-top .markers { display: none; }
.kb-open .question { padding: 12px; gap: 8px; }
.kb-open .prompt { font-size: 1.15rem; }

.reveal { gap: 10px; color: var(--ink); }
.reveal-q { color: var(--muted); font-size: 0.95rem; }
.reveal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.reveal-points { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.reveal.tier-none .reveal-points { color: var(--muted); }
.reveal-answer { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; animation: pop 0.3s steps(3); overflow-wrap: anywhere; }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } }
.burn-label { color: var(--muted); font-size: 0.95rem; }
.reveal-pos { font-size: 0.95rem; }
.arrived { color: var(--gold); }
.why { border-inline-start: 4px solid var(--violet); padding-inline-start: 12px; display: flex; flex-direction: column; gap: 4px; }
.why h2 { font-size: 0.85rem; letter-spacing: 0.14em; color: var(--violet); }
.sources a { overflow-wrap: anywhere; }
.all-answers { box-shadow: 0 0 0 2px var(--line); padding: 8px 12px; margin: 2px; }
.all-answers summary { cursor: pointer; padding: 4px 0; min-height: 36px; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 0.06em; }
.all-answers summary::before { content: "▸"; margin-inline-end: 8px; color: var(--cyan); }
.all-answers[open] summary::before { content: "▾"; }
.answer-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 0; border-top: 2px dotted var(--line); }
.answer-group ul { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 60%; }
.answer-group li { padding: 0 8px; background: var(--navy); box-shadow: 0 0 0 1px var(--line); font-size: 0.95rem; }
.answer-group li.mine { box-shadow: 0 0 0 2px var(--gold); color: var(--gold); }
.answer-group li.mine::after { content: " ✓"; }

/* results */
.result-hero { align-items: center; text-align: center; background: linear-gradient(180deg, rgba(10, 16, 36, 0.15), var(--panel) 48%); }
.result-hero h1 { font-size: 1.7rem; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 3px 3px 0 #1c1440; }
.result-view { align-self: stretch; height: clamp(220px, 40vh, 380px); margin: -4px -18px 0; }
.result-dest-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.result-dest { font-family: var(--font-display); font-size: 1.7rem; color: var(--cyan); line-height: 1.15; }
.result-score { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.result-hero .marker { font-size: 1.5rem; }
.fact { max-width: 34em; }
.discoveries { display: flex; flex-wrap: wrap; gap: 12px; }
.discoveries li { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; margin: 2px; box-shadow: 0 0 0 2px var(--gold); background: rgba(246, 196, 83, 0.08); }
.share-text { width: 100%; resize: none; margin: 2px; border: 0; border-radius: 0; box-shadow: 0 0 0 2px var(--line); background: #030712; padding: 12px; line-height: 1.35; font-size: 1.05rem; }
.breakdown { display: flex; flex-direction: column; gap: 14px; counter-reset: bd; }
.breakdown > li { counter-increment: bd; border-top: 2px dotted var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.bd-q::before { content: counter(bd) ". "; color: var(--muted); }
.bd-q { color: var(--muted); }
.bd-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bd-a strong { font-size: 1.2rem; overflow-wrap: anywhere; }

/* star map: the route grouped by stretch of the journey */
.map-group { display: flex; flex-direction: column; gap: 12px; }
.map-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); padding-bottom: 6px; border-bottom: 2px dotted var(--line-hi); }
.map-group-count { font-family: var(--font-body); color: var(--gold); letter-spacing: 0.04em; }
.starmap { position: relative; display: flex; flex-direction: column; gap: 12px; }
.stop { position: relative; display: flex; gap: 16px; align-items: center; background: var(--panel); box-shadow: var(--px-frame); margin: 4px; padding: 12px 14px; }
.stop.locked .stop-art { filter: grayscale(1) brightness(0.5); opacity: 0.7; }
.stop.locked { background: rgba(8, 14, 30, 0.8); }
.stop.found { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px #2b6a86, 0 4px 0 4px var(--deep); }
.stop.farthest { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--gold), 0 4px 0 4px var(--deep), 0 0 18px rgba(246, 196, 83, 0.25); }
.stop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stop-body h3 { font-size: 1.1rem; letter-spacing: 0.04em; }
.stop.locked h3 { color: var(--muted); }
.stop-const { font-size: 0.86rem; color: var(--violet); }
.stop-when { font-size: 0.9rem; color: var(--cyan); }
.stop.locked .stop-when { color: var(--muted); }

/* log, practice, settings, help */
.log-list { display: flex; flex-direction: column; gap: 14px; }
.log-row { color: var(--ink); text-decoration: none; gap: 8px; }
.log-row:hover { box-shadow: var(--px-frame-hi); }
.log-head, .log-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.options { display: flex; flex-direction: column; gap: 12px; }
.option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; margin: 2px; box-shadow: 0 0 0 2px var(--line); cursor: pointer; }
.option:has(input:checked) { box-shadow: 0 0 0 2px var(--gold); }
.option input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; }
.setting label { display: flex; flex-direction: column; }
.setting label.lang { flex-direction: row; }
.switch { appearance: none; -webkit-appearance: none; width: 52px; height: 28px; margin: 4px; background: var(--deep); box-shadow: 0 0 0 2px var(--line-hi); position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; background: var(--muted); }
.switch:checked { background: #13442e; box-shadow: 0 0 0 2px var(--ok); }
.switch:checked::after { inset-inline-start: 28px; background: var(--ok); }
.key-box { width: 100%; min-height: 46px; margin: 2px; padding: 8px 12px; border: 0; border-radius: 0; box-shadow: 0 0 0 2px var(--line); background: #030712; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; }
.rules { list-style: decimal; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.rules li::marker { color: var(--gold); }
.tier-list { display: flex; flex-direction: column; gap: 10px; }
.tier-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.tier-list.compact { flex-direction: row; flex-wrap: wrap; }
.ladder { width: 100%; border-collapse: collapse; }
.ladder th, .ladder td { text-align: start; padding: 5px 4px; border-bottom: 1px dotted var(--line); }
.ladder th { width: 6.5em; color: var(--gold); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ladder .ladder-group th { width: auto; padding-top: 14px; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 2px solid var(--line-hi); font-family: var(--font-display); }

/* onboarding */
dialog.onboard { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 0; background: var(--panel-solid); color: var(--ink); padding: 24px 20px 18px; overflow: auto; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--cyan), 0 6px 0 4px var(--deep), 0 0 40px rgba(95, 227, 255, 0.2); }
dialog.onboard::backdrop { background: rgba(2, 4, 12, 0.82); }
.onb-close { position: absolute; top: 10px; inset-inline-end: 10px; }
.onb-body { display: flex; flex-direction: column; gap: 12px; padding-inline-end: 44px; min-height: 260px; }
.onb-body h2 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.onb-step { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--cyan); }
.onb-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.example { box-shadow: 0 0 0 2px var(--gold); padding: 12px; display: flex; flex-direction: column; gap: 8px; margin: 2px; margin-inline-end: -40px; }
.ex-tag { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.ex-q { font-size: 1.1rem; }
.ex-track { position: relative; height: 40px; margin: 0 30px; border-bottom: 2px dashed var(--line-hi); }
.ex-ship { position: absolute; bottom: 2px; width: 50px; margin-inline-start: -25px; transition: inset-inline-start 0.9s steps(12); }
.ex-buttons { display: flex; gap: 12px; }
.ex-buttons .btn { flex: 1; }
.ex-out { min-height: 3em; font-size: 0.95rem; }

#toast { position: fixed; inset-inline: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 30; margin: 0 auto; max-width: 440px; padding: 10px 16px; background: var(--ink); color: #0a1326; text-align: center; box-shadow: 0 0 0 2px var(--deep), 0 4px 0 2px var(--deep); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.15s steps(3), transform 0.15s steps(3); }
#toast.show { opacity: 1; transform: none; }
#toast:empty { display: none; }

@media (min-width: 720px) {
  #view { padding-bottom: 110px; }
}

/* Reduced motion: positions change instantly or with a simple fade; nothing flies, spins or flashes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }

/* ---------------------------------------------------------------------------------------------
   Cockpit: the play screen is the inside of the ship. A canopy frames the 3D view, the quiz is the
   console, and after an accepted answer the canopy slides away to show the destination in full. */
#cockpit { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: none; }
.mode-play #cockpit { display: block; }
#cockpit svg { position: absolute; display: block; overflow: visible; shape-rendering: crispEdges; }
#cockpit .edge { fill: none; stroke: var(--cyan); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0.8; }
#cockpit .rim { top: 0; left: 0; width: 100%; height: clamp(26px, 5vw, 64px); transition: transform 0.8s steps(10); }
#cockpit .pillar { top: 0; height: 100%; width: clamp(22px, 6vw, 96px); transition: transform 0.8s steps(10); }
#cockpit .pillar.left { left: 0; }
#cockpit .pillar.right { right: 0; }
#cockpit .dash { position: absolute; inset-inline: 0; bottom: 0; height: var(--dash-h, 34vh); background: linear-gradient(180deg, #13203f 0, #0a1226 24px, #050a18 100%); clip-path: polygon(0 32px, 16px 32px, 16px 16px, 18% 16px, 18% 0, 82% 0, 82% 16px, calc(100% - 16px) 16px, calc(100% - 16px) 32px, 100% 32px, 100% 100%, 0 100%); transition: transform 0.8s steps(10), height 0.3s steps(4); }
#cockpit .dash::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cyan) 0 2px, transparent 2px); clip-path: inherit; opacity: 0.7; }
#cockpit .lights { position: absolute; top: 44px; width: 14%; height: 8px; background: linear-gradient(90deg, var(--c, #5fe3ff) 0 6px, transparent 6px) 0 0 / 12px 8px repeat-x; opacity: 0.8; animation: panel-blink 2.6s steps(2) infinite; }
#cockpit .lights.left { inset-inline-start: 3%; --c: #7ee2a8; }
#cockpit .lights.right { inset-inline-end: 3%; --c: #f6c453; animation-delay: -1.3s; }
@keyframes panel-blink { 50% { opacity: 0.3; } }
.view-open #cockpit .rim { transform: translateY(-115%); }
.view-open #cockpit .pillar.left { transform: translateX(-115%); }
.view-open #cockpit .pillar.right { transform: translateX(115%); }
.view-open #cockpit .dash { transform: translateY(100%); }
.warping #cockpit .dash { height: min(var(--dash-h, 34vh), 16vh); }
.kb-open #cockpit, :root[data-contrast="high"] #cockpit .lights { display: none; }

.mode-play #shell { max-width: none; padding: 0; }
.mode-play #top { width: 100%; max-width: 780px; margin: 0 auto; padding-inline: max(16px, 6vw); padding-block: 8px 2px; }
body.mode-play { overflow: hidden; }
@media (max-height: 760px) {
  .mode-play .question.console { padding: 14px; gap: 8px; }
  .mode-play .prompt { font-size: 1.2rem; }
  .mode-play .q-foot { margin-top: -4px; }
  .mode-play .route-hud { padding: 6px 10px; gap: 4px; }
  .mode-play .rh-next { display: none; }
  .mode-play .energy strong { font-size: 1.4rem; }
  .reveal.console { gap: 8px; padding: 14px; }
}
/* The play screen fits the visible viewport exactly: nothing scrolls except, if it must, the console. */
.mode-play #shell { height: var(--vvh); min-height: 0; }
.mode-play #view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.play { flex: 1 1 auto; min-height: 0; gap: 6px; padding-top: 0; }
.play .hud { flex: none; }
.console-dock { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.console-dock > .console { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hud, .console-dock { width: 100%; max-width: 780px; margin: 0 auto; padding-inline: max(16px, min(6vw, 40px)); }
.hud { display: flex; flex-direction: column; gap: 10px; }
.play-top .icon-btn { background: rgba(4, 8, 20, 0.85); }

/* route HUD: where you are among the 37 stops, as a row of pixel blocks */
.route-hud { background: rgba(4, 8, 20, 0.78); box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--line); margin: 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.rh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rh-here { font-family: var(--font-display); color: var(--cyan); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 0 8px rgba(95, 227, 255, 0.45); overflow-wrap: anywhere; }
html:is([lang="el"], [lang="ka"], [lang="ar"], [lang="hi"], [lang="zh-Hans"], [lang="ja"], [lang="ko"]) .rh-here { text-transform: none; letter-spacing: 0; }
.rh-count { color: var(--muted); font-size: 0.86rem; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; }
.rh-strip { display: flex; gap: 2px; align-items: flex-end; }
.rh-strip li { flex: 1 1 0; max-width: 12px; height: 8px; background: #16294a; }
.rh-strip li.gap { margin-inline-start: 5px; }
.rh-strip li.on { background: var(--cyan); }
.rh-strip li.here { background: var(--gold); height: 12px; animation: blink 1s steps(2) infinite; }
.rh-next { color: var(--muted); font-size: 0.86rem; }
.passing { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 2px 12px; background: rgba(4, 8, 20, 0.8); box-shadow: 0 0 0 2px var(--cyan); color: var(--cyan); text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; opacity: 0; pointer-events: none; }
.passing.show { animation: passing 1.4s steps(7) forwards; }
@keyframes passing { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }

.viewport { position: relative; flex: 1 1 auto; min-height: 80px; display: grid; place-items: center; }
/* after an answer the result panel gets its full height first; the 3D view takes what is left */
.play.has-reveal .viewport { flex: 1 1 0; min-height: min(30vh, 260px); place-items: end center; padding-bottom: 6px; }
.reticle { width: 56px; height: 56px; position: relative; opacity: 0.75; background:
  linear-gradient(var(--cyan), var(--cyan)) top left / 14px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left / 2px 14px no-repeat,
  linear-gradient(var(--cyan), var(--cyan)) top right / 14px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top right / 2px 14px no-repeat,
  linear-gradient(var(--cyan), var(--cyan)) bottom left / 14px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom left / 2px 14px no-repeat,
  linear-gradient(var(--cyan), var(--cyan)) bottom right / 14px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom right / 2px 14px no-repeat; }
.reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: var(--gold); }

.console { position: relative; background: rgba(6, 12, 28, 0.95); box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px #2b6a86, 0 6px 0 4px var(--deep), 0 0 26px rgba(95, 227, 255, 0.12); margin: 4px; }
.console::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); }
.question.console::before { content: ""; position: absolute; top: 12px; inset-inline-end: 18px; width: 46px; height: 6px; background: linear-gradient(90deg, var(--ok) 0 6px, transparent 6px) 0 0 / 10px 6px repeat-x; opacity: 0.9; animation: panel-blink 2.2s steps(2) infinite; }
.console .chip { background: rgba(95, 227, 255, 0.08); border-color: #2b6a86; color: var(--cyan); }
.reveal.console { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px currentColor, 0 6px 0 4px var(--deep); }
.reveal.console.tier-cosmic { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--t-cosmic), 0 6px 0 4px var(--deep), 0 0 30px rgba(255, 138, 216, 0.3); }
/* the Next button stays pinned to the bottom of the result panel, so it is always within reach */
.reveal.console .next-btn { position: sticky; bottom: 0; z-index: 1; flex: none; }
.reveal.console { padding-bottom: 12px; }

/* Hyperspace: the console drops away during the jump and returns as the destination appears. */
.console-dock, .arrival { transition: opacity 0.5s steps(5), transform 0.6s steps(6), filter 0.6s steps(6), letter-spacing 1.2s steps(8); }
.warping .console-dock { opacity: 0; transform: translateY(48px); pointer-events: none; }
.warping .arrival { opacity: 0; transform: scale(1.15); filter: blur(6px); }
.warping .arrival-title { letter-spacing: 0.6em; }

.arrival { text-align: center; max-width: 36em; padding: 0 16px; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.8); }
.arrival-kicker { font-size: 0.9rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cyan); }
.arrival.tier-cosmic .arrival-kicker { color: var(--t-cosmic); }
.arrival.tier-exceptional .arrival-kicker { color: var(--gold); }
.arrival.tier-none .arrival-kicker { color: var(--warn); }
.arrival-title { font-family: var(--font-display); font-size: clamp(1.7rem, 6vw, 3.1rem); font-weight: 700; letter-spacing: 0.16em; margin-inline-end: -0.16em; text-transform: uppercase; line-height: 1.1; color: #fff; text-shadow: 3px 3px 0 var(--violet), 6px 6px 0 rgba(0, 0, 0, 0.7); }
.arrival-const { margin-top: 6px; color: var(--violet); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.95rem; }
.arrival-sub { margin: 8px auto 0; max-width: 32em; color: #eef3ff; font-size: 1rem; }
html:is([lang="ar"], [lang="hi"], [lang="ka"], [lang="el"]) :is(.arrival-title, .arrival-kicker, .arrival-const) { letter-spacing: 0; margin-inline-end: 0; }
html[lang="ka"] :is(.arrival-title, .arrival-kicker, .energy-label, .arrival-const, .rh-here) { text-transform: none; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .arrival-title { letter-spacing: 0.12em; margin-inline-end: -0.12em; }
@media (max-width: 480px) { .arrival-title { letter-spacing: 0.08em; margin-inline-end: -0.08em; } }
.arrival-title.long { font-size: clamp(1.35rem, 4.6vw, 2.4rem); }

.kb-open .viewport { flex: 0 0 0; min-height: 0; overflow: hidden; }
.kb-open .play { min-height: 0; }

/* small phones: a compact arrival card leaves room for the answer and its explanation */
@media (max-height: 700px) {
  .play.has-reveal .viewport { min-height: 20vh; }
  .play.has-reveal .arrival-kicker { display: none; }
  .play.has-reveal .arrival-title { font-size: 1.5rem; }
  .play.has-reveal .arrival-sub, .play.has-reveal .arrival-const { font-size: 0.82rem; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .reveal-answer { font-size: 1.6rem; }
  .reveal-q { font-size: 0.82rem; }
  .reveal .why h2 { display: none; }
}

/* ===== 2026-11 sci-fi pass: answer effects, hangar, check-ins, sign-in ===== */

/* one-shot screen effects (created and removed by app.js) */
.fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; --fx-color: #6fd6ff; --vx: 50vw; --vy: 40vh; }
.fx-jump .fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at var(--vx) var(--vy), color-mix(in srgb, var(--fx-color) 70%, #fff) 0, color-mix(in srgb, var(--fx-color) 35%, transparent) 18%, transparent 55%); mix-blend-mode: screen; opacity: 0; animation: fx-flash 1.1s ease-out 0.38s forwards; }
.fx-jump .fx-rings i { position: absolute; left: var(--vx); top: var(--vy); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--fx-color); box-shadow: 0 0 18px var(--fx-color), inset 0 0 12px var(--fx-color); opacity: 0; animation: fx-ring 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
.fx-jump .fx-rings i:nth-child(1) { animation-delay: 0.4s; }
.fx-jump .fx-rings i:nth-child(2) { animation-delay: 0.52s; border-width: 2px; }
.fx-jump .fx-rings i:nth-child(3) { animation-delay: 0.66s; border-width: 1px; }
.fx-jump .fx-stamp { position: absolute; left: var(--vx); top: calc(var(--vy) - 12px); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; animation: fx-stamp 1.9s cubic-bezier(.2,.8,.2,1) 0.05s forwards; }
.fx-tier { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 5vw, 2.6rem); letter-spacing: 0.3em; margin-inline-end: -0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6px var(--fx-color), 0 0 22px var(--fx-color), 0 0 48px var(--fx-color); }
.fx-points { font-family: var(--font-display); font-size: clamp(1.1rem, 3.6vw, 1.8rem); color: var(--fx-color); text-shadow: 0 0 10px var(--fx-color); letter-spacing: 0.12em; }
.fx-jump .fx-craft { position: absolute; left: var(--vx); top: calc(var(--vy) + 22vh); width: 96px; margin-left: -48px; filter: drop-shadow(0 0 10px var(--fx-color)); animation: fx-launch 0.95s cubic-bezier(.55,0,.8,.3) forwards; }
.fx-jump .fx-craft .ship { transform: rotate(-90deg); }
.fx-jump.tier-cosmic .fx-tier, .fx-jump.tier-exceptional .fx-tier { animation: fx-shimmer 0.5s steps(3) 3; }
@keyframes fx-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-ring { 0% { opacity: 0.95; transform: scale(0.2); } 100% { opacity: 0; transform: scale(22); } }
@keyframes fx-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); filter: blur(8px); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } 72% { opacity: 1; transform: translate(-50%, -54%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(0.92); filter: blur(4px); } }
@keyframes fx-launch { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: 1; } 45% { transform: translateY(-6vh) scale(0.9); } 100% { transform: translateY(-22vh) scale(0.08); opacity: 0; } }
@keyframes fx-shimmer { 50% { filter: brightness(1.6) hue-rotate(40deg); } }

/* wrong answers */
.fx-miss .fx-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 40, 70, 0.16) 0 2px, transparent 2px 5px), radial-gradient(ellipse at center, transparent 45%, rgba(255, 30, 60, 0.35) 100%); animation: fx-glitch 0.6s steps(6) forwards; }
.fx-miss.unverified .fx-scan { background: repeating-linear-gradient(0deg, rgba(255, 179, 71, 0.12) 0 2px, transparent 2px 6px), radial-gradient(ellipse at center, transparent 55%, rgba(255, 170, 60, 0.25) 100%); animation-duration: 0.4s; }
@keyframes fx-glitch { 0% { opacity: 1; transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); opacity: 0.8; } 60% { transform: translateX(-3px); } 100% { opacity: 0; transform: translateX(0); } }
.answer-row.fx-shake { animation: fx-shake 0.5s cubic-bezier(.36,.07,.19,.97); }
.answer-row.fx-shake .answer-input { box-shadow: 0 0 0 2px #ff4d6a, 0 0 18px rgba(255, 77, 106, 0.6); }
.answer-row.fx-nudge { animation: fx-nudge 0.36s ease-out; }
.answer-row.fx-nudge .answer-input { box-shadow: 0 0 0 2px var(--warn), 0 0 14px rgba(255, 179, 122, 0.45); }
.answer-row.fx-pulse .answer-input { animation: fx-pulse 0.5s ease-out; }
@keyframes fx-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }
@keyframes fx-nudge { 25% { transform: translateX(-6px); } 60% { transform: translateX(4px); } }
@keyframes fx-pulse { 40% { box-shadow: 0 0 0 2px var(--cyan), 0 0 20px rgba(95, 227, 255, 0.5); } }
.feedback.incorrect, .feedback.unverified { animation: fx-feedback 0.35s steps(3); }
@keyframes fx-feedback { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
.via-complete, .via-ai { color: var(--ok); }

/* the arrival title: cinematic wide spacing that tightens as the ship drops out of hyperspace */
.arrival-title { text-shadow: 0 0 18px rgba(167, 139, 250, 0.55), 0 0 2px #fff, 3px 3px 0 var(--violet); }
.arrival-kicker::before, .arrival-kicker::after { content: ""; display: inline-block; vertical-align: middle; width: 2.2em; height: 1px; margin: 0 0.8em; background: linear-gradient(90deg, transparent, currentColor); }
.arrival-kicker::after { background: linear-gradient(90deg, currentColor, transparent); }

/* quick sound toggle */
.sound-btn.on { color: var(--cyan); }

/* craft art */
.ship-lights { animation: lights 0.8s steps(2) infinite; }
.ship-lights.alt { animation-delay: 0.4s; }
.ship-beam { animation: beam 1.4s ease-in-out infinite; }
@keyframes lights { 50% { opacity: 0.25; } }
@keyframes beam { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
.hero-ship.craft-astronaut { width: 54px; }
.hero-ship.craft-astronaut .ship { transform: rotate(-8deg); }
.hero-ship.craft-starship { width: 96px; }
.hero-ship.craft-ufo { width: 84px; }
.hero-ship.craft-ufo .ship { transform: none; }
.ship.mini { width: 40px; }

/* daily check-in card on the home screen */
.checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.checkin-streak { font-size: 1.1rem; }
.checkin-streak strong { font-family: var(--font-display); font-size: 2rem; color: var(--gold); text-shadow: 0 0 12px rgba(246, 196, 83, 0.45); }
.craft-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.craft-ladder li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 2px 6px; background: rgba(3, 7, 18, 0.6); box-shadow: 0 0 0 2px var(--line); min-height: 76px; }
.craft-ladder li .ship { width: 44px; }
.craft-ladder li.locked .ship { filter: grayscale(1) brightness(0.45); opacity: 0.7; }
.craft-ladder li.owned { box-shadow: 0 0 0 2px var(--line-hi); }
.craft-ladder li.equipped { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(246, 196, 83, 0.35); }
.craft-day { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.craft-ladder li.owned .craft-day { color: var(--cyan); }

/* hangar page */
.hangar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.craft-card { background: var(--panel); box-shadow: var(--px-frame); margin: 4px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; animation: fx-feedback 0.4s steps(4) both; animation-delay: calc(var(--i, 0) * 70ms); }
.craft-card h2 { font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.craft-card.locked h2 { color: var(--muted); }
.craft-card.equipped { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--gold), 0 0 24px rgba(246, 196, 83, 0.3); }
.craft-stage { position: relative; width: 100%; height: 110px; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(95, 227, 255, 0.12), transparent 70%), #030712; box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; }
.craft-stage .ship { width: 104px; animation: hover 3.2s steps(8) infinite; position: relative; }
.craft-stage .ship.craft-astronaut { width: 64px; }
.craft-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(139, 108, 240, 0.35), transparent 60%); }
.craft-card.locked .craft-stage .ship { filter: grayscale(1) brightness(0.35); animation: none; }
.craft-card.locked .craft-glow { display: none; }
.craft-rank { font-size: 0.85rem; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; }

/* sign-in dialog and unlock celebration */
dialog.signin, dialog.unlock { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 0; background: var(--panel-solid); color: var(--ink); padding: 26px 22px 20px; overflow: auto; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--line-hi), 0 0 40px rgba(95, 227, 255, 0.18); }
dialog.signin::backdrop, dialog.unlock::backdrop { background: rgba(2, 4, 12, 0.82); }
.auth-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 12px; }
.auth-head h2 { font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.auth-ship { width: 92px; margin-bottom: 4px; }
.auth-body { display: flex; flex-direction: column; gap: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form .key-box { margin: 0; font-size: 1.05rem; }
.code-box { text-align: center; letter-spacing: 0.5em; font-size: 1.6rem !important; }
.google-btn { background: #fff; color: #1f1f1f; box-shadow: 0 0 0 2px #0b1220, 0 0 0 4px #d7e3ff, 0 5px 0 4px #8a9bc4; font-family: var(--font-sys); text-transform: none; letter-spacing: 0; font-weight: 600; }
.google-btn:hover { background: #f2f6ff; }
.google-btn:active { transform: translateY(3px); }
.google-btn .g-logo { width: 22px; height: 22px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.2em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.auth-err { min-height: 1.2em; color: var(--warn); }
.auth-err:empty { display: none; }
dialog.unlock { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
dialog.unlock:not([open]) { display: none; }
.unlock-art { position: relative; width: 100%; height: 150px; display: grid; place-items: center; overflow: hidden; }
.unlock-art .ship { width: 140px; position: relative; animation: unlock-in 1.2s cubic-bezier(.2,.8,.2,1) both, hover 3.2s steps(8) 1.2s infinite; }
.unlock-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(246, 196, 83, 0.35), transparent 30%, rgba(95, 227, 255, 0.3), transparent 60%, rgba(255, 122, 217, 0.3), transparent 85%); animation: spin 6s linear infinite; }
.unlock-kicker { color: var(--gold); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.9rem; }
dialog.unlock h2 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 0 16px rgba(246, 196, 83, 0.6); }
@keyframes unlock-in { 0% { transform: translateX(-140%) scale(0.4); opacity: 0; } 60% { transform: translateX(6%) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.account-card .btn { align-self: flex-start; }
/* six tabs on narrow phones: tighter, and words wrap only between words */
@media (max-width: 520px) {
  #tabs { gap: 2px; padding-inline: 4px; }
  .tab { overflow-wrap: normal; word-break: keep-all; font-size: 0.7rem; letter-spacing: 0; padding-inline: 1px; min-width: 0; }
  html:is([lang="ru"], [lang="el"], [lang="ar"], [lang="hi"]) .tab { font-size: 0.62rem; overflow-wrap: anywhere; }
}
@media (max-width: 360px) { .tab { font-size: 0.62rem; } }
/* entering hyperspace hides the console at once (no glimpse of the destination); landing animates it in */
.warping .console-dock, .warping .arrival, .warping .arrival-title { transition: none; }