:root { --ink:#102a43; --blue:#1455d9; --green:#16834a; --red:#c63737; --paper:#f4f8fb; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; font-family:Georgia,serif; color:var(--ink); background:radial-gradient(circle at 20% 10%,#fff 0 12%,transparent 35%),linear-gradient(135deg,#e9f3f8,#f8f2e7); }
body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; background:rgba(198,55,55,0); }
body.wrong-pulse::before { animation:wrongPagePulse .76s ease-out; }
.prototype-shell { height:calc(100dvh - 72px); min-height:520px; padding:12px 18px 16px; display:grid; place-items:center; overflow:hidden; }
.game { width:min(1380px,98vw); height:100%; min-height:0; padding:14px; border:1px solid #cbd9e3; border-radius:28px; background:rgba(255,255,255,.92); box-shadow:0 24px 70px #18364d24; display:grid; grid-template-columns:minmax(185px,215px) minmax(0,1fr) minmax(185px,215px); gap:14px; overflow:hidden; }
.game.wrong-pulse { animation:wrongPulse .72s ease-out; }
.side-panel { min-width:0; min-height:0; padding:11px; border:1px solid #d4e1e8; border-radius:20px; background:linear-gradient(160deg,#fbfdff,#edf4f7); display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.side-panel.right { background:linear-gradient(160deg,#fffdf7,#f2eee3); }
.brand { padding:4px 4px 10px; border-bottom:1px solid #cfdae1; }
.brand small { color:#31617c; font:800 .65rem system-ui,sans-serif; letter-spacing:.11em; }
h1 { margin:.25rem 0 0; font-size:clamp(1.35rem,2.5vw,2rem); line-height:1; }
.stat-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.stat-card { min-height:62px; padding:9px; border:1px solid #d4e0e7; border-radius:15px; background:#fff; box-shadow:0 7px 18px #1737530d; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.stat-card::before { color:#648094; font:800 .64rem system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.stat-card::before { content:attr(data-label); }
.stat-card strong { white-space:pre-line; font-size:clamp(.8rem,1.2vw,.98rem); line-height:1.25; overflow-wrap:anywhere; }
.start-settings { padding:7px; border:1px solid #d4e0e7; border-radius:15px; background:#fff; display:grid; gap:6px; }
.setting-group { display:grid; gap:5px; }
.setting-label { color:#648094; font:800 .58rem system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.setting-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.setting-buttons.level-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
.setting-buttons.level-buttons .setting-button { font-size:clamp(.58rem,.72vw,.72rem); }
.setting-button { min-width:0; min-height:34px; padding:6px 3px; border:2px solid #9eb2c1; border-radius:10px; background:linear-gradient(#fff,#edf3f6); color:var(--ink); font:800 clamp(.5rem,.58vw,.62rem)/1.1 system-ui,sans-serif; cursor:pointer; overflow-wrap:anywhere; box-shadow:0 3px 8px #17375318; transition:border-color .16s,background .16s,box-shadow .16s,transform .16s; }
.setting-button:hover,.setting-button:focus-visible { border-color:#4f7ba6; background:#eef5ff; outline:2px solid #a9c7f5; outline-offset:1px; }
.setting-button[aria-pressed="true"] { border-color:var(--blue); background:linear-gradient(145deg,#e7efff,#d7e5ff); color:#083d9c; box-shadow:inset 0 0 0 1px #fff,0 0 0 2px #8fb4f4,0 5px 12px #1455d92b; transform:translateY(-1px); }
.game-stage { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
.speed-setting { padding:10px; border:1px solid #d4e0e7; border-radius:15px; background:rgba(255,255,255,.96); display:grid; gap:7px; box-shadow:0 7px 18px #1737530d; }
.speed-setting label { color:#36566b; font:800 .67rem system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.speed-setting input { width:100%; min-width:0; accent-color:var(--blue); cursor:pointer; }
.speed-setting output { color:#0b45b7; font:800 .72rem system-ui,sans-serif; text-align:center; white-space:nowrap; }
.speed-ticks { display:flex; justify-content:space-between; color:#607b8d; font:700 .52rem system-ui,sans-serif; }
.question { padding:14px 18px; border-radius:18px; background:#fff; border:1px solid #d8e2e9; text-align:center; font-size:clamp(1.05rem,2.5vw,1.65rem); font-weight:700; }
.blank { color:var(--blue); border-bottom:3px dashed currentColor; padding:0 .7em; }
.arena { position:relative; min-height:0; border-radius:20px; overflow:hidden; background:linear-gradient(#e7f4ff,#f8fbfd 72%,#d9e8d5); border:1px solid #c9dce7; }
.arena::after { content:attr(data-zone-label); position:absolute; inset:auto 0 0; padding:12px; text-align:center; font:700 .75rem sans-serif; letter-spacing:.12em; color:#507061; border-top:2px dashed #85a895; }
.choice { --choice-half:min(76px,calc(47% / var(--choice-columns))); position:absolute; top:-58px; width:min(152px,calc(94% / var(--choice-columns))); min-height:48px; padding:7px 5px; overflow-wrap:anywhere; border:2px solid #2c65b4; border-radius:14px; color:#123b6e; background:#fff; font:700 clamp(.7rem,1.55vw,1rem) Georgia,serif; box-shadow:0 8px 20px #17375325; cursor:pointer; animation:fall var(--duration) linear forwards; }
.choice:hover,.choice:focus-visible { background:#e9f2ff; outline:3px solid #8eb7ff; }
.arena.is-paused .choice { animation-play-state:paused; }
.feedback { min-height:42px; padding:10px 14px; border-radius:14px; font-family:system-ui,sans-serif; font-size:.88rem; font-weight:700; }
.review { position:absolute; inset:18px; z-index:4; overflow:auto; padding:18px; border-radius:18px; background:#fff; box-shadow:0 16px 50px #17375338; }
.review h2 { margin-top:0; }
.review article { padding:12px 0; border-top:1px solid #dbe5eb; }
.review strong { color:var(--red); }
.review-translation { padding:8px 10px; border-left:3px solid #d59b2d; border-radius:7px; background:#fff8e8; color:#614715; }
button.control { width:100%; margin-top:auto; border:0; border-radius:12px; padding:11px 12px; background:var(--ink); color:#fff; font-weight:800; cursor:pointer; }
button.control + button.control { margin-top:0; }
button.control:disabled { opacity:.48; cursor:not-allowed; }
button.control.secondary { background:#e8eef2; color:var(--ink); }
@keyframes fall { to { top:calc(100% - 60px); } }
@keyframes wrongPulse {
  0%,100% { border-color:#cbd9e3; box-shadow:0 24px 70px #18364d24; }
  14%,38% { border-color:rgba(198,55,55,.78); box-shadow:0 0 0 6px rgba(198,55,55,.20),0 24px 70px #18364d24; }
  26%,52% { border-color:rgba(198,55,55,.16); box-shadow:0 0 0 2px rgba(198,55,55,.05),0 24px 70px #18364d24; }
}
@keyframes wrongPagePulse {
  0%,100% { background:rgba(198,55,55,0); }
  12%,42% { background:rgba(198,55,55,.18); }
  27%,57% { background:rgba(198,55,55,0); }
}
@media (prefers-reduced-motion:reduce) {
  .game.wrong-pulse { animation:none; border-color:rgba(198,55,55,.78); box-shadow:0 0 0 5px rgba(198,55,55,.18); }
  body.wrong-pulse::before { animation:none; background:rgba(198,55,55,.12); }
}
@media (max-height:720px) and (min-width:761px) {
  .prototype-shell { padding-block:8px; }
  .game { padding:10px; gap:10px; }
  .side-panel { padding:8px; gap:6px; }
  .brand { padding-bottom:6px; }
  .brand small { display:none; }
  .stat-card { min-height:50px; padding:6px; }
  .start-settings { padding:5px; gap:4px; }
  .setting-button { min-height:28px; padding:4px; }
  .question { padding:9px 14px; }
  button.control { padding:8px 10px; }
}
@media (max-width:760px) {
  .prototype-shell { height:calc(100dvh - 65px); min-height:0; padding:0; }
  .game { width:100%; height:100%; min-height:0; padding:7px; border:0; border-radius:0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; gap:6px; }
  .game-stage { grid-column:1 / -1; grid-row:1; }
  .side-panel { grid-column:1; grid-row:2; min-height:0; padding:6px; border-radius:13px; gap:5px; }
  .side-panel.right { grid-column:2; grid-row:2; display:grid; grid-template-rows:minmax(0,1fr) auto; align-content:stretch; }
  .game > .side-panel:not(.right) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
  .game > .side-panel:not(.right) .brand { grid-column:1 / -1; margin:0; padding:0 2px 4px; writing-mode:horizontal-tb; transform:none; }
  .brand small { display:none; }
  .brand h1 { margin:0; font-size:.86rem; line-height:1.05; text-align:left; }
  .game > .side-panel:not(.right) .stat-pair { display:contents; }
  .stat-card { min-height:34px; padding:4px 3px; border-radius:9px; text-align:center; }
  .stat-card::before { font-size:.5rem; letter-spacing:.04em; }
  .stat-card strong { font:800 .6rem/1.12 system-ui,sans-serif; }
  .start-settings { min-height:0; padding:5px; gap:4px; }
  .setting-group { gap:3px; }
  .setting-label { font-size:.45rem; }
  .setting-buttons { gap:3px; }
  .setting-buttons.level-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .setting-buttons.level-buttons .setting-button { min-height:22px; padding:2px 1px; font-size:.48rem; white-space:nowrap; }
  .setting-button { min-height:22px; padding:2px; border-width:1.5px; font-size:.5rem; }
  .speed-setting { padding:5px; gap:3px; }
  .speed-setting label { font-size:.5rem; }
  .speed-setting output { min-width:0; font-size:.52rem; text-align:center; white-space:normal; }
  .speed-ticks { display:none; }
  .question { padding:11px 9px; font-size:clamp(.88rem,3.6vw,1.16rem); }
  .arena { min-height:0; }
  .feedback { min-height:36px; padding:7px 8px; font-size:.68rem; }
  button.control { width:auto; min-height:34px; margin:0; padding:7px 4px; font-size:.64rem; }
}