/* ENDZONE KINGS — "Redline" theme. Matte black and graphite, hot red for action, white type, silver lines.
   Square-shouldered panels with a red rail, slanted buttons, bold white headers on a red slash.
   Cheap to draw: no blur, motion is transform/opacity only, background motion off on Chromebook. */
:root {
  --night: #09090b; --night-2: #121215; --night-3: #1b1b20;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18);
  --chalk: #f5f5f7; --steel: #9b9ca6;
  --gold: #ffb800; --gold-hi: #ffd45c; --gold-deep: #c98a00;
  --red: #7b2cff; --red-2: #5a16d6; --purple: #7b2cff; --siren: #e8231c; --silver: #c7cad3;
  --panel: linear-gradient(180deg, #141418 0%, #0c0c0f 100%);
  --cut: 0px;
}
body, html { background: #050506; }

/* ---------- backdrop: dark vignette with slow diagonal light streaks ---------- */
.screen { background:
  linear-gradient(90deg, rgba(5, 5, 6, .92) 0%, rgba(5, 5, 6, .55) 45%, rgba(5, 5, 6, .8) 100%),
  radial-gradient(90% 70% at 70% 20%, rgba(123,44,255, .12), transparent 60%); }
.screen::before { content: ''; position: fixed; inset: -20%; pointer-events: none; z-index: -1; opacity: .9;
  background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 255, 255, .025) 140px 142px, transparent 142px 300px, rgba(123,44,255, .05) 300px 306px, transparent 306px 520px);
  animation: rl-streak 26s linear infinite; }
@keyframes rl-streak { to { transform: translateX(520px); } }
.screen::after { content: ''; position: fixed; left: 0; top: 0; bottom: 0; width: 6px; pointer-events: none; z-index: 30; background: linear-gradient(180deg, var(--red), transparent 70%); }
html[data-q="potato"] .screen::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .screen::before { animation: none; } }

/* ---------- panels: matte slabs with a red rail ---------- */
.panel { background: var(--panel); border: 0; border-radius: 3px; clip-path: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 4px 0 0 var(--red), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .6); }
.panel::before { left: auto; right: 0; top: 0; width: 64px; height: 64px; background: linear-gradient(225deg, rgba(123,44,255, .5) 0 8px, transparent 8px); box-shadow: none; }
.panel::after { background: none; }
.modal { background: rgba(2, 2, 3, .82); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- headers: white slab type on a red slash ---------- */
.title { font-style: italic; color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; transform: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .6); letter-spacing: 1px; display: inline-block; align-self: center; position: relative; isolation: isolate; padding: 0 18px; }
.title::before { content: ''; position: absolute; left: 0; right: 0; bottom: 6%; height: 34%; z-index: -1; background: var(--red); transform: skewX(-16deg); }
.title::after { display: none; }
.title.sm { align-self: flex-start; }

