:root { --bg: #0b0f14; --card: #161c24; --line: #2a3340; --go: #18b35a; --bad: #d8323a; --txt: #f2f4f7; --dim: #8b96a5; --gold: #ffd400; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--txt); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#menu, #newfr, #hub, #draft { background: linear-gradient(180deg, rgba(8,12,18,.94), rgba(8,12,18,.98)); }
.btn { font: 700 16px var(--cond); font-stretch: condensed; letter-spacing: 1px; color: #fff; background: #2a3442; border: 0; border-bottom: 3px solid #141a22; border-radius: 8px; padding: 12px 16px; cursor: pointer; }
.btn.go { background: var(--go); border-bottom-color: #0d6e36; }
.btn.bad { background: var(--bad); border-bottom-color: #7c1419; }
.btn.small { padding: 7px 10px; font-size: 12px; }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.title { margin-top: 14vh; text-align: center; }
.logo { font: italic 900 clamp(44px, 13vw, 92px)/0.9 system-ui, sans-serif; letter-spacing: -2px; color: #fff; text-shadow: 0 4px 0 #18b35a, 0 8px 0 #0d6e36; }
.sub { margin-top: 18px; color: var(--gold); font-weight: 900; letter-spacing: 4px; }
.menubtns { display: flex; flex-direction: column; gap: 12px; width: min(340px, 86vw); margin: 8vh auto 0; }
.menubtns .btn { padding: 16px; font-size: 17px; }
.offline { text-align: center; margin-top: auto; padding: 16px; color: var(--dim); font-size: 13px; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #000; }
.tabs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; flex-shrink: 0; }
.tab { font: 800 12px system-ui; color: var(--dim); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; }
.tab small { font-weight: 500; font-size: 10px; }
.tab.on { color: #fff; background: #1f6fd8; border-color: #1f6fd8; }
.list { flex: 1; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.conf h3, .card h3 { margin: 10px 4px 6px; font-size: 13px; letter-spacing: 1px; color: var(--gold); }
.trow { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.trow.me { background: rgba(31, 111, 216, .25); }
.tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn small, .nm small { display: block; color: var(--dim); font-size: 11px; }
.badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid; font-weight: 900; font-style: italic; flex-shrink: 0; }
.st { color: var(--gold); font-size: 11px; } .dim { color: var(--dim); } .st .dim { color: #444; }
.ov { font-weight: 900; width: 36px; text-align: right; }
.hubhead { display: flex; align-items: center; gap: 12px; padding: 12px; }
.hubhead small { display: block; color: #dde; font-size: 12px; margin-top: 2px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.card.big h2 { margin: 4px 0; }
.matchup { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 14px 0 8px; }
.vs { text-align: center; font: italic 900 26px system-ui; } .vs small { display: block; font-size: 11px; color: var(--dim); font-style: normal; }
.center { text-align: center; }
.btnrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.win { color: #3ddc84; font-weight: 900; } .loss { color: #ff6b6b; font-weight: 900; }
.wk { width: 38px; color: var(--dim); font-weight: 800; font-size: 12px; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { font: 800 11px system-ui; color: var(--dim); background: #0f141b; border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; }
.chip.on { color: #000; background: var(--gold); }
.prow { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.prow .num { width: 34px; color: var(--dim); font-size: 12px; } .prow .pos { width: 30px; font-weight: 900; font-size: 12px; color: #7fb6ff; }
.prow .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prow .ovr, .ovr { font-weight: 900; font-size: 18px; color: #fff; width: 32px; text-align: right; }
.stars { color: var(--gold); font-size: 11px; }
.dev { font-size: 9px; font-weight: 900; padding: 2px 5px; border-radius: 4px; background: #333; }
.dev.d1 { background: #2d6a3f; } .dev.d2 { background: #8a6a00; } .dev.d3 { background: #7a1fa2; }
.tag { font-size: 9px; font-weight: 900; background: #1f6fd8; padding: 2px 5px; border-radius: 4px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 14px; }
.mbox { background: rgba(12,16,22,.97); border: 1px solid #2d3a4a; border-top: 3px solid var(--gold); border-radius: 6px; padding: 16px; width: min(520px, 100%); max-height: 88vh; overflow-y: auto; touch-action: pan-y; }
.mbox h2 { margin: 0 0 8px; font: 700 26px var(--cond); font-stretch: condensed; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.mbox label { display: block; margin: 8px 0; font-size: 12px; color: var(--dim); }
.mbox input, .mbox select, .card select { display: block; width: 100%; font-size: 16px; padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: #0b0f14; color: #fff; margin-top: 3px; }
.mbox input[type=color] { height: 40px; padding: 2px; }
.row { display: flex; gap: 8px; } .row label { flex: 1; }
.mbtns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.scroll { max-height: 30vh; overflow-y: auto; font-size: 13px; } .scroll p { margin: 3px 0; }
.pc-top { display: flex; gap: 12px; align-items: center; }
.pc-face { width: 56px; height: 56px; border-radius: 50%; border: 4px solid #ccc; flex-shrink: 0; }
.attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 12px; margin-top: 10px; }
.attrs div { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px solid #222; padding: 2px 0; }
.attrs b.hi { color: #3ddc84; } .attrs b.mid { color: var(--gold); }
.stl { font-size: 12px; color: var(--dim); }
.loading { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; font: 900 20px system-ui; z-index: 60; }
.dhead { padding: 8px 12px; font-size: 13px; background: #000; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pickb { margin-left: 6px; }

/* ---------------- HUD: broadcast style (condensed sports type, dark glass, small corners) */
:root { --cond: "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; --glass: rgba(10, 14, 20, .86); --glass2: rgba(22, 29, 39, .92); --edge: rgba(255, 255, 255, .09); }
#hud { pointer-events: none; font-family: var(--cond); font-stretch: condensed; }
#hud button, #hud .joy, #hud .playcall, #labels .bub { pointer-events: auto; }
#hud button { font-family: var(--cond); font-stretch: condensed; cursor: pointer; }
.kb { display: none; } .touch { display: inline; }
@media (hover: hover) and (pointer: fine) { .kb { display: inline; } .touch { display: none; } }

/* scorebug */
.bug { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: stretch; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.bug-row { display: flex; align-items: stretch; height: 40px; background: var(--glass); border: 1px solid var(--edge); border-radius: 5px; overflow: hidden; }
.bt { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; min-width: 128px; border-right: 1px solid var(--edge); }
.bt-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.bt-logo { width: 28px; height: 28px; object-fit: contain; }
.bt-ab { font-weight: 700; font-size: 19px; letter-spacing: .5px; color: #fff; }
.bt-pos { width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-left: 1px; }
.bt.has .bt-pos { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.bt-sc { margin-left: auto; padding-left: 10px; font-weight: 700; font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.bug-clock { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 18px; font-weight: 600; color: #dfe6ee; border-right: 1px solid var(--edge); font-variant-numeric: tabular-nums; }
.bug-clock #bug-t { color: #fff; font-weight: 700; font-size: 20px; }
.bug-down { display: flex; align-items: center; white-space: nowrap; padding: 0 14px; font-size: 18px; font-weight: 700; color: #fff; background: #1c7c3d; letter-spacing: .5px; }
.bug-down.d2 { background: #9a7a00; } .bug-down.d3 { background: #b9560b; } .bug-down.d4 { background: #b1121b; }
.bug-sub { align-self: center; margin-top: 4px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; color: #e8edf3; background: rgba(10,14,20,.7); border-radius: 3px; }
.result { position: absolute; top: 36%; left: 0; right: 0; display: flex; justify-content: center; animation: res 1.7s ease-out forwards; }
.result span { font-weight: 700; font-size: clamp(26px, 5.2vw, 46px); letter-spacing: 3px; color: #fff; padding: 8px 34px; background: linear-gradient(90deg, transparent, rgba(8,11,16,.9) 14%, rgba(8,11,16,.9) 86%, transparent); border-top: 2px solid rgba(255,255,255,.75); border-bottom: 2px solid rgba(255,255,255,.75); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.result.good span { border-color: #2fd06b; } .result.bad span { border-color: #ff3b3b; }
@keyframes res { 0% { opacity: 0; transform: scaleX(.6); } 12% { opacity: 1; transform: scaleX(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes slidein { from { opacity: 0; transform: translate(-50%, -8px); } }
.toast { position: absolute; top: calc(120px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; animation: res 1.5s forwards; }
.toast span { font-weight: 700; font-size: 22px; letter-spacing: 2px; color: #0b0f14; background: var(--gold); padding: 5px 16px; border-radius: 3px; }
.pop { position: absolute; transform: translate(-50%, -100%); font-weight: 700; font-size: 15px; letter-spacing: .5px; color: #fff; background: rgba(8,11,16,.78); padding: 2px 8px; border-radius: 3px; animation: pp 1s forwards; white-space: nowrap; }
@keyframes pp { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } to { margin-top: -26px; opacity: 0; } }

/* playbook */
.playcall { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(9,13,19,.94), rgba(6,9,13,.98)); border-top: 1px solid var(--edge); padding: 0 10px calc(10px + env(safe-area-inset-bottom)); max-height: 64vh; overflow-y: auto; touch-action: pan-y; }
.pb-head { display: flex; align-items: baseline; gap: 14px; padding: 10px 4px 6px; }
.pb-title { font-weight: 700; font-size: 22px; letter-spacing: 3px; color: #fff; }
.pb-sit { font-size: 15px; color: #aab6c4; letter-spacing: .5px; } .pb-sit b { color: var(--gold); }
.pb-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; overflow-x: auto; background: rgba(6,9,13,.98); border-bottom: 2px solid #233042; margin: 0 -10px; padding: 0 10px; }
.pb-tab { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding: 10px 14px 9px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; color: #8d9aab; font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.pb-tab small { font-size: 12px; color: #5d6a7a; font-weight: 600; }
.pb-tab.on { color: #fff; border-bottom-color: var(--gold); }
}
@media (max-width: 520px) {
  .bug { top: calc(6px + env(safe-area-inset-top)); } .bt { min-width: 0; gap: 4px; padding: 0 6px 0 9px; } .bt-logo { width: 20px; height: 20px; } .bt-ab { font-size: 15px; } .bt-sc { font-size: 20px; padding-left: 6px; }
  .bug-clock { gap: 5px; font-size: 13px; padding: 0 7px; } .bug-clock #bug-t { font-size: 15px; } .bug-down { font-size: 14px; padding: 0 8px; white-space: nowrap; }
  .pausebtn { top: calc(52px + env(safe-area-inset-top)); width: 38px; height: 38px; }
  .throwbar .hint { display: none; } .bug-sub { font-size: 11px; }
}
.logo { flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* player browser, careers, editor, scouting, replay */
.search { width: 100%; font-size: 16px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: #0b0f14; color: #fff; margin-bottom: 8px; }
.tag.gone { background: #555; }

/* ================= Poly Premier additions ================= */
.logo { text-shadow: 0 4px 0 #6a1fd1, 0 8px 0 #3a0e7a; }
.sub { color: #00ff87; }
.btn.go { background: #00b86b; border-bottom-color: #006b3e; }
.tab.on { background: #6a1fd1; border-color: #6a1fd1; }
.crest { object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.scrollx { overflow-x: auto; }
/* gallery */
#gallery { background: #0d1622; }
.gal-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gal-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0,0,0,.55); font-family: var(--cond); letter-spacing: 1px; }
.gal-top b { font-size: 18px; } .gal-count { margin-left: auto; font-size: 13px; }
.gal-cats { position: relative; background: rgba(0,0,0,.35); }
.gal-list { position: absolute; left: 8px; top: 108px; bottom: 74px; width: min(250px, 42vw); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; touch-action: pan-y; }
.gal-it { text-align: left; background: rgba(12,18,26,.78); border: 1px solid #253244; color: #dfe6ee; border-radius: 5px; padding: 8px 10px; font: 600 13px system-ui; cursor: pointer; }
.gal-it.on { background: #6a1fd1; border-color: #8a4dff; color: #fff; }
.gal-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(0,0,0,.75) 30%); font-family: var(--cond); }
.gal-name b { display: block; font-size: 22px; letter-spacing: 1px; } .gal-name small { color: #9fb0c3; font-size: 12px; letter-spacing: .5px; }
.gal-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.gal-btns button { background: #121924; border: 1px solid #2a3a50; color: #dfe6ee; border-radius: 4px; padding: 8px 10px; font: 700 12px var(--cond); letter-spacing: 1px; cursor: pointer; }
.gal-btns button.on { background: #e9edf2; color: #0b0f14; }
/* hub */
#gallery, #hud { background: transparent; }
#gallery { background: #0d1622; }
.kitdot { width: 14px; height: 30px; border-radius: 3px; border: 3px solid; flex-shrink: 0; }
.ov.o-elite, .ovr.o-elite { color: #00ff87; } .ov.o-good, .ovr.o-good { color: #7fd3ff; } .ov.o-ok, .ovr.o-ok { color: #fff; } .ov.o-low, .ovr.o-low { color: #b8c2cf; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv span { color: var(--dim); } .kv b { display: flex; align-items: center; gap: 6px; text-align: right; }
.hubhead b { font-size: 20px; }
.hubhead .win { font-weight: 800; }
.news { margin: 6px 2px; font-size: 13px; color: #dfe6ee; border-left: 3px solid #6a1fd1; padding-left: 8px; }
.tbl { font-size: 13px; }
.thead, .trow2 { display: grid; grid-template-columns: 26px 1fr repeat(5, 30px) 38px; align-items: center; gap: 2px; padding: 6px 4px; }
.thead { color: var(--dim); font-size: 11px; font-weight: 800; border-bottom: 1px solid var(--line); }
.trow2 { border-bottom: 1px solid #1d2530; border-left: 3px solid transparent; }
.trow2 span, .thead span { text-align: center; } .trow2 .tn, .thead .tn { text-align: left; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.trow2 .tpts { font-weight: 900; color: #fff; }
.trow2.me { background: rgba(106, 31, 209, .3); }
.z-ucl { border-left-color: #2f7bff !important; } .z-uel { border-left-color: #ff7a00 !important; } .z-uecl { border-left-color: #00c2b8 !important; } .z-rel { border-left-color: #d8323a !important; }
.legend { font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .legend i { display: inline-block; width: 10px; height: 10px; border-left: 10px solid; margin-right: -6px; }
.rrow { gap: 6px; font-size: 13px; } .rrow .tn { flex: 1; } .rrow .tn.r { text-align: right; } .rrow .score { min-width: 54px; text-align: center; font-size: 15px; } .rrow .res { width: 16px; text-align: center; }
.scorers { font-size: 11px; color: var(--dim); padding: 0 8px 6px 46px; }
.sqh { display: flex; gap: 8px; padding: 4px; font-size: 10px; font-weight: 800; color: var(--dim); border-bottom: 1px solid var(--line); }
.sqh .nm { flex: 1; } .sqs { width: 30px; text-align: center; font-size: 12px; color: #c9d2de; flex-shrink: 0; }
.prow .pos { width: 32px; text-align: center; border-radius: 3px; font-size: 11px; padding: 2px 0; flex-shrink: 0; color: #fff; }
.pos.gk { background: #b48600; } .pos.def { background: #1f6fd8; } .pos.mid { background: #1c9a4d; } .pos.fwd { background: #c8323a; }
.prow.sel { background: rgba(255, 212, 0, .18); }
.tag.inj { background: #c8323a; } .tag.ban { background: #7a1219; } .tag.acad { background: #6a1fd1; }
.fee { width: 64px; text-align: right; font-weight: 800; font-size: 13px; } .fa { width: 22px; font-size: 10px; font-weight: 900; color: var(--dim); }
.pc-top { margin-bottom: 4px; } .pc-ovr { font: 900 40px/1 system-ui; width: 70px; text-align: center; } .pc-ovr small { display: block; font-size: 11px; color: var(--dim); } .pc-meta { font-size: 13px; color: #dfe6ee; line-height: 1.5; }
.mbox h2 small { font-size: 14px; } .mbox.wide { width: min(640px, 100%); }
.minipitch { position: relative; height: min(70vh, 520px); margin: 8px 0 12px; border-radius: 8px; background: repeating-linear-gradient(180deg, #2f8a34 0 10%, #38993c 10% 20%); border: 2px solid rgba(255,255,255,.6); overflow: hidden; }
.minipitch::before { content: ''; position: absolute; left: 25%; right: 25%; bottom: 0; height: 16%; border: 2px solid rgba(255,255,255,.6); border-bottom: 0; }
.minipitch::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 2px solid rgba(255,255,255,.6); }
.mp-dot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: rgba(8,12,18,.82); border: 2px solid #fff; color: #fff; border-radius: 8px; padding: 3px 6px; min-width: 64px; cursor: pointer; font: 700 11px system-ui; }
.mp-dot .mp-pos { font-size: 9px; color: var(--gold); } .mp-dot small { color: #00ff87; font-size: 10px; }
.mp-dot.sel { background: var(--gold); color: #000; } .mp-dot.sel .mp-pos, .mp-dot.sel small { color: #000; }
/* match HUD */
.bug { left: calc(62px + env(safe-area-inset-left)); transform: none; }
.bt { min-width: 104px; }
.bug-clock { border-right: 0; } .bug-add { background: #00b86b; color: #04130b; font-weight: 800; padding: 1px 6px; border-radius: 3px; font-size: 14px; }
.bt.has .bt-ab::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-left: 5px; vertical-align: middle; box-shadow: 0 0 6px var(--gold); }
.banner.warn { border-left-color: #ffd400; }
#labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.plabel { position: absolute; left: 0; top: 0; font: 700 13px var(--cond); letter-spacing: 1px; color: #fff; background: rgba(8,11,16,.72); padding: 1px 7px; border-radius: 3px; white-space: nowrap; border-bottom: 2px solid #7fd3ff; }
.plabel.mine { border-bottom-color: #ffe14d; }
.goalgfx { position: absolute; left: 0; right: 0; top: 30%; display: flex; justify-content: center; pointer-events: none; }
.gg-in { display: flex; align-items: center; gap: 18px; padding: 12px 34px 12px 22px; background: linear-gradient(90deg, transparent, rgba(8,11,16,.92) 12%, rgba(8,11,16,.92) 88%, transparent); border-top: 3px solid var(--c); border-bottom: 3px solid var(--c); animation: res 3.8s ease-out forwards; }
.gg-in img { width: 72px; height: 72px; object-fit: contain; }
.gg-in b { display: block; font-size: clamp(38px, 8vw, 66px); letter-spacing: 4px; color: #fff; line-height: 1; font-style: italic; }
.gg-in span { display: block; font-size: 20px; letter-spacing: 2px; color: #fff; } .gg-in small { display: block; color: #b8c2cf; font-size: 14px; letter-spacing: 1px; } .gg-in em { display: block; font-style: normal; color: var(--gold); font-size: 16px; letter-spacing: 2px; margin-top: 2px; }
.power { position: absolute; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); width: 220px; height: 12px; transform: translateX(-50%); background: rgba(8,11,16,.8); border: 1px solid rgba(255,255,255,.4); border-radius: 6px; overflow: hidden; }
.power i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #00ff87, #ffd400 70%, #ff3b30); }
.joy { position: absolute; left: 40px; bottom: 40px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(0,0,0,.18); opacity: .5; pointer-events: none !important; }
.joy.on { opacity: 1; } .knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.55); }
.joy:not(.on) { left: calc(30px + env(safe-area-inset-left)) !important; top: auto !important; bottom: calc(30px + env(safe-area-inset-bottom)); }
.pad { position: absolute; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, auto); grid-template-areas: "a b c" "d e f"; gap: 8px; align-items: end; }
.pb { border: 1px solid rgba(255,255,255,.25); background: rgba(10,14,20,.72); color: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; user-select: none; }
.pb b { font-size: 12px; letter-spacing: 1px; } .pb small { font-size: 9px; color: #9fb0c3; }
.pb.sm { width: 64px; height: 64px; } .pb.sm b { font-size: 10px; }
.pb.big { width: 86px; height: 86px; background: rgba(0,140,80,.78); } .pb.big b { font-size: 15px; }
.pb.big.red { background: rgba(200,40,50,.8); }
.pb.dn { transform: scale(.92); filter: brightness(1.3); }
.pad [data-b=through] { grid-area: a; } .pad [data-b=lob] { grid-area: b; } .pad [data-b=skill] { grid-area: c; }
.pad [data-b=sprint] { grid-area: d; } .pad [data-b=pass] { grid-area: e; } .pad [data-b=shoot] { grid-area: f; }
@media (hover: hover) and (pointer: fine) { .pad { opacity: .55; } .pad .pb.sm { width: 56px; height: 56px; } .pad .pb.big { width: 72px; height: 72px; } }
.keyshelp { position: absolute; left: 12px; bottom: 10px; font-size: 12px; letter-spacing: .5px; color: rgba(255,255,255,.7); background: rgba(8,11,16,.55); padding: 4px 8px; border-radius: 3px; }
.watchctl { position: absolute; right: calc(12px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 6px; }
.watchctl button { background: rgba(10,14,20,.82); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 9px 12px; font: 700 14px var(--cond); letter-spacing: 1px; }
.watchctl button.on { background: #e9edf2; color: #0b0f14; }
.replaybar.x { bottom: calc(110px + env(safe-area-inset-bottom)); }
.ftscore { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 6px 0; } .ftscore b { font: 900 46px system-ui; letter-spacing: 2px; }
.ftscorers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; color: #c9d2de; margin-bottom: 8px; } .ftscorers div:last-child { text-align: right; }
.strow { display: grid; grid-template-columns: 60px 1fr 60px; text-align: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .strow span { color: var(--dim); }
@media (max-width: 520px) { .bug { left: calc(56px + env(safe-area-inset-left)); } .bt { min-width: 0; } .pb.big { width: 74px; height: 74px; } .pb.sm { width: 54px; height: 54px; } .gg-in img { width: 48px; height: 48px; } }
.pausebtn { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); width: 42px; height: 42px; border-radius: 6px; border: 1px solid var(--edge); background: var(--glass); display: flex; gap: 5px; align-items: center; justify-content: center; }
.pausebtn i { display: block; width: 5px; height: 16px; background: #fff; border-radius: 1px; }
.replaybar { position: absolute; font-family: var(--cond); left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.rp-tag { font: 900 18px ui-monospace, monospace; color: #ff3b30; text-shadow: 1px 1px 0 #000; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
#rp-skip { background: #000; color: #fff; border: 2px solid #fff; border-radius: 8px; padding: 12px 18px; font: 900 15px system-ui; }
.replaybar { bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
.banner { position: absolute; top: calc(78px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--glass); border: 1px solid var(--edge); border-left: 6px solid #fff; color: #fff; font-weight: 700; font-size: 20px; letter-spacing: 1.5px; padding: 8px 18px; border-radius: 4px; white-space: nowrap; animation: slidein .25s ease-out; }
.banner.good { border-left-color: #2fd06b; } .banner.bad { border-left-color: #ff3b3b; } .banner.info { border-left-color: var(--gold); }
.toast { top: calc(64px + env(safe-area-inset-top)); }
/* the draft */
#draft { background: linear-gradient(180deg, rgba(8,12,18,.96), rgba(8,12,18,.99)); }
.dtop { justify-content: space-between; font-family: var(--cond); letter-spacing: 1px; } .dtop b { font-size: 18px; }
.dclock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--line); font-family: var(--cond); }
.dclock b { display: block; font-size: 22px; letter-spacing: 1px; } .dclock small { display: block; color: var(--dim); font-size: 12px; letter-spacing: 1px; }
.dclock.mine { background: linear-gradient(90deg, rgba(106,31,209,.45), transparent); } .dclock.mine small:first-child { color: #00ff87; }
.dclock .btnrow { margin: 0 0 0 auto; }
.dticker { display: flex; gap: 14px; overflow-x: auto; padding: 8px 12px; font-size: 12px; color: #c9d2de; white-space: nowrap; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.dticker span { display: inline-flex; align-items: center; gap: 4px; }
.dpos { padding: 8px 12px 0; margin: 0; }
.dlist .prow .btn { margin-left: 6px; }