:root{--ink:#2d2a4a;--bg:#2d2a4a;--card:#fffdf6;--acc:#f4b400;--ok:#2e9d5b;--no:#d9534f;--btn:#5b4bd6}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{font-family:"Rubik","Assistant","Segoe UI",Arial,sans-serif;color:var(--ink);background:#f6f3ff;-webkit-text-size-adjust:100%}
body.game{background:var(--bg);color:#fff;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.gbar{display:flex;align-items:center;gap:8px;padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top))}
.gbar .back,.gbar .snd{flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;display:grid;place-items:center;text-decoration:none;cursor:pointer}
.gbar .gt{flex:1 1 auto;min-width:0;font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbar img.rl-top{width:40px!important;height:40px!important;flex-basis:40px!important;margin:0!important}
.hud{display:flex;gap:6px;padding:0 10px 6px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.14);border-radius:999px;padding:4px 10px;font-size:14px;white-space:nowrap}
.guide{display:flex;gap:8px;align-items:flex-start;margin:0 10px 8px;background:#fffdf6;color:var(--ink);border-radius:14px;padding:8px 10px;min-height:64px;border:3px solid #6c5ce7;box-shadow:0 3px 0 #4a3db3}
.guide canvas{flex:0 0 40px;width:40px;height:40px;image-rendering:pixelated;background:#e9e4ff;border-radius:8px}
.guide .gbody{flex:1;min-width:0;font-size:15px;line-height:1.45}
.guide .gname{font-weight:800;color:#5b4bd6;font-size:13px}
.guide .gtitle{background:#f4b400;color:#2d2a4a;border-radius:6px;padding:0 6px;margin-inline-start:4px}
.guide.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
.stagewrap{flex:0 0 auto;padding:0 6px;display:flex;justify-content:center}
#stage{width:100%;max-width:960px;aspect-ratio:16/9;max-height:52vh;max-height:52dvh;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:10px;border:3px solid #1b1934;background:#8fd3ff;outline:none;touch-action:none;display:block}
.controls{direction:ltr;display:flex;justify-content:space-between;gap:8px;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.cb{flex:1;min-height:64px;border:0;border-radius:16px;background:#5b4bd6;color:#fff;font-size:28px;font-weight:800;box-shadow:0 5px 0 #3a2f9a;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;touch-action:none}
.cb small{font-size:12px;font-weight:700;margin-top:3px}
.cb.jump{background:#f28c28;box-shadow:0 5px 0 #b5621a}
.cb.read{background:#2e9d5b;box-shadow:0 5px 0 #1f6e3f;flex:.8}
.cb.down,.cb:active{transform:translateY(4px);box-shadow:0 1px 0 #3a2f9a}
.tip{margin:0 10px 10px;font-size:12px;opacity:.75;text-align:center}
.modal{position:fixed;inset:0;background:rgba(20,18,40,.72);display:flex;align-items:center;justify-content:center;padding:14px;z-index:20;overflow-y:auto;color:var(--ink)}
.modal[hidden]{display:none}
.modal.sheet{align-items:flex-end}
.card{background:var(--card);border-radius:20px;padding:18px 16px;width:100%;max-width:560px;border:4px solid #2d2a4a;box-shadow:0 6px 0 #2d2a4a;margin:auto}
.card.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.intro{text-align:center}
.badge{display:inline-block;background:#6c5ce7;color:#fff;border-radius:999px;padding:4px 12px;font-weight:700;font-size:14px}
.intro h1{font-size:26px;margin:10px 0 4px}
.sub{margin:0 0 6px;font-size:16px}
.grade{margin:0 0 10px;color:#6b6790;font-size:14px}
.pickq{margin:6px 0;font-weight:700}
.picks{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.pick{border:3px solid #d8d3f5;background:#f3f0ff;border-radius:14px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:16px;font-weight:700;color:var(--ink);min-width:120px}
.pick canvas{width:96px;height:64px;image-rendering:pixelated}
.pick.on{border-color:#6c5ce7;background:#e3ddff}
.big{display:block;width:100%;min-height:54px;border:0;border-radius:14px;font-size:18px;font-weight:800;cursor:pointer;margin:8px 0;text-decoration:none;text-align:center;padding:14px 12px;line-height:1.3;font-family:inherit}
.big.go{background:#2e9d5b;color:#fff;box-shadow:0 4px 0 #1f6e3f}
.big.alt{background:#ece8ff;color:#3a2f9a;box-shadow:0 4px 0 #c9c1f5}
.credit{margin:12px 0 0;font-size:14px;color:#6b6790;text-align:center}
.q{max-height:92vh;max-height:92dvh;overflow-y:auto}
.qhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.qcount{background:#2d2a4a;color:#fff;border-radius:8px;padding:3px 10px;font-weight:800;font-size:14px}
.qst{color:#5b4bd6;font-weight:700;font-size:14px}
.q h2{font-size:20px;line-height:1.4;margin:6px 0 12px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:10px;text-align:right;width:100%;min-height:54px;padding:10px 12px;border-radius:14px;border:3px solid #d8d3f5;background:#fff;font-size:17px;font-family:inherit;color:var(--ink);cursor:pointer;line-height:1.35}
.opt .ol{flex:0 0 32px;height:32px;border-radius:50%;background:#6c5ce7;color:#fff;display:grid;place-items:center;font-weight:800}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok);background:#e3f6ea}
.opt.right .ol{background:var(--ok)}
.opt.wrong{border-color:var(--no);background:#fdecea;opacity:.75;text-decoration:line-through}
.opt.wrong .ol{background:var(--no)}
.hint{margin-top:10px;background:#fff6d6;border:2px solid #f4b400;border-radius:12px;padding:8px 14px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink)}
.hint:disabled{opacity:.5}
.hinttext{background:#fff6d6;border-radius:10px;padding:8px 10px;margin:8px 0 0;font-size:16px}
.fb{margin-top:10px;border-radius:12px;padding:10px 12px;font-size:16px;line-height:1.5}
.fb.ok{background:#e3f6ea;border:2px solid var(--ok)}
.fb.no{background:#fdecea;border:2px solid var(--no)}
.end{text-align:center}
.trophy{font-size:54px}
.end h2{margin:4px 0;font-size:26px}
.stars{font-size:40px;letter-spacing:4px;color:#f4b400;margin:6px 0}
.endtext{font-size:17px;background:#f3f0ff;border-radius:12px;padding:10px}
@media (orientation:landscape) and (max-height:560px){
  body.game{direction:ltr;display:grid;grid-template-columns:128px minmax(0,1fr) 128px;grid-template-rows:auto auto 1fr;grid-template-areas:"lc bar rc" "lc guide rc" "lc stage rc"}
  .gbar,.guide,.modal,.hud{direction:rtl}
  .gbar{grid-area:bar;padding:4px 8px}
  .hud{display:none}
  .guide{grid-area:guide;min-height:0;margin:0 4px 4px;padding:4px 8px}
  .guide .gbody{font-size:13px}
  .guide canvas{width:28px;height:28px;flex-basis:28px}
  .stagewrap{grid-area:stage;align-items:flex-start;min-height:0;padding:0 2px}
  #stage{width:auto;max-width:100%;height:calc(100dvh - 118px);max-height:calc(100vh - 118px)}
  .controls{display:contents}
  #bLeft{grid-area:lc;align-self:end;margin:0 0 76px 8px;min-height:64px}
  #bRight{grid-area:lc;align-self:end;margin:0 0 8px 8px;min-height:64px}
  #bJump{grid-area:rc;align-self:end;margin:0 8px 8px 0;min-height:110px}
  #bRead{grid-area:rc;align-self:start;margin:8px 8px 0 0;min-height:56px}
  .tip{display:none}
  .gbar .gt{font-size:15px}
  .picks canvas{width:72px;height:48px}
  .intro h1{font-size:21px;margin:6px 0 2px}
  .big{min-height:46px;padding:10px;font-size:16px;margin:6px 0}
}
@media (orientation:landscape) and (max-height:560px){ .hudl{display:block} }
@media (min-width:900px) and (min-height:600px){ body.game{max-width:980px;margin:0 auto} }