/* ---------- buttons: slanted ---------- */
.btn { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border: 0; border-radius: 0; letter-spacing: 1px; padding: 12px 24px;
  background: #1d1d22; color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .15s, color .15s, transform .12s; }
.btn::before { display: none; }
.btn:hover { background: #fff; color: #0a0a0c; transform: translateY(-1px); box-shadow: none; }
.btn.primary { background: linear-gradient(180deg, #8a46ff, var(--red-2)); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.btn.primary::after { background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); }
.btn.primary:hover { background: #fff; color: var(--red-2); filter: none; }
.btn.danger { background: transparent; color: #ffcd4d; box-shadow: inset 0 0 0 1px rgba(123,44,255, .5); }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn:disabled, .btn:disabled:hover { background: #18181c; color: #5d5e66; transform: none; }
.btn.big { padding: 16px 34px; font-size: 26px; }

/* ---------- inputs ---------- */
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { background: #0b0b0d; border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; box-shadow: none; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, select:focus, textarea:focus { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(123,44,255, .3) !important; }
:focus-visible { outline-color: #fff; }

/* ---------- segmented controls + tabs: underline style ---------- */
.seg { gap: 0; background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.seg button { clip-path: none; border: 0; background: transparent; color: #9b9ca6; box-shadow: none; border-radius: 0; }
.seg button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.seg button.on { background: #fff; color: #0a0a0c; }
.ut-tabs { gap: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ut-tab { clip-path: none; background: transparent; border: 0; box-shadow: none; color: #8d8e98; font-style: italic; border-radius: 0; position: relative; }
.ut-tab::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 4px; background: var(--red); transform: scaleX(0); transition: transform .2s; }
.ut-tab:hover { color: #fff; background: rgba(255, 255, 255, .03); }
.ut-tab.on { color: #fff; background: linear-gradient(180deg, transparent, rgba(123,44,255, .12)); box-shadow: none; }
.ut-tab.on::after { transform: scaleX(1); }

/* ---------- main menu: big list of mode strips ---------- */
.tiles { gap: 6px; }
.tile { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); border: 0; border-radius: 0; min-height: 96px;
  background: linear-gradient(90deg, #17171b, #0e0e11); box-shadow: inset 5px 0 0 var(--accent, var(--red)), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .16s ease, background .2s, color .2s; }
.tile::before { background: var(--accent, var(--red)); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .8, .2, 1); opacity: 1; }
.tile::after { display: none; }
.tile:hover { transform: translateX(6px); }
.tile:hover::before { transform: scaleX(1); }
.tile:hover .tl-k, .tile:hover small { color: #0a0a0c; text-shadow: none; }
.tile:hover .tl-ico { color: #0a0a0c; opacity: .25; transform: none; }
.tile .tl-k { font-style: italic; color: #fff; text-shadow: none; letter-spacing: .5px; }
.tile small { color: #8d8e98; }
.tile .tl-ico { color: var(--accent, var(--red)); opacity: .22; right: 10px; top: 50%; width: 76px; height: 76px; transform: translateY(-50%); }
.tile:hover .tl-ico { transform: translateY(-50%); }
.tile.hero { background: linear-gradient(100deg, #8a46ff 0%, var(--red-2) 60%, #8f0c18 100%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3); min-height: 168px; }
.tile.hero::before { background: #fff; }
.tile.hero .tl-k { color: #fff; font-size: clamp(56px, 6vw, 80px); text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.tile.hero small { color: rgba(255, 255, 255, .85); }
.tile.hero .tl-ico { color: #fff; opacity: .25; width: 130px; height: 130px; }
.tile.hero:hover .tl-k, .tile.hero:hover small { color: var(--red-2); }
.t-ut { --accent: #ffb020; } .t-season { --accent: #ffd34d; } .t-online { --accent: #3ee7ff; } .t-franchise { --accent: #b18cff; }
.t-league { --accent: #ff7a2f; } .t-social { --accent: #4cc3ff; } .t-locker { --accent: #ff5c8a; } .t-progress { --accent: #ffe066; }
.t-creator { --accent: #39d98a; } .t-modes { --accent: #8fa2ff; } .t-rosters { --accent: #c7cad3; } .t-howto { --accent: #39d98a; } .t-settings { --accent: #9b9ca6; }

/* ---------- in-game HUD: black broadcast bar with a red down-and-distance tab ---------- */
.scorebug { clip-path: none; border-radius: 2px; padding: 0; background: #0a0a0c; box-shadow: inset 0 -3px 0 var(--red), 0 10px 30px rgba(0, 0, 0, .5); }
.scorebug > div { background: transparent; }
.sb-team .abbr { font-style: italic; }
.sb-team .pts { font-style: italic; font-size: 44px; }
.sb-mid { background: #fff !important; color: #0a0a0c; }
.sb-mid span:first-child { color: var(--red-2); font-weight: 900; }
.sb-mid span:last-child { color: #0a0a0c; }
.sb-down { font-style: italic; background: var(--red) !important; color: #fff !important; clip-path: none; }
.sb-pc { background: #1b1b20 !important; }
.banner b { background: var(--red); color: #fff; transform: skewX(-10deg); box-shadow: 10px 10px 0 rgba(0, 0, 0, .5); }
.playcall { background: rgba(10, 10, 12, .97); border-radius: 2px; box-shadow: inset 0 3px 0 var(--red), 0 -10px 40px rgba(0, 0, 0, .55); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pc-card { clip-path: none; border-radius: 2px; background: #16161a; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pc-card:hover { box-shadow: inset 0 0 0 2px #fff; }
.pc-card.on { background: #2a0a0f; box-shadow: inset 0 0 0 2px var(--red), 0 0 22px rgba(123,44,255, .35); }
.pc-card .k { background: var(--red); color: #fff; }
.pc-card b { font-style: italic; }

/* ---------- end of game ---------- */
.go-res { letter-spacing: 1px; animation: rl-slam .45s cubic-bezier(.2, 1.4, .3, 1) both; }
.go-res.win { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; filter: none; text-shadow: 6px 6px 0 var(--red); }
.go-res.loss { color: #8d8e98; filter: none; text-shadow: 6px 6px 0 #000; }
@keyframes rl-slam { from { transform: translateX(-40px) skewX(-10deg); opacity: 0; } }

/* coins stay gold whatever the theme */
.coin { background: radial-gradient(circle at 35% 30%, #fff6c9, #f6c445 45%, #c98200) !important; box-shadow: inset 0 0 0 2px rgba(120, 70, 0, .5) !important; }
.profile-chip { background: linear-gradient(180deg, #17171b, #0c0c0f) !important; border: 0 !important; box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .5) !important; border-radius: 3px !important; }
#notif-btn, .notif-btn { background: #121215 !important; border-color: rgba(255, 255, 255, .12) !important; }

/* the scoreboard steps out of the way while a panel or popup is up at the bottom (kick meter, play calls, emotes, halftime) */
.scorebug { transition: opacity .2s; }
#hud:has(#kickmeter:not(.hidden)) .scorebug, #hud:has(#playcall:not(.hidden)) .scorebug, #hud:has(#cel-pick:not(.hidden)) .scorebug,
#hud:has(#halftime:not(.hidden)) .scorebug { opacity: 0; pointer-events: none; }
/* with the scorebug hidden, the play-call header carries the situation */
.pc-sit { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* HUD overlays that only show information never eat clicks meant for the field (click-to-control, click-to-throw) */
#hud .inj-top, #hud .mom, #hud .chat:not(.open), #hud .chat-log, #hud .wind-ind { pointer-events: none; }
#hud .chat.open .chat-form { pointer-events: auto; }

/* keyboard / controller focus: clipped shapes swallow outlines, so the focused control flips to white with a red edge */
.btn:focus-visible, body.pad-mode .btn:focus, .seg button:focus-visible, body.pad-mode .seg button:focus,
.ut-tab:focus-visible, body.pad-mode .ut-tab:focus, .tab:focus-visible, body.pad-mode .tab:focus,
.pc-tab:focus-visible, body.pad-mode .pc-tab:focus { background: #fff; color: #0a0a0c; box-shadow: inset 0 0 0 3px var(--red); outline: none; text-shadow: none; }
.tile:focus-visible, body.pad-mode .tile:focus { outline: none; transform: translateX(6px); box-shadow: inset 0 0 0 3px #fff, inset 5px 0 0 var(--accent, var(--red)); }
.tile:focus-visible::before, body.pad-mode .tile:focus::before { transform: scaleX(1); }
.tile:focus-visible .tl-k, .tile:focus-visible small, body.pad-mode .tile:focus .tl-k, body.pad-mode .tile:focus small { color: #0a0a0c; text-shadow: none; }
.tile.hero:focus-visible .tl-k, .tile.hero:focus-visible small, body.pad-mode .tile.hero:focus .tl-k, body.pad-mode .tile.hero:focus small { color: var(--red-2); }
.tile.hero:focus-visible, body.pad-mode .tile.hero:focus { box-shadow: inset 0 0 0 3px var(--red-2); }

/* leftover navy and gold pieces, brought into Redline (coins and card tiers keep their own colors) */
.notif-btn, .player-count, .coins-pill, .rank-pill { background: linear-gradient(180deg, #17171b, #0c0c0f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 10px 26px rgba(0, 0, 0, .45); }
.coins-pill { color: #ffd34d; }
.comp-card { border-radius: 3px; background: linear-gradient(180deg, #17171b, #0c0c0f); border: 0; box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.comp-card b { color: #fff; }
.cel-pick > small { background: rgba(10, 10, 12, .9); border-radius: 2px; }
.cel-pick .cw-slot.sel { background: var(--red); color: #fff; border-color: #fff; box-shadow: 0 0 22px rgba(123,44,255, .55); }
.cw-slot.sel .cel-svg, .cel-pick .cw-slot.sel .cw-ic { color: #fff; }
.game-logo .crown { filter: drop-shadow(0 8px 22px rgba(123,44,255, .4)); }
.game-logo .t1 { text-shadow: 0 5px 0 var(--red-2), 0 12px 30px rgba(0, 0, 0, .6); }
.game-logo .t2 { background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, var(--red) 62%, var(--red-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 5px 0 #3a0007) drop-shadow(0 16px 30px rgba(123,44,255, .3)); }
.km-sweet { background: rgba(255, 255, 255, .6); border-left: 1px solid #fff; border-right: 1px solid #fff; }
.mb-head .live-dot { display: inline-block; vertical-align: middle; margin: -3px 6px 0 0; }
.menu-board { border-top-color: var(--red); }

/* phones: the profile card sits in the page flow instead of on top of the logo, and the bottom corner buttons don't cover the last tiles */
@media (max-width: 700px) {
  #menu { padding-top: 12px; padding-bottom: 92px; }
  #menu .profile-chip { position: relative; top: auto; left: auto; right: auto; align-self: stretch; margin: 0 12px 14px; }
}
@media (max-width: 480px) {
  #hud.touch-mode .scorebug { transform: translateX(-50%) scale(.6); }
  #hud.touch-mode .sb-team { min-width: 104px; }
}

/* error lines (failed loads) stand out from normal notes */
.note.err { color: #ffcd4d; border-left: 3px solid var(--red); padding-left: 10px; }

/* daily reward tile + card */
.tile.t-daily.ready { box-shadow: inset 0 0 0 2px var(--red-2); }
.tile.t-daily.ready .tl-k::after { content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: var(--red-2); vertical-align: middle; animation: dailyPulse 1.4s ease-in-out infinite; }
@keyframes dailyPulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tile.t-daily.ready .tl-k::after { animation: none; } }
.daily-card .daily-done { margin: 4px 0 0; font-weight: 800; font-size: 18px; }
.daily-card .note b { font-variant-numeric: tabular-nums; }

/* online / offline on profiles */
.pf-status { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 13px; font-weight: 700; color: var(--muted, #9a9aa2); }
.pf-status i { width: 9px; height: 9px; border-radius: 50%; background: #5d5d66; }
.pf-status.on { color: #3ddc84; }
.pf-status.on i { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.2); }

/* =====================================================================
   Phones + tablets. Everything here is scoped to touch play (#hud.touch-mode / body.touch)
   or coarse pointers, so the desktop layout doesn't change.
   ===================================================================== */
html, body { overscroll-behavior: none; }   /* no pull-to-refresh or rubber-band page bounce */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  button, a, input, select, label { touch-action: manipulation; }   /* no double-tap zoom delay on taps */
  .btn.sm, .seg button, .pc-tab, #pc-timeout { min-height: 44px; }
  .link#logout { min-height: 44px; padding: 8px 6px; }
  input[type=range] { min-height: 32px; }
}
/* in a game: no pinch zoom, page scroll, text selection or long-press callouts (scrolling lists inside the HUD still pan) */
body.touch #hud, body.touch #gl { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch #hud .pc-cards, body.touch #hud .pc-tabs, body.touch #hud .halftime, body.touch #hud .chat-log { touch-action: pan-x pan-y; overscroll-behavior: contain; }
body.touch #hud input { -webkit-user-select: text; user-select: text; }
body.touch .howto-touch { display: block; }
.howto-touch { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* the touch pad: buttons fill from the bottom-right corner (the thumb) outward, big action button along the bottom */
#hud.touch-mode { --tb: 76px; --tg: 10px; --cols: 2; --sb: max(22px, calc(env(safe-area-inset-bottom) + 12px)); }
#hud.touch-mode .joy { bottom: var(--sb); left: max(18px, calc(env(safe-area-inset-left) + 10px)); }
#hud.touch-mode .tbtns { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; align-content: flex-start; gap: var(--tg);
  width: calc(var(--cols) * var(--tb) + (var(--cols) - 1) * var(--tg)); bottom: var(--sb); right: max(18px, calc(env(safe-area-inset-right) + 10px)); }
#hud.touch-mode .tbtn { flex: 0 0 auto; width: var(--tb); height: var(--tb); padding: 0; line-height: 1.05; -webkit-touch-callout: none; transition: transform .06s, filter .06s; }
#hud.touch-mode .tbtn.sm { font-size: calc(var(--tb) * .19); }
#hud.touch-mode .tbtn.big { flex: 0 0 100%; height: calc(var(--tb) * .82); }
#hud.touch-mode .tbtns .tbtn.r1, #hud.touch-mode .tbtns .tbtn.r2, #hud.touch-mode .tbtns .tbtn.r3, #hud.touch-mode .tbtns .tbtn.r4, #hud.touch-mode .tbtns .tbtn.r5 { font-size: calc(var(--tb) * .46); color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
#hud.touch-mode.pc-open .tbtn.big { width: 100%; }
#hud.touch-mode .tbtn.down { transform: scale(.9); filter: brightness(1.45); box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 0 18px rgba(255,255,255,.35); }
#hud.touch-mode .tbtn.big.down { box-shadow: none; }
#hud.touch-mode .tbtn[class*=" r"].down { background-blend-mode: normal; filter: brightness(1.7) saturate(1.3); }
/* picking a play: the pad sits up top, out of the way of the cards; once the play is called it drops back to the corner */
#hud.touch-mode.pc-open .tbtns { top: calc(env(safe-area-inset-top) + 70px); bottom: auto; }
#hud.touch-mode.pc-open.pc-col .tbtns { top: auto; bottom: var(--sb); }
#hud.touch-mode .pause-btn { top: max(10px, env(safe-area-inset-top)); right: max(10px, calc(env(safe-area-inset-right) + 6px)); width: 46px; height: 46px; }
#hud.touch-mode .scorebug { top: max(8px, env(safe-area-inset-top)); }
#hud.touch-mode .mom { top: calc(env(safe-area-inset-top) + 104px); bottom: auto; font-size: 11px; }
#hud.touch-mode .mom-bar { width: 130px; }
#hud.touch-mode .hot kbd { display: none; }
#hud.touch-mode .hot button { min-height: 44px; font-size: 15px; }
.hot-done { display: block; width: 100%; margin-top: 8px; font-family: var(--display); font-weight: 900; font-size: 18px !important; text-transform: uppercase; text-align: center; background: linear-gradient(180deg, #8a46ff, var(--red-2)) !important; border: 0 !important; }
body.touch #throw-meter { bottom: auto; top: 30%; height: 22px; width: min(360px, 78vw); }
body.touch #throw-meter span { top: -24px; font-size: 14px; }

/* play call on touch: big thumb-friendly cards, the timeout lives on the pad once the play is called */
#hud.touch-mode .pc-tab { min-height: 44px; }
#hud.touch-mode .pc-cards { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#hud.touch-mode .pc-card:hover { transform: none; }
#hud.touch-mode .pc-card:active { transform: scale(.97); }
#hud.touch-mode .playcall.collapsed { left: max(10px, calc(env(safe-area-inset-left) + 6px)); bottom: var(--sb); transform: none; animation: none; width: auto;
  max-width: calc(100vw - var(--cols) * var(--tb) - var(--tg) - 60px); padding: 8px 12px 10px; }
#hud.touch-mode .playcall.collapsed .pc-head { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0; }
#hud.touch-mode .playcall.collapsed .pc-head b { font-size: 19px; white-space: normal; overflow-wrap: anywhere; }
#hud.touch-mode .playcall.collapsed .pc-head > div:first-child { flex: 1 1 auto; min-width: 0; }
#hud.touch-mode .playcall.collapsed .pc-head > .pc-right { flex: 0 0 auto; flex-direction: row; }
#hud.touch-mode .playcall.collapsed .pc-head small { font-size: 12px; }
#hud.touch-mode .playcall.collapsed #pc-book { display: none; }
#hud.touch-mode .playcall.collapsed #pc-timeout { display: none; }
#hud.touch-mode .playcall.collapsed .pc-clock { min-width: 46px; padding: 2px 6px; }
#hud.touch-mode .playcall.collapsed .pc-clock b { font-size: 24px !important; }
#hud.touch-mode .playcall.collapsed .pc-clock small { display: none; }
#hud.touch-mode .playcall.collapsed .pc-head > div:first-child::after { content: 'Tap to change play'; margin-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); }

/* portrait-ish phones */
@media (max-width: 720px) {
  #hud.touch-mode { --tb: 64px; }
  #hud.touch-mode .joy { width: 128px; height: 128px; }
}
@media (max-width: 480px) {
  #hud.touch-mode .scorebug { left: calc(50% - 24px); transform: translateX(-50%) scale(.52); }
  #hud.touch-mode .me-label { top: 50px; font-size: 16px; }
  #hud.touch-mode .stam { top: 80px; }
  #hud.touch-mode .mom { top: calc(env(safe-area-inset-top) + 92px); }
  #hud.touch-mode .chat { top: 120px; }
  #hud.touch-mode .playcall.collapsed { max-width: calc(100vw - var(--cols) * var(--tb) - var(--tg) - 38px); padding: 7px 10px 8px; }
  #hud.touch-mode .playcall.collapsed .pc-head { gap: 6px; }
  #hud.touch-mode .playcall.collapsed .pc-head b { font-size: 16px; overflow-wrap: break-word; }
  #hud.touch-mode .playcall.collapsed .pc-head > div:first-child::after { font-size: 10px; }
  /* play call: two columns of tall cards that scroll up and down */
  #hud.touch-mode .playcall:not(.collapsed) { bottom: var(--sb); padding: 10px 10px 8px; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-head { align-items: center; padding-bottom: 6px; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-head b { font-size: 24px; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-head > .pc-right { flex-direction: row; margin-left: 0; width: 100%; justify-content: space-between; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-clock { flex-direction: row; gap: 6px; padding: 4px 10px; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-clock b { font-size: 26px !important; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-cards { display: grid; grid-template-columns: 1fr 1fr; max-height: 46vh; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
  #hud.touch-mode .pc-card { min-height: 0; }
  #hud.touch-mode .pc-card svg { height: 64px; }
  #hud.touch-mode .pc-card b { font-size: 17px; }
}
/* landscape phones: short screen, so a wider, flatter pad */
@media (max-height: 500px) {
  #hud.touch-mode { --tb: 58px; --tg: 8px; }
  #hud.touch-mode .tbtns[data-n="5"], #hud.touch-mode .tbtns[data-n="6"] { --cols: 3; }
  #hud.touch-mode .tbtns[data-n="7"], #hud.touch-mode .tbtns[data-n="8"] { --cols: 4; }
  #hud.touch-mode .joy { width: 118px; height: 118px; }
  #hud.touch-mode .tbtn { font-size: 14px; }
  #hud.touch-mode .tbtn.big { font-size: 22px; }
  #hud.touch-mode.pc-open:not(.pc-col) .tbtns { top: max(10px, env(safe-area-inset-top)); right: max(66px, calc(env(safe-area-inset-right) + 62px)); width: 150px; }
  #hud.touch-mode .playcall.collapsed { max-width: 50vw; }
  #hud.touch-mode .me-label { top: 46px; font-size: 15px; }
  #hud.touch-mode .stam { top: 72px; }
  #hud.touch-mode .mom { top: 82px; }
  body.touch #throw-meter { top: 26%; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-head { padding-bottom: 4px; }
  #hud.touch-mode .playcall:not(.collapsed) #pc-book { display: none; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-head { flex-wrap: nowrap; align-items: center; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-head > .pc-right { flex-direction: row; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-clock { flex-direction: row; gap: 6px; padding: 4px 10px; }
  #hud.touch-mode .playcall:not(.collapsed) .pc-clock b { font-size: 26px !important; }
  .pause-panel { gap: 6px; }
  .pause-panel .btn { padding-top: 9px; padding-bottom: 9px; }
}

/* rotate nudge: portrait phones only, fades by itself, tap to dismiss for this session */
.rot-hint { display: none; position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); align-items: center; gap: 10px; max-width: calc(100vw - 90px); padding: 10px 14px;
  font: 700 14px/1.25 var(--body); color: #fff; text-align: left; background: rgba(10,10,12,.88); border: 1px solid rgba(255,255,255,.18); border-left: 3px solid var(--red); border-radius: 2px; }
.rot-hint i { flex: 0 0 auto; width: 14px; height: 22px; border: 2px solid #fff; border-radius: 3px; animation: rotTurn 1.6s ease-in-out infinite; }
.rot-hint b { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--steel); }
@keyframes rotTurn { 0%, 30% { transform: none; } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (max-width: 600px) { #hud.touch-mode .rot-hint.show { display: flex; } }
@media (prefers-reduced-motion: reduce) { .rot-hint i { animation: none; } }

/* two-step login */
.tf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.tf-row .tf-k { display: flex; flex-direction: column; font-weight: 700; }
.tf-row .tf-k small { font-weight: 500; opacity: .7; font-size: 12px; }
.code-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* patch notes: top left of the main menu, next to the bell */
.pn-btn { position: fixed; top: 16px; left: 72px; z-index: 6; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #121215; border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.pn-btn b { color: var(--red-2, #ffb800); font-variant-numeric: tabular-nums; }
.pn-btn:hover, .pn-btn:focus-visible { border-color: var(--red-2, #7b2cff); }
.pn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-2, #7b2cff); }
.player-count { top: 72px; left: 16px; }
.pn-card { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column; gap: 12px; }
.pn-list { overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; }
.pn-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 6px; }
.pn-head b { font-size: 18px; }
.pn-head small { margin-left: auto; opacity: .65; }
.pn-new { font-size: 11px; font-weight: 800; padding: 2px 8px; background: var(--red-2, #7b2cff); color: #fff; }
.pn-entry h4 { margin: 10px 0 4px; font-size: 13px; opacity: .8; }
.pn-entry ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 700px) { .pn-btn { top: auto; bottom: 16px; left: 72px; } .player-count { top: auto; bottom: 72px; left: 16px; } }

/* main menu corner buttons scroll away with the menu instead of floating over it (the .screen is the scroller) */
#menu .profile-chip, #menu .notif-btn, #menu .pn-btn, #menu .player-count, #menu .notif-panel { position: absolute; }
@media (max-width: 700px) { #menu .profile-chip { position: relative; } }

.lg-play-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* overall numbers flash when they change */
.ovr-pop { animation: ovrPop .5s ease-out; }
@keyframes ovrPop { 0% { color: #fff; transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ovr-pop { animation: none; } }

.tf-card { width: min(440px, 94vw); max-height: 90vh; overflow-y: auto; }
.tf-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tf-qr { width: 220px; height: 220px; aspect-ratio: 1 / 1; align-self: center; image-rendering: pixelated; background: none; padding: 0; border-radius: 0; }
.tf-secret { font-size: 12px; word-break: break-all; background: rgba(255,255,255,.08); padding: 2px 6px; user-select: all; }

.pad-other { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.pad-map { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; font-size: 14px; }
.pad-map i { font-style: normal; opacity: .7; }

.dev-card { width: min(480px, 94vw); max-height: 86vh; display: flex; flex-direction: column; gap: 10px; }
.dev-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.dev-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.dev-row.me { border-color: var(--red-2, #7b2cff); }
.dev-row div { display: flex; flex-direction: column; gap: 2px; }
.dev-row div b { display: flex; align-items: center; gap: 8px; }
.dev-row small { opacity: .7; }
.dev-meta { font-size: 13px; opacity: .9; }

/* feedback button: top left, before patch notes */
.fb-btn { position: absolute; top: 16px; left: 72px; z-index: 6; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #121215; border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.fb-btn svg { width: 18px; height: 18px; fill: var(--red-2, #ffb800); }
.fb-btn:hover, .fb-btn:focus-visible { border-color: var(--red-2, #7b2cff); }
#menu .pn-btn { left: 196px; }
.fb-card { width: min(520px, 94vw); }
.fb-card textarea { width: 100%; resize: vertical; font: inherit; }
.fb-kind button { flex: 1; }
@media (max-width: 700px) { .fb-btn { top: auto; bottom: 16px; left: 72px; } .fb-btn span { display: none; } #menu .pn-btn { left: 130px; } }
.fb-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fb-tools input { flex: 1 1 220px; }
.fb-item p { margin: 6px 0 0; white-space: pre-wrap; }
.fb-item mark { background: rgba(123,44,255,.35); color: inherit; }

/* two-step login guide (How to Play) */
.howto-2fa { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.tfa-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.tfa-guide div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.tfa-guide span { font-size: 14px; line-height: 1.45; opacity: .9; }
.tfa-list { margin: 6px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.howto-2fa h4 { margin: 12px 0 4px; }
.tf-how { align-self: flex-start; }
.tf-steps b { font-weight: 800; }

/* admin badge next to the Habir Studios admin's name */
.admin-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 900; letter-spacing: .06em; line-height: 1.5; color: #fff; background: linear-gradient(180deg, #8a46ff, #c8121f); border-radius: 3px; vertical-align: middle; white-space: nowrap; }
.admin-badge::before { content: ''; width: 8px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); }
h3 .admin-badge { font-size: 12px; padding: 2px 8px; }

/* every text box readable: white text on the dark field, visible caret and placeholder, autofill included */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { color: #f4f4f6 !important; caret-color: #ffb800; font: inherit; font-size: 16px; }
input::placeholder, textarea::placeholder { color: #8a8a96 !important; opacity: 1; }
select option { background: #0b0b0d; color: #f4f4f6; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: #f4f4f6 !important; caret-color: #ffb800;
  -webkit-box-shadow: 0 0 0 1000px #0b0b0d inset !important; box-shadow: 0 0 0 1000px #0b0b0d inset !important; transition: background-color 9999s ease-out 0s;
}
textarea { padding: 10px 12px; line-height: 1.45; }

/* profile header: every line evenly spaced (name, online status, level, records, followers) */
.pf-head { gap: 20px; padding: 20px; align-items: center; }
.pf-id { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.pf-id > * { margin: 0 !important; }
.pf-id h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; line-height: 1.05; }
.pf-id h3 .admin-badge { margin-left: 0; }
.pf-id .pf-status { line-height: 1.2; }
.pf-id > small { display: block; line-height: 1.3; font-size: 14px; }
.pf-id .pf-recs { gap: 10px; }
.pf-id .pf-follow { gap: 16px; align-items: center; flex-wrap: wrap; }
.pf-acts { gap: 8px; align-self: center; }
#pf-live { margin-top: 14px; }
.pf-stats { margin-top: 14px; }
@media (max-width: 760px) { .pf-head { gap: 14px; padding: 16px; } .pf-id { gap: 7px; } }

/* timeout countdown */
.ban-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 12px; padding: 12px; background: rgba(123,44,255,.1); border: 1px solid rgba(123,44,255,.35); }
.ban-timer small { opacity: .75; font-weight: 700; }
.ban-timer b { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* timeout countdown in a game */
.to-timer { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 26px 12px; background: rgba(10,10,12,.88); border: 1px solid rgba(123,44,255,.55); box-shadow: inset 0 3px 0 var(--red-2, #7b2cff); pointer-events: none; text-align: center; }
.to-timer small { font-weight: 900; letter-spacing: .08em; font-size: 13px; color: var(--red-2, #ffb800); }
.to-timer b { font-size: 44px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.to-timer span { font-size: 12px; opacity: .75; }
@media (max-width: 700px) { .to-timer { top: 70px; padding: 8px 18px 10px; } .to-timer b { font-size: 34px; } }

/* online pause */
.np-overlay { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(5,5,7,.72); backdrop-filter: blur(3px); text-align: center; }
.np-overlay small { font-weight: 900; letter-spacing: .1em; color: var(--red-2, #ffb800); }
.np-overlay b { font-size: 64px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.np-overlay span { opacity: .8; font-size: 14px; }
.np-overlay .btn { margin-top: 8px; min-width: 160px; }
.np-ask { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; background: #121215; border: 1px solid rgba(123,44,255,.6); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.np-ask span { font-size: 13px; opacity: .75; }
.np-ask div { display: flex; gap: 8px; }
/* always-on chat hint in online games */
.chat-hint { position: absolute; left: 14px; bottom: 14px; z-index: 6; padding: 4px 9px; background: rgba(10,10,12,.75); border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 700; opacity: .85; pointer-events: none; }
.chat-hint kbd { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 4px; background: #fff; color: #000; font-weight: 900; text-align: center; border-radius: 2px; }
#hud.touch-mode .chat-hint { display: none; }
.np-overlay .np-wait { font-size: 13px; opacity: .75; min-height: 1em; }
/* patch notes search */
.pn-search{width:100%;box-sizing:border-box;margin:10px 0 4px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:#fff;font-size:15px}
.pn-search:focus{outline:2px solid #ffd54a;outline-offset:1px}
.pn-card mark{background:#ffd54a;color:#111;border-radius:3px;padding:0 2px}
.pn-none{opacity:.75;text-align:center;padding:18px 6px}

/* ---------- mobile layout pass: nothing squished, nothing covering anything ---------- */
/* phones held upright: menu buttons sit in a row at the top instead of floating over the tiles */
@media (max-width: 700px) {
  #menu { justify-content: flex-start; padding: 12px 12px 28px; }
  #menu .notif-btn, #menu .fb-btn, #menu .pn-btn { position: absolute; top: 12px; bottom: auto; height: 44px; }
  #menu .notif-btn { left: 12px; }
  #menu .fb-btn { left: 64px; width: 44px; padding: 0; justify-content: center; }
  #menu .pn-btn { left: 116px; }
  #menu .notif-panel { position: absolute; top: 64px; bottom: auto; left: 12px; right: 12px; width: auto; }
  #menu .player-count { position: absolute; top: 20px; bottom: auto; left: auto; right: 12px; }
  #menu .profile-chip { margin-top: 56px; left: 0; right: 0; top: 0; width: 100%; box-sizing: border-box; }
  #menu .menu-wrap { gap: 14px; }
  #menu .game-logo .crown { width: 70px; }
  #menu .game-logo .t1 { font-size: clamp(48px, 15vw, 80px); }
  #menu .game-logo .t2 { font-size: clamp(62px, 19vw, 104px); }
  #menu .game-logo .by { margin-top: 8px; font-size: 13px; }
  .tiles { gap: 8px; }
  .tile { min-height: 88px; padding: 12px 12px 10px; }
  .tile .tl-k { font-size: 21px; line-height: 1.02; }
  .tile small { font-size: 12.5px; line-height: 1.3; }
  .tile .tl-ico { opacity: .35; transform: scale(.8); transform-origin: top right; }
  .tile.hero { min-height: 112px; }
  .tile.hero .tl-k { font-size: clamp(38px, 12vw, 52px); }
  .t-ut .tl-k { font-size: 26px; }
}
@media (max-width: 360px) { .tiles { grid-template-columns: 1fr; } }

/* phones on their side (short screens): smaller logo, menu starts at the top and scrolls */
@media (max-height: 500px) {
  .game-logo .crown { width: 52px; margin-bottom: -2px; }
  .game-logo .t1 { font-size: clamp(34px, 11vh, 70px); }
  .game-logo .t2 { font-size: clamp(42px, 14vh, 90px); }
  .game-logo .by { margin-top: 6px; font-size: 12px; }
  #auth .center-col { gap: 10px; }
  .screen { padding: 14px 16px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  #menu { align-items: flex-start; }
  #menu .menu-wrap { padding-top: 70px; align-items: start; grid-template-columns: .8fr 1.2fr; gap: 24px; }
  #menu .logo-slot { position: sticky; top: 70px; }
  #menu .profile-chip { top: 10px; right: 14px; }
  #menu .notif-btn, #menu .fb-btn, #menu .pn-btn { top: 12px; }
  .tile { min-height: 76px; }
  .tile.hero { min-height: 96px; }
  .tile small { display: none; }
}

/* in a game on a phone: the play call menu takes less room and the big banner stays out of its way */
@media (max-height: 500px) {
  .banner { top: 6%; }
  .banner b { font-size: 34px; padding: 4px 26px 3px; }
  .banner small { font-size: 14px; margin-top: 4px; }
  #hud.pc-open .banner { top: 3%; }
  #hud.pc-open .banner small { display: none; }
  .playcall { bottom: 6px; padding: 8px 10px 6px; }
  .pc-head { padding-bottom: 4px; gap: 8px; }
  .pc-head b { font-size: 22px; }
  .pc-head small { font-size: 12px; }
  .pc-tabs { margin-bottom: 6px; }
  .pc-tab { font-size: 15px; padding: 5px 10px; }
  .pc-card { flex-basis: 128px; padding: 6px; }
  .pc-card svg { height: 34px; margin-bottom: 4px; }
  .pc-card b { font-size: 15px; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .banner { top: 9%; }
  .banner b { font-size: 36px; padding: 4px 24px 3px; }
  .banner small { font-size: 14px; }
  #hud.pc-open .banner { top: 7%; }
  .playcall { bottom: 6px; padding: 10px 10px 6px; }
  .pc-head b { font-size: 22px; }
  .pc-tab { font-size: 15px; padding: 6px 10px; }
  .pc-card svg { height: 44px; margin-bottom: 4px; }
  .pc-card b { font-size: 15px; }
  .pc-card small { display: none; }
}
.player-count { display: flex; align-items: center; gap: 6px; }
.player-count .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fe07a; box-shadow: 0 0 8px #2fe07a; }
.player-count .pc-sep { margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.18); opacity: .8; }
.player-count.hidden { display: none; }

/* ---------- opening coin toss ---------- */
.toss-ov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.78)); }
.toss-card { width: min(420px, 100%); padding: 22px 20px 20px; text-align: center; background: linear-gradient(170deg, #1d1d21, #0f0f11); border-top: 3px solid var(--red-2, #7b2cff);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.toss-card h3 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 34px; text-transform: uppercase; letter-spacing: .5px; }
.toss-stage { height: 170px; display: grid; place-items: center; perspective: 700px; }
.toss-coin { --end: 1800deg; position: relative; width: 116px; height: 116px; transform-style: preserve-3d; transform: rotateY(0deg); }
.toss-coin.flip { animation: tossFlip 1.6s cubic-bezier(.25,.7,.3,1) forwards; }
.tc-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-family: var(--display); font-weight: 900; font-size: 54px; color: #4a2c00;
  background: radial-gradient(circle at 35% 30%, #fff3b8, #f6c445 45%, #b8860b 100%); box-shadow: inset 0 0 0 6px #d9a52a, inset 0 0 0 9px #fff0a8, 0 10px 30px rgba(0,0,0,.5); backface-visibility: hidden; }
.tc-t { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #ffe4e7, #ff6b7a 45%, #b3001b 100%); color: #3a0007; box-shadow: inset 0 0 0 6px #d81e35, inset 0 0 0 9px #ffc2c9, 0 10px 30px rgba(0,0,0,.5); }
@keyframes tossFlip { 0% { transform: translateY(0) rotateY(0) } 45% { transform: translateY(-58px) rotateY(calc(var(--end) * .55)) } 100% { transform: translateY(0) rotateY(var(--end)) } }
.toss-msg { min-height: 44px; margin: 4px 0 14px; font-size: 16px; line-height: 1.4; }
.toss-msg b { color: var(--red-2, #ffb800); }
.toss-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.toss-btns .btn { flex: 1 1 140px; }
@media (prefers-reduced-motion: reduce) { .toss-coin.flip { animation-duration: .01ms; } }

/* ---------- Ultimate Team: play hub (single player / online H2H), solo battles, theme challenges ---------- */
.utp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.utp-pick.four { grid-template-columns: 1fr 1fr; }
.utp-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 150px; padding: 18px; text-align: left; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, #24242a, #121215); border: 1px solid rgba(255,255,255,.12); border-left: 4px solid var(--red-2, #7b2cff); transition: transform .15s, border-color .15s; }
.utp-mode.utp-h2h { border-left-color: #3fa9ff; background: linear-gradient(160deg, #182333, #0e131b); }
.utp-mode:hover, .utp-mode:focus-visible { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.utp-mode b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.utp-mode span { font-size: 14px; line-height: 1.4; opacity: .82; }
.utp-mode em { margin-top: auto; font-style: normal; font-weight: 700; font-size: 13px; color: var(--red-2, #ffb800); }
.utp-mode.utp-h2h em { color: #6fc0ff; }
.utp-back { display: inline-block; margin-bottom: 6px; font-size: 14px; }
.sb-box { padding: 14px; margin: 8px 0 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.sb-top { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.sb-top small { display: block; font-size: 12px; opacity: .7; }
.sb-top b { font-family: var(--display); font-weight: 900; font-size: 26px; }
.sb-bar { height: 8px; margin: 12px 0 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red, #e0102a), var(--red-2, #7b2cff)); }
.sb-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.sb-tiers > div { padding: 8px 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); font-size: 12.5px; line-height: 1.35; }
.sb-tiers > div.on { border-color: var(--red-2, #7b2cff); background: rgba(123,44,255,.12); }
.sb-tiers b { display: block; font-size: 15px; }
.sb-tiers small { display: block; opacity: .7; }
.sb-next { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sb-next img { width: 56px; height: 56px; }
.sb-next small { display: block; font-size: 12px; opacity: .7; }
.sb-next b { display: block; font-size: 18px; }
.sb-next span { font-size: 13px; opacity: .8; }
@media (max-width: 640px) { .utp-pick, .utp-pick.four { grid-template-columns: 1fr; } .utp-mode { min-height: 0; } .utp-mode b { font-size: 24px; } }
/* bigger emote wheel when you own lots of emotes */
.cel-pick #cel-opts:has(.cw-slot:nth-child(17)) { width: 390px; height: 390px; }
@media (max-width: 480px), (max-height: 480px) { .cel-pick #cel-opts:has(.cw-slot:nth-child(17)) { transform: scale(.82); } }

/* ---------- tutorial ---------- */
.tut-coach { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 25; width: min(440px, calc(100vw - 140px)); padding: 12px 16px 10px;
  background: linear-gradient(170deg, rgba(30,30,34,.96), rgba(14,14,16,.96)); border-left: 4px solid #2fe07a; box-shadow: 0 14px 40px rgba(0,0,0,.5); pointer-events: auto; }
.tut-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #2fe07a; }
.tut-coach b { display: block; margin-top: 4px; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.tut-coach p { margin: 4px 0 8px; font-size: 14px; line-height: 1.4; }
.tut-dots { display: flex; gap: 5px; }
.tut-dots i { flex: 1; height: 4px; background: rgba(255,255,255,.14); }
.tut-dots i.done { background: #2fe07a; }
.tut-dots i.on { background: #fff; }
.tut-coach .link { margin-top: 6px; font-size: 12px; opacity: .7; }
.tut-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; background: rgba(47,224,122,.08); border: 1px solid rgba(47,224,122,.35); }
.tut-row b { display: block; font-size: 17px; }
.tut-row .note { display: block; margin: 2px 0 0; }
.tut-done { width: min(440px, 94vw); }
@media (max-height: 500px) { .tut-coach { top: 6px; padding: 8px 12px 6px; } .tut-coach b { font-size: 18px; } .tut-coach p { font-size: 12.5px; margin: 2px 0 5px; } }
@media (max-width: 600px) { .tut-coach { top: 52px; width: calc(100vw - 24px); } }

/* ---------- Online H2H screen ---------- */
.h2h-panel { padding-top: 18px; }
.h2h-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.h2h-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 14px; text-align: center; overflow: hidden;
  background: linear-gradient(160deg, rgba(123,44,255,.16), rgba(123,44,255,.02) 60%), #141417; border: 1px solid rgba(123,44,255,.35); }
.h2h-side.them { background: linear-gradient(200deg, rgba(63,169,255,.16), rgba(63,169,255,.02) 60%), #141417; border-color: rgba(63,169,255,.35); justify-content: center; }
.h2h-side > small:not(.note) { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; opacity: .75; }
.h2h-side > b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 26px; text-transform: uppercase; line-height: 1; }
.h2h-side .team-pick { margin: 0; }
.h2h-side .team-pick > small { display: none; }
.h2h-q { display: grid; place-items: center; width: 92px; height: 92px; margin: 6px 0; border-radius: 50%; font-family: var(--display); font-weight: 900; font-size: 52px; font-style: normal;
  color: #6fc0ff; border: 2px dashed rgba(63,169,255,.6); animation: h2hPulse 1.8s ease-in-out infinite; }
.h2h-q.sm { width: 56px; height: 56px; font-size: 30px; margin: 0; }
@keyframes h2hPulse { 50% { transform: scale(1.06); border-color: rgba(63,169,255,1); } }
.h2h-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-width: 150px; }
.h2h-vs > span { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 64px; line-height: 1; background: linear-gradient(180deg, #fff 30%, var(--red-2, #7b2cff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2h-rec { padding: 8px 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
.h2h-rec small { display: block; font-size: 11px; opacity: .7; }
.h2h-rec b { font-family: var(--display); font-weight: 900; font-size: 28px; }
.h2h-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 700; }
.h2h-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h2h-switch .sw { display: inline-block; position: relative; width: 42px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.18); transition: background .2s; flex: none; }
.h2h-switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.h2h-switch input:checked + .sw { background: var(--red-2, #7b2cff); }
.h2h-switch input:checked + .sw::after { transform: translateX(18px); }
.h2h-switch input:focus-visible + .sw { outline: 2px solid #fff; outline-offset: 2px; }
.h2h-switch input:disabled + .sw { opacity: .4; }
.h2h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h2h-grid > *, .h2h-hero > *, #online .center-col, #online .panel { min-width: 0; }
.h2h-side > .note { font-size: 13px; opacity: .75; max-width: 30ch; }
#online .seg { flex-wrap: wrap; }
.h2h-box { display: flex; flex-direction: column; gap: 10px; }
.h2h-box h3 { margin: 0; }
.h2h-box > .btn.big, .h2h-box .cr-btns { margin-top: auto; }
.h2h-more summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 0; opacity: .85; }
.h2h-more[open] summary { margin-bottom: 6px; }
.h2h-code-in { font-family: var(--display); font-weight: 900; font-size: 34px !important; letter-spacing: 10px; text-align: center; text-transform: uppercase; padding: 14px 10px !important; }
.h2h-lobby { margin-top: 16px; }
.h2h-wait-vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.h2h-wait-vs > span { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 42px; color: var(--red-2, #ffb800); }
.h2h-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 120px; }
.h2h-chip img { width: 56px; height: 56px; }
.h2h-chip b { font-size: 16px; }
.tut-done .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
@media (max-width: 760px) {
  .h2h-hero { grid-template-columns: 1fr; gap: 10px; }
  .h2h-vs { flex-direction: row; min-width: 0; }
  .h2h-vs > span { font-size: 40px; }
  .h2h-vs > .note { display: none; }
  .h2h-side.them { display: none; }
  .h2h-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .h2h-q { animation: none; } }

/* ---------- Playbooks screen ---------- */
.pb-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pb-top .team-pick { margin: 0; }
.pb-top .team-pick.dim { opacity: .45; pointer-events: none; }
.pb-meta { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.pb-meta b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 30px; text-transform: uppercase; line-height: 1; }
.pb-meta em { font-style: normal; font-weight: 800; color: var(--red-2, #ffb800); }
.pb-meta span:last-child { opacity: .65; font-size: 13px; }
.pb-segs { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.pb-segs .seg { flex: 1 1 260px; }
.pb-body { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.pb-forms { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 10px; }
.pb-form { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; text-align: left; cursor: pointer; color: #fff; font-weight: 700; font-size: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid transparent; }
.pb-form small { opacity: .6; font-weight: 600; }
.pb-form:hover { background: rgba(255,255,255,.08); }
.pb-form.on { border-left-color: var(--red-2, #7b2cff); background: rgba(123,44,255,.12); }
.pb-main { min-width: 0; }
.pb-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pb-cats:empty { display: none; }
.pb-cat { padding: 6px 12px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.pb-cat.on { background: #fff; color: #111; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pb-card { display: flex; flex-direction: column; gap: 3px; padding: 8px; text-align: left; cursor: pointer; color: #fff; background: #17171a; border: 1px solid rgba(255,255,255,.1); transition: transform .12s, border-color .12s; }
.pb-card:hover, .pb-card:focus-visible { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.pb-card.sig { border-color: rgba(246,196,69,.7); }
.pb-card svg { display: block; width: 100%; height: auto; aspect-ratio: 120 / 64; background: linear-gradient(180deg, #23793d, #175a2b); margin-bottom: 5px; }
.pb-card b { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.05; text-transform: uppercase; }
.pb-card small { font-size: 12px; opacity: .65; }
.pb-detail { width: min(560px, 94vw); }
.pb-detail h3 { margin: 2px 0 10px; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 32px; text-transform: uppercase; }
.pb-dsub { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--red-2, #ffb800); }
.pb-dart svg { display: block; width: 100%; height: auto; aspect-ratio: 120 / 64; background: linear-gradient(180deg, #23793d, #175a2b); }
.pb-facts, .pb-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pb-facts span { padding: 4px 10px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.08); }
.pb-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 8px; }
.pb-legend i { width: 12px; height: 12px; border-radius: 50%; }
@media (max-width: 700px) {
  .pb-body { grid-template-columns: 1fr; }
  .pb-forms { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .pb-form { flex: 0 0 auto; }
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-card b { font-size: 14px; }
}
.t-tut { --tc1: #12301f; --tc2: #1c1c1e; --accent: #2fe07a; } .t-playbooks { --accent: #ff8a3d; }

/* records read in one line: 1W - 0L */
.rec-nums { align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.rec-nums i { flex-direction: row; align-items: baseline; gap: 2px; }
.rec-nums i em { margin-top: 0; font-size: .62em; letter-spacing: .5px; opacity: .75; }
.rec-nums i.dash em { display: none; }
.rec-nums i.dash { padding-top: 0; }
/* the VS on Online H2H: room for the italic slant so it doesn't get clipped */
.h2h-vs > span, .h2h-wait-vs > span { padding: 0 .18em 0 .06em; overflow: visible; }
.h2h-vs { min-width: 170px; }
.rec-mini .rec-nums i em, .pf-recs .rec-nums i em { font-size: .62em; }
.pf-recs .rec-card .rec-nums { display: inline-flex; flex-direction: row; padding: 0; background: none; border: 0; border-radius: 0; }

/* profile: level and rank side by side */
.pf-lr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-lvl { padding: 3px 10px; font-weight: 800; font-size: 13px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.pf-lvl.bump { animation: pfBump .6s ease-out; }
@keyframes pfBump { 40% { transform: scale(1.15); background: rgba(47,224,122,.35); } }
.pf-rank { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-weight: 800; font-size: 13px; color: var(--rk); background: color-mix(in srgb, var(--rk) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rk) 55%, transparent); }
.pf-rank i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--rk); }
.pf-rank small { font-weight: 600; color: #fff; opacity: .65; }
.pf-lr > small { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .pf-lvl.bump { animation: none; } }
.profile-chip .rec-mini .rec-nums i em { font-size: .8em; opacity: .85; font-weight: 900; }
/* menu record card: W and L as big as the numbers, sitting right next to them */
.profile-chip .rec-mini .rec-nums { align-items: center; }
.profile-chip .rec-mini .rec-nums i { align-items: center; gap: 3px; }
.profile-chip .rec-mini .rec-nums i em { font-family: var(--display); font-size: 19px !important; font-weight: 900; opacity: .9; letter-spacing: 0; line-height: 1; }
.profile-chip .rec-mini .rec-nums i.dash b { font-size: 19px; }

/* Online Franchise: public leagues + level lock */
.lg-pub { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin: 6px 0; }
.lg-pubrow { display: grid; grid-template-columns: 1fr auto 120px auto; align-items: center; gap: 12px; cursor: default; }
.lg-bar { height: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.lg-bar i { display: block; height: 100%; background: var(--red-2, #7b2cff); }
.lg-lock { text-align: center; padding: 30px 16px; }
.lg-lock b { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 26px; text-transform: uppercase; margin-bottom: 6px; }
@media (max-width: 560px) { .lg-pubrow { grid-template-columns: 1fr auto; } .lg-pubrow .lg-bar { grid-column: 1 / -1; } }
.panel::before, .panel::after, .cd-panel::before, .cd-panel::after, .modal > .panel::before, .modal > .panel::after { pointer-events: none; }
.cd-why { display: block; width: 100%; font-size: 12.5px; opacity: .75; margin-top: -2px; }

/* Season tag: progress was reset at 1.0.1, so this is Season 1 */
.season-tag { display: inline-block; margin-top: 10px; padding: 4px 14px; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, var(--red, #e0102a), var(--red-2, #7b2cff)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.season-tag.sm { margin: 0 0 0 8px; padding: 2px 10px; font-size: 13px; vertical-align: middle; }
.game-logo .season-tag { display: table; margin: 10px auto 0; }
@media (max-height: 500px) { .game-logo .season-tag { font-size: 13px; margin-top: 4px; } }
/* owner badge (replaces the admin badge for the studio owner) */
.admin-badge.owner-badge { color: #241500; background: linear-gradient(90deg, #ffd54a, #f6a623); box-shadow: 0 0 10px rgba(255, 213, 74, .45); }

/* owner global announcements */
.ann-bar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(560px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: linear-gradient(170deg, #26210f, #141210); border: 1px solid rgba(255, 213, 74, .55); border-left: 4px solid #ffd54a; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: annIn .35s cubic-bezier(.2,.9,.3,1); transition: opacity .35s, transform .35s; }
.ann-bar.out { opacity: 0; transform: translate(-50%, -20px); }
@keyframes annIn { from { opacity: 0; transform: translate(-50%, -24px); } }
.ann-bar .ann-ic { flex: none; width: 26px; height: 26px; margin-top: 2px; background: #ffd54a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4h3l6 5V5L6 10zm13-1.5v7a4 4 0 0 0 0-7zM16 4v2.1a6 6 0 0 1 0 11.8V20a8 8 0 0 0 0-16z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4h3l6 5V5L6 10zm13-1.5v7a4 4 0 0 0 0-7zM16 4v2.1a6 6 0 0 1 0 11.8V20a8 8 0 0 0 0-16z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ann-bar div { flex: 1; min-width: 0; }
.ann-bar b { display: flex; align-items: center; font-size: 14px; color: #ffd54a; }
.ann-bar p { margin: 3px 0 0; font-size: 15px; line-height: 1.4; color: #fff; overflow-wrap: anywhere; }
.ann-bar button { flex: none; background: none; border: 0; color: #fff; opacity: .7; font-size: 16px; cursor: pointer; padding: 2px 4px; }
.own-box { display: flex; flex-direction: column; gap: 8px; }
.own-box textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.own-row { display: flex; justify-content: space-between; align-items: center; }
/* player search suggestions sit on top of everything around them */
.so-find { position: relative; z-index: 40; }
.so-results { z-index: 41; max-height: 320px; overflow-y: auto; background: #18181b; box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.so-results button { width: 100%; color: #fff; min-width: 0; }
.so-results button > :not(img):not(small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-row small { display: block; } .own-row input { flex: 1; margin-right: 8px; }

/* linked logins + outside login buttons */
.link-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.link-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; font-weight: 700; background: rgba(47,224,122,.12); border: 1px solid rgba(47,224,122,.4); }
.link-pill .link { font-size: 12px; }
.oauth-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.oauth-btns .or-line { text-align: center; font-size: 13px; opacity: .6; }
.btn.oauth { width: 100%; }
.btn.oauth.google { background: #fff; color: #1f1f1f; }
.btn.oauth.discord { background: #5865f2; color: #fff; }
.ann-bar .ann-to { margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.msg-chips:empty { display: none; }
.msg-find { position: relative; z-index: 40; }
.msg-find input { width: 100%; box-sizing: border-box; }

/* profile game history */
.pg-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pg-mode { padding: 8px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.pg-mode small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.pg-mode b { display: block; font-family: var(--display); font-size: 20px; }
.pg-mode span { font-size: 12px; opacity: .6; }
.pg-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pg-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(255,255,255,.035); border-left: 3px solid #888; }
.pg-row.w { border-left-color: #2fe07a; } .pg-row.l { border-left-color: var(--red-2, #7b2cff); }
.pg-row i { font-style: normal; font-weight: 900; text-align: center; }
.pg-row.w i { color: #2fe07a; } .pg-row.l i { color: var(--red-2, #ffb800); }
.pg-row b { display: block; font-size: 14px; } .pg-row small { font-size: 12px; opacity: .65; } .pg-row > span { font-size: 12px; opacity: .55; }
.msg-from { gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.msg-from label:first-child { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* daily reward claim animation */
.lg-day.claiming { animation: dayPop .7s cubic-bezier(.3,1.6,.5,1) both; position: relative; z-index: 2; box-shadow: 0 0 0 2px #ffd54a, 0 0 28px rgba(255, 213, 74, .7); }
.lg-day.claiming::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 900; color: #2fe07a; text-shadow: 0 2px 10px rgba(0,0,0,.6); animation: stampIn .45s .35s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes dayPop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-3deg); } 100% { transform: scale(1.06); } }
@keyframes stampIn { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
.claim-fx { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.claim-coin { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2, #f6c445 45%, #b8860b); box-shadow: inset 0 0 0 2px #d9a52a, 0 4px 10px rgba(0,0,0,.4); }
.claim-pop { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-style: italic; font-weight: 900; font-size: 38px; color: #ffd54a; text-shadow: 0 3px 0 #7a4b00, 0 8px 24px rgba(0,0,0,.6); white-space: nowrap; animation: popUp 1.5s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -90%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -150%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.claim-pack { position: absolute; transform: translate(-50%, 0); display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #e0102a, #7b2cff); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); animation: packDrop 1.6s cubic-bezier(.3,1.5,.5,1) .25s both; text-transform: capitalize; }
@keyframes packDrop { 0% { opacity: 0; transform: translate(-50%, -80px) rotate(-12deg); } 35% { opacity: 1; transform: translate(-50%, 0) rotate(4deg); } 80% { opacity: 1; transform: translate(-50%, 0) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -20px); } }
.coins-pill.coin-hit { animation: coinHit .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes coinHit { 40% { transform: scale(1.25); filter: brightness(1.5); } }
.daily-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.daily-bal { font-size: 18px; }
.del-row .tf-k { color: #ff8a95; }

/* in-game zoom buttons */
.zoom-btns { position: absolute; right: 14px; top: 132px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.zoom-btns button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(12,12,15,.78); color: #fff; font: 800 22px/1 var(--display, system-ui); cursor: pointer; display: grid; place-items: center; }
.zoom-btns button:hover { background: rgba(40,40,48,.9); }
.zoom-btns button:focus-visible { outline: 2px solid var(--gold, #7024ff); outline-offset: 2px; }
@media (max-width: 700px), (max-height: 500px) { .zoom-btns { top: 96px; right: 10px; } .zoom-btns button { width: 36px; height: 36px; font-size: 20px; } }

/* spectating: who is playing who */
.spec-vs { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(10,10,13,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 14px; white-space: nowrap; pointer-events: none; }
.spec-vs span { display: flex; align-items: center; gap: 6px; }
.spec-vs i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.spec-vs small { opacity: .7; font-weight: 700; }
.spec-vs em { font-style: normal; opacity: .6; font-weight: 800; }
@media (max-width: 700px) { .spec-vs { top: 70px; font-size: 12px; } }

/* who's online list */
.player-count { cursor: pointer; }
.player-count:hover { filter: brightness(1.15); }
.ol-card { max-width: 380px; width: calc(100vw - 32px); }
.ol-card h3 .ol-n { font-size: .8em; opacity: .7; margin-left: 4px; }
.ol-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.ol-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ol-row:hover { background: rgba(255,255,255,.09); }
.ol-row small { margin-left: auto; opacity: .6; }

/* profile: total games played */
.pf-gp { font-size: 13px; opacity: .85; }
.pf-gp b { font-weight: 800; }

/* pause menu game stats */
.gs-card { max-width: 440px; width: calc(100vw - 32px); max-height: 86vh; overflow: auto; }
.gs-card h3 small { font-size: 13px; margin-left: 6px; }
.gs-card h4 { margin: 14px 0 4px; }
.gs-lead { width: 100%; border-collapse: collapse; font-size: 14px; }
.gs-lead td { padding: 6px 4px; border-bottom: 1px solid var(--line, rgba(255,255,255,.1)); }
.gs-lead td:last-child { text-align: right; opacity: .9; }
.gs-lead small { opacity: .6; margin-left: 4px; }

/* buy several packs at once */
.pk-multi { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pk-multi .btn { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; padding: 7px 8px; white-space: nowrap; overflow: hidden; }
.pk-multi .btn span:first-child { margin-right: 4px; }

/* credits on the About page */
.credits { margin: 6px 0 14px; display: grid; gap: 6px; }
.credits div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.1)); }
.credits dt { font-weight: 800; }
.credits dd { margin: 0; opacity: .75; }

/* links back to the Habir Studios store */
.studio-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; pointer-events: auto; }
.studio-link:hover { color: #fff; text-decoration-color: var(--red, #ffb800); }
a.foot-link.studio-link { text-decoration: none; }
a.foot-link.studio-link:hover { text-decoration: underline; }

/* top-left: back to the Habir Studios game store. The menu's top row sits just under it */
#menu .studio-back { position: absolute; top: 12px; left: 16px; z-index: 7; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; font-size: 13px; font-weight: 700; color: var(--steel, #c7cad3); text-decoration: none; background: rgba(18,18,21,.85); border: 1px solid rgba(255,255,255,.12); }
#menu .studio-back svg { width: 15px; height: 15px; }
#menu .studio-back:hover, #menu .studio-back:focus-visible { color: #fff; border-color: var(--red-2, #7b2cff); text-decoration: none; }
#menu .notif-btn, #menu .fb-btn, #menu .pn-btn { top: 48px; }
#menu .notif-panel { top: 102px; }
#menu .player-count { top: 104px; }
@media (max-width: 700px) {
  #menu .studio-back { top: 10px; left: 12px; }
  #menu .notif-btn, #menu .fb-btn, #menu .pn-btn { top: 44px; }
  #menu .notif-panel { top: 96px; }
  #menu .player-count { top: 8px; padding: 4px 8px; font-size: 12px; }
  #menu .studio-back .sb-long { display: none; }
  #menu .profile-chip { margin-top: 90px; }
}
@media (max-height: 500px) and (min-width: 701px) { #menu .notif-btn, #menu .fb-btn, #menu .pn-btn { top: 44px; } #menu .studio-back { top: 8px; } }

/* new logos (2026-10): the Habir Studios splash and the Endzone Kings logo image */
.studio-logo { width: min(460px, 78vw); height: auto; animation: logoin .9s cubic-bezier(.2,1.3,.4,1) both; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.game-logo .ek-h1 { display: block; line-height: 0; }
.ek-logo { display: block; margin: 0 auto; width: clamp(260px, 44vw, 500px); height: auto; filter: drop-shadow(0 10px 28px rgba(0,0,0,.55)); }
@media (max-width: 700px) { #menu .ek-logo { width: min(300px, 76vw); } }
@media (max-height: 500px) { .ek-logo { width: auto; height: clamp(90px, 30vh, 190px); } }
@keyframes logoin { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }

/* danger stays a real red in the purple and gold theme */
.btn.danger { color: #ff8a80; box-shadow: inset 0 0 0 1px rgba(232, 35, 28, .55); background: transparent; }
.btn.danger:hover { background: #e8231c; color: #fff; }

/* logos sit on their own backgrounds: Endzone Kings on its dark art, Habir Studios on a charcoal badge */
.ek-logo { border-radius: 18px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 44px rgba(0,0,0,.6); filter: none; width: clamp(240px, 34vw, 420px); }
@media (max-width: 700px) { #menu .ek-logo { width: min(260px, 70vw); } }
@media (max-height: 500px) { .ek-logo { width: auto; height: clamp(84px, 28vh, 170px); } }
.studio-logo { width: min(380px, 70vw); border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.65); filter: none; }

/* danger stays a real red in the purple and gold theme */
.btn.danger { color: #ff8a80; box-shadow: inset 0 0 0 1px rgba(232, 35, 28, .55); background: transparent; }
.btn.danger:hover { background: #e8231c; color: #fff; }

/* profile: followers / following open a list */
.pf-fl { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.pf-fl:hover { color: #fff; text-decoration-color: var(--gold, #ffb800); }

/* profile pictures */
#pc-avatar.pic { padding: 0; overflow: hidden; background: #1b1b22; }
#pc-avatar.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-logo.face { border-radius: 50%; background: #1b1b22; border: 2px solid rgba(255,255,255,.15); }
.av-pick { display: grid; gap: 8px; margin: 6px 0 14px; }
.av-h { font-weight: 700; }
.av-h small { display: block; font-weight: 500; opacity: .7; font-size: 13px; }
.av-tabs { display: flex; gap: 6px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 2px; }
.av-opt { aspect-ratio: 1; padding: 4px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.05); cursor: pointer; }
.av-opt img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.av-opt:hover { background: rgba(255,255,255,.1); }
.av-opt.on { border-color: var(--gold, #ffb800); background: rgba(255,184,0,.12); }

/* patch notes: a red count badge when there's something new */
.pn-dot { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; width: auto; padding: 0 6px; border-radius: 999px; background: #e8231c; color: #fff; font: 800 12px/20px var(--body, system-ui); text-align: center; box-shadow: 0 0 0 2px #0b0b0e, 0 0 14px rgba(232,35,28,.6); animation: pnpulse 1.8s ease-in-out infinite; }
.pn-btn.has-new { border-color: rgba(255,184,0,.6); }
@keyframes pnpulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.15) } }
@media (prefers-reduced-motion: reduce) { .pn-dot { animation: none; } }
.pn-btn b { color: var(--gold, #ffb800); }

/* main menu: the logo on its own, no background card. Everywhere else: the lit card */
.ek-plain { display: none; }
#menu .ek-card { display: none; }
#menu .ek-plain { display: block; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,.65)); width: clamp(260px, 40vw, 480px); }
@media (max-width: 700px) { #menu .ek-plain { width: min(290px, 78vw); } }
@media (max-height: 500px) { #menu .ek-plain { width: auto; height: clamp(90px, 30vh, 190px); } }

/* menu card: tap to open your profile; nicer level badge; rank emblems */
#menu .profile-chip.tap { cursor: pointer; transition: box-shadow .15s ease; }
#menu .profile-chip.tap:hover { box-shadow: inset 0 0 0 1px rgba(255,184,0,.45), 0 10px 26px rgba(0,0,0,.45); }
#menu .profile-chip.tap:focus-visible { outline: 2px solid var(--gold, #ffb800); outline-offset: 2px; }
.lvl-badge { position: relative; display: grid; place-items: center; align-content: center; line-height: 1; color: #fff; background: linear-gradient(160deg, #ffd45c, #c98a00 55%, #7a4a00); }
.lvl-badge::before { content: ''; position: absolute; inset: 3px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: radial-gradient(circle at 50% 30%, #6b2cff, #2c0a6e 75%); }
.lvl-badge small, .lvl-badge b { position: relative; z-index: 1; }
.lvl-badge small { font: 800 8px/1 var(--body, system-ui); letter-spacing: 1px; color: #ffd45c; margin-bottom: 1px; }
.lvl-badge b { font: 900 17px/1 var(--display); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.profile-chip .lvl-badge { min-width: 44px; height: 48px; }
.profile-chip .lvl-badge b { font-size: 20px; }
.rank-pill { display: inline-flex; align-items: center; gap: 6px; border-left: 0 !important; }
.rank-pill .rk-ic, .pf-rank .rk-ic { flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.pf-rank > i { display: none; }
.pf-rank { display: inline-flex; align-items: center; gap: 6px; }

.lb-modes { margin: 2px 0 14px; padding: 8px 12px; font-size: 15px; color: #e6e6ee; background: rgba(255,184,0,.08); border-left: 3px solid var(--gold, #ffb800); }

/* the Endzone Kings logo sits on its own everywhere now (login and main menu): no background card */
.ek-card, #menu .ek-card { display: none !important; }
.ek-plain { display: block; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,.65)); width: clamp(260px, 40vw, 480px); }
@media (max-width: 700px) { .ek-plain { width: min(290px, 78vw); } }
@media (max-height: 500px) { .ek-plain { width: auto; height: clamp(90px, 30vh, 190px); } }

.ac-note { border-left: 3px solid #e8231c; padding-left: 10px; color: #ffd0cc; }

/* admin: reply to feedback */
.fb-reply { max-width: 520px; width: calc(100vw - 32px); }
.fb-reply blockquote { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--gold, #ffb800); background: rgba(255,255,255,.04); font-size: 14px; white-space: pre-wrap; }
.fb-reply textarea { width: 100%; box-sizing: border-box; padding: 10px; background: #0e0e12; color: #fff; border: 1px solid rgba(255,255,255,.15); font: inherit; resize: vertical; }
.bubble p { white-space: pre-wrap; }