:root {
  color-scheme: dark;
  --bg: #0e1512;
  --ink: #f1e4c8;
  --muted: rgba(241, 228, 200, .72);
  --dim: rgba(241, 228, 200, .48);
  --line: rgba(241, 228, 200, .18);
  --line2: rgba(241, 228, 200, .36);
  --gold: #d8a34b;
  --red: #a94335;
  --blue: #72a9b9;
  --panel: rgba(18, 28, 24, .84);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 24px 80px rgba(0, 0, 0, .42);
  --hint-confirm: "Nochmal tippen";
  --hint-blocked: "Blockiert";
  --hint-hand: "Doppeltipp oder Hochziehen: spielen";
  --hint-drop-table: "Loslassen: auf den Tisch";
  --hint-drag-table: "Auf den Tisch ziehen";
  --hint-release-play: "Loslassen: spielen";
  --hint-swipe-table: "Hochziehen: auf den Tisch";
  --hint-drag-hand: "Zur Hand ziehen";
  --hint-release-hand: "Loslassen: zurück";
  --hint-market-drag: "Nach unten ziehen: anwerben";
  --hint-market-release: "Loslassen: anwerben";
}
html[lang="en"] {
  --hint-confirm: "Tap again";
  --hint-blocked: "Blocked";
  --hint-hand: "Double-tap or swipe up: play";
  --hint-drop-table: "Release: to table";
  --hint-drag-table: "Drag to table";
  --hint-release-play: "Release: play";
  --hint-swipe-table: "Swipe up: to table";
  --hint-drag-hand: "Drag back to hand";
  --hint-release-hand: "Release: return";
  --hint-market-drag: "Drag down: recruit";
  --hint-market-release: "Release: recruit";
}
html[lang="nb"],
html[lang="no"] {
  --hint-confirm: "Trykk igjen";
  --hint-blocked: "Blokkert";
  --hint-hand: "Dobbeltrykk eller sveip opp: spill";
  --hint-drop-table: "Slipp: til bordet";
  --hint-drag-table: "Dra til bordet";
  --hint-release-play: "Slipp: spill";
  --hint-swipe-table: "Sveip opp: til bordet";
  --hint-drag-hand: "Dra tilbake til hånden";
  --hint-release-hand: "Slipp: tilbake";
  --hint-market-drag: "Dra ned: rekrutter";
  --hint-market-release: "Slipp: rekrutter";
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--sans);
  background:
    linear-gradient(180deg, rgba(14,21,18,.08), rgba(14,21,18,.86)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%232c5962'/%3E%3Cstop offset='.6' stop-color='%23182722'/%3E%3Cstop offset='1' stop-color='%23070b0a'/%3E%3C/linearGradient%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.018' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .82 0 0 0 0 .65 0 0 0 .12 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23g)'/%3E%3Cpath d='M0 700C190 590 290 740 470 630C650 520 760 625 955 480C1130 350 1320 390 1600 250v750H0z' fill='%23070b0a' opacity='.62'/%3E%3Cpath d='M0 560C165 450 265 530 405 420C520 330 675 385 820 280C940 190 1065 235 1195 145C1320 60 1450 95 1600 20V0H0z' fill='%23e4ebe4' opacity='.11'/%3E%3Cpath d='M120 345 260 145 360 345zm410-20L675 90l145 235zm520-35 145-220 160 220z' fill='%23eef3ed' opacity='.22'/%3E%3Crect width='1600' height='1000' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center top;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
    linear-gradient(90deg, rgba(0,0,0,.42), transparent 18%, transparent 82%, rgba(0,0,0,.42));
  mix-blend-mode: soft-light;
}
button, input { font: inherit; }
button {
  min-height: 42px;
  border: 1px solid var(--line2);
  border-radius: 7px;
  padding: .62rem .78rem;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(241,228,200,.13), rgba(241,228,200,.04));
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: rgba(216,163,75,.85); background: rgba(216,163,75,.14); }
button:not(:disabled) {
  transition: transform .14s ease, border-color .14s ease, background .14s ease, filter .14s ease;
}
button:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
}
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:disabled { opacity: .38; cursor: default; }
button.active { border-color: rgba(216,163,75,.86); color: #f8dca0; background: rgba(216,163,75,.16); }
button.confirm { border-color: rgba(216,163,75,.86); color: #f8dca0; background: linear-gradient(180deg, rgba(216,163,75,.2), rgba(82,48,14,.26)); box-shadow: 0 0 0 1px rgba(216,163,75,.16), 0 10px 22px rgba(0,0,0,.22); }
button.confirm::after { content: var(--hint-confirm); display: block; margin-top: .08rem; font-size: .58rem; line-height: 1; opacity: .82; }
.primary { color: #130f08; background: linear-gradient(180deg, #f1c875, #c98b31); border-color: #efc16e; font-weight: 850; }
.danger { border-color: rgba(169,67,53,.7); color: #ffd7ce; }
.ghost { min-height: 36px; padding: .42rem .6rem; font-size: .8rem; }
.wrap { position: relative; z-index: 1; width: min(100%, 1500px); margin: 0 auto; padding: clamp(.7rem, 1.8vw, 1.4rem); }
.top { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; margin-bottom: .72rem; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 4.8rem); line-height: .88; letter-spacing: .02em; }
.claim { max-width: 46rem; color: var(--muted); font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.25rem); }
.seed { display: flex; gap: .45rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.seed input { width: 9rem; min-height: 42px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.35); color: var(--ink); padding: .5rem .6rem; }
.game { display: grid; grid-template-columns: minmax(250px,.74fr) minmax(430px,1.34fr) minmax(280px,.88fr); gap: .7rem; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--panel), rgba(7,11,10,.78)); box-shadow: var(--shadow); backdrop-filter: blur(14px); overflow: hidden; }
.head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .68rem .78rem; border-bottom: 1px solid var(--line); background: rgba(241,228,200,.055); }
.head-tools { display: flex; align-items: center; justify-content: flex-end; gap: .42rem; flex-wrap: wrap; }
.pt { margin: 0; color: var(--muted); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 850; }
.chip { display: inline-flex; align-items: center; gap: .25rem; min-height: 28px; border: 1px solid var(--line); border-radius: 999px; padding: .22rem .52rem; background: rgba(0,0,0,.22); color: var(--muted); font-size: .74rem; font-weight: 750; white-space: nowrap; }
.chip b { color: var(--ink); }
.gold { border-color: rgba(216,163,75,.55); color: #f5d89d; }
.red { border-color: rgba(169,67,53,.6); color: #ffd2c9; }
.blue { border-color: rgba(114,169,185,.55); color: #c5eef3; }
.chip.path {
  border-color: rgba(241,228,200,.22);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chip.path.raven {
  border-color: rgba(169,67,53,.68);
  color: #ffd2c9;
  background: rgba(77,20,15,.28);
}
.chip.path.thing {
  border-color: rgba(216,163,75,.58);
  color: #f5d89d;
  background: rgba(87,61,20,.24);
}
.chip.path.sea {
  border-color: rgba(114,169,185,.62);
  color: #c5eef3;
  background: rgba(17,55,66,.25);
}
.chip.path.holdfast {
  border-color: rgba(140,176,125,.6);
  color: #d7f0c9;
  background: rgba(42,72,38,.24);
}
.chip.path.start,
.chip.path.feud,
.chip.path.legend {
  border-color: rgba(241,228,200,.24);
}
.chip.role {
  border-color: rgba(241,228,200,.2);
  color: rgba(241,228,200,.74);
  background: rgba(0,0,0,.2);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chip.role.raven {
  border-color: rgba(169,67,53,.58);
  color: #ffd2c9;
  background: rgba(77,20,15,.22);
}
.chip.role.sea {
  border-color: rgba(114,169,185,.56);
  color: #c5eef3;
  background: rgba(17,55,66,.22);
}
.chip.role.thing,
.chip.role.scout {
  border-color: rgba(138,117,190,.54);
  color: #e5d8ff;
  background: rgba(51,38,82,.22);
}
.chip.role.holdfast {
  border-color: rgba(140,176,125,.56);
  color: #d7f0c9;
  background: rgba(42,72,38,.22);
}
.chip.role.forge,
.chip.role.trade {
  border-color: rgba(216,163,75,.52);
  color: #f5d89d;
  background: rgba(87,61,20,.2);
}
.chip.hook {
  border-color: rgba(241,228,200,.24);
  color: rgba(241,228,200,.68);
  background: rgba(0,0,0,.18);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chip.hook.ready {
  border-color: rgba(216,163,75,.68);
  color: #f5d89d;
  background: rgba(216,163,75,.14);
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.1);
}
.chip.threat {
  border-color: rgba(241,228,200,.2);
  color: rgba(241,228,200,.74);
  background: rgba(0,0,0,.22);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.chip.threat.siege,
.chip.threat.shieldwall {
  border-color: rgba(169,67,53,.66);
  color: #ffd2c9;
  background: rgba(77,20,15,.26);
}
.chip.threat.burh,
.chip.threat.tribute,
.chip.threat.bridge {
  border-color: rgba(216,163,75,.56);
  color: #f5d89d;
  background: rgba(87,61,20,.22);
}
.chip.threat.thing,
.chip.threat.feud,
.chip.threat.rival {
  border-color: rgba(138,117,190,.58);
  color: #e5d8ff;
  background: rgba(51,38,82,.24);
}
.chip.threat.march,
.chip.threat.cordoba {
  border-color: rgba(114,169,185,.6);
  color: #c5eef3;
  background: rgba(17,55,66,.24);
}
.chip.threat.fire {
  border-color: rgba(230,118,60,.66);
  color: #ffd8bc;
  background: rgba(86,35,13,.26);
}
.chip.route-pressure {
  border-color: rgba(241,228,200,.24);
  color: rgba(241,228,200,.78);
  background: rgba(0,0,0,.2);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.chip.route-pressure.raven {
  border-color: rgba(169,67,53,.62);
  color: #ffd2c9;
  background: rgba(77,20,15,.26);
}
.chip.route-pressure.thing {
  border-color: rgba(138,117,190,.6);
  color: #e5d8ff;
  background: rgba(51,38,82,.24);
}
.chip.route-pressure.mixed {
  border-color: rgba(114,169,185,.48);
  color: #c5eef3;
  background: rgba(17,55,66,.22);
}
.chapter { position: relative; min-height: 385px; padding: 1rem; background: linear-gradient(180deg, rgba(4,8,7,.12), rgba(4,8,7,.84)), var(--art); background-size: cover; background-position: center; isolation: isolate; }
.chapter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,7,6,.76), rgba(4,7,6,.16) 58%, rgba(4,7,6,.66)); }
.chapter.ready {
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.36), inset 0 -80px 120px rgba(216,163,75,.08);
}
h2 { margin: .25rem 0 .55rem; font-family: var(--serif); font-size: clamp(1.65rem, 3.1vw, 3.1rem); line-height: .95; }
.copy { max-width: 35rem; color: var(--muted); line-height: 1.48; }
.meta { display: flex; gap: .38rem; flex-wrap: wrap; margin: .55rem 0; }
.route-track {
  max-width: 45rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .42rem;
  margin: .72rem 0 .35rem;
}
.route-node {
  min-width: 0;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .5rem;
  background: rgba(0,0,0,.22);
}
.route-node span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(241,228,200,.2);
  border-radius: 999px;
  color: var(--dim);
  font-weight: 850;
}
.route-node b {
  display: block;
  margin-top: .28rem;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.route-node small {
  display: block;
  margin-top: .15rem;
  color: var(--dim);
  font-size: .7rem;
  line-height: 1.12;
}
.route-node.active { border-color: rgba(216,163,75,.66); background: rgba(216,163,75,.1); }
.route-node.active span, .route-node.raid span, .route-node.accord span { color: #130f08; background: var(--gold); border-color: var(--gold); }
.route-node.raid { border-color: rgba(169,67,53,.7); background: rgba(62,18,14,.26); }
.route-node.accord { border-color: rgba(114,169,185,.66); background: rgba(21,55,63,.24); }
.route-node.raid b { color: #ffd2c9; }
.route-node.accord b { color: #c5eef3; }
.pressure {
  max-width: 35rem;
  border: 1px solid rgba(241,228,200,.16);
  border-radius: 8px;
  padding: .58rem .68rem;
  margin: .78rem 0 .2rem;
  background: rgba(0,0,0,.22);
}
.pressure.danger {
  border-color: rgba(169,67,53,.62);
  background: rgba(62,18,14,.26);
}
.pressure-top {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pressure-top b { color: var(--ink); }
.pressure-track {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 4px;
  margin-top: .48rem;
}
.pressure-track span {
  height: 8px;
  border-radius: 999px;
  background: rgba(241,228,200,.12);
}
.pressure-track span.active { background: rgba(216,163,75,.72); }
.pressure-track span.wear { box-shadow: inset 0 0 0 1px rgba(169,67,53,.7); }
.pressure-track span.breach { background: rgba(169,67,53,.45); }
.intents { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.intent { min-height: 154px; display: grid; grid-template-rows: minmax(82px, .72fr) auto auto auto; gap: .5rem; align-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: .72rem; background: linear-gradient(180deg, rgba(8,13,12,.82), rgba(44,35,24,.72)); box-shadow: 0 16px 40px rgba(0,0,0,.24); }
.intent.now { border-color: rgba(169,67,53,.78); }
.intent.next { opacity: .84; }
.intent.threat-siege,
.intent.threat-shieldwall {
  background: linear-gradient(180deg, rgba(62,18,14,.84), rgba(13,15,13,.78));
}
.intent.threat-burh,
.intent.threat-tribute,
.intent.threat-bridge {
  background: linear-gradient(180deg, rgba(58,43,20,.84), rgba(13,15,13,.78));
}
.intent.threat-thing,
.intent.threat-feud,
.intent.threat-rival {
  background: linear-gradient(180deg, rgba(45,34,66,.82), rgba(13,15,13,.78));
}
.intent.threat-march,
.intent.threat-cordoba {
  background: linear-gradient(180deg, rgba(20,50,56,.82), rgba(13,15,13,.78));
}
.intent.threat-fire {
  background: linear-gradient(180deg, rgba(76,29,10,.84), rgba(13,15,13,.78));
}
.intent.can-defend {
  border-color: rgba(216,163,75,.72);
  box-shadow: 0 16px 40px rgba(0,0,0,.24), 0 0 0 1px rgba(216,163,75,.16), 0 0 30px rgba(216,163,75,.12);
}
.intent[data-pulse="true"] {
  animation: frontParryPulse .58s cubic-bezier(.2,.9,.2,1);
  border-color: rgba(216,163,75,.92);
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.34), 0 0 38px rgba(216,163,75,.18), 0 18px 44px rgba(0,0,0,.3);
}
.intent:focus,
.intent:focus-visible,
.intent:focus-within {
  border-color: rgba(246,204,119,.78);
  box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(216,163,75,.24), 0 0 28px rgba(216,163,75,.16);
}
.intent:focus-visible,
.mobile-intent-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.intent-art {
  position: relative;
  min-height: 86px;
  display: grid;
  align-content: end;
  gap: .12rem;
  padding: .56rem;
  overflow: hidden;
  border: 1px solid rgba(241,228,200,.16);
  border-radius: 7px;
  background:
    radial-gradient(circle at 24% 22%, var(--front-light, rgba(216,163,75,.34)), transparent 28%),
    linear-gradient(180deg, rgba(4,7,6,.04), rgba(4,7,6,.7)),
    linear-gradient(135deg, var(--front-a, #29342d), var(--front-b, #111614));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 -38px 44px rgba(0,0,0,.34);
  isolation: isolate;
}
.intent-art::before,
.intent-art::after {
  content: "";
  position: absolute;
  inset: auto 6% 18% 6%;
  height: 32%;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 8%, var(--front-shape, rgba(241,228,200,.28)) 8% 14%, transparent 14% 20%),
    linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,.02));
  clip-path: polygon(0 100%, 8% 38%, 18% 62%, 26% 18%, 36% 54%, 46% 20%, 56% 58%, 66% 30%, 76% 64%, 88% 36%, 100% 100%);
  opacity: .9;
}
.intent-art::after {
  inset: 18% 10% auto auto;
  width: 42%;
  height: 52%;
  background:
    radial-gradient(circle at 50% 28%, rgba(241,228,200,.55), transparent 13%),
    linear-gradient(180deg, var(--front-shape, rgba(241,228,200,.32)), rgba(0,0,0,.08));
  clip-path: polygon(50% 0, 88% 30%, 74% 100%, 26% 100%, 12% 30%);
  opacity: .42;
}
.intent-art strong,
.intent-art small,
.intent-sigil {
  position: relative;
  z-index: 1;
}
.intent-art strong {
  font-family: var(--serif);
  font-size: .82rem;
  color: #f6ddb0;
  text-shadow: 0 1px 12px rgba(0,0,0,.75);
}
.intent-art small {
  color: rgba(241,228,200,.72);
  font-size: .66rem;
}
.intent-sigil {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: .2rem .42rem;
  border: 1px solid rgba(241,228,200,.18);
  border-radius: 999px;
  background: rgba(5,8,7,.44);
  color: #f6ddb0;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: 0;
}
.intent.threat-siege,
.intent.threat-shieldwall { --front-a: #5d231c; --front-b: #151817; --front-light: rgba(224,91,52,.42); --front-shape: rgba(241,228,200,.34); }
.intent.threat-burh,
.intent.threat-tribute,
.intent.threat-bridge { --front-a: #604719; --front-b: #171914; --front-light: rgba(216,163,75,.36); --front-shape: rgba(169,118,54,.5); }
.intent.threat-thing,
.intent.threat-feud,
.intent.threat-rival { --front-a: #46335f; --front-b: #141219; --front-light: rgba(148,114,191,.36); --front-shape: rgba(211,185,236,.32); }
.intent.threat-march,
.intent.threat-cordoba { --front-a: #1b5360; --front-b: #111918; --front-light: rgba(80,161,169,.34); --front-shape: rgba(158,218,215,.32); }
.intent.threat-fire { --front-a: #67310f; --front-b: #15120e; --front-light: rgba(96,217,142,.28); --front-shape: rgba(255,162,76,.44); }
.intent.threat-fire .intent-art::after,
.intent.threat-cordoba .intent-art::after {
  clip-path: polygon(48% 0, 62% 28%, 56% 48%, 78% 72%, 54% 100%, 38% 78%, 22% 100%, 30% 58%, 18% 34%);
}
.intent.threat-burh .intent-art::before,
.intent.threat-bridge .intent-art::before,
.intent.threat-tribute .intent-art::before {
  clip-path: polygon(0 100%, 0 42%, 8% 42%, 8% 18%, 16% 18%, 16% 42%, 26% 42%, 26% 18%, 34% 18%, 34% 42%, 44% 42%, 44% 18%, 52% 18%, 52% 42%, 62% 42%, 62% 18%, 70% 18%, 70% 42%, 80% 42%, 80% 18%, 88% 18%, 88% 42%, 100% 42%, 100% 100%);
}
.intent.threat-shieldwall .intent-art::before,
.intent.threat-march .intent-art::before {
  clip-path: polygon(0 100%, 0 62%, 10% 42%, 20% 62%, 30% 42%, 40% 62%, 50% 42%, 60% 62%, 70% 42%, 80% 62%, 90% 42%, 100% 62%, 100% 100%);
}
.intent h3, .card h3 { margin: .2rem 0; font-family: var(--serif); font-size: 1.06rem; line-height: 1.08; }
.card h3 { font-size: .98rem; overflow-wrap: break-word; hyphens: manual; }
.intent p, .card p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.25; overflow-wrap: anywhere; }
.intent .preview {
  border-left: 2px solid rgba(216,163,75,.58);
  padding-left: .5rem;
  color: #f3d9a4;
  font-size: .74rem;
}
.front-answer {
  display: block;
  overflow: hidden;
  padding: .24rem .5rem;
  border: 1px solid rgba(114,169,185,.34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(114,169,185,.13), rgba(0,0,0,.18));
  color: #d8eef0;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.12;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .72rem; }
.site { min-height: 150px; display: grid; align-content: space-between; gap: .5rem; border: 1px solid var(--line); border-radius: 8px; padding: .72rem; background: linear-gradient(180deg, rgba(241,228,200,.09), rgba(241,228,200,.035)), repeating-linear-gradient(135deg, transparent 0 12px, rgba(241,228,200,.035) 12px 13px); }
.card-surface {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.card-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(241,228,200,.1), transparent 34%),
    repeating-linear-gradient(110deg, transparent 0 12px, rgba(255,255,255,.035) 12px 13px);
}
.card-surface > * {
  position: relative;
  z-index: 1;
}
.site[data-s="damaged"] { border-color: rgba(216,163,75,.72); background-color: rgba(88,60,24,.28); }
.site[data-s="ruined"] { border-color: rgba(169,67,53,.78); background-color: rgba(62,18,14,.32); }
.site h3 { margin: .2rem 0; font-family: var(--serif); }
.site p { margin: 0; color: var(--muted); font-size: .78rem; }
.state { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .12rem .42rem; color: var(--dim); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.res { display: grid; grid-template-columns: repeat(6, 1fr); gap: .42rem; padding: .7rem; }
.r {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .44rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .48rem;
  background:
    linear-gradient(180deg, rgba(241,228,200,.055), rgba(0,0,0,.2)),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(241,228,200,.028) 13px 14px);
  text-align: left;
}
.r.hot {
  border-color: rgba(216,163,75,.48);
  background: linear-gradient(180deg, rgba(216,163,75,.12), rgba(0,0,0,.18));
}
.r.changed,
.mobile-marker.changed {
  animation: markerPop .42s cubic-bezier(.2,.9,.18,1);
}
.r.changed i,
.mobile-marker.changed i {
  animation: markerTokenPop .42s cubic-bezier(.2,.9,.18,1);
}
.r i {
  --marker-rotate: 0deg;
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid rgba(241,228,200,.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(145deg, #6d5e46, #1a1f1b);
  box-shadow: inset 0 -5px 10px rgba(0,0,0,.34), 0 5px 10px rgba(0,0,0,.22);
}
.r[data-r="Kraft"] i { border-radius: 34% 48% 38% 42%; background: linear-gradient(145deg, #9c9282, #2a2f2d); }
.r[data-r="Ruhm"] i { background: radial-gradient(circle at 34% 25%, #ffe7a6, transparent 28%), linear-gradient(145deg, #d8a34b, #604019); }
.r[data-r="Fehde"] i { border-radius: 28% 46% 30% 54%; background: linear-gradient(145deg, #a94335, #2a0705); }
.r[data-r="Schild"] i { border-radius: 50% 50% 44% 44%; background: linear-gradient(145deg, #8bb07d, #21371f); }
.r[data-r="Ruder"] i { --marker-rotate: -18deg; width: 34px; height: 18px; border-radius: 999px 22px 999px 22px; background: linear-gradient(145deg, #8fcbd0, #173d43); transform: rotate(var(--marker-rotate)); }
.r[data-r="Knoten"] i { border-radius: 32%; background: radial-gradient(circle, transparent 35%, rgba(241,228,200,.5) 37% 46%, transparent 48%), linear-gradient(145deg, #9c78b7, #2b203a); }
.r[data-r="Glut"] i { border-radius: 48% 52% 40% 60%; background: radial-gradient(circle at 50% 60%, #ffd27a 0%, #e8862f 45%, #6e2410 100%); box-shadow: 0 0 8px rgba(232,134,47,.45); }
.r[data-r="Glut"].hot i { animation: markerPop .42s cubic-bezier(.2,.9,.18,1); box-shadow: 0 0 14px rgba(255,170,70,.7), 0 0 26px rgba(255,140,40,.35); }
.r[data-r="Glut"].hot b { color: #ffce86; text-shadow: 0 0 12px rgba(255,150,50,.55); }
.glut-spike { color: #ffce86; font-style: normal; font-weight: 800; text-shadow: 0 0 8px rgba(255,150,50,.4); }
.r b { display: block; font-family: var(--serif); font-size: 1.55rem; line-height: 1; }
.r span { display: block; margin-top: .08rem; color: var(--dim); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; }
.r small { display: block; margin-top: .08rem; color: rgba(241,228,200,.42); font-size: .58rem; line-height: 1.05; }
.market, .hand, .log, .legend, .saga, .turn-compass, .played-area { display: grid; gap: .48rem; padding: .7rem; }
.market, .hand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.table-head {
  border-top: 1px solid var(--line);
}
.played-area {
  position: relative;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(241,228,200,.025) 34px 35px);
}
.played-area.pulse {
  animation: tablePulse .34s ease-out;
}
.table-empty {
  grid-column: 1 / -1;
  min-height: 72px;
  display: grid;
  place-items: center;
}
.combo-banner {
  position: absolute;
  left: 50%;
  top: .42rem;
  z-index: 6;
  min-width: min(72%, 360px);
  max-width: 86%;
  display: grid;
  justify-items: center;
  gap: .08rem;
  padding: .42rem .76rem;
  border: 1px solid rgba(216,163,75,.62);
  border-radius: 999px;
  color: #f8dca0;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,163,75,.2), transparent 58%),
    rgba(5,8,7,.86);
  box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%);
  pointer-events: none;
  animation: comboRise 1.34s cubic-bezier(.2,.9,.18,1) both;
}
.combo-banner span {
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.combo-banner b {
  overflow: hidden;
  max-width: 100%;
  font-family: var(--serif);
  font-size: .92rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combo-banner.front { border-color: rgba(114,169,185,.66); color: #d8eef0; }
.combo-banner.oath { border-color: rgba(216,163,75,.82); color: #ffe2a1; }
.combo-banner.chain { border-color: rgba(139,176,125,.68); color: #e0f0cb; }
.combo-banner.raven { border-color: rgba(169,67,53,.78); color: #ffd3c8; }
.combo-banner.sea { border-color: rgba(114,169,185,.78); color: #d8eef0; }
.combo-banner.thing { border-color: rgba(216,163,75,.82); color: #ffe2a1; }
.combo-banner.holdfast { border-color: rgba(139,176,125,.72); color: #e0f0cb; }
.combo-banner.scout { border-color: rgba(156,120,183,.72); color: #ead8ff; }
.combo-banner.trade { border-color: rgba(216,163,75,.72); color: #ffe2a1; }
.combo-banner.forge { border-color: rgba(169,67,53,.72); color: #ffd3c8; }
.role-track {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
  min-height: 28px;
  align-items: center;
  padding: .12rem .08rem .2rem;
}
.role-track span {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  min-width: 0;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 999px;
  padding: .24rem .42rem;
  color: rgba(241,228,200,.68);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.role-track b {
  overflow: hidden;
  max-width: 9.5rem;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.role-track i {
  min-width: 2.1rem;
  color: var(--dim);
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}
.role-track .line-pips {
  display: inline-flex;
  align-items: center;
  gap: .16rem;
  min-width: max-content;
}
.role-track .line-pips mark {
  width: .42rem;
  height: .42rem;
  border: 1px solid rgba(241,228,200,.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%, rgba(241,228,200,.12), transparent 42%),
    rgba(5,8,7,.46);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.32);
}
.role-track .line-pips mark.filled {
  border-color: rgba(246,204,119,.6);
  background:
    radial-gradient(circle at 35% 26%, #ffe2a1 0 22%, transparent 25%),
    linear-gradient(145deg, #d8a34b, #604019);
  box-shadow: 0 0 10px rgba(216,163,75,.24), inset 0 -2px 4px rgba(0,0,0,.28);
}
.role-track span.near {
  border-color: rgba(246,204,119,.44);
  color: #f5d89d;
  background:
    linear-gradient(180deg, rgba(216,163,75,.11), rgba(0,0,0,.18)),
    rgba(10,14,12,.6);
}
.role-track span.ready {
  border-color: rgba(216,163,75,.52);
  color: #f3d9a4;
  background: rgba(216,163,75,.09);
}
.role-track span.saga-chain {
  border-color: rgba(114,169,185,.5);
  color: #d8eef0;
  background:
    linear-gradient(180deg, rgba(114,169,185,.13), rgba(0,0,0,.18)),
    rgba(7,14,14,.58);
}
.role-track span.saga-chain.ready {
  border-color: rgba(216,163,75,.72);
  color: #ffe2a1;
  background:
    radial-gradient(circle at 20% 0%, rgba(216,163,75,.22), transparent 60%),
    rgba(12,18,16,.72);
}
.role-track span.burst {
  border-color: rgba(216,163,75,.88);
  box-shadow: 0 0 20px rgba(216,163,75,.18), inset 0 0 0 1px rgba(255,255,255,.06);
  animation: roleBurst .7s ease-out both;
}
.table-card {
  min-width: 0;
  min-height: 118px;
  display: grid;
  grid-template-rows: 64px auto;
  gap: .38rem;
  padding: .42rem;
  text-align: left;
  border-color: rgba(241,228,200,.22);
  background:
    linear-gradient(180deg, rgba(241,228,200,.1), rgba(0,0,0,.2)),
    rgba(12,18,16,.78);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
.table-card:hover:not(:disabled) {
  transform: translateY(-2px);
}
.table-card.fresh {
  border-color: rgba(216,163,75,.82);
  box-shadow: 0 14px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(216,163,75,.22), 0 0 28px rgba(216,163,75,.16);
  animation: cardLand .22s ease-out;
}
.table-card.undoable {
  border-color: rgba(246,204,119,.68);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(246,204,119,.18);
}
.table-card.undo-dragging {
  transform: translate3d(var(--undo-dx, 0), var(--undo-dy, 0), 0) rotate(-1deg) scale(1.03);
  z-index: 30;
  touch-action: none;
}
.table-card.undo-ready {
  border-color: rgba(139,176,125,.88);
  box-shadow: 0 18px 36px rgba(0,0,0,.34), 0 0 0 2px rgba(139,176,125,.28), 0 0 30px rgba(139,176,125,.18);
}
.table-card.undoable::after {
  content: "";
  position: absolute;
  inset: .24rem;
  border: 1px solid rgba(246,204,119,.24);
  border-radius: 8px;
  pointer-events: none;
}
.table-undo-hint {
  position: absolute;
  left: 50%;
  bottom: .32rem;
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - .6rem);
  overflow: hidden;
  border: 1px solid rgba(246,204,119,.5);
  border-radius: 999px;
  padding: .16rem .42rem;
  color: #ffe7ad;
  background: rgba(8,12,10,.78);
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.card.in-hand.holding {
  border-color: rgba(216,163,75,.9);
  box-shadow: 0 18px 42px rgba(0,0,0,.36), 0 0 0 2px rgba(216,163,75,.34), 0 0 34px rgba(216,163,75,.16);
}
.card.in-hand.holding::after {
  content: "";
  position: absolute;
  inset: .34rem;
  border: 2px solid rgba(216,163,75,.78);
  border-radius: 8px;
  pointer-events: none;
  animation: holdInspectRing .62s linear both;
}
.table-art {
  min-height: 0;
  border: 1px solid rgba(241,228,200,.2);
  border-radius: 6px;
  background-image: linear-gradient(180deg, transparent 56%, rgba(0,0,0,.38)), var(--card-art-image);
  background-size: cover;
  background-position: center;
}
.table-copy {
  display: grid;
  gap: .12rem;
}
.table-copy b {
  font-family: var(--serif);
  font-size: .82rem;
  line-height: 1.04;
  overflow-wrap: anywhere;
}
.table-copy small {
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.12;
}
@keyframes cardLand {
  from { transform: translateY(18px) scale(.96); opacity: .55; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes tablePulse {
  from { box-shadow: inset 0 0 0 1px rgba(216,163,75,.34), inset 0 0 42px rgba(216,163,75,.12); }
  to { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 rgba(216,163,75,0); }
}
@keyframes tableComboWake {
  0% { filter: saturate(1); transform: translateY(0); }
  42% { filter: saturate(1.16) brightness(1.06); transform: translateY(-2px); }
  100% { filter: saturate(1); transform: translateY(0); }
}
@keyframes siteTapPulse {
  0% { filter: saturate(1.18) brightness(1.1); transform: translateY(-3px) scale(1.018); }
  70% { filter: saturate(1.06) brightness(1.03); }
  100% { filter: none; }
}
@keyframes frontParryPulse {
  0% { filter: saturate(1.2) brightness(1.12); transform: translateY(-2px) scale(1.018); }
  58% { filter: saturate(1.08) brightness(1.04); }
  100% { filter: none; }
}
@keyframes comboRise {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  76% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); }
}
@keyframes roleBurst {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes holdInspectRing {
  0% { opacity: .2; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes markerPop {
  0% { transform: translateY(0) scale(1); filter: none; }
  45% { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 8px 12px rgba(216,163,75,.2)); }
  100% { transform: translateY(0) scale(1); filter: none; }
}
@keyframes markerTokenPop {
  0% { transform: scale(1) rotate(var(--marker-rotate, 0deg)); }
  50% { transform: scale(1.22) rotate(calc(var(--marker-rotate, 0deg) - 6deg)); }
  100% { transform: scale(1) rotate(var(--marker-rotate, 0deg)); }
}
@keyframes pileShuffle {
  0% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
  34% { transform: translateY(-5px) rotate(-2deg); filter: brightness(1.18); }
  68% { transform: translateY(2px) rotate(2deg); filter: brightness(1.08); }
  100% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
}
@keyframes pileLayerCutOne {
  0% { transform: translate(calc(var(--pile-depth, 0) * 1px), calc(var(--pile-depth, 0) * -1px)) rotate(-2deg); }
  45% { transform: translate(9px, -8px) rotate(7deg); }
  100% { transform: translate(calc(var(--pile-depth, 0) * 1px), calc(var(--pile-depth, 0) * -1px)) rotate(-2deg); }
}
@keyframes pileLayerCutTwo {
  0% { transform: translate(calc(var(--pile-depth, 0) * 2px), calc(var(--pile-depth, 0) * -2px)) rotate(2deg); }
  50% { transform: translate(-8px, -5px) rotate(-8deg); }
  100% { transform: translate(calc(var(--pile-depth, 0) * 2px), calc(var(--pile-depth, 0) * -2px)) rotate(2deg); }
}
@keyframes pileDrawPulse {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  45% { transform: translateY(-4px) scale(1.035); filter: brightness(1.18) saturate(1.08); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes discardLandPulse {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  38% { transform: translateY(-5px) scale(1.045); filter: brightness(1.2) saturate(1.12); box-shadow: 0 0 34px rgba(216,163,75,.22); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes discardTopLand {
  0% { transform: translateY(-12px) rotate(-8deg) scale(.9); opacity: .45; }
  52% { transform: translateY(1px) rotate(3deg) scale(1.04); opacity: .95; }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: .82; }
}
@keyframes handDrawSettle {
  0% { filter: brightness(1); }
  42% { filter: brightness(1.16) saturate(1.08); }
  100% { filter: brightness(1); }
}
.flight-card {
  position: fixed;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .3rem;
  padding: .46rem;
  border: 1px solid rgba(216,163,75,.86);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), transparent 42%),
    linear-gradient(180deg, rgba(92,70,38,.96), rgba(18,22,18,.96));
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(216,163,75,.2);
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}
.flight-card span {
  min-height: 0;
  border: 1px solid rgba(241,228,200,.2);
  border-radius: 6px;
  background-image:
    linear-gradient(180deg, transparent 56%, rgba(0,0,0,.38)),
    var(--card-art-image);
  background-size: cover;
  background-position: center;
}
.flight-card b {
  font-family: var(--serif);
  font-size: .82rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flight-card.buy {
  border-color: rgba(114,169,185,.8);
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), transparent 42%),
    linear-gradient(180deg, rgba(35,80,84,.95), rgba(15,20,18,.96));
}
.flight-card.draw {
  border-color: rgba(241,228,200,.62);
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), transparent 42%),
    linear-gradient(180deg, rgba(47,63,57,.96), rgba(13,18,16,.96));
}
.flight-card.draw span {
  background-image:
    repeating-linear-gradient(135deg, rgba(241,228,200,.12) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 50% 34%, rgba(216,163,75,.22), transparent 35%),
    linear-gradient(145deg, rgba(31,44,38,.96), rgba(9,13,12,.96));
}
.card { position: relative; min-height: 254px; display: grid; grid-template-rows: auto 116px 1fr auto; gap: .45rem; border: 1px solid rgba(241,228,200,.23); border-radius: 8px; padding: .62rem; color: var(--ink); background: linear-gradient(145deg, rgba(255,255,255,.11), transparent 38%), linear-gradient(180deg, var(--a), var(--b)); box-shadow: 0 14px 32px rgba(0,0,0,.24); overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 82% 12%, rgba(241,228,200,.18), transparent 28%), repeating-linear-gradient(110deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px); pointer-events: none; }
.card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.card.actionable {
  border-color: rgba(216,163,75,.74);
  box-shadow: 0 16px 34px rgba(0,0,0,.26), 0 0 0 1px rgba(216,163,75,.18), 0 0 30px rgba(216,163,75,.13);
}
.card.in-hand {
  border-color: rgba(114,169,185,.42);
}
.card.in-hand .hand-grip {
  position: absolute;
  left: 50%;
  bottom: .42rem;
  z-index: 5;
  width: 42%;
  min-width: 42px;
  height: 8px;
  border: 1px solid rgba(241,228,200,.2);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(241,228,200,.26) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(216,163,75,.2), rgba(5,8,7,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 12px rgba(0,0,0,.24);
  opacity: .74;
  pointer-events: none;
  transform: translateX(-50%);
}
.card.in-hand.selected .hand-grip,
.card.in-hand.dragging .hand-grip,
.card.in-hand.recommended .hand-grip {
  border-color: rgba(246,204,119,.64);
  background:
    repeating-linear-gradient(90deg, rgba(255,226,161,.5) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(246,204,119,.46), rgba(55,39,13,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px rgba(216,163,75,.28);
  opacity: 1;
}
.card.in-hand:focus,
.card.in-hand:focus-visible,
.card.in-hand:focus-within {
  border-color: rgba(216,163,75,.8);
  box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(216,163,75,.22);
}
.card.in-hand:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.card[data-market-index]:focus,
.card[data-market-index]:focus-visible,
.card[data-market-index]:focus-within {
  border-color: rgba(246,204,119,.76);
  box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(216,163,75,.24), 0 0 24px rgba(216,163,75,.14);
}
.card[data-market-index]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.card.actionable::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(216,163,75,.18), transparent 32%, transparent 70%, rgba(241,228,200,.1));
  opacity: .55;
}
.card.blocked {
  filter: saturate(.72) brightness(.82);
}
.card:hover {
  transform: translateY(-2px);
}
.card > * { position: relative; z-index: 1; }
.card-art {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(241,228,200,.24);
  border-radius: 6px;
  background-image:
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,.32)),
    var(--card-art-image);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.24);
  overflow: hidden;
  cursor: zoom-in;
}
.card-art:hover { border-color: rgba(216,163,75,.78); filter: saturate(1.08) contrast(1.04); }
.synergy-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: -.18rem;
  border: 1px solid rgba(216,163,75,.38);
  border-radius: 999px;
  padding: .18rem .46rem;
  color: #ffe2a1;
  background: linear-gradient(180deg, rgba(216,163,75,.2), rgba(0,0,0,.2));
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.synergy-cue.burst {
  border-color: rgba(246,204,119,.76);
  color: #130f08;
  background: linear-gradient(180deg, #f6cc77, #c98b31);
  text-shadow: none;
}
.synergy-cue.ready {
  border-color: rgba(139,176,125,.62);
  color: #e0f0cb;
  background: linear-gradient(180deg, rgba(139,176,125,.22), rgba(0,0,0,.2));
}
.synergy-cue.prep {
  border-color: rgba(114,169,185,.56);
  color: #d8eef0;
  background: linear-gradient(180deg, rgba(114,169,185,.18), rgba(0,0,0,.2));
}
.hand-table-hint {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid rgba(246,204,119,.4);
  border-radius: 999px;
  padding: .18rem .46rem;
  color: #ffe8b7;
  background: linear-gradient(180deg, rgba(36,28,12,.72), rgba(5,8,7,.48));
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18);
}
.card.in-hand.selected .hand-table-hint,
.card.in-hand.recommended .hand-table-hint,
.card.in-hand:focus .hand-table-hint,
.card.in-hand:focus-within .hand-table-hint {
  display: inline-flex;
}
.hand-effect-strip {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid rgba(139,176,125,.36);
  border-radius: 8px;
  padding: .2rem .42rem;
  color: #dcebc9;
  background:
    linear-gradient(180deg, rgba(139,176,125,.16), rgba(0,0,0,.22)),
    rgba(7,11,9,.58);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .04em;
  line-height: 1.08;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.card.in-hand.selected .hand-effect-strip,
.card.in-hand.recommended .hand-effect-strip,
.card.in-hand:focus .hand-effect-strip,
.card.in-hand:focus-within .hand-effect-strip {
  display: inline-flex;
}
.hand-thumb-cue {
  display: none;
}
.card.in-hand.recommended {
  border-color: rgba(246,204,119,.72);
  box-shadow: 0 0 0 1px rgba(246,204,119,.22), 0 18px 34px rgba(0,0,0,.28);
}
.card.in-hand.recommended::after {
  content: "";
  position: absolute;
  top: .46rem;
  right: .46rem;
  z-index: 4;
  width: .66rem;
  height: .66rem;
  border: 1px solid rgba(246,204,119,.62);
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffe2a1 0 28%, rgba(216,163,75,.72) 30% 52%, rgba(8,12,10,.82) 55% 100%);
  box-shadow: 0 0 16px rgba(216,163,75,.35);
  pointer-events: none;
}
.card.recommended:not(.in-hand) {
  border-color: rgba(246,204,119,.66);
  box-shadow: 0 0 0 1px rgba(246,204,119,.18), 0 16px 30px rgba(0,0,0,.24);
}
.card.recommended:not(.in-hand)::after {
  content: "";
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 4;
  width: .58rem;
  height: .58rem;
  border: 1px solid rgba(246,204,119,.62);
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffe2a1 0 28%, rgba(216,163,75,.72) 30% 52%, rgba(8,12,10,.82) 55% 100%);
  box-shadow: 0 0 14px rgba(216,163,75,.32);
  pointer-events: none;
}
.card-copy {
  min-height: 4.4rem;
  min-width: 0;
}
.type { display: flex; justify-content: space-between; gap: .4rem; color: rgba(255,255,255,.72); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 850; }
.cost { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #130f08; font-family: var(--serif); font-weight: 850; }
.actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.actions button { min-height: 34px; padding: .34rem .48rem; font-size: .72rem; }
.card.in-hand .actions {
  display: grid;
  grid-template-columns: 1fr auto;
}
.card.in-hand .actions button {
  min-height: 38px;
}
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; padding: .7rem; border-top: 1px solid var(--line); }
.turn-compass {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(216,163,75,.08), rgba(0,0,0,.1)),
    radial-gradient(circle at 100% 0%, rgba(114,169,185,.16), transparent 42%);
}
.turn-compass.danger {
  background:
    linear-gradient(180deg, rgba(169,67,53,.17), rgba(0,0,0,.12)),
    radial-gradient(circle at 100% 0%, rgba(216,163,75,.12), transparent 40%);
}
.turn-compass.calm {
  background:
    linear-gradient(180deg, rgba(114,169,185,.12), rgba(0,0,0,.12)),
    radial-gradient(circle at 100% 0%, rgba(216,163,75,.12), transparent 42%);
}
.compass-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .55rem;
}
.compass-head h3 {
  margin: .14rem 0 0;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.05;
}
.turn-compass p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.compass-readout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: .4rem;
}
.compass-readout span {
  min-width: 0;
  border: 1px solid rgba(241,228,200,.12);
  border-radius: 8px;
  padding: .46rem .5rem;
  background: rgba(0,0,0,.18);
}
.compass-readout b {
  display: block;
  font-family: var(--serif);
  font-size: 1.03rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.compass-readout small {
  display: block;
  margin-top: .16rem;
  color: var(--dim);
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.compass-answer {
  border: 1px solid rgba(216,163,75,.28);
  border-radius: 999px;
  padding: .42rem .56rem;
  color: #f5d89d;
  background: rgba(216,163,75,.11);
  box-shadow: inset 0 0 0 1px rgba(241,228,200,.05);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.15;
}
.compass-answer.danger {
  border-color: rgba(169,67,53,.5);
  color: #ffd2c8;
  background: rgba(169,67,53,.17);
}
.compass-answer.calm {
  border-color: rgba(114,169,185,.38);
  color: #d4edf0;
  background: rgba(114,169,185,.12);
}
.turn-compass button {
  width: 100%;
}
.turn-compass button.primary,
.hand .card.in-hand .actions .primary {
  color: #130f08;
  background: linear-gradient(180deg, #f6cc77, #c98b31);
  border-color: #efc16e;
  text-shadow: none;
}
.turn-compass button:disabled {
  color: rgba(241,228,200,.58);
  background: rgba(0,0,0,.2);
}
.legend-card { display: grid; gap: .28rem; border: 1px solid rgba(216,163,75,.38); border-radius: 8px; padding: .62rem; background: rgba(216,163,75,.08); }
.table-info-card {
  background:
    linear-gradient(145deg, rgba(241,228,200,.08), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(241,228,200,.03) 13px 14px),
    rgba(9,15,13,.36);
}
.legend-deck-card {
  min-height: 292px;
  grid-template-rows: auto 128px 1fr auto auto auto;
}
.legend-deck-card.locked {
  filter: saturate(.72) brightness(.78);
}
.legend-deck-card.unlocked {
  border-color: rgba(216,163,75,.78);
  box-shadow: 0 18px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(216,163,75,.14);
}
.legend-progress {
  display: grid;
  gap: .24rem;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 7px;
  padding: .34rem .42rem;
  background: rgba(0,0,0,.18);
}
.legend-progress span {
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legend-progress b {
  color: #f5d89d;
}
.legend-progress i {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(216,163,75,.86) var(--legend-progress), rgba(241,228,200,.13) 0);
  box-shadow: inset 0 0 0 1px rgba(241,228,200,.08);
}
.legend-deck-card.unlocked .legend-progress {
  border-color: rgba(216,163,75,.46);
}
.ghost-card { border-color: rgba(114,169,185,.5); background: rgba(114,169,185,.08); }
.history-card { border-color: rgba(241,228,200,.24); background: rgba(241,228,200,.045); }
.omen-card { border-color: rgba(216,163,75,.56); background: linear-gradient(180deg, rgba(216,163,75,.12), rgba(0,0,0,.14)); }
.omen-card.red { border-color: rgba(169,67,53,.55); background: linear-gradient(180deg, rgba(169,67,53,.15), rgba(0,0,0,.14)); }
.omen-card.blue { border-color: rgba(114,169,185,.55); background: linear-gradient(180deg, rgba(114,169,185,.13), rgba(0,0,0,.14)); }
.banner-card {
  min-height: 142px;
  border-color: rgba(216,163,75,.55);
  background:
    linear-gradient(145deg, rgba(241,228,200,.14), transparent 42%),
    linear-gradient(180deg, rgba(86,67,38,.42), rgba(0,0,0,.16));
}
.banner-card.blue {
  border-color: rgba(114,169,185,.58);
  background: linear-gradient(145deg, rgba(114,169,185,.16), transparent 42%), linear-gradient(180deg, rgba(25,55,60,.42), rgba(0,0,0,.16));
}
.banner-card.red {
  border-color: rgba(169,67,53,.62);
  background: linear-gradient(145deg, rgba(169,67,53,.18), transparent 42%), linear-gradient(180deg, rgba(70,24,18,.42), rgba(0,0,0,.16));
}
.banner-card small {
  color: #f3d9a4;
  font-size: .68rem;
  line-height: 1.3;
}
.oversize-label {
  color: var(--dim);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.daily-card {
  border-color: rgba(114,169,185,.58);
  background:
    linear-gradient(180deg, rgba(114,169,185,.13), rgba(0,0,0,.14)),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(241,228,200,.035) 13px 14px);
}
.daily-card.active {
  border-color: rgba(216,163,75,.72);
  box-shadow: 0 0 0 1px rgba(216,163,75,.12), 0 18px 42px rgba(0,0,0,.22);
}
.daily-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .55rem;
}
.daily-head h3 { margin: .12rem 0 0; }
.daily-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .34rem;
}
.daily-grid span {
  min-width: 0;
  border: 1px solid rgba(241,228,200,.12);
  border-radius: 7px;
  padding: .42rem .48rem;
  background: rgba(0,0,0,.18);
}
.daily-grid b {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
}
.daily-grid small {
  display: block;
  margin-top: .14rem;
  color: var(--dim);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.daily-rival {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: var(--muted);
  font-size: .73rem;
}
.daily-rival b {
  color: #f3d9a4;
  text-align: right;
}
.trophy-card { border-color: rgba(216,163,75,.54); background: linear-gradient(180deg, rgba(216,163,75,.11), rgba(0,0,0,.14)); }
.runes-card { border-color: rgba(114,169,185,.48); background: linear-gradient(180deg, rgba(114,169,185,.1), rgba(0,0,0,.13)); }
.clan-card {
  border-color: rgba(216,163,75,.5);
  background:
    linear-gradient(180deg, rgba(216,163,75,.1), rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(216,163,75,.035) 15px 16px);
}
.clan-card.blue { border-color: rgba(114,169,185,.52); }
.clan-card.red { border-color: rgba(169,67,53,.56); }
.clan-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(241,228,200,.12);
  box-shadow: inset 0 0 0 1px rgba(241,228,200,.08);
}
.clan-track span {
  display: block;
  width: var(--clan-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fb9be, #d8a34b);
  box-shadow: 0 0 16px rgba(216,163,75,.22);
}
.clan-list {
  display: grid;
  gap: .28rem;
}
.clan-list span {
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  border: 1px solid rgba(241,228,200,.1);
  border-radius: 7px;
  padding: .32rem .42rem;
  color: var(--muted);
  font-size: .68rem;
  background: rgba(0,0,0,.14);
}
.clan-list span.active {
  border-color: rgba(216,163,75,.44);
  color: #f3d9a4;
  background: rgba(216,163,75,.08);
}
.clan-list b { color: #f1e4c8; }
.legend-card h3 { margin: 0; font-family: var(--serif); font-size: 1rem; }
.legend-card p { margin: 0; color: var(--muted); font-size: .76rem; }
.trophy-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.trophy-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: .28rem; margin: .16rem 0; }
.trophy-track span {
  height: 9px;
  border-radius: 999px;
  background: rgba(241,228,200,.13);
  box-shadow: inset 0 0 0 1px rgba(241,228,200,.08);
}
.trophy-track span.won {
  background: linear-gradient(90deg, #d8a34b, #f0d08a);
  box-shadow: 0 0 14px rgba(216,163,75,.24);
}
.runes-list {
  display: grid;
  gap: .34rem;
}
.runes-list div {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  border: 1px solid rgba(241,228,200,.1);
  border-radius: 7px;
  padding: .42rem .5rem;
  background: rgba(0,0,0,.16);
}
.runes-list div.done {
  border-color: rgba(216,163,75,.5);
  background: rgba(216,163,75,.1);
}
.runes-list b {
  font-family: var(--serif);
  font-size: .88rem;
}
.runes-list span {
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
}
.pile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .48rem;
}
.pile-card {
  position: relative;
  overflow: hidden;
  min-height: 122px;
  display: grid;
  align-content: space-between;
  gap: .35rem;
  text-align: left;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(241,228,200,.1), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(241,228,200,.045) 12px 13px),
    rgba(8,14,12,.72);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.pile-card span {
  color: var(--dim);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pile-card b {
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: .9;
}
.pile-card small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.12;
}
.deck-pile {
  border-color: rgba(114,169,185,.48);
}
.discard-pile {
  border-color: rgba(216,163,75,.48);
}
.log { max-height: 340px; overflow: auto; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.log div { border-bottom: 1px solid rgba(241,228,200,.08); padding-bottom: .36rem; }
.saga { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; color: #e3f0ee; }
.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; padding: 1rem; background: rgba(3,7,6,.74); backdrop-filter: blur(10px); }
.modal.open { display: grid; }
.inspect-modal {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3,7,6,.72);
  backdrop-filter: blur(12px);
}
.saga-card-modal {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3,7,6,.76);
  backdrop-filter: blur(12px);
}
.saga-card-sheet {
  width: min(100%, 760px);
  max-height: 92dvh;
  display: grid;
  gap: .75rem;
  border: 1px solid rgba(216,163,75,.42);
  border-radius: 10px;
  padding: clamp(.85rem, 2vw, 1.1rem);
  background: linear-gradient(180deg, rgba(29,42,35,.98), rgba(7,11,10,.98));
  box-shadow: var(--shadow);
  overflow: auto;
}
.saga-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .7rem;
  border-bottom: 1px solid rgba(241,228,200,.12);
  padding-bottom: .65rem;
}
.saga-card-head h2 {
  margin: .2rem 0 0;
  font-size: clamp(1.35rem, 4vw, 2.2rem);
}
.saga-card-sheet canvas {
  width: min(100%, 520px);
  height: auto;
  justify-self: center;
  border: 1px solid rgba(241,228,200,.24);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0,0,0,.34);
  background: #0e1512;
}
.inspect-sheet {
  width: min(100%, 840px);
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1fr);
  gap: 1rem;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(29,42,35,.98), rgba(8,12,11,.98));
  box-shadow: var(--shadow);
}
.inspect-art {
  min-height: 520px;
  border: 1px solid rgba(241,228,200,.28);
  border-radius: 8px;
  background-image: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.25)), var(--card-art-image);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 46px rgba(0,0,0,.36);
}
.inspect-copy {
  display: grid;
  align-content: center;
  gap: .7rem;
  min-width: 0;
}
.inspect-copy h2 { margin: 0; overflow-wrap: anywhere; }
.inspect-copy p { margin: 0; color: var(--muted); line-height: 1.45; }
.inspect-actions {
  display: grid;
  margin-top: .25rem;
}
.inspect-primary {
  display: grid;
  gap: .12rem;
  min-height: 54px;
  align-content: center;
  justify-items: center;
  border-radius: 999px;
  padding: .62rem .9rem;
  border-color: rgba(216,163,75,.68);
  background: linear-gradient(180deg, #f0c46d, #c4822f);
  color: #1d1208;
  box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.34);
}
.inspect-primary:hover:not(:disabled),
.inspect-primary:focus-visible {
  border-color: #ffd98a;
  background: linear-gradient(180deg, #ffd57e, #d89536);
  color: #160d05;
  filter: saturate(1.05) brightness(1.04);
}
.inspect-primary:active:not(:disabled) {
  background: linear-gradient(180deg, #e9b75c, #bd7627);
}
.inspect-primary b,
.inspect-primary small {
  pointer-events: none;
}
.inspect-primary b {
  font-size: .88rem;
  font-weight: 950;
}
.inspect-primary small {
  color: rgba(29,18,8,.76);
  font-size: .68rem;
  font-weight: 850;
}
.inspect-close {
  position: absolute;
  transform: translateY(-3.2rem);
  justify-self: end;
}
.sheet { width: min(100%, 730px); border: 1px solid var(--line2); border-radius: 10px; padding: clamp(1rem, 3vw, 1.5rem); background: linear-gradient(180deg, rgba(29,42,35,.97), rgba(8,12,11,.97)); box-shadow: var(--shadow); }
.sheet p { color: var(--muted); line-height: 1.48; }
.banner-choice-sheet {
  width: min(100%, 920px);
}
.banner-quick-start {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .16rem .72rem;
  align-items: center;
  margin-top: .85rem;
  padding: .78rem .95rem;
  text-align: left;
  border-color: rgba(246,204,119,.82);
  border-radius: 10px;
  color: #171006;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.36), transparent 24%),
    linear-gradient(180deg, #f4d183, #d99c3d);
  box-shadow: 0 18px 44px rgba(0,0,0,.3), 0 0 0 1px rgba(246,204,119,.2);
}
.banner-quick-start span {
  align-self: center;
  grid-row: 1 / span 2;
  border: 1px solid rgba(41,25,6,.2);
  border-radius: 999px;
  padding: .26rem .56rem;
  background: rgba(255,255,255,.16);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.banner-quick-start b,
.banner-quick-start small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-quick-start b {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  line-height: 1;
}
.banner-quick-start small {
  color: rgba(36,24,10,.76);
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}
.banner-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}
.banner-choice {
  min-height: auto;
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: 1rem;
  text-align: left;
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(241,228,200,.14), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(241,228,200,.045) 13px 14px),
    rgba(25,34,29,.9);
}
.banner-choice span {
  color: var(--dim);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.banner-choice b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: .96;
}
.banner-choice em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
}
.banner-choice i,
.banner-choice small {
  display: block;
  font-style: normal;
}
.banner-choice i {
  color: #f3d9a4;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.banner-choice small {
  color: rgba(241,228,200,.72);
  font-size: .72rem;
  line-height: 1.32;
}
.banner-choice.blue { border-color: rgba(114,169,185,.72); }
.banner-choice.red { border-color: rgba(169,67,53,.74); }
.banner-choice.gold { border-color: rgba(216,163,75,.76); }
.end-route { display: flex; flex-wrap: wrap; gap: .38rem; margin: .5rem 0; }
.run-analysis {
  display: grid;
  gap: .55rem;
  border: 1px solid rgba(216,163,75,.28);
  border-radius: 8px;
  padding: .72rem;
  background: rgba(216,163,75,.07);
}
.hall-mark {
  border: 1px solid rgba(114,169,185,.3);
  border-radius: 8px;
  padding: .68rem;
  background: rgba(114,169,185,.07);
}
.hall-mark span {
  display: block;
  color: #c5eef3;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hall-mark b {
  display: block;
  margin-top: .18rem;
  font-family: var(--serif);
}
.hall-mark p {
  margin: .38rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.daily-end {
  border: 1px solid rgba(216,163,75,.34);
  border-radius: 8px;
  padding: .68rem;
  background:
    linear-gradient(180deg, rgba(216,163,75,.1), rgba(0,0,0,.1)),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(241,228,200,.03) 13px 14px);
}
.daily-end span {
  display: block;
  color: #f5d89d;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.daily-end b {
  display: block;
  margin-top: .18rem;
  font-family: var(--serif);
}
.daily-end p {
  margin: .38rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.analysis-head {
  display: grid;
  gap: .18rem;
}
.analysis-head b {
  font-family: var(--serif);
  font-size: 1.12rem;
}
.analysis-head span {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.analysis-memory {
  margin: 0;
  border: 1px solid rgba(241,228,200,.12);
  border-radius: 999px;
  padding: .42rem .58rem;
  color: #f5d89d;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(241,228,200,.035) 16px 17px),
    rgba(5,8,7,.36);
  font-size: .76rem;
  line-height: 1.25;
}
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .42rem;
}
.analysis-grid article {
  border: 1px solid rgba(241,228,200,.13);
  border-radius: 8px;
  padding: .55rem;
  background: rgba(0,0,0,.16);
}
.analysis-grid article.blue { border-color: rgba(114,169,185,.46); background: rgba(114,169,185,.08); }
.analysis-grid article.red { border-color: rgba(169,67,53,.48); background: rgba(62,18,14,.18); }
.analysis-grid span {
  display: block;
  color: var(--dim);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.analysis-grid b {
  display: block;
  margin: .25rem 0;
  font-family: var(--serif);
  font-size: 1.18rem;
}
.analysis-grid p {
  margin: 0;
  font-size: .72rem;
  line-height: 1.28;
}
.choice-route {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin: .7rem 0 .15rem;
}
.choice-route .chip {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.16);
}
.chapter-choice-sheet {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,163,75,.18), transparent 34%),
    linear-gradient(180deg, rgba(33,42,34,.98), rgba(8,12,11,.98));
}
.front-broken-seal {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .55rem;
  border: 1px solid rgba(216,163,75,.64);
  border-radius: 999px;
  padding: .2rem .62rem;
  color: #f8dca0;
  background: rgba(216,163,75,.14);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(216,163,75,.12);
}
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; perspective: 1100px; }
.choice {
  position: relative;
  overflow: hidden;
  text-align: left;
  min-height: 168px;
  display: grid;
  align-content: start;
  gap: .48rem;
  border-color: rgba(241,228,200,.2);
  background:
    linear-gradient(155deg, rgba(241,228,200,.11), rgba(0,0,0,.16) 42%, rgba(0,0,0,.3)),
    radial-gradient(circle at 18% 12%, rgba(216,163,75,.15), transparent 38%),
    rgba(17,22,18,.86);
  box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.03);
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 92%;
}
.choice-art {
  position: relative;
  min-height: 104px;
  display: grid;
  align-content: end;
  padding: .55rem;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 7px;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.58)),
    radial-gradient(circle at 28% 22%, rgba(216,163,75,.26), transparent 30%),
    linear-gradient(135deg, #5f291d, #111614);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.choice-art::before {
  content: "";
  position: absolute;
  inset: 18% 8% 0;
  background: rgba(241,228,200,.22);
  clip-path: polygon(0 100%, 8% 56%, 16% 72%, 23% 42%, 32% 78%, 42% 28%, 53% 74%, 64% 38%, 72% 70%, 82% 46%, 100% 100%);
}
.choice-art::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 16%;
  width: 34%;
  height: 58%;
  background: rgba(241,228,200,.3);
  clip-path: polygon(50% 0, 82% 28%, 68% 100%, 32% 100%, 18% 28%);
}
.choice-art.accord {
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.58)),
    radial-gradient(circle at 28% 22%, rgba(114,169,185,.28), transparent 30%),
    linear-gradient(135deg, #254e55, #111614);
}
.choice-art.accord::before {
  clip-path: polygon(0 100%, 0 66%, 14% 66%, 14% 42%, 28% 42%, 28% 66%, 43% 66%, 43% 42%, 57% 42%, 57% 66%, 72% 66%, 72% 42%, 86% 42%, 86% 66%, 100% 66%, 100% 100%);
}
.choice-art i {
  position: relative;
  z-index: 1;
  width: fit-content;
  border: 1px solid rgba(241,228,200,.22);
  border-radius: 999px;
  padding: .16rem .46rem;
  color: #f6ddb0;
  background: rgba(5,8,7,.44);
  font-size: .64rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.choice::before {
  content: "";
  position: absolute;
  inset: .44rem;
  pointer-events: none;
  border: 1px solid rgba(241,228,200,.13);
  border-radius: 7px;
}
.choice.danger { --tilt: -1.2deg; }
.choice.primary { --tilt: 1.2deg; }
.choice:hover,
.choice:focus-visible {
  transform: translateY(-4px) rotate(0deg);
}
.choice:disabled {
  opacity: .72;
}
.choice.primary:disabled {
  color: #130f08;
}
.choice b { font-family: var(--serif); font-size: 1.25rem; }
.choice-score {
  width: fit-content;
  border: 1px solid rgba(216,163,75,.62);
  border-radius: 999px;
  padding: .18rem .52rem;
  color: #f5d89d;
  background: rgba(0,0,0,.18);
  font-style: normal;
  font-weight: 850;
}
.choice-route-hint {
  width: fit-content;
  border: 1px solid rgba(114,169,185,.4);
  border-radius: 999px;
  padding: .16rem .48rem;
  color: #cfe8e6;
  background: rgba(20,50,51,.38);
  font-size: .74rem;
  line-height: 1.15;
}
.choice-forecast {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
}
.choice-forecast i {
  border: 1px solid rgba(241,228,200,.18);
  border-radius: 999px;
  padding: .16rem .42rem;
  color: var(--muted);
  background: rgba(0,0,0,.16);
  font-size: .72rem;
  font-style: normal;
}
.toast { position: fixed; left: 50%; bottom: 1rem; z-index: 30; transform: translateX(-50%) translateY(130%); max-width: min(92vw, 42rem); border: 1px solid var(--line2); border-radius: 999px; padding: .7rem 1rem; background: rgba(5,9,8,.94); box-shadow: var(--shadow); transition: transform .22s; }
.toast.show { transform: translateX(-50%) translateY(0); }
.empty { min-height: 176px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--dim); text-align: center; padding: .7rem; }
.empty.small { min-height: 74px; font-size: .78rem; }
.deck-modal {
  position: fixed;
  inset: 0;
  z-index: 23;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3,7,6,.72);
  backdrop-filter: blur(12px);
}
.chronicle-modal {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3,7,6,.72);
  backdrop-filter: blur(12px);
}
.chronicle-sheet {
  width: min(100%, 980px);
  max-height: 92dvh;
  display: grid;
  gap: .8rem;
  border: 1px solid rgba(216,163,75,.42);
  border-radius: 10px;
  padding: clamp(.85rem, 2vw, 1.1rem);
  background: linear-gradient(180deg, rgba(30,42,35,.98), rgba(7,11,10,.98));
  box-shadow: var(--shadow);
  overflow: auto;
}
.chronicle-head {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  border-bottom: 1px solid rgba(241,228,200,.12);
  padding-bottom: .7rem;
}
.chronicle-head h2 { margin: .2rem 0 0; font-size: clamp(1.35rem, 4vw, 2.4rem); }
.chronicle-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.chronicle-summary article {
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .62rem;
  background: rgba(0,0,0,.18);
}
.chronicle-summary span {
  display: block;
  color: var(--dim);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chronicle-summary b {
  display: block;
  margin-top: .28rem;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1;
  overflow-wrap: anywhere;
}
.chronicle-hall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  border: 1px solid rgba(114,169,185,.32);
  border-radius: 8px;
  padding: .62rem;
  background: linear-gradient(180deg, rgba(114,169,185,.09), rgba(0,0,0,.12));
}
.chronicle-hall article {
  min-width: 0;
  border-right: 1px solid rgba(241,228,200,.1);
  padding-right: .55rem;
}
.chronicle-hall article:last-child {
  border-right: 0;
  padding-right: 0;
}
.chronicle-hall span {
  display: block;
  color: var(--dim);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chronicle-hall b {
  display: block;
  margin-top: .25rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.chronicle-hall p {
  margin: .22rem 0 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}
.chronicle-clans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.chronicle-clans h3 {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
}
.chronicle-clans article {
  display: grid;
  gap: .42rem;
  border: 1px solid rgba(216,163,75,.34);
  border-radius: 8px;
  padding: .62rem;
  background: rgba(216,163,75,.07);
}
.chronicle-clans article.blue {
  border-color: rgba(114,169,185,.42);
  background: rgba(114,169,185,.07);
}
.chronicle-clans article.red {
  border-color: rgba(169,67,53,.45);
  background: rgba(169,67,53,.08);
}
.chronicle-clans article > div:first-child {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .5rem;
}
.chronicle-clans span {
  color: var(--dim);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chronicle-clans b {
  font-family: var(--serif);
  color: #f1e4c8;
}
.chronicle-clans p,
.chronicle-clans small {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.3;
}
.chronicle-trophies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
}
.chronicle-trophy {
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .58rem;
  background: rgba(0,0,0,.16);
}
.chronicle-trophy.won {
  border-color: rgba(216,163,75,.58);
  background: rgba(216,163,75,.1);
}
.chronicle-trophy b { display: block; font-family: var(--serif); line-height: 1.05; }
.chronicle-trophy span {
  display: inline-block;
  margin: .26rem 0;
  color: #f5d89d;
  font-size: .72rem;
  font-weight: 850;
}
.chronicle-trophy p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.24; }
.chronicle-runs { display: grid; gap: .45rem; }
.chronicle-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .62rem;
  background: rgba(241,228,200,.045);
}
.chronicle-run h3 { margin: 0; font-family: var(--serif); overflow-wrap: anywhere; }
.chronicle-run p { margin: .15rem 0 0; color: var(--muted); font-size: .76rem; }
.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3,7,6,.72);
  backdrop-filter: blur(12px);
}
.rules-sheet {
  width: min(100%, 920px);
  max-height: 92dvh;
  display: grid;
  gap: .85rem;
  border: 1px solid rgba(216,163,75,.42);
  border-radius: 10px;
  padding: clamp(.9rem, 2vw, 1.15rem);
  background: linear-gradient(180deg, rgba(29,42,35,.98), rgba(7,11,10,.98));
  box-shadow: var(--shadow);
  overflow: auto;
}
.rules-head {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  border-bottom: 1px solid rgba(241,228,200,.12);
  padding-bottom: .7rem;
}
.rules-head h2 { margin: .2rem 0 0; font-size: clamp(1.3rem, 4vw, 2.25rem); }
.rules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.rules-grid section {
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .7rem;
  background: rgba(0,0,0,.18);
}
.rules-grid h3 {
  margin: .55rem 0 .35rem;
  font-family: var(--serif);
}
.rules-grid p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.rules-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.rules-cards article {
  border: 1px solid rgba(114,169,185,.28);
  border-radius: 8px;
  padding: .65rem;
  background: rgba(114,169,185,.07);
}
.rules-cards b { display: block; font-family: var(--serif); }
.rules-cards span { display: block; margin-top: .25rem; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.rules-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}
.rules-shortcuts span {
  border: 1px solid rgba(241,228,200,.16);
  border-radius: 999px;
  padding: .34rem .55rem;
  color: var(--muted);
  background: rgba(0,0,0,.18);
  font-size: .76rem;
}
.rules-shortcuts b { color: var(--ink); }
.deck-sheet {
  width: min(100%, 1040px);
  max-height: 92dvh;
  display: grid;
  gap: .8rem;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: clamp(.85rem, 2vw, 1.1rem);
  background: linear-gradient(180deg, rgba(27,39,34,.98), rgba(7,11,10,.98));
  box-shadow: var(--shadow);
  overflow: auto;
}
.deck-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: .8rem;
  border-bottom: 1px solid rgba(241,228,200,.12);
  padding-bottom: .7rem;
}
.deck-head h2 { margin: .2rem 0 0; font-size: clamp(1.35rem, 4vw, 2.4rem); }
.deck-stats { display: flex; flex-wrap: wrap; gap: .4rem; }
.deck-readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.deck-readout article {
  min-width: 0;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .6rem;
  background: rgba(0,0,0,.18);
}
.deck-readout article.good { border-color: rgba(139,176,125,.46); background: rgba(139,176,125,.08); }
.deck-readout article.focus { border-color: rgba(114,169,185,.42); background: rgba(114,169,185,.075); }
.deck-readout article.warn { border-color: rgba(169,67,53,.42); background: rgba(169,67,53,.075); }
.deck-readout span {
  color: var(--dim);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.deck-readout b {
  display: block;
  margin-top: .18rem;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-readout p {
  margin: .32rem 0 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.22;
}
.deck-zones {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: .55rem;
}
.deck-zone {
  min-width: 0;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.deck-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
  padding: .58rem;
  border-bottom: 1px solid rgba(241,228,200,.1);
}
.deck-zone h3 { margin: 0; font-family: var(--serif); font-size: 1rem; }
.deck-list {
  display: grid;
  gap: .38rem;
  padding: .5rem;
}
.mini-card {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: .48rem;
  padding: .34rem;
  text-align: left;
  background: rgba(241,228,200,.055);
}
.mini-art {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(241,228,200,.22);
  border-radius: 6px;
  background-image: var(--card-art-image);
  background-size: cover;
  background-position: center;
}
.mini-card b {
  display: block;
  font-family: var(--serif);
  line-height: 1.05;
}
.mini-card small {
  display: block;
  margin-top: .15rem;
  color: var(--dim);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mini-card em {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(216,163,75,.18);
  color: #f5d89d;
  font-style: normal;
  font-weight: 850;
}
.council {
  position: fixed;
  z-index: 18;
  top: clamp(4.5rem, 8vw, 6.3rem);
  right: clamp(.7rem, 2vw, 1.4rem);
  width: min(94vw, 520px);
}
.council-sheet {
  border: 1px solid rgba(216,163,75,.42);
  border-radius: 10px;
  padding: .92rem;
  background:
    linear-gradient(180deg, rgba(29,42,35,.96), rgba(7,11,10,.97)),
    radial-gradient(circle at 80% 0%, rgba(216,163,75,.18), transparent 36%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.council-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .7rem;
  border-bottom: 1px solid rgba(241,228,200,.12);
  padding-bottom: .65rem;
}
.council-head h2 {
  margin: .22rem 0 0;
  font-size: clamp(1.35rem, 4vw, 2.2rem);
}
.council-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
  margin: .72rem 0;
}
.council-grid article {
  min-height: 74px;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .56rem;
  background: rgba(0,0,0,.2);
}
.council-grid span {
  display: block;
  color: var(--dim);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.council-grid b {
  display: block;
  margin-top: .28rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}
.council-directive {
  border: 1px solid rgba(114,169,185,.32);
  border-radius: 8px;
  padding: .72rem;
  background: rgba(114,169,185,.08);
}
.council-directive span {
  color: #c5eef3;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.council-directive p {
  margin: .35rem 0 0;
  color: var(--muted);
  line-height: 1.42;
}
.council-route {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin-top: .7rem;
}
.mobile-dock {
  display: none;
}
.mobile-table {
  display: none;
}

/* Table-first layout: cards and piles carry the screen; chrome becomes table furniture. */
.table-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(270px, .26fr);
  grid-template-areas:
    "front legend"
    "lineup legend"
    "sites legend"
    "played legend"
    "player legend";
  gap: .7rem;
  padding: .7rem;
  border: 1px solid rgba(241,228,200,.16);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(216,163,75,.14), transparent 36%),
    radial-gradient(ellipse at 18% 80%, rgba(60,93,78,.24), transparent 42%),
    linear-gradient(180deg, rgba(54,35,20,.72), rgba(9,12,9,.88)),
    repeating-linear-gradient(90deg, rgba(241,228,200,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 82px);
  box-shadow: inset 0 0 0 1px rgba(241,228,200,.08), inset 0 0 90px rgba(0,0,0,.42), 0 26px 90px rgba(0,0,0,.45);
  isolation: isolate;
}
.table-layout::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  z-index: -1;
  border: 1px solid rgba(216,163,75,.08);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(241,228,200,.04) 12% 12.4%, transparent 12.4% 24%),
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(241,228,200,.025) 28px 29px);
  pointer-events: none;
}
.table-zone {
  border-radius: 10px;
  background: rgba(5,8,7,.18);
  box-shadow: none;
  backdrop-filter: none;
  border-color: rgba(241,228,200,.1);
}
.front-zone { grid-area: front; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(360px, 1.1fr); gap: .65rem; padding: .65rem; }
.lineup-zone { grid-area: lineup; display: grid; grid-template-columns: minmax(190px, .34fr) minmax(520px, 1fr) minmax(138px, .18fr); gap: .65rem; padding: .65rem; align-items: stretch; }
.sites-zone { grid-area: sites; }
.played-zone { grid-area: played; }
.player-zone { grid-area: player; display: grid; grid-template-columns: minmax(190px, .22fr) minmax(500px, 1fr) minmax(150px, .18fr); gap: .65rem; padding: .65rem; align-items: end; }
.legend-zone { grid-area: legend; align-self: stretch; max-height: calc(100dvh - 9rem); overflow: auto; }
.table-zone .head {
  background: transparent;
  border-bottom-color: rgba(241,228,200,.1);
}
.chapter-card {
  min-height: 268px;
  border: 1px solid rgba(169,67,53,.48);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.front-zone .intents {
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
}
.front-zone .intent {
  min-height: 100%;
  border-radius: 10px;
}
.front-zone .intent-art {
  min-height: 104px;
}
.hero-slot,
.front-stack,
.lineup-slot,
.player-left,
.player-actions,
.hand-slot {
  min-width: 0;
}
.hero-slot,
.front-stack {
  display: grid;
  gap: .5rem;
  align-content: stretch;
}
.hero-slot .turn-compass {
  min-height: 100%;
  border: 1px solid rgba(216,163,75,.32);
  border-radius: 10px;
  padding: .72rem;
}
.lineup-slot {
  border: 1px solid rgba(241,228,200,.11);
  border-radius: 10px;
  background: rgba(0,0,0,.16);
  overflow: hidden;
}
.lineup-slot .head {
  padding: .45rem .55rem;
}
.lineup-runes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .34rem .55rem;
  align-items: center;
  border-top: 1px solid rgba(241,228,200,.08);
  border-bottom: 1px solid rgba(241,228,200,.08);
  padding: .42rem .58rem;
  background:
    linear-gradient(90deg, rgba(216,163,75,.09), transparent 45%),
    rgba(0,0,0,.14);
}
.lineup-runes-label {
  color: var(--dim);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lineup-rune-track {
  display: flex;
  gap: .32rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lineup-rune-track::-webkit-scrollbar {
  display: none;
}
.lineup-runes em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .7rem;
  font-style: normal;
  line-height: 1.22;
}
.market {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  padding: .62rem;
}
.market .card {
  min-height: 278px;
  transform: translateY(0);
}
.market-seal {
  display: grid;
  gap: .08rem;
  min-width: 0;
  border: 1px solid rgba(216,163,75,.28);
  border-radius: 8px;
  padding: .38rem .46rem;
  color: rgba(241,228,200,.78);
  background:
    linear-gradient(135deg, rgba(216,163,75,.12), rgba(0,0,0,.22)),
    rgba(7,11,10,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.market-seal span,
.market-seal small {
  overflow: hidden;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.market-seal b {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .78rem;
  line-height: 1.02;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-seal.good {
  border-color: rgba(139,176,125,.46);
  background:
    linear-gradient(135deg, rgba(139,176,125,.14), rgba(0,0,0,.2)),
    rgba(7,12,9,.5);
}
.market-seal.wait {
  border-color: rgba(246,204,119,.44);
}
.market-seal.danger {
  border-color: rgba(169,67,53,.54);
  color: #ffd2c9;
  background:
    linear-gradient(135deg, rgba(169,67,53,.18), rgba(0,0,0,.22)),
    rgba(14,7,6,.5);
}
.market .card:hover,
.market .card:focus-within,
.market .card.selected {
  z-index: 3;
  transform: translateY(-7px) scale(1.025);
}
.market .market-actions {
  position: absolute;
  left: .48rem;
  right: .48rem;
  bottom: .48rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  border-radius: 7px;
  padding: .18rem;
  background: linear-gradient(180deg, rgba(8,12,10,.86), rgba(5,8,7,.94));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.market .card:hover .market-actions,
.market .card:focus-within .market-actions,
.market .card.selected .market-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.market .card.selected {
  border-color: rgba(216,163,75,.86);
  box-shadow: 0 22px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(216,163,75,.26), 0 0 34px rgba(216,163,75,.15);
}
.market .market-actions button:first-child {
  display: none;
}
.market .blocked::after {
  content: var(--hint-blocked);
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-10deg);
  border: 2px solid rgba(169,67,53,.85);
  border-radius: 4px;
  padding: .22rem .45rem;
  color: #ffd2c9;
  background: rgba(39,8,6,.82);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stack-button {
  border-style: dashed;
}
.chapter-stack-card,
.pile-card {
  min-height: 132px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(241,228,200,.11), rgba(0,0,0,.18)),
    repeating-linear-gradient(135deg, rgba(241,228,200,.045) 0 1px, transparent 1px 12px);
}
.table-piles .pile-card {
  isolation: isolate;
  padding: .66rem;
  border-width: 1px;
  box-shadow: 9px 9px 0 rgba(0,0,0,.2), 15px 15px 0 rgba(0,0,0,.12);
}
.pile-layer,
.pile-top {
  position: absolute;
  pointer-events: none;
  border-radius: 7px;
}
.pile-layer {
  inset: .45rem .52rem .58rem .42rem;
  z-index: 0;
  border: 1px solid rgba(241,228,200,.1);
  background: rgba(241,228,200,.045);
}
.pile-layer.one {
  transform: translate(calc(var(--pile-depth, 0) * 1px), calc(var(--pile-depth, 0) * -1px)) rotate(-2deg);
}
.pile-layer.two {
  transform: translate(calc(var(--pile-depth, 0) * 2px), calc(var(--pile-depth, 0) * -2px)) rotate(2deg);
  opacity: .72;
}
.pile-top {
  inset: .55rem .58rem auto auto;
  z-index: 1;
  width: 42%;
  max-width: 72px;
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(241,228,200,.16);
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
  opacity: .82;
}
.pile-top.deck-back {
  background:
    radial-gradient(circle at 50% 34%, rgba(216,163,75,.38), transparent 28%),
    repeating-linear-gradient(135deg, rgba(241,228,200,.12) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, rgba(25,49,48,.9), rgba(8,12,10,.96));
}
.pile-top.discard-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.34)),
    var(--discard-art-image),
    repeating-linear-gradient(135deg, rgba(241,228,200,.08) 0 1px, transparent 1px 9px);
  background-size: cover;
  background-position: center;
}
.discard-pile[data-empty="true"] .discard-top {
  opacity: .22;
  background:
    repeating-linear-gradient(135deg, rgba(241,228,200,.08) 0 1px, transparent 1px 10px),
    rgba(0,0,0,.2);
}
.pile-card.shuffling,
.mobile-pile.shuffling {
  animation: pileShuffle .72s cubic-bezier(.2,.9,.18,1);
  border-color: rgba(216,163,75,.72);
}
.pile-card.shuffling .pile-layer.one,
.mobile-pile.shuffling .pile-layer.one {
  animation: pileLayerCutOne .72s cubic-bezier(.2,.9,.18,1);
}
.pile-card.shuffling .pile-layer.two,
.mobile-pile.shuffling .pile-layer.two {
  animation: pileLayerCutTwo .72s cubic-bezier(.2,.9,.18,1);
}
.pile-card.drawing,
.mobile-pile.drawing {
  animation: pileDrawPulse .62s cubic-bezier(.2,.9,.18,1);
  border-color: rgba(241,228,200,.66);
}
.discard-pile.landing {
  animation: discardLandPulse .66s cubic-bezier(.2,.9,.18,1);
  border-color: rgba(216,163,75,.86);
}
.discard-pile.landing .discard-top {
  animation: discardTopLand .66s cubic-bezier(.2,.9,.18,1);
}
.hand.drawing,
.mobile-hand.drawing {
  animation: handDrawSettle .68s cubic-bezier(.2,.9,.18,1);
}
.table-piles .pile-card > span,
.table-piles .pile-card > b,
.table-piles .pile-card > small {
  position: relative;
  z-index: 2;
  max-width: 58%;
}
.chapter-stack-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: .34rem;
  border: 1px solid rgba(169,67,53,.42);
  padding: .72rem;
  box-shadow: 10px 10px 0 rgba(0,0,0,.2), 18px 18px 0 rgba(0,0,0,.13);
}
.chapter-stack-card.threat-burh,
.chapter-stack-card.threat-shieldwall {
  border-color: rgba(216,163,75,.5);
  background:
    linear-gradient(180deg, rgba(88,65,25,.22), rgba(0,0,0,.18)),
    repeating-linear-gradient(135deg, rgba(241,228,200,.045) 0 1px, transparent 1px 12px);
}
.chapter-stack-card.threat-bridge {
  border-color: rgba(216,163,75,.56);
  background:
    linear-gradient(180deg, rgba(68,49,24,.26), rgba(0,0,0,.2)),
    repeating-linear-gradient(135deg, rgba(241,228,200,.045) 0 1px, transparent 1px 12px);
}
.chapter-stack-card.threat-fire {
  border-color: rgba(230,118,60,.62);
  background:
    linear-gradient(180deg, rgba(91,35,12,.26), rgba(0,0,0,.2)),
    repeating-linear-gradient(135deg, rgba(241,228,200,.045) 0 1px, transparent 1px 12px);
}
.chapter-stack-card.route-pressure-thing {
  box-shadow: 10px 10px 0 rgba(0,0,0,.2), 18px 18px 0 rgba(0,0,0,.13), inset 0 0 0 1px rgba(138,117,190,.12);
}
.chapter-stack-card.route-pressure-raven {
  box-shadow: 10px 10px 0 rgba(0,0,0,.2), 18px 18px 0 rgba(0,0,0,.13), inset 0 0 0 1px rgba(169,67,53,.14);
}
.chapter-stack-card span,
.chapter-stack-card small {
  color: var(--dim);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chapter-stack-card b {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
}
.chapter-stack-card strong {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.05;
}
.chapter-stack-card em {
  color: var(--muted);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.28;
}
.enemy-doctrine {
  display: grid;
  gap: .08rem;
  width: 100%;
  border: 1px solid rgba(241,228,200,.14);
  border-radius: 8px;
  padding: .42rem .48rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(241,228,200,.035) 13px 14px),
    rgba(3,6,5,.28);
}
.enemy-doctrine span,
.enemy-doctrine small {
  overflow: hidden;
  color: rgba(241,228,200,.6);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.08;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.enemy-doctrine b {
  overflow: hidden;
  color: #f5d89d;
  font-family: var(--serif);
  font-size: .82rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-stack-card .meta {
  margin-top: .12rem;
}
.sites {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-card {
  width: 100%;
  min-height: 210px;
  display: grid;
  grid-template-rows: auto 108px auto auto auto;
  gap: .48rem;
  text-align: left;
  transform-origin: 50% 60%;
}
.site-card:not(:disabled):hover {
  transform: translateY(-3px);
}
.site-card:focus,
.site-card:focus-visible,
.site-card:focus-within {
  border-color: rgba(246,204,119,.78);
  box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(216,163,75,.24), 0 0 24px rgba(216,163,75,.14);
}
.site-card:focus-visible,
.mobile-site:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.site-card[data-used="true"] {
  transform: rotate(5deg) translateY(5px) scale(.985);
  opacity: .72;
  border-color: rgba(216,163,75,.46);
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.12), 0 10px 28px rgba(0,0,0,.2);
}
.site-card[data-pulse="true"] {
  animation: siteTapPulse .58s cubic-bezier(.2,.9,.2,1);
  border-color: rgba(216,163,75,.9);
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.32), 0 0 34px rgba(216,163,75,.18), 0 16px 34px rgba(0,0,0,.3);
}
.site-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .5rem;
}
.site-head h3 {
  margin: .12rem 0 0;
}
.site-art {
  min-height: 0;
  border: 1px solid rgba(241,228,200,.22);
  border-radius: 7px;
  background-image:
    linear-gradient(180deg, transparent 56%, rgba(0,0,0,.38)),
    var(--site-art-image);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.22);
}
.site-card[data-used="true"] .site-art {
  filter: saturate(.82) brightness(.8);
}
.site-upgrades {
  display: flex;
  gap: .28rem;
  min-height: 34px;
  align-items: center;
}
.site-upgrades.empty {
  border: 1px dashed rgba(241,228,200,.18);
  border-radius: 7px;
  padding: .18rem .45rem;
  color: rgba(241,228,200,.38);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.site-upgrade-card {
  position: relative;
  width: 46px;
  height: 34px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(216,163,75,.48);
  border-radius: 5px;
  background-image:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62)),
    var(--card-art-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 12px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(-3deg);
}
.site-upgrade-card:nth-child(even) {
  transform: rotate(3deg) translateY(1px);
}
.site-upgrade-card i {
  position: relative;
  z-index: 1;
  padding: .12rem .18rem;
  color: #f8dca0;
  font-size: .46rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.site-use-preview {
  width: fit-content;
  border: 1px solid rgba(216,163,75,.5);
  border-radius: 999px;
  padding: .18rem .48rem;
  color: #f5d89d;
  background: rgba(0,0,0,.2);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-card:disabled .site-use-preview {
  border-color: rgba(241,228,200,.18);
  color: var(--dim);
}
.site-card[data-used="true"] .site-use-preview {
  border-color: rgba(216,163,75,.68);
  color: #f8dca0;
}
.site-card[data-s="damaged"] .site-marker::after,
.site-card[data-s="ruined"] .site-marker::after {
  content: "";
  position: absolute;
  right: .62rem;
  top: .62rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,163,75,.9), rgba(169,67,53,.68) 56%, transparent 62%);
  box-shadow: 0 0 22px rgba(169,67,53,.32);
}
.site-card[data-s="ruined"] {
  filter: grayscale(.35) brightness(.62);
}
.played-area {
  min-height: 150px;
  grid-template-columns: repeat(7, minmax(82px, 1fr));
  align-items: end;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(216,163,75,.1), transparent 45%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(241,228,200,.025) 34px 35px);
}
.player-left {
  display: grid;
  gap: .55rem;
}
.player-zone .res {
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
}
.player-zone .res .r:first-child {
  grid-column: span 2;
}
.table-piles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.hand-slot {
  border: 1px solid rgba(241,228,200,.11);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.24));
  overflow: hidden;
}
.hand {
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 292px;
  overflow: hidden;
  padding: 1rem .5rem 1.25rem;
}
.hand-slot {
  position: relative;
}
.hand-slot::after {
  content: var(--hint-hand);
  position: absolute;
  left: 50%;
  bottom: calc(100% + .42rem);
  z-index: 4;
  transform: translate(-50%, 8px);
  border: 1px solid rgba(216,163,75,.38);
  border-radius: 999px;
  padding: .34rem .66rem;
  color: #f5d89d;
  background: rgba(8,12,10,.82);
  box-shadow: 0 12px 28px rgba(0,0,0,.34);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
}
body.hand-dragging .hand-slot::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
body.hand-drop-ready .hand-slot::after {
  content: var(--hint-drop-table);
  border-color: rgba(216,163,75,.9);
  background: rgba(39,31,13,.92);
}
.hand .card.in-hand {
  flex: 0 0 clamp(140px, 15vw, 188px);
  min-width: clamp(140px, 15vw, 188px);
  margin: 0 clamp(-50px, -4.8vw, -24px);
  transform:
    translateY(calc(var(--hand-distance) * 7px))
    rotate(calc(var(--hand-offset) * 4.4deg));
  transform-origin: 50% 112%;
  z-index: calc(30 - var(--hand-distance));
}
.hand .card.in-hand.selected,
.hand .card.in-hand:focus-within {
  transform: translateY(-24px) scale(1.06) rotate(0);
  z-index: 70;
}
.hand .card.in-hand.dragging {
  transform:
    translate3d(var(--drag-x, 0), var(--drag-y, 0), 0)
    translateY(-26px)
    scale(1.08)
    rotate(0deg);
  z-index: 90;
  border-color: rgba(216,163,75,.92);
  box-shadow: 0 30px 76px rgba(0,0,0,.52), 0 0 0 1px rgba(216,163,75,.28), 0 0 38px rgba(216,163,75,.18);
  cursor: grabbing;
}
.hand .card.in-hand.drop-ready {
  filter: saturate(1.12) contrast(1.04);
}
body.hand-drop-ready .played-zone {
  border-color: rgba(216,163,75,.68);
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.2), 0 0 42px rgba(216,163,75,.12);
}
body.hand-drop-ready .played-area {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(216,163,75,.22), transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(241,228,200,.035) 34px 35px);
}
.played-area.combo-live,
.mobile-played:has(.combo-banner) {
  border-color: rgba(216,163,75,.64);
  background:
    radial-gradient(ellipse at 50% 56%, rgba(216,163,75,.22), transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(246,204,119,.045) 28px 29px),
    rgba(7,12,10,.34);
  box-shadow: inset 0 0 0 1px rgba(216,163,75,.18), 0 0 34px rgba(216,163,75,.12);
  animation: tableComboWake .62s ease-out both;
}
.card.in-hand .actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
}
.card.in-hand.selected .actions,
.card.in-hand:hover .actions,
.card.in-hand:focus .actions,
.card.in-hand:focus-within .actions {
  opacity: .92;
  pointer-events: auto;
  transform: translateY(0);
}
.comfort-action {
  opacity: .76;
}
.player-actions {
  display: grid;
  gap: .5rem;
}
.run-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  padding: .62rem;
}
.legend-zone .saga,
.legend-zone .log {
  max-height: 150px;
  overflow: auto;
}
@media (max-width: 1100px) {
  .game { grid-template-columns: 1fr; }
  .table-layout {
    grid-template-areas:
      "front"
      "lineup"
      "sites"
      "played"
      "player"
      "legend";
  }
  .front-zone,
  .lineup-zone,
  .player-zone {
    grid-template-columns: 1fr;
  }
  .legend-zone {
    max-height: none;
  }
  .market, .hand, .played-area { grid-template-columns: repeat(5, minmax(130px, 1fr)); overflow-x: auto; }
  .card { min-width: 130px; }
  .table-card { min-width: 130px; }
}
@media (max-width: 900px) {
  .deck-modal {
    align-items: start;
    justify-items: stretch;
    padding: max(.7rem, env(safe-area-inset-top)) .7rem max(.7rem, env(safe-area-inset-bottom));
  }
  .deck-sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 1.4rem);
    overflow-x: hidden;
  }
  .deck-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-zones { grid-template-columns: 1fr; }
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    padding: 0;
    background: #0e1512;
  }
  .wrap {
    width: 100%;
    min-height: 100dvh;
    padding: 0;
  }
  .top,
  .game.table-layout,
  .mobile-dock {
    display: none;
  }
  .mobile-table {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows:
      calc(env(safe-area-inset-top) + 48px)
      106px
      minmax(118px, 1fr)
      92px
      196px
      calc(env(safe-area-inset-bottom) + 62px);
    gap: .45rem;
    padding: 0 .65rem;
    background:
      radial-gradient(circle at 50% 18%, rgba(216,163,75,.16), transparent 34%),
      radial-gradient(circle at 12% 88%, rgba(82,111,96,.2), transparent 38%),
      linear-gradient(180deg, #16231e, #0b1210 58%, #070b0a);
    overflow: hidden;
  }
  .mobile-table::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .42;
    mix-blend-mode: overlay;
  }
  .mobile-marker-bar {
    grid-row: 1;
    align-self: end;
    display: flex;
    gap: .28rem;
    padding: .2rem;
    border: 1px solid rgba(241,228,200,.12);
    border-radius: 999px;
    background: rgba(5,8,7,.62);
    box-shadow: 0 14px 34px rgba(0,0,0,.32);
    backdrop-filter: blur(14px) saturate(1.1);
    z-index: 4;
  }
  .mobile-marker {
    min-width: 0;
    height: 32px;
    flex: 1;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: .22rem;
    border: 1px solid rgba(241,228,200,.12);
    border-radius: 999px;
    background: rgba(0,0,0,.18);
  }
  .mobile-marker i {
    --marker-rotate: 0deg;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(241,228,200,.26);
    border-radius: 50%;
    background: linear-gradient(145deg, #8a806c, #202622);
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.32);
  }
  .mobile-marker[data-r="Kraft"] i { border-radius: 34% 48% 38% 42%; background: linear-gradient(145deg, #9c9282, #2a2f2d); }
  .mobile-marker[data-r="Ruhm"] i { background: radial-gradient(circle at 34% 25%, #ffe7a6, transparent 28%), linear-gradient(145deg, #d8a34b, #604019); }
  .mobile-marker[data-r="Fehde"] i { border-radius: 28% 46% 30% 54%; background: linear-gradient(145deg, #a94335, #2a0705); }
  .mobile-marker[data-r="Schild"] i { border-radius: 50% 50% 44% 44%; background: linear-gradient(145deg, #8bb07d, #21371f); }
  .mobile-marker[data-r="Ruder"] i { --marker-rotate: -18deg; width: 20px; height: 11px; border-radius: 999px 22px 999px 22px; background: linear-gradient(145deg, #8fcbd0, #173d43); transform: rotate(var(--marker-rotate)); }
  .mobile-marker[data-r="Knoten"] i { border-radius: 32%; background: radial-gradient(circle, transparent 35%, rgba(241,228,200,.5) 37% 46%, transparent 48%), linear-gradient(145deg, #9c78b7, #2b203a); }
  .mobile-marker b {
    font-family: var(--serif);
    font-size: .92rem;
  }
  .mobile-threat {
    grid-row: 2;
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: .42rem;
    z-index: 2;
  }
  .mobile-intent-card {
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: .08rem;
    padding: .48rem .58rem;
    border: 1px solid rgba(169,67,53,.45);
    border-radius: 14px;
    color: var(--ink);
    text-align: left;
    background:
      radial-gradient(circle at 86% 18%, var(--front-light, rgba(216,163,75,.25)), transparent 34%),
      linear-gradient(135deg, var(--front-a, rgba(67,36,23,.86)), var(--front-b, rgba(7,10,9,.88)));
    box-shadow: inset 0 0 0 1px rgba(241,228,200,.06), 0 12px 24px rgba(0,0,0,.3);
  }
  .mobile-intent-card.now {
    border-color: rgba(169,67,53,.76);
  }
  .mobile-intent-card.next {
    opacity: .86;
    transform: rotate(1.2deg);
  }
  .mobile-intent-card:not(:disabled) {
    border-color: rgba(216,163,75,.7);
    box-shadow: inset 0 0 0 1px rgba(216,163,75,.13), 0 12px 26px rgba(0,0,0,.32);
  }
  .mobile-intent-card.defended {
    filter: saturate(.65) brightness(.82);
  }
  .mobile-intent-card[data-pulse="true"] {
    animation: frontParryPulse .58s cubic-bezier(.2,.9,.2,1);
    border-color: rgba(216,163,75,.92);
    box-shadow: inset 0 0 0 1px rgba(216,163,75,.34), 0 0 34px rgba(216,163,75,.2), 0 12px 26px rgba(0,0,0,.32);
  }
  .mobile-intent-card span,
  .mobile-intent-empty span {
    color: #f5d89d;
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .mobile-intent-card b,
  .mobile-intent-empty b {
    max-width: 100%;
    overflow: hidden;
    font-family: var(--serif);
    font-size: .88rem;
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-intent-card small,
  .mobile-intent-card em {
    margin: 0;
    color: rgba(241,228,200,.72);
    font-size: .58rem;
    font-style: normal;
    line-height: 1.08;
  }
  .mobile-intent-card em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-intent-card .front-answer {
    margin-top: .22rem;
    padding: .18rem .36rem;
    font-size: .52rem;
  }
  .mobile-intent-empty {
    grid-column: 1 / -1;
    display: grid;
    align-content: center;
    padding: .65rem .78rem;
    border: 1px solid rgba(241,228,200,.16);
    border-radius: 14px;
    background: rgba(5,8,7,.45);
  }
  .mobile-played {
    grid-row: 3;
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 0;
    padding: .58rem;
    border: 1px solid rgba(241,228,200,.12);
    border-radius: 14px;
    background:
      radial-gradient(ellipse at 50% 55%, rgba(216,163,75,.08), transparent 58%),
      rgba(3,6,5,.28);
    overflow: hidden;
    z-index: 1;
  }
  .mobile-played::before {
    content: "";
    position: absolute;
    inset: .48rem;
    z-index: 0;
    border: 1px dashed rgba(216,163,75,.24);
    border-radius: 12px;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(216,163,75,.14), transparent 58%),
      rgba(216,163,75,.04);
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .mobile-played::after {
    content: var(--hint-drag-table);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    transform: translate(-50%, -50%) scale(.96);
    padding: .42rem .72rem;
    border: 1px solid rgba(216,163,75,.38);
    border-radius: 999px;
    color: #f5d89d;
    background: rgba(5,8,7,.78);
    box-shadow: 0 12px 30px rgba(0,0,0,.32);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
  }
  body.hand-dragging .mobile-played::before,
  body.hand-dragging .mobile-played::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  body.hand-dragging .mobile-played::before {
    transform: scale(1);
  }
  body.hand-drop-ready .mobile-played::before {
    border-color: rgba(216,163,75,.82);
    background:
      radial-gradient(ellipse at 50% 50%, rgba(216,163,75,.28), transparent 62%),
      rgba(216,163,75,.08);
  }
  body.hand-drop-ready .mobile-played::after {
    content: var(--hint-release-play);
    border-color: rgba(216,163,75,.88);
    background: rgba(42,31,12,.92);
  }
  .mobile-played .table-card {
    min-width: 78px;
    max-width: 92px;
    min-height: 112px;
    transform: rotate(calc((var(--i, 0) - 2) * 2deg));
  }
  .mobile-played .table-undo-hint {
    bottom: .22rem;
    padding: .13rem .32rem;
    font-size: .46rem;
  }
  .mobile-played .role-track {
    position: absolute;
    left: .48rem;
    right: .48rem;
    bottom: .34rem;
    z-index: 5;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
  }
  .mobile-played .role-track span {
    max-width: 32%;
    padding: .16rem .32rem;
    background: rgba(3,6,5,.7);
  }
  .mobile-played .role-track b {
    max-width: 4.6rem;
    font-size: .5rem;
  }
  .mobile-played .role-track .line-pips {
    gap: .1rem;
  }
  .mobile-played .role-track .line-pips mark {
    width: .32rem;
    height: .32rem;
  }
  .mobile-played .role-track i {
    min-width: 1.5rem;
    font-size: .54rem;
  }
  .mobile-played .combo-banner {
    top: .34rem;
    min-width: 60%;
    padding: .34rem .54rem;
  }
  .mobile-played .combo-banner b {
    font-size: .78rem;
  }
  .mobile-table-empty {
    width: 100%;
    color: rgba(241,228,200,.48);
    font-family: var(--serif);
    text-align: center;
  }
  .mobile-sites {
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    z-index: 2;
  }
  .mobile-site {
    min-height: 0;
    display: grid;
    align-content: end;
    gap: .06rem;
    padding: .45rem;
    border: 1px solid rgba(241,228,200,.16);
    border-radius: 14px;
    color: var(--ink);
    background:
      linear-gradient(180deg, transparent 34%, rgba(0,0,0,.54)),
      var(--site-art-image);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 10px 22px rgba(0,0,0,.25);
  }
  .mobile-site span,
  .mobile-site small {
    color: rgba(241,228,200,.72);
    font-size: .55rem;
    text-transform: uppercase;
  }
  .mobile-site b {
    font-family: var(--serif);
    font-size: .88rem;
    line-height: 1;
  }
  .mobile-upgrades {
    display: flex;
    gap: .16rem;
    min-height: 16px;
    align-items: center;
  }
  .mobile-upgrades.empty::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: rgba(241,228,200,.24);
  }
  .mobile-upgrades span {
    width: 22px;
    height: 16px;
    border: 1px solid rgba(216,163,75,.6);
    border-radius: 3px;
    background-image:
      linear-gradient(180deg, transparent 42%, rgba(0,0,0,.54)),
      var(--card-art-image);
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0,0,0,.3);
    transform: rotate(-5deg);
  }
  .mobile-site[data-s="damaged"] { filter: saturate(.85); border-color: rgba(216,163,75,.64); }
  .mobile-site[data-s="ruined"] { filter: grayscale(.65) brightness(.58); }
  .mobile-site[data-used="true"] { transform: rotate(-2deg) translateY(5px); opacity: .72; }
  .mobile-site[data-pulse="true"] {
    animation: siteTapPulse .58s cubic-bezier(.2,.9,.2,1);
    border-color: rgba(216,163,75,.9);
    box-shadow: inset 0 0 0 1px rgba(216,163,75,.32), 0 0 34px rgba(216,163,75,.2), 0 14px 28px rgba(0,0,0,.34);
  }
  .mobile-hand-stage {
    grid-row: 5;
    position: relative;
    perspective: 900px;
    overflow: visible;
    z-index: 5;
  }
  .mobile-hand-stage::after {
    content: var(--hint-swipe-table);
    position: absolute;
    left: 50%;
    top: -.55rem;
    z-index: 12;
    transform: translate(-50%, 8px);
    border: 1px solid rgba(216,163,75,.42);
    border-radius: 999px;
    padding: .34rem .66rem;
    color: #f5d89d;
    background: rgba(8,12,10,.84);
    box-shadow: 0 12px 28px rgba(0,0,0,.34);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
  }
  body.hand-dragging .mobile-hand-stage::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  body.hand-drop-ready .mobile-hand-stage::after {
    content: var(--hint-release-play);
    border-color: rgba(216,163,75,.9);
    background: rgba(39,31,13,.92);
  }
  body.table-undo-dragging .mobile-hand-stage::after {
    content: var(--hint-drag-hand);
    opacity: 1;
    transform: translate(-50%, 0);
  }
  body.table-undo-ready .mobile-hand-stage::after {
    content: var(--hint-release-hand);
    border-color: rgba(139,176,125,.86);
    background: rgba(18,38,22,.92);
  }
  body.table-undo-ready .mobile-hand {
    filter: saturate(1.08) brightness(1.08);
  }
  .mobile-piles {
    position: absolute;
    inset: .2rem 0 auto;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
  }
  .mobile-pile {
    position: relative;
    width: 64px;
    height: 82px;
    display: grid;
    align-content: end;
    justify-items: start;
    gap: .02rem;
    padding: .42rem;
    overflow: hidden;
    pointer-events: auto;
    border: 1px solid rgba(241,228,200,.16);
    border-radius: 9px;
    color: var(--ink);
    background:
      linear-gradient(180deg, rgba(241,228,200,.08), rgba(0,0,0,.28)),
      rgba(4,8,7,.62);
    box-shadow: 6px 7px 0 rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.28);
  }
  .mobile-pile .pile-layer {
    inset: .34rem .36rem .4rem .32rem;
  }
  .mobile-pile .pile-top {
    inset: .38rem .42rem auto auto;
    width: 32px;
    max-width: none;
  }
  .mobile-pile span,
  .mobile-pile b {
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
  }
  .mobile-pile span {
    color: rgba(241,228,200,.68);
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-pile b {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1;
  }
  .mobile-hand {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .mobile-hand .card.in-hand {
    position: absolute;
    left: 50%;
    bottom: .15rem;
    width: clamp(104px, 30vw, 128px);
    min-width: 0;
    min-height: 158px;
    grid-template-rows: auto 72px auto auto;
    pointer-events: auto;
    touch-action: none;
    transform:
      translateX(calc(-50% + var(--hand-offset) * 68px))
      translateY(calc(var(--hand-distance) * 8px))
      rotate(calc(var(--hand-offset) * 7deg));
    transform-origin: 50% 112%;
    z-index: calc(30 - var(--hand-distance));
    will-change: transform;
  }
  .mobile-hand .card.in-hand .hand-grip {
    bottom: .3rem;
    width: 48%;
    height: 9px;
  }
  .mobile-hand .card.in-hand .hand-thumb-cue {
    position: absolute;
    left: 50%;
    bottom: 1.12rem;
    z-index: 7;
    transform: translateX(-50%) translateY(6px);
    min-width: 74%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .24rem;
    align-items: center;
    justify-content: center;
    padding: .18rem .38rem;
    border: 1px solid rgba(246,204,119,.38);
    border-radius: 999px;
    color: #ffe8b7;
    background: rgba(8,12,10,.78);
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
  }
  .mobile-hand .card.in-hand .hand-thumb-cue b,
  .mobile-hand .card.in-hand .hand-thumb-cue span {
    min-width: 0;
    overflow: hidden;
    font-size: .46rem;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mobile-hand .card.in-hand .hand-thumb-cue span {
    color: rgba(241,228,200,.72);
    font-size: .42rem;
  }
  .mobile-hand .card.in-hand.selected .hand-thumb-cue,
  .mobile-hand .card.in-hand:focus-within .hand-thumb-cue {
    opacity: .95;
    transform: translateX(-50%) translateY(0);
  }
  .mobile-hand .card.in-hand.dragging .hand-thumb-cue,
  body.hand-dragging .mobile-hand .card.in-hand .hand-thumb-cue {
    opacity: 0;
  }
  .mobile-hand .card.in-hand.selected,
  .mobile-hand .card.in-hand:focus-within {
    transform:
      translateX(calc(-50% + var(--hand-offset) * 18px))
      translateY(-70px)
      rotate(0deg)
      scale(1.08);
    z-index: 80;
  }
  .mobile-hand .card.in-hand.dragging {
    transform:
      translateX(-50%)
      translate3d(var(--drag-x, 0), var(--drag-y, 0), 0)
      translateY(-18px)
      scale(1.08)
      rotate(0deg);
    z-index: 90;
  }
  .mobile-hand .card.in-hand:not(.selected) .actions,
  .mobile-hand .card.in-hand:not(.selected) .meta,
  .mobile-hand .card.in-hand:not(.selected) .hand-effect-strip,
  .mobile-hand .card.in-hand:not(.selected) .card-copy p {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
  }
  .mobile-action-row {
    grid-row: 6;
    position: relative;
    align-self: start;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: .5rem;
    z-index: 8;
  }
  .mobile-coach {
    position: absolute;
    left: calc(74px + .5rem);
    right: 0;
    bottom: calc(100% + .26rem);
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .04rem .42rem;
    align-content: center;
    padding: .34rem .58rem;
    border: 1px solid rgba(216,163,75,.34);
    border-radius: 14px;
    color: var(--ink);
    background:
      linear-gradient(180deg, rgba(28,22,15,.88), rgba(7,10,9,.82));
    box-shadow: 0 12px 28px rgba(0,0,0,.32);
    backdrop-filter: blur(10px) saturate(1.05);
    pointer-events: none;
  }
  .mobile-coach.danger {
    border-color: rgba(169,67,53,.66);
    background:
      radial-gradient(circle at 10% 50%, rgba(169,67,53,.24), transparent 44%),
      linear-gradient(180deg, rgba(36,18,14,.9), rgba(8,10,9,.84));
  }
  .mobile-coach.calm {
    border-color: rgba(114,169,185,.44);
  }
  .mobile-coach span {
    align-self: center;
    padding: .16rem .32rem;
    border: 1px solid rgba(241,228,200,.16);
    border-radius: 999px;
    color: #f5d89d;
    background: rgba(0,0,0,.22);
    font-size: .5rem;
    font-weight: 950;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
  }
  .mobile-coach b,
  .mobile-coach small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-coach b {
    color: #fff0c9;
    font-family: var(--serif);
    font-size: .8rem;
    line-height: 1;
  }
  .mobile-coach small {
    grid-column: 2;
    color: rgba(241,228,200,.74);
    font-size: .55rem;
    font-weight: 800;
    line-height: 1;
  }
  .mobile-sheet-button,
  .mobile-primary-action {
    min-height: 52px;
    border-radius: 18px;
    font-size: .92rem;
  }
  .mobile-primary-action {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .04rem;
    padding: .46rem .7rem;
    line-height: 1.08;
  }
  .mobile-primary-action span,
  .mobile-primary-action small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }
  .mobile-primary-action span {
    color: rgba(45,25,9,.72);
    font-size: .54rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-primary-action b {
    max-width: 100%;
    overflow: hidden;
    color: #1e1308;
    font-size: .9rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }
  .mobile-primary-action small {
    color: rgba(37,24,10,.78);
    font-size: .64rem;
    font-weight: 850;
  }
  .mobile-sheet-button {
    background: rgba(5,8,7,.58);
    color: #f5d89d;
    border-color: rgba(216,163,75,.42);
  }
  .mobile-market-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(76dvh, 620px);
    z-index: 45;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .6rem;
    padding: 1rem .86rem calc(env(safe-area-inset-bottom) + 1rem);
    border: 1px solid rgba(241,228,200,.18);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
      radial-gradient(circle at 50% 0%, rgba(216,163,75,.14), transparent 36%),
      rgba(13,20,17,.97);
    box-shadow: 0 -22px 58px rgba(0,0,0,.58);
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.2,.9,.18,1);
    overflow: hidden;
  }
  .mobile-market-sheet[aria-hidden="true"] {
    visibility: hidden;
    transform: translateY(calc(100% + 4rem));
  }
  body[data-sheet="market"] .mobile-market-sheet {
    visibility: visible;
    transform: translateY(0);
  }
  .mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .mobile-sheet-head b {
    font-family: var(--serif);
    font-size: 1.08rem;
  }
  .mobile-sheet-head button {
    min-height: 36px;
    padding: .35rem .65rem;
  }
  .mobile-market {
    position: relative;
    display: flex;
    gap: .55rem;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .1rem .08rem .8rem;
    scroll-snap-type: x mandatory;
  }
  .mobile-market::after {
    content: var(--hint-market-drag);
    position: sticky;
    left: 50%;
    bottom: .2rem;
    z-index: 30;
    align-self: end;
    transform: translateX(-50%) translateY(8px);
    margin-left: -50%;
    border: 1px solid rgba(139,176,125,.44);
    border-radius: 999px;
    padding: .28rem .58rem;
    color: #dcebc9;
    background: rgba(8,14,10,.86);
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
  }
  body.market-buy-dragging .mobile-market::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  body.market-buy-ready .mobile-market::after {
    content: var(--hint-market-release);
    border-color: rgba(139,176,125,.9);
  }
  .mobile-market .card {
    flex: 0 0 154px;
    min-width: 154px;
    min-height: 292px;
    scroll-snap-align: center;
  }
  .mobile-market .card.selected {
    transform: translateY(-8px) rotate(.8deg);
    box-shadow: 0 18px 38px rgba(0,0,0,.42), 0 0 0 2px rgba(216,163,75,.62);
  }
  .mobile-market .card.market-buy-dragging {
    transform: translate3d(var(--market-dx, 0), var(--market-dy, 0), 0) rotate(-1deg) scale(1.03);
    z-index: 20;
    touch-action: none;
  }
  .mobile-market .card.market-buy-ready {
    border-color: rgba(139,176,125,.9);
    box-shadow: 0 20px 42px rgba(0,0,0,.42), 0 0 0 2px rgba(139,176,125,.32), 0 0 34px rgba(139,176,125,.2);
  }
  body.market-buy-ready .mobile-piles .discard-pile {
    border-color: rgba(139,176,125,.9);
    box-shadow: 0 0 0 2px rgba(139,176,125,.26), 0 0 32px rgba(139,176,125,.2), 6px 7px 0 rgba(0,0,0,.18);
  }
  .mobile-market .market-seal {
    padding: .32rem .38rem;
  }
  .mobile-market .market-seal b {
    font-size: .72rem;
  }
  .mobile-market .market-seal small {
    font-size: .5rem;
  }
  .mobile-market .market-actions {
    display: none;
  }
  .mobile-market-focus {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: .52rem;
    padding: .62rem;
    border: 1px solid rgba(216,163,75,.34);
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(216,163,75,.12), rgba(5,8,7,.52)),
      rgba(7,11,10,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.24);
  }
  .mobile-market-focus div {
    min-width: 0;
  }
  .mobile-market-focus span,
  .mobile-market-focus small,
  .mobile-market-focus em {
    display: block;
    color: rgba(241,228,200,.66);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-market-focus b {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-market-focus em {
    margin-top: .16rem;
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-market-focus .market-synergy {
    display: block;
    margin-top: .18rem;
    overflow: hidden;
    color: #d8eef0;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mobile-market-focus .market-synergy.burst {
    color: #ffe2a1;
  }
  .mobile-market-focus .market-synergy.ready {
    color: #d7f0c9;
  }
  .mobile-market-focus em.good {
    color: #d7f0c9;
  }
  .mobile-market-focus em.wait {
    color: #f5d89d;
  }
  .mobile-market-focus em.danger {
    color: #ffd2c9;
  }
  .mobile-market-focus button {
    min-height: 44px;
    padding: .42rem .72rem;
    border-radius: 14px;
    font-size: .78rem;
  }
  .inspect-modal {
    align-items: end;
    justify-items: center;
    padding: 0 .55rem calc(env(safe-area-inset-bottom) + .55rem);
    background: linear-gradient(180deg, rgba(3,7,6,.22), rgba(3,7,6,.78));
    backdrop-filter: blur(7px);
  }
  .inspect-sheet {
    width: min(100%, calc(100vw - 1rem));
    max-height: min(72dvh, 560px);
    grid-template-columns: minmax(104px, 34%) minmax(0, 1fr);
    align-items: stretch;
    gap: .72rem;
    padding: .68rem;
    border-radius: 18px;
    overflow: auto;
    box-shadow: 0 -18px 58px rgba(0,0,0,.58);
  }
  .inspect-art {
    min-height: min(38dvh, 290px);
    background-position: center;
  }
  .inspect-copy {
    align-content: start;
    gap: .48rem;
  }
  .inspect-copy h2 {
    font-size: clamp(1.3rem, 6.5vw, 1.9rem);
    line-height: .98;
    overflow-wrap: anywhere;
  }
  .inspect-copy p,
  .inspect-copy .meta {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .inspect-actions {
    margin-top: .1rem;
  }
  .inspect-primary {
    min-height: 50px;
    padding: .56rem .74rem;
  }
  .inspect-primary b {
    max-width: 100%;
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inspect-primary small {
    max-width: 100%;
    overflow: hidden;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inspect-close {
    position: sticky;
    top: 0;
    grid-column: 1 / -1;
    order: -1;
    justify-self: end;
    transform: none;
    min-height: 42px;
    border-radius: 999px;
    z-index: 2;
  }
  .modal.open,
  .inspect-modal,
  .deck-modal,
  .chronicle-modal,
  .rules-modal,
  .saga-card-modal,
  .council,
  .toast {
    z-index: 60;
  }
}

@media (max-width: 0px) and (min-width: 0px) {
  .res { grid-template-columns: repeat(3, 1fr); gap: .34rem; padding: .58rem; }
  .r { min-height: 58px; gap: .28rem; padding: .38rem; }
  .r i { width: 24px; height: 24px; }
  .r[data-r="Ruder"] i { width: 28px; height: 15px; }
  .r b { font-size: 1.34rem; }
  .r span { font-size: .53rem; letter-spacing: .08em; }
  .r small { display: none; }
  .sites, .intents, .choices { grid-template-columns: 1fr; }
  .sites { gap: .42rem; padding: .62rem; }
  .site { min-height: 120px; padding: .62rem; }
  .site-card {
    min-height: 190px;
    grid-template-rows: auto 90px auto;
  }
  .player-zone {
    position: fixed;
    z-index: 16;
    left: .55rem;
    right: .55rem;
    bottom: calc(4.7rem + env(safe-area-inset-bottom));
    max-height: 20rem;
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: .42rem;
    border-color: rgba(216,163,75,.34);
    background:
      linear-gradient(180deg, rgba(19,25,20,.96), rgba(5,8,7,.98)),
      radial-gradient(ellipse at 50% 0%, rgba(216,163,75,.16), transparent 58%);
    box-shadow: 0 -18px 58px rgba(0,0,0,.58);
    backdrop-filter: none;
    transition: transform .22s ease;
  }
  body.site-focus .player-zone,
  body.market-focus .player-zone {
    transform: translateY(calc(100% + 1rem));
  }
  .player-left {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    align-items: stretch;
    gap: .32rem;
  }
  .player-zone .res {
    position: fixed;
    z-index: 18;
    top: calc(env(safe-area-inset-top) + .42rem);
    left: .55rem;
    right: .55rem;
    display: flex;
    grid-template-columns: none;
    gap: .24rem;
    padding: .2rem;
    border: 1px solid rgba(241,228,200,.12);
    border-radius: 999px;
    background: rgba(5,8,7,.62);
    box-shadow: 0 14px 34px rgba(0,0,0,.32);
    backdrop-filter: blur(14px) saturate(1.1);
  }
  .player-zone .res .r:first-child {
    grid-column: auto;
  }
  .player-zone .res .r {
    min-width: 0;
    min-height: 32px;
    flex: 1;
    grid-template-columns: auto auto;
    justify-content: center;
    border-radius: 999px;
    padding: .18rem .26rem;
    background: rgba(0,0,0,.18);
  }
  .player-zone .res .r i { width: 17px; height: 17px; }
  .player-zone .res .r[data-r="Ruder"] i { width: 20px; height: 11px; }
  .player-zone .res .r b {
    font-size: .92rem;
  }
  .player-zone .res .r span {
    display: none;
  }
  .table-piles {
    grid-template-columns: 1fr 1fr;
    gap: .28rem;
  }
  .table-piles .pile-card {
    min-height: 50px;
    padding: .34rem .42rem;
    box-shadow: 5px 5px 0 rgba(0,0,0,.17);
  }
  .table-piles .pile-card b {
    font-size: 1.05rem;
  }
  .table-piles .pile-card small {
    max-width: 62%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table-piles .pile-card > span,
  .table-piles .pile-card > b,
  .table-piles .pile-card > small {
    max-width: 64%;
  }
  .pile-top {
    width: 28px;
    inset: .34rem .36rem auto auto;
  }
  .hand-slot {
    min-width: 0;
    border-radius: 9px;
  }
  .hand-slot .head {
    padding: .34rem .42rem;
  }
  .hand-slot .head-tools {
    gap: .28rem;
  }
  .hand-slot .head-tools .ghost {
    min-height: 30px;
    padding: .28rem .42rem;
    font-size: .68rem;
  }
  .player-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: .34rem;
    display: none;
  }
  .hand {
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 196px;
    overflow: hidden;
    padding: .45rem .2rem .88rem;
    touch-action: pan-y;
  }
  .hand .empty {
    width: 100%;
  }
  .hand .card.in-hand {
    flex: 0 0 clamp(132px, 47vw, 184px);
    min-width: clamp(132px, 47vw, 184px);
    min-height: 176px;
    grid-template-rows: auto 70px auto auto;
    margin: 0 clamp(-66px, -17vw, -42px);
    transform:
      translateY(calc(var(--hand-distance) * 8px))
      rotate(calc(var(--hand-offset) * 5.5deg));
    transform-origin: 50% 110%;
    z-index: calc(20 - var(--hand-distance));
    box-shadow: 0 20px 48px rgba(0,0,0,.34);
    touch-action: none;
  }
  .hand .card.in-hand:first-child { margin-left: 0; }
  .hand .card.in-hand:last-child { margin-right: 0; }
  .hand .card.in-hand.selected,
  .hand .card.in-hand:focus-within {
    transform:
      translateX(calc(var(--hand-offset) * -18px))
      translateY(-104px)
      scale(1.06)
      rotate(0deg);
    z-index: 60;
    border-color: rgba(216,163,75,.9);
    box-shadow: 0 26px 68px rgba(0,0,0,.48), 0 0 0 1px rgba(216,163,75,.24), 0 0 34px rgba(216,163,75,.16);
  }
  .hand .card.in-hand.dragging {
    transform:
      translate3d(var(--drag-x, 0), var(--drag-y, 0), 0)
      translateY(-22px)
      scale(1.08)
      rotate(0deg);
    z-index: 80;
  }
  .hand .card.in-hand .card-art {
    min-height: 70px;
    background-size: 132% auto;
    background-position: center 58%;
  }
  .hand .card.in-hand .card-copy {
    min-height: 2.65rem;
  }
  .hand .card.in-hand .card-copy h3 {
    font-size: .82rem;
  }
  .hand .card.in-hand .card-copy p,
  .hand .card.in-hand .meta {
    font-size: .66rem;
  }
  .hand .card.in-hand .actions button {
    min-height: 34px;
    font-size: .66rem;
    padding: .25rem .34rem;
  }
  .hand .card.in-hand:not(.selected) .actions {
    opacity: 0;
    pointer-events: none;
  }
  .hand .card.in-hand:not(.selected) .meta {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  .hand .card.in-hand:not(.selected) .card-copy {
    min-height: 1.55rem;
  }
  .hand .card.in-hand:not(.selected) .card-copy p {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
  }
  .hand .card.in-hand:not(.selected) .card-copy h3 {
    display: -webkit-box;
    max-height: 2.1em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .route-track { grid-template-columns: 1fr 1fr; }
  .banner-choices { grid-template-columns: 1fr; }
  .banner-quick-start {
    min-height: 76px;
    grid-template-columns: 1fr;
    gap: .22rem;
    padding: .72rem .82rem;
  }
  .banner-quick-start span {
    grid-row: auto;
    width: fit-content;
  }
  .banner-quick-start small {
    white-space: normal;
  }
  .banner-choice { min-height: auto; }
  .analysis-grid { grid-template-columns: 1fr 1fr; }
  .chapter { min-height: 320px; }
  .chapter .copy {
    max-height: 3.1em;
    overflow: hidden;
  }
  .front-zone .intents {
    grid-template-columns: 1fr 1fr;
    overflow-x: auto;
  }
  .front-zone .intent {
    min-width: 168px;
    min-height: 210px;
  }
  .front-zone .intent-art {
    min-height: 76px;
  }
  .lineup-zone {
    padding: .48rem;
  }
  .market {
    padding: .48rem;
  }
  .market .card {
    min-height: 248px;
  }
  .market .card.selected {
    min-height: 292px;
    padding-bottom: 3.35rem;
  }
  .market .market-actions {
    grid-template-columns: 1fr 1fr;
    bottom: .46rem;
  }
  .market .market-actions button {
    min-height: 44px;
  }
  .legend-zone {
    max-height: 420px;
    overflow: auto;
  }
  .rules-grid, .rules-cards { grid-template-columns: 1fr; }
  .chronicle-summary, .chronicle-trophies { grid-template-columns: 1fr 1fr; }
  .chronicle-clans { grid-template-columns: 1fr; }
  .chronicle-hall { grid-template-columns: 1fr 1fr; }
  .chronicle-hall article {
    border-right: 0;
    border-bottom: 1px solid rgba(241,228,200,.1);
    padding: 0 0 .45rem;
  }
  .chronicle-hall article:nth-last-child(-n+2) {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .chronicle-run { grid-template-columns: 1fr; }
  .deck-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-zones { grid-template-columns: 1fr; }
  .council { top: auto; right: .7rem; left: .7rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); width: auto; }
  .council-grid { grid-template-columns: 1fr 1fr; }
  .mobile-dock {
    display: none;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .mobile-table {
    grid-template-rows:
      calc(env(safe-area-inset-top) + 58px)
      124px
      minmax(160px, 1fr)
      108px
      268px
      calc(env(safe-area-inset-bottom) + 78px);
    gap: .62rem;
    padding: 0 1rem;
  }
  .mobile-marker-bar {
    justify-self: center;
    width: min(720px, 100%);
    padding: .26rem;
  }
  .mobile-marker {
    height: 38px;
  }
  .mobile-marker i {
    width: 20px;
    height: 20px;
  }
  .mobile-threat,
  .mobile-sites,
  .mobile-played,
  .mobile-hand-stage {
    justify-self: center;
    width: min(720px, 100%);
  }
  .mobile-intent-card {
    padding: .7rem .82rem;
  }
  .mobile-intent-card b {
    font-size: 1.05rem;
  }
  .mobile-played {
    padding: .75rem;
  }
  .mobile-site {
    padding: .64rem .72rem;
  }
  .mobile-pile {
    width: 78px;
    height: 100px;
  }
  .mobile-hand .card.in-hand {
    width: clamp(138px, 22vw, 176px);
    min-height: 228px;
    grid-template-rows: auto minmax(138px, 1fr) auto auto;
    transform:
      translateX(calc(-50% + var(--hand-offset) * 88px))
      translateY(calc(var(--hand-distance) * 10px))
      rotate(calc(var(--hand-offset) * 6deg));
  }
  .mobile-hand .card.in-hand .card-art {
    min-height: 138px;
  }
  .mobile-hand .card.in-hand.selected,
  .mobile-hand .card.in-hand:focus-within {
    transform:
      translateX(calc(-50% + var(--hand-offset) * 22px))
      translateY(-78px)
      rotate(0deg)
      scale(1.1);
  }
  .mobile-action-row {
    justify-self: center;
    width: min(720px, calc(100% - 2rem));
  }
  .mobile-coach {
    left: calc(88px + .5rem);
    min-height: 38px;
    padding: .42rem .68rem;
  }
  .mobile-coach b {
    font-size: .9rem;
  }
  .mobile-coach small {
    font-size: .62rem;
  }
  .mobile-market-sheet {
    left: 50%;
    right: auto;
    width: min(760px, calc(100% - 2rem));
    max-height: 72dvh;
    border-right: 1px solid rgba(241,228,200,.18);
    border-left: 1px solid rgba(241,228,200,.18);
    border-radius: 24px 24px 0 0;
    transform: translate(-50%, 105%);
  }
  .mobile-market-sheet[aria-hidden="true"] {
    transform: translate(-50%, calc(100% + 4rem));
  }
  body[data-sheet="market"] .mobile-market-sheet {
    transform: translate(-50%, 0);
  }
  .mobile-market .card {
    flex-basis: 174px;
    min-width: 174px;
    min-height: 318px;
  }
}
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .mobile-table {
    grid-template-rows:
      calc(env(safe-area-inset-top) + 34px)
      58px
      minmax(52px, 1fr)
      46px
      118px
      calc(env(safe-area-inset-bottom) + 48px);
    gap: .22rem;
    padding: 0 max(.45rem, env(safe-area-inset-left)) 0 max(.45rem, env(safe-area-inset-right));
  }
  .mobile-marker-bar {
    justify-self: center;
    width: min(720px, 100%);
    padding: .15rem;
  }
  .mobile-marker {
    height: 26px;
    gap: .12rem;
  }
  .mobile-marker i {
    width: 13px;
    height: 13px;
  }
  .mobile-marker[data-r="Ruder"] i {
    width: 16px;
    height: 8px;
  }
  .mobile-marker b {
    font-size: .72rem;
  }
  .mobile-threat,
  .mobile-sites,
  .mobile-played,
  .mobile-hand-stage,
  .mobile-action-row {
    justify-self: center;
    width: min(720px, 100%);
  }
  .mobile-threat {
    gap: .28rem;
  }
  .mobile-intent-card {
    padding: .28rem .44rem;
    border-radius: 10px;
  }
  .mobile-intent-card span,
  .mobile-intent-empty span {
    font-size: .46rem;
  }
  .mobile-intent-card b,
  .mobile-intent-empty b {
    font-size: .72rem;
  }
  .mobile-intent-card small,
  .mobile-intent-card em {
    font-size: .5rem;
  }
  .mobile-played {
    padding: .3rem .44rem;
    border-radius: 10px;
  }
  .mobile-played::after,
  .mobile-hand-stage::after {
    font-size: .55rem;
    padding: .28rem .5rem;
  }
  .mobile-played .table-card {
    min-width: 52px;
    max-width: 64px;
    min-height: 74px;
  }
  .mobile-played .table-undo-hint {
    bottom: .16rem;
    padding: .1rem .24rem;
    font-size: .38rem;
  }
  .mobile-sites {
    gap: .25rem;
  }
  .mobile-site {
    min-height: 0;
    padding: .28rem .38rem;
    border-radius: 10px;
  }
  .mobile-site b {
    font-size: .7rem;
  }
  .mobile-site span,
  .mobile-site small,
  .mobile-site em {
    font-size: .48rem;
  }
  .mobile-piles {
    inset: .05rem 0 auto;
  }
  .mobile-pile {
    width: 46px;
    height: 58px;
    padding: .22rem;
    border-radius: 7px;
  }
  .mobile-pile .pile-top {
    width: 22px;
  }
  .mobile-pile span {
    font-size: .42rem;
  }
  .mobile-pile b {
    font-size: .78rem;
  }
  .mobile-hand .card.in-hand {
    width: clamp(82px, 14vw, 104px);
    min-height: 112px;
    grid-template-rows: auto 46px auto auto;
    transform:
      translateX(calc(-50% + var(--hand-offset) * 54px))
      translateY(calc(var(--hand-distance) * 5px))
      rotate(calc(var(--hand-offset) * 6deg));
  }
  .mobile-hand .card.in-hand .card-art {
    min-height: 46px;
  }
  .mobile-hand .card.in-hand .card-copy h3 {
    font-size: .68rem;
    line-height: 1;
  }
  .mobile-hand .hand-effect-strip {
    min-height: 18px;
    padding: .12rem .28rem;
    font-size: .48rem;
    border-radius: 6px;
  }
  .mobile-hand .card.in-hand.selected,
  .mobile-hand .card.in-hand:focus-within {
    transform:
      translateX(calc(-50% + var(--hand-offset) * 14px))
      translateY(-38px)
      rotate(0deg)
      scale(1.06);
  }
  .mobile-action-row {
    grid-template-columns: 64px 1fr;
    gap: .35rem;
  }
  .mobile-coach {
    display: grid;
    left: calc(64px + .35rem);
    right: 0;
    bottom: calc(100% + .12rem);
    min-height: 24px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .04rem .3rem;
    padding: .2rem .42rem;
    border-radius: 10px;
  }
  .mobile-coach span {
    padding: .1rem .22rem;
    font-size: .38rem;
    letter-spacing: .08em;
  }
  .mobile-coach b {
    font-size: .62rem;
  }
  .mobile-coach small {
    grid-column: auto;
    max-width: 34vw;
    font-size: .43rem;
  }
  .mobile-primary-action.primary {
    border-color: #efc16e;
    background: linear-gradient(180deg, #f4cf82 0%, #dba246 56%, #b87925 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,244,211,.38),
      0 10px 24px rgba(0,0,0,.34);
  }
  .mobile-primary-action.primary b {
    color: #170e05;
    text-shadow: 0 1px 0 rgba(255,236,170,.42);
  }
  .mobile-primary-action.primary span,
  .mobile-primary-action.primary small {
    color: rgba(36,22,7,.82);
  }
  .mobile-sheet-button,
  .mobile-primary-action {
    min-height: 48px;
    border-radius: 14px;
    font-size: .78rem;
  }
  .mobile-primary-action {
    gap: 0;
    padding: .34rem .52rem;
  }
  .mobile-primary-action span {
    font-size: .46rem;
  }
  .mobile-primary-action b {
    font-size: .74rem;
  }
  .mobile-primary-action small {
    font-size: .52rem;
  }
  .mobile-market-sheet {
    height: 92dvh;
    max-height: 92dvh;
    padding: .55rem .65rem calc(env(safe-area-inset-bottom) + .65rem);
    border-radius: 18px 18px 0 0;
  }
  .mobile-market {
    gap: .45rem;
    padding-bottom: .35rem;
  }
  .mobile-market .card {
    flex-basis: 116px;
    min-width: 116px;
    min-height: 168px;
    grid-template-rows: auto 70px auto auto;
  }
  .mobile-market .card .card-art {
    min-height: 70px;
  }
  .mobile-market .card .card-copy p {
    max-height: 2.4em;
    overflow: hidden;
  }
  .mobile-market-focus {
    min-height: 56px;
    gap: .4rem;
  }
  .mobile-market-focus b {
    font-size: .78rem;
  }
  .mobile-market-focus small,
  .mobile-market-focus em,
  .mobile-market-focus strong {
    font-size: .52rem;
  }
  .mobile-market-focus button {
    min-height: 42px;
    padding: .45rem .62rem;
  }
  .mobile-market-focus {
    grid-template-columns: 1fr auto auto auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 900px) {
  .modal {
    padding: .55rem;
  }
  .banner-choice-sheet {
    width: min(100%, calc(100vw - 1.1rem));
    max-height: calc(100dvh - 1.1rem);
    overflow: auto;
    padding: .95rem;
  }
  .banner-choice-sheet h2 {
    font-size: clamp(1.5rem, 8vw, 2rem);
    line-height: 1;
  }
  .banner-choice-sheet p {
    margin-bottom: .65rem;
    font-size: .92rem;
    line-height: 1.35;
  }
  .banner-quick-start {
    min-height: 76px;
    grid-template-columns: 1fr;
    gap: .24rem;
    padding: .72rem .82rem;
  }
  .banner-quick-start span {
    grid-row: auto;
    width: fit-content;
  }
  .banner-quick-start small {
    white-space: normal;
  }
  .banner-choices {
    grid-template-columns: 1fr;
    gap: .54rem;
    margin-top: .7rem;
  }
  .banner-choice {
    min-height: 156px;
    gap: .42rem;
    padding: .8rem;
  }
  .banner-choice b {
    font-size: 1.48rem;
  }
}