:root {
  --bg: #070b15;
  --panel: #0f172a;
  --panel-2: #131d35;
  --line: #1f2b47;
  --text: #e2e8f0;
  --muted: #8a9bbd;
  --blue: #60a5fa;
  --red: #fb7185;
  --accent: #facc15;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  /* No pull-to-refresh / rubber-band scroll, no double-tap flash on a tap:
     this ships wrapped in a native app shell (Capacitor), where both read as
     a bug rather than "a browser". */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #182447 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: system-ui, 'Segoe UI', -apple-system, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, a, .col-card { font: inherit; color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }

/* The second padding declaration keeps content clear of a notch or the
   home-indicator area in landscape once this runs inside Capacitor
   (viewport-fit=cover in index.html makes env() resolve there); a browser
   that doesn't understand env() at all drops that whole declaration and
   keeps the plain px one just above it. */
.app {
  max-width: 1100px; margin: 0 auto;
  padding: 14px 16px 40px;
  padding: 14px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
  /* Lets #screen-fight (below) claim "whatever's left after the topbar" via
     flex, instead of a fight-screen height formula guessing the topbar's
     height. Other screens are unaffected: flex items don't grow by default,
     so they keep their natural content height and scroll exactly as before. */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}

/* ---------- top bar ---------- */
/* flex-wrap is a safety net for the narrowest phones: everything below
   already shrinks to fit one line, but this keeps content from clipping
   off-screen instead, if it ever doesn't (a longer name, a bigger font). */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; row-gap: 8px; }
/* Fluid: scales smoothly with the CSS width instead of snapping at a
   breakpoint, and can never exceed 1.7rem or drop below 1.2rem — so "RUMBOL"
   fits every phone from 320px up without a per-width override. */
