/* Mononster · arena UI. Phone-first; desktop adds a side dock. */
@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 ───────── */
.dice-tray { display: flex; gap: 5cqw; perspective: 600px; }
.die3d { --s: clamp(30px, 12.5cqw, 72px); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; }
.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; 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; }
.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 { 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: 10px; min-height: 38px; }
.prompt > div:first-child { min-width: 0; flex: 1; }
.prompt h2 { margin: 0; font: 700 17px/1.15 var(--display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 b { font-weight: 700; margin-top: 2px; letter-spacing: .04em; }

.feed { display: none; 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; }
  .feed { display: grid; }
  .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; }
.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; }
.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; }