: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); } }

/* 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; }
/* ============================================================ Capy Hoops */
:root { --orange: #ff7a1f; --court: #e8752a; }
.logo-pb { background: linear-gradient(180deg, #fff, #ffb36b) !important; -webkit-background-clip: text !important; }
.logo-fever { font-size: 40px !important; letter-spacing: 4px !important; }
.mm-roster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 14px; }
.mm-roster img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 10px; background: #fff2; border: 2px solid var(--ink); }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; font-family: var(--f-head); }
.sb { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) skewX(-8deg); display: flex; align-items: stretch; filter: drop-shadow(0 5px 0 var(--ink)); }
.sb-team { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 20px; color: #fff; -webkit-text-stroke: 1px var(--ink); min-width: 150px; justify-content: center; border: 3px solid var(--ink); }
.sb-team.l { border-radius: 12px 0 0 12px; } .sb-team.r { border-radius: 0 12px 12px 0; }
.sb-score { background: #120a24; color: #fff; font-size: 34px; min-width: 64px; text-align: center; padding: 0 8px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); line-height: 46px; }
.sb-score.pop { animation: pop 0.5s; }
@keyframes pop { 30% { transform: scale(1.5); color: var(--yellow); } }
.sb-mid { background: #2a1a4a; border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px; min-width: 110px; }
.sb-per { font-size: 12px; color: var(--yellow); letter-spacing: 2px; } .sb-clock { font-size: 22px; color: #fff; line-height: 1; } .sb-shot { font-size: 14px; color: #8fe6ff; }
.sb-shot.low { color: #ff4a4a; animation: blink 0.5s infinite; }
.sb-fire { font-size: 22px; animation: blink 0.6s infinite; }
.poss { position: absolute; top: 66px; left: 50%; width: 0; height: 0; border: 9px solid transparent; transition: transform 0.2s; }
.poss.l { transform: translateX(-130px); border-top-color: var(--yellow); } .poss.r { transform: translateX(120px); border-top-color: var(--yellow); }
.meters { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px; gap: 12px; }
.tm { width: min(260px, 26vw); transform: skewX(-10deg); }
.tm-lab { font-size: 14px; letter-spacing: 2px; color: #fff; -webkit-text-stroke: 1px var(--ink); }
.tm.r .tm-lab { text-align: right; }
.tm-bar { height: 16px; background: #0008; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.tm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff2fa0, #ffd23a); transition: width 0.25s; }
.tm.r .tm-bar i { margin-left: auto; }
.tm.ready .tm-bar i { background: linear-gradient(90deg, #ffd23a, #fff, #ffd23a); background-size: 200% 100%; animation: fv 0.8s linear infinite; }
.tm.ready .tm-lab::after { content: ' READY!'; color: var(--yellow); animation: blink 0.5s infinite; }
.humans { display: flex; gap: 8px; }
.hp { display: flex; align-items: center; gap: 6px; background: #120a24cc; border: 3px solid; border-radius: 12px; padding: 3px 10px 3px 6px; transform: skewX(-8deg); font-size: 15px; }
.hp img { width: 34px; height: 34px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; }
.hp .tb { width: 70px; height: 8px; background: #0008; border-radius: 4px; overflow: hidden; }
.hp .tb i { display: block; height: 100%; background: #3fe0ff; }
.hp .tb i.inf { background: linear-gradient(90deg, #ff5a1a, #ffd23a); }
.ptag { position: absolute; left: 0; top: 0; font-size: 16px; text-align: center; -webkit-text-stroke: 1px var(--ink); line-height: 0.9; }
.ptag i { display: block; font-style: normal; font-size: 12px; }
.callouts { position: absolute; top: 24%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.co { font-size: 46px; color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink), 0 0 24px #ff7a1f; transform: skewX(-10deg); animation: coin 0.35s cubic-bezier(.2,1.6,.4,1); }
.co.big { font-size: 68px; color: var(--yellow); }
.co.small { font-size: 30px; }
.co.warn { color: #ff6a6a; font-size: 40px; }
.co.fire { background: linear-gradient(0deg, #ff3a1a, #ffd23a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.co.sig { color: #8fe6ff; font-size: 44px; }
.co.out { opacity: 0; transform: skewX(-10deg) translateY(-30px); transition: all 0.4s; }
@keyframes coin { from { transform: skewX(-10deg) scale(0.2); opacity: 0; } }
.subtitle { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); background: #000a; padding: 6px 16px; border-radius: 99px; font: 800 20px var(--f-body); opacity: 0; transition: opacity 0.25s; white-space: nowrap; }
.subtitle.on { opacity: 1; }
.hint { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); background: #ffd23a; color: var(--ink); padding: 6px 18px; border-radius: 12px; font-size: 20px; border: 3px solid var(--ink); }
.sigban { position: absolute; top: 40%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(90deg, transparent, var(--c) 30%, var(--c) 70%, transparent); padding: 10px; }
.sigban img { height: 110px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.sigban small { display: block; font-size: 18px; letter-spacing: 4px; color: #fff; }
.sigban b { font-size: 56px; color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink); }
.sigban.go { animation: sigin 1.9s ease forwards; }
@keyframes sigin { 0% { transform: translateX(-100%); } 15% { transform: none; } 80% { transform: none; opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.shotmeter { position: absolute; left: 0; top: 0; width: 16px; height: 110px; background: #000a; border: 3px solid var(--ink); border-radius: 8px; overflow: visible; }
.sm-zone { position: absolute; left: 0; right: 0; background: #2fd36b; }
.sm-fill { position: absolute; left: 2px; right: 2px; bottom: 0; background: #fff; border-radius: 4px; opacity: 0.85; }
.smr { position: absolute; left: 22px; top: 30%; font-size: 24px; white-space: nowrap; -webkit-text-stroke: 1px var(--ink); animation: coin 0.3s; }
.smr.perfect { color: #2fd36b; } .smr.good { color: #fff; } .smr.early, .smr.late { color: #ff8a5a; }
.trickpts { position: absolute; transform: translate(-50%, -100%); font-size: 20px; color: var(--yellow); -webkit-text-stroke: 1px var(--ink); white-space: nowrap; animation: rise 1.3s forwards; }
@keyframes rise { to { transform: translate(-50%, -260%); opacity: 0; } }

/* setup screens */
.teamrow { display: flex; gap: 14px; align-items: center; }
.tcard { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 50%, #000)); border: 3px solid var(--ink); border-bottom: 8px solid var(--b); border-radius: 14px; padding: 8px 14px; min-width: 250px; transform: skewX(-6deg); }
.tc-h { font: 13px var(--f-head); letter-spacing: 2px; color: var(--b); } .tc-n { font: 28px var(--f-head); color: #fff; -webkit-text-stroke: 1px var(--ink); }
.tc-p { display: flex; gap: 3px; margin-top: 4px; } .tc-p img { width: 44px; height: 44px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; background: #0003; }
.tc-vs { font: 40px var(--f-head); color: var(--yellow); }
.teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; width: min(1000px, 96vw); }
.btn.tpick { padding: 4px; background: none; border: none; box-shadow: none; }
.btn.tpick.focus .tcard, .btn.tpick:hover .tcard { outline: 4px solid var(--yellow); }
.kthumb.none { background: linear-gradient(135deg, #ff7a1f, #3a1a6a); }
.ktag { font: 12px var(--f-head); background: #fff3; padding: 1px 8px; border-radius: 99px; }
.fs-stat i { display: block; width: 110px; height: 9px; background: #fff2; border: 1px solid var(--ink); transform: skewX(-20deg); }
.fs-stat i b { display: block; height: 100%; background: var(--c); border: none; }
.fs-stat em { font-style: normal; width: 16px; font-size: 12px; background: none; border: none; height: auto; transform: none; }
.fs-stat span { width: 56px; font-size: 12px; }
.fs-sig { margin-top: 6px; color: var(--yellow); font-size: 13px; } .fs-sig span { color: #fff; font-weight: 700; }
.fs-blurb { top: 230px !important; }

/* results, league, tour */
.res { display: flex; gap: 20px; }
.r-team { font: 24px var(--f-head); background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 20px; display: flex; gap: 16px; align-items: center; transform: skewX(-6deg); }
.r-team b { font-size: 42px; } .r-team.win { border-color: var(--yellow); box-shadow: 0 0 20px var(--yellow); }
.mvp { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 3px solid var(--yellow); border-radius: 16px; padding: 8px 18px; transform: skewX(-6deg); }
.mvp img { height: 80px; } .mvp small { display: block; color: var(--yellow); font: 14px var(--f-head); letter-spacing: 3px; } .mvp b { font: 30px var(--f-head); display: block; } .mvp span { font-weight: 800; }
.boxes { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
table.box { border-collapse: collapse; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; font-weight: 800; font-size: 14px; }
table.box th { font: 13px var(--f-head); color: var(--yellow); padding: 4px 8px; text-align: center; }
table.box th:first-child { text-align: left; }
table.box td { padding: 2px 8px; text-align: center; } table.box td:first-child { text-align: left; display: flex; align-items: center; gap: 6px; }
table.box td img { width: 24px; height: 24px; object-fit: cover; object-position: 50% 20%; border-radius: 6px; }
table.box tr.me { background: #ffd23a33; } table.box td i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.lg-next { display: flex; flex-direction: column; gap: 10px; align-items: center; min-width: 300px; }
.lg-l { font: 18px var(--f-head); color: var(--yellow); letter-spacing: 2px; } .lg-vs { font: 30px var(--f-head); }
.lg-log { font-weight: 800; opacity: 0.85; }
.champ { font: 44px var(--f-head); color: var(--yellow); text-align: center; text-shadow: 0 4px 0 var(--ink); }
.champ small { font-size: 20px; color: #fff; }
.tour { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stop { position: relative; width: 170px; background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; padding: 8px; text-align: center; transform: skewX(-6deg); opacity: 0.6; }
.stop.now { opacity: 1; border-color: var(--yellow); box-shadow: 0 0 18px var(--yellow); } .stop.done { opacity: 0.85; }
.st-n { font: 30px var(--f-head); color: var(--yellow); } .st-v { font: 15px var(--f-head); text-transform: capitalize; }
.st-c img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 20%; } .st-name { font-weight: 900; }
.st-ok { position: absolute; top: 4px; right: 8px; font-size: 26px; color: #2fd36b; }
.howto { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; max-width: 1000px; }
.ht-col { background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 10px 18px; width: min(470px, 94vw); font-weight: 700; }
.ht-col h3 { font: 22px var(--f-head); margin: 6px 0; color: var(--yellow); } .ht-col p { margin: 6px 0; }
kbd { background: #fff; color: var(--ink); border-radius: 5px; padding: 0 5px; font: 800 13px var(--f-body); }
.score-now { font: 26px var(--f-head); }
.replaybars { position: absolute; inset: 0; pointer-events: none; }
.rp-top, .rp-bot { position: absolute; left: 0; right: 0; height: 9vh; background: #000; animation: rpin 0.25s ease-out; }
.rp-top { top: 0; } .rp-bot { bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
@keyframes rpin { from { height: 0; } }
.rp-tag { font-size: 26px; letter-spacing: 4px; color: #fff; } .rp-tag i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #ff3b3b; margin-right: 6px; animation: blink 0.9s infinite; }
.rp-skip { font: 800 15px var(--f-body); opacity: 0.8; }