:root {
  --ink: #1a1420; --pink: #ff2fa0; --yellow: #ffd23a; --cyan: #3fe0ff; --orange: #ff7a1f;
  --panel: rgba(20, 12, 40, 0.82); --white: #fff7ec;
  --f-head: 'Lilita One', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120a24; color: var(--white); font-family: var(--f-body); user-select: none; -webkit-tap-highlight-color: transparent; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hide { display: none !important; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 30; mix-blend-mode: screen; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, #3a1a6a, #120a24); z-index: 40; font: 22px var(--f-head); }
.spin { width: 54px; height: 54px; border-radius: 50%; border: 7px solid #fff3; border-top-color: var(--yellow); animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ menus */
#ui { position: fixed; inset: 0; z-index: 10; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; overflow-y: auto; }
.screen.menu { background: linear-gradient(115deg, rgba(40, 10, 80, 0.86), rgba(120, 20, 90, 0.7) 55%, rgba(255, 90, 40, 0.45)); }
.screen h1 { font: 48px var(--f-head); margin: 0 0 6px; letter-spacing: 1px; text-shadow: 0 4px 0 var(--ink), 0 0 24px #ff2fa088; transform: skewX(-6deg); }
.screen h1 small { font-size: 0.5em; color: var(--yellow); margin-left: 10px; }
.help { max-width: 760px; text-align: center; opacity: 0.9; font-weight: 700; line-height: 1.45; }
.btn { font: 22px var(--f-head); color: var(--white); background: linear-gradient(180deg, #4a2a8a, #2a1250); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 22px; cursor: pointer; box-shadow: 0 5px 0 var(--ink); transform: skewX(-6deg); transition: transform 0.08s, background 0.1s; min-width: 220px; }
.btn.focus, .btn:hover { background: linear-gradient(180deg, var(--pink), #b0107a); transform: skewX(-6deg) scale(1.06); outline: 3px solid var(--yellow); }
.btn.big { font-size: 28px; padding: 12px 36px; }
.btn.go { background: linear-gradient(180deg, #2fd36b, #138a3e); }
.btn.go.focus, .btn.go:hover { background: linear-gradient(180deg, var(--yellow), #e09a00); color: var(--ink); }
.btn.disabled { opacity: 0.45; filter: grayscale(0.7); }
.opts { display: flex; flex-direction: column; gap: 8px; width: min(760px, 94vw); }
.opts.two { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .opts.two { grid-template-columns: 1fr; } }
.btn.opt { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 18px; text-align: left; min-width: 0; }
.opt-v { color: var(--yellow); white-space: nowrap; }

/* title */
.scr-title { background: radial-gradient(circle at 50% 30%, rgba(255, 47, 160, 0.35), rgba(18, 10, 36, 0.2) 60%); }
.logo { text-align: center; transform: rotate(-4deg); filter: drop-shadow(0 8px 0 var(--ink)); }
.logo-capy { font: 64px var(--f-head); color: var(--yellow); letter-spacing: 6px; -webkit-text-stroke: 3px var(--ink); }
.logo-pb { font: 92px var(--f-head); line-height: 0.9; color: #fff; -webkit-text-stroke: 4px var(--ink); background: linear-gradient(180deg, #fff, #9ae6ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-fever { font: 78px var(--f-head); line-height: 1; letter-spacing: 8px; background: linear-gradient(90deg, #ff2fa0, #ff7a1f, #ffd23a, #ff2fa0); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 3px var(--ink); animation: fv 3s linear infinite; }
@keyframes fv { to { background-position: 300% 0; } }
.logo.small { transform: rotate(-3deg) scale(0.55); margin: -40px 0 -50px; }
.press { font: 26px var(--f-head); animation: blink 1.1s ease-in-out infinite; margin-top: 20px; }
@keyframes blink { 50% { opacity: 0.35; } }
.title-foot { position: absolute; bottom: 18px; opacity: 0.75; font-weight: 800; }
.btn.start { position: absolute; bottom: 60px; opacity: 0.001; }

/* main menu */
.scr-main { flex-direction: row; flex-wrap: wrap; gap: 30px; }
.scr-main .logo { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) rotate(-3deg) scale(0.5); }
.mm { display: flex; flex-direction: column; gap: 10px; margin-top: 80px; }
.mi { display: flex; align-items: center; gap: 14px; min-width: 330px; text-align: left; font-size: 26px; }
.mi-ic { font-size: 30px; width: 40px; text-align: center; }
.mi.kid { background: linear-gradient(180deg, #ff9d2e, #c25a00); font-size: 22px; }
.mm-side { width: 340px; margin-top: 80px; }
.mm-side .desc { background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 18px; font-size: 19px; font-weight: 800; min-height: 90px; transform: skewX(-6deg); }

/* join */
.lanes { display: flex; gap: 24px; }
.lane { width: 280px; min-height: 180px; background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 14px; transform: skewX(-6deg); }
.lane.t0 { border-color: #ff5a5a; } .lane.t1 { border-color: #3b8cff; }
.lane h3 { margin: 0 0 10px; font: 24px var(--f-head); }
.jp { font: 20px var(--f-head); padding: 8px 12px; background: #fff2; border-radius: 10px; margin-bottom: 6px; }
.jp.cpu { opacity: 0.6; }

/* courts */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; width: min(1100px, 96vw); }
.kg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; min-width: 0; font-size: 18px; text-transform: capitalize; }
.kthumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; border: 2px solid var(--ink); background: linear-gradient(135deg, #3a74c4, #2fd36b); }
.kthumb.rnd { display: flex; align-items: center; justify-content: center; font: 48px var(--f-head); background: linear-gradient(135deg, #ff2fa0, #ffd23a); }
.kinfo { min-height: 90px; text-align: center; }
.ki-name { font: 30px var(--f-head); color: var(--yellow); }
.ki-blurb { font-weight: 800; margin: 4px 0 8px; }
.ki-tags span { display: inline-block; background: #fff2; border-radius: 99px; padding: 3px 12px; margin: 3px; font-weight: 800; }

/* cups / towers / mix / academy */
.cups { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cup { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 240px; min-height: 190px; justify-content: center; }
.cup.wide { width: 300px; }
.cup-ic { font-size: 54px; } .cup-n { font-size: 26px; } .cup-t { font: 15px var(--f-body); font-weight: 800; opacity: 0.9; }
.br { display: flex; flex-direction: column; gap: 10px; }
.bm { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 14px; padding: 8px 14px; border: 3px solid var(--ink); }
.bm i { font: 20px var(--f-head); color: var(--yellow); }
.be { display: flex; align-items: center; gap: 6px; min-width: 230px; font: 18px var(--f-head); }
.be.you { color: var(--yellow); }
.be-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff2; }
.hearts { font-size: 34px; }
.trial { background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 18px 26px; text-align: center; transform: skewX(-6deg); }
.tr-name { font: 34px var(--f-head); color: var(--yellow); } .tr-desc { font-weight: 800; font-size: 19px; }
.trophy { font-size: 120px; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(4deg); } }
.lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; width: min(1150px, 96vw); }
.lesson { min-width: 0; text-align: left; font: 15px var(--f-body); font-weight: 700; transform: none; display: flex; flex-direction: column; gap: 4px; }
.lesson.focus, .lesson:hover { transform: scale(1.03); }
.ls-ic { font-size: 30px; } .ls-t { font: 22px var(--f-head); color: var(--yellow); } .ls-d { line-height: 1.35; }
table.ctl { border-collapse: collapse; background: var(--panel); border-radius: 14px; overflow: hidden; font-weight: 800; }
table.ctl td, table.ctl th { padding: 7px 16px; border-bottom: 1px solid #fff2; }
table.ctl th { font: 18px var(--f-head); color: var(--yellow); }
.res { display: flex; gap: 20px; }
.r-team { background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 16px 24px; font: 22px var(--f-head); display: flex; flex-direction: column; align-items: center; }
.r-team b { font-size: 56px; } .r-team.win { border-color: var(--yellow); box-shadow: 0 0 30px #ffd23a88; }
.score-now { font: 40px var(--f-head); color: var(--yellow); }
.screen.pause { background: rgba(10, 5, 25, 0.72); }

/* portraits fallback */
.pfallback { display: flex; align-items: center; justify-content: center; font: 28px var(--f-head); color: #fff; border-radius: 50%; }

/* ------------------------------------------------------------ fighter select (MvC2 / SF3) */
.screen.fselect { padding: 0; display: block; background: #0b0618; overflow: hidden; }
.fs-bg { position: absolute; inset: -20%; background:
  repeating-linear-gradient(115deg, rgba(255, 47, 160, 0.16) 0 40px, rgba(60, 20, 140, 0.15) 40px 80px),
  radial-gradient(circle at 50% 50%, #3a1670, #0b0618 70%);
  animation: fsbg 14s linear infinite; }
@keyframes fsbg { to { transform: translateX(160px); } }
.fs-title { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: 46px var(--f-head); letter-spacing: 4px; color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 20px var(--pink); transform: skewX(-10deg); }
.fs-left, .fs-right { position: absolute; top: 70px; bottom: 70px; width: 30vw; pointer-events: none; }
.fs-left { left: 0; } .fs-right { right: 0; }
.fs-art { position: absolute; inset: 0; }
.fs-art.second { inset: auto 0 0 auto; width: 52%; height: 48%; opacity: 0.92; }
.fs-left .fs-art.second { left: auto; right: 0; } .fs-right .fs-art.second { right: auto; left: 0; }
.fs-full { position: absolute; bottom: 70px; height: 78%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 0 #000) drop-shadow(10px 10px 0 rgba(0,0,0,0.45)); animation: fsin 0.25s ease-out; }
.fs-left .fs-full { left: 4%; } .fs-right .fs-full { right: 4%; transform: scaleX(-1); }
.fs-art.second .fs-full { height: 100%; bottom: 0; }
@keyframes fsin { from { opacity: 0; translate: -40px 0; } }
.fs-right .fs-full { animation-name: fsinr; } @keyframes fsinr { from { opacity: 0; translate: 40px 0; } }
.fs-art::before { content: ''; position: absolute; inset: 8% 0 4% 0; background: linear-gradient(0deg, var(--c), transparent 70%); opacity: 0.35; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.fs-right .fs-art::before { clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%); }
.fs-name { position: absolute; bottom: 16px; font: 64px var(--f-head); color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--c); transform: skewX(-12deg); line-height: 1; }
.fs-left .fs-name { left: 18px; } .fs-right .fs-name { right: 18px; }
.fs-art.second .fs-name { font-size: 30px; bottom: 4px; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--c); }
.fs-style { position: absolute; bottom: 0; font: 14px var(--f-head); letter-spacing: 3px; color: var(--yellow); }
.fs-left .fs-style { left: 22px; } .fs-right .fs-style { right: 22px; }
.fs-art.second .fs-style { display: none; }
.fs-stats { position: absolute; top: 10px; display: flex; flex-direction: column; gap: 3px; background: rgba(0,0,0,0.45); padding: 8px 10px; border-radius: 10px; }
.fs-left .fs-stats { left: 12px; } .fs-right .fs-stats { right: 12px; }
.fs-stat { display: flex; align-items: center; gap: 8px; font: 13px var(--f-head); }
.fs-stat span { width: 34px; } .fs-stat i { display: flex; gap: 3px; }
.fs-stat b, .fs-stat em { width: 16px; height: 9px; transform: skewX(-20deg); background: var(--c); border: 1px solid var(--ink); }
.fs-stat em { background: #fff2; }
.fs-blurb { position: absolute; top: 150px; width: 60%; font-weight: 800; font-size: 14px; background: rgba(0,0,0,0.45); padding: 6px 10px; border-radius: 10px; }
.fs-left .fs-blurb { left: 12px; } .fs-right .fs-blurb { right: 12px; text-align: right; }
.fs-paddle { position: absolute; top: 210px; font: 16px var(--f-head); color: var(--p); background: rgba(0,0,0,0.55); padding: 4px 12px; border-radius: 99px; border: 2px solid var(--p); }
.fs-left .fs-paddle { left: 12px; } .fs-right .fs-paddle { right: 12px; }
.fs-art.second .fs-paddle { top: auto; bottom: 40px; font-size: 12px; }
.fs-art.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fs-q { font: 160px var(--f-head); color: #fff2; } .fs-who { font: 30px var(--f-head); color: #fff5; }
.fs-art.locked .fs-full { filter: drop-shadow(0 0 14px var(--c)) drop-shadow(10px 10px 0 rgba(0,0,0,0.45)); }
.fs-center { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; width: 40vw; min-width: 420px; }
.fs-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; width: 100%; transform: skewX(-10deg); }
.fs-tile { position: relative; aspect-ratio: 1 / 1.15; background: linear-gradient(160deg, var(--c), #1a0f30 75%); border: 3px solid var(--ink); outline: 3px solid transparent; cursor: pointer; overflow: hidden; transition: transform 0.08s; }
.fs-tile:nth-child(12n+7), .fs-tile:nth-child(12n+8), .fs-tile:nth-child(12n+9), .fs-tile:nth-child(12n+10), .fs-tile:nth-child(12n+11), .fs-tile:nth-child(12n+12) { translate: 22px 0; }
.fs-tin { position: absolute; inset: 0; transform: skewX(10deg) scale(1.15); }
.fs-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fs-tname { position: absolute; left: 0; right: 0; bottom: 0; font: 12px var(--f-head); text-align: center; background: rgba(0,0,0,0.65); transform: skewX(10deg); letter-spacing: 1px; }
.fs-tile.hover { outline-color: var(--pc); transform: scale(1.12); z-index: 2; box-shadow: 0 0 22px var(--pc); animation: tilepulse 0.5s ease-in-out infinite alternate; }
@keyframes tilepulse { to { box-shadow: 0 0 8px var(--pc); } }
.fs-tile.taken .fs-img { filter: grayscale(1) brightness(0.45); }
.fs-curs { position: absolute; top: 2px; left: 2px; display: flex; gap: 2px; transform: skewX(10deg); }
.fs-curs b { font: 11px var(--f-head); background: var(--pc); color: #fff; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--ink); }
.fs-paddles { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; opacity: 0.4; transition: opacity 0.2s; }
.fs-paddles.active { opacity: 1; }
.fs-pd { position: relative; width: 46px; height: 46px; border-radius: 10px; background: #1a0f30; border: 3px solid var(--ink); outline: 3px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fs-pd img { width: 40px; height: 40px; object-fit: contain; }
.fs-pd.hover { outline-color: var(--pc); transform: scale(1.18); box-shadow: 0 0 14px var(--pc); }
.pdot { width: 26px; height: 32px; border-radius: 50% 50% 40% 40%; border: 2px solid var(--ink); }
.fs-pdesc { min-height: 44px; text-align: center; font-weight: 800; background: rgba(0,0,0,0.5); padding: 6px 14px; border-radius: 12px; max-width: 100%; }
.fs-status { position: absolute; bottom: 38px; left: 0; right: 0; text-align: center; font: 18px var(--f-head); }
.fs-help { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-weight: 800; opacity: 0.8; }
@media (max-width: 900px) { .fs-left, .fs-right { width: 26vw; } .fs-name { font-size: 34px; } .fs-blurb, .fs-stats { display: none; } .fs-center { min-width: 0; width: 46vw; } }

/* VS splash */
.vs-splash { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.vs-half { position: absolute; top: 0; bottom: 0; width: 56%; display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.vs-half.l { left: 0; background: linear-gradient(110deg, #ff3b3b, #8a1030); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); animation: vsl 0.35s cubic-bezier(.2,.9,.3,1.2); }
.vs-half.r { right: 0; background: linear-gradient(250deg, #3b8cff, #10308a); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); animation: vsr 0.35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes vsl { from { transform: translateX(-100%); } } @keyframes vsr { from { transform: translateX(100%); } }
.vs-f { position: relative; height: 90%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.vs-f img { height: 82%; filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.5)); }
.vs-half.r .vs-f img { transform: scaleX(-1); }
.vs-f.b { height: 70%; margin-left: -60px; }
.vs-n { font: 54px var(--f-head); color: #fff; -webkit-text-stroke: 3px var(--ink); transform: skewX(-10deg); margin-bottom: 30px; }
.vs-mark { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-8deg); font: 180px var(--f-head); color: var(--yellow); -webkit-text-stroke: 6px var(--ink); text-shadow: 0 0 40px #ff2fa0; animation: vsm 0.5s 0.25s both cubic-bezier(.2,1.6,.4,1); }
@keyframes vsm { from { transform: translate(-50%, -50%) scale(4) rotate(-8deg); opacity: 0; } }
.vs-court { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font: 30px var(--f-head); text-shadow: 0 3px 0 var(--ink); }
.vs-splash.out { animation: vsout 0.35s forwards; } @keyframes vsout { to { opacity: 0; transform: scale(1.1); } }

/* ------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; font-family: var(--f-head); }
.scoreboard { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) skewX(-8deg); display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(30, 14, 60, 0.92), rgba(16, 8, 34, 0.92)); border: 3px solid var(--ink); border-radius: 16px; padding: 6px 14px; box-shadow: 0 5px 0 var(--ink); }
.scoreboard.bump { animation: bump 0.35s; } @keyframes bump { 40% { transform: translateX(-50%) skewX(-8deg) scale(1.12); } }
.sb-team { display: flex; align-items: center; gap: 4px; }
.sb-p { position: relative; }
.sb-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #fff2; border: 2px solid #fff4; }
.sb-team.t0 .sb-img { border-color: #ff5a5a; } .sb-team.t1 .sb-img { border-color: #3b8cff; }
.sb-serve { position: absolute; right: -4px; bottom: -4px; color: #e8f23a; font-size: 16px; text-shadow: 0 0 4px #000; display: none; }
.sb-p.serving .sb-serve { display: block; }
.sb-mid { text-align: center; min-width: 120px; }
.sb-score { font-size: 38px; line-height: 1; } .sb-score .dash { margin: 0 8px; opacity: 0.6; }
.sb-score .s0 { color: #ff7a7a; } .sb-score .s1 { color: #7ab0ff; }
.sb-call { font-size: 15px; color: var(--yellow); letter-spacing: 2px; }
.sb-games { display: flex; gap: 3px; } .sb-games i { width: 10px; height: 10px; border-radius: 50%; background: #fff3; } .sb-games i.on { background: var(--yellow); }
.cards { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; }
.card-team { display: flex; gap: 8px; } .card-team.ct1 { flex-direction: row-reverse; }
.pcard { display: flex; align-items: center; gap: 8px; background: rgba(16, 8, 34, 0.85); border: 3px solid var(--ink); border-radius: 14px; padding: 5px 10px 5px 5px; transform: skewX(-8deg); min-width: 210px; }
.ct1 .pcard { flex-direction: row-reverse; padding: 5px 5px 5px 10px; }
.pcard.ko { filter: grayscale(1); opacity: 0.6; }
.pcard.hot { box-shadow: 0 0 16px #ff5a2a; }
.pc-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #fff2; }
.pc-body { flex: 1; }
.pc-name { font-size: 17px; } .pc-tag { font-size: 11px; background: #ff3b3b; color: #fff; border-radius: 4px; padding: 0 4px; } .pc-tag.cpu { background: #666; }
.fever { display: flex; gap: 4px; align-items: center; margin: 2px 0; }
.fv { width: 54px; height: 11px; background: #fff2; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; transform: skewX(-20deg); }
.fv i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff7a1f, #ff2fa0); transition: width 0.15s; }
.fv.full { box-shadow: 0 0 10px #ff2fa0; animation: fvp 0.6s ease-in-out infinite alternate; } @keyframes fvp { to { box-shadow: 0 0 2px #ff2fa0; } }
.fv.full i { background: linear-gradient(90deg, #ffd23a, #ff2fa0, #ffd23a); background-size: 200%; animation: fv 1s linear infinite; }
.fv-lbl { font-size: 10px; color: #ff9ad0; letter-spacing: 1px; }
.hp { height: 7px; background: #fff2; border-radius: 4px; overflow: hidden; width: 116px; }
.hp i { display: block; height: 100%; background: #4cff7a; transition: width 0.2s; } .hp i.low { background: #ff4a4a; }
.weather { position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; }
.wind, .temp, .grav { background: rgba(16, 8, 34, 0.85); border: 3px solid var(--ink); border-radius: 12px; padding: 5px 10px; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.wind-dial { width: 34px; height: 34px; border-radius: 50%; background: #fff2; display: flex; align-items: center; justify-content: center; }
.wind-arrow { color: var(--cyan); font-size: 20px; transition: transform 0.3s; }
.wind.gust { box-shadow: 0 0 14px var(--cyan); } .wind.gust .wind-txt::after { content: ' GUST!'; color: var(--cyan); }
.thermo { width: 10px; height: 32px; background: #fff2; border-radius: 6px; position: relative; overflow: hidden; } .thermo i { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, #ff3b1f, #ffd23a); }
.temp.hot { color: #ff8a5a; animation: hot 0.9s ease-in-out infinite alternate; } @keyframes hot { to { box-shadow: 0 0 16px #ff5a1f; } }
.temp.cold { color: #9ae6ff; } .temp em { font-style: normal; font-size: 12px; opacity: 0.85; }
.grav { color: #c9a8ff; }
.banner { position: absolute; top: 34%; left: 0; right: 0; text-align: center; }
.b-main { display: inline-block; font-size: 82px; color: var(--c); -webkit-text-stroke: 4px var(--ink); text-shadow: 0 7px 0 var(--ink); transform: skewX(-10deg); }
.b-sub { font-size: 30px; color: #fff; text-shadow: 0 3px 0 var(--ink); letter-spacing: 3px; }
.banner.go .b-main { animation: slam 0.4s cubic-bezier(.2,1.6,.4,1); } @keyframes slam { from { transform: skewX(-10deg) scale(2.6); opacity: 0; } }
.hint { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); background: rgba(16, 8, 34, 0.85); border: 3px solid var(--yellow); border-radius: 99px; padding: 6px 20px; font-size: 20px; animation: blink 1.2s ease-in-out infinite; }
.toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); border-radius: 10px; padding: 5px 14px; font-size: 18px; }
.pops { position: absolute; inset: 0; }
.pop { position: absolute; transform: translate(-50%, -50%) skewX(-8deg); font-size: 24px; -webkit-text-stroke: 2px var(--ink); white-space: nowrap; animation: popin 0.25s cubic-bezier(.2,1.6,.4,1); }
.pop.big { font-size: 34px; } @keyframes popin { from { transform: translate(-50%, -50%) scale(2.2); } }
.replay .bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; } .replay .bar.top { top: 0; } .replay .bar.bot { bottom: 0; }
#hud.replaying .scoreboard, #hud.replaying .cards, #hud.replaying .weather { opacity: 0; }
.rp-tag { position: absolute; top: calc(9vh + 12px); left: 18px; font-size: 30px; letter-spacing: 2px; text-shadow: 0 3px 0 var(--ink); }
.rp-tag .rec { color: #ff3b3b; animation: blink 0.9s infinite; } .rp-cam { font-size: 18px; color: var(--yellow); margin-left: 8px; }
.rp-help { position: absolute; bottom: calc(9vh + 10px); right: 18px; font: 15px var(--f-body); font-weight: 800; opacity: 0.85; }
.commentator { position: absolute; left: 12px; bottom: 96px; display: flex; align-items: center; gap: 8px; animation: popin 0.25s; }
.com-face { font-size: 40px; background: #fff; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); }
.com-text { background: #fff; color: var(--ink); border-radius: 14px; padding: 6px 14px; font-size: 20px; border: 3px solid var(--ink); }
.intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12vh; background: linear-gradient(0deg, rgba(10,5,25,0.75), transparent 55%); }
.in-court { font-size: 60px; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 6px 0 var(--ink); transform: skewX(-8deg); animation: popin 0.4s; }
.in-blurb { font: 20px var(--f-body); font-weight: 800; margin-bottom: 14px; }
.in-vs { display: flex; align-items: center; gap: 24px; } .in-team { display: flex; gap: 10px; }
.in-p { display: flex; flex-direction: column; align-items: center; font-size: 18px; } .in-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff2; border: 3px solid #fff6; }
.in-x { font-size: 44px; color: var(--yellow); -webkit-text-stroke: 2px var(--ink); }
.in-skip { margin-top: 12px; font-size: 16px; opacity: 0.8; animation: blink 1.2s infinite; }
.ringscore { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); background: rgba(16,8,34,0.85); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 16px; font-size: 24px; }
.ringscore .t0 { color: #ff7a7a; } .ringscore .t1 { color: #7ab0ff; } .ringscore small { font-size: 13px; opacity: 0.8; }

/* touch */
#touch { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#touch .stick { position: absolute; left: 30px; bottom: 30px; width: 130px; height: 130px; border-radius: 50%; background: #fff2; border: 3px solid #fff5; pointer-events: auto; }
#touch .knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: #fff8; }
#touch .tbtns { position: absolute; right: 20px; bottom: 20px; display: grid; grid-template-columns: repeat(3, 66px); gap: 8px; pointer-events: auto; }
#touch .tb { width: 66px; height: 66px; border-radius: 50%; border: 3px solid var(--ink); font: 13px var(--f-head); color: #fff; pointer-events: auto; }
.tb.top { background: #e03030; } .tb.slice { background: #3070e0; } .tb.flat { background: #9030e0; } .tb.lob { background: #d0a010; } .tb.dink { background: #ddd; color: #222; } .tb.fever { background: linear-gradient(135deg, #ff2fa0, #ffd23a); } .tb.trick { background: #20a060; }
#touch .pause { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; background: #0008; pointer-events: auto; }
.coinbox { position: absolute; top: 10px; right: 10px; background: rgba(16, 8, 34, 0.85); border: 3px solid var(--ink); border-radius: 99px; padding: 4px 14px; font-size: 22px; color: var(--yellow); }
.coinbox.bump { animation: cbump 0.35s; } @keyframes cbump { 40% { transform: scale(1.3); } }
#hud.replaying .coinbox { opacity: 0; }
/* shop + locks */
.mm-coins { margin-top: 14px; font: 26px var(--f-head); color: var(--yellow); text-align: center; }
.shop-coins { position: absolute; top: 20px; right: 26px; font: 30px var(--f-head); color: var(--yellow); background: var(--panel); border: 3px solid var(--ink); border-radius: 99px; padding: 4px 18px; }
.tabs { display: flex; gap: 8px; align-items: center; }
.tabs span { font: 22px var(--f-head); padding: 6px 16px; border-radius: 99px; background: #fff2; cursor: pointer; transform: skewX(-8deg); }
.tabs span.on { background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.tabs small { opacity: 0.7; font-weight: 800; }
.shop-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: min(1100px, 96vw); max-height: 62vh; overflow-y: auto; padding: 6px; }
.scr-shop .shop-grid { margin-left: 34vw; width: 60vw; justify-content: flex-start; }
.si { width: 200px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 18px; transform: none; padding: 10px; }
.si.focus, .si:hover { transform: scale(1.04); }
.si.locked { background: linear-gradient(180deg, #3a2a5a, #1a1030); }
.si-img { width: 90px; height: 90px; object-fit: contain; border-radius: 12px; background: #fff1; }
.si-name { font-size: 18px; } .si-desc { font: 13px var(--f-body); font-weight: 800; opacity: 0.85; }
.si-price { font: 16px var(--f-head); color: var(--yellow); }
.si-swatch { width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--ink); }
.si-ball { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: inset -8px -8px 0 rgba(0,0,0,0.2); }
.si-court { width: 170px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: linear-gradient(135deg, #3a74c4, #2fd36b); }
.si-note { width: 100%; text-align: center; font-weight: 800; opacity: 0.8; }
.oc-row { width: 100%; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.oc { min-width: 0; padding: 2px; width: 56px; height: 56px; transform: none; } .oc img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
.oc.sel { outline: 3px solid var(--yellow); }
.shop-flash { font: 28px var(--f-head); color: var(--yellow); opacity: 0; } .shop-flash.go { animation: sflash 1.4s; } @keyframes sflash { 10%, 70% { opacity: 1; } }
.kg.lockd .kthumb { filter: grayscale(0.8) brightness(0.6); }
.klock { font: 15px var(--f-head); color: var(--yellow); }
.klock-msg { color: #ff8a8a; font-weight: 800; }
.res-coins { font: 34px var(--f-head); color: var(--yellow); text-shadow: 0 3px 0 var(--ink); }
.fs-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 16px var(--f-head); background: rgba(10,5,25,0.6); transform: skewX(10deg); color: var(--yellow); }
.fs-plock { position: absolute; right: -4px; bottom: -4px; font-size: 14px; }
.fs-tile.locked .fs-img { filter: grayscale(1) brightness(0.5); }
.banner.low { top: auto; bottom: calc(9vh + 40px); }