:root{--bg0: var(--tg-theme-bg-color, #1a1410);--bg1: var(--tg-theme-secondary-bg-color, #2a1f18);--bg2: #3d2a1c;--ink: #141210;--paper: var(--tg-theme-text-color, #fff6e8);--paper-dim: #f0e0c8;--red: #c42828;--red-deep: #8e1a1a;--sky: #6eb6d4;--grass: #5c8c3e;--accent: var(--tg-theme-button-color, #f0b429);--muted: var(--tg-theme-hint-color, #b8a890);--shadow: rgba(0, 0, 0, .45);--font-display: "Bangers", "Comic Sans MS", cursive;--font-ui: "Nunito", "Trebuchet MS", sans-serif;--radius: 10px;--stage-max: 1480px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 50% -10%,#4a3020 0%,transparent 55%),linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 55%,#120e0c 100%);color:var(--paper);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}body{overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 20px 28px;gap:10px}.topbar{width:min(100%,var(--stage-max));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:4px 2px}.brand-mark img{display:block;image-rendering:pixelated;filter:drop-shadow(0 2px 0 var(--ink))}.topbar-title{margin:0;font-family:var(--font-display);font-size:1.35rem;letter-spacing:.06em;color:var(--accent);text-shadow:2px 2px 0 var(--ink)}.topbar-actions{display:flex;gap:6px}.stage{width:min(100%,var(--stage-max));display:flex;flex-direction:column;gap:14px}.canvas-wrap{position:relative;width:100%;aspect-ratio:16 / 9;max-height:min(72vh,780px);background:var(--sky);border:5px solid var(--ink);border-radius:8px;overflow:hidden;box-shadow:0 0 0 4px var(--red),0 16px 36px var(--shadow);touch-action:none;-webkit-user-select:none;user-select:none}#game{display:block;width:100%;height:100%;image-rendering:auto;background:var(--sky)}.hud{position:absolute;inset:10px 12px auto 12px;display:flex;justify-content:space-between;pointer-events:none;font-family:var(--font-display);font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:.04em;color:var(--paper);text-shadow:2px 2px 0 var(--ink);z-index:2}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:linear-gradient(180deg,#1a14108c,#1a1410d1),repeating-linear-gradient(-12deg,transparent,transparent 8px,rgba(196,40,40,.05) 8px,rgba(196,40,40,.05) 16px);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overlay.hidden,.hud.hidden,.hidden{display:none!important}.logo{margin:0;font-family:var(--font-display);font-size:clamp(3rem,12vw,5.5rem);line-height:.95;letter-spacing:.04em;color:var(--red);text-shadow:4px 4px 0 var(--ink),-2px 0 0 var(--accent),0 6px 0 var(--red-deep)}.tagline{margin:0 0 8px;font-weight:800;color:var(--paper-dim);max-width:28ch}.player-chip{margin:0;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:800;font-size:.9rem}.menu-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid var(--ink);border-radius:var(--radius);padding:.65rem 1.15rem;font-family:var(--font-ui);font-weight:800;font-size:1rem;cursor:pointer;color:var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease}.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.btn-primary{background:var(--accent)}.btn-secondary{background:var(--paper-dim)}.btn-ghost{background:transparent;color:var(--paper);box-shadow:none;border-color:transparent;padding:.4rem .65rem}.btn-ghost:hover{background:#fff6e81a;box-shadow:none;transform:none}.panel-title{margin:0;font-family:var(--font-display);font-size:clamp(2rem,7vw,3rem);letter-spacing:.04em;color:var(--accent);text-shadow:3px 3px 0 var(--ink)}.score-line{margin:0;font-size:1.35rem;font-weight:800}.rank-line{margin:0;color:var(--muted);min-height:1.2em}.progress{width:min(280px,70%);height:14px;border:3px solid var(--ink);border-radius:999px;background:var(--bg2);overflow:hidden}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--red),var(--accent));transition:width .12s linear}.board-list{margin:0;padding:0;list-style:none;width:min(360px,100%);max-height:min(240px,42vh);overflow:auto;text-align:left;border:3px solid var(--ink);border-radius:var(--radius);background:#fff6e8f2;color:var(--ink)}.board-list li{display:grid;grid-template-columns:2rem 1fr auto;gap:8px;padding:8px 12px;border-bottom:2px solid rgba(20,18,16,.12);font-weight:800}.board-list li:last-child{border-bottom:none}.board-list li.highlight{background:#ffe08a}.board-status{margin:0;min-height:1.2em;color:var(--muted);font-size:.9rem}.name-form{display:flex;flex-direction:column;gap:12px;width:min(320px,100%)}.name-form input{width:100%;padding:.75rem .9rem;border:3px solid var(--ink);border-radius:var(--radius);font:inherit;font-weight:800;background:var(--paper);color:var(--ink)}.how-list{margin:0;padding:0 0 0 1.1rem;text-align:left;max-width:34ch;color:var(--paper-dim);font-weight:600;line-height:1.45}.how-list strong{color:var(--accent)}.ad-rail{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,246,232,.28);border-radius:6px;background:#00000047;color:var(--muted);overflow:hidden;min-height:90px}.ad-slot--leaderboard{flex:1 1 728px;min-height:110px;max-width:970px}.ad-slot--mobile{flex:1 1 300px;min-height:120px;max-width:336px}.ad-label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}.footer{margin-top:8px;color:var(--muted);font-size:.85rem;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-width:640px){.topbar-title{font-size:1rem}.menu-actions .btn{width:min(220px,100%)}}@media(prefers-reduced-motion:reduce){.btn,.progress-bar{transition:none}}body.tg-mode .topbar,body.tg-mode .footer,body.tg-mode .ad-rail{display:none!important}body.tg-mode #app{padding:4px 4px 0;gap:0;min-height:100dvh}body.tg-mode .stage{gap:0}body.tg-mode .canvas-wrap{max-height:100dvh;border:none;border-radius:0;box-shadow:none;aspect-ratio:auto;flex:1}