:root {
  --or: #ff7a1a; --or2: #ff4d2e; --gold: #ffc93c; --ink: #0b0e16; --panel: rgba(12, 16, 27, 0.92); --line: rgba(255, 255, 255, 0.1);
  --txt: #f4f6fb; --dim: #9aa3b8; --green: #3ee07a; --red: #ff4a4a; --blue: #33a3ff;
  --f: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --d: 'Anton', Impact, 'Arial Black', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--txt); font-family: var(--f); user-select: none; -webkit-user-select: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.playing canvas#gl { cursor: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------- loading */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at 50% 40%, #1d2440 0%, #0b0e16 70%); transition: opacity .5s; }
#loading.out { opacity: 0; pointer-events: none; }
.ld-ball { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb07a, #e0601c 45%, #8a3510);
  box-shadow: inset -6px -8px 14px rgba(0,0,0,.35); position: relative; animation: ldb .6s cubic-bezier(.4,0,.6,1) infinite alternate; }
.ld-ball::before, .ld-ball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(30,12,4,.75); }
.ld-ball::before { clip-path: inset(0 48% 0 48%); }
.ld-ball::after { clip-path: inset(48% 0 48% 0); }
@keyframes ldb { from { transform: translateY(-30px) rotate(0) } to { transform: translateY(18px) rotate(160deg) scaleY(.94) } }
.ld-title { font-family: var(--d); font-size: 54px; letter-spacing: 2px; }
.ld-title span { color: var(--or); margin-left: 10px; }
#ldText { color: var(--dim); font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.ld-bar { width: 260px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--or2), var(--gold)); transition: width .25s; }