.logo { font-size: clamp(1.2rem, 4.8vw, 1.7rem); font-weight: 900; letter-spacing: 3px; }
.logo span { color: var(--accent); text-shadow: 0 0 18px rgba(250, 204, 21, .45); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
  transition: transform .15s var(--ease), background .15s;
}
.icon-btn:hover { background: #1b2744; transform: translateY(-1px); }
.icon-btn.off { opacity: .4; }
.top-actions { display: flex; gap: 8px; }

/* ---------- screens ---------- */
.screen { animation: screenIn .45s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .15s var(--ease), background .15s, box-shadow .2s, filter .15s;
  user-select: none;
}
.btn:hover:not(:disabled) { background: #1b2744; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, #fde047, #f59e0b);
  color: #1c1300; border: none;
  box-shadow: 0 4px 18px rgba(245, 158, 11, .3);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #fde047, #f59e0b); filter: brightness(1.08); box-shadow: 0 8px 26px rgba(245, 158, 11, .45); }
.btn-big { padding: 12px 28px; font-size: 1.05rem; letter-spacing: 1px; }

/* ---------- select: matchup slots ---------- */
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.slot {
  --c: #334155;
  display: flex; gap: 14px; align-items: center; text-align: left;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 2px solid var(--line);
  border-radius: 18px; padding: 12px 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s, transform .2s var(--ease);
}
.slot.flip { flex-direction: row-reverse; text-align: right; }
.slot:hover { transform: translateY(-2px); }
.slot.active { border-color: var(--tc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 18%, transparent), 0 0 30px color-mix(in srgb, var(--tc) 22%, transparent); }
.slot-canvas { width: 96px; height: 96px; flex: none; }
.slot-info { min-width: 0; }
.slot-label { font-size: .68rem; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); }
.slot .slot-label { color: var(--tc); }
.slot-name { font-size: 1.45rem; font-weight: 900; color: var(--c); line-height: 1.15; }
.slot-tag { font-size: .8rem; color: var(--text); opacity: .85; margin-bottom: 4px; }
.slot-desc { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.slot-grow { font-size: .74rem; color: var(--accent); margin-top: 4px; font-weight: 700; }
.slot.swap .slot-canvas, .slot.swap .slot-name { animation: slotPop .35s var(--ease); }
.slot.compact { padding: 8px 10px; gap: 10px; }
.slot.compact .slot-canvas { width: 64px; height: 64px; }
.slot.compact .slot-name { font-size: 1.1rem; }
.slot.compact .slot-label { font-size: .6rem; }
.slot.compact .slot-tag { font-size: .7rem; margin: 0; }

/* mode bar + per-mode matchup layouts */
.mode-bar { display: flex; justify-content: center; gap: 4px; margin: 0 auto 14px; width: fit-content; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.mode-bar button { background: none; border: none; padding: 8px 18px; border-radius: 10px; font-weight: 800; font-size: .9rem; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, transform .15s var(--ease); }
.mode-bar button:hover { color: var(--text); }
.mode-bar button.on { background: linear-gradient(135deg, #fde047, #f59e0b); color: #1c1300; }
.matchup.m-2v2 { grid-template-columns: 1fr auto 1fr; }
.team-col { display: flex; flex-direction: column; gap: 8px; }
.team-title { font-size: .72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--tc); text-align: center; }
.matchup.m-ffa { grid-template-columns: repeat(4, 1fr); }
.ffa-title { grid-column: 1 / -1; text-align: center; font-size: .72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
@keyframes slotPop { from { transform: scale(.7); opacity: .2; } to { transform: none; opacity: 1; } }
.vs {
  align-self: center; font-size: 1.8rem; font-weight: 900; font-style: italic;
  color: var(--accent); text-shadow: 0 0 20px rgba(250, 204, 21, .5);
  animation: vsPulse 1.8s ease-in-out infinite;
}
@keyframes vsPulse { 50% { transform: scale(1.12); } }

.pick-hint { text-align: center; color: var(--muted); font-size: .9rem; margin: 16px 0 12px; }
.pick-hint b.blue { color: var(--blue); }
.pick-hint b.red { color: var(--red); }

/* ---------- select: roster ---------- */
.roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.card {
  --c: #fff;
  position: relative;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 8px 9px 10px;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), border-color .2s, box-shadow .25s;
  animation: cardIn .5s var(--ease) both;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 24px color-mix(in srgb, var(--c) 25%, transparent); }
.card:active { transform: translateY(-2px) scale(.98); }
.card.picked { border-color: var(--pick); }
.card-canvas { width: 100%; max-width: 92px; aspect-ratio: 1; display: block; margin: 0 auto 2px; }
.card-name { font-weight: 900; font-size: 1rem; color: var(--c); }
.card-tag { font-size: .68rem; color: var(--muted); min-height: 2.1em; line-height: 1.25; margin: 2px 0 5px; }
.bars { display: grid; gap: 4px; }
.bar { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; font-size: .62rem; color: var(--muted); font-weight: 700; text-align: left; }
.bar i { display: block; height: 5px; border-radius: 3px; background: #0a1122; overflow: hidden; position: relative; }
.bar i::after { content: ''; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: var(--c); border-radius: 3px; transition: width .6s var(--ease); }
.badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; pointer-events: none; }
.badge { font-size: .62rem; font-weight: 900; padding: 2px 7px; border-radius: 8px; color: #0b1020; animation: badgeIn .25s var(--ease); }
@keyframes badgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }


/* ---------- select: arenas ---------- */
.section-title { text-align: center; font-size: .78rem; letter-spacing: 3px; color: var(--muted); font-weight: 800; margin: 22px 0 10px; text-transform: uppercase; }
.arenas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.arena-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer; text-align: center;
  transition: transform .22s var(--ease), border-color .2s, box-shadow .25s;
  animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 40ms + 200ms);
}
.arena-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.arena-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,204,21,.15), 0 0 24px rgba(250,204,21,.18); }
.arena-canvas { width: 100%; aspect-ratio: 620 / 400; display: block; border-radius: 8px; background: #070b15; }
.arena-random { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border: 1px dashed var(--line); }
.arena-name { font-weight: 900; font-size: .85rem; margin-top: 6px; }
.arena-desc { font-size: .64rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.arena-card.sel .arena-name { color: var(--accent); }

/* Pinned to the bottom so Continue is reachable without scrolling past 20 fighters. */
.select-actions {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 5;
  margin: 16px -16px 0; padding: 14px 16px 16px;
  background: linear-gradient(to top, var(--bg) 60%, rgba(7,11,21,0));
}

/* ---------- fight: HUD ---------- */
/* Keep HUD + arena + controls on one screen, portrait OR landscape, without
   guessing a pixel budget for the chrome (that guess is what broke short
   landscape windows). #screen-fight flex-grows to fill what's left of .app's
   height after the topbar; everything that isn't the arena takes its natural
   height and .arena-wrap gets the rest — fightview.js fit() then sizes the
   canvas to fit that box by width AND height, like object-fit: contain. */
#screen-fight { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 900px; margin: 0 auto; }
.hud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.hud-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud-side { display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--tc); border-radius: 14px; padding: 8px 10px; min-width: 0; transition: opacity .4s, filter .4s; }
.hud-col[data-col="1"] .hud-side { flex-direction: row-reverse; border-left: 1px solid var(--line); border-right: 3px solid var(--tc); }
.hud-side.dead { opacity: .45; filter: saturate(.25); }
.hud-side.dead .hud-passive { color: #f87171; font-weight: 800; letter-spacing: 1px; }
.hud.multi .hud-side { padding: 5px 8px; gap: 8px; border-radius: 12px; }
.hud.multi .hud-portrait { width: 40px; height: 40px; }
.hud.multi .hud-name { font-size: .85rem; }
.hud.multi .hud-stat { font-size: .66rem; }
.hud.multi .hpbar { height: 9px; margin: 3px 0 2px; }
.hud-portrait { width: 56px; height: 56px; flex: none; }
.hud-body { flex: 1; min-width: 0; }
.hud-top, .hud-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hud-col[data-col="1"] .hud-top, .hud-col[data-col="1"] .hud-bottom { flex-direction: row-reverse; }
.hud-name { font-weight: 900; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-stat { font-size: .75rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-block; }
.hud-stat.bump { animation: bump .45s var(--ease); }
@keyframes bump { 0% { transform: scale(1.5); color: #fff; text-shadow: 0 0 12px var(--accent); } 100% { transform: none; } }
.hpbar { position: relative; height: 12px; background: #0a1122; border-radius: 7px; overflow: hidden; margin: 5px 0 3px; border: 1px solid #16213b; }
.hud-col[data-col="1"] .hpbar { transform: scaleX(-1); }
.hp-chip, .hp-fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 7px; }
.hp-chip { background: #fca5a5; transition: width .55s var(--ease) .3s; }
.hp-fill { background: linear-gradient(90deg, var(--c2, #16a34a), var(--c, #22c55e)); transition: width .15s linear; }
.hp-fill.low { animation: lowHp .5s ease-in-out infinite alternate; }
@keyframes lowHp { to { filter: brightness(1.7) saturate(1.3); } }
.hud-side.hit { animation: hudShake .25s linear; }
@keyframes hudShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.hp-text { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hud-passive { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-center { text-align: center; min-width: 80px; }
.clock { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.clock-sub { font-size: .65rem; letter-spacing: 2px; color: var(--muted); font-weight: 800; }
.clock-arena { font-size: .62rem; color: #6b7aa3; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.clock-sub.warn { color: var(--accent); animation: vsPulse 1s ease-in-out infinite; }

/* ---------- fight: arena ---------- */
.arena-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
#arena {
  display: block;
  width: 100%; aspect-ratio: 620 / 400;   /* CSS fallback; fit() sets exact px */
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02);
  touch-action: none;
  background: #070b15;
}
#arena.aiming { cursor: crosshair; }
#arena.grab { cursor: grab; }
#arena.grabbing { cursor: grabbing; }

.result {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(7,11,21,.55), rgba(7,11,21,.85));
  border-radius: 18px;
  animation: fadeIn .35s ease both;
  padding: 12px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.result-card {
  background: linear-gradient(160deg, #15203b, #0c1427);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 24px 20px;
  text-align: center;
  min-width: min(420px, 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: cardUp .55s var(--ease) both .1s;
}
@keyframes cardUp { from { opacity: 0; transform: translateY(40px) scale(.92); } to { opacity: 1; transform: none; } }
.result-portrait { width: 150px; height: 150px; display: block; margin: -30px auto -12px; animation: float 2.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.result-title { font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 24px currentColor; }
.result-sub { color: var(--muted); font-size: .88rem; margin: 2px 0 12px; }
.result-stats { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.result-stats th, .result-stats td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
.result-stats th { color: var(--muted); font-weight: 700; font-size: .7rem; letter-spacing: 1px; }
.result-stats td:first-child { text-align: left; color: var(--muted); }
.result-stats .win { color: var(--accent); font-weight: 800; }
.result-stats.multi { font-size: .74rem; }
.result-stats.multi th, .result-stats.multi td { padding: 4px 5px; }
.result-stats .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- fight: controls ---------- */
.controls { display: flex; justify-content: center; margin-top: 14px; min-height: 50px; }
.group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; animation: screenIn .3s var(--ease); }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.seg button { background: none; border: none; padding: 7px 12px; border-radius: 9px; font-weight: 800; font-size: .85rem; cursor: pointer; color: var(--muted); transition: background .2s, color .2s; }
.seg button.on { background: #24324f; color: var(--text); }
.keys { text-align: center; color: #56648a; font-size: .72rem; margin: 10px 0 6px; }

.log-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; margin-top: 6px; }
.log-panel summary { cursor: pointer; color: var(--muted); font-size: .82rem; font-weight: 700; user-select: none; }
.log { height: 130px; overflow-y: auto; font-family: ui-monospace, Consolas, monospace; font-size: .74rem; line-height: 1.6; margin-top: 6px; }
.log-line { border-bottom: 1px solid rgba(255,255,255,.03); }
.log-line.s0 { color: #bfdbfe; }
.log-line.s1 { color: #fecdd3; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .roster { grid-template-columns: repeat(4, 1fr); }
  .arenas { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .roster { grid-template-columns: repeat(3, 1fr); }
  .arenas { grid-template-columns: repeat(2, 1fr); }
  .matchup { grid-template-columns: 1fr; }
  .vs { justify-self: center; }
  .slot.flip { flex-direction: row; text-align: left; }
  .matchup.m-2v2 { grid-template-columns: 1fr; }
  .matchup.m-ffa { grid-template-columns: 1fr 1fr; }
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-center { grid-column: 1 / -1; grid-row: 1; }
  .hud-portrait { width: 40px; height: 40px; }
  /* A HUD column is only ~90px wide on a phone, far narrower than a stat like
     "ARROW 3 · VOLLEY ×3". On one nowrap row the name got ellipsised to "S…"
     and the stat spilled out of the card and over the neighbour. Stack them:
     name on its own line, stat below it (wrapping), aligned to the card's
     outer edge (right for the col-1 side). */
  .hud-top, .hud-col[data-col="1"] .hud-top { flex-direction: column; align-items: flex-start; gap: 0; }
  .hud-col[data-col="1"] .hud-top { align-items: flex-end; }
  .hud-name { max-width: 100%; }
  .hud-stat { white-space: normal; }
  .hud-bottom { flex-wrap: wrap; row-gap: 2px; }
  /* On a phone the roster + arena list is taller than the screen, so this
     bar stays pinned to the bottom of the viewport from the very first
     paint onward (not just once you scroll near the end) — covering the
     first row of fighters before anyone has scrolled at all. Desktop never
     shows this, since the whole screen usually already fits without
     scrolling. Drop the sticky floating bar on narrow screens instead: a
     plain button row you scroll to, like the rest of the page. */
  .select-actions { position: static; margin: 20px 0 0; padding: 0; background: none; }
}
@media (max-width: 460px) {
  .roster { grid-template-columns: repeat(2, 1fr); }
  .slot-canvas { width: 72px; height: 72px; }
  /* Two FFA columns don't fit a ~360px phone — the right pair spilled off the
     screen. Drop to one column, same as 2v2 already does. */
  .matchup.m-ffa { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ================= ONLINE ================= */
/* top-bar tabs */
.topbar { gap: 14px; }
.tabs { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-right: auto; margin-left: 18px; }
.tabs button { background: none; border: none; padding: 7px 14px; border-radius: 9px; font-weight: 800; font-size: .85rem; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.tabs button:hover { color: var(--text); }
.tabs button.on { background: #24324f; color: var(--text); }
.tabs .tag { font-size: .6rem; background: var(--accent); color: #1c1300; border-radius: 6px; padding: 1px 5px; margin-left: 3px; vertical-align: 2px; }

/* lobby */
.online-card { max-width: 440px; margin: 30px auto; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.online-card h2 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 900; }
.online-rules { color: var(--muted); font-size: .85rem; line-height: 1.45; margin: 0 0 20px; }
.field { display: block; text-align: left; font-size: .75rem; font-weight: 800; color: var(--muted); letter-spacing: 1px; margin-bottom: 12px; }
.online-card input { display: block; width: 100%; margin-top: 6px; background: #0a1122; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text); font: inherit; font-size: 1rem; outline: none; transition: border-color .2s; }
.online-card input:focus { border-color: var(--accent); }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; }
.or { position: relative; margin: 18px 0 12px; color: var(--muted); font-size: .75rem; }
.or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.or span { position: relative; background: var(--panel); padding: 0 10px; }
.join-row { display: flex; gap: 8px; }
.join-row input { margin: 0; text-transform: uppercase; letter-spacing: 6px; font-weight: 900; text-align: center; font-size: 1.2rem; }
.room-label { font-size: .75rem; letter-spacing: 3px; color: var(--muted); font-weight: 800; }
.room-code { font-size: clamp(2.2rem, 11vw, 3.2rem); font-weight: 900; letter-spacing: clamp(6px, 3vw, 12px); color: var(--accent); text-shadow: 0 0 24px rgba(250,204,21,.4); margin: 4px 0 12px; }
.waiting { color: var(--muted); font-size: .88rem; }
.dots::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; animation: vsPulse 1s ease-in-out infinite; }
.online-error { color: #f87171; font-size: .85rem; min-height: 1.2em; margin: 12px 0 0; }
.net-line { font-size: .72rem; color: #56648a; margin: 6px 0 0; }
#netStatus[data-s="online"] { color: #4ade80; }
#netStatus[data-s="connecting"] { color: var(--accent); }
#netStatus[data-s="offline"] { color: #f87171; }

/* in-match controls */
.online-controls { width: 100%; justify-content: space-between; }
.online-status { flex: 1; min-width: 220px; text-align: left; font-weight: 700; font-size: .9rem; }
.timer { height: 6px; background: #0a1122; border-radius: 4px; overflow: hidden; margin-top: 6px; border: 1px solid #16213b; }
.timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #facc15); transition: width .12s linear; }
.timer i.low { background: #ef4444; animation: lowHp .4s ease-in-out infinite alternate; }

/* hud: player name + lives */
.hud-meta { display: flex; justify-content: space-between; gap: 6px; font-size: .66rem; font-weight: 800; color: var(--muted); }
.hud-col[data-col="1"] .hud-meta { flex-direction: row-reverse; }
.hud-meta .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lives i { font-style: normal; color: #334155; margin: 0 1px; transition: color .3s, transform .3s; }
.lives i.on { color: #f43f5e; text-shadow: 0 0 8px rgba(244,63,94,.6); }

/* overlays on the arena */
.overlay { position: absolute; inset: 0; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .3s ease both; }
.pick-overlay { background: radial-gradient(circle at 50% 40%, rgba(15,23,42,.88), rgba(7,11,21,.96)); gap: 14px; }
.pick-title { font-size: 1.1rem; font-weight: 900; text-align: center; }
.pick-title > span { display: block; font-size: .72rem; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.pick-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); gap: 12px; }
.pick-card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 2px solid var(--line); border-radius: 16px; padding: 10px 10px 12px; cursor: pointer; text-align: center; transition: transform .22s var(--ease), border-color .2s, box-shadow .25s, opacity .25s; animation: cardIn .45s var(--ease) both; }
.pick-card:nth-child(2) { animation-delay: .06s; } .pick-card:nth-child(3) { animation-delay: .12s; }
.pick-card:hover { transform: translateY(-5px); border-color: var(--c); box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--c) 30%, transparent); }
.pick-card canvas { width: 96px; height: 96px; display: block; margin: 0 auto; }
.pick-name { font-weight: 900; color: var(--c); font-size: 1.05rem; }
.pick-tag { font-size: .7rem; color: var(--text); opacity: .8; margin: 2px 0 4px; }
.pick-desc { font-size: .66rem; color: var(--muted); line-height: 1.3; }
.pick-card.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,204,21,.2), 0 0 30px rgba(250,204,21,.25); transform: translateY(-4px); }
.pick-card.dim { opacity: .35; pointer-events: none; }
.pick-status { color: var(--muted); font-size: .85rem; font-weight: 700; min-height: 1.2em; }
.round-overlay, .over-overlay { background: radial-gradient(circle at 50% 45%, rgba(7,11,21,.55), rgba(7,11,21,.86)); }
.round-card { background: linear-gradient(160deg, #15203b, #0c1427); border: 1px solid var(--line); border-radius: 20px; padding: 20px 28px; text-align: center; min-width: min(380px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: cardUp .5s var(--ease) both; }
.round-title, .over-title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 24px currentColor; }
.over-title { font-size: clamp(2rem, 9vw, 2.8rem); }
.good { color: #4ade80; } .bad { color: #f87171; }
.round-sub { color: var(--muted); margin: 4px 0 14px; font-size: .88rem; }
.round-lives { display: grid; gap: 6px; margin-bottom: 12px; }
.rl { display: flex; justify-content: space-between; gap: 18px; font-weight: 800; font-size: .92rem; }
.round-note { color: #8a9bbd; font-size: .78rem; min-height: 1.1em; margin-top: 8px; }

@media (max-width: 720px) {
  .tabs { margin-left: 8px; }
  .tabs button { padding: 6px 9px; font-size: .78rem; }
  .pick-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pick-desc { display: none; }
  .pick-card canvas { width: 64px; height: 64px; }
}

/* ================= ACCOUNT ================= */
/* top-bar chip: coins + name → profile */
.acct {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  font-weight: 800; font-size: .85rem; max-width: 260px;
  transition: transform .15s var(--ease), background .15s, border-color .2s;
}
.acct:hover { background: #1b2744; transform: translateY(-1px); }
.acct.on { border-color: var(--accent); }
.acct-coins { display: flex; align-items: center; gap: 4px; background: #0a1122; border-radius: 8px; padding: 3px 8px; color: var(--accent); font-variant-numeric: tabular-nums; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct.gain .acct-coins { animation: coinGain .9s var(--ease); }
@keyframes coinGain { 0% { transform: scale(1); } 25% { transform: scale(1.3); box-shadow: 0 0 22px rgba(250,204,21,.7); } 100% { transform: none; } }
.coin { font-style: normal; }
.pid { color: #56648a; font-weight: 800; letter-spacing: 1px; margin-left: 4px; }

/* online lobby additions */
.online-rewards { font-size: .78rem; color: var(--muted); margin: 16px 0 0; }
.online-rewards b { color: var(--accent); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: 800; font-size: inherit; text-decoration: underline; padding: 0 4px; }
.rl small { color: #56648a; font-weight: 700; }

/* match-over rewards */
.reward { margin: 0 auto 14px; max-width: 280px; display: grid; gap: 4px; }
.reward:empty { display: none; }
.rw-line { display: flex; justify-content: space-between; font-size: .88rem; font-weight: 700; animation: cardIn .45s var(--ease) both; }
.rw-line:nth-child(2) { animation-delay: .15s; }
.rw-line b { color: var(--accent); }
.rw-note { font-size: .78rem; color: var(--muted); }
.rw-total { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 5px; margin-top: 2px; }
.rw-total b { color: var(--text); }

/* classic roster: not in your online collection */
.card .lock-tag { position: absolute; top: 7px; right: 8px; font-size: .72rem; opacity: .75; }
/* ...and locked in Classic too: a "???" silhouette that can't be picked.
   Preview fills the canvas flat dark; these drop-shadows add its faint rim + glow. */
.sil-canvas { filter: drop-shadow(0 0 1px rgba(170,190,255,.8)) drop-shadow(0 0 5px rgba(120,150,255,.45)); }
.gray-canvas { filter: grayscale(1) brightness(0.55); }
.card.sil { border-style: dashed; }
.card.sil .card-name { color: #7c8aab; letter-spacing: 3px; }
.card.sil .bar { grid-template-columns: 30px 1fr 8px; }
.card.sil .bar i::after { width: 100%; background: repeating-linear-gradient(90deg, #26324f 0 3px, transparent 3px 6px); }
.card.sil .bar::after { content: '?'; font-weight: 900; color: #7c8aab; }
.card.nope { animation: nope .35s var(--ease); }
@keyframes nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.snack {
  position: fixed; left: 50%; bottom: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 32px);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; font-size: .88rem; font-weight: 700;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); transition: opacity .25s, transform .25s var(--ease);
}
.snack.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* profile screen */
.profile { max-width: 900px; margin: 0 auto; }
.pf-offline { margin: 40px auto; text-align: center; }
.pf-head { display: flex; gap: 16px; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
.pf-id, .pf-wallet, .pf-panel { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.pf-id { flex: 1 1 320px; }
.pf-id .field { margin-bottom: 6px; }
.pf-name-row, .key-row { display: flex; gap: 8px; align-items: center; }
.profile input { flex: 1; min-width: 0; background: #0a1122; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; font-size: 1rem; outline: none; transition: border-color .2s; }
.profile input:focus { border-color: var(--accent); }
.pf-msg { font-size: .78rem; color: #f87171; min-height: 1.1em; margin-top: 6px; }
.pf-msg.good, b.good { color: #4ade80; }
.pf-wallet { flex: 0 1 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.pf-coins { font-size: 2.2rem; font-weight: 900; color: var(--accent); text-shadow: 0 0 22px rgba(250,204,21,.35); font-variant-numeric: tabular-nums; }
.pf-coins .coin { font-size: 1.8rem; margin-right: 6px; }
.pf-daily { font-size: .74rem; color: var(--muted); margin-top: 4px; }
.pf-daily b { color: var(--text); }
.pf-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.pf-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; animation: cardIn .45s var(--ease) both; }
.pf-tile b { display: block; font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pf-tile b i { font-style: normal; font-size: 1rem; }
.pf-tile span { font-size: .66rem; color: var(--muted); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.pf-note { text-align: center; color: var(--muted); font-size: .8rem; margin: -4px 0 12px; }

.collection { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.col-card { --c: #fff; position: relative; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 2px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-radius: 14px; padding: 6px 4px 8px; text-align: center; animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 25ms); transition: transform .2s var(--ease), box-shadow .25s; }
.col-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 0 20px color-mix(in srgb, var(--c) 25%, transparent); }
.col-card canvas { width: 100%; max-width: 72px; aspect-ratio: 1; display: block; margin: 0 auto; }
.col-name { font-weight: 900; font-size: .8rem; color: var(--c); }
.col-rec { font-size: .6rem; color: var(--muted); font-weight: 700; margin-top: 1px; }
.col-lock { display: none; position: absolute; top: 5px; right: 6px; font-size: .8rem; }
.col-card.locked { border-color: var(--line); border-style: dashed; }
.col-card.locked .col-name { color: #7c8aab; letter-spacing: 2px; }
.col-card.locked .col-lock { display: block; }

.pf-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 22px; }
.pf-panel h4 { margin: 0 0 10px; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.pf-list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.pf-empty { color: var(--muted); font-size: .82rem; padding: 6px 0; }
.hm { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid #f87171; border-radius: 12px; padding: 8px 10px; font-size: .84rem; }
.hm.w { border-left-color: #4ade80; }
.hm-res { font-weight: 900; font-size: 1.1rem; text-align: center; color: #f87171; }
.hm.w .hm-res { color: #4ade80; }
.hm-main { min-width: 0; }
.hm-main small { color: #56648a; font-weight: 700; margin-left: 3px; }
.hm-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.hm-chips i { font-style: normal; font-size: .64rem; font-weight: 800; color: var(--c); background: #0a1122; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.hm-chips i.rw { border-color: color-mix(in srgb, #4ade80 55%, var(--line)); }
.hm-chips i.rl { opacity: .55; }
.hm-side { text-align: right; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.hm-lives { font-weight: 900; font-size: .9rem; color: var(--text); }
.hm-coins { color: var(--accent); font-weight: 800; }
.lg { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font-size: .82rem; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.04); }
.lg b { font-variant-numeric: tabular-nums; }
.lg b.pos { color: var(--accent); } .lg b.neg { color: #f87171; }
.lg small { color: #56648a; font-size: .68rem; min-width: 56px; text-align: right; }

.pf-key { margin-top: 14px; }
.pf-key p { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0 0 10px; }
.pf-key h4:not(:first-child) { margin-top: 4px; }
.pf-hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
#pfLoginStatus, #pfGoogleStatus { font-size: .88rem; }
#pfLoginStatus b, #pfGoogleStatus b { color: var(--accent); }
.pf-google { display: flex; justify-content: center; margin-bottom: 10px; }
.pf-google[hidden] { display: none; }
.pf-or { text-align: center; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 12px; }
.pf-hint { font-size: .78rem; color: var(--muted); line-height: 1.4; margin: 0 0 8px; }
.pf-key code { flex: 1; min-width: 0; background: #0a1122; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; letter-spacing: 1px; overflow-wrap: anywhere; }
.pf-switch { margin-top: 12px; font-size: .82rem; }
.pf-switch summary { cursor: pointer; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.pf-switch .btn.ghost { margin-top: 8px; }

@media (max-width: 900px) {
  .collection { grid-template-columns: repeat(5, 1fr); }
  .pf-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Two-row top bar on phones: brand + wallet/controls on line 1, the mode
     tabs on their own centred line below. This gives the account chip room to
     show coins, gems AND name (all were being hidden/cramped before). */
  .topbar { row-gap: 10px; }
  .logo { order: 0; }
  .top-actions { order: 1; }
  .tabs { order: 2; flex-basis: 100%; margin: 0; justify-content: center; }
  /* Keep the name visible but bounded so a long one ellipsises instead of
     blowing out the chip. */
  .acct-name { max-width: 6.5em; }
  .acct { padding: 0 8px 0 6px; max-width: none; }
  .pf-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .collection { grid-template-columns: repeat(4, 1fr); }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .tabs .tag { display: none; }
  .top-actions { gap: 6px; }
  .icon-btn { width: 36px; height: 36px; }
}

/* ================= RANKED ================= */
/* tier chip (inline) */
.tier { --t: #94a3b8; display: inline-block; font-size: .64rem; font-weight: 900; letter-spacing: .5px; padding: 1px 7px; border-radius: 7px; vertical-align: 1px;
  color: var(--t); background: color-mix(in srgb, var(--t) 14%, #0a1122); border: 1px solid color-mix(in srgb, var(--t) 45%, transparent); white-space: nowrap; }
.tier.unplaced { color: var(--muted); background: #0a1122; border-color: var(--line); font-weight: 800; }

/* tier emblem (hexagon badge) */
.emblem { --t: #475569; width: 44px; height: 50px; flex: none; display: grid; place-items: center; position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--t) 85%, #fff) 0%, var(--t) 45%, color-mix(in srgb, var(--t) 45%, #000) 100%);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--t) 40%, transparent)); }
.emblem::after { content: ''; position: absolute; inset: 4px; clip-path: inherit; background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.25)); }
.emblem span { position: relative; z-index: 1; font-weight: 900; font-size: .95rem; color: #0b1020; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.emblem.big { width: 64px; height: 72px; }
.emblem.big span { font-size: 1.3rem; }
.emblem.unplaced { --t: #334155; filter: none; }
.emblem.unplaced span { color: #94a3b8; text-shadow: none; }
.emblem.t-master, .emblem.t-champion { animation: emblemGlow 2.4s ease-in-out infinite; }
@keyframes emblemGlow { 50% { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--t) 70%, transparent)); } }

/* lobby: ranked box */
.ranked-box { background: linear-gradient(160deg, rgba(250,204,21,.07), rgba(15,23,42,.4)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 16px; padding: 12px 14px 10px; margin-bottom: 4px; text-align: left; }
.rk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rk-info { flex: 1; min-width: 0; }
.rk-tier { font-weight: 900; font-size: 1.05rem; }
.rk-tier b { font-variant-numeric: tabular-nums; }
.rk-sub { font-size: .75rem; color: var(--muted); font-weight: 700; margin-top: 1px; }
.rk-board { font-size: .78rem; align-self: flex-start; text-decoration: none; white-space: nowrap; }
.rk-board:hover { text-decoration: underline; }
.rk-season { font-size: .7rem; color: #56648a; text-align: center; margin-top: 7px; font-weight: 700; }
.join-row { margin-top: 8px; }

/* lobby: searching */
#lobbySearch { padding: 6px 0 4px; }
.search-ring { position: relative; width: 84px; height: 84px; margin: 4px auto 14px; }
.search-ring i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent); border-right-color: color-mix(in srgb, var(--accent) 40%, transparent); animation: spin 1.1s linear infinite; }
.search-ring i + i { inset: 14px; border-top-color: var(--blue); border-right-color: color-mix(in srgb, var(--blue) 40%, transparent); animation-duration: 1.7s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.search-title { font-weight: 900; font-size: 1.15rem; }
.search-time { font-size: 2.2rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; margin: 2px 0; }
.search-sub { color: var(--muted); font-size: .8rem; margin-bottom: 14px; min-height: 1.2em; }

/* pick screen: who vs who in ranked */
.pick-vs { font-size: .8rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.pick-vs i { color: var(--accent); font-style: italic; margin: 0 6px; }

/* match over: rating result */
.rank-result { margin: -4px auto 12px; max-width: 300px; }
.rank-result:empty { display: none; }
.rk-banner { --t: var(--accent); font-weight: 900; font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase; color: var(--t); text-shadow: 0 0 18px color-mix(in srgb, var(--t) 60%, transparent); margin-bottom: 4px; animation: slotPop .5s var(--ease) both .2s; }
.rk-banner.down { color: #f87171; text-shadow: none; font-size: .95rem; }
.rk-line { font-size: .95rem; font-weight: 700; display: flex; gap: 8px; justify-content: center; align-items: center; }
.rk-line b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rk-line .pos, .hm-kind .pos { color: #4ade80; font-weight: 900; }
.rk-line .neg, .hm-kind .neg { color: #f87171; font-weight: 900; }
.rk-note { color: var(--muted); font-size: .78rem; margin-top: 3px; }

/* profile: ranked card */
.pf-ranked { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pf-rk-info { flex: 1; min-width: 0; }
.pf-rk-season { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.pf-rk-tier { font-size: 1.4rem; font-weight: 900; margin: 2px 0; }
.pf-rk-tier small { color: var(--muted); font-size: .85rem; }
.pf-rk-sub { font-size: .8rem; color: var(--muted); font-weight: 700; }
.pf-seasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pf-seasons:empty { display: none; }
.season-chip { --t: #94a3b8; font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: 8px; color: var(--t); border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); background: color-mix(in srgb, var(--t) 10%, transparent); }
.hm-kind { font-size: .64rem; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: rgba(250,204,21,.1); border-radius: 6px; padding: 1px 6px; margin-right: 6px; }

/* leaderboard */
.board { max-width: 760px; margin: 0 auto; }
.board-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: center; margin-bottom: 12px; }
.board-head h2 { margin: 0; font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 900; }
.board-season { color: var(--muted); font-size: .8rem; font-weight: 700; margin-top: 2px; }
.board-me { text-align: center; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; padding: 9px 12px; font-size: .88rem; margin-bottom: 12px; }
.board-me:empty { display: none; }
.board-wrap { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.board-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.board-table th { text-align: left; font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.board-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.board-table tbody tr { animation: cardIn .4s var(--ease) both; }
.board-table tbody tr:nth-child(-n+3) td { font-weight: 800; }
.board-table tr.me td { background: rgba(250,204,21,.09); }
.board-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.board-table .rk { width: 44px; font-weight: 900; color: var(--muted); font-size: .95rem; }
.board-table small { color: #56648a; font-weight: 700; }
.board-table .empty { text-align: center; color: var(--muted); padding: 24px 12px; }
.board-note { text-align: center; color: #56648a; font-size: .74rem; margin-top: 12px; }

@media (max-width: 720px) {
  /* Keep the emblem + tier/season text together on the first line and push the
     Leaderboard button onto its own line below — otherwise the info column
     collapsed to ~49px and the season line stacked one word per row. */
  .pf-ranked { flex-wrap: wrap; }
  .pf-ranked .pf-rk-info { min-width: 150px; }
  .pf-ranked #pfBoardBtn { margin-top: 8px; }
  .board-table th:nth-child(3), .board-table td:nth-child(3) { display: none; }
}

/* online pick phase: the HUD still shows the previous fight */
.hud.stale .hud-side { opacity: .35; filter: saturate(.3); transition: opacity .3s; }

/* ================= GACHA ================= */
.acct-gems { display: flex; align-items: center; gap: 4px; background: #0a1122; border-radius: 8px; padding: 3px 8px; color: #a5b4fc; font-variant-numeric: tabular-nums; }
.pf-gems { font-size: 1.1rem; font-weight: 900; color: #a5b4fc; margin-top: -2px; }
.pf-gems .coin { margin-right: 4px; }
.col-card.locked { cursor: pointer; }

.gacha { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start; max-width: 900px; margin: 0 auto; }
.ga-machine { position: relative; background: radial-gradient(circle at 50% 35%, rgba(225,29,72,.14), transparent 65%); border-radius: 20px; }
#gaCanvas { width: 100%; aspect-ratio: 360 / 440; display: block; cursor: pointer; }
.ga-results { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 34px; margin-top: 6px; }
.ga-chip { --c: #475569; display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 800; padding: 5px 9px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); animation: chipIn .35s var(--ease) both; }
.ga-chip.big { border-color: #3b82f6; color: #93c5fd; }
.ga-chip.star { border-color: #fbbf24; color: var(--c); box-shadow: 0 0 14px rgba(251,191,36,.35); background: linear-gradient(160deg, rgba(251,191,36,.18), var(--panel)); }
.ga-chip.star i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
@keyframes chipIn { from { opacity: 0; transform: translateY(-12px) scale(.7); } to { opacity: 1; transform: none; } }
.ga-skip { position: absolute; top: 10px; right: 12px; font-size: .8rem; text-decoration: none; }

.ga-side { display: flex; flex-direction: column; gap: 12px; }
.ga-banner { background: linear-gradient(160deg, rgba(251,191,36,.12), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 18px; padding: 16px 18px; }
.ga-kicker { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 900; }
.ga-banner h2 { margin: 2px 0 2px; font-size: 1.7rem; font-weight: 900; }
.ga-sub { color: var(--muted); font-size: .85rem; font-weight: 700; }
.ga-pity { margin-top: 12px; }
.ga-pity-bar { position: relative; height: 10px; background: #0a1122; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ga-pity-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f59e0b, #fde047); border-radius: 6px; transition: width .5s var(--ease); }
.ga-pity-bar b { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.5); }
.ga-pity-text { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.ga-pity-text b { color: var(--text); }
.ga-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ga-pull { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 10px; font-size: 1rem; }
.ga-pull span { font-size: .78rem; font-weight: 800; opacity: .85; }
.ga-pull.gem { border-color: rgba(165,180,252,.45); background: linear-gradient(135deg, rgba(99,102,241,.25), var(--panel-2)); }
.ga-note { font-size: .76rem; color: #f59e0b; min-height: 0; }
.ga-note:empty { display: none; }
.ga-links { display: flex; gap: 14px; justify-content: center; }
.ga-links .link-btn { font-size: .82rem; }
.ga-toast { font-size: .82rem; font-weight: 700; text-align: center; color: #fca5a5; min-height: 1.2em; opacity: 0; transition: opacity .3s; }
.ga-toast.show { opacity: 1; }
.ga-toast.good { color: #4ade80; }

.ga-fighters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 900px; margin: 0 auto; }
.ga-fighter { --c: #fff; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 2px dashed var(--line); border-radius: 16px; padding: 8px 8px 10px; text-align: center; transition: transform .2s var(--ease), box-shadow .25s; }
.ga-fighter:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.ga-fighter canvas { width: 84px; height: 84px; display: block; margin: 0 auto; }
.ga-f-name { font-weight: 900; color: #94a3b8; }
.ga-f-tag { font-size: .64rem; color: var(--muted); min-height: 2.2em; line-height: 1.2; margin: 2px 0 6px; }
.ga-f-own { display: none; font-size: .72rem; font-weight: 800; color: #4ade80; padding: 6px 0; }
.ga-f-buy { display: flex; gap: 4px; justify-content: center; }
.ga-f-buy .btn { padding: 5px 7px; font-size: .7rem; border-radius: 8px; }
.ga-fighter.owned { border-style: solid; border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.ga-fighter.owned .ga-f-name { color: var(--c); }
.ga-fighter.owned .ga-f-own { display: block; }
.ga-fighter.owned .ga-f-buy { display: none; }

.ga-shop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 900px; margin: 0 auto; }
.ga-pack { background: linear-gradient(160deg, rgba(99,102,241,.2), var(--panel)); border: 1px solid rgba(165,180,252,.35); border-radius: 16px; padding: 14px 10px; text-align: center; animation: cardIn .45s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.ga-pack-gems { font-size: 1.3rem; font-weight: 900; color: #c7d2fe; }
.ga-pack-bonus { font-size: .7rem; color: #a5b4fc; font-weight: 700; margin: 2px 0 10px; }
.ga-pack .btn { width: 100%; }
.ga-shop-note { text-align: center; color: #56648a; font-size: .76rem; margin: 10px 0 0; }

/* modals + reveal */
.ga-modal, .ga-reveal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,7,15,.78); animation: fadeIn .25s ease both;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.ga-modal-card { background: linear-gradient(160deg, #15203b, #0c1427); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; width: min(560px, 100%); max-height: 86vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.ga-modal-card h3 { margin: 0 0 12px; }
.ga-modal-card > .btn { margin-top: 12px; }
.ga-odds { width: 100%; border-collapse: collapse; font-size: .86rem; margin-bottom: 10px; }
.ga-odds th, .ga-odds td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; }
.ga-odds th { color: var(--muted); font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; }
.ga-odds td:last-child, .ga-odds th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ga-rules { margin: 0; padding-left: 18px; color: #cbd5e1; font-size: .82rem; line-height: 1.5; }
.ga-rules li { margin-bottom: 6px; }
.ga-hist { display: grid; gap: 4px; }
.ga-h { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: .8rem; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ga-h span { color: var(--muted); }
.ga-h small { grid-column: 1 / -1; color: #56648a; font-size: .7rem; }
.ga-h.star b i { font-style: normal; }
.ga-reveal-card { position: relative; text-align: center; padding: 24px 32px 26px; border-radius: 24px; background: radial-gradient(circle at 50% 30%, #2a2140, #0c1427 70%); border: 2px solid #fbbf24; box-shadow: 0 0 60px rgba(251,191,36,.35), 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: revealIn .6s var(--ease) both; min-width: min(340px, 100%); }
@keyframes revealIn { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 60% { transform: scale(1.06) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.ga-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(251,191,36,.14) 0 10deg, transparent 10deg 20deg); animation: spin 14s linear infinite; pointer-events: none; }
.ga-reveal-card > *:not(.ga-rays) { position: relative; }
#gaRevealCanvas { width: 170px; height: 170px; display: block; margin: 0 auto; }
.ga-reveal-kicker { font-size: .78rem; letter-spacing: 4px; color: #fde047; font-weight: 900; }
.ga-reveal-name { font-size: clamp(1.8rem, 8vw, 2.4rem); font-weight: 900; text-shadow: 0 0 24px currentColor; margin: 2px 0; }
.ga-reveal-tag { color: #cbd5e1; font-size: .82rem; max-width: 320px; margin: 0 auto 16px; line-height: 1.4; }

/* banners: tabs + key-art hero; --ga-a / --ga-a2 are the banner's accents (set by gacha.js) */
#screen-gacha { --ga-a: #facc15; --ga-a2: #f59e0b; }
.ga-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 900px; margin: 0 auto 10px; }
.ga-tab { --a: #facc15; position: relative; overflow: hidden; display: grid; gap: 1px; text-align: left; padding: 9px 12px 9px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.ga-tab i { position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--sky); }
.ga-tab b { font-size: .92rem; font-weight: 900; }
.ga-tab small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.ga-tab:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a) 55%, var(--line)); }
.ga-tab.on { border-color: var(--a); background: linear-gradient(160deg, color-mix(in srgb, var(--a) 18%, var(--panel)), var(--panel)); box-shadow: 0 6px 22px color-mix(in srgb, var(--a) 22%, transparent); }
.ga-tab.on b { color: var(--a); }
.ga-tab.done small { color: #4ade80; }
.ga-tab:disabled { opacity: .5; cursor: default; }
.ga-hero { position: relative; max-width: 900px; height: 240px; margin: 0 auto 16px; border-radius: 20px; overflow: hidden; background: #05070f; border: 1px solid color-mix(in srgb, var(--ga-a) 45%, var(--line)); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 44px color-mix(in srgb, var(--ga-a) 14%, transparent); }
.ga-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.ga-hero-text { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; background: linear-gradient(90deg, rgba(4,6,14,.8), rgba(4,6,14,.35) 75%, transparent); }
.ga-theme { font-size: .7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--ga-a2); }
.ga-hero h2 { margin: 3px 0 6px; font-size: 2.2rem; line-height: 1.05; font-weight: 900; color: #fff; background: linear-gradient(90deg, #fff 30%, var(--ga-a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
.ga-tagline { margin: 0; font-size: .86rem; font-weight: 600; line-height: 1.35; color: #e2e8f0; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.ga-complete { align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 900; color: #052e16; background: #4ade80; }
.ga-complete[hidden] { display: none; }
.ga-hero.swap .ga-hero-text { animation: heroIn .45s var(--ease) both; }
.ga-hero.swap .ga-art { animation: fadeIn .4s ease both; }
@keyframes heroIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
#screen-gacha .ga-banner { background: linear-gradient(160deg, color-mix(in srgb, var(--ga-a) 13%, transparent), var(--panel)); border-color: color-mix(in srgb, var(--ga-a) 38%, var(--line)); }
#screen-gacha .ga-kicker { color: var(--ga-a); }
#screen-gacha .ga-pity-bar i { background: linear-gradient(90deg, var(--ga-a2), var(--ga-a)); }
#screen-gacha .ga-machine { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ga-a) 16%, transparent), transparent 65%); }
.ga-pool-h { margin: 12px 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ga-pool { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.ga-pool li { --c: #fff; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: .84rem; background: rgba(255,255,255,.03); }
.ga-pool li i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.ga-pool li span { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ga-pool li.own span { color: #4ade80; }
.ga-pool-note { margin: 4px 0 12px; font-size: .76rem; color: #94a3b8; }

@media (max-width: 900px) { .ga-fighters { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) {
  .ga-tab { padding: 8px 8px 8px 13px; }
  .ga-tab b { font-size: .8rem; }
  .ga-hero { height: 250px; }
  .ga-hero-text { width: auto; right: 0; bottom: auto; padding: 14px 16px 26px; background: linear-gradient(180deg, rgba(4,6,14,.82), rgba(4,6,14,.4) 70%, transparent); }
  .ga-hero h2 { font-size: 1.6rem; }
  .ga-tagline { font-size: .78rem; }
  .gacha { grid-template-columns: 1fr; }
  .ga-machine { max-width: 340px; margin: 0 auto; width: 100%; }
  .ga-fighters { grid-template-columns: repeat(3, 1fr); }
  .ga-shop { grid-template-columns: repeat(2, 1fr); }
}

/* ================= 2v2 ================= */
.online-mode { margin: 0 auto 16px; }
.board-mode { margin: 0 auto 12px; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; text-align: left; }
.seat-team { --tc: #60a5fa; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: 12px; padding: 8px 10px; display: grid; gap: 4px; font-size: .85rem; }
.seat-team b { font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--tc); }
.seat-team span.me { font-weight: 800; }
.seat-team i { color: #56648a; }
.wait-actions { display: flex; gap: 8px; justify-content: center; }
.pf-rk-other { font-size: .76rem; color: var(--muted); font-weight: 700; margin-top: 4px; }
.pf-rk-other b { color: var(--text); }
.hm-kind.duo { color: #93c5fd; background: rgba(96,165,250,.12); }
.rk-tier small, .rk-line small { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

/* ================= ads: consent banner, interstitial, rewarded modal ================= */
/* ad-slot: empty until ads.js fills it; min-height keeps layout stable meanwhile. */
.ad-slot { min-height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pf-panel.ad-slot, .pf-key + .ad-slot { background: var(--panel); border: 1px dashed var(--line); border-radius: 16px; margin-top: 14px; padding: 10px; }

.ad-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: fadeIn .3s ease both;
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.ad-consent p { margin: 0 0 10px; font-size: .86rem; color: var(--text); }
.ad-consent a { color: var(--accent); }
.ad-consent-btns { display: flex; gap: 8px; justify-content: flex-end; }

.ad-overlay {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,7,15,.82); animation: fadeIn .25s ease both;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.ad-overlay-card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 16px; width: min(420px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.6); text-align: center; }
.ad-overlay-label { font-size: .7rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ad-overlay .ad-slot { background: #0a1122; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.ad-overlay-close { width: 100%; margin-top: 4px; }
.ad-overlay-close:disabled { opacity: .55; cursor: default; }
#adRewardedMsg { text-align: center; margin-top: 8px; }
.ad-watch-btn { margin-top: 10px; width: 100%; }

@media (max-width: 480px) {
  .ad-consent { left: 10px; right: 10px; bottom: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 12px 14px; }
}

.legal-footer { text-align: center; padding: 18px 0 8px; font-size: .74rem; color: var(--muted); }
.legal-footer a { color: var(--muted); text-decoration: none; }
.legal-footer a:hover { color: var(--text); text-decoration: underline; }
.legal-footer span { margin: 0 6px; }

/* On phones the arena is the point, but chrome (keyboard hints, the site
   footer, the battle log) was squeezing it into a tiny box. On the fight screen
   reclaim that vertical space so fit() can size the arena much larger. The
   keyboard-shortcut line is meaningless on a touch device anyway. */
@media (max-width: 720px) {
  .keys { display: none; }
  .app:has(#screen-fight:not([hidden])) .legal-footer { display: none; }
  #screen-fight .log-panel { display: none; }
  .hud { margin-bottom: 6px; }
  .controls { margin-top: 8px; }
}

/* ================= ORIENTATION / SHORT-VIEWPORT ================= */
/* The fight screen must fit the viewport, not grow past it. .app uses
   min-height:100dvh (a floor), so on the fight screen we pin it to exactly
   100dvh — that gives #screen-fight a bounded height, so .arena-wrap gets a
   real "leftover" height and fit() (fightview.js) can size the canvas to fit
   it. Scoped with :has() so menu screens still scroll normally. */
.app:has(#screen-fight:not([hidden])) { height: 100dvh; }
/* Take the arena box's height purely from the flex leftover (basis 0), not
   from the canvas it contains — otherwise the canvas and its box feed each
   other's size and the box never shrinks on a short screen. (No overflow:hidden
   here — it would clip the online pick/result overlays that sit inside.) */
.arena-wrap { flex: 1 1 0; }
/* Safety net if a browser lacks :has(): the canvas still can't exceed its box. */
#arena { max-width: 100%; max-height: 100%; }

/* Landscape phones are WIDE but SHORT, so width breakpoints treat them as
   "desktop" and apply desktop vertical spacing there's no room for. When the
   viewport is short, reclaim vertical space: drop the fight screen's optional
   chrome (keyboard hint, battle log, footer) and tighten the menus. */
@media (max-height: 520px) and (orientation: landscape) {
  .keys, .log-panel, .legal-footer { display: none; }
  .hud { margin-bottom: 6px; }
  .hud-portrait { width: 38px; height: 38px; }
  .hud.multi .hud-portrait { width: 32px; height: 32px; }
  .controls { margin-top: 8px; min-height: 0; }
  /* The arena box is short in landscape, so the online pick/round/over and the
     classic result overlays (normally absolute INSIDE it) would be cramped or
     clipped. Promote them to the full viewport so their cards get real height. */
  .overlay, .result { position: fixed; z-index: 45; }
  .pick-cards { gap: 8px; }
  .pick-card { padding: 8px 8px 10px; }
  .pick-card canvas { width: 56px; height: 56px; }
  .pick-desc { display: none; }
  /* Online lobby + other centred menu cards: small top margin so the top
     (heading / spinner) is never scrolled out of view, and tighter padding. */
  .online-card { margin: 10px auto; padding: 16px 20px; }
  .online-rules { margin-bottom: 12px; }
  .search-ring { width: 56px; height: 56px; margin: 2px auto 8px; }
  .search-ring i + i { inset: 10px; }
  .search-time { font-size: 1.6rem; margin: 0; }
  .search-title { font-size: 1rem; }
  .online-rewards { margin-top: 10px; }
  .profile, .board { padding-top: 2px; }
}