:root{--brand-yellow:#fff200;--brand-orange:#f06305;--ink:#121212;--paper:#fffdf5;--muted:#3a2e1f;--panel:#120e08c7;--shadow:0 8px 28px #00000059;color:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#1a1208;font-family:Segoe UI,system-ui,-apple-system,Roboto,Ubuntu,sans-serif;line-height:1.4}*,:before,:after{box-sizing:border-box}html,body{touch-action:manipulation;background:radial-gradient(at 50% 20%,#3a2810 0%,#1a1208 55%,#0d0a06 100%);width:100%;height:100%;margin:0;padding:0;overflow:hidden}#app{width:100%;height:100%;min-height:100dvh;position:relative}#game-canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.hud{pointer-events:none;padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));z-index:2;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.hud-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.brand-pill{background:var(--brand-yellow);color:var(--ink);letter-spacing:.04em;box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:clamp(.85rem,2.5vw,1rem);font-weight:800;display:inline-flex}.brand-pill .brick{background:var(--brand-orange);border-radius:3px;width:18px;height:14px;position:relative;box-shadow:inset 0 -2px #0003}.brand-pill .brick:before,.brand-pill .brick:after{content:"";background:var(--brand-orange);border-radius:50%;width:5px;height:5px;position:absolute;top:-4px}.brand-pill .brick:before{left:3px}.brand-pill .brick:after{right:3px}.stats{flex-wrap:wrap;gap:8px;display:flex}.stat{pointer-events:none;background:var(--panel);border:2px solid var(--brand-yellow);color:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:6px 12px;font-size:clamp(.8rem,2.2vw,.95rem);font-weight:700}.stat strong{color:var(--brand-yellow)}.stat.lives strong{color:var(--brand-orange)}.hud-mid{justify-content:center;margin-top:8px;display:flex}.toast{background:var(--panel);border:2px solid var(--brand-orange);color:var(--paper);text-align:center;max-width:min(420px,92vw);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;padding:10px 16px;font-weight:600;transition:opacity .2s}.hud-bottom{flex-direction:column;align-items:center;gap:8px;display:flex}.footer{opacity:.85;color:#e8dcc8;text-align:center;font-size:.75rem}.footer a{color:var(--brand-yellow);font-weight:600;text-decoration:none}.overlay{z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;background:#0a0804b8;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0;overflow-y:auto}.overlay.hidden{display:none}.card{border:3px solid var(--brand-yellow);width:100%;max-width:420px;max-height:min(92dvh,900px);box-shadow:var(--shadow), 0 0 0 4px #f0630540;text-align:center;background:linear-gradient(160deg,#2a2114 0%,#1a140c 100%);border-radius:20px;padding:clamp(20px,4vw,32px);overflow-y:auto}.card-end{max-width:480px}.card h1{color:var(--brand-yellow);letter-spacing:.02em;margin:0 0 8px;font-size:clamp(1.35rem,4.5vw,1.85rem)}.card .subtitle{color:#f0e6d2;margin:0 0 16px;font-size:.95rem}.card p{color:#ddd2bc;margin:0 0 12px}.card .score-line{color:var(--paper);margin:16px 0;font-size:1.25rem;font-weight:800}.card .score-line span{color:var(--brand-orange)}.btn-row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}button.btn{appearance:none;cursor:pointer;font:inherit;pointer-events:auto;border:none;border-radius:999px;padding:12px 20px;font-weight:800;transition:transform .12s,filter .12s}button.btn:active{transform:scale(.97)}button.btn-primary{background:var(--brand-orange);color:#fff;box-shadow:0 4px #a34300}button.btn-primary:hover{filter:brightness(1.08)}button.btn-secondary{background:var(--brand-yellow);color:var(--ink);box-shadow:0 4px #c4b820}button.btn-ghost{color:var(--brand-yellow);border:2px solid var(--brand-yellow);background:0 0}.howto{text-align:left;color:#e4d8c0;border-left:4px solid var(--brand-orange);background:#00000040;border-radius:12px;margin:12px 0 18px;padding:12px 14px;font-size:.9rem}.howto li{margin:4px 0}.name-field{text-align:left;color:#f0e6d2;flex-direction:column;gap:6px;margin:0 0 8px;font-size:.85rem;font-weight:700;display:flex}.name-field input{appearance:none;font:inherit;border:2px solid var(--brand-yellow);color:var(--paper);background:#0f0c08;border-radius:12px;width:100%;padding:10px 12px;font-weight:600}.name-field input:focus{outline:2px solid var(--brand-orange);outline-offset:1px}.leaderboard{text-align:left;margin:4px 0 8px}.leaderboard h2{color:var(--brand-yellow);text-align:center;margin:0 0 8px;font-size:1rem}.leaderboard table{border-collapse:collapse;width:100%;font-size:.82rem}.leaderboard th,.leaderboard td{border-bottom:1px solid #fef03533;padding:6px}.leaderboard th{color:#cbb892;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:700}.leaderboard td:first-child,.leaderboard th:first-child{text-align:center;width:2.2em;color:var(--brand-yellow);font-weight:800}.leaderboard td:nth-child(3),.leaderboard td:nth-child(4),.leaderboard td:nth-child(5),.leaderboard th:nth-child(3),.leaderboard th:nth-child(4),.leaderboard th:nth-child(5){text-align:right;white-space:nowrap}.leaderboard tr.is-you{outline:1px solid var(--brand-orange);background:#f0630547}.leaderboard tr.is-you td:nth-child(2){color:var(--brand-yellow);font-weight:800}.leaderboard-gap td{text-align:center;color:#8a7b63;letter-spacing:.3em;border-bottom:none}.leaderboard-status{color:#cbb892;text-align:center;min-height:1.2em;margin:8px 0 0;font-size:.8rem}.share-box{resize:vertical;width:100%;min-height:72px;font:inherit;border:2px solid var(--brand-yellow);color:var(--paper);background:#0f0c08;border-radius:10px;margin-top:12px;padding:10px;font-size:.85rem}@media (width<=480px){.stat{padding:5px 9px}.card{border-width:2px}}
