/* Eriband: retro village tabletop.
   Textures (--tile-*) are pixel art generated in js/sprites.js. */

/* Numbers: the digits (and + - %) come from Micro 5 (fonts/micro5.woff2, SIL Open Font License),
   much clearer than Pixelify Sans' (its 3, 5 and 8 look alike); the letters (and /) stay Pixelify Sans.
   One face for every weight, so bold numbers aren't smeared by a fake bold. */
@font-face {
  font-family: 'Rune Digits';
  src: url('../fonts/micro5.woff2') format('woff2');
  unicode-range: U+0030-0039, U+0025, U+002B, U+002D, U+2212;
  font-weight: 100 900;
  size-adjust: 160%;
  font-display: swap;
}

:root {
  --wood-0: #1e120a;
  --wood-1: #3b2414;
  --wood-2: #5a3a22;
  --wood-3: #7a4f2c;
  --wood-4: #9c6a3c;
  --parch: #ecd9a8;
  --parch-2: #dcc48c;
  --parch-3: #c3a66b;
  --ink: #3b2414;
  --ink-soft: #7a5a3a;
  --blue: #3f74e0;
  --blue-dark: #23479a;
  --blue-soft: #c9d8f5;
  --red: #d0463c;
  --red-dark: #8a2420;
  --red-soft: #f2cbc4;
  --gold: #f2c14e;
  --gold-dark: #b4801f;
  --green: #4caf50;
  --purple: #8f55e0;
  --pixel: 'Press Start 2P', monospace;
  --body: 'Rune Digits', 'Pixelify Sans', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--tile-grass) 0 0 / 48px 48px, #5d9e3c;
  overflow-x: hidden;
  image-rendering: pixelated;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.35;
}
body::before { /* soft vignette over the village */
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(10, 15, 5, .45) 100%);
  z-index: 1;
}

/* ---------- The village (generated in js/village.js) ---------- */
.village { position: absolute; left: 0; top: 0; z-index: 0; min-width: 100%; min-height: 100vh; overflow: hidden; pointer-events: none; }
.village-canvas { display: block; image-rendering: pixelated; }
.village-critters { position: absolute; inset: 0; }
.critter { position: absolute; left: 0; top: 0; will-change: transform; }
/* townsfolk speech bubbles (village.js: chats, quarrels, thieves...) */
.city-bubble {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, -100%);
  padding: 1px 4px; font-size: 15px; line-height: 1.2; background: #fffbea; border: 2px solid #2a1c24;
  box-shadow: 2px 2px 0 rgba(20, 10, 4, .3);
}
.city-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; margin-left: -3px;
  background: #fffbea; border-right: 2px solid #2a1c24; border-bottom: 2px solid #2a1c24; transform: rotate(45deg);
}
.city-bubble.pop { animation: bubble-pop .18s steps(3); }
@keyframes bubble-pop { from { transform: translate(-50%, -80%) scale(.4); } }
.critter-layer { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(20, 30, 10, .3)); }
/* the city's moving water and waving flags (js/village.js) */
/* ⚙ Settings → Display → Background animations off: everything in the scenery holds still */
body.still-bg .village *, body.still-bg .village *::before, body.still-bg .village *::after,
body.still-bg .scene *, body.still-bg .scene *::before, body.still-bg .scene *::after { animation-play-state: paused !important; }
body.still-bg .scene-bits { display: none; }
.water-layer { position: absolute; pointer-events: none; image-rendering: pixelated; background-repeat: repeat; }
.water-layer.a { animation: water-a 8s steps(48) infinite; }
.water-layer.b { animation: water-b 12s steps(48) infinite, water-shimmer 3s steps(3) infinite; }
@keyframes water-a { from { background-position: 0 0; } to { background-position: var(--tw) 0; } }
@keyframes water-b { from { background-position: 0 0; } to { background-position: calc(-1 * var(--tw)) 0; } }
@keyframes water-shimmer { 50% { opacity: .45; } }
.sea-glint { position: absolute; pointer-events: none; background: #fff; opacity: 0; animation: sea-glint 3.4s steps(1) infinite; animation-delay: var(--delay); }
@keyframes sea-glint { 0%, 84%, 100% { opacity: 0; } 86%, 94% { opacity: .9; } }
.city-flag { position: absolute; pointer-events: none; image-rendering: pixelated; background-repeat: no-repeat; animation: flag-wave .6s steps(3) infinite; }
@keyframes flag-wave { from { background-position: 0 0; } to { background-position: calc(-3 * var(--fw)) 0; } }
.critter img { display: block; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(20, 30, 10, .3)); }
.chimney-smoke, .chimney-smoke::before {
  position: absolute;
  width: 6px; height: 6px;
  background: rgba(235, 235, 235, .85);
  animation: chimney 3.2s steps(8) infinite;
}
.chimney-smoke::before { content: ''; left: 0; top: 0; animation-delay: -1.6s; }
@keyframes chimney {
  0% { transform: translate(0, 0) scale(1); opacity: .9; }
  100% { transform: translate(12px, -36px) scale(2.2); opacity: 0; }
}
button { font: inherit; color: inherit; cursor: pointer; }
img { image-rendering: pixelated; }
.p0-text { color: var(--blue); }
.p1-text { color: var(--red); }
.danger { color: var(--red-dark); }

/* Shared pixel "parchment card" look */
.side, .panel, .status, .draft-head, .menu-card, .modal, .rule-card, .toast, .phase-box {
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 4px solid var(--ink);
  box-shadow:
    inset 3px 3px 0 #fff6dc,
    inset -3px -3px 0 var(--parch-3),
    6px 6px 0 rgba(20, 10, 4, .55);
}

/* ---------- Buttons: little wooden blocks ---------- */
.btn {
  position: relative;
  padding: 12px 16px;
  border: 4px solid var(--ink);
  background: var(--wood-4);
  color: var(--parch);
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.4;
  text-shadow: 2px 2px 0 var(--wood-1);
  box-shadow: inset 3px 3px 0 #c08a52, inset -3px -4px 0 var(--wood-2), 0 4px 0 var(--wood-0);
  transition: transform .05s;
}
.btn:hover:not(:disabled) { background: #ad7744; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 3px 3px 0 #c08a52, inset -3px -4px 0 var(--wood-2), 0 1px 0 var(--wood-0); }
.btn.primary {
  background: var(--gold);
  color: var(--ink);
  text-shadow: 1px 1px 0 #ffe9a6;
  box-shadow: inset 3px 3px 0 #ffe9a6, inset -3px -4px 0 var(--gold-dark), 0 4px 0 var(--wood-0);
}
.btn.primary:hover:not(:disabled) { background: #f7cd68; }
.btn.ghost { background: var(--wood-3); }
.btn.small { padding: 8px 10px; font-size: 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Layout ---------- */
#app {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand, .logo {
  font-family: var(--pixel);
  color: var(--parch);
  text-shadow: 3px 3px 0 var(--wood-0), -1px -1px 0 var(--wood-0), 1px -1px 0 var(--wood-0), -1px 1px 0 var(--wood-0);
}
.brand { font-size: 18px; }
.brand span, .logo span { color: var(--gold); }
/* the phase and the turn timer share one pill in the top bar */
.phase-box { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 7px 14px; box-shadow: inset 2px 2px 0 #fff6dc, 4px 4px 0 rgba(20, 10, 4, .55); }
.phase { font-family: var(--pixel); font-size: 10px; color: var(--ink-soft); }
.phase-box .turn-timer { padding: 0 0 0 12px; font-size: 10px; background: none; border: 0; border-left: 3px solid var(--parch-3); box-shadow: none; }
.phase-box .turn-timer.idle { display: none; }
.phase-box .tt-secs { min-width: 44px; }
.phase-box .tt-bar { width: 70px; }
/* a message in the status box (see toast in ui.js) */
.status.announce { background: #fff1c4; }
.status.announce .status-text { font-weight: 700; }
.phase b { color: var(--ink); font-weight: normal; }
.top-actions { position: relative; display: flex; gap: 8px; }
#btn-sound, #btn-settings { font-family: var(--body); font-size: 17px; line-height: 1; padding: 5px 9px; text-shadow: none; }

/* Auto fight warning bubble, hanging under its button */
.bubble {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 40;
  width: min(320px, calc(100vw - 24px));
  padding: 14px;
  text-align: left;
  font-size: 15px; line-height: 1.4;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 4px solid var(--ink);
  box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 6px 6px 0 rgba(20, 10, 4, .55);
  transform-origin: 100% 0; /* grows leftwards, never past the screen edge */
  animation: chest-pop .25s steps(3);
}
.bubble::before, .bubble::after { /* pixel tail */
  content: ''; position: absolute; right: var(--tail, 24px);
  border: solid transparent; border-width: 0 9px 12px;
}
.bubble::before { top: -16px; border-bottom-color: var(--ink); }
.bubble::after { top: -10px; border-bottom-color: var(--parch); }
.bubble p { margin: 0 0 10px; }
.bubble-title { font-family: var(--pixel); font-size: 11px; color: var(--ink); }
.bubble b { color: var(--red-dark); }
.bubble-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.exit-bubble { width: min(340px, calc(100vw - 24px)); }
/* you left your last game of this kind: the next one pays less (vs CPU box, Online window) */
.penalty-note {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; line-height: 1.4; font-size: 14px;
  color: #fff4ee; background: repeating-linear-gradient(135deg, #b83a30 0 10px, #a8322a 10px 20px);
  border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 200, 190, .35), 3px 3px 0 rgba(20, 10, 4, .3);
  text-shadow: 1px 1px 0 rgba(60, 10, 6, .6);
}
.penalty-note[hidden] { display: none; }
.penalty-note b { color: #ffe08a; }
.pn-ico { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; font-size: 16px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); text-shadow: none; animation: blink 1s steps(1) infinite; }
.modal.online .penalty-note { margin: 0 0 14px; }
.exit-bubble .bubble-buttons .btn { flex: 1; }
#btn-auto:disabled { opacity: 1; cursor: default; }

.arena {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 18px;
  align-items: start;
}
.center { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.panel { padding: 14px; }

/* ---------- Side panels ---------- */
.side { padding: 12px; opacity: .8; transition: opacity .2s; }
.side.active { opacity: 1; }
.side.p0.active { border-color: var(--blue-dark); box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 0 0 0 4px var(--blue), 6px 6px 0 4px rgba(20, 10, 4, .55); }
.side.p1.active { border-color: var(--red-dark); box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 0 0 0 4px var(--red), 6px 6px 0 4px rgba(20, 10, 4, .55); }
.side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-family: var(--pixel);
  font-size: 16px;
  border: 3px solid var(--ink);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .4);
}
.p0 .mark { background: var(--blue); box-shadow: inset -3px -3px 0 var(--blue-dark); }
.p1 .mark { background: var(--red); box-shadow: inset -3px -3px 0 var(--red-dark); }
.pname { font-family: var(--pixel); font-size: 12px; }
.p0 .pname { color: var(--blue-dark); }
.p1 .pname { color: var(--red-dark); }
.psub { color: var(--ink-soft); font-size: 14px; }
.turn-pill {
  margin-left: auto;
  padding: 5px 6px;
  font-family: var(--pixel);
  font-size: 7px;
  background: var(--gold);
  border: 2px solid var(--ink);
  animation: blink 1s steps(1) infinite;
}
.side-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 8px; }
.side-sub b { color: var(--ink); }
.roster { display: flex; flex-direction: column; gap: 5px; }

.class-card, .unit-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 5px 8px;
  background: var(--parch-2);
  border: 3px solid var(--parch-3);
  text-align: left;
}
.class-card:not(.disabled):hover, .unit-row:not(.disabled):hover { border-color: var(--ink-soft); }
.class-card.selected, .unit-row.selected { border-color: var(--ink); background: #f6e6b8; box-shadow: inset 0 0 0 2px var(--gold); }
.class-card.disabled, .unit-row.disabled { cursor: default; opacity: .6; }
.class-card.placed { opacity: .35; }
/* the "i" of a roster card: its champion card opens from it on small screens */
.cc-info { display: none; }
@media (max-width: 1060px) {
  .class-card, .unit-row { position: relative; }
  .cc-info { position: absolute; top: 3px; right: 3px; z-index: 2; display: grid; place-items: center; width: 17px; height: 17px;
    font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 12px; line-height: 1; color: #fff;
    background: var(--blue); border: 2px solid var(--ink); box-shadow: 1px 1px 0 rgba(20, 10, 4, .4); cursor: var(--cur-look), help; }
  .cc-info:hover, .cc-info:focus-visible { background: var(--gold); color: var(--ink); transform: scale(1.15); }
  .class-card.placed .cc-info, .unit-row.dead .cc-info { opacity: 1; }
}
.unit-row.dead { opacity: .4; }
.cc-icon { width: 32px; height: 32px; flex-shrink: 0; }
.cc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cc-name { font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; gap: 6px; }
.cc-title { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-title .tier-badge { flex-shrink: 0; }
.cc-stats { color: var(--ink-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-count { flex-shrink: 0; color: var(--ink-soft); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ur-note { color: var(--ink-soft); font-weight: 500; font-size: 13px; }
.shield-num { color: var(--blue-dark); margin-left: 2px; }
.mini-hp { height: 8px; border: 2px solid var(--ink); background: var(--wood-1); }
.mini-hp i { display: block; height: 100%; background: var(--green); box-shadow: inset 0 2px 0 #8fe08f; transition: width .3s steps(4); }
.mini-hp.low i { background: var(--red); box-shadow: inset 0 2px 0 #f08a80; }

/* ---------- Status & actions ---------- */
.status {
  display: flex; align-items: center; justify-content: center;
  height: 60px;
  padding: 6px 16px;
  text-align: center;
  font-size: 17px;
  overflow: hidden;
}
.status-text { line-height: 1.3; }
/* computer and tablet: the status ("Blue: place your Rogue…") under the board, above the action buttons
   (phones put it at the top instead, see the phone layout) */
@media (min-width: 701px) {
  .center .tabletop { order: 1; }
  .center .status { order: 2; }
  .center .actions { order: 3; }
}
.status.p0 { border-color: var(--blue-dark); }
.status.p0 b { color: var(--blue-dark); }
.status.p1 { border-color: var(--red-dark); }
.status.p1 b { color: var(--red-dark); }

.actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  min-height: 60px; align-items: center;
}
.hint {
  color: var(--parch);
  font-size: 15px;
  text-align: center;
  text-shadow: 2px 2px 0 var(--wood-0);
}
.act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 12px;
  border: 4px solid var(--ink);
  background: var(--parch);
  font-family: var(--pixel);
  font-size: 9px;
  min-width: 112px;
  box-shadow: inset 2px 2px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 0 4px 0 var(--wood-0);
}
.act small { font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.act:hover:not(:disabled) { background: #f6e6b8; }
.act:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 2px 2px 0 #fff6dc, 0 1px 0 var(--wood-0); }
.act.on { background: #f7c9c0; border-color: var(--red-dark); }
.act.skill.on { background: #e2d0fb; border-color: #4a2a80; }
.act.ult.on { background: #ffd9b8; border-color: #d4541e; }
.actions .act { min-width: 96px; padding: 7px 9px; }
.actions .act small { font-size: 12px; }
.actions .act.ghost { min-width: 0; }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act.ghost { min-width: 0; font-size: 12px; justify-content: center; }

/* ---------- Town square & battle slabs ---------- */
/* The board has no frame: its squares are stone slabs set into the village square drawn behind it */
.tabletop {
  position: relative;
  padding: 42px 0 48px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(480px, 100%);
  aspect-ratio: 1;
}

.cell {
  position: relative;
  padding: 0;
  border: 3px solid #f3ecd8;
  background: var(--tile-slab) 0 0 / 48px 48px, #b9b2a2;
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, .35),
    inset -3px -3px 0 rgba(0, 0, 0, .15),
    0 5px 0 #6e695f,
    0 9px 0 rgba(20, 30, 10, .28);
  min-width: 0;
}
.cell:nth-child(2) { background-position: 22px 10px; }
.cell:nth-child(3) { background-position: 40px 30px; }
.cell:nth-child(4) { background-position: 12px 44px; }
.cell:nth-child(5) { background-position: 50px 6px; }
.cell:nth-child(6) { background-position: 6px 26px; }
.cell:nth-child(7) { background-position: 34px 54px; }
.cell:nth-child(8) { background-position: 58px 18px; }
.cell:nth-child(9) { background-position: 18px 38px; }
.cell .content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 16px 4px 4px;
}
.cell .fx { position: absolute; inset: 0; pointer-events: none; }
.cell.p0 { border-color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue-dark), inset 0 -44px 34px -22px rgba(63, 116, 224, .45), 0 5px 0 var(--blue-dark), 0 9px 0 rgba(20, 30, 10, .28); }
.cell.p1 { border-color: var(--red); box-shadow: inset 0 0 0 3px var(--red-dark), inset 0 -44px 34px -22px rgba(208, 70, 60, .45), 0 5px 0 var(--red-dark), 0 9px 0 rgba(20, 30, 10, .28); }

/* Placement preview: the squares the selected champion would reach from the hovered square */
.cell.reach::before, .cell.reach-ally::before, .cell.reach-enemy::before {
  content: '';
  position: absolute; inset: 4px;
  z-index: 3;
  pointer-events: none;
  border: 3px dashed #fff3a0;
  background: rgba(255, 228, 120, .3);
  animation: blink .8s steps(1) infinite;
}
.cell.reach-ally::before { background: rgba(255, 228, 120, .12); }
.cell.reach-enemy::before {
  border: 4px solid #ff4a3a;
  background: rgba(255, 70, 50, .35);
  animation: none;
}
.cell.reach-enemy::after {
  content: 'HIT';
  position: absolute; left: 50%; top: -12px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 3px 5px;
  font-family: var(--pixel);
  font-size: 8px;
  color: #fff;
  background: #d0463c;
  border: 2px solid var(--ink);
  animation: blink .5s steps(1) infinite;
}
.cell.reach-origin { outline: 4px solid var(--gold); outline-offset: 2px; z-index: 2; }
.cell.empty { cursor: default; }
.cell.can-place { cursor: pointer; }
.cell.can-place:hover { border-color: var(--gold); }
.cell.can-place:hover::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--ghost) center / 64px 64px no-repeat;
  image-rendering: pixelated;
  opacity: .5;
}
.cell.actable { cursor: pointer; animation: px-glow 1s steps(1) infinite; }
body.no-glow .cell.actable { animation: none; } /* ⚙ Settings → Battle */
.cell.selected { outline: 4px solid var(--gold); outline-offset: 2px; z-index: 2; animation: none; }
.cell.tired .content { opacity: .55; }
.cell.t-attack { cursor: crosshair; outline: 4px solid var(--red); outline-offset: -4px; animation: px-blink-red .6s steps(1) infinite; }
.cell.t-move { cursor: pointer; outline: 4px dashed #e8f7c8; outline-offset: -10px; }
.cell.t-move::after {
  content: '►';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--pixel);
  font-size: 20px;
  color: #f4ffdc;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
  animation: blink 1s steps(1) infinite;
}
.cell.t-skill { cursor: pointer; outline: 4px solid var(--purple); outline-offset: -4px; animation: px-blink-purple .6s steps(1) infinite; }


/* Units on the board */
.u-top {
  position: absolute; top: 4px; left: 4px; right: 4px;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 1;
}
.u-atk {
  font-family: var(--pixel);
  font-size: 8px;
  padding: 3px 4px;
  background: var(--parch);
  border: 2px solid var(--ink);
}
.u-atk.boosted { background: var(--gold); }
.u-badges { display: flex; gap: 1px; font-size: 14px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .5)); }
.u-icon { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.u-icon::before { /* team-colored ground shadow under the feet */
  content: '';
  position: absolute;
  left: 14%; right: 14%; bottom: -2px;
  height: 10px;
  background: rgba(0, 0, 0, .35);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}
.cell.p0 .u-icon::before { background: var(--blue-dark); }
.cell.p1 .u-icon::before { background: var(--red-dark); }
/* --bob-phase keeps every hero on one shared clock, so redrawing the board doesn't restart the bob */
.u-icon .sprite { position: relative; animation: bob 1s steps(1, end) infinite; animation-delay: var(--bob-phase, 0s); }

/* Super Saiyan aura on Rallied heroes (three in a row) */
.u-icon .aura {
  position: absolute;
  left: -24%; right: -24%; bottom: -10%;
  height: 155%;
  background: var(--aura-a) center bottom / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: aura-flicker .22s steps(1) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 215, 70, .85));
  pointer-events: none;
}
.u-icon .aura i {
  position: absolute;
  bottom: 22%;
  width: 4px; height: 4px;
  background: #fff7c0;
  box-shadow: 0 0 4px #ffd23a;
  animation: aura-spark .9s steps(6) infinite;
}
.u-icon .aura i:nth-child(1) { left: 18%; animation-delay: -.15s; }
.u-icon .aura i:nth-child(2) { left: 42%; animation-delay: -.6s; }
.u-icon .aura i:nth-child(3) { left: 64%; animation-delay: -.35s; }
.u-icon .aura i:nth-child(4) { left: 82%; animation-delay: -.8s; }
.u-icon.powered .sprite { filter: drop-shadow(0 0 2px #fff3a0); }
@keyframes aura-flicker {
  0%, 100% { background-image: var(--aura-a); }
  50% { background-image: var(--aura-b); }
}
@keyframes aura-spark {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}
.fx-bolt {
  background: #e8fbff;
  box-shadow: 0 0 8px #9fe6ff;
  clip-path: polygon(40% 0, 100% 0, 55% 40%, 90% 40%, 20% 100%, 40% 55%, 0 55%);
}
.cell.p1 .u-icon .sprite { animation-delay: calc(var(--bob-phase, 0s) - .5s); }
.cell.tired .u-icon .sprite, .cell.frozen .u-icon .sprite { animation: none; }
.u-name {
  font-family: var(--pixel);
  font-size: 7px;
  color: #fff;
  text-shadow: 2px 0 0 var(--wood-0), -2px 0 0 var(--wood-0), 0 2px 0 var(--wood-0), 0 -2px 0 var(--wood-0);
  margin-top: 2px;
}
.hp {
  position: relative;
  width: 84%; height: 12px;
  border: 2px solid var(--wood-0);
  background: var(--wood-1);
}
.hp-fill { height: 100%; background: #4caf50; box-shadow: inset 0 3px 0 #8fe08f; transition: width .3s steps(4); }
.hp.low .hp-fill { background: var(--red); box-shadow: inset 0 3px 0 #f08a80; }
.hp span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--pixel);
  font-size: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 var(--wood-0);
}
.u-cd {
  font-family: var(--pixel);
  font-size: 6px;
  color: #f4ffdc;
  text-shadow: 1px 1px 0 var(--wood-0);
  margin-top: 1px;
}
.u-cd.ready { color: #e2ccff; }
.cell.frozen .content { filter: saturate(.4) brightness(1.15); }
.cell.frozen .fx { background: rgba(160, 220, 255, .35); box-shadow: inset 0 0 0 4px #d8f4ff; }

/* ---------- Effects ---------- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: visible; }
.fxe { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.fx-sprite { display: block; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .45)); }
.fx-px { image-rendering: pixelated; }
.fx-ring { border-style: solid; background: transparent; }
.fx-slash { border-style: solid; border-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); }
.fx-beam { transform-origin: 0 50%; }
.fx-flash { mix-blend-mode: screen; }
.fx-ice {
  background: rgba(170, 230, 255, .55);
  border: 4px solid #e8f8ff;
  box-shadow: inset 6px 6px 0 rgba(255, 255, 255, .5), inset -6px -6px 0 rgba(78, 168, 220, .6), 0 0 18px rgba(160, 220, 255, .8);
}

.float {
  position: absolute; left: 50%; top: 40%;
  font-family: var(--pixel);
  font-size: 15px;
  color: #fff;
  text-shadow: 3px 3px 0 var(--wood-0), -2px -2px 0 var(--wood-0), 2px -2px 0 var(--wood-0), -2px 2px 0 var(--wood-0);
  opacity: 0;
  animation: float-up 1.2s steps(10) forwards;
  white-space: nowrap;
  z-index: 12;
}
/* damage numbers: big, with a punch */
.float.dmg { color: #ff5a46; font-size: 19px; animation-name: float-hit; }
.float.crit { color: var(--gold); font-size: 24px; animation-name: float-hit; }
.float.power { color: var(--gold); font-size: 16px; }
@keyframes float-hit {
  0% { opacity: 0; transform: translate(-50%, 0) scale(2.2); }
  12% { opacity: 1; transform: translate(-50%, -40%) scale(.9); }
  22% { transform: translate(-50%, -55%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
.info-stats .st-crit { color: #b4801f; }
.info-stats .st-miss { color: #3a6a9a; }
.info-stats .st-lbl { margin-right: .3em; font-size: .8em; color: var(--ink-soft); }
/* CRITICAL! over the hero: a gold starburst and a big word that slams in */
.crit-burst {
  position: absolute; left: 50%; top: 32%; z-index: 14; pointer-events: none;
  display: grid; place-items: center; transform: translate(-50%, -50%);
}
.cb-star {
  position: absolute; width: 120px; height: 120px;
  background: radial-gradient(circle, #fff6b0 0 18%, #ffd34d 19% 34%, rgba(255, 140, 30, .85) 35% 46%, transparent 47%);
  clip-path: polygon(50% 0, 61% 33%, 98% 20%, 70% 50%, 98% 80%, 61% 67%, 50% 100%, 39% 67%, 2% 80%, 30% 50%, 2% 20%, 39% 33%);
  animation: cb-star var(--dur, 1.3s) steps(8) forwards;
}
.cb-text {
  position: relative; font-family: var(--pixel); font-size: 15px; color: #fff3a0; white-space: nowrap; letter-spacing: 1px;
  text-shadow: 3px 3px 0 #b3302f, -2px -2px 0 #b3302f, 2px -2px 0 #b3302f, -2px 2px 0 #b3302f, 0 0 10px #ff8a1e;
  animation: cb-text var(--dur, 1.3s) steps(10) forwards;
}
@keyframes cb-star {
  0% { opacity: 0; transform: scale(.2) rotate(-30deg); }
  20% { opacity: 1; transform: scale(1.15) rotate(0deg); }
  70% { opacity: .9; transform: scale(1) rotate(15deg); }
  100% { opacity: 0; transform: scale(1.3) rotate(30deg); }
}
@keyframes cb-text {
  0% { opacity: 0; transform: scale(2.6) rotate(-8deg); }
  18% { opacity: 1; transform: scale(.9) rotate(-4deg); }
  28% { transform: scale(1.1) rotate(-4deg); }
  75% { opacity: 1; transform: scale(1) translateY(-6px) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1) translateY(-22px) rotate(-4deg); }
}
.cell.crit-hit { animation: crit-flash .35s steps(3); }
/* a missed attack (missPop in js/ui.js): the target sidesteps, "MISS" floats up */
.cell.dodge .u-icon { animation: dodge var(--dodge, .45s) steps(6); }
@keyframes dodge { 30% { transform: translateX(-14px) skewX(8deg); opacity: .6; } 60% { transform: translateX(-10px); opacity: .8; } }
.miss-pop {
  position: absolute; left: 50%; top: 30%; z-index: 14; pointer-events: none; transform: translate(-50%, -50%);
  font-family: var(--pixel); font-size: 14px; letter-spacing: 1px; white-space: nowrap; color: #e8f4ff;
  text-shadow: 2px 2px 0 #3a5a8a, -2px -2px 0 #3a5a8a, 2px -2px 0 #3a5a8a, -2px 2px 0 #3a5a8a, 0 0 8px #9fd0ff;
  animation: miss-pop var(--dur, 1.1s) steps(9) forwards;
}
@keyframes miss-pop {
  0% { opacity: 0; transform: translate(-10%, -50%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
  80% { opacity: 1; transform: translate(-50%, -80%) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%, -120%) rotate(-6deg); }
}
@keyframes crit-flash { 50% { filter: brightness(1.7) saturate(1.4); } }
.float.heal { color: #7dff8a; }
.float.shielded { color: #9fd0ff; }
.float.status { font-family: var(--body); font-size: 26px; }
.content.shake { animation: shake .3s steps(4); }
.fx.line { animation: line-glow 1.5s steps(6) forwards; }

@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -10%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
@keyframes line-glow {
  0% { box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 40px rgba(242, 193, 78, .9); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
/* idle animation: the breathing frame shows every other beat, in step with the bob */
.u-icon .sprite.f-breath { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  animation: bob 1s steps(1, end) infinite, idle-b 2s steps(1, end) infinite; animation-delay: var(--bob-phase, 0s), var(--bob-phase, 0s); }
.u-icon .sprite.f-main { animation: bob 1s steps(1, end) infinite, idle-a 2s steps(1, end) infinite; animation-delay: var(--bob-phase, 0s), var(--bob-phase, 0s); }
@keyframes idle-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes idle-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.u-icon.acting .sprite.f-breath { display: none; }
.u-icon.acting .sprite.f-main { animation: none; opacity: 1; }
.cell.dead .u-icon .sprite.f-main, .u-icon .sprite.fallen { animation: none; }

@keyframes bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes px-glow {
  0%, 100% { outline: 4px solid transparent; outline-offset: -4px; }
  50% { outline: 4px solid var(--gold); outline-offset: -4px; }
}
@keyframes px-blink-red {
  0%, 100% { outline-color: var(--red); }
  50% { outline-color: #ffd0c8; }
}
@keyframes px-blink-purple {
  0%, 100% { outline-color: var(--purple); }
  50% { outline-color: #f0e2ff; }
}

/* ---------- Info & chronicle ---------- */
.info-empty { color: var(--ink-soft); display: grid; place-items: center; min-height: 120px; text-align: center; }
.info-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.info-icon { width: 48px; height: 48px; flex-shrink: 0; }
.info-name { font-family: var(--pixel); font-size: 12px; line-height: 1.5; }
.info-head.p0 .info-name { color: var(--blue-dark); }
.info-head.p1 .info-name { color: var(--red-dark); }
.info-role { color: var(--ink-soft); font-size: 14px; }
.info-stats { margin-left: auto; display: flex; gap: 10px; font-family: var(--pixel); font-size: 10px; white-space: nowrap; }
.info-body { display: flex; gap: 14px; align-items: flex-start; }
.info-text { flex: 1; font-size: 15px; line-height: 1.4; }
.info-text p { margin: 0 0 6px; }
.info-text b { color: var(--wood-1); }
.cd-tag {
  font-size: 12px;
  color: #4a2a80;
  border: 2px solid #4a2a80;
  padding: 0 4px;
  background: #ece0ff;
}
.range-set { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.range-spot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.range-spot span { font-family: var(--pixel); font-size: 6px; color: var(--ink-soft); }
.range-spot.here .range-grid { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(242, 193, 78, .8); } /* the kind of square the hero stands on */
.range-spot.here span { color: var(--gold-dark); }
.range-grid {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  gap: 2px;
  padding: 3px;
  background: var(--wood-1);
  border: 2px solid var(--ink);
}
.range-grid i { width: 14px; height: 14px; background: #5d9e3c; box-shadow: inset -2px -2px 0 #3f7428; }
.range-grid i.hit { background: var(--red); box-shadow: inset -2px -2px 0 var(--red-dark); }
.range-grid i.me { background: var(--gold); box-shadow: inset -2px -2px 0 var(--gold-dark); }

.log-box h3 { margin: 0 0 10px; font-family: var(--pixel); font-size: 10px; color: var(--ink-soft); }
#log {
  list-style: none; margin: 0; padding: 0;
  max-height: 200px; overflow-y: auto;
  font-size: 15px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 4px;
}
#log li { padding-left: 8px; border-left: 4px solid var(--parch-3); }
/* chronicle sections: one header per phase and per turn of the battle, its lines indented under it */
#log li:not(.log-group) { margin-left: 12px; }
#log li.log-group {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 3px 8px;
  font-family: var(--pixel); font-size: 7px; line-height: 1.4; color: var(--ink);
  background: var(--parch-2); border-left: 4px solid var(--parch-3); box-shadow: inset 0 -2px 0 var(--parch-3);
}
#log li.log-group:first-child { margin-top: 0; }
#log li.log-group.p0 { border-left-color: var(--blue); background: #e3ecf8; }
#log li.log-group.p1 { border-left-color: var(--red); background: #f8e1dc; }
.lg-title { font-weight: 700; text-transform: uppercase; }
.log-group.p0 .lg-who { color: var(--blue-dark); }
.log-group.p1 .lg-who { color: var(--red-dark); }
.lg-time { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
.log-strip { display: flex; align-items: stretch; gap: 16px; }
.log-strip h3 { flex: 0 0 auto; margin: 2px 0 0; }
.log-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.game-clock {
  align-self: flex-start; padding: 4px 7px;
  font-family: var(--pixel); font-size: 9px; color: var(--parch); white-space: nowrap;
  background: var(--wood-1); border: 3px solid var(--ink); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2);
}
.game-clock.stopped { background: var(--gold); color: var(--ink); }

.go-time { white-space: nowrap; font-weight: 700; }
.log-strip #log { flex: 1 1 auto; min-width: 0; max-height: 140px; }
.log-strip { position: relative; }
.log-grip { display: none; }
/* the chronicle's ⚙ menu (top right of the box) and what it hides */
.log-strip #log { margin-right: 34px; }
.log-opts-btn { position: absolute; top: 6px; right: 8px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  font-size: 16px; line-height: 1; color: var(--ink); background: radial-gradient(circle at 35% 30%, #fff6dc, var(--parch) 60%, var(--parch-3));
  border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff, 0 2px 0 var(--wood-0); }
.log-opts-btn:hover, .log-opts-btn.on { background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 70%); transform: translateY(-1px); }
.log-opts-btn.on { transform: rotate(30deg); }
.log-opts { position: absolute; right: 8px; bottom: calc(100% - 4px); z-index: 30; width: 260px; padding: 8px;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3), 4px 4px 0 rgba(20, 10, 4, .45); animation: tip-in .12s steps(3); }
.log-opts[hidden] { display: none; }
.lo-head { margin: 0 2px 6px; font-family: var(--pixel); font-size: 8px; color: var(--ink-soft); text-transform: uppercase; }
.lo-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; text-align: left; color: var(--ink); background: none; border: 2px solid transparent; box-shadow: none; }
.lo-row + .lo-row { margin-top: 2px; }
.lo-row:hover { background: rgba(255, 255, 255, .45); border-color: var(--parch-3); }
.lo-ico { flex-shrink: 0; width: 22px; font-size: 15px; text-align: center; }
.lo-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lo-text b { font-family: var(--pixel); font-size: 8px; font-weight: normal; }
.lo-text small { font-size: 12px; line-height: 1.2; color: var(--ink-soft); }
/* a pixel switch: grey and left when off, green and right when on */
.lo-sw { position: relative; flex-shrink: 0; width: 34px; height: 18px; background: #8a8478; border: 3px solid var(--ink); }
.lo-sw i { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; background: #fffbea; box-shadow: inset -2px -2px 0 var(--parch-3); transition: left .1s steps(2); }
.lo-row.on .lo-sw { background: #5fcf6e; }
.lo-row.on .lo-sw i { left: 17px; }
/* every line: its time on the left in bold (Timestamps), then its text; a turn header's own time goes with the header (Turn headers) */
#log li:not(.log-group) { display: flex; align-items: baseline; gap: 8px; }
#log .lg-txt { flex: 1; min-width: 0; }
.log-time { flex: 0 0 auto; min-width: 40px; font-family: var(--pixel); font-size: 7px; font-weight: 700; color: var(--ink); text-shadow: .5px 0 0 var(--ink); }
#log li.lg-warn .log-time, #log li.lg-auto .log-time { color: inherit; text-shadow: .5px 0 0 currentColor; }
#log.no-times .log-time { display: none; }
#log.no-damage li.lg-dmg { display: none; }
#log.no-turns li.log-group { display: none; }
#log.no-emotes li.lg-emote { display: none; }
#log.no-deaths li.lg-death { display: none; }
#log.no-banners li.lg-banner { display: none; }
/* a time the same as the line above's: dimmed (the column always holds a time, so the texts line up) */
.log-time.same { opacity: .3; }
/* the announcer's banners */
#log li.lg-banner { padding: 2px 8px; background: linear-gradient(90deg, #ffe9a6, #fff3c8 70%); border-left-color: var(--gold-dark); }
#log li.lg-banner.p0 { border-left-color: var(--blue); }
#log li.lg-banner.p1 { border-left-color: var(--red); }
.lg-ann { font-family: var(--pixel); font-size: 8px; font-weight: normal; letter-spacing: .5px; }
#log li.lg-banner.p0 .lg-ann { color: var(--blue-dark); }
#log li.lg-banner.p1 .lg-ann { color: var(--red-dark); }
/* a mascot's emote in the chronicle: its little picture, then "says:" and the emote's pixel art */
#log li.lg-emote { color: var(--ink-soft); }
#log li.lg-emote .lg-ll { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; image-rendering: pixelated; }
#log li.lg-emote .lg-emo { width: 18px; height: 18px; vertical-align: -4px; image-rendering: pixelated; }
#log.no-turns li:not(.log-group) { margin-left: 0; }
body.resizing, body.resizing * { cursor: ns-resize !important; user-select: none; }
/* in a replay the chronicle sits in the replay's panel: to the right of the timeline, or above it on big screens (ui.js placeChronicle) */
body.rp-log-hidden #log-strip { visibility: hidden; } /* the replay's 📜 off: hidden but keeping its place */
.rp-btn.chron { font-size: 18px; }
.rp-btn.chron:not(.on) { filter: grayscale(1); opacity: .6; }
.rp-bottom { display: flex; gap: 10px; max-width: 1300px; margin: 0 auto; }
.rp-bottom .rp-scroll { flex: 1 1 auto; min-width: 0; margin: 0; }
.rp-chron { flex: 0 0 380px; display: flex; min-width: 0; }
.rp-chron:empty { display: none; }
.rp-chron .log-strip { flex: 1; height: 146px; margin: 0; padding: 6px 8px; color: var(--ink); }
.rp-chron .log-head, .rp-chron .log-grip { display: none; }
.rp-chron .log-strip #log { height: 100%; max-height: none; margin-right: 30px; }
.rp-chron .log-opts-btn { top: 4px; right: 4px; width: 26px; height: 26px; font-size: 14px; }
@media (max-width: 900px) { .rp-bottom { flex-direction: column; } .rp-chron { flex-basis: auto; } .rp-chron .log-strip { height: 110px; } }
#log li.p0 { border-left-color: var(--blue); }
#log li.p1 { border-left-color: var(--red); }
/* lines that must stand out: sudden death on a dark band, an Ultimate glowing (renderLog in ui.js) */
#log li.lg-warn {
  padding: 4px 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;
}
#log li.lg-ult {
  padding: 3px 8px; font-weight: 700; color: #3a1a08;
  background: linear-gradient(90deg, #ff9a3c, #ffd36b 70%, #fff3b0); box-shadow: inset 0 -2px 0 rgba(140, 60, 10, .35);
}
#log li.lg-ult-ready { padding: 2px 8px; color: #6a3a10; background: #ffe9b8; }
#log li.lg-auto {
  padding: 3px 8px; font-weight: 700; color: #e8fbff; text-shadow: 1px 1px 0 #0a3a48;
  background: repeating-linear-gradient(90deg, #2a8aa0 0 10px, #2f96ad 10px 20px); border-left-color: #7ff0ff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
#log li.lg-auto .lg-u.p0 { color: #cfe2ff; }
#log li.lg-auto .lg-u.p1 { color: #ffd0cc; }

/* ---------- Overlays ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(20, 10, 4, .78);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  z-index: 50;
}
.overlay.show { display: flex; }
body.menu-open #app { visibility: hidden; } /* the main menu shows over the village only */
.menu-card, .modal {
  padding: 26px;
  width: 100%;
  max-width: 470px;
  text-align: center;
}
.menu-card { max-height: 100%; overflow-y: auto; } /* short windows: the menu scrolls instead of being cut */
#menu.levels .menu-grid, #menu.levels .tagline { display: none; } /* room for the mode and difficulty choices */
.modal { max-width: 940px; max-height: 90vh; overflow-y: auto; text-align: left; position: relative; }
.modal h2 { font-family: var(--pixel); font-size: 14px; margin: 0 0 14px; }
.close { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-family: var(--pixel); font-size: 14px; color: var(--ink); }
.logo { font-size: 24px; margin: 16px 0 10px; line-height: 1.4; }
.tagline { color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; }
.menu-grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 52px);
  gap: 4px;
  padding: 6px;
  background: var(--tile-dirt) 0 0 / 64px 64px, #a5794a;
  border: 4px solid var(--wood-0);
  box-shadow: 0 0 0 4px var(--wood-3), 0 0 0 7px var(--wood-0);
}
.menu-grid span {
  width: 52px; height: 52px;
  padding: 6px;
  background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c;
  border: 3px solid;
}
.menu-grid .p0 { border-color: var(--blue); }
.menu-grid .p1 { border-color: var(--red); }
.rules-list { line-height: 1.5; padding-left: 22px; margin: 0 0 22px; }
.rules-list li { margin-bottom: 8px; }
.rules-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.rule-card { padding: 12px; box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3); }
.go-icon { font-size: 48px; }
.go-title { font-family: var(--pixel); font-size: 20px; margin: 10px 0; line-height: 1.4; }
.survivors { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.survivors .sprite { width: 48px; height: 48px; }

.toast {
  position: fixed; top: 18px; left: 50%;
  transform: translate(-50%, -200%);
  padding: 12px 18px;
  font-size: 17px;
  transition: transform .3s steps(5);
  z-index: 60;
  max-width: calc(100% - 32px);
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); }
.toast.p0 { border-color: var(--blue-dark); }
.toast.p1 { border-color: var(--red-dark); }

/* ---------- Draft ---------- */
.draft { display: flex; flex-direction: column; gap: 16px; }
.draft-head {
  position: sticky; top: 8px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
}
.draft.p0 .draft-head { border-color: var(--blue-dark); }
.draft.p1 .draft-head { border-color: var(--red-dark); }
.draft-head h2 { margin: 0 0 8px; font-family: var(--pixel); font-size: 13px; line-height: 1.5; display: flex; align-items: center; gap: 10px; }
.draft-head h2 .mark { width: 34px; height: 34px; font-size: 13px; }
.draft-head p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 560px; }
.draft-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.draft-team { display: flex; gap: 5px; }
.slot {
  width: 40px; height: 40px;
  padding: 2px;
  border: 3px dashed var(--parch-3);
  background: var(--parch-2);
}
.slot.filled { border: 3px solid var(--ink); background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; }
.slot.filled:hover { border-color: var(--red); }
.draft-count { font-family: var(--pixel); font-size: 10px; color: var(--ink-soft); min-width: 48px; text-align: center; }
.draft-count b { color: var(--ink); font-size: 13px; font-weight: normal; }

.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* ---------- Coins and tiers ---------- */
.coin-icon {
  display: inline-block;
  width: 16px; height: 16px;
  background: var(--coin) center / contain no-repeat;
  image-rendering: pixelated;
  vertical-align: -3px;
  flex-shrink: 0;
}
.coin-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--wood-1);
  color: var(--gold);
  border: 3px solid var(--wood-0);
  box-shadow: inset 2px 2px 0 var(--wood-3), 3px 3px 0 rgba(20, 10, 4, .45);
  font-family: var(--pixel); font-size: 12px;
}
.coin-pill b { font-weight: normal; }
.menu-coins { margin: -6px 0 16px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Account level and champion mastery ---------- */
.level-badge {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; flex-shrink: 0;
  font-family: var(--pixel); font-size: 9px; color: #fff; text-shadow: 1px 1px 0 var(--ink);
  background: var(--blue); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35);
}
.level-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--wood-1); border: 3px solid var(--ink); color: var(--parch); }
.level-pill .xp-mini { width: 70px; border-color: var(--parch-3); background: #2a1c12; }
.xp-bar { position: relative; height: 18px; background: var(--wood-1); border: 3px solid var(--ink); overflow: hidden; }
.xp-bar > i { display: block; height: 100%; background: linear-gradient(#9fdcff, #3f8de0); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); transition: width 1.1s steps(14); }
.xp-bar > span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 7px; color: #fff; text-shadow: 1px 1px 0 var(--ink); white-space: nowrap; }
.xp-bar.mini { height: 10px; border-width: 2px; }
.xp-bar.mastery > i { background: linear-gradient(#ffe48a, #e0a52b); }
.xp-box { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 10px; text-align: left; background: var(--parch-2); border: 3px solid var(--ink); }
.xp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-head b { font-family: var(--pixel); font-size: 11px; font-weight: normal; }
.xp-up { font-family: var(--pixel); font-size: 8px; color: #2f7d3b; animation: blink 1s steps(1) 3; }
.mastery-gains { display: flex; flex-wrap: wrap; gap: 6px; }
.mg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; background: #fff6dc; border: 2px solid var(--ink); font-size: 12px; }
.mg .sprite { width: 26px; height: 26px; }
.mg.up { background: #fbe7a6; }
.mg { position: relative; cursor: var(--cur-look), help; }
.mg:hover, .mg:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
/* pixel stat icons (heart = HP, sword = attack), drawn in js/sprites.js; they grow with the text */
.ico {
  display: inline-block; flex-shrink: 0; width: 1.5em; height: 1.5em; margin-right: .25em; vertical-align: -.4em;
  background: center / contain no-repeat; image-rendering: pixelated; font-style: normal;
}
.ico-hp { background-image: var(--ico-hp); }
.ico-atk { background-image: var(--ico-atk); }
.ico-crit { background-image: var(--ico-crit); }
.ico-miss { background-image: var(--ico-miss); }
.ico-clock { background-image: var(--ico-clock); }
.ico-timer { background-image: var(--ico-timer); }
.game-clock, .lg-time, .go-time, .tt-secs { display: inline-flex; align-items: center; gap: 2px; }
.game-clock .ico, .tt-secs .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: 0; }
.lg-time .ico { width: 11px; height: 11px; margin-right: 3px; vertical-align: 0; }
.go-time .ico, .mh-stats .ico-clock { width: 15px; height: 15px; margin-right: 3px; vertical-align: -3px; }
.bp-ico .ico-timer { width: 18px; height: 18px; margin: 0; vertical-align: -3px; }
.info-stats span, .u-atk { display: inline-flex; align-items: center; }
.info-stats span .ico, .u-atk .ico { vertical-align: 0; }
.u-atk .ico { width: 1.7em; height: 1.7em; margin: -.2em .2em -.2em 0; }
.act .ico { width: 1.3em; height: 1.3em; }

/* ---------- Champion card (draft bubble, roster bubble, rules) ---------- */
.ccard { display: flex; flex-direction: column; text-align: left; }
.ccard .info-head { margin-bottom: 8px; }
/* the card's header: the picture on the left; on the right the title line (tier · name · mastery),
   then the role and factions, then the stats on their own line, so nothing gets squeezed */
.ccard .info-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.ccard .info-head .info-icon { grid-row: 1 / span 2; }
.ccard .info-head .info-stats { grid-column: 2; margin-left: 0; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 14px; }
/* every stat the same height, icon and text centered on one line */
.ccard .info-stats > span { display: inline-flex; align-items: center; height: 20px; line-height: 1; font-size: 10px; }
.ccard .info-stats > span .ico { width: 18px; height: 18px; margin-right: 5px; }
.ccard .info-stats .st-lbl { font-size: 10px; margin-right: 4px; }
.ccard.p0 .info-name { color: var(--blue-dark); }
.ccard.p1 .info-name { color: var(--red-dark); }
.cc-id { min-width: 0; }
/* the card's title: tier, name and mastery on one line, centered on each other */
.ccard .info-name { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.ccard .info-name .in-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ccard .info-name .tier-badge, .ccard .info-name .mastery-badge { flex-shrink: 0; vertical-align: 0; }
.ccard .info-name .in-role { margin-left: auto; padding-left: 8px; flex-shrink: 0; font-family: var(--body); font-size: 14px; font-weight: normal; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.ccard .info-name .in-role .fac-tag { color: var(--ink-soft); }
.cc-status { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cc-status span { padding: 2px 6px; font-size: 12px; background: #fff6dc; border: 2px solid var(--ink); }
.cc-sec { padding: 8px 0; border-top: 3px solid var(--parch-3); box-shadow: 0 -1px 0 #fff6dc; }
.cc-sec p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.cc-label { font-family: var(--pixel); font-size: 8px; line-height: 1.7; color: var(--wood-1); }
.cc-label b { color: var(--ink); font-weight: normal; }
.cc-label .cd-tag { padding: 0 4px; font-family: var(--body, inherit); font-size: 11px; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }
.cc-kind { display: inline-block; padding: 1px 4px; font-size: 6px; color: #fff; text-shadow: 1px 1px 0 var(--ink); border: 2px solid var(--ink); vertical-align: 1px; }
.cc-ab.passive .cc-kind { background: var(--gold-dark, #b4801f); }
.cc-ab.skill .cc-kind { background: #7a4ccf; }
.cc-range-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cc-range-row .range-set { flex-direction: row; }
.cc-range-row p { flex: 1; margin: 0; }
.cc-ab { display: flex; align-items: flex-start; gap: 10px; }
.cc-tier p { color: var(--ink-soft); font-size: 13px; }
.ab-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; padding: 3px; background: #2a1c12; border: 3px solid var(--gold-dark, #b4801f); box-shadow: inset 0 0 0 2px var(--ink); }
.ab-icon.skill { border-color: #7a4ccf; }
.ab-icon img { width: 100%; height: 100%; image-rendering: pixelated; }
.act .ab-icon { width: 24px; height: 24px; padding: 2px; border-width: 2px; vertical-align: middle; }
.rule-card .ccard .info-head { margin-bottom: 6px; }

/* ---------- Ultimates ---------- */
.ab-icon.ult { border-color: #ff7a1e; box-shadow: inset 0 0 0 2px var(--ink), 0 0 6px rgba(255, 122, 30, .6); }
.cc-ab.ult .cc-kind { background: #d4541e; }
.cc-energy { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cc-energy small { font-family: var(--pixel); font-size: 7px; color: var(--ink-soft); }
.cc-energy.full small { color: #d4541e; }
.en-bar { display: block; width: 120px; height: 9px; background: #2a1c12; border: 2px solid var(--ink); }
.en-bar i, .mini-en i, .en i { display: block; height: 100%; background: linear-gradient(#ffd36b, #ff8a1e); }
.cc-energy.full .en-bar i, .mini-en.full i, .en.full i { background: linear-gradient(#fff1b0, #ff5a1e); animation: blink .7s steps(1) infinite; }
.mini-en { display: block; height: 6px; margin-top: 2px; background: #2a1c12; border: 2px solid var(--ink); }
/* the energy bar, right under the HP bar and as wide (an empty block in the centered column would shrink to nothing) */
.cell .en { flex-shrink: 0; width: 84%; height: 8px; margin-top: -1px; background: #2a1c12; border: 2px solid var(--wood-0); }
.cell.ult-ready .u-icon { filter: drop-shadow(0 0 6px #ff8a1e) drop-shadow(0 0 2px #ffd36b); }
.act.ult { border-color: #d4541e; }
.act.ult.full:not(:disabled) { background: #ffe0b8; box-shadow: 0 0 0 3px #ff8a1e, 0 3px 0 var(--wood-0); animation: ult-pulse 1s steps(2) infinite; }
@keyframes ult-pulse { 50% { box-shadow: 0 0 0 3px #ffd36b, 0 3px 0 var(--wood-0); } }
.cell.t-ult::before { border-color: #ff8a1e !important; }

/* ---------- Factions and synergies ---------- */
.fac-ico { width: 16px; height: 16px; flex-shrink: 0; image-rendering: pixelated; vertical-align: -3px; }
.fac-tag { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.syn-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.syn-row:empty { display: none; }
/* in the rosters the row is always there (even empty) and stays one line, so the box keeps its height
   while heroes are placed */
.syn-row.keep { flex-wrap: nowrap; min-height: 24px; overflow: hidden; }
.syn-row.keep:empty { display: flex; }
.syn-row.keep .syn-chip { flex-shrink: 1; min-width: 0; }
.syn-row.keep .syn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-row.keep .syn-chip b, .syn-row.keep .syn-chip .fac-ico { flex-shrink: 0; }
.syn-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px;
  font-size: 12px; line-height: 1.2; color: var(--ink); background: var(--parch-2); border: 2px solid var(--parch-3); opacity: .75;
}
.syn-chip b { font-family: var(--pixel); font-size: 7px; font-weight: normal; }
.syn-chip.lv1 { opacity: 1; border-color: var(--ink); background: #e3ecf8; }
.syn-chip.lv2 { opacity: 1; border-color: var(--ink); background: var(--gold); box-shadow: inset 1px 1px 0 #ffe9a6; }
.ct-facs { display: flex; justify-content: center; gap: 3px; margin-top: -3px; line-height: 0; }
.ct-facs .fac-ico { width: 18px; height: 18px; }
.cc-facs { display: inline-flex; gap: 2px; flex-shrink: 0; line-height: 0; }
.cc-facs .fac-ico { width: 15px; height: 15px; }
.chip-sep { width: 3px; align-self: stretch; margin: 0 2px; background: var(--ink); opacity: .3; }
.fac-chip { display: inline-flex; align-items: center; gap: 4px; }
.fac-chip .fac-ico { width: 14px; height: 14px; }
/* the champion card's synergies: one block per faction, one row per level */
.fac-blocks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fac-block { padding: 6px 8px; background: #fff6dc; border: 2px solid var(--parch-3); border-left-width: 5px; }
.fac-block.fac-order { border-left-color: #9aa8b4; }
.fac-block.fac-wild { border-left-color: #e0453c; }
.fac-block.fac-arcane { border-left-color: #8f55e0; }
.fac-block.fac-shadow { border-left-color: #4a2a80; }
.fac-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.fac-head b { font-family: var(--pixel); font-size: 8px; font-weight: normal; }
.fac-head .fac-ico { width: 18px; height: 18px; }
.fac-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.35; }
.fac-n { flex: 0 0 auto; min-width: 66px; font-family: var(--pixel); font-size: 7px; color: var(--wood-1); }
.cc-fac .fac-note { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
/* the bubble of a faction chip: the faction's block, the levels reached lit up */
.syn-bubble { position: fixed; z-index: 60; width: min(270px, calc(100vw - 16px)); padding: 8px 10px; pointer-events: none; text-align: left; }
.syn-bubble .fac-block { border-width: 2px; border-left-width: 5px; }
.syn-bubble .fac-row.on { font-weight: 700; }
.syn-bubble .fac-row.on .fac-n { color: #2f7d3b; }
.syn-bubble .fac-row.off { opacity: .5; }
.syn-bubble .fac-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.syn-chip[data-fac] { cursor: var(--cur-look), help; }
.syn-chip[data-fac]:hover, .syn-chip[data-fac]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.fac-count { margin-left: auto; padding: 0 3px; font-family: var(--pixel); font-size: 6px; background: var(--parch-2); border: 1px solid var(--ink-soft); }
.fac-block.lv0 { background: #f3ead2; }
.fac-block.lv1 .fac-count { background: #e3ecf8; border-color: var(--ink); }
.fac-block.lv2 { background: #fdf0c2; }
.fac-block.lv2 .fac-count { background: var(--gold); border-color: var(--ink); }

/* Battle: the attack range of the hero under the mouse */
.cell.threat::before, .cell.threat-ally::before {
  content: ''; position: absolute; inset: 6px; z-index: 3; pointer-events: none;
  border: 4px dashed #ff4a3a; background: rgba(255, 60, 40, .3);
}
.cell.threat-ally::before { border-color: #ffe478; background: rgba(255, 228, 120, .26); }
.cell.threat-origin { outline: 4px solid #ff5a46; outline-offset: 2px; z-index: 2; }

/* Auto fight speed (vs the CPU) */
.speed-box { display: inline-flex; gap: 0; }
.speed-box .btn { padding-left: 7px; padding-right: 7px; }
.speed-box .btn + .btn { margin-left: -3px; }

/* back buttons on the shop, online and profile windows */
.modal-back { display: block; width: min(410px, 100%); margin: 20px auto 0; }

/* the bubble of a buff or debuff on the board */
.tip.rich { max-width: 260px; padding: 0; }
/* the legendary bubble */
.lt { position: relative; width: 205px; overflow: hidden; white-space: normal; border: 3px solid #8f86c8; box-shadow: inset 0 0 0 2px #f2efff;
  background: linear-gradient(125deg, #f4f0ff 0%, #ffd8f1 16%, #fff3c8 32%, #d2fff0 48%, #d3e9ff 64%, #e8d6ff 80%, #ffd8f1 100%) 0 0 / 300% 300%; animation: holo-shift 6s linear infinite; }
.lt > * { position: relative; z-index: 1; }
/* foil glints: two layers of tiny sparkles twinkling out of step, and a shine sweeping across now and then */
.lt::before, .lt::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lt::before {
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 12px 40px / 46px 38px,
    radial-gradient(circle, #e9fbff 0 2px, rgba(170, 220, 255, .5) 3px, transparent 4px) 30px 58px / 58px 44px,
    radial-gradient(circle, #ffe6fb 0 1px, transparent 2px) 0 20px / 34px 52px;
  animation: lt-twinkle 1.4s steps(2) infinite;
}
.lt::after {
  background:
    radial-gradient(circle, #fff 0 1px, #c9f0ff 1.5px, transparent 3px) 22px 70px / 52px 40px,
    radial-gradient(circle, #b9a8ff 0 1px, transparent 2px) 6px 32px / 40px 46px,
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 45%, rgba(220, 240, 255, .25) 52%, transparent 60%) -220px 0 / 200% 100% no-repeat;
  animation: lt-twinkle 1.4s steps(2) infinite reverse, lt-sweep 2.6s steps(14) infinite;
}
@keyframes lt-twinkle { 50% { opacity: .35; } }
@keyframes lt-sweep { 0%, 35% { background-position: 22px 70px, 6px 32px, -220px 0; } 100% { background-position: 22px 70px, 6px 32px, 220px 0; } }
@keyframes holo-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.lt-head { display: flex; align-items: center; gap: 6px; padding: 4px 7px; background: linear-gradient(110deg, #ff8fd0, #ffd28f, #f7ff8f, #8fffc4, #8fd2ff, #b58fff, #ff8fd0) 0 0 / 200% 100%; border-bottom: 3px solid var(--ink); animation: holo-shift 4s linear infinite; }
.lt-head b { font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px 0 0 var(--ink); }
.lt-star { display: grid; place-items: center; width: 18px; height: 18px; font-size: 11px; color: #fff; text-shadow: 1px 1px 0 var(--ink); background: #6f63c4; border: 2px solid var(--ink); animation: lt-shine 1.2s steps(2) infinite; }
@keyframes lt-shine { 50% { background: #3fa9c9; } }
.lt-champ { display: flex; align-items: center; gap: 7px; padding: 5px 7px 1px; font-family: var(--pixel); font-size: 7px; color: #5a4fa8; }
.lt-champ .sprite { width: 26px; height: 26px; padding: 1px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid #8f86c8; filter: drop-shadow(0 0 3px #a8e6ff); animation: lt-glow 1.4s steps(2) infinite; }
@keyframes lt-glow { 50% { filter: drop-shadow(0 0 6px #ffc8f0); } }
.lt-row { display: flex; align-items: flex-start; gap: 5px; padding: 3px 7px; font-size: 12px; line-height: 1.3; }
.lt-row > span { flex-shrink: 0; width: 16px; text-align: center; }
.lt-row.same { margin: 2px 6px; padding: 4px 6px; font-weight: 700; background: rgba(255, 255, 255, .8); border: 2px dashed #a99ce0; }
.lt-foot { margin-top: 3px; padding: 4px 7px 5px; font-family: var(--pixel); font-size: 6px; line-height: 1.5; color: #4a3f99; background: rgba(240, 236, 255, .9); border-top: 2px solid #a99ce0; }
/* a collection card's bubble: this tier -> the next one (tierTipAttrs in js/shop.js); colored like the tier it leads to */
.nt { --nt: var(--gold); --nt-dark: #b4801f; width: 250px; white-space: normal; border: 3px solid var(--nt-dark); box-shadow: inset 0 0 0 2px var(--nt); }
.nt.t2 { --nt: #d6dde8; --nt-dark: #7d8aa0; }
.nt.t3 { --nt: #f6c94a; --nt-dark: #b4801f; }
.nt.t4 { --nt: #c792ff; --nt-dark: #7a4ae0; }
.nt.t5 { --nt: #8ff0ff; --nt-dark: #2aa8c0; }
.nt-head { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: linear-gradient(var(--nt), var(--nt-dark)); border-bottom: 3px solid var(--ink); }
.nt-head b { flex: 1; font-family: var(--pixel); font-size: 9px; font-weight: normal; color: #fffbe8; text-shadow: 1px 1px 0 var(--ink), -1px 0 0 var(--ink); }
.nt-arrow { display: grid; place-items: center; width: 22px; height: 22px; font-size: 13px; color: #fffbe8; text-shadow: 1px 1px 0 var(--ink); background: var(--nt-dark); border: 2px solid var(--ink); animation: nt-hop 1s steps(2) infinite; }
@keyframes nt-hop { 50% { transform: translateY(-2px); } }
.nt-tiers { display: flex; align-items: center; gap: 3px; }
.nt-tiers i { font-style: normal; font-size: 10px; color: #fffbe8; text-shadow: 1px 1px 0 var(--ink); }
.nt-champ { display: flex; align-items: center; gap: 8px; padding: 7px 9px 3px; font-family: var(--pixel); font-size: 8px; }
.nt-champ .sprite { width: 30px; height: 30px; padding: 1px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--nt-dark); }
.nt-stats { display: flex; flex-direction: column; gap: 3px; margin: 4px 8px; }
.nt-stat { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 13px; background: rgba(255, 255, 255, .35); border: 2px solid var(--parch-3); }
.nt-stat.up { background: #e9f8dc; border-color: #8fd27a; }
.nt-ico { display: grid; place-items: center; width: 18px; flex-shrink: 0; }
.nt-ico .ico { width: 16px; height: 16px; }
.nt-label { flex: 1; font-weight: 700; }
.nt-val { font-family: var(--pixel); font-size: 8px; color: var(--ink-soft); }
.nt-val i { font-style: normal; }
.nt-val b { color: var(--ink); font-weight: normal; }
.nt-stat em { font-style: normal; font-family: var(--pixel); font-size: 7px; color: #fff; background: #3f9e3a; border: 2px solid var(--ink); padding: 1px 3px; }
.nt-stat.skill .nt-label { font-size: 12px; color: #2f7d3b; }
.nt-progress { margin: 6px 8px 2px; }
.nt-bar { position: relative; height: 16px; background: var(--wood-1); border: 2px solid var(--ink); }
.nt-bar i { display: block; height: 100%; background: linear-gradient(var(--nt), var(--nt-dark)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.nt-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 7px; color: #fffbe8; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink); }
.nt-progress small { display: block; margin-top: 3px; font-size: 12px; text-align: center; color: var(--ink-soft); }
.nt-foot { margin-top: 5px; padding: 5px 9px 6px; font-family: var(--pixel); font-size: 7px; line-height: 1.5; color: var(--ink-soft); background: rgba(255, 255, 255, .4); border-top: 2px solid var(--parch-3); }
.bt { padding: 7px 9px; border-left: 5px solid #4caf50; }
.bt.bad { border-left-color: var(--red); }
.bt.info { border-left-color: var(--ink-soft); }
.bt-head { display: flex; align-items: center; gap: 7px; }
.bt-ico { display: grid; place-items: center; width: 26px; height: 26px; font-size: 15px; background: #fff6dc; border: 2px solid var(--ink); }
.bt-head b { font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.4; }
.bt-desc { margin-top: 5px; font-size: 13px; line-height: 1.35; }
.bt-from { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-top: 5px; border-top: 2px dashed var(--parch-3); }
.bt-from small { font-family: var(--pixel); font-size: 6px; color: var(--ink-soft); text-transform: uppercase; }
.bt-src { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.bt-src.p0 { color: var(--blue-dark); }
.bt-src.p1 { color: var(--red-dark); }
.bt-src .sprite, .bt-src .fac-ico { width: 20px; height: 20px; }
.bt-emoji { width: 20px; text-align: center; }
.buff-ico { cursor: help; }

/* ---------- Card rarities and the legendary look ---------- */
.rarity-gem { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; transform: rotate(45deg); border: 2px solid var(--ink); vertical-align: middle; }
.rarity-gem.r-normal { background: #b8b4a6; }
.rarity-gem.r-rare { background: #4f8cff; box-shadow: inset 2px 2px 0 #b9d2ff; }
.rarity-gem.r-legendary { background: #f2a71e; box-shadow: inset 2px 2px 0 #ffe9a6, 0 0 6px #ffbf3c; }
.rarity-tag { display: inline-block; padding: 0 4px; font-family: var(--pixel); font-size: 6px; line-height: 1.7; color: #fff; border: 2px solid var(--ink); vertical-align: 1px; }
.rarity-tag.r-legendary { background: linear-gradient(110deg, #ff8fd0, #ffd28f, #f7ff8f, #8fffc4, #8fd2ff, #b58fff, #ff8fd0); color: #fff; text-shadow: 1px 1px 0 var(--ink); } /* a champion card's ✦ Holo card tag */
.shop-odds { margin: -4px 0 10px; font-size: 13px; color: var(--ink-soft); }
.odds-pill { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; font-weight: 700; color: #fff; border: 2px solid var(--ink); }
.odds-pill.r-normal { background: #8a8478; }
.odds-pill.r-rare { background: #3f74e0; }
.odds-pill.r-legendary { background: #d4881a; }
/* the chest's cards */
.loot-card .rarity-gem { position: absolute; top: 6px; right: 6px; }
.loot-card.r-rare { border-color: #3f74e0; box-shadow: 0 0 0 3px #8fb6ff; }
.loot-card.r-legendary { border-color: #b4701a; box-shadow: 0 0 0 3px #f2c14e, 0 0 24px 6px rgba(255, 190, 60, .7); animation-name: loot-in, gold-pulse; animation-duration: .5s, 1s; animation-timing-function: steps(5), steps(2); animation-iteration-count: 1, infinite; }
.loot-rarity { font-family: var(--pixel); font-size: 6px; padding: 1px 4px; color: #fff; border: 2px solid var(--ink); }
.loot-rarity.r-normal { background: #8a8478; }
.loot-rarity.r-rare { background: #3f74e0; }
.loot-rarity.r-legendary { background: linear-gradient(#f6c94a, #d4881a); }
.loot-legend { font-family: var(--pixel); font-size: 7px; line-height: 1.5; color: #6f63c4; text-align: center; animation: blink .5s steps(1) 6; }
@keyframes gold-pulse { 50% { box-shadow: 0 0 0 3px #ffe9a6, 0 0 32px 10px rgba(255, 205, 90, .9); } }
@keyframes legend-pulse { 50% { box-shadow: 0 0 0 3px #ffe0f6, 0 0 34px 12px rgba(200, 170, 255, .9); } }
/* Holo cards, everywhere (shop collection, draft tiles, chest cards, rosters, the profile's champions, the champion
   card): a pearly foil whose rainbow shifts slowly, glints twinkling, and a shine sweeping across now and then.
   Only a look (Profile.isLegendary: a Holo card of that champion was found); the glints sit behind the content. */
.coll-card.legend, .champ-tile.legend, .loot-card.holo, .class-card.legend, .unit-row.legend, .mastery-card.legend, .ccard.legend {
  position: relative; isolation: isolate;
  background: linear-gradient(125deg, #f4f0ff 0%, #ffd8f1 16%, #fff3c8 32%, #d2fff0 48%, #d3e9ff 64%, #e8d6ff 80%, #ffd8f1 100%) 0 0 / 300% 300% !important;
  border-color: #7f74c4 !important;
  animation: holo-shift 7s linear infinite;
}
.loot-card.holo { box-shadow: 0 0 0 3px #d9d2ff, 0 0 26px 8px rgba(170, 200, 255, .75); animation-name: loot-in, legend-pulse, holo-shift; animation-duration: .5s, 1s, 7s; animation-timing-function: steps(5), steps(2), linear; animation-iteration-count: 1, infinite, infinite; }
.coll-card.legend::before, .champ-tile.legend::before, .loot-card.holo::before, .class-card.legend::before, .unit-row.legend::before, .mastery-card.legend::before, .ccard.legend::before,
.coll-card.legend::after, .champ-tile.legend::after, .loot-card.holo::after, .class-card.legend::after, .unit-row.legend::after, .mastery-card.legend::after, .ccard.legend::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.coll-card.legend::before, .champ-tile.legend::before, .loot-card.holo::before, .class-card.legend::before, .unit-row.legend::before, .mastery-card.legend::before, .ccard.legend::before {
  background:
    radial-gradient(circle, #fff 0 1px, transparent 2px) 7px 9px / 23px 19px,
    radial-gradient(circle, #f2fbff 0 1.5px, rgba(170, 225, 255, .6) 2.5px, transparent 3.5px) 16px 4px / 37px 29px,
    radial-gradient(circle, #ffe2f6 0 1px, transparent 2px) 2px 15px / 17px 26px;
  animation: legend-twinkle 1.3s steps(2) infinite;
}
.coll-card.legend::after, .champ-tile.legend::after, .loot-card.holo::after, .class-card.legend::after, .unit-row.legend::after, .mastery-card.legend::after, .ccard.legend::after {
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 12px 21px / 31px 27px,
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 47%, rgba(215, 240, 255, .3) 53%, transparent 62%) -200% 0 / 200% 100% no-repeat;
  animation: legend-twinkle 1.3s steps(2) infinite reverse, legend-sweep 3.2s steps(16) infinite;
}
@keyframes legend-twinkle { 50% { opacity: .35; } }
@keyframes legend-sweep { 0%, 40% { background-position: 12px 21px, -200% 0; } 100% { background-position: 12px 21px, 200% 0; } }
.unit-row.legend .cc-stats, .class-card.legend .cc-stats, .mastery-card.legend small, .coll-card.legend .coll-sub { color: #3f3680; }

/* the Holo mark (✦), and holo champions on the board: a rainbow outline */
.legend-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 12px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 var(--ink); background: linear-gradient(110deg, #ff8fd0, #ffd28f, #f7ff8f, #8fffc4, #8fd2ff, #b58fff, #ff8fd0) 0 0 / 200% 100%; border: 2px solid var(--ink); animation: holo-shift 3s linear infinite; }
.coll-card .legend-mark { position: absolute; top: 4px; right: 4px; }
.coll-card.legend, .champ-tile.legend { border-color: #7f74c4; box-shadow: inset 0 0 0 2px #f2efff, 0 0 10px rgba(170, 200, 255, .6); }
.champ-tile .ct-gem { position: absolute; right: 4px; bottom: 6px; }
.cell.legend .u-icon .sprite { filter: drop-shadow(1px 0 0 #8fd2ff) drop-shadow(-1px 0 0 #ff8fd0) drop-shadow(0 1px 0 #8fffc4) drop-shadow(0 -1px 0 #f7ff8f) drop-shadow(0 0 5px rgba(190, 170, 255, .9)); animation: holo-hue 4s linear infinite; }
@keyframes holo-hue { 50% { filter: drop-shadow(1px 0 0 #ff8fd0) drop-shadow(-1px 0 0 #8fd2ff) drop-shadow(0 1px 0 #f7ff8f) drop-shadow(0 -1px 0 #8fffc4) drop-shadow(0 0 5px rgba(255, 170, 230, .9)); } }
.cell.legend .u-name { color: #d6ecff; }
.cell.legend .u-name::before { content: '✦ '; color: #ffb8ec; }

/* ---------- Main menu ---------- */
.menu-card.home { max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: center; text-align: center; }
.menu-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.menu-hero .logo { font-size: clamp(16px, 2vw, 22px); margin: 12px 0 6px; white-space: nowrap; }
.menu-hero .tagline { margin-bottom: 14px; }
.player-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 320px; }
.menu-panel { min-width: 0; }
/* the main menu box's top right corner: coins and gems stacked, then the profile button (your mascot, name, rank, level) */
.menu-card.home > .menu-hud { grid-column: 1 / -1; justify-self: end; margin: -8px -6px -10px 0; }
.menu-hud { display: flex; align-items: stretch; gap: 8px; }
.menu-hud .purse { flex-direction: column; justify-content: center; gap: 4px; }
/* coins and gems the same size, side by side in the shop and stacked in the main menu's corner */
.menu-hud .coin-pill, .menu-hud .gem-pill, .shop-head .coin-pill, .shop-head .gem-pill {
  box-sizing: border-box; justify-content: space-between; gap: 10px; min-width: 112px; height: 32px; padding: 0 10px 0 7px; font-size: 11px; }
.menu-hud .coin-pill .coin-icon, .shop-head .coin-pill .coin-icon, .menu-hud .gem-pill .ico, .shop-head .gem-pill .ico { width: 16px; height: 16px; vertical-align: 0; }
.profile-chip { display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 300px; padding: 6px 12px 6px 6px; text-align: left; color: var(--parch);
  background: linear-gradient(var(--wood-2), var(--wood-1)); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15), inset -2px -2px 0 rgba(0, 0, 0, .3), 4px 4px 0 rgba(20, 10, 4, .45); transition: transform .08s steps(2); }
.profile-chip:hover { transform: translateY(-2px); filter: brightness(1.1); }
.profile-chip:active { transform: translateY(2px); }
.pchip-mascot { flex-shrink: 0; width: 48px; height: 48px; padding: 3px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.pchip-mascot .ll-img { display: block; width: 100%; height: 100%; animation: ll-bob 1.2s steps(2) infinite; }
.pchip-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pchip-name { font-family: var(--pixel); font-size: 10px; font-weight: normal; color: #fff3c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip-rank { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--parch-3); white-space: nowrap; }
.pchip-rank .medal { width: 18px; height: 18px; }
.pchip-rank .rank-name { font-family: var(--pixel); font-size: 7px; color: var(--gold); }
/* the account button next to the profile button: "Log in", or a cloud with the sync state */
.menu-hud { flex-wrap: wrap; justify-content: flex-end; }
.acct-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; padding: 4px 8px; color: var(--parch);
  background: linear-gradient(var(--wood-2), var(--wood-1)); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15), inset -2px -2px 0 rgba(0, 0, 0, .3), 4px 4px 0 rgba(20, 10, 4, .45); }
.acct-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.acct-btn[hidden] { display: none; }
.acct-cloud { position: relative; font-size: 20px; line-height: 1; filter: drop-shadow(1px 1px 0 var(--ink)); }
.acct-btn b { font-family: var(--pixel); font-size: 7px; font-weight: normal; color: var(--gold); white-space: nowrap; }
.acct-dot { width: 10px; height: 10px; border: 2px solid var(--ink); background: #8a8478; }
.acct-btn.st-synced .acct-dot { background: #5fcf6e; }
.acct-btn.st-syncing .acct-dot { background: var(--gold); animation: acct-blink .5s steps(2) infinite; }
@keyframes acct-blink { 50% { opacity: .3; } }
.acct-btn.st-offline .acct-dot, .acct-btn.st-error .acct-dot { background: #e0453c; }
/* the account window */
.modal.account { max-width: 460px; }
.account-body { display: flex; flex-direction: column; gap: 10px; }
.acct-lead { margin: 0 0 4px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.acct-field { display: flex; flex-direction: column; gap: 4px; }
.acct-field span { font-family: var(--pixel); font-size: 8px; color: var(--ink-soft); }
.acct-field input { padding: 9px 10px; font: inherit; font-size: 15px; color: var(--ink); background: #fffbea; border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .08); }
.acct-field input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.acct-hint { margin: -4px 0 0; font-size: 12px; color: var(--ink-soft); }
.acct-main { width: 100%; margin-top: 4px; }
.acct-link { align-self: center; padding: 2px; font: inherit; font-size: 14px; color: #2a55b8; text-decoration: underline; background: none; border: 0; box-shadow: none; }
.acct-switch { margin: 2px 0 0; font-size: 14px; text-align: center; color: var(--ink-soft); }
.acct-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.acct-or::before, .acct-or::after { content: ''; flex: 1; height: 2px; background: var(--parch-3); }
.acct-google { width: 100%; justify-content: center; background: #fff; }
.acct-google b { font-family: Arial, sans-serif; font-size: 16px; color: #4285f4; }
.acct-msg { margin: 0; padding: 8px 10px; font-size: 14px; line-height: 1.35; border: 2px solid; }
.acct-msg.ok { color: #1f5a2a; background: #d6efc8; border-color: #5fcf6e; }
.acct-msg.bad { color: #7a1a12; background: #f7c9c0; border-color: #e0453c; }
.acct-who { display: flex; align-items: center; gap: 12px; }
.acct-avatar { flex-shrink: 0; width: 56px; height: 56px; padding: 4px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.acct-avatar .ll-img { display: block; width: 100%; height: 100%; }
.acct-who > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-who b { font-family: var(--pixel); font-size: 11px; font-weight: normal; }
.acct-who small { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.acct-status { font-size: 13px; font-weight: 700; }
.acct-status.st-synced { color: #2f7d3b; }
.acct-status.st-syncing { color: #b4801f; }
.acct-status.st-offline, .acct-status.st-error { color: #c0392b; }
.acct-row { display: flex; align-items: flex-end; gap: 8px; }
.acct-row .acct-field { flex: 1; }
.acct-btns { display: flex; gap: 8px; }
.acct-btns .btn { flex: 1; }
.acct-delete { align-self: center; margin-top: 4px; }
.acct-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-choice { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(255, 255, 255, .35); border: 3px solid var(--ink); }
.acct-choice.cloud { background: #e2eefc; }
.acct-choice > b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.acct-sum { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.acct-sum .coin-icon, .acct-sum .ico-gem { width: 14px; height: 14px; margin: 0; vertical-align: -2px; }
@media (max-width: 520px) { .acct-choices { grid-template-columns: 1fr; } }
/* right of the profile button: Settings and the Daily reward, icons only, one above the other */
.hud-icons { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.hud-ico { position: relative; display: grid; place-items: center; width: 36px; height: 32px; padding: 0; font-size: 18px; line-height: 1; color: var(--parch);
  background: linear-gradient(var(--wood-2), var(--wood-1)); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15), inset -2px -2px 0 rgba(0, 0, 0, .3), 3px 3px 0 rgba(20, 10, 4, .45); transition: transform .08s steps(2); }
.hud-ico:hover { transform: translateY(-2px); filter: brightness(1.15); }
.hud-ico:active { transform: translateY(2px); }
.hud-ico .daily-chest { width: 24px; height: 24px; filter: drop-shadow(1px 1px 0 rgba(20, 10, 4, .5)); }
.hud-ico .daily-badge { top: -8px; right: -8px; width: 17px; height: 17px; font-size: 8px; border-width: 2px; }
.daily-ico.ready { background: linear-gradient(#ffe48a, #f2b734); animation: hud-glow 1.6s steps(4) infinite; }
.daily-ico.ready .daily-badge { display: grid; }
.daily-ico.ready .daily-chest { animation: daily-shake 2.4s steps(2) infinite; }
@keyframes hud-glow { 50% { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), 3px 3px 0 rgba(20, 10, 4, .45), 0 0 12px 3px rgba(255, 211, 107, .75); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#menu-main .menu-row:has(> :only-child) { grid-template-columns: 1fr; } /* How to play alone on its row */
.pchip-info .xp-mini { width: 100%; border-color: var(--parch-3); background: #2a1c12; }
@media (max-width: 760px) {
  .menu-card.home > .menu-hud { justify-self: stretch; margin: -8px 0 0; }
  .menu-hud .coin-pill, .menu-hud .gem-pill { min-width: 92px; }
  .profile-chip { flex: 1; min-width: 0; }
}
#menu-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#menu-main > .btn, #menu-main > .menu-row, #menu-main > .menu-section, #menu-main > .mtile.wide { grid-column: 1 / -1; }
.menu-section { margin: 6px 0 -2px; font-family: var(--pixel); font-size: 8px; text-align: left; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; }
.menu-section:first-of-type { margin-top: 0; }
.mtile {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; text-align: left;
  color: var(--parch); background: linear-gradient(#a87a48, #8a5a34); border: 4px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .2), 0 4px 0 var(--wood-0);
  transition: transform .08s steps(2);
}
.mtile:hover { transform: translateY(-2px); filter: brightness(1.08); }
.mtile:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .25), 0 1px 0 var(--wood-0); }
.mtile.primary { color: var(--ink); background: linear-gradient(#ffd96b, #f2b734); }
.mtile.primary .mt-text small { color: #6b4a14; }
.mtile.shop .mt-ico .coin-icon { width: 22px; height: 22px; }
.mt-ico { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; font-size: 21px; line-height: 1; background: rgba(42, 28, 18, .35); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15); }
.mtile.primary .mt-ico { background: rgba(255, 255, 255, .45); }
.mt-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mt-text b { font-family: var(--pixel); font-size: 10px; font-weight: normal; line-height: 1.3; text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
.mtile.primary .mt-text b { text-shadow: none; }
.mt-text small { font-size: 12px; line-height: 1.3; color: var(--parch-3); }
#menu-tutorial .menu-bonus { flex-shrink: 0; }
#menu.levels .menu-hero { display: none; }
#menu.levels .menu-hud { display: none; } /* the profile box is on the main screen only, not the vs CPU / 2 players screens */
#menu.levels .menu-card.home { max-width: 470px; grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .menu-card.home { grid-template-columns: 1fr; gap: 14px; max-width: 470px; }
  .menu-hero .menu-grid { display: none; }
  .menu-hero .tagline { display: none; }
  #menu-main { grid-template-columns: 1fr; }
}

/* ---------- Daily reward ---------- */
.daily-btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 8px; text-align: left;
  color: var(--parch); background: linear-gradient(#a87a48, #8a5a34); border: 4px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .2), 0 4px 0 var(--wood-0);
  transition: transform .08s steps(2);
}
.daily-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.daily-btn:active { transform: translateY(3px); }
.daily-btn .mt-text small { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.daily-btn .coin-icon { width: 13px; height: 13px; }
.daily-chest { width: 40px; height: 40px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(20, 10, 4, .45)); }
.daily-badge { display: none; position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; place-items: center;
  font-family: var(--pixel); font-size: 11px; color: #fff; background: var(--red); border: 3px solid var(--ink); animation: daily-bounce .9s steps(3) infinite; }
.daily-btn.ready { color: var(--ink); background: linear-gradient(#ffe48a, #f2b734); animation: daily-glow 1.6s steps(4) infinite; }
.daily-btn.ready .mt-text small { color: #6b4a14; font-weight: 700; }
.daily-btn.ready .mt-text b { text-shadow: none; }
.daily-btn.ready .daily-badge { display: grid; }
.daily-btn.ready .daily-chest { animation: daily-shake 2.4s steps(2) infinite; }
@keyframes daily-bounce { 50% { transform: translateY(-4px); } }
@keyframes daily-glow { 50% { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -3px -3px 0 rgba(0, 0, 0, .15), 0 4px 0 var(--wood-0), 0 0 16px 4px rgba(255, 211, 107, .7); } }
@keyframes daily-shake { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-8deg); } 88% { transform: rotate(8deg); } 92% { transform: rotate(-5deg); } }

.modal.daily { max-width: 640px; text-align: center; }
/* the shop keeps one size on both tabs: the head, the tabs and Back stay put, the tab's content scrolls */
.modal.shop { height: min(880px, calc(100vh - 32px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal.shop > .shop-head, .modal.shop > .shop-tabs, .modal.shop > .modal-back { flex-shrink: 0; }
.shop-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -10px; padding: 6px 10px 4px; } /* room for the badges that stick out of the tiles */
.daily-streak { display: inline-flex; align-items: center; gap: 8px; margin: 2px auto 12px; padding: 6px 14px; background: var(--wood-1); border: 3px solid var(--ink); color: var(--gold); }
.daily-streak b { font-family: var(--pixel); font-size: 10px; font-weight: normal; }
.ds-fire { font-size: 18px; animation: daily-bounce .8s steps(2) infinite; }
.ds-fire.off { filter: grayscale(1); opacity: .5; animation: none; }
.daily-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dr-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px;
  background: var(--parch-2); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .2); }
.dr-day { font-family: var(--pixel); font-size: 7px; color: var(--ink-soft); }
.dr-chest { width: 44px; height: 44px; image-rendering: pixelated; }
.dr-coins { display: inline-flex; align-items: center; gap: 3px; font-family: var(--pixel); font-size: 9px; }
.dr-coins .coin-icon { width: 13px; height: 13px; }
.dr-card.taken { background: #e3f3d6; }
.dr-card.taken .dr-chest, .dr-card.taken .dr-coins { opacity: .55; }
.dr-check { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg); display: grid; place-items: center; width: 30px; height: 30px;
  font-size: 18px; color: #fff; background: var(--green); border: 3px solid var(--ink); }
.dr-card.later { opacity: .8; }
.dr-card.today { background: linear-gradient(#fff3c4, #ffd96b); border-color: #b4801f; box-shadow: 0 0 0 3px var(--ink), 0 0 18px 4px rgba(255, 211, 107, .8); animation: daily-bounce 1s steps(2) infinite; }
.dr-card.today .dr-day { color: var(--ink); }
.dr-card.best { border-color: #4ea8dc; }
.dr-card.best .dr-day { color: #2a6ea8; }
.dr-card.best::after { content: 'MAX'; position: absolute; top: -10px; right: -8px; padding: 2px 4px; font-family: var(--pixel); font-size: 6px; color: #fff; background: #4ea8dc; border: 2px solid var(--ink); transform: rotate(8deg); }
.dr-card.pop { animation: dr-pop .5s steps(4); }
@keyframes dr-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dr-fly { position: absolute; top: -6px; left: 50%; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; pointer-events: none;
  font-family: var(--pixel); font-size: 11px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink); animation: dr-fly 1.4s ease-out forwards; }
.dr-fly .coin-icon { width: 14px; height: 14px; }
@keyframes dr-fly { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -46px); opacity: 0; } }
.daily-note { margin: 14px 0 0; font-size: 15px; }
.daily-time { display: inline-block; min-width: 92px; font-variant-numeric: tabular-nums; }
.daily-note .coin-icon { width: 14px; height: 14px; vertical-align: -2px; }
.daily-claim { min-width: 260px; margin-top: 14px; font-size: 12px; }
.daily-claim .coin-icon { width: 16px; height: 16px; vertical-align: -3px; }
.daily-rule { margin: 12px auto 0; max-width: 520px; font-size: 13px; line-height: 1.4; }
.modal.daily .modal-back { margin-top: 12px; }
@media (max-width: 700px) {
  .daily-track { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .dr-chest { width: 32px; height: 32px; }
  .dr-day { font-size: 6px; }
  .dr-coins { font-size: 8px; }
  .daily-claim { min-width: 0; width: 100%; }
}

/* ---------- Gift codes ---------- */
.gift-row { align-items: center; }
.gift-form { display: flex; gap: 6px; flex-shrink: 0; }
.gift-input { width: 150px; padding: 6px 8px; font-family: var(--pixel); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); background: #fff8e6; border: 3px solid var(--ink); }
.gift-input:focus { outline: 3px solid var(--gold); }
.gift-result { min-height: 18px; margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.gift-result.ok { color: #2f7d3b; }
.gift-result.bad { color: var(--red-dark); }

/* ---------- Profile history: match cards ---------- */
.mh-row { position: relative; background: linear-gradient(90deg, rgba(255, 255, 255, .35), transparent 40%), var(--parch-2); box-shadow: 3px 3px 0 rgba(20, 10, 4, .2); transition: transform .08s steps(2); }
.mh-row:hover { transform: translateX(3px); }
.mh-row.win { background: linear-gradient(90deg, rgba(95, 207, 110, .28), transparent 45%), var(--parch-2); }
.mh-row.loss { background: linear-gradient(90deg, rgba(224, 69, 60, .22), transparent 45%), var(--parch-2); }
.mh-result b { font-size: 11px; }
.mh-vs { padding: 2px 5px; color: var(--parch); background: var(--wood-1); border: 2px solid var(--ink); }
.profile-tabs .chip { padding: 8px 12px; }
.stat-tile { box-shadow: inset 2px 2px 0 #fff6dc, 3px 3px 0 rgba(20, 10, 4, .2); }
.stat-tile b { font-size: 14px; color: var(--wood-1); }

/* ---------- Online lobby ---------- */
.modal.online h2 { display: flex; align-items: center; gap: 10px; }
.online-box { position: relative; padding: 14px 14px 16px; background: linear-gradient(rgba(255, 255, 255, .35), transparent 60%), var(--parch-2); box-shadow: inset 2px 2px 0 #fff6dc, 4px 4px 0 rgba(20, 10, 4, .25); }
.online-box .settings-h { display: flex; align-items: center; gap: 8px; }
.online-box .settings-h::before { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 14px; background: var(--gold); border: 3px solid var(--ink); }
.online-cols .online-box:first-child .settings-h::before { content: '🏰'; }
.online-cols .online-box:last-child .settings-h::before { content: '🗝'; }
.online-code-box { background: repeating-linear-gradient(45deg, #fff8e6 0 8px, #fbeec8 8px 16px); }
.online-code { padding: 2px 8px; background: #fff; border: 3px solid var(--ink); }

/* ---------- The match background: the floating island (js/village.js) ---------- */
.isle-fall { position: absolute; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(180deg, #e8f8ff 0 6px, #8fd8ff 6px 14px, #5ab8f0 14px 22px, #c8f0ff 22px 26px);
  background-size: 100% 26px; animation: fall-flow var(--d, .7s) linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
  box-shadow: 0 0 10px rgba(127, 240, 255, .5); }
.isle-fall.small { opacity: .8; }
@keyframes fall-flow { to { background-position: 0 26px; } }
.rune-ring { position: absolute; pointer-events: none; box-shadow: 0 0 0 3px rgba(127, 240, 255, .25), 0 0 18px 4px rgba(127, 240, 255, .35); animation: rune-pulse 3s ease-in-out infinite; }
@keyframes rune-pulse { 50% { box-shadow: 0 0 0 3px rgba(185, 140, 255, .35), 0 0 26px 8px rgba(185, 140, 255, .45); } }
.crystal-glow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(185, 140, 255, .55), transparent 65%); animation: glow-pulse 2.2s ease-in-out infinite; animation-delay: var(--delay); }
.crystal-glow.cyan { background: radial-gradient(circle, rgba(127, 240, 255, .55), transparent 65%); }
.lantern-glow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 211, 107, .6), transparent 65%); animation: glow-pulse 1.4s steps(3) infinite; }
@keyframes glow-pulse { 50% { opacity: .45; transform: scale(.85); } }
.legend-pet { position: absolute; pointer-events: none; animation: pet-hop 2.4s ease-in-out infinite; animation-delay: var(--delay); filter: drop-shadow(0 4px 0 rgba(20, 40, 10, .35)); }
.legend-pet img, .sky-whale img, .sky-bird img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.legend-pet img.b { opacity: 0; animation: pet-squash 2.4s steps(1) infinite; animation-delay: var(--delay); }
@keyframes pet-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-14px); } 80% { transform: translateY(-18px) rotate(-6deg); } 90% { transform: translateY(-6px); } }
@keyframes pet-squash { 0%, 55% { opacity: 0; } 56%, 66% { opacity: 1; } 67%, 92% { opacity: 0; } 93%, 99% { opacity: 1; } }
.float-isle { position: absolute; pointer-events: none; animation: isle-bob var(--bob, 4s) ease-in-out infinite; animation-delay: var(--delay); filter: drop-shadow(0 10px 12px rgba(30, 10, 60, .45)); }
.float-isle-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.float-isle .isle-fall { z-index: -1; }
@keyframes isle-bob { 50% { transform: translateY(-8px); } }
.sky-whale, .sky-bird { position: absolute; pointer-events: none; animation: sky-cross var(--dur, 60s) linear infinite; animation-delay: var(--delay); }
.sky-whale img.b, .sky-bird img.b { opacity: 0; animation: flap 1.2s steps(1) infinite; }
.sky-bird img.b { animation-duration: .4s; }
@keyframes sky-cross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 120px)); } }
@keyframes flap { 50% { opacity: 1; } }
.firefly { position: absolute; width: 4px !important; height: 4px !important; border-radius: 50%; pointer-events: none; background: var(--c); box-shadow: 0 0 6px 2px var(--c); animation: firefly var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes firefly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* every tooltip in the game (js/tooltip.js): a small parchment note instead of the browser's grey box */
.tip {
  position: fixed; z-index: 300; max-width: min(280px, calc(100vw - 16px)); padding: 6px 9px;
  pointer-events: none; white-space: pre-line; text-align: left;
  font-size: 13px; line-height: 1.35; color: var(--ink);
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3), 4px 4px 0 rgba(20, 10, 4, .5);
  animation: tip-in .12s steps(3);
}
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
/* the card explaining a champion's mastery on the game over screen */
.mg-bubble { position: fixed; z-index: 60; width: min(300px, calc(100vw - 16px)); padding: 10px 12px; pointer-events: none; text-align: left; }
.mgb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mgb-icon { flex-shrink: 0; width: 44px; height: 44px; padding: 3px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.mgb-icon .sprite { width: 100%; height: 100%; }
.mgb-name { font-family: var(--pixel); font-size: 10px; line-height: 1.6; }
.mgb-sub { font-size: 13px; color: var(--ink-soft); }
.mgb-parts { display: flex; flex-direction: column; margin-bottom: 8px; border-top: 2px dashed var(--parch-3); }
.mgb-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 2px; font-size: 13px; border-bottom: 2px dashed var(--parch-3); }
.mgb-row b { font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #2f7d3b; align-self: center; }
.mgb-row.mvp b { color: var(--gold-dark, #b4801f); }
.mgb-row.mult b, .mgb-row.note b { color: var(--red-dark); }
.mgb-row.sub, .mgb-row.total { border-bottom-style: solid; border-color: var(--ink); }
.mgb-row.sub span, .mgb-row.total span { font-family: var(--pixel); font-size: 8px; align-self: center; }
.mgb-row.sub b { color: var(--ink); }
.mgb-row.total { border-bottom: 0; background: #fbe7a6; }
.mgb-row.total b { font-size: 10px; }
.mgb-up { margin-top: 6px; font-family: var(--pixel); font-size: 8px; line-height: 1.5; color: #2f7d3b; }
.mg.mvp { border-color: var(--gold-dark, #b4801f); box-shadow: 0 0 0 2px var(--gold); }
.mvp-tag { position: absolute; top: -9px; right: -6px; padding: 1px 3px; font-family: var(--pixel); font-size: 6px; font-weight: normal; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
.mg-help { font-size: 12px; margin-top: 0; }
.mastery-badge {
  display: inline-block; padding: 2px 4px; vertical-align: middle;
  font-family: var(--pixel); font-size: 7px; line-height: 1.2; font-weight: normal; font-style: normal;
  color: #fff; text-shadow: 1px 1px 0 var(--ink); background: #b07a45; border: 2px solid var(--ink);
}
.mastery-badge.m3, .mastery-badge.m4 { background: #9aa8b4; }
.mastery-badge.m5, .mastery-badge.m6 { background: var(--gold-dark, #d49b22); }
.mastery-badge.max { background: #8b4fc4; }
.profile-level { display: flex; flex-direction: column; align-items: stretch; gap: 5px; max-width: 520px; }
.pl-row { display: flex; align-items: center; gap: 6px; }
.medal.inline { width: 28px; height: 28px; filter: none; }
.medal { width: 32px; height: 32px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .3)); }
.medal.big { width: 64px; height: 64px; }
.medal.small { width: 24px; height: 24px; }
.rank-name { font-family: var(--pixel); font-size: 9px; color: var(--ink); white-space: nowrap; }
.level-pill .rank-name { color: var(--parch); font-size: 8px; }
.rank-up { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #fbe7a6; border: 3px solid var(--gold-dark, #b4801f); font-family: var(--pixel); font-size: 9px; line-height: 1.5; }
.rank-up .medal { animation: rank-pop .6s steps(6) 1; }
@keyframes rank-pop { from { transform: scale(.2) rotate(-20deg); } to { transform: none; } }
.profile-level .xp-bar { flex: 1; min-width: 90px; margin-left: 4px; }
.profile-tabs { align-items: center; }
.tab-sep { width: 3px; height: 26px; margin: 0 6px; background: var(--ink); opacity: .45; }
.mh-unit.mvp { border-color: var(--gold-dark, #b4801f); box-shadow: 0 0 0 2px var(--gold); }
.mh-unit .mvp-tag { top: -10px; right: -8px; z-index: 1; }
.profile-id .profile-level small { font-family: var(--pixel); font-size: 7px; line-height: 1.5; color: var(--ink-soft); }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mastery-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 5px 10px; align-items: center; padding: 8px; background: var(--parch-2); border: 3px solid var(--ink); }
.mastery-card .mc-icon { grid-row: span 3; position: relative; }
.mastery-card .mc-icon .sprite { width: 48px; height: 48px; }
.mastery-card .mc-tier { position: absolute; left: -6px; top: -6px; }
.mastery-card .mc-games { font-size: 12px; color: var(--ink-soft); }
.mastery-card .mc-name { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; font-size: 13px; }
.mastery-card .mc-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.tier-badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 18px;
  padding: 0 3px;
  font-family: var(--pixel); font-size: 7px; line-height: 1; font-weight: normal;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .22), inset 2px 2px 0 rgba(255, 255, 255, .45);
  vertical-align: middle;
  text-shadow: none;
  flex-shrink: 0;
}
.tier-badge.t1 { background: #d39a62; }                  /* bronze */
.tier-badge.t2 { background: #d6dde8; }                  /* silver */
.tier-badge.t3 { background: var(--gold); }              /* gold */
.tier-badge.t4 { background: #c792ff; }                  /* amethyst */
.tier-badge.t5 { background: #8ff0ff; animation: tier-shine 1s steps(1) infinite; } /* diamond */
@keyframes tier-shine {
  0%, 100% { box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .22), inset 2px 2px 0 #fff, 0 0 0 0 #fff; }
  50% { box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .22), inset 2px 2px 0 #fff, 0 0 6px 2px #bff6ff; }
}
.tier-badge.corner { position: absolute; top: -10px; left: -10px; z-index: 1; }
.u-left { display: flex; align-items: flex-start; gap: 2px; }
.u-top .tier-badge { min-width: 18px; height: 17px; font-size: 6px; }
.tier-line { color: var(--ink-soft); }
.sprite.locked { filter: brightness(0) opacity(.45); }

/* ---------- Shop ---------- */
.shop { max-width: 980px; }
.shop-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; padding-right: 34px; }
.shop-head h2 { margin: 0; }
.shop-sub { color: var(--ink-soft); margin: 0 0 16px; line-height: 1.4; }
.shop-owned { color: var(--ink-soft); font-size: 10px; margin-left: 6px; }
.shop-chests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.chest-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  text-align: center;
  background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c;
  border: 4px solid var(--ink);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .18), 4px 4px 0 rgba(20, 10, 4, .45);
}
.chest-card.royal { box-shadow: inset 0 0 0 3px var(--gold), 4px 4px 0 rgba(20, 10, 4, .45); }
.chest-art { width: 96px; height: 96px; filter: drop-shadow(4px 4px 0 rgba(20, 30, 10, .45)); animation: bob 1.4s steps(1, end) infinite; }
.chest-card.iron .chest-art { animation-delay: -.45s; }
.chest-card.royal .chest-art { animation-delay: -.9s; }
.chest-name { font-family: var(--pixel); font-size: 10px; line-height: 1.4; color: #fff6dc; text-shadow: 2px 2px 0 var(--wood-0); }
.chest-text { font-size: 14px; color: #f3ecd8; text-shadow: 1px 1px 0 var(--wood-0); min-height: 34px; }
.chest-card .btn { display: inline-flex; align-items: center; gap: 8px; }
.chest-buy { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chest-buy .btn { min-width: 84px; justify-content: center; }
.chest-buy .ico-gem, #chest-again .ico-gem { width: 16px; height: 16px; margin: 0; vertical-align: -3px; }

.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-bottom: 16px; }
.coll-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 8px;
  text-align: center;
  background: var(--parch-2);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc;
}
.coll-card .tier-badge { position: absolute; top: -9px; left: -8px; }
.coll-card.t5 { box-shadow: inset 0 0 0 2px #8ff0ff; }
.coll-icon { width: 56px; height: 56px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.coll-name { font-family: var(--pixel); font-size: 8px; line-height: 1.4; }
.coll-sub { font-size: 13px; color: var(--ink-soft); }
.coll-bar { position: relative; width: 100%; height: 14px; border: 2px solid var(--ink); background: var(--wood-1); }
.coll-bar i { display: block; height: 100%; background: var(--gold); box-shadow: inset 0 2px 0 #ffe9a6; }
.coll-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 6px; color: #fff; text-shadow: 1px 1px 0 #000; }
.coll-max { font-family: var(--pixel); font-size: 8px; color: #1d8fb0; line-height: 14px; }
.coll-card.locked { background: var(--parch-3); }
.coll-card.locked .coll-icon { background: var(--wood-2); }
.shop-foot { text-align: right; }

/* ---------- Chest opening ---------- */
.chest-overlay { z-index: 70; overflow-y: auto; background: rgba(12, 6, 2, .9); }
.chest-flash { position: fixed; inset: 0; background: #fff6d0; opacity: 0; pointer-events: none; }
.chest-overlay.burst .chest-flash { animation: chest-flash .6s steps(5) forwards; }
.chest-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 820px; margin: auto; }
.chest-title { font-family: var(--pixel); font-size: 15px; color: var(--gold); text-shadow: 3px 3px 0 var(--wood-0); text-align: center; }
.chest-glow { position: relative; width: 220px; height: 190px; display: grid; place-items: center; }
.chest-rays {
  position: absolute; inset: -70px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 215, 90, .5) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
  mask: radial-gradient(circle, #000 18%, transparent 68%);
  opacity: 0;
  transition: opacity .3s;
}
.chest-overlay.burst .chest-rays { opacity: 1; animation: rays-spin 9s linear infinite; }
.chest-overlay.royal.burst .chest-rays { background: repeating-conic-gradient(rgba(255, 215, 90, .6) 0 9deg, rgba(159, 230, 255, .35) 9deg 14deg, transparent 14deg 24deg); }
.chest-big { position: relative; width: 176px; height: 176px; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .5)); }
.chest-big.shaking { animation: chest-shake .45s steps(4) infinite; }
.chest-big.opened { animation: chest-pop .4s steps(4); }
.loot-spark {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  box-shadow: 0 0 6px #ffd23a;
  animation: loot-spark 1s steps(8) forwards;
  pointer-events: none;
}
.chest-hint { font-family: var(--pixel); font-size: 10px; color: #fff6dc; min-height: 14px; text-align: center; line-height: 1.5; }
.chest-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.loot-card {
  position: relative;
  width: 124px;
  padding: 14px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
  animation: loot-in .5s steps(5) backwards;
}
.loot-card.is-new { border-color: var(--gold-dark); box-shadow: 0 0 0 3px var(--gold), 0 0 22px 6px rgba(255, 210, 70, .65); }
.loot-card.is-up { box-shadow: 0 0 0 3px #8ff0ff, 0 0 22px 6px rgba(143, 240, 255, .55); }
.loot-card .tier-badge { position: absolute; top: -11px; left: -10px; }
.loot-icon { width: 72px; height: 72px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); display: grid; place-items: center; }
.coin-big .coin-icon { width: 48px; height: 48px; }
.loot-name { font-family: var(--pixel); font-size: 8px; line-height: 1.4; }
.loot-line { font-size: 13px; color: var(--ink-soft); min-height: 20px; line-height: 1.3; }
.loot-new { font-family: var(--pixel); font-size: 10px; color: var(--red); animation: blink .5s steps(1) infinite; }
.loot-up { font-family: var(--pixel); font-size: 7px; color: #1d7fa0; line-height: 1.6; }
.loot-arrow { font-weight: 700; font-size: 15px; color: #1d7fa0; }
.chest-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.chest-buttons .btn { display: inline-flex; align-items: center; gap: 8px; }
@keyframes chest-shake {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-5px, 0) rotate(-4deg); }
  50% { transform: translate(0, -4px) rotate(0); }
  75% { transform: translate(5px, 0) rotate(4deg); }
}
@keyframes chest-pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes chest-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes loot-spark {
  0% { transform: translate(-50%, -50%); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; }
}
@keyframes loot-in {
  0% { transform: translateY(40px) scale(.2); opacity: 0; }
  60% { transform: translateY(-8px) scale(1.08); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* Coins won at the end of a game */
.go-reward { margin: -8px 0 16px; }
.reward {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  padding: 8px 14px;
  font-family: var(--pixel); font-size: 13px;
  color: var(--gold);
  background: var(--wood-1);
  border: 3px solid var(--wood-0);
  animation: chest-pop .5s steps(5);
}
.reward .coin-icon { width: 24px; height: 24px; }
.reward-parts { font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.reward-parts b { color: var(--ink); }

/* ---------- Menu: difficulty, tutorial, settings ---------- */
#menu-tutorial { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.menu-bonus.done { color: #fff; background: var(--green); border-color: #2f7d3b; font-size: 11px; padding: 1px 6px; }
.menu-bonus { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 8px; color: var(--gold); background: var(--wood-1); border: 2px solid var(--wood-0); text-shadow: none; }
.menu-settings { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.toggle {
  padding: 6px 9px;
  font-size: 14px;
  color: var(--ink);
  background: var(--parch-2);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, 0 3px 0 var(--wood-0);
}
.toggle b { color: #2f7d3b; }
.toggle.off b { color: var(--red-dark); }
.toggle:active { transform: translateY(2px); box-shadow: inset 2px 2px 0 #fff6dc, 0 1px 0 var(--wood-0); }
.menu-sub { margin: 0 0 2px; color: var(--ink-soft); line-height: 1.4; }
.level-list { display: flex; flex-direction: column; gap: 10px; }
/* game mode: Draft or Fast match */
.format-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.format-btn {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; text-align: left;
  color: var(--ink); background: var(--parch-2);
  border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, 0 3px 0 var(--wood-0);
}
.format-btn b { font-family: var(--pixel); font-size: 10px; font-weight: normal; }
.format-btn span { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.format-btn:hover { background: #f6e6b8; }
.format-btn.on { background: var(--gold); box-shadow: inset 2px 2px 0 #ffe9a6, 0 1px 0 var(--wood-0); transform: translateY(2px); }
.format-btn.on span { color: var(--ink); }
.level-btn {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 12px 14px;
  text-align: left;
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--wood-0);
  transition: transform .08s steps(2);
}
.level-btn:hover { transform: translateY(-2px); }
.level-btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--wood-0); }
.level-btn b { font-family: var(--pixel); font-size: 12px; font-weight: normal; }
.lvl-tiers { margin-left: 4px; font-size: 8px; color: var(--ink-soft); vertical-align: 1px; cursor: var(--cur-look), help; }
.level-btn span { grid-column: 1; font-size: 14px; color: var(--ink-soft); }
.level-btn em { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--pixel); font-size: 11px; }
.level-btn.easy { background: #d6efc8; }
.level-btn.normal { background: #f6e6b8; }
.level-btn.hard { background: #f7c9c0; }

/* ---------- Turn timer ---------- */
.turn-timer {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-family: var(--pixel); font-size: 11px;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 4px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, 4px 4px 0 rgba(20, 10, 4, .55);
}
.turn-timer.idle { visibility: hidden; }
@media (min-width: 701px) { /* one line only: a wrapping top bar would push the board (and the village) down */
  .topbar { flex-wrap: nowrap; height: 48px; }
  .phase-box { max-height: 44px; }
  .phase { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.turn-timer.p0 { border-color: var(--blue-dark); }
.turn-timer.p1 { border-color: var(--red-dark); }
.tt-secs { min-width: 52px; }
.tt-bar { width: 90px; height: 10px; border: 2px solid var(--ink); background: var(--wood-1); }
.tt-bar i { display: block; height: 100%; background: var(--green); box-shadow: inset 0 2px 0 #8fe08f; transition: width .2s linear; }
.turn-timer.warn { color: var(--red-dark); animation: blink .5s steps(1) infinite; }
.turn-timer.warn .tt-bar i { background: var(--red); box-shadow: inset 0 2px 0 #f08a80; }

/* ---------- Draft: bans and picks ---------- */
.draft-head { flex-direction: column; align-items: stretch; gap: 12px; }
.draft-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.draft-team-box { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--parch-2); border: 3px solid var(--ink); }
.draft-team-box.p0 { border-color: var(--blue-dark); }
.draft-team-box.p1 { border-color: var(--red-dark); }
.draft.p0 .draft-team-box.p0, .draft.p1 .draft-team-box.p1 { box-shadow: 0 0 0 3px var(--gold); }
.dtb-head { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 10px; }
.dtb-head b { font-weight: normal; }
.dtb-head .mark { width: 24px; height: 24px; font-size: 10px; }
.dtb-head small { font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.draft-team { display: grid; grid-template-columns: repeat(6, 40px); gap: 4px; }
.slot { position: relative; }
.slot.next { border-style: solid; border-color: var(--gold-dark); background: #f6e6b8; animation: blink 1s steps(1) infinite; }
.slot .sprite.ghost { opacity: .5; }
.slot-tier { position: absolute; right: -6px; bottom: -6px; min-width: 14px; height: 13px; font-size: 5px; padding: 0 1px; }
.draft-info { text-align: center; }
.draft-info h2 { justify-content: center; }
.draft-info p { margin: 0 auto; }
.draft-step { font-size: 8px; color: var(--ink-soft); margin-left: 4px; }
.draft-bans { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
/* fast match: your chosen champions (click to take one out), the other team stays secret */
.slot.removable { cursor: var(--cur-hand), pointer; }
.slot.removable:hover { border-color: var(--red); }
.slot.secret { display: grid; place-items: center; font-family: var(--pixel); font-size: 12px; color: var(--ink-soft); }
.slot.secret.ready { color: #2f7d3b; border-style: solid; border-color: #2f7d3b; background: #d6efc8; }
.fast-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font-family: var(--pixel); font-size: 8px; background: var(--parch-2); border: 3px solid; }
.fast-status.p0 { border-color: var(--blue); }
.fast-status.p1 { border-color: var(--red); }
.fast-status.ready { background: #d6efc8; }
.champ-tile .ct-order { position: absolute; top: -11px; right: -9px; width: 20px; height: 20px; display: grid; place-items: center; font-family: var(--pixel); font-size: 8px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
.ban-slot { position: relative; width: 38px; height: 38px; display: grid; place-items: center; padding: 2px; font-size: 16px; color: var(--parch); background: var(--wood-1); border: 3px solid; }
.ban-slot.p0 { border-color: var(--blue); }
.ban-slot.p1 { border-color: var(--red); }
.ban-slot .sprite { filter: grayscale(1) brightness(.75); }
.ban-slot:has(.sprite)::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--red) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--red) 44% 56%, transparent 56%);
}
.draft-bar { gap: 10px; }
.draft-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 10px;
  font-family: var(--pixel); font-size: 8px;
  color: var(--ink);
  background: var(--parch-2);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, 0 3px 0 var(--wood-0);
  white-space: nowrap;
}
.chip:hover { background: #f6e6b8; }
.chip.on { background: var(--gold); box-shadow: inset 2px 2px 0 #ffe9a6, 0 1px 0 var(--wood-0); transform: translateY(2px); }
.draft-search {
  width: 150px; min-width: 0;
  padding: 7px 10px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: #fff8e6;
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--parch-3);
}
.draft-search:focus { outline: 3px solid var(--gold); }
.draft-buttons { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.btn.primary.danger-btn { background: #e8735f; color: #fff6dc; text-shadow: 1px 1px 0 var(--red-dark); box-shadow: inset 3px 3px 0 #f6b0a3, inset -3px -4px 0 var(--red-dark), 0 4px 0 var(--wood-0); }
.btn.primary.danger-btn:hover:not(:disabled) { background: #ef8572; }
.draft.banning .draft-head { border-color: var(--red-dark); }
.draft-empty { grid-column: 1 / -1; text-align: center; padding: 24px; }
.detail-confirm { width: 100%; margin: 2px 0 10px; }

/* ---------- Coin toss ---------- */
.coin-toss {
  position: fixed; inset: 0; z-index: 65;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: rgba(20, 10, 4, .5);
  pointer-events: none;
}
.coin-toss.show { display: flex; }
.phase .warn-soon { color: #c2410c; }
/* while the coin spins, nothing behind it tells who places first */
body.tossing .turn-pill { visibility: hidden; }
body.tossing .side.active { box-shadow: none; }
.coin-stage { position: relative; width: 140px; height: 140px; margin-top: 150px; perspective: 700px; }
.coin3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; filter: drop-shadow(0 0 12px rgba(255, 220, 100, .7)); }
.coin-face.back { transform: rotateY(180deg); }
.coin-shadow { position: absolute; left: 22%; right: 22%; bottom: -28px; height: 12px; background: rgba(0, 0, 0, .45); }
.coin-result { min-height: 24px; font-family: var(--pixel); font-size: 18px; color: #fff6dc; text-shadow: 3px 3px 0 var(--wood-0); opacity: 0; text-align: center; padding: 0 16px; }
.coin-result.show { opacity: 1; animation: chest-pop .4s steps(4); }
.coin-result.p0 { color: #9fc0ff; }
.coin-result.p1 { color: #ffa497; }

/* ---------- Tutorial coach ---------- */
/* the tutorial's spotlight: everything darkens except what the coach talks about */
.tut-spot {
  position: fixed; z-index: 44; pointer-events: none;
  border-radius: 6px; box-shadow: 0 0 0 200vmax rgba(14, 7, 3, .62), 0 0 0 4px var(--gold), 0 0 22px 6px rgba(255, 210, 70, .6);
  transition: left .25s, top .25s, width .25s, height .25s;
  animation: spot-in .3s steps(3);
}
.tut-spot.none { box-shadow: 0 0 0 200vmax rgba(14, 7, 3, .62); }
@keyframes spot-in { from { opacity: 0; } }

.coach {
  position: fixed; left: 50%; bottom: 16px; z-index: 45;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  padding: 12px 16px 14px;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 4px solid var(--gold-dark);
  box-shadow: 0 0 0 3px var(--gold), 6px 6px 0 3px rgba(20, 10, 4, .55);
  animation: chest-pop .3s steps(3);
}
.coach.top { bottom: auto; top: 16px; }
.coach-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.coach-step { font-family: var(--pixel); font-size: 8px; color: var(--ink-soft); }
.coach-skip { padding: 0; background: none; border: 0; font-size: 13px; color: var(--ink-soft); text-decoration: underline; }
.coach-text { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.coach-text b { color: var(--wood-1); }
.coach .btn { display: block; margin-left: auto; }
.coach-icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin-top: 8px; font-size: 13px; line-height: 1.25; }
.coach-icons > span { display: flex; align-items: flex-start; gap: 6px; padding: 3px 5px; background: rgba(255, 255, 255, .35); border: 2px solid var(--parch-3); }
.coach-icons i { flex-shrink: 0; width: 20px; font-style: normal; font-size: 15px; text-align: center; }
@media (max-width: 640px) { .coach-icons { grid-template-columns: 1fr; font-size: 12px; } }
.coach-target { position: relative; z-index: 3; animation: coach-pulse .9s steps(2) infinite !important; }
@keyframes coach-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 18px 6px rgba(255, 236, 140, .95); }
  50% { box-shadow: 0 0 0 4px var(--gold), 0 0 6px 2px rgba(255, 236, 140, .5); }
}

/* ---------- Screen themes (js/village.js: Village.theme) ----------
   One layer between the village and the game. Only its class changes between screens, so the
   clouds and particles keep moving instead of restarting on every turn. */
.scene { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.scene-tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.tint-menu { background: linear-gradient(160deg, rgba(255, 236, 170, .32), transparent 55%); }
.tint-draft { background: linear-gradient(180deg, rgba(255, 150, 60, .32), rgba(150, 40, 100, .22)); }
.tint-battle { background: radial-gradient(ellipse at center, transparent 45%, rgba(80, 0, 20, .42)), linear-gradient(180deg, rgba(70, 20, 90, .38), rgba(200, 70, 20, .2)); }
.tint-sudden { background: radial-gradient(ellipse at center, rgba(70, 0, 10, .2), rgba(40, 0, 10, .62)); }
.tint-over { background: linear-gradient(180deg, rgba(8, 12, 45, .68), rgba(25, 30, 80, .5)); }
.theme-menu .tint-menu, .theme-draft .tint-draft, .theme-battle .tint-battle,
.theme-sudden .tint-battle, .theme-sudden .tint-sudden, .theme-over .tint-over { opacity: 1; }
.theme-sudden .tint-sudden { animation: sudden-pulse 2.4s steps(6) infinite; }
.scene-rays {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(115deg, transparent 0 70px, rgba(255, 246, 205, .13) 70px 120px, transparent 120px 240px);
  opacity: 0; transition: opacity 1.2s;
  animation: rays-sway 9s ease-in-out infinite alternate;
}
.theme-menu .scene-rays { opacity: 1; }
.theme-draft .scene-rays { opacity: .55; }
.scene-cloud {
  position: absolute; left: 0; top: var(--top);
  width: var(--size); height: calc(var(--size) * .42);
  border-radius: 50%;
  background: rgba(10, 30, 5, .17);
  filter: blur(16px);
  opacity: 0; transition: opacity 1.5s;
  animation: cloud-drift var(--speed) linear infinite;
  animation-delay: var(--delay);
}
.theme-menu .scene-cloud, .theme-placement .scene-cloud { opacity: 1; }
.theme-sudden .scene-cloud { opacity: 1; background: rgba(0, 0, 0, .3); }
.scene-bits i {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * 2px); height: calc(var(--s) * 2px);
  opacity: 0; transition: opacity 1s;
}
/* menu: petals drifting down */
.theme-menu .scene-bits i { top: -12px; opacity: .9; background: #ffc6d6; animation: bit-fall var(--d) linear infinite var(--delay); }
.theme-menu .scene-bits i:nth-child(3n) { background: #fff6f0; }
/* champion select: festival sparkles rising */
.theme-draft .scene-bits i { top: 100%; opacity: 1; background: #ffe36b; box-shadow: 0 0 6px #ffd23a; animation: bit-rise calc(var(--d) * 1.3) linear infinite var(--delay); }
.theme-draft .scene-bits i:nth-child(4n) { background: #ff9ad0; box-shadow: 0 0 6px #ff6fb6; }
/* battle: embers */
.theme-battle .scene-bits i { top: 100%; opacity: 1; background: #ff9a3c; box-shadow: 0 0 6px #ff5c1c; animation: bit-rise var(--d) linear infinite var(--delay); }
.theme-battle .scene-bits i:nth-child(3n) { background: #ffe36b; }
/* sudden death: rain */
.theme-sudden .scene-bits i { top: -30px; width: 2px; height: 16px; opacity: .6; background: #b8d4ff; rotate: 14deg; animation: bit-rain calc(var(--d) * .12) linear infinite var(--delay); }
/* game over: stars and fireflies */
.theme-over .scene-bits i { top: calc(var(--y) * .65); opacity: 1; background: #fff; animation: twinkle calc(var(--d) * .4) steps(2) infinite var(--delay); }
.theme-over .scene-bits i:nth-child(4n) { top: auto; bottom: calc(var(--y) * .35); background: #e2ff7a; box-shadow: 0 0 8px #b8ff4a; animation: firefly var(--d) ease-in-out infinite alternate var(--delay); }
@keyframes bit-fall { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--drift), 108vh) rotate(540deg); } }
@keyframes bit-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--drift), -108vh); opacity: 0; } }
@keyframes bit-rain { to { transform: translate(-40px, 112vh); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes firefly { 0% { transform: translate(0, 0); opacity: .2; } 100% { transform: translate(var(--drift), -40px); opacity: 1; } }
@keyframes cloud-drift { from { transform: translateX(-60vw); } to { transform: translateX(120vw); } }
@keyframes rays-sway { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes sudden-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .scene-bits, .scene-cloud { display: none; }
}

/* ---------- Settings ---------- */
/* both tabs keep one size: what doesn't fit scrolls inside */
.modal.settings { max-width: 960px; width: 100%; height: min(760px, calc(100vh - 32px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal.settings > h2, .modal.settings > .profile-tabs { flex-shrink: 0; }
.bp-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; font-size: 15px; vertical-align: middle; background: #fff6dc; border: 2px solid var(--ink); }
/* the General and Battle tabs keep their comfortable width in the wider box */
/* ---------- How to play: sections on the left, the chosen one on the right ---------- */
#set-tab-rules:not([hidden]) { display: flex; gap: 16px; height: 100%; overflow: hidden; padding: 0; }
.guide-nav { flex: 0 0 196px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 2px 4px 2px 0; }
.g-nav { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; text-align: left; font-family: var(--pixel); font-size: 8px; line-height: 1.3; color: var(--ink);
  background: var(--parch-2); border: 3px solid var(--parch-3); box-shadow: none; }
.g-nav:hover { background: #fff3c4; border-color: var(--ink-soft); }
.g-nav.on { background: linear-gradient(90deg, var(--gold), #ffe48a); border-color: var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .3); }
.g-nav-ico { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; background: var(--wood-1); border: 2px solid var(--ink); }
.g-nav-ico img, .g-nav-ico .sprite { width: 20px; height: 20px; image-rendering: pixelated; }
.guide-body { flex: 1; min-width: 0; overflow-y: auto; padding: 2px 8px 8px 2px; }
.g-sec { display: flex; flex-direction: column; gap: 12px; animation: tip-in .15s steps(3); }
.g-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: linear-gradient(90deg, var(--wood-2), var(--wood-1)); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15), 4px 4px 0 rgba(20, 10, 4, .3); }
.g-head-ico { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.g-head-ico img, .g-head-ico .sprite { width: 36px; height: 36px; image-rendering: pixelated; }
.g-head h3 { margin: 0 0 4px; font-family: var(--pixel); font-size: 13px; color: #fff3c4; text-shadow: 2px 2px 0 var(--ink); }
.g-head p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--parch); }
.g-cards { display: flex; flex-direction: column; gap: 8px; }
.g-card { display: flex; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, .4); border: 3px solid var(--parch-3); border-left-width: 6px; border-left-color: var(--gold); }
.g-card-ico { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; font-size: 18px; background: var(--parch-2); border: 2px solid var(--ink); }
.g-card-ico img { width: 26px; height: 26px; image-rendering: pixelated; }
.g-card h4 { margin: 0 0 4px; font-family: var(--pixel); font-size: 9px; }
.g-card p { margin: 0; font-size: 14px; line-height: 1.45; }
/* overview: the three phases */
.g-phases { display: flex; align-items: stretch; gap: 6px; }
.g-phase { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; text-align: center; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .25); }
.g-phase b { font-family: var(--pixel); font-size: 9px; }
.g-phase small { font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.g-phase-ico { display: grid; place-items: center; width: 44px; height: 44px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.g-phase-ico img, .g-phase-ico .sprite { width: 32px; height: 32px; image-rendering: pixelated; }
.g-step { position: absolute; top: -10px; left: -8px; display: grid; place-items: center; width: 22px; height: 22px; font-family: var(--pixel); font-size: 9px; color: #fff; background: var(--red); border: 2px solid var(--ink); }
.g-arrow { align-self: center; font-size: 18px; color: var(--ink-soft); }
/* placement: a board with a line */
.g-board-demo { display: flex; align-items: center; gap: 16px; padding: 10px; background: var(--parch-2); border: 3px solid var(--ink); }
.g-board { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; padding: 4px; background: #5d9e3c; border: 3px solid var(--ink); }
.g-board i { display: grid; place-items: center; height: 34px; font-style: normal; font-weight: 700; font-size: 18px; background: #c9c3b0; border: 2px solid #8a8478; }
.g-board i.x { color: var(--blue); }
.g-board i.o { color: var(--red); }
.g-board i.line { background: #ffe48a; border-color: #d49b22; box-shadow: 0 0 8px rgba(255, 211, 107, .9); }
.g-board-note { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.g-board-note b { font-family: var(--pixel); font-size: 9px; color: #b4501a; }
/* battle: the actions */
.g-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.g-action { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; padding: 8px 6px; background: var(--parch-2); border: 3px solid var(--ink); }
.g-action .ab-icon { width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; }
.g-action small { font-family: var(--pixel); font-size: 7px; text-align: center; }
/* ultimates: a full energy bar */
.g-energy { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--parch-2); border: 3px solid var(--ink); }
.g-energy-label { font-family: var(--pixel); font-size: 8px; white-space: nowrap; }
.g-energy-bar { flex: 1; height: 14px; background: var(--wood-1); border: 3px solid var(--ink); }
.g-energy-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a3c, #ffd36b); animation: g-fill 2.4s steps(12) infinite; }
@keyframes g-fill { from { width: 0; } 80%, to { width: 100%; } }
.g-energy b { font-family: var(--pixel); font-size: 9px; }
/* synergies: every faction, its heroes and its two bonuses */
.g-syn { display: flex; flex-direction: column; gap: 6px; }
.g-syn-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 130px 130px; align-items: center; gap: 8px; padding: 6px 8px; background: var(--parch-2); border: 3px solid var(--ink); }
.g-syn-name { display: flex; align-items: center; gap: 6px; font-family: var(--pixel); font-size: 8px; }
.g-syn-members { display: flex; flex-wrap: wrap; gap: 2px; }
.g-syn-members .sprite { width: 26px; height: 26px; }
.g-syn-bonus { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; }
.g-syn-bonus em { font-style: normal; font-family: var(--pixel); font-size: 7px; font-weight: normal; color: var(--ink-soft); }
/* status icons */
.g-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.g-stat { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; background: var(--parch-2); border: 3px solid var(--parch-3); }
.g-stat i { flex-shrink: 0; width: 24px; font-style: normal; font-size: 18px; text-align: center; }
.g-stat span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.g-stat small { color: var(--ink-soft); }
/* modes: the difficulties */
.g-diffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g-diff { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .25); }
.g-diff.easy { background: #d6efc8; } .g-diff.normal { background: #f6e6b8; } .g-diff.hard { background: #f7c9c0; }
.g-diff b { font-family: var(--pixel); font-size: 11px; }
.g-diff-tiers { font-family: var(--pixel); font-size: 7px; color: var(--ink-soft); }
.g-diff small { font-size: 13px; line-height: 1.35; }
.g-diff em { display: flex; align-items: center; gap: 4px; font-style: normal; font-family: var(--pixel); font-size: 10px; }
/* progress: the chests */
.g-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g-chest { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; text-align: center; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); color: #fff; }
.g-chest img { width: 48px; height: 48px; image-rendering: pixelated; }
.g-chest b { font-family: var(--pixel); font-size: 8px; text-shadow: 1px 1px 0 var(--ink); }
.g-chest > span { display: flex; align-items: center; gap: 4px; padding: 2px 6px; font-family: var(--pixel); font-size: 8px; color: var(--gold); background: var(--wood-1); border: 2px solid var(--ink); }
.g-chest .coin-icon, .g-chest .ico-gem { width: 12px; height: 12px; margin: 0; }
.g-champs .rules-classes { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 760px) {
  #set-tab-rules:not([hidden]) { flex-direction: column; gap: 8px; }
  .guide-nav { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .g-nav { width: auto; flex-shrink: 0; white-space: nowrap; }
  .g-phases { flex-direction: column; }
  .g-arrow { transform: rotate(90deg); }
  .g-syn-row { grid-template-columns: 1fr 1fr; }
  .g-syn-members { grid-column: 1 / -1; }
  .g-status, .g-diffs, .g-shop { grid-template-columns: 1fr; }
}
.profile-tabs .tab-right { margin-left: auto; } /* How to play: on its own at the right of the Settings tabs */
#set-tab-rules .rules-list { margin-top: 6px; }
.settings-h { margin: 18px 0 10px; font-family: var(--pixel); font-size: 10px; color: var(--ink-soft); }
.sound-rows { display: flex; flex-direction: column; gap: 8px; }
.sound-row, .setting-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 54px 44px; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--parch-2);
  border: 3px solid var(--ink);
}
.setting-row { grid-template-columns: minmax(0, 1fr) auto; }
.sound-row.master { background: #f6e6b8; border-color: var(--gold-dark); }
.sr-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-label b { font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.5; }
.sr-label small { font-size: 13px; color: var(--ink-soft); }
.sr-val { font-family: var(--pixel); font-size: 8px; text-align: right; }
.sound-row.muted .sr-val { color: var(--red-dark); }
.sr-mute { width: 40px; height: 34px; font-size: 16px; background: var(--parch); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, 0 3px 0 var(--wood-0); }
.sound-row.muted .sr-mute { background: #f2cbc4; }
.sound-row.muted .sr-range { opacity: .45; }
/* pixel slider */
.sr-range { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; cursor: pointer; }
.sr-range::-webkit-slider-runnable-track {
  height: 12px; border: 3px solid var(--ink);
  background: linear-gradient(90deg, var(--gold) var(--fill, 50%), var(--wood-1) var(--fill, 50%));
}
.sr-range::-moz-range-track { height: 6px; border: 3px solid var(--ink); background: var(--wood-1); }
.sr-range::-moz-range-progress { height: 6px; background: var(--gold); }
.sr-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -8px; background: var(--parch); border: 3px solid var(--ink); box-shadow: inset -2px -2px 0 var(--parch-3); }
.sr-range::-moz-range-thumb { width: 10px; height: 18px; border-radius: 0; background: var(--parch); border: 3px solid var(--ink); }
.sr-range:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* ---------- Replay ---------- */
.replay {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 12px 10px;
  color: var(--parch);
  background: rgba(22, 13, 6, .94);
  border-top: 4px solid var(--wood-0);
  box-shadow: 0 -4px 0 var(--wood-3);
}
body.replaying #app { padding-bottom: var(--rp-h, 300px); }
.rp-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1300px; margin: 0 auto; }
.rp-controls { display: flex; gap: 4px; }
.rp-btn {
  min-width: 38px; height: 34px; padding: 0 6px;
  font-size: 15px; color: var(--ink);
  background: var(--parch);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, 0 3px 0 #000;
}
.rp-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 2px 2px 0 #fff6dc, 0 1px 0 #000; }
.rp-btn.play { min-width: 50px; background: var(--gold); }
.rp-btn.speed { font-family: var(--pixel); font-size: 9px; }
.rp-btn:disabled { opacity: .4; cursor: default; }
.rp-info { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-family: var(--pixel); font-size: 9px; }
.rp-info b { font-weight: normal; color: var(--gold); }
.rp-info .p0-text { color: #9fc0ff; }
.rp-info .p1-text { color: #ffa497; }
.rp-caption { max-width: 1300px; min-height: 40px; margin: 8px auto 6px; font-size: 15px; line-height: 1.35; color: #fff6dc; }
.rp-caption .sprite.inline { width: 28px; height: 28px; vertical-align: -9px; }
.rp-scroll { max-width: 1300px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; }
.rp-track { position: relative; height: 140px; margin: 0 18px; }
.tl-zone { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgba(255, 246, 220, .25); }
.tl-zone:first-child { border-left: 0; }
.tl-zone span { position: absolute; top: 2px; left: 6px; font-family: var(--pixel); font-size: 6px; color: rgba(255, 246, 220, .55); white-space: nowrap; }
.tl-zone.placement { background: rgba(242, 193, 78, .1); }
.tl-zone.battle { background: rgba(208, 70, 60, .08); }
.tl-zone.sudden { background: rgba(150, 0, 25, .28); }
.tl-axis { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--wood-3); }
.tl-head { position: absolute; top: 0; bottom: 0; z-index: 2; width: 4px; margin-left: -2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.tl-mark {
  position: absolute; z-index: 3;
  width: 28px; height: 28px; margin-left: -14px; padding: 1px;
  background: var(--parch-2);
  border: 3px solid var(--wood-3);
}
.tl-mark .sprite { width: 100%; height: 100%; }
.tl-mark.p0 { top: 36px; }
.tl-mark.p1 { bottom: 36px; }
.tl-mark::after { content: ''; position: absolute; left: 50%; width: 2px; height: 9px; margin-left: -1px; }
.tl-mark.p0::after { top: 100%; margin-top: 3px; background: var(--blue); }
.tl-mark.p1::after { bottom: 100%; margin-bottom: 3px; background: var(--red); }
.tl-mark.k-attack { border-color: #e0453c; }
.tl-mark.k-skill { border-color: #a070ff; }
.tl-mark.k-move { border-color: #5fcf6e; }
.tl-mark.k-place { border-color: var(--gold); }
.tl-mark.k-defend { border-color: #9fe6ff; }
.tl-mark.k-wait, .tl-mark.k-skip { border-color: #8a8478; }
.tl-mark.past { opacity: .6; }
.tl-mark.has-kill { box-shadow: 0 0 0 2px #ff3b3b, 0 0 10px rgba(255, 59, 59, .8); }
.tl-mark.current { z-index: 4; opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 2px #fff, 0 0 12px var(--gold); }
.tl-mark:hover { opacity: 1; transform: scale(1.2); }
.tl-victim {
  position: absolute; z-index: 2; width: 20px; height: 20px; margin-left: -10px; padding: 1px;
  background: var(--wood-2); border: 2px solid; opacity: .45;
}
.tl-victim.p0 { top: calc(42px - var(--slot) * 24px); border-color: var(--blue); }
.tl-victim.p1 { bottom: calc(42px - var(--slot) * 24px); border-color: var(--red); }
.tl-victim.seen { opacity: .65; }
.tl-victim:hover { opacity: 1; z-index: 5; }
.tl-victim .sprite { width: 100%; height: 100%; filter: grayscale(.7) brightness(.85); }
.tl-victim i { position: absolute; right: -6px; bottom: -6px; font-size: 9px; font-style: normal; filter: drop-shadow(1px 1px 0 #000); }
.tl-star { position: absolute; top: -13px; left: -11px; font-size: 12px; filter: drop-shadow(1px 1px 0 #000); }
.tl-ult { position: absolute; top: -13px; right: -11px; font-size: 13px; filter: drop-shadow(1px 1px 0 #000); }
.tl-mark.k-ult { border-color: #ff8a1e; box-shadow: 0 0 8px rgba(255, 138, 30, .8); }
.tl-mark.k-auto { display: grid; place-items: center; border-color: #3fb8c9; background: #1f3a40; }
.tl-auto { font-size: 15px; line-height: 1; }
.cell.replay-actor { outline: 4px solid var(--gold); outline-offset: 2px; z-index: 2; }
.cell.replay-target { outline: 4px solid var(--red); outline-offset: -4px; }

/* ---------- Champion select: icon tiles, details in a bubble on hover ---------- */
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px; }
.champ-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px;
  text-align: center;
  color: var(--ink);
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 4px solid var(--ink);
  box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 4px 4px 0 rgba(20, 10, 4, .55);
  transition: transform .08s steps(2);
}
.champ-tile:not(.disabled):hover, .champ-tile:focus-visible { transform: translateY(-3px); border-color: var(--gold-dark); outline: none; }
.champ-tile.disabled { cursor: default; }
.ct-icon { width: 64px; height: 64px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.ct-name { min-height: 20px; display: flex; align-items: center; font-family: var(--pixel); font-size: 7px; line-height: 1.4; overflow-wrap: anywhere; }
.ct-tier { position: absolute; top: -10px; left: -9px; }
.ct-lock { position: absolute; top: -12px; left: -9px; font-size: 15px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .4)); }
.champ-tile.locked .ct-icon, .champ-tile.locked .ct-name { opacity: .55; }
.champ-tile.banned > :not(.ct-ban) { opacity: .35; filter: grayscale(1); }
.ct-ban {
  position: absolute; left: 50%; top: 36%; z-index: 1;
  transform: translate(-50%, -50%) rotate(-14deg);
  padding: 3px 6px;
  font-family: var(--pixel); font-size: 8px;
  color: var(--red);
  background: rgba(255, 246, 220, .92);
  border: 3px solid var(--red);
}
.ct-picks { position: absolute; top: -11px; right: -9px; display: flex; gap: 2px; }
.ct-picks i { width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-family: var(--pixel); font-size: 8px; color: #fff; border: 2px solid var(--ink); }
.ct-picks i.p0 { background: var(--blue); }
.ct-picks i.p1 { background: var(--red); }
.champ-tile.chosen { border-color: var(--gold-dark); background: var(--tile-parchment) 0 0 / 64px 64px, #f6e6b8; box-shadow: 0 0 0 4px var(--gold), 4px 4px 0 rgba(20, 10, 4, .55); transform: translateY(-3px); }
.draft.banning .champ-tile.chosen { border-color: var(--red-dark); box-shadow: 0 0 0 4px var(--red), 4px 4px 0 rgba(20, 10, 4, .55); }
.champ-bubble { position: fixed; z-index: 45; width: min(440px, calc(100vw - 16px)); padding: 12px 14px; pointer-events: none; }
.champ-bubble .info-text { font-size: 14px; }
/* a holo champion's bubble: a foil frame with a glow, the holo card fills it edge to edge */
.champ-bubble.legend {
  padding: 0; border-color: #7f74c4; background: #e8e2ff;
  box-shadow: inset 0 0 0 3px #f2efff, 0 0 0 2px #3f3680, 0 0 22px 6px rgba(170, 200, 255, .7), 6px 6px 0 rgba(20, 10, 4, .45);
  animation: legend-glow 1.6s steps(4) infinite;
}
.champ-bubble.legend .ccard.legend { padding: 12px 14px; border: 0; }
@keyframes legend-glow { 50% { box-shadow: inset 0 0 0 3px #ffe6fb, 0 0 0 2px #3f3680, 0 0 30px 10px rgba(255, 180, 240, .8), 6px 6px 0 rgba(20, 10, 4, .45); } }
.champ-bubble .info-icon { background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }

/* ---------- Menu extras ---------- */
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lang-select {
  padding: 7px 10px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: #fff8e6;
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--parch-3);
}
.muted { color: var(--ink-soft); }
.small-note { margin: 0 0 12px; font-size: 13px; line-height: 1.4; }

/* ---------- Profile ---------- */
/* the profile keeps one size on every tab: what doesn't fit scrolls inside */
.modal.profile { max-width: 900px; height: min(var(--profile-h, 900px), calc(100vh - 32px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal.profile > .profile-head, .modal.profile > .profile-tabs, .modal.profile > .modal-back { flex-shrink: 0; }
.profile-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; }
.profile-body > * { flex-shrink: 0; }
/* the stats tabs: the match history fills the rest and is the only thing that scrolls (fitProfile() in js/ui.js sizes it to 3 games) */
.profile-body > #profile-history-box { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* a screen too short for 3 games under the stats: the whole profile scrolls, the history lists every game */
.modal.profile.tight .profile-body > #profile-history-box { flex: 0 0 auto; }
.modal.profile.tight .match-history { max-height: none; overflow: visible; }
#profile-history-box > h3 { flex-shrink: 0; }
.modal.profile .modal-back { margin-top: 14px; }
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding-right: 34px; }
.profile-avatar { width: 64px; height: 64px; flex-shrink: 0; padding: 4px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.profile-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.profile-id small { font-size: 14px; color: var(--ink-soft); }
.profile-id small .ico-gem { width: 16px; height: 16px; margin: 0 3px 0 0; vertical-align: -3px; }
.profile-name {
  width: 100%; max-width: 340px;
  padding: 6px 8px;
  font-family: var(--pixel); font-size: 13px;
  color: var(--ink);
  background: #fff8e6;
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--parch-3);
}
.profile-name:focus { outline: 3px solid var(--gold); }
.stat-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; text-align: center; background: var(--parch-2); border: 3px solid var(--ink); }
.stat-tile b { font-family: var(--pixel); font-size: 12px; font-weight: normal; }
.stat-tile span { font-size: 13px; color: var(--ink-soft); }
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* the 3 most played champions and the 4 roles: two lists of the same height, rows spread evenly */
.profile-champs, .profile-roles { display: grid; height: 144px; }
.profile-champs { grid-template-rows: repeat(3, 1fr); }
.profile-roles { grid-template-rows: repeat(4, 1fr); }
.profile-champs > .muted, .profile-roles > .muted { grid-row: 1 / -1; align-self: center; }
.pc-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 0 6px; border-bottom: 2px dashed var(--parch-3); font-size: 14px; }
.pc-icon { width: 32px; height: 32px; }
.pc-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-num { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.role-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: center; padding: 0 6px; border-bottom: 2px dashed var(--parch-3); font-size: 14px; }
.role-bar { height: 12px; background: var(--wood-1); border: 2px solid var(--ink); }
.role-bar i { display: block; height: 100%; background: var(--gold); box-shadow: inset 0 2px 0 #ffe9a6; }
.role-num { font-family: var(--pixel); font-size: 8px; text-align: right; }
/* the match history: 5 games in view, the rest scroll; each game a separate card */
.match-history { position: relative; display: flex; flex-direction: column; gap: 0; flex: 0 1 auto; min-height: 0; max-height: var(--hist-h, none); overflow-y: auto; padding: 4px 8px 4px 2px; }
.match-history > .mh-row { flex-shrink: 0; }
.match-history .mh-row + .mh-row { margin-top: 12px; }
.match-history .mh-row + .mh-row::before { content: ''; position: absolute; left: 10%; right: 10%; top: -8px; height: 2px; background: repeating-linear-gradient(90deg, var(--parch-3) 0 6px, transparent 6px 10px); }
.mh-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) 110px auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--parch-2); border: 3px solid var(--ink); border-left-width: 8px; }
.mh-row.win { border-left-color: var(--green); }
.mh-row.loss { border-left-color: var(--red); }
.mh-row.draw { border-left-color: var(--ink-soft); }
.mh-row[data-mid] { cursor: var(--cur-hand), pointer; }
.mh-row.open { border-bottom-width: 0; box-shadow: none; transform: none; background: linear-gradient(90deg, rgba(255, 211, 107, .35), transparent 50%), var(--parch-2); }
/* a game's details, dropped down under its row */
.mh-detail { margin: 0 0 6px; padding: 10px 12px 12px; background: var(--tile-parchment) 0 0 / 64px 64px, #f8eccb; border: 3px solid var(--ink); border-top: 2px dashed var(--parch-3);
  border-left-width: 8px; box-shadow: 3px 3px 0 rgba(20, 10, 4, .2); animation: md-open .18s steps(4); transform-origin: top; }
.mh-row.win + .mh-detail { border-left-color: var(--green); }
.mh-row.loss + .mh-detail { border-left-color: var(--red); }
.mh-row.draw + .mh-detail { border-left-color: var(--ink-soft); }
@keyframes md-open { from { opacity: 0; transform: scaleY(.6); } }
.md-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.md-sum { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.md-sum small { font-size: 12px; color: var(--ink-soft); }
.md-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.md-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; font-family: var(--pixel); font-size: 8px; color: var(--parch); background: var(--wood-1); border: 2px solid var(--ink); }
.md-chip .ico, .md-chip .coin-icon { width: 12px; height: 12px; margin: 0; }
.md-chip .md-ico { width: 13px; height: 13px; image-rendering: pixelated; }
.md-kda b { font-family: var(--pixel); font-size: 9px; font-weight: normal; color: var(--ink); letter-spacing: 1px; }
.md-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-team { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: rgba(255, 255, 255, .35); border: 3px solid var(--ink); }
.md-team.p0 { background: linear-gradient(rgba(79, 140, 255, .14), rgba(255, 255, 255, .3)); }
.md-team.p1 { background: linear-gradient(rgba(255, 92, 92, .14), rgba(255, 255, 255, .3)); }
.md-team.won { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(255, 211, 107, .6); }
.md-team-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-family: var(--pixel); font-size: 9px; }
.md-mark { display: grid; place-items: center; width: 20px; height: 20px; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid var(--ink); }
.md-team.p0 .md-mark { background: var(--blue); }
.md-team.p1 .md-mark { background: var(--red); }
.md-crown { margin-left: auto; font-size: 14px; }
.md-hero { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 8px; padding: 4px 6px; background: rgba(255, 255, 255, .5); border: 2px solid var(--parch-3); }
.md-hero.dead { background: rgba(120, 100, 90, .12); }
.md-pic { position: relative; width: 36px; height: 36px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--ink); }
.md-pic .sprite { display: block; width: 100%; height: 100%; }
.md-hero.dead .md-pic .sprite { filter: grayscale(1) brightness(.8); }
.md-skull { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 12px; filter: drop-shadow(1px 1px 0 #000); }
.md-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.md-name b { font-family: var(--pixel); font-size: 8px; font-weight: normal; }
.md-name small { flex-basis: 100%; font-size: 12px; color: var(--ink-soft); }
.md-name .mvp-tag { position: static; }
.md-stats { display: flex; flex-direction: column; gap: 2px; }
.md-stat { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 1px 6px; font-size: 12px; background: rgba(255, 255, 255, .45); border-left: 3px solid; }
.md-stat i { font-style: normal; text-align: center; }
.md-stat span { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-stat b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.md-stat.dmg { border-left-color: #d0463c; } .md-stat.dmg b { color: #b3302f; }
.md-stat.taken { border-left-color: #6a5a8a; } .md-stat.taken b { color: #4a3a6a; }
.md-stat.heal { border-left-color: #2f9d58; } .md-stat.heal b { color: #1f7a3e; }
.md-total { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; padding: 4px 6px; font-family: var(--pixel); font-size: 7px; color: var(--parch); background: var(--wood-1); border: 2px solid var(--ink); }
.md-total span:first-child { margin-right: auto; color: var(--gold); }
@media (max-width: 700px) { .md-teams { grid-template-columns: 1fr; } .md-head { flex-wrap: wrap; } }
.mh-row.p0 { border-left-color: var(--blue); }
.mh-row.p1 { border-left-color: var(--red); }
.mh-result { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh-result b { font-family: var(--pixel); font-size: 10px; font-weight: normal; }
.mh-row.win .mh-result b { color: #2f7d3b; }
.mh-row.loss .mh-result b { color: var(--red-dark); }
.mh-result small, .mh-stats small { font-size: 12px; color: var(--ink-soft); }
.mh-teams { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mh-side { display: flex; gap: 3px; }
.mh-unit { position: relative; width: 32px; height: 32px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--ink); }
.mh-unit.dead { background: var(--wood-2); }
.mh-tier { position: absolute; right: -6px; bottom: -6px; min-width: 13px; height: 12px; font-size: 5px; padding: 0 1px; }
.mh-vs { font-family: var(--pixel); font-size: 7px; color: var(--ink-soft); }
.mh-stats { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.mh-stats b { font-family: var(--pixel); font-size: 10px; font-weight: normal; }

/* ---------- Online lobby ---------- */
.online { max-width: 760px; }
.online-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 14px; color: var(--ink-soft); }
.online-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.online-box .lang-select, .online-code-input { width: 100%; min-width: 0; }
.online-box { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: var(--parch-2); border: 3px solid var(--ink); }
.online-box .settings-h { margin: 0; }
.online-box .small-note { margin: 0; }
.online-code-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: #fff8e6; border: 3px dashed var(--gold-dark); }
.online-code { font-family: var(--pixel); font-size: 22px; letter-spacing: 4px; color: var(--ink); font-weight: normal; }
.online-code-input {
  padding: 8px 10px;
  font-family: var(--pixel); font-size: 20px; letter-spacing: 6px; text-align: center; text-transform: uppercase;
  color: var(--ink);
  background: #fff8e6;
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--parch-3);
}
.online-code-input:focus { outline: 3px solid var(--gold); }
.online-status { min-height: 22px; margin: 12px 0 6px; font-size: 15px; text-align: center; }
.online-status.hosting, .online-status.joining { color: var(--ink); animation: blink 1.4s steps(1) infinite; }
.online-status.error { color: var(--red-dark); font-weight: 700; }
#online-cancel { display: block; margin: 0 auto; }

/* ---------- "You" markers (online and vs the CPU) ---------- */
.you-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--pixel); font-size: 9px;
  color: #fff;
  border: 4px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), 4px 4px 0 rgba(20, 10, 4, .55);
  white-space: nowrap;
}
.you-badge b { font-weight: normal; }
.you-badge .mark { width: 22px; height: 22px; font-size: 9px; box-shadow: none; border: 2px solid #fff; }
.you-badge.p0 { background: var(--blue); }
.you-badge.p1 { background: var(--red); }
.side.mine, .draft-team-box.mine { position: relative; }
.side.mine::before, .draft-team-box.mine::before {
  content: attr(data-you);
  position: absolute; top: -13px; right: 10px; z-index: 1;
  padding: 3px 7px;
  font-family: var(--pixel); font-size: 8px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
}
.side.p0.mine { background: var(--tile-parchment) 0 0 / 64px 64px, #d8e3f8; }
.side.p1.mine { background: var(--tile-parchment) 0 0 / 64px 64px, #f6d9d3; }
.draft-team-box.p0.mine { background: #d8e3f8; }
.draft-team-box.p1.mine { background: #f6d9d3; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

/* ---------- Pixel cursors (images made in js/sprites.js) ----------
   arrow by default, a pointing hand on anything clickable, and on the board:
   sword = attack, wand = skill target, boot = move, pin = place a champion */
body { cursor: var(--cur-arrow), auto; }
button:not(:disabled), select, label, summary, [role="tab"], .tl-mark, .coach-skip,
.champ-tile:not(.disabled), .class-card:not(.disabled), .unit-row:not(.disabled) { cursor: var(--cur-hand), pointer; }
button:disabled, .champ-tile.disabled, .class-card.disabled, .unit-row.disabled { cursor: var(--cur-arrow), not-allowed; }
input[type="search"], input:not([type]), input[type="text"] { cursor: text; }
input[type="range"] { cursor: var(--cur-hand), pointer; }
.cell, .cell.empty { cursor: var(--cur-arrow), default; }
.cell.actable, .cell.selected { cursor: var(--cur-hand), pointer; }
.cell.can-place { cursor: var(--cur-place), pointer; }
.cell.t-attack { cursor: var(--cur-sword), crosshair; }
.cell.t-skill { cursor: var(--cur-wand), pointer; }
.cell.t-move { cursor: var(--cur-boot), pointer; }
/* the animated boots (js/ui.js) replace the system cursor while over a square you can move to */
.walk-cursor { position: fixed; left: 0; top: 0; z-index: 200; width: 32px; height: 32px; pointer-events: none; image-rendering: pixelated; }
body.walking, body.walking * { cursor: none !important; }

/* ---------- Online: a frame in your team color around the whole screen ---------- */
.you-frame { position: fixed; inset: 0; z-index: 35; pointer-events: none; border: 5px solid; }
.you-frame.p0 { border-color: var(--blue); box-shadow: inset 0 0 18px rgba(63, 116, 224, .55); }
.you-frame.p1 { border-color: var(--red); box-shadow: inset 0 0 18px rgba(208, 70, 60, .55); }

/* ---------- Pixel scrollbars ----------
   Chromium/Safari: chunky wooden bars with a gold thumb (parchment ones inside panels).
   Firefox only knows scrollbar-color; it's set there alone, because in Chromium it would
   switch off the detailed styles below. */
::-webkit-scrollbar { width: 16px; height: 14px; }
::-webkit-scrollbar-track { background: var(--wood-1); border: 3px solid var(--wood-0); }
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border: 3px solid var(--wood-0);
  box-shadow: inset 2px 2px 0 #ffe9a6, inset -2px -2px 0 var(--gold-dark);
}
::-webkit-scrollbar-thumb:hover { background: #f7cd68; }
::-webkit-scrollbar-thumb:active { background: var(--gold-dark); }
::-webkit-scrollbar-corner { background: var(--wood-1); }
::-webkit-scrollbar-button { display: none; }
.panel ::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .side ::-webkit-scrollbar-track, #log::-webkit-scrollbar-track,
.draft-detail::-webkit-scrollbar-track, .draft-filters::-webkit-scrollbar-track {
  background: var(--parch-2);
  border: 3px solid var(--parch-3);
}
.panel ::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .side ::-webkit-scrollbar-thumb, #log::-webkit-scrollbar-thumb,
.draft-detail::-webkit-scrollbar-thumb, .draft-filters::-webkit-scrollbar-thumb {
  background: var(--wood-4);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #c08a52, inset -2px -2px 0 var(--wood-2);
}
.panel ::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover, .side ::-webkit-scrollbar-thumb:hover, #log::-webkit-scrollbar-thumb:hover { background: #ad7744; }
.rp-scroll::-webkit-scrollbar-track { background: rgba(255, 246, 220, .08); border: 2px solid var(--wood-0); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--gold) var(--wood-1); }
  .panel, .modal, .side, #log, .draft-detail { scrollbar-color: var(--wood-4) var(--parch-2); }
}

/* ---------- Desktop: the whole game fits in the window, no page scrolling ----------
   The board scales with the window height; the side columns (roster + hero info on the left,
   roster + chronicle on the right) scroll inside themselves if they need to. */
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.board { container-type: inline-size; }
.u-icon { width: min(64px, 13.5cqw); height: min(64px, 13.5cqw); }
@container (max-width: 400px) {
  .u-name, .u-cd { display: none; }
  .cell .content { padding-top: 14px; }
}
@media (min-width: 1061px) {
  #app { height: 100vh; overflow: hidden; }
  /* the arena is as tall as the board's column; the rosters fit in that height (they scroll if they must) */
  .arena { flex: 0 0 auto; grid-template-columns: 290px minmax(0, 1fr) 290px; align-items: stretch; }
  .col { height: 0; min-height: 100%; }
  /* a roster taller than the column scrolls its list only: the box itself doesn't clip (its "YOU" tag sits on its top edge) */
  .col .side { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
  .col .side .roster { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; margin: -2px; }

  .col .info .info-body { flex-direction: column; }
  .col .info .range-set { flex-direction: row; }
  /* the chronicle: taller on taller screens, and the player can drag it to any height (--log-h) */
  /* the chronicle fills everything under the arena, or the height the player dragged it to */
  .log-strip { flex: 1 1 0; min-height: 70px; margin-top: auto; } /* basis 0: its text never squeezes the rest */
  .topbar { flex-shrink: 0; }
  .log-strip.sized { flex: 0 0 auto; height: var(--log-h); }
  .log-strip #log { max-height: none; min-height: 0; }
  .log-grip {
    display: block; position: absolute; left: 50%; top: -10px; z-index: 3;
    width: 84px; height: 14px; margin-left: -42px; cursor: ns-resize; touch-action: none;
    background: repeating-linear-gradient(90deg, var(--parch-3) 0 6px, var(--wood-3) 6px 9px) center / 60px 4px no-repeat, var(--parch-2);
    border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--wood-0);
  }
  .log-grip:hover { background-color: #f6e6b8; }
  .center { min-height: 0; gap: 10px; }
  .tabletop { padding: clamp(18px, 4vh, 42px) 0 clamp(22px, 5vh, 48px); }
  /* everything else in the column takes about 290px of height */
  .board { width: min(560px, 100%, max(220px, calc(100vh - 314px - clamp(130px, 18vh, 220px)))); }
  .draft { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 12px; }
  .draft-head { top: 0; }
  body.replaying #app { padding-bottom: var(--rp-h, 300px); }
  body.replaying .board { width: min(480px, 100%, calc(100vh - 290px - var(--rp-h, 244px))); } /* room for the replay's panel */
  body.replaying.rp-log-app .board { width: min(520px, 100%, max(220px, calc(100vh - 400px - var(--rp-h, 300px)))); } /* and the chronicle under the board (big screens) */
}

/* ---------- Pixel sprites ---------- */
.sprite {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}
.sprite.fallen { filter: grayscale(1) brightness(.55); }
.sprite.inline { display: inline-block; width: 32px; height: 32px; vertical-align: -10px; margin: 0 2px; }

/* ---------- Phone draft details (shown only on small screens) ---------- */
.draft-detail { display: none; }
.draft-detail .info-text { font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .arena { grid-template-columns: 1fr 1fr; }
  .center { grid-column: 1 / -1; order: -1; }
}

/* Phones: everything in one column, the board as wide as the screen,
   the player whose turn it is right under the board */
@media (max-width: 700px) {
  body { font-size: 15px; touch-action: manipulation; }
  button { touch-action: manipulation; }
  #app { padding: 8px; gap: 10px; }

  .topbar { gap: 6px; }
  .brand { font-size: 13px; flex: 1 1 100%; text-align: center; }
  .phase { font-size: 7px; }
  .phase-box { padding: 5px 8px; gap: 8px; }
  .phase-box .turn-timer { padding-left: 8px; }
  .top-actions { gap: 5px; margin-left: auto; }
  .btn { font-size: 9px; padding: 10px 12px; }
  .btn.small { font-size: 7px; padding: 7px 7px; }

  .arena { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .col { display: contents; } /* both sides become one column */
  .log-strip { flex-direction: column; gap: 8px; }
  .center { display: contents; } /* its parts are placed one by one: */
  .status { order: -6; }       /* "Blue: choose one of your heroes" right under the top buttons */
  .side { order: -5; }         /* the enemy's roster */
  .tabletop { order: -4; }     /* the board */
  .actions { order: -3; }
  .side.near { order: -2; }    /* your roster under the board */
  .side { padding: 8px; min-width: 0; }
  .side-head { margin-bottom: 6px; }
  .mark { width: 30px; height: 30px; font-size: 12px; }
  .pname { font-size: 10px; }
  .side-sub { font-size: 13px; margin-bottom: 6px; }
  .roster { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .class-card, .unit-row {
    flex: 0 0 auto;
    width: 88px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    text-align: center;
    scroll-snap-align: start;
  }
  /* every card the same: icon, name + tier on one line, status, HP bar, HP */
  .class-card, .unit-row { align-items: center; justify-content: flex-start; }
  .cc-body { width: 100%; align-items: stretch; }
  .cc-name { font-size: 12px; flex-direction: column; align-items: stretch; gap: 1px; }
  .cc-title { justify-content: center; gap: 3px; height: 17px; }
  .cc-title .tier-badge { transform: scale(.85); }
  .ur-note { display: block; height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 15px; }
  .cc-stats { display: none; }
  .cc-count { font-size: 12px; line-height: 16px; height: 16px; }
  .cc-count .shield-num { margin-left: 2px; }
  .mini-hp { width: 100%; }

  .status { font-size: 14px; padding: 4px 10px; height: 58px; } /* fixed height: the board must not move */
  .sprite.inline { width: 24px; height: 24px; vertical-align: -6px; }
  .tabletop { padding: 22px 0 26px; }
  .board { gap: 8px; width: 100%; max-width: 480px; }
  .cell { border-width: 2px; }
  .cell .content { padding: 14px 2px 2px; }
  .u-name, .u-cd { display: none; }
  .u-icon { width: 48px; height: 48px; }
  .u-atk { font-size: 6px; padding: 2px 3px; }
  .u-badges { font-size: 11px; }
  .hp { height: 10px; width: 90%; }
  .hp span { font-size: 5px; }
  .float { font-size: 12px; }
  .float.crit { font-size: 15px; }
  .cell.reach-enemy::after { font-size: 6px; top: -10px; }

  .actions { min-height: 0; gap: 6px; }
  .act { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 8px; padding: 8px 6px; }
  .act.ghost { flex: 0 0 auto; }
  .hint { font-size: 13px; }

  .panel { padding: 10px; }
  .info-body { flex-direction: column; gap: 8px; }
  .range-set { flex-direction: row; }
  .info-text { font-size: 14px; }
  #log { max-height: 140px; font-size: 14px; }

  /* Draft: small cards; the tapped champion's details stay pinned at the bottom */
  .draft { gap: 10px; }
  .draft-head { top: 0; padding: 10px; gap: 8px; }
  .draft-head h2 { font-size: 10px; margin: 0; }
  .draft-head p { display: none; }
  .draft-bar { width: 100%; justify-content: space-between; gap: 6px; }
  .draft-team { gap: 3px; }
  .slot { width: 34px; height: 34px; }
  .draft-grid { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .draft-detail {
    display: block;
    order: 2;
    position: sticky;
    bottom: 0;
    z-index: 6;
    max-height: 42vh;
    overflow-y: auto;
  }

  .menu-card, .modal { padding: 18px 14px; }
  .logo { font-size: 16px; }
  .menu-grid { grid-template-columns: repeat(3, 44px); }
  .menu-grid span { width: 44px; height: 44px; padding: 4px; }
  .rules-classes { grid-template-columns: 1fr; }
  .modal h2 { font-size: 11px; }
  .go-title { font-size: 15px; }
  .toast { font-size: 14px; padding: 10px 12px; top: 8px; }

  .coin-pill { font-size: 10px; padding: 5px 10px; }
  .shop-chests { gap: 6px; margin-bottom: 18px; }
  .chest-card { padding: 8px 4px; gap: 4px; }
  .chest-art { width: 60px; height: 60px; }
  .chest-name { font-size: 7px; }
  .chest-text { font-size: 12px; min-height: 30px; }
  .chest-card .btn { padding: 8px 6px; font-size: 8px; gap: 4px; }
  .collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .coll-icon { width: 44px; height: 44px; }
  .coll-name { font-size: 6px; overflow-wrap: anywhere; }
  .coll-sub { font-size: 11px; }
  .chest-glow { width: 160px; height: 140px; }
  .chest-big { width: 128px; height: 128px; }
  .chest-title { font-size: 12px; }
  .chest-hint { font-size: 8px; }
  .chest-cards { gap: 12px 8px; }
  .loot-card { width: 96px; padding: 12px 4px 8px; }
  .loot-icon { width: 56px; height: 56px; }
  .loot-name { font-size: 7px; }
  .loot-line { font-size: 11px; }
  .u-top .tier-badge { min-width: 14px; height: 13px; font-size: 5px; padding: 0 1px; }
  .reward { font-size: 11px; }

  .turn-timer { padding: 4px 6px; font-size: 8px; gap: 5px; }
  .tt-secs { min-width: 38px; }
  .tt-bar { width: 44px; height: 8px; }
  .draft-head { position: static; }
  .draft-top { grid-template-columns: 1fr 1fr; gap: 8px; }
  .draft-info { grid-column: 1 / -1; order: -1; }
  .draft-team-box { padding: 5px; gap: 4px; min-width: 0; }
  .dtb-head { font-size: 8px; gap: 5px; }
  .dtb-head small { display: none; }
  .dtb-head .mark { width: 20px; height: 20px; font-size: 8px; }
  .draft-team { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
  .draft-team .slot { width: auto; height: auto; aspect-ratio: 1; border-width: 2px; padding: 1px; }
  .draft-bans { margin-top: 6px; }
  .ban-slot { width: 30px; height: 30px; }
  .draft-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .chip { font-size: 7px; padding: 6px 7px; }
  .draft-search { flex: 1; width: auto; font-size: 14px; padding: 6px 8px; }
  .draft-buttons { margin-left: 0; gap: 5px; }
  .draft-buttons .btn.primary { font-size: 8px; padding: 9px 8px; }
  .coin-stage { width: 104px; height: 104px; }
  .coin-result { font-size: 12px; }
  .coach { padding: 10px 12px 12px; bottom: 8px; }
  .coach.top { top: 8px; }
  .coach-text { font-size: 14px; }
  .level-btn { padding: 10px; }
  .level-btn b { font-size: 10px; }
  .level-btn span { font-size: 13px; }
  .level-btn em { font-size: 9px; }
  .toggle { font-size: 13px; padding: 5px 7px; }
  .sound-row { grid-template-columns: minmax(0, 1fr) 46px 40px; gap: 6px 8px; padding: 8px; }
  .sound-row .sr-range { grid-column: 1 / -1; grid-row: 2; }
  .draft-detail .info-empty { min-height: 0; padding: 2px 0; font-size: 13px; }
  body.replaying #app { padding-bottom: var(--rp-h, 280px); }
  .draft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .champ-tile { padding: 8px 2px 6px; gap: 4px; border-width: 3px; }
  .ct-icon { width: 46px; height: 46px; border-width: 2px; }
  .ct-name { font-size: 6px; min-height: 16px; }
  .ct-ban { font-size: 6px; padding: 2px 4px; border-width: 2px; }
  .ct-picks i { width: 16px; height: 16px; font-size: 6px; }
  .menu-row { gap: 8px; }
  .you-badge { font-size: 7px; padding: 3px 6px; }
  .you-badge .mark { width: 18px; height: 18px; font-size: 7px; }
  .online-cols { grid-template-columns: 1fr; gap: 10px; }
  .online-code { font-size: 18px; }
  .profile-head { gap: 10px; }
  .profile-avatar { width: 48px; height: 48px; }
  .profile-name { font-size: 10px; }
  .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-tile b { font-size: 9px; }
  .profile-cols { grid-template-columns: 1fr; gap: 6px; }
  .pc-row { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .pc-row .pc-num:nth-child(3) { display: none; } /* games count: win % and K/D/A are enough on phones */
  .pc-icon { width: 28px; height: 28px; }
  .mh-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 8px; }
  .mh-teams { grid-column: 1 / -1; grid-row: 2; }
  .mh-row .btn { grid-column: 1 / -1; }
  .mh-unit { width: 28px; height: 28px; }
  .replay { padding: 8px; }
  .rp-top { gap: 8px; }
  .rp-btn { min-width: 34px; height: 32px; font-size: 13px; }
  .rp-info { gap: 10px; font-size: 7px; order: 3; flex-basis: 100%; }
  .rp-caption { font-size: 13px; min-height: 34px; margin: 6px 0 4px; }
  .rp-track { margin: 0 14px; }
  .sr-label small { font-size: 12px; }
}

@media (max-width: 700px) {
  .class-card, .unit-row { width: 54px; padding: 5px 4px; gap: 0; }
  .class-card .cc-body, .class-card .cc-count, .unit-row .cc-body, .unit-row .cc-count { display: none; }
  .class-card .cc-icon, .unit-row .cc-icon { width: 40px; height: 40px; }
  .cc-info { top: -5px; right: -5px; width: 16px; height: 16px; font-size: 11px; }
  .roster { padding-top: 6px; }
}

@media (max-width: 380px) {
  .u-icon { width: 40px; height: 40px; }
  .slot { width: 30px; height: 30px; }
}

/* ---------- Chronicle colors (logHtml in i18n.js) ---------- */
#log .lg-u { font-weight: 700; }
#log .lg-u.p0 { color: var(--blue-dark); }
#log .lg-u.p1 { color: var(--red-dark); }
#log .lg-num { font-family: var(--pixel); font-size: 11px; font-weight: normal; padding: 0 2px; }
#log .lg-num.atk { color: #d0261a; }
#log .lg-num.spell { color: #c0249a; }
#log .lg-num.heal { color: #2f8a3b; }
#log .lg-crit {
  display: inline-block; font-family: var(--pixel); font-size: 9px; color: #fff3a0; padding: 1px 4px; margin-left: 2px;
  background: linear-gradient(#ff9a3c, #d0261a); border: 2px solid var(--ink); transform: rotate(-3deg); animation: lg-crit 1s steps(2) infinite;
}
@keyframes lg-crit { 50% { transform: rotate(-3deg) scale(1.08); filter: brightness(1.2); } }
#log .lg-miss { /* a swing that cuts through air: skewed, faded wind trail behind it */
  display: inline-block; position: relative; margin-left: 4px; padding: 1px 6px 1px 18px;
  font-family: var(--pixel); font-size: 9px; letter-spacing: 1px; color: #5a6e86; font-style: normal; text-transform: uppercase;
  background: linear-gradient(90deg, transparent, rgba(200, 220, 240, .9) 35%, #e8f2fb); border-right: 3px solid #8aa8c8;
  transform: skewX(-14deg); text-shadow: -3px 0 rgba(90, 110, 134, .35), -7px 0 rgba(90, 110, 134, .15);
  animation: lg-miss 1.6s ease-in-out infinite;
}
#log .lg-miss::before { content: '💨'; position: absolute; left: 1px; top: 50%; transform: translateY(-50%) skewX(14deg); font-size: 11px; text-shadow: none; }
@keyframes lg-miss { 50% { transform: skewX(-14deg) translateX(3px); opacity: .8; } }
#log .lg-ab { font-weight: 700; color: #5a2a90; }
#log .lg-ab.ult { color: #b4501a; }
#log li.lg-ult .lg-ab.ult { color: #6a1a00; }
.rt-lines .lg-ab { font-weight: 700; color: #5a2a90; }
#log li.lg-ult .lg-u.p0, #log li.lg-ult .lg-u.p1 { text-shadow: 0 0 4px #fff6c8; }
#log li.lg-warn .lg-u.p0 { color: #8fb8ff; }
#log li.lg-warn .lg-u.p1 { color: #ff8a80; }

/* ---------- Raise Dead: who rises (renderRaiseBox in ui.js) ---------- */
.raise-box {
  position: absolute; left: 50%; top: 50%; z-index: 20; transform: translate(-50%, -50%);
  width: min(520px, 96%); padding: 10px 12px 12px; color: #efe6ff;
  background: radial-gradient(circle at 50% 0, #4a2a80, #1e1430 70%); border: 3px solid #b98cff;
  box-shadow: 0 0 0 3px #1b1424, 0 0 30px 8px rgba(160, 100, 255, .55), 6px 6px 0 6px rgba(10, 5, 20, .5);
  animation: rb-in .25s steps(4);
}
@keyframes rb-in { from { opacity: 0; transform: translate(-50%, -40%); } }
.rb-head { display: flex; align-items: center; gap: 8px; }
.rb-head b { flex: 1; font-family: var(--pixel); font-size: 10px; font-weight: normal; color: #d8c4ff; text-shadow: 0 0 6px #8f55e0; }
.rb-ico { font-size: 20px; animation: rb-float 1.6s ease-in-out infinite; }
@keyframes rb-float { 50% { transform: translateY(-3px); } }
.rb-close { width: 24px; height: 24px; color: #efe6ff; background: #3a2458; border: 2px solid #b98cff; cursor: pointer; }
.rb-text { margin: 4px 0 8px; font-size: 13px; color: #c8b8e8; }
.rb-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rb-card {
  position: relative; display: grid; justify-items: center; gap: 3px; width: 112px; padding: 8px 6px 6px; cursor: pointer;
  color: #efe6ff; background: linear-gradient(#3a2458, #241838); border: 3px solid #7a4ae0; box-shadow: inset 0 0 12px rgba(124, 255, 138, .12);
  transition: transform .08s steps(2);
}
.rb-card:hover:not(:disabled) { transform: translateY(-3px); border-color: #7cff8a; box-shadow: 0 0 14px 3px rgba(124, 255, 138, .5), inset 0 0 14px rgba(124, 255, 138, .25); }
.rb-card.taken { cursor: not-allowed; opacity: .45; filter: grayscale(.7); }
.rb-sprite { width: 44px; height: 44px; filter: grayscale(.5) brightness(.85) drop-shadow(0 0 4px #b98cff); animation: rb-ghost 2s ease-in-out infinite; }
.rb-card:hover:not(:disabled) .rb-sprite { filter: drop-shadow(0 0 6px #7cff8a); }
@keyframes rb-ghost { 50% { transform: translateY(-3px); opacity: .8; } }
.rb-sprite .sprite { width: 100%; height: 100%; }
.rb-name { font-weight: 700; font-size: 13px; white-space: nowrap; }
.rb-hp { font-family: var(--pixel); font-size: 8px; display: flex; align-items: center; gap: 2px; }
.rb-hp .ico { width: 14px; height: 14px; margin-right: 1px; }
.rb-map { display: grid; grid-template-columns: repeat(3, 8px); gap: 2px; }
.rb-map i { width: 8px; height: 8px; background: #3a2c50; border: 1px solid #5a4a7a; }
.rb-map i.full { background: #6a5a8a; }
.rb-map i.here { background: #7cff8a; border-color: #fff; box-shadow: 0 0 4px #7cff8a; }
.rb-card small { font-size: 11px; color: #a8ffb0; }
.rb-card small.near { color: #ffd36b; }
.rb-map i.fell { background: #8a3a3a; border-color: #ff8a80; }
.cell.raise-hover { outline: 4px solid #7cff8a; outline-offset: -4px; box-shadow: 0 0 18px 4px rgba(124, 255, 138, .6); }
/* a hero rising */
.raise-burst { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.rbu-col { position: absolute; left: 22%; right: 22%; bottom: 8%; top: -60%; background: linear-gradient(transparent, rgba(185, 140, 255, .7), rgba(124, 255, 138, .85));
  animation: rbu-col var(--dur, 1.6s) steps(10) forwards; }
@keyframes rbu-col { 0% { transform: scaleY(0); transform-origin: bottom; opacity: 1; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.rbu-ring { position: absolute; left: 50%; bottom: 10%; width: 70%; height: 22%; transform: translateX(-50%); border: 3px solid #7cff8a; border-radius: 50%;
  box-shadow: 0 0 10px #7cff8a; animation: rbu-ring var(--dur, 1.6s) steps(8) forwards; }
@keyframes rbu-ring { from { transform: translateX(-50%) scale(.3); opacity: 1; } to { transform: translateX(-50%) scale(1.5); opacity: 0; } }
.rbu-text { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-family: var(--pixel); font-size: 13px; color: #d8ffd8; white-space: nowrap;
  text-shadow: 2px 2px 0 #2a1a48, -2px -2px 0 #2a1a48, 2px -2px 0 #2a1a48, -2px 2px 0 #2a1a48, 0 0 10px #7cff8a; animation: miss-pop var(--dur, 1.6s) steps(9) forwards; }

/* ---------- Match grade (matchGrade in progression.js) ---------- */
.grade-badge {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 4px;
  font-family: var(--pixel); font-size: 11px; color: #fff; border: 3px solid var(--ink);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .45); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), 2px 2px 0 rgba(20, 10, 4, .35);
}
.grade-badge.g-S-plus { background: linear-gradient(135deg, #ff6ad5, #ffd36b 35%, #7cff8a 65%, #6ab8ff); animation: grade-shine 1.2s steps(3) infinite; }
.grade-badge.g-S { background: linear-gradient(#ffe48a, #e8a020); color: #4a2a08; text-shadow: 1px 1px 0 #fff3c4; }
.grade-badge.g-A { background: #3f9e3a; }
.grade-badge.g-B { background: #3f74e0; }
.grade-badge.g-C { background: #2aa8a0; }
.grade-badge.g-D { background: #d4881a; }
.grade-badge.g-F { background: #b3302f; }
@keyframes grade-shine { 50% { filter: brightness(1.25) saturate(1.3); } }
.grade-badge.big { min-width: 64px; height: 56px; font-size: 24px; border-width: 4px; }
.grade-badge.p0 { outline: 2px solid var(--blue); }
.grade-badge.p1 { outline: 2px solid var(--red); }
.grade-box { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 10px; }
.gb-one { display: flex; align-items: center; gap: 12px; padding: 8px 10px; text-align: left; background: rgba(255, 255, 255, .45); border: 3px solid var(--parch-3); }
.gb-one.p0 { border-left: 6px solid var(--blue); }
.gb-one.p1 { border-left: 6px solid var(--red); }
.gb-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gb-info > b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.gb-info small { font-size: 13px; color: var(--ink-soft); }
.gb-parts { display: flex; flex-wrap: wrap; gap: 4px; }
.gb-part { padding: 1px 5px; font-size: 12px; background: var(--parch-2); border: 2px solid var(--parch-3); }
.gb-part b { color: #2f7d3b; }

/* ---------- Rich bubbles: replay timeline, mastery cards ---------- */
.rt-tip { width: 250px; white-space: normal; border-left: 6px solid var(--ink-soft); }
.rt-tip.p0 { border-left-color: var(--blue); }
.rt-tip.p1 { border-left-color: var(--red); }
.rt-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--parch-2); border-bottom: 2px solid var(--parch-3); font-size: 13px; }
.rt-head b { font-family: var(--pixel); font-size: 8px; font-weight: normal; }
.rt-kind { display: grid; place-items: center; width: 24px; height: 24px; font-size: 14px; background: #fff6dc; border: 2px solid var(--ink); }
.rt-tip.k-attack .rt-kind { background: #ffd8d0; }
.rt-tip.k-skill .rt-kind { background: #ead8ff; }
.rt-tip.k-ult .rt-kind { background: linear-gradient(#ffd36b, #ff9a3c); }
.rt-tip.k-move .rt-kind { background: #d8f8d0; }
.rt-turn { margin-left: auto; font-family: var(--pixel); font-size: 7px; color: var(--ink-soft); }
.rt-fighters { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; }
.rt-fighters .sprite { width: 40px; height: 40px; padding: 2px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--ink); }
.rt-arrow { font-size: 16px; }
.rt-auto { font-size: 26px; }
.rt-lines { list-style: none; margin: 0; padding: 4px 8px 6px; font-size: 13px; line-height: 1.35; border-top: 2px dashed var(--parch-3); }
.rt-lines li + li { margin-top: 2px; }
.rt-lines .lg-u { font-weight: 700; }
.rt-lines .lg-u.p0, .rt-head .lg-u.p0 { color: var(--blue-dark); }
.rt-lines .lg-u.p1, .rt-head .lg-u.p1 { color: var(--red-dark); }
.rt-lines .lg-num { font-family: var(--pixel); font-size: 9px; }
.rt-lines .lg-num.atk { color: #d0261a; }
.rt-lines .lg-num.spell { color: #c0249a; }
.rt-lines .lg-num.heal { color: #2f8a3b; }
.rt-lines .lg-crit { color: #d0261a; font-weight: 700; }
.rt-lines .lg-miss { color: #3a6a9a; font-style: italic; }
.rt-kills { display: flex; align-items: center; gap: 4px; padding: 4px 8px 6px; font-size: 13px; background: #f3d8d0; }
.rt-kills .sprite { width: 26px; height: 26px; }
.mt-tip { width: 230px; padding: 8px 10px; white-space: normal; border-left: 6px solid #8b4fc4; }
.mt-tip.legend { border-left-color: #7f74c4; background: linear-gradient(125deg, #f4f0ff 0%, #ffd8f1 16%, #fff3c8 32%, #d2fff0 48%, #d3e9ff 64%, #e8d6ff 80%, #ffd8f1 100%); }
.mt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mt-head .sprite { width: 44px; height: 44px; padding: 2px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--ink); flex-shrink: 0; }
.mt-head b { display: block; font-family: var(--pixel); font-size: 9px; font-weight: normal; margin-bottom: 3px; }
.mt-head small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.mt-next, .mt-games { margin-top: 5px; font-size: 13px; }
.mt-next { font-weight: 700; color: #6a3aa0; }

/* ---------- The grade: game over and bubbles ---------- */
.go-grade-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.go-grade-row .survivors { margin-top: 0; }
.go-grades { display: flex; flex-direction: column; gap: 6px; }
.grade-badge[data-tip-html] { cursor: var(--cur-look), help; }
.grade-badge.big { animation: grade-in .5s steps(5); }
.grade-badge.big.g-S-plus { animation: grade-in .5s steps(5), grade-shine 1.2s steps(3) .5s infinite; }
@keyframes grade-in { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.grade-badge.mid { min-width: 42px; height: 38px; font-size: 16px; }
.gt-tip { width: 230px; padding: 8px 10px; white-space: normal; }
.gt-head { display: flex; align-items: center; gap: 8px; }
.gt-head b { display: block; font-family: var(--pixel); font-size: 9px; font-weight: normal; margin-bottom: 2px; }
.gt-head small { font-size: 13px; color: var(--ink-soft); }
.gt-bar { height: 10px; margin: 8px 0 6px; background: var(--wood-1); border: 2px solid var(--ink); }
.gt-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d4881a, #f2c14e, #7cff8a); }
.gt-parts { display: flex; flex-direction: column; gap: 2px; }
.gt-part { display: flex; justify-content: space-between; padding: 1px 4px; font-size: 13px; border-bottom: 1px dashed var(--parch-3); }
.gt-part b { font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #2f7d3b; }
.gt-part.none { opacity: .45; }
.gt-part.none b { color: var(--ink-soft); }

/* ---------- Stats: the game just played (game over > Stats) ---------- */
.stats-btn { color: #fff; background: linear-gradient(#5b8de8, #2f5fc0); }
#stats { z-index: 55; } /* over the game over */
.modal.stats-modal { max-width: 1020px; width: 100%; display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: hidden; }
.stats-body { overflow-y: auto; min-height: 0; padding: 2px 6px 4px 2px; }
.stats-modal .modal-back { flex-shrink: 0; margin-top: 14px; }
.st-ico { width: 14px; height: 14px; image-rendering: pixelated; vertical-align: -2px; flex-shrink: 0; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; background: linear-gradient(90deg, rgba(242, 193, 78, .35), transparent 70%), var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .25); }
.st-result { font-family: var(--pixel); font-size: 12px; line-height: 1.5; }
.st-date { display: block; font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.st-left { color: var(--ink-soft); letter-spacing: 1.5px; }
.st-win { color: #2f7d3b; }
.st-loss { color: var(--red-dark); }
.st-partial { margin: -6px 0 14px; padding: 6px 10px; font-size: 13px; color: var(--ink-soft); background: rgba(42, 28, 18, .07); border: 2px dashed rgba(42, 28, 18, .25); }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-weight: 700; background: rgba(255, 246, 220, .7); border: 2px solid var(--ink); }
.st-sec + .st-sec { margin-top: 18px; }
.st-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--pixel); font-size: 10px; letter-spacing: .5px; color: var(--ink); }
.st-sec h3::after { content: ''; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 10px); opacity: .6; }
/* the awards */
.st-awards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.st-award { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; text-align: center; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .25); position: relative; }
.st-award::before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; height: 6px; background: var(--ink-soft); border: 3px solid var(--ink); border-bottom: 0; }
.st-award.p0::before { background: var(--blue); }
.st-award.p1::before { background: var(--red); }
.st-award.none { opacity: .55; }
.st-award-top { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; margin-top: 4px; font-size: 12px; font-weight: 700; line-height: 1.1; }
.st-award-num { font-family: var(--pixel); font-size: 14px; }
.st-award.p0 .st-award-num { color: var(--blue-dark); }
.st-award.p1 .st-award-num { color: var(--red-dark); }
.st-award small { color: var(--ink-soft); font-size: 12px; }
.st-pic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; background: #f3e6c4; border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .25); }
.st-pic img { width: 40px; height: 40px; image-rendering: pixelated; }
.st-pic.p0 { background: var(--blue-soft); }
.st-pic.p1 { background: var(--red-soft); }
.st-pic.dead img { opacity: .55; }
.st-pic.empty { font-family: var(--pixel); color: var(--ink-soft); }
.st-pic .st-tier { position: absolute; right: -6px; bottom: -6px; transform: scale(.85); }
/* team against team */
.st-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.st-team { font-family: var(--pixel); font-size: 10px; }
.st-team.p1 { text-align: right; }
.st-vs-mark { padding: 3px 8px; font-family: var(--pixel); font-size: 8px; color: #fff3c4; background: linear-gradient(#a87a48, #6a4426); border: 2px solid var(--ink); transform: rotate(-6deg); }
.st-tugs { display: grid; gap: 6px; padding: 10px 12px; background: rgba(42, 28, 18, .07); border: 2px solid rgba(42, 28, 18, .18); }
.st-tug { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: end; gap: 10px; }
.st-tug.zero { opacity: .45; }
.st-n { font-family: var(--pixel); font-size: 11px; padding-bottom: 1px; }
.st-n.p1-text { text-align: right; }
.st-n.lead { font-size: 13px; }
.st-tug-mid { display: flex; flex-direction: column; gap: 3px; }
.st-tug-label { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.st-tug-bar { display: flex; height: 14px; border: 2px solid var(--ink); background: #b9a77c; box-shadow: 2px 2px 0 rgba(20, 10, 4, .2); }
.st-tug-bar i { display: block; height: 100%; transition: width .4s steps(8); }
.st-tug-bar i.p0 { background: repeating-linear-gradient(90deg, var(--blue) 0 6px, #4f84ec 6px 12px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3); }
.st-tug-bar i.p1 { background: repeating-linear-gradient(90deg, var(--red) 0 6px, #dc5a50 6px 12px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); }
.st-tug-bar i + i { border-left: 2px solid var(--ink); }
.st-tug-bar i[style="width:0%"], .st-tug-bar i[style="width:100%"] + i { border-left: 0; }
/* every hero */
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.st-key { display: inline-flex; align-items: center; gap: 5px; }
.st-key i { width: 14px; height: 12px; border: 2px solid var(--ink); }
.st-key.basic i, .st-dmgbar i.basic { background: #e8a33c; }
.st-key.skill i, .st-dmgbar i.skill { background: #8f55e0; }
.st-key.ult i, .st-dmgbar i.ult { background: #e0466e; }
.st-key.other i, .st-dmgbar i.other { background: #3f9ea0; }
.st-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-side { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 3px solid var(--ink); background: var(--parch-2); box-shadow: inset 0 0 0 2px #fff6dc; }
.st-side.p0 { border-top: 6px solid var(--blue); }
.st-side.p1 { border-top: 6px solid var(--red); }
.st-side-head { font-family: var(--pixel); font-size: 10px; padding: 2px 2px 4px; }
.st-hero { display: flex; gap: 10px; align-items: center; padding: 6px 8px; background: rgba(255, 246, 220, .55); border: 2px solid rgba(42, 28, 18, .25); }
.st-hero.dead { background: rgba(42, 28, 18, .06); }
.st-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-hero-name { display: flex; align-items: baseline; gap: 8px; }
.st-hero-name b:first-child { font-size: 15px; }
.st-kda { font-weight: 700; color: var(--ink-soft); }
.st-hero-dmg { margin-left: auto; font-family: var(--pixel); font-size: 11px; }
.st-dmgbar { display: flex; height: 16px; background: repeating-linear-gradient(135deg, rgba(255, 246, 220, .75) 0 4px, rgba(42, 28, 18, .07) 4px 8px); border: 2px solid var(--ink); overflow: hidden; }
.st-dmgbar i { display: flex; align-items: center; justify-content: center; height: 100%; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); overflow: hidden; white-space: nowrap; }
.st-dmgbar i + i { border-left: 2px solid var(--ink); }
.st-dmgbar i:last-child { border-right: 2px solid var(--ink); }
.st-dmgbar i:last-child[style="width:100%"] { border-right: 0; }
.st-minis { display: flex; flex-wrap: wrap; gap: 4px; }
.st-mini { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 12px; font-weight: 700; background: rgba(255, 246, 220, .8); border: 2px solid rgba(42, 28, 18, .3); }
.st-mini.zero { opacity: .45; }
@media (max-width: 900px) {
  .st-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-sides { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .st-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-tug { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; }
  .st-n { font-size: 9px; }
  .st-n.lead { font-size: 10px; }
  .modal.stats-modal { padding: 18px 12px; }
}

/* ---------- Match history rows ---------- */
.mh-row {
  grid-template-columns: auto 124px minmax(0, 1fr) 150px auto; gap: 12px; padding: 10px 12px 10px 10px;
  border-width: 3px; border-left-width: 3px;
  background:
    linear-gradient(90deg, var(--mh-tint, transparent), transparent 55%),
    var(--tile-parchment) 0 0 / 64px 64px, var(--parch-2);
  box-shadow: inset 0 0 0 2px #fff6dc, 4px 4px 0 rgba(20, 10, 4, .25);
}
.mh-row.win { --mh-tint: rgba(95, 207, 110, .32); }
.mh-row.loss { --mh-tint: rgba(224, 69, 60, .26); }
.mh-row.draw { --mh-tint: rgba(150, 140, 120, .25); }
.mh-row.p0 { --mh-tint: rgba(79, 140, 255, .28); }
.mh-row.p1 { --mh-tint: rgba(255, 92, 92, .26); }
.mh-row:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #fff6dc, 5px 6px 0 rgba(20, 10, 4, .3); }
.mh-row::after { /* the result ribbon on the left edge */
  content: ''; position: absolute; left: -3px; top: -3px; bottom: -3px; width: 7px; background: var(--ink-soft); border: 3px solid var(--ink); border-right: 0;
}
.mh-row.win::after { background: var(--green); }
.mh-row.loss::after { background: var(--red); }
.mh-row.p0::after { background: var(--blue); }
.mh-row.p1::after { background: var(--red); }
.mh-stats-btn { color: #fff; background: linear-gradient(#5b8de8, #2f5fc0); }
.md-head .mh-stats-btn { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
/* a game left before its end: greyed out, LEFT */
.mh-row.left { --mh-tint: rgba(110, 104, 96, .3); filter: grayscale(1); opacity: .72; }
.mh-row.left:hover, .mh-row.left.open { opacity: .9; }
.mh-row.left .mh-result b { color: var(--ink-soft); letter-spacing: 1.5px; }
.mh-row.left + .mh-detail { filter: grayscale(.85); }
.mh-left-badge { display: grid; place-items: center; width: 40px; height: 40px; font-size: 20px; background: #b9b0a2; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #dcd5c8, 2px 2px 0 rgba(20, 10, 4, .3); }
.mh-grade { display: flex; flex-direction: column; gap: 4px; align-items: center; padding-left: 6px; }
.mh-result b { font-size: 11px; letter-spacing: .5px; }
.mh-result small { line-height: 1.3; }
.mh-teams { gap: 6px; padding: 5px 6px; flex-wrap: nowrap; justify-content: center; background: rgba(42, 28, 18, .08); border: 2px solid rgba(42, 28, 18, .15); }
.mh-vs { padding: 3px 6px; font-family: var(--pixel); font-size: 8px; color: #fff3c4; background: linear-gradient(#a87a48, #6a4426); border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .3); transform: rotate(-6deg); }
.mh-unit { width: 30px; height: 30px; box-shadow: 2px 2px 0 rgba(20, 10, 4, .25); }
.mh-side { gap: 2px; flex-wrap: nowrap; }
.mh-stats b { font-size: 11px; }
.mh-stats small { line-height: 1.5; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 4px; }
.mh-stats small .coin-icon { width: 12px; height: 12px; }
@media (max-width: 700px) {
  .mh-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mh-grade { grid-row: 1 / span 2; }
  .mh-teams { grid-column: 2 / -1; grid-row: 2; }
  .mh-row .btn { grid-column: 1 / -1; }
}

/* ---------- The action bar: square icon buttons on one line (renderActions in ui.js) ---------- */
.act-bar {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(#5a3a22, #3a2416); border: 4px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255, 220, 160, .25), inset -2px -2px 0 rgba(0, 0, 0, .35), 0 4px 0 rgba(20, 10, 4, .45);
}
.act.sq {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; min-width: 0; padding: 0; gap: 0; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff6dc, var(--parch) 60%, var(--parch-3)); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 rgba(0, 0, 0, .15), 0 3px 0 var(--wood-0);
}
.act.sq:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 rgba(0, 0, 0, .15), 0 5px 0 var(--wood-0), 0 0 10px rgba(255, 220, 120, .6); }
.act.sq:active:not(:disabled) { transform: translateY(2px); }
.act.sq:disabled { opacity: .45; filter: grayscale(.6); }
.act.sq .ab-big .ico { width: 30px; height: 30px; margin: 0; }
.act.sq .ab-icon { width: 38px; height: 38px; padding: 3px; position: relative; z-index: 1; }
.act.sq .ab-emoji { font-size: 24px; line-height: 1; position: relative; z-index: 1; }
.act.sq.attack.on { background: radial-gradient(circle at 35% 30%, #ffe8e0, #f7a898); border-color: var(--red-dark); box-shadow: 0 0 0 3px var(--red), 0 3px 0 var(--wood-0); }
.act.sq.skill.on { background: radial-gradient(circle at 35% 30%, #f4ecff, #c8a8f8); border-color: #4a2a80; box-shadow: 0 0 0 3px var(--purple, #8f55e0), 0 3px 0 var(--wood-0); }
.act.sq.ult { border-color: #d4541e; }
.act.sq.ult.on { background: radial-gradient(circle at 35% 30%, #fff0d8, #ffb878); box-shadow: 0 0 0 3px #ff8a1e, 0 3px 0 var(--wood-0); }
.act.sq.ult.full:not(:disabled) { box-shadow: 0 0 0 3px #ff8a1e, 0 0 16px 4px rgba(255, 150, 40, .75), 0 3px 0 var(--wood-0); animation: ult-pulse 1s steps(2) infinite; }
.act-energy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; background: linear-gradient(rgba(255, 190, 70, .55), rgba(255, 120, 30, .75)); box-shadow: 0 -2px 0 #ffd36b; }
.act-badge {
  position: absolute; right: 1px; top: 1px; z-index: 2; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center;
  font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #fff; background: var(--red); border: 2px solid var(--ink);
}
.act-badge.cd { background: #5a4a7a; }
.act-sep { width: 3px; align-self: stretch; margin: 4px 2px; background: rgba(0, 0, 0, .35); box-shadow: 1px 0 0 rgba(255, 220, 160, .2); }
.act.sq.ghost { width: 40px; height: 40px; }
.act.sq.ghost .ab-emoji { font-size: 16px; color: var(--ink); }
@media (max-width: 700px) {
  .act-bar { gap: 5px; padding: 6px; }
  .act.sq { width: 44px; height: 44px; }
  .act.sq .ab-icon { width: 30px; height: 30px; }
  .act.sq.ghost { width: 34px; height: 34px; }
}

/* the actions' bubbles */
.at-tip { width: 250px; white-space: normal; border-left: 6px solid var(--ink-soft); }
.at-tip.a-attack { border-left-color: var(--red); }
.at-tip.a-skill { border-left-color: #8f55e0; }
.at-tip.a-ult { border-left-color: #ff8a1e; }
.at-tip.a-defend { border-left-color: var(--blue); }
.at-head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--parch-2); border-bottom: 2px solid var(--parch-3); }
.at-tip.a-ult .at-head { background: linear-gradient(90deg, #ffe0b0, var(--parch-2)); }
.at-tip.a-skill .at-head { background: linear-gradient(90deg, #ead8ff, var(--parch-2)); }
.at-tip.a-attack .at-head { background: linear-gradient(90deg, #ffd8d0, var(--parch-2)); }
.at-ico { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; font-size: 18px; background: #fff6dc; border: 2px solid var(--ink); }
.at-ico .ab-icon { width: 30px; height: 30px; padding: 2px; border: 0; }
.at-head b { display: block; font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.4; }
.at-head small { font-size: 12px; color: var(--ink-soft); }
.at-text { margin: 0; padding: 6px 9px 4px; font-size: 13px; line-height: 1.35; }
.at-energy { height: 8px; margin: 2px 9px 4px; background: var(--wood-1); border: 2px solid var(--ink); }
.at-energy i { display: block; height: 100%; background: linear-gradient(90deg, #ff8a1e, #ffd36b); }
.at-hint { margin: 2px 9px 8px; padding: 3px 6px; font-size: 12px; font-weight: 700; border: 2px solid; }
.at-hint.ok { color: #2f7d3b; background: #e3f3d6; border-color: #8fd27a; }
.at-hint.no { color: #8a2f26; background: #f8e1dc; border-color: #e8a89a; }

/* ---------- Game over: the coins' and the XP's bubbles ---------- */
.go-reward .reward[data-tip-html], .xp-hover[data-tip-html] { cursor: var(--cur-look), help; }
.go-reward .reward[data-tip-html]:hover { filter: brightness(1.15); box-shadow: 0 0 12px rgba(255, 211, 107, .6); }
.xp-hover { padding: 2px 0; }
.xp-hover:hover .xp-bar { box-shadow: 0 0 10px rgba(110, 180, 255, .7); }
.rw-tip { width: 260px; white-space: normal; border-left: 6px solid var(--gold); }
.rw-tip.xp { border-left-color: #3f8de0; }
.rw-head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: linear-gradient(90deg, #ffe9b0, var(--parch-2)); border-bottom: 2px solid var(--parch-3); }
.rw-tip.xp .rw-head { background: linear-gradient(90deg, #cfe6ff, var(--parch-2)); }
.rw-head b { font-family: var(--pixel); font-size: 10px; font-weight: normal; }
.rw-ico { display: grid; place-items: center; width: 26px; height: 26px; font-size: 15px; background: #fff6dc; border: 2px solid var(--ink); }
.rw-ico .coin-icon { width: 18px; height: 18px; }
.rw-rows { padding: 4px 9px; }
.rw-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 13px; border-bottom: 1px dashed var(--parch-3); }
.rw-row b { font-family: var(--pixel); font-size: 8px; font-weight: normal; white-space: nowrap; }
.rw-row b.plus { color: #2f7d3b; }
.rw-row b.minus { color: #b3302f; }
.rw-foot { padding: 5px 9px 7px; font-size: 13px; background: rgba(255, 255, 255, .45); border-top: 2px solid var(--parch-3); }

/* ---------- The XP bar: a soft liquid flowing in the blue ---------- */
.xp-bar.big { height: 22px; }
.xp-bar:not(.mastery) > i { position: relative; overflow: hidden; }
.xp-bar:not(.mastery) > i::before, .xp-bar:not(.mastery) > i::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.xp-bar:not(.mastery) > i::before { /* rolling waves */
  background:
    radial-gradient(ellipse 14px 6px at 50% 0, rgba(255, 255, 255, .45), transparent 70%) 0 0 / 28px 100% repeat-x,
    radial-gradient(ellipse 18px 9px at 50% 100%, rgba(20, 70, 160, .35), transparent 70%) 0 0 / 36px 100% repeat-x;
  animation: xp-flow 2.4s linear infinite;
}
.xp-bar:not(.mastery) > i::after { /* a soft shine sliding through, and small bubbles */
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%) -150% 0 / 60% 100% no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 1.5px, transparent 2px) 0 0 / 22px 14px;
  animation: xp-shine 3.2s ease-in-out infinite, xp-bubbles 4s linear infinite;
  opacity: .8;
}
@keyframes xp-flow { to { background-position: 28px 0, -36px 0; } }
@keyframes xp-shine { 0% { background-position: -150% 0, 0 0; } 60%, 100% { background-position: 250% 0, 0 0; } }
@keyframes xp-bubbles { to { background-position: -150% 0, 22px -28px; } }
/* the action bar's own framed icons (actIcon in ui.js): a color per action */
.ab-icon.attack { border-color: #d0463c; }
.ab-icon.defend { border-color: #3f74e0; }
.ab-icon.wait { border-color: #c8a050; }
.ab-icon.cancel { border-color: #8a7a6a; }
.act.sq.ghost .ab-icon { width: 28px; height: 28px; padding: 2px; }
/* the sudden death bubble (suddenTipAttrs in ui.js) */
#log li.lg-warn[data-tip-html] { cursor: var(--cur-look), help; }
.sd-tip { width: 270px; white-space: normal; color: #f3e6c4; background: linear-gradient(#3a1a20, #24121a); border-left: 6px solid #e0453c; }
.sd-head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: linear-gradient(90deg, #6a1a1a, #3a1a20); border-bottom: 2px solid #8f1f22; }
.sd-skull { display: grid; place-items: center; width: 30px; height: 30px; font-size: 18px; background: #1b0e12; border: 2px solid #e0453c; box-shadow: 0 0 8px rgba(224, 69, 60, .7); animation: sd-throb 1s steps(2) infinite; }
@keyframes sd-throb { 50% { box-shadow: 0 0 14px rgba(255, 90, 70, 1); } }
.sd-head b { display: block; font-family: var(--pixel); font-size: 9px; font-weight: normal; color: #ffd36b; }
.sd-head small { font-size: 12px; color: #ffb0a0; }
.sd-text { margin: 0; padding: 7px 9px 4px; font-size: 13px; line-height: 1.35; }
.sd-steps { display: flex; flex-direction: column; gap: 3px; padding: 4px 9px; }
.sd-step { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 140, 120, .25); }
.sd-step span { flex: 1; }
.sd-step b { font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #ff8a80; }
.sd-step.now { background: rgba(224, 69, 60, .35); border-color: #ff8a80; }
.sd-step em { font-style: normal; font-family: var(--pixel); font-size: 6px; padding: 2px 4px; color: #fff; background: #e0453c; }
.sd-why { margin: 4px 0 0; padding: 5px 9px 7px; font-size: 12px; color: #ffd36b; background: rgba(0, 0, 0, .25); border-top: 1px solid #5a2a2a; }

/* ---------- Aiming a skill / an Ultimate (markSkillPreview in ui.js) ---------- */
.cell.sk-hit::after, .cell.sk-help::after {
  content: 'HIT'; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 3px 5px; font-family: var(--pixel); font-size: 8px; color: #fff; background: #a03ad0; border: 2px solid var(--ink);
  box-shadow: 0 0 8px rgba(176, 90, 255, .8); animation: blink .5s steps(1) infinite;
}
.cell.sk-hit.sk-ult::after { background: linear-gradient(#ff9a3c, #d4541e); box-shadow: 0 0 8px rgba(255, 140, 40, .9); }
.cell.sk-help::after { content: '✚'; font-size: 10px; background: #3f9e3a; box-shadow: 0 0 8px rgba(124, 255, 138, .8); animation: none; }
.cell.sk-hit { box-shadow: inset 0 0 0 4px rgba(176, 90, 255, .8), inset 0 0 24px rgba(176, 90, 255, .45); }
.cell.sk-hit.sk-ult { box-shadow: inset 0 0 0 4px rgba(255, 140, 40, .9), inset 0 0 24px rgba(255, 140, 40, .45); }
.cell.sk-help { box-shadow: inset 0 0 0 4px rgba(124, 255, 138, .8), inset 0 0 24px rgba(124, 255, 138, .4); }
.cell.sk-focus { outline: 4px solid #fff3a0 !important; outline-offset: -4px; }
.cell.sk-friendly { box-shadow: inset 0 0 0 4px rgba(255, 190, 40, .9), inset 0 0 24px rgba(255, 190, 40, .4); }
.cell.sk-friendly::after {
  content: '⚠'; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 1px 5px; font-size: 11px; color: #3a1a00; background: #ffd34d; border: 2px solid var(--ink); animation: blink .5s steps(1) infinite;
}
/* a skill's range while aiming: tinted squares (purple; orange for an Ultimate) */
.cell.t-skill { box-shadow: inset 0 0 0 200px rgba(150, 80, 240, .28), inset 0 0 0 4px rgba(176, 90, 255, .9); animation: none; outline: none; }
.cell.t-skill.t-ult { box-shadow: inset 0 0 0 200px rgba(255, 140, 40, .28), inset 0 0 0 4px rgba(255, 140, 40, .95); }
.cell.t-skill:hover, .cell.t-skill.sk-focus { box-shadow: inset 0 0 0 200px rgba(150, 80, 240, .42), inset 0 0 0 4px #fff3a0; }
.cell.t-skill.t-ult:hover, .cell.t-skill.t-ult.sk-focus { box-shadow: inset 0 0 0 200px rgba(255, 140, 40, .42), inset 0 0 0 4px #fff3a0; }
.cell.t-skill.sk-hit { box-shadow: inset 0 0 0 200px rgba(150, 80, 240, .42), inset 0 0 0 4px rgba(176, 90, 255, 1), 0 0 14px rgba(176, 90, 255, .8); }
.cell.t-skill.t-ult.sk-hit, .cell.sk-hit.sk-ult { box-shadow: inset 0 0 0 200px rgba(255, 140, 40, .42), inset 0 0 0 4px rgba(255, 140, 40, 1), 0 0 14px rgba(255, 140, 40, .8); }
/* a basic attack's hit (red) */
.cell.sk-hit.sk-atk::after { background: #d0261a; box-shadow: 0 0 8px rgba(255, 70, 50, .9); }
.cell.sk-hit.sk-atk { box-shadow: inset 0 0 0 200px rgba(255, 60, 40, .25), inset 0 0 0 4px #ff4a3a, 0 0 14px rgba(255, 70, 50, .7); }

/* ---------- The Geomancer's rocks ---------- */
.cell.rock { background: var(--tile-slab) 0 0 / 48px 48px, #8a8478; }
.rock-pillar { position: relative; width: 48%; height: 48%; max-width: 72px; max-height: 72px; display: grid; place-items: center; cursor: var(--cur-look), help; animation: rock-in .35s steps(4); }
.rock-pillar .sprite { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(20, 10, 4, .4)); }
.rock-pillar.p0 .sprite { filter: drop-shadow(0 4px 0 rgba(20, 10, 4, .4)) drop-shadow(0 0 3px rgba(79, 140, 255, .7)); }
.rock-pillar.p1 .sprite { filter: drop-shadow(0 4px 0 rgba(20, 10, 4, .4)) drop-shadow(0 0 3px rgba(255, 92, 92, .7)); }
.rock-t {
  position: absolute; right: -10px; top: -8px; min-width: 18px; height: 18px; display: grid; place-items: center;
  font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #fff; background: #5a4a3a; border: 2px solid var(--ink);
}
@keyframes rock-in { from { transform: translateY(30%) scale(.6); opacity: 0; } }
.cell.sk-rock .fx::before {
  content: ''; position: absolute; inset: 26%; background: var(--rock-img) center / contain no-repeat; image-rendering: pixelated; opacity: .55;
  animation: blink .8s steps(1) infinite;
}
/* sudden death hitting heroes: a darker, red band */
#log li.lg-sdhit { color: #ffd8d0; background: linear-gradient(90deg, #4a1218, #2a1c24 70%); border-left-color: #ff4a3a; }
#log li.lg-warn .lg-num.atk { color: #ff8a80; }
/* Settings → Exit game */
.btn.danger { color: #fff; background: linear-gradient(#e0574c, #b3302f); border-color: var(--ink); min-width: 120px; }
/* the top bar's 🚪 Exit during a game, and once armed */
#btn-menu.exit { color: #fff; background: linear-gradient(#c0574c, #8f2f28); border-color: var(--ink); }
#btn-menu.exit.armed { background: linear-gradient(#ff8a3c, #d4541e); } /* clicked once, or its box is open */
#btn-menu.exit.sure { animation: blink .5s steps(1) infinite; }
.btn.danger.armed { background: linear-gradient(#ff8a3c, #d4541e); animation: blink .5s steps(1) infinite; }
.game-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-row.solo { grid-template-columns: 1fr; }

/* ================= Little Legends ================= */
.purse { display: flex; gap: 8px; justify-content: center; }
/* the same box as the coins (.coin-pill), with green numbers */
.gem-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--pixel); font-size: 12px; color: #9ff5c0;
  background: var(--wood-1); border: 3px solid var(--wood-0); box-shadow: inset 2px 2px 0 var(--wood-3), 3px 3px 0 rgba(20, 10, 4, .45); }
.gem-pill b { font-weight: normal; }
button.coin-pill, button.gem-pill { cursor: var(--cur-hand), pointer; transition: transform .08s steps(2); }
button.coin-pill:hover, button.gem-pill:hover { transform: translateY(-2px); filter: brightness(1.15); }
.tab-egg { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -4px; }
.gem-pill .ico, .btn .ico-gem, .gem-reward .ico { width: 18px; height: 18px; margin: 0; vertical-align: -4px; }
.ico-gem { background-image: var(--ico-gem); }
.gem-reward { color: #7fe8a8; margin-left: 8px; }

/* the legend's pictures */
.ll-img { image-rendering: pixelated; display: block; width: 100%; height: 100%; }
.ll-rar { display: inline-block; padding: 1px 5px; font-family: var(--pixel); font-size: 6px; color: #fff; border: 2px solid var(--ink); }
.ll-rar.r-common, .odds-pill.ll-r-common { background: #8a96a2; }
.ll-rar.r-rare, .odds-pill.ll-r-rare { background: #3f8de0; }
.ll-rar.r-epic, .odds-pill.ll-r-epic { background: #9a4ad8; }
.ll-rar.r-legendary, .odds-pill.ll-r-legendary { background: linear-gradient(#f6c94a, #d4881a); }
.ll-sp { font-size: 12px; color: var(--ink-soft); }

/* the grid of legends (shop, profile) */
.ll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ll-tile { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px; cursor: var(--cur-hand), pointer;
  background: radial-gradient(circle at 50% 30%, #fff6dc, var(--parch-2) 70%); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .25);
  transition: transform .08s steps(2); }
.ll-tile:hover { transform: translateY(-3px); }
.ll-tile-art { width: 64px; height: 64px; padding: 4px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.ll-tile b { font-size: 13px; }
.ll-tile.r-rare { border-color: #2a5aa0; box-shadow: 0 0 0 2px #3f8de0, 3px 3px 0 rgba(20, 10, 4, .25); }
.ll-tile.r-epic { border-color: #5a2a90; box-shadow: 0 0 0 2px #9a4ad8, 0 0 10px rgba(160, 80, 224, .5); }
.ll-tile.r-legendary { border-color: #b4701a; box-shadow: 0 0 0 2px #f2c14e, 0 0 14px rgba(255, 190, 60, .7);
  background: linear-gradient(155deg, #fff6c8, #f8d466 60%, #e8a83a); }
.ll-tile.locked { cursor: var(--cur-look), help; }
.ll-tile.locked .ll-img { filter: brightness(0) opacity(.45); transition: filter .15s steps(3); }
.ll-tile.locked:hover .ll-img { filter: none; }
.gt-part.neg b, .gt-part.neg span { color: #c0392b; } /* a peek at the one you don't have yet */
/* a mascot tile's bubble */
.tip.rich:has(.lt-tip) { max-width: min(380px, calc(100vw - 16px)); }
.lt-tip { display: flex; align-items: center; gap: 18px; min-width: min(320px, calc(100vw - 40px)); padding: 12px 16px 12px 12px; }
.lt-art { flex-shrink: 0; width: 92px; height: 92px; padding: 8px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.lt-tip.r-rare .lt-art { box-shadow: 0 0 0 2px #3f8de0; }
.lt-tip.r-epic .lt-art { box-shadow: 0 0 0 2px #9a4ad8, 0 0 10px rgba(160, 80, 224, .5); }
.lt-tip.r-legendary .lt-art { box-shadow: 0 0 0 2px #f2c14e, 0 0 12px rgba(255, 190, 60, .7); }
.lt-art .ll-img { width: 100%; height: 100%; animation: ll-bob 1.2s steps(2) infinite; }
.lt-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 2px 0; }
.lt-name { font-family: var(--pixel); font-size: 11px; font-weight: normal; line-height: 1.3; }
.lt-status { font-size: 12px; font-weight: 700; }
.lt-status.own { color: #2f7d3b; }
.lt-status.lock { color: var(--ink-soft); }
.lt-body small { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.lt-eggs { display: flex; flex-direction: column; gap: 5px; }
.lt-egg { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; font-size: 12px; background: rgba(255, 255, 255, .45); border: 2px solid var(--parch-3); }
.lt-egg img { width: 18px; height: 18px; image-rendering: pixelated; }
.lt-egg b { margin-left: auto; padding-left: 10px; font-family: var(--pixel); font-size: 8px; font-weight: normal; color: #b4501a; }
.ll-tile.equipped { outline: 3px solid #5fcf6e; outline-offset: 2px; }
.ll-eq { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; color: #fff; background: #3f9e3a; border: 2px solid var(--ink); }
.ll-more { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* the shop's eggs */
.ll-shop { margin: 18px 0 6px; padding-top: 12px; border-top: 3px dashed var(--parch-3); }
.ll-eggs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 10px; }
.egg-card .egg-art { width: 72px; height: 72px; animation: egg-idle 2.4s ease-in-out infinite; }
.egg-card.golden { background: linear-gradient(#fff3c4, #f6dc90); }
@keyframes egg-idle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-6deg); } 86% { transform: rotate(6deg); } }
.egg-odds { display: block; margin: 3px 0; }

/* the popover: a legend's card, the picker, the emote wheel */
.ll-pop { position: fixed; z-index: 400; animation: tip-in .12s steps(3); }
.ll-pop.card, .ll-pop.picker {
  padding: 10px 12px; color: var(--ink); background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3), 5px 5px 0 rgba(20, 10, 4, .5);
}
.llc { width: 200px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.llc-stage { position: relative; width: 120px; height: 120px; padding: 10px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, #8ae25a, #3fa03a 70%); border: 3px solid var(--ink); }
.llc.r-legendary .llc-stage { background: radial-gradient(circle at 50% 60%, #ffe9a6, #d4881a 75%); box-shadow: 0 0 14px rgba(255, 190, 60, .8); }
.llc.r-epic .llc-stage { background: radial-gradient(circle at 50% 60%, #e2ccff, #7a4ae0 75%); }
.llc.r-rare .llc-stage { background: radial-gradient(circle at 50% 60%, #cfe6ff, #3f74e0 75%); }
.llc-stage .ll-img { position: relative; z-index: 1; animation: ll-bob 1.2s steps(2) infinite; }
.llc-shadow { position: absolute; bottom: 12px; left: 30%; right: 30%; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.llc-name { font-family: var(--pixel); font-size: 10px; font-weight: normal; }
.llc-tags { display: flex; gap: 6px; align-items: center; }
.llc-equip { width: 100%; }
.llc-locked { margin: 0; font-size: 13px; color: var(--ink-soft); }
.llp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.llp-head b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.llp-head small { font-size: 12px; color: var(--ink-soft); }
.llp-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 6px; max-height: 300px; overflow-y: auto; }
.llp-item { display: grid; justify-items: center; gap: 2px; padding: 4px 2px; cursor: var(--cur-hand), pointer; background: var(--parch-2); border: 2px solid var(--parch-3); }
.llp-item .ll-img { width: 40px; height: 40px; }
.llp-item small { font-size: 9px; line-height: 1.1; text-align: center; }
.llp-item:hover { border-color: var(--ink); transform: translateY(-2px); }
.llp-item.on { border-color: #3f9e3a; background: #e3f3d6; box-shadow: 0 0 0 2px #5fcf6e; }
.llp-item.r-legendary { background: linear-gradient(155deg, #fff6c8, #f6dc90); }
.llp-item.r-epic { border-color: #9a4ad8; }
.llp-item.r-rare { border-color: #3f8de0; }
/* the emote wheel: a carved wooden ring of pixel tiles around the legend, its plaque in the middle */
.ll-pop.wheel { width: 236px; height: 236px; pointer-events: none; animation: llw-in .2s steps(4); }
@keyframes llw-in { from { transform: scale(.4) rotate(-30deg); opacity: 0; } }
.llw-ring { position: absolute; inset: 0; }
.llw-disc { position: absolute; inset: 22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 0 40%, #6a4426 41% 44%, #8a5a34 45% 72%, #5a3a22 73% 76%, transparent 77%);
  filter: drop-shadow(0 4px 0 rgba(20, 10, 4, .5)); }
.llw-disc::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, rgba(255, 220, 160, .14) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 45%, #000 46% 71%, transparent 72%); mask: radial-gradient(circle, transparent 0 45%, #000 46% 71%, transparent 72%); }
.llw-btn {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; pointer-events: auto; cursor: var(--cur-hand), pointer;
  display: grid; place-items: center; background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch);
  border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3), 0 3px 0 var(--wood-0);
  transform: rotate(var(--a)) translateY(-86px) rotate(calc(-1 * var(--a)));
  transition: transform .08s steps(2);
}
.llw-btn .ll-emo { width: 24px; height: 24px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(20, 10, 4, .35)); }
.llw-btn:hover { z-index: 2; background: linear-gradient(#fff3c4, #ffd96b); border-color: #6a3a00;
  box-shadow: inset 2px 2px 0 #fffbe0, 0 0 0 2px #ffd36b, 0 0 12px rgba(255, 211, 107, .9), 0 3px 0 var(--wood-0);
  transform: rotate(var(--a)) translateY(-90px) rotate(calc(-1 * var(--a))) scale(1.2); }
.llw-center {
  position: absolute; left: 50%; top: 50%; width: 92px; transform: translate(-50%, -50%); pointer-events: none;
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px 5px; text-align: center;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3), 0 0 0 3px #8a5a34, 0 0 0 6px var(--ink);
}
.llw-center .ll-img { width: 36px; height: 36px; animation: ll-bob 1.2s steps(2) infinite; }
.llw-center b { font-family: var(--pixel); font-size: 6px; font-weight: normal; line-height: 1.4; }
.llw-center small { font-size: 11px; color: var(--ink-soft); }
.llw-center small.on { font-family: var(--pixel); font-size: 7px; color: #b4501a; }

/* the pets beside the board */
.ll-pet { position: absolute; z-index: 5; width: 40px; height: 40px; } /* small: a mascot, not a champion */
.ll-pet[hidden] { display: none; }
.ll-pet.clickable { cursor: var(--cur-hand), pointer; }
.ll-pet.clickable:hover .ll-body { filter: drop-shadow(0 0 4px #fff3a0) drop-shadow(0 4px 0 rgba(20, 10, 4, .4)); }
.ll-body { position: absolute; inset: 0; animation: ll-bob 1.2s steps(2) infinite; filter: drop-shadow(0 4px 0 rgba(20, 10, 4, .4)); transform-origin: 50% 100%; }
.ll-pet.p1 .ll-body img { transform: scaleX(-1); }
.ll-body img { width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes ll-bob { 50% { transform: translateY(-3px); } }
.ll-pet::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -4px; height: 8px; border-radius: 50%; background: rgba(20, 10, 30, .35); z-index: -1; }
.ll-pet.p0::before, .ll-pet.p1::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: -6px; height: 4px; border-radius: 50%; }
.ll-pet.p0::before { background: rgba(79, 140, 255, .8); }
.ll-pet.p1::before { background: rgba(255, 92, 92, .8); }
.ll-say {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 12px; z-index: 2; padding: 2px 6px; font-size: 18px; line-height: 1.2; opacity: 0; pointer-events: none;
  background: var(--tile-parchment) 0 0 / 64px 64px, #fffbea; border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--parch-3), 3px 3px 0 rgba(20, 10, 4, .35); transform: translateX(-50%) scale(.3);
}
/* a stepped pixel tail: three squares getting smaller */
.ll-say::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 6px; height: 6px; margin-left: -3px; background: #fffbea;
  box-shadow: 0 0 0 3px var(--ink), 3px 6px 0 -0px #fffbea, 3px 6px 0 3px var(--ink); }
.ll-say.show { animation: ll-say 2.2s ease-out forwards; }
.ll-say .ll-emo { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
@keyframes ll-say { 0% { opacity: 0; transform: translateX(-50%) scale(.3); } 12% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.ll-fx { position: absolute; inset: 0; pointer-events: none; }
.ll-fx i img { display: block; width: 10px; height: 10px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 var(--ink)); }
.ll-fx i { position: absolute; left: 50%; top: 10%; font-style: normal; font-size: 16px; font-family: var(--pixel); color: #fff; text-shadow: 1px 1px 0 var(--ink);
  animation: ll-fx 1.5s ease-out var(--d) forwards; opacity: 0; }
@keyframes ll-fx { 0% { opacity: 0; transform: translate(-50%, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -46px); } }
/* how a legend acts out each emote */
.ll-pet.a-hop .ll-body { animation: a-hop .5s ease-out 2; }
.ll-pet.a-jump .ll-body { animation: a-jump .8s ease-out; }
.ll-pet.a-laugh .ll-body { animation: a-laugh .14s steps(2) 8; }
.ll-pet.a-love .ll-body { animation: a-love 1.2s ease-in-out; }
.ll-pet.a-sad .ll-body { animation: a-sad 1.5s ease-in-out; }
.ll-pet.a-angry .ll-body { animation: a-angry .08s steps(2) 12; filter: drop-shadow(0 0 4px #ff4a3a) sepia(.4) saturate(2) hue-rotate(-20deg); }
.ll-pet.a-nod .ll-body { animation: a-nod .35s ease-in-out 3; }
.ll-pet.a-party .ll-body { animation: a-party 1s ease-in-out; }
.ll-pet.a-flex .ll-body { animation: a-flex 1.2s ease-in-out; }
.ll-pet.a-wave .ll-body { animation: a-wave .3s ease-in-out 4; }
.ll-pet.a-sleep .ll-body { animation: a-sleep 1.5s ease-in-out; }
.ll-pet.a-think .ll-body { animation: a-think 1.4s ease-in-out; }
@keyframes a-hop { 40% { transform: translateY(-16px) scaleY(1.05); } 80% { transform: translateY(0) scaleY(.9); } }
@keyframes a-jump { 0% { transform: scaleY(.8); } 35% { transform: translateY(-34px) scaleY(1.1); } 70% { transform: translateY(0) scaleY(.85); } 100% { transform: none; } }
@keyframes a-laugh { 50% { transform: translateX(-3px) rotate(-6deg); } }
@keyframes a-love { 30%, 70% { transform: scale(1.12) translateY(-4px); } }
@keyframes a-sad { 20%, 85% { transform: scaleY(.82) translateY(4px); filter: saturate(.4) brightness(.85); } }
@keyframes a-angry { 50% { transform: translateX(3px); } }
@keyframes a-nod { 50% { transform: rotate(8deg) translateY(2px); } }
@keyframes a-party { 0% { transform: none; } 40% { transform: translateY(-20px) rotate(180deg); } 80% { transform: translateY(0) rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes a-flex { 20%, 80% { transform: scale(1.25); filter: drop-shadow(0 0 6px #ffd36b); } }
@keyframes a-wave { 50% { transform: rotate(-12deg); } }
@keyframes a-sleep { 20%, 85% { transform: rotate(10deg) translateY(3px) scaleY(.92); } }
@keyframes a-think { 20%, 80% { transform: rotate(-10deg); } 50% { transform: rotate(-10deg) translateY(-3px); } }

/* placement: your mascot under the roster */
.ll-slot { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 5px 8px; cursor: var(--cur-hand), pointer; text-align: left;
  background: linear-gradient(90deg, #fff3c4, var(--parch-2)); border: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(20, 10, 4, .25); }
.ll-slot:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ll-slot .ll-img { width: 40px; height: 40px; flex-shrink: 0; animation: ll-bob 1.2s steps(2) infinite; }
.ll-slot span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ll-slot small { font-size: 11px; color: var(--ink-soft); }
.ll-slot b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-slot em { font-style: normal; font-family: var(--pixel); font-size: 7px; padding: 3px 5px; color: #fff; background: #8f55e0; border: 2px solid var(--ink); }

/* hatching an egg */
.egg-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(12, 6, 20, .85); animation: tip-in .2s steps(3); }
.egg-stage { position: relative; width: 300px; display: grid; justify-items: center; }
.egg-big { width: 160px; height: 160px; image-rendering: pixelated; animation: egg-shake 1.3s steps(8); }
@keyframes egg-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-8deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-12deg) scale(1.05); }
  60% { transform: rotate(12deg) scale(1.08); } 75% { transform: rotate(-16deg) scale(1.1); } 90% { transform: rotate(16deg) scale(1.14); } }
.egg-burst { position: absolute; left: 50%; top: 80px; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; }
.egg-burst.r-common { background: #fff; } .egg-burst.r-rare { background: #7ab8ff; } .egg-burst.r-epic { background: #c08aff; } .egg-burst.r-legendary { background: #ffd36b; }
.egg-reveal { display: none; justify-items: center; gap: 8px; color: #fff; text-align: center; }
.egg-reveal .ll-img { width: 140px; height: 140px; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .6)); animation: egg-pop .5s steps(5), ll-bob 1.2s steps(2) .5s infinite; }
.egg-reveal b { font-family: var(--pixel); font-size: 13px; font-weight: normal; text-shadow: 2px 2px 0 #000; }
.egg-reveal p { margin: 0; font-size: 15px; color: #ffe9b8; }
.egg-btns { display: flex; gap: 10px; margin-top: 6px; }
.egg-overlay.cracked .egg-big { display: none; }
.egg-overlay.cracked .egg-burst { animation: egg-burst .7s ease-out forwards; }
.egg-overlay.cracked .egg-reveal { display: grid; }
@keyframes egg-burst { 0% { opacity: 1; width: 10px; height: 10px; } 100% { opacity: 0; width: 520px; height: 520px; } }
@keyframes egg-pop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; } }
.draft-ll .ll-slot { margin-top: 2px; padding: 3px 6px; }
.draft-ll .ll-slot .ll-img { width: 32px; height: 32px; }
.draft-ll .ll-slot b { font-size: 13px; }
.ll-slot.theirs { cursor: var(--cur-arrow), default; background: var(--parch-2); box-shadow: none; opacity: .9; }
.ll-slot.theirs:hover { filter: none; transform: none; }
.shop-tabs { margin: 4px 0 12px; }
.shop-tabs .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 10px; }
.shop-tabs .coin-icon, .shop-tabs .ico { width: 16px; height: 16px; margin: 0; }
.ll-shop { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Replay viewer: themed controls, scoreboard and timeline ---------- */
.replay { padding: 10px 14px 12px; background: linear-gradient(#2a1a0e, #170d06); border-top: 4px solid var(--ink);
  box-shadow: 0 -4px 0 var(--wood-2), 0 -8px 0 var(--ink), 0 -14px 24px rgba(0, 0, 0, .4); }
.rp-top { gap: 12px; align-items: stretch; }
/* the buttons sit in a wooden tray, square like the action bar's */
.rp-controls { align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(var(--wood-2), var(--wood-1));
  border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15), inset -2px -2px 0 rgba(0, 0, 0, .3), 0 3px 0 #000; }
.rp-btn { display: grid; place-items: center; width: 40px; min-width: 0; height: 40px; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff6dc, var(--parch) 60%, var(--parch-3)); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 rgba(0, 0, 0, .15), 0 3px 0 var(--wood-0); }
.rp-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 rgba(0, 0, 0, .15), 0 5px 0 var(--wood-0), 0 0 10px rgba(255, 220, 120, .6); }
.rp-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 2px 2px 0 #fff6dc, 0 1px 0 var(--wood-0); }
.rp-btn:disabled { opacity: .4; filter: grayscale(.7); }
.rp-btn .rp-ico { width: 20px; height: 20px; image-rendering: pixelated; }
.rp-btn.play { width: 54px; height: 48px; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 60%, #b4801f); }
.rp-btn.play .rp-ico { width: 26px; height: 26px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .3)); }
.rp-btn.play.on { animation: rp-glow 1.2s steps(2) infinite; }
@keyframes rp-glow { 50% { box-shadow: inset 2px 2px 0 #fff, 0 3px 0 var(--wood-0), 0 0 14px 3px rgba(255, 211, 107, .8); } }
.rp-btn.speed { width: 46px; font-family: var(--pixel); font-size: 10px; color: var(--ink); }
/* the scoreboard: each team's heroes, VS, then the move and the turn on parchment plaques */
.rp-info { gap: 10px; font-family: inherit; font-size: inherit; align-items: stretch; }
.rp-score, .rp-stat { color: var(--ink); background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3), 0 3px 0 #000; }
.rp-score { display: flex; align-items: stretch; }
.rp-team { display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
.rp-team.p0 { background: linear-gradient(90deg, rgba(79, 140, 255, .35), rgba(79, 140, 255, .06)); }
.rp-team.p1 { flex-direction: row-reverse; background: linear-gradient(270deg, rgba(255, 92, 92, .35), rgba(255, 92, 92, .06)); }
.rp-mark { display: grid; place-items: center; width: 22px; height: 22px; font-size: 13px; font-weight: 700; line-height: 1; color: #fff; border: 2px solid var(--ink); }
.rp-team.p0 .rp-mark { background: var(--blue); }
.rp-team.p1 .rp-mark { background: var(--red); }
.rp-heroes { display: flex; gap: 3px; }
.rp-team.p1 .rp-heroes { flex-direction: row-reverse; }
.rp-hero { position: relative; width: 30px; height: 30px; background: rgba(255, 255, 255, .55); border: 2px solid var(--ink); }
.rp-team.p0 .rp-hero { border-color: #2a55b8; }
.rp-team.p1 .rp-hero { border-color: #b3302f; }
.rp-hero .sprite { display: block; width: 100%; height: 100%; }
.rp-hero.dead { background: rgba(40, 20, 20, .2); border-color: var(--ink-soft) !important; }
.rp-hero.dead .sprite { filter: grayscale(1) brightness(.75); opacity: .5; }
.rp-hero.dead::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 13px; color: #e0453c; text-shadow: 1px 1px 0 #000; }
.rp-hero.empty { border-style: dashed; background: transparent; opacity: .5; }
.rp-alive { min-width: 18px; font-family: var(--pixel); font-size: 15px; font-weight: normal; text-align: center; }
.rp-team.p0 .rp-alive { color: #2a55b8; }
.rp-team.p1 .rp-alive { color: #b3302f; }
.rp-vs { align-self: center; z-index: 1; margin: 0 -6px; padding: 4px 5px; font-family: var(--pixel); font-size: 9px; color: var(--gold);
  background: var(--ink); border: 2px solid var(--wood-4); transform: rotate(-6deg); }
.rp-stat { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 108px; padding: 5px 10px; }
.rp-stat small { font-family: var(--pixel); font-size: 7px; color: var(--ink-soft); text-transform: uppercase; white-space: nowrap; }
.rp-stat b { font-family: var(--pixel); font-size: 13px; font-weight: normal; color: var(--ink); }
.rp-stat b i { font-style: normal; font-size: 9px; color: var(--ink-soft); }
.rp-prog { display: block; height: 8px; background: var(--wood-1); border: 2px solid var(--ink); }
.rp-prog i { display: block; height: 100%; background: linear-gradient(#ffe48a, var(--gold) 50%, #d49b22); }
.rp-turn { flex-direction: row; align-items: center; gap: 8px; }
.rp-turn span { display: flex; flex-direction: column; gap: 4px; }
.rp-turn .rp-ico { width: 26px; height: 26px; image-rendering: pixelated; }
.rp-turn.sudden { background: linear-gradient(#6a1824, #3a0c14); }
.rp-turn.sudden small { color: #ffb0b0; }
.rp-turn.sudden b { color: #fff; }
#rp-exit { display: none; } /* exiting a replay is the top bar's ✕ Exit replay */
/* what the move did, and the timeline in a sunken wooden frame */
.rp-caption { padding: 6px 12px; background: rgba(255, 246, 220, .06); border-left: 4px solid var(--gold); }
.rp-scroll { background: rgba(0, 0, 0, .28); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--wood-1), inset 0 6px 12px rgba(0, 0, 0, .5); }
.tl-zone span { top: 4px; left: 6px; padding: 2px 5px; color: #f6e2b4; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 246, 220, .2); }
.tl-zone.sudden span { color: #ffb0b0; }
.tl-axis { height: 6px; margin-top: -3px; background: repeating-linear-gradient(90deg, var(--wood-4) 0 12px, var(--wood-2) 12px 14px); box-shadow: 0 0 0 2px var(--ink); }
.tl-head { width: 4px; margin-left: -2px; background: linear-gradient(#ffe48a, var(--gold)); box-shadow: 0 0 0 1px var(--ink), 0 0 10px var(--gold); }
.tl-head::before, .tl-head::after { content: ''; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  background: var(--gold); border: 2px solid var(--ink); transform: rotate(45deg); }
.tl-head::before { top: -2px; }
.tl-head::after { bottom: -2px; }
.tl-mark { box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
@media (max-width: 700px) {
  .rp-controls { padding: 4px 5px; gap: 4px; }
  .rp-btn { width: 34px; height: 34px; }
  .rp-btn.play { width: 42px; height: 38px; }
  .rp-btn .rp-ico { width: 16px; height: 16px; }
  .rp-info { order: 3; flex-basis: 100%; gap: 6px; }
  .rp-hero { width: 22px; height: 22px; }
  .rp-team { gap: 4px; padding: 4px 5px; }
  .rp-stat { min-width: 0; padding: 4px 6px; }
}


/* ---------- Phones in the arena: one fixed screen, no scrolling ----------
   (the champion select still scrolls: its grid is long) */
#btn-log { display: none; }
@media (max-width: 700px) {
  #btn-log { display: inline-flex; }
  #btn-log.on { background: var(--gold); color: var(--ink); }
  body.in-arena #app { height: 100vh; height: 100dvh; overflow: hidden; padding: 6px 8px; gap: 8px; }
  body.in-arena .brand { display: none; }
  body.in-arena .topbar { flex-wrap: nowrap; gap: 6px; }
  body.in-arena .phase-box { flex: 1 1 auto; min-width: 0; }
  body.in-arena .top-actions { gap: 4px; }
  body.in-arena .top-actions .btn.small { padding: 7px 8px; font-size: 11px; }
  body.in-arena .top-actions .tb-txt { display: none; }
  body.in-arena .top-actions .armed .tb-txt { display: inline; font-size: 7px; } /* "Sure? Click again" still says it */
  body.in-arena .side-sub, body.in-arena .side .syn-row { display: none; }
  body.in-arena .side { padding: 6px 8px; }
  body.in-arena .side-head { margin-bottom: 2px; }
  body.in-arena .actions { min-height: 64px; } /* the action bar's place is kept: nothing moves when it shows */
  body.in-arena .tabletop { padding: 14px 0 18px; }
  body.in-arena .board { width: min(100%, 480px, max(170px, calc(100dvh - 510px))); }
  /* the chronicle: hidden, or over the board under the top bar (the 📜 button) */
  body.in-arena #app > .log-strip { display: none; }
  body.in-arena.phone-log #app > .log-strip { display: flex; position: fixed; z-index: 45; top: 50px; left: 8px; right: 8px; height: auto; max-height: 55dvh;
    box-shadow: 0 0 0 3px var(--ink), 0 10px 0 rgba(20, 10, 4, .35), 0 0 0 100vmax rgba(20, 10, 4, .35); }
  body.in-arena.phone-log #app > .log-strip #log { max-height: calc(55dvh - 60px); }
}

/* a heal's sparkle: a little glowing pixel cross (effects.js healGlow) */
/* healing: small pixel crosses (green glow) and twinkling sparkles (gold glow) */
.fx-heal-spark .fx-sprite { filter: drop-shadow(0 0 3px rgba(127, 240, 170, .95)); }
.fx-twinkle .fx-sprite { filter: drop-shadow(0 0 3px rgba(255, 236, 150, .95)); }

/* ---------- The shop (overhaul): a wooden sign, big tabs, offers on glowing pedestals ---------- */
.modal.shop { padding: 22px 24px 20px; }
.shop-head { gap: 14px; margin-bottom: 14px; padding-right: 34px; justify-content: space-between; }
.shop-sign { position: relative; padding: 10px 22px 9px; background: linear-gradient(#9c6a3c, #7a4f2c 55%, #5a3a22); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 4px 4px 0 rgba(20, 10, 4, .35); }
.shop-sign::before, .shop-sign::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: #d8c08a; border: 2px solid var(--ink); }
.shop-sign::before { left: 6px; }
.shop-sign::after { right: 6px; }
.shop-sign h2 { margin: 0; font-size: 15px; color: #fff3c4; text-shadow: 2px 2px 0 var(--wood-0); letter-spacing: 1px; }
.shop-purse { display: flex; gap: 8px; flex-wrap: wrap; }
/* the tabs: one chest, one egg, and the collections' counts */
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; margin: 0 0 -4px; position: relative; z-index: 1; }
/* folder tabs: the open one joins the box below (it covers the box's top edge), the other sits behind it */
.shop-tab { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; text-align: left; color: #f3e6c4; background: linear-gradient(#6a4426, #4e3019); border: 4px solid var(--ink); border-bottom: 0; cursor: var(--cur-hand), pointer; }
.shop-tab:hover { filter: brightness(1.12); }
.shop-tab.on { color: var(--ink); background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); box-shadow: inset 0 3px 0 #fff6dc; }
.shop-tab:not(.on) { padding-top: 5px; padding-bottom: 5px; border-bottom: 4px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.st-tab-ico { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: radial-gradient(circle, rgba(255, 230, 140, .55), transparent 70%); }
.st-tab-ico img { width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(20, 10, 4, .4)); }
.st-tab-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-tab-text b { font-family: var(--pixel); font-size: 11px; }
.st-tab-text small { font-size: 13px; opacity: .85; }
.shop-body { margin: 0; padding: 14px 14px 6px; background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px #fff6dc; }
.shop-sub { margin: 0 0 14px; font-size: 15px; }
/* the offers */
.shop-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.shop-offers.eggs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer { --c: #c08a4a; --c2: #7a4f2c; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px 12px; text-align: center; overflow: visible;
  background: linear-gradient(#5a3a22, #3b2414); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px var(--c2), 4px 4px 0 rgba(20, 10, 4, .4); }
.offer.iron { --c: #9cc4f2; --c2: #4c6f9c; }
.offer.royal { --c: #f2c14e; --c2: #b4801f; }
.offer.egg { --c: #9fe6ff; --c2: #3f8aa8; }
.offer.golden { --c: #ffd75e; --c2: #c8941e; }
.egg-card.golden { background: linear-gradient(#5a3a22, #3b2414); } /* the same card as the others */
.offer-ribbon { position: relative; z-index: 1; margin: 0 -10px; padding: 7px 34px 8px; align-self: stretch; background: linear-gradient(var(--c), var(--c2)); border-bottom: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 3px 0 rgba(20, 10, 4, .3); }
.offer-ribbon span { font-family: var(--pixel); font-size: 10px; line-height: 1.4; color: #fff; text-shadow: 2px 2px 0 rgba(20, 10, 4, .7); }
.offer-stage { position: relative; display: grid; place-items: center; align-self: stretch; height: 128px; margin: 2px 0 0; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--c) 70%, transparent) 0, color-mix(in srgb, var(--c) 25%, transparent) 38%, transparent 66%),
              repeating-conic-gradient(from 0deg at 50% 58%, rgba(255, 255, 255, .07) 0 10deg, transparent 10deg 20deg), #2a1a0c;
  border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.offer-stage::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 12px; height: 10px; background: rgba(0, 0, 0, .45); border-radius: 50%; } /* the floor shadow */
.offer .chest-art { position: relative; z-index: 1; width: 92px; height: 92px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)) drop-shadow(3px 3px 0 rgba(0, 0, 0, .5)); }
.offer .egg-art { width: 80px; height: 80px; }
.offer:hover .chest-art { animation-duration: .7s; }
.offer .chest-text { min-height: 38px; font-size: 14px; line-height: 1.35; color: #f3e6c4; text-shadow: 1px 1px 0 var(--wood-0); }
.offer .chest-buy { margin-top: auto; }
.offer .chest-buy .btn { min-width: 92px; }
/* gem buttons: green all over (the primary button's gold edges, hover and press too) */
.offer .btn.gem-btn:not(:disabled) { color: #fff; background: #34b06e; text-shadow: 1px 1px 0 #11502c;
  box-shadow: inset 3px 3px 0 #8ff0b8, inset -3px -4px 0 #1d7a47, 0 4px 0 var(--wood-0); }
.offer .btn.gem-btn:hover:not(:disabled) { background: #45c47f; }
.offer .btn.gem-btn:active:not(:disabled) { box-shadow: inset 3px 3px 0 #8ff0b8, inset -3px -4px 0 #1d7a47, 0 1px 0 var(--wood-0); }
.offer .btn:disabled { opacity: .55; filter: grayscale(.6); }
/* the ⓘ and the chances over the card */
.offer-info { position: absolute; z-index: 3; top: 5px; right: 5px; width: 26px; height: 26px; padding: 0; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 15px; line-height: 1; color: #fff;
  background: linear-gradient(#5b8de8, #2f5fc0); border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .45); cursor: var(--cur-hand), help; }
.offer-info:hover, .offer.odds-on .offer-info { background: linear-gradient(#7aa6ff, #3f74e0); }
.offer-odds { position: absolute; z-index: 2; left: 8px; right: 8px; top: 40px; display: none; flex-direction: column; gap: 6px; padding: 10px 12px; text-align: left;
  color: #f3e6c4; background: #1e120a; border: 3px solid var(--c); box-shadow: 0 0 0 3px var(--ink), 4px 6px 0 rgba(0, 0, 0, .4); }
.offer.odds-on .offer-odds { display: flex; }
@media (hover: hover) { .offer-info:hover + .offer-odds { display: flex; } }
.oo-title { font-family: var(--pixel); font-size: 9px; color: var(--c); padding-right: 26px; }
.oo-title small { font-family: var(--body); font-size: 12px; color: #f3e6c4; }
.oo-sub { font-size: 12px; opacity: .8; }
.oo-row { display: grid; grid-template-columns: 74px 1fr 38px; align-items: center; gap: 6px; font-size: 13px; }
.oo-name { font-weight: 700; }
.oo-bar { height: 10px; background: rgba(255, 255, 255, .1); border: 2px solid #000; }
.oo-bar i { display: block; height: 100%; background: var(--rc, #b9b0a2); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.oo-pct { text-align: right; }
.oo-extra { grid-column: 1 / -1; margin-top: -4px; padding-left: 2px; font-size: 11px; opacity: .75; }
.oo-note { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: #ffe08a; }
.oo-row.r-normal, .oo-row.ll-r-common { --rc: #b9b0a2; }
.oo-row.r-rare, .oo-row.ll-r-rare { --rc: #4f8cff; }
.oo-row.ll-r-epic { --rc: #a463f2; }
.oo-row.r-legendary, .oo-row.ll-r-legendary { --rc: #f2a93c; }
.oo-row .oo-name { color: var(--rc); }
.oo-row.holo { --rc: #c9a8ff; }
.oo-row.holo .oo-bar i { background: linear-gradient(90deg, #ff8fd0, #ffd28f, #8fffc4, #8fd2ff, #b58fff); }
/* the collections' headings: "Your champions 7 / 16" with a bar */
.shop-sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .3), 3px 3px 0 rgba(20, 10, 4, .3); }
.shop-sec-head h3 { margin: 0; font-family: var(--pixel); font-size: 10px; color: #fff3c4; text-shadow: 2px 2px 0 var(--wood-0); white-space: nowrap; }
.shop-sec-head .shop-owned { margin: 0; font-size: 15px; font-weight: 700; color: #ffe08a; text-shadow: 1px 1px 0 var(--wood-0); }
.shop-progress { flex: 1; height: 12px; min-width: 40px; background: var(--wood-0); border: 2px solid var(--ink); }
.shop-progress i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, #ffd970 6px 12px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); transition: width .4s steps(8); }
.shop-foot { margin-top: 4px; }
@media (max-width: 700px) {
  .modal.shop { padding: 16px 10px 14px; }
  .shop-sign { padding: 8px 16px 7px; }
  .shop-sign h2 { font-size: 11px; }
  .shop-tab { padding: 6px 8px 10px; gap: 6px; }
  .shop-tab:not(.on) { padding-top: 4px; padding-bottom: 4px; }
  .st-tab-ico { width: 30px; height: 30px; }
  .st-tab-ico img { width: 28px; height: 28px; }
  .st-tab-text b { font-size: 9px; }
  .st-tab-text small { font-size: 11px; }
  .shop-body { padding: 10px 8px 4px; }
  .shop-offers { gap: 6px; }
  .offer { padding: 0 4px 8px; gap: 6px; }
  .offer-ribbon { margin: 0 -4px; padding: 6px 24px 7px; }
  .offer-ribbon span { font-size: 7px; }
  .offer-stage { height: 84px; }
  .offer .chest-art { width: 58px; height: 58px; }
  .offer .egg-art { width: 52px; height: 52px; }
  .offer .chest-text { font-size: 12px; min-height: 30px; }
  .offer .chest-buy .btn { min-width: 0; }
  .offer-info { top: 4px; right: 3px; width: 22px; height: 22px; font-size: 13px; }
  .offer-odds { left: -2px; right: -2px; top: 28px; padding: 8px; }
  .oo-row { grid-template-columns: 1fr 34px; }
  .oo-bar { grid-column: 1 / -1; grid-row: 2; }
  .shop-sec-head h3 { font-size: 8px; }
}

/* ---------- Tournament (tournament.js): the setup and the bracket ---------- */
.modal.tourney { max-width: 1100px; width: 100%; display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: hidden; }
.tourney-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.modal.tourney .modal-back { flex-shrink: 0; margin-top: 14px; }
.tn-hero { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 16px; background: linear-gradient(90deg, rgba(242, 193, 78, .4), transparent 75%), var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.tn-hero p { margin: 0; line-height: 1.45; font-size: 15px; }
.tn-trophy { font-size: 34px; line-height: 1; filter: drop-shadow(2px 2px 0 rgba(20, 10, 4, .35)); }
.tn-h { margin: 0 0 10px; font-family: var(--pixel); font-size: 10px; }
.tn-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tn-size { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; color: #f3e6c4; background: linear-gradient(#5a3a22, #3b2414); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px #7a4f2c, 4px 4px 0 rgba(20, 10, 4, .35); cursor: var(--cur-hand), pointer; }
.tn-size:hover { filter: brightness(1.12); }
.tn-size.on { box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 3px var(--gold), 4px 4px 0 rgba(20, 10, 4, .35); }
.tn-size b { font-family: var(--pixel); font-size: 11px; color: #fff3c4; }
.tn-size small { font-size: 13px; opacity: .85; }
.tn-size-prize { display: inline-flex; align-items: center; gap: 4px; color: #ffe08a; }
.tn-size-prize .coin-icon, .tn-size-prize .ico { width: 14px; height: 14px; margin: 0; }
.tn-size-icon { display: grid; grid-template-columns: repeat(4, 10px); gap: 3px; justify-content: center; min-height: 26px; align-content: center; }
.tn-size-icon i { width: 10px; height: 10px; background: var(--gold); border: 2px solid var(--ink); }
.tn-formats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tn-prize-note { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }
.tn-start { display: block; width: min(420px, 100%); margin: 0 auto; }
/* the bracket */
.tn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tn-info { font-size: 15px; }
.tn-top-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tn-banner { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 12px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 3px 3px 0 rgba(20, 10, 4, .3); }
.tn-banner > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tn-banner b { font-family: var(--pixel); font-size: 11px; line-height: 1.5; }
.tn-banner small { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tn-banner.next { background: linear-gradient(90deg, rgba(63, 116, 224, .3), transparent 70%), var(--parch-2); }
.tn-banner.win { background: linear-gradient(90deg, rgba(242, 193, 78, .7), rgba(242, 193, 78, .2)), var(--parch-2); }
.tn-banner.out { background: linear-gradient(90deg, rgba(208, 70, 60, .3), transparent 70%), var(--parch-2); }
.tn-banner.done, .tn-banner.wait { background: var(--parch-2); }
.tn-prize .coin-icon, .tn-prize .ico { width: 14px; height: 14px; margin: 0; }
.tn-bracket { --tn-gap: 28px; display: flex; gap: var(--tn-gap); overflow-x: auto; padding: 4px 8px 12px; background: rgba(42, 28, 18, .06); border: 2px solid rgba(42, 28, 18, .15); }
.tn-round { display: flex; flex-direction: column; min-width: 220px; flex: 1 0 220px; }
.tn-round h4 { margin: 4px 0 10px; padding: 5px 8px; text-align: center; font-family: var(--pixel); font-size: 9px; color: #fff3c4; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); }
.tn-round.now h4 { background: linear-gradient(var(--gold), var(--gold-dark)); color: var(--ink); }
.tn-matches { flex: 1; display: flex; flex-direction: column; }
/* the lines: every match in a slot of the same height; a pair of slots is joined by a vertical line on its right,
   each match has a line out to it, and the matches of the next rounds (and the champion) a line in */
.tn-pair { position: relative; flex: 2 1 0; display: flex; flex-direction: column; }
.tn-pair.single { flex: 1 1 0; }
.tn-cell { position: relative; flex: 1 1 0; display: flex; align-items: center; padding: 6px 0; }
.tn-cell > .tn-match, .tn-cell > .tn-champ { flex: 1; min-width: 0; }
/* room for the tallest card (the one with its buttons) in every first-round slot: all slots stay the same height */
.tn-round:first-child .tn-cell { min-height: 166px; }
.tn-cell::after { content: ''; position: absolute; top: 50%; right: calc(var(--tn-gap) / -2); width: calc(var(--tn-gap) / 2); height: 3px; margin-top: -1px; background: var(--ink-soft); }
.tn-pair:not(.single)::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: calc(var(--tn-gap) / -2 - 1px); width: 3px; background: var(--ink-soft); }
.tn-round:not(:first-child) .tn-cell::before { content: ''; position: absolute; top: 50%; left: calc(var(--tn-gap) / -2); width: calc(var(--tn-gap) / 2); height: 3px; margin-top: -1px; background: var(--ink-soft); }
.tn-champ-col .tn-cell::after { display: none; }
.tn-cell.done::after { background: #2f7d3b; } /* a decided match: its winner's way on */
.tn-champ-col .tn-cell.done::before { background: var(--gold-dark); }
.tn-match { position: relative; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .25); }
.tn-match.mine { border-color: var(--blue-dark); box-shadow: inset 0 0 0 2px var(--blue-soft), 0 0 0 2px var(--blue), 3px 3px 0 rgba(20, 10, 4, .25); }

.tn-slot { display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 38px; }
.tn-slot + .tn-slot { border-top: 2px dashed rgba(42, 28, 18, .25); }
.tn-slot.win { background: linear-gradient(90deg, rgba(95, 207, 110, .35), transparent); }
.tn-slot.lose { opacity: .5; }
.tn-slot.lose .tn-name { text-decoration: line-through; }
.tn-slot.you .tn-name { color: var(--blue-dark); }
.tn-slot.tbd { color: var(--ink-soft); }
.tn-pet { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; background: #f3e6c4; border: 2px solid var(--ink); overflow: hidden; }
.tn-pet img { width: 28px; height: 28px; image-rendering: pixelated; }
.tn-pet.empty { background: rgba(42, 28, 18, .1); border-style: dashed; }
.tn-banner .tn-pet { width: 44px; height: 44px; }
.tn-banner .tn-pet img { width: 40px; height: 40px; }
.tn-name { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-lvl, .tn-you { flex-shrink: 0; padding: 1px 5px; font-size: 11px; font-weight: 700; border: 2px solid var(--ink); }
.tn-lvl.lvl-easy { background: #bfe8b0; }
.tn-lvl.lvl-normal { background: #f7dd8a; }
.tn-lvl.lvl-hard { background: #f2a49a; }
.tn-you { color: #fff; background: var(--blue); }
.tn-check { color: #2f7d3b; font-weight: 700; }
.tn-actions { display: flex; gap: 8px; padding: 8px; border-top: 2px solid rgba(42, 28, 18, .2); }
.tn-actions .btn { flex: 1; min-width: 0; padding: 9px 6px; font-size: 9px; white-space: nowrap; }
.tn-match > .tn-cd { position: absolute; z-index: 2; top: -11px; right: -9px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; font-size: 13px; font-weight: 700; background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .3); }
.tn-how { display: block; padding: 4px 0 0; font-size: 12px; color: var(--ink-soft); }
.tn-match.done .tn-actions { padding-top: 0; border-top: 0; }
.tn-champ-col { min-width: 160px; flex: 0 0 160px; }
.tn-champ { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; text-align: center; background: linear-gradient(rgba(242, 193, 78, .55), rgba(242, 193, 78, .15)), var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 0 0 0 3px var(--gold); }
.tn-champ.tbd { background: var(--parch-2); box-shadow: inset 0 0 0 2px #fff6dc; color: var(--ink-soft); }
.tn-champ .tn-pet { width: 52px; height: 52px; }
.tn-champ .tn-pet img { width: 48px; height: 48px; }
.tn-champ b { font-family: var(--pixel); font-size: 10px; line-height: 1.4; }
@media (max-width: 700px) {
  .tn-sizes { grid-template-columns: 1fr; }
  .tn-size { flex-direction: row; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; }
  .tn-round { min-width: 190px; flex-basis: 190px; }
  .modal.tourney { padding: 18px 10px 14px; }
}

/* ---------- Drag and drop: a champion from the roster onto the board (placement) ---------- */
.class-card:not(.disabled) { touch-action: none; } /* a finger on a card drags the champion, not the page */
.class-card.dragging { opacity: .45; }
body.drag-champ, body.drag-champ * { cursor: grabbing !important; user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 600; width: var(--size, 64px); height: var(--size, 64px); pointer-events: none; }
.drag-ghost img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(20, 10, 4, .35)) drop-shadow(0 0 6px rgba(255, 230, 140, .8)); animation: drag-wobble .5s steps(2) infinite; }
@keyframes drag-wobble { 50% { transform: rotate(-6deg) translateY(-3px); } }
.cell.drop-ok { box-shadow: inset 0 0 0 3px rgba(242, 193, 78, .65); animation: drop-pulse 1s steps(2) infinite; }
@keyframes drop-pulse { 50% { box-shadow: inset 0 0 0 3px rgba(242, 193, 78, .25); } }
.cell.drop-hover { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--gold); animation: none; }
.cell.drop-hover::after { content: ''; position: absolute; inset: 0; background: var(--ghost) center / 64px 64px no-repeat; image-rendering: pixelated; opacity: .5; }

/* ---------- Saved teams: Profile > Champions, and the Fast match's one-click choice ---------- */
.saved-teams { margin-bottom: 16px; }
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tm-head h3 { margin: 0; }
.tm-head h3 small { font-family: var(--body); font-size: 14px; color: var(--ink-soft); }
.tm-empty { margin: 4px 0 6px; }
.team-row { display: grid; grid-template-columns: minmax(90px, 160px) auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .25); }
.team-row.editing { box-shadow: inset 0 0 0 2px var(--gold), 3px 3px 0 rgba(20, 10, 4, .25); }
.tm-name { font-family: var(--pixel); font-size: 10px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-champs { display: flex; gap: 4px; }
.tm-champ, .tm-slot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.tm-champ img, .tm-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.tm-champ.locked { background: var(--wood-2); }
.tm-tier { position: absolute; right: -6px; bottom: -6px; transform: scale(.75); }
.tm-syn { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tm-syn .syn-name, .te-syn .syn-name { display: none; }
.tm-btns { display: flex; gap: 6px; }
.tm-del { min-width: 34px; }
/* the editor */
.team-editor { padding: 12px 14px; margin-bottom: 12px; background: linear-gradient(rgba(242, 193, 78, .25), transparent 60%), var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold), 3px 3px 0 rgba(20, 10, 4, .25); }
.te-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.te-title { font-family: var(--pixel); font-size: 10px; }
.te-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; font-weight: 700; }
.te-name input { flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-size: 15px; color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); }
.te-slots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tm-slot { width: 48px; height: 48px; background: rgba(42, 28, 18, .1); border-style: dashed; }
.tm-slot.filled { border-style: solid; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; cursor: var(--cur-hand), pointer; }
.tm-slot.filled:hover { filter: brightness(1.1); box-shadow: inset 0 0 0 2px var(--red); }
.tm-slot.next { border-color: var(--gold-dark); animation: px-glow 1s steps(1) infinite; }
.tm-slot img { width: 40px; height: 40px; }
.te-count { margin-left: 6px; font-weight: 700; font-size: 16px; }
.te-syn { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; margin: 8px 0 4px; }
.te-help { margin: 4px 0 8px; font-size: 13px; color: var(--ink-soft); }
.te-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.tm-pick { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 6px; text-align: left; background: #f3e6c4; border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.tm-pick:hover:not(:disabled) { background: #fff3d6; }
.tm-pick.on { background: #f6dd8a; box-shadow: inset 0 0 0 2px var(--gold-dark), 2px 2px 0 rgba(20, 10, 4, .2); }
.tm-pick:disabled { opacity: .45; cursor: default; }
.tm-pick-icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--ink); }
.tm-pick-icon img { width: 28px; height: 28px; image-rendering: pixelated; }
.tm-pick-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tm-order { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; font-size: 12px; color: #fff; background: var(--blue); border: 2px solid var(--ink); }
.te-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* Fast match: your saved teams under the title */
.draft-teams { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.dt-label { font-weight: 700; font-size: 13px; }
.dt-team { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; font-size: 9px; }
.dt-icons { display: inline-flex; }
.dt-icons img { width: 20px; height: 20px; image-rendering: pixelated; margin-right: -4px; }
@media (max-width: 700px) {
  .team-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tm-champs { grid-column: 1 / -1; grid-row: 2; }
  .tm-syn { grid-column: 1 / -1; grid-row: 3; }
  .tm-btns { grid-column: 2; grid-row: 1; }
  .tm-champ { width: 34px; height: 34px; }
  .tm-champ img { width: 28px; height: 28px; }
  .tm-slot { width: 40px; height: 40px; }
  .tm-slot img { width: 32px; height: 32px; }
  .te-pool { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ---------- Accessibility (⚙ Settings → General) ---------- */
/* Reduce motion: looping animations play once (no blinking, glowing or bobbing); effects.js skips shakes and flashes */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
/* Colour-blind friendly: the Red team becomes orange (sprites too, see Sprites.setColorBlind), team marks on the heroes, striped low HP */
body.cb-mode { --red: #e8820c; --red-dark: #8f4d00; --red-soft: #fbdcb4; }
body.cb-mode .cell.p0 .content::before, body.cb-mode .cell.p1 .content::before {
  position: absolute; z-index: 3; left: 50%; bottom: -2px; transform: translateX(-50%); display: grid; place-items: center; width: 18px; height: 18px;
  font-family: var(--pixel); font-size: 9px; line-height: 1; color: #fff; border: 2px solid var(--ink); box-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
body.cb-mode .cell.p0 .content::before { content: '✕'; background: var(--blue); }
body.cb-mode .cell.p1 .content::before { content: '◯'; background: var(--red); }
body.cb-mode .mini-hp.low i, body.cb-mode .hp-bar.low i { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 6px) !important; }
/* Text size: the chronicle and the champion cards (rosters, the cards that pop up, the draft's details) */
/* the text size (⚙ Settings → Display): every window's content, the menus, the bubbles, the status and the toasts,
   the draft's header, choice bar and preview, the chronicle, the rosters and the champion cards (zoom keeps each
   one's layout: what grows wraps or scrolls inside; nothing is zoomed twice) */
body.text-small :is(.modal > :not(.close), .menu-card > *, .tip, .ask-box, #status, .toast, .dr-head, .dr-foot, .draft-detail, #log li, .side .cc-body),
body.text-small .ccard:not(.modal .ccard, .draft-detail .ccard) { zoom: .9; }
body.text-large :is(.modal > :not(.close), .menu-card > *, .tip, .ask-box, #status, .toast, .dr-head, .dr-foot, .draft-detail, #log li, .side .cc-body),
body.text-large .ccard:not(.modal .ccard, .draft-detail .ccard) { zoom: 1.15; }
.seg { display: inline-flex; border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .25); }
.seg button { padding: 6px 12px; font-family: var(--pixel); font-size: 8px; color: var(--ink); background: var(--parch-2); border: 0; cursor: var(--cur-hand), pointer; }
.seg button + button { border-left: 3px solid var(--ink); }
.seg button.on { background: var(--gold); box-shadow: inset 0 3px 0 #ffe9a6; }
/* ---------- Keyboard shortcuts (⚙ Settings → Battle) ---------- */
.key-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin-bottom: 8px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; background: var(--parch-2); border: 2px solid rgba(42, 28, 18, .25); }
.kr-name { font-weight: 700; }
.key-btn { min-width: 74px; padding: 4px 8px; font: inherit; font-weight: 700; background: #fff6dc; border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .25); cursor: var(--cur-hand), pointer; }
.key-btn.listening { background: var(--gold); animation: blink 1s steps(1) infinite; }
kbd { display: inline-block; min-width: 18px; padding: 1px 5px; font-family: var(--pixel); font-size: 8px; line-height: 1.6; text-align: center; color: var(--ink); background: #fff6dc; border: 2px solid var(--ink); border-bottom-width: 3px; }
.key-reset { text-align: right; }
/* each action's key, as a keycap in the button's bottom-left corner (always shown) */
.act .act-key { position: absolute; left: 1px; bottom: 1px; z-index: 3; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; font-size: 9px; line-height: 1; color: var(--ink); background: #fff6dc; border: 2px solid var(--ink); border-bottom-width: 3px; box-shadow: 1px 1px 0 rgba(20, 10, 4, .35); pointer-events: none; }
.act:disabled .act-key { opacity: .8; }
.act.sq.ghost .act-key { min-width: 0; height: 14px; padding: 0 2px; font-size: 7px; }
/* ---------- "Who acts next": the current player's heroes under the status ---------- */
.act-strip { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: -4px auto 6px; padding: 4px 10px; width: fit-content; max-width: 100%; background: rgba(243, 230, 196, .92); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .3); }
.act-strip.p0 { border-color: var(--blue-dark); }
.act-strip.p1 { border-color: var(--red-dark); }
.as-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; font-family: var(--pixel); font-size: 8px; }
.as-label .mark { width: 18px; height: 18px; font-size: 8px; }
.as-hero { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.as-hero img { width: 28px; height: 28px; image-rendering: pixelated; }
.as-hero.ready { cursor: var(--cur-hand), pointer; box-shadow: 0 0 0 2px #7fe08a; }
.as-hero.ready:hover { transform: translateY(-2px); }
.as-hero.sel { box-shadow: 0 0 0 3px var(--gold); }
.as-hero:not(.ready) { background: var(--wood-2); cursor: default; }
.as-hero:not(.ready) img { opacity: .55; filter: grayscale(.6); }
.as-state { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 17px; height: 17px; font-style: normal; font-size: 10px; line-height: 1; background: #fff6dc; border: 2px solid var(--ink); }
.as-hero.ready .as-state { color: #fff; background: #3f9a4a; font-size: 9px; }
@media (max-width: 700px) {
  .act-strip { margin: 0 auto 4px; padding: 3px 6px; gap: 4px; }
  .as-label { display: none; }
  .as-hero { width: 30px; height: 30px; }
  .as-hero img { width: 22px; height: 22px; }
}

/* ---------- The champion select (redesign): header, three columns, footer ---------- */
#draft.draft { display: flex; flex-direction: column; gap: 10px; }
.dr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px #fff6dc, 5px 5px 0 rgba(20, 10, 4, .35); }
.draft.p0 .dr-head { border-color: var(--blue-dark); }
.draft.p1 .dr-head { border-color: var(--red-dark); }
.draft.banning .dr-head { border-color: var(--red-dark); background: linear-gradient(90deg, rgba(208, 70, 60, .16), transparent 60%), var(--tile-parchment) 0 0 / 64px 64px, var(--parch); }
.dr-title { min-width: 0; }
.dr-title h2 { margin: 0 0 4px; font-family: var(--pixel); font-size: 12px; line-height: 1.5; display: flex; align-items: center; gap: 8px; }
.dr-title h2 .mark { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
.dr-title p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.35; }
.dr-head .draft-bans { margin: 0; justify-content: flex-end; }
.dr-head .draft-bans:empty { display: none; }
/* the turn tracker */
.dr-steps { display: flex; align-items: center; gap: 3px; padding: 4px 6px; background: rgba(42, 28, 18, .08); border: 2px solid rgba(42, 28, 18, .2); }
.dr-steps[hidden] { display: none; }
.ds { position: relative; display: grid; place-items: center; width: 28px; height: 28px; font-family: var(--pixel); font-size: 8px; color: var(--ink-soft);
  background: var(--parch-2); border: 2px solid var(--ink-soft); }
.ds.p0 { border-color: var(--blue); }
.ds.p1 { border-color: var(--red); }
.ds.ban { font-size: 12px; background: #f2d6cf; }
.ds.done { background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border-style: solid; }
.ds.done.ban { background: #b9b0a2; }
.ds.done img { width: 22px; height: 22px; image-rendering: pixelated; }
.ds.done.ban img { filter: grayscale(1) brightness(.8); }
.ds.now { border-width: 3px; border-color: var(--gold-dark); background: #ffe9a6; color: var(--ink); box-shadow: 0 0 0 2px var(--gold); animation: blink 1s steps(1) infinite; }
.ds-gap { width: 2px; }
/* the three columns */
.dr-body { display: grid; grid-template-columns: 240px minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.dr-body .draft-team-box { padding: 10px; gap: 8px; }
.dr-body .draft-team { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dr-body .draft-team .slot { width: auto; height: auto; aspect-ratio: 1; }
.dr-body .slot-tier { transform: scale(1.4); transform-origin: bottom right; right: -4px; bottom: -4px; }
.dr-body .syn-row.keep { flex-wrap: wrap; overflow: visible; align-content: flex-start; min-height: 52px; } /* room for 2 rows of chips: the box keeps its size as picks come in */
.dr-pool { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px; background: rgba(243, 230, 196, .9); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px #fff6dc, 5px 5px 0 rgba(20, 10, 4, .3); }
.dr-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-search { position: relative; flex: 1 1 180px; min-width: 140px; display: flex; }
.dr-search-ico { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; }
.dr-search .draft-search { width: 100%; padding-left: 30px; }
.dr-select { padding: 6px 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.dr-select:focus { outline: 3px solid var(--gold); }
.dr-facs { display: flex; gap: 4px; }
.dr-fac { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: #fff6dc; border: 3px solid var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.dr-fac .fac-ico { width: 22px; height: 22px; }
.dr-fac:hover { background: #fff; }
.dr-fac.on { background: var(--gold); box-shadow: inset 0 3px 0 #ffe9a6, 0 0 0 2px var(--gold-dark); }
.dr-count { margin-left: auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.dr-pool .draft-teams { justify-content: flex-start; margin: 0; }
.dr-pool .draft-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 12px; padding: 10px 6px 4px; }
.dr-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* the preview panel (wide screens; phones: the champion tapped, with its button) */
@media (min-width: 1100px) {
  .dr-side .draft-detail { display: block; position: static; max-height: none; overflow: visible; padding: 10px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
  .dr-side .draft-detail .info-empty { padding: 18px 8px; text-align: center; color: var(--ink-soft); }
}
/* the choice bar (.dr-foot, at the top under the turn tracker): what you picked, Skip ban, Random, Lock in */
.dr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: linear-gradient(#7a4f2c, #5a3a22); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3), 5px 5px 0 rgba(20, 10, 4, .35); }
.dr-choice { display: flex; align-items: center; gap: 10px; min-width: 0; color: #f3e6c4; text-shadow: 1px 1px 0 var(--wood-0); }
.dc-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.dr-choice.ban .dc-icon { background: #b9b0a2; }
.dc-icon img { width: 38px; height: 38px; image-rendering: pixelated; }
.dc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-text b { font-family: var(--pixel); font-size: 11px; color: #fff3c4; }
.dc-text small { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dr-choice.ban .dc-text b { color: #ffb0a8; }
.dr-foot .draft-buttons { margin: 0; flex-shrink: 0; }
.dr-foot #draft-confirm { min-width: 220px; }
/* big screens: the whole select fits the window; only the champions (and the preview) scroll */
@media (min-width: 1061px) {
  #draft.draft { height: 100%; min-height: 0; overflow: hidden; padding: 0 0 6px; }
  .dr-body { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .dr-pool { min-height: 0; }
  .dr-pool .draft-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
  .dr-side { min-height: 0; overflow-y: auto; padding: 0 2px 2px 0; }
  .dr-body > .draft-team-box { align-self: start; }
}
/* below big screens the page scrolls: the choice bar (Lock in) stays at the top of the window */
@media (max-width: 1060px) {
  .dr-foot { position: sticky; top: 0; z-index: 7; }
}
/* tablets: your team and the other one on the left, the champions on the right */
@media (max-width: 1099px) {
  .dr-body { grid-template-columns: 220px minmax(0, 1fr); }
  .dr-side { display: contents; }
  .dr-body > .draft-team-box.p0 { grid-column: 1; grid-row: 1; }
  .dr-side > .draft-team-box.p1 { grid-column: 1; grid-row: 2; align-self: start; }
  .dr-pool { grid-column: 2; grid-row: 1 / span 3; }
}
/* phones: one column; the choice bar stays at the top */
@media (max-width: 700px) {
  .dr-head { grid-template-columns: 1fr; gap: 6px; padding: 8px; }
  .dr-title p { display: none; }
  .dr-steps { overflow-x: auto; }
  .ds { width: 24px; height: 24px; flex-shrink: 0; }
  .dr-body { grid-template-columns: 1fr 1fr; gap: 6px; }
  .dr-body > .draft-team-box.p0 { grid-column: 1; grid-row: 1; }
  .dr-side > .draft-team-box.p1 { grid-column: 2; grid-row: 1; }
  .dr-pool { grid-column: 1 / -1; grid-row: 2; padding: 6px; }
  .dr-body .draft-team { grid-template-columns: repeat(6, 1fr); gap: 2px; }
  .dr-body .draft-team-box { padding: 5px; gap: 4px; }
  .dr-body .slot-tier { transform: none; }
  .dr-tools { gap: 5px; }
  .dr-search { flex-basis: 100%; }
  .dr-select { font-size: 13px; padding: 5px 6px; }
  .dr-fac { width: 32px; height: 32px; }
  .dr-count { display: none; }
  .dr-pool .draft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dr-foot { position: sticky; top: 0; z-index: 7; padding: 6px 8px; gap: 6px; }
  /* the champion tapped: its details at the bottom of the window (nothing while none is tapped) */
  .dr-side .draft-detail { grid-column: 1 / -1; grid-row: 3; bottom: 0; }
  .dr-side .draft-detail.empty { display: none; }
  .dr-foot .dc-text small { display: none; }
  .dr-foot #draft-confirm { min-width: 0; }
  .dc-icon { width: 36px; height: 36px; }
  .dc-icon img { width: 30px; height: 30px; }
}

/* ---------- Tournament: the match whose turn it is ---------- */
.tn-match.current { box-shadow: inset 0 0 0 2px #fff6dc, 0 0 0 3px var(--gold), 0 0 14px rgba(242, 193, 78, .7); }
.tn-match.current.mine { box-shadow: inset 0 0 0 2px var(--blue-soft), 0 0 0 3px var(--blue), 0 0 14px rgba(63, 116, 224, .6); }
.tn-match:not(.current):not(.done) { opacity: .8; }
.tn-banner.fight { background: linear-gradient(90deg, rgba(242, 193, 78, .45), transparent 75%), var(--parch-2); }
.tn-banner.slim { padding: 6px 12px; }
.tn-banner.slim .tn-trophy { font-size: 22px; }
.tn-vs-pets { display: flex; gap: 2px; }
.tn-countdown { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tn-cd-bar { flex: 0 0 140px; height: 10px; background: var(--wood-0); border: 2px solid var(--ink); }
.tn-cd-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, #ffd970 6px 12px); transition: width 1s linear; }
body.reduce-motion .tn-cd-bar i { transition: none; }
.tn-fight-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 700px) {
  .tn-banner.fight { flex-wrap: wrap; }
  .tn-fight-btns { width: 100%; }
  .tn-fight-btns .btn { flex: 1; }
  .tn-cd-bar { flex-basis: 90px; }
}

/* ---------- Holo champions' bubbles: a rainbow foil frame, and holo all the way in ---------- */
/* the frame: the border is the foil (border-box) under the pearly card (padding-box); both shift slowly */
.champ-bubble.legend,
.tip.rich:has(> .lt), .tip.rich:has(> .mt-tip.legend), .tip.rich:has(> .nt.holo) {
  border: 4px solid transparent !important;
  background: linear-gradient(125deg, #f4f0ff 0%, #ffd8f1 16%, #fff3c8 32%, #d2fff0 48%, #d3e9ff 64%, #e8d6ff 80%, #ffd8f1 100%) padding-box, linear-gradient(110deg, #ff8fd0, #ffd28f, #f7ff8f, #8fffc4, #8fd2ff, #b58fff, #ff8fd0) border-box !important;
  background-size: 300% 300%, 200% 100% !important;
  box-shadow: 0 0 0 2px #3f3680, 0 0 18px 4px rgba(180, 170, 255, .65), 6px 6px 0 rgba(20, 10, 4, .45) !important;
  animation: holo-frame 6s linear infinite;
}
.tip.rich:has(> .lt), .tip.rich:has(> .mt-tip.legend), .tip.rich:has(> .nt.holo) { padding: 0; }
/* a holo champion's tier bubble: the foil frame, its tier's colors inside */
@keyframes holo-frame { 0% { background-position: 0% 50%, 0% 0; } 50% { background-position: 100% 50%, 100% 0; } 100% { background-position: 0% 50%, 0% 0; } }
body.reduce-motion .champ-bubble.legend, body.reduce-motion .tip.rich:has(> .lt), body.reduce-motion .tip.rich:has(> .mt-tip.legend), body.reduce-motion .tip.rich:has(> .nt.holo) { animation: none; }
/* the cards inside fill the frame (their own border would double it) */
.tip.rich > .lt { border: 0; box-shadow: none; }
.tip.rich > .mt-tip.legend { border-left: 0; background: transparent; }
.champ-bubble.legend .ccard.legend { background: transparent !important; animation: none; }
/* holo insides: violet-white instead of parchment */
.ccard.legend .cc-sec { border-top-color: rgba(127, 116, 196, .45); box-shadow: 0 -1px 0 rgba(255, 255, 255, .75); }
.ccard.legend .cc-status span { background: rgba(255, 255, 255, .55); border-color: #7f74c4; }
.ccard.legend .fac-block { background: rgba(255, 255, 255, .55); border-top-color: #a99ce0; border-right-color: #a99ce0; border-bottom-color: #a99ce0; } /* the faction's color stays on the left */
.ccard.legend .fac-row.on { background: rgba(200, 230, 255, .6); }
.ccard.legend .info-icon { border-color: #7f74c4; box-shadow: 0 0 0 2px #f2efff, 0 0 8px rgba(170, 200, 255, .8); }
.ccard.legend .in-role, .ccard.legend .fac-tag, .ccard.legend small { color: #4a4290 !important; }
.tip.rich > .nt.holo { border: 0 !important; box-shadow: none !important; background: transparent !important; } /* the foil frame is its border */
.nt.holo .nt-stat { background: rgba(255, 255, 255, .55); border-color: #a99ce0; }
.nt.holo .nt-foot, .nt.holo .nt-progress { background: rgba(240, 236, 255, .75); border-top-color: #a99ce0; }

/* ---------- The CPU's turn: its own marks (never your selection or aiming look) ---------- */
.cell.cpu-actor { outline: 4px dashed var(--red); outline-offset: 2px; z-index: 2; cursor: default; }
.cell.cpu-actor.p0 { outline-color: var(--blue); } /* a watched tournament match: Blue can be the CPU too */
.cell.cpu-actor::before { content: '🤖'; position: absolute; z-index: 4; top: -12px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 24px; height: 22px; font-size: 13px; background: var(--parch); border: 2px solid var(--ink); }
.cell.cpu-target, .cell.cpu-target:hover { cursor: default !important; outline: 4px dashed #ff9a3c; outline-offset: -4px; animation: px-blink-red .6s steps(1) infinite; }
.cell.cpu-target::before { content: '🎯'; position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 26px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .45)); pointer-events: none; }
.cell.cpu-move { cursor: default !important; outline: 4px dashed #ff9a3c; outline-offset: -10px; }
/* the strip when it isn't your turn: dimmed, nothing to click */
.act-strip.idle { opacity: .8; }
.act-strip.idle .as-hero, .act-strip.idle .as-hero.ready { cursor: default; box-shadow: none; transform: none !important; }
.act-strip.idle .as-hero.ready .as-state { background: #8a8478; }

/* a Holo legendary chest card: the holo foil inside the legendary gold ring */
.loot-card.holo.r-legendary { border-color: #b4701a !important; box-shadow: 0 0 0 3px #f2c14e, 0 0 0 6px #d9d2ff, 0 0 30px 10px rgba(200, 170, 255, .8); }
.loot-card.holo .loot-rarity { background: linear-gradient(110deg, #ff8fd0, #ffd28f, #8fffc4, #8fd2ff, #b58fff); text-shadow: 1px 1px 0 var(--ink); }
.loot-card.holo.r-legendary .loot-rarity { background: linear-gradient(110deg, #f6c94a, #ff8fd0, #8fd2ff, #b58fff, #f6c94a); }

/* ---------- Avatar Lab (a preview: js/avatar.js) ---------- */
.mtile.avatar .mt-ico { background: linear-gradient(135deg, rgba(139, 92, 246, .55), rgba(79, 195, 247, .45)); }
.mt-beta, .av-beta { flex-shrink: 0; font-family: var(--pixel); font-size: 7px; line-height: 1.6; padding: 1px 5px; color: #fff; background: #8b5cf6; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); vertical-align: middle; }
.av-modal { max-width: 1180px; }
.av-intro { margin: -6px 0 10px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.av-body { display: grid; grid-template-columns: 214px minmax(0, 1fr) 300px; gap: 10px; height: min(620px, calc(90vh - 190px)); min-height: 470px; }
.av-col { min-height: 0; padding: 8px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.av-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; font-family: var(--pixel); font-size: 9px; line-height: 1.4; }
.av-h small { font-family: var(--body); font-size: 12px; color: var(--ink-soft); }
.av-h .dr-select { margin-left: auto; max-width: 150px; padding: 3px 6px; font-size: 13px; }
/* the shapes */
.av-lib { overflow-y: auto; }
.av-shape-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.av-shape { display: grid; place-items: center; aspect-ratio: 1; padding: 0; background: var(--parch); border: 2px solid var(--ink); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .15); cursor: pointer; }
.av-shape:hover { background: #fff3c8; transform: translateY(-1px); }
.av-shape:active { transform: translateY(1px); }
.av-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.av-example { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; font-family: var(--body); font-size: 12px; color: var(--ink); background: var(--parch); border: 2px solid var(--ink); cursor: pointer; }
.av-example:hover { background: #fff3c8; }
/* the workbench */
.av-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #f3e6c4; background: linear-gradient(#6a4528, #3b2414); box-shadow: inset 0 0 0 2px rgba(255, 220, 160, .2); }
.av-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#av-clear { min-width: 150px; }
#av-clear.armed { background: #d0463c; }
.av-canvas { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
#av-svg { height: 100%; max-height: 400px; max-width: 100%; aspect-ratio: 1; touch-action: none; user-select: none; background: repeating-conic-gradient(#4a3020 0 25%, #57392a 0 50%) 0 0 / 20px 20px; border: 3px solid var(--wood-0); box-shadow: 0 0 0 2px rgba(255, 220, 160, .25); }
#av-svg [data-id] { cursor: grab; }
.av-sel { filter: drop-shadow(0 0 1px #000); }
.av-sel > rect:first-child { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: none; }
.av-sel line { stroke: #fff; stroke-width: 1.2; pointer-events: none; }
.av-h-rot, .av-h-size { fill: var(--gold); stroke: #1e120a; stroke-width: 1.6; pointer-events: all; cursor: grab; }
.av-h-size { cursor: nwse-resize; }
.av-hint { margin: 0; max-width: 520px; font-size: 12px; line-height: 1.35; text-align: center; opacity: .85; }
.av-note { min-height: 16px; margin: 0; font-size: 13px; color: #ffb0a8; }
.av-note.flash { animation: blink .4s steps(1) 4; }
.av-pixel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
.av-pixel canvas { image-rendering: pixelated; border: 2px solid var(--wood-0); background: repeating-conic-gradient(#4a3020 0 25%, #57392a 0 50%) 0 0 / 8px 8px; }
.av-pixel canvas[data-px="48"] { width: 96px; height: 96px; }
.av-pixel canvas[data-px="24"] { width: 48px; height: 48px; }
/* the layer being edited, and the pile of layers */
.av-side { display: grid; grid-template-rows: 318px minmax(0, 1fr); gap: 8px; }
.av-props { min-height: 0; overflow-y: auto; padding-right: 2px; }
.av-field { margin-bottom: 8px; }
.av-label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; }
.av-swatches { display: grid; grid-template-columns: repeat(9, minmax(0, 28px)); gap: 3px; }
.av-sw { position: relative; aspect-ratio: 1; padding: 0; background: var(--c); border: 2px solid var(--ink); cursor: pointer; }
.av-sw.on { outline: 2px solid #fff; outline-offset: -5px; box-shadow: 0 0 0 2px var(--gold); }
.av-slider { display: grid; grid-template-columns: 70px minmax(0, 1fr) 44px; align-items: center; gap: 6px; margin: 2px 0; font-size: 13px; }
.av-slider input { width: 100%; accent-color: var(--wood-3); }
.av-slider b { font-size: 12px; text-align: right; }
.av-flips { display: flex; gap: 4px; margin-top: 6px; }
.av-flips .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.av-flips .btn.on { color: var(--ink); background: var(--gold); text-shadow: none; }
.av-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.av-frame { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; font-family: var(--body); font-size: 11px; color: var(--ink); background: var(--parch); border: 2px solid var(--ink); cursor: pointer; }
.av-frame.on { background: #fff3c8; box-shadow: 0 0 0 2px var(--gold); }
.av-layers-box { display: flex; flex-direction: column; min-height: 0; padding-top: 6px; border-top: 3px dashed rgba(59, 36, 20, .35); }
.av-layers-box .av-h { margin-bottom: 4px; }
.av-layer-tools { display: flex; gap: 3px; }
.av-layer-tools .btn { flex: 1; min-width: 0; padding: 5px 0; }
.av-front-label { margin: 4px 0 2px; font-size: 11px; color: var(--ink-soft); }
.av-layers { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.av-layer { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 13px; background: var(--parch); border: 2px solid transparent; cursor: pointer; }
.av-layer:hover { background: #f6e6bd; }
.av-layer.on { background: #fff3c8; border-color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.av-layer.bg { background: #e2cb94; }
.av-layer.bg.on { background: #fff3c8; }
.av-layer.off .av-thumb, .av-layer.off .av-lname { opacity: .4; }
.av-ln { width: 18px; flex-shrink: 0; font-size: 11px; text-align: center; color: var(--ink-soft); }
.av-lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-eye { padding: 0 4px; font-size: 14px; background: none; border: 0; cursor: pointer; }
.av-empty { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft); }
.av-thumb { flex-shrink: 0; }
.av-layer .av-thumb, .av-h .av-thumb { padding: 1px; background: repeating-conic-gradient(#4a3020 0 25%, #57392a 0 50%) 0 0 / 8px 8px; border: 2px solid var(--ink); }
.av-ico, .av-layer-tools .btn { font-family: var(--body); font-size: 15px; line-height: 1; vertical-align: -1px; }
.av-layer-tools .btn { font-size: 16px; }
/* tablets: the shapes and the workbench side by side, the layer tools under them */
@media (max-width: 1040px) {
  .av-body { grid-template-columns: 190px minmax(0, 1fr); height: auto; min-height: 0; }
  .av-lib, .av-stage { height: 520px; }
  .av-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: 320px; }
  .av-layers-box { padding-top: 0; padding-left: 8px; border-top: 0; border-left: 3px dashed rgba(59, 36, 20, .35); }
}
/* phones: one column, the workbench first */
@media (max-width: 640px) {
  .av-body { grid-template-columns: minmax(0, 1fr); }
  .av-stage { order: -1; height: auto; }
  .av-canvas { flex: none; }
  #av-svg { width: 100%; height: auto; max-width: 340px; }
  .av-lib { height: auto; max-height: 230px; }
  .av-shape-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .av-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 280px; }
  .av-props { overflow: visible; }
  .av-layers-box { padding: 6px 0 0; border-left: 0; border-top: 3px dashed rgba(59, 36, 20, .35); }
  .av-hint { display: none; }
}

/* ---------- Delete buttons (dark red, a pixel bin) and the "are you sure?" box (js/ask.js) ---------- */
.btn.del { color: #fff; background: linear-gradient(#a3262f, #74141d); text-shadow: 2px 2px 0 #3d0710; box-shadow: inset 3px 3px 0 #c9505a, inset -3px -4px 0 #4f0b13, 0 4px 0 var(--wood-0); }
.btn.del:hover:not(:disabled) { background: linear-gradient(#b52d37, #831822); }
.btn.del:active:not(:disabled) { box-shadow: inset 3px 3px 0 #c9505a, inset -3px -4px 0 #4f0b13, 0 1px 0 var(--wood-0); }
.ico-bin { display: inline-block; width: 12px; height: 13px; vertical-align: -2px; filter: drop-shadow(1px 1px 0 rgba(40, 4, 10, .7)); }
.tm-del { display: inline-grid; place-items: center; min-width: 38px; padding-left: 8px; padding-right: 8px; }
.tm-del .ico-bin { width: 14px; height: 15px; vertical-align: 0; }
.ask-overlay { z-index: 90; }
.ask-box { width: min(400px, 100%); text-align: left; background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 4px solid var(--ink); box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 8px 8px 0 rgba(20, 10, 4, .55); animation: chest-pop .25s steps(3); }
.ask-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff3c4; background: linear-gradient(#7a4f2c, #5a3a22); border-bottom: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3); }
.ask-box.danger .ask-head { background: repeating-linear-gradient(135deg, #8f1f2b 0 10px, #7d1a25 10px 20px); box-shadow: inset 0 3px 0 rgba(255, 170, 170, .3); }
.ask-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; font-size: 22px; line-height: 1; color: #8f1f2b; background: var(--parch); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3); }
.ask-icon .ico-bin { width: 22px; height: 24px; vertical-align: 0; filter: none; }
.ico-flag { display: inline-block; width: 15px; height: 14px; vertical-align: -2px; }
.ask-icon .ico-flag { width: 26px; height: 24px; vertical-align: 0; color: var(--ink); }
.ask-head h3 { margin: 0; font-family: var(--pixel); font-size: 11px; font-weight: normal; line-height: 1.5; text-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.ask-text { padding: 12px 14px 4px; font-size: 15px; line-height: 1.4; }
.ask-text p { margin: 0 0 8px; }
.ask-card { margin: 0 0 10px; padding: 6px 8px; font-size: 14px; background: var(--parch-2); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.ask-team { display: flex; flex-direction: column; gap: 6px; }
.ask-team b { font-family: var(--pixel); font-size: 9px; line-height: 1.4; font-weight: normal; }
.ask-team .tm-champs { flex-wrap: wrap; }
.ask-good { font-weight: 700; color: #2f6b2a; }
.ask-buttons { display: flex; gap: 10px; padding: 8px 14px 14px; }
.ask-buttons .btn { flex: 1; min-width: 0; }

/* ---------- Saved teams, compact: a fold in the profile, a dropdown in a Fast match ---------- */
.tm-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 10px; text-align: left; font: inherit; color: var(--ink); background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 2px 2px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.tm-toggle:hover { background: #e6d099; }
.tm-toggle h3 { flex-shrink: 0; }
.tm-chev { display: inline-block; flex-shrink: 0; font-size: 11px; transition: transform .15s steps(2); }
.tm-toggle.open .tm-chev { transform: rotate(90deg); }
.tm-peek { display: flex; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tm-peek-team { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 2px 4px 2px 7px; background: #fff6dc; border: 2px solid var(--ink); }
.tm-peek-team b { font-size: 13px; }
.tm-peek-icons { display: inline-flex; gap: 1px; padding: 1px; background: var(--tile-grass) 0 0 / 32px 32px, #5d9e3c; border: 2px solid var(--ink); }
.tm-peek-icons img { width: 18px; height: 18px; image-rendering: pixelated; }
.tm-peek i { font-size: 13px; color: var(--ink-soft); }
.tm-list[hidden] { display: none; }
.tm-head { margin-bottom: 10px; }

/* the saved teams' dropdown (a Fast match): a parchment button, and a wooden list of teams with their champions */
#draft-teams.draft-teams { display: block; margin: 0; }
#draft-teams[hidden] { display: none; }
.tdrop { position: relative; z-index: 8; }
.tdrop-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; font: inherit; font-size: 14px; font-weight: 700; text-align: left; color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); box-shadow: inset 0 -3px 0 var(--parch-3), 2px 2px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.tdrop-btn:hover { background: #fff; }
.tdrop.open .tdrop-btn { background: var(--gold); box-shadow: inset 0 3px 0 #ffe9a6, 0 0 0 2px var(--gold-dark); }
.tdrop-star { font-size: 15px; }
.tdrop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdrop-peek { display: inline-flex; }
.tdrop-peek img { width: 22px; height: 22px; margin-left: -6px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(20, 10, 4, .4)); }
.tdrop-chev { font-size: 10px; transition: transform .15s steps(2); }
.tdrop.open .tdrop-chev { transform: rotate(180deg); }
.tdrop-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; gap: 4px; max-height: 340px; padding: 6px; overflow-y: auto; background: linear-gradient(#7a4f2c, #5a3a22); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3), 6px 6px 0 rgba(20, 10, 4, .45); animation: tdrop-in .15s steps(3); }
@keyframes tdrop-in { from { transform: translateY(-8px); opacity: .3; } }
.tdrop-list[hidden] { display: none; }
.tdrop-item { display: grid; grid-template-columns: minmax(80px, 150px) auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 5px 8px; font: inherit; text-align: left; color: var(--ink); background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3); cursor: var(--cur-hand), pointer; }
.tdrop-item:hover, .tdrop-item:focus-visible { background: #fff3c8; outline: none; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold); }
.tdrop-name { font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdrop-champs { display: flex; gap: 3px; }
.tdrop-champ { position: relative; display: grid; place-items: center; width: 32px; height: 32px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 2px solid var(--ink); }
.tdrop-champ img { width: 26px; height: 26px; image-rendering: pixelated; }
.tdrop-champ.off { background: var(--wood-2); }
.tdrop-champ.off img { opacity: .35; filter: grayscale(1); }
.tdrop-champ.off::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: #ff8a80; text-shadow: 1px 1px 0 var(--ink); }
.tdrop-syn { display: flex; gap: 3px; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tdrop-syn .syn-name { display: none; }
@media (max-width: 700px) {
  .tdrop-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tdrop-syn { display: none; }
  .tdrop-champ { width: 28px; height: 28px; }
  .tdrop-champ img { width: 22px; height: 22px; }
}
/* the name of a saved team: 16 characters at most, counted */
.te-count { flex-shrink: 0; font-size: 12px; color: var(--ink-soft); }
.te-count.full { color: var(--red-dark); font-weight: 700; }

/* ---------- The Gauntlet (js/gauntlet.js) ---------- */
.modal.gauntlet { max-width: 900px; width: 100%; }
.gauntlet-body { display: flex; flex-direction: column; gap: 12px; }
.gt-hero { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; background: linear-gradient(90deg, rgba(208, 70, 60, .16), transparent 70%), var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.gt-hero p { margin: 0 0 8px; line-height: 1.45; }
.gt-hero-ico { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; font-size: 28px; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3); }
.gt-best { display: block; margin-top: 6px; color: var(--ink-soft); }
/* the floors, as a path */
.gt-path { display: flex; align-items: flex-start; justify-content: safe center; gap: 0; padding: 10px 8px 6px; background: linear-gradient(#5a3a22, #3b2414); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .25); overflow-x: auto; }
.gt-path.small { justify-content: flex-start; padding: 6px 8px; background: none; border: 0; box-shadow: none; }
.gt-step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; flex-shrink: 0; text-align: center; }
.gt-step small { font-size: 11px; line-height: 1.2; color: #f3e6c4; opacity: .8; }
.gt-node { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; font-family: var(--pixel); font-size: 10px; color: var(--ink); background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.gt-path.small .gt-node { width: 26px; height: 26px; font-size: 8px; }
.gt-node.boss, .gt-step.boss .gt-node { background: #d0463c; color: #fff; font-size: 15px; box-shadow: inset 0 0 0 2px rgba(255, 200, 190, .5); }
.gt-step.done .gt-node { color: #fff; background: #5d9e3c; }
.gt-step.done small { opacity: .55; }
.gt-step.now .gt-node { background: var(--gold); box-shadow: 0 0 0 3px #ffe9a6, 0 0 14px rgba(242, 193, 78, .9); animation: blink 1s steps(1) infinite alternate; }
.gt-step.now small { opacity: 1; font-weight: 700; color: #ffe08a; }
.gt-step.lost .gt-node { background: #2b2b2b; color: #ff8a80; }
.gt-link { flex: 1 0 10px; max-width: 40px; height: 4px; margin-top: 15px; background: repeating-linear-gradient(90deg, #c08a52 0 6px, transparent 6px 10px); }
.gt-path.small .gt-link { margin-top: 11px; max-width: 18px; }
/* choosing the team */
.gt-saved-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gt-saved { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; font: inherit; font-size: 13px; color: var(--ink); background: #fff6dc; border: 2px solid var(--ink); cursor: var(--cur-hand), pointer; }
.gt-saved:hover { background: #fff; }
.gt-saved span { display: inline-flex; }
.gt-saved img { width: 20px; height: 20px; margin-right: -3px; image-rendering: pixelated; }
.gt-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.gt-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; font: inherit; color: var(--ink); background: var(--parch); border: 3px solid var(--ink); box-shadow: inset -2px -2px 0 var(--parch-3); cursor: var(--cur-hand), pointer; }
.gt-pick:hover:not(:disabled) { background: #fff3c8; }
.gt-pick:disabled { opacity: .5; cursor: default; }
.gt-pick.on { background: #fff3c8; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px var(--gold); }
.gt-pick small { font-size: 12px; }
.gt-pick-art, .gt-champ-art { position: relative; display: grid; place-items: center; width: 48px; height: 48px; background: var(--tile-grass) 0 0 / 64px 64px, #5d9e3c; border: 3px solid var(--ink); }
.gt-pick-art img, .gt-champ-art img { width: 40px; height: 40px; image-rendering: pixelated; }
.gt-tier { position: absolute; right: -7px; bottom: -7px; transform: scale(.75); }
.gt-pick-n { position: absolute; top: 3px; left: 4px; display: grid; place-items: center; width: 20px; height: 20px; font-family: var(--pixel); font-size: 8px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
.gt-rules { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.gt-start-row { display: flex; justify-content: flex-end; gap: 10px; }
.gt-start-row .btn.primary { min-width: 220px; }
/* the run */
.gt-run { display: flex; flex-direction: column; gap: 12px; }
.gt-foe.boss { background: linear-gradient(90deg, rgba(208, 70, 60, .3), transparent 75%), var(--parch-2); border-color: #8f1f2b; }
.gt-warn { display: block; color: var(--red-dark); font-weight: 700; }
.gt-note { margin: 0; padding: 6px 10px; font-weight: 700; color: #5a2d82; background: #efe3ff; border: 2px solid var(--ink); }
.gt-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.gt-box { padding: 8px 10px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.gt-box .tn-h { margin-top: 0; }
.gt-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gt-champ { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: var(--parch); border: 2px solid var(--ink); }
.gt-champ.fallen { background: #cdbf9c; }
.gt-champ.fallen .gt-champ-art { background: var(--wood-2); }
.gt-champ-art { width: 40px; height: 40px; flex-shrink: 0; }
.gt-champ-art img { width: 32px; height: 32px; }
.gt-champ-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gt-champ-body b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-champ-body small { font-size: 11px; color: var(--ink-soft); }
.gt-fallen { font-weight: 700; color: var(--red-dark) !important; }
.gt-hp { display: block; height: 8px; background: #3b2414; border: 2px solid var(--ink); }
.gt-hp i { display: block; height: 100%; background: linear-gradient(#7ee05a, #4caf3a); }
.gt-hp.low i { background: linear-gradient(#ff8a6a, #d0463c); }
.gt-relics { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.gt-relic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; font-size: 22px; background: radial-gradient(circle, #fff6dc, #e8d29a); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff, 0 0 8px rgba(176, 140, 255, .55); cursor: help; }
.gt-relic.tiny { display: inline-grid; width: 22px; height: 22px; font-size: 12px; border-width: 2px; vertical-align: middle; box-shadow: none; }
.gt-used { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 11px; color: #fff; background: #5d9e3c; border: 2px solid var(--ink); padding: 0 2px; }
.gt-sum { margin: 10px 0 0; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.gt-foot { display: flex; justify-content: flex-end; }
.gt-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
/* the rewards */
.gt-reward { padding: 10px; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3); }
.gt-reward .tn-h { color: #ffe08a; margin: 0 0 10px; text-shadow: 2px 2px 0 rgba(0, 0, 0, .4); }
.gt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gt-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 30px; font: inherit; text-align: center; color: var(--ink); background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 4px solid var(--ink); box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 var(--parch-3), 4px 4px 0 rgba(20, 10, 4, .45); cursor: var(--cur-hand), pointer; animation: tdrop-in .25s steps(3); }
.gt-card:hover, .gt-card:focus-visible { transform: translateY(-3px); outline: none; box-shadow: inset 3px 3px 0 #fff6dc, 0 0 0 3px var(--gold), 0 0 18px rgba(242, 193, 78, .8); }
.gt-card-ico { display: grid; place-items: center; width: 58px; height: 58px; font-size: 32px; background: radial-gradient(circle, #fff6dc, #e8d29a); border: 3px solid var(--ink); box-shadow: 0 0 12px rgba(176, 140, 255, .6); }
.gt-card.rest .gt-card-ico { box-shadow: 0 0 12px rgba(255, 150, 60, .8); }
.gt-card.revive .gt-card-ico { box-shadow: 0 0 12px rgba(255, 110, 80, .8); }
.gt-card b { font-family: var(--pixel); font-size: 10px; font-weight: normal; line-height: 1.4; }
.gt-card small { font-size: 13px; line-height: 1.35; }
.gt-card-kind { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); padding: 1px 6px; font-family: var(--pixel); font-size: 7px; color: #fff; background: #8b5cf6; border: 2px solid var(--ink); white-space: nowrap; }
.gt-card.rest .gt-card-kind { background: #d4881a; }
.gt-card.revive .gt-card-kind { background: #d0463c; }
/* the roster during the placement: a Gauntlet champion that fell can't be placed */
.class-card.fallen { filter: grayscale(.8); }
.class-card.fallen .cc-count { color: var(--red-dark); font-weight: 700; }
.class-card .cc-stats small { font-size: .8em; opacity: .7; }
@media (max-width: 700px) {
  .gt-cols { grid-template-columns: minmax(0, 1fr); }
  .gt-cards { grid-template-columns: minmax(0, 1fr); }
  .gt-card { flex-direction: row; text-align: left; padding: 10px 10px 26px; }
  .gt-step { width: 58px; }
  .gt-step small { font-size: 9px; }
  .gt-hero-ico { display: none; }
}

/* ---------- Big moments: the screen shake, the announcer, the MVP's pose ---------- */
.board.quake-s { animation: quake-s .22s steps(4); }
.board.quake-l { animation: quake-l .45s steps(8); }
@keyframes quake-s { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -1px); } }
@keyframes quake-l {
  12% { transform: translate(-7px, 3px) rotate(-.4deg); } 25% { transform: translate(7px, -4px) rotate(.4deg); } 37% { transform: translate(-6px, -2px); }
  50% { transform: translate(5px, 4px); } 62% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, -2px); } 87% { transform: translate(-1px, 1px); }
}
.announce { position: absolute; left: 50%; top: 42%; z-index: 30; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; animation: announce var(--dur, 1.8s) steps(12) forwards; }
.announce span { display: inline-block; padding: 8px 16px; font-family: var(--pixel); font-size: 16px; color: #fff3c4; background: linear-gradient(#7a4f2c, #3b2414); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35), 5px 5px 0 rgba(20, 10, 4, .5), 0 0 24px rgba(255, 200, 80, .55); text-shadow: 2px 2px 0 var(--ink); }
.announce.p0 span { background: linear-gradient(#4a7ee8, #213f8f); }
.announce.p1 span { background: linear-gradient(#e0574c, #8f2f28); }
.announce.big span { font-size: 22px; padding: 10px 20px; color: #ffe36b; }
@keyframes announce {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(.92); }
  20% { transform: translate(-50%, -50%) scale(1.05); }
  28%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1); }
}
.go-mvp { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px auto 12px; padding: 8px 14px 8px 8px; width: fit-content; max-width: 100%; text-align: left; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .3); isolation: isolate; }
.go-mvp.p0 { border-color: var(--blue-dark); }
.go-mvp.p1 { border-color: var(--red-dark); }
.go-mvp-rays { position: absolute; left: 8px; top: 50%; z-index: -1; width: 72px; height: 72px; margin-top: -36px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 215, 90, .75) 0 12deg, transparent 12deg 30deg); animation: rays-spin 6s linear infinite; }
.go-mvp-art { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; }
.go-mvp-art img { width: 60px; height: 60px; image-rendering: pixelated; filter: drop-shadow(2px 3px 0 rgba(20, 10, 4, .45)); animation: mvp-pose 1.6s steps(8) infinite; transform-origin: 50% 100%; }
.go-mvp-art.legend img { filter: drop-shadow(1px 0 0 #8fd2ff) drop-shadow(-1px 0 0 #ff8fd0) drop-shadow(0 0 6px rgba(190, 170, 255, .9)); }
@keyframes mvp-pose {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(2px) scale(1.1, .88); }
  35% { transform: translateY(-14px) scale(.95, 1.08) rotate(-6deg); }
  50% { transform: translateY(-16px) scale(1, 1) rotate(6deg); }
  70% { transform: translateY(0) scale(1.08, .92); }
  85% { transform: translateY(0) scale(1, 1); }
}
.go-mvp-plate { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.go-mvp-tag { width: fit-content; padding: 1px 6px; font-family: var(--pixel); font-size: 9px; font-weight: normal; color: var(--ink); background: linear-gradient(#ffe36b, #f2b734); border: 2px solid var(--ink); }
.go-mvp-name { font-family: var(--pixel); font-size: 11px; line-height: 1.4; }
.go-mvp small { font-size: 13px; color: var(--ink-soft); }
body.reduce-motion .go-mvp-art img, body.reduce-motion .go-mvp-rays { animation: none; }

/* ---------- ⚡ Quick play (main menu) ---------- */
.mtile.quick { color: var(--ink); background: linear-gradient(#bfe6ff, #6fb2ea); }
.mtile.quick .mt-text small { color: #1d3f66; }
.mtile.quick .mt-text b { text-shadow: none; }
.mtile.quick .mt-ico { background: rgba(255, 255, 255, .5); }
.mq-team { display: flex; flex-shrink: 0; }
.mq-team img { width: 24px; height: 24px; margin-left: -6px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(20, 10, 4, .45)); }
/* ---------- 📈 Momentum (📊 Stats) ---------- */
/* ---------- 💡 Draft hints ---------- */
.draft-hint { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 8px 10px; list-style: none; font-size: 13px; line-height: 1.35; background: #fff6dc; border: 2px solid var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.draft-hint b { font-size: 14px; }
.draft-hint .muted { color: var(--ink-soft); }
.dh-weak { color: var(--red-dark); }
.dh-strong { color: #2f6b2a; }
.dh-they { padding: 0 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--red-dark); border: 1px solid var(--ink); }
/* ---------- 📰 What's new ---------- */
.modal.news { max-width: 560px; }
.news-body { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.news-date { margin: 0 0 6px; font-family: var(--pixel); font-size: 9px; color: var(--ink-soft); }
.news-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.news-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; background: var(--parch-2); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.news-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; font-size: 18px; background: #fff6dc; border: 2px solid var(--ink); }
.news-list b { font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.5; }
.news-list p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.news-ok { display: block; margin: 14px auto 0; min-width: 200px; }

/* ---------- ⚙ Settings (overhaul): a wooden sign, the sections in a column, each section's pane ---------- */
.modal.settings { max-width: 1020px; height: min(760px, calc(100vh - 32px)); padding: 18px 20px 20px; }
.set-sign { position: relative; align-self: flex-start; flex-shrink: 0; padding: 9px 26px 8px; background: linear-gradient(#9c6a3c, #7a4f2c 55%, #5a3a22); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 4px 4px 0 rgba(20, 10, 4, .35); }
.set-sign::before, .set-sign::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: #d8c08a; border: 2px solid var(--ink); }
.set-sign::before { left: 7px; }
.set-sign::after { right: 7px; }
.set-sign h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: #fff3c4; text-shadow: 2px 2px 0 var(--wood-0); letter-spacing: 1px; }
.set-sign-ico { display: inline-block; font-size: 18px; animation: set-cog 6s linear infinite; }
@keyframes set-cog { to { transform: rotate(360deg); } }
body.reduce-motion .set-sign-ico { animation: none; }
.set-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 16px; margin-top: 14px; transition: grid-template-columns .2s steps(4); }
/* the column of sections */
.set-nav { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px; overflow-y: auto; background: linear-gradient(#6a4528, #4a2f1a); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .25), 4px 4px 0 rgba(20, 10, 4, .3); }
.set-tab { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px 6px 6px; font: inherit; text-align: left; color: var(--ink); background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 var(--parch-3); cursor: var(--cur-hand), pointer; transition: transform .08s steps(2); }
.set-tab:hover { background: #f3e2b4; transform: translateX(2px); }
.set-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.set-tab.on { background: linear-gradient(90deg, #ffe48a, var(--gold)); transform: translateX(6px); box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 var(--gold-dark), 3px 3px 0 rgba(20, 10, 4, .4); }
.set-tab.on::after { content: ''; position: absolute; right: -14px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 8px solid var(--ink); }
.st-ico { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; font-size: 18px; line-height: 1; background: radial-gradient(circle at 35% 30%, #fff6dc, var(--parch) 65%, var(--parch-3)); border: 2px solid var(--ink); }
.set-tab.on .st-ico { background: radial-gradient(circle at 35% 30%, #fff, #fff3c4 60%, #f2c14e); }
.st-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-txt b { font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.4; }
.st-txt small { font-size: 12px; line-height: 1.2; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav-sep { flex: 1 1 8px; min-height: 8px; border-bottom: 3px dashed rgba(255, 220, 160, .3); margin-bottom: 4px; }
.set-tab.guide-tab:not(.on) { background: linear-gradient(#cfe4ff, #a9c9f0); }
/* How to play has its own list: the column folds to its icons */
.set-layout.compact { grid-template-columns: 64px minmax(0, 1fr); }
.set-layout.compact .set-tab { justify-content: center; padding: 6px 0; }
.set-layout.compact .st-txt { display: none; }
.set-layout.compact .set-tab.on { transform: translateX(3px); }
/* the panes */
.set-panes { min-height: 0; overflow-y: auto; padding: 2px 10px 12px 4px; }
.set-pane { animation: tip-in .15s steps(3); }
.set-pane:not(.guide) > * { max-width: 740px; }
.set-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 14px; background: linear-gradient(120deg, #fff3c8, var(--parch-2) 70%); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 4px 4px 0 rgba(20, 10, 4, .25); }
.set-head-ico { display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; font-size: 28px; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35); }
.set-head h3 { margin: 0 0 4px; font-family: var(--pixel); font-size: 13px; font-weight: normal; }
.set-head p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.set-sub { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; font-family: var(--pixel); font-size: 9px; font-weight: normal; color: var(--ink-soft); }
.set-sub::after { content: ''; flex: 1; border-top: 3px dashed rgba(59, 36, 20, .3); }
/* a group of settings: one card, its rows split by dashed lines */
.set-group { display: flex; flex-direction: column; margin-bottom: 12px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .22); }
.set-group > .setting-row { padding: 10px 12px; background: transparent; border: 0; border-bottom: 2px dashed rgba(59, 36, 20, .25); }
.set-group > .setting-row:last-child, .set-group > .setting-row:has(+ .gift-result:empty), .set-group > .setting-row:has(+ .setting-row[hidden]:last-child) { border-bottom: 0; }
.set-group > .setting-row:hover { background: rgba(255, 246, 220, .45); }
.set-group > .gift-result { margin: 0; padding: 0 12px 10px; }
.set-group > .gift-result:empty { display: none; }
/* the switches */
.modal.settings .toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 104px; padding: 4px 10px 4px 4px; font-size: 14px; background: #fff6dc; border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff, 0 3px 0 var(--wood-0); cursor: var(--cur-hand), pointer; }
.modal.settings .toggle:hover { background: #fff; }
.modal.settings .toggle b { min-width: 30px; font-family: var(--pixel); font-size: 8px; font-weight: normal; }
.sw-track { position: relative; flex-shrink: 0; width: 46px; height: 24px; background: #5d9e3c; border: 2px solid var(--ink); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25); transition: background .12s steps(2); }
.sw-knob { position: absolute; top: 1px; left: 23px; width: 18px; height: 18px; background: linear-gradient(#fffaf0, #e8d6a8); border: 2px solid var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); transition: left .12s steps(3); }
.toggle.off .sw-track { background: #a8998a; }
.toggle.off .sw-knob { left: 1px; }
/* the text size: three A's */
.modal.settings .seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.seg-a { font-family: var(--pixel); line-height: 1; }
.seg-a.s { font-size: 8px; } .seg-a.m { font-size: 11px; } .seg-a.l { font-size: 15px; }
/* the colour preview (Accessibility) */
.set-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; background: var(--parch-2); border: 3px solid var(--ink); }
.set-preview small { flex-basis: 100%; order: -1; font-size: 13px; color: var(--ink-soft); }
.sp-team { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; color: #fff; border: 3px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); }
.sp-team.p0 { background: var(--blue); }
.sp-team.p1 { background: var(--red); }
.sp-team b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.sp-mark { display: grid; place-items: center; width: 24px; height: 24px; font-family: var(--pixel); font-size: 10px; background: rgba(0, 0, 0, .25); border: 2px solid var(--ink); }
/* the sound: one card per kind, with its icon */
.modal.settings .sound-rows { gap: 8px; }
.modal.settings .sound-row { grid-template-columns: 42px minmax(0, 1fr) 190px 54px 44px; padding: 8px 10px; box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .2); }
.modal.settings .sound-row.master { background: linear-gradient(120deg, #fff3c8, #f6e0a0); border-color: var(--gold-dark); margin-bottom: 6px; }
.snd-ico { display: grid; place-items: center; width: 40px; height: 40px; font-size: 20px; background: radial-gradient(circle at 35% 30%, #fff6dc, var(--parch) 65%, var(--parch-3)); border: 2px solid var(--ink); }
.sound-row.master .snd-ico { background: linear-gradient(#ffe36b, #f2b734); }
.sound-row.muted .snd-ico { filter: grayscale(1); opacity: .6; }
/* the shortcuts and the gift code inside their panes */
.modal.settings .key-rows { margin-bottom: 10px; }
.modal.settings .key-row { padding: 8px 10px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.gift-card .gift-input { width: 170px; }
/* phones and narrow windows: the sections in a row of tabs at the top */
@media (max-width: 760px) {
  .modal.settings { padding: 14px 12px 14px; }
  .set-layout, .set-layout.compact { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .set-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px; }
  .set-tab, .set-layout.compact .set-tab { flex-shrink: 0; width: auto; padding: 4px 8px 4px 4px; justify-content: flex-start; }
  .set-tab.on, .set-tab:hover, .set-layout.compact .set-tab.on { transform: translateY(-2px); }
  .set-tab.on::after { display: none; }
  .st-ico { width: 30px; height: 30px; font-size: 15px; }
  .st-txt small { display: none; }
  .set-layout.compact .st-txt { display: flex; }
  .set-nav-sep { display: none; }
  .set-head { padding: 10px; gap: 10px; }
  .set-head-ico { width: 42px; height: 42px; font-size: 22px; }
  .modal.settings .sound-row { grid-template-columns: 34px minmax(0, 1fr) 46px 40px; gap: 6px 8px; }
  .modal.settings .sound-row .sr-range { grid-column: 1 / -1; grid-row: 2; }
  .snd-ico { width: 32px; height: 32px; font-size: 16px; }
  .set-group > .setting-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .set-group > .setting-row > .toggle, .set-group > .setting-row > .seg, .set-group > .setting-row > .btn { justify-self: start; }
  .gift-form { width: 100%; }
  .gift-card .gift-input { flex: 1; width: auto; min-width: 0; }
}

/* ---------- 📊 Stats: (your name) vs (your opponent), one row per number, the icons in a column ---------- */
.st-sec h3.st-vs-title { gap: 10px; flex-wrap: wrap; }
.st-sec h3.st-vs-title > span { font-size: 11px; }
.st-sec h3.st-vs-title .st-vs-mark { font-style: normal; transform: rotate(-6deg); }
.st-tugs { gap: 4px; padding: 8px 12px 10px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .2); }
.st-tug { grid-template-columns: 30px minmax(96px, 150px) 66px minmax(0, 1fr) 66px; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 2px dashed rgba(59, 36, 20, .15); }
.st-tug:last-child { border-bottom: 0; }
.st-tug-ico { display: grid; place-items: center; width: 28px; height: 28px; background: #fff6dc; border: 2px solid var(--ink); }
.st-tug-ico .st-ico { width: 18px; height: 18px; margin: 0; }
.st-tug-ico img { width: 18px; height: 18px; image-rendering: pixelated; }
.st-tug-label { display: block; justify-content: initial; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-n { display: flex; align-items: center; gap: 3px; padding: 0; font-size: 11px; }
.st-n.left { justify-content: flex-end; }
.st-n.right { justify-content: flex-start; text-align: left; }
.st-n.lead { font-size: 13px; }
.st-lead { font-style: normal; font-size: 11px; line-height: 1; }
.st-tug-bar { height: 16px; }
/* the head row: each side's name over its end of the bars */
.st-tug.st-tug-head { padding: 0 0 4px; border-bottom: 3px solid rgba(59, 36, 20, .25); }
.st-tug-head > span:empty { display: none; }
.st-plate { grid-row: 1; padding: 2px 8px; font-family: var(--pixel); font-size: 8px; color: #fff; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-plate.p0 { grid-column: 3 / 5; justify-self: start; background: var(--blue); }
.st-plate.p1 { grid-column: 4 / 6; justify-self: end; background: var(--red); }
@media (max-width: 700px) {
  .st-tug { grid-template-columns: 26px minmax(0, 1fr) 48px; gap: 4px 6px; }
  .st-tug .st-n.left { grid-column: 3; grid-row: 1; }
  .st-tug .st-tug-bar { grid-column: 1 / -1; grid-row: 2; }
  .st-tug .st-n.right { grid-column: 3; grid-row: 3; }
  .st-tug .st-n { font-size: 9px; justify-content: flex-end; }
  .st-tug .st-n.lead { font-size: 10px; }
  .st-tug.st-tug-head { grid-template-columns: 1fr 1fr; }
  .st-plate.p0 { grid-column: 1; } .st-plate.p1 { grid-column: 2; }
}

/* ---------- 📈 Momentum: a night-sky scoreboard in a wooden frame ---------- */
.mm-board { padding: 10px; background: linear-gradient(#6a4528, #3b2414); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3), 4px 4px 0 rgba(20, 10, 4, .35); }
.mm-chips { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.mm-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px 5px 5px; background: var(--parch); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.mm-chip > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-chip b { font-family: var(--pixel); font-size: 9px; font-weight: normal; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-chip small { font-size: 12px; color: var(--ink-soft); }
.mm-chip.p1 { flex-direction: row-reverse; text-align: right; padding: 5px 5px 5px 10px; }
.mm-chip.p1 > span:last-child { align-items: flex-end; }
.mm-chip.mid { padding: 5px 12px 5px 5px; }
.mm-chip-mark { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; font-family: var(--pixel); font-size: 10px; color: #fff; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); }
.mm-chip.p0 .mm-chip-mark { background: var(--blue); }
.mm-chip.p1 .mm-chip-mark { background: var(--red); }
.mm-chip.mid .mm-chip-mark { font-family: var(--body); font-size: 16px; color: var(--ink); background: var(--gold); text-shadow: none; }
.mm-chip.p0 b { color: var(--blue-dark); }
.mm-chip.p1 b { color: var(--red-dark); }
.mm-plot { position: relative; background: #cdb07a; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 246, 220, .35); cursor: crosshair; touch-action: pan-y; }
.mm-svg { display: block; width: 100%; height: 190px; background: none; border: 0; }
.mm-s0.a { stop-color: #2f5fc8; stop-opacity: .85; } .mm-s0.b { stop-color: #2f5fc8; stop-opacity: .15; }
.mm-s1.a { stop-color: #b8352c; stop-opacity: .85; } .mm-s1.b { stop-color: #b8352c; stop-opacity: .15; }
body.cb-mode .mm-s1.a, body.cb-mode .mm-s1.b { stop-color: #e8820c; }
.mm-area { stroke: none; }
.mm-mid { stroke: rgba(59, 36, 20, .55); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.mm-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.mm-line-shadow { fill: none; stroke: #f3e6c4; stroke-width: 7; opacity: .8; vector-effect: non-scaling-stroke; }
.mm-tp { stroke: #b4801f; stroke-width: 2; stroke-dasharray: 3 4; opacity: .9; vector-effect: non-scaling-stroke; }
.mm-tick { stroke: rgba(59, 36, 20, .6); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mm-tag { position: absolute; left: 8px; z-index: 1; padding: 2px 7px; font-family: var(--pixel); font-size: 7px; color: #fff; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); pointer-events: none; white-space: nowrap; }
.mm-tag.top { top: 8px; background: rgba(63, 116, 224, .9); }
.mm-tag.bottom { bottom: 10px; background: rgba(208, 70, 60, .9); }
body.cb-mode .mm-tag.bottom { background: rgba(232, 130, 12, .9); }
.mm-even { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 0 5px; font-size: 11px; font-weight: 700; color: var(--ink); background: #f3e6c4; border: 2px solid rgba(59, 36, 20, .55); pointer-events: none; }
.mm-pin { position: absolute; z-index: 2; width: 0; height: 0; }
.mm-pin-dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; background: var(--gold); border: 2px solid var(--ink); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(242, 193, 78, .35), 0 0 14px rgba(255, 215, 90, .9); }
.mm-flag { position: absolute; bottom: 14px; left: -10px; padding: 3px 7px; font-family: var(--pixel); font-size: 7px; line-height: 1.4; color: var(--ink); white-space: nowrap; background: linear-gradient(#ffe36b, #f2b734); border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, .4); }
.mm-pin.left .mm-flag { left: auto; right: -10px; }
.mm-flag { display: none; }
.mm-pin.on .mm-flag, .mm-pin:hover .mm-flag { display: block; }
.mm-pin.on .mm-pin-dot { box-shadow: 0 0 0 4px rgba(242, 193, 78, .5), 0 0 18px rgba(255, 215, 90, 1); }
.mm-pin.below .mm-flag { bottom: auto; top: 14px; }
.mm-end { position: absolute; right: 6px; z-index: 1; transform: translateY(-50%); padding: 3px 7px; font-family: var(--pixel); font-size: 9px; color: #fff; background: #5a4a3a; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 rgba(20, 10, 4, .3); }
.mm-end.p0 { background: var(--blue); }
.mm-end.p1 { background: var(--red); }
.mm-turns { position: relative; height: 18px; margin: 4px 3px 0; }
.mm-turns span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #f3e6c4; white-space: nowrap; }
.mm-turns span:first-child { transform: none; }
.mm-turns span:last-child:not(:first-child) { transform: translateX(-100%); }
.mm-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; }
.mm-key { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; font-size: 13px; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
@media (max-width: 700px) {
  .mm-chips { grid-template-columns: 1fr 1fr; }
  .mm-chip.mid { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .mm-svg { height: 150px; }
}
/* the momentum chart's hover: a cursor line on the move pointed at, and its bubble */
.mm-cursor { position: absolute; top: 0; bottom: 0; z-index: 3; width: 0; border-left: 2px solid rgba(59, 36, 20, .7); pointer-events: none; }
.mm-cursor-dot { position: absolute; left: -7px; width: 12px; height: 12px; margin-top: -6px; background: var(--gold); border: 2px solid var(--ink); }
.mm-plot.hovering .mm-hint { opacity: 0; }
.mm-hint { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 1px 6px; font-size: 11px; color: var(--ink-soft); background: rgba(255, 250, 240, .85); border: 1px solid rgba(59, 36, 20, .3); pointer-events: none; transition: opacity .15s; }
.mm-tip { position: absolute; top: 6px; z-index: 5; width: 300px; max-width: calc(100% - 12px); margin-left: 12px; padding: 8px 10px; text-align: left; font-size: 13px; line-height: 1.35; color: var(--ink); background: var(--tile-parchment) 0 0 / 64px 64px, var(--parch); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 #fff6dc, 4px 4px 0 rgba(0, 0, 0, .45); pointer-events: none; }
.mm-tip.left { margin-left: 0; transform: translateX(calc(-100% - 12px)); }
.mm-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 2px dashed rgba(59, 36, 20, .3); }
.mm-tip-head b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.mm-tip-lead { padding: 1px 6px; font-family: var(--pixel); font-size: 8px; color: #fff; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); }
.mm-tip-lead.p0 { background: var(--blue); } .mm-tip-lead.p1 { background: var(--red); } .mm-tip-lead.even { color: var(--ink); background: var(--parch-2); text-shadow: none; }
.mm-tip-move { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.mm-tip-move img { width: 26px; height: 26px; image-rendering: pixelated; }
.mm-tip-kind { font-size: 15px; }
.mm-tip-arrow { color: var(--ink-soft); }
.mm-tip-lines { margin: 4px 0 0; padding: 0 0 0 14px; font-size: 12px; }
.mm-tip-lines li { margin: 1px 0; }
.mm-tip-why { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 5px 7px; font-weight: 700; background: linear-gradient(90deg, #ffe9a6, #fff3c8); border: 2px solid var(--ink); }
.mm-tip-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.mm-tip-sides span { display: flex; flex-direction: column; padding: 3px 6px; background: var(--parch-2); border: 2px solid var(--ink); }
.mm-tip-sides span.p0 { border-left: 5px solid var(--blue); } .mm-tip-sides span.p1 { border-left: 5px solid var(--red); }
.mm-tip-sides small { font-size: 11px; color: var(--ink-soft); }

/* ---------- Avatar Lab: the colour card (palette, the colour in use, 🎨 Mix: shade square, hue bar, code, recent) ---------- */
.av-colors { padding: 7px; background: var(--parch); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.av-color-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.av-color-top .av-label { margin: 0; }
.av-cur { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 2px; background: #fff6dc; border: 2px solid var(--ink); }
.av-cur i { width: 16px; height: 16px; background: var(--c); border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4); }
.av-cur code { font-family: var(--pixel); font-size: 8px; }
.av-pick-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; }
.av-pick-btn.on { color: var(--ink); background: var(--gold); text-shadow: none; }
.av-caret { display: inline-block; font-size: 9px; transition: transform .12s steps(2); }
.av-pick-btn.on .av-caret { transform: rotate(180deg); }
/* the palette's swatches: raised pixel tiles; the chosen one lifted, in a gold frame, with a tick */
.av-sw { background: var(--c); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -2px 0 rgba(0, 0, 0, .25); transition: transform .08s steps(2); }
.av-sw:hover { transform: translateY(-2px); }
.av-sw.on { outline: none; transform: translateY(-2px); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--gold), 0 0 0 4px var(--ink); z-index: 1; }
.av-sw.on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.av-sw.small { width: 18px; height: 18px; aspect-ratio: auto; }
.av-sw.small.on::after { font-size: 10px; }
/* the mixer */
.av-picker { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; padding: 8px; background: linear-gradient(#6a4528, #4a2f1a); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .25); animation: tdrop-in .15s steps(3); }
.av-picker[hidden] { display: none; }
.av-sv { position: relative; height: 112px; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, hsl(var(--h, 40) 100% 50%)); border: 3px solid var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); cursor: crosshair; touch-action: none; }
.av-sv-knob { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); background: var(--c, #fff); border: 3px solid #fff; outline: 2px solid var(--ink); pointer-events: none; }
.av-hue { position: relative; height: 18px; background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); border: 3px solid var(--ink); cursor: ew-resize; touch-action: none; }
.av-hue-knob { position: absolute; top: -5px; bottom: -5px; width: 8px; transform: translateX(-50%); background: #fff6dc; border: 2px solid var(--ink); box-shadow: 1px 1px 0 rgba(0, 0, 0, .4); pointer-events: none; }
.av-sv:focus-visible, .av-hue:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.av-pick-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.av-pick-prev { width: 28px; height: 28px; flex-shrink: 0; background: var(--c); border: 3px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35); }
.av-hex { width: 92px; padding: 5px 6px; font-family: var(--pixel); font-size: 9px; text-transform: uppercase; color: var(--ink); background: #fff6dc; border: 3px solid var(--ink); }
.av-hex:focus { outline: 3px solid var(--gold); }
.av-recent { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.av-recent small { margin-right: 2px; font-size: 11px; color: #f3e6c4; }

/* ---------- 🏕 Patrol (js/patrol.js) ---------- */
.mtile.patrol .mt-ico { background: linear-gradient(135deg, rgba(93, 158, 60, .6), rgba(242, 193, 78, .5)); }
.mt-badge { flex-shrink: 0; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; font-family: var(--pixel); font-size: 10px; color: var(--ink); background: linear-gradient(#ffe36b, #f2b734); border: 3px solid var(--ink); animation: blink 1.2s steps(1) infinite alternate; }
.mt-badge[hidden] { display: none; }
.modal.patrol { max-width: 820px; width: 100%; }
.patrol-body { display: flex; flex-direction: column; gap: 12px; }
.pt-hero { background: linear-gradient(90deg, rgba(93, 158, 60, .2), transparent 70%), var(--parch-2); }
.pt-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-route { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; font: inherit; color: var(--ink); background: var(--parch); border: 3px solid var(--ink); box-shadow: inset -2px -2px 0 var(--parch-3), 3px 3px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.pt-route:hover { background: #fff3c8; }
.pt-route.on { background: #fff3c8; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px var(--gold), 3px 3px 0 rgba(20, 10, 4, .2); }
.pt-route-ico { font-size: 24px; }
.pt-route b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.pt-route small { font-size: 12px; }
.pt-route-risk { color: var(--ink-soft); }
.pt-route.easy b { color: #2f6b2a; } .pt-route.normal b { color: #8a5a10; } .pt-route.hard b { color: var(--red-dark); }
/* the camp */
.pt-camp { display: flex; flex-direction: column; gap: 12px; }
.pt-team-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.pt-team-icons { display: flex; gap: 4px; }
.pt-route-chip { padding: 3px 8px; font-family: var(--pixel); font-size: 8px; background: #fff6dc; border: 2px solid var(--ink); }
.pt-team-card .btn { margin-left: auto; }
.pt-ready { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px; background: linear-gradient(#6a4528, #4a2f1a); border: 4px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .3), 4px 4px 0 rgba(20, 10, 4, .3); color: #f3e6c4; }
.pt-ready-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pt-ready-head b { font-family: var(--pixel); font-size: 13px; color: #ffe08a; text-shadow: 2px 2px 0 var(--ink); }
.pt-ready-head small { font-size: 13px; }
.pt-slots { display: grid; grid-template-columns: repeat(min(var(--n), 12), 1fr); gap: 5px; width: 100%; max-width: 560px; }
.pt-slots i { height: 22px; background: rgba(255, 246, 220, .12); border: 3px solid var(--ink); }
.pt-slots i.on { background: linear-gradient(#ffe36b, #f2b734); box-shadow: inset 0 2px 0 #fff3c4; }
.pt-collect { min-width: 260px; }
.pt-rations { color: #ffe08a; }
.pt-note { margin: 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.pt-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-record { margin-right: auto; font-size: 13px; color: var(--ink-soft); }
/* the report: a scroll */
.pt-report { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--tile-parchment) 0 0 / 64px 64px, #fff3c8; border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px #f2dfa8, 4px 4px 0 rgba(20, 10, 4, .3); }
.pt-scroll-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; font-family: var(--pixel); font-size: 12px; color: #fff3c4; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); text-shadow: 2px 2px 0 var(--ink); }
.pt-scroll-head small { font-size: 9px; color: #ffe08a; }
.pt-run-n { margin: 0; text-align: center; font-family: var(--pixel); font-size: 9px; }
.pt-run-bar { height: 14px; background: rgba(42, 28, 18, .2); border: 3px solid var(--ink); }
.pt-run-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, #ffd86b 8px 16px); transition: width .2s steps(4); }
.pt-score { display: flex; justify-content: center; gap: 18px; }
.pt-score span { display: flex; flex-direction: column; align-items: center; font-family: var(--pixel); font-size: 22px; }
.pt-score small { font-family: var(--body); font-size: 12px; color: var(--ink-soft); }
.pt-w { color: #2f6b2a; } .pt-l { color: var(--red-dark); }
.pt-results { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.pt-res { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 6px; border: 2px solid var(--ink); animation: tip-in .2s steps(3) backwards; }
.pt-res b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.pt-res.w { background: #cfe9b8; color: #2f6b2a; }
.pt-res.l { background: #f2cbc4; color: var(--red-dark); }
.pt-res-foe { display: inline-flex; }
.pt-res-foe img { width: 18px; height: 18px; margin-left: -3px; image-rendering: pixelated; }
.pt-gains { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pt-gain { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-family: var(--pixel); font-size: 11px; background: #fff6dc; border: 3px solid var(--ink); }
.pt-gain small { font-family: var(--body); font-size: 12px; color: var(--ink-soft); }
.pt-gain.coins { background: linear-gradient(#ffe36b, #f2b734); }
.pt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: var(--parch-2); border: 2px solid var(--ink); }
.pt-label { font-family: var(--pixel); font-size: 8px; color: var(--ink-soft); min-width: 64px; }
.pt-mxs { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-mx { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 1px; background: #fff6dc; border: 2px solid var(--ink); }
.pt-mx img, .pt-mvp-art img { width: 24px; height: 24px; image-rendering: pixelated; }
.pt-mx small { font-weight: 700; color: #6b3fa0; }
.pt-mvp b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.pt-find { padding: 6px 10px; font-weight: 700; text-align: center; background: linear-gradient(90deg, #ffe9a6, #fff3c8, #ffe9a6); border: 3px solid var(--gold-dark); animation: blink .6s steps(1) 4; }
.pt-report-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* the shop's Supplies */
.shop-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sup-tab-ico { display: grid; place-items: center; font-size: 22px; }
.sup-list { display: flex; flex-direction: column; gap: 10px; }
.sup-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc, 3px 3px 0 rgba(20, 10, 4, .22); }
.sup-ico { display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; font-size: 28px; background: linear-gradient(#7a4f2c, #5a3a22); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35); }
.sup-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sup-text b { font-family: var(--pixel); font-size: 10px; font-weight: normal; }
.sup-text small { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.sup-state { width: fit-content; padding: 1px 6px; font-size: 12px; font-weight: 700; background: #fff6dc; border: 2px solid var(--ink); }
.sup-card .btn { flex-shrink: 0; min-width: 96px; }
.sup-done { font-size: 22px; color: #2f6b2a; }
@media (max-width: 700px) {
  .pt-routes { grid-template-columns: 1fr; }
  .pt-route { flex-direction: row; justify-content: flex-start; gap: 8px; }
  .pt-slots { grid-template-columns: repeat(min(var(--n), 8), 1fr); }
  .sup-card { flex-wrap: wrap; }
  .sup-card .btn { width: 100%; }
}

/* ---------- How to play: the Tournament, Gauntlet, Patrol and More features sections ---------- */
.g-emoji { font-size: 16px; line-height: 1; }
.g-head-ico .g-emoji { font-size: 26px; }
.g-sub { margin: 4px 0 0; font-family: var(--pixel); font-size: 9px; font-weight: normal; color: var(--ink-soft); }
.g-tsizes, .g-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g-tsize, .g-route { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; text-align: center; background: var(--parch-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff6dc; }
.g-tsize b, .g-route b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.g-tsize small, .g-route small { font-size: 12px; color: var(--ink-soft); }
.g-tsize > span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-family: var(--pixel); font-size: 8px; color: var(--gold); background: var(--wood-1); border: 2px solid var(--ink); }
.g-tsize .coin-icon, .g-tsize .ico-gem { width: 12px; height: 12px; margin: 0; }
.g-route.easy b { color: #2f6b2a; } .g-route.normal b { color: #8a5a10; } .g-route.hard b { color: var(--red-dark); }
.g-floors { justify-content: flex-start; }
.g-relics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.g-relic { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; background: var(--parch-2); border: 2px solid var(--ink); }
.g-relic .gt-relic { width: 34px; height: 34px; font-size: 18px; flex-shrink: 0; cursor: default; }
.g-relic > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.g-relic b { font-size: 13px; color: var(--ink); }
.g-relic small { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.g-camp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: linear-gradient(#6a4528, #4a2f1a); border: 3px solid var(--ink); color: #f3e6c4; }
.g-camp .pt-slots { max-width: 420px; }
.g-camp small { font-family: var(--pixel); font-size: 8px; color: #ffe08a; }
@media (max-width: 700px) { .g-tsizes, .g-routes { grid-template-columns: 1fr; } }

/* ---------- 🐉 Raids (js/raid.js; the rules in rules.js) ---------- */
.mtile.raid .mt-ico { background: linear-gradient(135deg, rgba(208, 70, 60, .7), rgba(255, 154, 60, .55)); }
/* the boss bar over the board */
.raid-bar { display: flex; align-items: center; gap: 10px; margin: -4px auto 8px; padding: 6px 10px; width: min(560px, 100%); color: #f3e6c4; background: linear-gradient(#4a1a14, #2a0e0c); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 140, 80, .35), 4px 4px 0 rgba(20, 10, 4, .35); }
.raid-bar[hidden] { display: none; }
.rb-art { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; background: radial-gradient(circle, #ff9a3c, #8f1f22 70%); border: 3px solid var(--ink); }
.rb-art img { width: 38px; height: 38px; image-rendering: pixelated; }
.rb-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rb-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-name b { font-family: var(--pixel); font-size: 10px; font-weight: normal; color: #ffd36b; text-shadow: 2px 2px 0 var(--ink); }
.rb-name small { font-size: 12px; opacity: .85; }
.rb-enrage { margin-left: auto; padding: 1px 6px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .3); border: 2px solid rgba(255, 140, 80, .5); }
.rb-enrage.soon { color: #fff; background: #d0463c; animation: blink .6s steps(1) infinite alternate; }
.rb-hp { position: relative; height: 18px; background: #1a0806; border: 3px solid var(--ink); }
.rb-hp > i { display: block; height: 100%; background: linear-gradient(#ff6a50, #c0281c); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3); transition: width .4s steps(8); }
.rb-tick { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #ffd36b; box-shadow: 0 0 0 1px var(--ink); }
.rb-hp b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 8px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.rb-line { font-size: 13px; font-weight: 700; }
.rb-warn { color: #ffb050; animation: blink .8s steps(1) infinite alternate; }
.rb-acts { color: #cfe2ff; }
/* the boss and its whelps on the board */
.cell.boss { border-color: #b4801f; box-shadow: inset 0 0 0 3px #ffd36b, 0 0 16px rgba(255, 140, 60, .8); background: radial-gradient(circle, rgba(255, 154, 60, .45), transparent 70%), var(--cell-bg, transparent); }
.cell.boss .u-icon .sprite { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(255, 120, 40, .9)); }
.cell.whelp .u-icon .sprite { transform: scale(.85); }
/* the squares it will strike (red), and the safe ones (green) */
.cell.tele::after { content: '⚠'; position: absolute; inset: 0; z-index: 4; display: grid; place-items: start end; padding: 4px 6px; font-size: 18px; color: #fff; text-shadow: 1px 1px 0 var(--ink); pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(220, 40, 30, .38) 0 10px, rgba(255, 120, 40, .22) 10px 20px); box-shadow: inset 0 0 0 4px rgba(255, 60, 40, .9); animation: tele-pulse .9s steps(2) infinite; }
.cell.tele-breath::after { content: '🔥'; }
.cell.safe::after { content: '✔ SAFE'; position: absolute; inset: 0; z-index: 4; display: grid; place-items: end center; padding-bottom: 4px; font-family: var(--pixel); font-size: 7px; color: #fff; text-shadow: 1px 1px 0 var(--ink); pointer-events: none;
  background: rgba(93, 207, 110, .25); box-shadow: inset 0 0 0 4px rgba(93, 207, 110, .95), inset 0 0 18px rgba(93, 207, 110, .6); }
@keyframes tele-pulse { 50% { box-shadow: inset 0 0 0 6px rgba(255, 200, 60, .95); } }
body.reduce-motion .cell.tele::after { animation: none; }
/* the raid window */
.modal.raid { max-width: 860px; width: 100%; }
.raid-body { display: flex; flex-direction: column; gap: 12px; }
.rd-boss { display: flex; gap: 14px; align-items: center; padding: 12px; color: #f3e6c4; background: linear-gradient(120deg, #4a1a14, #2a0e0c 70%); border: 4px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 140, 80, .35), 4px 4px 0 rgba(20, 10, 4, .3); }
.rd-boss-art { display: grid; place-items: center; flex-shrink: 0; width: 96px; height: 96px; background: radial-gradient(circle, #ff9a3c, #8f1f22 70%); border: 4px solid var(--ink); box-shadow: 0 0 20px rgba(255, 120, 40, .7); }
.rd-boss-art img { width: 80px; height: 80px; image-rendering: pixelated; animation: mvp-pose 2.4s steps(8) infinite; }
.rd-boss-text h3 { margin: 0 0 6px; font-family: var(--pixel); font-size: 14px; font-weight: normal; color: #ffd36b; text-shadow: 2px 2px 0 var(--ink); }
.rd-boss-text p { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.rd-rules { display: block; font-size: 13px; color: #ffe08a; }
.rd-abilities { padding: 6px 10px; background: var(--parch-2); border: 3px solid var(--ink); }
.rd-abilities summary { font-family: var(--pixel); font-size: 9px; cursor: var(--cur-hand), pointer; }
.rd-abilities ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin: 8px 0 4px; padding: 0; list-style: none; }
.rd-abilities li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 7px; background: #fff6dc; border: 2px solid var(--ink); }
.rd-abilities li > span { font-size: 18px; }
.rd-abilities li b { font-size: 13px; }
.rd-abilities li small { display: block; font-size: 12px; color: var(--ink-soft); }
.rd-phases { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.rd-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd-level { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; font: inherit; color: var(--ink); text-align: center; background: var(--parch); border: 3px solid var(--ink); box-shadow: inset -2px -2px 0 var(--parch-3), 3px 3px 0 rgba(20, 10, 4, .2); cursor: var(--cur-hand), pointer; }
.rd-level:hover:not(:disabled) { background: #fff3c8; }
.rd-level.on { background: #fff3c8; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px var(--gold), 3px 3px 0 rgba(20, 10, 4, .2); }
.rd-level:disabled { opacity: .55; cursor: default; }
.rd-level b { font-family: var(--pixel); font-size: 11px; font-weight: normal; }
.rd-level.heroic b { color: #8f1f22; }
.rd-level small { font-size: 12px; color: var(--ink-soft); }
.rd-chest { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; font-weight: 700; background: linear-gradient(#ffe36b, #f2b734); border: 2px solid var(--ink); }
.rd-chest.open { background: #cfe9b8; }
.rd-chest .coin-icon, .rd-chest .ico-gem { width: 12px; height: 12px; margin: 0; }
.rd-record { margin-right: auto; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 700px) {
  .rd-levels { grid-template-columns: 1fr; }
  .rd-boss-art { width: 64px; height: 64px; }
  .rd-boss-art img { width: 52px; height: 52px; }
  .raid-bar { margin-top: 0; }
}
.mtile.raid .mt-ico img { width: 30px; height: 30px; image-rendering: pixelated; }
.raid-title-art { display: inline-grid; vertical-align: middle; margin-right: 6px; }
.raid-title-art img { width: 26px; height: 26px; image-rendering: pixelated; }
.g-boss { display: flex; gap: 12px; align-items: center; padding: 10px; color: #f3e6c4; background: linear-gradient(120deg, #4a1a14, #2a0e0c 70%); border: 3px solid var(--ink); }
.g-boss .rd-boss-art { width: 64px; height: 64px; }
.g-boss .rd-boss-art img { width: 52px; height: 52px; }
.g-boss b { font-family: var(--pixel); font-size: 11px; font-weight: normal; color: #ffd36b; }
.g-boss p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
.g-nav-ico .sprite { width: 20px; height: 20px; }

/* ---------- Modes closed or hidden from the admin panel (tools/admin.html; js/config.js) ---------- */
.mtile.closed { filter: grayscale(.85) brightness(.85); cursor: not-allowed; }
.mtile.closed:hover { transform: none; }
.mtile.closed .mt-text small { visibility: hidden; }
.mtile.closed::after { content: '🔒 ' attr(data-closed); position: absolute; left: 66px; bottom: 9px; font-size: 13px; font-weight: 700; color: #ffe6b0; text-shadow: 1px 1px 0 var(--ink); pointer-events: none; }
.mtile.closed .mt-badge { display: none; }
#menu-main > .mtile.fill { grid-column: 1 / -1; }
.coin-pill.no-shop, .gem-pill.no-shop { cursor: default; }
.admin-preview { grid-column: 1 / -1; justify-self: start; padding: 3px 8px; font-family: var(--pixel); font-size: 8px; color: #fff; background: repeating-linear-gradient(135deg, #8a2420 0 8px, #a8322a 8px 16px); border: 3px solid var(--ink); }

/* ---------- A raid's game over (ui-gameover.js renderRaidOver) ---------- */
#gameover.raid-over .menu-card { border-color: #5a1a12; box-shadow: inset 0 0 0 3px rgba(255, 140, 60, .35), 0 0 40px rgba(255, 90, 30, .35), 8px 8px 0 rgba(20, 10, 4, .4); }
.go-raid-boss { position: relative; display: inline-grid; place-items: center; width: 84px; height: 84px; background: radial-gradient(circle, #ff9a3c, #8f1f22 70%); border: 4px solid var(--ink); box-shadow: 0 0 22px rgba(255, 120, 40, .7); }
.go-raid-boss img { width: 66px; height: 66px; image-rendering: pixelated; }
.go-raid-boss.slain { background: radial-gradient(circle, #9a8f84, #3a2f2a 70%); box-shadow: none; }
.go-raid-boss.slain img { filter: grayscale(.85) brightness(.75); transform: rotate(-14deg) translateY(4px); }
.go-raid-boss i { position: absolute; right: -10px; bottom: -8px; font-size: 26px; font-style: normal; }
.go-raid-won { color: var(--gold-dark); text-shadow: 2px 2px 0 rgba(20, 10, 4, .25); }
.go-raid-lost { color: var(--red-dark); }
.go-raid { display: flex; flex-direction: column; gap: 8px; margin: 2px auto 10px; padding: 10px 12px; max-width: 460px; color: #f3e6c4; text-align: center; background: linear-gradient(#4a1a14, #2a0e0c); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 140, 80, .35), 3px 3px 0 rgba(20, 10, 4, .3); }
.go-raid-hp { position: relative; height: 20px; background: #1a0806; border: 3px solid var(--ink); }
.go-raid-hp > i { display: block; height: 100%; background: linear-gradient(#ff6a50, #c0281c); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3); }
.go-raid-hp b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 8px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.go-raid-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.go-raid-facts span { padding: 2px 8px; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, .3); border: 2px solid rgba(255, 140, 80, .5); }
.go-raid-line { margin: 0; font-size: 14px; color: #ffe08a; }
.go-raid-team { display: flex; justify-content: center; gap: 6px; }
.go-raid-hero { display: grid; place-items: center; width: 46px; height: 46px; background: rgba(255, 246, 220, .15); border: 2px solid rgba(255, 246, 220, .4); }
.go-raid-hero .sprite { width: 38px; height: 38px; }
.go-raid-hero.down { opacity: .45; filter: grayscale(1); }
.go-raid-loot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 8px; padding: 6px 12px; width: fit-content; max-width: 100%; font-size: 14px; background: linear-gradient(#ffe36b, #f2b734); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .3); }
.go-raid-loot.again, .go-raid-loot.none { font-weight: 700; background: var(--parch-2); }
.go-raid-chest { font-size: 30px; animation: tdrop-in .5s steps(6) both; }
.go-raid-loot b { display: block; font-family: var(--pixel); font-size: 9px; font-weight: normal; text-align: left; }
.go-raid-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; }
.go-raid-items > span { display: inline-flex; align-items: center; gap: 3px; }
.go-raid-items .coin-icon, .go-raid-items .ico-gem { width: 14px; height: 14px; margin: 0; }
.go-raid-card { padding: 0 6px; background: #fff6dc; border: 2px solid var(--ink); }
.go-raid-card.r-rare { background: #c9d8f5; }
.go-raid-card.r-legendary { background: #ffd89a; }
.go-raid-card .sprite { width: 20px; height: 20px; }
.btn-boss { display: inline-grid; place-items: center; margin-right: 6px; vertical-align: middle; }
.btn-boss .sprite { width: 22px; height: 22px; }

/* ---------- 🧪 Items Lab (a beta: js/items.js) ---------- */
.mtile.items .mt-ico { background: linear-gradient(135deg, rgba(143, 85, 224, .55), rgba(95, 207, 110, .45)); }
.modal.items-lab { max-width: 1100px; width: 100%; }
.items-body { display: flex; flex-direction: column; gap: 12px; }
.item-art { width: 32px; height: 32px; image-rendering: pixelated; }
.il-intro, .il-foot { margin: 0; font-size: 14px; color: var(--ink-soft); }
.il-champs { display: flex; flex-wrap: wrap; gap: 4px; }
.il-champ { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 58px; padding: 3px 2px; font: inherit; color: var(--ink); background: var(--parch); border: 3px solid var(--ink); cursor: var(--cur-hand), pointer; }
.il-champ .sprite { width: 34px; height: 34px; }
.il-champ small { font-size: 10px; line-height: 1.1; text-align: center; }
.il-champ.on { background: #fff3c8; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold); }
.il-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.il-loads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.il-load { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--parch); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 10, 4, .25); cursor: var(--cur-hand), pointer; }
.il-load.l-A { border-top: 6px solid var(--blue); }
.il-load.l-B { border-top: 6px solid var(--red); }
.il-load.editing { background: #fff6dc; box-shadow: 0 0 0 3px var(--gold), 3px 3px 0 rgba(20, 10, 4, .25); }
.il-load-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.il-load-head b { font-family: var(--pixel); font-size: 9px; font-weight: normal; }
.il-load-head small { font-size: 12px; color: var(--ink-soft); }
.il-hero { display: flex; align-items: center; gap: 8px; }
.il-hero-art { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; background: var(--parch-2); border: 3px solid var(--ink); }
.il-hero-art .sprite { width: 44px; height: 44px; }
.il-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 14px; font-weight: 700; }
.il-stats span { display: inline-flex; align-items: center; gap: 3px; }
.il-stats .ico { width: 14px; height: 14px; }
.il-stats em { font-size: 12px; font-style: normal; }
em.up { color: var(--green-dark, #2f7d3b); } em.down { color: var(--red-dark); }
.il-slots { display: flex; flex-direction: column; gap: 4px; }
.il-slot { display: flex; align-items: center; gap: 6px; padding: 3px 4px; background: #fff6dc; border: 2px solid var(--parch-3); }
.il-slot.focus { border-color: var(--gold-dark); box-shadow: inset 4px 0 0 var(--gold); }
.il-slot-art { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; background: var(--parch-2); border: 2px solid var(--ink); }
.il-slot-art .item-art { width: 28px; height: 28px; }
.il-slot-empty { font-size: 16px; opacity: .45; }
.il-slot-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.il-slot-name small { font-size: 11px; color: var(--ink-soft); }
.il-slot-name b { font-size: 13px; }
.il-unequip { width: 22px; height: 22px; padding: 0; font-size: 12px; color: #fff; background: var(--red-dark); border: 2px solid var(--ink); cursor: var(--cur-hand), pointer; }
.il-load-fx { display: flex; flex-direction: column; gap: 2px; min-height: 18px; font-size: 12px; }
.il-load-fx span::before, .il-fx span::before { content: '✦ '; }
.il-load-fx .none { color: var(--ink-soft); } .il-load-fx .none::before { content: ''; }
:is(.il-fx, .il-load-fx) .good { color: #2f7d3b; } :is(.il-fx, .il-load-fx) .bad { color: var(--red-dark); }
.il-builds { display: flex; flex-wrap: wrap; gap: 4px; }
.il-builds .btn { padding: 3px 8px; font-size: 12px; }
.il-catalog { display: flex; flex-direction: column; gap: 6px; }
.il-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.il-chip { padding: 3px 9px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--parch-2); border: 2px solid var(--ink); cursor: var(--cur-hand), pointer; }
.il-chip.on { background: var(--gold); }
.il-only { margin-left: auto; font-size: 13px; }
.il-cat-hint { margin: 0; font-size: 12px; color: var(--ink-soft); }
.il-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 470px; overflow-y: auto; padding-right: 4px; }
.il-item { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 6px; font: inherit; color: var(--ink); text-align: left; background: #fff6dc; border: 3px solid var(--ink); border-left-width: 6px; cursor: var(--cur-hand), pointer; }
.il-item:hover:not(:disabled) { background: #fff1c2; }
.il-item.r-common { border-left-color: #8a8478; }
.il-item.r-rare { border-left-color: var(--blue); }
.il-item.r-epic { border-left-color: var(--purple); }
.il-item.r-legendary { border-left-color: #d4881a; background: linear-gradient(135deg, #fff6dc 70%, #ffe2a8); }
.il-item.on { box-shadow: 0 0 0 3px var(--gold); background: #fff3c8; }
.il-item.cant { opacity: .5; cursor: default; }
.il-item-art { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--parch-2); border: 2px solid var(--ink); }
.il-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.il-item-main b { font-size: 14px; }
.il-item-meta { font-size: 11px; color: var(--ink-soft); }
.r-common .il-rar { color: #6b665c; } .r-rare .il-rar { color: var(--blue); } .r-epic .il-rar { color: var(--purple); } .r-legendary .il-rar { color: #b4690f; }
.il-fx { display: flex; flex-direction: column; font-size: 12px; font-weight: 700; }
.il-who { display: flex; flex-wrap: wrap; gap: 1px; }
.il-who .sprite { width: 18px; height: 18px; }
.il-anyone { font-size: 11px; color: var(--ink-soft); }
.il-src { font-size: 11px; color: var(--ink-soft); }
.il-src .sprite { width: 14px; height: 14px; vertical-align: middle; }
.il-equipped { position: absolute; top: 2px; right: 4px; font-weight: 700; color: var(--green-dark, #2f7d3b); }
.il-test { padding: 10px 12px; background: var(--parch-2); border: 3px solid var(--ink); }
.il-test .tn-h { margin-top: 0; }
.il-test-text, .il-test-hint { margin: 4px 0; font-size: 13px; color: var(--ink-soft); }
.il-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.il-test-row select { padding: 3px 6px; font: inherit; background: #fff6dc; border: 2px solid var(--ink); }
.il-prog { position: relative; height: 18px; margin: 8px 0; background: #fff6dc; border: 3px solid var(--ink); }
.il-prog i { display: block; height: 100%; background: var(--green); }
.il-prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.il-table { width: 100%; margin-top: 8px; border-collapse: collapse; background: #fff6dc; border: 3px solid var(--ink); }
.il-table th, .il-table td { padding: 4px 8px; border-bottom: 2px solid var(--parch-2); text-align: left; font-size: 14px; }
.il-table thead th { font-family: var(--pixel); font-size: 8px; font-weight: normal; }
.il-res { position: relative; width: 38%; }
.il-res i { position: absolute; left: 0; top: 4px; bottom: 4px; opacity: .3; }
.il-res i.l-A { background: var(--blue); } .il-res i.l-B { background: var(--red); }
.il-res span { position: relative; font-weight: 700; }
.il-res.best span::after { content: ' ★'; color: var(--gold-dark); }
/* a hero's gear on its card (a test fight) */
.cc-gear { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
.cc-gear .cc-label { margin-right: 2px; }
.cc-gear-item { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; font-size: 12px; font-weight: 700; background: #fff6dc; border: 2px solid var(--ink); }
.cc-gear-item .item-art { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .il-main { grid-template-columns: 1fr; }
  .il-loads { grid-template-columns: 1fr; }
  .il-items { max-height: none; }
}

/* ---------- 🎭 Skins Lab (a beta: js/skins.js) ---------- */
.mtile.skins .mt-ico { background: linear-gradient(135deg, rgba(255, 143, 208, .55), rgba(242, 193, 78, .5)); }
.modal.skins-lab { max-width: 1100px; width: 100%; }
.il-champ { position: relative; }
.sk-has { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 11px; color: var(--gold-dark); }
.sk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sk-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; background: linear-gradient(#3b2414, #241508); border: 4px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(242, 193, 78, .35); color: #f3e6c4; }
.sk-stage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; }
.sk-stage-head b { font-family: var(--pixel); font-size: 12px; font-weight: normal; color: #ffd36b; text-shadow: 2px 2px 0 var(--ink); }
.sk-of { font-size: 13px; opacity: .8; }
.sk-rar { padding: 0 6px; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid var(--ink); }
.sk-rar.r-rare { background: var(--blue); } .sk-rar.r-epic { background: var(--purple); } .sk-rar.r-legendary { background: #d4881a; }
.sk-cells { display: flex; gap: 14px; }
.sk-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; background: var(--tile-slab) 0 0 / 48px 48px, #b9b2a2; border: 4px solid #f3ecd8; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--wood-0); }
.sk-cell.p0 { border-color: var(--blue); } .sk-cell.p1 { border-color: var(--red); }
.sk-cell small { font-family: var(--pixel); font-size: 7px; color: var(--ink); }
.sk-pose .sprite { width: 128px; height: 128px; image-rendering: pixelated; animation: sk-bob 1.2s steps(2) infinite; }
.sk-pose.hit .sprite { filter: drop-shadow(0 0 6px #ff4040) brightness(1.15) sepia(.4) hue-rotate(-30deg) saturate(3); animation: none; }
@keyframes sk-bob { 50% { transform: translateY(3px); } }
body.reduce-motion .sk-pose .sprite { animation: none; }
.sk-poses { display: flex; gap: 4px; }
.sk-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.sk-tag { padding: 1px 8px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--parch); border: 2px solid var(--ink); }
.sk-compare { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sk-compare .sprite { width: 40px; height: 40px; image-rendering: pixelated; background: rgba(255, 246, 220, .12); }
.sk-list { display: flex; flex-direction: column; gap: 6px; }
.sk-list .tn-h { margin: 0; }
.sk-card { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #fff6dc; border: 3px solid var(--ink); border-left-width: 6px; cursor: var(--cur-hand), pointer; }
.sk-card:hover { background: #fff1c2; }
.sk-card.on { box-shadow: 0 0 0 3px var(--gold); background: #fff3c8; }
.sk-card.r-base { border-left-color: #8a8478; } .sk-card.r-rare { border-left-color: var(--blue); } .sk-card.r-epic { border-left-color: var(--purple); }
.sk-card.r-legendary { border-left-color: #d4881a; background: linear-gradient(135deg, #fff6dc 70%, #ffe2a8); }
.sk-card-art { display: flex; gap: 2px; flex-shrink: 0; }
.sk-card-art .sprite { width: 44px; height: 44px; image-rendering: pixelated; background: var(--parch-2); border: 2px solid var(--ink); }
.sk-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sk-card-text b { font-size: 15px; }
.sk-card-text small { font-size: 12px; color: var(--ink-soft); }
.sk-show { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--parch-2); border: 3px solid var(--ink); cursor: var(--cur-hand), pointer; }
.sk-show span { display: flex; flex-direction: column; }
.sk-show small { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .sk-main { grid-template-columns: 1fr; }
  .sk-pose .sprite { width: 96px; height: 96px; }
}
.sk-line { color: #2a8bb8; font-weight: 700; }

/* ---------- The closed beta's landing page (js/beta.js) ---------- */
.beta-gate { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: linear-gradient(rgba(30, 18, 10, .45), rgba(30, 18, 10, .7)), var(--tile-grass) 0 0 / 48px 48px; background-color: #3f6e2a; } /* solid: nothing of the game behind it shows */
.beta-gate[hidden] { display: none; }
body.gated { overflow: hidden; }
.gate-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(400px, 100%); padding: 26px 24px 22px; text-align: center;
  background: var(--parch); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px var(--parch-3), 8px 8px 0 rgba(0, 0, 0, .45); }
.gate-card .logo { margin: 0; }
.gate-beta { margin: 0; }
.gate-beta span { display: inline-block; padding: 3px 10px; font-family: var(--pixel); font-size: 9px; color: #fff; background: #8b5cf6; border: 3px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); }
.gate-text { margin: 0; font-size: 15px; color: var(--ink-soft); }
.gate-form { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; text-align: left; }
.gate-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.gate-form input { padding: 9px 10px; font: inherit; font-size: 16px; color: var(--ink); background: #fff8e6; border: 3px solid var(--ink); }
.gate-form input:focus { outline: none; box-shadow: 0 0 0 3px var(--gold); }
.gate-form .btn { margin-top: 4px; }
.gate-msg { min-height: 20px; margin: 0; font-size: 14px; font-weight: 700; text-align: center; }
.gate-msg.bad { color: var(--red-dark); } .gate-msg.info { color: var(--ink-soft); }
.beta-gate.busy .btn { opacity: .6; }

/* ---------- Account roles (Supabase profiles.role; GameConfig.hasRole) ---------- */
.role-tag { display: inline-block; padding: 0 6px; font-family: var(--pixel); font-size: 7px; line-height: 1.8; color: #fff; border: 2px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); vertical-align: middle; }
.role-tag.r-tester { background: var(--blue); } .role-tag.r-admin { background: var(--red-dark); } .role-tag.r-god { background: linear-gradient(135deg, #f2c14e, #d4881a); }