:root {
  color-scheme: dark;
  --ink: #120f1c;
  --ink-2: #1b1728;
  --panel: #292238;
  --panel-2: #342b45;
  --line: #5d4e73;
  --paper: #f8edcf;
  --muted: #b8a9c8;
  --eat: #70d38b;
  --eat-dark: #245f48;
  --discard: #ff9d5c;
  --discard-dark: #803c43;
  --gold: #ffd166;
  --rare: #c49aff;
  --danger: #ff667f;
  --pixel-shadow: 4px 4px 0 #0b0911;
  --card-width: clamp(238px, 29vw, 304px);
  --card-height: calc(var(--card-width) * 1.34);
  font-family: "Fusion Pixel 12px Monospaced zh_hans", "Sarasa Mono SC", "Microsoft YaHei UI", monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--paper);
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, #302440 0, #17121f 56%, #0e0c14 100%);
  background-size: 16px 16px, 16px 16px, auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button, input, summary { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.game-shell {
  position: relative;
  isolation: isolate;
  width: min(1080px, 100%);
  height: min(900px, 100%);
  min-height: 560px;
  display: grid;
  grid-template-rows: 62px 74px minmax(0, 1fr) 76px;
  overflow: hidden;
  border: 2px solid #79658e;
  border-radius: 6px;
  background: var(--ink-2);
  box-shadow: 0 0 0 4px #0b0911, 12px 12px 0 rgba(0,0,0,.35);
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(45deg, transparent 47%, #a98bbd 48%, #a98bbd 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, #a98bbd 48%, #a98bbd 52%, transparent 53%);
  background-size: 48px 48px;
}

body:has(#welcomeOverlay.show) .app { padding: 0; }
body:has(#welcomeOverlay.show) .game-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 2px solid #0d0a13;
  background: #211a2d;
  box-shadow: inset 0 -2px 0 #443651;
  position: relative;
  z-index: 60;
}

.brand, .brand > span:last-child, .topbar-actions { display: flex; align-items: center; }
.brand { gap: 10px; letter-spacing: .06em; }
.brand > span:last-child { flex-direction: column; align-items: flex-start; line-height: 1.05; }
.brand b { font-size: 16px; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .2em; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid #211a2d;
  outline: 2px solid var(--gold);
  color: #241c2d;
  background: var(--gold);
  box-shadow: var(--pixel-shadow);
  font-size: 12px;
  font-weight: 900;
}

.topbar-actions { min-width: 0; gap: 7px; }
.phase-chip {
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #18131f;
  font-size: 11px;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #0d0a13;
  color: var(--paper);
  background: #493b5b;
  box-shadow: 2px 2px 0 #0b0911;
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.icon-button:active { transform: translate(2px, 2px); box-shadow: none; }
.icon-button.is-muted { color: #746780; background: #27212f; }
.icon-button:disabled { color: #61566a; background: #27212f; box-shadow: none; cursor: default; }
.quest-info-button { color: var(--danger); font-size: 13px; }
.deck-info-button { color: var(--gold); font-size: 13px; }
.rule-info-button { color: var(--rare); font-size: 13px; }
.item-info-button { color: #9ed9c2; font-size: 13px; }
.tutorial-info-button { color: #8ee7ff; font-size: 13px; }
.quest-info-button.has-active-quest { border-color: var(--danger); box-shadow: 0 0 0 2px #421d29, 2px 2px 0 #0b0911; animation: questPulse 1.2s steps(2, end) infinite; }
@keyframes questPulse { 50% { color: var(--paper); background: #6f3348; } }

.hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 2px solid #3d324a;
  background: rgba(16,13,23,.84);
  z-index: 4;
}

.hud-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 12px;
  border-left: 3px solid var(--line);
  background: #282033;
  box-shadow: inset -2px -2px 0 #17121f;
}
.hud-cell span { overflow: hidden; color: var(--muted); font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.hud-cell strong { margin-top: 3px; overflow: hidden; color: var(--paper); font-size: clamp(14px, 2vw, 20px); text-overflow: ellipsis; }
.hud-cell small { display: block; min-height: 9px; margin-top: 1px; overflow: hidden; color: #82738e; font-size: 6px; letter-spacing: .04em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.hud-cell small[hidden] { display: none; }
.hud-cell.is-live { background: linear-gradient(135deg, #2d2539, #241d30); box-shadow: inset 0 -2px 0 rgba(255,255,255,.035); }
.hud-cell.is-live small { color: #a998b5; }
.hud-value-pop { animation: hudValuePop 360ms steps(5, end); }
@keyframes hudValuePop { 0% { opacity: .45; transform: translateY(3px) scale(.86); } 55% { opacity: 1; transform: translateY(-1px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
.hud-cell:nth-child(2) { border-color: var(--eat); }
.hud-cell:nth-child(3) strong { color: var(--gold); }
.timer-cell { border-color: var(--discard); }
.timer-cell strong { font-variant-numeric: tabular-nums; }

.inventory-bar {
  position: absolute;
  z-index: 18;
  top: 158px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.inventory-bar > b { color: #8f7ca0; font-size: 7px; letter-spacing: .14em; }
.inventory-bar.is-hidden-for-deal { opacity: 0; visibility: hidden; pointer-events: none; }
.item-tray { min-width: 0; display: flex; gap: 5px; overflow: hidden; pointer-events: auto; }
.item-empty { color: #62566c; font-size: 7px; }
.item-chip { position: relative; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #6c587e; background: #17121f; box-shadow: 2px 2px 0 #09070d; }
.meta-sprite { display: block; background-image: var(--meta-image, url('./assets/meta-atlas.webp?v=1')); background-repeat: no-repeat; image-rendering: pixelated; }
.item-chip .meta-sprite { width: 100%; height: 100%; background-size: var(--meta-size-x, 400%) var(--meta-size-y, 400%); background-position: var(--meta-x) var(--meta-y); }
.item-chip::after { content: ""; position: absolute; z-index: 3; right: 1px; bottom: 1px; left: 1px; height: 3px; background: var(--item-rarity, #8b9098); }
.item-chip > i { position: absolute; z-index: 4; right: -4px; top: -5px; min-width: 13px; height: 13px; display: grid; place-items: center; border: 1px solid #fff0a3; border-radius: 50%; color: #2a1c22; background: var(--gold); font-size: 7px; font-style: normal; font-weight: 900; }
.item-chip > i { display: none; }
.item-chip.is-essence { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,209,102,.18), 2px 2px 0 #09070d; }
.item-rarity-common { --item-rarity: #8b9098; }
.item-rarity-uncommon { --item-rarity: #4d9eff; }
.item-rarity-rare { --item-rarity: #f2c14e; }
.item-rarity-legendary { --item-rarity: #e05252; }
.item-chip { border-color: var(--item-rarity, #6c587e); }

.playfield {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(42px, .38fr) minmax(320px, 4fr) minmax(42px, .38fr);
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.04) 50%, transparent 50.2%),
    radial-gradient(ellipse at center, rgba(110,82,134,.28), transparent 62%);
}

.effect-feed {
  position: absolute;
  z-index: 48;
  top: 50%;
  right: 12px;
  width: min(224px, 23vw);
  display: grid;
  gap: 7px;
  pointer-events: none;
  transform: translateY(-50%);
}

.action-zone {
  --gesture: 0;
  position: relative;
  z-index: 15;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 7px;
  min-width: 132px;
  padding: 6px 14px;
  border: 1px dashed currentColor;
  opacity: calc(.32 + var(--gesture) * .68);
  transform: scale(calc(.96 + var(--gesture) * .08));
  transition: opacity 80ms linear, transform 80ms linear, background-color 80ms linear;
}
.action-zone b { font-size: 12px; letter-spacing: .18em; }
.action-zone small { grid-column: 2; font-size: 7px; opacity: .65; letter-spacing: .12em; }
.zone-arrow { grid-row: span 2; font-size: 22px; font-weight: 900; }
.discard-zone { align-self: end; color: var(--discard); }
.eat-zone { align-self: start; color: var(--eat); }
.action-zone.is-target { background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: 0 0 0 3px rgba(0,0,0,.2); }

.deck-stage {
  position: relative;
  width: calc(var(--card-width) + 56px);
  height: calc(var(--card-height) + 30px);
  display: grid;
  place-items: center;
}
.deck-stage::after {
  content: "";
  position: absolute;
  z-index: 28;
  inset: 7% 4%;
  border: 4px solid var(--effect-color, transparent);
  opacity: 0;
  pointer-events: none;
}
.deck-stage.effect-pulse::after { animation: effectStagePulse 680ms steps(7, end); }
.deck-stage.tone-growth, .deck-stage.tone-generate, .deck-stage.tone-fruit { --effect-color: #72ff99; }
.deck-stage.tone-hard { --effect-color: #ffad42; }
.deck-stage.tone-mutation, .deck-stage.tone-destroy { --effect-color: #ff5f76; }
.deck-stage.tone-economy { --effect-color: #ffe06e; }
.deck-stage.tone-reshuffle { --effect-color: #c49aff; }
.deck-stage.tone-effect { --effect-color: #77dbff; }
@keyframes effectStagePulse {
  0% { opacity: 0; transform: scale(.9); }
  18%, 42% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

.stack-shadow {
  position: absolute;
  width: calc(var(--card-width) + 44px);
  height: calc(var(--card-width) * .72);
  border: 4px solid #b9b1a5;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 44%, #fffef8 0 47%, #ece9e1 48% 61%, #cfc9be 62% 67%, #f9f7f0 68% 74%, #aaa196 75% 77%, #e7e2d9 78% 100%);
  box-shadow: 0 8px 0 rgba(114,101,91,.34), 0 14px 18px rgba(61,48,63,.24);
  transform: translateY(12px);
}

.card-stack { position: relative; width: var(--card-width); height: var(--card-height); }

.game-card {
  --depth: 0;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 9px;
  padding: clamp(13px, 2vw, 18px);
  border: 3px solid #15101c;
  border-radius: 8px;
  color: #241b2a;
  background: #efe1c1;
  box-shadow:
    0 0 0 2px #8e775f,
    calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d,
    calc(10px + var(--depth) * 2px) calc(13px + var(--depth) * 3px) 0 rgba(5, 4, 8, .34);
  transform: translateY(calc(var(--depth) * 10px)) scale(calc(1 - var(--depth) * .025));
  transform-origin: 50% 90%;
  will-change: transform, opacity;
  contain: layout paint style;
  touch-action: none;
  cursor: grab;
}
.game-card.is-active:active { cursor: grabbing; }
.game-card.is-stack-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.game-card.card-edible { border-top-color: #448b66; }
.game-card.card-inedible { border-top-color: #b95d4c; }
.game-card.rarity-uncommon { background: #e8ddc4; box-shadow: 0 0 0 2px #9a7d62, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d; }
.game-card.rarity-rare { background: #e0d1ef; box-shadow: 0 0 0 2px #8e68ab, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d; }
.game-card.rarity-legendary { background: #f5d49b; box-shadow: 0 0 0 2px #c15f44, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d; }
.game-card.rarity-curse { color: #e7dbea; background: #231a2c; box-shadow: 0 0 0 2px #8b3c63, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d; }
.game-card.rarity-curse .card-effect { color: #d0b5d4; background: #120d18; }
.game-card.is-weakened { box-shadow: 0 0 0 2px #d64f6a, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d; }
.game-card.is-weakened::after { content: "WEAK"; position: absolute; right: 10px; top: 44px; z-index: 2; padding: 3px 5px; border: 2px solid #5b1d37; color: #fff1e1; background: #d64f6a; box-shadow: 2px 2px 0 #311225; font-size: 7px; letter-spacing: .12em; transform: rotate(3deg); }
.game-card.is-fogged {
  color: #c7a6e8;
  border-color: #16101f;
  background:
    linear-gradient(45deg, transparent 44%, rgba(190,139,241,.15) 45% 55%, transparent 56%) 0 0 / 24px 24px,
    linear-gradient(-45deg, transparent 44%, rgba(106,72,151,.22) 45% 55%, transparent 56%) 0 0 / 24px 24px,
    #21162d;
  box-shadow: 0 0 0 2px #765393, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d;
}
.game-card.is-fogged > * { visibility: hidden; }
.game-card.is-fogged::before {
  content: "✦";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  color: #dcb8ff;
  text-shadow: 4px 4px 0 #0e0914, 0 0 18px rgba(194,132,255,.45);
}

.card-noise {
  position: absolute;
  inset: 7px;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(currentColor 1px, transparent 1px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.card-head, .card-scores { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rarity-tag, .edibility-tag, .card-code {
  padding: 4px 7px;
  border: 2px solid #34263d;
  background: rgba(255,255,255,.35);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}
.edibility-tag { color: #4e3d54; background: rgba(255,255,255,.18); }
.card-edible .edibility-tag { border-color: #448b66; color: #286047; background: #b9dfa9; }
.card-inedible .edibility-tag { border-color: #b95d4c; color: #763747; background: #f3c39e; }
.card-code { border: 0; background: transparent; color: #756278; }

.card-art {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 82px;
  border: 2px solid #9f9587;
  background:
    linear-gradient(45deg, rgba(71,53,68,.08) 25%, transparent 25%, transparent 75%, rgba(71,53,68,.08) 75%),
    linear-gradient(45deg, rgba(71,53,68,.08) 25%, transparent 25%, transparent 75%, rgba(71,53,68,.08) 75%),
    linear-gradient(135deg, #dfd0b7, #bdab90);
  background-position: 0 0, 7px 7px, 0 0;
  background-size: 14px 14px, 14px 14px, auto;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(69,52,65,.16);
}
.card-postpone-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 2px solid #604174;
  color: #fff0bd;
  background: #372543;
  box-shadow: 2px 2px 0 #17101e, inset 1px 1px 0 #9a73b4;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  pointer-events: none;
}
.card-postpone-mark b { color: #d7a2ff; font-size: 10px; line-height: 1; }
.game-card.is-postponed.is-active .card-art { border-color: #76548c; box-shadow: inset 3px 3px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(69,52,65,.16), 0 0 0 2px rgba(118,84,140,.35); }
.game-sprite {
  display: block;
  background-image: var(--sprite-image, url("./assets/card-sprites.webp?v=3"));
  background-repeat: no-repeat;
  background-position: var(--sprite-x, 0%) var(--sprite-y, 0%);
  background-size: var(--sprite-size-x, 500%) var(--sprite-size-y, 400%);
  image-rendering: pixelated;
  transform: scale(var(--sprite-scale, 1));
}
.card-art .game-sprite {
  width: auto;
  height: min(calc(100% - 10px), 150px);
  max-width: calc(100% - 12px);
  aspect-ratio: 1;
  transform-origin: center;
  filter: hue-rotate(var(--sprite-hue, 0deg)) saturate(.96) drop-shadow(2px 4px 0 rgba(89,76,72,.22));
}
.game-card.art-outlined .card-art .game-sprite,
.shop-card.art-outlined .shop-card-icon,
.deck-chip.art-outlined > .game-sprite,
.deck-status-card.art-outlined .deck-status-art {
  filter:
    hue-rotate(var(--sprite-hue, 0deg)) saturate(.98)
    drop-shadow(1px 0 0 #665044)
    drop-shadow(-1px 0 0 #665044)
    drop-shadow(0 1px 0 #665044)
    drop-shadow(0 -1px 0 #665044)
    drop-shadow(3px 4px 0 rgba(82,62,54,.34));
}

.card-title { display: flex; flex-direction: column; }
.card-title small { color: #765f76; font-size: 9px; letter-spacing: .25em; }
.card-title strong { margin-top: 2px; font-size: clamp(25px, 4vw, 36px); line-height: 1.08; letter-spacing: .08em; }

.card-scores { position: relative; isolation: isolate; gap: 2px; padding: 3px; border: 2px solid #8d7665; background: #b9a184; box-shadow: inset 1px 1px 0 #ead9b9, 3px 3px 0 rgba(80,59,53,.24); }
.card-scores::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 6px; bottom: 6px; width: 1px; background: #d7c3a5; box-shadow: 1px 0 0 rgba(72,52,50,.42); transform: translateX(-1px); pointer-events: none; }
.card-scores > span { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(36px, .7fr) minmax(52px, 1.15fr); align-items: center; gap: 3px; min-height: 50px; padding: 5px 6px; overflow: hidden; border: 0; font-size: 9px; font-weight: 900; text-align: left; container-type: inline-size; }
.card-scores > span::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; background: repeating-linear-gradient(0deg, transparent 0 4px, #fff6dc 5px); }
.card-scores i { min-width: 0; align-self: center; display: grid; gap: 4px; overflow: hidden; padding-left: 1px; font-size: 8px; font-style: normal; letter-spacing: .04em; line-height: 1.05; white-space: nowrap; }
.card-scores i small { overflow: hidden; color: #d9cbb8; font-size: 7px; letter-spacing: .08em; text-overflow: clip; }
.card-point-wrap { justify-self: stretch; width: 100%; display: grid; justify-items: end; align-content: center; gap: 4px; min-width: 0; color: #fff8e8; }
.card-point-value { display: block; max-width: 100%; overflow: visible; padding: 3px 0 1px; font-family: "Fusion Pixel 12px Monospaced zh_hans", "Sarasa Mono SC", "Lucida Console", monospace; font-size: clamp(24px, 28cqi, 34px); font-weight: 900; line-height: 1.05; letter-spacing: -.07em; color: #fff8e8; text-shadow: 2px 2px 0 rgba(67,43,47,.72); white-space: nowrap; }
.card-point-wrap.is-wide .card-point-value { font-size: clamp(20px, 23cqi, 28px); }
.card-point-wrap.is-very-wide .card-point-value { font-size: clamp(17px, 19cqi, 23px); letter-spacing: -.1em; }
.card-point-delta { position: relative; max-width: 100%; display: grid; justify-items: end; gap: 1px; overflow: hidden; padding: 2px 3px; border: 1px solid currentColor; color: inherit; background: #67504a; box-shadow: 1px 1px 0 rgba(66,45,43,.35); font-size: 8px; line-height: .92; letter-spacing: 0; white-space: nowrap; }
.card-point-delta span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: clip; }
.card-point-wrap.point-increased, .card-point-wrap.point-decreased { animation: pointChangedIn 520ms steps(6, end) 1; }
.card-point-wrap.point-increased { color: #69f596; }
.card-point-wrap.point-decreased { color: #ff5d75; }
.card-point-wrap.point-increased .card-point-value { color: #78ff9f !important; text-shadow: 3px 3px 0 #0b351f, 0 0 6px rgba(117,255,155,.58); }
.card-point-wrap.point-decreased .card-point-value { color: #ff5d75 !important; text-shadow: 3px 3px 0 #4b1022, 0 0 6px rgba(255,83,109,.58); }
.shop-card-copy .card-point-wrap, .deck-chip .card-point-wrap, .deck-status-card .card-point-wrap { width: auto; flex: 0 0 auto; justify-self: auto; display: inline-flex; min-width: 0; padding-right: 0; vertical-align: middle; }
.shop-card-copy .card-point-value, .deck-chip .card-point-value, .deck-status-card .card-point-value { display: inline; padding: 0; font-size: 1.2em; line-height: 1.15; letter-spacing: 0; text-shadow: 1px 1px 0 #09070d; }
.shop-card-copy .card-point-delta, .deck-chip .card-point-delta, .deck-status-card .card-point-delta { display: none; }
.discard-score { color: #ffcf9c; background: linear-gradient(135deg, #865d50, #70504d 72%); box-shadow: inset 3px 0 0 #e58b58; }
.eat-score { color: #c4efd5; background: linear-gradient(225deg, #587460, #526457 72%); box-shadow: inset -3px 0 0 #67c58d; }
.game-card.has-point-change .card-scores { box-shadow: inset 1px 1px 0 #ead9b9, 3px 3px 0 rgba(80,59,53,.24), 0 0 0 1px rgba(255,255,255,.18); }
@keyframes pointChangedIn { 0% { opacity: .35; transform: scale(.72); } 58% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
.card-effect { min-height: 35px; padding: 7px 9px; border-left: 3px solid #745b79; color: #5e4c62; background: rgba(68,48,72,.08); font-size: 9px; line-height: 1.4; }
.card-effect.is-flavor { border-left-color: #a38b6f; color: #796a61; background: rgba(91,70,55,.06); font-style: italic; }

.swipe-status {
  position: absolute;
  z-index: 30;
  min-width: 108px;
  padding: 7px 10px;
  border: 2px solid currentColor;
  background: #17121f;
  box-shadow: var(--pixel-shadow);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.swipe-status.discard { top: 20%; color: var(--discard); }
.swipe-status.eat { bottom: 18%; color: var(--eat); }
.swipe-status.postpone { top: 48%; color: var(--gold); }
.fruit-combo-flash { position: absolute; z-index: 46; left: -8px; top: 25%; display: grid; place-items: center; min-width: 132px; padding: 8px 12px; border: 3px solid #5a2e78; color: #fff5c9; background: #bd3f72; box-shadow: 5px 5px 0 #160d20, inset 0 0 0 2px #f18b86; pointer-events: none; animation: fruitComboPop 900ms steps(7, end) forwards; }
.fruit-combo-flash small { color: #ffe878; font-size: 7px; letter-spacing: .18em; }
.fruit-combo-flash b { font-family: "Courier New", monospace; font-size: 30px; line-height: 1; text-shadow: 3px 3px 0 #61285e; }
.fruit-combo-flash span { font-size: 8px; }
.fruit-combo-flash.is-fever { border-color: #ffdb55; background: #e65747; box-shadow: 5px 5px 0 #160d20, 0 0 0 3px #7fbf4d; }
@keyframes fruitComboPop { 0% { opacity: 0; transform: translateX(-18px) scale(.55) rotate(-3deg); } 18%, 68% { opacity: 1; transform: translateX(0) scale(1) rotate(-3deg); } 100% { opacity: 0; transform: translateY(-32px) scale(1.08) rotate(-3deg); } }
.hard-eat-flash { position: absolute; z-index: 47; left: -20px; bottom: 17%; display: grid; grid-template-columns: auto auto; align-items: center; min-width: 138px; padding: 7px 10px; border: 3px solid #ffb44f; color: #fff1c7; background: #3a1c22; box-shadow: 5px 5px 0 #0b0911, inset 0 0 0 2px #883b32; pointer-events: none; animation: hardEatPop 980ms steps(8, end) forwards; }
.hard-eat-flash::before { content: ""; position: absolute; inset: -7px; z-index: -1; border: 2px dashed #ff6b48; opacity: .7; }
.hard-eat-flash small { grid-column: 1 / -1; color: #ffca64; font-size: 6px; letter-spacing: .14em; }
.hard-eat-flash b { font-family: "Fusion Pixel 12px Monospaced zh_hans", monospace; color: #fff6d8; font-size: 28px; line-height: 1; text-shadow: 3px 3px 0 #8a302d; }
.hard-eat-flash span { padding-left: 7px; color: #ffc889; font-size: 7px; }
.hard-eat-flash.is-chain { background: #5b2229; box-shadow: 5px 5px 0 #0b0911, 0 0 0 3px #7d315a, 0 0 18px rgba(255,133,69,.35); }
@keyframes hardEatPop { 0% { opacity: 0; transform: translateX(-22px) skewX(-7deg) scale(.65); } 18%, 68% { opacity: 1; transform: translateX(0) skewX(-3deg) scale(1); } 100% { opacity: 0; transform: translateY(-34px) skewX(-3deg) scale(1.05); } }
.deck-empty { z-index: 2; padding: 12px 16px; border: 2px dashed var(--line); color: var(--muted); background: var(--ink); font-size: 12px; }

.pixel-spark { position: absolute; width: 5px; height: 5px; background: var(--gold); box-shadow: 9px 0 var(--gold), 0 9px var(--gold), -9px 0 var(--gold), 0 -9px var(--gold); opacity: .45; animation: sparkle 2s steps(2, jump-none) infinite; }
.spark-a { left: 3px; top: 19%; }
.spark-b { right: 0; bottom: 17%; animation-delay: -1s; }
@keyframes sparkle { 0%, 100% { transform: scale(.7); opacity: .2; } 50% { transform: scale(1); opacity: .65; } }

.controls {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr minmax(110px, 170px);
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 2px solid #4b3d59;
  background: #211a2d;
  z-index: 5;
}
.control-center { display: grid; place-items: center; gap: 4px; }
.control-center small { color: #84758e; font-size: 7px; text-align: center; }
.reshuffle-button { min-width: 112px; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 10px; border: 2px solid #78638c; color: var(--rare); background: #2b2337; box-shadow: 3px 3px 0 #09070d; cursor: pointer; font-weight: 900; line-height: 1; text-align: center; }
.reshuffle-button span, .reshuffle-button b { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.reshuffle-button b { color: var(--gold); }
.reshuffle-button:disabled { border-color: #3b3244; color: #62566c; background: #1a161f; box-shadow: none; cursor: not-allowed; }
.reshuffle-button.is-ready { border-color: var(--gold); animation: reshuffleReady 800ms steps(2, end) infinite; }
.finish-round-button { min-height: 24px; display: grid; place-items: center; padding: 3px 7px; border: 1px solid #5e506a; color: #a99bb0; background: #19151f; cursor: pointer; font-size: 7px; line-height: 1.25; text-align: center; }
.finish-round-button:hover { color: var(--paper); border-color: var(--paper); }
.finish-round-button[hidden] { display: none; }
@keyframes reshuffleReady { 50% { color: var(--gold); box-shadow: 3px 3px 0 #09070d, 0 0 0 2px rgba(244,198,95,.18); } }
@keyframes reshuffleCard {
  0% { transform: translateX(0) rotate(0); }
  28% { transform: translateX(-72px) rotate(-4deg); }
  58% { transform: translateX(72px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0); }
}
.deck-stage.is-reshuffling .game-card { animation: reshuffleCard 560ms steps(7, end); }
.action-button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #0b0911;
  box-shadow: 4px 4px 0 #09070d;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.action-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #09070d; }
.action-button kbd { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid currentColor; background: rgba(0,0,0,.12); font: inherit; line-height: 1; }
.action-button span { display: inline-grid; place-items: center; line-height: 1; }
.discard-button { color: #3a1f2d; background: var(--discard); }
.eat-button { color: #173928; background: var(--eat); }

.overlay {
  position: absolute;
  inset: 62px 0 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 18px;
  overflow: hidden auto;
  background: rgba(9,7,13,.97);
}
.overlay.show { display: grid; animation: overlayIn 140ms steps(3, end); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.menu-overlay { z-index: 140; }
.catalog-overlay { z-index: 150; }

.welcome-overlay { inset: 0; z-index: 100; background: #100c17; }
.welcome-panel {
  width: min(680px, 100%);
  max-height: 96dvh;
  overflow: hidden auto;
  padding: clamp(24px, 6vw, 42px);
  border: 2px solid #8f78a5;
  background: #211a2d;
  box-shadow: 0 0 0 4px #0c0911, 12px 12px 0 rgba(0,0,0,.5), inset 0 0 0 2px #3f334e;
  text-align: center;
}
.welcome-logo { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 18px; border: 4px solid #211a2d; outline: 3px solid var(--gold); color: #2b2030; background: var(--gold); box-shadow: 7px 7px 0 #0b0911; }
.welcome-logo span { font-size: 24px; font-weight: 900; }
.welcome-panel h1 { margin: 9px 0; font-size: clamp(31px, 8vw, 50px); letter-spacing: .1em; }
.welcome-panel > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.welcome-objective { display: grid; gap: 5px; margin: 16px 0 10px; padding: 11px 13px; border: 2px solid var(--gold); background: #17121f; text-align: left; }
.welcome-objective span { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.welcome-objective strong { color: var(--paper); font-size: 13px; line-height: 1.45; }
.welcome-objective small { color: var(--danger); font-size: 8px; line-height: 1.5; }
.welcome-loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.welcome-loop span { display: grid; gap: 4px; padding: 8px; border: 1px solid #5b4b68; background: #1a1522; text-align: left; }
.welcome-loop b { color: var(--paper); font-size: 9px; }
.welcome-loop small { color: var(--muted); font-size: 7px; line-height: 1.45; }
.welcome-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 12px; }
.welcome-legend span { padding: 9px 6px; border: 1px solid; font-size: 8px; }
.legend-edible { border-color: var(--eat-dark) !important; color: var(--eat); background: rgba(36,95,72,.18); }
.legend-inedible { border-color: var(--discard-dark) !important; color: var(--discard); background: rgba(128,60,67,.18); }
.best-score { margin: 10px 0; color: #8e7e99; font-size: 9px; }
.best-score strong { margin-left: 6px; color: var(--gold); font-size: 14px; }
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.welcome-actions .start-button { margin-top: 0; }
.secondary-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid #735e88;
  color: #d9cce3;
  background: #17121f;
  box-shadow: 4px 4px 0 #09070d;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
}
.secondary-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #09070d; }
.welcome-panel > small { display: block; margin-top: 13px; color: #74667e; font-size: 7px; }

.story-guide {
  position: absolute;
  z-index: 110;
  left: 18px;
  top: 150px;
  width: min(360px, calc(100% - 36px));
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  pointer-events: none;
  filter: drop-shadow(7px 8px 0 rgba(7,5,10,.72));
  animation: storyGuideEnter 240ms steps(4, end) both;
}
.story-guide[hidden] { display: none; }
.story-card-avatar {
  position: relative;
  width: 78px;
  height: 104px;
  overflow: hidden;
  border: 3px solid #1a1220;
  border-top-color: #ff9d5c;
  border-radius: 5px;
  background: #e9d9b7;
  box-shadow: 0 0 0 2px #8d765d, 5px 6px 0 #09070d;
  transform-origin: 50% 100%;
  animation: storyCardBreathe 1.4s steps(3, end) infinite;
}
.story-card-avatar::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 5px, #3e2d3f 6px);
}
.story-card-avatar .game-sprite { width: 70px; height: 70px; margin: 16px auto 0; }
.story-card-avatar i {
  position: absolute;
  z-index: 3;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #2c1d2d;
  color: #2b2030;
  background: var(--gold);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.story-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  min-height: 112px;
  padding: 11px 13px;
  border: 3px solid #8c71a2;
  color: var(--paper);
  background: rgba(20,15,27,.97);
  box-shadow: inset 0 0 0 2px #3b2d49;
  pointer-events: auto;
}
.story-dialog::before {
  content: "";
  position: absolute;
  left: -11px;
  bottom: 20px;
  width: 14px;
  height: 14px;
  border-left: 3px solid #8c71a2;
  border-bottom: 3px solid #8c71a2;
  background: #18121f;
  transform: rotate(45deg);
}
.story-dialog > small { grid-column: 1 / -1; color: #a991ba; font-size: 6px; letter-spacing: .16em; }
.story-dialog > strong { grid-column: 1 / -1; color: var(--gold); font-size: 13px; letter-spacing: .12em; }
.story-dialog > p {
  grid-column: 1 / -1;
  margin: 2px 0;
  color: #f6ebd4;
  font-size: 9px;
  line-height: 1.65;
  animation: storyTextIn 220ms steps(4, end) both;
}
.story-dialog > em { grid-column: 1 / -1; color: #8ee7ff; font-size: 7px; font-style: normal; line-height: 1.5; }
.story-progress { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.story-progress span { padding: 3px 5px; border: 1px solid #544460; color: #81718b; background: #100c17; font-size: 6px; }
.story-progress span.done { border-color: #3f8f62; color: #8ff0aa; background: #15231d; }
.story-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; margin-top: 3px; }
.story-actions button { min-height: 25px; padding: 4px 8px; border: 1px solid #665275; color: #b7a7c2; background: #211829; cursor: pointer; font-size: 6px; font-weight: 900; }
.story-actions .story-next { border-color: #c3993c; color: #2a1d24; background: var(--gold); }
.tutorial-focus { outline: 3px solid #8ee7ff !important; outline-offset: 3px; animation: tutorialFocus 860ms steps(2, end) infinite; }
@keyframes storyGuideEnter { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes storyCardBreathe { 50% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes storyTextIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tutorialFocus { 50% { outline-color: var(--gold); filter: brightness(1.18); } }

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: 100%;
  padding: clamp(18px, 4vw, 30px);
  overflow: hidden auto;
  border: 2px solid #8f78a5;
  border-radius: 4px;
  background: #211a2d;
  box-shadow: 0 0 0 4px #0c0911, 10px 10px 0 rgba(0,0,0,.45), inset 0 0 0 2px #3f334e;
}
.modal-panel::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--gold); box-shadow: -14px 0 #5e4d6d; }
.eyebrow { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.modal-panel h1 { margin: 7px 0 8px; color: var(--paper); font-size: clamp(23px, 4vw, 34px); letter-spacing: .06em; }
.modal-lead { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.rule-help { display: grid; grid-template-columns: auto 1fr; gap: 9px; margin: -7px 0 11px; padding: 9px 11px; border-left: 3px solid #8f78a5; background: #191520; font-size: 8px; line-height: 1.5; }
.rule-help b { color: var(--rare); }
.rule-help span { color: #b8aabd; }
.target-banner { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin-bottom: 18px; padding: 11px 13px; border: 2px solid var(--gold); background: #17121f; font-size: 10px; }
.target-banner span { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.target-banner strong { color: var(--paper); text-align: right; }
.target-banner small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.target-banner > i { grid-column: 1 / -1; height: 5px; overflow: hidden; border: 1px solid #564762; background: #0b0911; }
.target-banner > i > b { display: block; width: 0; height: 100%; background: var(--gold); transition: width 180ms steps(8, end); }

.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rule-card {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 16px;
  border: 2px solid #4d3f5d;
  color: var(--paper);
  background: #2c2439;
  box-shadow: 5px 5px 0 #0b0911;
  text-align: left;
  cursor: pointer;
}
.rule-card:hover, .rule-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); background: #372d46; outline: 0; }
.rule-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #0b0911; }
.rule-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #392b20; background: var(--gold); box-shadow: 3px 3px 0 #0b0911; }
.rule-copy { display: flex; flex-direction: column; }
.rule-copy small { color: #8f7ca0; font-size: 8px; letter-spacing: .15em; }
.rule-copy strong { margin-top: 7px; font-size: 17px; }
.rule-copy em { margin-top: 10px; color: #c8bad2; font-size: 10px; font-style: normal; line-height: 1.6; }
.rule-multiplier { justify-self: end; color: var(--gold); font-size: 23px; font-weight: 900; }
.rule-tier { color: #ad9ab7 !important; letter-spacing: .08em !important; }

.delete-confirm-overlay { z-index: 160; background: rgba(8,5,10,.985); }
.delete-confirm-panel { width: min(560px, 100%); border-color: var(--danger); }
.delete-confirm-card { display: grid; grid-template-columns: 74px 1fr; gap: 13px; align-items: center; padding: 13px; border: 1px solid #704052; background: #17121f; }
.delete-confirm-card .game-sprite { width: 70px; height: 70px; }
.delete-confirm-copy { display: grid; gap: 5px; min-width: 0; }
.delete-confirm-copy strong { color: var(--paper); font-size: 17px; }
.delete-confirm-copy small { color: var(--muted); font-size: 8px; }
.delete-confirm-copy em { color: #cbb9cc; font-size: 8px; font-style: normal; line-height: 1.5; }
.delete-confirm-panel > p { margin: 12px 0; color: var(--danger); font-size: 9px; line-height: 1.6; }
.delete-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.delete-confirm-actions button { min-height: 43px; }

.quest-overlay { background: rgba(14,7,16,.985); }
.quest-panel { border-color: #a85a74; box-shadow: 0 0 0 4px #0c0911, 10px 10px 0 rgba(0,0,0,.5), inset 0 0 0 2px #5a2f43; }
.quest-warning { margin-bottom: 14px; padding: 8px 10px; border: 1px solid #8a4057; color: var(--danger); background: #24121c; font-size: 9px; font-weight: 900; text-align: center; }
.quest-card { min-height: 252px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 14px; border: 2px solid #704052; color: var(--paper); background: #30202d; box-shadow: 5px 5px 0 #0b0911; text-align: left; cursor: pointer; }
.quest-card:hover, .quest-card:focus-visible { border-color: var(--danger); transform: translateY(-3px); outline: 0; }
.quest-card-head { display: flex; align-items: center; gap: 10px; }
.quest-card-icon { width: 48px; height: 48px; flex: 0 0 auto; background-size: 400% 400%; background-position: var(--meta-x) var(--meta-y); }
.quest-card-head small { color: var(--danger); font-size: 7px; }
.quest-card-head strong { display: block; margin-top: 4px; font-size: 15px; }
.quest-block { padding: 9px; border-left: 3px solid; background: #1a131d; }
.quest-block b { display: block; margin-bottom: 5px; font-size: 8px; letter-spacing: .12em; }
.quest-block span { display: block; color: #c5b4c7; font-size: 8px; line-height: 1.55; }
.quest-penalty { border-color: var(--danger); }
.quest-penalty b { color: var(--danger); }
.quest-requirement { border-color: var(--gold); }
.quest-requirement b { color: var(--gold); }
.quest-reward { color: var(--eat); font-size: 9px; font-weight: 900; line-height: 1.5; }
.quest-status-panel { width: min(620px, 100%); }
#questStatus, .deck-overlay, .collection-overlay { z-index: 75; }
.quest-status-state { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #765d84; color: var(--gold); background: #17121f; font-size: 10px; font-weight: 900; }
.quest-status-state.success { border-color: var(--eat-dark); color: var(--eat); }
.quest-status-state.failed { border-color: var(--discard-dark); color: var(--danger); }
.quest-status-reward { display: grid; gap: 5px; margin-top: 12px; padding: 11px; border-left: 3px solid var(--eat); color: var(--eat); background: #151d1a; font-size: 9px; }
.quest-status-reward span { color: #d2e6d2; line-height: 1.5; }
.quest-status-reward small { color: #7fa88b; font-size: 7px; }
.quest-status-empty { padding: 18px; border: 1px dashed #675771; color: var(--muted); background: #17121f; font-size: 9px; line-height: 1.7; }
.quest-history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.quest-history-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #554662; background: #17121f; font-size: 8px; }
.quest-history-list li.success b { color: var(--eat); }
.quest-history-list li.failed b { color: var(--danger); }
.quest-history-list span { color: var(--muted); text-align: right; }

.collection-status-panel { width: min(760px, 100%); height: min(680px, 100%); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; }
.collection-status-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #675771; color: var(--muted); background: #17121f; font-size: 8px; }
.collection-status-summary b { color: var(--gold); font-size: 12px; }
.collection-status-list { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px; padding: 2px 7px 8px 2px; overflow: hidden auto; }
.collection-status-card { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 2px solid #554662; color: var(--paper); background: #292135; box-shadow: 3px 3px 0 #0b0911; }
.collection-status-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.collection-status-card small { color: #9a88a4; font-size: 7px; }
.collection-status-card strong { font-size: 12px; }
.collection-status-card em { color: #c8bad2; font-size: 8px; font-style: normal; line-height: 1.5; }
.collection-status-card > b { color: var(--gold); font-size: 15px; }
.collection-index { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #745f87; color: var(--rare); background: #17121f; font-size: 10px; font-weight: 900; }
.collection-item-icon { width: 44px; height: 44px; border: 1px solid #665573; background-color: #111015; background-size: var(--meta-size-x) var(--meta-size-y); background-position: var(--meta-x) var(--meta-y); }
.item-status-card { grid-template-columns: 48px minmax(0, 1fr); }
.collection-status-empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed #675771; color: var(--muted); background: #17121f; font-size: 9px; line-height: 1.7; }

.deck-status-panel { width: min(900px, 100%); height: min(760px, 100%); display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; overflow: hidden; }
.deck-status-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #675771; color: var(--muted); background: #17121f; font-size: 8px; }
.deck-status-summary b { color: var(--gold); font-size: 12px; white-space: nowrap; }
.deck-status-summary span { line-height: 1.6; text-align: right; }
.deck-capacity-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px; }
.deck-capacity-summary > div { min-width: 0; display: grid; gap: 4px; padding: 9px; border: 1px solid #4f5e57; background: #15201c; }
.deck-capacity-summary small { color: #8eaa98; font-size: 7px; }
.deck-capacity-summary b { color: var(--eat); font-size: 11px; }
.deck-capacity-summary span { color: #b6c7ba; font-size: 7px; line-height: 1.4; }
.deck-status-list { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px; padding: 2px 7px 8px 2px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.deck-status-card { min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; border: 2px solid #554662; color: var(--paper); background: #292135; box-shadow: 3px 3px 0 #0b0911; }
.deck-status-card.rarity-uncommon { border-color: #617c58; }
.deck-status-card.rarity-rare { border-color: #8565a0; }
.deck-status-card.rarity-legendary { border-color: #b86a43; }
.deck-status-card.rarity-curse { border-color: #8b3c63; background: #231a2c; }
.deck-status-art { width: 60px; height: 60px; align-self: start; border: 1px solid #665573; background-color: #17121f; background-clip: padding-box; transform-origin: center; filter: hue-rotate(var(--sprite-hue, 0deg)) drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.deck-status-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deck-status-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deck-status-head strong { font-size: 13px; }
.deck-status-head b { color: var(--gold); font-size: 10px; }
.deck-status-copy small { color: #9a88a4; font-size: 7px; line-height: 1.4; }
.deck-status-copy em { color: var(--paper); font-size: 9px; font-style: normal; }
.deck-status-copy > em { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.deck-status-copy i { margin-top: 3px; color: #c8bad2; font-size: 8px; font-style: normal; line-height: 1.55; }
.keyword-glossary { max-height: 132px; margin-top: 10px; overflow: hidden auto; border: 1px solid #554662; background: #17121f; }
.keyword-glossary summary { padding: 10px 12px; color: var(--gold); font-size: 9px; cursor: pointer; }
.keyword-glossary > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 10px 10px; }
.keyword-glossary > div > div { display: grid; gap: 4px; padding: 8px; border-top: 1px dashed #4a3d55; }
.keyword-glossary b { color: var(--eat); font-size: 8px; }
.keyword-glossary span { color: var(--muted); font-size: 7px; line-height: 1.55; }

.countdown-overlay { inset: 0; z-index: 80; background: rgba(10,8,14,.9); }
.countdown-pixel { color: var(--eat); text-shadow: 6px 6px 0 #173b2a; font-size: clamp(70px, 20vw, 140px); font-weight: 900; letter-spacing: .05em; }
.countdown-pixel.pop { animation: countPop 420ms steps(5, end); }
@keyframes countPop { 0% { transform: scale(.4); opacity: 0; } 45% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(.85); opacity: .4; } }

.summary-panel { width: min(620px, 100%); }
.milestone-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 14px;
  margin: -6px 0 14px;
  padding: 10px 12px;
  border: 1px solid #6c587e;
  background: #17121f;
}
.milestone-summary span { color: var(--muted); font-size: 9px; }
.milestone-summary strong { color: var(--gold); font-size: 11px; }
.milestone-meter { grid-column: 1 / -1; height: 6px; border: 1px solid #4d4058; background: #0c0911; overflow: hidden; }
.milestone-meter i { display: block; width: 0; height: 100%; background: var(--eat); transition: width 240ms steps(8, end); }
.receipt { padding: 14px; border: 2px solid #594965; color: #34293b; background: #eadab9; box-shadow: inset 4px 0 0 rgba(73,54,77,.15); }
.receipt-line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 3px; border-bottom: 1px dashed #9c876f; font-size: 11px; }
.receipt-line.detail { padding: 3px 10px; border: 0; color: #7d6a70; font-size: 9px; }
.receipt-line.bonus { color: #71457e; }
.receipt-line.rule { color: #36604a; font-weight: 900; }
.receipt-line.total { margin-top: 7px; padding-top: 13px; border-top: 3px double #4b394d; border-bottom: 0; font-size: 19px; font-weight: 900; }
.quest-result { margin: 11px 0; padding: 10px 12px; border: 1px solid #704052; background: #1a131d; font-size: 9px; line-height: 1.6; }
.quest-result.success { border-color: var(--eat-dark); color: var(--eat); }
.quest-result.failed { border-color: var(--discard-dark); color: var(--danger); }
.rule-result-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.rule-result { padding: 5px 7px; border: 1px solid #554662; color: #83748d; background: #18131f; font-size: 8px; }
.rule-result.achieved { border-color: var(--eat-dark); color: var(--eat); }
.active-rules { margin: 12px 0; border: 1px solid #4d4058; background: #18131f; }
.active-rules summary { padding: 10px; color: var(--muted); font-size: 9px; cursor: pointer; }
.active-rules ul { max-height: 130px; margin: 0; padding: 0 12px 10px; overflow: auto; list-style: none; }
.active-rules li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed #41364a; font-size: 8px; }
.active-rules li span { color: #9787a2; text-align: right; }

.primary-button {
  width: 100%;
  min-height: 50px;
  display: grid;
  place-items: center;
  margin-top: 10px;
  border: 2px solid #0b0911;
  color: #193a2a;
  background: var(--eat);
  box-shadow: 4px 4px 0 #09070d;
  cursor: pointer;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.primary-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #09070d; }
.primary-button:disabled { cursor: wait; opacity: .72; filter: saturate(.7); }
.primary-button.danger-action { color: #421d29; background: var(--danger); }

.shop-panel-inner { width: min(820px, 100%); padding: 18px; }
.shop-panel-inner .modal-lead { margin-bottom: 10px; font-size: 9px; }
.shop-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shop-heading h1 { margin-bottom: 2px; }
.shop-wallet { min-width: 94px; padding: 9px 12px; border: 2px solid #69536b; color: var(--gold); background: #17121f; text-align: right; }
.shop-wallet span { display: block; color: var(--muted); font-size: 8px; }
.shop-wallet strong { font-size: 20px; }
.shop-plate-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -3px 0 7px; padding: 7px 9px; border: 1px solid #4f5e57; color: #a9bbae; background: #15201c; font-size: 7px; line-height: 1.4; }
.shop-plate-summary b { color: var(--eat); }
.plate-upgrade-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 8px; border: 1px solid #765d84; background: #241d2f; }
.plate-upgrade-row > span { display: grid; gap: 4px; }
.plate-upgrade-row b { color: var(--gold); font-size: 10px; }
.plate-upgrade-row small { color: var(--muted); font-size: 7px; }
.plate-upgrade-row .shop-reroll-button { min-width: 210px; }
.shop-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 11px 0 7px; padding-bottom: 5px; border-bottom: 2px solid #4c3e58; }
.shop-section-title span { color: var(--paper); font-size: 12px; font-weight: 900; }
.shop-section-title small { color: var(--muted); font-size: 8px; }
.shop-section-title b { color: var(--gold); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-item-card { position: relative; min-height: 82px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 9px 10px 22px; border: 2px solid #4d5f59; color: var(--paper); background: #24312f; box-shadow: 4px 4px 0 #0b0911; text-align: left; cursor: pointer; }
.shop-item-card:hover { border-color: var(--eat); }
.shop-item-icon { width: 44px; height: 44px; place-self: start center; border: 1px solid #557268; background-color: #111015; background-size: var(--meta-size-x, 400%) var(--meta-size-y, 400%); background-position: var(--meta-x) var(--meta-y); }
.shop-item-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.shop-item-card small { color: #86a494; font-size: 7px; }
.shop-item-card strong { margin-top: 4px; font-size: 12px; }
.shop-item-card em { margin-top: 6px; color: #b6c8bc; font-size: 8px; font-style: normal; line-height: 1.45; }
.shop-card {
  --shop-rarity: #8b9098;
  position: relative;
  min-height: 118px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px;
  border: 3px solid var(--shop-rarity);
  color: var(--paper);
  background: #2c2439;
  box-shadow: 4px 4px 0 #0b0911, inset 0 0 0 1px color-mix(in srgb, var(--shop-rarity) 48%, transparent);
  text-align: left;
  cursor: pointer;
}
.shop-card.rarity-common { --shop-rarity: #8b9098; }
.shop-card.rarity-uncommon { --shop-rarity: #4d9eff; }
.shop-card.rarity-rare { --shop-rarity: #f2c14e; }
.shop-card.rarity-legendary { --shop-rarity: #e05252; }
.shop-card.rarity-curse { --shop-rarity: #a96ad8; }
.shop-card:hover, .shop-card:focus-visible { border-color: color-mix(in srgb, var(--shop-rarity) 72%, white); outline: 0; filter: brightness(1.08); }
.shop-card-icon { display: block; width: 46px; height: 46px; place-self: start center; border: 1px solid var(--shop-rarity); background-color: #18131f; background-clip: padding-box; transform-origin: center; filter: hue-rotate(var(--sprite-hue, 0deg)) drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.shop-card-copy { display: flex; flex-direction: column; min-width: 0; }
.shop-card-copy small { color: var(--shop-rarity); font-size: 7px; font-weight: 900; line-height: 1.35; }
.shop-card-copy strong { margin-top: 4px; font-size: 13px; line-height: 1.2; }
.shop-card-copy em, .shop-card-copy i { margin-top: 6px; color: #bbaaC5; font-size: 8px; font-style: normal; line-height: 1.35; }
.shop-card-copy i { color: #8e7e99; }
.shop-card-copy .shop-price-note { margin-top: 7px; padding-top: 5px; border-top: 1px dashed #51445c; color: var(--gold); }
.price-tag { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px; color: #352717; background: var(--gold); font-size: 9px; font-weight: 900; }
.shop-reroll-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0 3px; }
.shop-reroll-row small { color: #887890; font-size: 7px; text-align: right; }
.shop-reroll-button { min-width: 190px; min-height: 38px; display: grid; place-items: center; padding: 9px 12px; border: 2px solid #765d84; color: var(--gold); background: #241d2f; box-shadow: 3px 3px 0 #09070d; cursor: pointer; font-weight: 900; line-height: 1.25; text-align: center; }
.shop-reroll-button:disabled { color: #706477; border-color: #463b4e; cursor: not-allowed; box-shadow: none; }
.shop-lock-button { min-width: 176px; min-height: 38px; padding: 8px 12px; border: 2px solid #5f526b; color: #c4b2ce; background: #1b1623; box-shadow: 3px 3px 0 #09070d; cursor: pointer; font-weight: 900; }
.shop-lock-button.is-locked { border-color: var(--gold); color: #2f2315; background: var(--gold); }
.deck-manager { max-height: 120px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 3px; overflow: auto; }
.deck-chip { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 2px 7px; padding: 7px; border: 1px solid #554761; color: var(--paper); background: #282131; text-align: left; cursor: pointer; }
.deck-chip > span { grid-row: span 3; place-self: center; width: 30px; height: 30px; border: 1px solid #493b52; background-color: #18131f; background-clip: padding-box; transform-origin: center; filter: hue-rotate(var(--sprite-hue, 0deg)) drop-shadow(2px 2px 0 rgba(0,0,0,.3)); }
.deck-chip b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.deck-chip small { color: var(--muted); font-size: 7px; }
.deck-chip i { color: var(--danger); font-size: 7px; font-style: normal; }
.empty-shop { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
#shopMessage[data-tone="error"] { color: var(--danger); }
#shopMessage[data-tone="success"] { color: var(--eat); }

.draft-reward-panel { width: min(820px, 100%); }
.draft-reward-grid { margin-top: 14px; }
.draft-card { padding-bottom: 31px; }
.draft-card-points { min-width: 0; display: flex; align-items: baseline; gap: 7px; margin-top: 8px; color: #d8cadf; line-height: 1; white-space: nowrap; }
.draft-card-points > span:not(.draft-point-separator) { display: inline-flex; align-items: baseline; gap: 5px; }
.draft-card-points b { font-size: 17px; line-height: 1; }
.draft-eat-point b { color: var(--eat); }
.draft-discard-point b { color: var(--discard); }
.draft-point-separator { color: #75667f; font-size: 13px; }
.draft-pick-label { position: absolute; right: 8px; bottom: 7px; padding: 4px 8px; color: #17121f; background: var(--shop-rarity); font-size: 8px; font-weight: 900; }
.draft-wallets { display: flex; gap: 7px; }
.draft-wallets .shop-wallet { min-width: 76px; }
.draft-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.draft-actions > button { width: 100%; min-width: 0; }
.delete-confirm-actions > button { width: 100%; min-width: 0; }
.deck-remove-token { grid-column: 1 / -1; min-height: 30px; margin-top: 6px; border: 1px solid #a84d63; color: #ffd9df; background: #4a202d; cursor: pointer; font-size: 8px; font-weight: 900; }
.deck-remove-token:hover, .deck-remove-token:focus-visible { border-color: var(--danger); background: #642739; outline: 0; }

.unlocked-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.unlocked-modes[hidden] { display: none; }
.mode-button { min-width: 0; min-height: 58px; display: grid; gap: 5px; padding: 9px 10px; border: 2px solid #776384; color: var(--paper); background: #2a2235; box-shadow: 3px 3px 0 #09070d; text-align: left; cursor: pointer; }
.mode-button b { color: var(--gold); font-size: 10px; }
.mode-button small { color: #b8a9c2; font-size: 7px; line-height: 1.5; }
.mode-button.endless-mode-button { border-color: #5f8b79; background: #1d302b; }
.mode-button.hard-mode-button { border-color: #9b5665; background: #38212a; }

.game-menu-panel { width: min(560px, 100%); }
.menu-mode-label { margin: 4px 0 11px; padding: 8px 10px; border-left: 4px solid var(--gold); color: var(--gold); background: #17121f; font-size: 9px; font-weight: 900; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.setting-toggle, .menu-wide-button { min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 2px solid #6b5878; color: var(--paper); background: #2b2337; box-shadow: 3px 3px 0 #09070d; cursor: pointer; text-align: left; }
.setting-toggle b { color: var(--eat); }
.setting-toggle.is-off b { color: var(--danger); }
.font-size-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 12px; border: 1px solid #584963; background: #1a1522; }
.font-size-setting > span { display: grid; gap: 4px; }
.font-size-setting small, .menu-wide-button small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.font-size-setting > div { display: flex; gap: 4px; }
.font-size-setting button { min-width: 47px; min-height: 34px; border: 1px solid #6e5b7a; color: #b9a8c3; background: #282031; cursor: pointer; }
.font-size-setting button.is-selected { border-color: var(--gold); color: #2f2315; background: var(--gold); font-weight: 900; }
.menu-wide-button { width: 100%; margin-top: 8px; flex-wrap: wrap; }
.menu-rules { margin-top: 8px; border: 2px solid #5f506c; color: var(--paper); background: #17121f; box-shadow: 3px 3px 0 #09070d; }
.menu-rules summary { padding: 11px 12px; color: var(--gold); cursor: pointer; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.menu-rules[open] summary { border-bottom: 1px solid #493b55; }
.menu-objective { margin: 9px 10px 6px; padding: 8px 9px; border-left: 3px solid var(--gold); color: var(--paper); background: #211a2a; font-size: 8px; font-weight: 900; line-height: 1.5; }
.menu-rules ul { display: grid; gap: 6px; margin: 0; padding: 7px 10px 11px; list-style: none; }
.menu-rules li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed #403449; font-size: 7px; line-height: 1.5; }
.menu-rules li:last-child { padding-bottom: 0; border-bottom: 0; }
.menu-rules li b { color: #c49aff; }
.menu-rules li span { color: var(--muted); }
.game-menu-panel .primary-button { margin-top: 13px; }
.menu-home-button { border-color: #a56c42; background: #35241f; }

.catalog-panel { width: min(940px, 100%); height: min(760px, 100%); display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.catalog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.catalog-heading h1 { margin-bottom: 3px; }
.catalog-tools { display: flex; align-items: center; gap: 8px; margin: 7px 0 11px; padding: 8px 10px; border: 1px solid #594a64; background: #17121f; }
.catalog-tools label, .catalog-tools span { color: #b9a8c3; font-size: 8px; }
.catalog-tools span { margin-left: auto; color: var(--gold); font-weight: 900; }
.catalog-tools select { min-height: 32px; padding: 5px 28px 5px 8px; border: 1px solid #796487; color: var(--paper); background: #2a2234; }
.catalog-grid { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(176px, auto); align-content: start; gap: 10px; padding: 3px 6px 14px 3px; overflow: auto; }
.catalog-grid .deck-status-card { min-height: 176px; grid-template-columns: 58px minmax(0, 1fr); align-content: start; overflow: hidden; cursor: pointer; }
.catalog-grid .deck-status-art { width: 54px; height: 54px; }
.catalog-grid .deck-status-copy { height: 100%; }
.catalog-grid .deck-status-head b { display: none; }
.catalog-grid .deck-status-copy i { min-height: 3.1em; display: -webkit-box; overflow: hidden; color: #ded2e5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.catalog-grid .deck-status-card.is-inspectable:hover, .catalog-grid .deck-status-card.is-inspectable:focus-visible { border-color: var(--gold); outline: 0; background: #352b42; }
.catalog-inspect-hint { margin-top: auto; padding-top: 6px; border-top: 1px dashed #554662; color: var(--gold); font-size: 8px; font-weight: 900; }
.catalog-detail-overlay { z-index: 165; background: rgba(8,6,12,.92); }
.catalog-detail-panel { width: min(850px, 100%); max-height: min(820px, 100%); overflow: auto; }
.catalog-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.catalog-detail-layout { display: grid; grid-template-columns: var(--card-width) minmax(0, 1fr); align-items: center; gap: clamp(22px, 5vw, 54px); }
.catalog-card-preview { position: relative; width: var(--card-width); height: var(--card-height); margin: 0 auto; }
.catalog-preview-game-card { cursor: default; }
.catalog-detail-copy { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.catalog-detail-copy > small { color: var(--rare); font-size: 10px; }
.catalog-detail-copy > strong { color: var(--paper); font-size: clamp(24px, 4vw, 38px); }
.catalog-detail-points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.catalog-detail-points > span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 2px solid; background: #201927; }
.catalog-detail-points small { font-size: 9px; }
.catalog-detail-points b { font-size: 24px; }
.catalog-detail-points .eat { border-color: var(--eat-dark); color: var(--eat); }
.catalog-detail-points .discard { border-color: var(--discard-dark); color: var(--discard); }
.catalog-detail-copy section { padding: 14px; border-left: 4px solid var(--gold); background: #17121f; }
.catalog-detail-copy section small { color: var(--gold); font-size: 8px; letter-spacing: .12em; }
.catalog-detail-copy section p { margin: 9px 0 0; color: #e2d6e7; font-size: calc(10px + var(--ui-copy-step)); line-height: 1.65; }

html { --ui-copy-step: 4px; }
html[data-font-size="small"] { --ui-copy-step: 2px; }
html[data-font-size="large"] { --ui-copy-step: 6px; }
:is(.modal-lead, .card-effect, .shop-card-copy em, .shop-card-copy i, .shop-item-card em, .deck-status-copy i, .collection-status-card em, .quest-block span, .quest-reward, .story-dialog > p) { font-size: max(6px, calc(8px + var(--ui-copy-step))); }
:is(.primary-button, .secondary-button, .shop-reroll-button, .shop-lock-button, .setting-toggle, .menu-wide-button, .mode-button) { font-size: max(8px, calc(10px + var(--ui-copy-step))); }

.score-floater { position: absolute; z-index: 35; left: 50%; top: 44%; color: var(--gold); text-shadow: 3px 3px 0 #0b0911; font-size: 25px; font-weight: 900; pointer-events: none; animation: scoreFloat 700ms steps(7, end) forwards; }
.score-floater.eat { color: var(--eat); }
.score-floater.discard { color: var(--discard); }
.score-floater.postpone { color: #c897ff; }
.score-floater.negative { color: var(--danger); }
@keyframes scoreFloat { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.5); } 25% { opacity: 1; transform: translate(-50%, 0) scale(var(--score-scale)); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(var(--score-scale)); } }
.effect-flash { --toast-accent: #77dbff; position: relative; width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 9px; overflow: hidden; border: 2px solid var(--toast-accent); color: #f9f4e4; background: linear-gradient(135deg, color-mix(in srgb, var(--toast-accent) 19%, #17121f), #17121f 62%); box-shadow: 4px 4px 0 #09070d, inset 3px 0 0 var(--toast-accent); font-size: 8px; font-weight: 900; line-height: 1.45; text-align: left; pointer-events: none; animation: effectFlash 1450ms steps(10, end) forwards; }
.effect-flash::after { content: ""; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--toast-accent) 4px); transform: translateY(0); animation: toastScan 620ms steps(5, end) 1; pointer-events: none; }
.effect-flash > b { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; color: var(--toast-accent); background: #0d0a13; font-size: 14px; }
.effect-flash > span { min-width: 0; display: grid; gap: 2px; }
.effect-flash small { overflow: hidden; color: var(--toast-accent); font-size: 6px; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.effect-flash em { color: #f9f4e4; font-size: 8px; font-style: normal; line-height: 1.4; }
.effect-flash.tone-growth, .effect-flash.tone-fruit { --toast-accent: #72ff99; }
.effect-flash.tone-hard { --toast-accent: #ffad42; }
.effect-flash.tone-mutation, .effect-flash.tone-destroy { --toast-accent: #ff5f76; }
.effect-flash.tone-economy { --toast-accent: #ffe06e; }
.effect-flash.tone-generate { --toast-accent: #72e3ff; }
.effect-flash.tone-reshuffle { --toast-accent: #c49aff; }
@keyframes effectFlash { 0% { opacity: 0; transform: translateX(24px) scale(.92); } 14%, 76% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(12px) scale(.96); } }
@keyframes toastScan { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.point-mutation-burst { position: absolute; z-index: 47; top: 43%; right: -28px; display: grid; gap: 4px; pointer-events: none; animation: mutationBurst 1150ms steps(9, end) forwards; }
.point-mutation-burst span { display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px; min-width: 114px; padding: 5px 7px; border: 2px solid currentColor; background: #120f1c; box-shadow: 3px 3px 0 #09070d; }
.point-mutation-burst small { overflow: hidden; max-width: 72px; color: #dfd5e8; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.point-mutation-burst b { font-family: "Fusion Pixel 12px Monospaced zh_hans", monospace; font-size: 10px; white-space: nowrap; }
.point-mutation-burst .up { color: #72ff99; }
.point-mutation-burst .down { color: #ff5f76; }
@keyframes mutationBurst { 0% { opacity: 0; transform: translateX(18px) scale(.78); } 18%, 72% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateY(-28px) scale(.96); } }
.home-card-rain { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(74,48,90,.42), transparent 33%), linear-gradient(180deg, #17101f, #09070d); pointer-events: none; }
.home-card-rain::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, transparent 0 20%, rgba(9,7,13,.28) 56%, rgba(9,7,13,.78) 100%); }
.home-rain-card { position: absolute; left: var(--rain-x); top: -24vh; width: clamp(52px, 5.8vw, 76px); aspect-ratio: 1 / 1.34; overflow: hidden; border: 2px solid rgba(255,237,194,.68); border-radius: 5px; opacity: 0; background: #e8d8b8; box-shadow: 6px 8px 0 rgba(5,3,8,.48), inset 0 0 0 3px rgba(74,52,61,.34); animation: homeCardFall var(--rain-duration) linear var(--rain-delay) 1 both; will-change: transform, opacity; }
.home-rain-card::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(91,58,69,.34); background-image: linear-gradient(rgba(91,58,69,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,58,69,.08) 1px, transparent 1px); background-size: 6px 6px; pointer-events: none; }
.home-rain-art { position: absolute; z-index: 1; left: 8%; top: 50%; width: 84%; aspect-ratio: 1; transform: translateY(-50%); }
.home-rain-art .game-sprite { width: 100%; height: 100%; }
@keyframes homeCardFall {
  0% { opacity: 0; transform: translate3d(-50%, -18vh, 0) rotate(var(--rain-turn)) scale(var(--rain-scale)); }
  8%, 86% { opacity: var(--rain-opacity); }
  100% { opacity: 0; transform: translate3d(calc(-50% + var(--rain-drift)), 150vh, 0) rotate(var(--rain-turn-end)) scale(var(--rain-scale)); }
}

.home-panel { position: relative; z-index: 2; width: min(820px, 100%); padding: clamp(18px, 4vw, 34px); overflow: visible; border: 0; background: transparent; box-shadow: none; }
.home-hero { position: relative; isolation: isolate; min-height: clamp(250px, 43vh, 390px); display: grid; place-items: center; overflow: visible; border: 0; background: transparent; }
.home-hero::after { content: none; }
.home-logo { position: relative; z-index: 3; display: grid; place-items: center; color: #ffe078; font-size: clamp(78px, 13vw, 142px); font-weight: 900; letter-spacing: -.08em; line-height: .7; text-shadow: 5px 0 #37243f, -5px 0 #37243f, 0 5px #37243f, 0 -5px #37243f, 10px 11px 0 #08050c, 0 0 35px rgba(255,155,86,.38); transform: rotate(-2deg); animation: homeLogoFloat 2.8s steps(7, end) infinite; }
.home-logo span:last-child { color: #ff9a58; letter-spacing: -.04em; }
.home-hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.home-actions { width: min(610px, 92%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px auto 0; }
.home-actions > button { min-width: 0; min-height: 58px; display: grid; place-items: center; margin: 0; border: 0; border-radius: 2px; color: #f8edcf; background: rgba(25,17,31,.74); box-shadow: 0 5px 0 rgba(7,4,10,.58); backdrop-filter: blur(5px); }
.home-actions > button:hover, .home-actions > button:focus-visible { color: #251827; background: var(--gold); outline: 0; transform: translateY(-3px); }
.home-actions .primary-button { color: #2e1c25; background: #ffb15f; }
.home-actions b { font-size: 15px; letter-spacing: .08em; }
.home-actions small { color: #a99ab3; font-size: 7px; }
.home-actions .primary-button small { color: #4e3b28; }
.home-actions button:disabled { color: #75687b; background: rgba(25,20,29,.66); box-shadow: none; cursor: not-allowed; }
.home-actions button:disabled small { color: #5d5262; }
.mode-chooser { width: min(610px, 92%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 9px auto 0; animation: modeChooserIn 180ms steps(4, end); }
.mode-chooser[hidden] { display: none; }
.mode-chooser .mode-button { min-height: 62px; border: 0; background: rgba(30,22,38,.82); box-shadow: 0 4px 0 rgba(7,4,10,.48); }
.mode-button:disabled, .mode-button.is-locked { opacity: .48; cursor: not-allowed; filter: grayscale(.75); }
.home-footer { display: flex; justify-content: center; gap: 12px; margin-top: 13px; color: #b7a5c0; font-size: 9px; letter-spacing: .18em; }
.home-footer strong { color: var(--gold); font-size: 11px; }
@keyframes modeChooserIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes homeLogoFloat { 50% { transform: translateY(-7px) rotate(-1deg); } }

.item-draft-overlay { background: radial-gradient(circle at 50% 30%, rgba(78,55,96,.98), rgba(9,7,13,.985) 65%); }
.item-draft-panel { width: min(860px, 100%); }
.item-draft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.item-draft-card { --shop-rarity: var(--item-rarity, #8b9098); position: relative; min-width: 0; min-height: 230px; display: grid; grid-template-rows: 76px minmax(0, 1fr); gap: 10px; padding: 14px 14px 34px; border: 3px solid var(--shop-rarity); color: var(--paper); background: linear-gradient(145deg, color-mix(in srgb, var(--shop-rarity) 18%, #243a35), #1a1722 70%); box-shadow: 5px 5px 0 #09070d, inset 0 0 0 2px color-mix(in srgb, var(--shop-rarity) 18%, transparent); cursor: pointer; text-align: left; }
.item-draft-card:hover, .item-draft-card:focus-visible { border-color: color-mix(in srgb, var(--shop-rarity) 70%, white); transform: translateY(-4px); outline: 0; }
.item-draft-card.is-consumable { background: linear-gradient(145deg, color-mix(in srgb, var(--shop-rarity) 24%, #3c3021), #1a1722 70%); }
.item-draft-icon { width: 76px; height: 76px; border: 2px solid #79658e; background-size: var(--meta-size-x) var(--meta-size-y); background-position: var(--meta-x) var(--meta-y); image-rendering: pixelated; }
.item-draft-copy { min-width: 0; display: grid; align-content: start; gap: 7px; }
.item-draft-copy small { color: var(--shop-rarity); font-size: 7px; }
.item-draft-copy strong { color: var(--paper); font-size: 17px; }
.item-draft-copy em { color: #c7b9cd; font-size: 9px; font-style: normal; line-height: 1.65; }
.item-essence-preview { display: grid; gap: 4px; margin-top: 3px; padding: 7px 8px; border-left: 3px solid var(--gold); color: #dfd1e6; background: rgba(8,6,12,.35); font-size: 9px; line-height: 1.5; }
.item-essence-preview b { color: var(--gold); font-size: 8px; letter-spacing: .12em; }
.item-status-card.is-essence { border-color: #a98c45; background: linear-gradient(135deg, #2e2930, #201829); }
.item-progress { display: block; height: 7px; margin-top: 8px; overflow: hidden; border: 1px solid #584b62; background: #100c16; }
.item-progress i { display: block; height: 100%; background: linear-gradient(90deg, #70d38b, #ffd166); }
.item-progress-copy { display: block; margin-top: 5px; color: #a99bb2; font-size: 8px; font-weight: 400; line-height: 1.45; }
.item-choice-overlay { z-index: 145; background: rgba(8,6,12,.985); }
.item-choice-panel { width: min(820px, 100%); }
.item-category-panel { width: min(680px, 100%); }
.item-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.item-category-button { min-width: 0; min-height: 88px; display: grid; align-content: center; gap: 7px; padding: 12px; border: 3px solid #765d84; color: var(--paper); background: #2b2337; box-shadow: 4px 4px 0 #09070d; cursor: pointer; }
.item-category-button:hover, .item-category-button:focus-visible { border-color: var(--gold); transform: translateY(-3px); outline: 0; }
.item-category-button b { color: var(--gold); font-size: 15px; }
.item-category-button span { color: #c8bad2; font-size: 8px; line-height: 1.4; }

.deck-stage.card-punch { animation: cardPunch 260ms steps(5, end); }
.deck-stage.postpone-punch { animation: postponePunch 260ms steps(5, end); }
.juice-burst { position: absolute; z-index: 49; inset: 50%; pointer-events: none; }
.juice-burst i { --angle: calc(var(--spark) * 51deg); position: absolute; width: 6px; height: 6px; background: var(--gold); box-shadow: 7px 0 #ff8e5b; animation: juiceSpark 480ms steps(6, end) forwards; transform: rotate(var(--angle)) translateX(20px); }
.juice-burst.heavy i { width: 8px; height: 8px; background: #fff0a3; box-shadow: 9px 0 #ff667f; }
.pick-burst { position: absolute; z-index: 170; left: 50%; top: 49%; min-width: min(430px, 84%); display: grid; gap: 6px; padding: 16px 20px; border: 3px solid var(--gold); color: #291c25; background: var(--gold); box-shadow: 7px 7px 0 #09070d; text-align: center; pointer-events: none; animation: pickBurst 720ms steps(8, end) forwards; }
.pick-burst.item { border-color: #80e0b4; background: #80e0b4; }
.pick-burst small { font-size: 7px; letter-spacing: .22em; }
.pick-burst b { font-size: 15px; }
@keyframes cardPunch { 35% { transform: scale(1.035); } 70% { transform: scale(.99); } }
@keyframes postponePunch { 40% { transform: rotate(1.5deg) scale(1.015); } 75% { transform: rotate(-1deg); } }
@keyframes juiceSpark { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(10px) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(105px) scale(1); } }
@keyframes pickBurst { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.65); } 20%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -38px) scale(1.08); } }

@media (max-width: 720px) {
  :root {
    --card-height: min(44dvh, 376px);
    --card-width: min(calc(var(--card-height) / 1.34), calc(100vw - 48px));
  }
  .app { padding: 0; }
  .game-shell { width: 100%; height: 100%; min-height: 0; grid-template-rows: calc(52px + env(safe-area-inset-top)) 61px minmax(0, 1fr) calc(68px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  .topbar { gap: 7px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px; }
  .topbar-actions { gap: 4px; }
  .brand { gap: 7px; }
  .brand-mark { width: 31px; height: 31px; font-size: 10px; box-shadow: 3px 3px 0 #0b0911; }
  .brand b { font-size: 13px; }
  .brand small, .phase-chip { font-size: 7px; }
  .phase-chip { padding: 5px 7px; }
  .icon-button { width: 31px; height: 31px; font-size: 16px; }
  .phase-chip { display: none; }
  .hud { gap: 3px; padding: 6px; }
  .hud-cell { padding: 5px 4px; border-left-width: 2px; text-align: center; }
  .hud-cell span { font-size: 7px; }
  .hud-cell strong { font-size: 13px; }
  .hud-cell small { font-size: 5px; }
  .inventory-bar { top: calc(127px + env(safe-area-inset-top)); left: 7px; right: 7px; }
  .inventory-bar > b { display: none; }
  .item-chip { width: 25px; height: 25px; }
  .playfield { grid-template-rows: minmax(34px, .36fr) minmax(250px, 4fr) minmax(34px, .36fr); }
  .effect-feed { top: 7px; right: 7px; width: min(76%, 244px); gap: 3px; transform: none; }
  .effect-flash { grid-template-columns: 19px minmax(0, 1fr); gap: 5px; padding: 5px 7px; font-size: 7px; line-height: 1.25; }
  .effect-flash > b { width: 18px; height: 18px; font-size: 10px; }
  .action-zone { min-width: 104px; padding: 3px 9px; column-gap: 4px; }
  .action-zone b { font-size: 9px; }
  .action-zone small { font-size: 6px; }
  .zone-arrow { font-size: 16px; }
  .deck-stage { width: calc(var(--card-width) + 32px); height: calc(var(--card-height) + 20px); }
  .game-card { min-width: 0; max-width: 100%; gap: 6px; padding: 12px; }
  .card-head { min-width: 0; gap: 4px; }
  .rarity-tag, .edibility-tag, .card-code { min-width: 0; max-width: 48%; overflow: hidden; padding: 3px 5px; font-size: 7px; text-overflow: clip; white-space: nowrap; }
  .card-art { min-height: 65px; }
  .card-title strong { font-size: clamp(23px, 7vw, 31px); }
  .card-effect { min-height: 30px; padding: 5px 7px; font-size: 8px; }
  .card-scores > span { grid-template-columns: minmax(0, .72fr) minmax(0, 1.08fr); min-height: 48px; padding: 4px 5px; }
  .card-scores i { padding-left: 0; font-size: 8px; }
  .card-scores i small { font-size: 7px; }
  .card-point-value { overflow: hidden; font-size: clamp(21px, 27cqi, 29px); }
  .card-point-delta { font-size: 8px; }
  .fruit-combo-flash { left: 2px; top: 27%; min-width: 112px; padding: 6px 8px; }
  .fruit-combo-flash b { font-size: 24px; }
  .hard-eat-flash { left: 1px; bottom: 20%; min-width: 118px; padding: 5px 7px; }
  .hard-eat-flash b { font-size: 23px; }
  .point-mutation-burst { top: 46%; right: -2px; }
  .point-mutation-burst span { min-width: 102px; padding: 4px 5px; }
  .controls { grid-template-columns: minmax(88px, 1fr) .9fr minmax(88px, 1fr); gap: 8px; padding: 8px 9px calc(8px + env(safe-area-inset-bottom)); }
  .control-center small { display: none; }
  .reshuffle-button { min-width: 76px; padding: 6px; font-size: 8px; }
  .action-button { min-height: 44px; font-size: 11px; }
  .action-button kbd { width: 22px; height: 22px; }
  .overlay { inset: calc(52px + env(safe-area-inset-top)) 0 0; padding: 9px 9px max(9px, env(safe-area-inset-bottom)); }
  .welcome-overlay, .countdown-overlay { inset: 0; padding: max(11px, env(safe-area-inset-top)) 11px max(11px, env(safe-area-inset-bottom)); }
  .welcome-panel { padding: 18px 14px; }
  .welcome-logo { width: 56px; height: 56px; margin-bottom: 10px; }
  .welcome-actions { grid-template-columns: 1fr; gap: 7px; }
  .home-panel { padding: 10px; }
  .home-hero { min-height: 238px; }
  .home-logo { font-size: clamp(68px, 22vw, 86px); }
  .home-card-art { width: 98px; height: 98px; }
  .home-cat { left: 0; }
  .home-banana { right: 0; }
  .home-watermelon { right: 8%; }
  .home-hero p { right: 8px; bottom: 8px; left: 8px; font-size: 7px; }
  .home-actions, .mode-chooser { grid-template-columns: 1fr; }
  .home-actions > button, .mode-chooser .mode-button { min-height: 48px; }
  .home-footer { align-items: center; flex-direction: column; gap: 4px; }
  .unlocked-modes { grid-template-columns: 1fr; }
  .welcome-loop { grid-template-columns: 1fr; }
  .welcome-legend { margin-top: 10px; }
  .story-guide {
    left: 7px;
    top: calc(118px + env(safe-area-inset-top));
    width: calc(100% - 14px);
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    filter: drop-shadow(4px 5px 0 rgba(7,5,10,.7));
  }
  .story-guide[data-placement="contract"] { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .story-card-avatar { width: 54px; height: 74px; border-width: 2px; }
  .story-card-avatar .game-sprite { width: 50px; height: 50px; margin-top: 12px; }
  .story-card-avatar i { width: 15px; height: 15px; border-width: 1px; font-size: 8px; }
  .story-dialog { min-height: 84px; padding: 8px 9px; border-width: 2px; gap: 3px 7px; }
  .story-dialog::before { left: -8px; bottom: 15px; width: 10px; height: 10px; border-width: 0 0 2px 2px; }
  .story-dialog > strong { font-size: 11px; }
  .story-dialog > p { font-size: 8px; line-height: 1.45; }
  .story-dialog > em { font-size: 6px; }
  .story-progress span { padding: 2px 4px; }
  .story-actions button { min-height: 23px; }
  .rule-help { grid-template-columns: 1fr; gap: 4px; }
  .target-banner { grid-template-columns: 1fr; }
  .target-banner strong { text-align: left; }
  .option-grid { grid-template-columns: 1fr; }
  .rule-card { min-height: 108px; grid-template-columns: 36px 1fr auto; grid-template-rows: 1fr; align-items: center; gap: 10px; padding: 12px; }
  .rule-copy strong { margin-top: 4px; font-size: 14px; }
  .rule-copy em { margin-top: 5px; font-size: 8px; }
  .rule-multiplier { align-self: center; font-size: 18px; }
  .quest-card { min-height: 218px; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 7px; padding: 10px; }
  .quest-card-head { grid-column: 1; }
  .quest-card-icon { width: 40px; height: 40px; }
  .quest-block { padding: 7px; }
  .quest-reward { grid-column: 1; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-item-grid { grid-template-columns: 1fr; }
  .shop-card { min-height: 118px; }
  .shop-panel-inner { padding: 12px 11px; }
  .draft-reward-panel { max-height: 100%; overflow: auto; }
  .draft-actions { grid-template-columns: 1fr; }
  .draft-wallets { align-self: stretch; }
  .draft-wallets .shop-wallet { flex: 1; min-width: 0; }
  .item-draft-grid { grid-template-columns: 1fr; }
  .item-draft-card { min-height: 176px; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr; }
  .item-draft-icon { width: 60px; height: 60px; }
  .item-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-category-button { min-height: 72px; }
  .shop-reroll-row { align-items: stretch; flex-direction: column; }
  .shop-reroll-row small { text-align: left; }
  .shop-lock-button { width: 100%; min-width: 0; }
  .plate-upgrade-row { align-items: stretch; flex-direction: column; }
  .plate-upgrade-row .shop-reroll-button { min-width: 0; }
  .deck-manager { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 170px; }
  .deck-status-panel { height: 100%; padding: 14px 12px; }
  .deck-capacity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-status-list { grid-template-columns: 1fr; max-height: none; }
  .deck-status-card { grid-template-columns: 52px minmax(0, 1fr); }
  .deck-status-art { width: 48px; height: 48px; }
  .keyword-glossary > div { grid-template-columns: 1fr; }
  .deck-status-summary { align-items: flex-start; flex-direction: column; }
  .deck-status-summary span { text-align: left; }
  .collection-status-panel { height: 100%; padding: 14px 12px; }
  .collection-status-list { grid-template-columns: 1fr; }
  .collection-status-summary { align-items: flex-start; flex-direction: column; }
  .game-menu-panel { width: 100%; }
  .menu-rules li { grid-template-columns: 60px minmax(0, 1fr); }
  .settings-grid, .font-size-setting { grid-template-columns: 1fr; }
  .font-size-setting > div { display: grid; grid-template-columns: repeat(3, 1fr); }
  .font-size-setting button { min-width: 0; }
  .catalog-panel { width: 100%; height: 100%; padding: 12px 10px; }
  .catalog-heading .shop-reroll-button { min-width: 96px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-auto-rows: minmax(154px, auto); }
  .catalog-grid .deck-status-card { min-height: 154px; }
  .catalog-tools { flex-wrap: wrap; }
  .catalog-tools span { width: 100%; margin-left: 0; }
  .catalog-detail-panel { width: 100%; height: 100%; padding: 12px 10px; }
  .catalog-detail-heading { margin-bottom: 12px; }
  .catalog-detail-heading .shop-reroll-button { min-width: 96px; }
  .catalog-detail-layout { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .catalog-detail-copy { width: min(100%, var(--card-width)); margin: 0 auto; }
  .shop-plate-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .delete-confirm-card { grid-template-columns: 58px 1fr; }
  .delete-confirm-card .game-sprite { width: 54px; height: 54px; }
  .delete-confirm-actions { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .phase-chip { display: none; }
  .brand small { display: none; }
}

@media (max-height: 650px) and (orientation: landscape) {
  :root { --card-height: min(48dvh, 290px); --card-width: calc(var(--card-height) / 1.34); }
  .game-shell { grid-template-rows: 46px 50px minmax(0, 1fr) 54px; }
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .overlay { inset: calc(46px + env(safe-area-inset-top)) 0 0; }
  .welcome-overlay, .countdown-overlay { inset: 0; }
  .hud { padding: 4px 8px; }
  .hud-cell { padding-top: 3px; padding-bottom: 3px; }
  .playfield { grid-template-rows: 26px minmax(210px, 1fr) 26px; }
  .action-zone { padding-top: 1px; padding-bottom: 1px; }
  .controls { padding-top: 5px; padding-bottom: 5px; }
  .action-button { min-height: 39px; }
  .card-art .game-sprite { width: auto; height: min(calc(100% - 8px), 128px); max-width: calc(100% - 10px); }
  .card-title strong { font-size: 22px; }
  .card-effect { min-height: 24px; line-height: 1.2; }
  .modal-panel { max-height: 94dvh; }
  .deck-status-panel { height: 100%; max-height: 100%; }
  .deck-capacity-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rule-card { min-height: 140px; display: grid; grid-template-columns: auto; grid-template-rows: auto 1fr auto; }
}

/* Readability baseline: even “small” keeps gameplay copy legible on phones. */
:is(.brand small, .hud-cell span, .hud-cell small, .action-zone small, .effect-flash small, .point-mutation-burst small, .home-actions small, .home-footer, .mode-button small, .item-draft-copy small, .font-size-setting small, .menu-wide-button small, .menu-rules li, .catalog-tools label, .catalog-tools span) {
  font-size: calc(7px + var(--ui-copy-step));
}
:is(.home-hero p, .item-draft-copy em, .effect-flash em, .deck-status-copy small, .deck-capacity-summary small, .deck-capacity-summary span, .keyword-glossary span, .story-dialog > em, .story-actions button) {
  font-size: calc(8px + var(--ui-copy-step));
}
:is(.action-zone b, .reshuffle-button, .deck-remove-token, .menu-objective, .target-banner span, .target-banner small) {
  font-size: calc(9px + var(--ui-copy-step));
}

/* Every dealt card is a real play-stack instance: split, riffle, close, then reveal. */
.deck-stage.is-dealing .stack-shadow { opacity: .72; filter: brightness(.92); }
.deal-layer { position: absolute; z-index: 70; inset: 0; overflow: hidden; background: linear-gradient(180deg, rgba(9,7,13,.44), transparent 38%); pointer-events: none; transition: opacity 160ms steps(4, end); }
.deal-layer.is-leaving { opacity: 0; }
.deal-copy { position: absolute; z-index: 90; left: 18px; top: 17px; display: flex; align-items: baseline; gap: 7px; padding: 7px 9px; border-left: 3px solid var(--gold); color: #f8edcf; background: rgba(12,9,16,.72); box-shadow: 4px 4px 0 rgba(4,3,7,.5); animation: dealCopyIn 260ms steps(5, end) both; }
.deal-copy small { color: #cdb7d6; font-size: 8px; letter-spacing: .16em; }
.deal-copy strong { color: var(--gold); font-size: calc(11px + var(--ui-copy-step)); white-space: nowrap; }
.deal-copy span { color: #d8cbdc; font-size: calc(7px + var(--ui-copy-step)); white-space: nowrap; }
.deal-layer.is-stacking .deal-copy { border-left-color: var(--eat); }
.deal-layer.is-stacking .deal-copy strong { color: var(--eat); }
.card-stack.is-shuffle-dealing { animation: shuffleDeckSettle 1660ms cubic-bezier(.2,.72,.2,1) both; }
.card-stack.is-shuffle-dealing .game-card { visibility: visible; opacity: 1; animation: riffleShuffleCard 1080ms cubic-bezier(.38,.04,.2,1) var(--shuffle-delay) both; }
.game-card.is-deal-covered { overflow: hidden; color: var(--gold); border-color: #f5d275; background: repeating-linear-gradient(45deg, #6c457e 0 16px, #382542 16px 32px); box-shadow: 0 0 0 2px #24172c, calc(5px + var(--depth) * 2px) calc(6px + var(--depth) * 3px) 0 #09070d; }
.game-card.is-deal-covered > * { opacity: 0; }
.game-card.is-deal-covered::after { content: "CE"; position: absolute; z-index: 5; inset: 18px; display: grid; place-items: center; border: 3px solid rgba(255,226,132,.62); color: var(--gold); background: radial-gradient(circle, rgba(255,209,102,.14), transparent 60%); font-size: clamp(28px, 6vw, 46px); font-weight: 900; text-shadow: 4px 4px 0 #17101d; }
@keyframes dealCopyIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shuffleDeckSettle {
  0% { opacity: 0; transform: translate3d(0, -46vh, 0) rotate(7deg) scale(.9); }
  13% { opacity: 1; transform: translate3d(0, -18px, 0) rotate(.8deg) scale(.98); }
  21%, 82% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  91% { opacity: 1; transform: translate3d(0, -7px, 0) rotate(-.35deg) scale(1.018); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes riffleShuffleCard {
  0%, 9% { transform: translate3d(0, calc(var(--depth) * 10px), 0) rotate(0) scale(calc(1 - var(--depth) * .025)); }
  25% { transform: translate3d(var(--shuffle-x), var(--shuffle-rank-y), 0) rotate(var(--shuffle-tilt)) scale(.78); }
  41% { transform: translate3d(var(--shuffle-x), var(--shuffle-weave-y), 0) rotate(var(--shuffle-tilt)) scale(.8); }
  57% { transform: translate3d(var(--shuffle-cross), var(--shuffle-weave-y), 0) rotate(var(--shuffle-counter-tilt)) scale(.84); }
  71% { transform: translate3d(0, calc(var(--depth) * 6px - 14px), 0) rotate(0) scale(.94); }
  84% { transform: translate3d(0, calc(var(--depth) * 10px + 4px), 0) rotate(.3deg) scale(calc(1 - var(--depth) * .025)); }
  100% { transform: translate3d(0, calc(var(--depth) * 10px), 0) rotate(0) scale(calc(1 - var(--depth) * .025)); }
}

.essence-awakening { position: absolute; z-index: 88; left: 50%; top: 49%; min-width: min(470px, 88%); display: grid; place-items: center; gap: 5px; padding: 18px 22px; overflow: hidden; border: 3px solid #ffe58d; color: #271928; background: linear-gradient(135deg, #fff0a8, #ffbd62 58%, #ff8d69); box-shadow: 9px 10px 0 #09070d; text-align: center; pointer-events: none; animation: essenceAwaken 1650ms steps(12, end) forwards; }
.essence-awakening::before, .essence-awakening::after { content: "✦"; position: absolute; color: rgba(255,255,255,.8); font-size: 42px; animation: essenceSpark 850ms steps(8, end) infinite; }
.essence-awakening::before { left: 7%; top: 12%; }
.essence-awakening::after { right: 7%; bottom: 8%; animation-delay: -340ms; }
.essence-awakening small { font-size: 9px; letter-spacing: .22em; }
.essence-awakening strong { font-size: 22px; }
.essence-awakening span { font-size: 12px; font-weight: 900; }
@keyframes essenceAwaken { 0% { opacity: 0; transform: translate(-50%, 18px) scale(.55); } 14%, 70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 77% { filter: brightness(1.5); transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1.08); } }
@keyframes essenceSpark { 50% { transform: rotate(90deg) scale(1.4); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}