/* Eriband Arena — the interface (Legacy's, with styles/legacy.css; Neon is styles/neon.css on top of it).
   Dark warm backgrounds, copper pixel frames (generated at startup as
   border images: --frame-*), teal accents, red primary buttons.
   Fonts: Press Start 2P (titles), Pixelify Sans (text), Micro 5 (numbers). */

@font-face { font-family: 'Press Start 2P'; src: url('../assets/fonts/press-start-2p.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('../assets/fonts/pixelify-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('../assets/fonts/pixelify-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Micro 5'; src: url('../assets/fonts/micro-5.woff2') format('woff2'); font-display: swap; }
/* Pixelify Sans draws its 2 and 3 almost like an 8 at small sizes: digits in text come from Micro 5 (the
   game's number font), scaled to the letters' height. Only the digits: U+0030-0039. */
@font-face { font-family: 'Eriband Digits'; src: url('../assets/fonts/micro-5.woff2') format('woff2'); font-display: swap; unicode-range: U+0030-0039; size-adjust: 150%; }

/* (Pixelify Sans draws "fi" as one letter that reads as an A: "first" became "Arst"; !important: the font shorthand would reset it) */
*, *::before, *::after { font-variant-ligatures: none !important; }

:root {
  --bg: #120e16;
  --bg-2: #1a141f;
  --panel: #231c29;
  --panel-2: #2c2433;
  --panel-3: #362c3e;
  --inset: #17121b;
  --line: #4b3a3c;
  --copper: #c8692e;
  --copper-hi: #f0a14a;
  --copper-dk: #7a3a1c;
  --teal: #3fe0b8;
  --teal-hi: #8ff5dc;
  --teal-dk: #1d8a72;
  --text: #ece3d6;
  --text-2: #c7b9a8;
  --muted: #8d7f72;
  --red: #b3262c;
  --red-hi: #e0484d;
  --red-dk: #6e1418;
  --gold: #f5c542;
  --good: #5fd068;
  --bad: #e5484d;
  --blue: #3b82f6;
  --blue-hi: #8cc0ff;
  --team-red: #e5484d;
  --team-red-hi: #ff9a9a;
  --rarity-common: #b8b0a4;
  --rarity-rare: #4f9dff;
  --rarity-epic: #b56cff;
  --rarity-legendary: #f5a623;
  --ui-scale: 1;
  --font-title: 'Press Start 2P', monospace;
  --font-text: 'Eriband Digits', 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --font-num: 'Micro 5', 'Pixelify Sans', monospace;
  /* the copper frames (render/frames.js draws them at startup) */
  --frame-panel: var(--fr-copper-panel, none);
  --frame-button: var(--fr-copper-button, none);
  --frame-button-red: var(--fr-copper-button-red, none);
  --frame-tab: var(--fr-copper-tab, none);
  --frame-inset: var(--fr-copper-inset, none);
  --frame-card: var(--fr-copper-card, none);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gap: 12px;
  --radius: 0px;
  --fs-xs: calc(12px * var(--ui-scale));
  --fs-s: calc(14px * var(--ui-scale));
  --fs-m: calc(17px * var(--ui-scale));
  --fs-l: calc(21px * var(--ui-scale));
  --fs-xl: calc(28px * var(--ui-scale));
  --fs-title: calc(clamp(18px, 3.4vw, 34px) * var(--ui-scale));
}

/* An iPhone Home Screen app on iOS 26 with a page shorter than the screen (src/platform/ios-fit.js):
   the top inset is the missing height, the bottom one is 0 (the home bar sits on iOS's own strip).
   Only while the page runs under the status bar (env top > 0); when iOS put the page below a solid
   status bar instead (env top = 0), the usual insets stay. */
:root.ios-gap {
  --safe-t: max(env(safe-area-inset-top, 0px), min(var(--ios-top, 0px), env(safe-area-inset-top, 0px) * 100));
  --safe-b: max(0px, env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) * 100);
}
:root.ios-gap, :root.ios-gap body { background: #1c1723; }
/* The real fix: iOS only gives an installed page the short viewport while the page is shorter than
   the screen, so the page asks for the screen's height (the status bar's height more than 100%);
   iOS then gives it the whole screen and the bottom bar reaches the edge. The min() keeps an opaque
   status bar (top inset 0) at 100%; everywhere else (Android, desktop, a Safari tab) it is 100%.
   (html's overflow is hidden: nothing scrolls by the extra height.) */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))); }
}

/* Colour-blind friendly: Red turns orange */
:root.cb {
  --team-red: #f08a2b;
  --team-red-hi: #ffc58a;
  --red: #b5651d;
  --red-hi: #f08a2b;
}

* { box-sizing: border-box; }
:root { --avatar-bg: #2b2930; } /* behind a player's picture in its frame (dark grey: the banner doesn't show through) */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-m);
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

body { position: fixed; inset: 0; }

input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

#scene, #scene-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 0;
}
#scene-bg { image-rendering: auto; } /* (the new art's painted background, under #scene: render/renderer.js) */

#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  overflow: hidden;
}

#layer-modal { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#layer-modal > * { pointer-events: auto; }

/* ------------------------------------------------------------------ boot */

#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, #2a1a14 0%, var(--bg) 70%);
  transition: opacity 0.4s;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-spin { display: none; }
/* the art pack's logo over the words (shown once it has loaded) */
.boot-logo { display: none; width: min(560px, 86vw); height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5)); }
#boot.has-logo .boot-logo { display: block; }
#boot.has-logo :is(.boot-title, .boot-sub) { display: none; }
.boot-title { font-family: var(--font-title); font-size: clamp(28px, 7vw, 64px); color: var(--copper-hi); text-shadow: 0 4px 0 var(--copper-dk), 0 0 24px rgba(240, 161, 74, 0.35); letter-spacing: 2px; }
.boot-sub { font-family: var(--font-title); font-size: clamp(12px, 2.4vw, 20px); color: var(--teal); letter-spacing: 8px; }
.boot-bar { width: min(260px, 60vw); height: 10px; background: var(--inset); border: 2px solid var(--copper-dk); }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width 0.2s; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--text); }

/* ------------------------------------------------------------- screens */

.screen {
  position: absolute;
  inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: screen-in 0.22s ease-out;
}
.screen.scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.screen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 56px;
}
.screen-head .grow { flex: 1; }
.screen-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 14px 18px; -webkit-overflow-scrolling: touch; }
.screen-foot { display: flex; gap: 10px; justify-content: center; padding: 10px 14px 14px; flex-wrap: wrap; }

.vignette::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  z-index: -1;
}

/* ---------------------------------------------------------- typography */

.title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  color: var(--text);
  letter-spacing: 1px;
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.6);
  margin: 0;
  line-height: 1.25;
}
.title.teal { color: var(--teal); text-shadow: 0 3px 0 var(--teal-dk), 0 0 16px rgba(63, 224, 184, 0.3); }
.title.copper { color: var(--copper-hi); text-shadow: 0 3px 0 var(--copper-dk); }
.h2 { font-family: var(--font-title); font-size: calc(13px * var(--ui-scale)); color: var(--teal); letter-spacing: 1px; margin: 0 0 8px; }
.h3 { font-weight: 700; font-size: var(--fs-m); margin: 0 0 6px; color: var(--text); }
.num { font-family: var(--font-num); font-size: 1.35em; line-height: 0.9; letter-spacing: 0.5px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-s); }
.xs { font-size: var(--fs-xs); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.gold { color: var(--gold); }
.teal { color: var(--teal); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rarity-common { color: var(--rarity-common); }
.rarity-rare { color: var(--rarity-rare); }
.rarity-epic { color: var(--rarity-epic); }
.rarity-legendary { color: var(--rarity-legendary); }
.rarity-normal { color: var(--rarity-common); }

/* -------------------------------------------------------------- layout */

.row { display: flex; align-items: center; gap: var(--gap); }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.grow { flex: 1; min-width: 0; }
.gap-s { gap: 6px; }
.gap-l { gap: 20px; }
.grid { display: grid; gap: var(--gap); }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--ui-scale)), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hidden { display: none !important; }
.mt { margin-top: var(--gap); }
.mb { margin-bottom: var(--gap); }
.max { max-width: 1100px; margin-left: auto; margin-right: auto; width: 100%; }
.max-s { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
.max-m { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }

/* --------------------------------------------------------------- panels */

.panel {
  position: relative;
  background: var(--panel);
  border: 12px solid var(--copper-dk);
  border-image: var(--frame-panel) 12 fill / 12px / 0 stretch;
  padding: 10px 12px;
  image-rendering: pixelated;
  box-shadow: var(--panel-shadow, none);
}
.panel.dark { background: var(--bg-2); }
.panel.flat { border-width: 2px; border-image: none; border-color: var(--line); background: var(--panel-2); }
.panel.inset {
  background: var(--inset);
  border: 6px solid #0c090e;
  border-image: var(--frame-inset) 6 fill / 6px / 0 stretch;
}
.panel > .tab {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 20px 5px;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--fs-s);
  color: var(--text);
  background: var(--panel-2);
  border: 9px solid var(--copper-dk);
  border-image: var(--frame-tab) 9 fill / 9px / 0 stretch;
  z-index: 1;
}
.panel.has-tab { margin-top: 22px; padding-top: 18px; }

.section { margin: 18px 0 8px; }

/* -------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 18px;
  font-family: var(--font-button, var(--font-text));
  font-weight: 700;
  font-size: var(--fs-m);
  letter-spacing: var(--button-spacing, normal);
  color: var(--text);
  background: var(--panel-2);
  border: 9px solid var(--copper-dk);
  border-image: var(--frame-button) 9 fill / 9px / 0 stretch;
  cursor: pointer;
  image-rendering: pixelated;
  outline: none;
  box-shadow: var(--button-shadow, none);
  text-shadow: var(--button-text-shadow, 0 2px 0 rgba(0, 0, 0, 0.6));
  transition: transform 0.06s, filter 0.12s;
  -webkit-appearance: none;
  appearance: none;
}
.btn > * { pointer-events: none; }
.btn:hover:not(:disabled) { filter: brightness(1.18); }
.btn:active:not(:disabled), .btn.pressed { transform: translateY(2px); filter: brightness(0.92); }
.btn:disabled, .btn.disabled { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; }
.btn.primary { border-image-source: var(--frame-button-red); color: var(--primary-text, #ffe9d6); text-shadow: var(--primary-text-shadow, 0 2px 0 rgba(0, 0, 0, 0.6)); }
.btn.teal { color: var(--teal-hi); }
.btn.small { min-height: 34px; padding: 2px 10px; font-size: var(--fs-s); }
.btn.big { min-height: 58px; padding: 8px 28px; font-size: var(--fs-l); }
.btn.block { width: 100%; }
.btn.icon { padding: 4px; min-width: 44px; }
.btn.icon.small { min-width: 34px; }
.btn img, .btn canvas { image-rendering: pixelated; }
.btn .kbd { margin-left: 4px; }
.btn.active { color: var(--teal); filter: brightness(1.2); }
.btn.selected { box-shadow: 0 0 0 2px var(--teal), 0 0 14px rgba(63, 224, 184, 0.45); }
/* the admin panel's preview is on in this browser */
.tuning-badge { position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #3a1d08; border: 2px solid var(--gold); color: var(--gold); box-shadow: 0 2px 0 #000; }
/* a mode the admin panel closed: shown, not enterable (ui/modes.js) */
.btn.mode-closed { opacity: 0.45; filter: grayscale(0.6); }
/* the background chooser (menu > castle button, Settings > Display) */

/* A focus ring for keyboard and controller only */
.nav-visible :focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  box-shadow: 0 0 16px rgba(63, 224, 184, 0.55);
  z-index: 2;
}
:focus { outline: none; }

.link { color: var(--teal); background: none; border: none; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* Key and button hints */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-family: var(--font-num);
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  background: #0d0a10;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
}
.kbd.pad { border-radius: 50%; min-width: 22px; height: 22px; padding: 0; border-bottom-width: 1px; }
.kbd.pad.a { background: #1f6f3f; } .kbd.pad.b { background: #8a1f22; } .kbd.pad.x { background: #1e4fa8; } .kbd.pad.y { background: #a8861e; }
.touch .kbd { display: none; }

/* ---------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tabs .btn { min-height: 38px; font-size: var(--fs-s); padding: 2px 12px; }
.tabs .btn.on { color: var(--teal); filter: brightness(1.25); }
.tabs .btn.on::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -6px; height: 3px; background: var(--teal); }

/* ------------------------------------------------------------ currencies */

.currencies { display: flex; gap: 8px; align-items: center; }
.cur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 4px;
  background: rgba(10, 7, 12, 0.75);
  border: 2px solid var(--line);
  font-family: var(--font-num);
  font-size: 22px;
  line-height: 1;
  min-height: 30px;
}
.cur img { width: 20px; height: 20px; image-rendering: pixelated; }
.icon-img { image-rendering: pixelated; vertical-align: middle; }

/* ------------------------------------------------------------- cards */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 8px;
  background: var(--panel-2);
  border: 9px solid var(--copper-dk);
  border-image: var(--frame-card) 9 fill / 9px / 0 stretch;
  cursor: pointer;
  text-align: center;
  color: var(--text);
  font: inherit;
  min-width: 0;
  image-rendering: pixelated;
}
.card:hover { filter: brightness(1.15); }
.card .portrait { width: 64px; height: 64px; image-rendering: pixelated; }
/* the new art (render/art.js): a portrait drawn at the screen's density takes its size from --pw, unless a
   rule sizes portraits (:where() weighs nothing); an icon <img> of it is scaled smoothly */
