:root { --red:#d8232a; --green:#2fa152; --navy:#0c1d3b; --gold:#ffd34d; --ink:#17324d; font-family:'Trebuchet MS','Segoe UI','Comic Sans MS',system-ui,sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:#0c1d3b; overflow:hidden; overscroll-behavior:none; }
body { -webkit-user-select:none; user-select:none; touch-action:none; }
#app { position:fixed; inset:0; background:#0c1d3b; }
#app canvas { position:absolute; left:0; top:0; display:block; touch-action:none; }
#ui { position:absolute; inset:0; pointer-events:none; font-size:clamp(10px, 2.5vmin, 17px); color:var(--ink); }
#hud { position:absolute; right:6px; top:6px; display:flex; gap:6px; pointer-events:auto; z-index:5; }
#hud button { width:clamp(28px, 6.4vmin, 40px); height:clamp(28px, 6.4vmin, 40px); border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.14); color:#fff; font-size:clamp(13px, 3vmin, 19px); cursor:pointer; padding:0; line-height:1; }
#hud button:active { transform:scale(.92); }
#toast { position:absolute; left:50%; top:calc(var(--sb, 60px) + 10px); transform:translate(-50%, -20px); background:#fff; border:2px solid var(--red); border-radius:99px; padding:.5em 1em; font-weight:800; opacity:0; transition:.3s; pointer-events:none; z-index:9; white-space:nowrap; max-width:96%; overflow:hidden; text-overflow:ellipsis; }
#toast.on { opacity:1; transform:translate(-50%, 0); }
.chip { position:absolute; left:50%; bottom:calc(5% + var(--safe, 0px)); transform:translate(-50%, 30px); opacity:0; pointer-events:none; background:#000; color:#fff; border:2px solid #fff; border-radius:99px; padding:.55em 1.1em; font-weight:800; text-decoration:none; transition:.25s; z-index:6; white-space:nowrap; }
.chip.on { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.scr { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:1.5vmin; pointer-events:none; z-index:4; }
.scr.on { display:flex; }
.scr .card { pointer-events:auto; width:min(94%, 24em); max-height:98%; overflow-y:auto; overflow-x:hidden; background:rgba(255,255,255,.93); border:3px solid var(--red); border-radius:1.2em; padding:.9em 1em; text-align:center; box-shadow:0 .5em 2em rgba(0,0,0,.35); display:flex; flex-direction:column; gap:.55em; -webkit-user-select:auto; user-select:auto; touch-action:pan-y; }
#scrTitle { align-items:flex-end; }
@media (min-aspect-ratio: 23/20) { #scrTitle { align-items:center; justify-content:flex-start; padding-left:1.5vmin; } #scrTitle .card { width:min(40%, 22em); } }
.logo { font-weight:900; font-size:2.5em; line-height:1; letter-spacing:.02em; color:#fff; -webkit-text-stroke:.09em var(--red); paint-order:stroke fill; text-shadow:0 .08em 0 #7a0f1c; }
.tag { font-weight:700; opacity:.8; font-size:.85em; margin-top:-.2em; }
.btn { display:block; font:inherit; font-weight:800; border:2.5px solid var(--ink); border-radius:.8em; background:#fff; color:var(--ink); padding:.55em .8em; cursor:pointer; text-decoration:none; box-shadow:0 .18em 0 var(--ink); }
.btn:active { transform:translateY(.12em); box-shadow:0 .06em 0 var(--ink); }
.btn.primary { background:var(--red); color:#fff; border-color:#7a0f1c; box-shadow:0 .18em 0 #7a0f1c; font-size:1.1em; }
.btn small { opacity:.85; font-weight:700; }
.btn[hidden], [hidden] { display:none !important; }
.row { display:flex; gap:.5em; align-items:center; justify-content:center; flex-wrap:wrap; } .row > * { flex:1 1 0; min-width:0; }
.row.small { font-size:.8em; font-weight:700; gap:.8em; } .row.small > * { flex:0 0 auto; }
.lnk { background:none; border:0; font:inherit; font-weight:700; color:#1558b0; text-decoration:underline; cursor:pointer; padding:0; }
input { font:inherit; padding:.5em .7em; border-radius:.7em; border:2px solid #9fb3c8; width:100%; min-width:0; text-align:center; -webkit-user-select:text; user-select:text; }
.how { font-size:.78em; opacity:.8; line-height:1.3; }
.chb { background:#fff4c9; border:2px dashed #e0a800; border-radius:.8em; padding:.5em; font-weight:700; }
.ovTop { display:flex; gap:.7em; align-items:center; justify-content:center; text-align:left; }
.bigscore { font-weight:900; font-size:4.4em; line-height:.9; color:#fff; -webkit-text-stroke:.05em var(--red); paint-order:stroke fill; text-shadow:0 .06em 0 #7a0f1c; }
.rank { font-weight:900; font-size:1.25em; } .sub { font-size:.78em; opacity:.8; font-weight:700; }
.grid { font-size:1.45em; letter-spacing:.06em; } .msg { font-weight:800; background:#eef7ff; border-radius:.7em; padding:.4em; }
.h2 { font-weight:900; font-size:1.3em; } .h3 { font-weight:800; font-size:.85em; text-align:left; margin-bottom:-.3em; }
.chips { display:flex; flex-wrap:wrap; gap:.35em; }
.chipbtn { font:inherit; font-size:.8em; font-weight:700; padding:.35em .7em; border-radius:99px; border:2px solid #9fb3c8; background:#fff; cursor:pointer; color:var(--ink); }
.chipbtn.sel { background:var(--green); color:#fff; border-color:#15663a; } .chipbtn.lock { opacity:.55; }
.vol { display:flex; align-items:center; gap:.5em; font-size:1.1em; } .vol input { flex:1; padding:0; accent-color:var(--red); }