/* Mononster · arena UI. Phone-first; desktop adds a side dock. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@font-face { font-family: Recharge; src: url('./assets/recharge.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Montserrat; src: url('./assets/montserrat.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #04121a; --bg2: #082431; --panel: #0c2b38; --panel2: #10384a; --line: #1f5266;
  --text: #f4f1e6; --muted: #9fbac2; --gold: #ffc533; --gold2: #ff9d1c; --blue: #2f9bff; --blue2: #1662d8; --red: #ff4058; --green: #3fe08a;
  --fire: #ff7a2e; --water: #2fb6ff; --earth: #d99a4e; --air: #3fe0c4; --mystery: #a774ff; --legendary: #ffc533; --empty: #4a6570;
  --display: Recharge, Montserrat, system-ui, sans-serif;
  --body: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 14px;
  --shadow: 0 10px 30px #0008;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: radial-gradient(120% 70% at 50% -10%, #12465a 0, transparent 60%), radial-gradient(90% 60% at 50% 120%, #2a1450 0, transparent 60%), var(--bg);
  background-attachment: fixed;
  color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.35;
  min-height: 100dvh; overscroll-behavior: none; -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
}
input, select, textarea { user-select: text; -webkit-user-select: text; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.emblem { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px #0007); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.kicker { font: 700 11px/1 var(--body); letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
#app > p { padding: 24px; text-align: center; }

/* ───────── buttons ───────── */
.btn {
  --b: var(--blue); --b2: var(--blue2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 16px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--b), var(--b2));
  box-shadow: inset 0 1px 0 #ffffff40, 0 2px 0 color-mix(in srgb, var(--b2) 70%, #000), 0 4px 10px #0004;
  color: #fff; font: 700 15px/1.1 var(--display); letter-spacing: .02em; text-shadow: 0 1px 0 #0005;
  transition: transform .08s, filter .15s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 color-mix(in srgb, var(--b2) 70%, #000), 0 1px 4px #0004; }
.btn:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
.btn-gold { --b: #ffc93a; --b2: #f5a11c; color: #3a1d00; text-shadow: none; }
.btn-blue { --b: #2f95f5; --b2: #1a68d6; }
.btn-ghost { background: #ffffff10; box-shadow: inset 0 0 0 1.5px #ffffff26; text-shadow: none; font-family: var(--body); font-weight: 700; color: var(--muted); }
.btn-ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1.5px #ffffff40; }
.btn-lg { min-height: 56px; font-size: 17px; border-radius: 16px; }
.btn-xl { min-height: 66px; font-size: 24px; border-radius: 18px; width: 100%; }
.btn small { display: block; font: 600 11px/1.2 var(--body); opacity: .85; letter-spacing: .02em; text-shadow: none; }
.btn .ico { width: 1.4em; height: 1.4em; }
.btn-xl .ico { width: 34px; height: 34px; }
.btn.with-card { padding: 5px 12px 5px 5px; gap: 8px; text-align: left; }
.btn.with-card small { opacity: .8; }
.mini-art { width: 30px; height: 40px; border-radius: 6px; background: center/cover; box-shadow: 0 0 0 2px #fff6; flex: none; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #ffffff12; color: var(--text); font-size: 18px; }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn.muted { color: var(--muted); }
.lang-btn { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: #ffffff12; font: 800 13px var(--body); }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: #00000040; box-shadow: inset 0 0 0 1px #ffffff14; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--muted); }
.seg button.on { background: linear-gradient(#3aa2ff, #1662d8); color: #fff; box-shadow: 0 2px 6px #0006; }

/* ───────── top bar ───────── */
.topbar { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 6px; position: relative; z-index: 5; }
.topbar .brand img { height: 34px; display: block; }
.topbar-tools { margin-left: auto; display: flex; gap: 6px; }
.turn-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 12px; border-radius: 999px; background: #00000045; box-shadow: inset 0 0 0 1px #ffffff18; font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; }
.turn-chip span { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.turn-chip b { overflow: hidden; text-overflow: ellipsis; }

/* ───────── HUD player chips ───────── */
.hud { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 6px; padding: 6px 8px 6px; }
.hud.n3, .hud.n5, .hud.n6 { grid-template-columns: repeat(3, 1fr); }
.hud.n4 { grid-template-columns: repeat(2, 1fr); }
.chip {
  position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px;
  min-width: 0; padding: 6px 8px 6px 6px; border: 0; border-radius: 14px; text-align: left;
  background: linear-gradient(160deg, #123b4c, #0a2330); box-shadow: inset 0 0 0 1.5px #ffffff14, 0 4px 10px #0005;
  transition: box-shadow .25s, transform .25s, filter .25s;
}
.chip.active { box-shadow: inset 0 0 0 2px var(--pc), 0 0 18px color-mix(in srgb, var(--pc) 55%, transparent), 0 4px 10px #0005; transform: translateY(-1px); }
.chip.targeted { box-shadow: inset 0 0 0 2px var(--red), 0 0 16px #ff405866; }
.chip.targeted.active { box-shadow: inset 0 0 0 2px var(--pc), 0 0 0 2px var(--red), 0 0 18px #ff405866; }
.chip.out { filter: grayscale(1) brightness(.55); }
.chip.danger .chip-hp strong { color: #ff8090; animation: pulse-red 1s infinite; }
.chip.me .chip-name::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--green); vertical-align: middle; }
.chip-avatar { width: 34px; height: 34px; border-radius: 11px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc) 55%, #fff) 0, var(--pc) 45%, color-mix(in srgb, var(--pc) 40%, #000) 100%); display: grid; place-items: center; overflow: hidden; }
.chip-avatar .pawn-body img { width: 30px; }
.chip-avatar .pawn-body b { display: none; }
.chip-main { min-width: 0; display: grid; gap: 4px; }
.chip-name { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-name em { position: absolute; top: -7px; left: 44px; font-style: normal; font-size: 8.5px; font-weight: 900; letter-spacing: .1em; padding: 2px 6px; border-radius: 6px; box-shadow: 0 2px 4px #0008; background: var(--pc); color: #04121a; }
.chip.targeted .chip-name em { background: var(--red); color: #fff; }
.chip-hp { display: grid; justify-items: end; gap: 3px; }
.chip-hp strong { font: 700 17px/1 var(--display); text-shadow: 0 2px 0 #0008; font-variant-numeric: tabular-nums; }
.chip-cards { display: flex; gap: 2px; }
.chip-cards i { width: 6px; height: 9px; border-radius: 2px; background: #ffffff1c; }
.chip-cards i.on { background: var(--gold); box-shadow: 0 0 4px #ffc53388; }
.hp-bar { position: relative; display: block; height: 9px; border-radius: 6px; background: #00000070; overflow: hidden; box-shadow: inset 0 1px 2px #000a; }
.hp-fill, .hp-ghost { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.hp-ghost { background: #fff; opacity: .65; transition: width .6s cubic-bezier(.3, 0, .2, 1); }
.hp-fill { background: linear-gradient(180deg, #8dff9e, #22c25a 60%, #149040); box-shadow: inset 0 1px 0 #fff8; transition: width .35s ease-out; }
.hp-bar.low .hp-fill { background: linear-gradient(180deg, #ff9aa6, #ff3550 60%, #b0162a); }
.chip { grid-template-areas: "av name hp" "av bar bar"; row-gap: 5px; }
.chip-main { display: contents; }
.chip-avatar { grid-area: av; }
.chip-name { grid-area: name; }
.chip .hp-bar { grid-area: bar; }
.chip-hp { grid-area: hp; display: flex; align-items: center; gap: 5px; }
.n5 .chip, .n6 .chip { grid-template-columns: 24px 1fr auto; column-gap: 5px; padding: 5px 6px 6px 5px; }
.n5 .chip-avatar, .n6 .chip-avatar { width: 24px; height: 24px; border-radius: 8px; }
.n5 .chip-avatar .pawn-body img, .n6 .chip-avatar .pawn-body img { width: 22px; }
.n5 .chip-hp strong, .n6 .chip-hp strong { font-size: 12px; }
.n5 .chip-cards, .n6 .chip-cards { display: none; }
.n5 .chip-name, .n6 .chip-name { font-size: 11px; }
.n5 .chip-name em, .n6 .chip-name em { left: 30px; font-size: 7.5px; padding: 1px 4px; }
.n5 .hp-bar, .n6 .hp-bar { height: 6px; }
.reaction-bubble { position: absolute; left: 50%; top: 100%; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 14px; background: #fff; color: #10202a; font-weight: 800; font-size: 13px; white-space: nowrap; transform: translate(-50%, 4px) scale(.3); opacity: 0; pointer-events: none; box-shadow: 0 6px 16px #0008; }
.reaction-bubble::before { content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #fff; }
.reaction-bubble span { font-size: 24px; }
.reaction-bubble.show { animation: bubble 2.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ───────── stage & board ───────── */
.game-screen { min-height: 100dvh; display: flex; flex-direction: column; }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px max(8px, env(safe-area-inset-bottom)); }
.board-wrap { --board: clamp(280px, min(calc(100vw - 12px), calc(100dvh - 350px)), 720px); width: var(--board); }
.board {
  position: relative; display: grid; grid-template: repeat(11, minmax(0, 1fr)) / repeat(11, minmax(0, 1fr)); gap: 2px; width: 100%; aspect-ratio: 1; padding: 5px;
  border-radius: 18px; background: linear-gradient(145deg, #1b5068, #0a2532 40%, #071a24); box-shadow: inset 0 0 0 2px #ffffff18, 0 14px 40px #000a, 0 0 0 1px #000;
  container-type: inline-size;
}
.tile {
  --c: var(--empty); position: relative; display: grid; place-items: center; border-radius: 5px; min-width: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 42%, #0c2633), color-mix(in srgb, var(--c) 16%, #061820));
  box-shadow: inset 0 1px 0 #ffffff22, inset 0 -2px 0 #0006;
}
.tile { overflow: hidden; }
.tile .emblem { width: 62%; height: auto; aspect-ratio: 1; }
.tile small { position: absolute; left: 2px; top: 0; font: 700 clamp(5px, 1.35cqw, 9px)/1.2 var(--body); color: #ffffff70; }
.t-fire { --c: var(--fire); } .t-water { --c: var(--water); } .t-earth { --c: var(--earth); } .t-air { --c: var(--air); }
.t-mystery { --c: var(--mystery); } .t-legendary { --c: var(--legendary); }
.t-empty { background: #0a1d26; box-shadow: inset 0 0 0 1px #ffffff0c; }
.t-empty .emblem { width: 40%; height: auto; opacity: .55; }
.t-mystery .emblem, .t-legendary .emblem { width: 80%; height: auto; animation: float 3s ease-in-out infinite; }
.tile.here { box-shadow: inset 0 0 0 2px #fff, 0 0 12px #fff8; }
.tile.preview { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px var(--gold); animation: pulse-tile .9s infinite; }
.tile.trail { filter: brightness(1.35); }
.tile.tile-hit { animation: tile-hit .8s ease-out; z-index: 2; }
.board-center {
  grid-row: 2 / 11; grid-column: 2 / 11; position: relative; display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 40%, #174d61 0, #0b2a37 55%, #061923 100%);
  box-shadow: inset 0 0 0 1px #ffffff12, inset 0 0 40px #0009;
}
.board-center::before { content: ''; position: absolute; inset: 0; background: url('./assets/logo-small.webp') center 50% / 62% no-repeat; opacity: .07; filter: grayscale(.4); }
.board-pawn { position: absolute; z-index: 12; width: 7.4%; transform: translate(-50%, -72%); transition: left .16s ease-out, top .16s ease-out; pointer-events: none; }
.board-pawn.out { opacity: .25; filter: grayscale(1); }
.board-pawn.active .pawn-body::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 22%; border-radius: 50%; background: radial-gradient(var(--pc), transparent 70%); z-index: -1; animation: pulse 1.2s infinite; }
.pawn-body { position: relative; display: block; filter: drop-shadow(0 3px 2px #000b); }
.pawn-body img { display: block; width: 100%; }
.pawn-body b { position: absolute; right: -14%; bottom: 2%; display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--pc); color: #04121a; font: 900 clamp(6px, 1.6cqw, 11px)/1 var(--body); box-shadow: 0 0 0 1.5px #fff; }
.pawn-body.big { width: 34%; margin: 0 auto; }
.pawn-body.big b { display: none; }

/* centre content */
.center-turn { display: grid; justify-items: center; gap: 4cqw; z-index: 1; text-align: center; }
.center-turn .kicker { font-size: clamp(9px, 2.4cqw, 13px); }
.incoming { display: grid; justify-items: center; gap: 2px; animation: pop-in .35s cubic-bezier(.2, 1.5, .4, 1); }
.incoming > span { width: 13cqw; height: 13cqw; }
.incoming strong { font: 700 clamp(18px, 7cqw, 40px)/1 var(--display); color: #ffd0d6; text-shadow: 0 3px 0 #000, 0 0 18px #ff4058; }
.incoming small { font-size: clamp(9px, 2.4cqw, 13px); color: var(--muted); font-weight: 700; }
.bakame-paths { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bakame-paths span { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: #0006; font-weight: 800; font-size: clamp(10px, 2.6cqw, 14px); }
.bakame-paths .emblem { width: 18px; height: 18px; }
.center-card { position: relative; z-index: 1; width: 42cqw; perspective: 900px; }
.center-card .flip { position: relative; transform-style: preserve-3d; }
.center-card.fresh .flip { animation: card-flip .75s cubic-bezier(.2, .9, .3, 1.2) both; }
.center-card .card-back { position: absolute; inset: 0; border-radius: 6cqw; background: url('./assets/logo-small.webp') center / 80% no-repeat, radial-gradient(circle, #1f5b74, #08202b 70%); box-shadow: inset 0 0 0 1cqw #ffc533aa; transform: rotateY(180deg); backface-visibility: hidden; }
.center-card .game-card { backface-visibility: hidden; }
.center-card .rays { position: absolute; inset: -60%; z-index: -1; opacity: 0; background: repeating-conic-gradient(from 0deg, #ffffff22 0 8deg, transparent 8deg 22deg); mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.center-card.rarity-legendary .rays { opacity: 1; background: repeating-conic-gradient(from 0deg, #ffd84a55 0 8deg, transparent 8deg 22deg); animation: spin 9s linear infinite; }
.center-card.rarity-mystery .rays { opacity: 1; background: repeating-conic-gradient(from 0deg, #a774ff44 0 8deg, transparent 8deg 22deg); animation: spin 14s linear infinite; }
.center-winner { display: grid; justify-items: center; gap: 2cqw; text-align: center; }
.center-winner h2 { margin: 0; font: 700 clamp(18px, 6cqw, 38px)/1 var(--display); color: var(--gold); text-shadow: 0 3px 0 #000; }
.center-stack { display: grid; justify-items: center; gap: 2cqw; }
.stack-well { display: flex; align-items: center; gap: 2cqw; }
.stack-well .plus { font: 700 6cqw var(--display); color: var(--gold); }
.stack-slot { width: 22cqw; aspect-ratio: 2/3; border-radius: 3cqw; display: grid; place-items: center; border: 2px dashed #ffffff40; font: 700 7cqw var(--display); color: #ffffff40; }
.stack-slot.filled { border: 0; }
.stack-well.fusing .stack-slot { animation: fuse .7s ease-in forwards; }
.stack-well.fusing .stack-slot:last-child { animation-name: fuse-r; }
.stack-total { font: 700 clamp(18px, 6cqw, 34px)/1 var(--display); color: var(--gold); text-shadow: 0 2px 0 #000; }
.stack-total small { font: 700 11px var(--body); color: var(--muted); }

/* ───────── 3D dice ───────── */
/* Each die gets its own vanishing point (perspective on the die, not the tray): with a shared one the side faces of an
   off-centre die show as thin white slivers next to the front face. */
.dice-tray { display: flex; gap: 5cqw; }
.die3d { --s: clamp(30px, 12.5cqw, 72px); position: relative; width: var(--s); height: var(--s); perspective: calc(var(--s) * 7); perspective-origin: 50% 50%; }
.die-shadow { position: absolute; left: 8%; right: 8%; bottom: -14%; height: 18%; border-radius: 50%; background: #000; filter: blur(4px); opacity: .55; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: none; }
.df { position: absolute; inset: 0; transform-origin: 50% 50%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; border-radius: 20%; background: radial-gradient(circle at 30% 25%, #fffef8, #f4e8c8 60%, #d9c38f); box-shadow: inset 0 0 0 1px #c7ab6c, inset 0 -3px 5px #0002; backface-visibility: hidden; }
/* Faces rendered in Blender (assets/dice/face-N.webp, ivory with recessed pips); the CSS pips below stay as the fallback while they load. */
.df1 { background-image: url(assets/dice/face-1.webp); } .df2 { background-image: url(assets/dice/face-2.webp); } .df3 { background-image: url(assets/dice/face-3.webp); }
.df4 { background-image: url(assets/dice/face-4.webp); } .df5 { background-image: url(assets/dice/face-5.webp); } .df6 { background-image: url(assets/dice/face-6.webp); }
.df { background-size: 100% 100%; background-repeat: no-repeat; box-shadow: none; border-radius: 9%; }
.df i { display: none; }
.df i { place-self: center; width: 70%; aspect-ratio: 1; border-radius: 50%; }
.df i.on { background: radial-gradient(circle at 35% 30%, #554, #111 70%); box-shadow: inset 0 1px 1px #000; }
.df1 i.on { background: radial-gradient(circle at 35% 30%, #ff6b6b, #b0101c 70%); width: 90%; }
.df1 { transform: translateZ(calc(var(--s) / 2)); }
.df6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.df2, .df3, .df4, .df5 { scale: .985; }
.df2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.df5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.df3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.df4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.dice-tray.landed .die3d { animation: land-glow .7s ease-out; }

/* ───────── dock ───────── */
.dock { width: var(--dockw, min(100%, 720px)); display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #0f3445, #0a2633); box-shadow: inset 0 0 0 1.5px #ffffff14, var(--shadow); }
.dock.defending { box-shadow: inset 0 0 0 1.5px #2fb6ff66, 0 0 24px #2fb6ff22, var(--shadow); }
.prompt { display: flex; align-items: center; gap: 8px; min-height: 38px; max-width: 100%; overflow: hidden; }
.prompt > div:first-child { min-width: 0; flex: 1 1 0; overflow: hidden; }
.prompt > :not(:first-child) { flex: none; }
.prompt h2 { margin: 0; font: 700 17px/1.15 var(--display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.prompt h2 .who { font-size: .82em; font-weight: 600; opacity: .85; }
.prompt p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.threat { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 12px; background: linear-gradient(#ff405833, #ff405818); box-shadow: inset 0 0 0 1.5px #ff405888; animation: pulse-red 1.2s infinite; }
.threat strong { font: 700 20px/1 var(--display); color: #ffd0d6; }
.waiting { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.waiting i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: dots 1s infinite; }
.waiting i:nth-child(2) { animation-delay: .15s; } .waiting i:nth-child(3) { animation-delay: .3s; }
.waiting span { margin-left: 4px; }
.action-row, .combo-row { display: flex; flex-wrap: wrap; gap: 7px; }
.action-row .btn, .combo-row .btn { flex: 1 1 auto; min-height: 42px; font-size: 14px; padding: 6px 12px; }
.action-row .btn-ghost { flex: 0 1 auto; }
.hand-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.reserve { display: grid; grid-template-columns: repeat(3, minmax(0, 76px)); gap: 7px; }
.slot-empty { aspect-ratio: 2/3; border-radius: 9px; border: 2px dashed #ffffff22; display: grid; place-items: center; color: #ffffff30; font: 700 22px var(--display); }
.roll-btn {
  position: relative; width: 96px; height: 96px; border: 0; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0;
  background: radial-gradient(circle at 50% 35%, #ffd75a, #ffbe2e 55%, #f29a18 100%);
  box-shadow: inset 0 1px 0 #fff8, 0 3px 0 #b8650c, 0 8px 18px #0008, 0 0 0 4px #04121a, 0 0 0 6px #ffc53355;
  color: #3a1d00; font: 700 15px/1 var(--display); transition: transform .08s;
}
.roll-btn:not(:disabled) { animation: roll-ready 1.6s ease-in-out infinite; }
.roll-btn:active:not(:disabled) { transform: translateY(2px) scale(.97); box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #b8650c, 0 3px 8px #0008, 0 0 0 4px #04121a, 0 0 0 6px #ffc53355; }
.roll-btn:disabled { filter: grayscale(1) brightness(.5); animation: none; }
.roll-face .ico { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 #0004); }
.roll-btn { container-type: inline-size; overflow: hidden; }
/* The label sizes with the button so long words (LANCER, LANZAR) never spill over the circle. */
.roll-btn b { font-weight: 700; margin-top: 2px; letter-spacing: .03em; font-size: clamp(10px, 13.5cqw, 18px); max-width: 88%; white-space: nowrap; }

.feed { display: grid; margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px solid #ffffff12; font-size: 12.5px; color: var(--muted); }
.feed li { padding: 4px 0; }
.feed li:first-child { color: var(--text); font-weight: 700; }
/* ───────── cards (PAMPH format) ───────── */
.game-card { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 7%/4.7%; container-type: inline-size; transition: transform .15s, filter .15s; }
.game-card:active { transform: scale(.97); }
.game-card.playable { animation: playable 1.4s ease-in-out infinite; }
.game-card.selected { transform: translateY(-6px); filter: drop-shadow(0 0 8px var(--gold)); }
.card-crown { position: absolute; top: -8%; left: 50%; width: 30%; transform: translateX(-50%); z-index: 6; filter: drop-shadow(0 2px 2px #000); }
.card-crown .ico { width: 100%; height: auto; aspect-ratio: 1; }
.stack-order { position: absolute; top: -6%; right: -6%; z-index: 6; display: grid; place-items: center; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: #3a1d00; font: 700 16cqw var(--display); box-shadow: 0 2px 6px #000; }
.card-face {
  --c1: #ffb347; --c2: #e83a5c; --c3: #6e1a6a; --band: #ff8a1c; --title: #ffe23a;
  position: relative; display: block; width: 100%; aspect-ratio: 5/7; overflow: hidden; isolation: isolate;
  border-radius: 7%/5%; text-align: center; color: #fff; font-family: var(--body);
  background: linear-gradient(#fdfdfd, #d9e2ea); padding: 2.6cqw;
  box-shadow: 0 1.5cqw 4cqw #000a;
}
.card-face.el-fire { --c1: #ffb347; --c2: #ec3d5a; --c3: #6e1a6a; --band: #ff8a1c; }
.card-face.el-water { --c1: #6ff0ff; --c2: #1f8fe6; --c3: #0d2c7a; --band: #1f8fe6; }
.card-face.el-earth { --c1: #ffd38a; --c2: #c06a2c; --c3: #4a2410; --band: #c87a32; }
.card-face.el-air { --c1: #b7ffe8; --c2: #2cc4a6; --c3: #0b4d5a; --band: #1fae94; }
.card-face.el-mystery { --c1: #58e1ff; --c2: #2b86e6; --c3: #5326c9; --band: #3fa6e8; }
.card-face.el-legendary { --c1: #fff1a6; --c2: #f0a020; --c3: #8a3d0a; --band: #e8a01e; --title: #fff6c4; }
.cf-bg { position: absolute; z-index: -1; background: radial-gradient(120% 60% at 50% 15%, var(--c1), transparent 60%), linear-gradient(170deg, var(--c2), var(--c3)); }
.cf-shine { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, #ffffff30 45%, transparent 55%); background-size: 250% 100%; background-position: 120% 0; }
.game-card:hover .cf-shine, .center-card.fresh .cf-shine { animation: shine 1.1s ease-out; }

/* ───────── home ───────── */
.home { min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.home::before { content: ''; position: absolute; left: 50%; top: 24%; width: 180vmax; height: 180vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, #ffffff07 0 6deg, transparent 6deg 18deg); animation: spin 80s linear infinite; pointer-events: none; z-index: -1; }
.hero { position: relative; display: grid; justify-items: center; padding: 6px 16px 0; }
.hero-fan { position: relative; width: min(320px, 78vw); height: min(250px, 58vw); }
.fan-card { position: absolute; left: 50%; bottom: 0; width: 42%; transform-origin: 50% 120%; filter: drop-shadow(0 12px 18px #000b); container-type: inline-size; }
.fan-card.f0 { transform: translateX(-50%) rotate(-16deg) translateX(-30%); animation: fan-l 6s ease-in-out infinite; }
.fan-card.f1 { transform: translateX(-50%) translateY(-6%); z-index: 2; animation: fan-c 6s ease-in-out infinite; }
.fan-card.f2 { transform: translateX(-50%) rotate(16deg) translateX(30%); animation: fan-r 6s ease-in-out infinite; }
.hero-logo { width: min(420px, 86vw); margin-top: -34px; position: relative; z-index: 3; filter: drop-shadow(0 8px 20px #000c); animation: logo-in .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.hero-tag { margin: -6px 0 0; font: 800 12px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 0 #000; }
.home-actions { display: grid; gap: 12px; width: min(440px, 100%); margin: 16px auto 0; padding: 0 16px; }
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-row .btn { justify-content: flex-start; text-align: left; }
.btn-xl span small { font-size: 12px; }
.name-field { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #0006; box-shadow: inset 0 0 0 1.5px #ffffff18; }
.name-field span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.name-field input { flex: 1; min-width: 0; border: 0; background: none; font-weight: 800; font-size: 16px; padding: 8px 4px; outline: none; }
.home-nav { display: flex; justify-content: center; gap: 8px; margin: auto auto 0; padding: 18px 16px 8px; }
.home-nav button { display: grid; justify-items: center; gap: 4px; min-width: 88px; padding: 10px 8px; border: 0; border-radius: 14px; background: #ffffff0c; box-shadow: inset 0 0 0 1px #ffffff14; font-weight: 700; font-size: 12px; color: var(--muted); }
.home-nav .ico { width: 24px; height: 24px; color: var(--text); }
.credits { text-align: center; font-size: 10.5px; color: #ffffff4d; padding: 6px 0 max(10px, env(safe-area-inset-bottom)); }

/* ───────── setup / online sheets ───────── */
.sheet-screen { min-height: 100dvh; display: flex; flex-direction: column; }
.panel { width: min(480px, calc(100% - 20px)); margin: 6px auto 20px; padding: 18px 16px; display: grid; gap: 12px; border-radius: 22px; background: linear-gradient(180deg, #10384a, #0a2633); box-shadow: inset 0 0 0 1.5px #ffffff14, var(--shadow); }
.panel-title { margin: 0; font: 700 26px/1.1 var(--display); }
.panel p { margin: 0; }
.notice { padding: 10px 12px; border-radius: 12px; background: #ffc53318; box-shadow: inset 0 0 0 1px #ffc53355; font-size: 13px; }
.seats { display: grid; gap: 8px; }
.seat { display: grid; grid-template-columns: 34px 1fr auto 40px; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: #0005; box-shadow: inset 3px 0 0 var(--pc); }
.seat-pawn { width: 34px; height: 34px; border-radius: 10px; background: var(--pc); display: grid; place-items: center; overflow: hidden; }
.seat-pawn .pawn-body img { width: 28px; } .seat-pawn .pawn-body b { display: none; }
.seat input, .field input, .field select, .join-row input, .advanced input { width: 100%; min-width: 0; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 11px; background: #00000066; box-shadow: inset 0 0 0 1.5px #ffffff1c; font-weight: 700; font-size: 16px; outline: none; }
.seat input:focus, .field input:focus, .join-row input:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.seat .seg button { padding: 7px 9px; font-size: 12px; }
.add-seat { justify-self: start; }
.field { display: grid; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field > span { display: flex; justify-content: space-between; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: #ffffff1c; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: .25em; font: 800 22px var(--body); text-align: center; }
.advanced summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; padding: 4px 0; }
.advanced input { margin-top: 6px; font-size: 13px; }
.lobby { text-align: center; justify-items: stretch; }
.room-code { display: flex; justify-content: center; gap: 6px; }
.room-code b { display: grid; place-items: center; width: 42px; height: 54px; border-radius: 10px; background: linear-gradient(#ffd75a, #f5a11c); color: #3a1d00; font: 900 28px var(--body); box-shadow: 0 2px 0 #b8650c; }
.conn { justify-self: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.conn::before { content: '●'; margin-right: 6px; color: #ff9d3c; }
.conn.ok::before { color: var(--green); }
.roster { display: grid; gap: 6px; }
.roster-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #0005; box-shadow: inset 3px 0 0 var(--pc, #fff3); text-align: left; font-weight: 800; }
.roster-row .pawn-body { width: 28px; } .roster-row .pawn-body b { display: none; }
.roster-row em { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-left: 4px; }
.roster-row b { color: var(--muted); }
.roster-row.ready b { color: var(--green); }
.roster-row.empty { grid-template-columns: 1fr; color: var(--muted); font-weight: 600; border: 1.5px dashed #ffffff22; background: none; box-shadow: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ff9d3c; }
.dot.on { background: var(--green); }
.stepper { display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; }
.stepper b { font: 700 22px var(--display); min-width: 26px; }

/* ───────── modal ───────── */
dialog#modal { width: min(560px, 100%); max-height: min(88dvh, 900px); margin: auto auto 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #10384a, #081f2a); color: var(--text); box-shadow: 0 -10px 40px #000c, inset 0 0 0 1.5px #ffffff18; overflow: auto; overscroll-behavior: contain; }
dialog#modal.library-modal, dialog#modal.rules-modal { height: min(92dvh, 900px); }
dialog#modal[open] { animation: sheet-up .28s cubic-bezier(.2, .9, .3, 1); }
dialog#modal::backdrop { background: #000a; backdrop-filter: blur(3px); }
.modal-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 18px; background: linear-gradient(180deg, #10384a 75%, #10384a00); }
.modal-head h2 { margin: 0; font: 700 21px/1.1 var(--display); }
.modal-body { padding: 0 16px max(18px, env(safe-area-inset-bottom)); }
.card-detail { display: grid; gap: 14px; justify-items: center; }
.detail-card { width: min(340px, 82vw); container-type: inline-size; filter: drop-shadow(0 14px 24px #000b); }
.detail-side { display: grid; gap: 10px; width: 100%; }
.callout { margin: 0; padding: 10px 12px; border-radius: 12px; background: #ffffff0d; font-size: 13px; color: var(--muted); }
.library .lib-controls { position: sticky; top: 58px; z-index: 4; display: grid; gap: 8px; padding: 4px 0 10px; background: #0d3141; margin: 0 -16px; padding-inline: 16px; }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filter { flex: none; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #ffffff10; font-weight: 700; font-size: 12.5px; color: var(--muted); }
.filter .emblem { width: 20px; height: 20px; }
.filter.on { background: linear-gradient(#3aa2ff, #1662d8); color: #fff; }
.lib-group { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font: 700 16px var(--display); }
.lib-group .emblem { width: 22px; height: 22px; }
.lib-group span { font: 700 12px var(--body); color: var(--muted); }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 30vw), 1fr)); gap: 10px; }
.rules .rules-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rules-quick div { display: grid; grid-template-columns: 32px 1fr; align-items: center; column-gap: 8px; padding: 10px; border-radius: 14px; background: #ffffff0b; }
.rules-quick .ico { grid-row: span 2; width: 30px; height: 30px; }
.rules-quick b { font: 700 14px var(--display); }
.rules-quick span { font-size: 11.5px; color: var(--muted); }
.rules details { border-top: 1px solid #ffffff12; }
.rules summary { display: flex; gap: 10px; align-items: baseline; padding: 12px 0; cursor: pointer; font-weight: 800; list-style: none; }
.rules summary span { font: 700 12px var(--display); color: var(--gold); }
.rules details p { margin: 0 0 12px; color: #d2e2e6; font-size: 14px; line-height: 1.5; }
.rules .action-row { margin-top: 14px; }
.settings { display: grid; gap: 14px; }
.toggle { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 48px; height: 28px; border-radius: 99px; background: #ffffff1c; position: relative; transition: background .2s; flex: none; }
.toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 4px #0006; }
.toggle input:checked + span { background: var(--green); }
.toggle input:checked + span::after { transform: translateX(20px); }
.toggle input:focus-visible + span { outline: 2px solid var(--blue); }
input[type=range] { width: 100%; accent-color: var(--gold); }
.menu { display: grid; gap: 8px; }
.menu button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: #ffffff0c; font-weight: 800; font-size: 15px; text-align: left; }
.menu button .ico { width: 24px; height: 24px; color: var(--gold); }
.menu button.danger .ico { color: var(--red); }
.log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.log li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid #ffffff0d; font-size: 13.5px; }
.log li span { font: 700 11px var(--display); color: var(--gold); padding-top: 2px; }
.reserve-view .library-grid { grid-template-columns: repeat(3, 1fr); }

/* ───────── emotes ───────── */
.emote-pop { position: fixed; top: calc(max(8px, env(safe-area-inset-top)) + 48px); right: 10px; z-index: 60; display: grid; grid-template-columns: repeat(3, 70px); gap: 6px; padding: 8px; border-radius: 18px; background: #0c2b38f2; box-shadow: inset 0 0 0 1.5px #ffffff22, var(--shadow); animation: pop-in .25s cubic-bezier(.2, 1.5, .4, 1); }
.emote-pop button { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border: 0; border-radius: 12px; background: #ffffff0d; }
.emote-pop span { font-size: 28px; line-height: 1; }
.emote-pop small { font-size: 10px; font-weight: 800; color: var(--muted); }

/* ───────── toast ───────── */
#toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 100; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 14px; background: #fff; color: #10202a; font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px #000a; animation: pop-in .25s; }

/* ───────── effects ───────── */
.fx-burst { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; --col: #ffb347; }
.fx-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(#fff, var(--col) 60%); box-shadow: 0 0 10px var(--col); animation: particle .75s cubic-bezier(.1, .8, .3, 1) forwards; transform: scale(var(--s)); }
.fx-burst b { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 4px solid var(--col); animation: ring .55s ease-out forwards; }
.fx-burst.big b { left: -50px; top: -50px; width: 100px; height: 100px; border-width: 6px; }
.fx-fire { --col: #ff7a2e; } .fx-water { --col: #2fb6ff; } .fx-earth { --col: #e0a45a; } .fx-air { --col: #3fe0c4; } .fx-mystery { --col: #a774ff; } .fx-legendary { --col: #ffd84a; } .fx-empty { --col: #6d8a94; }
.fx-float { position: fixed; z-index: 75; transform: translate(-50%, 0); pointer-events: none; font: 700 30px/1 var(--display); color: #fff; -webkit-text-stroke: 2px #6b0010; paint-order: stroke fill; text-shadow: 0 3px 0 #6b0010, 0 0 18px #ff2a2a; animation: float-up 1.4s cubic-bezier(.2, 1.2, .4, 1) forwards; }
.fx-float.heal { -webkit-text-stroke-color: #064a20; text-shadow: 0 3px 0 #064a20, 0 0 18px #3fe08a; color: #d9ffe6; }
.fx-flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; animation: flash .6s ease-out forwards; }
.fx-missile { position: fixed; z-index: 72; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; filter: drop-shadow(0 0 12px var(--col)) drop-shadow(0 0 4px #fff); }
.fx-trail { position: fixed; z-index: 71; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(#fff, var(--col) 50%, transparent 70%); pointer-events: none; animation: trail .45s ease-out forwards; }
.fx-banner { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; pointer-events: none; }
.fx-banner-strip { --a: #ffcb3c; --b: #f08c12; display: grid; justify-items: center; width: 130%; padding: 12px 0 14px; transform: rotate(-6deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--b) 85%, transparent) 15%, var(--a) 50%, color-mix(in srgb, var(--b) 85%, transparent) 85%, transparent); box-shadow: 0 8px 30px #000a; animation: banner-in .62s cubic-bezier(.22, 1.08, .32, 1) both; will-change: transform, opacity; }
.fx-banner strong { font: 700 clamp(32px, 11vw, 74px)/1 var(--display); color: #fff; letter-spacing: .02em; -webkit-text-stroke: 3px #2a1100; paint-order: stroke fill; text-shadow: 0 5px 0 #2a1100, 0 0 30px #fff8; animation: banner-text .7s cubic-bezier(.2, 1.12, .3, 1) both; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.fx-banner small { font: 800 15px var(--body); color: #fff; text-shadow: 0 2px 0 #0008; letter-spacing: .08em; text-transform: uppercase; }
.fx-banner.out .fx-banner-strip { animation: banner-out .46s cubic-bezier(.55, 0, .3, 1) forwards; }
.fx-banner.out strong { animation: banner-text-out .46s cubic-bezier(.55, 0, .3, 1) forwards; }
.tone-red .fx-banner-strip { --a: #ff4f6d; --b: #a0102a; } .tone-red strong { -webkit-text-stroke-color: #4a0010; text-shadow: 0 5px 0 #4a0010, 0 0 30px #ff8a9a; }
.tone-blue .fx-banner-strip { --a: #3aa2ff; --b: #1046b8; } .tone-blue strong { -webkit-text-stroke-color: #04205a; text-shadow: 0 5px 0 #04205a, 0 0 30px #9fd4ff; }
.tone-purple .fx-banner-strip { --a: #a774ff; --b: #4a23b8; } .tone-purple strong { -webkit-text-stroke-color: #20064a; text-shadow: 0 5px 0 #20064a, 0 0 30px #d6b8ff; }
.tone-green .fx-banner-strip { --a: #3fe08a; --b: #0f7a3c; } .tone-green strong { -webkit-text-stroke-color: #043a1a; text-shadow: 0 5px 0 #043a1a; }
.tone-steel .fx-banner-strip { --a: #5c7c88; --b: #22414c; } .tone-steel strong { font-size: clamp(26px, 8vw, 54px); -webkit-text-stroke-color: #0a1a20; text-shadow: 0 4px 0 #0a1a20; }
.fx-confetti { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 90; pointer-events: none; }
.victory { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle, #0009, #000d); animation: fade-in .4s; }
.victory-card { position: relative; display: grid; justify-items: center; gap: 8px; width: min(360px, 100%); padding: 30px 20px 22px; border-radius: 26px; background: linear-gradient(180deg, #1b5068, #0a2532); box-shadow: inset 0 0 0 2px #ffc53388, 0 20px 60px #000; text-align: center; overflow: hidden; animation: pop-in .6s cubic-bezier(.2, 1.4, .4, 1); }
.victory-card .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(#ffd84a22 0 8deg, transparent 8deg 22deg); animation: spin 14s linear infinite; z-index: -1; }
.victory-card .v-crown { width: 64px; height: 64px; margin-bottom: -14px; animation: float 2.4s ease-in-out infinite; }
.victory-card .pawn-body.big { width: 110px; }
.victory-card .kicker { font: 700 34px/1 var(--display); letter-spacing: .04em; -webkit-text-stroke: 2px #2a1100; paint-order: stroke fill; text-shadow: 0 4px 0 #2a1100; }
.victory-card h2 { margin: 0; font: 700 24px var(--display); }
.victory-card p { margin: 0 0 10px; color: var(--muted); font-weight: 700; }

/* ───────── keyframes ───────── */
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.center-card .rays, .victory-card .rays { translate: 0 0; }
@keyframes float { 50% { transform: translateY(-6%); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(1.25); } }
@keyframes pulse-red { 50% { filter: brightness(1.4); } }
@keyframes pulse-tile { 50% { filter: brightness(1.5); } }
@keyframes dots { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes tile-hit { 0% { transform: scale(1.35); filter: brightness(2.2); } 100% { transform: scale(1); filter: none; } }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.3); } 12% { opacity: 1; transform: translate(-50%, 4px) scale(1.08); } 18%, 85% { opacity: 1; transform: translate(-50%, 4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -6px) scale(.9); } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }
@keyframes card-flip { 0% { transform: translateY(60%) scale(.35) rotateY(180deg); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateY(-4%) scale(1.08) rotateY(-12deg); } 100% { transform: none; } }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -60% 0; } }
@keyframes playable { 50% { filter: drop-shadow(0 0 6px var(--gold)) brightness(1.08); transform: translateY(-2px); } }
@keyframes roll-ready { 50% { box-shadow: inset 0 1px 0 #fff8, 0 3px 0 #b8650c, 0 8px 18px #0008, 0 0 0 4px #04121a, 0 0 0 9px #ffc53333, 0 0 28px #ffc53388; } }
@keyframes land-glow { 0% { filter: drop-shadow(0 0 0 #fff); } 40% { filter: drop-shadow(0 0 14px #fff8d0); } }
@keyframes particle { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes float-up { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -16px) scale(1); } 100% { transform: translate(-50%, -60px) scale(1); opacity: 0; } }
@keyframes flash { from { opacity: var(--o); } to { opacity: 0; } }
@keyframes trail { to { transform: scale(.2); opacity: 0; } }
@keyframes banner-in { from { transform: rotate(-6deg) translateX(-14%) scaleY(.6); opacity: 0; } 60% { opacity: 1; } }
@keyframes banner-text { from { transform: scale(1.55); opacity: 0; filter: blur(6px); } 55% { filter: blur(0); } }
@keyframes banner-out { to { transform: rotate(-6deg) translateX(40%) scaleY(.85); opacity: 0; } }
@keyframes banner-text-out { to { transform: scale(1.08) translateX(10%); opacity: 0; filter: blur(3px); } }
@keyframes fuse { to { transform: translateX(60%) scale(.6) rotate(10deg); opacity: 0; filter: brightness(3); } }
@keyframes fuse-r { to { transform: translateX(-60%) scale(.6) rotate(-10deg); opacity: 0; filter: brightness(3); } }
@keyframes logo-in { from { transform: scale(.4) translateY(30px); opacity: 0; } }
@keyframes fan-l { 50% { transform: translateX(-50%) rotate(-19deg) translateX(-33%) translateY(-3%); } }
@keyframes fan-c { 50% { transform: translateX(-50%) translateY(-10%); } }
@keyframes fan-r { 50% { transform: translateX(-50%) rotate(19deg) translateX(33%) translateY(-3%); } }
.home::before { translate: 0 0; }
@keyframes home-spin { to { rotate: 360deg; } }
.home::before { animation-name: home-spin; transform: translate(-50%, -50%); }
.center-card .rays, .victory-card .rays { animation-name: home-spin; }

/* ───────── desktop & tablet ───────── */
@media (min-width: 900px) {
  body { font-size: 15px; }
  .game-screen { height: 100dvh; min-height: 0; }
  .hud { grid-template-columns: repeat(var(--n, 2), minmax(0, 260px)) !important; justify-content: center; padding: 0 16px 10px; }
  .hud.n3 { --n: 3; } .hud.n4 { --n: 4; } .hud.n5 { --n: 5; } .hud.n6 { --n: 6; }
  .stage { flex-direction: row; align-items: flex-start; justify-content: center; gap: 18px; padding: 0 16px 16px; min-height: 0; }
  .board-wrap { --board: clamp(420px, min(calc(100dvh - 150px), calc(100vw - 470px)), 820px); }
  .dock { --dockw: 400px; align-self: stretch; align-content: start; gap: 12px; padding: 16px; }
  .prompt h2 { font-size: 22px; white-space: normal; }
  .hand-row { grid-template-columns: 1fr; justify-items: center; }
  .reserve { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .roll-btn { width: 120px; height: 120px; font-size: 18px; order: -1; margin: 6px 0; }

  .roll-face .ico { width: 52px; height: 52px; }
  dialog#modal { margin: auto; border-radius: 24px; }
  .detail-modal .card-detail { grid-template-columns: auto 1fr; align-items: start; }
  .hero-fan { width: 380px; height: 300px; }
}
@media (max-width: 520px) {
  .n3 .chip { grid-template-columns: 24px 1fr auto; column-gap: 5px; padding: 5px 6px 6px 5px; }
  .n3 .chip-avatar { width: 24px; height: 24px; border-radius: 8px; }
  .n3 .chip-avatar .pawn-body img { width: 22px; }
  .n3 .chip-hp strong { font-size: 13px; }
  .n3 .chip-name { font-size: 11.5px; }
  .n3 .chip-name em { left: 30px; font-size: 7.5px; padding: 1px 4px; }
  .n3 .hp-bar { height: 6px; }
  .hud.n2 .chip-cards, .hud.n3 .chip-cards, .hud.n4 .chip-cards { display: none; }
}
@media (max-width: 380px) {
  .chip { grid-template-columns: 28px 1fr auto; gap: 5px; padding: 5px 6px 5px 5px; }
  .chip-avatar { width: 28px; height: 28px; }
  .chip-hp strong { font-size: 14px; }
  .roll-btn { width: 84px; height: 84px; font-size: 13px; }
  .reserve { grid-template-columns: repeat(3, minmax(0, 66px)); }
  .btn-xl { font-size: 20px; min-height: 60px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .board-wrap { --board: clamp(260px, min(calc(100vw - 12px), calc(100dvh - 300px)), 720px); }
  .prompt p { display: none; }
  .hero-fan { height: 180px; width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.victory.lost .victory-card { box-shadow: inset 0 0 0 2px #ff405866, 0 20px 60px #000; }
.victory.lost .rays { display: none; }
.victory.lost .kicker { color: #ff8a9a; }

:lang(zh) body, :lang(zh) .btn, :lang(zh) .fx-banner strong { font-family: Recharge, Montserrat, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }

/* ───────── skill & progression ───────── */
.forecast { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: 11.5px; font-weight: 800; }
.forecast > span { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; margin-right: 2px; }
.forecast b { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 4px; border-radius: 999px; background: #ffffff10; }
.forecast b .emblem { width: 16px; height: 16px; }
.forecast b.risk { color: #ff9aa6; background: #ff405818; }
.tile.reach::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgb(255 214 74 / calc(var(--p) * .9)); background: rgb(255 214 74 / calc(var(--p) * .28)); pointer-events: none; }
.btn em { display: block; font: 800 11px/1.2 var(--body); font-style: normal; letter-spacing: 0; text-shadow: none; margin-top: 1px; }
.btn em.good { color: #c9ffd9; } .btn-gold em.good { color: #145a2c; }
.btn em.bad { color: #ffd0d6; } .btn-gold em.bad { color: #8a1020; }
.btn em.hit { color: #ffe9a8; } .btn-gold em.hit { color: #5a2d00; }
.profile-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: #0006; box-shadow: inset 0 0 0 1.5px #ffffff18; }
.profile-avatar { width: 52px; height: 52px; border: 0; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc) 60%, #fff), var(--pc) 50%, color-mix(in srgb, var(--pc) 40%, #000)); box-shadow: inset 0 0 0 2px #ffffff55; }
.profile-avatar .pawn-body img { width: 42px; }
.profile-main { min-width: 0; display: grid; gap: 4px; }
.profile-main input { min-width: 0; border: 0; background: none; font-weight: 800; font-size: 17px; padding: 2px 0; outline: none; }
.profile-main input::placeholder { color: #ffffff55; }
.xp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.xp .lvl { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(#a774ff, #5a2bc8); font: 700 13px var(--display); box-shadow: inset 0 1px 0 #fff6; }
.xp-track { height: 8px; border-radius: 6px; background: #0008; overflow: hidden; }
.xp-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a774ff, #e3b8ff); }
.xp small { font-size: 10px; font-weight: 700; color: var(--muted); }
.trophies { display: grid; justify-items: end; gap: 2px; border: 0; background: none; padding: 4px; }
.trophies b { font: 700 17px var(--display); color: var(--gold); }
.trophies small { font-size: 10px; font-weight: 700; color: var(--muted); }
.difficulty { justify-self: center; margin-top: -4px; }
.profile-hero { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: radial-gradient(circle at 20% 40%, color-mix(in srgb, var(--pc) 35%, transparent), transparent 60%), #ffffff08; }
.profile-hero .pawn-body.big { width: 90px; }
.profile-hero > div { display: grid; gap: 8px; }
.big-trophy { font: 700 24px var(--display); color: var(--gold); }
.profile h3 { margin: 18px 0 8px; font: 700 16px var(--display); }
.colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.colors button { aspect-ratio: 1; border: 0; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 40%, #0a2330); }
.colors button.on { box-shadow: 0 0 0 3px var(--pc), 0 0 14px var(--pc); }
.colors .pawn-body img { width: 34px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stats div { display: grid; gap: 2px; padding: 10px 8px; border-radius: 12px; background: #ffffff0a; text-align: center; }
.stats b { font: 700 20px var(--display); }
.stats span { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.badge { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #ffffff08; opacity: .45; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; background: linear-gradient(135deg, #ffc53322, #ffffff08); box-shadow: inset 0 0 0 1px #ffc53355; }
.badge span { grid-row: span 2; font-size: 26px; text-align: center; }
.badge b { font-size: 13px; } .badge small { font-size: 11px; color: var(--muted); }
.rewards { width: 100%; display: grid; gap: 8px; margin-bottom: 8px; }
.rewards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rewards li, .reward-total { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px; background: #0005; font-size: 13px; font-weight: 700; opacity: 0; animation: reward-in .35s ease-out forwards; }
.rewards li b { color: #d6b8ff; }
.reward-total { justify-content: center; gap: 18px; background: none; font: 700 18px var(--display); }
.trophy { color: var(--gold); } .trophy.down { color: #ff8a9a; }
.new-badge { display: grid; justify-items: center; padding: 8px; border-radius: 12px; background: linear-gradient(135deg, #ffc53333, #ffffff0a); box-shadow: inset 0 0 0 1px #ffc53388; font-size: 22px; animation: pop-in .5s 1.6s both cubic-bezier(.2, 1.5, .4, 1); }
.new-badge b { font-size: 14px; } .new-badge small { font-size: 11px; color: var(--muted); }
.victory-card { max-height: calc(100dvh - 30px); overflow-y: auto; }
@keyframes reward-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
/* 3+ players on a phone: name gets its own line, health number sits after the bar */
@media (max-width: 520px) {
  .n3 .chip, .n5 .chip, .n6 .chip { grid-template-areas: "av name name" "av bar hp"; align-items: center; }
  .n3 .chip-hp, .n5 .chip-hp, .n6 .chip-hp { position: static; }
  .n3 .chip-hp strong, .n5 .chip-hp strong, .n6 .chip-hp strong { font: 800 11px/1 var(--body); text-shadow: none; }
  .n3 .chip-name, .n5 .chip-name, .n6 .chip-name { padding-right: 0; }
}

/* ───────── v5 refinements ───────── */
/* emote bubbles float above the board */
.hud { position: relative; z-index: 20; }
/* slimmer health chips */
.chip { padding: 5px 7px 5px 5px; row-gap: 4px; border-radius: 12px; grid-template-columns: 30px 1fr auto; }
.chip-avatar { width: 30px; height: 30px; border-radius: 9px; }
.chip-avatar .pawn-body img { width: 26px; }
.chip .hp-bar { height: 7px; }
.chip-hp strong { font-size: 15px; }
.chip-name { font-size: 12px; }
/* roll and reserve sit right under the board */
.dock { gap: 7px; padding: 8px 10px; }
.prompt { min-height: 30px; }
.prompt h2 { font-size: 16px; }
.prompt p { font-size: 12px; }
.reserve { grid-template-columns: repeat(3, minmax(0, 68px)); }
.roll-btn { width: 88px; height: 88px; }
.dice-hit { display: grid; justify-items: center; gap: 2cqw; padding: 0; border: 0; background: none; cursor: pointer; }
.dice-hit small { font: 800 clamp(9px, 2.3cqw, 12px) var(--body); letter-spacing: .14em; color: var(--gold); animation: pulse-tile 1.4s infinite; }
.dice-hit:active .dice-tray { transform: scale(.94); }
body.replaying .board { box-shadow: inset 0 0 0 3px #9fbac2, 0 14px 40px #000a; }
body.replaying .dock { opacity: .55; pointer-events: none; }
/* battle button: BATTLE ⚔ VS ORACLE */
.battle-btn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 6px 12px; min-height: 74px; }
.battle-btn .bb-word { font: 700 22px/1 var(--display); text-align: right; }
.battle-btn .bb-vs { text-align: left; font-size: 17px; }
.battle-btn .bb-swords { width: 58px; height: 58px; filter: drop-shadow(0 2px 2px #0005); transition: transform .2s; }
.battle-btn:hover .bb-swords, .battle-btn:focus-visible .bb-swords { transform: rotate(-8deg) scale(1.08); }
.home-nav button { position: relative; min-width: 72px; }
.nav-dot { position: absolute; top: 4px; right: 10px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font: 800 11px var(--body); font-style: normal; }
/* menu drops down from the top bar */
dialog#modal.menu-modal { margin: calc(env(safe-area-inset-top, 0px) + 56px) auto auto 10px; width: min(320px, calc(100% - 20px)); border-radius: 18px; }
dialog#modal.menu-modal[open] { animation: drop-down .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes drop-down { from { transform: translateY(-14px); opacity: 0; } }
/* card detail: arrows + swipe */
.detail-stage { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 6px; width: 100%; touch-action: pan-y; }
.detail-stage .detail-card { justify-self: center; width: min(320px, calc(100vw - 120px)); }
.detail-card.from-right { animation: slide-r .26s ease-out; }
.detail-card.from-left { animation: slide-l .26s ease-out; }
@keyframes slide-r { from { transform: translateX(40px); opacity: 0; } }
@keyframes slide-l { from { transform: translateX(-40px); opacity: 0; } }
.nav-arrow { width: 40px; height: 56px; border: 0; border-radius: 12px; background: #ffffff14; color: var(--text); font: 700 30px/1 var(--body); display: grid; place-items: center; }
.nav-arrow:active { transform: scale(.92); }
.nav-arrow.ghost { background: none; }
.detail-count { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .08em; }
@media (min-width: 900px) { .detail-modal .card-detail { grid-template-columns: 1fr; } .detail-stage { grid-template-columns: 52px 1fr 52px; } .nav-arrow { width: 52px; height: 72px; } }
/* quests */
.q-tabs { width: 100%; margin-bottom: 12px; }
.q-tabs button { flex: 1; }
.quest-list { display: grid; gap: 8px; }
.quest { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #ffffff0a; }
.quest > div { display: grid; gap: 5px; min-width: 0; }
.quest b { font-size: 14px; }
.quest small { font-size: 11px; color: var(--muted); font-weight: 700; }
.quest em { font-style: normal; font: 700 13px var(--display); color: #d6b8ff; }
.quest.done { box-shadow: inset 0 0 0 1.5px #3fe08a66; }
.quest.done em { color: var(--green); font-size: 18px; }
.q-track { display: block; height: 7px; border-radius: 6px; background: #0008; overflow: hidden; }
.q-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc533, #ffe48a); }
.quest.done .q-track i { background: var(--green); }
.q-track.big { height: 10px; }
.season-card { display: grid; gap: 6px; margin-bottom: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #a774ff33, #ffc53318); box-shadow: inset 0 0 0 1px #a774ff55; }
.season-card h3 { margin: 0; font: 700 20px var(--display); }
.tier-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.tier { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(#a774ff, #5a2bc8); font: 700 15px var(--display); }
.q-reset { margin-top: 12px; text-align: center; }
/* tips ticker */
.tips { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #0006; box-shadow: inset 0 0 0 1px #ffffff14; text-align: left; }
.tip { display: grid; gap: 3px; min-height: 52px; align-content: center; transition: opacity .42s ease, transform .42s ease; }
.tip.out { opacity: 0; transform: translateX(-10px); }
.tip.in { animation: tip-in .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes tip-in { from { transform: translateX(14px); opacity: 0; } }
.tip b { font: 800 10px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tip-mystery b { color: #c9a6ff; } .tip-legendary b { color: #ffd84a; } .tip-lore b { color: #7fe0ff; }
.tip span { font-size: 13px; line-height: 1.4; color: #dbe9ec; }
.tip-next { width: 32px; height: 32px; border: 0; border-radius: 10px; background: #ffffff12; font: 700 20px var(--body); }
/* opening splash */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px 16px; background: radial-gradient(circle at 50% 42%, #14495e, #04121a 70%); cursor: pointer; overflow: hidden; }
.splash-glow { position: absolute; left: 50%; top: 40%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(#ffc5330f 0 7deg, transparent 7deg 20deg); animation: home-spin 40s linear infinite; }
.splash-orbit { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.splash-orbit span { position: absolute; width: 46px; height: 46px; margin: -23px; animation: orbit 6s linear infinite, fade-in .8s calc(var(--i) * .15s + .6s) both; animation-delay: calc(var(--i) * -1.5s), calc(var(--i) * .15s + .6s); }
@keyframes orbit { from { transform: rotate(0deg) translateX(min(42vw, 210px)) rotate(0deg); } to { transform: rotate(360deg) translateX(min(42vw, 210px)) rotate(-360deg); } }
.splash-logo { position: relative; width: min(440px, 84vw); filter: drop-shadow(0 10px 30px #000c); animation: splash-logo 1.4s cubic-bezier(.2, 1.3, .4, 1) both; }
.splash-logo::after { content: ''; }
@keyframes splash-logo { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; filter: brightness(3) blur(6px); } 55% { opacity: 1; filter: brightness(1.6) blur(0); } 100% { transform: none; filter: drop-shadow(0 10px 30px #000c); } }
.splash-go { position: relative; padding: 14px 30px; border: 0; border-radius: 999px; background: linear-gradient(#ffc93a, #f5a11c); color: #3a1d00; font: 700 18px var(--display); letter-spacing: .06em; box-shadow: 0 2px 0 #b8650c, 0 8px 24px #0008; animation: fade-in .5s 1.2s both, pulse-go 1.6s 1.8s ease-in-out infinite; }
@keyframes pulse-go { 50% { transform: scale(1.06); box-shadow: 0 2px 0 #b8650c, 0 0 30px #ffc53388; } }
.splash-tip { position: relative; width: min(440px, 100%); animation: fade-in .6s 1.6s both; }
.splash.leaving { animation: splash-out .8s ease-in forwards; pointer-events: none; }
.splash.leaving .splash-logo { animation: splash-zoom .8s ease-in forwards; }
@keyframes splash-out { 60% { opacity: 1; } to { opacity: 0; } }
@keyframes splash-zoom { to { transform: scale(1.5); opacity: 0; } }

/* ───────── opening intro (persona run → slam → claws → logo) ───────── */
.intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer; background: #04121a; }
.intro-sky { position: absolute; inset: 0; background: radial-gradient(90% 55% at 50% 38%, #1a5a70 0, #0a2a38 45%, #04121a 80%); }
.intro-sky::after { content: ''; position: absolute; left: 50%; top: 40%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(#ffc5330d 0 7deg, transparent 7deg 20deg); opacity: 0; }
.intro.go .intro-sky::after { animation: fade-in .6s 2.25s forwards, home-spin 40s 2.25s linear infinite; }
/* the arena floor, tilted in 3D */
.intro-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; perspective: 520px; perspective-origin: 50% 0; }
.floor-plane { position: absolute; left: -30%; right: -30%; top: 0; height: 160%; transform-origin: 50% 0; transform: rotateX(68deg);
  background: radial-gradient(circle at 50% 28%, #2a6f84 0, transparent 40%), repeating-linear-gradient(90deg, #ffffff10 0 2px, transparent 2px 60px), repeating-linear-gradient(0deg, #ffffff10 0 2px, transparent 2px 60px), linear-gradient(#123c4c, #061820); }
.cracks { position: absolute; left: 30%; width: 40%; top: 0; height: 60%; overflow: visible; }
.cracks path { fill: none; stroke: #ffd84a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff9d1c); stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0; }
.intro.go .cracks path { animation: crack .45s calc(1.72s + var(--i) * 30ms) ease-out forwards; }
@keyframes crack { 0% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .85; } }
.shock { position: absolute; left: 50%; top: 17%; width: 30%; aspect-ratio: 1; margin-left: -15%; margin-top: -15%; border-radius: 50%; border: 6px solid #ffe48a; opacity: 0; }
.intro.go .shock { animation: shock .7s 1.7s ease-out forwards; }
.intro.go .shock.s2 { animation: shock .9s 1.8s ease-out forwards; border-color: #4fd8ff; }
@keyframes shock { from { transform: scale(.1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
/* the guardian */
.hero-run { position: absolute; left: 50%; bottom: 30%; width: min(46vw, 230px); margin-left: calc(min(46vw, 230px) / -2); transform: translateX(80vw); }
.hero-bob img { display: block; width: 100%; filter: drop-shadow(0 8px 10px #0009); transform-origin: 50% 100%; }
.hero-shadow { position: absolute; left: 22%; right: 22%; bottom: -4%; height: 10%; border-radius: 50%; background: #000; filter: blur(6px); opacity: .5; }
.intro.go .hero-run { animation: hero-in 1.2s cubic-bezier(.3, .6, .4, 1) forwards, hero-out .45s 2.25s ease-in forwards; }
.intro.go .hero-bob img, .intro.go .hero-bob .persona-still { animation: still-hop .5s 1.2s ease-in-out forwards; }
@keyframes still-hop { 0% { transform: scale(1.06, .9); } 25% { transform: scale(.95, 1.08); } 85% { transform: scale(.97, 1.04); } 100% { transform: scale(1.1, .88); } }
.intro.go .hero-bob { animation: leap .5s 1.2s cubic-bezier(.3, 0, .6, 1) forwards; }
.intro.go .hero-shadow { animation: shadow-leap .5s 1.2s ease-in-out; }
@keyframes hero-in { from { transform: translateX(80vw); } to { transform: translateX(0); } }
@keyframes stride { 0%, 100% { transform: translateY(0) rotate(-7deg) scale(1.04, .96); } 50% { transform: translateY(-12%) rotate(-4deg) scale(.98, 1.03); } }
@keyframes crouch { 0% { transform: rotate(-4deg) scale(1.08, .88); } 25% { transform: rotate(0) scale(.94, 1.08); } 85% { transform: scale(.96, 1.05); } 100% { transform: scale(1.12, .86); } }
@keyframes leap { 0% { transform: translateY(0); } 20% { transform: translateY(4%); } 60% { transform: translateY(-75%); } 100% { transform: translateY(0); } }
@keyframes shadow-leap { 60% { transform: scale(.55); opacity: .2; } }
@keyframes hero-out { to { transform: translateY(-8%) scale(.5); opacity: 0; filter: brightness(3) blur(4px); } }
.intro-dust { position: absolute; inset: 0; pointer-events: none; }
.puff { position: absolute; left: var(--x); bottom: 29%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(#d9f4ff, #9fbac2 60%, transparent 70%); opacity: 0; }
.intro.go .puff { animation: puff .6s var(--d) ease-out forwards; }
@keyframes puff { 0% { transform: scale(.3); opacity: .8; } 100% { transform: translate(24px, -16px) scale(2.2); opacity: 0; } }
/* claw slashes */
.claws { position: absolute; inset: 8% 6%; width: 88%; height: 70%; overflow: visible; pointer-events: none; }
.claw { fill: none; stroke: #fff6c4; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 160; stroke-dashoffset: 160; filter: drop-shadow(0 0 6px #ffc533) drop-shadow(0 0 14px #ff9d1c); opacity: 0; }
.intro.go .claw { animation: slash .5s ease-out forwards; }
.intro.go .claw.c0 { animation-delay: 1.9s; } .intro.go .claw.c1 { animation-delay: 2.02s; } .intro.go .claw.c2 { animation-delay: 2.14s; }
.claw { stroke-width: 9; }
@keyframes slash { 0% { opacity: 1; stroke-dashoffset: 160; } 35% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.intro-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.intro.go .intro-flash { animation: iflash .5s 1.7s ease-out, iflash .6s 2.25s ease-out; }
@keyframes iflash { 0% { opacity: .75; } 100% { opacity: 0; } }
/* logo rises from the impact */
.intro-logo { position: absolute; left: 50%; top: 38%; width: min(460px, 86vw); transform: translate(-50%, -50%) scale(.1); opacity: 0; filter: drop-shadow(0 10px 30px #000c); }
.intro.go .intro-logo { animation: logo-rise .75s 2.25s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes logo-rise { 0% { transform: translate(-50%, 10%) scale(.1); opacity: 0; filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.4); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: drop-shadow(0 10px 30px #000c); } }
.intro-tag { position: absolute; left: 0; right: 0; top: calc(38% + min(120px, 22vw)); margin: 0; text-align: center; font: 800 12px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 0 #000; opacity: 0; }
.intro .splash-go { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); transform: translateX(-50%); opacity: 0; pointer-events: none; animation: none; }
.intro .splash-tip { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); margin: 0 auto; width: auto; max-width: 440px; opacity: 0; animation: tip-rise .7s .35s cubic-bezier(.2, .8, .3, 1) forwards; z-index: 3; }
@keyframes tip-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intro.ready .intro-tag { animation: fade-in .5s forwards; opacity: 1; }
.intro.ready .splash-go { opacity: 1; pointer-events: auto; animation: fade-in .5s, pulse-go-c 1.6s .6s ease-in-out infinite; }
@keyframes pulse-go-c { 50% { transform: translateX(-50%) scale(1.06); box-shadow: 0 2px 0 #b8650c, 0 0 30px #ffc53388; } }
.intro-skip { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: #ffffff14; color: var(--muted); font: 700 13px var(--body); }
.intro.ready .intro-skip { display: none; }
/* skip: jump straight to the final frame */
.intro.done .hero-run, .intro.done .intro-dust, .intro.done .claws, .intro.done .intro-flash { display: none; }
.intro.done .intro-logo { animation: none; opacity: 1; transform: translate(-50%, -50%); }
.intro.done .cracks path { animation: none; opacity: .85; stroke-dashoffset: 0; }
.intro.done .intro-sky::after { animation: home-spin 40s linear infinite; opacity: 1; }
.intro.leaving { animation: splash-out .7s ease-in forwards; pointer-events: none; }
.intro.leaving .intro-logo { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1.4); transition: transform .7s ease-in, opacity .7s; }

/* emotes float above everything, even the victory screen */
.emote-float { position: fixed; z-index: 95; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 6px 12px 6px 8px; border-radius: 16px; background: #fff; color: #10202a; box-shadow: 0 0 0 3px var(--pc), 0 8px 20px #0009; pointer-events: none; animation: emote 2.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.emote-float::before { content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #fff; }
.emote-float.center::before { display: none; }
.emote-float span { grid-row: span 2; font-size: 30px; line-height: 1; }
.emote-float b { font-size: 10px; font-weight: 800; color: #5b7680; letter-spacing: .04em; }
.emote-float em { font-style: normal; font-weight: 800; font-size: 14px; }
@keyframes emote { 0% { opacity: 0; transform: translateX(-50%) scale(.3); } 10% { opacity: 1; transform: translateX(-50%) scale(1.08); } 16%, 85% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.9); } }
/* pause */
.pause .resume { background: linear-gradient(#ffc93a, #f5a11c); color: #3a1d00; }
.pause .resume .ico { color: #3a1d00; }
body.paused .game-screen { filter: blur(2px) brightness(.7); }
/* keep sliding cards from scrolling the dialog sideways */
dialog#modal { overflow-x: hidden; }
.detail-stage .detail-card { width: min(300px, calc(100vw - 132px)); }
.intro .splash-go { white-space: nowrap; }
/* live persona */
.persona-canvas, .persona-fallback { display: block; width: 100%; height: 100%; }
.persona-host { width: 100%; aspect-ratio: 740 / 731; transform: translateY(12.3%); }
.hero-run { width: min(62vw, 300px); margin-left: calc(min(62vw, 300px) / -2); }
.v-persona { width: 150px; aspect-ratio: 740 / 731; margin: -20px 0 -14px; }
.victory-card .v-crown { position: relative; z-index: 2; margin-bottom: -26px; }
/* leave / quit confirmation */
.confirm p { margin: 0 0 16px; color: #d2e2e6; font-size: 15px; line-height: 1.45; }
.confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-danger { --b: #ff5a6e; --b2: #c8203a; }
dialog#modal.confirm-modal { margin: auto; border-radius: 22px; width: min(400px, calc(100% - 24px)); }
/* ───────── account + leaderboard ───────── */
.home-nav { gap: 6px; padding-inline: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 110px)); }
.home-nav button { min-width: 0; max-width: none; padding-inline: 4px; }
@media (min-width: 700px) { .home-nav { grid-template-columns: repeat(6, 100px); } }
.account-box { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #ffffff0a; }
.account-box p { margin: 0; }
.acc-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acc-code-row > div { display: grid; gap: 4px; }
.acc-code { font: 700 24px/1 var(--display); letter-spacing: .06em; color: var(--gold); user-select: all; -webkit-user-select: all; }
.acc-words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.acc-words b { padding: 10px; border-radius: 10px; background: #00000040; box-shadow: inset 0 0 0 1px #ffc53355; text-align: center; font: 700 18px var(--display); letter-spacing: .03em; user-select: all; -webkit-user-select: all; }
.acc-link summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--blue); padding: 4px 0; }
.acc-link[open] { display: grid; gap: 10px; }
.acc-link input:not([type]) { width: 100%; }
.acc-keep { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.acc-keep input { width: 20px; height: 20px; accent-color: var(--gold); }
.lb-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lb-row { display: grid; grid-template-columns: 30px 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #ffffff0a; }
.lb-row .pawn-body { width: 34px; height: 34px; }
.lb-row .pawn-body img { width: 100%; height: 100%; object-fit: contain; }
.lb-rank { font: 700 18px var(--display); text-align: center; color: var(--muted); }
.lb-row.top1 .lb-rank { color: var(--gold); } .lb-row.top2 .lb-rank { color: #d9e6ee; } .lb-row.top3 .lb-rank { color: #e0a36a; }
.lb-row.top1 { box-shadow: inset 0 0 0 1.5px #ffc53366; }
.lb-row.me { background: #2f9bff26; box-shadow: inset 0 0 0 1.5px #2f9bff99; }
.lb-name { display: grid; gap: 2px; min-width: 0; }
.lb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.lb-name small { font-size: 11px; color: var(--muted); font-weight: 700; }
.lb-trophies { font: 700 16px var(--display); white-space: nowrap; }
.lb-me { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ffffff22; }
.lb-me p, .lb-note, .lb-reset, .lb-empty { margin: 8px 0 0; }
.lb-reset { margin: 0 0 8px; }

/* still guardian (animated puppet retired for now) */
.persona-still { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px #0009); transform-origin: 50% 100%; }
.persona-host .persona-still { transform: translateY(0); }
.persona-host { transform: none; aspect-ratio: auto; }
.persona-still.pose-cheer { animation: still-cheer 1.2s ease-in-out infinite; }
.persona-still.pose-wave, .persona-still.pose-idle { animation: still-breathe 3s ease-in-out infinite; }
@keyframes still-cheer { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9%) scale(1.03); } 60% { transform: translateY(-6%) scale(1.02); } }
@keyframes still-breathe { 50% { transform: translateY(-2%) scale(1.01); } }
@media (prefers-reduced-motion: reduce) { .persona-still { animation: none !important; } }
/* ───────── Ultimate Challenge (Beta) ───────── */
.beta { font: 800 9px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 2px 5px; border-radius: 5px; background: #a774ff; color: #fff; font-style: normal; vertical-align: middle; margin-left: 4px; }
.mode-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.seg.modes button { display: inline-flex; align-items: center; gap: 4px; }
.mode-info { width: 32px; height: 32px; font: 800 14px var(--body); color: var(--muted); }
.mode-rules { margin: 0 0 12px; padding-left: 18px; color: #d2e2e6; font-size: 14px; line-height: 1.5; }
.mode-rules li { margin-bottom: 6px; }
.rules h3 { margin: 14px 0 6px; font: 700 16px var(--display); }
.center-pick { display: grid; justify-items: center; gap: 3cqw; z-index: 1; width: 100%; }
.pick-row { display: flex; gap: 4cqw; justify-content: center; }
.pick-card { width: 30cqw; padding: 0; border: 0; background: none; border-radius: 4cqw; }
.pick-card.live { animation: playable 1.4s ease-in-out infinite; cursor: pointer; }
.pick-back { display: grid; place-items: center; gap: 1cqw; width: 100%; aspect-ratio: 5/7; border-radius: 4cqw; background: radial-gradient(circle at 50% 30%, #1f5b74, #08202b 70%); box-shadow: inset 0 0 0 .8cqw #ffc533aa, 0 1.5cqw 4cqw #000a; }
.pick-back .emblem { width: 40%; height: auto; }
.pick-back b { font: 700 10cqw/1 var(--display); color: var(--gold); }
.pick-back small { font: 800 3.4cqw var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.reserve-slot { position: relative; }
.forge-btn { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ffd75a, #f5a11c); color: #3a1d00; box-shadow: 0 2px 0 #b8650c, 0 4px 10px #0008; animation: pulse-tile 1.2s infinite; z-index: 5; }
.forge-btn .ico { width: 16px; height: 16px; }
.forge-tokens { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: #ffc53322; box-shadow: inset 0 0 0 1.5px #ffc53388; color: var(--gold); font: 700 15px var(--display); }
.forge-tokens .ico { width: 18px; height: 18px; }
.forged-tag { position: absolute; top: -6%; left: -6%; z-index: 6; display: grid; place-items: center; width: 26%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(#ffd75a, #f5a11c); color: #3a1d00; box-shadow: 0 2px 6px #000; }
.forged-tag .ico { width: 60%; height: 60%; }
.card-face.forged .cf-title b { color: #fff6c4; }
/* ───────── wallet, missions, exchange ───────── */
.profile-card { grid-template-columns: 52px 1fr auto; }
.pc-right { display: grid; gap: 4px; justify-items: end; }
.wallet { display: flex; gap: 6px; align-items: center; }
.wallet button, .wallet span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border: 0; border-radius: 999px; background: #00000066; box-shadow: inset 0 0 0 1px #ffffff1c; color: #fff; font: 700 13px var(--display); }
.wallet .ico { width: 18px; height: 18px; } .wallet .gems, .gems { color: #8ff3ec; } .wallet .hela, .hela { color: var(--gold); }
.mission em { display: inline-flex; align-items: center; gap: 4px; } .mission em .ico { width: 16px; height: 16px; }
.mission .m-cat { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #8ff3ec; }
.milestone-track { display: grid; gap: 8px; }
.ms-tier { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #ffffff0a; }
.ms-tier > div { display: grid; gap: 5px; } .ms-tier small { white-space: nowrap; font-size: 11px; font-weight: 700; } .ms-tier b { font: 700 15px var(--display); }
.ms-tier.paid { box-shadow: inset 0 0 0 1.5px #3fe08a66; } .ms-tier em { display: inline-flex; gap: 4px; align-items: center; color: var(--gold); font: 700 13px var(--display); font-style: normal; } .ms-tier em .ico { width: 16px; height: 16px; }
.exchange { display: grid; gap: 12px; } .exchange .ex-dir { justify-self: center; } .exchange input[type=range] { width: 100%; accent-color: var(--gold); }
.exchange .ex-preview { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 8px; padding: 12px; border-radius: 14px; background: #0006; }
.exchange .ex-preview b { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 22px var(--display); } .exchange .ex-preview .ico { width: 24px; height: 24px; }
.exchange .ex-arrow { font: 700 20px var(--display); color: var(--muted); } .exchange .ex-rate { text-align: center; }
.exchange .wallet { justify-content: center; }
.reward-wallet { display: flex; gap: 14px; justify-content: center; margin-top: 6px; font: 700 16px var(--display); } .reward-wallet span { display: inline-flex; align-items: center; gap: 5px; } .reward-wallet .ico { width: 20px; height: 20px; }
.wallet-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wallet-lines li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px; background: #0005; font-size: 13px; font-weight: 700; opacity: 0; animation: reward-in .35s ease-out forwards; }
.rewards li b.cur, .wallet-lines b.cur { display: inline-flex; align-items: center; gap: 4px; color: #8ff3ec; } .rewards li b.cur .ico, .wallet-lines b.cur .ico { width: 15px; height: 15px; }
@media (max-width: 380px) { .wallet button { padding: 3px 7px 3px 4px; font-size: 12px; } }
.acc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acc-actions .btn { font-size: 13px; min-height: 38px; padding: 6px 12px; }
.acc-email { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff14; }
.acc-email-form { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 14px; background: #0005; box-shadow: inset 0 0 0 1px #ffffff14; }
.acc-email-form .field input { font-size: 15px; }
.acc-cancel { justify-self: start; }
/* interactive rules */
.rule-list { display: grid; gap: 6px; }
.rule { border-radius: 14px; background: #ffffff08; overflow: hidden; }
.rule.open { background: #ffffff10; box-shadow: inset 0 0 0 1.5px #ffc53355; }
.rule-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px 10px 8px; border: 0; background: none; color: var(--text); text-align: left; font-weight: 800; font-size: 14px; }
.rule-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(#ffd75a, #f5a11c); color: #3a1d00; font: 700 14px var(--display); box-shadow: 0 2px 0 #b8650c; }
.rule.open .rule-num { background: linear-gradient(#a774ff, #5a2bc8); color: #fff; box-shadow: 0 2px 0 #3a1d8c; }
.rule-chev { font: 700 22px/1 var(--body); color: var(--muted); transition: transform .2s; }
.rule.open .rule-chev { transform: rotate(90deg); }
.rule-body { display: grid; gap: 10px; padding: 0 12px 14px; animation: fade-in .25s; }
.rule-body img { width: 100%; max-height: 260px; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 6px 18px #0008; }
.rule-body p { margin: 0; color: #d2e2e6; font-size: 14px; line-height: 1.5; }
@media (min-width: 700px) { .rule-body { grid-template-columns: 220px 1fr; align-items: start; } .rule-body img { max-height: none; } }

/* ═════════ v8 · esports polish (frames, home hierarchy, currency, medallions) ═════════ */
:root { --green2: #14a650; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --tile-bg: linear-gradient(180deg, #164457, #0c2b38); }

/* ── buttons: one gold primary, green for buy/exchange/claim, blue for structure ── */
.btn { box-shadow: inset 0 1px 0 #ffffff55, inset 0 -3px 0 #00000026, 0 3px 0 color-mix(in srgb, var(--b2) 60%, #000), 0 6px 14px #0005; }
.btn-green { --b: #52e290; --b2: #15a04c; color: #fff; text-shadow: 0 1px 0 #0a4a24; }
.btn-blue { --b: #3aa8ff; --b2: #1560d4; }
.btn-ghost { box-shadow: inset 0 0 0 1.5px #ffffff26; }
.exchange [data-exchange-go] { --b: #52e290; --b2: #15a04c; color: #fff; text-shadow: 0 1px 0 #0a4a24; min-height: 52px; font-size: 18px; border-radius: 16px; }
.exchange [data-exchange-go]:disabled { filter: grayscale(.9) brightness(.55); }

/* BATTLE: the one gold call to action, with a slow sheen */
.battle-btn { overflow: hidden; isolation: isolate; min-height: 78px; border-radius: 20px; background: linear-gradient(180deg, #ffe46a 0, #ffc533 46%, #f7a21a 54%, #ef8f12 100%); box-shadow: inset 0 2px 0 #fffb, inset 0 -5px 0 #c66d08, 0 4px 0 #7c4204, 0 10px 26px #ff9d1c33, 0 8px 18px #0007; }
.battle-btn::before { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 44%; border-radius: 16px 16px 50% 50% / 16px 16px 14px 14px; background: linear-gradient(#ffffff80, #ffffff12); z-index: -1; pointer-events: none; }
.battle-btn::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: -45%; width: 28%; background: linear-gradient(100deg, transparent, #fffbe0cc 50%, transparent); transform: skewX(-20deg); animation: btn-sheen 3.8s ease-in-out infinite; pointer-events: none; }
.battle-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 #fffb, inset 0 -3px 0 #c66d08, 0 1px 0 #7c4204, 0 4px 10px #0007; }
.battle-btn .bb-word { text-shadow: 0 1px 0 #fff9; }
.battle-btn .bb-swords { filter: drop-shadow(0 3px 2px #7c420488); }
@keyframes btn-sheen { 0%, 58% { left: -45%; } 88%, 100% { left: 125%; } }

/* Friends / Party: blue, with a raised icon tile */
.home-row .btn { min-height: 62px; border-radius: 16px; gap: 10px; padding: 8px 12px 8px 8px; }
.home-row .btn .ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #ffffff38, #ffffff12); box-shadow: inset 0 1px 0 #ffffff66, 0 2px 4px #0003; }
.home-row .btn span { font-size: 18px; }

/* mode + difficulty pickers: crisper segmented controls */
.seg { background: #00000052; box-shadow: inset 0 1px 3px #0008, inset 0 0 0 1px #ffffff12; }
.seg button.on { background: linear-gradient(180deg, #45adff, #1662d8); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #0d3f8f, 0 3px 8px #0006; }

/* 3×2 nav: icon tiles + red alert counters */
.home-nav { gap: 8px; width: min(440px, 100%); margin: auto auto 0; padding: 16px 16px 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 700px) { .home-nav { width: min(760px, 100%); grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.home-nav button { --tile: #2f9bff; gap: 6px; padding: 10px 4px 9px; border-radius: 16px; background: var(--tile-bg); box-shadow: inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #ffffff10, 0 3px 0 #03141b, 0 6px 12px #0005; color: #d8e8ec; font: 700 12px/1.15 var(--body); transition: transform .08s; }
.home-nav button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #ffffff10, 0 1px 0 #03141b, 0 3px 6px #0005; }
.home-nav .ico { width: 42px; height: 42px; padding: 9px; border-radius: 13px; color: #fff; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tile) 55%, #fff) 0, var(--tile) 58%, color-mix(in srgb, var(--tile) 55%, #000) 100%); box-shadow: inset 0 1px 0 #ffffff99, inset 0 -3px 0 #0000003a, 0 2px 5px #0007; }
.home-nav button:nth-child(1) { --tile: #17b3ad; } .home-nav button:nth-child(2) { --tile: #f29a1c; } .home-nav button:nth-child(3) { --tile: #8a5cf0; }
.home-nav button:nth-child(4) { --tile: #2f8ff0; } .home-nav button:nth-child(5) { --tile: #1fae94; } .home-nav button:nth-child(6) { --tile: #4f6f7c; }
.home-nav .ico.i-ic-gem { padding: 0; background: url('./assets/currency/gem-64.webp') center / 30px no-repeat, radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tile) 55%, #fff) 0, var(--tile) 58%, color-mix(in srgb, var(--tile) 55%, #000) 100%); }
.nav-dot { top: 2px; right: calc(50% - 34px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: linear-gradient(180deg, #ff6a7c, #e01e3c); box-shadow: 0 0 0 2px #0c2b38, 0 2px 4px #0009; font: 800 11.5px/1 var(--body); animation: dot-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes dot-pop { from { transform: scale(0); } }

/* profile card on home */
.profile-card { background: linear-gradient(180deg, #0b2a37cc, #051820cc); box-shadow: inset 0 0 0 1.5px #ffffff16, inset 0 1px 0 #ffffff1a, 0 6px 16px #0006; border-radius: var(--r-lg); }
.profile-avatar { box-shadow: inset 0 0 0 2px #ffffff66, inset 0 -3px 0 #0003, 0 3px 8px #0006; }
.xp .lvl { box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #3a1d8c; }
.xp-track { box-shadow: inset 0 1px 2px #000a; }
.xp-track i { background: linear-gradient(180deg, #d6b8ff, #a774ff 50%, #7a45e8 51%, #9b66ff); }

/* ── 3D currency: replaces the flat gem / hela drawings everywhere icon() is used ── */
.ico.i-ic-gem, .ico.i-ic-hela { background: url('./assets/currency/gem-64.webp') center / contain no-repeat; overflow: visible; }
.ico.i-ic-hela { background-image: url('./assets/currency/hela-64.webp'); }
.ico.i-ic-gem use, .ico.i-ic-hela use { display: none; }
.wallet { gap: 8px; }
.wallet button, .wallet span { position: relative; gap: 4px; min-height: 28px; padding: 2px 10px 2px 3px; background: linear-gradient(180deg, #01090dcc, #072431cc); box-shadow: inset 0 0 0 1.5px #ffffff1c, inset 0 2px 4px #000a; font: 700 15px/1 var(--display); text-shadow: 0 1px 0 #000; }
.wallet .ico { width: 26px; height: 26px; margin: -5px 0 -5px -4px; filter: drop-shadow(0 2px 2px #000a); }
.wallet button { padding-right: 24px; }
.wallet button::after { content: ''; position: absolute; right: 3px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(180deg, #5ff09a, #14a34e); box-shadow: inset 0 1px 0 #ffffff99, 0 1px 0 #0a5a2a; }
.wallet button:active { transform: scale(.95); }
.wallet button.cur-bump { animation: cur-bump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cur-bump { 40% { transform: scale(1.18); filter: brightness(1.4); } }
@media (max-width: 380px) { .wallet button { padding: 2px 21px 2px 3px; font-size: 13px; } .wallet .ico { width: 22px; height: 22px; } }
.exchange .wallet button, .exchange .wallet span { font-size: 17px; padding-right: 12px; }
.exchange .wallet .ico { width: 30px; height: 30px; }

/* spinning sprite helper (reward-fx.js spinSprite, exchange preview) */
.cur-spin { --s: 48px; display: inline-block; flex: none; width: var(--s); height: var(--s); background: url('./assets/currency/gem-spin.webp') 0 0 / calc(var(--s) * 24) var(--s) no-repeat; animation: cur-spin 1.5s steps(24) infinite; }
.cur-spin.hela { background-image: url('./assets/currency/hela-spin.webp'); }
@keyframes cur-spin { to { background-position: calc(var(--s) * -24) 0; } }
.exchange .ex-preview .ico.i-ic-gem, .exchange .ex-preview .ico.i-ic-hela { --s: 40px; width: 40px; height: 40px; background: url('./assets/currency/gem-spin.webp') 0 0 / calc(var(--s) * 24) var(--s) no-repeat; animation: cur-spin 1.5s steps(24) infinite; filter: drop-shadow(0 3px 4px #0009); }
.exchange .ex-preview .ico.i-ic-hela { background-image: url('./assets/currency/hela-spin.webp'); animation-duration: 1.9s; }
.exchange .ex-preview { padding: 14px 12px; border-radius: var(--r-md); background: linear-gradient(180deg, #021117aa, #062330aa); box-shadow: inset 0 0 0 1.5px #ffffff14, inset 0 2px 6px #0008; }
.exchange .ex-preview b { font-size: 26px; text-shadow: 0 2px 0 #000; }
.exchange .ex-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #5ff09a, #14a34e); color: #fff; font-size: 18px; box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #0a5a2a; }
.exchange input[type=range] { accent-color: var(--green); }
@media (prefers-reduced-motion: reduce) { .cur-spin, .exchange .ex-preview .ico { animation: none !important; } }
.reward-wallet .ico { width: 28px; height: 28px; }
.rewards li b.cur .ico, .wallet-lines b.cur .ico { width: 20px; height: 20px; margin: -3px 0; }
.ms-tier em .ico, .mission em .ico { width: 22px; height: 22px; margin: -3px 0; }

/* ── profile: stat tiles, medallion badges ── */
.profile-hero { box-shadow: inset 0 0 0 1.5px #ffffff12, inset 0 1px 0 #ffffff1a; }
.stats { gap: 8px; }
.stats div { --a: #2f9bff; position: relative; overflow: hidden; padding: 12px 6px 10px; border-radius: var(--r-md); background: linear-gradient(180deg, color-mix(in srgb, var(--a) 22%, #10384a), #0a2633 80%); box-shadow: inset 0 3px 0 var(--a), inset 0 0 0 1px #ffffff12, 0 3px 8px #0004; }
.stats div:nth-child(2) { --a: #ffc533; } .stats div:nth-child(3) { --a: #2fb6ff; } .stats div:nth-child(4) { --a: #a774ff; } .stats div:nth-child(5) { --a: #ff7a2e; } .stats div:nth-child(6) { --a: #ff4058; }
.stats b { font-size: 22px; text-shadow: 0 2px 0 #0008; }
.stats span { color: #b9d0d6; }
.badges { gap: 8px; }
.badge { --m: #2f9bff; grid-template-columns: 50px 1fr; column-gap: 10px; padding: 9px 10px 9px 8px; border-radius: var(--r-md); background: linear-gradient(135deg, #ffffff0c, #ffffff04); box-shadow: inset 0 0 0 1px #ffffff0e; opacity: 1; filter: none; }
.badge span { position: relative; display: grid; place-items: center; width: 46px; height: 46px; font-size: 23px; line-height: 1; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--m) 50%, #fff) 0, var(--m) 50%, color-mix(in srgb, var(--m) 45%, #000) 100%); box-shadow: 0 0 0 2.5px #ffe48a, 0 0 0 4px #7a4306, inset 0 2px 0 #ffffff88, inset 0 -4px 0 #00000040, 0 4px 8px #0008; filter: drop-shadow(0 0 0 transparent); }
.badge:nth-child(6n+2) { --m: #ff7a2e; } .badge:nth-child(6n+3) { --m: #a774ff; } .badge:nth-child(6n+4) { --m: #1fae94; } .badge:nth-child(6n+5) { --m: #ff4058; } .badge:nth-child(6n) { --m: #e8a01e; }
.badge b { font-size: 13.5px; }
.badge small { line-height: 1.3; }
.badge.got { background: linear-gradient(135deg, color-mix(in srgb, var(--m) 22%, transparent), #ffffff06); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m) 55%, transparent); }
.badge:not(.got) span { background: radial-gradient(circle at 50% 30%, #5a7480, #2a3f48 60%, #16252c); box-shadow: 0 0 0 2.5px #50646c, 0 0 0 4px #13222a, inset 0 2px 0 #ffffff33, inset 0 -4px 0 #00000040; filter: grayscale(1) brightness(.75); opacity: .9; }
.badge:not(.got) span::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5' fill='%23cfe0e6'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='%23cfe0e6' stroke-width='2.4'/%3E%3C/svg%3E") center / 13px no-repeat, #1b2d35; box-shadow: 0 0 0 2px #0a1d26; filter: none; }
.badge:not(.got) b { color: #c7d6db; } .badge:not(.got) small { color: #7f99a2; }
/* Oct 9 2026: never crop a badge name — text wraps, and phones get one badge per row. */
.badge { min-width: 0; overflow: hidden; }
.badge b, .badge small { display: block; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .badges { grid-template-columns: 1fr; } .badge { grid-template-columns: 46px 1fr; } .badge b { font-size: 14px; } .badge small { font-size: 12px; } }
.new-badge { box-shadow: inset 0 0 0 1.5px #ffc53388, 0 0 18px #ffc53322; }

/* missions / quests rows */
.quest { border-radius: var(--r-md); background: linear-gradient(180deg, #ffffff0d, #ffffff05); box-shadow: inset 0 0 0 1px #ffffff0e; }
.quest.done { background: linear-gradient(180deg, #3fe08a1c, #3fe08a08); }
.q-track { box-shadow: inset 0 1px 2px #000a; }
.q-track i { background: linear-gradient(180deg, #ffe48a, #ffc533 50%, #f0a020 51%, #ffb52e); }
.quest.done .q-track i { background: linear-gradient(180deg, #8dffbe, #3fe08a 50%, #22b866 51%, #3fe08a); }
.ms-tier { border-radius: var(--r-md); background: linear-gradient(180deg, #ffffff0d, #ffffff05); }

/* modal sheets: consistent top edge */
dialog#modal { box-shadow: 0 -10px 40px #000c, inset 0 0 0 1.5px #ffffff18, inset 0 2px 0 #ffffff14; }
.modal-head h2 { text-shadow: 0 2px 0 #0008; }
.icon-btn { box-shadow: inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #ffffff10; }

/* ── card frames (TCG layout): element badge top-left, name ribbon, clear art, rules plate,
      ATK / DEF medallions anchored to the bottom corners. Frame = element metal + bevel + gloss. ── */
.card-face { --edge: var(--fire); --f: 2.8cqw; }
.card-face.el-water { --edge: var(--water); } .card-face.el-earth { --edge: var(--earth); } .card-face.el-air { --edge: var(--air); }
.card-face.el-mystery { --edge: var(--mystery); } .card-face.el-legendary { --edge: var(--legendary); }
.card-face {
  padding: 0;
  /* brushed-metal hairlines + a faint stone grain over the element gradient (CSS only, no images) */
  background:
    repeating-linear-gradient(104deg, #ffffff14 0 .3cqw, transparent .3cqw 1.2cqw),
    repeating-radial-gradient(circle at 30% 70%, #00000018 0 .35cqw, transparent .35cqw 2.3cqw),
    radial-gradient(60% 30% at 18% 8%, #ffffff55, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--edge) 40%, #fff) 0%, var(--edge) 24%, color-mix(in srgb, var(--edge) 58%, #000) 58%, color-mix(in srgb, var(--edge) 80%, #fff) 100%);
  box-shadow: inset 0 .7cqw 0 #ffffff88, inset 0 -.9cqw 0 #00000055, 0 0 0 .5cqw color-mix(in srgb, var(--edge) 30%, #000), 0 0 3.2cqw color-mix(in srgb, var(--edge) 50%, transparent), 0 1.5cqw 4cqw #000a;
}
.cf-bg { inset: var(--f); border-radius: 4.5cqw; }
.cf-edge { position: absolute; inset: var(--f); z-index: 4; border-radius: 4.5cqw; pointer-events: none; box-shadow: inset 0 0 0 .45cqw #000000a0, inset 0 0 0 .9cqw color-mix(in srgb, var(--edge) 45%, #ffffff80), inset 0 1.6cqw 2cqw #0000004d; }
.cf-gloss { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; background: linear-gradient(172deg, #ffffff59 0%, #ffffff17 4%, transparent 11%), radial-gradient(70% 10% at 50% 0%, #ffffff38, transparent 70%); }
.cf-shine { z-index: 6; }

/* name ribbon across the top; the badge sits on its left end */
.cf-title { position: absolute; top: 3.4cqw; left: 6cqw; right: 3.4cqw; height: 12.6cqw; z-index: 3; display: grid; place-items: center; padding: 0 3cqw 0 13cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--band) 62%, #fff), var(--band) 46%, color-mix(in srgb, var(--band) 62%, #000));
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.4cqw) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 .6cqw 0 #ffffff70, inset 0 -.7cqw 0 #00000040, inset 0 0 0 .35cqw #00000055; }
.cf-title b { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 900 9.6cqw/1.1 var(--body); letter-spacing: -.02em; text-transform: uppercase; color: var(--title); -webkit-text-stroke: .5cqw #3a1300; paint-order: stroke fill; text-shadow: 0 .6cqw 0 #3a1300, 0 1cqw 1.6cqw #0008; }
.cf-title.t-mid b { font-size: 8.6cqw; } .cf-title.t-long b { font-size: 7.3cqw; } .cf-title.t-xl b { font-size: 6.2cqw; letter-spacing: -.03em; }
.card-face.forged .cf-title { background: linear-gradient(180deg, #ffe48a, #f0a020 45%, #8a4b05); }

/* element gem, top-left corner (Legendary shows the crown, Mystery the eye) */
.cf-badge { position: absolute; top: 2.2cqw; left: 2.2cqw; width: 16cqw; height: 16cqw; padding: 2.6cqw; z-index: 5; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c3) 55%, #fff4) 0, var(--c3) 55%, color-mix(in srgb, var(--c3) 55%, #000) 100%);
  box-shadow: 0 0 0 .6cqw #fff, 0 0 0 1.3cqw var(--edge), 0 0 0 1.7cqw #0009, 0 1cqw 2.4cqw #000a, inset 0 1cqw .8cqw #ffffff55, inset 0 -1.2cqw 1.2cqw #0007; }
.cf-badge .ico { width: 100%; height: 100%; display: block; }

/* art window: kept clear of text and numbers */
.cf-art { position: absolute; top: 17.4cqw; left: var(--f); right: var(--f); bottom: 38cqw; overflow: hidden; z-index: 1; border-radius: 1.6cqw 1.6cqw 0 0; }
.cf-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0005, transparent 16%, transparent 80%, #0006); }
.card-face.legacy .cf-art img { object-position: 50% 30%; }

/* rules plate: semi-transparent, directly under the art; type tab on its top edge */
.cf-plate { position: absolute; left: 4.4cqw; right: 4.4cqw; top: 88cqw; bottom: 4.4cqw; z-index: 3; border-radius: 3cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c3) 35%, rgb(6 20 32 / .62)), color-mix(in srgb, var(--c3) 30%, rgb(4 14 24 / .88)) 30%, color-mix(in srgb, var(--c3) 45%, rgb(4 14 24 / .9)));
  box-shadow: inset 0 0 0 .4cqw color-mix(in srgb, var(--edge) 55%, #ffffff40), inset 0 .9cqw 1.2cqw #0006, 0 .6cqw 1.2cqw #0006;
  -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw); }
.cf-kind { position: absolute; top: -2.6cqw; left: 50%; transform: translateX(-50%); max-width: 80%; overflow: hidden; text-overflow: ellipsis; padding: .9cqw 3cqw; border-radius: 99px; white-space: nowrap;
  font: 800 3.4cqw/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--band) 55%, #fff), var(--band) 55%, color-mix(in srgb, var(--band) 70%, #000));
  box-shadow: 0 0 0 .4cqw #0009, 0 .6cqw 1.2cqw #0008, inset 0 .4cqw 0 #ffffff66; text-shadow: 0 .35cqw 0 #0008; }
.cf-rules { position: absolute; inset: 3.8cqw 4cqw 15.5cqw; display: grid; place-items: center; }
.cf-rules span { font: 600 4cqw/1.24 var(--body); color: #f2f7ff; text-align: center; text-wrap: balance; text-shadow: 0 .3cqw .6cqw #000a; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* brand mark between the medallions */
.cf-logo { position: absolute; left: 50%; bottom: 4.6cqw; width: 22cqw; transform: translateX(-50%); z-index: 3; opacity: .95; filter: drop-shadow(0 .6cqw .8cqw #000c); }

/* stat medallions: ATK bottom-left, DEF / HP / effect bottom-right */
.cf-stats { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cf-med { --m1: #ff9a9a; --m2: #e3263f; --m3: #7c0a1f; --ring: linear-gradient(160deg, #fff7d6, #f0c25a 28%, #8a5410 54%, #f6d47a 78%, #8a5a12);
  position: absolute; bottom: .9cqw; min-width: 24cqw; height: 24cqw; padding: 0 2cqw; box-sizing: border-box; border-radius: 99px; border: 1.5cqw solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 28%, var(--m1), var(--m2) 55%, var(--m3)) padding-box, var(--ring) border-box;
  box-shadow: 0 0 0 .5cqw #1a0e00d0, 0 1.2cqw 2.2cqw #000b, inset 0 1.2cqw 1cqw #ffffff50, inset 0 -1.4cqw 1.4cqw #0007; }
.cf-med.l { left: .9cqw; } .cf-med.r { right: .9cqw; }
.cf-med.def { --m1: #9fd8ff; --m2: #2a86ee; --m3: #0c3d8c; --ring: linear-gradient(160deg, #ffffff, #c4d2e0 28%, #4a5b6e 54%, #e4ecf4 78%, #56677a); }
.cf-med.heal { --m1: #a4f8c4; --m2: #26b862; --m3: #0a5a2c; }
.cf-med.buff { --m1: #dcc0ff; --m2: #8b4ff0; --m3: #3d1494; }
.cf-med.brain { --m1: #ffd0e6; --m2: #d0479a; --m3: #5a0f3a; }
.cf-med.fx { --m1: color-mix(in srgb, var(--c1) 70%, #fff); --m2: var(--c2); --m3: var(--c3); min-width: 18cqw; height: 18cqw; padding: 0; }
.el-legendary .cf-med.atk { --m1: #fff1a6; --m2: #f2a51e; --m3: #8a3d0a; }
.cf-mi { display: block; width: 8.4cqw; height: 8.4cqw; margin: -.6cqw 0 .2cqw; filter: drop-shadow(0 .4cqw .3cqw #0009); }
.cf-mi .ico { display: block; width: 100%; height: 100%; }
.cf-med.fx .cf-mi { width: 10cqw; height: 10cqw; margin: 0; }
.cf-med em { font: 900 6.4cqw/1 var(--body); font-style: normal; letter-spacing: -.03em; white-space: nowrap; color: #fff; -webkit-text-stroke: .7cqw #160612; paint-order: stroke fill; text-shadow: 0 .5cqw 0 #0009; }
/* a used (not full) card: small gold pip on the medallion */
.card-face.worn .cf-med:is(.atk, .def)::after { content: ''; position: absolute; top: -1.2cqw; right: -1.2cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6c4, #ffc533 55%, #b56d0a); box-shadow: 0 0 0 .5cqw #3a1d00; }

/* legendary: gold edge with a slow travelling shimmer */
.card-face.el-legendary { box-shadow: inset 0 .7cqw 0 #ffffffaa, inset 0 -.9cqw 0 #6b3a0566, 0 0 0 .5cqw #6b3a05, 0 0 4.5cqw #ffc53399, 0 1.5cqw 4cqw #000a; }
.card-face.el-legendary::before { content: ''; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; z-index: -2; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 18%, #fffbe6 25%, transparent 32% 68%, #fffbe6 75%, transparent 82%); opacity: .7; mix-blend-mode: soft-light; animation: legend-edge 4.5s linear infinite; }
@keyframes legend-edge { to { transform: rotate(1turn); } }
.card-face.el-mystery { box-shadow: inset 0 .7cqw 0 #ffffff88, inset 0 -.9cqw 0 #00000055, 0 0 0 .5cqw #2a0f6e, 0 0 4cqw #a774ff88, 0 1.5cqw 4cqw #000a; }
@media (prefers-reduced-motion: reduce) { .card-face.el-legendary::before { animation: none !important; } .battle-btn::after { display: none; } .nav-dot { animation: none; } }

/* small cards (reserve dock, fan, mini, caster columns): title, art, badge and compact medallions */
@container (max-width: 130px) {
  .card-face { --f: 3.5cqw; }
  .cf-plate, .cf-logo { display: none; }
  .cf-title { top: var(--f); left: var(--f); right: var(--f); height: 19cqw; padding: 0 2cqw; clip-path: none; }
  .cf-title b { font-size: 12cqw; -webkit-text-stroke-width: .9cqw; }
  .cf-title.t-mid b { font-size: 11cqw; } .cf-title.t-long b { font-size: 9.6cqw; } .cf-title.t-xl b { font-size: 8.2cqw; }
  .cf-badge { top: 25cqw; left: 6cqw; width: 25cqw; height: 25cqw; padding: 3.6cqw; box-shadow: 0 0 0 1cqw #fff, 0 0 0 2cqw var(--edge), 0 1cqw 2.4cqw #000a, inset 0 1cqw .8cqw #ffffff55; }
  .cf-art { top: 22.5cqw; bottom: var(--f); border-radius: 0 0 3cqw 3cqw; }
  .cf-med { bottom: 3cqw; min-width: 38cqw; height: 38cqw; padding: 0 3cqw; border-width: 2.6cqw; box-shadow: 0 0 0 .9cqw #1a0e00d0, 0 1.5cqw 3cqw #000b, inset 0 2cqw 1.5cqw #ffffff50, inset 0 -2cqw 2cqw #0007; }
  .cf-med.l { left: 3cqw; } .cf-med.r { right: 3cqw; }
  .cf-mi { display: none; }
  .cf-med em { font-size: 12.5cqw; -webkit-text-stroke-width: 1.3cqw; letter-spacing: -.05em; }
  .cf-med.brain { flex-direction: row; gap: 1cqw; } .cf-med.brain .cf-mi { display: block; width: 14cqw; height: 14cqw; margin: 0; }
  .cf-med.fx { min-width: 30cqw; height: 30cqw; } .cf-med.fx .cf-mi { display: block; width: 16cqw; height: 16cqw; }
  .card-face.worn .cf-med:is(.atk, .def)::after { width: 11cqw; height: 11cqw; top: -2cqw; right: -2cqw; box-shadow: 0 0 0 .9cqw #3a1d00; }
}
/* caster columns use the compact layout at 150px (beats caster.css's older pill rules) */
.cb-col .cb-card .card-face { --f: 3.5cqw; padding: 0; }
.cb-col .cb-card .card-face :is(.cf-plate, .cf-logo) { display: none; }
.cb-col .cb-card .card-face .cf-title { top: var(--f); left: var(--f); right: var(--f); height: 19cqw; padding: 0 2cqw; clip-path: none; }
.cb-col .cb-card .card-face .cf-title b { font-size: 12cqw; -webkit-text-stroke-width: .9cqw; }
.cb-col .cb-card .card-face .cf-title.t-mid b { font-size: 11cqw; } .cb-col .cb-card .card-face .cf-title.t-long b { font-size: 9.6cqw; } .cb-col .cb-card .card-face .cf-title.t-xl b { font-size: 8.2cqw; }
.cb-col .cb-card .card-face .cf-badge { top: 25cqw; bottom: auto; left: 6cqw; width: 25cqw; height: 25cqw; padding: 3.6cqw; border-radius: 50%; }
.cb-col .cb-card .card-face .cf-art { top: 22.5cqw; bottom: var(--f); left: var(--f); right: var(--f); border-radius: 0 0 3cqw 3cqw; }
.cb-col .cb-card .card-face .cf-med { bottom: 3cqw; min-width: 38cqw; height: 38cqw; padding: 0 3cqw; border-width: 2.6cqw; }
.cb-col .cb-card .card-face .cf-med.l { left: 3cqw; } .cb-col .cb-card .card-face .cf-med.r { right: 3cqw; }
.cb-col .cb-card .card-face .cf-mi { display: none; }
.cb-col .cb-card .card-face .cf-med em { font-size: 12.5cqw; -webkit-text-stroke-width: 1.3cqw; letter-spacing: -.05em; }
.cb-col .cb-card .card-face .cf-med.fx { min-width: 30cqw; height: 30cqw; } .cb-col .cb-card .card-face .cf-med:is(.fx, .brain) .cf-mi { display: block; width: 15cqw; height: 15cqw; margin: 0; }
/* reward-fx.js */
.rfx-layer { position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
.rfx-coin { position: absolute; left: 0; top: 0; --s: 44px; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); filter: drop-shadow(0 4px 6px #000a); will-change: transform, opacity; }
.rfx-flash { position: absolute; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; background: radial-gradient(circle, #fff8 0, #ffc53344 35%, transparent 70%); animation: rfx-flash .7s ease-out forwards; }
.rfx-amount { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; font: 700 34px/1 var(--display); color: #fff; -webkit-text-stroke: 2px #04121a; paint-order: stroke fill; text-shadow: 0 3px 0 #04121a, 0 0 18px #ffffff66; animation: rfx-amount 1.6s cubic-bezier(.2, 1.3, .4, 1) forwards; white-space: nowrap; }
.rfx-amount.gems { color: #9ff7f0; } .rfx-amount.hela { color: #ffd84a; }
.rfx-amount .cur-spin { --s: 40px; }
@keyframes rfx-flash { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes rfx-amount { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 25%, 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(.95); opacity: 0; } }

/* Locked game mode (ULTIMATE_ENABLED = false in engine.js): greyed button, "Coming soon" badge, explanatory modal. */
.seg.modes button.locked { opacity: .55; cursor: not-allowed; }
.seg.modes button.locked .beta { background: #3a4a55; color: #cfd8dc; }
.coming-soon .big { font: 800 clamp(22px, 6cqw, 30px)/1.1 var(--display); color: var(--gold, #ffc533); text-align: center; letter-spacing: .04em; margin: 4px 0 10px; }
.coming-soon p { text-align: center; }

/* Starting-health selector (Oct 8 2026): Quick Party 1,500 · Classic 3,000 · Marathon 5,000 */
.hp-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.seg.hp-seg button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 12px; line-height: 1.1; }
.seg.hp-seg button b { font-size: 13px; }
.seg.hp-seg button small { font-size: 11px; font-weight: 600; opacity: .8; }
.seg.hp-seg button.on small { opacity: 1; color: #ffe9a8; }

/* Pass-the-device hand-over (local party matches) */
.handover { position: fixed; inset: 0; z-index: 87; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle, #06202cf2, #020a0ffa); animation: fade-in .25s; }
.handover.leaving { animation: fade-out .22s forwards; }
.handover-card { display: grid; justify-items: center; gap: 10px; width: min(340px, 100%); padding: 28px 20px 22px; border-radius: 26px; background: linear-gradient(180deg, #1b5068, #0a2532); box-shadow: inset 0 0 0 2px var(--pc, #ffc533), 0 20px 60px #000; text-align: center; }
.handover-card .kicker { letter-spacing: .18em; font-size: 11px; color: var(--muted); }
.handover-card h2 { font: 700 30px/1.05 var(--display); color: var(--pc, #ffc533); margin: 0; }
.handover-role { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #ff9d1c22; color: #ffd27a; font-weight: 700; }
.handover-role.defense { background: #2f9dff22; color: #9fd4ff; }
.handover-role .ico { width: 18px; height: 18px; }
.handover-card small { color: var(--muted); }
@keyframes fade-out { to { opacity: 0; } }

/* Battle log: one line by default, the toggle opens the last seven */
.feed-wrap { display: grid; gap: 4px; }
.feed-toggle { justify-self: start; border: 0; background: none; padding: 2px 0; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.feed-toggle i { font-style: normal; }
.feed-wrap:not(.open) .feed li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* End-screen credit: why you won (or what cost you) */
.recap { list-style: none; margin: 2px 0 4px; padding: 10px 12px; width: 100%; border-radius: 14px; background: #00000033; box-shadow: inset 0 0 0 1px #ffffff12; display: grid; gap: 6px; text-align: left; font-size: 13px; color: var(--text); }
.recap li { position: relative; padding-left: 20px; animation: fade-in .5s both; }
.recap li::before { content: '★'; position: absolute; left: 0; color: var(--gold); }
.recap.lost li::before { content: '•'; color: #ff8d9a; }
.recap li:first-child { font-weight: 700; }

/* Keep / Return / swap */
.keep-row .btn { min-height: 48px; font-size: 16px; flex: 1 1 0; }
.keep-row .btn .ico { width: 18px; height: 18px; }
.swap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.swap-row .kicker { width: 100%; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.swap-btn { min-height: 42px; padding: 4px 10px 4px 4px; font-size: 14px; }
.action-row .btn-save, .action-row .btn-save + .btn-ghost { flex: 0 1 auto; min-width: 96px; }
.ult-soon { justify-self: center; border: 0; background: none; padding: 2px 8px; font: 600 12px/1.4 var(--body); color: var(--muted); letter-spacing: .02em; cursor: pointer; }
.ult-soon i { font-style: normal; padding: 1px 7px; border-radius: 999px; background: #3a4a55; color: #cfd8dc; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

/* Hidden reserve cards */
.hidden-card { display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: 6%; background: radial-gradient(circle, #1f5b74, #08202b 70%); box-shadow: inset 0 0 0 2px #ffc53388, 0 4px 10px #0007; }
.hidden-back { display: grid; place-items: center; gap: 4px; }
.hidden-back img { width: 55%; opacity: .85; }
.hidden-back b { font: 700 22px/1 var(--display); color: var(--gold); }
.hidden-back b svg { width: 26px; height: 26px; }
/* Face-down draws carry the deck's colour so everyone knows *what kind* of card was drawn, never which (Oct 9 2026). */
.hidden-card.back-fire { background: radial-gradient(circle, #7a2d1a, #1d0a06 70%); box-shadow: inset 0 0 0 2px #f28d6899, 0 4px 10px #0007; }
.hidden-card.back-water { background: radial-gradient(circle, #1c4f78, #06182b 70%); box-shadow: inset 0 0 0 2px #83c9f299, 0 4px 10px #0007; }
.hidden-card.back-earth { background: radial-gradient(circle, #5d4a2c, #1c1409 70%); box-shadow: inset 0 0 0 2px #cfb79b99, 0 4px 10px #0007; }
.hidden-card.back-air { background: radial-gradient(circle, #1d5c55, #07201d 70%); box-shadow: inset 0 0 0 2px #70d7c599, 0 4px 10px #0007; }
.hidden-card.back-mystery { background: radial-gradient(circle, #4a2a7a, #140a28 70%); box-shadow: inset 0 0 0 2px #be9fe7aa, 0 4px 10px #0007; }
.hidden-card.back-legendary { background: radial-gradient(circle, #7a5a12, #241905 70%); box-shadow: inset 0 0 0 2px #f0c874cc, 0 0 18px #f0c87466, 0 4px 10px #0007; }
.hidden-card.back-fire b, .hidden-card.back-water b, .hidden-card.back-earth b, .hidden-card.back-air b { color: #fff; }
.hidden-card.back-fire b { color: #f28d68; } .hidden-card.back-water b { color: #83c9f2; } .hidden-card.back-earth b { color: #cfb79b; } .hidden-card.back-air b { color: #70d7c5; } .hidden-card.back-mystery b { color: #be9fe7; }

/* Settings (Oct 8 2026 rework) */
.settings h3 { margin: 10px 0 2px; font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.settings h3:first-child { margin-top: 0; }
.toggle em { font-style: normal; display: grid; }
.toggle em small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.settings-links { display: grid; gap: 6px; }
.settings-links button, .settings-links a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: #ffffff0c; font-weight: 700; font-size: 14px; color: var(--text); text-align: left; text-decoration: none; }
.settings-links .ico { width: 22px; height: 22px; color: var(--gold); flex: none; }
.settings-links span { display: grid; }
.settings-links small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.settings-links .danger .ico { color: var(--red); }
.settings .quit-btn { margin-top: 8px; color: #ff8d9a; }
.settings .quit-btn .ico { color: var(--red); }
/* Comfort options */
body.big-text { font-size: 110%; }
body.big-text .prompt p, body.big-text .feed { font-size: 14px; }
body.lite .fx-burst, body.lite .rays, body.lite .intro-sky { filter: none; }
body.lite .hero-fan .fan-card, body.lite .shimmer { animation: none !important; }

/* Claimable rewards */
.quest.claimable { box-shadow: inset 0 0 0 2px #ffc53388; }
.claim-btn { flex: none; min-height: 36px; padding: 4px 12px; font-size: 13px; gap: 4px; animation: roll-ready 1.6s ease-in-out infinite; }
.claim-btn .ico { width: 16px; height: 16px; }
.claim-all { justify-self: end; min-height: 38px; font-size: 13px; }
.nav-dot.gold { background: var(--gold); color: #3a1d00; }

/* Profile icons */
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.avatars button { position: relative; aspect-ratio: 1; border: 0; border-radius: 14px; display: grid; place-items: center; background: #ffffff0c; box-shadow: inset 0 0 0 2px transparent; overflow: hidden; padding: 0; }
.avatars button.on { box-shadow: inset 0 0 0 2px var(--gold); background: #ffc53322; }
.avatars button.locked { opacity: .45; filter: grayscale(.8); }
.avatars button small { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 2px #000; }
.avatars .pawn-body img { width: 40px; }
.avatar-art { display: block; width: 100%; height: 100%; background-size: cover; background-position: center 20%; border-radius: inherit; }
.profile-avatar .avatar-art { width: 52px; height: 52px; border-radius: 14px; }
.avatar-el { display: grid; place-items: center; width: 100%; height: 100%; }
.avatar-el .emblem { width: 60%; height: 60%; }
.profile-avatar .avatar-el .emblem { width: 34px; height: 34px; }

/* Turn clock */
.turn-clock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: #00000040; box-shadow: inset 0 0 0 1px #ffffff14; font: 700 13px/1 var(--display); color: var(--text); }
.turn-clock i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p, 1) * 360deg), #ffffff1a 0); box-shadow: inset 0 0 0 3px #04121a; }
.turn-clock.urgent i { background: conic-gradient(var(--red) calc(var(--p, 1) * 360deg), #ffffff1a 0); }
.turn-clock.urgent b { color: #ff8d9a; animation: pulse-tile .6s infinite; }
.turn-clock .lives { display: inline-flex; gap: 1px; font-size: 11px; }
.turn-clock .lives em { font-style: normal; opacity: .22; }
.turn-clock .lives em.on { opacity: 1; }
.turn-clock:not(.mine) { opacity: .7; }

/* Phone layout (Oct 8 2026 tester feedback): smaller home logo, bigger board squares, a readable pawn */
@media (max-width: 520px) {
  .hero-fan { width: min(250px, 64vw); height: min(190px, 48vw); }
  .hero-logo { width: min(300px, 72vw); margin-top: -26px; }
  .hero-tag { font-size: 11px; }
  .home-actions { margin-top: 10px; gap: 10px; }
  .board-wrap { --board: clamp(300px, calc(100vw - 8px), 720px); }
  .tile small { font-size: 7px; }
  .board-pawn { width: 9.6%; }
  .board-pawn .pawn-body b { font-size: 11px; }
}

/* Chat (online rooms) */
.emote-pop.chat { grid-template-columns: 1fr; width: min(320px, calc(100vw - 20px)); max-height: calc(100dvh - 120px); overflow: auto; }
.emote-pop.chat .emote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chat-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.chat-presets button { padding: 6px 10px; border: 0; border-radius: 999px; background: #ffffff12; font-weight: 700; font-size: 12.5px; color: var(--text); }
.chat-emoji { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-emoji button { padding: 4px 6px; border: 0; border-radius: 10px; background: #ffffff0a; font-size: 20px; line-height: 1; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 0; background: #00000040; color: var(--text); font: 600 14px var(--body); }
.chat-form .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.emote-float.chat-float em { max-width: 220px; white-space: normal; }
.emote-float.chat-float { grid-template-columns: auto; animation-duration: 3.8s; } .emote-float.chat-float b { grid-row: auto; }

/* ───────── Strike VFX (Oct 8 2026) ───────── */
.fx-missile { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.fx-missile .emblem { position: relative; z-index: 2; width: 100%; height: 100%; }
.fx-comet { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--col) 28%, transparent 62%); opacity: .9; animation: comet-pulse .12s infinite alternate; }
@keyframes comet-pulse { from { transform: scale(.9); } to { transform: scale(1.12); } }
.fx-trail { width: 22px; height: 22px; margin: -11px 0 0 -11px; transform: scale(var(--s, 1)); animation-duration: .52s; }
.fx-impact { position: fixed; z-index: 73; width: 0; height: 0; pointer-events: none; }
.fx-impact .shock { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 5px solid var(--col); box-shadow: 0 0 18px var(--col), inset 0 0 18px var(--col); animation: ring .5s ease-out forwards; }
.fx-impact.huge .shock { left: -70px; top: -70px; width: 140px; height: 140px; border-width: 8px; }
.fx-impact .flare { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--col) 25%, transparent 65%); animation: rfx-flash .45s ease-out forwards; mix-blend-mode: screen; }
.fx-impact s { position: absolute; left: 0; top: -2px; height: 4px; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #fff, var(--col), transparent); transform-origin: 0 50%; transform: rotate(var(--a)); animation: shard .55s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes shard { from { transform: rotate(var(--a)) translateX(10px) scaleX(.3); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scaleX(1.2); opacity: 0; } }
.fx-impact .crack { position: absolute; left: 0; top: -1px; width: var(--l); height: 2px; background: linear-gradient(90deg, #000c, #0000); transform-origin: 0 50%; transform: rotate(var(--a)); animation: crack .7s ease-out forwards; }
@keyframes crack { 0% { transform: rotate(var(--a)) scaleX(0); } 20% { transform: rotate(var(--a)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--a)) scaleX(1); opacity: 0; } }
.fx-impact .drop { position: absolute; left: -4px; top: -4px; width: 8px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(#fff, #2fb6ff 60%); animation: droplet .7s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes droplet { 50% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) * -1.2)); opacity: 0; } }
.fx-impact .gust { position: absolute; left: -80px; top: var(--y); width: var(--w); height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #bffff2, transparent); animation: gust .5s var(--t) ease-out both; }
@keyframes gust { from { transform: translateX(-60px); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(160px); opacity: 0; } }
/* Explosion */
.fx-explosion { position: fixed; z-index: 86; width: 0; height: 0; pointer-events: none; --col: #ff7a2e; }
.fx-explosion .ball { position: absolute; width: min(78vmin, 520px); height: min(78vmin, 520px); left: calc(min(78vmin, 520px) / -2); top: calc(min(78vmin, 520px) / -2); background: center / contain no-repeat; filter: saturate(1.15); }
.fx-explosion .ball.b2 { transform: rotate(140deg) scale(.8); opacity: .8; }
.fx-explosion .shock { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 10px solid #ffd27a; box-shadow: 0 0 30px #ff9d1c, inset 0 0 30px #ff9d1c; animation: bigring .9s ease-out forwards; }
.fx-explosion .shock.s2 { animation-delay: .15s; border-color: #fff; }
@keyframes bigring { from { transform: scale(.2); opacity: 1; } to { transform: scale(12); opacity: 0; } }
.fx-explosion s { position: absolute; left: 0; top: -3px; height: 6px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #fff, #ffb347, #ff3b1c, transparent); transform-origin: 0 50%; transform: rotate(var(--a)); animation: shard .9s var(--t) cubic-bezier(.1,.8,.3,1) both; }
.fx-explosion.out { transition: opacity .45s; opacity: 0; }
/* Tornado */
.fx-wind { position: fixed; inset: 0; z-index: 74; pointer-events: none; overflow: hidden; }
.fx-wind i { position: absolute; top: var(--y); left: -300px; width: var(--w); height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #bffff2, #fff, transparent); opacity: var(--o); animation: windline var(--d) var(--t) ease-in both; }
@keyframes windline { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 600px)); } }
.fx-wind em { position: absolute; top: var(--y); left: -120px; width: 90px; height: 90px; border-radius: 50%; border: 3px solid #bffff277; border-right-color: transparent; animation: windspin 1s var(--t) linear both; }
@keyframes windspin { from { transform: translateX(0) rotate(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(calc(100vw + 300px)) rotate(900deg); opacity: 0; } }
.fx-wind.out { transition: opacity .35s; opacity: 0; }
/* Mystery flourish */
.fx-mystery-fx { position: fixed; z-index: 73; width: 0; height: 0; pointer-events: none; --col: #a774ff; }
.fx-mystery-fx .halo { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; box-shadow: 0 0 0 2px #d9c2ff, 0 0 40px #a774ff, inset 0 0 40px #a774ff88; animation: ring 1.1s ease-out forwards; }
.fx-mystery-fx .veil { position: absolute; left: calc(var(--r) * -1.3); top: calc(var(--r) * -1.3); width: calc(var(--r) * 2.6); height: calc(var(--r) * 2.6); border-radius: 50%; background: conic-gradient(from 0deg, #a774ff00, #d9c2ff66, #a774ff00 30%, #ffd84a44 55%, #a774ff00 75%, #d9c2ff66, #a774ff00); animation: veil 1.4s ease-out forwards; mix-blend-mode: screen; }
@keyframes veil { from { transform: rotate(0) scale(.6); opacity: 0; } 25% { opacity: 1; } to { transform: rotate(240deg) scale(1.15); opacity: 0; } }
.fx-mystery-fx i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(#fff, #d9c2ff 50%, #a774ff); box-shadow: 0 0 10px #a774ff; transform: rotate(var(--a)) translateX(var(--r)); animation: orbit 1.3s var(--t) ease-out both; }
@keyframes orbit { from { transform: rotate(var(--a)) translateX(calc(var(--r) * .4)) scale(0); opacity: 0; } 30% { opacity: 1; transform: rotate(calc(var(--a) + 60deg)) translateX(var(--r)) scale(1.3); } to { transform: rotate(calc(var(--a) + 200deg)) translateX(calc(var(--r) * 1.4)) scale(0); opacity: 0; } }
body.lite .fx-comet, body.lite .fx-impact .flare, body.lite .fx-mystery-fx .veil { display: none; }
.topbar .eye { display: inline-flex; align-items: center; gap: 3px; font: 700 11px/1 var(--body); color: var(--muted); }
.topbar .eye .ico { width: 14px; height: 14px; }
.toggle.small { font-weight: 600; font-size: 13px; }
.center-card.hidden-draw .hidden-card { width: 100%; height: 100%; }
.center-card.hidden-draw .kicker { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; color: #cfe3ea; display: flex; justify-content: center; align-items: center; gap: 4px; }
.center-card.hidden-draw .kicker svg { width: 14px; height: 14px; }
.center-card.hidden-draw.is-legendary .kicker { color: var(--gold); }
.center-card.hidden-draw:not(.is-legendary) .rays { opacity: .35; }

/* Long gamer tags never push the threat pill off-screen (Oct 8 2026 fix) */
@media (max-width: 520px) {
  .prompt h2 { font-size: 15px; }
  .prompt h2 .who { font-size: 12px; }
  .threat { padding: 5px 8px; } .threat strong { font-size: 18px; }
}
/* HUD chip: the name is a flex container, so the ellipsis must live on an inner block */
.chip-name { display: block; }
.chip-name em { left: auto; right: 10px; }
@media (max-width: 520px) { .chip-name { font-size: 11px; } .chip-hp strong { font-size: 14px; } }

/* Earthquake crack over the board */
.board { position: relative; }
.fx-crack { position: absolute; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; border-radius: inherit; }
.fx-crack .crack-img { position: absolute; inset: -6%; background: url(assets/vfx/crack.webp) center / 100% 100% no-repeat; clip-path: circle(0% at 50% 50%); animation: crack-open .75s cubic-bezier(.2,.9,.3,1) forwards; filter: drop-shadow(0 2px 2px #000c); }
@keyframes crack-open { 0% { clip-path: circle(0% at 50% 50%); opacity: 1; } 100% { clip-path: circle(80% at 50% 50%); opacity: 1; } }
.fx-crack s { position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz); border-radius: 30%; background: linear-gradient(#b9966a, #5c4630); box-shadow: 0 1px 2px #000a; animation: dust 1.1s var(--t) cubic-bezier(.2,.7,.4,1) both; }
@keyframes dust { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
.fx-crack.out { transition: opacity .6s; opacity: 0; }

/* Compact action buttons (Oct 8 2026: "these buttons are huge") — smaller, two per row on phones, never wider than the dock */
.dock { max-width: 100%; overflow: hidden; }
.hand-row { grid-template-columns: minmax(0, 1fr) auto; }
.action-row .btn.with-card { flex: 1 1 calc(50% - 7px); min-width: 0; min-height: 44px; padding: 4px 10px 4px 4px; gap: 7px; font-size: 14px; }
.action-row .btn.with-card > span:last-child { display: grid; min-width: 0; line-height: 1.15; }
.action-row .btn.with-card small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-row .btn.with-card em { font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-row .btn.with-card .mini-art { width: 26px; height: 34px; }
@media (max-width: 520px) {
  .action-row { gap: 6px; }
  .action-row .btn { min-height: 40px; font-size: 13px; padding: 5px 10px; }
  .action-row .btn.with-card { font-size: 13px; min-height: 42px; }
  .action-row .btn.with-card .mini-art { width: 24px; height: 32px; }
  .roll-btn { width: 76px; height: 76px; }
  .reserve { grid-template-columns: repeat(3, minmax(0, 60px)); gap: 6px; }
  .keep-row .btn { min-height: 44px; font-size: 15px; }
}

/* Ability bar: one card, several abilities, no scrolling */
.ability-bar { display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "art head" "chips chips"; column-gap: 8px; row-gap: 6px; align-items: center; padding: 6px 8px 8px; border-radius: 14px; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff12; }
.ability-bar .mini-art { grid-area: art; width: 30px; height: 40px; }
.ability-head { grid-area: head; display: grid; line-height: 1.15; min-width: 0; }
.ability-head b { font: 700 14px var(--display); }
.ability-head small { font-size: 11px; color: var(--muted); }
.ability-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { display: inline-grid; justify-items: start; gap: 1px; min-height: 36px; padding: 4px 11px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #45adff, #1662d8); color: #fff; font: 700 13px/1.1 var(--display); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #0d3f8f, 0 3px 8px #0006; flex: 1 1 auto; }
.chip-btn.main { background: linear-gradient(180deg, #ffd75a, #f29a18); color: #3a1d00; box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #b8650c, 0 3px 8px #0006; }
.chip-btn em { font: 600 10.5px/1 var(--body); font-style: normal; opacity: .9; }
.chip-btn em.bad { color: #ffd0d6; } .chip-btn.main em { color: #5a2d00; }
.chip-btn:disabled { opacity: .5; }
.chip-btn:active:not(:disabled) { transform: translateY(1px); }

/* Banner words always fit the strip: size by length (set in fx.banner via --n = character count) */
.fx-banner strong { font-size: min(clamp(30px, 11vw, 74px), calc(92vw / max(var(--n, 8), 6)), calc(140vh / 15)); line-height: 1.02; max-width: none; overflow: visible; text-overflow: clip; text-align: center; }
/* Prompt on phones: title row, then clock + threat on their own row so the title is never squeezed */
@media (max-width: 520px) {
  .prompt { flex-wrap: wrap; row-gap: 4px; }
  .prompt > div:first-child { flex: 1 1 100%; }
  .prompt > :not(:first-child) { margin-left: auto; }
  .prompt > .turn-clock + .threat, .prompt > .forge-tokens { margin-left: 6px; }
  .prompt p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.coming-soon.nations { text-align: left; display: grid; gap: 8px; padding: 10px 4px; } .coming-soon.nations .big { font: 700 20px var(--display); color: var(--gold); margin: 0; }

/* Each player's dice on their side of the table (local parties) */
.center-turn { position: relative; transition: transform .4s cubic-bezier(.2,.9,.3,1); }
.center-turn.side-top { transform: translateY(-28%); } .center-turn.side-bottom { transform: translateY(28%); }
.center-turn.side-left { transform: translateX(-28%); } .center-turn.side-right { transform: translateX(28%); }
.dice-owner { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #00000055; box-shadow: inset 0 0 0 1.5px var(--pc); font: 700 11px/1 var(--display); color: var(--pc); }
.dice-owner .pawn-body { width: 20px; } .dice-owner .pawn-body img { width: 18px; } .dice-owner .pawn-body b { display: none; }
.center-turn[class*="side-"] .dice-tray .die3d::after { content: ''; position: absolute; inset: -6%; border-radius: 14%; box-shadow: 0 0 0 2px var(--pc), 0 0 18px var(--pc); opacity: .55; pointer-events: none; }
.nav-dot.soon { background: #3a4a55; color: #cfd8dc; font-size: 8px; padding: 2px 5px; letter-spacing: .06em; text-transform: uppercase; }
.coming-soon .wallet-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .coming-soon .wallet-line .ico { width: 18px; height: 18px; }

/* Online queue + ladders */
/* Oct 9 2026 (Emile): PLAY ONLINE and the Friends / Party pair are narrower and centred — they no longer fill the whole width. */
.online-btn { width: min(100%, 300px); margin: 2px auto 0; min-height: 50px; font-size: 15px; padding: 6px 14px; }
.online-btn .ico { width: 28px; height: 28px; filter: drop-shadow(0 1px 1px #0006); }
.online-btn small { font-size: 10.5px; }
.home-row { width: min(100%, 300px); margin: 0 auto; gap: 8px; }
.home-row .btn { min-height: 48px; border-radius: 14px; gap: 8px; padding: 6px 10px 6px 6px; }
.home-row .btn .ico { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
.home-row .btn span { font-size: 15px; }
.home-row .btn small { font-size: 10.5px; }
.queue { align-items: center; text-align: center; }
.queue-wait { display: grid; justify-items: center; gap: 6px; padding: 6px 0 4px; }
/* Oct 9 2026: a radar sweep instead of the spinning ring — the guardian in the middle, pulses going out, blips lighting up. */
.radar { position: relative; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #0f3a4a 0%, #08202b 60%, #061419 100%); box-shadow: inset 0 0 0 1px #ffffff14, 0 10px 30px #0008; overflow: hidden; margin-bottom: 4px; }
.radar .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #ffc53366; animation: radar-pulse 2.4s ease-out infinite; opacity: 0; }
.radar .r2 { animation-delay: .8s; } .radar .r3 { animation-delay: 1.6s; }
@keyframes radar-pulse { 0% { transform: scale(.12); opacity: .9; } 100% { transform: scale(1.05); opacity: 0; } }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ffc53300 0deg, #ffc53300 300deg, #ffc53355 345deg, #ffc533cc 360deg); animation: spin 2.4s linear infinite; }
.radar::before, .radar::after { content: ''; position: absolute; background: #ffffff10; }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; } .radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar-me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 8px #ffc53399); }
.radar-me .pawn-body { width: 34px; } .radar-me .pawn-body img { width: 30px; } .radar-me .pawn-body b { display: none; }
.radar .blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #7ee0ff; box-shadow: 0 0 10px #7ee0ff; opacity: 0; animation: blip 2.4s linear infinite; }
.radar .b1 { left: 22%; top: 30%; animation-delay: 1.9s; } .radar .b2 { left: 68%; top: 24%; animation-delay: .35s; } .radar .b3 { left: 60%; top: 72%; animation-delay: 1.05s; }
@keyframes blip { 0% { opacity: 0; transform: scale(.4); } 6% { opacity: 1; transform: scale(1.15); } 40% { opacity: .25; } 100% { opacity: 0; transform: scale(.8); } }
.queue-title { margin: 0; font: 700 18px var(--display); letter-spacing: .02em; }
.queue-title .dots i { display: inline-block; animation: dot-blink 1.2s infinite; } .queue-title .dots i:nth-child(2) { animation-delay: .2s; } .queue-title .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.queue-timer { margin: 0; } .queue-timer b { font: 700 28px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .radar .ring, .radar .sweep, .radar .blip, .queue-title .dots i { animation: none; } .radar .ring { opacity: .3; transform: scale(.6); } }
.queue-found { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 18px; background: #ffc53318; box-shadow: inset 0 0 0 2px #ffc53366; }
.queue-found b { font: 700 24px var(--display); }
.queue-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.queue-facts span { padding: 4px 10px; border-radius: 999px; background: #ffffff0d; font-size: 12px; color: var(--muted); }
.ladder-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ladder-scopes button { padding: 6px 10px; border: 0; border-radius: 999px; background: #ffffff12; font-weight: 700; font-size: 12.5px; color: var(--text); }
.ladder-scopes button.on { background: linear-gradient(180deg, #45adff, #1662d8); color: #fff; }
.ladder-scopes button.pick { background: #ffc53322; color: var(--gold); }
.preseason-note { padding: 6px 10px; border-radius: 10px; background: #ffc53314; color: #ffe9a8; }
.lb-top10 { margin: 0; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, #ffc53333, #ffc53311); color: var(--gold); font-weight: 800; }
.flag { font-style: normal; }
.region-btn { justify-content: flex-start; gap: 8px; text-align: left; }
.region-btn small { margin-left: auto; color: var(--muted); }

/* Rivals & friends */
.rivals { display: grid; gap: 6px; }
.rivals .kicker { margin: 6px 0 0; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.rival-row { display: grid; grid-template-columns: 22px 30px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: #ffffff0a; }
.rival-row .pawn-body { width: 28px; } .rival-row .pawn-body img { width: 26px; } .rival-row .pawn-body b { display: none; }
.rival-name { display: grid; min-width: 0; line-height: 1.15; } .rival-name b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rival-name small { font-size: 11px; color: var(--muted); }
.rival-row > b { font: 700 15px var(--display); } .rival-row > b.up { color: #7dffb0; } .rival-row > b.down { color: #ff8d9a; }
.rival-row > b small { display: block; font: 600 10px var(--body); color: var(--muted); }
.btn.tiny { min-height: 30px; padding: 2px 10px; font-size: 12px; }
.icon-btn.small { width: 30px; height: 30px; font-size: 14px; }
.friend-add { margin-top: 6px; }
.lobby-h2h { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lobby-h2h span { padding: 4px 10px; border-radius: 999px; background: #ffffff0d; font-size: 12.5px; color: var(--muted); }
.lobby-h2h b { color: var(--text); }

/* AI Coach */
.coach-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 16px; background: linear-gradient(90deg, #1b5068, #0f3445); box-shadow: inset 0 0 0 1.5px #3fe0c455, var(--shadow); color: var(--text); text-align: left; }
.coach-card.unread { box-shadow: inset 0 0 0 2px #3fe0c4, 0 0 18px #3fe0c455, var(--shadow); }
.coach-ico { font-size: 24px; } .coach-main { display: grid; min-width: 0; } .coach-main b { font: 700 14px var(--display); } .coach-main small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-go { font-size: 12px; font-weight: 700; color: #3fe0c4; white-space: nowrap; }
.coach { display: grid; gap: 8px; }
.coach-head { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.coach-head h3 { margin: 2px 0 0; font: 700 34px/1 var(--display); color: #3fe0c4; } .coach-head h3 small { display: block; font: 600 11px var(--body); color: var(--muted); margin-top: 2px; }
.coach-stats { display: grid; gap: 4px; text-align: right; font-size: 11px; color: var(--muted); } .coach-stats b { display: block; font: 700 16px var(--display); color: var(--text); }
.coach-chart { width: 100%; height: auto; border-radius: 12px; background: #00000030; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: middle; }
.coach h4 { margin: 6px 0 0; font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.coach-best { margin: 0; padding: 8px 12px; border-radius: 12px; background: #ffc53318; color: #ffe9a8; font-weight: 600; }
.coach-mistakes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.coach-mistakes li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #ff405814; }
.coach-mistakes b { font: 700 15px var(--display); color: #ff8d9a; }
.coach-minutes, .coach-tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.coach-minutes li.bad { color: #ffb3bb; }

/* ───────── Home without scrolling (Oct 9 2026, Emile) ─────────
   The card fan becomes a glowing backdrop, the logo shrinks into the top, and the bottom menu folds into two tiles
   (Quests on its own, everything else behind Menu) so a phone sees the whole front page at once. */
.menu button { position: relative; }
.menu button .nav-dot { position: static; margin-left: auto; }
.menu button span small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.home-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(300px, 100%); padding-top: 10px; }
@media (min-width: 700px) { .home-nav { width: min(360px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-nav button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; min-height: 48px; font-size: 13.5px; }
.home-nav .ico { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
.home-nav .tile-quests { --tile: #f29a1c; } .home-nav .tile-menu { --tile: #2f8ff0; }
.home-nav .nav-dot { top: -6px; right: -4px; }
@media (max-width: 520px), (max-height: 760px) {
  .hero { padding: 0 16px; min-height: 132px; display: grid; align-content: end; justify-items: center; overflow: visible; }
  .hero-fan { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) scale(.72); transform-origin: 50% 100%; width: 320px; height: 250px; opacity: .5; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(#000 40%, transparent 100%); mask-image: linear-gradient(#000 40%, transparent 100%); }
  .hero-logo { width: min(250px, 64vw); margin-top: 0; }
  .hero-tag { font-size: 10px; letter-spacing: .2em; margin-top: -2px; }
  .home-actions { gap: 8px; margin-top: 8px; }
  .profile-card { padding: 6px 8px; }
  .battle-btn { min-height: 64px; } .battle-btn .bb-word { font-size: 20px; } .battle-btn .bb-vs { font-size: 15px; } .battle-btn .bb-swords { width: 48px; height: 48px; }
  .difficulty { margin-top: -2px; }
  .seg button { padding: 6px 10px; }
  .seg.hp-seg button { padding: 4px 10px; }
  .home-nav { padding: 8px 16px 2px; margin-top: 0; }
  .credits { margin-top: auto; }
  .credits { padding-top: 2px; }
}
@media (max-height: 700px) and (max-width: 520px) {
  .hero { min-height: 104px; } .hero-logo { width: min(210px, 56vw); } .hero-fan { opacity: .4; transform: translateX(-50%) scale(.58); }
  .home-actions { gap: 6px; margin-top: 6px; }
}

/* ───────── Game screen that fits a phone (Oct 9 2026) ─────────
   Content stacks from the top of the dock (slots right under the prompt), the board gives the dock room on short screens,
   action buttons sit on one row, ability chips are small and centred, previews never spill past the button. */
.dock { align-content: start; }
.board-wrap { --board: clamp(256px, min(calc(100vw - 12px), calc(100dvh - 412px)), 720px); }
@media (max-width: 520px) {
  .prompt { flex-wrap: nowrap; row-gap: 0; }
  .prompt > div:first-child { flex: 1 1 0; min-width: 0; }
  .prompt > :not(:first-child) { margin-left: 0; }
  .prompt h2 { font-size: 15.5px; } .prompt p { font-size: 11.5px; }
  .turn-clock { padding: 3px 7px 3px 3px; font-size: 12px; } .turn-clock i { width: 20px; height: 20px; }
  .threat { padding: 4px 8px; } .threat strong { font-size: 17px; }
  .hand-row { gap: 8px; }
  .reserve { grid-template-columns: repeat(3, minmax(0, 60px)); gap: 6px; }
  .slot-empty { font-size: 18px; border-radius: 8px; }
  .roll-btn { width: 84px; height: 84px; font-size: 13px; }
  .action-row { gap: 6px; justify-content: center; }
  .action-row .btn { min-height: 40px; font-size: 13.5px; padding: 5px 12px; }
  .action-row .btn.with-card { flex: 1 1 170px; min-height: 44px; }
  .action-row .btn.with-card > span:last-child { font-size: 14px; }
  .action-row .btn-ghost, .action-row .btn-save, .action-row .btn-blue:not(.with-card) { flex: 0 1 auto; min-width: 82px; }
  .keep-row .btn { min-height: 42px; font-size: 15px; }
  .ability-bar { padding: 5px 8px 7px; }
  .ability-chips { justify-content: center; gap: 5px; }
  .chip-btn { flex: 0 1 auto; min-height: 32px; padding: 3px 12px; font-size: 12.5px; min-width: 96px; }
  .feed { padding-top: 6px; font-size: 12px; }
  .feed-wrap { gap: 2px; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .board-wrap { --board: clamp(240px, min(calc(100vw - 12px), calc(100dvh - 380px)), 720px); }
  .reserve { grid-template-columns: repeat(3, minmax(0, 52px)); } .roll-btn { width: 74px; height: 74px; }
  .dock { gap: 5px; padding: 6px 8px; }
}

/* ───────── Lobby (Oct 9 2026): narrower centred buttons, a clean health picker ───────── */
.lobby > .btn { width: min(100%, 320px); justify-self: center; }
.lobby > .btn.btn-xl { min-height: 56px; font-size: 18px; }
.lobby .spec-delay, .lobby .stepper, .lobby .hp-row { justify-self: center; }
.lobby .room-code b { width: 38px; height: 48px; font-size: 24px; }
.lobby .roster { width: 100%; }
.hp-row.full { width: min(100%, 360px); }
.hp-row.full .hp-grid { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.hp-grid button { display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; min-width: 0; line-height: 1.05; }
.hp-grid button b { font: 700 14px/1 var(--display); letter-spacing: .01em; }
.hp-grid button small { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: normal; text-align: center; opacity: .75; }
.hp-grid button.on small { opacity: 1; }
.hp-grid button.on b { color: #fff; }
/* Measurable words for fitWords(): one line, clipped, so the font can be shrunk until nothing spills */
.battle-btn { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.battle-btn .bb-word { min-width: 0; overflow: hidden; white-space: nowrap; }
.btn-xl > span, .online-btn > span { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }

/* ───────── Less embossing everywhere (Oct 9 2026, Emile) ───────── */
.btn { box-shadow: inset 0 1px 0 #ffffff33, 0 1.5px 0 color-mix(in srgb, var(--b2) 55%, #000), 0 4px 10px #0004; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff22, 0 0 0 color-mix(in srgb, var(--b2) 55%, #000), 0 2px 6px #0004; }
.battle-btn { box-shadow: inset 0 1px 0 #fff8, inset 0 -2px 0 #c66d0866, 0 2px 0 #7c4204, 0 8px 18px #0006; }
.battle-btn::before { opacity: .55; }
.battle-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #7c4204, 0 4px 10px #0006; }
.home-row .btn .ico { box-shadow: inset 0 1px 0 #ffffff44, 0 1px 3px #0003; }
.home-nav button { box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff10, 0 1.5px 0 #03141b, 0 4px 10px #0004; }
.home-nav button:active { box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff10, 0 0 0 #03141b, 0 2px 5px #0004; }
.home-nav .ico { box-shadow: inset 0 1px 0 #ffffff66, inset 0 -2px 0 #00000030, 0 1px 3px #0006; }
.chip-btn { box-shadow: inset 0 1px 0 #ffffff33, 0 1.5px 0 #0d3f8f, 0 2px 6px #0005; }
.chip-btn.main { box-shadow: inset 0 1px 0 #fff6, 0 1.5px 0 #b8650c, 0 2px 6px #0005; }
.roll-btn { box-shadow: inset 0 1px 0 #fff6, 0 2px 0 #b8650c, 0 6px 14px #0007, 0 0 0 3px #04121a, 0 0 0 5px #ffc53344; }
.seg button.on { box-shadow: inset 0 1px 0 #ffffff33, 0 1px 0 #0d3f8f, 0 2px 6px #0005; }
.room-code b { box-shadow: 0 1.5px 0 #b8650c; }

/* ───────── Shop (Oct 9 2026) ───────── */
.coming-soon { display: grid; gap: 10px; }
.coming-soon .btn { justify-self: center; width: min(100%, 240px); }
.modal-body.shop { display: grid; gap: 8px; }
.modal-body.shop h3 { margin: 6px 0 0; font: 700 11.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.shop-wallet { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #ffc53314; box-shadow: inset 0 0 0 1px #ffc53344; }
.shop-wallet .ico { width: 20px; height: 20px; } .shop-wallet b { font: 700 20px/1 var(--display); color: var(--gold); } .shop-wallet span { color: var(--muted); font-size: 12.5px; }
.shop-wallet .btn.small { margin-left: auto; min-height: 30px; font-size: 12px; padding: 4px 10px; }
.shop-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: #1fae9422; color: #bff3e4; font-size: 13px; }
.shop-grid { display: grid; gap: 6px; }
.shop-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff10; }
.shop-item.on { background: linear-gradient(90deg, #ffc53318, #ffffff06); box-shadow: inset 0 0 0 1.5px #ffc53366; }
.shop-art { width: 46px; height: 46px; border-radius: 10px; background-size: cover; background-position: 50% 15%; box-shadow: 0 2px 6px #0007, inset 0 0 0 1px #ffffff22; }
.shop-swatch { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; font-size: 22px; color: #fff; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sw) 55%, #fff) 0, var(--sw) 55%, color-mix(in srgb, var(--sw) 55%, #000) 100%); box-shadow: 0 2px 6px #0007, inset 0 1px 0 #ffffff66; text-shadow: 0 1px 2px #0008; }
.shop-text { display: grid; min-width: 0; line-height: 1.2; } .shop-text b { font-size: 14px; } .shop-text small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.shop-btn { min-height: 34px; font-size: 13px; padding: 4px 12px; gap: 5px; border-radius: 10px; } .shop-btn .ico { width: 16px; height: 16px; }
.shop-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8ee6c7; padding: 4px 8px; border-radius: 999px; background: #1fae9422; }
/* Worn gear: dice colours (the ivory Blender faces tinted), board themes, pawn auras */
body.dice-ruby .df { filter: sepia(1) saturate(5) hue-rotate(-28deg) brightness(.82) contrast(1.15); }
body.dice-sapphire .df { filter: sepia(1) saturate(4) hue-rotate(175deg) brightness(.85) contrast(1.15); }
body.dice-sapphire .dice-tray.landed .die3d { filter: drop-shadow(0 0 10px #2f95f5aa); }
body.board-night .board { background: linear-gradient(145deg, #3b1f6e, #180a33 40%, #0b0518); box-shadow: inset 0 0 0 2px #a774ff33, 0 14px 40px #000a, 0 0 0 1px #000; }
body.board-night .tile { filter: saturate(.9) brightness(1.05); }
body.board-savanna .board { background: linear-gradient(145deg, #8a5a1e, #4a2d0e 40%, #2a1806); box-shadow: inset 0 0 0 2px #ffc53333, 0 14px 40px #000a, 0 0 0 1px #000; }
body.aura-gold .board-pawn.mine .pawn-body { filter: drop-shadow(0 0 5px #ffc533) drop-shadow(0 0 12px #ffc53399); }
body.aura-violet .board-pawn.mine .pawn-body { filter: drop-shadow(0 0 5px #a774ff) drop-shadow(0 0 12px #a774ff99); }

/* Ability chips on every screen size (Oct 9 2026): small, centred, never stretched across the dock */
.ability-bar { max-width: 460px; justify-self: center; width: 100%; }
.ability-chips { justify-content: center; gap: 6px; }
.chip-btn { flex: 0 1 auto; min-width: 104px; max-width: 200px; min-height: 34px; padding: 4px 14px; justify-items: center; text-align: center; font-size: 13px; border-radius: 10px; }
.chip-btn em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mini-art { background-color: #0a2633; }

/* A hidden reserve card turned face-up when it is played (Oct 9 2026) */
.flip-reveal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 6px; background: radial-gradient(circle, #04121acc, #04121a66 70%, transparent); pointer-events: none; transition: opacity .2s; }
.flip-reveal.out { opacity: 0; }
.fr-card { position: relative; width: 46cqw; max-width: 200px; aspect-ratio: 2 / 3; perspective: 900px; transform-style: preserve-3d; animation: fr-turn .75s cubic-bezier(.3, 1.3, .5, 1) .1s both; }
.fr-back, .fr-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fr-back .hidden-card { width: 100%; height: 100%; }
.fr-face { transform: rotateY(180deg); }
.fr-who { margin: 0; font: 700 13px var(--display); color: var(--pc); text-shadow: 0 1px 2px #000; }
@keyframes fr-turn { 0% { transform: rotateY(0) scale(.85); } 60% { transform: rotateY(190deg) scale(1.06); } 100% { transform: rotateY(180deg) scale(1); } }

/* Profile icon grid (Oct 9 2026): element icons were collapsing to 0 height inside the square tiles */
.avatars button > .avatar-el, .avatars button > .avatar-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar-el .emblem { width: 62%; height: auto; aspect-ratio: 1; }
.avatars .avatar-el { background: radial-gradient(circle at 50% 35%, #ffffff18, transparent 70%); }
.avatars .pawn-body { display: grid; place-items: center; }

/* ───────── Home header = the gamer's profile (Oct 9 2026) ───────── */
.home-head { width: min(440px, 100%); margin: 0 auto; padding: max(8px, env(safe-area-inset-top)) 12px 0; position: relative; z-index: 5; }
.home-head .profile-card { grid-template-columns: 50px minmax(0, 1fr); grid-template-areas: "av name" "av sub"; column-gap: 10px; row-gap: 2px; padding: 6px 10px 6px 6px; }
.home-head .profile-avatar { grid-area: av; width: 50px; height: 50px; }
.home-head .profile-avatar .avatar-art { width: 50px; height: 50px; }
.pc-name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-name input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; color: var(--text); font: 800 17px/1.15 var(--body); padding: 2px 0; outline: none; text-overflow: ellipsis; }
.pc-name input:focus { box-shadow: 0 1.5px 0 var(--gold); }
.pc-name .trophies { flex: none; display: flex; align-items: baseline; gap: 5px; padding: 2px 0; }
.pc-name .trophies b { font-size: 15px; } .pc-name .trophies small { font-size: 10px; }
.pc-sub { grid-area: sub; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pc-sub .xp { flex: 1 1 auto; min-width: 0; }
.pc-sub .wallet { flex: none; gap: 6px; }
.pc-sub .wallet button { min-height: 24px; font-size: 13px; }
.pc-sub .wallet .ico { width: 22px; height: 22px; }
@media (max-width: 380px) { .pc-name .trophies small { display: none; } }

/* ───────── Branded picker (replaces the phone's system list) ───────── */
select.native-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: #00000040; box-shadow: inset 0 0 0 1.5px #ffffff1c; color: var(--text); font: 700 15px var(--body); text-align: left; }
.pick-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn i { font-style: normal; color: var(--gold); }
.pick-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.picker-sheet { position: fixed; inset: 0; z-index: 400; display: grid; place-items: end center; background: #020a0ecc; animation: picker-in .18s ease-out; }
@media (min-width: 700px) { .picker-sheet { place-items: center; } }
.picker-box { width: min(440px, 100%); max-height: 72dvh; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #10384a, #081f2a); box-shadow: 0 -10px 40px #000c, inset 0 0 0 1.5px #ffffff18; }
@media (min-width: 700px) { .picker-box { border-radius: 22px; } }
.picker-head { display: flex; align-items: center; justify-content: space-between; } .picker-head b { font: 700 18px var(--display); }
.picker-search { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: #00000055; box-shadow: inset 0 0 0 1.5px #ffffff1c; color: var(--text); font: 600 15px var(--body); }
.picker-list { overflow-y: auto; display: grid; gap: 4px; align-content: start; overscroll-behavior: contain; }
.picker-list button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: #ffffff08; color: var(--text); font: 700 15px var(--body); text-align: left; }
.picker-list button.on { background: linear-gradient(90deg, #ffc53333, #ffc53311); box-shadow: inset 0 0 0 1.5px #ffc53399; color: var(--gold); }
.picker-list button[hidden] { display: none; }
@keyframes picker-in { from { opacity: 0; } }
.credits-block { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #ffc53314, #ffffff06); box-shadow: inset 0 0 0 1px #ffc53333; text-align: center; }
.credits-block h4 { margin: 0; font: 700 16px var(--display); color: var(--gold); letter-spacing: .04em; }
.credits-block p { margin: 0; display: grid; gap: 2px; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.credits-block .kicker { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.profile-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.profile-items .pi { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border: 0; border-radius: 12px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff12; color: var(--text); }
.profile-items .pi.on { background: linear-gradient(180deg, #ffc53322, #ffffff06); box-shadow: inset 0 0 0 1.5px #ffc53388; }
.profile-items .pi .shop-swatch { width: 40px; height: 40px; font-size: 19px; }
.profile-items .pi b { font-size: 12px; text-align: center; line-height: 1.2; } .profile-items .pi small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.profile-items .pi.on small { color: var(--gold); }
.profile-items .pi:disabled { opacity: 1; }
.link-btn { border: 0; background: none; padding: 0; color: var(--gold); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.chip-btn { align-content: center; }
.lb-verify { display: grid; justify-items: center; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #ffc53318, #ffffff06); box-shadow: inset 0 0 0 1px #ffc53344; text-align: center; }
.lb-verify p { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.lb-verify .btn { min-height: 40px; font-size: 14px; padding: 6px 16px; }

/* ───────── Oct 10 2026 polish for every language ───────── */
/* HUD chips on phones: the gamer tag gets the whole first row, the health number sits beside the bar */
@media (max-width: 520px) {
  .n2 .chip, .n3 .chip, .n4 .chip { grid-template-areas: "av name name" "av bar hp"; align-items: center; row-gap: 4px; }
  .n2 .chip-name, .n3 .chip-name, .n4 .chip-name { font-size: 12.5px; }
  .chip-hp strong { font-size: 13px; }
  .chip-hp .chip-cards i { width: 5px; height: 8px; }
}
/* Prompt text may use two lines instead of being cut */
.prompt p { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-height: 700px) and (max-width: 899px) { .prompt p { display: -webkit-box; } }
/* Leaderboard tabs: four equal cells, one line each, "soon" as a corner tag */
.lb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 14px; background: #00000052; box-shadow: inset 0 1px 3px #0008, inset 0 0 0 1px #ffffff12; }
.lb-tabs button { position: relative; min-width: 0; min-height: 42px; padding: 6px 4px; border: 0; border-radius: 11px; background: none; color: var(--muted); font: 700 13px/1.1 var(--body); white-space: nowrap; }
.lb-tabs button > span { display: block; overflow: hidden; white-space: nowrap; text-align: center; }
.lb-tabs button.on { background: linear-gradient(180deg, #45adff, #1662d8); color: #fff; box-shadow: inset 0 1px 0 #ffffff33, 0 1px 0 #0d3f8f, 0 2px 6px #0005; }
.lb-soon { position: absolute; top: -5px; right: 2px; padding: 1px 5px; border-radius: 6px; background: #8a5cf0; color: #fff; font: 800 8px/1.3 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 3px #0008; pointer-events: none; }
.leaderboard .lb-tabs { margin-top: 4px; }
/* Short buttons never break a word */
.btn, .chip-btn, .seg button, .lb-tabs button, .ladder-scopes button { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.region-btn { display: flex; align-items: center; gap: 6px; } .region-btn span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .region-btn small { flex: none; }
.shop-wallet .btn.small { white-space: nowrap; }
/* Attack / defense tag on small cards */
.game-card .role-tag { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 4; padding: 1px 6px; border-radius: 6px; font: 900 9px/1.35 var(--body); letter-spacing: .08em; color: #fff; white-space: nowrap; box-shadow: 0 1px 3px #000a; pointer-events: none; }
.game-card .role-tag.atk { background: linear-gradient(180deg, #ff5a6e, #c8203a); }
.game-card .role-tag.def { background: linear-gradient(180deg, #45adff, #1662d8); }
.game-card .role-tag.both { background: linear-gradient(90deg, #c8203a 0 50%, #1662d8 50% 100%); }
.game-card.size-sm .role-tag { font-size: 8px; padding: 0 4px; }
.library-grid .game-card .role-tag { top: 3px; }

/* ───────── Whole screen used, content centred (Oct 10 2026) ───────── */
.home { justify-content: center; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.home-nav { margin: 0 auto !important; }
.credits { margin-top: 10px !important; }
:fullscreen body, :fullscreen #app { min-height: 100vh; }

/* ───────── Phones turned sideways: board on the left, everything else on the right ───────── */
@media (orientation: landscape) and (max-height: 560px) {
  .game-screen { height: 100dvh; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 10px; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); overflow: hidden; }
  .game-screen > .stage { display: contents; }
  .game-screen .board-wrap { grid-column: 1; grid-row: 1 / span 3; align-self: center; --board: min(calc(100dvh - 10px), 58vw); width: var(--board); }
  .game-screen > .topbar { grid-column: 2; grid-row: 1; padding: 4px 0 2px; }
  .game-screen > .topbar .icon-btn { width: 36px; height: 36px; }
  .game-screen > .hud { grid-column: 2; grid-row: 2; padding: 2px 0 6px; }
  .game-screen .dock { grid-column: 2; grid-row: 3; --dockw: auto; width: auto; max-width: none; min-height: 0; overflow-y: auto; align-self: stretch; margin-bottom: max(6px, env(safe-area-inset-bottom)); gap: 6px; padding: 8px; }
  .game-screen .roll-btn { width: 72px; height: 72px; font-size: 12px; }
  .game-screen .reserve { grid-template-columns: repeat(3, minmax(0, 58px)); }
  .game-screen .prompt h2 { font-size: 15px; }
  /* Home: profile across the top, logo on the left, buttons on the right */
  .home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "head head" "hero actions" "hero nav" "credits credits"; align-content: center; align-items: center; column-gap: 16px; row-gap: 6px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .home-head { grid-area: head; width: min(560px, 100%); padding-top: 6px; }
  .home .hero { grid-area: hero; min-height: 0; padding: 0; }
  .home .hero-fan { display: none; }
  .home .hero-logo { width: min(240px, 34vw); margin: 0; }
  .home-actions { grid-area: actions; margin: 0; width: 100%; padding: 0; gap: 6px; }
  .home-nav { grid-area: nav; padding: 4px 0 0; }
  .home .credits { grid-area: credits; margin: 0 !important; padding: 2px 0 6px; }
  .battle-btn { min-height: 54px; } .battle-btn .bb-swords { width: 40px; height: 40px; }
  /* Menus and sheets fit the short height */
  dialog#modal { max-height: 96dvh; margin: auto; border-radius: 20px; }
  .sheet-screen .panel { margin-top: 4px; }
  .radar { width: 120px; height: 120px; }
}
/* Queue radar v2 (Oct 10 2026): an SVG scanner, always centred — sweep with a fading trail, blips that light up as the beam passes, a pulse from the centre */
.queue-wait .radar, .queue-wait .radar2 { justify-self: center; }
.radar2 { position: relative; width: min(176px, 46vw); aspect-ratio: 1; margin: 2px auto 4px; filter: drop-shadow(0 8px 22px #000a) drop-shadow(0 0 18px #ffc53322); }
.radar-svg { display: block; width: 100%; height: 100%; }
.radar-beam { transform-origin: 100px 100px; animation: radar-turn 3s linear infinite; }
@keyframes radar-turn { to { transform: rotate(360deg); } }
.radar-svg .ping { fill: #7ee0ff; opacity: 0; animation: ping 3s linear infinite; filter: drop-shadow(0 0 4px #7ee0ff); }
@keyframes ping { 0% { opacity: 0; r: 2px; } 3% { opacity: 1; r: 5px; } 45% { opacity: .35; r: 4px; } 100% { opacity: 0; r: 3px; } }
.radar-svg .pulse { transform-origin: 100px 100px; animation: radar-pulse2 2.4s ease-out infinite; opacity: 0; }
@keyframes radar-pulse2 { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(4.6); opacity: 0; } }
.radar2 .radar-me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); width: 22%; display: grid; place-items: center; filter: drop-shadow(0 0 8px #ffc533aa); }
.radar2 .radar-me .pawn-body { width: 100%; } .radar2 .radar-me .pawn-body img { width: 100%; } .radar2 .radar-me .pawn-body b { display: none; }
@media (prefers-reduced-motion: reduce) { .radar-beam, .radar-svg .ping, .radar-svg .pulse { animation: none; } .radar-svg .ping { opacity: .7; } }
@media (orientation: landscape) and (max-height: 560px) { .radar2 { width: 110px; } }
.game-card .role-tag { top: auto; bottom: 3%; }
.game-card.size-sm .role-tag { bottom: 2%; }
.shop-wallet { flex-wrap: wrap; row-gap: 6px; }
.shop-wallet .btn.small { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.15; }
.shop-item { grid-template-columns: 46px minmax(0, 1fr) auto; }
.modal-body.shop { min-width: 0; overflow-x: hidden; }
.seg.hp-seg button b, .seg.hp-seg button small { white-space: nowrap; }
.lb-tabs button { padding: 6px 2px; }
.acc-actions .btn { white-space: normal; line-height: 1.2; }
@media (max-width: 520px) {
  .prompt h2 { white-space: normal !important; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.12; }
}
@media (max-width: 420px) { .turn-chip b { display: none; } }
@media (orientation: landscape) and (max-height: 560px) {
  .home { row-gap: 4px; }
  .home .ult-soon, .home .credits { display: none; }
  .home-actions { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 5px; }
  .home-actions > * { flex: 1 1 100%; }
  .home-actions > .hp-row, .home-actions > .difficulty { flex: 0 1 auto; }
  .home-actions .battle-btn { min-height: 46px; } .battle-btn .bb-word { font-size: 18px; } .battle-btn .bb-vs { font-size: 14px; } .battle-btn .bb-swords { width: 34px; height: 34px; }
  .home-actions .seg button { padding: 4px 8px; font-size: 12px; } .home-actions .seg.hp-seg button { padding: 2px 8px; }
  .home-actions .online-btn { min-height: 40px; }
  .home-actions .home-row .btn { min-height: 40px; }
  .home-nav button { min-height: 38px; padding: 4px 8px; }
  .home-head .profile-card { padding: 4px 8px 4px 4px; } .home-head .profile-avatar { width: 40px; height: 40px; }
  .home .hero-tag { font-size: 9px; }
  /* queue: radar beside the text */
  .queue .tips, .queue-facts span:nth-child(2) { display: none; }
  .sheet-screen > .topbar { padding-top: 2px; padding-bottom: 2px; }
  .queue { padding: 10px 14px; gap: 6px; }
  .queue .panel-title { font-size: 20px; margin: 0; }
  .queue-wait { grid-template-columns: auto auto; column-gap: 16px; align-items: center; justify-content: center; }
  .queue-wait .radar2 { grid-row: span 3; width: 108px; }
  .queue-title { font-size: 16px; } .queue-timer b { font-size: 24px; }
  .roll-btn b { font-size: 11px; letter-spacing: .02em; }
}
.roll-btn b { display: block; max-width: 86%; overflow: hidden; white-space: nowrap; }
.pc-sub .xp small { white-space: nowrap; font-size: 10.5px; }
/* X buttons everywhere (Oct 10 2026) */
.sheet-screen .panel { position: relative; }
.panel-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; }
.panel-x .ico { width: 18px; height: 18px; }
.victory-card { position: relative; }
.victory-x { position: absolute; top: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; }
.pop-x { position: absolute; top: -12px; right: -12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #0a2633; box-shadow: 0 2px 6px #0009, inset 0 0 0 1.5px #ffffff26; }
.pop-x .ico { width: 14px; height: 14px; }
.panel-title { padding-right: 40px; }

/* ───────── Oct 10 2026: AI Coach on the Victory/Defeat card (a toggle, never pushed onto the home screen) ───────── */
.v-coach-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 10px 7px 14px; border-radius: 14px; background: #0006; box-shadow: inset 0 0 0 1.5px #3fe0c444; cursor: pointer; font: 700 14px var(--display); color: var(--text); }
.v-coach-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.v-coach-toggle i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: #ffffff22; transition: background .2s; }
.v-coach-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #0006; transition: translate .2s; }
.v-coach-toggle input:checked + i { background: #3fe0c4; }
.v-coach-toggle input:checked + i::after { translate: 18px 0; }
.v-coach-toggle input:focus-visible + i { outline: 2px solid #ffc533; outline-offset: 2px; }
.v-body { width: 100%; display: grid; }
.v-body > .v-coach-panel { display: none; }
.v-body.show-coach > .v-rewards { display: none; }
.v-body.show-coach > .v-coach-panel { display: grid; gap: 6px; animation: fade-in .25s; }
.coach-wait { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; color: var(--muted); font-weight: 700; font-size: 13px; }
.coach-wait i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #3fe0c455; border-top-color: #3fe0c4; animation: spin .8s linear infinite; }
.coach-inline { display: grid; gap: 6px; text-align: left; }
.ci-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.ci-acc { font: 700 30px/1 var(--display); color: #3fe0c4; } .ci-acc small { font-size: 16px; }
.ci-head p { margin: 0; font: 600 13px/1.3 var(--body); color: var(--text); }
.coach-inline .coach-chart { max-height: 112px; }
.ci-moments { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ci-moments li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 10px; background: #ff405814; font-size: 12px; line-height: 1.3; }
.ci-moments li.great { background: #ffc53318; }
.ci-moments li b { font: 700 11px var(--display); color: #ff8d9a; white-space: nowrap; }
.ci-moments li.great b { color: #ffd76a; }
.ci-moments li em { font: 700 12px var(--display); font-style: normal; color: #ff8d9a; white-space: nowrap; }
.ci-moments li.great em { color: #ffd76a; }
.ci-tip { margin: 0; padding: 6px 9px; border-radius: 10px; background: #3fe0c414; font-size: 12px; line-height: 1.35; color: #c8fff4; }
.ci-more { justify-self: end; border: 0; background: none; color: #3fe0c4; font: 700 13px var(--display); padding: 2px 4px; cursor: pointer; }
.coach-verdict { margin: 0; padding: 8px 12px; border-radius: 12px; background: #3fe0c414; font-weight: 600; color: #dffcf6; }
.coach-details summary { cursor: pointer; font: 700 13px var(--display); color: var(--muted); padding: 4px 0; }
.menu-emoji { font-size: 20px; line-height: 1; }

/* ───────── Oct 10 2026: home — the card wall covers the whole upper background; the player plate ───────── */
.home { justify-content: flex-start !important; isolation: isolate; }
.home > .home-head { flex: none; }
.home > .hero { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; min-height: 0; position: relative; z-index: 2; }
.home > .home-actions, .home > .home-nav, .home > .credits { position: relative; z-index: 2; }
.home-top { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.home-top > .home-head { flex: none; position: relative; z-index: 3; }
.home-top > .hero { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; min-height: 0; position: relative; z-index: 2; }
.home-wall { position: absolute; inset: 0 0 -24px 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%); }
.home-wall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(56% 40% at 50% 66%, #04121acc, transparent 74%), linear-gradient(#04121a33, #04121a00 30%, #04121a55); }
/* The centre card is about 86 % of the top area's height; the others fan out to the screen edges. */
.wall-card { position: absolute; top: 47%; left: 50%; width: min(50vw, calc(var(--top-h, 420px) * .64), 270px); container-type: inline-size; transform-origin: 50% 150%; filter: saturate(1.05) drop-shadow(0 14px 22px #000c); opacity: .6; }
.wall-card.w0 { transform: translate(-50%, -50%) rotate(-28deg) translateX(-112%) translateY(14%); animation: wall-a 9s ease-in-out infinite; }
.wall-card.w1 { transform: translate(-50%, -50%) rotate(-14deg) translateX(-56%) translateY(3%); animation: wall-b 8s ease-in-out infinite; z-index: 1; }
.wall-card.w2 { transform: translate(-50%, -52%); z-index: 2; opacity: .7; animation: wall-c 7s ease-in-out infinite; }
.wall-card.w3 { transform: translate(-50%, -50%) rotate(14deg) translateX(56%) translateY(3%); animation: wall-b 8.5s ease-in-out infinite reverse; z-index: 1; }
.wall-card.w4 { transform: translate(-50%, -50%) rotate(28deg) translateX(112%) translateY(14%); animation: wall-a 9.5s ease-in-out infinite reverse; }
@keyframes wall-a { 50% { translate: 0 -8px; } }
@keyframes wall-b { 50% { translate: 0 -12px; } }
@keyframes wall-c { 50% { translate: 0 -14px; scale: 1.02; } }
body.lite .wall-card, body.calm .wall-card { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wall-card { animation: none !important; } }
.hero .hero-fan { display: none !important; }
.hero-logo { position: relative; filter: drop-shadow(0 8px 18px #000c); }

.home-head { padding-top: max(10px, env(safe-area-inset-top)) !important; }
.player-plate { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 22px;
  background: linear-gradient(180deg, #0d3446e6, #06202be6); box-shadow: 0 8px 22px #0008, inset 0 1px 0 #ffffff22, inset 0 0 0 1px #ffffff12; backdrop-filter: blur(6px); }
.player-plate::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(120deg, var(--pc), #ffc53388 45%, transparent 75%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .9; }
.pp-avatar { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--pc) 45%, #0b2b38), #06202b); box-shadow: 0 0 0 2.5px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 55%, transparent); display: grid; place-items: center; overflow: visible; cursor: pointer; }
.pp-avatar > :not(.pp-level) { width: 46px !important; height: 46px !important; border-radius: 50%; overflow: hidden; }
.pp-avatar .avatar-art { background-size: cover; background-position: 50% 20%; }
.pp-level { position: absolute; right: -5px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: linear-gradient(180deg, #ffd76a, #f0a21c); color: #2a1600; font: 800 12px/1 var(--body); box-shadow: 0 2px 6px #0008, 0 0 0 2px #06202b; }
.pp-main { display: grid; gap: 5px; min-width: 0; }
.pp-name { width: 100%; min-width: 0; padding: 0; border: 0; background: none; outline: none; color: #fff; font: 800 17px/1.1 var(--body); letter-spacing: .01em; text-overflow: ellipsis; text-shadow: 0 1px 2px #0008; }
.pp-name::placeholder { color: #ffffff88; font-weight: 700; }
.pp-name:focus { box-shadow: 0 2px 0 var(--gold); }
.pp-xp { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pp-track { position: relative; flex: 1 1 auto; height: 6px; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.pp-track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #8b5cff, #c58bff); box-shadow: 0 0 8px #a46bff99; min-width: 6px; }
.pp-xp small { flex: none; font: 700 10.5px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-side { display: grid; justify-items: end; gap: 5px; }
.pp-trophy { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; white-space: nowrap; }
.pp-trophy span { font-size: 14px; } .pp-trophy b { font: 800 14px var(--body); font-variant-numeric: tabular-nums; }
.pp-trophy small { font: 700 11px var(--body); color: var(--gold); margin-left: 2px; }
.pp-wallet { display: flex; gap: 5px; }
.pp-wallet button { display: inline-flex; align-items: center; gap: 4px; min-height: 0 !important; padding: 2px 9px 2px 3px !important; border: 0; border-radius: 99px; background: #00000066 !important; box-shadow: inset 0 0 0 1px #ffffff1f; font: 800 13px var(--body) !important; font-variant-numeric: tabular-nums; }
.pp-wallet button::after, .pp-wallet button::before { content: none !important; display: none !important; }
.pp-wallet .ico { width: 20px !important; height: 20px !important; }
@media (max-width: 370px) { .pp-trophy small { display: none; } .pp-name { font-size: 15.5px; } .pp-avatar { width: 46px; height: 46px; } .pp-avatar > :not(.pp-level) { width: 40px !important; height: 40px !important; } }
@media (orientation: landscape) and (max-height: 520px) {
  .home-top { display: contents; }
  .home-wall { position: absolute; inset: 0 auto 0 0; width: 48%; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
  .wall-card { width: min(17vw, 150px); top: 56%; }
}

.home .hero-tag { position: relative; z-index: 2; padding: 4px 12px; border-radius: 99px; background: #04121ad9; box-shadow: 0 0 18px 8px #04121aa6; }
/* Oct 10 2026: credits fold away behind a small toggle row; when open, small and quiet */
.credits-toggle { margin-top: 2px; border-radius: 12px; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffc53322; }
.credits-toggle summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; cursor: pointer; font: 700 13px var(--display); letter-spacing: .06em; color: var(--gold); }
.credits-toggle summary::-webkit-details-marker { display: none; }
.credits-toggle summary i { width: 8px; height: 8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); rotate: 45deg; translate: 0 -2px; transition: rotate .2s; }
.credits-toggle[open] summary i { rotate: 225deg; translate: 0 2px; }
.credits-list { display: grid; gap: 7px; padding: 2px 14px 12px; text-align: center; }
.credits-list p { margin: 0; display: grid; gap: 1px; font: 600 11.5px/1.45 var(--body); color: #dfe9ec; }
.credits-list p span { font: 700 9px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.credits-list p + p { padding-top: 7px; border-top: 1px solid #ffc5331a; }

/* ═════════ Oct 10 2026: match screen — full screen, a bigger board, a compact dock ═════════
   The board is sized in main.js (sizeBoard → --board). The clock and its 3 lives live on the active player's portrait.
   The battle log is one caption on the board (tap: the full log). Everything stays inside the safe area (notch, gesture bar). */
body[data-screen="game"] { overflow: hidden; }
body[data-screen="game"] .game-screen { height: 100dvh; min-height: 0; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
body[data-screen="game"] .game-screen > .topbar { min-height: 0; padding: 4px 6px 2px; gap: 6px; }
body[data-screen="game"] .game-screen > .topbar .icon-btn { width: 34px; height: 34px; border-radius: 11px; }
body[data-screen="game"] .game-screen > .topbar .icon-btn .ico, body[data-screen="game"] .game-screen > .topbar .icon-btn svg { width: 18px; height: 18px; }
body[data-screen="game"] .game-screen > .topbar .turn-chip { padding: 4px 10px; font-size: 11px; }
body[data-screen="game"] .game-screen > .hud { padding: 2px 6px 4px; gap: 6px; }
body[data-screen="game"] .game-screen > .hud .chip { min-height: 0; padding: 5px 8px 5px 5px; gap: 7px; border-radius: 14px; }
body[data-screen="game"] .game-screen > .hud .chip-avatar { position: relative; width: 36px; height: 36px; flex: none; }
body[data-screen="game"] .game-screen > .hud .chip-name { font-size: 12.5px; }
body[data-screen="game"] .game-screen > .hud .chip-hp strong { font-size: 16px; }
body[data-screen="game"] .stage { gap: 5px; padding: 0 4px max(6px, env(safe-area-inset-bottom)); min-height: 0; }
body[data-screen="game"] .stage .board-wrap { flex: none; }
/* Clock ring on the portrait */
.hud .chip-avatar { overflow: visible !important; }
.chip-avatar .turn-clock { position: absolute; inset: -4px; display: block; pointer-events: none; --p: 1; --cc: #3fe0c4; }
.chip-avatar .turn-clock[hidden] { display: none; }
.chip-avatar .turn-clock.urgent { --cc: #ff4058; }
.chip-avatar .turn-clock .clock-ring { position: absolute; inset: 0; border-radius: 15px; padding: 3px; background: conic-gradient(var(--cc) calc(var(--p) * 360deg), #ffffff1c 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 4px var(--cc)); }
.chip-avatar .turn-clock.urgent .clock-ring { animation: clock-throb .5s ease-in-out infinite alternate; }
.chip-avatar .turn-clock b { position: absolute; right: -7px; top: -6px; min-width: 21px; height: 18px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; background: #06202b; box-shadow: 0 0 0 1.5px var(--cc); color: #fff; font: 800 10.5px/1 var(--body); font-variant-numeric: tabular-nums; }
.chip-avatar .turn-clock .lives { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; display: flex; gap: 2px; padding: 1.5px 3px; border-radius: 99px; background: #06202b; }
.chip-avatar .turn-clock .lives em { width: 5px; height: 5px; border-radius: 50%; background: #ffffff26; }
.chip-avatar .turn-clock .lives em.on { background: #ffc533; box-shadow: 0 0 4px #ffc533aa; }
@keyframes clock-throb { to { filter: drop-shadow(0 0 9px var(--cc)); } }
.dock .turn-clock { display: none !important; }
/* The latest battle-log line, on the board */
.board .board-caption { position: absolute; left: 50%; bottom: calc(100% / 11 + 5px); translate: -50% 0; z-index: 2; max-width: calc(100% * 8.6 / 11); padding: 3px 10px; border: 0; border-radius: 99px; background: #021017c4; box-shadow: inset 0 0 0 1px #ffffff14; color: #d5e6eb; font: 600 10.5px/1.3 var(--body); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
/* Compact dock */
body[data-screen="game"] .dock { flex: 1 1 auto; min-height: 0; width: min(100%, max(var(--board, 100%), 360px)); align-content: start; gap: 6px; padding: 7px 8px 8px; border-radius: 16px; overflow: hidden; }
body[data-screen="game"] .dock .feed-wrap { display: none; }
body[data-screen="game"] .dock.time-short { box-shadow: inset 0 0 0 2px #ff4058aa, 0 0 18px #ff405844, var(--shadow); }
body[data-screen="game"] .dock .prompt { min-height: 0; gap: 8px; align-items: center; }
body[data-screen="game"] .dock .prompt h2 { font-size: 15px; line-height: 1.15; }
body[data-screen="game"] .dock .prompt p { margin: 1px 0 0; font-size: 11.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-screen="game"] .dock .prompt .threat { padding: 3px 10px; font-size: 15px; }
body[data-screen="game"] .dock .hand-row { gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, minmax(0, min(58px, 15.5vw))); gap: 6px; }
body[data-screen="game"] .dock .roll-btn { width: 64px; height: 64px; }
body[data-screen="game"] .dock .roll-btn .roll-face .ico, body[data-screen="game"] .dock .roll-btn .roll-face svg { width: 24px; height: 24px; }
body[data-screen="game"] .dock .action-row { gap: 6px; }
body[data-screen="game"] .dock .action-row .btn { min-height: 40px; padding: 4px 12px; font-size: 14px; border-radius: 12px; }
body[data-screen="game"] .dock .btn.with-card { gap: 8px; padding: 4px 10px 4px 5px; text-align: left; }
body[data-screen="game"] .dock .btn.with-card .mini-art { width: 30px; height: 30px; border-radius: 8px; flex: none; }
body[data-screen="game"] .dock .btn.with-card small { font-size: 10px; }
body[data-screen="game"] .dock .btn.with-card em { font-size: 10.5px; }
body[data-screen="game"] .dock .swap-row { gap: 6px; }
body[data-screen="game"] .dock .swap-row .kicker { font-size: 9.5px; }
body[data-screen="game"] .dock .swap-btn { min-height: 38px; padding: 3px 10px 3px 4px; }
body[data-screen="game"] .dock .ability-bar { padding: 5px; gap: 6px; }
body[data-screen="game"] .dock .ability-bar .mini-art { width: 34px; height: 34px; }
body[data-screen="game"] .dock .chip-btn { min-height: 34px; padding: 3px 9px; font-size: 12px; }
body[data-screen="game"] .dock .combo-row .btn { min-height: 38px; }
body[data-screen="game"] .dock .waiting { padding: 2px 0; font-size: 12px; }
@media (max-height: 680px) {
  body[data-screen="game"] .dock .prompt p { -webkit-line-clamp: 1; }
  body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, minmax(0, min(50px, 14vw))); }
  body[data-screen="game"] .dock .roll-btn { width: 56px; height: 56px; }
  body[data-screen="game"] .dock .action-row .btn { min-height: 36px; font-size: 13px; }
  body[data-screen="game"] .game-screen > .hud .chip-avatar { width: 32px; height: 32px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  body[data-screen="game"] .game-screen { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  body[data-screen="game"] .game-screen .board-wrap { width: var(--board); }
  body[data-screen="game"] .dock { width: auto; margin-bottom: max(6px, env(safe-area-inset-bottom)); }
}
/* Swap from the reserve card itself (keep phase) */
.reserve-slot.swappable .game-card { outline: 2px solid #2f9bffcc; outline-offset: 1px; border-radius: 9px; }
.swap-on-card { position: absolute; inset: auto 0 -4px 0; margin: 0 auto; width: fit-content; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #4fb4ff, #1662d8); box-shadow: 0 3px 8px #0009, inset 0 1px 0 #ffffff55; color: #fff; font: 800 11px var(--body); z-index: 3; cursor: pointer; animation: swap-hint 1.6s ease-in-out infinite; }
.swap-on-card span { font-size: 13px; line-height: 1; } .swap-on-card small { font-size: 10px; }
@keyframes swap-hint { 50% { translate: 0 -2px; } }
/* One line of actions; the card button takes the room, the others stay compact */
body[data-screen="game"] .dock .action-row { flex-wrap: nowrap; }
body[data-screen="game"] .dock .action-row .btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
body[data-screen="game"] .dock .action-row .btn.with-card { flex: 1 1 auto; }
body[data-screen="game"] .dock .action-row .btn:only-child, body[data-screen="game"] .dock .keep-row .btn-gold { flex: 1 1 auto; }
body[data-screen="game"] .dock .keep-row .btn { min-height: 40px; font-size: 15px; }
body[data-screen="game"] .dock .action-row .btn-save, body[data-screen="game"] .dock .action-row .btn-ghost { min-width: 72px; padding: 4px 10px; }
/* A card in the centre tells the story already: no caption over it */
.board:has(.center-card, .center-stack, .center-pick, .center-winner) .board-caption { display: none; }
/* Tall phones: the board is as wide as the screen, so the extra height goes to bigger reserve cards and buttons */
body[data-screen="game"] .dock { align-content: center; }
@media (min-height: 780px) and (orientation: portrait) {
  body[data-screen="game"] .dock { gap: 9px; padding: 10px; }
  body[data-screen="game"] .dock .prompt h2 { font-size: 17px; }
  body[data-screen="game"] .dock .prompt p { font-size: 12.5px; }
  body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, minmax(0, min(78px, 20vw))); gap: 8px; }
  body[data-screen="game"] .dock .roll-btn { width: 80px; height: 80px; }
  body[data-screen="game"] .dock .action-row .btn, body[data-screen="game"] .dock .keep-row .btn { min-height: 48px; font-size: 15px; }
  body[data-screen="game"] .dock .btn.with-card .mini-art { width: 34px; height: 40px; }
  body[data-screen="game"] .game-screen > .hud .chip-avatar { width: 40px; height: 40px; }
  body[data-screen="game"] .game-screen > .hud .chip { padding: 7px 10px 7px 7px; }
}
@media (min-height: 860px) and (orientation: portrait) {
  body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, minmax(0, min(88px, 22vw))); }
  body[data-screen="game"] .dock .roll-btn { width: 88px; height: 88px; }
  body[data-screen="game"] .game-screen > .topbar { padding-top: 8px; padding-bottom: 4px; }
}
/* Stable dock: the prompt and the reserve stay put at the top; the buttons sit at the bottom, under the thumb */
body[data-screen="game"] .dock { display: flex; flex-direction: column; justify-content: flex-start; }
body[data-screen="game"] .dock > * { flex: none; }
body[data-screen="game"] .dock > .hand-row { margin-bottom: auto; }
/* Tall phones: a taller board (the grid stretches; the centre gets the extra room) */
body[data-screen="game"] .board-wrap { height: var(--board-h, var(--board)); }
body[data-screen="game"] .board-wrap .board { aspect-ratio: auto; height: 100%; }
body[data-screen="game"] .board-wrap.tall .tile small { top: 3px; }
/* Clock badge sits above the portrait's left corner, clear of the name */
.chip-avatar .turn-clock b { right: auto; left: -8px; top: -8px; }
/* ───────── Oct 10 2026: dice-off for who starts, and the "waiting for your opponent" screen ───────── */
.diceoff, .hold-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 45%, #04121acc, #000e); animation: fade-in .25s; }
.diceoff.leaving { animation: fade-out .22s forwards; }
@keyframes fade-out { to { opacity: 0; } }
.do-card, .ho-card { width: min(360px, 100%); display: grid; justify-items: center; gap: 10px; padding: 18px 16px 16px; border-radius: 24px; background: linear-gradient(180deg, #15475d, #0a2532); box-shadow: inset 0 0 0 2px #ffc53355, 0 20px 50px #000c; text-align: center; animation: pop-in .4s cubic-bezier(.2, 1.4, .4, 1); }
.do-card .kicker { font: 700 22px var(--display); letter-spacing: .06em; color: var(--gold); }
.do-rows { width: 100%; display: grid; gap: 8px; }
.do-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 34px; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 16px; background: #0006; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc) 40%, transparent); transition: transform .3s, box-shadow .3s; }
.do-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 800 14px var(--body); }
.do-pawn .pawn-body img { width: 30px; } .do-pawn .pawn-body b { display: none; }
.do-row .dice-tray { gap: 6px; } .do-row .die3d { --s: 30px; }
.do-total { font: 700 22px var(--display); font-style: normal; color: #fff; text-align: right; }
.do-row.win { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 55%, transparent); }
.do-row.win .do-total { color: var(--gold); }
.do-result { margin: 0; min-height: 1.4em; font: 700 18px var(--display); }
.ho-card b { font: 700 18px var(--display); } .ho-card small { font-weight: 700; color: var(--muted); }
.ho-card .ho-left { font: 700 26px var(--display); font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
.ho-card .radar2.small { width: 84px; height: 84px; }
/* ───────── Oct 10 2026: Ranked — tier badges, the Casual / Ranked choice, the end-screen rank ───────── */
.tier-badge { flex: none; display: inline-block; vertical-align: middle; filter: drop-shadow(0 3px 6px #0008); }
.tier-badge.placing { width: var(--s); height: calc(var(--s) * 1.12); display: inline-grid; place-items: center; clip-path: polygon(50% 0, 100% 14%, 100% 52%, 50% 100%, 0 52%, 0 14%); background: linear-gradient(180deg, #4f6772, #22343c); color: #fff; font: 800 calc(var(--s) * .5) var(--body); }
.online-pick { display: grid; gap: 10px; }
.op-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border: 0; border-radius: 18px; text-align: left; color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1.5px #ffffff1c, 0 6px 16px #0006; }
.op-tile.casual { background: linear-gradient(135deg, #1f6fd8, #0f3d7a); }
.op-tile.ranked { background: linear-gradient(135deg, #b8780c, #5a2a08); box-shadow: inset 0 0 0 1.5px #ffd76a66, 0 6px 16px #0006; }
.op-tile.ranked.locked { filter: saturate(.55) brightness(.85); }
.op-tile .op-ico { width: 48px; display: grid; place-items: center; } .op-tile .op-ico .ico { width: 38px; height: 38px; }
.op-text { display: grid; gap: 3px; min-width: 0; }
.op-text b { font: 700 22px/1 var(--display); letter-spacing: .03em; }
.op-text small { font: 600 12.5px/1.3 var(--body); color: #ffffffd9; }
.op-text .op-season { font: 700 11.5px var(--body); font-style: normal; color: #ffe9a8; }
.op-lock { position: absolute; top: 10px; right: 12px; font-size: 18px; }
.q-online { font: 700 13px var(--body); color: var(--muted); }
.q-rank { display: inline-flex; align-items: center; gap: 6px; }
.v-ranked { width: 100%; min-height: 0; }
.vr-note { margin: 0; padding: 7px 10px; border-radius: 12px; background: #ffffff0d; font-size: 12px; color: var(--muted); }
.vr-reveal, .vr-delta { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 10px; border-radius: 14px; background: #0006; }
.vr-reveal { animation: tier-pop .8s cubic-bezier(.2, 1.6, .4, 1); box-shadow: inset 0 0 0 1.5px #ffd76a88, 0 0 24px #ffc53344; }
.vr-reveal span, .vr-delta span { display: grid; text-align: left; }
.vr-reveal small { font: 800 10px var(--body); letter-spacing: .16em; color: var(--gold); } .vr-reveal b { font: 700 22px/1.05 var(--display); } .vr-reveal em { font: 700 12px var(--body); font-style: normal; color: var(--muted); }
.vr-delta b { font: 700 24px/1 var(--display); } .vr-delta.up b { color: #3fe08a; } .vr-delta.down b { color: #ff8d9a; }
.vr-delta small { font: 700 12px var(--body); color: var(--muted); }
.vr-delta.promoted { box-shadow: inset 0 0 0 1.5px #3fe08a88, 0 0 22px #3fe08a33; } .vr-delta.promoted .tier-badge { animation: tier-pop .8s cubic-bezier(.2, 1.6, .4, 1); }
.vr-delta.demoted .tier-badge { animation: tier-drop .7s ease-out; }
.vr-placing { display: grid; justify-items: center; gap: 3px; padding: 6px; border-radius: 14px; background: #0006; }
.vr-placing b { font: 700 16px var(--display); } .vr-placing small { font-size: 11px; color: var(--muted); }
.vr-pips { display: flex; gap: 5px; } .vr-pips i { width: 12px; height: 12px; border-radius: 50%; background: #ffffff1f; } .vr-pips i.on { background: var(--gold); box-shadow: 0 0 6px #ffc533aa; }
@keyframes tier-pop { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.18) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes tier-drop { 0% { transform: translateY(-10px); opacity: .3; } 100% { transform: none; } }
.season-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.season-badges .sb { display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 8px 10px; border-radius: 12px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff12; text-align: center; }
.season-badges .sb.now { box-shadow: inset 0 0 0 1.5px #ffc53366; }
.season-badges .sb b { font: 700 12px var(--body); } .season-badges .sb small { font-size: 10.5px; color: var(--muted); }
.lb-name small .tier-badge { vertical-align: -2px; }
/* Oct 10 2026: Mute / Report */
.chat-players { justify-self: stretch; padding: 7px 10px; border: 0; border-radius: 10px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff1a; color: var(--text); font: 700 12.5px var(--body); text-align: left; cursor: pointer; }
.players-sheet, .report-sheet { display: grid; gap: 8px; }
.ps-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: #ffffff08; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent); }
.ps-row .pawn-body img { width: 26px; } .ps-row .pawn-body b { display: none; }
.ps-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px var(--body); }
.ps-row .btn { min-height: 34px; padding: 4px 10px; font-size: 12.5px; }
.ps-mute.on { box-shadow: inset 0 0 0 1.5px #ffc53388; color: var(--gold); }
.ps-report { color: #ff8d9a; }
.rs-reason { justify-content: flex-start; min-height: 42px; }
/* Desktop (two columns: board | dock) keeps its own layout */
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock { width: var(--dockw, 400px); display: grid; flex: none; align-content: start; }
  body[data-screen="game"] .dock > .hand-row { margin-bottom: 0; }
  body[data-screen="game"] .board-wrap { height: auto; }
  body[data-screen="game"] .board-wrap .board { aspect-ratio: 1; height: auto; }
  body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, 1fr); }
  body[data-screen="game"] .dock .roll-btn { width: 110px; height: 110px; }
  body[data-screen="game"] .dock .action-row { flex-wrap: wrap; }
  body[data-screen="game"] .dock .hand-row { grid-template-columns: 1fr; justify-items: center; }
  body[data-screen="game"] .dock .prompt h2 { font-size: 22px; }
  body[data-screen="game"] .board-wrap { --board: clamp(420px, min(calc(100dvh - 130px), calc(100vw - 470px)), 820px); }
}
/* Roll label fits the smaller button in every language (LANCER, ROLAR, TIRAR, 掷骰) */
body[data-screen="game"] .dock .roll-btn b { font-size: 9px; letter-spacing: -.01em; max-width: 96%; overflow: visible; }
@media (min-height: 780px) and (orientation: portrait) { body[data-screen="game"] .dock .roll-btn b { font-size: 11.5px; } }
@media (min-width: 900px) and (min-height: 561px) { body[data-screen="game"] .dock .roll-btn b { font-size: 15px; } }
/* Oct 10 2026: the end card fits the screen — reward lines in two columns, a smaller hero on short screens */
.victory .victory-card { gap: 6px; padding: 24px 16px 16px; }
.victory .rewards { gap: 5px; margin-bottom: 2px; }
.victory .rewards ul, .victory .wallet-lines { grid-template-columns: 1fr 1fr; gap: 4px; }
.victory .rewards li, .victory .wallet-lines li { padding: 4px 8px; font-size: 11.5px; gap: 6px; min-width: 0; }
.victory .rewards li span, .victory .wallet-lines li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.victory .rewards li b.cur .ico, .victory .wallet-lines b.cur .ico { width: 15px; height: 15px; margin: -2px 0; }
.victory .reward-total { padding: 2px 0; font-size: 16px; }
.victory .recap { padding: 7px 10px; gap: 4px; font-size: 12px; }
.victory .victory-card .kicker { font-size: 30px; }
.victory .v-persona { width: 120px; margin: -18px 0 -12px; }
@media (max-height: 760px) {
  .victory .v-persona { width: 84px; margin: -16px 0 -10px; }
  .victory .victory-card .kicker { font-size: 26px; }
  .victory .victory-card h2 { font-size: 20px; }
  .victory .victory-card > p { margin-bottom: 2px; font-size: 12px; }
}
.victory .rewards li b, .victory .wallet-lines li b { flex: none; white-space: nowrap; }
.victory .new-badge { padding: 6px 10px; font-size: 12px; }
/* Header, toggle and Continue always on screen; only the middle (rewards / analysis) gives way on very short phones */
.victory .victory-card { display: flex; flex-direction: column; align-items: center; overflow: hidden; max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); }
.victory .victory-card > * { flex: none; }
.victory .victory-card > .rays { position: absolute; }
.victory .v-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.victory .ci-moments li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 700px) { .victory .coach-inline .coach-chart { max-height: 84px; } .victory .recap { display: none; } }
/* Oct 10 2026 (v14.1): name taken, fresh start, season reward, news consent */
.name-taken, .reset-notice, .season-reward { display: grid; gap: 10px; }
.name-sugg { display: flex; flex-wrap: wrap; gap: 6px; } .name-sugg .btn { min-height: 38px; padding: 4px 12px; font-size: 14px; }
.reset-notice, .season-reward { justify-items: center; text-align: center; }
.reset-notice .kicker, .season-reward .kicker { font: 700 18px var(--display); color: var(--gold); letter-spacing: .05em; }
.sr-gems { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; background: #0006; font: 700 26px var(--display); color: #8ff3ec; }
.sr-gems .ico { width: 30px; height: 30px; }
.news-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.news-opt input { margin-top: 2px; flex: none; }
.news-toggle { margin-top: 8px; }
/* Gems and Hela a touch smaller (Emile, Oct 10) */
.pp-wallet .ico { width: 17px !important; height: 17px !important; }
.pp-wallet button { font-size: 12px !important; padding: 2px 8px 2px 3px !important; gap: 3px; }
.wallet .ico { width: 16px; height: 16px; }

/* ═════════ v14.1 layout fixes (Oct 10 2026) ═════════ */
/* Board caption: the text clamps to two clean lines (no half-visible third line), a little wider */
.board .board-caption { display: block; max-width: calc(100% * 9.2 / 11); padding: 4px 12px; overflow: visible; }
.board .board-caption > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board:has(.flip-reveal) .board-caption { display: none; }
/* "ROLL / LANCER / LANZAR / LANÇAR / 掷骰" always fits the small round button */
body[data-screen="game"] .dock .roll-btn b { font-size: 9.5px; letter-spacing: .01em; max-width: 92%; }
@media (min-height: 780px) and (orientation: portrait) { body[data-screen="game"] .dock .roll-btn b { font-size: 11px; } }
/* The menu never runs past the bottom of the screen */
dialog#modal.menu-modal { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 66px); }
@media (orientation: landscape) and (max-height: 560px) {
  dialog#modal.menu-modal { margin-top: calc(env(safe-area-inset-top, 0px) + 8px); max-height: calc(100dvh - 16px); width: min(560px, calc(100% - 20px)); }
  dialog#modal.menu-modal .modal-body.menu { grid-template-columns: 1fr 1fr; gap: 6px; }
  dialog#modal.menu-modal .menu button { min-height: 44px; }
  /* Phone sideways: the sheet (Party, Friends) keeps its title bar in view and scrolls inside */
  .sheet-screen { height: 100dvh; min-height: 0; overflow: hidden; }
  .sheet-screen .panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: max(6px, env(safe-area-inset-bottom)); }
}
.library-grid .game-card .role-tag { top: auto; }
@media (max-height: 680px) { body[data-screen="game"] .dock .roll-btn b { font-size: 8.5px; letter-spacing: 0; } }
/* Sheets never grow wider than the screen: long words shrink to fit instead (FR "CRÉER UNE SALLE", 360 px phones) */
.panel { grid-template-columns: minmax(0, 1fr); }
.panel > * { min-width: 0; }
.panel-title { font-size: clamp(20px, 6.6vw, 26px); overflow-wrap: anywhere; }
.board-pawn.edge-r .pawn-body b { right: auto; left: -14%; } /* the number stays on the board on the right-hand column */

/* ═════════ v14.2 (Oct 11 2026): dock buttons never spill out — any number of options, any language ═════════ */
body[data-screen="game"] .dock .action-row .btn, body[data-screen="game"] .dock .combo-row .btn { overflow: hidden; min-width: 0; }
.btn .bt { display: grid; min-width: 0; line-height: 1.12; text-align: left; }
.btn .bt > * { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.btn .bt b { font-weight: 800; }
.btn .bt em { font-style: normal; }
.btn .bl { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-screen="game"] .dock .action-row .btn.with-card { flex: 1 1 0; }
body[data-screen="game"] .dock .action-row .btn.with-card .bt b { font-size: 13px; }
/* three or more choices: an even grid, smaller words, still no scrolling */
body[data-screen="game"] .dock .action-row.many { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body[data-screen="game"] .dock .action-row.many[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-screen="game"] .dock .action-row.many .btn { min-height: 40px; min-width: 0 !important; padding: 3px 6px 3px 3px; gap: 5px; font-size: 12px; justify-content: flex-start; }
body[data-screen="game"] .dock .action-row.many .btn:not(.with-card) { justify-content: center; }
body[data-screen="game"] .dock .action-row.many .btn.with-card .mini-art { width: 22px; height: 30px; border-radius: 6px; }
body[data-screen="game"] .dock .action-row.many .btn.with-card small { font-size: 9px; }
body[data-screen="game"] .dock .action-row.many .btn.with-card .bt b { font-size: 11.5px; }
body[data-screen="game"] .dock .action-row.many .btn.with-card em { font-size: 9px; }
/* combo: Clear and ⇄ stay small, Unleash takes the rest of the line — always visible */
body[data-screen="game"] .dock .combo-row { display: flex; flex-wrap: nowrap; gap: 6px; }
body[data-screen="game"] .dock .combo-row .btn-ghost { flex: 0 0 auto; min-width: 54px; padding: 4px 10px; font-size: 13px; }
body[data-screen="game"] .dock .combo-row .btn-gold { flex: 1 1 0; justify-content: center; padding: 4px 10px; }
body[data-screen="game"] .dock .combo-row .btn-gold .bt { text-align: center; }
body[data-screen="game"] .dock .combo-row .btn-gold .bt b { font-size: 14px; }
body[data-screen="game"] .dock .combo-row .btn-gold .bt em { font-size: 10px; }
/* ability chips (Black Owl, Bakame…) shrink instead of spilling */
body[data-screen="game"] .dock .ability-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
body[data-screen="game"] .dock .chip-btn { min-width: 0; max-width: 100%; overflow: hidden; }
body[data-screen="game"] .dock .chip-btn > span, body[data-screen="game"] .dock .chip-btn > em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the turn clock's seconds sit centred above the portrait (they were half off the screen on the left) */
.chip-avatar .turn-clock b { left: 50%; right: auto; top: -11px; translate: -50% 0; }
/* someone's reserve: a compact window, never the whole screen */
dialog#modal.reserve-modal { width: min(440px, calc(100% - 24px)); margin: auto; border-radius: 20px; max-height: min(86dvh, 640px); }
@media (orientation: landscape) and (max-height: 560px) { dialog#modal.reserve-modal { width: min(460px, 70vw); max-height: 88dvh; } dialog#modal.reserve-modal .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
dialog#modal.reserve-modal .modal-body { padding-bottom: 14px; }
/* Victory: the crown floats above the head, never on the face */
.victory-card .v-crown { margin-bottom: -2px; width: 54px; height: 54px; }
.victory .v-persona { margin-top: -4px; }
/* card library: the ATK/DEF tags scroll under the sticky tabs, not over them */
.library-grid .game-card .role-tag { z-index: 1; }
.library .lib-controls { z-index: 6; } .modal-head { z-index: 7; }
/* crowded rows: label on up to two lines (never cut), the card name comes from the picture */
body[data-screen="game"] .dock .action-row.many .btn.with-card small { display: none; }
body[data-screen="game"] .dock .action-row.many .btn .bt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.05; text-overflow: clip; }
body[data-screen="game"] .dock .action-row.many .btn .bl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05; text-overflow: clip; font-size: 12px; }
body[data-screen="game"] .dock .action-row.many .btn.with-card em { font-size: 9.5px; text-overflow: clip; }
/* four or more choices: the dock tightens (no help line, smaller reserve and Roll) so every button stays on screen */
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .prompt p { display: none; }
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .reserve { grid-template-columns: repeat(3, minmax(0, min(46px, 13vw))); gap: 5px; }
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn { width: 52px; height: 52px; }
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) { gap: 5px; padding-top: 6px; padding-bottom: 6px; }
/* Lightning card: the bolt */
.fx-lightning { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.fx-lightning polyline { fill: none; stroke: #f4fbff; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.fx-lightning .branch polyline { stroke-width: 2; opacity: .85; }
.fx-lightning .bolts { filter: drop-shadow(0 0 6px #8fd3ff) drop-shadow(0 0 18px #4fa8ff); }
.fx-lightning.out { opacity: 0; transition: opacity .3s; }
@media (max-height: 700px) {
  body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .reserve { grid-template-columns: repeat(3, minmax(0, min(38px, 11vw))); }
  body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn { width: 46px; height: 46px; }
  body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .prompt h2 { font-size: 14px; }
  body[data-screen="game"] .dock .action-row.many:not([data-n="3"]) .btn { min-height: 35px; padding-block: 2px; }
  body[data-screen="game"] .dock .action-row.many:not([data-n="3"]) .btn.with-card .mini-art { width: 18px; height: 26px; }
}
/* Match history (Settings) */
.mh-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mh-list button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 12px; background: #ffffff0b; color: var(--text); text-align: left; cursor: pointer; }
.mh-res { font: 800 11px var(--body); letter-spacing: .04em; padding: 4px 8px; border-radius: 8px; text-transform: uppercase; }
.mh-res.won { background: #3ee07a26; color: #6bf09a; } .mh-res.lost { background: #ff405826; color: #ff8d9a; }
.mh-main { display: grid; min-width: 0; } .mh-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mh-main small { color: var(--muted); font-size: 11.5px; }
.mh-acc { font: 700 20px var(--display); color: var(--gold); } .mh-acc small { font-size: 11px; }
/* AI Coach: the 2D replay */
.coach-replay { margin: 8px 0 12px; border-radius: 16px; background: linear-gradient(180deg, #0b2a37, #061a23); box-shadow: inset 0 0 0 1px #ffffff14; padding: 8px; }
.cr-stage { position: relative; width: min(100%, 300px); margin: 0 auto; aspect-ratio: 1; }
.cr-board { width: 100%; height: 100%; display: block; }
.cr-logo { font: 700 13px var(--display); fill: #ffffff22; letter-spacing: .05em; }
.cr-pawn text { font: 800 8px var(--body); fill: #04121a; }
.cr-hud { position: absolute; left: 13%; right: 13%; top: 13%; display: grid; gap: 5px; }
.cr-hp b { display: block; font: 700 10.5px var(--body); color: #dbeef3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-hp i { display: block; height: 6px; border-radius: 9px; background: #ffffff1a; overflow: hidden; }
.cr-hp i span { display: block; height: 100%; background: var(--pc, #3ee07a); transition: width .1s linear; }
.cr-card { position: absolute; left: 50%; top: 58%; translate: -50% -50%; display: grid; justify-items: center; gap: 3px; opacity: 0; scale: .8; transition: opacity .2s, scale .2s; }
.cr-card.on { opacity: 1; scale: 1; }
.cr-card span { width: 54px; height: 72px; border-radius: 8px; background: center / cover; box-shadow: 0 6px 16px #000a, 0 0 0 2px #ffc53388; }
.cr-card b { font: 700 10px var(--body); color: #fff; text-shadow: 0 1px 3px #000; }
.cr-turn { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; font: 700 11px var(--display); color: var(--gold); letter-spacing: .06em; }
.cr-pop { position: absolute; left: 8%; right: 8%; top: 36%; padding: 8px 10px; border-radius: 12px; background: #04121af0; box-shadow: 0 8px 24px #000c, inset 0 0 0 1.5px var(--cc, #ffc533); display: grid; gap: 2px; animation: cr-pop .25s ease-out; }
.cr-pop.mistake { --cc: #ff4058; } .cr-pop.great { --cc: #ffc533; }
.cr-pop b { font: 800 12px var(--body); color: var(--cc); } .cr-pop span { font-size: 11.5px; line-height: 1.3; color: #e6f1f5; }
@keyframes cr-pop { from { opacity: 0; translate: 0 8px; } }
.cr-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cr-controls .icon-btn { width: 36px; height: 36px; flex: none; font-size: 14px; }
.cr-scrub { flex: 1; accent-color: var(--gold); }
.cr-speed { flex: none; min-width: 44px; height: 32px; border: 0; border-radius: 10px; background: #ffffff12; color: var(--text); font: 800 13px var(--body); }
body[data-screen="game"] .dock .action-row .btn.with-card .bt { line-height: 1.08; }
body[data-screen="game"] .dock .action-row .btn.with-card { min-height: 40px; padding-block: 3px; }

/* v14.2: the dock tightens itself when a button would leave the screen (fitDock in main.js) */
body[data-screen="game"] .dock.tight .prompt p { display: none; }
body[data-screen="game"] .dock.tight { gap: 5px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
body[data-screen="game"] .dock.tighter .reserve { grid-template-columns: repeat(3, minmax(0, min(40px, 11vw))); gap: 4px; }
body[data-screen="game"] .dock.tighter .roll-btn { width: 50px; height: 50px; }
body[data-screen="game"] .dock.tighter .action-row .btn { min-height: 34px; padding-block: 2px; }
body[data-screen="game"] .dock.tighter .prompt h2 { font-size: 14px; }
/* a small Roll button keeps its whole word */
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn b,
body[data-screen="game"] .dock.tighter .roll-btn b { font-size: 7.5px; letter-spacing: -.02em; max-width: 100%; overflow: visible; }
/* the word sits low in a round button, where the circle is narrower: keep it inside that chord, every language */
body[data-screen="game"] .dock .roll-btn b, body[data-screen="game"] .dock.tighter .roll-btn b,
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn b { max-width: 76%; overflow: hidden; white-space: nowrap; text-overflow: clip; }
/* victory rewards: long names (every language) wrap to a second line instead of being cut with "…" */
.victory .rewards li, .victory .wallet-lines li { align-items: center; }
.victory .rewards li span, .victory .wallet-lines li span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; line-height: 1.12; overflow-wrap: break-word; hyphens: auto; }
.victory .new-badge b, .victory .new-badge small { white-space: normal; }
/* the hint line may use two lines on small phones too; if it still does not fit whole, fitDock hides it */
@media (max-height: 680px) { body[data-screen="game"] .dock .prompt p { -webkit-line-clamp: 2; } }

/* ───────── v14.3: smaller Roll, and the "Just played" slot on its right ───────── */
body[data-screen="game"] .dock .hand-row { grid-template-columns: minmax(0, 1fr) auto auto; }
body[data-screen="game"] .dock .roll-btn { width: 54px; height: 54px; }
body[data-screen="game"] .dock .roll-btn .roll-face .ico, body[data-screen="game"] .dock .roll-btn .roll-face svg { width: 20px; height: 20px; }
body[data-screen="game"] .dock .roll-btn b { font-size: 8.5px; }
@media (max-height: 680px) { body[data-screen="game"] .dock .roll-btn { width: 48px; height: 48px; } body[data-screen="game"] .dock .roll-btn .roll-face svg { width: 18px; height: 18px; } }
@media (min-height: 780px) and (orientation: portrait) { body[data-screen="game"] .dock .roll-btn { width: 64px; height: 64px; } body[data-screen="game"] .dock .roll-btn .roll-face svg { width: 23px; height: 23px; } body[data-screen="game"] .dock .roll-btn b { font-size: 10px; } }
@media (min-height: 860px) and (orientation: portrait) { body[data-screen="game"] .dock .roll-btn { width: 70px; height: 70px; } }
@media (min-width: 900px) and (min-height: 561px) { body[data-screen="game"] .dock .roll-btn { width: 86px; height: 86px; } body[data-screen="game"] .dock .roll-btn .roll-face svg { width: 30px; height: 30px; } body[data-screen="game"] .dock .roll-btn b { font-size: 12.5px; } }
body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn, body[data-screen="game"] .dock.tighter .roll-btn { width: 46px; height: 46px; }
@media (max-height: 700px) { body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn { width: 42px; height: 42px; } }

.just-played { position: relative; width: var(--jpw, 60px); align-self: center; margin-left: 4px; }
.just-played::before { content: ''; position: absolute; left: -7px; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(#ffffff00, #ffffff3a, #ffffff00); }
.just-played .game-card { width: 100% !important; border-radius: 8px; box-shadow: 0 0 0 2px var(--pc), 0 0 12px color-mix(in srgb, var(--pc) 60%, transparent), 0 6px 14px #000a; }
.just-played:not(.empty) { animation: jp-age 1.2s ease var(--fade-delay, 10s) forwards; }
@keyframes jp-age { to { opacity: .62; filter: saturate(.55); } }
.just-played .jp-tag { position: absolute; top: -7px; left: 50%; translate: -50% 0; z-index: 4; white-space: nowrap; font: 800 7px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: #3a1d00; background: linear-gradient(#ffe07a, #f5a11c); padding: 3px 5px 2px; border-radius: 99px; box-shadow: 0 2px 6px #0008; pointer-events: none; }
.just-played .jp-who { position: absolute; bottom: -7px; left: 50%; translate: -50% 0; z-index: 4; display: flex; align-items: center; gap: 3px; width: max-content; max-width: calc(var(--jpw, 60px) + 14px); padding: 2px 6px 2px 4px; border-radius: 99px; background: #04121af0; box-shadow: inset 0 0 0 1.5px var(--pc); pointer-events: none; }
.just-played .jp-who i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); flex: none; }
.just-played .jp-who b { display: block; min-width: 0; overflow: hidden; white-space: nowrap; font: 800 8px/1.15 var(--body); color: #f4f1e6; }
.just-played .jp-info { position: absolute; right: -5px; top: 9px; z-index: 4; width: 15px; height: 15px; border-radius: 50%; background: #10384a; box-shadow: inset 0 0 0 1px #ffffff55, 0 2px 4px #0008; color: #fff; font: 800 9px/15px var(--body); text-align: center; pointer-events: none; }
.just-played.empty .jp-blank { display: block; aspect-ratio: 5 / 7; border-radius: 8px; border: 1.5px dashed #ffffff22; background: #ffffff05; }
.just-played.empty .jp-tag { opacity: .45; filter: grayscale(1); }
@media (min-width: 900px) and (min-height: 561px) { .just-played .jp-tag { font-size: 9px; } .just-played .jp-who b { font-size: 10px; } }
.just-played { margin-top: 7px; }
.just-played .jp-tag { top: -13px; }
.board .board-caption > span { -webkit-line-clamp: 3; }

/* ───────── v14.4 ───────── */
/* Keep and Return: same size */
body[data-screen="game"] .dock .keep-row .btn, body[data-screen="game"] .dock .keep-row .btn-gold { flex: 1 1 0; min-height: 40px; font-size: 15px; }
/* Roll keeps clear of the Just played card */
body[data-screen="game"] .dock .hand-row { gap: 10px; }
body[data-screen="game"] .dock .roll-btn { margin-right: 6px; }
/* Computer and tablet screens: kept cards fill the panel like everything else; Roll and the slot sit on the same row */
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock { --dockw: 460px; }
  body[data-screen="game"] .dock .hand-row { grid-template-columns: minmax(0, 1fr) auto auto; justify-items: stretch; align-items: center; gap: 14px; }
  body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
  body[data-screen="game"] .dock .roll-btn { width: 78px; height: 78px; margin-right: 8px; }
  body[data-screen="game"] .dock .roll-btn .roll-face svg { width: 28px; height: 28px; }
  body[data-screen="game"] .dock .roll-btn b { font-size: 12px; }
  .just-played { margin-top: 10px; }
  .just-played .jp-tag { font-size: 9px; top: -14px; }
  .just-played .jp-who b { font-size: 10px; }
  .just-played .jp-info { width: 18px; height: 18px; font-size: 11px; line-height: 18px; }
  body[data-screen="game"] .dock .action-row .btn { font-size: 15px; min-height: 46px; }
  body[data-screen="game"] .board-wrap { --board: clamp(420px, min(calc(100dvh - 130px), calc(100vw - 530px)), 820px); }
}
/* simple opening: the logo arrives at once, the sky just glows */
.intro.simple.go .intro-logo { animation: logo-rise .8s .1s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.intro.simple.go .intro-sky::after { animation: fade-in .8s .2s forwards, home-spin 60s .2s linear infinite; }
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock .roll-btn { order: 0; margin: 0 8px 0 0; }
  body[data-screen="game"] .dock .reserve-slot { min-width: 0; }
  body[data-screen="game"] .dock .reserve .game-card { width: 100%; max-width: none; }
  body[data-screen="game"] .dock .action-row .btn.with-card .bt b { font-size: 15px; }
}
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock { --dockw: 520px; }
  body[data-screen="game"] .dock .roll-btn { width: 84px; height: 84px; }
  body[data-screen="game"] .dock .action-row .btn.with-card .bt b { font-size: 14px; }
  body[data-screen="game"] .dock .action-row .btn.with-card .bt { line-height: 1.1; }
  body[data-screen="game"] .board-wrap { --board: clamp(420px, min(calc(100dvh - 130px), calc(100vw - 590px)), 820px); }
}
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock { justify-items: stretch; }
  body[data-screen="game"] .dock > .hand-row { width: 100%; justify-self: stretch; }
}
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock .hand-row { grid-template-columns: 1fr max-content max-content; }
  body[data-screen="game"] .dock .reserve { grid-template-columns: repeat(3, 1fr); width: auto; min-width: 0; }
  body[data-screen="game"] .dock .reserve-slot, body[data-screen="game"] .dock .reserve .game-card { width: 100%; min-width: 0; max-width: none; }
}
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .reserve, body[data-screen="game"] .dock.tighter .reserve { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .roll-btn, body[data-screen="game"] .dock.tighter .roll-btn { width: 84px; height: 84px; }
  body[data-screen="game"] .dock:has(.action-row.many:not([data-n="3"])) .prompt p { display: block; }
  body[data-screen="game"] .dock .action-row.many { grid-template-columns: repeat(2, 1fr); }
  body[data-screen="game"] .dock .action-row.many .btn .bt b { font-size: 14px; }
}
@media (min-width: 900px) and (min-height: 561px) { body[data-screen="game"] .dock { grid-template-columns: minmax(0, 1fr); } }
/* v14.4: compact top strip on phones — one line per player (portrait · name · health), the bar underneath, the role tag inside
   the chip. Frees about 20 px for the board and the bottom panel. Computer screens keep the roomy version. */
@media (max-width: 899px), (max-height: 560px) {
  body[data-screen="game"] .game-screen > .topbar { padding: 3px 6px 0; }
  body[data-screen="game"] .game-screen > .topbar .icon-btn { width: 30px; height: 30px; border-radius: 9px; }
  body[data-screen="game"] .game-screen > .topbar .icon-btn .ico, body[data-screen="game"] .game-screen > .topbar .icon-btn svg { width: 16px; height: 16px; }
  body[data-screen="game"] .game-screen > .topbar .turn-chip { padding: 3px 8px; font-size: 10px; }
  body[data-screen="game"] .game-screen > .hud { padding: 4px 6px 3px; gap: 5px; }
  body[data-screen="game"] .game-screen > .hud .chip { padding: 3px 7px 4px 4px; gap: 6px; row-gap: 2px; border-radius: 12px; grid-template-areas: "av name hp" "av bar bar"; }
  body[data-screen="game"] .game-screen > .hud .chip-avatar { width: 28px; height: 28px; border-radius: 9px; }
  body[data-screen="game"] .game-screen > .hud .chip-name { font-size: 11.5px; gap: 4px; }
  body[data-screen="game"] .game-screen > .hud .chip-name em { position: static; order: 2; margin-left: auto; font-size: 7px; padding: 1.5px 5px; border-radius: 5px; letter-spacing: .08em; flex: none; }
  body[data-screen="game"] .game-screen > .hud .chip-hp strong { font-size: 14px; }
  body[data-screen="game"] .game-screen > .hud .chip .hp-bar { height: 5px; }
  body[data-screen="game"] .game-screen > .hud .chip-cards i { width: 4px; height: 7px; }
  .chip-avatar .turn-clock { inset: -3px; }
  .chip-avatar .turn-clock .clock-ring { border-radius: 12px; padding: 2.5px; }
  .chip-avatar .turn-clock b { min-width: 18px; height: 16px; font-size: 9px; top: -9px; }
  .chip-avatar .turn-clock .lives { bottom: -5px; }
  .chip-avatar .turn-clock .lives em { width: 4px; height: 4px; }
}
@media (max-width: 899px), (max-height: 560px) {
  body[data-screen="game"] .game-screen > .hud .chip-name { display: flex; min-width: 0; overflow: visible; }
  body[data-screen="game"] .game-screen > .hud .chip-name > .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
  body[data-screen="game"] .game-screen > .hud .chip-name em { white-space: nowrap; overflow: visible; }
  body[data-screen="game"] .game-screen > .hud .chip-hp { gap: 4px; }
}
@media (max-width: 899px), (max-height: 560px) {
  /* the name owns its line; the role tag becomes a tiny label tucked over the health bar's right end */
  body[data-screen="game"] .game-screen > .hud .chip { position: relative; }
  body[data-screen="game"] .game-screen > .hud .chip-name em { position: absolute; right: 7px; bottom: 1px; margin: 0; font-size: 6.5px; padding: 1px 4px; line-height: 1.3; z-index: 2; }
  body[data-screen="game"] .game-screen > .hud .chip .hp-bar { height: 6px; }
  body[data-screen="game"] .game-screen > .hud .chip { padding-bottom: 5px; row-gap: 3px; }
}
@media (max-width: 899px), (max-height: 560px) {
  body[data-screen="game"] .game-screen > .hud .chip-name em { top: auto; left: auto; right: 6px; bottom: 2px; height: auto; width: auto; max-width: 46%; overflow: hidden; text-overflow: clip; box-shadow: 0 1px 3px #0008; }
}
body[data-screen="game"] .dock .keep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-screen="game"] .dock .keep-row .btn { width: auto; min-width: 0; flex: none; }

/* ───────── v14.5 ───────── */
/* Room screen: the four starting-health options in a 2×2 grid on phones, number big, name small and fitted — never overlapping */
@media (max-width: 599px) {
  .hp-row.full .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .hp-grid button { padding: 8px 4px 7px; gap: 3px; }
  .hp-grid button b { font-size: 16px; }
  .hp-grid button small { font-size: 9.5px; white-space: nowrap; overflow: hidden; max-width: 100%; }
}
.hp-grid button small { display: block; min-width: 0; }
/* The spectator-delay buttons get their label */
.spec-delay-wrap { display: grid; justify-items: center; gap: 3px; }
.spec-delay-wrap > .kicker { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* someone dropped: a thin strip under the top bar */
.away-strip { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 44px); translate: -50% 0; z-index: 85; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 99px; background: #06202bf0; box-shadow: 0 6px 18px #000a, inset 0 0 0 1.5px #ffc53366; font: 700 12px/1.2 var(--body); color: #f4f1e6; animation: fade-in .3s; }
.away-strip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.away-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffc533; animation: pulse-go-c 1.2s ease-in-out infinite; flex: none; }
.away-strip b { font-family: var(--display); font-size: 13px; color: #ffc533; flex: none; }
/* home: resume banner */
.home-actions .resume-btn { display: grid; justify-items: center; gap: 1px; }
.home-actions .resume-btn small { font: 700 11px/1.1 var(--body); opacity: .85; text-transform: none; letter-spacing: 0; }

/* v14.6 (Oct 14, Emile: "what is this UI" on a computer): the drawn-card choices. The card action is one large button on its own
   row (two per row when there are several), Save and Return sit side by side underneath at the same size — no orphan button. */
@media (min-width: 900px) and (min-height: 561px) {
  body[data-screen="game"] .dock .action-row.split.split { display: flex; flex-wrap: wrap; gap: 8px; }
  body[data-screen="game"] .dock .action-row.split.split > .btn { flex: 1 1 calc(50% - 4px); min-width: 0 !important; margin: 0; }
  body[data-screen="game"] .dock .action-row.split.split[data-p="1"] > .btn.prim { flex-basis: 100%; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.prim { min-height: 60px; padding: 6px 16px 6px 6px; gap: 12px; justify-content: flex-start; border-radius: 14px; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.prim .mini-art { width: 36px; height: 48px; border-radius: 7px; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.prim small { display: block; font-size: 12px; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.prim .bt b { font-size: 18px; white-space: nowrap; display: block; -webkit-line-clamp: unset; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.prim em { font-size: 13px; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.sec { min-height: 46px; padding: 6px 12px; justify-content: center; font-size: 15px; border-radius: 12px; }
  body[data-screen="game"] .dock .action-row.split.split > .btn.sec .bl { font-size: 15px; display: block; -webkit-line-clamp: unset; }
}

/* v14.6: 3D Arena shows in the menu as "Coming soon" (not playable yet). */
.arena3d-item.soon { opacity: .62; cursor: default; }
.arena3d-item.soon .soon-tag { background: #3a4a55; color: #cfd8dc; }

/* v14.6 (Oct 14, Emile: "fix the other part of the computer screen"): on a computer the side panel is exactly as tall as
   the board, the choices stay at the top, and the battle log fills the space underneath instead of an empty box. */
@media (min-width: 900px) and (min-height: 640px) {
  body[data-screen="game"] .stage, body[data-screen="game"] .board-wrap { --board: clamp(420px, min(calc(100dvh - 130px), calc(100vw - 590px)), 940px); }
  body[data-screen="game"] .dock { display: flex; flex-direction: column; align-self: flex-start; height: var(--board); overflow-y: auto; overscroll-behavior: contain; }
  body[data-screen="game"] .dock > * { flex: none; }
  body[data-screen="game"] .dock .feed-wrap { display: flex; flex-direction: column; flex: 1 1 0; min-height: 64px; margin-top: 4px; overflow: hidden; }
  body[data-screen="game"] .dock .feed-toggle { pointer-events: none; cursor: default; }
  body[data-screen="game"] .dock .feed-toggle i { display: none; }
  body[data-screen="game"] .dock .feed { flex: 1 1 0; min-height: 0; overflow: hidden; align-content: start; font-size: 13px; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  body[data-screen="game"] .dock .feed li { white-space: normal; overflow: visible; }
}
/* Home: Quests and Menu line up with Friends and Party above them. */
.home-nav:has(> button:nth-child(2):last-child) { width: min(100%, 332px); }