.alpha-panel{position:absolute;inset:80px 0 0;overflow:auto;padding:25px 7% 55px;background:linear-gradient(90deg,#07322ff5,#07322fe0 55%,#07322f30);scrollbar-color:#dff483 #163b32}.alpha-panel .menu{max-width:960px;padding-top:18px}.alpha-panel .menu.narrow{max-width:560px}.alpha-panel h1{font-size:clamp(42px,5vw,68px);letter-spacing:-2px;margin-bottom:22px}.alpha-panel h2{font-size:40px;margin:10px 0 25px}.alpha-panel p{margin-bottom:22px}.alpha-panel button{color:#173830;background:#def67f;border:1px solid transparent;border-radius:7px;padding:15px 20px;font-size:15px;font-weight:700;text-align:left;transition:background .15s}.alpha-panel button:hover{background:#edffa4}.alpha-panel button:disabled{opacity:.4;cursor:default}.alpha-panel button.quiet{background:#ffffff12;color:#edf5df;border-color:#ffffff20}.alpha-panel button.primary{margin-top:22px}.alpha-panel button:focus-visible,.alpha-panel input:focus-visible,.alpha-panel select:focus-visible{outline:3px solid white;outline-offset:4px}.menu-list{display:grid;gap:10px;max-width:390px}.hint{display:block;margin-top:23px;line-height:1.6;color:#aec8b8;font-size:13px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.alpha-panel .character{background:#164d41;color:#f5f7e5;min-height:134px;border:2px solid transparent;padding:12px}.character.selected{border-color:#ddf67f}.character strong,.character small{display:block}.character small{font-size:12px;color:#c4dbc7;line-height:1.5;margin-top:4px}.portrait{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;color:#143b35;background:var(--kit);margin-bottom:10px;font-size:18px}.identity{padding:18px 0;color:#d8e7ce;font-size:15px}.identity small{display:block;font-size:12px;margin-top:7px;color:#adcbb7}.surfaces{display:flex;gap:14px;margin-bottom:20px}.alpha-panel button.surface{border:2px solid transparent;background:var(--court);color:white;min-height:95px;flex:1;text-shadow:0 1px 3px #183a2e}.alpha-panel button.selected{border-color:#def67f}.fields{display:flex;gap:18px;flex-wrap:wrap;margin:20px 0}.fields label{min-width:190px;flex:1}label{display:flex;flex-direction:column;gap:9px;font-size:14px;margin-bottom:16px}select,input[type=text],input:not([type]){background:#123d35;color:#f5f8e7;border:1px solid #719582;border-radius:6px;font:inherit;padding:11px;max-width:100%}input[type=range]{accent-color:#dff67f}input[type=checkbox]{width:22px;height:22px;accent-color:#dff67f}.career{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.career button{background:#164d41;color:white;border:1px solid #75957d}.career span{display:block;font-size:12px;margin-top:7px;font-weight:400}.room-code{font-family:monospace;font-size:29px;letter-spacing:3px;margin:22px 0;user-select:all;color:#dff67f}.lobby-players{display:flex;gap:30px;margin-top:20px}.control-guide{font-size:14px!important;line-height:1.9!important;margin-top:24px!important}#connection{position:absolute;right:38px;bottom:88px;max-width:360px;padding:8px;color:#e9f5d9;font-size:13px;text-align:right;z-index:4;pointer-events:none}#toast{z-index:9;top:auto;bottom:90px;white-space:normal;text-align:center;max-width:540px;background:#0b302bd9;padding:12px 22px;border-radius:8px;font-size:16px;pointer-events:none}.shot-hud{bottom:100px}.bottom{font-size:13px;text-align:center;justify-content:center;min-height:70px}.unlock{color:#def67f!important}#panel .narrow>button{display:block;margin-bottom:12px}small{line-height:1.6}.alpha-panel small{color:#bcd4c2}#game{min-height:500px}@media(max-width:950px){.roster{grid-template-columns:repeat(2,1fr)}.alpha-panel{padding:20px 5%}.career{grid-template-columns:1fr}.scoreboard{top:85px}.room-code{font-size:20px}.controller-status{font-size:10px}header{left:20px;right:20px}.fields{gap:8px}}
.binding-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center;margin:18px 0}.binding-grid button{font-size:12px;padding:9px;min-height:36px}.binding-grid span{font-size:13px}.player-charge{position:absolute;z-index:4;width:58px;height:6px;border:1px solid #eef4d4;border-radius:4px;background:#18372bd9;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 4px #0008}.player-charge i{display:block;height:100%;border-radius:3px;background:#e5d47a}.player-charge[data-timing=good] i{background:#a5f369}.player-charge[data-timing=over] i{background:#f08066}.player-charge span{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.7px;white-space:nowrap;color:#fff;text-shadow:0 1px 3px #000;font-weight:700}.shot-hud .power-track,.shot-hud #powerLabel{display:none}.shot-hud{padding:12px 16px}.shot-hud #speed{font-size:24px}
.selection-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;align-items:start}.selecting .menu{max-width:1120px}.selecting .roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.selecting .character{padding:8px;min-height:170px}.selecting .portrait{width:100%;height:auto;aspect-ratio:1;border-radius:8px;background:linear-gradient(150deg,#49776b,#163e35);object-fit:contain;margin-bottom:8px}.selecting .character strong{font-size:13px}.character.locked img{filter:saturate(.45)}.character.locked small{color:#c8b985}.player-profile{background:#ffffff08;border:1px solid #ffffff20;border-radius:15px;padding:16px;position:sticky;top:0}.player-profile h3{font-size:24px;margin:4px 0 10px}.player-profile p{font-size:13px;line-height:1.5}.player-profile canvas{width:100%;height:340px;display:block}.star-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0;font-size:14px}.star-row .lit{color:#e3ed80}.star-row .dim{color:#ffffff24}.star-row>span:last-child{font-size:22px;letter-spacing:2px}@media(max-width:1000px){.selection-layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.selecting .roster{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.selection-layout{grid-template-columns:1fr}.player-profile{position:static}}

.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:950px}.alpha-panel .menu.narrow:has(.mode-grid){max-width:1040px}.alpha-panel .mode-card{background:#17463ee8;color:#eff4df;border:1px solid #70918166;padding:23px;min-height:150px;position:relative}.mode-card strong{display:block;font-size:21px;margin:8px 0}.mode-card small{display:block;font-size:14px;font-weight:400;line-height:1.6;max-width:330px}.mode-number{color:#e1f48c;font-size:12px;letter-spacing:3px}.alpha-panel .mode-card:hover{background:#2b5d4b}.chapter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chapter-tabs button{padding:8px 12px;font-size:12px}.selecting .roster{grid-template-columns:repeat(3,minmax(0,1fr))}.selecting .portrait{width:110px;height:110px;max-width:100%;margin:0 auto 8px}.selecting .character{min-height:155px}.selecting .character:hover{background:#285e4c}.player-profile canvas{height:280px}.profile-face{width:110px;height:110px;border-radius:18px;background:#ffffff12}.career-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.chapter{border:1px solid #79957d44;border-radius:14px;padding:12px;margin-bottom:12px;background:#123f37}.chapter.current{border-color:#dff67f}.chapter h3{font-size:16px;margin:3px 0 12px}.nodes{display:flex;align-items:center;gap:4px}.nodes>i{color:#acc393;font-size:11px}.alpha-panel .node{background:#ffffff10;color:#eaf1d9;padding:7px 4px;flex:1;text-align:center;min-width:0}.node span{display:grid;place-items:center;background:#396448;border-radius:50%;width:28px;height:28px;margin:auto}.node small{display:block;font-size:10px;line-height:1.3;margin-top:5px}.alpha-panel .node:disabled{opacity:.65}.alpha-panel .node:not(:disabled){background:#dff67f;color:#173830}.node.boss span{border:2px solid #eed991;width:34px;height:34px}.stat-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin:12px 0;font-size:13px}.stat-line:has(button){grid-template-columns:1fr auto auto 30px}.stat-line button{padding:6px;text-align:center}.stat-line .stars{color:#e5ed88;letter-spacing:1px;white-space:nowrap}.stars i{color:#7c9e87;font-style:normal}.profile-stats{display:flex;gap:30px;margin:30px 0}.profile-stats>b{font-size:32px}.profile-stats small{display:block;font-size:10px}.ending{max-width:780px}.ending h1{font-size:48px}.alpha-panel:has(.career-map) .menu{max-width:1150px}.player-profile p{font-size:14px}#playerPreview{min-height:260px}@media(max-width:900px){.career-layout{grid-template-columns:1fr}.mode-grid{grid-template-columns:1fr 1fr}.stat-line{max-width:450px}}

.player-profile{background:#123f37ed}.alpha-panel .node:not(:disabled) small{color:#214136}.alpha-panel .node:not(:disabled) span{color:#ecf6db}.player-profile .stat-line{gap:6px}.stat-line:has(button){grid-template-columns:1fr auto auto 28px}.star-row .dim{color:#78967e}

@keyframes newstar{0%,100%{transform:scale(1)}35%{transform:scale(1.08);filter:brightness(1.8)}}.stat-line.star-up .stars{animation:newstar .7s ease-out}

.selecting .menu{padding-top:0}.selecting h2{font-size:32px;margin:6px 0 12px}.selecting .player-profile #playerPreview{min-height:200px}.selecting .star-row{margin:8px 0}.selecting .player-profile p{margin-bottom:12px}

/* Chapter identity uses a darkened colour field so labels always remain legible. */
.character{background:linear-gradient(150deg,color-mix(in srgb,var(--chapter,#99623d) 74%,#14252b),#122c2b);border-color:var(--chapter,#99623d)}
.character .portrait{background:linear-gradient(160deg,var(--chapter,#99623d),#24312d)}
.chapter{border-left:5px solid var(--chapter);background:linear-gradient(100deg,color-mix(in srgb,var(--chapter) 32%,#122824),#102c28)}
.chapter-tab{border-bottom:3px solid var(--chapter)!important}.boss-banner{background:var(--chapter);color:#fff;padding:12px 16px;border-radius:9px;text-shadow:0 1px 2px #000}
.fields{align-items:start}.player-profile:has(+ div){min-width:0}.selection-layout:has([data-appearance])>.player-profile{position:sticky;top:12px;align-self:start}

/* Score stays above the far baseline with the closer camera. */
.scoreboard{top:18px;padding:9px 18px;gap:18px;border-radius:10px}.score-side{gap:12px}.score-side strong{font-size:32px}.score-center{gap:3px}.score-center small{letter-spacing:1px}
#toast{left:32px;transform:none;max-width:265px;bottom:194px;text-align:left;font-size:14px}
.alpha-panel .character{background:linear-gradient(150deg,color-mix(in srgb,var(--chapter,#99623d) 74%,#14252b),#122c2b);border-color:var(--chapter,#99623d)}.alpha-panel .character.selected{border-color:#ddf67f}
@media(max-width:1050px){.scoreboard{top:17px;gap:10px;padding:9px 12px}.score-center span{display:none}.score-side{gap:8px}.score-center small{font-size:9px}.score-side strong{font-size:28px}}

.stat-number{display:block;font-size:11px;letter-spacing:.4px;text-align:right;color:#e6eac9!important}

/* Charge bar of the rally shots: a small, thin, gently curved dial. Green = normal charge, blue = Power Shot (flat only, with a
   small diamond marking the Perfect window), red = overhit. Hard, solid colours per zone (no gradients); rounded caps/joins. */
.player-charge[data-mode=bar]{width:clamp(64px,5.2vw,92px);height:clamp(15px,1.25vw,21px);border:0;background:none;box-shadow:none;overflow:visible}
.player-charge[data-mode=bar] i{display:none}
.player-charge .bar-svg{display:none}
.player-charge[data-mode=bar] .bar-svg{display:block;width:100%;height:100%;overflow:visible}
.player-charge .bar-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4.4}
.player-charge .bar-svg .dim{opacity:.4}
.player-charge .bar-svg .zg{stroke:#5cd257}
.player-charge .bar-svg .zb{stroke:#a45cff}
.player-charge .bar-svg .zr{stroke:#ff5a3c}
.player-charge .bar-svg .tick{fill:#f4ecff;stroke:#0b241c;stroke-width:.6;transform-box:fill-box;transform-origin:center}
.player-charge:not(.has-boost) .bar-svg .tick{display:none}
.player-charge .bar-svg .pos{fill:#fff;stroke:#0b241c;stroke-width:.9;filter:drop-shadow(0 0 2px #0009)}
.player-charge[data-clean="0"] .bar-svg .tick{fill:#9fb0ad}
.player-charge[data-zone=blue] .bar-svg .lit.zb{filter:drop-shadow(0 0 2.6px #b36cffee)}
.player-charge[data-zone=perfect] .bar-svg .tick{animation:barPulse .32s ease-in-out infinite alternate}
.player-charge[data-zone=red] .bar-svg{animation:barShake .09s linear infinite}
.player-charge[data-zone=red] .bar-svg .lit.zr{filter:drop-shadow(0 0 2.4px #ff5a3cee)}
.player-charge[data-zone=blue] span{color:#dcc2ff}
.player-charge[data-zone=perfect] span{color:#fff;font-size:clamp(11px,.9vw,15px);text-shadow:0 0 8px #c9a0ff,0 1px 3px #000}
.player-charge[data-zone=red] span{color:#ff9a80}
/* Smash zone (a high ball, flat only): same bar, the blue turns gold. */
.player-charge[data-smash="1"] .bar-svg .zb{stroke:#ffc23a}
.player-charge[data-smash="1"][data-zone=blue] .bar-svg .lit.zb{filter:drop-shadow(0 0 2.6px #ffc23aee)}
.player-charge[data-smash="1"] .bar-svg .tick{fill:#fff4d6}
.player-charge[data-smash="1"][data-zone=blue] span{color:#ffd97a}
.player-charge[data-smash="1"][data-zone=perfect] span{text-shadow:0 0 8px #ffd06a,0 1px 3px #000}
@keyframes barPulse{from{transform:scale(1)}to{transform:scale(1.35)}}
@keyframes barShake{0%{transform:translate(0,0)}25%{transform:translate(-.8px,.5px)}50%{transform:translate(.8px,-.5px)}75%{transform:translate(-.6px,-.6px)}100%{transform:translate(0,0)}}
.player-charge[data-mode=bar] span{bottom:clamp(14px,1.1vw,20px);font-size:clamp(9px,.72vw,12px)}
/* Serve (Update 4.7): the same dial as the rally. Green = charging, bright lime window = the ideal moment (ball at the top of the
   toss, diamond at the apex), red = held too long. */
.player-charge .bar-svg .zs{stroke:#e9ff7a}
.player-charge[data-serve="1"] .bar-svg .tick{fill:#f7ffd6}
.player-charge[data-zone=sweet] .bar-svg .lit.zs{filter:drop-shadow(0 0 2.6px #e9ff7aee)}
.player-charge[data-zone=sweet] .bar-svg .tick{animation:barPulse .32s ease-in-out infinite alternate}
.player-charge[data-zone=sweet] span{color:#efffb0;font-size:clamp(11px,.9vw,15px);text-shadow:0 0 8px #d4f26a,0 1px 3px #000}
/* Update 6.7: the topspin's blue (Power Top Spin) and its centre (Perfect Top Spin) in crimson / rose, apart from the flat's violet */
.player-charge[data-ts="1"] .bar-svg .zb{stroke:#ff2f5f}.player-charge[data-ts="1"][data-zone=blue] .bar-svg .lit.zb{filter:drop-shadow(0 0 2.6px #ff2f5fee)}.player-charge[data-ts="1"][data-zone=blue] span{color:#ffb3c6}.player-charge[data-ts="1"][data-zone=perfect] span{text-shadow:0 0 8px #ff6f95,0 1px 3px #000}