:root{
  --bar:#ffffff; --ink:#0f2547; --muted:#46628c; --btn:#e7f4fc; --bg:#bfe7fb;
  --font:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --bar:#1f2d55; --ink:#eef4ff; --muted:#a9bbe0; --btn:#2b3c6c; --bg:#101a33; color-scheme:dark }}
:root[data-theme="dark"]{ --bar:#1f2d55; --ink:#eef4ff; --muted:#a9bbe0; --btn:#2b3c6c; --bg:#101a33; color-scheme:dark }
*{box-sizing:border-box}
html,body{margin:0; height:100%; background:var(--bg); overflow:hidden}
body{display:flex; flex-direction:column; height:100vh; height:100dvh; font-family:var(--font); color:var(--ink);
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0)}
.bar{flex:0 0 auto; display:flex; align-items:center; gap:10px; height:52px; padding:0 8px; background:var(--bar); box-shadow:0 2px 10px rgba(15,37,71,.12); position:relative; z-index:2}
.bar a, .bar button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:12px; background:var(--btn); color:var(--ink); font:600 .98rem var(--font); flex:0 0 auto}
.bar a:focus-visible, .bar button:focus-visible{outline:3px solid #ff7a1a; outline-offset:1px}
.bar svg{width:22px; height:22px}
.bar h1{margin:0; font-size:1.15rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 0 auto}
.bar .how{flex:1 1 auto; min-width:0; color:var(--muted); font-size:.9rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar [hidden]{display:none}
@media (max-width:640px){ .bar .how{display:none} .bar h1{flex:1 1 auto} .bar a span{display:none} }
.about{position:fixed; inset:calc(52px + env(safe-area-inset-top,0px)) 0 0; z-index:3; overflow:auto; padding:16px; background:rgba(8,18,40,.45); display:flex; justify-content:center; align-items:flex-start}
.about[hidden]{display:none}
.about .card{width:100%; max-width:560px; background:var(--bar); border-radius:18px; padding:20px 22px 22px; box-shadow:0 10px 30px rgba(0,0,0,.25); line-height:1.5}
.about h2{margin:0 0 8px; font-size:1.35rem; font-weight:700}
.about p{margin:0 0 10px; font-weight:500}
.about a{color:inherit; font-weight:600}
.about .free{color:var(--muted)}
.about .card button{all:unset; box-sizing:border-box; cursor:pointer; margin-top:6px; padding:12px 20px; border-radius:12px; background:#ffcc33; color:#4a3500; font:700 1rem var(--font)}
.about .card button:focus-visible{outline:3px solid #ff7a1a; outline-offset:2px}
#stage{flex:1 1 auto; position:relative; min-height:0; background:var(--bg)}
#game{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--bg)}