:where(canvas.hd) { width: var(--pw); height: auto; }
img.icon-img[src^="assets/art/"] { image-rendering: auto; }
.card .name { font-weight: 700; font-size: var(--fs-s); max-width: 100%; }
.card .sub { font-size: var(--fs-xs); color: var(--muted); }
.card.locked { filter: grayscale(1) brightness(0.55); }
.card.picked { box-shadow: 0 0 0 3px var(--blue), 0 0 12px rgba(59, 130, 246, 0.6); }
/* chosen (a Gauntlet's or a patrol's team, the skin or mascot worn...): a glow, a lift and a tick */
.card.selected { box-shadow: 0 0 0 3px var(--teal), 0 0 16px rgba(63, 224, 184, 0.55); transform: translateY(-2px); background: #2b3a3a; }
.card.selected::after {
  content: '✓';
  position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--teal); color: #10201c; font-weight: 700; font-size: 13px; line-height: 1;
  border: 2px solid #0b1412; pointer-events: none;
}
/* a team grid with every place taken: the champions left out step back */
.grid.cards.full .card:not(.selected) { opacity: 0.5; filter: grayscale(0.6); }
.grid.cards.full .card:not(.selected):hover { opacity: 0.8; }
.card.picked.red { box-shadow: 0 0 0 3px var(--team-red), 0 0 12px rgba(229, 72, 77, 0.6); }
.card.banned::after {
  content: '';
  position: absolute;
  inset: 6px;
  background:
    linear-gradient(45deg, transparent 46%, var(--bad) 46%, var(--bad) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--bad) 46%, var(--bad) 54%, transparent 54%);
  opacity: 0.85;
  pointer-events: none;
}
.card .badge-tl, .card .badge-tr { position: absolute; top: 2px; font-size: var(--fs-xs); }
.card .badge-tl { left: 4px; }
.card .badge-tr { right: 4px; }
.card.holo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 120, 220, 0.25) 35%, rgba(120, 255, 240, 0.25) 50%, rgba(255, 245, 120, 0.25) 65%, transparent 80%);
  background-size: 250% 100%;
  animation: holo 3.5s linear infinite;
  mix-blend-mode: screen;
}
@keyframes holo { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.tier { font-family: var(--font-title); font-size: 9px; color: var(--gold); text-shadow: 0 1px 0 #000; }
.stars { color: var(--gold); letter-spacing: -1px; font-size: var(--fs-xs); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.chip.order { border-color: #d9b45a; color: #f3d58a; }
.chip.wild { border-color: #5fbf4a; color: #9be38a; }
.chip.arcane { border-color: #8a6bff; color: #c3b0ff; }
.chip.shadow { border-color: #8a4b9a; color: #d39be0; }

/* ---------------------------------------------------------------- bars */

.bar {
  position: relative;
  height: 12px;
  background: #0b080d;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px var(--copper-dk);
  overflow: hidden;
}
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--teal); transition: width 0.25s; }
.bar.hp > i { background: linear-gradient(180deg, #7ff07a, #3fae46); }
.bar.hp.low > i { background: linear-gradient(180deg, #ff8a7a, #c8342c); }
.bar.energy > i { background: linear-gradient(180deg, #ffe066, #e0a020); }
.bar.xp > i { background: linear-gradient(180deg, var(--teal-hi), var(--teal-dk)); }
.bar > b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num); font-size: 16px; line-height: 1; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; }
.cb .bar.hp.low > i { background: repeating-linear-gradient(45deg, #c8342c 0 4px, #8a1f22 4px 8px); }
/* the shield after the HP (pale blue), never striped */
.bar.hp > i.sh, .cb .bar.hp > i.sh { background: linear-gradient(180deg, #ffffff, #9fcfff); }

/* --------------------------------------------------------------- modal */

.modal-back {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l));
  background: rgba(5, 3, 7, 0.72);
  animation: fade-in 0.15s ease-out;
}
.modal {
  width: min(560px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  animation: pop-in 0.18s ease-out;
}
.modal.wide { width: min(900px, 100%); }
.modal .modal-body { overflow-y: auto; min-height: 0; padding: 4px 2px; }
.modal .modal-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-top: 12px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- toasts */

#toasts {
  position: fixed;
  z-index: 40;
  left: 50%;
  top: calc(var(--safe-t) + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: min(92vw, 480px);
}
.toast {
  padding: 8px 16px;
  background: var(--panel);
  border: 9px solid var(--copper-dk);
  border-image: var(--frame-tab) 9 fill / 9px / 0 stretch;
  font-size: var(--fs-s);
  text-align: center;
  animation: toast 3s ease forwards;
}
.toast.good { color: var(--good); }
.toast.bad { color: var(--bad); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------- tooltip */

#tooltip {
  position: fixed;
  z-index: 45;
  max-width: min(340px, 90vw);
  padding: 8px 10px;
  background: rgba(20, 15, 24, 0.97);
  border: 8px solid var(--copper-dk);
  border-image: var(--frame-panel) 12 fill / 8px / 0 stretch;
  font-size: var(--fs-s);
  pointer-events: none;
}
#tooltip .tt-title { font-weight: 700; color: var(--teal); margin-bottom: 2px; }

/* --------------------------------------------------------------- forms */

.input {
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  font: inherit;
  color: var(--text);
  background: var(--inset);
  border: 2px solid var(--line);
  outline: none;
}
.input:focus { border-color: var(--teal); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.switch { position: relative; width: 46px; height: 24px; background: var(--inset); border: 2px solid var(--line); flex: none; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--muted); transition: left 0.12s, background 0.12s; }
.switch.on { border-color: var(--teal-dk); }
.switch.on::after { left: 24px; background: var(--teal); }
input[type='range'] { width: 100%; accent-color: var(--teal); min-height: 28px; }
select.input { -webkit-appearance: none; appearance: none; }
/* New passwords (ui/password.js): the show / hide eye, the strength bar, the repeat note */
.pw-wrap { position: relative; display: flex; }
.pw-wrap .input { flex: 1; min-width: 0; padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 0; width: 34px; height: 30px; padding: 0; opacity: 0.75; }
.pw-eye:hover, .pw-eye.on { opacity: 1; }
.pw-eye.on::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: var(--bad); transform: rotate(-35deg); box-shadow: 0 0 0 1px #000; }
.pw-meter { display: flex; flex-direction: column; gap: 4px; }
.pw-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pw-bars i { height: 6px; background: var(--inset); border: 1px solid #000; }
.pw-meter.lv0 .pw-bars i.on { background: var(--bad); }
.pw-meter.lv1 .pw-bars i.on { background: var(--copper-hi); }
.pw-meter.lv2 .pw-bars i.on { background: var(--gold); }
.pw-meter.lv3 .pw-bars i.on { background: var(--good); }
.pw-meter .warn { color: var(--copper-hi); }

/* ------------------------------------------------------------- lists */

.list { display: flex; flex-direction: column; gap: 6px; }
.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  min-height: 48px;
  color: var(--text);
  font: inherit;
  text-align: left;
  width: 100%;
}
button.list-item { cursor: pointer; }
button.list-item:hover { border-color: var(--copper); }
.list-item.done { opacity: 0.6; }

/* ------------------------------------------------------- menu (title) */

.menu-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 12px; min-height: 0; }
.menu-logo { text-align: center; }
.menu-logo .t1 { font-family: var(--font-title); font-size: clamp(30px, 7.2vw, 72px); color: var(--copper-hi); text-shadow: 0 5px 0 var(--copper-dk), 0 8px 0 #000, 0 0 40px rgba(240, 140, 60, 0.35); letter-spacing: 3px; }
.menu-logo .t2 { font-family: var(--font-title); font-size: clamp(11px, 2.2vw, 20px); color: var(--teal); letter-spacing: 10px; margin-top: 8px; }
.menu-buttons { display: grid; grid-template-columns: repeat(2, minmax(150px, 230px)); gap: 10px; }
/* the other modes: two centred rows between the bottom corners' boxes, never under them */
.menu-modes { max-width: max(320px, min(720px, calc(100vw - 580px))); margin-left: auto; margin-right: auto; }
.menu-buttons .btn { width: 100%; }
.menu-buttons .btn.wide { grid-column: span 2; }
.menu-corner { position: absolute; display: flex; gap: 8px; align-items: center; }
.menu-corner.tl { top: 10px; left: 12px; }
.menu-corner.tr { top: 10px; right: 12px; }
.menu-corner.bl { bottom: 10px; left: 12px; }
.menu-corner.br { bottom: 10px; right: 12px; }
/* phones: the online box shrinks to one line beside the version row */
@media (max-width: 700px) {
  .menu-corner.br { max-width: calc(100vw - 210px); }
  .menu-corner.br .online-box { min-width: 0; max-width: 100%; padding: 4px 8px; }
  .menu-corner.br .online-box .h2 { display: none; }
  .menu-corner.br .online-box > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  /* the top row: currencies and the icon buttons, tighter, wrapping rather than running off the screen */
  .menu-corner.tr { left: 8px; right: 8px; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .menu-corner.tr .currencies { gap: 4px; }
  .menu-corner.tr .cur { padding: 2px 6px 2px 3px; }
  .menu-corner.tr .btn.icon { min-width: 40px; min-height: 40px; }
}
.version { font-family: var(--font-num); font-size: 18px; color: var(--muted); }
.online-box { min-width: 160px; font-size: var(--fs-s); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 6px currentColor; vertical-align: middle; }
.dot.on { background: var(--good); color: var(--good); }
.dot.off { background: var(--bad); color: var(--bad); }

/* ------------------------------------------------------- playercard */

.playercard { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 1; image-rendering: pixelated; overflow: hidden; border: 3px solid #000; box-shadow: 0 0 0 2px var(--copper-dk); }
.playercard .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* a new-art picture still on its way (render/pixel.js later): a faint pulse, then it fades in */
canvas.art-wait { background: rgba(255, 255, 255, 0.04); animation: art-wait 1.2s ease-in-out infinite; }
canvas.art-in { animation: art-in 0.25s ease-out; }
@keyframes art-wait { 50% { background: rgba(255, 255, 255, 0.09); } }
@keyframes art-in { from { opacity: 0; } }
/* the art pack's emotes, medals, frames, chests, eggs (render/art.js extraPic): still, or a row of frames stepped through */
.art-pic { display: inline-block; flex: none; vertical-align: middle; object-fit: contain; image-rendering: auto !important; } /* (shown smaller than painted: smoothed, whatever the spot's pixelated rule) */
.art-sprite { aspect-ratio: 1; background-repeat: no-repeat; background-position: 0 0; animation-name: art-sprite; animation-iteration-count: infinite; }
@keyframes art-sprite { to { background-position-x: 100%; } }
/* the new art's small marks: a faction's crest in its chip, a damage type's icon, an arena's thumbnail in the
   setup's picker, the week's rule's badge */
.crest-pic, .dt-pic { display: inline-block; vertical-align: -3px; margin-right: 3px; object-fit: contain; filter: drop-shadow(0 1px 0 #000); }
.list-item > .opt-thumb { flex: none; width: 96px; height: 54px; object-fit: cover; border: 2px solid #000; border-radius: 4px; margin-right: 10px; }
.h3-mod { display: flex; align-items: center; gap: 10px; }
.h3-mod > .mod-pic { flex: none; filter: drop-shadow(0 2px 0 #000); }
/* a champion's collection card in the new art (widgets.js collectedCard): the portrait in the frame's window
   (x 32..352, y 40..360 of 384x512), the name on its plate, the chains over a locked one */
.cc-card { position: relative; flex: none; aspect-ratio: 384 / 512; }
.cc-card > .cc-win { position: absolute; left: 8.3%; top: 7.8%; width: 83.4%; height: 62.5%; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #3a3048, #120e17 80%); }
.cc-card > .cc-win > canvas { width: 96% !important; height: auto !important; }
.cc-card > .cc-frame, .cc-card > .cc-lock { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cc-card > .cc-name { position: absolute; left: 12%; right: 12%; top: 76%; height: 15%; display: grid; place-items: center; text-align: center;
  font-family: var(--font-title); color: #f6ecd8; text-shadow: 0 2px 0 #000; }
.cc-card > .cc-foil { position: absolute; inset: 0; width: 100% !important; height: 100% !important; mix-blend-mode: screen; opacity: 0.75; pointer-events: none; }
.cc-card.locked > .cc-win { filter: grayscale(1) brightness(0.45); }
/* an item in its slot frame (widgets.js framedItem) */
.if-slot { position: relative; display: inline-grid; place-items: center; flex: none; }
.if-slot > .if-frame { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; }
/* the shop's openings in the new art (screens/shop.js): the chest bursting, the egg hatching, a card's flip glow
   over it (gone after a second) and a Holo card's rainbow sheen */
.shop-open { margin: 0 auto; }
/* A chest's cards (ui/screens/shop.js revealChest): dealt face down, then each turns over; the better the card, the more it does */
.cr-card { --cr: var(--rarity-common, #a9afb7); animation: cr-deal 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.cr-rare { --cr: var(--rarity-rare, #4fa8ff); }
.cr-epic { --cr: var(--rarity-epic, #b770ff); }
.cr-legendary { --cr: var(--rarity-legendary, #ffb52f); }
.cr-holo { --cr: #ff9ae0; }
.cr-slot { position: relative; isolation: isolate; perspective: 800px; align-self: center; }
.cr-flip { position: relative; transform-style: preserve-3d; transition: transform 0.42s cubic-bezier(0.3, 0.7, 0.3, 1.15); }
.cr-face, .cr-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cr-back { position: absolute; inset: 0; transform: rotateY(180deg); background-size: 1400% 100%; background-position: 0 0; background-repeat: no-repeat; image-rendering: pixelated; }
.cr-down .cr-flip { transform: rotateY(180deg); }
/* (what's under the card stays hidden until it turns over; its place is kept, so nothing moves) */
.cr-card > :not(.cr-slot) { transition: opacity 0.25s; }
.cr-down > :not(.cr-slot), .cr-hidden > * { opacity: 0; }
.cr-hidden { animation: none; opacity: 0; }
.cr-up { opacity: 1; }
.card.cr-hidden.cr-up, .card:not(.cr-card).cr-up { animation: cr-deal 0.32s ease-out both; }
/* the glow behind it before it turns over */
.cr-tease .cr-slot::after { content: ''; position: absolute; inset: -5px; z-index: -1; border-radius: 10px; background: var(--cr); filter: blur(9px); animation: cr-tease 0.45s ease-in-out infinite alternate; }
.cr-tease.cr-legendary .cr-flip { animation: cr-rattle 0.09s linear infinite; }
/* the flash as it lands, and the light it keeps */
.cr-hit .cr-slot::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 6px; background: #fff; pointer-events: none; animation: cr-flash 0.34s ease-out both; }
.cr-hit .cr-slot::after { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: 8px; background: var(--cr); filter: blur(6px); opacity: 0; animation: cr-burn 0.7s ease-out both; }
.cr-hit.cr-normal .cr-slot::after { opacity: 0; animation: none; }
.cr-hit.cr-rare .cr-flip, .cr-hit.cr-epic .cr-flip { animation: cr-pop 0.34s cubic-bezier(0.2, 1.4, 0.4, 1); }
.cr-hit.cr-legendary .cr-flip, .cr-hit.cr-holo .cr-flip { animation: cr-pop-big 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); }
/* a legendary: turning rays behind it */
.cr-hit.cr-legendary .cr-slot::after {
  inset: -46%; border-radius: 50%; filter: none; animation: cr-rays-in 0.5s ease-out both, cr-spin 7s linear infinite;
  background: repeating-conic-gradient(rgba(255, 214, 110, 0.55) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%);
}
.cr-shake { animation: cr-shake 0.42s linear; }
@keyframes cr-deal { from { opacity: 0; transform: translateY(-26px) scale(0.72); } to { opacity: 1; transform: none; } }
@keyframes cr-tease { from { opacity: 0.25; } to { opacity: 0.95; } }
@keyframes cr-rattle { 0% { transform: rotateY(180deg) translateX(-1px) rotate(-0.8deg); } 50% { transform: rotateY(180deg) translateX(1px) rotate(0.8deg); } 100% { transform: rotateY(180deg) translateX(-1px) rotate(-0.8deg); } }
@keyframes cr-flash { from { opacity: 0.9; } to { opacity: 0; } }
@keyframes cr-burn { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes cr-pop { 50% { transform: scale(1.09); } }
@keyframes cr-pop-big { 45% { transform: scale(1.2); } }
@keyframes cr-rays-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-spin { to { transform: rotate(360deg); } }
@keyframes cr-shake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 1px); } }
@media (prefers-reduced-motion: reduce) { .cr-card, .cr-shake, .cr-tease .cr-flip, .cr-hit .cr-flip { animation: none !important; } }
/* the match's end in the new art (screens/results.js): the title on its ribbon, the grade's badge, the MVP's crown */
.res-ribbon { position: relative; display: grid; justify-items: center; width: 480px; max-width: 100%; }
.res-ribbon > .res-ribbon-art { grid-area: 1 / 1; width: 100% !important; height: auto !important; aspect-ratio: 10 / 3 !important; }
/* (the word on the ribbon's band: its middle 55 % down the victory's picture, 58 % the draw's, 45 % the defeat's, over its shield) */
.res-ribbon > .title { grid-area: 1 / 1; align-self: start; margin: 12.75% 0 0; padding: 0 20%; font-size: clamp(18px, 5vw, 30px) !important; line-height: 1.2;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; color: #fff6dc; text-shadow: 0 3px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8); z-index: 1; }
.res-ribbon.draw > .title { margin-top: 13.6%; color: #2a1e14; text-shadow: 0 2px 0 rgba(255, 246, 220, 0.6); }
.res-ribbon.defeat > .title { margin-top: 9.75%; }
.res-grade-art { margin: 4px auto; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5)); }
.res-mvp { position: relative; display: inline-block; padding-top: 18px; }
.res-mvp > .res-mvp-crown { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 1; }
/* the new art's calling cards (render/banners.js): painted pictures, scaled smoothly whatever the rule above them
   says; an animated card whose picture stands still glints */
img.card-art { object-fit: cover; image-rendering: auto !important; }
img.card-glint { animation: card-glint 3.2s ease-in-out infinite; }
@keyframes card-glint { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.18) saturate(1.15); } }
.pf-callcard.locked img.card-glint { animation: none; }
@media (prefers-reduced-motion: reduce) { img.card-glint { animation: none; } }
.playercard .pc-emblem { position: absolute; left: 2.5%; top: 10%; height: 80%; aspect-ratio: 1; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000); }
.playercard .pc-text { position: absolute; left: 25%; right: 14%; top: 14%; bottom: 14%; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.playercard .pc-name { font-family: var(--font-title); font-size: clamp(10px, 2.4vw, 17px); color: #fff; }
.playercard .pc-clan { color: var(--gold); margin-right: 6px; }
.playercard .pc-sub { font-size: var(--fs-s); color: var(--text-2); margin-top: 4px; }
.playercard .pc-rank { position: absolute; right: 2.5%; top: 12%; height: 76%; aspect-ratio: 1; image-rendering: pixelated; }

/* --------------------------------------------------------- battle HUD */

.battle { position: absolute; inset: 0; }
.battle .hud-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 10px; pointer-events: none; }
.battle .hud-top > * { pointer-events: auto; }
.battle .turn-banner { text-align: center; }
.battle .turn-banner .t { font-family: var(--font-title); font-size: calc(11px * var(--ui-scale)); color: var(--text); text-shadow: 0 2px 0 #000; }
.battle .timer { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; font-family: var(--font-num); font-size: 30px; line-height: 1; color: var(--text); text-shadow: 0 2px 0 #000; }
.battle .timer.idle { visibility: hidden; }
.battle .timer.low .timer-n { color: var(--bad); animation: blink 0.5s steps(2) infinite; }
/* the time left, draining live: green, then gold, then red; framed in the colour of the side whose turn it is */
.battle .timer-bar { width: 64px; height: 8px; background: #120d14; border: 2px solid var(--blue-hi); box-shadow: 0 2px 0 #000; overflow: hidden; }
.battle .timer.red .timer-bar { border-color: var(--team-red-hi); }
.battle .timer-bar i { display: block; height: 100%; width: 100%; background: var(--good); transition: width 0.1s linear, background-color 0.3s; }
.battle .timer[data-level='mid'] .timer-bar i { background: var(--gold); }
.battle .timer[data-level='low'] .timer-bar i { background: var(--bad); }
@keyframes blink { 50% { opacity: 0.4; } }
.cells { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); z-index: 2; }
.cell-btn { position: relative; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; outline: none; touch-action: none; }
.cell-btn:disabled { cursor: default; }
.nav-visible .cell-btn:focus-visible { outline: none; box-shadow: none; }
/* The rosters (as in the old Tic Tac Tactics): a panel per side beside the board, glowing in its team's
   colour while it acts, dimmed while it waits; a head (mark, name, who plays it, the turn pill) and a row
   per hero (portrait, name, factions, tier, a note, HP and energy, the HP number and its shield, an "i") */
.roster { position: absolute; display: flex; flex-direction: column; gap: 5px; z-index: 3; overflow-y: auto; overflow-x: visible; }
.roster.left { left: 8px; }
.roster.right { right: 8px; }
.battle:not(.narrow) .roster { padding: 8px; background: rgba(20, 15, 24, 0.9); border: 2px solid #000; border-top: 3px solid var(--line); box-shadow: inset 0 0 0 1px var(--line); opacity: 0.86; transition: opacity 0.2s, box-shadow 0.2s; }
.battle:not(.narrow) .roster.p0 { border-top-color: var(--blue); }
.battle:not(.narrow) .roster.p1 { border-top-color: var(--team-red); }
.battle:not(.narrow) .roster.active { opacity: 1; }
.battle:not(.narrow) .roster.p0.active { box-shadow: inset 0 0 0 1px rgba(76, 134, 240, 0.55), 0 0 24px rgba(76, 134, 240, 0.35); }
.battle:not(.narrow) .roster.p1.active { box-shadow: inset 0 0 0 1px rgba(224, 74, 62, 0.55), 0 0 24px rgba(224, 74, 62, 0.35); }
.battle:not(.narrow) .roster.mine.p0 { background: rgba(25, 38, 62, 0.92); }
.battle:not(.narrow) .roster.mine.p1 { background: rgba(62, 31, 25, 0.92); }
.roster-head { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.rh-mark { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; font-weight: 700; color: #fff; border: 2px solid #000; }
.rh-mark.p0 { background: var(--blue); }
.rh-mark.p1 { background: var(--team-red); }
.rh-who { flex: 1; min-width: 0; }
.rh-who .pname { font-family: var(--font-title); font-size: calc(10px * var(--ui-scale)); color: var(--text); }
.roster.p0 .rh-who .pname { color: var(--blue-hi); }
.roster.p1 .rh-who .pname { color: var(--team-red-hi); }
.rh-who .psub { font-size: var(--fs-xs); color: var(--text-2); }
.turn-pill { flex: 0 0 auto; padding: 3px 8px; font-size: var(--fs-xs); font-weight: 700; color: #1c1206; background: linear-gradient(180deg, #ffe7a6, var(--gold) 55%, #c98f2a); border: 2px solid #000; animation: turn-glow 1.4s ease-in-out infinite; }
@keyframes turn-glow { 50% { box-shadow: 0 0 2px rgba(233, 185, 73, 0.2); } 0%, 100% { box-shadow: 0 0 12px rgba(233, 185, 73, 0.55); } }
.roster-hero {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 7px;
  align-items: center;
  width: 100%;
  padding: 5px 22px 5px 6px;
  background: rgba(14, 10, 18, 0.7);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.narrow .roster-hero { width: calc(170px * var(--ui-scale)); }
.roster-hero:hover { box-shadow: inset 0 0 0 1px #6a5e6a; }
.roster-hero canvas { width: 40px; height: 40px; image-rendering: pixelated; grid-row: span 2; }
.rh-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rh-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.roster-hero .nm { font-size: var(--fs-xs); font-weight: 700; }
.rh-facs { display: flex; gap: 2px; flex: 0 0 auto; }
.rh-facs .ct-fac { position: static; width: 8px; height: 8px; }
.rh-tier { flex: 0 0 auto; font-size: 10px; }
.rh-note { font-size: 11px; color: var(--text-2); }
.rh-note.good { color: var(--good); }
.rh-note.gold { color: var(--gold); }
.rh-note.teal { color: var(--teal-hi); }
.rh-note.ult { color: #ffb066; font-weight: 700; }
.rh-num { font-family: var(--font-num); font-size: 20px; line-height: 1; color: var(--text); text-align: right; }
.rh-shield { margin-left: 3px; font-size: 15px; color: #bfe4ff; }
.rh-bars { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 2px; }
.roster-hero .bar { height: 8px; }
.roster-hero .bar > b { display: none; }
.roster-hero .bar.energy { height: 5px; border-width: 1px; }
.roster-hero .bar.energy.full > i { background: linear-gradient(180deg, #fff1a0, #ff9a3a); animation: blink 0.8s steps(2) infinite; }
.rh-info { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 16px; height: 16px; font: 700 11px/1 var(--font-text); color: var(--text); background: var(--panel-3); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--copper-dk); cursor: help; }
.rh-info:hover { color: #1c1206; background: var(--gold); box-shadow: none; }
.roster-hero.dead { opacity: 0.4; filter: grayscale(1); }
.roster-hero.active { box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(233, 185, 73, 0.3); }
.roster-hero.blue { border-left: 4px solid var(--blue); }
.roster-hero.red { border-left: 4px solid var(--team-red); }
.narrow .rh-info, .narrow .rh-num, .narrow .rh-note { display: none; }

/* The action bar: square buttons in the game's copper pixel frame on a framed plate, each champion's own
   icons, a count of targets in reach, the cooldown, the Ultimate filling up like a liquid and glowing when full */
.action-bar { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; z-index: 4; padding: 4px 8px; flex-wrap: nowrap; }
.action-bar:not(:empty) { background: var(--panel); border: 12px solid var(--copper-dk); border-image: var(--frame-panel) 12 fill / 12px / 0 stretch; image-rendering: pixelated; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); }
.act-round {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  color: var(--text);
  background: var(--panel-2);
  border: 9px solid var(--copper-dk);
  border-image: var(--frame-button) 9 fill / 9px / 0 stretch;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.06s, filter 0.12s;
}
.act-round:hover:not(:disabled) { filter: brightness(1.18); }
.act-round:active:not(:disabled) { transform: translateY(2px); filter: brightness(0.92); }
.act-round:disabled { filter: grayscale(0.7) brightness(0.6); cursor: default; }
.act-ico { position: relative; z-index: 1; display: grid; place-items: center; }
.act-ico canvas, .act-ico img { width: 30px; height: 30px; image-rendering: pixelated; }
/* the action being aimed: the red frame (attack), a purple glow (skill), an ember glow (Ultimate) */
.act-round.on { border-image-source: var(--frame-button-red); }
.act-round.skl.on { box-shadow: 0 0 0 2px #a57cff, 0 0 14px rgba(165, 124, 255, 0.6); }
.act-round.ult.on { box-shadow: 0 0 0 2px #ff8a1e, 0 0 14px rgba(255, 138, 30, 0.6); }
.act-round.ult.full:not(:disabled) { box-shadow: 0 0 0 2px #ff8a1e, 0 0 16px 4px rgba(255, 150, 40, 0.55); animation: ult-pulse 1s steps(2) infinite; }
@keyframes ult-pulse { 50% { box-shadow: 0 0 0 2px #ffd36b, 0 0 6px 1px rgba(255, 150, 40, 0.35); } }
.act-energy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; background: linear-gradient(rgba(255, 190, 70, 0.55), rgba(255, 120, 30, 0.8)); box-shadow: 0 -2px 0 #ffd36b; transition: height 0.4s steps(6); }
.act-badge { position: absolute; right: -14px; top: -14px; z-index: 2; min-width: 18px; height: 18px; padding: 0 3px; display: grid; place-items: center; font-family: var(--font-num); font-size: 15px; line-height: 1; color: #fff; background: var(--red); border: 2px solid #000; }
.act-badge.cd { background: #5a4a7a; }
.act-key { position: absolute; left: 50%; bottom: -15px; z-index: 2; transform: translateX(-50%); pointer-events: none; }
.act-key:empty { display: none; }
.act-key .kbd { font-size: 9px; min-width: 14px; padding: 0 2px; }
.act-round.ghost { width: 46px; height: 46px; border-width: 7px; border-image-width: 7px; }
/* the new art (render/art.js): the spell's picture fills the whole square, the button's frame drawn over its
   edges (on a layer of its own, without its middle); the Ultimate's charge (--fill): a dark veil over what is
   not filled yet, a gold line at its level. --fw: the frame's width. */
.act-round.art { --fw: 9px; border-image: none; border-color: transparent; background: #120e16; }
.narrow .act-round.art { --fw: 7px; }
.act-round.art .act-ico { position: absolute; inset: calc(-1 * var(--fw)); z-index: 0; }
.act-round.art .act-ico canvas, .narrow .act-round.art .act-ico canvas { width: 100%; height: 100%; image-rendering: auto; }
.act-round.art::after { content: ''; position: absolute; inset: calc(-1 * var(--fw)); z-index: 2; pointer-events: none; border: var(--fw) solid transparent; border-image: var(--frame-button) 9 / var(--fw) / 0 stretch; image-rendering: pixelated; }
.act-round.art.on::after { border-image-source: var(--frame-button-red); }
.act-round.art .act-energy { left: calc(-1 * var(--fw)); right: calc(-1 * var(--fw)); bottom: calc(-1 * var(--fw)); z-index: 1; height: calc((100% + 2 * var(--fw)) * var(--fill, 0)) !important; background: none; }
.act-veil { position: absolute; left: calc(-1 * var(--fw)); right: calc(-1 * var(--fw)); top: calc(-1 * var(--fw)); z-index: 1; height: calc((100% + 2 * var(--fw)) * (1 - var(--fill, 0))); background: rgba(10, 6, 14, 0.62); pointer-events: none; transition: height 0.4s steps(6); }
.act-round.art .act-badge, .act-round.art .act-key { z-index: 3; }
.act-round.ghost .act-ico canvas { width: 22px; height: 22px; }
.act-sep { width: 2px; align-self: stretch; margin: 2px 2px; background: linear-gradient(transparent, var(--copper-dk), transparent); }
.narrow .act-round { width: 48px; height: 48px; border-width: 7px; border-image-width: 7px; }
.narrow .act-round .act-ico canvas { width: 26px; height: 26px; }
.narrow .act-round.ghost { width: 40px; height: 40px; }
.narrow .action-bar { gap: 4px; padding: 2px 4px; }
/* an action's bubble: icon, name and kind, what it does, the energy, and whether it can be used now */
.at-tip { width: 250px; max-width: 70vw; white-space: normal; border-left: 6px solid var(--line); margin: -6px -8px; }
.at-tip.a-atk { border-left-color: var(--team-red); }
.at-tip.a-skl { border-left-color: #8f55e0; }
.at-tip.a-ult { border-left-color: #ff8a1e; }
.at-tip.a-def { border-left-color: var(--blue); }
.at-head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--panel-3); border-bottom: 2px solid var(--line); }
.at-tip.a-ult .at-head { background: linear-gradient(90deg, #3e1f19, var(--panel-3)); }
.at-tip.a-skl .at-head { background: linear-gradient(90deg, #2a193e, var(--panel-3)); }
.at-tip.a-atk .at-head { background: linear-gradient(90deg, #3e1f19, var(--panel-3)); }
.at-ico { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--inset); border: 2px solid #000; }
.at-ico canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.at-head b { display: block; font-size: var(--fs-s); line-height: 1.3; }
.at-head small { font-size: var(--fs-xs); color: var(--text-2); }
.at-text { margin: 0; padding: 6px 9px 4px; font-size: var(--fs-xs); line-height: 1.35; }
.at-energy { height: 8px; margin: 2px 9px 4px; background: var(--inset); border: 2px solid #000; }
.at-energy i { display: block; height: 100%; background: linear-gradient(90deg, #ff8a1e, #ffd36b); }
.at-hint { margin: 2px 9px 8px; padding: 3px 6px; font-size: var(--fs-xs); font-weight: 700; border: 2px solid; background: var(--inset); }
.at-hint.ok { color: #90d59a; border-color: #5a8a5a; }
.at-hint.no { color: #de8f87; border-color: #8a4a44; }
/* a status icon's bubble: what it is and who gave it */
.buff-spot { z-index: 3; cursor: help; }
.bt { min-width: 180px; max-width: 260px; white-space: normal; }
.bt-head b { font-size: var(--fs-s); }
.bt.good .bt-head b { color: var(--good); }
.bt.bad .bt-head b { color: var(--bad); }
.bt-desc { margin: 3px 0; }
.bt-from { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.bt-from small { color: var(--muted); font-size: 11px; }
.bt-src { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; }
.bt-src canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.bt-src.p0 { color: var(--blue-hi); }
.bt-src.p1 { color: var(--team-red-hi); }
/* Auto fight and the speed, in the top bar (vs the CPU) */
.hud-tools { display: flex; gap: 6px; align-items: center; }
.hud-tools[hidden] { display: none; }
.hud-auto.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(245, 197, 66, 0.4); }
.hud-speed { min-width: 44px; font-family: var(--font-num); font-size: 18px; }
.narrow .hud-auto .lbl { display: none; }
.narrow .hud-tools { gap: 4px; }
.narrow .hud-speed { min-width: 34px; font-size: 15px; }

.hint-line { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-size: var(--fs-s); color: var(--text-2); text-shadow: 0 2px 0 #000; z-index: 3; pointer-events: none; white-space: nowrap; }

.next-strip { display: flex; gap: 3px; align-items: center; }
/* Arena Rush (a prototype) */
.rush-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; gap: 12px; align-items: start; }
.rush-player { display: flex; flex-direction: column; gap: 3px; padding: 5px 7px; background: var(--panel-3); border: 2px solid #000; }
.rush-player.me { border-color: var(--teal); }
.rush-player.vs { box-shadow: inset 0 0 0 2px var(--red); }
.rush-player.out { opacity: 0.45; }
.rush-board { display: grid; grid-template-columns: repeat(3, 84px); gap: 4px; justify-content: center; padding: 6px; background: #4a3e48; border: 3px solid #1a1220; }
.rush-sq { display: grid; place-items: center; height: 84px; background: #7a6e78; border-top: 2px solid #8e8290; cursor: pointer; }
.rush-sq.dk { background: #6a5e6a; border-top-color: #7e7280; }
.rush-sq:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.rush-unit, .rush-card:not(:disabled), .rush-stash-item { cursor: grab; touch-action: none; }
.rush-dragging, .rush-dragging * { cursor: grabbing !important; }
.rush-over { box-shadow: inset 0 0 0 3px var(--gold) !important; }
.rush-unit { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; background: rgba(0, 0, 0, 0.25); border: 2px solid #000; cursor: pointer; }
.rush-unit canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.rush-unit.sel { border-color: var(--teal); box-shadow: 0 0 10px rgba(63, 224, 184, 0.6); }
.rush-unit.t2 { border-color: var(--rarity-rare); }
.rush-unit.t3 { border-color: var(--gold); }
.rush-tier { position: absolute; left: 2px; top: 1px; font: 700 10px var(--font-text); color: var(--gold); text-shadow: 0 1px 0 #000; }
.rush-bench { display: flex; flex-wrap: wrap; gap: 4px; min-height: 64px; padding: 4px; background: var(--inset); border: 2px solid #000; cursor: pointer; }
.rush-slot { width: 60px; height: 60px; border: 2px dashed var(--line); }
.rush-shop { grid-column: 1 / -1; }
.rush-shop-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rush-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; color: var(--text); font: inherit; background: var(--panel-3); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.rush-card.c2 { box-shadow: inset 0 0 0 2px var(--rarity-rare); }
.rush-card.c3 { box-shadow: inset 0 0 0 2px var(--rarity-epic); }
.rush-card canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.rush-card:disabled { opacity: 0.5; cursor: default; }
.rush-card.empty { justify-content: center; color: var(--muted); }
.chip.faded { opacity: 0.55; }
.rush-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) {
  .rush-grid { grid-template-columns: 1fr; }
  .rush-board { grid-template-columns: repeat(3, 72px); }
  .rush-sq { height: 72px; }
  .rush-shop-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* maintenance mode (ui/maintenance.js): the screen over the game for players, a banner for admins */
.maint { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(8, 6, 12, 0.92); }
.maint-box { width: min(460px, 100%); text-align: center; }
.maint-banner { position: fixed; left: 50%; top: calc(4px + var(--safe-t)); transform: translateX(-50%); z-index: 95; padding: 3px 10px; color: #fff1d8; background: #8a1f2a; border: 2px solid #000; pointer-events: none; }
/* screen transitions (ui/transition.js): an encounter and a fade through black */
.screen-fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.screen-fx.fade { background: #08060c; opacity: 0; transition: opacity 0.3s; }
.screen-fx.fade.on { opacity: 1; }
.screen-fx.flash { background: #fff1d8; opacity: 0; transition: opacity 0.08s; }
.screen-fx.flash.on { opacity: 0.85; }
.screen-fx.bars i { position: absolute; left: 0; width: 100%; height: 12.6%; background: #08060c; animation: fx-bar-l 0.36s steps(6, end) both; }
.screen-fx.bars i.r { animation-name: fx-bar-r; }
.screen-fx.bars.out { transition: opacity 0.35s; opacity: 0; }
@keyframes fx-bar-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes fx-bar-r { from { transform: translateX(100%); } to { transform: none; } }
/* the campaign: chapters, each a path of fights */
.camp-chapter.locked { opacity: 0.6; }
.camp-story { font-style: italic; color: var(--text); }
.camp-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 0; }
.camp-link { flex: 0 0 22px; height: 4px; background: var(--line); }
.camp-link.on { background: var(--copper); }
.camp-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 112px; padding: 8px 4px 6px; color: var(--text); font: inherit; background: var(--panel-3); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--copper-dk); cursor: pointer; }
.camp-node:hover:not([disabled]), .camp-node:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); outline: none; }
.camp-node.next { box-shadow: inset 0 0 0 2px var(--teal), 0 0 10px rgba(63, 224, 184, 0.45); }
.camp-node.boss { background: linear-gradient(rgba(138, 31, 42, 0.35), var(--panel-3)); }
.camp-node.locked { cursor: default; opacity: 0.55; }
.camp-pic { display: grid; place-items: center; width: 44px; height: 44px; background: var(--inset); border: 2px solid #000; }
.camp-pic canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.camp-name { text-align: center; line-height: 1.2; min-height: 2.4em; }
.camp-crown { position: absolute; top: -9px; right: -6px; }
.camp-stars i { font-style: normal; color: var(--line); letter-spacing: 1px; }
.camp-stars i.on { color: var(--gold); }
.camp-stars.big { font-size: 22px; }
/* the Daily Challenge */
.daily-champ { gap: 2px; width: 64px; }
.daily-champ canvas { width: 48px; height: 48px; image-rendering: pixelated; background: var(--inset); border: 2px solid #000; }
.daily-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; background: var(--panel-3); border: 2px solid #000; }
.daily-row.me { border-color: var(--teal); }
.daily-chart { display: flex; align-items: flex-end; gap: 3px; height: 80px; padding: 4px; background: var(--inset); border: 2px solid #000; }
.daily-chart i { flex: 1; min-width: 4px; background: var(--copper); }
.daily-chart i.won { background: var(--teal); }
/* a champion's mastery path (collection) */
.path-step { display: flex; align-items: center; gap: 10px; }
.path-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; font: 700 12px var(--font-text); color: var(--muted); background: var(--inset); border: 2px solid var(--line); }
.path-step.done .path-n { color: #1a1220; background: var(--teal); border-color: #000; }
.path-lore { margin: 2px 0 0; font-style: italic; }
/* the draft's saved-teams dropdown, and a plan's champions in the pool */
.team-menu { position: relative; }
.team-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; gap: 4px; min-width: 260px; max-height: 320px; overflow-y: auto; padding: 6px; }
.team-menu-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 7px; color: var(--text); font: inherit; text-align: left; background: var(--panel-3); border: 2px solid #000; cursor: pointer; }
.team-menu-row:hover, .team-menu-row:focus-visible { border-color: var(--teal); outline: none; }
.team-menu-row canvas { width: 24px; height: 24px; image-rendering: pixelated; background: rgba(0, 0, 0, 0.4); }
.champ-tile.planned { box-shadow: inset 0 0 0 2px var(--gold); }
.ct-plan { position: absolute; left: 4px; bottom: 4px; color: var(--gold); font-size: 14px; text-shadow: 0 1px 0 #000; }
/* the turn timeline under the turn text: this turn and the next four, in their side's colour */
.turn-line { display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
/* the dragon's Seals: blue's from the left, red's from the right, what's left between them */
.seal-strip { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 700; color: #ffd98a; }
.seal-strip .pips { display: inline-flex; gap: 3px; }
.seal-strip .pips i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid #ffd98a; background: rgba(0, 0, 0, 0.45); }
.seal-strip .pips i.blue { background: #6fb8ff; border-color: #cfe7ff; box-shadow: 0 0 6px #6fb8ff; }
.seal-strip .pips i.red { background: #ff7a6b; border-color: #ffd0ca; box-shadow: 0 0 6px #ff7a6b; }
.seal-strip small { margin-left: 4px; font-weight: 500; color: #cfc7ba; }
.seal-strip.warned { color: #ff9c5a; animation: seal-warn 1s ease-in-out infinite alternate; }
@keyframes seal-warn { from { opacity: 0.65; } to { opacity: 1; } }
.tl-chip { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 32px; height: 22px; padding: 0 5px; font: 700 13px var(--font-text); color: var(--text); background: rgba(16, 12, 22, 0.85); border: 1px solid #000; border-bottom: 3px solid var(--blue); }
.tl-chip.red { border-bottom-color: var(--red); }
.tl-chip.now { outline: 1px solid var(--teal); background: rgba(40, 30, 50, 0.95); }
.tl-chip b { font-weight: 700; }
.tl-chip .icon-img { width: 14px; height: 14px; }
.tl-sd { color: var(--bad); font-size: 10px; }
.narrow .turn-line { display: none; }
.next-strip canvas { width: 26px; height: 26px; image-rendering: pixelated; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); }
.next-strip canvas.rest { opacity: 0.35; }

.chronicle {
  position: absolute;
  z-index: 5;
  width: min(320px, 92vw);
  max-height: 46vh;
  display: flex;
  flex-direction: column;
}
/* big screens: docked under the arena, always open (match.js layout) */
.chronicle.docked { max-height: none; padding: 6px 10px; }
.chronicle.docked .chron-head { margin-bottom: 2px; }
.chronicle.docked .chron-head .h2 { font-size: var(--fs-xs); }
.chronicle.docked .chron-opts-btn { min-width: 26px; min-height: 26px; width: 26px; height: 26px; padding: 2px; }
.chronicle.docked .chron-opts { top: 34px; }
.chronicle.docked .log { flex: 1 1 auto; min-height: 0; }
.chronicle.docked .chron-voice { flex-direction: row; flex-wrap: wrap; margin-bottom: 4px; padding: 2px 6px; }
.chronicle.docked .chron-chat { margin-top: 4px; }
.chron-docked .chron-btn { display: none; }
/* phones: the other player wrote, a "!" pulses on the chronicle's button */
.chron-btn.badge.alert::after { min-width: 18px; padding: 0; font-weight: 700; animation: chron-alert 0.9s ease-in-out infinite alternate; }
@keyframes chron-alert { from { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.7); } to { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(229, 72, 77, 0); } }
.reduce-motion .chron-btn.badge.alert::after { animation: none; }
.chronicle .log { overflow-y: auto; font-size: var(--fs-xs); display: flex; flex-direction: column; gap: 2px; padding-right: 4px; -webkit-user-select: text; user-select: text; }
/* The chronicle (match.js addLog): sections, times, rich lines, the ⚙ options */
.chron-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.chron-head .h2 { margin: 0; flex: 1; }
.chron-clock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-num); font-size: 15px; color: var(--muted); }
.chron-clock canvas, .chron-clock img { width: 12px; height: 12px; image-rendering: pixelated; }
.chron-clock.stopped { color: var(--gold); }
.chron-opts-btn.on { box-shadow: inset 0 0 0 2px var(--gold); }
.chron-opts { position: absolute; z-index: 3; right: 8px; top: 38px; width: min(300px, calc(100% - 16px)); max-height: 70%; overflow-y: auto; padding: 8px; background: #17121f; border: 2px solid #000; box-shadow: 0 0 0 2px rgba(255, 246, 220, 0.15), 0 8px 18px rgba(0, 0, 0, 0.6); }
.lo-head { margin: 0 2px 6px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.lo-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; text-align: left; color: var(--text); background: none; border: 2px solid transparent; cursor: pointer; font: inherit; }
.lo-row + .lo-row { margin-top: 2px; }
.lo-row:hover, .lo-row:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 246, 220, 0.15); outline: none; }
.lo-ico { flex-shrink: 0; width: 22px; font-size: 15px; text-align: center; }
.lo-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lo-text b { font-size: 12px; }
.lo-text small { font-size: 11px; line-height: 1.2; color: var(--muted); }
.lo-sw { position: relative; flex-shrink: 0; width: 34px; height: 18px; background: #5a5266; border: 3px solid #000; }
.lo-sw i { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; background: #fffbea; box-shadow: inset -2px -2px 0 #b9ae98; transition: left 0.1s steps(2); }
.lo-row.on .lo-sw { background: #3fae5a; }
.lo-row.on .lo-sw i { left: 17px; }
.chronicle .log { gap: 3px; line-height: 1.35; }
.chronicle .log .log-group { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 2px 8px; font-size: 10px; color: var(--text); text-transform: uppercase; letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.06); border-left: 4px solid rgba(255, 246, 220, 0.25); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
.chronicle .log .log-group:first-child { margin-top: 0; }
.chronicle .log .log-group.p0 { border-left-color: var(--blue); background: rgba(70, 120, 255, 0.16); }
.chronicle .log .log-group.p1 { border-left-color: var(--team-red); background: rgba(229, 72, 77, 0.16); }
.chronicle .log .lg-title { font-weight: 700; }
.chronicle .log .log-group.p0 .lg-who { color: var(--blue-hi); }
.chronicle .log .log-group.p1 .lg-who { color: var(--team-red-hi); }
.chronicle .log .lg-time { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); white-space: nowrap; text-transform: none; }
.chronicle .log .lg-time canvas, .chronicle .log .lg-time img { width: 10px; height: 10px; image-rendering: pixelated; }
.chronicle .log .lg { display: flex; align-items: baseline; gap: 8px; margin-left: 10px; padding-left: 6px; border-left: 3px solid rgba(255, 246, 220, 0.12); }
.chronicle .log .lg.p0 { border-left-color: var(--blue); }
.chronicle .log .lg.p1 { border-left-color: var(--team-red); }
.chronicle .log .lg-txt { flex: 1; min-width: 0; }
.chronicle .log .log-time { flex: 0 0 auto; min-width: 38px; font-family: var(--font-num); font-size: 14px; color: var(--text); }
.chronicle .log .log-time.same { opacity: 0.3; }
.chronicle .log .lg-u { font-weight: 700; }
.chronicle .log .lg-u.p0 { color: var(--blue-hi); }
.chronicle .log .lg-u.p1 { color: var(--team-red-hi); }
.chronicle .log .lg-u.p2 { color: #c9a8ff; }
.chronicle .log .lg-num { font-family: var(--font-num); font-size: 15px; font-weight: normal; padding: 0 1px; }
.chronicle .log .lg-num.atk { color: #ff6b5e; }
.chronicle .log .lg-num.spell { color: #ff6bd0; }
.chronicle .log .lg-num.heal { color: #6be07a; }
.chronicle .log .lg-num.shield { color: #8fc2ff; }
.chronicle .log .lg-ab { font-weight: 700; color: #c8a0ff; }
.chronicle .log .lg-ab.ult { color: #ffb15e; }
/* an Ultimate: the line glows */
.chronicle .log .lg.lg-ult { padding: 2px 8px; font-weight: 700; color: #3a1a08; background: linear-gradient(90deg, #ff9a3c, #ffd36b 70%, #fff3b0); box-shadow: inset 0 -2px 0 rgba(140, 60, 10, 0.35); }
.chronicle .log .lg.lg-ult .lg-u.p0 { color: #1c3f9a; }
.chronicle .log .lg.lg-ult .lg-u.p1 { color: #9a1c1c; }
.chronicle .log .lg.lg-ult .lg-ab.ult { color: #6a1a00; }
.chronicle .log .lg.lg-ult .log-time { color: #3a1a08; }
/* sudden death: a dark band */
.chronicle .log .lg.lg-warn { padding: 3px 8px; font-weight: 700; color: #ffd36b; background: #2a1c24; border-left-color: #e0453c; box-shadow: inset 0 0 0 1px #5a2a2a; text-shadow: 1px 1px 0 #000; }
/* a critical hit and a miss */
.chronicle .log .lg-crit { display: inline-block; margin-left: 2px; padding: 0 4px; font-size: 10px; font-weight: 700; color: #fff3a0; text-transform: uppercase;
  background: linear-gradient(#ff9a3c, #d0261a); border: 2px solid #000; transform: rotate(-3deg); animation: lg-crit 1s steps(2) infinite; }
@keyframes lg-crit { 50% { transform: rotate(-3deg) scale(1.08); filter: brightness(1.2); } }
.chronicle .log .lg-miss { display: inline-block; position: relative; margin-left: 4px; padding: 0 6px 0 18px; font-size: 10px; letter-spacing: 1px; color: #c8dcf0; text-transform: uppercase;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 210, 0.45) 35%, rgba(150, 190, 235, 0.6)); border-right: 3px solid #8aa8c8; transform: skewX(-14deg);
  text-shadow: -3px 0 rgba(200, 220, 240, 0.3), -7px 0 rgba(200, 220, 240, 0.12); animation: lg-miss 1.6s ease-in-out infinite; }
.chronicle .log .lg-miss::before { content: '💨'; position: absolute; left: 1px; top: 50%; transform: translateY(-50%) skewX(14deg); font-size: 10px; text-shadow: none; }
@keyframes lg-miss { 50% { transform: skewX(-14deg) translateX(3px); opacity: 0.8; } }
.reduce-motion .chronicle .log .lg-crit, .reduce-motion .chronicle .log .lg-miss { animation: none; }
.chronicle .log .lg.lg-death .lg-txt::before { content: '💀 '; }
/* the announcer, the mascots, the chat */
.chronicle .log .lg.lg-banner { padding: 1px 8px; background: linear-gradient(90deg, rgba(242, 193, 78, 0.28), rgba(242, 193, 78, 0.05) 70%); border-left-color: var(--gold); }
.chronicle .log .lg-ann { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.chronicle .log .lg.lg-banner.p0 .lg-ann { color: var(--blue-hi); }
.chronicle .log .lg.lg-banner.p1 .lg-ann { color: var(--team-red-hi); }
.chronicle .log .lg.lg-emote { color: var(--muted); }
.chronicle .log .lg-ll { display: inline-block; width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; image-rendering: pixelated; }
.chronicle .log .lg.lg-chat { font-weight: 700; }
.chronicle .log .lg.lg-notice { color: var(--muted); font-style: italic; }
/* the ⚙'s choices */
.chronicle .log.no-times .log-time { display: none; }
.chronicle .log.no-damage .lg.lg-dmg { display: none; }
.chronicle .log.no-deaths .lg.lg-death { display: none; }
.chronicle .log.no-banners .lg.lg-banner { display: none; }
.chronicle .log.no-turns .log-group { display: none; }
.chronicle .log.no-turns .lg { margin-left: 0; }
.chronicle .log.no-emotes .lg.lg-emote { display: none; }

.announce {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  z-index: 8;
  font-family: var(--font-title);
  font-size: clamp(18px, 4.6vw, 44px);
  color: var(--gold);
  text-shadow: 0 4px 0 #6b3a10, 0 7px 0 #000, 0 0 30px rgba(245, 197, 66, 0.5);
  white-space: nowrap;
  pointer-events: none;
  animation: announce 1.6s ease-out forwards;
}
.announce.red { color: var(--team-red-hi); text-shadow: 0 4px 0 var(--red-dk), 0 7px 0 #000; }
.announce.teal { color: var(--teal-hi); text-shadow: 0 4px 0 var(--teal-dk), 0 7px 0 #000; }
@keyframes announce { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }

/* ------------------------------------------------------- draft screen */

/* The champion select: header with the turn tracker, the choice bar, then
   your team | the champion pool | the other team + the preview. */
.dr { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 0 10px 10px; }
.dr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px; }
.dr.p0 .dr-head { box-shadow: inset 4px 0 0 var(--blue); }
.dr.p1 .dr-head { box-shadow: inset 4px 0 0 var(--team-red); }
.dr.banning .dr-head { background: linear-gradient(90deg, rgba(200, 40, 30, 0.22), transparent 60%), var(--panel); }
.dr-title { min-width: 0; }
.dr-title .t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-title); font-size: calc(12px * var(--ui-scale)); line-height: 1.5; color: var(--text); text-shadow: 0 2px 0 #000; }
.dr-title .sub { font-size: var(--fs-s); color: var(--text-2); margin-top: 3px; }
.dr-rand { display: none; }
.dr-count-step { font-family: var(--font-num); font-size: 20px; color: var(--muted); margin-left: 4px; }
.dr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; font-family: var(--font-text); font-size: 14px; font-weight: 700; color: #fff; border: 2px solid #000; }
.dr-mark.p0 { background: var(--blue); }
.dr-mark.p1 { background: var(--team-red); }

/* Turn tracker */
.dr-steps { display: flex; align-items: center; gap: 3px; padding: 4px 6px; background: rgba(0, 0, 0, 0.35); border: 2px solid #000; }
.ds { position: relative; display: grid; place-items: center; width: 28px; height: 28px; font-family: var(--font-num); font-size: 18px; line-height: 1; color: var(--muted); background: var(--inset); border: 2px solid var(--line); }
.ds.p0 { border-color: #2a5aa8; }
.ds.p1 { border-color: #9b2a30; }
.ds.ban { background: #2e1416; font-size: 12px; }
.ds.done { background: radial-gradient(circle at 50% 40%, #3a3044, #1d1724); color: var(--text); }
.ds.done.ban canvas { filter: grayscale(1) brightness(0.75); }
.ds canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.ds.now { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(245, 197, 66, 0.6); animation: turn-glow 1.2s ease-in-out infinite; }
.ds .chip { padding: 0 3px; font-size: 11px; }
.ds-gap { width: 3px; }
@keyframes turn-glow { 50% { box-shadow: 0 0 4px rgba(245, 197, 66, 0.25); } }

/* Choice bar */
.dr-choice-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; background: rgba(20, 15, 24, 0.92); }
.dr-choice { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dc-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: none; background: radial-gradient(circle at 50% 40%, #3a3044, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--copper-dk); }
.dc-icon canvas { width: 42px; height: 42px; }
.dc-icon.ban { background: #2e1416; }
.dc-icon.ban canvas { filter: grayscale(1) brightness(0.8); }
.dc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dc-text b { font-size: var(--fs-l); line-height: 1.1; }
.dr-buttons { flex: none; }

/* Three columns */
.dr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 10px; align-items: stretch; }
.dr-team { display: flex; flex-direction: column; gap: 8px; align-self: start; padding: 8px 10px 10px; }
.dr-team.p0 { box-shadow: inset 0 3px 0 var(--blue); }
.dr-team.p1 { box-shadow: inset 0 3px 0 var(--team-red); }
.dr-team.active { box-shadow: inset 0 3px 0 var(--gold), 0 0 0 2px var(--gold), 0 0 18px rgba(245, 197, 66, 0.35); }
.dr-team-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dr-team-head b { min-width: 0; }
.dr-team-head small { margin-left: auto; }
.dr-bans { display: flex; align-items: center; gap: 8px; }
.dr-ban { position: relative; display: grid; place-items: center; width: 40px; height: 40px; background: var(--inset); border: 2px dashed var(--line); font-size: 14px; }
.dr-ban.filled { border: 2px solid #000; background: #2e1416; }
.dr-ban.filled canvas { width: 32px; height: 32px; filter: grayscale(1) brightness(0.75); }
.dr-ban.filled::after { content: ''; position: absolute; inset: 2px; background: linear-gradient(45deg, transparent 44%, var(--bad) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--bad) 44% 56%, transparent 56%); pointer-events: none; }
.dr-ban .chip { padding: 0 4px; font-size: 11px; }
.dr-ban .ghost { width: 32px; height: 32px; opacity: 0.45; filter: grayscale(1); image-rendering: pixelated; }
.dr-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dr-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; background: var(--inset); border: 2px dashed var(--line); color: var(--muted); font: inherit; }
.dr-slot canvas { width: 82%; height: 82%; image-rendering: pixelated; }
.dr-slot.filled { border: 2px solid #000; background: radial-gradient(circle at 50% 38%, #3e3448, #1d1724 75%); box-shadow: inset 0 0 0 1px var(--copper-dk); }
.dr-slot.next { border: 2px solid var(--gold); animation: slot-blink 1s steps(1) infinite; }
.dr-slot .ghost { opacity: 0.42; }
.dr-slot.removable { cursor: pointer; }
.dr-slot.removable:hover { border-color: var(--bad); }
.dr-slot.secret { font-family: var(--font-num); font-size: 26px; }
.dr-slot.secret.ready { color: var(--good); border: 2px solid #2f7d3b; background: #1e2e18; }
.dr-slot.incoming > * { visibility: hidden; }
.dr-slot.land { animation: slot-land 0.36s ease-out; }
.dr-slot-tier { position: absolute; left: 3px; top: 2px; }
.dr-syn { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.dr-syn .chip { opacity: 0.65; }
.dr-syn .chip.on { opacity: 1; box-shadow: 0 0 8px rgba(255, 255, 255, 0.15); }
@keyframes slot-blink { 50% { border-color: rgba(245, 197, 66, 0.25); } }
@keyframes slot-land { 0% { transform: scale(1.22); } 55% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* The pool */
.dr-pool { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; padding: 8px 10px; }
.dr-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dr-search { width: auto; flex: 1 1 150px; min-width: 120px; min-height: 36px; padding: 4px 10px; }
.dr-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fac-btn.on { color: #1c1206; filter: brightness(1.25); }
.fac-btn.order.on { color: #f3d58a; } .fac-btn.wild.on { color: #9be38a; } .fac-btn.arcane.on { color: #c3b0ff; } .fac-btn.shadow.on { color: #d39be0; }
.fac-btn.all.on { color: var(--teal); }
.dr-count { margin-left: auto; white-space: nowrap; }
.chip-btn.order { color: #f3d58a; } .chip-btn.wild { color: #9be38a; } .chip-btn.arcane { color: #c3b0ff; } .chip-btn.shadow { color: #d39be0; }
.dr-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 14px 10px; padding: 12px 8px 6px; align-content: start; background: rgba(10, 7, 12, 0.45); border: 2px solid #000; }
.champ-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; color: var(--text); font: inherit; text-align: center; cursor: pointer; background: var(--panel-2); border: 9px solid var(--copper-dk); border-image: var(--frame-card) 9 fill / 9px / 0 stretch; transition: transform 0.12s, box-shadow 0.12s; }
.champ-tile:not(.disabled):hover { transform: translateY(-3px); filter: brightness(1.12); }
.nav-visible .champ-tile:focus-visible { transform: translateY(-3px); }
.champ-tile.disabled { cursor: default; }
.champ-tile.disabled:not(.chosen):not(.banned) > .ct-icon, .champ-tile.disabled:not(.chosen):not(.banned) > .ct-name { opacity: 0.45; }
.ct-icon { display: grid; place-items: center; width: 62px; height: 62px; background: radial-gradient(circle at 50% 38%, #3e3448, #1d1724 75%); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--copper-dk); }
.ct-icon canvas { width: 54px; height: 54px; image-rendering: pixelated; }
.ct-icon.big { width: 80px; height: 80px; flex: none; }
.ct-icon.big canvas { width: 72px; height: 72px; }
.ct-name { min-height: 18px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(13px * var(--ui-scale)); line-height: 1.1; color: #f1e6cc; overflow-wrap: normal; word-break: normal; }
.ct-facs { display: flex; gap: 3px; }
.ct-fac { width: 9px; height: 9px; border: 1px solid #000; }
.ct-fac.order { background: #d9b45a; } .ct-fac.wild { background: #5fbf4a; } .ct-fac.arcane { background: #8a6bff; } .ct-fac.shadow { background: #8a4b9a; }
.ct-tier { position: absolute; top: -10px; left: -10px; padding: 3px 4px; background: #1a1220; border: 2px solid var(--copper-dk); }
.ct-lock { position: absolute; top: -12px; left: -10px; font-size: 15px; }
.champ-tile.locked .ct-icon, .champ-tile.locked .ct-name { opacity: 0.5; filter: grayscale(0.8); }
.champ-tile.banned > :not(.ct-ban) { opacity: 0.35; filter: grayscale(1); }
/* exclusive picks (ranked): the other side has it */
.champ-tile.taken > :not(.ct-ban):not(.ct-picks) { opacity: 0.4; filter: grayscale(0.8); }
.ct-ban.ct-taken { color: var(--text-2); border-color: var(--muted); }
.ct-ban { position: absolute; left: 50%; top: 36%; z-index: 1; transform: translate(-50%, -50%) rotate(-14deg); padding: 2px 6px; font-weight: 700; font-size: var(--fs-xs); color: var(--bad); background: rgba(20, 8, 10, 0.85); border: 2px solid var(--bad); letter-spacing: 1px; text-transform: uppercase; }
.ct-picks { position: absolute; top: -12px; right: -10px; display: flex; gap: 2px; }
.ct-picks i { display: grid; place-items: center; width: 20px; height: 20px; font-style: normal; font-weight: 700; font-size: 12px; color: #fff; border: 2px solid #000; }
.ct-picks i.p0 { background: var(--blue); }
.ct-picks i.p1 { background: var(--team-red); }
.ct-order { position: absolute; top: -12px; right: -10px; display: grid; place-items: center; width: 22px; height: 22px; font-family: var(--font-num); font-size: 18px; color: #1c1206; background: var(--gold); border: 2px solid #000; }
.ct-go { display: none; }
.champ-tile.chosen { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(245, 197, 66, 0.45); }
.dr.banning .champ-tile.chosen { box-shadow: 0 0 0 3px var(--bad), 0 0 16px rgba(229, 72, 77, 0.45); }
.champ-tile.fx-hit { box-shadow: 0 0 0 3px var(--bad); }
.champ-tile.holo .ct-icon { box-shadow: inset 0 0 0 1px #c8a0ff, 0 0 10px rgba(200, 160, 255, 0.5); }

/* The other team + the preview */
.dr-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.dr-preview { padding: 10px 12px; }
.dr-preview.empty { display: flex; align-items: center; justify-content: center; min-height: 90px; }
.dr-hint { margin-top: 8px; padding: 6px 8px; color: var(--gold); background: rgba(0, 0, 0, 0.3); box-shadow: inset 3px 0 0 var(--gold); }
.dr-fly { position: fixed; z-index: 30; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6)); }

/* Tablets: both teams on the left, the pool on the right */
@media (max-width: 1100px) {
  .dr-body { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .dr-side { display: contents; }
  .dr-body > .dr-team { grid-column: 1; grid-row: 1; }
  .dr-side > .dr-team { grid-column: 1; grid-row: 2; }
  .dr-side > .dr-preview { grid-column: 1; grid-row: 3; align-self: start; max-height: 100%; overflow-y: auto; }
  .dr-pool { grid-column: 2; grid-row: 1 / span 3; }
}

/* Phones: the two teams side by side, the pool below; the page scrolls, the choice bar stays on top */
@media (max-width: 700px) {
  .dr { overflow-y: auto; padding: 0 6px 6px; gap: 6px; }
  /* Header: title + the Random dice on one line, the tracker below */
  .dr-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title rand' 'steps steps'; gap: 6px; padding: 6px 8px; }
  .dr-title { grid-area: title; }
  .dr-steps { grid-area: steps; overflow-x: auto; }
  .dr-rand { display: inline-flex; grid-area: rand; align-self: start; }
  .dr-title .sub { display: none; }
  .ds { width: 24px; height: 24px; flex: none; font-size: 16px; }
  .ds canvas { width: 18px; height: 18px; }
  /* No "Picking X" box: the chosen card and the ghost in the slot say it, a second tap locks in.
     What stays (Fast match, No ban) is just the buttons. */
  .dr-choice-bar.quiet, .dr-choice, .dr-rand-txt, .dr-choice-bar.k-blind .dr-lock { display: none; }
  .dr-choice-bar { position: sticky; top: 0; z-index: 4; padding: 4px 6px; justify-content: flex-end; }
  .dr-buttons { flex: 1 1 100%; justify-content: flex-end; }
  .ct-go { display: block; position: absolute; left: 50%; bottom: -11px; z-index: 2; transform: translateX(-50%); padding: 1px 5px; white-space: nowrap; font-weight: 700; font-size: 9px; color: #1c1206; background: var(--gold); border: 2px solid #000; animation: turn-glow 1.2s ease-in-out infinite; }
  .dr.banning .ct-go { color: #fff; background: var(--bad); }
  .dr-ban .ghost { width: 22px; height: 22px; }
  .dr-title .t { font-size: 10px; flex-wrap: nowrap; align-items: flex-start; }
  .dr-title .tt { flex: 1 1 auto; min-width: 0; }
  .dr-count-step { flex: none; font-size: 16px; }
  .dr-buttons .btn { padding: 2px 8px; }
  /* Teams as full-width strips, one on top of the other: six slots in a row */
  .dr-body { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 6px; flex: none; }
  .dr-body > .dr-team { grid-column: 1; grid-row: 1; }
  .dr-side > .dr-team { grid-column: 1; grid-row: 2; }
  .dr-pool { grid-column: 1; grid-row: 3; padding: 6px; }
  .dr-side > .dr-preview { grid-column: 1; grid-row: 4; }
  .dr-side > .dr-preview.empty { display: none; }
  .dr-team { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head ban' 'slots slots' 'syn syn'; align-items: center; padding: 5px 6px 6px; gap: 4px 8px; }
  .dr-team-head { grid-area: head; }
  .dr-bans { grid-area: ban; gap: 6px; }
  .dr-slots { grid-area: slots; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .dr-syn { grid-area: syn; min-height: 0; }
  .dr-syn:empty { display: none; }
  .dr-team.raid-box { display: flex; flex-direction: column; gap: 4px; }
  .dr-syn .chip { font-size: 10px; padding: 0 5px; }
  .dr-slot-tier { font-size: 7px; padding: 0 1px; left: 1px; top: 1px; }
  .dr-ban { width: 28px; height: 28px; }
  .dr-ban.filled canvas { width: 22px; height: 22px; }
  .dr-bans small { font-size: 10px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dr-grid { flex: none; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; padding: 10px 6px 4px; }
  .champ-tile { padding: 6px 2px 4px; }
  .ct-icon { width: 44px; height: 44px; }
  .ct-icon canvas { width: 38px; height: 38px; }
  .ct-name { font-size: 10px; min-height: 14px; letter-spacing: -0.2px; }
  .dr-search { flex-basis: 100%; min-height: 32px; }
  .dr-filters { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; padding-bottom: 2px; } /* (wraps: nothing scrolls sideways on phones) */
  .dr-filters .btn.small { flex: none; min-height: 30px; padding: 0 7px; font-size: 11px; }
  .dr-count { display: none; }
}

/* ----------------------------------------------------- emblem editor */

.emblem-editor { display: grid; grid-template-columns: 1fr 300px; gap: 12px; flex: 1; min-height: 0; padding: 0 12px 12px; }
.emblem-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 0; }
.emblem-hint { margin: 0; max-width: 560px; }
.screen-emblem .screen-head .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .screen-emblem .screen-head .title { display: none; }
  .screen-emblem .screen-head { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .screen-emblem .screen-head .btn.small { padding: 2px 6px; }
  .emblem-hint { font-size: 11px; }
}
.emblem-stage canvas { width: min(100%, 56vh); aspect-ratio: 1; image-rendering: auto; background: repeating-conic-gradient(#1b1520 0 25%, #221a28 0 50%) 0 0 / 24px 24px; border: 3px solid #000; box-shadow: 0 0 0 2px var(--copper-dk); touch-action: none; }
.emblem-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.shape-grid button { aspect-ratio: 1; padding: 4px; background: var(--inset); border: 2px solid var(--line); cursor: pointer; }
.shape-grid button canvas { width: 100%; height: 100%; }
.layer-list .list-item { min-height: 40px; padding: 4px 8px; }
.layer-list .list-item.sel { border-color: var(--teal); }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.swatches button { aspect-ratio: 1; border: 2px solid #000; cursor: pointer; padding: 0; }
.swatches button.sel { outline: 2px solid #fff; }

/* ------------------------------------------- match on narrow screens */

.narrow .hud-top { flex-wrap: wrap; padding: 4px 6px; gap: 4px; }
.narrow .hud-top .turn-banner { min-width: 0; order: 10; flex: 1 1 100%; } /* (its own row under the buttons: squeezed between them it wrapped word by word) */
.narrow .hud-top .turn-banner .t { font-size: 9px; line-height: 1.4; }
.narrow .hud-top .turn-banner .xs { font-size: 10px; }
.narrow .next-strip { display: none; }
.narrow .timer { font-size: 24px; min-width: 48px; }
.narrow .timer-bar { width: 48px; height: 6px; }
.narrow .roster { flex-wrap: nowrap !important; gap: 4px; }
/* phones: the rosters are just the champions' square portraits (HP, energy and the rest are on the board
   and in the champion's bubble) */
.narrow .roster-hero { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; padding: 1px; grid-template-columns: 1fr; gap: 0; }
.narrow .roster-hero canvas { width: 40px; height: 40px; grid-row: auto; }
.narrow .roster-hero > :not(canvas) { display: none; }
.narrow .roster-hero.blue { border-left-width: 2px; border-bottom: 3px solid var(--blue); }
.narrow .roster-hero.red { border-left-width: 2px; border-bottom: 3px solid var(--team-red); }
.narrow .action-bar { gap: 3px; padding: 3px; }
.narrow .hint-line { font-size: 12px; max-width: 96vw; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .emblem-editor { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .emblem-stage canvas { width: min(100%, 38vh); }
}

@media (max-width: 560px) {
  :root { --gap: 8px; }
  .menu-buttons { grid-template-columns: 1fr 1fr; gap: 6px; }
  .menu-buttons .btn { font-size: var(--fs-s); min-height: 46px; padding: 4px 8px; }
  .screen-head { min-height: 48px; padding: 6px 8px; }
  .screen-body { padding: 4px 8px 14px; }
  .roster-hero { width: auto; grid-template-columns: 30px 1fr; padding: 2px 4px; }
  .roster-hero canvas { width: 30px; height: 30px; }
  .action-btn { min-width: 52px; min-height: 54px; }
  .action-btn .lbl { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .menu-logo .t1 { font-size: 28px; }
  .menu-wrap { gap: 8px; }
}

/* ----------------------------------------------- comfort and motion */

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

.screen-body::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .log::-webkit-scrollbar, .pool::-webkit-scrollbar { width: 10px; height: 10px; }
.screen-body::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .log::-webkit-scrollbar-thumb, .pool::-webkit-scrollbar-thumb { background: var(--copper-dk); border: 2px solid var(--bg); }
.screen-body::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track, .log::-webkit-scrollbar-track, .pool::-webkit-scrollbar-track { background: var(--bg-2); }
* { scrollbar-color: var(--copper-dk) var(--bg-2); scrollbar-width: thin; }

/* ------------------------------------------------------------------ online */
[hidden] { display: none !important; }
.badge { position: relative; }
.badge::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-family: var(--font-num); font-size: 15px; line-height: 1; color: #fff; background: var(--bad); border: 2px solid #000; border-radius: 9px; pointer-events: none; }
.btn.left { justify-content: flex-start; text-align: left; }
.btn.link { background: none; border: none; border-image: none; box-shadow: none; padding: 0 2px; min-height: 0; color: var(--teal); text-decoration: underline; max-width: 100%; }
.acc-btn { max-width: 200px; }
.acc-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row { padding: 3px 4px; border-bottom: 1px solid rgba(75, 58, 60, 0.5); min-height: 34px; }
.mk-row:last-child { border-bottom: none; }
.rarity-common { color: #d8d2c6; } .rarity-rare { color: #8cc0ff; } .rarity-epic { color: #d39be0; } .rarity-legendary { color: var(--gold); }
.lobby-code { font-size: calc(30px * var(--ui-scale)); letter-spacing: 8px; margin: 4px 0; user-select: all; -webkit-user-select: all; }
.lobby-team.p0 { box-shadow: inset 0 3px 0 var(--blue); }
.lobby-team.p1 { box-shadow: inset 0 3px 0 var(--team-red); }
.lobby-seat { min-height: 34px; }
.spinner { width: 34px; height: 34px; border: 4px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-tag { color: var(--bad); font-weight: 700; font-size: var(--fs-xs); margin-right: 6px; animation: turn-glow 1.2s ease-in-out infinite; }
.bracket { display: flex; gap: 10px; overflow-x: auto; align-items: center; padding-bottom: 6px; }
.bracket-round { min-width: 150px; }
.bracket-match { padding: 4px 6px; position: relative; }
.bracket-match .lost { opacity: 0.45; text-decoration: line-through; }
/* phones: the rounds one under the other (round 1, the semis, the final), each round's matches two by two */
@media (max-width: 760px) {
  .bracket { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 12px; }
  .bracket-round { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bracket-round > :first-child { grid-column: 1 / -1; }
}
/* the tutorial's coach */
.coach { position: absolute; left: 12px; bottom: 12px; z-index: 30; width: clamp(220px, 17.5vw, 340px); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; box-shadow: 0 6px 0 #000, 0 0 0 2px var(--gold); }
.coach-head { display: flex; align-items: center; gap: 8px; }
.coach-text { margin: 0; line-height: 1.45; }
.coach-buttons { align-items: center; flex-wrap: wrap; }
.coach.min { width: auto; }
.coach-hl { outline: 3px solid var(--gold) !important; outline-offset: 2px; animation: coach-pulse 1.2s ease-in-out infinite; }
@keyframes coach-pulse { 50% { outline-color: rgba(245, 197, 66, 0.25); } }
@media (max-width: 700px) {
  .coach { left: 50%; transform: translateX(-50%); width: 94vw; bottom: 8px; padding: 6px 8px; gap: 4px; }
  .coach:not([data-phase='fast']) { bottom: auto; top: 56px; }
  .coach .coach-text { font-size: var(--fs-xs); }
}
/* the snake mini-game */
.snake-body { display: flex; justify-content: center; }
.snake-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.snake-hud { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; }
.snake-hud .bar { min-width: 120px; }
.snake-wrap { position: relative; }
.snake-xp { width: 70px; }
.snake-xp .bar, .snake-hud .snake-xp .bar { height: 8px; min-width: 0; }
.snake-perks { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -45%); z-index: 5; width: min(560px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; text-align: center; }
.snake-perk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.snake-perk { flex-direction: column; gap: 4px; padding: 8px 6px; min-height: 120px; white-space: normal; text-align: center; }
.snake-perk .kbd { align-self: center; }
@media (max-width: 700px) {
  .snake-perk-list { grid-template-columns: 1fr; }
  .snake-perk { min-height: 0; }
  .snake-hud { flex-wrap: wrap; row-gap: 4px; }
  .snake-hud > .grow { order: 9; flex: 1 1 100%; }
}
.snake-canvas { border: 3px solid var(--copper-dk); box-shadow: 0 4px 0 #000; image-rendering: pixelated; touch-action: none; background: #2a2622; }
.snake-pad { display: none; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; }
.snake-pad .btn { font-size: 20px; padding: 0; min-height: 0; }
.snake-pad .snake-up { grid-column: 2; grid-row: 1; }
.snake-pad .snake-left { grid-column: 1; grid-row: 2; }
.snake-pad .snake-down { grid-column: 2; grid-row: 2; }
.snake-pad .snake-right { grid-column: 3; grid-row: 2; }
@media (pointer: coarse), (max-width: 700px) { .snake-pad { display: grid; } }
/* the patrol */
.patrol-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.patrol-route { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 10px 6px; text-align: center; }
.patrol-route.selected { box-shadow: 0 0 0 3px var(--teal), 0 0 16px rgba(63, 224, 184, 0.45), inset 0 3px 0 var(--teal); }
.patrol-route-icon { font-size: 28px; }
/* the gauntlet */
.gaunt-floors { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gaunt-floor { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: rgba(20, 15, 24, 0.85); border: 2px solid var(--line); min-width: 0; }
.gaunt-floor b { font-family: var(--font-title); font-size: 18px; }
.gaunt-floor.done { border-color: var(--teal); opacity: 0.75; }
.gaunt-floor.now { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 197, 66, 0.35); }
.gaunt-floor.boss b { color: var(--team-red); }
.gaunt-team { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gaunt-hero { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.gaunt-hero .bar { width: 100%; }
.gaunt-hero.fallen canvas, .gaunt-hero.fallen img { filter: grayscale(1) brightness(0.55); }
.gaunt-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.gaunt-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; padding: 12px 10px; }
.gaunt-choice:hover:not([disabled]) { border-color: var(--gold); }
.gaunt-choice[disabled] { opacity: 0.5; cursor: default; }
.gaunt-choice-icon { font-size: 30px; }
.chip.relic { background: rgba(126, 87, 194, 0.25); border-color: #9a7ad8; }
@media (max-width: 700px) {
  .gaunt-floor span { display: none; }
  .gaunt-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bracket-match .bracket-watch { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); min-height: 0; min-width: 0; padding: 3px; }
.cup.running { box-shadow: inset 3px 0 0 var(--teal); }
.cup.done, .cup.cancelled { opacity: 0.75; }

/* The online status bar in a game (the other player left, reconnecting) */
.online-status { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 7; display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: var(--fs-s); background: rgba(20, 15, 24, 0.94); border: 2px solid var(--copper-dk); box-shadow: 0 4px 0 #000; max-width: 94vw; }
.online-status.hidden { display: none; }
.chronicle .chron-chat { margin-top: 6px; }
.chronicle .chron-chat .input { min-height: 32px; padding: 3px 8px; }
.chronicle .log .chat { font-weight: 700; }
/* voice chat: my microphone, the other player's state, a glow while they talk */
.chronicle .chron-voice { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; margin-bottom: 6px; border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 4px; }
.chron-voice .vrow { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.chron-voice .vpeer.talking { color: var(--teal); }
.chron-voice .vpeer.talking canvas { filter: drop-shadow(0 0 3px var(--teal)); }
.chron-voice .btn.muted-mic { border-color: var(--bad); }
.btn.voice-talk { box-shadow: 0 0 0 2px var(--teal), 0 0 10px var(--teal); }

/* Invitations (top of the screen, over everything but windows) */
#layer-pop { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; flex-direction: column; gap: 8px; width: min(380px, 94vw); pointer-events: none; }
#layer-pop > * { pointer-events: auto; }
.invite-pop { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; animation: pop-in 0.25s ease-out; }
.invite-bar { height: 6px; }
@keyframes pop-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* The chat dock (full screen on phones) */
#layer-dock { position: fixed; right: 12px; bottom: 12px; z-index: 15; pointer-events: none; }
#layer-dock > * { pointer-events: auto; }
.chat-dock { width: min(360px, 94vw); height: min(480px, 70vh); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.chat-head { flex: none; }
.chat-older { align-self: center; flex: none; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--inset); border: 2px solid #000; -webkit-user-select: text; user-select: text; }
.chat-day { margin: 6px 0 2px; }
.chat-msg { align-self: flex-start; max-width: 82%; padding: 5px 8px; font-size: var(--fs-s); background: var(--panel-3); border: 2px solid #000; border-radius: 2px 10px 10px 10px; overflow-wrap: anywhere; }
.chat-msg.mine { align-self: flex-end; background: #1d4a40; border-radius: 10px 2px 10px 10px; }
.chat-emote { font-size: 26px; line-height: 1.1; }
.chat-meta { display: flex; gap: 4px; justify-content: flex-end; align-items: center; margin-top: 2px; }
.chat-unsend { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0 2px; }
.chat-unsend:hover { color: var(--bad); }
.chat-send { flex: none; }
.chat-send .input { min-height: 34px; }
@media (max-width: 700px) {
  #layer-dock { inset: 0; }
  .chat-dock { width: 100%; height: 100%; }
  /* (between the client bar and the bottom bar, which sit above it: its header and its box always show) */
  .hub-bar-on #layer-dock { top: calc(var(--safe-t) + var(--hub-bar-h)); bottom: calc(var(--safe-b) + var(--hub-bottom-h)); }
}

/* 2v2: which teammate plays a champion */
.dr-owner { position: absolute; left: 2px; right: 2px; bottom: 1px; font-size: 9px; line-height: 1.1; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; pointer-events: none; }
.dr-owner.me { color: var(--teal); }

/* ------------------------------------------------ match stats (ui/match-stats.js) */

.ms { display: flex; flex-direction: column; gap: 14px; }
.ms .s0 { --side: var(--blue); --side-hi: var(--blue-hi); }
.ms .s1 { --side: var(--team-red); --side-hi: var(--team-red-hi); }
.ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ms-result { font-family: var(--font-title); font-size: calc(16px * var(--ui-scale)); line-height: 1.4; }
.ms-sec { display: flex; flex-direction: column; gap: 8px; }
.ms-sec > .h2 { margin: 0; }
.ms-ico { width: 14px; height: 14px; vertical-align: -2px; image-rendering: pixelated; flex: none; }
.ms-pic { position: relative; display: inline-grid; place-items: center; flex: none; background: radial-gradient(circle at 50% 38%, #3e3448, #1d1724 75%); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--side, var(--copper-dk)); }
.ms-pic canvas { display: block; image-rendering: pixelated; }
.ms-pic.dead canvas, .mh-hero.dead > canvas { filter: grayscale(1) brightness(0.75); opacity: 0.8; }
.ms-pic.empty { width: 44px; height: 44px; color: var(--muted); }
/* momentum */
.ms-chips { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.ms-chip { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 8px; background: var(--well, rgba(0, 0, 0, 0.25)); border: 2px solid var(--line); box-shadow: inset 3px 0 0 var(--side, var(--gold)); }
.ms-chip b { color: var(--side-hi, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chip small { font-size: var(--fs-xs); color: var(--muted); }
.ms-chip.mid { align-items: center; text-align: center; box-shadow: none; }
.ms-chip.mid b { color: var(--gold); font-size: 22px; }
.ms-plot { --text: #ece3d6; --muted: #8d7f72; position: relative; height: 190px; margin-right: 34px; color: var(--text); background: linear-gradient(180deg, #161224, #0b0a12); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); touch-action: pan-y; cursor: crosshair; }
.ms-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ms-stop.s0.hi { stop-color: var(--blue); stop-opacity: 0.55; }
.ms-stop.s0.lo { stop-color: var(--blue); stop-opacity: 0.05; }
.ms-stop.s1.hi { stop-color: var(--team-red); stop-opacity: 0.55; }
.ms-stop.s1.lo { stop-color: var(--team-red); stop-opacity: 0.05; }
.ms-mid { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ms-tp { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ms-line { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ms-line-shadow { fill: none; stroke: #000; stroke-width: 5; opacity: 0.6; vector-effect: non-scaling-stroke; }
.ms-tick { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ms-tag { position: absolute; left: 8px; font-size: var(--fs-xs); color: var(--side-hi); text-shadow: 0 1px 0 #000; pointer-events: none; }
.ms-tag.top { top: 6px; }
.ms-tag.bottom { bottom: 10px; }
.ms-even { position: absolute; right: 8px; top: 50%; transform: translateY(-120%); font-size: var(--fs-xs); color: var(--muted); pointer-events: none; }
.ms-end { position: absolute; right: -4px; transform: translate(100%, -50%); padding: 0 4px; font-family: var(--font-num); font-size: 18px; line-height: 1.2; color: #fff; background: #2a2433; border: 2px solid #000; pointer-events: none; }
.ms-end.s0 { background: var(--blue); }
.ms-end.s1 { background: var(--team-red); }
.ms-pin { position: absolute; width: 0; height: 0; pointer-events: none; }
.ms-pin-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--gold); border: 2px solid #000; transform: rotate(45deg); }
.ms-flag { position: absolute; left: 8px; bottom: 6px; white-space: nowrap; padding: 1px 5px; font-size: var(--fs-xs); color: #1c1206; background: var(--gold); border: 2px solid #000; }
.ms-pin.left .ms-flag { left: auto; right: 8px; }
.ms-pin.below .ms-flag { bottom: auto; top: 6px; }
.ms-plot.hovering .ms-pin { opacity: 0.45; }
.ms-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(255, 255, 255, 0.6); pointer-events: none; }
.ms-cursor-dot { position: absolute; left: -5px; width: 10px; height: 10px; margin-top: -5px; background: #fff; border: 2px solid #000; }
.ms-tip { position: absolute; top: 8px; z-index: 2; width: max-content; max-width: min(280px, 70vw); display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; font-size: var(--fs-s); color: #ece3d6; background: rgba(16, 12, 22, 0.96); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--copper-dk), 0 4px 0 rgba(0, 0, 0, 0.5); pointer-events: none; }
.ms-tip-head { display: flex; justify-content: space-between; gap: 10px; }
.ms-lead { color: #c8c2d4; }
.ms-lead.s0 { color: #8cc0ff; }
.ms-lead.s1 { color: #ff9a9a; }
.ms-tip-move { display: flex; align-items: center; gap: 6px; }
.ms-tip-move .ms-pic { border-width: 1px; }
.ms-tip-why { color: #f5c542; }
.ms-tip-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 4px; }
.ms-tip-sides > div { display: flex; flex-direction: column; min-width: 0; }
.ms-tip-sides b { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tip-sides .s0 b { color: #8cc0ff; }
.ms-tip-sides .s1 b { color: #ff9a9a; }
.ms-tip-sides small { font-size: var(--fs-xs); color: #b4ac9b; }
.ms-hint { position: absolute; right: 8px; bottom: 10px; color: var(--muted); pointer-events: none; }
.ms-plot.hovering .ms-hint { display: none; }
.ms-turns { position: relative; height: 16px; margin-right: 34px; }
.ms-turns span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ms-turns span:first-child { transform: none; }
.ms-turns span:last-child { transform: translateX(-100%); }
.ms-note { margin: 0; color: var(--gold); }
/* highlights */
.ms-awards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ms-award { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; text-align: center; background: var(--well, rgba(0, 0, 0, 0.22)); border: 2px solid var(--line); box-shadow: inset 0 3px 0 var(--side, var(--line)); min-width: 0; }
.ms-award-top { display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.ms-award-n { font-size: 26px; color: var(--side-hi, var(--text)); }
.ms-award small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* team against team */
.ms-vs { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ms-vs .s0 { color: var(--blue-hi); }
.ms-vs .s1 { color: var(--team-red-hi); }
.ms-tugs { display: flex; flex-direction: column; gap: 4px; }
.ms-tug { display: grid; grid-template-columns: minmax(110px, 160px) 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; }
.ms-tug.zero { opacity: 0.45; }
.ms-tug-label { display: flex; align-items: center; gap: 5px; color: var(--text-2); }
.ms-n { font-size: 20px; }
.ms-n.s0 { text-align: right; color: var(--blue-hi); }
.ms-n.s1 { color: var(--team-red-hi); }
.ms-n { display: inline-flex; align-items: center; gap: 3px; }
.ms-n.s0 { justify-content: flex-end; }
/* the side ahead on that number: a gold crown, before the number on the blue side and after it on the red */
.ms-n.s0.lead::before, .ms-n.s1.lead::after { content: ''; flex: none; width: 15px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 6l5 4.5L12 2l5 8.5L22 6l-2 11H4z' fill='%23f5c542' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4.6 14.5h14.8' stroke='%23b8862b' stroke-width='1.4'/%3E%3Ccircle cx='12' cy='2.4' r='1.6' fill='%23f5c542' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.ms-tug-bar { display: flex; height: 12px; background: #0b080d; border: 2px solid #000; overflow: hidden; }
.ms-tug-bar i { display: block; height: 100%; }
.ms-tug-bar i.s0 { background: var(--blue); }
.ms-tug-bar i.s1 { background: var(--team-red); }
/* every champion */
.ms-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-2); }
.ms-key { display: inline-flex; align-items: center; gap: 4px; }
.ms-key i { width: 12px; height: 10px; border: 1px solid #000; }
.ms-key.basic i, .ms-dmgbar i.basic { background: #c8c2d4; }
.ms-key.skill i, .ms-dmgbar i.skill { background: #3fe0b8; }
.ms-key.ult i, .ms-dmgbar i.ult { background: #f5a623; }
.ms-key.other i, .ms-dmgbar i.other { background: #b56cff; }
.ms-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms-side-head { font-weight: 700; color: var(--side-hi); box-shadow: inset 0 -2px 0 var(--side); padding-bottom: 2px; }
.ms-hero { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ms-hero.dead .ms-hero-name b:first-child { text-decoration: line-through; opacity: 0.7; }
.ms-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ms-hero-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ms-hero-name b:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-hero-dmg { margin-left: auto; font-size: 20px; color: var(--side-hi); }
.ms-dmgbar { display: flex; height: 14px; background: #0b080d; border: 2px solid #000; overflow: hidden; }
.ms-dmgbar i { display: grid; place-items: center; height: 100%; font-style: normal; font-family: var(--font-num); font-size: 14px; line-height: 1; color: #1c1206; overflow: hidden; }
.ms-minis { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--text-2); }
.ms-mini { display: inline-flex; align-items: center; gap: 3px; }
.ms-mini.zero { opacity: 0.4; }
@media (max-width: 700px) {
  .ms-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-sides { grid-template-columns: 1fr; }
  .ms-tug { grid-template-columns: 84px 40px minmax(0, 1fr) 40px; gap: 4px; }
  .ms-n { font-size: 17px; }
  .ms-plot { height: 160px; }
  .ms-chips { grid-template-columns: 1fr 1fr; }
  .ms-chip.mid { grid-column: span 2; grid-row: 2; flex-direction: row; gap: 6px; justify-content: center; }
  .ms-hint { display: none; }
}

/* ------------------------------------------------ the match history's details (profile) */

.mh-row { cursor: pointer; }
.mh-unit { position: relative; display: inline-block; line-height: 0; }
.mh-unit.dead canvas { filter: grayscale(1) brightness(0.6); opacity: 0.75; }
.mh-unit.mvp canvas { filter: drop-shadow(0 0 3px var(--gold)); }
.mh-unit.mvp.dead canvas { filter: grayscale(1) brightness(0.6) drop-shadow(0 0 3px var(--gold)); }
.mh-row .mh-chev { flex: none; color: var(--muted); transition: transform 0.15s; }
.mh-row.open { border-color: var(--teal); }
.mh-row.open .mh-chev { transform: rotate(180deg); color: var(--teal); }
.mh-detail { margin: -2px 0 4px; display: flex; flex-direction: column; gap: 8px; animation: fade-in 0.15s ease-out; }
.mh-detail .s0 { --side: var(--blue); --side-hi: var(--blue-hi); }
.mh-detail .s1 { --side: var(--team-red); --side-hi: var(--team-red-hi); }
.mh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mh-head .chip { gap: 4px; }
.mh-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mh-team { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--well, rgba(0, 0, 0, 0.18)); border: 2px solid var(--line); box-shadow: inset 0 3px 0 var(--side); min-width: 0; }
.mh-team.won { border-color: var(--gold); }
.mh-team-head { display: flex; align-items: center; gap: 6px; color: var(--side-hi); }
.mh-hero { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.mh-hero.dead .mh-hero-name b { text-decoration: line-through; opacity: 0.7; }
.mh-hero canvas { image-rendering: pixelated; }
.mh-hero-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mh-hero-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-mvp { padding: 0 4px; color: #1c1206; background: var(--gold); border: 1px solid #000; }
.mh-nums, .mh-total { display: flex; gap: 8px; align-items: center; }
.mh-nums span, .mh-total span { display: inline-flex; align-items: center; gap: 3px; }
.mh-total { justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 700px) {
  .mh-teams { grid-template-columns: 1fr; }
  .mh-row { flex-wrap: wrap; }
  .mh-row > .row.grow { order: 9; flex: 1 1 100%; }
}

/* The patrol at a glance (ui/patrol-widget.js): bottom right, on the screens that aren't the patrol's */
.patrol-widget { position: fixed; right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); z-index: 14; width: min(250px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; text-align: left; color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
.patrol-widget:hover { border-color: var(--teal); }
.pw-head { display: flex; justify-content: space-between; gap: 8px; }
.pw-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.pw-row .bar { height: 10px; }
.pw-row .bar > b { font-size: 13px; }
.pw-row.s0 .pw-name { color: var(--blue-hi); }
.pw-row.s1 .pw-name { color: var(--team-red-hi); }
.pw-foot { text-align: right; }
.bar.hp.team.mine > i { background: linear-gradient(180deg, #8cc0ff, #3b82f6); }
.bar.hp.team.theirs > i { background: linear-gradient(180deg, #ff9a9a, #c8342c); }

/* The replay controls (match.js): over the board, as wide as the screen allows */
.replay-bar { position: absolute; left: 50%; transform: translateX(-50%); top: 58px; z-index: 6; display: flex; flex-direction: column; gap: 6px; padding: 4px 8px; width: min(980px, calc(100vw - 12px)); }
/* the replay's box (the old game's controls): first, back, play, forward, last, speed, chronicle | where it is and what happened | Exit */
.rp-top { display: flex; align-items: center; gap: 10px; }
.rp-controls { display: flex; gap: 4px; flex: 0 0 auto; }
.rp-btn { min-width: 40px; min-height: 36px; padding: 2px 6px; font-size: 16px; }
.rp-btn.play { min-width: 48px; }
.rp-btn.play.on, .rp-btn.chron.on { color: var(--gold); }
.rp-btn.speed { font-family: var(--font-num); font-size: 18px; }
.rp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-pos { font-size: var(--fs-xs); color: var(--text-2); }
.rp-caption { font-size: var(--fs-s); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-caption.p0 { color: var(--blue-hi); }
.rp-caption.p1 { color: var(--team-red-hi); }
.rp-exit { flex: 0 0 auto; }
.narrow .rp-top { flex-wrap: wrap; gap: 4px; }
.narrow .rp-info { order: 3; flex-basis: 100%; }
.narrow .rp-btn { min-width: 32px; min-height: 32px; padding: 1px 4px; font-size: 14px; }
/* the replay's timeline: a mark per move, in the side's colour; a skull where someone fell */
.replay-timeline { flex: 1 1 100%; width: min(900px, calc(100vw - 40px)); overflow-x: auto; overflow-y: hidden; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6); scrollbar-width: thin; }
/* the old Eriband's replay line: blue moves above the axis, red below, the fallen on the outer rows */
.tl-track { position: relative; height: 104px; margin: 0 14px; }
.tl-zone { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgba(255, 246, 220, 0.22); }
.tl-zone:first-child { border-left: 0; }
.tl-zone span { position: absolute; z-index: 2; top: 50%; left: 4px; transform: translateY(-50%); padding: 1px 4px; font-size: 8px; line-height: 1.2; color: #f6e2b4; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 246, 220, 0.25); white-space: nowrap; pointer-events: none; }
.tl-zone.draft { background: rgba(120, 140, 255, 0.07); }
.tl-zone.place { background: rgba(242, 193, 78, 0.1); }
.tl-zone.battle { background: rgba(208, 70, 60, 0.08); }
.tl-axis { position: absolute; left: -14px; right: -14px; top: 50%; height: 6px; margin-top: -3px; background: repeating-linear-gradient(90deg, #6b4a2e 0 12px, #3d2a1b 12px 14px); box-shadow: 0 0 0 2px #000; }
.tl-head { position: absolute; top: 0; bottom: 0; z-index: 4; width: 4px; margin-left: -2px; background: linear-gradient(#ffe48a, var(--gold)); box-shadow: 0 0 0 1px #000, 0 0 10px var(--gold); pointer-events: none; transition: left 0.15s; }
.reduce-motion .tl-head { transition: none; }
.tl-head::before, .tl-head::after { content: ''; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: var(--gold); box-shadow: 0 0 0 1px #000; transform: rotate(45deg); }
.tl-head::before { top: -5px; }
.tl-head::after { bottom: -5px; }
.tl-mark { position: absolute; z-index: 3; width: 24px; height: 24px; min-width: 0; min-height: 0; margin-left: -12px; padding: 1px; background: #2a2230; border: 2px solid #6b6478; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); cursor: pointer; opacity: 0.55; }
.tl-mark canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tl-mark.s0 { top: 20px; }
.tl-mark.s1 { bottom: 20px; }
/* the stick to the axis, in the team's colour */
.tl-mark::after { content: ''; position: absolute; left: 50%; width: 2px; height: 5px; margin-left: -1px; pointer-events: none; }
.tl-mark.s0::after { top: 100%; margin-top: 2px; background: var(--blue); }
.tl-mark.s1::after { bottom: 100%; margin-bottom: 2px; background: var(--team-red); }
.tl-mark.k-atk { border-color: #e0453c; }
.tl-mark.k-skl { border-color: #a070ff; }
.tl-mark.k-ult { border-color: #ff8a1e; box-shadow: 0 0 8px rgba(255, 138, 30, 0.8); }
.tl-mark.k-mov { border-color: #5fcf6e; }
.tl-mark.k-place { border-color: var(--gold); }
.tl-mark.k-def { border-color: #9fe6ff; }
.tl-mark.k-pick { border-color: #f6e2b4; }
.tl-mark.k-ban { border-color: #3a3a3a; }
.tl-mark.k-ban canvas { filter: grayscale(1) brightness(0.6); }
.tl-mark.past { opacity: 0.8; }
.tl-mark.has-kill { box-shadow: 0 0 0 2px #ff3b3b, 0 0 10px rgba(255, 59, 59, 0.8); }
.tl-mark.now { z-index: 5; opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 2px #fff, 0 0 12px var(--gold); }
.tl-mark:hover, .tl-mark:focus-visible, .tl-victim:hover, .tl-victim:focus-visible { opacity: 1; z-index: 6; transform: scale(1.2); }
.tl-glyph { display: grid; place-items: center; height: 100%; font-size: 13px; line-height: 1; color: #f6e2b4; }
.tl-ban { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-style: normal; color: #ff5a5a; text-shadow: 0 1px 0 #000; pointer-events: none; }
.tl-ult { position: absolute; top: -10px; right: -9px; font-size: 11px; font-style: normal; filter: drop-shadow(1px 1px 0 #000); pointer-events: none; }
.tl-victim { position: absolute; z-index: 2; width: 18px; height: 18px; min-width: 0; min-height: 0; margin-left: -9px; padding: 1px; background: #1d1724; border: 2px solid; opacity: 0.4; cursor: pointer; }
.tl-victim canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tl-victim.s0 { top: 0; border-color: var(--blue); }
.tl-victim.s1 { bottom: 0; border-color: var(--team-red); }
.tl-victim.seen { opacity: 0.85; }
.tl-victim i { position: absolute; right: -6px; bottom: -5px; font-size: 9px; font-style: normal; color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; pointer-events: none; }
.narrow .replay-timeline { width: auto; }
.narrow .tl-track { height: 84px; }
.narrow .tl-mark { width: 20px; height: 20px; margin-left: -10px; }
.narrow .tl-mark.s0 { top: 16px; }
.narrow .tl-mark.s1 { bottom: 16px; }
.narrow .tl-victim { width: 15px; height: 15px; margin-left: -7px; }
.narrow .replay-bar { width: calc(100vw - 12px); top: 54px; }
.narrow .replay-bar .btn.small { min-width: 38px; padding: 2px 6px; }
.narrow .replay-bar .btn .kbd { display: none; }

/* ------------------------------------------------ looks (meta/cosmetics.js): faction frames, the Looks tab */

.playercard.frame-order, .card.frame-order, .look-frame.frame-order { box-shadow: 0 0 0 2px #fff6dc, 0 0 0 4px #d9b45a, 0 0 12px rgba(245, 197, 66, 0.45); }
.playercard.frame-wild, .card.frame-wild, .look-frame.frame-wild { box-shadow: 0 0 0 2px #2f7a3a, 0 0 0 4px #7fd35f, 0 0 12px rgba(95, 191, 74, 0.45); }
.playercard.frame-arcane, .card.frame-arcane, .look-frame.frame-arcane { box-shadow: 0 0 0 2px #4a2a8a, 0 0 0 4px #b48cff, 0 0 14px rgba(181, 108, 255, 0.55); }
.playercard.frame-shadow, .card.frame-shadow, .look-frame.frame-shadow { box-shadow: 0 0 0 2px #0c0a10, 0 0 0 4px #8a4b9a, 0 0 14px rgba(60, 20, 80, 0.8); }
.look-emoji { font-size: 40px; line-height: 1; }
.look-frame { display: block; width: 52px; height: 36px; background: linear-gradient(160deg, #3a3044, #1d1724); border: 2px solid #000; }

/* A live event (meta/events.js): the corner box on wide screens, one line above the logo on phones */
.event-chip { display: none; padding: 2px 10px; background: rgba(10, 7, 12, 0.8); border: 2px solid var(--gold); text-align: center; }
@media (max-width: 700px) {
  .event-chip { display: block; }
  .menu-corner.br .event-box { display: none; }
}

/* The profile's numbers per mode (profile.js record) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: var(--well, rgba(0, 0, 0, 0.22)); border: 2px solid var(--line); text-align: center; min-width: 0; }
.stat-tile b { font-size: 22px; line-height: 1; }
.role-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 36px; align-items: center; gap: 6px; }
.role-row .bar { height: 8px; }

/* Saved teams (profile > Teams) */
.team-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.team-slot { aspect-ratio: 1; display: grid; place-items: center; padding: 0; background: var(--inset); border: 2px dashed var(--line); cursor: pointer; }
.team-slot.filled { border-style: solid; border-color: #000; background: radial-gradient(circle at 50% 38%, #3e3448, #1d1724 75%); }
.team-slot canvas { width: 80%; height: 80%; image-rendering: pixelated; }
.team-row canvas { image-rendering: pixelated; }

/* The emote wheel (match.js): a sphere around your mascot, the 12 emotes on its rim */
.modal-back:has(.emote-wheel-modal) { background: rgba(5, 3, 7, 0.25); }
.modal.emote-wheel-modal { width: auto; background: none; border: 0; border-image: none; box-shadow: none; padding: 0; }
.modal.emote-wheel-modal::before, .modal.emote-wheel-modal::after { display: none; }
.emote-wheel-modal .modal-body { overflow: visible; padding: 0; }
.emote-wheel {
  /* a ring: a stone band rimmed in copper, hollow in the middle (the mascot shows through) */
  position: relative; width: 216px; height: 216px; border-radius: 50%; box-sizing: border-box;
  border: 52px solid #262030; background: none;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--copper-dk), 0 0 0 8px #000, 0 12px 26px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #000, inset 0 0 0 6px var(--copper-dk), inset 0 0 0 8px #000;
  animation: wheel-in 0.16s ease-out;
}
@keyframes wheel-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* the emotes on the band, no boxes (positions are from the wheel's outer corner) */
.emote-orb {
  position: absolute; width: 44px; height: 44px; margin: -74px 0 0 -74px; padding: 0;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7)); transition: transform 0.1s;
}
.emote-orb:hover, .emote-orb:focus-visible { transform: scale(1.3); background: radial-gradient(circle, rgba(245, 197, 66, 0.5), rgba(245, 197, 66, 0) 70%); outline: none; }
/* the hollow middle: a click closes the wheel */
.emote-hub { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.emote-hub:focus-visible { outline: 2px dashed rgba(245, 197, 66, 0.7); }
/* the pointed emote's name, on a tag under the ring */
.emote-name {
  position: absolute; left: 50%; top: calc(100% + 52px + 10px); transform: translateX(-50%); white-space: nowrap;
  padding: 3px 10px; font-size: 12px; color: var(--gold); background: #17121d; border: 2px solid #000; box-shadow: 0 0 0 2px var(--copper-dk);
  pointer-events: none;
}
/* the wheel's two pages (emotes, the chat wheel's phrases): two tabs over the ring */
.wheel-pages { position: absolute; left: 50%; bottom: calc(100% + 52px + 10px); transform: translateX(-50%); display: flex; gap: 4px; }
.wheel-page { width: 34px; height: 28px; padding: 0; font-size: 16px; line-height: 1; cursor: pointer; background: #17121d; border: 2px solid #000; box-shadow: 0 0 0 2px var(--copper-dk); opacity: 0.65; }
.wheel-page.on { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.wheel-page:hover, .wheel-page:focus-visible { opacity: 1; outline: none; }
/* the phrases: pills beside the ring, their words outward */
.phrase-pill {
  position: absolute; margin: -52px 0 0 -52px; padding: 5px 10px; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text, #ece3d6); background: #17121d; border: 2px solid #000; box-shadow: 0 0 0 2px var(--copper-dk), 0 4px 0 rgba(0, 0, 0, 0.45);
  animation: wheel-in 0.16s ease-out;
}
.phrase-pill.r { transform: translate(0, -50%); }
.phrase-pill.l { transform: translate(-100%, -50%); }
.phrase-pill:hover, .phrase-pill:focus-visible { color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 4px 0 rgba(0, 0, 0, 0.45); outline: none; }
.mascot-btn { padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.mascot-btn:hover, .mascot-btn:focus-visible { outline: 2px dashed rgba(242, 193, 78, 0.8); outline-offset: -2px; }

/* The game's cursors (platform/cursors.js; Settings > Display). Without them: the system's. */
.game-cursors body { cursor: var(--cur-arrow), auto; }
.game-cursors :is(button, a, select, summary, label, [role="tab"], .toggle, input[type="range"], input[type="checkbox"], .champ-tile, .card, .list-item):not(:disabled) { cursor: var(--cur-hand), pointer; }
.game-cursors :is(button, .champ-tile, .card):disabled, .game-cursors .champ-tile.disabled { cursor: var(--cur-forbid, var(--cur-arrow)), not-allowed; }
.game-cursors .chron-grip, .game-cursors .emblem-stage canvas { cursor: var(--cur-grab, var(--cur-hand)), grab; }
.game-cursors .chron-grip:active, .game-cursors .emblem-stage canvas:active { cursor: var(--cur-grabbing, var(--cur-hand)), grabbing; }
.game-cursors :is(input[type="text"], input[type="email"], input[type="password"], input:not([type]), textarea) { cursor: text; }
.game-cursors [data-tip]:not(button):not(.cell-btn) { cursor: var(--cur-look), help; }
.game-cursors .cell-btn:disabled, .game-cursors .cell-btn[data-cur=""] { cursor: var(--cur-arrow), default; }
.game-cursors .cell-btn[data-cur="hand"] { cursor: var(--cur-hand), pointer; }
.game-cursors .cell-btn[data-cur="look"] { cursor: var(--cur-look), help; }
.game-cursors .cell-btn[data-cur="sword"] { cursor: var(--cur-sword), crosshair; }
.game-cursors .cell-btn[data-cur="wand"] { cursor: var(--cur-wand), pointer; }
.game-cursors .cell-btn[data-cur="ult"] { cursor: var(--cur-ult), pointer; }
.game-cursors .cell-btn[data-cur="boot"] { cursor: var(--cur-boot), pointer; }
.game-cursors .cell-btn[data-cur="ally"] { cursor: var(--cur-ally), pointer; }
.game-cursors .cell-btn[data-cur="place"] { cursor: var(--cur-place), pointer; }
.game-cursors .ms-plot { cursor: var(--cur-look), crosshair; }
/* the walking boots over a square to move to (platform/cursors.js) */
.walk-cursor { position: fixed; left: 0; top: 0; z-index: 100000; width: 32px; height: 32px; pointer-events: none; image-rendering: pixelated; }
.walk-cursor.painted { width: 24px; height: 24px; image-rendering: auto; } /* (Neon's cursors are 24 px) */
.walking .cell-btn[data-cur="boot"] { cursor: none; }

/* the docked chronicle's grip (drag to resize, double click to reset) */
.chron-grip { display: none; }
.chronicle.docked { position: absolute; }
.chronicle.docked .chron-grip { display: grid; place-items: center; position: absolute; left: 50%; top: -9px; width: 72px; height: 14px; margin-left: -36px; z-index: 2; cursor: ns-resize; touch-action: none;
  background: #17121f; border: 2px solid #000; box-shadow: 0 0 0 1px rgba(255, 246, 220, 0.15); }
.chronicle.docked .chron-grip i { width: 34px; height: 4px; background: repeating-linear-gradient(90deg, var(--copper-hi) 0 4px, transparent 4px 7px); }
.chronicle.docked .chron-grip:hover i { background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px); }
.game-cursors .chronicle.docked .chron-grip { cursor: ns-resize; }
/* "X's Ultimate is ready" and the auto fight lines */
.chronicle .log .lg.lg-ultready { padding: 1px 8px; color: #ffe2b0; background: linear-gradient(90deg, rgba(255, 154, 60, 0.22), rgba(255, 211, 107, 0.06) 70%); border-left-color: #ffb15e; }
.chronicle .log .lg.lg-ultready .lg-txt::before { content: '⚡ '; }
.chronicle .log .lg.lg-auto { padding: 2px 8px; font-weight: 700; color: #e8fbff; text-shadow: 1px 1px 0 #0a3a48;
  background: repeating-linear-gradient(90deg, rgba(42, 138, 160, 0.55) 0 10px, rgba(47, 150, 173, 0.55) 10px 20px); border-left-color: #7ff0ff; }
.chronicle .log .lg.lg-auto .lg-txt::before { content: '🤖 '; }
.chronicle .log .lg.lg-warn[data-tip] { cursor: help; }
.game-cursors .chronicle .log .lg.lg-warn[data-tip] { cursor: var(--cur-look), help; }
/* the sudden death bubble */
.sd-tip { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.sd-head { display: flex; align-items: center; gap: 6px; color: #ffd36b; }
.sd-skull { font-size: 18px; }
.sd-step { display: flex; justify-content: space-between; gap: 12px; padding: 1px 6px; font-size: 12px; background: rgba(229, 72, 77, 0.1); border-left: 3px solid rgba(229, 72, 77, 0.5); }
.sd-step b { color: #ff8a80; font-family: var(--font-num); font-size: 15px; font-weight: normal; }
.sd-step.now { background: rgba(229, 72, 77, 0.3); border-left-color: #ff4a3a; }
/* the game's length at the end */
.res-length { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--font-num); font-size: 18px; }
.res-length canvas, .res-length img { width: 16px; height: 16px; image-rendering: pixelated; }

/* Big desktop windows: with Settings > Display > "Screens in a window" (.screen-box), every screen (but
   the menu, a match and the snake) is one centred window over the city, the city dimmed around it, its
   head a band; with it off, the panels alone. Either way the content is centred */
@media (min-width: 1100px) and (min-height: 620px) {
  .screen-box .screen.win {
    inset: calc(14px + var(--safe-t)) 0 calc(14px + var(--safe-b));
    width: min(1240px, calc(100vw - 56px));
    margin: 0 auto;
    background: rgba(20, 15, 24, 0.95);
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px var(--copper-dk), inset 0 0 0 4px #000, 0 0 0 100vmax rgba(8, 6, 12, 0.42), 0 14px 40px rgba(0, 0, 0, 0.6);
  }
  .screen-box .screen.win > .screen-head {
    padding: 10px 20px;
    min-height: 64px;
    background: linear-gradient(rgba(46, 33, 44, 0.95), rgba(28, 20, 32, 0.95));
    border-bottom: 2px solid var(--copper-dk);
    box-shadow: 0 2px 0 #000;
    margin-bottom: 10px;
  }
  .screen-box .screen.win .screen-body { padding: 8px 28px 26px; }
  .screen-box .screen.win .screen-foot { border-top: 2px solid var(--copper-dk); background: rgba(28, 20, 32, 0.9); }
  .screen.win .grid.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  /* the menu's lower panels and a match's rosters come in from the edges, around a centred column */
  .menu-corner.bl { left: max(12px, calc(50% - 720px)); }
  .menu-corner.br { right: max(12px, calc(50% - 720px)); }
  .roster.left { left: max(8px, calc(50% - 720px)); }
  .roster.right { right: max(8px, calc(50% - 720px)); }
  .draft-layer .dr { width: min(1480px, 100%); margin: 0 auto; }
  /* the hub page (inde2.html): its bars stay full width, the windows and its home sit centred between them */
  .screen-box.hub-bar-on #app > .screen.win { top: calc(var(--safe-t) + var(--hub-bar-h) + 14px); bottom: calc(var(--safe-b) + var(--hub-bottom-h) + 14px); }
  .hub-bar-on #app > .screen-menu.hub { left: 0; right: 0; width: min(1480px, 100%); margin: 0 auto; }
}

/* the CPU thinking (match header): three dots that come and go */
.think-dots i { font-style: normal; animation: think-dot 1.2s steps(1) infinite; }
.think-dots i:nth-child(2) { animation-delay: 0.2s; }
.think-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-dot { 0%, 100% { opacity: 0.15; } 30%, 70% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .think-dots i { animation: none; } }
.reduce-motion .think-dots i { animation: none; }

/* Mascots on patrol: a slot per mascot (its picture, name, rarity and boost), and the picker */
.pet-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pet-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.pet-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; color: var(--text); font: inherit; text-align: left; background: var(--panel-3); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); }
button.pet-tile { cursor: pointer; }
button.pet-tile:hover { filter: brightness(1.12); }
.pet-tile.r-rare { box-shadow: inset 0 0 0 2px var(--rarity-rare); }
.pet-tile.r-epic { box-shadow: inset 0 0 0 2px var(--rarity-epic); }
.pet-tile.r-legendary { box-shadow: inset 0 0 0 2px var(--rarity-legendary), 0 0 10px rgba(245, 166, 35, 0.35); }
.pet-tile.empty { border-style: dashed; border-color: var(--line); box-shadow: none; background: rgba(20, 15, 24, 0.6); }
.pet-tile.selected { outline: 2px solid var(--teal); }
.pet-tile.taken { opacity: 0.5; cursor: default; }
.pet-taken { position: absolute; right: 6px; top: 4px; color: var(--muted); }
.pet-pic { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; background: var(--inset); border: 2px solid #000; }
.pet-pic canvas { width: 44px; height: 44px; image-rendering: pixelated; }
.pet-pic.empty { font-size: 24px; color: var(--muted); }
.pet-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pet-info b { font-size: var(--fs-s); }
.pet-info small { font-size: var(--fs-xs); }

/* Daily quests with the week (like Dragonscape Idle's): the time left, the week's bar and its chests, the days, a card per quest */
.week-left { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-num); font-size: 18px; color: var(--gold); background: var(--inset); border: 2px solid #000; }
.wk-box { gap: 10px; }
.wk-pct { font-family: var(--font-title); font-size: calc(16px * var(--ui-scale)); color: var(--gold); text-shadow: 0 2px 0 #000; }
.wk-bar { position: relative; height: 118px; margin: 0 4px; }
.wk-track { position: absolute; left: 0; right: 0; top: 23px; height: 8px; background: #0b080d; border: 2px solid #000; }
.wk-fill { display: block; height: 100%; background: linear-gradient(90deg, #c98f2a, var(--gold)); }
.wk-nodes { position: absolute; inset: 0; }
.wk-node { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; color: var(--text); font: inherit; background: none; border: none; cursor: default; }
.wk-node.ready { cursor: pointer; }
/* each chest on its own framed square tile (the game's copper frame): dimmed until reached, then a gold
   glow and a little hop; opened, a green frame and a check */
.wk-chest { position: relative; display: grid; place-items: center; width: 54px; height: 54px; background: linear-gradient(180deg, #3a2f44, #1e1826); border: 9px solid var(--copper-dk); border-image: var(--frame-button) 9 fill / 9px / 0 stretch; image-rendering: pixelated; filter: grayscale(0.75) brightness(0.65); }
.wk-chest canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.wk-node.ready .wk-chest { filter: none; box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245, 197, 66, 0.55); animation: wk-hop 1.2s steps(2) infinite; }
.wk-node.ready:hover .wk-chest { filter: brightness(1.2); }
.wk-node.claimed .wk-chest { filter: none; box-shadow: 0 0 0 2px var(--good); }
.wk-node.claimed .wk-chest canvas { opacity: 0.75; }
@keyframes wk-hop { 50% { transform: translateY(-3px); } }
.wk-check { position: absolute; right: -14px; bottom: -14px; display: grid; place-items: center; width: 20px; height: 20px; font-size: 13px; font-weight: 700; color: #fff; background: #3f9e3a; border: 2px solid #000; }
.wk-at { color: var(--text-2); }
.wk-prize { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; background: var(--panel-3); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.wk-day b { font-size: var(--fs-xs); white-space: nowrap; }
.wk-day small { font-size: 11px; color: var(--text-2); }
.wk-day.full b { color: var(--good); }
.wk-day.today { box-shadow: inset 0 0 0 2px var(--gold); }
.wk-day.today b { color: var(--gold); }
.wk-day.later { opacity: 0.6; }
.quest-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; background: var(--panel-3); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); }
.quest-card.done { box-shadow: inset 0 0 0 2px var(--gold); }
.quest-card.claimed { opacity: 0.6; }
.qc-pic { display: grid; place-items: center; width: 62px; height: 62px; background: var(--inset); border: 2px solid #000; }
.qc-pic canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.qc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qc-title { font-weight: 700; }
.qc-prog { display: flex; align-items: center; gap: 10px; }
.qc-prog .bar { flex: 1; height: 10px; }
.qc-prog .bar > b { display: none; }
.qc-n { font-family: var(--font-num); font-size: 18px; color: var(--text-2); white-space: nowrap; }
.qc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qc-rewards { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-family: var(--font-num); font-size: 17px; color: var(--text); background: var(--inset); border: 2px solid #000; white-space: nowrap; }
.qchip canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.qchip.xp { color: var(--teal-hi); box-shadow: inset 0 0 0 1px var(--teal-dk); }
.qchip.gems { color: #9fd8ff; }
.qchip.coins { color: var(--gold); }
.qc-go { min-width: 110px; }
@media (max-width: 700px) {
  .wk-bar { margin: 0; height: 128px; }
  .wk-prize { flex-direction: column; gap: 1px; }
  .wk-chest { width: 44px; height: 44px; border-width: 7px; border-image-width: 7px; }
  .wk-chest canvas { width: 24px; height: 24px; }
  .wk-track { top: 18px; }
  .wk-prize .qchip { font-size: 13px; padding: 1px 4px; }
  .wk-days { gap: 3px; }
  .wk-day b { font-size: 10px; }
  .quest-card { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .qc-pic { width: 48px; height: 48px; }
}

/* A roster row's card (battle): its numbers, each with where it comes from, and its items */
.st-tip { width: 300px; max-width: 80vw; display: flex; flex-direction: column; gap: 8px; white-space: normal; }
.st-head { display: flex; align-items: center; gap: 8px; }
.st-head canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.st-head b { display: block; font-size: var(--fs-s); }
.st-head small { color: var(--gold); font-size: var(--fs-xs); }
.st-rows { display: flex; flex-direction: column; gap: 3px; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; padding: 2px 0; border-bottom: 1px solid var(--line); }
.st-l { font-size: var(--fs-xs); color: var(--text-2); }
.st-v { font-family: var(--font-num); font-size: 18px; color: var(--text); text-align: right; }
.st-parts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.st-part { font-size: 11px; color: var(--muted); }
.st-part.item { color: var(--teal-hi); }
.st-part.rally { color: var(--gold); }
.st-part.other { color: #c8a8ff; }
.st-items { display: flex; flex-direction: column; gap: 4px; }
.st-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; align-items: center; }
.st-pic { width: 28px; height: 28px; image-rendering: pixelated; background: var(--inset); border: 1px solid #000; }
.st-item b { font-size: var(--fs-xs); }
.st-hint { border-top: 1px solid var(--line); padding-top: 4px; }

/* The Gauntlets: a card each (difficulty, fights, resistances, what opens it), the chosen one's detail and chest */
.gx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.gx-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gx-card.selected { box-shadow: 0 0 0 2px var(--teal), 0 0 14px rgba(63, 224, 184, 0.35); }
.gx-card.locked { filter: grayscale(0.6) brightness(0.75); }
.gx-top { display: flex; align-items: center; gap: 6px; }
.gx-top b { flex: 1; min-width: 0; }
.gx-diff { padding: 1px 6px; font-size: 11px; font-weight: 700; border: 2px solid #000; }
.gx-diff.d-easy { color: #1c1206; background: var(--good); }
.gx-diff.d-normal { color: #1c1206; background: var(--gold); }
.gx-diff.d-hard { color: #fff; background: var(--red); }
.gx-diff.d-nightmare { color: #fff; background: #5a2a8a; box-shadow: 0 0 8px rgba(180, 120, 255, 0.5); }
.gx-event { padding: 1px 6px; font-size: 11px; font-weight: 700; color: #1c1206; background: var(--teal); border: 2px solid #000; }
.gx-resist { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.chip.resist { font-size: 11px; padding: 1px 6px; }
.chip.r-fire { color: #ffb066; } .chip.r-ice { color: #9fe0f0; } .chip.r-shadow { color: #c8a8ff; }
.chip.r-arcane { color: #d0a0ff; } .chip.r-holy { color: #ffe08a; } .chip.r-physical { color: #d8cce0; }
.gx-detail.d-nightmare { box-shadow: inset 0 3px 0 #a070ff; }
.gx-detail.d-hard { box-shadow: inset 0 3px 0 var(--red); }
.gx-rivals canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.gx-chest { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--inset); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--copper-dk); }
.gx-chest-head { display: flex; align-items: center; gap: 8px; }
.gx-chest-head canvas { image-rendering: pixelated; }
.gx-pool { display: flex; flex-wrap: wrap; gap: 4px; }
.gx-pool-item { display: grid; place-items: center; width: 32px; height: 32px; background: var(--panel-3); border: 2px solid #000; cursor: help; }
.gx-pool-item canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.gx-opened { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; background: var(--inset); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(245, 197, 66, 0.3); }
.gx-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--panel-3); border: 2px solid #000; min-width: 240px; }
.gx-item canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.gx-item.r-rare { box-shadow: inset 0 0 0 2px var(--rarity-rare); }
.gx-item.r-epic { box-shadow: inset 0 0 0 2px var(--rarity-epic); }
.gx-item.r-legendary { box-shadow: inset 0 0 0 2px var(--rarity-legendary); }


/* champion types (rules 10): its type, what hurts it more and less, what it deals */
.ty-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-xs); }
.ty-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid currentColor; font-weight: 700; }
.ty-steel { color: #c9d3de; } .ty-earth { color: #c9a06a; } .ty-wild { color: #8fd16a; } .ty-snow { color: #a8e4ff; }
.ty-flame { color: #ff9a4a; } .ty-shadow { color: #b48cff; } .ty-light { color: #ffe27a; } .ty-arcane { color: #7fb8ff; }
.ty-weak { color: var(--bad); }
.ty-resist { color: var(--good); }
.ty-deals { color: var(--text-2); flex-basis: 100%; }
.st-part.weak { color: var(--bad); }
.tt-items { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line, #3a3346); }
/* the mascot's perk in games: on its card, and its line on the results screen */
.card .sub.mperk { color: var(--teal-hi); font-size: 10px; line-height: 1.2; white-space: normal; text-align: center; }
.mperk-line { color: var(--gold); gap: 6px; align-items: center; }
.mperk-line canvas { width: 22px; height: 22px; image-rendering: pixelated; }

/* the patrol's stage: the team marching, fighting or resting, in pixels three times as big */
.patrol-stage-wrap { position: relative; margin: -4px -4px 2px; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.08); background: #120e16; }
.patrol-stage { display: block; width: 100%; height: 126px; image-rendering: pixelated; }
.ps-label { padding: 3px 8px; color: var(--text); background: #1d1724; border-top: 2px solid #000; }
@media (max-width: 760px) { .patrol-stage { height: 104px; } }

/* the camp as a timeline: a square per battle (the rivals' face), a red line filling as they are fought */
.camp-track { position: relative; padding: 2px 0; }
.ct-line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 26px; height: 8px; background: #0b080d; border: 2px solid #000; }
.ct-line i { display: block; height: 100%; width: var(--fill); background: linear-gradient(90deg, #8f1f24, var(--team-red)); }
.ct-cells { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
.ct-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.ct-face { position: relative; display: grid; place-items: center; width: min(52px, 100%); aspect-ratio: 1; background: linear-gradient(180deg, #3a2f44, #1e1826); border: 2px solid #000;
  box-shadow: inset 0 0 0 2px var(--copper-dk); filter: grayscale(0.85) brightness(0.55); }
.ct-face canvas { width: 70%; height: 70%; image-rendering: pixelated; }
.ct-cell small { font-size: 11px; color: var(--text-2); }
.ct-cell.fought .ct-face { filter: none; box-shadow: inset 0 0 0 2px var(--team-red), 0 0 10px rgba(229, 72, 77, 0.45); }
.ct-cell.now .ct-face { filter: none; box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(245, 197, 66, 0.55); animation: wk-hop 1.2s steps(2) infinite; }
.ct-cell.now small { color: var(--gold); }
.ct-check { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 16px; height: 16px; font-size: 11px; font-weight: 700; color: #fff; background: var(--team-red); border: 2px solid #000; }
@media (max-width: 760px) {
  .ct-cells { gap: 2px; }
  .ct-line { top: 14px; height: 6px; }
  .ct-face { border-width: 1px; }
  .ct-check { width: 12px; height: 12px; font-size: 9px; right: -4px; bottom: -4px; }
}

/* the patrol box's little stage: the champions only, on the box itself (minimized: the lines alone) */
.pw-head { align-items: center; }
.pw-head .grow { flex: 1; text-align: right; }
.pw-min { min-height: 0; width: 20px; height: 18px; padding: 0; font-size: 11px; line-height: 1; color: var(--text-2); background: #120e16; border: 1px solid #000; cursor: pointer; }
.pw-min:hover { color: var(--gold); }
.pw-body { display: flex; flex-direction: column; gap: 3px; }
/* the game pass's season scene (screens/shop.js) */
.ps-season-art { display: block; width: 100%; max-height: 220px; object-fit: cover; border: 2px solid #000; border-radius: 6px; margin-bottom: 10px; }
.patrol-stage-wrap.bare { margin: 0; border: 0; box-shadow: none; background: none; }
/* the patrol in the new art (ui/patrol-stage.js): the route's painted layers behind the canvas, each 1920 px of a
   360 px picture wide, scrolling at its own speed on the march (cqh: the scene's height, so a layer's width is
   533cqh whatever the stage's size); the camp's painting when it is full */
.ps-scene { position: absolute; left: 0; right: 0; top: 0; height: 126px; overflow: hidden; container-type: size; pointer-events: none; }
.ps-scene > i { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-size: auto 100%; background-position: 0 100%; image-rendering: auto; }
.ps-scene > .ps-sky { top: 0; }
.ps-scene > .ps-far { height: 55.6%; }
.ps-scene > .ps-near { height: 44.4%; }
.ps-scene > .ps-ground { height: 22.2%; }
.ps-scene > .ps-camp { top: 0; background-size: cover; background-position: 50% 70%; background-repeat: no-repeat; opacity: 0; transition: opacity 0.6s; }
.ps-camping .ps-scene > .ps-camp { opacity: 1; }
.ps-moving .ps-scene > i { animation: ps-pan linear infinite; }
.ps-moving .ps-scene > .ps-camp { animation: none; }
.ps-moving .ps-scene > .ps-sky { animation-duration: 160s; }
.ps-moving .ps-scene > .ps-far { animation-duration: 48s; }
.ps-moving .ps-scene > .ps-near { animation-duration: 21s; }
.ps-moving .ps-scene > .ps-ground { animation-duration: 14s; }
@keyframes ps-pan { to { background-position-x: -533.33cqh; } }
.ps-art .patrol-stage { position: relative; }
@media (max-width: 760px) { .ps-scene { height: 104px; } }
.pw-stage .ps-scene { height: 52px; }
.patrol-widget.docked .pw-stage .ps-scene { height: 88px; }
.pw-stage .patrol-stage { height: 52px; }
.patrol-widget.min .pw-stage { display: none; }

/* another player's name you can click: their card opens by it (ui/player-pop.js) */
.is-player { cursor: pointer; }
.pname-link { color: var(--teal-hi); text-decoration: underline dotted; text-underline-offset: 2px; }
.is-player:hover, .pname-link:hover { color: var(--gold); }
.player-pop { position: fixed; z-index: 46; width: min(340px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 8px; padding: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); }
.player-pop .playercard { width: 100%; }
.pp-acts { flex-wrap: wrap; }
.pp-acts .btn { flex: 1 1 auto; }

/* the coin toss over the board (the old game's, in this one's look) */
.coin-toss { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(10, 6, 14, 0.82), rgba(10, 6, 14, 0.55) 70%); transition: opacity 0.25s; }
.coin-toss.out { opacity: 0; }
.coin-stage { position: relative; width: 224px; height: 224px; margin-top: 150px; perspective: 900px; }
.coin3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; backface-visibility: hidden; }
.coin-face.back { transform: rotateY(180deg); }
.coin-shadow { position: absolute; left: 24%; right: 24%; bottom: -30px; height: 14px; background: rgba(0, 0, 0, 0.5); }
.coin-result { min-height: 32px; padding: 4px 14px; font-family: var(--font-title); font-size: 24px; color: var(--text);
  text-shadow: 0 3px 0 #000; opacity: 0; text-align: center; }
.coin-result.show { opacity: 1; }
.coin-result.s0 { color: #9fc0ff; }
.coin-result.s1 { color: #ffa497; }
@media (max-width: 760px) { .coin-stage { width: 160px; height: 160px; margin-top: 110px; } .coin-result { font-size: 18px; } }

/* online Fast match: the other side's picks live (faded while they choose, a tick once locked in) */
.dr-slot.live-pick.picking canvas { opacity: 0.55; filter: grayscale(0.35); }
.dr-slot.live-pick.picking { box-shadow: inset 0 0 0 2px rgba(255, 246, 220, 0.18); animation: lp-pulse 1.4s ease-in-out infinite; }
@keyframes lp-pulse { 50% { box-shadow: inset 0 0 0 2px rgba(245, 197, 66, 0.55); } }
.dr-slot.live-pick { position: relative; }
.lp-lock { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 16px; height: 16px; font-size: 11px; font-weight: 700; color: #fff; background: #3f9e3a; border: 2px solid #000; }

/* what a champion can hit (the old game's three little boards): its square gold, the squares in reach red */
.reach-row { display: flex; align-items: center; gap: 10px; }
.reach-set { display: flex; gap: 8px; flex-shrink: 0; }
.reach-spot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.reach-spot span { font-size: 10px; color: var(--text-2); font-weight: 700; }
.reach-spot.here .reach-grid { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(242, 193, 78, 0.8); }
.reach-spot.here span { color: var(--gold); }
.reach-grid { display: grid; grid-template-columns: repeat(3, 10px); gap: 2px; padding: 3px; background: #120e17; border: 2px solid #000; }
.reach-grid i { width: 10px; height: 10px; background: #4f8a3d; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
.reach-grid i.hit { background: var(--bad); }
.reach-grid i.me { background: var(--gold); }
/* the patrol box minimized: just its head line (the stage and the HP bars hidden) */
.patrol-widget.min .pw-body { display: none; }
/* the patch notes */
.news { gap: 8px; }
.news-patch { background: rgba(0, 0, 0, 0.22); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.07); }
.news-patch > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; }
.news-patch > summary::-webkit-details-marker { display: none; }
.news-patch > summary b { color: var(--copper-hi); }
.news-patch[open] > summary { border-bottom: 1px solid rgba(255, 246, 220, 0.08); }
.news-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 12px; }
.news-kind { display: inline-block; margin-bottom: 4px; padding: 1px 8px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: 1px solid currentColor; }
.news-sec.new .news-kind { color: var(--teal); }
.news-sec.balance .news-kind { color: var(--gold); }
.news-sec.fixes .news-kind { color: var(--blue-hi); }
.news-sec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); line-height: 1.4; }
.violet { color: #c8a0ff; }
.craft-head { align-items: center; margin-bottom: 10px; }
.craft-funds { align-items: center; }
.craft-perk { font-size: 11px; text-align: center; }
.chip-btn.on { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.card .surplus { max-width: 120px; white-space: normal; text-align: center; line-height: 1.25; }
/* the stats window: over the game (each team's HP, the damage per turn) */
.ms-legend { display: flex; gap: 14px; }
.ms-legend span { display: flex; align-items: center; gap: 6px; }
.ms-legend i { width: 14px; height: 4px; background: var(--side); }
.ms-plot.ms-hp { height: 150px; margin-right: 0; }
.ms-hp-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ms-hp-line.s0 { stroke: #8cc0ff; }
.ms-hp-line.s1 { stroke: #ff9a9a; }
.ms-hp-area.s0 { fill: var(--blue); opacity: 0.1; }
.ms-hp-area.s1 { fill: var(--team-red); opacity: 0.1; }
.ms-tip-row.s0 b { color: #8cc0ff; }
.ms-tip-row.s1 b { color: #ff9a9a; }
.ms-dpt { display: flex; align-items: stretch; gap: 2px; height: 130px; padding: 6px 6px 0; background: linear-gradient(180deg, #161224, #0b0a12); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); }
.ms-dpt-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: help; }
.ms-dpt-col:hover { background: rgba(255, 255, 255, 0.05); }
.ms-dpt-bars { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1px; }
.ms-dpt-bars i { display: block; min-height: 1px; background: var(--side); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.ms-dpt-n { height: 14px; font-size: 9px; text-align: center; color: var(--muted); overflow: visible; white-space: nowrap; }
/* the ready check: "Match found!", the countdown ring, who accepted */
.q-foot { margin-top: 10px; }
.q-found-title { font-family: var(--font-title); font-size: 22px; color: var(--gold, #f5c542); text-shadow: 0 2px 0 #000; }
.q-found-title.pop { animation: pop-in 0.25s ease-out; }
.q-ring { --q: 100; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--teal, #3fe0b8) calc(var(--q) * 1%), rgba(255, 255, 255, 0.08) 0); transition: background 0.9s linear; }
.q-ring b { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: #120e17; box-shadow: inset 0 0 0 2px #000; }
.q-dots { display: flex; gap: 6px; }
.q-dots i { width: 14px; height: 14px; border: 2px solid #000; background: rgba(255, 255, 255, 0.12); }
.q-dots i.on { background: var(--good, #5fd068); box-shadow: 0 0 8px rgba(95, 208, 104, 0.6); }
.q-found .q-accept { min-width: 160px; font-size: 16px; }
/* ranked: the progress to the next rank, the promotion series, a season's reward */
.rk-bar { height: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid #000; }
.rk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper-dk), var(--gold, #f5c542)); }
.rk-promo { display: flex; gap: 4px; }
.rk-promo i { width: 14px; height: 14px; border: 2px solid #000; background: rgba(255, 255, 255, 0.12); }
.rk-promo i.w { background: var(--good, #5fd068); }
.rk-promo i.l { background: var(--bad, #e5484d); }
.rk-season { padding: 8px 10px; background: rgba(245, 197, 66, 0.08); border: 1px solid rgba(245, 197, 66, 0.35); }
/* the ranked season frames */
.playercard.frame-rkSilver, .card.frame-rkSilver, .look-frame.frame-rkSilver { box-shadow: 0 0 0 2px #3a3f4a, 0 0 0 4px #c9d1dc, 0 0 10px rgba(201, 209, 220, 0.45); }
.playercard.frame-rkGold, .card.frame-rkGold, .look-frame.frame-rkGold { box-shadow: 0 0 0 2px #6a4a12, 0 0 0 4px #f5c542, 0 0 12px rgba(245, 197, 66, 0.55); }
.playercard.frame-rkStar, .card.frame-rkStar, .look-frame.frame-rkStar { box-shadow: 0 0 0 2px #123a5a, 0 0 0 4px #5ab4ff, 0 0 0 6px #f5c542, 0 0 14px rgba(90, 180, 255, 0.55); }
.playercard.frame-rkTrophy, .card.frame-rkTrophy, .look-frame.frame-rkTrophy { box-shadow: 0 0 0 2px #4a1a5a, 0 0 0 4px #ff9ae0, 0 0 0 6px #f5c542, 0 0 16px rgba(255, 154, 224, 0.55); }
.playercard.frame-rkMythic, .card.frame-rkMythic, .look-frame.frame-rkMythic { box-shadow: 0 0 0 2px #000, 0 0 0 4px #e8d0ff, 0 0 0 6px #9a5ae8, 0 0 0 8px #000, 0 0 22px rgba(190, 120, 255, 0.8); animation: crown-glow 2.4s ease-in-out infinite; }
.playercard.frame-rkCrown, .card.frame-rkCrown, .look-frame.frame-rkCrown { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff1a0, 0 0 0 6px #f5a623, 0 0 0 8px #000, 0 0 20px rgba(255, 220, 120, 0.75); animation: crown-glow 2.4s ease-in-out infinite; }
/* the new art: the frame's picture round the playercard's picture (icons.js frameCard) instead of round the card */
.playercard.art-framed { box-shadow: none; animation: none; }
.playercard.art-framed .pc-emblem { transform: scale(0.68); background: var(--avatar-bg); }
.framed { position: relative; display: inline-grid; place-items: center; line-height: 0; flex: none; }
.framed > :first-child { transform: scale(0.7); background: var(--avatar-bg); } /* (under the frame's opening: not see-through) */
.framed > .frame-pic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a box round an avatar gives way to the frame: the frame takes its place, the picture inside it */
.hub-me .hub-pic:has(> .framed), html .hub-me.with-banner .hub-pic:has(> .framed), .roster-head .rh-avatar:has(> .framed) { border: 0; background: none; box-shadow: none; overflow: visible; }
.hub-pic > .framed, .rh-avatar > .framed { width: 100%; height: 100%; }
.playercard .pc-frame { position: absolute; left: 2.5%; top: 10%; height: 80%; width: auto; aspect-ratio: 1; pointer-events: none; filter: drop-shadow(0 2px 0 #000); }
@keyframes crown-glow { 50% { filter: brightness(1.15); } }
/* celebration banners (ui/celebrate.js): top centre, over everything */
#layer-celebrate { position: fixed; left: 0; right: 0; top: 10px; z-index: 90; display: flex; justify-content: center; pointer-events: none; padding: 0 12px; }
.celebrate {
  --cb: #f5c542; --cb-soft: rgba(245, 197, 66, 0.35);
  position: relative; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 16px;
  width: min(560px, 100%); padding: 12px 22px 12px 12px; overflow: hidden; color: #fff6dc;
  background: linear-gradient(115deg, rgba(40, 32, 52, 0.97), rgba(24, 19, 31, 0.97) 60%, rgba(46, 38, 60, 0.97));
  border: 2px solid #000; box-shadow: 0 0 0 2px var(--copper-dk), 0 0 0 4px #000, 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 246, 220, 0.12);
  animation: cb-in 0.42s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.celebrate.out { animation: cb-out 0.3s ease-in forwards; }
@keyframes cb-in { from { transform: translateY(-120%) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cb-out { to { transform: translateY(-60%); opacity: 0; } }
.celebrate.tone-teal { --cb: #3fe0b8; --cb-soft: rgba(63, 224, 184, 0.32); }
.celebrate.tone-violet { --cb: #c8a0ff; --cb-soft: rgba(200, 160, 255, 0.35); }
.celebrate.tone-red { --cb: #ff7a5a; --cb-soft: rgba(255, 122, 90, 0.35); }
.cb-pic { position: relative; flex: 0 0 auto; width: 76px; height: 76px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #3a3048, #17121d 75%); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--cb-soft); }
.cb-pic > canvas, .cb-pic > img, .cb-pic > svg { position: relative; z-index: 1; width: 60px; height: 60px; image-rendering: pixelated; }
.cb-pic > .cb-emoji { position: relative; z-index: 1; font-size: 40px; line-height: 1; }
/* the light coming out of the box, across the banner */
.cb-rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 140px; transform: translate(-6%, -50%) rotate(-8deg); transform-origin: 0 50%;
  background: conic-gradient(from 75deg at 0 50%, transparent 0deg, var(--cb-soft) 8deg, transparent 18deg, var(--cb-soft) 26deg, transparent 34deg);
  opacity: 0.55; pointer-events: none; animation: cb-rays 3.6s ease-in-out infinite; }
@keyframes cb-rays { 50% { opacity: 0.85; } }
/* the new art's burst (celebrate/<id>): round the box, its empty middle on the picture */
.cb-pic > .cb-burst { position: absolute; left: 50%; top: 50%; z-index: 0; width: 150px !important; height: 150px !important; transform: translate(-50%, -50%); pointer-events: none; }
.cb-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-kicker { font-family: var(--font-title); font-size: 13px; letter-spacing: 5px; color: var(--cb); text-transform: uppercase; }
.cb-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cb-title { font-family: var(--font-title); font-size: 26px; color: #fff; text-shadow: 0 2px 0 #000; overflow-wrap: anywhere; }
.cb-value { font-size: 42px; line-height: 1; color: var(--cb); text-shadow: 0 3px 0 #000, 0 0 16px var(--cb-soft); }
.cb-note { font-size: 12px; color: #d8cfc0; }
.cb-spark { position: absolute; z-index: 2; font-style: normal; color: #fff1a0; font-size: 13px; pointer-events: none; animation: cb-twinkle 1.6s ease-in-out infinite; }
.cb-spark.s0 { left: 10px; top: 6px; }
.cb-spark.s1 { left: 84px; bottom: 6px; animation-delay: 0.4s; }
.cb-spark.s2 { right: 18px; top: 8px; animation-delay: 0.8s; }
.cb-spark.s3 { right: 64px; bottom: 10px; font-size: 9px; animation-delay: 1.1s; }
.cb-spark.s4 { right: 40%; top: 4px; font-size: 10px; animation-delay: 0.2s; }
@keyframes cb-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (max-width: 600px) {
  .celebrate { gap: 10px; padding: 8px 14px 8px 8px; }
  .cb-pic { width: 58px; height: 58px; }
  .cb-pic > canvas, .cb-pic > img { width: 46px; height: 46px; }
  .cb-kicker { font-size: 11px; letter-spacing: 3px; }
  .cb-title { font-size: 20px; }
  .cb-value { font-size: 32px; }
}

/* ===================================================== the Raid's tab cards */
.raid-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.raid-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, #2a2234, #1a1520); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.1); }
.raid-tab:hover { box-shadow: inset 0 0 0 1px var(--copper-hi); }
.raid-tab.on { background: linear-gradient(180deg, #3a2e22, #241c16); box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px rgba(245, 197, 66, 0.5); }
.raid-tab b { font-size: 15px; color: #fff6dc; }
.raid-tab.on b { color: var(--gold); }
.raid-tab small { color: var(--muted); }
.raid-tab-pic { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; background: #120e17; border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.raid-tab-pic canvas, .raid-tab-pic img { width: 40px; height: 40px; image-rendering: pixelated; }
.raid-tab-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; border: 2px solid #000; }

/* ===================================================== the world boss */
.wb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.wb-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 900px) {
  .wb { grid-template-columns: minmax(0, 1fr); }
  .raid-tabs { gap: 6px; }
  .raid-tab { padding: 8px; gap: 8px; }
  .raid-tab b { font-size: 13px; }
}
.wb-card { display: flex; flex-direction: column; gap: 10px; }
.wb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-name { font-family: var(--font-title); font-size: 22px; color: var(--copper-hi); text-shadow: 0 2px 0 var(--copper-dk); }
.wb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 12px; color: #ece3d6; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 246, 220, 0.18); border-radius: 999px; }
.wb-chip.hot { color: #ffd0a0; background: rgba(120, 40, 10, 0.55); border-color: rgba(255, 140, 60, 0.5); }
.wb-info { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; padding: 0; font: inherit; font-weight: bold; color: var(--muted); background: none; border: 2px solid currentColor; cursor: pointer; }
.wb-info:hover { color: var(--gold); }
.wb-stats { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px; }
.wb-stat { display: flex; flex-direction: column; gap: 2px; }
.wb-stat b { font-size: 28px; color: #fff6dc; line-height: 1; }
.wb-stat small { font-size: 11px; color: var(--muted); }
.wb-stat.big { align-items: center; }
.wb-stat.big b { font-size: 46px; color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 18px rgba(245, 197, 66, 0.3); }
.wb-stat.right { align-items: flex-end; text-align: right; }
.wb-scene { position: relative; height: 190px; overflow: hidden; border: 2px solid #000; box-shadow: 0 0 0 2px #6a2a14, inset 0 0 30px rgba(0, 0, 0, 0.6); }
.wb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.wb-me { position: absolute; left: 6%; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wb-me-pic { width: 74px; height: 74px; display: grid; place-items: center; background: rgba(20, 30, 20, 0.75); border: 2px solid #000; box-shadow: 0 0 0 2px #5fd068; }
.wb-me-pic canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.wb-me small { color: #fff; text-shadow: 0 1px 0 #000; font-size: 12px; }
.wb-dragon { position: absolute; right: 4%; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wb-dragon > canvas { width: 140px; height: 140px; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(255, 110, 40, 0.55)); animation: wb-breathe 2.8s ease-in-out infinite; }
@keyframes wb-breathe { 50% { transform: translateY(-3px) scale(1.02); } }
.wb-scene.fallen .wb-dragon > canvas { filter: grayscale(1) brightness(0.6); animation: none; transform: rotate(12deg) translateY(16px); }
.wb-lvtag { padding: 1px 8px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 246, 220, 0.25); }
.wb-bar { height: 8px; width: 100%; background: rgba(0, 0, 0, 0.5); border: 1px solid #000; overflow: hidden; }
.wb-bar i { display: block; height: 100%; }
.wb-bar.green { width: 90px; }
.wb-bar.green i { background: #5fd068; }
.wb-dragon .wb-bar.orange { width: 120px; }
.wb-bar.orange i { background: linear-gradient(90deg, #ff6a2a, #ffb347); }
.wb-bar.thin { height: 6px; }
.wb-bar.gold i { background: linear-gradient(90deg, var(--copper-dk), var(--gold)); }
.wb-server { font-size: 13px; font-weight: bold; }
.wb-fallen { text-align: center; color: var(--gold); font-size: 15px; }
.wb-fight { font-size: 17px; }
.wb-hitters { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 246, 220, 0.07); }
.wb-hitter { display: grid; place-items: center; width: 38px; height: 38px; background: #120e17; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.35); }
.wb-hitter canvas { width: 32px; height: 32px; image-rendering: pixelated; }
/* the rewards ready */
.wb-ready { display: flex; flex-direction: column; gap: 8px; }
.wb-ready-title { font-family: var(--font-title); letter-spacing: 2px; color: #fff6dc; }
.wb-ready-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, #3a3022, #2a2218); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.4); }
.wb-ready-row:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.wb-ready-row b { text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.wb-ico { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; }
.wb-ico canvas, .wb-ico img { width: 30px; height: 30px; image-rendering: pixelated; }
.wb-collect { margin-left: auto; font-family: var(--font-title); font-size: 12px; letter-spacing: 1px; color: var(--gold); background: none; border: 0; cursor: pointer; white-space: nowrap; }
/* Server | Top */
.wb-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; }
.wb-seg-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; font: inherit; color: var(--muted); background: none; border: 1px solid transparent; cursor: pointer; }
.wb-seg-btn b { font-size: 15px; }
.wb-seg-btn.on { color: #fff6dc; background: rgba(245, 197, 66, 0.1); border-color: rgba(245, 197, 66, 0.6); }
.wb-sec { font-family: var(--font-title); letter-spacing: 2px; font-size: 13px; color: var(--teal, #3fe0b8); }
.wb-goal, .wb-top { display: flex; flex-direction: column; gap: 6px; }
.wb-total b { font-size: 34px; color: var(--gold); text-shadow: 0 2px 0 #000; }
.wb-lv { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; overflow: hidden; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 246, 220, 0.06); }
.wb-lv > * { position: relative; }
.wb-lv.reached { background: linear-gradient(180deg, #3a3022, #2a2218); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.35); }
.wb-lv.next { box-shadow: 0 0 0 2px var(--gold); }
.wb-lv.next::before { content: ""; position: absolute; inset: 0; width: var(--fill, 0%); background: rgba(245, 197, 66, 0.22); }
.wb-lv.later { opacity: 0.6; }
.wb-lv-at { width: 46px; flex: 0 0 auto; text-align: right; color: var(--muted); font-size: 13px; }
.wb-top-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(0, 0, 0, 0.25); }
.wb-top-row.me { color: var(--good, #5fd068); box-shadow: inset 0 0 0 1px rgba(95, 208, 104, 0.6); background: rgba(20, 60, 30, 0.35); }
.celebrate .cb-value.num { font-size: 50px; line-height: 0.9; }
@media (max-width: 600px) { .celebrate .cb-value.num { font-size: 36px; } }
.cb-pic > .cb-card { width: 68px; height: 34px; }
.tabs .btn.tab-badge, .hub-tab.badge, .hub-btab.badge { position: relative; overflow: visible; }
.card .new-mark, .it-tile .new-mark { position: absolute; left: 50%; top: -7px; transform: translateX(-50%); z-index: 2; padding: 1px 6px; font-size: 9px; letter-spacing: 1px; color: #fff; background: var(--bad, #e5484d); border: 2px solid #000; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); pointer-events: none; }
.hub-tab.badge::after { top: 2px; right: 0; }
.hub-btab.badge::after { top: 2px; right: 6px; }

/* ===================================================== the leaderboard: your card on top, players as cards */
.lb2-head { display: flex; flex-direction: column; gap: 12px; }
.lb2-title { display: flex; align-items: center; gap: 14px; font-family: var(--font-title); font-size: 26px; color: #fff6dc; text-shadow: 0 2px 0 #000; }
.lb2-title canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.lb2-pick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.15); }
.lb2-pick canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.lb2-select { font: inherit; font-size: 15px; font-weight: bold; color: #fff6dc; background: transparent; border: 0; padding: 2px 4px; cursor: pointer; }
.lb2-select option { background: #1d1724; color: #fff6dc; }
.lb2-mebox:empty { display: none; }
.lb2-list { display: flex; flex-direction: column; gap: 8px; }
.lb2-row { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, #241d2c, #1a1520); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.07); }
.lb2-row.me { grid-template-columns: 56px 48px minmax(0, 1fr) auto auto; background: linear-gradient(180deg, #3a2a1c, #2a1e14); box-shadow: 0 0 0 2px var(--copper-dk), inset 0 0 0 1px rgba(245, 197, 66, 0.45); margin-bottom: 4px; }
.lb2-row.mine { box-shadow: inset 0 0 0 1px rgba(63, 224, 184, 0.6); }
.lb2-pos { font-size: 20px; color: var(--muted); text-align: center; }
.lb2-row.me .lb2-pos { color: var(--gold); }
.lb2-row.top1 .lb2-pos, .lb2-row.top2 .lb2-pos, .lb2-row.top3 .lb2-pos { font-size: 26px; }
.lb2-row.top1 { box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.55); }
.lb2-row.top2 { box-shadow: inset 0 0 0 1px rgba(201, 209, 220, 0.45); }
.lb2-row.top3 { box-shadow: inset 0 0 0 1px rgba(205, 127, 50, 0.5); }
.set-sec { margin: 10px 0 0; font-family: var(--font-title); font-size: 16px; color: var(--gold); }
.lb2-ava { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.lb2-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lb2-who > b, .lb2-row.me .lb2-who > b { font-size: 18px; color: var(--gold); }
.lb2-name.btn { padding: 0; font-size: 17px; color: #fff6dc; background: none; border: 0; border-image: none; box-shadow: none; max-width: 100%; text-align: left; }
.lb2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #c8a0ff; background: rgba(120, 80, 200, 0.15); border: 1px solid rgba(200, 160, 255, 0.6); }
.lb2-chip.clan { color: var(--gold); background: rgba(245, 197, 66, 0.1); border-color: rgba(245, 197, 66, 0.6); }
.lb2-val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.lb2-val b { font-size: 24px; color: var(--gold); }
.lb2-val small { font-size: 12px; color: var(--muted); }
.lb2-edit.btn { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; }
@media (max-width: 600px) {
  .lb2-row { grid-template-columns: 34px 44px minmax(0, 1fr) auto; padding: 10px; gap: 8px; }
  .lb2-row.me { grid-template-columns: 34px 44px minmax(0, 1fr) auto auto; }
  .lb2-title { font-size: 21px; }
  .lb2-val b { font-size: 20px; }
}
.lb2-row .lb2-val b.num { font-size: 44px; }
.lb2-row .lb2-pos.num { font-size: 36px; }
@media (max-width: 600px) { .lb2-row .lb2-val b.num { font-size: 36px; } .lb2-row .lb2-pos.num { font-size: 30px; } }
/* the notification centre */
.nc-bell { position: relative; overflow: visible; }
.nc-bell.badge::after { top: -4px; right: -4px; }
.nc { min-width: min(420px, 82vw); }
.nc-sec { font-family: var(--font-title); font-size: 12px; letter-spacing: 2px; color: var(--teal); text-transform: uppercase; margin-top: 4px; }
.nc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 246, 220, 0.07); }
.nc-row.unread { box-shadow: inset 3px 0 0 var(--gold); background: rgba(245, 197, 66, 0.06); }
.nc-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: #120e17; border: 1px solid #000; }
.nc-ico canvas { image-rendering: pixelated; }
/* a player's banner behind their row (online-ui.js withBanner), fading toward the numbers */
.row-bannered { position: relative; overflow: hidden; isolation: isolate; flex-shrink: 0; }
.row-banner { position: absolute; left: 0; top: 0; width: 72%; height: 100%; object-fit: cover; image-rendering: pixelated; z-index: -1; opacity: 0.75; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%); }
.row-bannered .lb2-name.btn, .row-bannered b, .row-bannered .lb2-pos { text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8); }
.roster-head.row-bannered { padding: 4px 6px; margin: -4px -4px 0; }
.roster-head.row-bannered .pname, .roster-head.row-bannered .psub { text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8); }
.it-pick { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.it-select { font: inherit; font-size: 12px; color: #fff6dc; background: #17121d; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.15); padding: 3px 6px; }
/* a mode that opens with a level (new players): its level on a tag */
[data-lv] { position: relative; }
[data-lv]::before { content: "🔒 Lv " attr(data-lv); position: absolute; top: 4px; right: 4px; z-index: 2; padding: 1px 6px; font-size: 10px; color: #fff6dc; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 246, 220, 0.3); pointer-events: none; }
.btn[data-lv]::before, .hub-tab[data-lv]::before { top: -9px; right: -6px; font-size: 9px; padding: 0 4px; }
/* the battle: each team's banner stronger behind X · avatar · name */
.roster-head.row-bannered .row-banner { opacity: 1; width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.35) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.35) 100%); }
.rh-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(10, 8, 14, 0.7); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.25); }
.rh-avatar canvas { width: 34px; height: 34px; image-rendering: pixelated; }
/* how many of an item: the number on a little card, a second card behind when there are more */
.it-stack { position: absolute; top: 6px; left: 6px; width: 30px; height: 36px; z-index: 1; pointer-events: auto; }
.it-stack::before, .it-stack b { position: absolute; inset: 0; border: 2px solid #000; border-radius: 3px; }
.it-stack::before { content: ""; display: none; transform: translate(7px, -5px) rotate(12deg); background: linear-gradient(180deg, #7a6248, #4a3a28); box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.25); }
.it-stack.more::before { display: block; }
.it-stack b { display: grid; place-items: center; font-size: 22px; color: #fff6dc; text-shadow: 0 2px 0 #000;
  background: linear-gradient(180deg, #5a4630, #3a2c1c); box-shadow: inset 0 0 0 1px var(--gold), 0 2px 0 rgba(0, 0, 0, 0.5); }
.ui3 .it-tile { padding-top: 12px; }
/* "1× EQUIPPED": a tag drawn like the battle's HIT tags (plum outline, lit top, shaded bottom) */
.eq-tag { display: inline-block; margin-top: 2px; padding: 4px 6px 3px; font-family: "Press Start 2P", monospace; font-size: 8px; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff1d8; background: #3f9a52; outline: 2px solid #1a1220; box-shadow: inset 0 2px 0 rgba(255, 241, 216, 0.35), inset 0 -2px 0 rgba(26, 18, 32, 0.3); }
.eq-tag.inline { align-self: flex-start; margin: 4px 0 2px 2px; }
/* the tag in its item's quality colour */
.eq-tag.q-common { background: #8a8278; }
.eq-tag.q-rare { background: #3a7fd6; }
.eq-tag.q-epic { background: #8e4fd6; }
.eq-tag.q-legendary { background: #e0902a; }
/* items' banners and count cards in their quality's colour */
.celebrate.tone-common { --cb: #c9c1b4; --cb-soft: rgba(201, 193, 180, 0.3); }
.celebrate.tone-rare { --cb: #6fb0ff; --cb-soft: rgba(79, 157, 255, 0.35); }
.celebrate.tone-epic { --cb: #c08bff; --cb-soft: rgba(176, 110, 255, 0.35); }
.celebrate.tone-legendary { --cb: #ffb347; --cb-soft: rgba(245, 166, 35, 0.4); }
.it-stack.q-common b { background: linear-gradient(180deg, #5e5850, #3e3a34); box-shadow: inset 0 0 0 1px #b8b0a4, 0 2px 0 rgba(0, 0, 0, 0.5); }
.it-stack.q-rare b { background: linear-gradient(180deg, #2e5a96, #1c3a66); box-shadow: inset 0 0 0 1px #6fb0ff, 0 2px 0 rgba(0, 0, 0, 0.5); }
.it-stack.q-epic b { background: linear-gradient(180deg, #5e3a96, #3c2466); box-shadow: inset 0 0 0 1px #c08bff, 0 2px 0 rgba(0, 0, 0, 0.5); }
.it-stack.q-legendary b { background: linear-gradient(180deg, #8a5a1c, #5a3a12); box-shadow: inset 0 0 0 1px #ffb347, 0 2px 0 rgba(0, 0, 0, 0.5); }
.it-stack.q-common::before { background: linear-gradient(180deg, #4a4640, #2e2b27); }
.it-stack.q-rare::before { background: linear-gradient(180deg, #23467a, #142c50); }
.it-stack.q-epic::before { background: linear-gradient(180deg, #4a2e7a, #2e1c50); }
.it-stack.q-legendary::before { background: linear-gradient(180deg, #6e4816, #48300e); }
.ui3 .it-pic { position: relative; overflow: visible; }
.eq-tag.over { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); margin: 0; white-space: nowrap; z-index: 2; font-size: 7px; padding: 3px 5px 2px; }
.eq-tag.over::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1a1220; border-bottom: 0; }
.arena-pic { width: 64px; height: 68px; image-rendering: pixelated; }
.rush-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.rush-mode { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; font: inherit; color: var(--text); cursor: pointer; background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12); }
.rush-mode:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px rgba(245, 197, 66, 0.25); }
.rush-mode b { font-size: 16px; color: var(--gold); }
.rush-mode small { font-size: 12px; color: var(--muted); }
.rush-mode-ico canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.rush-augs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rush-aug { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; text-align: center; font: inherit; color: var(--text); cursor: pointer; background: linear-gradient(180deg, #3a2e48, #221a2c); border: 2px solid #000; box-shadow: inset 0 0 0 1px #c8a0ff; }
.rush-aug.k-fight { box-shadow: inset 0 0 0 1px #ff8a6a; }
.rush-aug.k-now { box-shadow: inset 0 0 0 1px var(--gold); }
.rush-aug:hover { transform: translateY(-2px); filter: brightness(1.15); }
.rush-aug b { font-size: 15px; color: #fff6dc; }
.rush-aug small { font-size: 12px; color: var(--text-2, #c7b9a8); }
.rush-aug-ico canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.rush-aug-chip { padding: 1px 6px; font-size: 10px; color: #c8a0ff; border: 1px solid rgba(200, 160, 255, 0.5); background: rgba(120, 80, 200, 0.15); }
.rush-team { margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; }
.rush-player.ally { box-shadow: inset 3px 0 0 var(--teal); }
/* the EQUIPPED tag astride the tile's top border (as HIT sits on a square's top) */
.it-tile > .eq-tag.over { top: 0; left: 50%; transform: translate(-50%, -50%); font-size: 8px; padding: 4px 6px 3px; z-index: 3; }
.ui3 .it-grid { padding-top: 10px; row-gap: 16px; }
/* (higher: resting on the border, clear of the count card and the wearer) */
.it-tile > .eq-tag.over { top: 3px; transform: translate(-50%, -100%); }
.ui3 .it-grid { padding-top: 20px; row-gap: 26px; }
.rush-sq.centre { box-shadow: inset 0 0 0 2px rgba(245, 197, 66, 0.55); }
.rush-sq.centre::after { content: "🪙"; position: absolute; right: 2px; bottom: 1px; font-size: 10px; opacity: 0.7; pointer-events: none; }
.rush-sq { position: relative; }
.rush-item-on { position: absolute; left: 2px; bottom: 2px; width: 18px; height: 18px; display: grid; place-items: center; background: #120e17; border: 1px solid #000; }
.rush-item-on canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.rush-unit { position: relative; }
.rush-stash { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rush-stash-item { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: #120e17; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.15); cursor: pointer; }
.rush-stash-item.sel { box-shadow: 0 0 0 2px var(--gold); }
.rush-stash-item canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.rush-creeps { padding: 6px 8px; color: #ffb08a; background: rgba(120, 40, 10, 0.3); border: 1px solid rgba(255, 140, 60, 0.4); }
/* Settings > Sound: a channel on one row (its name and value, the slider, a mute button) */
.vol-line { display: flex; align-items: center; gap: 10px; padding: 2px 0; border-bottom: 1px solid rgba(255, 246, 220, 0.05); }
.vol-line .vol-row { flex: 1; min-width: 0; }
.vol-line .vol-mute { flex: 0 0 auto; }
.vol-line .vol-mute[aria-pressed="true"] { color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.vol-row.muted-ch { opacity: 0.45; }
/* the account: what it gives you */
.acc-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
.acc-perk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 246, 220, 0.08); }
.acc-perk-ico { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; background: #120e17; border: 1px solid #000; }
.acc-perk-ico canvas { width: 26px; height: 26px; image-rendering: pixelated; }
@media (max-width: 600px) { .acc-perks { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================== the Patrol: an expedition planner, then a dashboard */
.pt-screen { max-width: 1160px; }
.pt-plan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pt-main { gap: 12px; min-width: 0; }
.pt-side { position: sticky; top: 0; }
@media (max-width: 900px) {
  .pt-plan { grid-template-columns: minmax(0, 1fr); }
  .pt-side { position: static; }
}
/* the routes, as landscapes */
.pt-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .pt-routes { grid-template-columns: minmax(0, 1fr); } }
.pt-route { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: #17121d; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12), 0 4px 10px rgba(0, 0, 0, 0.4); transition: transform 0.1s; }
.pt-route:hover { transform: translateY(-2px); }
.pt-route.on { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245, 197, 66, 0.35); }
.pt-route-art { display: block; width: 100%; height: 72px; image-rendering: pixelated; border-bottom: 2px solid #000; }
.pt-route-info { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
.pt-route-info b { font-size: 15px; color: #fff6dc; }
.pt-route.on .pt-route-info b { color: var(--gold); }
.pt-pips { display: flex; gap: 3px; }
.pt-pips i { width: 14px; height: 6px; background: rgba(255, 255, 255, 0.12); border: 1px solid #000; }
.r-easy .pt-pips i.on { background: #5fd068; }
.r-normal .pt-pips i.on { background: #f5c542; }
.r-hard .pt-pips i.on { background: #e5484d; }
.pt-coins { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gold); }
.pt-coins img, .pt-coins canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.pt-chosen { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; color: #241405; background: var(--gold); border: 2px solid #000; font-weight: bold; }
/* the squad */
.pt-count { font-size: 18px; color: var(--gold); }
.pt-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px) { .pt-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-slot { aspect-ratio: 1 / 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; font: inherit; color: var(--text); cursor: default;
  background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 246, 220, 0.18); }
.pt-slot.full { cursor: pointer; border: 2px solid #000; background: radial-gradient(circle at 50% 40%, #3d3249, #1e1826 75%); box-shadow: inset 0 0 0 1px var(--gold); }
.pt-slot.full:hover { box-shadow: inset 0 0 0 1px var(--bad); }
.pt-slot canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.pt-slot small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-plus { font-size: 22px; color: var(--muted); }
.pt-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.pt-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.1); }
.pt-pick:hover { box-shadow: inset 0 0 0 1px var(--copper-hi); }
.pt-pick.on { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); background: linear-gradient(180deg, #3a2e22, #241c16); }
.pt-pool.full .pt-pick:not(.on) { opacity: 0.5; }
.pt-pick canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.pt-pick small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tier { position: absolute; top: 2px; left: 4px; font-size: 10px; color: var(--gold); }
/* the summary */
.pt-summary { gap: 8px; }
.pt-sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 246, 220, 0.07); font-size: 13px; }
.pt-sum-row span { color: var(--muted); }
.pt-sum-row b { text-align: right; }
.pt-go { margin-top: 6px; }
/* on patrol: the dashboard */
.pt-hero { position: relative; overflow: hidden; border: 2px solid #000; }
.pt-hero-tag { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; padding: 6px 12px; background: rgba(10, 8, 14, 0.75); border: 1px solid rgba(255, 246, 220, 0.2); }
.pt-hero-tag b { font-size: 15px; color: var(--gold); }
.pt-hero-tag small { font-size: 11px; color: var(--muted); }
.pt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.08); }
.pt-stat b { font-size: 30px; color: #fff6dc; line-height: 1; }
.pt-stat small { font-size: 11px; color: var(--muted); text-align: center; }
.pt-actions { display: grid; gap: 8px; }
/* a patrol's report: as the game over shows what you won */
.pt-rp-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-height: 62px; padding: 10px 14px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 999px rgba(8, 7, 12, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); }
.pt-rp-top b { font-family: var(--font-title); font-size: 20px; color: #fff6dc; text-shadow: 0 2px 0 #000; }
.pt-rp-top span { font-size: 14px; color: #fff6dc; text-shadow: 0 1px 2px #000; }
html[data-theme] .modal.pt-rp-modal { width: min(860px, 100%); }
.pt-rp-tiles, html[data-theme='neon'] .pt-rp .pt-rp-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pt-rew { padding: 10px 6px 8px; text-align: center; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); }
.pt-rew img, .pt-rew canvas { display: block; width: 40px; height: 40px; margin: 0 auto 6px; }
.pt-rew b { display: block; font-size: 22px; }
.pt-rew small { display: block; font-size: 11px; color: var(--muted); }
html[data-theme='neon'] .pt-rp .nx-rew small { overflow: visible; white-space: normal; line-height: 1.2; }
.pt-rp-level .nx-bar-label { align-items: baseline; }
html[data-theme='neon'] .pt-rp-level .num { font-size: 20px; }
.pt-rp-level .num { font-size: 16px; }
html[data-theme='neon'] .pt-rp-level .nx-bar-label b { font-size: 24px; color: var(--gold); }
html[data-theme='neon'] .pt-rp .nx-rew { width: auto; animation-delay: 0s; }
html[data-theme='neon'] .pt-rp.fresh .nx-rew { animation-delay: calc(0.15s + var(--i) * 0.15s); }
html[data-theme='neon'] .pt-rp:not(.fresh) .nx-rew { animation: none; }
.pt-rp-sec { margin: 4px 0 0; }
.pt-loots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pt-loot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px 8px; text-align: center; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); }
.pt-loot .pic { display: grid; place-items: center; min-height: 60px; }
.pt-loot small { font-size: 12px; line-height: 1.25; color: var(--teal); }
.pt-ms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pt-ms { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 6px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12); }
.pt-ms .pic, html[data-theme='neon'] .pt-ms.nx-rt-card .pic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; }
.pt-ms .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pt-ms .top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; }
.pt-ms .gain { display: flex; align-items: baseline; gap: 8px; }
.pt-ms .gain b { font-family: var(--font-num); font-size: 18px; line-height: 1; color: var(--gold); }
.pt-ms .gain .stars { font-size: 12px; color: var(--muted); }
html[data-theme='neon'] .pt-ms .nx-bar { height: 6px; }
.pt-last .pt-ms-grid { grid-template-columns: minmax(0, 1fr); }
.pt-last .pt-rp-tiles, html[data-theme='neon'] .pt-last .pt-rp .pt-rp-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* on a computer: the whole team on one row, upright cards */
@media (min-width: 761px) {
  .modal .pt-loot { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 8px 14px; text-align: left; }
  .modal .pt-loot small { font-size: 14px; }
  .modal .pt-ms-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .modal .pt-ms, html[data-theme='neon'] .modal .pt-ms.nx-rt-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
  .modal .pt-ms .pic, html[data-theme='neon'] .modal .pt-ms.nx-rt-card .pic { align-self: center; width: 60px; height: 60px; }
  .modal .pt-ms .top { flex-wrap: wrap; gap: 2px 6px; min-height: 18px; }
}
@media (max-width: 760px) {
  .pt-ms .pic, html[data-theme='neon'] .pt-ms.nx-rt-card .pic { width: 44px; height: 44px; }
}
.pt-slot { aspect-ratio: auto; height: 92px; }
@media (max-width: 600px) { .pt-slot { height: 80px; } }
/* the patrol docked on the main screen (open, in the side column), and sliding in to the corner elsewhere */
.pw-dock:empty { display: none; }
.patrol-widget.docked { position: static; width: auto; margin-top: 2px; box-shadow: inset 0 0 0 1px var(--v3-rim, rgba(200, 105, 46, 0.4)); }
.patrol-widget.docked .pw-min { display: none; }
.patrol-widget.enter { animation: pw-enter 0.42s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes pw-enter { from { transform: translateY(140%); opacity: 0; } to { transform: none; opacity: 1; } }
/* the tutorial's spotlight: the screen dims except what the coach talks about (none: all of it dims) */
.coach-spot { position: absolute; inset: 0; z-index: 28; pointer-events: none; animation: coach-spot-in 0.3s ease-out; }
.coach-spot[hidden] { display: none; }
.coach-dim { position: absolute; background: rgba(4, 3, 8, 0.78); transition: all 0.25s; }
.coach-ring { position: absolute; border: 3px solid var(--gold); border-radius: 6px; box-shadow: 0 0 18px 4px rgba(245, 197, 66, 0.45), inset 0 0 12px rgba(245, 197, 66, 0.25);
  transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
.coach-spot.none .coach-ring { display: none; }
@keyframes coach-spot-in { from { opacity: 0; } }
.patrol-widget.docked { gap: 6px; padding: 8px 10px; }
.patrol-widget.docked .pw-body:empty { display: none; }
.patrol-widget.docked .pw-stage .patrol-stage { height: 88px; }
.patrol-widget.docked .pw-stage .patrol-stage-wrap { margin: 0 -4px; }
.patrol-widget.docked .ps-label { padding: 3px 6px; }

/* ============================================ the Inventory's Mascots, Skins and Looks (and the Shop's lists): a browser */
.ib-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; background: rgba(0, 0, 0, 0.28); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.07); }
.ib-pick { display: inline-flex; align-items: center; gap: 6px; }
.ib-search { font: inherit; font-size: 12px; color: #fff6dc; background: #17121d; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.15); padding: 4px 8px; width: 180px; max-width: 100%; }
.ib-search:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
/* the grid / list switch */
.ib-views { display: inline-flex; border: 2px solid #000; }
.ib-view { width: 32px; height: 28px; display: grid; place-items: center; padding: 0; cursor: pointer; background: #1d1724; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.08); }
.ib-view + .ib-view { border-left: 2px solid #000; }
.ib-view.on { background: #3a2e22; box-shadow: inset 0 0 0 1px var(--gold); }
.ib-glyph { display: grid; gap: 2px; }
.ib-glyph i { display: block; background: var(--muted); }
.ib-view.on .ib-glyph i { background: var(--gold); }
.ib-glyph.g-grid { grid-template-columns: 6px 6px; }
.ib-glyph.g-grid i { width: 6px; height: 6px; }
.ib-glyph.g-list { grid-template-columns: 14px; }
.ib-glyph.g-list i { width: 14px; height: 2px; }
.ib-glyph.g-list i:nth-child(4) { display: none; }
/* the entries and the chosen one */
.ib-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ib-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ib-count { text-align: right; }
.ib-none { padding: 18px; text-align: center; }
@media (max-width: 900px) {
  .ib-layout { grid-template-columns: minmax(0, 1fr); }
  .ib-detail { position: static !important; }
  .ib-search { width: 100%; }
  .ib-tools .grow { display: none; }
}
.ib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.ib-tile, .ib-row { position: relative; font: inherit; color: var(--text); cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.1); transition: transform 0.08s; }
.ib-tile:hover, .ib-row:hover { box-shadow: inset 0 0 0 1px var(--copper-hi, #e08a4a); }
.ib-tile.selected, .ib-row.selected { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); background: linear-gradient(180deg, #3a2e22, #241c16); }
.ib-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; text-align: center; }
.ib-tile:hover { transform: translateY(-1px); }
.ib-pic { display: grid; place-items: center; flex-shrink: 0; background: #120e17; border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); overflow: hidden; }
.ib-tile .ib-pic { width: 76px; height: 76px; }
.ib-row .ib-pic { width: 46px; height: 46px; }
.ib-pic canvas, .ib-pic img { image-rendering: pixelated; max-width: 100%; max-height: 100%; }
.ib-tile .ib-pic canvas, .ib-tile .ib-pic img { width: 64px; height: auto; }
.ib-row .ib-pic canvas, .ib-row .ib-pic img { width: 40px; height: auto; }
.ib-pic .look-frame { transform: scale(0.8); }
.ib-row .ib-pic .look-frame { width: 36px !important; height: 36px !important; }
.ib-name { font-size: 12px; line-height: 1.2; }
.ib-sub { font-size: 10px; color: var(--muted); }
.ib-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
.ib-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; font-size: 9px; letter-spacing: 0.5px; color: var(--muted); background: rgba(0, 0, 0, 0.45); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12); white-space: nowrap; }
.ib-tag.teal { color: var(--teal, #4fd1c5); box-shadow: inset 0 0 0 1px rgba(79, 209, 197, 0.5); }
.ib-tag.gold { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.5); }
.ib-tag.gem { color: #9fe3ff; }
.ib-tag canvas, .ib-tag img { width: 12px; height: 12px; image-rendering: pixelated; }
.ib-lock { position: absolute; top: 5px; right: 5px; opacity: 0.85; }
.ib-tile.locked .ib-pic > *, .ib-row.locked .ib-pic > * { filter: grayscale(1) brightness(0.55); }
.ib-tile.locked .ib-name, .ib-row.locked .ib-name { opacity: 0.7; }
.ib-list { display: flex; flex-direction: column; gap: 4px; }
.ib-row { display: grid; grid-template-columns: 46px minmax(110px, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; }
.ib-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ib-txt .ib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-line { color: var(--muted); line-height: 1.3; min-width: 0; }
.ib-row .ib-tags { margin: 0; justify-content: flex-end; align-items: center; }
@media (max-width: 600px) {
  .ib-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .ib-row .ib-line { display: none; }
  .ib-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
/* the panel */
.ib-detail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ib-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 246, 220, 0.08); }
.ib-big { width: 148px; height: 148px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #3d3249, #17121d 72%); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12), 0 4px 0 rgba(0, 0, 0, 0.4); }
.ib-big canvas, .ib-big img { image-rendering: pixelated; max-width: 128px; max-height: 128px; }
.ib-big .look-emoji { line-height: 1; }
.ib-title { font-family: var(--font-title, inherit); font-size: 17px; color: #fff6dc; text-shadow: 0 2px 0 #000; }
.ib-block { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; }
.ib-label { letter-spacing: 1px; text-transform: uppercase; }
.ib-price-row { flex-direction: row; align-items: center; justify-content: space-between; }
.ib-compare { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ib-cmp { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ib-cmp canvas { width: 56px; height: 56px; image-rendering: pixelated; background: #120e17; border: 1px solid #000; }
.ib-arrow { color: var(--gold); font-size: 18px; }

/* the view switch's track glyph (the pass) */
.ib-glyph.g-track { grid-template-columns: 4px 4px 4px; align-items: end; }
.ib-glyph.g-track i { width: 4px; height: 10px; }
.ib-glyph.g-track i:nth-child(2) { height: 6px; }
.ib-glyph.g-track i:nth-child(4) { display: none; }
.ib-tools .ib-chips { flex: 0 1 auto; }

/* =========================================================== the Shop: patrol supplies as three cards */
.sp-status { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; }
.sp-dot { width: 12px; height: 12px; flex-shrink: 0; background: #5a5060; border: 2px solid #000; }
.sp-dot.on { background: #5fd068; box-shadow: 0 0 8px rgba(95, 208, 104, 0.6); }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 800px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } }
.sp-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 14px 12px; text-align: center; }
.sp-art { width: 104px; height: 104px; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, #3d3249, #17121d 72%); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12), 0 4px 0 rgba(0, 0, 0, 0.4); }
.sp-pic { width: 72px; height: 72px; image-rendering: pixelated; }
.sp-name { font-family: var(--font-title, inherit); font-size: 16px; color: #fff6dc; text-shadow: 0 2px 0 #000; }
.sp-desc { margin: 0; color: var(--muted); min-height: 2.8em; }
.sp-big { font-size: 15px; color: var(--gold); }
.sp-big.num { font-size: 30px; line-height: 1; }
.sp-steps { display: flex; gap: 6px; }
.sp-step { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.sp-step i { width: 26px; height: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid #000; }
.sp-step.on { color: var(--gold); }
.sp-step.on i { background: var(--gold); }
.sp-step.next i { background: rgba(245, 197, 66, 0.3); animation: coach-pulse 1.2s ease-in-out infinite; }
.sp-foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 246, 220, 0.08); }
.sp-buy { justify-content: center; font-size: 16px; }
.sp-state { padding: 8px; font-size: 13px; }

/* =========================================================== the Shop: the game pass */
.ps-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; }
@media (max-width: 700px) { .ps-head { grid-template-columns: auto minmax(0, 1fr); } .ps-side { grid-column: 1 / -1; flex-direction: row !important; } }
.ps-tier { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 78px; background: radial-gradient(circle at 50% 40%, #4a3a22, #1d1610 75%); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--gold), 0 4px 0 rgba(0, 0, 0, 0.4); }
.ps-tier b { font-size: 34px; line-height: 1; color: var(--gold); text-shadow: 0 2px 0 #000; }
.ps-tier small { font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.ps-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ps-title { font-family: var(--font-title, inherit); font-size: 16px; color: #fff6dc; }
.ps-side { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ps-prem { padding: 6px 12px; text-align: center; color: #241405; background: linear-gradient(180deg, #ffd96a, #d99a1e); border: 2px solid #000; font-weight: bold; }
.ps-note { margin: 6px 2px 0; }
.ps-tools { margin: 12px 0 10px; }
/* the track: lanes across, one column a tier */
.ps-track { display: grid; grid-template-columns: 74px minmax(0, 1fr); background: rgba(0, 0, 0, 0.3); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.07); }
.ps-lanes { display: grid; grid-template-rows: 34px 112px 112px; gap: 6px; padding: 8px 0 12px 8px; }
.ps-lane-name { display: flex; align-items: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ps-lane-name.gold { color: var(--gold); }
.ps-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 8px 8px 12px; scroll-behavior: smooth; }
.ps-col { flex: 0 0 104px; display: grid; grid-template-rows: 34px 112px 112px; gap: 6px; }
.ps-num { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; background: #17121d; border: 2px solid #000; }
.ps-num b { font-size: 18px; color: var(--muted); }
.ps-col.reached .ps-num { background: linear-gradient(180deg, #4a3a22, #2a2014); }
.ps-col.reached .ps-num b { color: var(--gold); }
.ps-col.next .ps-num { box-shadow: 0 0 0 2px var(--teal, #4fd1c5); }
.ps-here { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 5px; font-size: 8px; letter-spacing: 1px; color: #062a26; background: var(--teal, #4fd1c5); border: 1px solid #000; white-space: nowrap; }
.ps-col.big .ps-num::after { content: '★'; color: var(--gold); font-size: 11px; }
.ps-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; font: inherit; color: var(--text); text-align: center;
  background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.1); }
.ps-cell.prem { background: linear-gradient(180deg, #3a2e1c, #221a12); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.3); }
.ps-pic canvas, .ps-pic img { width: 28px; height: 28px; image-rendering: pixelated; }
.ps-what { line-height: 1.2; max-height: 2.5em; overflow: hidden; color: #e8dcc4; }
.ps-state { min-height: 1.1em; color: var(--muted); }
.ps-cell.ready { cursor: pointer; box-shadow: 0 0 0 2px var(--teal, #4fd1c5), inset 0 0 0 1px var(--teal, #4fd1c5); animation: ps-glow 1.6s ease-in-out infinite; }
.ps-cell.ready .ps-state { color: var(--teal, #4fd1c5); font-weight: bold; }
.ps-cell.ready:hover { transform: translateY(-1px); }
@keyframes ps-glow { 50% { box-shadow: 0 0 0 2px var(--teal, #4fd1c5), 0 0 12px rgba(79, 209, 197, 0.5); } }
.ps-cell.got { opacity: 0.55; }
.ps-cell.got .ps-state { color: var(--good, #5fd068); }
.ps-cell.locked .ps-pic { filter: grayscale(0.7) brightness(0.7); }
.ps-lock { position: absolute; top: 4px; right: 4px; opacity: 0.8; }
/* the list: a row a tier */
.ps-list { display: flex; flex-direction: column; gap: 4px; }
.ps-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ps-row .ps-cell { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 6px 10px; text-align: left; }
.ps-row .ps-what { flex: 1; max-height: none; }
.ps-row .ps-lock { position: static; }
.ps-row.reached .ps-num { background: linear-gradient(180deg, #4a3a22, #2a2014); }
.ps-row.reached .ps-num b { color: var(--gold); }
.ps-row.next .ps-num { box-shadow: 0 0 0 2px var(--teal, #4fd1c5); }

/* =========================================================== the Profile */
.screen-profile .max.col { gap: 12px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-head .h2 { margin: 0; }
/* the playercard and what makes it up */
.pf-card { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.pf-card .playercard { width: 100%; max-width: none; }
.pf-ident { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.pf-id-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 246, 220, 0.07); }
.pf-id-row:last-child { border-bottom: 0; }
.pf-switch { display: flex; padding: 2px; background: none; border: 0; cursor: pointer; }
.pf-switch:disabled { opacity: 0.4; cursor: default; }
.pf-id-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* level, rank, pass */
.pf-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 800px) { .pf-badges { grid-template-columns: minmax(0, 1fr); } }
.pf-badge { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; font: inherit; color: var(--text); }
.pf-badge > canvas, .pf-badge > img { width: 56px; height: 56px; image-rendering: pixelated; flex-shrink: 0; }
.pf-badge-ico { width: 56px; height: 56px; display: grid; place-items: center; flex-shrink: 0; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; }
.pf-badge-ico canvas, .pf-badge-ico img { width: 40px; height: 40px; image-rendering: pixelated; }
.pf-badge-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pf-badge-big { font-family: var(--font-title, inherit); font-size: 18px; color: #fff6dc; text-shadow: 0 2px 0 #000; line-height: 1.1; }
.pf-badge-big.num { font-family: inherit; font-size: 32px; color: var(--gold); }
.pf-link { cursor: pointer; }
.pf-link:hover { box-shadow: inset 0 0 0 1px var(--copper-hi, #e08a4a); }
.pf-pips { display: flex; gap: 4px; }
.pf-pips i { width: 16px; height: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid #000; }
.pf-pips i.on { background: var(--teal, #4fd1c5); }
/* the headline numbers */
.pf-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 0; }
@media (max-width: 900px) { .pf-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 6px; text-align: center; border-right: 1px solid rgba(255, 246, 220, 0.07); }
.pf-num:last-child { border-right: 0; }
.pf-num b { font-size: 26px; line-height: 1; color: #fff6dc; }
.pf-num.good b { color: var(--good, #5fd068); }
.pf-num.gold b { color: var(--gold); }
/* records | form, favourites, grades */
.pf-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .pf-cols { grid-template-columns: minmax(0, 1fr); } }
.pf-side { display: flex; flex-direction: column; gap: 12px; }
.pf-records { padding: 12px 14px; }
.pf-seg { display: inline-flex; border: 2px solid #000; }
.pf-seg-btn { padding: 5px 12px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; background: #1d1724; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.08); }
.pf-seg-btn + .pf-seg-btn { border-left: 2px solid #000; }
.pf-seg-btn.on { color: var(--gold); background: #3a2e22; box-shadow: inset 0 0 0 1px var(--gold); }
.pf-form-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pf-res { width: 24px; height: 24px; display: grid; place-items: center; font-size: 11px; font-weight: bold; border: 2px solid #000; color: #fff; }
button.pf-res { padding: 0; font-family: inherit; cursor: pointer; transition: transform 0.06s, filter 0.12s; }
button.pf-res:hover, button.pf-res:focus-visible { filter: brightness(1.25); transform: translateY(-1px); outline: 2px solid var(--gold); outline-offset: 1px; }
.pf-res.win { background: #2f7a3a; }
.pf-res.loss { background: #8a2a2e; }
.pf-res.draw { background: #5a5060; }
.pf-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 6px; }
.pf-pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; text-align: center; }
.pf-pod canvas { image-rendering: pixelated; }
.pf-step { display: grid; place-items: center; width: 100%; margin-top: 4px; font-size: 16px; color: #241405; font-weight: bold; border: 2px solid #000; }
.pf-pod.p1 .pf-step { height: 40px; background: linear-gradient(180deg, #ffd96a, #d99a1e); }
.pf-pod.p2 .pf-step { height: 28px; background: linear-gradient(180deg, #e8e8f0, #9a9aaa); }
.pf-pod.p3 .pf-step { height: 20px; background: linear-gradient(180deg, #e0a070, #9a5a2a); }
.pf-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 120px; align-items: end; margin-top: 6px; }
.pf-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.pf-bar i { display: block; width: 100%; min-height: 3px; background: #6a5e78; border: 1px solid #000; }
.pf-bar b { font-size: 12px; }
.pf-bar.g-sp i { background: linear-gradient(180deg, #ffe08a, #f5a623); }
.pf-bar.g-s i { background: #f5c542; }
.pf-bar.g-a i { background: #5fd068; }
.pf-bar.g-b i { background: #4f9dff; }
.pf-bar.g-c i { background: #b56cff; }
.pf-bar.g-f i { background: #e5484d; }
/* achievements */
.pf-ach { padding: 12px 14px; }
.pf-ach-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 8px; }
.pf-ach-n { font-size: 24px; color: var(--gold); }
.pf-ach-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
@media (max-width: 800px) { .pf-ach-list { grid-template-columns: minmax(0, 1fr); } }
.pf-ach-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; min-width: 0; }
.pf-ach-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 4px; }
.pf-ring { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); border: 2px solid #000; }
.pf-ring.done { background: conic-gradient(var(--teal, #4fd1c5) 100%, transparent 0); }
.pf-ring-in { display: grid; place-items: center; width: 74%; height: 74%; border-radius: 50%; background: #17121d; border: 2px solid #000; }
.pf-ring-in canvas, .pf-ring-in img { image-rendering: pixelated; }
.ib-pic .pf-ring { width: 56px !important; height: 56px !important; }
.ib-row .ib-pic .pf-ring { width: 38px !important; height: 38px !important; }
.ib-big .pf-ring-in canvas, .ib-big .pf-ring-in img { width: 48px; height: 48px; }
.pf-reward-card { width: 100%; height: auto; aspect-ratio: 4 / 1; image-rendering: pixelated; border: 2px solid #000; }
/* history filters */
.pf-hist-tools { margin-bottom: 8px; }
/* calling cards */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pf-callcard { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; font: inherit; color: var(--text); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.1); }
.pf-callcard:hover { box-shadow: inset 0 0 0 1px var(--copper-hi, #e08a4a); }
.pf-callcard.selected { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); }
.pf-card-frame { position: relative; display: block; border: 2px solid #000; }
.pf-card-pic { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; image-rendering: pixelated; }
.pf-callcard.locked .pf-card-pic { filter: grayscale(1) brightness(0.45); }
.pf-card-lock { position: absolute; inset: 0; display: grid; place-items: center; }
.pf-card-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 2px; }
.pf-card-row b { flex: 1; min-width: 0; }
.pf-callcard.locked .pf-card-row b { color: var(--muted); }
.pf-card-how { padding: 0 2px; }
/* teams */
.pf-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pf-team { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.pf-team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.pf-team-head b { font-size: 15px; color: #fff6dc; }
.pf-team-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pf-team-pic { display: grid; place-items: center; aspect-ratio: 1; background: #120e17; border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.pf-team-pic canvas { width: 44px; height: 44px; image-rendering: pixelated; }
.pf-team-syn { min-height: 22px; }
.pf-team-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.pf-team-new { align-items: center; justify-content: center; min-height: 200px; font: inherit; color: var(--muted); cursor: pointer; background: rgba(0, 0, 0, 0.25); border: 2px dashed rgba(255, 246, 220, 0.2); }
.pf-team-new:hover { color: var(--gold); border-color: var(--gold); }
.pf-plus { font-size: 36px; line-height: 1; }

/* the profile's playercard across the top, its pencil and the box that edits it */
.pf-hero { position: relative; }
.pf-hero > .playercard { width: 100%; max-width: none; }
.pf-pencil { position: absolute; top: -14px; right: -14px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(14, 10, 18, 0.82); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.25), 0 3px 0 rgba(0, 0, 0, 0.5); transition: transform 0.1s; }
.pf-pencil:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gold), 0 3px 0 rgba(0, 0, 0, 0.5); }
.pf-pencil.on { background: #3a2e22; box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px rgba(245, 197, 66, 0.4); }
.pf-pencil-pic { width: 24px; height: 24px; image-rendering: pixelated; }
.pf-pop { position: absolute; top: 36px; right: -14px; z-index: 20; width: min(380px, calc(100% - 20px)); box-shadow: 0 0 0 2px #000, 0 10px 24px rgba(0, 0, 0, 0.6) !important; animation: pf-pop-in 0.16s ease-out; }
.pf-pop[hidden] { display: none; }
.pf-pop::before { content: ''; position: absolute; top: -9px; right: 12px; width: 14px; height: 14px; transform: rotate(45deg); background: inherit; border-left: 2px solid #000; border-top: 2px solid #000; }
@keyframes pf-pop-in { from { opacity: 0; transform: translateY(-6px); } }
/* history: the grade, the MVP */
.mh-grade { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; }
.mh-grade.none { color: var(--muted); font-size: 14px; }
.grade-badge .gb-letter { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 4%; font-family: var(--font-title, inherit); line-height: 1; color: #fff; text-shadow: 0 2px 0 #000, 0 0 3px #000; pointer-events: none; }
.mh-unit { position: relative; }
.mh-unit.mvp { outline: 2px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 8px rgba(245, 197, 66, 0.45); }
.mh-unit .mvp-tag { position: absolute; top: -10px; right: -9px; z-index: 1; padding: 1px 3px; font-size: 8px; line-height: 1.2; letter-spacing: 0.5px; font-weight: bold;
  color: #1c1206; background: var(--gold); border: 2px solid #000; pointer-events: none; }
/* achievement badges */
.ach-badge { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.ach-badge-pic { display: block; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)); }
.ach-badge.locked .ach-badge-pic { filter: grayscale(1) brightness(0.42) contrast(1.1); }
/* the new art's badges (render/ach-badges.js artBadge): painted, filling the box; locked ones darkened the same way */
.ach-badge > .ach-badge-art { width: 100% !important; height: 100% !important; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)); }
.ach-badge.locked > .ach-badge-art { filter: grayscale(1) brightness(0.42) contrast(1.1); }
.ach-badge.anim .ach-badge-pic { animation: ach-glow 2.4s ease-in-out infinite; }
@keyframes ach-glow { 50% { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px var(--glow)); } }
.ach-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; image-rendering: pixelated;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 47%, rgba(255, 255, 255, 0.15) 53%, transparent 62%) no-repeat; background-size: 300% 100%;
  animation: ach-shine 3s ease-in-out infinite; }
@keyframes ach-shine { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
.ach-spark { position: absolute; width: 14%; height: 14%; pointer-events: none; opacity: 0; animation: ach-twinkle 2.2s ease-in-out infinite;
  background: linear-gradient(#fff, #fff) center / 100% 30% no-repeat, linear-gradient(#fff, #fff) center / 30% 100% no-repeat; }
.ach-spark.s0 { top: 2%; right: 6%; }
.ach-spark.s1 { bottom: 10%; left: 2%; animation-delay: 0.8s; }
.ach-spark.s2 { top: 30%; left: -4%; animation-delay: 1.5s; width: 10%; height: 10%; }
@keyframes ach-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .ach-shine, .ach-spark, .ach-badge.anim .ach-badge-pic { animation: none; } }
.reduce-motion .ach-shine, .reduce-motion .ach-spark, .reduce-motion .ach-badge.anim .ach-badge-pic { animation: none; }
.pf-ach-pic { display: inline-grid; place-items: center; flex-shrink: 0; }
.ib-pic .pf-ach-pic, .ib-pic .pf-ach-pic .ach-badge, .ib-pic .pf-ach-pic .ach-badge-pic { width: 56px !important; height: 56px !important; }
.ib-row .ib-pic .pf-ach-pic, .ib-row .ib-pic .pf-ach-pic .ach-badge, .ib-row .ib-pic .pf-ach-pic .ach-badge-pic { width: 38px !important; height: 38px !important; }
.ib-pic .pf-ring .ach-badge, .ib-pic .pf-ring .ach-badge-pic { width: 34px !important; height: 34px !important; }
.ib-row .ib-pic .pf-ring .ach-badge, .ib-row .ib-pic .pf-ring .ach-badge-pic { width: 22px !important; height: 22px !important; }
.ib-big .ach-badge-pic, .ib-big .ach-badge { max-width: none; }
.ib-pic .ach-badge-pic, .ib-big .ach-badge-pic { width: auto; }
body:has(.pf-pop:not([hidden])) > .patrol-widget { visibility: hidden; }

/* =========================================================== social: friends, chat, players, invitations */
/* a player's face in a list: their mascot (or initial) and an online dot */
.so-ava { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: visible;
  background: radial-gradient(circle at 50% 40%, #3d3249, #17121d 75%); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12); }
.so-ava canvas { image-rendering: pixelated; }
.so-initial { font-family: var(--font-title, inherit); font-size: 16px; color: var(--copper-hi, #e08a4a); }
.so-dot { position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px; border: 2px solid #000; background: #5a5060; }
.so-dot.on { background: #5fd068; box-shadow: 0 0 6px rgba(95, 208, 104, 0.7); }
.so-dot.on.match { background: #f5c542; box-shadow: 0 0 6px rgba(245, 197, 66, 0.7); }
.so-dot.on.queue { background: #4fd1c5; }
/* the friends tab */
.so-page { max-width: 1160px; }
.so-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .so-grid { grid-template-columns: minmax(0, 1fr); } .so-side { order: -1; } }
.so-main { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.so-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.so-head .h2 { margin: 0; }
.so-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.so-search-box { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: #17121d; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.15); }
.so-search-box:focus-within { box-shadow: inset 0 0 0 1px var(--gold); }
.so-search-box canvas { opacity: 0.6; }
.so-search { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: #fff6dc; background: none; border: 0; padding: 6px 0; outline: none; }
.so-search.big { font-size: 14px; padding: 9px 0; }
.so-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.so-groups { display: flex; flex-direction: column; gap: 12px; }
.so-group { display: flex; flex-direction: column; gap: 4px; }
.so-group-title { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.so-group-title b { padding: 0 6px; font-size: 10px; color: #fff6dc; background: rgba(0, 0, 0, 0.4); border: 1px solid #000; }
.so-group.on .so-group-title span { color: #5fd068; }
.so-group.incoming .so-group-title span { color: var(--gold); }
.so-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-width: 0;
  background: linear-gradient(90deg, rgba(46, 38, 56, 0.95), rgba(29, 23, 36, 0.9)); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.07); }
.so-row:hover { box-shadow: inset 0 0 0 1px var(--copper-hi, #e08a4a); }
.so-row.compact { padding: 6px 8px; gap: 10px; }
.so-row:not(.online) .so-ava canvas { filter: grayscale(0.6) brightness(0.8); }
.so-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.so-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.so-name b { font-size: 14px; color: #fff6dc; }
.so-lvl { padding: 0 5px; font-size: 10px; line-height: 15px; color: #241405; background: var(--gold); border: 1px solid #000; }
.so-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.so-msg.unread { box-shadow: inset 0 0 0 1px var(--teal, #4fd1c5), 0 0 8px rgba(79, 209, 197, 0.5); color: var(--teal, #4fd1c5); }
.so-rel { color: var(--muted); }
.so-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 10px; text-align: center; opacity: 0.85; }
.so-none { padding: 8px; }
.so-side { display: flex; flex-direction: column; gap: 12px; }
.so-add { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.so-add-head { display: flex; gap: 10px; align-items: center; }
.so-add-head .h2 { margin: 0 0 2px; }
.so-add-head p { margin: 0; }
.so-add-ico { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; background: rgba(79, 209, 197, 0.12); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(79, 209, 197, 0.4); }
.so-add-row { display: flex; gap: 8px; }
.so-results { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.so-myname { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 246, 220, 0.15); }
.so-myname b { flex: 1; min-width: 0; color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.so-invite-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.so-invite-card:hover { box-shadow: inset 0 0 0 1px var(--copper-hi, #e08a4a); }
.so-invite-card p { margin: 2px 0 0; }
/* the chat */
.chat-dock { display: flex; flex-direction: column; gap: 0; padding: 0 !important; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: linear-gradient(180deg, #2e2638, #1d1724); border-bottom: 2px solid #000; }
.chat-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.chat-who b { font-size: 15px; color: #fff6dc; }
.chat-tools { display: flex; gap: 6px; }
.chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #120e17; }
.chat-body .chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 14px; background: none; border: 0; }
.chat-older { align-self: center; margin-top: 8px; }
.chat-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.chat-day span { padding: 2px 10px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 246, 220, 0.1); }
.chat-line { display: flex; align-items: flex-end; gap: 6px; }
.chat-line.first { margin-top: 6px; }
.chat-line .so-ava canvas { width: 20px; height: 20px; }
.chat-ava-gap { width: 28px; flex-shrink: 0; }
.chat-msg { max-width: 78%; padding: 7px 10px 5px; font-size: 13px; line-height: 1.35; color: #fff6dc; background: #2e2638; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.08); overflow-wrap: anywhere; }
.chat-msg.mine { align-self: flex-end; background: #1f4a46; box-shadow: inset 0 0 0 1px rgba(79, 209, 197, 0.35); }
.chat-msg.mine.first { margin-top: 6px; }
.chat-msg.emote { background: none; box-shadow: none; border-color: transparent; }
.chat-msg .chat-emote { font-size: 30px; line-height: 1; }
.chat-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 9px; opacity: 0.75; }
.chat-unsend { padding: 0 3px; font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; opacity: 0; }
.chat-msg:hover .chat-unsend, .chat-unsend:focus-visible { opacity: 1; }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; }
.chat-replay { display: flex; align-items: center; gap: 10px; padding: 4px 2px; min-width: 180px; }
.chat-replay-ico { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; background: rgba(0, 0, 0, 0.4); border: 2px solid #000; }
.chat-msg .chat-replay + .btn, .chat-msg > .chat-replay ~ .btn { margin-top: 6px; }
.chat-tray { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px; background: #1d1724; border-top: 2px solid #000; animation: pf-pop-in 0.14s ease-out; }
.chat-tray[hidden] { display: none; }
.chat-tray-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font: inherit; color: var(--text); cursor: pointer; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; }
.chat-tray-btn:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.chat-tray-btn span { font-size: 22px; line-height: 1; }
.chat-tray-btn small { font-size: 9px; color: var(--muted); }
.chat-send { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, #2e2638, #1d1724); border-top: 2px solid #000; }
.chat-field { position: relative; display: flex; align-items: center; min-width: 0; background: #17121d; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.15); }
.chat-field:focus-within { box-shadow: inset 0 0 0 1px var(--teal, #4fd1c5); }
.chat-input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: #fff6dc; background: none; border: 0; outline: none; padding: 8px 10px; }
.chat-count { padding-right: 8px; }
.chat-go { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, #3aa89e, #1f6f68); border: 2px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.45); }
.chat-go:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
/* a player's card by their name */
.player-pop { display: flex; flex-direction: column; gap: 8px; padding: 8px !important; width: min(360px, calc(100vw - 16px)); box-shadow: 0 0 0 2px #000, 0 12px 26px rgba(0, 0, 0, 0.6) !important; animation: pf-pop-in 0.14s ease-out; }
.player-pop .playercard { width: 100%; }
.pp-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
.pp-chip { padding: 2px 7px; font-size: 10px; color: #e8dcc4; background: rgba(0, 0, 0, 0.4); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12); }
.pp-chip.good { color: #5fd068; box-shadow: inset 0 0 0 1px rgba(95, 208, 104, 0.4); }
.player-pop .pp-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
.player-pop .pp-acts .btn { justify-content: center; }
/* another player's profile */
.op-modal { width: min(820px, calc(100vw - 24px)) !important; }
.op-body { display: flex; flex-direction: column; gap: 10px; }
.op-hero .playercard { width: 100%; max-width: none; }
.op-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 2px; }
.op-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: rgba(0, 0, 0, 0.3); border: 2px solid #000; }
.op-acts, .op-more { display: flex; flex-wrap: wrap; gap: 6px; }
.op-more .btn { opacity: 0.85; }
.op-hidden { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; }
.op-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.op-strip .pf-num b { font-size: 18px; }
@media (max-width: 640px) { .op-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.op-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.op-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.op-box .h2 { margin: 0; }
.op-best { display: flex; gap: 12px; justify-content: center; }
.op-champ { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.op-champ canvas { image-rendering: pixelated; background: #120e17; border: 2px solid #000; }
.pf-res.small { width: 18px; height: 18px; font-size: 9px; }
/* an invitation */
.invite-pop { display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 20px)); padding: 12px 14px !important; box-shadow: 0 0 0 2px var(--teal, #4fd1c5), 0 12px 26px rgba(0, 0, 0, 0.6) !important; animation: pf-pop-in 0.2s ease-out; }
.ip-kicker { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal, #4fd1c5); }
.ip-kicker b { font-size: 15px; letter-spacing: 0; color: #fff6dc; font-family: inherit; }
.ip-main { display: flex; align-items: center; gap: 12px; }
.ip-main .so-ava canvas { width: 40px; height: 40px; }
.ip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ip-name { font-family: var(--font-title, inherit); font-size: 17px; color: #fff6dc; }
.ip-what { align-self: flex-start; margin-top: 2px; padding: 2px 7px; color: var(--gold); background: rgba(0, 0, 0, 0.4); border: 1px solid #000; }
.ip-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.ip-btns .btn { justify-content: center; }
.invite-bar { height: 6px; }
.iw-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0; }
.iw-faces { display: flex; align-items: center; gap: 14px; }
.iw-dots { display: flex; gap: 5px; }
.iw-dots i { width: 7px; height: 7px; background: var(--teal, #4fd1c5); border: 1px solid #000; animation: iw-dot 1.2s ease-in-out infinite; }
.iw-dots i:nth-child(2) { animation-delay: 0.2s; }
.iw-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes iw-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.iw-body .invite-bar { width: 100%; }
/* the ready check */
.q-kicker { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal, #4fd1c5); }
.q-seats { display: flex; justify-content: center; gap: 10px; margin: 4px 0; }
.q-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 70px; }
.q-seat i { width: 46px; height: 46px; display: grid; place-items: center; font-style: normal; font-size: 20px; font-weight: bold; color: var(--muted);
  background: #17121d; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12); transition: background 0.2s, transform 0.2s; }
.q-seat.ok i { color: #062a12; background: linear-gradient(180deg, #7ae08a, #3aa84a); box-shadow: 0 0 10px rgba(95, 208, 104, 0.55); animation: q-seat-ok 0.3s ease-out; }
.q-seat.me small { color: var(--gold); }
.q-seat small { font-size: 10px; color: var(--muted); }
@keyframes q-seat-ok { from { transform: scale(0.6); } }
.q-found .q-accept { min-width: 180px; font-size: 18px; }
.chat-dock { width: min(390px, 94vw); height: min(560px, 76vh); }
@media (max-width: 600px) { .chat-dock { width: 100%; height: 100%; } }
/* another player's match history */
.rh { gap: 10px; }
.rh-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; padding-top: 10px; }
.rh-row { display: grid; grid-template-columns: 38px 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 6px;
  background: linear-gradient(90deg, rgba(46, 38, 56, 0.95), rgba(29, 23, 36, 0.9)); border: 2px solid #000; border-left-width: 4px; }
.rh-row.win { border-left-color: #3aa84a; }
.rh-row.loss { border-left-color: #b03a3e; }
.rh-row.draw { border-left-color: #6a6070; }
.rh-row .mh-grade { width: 34px; height: 34px; }
.rh-res { font-size: 13px; }
.rh-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; padding-top: 8px; }
.rh-meta { text-align: right; line-height: 1.4; }
@media (max-width: 600px) { .rh-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .rh-teams { grid-column: 1 / -1; } }

/* ------------------------------------------------- phones: everything fits the width (only vertical scrolling) */
@media (max-width: 760px) {
  /* the game over screen: the grade and the MVP side by side, the rewards in a row of their own under them */
  .screen-results .res-top > .panel { flex: 1 1 0; min-width: 0; }
  .screen-results .res-top > .res-rew { flex: 1 1 100%; }
  /* the game over screen's big title fits the width */
  .screen-results .res-head > .col { min-width: 0; max-width: 100%; }
  .screen-results .res-head .title { font-size: clamp(30px, 11vw, 44px); overflow-wrap: anywhere; }
  /* a cup's bracket: the rounds one under the other (the first round, the semi-finals, the final), each round's
     games two by two, instead of side by side scrolling sideways */
  .bracket { flex-direction: column; align-items: stretch; overflow-x: visible; }
  .bracket-round { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bracket-round > :first-child { grid-column: 1 / -1; }
  .bracket-round:last-child { grid-template-columns: minmax(0, 1fr); }
  /* the profile's pencil stays inside the screen */
  .pf-pencil { right: -4px; }
}
/* the battle's action bar on phones: as wide as the screen at most, the buttons a little smaller when they need to be */
.narrow .action-bar { left: 0; right: 0; transform: none; width: fit-content; max-width: 100%; margin: 0 auto; }
.narrow .action-bar .act-round { flex: 0 1 48px; min-width: 34px; }

/* Settings > Display > Theme: Neon, Legacy (screens/settings.js) */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 2px 0 6px; }
.theme-pick .theme-opt { height: auto; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; white-space: normal; text-align: left; }
.theme-pick .theme-opt small { font-size: 12px; opacity: 0.8; line-height: 1.3; }
.theme-pick .theme-opt.selected { box-shadow: 0 0 0 2px var(--teal); }

/* Colour-blind friendly (Settings > Accessibility): Red turns orange */
:root.cb {
  --team-red: #f08a2b;
  --team-red-hi: #ffc58a;
  --red: #b5651d;
  --red-hi: #f08a2b;
}

/* ================================================================== commending: after a matchmade online game, and a player's honor on their card */
.commend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.commend-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.honor-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.honor-row[hidden] { display: none; }
.honor-level, .honor-kind { display: inline-flex; align-items: center; gap: 5px; }
.honor-level.bronze b { color: #d39a6a; }
.honor-level.silver b { color: #d9dee8; }
.honor-level.gold b { color: var(--gold, #f5c862); }

/* ================================================================== a challenge's verdict: its ribbon with the words on it (the art has no text) */
.duel-verdict { position: relative; display: grid; place-items: center; width: min(420px, 100%); min-height: 40px; }
.duel-verdict > * { grid-area: 1 / 1; }
.duel-verdict-art { width: 100% !important; height: auto !important; }
.duel-verdict-burst { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.duel-verdict-words { position: relative; z-index: 1; padding: 0 16%; text-align: center; font-family: var(--font-title); font-size: 20px; line-height: 1.1; color: var(--gold, #f5c862); }
.duel-verdict-words.win { color: #fff3cf; }
.duel-verdict-words.lose { color: #ff8a98; }
.duel-verdict-words.tie { color: #a8fff1; }
.duel-verdict.has-art .duel-verdict-words { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6); }

/* ================================================================== the champions' voices */
.nx-res-quote, .tt-quote { display: block; margin-top: 4px; font-style: italic; color: var(--gold, #f5c862); font-size: 12px; line-height: 1.25; text-align: center; max-width: 200px; }
.tt-quote { text-align: left; max-width: none; }

/* ================================================================== What's new: its header and what's coming */
.news-head { display: block; width: 100% !important; height: auto !important; border-radius: 8px; margin-bottom: 8px; }
.news-soon ul { margin: 6px 0 0; padding-left: 18px; }
.news-soon li { margin: 2px 0; }

/* ================================================================== clans */
.clan-crest { position: relative; display: inline-grid; place-items: center; flex: none; }
.clan-crest > * { grid-area: 1 / 1; }
.clan-crest > b { position: relative; z-index: 1; color: #fff3cf; letter-spacing: 0.04em; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.clan-hero { background-size: cover; background-position: center; }
.clan-hero-row { align-items: center; }
.clan-row { gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.clan-goal { align-items: center; }
.clan-goal > :first-child { flex: none; }
.clan-war { background-size: cover; background-position: center; display: flex; flex-direction: column; gap: 10px; }
.clan-war-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.clan-war-x { font-size: 20px; color: var(--gold, #f5c862); }
.clan-war-n { font-size: 28px; }
.clan-war-n.ahead { color: var(--good, #72de6c); }
.clan-war-n.behind { color: #ff8a98; }
.clan-member { gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.clan-dot { width: 8px; height: 8px; border-radius: 50%; background: #5a5364; flex: none; }
.clan-dot.on { background: #72de6c; }
.clan-chat { height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; word-break: break-word; }
.clan-crests { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.clan-crest-opt { padding: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.clan-crest-opt.on { border-color: var(--gold, #f5c862); background: rgba(245, 200, 98, 0.12); }
.clan-crest-opt img { width: 100% !important; height: auto !important; display: block; }
button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
@media (max-width: 760px) { .clan-hero-row { flex-direction: column; align-items: flex-start; } .clan-chat { height: 160px; } }