/* RING RUMBLE - menus and HUD. The arena is drawn on the canvas. */
:root { --bg: #070a1c; --panel: #111a42; --panel2: #18245a; --line: #2f3f86; --ink: #050716; --text: #f2f5ff; --muted: #a3afe0; --gold: #ffcc33; --gold2: #ffe28a; --pink: #ff4fa3; --green: #3ddc84; --red: #ff4d5e; --cyan: #2fd0c8; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Rubik, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--gold2); }
#app { position: fixed; inset: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: calc(12px + var(--safe-t)) 14px calc(12px + var(--safe-b)); overflow-y: auto; touch-action: pan-y; z-index: 5; }
.screen.show { display: flex; }
.screen:not(.hud):not(.title-screen) { background: rgba(4, 7, 22, .8); backdrop-filter: blur(3px); }
.screen.overlay { z-index: 30; }
.panel { position: relative; width: min(560px, 100%); margin: auto; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 22px; padding: 20px 20px 16px; box-shadow: 0 0 0 4px var(--ink), 0 18px 50px rgba(0, 0, 0, .6); }
.panel.narrow { width: min(420px, 100%); } .panel.wide { width: min(780px, 100%); }
h2 { font-family: Bungee, Rubik, sans-serif; font-weight: 400; margin: 0 0 10px; font-size: clamp(1.3rem, 4vw, 1.8rem); color: var(--gold); text-shadow: 0 3px 0 var(--ink); }
h3 { margin: 14px 0 6px; font-size: 1rem; color: var(--gold2); }
.muted { color: var(--muted); } .small { font-size: .88rem; } .center { text-align: center; }
.field { display: block; margin: 12px 0 6px; font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.err { color: #ff8a94; font-weight: 700; min-height: 1.2em; margin: 8px 0 0; }
.row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.row.left { justify-content: flex-start; } .row.center { justify-content: center; } .row.tight { margin-top: 6px; gap: 6px; }
#codeIn, #nameIn { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: #0a1233; font-weight: 800; font-size: 1.05rem; outline: none; }
#codeIn { letter-spacing: .3em; font-family: Bungee, Rubik, sans-serif; font-size: 1.4rem; text-align: center; }
input:focus { border-color: var(--gold); }
.join-row { display: flex; gap: 10px; } .join-row input { flex: 1; min-width: 0; }
input[type=range] { width: 100%; accent-color: var(--gold); }
.check { display: flex; gap: 10px; align-items: center; margin: 12px 0; font-weight: 700; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); }
select { background: #0a1233; border: 2px solid var(--line); border-radius: 10px; padding: 7px 8px; font-weight: 700; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 900; text-decoration: none; color: var(--text); cursor: pointer; background: #24336e; box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px #3a4f9c; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 0 0 2px #3a4f9c; }
.btn.primary { background: linear-gradient(180deg, #ffe066, #ffbe1f); color: #2a1a00; box-shadow: 0 4px 0 #8a5a00, 0 0 0 2px var(--ink); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.btn.small { padding: 8px 12px; font-size: .85rem; } .btn.big { padding: 14px 24px; font-size: 1.05rem; }
.btn[disabled] { opacity: .45; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1 1 auto; min-width: 70px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: #0d1640; font-weight: 800; cursor: pointer; }
.seg button.on { border-color: var(--gold); background: #2a2a10; color: var(--gold2); }

.title-screen { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(47, 208, 200, .25), transparent 70%), rgba(5, 7, 20, .6); }
.title-wrap { width: min(440px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.preview-tag { font-weight: 900; font-size: .75rem; letter-spacing: .2em; color: #ffcc4d; border: 1px solid #ffcc4d; border-radius: 8px; padding: 5px 8px; background: rgba(0, 0, 0, .5); }
.logo { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .92; font-family: Bungee, Rubik, sans-serif; font-weight: 400; }
.logo .l1 { font-size: clamp(2.8rem, 15vw, 4.6rem); color: var(--cyan); text-shadow: 0 5px 0 #0b3b4a, 0 0 28px rgba(47, 208, 200, .6); }
.logo .l2 { font-size: clamp(2.6rem, 14vw, 4.3rem); color: var(--gold); text-shadow: 0 5px 0 #6b3d00, 0 0 28px rgba(255, 204, 51, .55); transform: rotate(-3deg); }
.logo.small .l1, .logo.small .l2 { font-size: 2.3rem; }
.tagline { margin: 0; font-weight: 800; color: var(--pink); font-size: 1.1rem; }
.name-row { width: 100%; display: grid; gap: 4px; text-align: left; }
.name-row label { font-weight: 800; font-size: .78rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.menu { width: 100%; display: grid; gap: 8px; }
.mbtn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 16px; border: 2px solid var(--line); background: linear-gradient(180deg, #1a2660, #121a45); cursor: pointer; }
.mbtn .mi { width: 34px; text-align: center; font-size: 1.45rem; flex: none; }
.mbtn .mt { display: grid; gap: 2px; } .mbtn b { font-size: 1.05rem; } .mbtn small { color: var(--muted); }
.mbtn.big { border-color: var(--gold); background: linear-gradient(180deg, #3d3a12, #1f1d08); }
.foot { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
.seats { display: grid; gap: 8px; margin-top: 8px; }
.seatrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--line); background: #0d1640; }
.seatrow .dot { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; }
.seatrow .nm { display: grid; min-width: 0; } .seatrow .nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seatrow .nm small { color: var(--muted); }
.seatrow .ctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.seatrow.you { border-color: var(--gold); }
.lobby-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.code { font-family: Bungee, Rubik, sans-serif; color: var(--gold2); letter-spacing: .15em; }
.hint-big { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.how-grid div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(0, 0, 0, .2); display: grid; gap: 4px; }
.how-grid b { color: var(--cyan); font-family: Bungee, Rubik, sans-serif; font-weight: 400; }

/* HUD */
.hud { display: none; padding: 0; pointer-events: none; touch-action: none; }
.hud.show { display: block; }
.hud > * { pointer-events: auto; }
.topbar { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 6px; align-items: stretch; padding: calc(6px + var(--safe-t)) 8px 4px; }
.icon-btn { width: 42px; flex: none; border-radius: 12px; border: 2px solid var(--line); background: rgba(10, 15, 40, .9); font-size: 1.3rem; cursor: pointer; }
.hpill { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 12px; border: 2px solid var(--line); background: rgba(10, 15, 40, .9); position: relative; flex: none; }
.hpill .lbl { font-size: .6rem; font-weight: 900; letter-spacing: .12em; color: var(--muted); }
.hpill b { font-family: Bungee, Rubik, sans-serif; font-weight: 400; font-size: 1.1rem; }
.hpill.timer { width: 48px; padding: 2px; }
.hpill.timer .ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; } .ring .bg { stroke: rgba(255, 255, 255, .1); }
.ring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 94.25; transition: stroke-dashoffset .2s linear; }
.hpill.timer.off { visibility: hidden; }
.hpill.timer.hurry b { color: var(--red); }
.order { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: center; padding: 4px 6px; border-radius: 12px; border: 2px solid var(--line); background: rgba(10, 15, 40, .9); overflow: hidden; }
.order .o { display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; border-radius: 999px; font-weight: 800; font-size: .8rem; white-space: nowrap; opacity: .55; border: 2px solid transparent; }
.order .o i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; flex: none; }
.order .o.done { opacity: .35; text-decoration: line-through; }
.order .o.now { opacity: 1; border-color: var(--gold); background: rgba(255, 204, 51, .15); }
.order .o.next { opacity: .85; }
.order .sep { color: var(--muted); font-size: .7rem; }
.order .sc { margin-left: auto; font-size: .7rem; font-weight: 900; color: var(--gold2); white-space: nowrap; padding-left: 4px; }
.scores { position: absolute; left: 8px; right: 8px; top: calc(60px + var(--safe-t)); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(10, 15, 40, .9); border: 2px solid var(--c); font-weight: 800; font-size: .88rem; }
.pchip i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid #fff; flex: none; }
.pchip b { font-family: Bungee, Rubik, sans-serif; font-weight: 400; color: var(--gold2); }
.pchip small { color: var(--green); font-weight: 900; }
.pchip.you { box-shadow: 0 0 10px var(--c); }
.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: Bungee, Rubik, sans-serif; font-size: clamp(1.4rem, 7vw, 2.6rem); color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 20px rgba(0, 0, 0, .6); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .25s; text-align: center; }
.banner.on { opacity: 1; }
.banner small { display: block; font-family: Rubik, sans-serif; font-weight: 800; font-size: .45em; color: var(--gold2); }
.toasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(96px + var(--safe-t)); display: grid; gap: 6px; width: min(420px, 94vw); pointer-events: none; z-index: 8; }
.toast { padding: 8px 12px; border-radius: 12px; background: rgba(10, 15, 40, .95); border: 2px solid var(--line); font-weight: 700; text-align: center; animation: tin .25s ease-out; }
.toast.bad { border-color: var(--red); } .toast.good { border-color: var(--green); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
.conn { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b)); padding: 6px 12px; border-radius: 10px; background: #3a0610; border: 1px solid var(--red); font-weight: 700; }
.bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 12px calc(10px + var(--safe-b)); display: grid; gap: 6px; justify-items: center; }
.power { position: relative; width: min(420px, 92vw); height: 22px; border-radius: 999px; background: rgba(10, 15, 40, .9); border: 2px solid var(--line); overflow: hidden; }
.power i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--green), var(--gold) 60%, var(--red)); }
.power span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: .75rem; letter-spacing: .14em; text-shadow: 0 1px 2px #000; }
.hint { margin: 0; font-weight: 800; text-align: center; color: var(--text); text-shadow: 0 2px 4px #000; min-height: 1.3em; }
.coach { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--safe-b)); width: min(520px, 94vw); padding: 10px 14px; border-radius: 16px; background: rgba(10, 15, 40, .96); border: 2px solid var(--gold); z-index: 9; }
.coach b { font-family: Bungee, Rubik, sans-serif; font-weight: 400; color: var(--gold); }
.coach p { margin: 4px 0 0; font-weight: 600; line-height: 1.35; }
.coach em { color: var(--gold2); font-style: normal; font-weight: 900; }

/* results */
.res-kicker { margin: 0; text-align: center; font-weight: 900; letter-spacing: .2em; color: var(--muted); font-size: .8rem; }
#resHead { text-align: center; font-size: clamp(2rem, 9vw, 3rem); margin: 4px 0; }
#resHead.lose { color: var(--muted); }
.rtable { display: grid; gap: 6px; margin-top: 8px; }
.rrow { display: grid; grid-template-columns: 34px 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 2px solid var(--line); }
.rrow.win { border-color: var(--gold); }
.rrow .pl { font-family: Bungee, Rubik, sans-serif; font-size: 1.3rem; text-align: center; }
.rrow i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; }
.rrow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .v { font-family: Bungee, Rubik, sans-serif; font-size: 1.2rem; color: var(--gold2); }
#resChart { width: 100%; height: auto; margin-top: 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); padding: 16px; }
@media (min-width: 900px) { .topbar { left: 50%; transform: translateX(-50%); width: min(860px, 100%); } }

/* specials */
.special { display: flex; align-items: center; gap: 10px; width: min(420px, 92vw); padding: 8px 12px; border-radius: 14px; border: 2px solid var(--gold); background: linear-gradient(180deg, #3a3510, #1e1b06); text-align: left; cursor: pointer; }
.special .ic { font-size: 1.6rem; }
.special b { display: block; font-family: Bungee, Rubik, sans-serif; font-weight: 400; color: var(--gold2); }
.special small { color: var(--muted); font-weight: 700; }
.special.armed { border-color: #fff; background: linear-gradient(180deg, #8a6100, #4a3300); box-shadow: 0 0 18px rgba(255, 204, 51, .7); animation: armed 0.9s ease-in-out infinite alternate; }
.special[disabled] { opacity: .6; }
@keyframes armed { to { box-shadow: 0 0 4px rgba(255, 204, 51, .3); } }
.pchip .sp { font-size: 1rem; }