:root{--ink: #1b1430;--ink-2: #261c45;--panel: rgba(26, 18, 52, .9);--line: rgba(255, 214, 150, .28);--sun: #ffb347;--gold: #ffd66b;--rose: #ff6fae;--sky: #6fc7ff;--mint: #6effc0;--text: #fff4e6;--muted: #c9b9dd;--focus: #ffe14d;--font: "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--text);font-family:var(--font)}body{overflow:hidden;-webkit-tap-highlight-color:transparent}button,input{font-family:inherit}#app{position:fixed;inset:0}#play{position:absolute;inset:0;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);display:grid;grid-template-columns:0 1fr 0;grid-template-rows:auto 1fr;grid-template-areas:"hud hud hud" "pad stage bomb"}#stage{grid-area:stage;position:relative;min-width:0;min-height:0}#stage canvas{display:block;touch-action:none}#hud{grid-area:hud}.touch-control{display:none}body.touch.in-match .touch-control{display:flex}body.touch.in-match #play{grid-template-columns:minmax(140px,21vw) 1fr minmax(140px,21vw)}@media(max-height:520px){#hud{min-height:34px;padding:3px 8px;gap:6px}.hud-timer{font-size:17px;min-width:54px;padding:1px 6px}.chip{font-size:12px;padding:1px 6px 1px 2px}.chip img{width:20px;height:20px}.hud-status{display:none}.hud-btn{padding:4px 10px}}@media(orientation:portrait){body.touch.in-match #play{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 210px;grid-template-areas:"hud hud" "stage stage" "pad bomb"}}#pad{grid-area:pad;align-self:center;justify-self:center;width:min(170px,38vw);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle,#ffffff1f 0 22%,#ffffff0f 23% 60%,#ffffff08 61%);border:2px solid rgba(255,255,255,.25);touch-action:none;user-select:none;-webkit-user-select:none}#pad .arrow{position:absolute;width:0;height:0;border:16px solid transparent;opacity:.75}#pad .up{top:10%;left:50%;transform:translate(-50%);border-bottom:22px solid var(--text);border-top:0}#pad .down{bottom:10%;left:50%;transform:translate(-50%);border-top:22px solid var(--text);border-bottom:0}#pad .left{left:10%;top:50%;transform:translateY(-50%);border-right:22px solid var(--text);border-left:0}#pad .right{right:10%;top:50%;transform:translateY(-50%);border-left:22px solid var(--text);border-right:0}#pad[data-dir=up] .up,#pad[data-dir=down] .down,#pad[data-dir=left] .left,#pad[data-dir=right] .right{opacity:1;filter:drop-shadow(0 0 8px var(--gold))}#pad[data-dir=up] .up{border-bottom-color:var(--gold)}#pad[data-dir=down] .down{border-top-color:var(--gold)}#pad[data-dir=left] .left{border-right-color:var(--gold)}#pad[data-dir=right] .right{border-left-color:var(--gold)}#bombBtn{grid-area:bomb;align-self:center;justify-self:center;width:min(132px,34vw);aspect-ratio:1;border-radius:50%;border:4px solid #fff4e6;color:#fff4e6;font-weight:900;font-size:20px;letter-spacing:.06em;background:radial-gradient(circle at 35% 30%,#ff8a5c,#e0362c 55%,#8f1a22);box-shadow:0 6px #5d0f16,0 10px 24px #00000073;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform 60ms}#bombBtn.pressed{transform:translateY(4px) scale(.96);box-shadow:0 2px #5d0f16}#hud{display:flex;align-items:center;gap:10px;padding:6px 10px;min-height:44px;background:linear-gradient(180deg,#140c28eb,#140c2899);border-bottom:1px solid var(--line);z-index:2}#hud[hidden]{display:none}.hud-timer{font-weight:900;font-size:22px;min-width:66px;text-align:center;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:8px;background:#0000004d}.hud-timer.sudden{color:#fdd;background:#b3202a;animation:pulse .8s infinite alternate}.hud-players{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none}.chip{display:flex;align-items:center;gap:5px;padding:2px 8px 2px 3px;border-radius:99px;background:#ffffff14;white-space:nowrap;font-size:14px;border:2px solid transparent}.chip img{width:26px;height:26px;border-radius:50%}.chip.out{opacity:.4;filter:grayscale(.8);text-decoration:line-through}.chip .wins{letter-spacing:1px;color:var(--gold);font-size:12px}.hud-btn{border:1px solid var(--line);background:#ffffff14;color:var(--text);border-radius:10px;padding:6px 12px;font-weight:700;cursor:pointer}.hud-status{font-size:12px;color:var(--muted)}@keyframes pulse{to{filter:brightness(1.3)}}#screens{position:absolute;inset:0;pointer-events:none;z-index:5}.screen{position:absolute;inset:0;pointer-events:auto;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));background:radial-gradient(ellipse at 50% 30%,#2814508c,#0f081ed1);animation:fadein .22s ease-out}.screen.clear{background:transparent;pointer-events:none}.screen.clear>*{pointer-events:auto}@keyframes fadein{0%{opacity:0;transform:translateY(6px)}}@media(prefers-reduced-motion:reduce){.screen{animation:none}}body.reduced .screen,body.reduced .banner{animation:none!important}.panel{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px 22px 18px;box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.panel.wide{width:min(780px,100%)}.panel h2{margin:0 0 6px;font-size:26px;letter-spacing:.02em}.panel p{color:var(--muted);line-height:1.45;margin:6px 0 12px}.panel .note{font-size:13px;color:var(--muted)}.logo{text-align:center;margin:0 0 4px;line-height:.9;font-weight:900;font-size:clamp(42px,9vw,78px);letter-spacing:.02em;background:linear-gradient(180deg,#fff3b0,#ffb347 45%,#ff5f8f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a1745) drop-shadow(0 0 18px rgba(255,120,80,.45))}.tagline{text-align:center;color:var(--gold);font-weight:700;margin:6px 0 18px;letter-spacing:.04em}.menu{display:grid;gap:10px}.menu.two{grid-template-columns:1fr 1fr}.btn{appearance:none;border:0;border-radius:14px;padding:13px 16px;font-size:18px;font-weight:800;letter-spacing:.02em;color:#2a1030;background:linear-gradient(180deg,#ffe08a,#ffad4d);box-shadow:0 4px #a8551d;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform 80ms,filter 80ms}.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(3px);box-shadow:0 1px #a8551d}.btn.alt{color:var(--text);background:linear-gradient(180deg,#4a3a7a,#33275a);box-shadow:0 4px #1c1438}.btn.small{font-size:15px;padding:9px 12px}.btn.ghost{color:var(--text);background:transparent;box-shadow:none;border:1px solid var(--line)}.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end}.spacer{flex:1}.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}.seg button{flex:1;border:0;padding:10px 12px;background:transparent;color:var(--text);font-weight:700;font-size:15px;cursor:pointer}.seg button[aria-pressed=true]{background:linear-gradient(180deg,#ffe08a,#ffad4d);color:#2a1030}label.field{display:grid;gap:4px;font-weight:700;font-size:14px;color:var(--muted)}input[type=text]{font-size:18px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0000004d;color:var(--text)}input[type=range]{width:100%;accent-color:var(--sun)}.toggle{display:flex;align-items:center;gap:10px;font-weight:700;padding:6px 0;cursor:pointer}.toggle input{width:22px;height:22px;accent-color:var(--sun)}.keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.keycard{border:1px solid var(--line);border-radius:14px;padding:12px;background:#ffffff0a}.keycard h3{margin:0 0 6px;font-size:16px;display:flex;gap:8px;align-items:center}kbd{display:inline-block;min-width:26px;padding:3px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.35);border-bottom-width:3px;background:#ffffff14;font-family:inherit;font-weight:800;font-size:13px;text-align:center}.pu-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.pu{display:flex;gap:10px;align-items:center;font-size:14px}.pu img{width:40px;height:40px;flex:none}.pu b{display:block;color:var(--text)}.pu span{color:var(--muted)}.players{display:grid;gap:6px;margin:10px 0}.player-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:#ffffff0d}.player-row img{width:34px;height:34px}.player-row .name{flex:1;font-weight:700}.badge{font-size:12px;font-weight:800;padding:3px 8px;border-radius:99px;background:#ffffff1f}.badge.ready{background:#2f9e5e}.badge.host{background:#7b4bd1}.badge.bot{background:#555}.room-code{font-size:40px;font-weight:900;letter-spacing:.18em;text-align:center;color:var(--gold);margin:4px 0;font-variant-numeric:tabular-nums}.conn{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}.conn:before{content:"";width:9px;height:9px;border-radius:50%;background:#888}.conn.ok:before{background:#4be08a}.conn.bad:before{background:#ff5a5a}.conn.wait:before{background:#ffcc4d}.error{color:#ffb0b0;font-weight:700;min-height:1.3em}.banner{pointer-events:none;text-align:center;font-weight:900;text-shadow:0 4px 0 #3a1745,0 0 24px rgba(0,0,0,.6)}.banner.count{font-size:clamp(64px,16vw,150px);color:var(--gold);animation:pop .9s ease-out}.banner.msg{font-size:clamp(28px,6vw,56px);color:var(--text);animation:pop .5s ease-out}.banner.sd{font-size:clamp(26px,5vw,48px);color:#ff6b6b;animation:pop .5s ease-out}.banner small{display:block;font-size:.4em;color:var(--gold);letter-spacing:.06em;margin-top:6px}@keyframes pop{0%{transform:scale(1.6);opacity:0}30%{transform:scale(1);opacity:1}}.results{display:grid;gap:8px;margin:12px 0}.result-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:#ffffff0d}.result-row.win{background:linear-gradient(90deg,#ffd66b4d,#ffffff0d)}.result-row img{width:34px;height:34px}.winner-hero{display:flex;flex-direction:column;align-items:center;gap:4px}.winner-hero img{width:120px;height:120px;filter:drop-shadow(0 8px 0 rgba(0,0,0,.3))}body:not(.reduced) .winner-hero img{animation:bounce 1s ease-in-out infinite alternate}@keyframes bounce{to{transform:translateY(-8px)}}#toast{position:fixed;left:50%;bottom:calc(16px + var(--safe-b));transform:translate(-50%);z-index:20;pointer-events:none;background:#140c28f2;border:1px solid var(--line);padding:10px 16px;border-radius:12px;font-weight:700;opacity:0;transition:opacity .2s;max-width:90vw;text-align:center}#toast.show{opacity:1}.desktop-only-note{display:none}body.touch .desktop-only-note{display:block;color:#ffd0a0;font-weight:700}@media(max-height:520px){.panel{padding:14px 16px 12px}.logo{font-size:44px}.tagline{margin-bottom:10px}.btn{padding:9px 12px;font-size:16px}.menu{gap:7px}}.share{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:12px}.share-label{width:100%;text-align:center;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.share-btn{appearance:none;border:0;cursor:pointer;text-decoration:none;font-weight:800;font-size:13px;padding:7px 11px;border-radius:99px;color:#fff;background:#4a3a7a}.share-btn.facebook{background:#1877f2}.share-btn.whatsapp{background:#1fa855}.share-btn.x{background:#111;border:1px solid rgba(255,255,255,.3)}.share-btn.native{background:linear-gradient(180deg,#ffe08a,#ffad4d);color:#2a1030}.share-btn:hover{filter:brightness(1.12)}.credit{margin-top:12px;text-align:center;font-size:13px;color:var(--muted)}.credit a{color:var(--gold);font-weight:800;text-decoration:none}.credit a:hover{text-decoration:underline}.nudge{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));width:min(340px,calc(100% - 32px));z-index:6;background:var(--panel);border:1px solid var(--gold);border-radius:18px;padding:14px 16px;box-shadow:0 16px 40px #00000080;text-align:center;animation:fadein .3s ease-out}.nudge p{color:var(--muted);font-size:14px;margin:6px 0 4px;line-height:1.4}.nudge .btn{margin:10px auto 0}@media(max-height:520px){.share{margin-top:8px}.credit{margin-top:6px;font-size:12px}.nudge{display:none}}.board{display:grid;gap:5px;margin:12px 0;max-height:min(52vh,520px);overflow-y:auto}.board-row{display:grid;grid-template-columns:34px 1fr auto;grid-template-areas:"rank name pts" "rank detail detail";column-gap:10px;align-items:center;padding:7px 12px;border-radius:12px;background:#ffffff0d}.board-row .rank{grid-area:rank;font-weight:900;font-size:18px;color:var(--muted);text-align:center}.board-row .name{grid-area:name}.board-row .pts{grid-area:pts;color:var(--gold);font-variant-numeric:tabular-nums}.board-row .detail{grid-area:detail;font-size:12px;color:var(--muted)}.board-row.top .rank{color:var(--gold)}.board-row.me{outline:2px solid var(--gold)}.submit-row{margin:10px 0 2px}.submit-row input{flex:1;min-width:0}#lbStatus a{color:var(--gold)}