:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f8fbff; background: #040712; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: radial-gradient(circle at 15% 10%, rgba(0,218,255,.16), transparent 28rem), radial-gradient(circle at 85% 8%, rgba(184,53,255,.19), transparent 30rem), linear-gradient(155deg,#050916 0%,#090d1c 56%,#040611 100%);
}
button { font: inherit; }
.game-shell { width: min(1000px, 100%); max-width: 100vw; margin: 0 auto; padding: clamp(14px,2.6vw,30px); overflow: hidden; }
.game-header, .score-strip, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 53px; height: 53px; flex: 0 0 53px; object-fit: contain; filter: drop-shadow(0 0 13px rgba(93,217,255,.35)); }
.brand-lockup h1 { margin: -2px 0 0; font-size: clamp(1.3rem,4vw,2rem); letter-spacing: .12em; font-style: italic; }
.eyebrow, .panel-tag { color: #75edff; font-size: .67rem; font-weight: 900; letter-spacing: .2em; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.trial-label { padding: 8px 10px; border: 1px solid rgba(125,236,255,.2); border-radius: 999px; color: #a9f7ff; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.icon-button, .primary-button, .answer-button { border: 1px solid rgba(112,224,255,.4); border-radius: 10px; color: #f8fbff; background: rgba(13,19,39,.9); font-weight: 900; cursor: pointer; }
.icon-button { padding: 10px 13px; font-size: .75rem; letter-spacing: .08em; }
.icon-button[aria-pressed="false"] { color: #8791a6; border-color: rgba(137,146,167,.25); }
.icon-button:focus-visible, .primary-button:focus-visible, .answer-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.score-strip { margin: 20px 0 12px; padding: 12px clamp(10px,3vw,28px); border: 1px solid rgba(130,235,255,.17); border-radius: 14px; background: rgba(7,12,28,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.score-strip div { display: grid; flex: 1 1 0; min-width: 68px; text-align: center; }
.score-strip span { color: #8791a8; font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.score-strip strong { margin-top: 2px; font-size: clamp(1.1rem,4vw,1.7rem); font-variant-numeric: tabular-nums; }

.quiz-wrap { position: relative; display: grid; min-height: 610px; isolation: isolate; place-items: center; overflow: hidden; border: 1px solid rgba(84,218,255,.3); border-radius: 20px; background: radial-gradient(circle at 50% 30%,rgba(43,62,119,.35),transparent 42%),linear-gradient(150deg,#040816,#070d20 55%,#02050e); box-shadow: 0 26px 90px rgba(0,0,0,.62),0 0 54px rgba(0,205,255,.08),inset 0 0 0 1px rgba(255,255,255,.025); }
.quiz-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: repeating-linear-gradient(90deg,transparent 0 59px,rgba(76,216,255,.035) 60px 61px),repeating-linear-gradient(0deg,transparent 0 59px,rgba(76,216,255,.03) 60px 61px); mask-image: linear-gradient(#000,transparent 88%); }
.decoder-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decoder-grid { position: absolute; left: -15%; right: -15%; bottom: -30%; height: 63%; transform: perspective(500px) rotateX(60deg); transform-origin: center bottom; background: repeating-linear-gradient(90deg,transparent 0 72px,rgba(70,224,255,.14) 73px 74px),repeating-linear-gradient(0deg,transparent 0 54px,rgba(70,224,255,.1) 55px 56px),linear-gradient(rgba(2,15,29,.3),#02040b); box-shadow: 0 -20px 70px rgba(0,198,255,.08); }
.signal-dish { position: absolute; left: 5%; bottom: 12%; width: 118px; height: 118px; transform: rotate(-14deg); border: 4px solid rgba(87,225,255,.28); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; }
.signal-dish::before { content:""; position:absolute; left:51px; top:52px; width:7px; height:76px; transform:rotate(32deg); transform-origin:top; background:linear-gradient(#8aeeff,#1a3950); box-shadow:0 0 12px rgba(70,219,255,.35); }
.signal-dish i { position:absolute; inset:22px; border:3px solid rgba(182,92,255,.28); border-top-color:transparent; border-left-color:transparent; border-radius:50%; }
.signal-dish b { position:absolute; right:2px; bottom:3px; width:20px; height:20px; border-radius:50%; background:#6ceaff; box-shadow:0 0 20px #30ceff; }
.signal-dish span { position:absolute; left:24px; bottom:-30px; width:105px; height:16px; transform:rotate(14deg); border-radius:50%; background:rgba(24,46,65,.85); }
.signal-wave { position:absolute; left:7%; bottom:18%; border:2px solid rgba(102,229,255,.18); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(35deg); }
.wave-one { width:175px;height:175px }.wave-two { width:235px;height:235px; opacity:.65 }
.data-stack { position:absolute; top:14%; display:flex; align-items:flex-end; gap:5px; height:130px; opacity:.38; }
.data-left{left:4%}.data-right{right:4%;transform:scaleX(-1)}
.data-stack i { width:6px; height:38%; border-radius:3px 3px 0 0; background:linear-gradient(#c768ff,#4ddfff); box-shadow:0 0 9px rgba(91,213,255,.4); }.data-stack i:nth-child(2){height:72%}.data-stack i:nth-child(3){height:44%}.data-stack i:nth-child(4){height:95%}.data-stack i:nth-child(5){height:61%}
.console-rail { position:absolute; right:0; bottom:0; left:0; display:flex; justify-content:center; gap:26px; height:32px; border-top:1px solid rgba(113,231,255,.2); background:linear-gradient(#111a2c,#050811); box-shadow:0 -8px 28px rgba(28,202,255,.07); }
.console-rail span { width:34px; height:5px; margin-top:8px; border-radius:5px; background:#30445c; box-shadow:14px 9px 0 -1px #213145; }.console-rail span:nth-child(2),.console-rail span:nth-child(4){background:#55dfee;box-shadow:14px 9px 0 -1px #663ba4}
.question-area { position: relative; z-index: 1; width: min(720px, calc(100% - 34px)); padding: clamp(22px,4vw,38px); text-align: center; border: 1px solid rgba(107,227,255,.24); border-radius: 8px; background: linear-gradient(145deg,rgba(7,17,38,.94),rgba(4,8,23,.92)); box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 7px rgba(5,10,23,.62),inset 0 0 38px rgba(62,193,255,.035); }
.question-area::before { content:"SIGNAL / DECODE / LIVE"; position:absolute; top:9px; left:12px; color:rgba(129,231,255,.35); font-size:.43rem; font-weight:900; letter-spacing:.18em; }
.question-number { color: #8b97ae; font-size: .63rem; font-weight: 900; letter-spacing: .18em; }
.emoji-clue { min-height: 1.3em; margin: 18px 0 8px; padding:18px 14px; border:1px solid rgba(97,225,255,.16); border-radius:6px; background:linear-gradient(90deg,rgba(64,205,255,.03),rgba(164,70,255,.08),rgba(64,205,255,.03)); font-size: clamp(3rem,10vw,5.8rem); line-height: 1.25; letter-spacing: .06em; filter: drop-shadow(0 0 16px rgba(109,226,255,.22)); }
.question-area h2 { margin: 0 0 20px; font-size: clamp(1.15rem,3vw,1.55rem); }
.answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.answer-button { position: relative; min-height: 64px; padding: 12px 14px 12px 46px; text-align: left; border-color: rgba(105,214,255,.2); background: linear-gradient(145deg,rgba(24,37,76,.9),rgba(10,15,39,.95)); transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.answer-button:hover:not(:disabled) { border-color: rgba(117,240,255,.58); background: linear-gradient(145deg,rgba(34,54,104,.94),rgba(14,23,55,.97)); transform: translateY(-1px); }
.answer-button::before { content: attr(data-number); position: absolute; left: 13px; top: 50%; display: grid; width: 24px; height: 24px; place-items: center; transform: translateY(-50%); border: 1px solid rgba(120,231,255,.28); border-radius: 6px; color: #8fefff; font-size: .7rem; }
.answer-button.correct { border-color: #74f0c9; color: #a5ffe2; background: rgba(38,164,133,.22); }
.answer-button.wrong { border-color: #ff4b98; color: #ffc0da; background: rgba(181,37,98,.2); }
.answer-button:disabled { cursor: default; }
.key-hint { margin: 17px 0 0; color: #64728d; font-size: .57rem; font-weight: 800; letter-spacing: .1em; }
kbd { display: inline-grid; min-width: 22px; margin: 0 2px; padding: 3px 5px; place-items: center; border: 1px solid rgba(124,235,255,.22); border-bottom-width: 3px; border-radius: 5px; color: #b8f8ff; background: rgba(93,151,214,.12); font: inherit; }

.game-panel { position: absolute; inset: 50% auto auto 50%; z-index: 4; width: min(570px,calc(100% - 30px)); transform: translate(-50%,-50%); padding: clamp(22px,5vw,42px); text-align: center; border: 1px solid rgba(115,227,255,.32); border-radius: 8px; background: linear-gradient(145deg,rgba(8,17,39,.97),rgba(4,8,22,.98)); box-shadow: 0 26px 80px rgba(0,0,0,.72),0 0 0 7px rgba(3,8,20,.7),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.game-panel h2 { margin: 9px 0; font-size: clamp(1.5rem,4.5vw,2.35rem); }
.game-panel > p { margin: 0 auto 18px; max-width: 470px; color: #bac4d9; line-height: 1.5; }
.rule-row, .result-stats { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 21px; }
.rule-row span, .result-stats span { padding: 7px 9px; border: 1px solid rgba(113,234,255,.17); border-radius: 8px; color: #8996ad; background: rgba(255,255,255,.03); font-size: .62rem; font-weight: 800; letter-spacing: .06em; }
.result-stats strong { display: block; color: #8ff7e5; font-size: 1rem; }
.primary-button { padding: 14px 20px; border: 0; color: #030711; background: linear-gradient(110deg,#82f45b 0%,#55edcf 42%,#55d6ff 100%); box-shadow: 0 10px 30px rgba(75,226,211,.22); font-size: .75rem; letter-spacing: .08em; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hidden { display: none; }
.feedback { position: absolute; left: 50%; top: 18%; z-index: 3; transform: translate(-50%,-8px) scale(.95); opacity: 0; pointer-events: none; color: #fff; font-size: clamp(1.2rem,4vw,2rem); font-weight: 1000; font-style: italic; letter-spacing: .1em; text-align: center; text-shadow: 0 0 18px #16e5ff,0 4px 0 rgba(0,0,0,.35); transition: opacity .13s ease, transform .15s ease; }
.feedback.show { opacity: 1; transform: translate(-50%,0) scale(1); }
footer { padding: 13px 3px 0; color: #738099; font-size: .72rem; }
footer strong { color: #cbd5e8; }

@media (max-width: 650px) {
  .game-shell { padding: 11px; }
  .game-header { gap: 6px; }
  .brand-lockup { min-width: 0; gap: 8px; }
  .brand-mark { width: 43px; height: 43px; flex-basis: 43px; }
  .brand-lockup h1 { font-size: 1rem; letter-spacing: .06em; }
  .brand-lockup .eyebrow { font-size: .52rem; letter-spacing: .12em; }
  .trial-label { display: none; }
  .icon-button { flex: 0 1 auto; padding: 8px 6px; font-size: .53rem; white-space: nowrap; }
  .score-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; margin-top: 14px; padding-inline: 4px; }
  .score-strip div { min-width: 0; }
  .score-strip span { font-size: .44rem; letter-spacing: .025em; }
  .score-strip strong { font-size: .95rem; }
  .quiz-wrap { min-height: 570px; }
  .question-area { width: calc(100% - 22px); padding: 15px 11px; }
  .emoji-clue { margin-top: 8px; font-size: 3.2rem; }
  .question-area h2 { margin-bottom: 13px; font-size: 1rem; }
  .answer-grid { grid-template-columns: 1fr; gap: 7px; }
  .answer-button { min-height: 51px; padding: 9px 10px 9px 42px; font-size: .75rem; }
  .key-hint { display: none; }
  .game-panel { padding: 15px 13px; }
  .game-panel h2 { margin: 6px 0; font-size: 1.3rem; }
  .game-panel > p { margin-bottom: 11px; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.35; }
  .panel-tag { font-size: .53rem; }
  .rule-row { margin-bottom: 12px; }
  .rule-row span { padding: 5px 6px; font-size: .48rem; }
  .primary-button { padding: 11px 13px; font-size: .66rem; }
  .result-stats { margin-bottom: 11px; }
  footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }