/* SENNEN COURT OS — interactive prototype styles */
:root {
  --bg: #000;
  --s1: #0a0a0a;
  --s2: #121212;
  --s3: #1a1a1a;
  --line: #262626;
  --line2: #333;
  --mute: #8a8a8a;
  --soft: #bdbdbd;
  --volt: #d7f04a;
  --volt-glow: rgba(215, 240, 74, .4);
  --clay: #f08a5d;
  --sans: 'Archivo', 'Noto Sans SC', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #050505; color: #fff; font-family: var(--sans); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--volt); text-decoration: none; }
img, video { display: block; }

.num { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.disp { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; text-transform: uppercase; }
.cut { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.cut-s { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Stage: desktop guide + phone ---------- */
.stage { min-height: 100%; display: flex; align-items: center; justify-content: center; gap: 72px; padding: 32px; }
.guide { width: 340px; flex: none; }
.guide .logo { width: 88px; mix-blend-mode: screen; }
.guide h1 { font-size: 30px; font-weight: 900; margin: 12px 0 6px; line-height: 1.2; }
.guide p { color: var(--soft); font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.guide ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.guide li button { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 1px solid var(--line); background: var(--s1); transition: border-color .2s, background .2s; }
.guide li button:hover { border-color: var(--volt); background: #0e0f08; }
.guide li b { display: block; font-size: 15px; margin-bottom: 2px; }
.guide li span.t { font-size: 12px; color: var(--mute); line-height: 1.5; }
.guide li .n { color: var(--volt); font-size: 11px; padding-top: 3px; }
.guide .foot { margin-top: 20px; font-size: 11px; color: #6e6e6e; line-height: 1.6; }

.phone { position: relative; width: 390px; height: 844px; flex: none; border-radius: 54px; background: #000; box-shadow: 0 0 0 10px #1b1b1b, 0 0 0 11px #333, 0 40px 120px rgba(215, 240, 74, .08), 0 60px 120px rgba(0, 0, 0, .8); overflow: hidden; overflow: clip; isolation: isolate; }
@media (max-width: 860px) {
  .stage { padding: 0; display: block; }
  .guide { display: none; }
  .phone { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
}

/* ---------- Screens ---------- */
/* Inactive screens stay parked off to the right for the slide-in, so they must be hidden from focus;
   otherwise focusing anything in them scrolls the phone frame sideways. */
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg); scrollbar-width: none; transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s, visibility 0s linear .45s; opacity: 0; visibility: hidden; pointer-events: none; }
.screen::-webkit-scrollbar { display: none; }
.screen.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s, visibility 0s; }
.screen.back { transform: translateX(-30%); opacity: 0; }

.capsule { position: absolute; top: 52px; right: 12px; z-index: 120; width: 87px; height: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: space-around; padding: 0 6px; pointer-events: none; }
.capsule i { width: 4px; height: 4px; border-radius: 50%; background: #fff; display: inline-block; margin: 0 1.5px; }
.capsule .sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .28); border-radius: 0; margin: 0; }
.capsule .ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: none; }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 52px 110px 12px 12px; background: linear-gradient(#000 70%, rgba(0, 0, 0, 0)); }
.topbar .back { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.topbar .ttl { display: flex; flex-direction: column; line-height: 1.1; }
.topbar .ttl .mono { font-size: 9px; color: var(--mute); }
.topbar .ttl b { font-size: 18px; font-weight: 900; }

.sec { padding: 0 16px; margin: 0 0 14px; display: flex; align-items: flex-end; justify-content: space-between; }
.sec .mono { display: block; font-size: 10px; color: var(--mute); margin-bottom: 4px; }
.sec h2 { margin: 0; font-size: 21px; font-weight: 900; }
.sec .more { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--volt); }

.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(215, 240, 74, .6); } 70% { box-shadow: 0 0 0 9px rgba(215, 240, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 240, 74, 0); } }

/* ---------- Splash ---------- */
.splash { position: absolute; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s .1s, visibility .6s .1s; }
.splash img { width: 180px; mix-blend-mode: screen; animation: comet 1.3s cubic-bezier(.2, .9, .2, 1) both; }
.splash .tag { margin-top: 18px; font-size: 11px; color: var(--mute); animation: fade .8s .8s both; }
.splash .bar { margin-top: 26px; width: 120px; height: 2px; background: var(--line); overflow: hidden; }
.splash .bar i { display: block; height: 100%; width: 100%; background: var(--volt); transform-origin: left; animation: load 1.6s ease-out both; }
.splash.out { opacity: 0; visibility: hidden; }
@keyframes comet { from { transform: translate(-160px, 160px) scale(.5) rotate(-20deg); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Home hero ---------- */
.hero { position: relative; height: 600px; overflow: hidden; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .85) 80%, #000 100%); }
.hero .vtext { position: absolute; z-index: 2; left: -6px; top: 120px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Archivo'; font-stretch: 125%; font-weight: 900; font-size: 92px; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .28); letter-spacing: .02em; }
.hero .top { position: absolute; z-index: 3; top: 52px; left: 12px; display: flex; align-items: center; gap: 8px; }
.hero .top img { width: 44px; mix-blend-mode: screen; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .copy { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 132px; }
.hero .copy .mono { font-size: 10px; color: var(--volt); }
.hero .copy h1 { margin: 10px 0 0; font-size: 40px; line-height: 1.12; font-weight: 900; letter-spacing: .02em; }
.hero .copy p { margin: 10px 0 0; font-size: 13px; color: var(--soft); }

/* Scoreboard */
.board { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 16px; background: rgba(8, 8, 8, .88); border: 1px solid #2a2a2a; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.board .row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; }
.board .row + .row { border-top: 1px solid #1f1f1f; }
.board .k { font-size: 9px; color: var(--mute); }
.board .v { font-size: 14px; font-weight: 700; }
.board .act { height: 30px; padding: 0 12px; background: var(--volt); color: #000; font-size: 12px; font-weight: 900; box-shadow: 0 0 22px var(--volt-glow); }

/* Split-flap digits */
.flap { display: inline-flex; gap: 2px; }
.flap span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: .78em; height: 1.32em; padding: 0 .06em; background: #161616; border-radius: 3px; font-family: 'Archivo'; font-stretch: 125%; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; overflow: hidden; }
.flap span::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .7); }
.flap span.sep { background: none; min-width: .3em; }
.flap span.sep::after { display: none; }
.flap span.go { animation: flip .32s ease-in-out; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); filter: brightness(.5); } 100% { transform: rotateX(0); } }
.flap.volt span { color: var(--volt); }

/* ---------- Court Clock ---------- */
.clock { margin: 0 16px; padding: 16px; background: var(--s1); border: 1px solid var(--line); }
.clock .head { display: flex; align-items: center; justify-content: space-between; }
.clock .time { font-size: 30px; }
.clock .summary { font-size: 12px; color: var(--soft); text-align: right; line-height: 1.5; }
.courts { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.court { position: relative; padding: 8px; border: 1px solid var(--line); background: #070707; text-align: left; transition: border-color .25s, background .25s, box-shadow .25s; }
.court svg { width: 100%; height: 66px; display: block; }
.court .nm { margin-top: 6px; font-size: 12px; font-weight: 900; display: flex; justify-content: space-between; }
.court .st { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--mute); margin-top: 2px; height: 11px; overflow: hidden; }
.court.free { border-color: var(--volt); background: rgba(215, 240, 74, .05); box-shadow: inset 0 0 24px rgba(215, 240, 74, .08); }
.court.free .st { color: var(--volt); }
.court.lesson .st { color: var(--soft); }
.court:disabled { cursor: default; }
.ruler { margin-top: 30px; position: relative; height: 74px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.ruler:active { cursor: grabbing; }
.ruler .bars { position: absolute; left: 0; right: 0; bottom: 22px; height: 36px; display: flex; align-items: flex-end; gap: 2px; }
.ruler .bars i { flex: 1; background: #2a2a2a; min-height: 3px; transition: background .2s; }
.ruler .bars i.peak { background: #444; }
.ruler .bars i.sel { background: var(--volt); box-shadow: 0 0 12px var(--volt-glow); }
.ruler .ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--mute); letter-spacing: .04em; }
.ruler .knob { position: absolute; bottom: 18px; width: 2px; height: 56px; background: var(--volt); transform: translateX(-1px); box-shadow: 0 0 12px var(--volt-glow); pointer-events: none; transition: left .08s; }
.ruler .knob::before { content: ''; position: absolute; top: -8px; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--volt); }
.ruler .hint { position: absolute; left: 0; right: 0; top: -14px; text-align: center; font-size: 9px; color: var(--mute); pointer-events: none; }

/* ---------- Match tickets ---------- */
.hscroll { display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.ticket { flex: none; width: 270px; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 74px; background: var(--s1); border: 1px solid var(--line); position: relative; }
.ticket .main { padding: 14px; border-right: 1px dashed #333; }
.ticket .stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; }
.ticket::before, .ticket::after { content: ''; position: absolute; right: 66px; width: 14px; height: 14px; border-radius: 50%; background: #000; border: 1px solid var(--line); }
.ticket::before { top: -8px; }
.ticket::after { bottom: -8px; }
.ticket .lv { font-size: 9px; color: var(--volt); }
.ticket h3 { margin: 6px 0 4px; font-size: 16px; font-weight: 900; }
.ticket .meta { font-size: 12px; color: var(--soft); }
.avatars { display: flex; margin-top: 10px; }
.avatars i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #000; margin-left: -6px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 900; }
.avatars i:first-child { margin-left: 0; }
.avatars i.empty { background: transparent; border: 1.5px dashed #555; color: var(--mute); }
.btn-join { width: 58px; height: 32px; background: var(--volt); color: #000; font-size: 12px; font-weight: 900; box-shadow: 0 0 18px var(--volt-glow); }
.btn-join.done { background: #1c1c1c; color: var(--volt); box-shadow: none; }

/* ---------- Coach cards ---------- */
.coach { flex: none; width: 250px; height: 340px; scroll-snap-align: start; position: relative; overflow: hidden; background: #111; text-align: left; }
.coach img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.coach:hover img { transform: scale(1.04); }
.coach::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .92) 100%); }
.coach .in { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; }
.coach .rate { position: absolute; z-index: 2; top: 14px; left: 14px; }
.coach .rate b { display: block; font-size: 30px; color: var(--volt); line-height: 1; }
.coach .badge { position: absolute; z-index: 2; top: 14px; right: 14px; height: 20px; padding: 0 6px; border: 1px solid var(--volt); color: var(--volt); font-size: 9px; display: flex; align-items: center; }
.coach h3 { margin: 0; font-size: 26px; font-weight: 900; }
.coach .spec { font-size: 9px; color: var(--soft); margin-top: 4px; }
.coach .stat { margin-top: 10px; display: grid; grid-template-columns: 52px 1fr; gap: 4px 8px; align-items: center; font-family: var(--mono); font-size: 8px; color: var(--mute); letter-spacing: .1em; }
.coach .stat i { height: 3px; background: #333; position: relative; }
.coach .stat i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--volt); }
.coach.sel { outline: 2px solid var(--volt); outline-offset: -2px; box-shadow: 0 0 30px var(--volt-glow); }

/* ---------- AI lab ---------- */
.lab { margin: 0 16px; border: 1px solid var(--line); background: var(--s1); }
.lab .vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lab .vid video { width: 100%; height: 100%; object-fit: cover; }
.lab .scan { position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(180deg, rgba(215, 240, 74, 0), rgba(215, 240, 74, .18), rgba(215, 240, 74, 0)); animation: scan 2.6s linear infinite; }
@keyframes scan { to { top: 100%; } }
.lab .tagbox { position: absolute; border: 1.5px solid var(--volt); }
.lab .tagbox span { position: absolute; top: -18px; left: -1.5px; height: 16px; padding: 0 5px; background: var(--volt); color: #000; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; display: flex; align-items: center; white-space: nowrap; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics div { padding: 12px; border-top: 1px solid var(--line); }
.metrics div + div { border-left: 1px solid var(--line); }
.metrics b { display: block; font-size: 20px; }
.metrics span { font-family: var(--mono); font-size: 8px; color: var(--mute); letter-spacing: .1em; }

/* ---------- Dock + radial ---------- */
.dock { position: absolute; z-index: 40; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 46px; padding: 0 22px; height: 64px; border-radius: 32px; background: rgba(16, 16, 16, .9); border: 1px solid #2a2a2a; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0, 0, 0, .7); transition: transform .35s, opacity .35s; }
.dock.hide { transform: translate(-50%, 140px); opacity: 0; }
.dock .side { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--mute); white-space: nowrap; min-width: 40px; }
.dock .side.on { color: var(--volt); }
.ballbtn { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 6px #000, 0 0 40px var(--volt-glow); display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.ballbtn svg { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.ballbtn.open svg { transform: rotate(135deg); }
.radial { position: absolute; inset: 0; z-index: 35; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.radial.on { opacity: 1; visibility: visible; }
.radial .it { position: absolute; left: 50%; bottom: 62px; width: 74px; margin-left: -37px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; transform: translate(0, 0) scale(.3); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.radial .it i { width: 56px; height: 56px; border-radius: 50%; background: #141414; border: 1px solid #333; display: flex; align-items: center; justify-content: center; color: var(--volt); }
.radial .it .mono { font-size: 8px; color: var(--mute); margin-top: -4px; }
.radial.on .it { opacity: 1; }
.radial .title { position: absolute; left: 0; right: 0; bottom: 410px; text-align: center; opacity: 0; transition: opacity .4s .1s; }
.radial.on .title { opacity: 1; }
.radial .title b { display: block; font-size: 22px; font-weight: 900; margin-top: 6px; }

/* ---------- Generic blocks ---------- */
.chips { display: flex; gap: 6px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border: 1px solid #2e2e2e; font-size: 12px; font-weight: 700; color: var(--soft); }
.chip.on { background: #fff; color: #000; border-color: #fff; }
.seg { display: grid; border: 1px solid #2a2a2a; }
.seg button { height: 40px; font-size: 12px; font-weight: 700; color: var(--soft); }
.seg button.on { background: #fff; color: #000; }
.days { display: flex; gap: 4px; padding: 0 16px; }
.days button { flex: 1; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--line); background: var(--s1); }
.days button .mono { font-size: 8px; letter-spacing: .06em; color: var(--mute); }
.days button b { font-size: 19px; }
.days button.on { background: var(--volt); color: #000; border-color: var(--volt); }
.days button.on .mono { color: #2b2b2b; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 16px; }
.slots button { height: 46px; font-size: 15px; font-weight: 900; border: 1px solid #333; font-family: 'Archivo'; font-stretch: 125%; }
.slots button:disabled { background: #111; border-color: #111; color: #4a4a4a; text-decoration: line-through; cursor: not-allowed; }
.slots button.on { background: var(--volt); color: #000; border-color: var(--volt); box-shadow: 0 0 22px var(--volt-glow); }
.pay { margin: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.pay button { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--s1); border: 1px solid #2a2a2a; text-align: left; }
.pay button .r { width: 18px; height: 18px; border: 1.5px solid #555; flex: none; display: flex; align-items: center; justify-content: center; }
.pay button.on { border-color: var(--volt); }
.pay button.on .r { border-color: var(--volt); }
.pay button.on .r::after { content: ''; width: 8px; height: 8px; background: var(--volt); }
.pay b { display: block; font-size: 14px; }
.pay span.s { font-size: 11px; color: var(--mute); }
.label { padding: 0 16px; margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.label .mono { font-size: 10px; color: var(--volt); }
.label b { font-size: 17px; font-weight: 900; }
.label .r { margin-left: auto; font-size: 11px; color: var(--mute); }

/* ---------- Serve to confirm ---------- */
.servebar { position: sticky; bottom: 0; z-index: 10; padding: 14px 16px 30px; background: linear-gradient(rgba(0, 0, 0, 0), #000 22%); }
.servebar .sum { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.servebar .sum b { font-size: 15px; font-weight: 900; }
.servebar .sum span { font-size: 11px; color: var(--mute); }
.serve { position: relative; height: 66px; border: 1px solid #333; background: #090909; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.serve .net { position: absolute; top: 8px; bottom: 8px; left: 62%; width: 0; border-left: 2px dashed #3a3a3a; }
.serve .net::after { content: 'NET'; position: absolute; top: -2px; left: 6px; font-family: var(--mono); font-size: 8px; color: #555; letter-spacing: .1em; }
.serve .zone { position: absolute; top: 0; bottom: 0; right: 0; width: 26%; background: repeating-linear-gradient(135deg, rgba(215, 240, 74, .09) 0 6px, rgba(0, 0, 0, 0) 6px 12px); border-left: 1px solid rgba(215, 240, 74, .4); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; color: var(--volt); letter-spacing: .14em; }
.serve .txt { position: absolute; left: 76px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 13px; color: var(--soft); pointer-events: none; transition: opacity .2s; }
.serve .trail { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(215, 240, 74, 0), rgba(215, 240, 74, .18)); pointer-events: none; }
.serve .ball { position: absolute; left: 8px; top: 9px; width: 48px; height: 48px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 24px var(--volt-glow); cursor: grab; display: flex; align-items: center; justify-content: center; }
.serve .ball:active { cursor: grabbing; }
.serve.disabled { opacity: .45; pointer-events: none; }

/* ---------- ACE overlay ---------- */
.ace { position: absolute; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.ace.on { opacity: 1; visibility: visible; }
.ace .burst { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(215, 240, 74, .28), rgba(0, 0, 0, 0) 55%); }
.ace .big { font-size: 92px; position: relative; }
.ace .big span { width: 1em; }
.ace .sub { position: relative; margin-top: 12px; font-size: 11px; color: var(--mute); }
.pass { position: relative; margin-top: 28px; width: 100%; background: #0c0c0c; border: 1px solid #2a2a2a; animation: rise .6s .25s both; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pass .ph { display: flex; justify-content: space-between; padding: 14px 16px; border-bottom: 1px dashed #333; }
.pass .pb { display: grid; grid-template-columns: 1fr 96px; gap: 12px; padding: 16px; align-items: center; }
.pass .qr { width: 96px; height: 96px; background: #fff; padding: 6px; display: grid; grid-template-columns: repeat(13, 1fr); }
.pass .qr i { background: #fff; }
.pass .qr i.b { background: #000; }
.ace .btns { position: relative; margin-top: 20px; display: flex; gap: 8px; width: 100%; }
.ace .btns button { flex: 1; height: 48px; font-size: 14px; font-weight: 900; border: 1px solid #333; }
.ace .btns button.p { background: var(--volt); color: #000; border-color: var(--volt); }

/* ---------- Bottom sheet ---------- */
.sheet-mask { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.sheet-mask.on { opacity: 1; visibility: visible; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 88%; overflow-y: auto; background: #050505; border-top: 1px solid #2a2a2a; transform: translateY(105%); visibility: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .45s; scrollbar-width: none; }
.sheet::-webkit-scrollbar { display: none; }
.sheet.on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.sheet .grab { width: 40px; height: 4px; background: #333; margin: 10px auto 0; }
.sheet .media { position: relative; margin: 12px 16px 0; aspect-ratio: 16 / 8; overflow: hidden; border: 1px solid var(--line); }
.sheet .media video { width: 100%; height: 100%; object-fit: cover; }
.sheet .media .ov { position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; justify-content: space-between; align-items: flex-end; }
.stepper { margin: 0 16px; display: grid; grid-template-columns: 56px 1fr 56px; border: 1px solid #2a2a2a; }
.stepper button { height: 56px; font-size: 24px; }
.stepper button:disabled { color: #3a3a3a; cursor: not-allowed; }
.stepper div { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; }
.stepper div b { font-size: 22px; }
.stepper div span { font-size: 11px; color: var(--mute); }
.toggle { margin: 12px 16px 0; display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--s2); border: 1px solid #262626; font-size: 12px; width: calc(100% - 32px); text-align: left; }
.toggle .sw { width: 38px; height: 22px; background: #2b2b2b; position: relative; flex: none; transition: background .2s; }
.toggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #8a8a8a; transition: left .2s, background .2s; }
.toggle.on .sw { background: var(--volt); }
.toggle.on .sw::after { left: 19px; background: #000; }

/* ---------- Player card ---------- */
.pcard-wrap { perspective: 1000px; padding: 8px 35px 0; }
.pcard { position: relative; width: 320px; height: 460px; margin: 0 auto; transform-style: preserve-3d; transition: transform .15s ease-out; border-radius: 18px; overflow: hidden; border: 1px solid rgba(215, 240, 74, .5); box-shadow: 0 30px 80px rgba(215, 240, 74, .12); background: #0a0a0a; }
.pcard img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9) 72%, #000 100%); }
.pcard .holo { position: absolute; inset: -50%; z-index: 2; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(215, 240, 74, .22) 46%, rgba(255, 255, 255, .25) 50%, rgba(124, 200, 255, .18) 54%, rgba(255, 255, 255, 0) 62%); mix-blend-mode: screen; transform: translate(var(--hx, 0), var(--hy, 0)); pointer-events: none; }
.pcard .lines { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, 0) 1px 6px); pointer-events: none; }
.pcard .c { position: absolute; z-index: 3; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.pcard .ovr b { font-size: 54px; line-height: .9; color: var(--volt); display: block; }
.pcard .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 10px; }
.pcard .stats b { display: block; font-size: 18px; }
.pcard .stats span { font-family: var(--mono); font-size: 8px; color: var(--mute); letter-spacing: .1em; }

.rings { margin: 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rings > div { padding: 14px 8px; background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rings .mono { font-size: 8px; color: var(--mute); }
.list { margin: 0 16px; border-top: 1px solid #1c1c1c; }
.list button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #1c1c1c; font-size: 14px; text-align: left; }
.list button .mono { font-size: 10px; color: var(--mute); }

/* Poster modal */
.poster { position: absolute; inset: 0; z-index: 80; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.poster.on { opacity: 1; visibility: visible; }
.poster .sheetp { width: 300px; background: #000; border: 1px solid #333; overflow: hidden; transform: scale(.9); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.poster.on .sheetp { transform: none; }
.poster .sheetp .img { position: relative; height: 300px; }
.poster .sheetp .img img { width: 100%; height: 100%; object-fit: cover; }
.poster .sheetp .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000); }
.poster .sheetp .img .t { position: absolute; z-index: 2; left: 16px; bottom: 12px; right: 16px; }
.poster .bot { display: grid; grid-template-columns: 1fr 72px; gap: 12px; padding: 14px 16px 16px; align-items: center; }

/* ---------- Shop ---------- */
.drop { position: relative; margin: 0 16px; height: 300px; overflow: hidden; border: 1px solid var(--line); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .85)); }
.drop .c { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; }
.drop .logo { position: absolute; z-index: 2; right: 12px; top: 12px; width: 96px; opacity: .95; }
.prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 16px; }
.prod { background: var(--s1); border: 1px solid #1c1c1c; display: flex; flex-direction: column; }
.prod .im { position: relative; aspect-ratio: 1; overflow: hidden; background: #080808; }
.prod .im img { width: 100%; height: 100%; object-fit: cover; }
.prod .im .tee { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .08), rgba(0, 0, 0, 0) 60%); }
.prod .tg { position: absolute; top: 8px; left: 8px; height: 18px; padding: 0 6px; background: var(--volt); color: #000; font-family: var(--mono); font-size: 8px; font-weight: 700; display: flex; align-items: center; letter-spacing: .08em; }
.prod .b { padding: 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod .b b { font-size: 14px; }
.prod .row { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: flex-end; }
.prod .add { width: 34px; height: 34px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; }
.cartbar { position: absolute; z-index: 45; left: 16px; right: 16px; bottom: 104px; height: 56px; background: var(--volt); color: #000; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; box-shadow: 0 0 40px rgba(215, 240, 74, .3); transform: translateY(200px); visibility: hidden; transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), visibility 0s linear .4s; }
.cartbar.on { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), visibility 0s; }
.cartbar.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.04); } }

/* ---------- Pose trace ---------- */
.pose { position: absolute; right: 8px; top: 8px; width: 92px; height: 120px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(215, 240, 74, .5); }
.pose .arm { transform-origin: 46px 44px; animation: swing 1.6s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-70deg); } 55% { transform: rotate(60deg); } }
.phase { margin: 12px 16px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.phase div { padding: 8px 6px; background: #141414; font-size: 11px; text-align: center; }
.phase div span { display: block; font-family: var(--mono); font-size: 8px; color: var(--mute); letter-spacing: .08em; margin-top: 2px; }
.phase div.on { background: var(--volt); color: #000; }
.phase div.on span { color: #2b2b2b; }

/* Toast */
.toast { position: absolute; z-index: 95; left: 50%; bottom: 112px; transform: translate(-50%, 20px); padding: 10px 16px; background: #fff; color: #000; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}