:root{--bg1:#1d3866;--bg2:#0d1a38;--card:rgba(255,255,255,.1);--gold1:#fde047;--gold2:#f59e0b;--ink:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:linear-gradient(180deg,var(--bg1),var(--bg2)) fixed var(--bg2);min-height:100%}
html,body{margin:0;min-height:100%;color:var(--ink);overscroll-behavior:none;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-user-select:none;user-select:none}
body{min-height:100vh;background:transparent}
.wrap{max-width:30rem;margin:0 auto;padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:1rem}
.top{display:flex;flex-direction:column;gap:.2rem;padding-top:.4rem}
.logo{font-size:2rem;font-weight:800;letter-spacing:.01em}
.logo b{background:linear-gradient(#fff2b0,#f6b73c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hello{font-size:1rem;opacity:.85;min-height:1.3em}
.list{display:flex;flex-direction:column;gap:.9rem}
.note{padding:1rem;text-align:center;opacity:.8}
.card{display:grid;grid-template-columns:5.5rem 1fr;gap:.9rem;align-items:center;padding:.9rem;border-radius:1.2rem;background:var(--card);border:1px solid rgba(255,255,255,.14);text-align:left;color:inherit;font:inherit;width:100%;cursor:pointer}
.card:active{transform:scale(.985)}
.card.soon{opacity:.55;cursor:default}
.card.soon:active{transform:none}
.art{width:5.5rem;height:5.5rem;border-radius:1rem;overflow:hidden;background:#9ad8f0;display:block}
.art svg{width:100%;height:100%;display:block}
.ttl{font-size:1.25rem;font-weight:800;line-height:1.15}
.sub{font-size:.8rem;opacity:.7;margin-bottom:.15rem;letter-spacing:.04em;text-transform:uppercase}
.dsc{font-size:.9rem;opacity:.9;margin:.2rem 0 .5rem}
.prog{font-size:.8rem;opacity:.85;margin-bottom:.5rem}
.play{display:inline-block;font-weight:800;border-radius:99px;padding:.45rem 1.3rem;background:linear-gradient(var(--gold1),var(--gold2));color:#3b1d00;box-shadow:0 .15rem 0 #b45309}
.msg{padding:1.2rem;border-radius:1.2rem;background:var(--card);border:1px solid rgba(255,255,255,.14);line-height:1.45}
.msg h2{margin:0 0 .4rem;font-size:1.3rem}
.msg p{margin:.4rem 0}
.msg code{display:inline-block;padding:.1rem .6rem;border-radius:.5rem;background:rgba(0,0,0,.3);font-size:1.1rem;letter-spacing:.05em;user-select:text;-webkit-user-select:text}
.gamebox{position:fixed;inset:0;background:#0b1224;z-index:10}
.gamebox[hidden]{display:none}
.gamebox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b1224}
.back{position:absolute;left:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom,0px));z-index:11;border:2px solid #d6ecff;border-radius:.7rem;padding:.35rem .8rem;font:inherit;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(#5db9ff,#1f78e0);box-shadow:0 .1rem 0 #12479a;opacity:.0}
.gamebox.nobar .back{opacity:1}