/* ---------------- screens */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; animation: scrIn .35s ease both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
#home { background: linear-gradient(90deg, rgba(5,7,12,.82) 0%, rgba(5,7,12,.45) 38%, rgba(5,7,12,0) 62%); }
.left { position: absolute; left: clamp(20px, 5vw, 72px); top: clamp(16px, 5vh, 60px); bottom: 76px; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3.5vh, 34px); }
.logo { margin: 0; font-family: var(--d); font-weight: 400; line-height: .86; font-size: clamp(54px, min(9vw, 14vh), 140px); letter-spacing: 1px; transform: skewX(-8deg); }
.logo .l1 { display: block; color: #fff; text-shadow: 0 6px 0 #c7461a, 0 12px 30px rgba(0,0,0,.6); }
.logo .l2 { display: block; background: linear-gradient(180deg, #ffd36b 0%, #ff8a2a 55%, #ff4d2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #7a1f0b) drop-shadow(0 12px 24px rgba(0,0,0,.55)); }
.logo .l2::after { content: ''; display: inline-block; width: .52em; height: .52em; margin-left: .08em; border-radius: 50%; vertical-align: .05em;
  background: radial-gradient(circle at 35% 30%, #ffb07a, #e0601c 45%, #8a3510); box-shadow: inset -.05em -.06em .1em rgba(0,0,0,.4); animation: spinb 4s linear infinite; }
@keyframes spinb { to { transform: rotate(360deg) } }
.tag { margin-top: 10px; font-weight: 900; letter-spacing: .38em; font-size: clamp(11px, 1.1vw, 15px); color: var(--gold); padding-left: 6px; }
.menu { display: flex; flex-direction: column; gap: 10px; width: min(380px, 80vw); }
.mbtn { position: relative; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 22px; border: 0; color: #fff; text-align: left;
  font-family: var(--d); font-size: 25px; letter-spacing: 1.5px; transform: skewX(-8deg); border-radius: 6px; overflow: hidden;
  background: linear-gradient(90deg, rgba(25,31,48,.95), rgba(25,31,48,.75)); border-left: 4px solid rgba(255,255,255,.2);
  transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .2s, border-color .2s; }
.mbtn > * { transform: skewX(8deg); }
.mbtn i { font-style: normal; font-size: 20px; width: 26px; text-align: center; }
.mbtn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .5s; }
.mbtn:hover, .mbtn:focus-visible { transform: skewX(-8deg) translateX(10px) scale(1.03); border-left-color: var(--or); background: linear-gradient(90deg, rgba(48,38,34,.98), rgba(30,30,44,.85)); outline: none; }
.mbtn:hover::after { transform: translateX(120%); }
.mbtn:active { transform: skewX(-8deg) translateX(8px) scale(.98); }
.mbtn.primary { height: 72px; font-size: 36px; background: linear-gradient(90deg, #ff4d2e, #ff8a2a 60%, #ffb347); border-left-color: #fff3d0; box-shadow: 0 10px 30px rgba(255,90,30,.35); }
.mbtn.primary:hover { background: linear-gradient(90deg, #ff5e3a, #ff9a3a 60%, #ffc45a); }
.mbtn.primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-130%) } 100% { transform: translateX(130%) } }
.sublinks { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: rgba(14,18,30,.85); color: var(--txt); font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: 999px; transition: background .2s, transform .15s; }
.chip:hover { background: rgba(40,46,66,.95); transform: translateY(-2px); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
#profileCard { position: absolute; right: 24px; top: 22px; display: flex; gap: 14px; align-items: center; padding: 12px 18px 12px 12px; cursor: pointer; transition: transform .2s; min-width: 290px; }
#profileCard:hover { transform: translateY(-2px); }
#avatar { width: 64px; height: 64px; border-radius: 50%; background: #222; flex: none; }
.pc-name { font-weight: 900; font-size: 18px; }
.pc-level { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--gold); }
.xpbar { flex: 1; height: 7px; min-width: 120px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--or)); border-radius: 4px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.xpbar.big { height: 12px; border-radius: 6px; }
.pc-hs { font-size: 12px; color: var(--dim); font-weight: 700; letter-spacing: .5px; }
.pc-hs b { color: #fff; font-size: 14px; }
#courtBadge { position: absolute; right: 24px; bottom: 26px; }

/* panels */
.panel { background: linear-gradient(90deg, rgba(6,8,14,.9), rgba(6,8,14,.72)); padding: 26px clamp(18px, 5vw, 64px); overflow-y: auto; }
.panel.narrow > * { max-width: 760px; }
.panel.side { background: linear-gradient(90deg, rgba(6,8,14,.92) 0%, rgba(6,8,14,.85) 50%, rgba(6,8,14,0) 72%); }
.panel.side > * { max-width: min(560px, 100%); }
.panel header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.panel h2 { margin: 0; font-family: var(--d); font-weight: 400; font-size: 40px; letter-spacing: 1px; }
.panel h3 { font-family: var(--d); font-weight: 400; letter-spacing: 1px; font-size: 22px; margin: 22px 0 10px; color: var(--gold); }
.back { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; font-size: 28px; line-height: 1; padding-bottom: 4px; transition: background .2s; }
.back:hover { background: rgba(255,255,255,.15); }
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; max-width: 1000px; }
.mode { text-align: left; padding: 16px; border-radius: 14px; border: 2px solid var(--line); background: rgba(20,25,40,.9); color: #fff; transition: transform .18s, border-color .2s, background .2s; }
.mode:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.mode.on { border-color: var(--or); background: linear-gradient(160deg, rgba(255,122,26,.22), rgba(20,25,40,.95)); box-shadow: 0 8px 26px rgba(255,100,30,.2); }
.mode .mi { font-size: 26px; }
.mode b { display: block; font-family: var(--d); font-weight: 400; font-size: 22px; letter-spacing: .5px; margin: 6px 0 4px; }
.mode p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.4; }
.mode .pb { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--gold); }
.courts { display: flex; gap: 12px; flex-wrap: wrap; }
.court { width: 210px; padding: 0; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); background: #111; color: #fff; text-align: left; transition: transform .18s, border-color .2s; }
.court:hover { transform: translateY(-3px); }
.court.on { border-color: var(--or); }
.court .cv { height: 92px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.court b { display: block; padding: 8px 12px 2px; font-weight: 900; }
.court span { display: block; padding: 0 12px 10px; font-size: 12px; color: var(--dim); }
.courts.small .court { width: 120px; }
.courts.small .court .cv { height: 54px; font-size: 26px; }
.courts.small .court span { display: none; }
.cv.arena { background: radial-gradient(ellipse at 50% 20%, #ffd99a33, transparent 60%), linear-gradient(180deg, #1b2238, #c78a4a 70%, #a8682f); }
.cv.street { background: linear-gradient(180deg, #2b2a63, #ff8a4c 60%, #3b3d42 61%); }
.cv.beach { background: linear-gradient(180deg, #2f86e0, #9fd4ff 55%, #2fb8d8 56%, #e9d3a5 72%); }
.actions { margin-top: 24px; }
.btn { border: 1px solid var(--line); background: rgba(255,255,255,.08); color: #fff; font-weight: 900; font-size: 15px; padding: 12px 22px; border-radius: 12px; transition: transform .15s, background .2s, filter .2s; letter-spacing: .5px; }
.btn:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: linear-gradient(90deg, #ff4d2e, #ff8a2a); border-color: transparent; box-shadow: 0 6px 20px rgba(255,90,30,.3); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.big { font-family: var(--d); font-weight: 400; font-size: 28px; letter-spacing: 1.5px; padding: 12px 56px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .45; pointer-events: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* online */
.netstatus { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(20,25,40,.9); margin-bottom: 18px; font-size: 14px; line-height: 1.45; }
.netstatus .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 4px; background: var(--dim); }
.netstatus.ok .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.netstatus.warn .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.netstatus.bad .dot { background: var(--red); }
.netstatus b { display: block; }
.netstatus span { color: var(--dim); }
.lobby { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px; text-align: center; }
.lobby-title { font-family: var(--d); font-size: 32px; letter-spacing: 1px; }
.lobby-sub { color: var(--dim); font-weight: 700; letter-spacing: .5px; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.1); border-top-color: var(--or); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.room-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choose { padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.choose h3 { margin: 0; }
.choose p { margin: 0; color: var(--dim); font-size: 14px; }
#roomCode { width: 100%; font-family: var(--d); font-size: 34px; letter-spacing: 10px; text-transform: uppercase; text-align: center; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: rgba(0,0,0,.4); color: #fff; outline: none; }
#roomCode:focus { border-color: var(--or); }
.roomcode { font-family: var(--d); font-size: 72px; letter-spacing: 14px; color: var(--gold); text-shadow: 0 4px 0 #7a4b0b; }
.roster { display: flex; gap: 12px; }
.roster .rp { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.07); font-weight: 800; }
.roster .rp i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.roster .rp.wait { opacity: .5; }
.err { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255,74,74,.15); border: 1px solid rgba(255,74,74,.5); font-weight: 700; }

/* customize */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; font-weight: 800; padding: 9px 16px; border-radius: 999px; }
.tabs button.on { background: var(--or); border-color: var(--or); }
.custbody h4 { margin: 14px 0 8px; font-size: 13px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.item { position: relative; border: 2px solid var(--line); border-radius: 12px; background: rgba(20,25,40,.9); color: #fff; padding: 10px 6px 8px; font-size: 12px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .15s, border-color .2s; }
.item:hover { transform: translateY(-2px); }
.item.on { border-color: var(--or); background: rgba(255,122,26,.15); }
.item.locked { opacity: .55; }
.item.locked::after { content: '🔒 LV ' attr(data-lvl); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,7,12,.7); border-radius: 10px; font-size: 13px; color: var(--gold); }
.item .sw { width: 44px; height: 44px; border-radius: 10px; }
.item .ballsw { width: 46px; height: 46px; border-radius: 50%; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 3px solid transparent; position: relative; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--or); }
.swatch.locked { opacity: .35; }
.numrow { display: flex; align-items: center; gap: 10px; }
.numrow input { width: 90px; font-size: 22px; font-weight: 900; padding: 8px; border-radius: 10px; border: 2px solid var(--line); background: rgba(0,0,0,.4); color: #fff; text-align: center; }
.note { color: var(--dim); font-size: 13px; margin-top: 18px; }

/* settings */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 800; padding: 10px 14px; border-radius: 12px; background: rgba(20,25,40,.8); }
.form label.tog { justify-content: flex-start; }
.form input[type=range] { width: 50%; accent-color: var(--or); }
.form select, .form input:not([type]) , .form #setName { background: rgba(0,0,0,.4); color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-weight: 700; min-width: 50%; }
.form input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--or); }

/* leaderboard / stats */
.lbnote { color: var(--dim); font-size: 13px; margin-bottom: 10px; }
.lb { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lb li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(20,25,40,.85); font-weight: 800; }
.lb li .rk { width: 30px; color: var(--dim); }
.lb li:nth-child(1) .rk { color: var(--gold); } .lb li:nth-child(2) .rk { color: #d6dbe6; } .lb li:nth-child(3) .rk { color: #e09a5a; }
.lb li .nm { flex: 1; }
.lb li .sc { font-family: var(--d); font-weight: 400; font-size: 22px; }
.lb li.me { outline: 2px solid var(--or); }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 14px; border-radius: 12px; background: rgba(20,25,40,.85); }
.stat b { display: block; font-family: var(--d); font-weight: 400; font-size: 32px; }
.stat span { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.help .keys { display: flex; flex-direction: column; gap: 10px; }
.help .keys div { display: flex; align-items: center; gap: 8px; }
.help .keys span { margin-left: 8px; color: #dfe4ee; }
kbd { display: inline-block; min-width: 34px; text-align: center; padding: 6px 10px; border-radius: 8px; background: #20283c; border-bottom: 3px solid #0c101a; font-family: var(--f); font-weight: 900; font-size: 13px; }
.help p { color: var(--dim); line-height: 1.6; }
.g { color: var(--green); }

/* ---------------- HUD */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.scorebox { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); min-width: 230px; text-align: center; padding: 8px 20px 10px; border-radius: 16px; background: rgba(8,10,18,.82); border: 1px solid var(--line); }
.sb-mode { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--gold); }
.sb-row { display: flex; align-items: baseline; justify-content: center; gap: 18px; }
.sb-score { font-family: var(--d); font-size: 52px; line-height: 1.05; }
.sb-clock { font-family: var(--d); font-size: 30px; color: #fff; }
.sb-clock.low, .vs-clock.low { color: var(--red); animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.12) } }
.sb-info { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--dim); min-height: 14px; }
.lives { color: var(--or); letter-spacing: 3px; font-size: 14px; } .lives s { color: rgba(255,255,255,.2); text-decoration: none; }
.rack { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.rb { width: 12px; height: 12px; border-radius: 50%; background: var(--or); } .rb.money { background: linear-gradient(90deg, #d8262f 33%, #fff 33% 66%, #1f4fb5 66%); } .rb.used { opacity: .2; }
.vsbox { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: rgba(8,10,18,.85); border: 1px solid var(--line); }
.vs { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-width: 190px; border-top: 4px solid var(--c); }
.vs.opp { justify-content: flex-end; }
.vs .n { font-weight: 900; font-size: 14px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs .s { font-family: var(--d); font-size: 40px; }
.vs.off { opacity: .45; }
.vs-clock { display: flex; align-items: center; padding: 0 16px; font-family: var(--d); font-size: 30px; background: rgba(255,255,255,.05); }
#hudStreak { position: absolute; top: 118px; left: 50%; transform: translateX(-50%); font-weight: 900; letter-spacing: 2px; font-size: 14px; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#hudStreak.fire { color: #ff7a1a; font-size: 18px; animation: pulse .35s ease-in-out infinite alternate; }
#trickCard { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); text-align: center; padding: 10px 18px; border-radius: 12px; background: rgba(8,10,18,.8); border: 1px solid rgba(255,201,60,.4); max-width: 90vw; }
#trickCard b { display: block; font-family: var(--d); font-weight: 400; font-size: 24px; color: var(--gold); letter-spacing: 1px; }
#trickCard span { font-size: 13px; color: #dfe4ee; font-weight: 700; }
#netNote { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: rgba(255,170,40,.92); color: #1a1205; font-weight: 900; }
#practiceInfo { position: absolute; left: 18px; bottom: 60px; padding: 10px 14px; border-radius: 10px; background: rgba(8,10,18,.8); font-size: 13px; font-weight: 700; line-height: 1.5; color: #dfe4ee; }
#reticle { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#reticle i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.25); transition: border-color .15s, transform .15s; }
#reticle i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; }
#reticle.good i { border-color: var(--green); } #reticle.ok i { border-color: var(--gold); } #reticle.bad i { border-color: var(--red); transform: scale(1.1); }
#reticle span { position: absolute; left: 22px; top: -26px; font-size: 11px; font-weight: 900; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px #000; }
#power { position: absolute; right: calc(50% - 300px); top: 50%; transform: translateY(-40%); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .2s; }
.pw-track { position: relative; width: 26px; height: 230px; border-radius: 14px; background: rgba(8,10,18,.75); border: 2px solid rgba(255,255,255,.25); overflow: hidden; }
#pwGood, #pwPerfect, #pwFill { position: absolute; left: 0; right: 0; display: block; }
#pwGood { background: rgba(255,201,60,.35); }
#pwPerfect { background: var(--green); box-shadow: 0 0 12px var(--green); }
#pwFill { bottom: 0; background: linear-gradient(0deg, #ff4d2e, #ffc93c); opacity: .85; mix-blend-mode: screen; border-top: 3px solid #fff; }
#pwFill.green { border-top-color: var(--green); }
#power.on .pw-track { border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.25); }
#pwLabel { position: absolute; right: 36px; top: 40%; white-space: nowrap; font-family: var(--d); font-size: 24px; opacity: 0; transform: translateX(10px); transition: opacity .2s, transform .2s; }
#pwLabel.show { opacity: 1; transform: none; }
#pwLabel.perfect { color: var(--green); } #pwLabel.good { color: var(--gold); } #pwLabel.short, #pwLabel.long { color: var(--red); }
#pwDist { font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; }
#dunkHint { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); font-family: var(--d); font-size: 26px; letter-spacing: 1px; color: var(--gold); text-shadow: 0 3px 0 #7a3a0b, 0 0 20px rgba(255,170,40,.6); animation: pulse .4s ease-in-out infinite alternate; }
#toasts { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { font-family: var(--d); font-size: 30px; letter-spacing: 1px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 18px rgba(0,0,0,.5); animation: tin .35s cubic-bezier(.2,1.6,.4,1) both; text-align: center; transition: opacity .4s, transform .4s; }
.toast b { margin-left: 12px; color: var(--gold); }
.toast i { display: block; font-style: normal; font-size: 18px; color: var(--gold); }
.toast.big { font-size: 52px; }
.toast.gold { background: linear-gradient(180deg, #fff3b0, #ffc93c 50%, #ff8a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #7a3a0b); text-shadow: none; }
.toast.gold b { color: #fff3b0; }
.toast.perfect { color: var(--green); font-size: 22px; }
.toast.fire { color: #ff7a1a; font-size: 34px; }
.toast.warn { color: #ffb0a0; font-size: 22px; }
.toast.emote { font-size: 40px; }
.toast.out { opacity: 0; transform: translateY(-24px); }
@keyframes tin { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
#banner { position: absolute; left: 0; right: 0; top: 17%; text-align: center; opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s; }
#banner.show { opacity: 1; transform: none; }
#banner b { display: block; font-family: var(--d); font-size: clamp(44px, 6.5vw, 84px); line-height: 1; color: #fff; text-shadow: 0 6px 0 #c7461a, 0 0 40px rgba(0,0,0,.6); letter-spacing: 2px; }
#banner span { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; background: rgba(8,10,18,.75); font-weight: 800; font-size: 15px; }
#pauseBtn { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: rgba(8,10,18,.8) linear-gradient(#fff,#fff) 17px 15px/4px 16px no-repeat; color: transparent; pointer-events: auto; }
#pauseBtn::after { content: ''; position: absolute; left: 25px; top: 15px; width: 4px; height: 16px; background: #fff; }
#ctrlHint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); text-shadow: 0 1px 3px #000; white-space: nowrap; }
#touchUI { display: none; }
body.touch #touchUI { display: block; }
body.touch #ctrlHint { display: none; }
#stick { position: absolute; left: 28px; bottom: 28px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.2); pointer-events: auto; touch-action: none; }
#stick i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; background: rgba(255,255,255,.35); }
#tShoot { position: absolute; right: 26px; bottom: 30px; width: 136px; height: 136px; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background: radial-gradient(circle at 40% 35%, #ff9a4a, #e0501c); color: #fff; font-family: var(--d); font-size: 26px; pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#tShoot small { font-family: var(--f); font-size: 10px; font-weight: 800; opacity: .85; }
#tShoot.down { transform: scale(.94); filter: brightness(1.15); }
#tJump { position: absolute; right: 178px; bottom: 34px; width: 88px; height: 88px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(40,60,110,.75); color: #fff; font-weight: 900; pointer-events: auto; touch-action: none; }
body.touch #power { right: 180px; top: auto; bottom: 190px; transform: none; }
body.touch .pw-track { height: 160px; }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(4,6,10,.62); animation: scrIn .25s both; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; min-width: 300px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.dialog h2 { margin: 0 0 8px; font-family: var(--d); font-weight: 400; font-size: 44px; letter-spacing: 2px; }
.dialog p { color: var(--dim); margin: 0 0 6px; font-size: 13px; }
.dialog.wide { width: min(520px, 94vw); }
.res-title { font-family: var(--d); font-size: 46px; letter-spacing: 1.5px; background: linear-gradient(180deg, #fff3b0, #ffc93c 50%, #ff8a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-sub { color: var(--dim); font-weight: 800; }
.res-score b { display: block; font-family: var(--d); font-size: 96px; line-height: 1; }
.res-score span { color: var(--dim); font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.res-best { color: var(--gold); font-weight: 800; font-size: 13px; }
.res-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.res-rows div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 13px; font-weight: 700; }
.res-rows div b { color: #fff; }
.res-rows div span { color: var(--dim); }
.xpline { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 13px; }
.xpline span:first-child { color: var(--gold); }
#resUnlocks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
#resUnlocks .un { padding: 6px 10px; border-radius: 999px; background: rgba(255,201,60,.15); border: 1px solid rgba(255,201,60,.5); font-size: 12px; font-weight: 800; color: var(--gold); animation: tin .4s both; }
.res-note { color: var(--gold); font-weight: 800; min-height: 4px; }
#fps { position: fixed; left: 8px; bottom: 8px; z-index: 60; font: 700 12px monospace; color: #9f9; background: rgba(0,0,0,.5); padding: 3px 6px; border-radius: 4px; }
#msgBox { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; max-width: 90vw; padding: 12px 18px; border-radius: 12px; background: rgba(20,24,36,.96); border: 1px solid var(--line); font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#msgBox.err { border-color: rgba(255,74,74,.6); }

@media (max-width: 760px) {
  #home { background: linear-gradient(180deg, rgba(5,7,12,.8) 0%, rgba(5,7,12,.5) 60%, rgba(5,7,12,.8) 100%); }
  .left { right: 20px; } .menu { width: 100%; gap: 7px; }
  .mbtn { height: 44px; font-size: 19px; } .mbtn.primary { height: 56px; font-size: 26px; }
  #profileCard { min-width: 0; right: 12px; top: 12px; padding: 8px 12px 8px 8px; }
  #profileCard .pc-hs, #profileCard .xpbar { display: none; }
  #avatar { width: 44px; height: 44px; }
  .left { top: 76px; justify-content: space-between; }
  #courtBadge { display: none; }
  .room-choose { grid-template-columns: 1fr; }
  #power { right: 20px; }
  .vs { min-width: 120px; padding: 6px 10px; } .vs .s { font-size: 30px; }
}
@media (max-height: 560px) {
  .left { gap: 8px; top: 8px; bottom: 52px; justify-content: flex-start; }
  .logo { font-size: 46px; } .tag { display: none; }
  .menu { gap: 5px; width: min(340px, 60vw); } .mbtn { height: 36px; font-size: 18px; } .mbtn.primary { height: 46px; font-size: 24px; }
  .sublinks { bottom: 10px; } .chip { padding: 6px 11px; font-size: 12px; } #courtBadge { bottom: 10px; }
  #profileCard { min-width: 0; padding: 8px 12px 8px 8px; } #avatar { width: 46px; height: 46px; }
  .panel { padding: 14px 20px; } .panel h2 { font-size: 30px; } .panel header { margin-bottom: 10px; }
  .dialog { padding: 16px 22px; gap: 7px; } .dialog h2 { font-size: 32px; margin: 0; } .dialog .btn { padding: 9px 18px; }
  .res-score b { font-size: 60px; } .res-title { font-size: 32px; }
  #stick { width: 120px; height: 120px; } #tShoot { width: 110px; height: 110px; } #tJump { right: 148px; width: 72px; height: 72px; }
  body.touch #power { bottom: 150px; } body.touch .pw-track { height: 120px; }
}

/* ---- v2: full game, court pictures, achievements */
.mode { position: relative; }
.mode .newb { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #06210f; font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.mode.feature { grid-column: span 2; background: linear-gradient(135deg, rgba(255,122,26,.18), rgba(20,25,40,.95) 60%); }
.gameopts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(20,25,40,.9); border: 1px solid rgba(255,122,26,.35); max-width: 1000px; }
.opt { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 13px; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.seg { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.seg button { border: 0; background: rgba(255,255,255,.05); color: #fff; font-weight: 900; padding: 8px 14px; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--or); }
.panel h3 small { font-family: var(--f); font-size: 13px; color: var(--dim); font-weight: 700; letter-spacing: 0; margin-left: 8px; }
.court { width: 230px; }
.court .cv { height: 120px; background-size: cover !important; background-position: center !important; position: relative; }
.court .cv.img { font-size: 0; }
.court.on .cv::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--or); color: #fff; font: 900 15px var(--f); display: flex; align-items: center; justify-content: center; }
.courts.small .court .cv { height: 64px; }
.cv.gym { background: linear-gradient(180deg, #d9d1c2 0 40%, #8b1e2b 40% 50%, #c99257 50%); }
.cv.park { background: linear-gradient(180deg, #7cc0ff, #a8d8ff 45%, #4d8f33 46% 62%, #2f7a4e 62%); }
.cv.rooftop { background: linear-gradient(180deg, #04050d, #3a1d5c 55%, #1b2347 56%); }
#gameBar { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: rgba(8,10,18,.82); border: 1px solid var(--line); white-space: nowrap; }
.gb-l { font-size: 10px; font-weight: 900; letter-spacing: 2px; color: var(--dim); }
#gbShot { font-family: var(--d); font-size: 24px; min-width: 26px; text-align: center; color: #ffd23a; }
#gbShot.low { color: var(--red); animation: pulse .4s ease-in-out infinite alternate; }
#gbMsg { font-size: 12px; font-weight: 800; color: #dfe4ee; }
.vs.ball { background: linear-gradient(180deg, rgba(255,122,26,.22), transparent); }
.vs.me.ball .n::before, .vs.opp.ball .n::after { content: ' 🏀 '; }
#hudStreak { top: 136px; }
#tPass { position: absolute; right: 60px; bottom: 182px; width: 76px; height: 76px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(30,110,70,.8); color: #fff; font-weight: 900; pointer-events: auto; touch-action: none; }
.achcount { margin-left: auto; font-weight: 900; color: var(--gold); }
.achgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(20,25,40,.85); border: 1px solid var(--line); }
.ach .ai { font-size: 28px; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); filter: grayscale(1); opacity: .5; }
.ach b { display: block; font-size: 14px; } .ach span { font-size: 12px; color: var(--dim); } .ach i { font-style: normal; font-size: 11px; font-weight: 900; color: var(--gold); }
.ach.done { border-color: rgba(255,201,60,.45); background: linear-gradient(135deg, rgba(255,201,60,.12), rgba(20,25,40,.9)); }
.ach.done .ai { filter: none; opacity: 1; background: rgba(255,201,60,.18); }
#achToast { position: fixed; left: 16px; top: 16px; z-index: 65; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #3a2a08, #15171f); border: 1px solid rgba(255,201,60,.7); box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tin .4s both; }
#achToast .ai { font-size: 30px; } #achToast small { display: block; font-size: 10px; letter-spacing: 2px; font-weight: 900; color: var(--gold); } #achToast b { font-size: 16px; } #achToast i { font-style: normal; color: var(--gold); font-weight: 900; margin-left: 8px; font-size: 13px; }
@media (max-width: 760px) { .mode.feature { grid-column: auto; } }
@media (max-height: 560px) { #tPass { right: 40px; bottom: 150px; width: 62px; height: 62px; } #gameBar { top: 78px; } }
.court { width: 200px; }
.court .cv { height: 108px; }
#play .actions { position: sticky; bottom: -26px; margin: 18px -64px -26px; padding: 14px 64px 22px; background: linear-gradient(0deg, rgba(6,8,14,.97) 60%, rgba(6,8,14,0)); }
@media (max-height: 560px) { #play .actions { bottom: -14px; margin: 10px -20px -14px; padding: 10px 20px 12px; } .court { width: 150px; } .court .cv { height: 76px; } .court span { display: none; } }
.vs-clock { white-space: nowrap; }
@media (max-height: 560px) {
  .vsbox { top: 8px; } .vs { min-width: 0; padding: 4px 12px; gap: 8px; } .vs .s { font-size: 26px; } .vs .n { font-size: 11px; max-width: 110px; } .vs-clock { font-size: 18px; padding: 0 10px; }
  #gameBar { top: 56px; padding: 3px 12px; } #gbShot { font-size: 18px; } #gbMsg { font-size: 11px; }
}