:root{--red:#ef172f;--line:rgba(255,255,255,.1);--muted:#8f9099}*{box-sizing:border-box}[hidden],.hidden{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -15%,#28060a,#0b0b0e 38%,#050506 75%);color:#f5f5f7;font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px}.topbar{width:min(100% - 36px,1500px);height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.rx-brand{display:flex;align-items:center;gap:12px;text-decoration:none}.rx-logo{width:170px}.rx-game-label{color:#ff5365;font-weight:950;letter-spacing:.16em}.top-actions{display:flex;align-items:center;gap:10px}.top-btn,.tag{border:1px solid var(--line);background:#111116;color:#fff;border-radius:11px;padding:10px 13px;font-weight:900}.status-pill{display:flex;align-items:center;gap:8px;color:#aaaab2;font-size:11px;font-weight:900}.status-pill i{width:7px;height:7px;border-radius:50%;background:#5bdc7c;box-shadow:0 0 12px #5bdc7c}main{width:min(100% - 36px,1500px);margin:0 auto 50px}.public-game-hero{margin-top:28px}.hero-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.hero-pills span,.score-strip span{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);padding:8px 11px;color:#a3a3ac;font-size:10px;font-weight:950;letter-spacing:.09em}.message{min-height:18px;color:#ff8290;font-size:12px}.rx-rejoin{margin-top:14px}.rx-rejoin-toggle{border:0;background:transparent;color:#858690;font-weight:900;font-size:10px;cursor:pointer}.rx-rejoin #rejoinFields{display:grid;gap:8px;margin-top:9px}.rx-rejoin-action{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#17171d;color:#fff;font-weight:900}.game-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,400px);gap:22px;margin-top:28px}.invite-panel{grid-column:2;grid-row:1}.waiting-room{grid-column:1;grid-row:1}.section-head,.battle-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.section-head h2,.battle-head h2{margin:5px 0 0;font-size:clamp(26px,2.6vw,42px)}.name-gate,.host-controls,.waiting-hint{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}.name-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:8px}.name-row input,.host-controls select{min-height:46px;border:1px solid var(--line);border-radius:10px;background:#0b0b0f;color:#fff;padding:0 13px}.player-list{display:grid;gap:10px;margin-top:20px}.player-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#0c0c10}.player-row.self{border-color:rgba(239,23,47,.45);box-shadow:inset 3px 0 #ef172f}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#282932,#111116);font-weight:1000}.player-row small{color:var(--muted)}.host-controls{display:flex;align-items:end;gap:14px}.host-controls label{display:grid;gap:7px;min-width:190px}.lobby-start-btn{flex:1}.waiting-hint{color:#92939c}.battle-view{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;margin-top:24px}.battle-main{min-width:0}.battle-head{margin-bottom:14px}.score-strip{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.score-strip b{color:#fff;margin-left:5px}.board-wrap{position:relative;width:min(100%,420px);margin:auto;padding:12px;border:1px solid rgba(239,23,47,.28);border-radius:22px;background:linear-gradient(145deg,#15151b,#08080b);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 55px rgba(239,23,47,.07)}#board{display:block;width:100%;height:auto;aspect-ratio:1/2;border-radius:12px;background:#07080b}.battle-overlay{position:absolute;inset:12px;display:grid;place-content:center;text-align:center;background:rgba(2,2,4,.83);border-radius:12px;backdrop-filter:blur(6px)}.battle-overlay strong{font-size:36px;font-style:italic}.battle-overlay span{margin-top:9px;color:#b8b8c0}.battle-side{display:grid;align-content:start;gap:16px}.battle-side .panel{padding:20px}.opponents{display:grid;gap:9px;margin-top:14px}.opponent{padding:12px;border:1px solid var(--line);border-radius:13px;background:#0c0c10}.opponent.out{opacity:.45}.opponent strong{display:flex;justify-content:space-between}.opponent small{display:block;margin-top:5px;color:#8c8d96}.event-panel #events{display:grid;gap:7px;margin-top:12px;color:#9b9ca5;font-size:11px}.mobile-controls{display:none;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,420px);margin:12px auto 0}.mobile-controls button{min-height:52px;border:1px solid var(--line);border-radius:12px;background:#15151a;color:#fff;font-size:18px;font-weight:950;touch-action:manipulation}.mobile-controls .wide{grid-column:1/-1;background:linear-gradient(115deg,#ef172f,#9d0012)}.control-hint{text-align:center;color:#777882;font-size:11px}.toast{position:fixed;left:50%;bottom:28px;z-index:1000;transform:translateX(-50%);padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#17171c;color:#fff;box-shadow:0 18px 55px #000}
@media(max-width:1050px){.game-shell,.battle-view{grid-template-columns:1fr}.invite-panel,.waiting-room{grid-column:1;grid-row:auto}.invite-panel{order:2}.battle-side{grid-template-columns:1fr 1fr}.battle-side>button{grid-column:1/-1}.mobile-controls{display:grid}}
@media(max-width:650px){main,.topbar{width:min(100% - 20px,1500px)}.rx-logo{width:145px}.rx-game-label{display:none}.battle-side{grid-template-columns:1fr}.name-row,.host-controls{grid-template-columns:1fr;display:grid}.score-strip{justify-content:flex-start}.battle-head{display:grid}.board-wrap{padding:8px}.battle-overlay{inset:8px}}
.bubble-wrap{width:min(100%,560px);padding:12px}.bubble-wrap #board{aspect-ratio:3/4;background:radial-gradient(circle at 50% 15%,#141821,#07080b 70%)}.bubble-wrap:before{content:"";position:absolute;left:14px;right:14px;bottom:74px;height:1px;background:linear-gradient(90deg,transparent,rgba(239,23,47,.45),transparent);pointer-events:none}.battle-overlay strong{font-size:clamp(28px,4vw,44px)}
.mode-select{width:100%;min-height:52px;border:1px solid var(--line);border-radius:11px;background:#0b0b0f;color:#fff;padding:0 14px;font-weight:850}.bot-meter{height:7px;margin-top:10px;border-radius:999px;overflow:hidden;background:#22232a}.bot-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4fdb7c,#ffd84a,#ef172f);transition:width .25s}.opponent.self-mode{border-color:rgba(69,216,255,.24)}
.sound-btn[aria-pressed="false"]{opacity:.62}.level-banner{position:absolute;z-index:8;left:50%;top:18%;transform:translate(-50%,-12px) scale(.92);min-width:190px;padding:14px 22px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:linear-gradient(145deg,rgba(69,216,255,.94),rgba(36,93,166,.92));color:#031018;box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 38px rgba(69,216,255,.32);text-align:center;pointer-events:none;opacity:0;transition:opacity .22s,transform .22s}.level-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}.level-banner strong,.level-banner span{display:block}.level-banner strong{font-size:24px;font-weight:1000;font-style:italic;letter-spacing:.08em}.level-banner span{margin-top:4px;font-size:10px;font-weight:1000;letter-spacing:.11em}.bubble-wrap{overflow:hidden}.bubble-wrap #board{cursor:crosshair}

/* Online live opponent boards */
.live-opponent{display:grid;grid-template-columns:82px minmax(0,1fr);gap:11px;align-items:center;padding:9px}.opponent-board{display:block;width:82px;height:auto;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:#05070a;box-shadow:inset 0 0 18px rgba(0,0,0,.5)}.opponent-info{min-width:0}.opponent-info strong{gap:7px;align-items:center}.opponent-info strong>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opponent-info small+small{margin-top:3px}.live-state{font-size:9px;letter-spacing:.06em;color:#67e58a;text-shadow:0 0 10px rgba(103,229,138,.35);white-space:nowrap}.live-state.waiting{color:#b8b8c0;text-shadow:none}.opponent.out .live-state{color:#ff7483}.bubble-mini{width:92px}.bubble-live{grid-template-columns:92px minmax(0,1fr)}
@media(max-width:650px){.live-opponent{grid-template-columns:72px minmax(0,1fr)}.opponent-board{width:72px}.bubble-mini{width:82px}.bubble-live{grid-template-columns:82px minmax(0,1fr)}}

/* Bot live preview + softer arcade feedback */
#botBubblePreview{box-shadow:inset 0 0 18px rgba(0,0,0,.5),0 0 18px rgba(69,216,255,.08)}.bubble-live .bot-meter{margin-top:7px;height:6px}.bubble-wrap{overflow:hidden}.bubble-wrap:before{content:'';position:absolute;inset:12px;pointer-events:none;border-radius:12px;background:radial-gradient(circle at 20% 8%,rgba(255,255,255,.045),transparent 23%),radial-gradient(circle at 80% 18%,rgba(69,216,255,.035),transparent 18%)}