:root {
  --bg: #080a10;
  --panel: rgba(18, 21, 31, 0.92);
  --panel-soft: rgba(25, 29, 42, 0.76);
  --line: rgba(255, 255, 255, 0.11);
  --line-bright: rgba(255, 255, 255, 0.23);
  --text: #f4f1e8;
  --muted: #969aa8;
  --red: #cf1827;
  --red-rgb: 207, 24, 39;
  --blue: #2c9fae;
  --blue-rgb: 44, 159, 174;
  --yellow: #e3b578;
  --yellow-rgb: 227, 181, 120;
  --green: #13ce6c;
  --green-rgb: 19, 206, 108;
  --accent: #e7d09b;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 960px;
  min-height: 640px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
}

button,
dialog { font: inherit; }

button { color: inherit; }

button:focus-visible,
[href]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.language-control {
  position: relative;
  z-index: 70;
}

.language-select {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: min(190px, calc(100vw - 150px));
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  padding: 6px 11px;
  background: rgba(13, 16, 25, .92);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font: 700 12px/1 var(--sans);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.language-select:hover,
.language-control.open .language-select { border-color: var(--accent); }
.language-select:focus-visible,
.language-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.language-flag { width: 22px; height: 15px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; object-fit: cover; }
.language-chevron { margin-left: auto; color: var(--muted); font-size: 11px; }
.language-options {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  min-width: 205px;
  max-height: min(420px, calc(100vh - 82px));
  overflow-y: auto;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  padding: 5px;
  background: rgba(13, 16, 25, .98);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
}
.language-options[hidden] { display: none; }
.language-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 8px 9px;
  background: transparent;
  color: var(--text);
  font: 700 12px/1.15 var(--sans);
  text-align: left;
  cursor: pointer;
}
.language-option:hover,
.language-option.selected { background: rgba(231,208,155,.18); color: #fff; }

.app-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 960px;
  min-height: 640px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -20%, rgba(52, 58, 86, 0.42), transparent 42%),
    linear-gradient(160deg, #080a10 0%, #0d1018 47%, #070910 100%);
}


.ambient {
  position: fixed;
  z-index: -1;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08;
  pointer-events: none;
}

.ambient-one { top: -20vw; left: -5vw; background: var(--red); }
.ambient-two { right: -18vw; bottom: -18vw; background: var(--blue); }

.screen { width: 100%; height: 100%; }
.eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.button {
  position: relative;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  padding: 13px 20px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 750;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.48); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: 0.42; }

.button-primary {
  border-color: rgba(231, 208, 155, 0.72);
  background: linear-gradient(135deg, #f0dcaa 0%, #bd9257 100%);
  color: #17130c;
  box-shadow: 0 12px 38px rgba(209, 169, 105, 0.16);
}

.button-primary:hover:not(:disabled) { box-shadow: 0 16px 48px rgba(209, 169, 105, 0.3); }
.button-secondary { background: rgba(16, 18, 26, 0.78); }
.button-quiet { background: rgba(255, 255, 255, 0.035); color: var(--muted); }

.button-large {
  display: flex;
  min-width: 238px;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 16px 22px;
  font-size: 15px;
}

.button-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0.65;
  text-transform: uppercase;
}

.text-button {
  border: 0;
  padding: 9px 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.text-button:hover { color: var(--text); }
.community-link { text-decoration: none; }
.discord-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #5865f2;
  border-radius: 4px;
  padding: 11px 18px;
  background: #5865f2;
  color: #fff;
  box-shadow: 0 10px 26px rgba(88, 101, 242, .24);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.discord-button:hover {
  border-color: #4752c4;
  background: #4752c4;
  color: #fff;
  box-shadow: 0 14px 34px rgba(88, 101, 242, .34);
  transform: translateY(-2px);
}
.discord-button:active { transform: translateY(0); }
.discord-button:focus-visible { outline-color: #e0e3ff; }
.discord-logo { display: block; width: 24px; height: 18px; flex: 0 0 auto; }
.button.discord-button { border-color: #5865f2; background: #5865f2; color: #fff; }
.button.discord-button:hover:not(:disabled) { border-color: #4752c4; background: #4752c4; box-shadow: 0 14px 34px rgba(88, 101, 242, .34); }
.discord-cta { align-items: center; justify-content: center; text-align: center; }

/* Title */
.title-screen {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(4, 5, 9, 0.96), rgba(4, 5, 9, 0.62) 45%, rgba(4, 5, 9, 0.96));
}

.title-screen::before,
.title-screen::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.title-screen::before {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(255,255,255,.023) 120px),
    repeating-linear-gradient(0deg, transparent 0, transparent 119px, rgba(255,255,255,.018) 120px);
  mask-image: radial-gradient(circle at center, black, transparent 65%);
}

.title-screen::after {
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 180px #000;
}

.title-vignette {
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(231, 208, 155, 0.15);
  pointer-events: none;
}

.title-ouroboros {
  position: absolute;
  z-index: 0;
  width: min(82vh, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  opacity: .2;
  filter: drop-shadow(0 0 50px rgba(231, 208, 155, .15));
  pointer-events: none;
}

.title-ouroboros img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: invert(1) contrast(1.25);
  animation: spin-counterclockwise 48s linear infinite;
}

.title-vignette::before,
.title-vignette::after {
  position: absolute;
  width: 80px;
  height: 1px;
  background: var(--accent);
  content: "";
}

.title-vignette::before { top: -1px; left: 50%; transform: translateX(-50%); }
.title-vignette::after { right: 50%; bottom: -1px; transform: translateX(50%); }

.title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: title-rise 900ms cubic-bezier(.2,.8,.2,1) both;
}
.music-control.title-music-control { position: relative; }

.deck-topbar.title-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  backdrop-filter: blur(18px);
}

.title-topbar .brand-small { justify-self: start; }

.title-mark {
  position: relative;
  width: 54px;
  height: 54px;
  margin-bottom: 21px;
  transform: rotate(45deg);
}

.mark-stone {
  position: absolute;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 22px currentColor;
}

.mark-red { top: 0; left: 0; background: var(--red); color: var(--red); }
.mark-blue { top: 0; right: 0; background: var(--blue); color: var(--blue); }
.mark-yellow { bottom: 0; right: 0; background: var(--yellow); color: var(--yellow); }
.mark-green { bottom: 0; left: 0; background: var(--green); color: var(--green); }

.title-content h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(58px, 7vw, 104px);
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 0.84;
  text-shadow: 0 16px 56px #000;
}

.title-content h1 span { color: var(--accent); }

.title-copy {
  margin: 25px 0 30px;
  color: #c9c9ca;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
}

.title-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.title-actions .text-button { grid-column: 1 / -1; }
.title-actions .discord-button-title { width: min(100%, 348px); grid-column: 1 / -1; justify-self: center; }
.button-tutorial { border-color: rgba(var(--blue-rgb), .48); background: linear-gradient(145deg, rgba(var(--blue-rgb), .18), rgba(16,18,26,.86)); }
.button-online { border-color: rgba(var(--green-rgb), .58); background: linear-gradient(145deg, rgba(var(--green-rgb), .24), rgba(16,18,26,.9)); color: #e9fff4; }
.button-online .button-kicker { color: rgba(233,255,244,.62); }
.title-footnote { margin: 25px 0 0; color: #676b77; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; }
.title-footnote span { margin: 0 7px; }

.title-rain { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.rain-stone {
  position: absolute;
  top: -18vh;
  width: clamp(50px, 5vw, 85px);
  aspect-ratio: 1;
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.18;
  filter: saturate(.7) contrast(1.15);
  animation: rain-fall var(--duration) linear var(--delay) infinite;
  transform: rotate(var(--rotate));
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 160ms ease, filter 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.rain-stone:hover {
  opacity: .5;
  border-color: var(--glow-color);
  filter: saturate(1.25) brightness(1.12) contrast(1.1);
}

.rain-stone.lit {
  z-index: 3;
  opacity: 1;
  border-color: #fff;
  filter: saturate(1.7) brightness(1.32) contrast(1.08);
  box-shadow: 0 0 12px #fff, 0 0 38px 10px var(--glow-color), inset 0 0 18px var(--glow-color);
}

.rain-stone::after {
  position: absolute;
  inset: -5px;
  border: 2px solid var(--glow-color);
  border-radius: 10px;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.rain-stone.lit::after { animation: card-flare 650ms ease-out; }

.title-spark {
  position: absolute;
  z-index: 4;
  width: 18px;
  height: 18px;
  border: 2px solid var(--spark-color);
  border-radius: 50%;
  box-shadow: 0 0 22px var(--spark-color), inset 0 0 12px var(--spark-color);
  animation: title-spark 720ms ease-out forwards;
  pointer-events: none;
}

@keyframes rain-fall {
  from { translate: 0 -15vh; rotate: 0deg; }
  to { translate: var(--drift) 130vh; rotate: 250deg; }
}

@keyframes card-flare {
  from { opacity: 1; scale: .8; }
  to { opacity: 0; scale: 1.65; }
}

@keyframes title-spark {
  from { opacity: 1; scale: .4; }
  to { opacity: 0; scale: 8; }
}

@keyframes title-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Deck forge */
.deck-screen {
  display: grid;
  grid-template-rows: 58px 1fr;
  overflow: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(var(--red-rgb), .09), transparent 35%),
    radial-gradient(circle at 80% 90%, rgba(var(--blue-rgb), .11), transparent 38%),
    linear-gradient(145deg, #090b12, #111520 55%, #080a10);
}

.deck-topbar {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(18px, 3vw, 44px);
  background: rgba(7,9,14,.72);
}

.deck-back { border-color: var(--line); border-radius: 50%; color: var(--muted); font-size: 17px; }
.deck-mode-label { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.deck-topbar-actions { display: flex; align-items: center; justify-self: end; gap: 12px; }
.deck-content { width: min(1180px, calc(100% - 48px)); margin: auto; padding: clamp(24px, 4vh, 48px) 0 32px; }
.deck-intro { display: grid; grid-template-columns: 1fr minmax(320px, 570px); gap: 10px 45px; align-items: end; }
.deck-intro .eyebrow { grid-column: 1 / -1; }
.deck-intro h1 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 5vw, 64px); font-weight: 400; line-height: .95; }
.deck-intro > p:last-child { margin: 0; color: #a8aab3; font-family: var(--serif); font-size: 13px; line-height: 1.55; }
.custom-game-settings { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(480px, 1fr); gap: 14px 28px; align-items: end; margin-top: 20px; border: 1px solid rgba(var(--yellow-rgb),.25); border-radius: 6px; padding: 16px; background: rgba(var(--yellow-rgb),.045); }
.custom-game-settings[hidden] { display: none; }
.custom-game-settings h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.custom-game-settings > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.deck-builders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(22px, 4vh, 38px); }
.deck-builders.campaign { grid-template-columns: minmax(410px, .9fr) minmax(470px, 1.1fr); }
.deck-builders.hotseat-private { grid-template-columns: minmax(0, 720px); justify-content: center; }

.deck-builder {
  position: relative;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: clamp(18px, 2.3vw, 28px);
  background: linear-gradient(145deg, rgba(31,35,48,.88), rgba(12,14,22,.94));
  box-shadow: 0 24px 65px rgba(0,0,0,.28);
  overflow: hidden;
}

.deck-builder::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue), var(--yellow), var(--green)); content: ""; opacity: .75; }
.campaign-starter-picker { position: relative; border: 1px solid var(--line-bright); border-radius: 8px; padding: clamp(18px, 2.3vw, 28px); background: linear-gradient(145deg, rgba(31,35,48,.88), rgba(12,14,22,.94)); box-shadow: 0 24px 65px rgba(0,0,0,.28); overflow: hidden; }
.campaign-starter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.campaign-starter { display: grid; min-height: 150px; border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; cursor: pointer; }
.campaign-starter:hover:not(:disabled), .campaign-starter.selected { border-color: var(--accent); background: rgba(var(--yellow-rgb),.07); }
.campaign-starter.selected { box-shadow: inset 0 0 0 1px rgba(var(--yellow-rgb),.25); }
.campaign-starter:disabled { cursor: not-allowed; opacity: .42; }
.campaign-starter strong { margin: 7px 0 4px; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.campaign-starter > span:not(.campaign-node-type), .campaign-starter small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.campaign-starter small { margin-top: 9px; color: #c8b783; }
.deck-builder-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.deck-builder-head h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.hotseat-name-field { display: grid; width: min(320px, 58vw); margin-top: 4px; gap: 5px; }
.hotseat-name-field span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hotseat-name-field input { min-width: 0; border: 0; border-bottom: 1px solid rgba(231,208,155,.42); border-radius: 0; padding: 3px 2px 5px; background: transparent; color: var(--paper); font-family: var(--serif); font-size: 27px; outline: none; }
.hotseat-name-field input:focus { border-bottom-color: var(--gold); box-shadow: 0 2px 0 rgba(231,208,155,.16); }
.deck-total { text-align: right; }
.deck-total strong { display: block; font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1; }
.deck-total span { color: var(--muted); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.deck-total.invalid strong { color: var(--yellow); }
.deck-color-list { display: grid; gap: 6px; margin-top: 18px; }
.deck-color-row { display: grid; grid-template-columns: minmax(145px, 1fr) auto; align-items: center; border: 1px solid rgba(255,255,255,.075); border-radius: 5px; padding: 8px 10px; background: color-mix(in srgb, var(--deck-color), transparent 94%); }
.deck-color-name { display: flex; gap: 9px; align-items: center; }
.deck-color-gem { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--deck-color); border-radius: 50%; color: var(--deck-color); box-shadow: 0 0 13px color-mix(in srgb, var(--deck-color), transparent 55%); }
.deck-color-copy strong { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.deck-color-copy span { color: var(--muted); font-size: 8px; }
.deck-stepper { display: grid; grid-template-columns: 30px 39px 30px; align-items: center; }
.deck-stepper button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; }
.deck-stepper button:hover:not(:disabled) { border-color: var(--deck-color); color: var(--text); }
.deck-stepper button:disabled { cursor: not-allowed; opacity: .28; }
.deck-stepper output { font-family: var(--serif); font-size: 21px; text-align: center; }
.deck-presets { display: flex; gap: 5px; margin-top: 14px; }
.deck-presets button { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 7px 4px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.deck-presets button:hover { border-color: var(--line-bright); color: var(--text); }
.special-allocation { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.special-allocation-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.special-allocation-head strong { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.special-allocation-head span { color: var(--muted); font-size: 8px; }
.special-allocation .deck-color-list { margin-top: 10px; }
.campaign-roster {
  position: relative;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: clamp(18px, 2.3vw, 28px);
  background: radial-gradient(circle at 85% 5%, rgba(231,208,155,.08), transparent 35%), linear-gradient(145deg, rgba(24,28,40,.93), rgba(9,11,18,.97));
  box-shadow: 0 24px 65px rgba(0,0,0,.28);
  overflow: hidden;
}
.campaign-roster::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--yellow), var(--red), var(--green)); content: ""; box-shadow: 0 0 14px var(--accent); }
.campaign-roster-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 18px; }
.campaign-roster-head .eyebrow { grid-column: 1 / -1; }
.campaign-roster-head h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.campaign-roster-head > p:last-child { max-width: 330px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.campaign-roster ol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 17px 0 0; padding: 0; list-style: none; counter-reset: enemy; }
.campaign-roster li { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 1px 8px; align-items: center; border: 1px solid color-mix(in srgb, var(--enemy-color), transparent 75%); border-radius: 5px; padding: 7px 8px; background: color-mix(in srgb, var(--enemy-color), transparent 95%); box-shadow: inset 2px 0 var(--enemy-color); }
.campaign-number { grid-row: 1 / 3; color: var(--enemy-color); font-family: var(--serif); font-size: 17px; text-shadow: 0 0 10px color-mix(in srgb, var(--enemy-color), transparent 25%); }
.campaign-enemy-copy { min-width: 0; }
.campaign-enemy-copy strong { display: block; overflow: hidden; font-size: 9px; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.campaign-enemy-copy small { display: block; overflow: hidden; color: var(--muted); font-size: 7px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.difficulty-pips { grid-column: 2; color: var(--enemy-color); font-size: 7px; letter-spacing: .12em; opacity: .8; }
.deck-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.deck-footer div { display: flex; flex-direction: column; gap: 3px; }
.deck-footer strong { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.deck-footer span { color: var(--muted); font-size: 9px; }
.deck-footer .button { min-width: 210px; }
.deck-start-wrap { min-width: 210px; }
.deck-footer .deck-loadout-hint { max-width: 210px; color: #e9c981; font-size: 8px; line-height: 1.35; text-align: center; }

/* Online lobby */
.online-screen {
  background:
    radial-gradient(circle at 16% 22%, rgba(var(--green-rgb), .1), transparent 36%),
    radial-gradient(circle at 85% 80%, rgba(var(--yellow-rgb), .1), transparent 40%),
    linear-gradient(145deg, #080b11, #101521 58%, #07090f);
}
.online-content { align-self: start; }
.online-layout { display: grid; grid-template-columns: minmax(480px, 1fr) minmax(300px, 360px); gap: 18px; margin-top: clamp(22px, 4vh, 38px); }
.online-deck-builder .deck-builder { height: 100%; }
.online-lobby-copy { display: grid; align-content: center; min-height: 390px; border: 1px solid var(--line-bright); border-radius: 8px; padding: clamp(24px, 4vw, 54px); background: linear-gradient(145deg, rgba(31,35,48,.82), rgba(10,13,20,.94)); box-shadow: 0 24px 65px rgba(0,0,0,.24); }
.online-lobby-copy .eyebrow { margin: 0 0 12px; }
.online-lobby-copy h2 { max-width: 520px; margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); font-weight: 400; line-height: .98; }
.online-lobby-copy > p:not(.eyebrow) { max-width: 520px; margin: 20px 0 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.6; }
.tournament-format-note { display: grid; gap: 6px; max-width: 500px; margin-top: 26px; border-left: 2px solid var(--accent); padding: 10px 0 10px 14px; background: linear-gradient(90deg, rgba(var(--yellow-rgb), .09), transparent); }
.tournament-format-note strong { color: var(--accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tournament-format-note span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.online-setup-layout { grid-template-columns: minmax(480px, 1fr) minmax(280px, 330px); }
.online-setup-card { justify-content: center; }
.online-connect-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line-bright); border-radius: 8px; padding: clamp(18px, 2.3vw, 28px); background: linear-gradient(145deg, rgba(31,35,48,.9), rgba(10,13,20,.96)); box-shadow: 0 24px 65px rgba(0,0,0,.28); }
.online-connect-card > .button { width: 100%; min-height: 42px; }
.online-setup-start-wrap { display: grid; gap: 7px; }
.online-setup-start-wrap > .button { width: 100%; min-height: 42px; }
.online-setup-hint { color: #e9c981; font-size: 8px; line-height: 1.35; text-align: center; }
.online-field { display: grid; gap: 6px; }
.online-field > span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.online-field input, .online-field select { width: 100%; border: 1px solid var(--line-bright); border-radius: 5px; padding: 11px 12px; outline: none; background: rgba(4,6,11,.72); color: var(--text); font: 15px var(--sans); transition: border-color 160ms ease, box-shadow 160ms ease; }
.online-field input:focus, .online-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--yellow-rgb),.08); }
.title-practice-difficulty { width: min(280px, 100%); margin: -4px auto 2px; text-align: left; }
.ai-vs-ai-content { width: min(960px, calc(100% - 48px)); }
.ai-vs-ai-intro { grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); }
.ai-vs-ai-pickers { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: clamp(24px, 4vh, 40px); }
.ai-picker { position: relative; display: grid; align-content: start; gap: 14px; min-height: 210px; border: 1px solid var(--line-bright); border-radius: 8px; padding: clamp(20px, 3vw, 30px); background: linear-gradient(145deg, rgba(31,35,48,.9), rgba(10,13,20,.96)); box-shadow: 0 24px 65px rgba(0,0,0,.28); overflow: hidden; }
.ai-picker::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--blue); box-shadow: 0 0 18px var(--blue); content: ""; }
.ai-picker[data-ai-seat="1"]::before { background: var(--red); box-shadow: 0 0 18px var(--red); }
.ai-picker .eyebrow { margin: 0; }
.ai-picker .online-field select { color: var(--paper); font-family: var(--serif); font-size: 21px; }
.ai-picker-details { display: grid; gap: 5px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ai-picker-composition { display: flex; flex-wrap: wrap; gap: 3px 10px; color: #c8b783; }
.ai-picker-composition span { white-space: nowrap; }
.ai-picker-composition b { color: var(--text); font-weight: 700; }
.ai-versus { display: grid; width: 54px; height: 54px; place-self: center; place-items: center; border: 1px solid var(--line-bright); border-radius: 50%; background: rgba(8,10,16,.9); box-shadow: 0 0 28px rgba(var(--yellow-rgb),.12); color: var(--accent); font-family: var(--serif); font-size: 17px; letter-spacing: .08em; }
.ai-format-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; border: 0; padding: 0; }
.ai-format-picker legend { width: 100%; margin-bottom: 9px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ai-format-option { position: relative; display: grid; min-height: 102px; border: 1px solid var(--line); border-radius: 7px; padding: 16px; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, translate 150ms ease; }
.ai-format-option:hover { border-color: var(--line-bright); translate: 0 -2px; }
.ai-format-option:has(input:checked) { border-color: var(--accent); background: rgba(var(--yellow-rgb),.07); box-shadow: inset 0 0 0 1px rgba(var(--yellow-rgb),.18); }
.ai-format-option input { position: absolute; top: 13px; right: 13px; accent-color: var(--accent); }
.ai-format-option span { display: grid; gap: 7px; padding-right: 18px; }
.ai-format-option strong { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.ai-format-option small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.ai-vs-ai-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 17px; }
.ai-vs-ai-footer p { max-width: 600px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.ai-vs-ai-footer .button { min-width: 210px; }
.ai-series-stop { position: fixed; top: 70px; right: 14px; z-index: 34; min-height: 36px; border-color: rgba(var(--red-rgb),.58); padding: 9px 13px; background: rgba(65,17,23,.94); color: #ffe8e8; box-shadow: 0 12px 36px rgba(0,0,0,.38); }
.online-account { display: flex; margin-top: 8px; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.online-account .button { width: auto; padding: 7px 9px; }
.online-account-link { display: grid; gap: 8px; margin-top: 9px; border-left: 2px solid var(--accent); padding-left: 10px; }
.online-checkbox { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.online-checkbox input { accent-color: var(--accent); }
.online-match-settings { border: 1px solid rgba(var(--yellow-rgb),.25); border-radius: 6px; padding: 12px; background: rgba(var(--yellow-rgb),.045); }
.online-match-settings > .eyebrow { margin: 0 0 9px; }
.online-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.online-settings-grid input { font-family: var(--serif); font-size: 22px; }
.online-match-settings-note { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.online-match-settings.is-invite { border-color: rgba(var(--blue-rgb),.4); background: rgba(var(--blue-rgb),.06); }
#online-code { color: var(--accent); font-family: var(--serif); font-size: 24px; letter-spacing: .22em; text-align: center; text-transform: uppercase; }
.online-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: center; color: #696d78; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.online-divider::before, .online-divider::after { height: 1px; background: var(--line); content: ""; }
.tournament-divider { margin-top: 2px; color: var(--accent); }
.online-tournament-create { display: grid; gap: 10px; border: 1px solid rgba(var(--yellow-rgb), .34); border-radius: 6px; padding: 13px; background: linear-gradient(145deg, rgba(var(--yellow-rgb), .09), rgba(15,18,27,.55)); }
.online-tournament-create .eyebrow { margin: 0 0 5px; color: var(--accent); }
.online-tournament-create h2 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.online-tournament-create > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.online-tournament-create .online-match-settings-note { margin: 0; }
.online-tournament-desk { display: grid; gap: 11px; border: 1px solid rgba(var(--green-rgb), .4); border-radius: 6px; padding: 14px; background: linear-gradient(145deg, rgba(var(--green-rgb), .085), rgba(10,15,19,.9)); }
.tournament-desk-head { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: start; }
.tournament-desk-head .eyebrow { margin: 0 0 4px; color: var(--green); }
.tournament-desk-head h2 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1; }
.tournament-code { display: grid; gap: 3px; color: var(--muted); font-size: 7px; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.tournament-code strong { color: var(--accent); font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .12em; }
.tournament-desk-rules, .tournament-desk-waiting { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.tournament-desk-waiting { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.tournament-desk-waiting strong { color: var(--text); }
.tournament-next-match { display: grid; gap: 8px; border: 1px solid rgba(var(--blue-rgb), .32); border-radius: 5px; padding: 10px; background: rgba(var(--blue-rgb), .06); }
.tournament-next-match.is-requested { border-color: rgba(227, 181, 120, .78); box-shadow: 0 0 0 1px rgba(227, 181, 120, .24), 0 18px 50px rgba(0, 0, 0, .26); }
.tournament-next-match > span { color: var(--blue); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tournament-next-match strong { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.tournament-next-match p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.tournament-standings { display: grid; gap: 5px; }
.tournament-standings > strong, .tournament-fixtures > strong { color: var(--muted); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.tournament-standing { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.07); padding: 5px 0; font-size: 10px; }
.tournament-standing > span:first-child { color: var(--muted); font-family: var(--serif); font-size: 15px; }
.tournament-standing > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tournament-standing > span:last-child { color: var(--accent); font-size: 9px; font-weight: 800; }
.tournament-fixtures { display: grid; gap: 5px; }
.tournament-fixture { display: grid; grid-template-columns: 30px 1fr auto; gap: 7px; align-items: center; color: var(--muted); font-size: 9px; }
.tournament-fixture > span:first-child { color: var(--blue); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tournament-fixture > span:last-child { color: var(--text); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.online-waiting { border: 1px solid rgba(var(--green-rgb),.32); border-radius: 6px; padding: 14px; background: rgba(var(--green-rgb),.055); text-align: center; }
.online-waiting > span { display: block; color: var(--muted); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
.online-waiting > strong { display: block; margin: 5px 0 10px; color: var(--accent); font-family: var(--serif); font-size: 38px; font-weight: 400; letter-spacing: .18em; text-shadow: 0 0 18px rgba(var(--yellow-rgb),.25); }
.online-waiting p { margin: 10px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.online-resume { display: grid; gap: 7px; border: 1px solid rgba(var(--blue-rgb),.3); border-radius: 6px; padding: 12px; background: rgba(var(--blue-rgb),.055); }
.online-resume > span { color: var(--muted); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.online-resume > strong { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.online-status { min-height: 34px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.online-status.error { color: #ff8c95; }
.online-status.ready { color: var(--green); }

/* Game chrome */
.game-screen {
  --play-console-height: 35vh;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  background:
    linear-gradient(rgba(8,10,16,.92), rgba(8,10,16,.96)),
    url("assets/oroborous.png") center / 82vh auto no-repeat;
}
.game-screen.card-art-loading::before {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: #080a10;
  content: "";
}
.game-screen.card-art-loading::after {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  width: 54px;
  aspect-ratio: 1;
  border: 2px solid rgba(227,181,120,.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  content: "";
  transform: translate(-50%,-50%);
  animation: card-art-loading 900ms linear infinite;
}
@keyframes card-art-loading {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
.game-screen.play-console-retracted { grid-template-rows: 56px minmax(0, 1fr); }
.game-screen.play-console-retracted .log-toggle { bottom: 18px; }
.game-screen.play-console-retracted .battle-log { bottom: 52px; }

.topbar {
  display: grid;
  z-index: 10;
  grid-template-columns: 80px 1fr auto 1fr;
  align-items: center;
  padding: 0 25px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 9, 14, 0.82);
  backdrop-filter: blur(18px);
}

.brand-small {
  justify-self: start;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .15em;
}
.brand-small span { color: var(--accent); }
.brand-cluster { display: flex; gap: 12px; align-items: center; }
.campaign-progress { border-left: 1px solid var(--line-bright); padding-left: 12px; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

.turn-readout { display: flex; gap: 9px; align-items: baseline; }
.turn-label { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.turn-readout strong { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.turn-timer { min-width: 42px; border-left: 1px solid var(--line); padding-left: 10px; color: var(--green); font-family: var(--serif); font-size: 15px; letter-spacing: .06em; }
.turn-timer.reserve { color: #ffbf5a; text-shadow: 0 0 12px rgba(var(--yellow-rgb),.45); }
.turn-timer.urgent { color: #ff6671; text-shadow: 0 0 12px rgba(var(--red-rgb),.65); animation: timer-urgent 900ms ease-in-out infinite alternate; }
@keyframes timer-urgent { to { opacity: .58; } }
.topbar-actions { position: relative; display: flex; justify-self: end; gap: 7px; }

.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

#menu-button { align-content: center; gap: 4px; }
#menu-button span { display: block; width: 17px; height: 1px; background: #c6c7ca; }
.icon-button-round { border-color: var(--line); border-radius: 50%; color: var(--muted); font-size: 12px; font-weight: 800; }
.icon-button-round:hover { border-color: var(--line-bright); color: var(--text); }
.music-control { position: relative; }
[data-music-control-toggle].is-muted { color: #6d7280; }
.music-controls { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; width: 220px; gap: 10px; border: 1px solid var(--line-bright); border-radius: 7px; padding: 11px; background: rgba(13, 16, 25, 0.97); box-shadow: 0 18px 45px rgba(0,0,0,.38); backdrop-filter: blur(12px); }
.music-controls-head { display: flex; align-items: center; justify-content: space-between; }
.music-controls-head span { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.music-controls-head button { border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.music-controls-head button:hover { border-color: var(--accent); color: var(--text); }

.stone-physics-panel {
  position: fixed;
  top: 68px;
  right: 18px;
  z-index: 130;
  width: min(350px, calc(100vw - 24px));
  max-height: calc(100vh - 82px);
  overflow: auto;
  border: 1px solid rgba(var(--yellow-rgb),.45);
  border-radius: 8px;
  padding: 16px;
  background: rgba(11,8,7,.97);
  box-shadow: 0 22px 60px rgba(0,0,0,.62), inset 0 0 32px rgba(var(--red-rgb),.05);
  backdrop-filter: blur(18px);
}
.stone-physics-panel[hidden] { display: none; }
.stone-physics-heading { display: flex; gap: 18px; align-items: start; justify-content: space-between; }
.stone-physics-heading .eyebrow { margin: 0 0 3px; }
.stone-physics-heading h2 { margin: 0; font-family: var(--serif); font-size: 29px; font-weight: 400; }
.stone-physics-heading button { border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; }
.stone-physics-intro { margin: 7px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.stone-physics-controls { display: grid; gap: 11px; }
.stone-physics-controls label { display: grid; grid-template-columns: 1fr 2fr 42px; gap: 9px; align-items: center; color: #d6cbae; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.stone-physics-controls input { width: 100%; accent-color: var(--red); cursor: pointer; }
.stone-physics-controls output { color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.stone-physics-panel > .button { width: 100%; margin-top: 15px; padding: 9px 12px; }
.music-volume-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.music-volume-label input { width: 100%; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; touch-action: none; }
.music-volume-label output { min-width: 29px; color: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }

.game-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(160px, 18vw) minmax(440px, 1fr) minmax(160px, 18vw);
  gap: clamp(12px, 2vw, 34px);
  align-items: center;
  padding: 14px clamp(18px, 3vw, 52px) 8px;
}

/* Player cards */
.player-card {
  position: relative;
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: clamp(14px, 1.5vw, 23px);
  background: linear-gradient(150deg, rgba(31,35,48,.88), rgba(13,15,23,.92));
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
  overflow: hidden;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.player-card::after {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 50%;
  content: "";
}

.player-card.current {
  border-color: rgba(231, 208, 155, .65);
  box-shadow: 0 0 0 1px rgba(231,208,155,.08), 0 20px 70px rgba(0,0,0,.35);
  transform: translateY(-3px);
}

.player-card.current.critical {
  border-color: rgba(255, 48, 65, .95);
  box-shadow: inset 0 0 42px rgba(255, 18, 42, .48), inset 0 0 0 1px rgba(255, 74, 88, .78), 0 20px 70px rgba(0,0,0,.35);
}

.player-card.board-owner-card { background: linear-gradient(150deg, rgba(39,37,37,.92), rgba(13,15,23,.92)); }
.player-index { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.player-name-row { display: flex; margin-top: 5px; gap: 8px; align-items: center; }
.player-name-row h3 { min-width: 0; margin: 0; overflow: hidden; font-family: var(--serif); font-size: clamp(20px, 2vw, 29px); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.cpu-tag { border: 1px solid var(--line); border-radius: 20px; padding: 3px 6px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.health-label { display: flex; margin-top: 23px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.health-label strong { color: var(--text); font-family: var(--serif); font-size: clamp(25px, 2.3vw, 35px); font-weight: 400; letter-spacing: 0; }
.health-track { height: 5px; margin-top: 7px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.health-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), #ff725c); box-shadow: 0 0 15px rgba(var(--red-rgb),.4); transition: width 500ms ease; }
.player-resources { display: grid; grid-template-columns: repeat(var(--resource-count, 4), minmax(0, 1fr)); margin-top: 20px; }
.resource { min-width: 0; border-left: 1px solid var(--line); padding-left: 7px; }
.resource:first-child { border-left: 0; padding-left: 0; }
.resource span { display: block; overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .06em; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
.player-reserve-time { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 13px; border-top: 1px solid var(--line); padding-top: 9px; }
.player-reserve-time span { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.player-reserve-time strong { color: var(--text); font-family: var(--serif); font-size: 15px; font-weight: 400; letter-spacing: .06em; }
.player-reserve-time.no-reserve-time { justify-content: flex-start; }
.player-reserve-time.no-reserve-time strong { color: var(--muted); font-family: inherit; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.resource strong { display: block; margin-top: 3px; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.resource-quadrant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 5px; margin-top: 3px; }
.resource-quadrant b { color: var(--resource-color); font-family: var(--serif); font-size: 11px; font-weight: 400; line-height: 1; text-shadow: none; }
.resource.resource-hand-launch { animation: resolution-hand-launch 700ms ease-out; }
.status-ribbon { position: absolute; top: 0; right: 0; border-bottom-left-radius: 4px; padding: 6px 9px; background: var(--accent); color: #15120c; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.critical-ribbon { top: 27px; min-width: 82px; border-radius: 4px 0 0 4px; background: #f20d25; box-shadow: 0 0 16px rgba(255, 20, 45, .8); color: #fff; text-align: center; }

/* Arena */
.arena-column { display: flex; width: 100%; min-width: 0; height: 100%; min-height: 0; flex-direction: column; align-items: center; justify-content: center; container-type: size; }
.arena-heading { display: flex; width: min(100%, 960px); align-items: end; justify-content: space-between; }
.arena-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 32px); font-weight: 400; }
.board-owner { margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.arena-stage { position: relative; display: grid; width: fit-content; place-items: center; }

.arena {
  position: relative;
  width: min(max(220px, calc(100cqh - 124px)), 82cqw, 680px);
  min-width: min(220px, 100%);
  aspect-ratio: 1;
  margin: 6px auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(25,13,7,.02) 0 48%, rgba(7,3,2,.72) 100%),
    url("assets/arena-dark-walnut.png") center / cover;
  box-shadow: inset 0 0 82px rgba(3,1,0,.88), 0 34px 80px rgba(0,0,0,.4);
}
.game-screen.opponent-turn .arena-heading h2 { font-size: clamp(25px, 2.6vw, 38px); }

.arena::before,
.arena::after {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
}
.arena::after { inset: 30%; border-style: dashed; animation: spin 40s linear infinite reverse; }
.arena-grid { position: absolute; inset: 8%; border-radius: 50%; background: linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.08) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(255,255,255,.08) 50%, transparent 50.3%); }
.arena-serpent-spinner { position: absolute; inset: 1%; z-index: 0; width: 98%; height: 98%; pointer-events: none; transform-origin: 50% 50%; animation: spin-counterclockwise 48s linear infinite; will-change: transform; }
.arena-ouroboros { width: 100%; height: 100%; object-fit: contain; opacity: .96; filter: drop-shadow(0 9px 8px rgba(0,0,0,.76)); transform: scaleX(-1); }
.arena-orbit { position: absolute; border: 1px solid rgba(231,208,155,.1); border-radius: 50%; pointer-events: none; }
.orbit-one { inset: -7px; animation: spin 31s linear infinite; }
.orbit-one::before { position: absolute; top: 21%; left: 1%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); content: ""; }
.orbit-two { inset: 22%; border-style: dotted; animation: spin 18s linear infinite reverse; }

.board-sector { position: absolute; z-index: 1; display: flex; width: 43%; height: 43%; flex-wrap: wrap; gap: 3px; align-content: center; justify-content: center; }
.sector-red { top: 5%; left: 5%; }
.sector-blue { top: 5%; right: 5%; }
.sector-yellow { right: 5%; bottom: 5%; }
.sector-green { bottom: 5%; left: 5%; }
.board-stone {
  position: relative;
  width: clamp(40px, 6.2vh, 68px);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 5px;
  padding: 0;
  background-position: center;
  background-size: cover;
  color: inherit;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 15px var(--stone-glow);
  cursor: zoom-in;
}
.board-stone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.board-stone.entering { animation: stone-arrive 420ms cubic-bezier(.2,.9,.2,1) both; }
.board-stone.cancellation-change { animation: cancellation-change 380ms ease-out; }
.board-stone.cancelled { filter: grayscale(.9) brightness(.25); transform: scale(.87); }
.board-stone.cancelled::before,
.board-stone.cancelled::after { position: absolute; top: 48%; left: 5%; width: 90%; height: 2px; background: #fff; box-shadow: 0 0 6px #000; content: ""; transform: rotate(45deg); }
.board-stone.cancelled::after { transform: rotate(-45deg); }
.board-stone.protected { border-color: #fff; box-shadow: 0 0 7px #fff, 0 0 23px 6px rgba(245,242,232,.8), 0 8px 20px rgba(0,0,0,.5); }
.board-stone.protected::after { position: absolute; inset: -5px; border: 1px solid #fff; border-radius: 50%; content: ""; box-shadow: 0 0 12px rgba(255,255,255,.9); }
.board-stone.resolution-cancel-hit { z-index: 9; animation: board-cancel-impact 720ms cubic-bezier(.12,.75,.18,1) both; }
.board-stone.resolution-departing { opacity: 0 !important; }
.board-stone.cancelled.resolution-cancel-hit::before,
.board-stone.cancelled.resolution-cancel-hit::after { background: var(--cancel-color, #fff); box-shadow: 0 0 5px #fff, 0 0 18px var(--cancel-color, #fff); animation: board-cancel-slash 620ms cubic-bezier(.12,.75,.18,1) both; }
.board-stone.cancelled.resolution-cancel-hit::after { animation-delay: 70ms; }
.board-stone .power-pip { position: absolute; right: -5px; bottom: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #ece8df; color: #111; font-size: 9px; font-weight: 900; }

@media (min-width: 621px) {
  .board-sector:has(> .board-stone:nth-child(5):last-child) {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: repeat(3, max-content);
    gap: 3px 8px;
    align-content: center;
    justify-content: center;
  }
  .board-sector:has(> .board-stone:nth-child(5):last-child) > .board-stone:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

.arena-core { position: absolute; top: 18%; left: -11%; z-index: 49; width: 21%; min-width: 88px; max-width: 150px; aspect-ratio: 1; border: 1px solid rgba(231,208,155,.4); border-radius: 50%; overflow: hidden; transform: translate(-50%,-50%); box-shadow: 0 0 30px #000; }
.arena-power-overlay { position: fixed; z-index: 48; overflow: hidden; border: 1px solid rgba(231,208,155,.4); border-radius: 50%; background: radial-gradient(circle, rgba(20,16,14,.98), rgba(5,5,7,.98)); box-shadow: 0 0 30px #000; pointer-events: none; }
.arena-power-overlay[hidden] { display: none; }
.stone-3d-overlay-active .arena-core .core-copy { visibility: hidden; }
.board-special { position: absolute; top: 50%; left: 50%; z-index: 6; display: flex; gap: 5px; align-items: center; transform: translate(-50%,-50%); }
.board-special[hidden] { display: none; }
.special-board-stone {
  width: clamp(64px, 10.5vh, 112px);
  aspect-ratio: 1;
  border: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
}
.arena-core img,
.arena-power-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: invert(1) contrast(1.2); animation: spin 35s linear infinite; }
.core-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; text-shadow: 0 2px 8px #000; }
.core-copy span { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); line-height: 1; }
.core-copy small { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.impact-burst { position: absolute; inset: 30%; z-index: 5; border-radius: 50%; pointer-events: none; }
.arena.impact { animation: arena-impact 540ms cubic-bezier(.1,.7,.1,1); }
.arena.impact .impact-burst { animation: impact-burst 600ms ease-out; }
.effect-strip { display: grid; width: min(100%, 960px); grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
.effect-chip { display: flex; min-width: 0; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: rgba(255,255,255,.025); }
.effect-chip.active { border-color: color-mix(in srgb, var(--chip-color), transparent 50%); background: color-mix(in srgb, var(--chip-color), transparent 89%); }
.effect-icon { color: var(--chip-color); font-size: 18px; text-shadow: 0 0 10px var(--chip-color); }
.effect-copy { display: flex; min-width: 0; flex-direction: column; }
.effect-copy span { overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.effect-copy strong { font-family: var(--serif); font-size: 18px; font-weight: 400; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-counterclockwise { to { transform: rotate(-360deg); } }
@keyframes stone-arrive { from { opacity: 0; scale: .6; translate: 0 -12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes cancellation-change { 0% { box-shadow: 0 0 8px 3px #fff, 0 0 32px 15px var(--stone-glow); } 100% { box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 15px var(--stone-glow); } }
@keyframes board-cancel-impact { 0% { filter: none; transform: scale(1); } 18% { filter: brightness(2.5) saturate(1.8); transform: scale(1.18) rotate(-5deg); box-shadow: 0 0 12px 5px #fff, 0 0 48px 22px var(--cancel-color); } 42% { transform: scale(.98) rotate(4deg); } 68% { filter: grayscale(.45) brightness(.72); transform: scale(.9) rotate(-2deg); } 100% { filter: grayscale(.9) brightness(.25); transform: scale(.87); } }
@keyframes board-cancel-slash { 0% { opacity: 0; scale: .12 1; } 24%,82% { opacity: 1; scale: 1.18 1; } 100% { opacity: 1; scale: 1 1; } }
@keyframes arena-impact { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-.8deg); } 45% { transform: translateX(7px) rotate(.6deg); } 70% { transform: translateX(-3px); } }
@keyframes impact-burst { from { background: rgba(255,255,255,.9); box-shadow: 0 0 20px 18px rgba(255,255,255,.5); scale: .3; } to { background: transparent; box-shadow: 0 0 100px 60px transparent; scale: 2; } }
/* Hand and play */
.play-console {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border-top: 1px solid var(--line-bright);
  padding: 12px clamp(18px, 3vw, 52px) 15px;
  background: linear-gradient(180deg, rgba(22,25,35,.96), rgba(11,13,20,.99));
  box-shadow: 0 -20px 55px rgba(0,0,0,.28);
}

.stone-3d-layer { position: fixed; inset: 0; z-index: 47; width: 100vw; height: 100vh; pointer-events: none; }

.console-header { display: grid; grid-template-columns: 1fr 2fr auto; align-items: end; gap: 20px; }
.console-header h2 { margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 27px); font-weight: 400; }
.turn-guidance { margin: 0 0 3px; color: var(--muted); font-size: 11px; text-align: center; }
.turn-guidance.repetition-warning { color: #e9c981; }
.hand-counter { display: flex; gap: 5px; align-items: baseline; }
.hand-counter strong { font-family: var(--serif); font-size: 25px; font-weight: 400; }
.hand-counter span { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.stone-workspace { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr) 145px; gap: clamp(12px, 2vw, 30px); align-items: stretch; margin-top: 10px; }
.shelf-area,
.hand-area { display: grid; min-width: 0; grid-template-rows: auto 1fr; }
.area-label { display: flex; margin-bottom: 6px; align-items: baseline; justify-content: space-between; }
.area-label span { font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.area-label small { color: #707583; font-size: 8px; }
.shelf { display: grid; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.shelf:has(.special-lane) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.shelf-lane { position: relative; display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; align-items: center; justify-items: center; border: 1px solid var(--line); border-radius: 5px; padding: 7px 5px 17px; background: linear-gradient(180deg, color-mix(in srgb, var(--lane-color), transparent 91%), rgba(255,255,255,.018)); overflow: hidden; }
.shelf-lane::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--lane-color); box-shadow: 0 0 11px var(--lane-color); content: ""; opacity: .75; }
.shelf-lane .stone-button { width: min(100%, clamp(40px, 3.35vw, 64px)); min-width: 0; }
.shelf-lane .stone-button:nth-of-type(1) { grid-row: 1; grid-column: 2 / span 2; z-index: 1; }
.shelf-lane .stone-button:nth-of-type(2) { grid-row: 1; grid-column: 4 / span 2; z-index: 2; }
.shelf-lane .stone-button:nth-of-type(3) { grid-row: 2; grid-column: 1 / span 2; z-index: 3; }
.shelf-lane .stone-button:nth-of-type(4) { grid-row: 2; grid-column: 3 / span 2; z-index: 4; }
.shelf-lane .stone-button:nth-of-type(5) { grid-row: 2; grid-column: 5 / span 2; z-index: 5; }
.shelf-lane .stone-button:hover { z-index: 8; }
.shelf.card-layout-animating .shelf-lane { z-index: 9; overflow: visible; }
.lane-name { position: absolute; right: 5px; bottom: 3px; color: var(--lane-color); font-size: 7px; font-weight: 900; letter-spacing: .12em; opacity: .65; text-transform: uppercase; }
.shelf-lane[data-color="black"] .lane-name { color: #f5f2e8; opacity: .65; text-shadow: none; }
.special-lane { background: linear-gradient(180deg, color-mix(in srgb, var(--lane-color), transparent 79%), rgba(255,255,255,.025)); }

.stone-button {
  position: relative;
  width: min(100%, 70px);
  min-width: 34px;
  aspect-ratio: .78;
  border: 1px solid rgba(255,255,255,.43);
  border-radius: 5px;
  padding: 0;
  background-color: #171923;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 9px var(--stone-glow);
  cursor: pointer;
  overflow: hidden;
  transition: translate 150ms ease, scale 150ms ease, filter 150ms ease, border-color 150ms ease;
}
.stone-button.special-stone {
  aspect-ratio: 1;
  border-radius: 50%;
}
.stone-button::after { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.22), transparent 32%, rgba(0,0,0,.25)); content: ""; pointer-events: none; }
.stone-button.live-3d-proxy,
.board-stone.live-3d-proxy { border-color: transparent; background-color: transparent; background-image: none !important; box-shadow: none; overflow: visible; }
.stone-button.live-3d-proxy::after,
.stone-button.live-3d-proxy .stone-number { opacity: 0; }
.stone-3d-overlay-active .stone-button,
.stone-3d-overlay-active .stone-button:hover,
.stone-3d-overlay-active .stone-button:active,
.stone-3d-overlay-active .stone-button:focus,
.stone-3d-overlay-active .stone-button:focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  background-color: transparent;
  background-image: none !important;
  box-shadow: none !important;
}
.stone-3d-overlay-active .stone-button::after,
.stone-3d-overlay-active .stone-button .stone-number { opacity: 0; }
.stone-button.live-3d-proxy:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; }
.stone-button:hover { z-index: 3; border-color: #fff; translate: 0 -7px; scale: 1.05; }
.stone-button:active { translate: 0 -2px; scale: .98; }
.stone-button.card-traveling { pointer-events: none; }
.shelf-lane .stone-button.card-traveling,
.hand .stone-button.card-traveling { z-index: 30; }
.stone-button .stone-number { position: absolute; right: 3px; bottom: 3px; z-index: 2; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: rgba(6,7,10,.8); color: #fff; font-size: 8px; font-weight: 900; }
.empty-lane { color: #555a67; font-family: var(--serif); font-size: 18px; }

.hand { display: flex; min-width: 0; min-height: 0; border: 1px dashed rgba(255,255,255,.18); border-radius: 5px; padding: 7px; gap: 5px; align-items: center; justify-content: center; background: rgba(0,0,0,.18); }
.hand:has(.stone-button) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; justify-items: center; }
.hand .stone-button { width: min(100%, 104px); }
.hand.committing .stone-button { opacity: .12; filter: grayscale(.65); transform: scale(.88); transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease; }
.hand-empty { color: #606471; font-family: var(--serif); font-size: 12px; font-style: italic; text-align: center; }
.turn-actions { display: grid; grid-template-rows: 1fr 1.4fr; gap: 7px; padding-top: 20px; }
.button-attack { display: flex; flex-direction: column; align-items: center; justify-content: center; border-color: rgba(var(--red-rgb),.7); background: linear-gradient(135deg, #9d1420, #da2130); box-shadow: 0 10px 27px rgba(var(--red-rgb),.16); text-transform: uppercase; }
.button-attack span { font-size: 11px; letter-spacing: .08em; }
.button-attack small { margin-top: 3px; opacity: .57; font-size: 8px; }
.button-attack { touch-action: none; user-select: none; }
.button-attack.slingshot-pulling {
  z-index: 2147483645;
  border-color: #ffe8a3;
  box-shadow: 0 0 0 2px rgba(255,232,163,.28), 0 0 30px rgba(229,47,64,.82);
  transform: translate(var(--slingshot-button-x, 0), var(--slingshot-button-y, 0)) !important;
}
.commit-slingshot-guide {
  position: fixed;
  z-index: 2147483644;
  inset: 0;
  pointer-events: none;
}
.commit-slingshot-guide::before {
  position: absolute;
  left: var(--slingshot-anchor-x, 0);
  top: var(--slingshot-anchor-y, 0);
  width: var(--slingshot-pull-length, 0);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(227,181,120,.68));
  box-shadow: 0 0 10px rgba(255,232,163,.8);
  content: "";
  opacity: calc(.35 + var(--slingshot-power, 0) * .65);
  transform: rotate(var(--slingshot-pull-angle, 0deg));
  transform-origin: 0 50%;
}
.commit-slingshot-guide::after {
  position: absolute;
  left: var(--slingshot-target-x, 50vw);
  top: var(--slingshot-target-y, 35vh);
  width: calc(34px + var(--slingshot-power, 0) * 30px);
  height: calc(34px + var(--slingshot-power, 0) * 30px);
  border: 3px solid rgba(255,238,177,.96);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,44,58,.35) 0 18%, transparent 21%);
  box-shadow: 0 0 0 1px rgba(113,8,30,.9), 0 0 22px rgba(255,220,125,.9);
  content: "";
  transform: translate(-50%,-50%);
}
kbd { margin-left: 5px; border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; color: #737784; font-family: inherit; font-size: 8px; }

/* Panels and overlays */
.resolution-vfx { position: fixed; inset: 0; z-index: 49; overflow: hidden; pointer-events: none; }
.resolution-stone {
  position: fixed;
  width: clamp(27px, 3vw, 38px);
  aspect-ratio: .46;
  border: 2px solid var(--resolution-color);
  border-radius: 0;
  background-position: center;
  background-size: cover;
  clip-path: polygon(50% 0, 88% 15%, 100% 35%, 100% 79%, 72% 100%, 28% 100%, 0 79%, 0 35%, 12% 15%);
  box-shadow: 0 12px 28px rgba(0,0,0,.65), 0 0 19px var(--resolution-color), 0 0 45px color-mix(in srgb, var(--resolution-color), transparent 48%);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.55) rotate(var(--start-rotation));
  animation-name: resolution-card-flight;
  animation-timing-function: cubic-bezier(.18,.72,.16,1);
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}
.resolution-stone::before { position: absolute; inset: 6%; border: 1px solid var(--resolution-color); content: ""; opacity: .38; }
.resolution-stone::after { position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.22), transparent 26%, rgba(0,0,0,.34)); content: ""; }
.resolution-stone.damage { filter: saturate(1.18) brightness(.98) contrast(1.08); }
.resolution-stone.restore { filter: saturate(1.12) brightness(1.05) contrast(1.08); }
.resolution-stone.plunder { box-shadow: 0 12px 28px rgba(0,0,0,.65), 0 0 22px var(--yellow), 0 0 52px rgba(var(--yellow-rgb),.45); }
.resolution-stone.recycle { box-shadow: 0 12px 28px rgba(0,0,0,.65), 0 0 22px var(--green), 0 0 52px rgba(var(--green-rgb),.45); }
.resolution-stone.resolution-private { background-color: #dce6f1; }
.resolution-stone.cancellation { z-index: 3; border-width: 3px; box-shadow: 0 12px 30px rgba(0,0,0,.72), 0 0 24px var(--resolution-color), 0 0 70px var(--resolution-color); animation-name: resolution-cancellation-flight; animation-timing-function: cubic-bezier(.16,.78,.12,1); }
.resolution-stone.settle { z-index: 4; animation-name: resolution-settle-flight; animation-timing-function: cubic-bezier(.16,.76,.14,1); }
.board-stone.resolution-awaiting-settle { opacity: 0; animation: none; transform: scale(.58); }
.board-stone.resolution-settle-arrive { animation: resolution-board-settle 440ms cubic-bezier(.12,.82,.16,1) both; }
.board-stone.resolution-consumed { animation: resolution-stone-consumed 620ms cubic-bezier(.18,.72,.16,1) both; }

.resolution-cancel-burst {
  position: fixed;
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  border: 2px solid var(--resolution-color);
  border-radius: 50%;
  color: var(--resolution-color);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.2) rotate(-18deg);
  animation: resolution-cancel-burst 760ms cubic-bezier(.1,.8,.12,1) both;
  filter: drop-shadow(0 0 12px var(--resolution-color));
}
.resolution-cancel-burst::before,
.resolution-cancel-burst::after { position: absolute; width: 112%; height: 4px; border-radius: 4px; background: #fff; box-shadow: 0 0 7px #fff, 0 0 18px var(--resolution-color); content: ""; transform: rotate(45deg); }
.resolution-cancel-burst::after { transform: rotate(-45deg); }
.resolution-cancel-burst span { position: absolute; inset: 9px; border: 1px dashed currentColor; border-radius: 50%; }
.resolution-cancel-burst strong { z-index: 1; border: 1px solid currentColor; border-radius: 3px; padding: 3px 6px; background: rgba(6,8,12,.86); color: #fff; font-size: 8px; font-weight: 950; letter-spacing: .13em; text-shadow: 0 0 7px var(--resolution-color); }
.resolution-cancel-tracer {
  position: fixed;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--resolution-color);
  box-shadow: 0 0 8px #fff, 0 0 24px 8px var(--resolution-color);
  opacity: 0;
  transform: translate(-50%,-50%);
  animation: resolution-cancel-tracer cubic-bezier(.16,.78,.12,1) both;
  will-change: transform, opacity, filter;
}

.resolution-callout {
  position: fixed;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 9px;
  min-width: 150px;
  border: 1px solid color-mix(in srgb, var(--resolution-color), white 14%);
  border-radius: 6px;
  padding: 9px 13px;
  background: linear-gradient(145deg, rgba(23,26,37,.96), rgba(7,9,14,.96));
  box-shadow: 0 14px 42px rgba(0,0,0,.55), 0 0 28px color-mix(in srgb, var(--resolution-color), transparent 45%);
  color: var(--resolution-color);
  opacity: 0;
  transform: translate(-50%,-115%) scale(.76);
  animation: resolution-callout 1180ms cubic-bezier(.18,.76,.18,1) both;
  text-align: left;
}
.resolution-callout > span { grid-row: 1 / 3; font-size: 25px; text-shadow: 0 0 15px currentColor; }
.resolution-callout strong { color: var(--text); font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: .02em; white-space: nowrap; }
.resolution-callout small { font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.resolution-callout.cancelled { --resolution-color: var(--accent); }
.resolution-callout.cancellation { border-width: 2px; }

.resolution-delta {
  position: fixed;
  color: var(--resolution-color);
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 3px 8px #000, 0 0 12px var(--resolution-color), 0 0 34px var(--resolution-color);
  transform: translate(-50%,-50%) scale(.35);
  animation: resolution-delta 900ms cubic-bezier(.12,.75,.18,1) both;
}
.resolution-delta.plunder,
.resolution-delta.recycle { font-size: clamp(31px, 4vw, 52px); }

.player-card.resolution-damage { animation: resolution-player-damage 700ms ease-out; }
.player-card.resolution-restore { animation: resolution-player-restore 700ms ease-out; }
.player-card.resolution-plunder { animation: resolution-player-plunder 700ms ease-out; }
.player-card.resolution-recycle { animation: resolution-player-recycle 700ms ease-out; }
.resource.resource-impact { position: relative; z-index: 2; animation: resolution-resource-impact 700ms ease-out; }

@keyframes resolution-card-flight {
  0% { opacity: 0; transform: translate(-50%,-50%) translate(0,0) scale(.52) rotate(var(--start-rotation)); }
  10% { opacity: 1; }
  54% { opacity: 1; transform: translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1.18) rotate(0deg); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(.52) rotate(var(--end-rotation)); filter: brightness(1.65); }
}
@keyframes resolution-cancellation-flight {
  0% { opacity: 0; transform: translate(-50%,-50%) translate(0,0) scale(.48) rotate(var(--start-rotation)); filter: brightness(.75); }
  9% { opacity: 1; }
  48% { opacity: 1; transform: translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1.25) rotate(0deg); filter: brightness(1.35) saturate(1.4); }
  82% { opacity: 1; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(.92) rotate(var(--end-rotation)); filter: brightness(2.3) saturate(1.8); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(1.8) rotate(var(--end-rotation)); filter: brightness(3) blur(3px); }
}
@keyframes resolution-cancel-tracer {
  0% { opacity: 0; transform: translate(-50%,-50%) translate(0,0) scale(.45); }
  10% { opacity: 1; }
  48% { opacity: 1; transform: translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1.35); }
  82% { opacity: 1; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(.9); filter: brightness(2); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(2.2); filter: brightness(3) blur(3px); }
}
@keyframes resolution-settle-flight {
  0% { opacity: .08; transform: translate(-50%,-50%) translate(0,0) scale(.5) rotate(var(--start-rotation)); filter: brightness(.85); }
  12% { opacity: 1; }
  55% { opacity: 1; transform: translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1.12) rotate(0); filter: brightness(1.18) saturate(1.25); }
  84% { opacity: 1; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(.82) rotate(var(--end-rotation)); filter: brightness(1.8); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(.72) rotate(0); filter: brightness(2.2); }
}
@keyframes resolution-board-settle { 0% { opacity: 0; filter: brightness(2); transform: scale(.62); } 55% { opacity: 1; filter: brightness(1.45); transform: scale(1.16); } 100% { opacity: 1; filter: none; transform: scale(1); } }
@keyframes resolution-stone-consumed { 0% { opacity: 1; filter: brightness(1); transform: scale(1); } 45% { opacity: 1; filter: brightness(2.6) saturate(.35); transform: scale(1.18) rotate(8deg); } 100% { opacity: 0; filter: brightness(4) blur(5px); transform: scale(.18) rotate(-20deg); } }
@keyframes resolution-cancel-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.18) rotate(-20deg); } 17% { opacity: 1; transform: translate(-50%,-50%) scale(1.18) rotate(3deg); } 58% { opacity: .95; transform: translate(-50%,-50%) scale(.92) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(8deg); filter: drop-shadow(0 0 30px var(--resolution-color)); } }
@keyframes resolution-callout {
  0% { opacity: 0; transform: translate(-50%,-92%) scale(.72); }
  13%,72% { opacity: 1; transform: translate(-50%,-122%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-145%) scale(.92); }
}
@keyframes resolution-delta {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.22); }
  65% { opacity: 1; transform: translate(-50%,-72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-120%) scale(.82); }
}
@keyframes resolution-player-damage { 0%,100% { border-color: var(--line); filter: none; } 22% { border-color: var(--red); box-shadow: 0 0 0 2px rgba(var(--red-rgb),.35), 0 0 65px rgba(var(--red-rgb),.55); filter: brightness(1.35) saturate(1.4); transform: translateX(-7px); } 42% { transform: translateX(6px); } 62% { transform: translateX(-3px); } }
@keyframes resolution-player-restore { 0%,100% { filter: none; } 35% { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(var(--blue-rgb),.3), 0 0 70px rgba(var(--blue-rgb),.55); filter: brightness(1.28); } }
@keyframes resolution-player-plunder { 0%,100% { filter: none; } 35% { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(var(--yellow-rgb),.28), 0 0 65px rgba(var(--yellow-rgb),.48); filter: brightness(1.22); } }
@keyframes resolution-player-recycle { 0%,100% { filter: none; } 35% { border-color: var(--green); box-shadow: 0 0 0 2px rgba(var(--green-rgb),.28), 0 0 70px rgba(var(--green-rgb),.52); filter: brightness(1.25); } }
@keyframes resolution-resource-impact { 0%,100% { color: inherit; transform: scale(1); } 32% { color: var(--resolution-color, var(--accent)); text-shadow: 0 0 18px currentColor; transform: scale(1.22); } }
@keyframes resolution-hand-launch { 0%,100% { color: inherit; transform: scale(1); } 30% { color: var(--accent); text-shadow: 0 0 18px currentColor; transform: scale(1.18); } }
@keyframes resolution-reduced-pop { 0%,100% { opacity: 0; } 12%,80% { opacity: 1; } }

.tutorial-coach {
  position: fixed;
  top: 68px;
  left: 50%;
  z-index: 45;
  width: min(510px, calc(100vw - 40px));
  border: 1px solid rgba(231, 208, 155, .55);
  border-radius: 7px;
  padding: 15px 18px 16px;
  background: linear-gradient(145deg, rgba(31,35,48,.98), rgba(10,12,18,.98));
  box-shadow: 0 20px 70px rgba(0,0,0,.6), 0 0 24px rgba(231,208,155,.08);
  transform: translateX(-50%);
}

.tutorial-coach::after {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(231, 208, 155, .55);
  border-bottom: 1px solid rgba(231, 208, 155, .55);
  background: #11141d;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.tutorial-progress { display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.tutorial-progress button { border: 0; padding: 3px 0; background: transparent; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tutorial-progress button:hover { color: var(--text); }
.tutorial-coach h2 { margin: 6px 0 4px; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.tutorial-coach p { margin: 0; color: #b4b6be; font-family: var(--serif); font-size: 12px; line-height: 1.45; }
.tutorial-coach > .button { min-width: 135px; margin-top: 12px; padding: 9px 13px; font-size: 10px; text-transform: uppercase; }

.tutorial-focus {
  position: relative !important;
  z-index: 35 !important;
  outline: 2px solid var(--accent) !important;
  outline-offset: 5px;
  box-shadow: 0 0 0 7px rgba(231,208,155,.08), 0 0 35px rgba(231,208,155,.34) !important;
  animation: tutorial-pulse 1.6s ease-in-out infinite;
}
.tutorial-focus[data-tutorial-indicator]::after { position: absolute; top: -22px; left: 50%; z-index: 2; padding: 3px 5px; border-radius: 2px; background: var(--accent); box-shadow: 0 3px 10px rgba(0,0,0,.42); color: #17130d; content: attr(data-tutorial-indicator); font-size: 6px; font-weight: 900; letter-spacing: .08em; line-height: 1; pointer-events: none; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }

@keyframes tutorial-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

.log-toggle { position: fixed; right: 20px; bottom: calc(var(--play-console-height) + 12px); z-index: 12; border: 1px solid var(--line); border-radius: 20px; padding: 7px 11px; background: rgba(8,10,16,.86); color: var(--muted); font-size: 9px; font-weight: 750; cursor: pointer; backdrop-filter: blur(8px); }
.live-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.battle-log { position: fixed; right: 18px; bottom: calc(var(--play-console-height) + 46px); z-index: 20; width: 340px; max-height: 300px; border: 1px solid var(--line-bright); border-radius: 6px; background: rgba(14,17,25,.97); box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(20px); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 12px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.panel-heading button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.battle-log ol { max-height: 248px; margin: 0; padding: 8px 14px 12px 31px; overflow: auto; }
.battle-log li { border-bottom: 1px solid rgba(255,255,255,.055); padding: 8px 3px; color: #a9abb3; font-size: 10px; line-height: 1.45; }
.battle-log li::marker { color: #555a67; }
.battle-log li.impact { color: #e78e8e; }
.battle-log li.win { color: var(--accent); }

.modal { 
  width: min(820px, 86vw);
  max-height: 88vh;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(145deg, #191d29, #0c0e15 68%);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: auto;
}
.modal::backdrop { background: rgba(2,3,6,.82); backdrop-filter: blur(9px); }
.modal-close { position: absolute; top: 15px; right: 17px; border: 0; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.overlay-music-control { position: absolute; z-index: 2; top: 14px; right: 54px; }
.modal h2 { margin: 0; font-family: var(--serif); font-size: clamp(29px, 4vw, 46px); font-weight: 400; }
.modal-intro { max-width: 650px; color: #b2b4bc; font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.arena-card-modal { width: min(660px, calc(100vw - 30px)); }
.arena-card-detail-layout { display: grid; grid-template-columns: minmax(130px, 180px) 1fr; gap: clamp(22px, 5vw, 42px); align-items: center; margin-top: 24px; }
.arena-card-image { position: relative; width: min(100%, 210px); aspect-ratio: .82; margin: 0 auto; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(231,208,155,.13), rgba(7,8,12,0) 68%); box-shadow: none; overflow: hidden; }
.arena-stone-preview { display: block; width: 100%; height: 100%; }
.arena-stone-preview[hidden] { display: none; }
.campaign-preview-art-number { position: absolute; bottom: 8px; left: 8px; z-index: 3; display: grid; min-width: 25px; height: 25px; padding: 0 5px; place-items: center; border-radius: 50%; background: rgba(5,6,10,.84); color: #fff; font-size: 11px; font-weight: 900; }
.arena-card-details { display: grid; gap: 0; margin: 0; }
.arena-card-details > div { display: grid; grid-template-columns: minmax(105px, .8fr) 1.2fr; gap: 14px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.arena-card-details dt { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.arena-card-details dd { margin: 0; color: var(--text); font-family: var(--serif); font-size: 16px; }
.rules-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 23px; }
.rule-card { display: flex; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 5px; padding: 12px; background: rgba(255,255,255,.025); }
.rule-gem { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 18px; box-shadow: 0 0 17px currentColor; }
.rule-card.red { color: var(--red); }.rule-card.blue { color: var(--blue); }.rule-card.yellow { color: var(--yellow); }.rule-card.green { color: var(--green); }.rule-card.black { color: #adb6c6; }.rule-card.white { color: #fff; }
.rule-card strong { color: var(--text); font-size: 11px; letter-spacing: .04em; }
.rule-card strong em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.rule-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.cancel-ring { display: flex; margin: 20px 0; align-items: center; justify-content: center; gap: 9px; color: #666b78; font-size: 10px; }
.cancel { border-bottom: 2px solid currentColor; padding: 4px 5px; font-weight: 800; text-transform: uppercase; }
.cancel.red { color: var(--red); }.cancel.blue { color: var(--blue); }.cancel.yellow { color: var(--yellow); }.cancel.green { color: var(--green); }
.composite-rule { margin: 0 0 20px; border: 1px solid rgba(var(--yellow-rgb),.32); border-radius: 5px; padding: 13px 15px; background: rgba(var(--yellow-rgb),.055); }
.composite-rule strong { color: var(--accent); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.composite-rule p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.rule-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rule-steps li { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.rule-steps span { color: var(--accent); font-family: var(--serif); font-size: 19px; }
.rule-steps p { margin: 0; color: #a9abb3; font-size: 10px; line-height: 1.45; }
.power-note { margin: 20px 0 0; border-left: 2px solid var(--accent); padding-left: 12px; color: var(--muted); font-size: 10px; }

.handoff,
.result-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4,5,9,.94); backdrop-filter: blur(22px); }
.handoff-card,
.result-card { position: relative; width: min(470px, 80vw); border: 1px solid var(--line-bright); border-radius: 8px; padding: 48px; background: linear-gradient(145deg, rgba(30,34,48,.96), rgba(11,13,20,.98)); box-shadow: var(--shadow); text-align: center; }
.handoff-card::before,
.result-card::before { position: absolute; top: 0; left: 50%; width: 90px; height: 2px; background: var(--accent); box-shadow: 0 0 18px var(--accent); content: ""; transform: translateX(-50%); }
.handoff-card h2,
.result-card h2 { margin: 5px 0 8px; font-family: var(--serif); font-size: 45px; font-weight: 400; }
.handoff-card p:not(.eyebrow),
.result-card p:not(.eyebrow) { color: var(--muted); font-family: var(--serif); }
.handoff-card .button { margin-top: 18px; min-width: 180px; }
.result-screen { background: radial-gradient(circle, rgba(77,63,35,.25), rgba(4,5,9,.96) 55%); }
.result-screen.stalemate { background: radial-gradient(circle, rgba(61,78,91,.22), rgba(4,5,9,.97) 58%); }
.result-screen.campaign-failed { background: radial-gradient(circle, rgba(112,24,32,.25), rgba(4,5,9,.97) 58%); }
.result-screen.campaign-failed .result-card::before { background: var(--red); box-shadow: 0 0 20px var(--red); }
.result-screen.campaign-complete { background: radial-gradient(circle, rgba(19,126,73,.2), rgba(77,63,35,.18), rgba(4,5,9,.96) 62%); }
.result-screen.campaign-complete .result-card::before { width: 170px; background: linear-gradient(90deg, var(--red), var(--blue), var(--yellow), var(--green)); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 25px; }
.result-community-link { grid-column: 1 / -1; }
.result-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -5%; width: 8px; height: 18px; background: var(--confetti); animation: confetti-fall var(--time) linear var(--delay) infinite; }
@keyframes confetti-fall { to { translate: var(--drift) 110vh; rotate: 680deg; } }

.toast-region { position: fixed; top: 70px; left: 50%; z-index: 80; display: flex; flex-direction: column; gap: 7px; align-items: center; transform: translateX(-50%); pointer-events: none; }
.toast { border: 1px solid var(--line-bright); border-radius: 4px; padding: 9px 14px; background: rgba(13,15,22,.92); box-shadow: 0 12px 35px rgba(0,0,0,.35); color: #d8d8dc; font-size: 10px; animation: toast-life 2.5s ease both; backdrop-filter: blur(12px); }
.toast.warning { border-color: rgba(var(--yellow-rgb),.55); }
@keyframes toast-life { 0% { opacity: 0; translate: 0 -10px; } 10%,80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -7px; } }

.campaign-overlay { position: fixed; inset: 0; z-index: 52; display: grid; place-items: center; padding: 22px; background: rgba(4,5,9,.94); backdrop-filter: blur(22px); }
.campaign-overlay[hidden] { display: none; }
.campaign-overlay-card { position: relative; width: min(840px, 94vw); border: 1px solid var(--line-bright); border-radius: 8px; padding: clamp(25px, 5vw, 48px); background: linear-gradient(145deg, rgba(30,34,48,.98), rgba(11,13,20,.99)); box-shadow: var(--shadow); text-align: center; }
.campaign-overlay-card h2 { margin: 4px 0 9px; font-family: var(--serif); font-size: clamp(32px, 5vw, 50px); font-weight: 400; }
.campaign-run-summary { max-width: 650px; margin: 0 auto 23px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.campaign-map-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; text-align: left; }
.campaign-node { display: grid; min-height: 142px; border: 1px solid var(--line); border-radius: 6px; padding: 17px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; cursor: pointer; transition: translate 150ms ease, border-color 150ms ease, background 150ms ease; }
.campaign-node:hover:not(:disabled) { border-color: var(--accent); background: rgba(231,208,155,.08); translate: 0 -3px; }
.campaign-node:disabled { cursor: not-allowed; opacity: .42; }
.campaign-node-type { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.campaign-node strong { margin: 7px 0 4px; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.campaign-node span:not(.campaign-node-type), .campaign-node small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.campaign-node small { display: block; color: #e9c981; }
.campaign-node .campaign-objective { margin-top: 8px; border-left: 2px solid var(--accent); padding-left: 8px; color: #c9c3ad; }
.campaign-node.elite { border-color: rgba(214,99,195,.52); }.campaign-node.boss { border-color: rgba(231,208,155,.75); }.campaign-node.merchant { border-color: rgba(227,181,120,.56); }.campaign-node.rest { border-color: rgba(44,159,174,.55); }
.reward-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }.reward-options .campaign-node { min-height: 175px; }
#campaign-merchant .campaign-overlay-card { width: min(1280px, 97vw); max-height: 95vh; overflow: auto; }
.campaign-market-layout { display: grid; grid-template-columns: 1fr; gap: 24px; text-align: left; }
.campaign-market-layout > section { min-width: 0; }
.campaign-section-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.campaign-section-heading .eyebrow { margin: 0; }
.campaign-view-deck { min-width: 116px; padding: 8px 13px; font-size: 9px; }
.campaign-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); gap: 12px; align-items: stretch; }
.merchant-options { grid-template-columns: repeat(4, minmax(150px, 180px)); }
.campaign-deck-grid { max-height: 390px; padding: 2px 6px 2px 2px; overflow: auto; }
.campaign-store-card { position: relative; display: grid; grid-template-rows: auto minmax(48px, auto) auto auto 1fr; align-content: start; min-height: 330px; border: 1px solid var(--line); border-radius: 7px; padding: 14px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; cursor: pointer; }
.campaign-store-card.has-card-preview { gap: 0; }
.campaign-store-card-preview { position: relative; width: min(62%, 94px); aspect-ratio: .46; margin: 10px auto 7px; border: 1px solid rgba(255,255,255,.45); border-radius: 0; background-position: center; background-size: cover; box-shadow: 0 9px 24px rgba(0,0,0,.4), 0 0 12px var(--stone-glow); clip-path: polygon(50% 0, 86% 15%, 100% 32%, 100% 77%, 77% 100%, 23% 100%, 0 77%, 0 32%, 14% 15%); }
.campaign-store-card-preview .campaign-card-pips { position: absolute; right: 5px; bottom: 5px; z-index: 3; margin: 0; padding: 4px; border-radius: 10px; background: rgba(5,6,10,.78); }
.campaign-store-card-preview .campaign-card-pips i { width: 7px; height: 7px; }
.campaign-store-card:hover, .campaign-store-card.selected { border-color: var(--accent); background: rgba(var(--yellow-rgb),.07); }
.campaign-store-card.selected { box-shadow: inset 0 0 0 1px rgba(var(--yellow-rgb),.3); }
.campaign-store-card strong { margin: 8px 0 0; font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.2; }
.campaign-card-art-label { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.campaign-store-description { align-self: start; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.campaign-card-pips { display: flex; gap: 3px; align-items: center; margin: 3px 0 5px; }
.campaign-card-pips i { display: block; width: 10px; height: 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: var(--pip-color); box-shadow: 0 0 7px var(--pip-color); }
.stone-button .campaign-card-pips, .board-stone .campaign-card-pips { position: absolute; right: 4px; bottom: 4px; z-index: 3; padding: 3px; border-radius: 10px; background: rgba(5,6,10,.76); }
.stone-button .campaign-card-pips i, .board-stone .campaign-card-pips i { width: 7px; height: 7px; }
.stone-button.composite-card { border-color: rgba(231,208,155,.8); box-shadow: 0 0 18px rgba(231,208,155,.2); }
.stone-button.live-3d-proxy,
.stone-button.live-3d-proxy:hover,
.stone-button.live-3d-proxy:focus-visible,
.stone-button.live-3d-proxy.composite-card,
.board-stone.live-3d-proxy,
.board-stone.live-3d-proxy:focus-visible { border-color: transparent !important; outline: 0; box-shadow: none !important; }
.campaign-market-selection { margin: 18px 0 10px; border-top: 1px solid var(--line); padding-top: 13px; color: var(--muted); font-size: 10px; }
.campaign-store-empty { color: var(--muted); font-size: 10px; }
#campaign-merchant-confirm, #campaign-merchant-leave { margin: 4px; }
.campaign-deck-dialog { width: min(1180px, calc(100vw - 32px)); max-height: 92vh; overflow: hidden; }
.campaign-deck-dialog h2 { margin-bottom: 12px; }
.campaign-deck-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; margin: 8px 0 10px; }
.campaign-deck-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.campaign-deck-controls select { min-width: 132px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: #11141d; color: var(--text); font: inherit; }
.campaign-deck-controls .campaign-deck-checkbox { display: flex; gap: 7px; align-items: center; min-height: 34px; text-transform: none; }
.campaign-deck-checkbox input { accent-color: var(--accent); }
.campaign-deck-count { max-width: none; margin: 0 0 12px; text-align: left; }
.campaign-deck-view-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); max-height: 60vh; padding: 2px 8px 8px 2px; overflow: auto; }
.campaign-deck-view-card { min-height: 320px; cursor: default; }
.campaign-deck-view-card:hover { border-color: var(--line); background: rgba(255,255,255,.025); }

/* Compact desktop layouts */
@media (max-height: 760px) {
  .game-screen { grid-template-rows: 50px minmax(0, 1fr) auto; }
  .game-screen.play-console-retracted { grid-template-rows: 50px minmax(0, 1fr); }
  .game-layout { padding-top: 8px; }
  .player-card { min-height: 185px; padding: 15px; }
  .health-label { margin-top: 14px; }
  .player-resources { margin-top: 13px; }
  .arena-heading .eyebrow { display: none; }
  .arena { width: min(max(190px, calc(100cqh - 108px)), 82cqw, 560px); }
  .play-console { padding-top: 8px; padding-bottom: 10px; }
  .stone-workspace { margin-top: 7px; }
  .area-label { margin-bottom: 4px; }
  .log-toggle { bottom: calc(var(--play-console-height) + 8px); }
  .title-mark { margin-bottom: 12px; }
  .title-copy { margin: 17px 0 21px; }
}

@media (max-width: 1120px) {
  .game-layout { grid-template-columns: 170px minmax(430px, 1fr) 170px; gap: 13px; padding-inline: 18px; }
  .player-card { padding: 14px; }
  .stone-workspace { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr) 125px; gap: 12px; }
  .play-console { padding-inline: 18px; }
  .area-label small { display: none; }
  .effect-copy span { font-size: 6px; }
  .arena-core { top: 15%; left: -8%; width: 19%; min-width: 72px; max-width: 110px; }
}

@media (max-width: 940px) {
  .custom-game-settings { grid-template-columns: 1fr; }
  .custom-game-settings > p { grid-column: 1; }
  .deck-builders.campaign { grid-template-columns: 1fr; }
  .campaign-roster-head { grid-template-columns: 1fr; }
  .campaign-roster-head > p:last-child { max-width: none; }
  .online-layout { grid-template-columns: 1fr; }
  .campaign-map-options, .reward-options, .merchant-options { grid-template-columns: 1fr 1fr; }
  .campaign-market-layout { grid-template-columns: 1fr; }
  .shelf:has(.special-lane) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .deck-topbar { gap: 8px; padding-inline: 12px; }
  .deck-topbar-actions { gap: 7px; }
  .deck-mode-label { display: none; }
  .campaign-map-options, .reward-options, .merchant-options { grid-template-columns: 1fr; }
  .campaign-starter-grid, .campaign-store-grid, .campaign-deck-grid { grid-template-columns: 1fr; }
  .campaign-overlay { padding: 12px; overflow: auto; }
  .campaign-overlay-card { margin: auto 0; padding: 25px 19px; }
  .shelf:has(.special-lane) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone layout: release the desktop canvas and turn every game screen into a
   touch-friendly vertical flow. Desktop sizing above remains unchanged. */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
  }

  .app-shell {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 100dvh;
  }

  .screen {
    width: 100%;
    height: auto;
    min-height: 100dvh;
  }

  .button { min-height: 46px; }
  .button:hover:not(:disabled) { transform: none; }

  .title-screen {
    display: block;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .title-content {
    width: 100%;
    min-height: 100dvh;
    margin: 0 auto;
    justify-content: center;
    padding: max(80px, calc(env(safe-area-inset-top) + 62px)) 18px max(34px, calc(env(safe-area-inset-bottom) + 22px));
  }

  .title-content > .eyebrow {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: .18em;
  }

  .title-content h1 {
    max-width: 100%;
    font-size: clamp(45px, 15vw, 68px);
    letter-spacing: .035em;
    line-height: .86;
    white-space: nowrap;
  }

  .title-copy {
    max-width: 430px;
    margin: 17px 0 20px;
    font-size: 15px;
    line-height: 1.42;
  }

  .title-actions {
    width: min(100%, 430px);
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .title-actions .button-large {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 13px 17px;
  }

  .title-practice-difficulty {
    width: 100%;
    margin: -1px auto 1px;
  }

  .title-practice-difficulty select { min-height: 48px; }

  .ai-vs-ai-content { width: min(100%, 520px); padding-inline: 18px; }
  .ai-vs-ai-intro { display: block; }
  .ai-vs-ai-intro h1 { margin-bottom: 14px; }
  .ai-vs-ai-pickers { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
  .ai-picker { min-height: 0; padding: 20px; }
  .ai-versus { width: 44px; height: 44px; }
  .ai-format-picker { grid-template-columns: minmax(0, 1fr); }
  .ai-format-option { min-height: 84px; }
  .ai-vs-ai-footer { align-items: stretch; flex-direction: column; }
  .ai-vs-ai-footer .button { width: 100%; min-width: 0; }
  .ai-series-stop { top: calc(env(safe-area-inset-top) + 62px); right: 10px; }

  .title-footnote {
    max-width: 410px;
    margin-top: 18px;
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: .09em;
  }

  .language-select {
    width: auto;
    max-width: none;
    min-height: 34px;
    padding-inline: 8px;
  }

  .language-selected-name { display: none; }

  .language-options { min-width: 195px; max-height: calc(100vh - 66px); }

  .music-controls {
    position: fixed;
    top: max(58px, calc(env(safe-area-inset-top) + 48px));
    right: 12px;
    width: min(240px, calc(100vw - 24px));
  }

  .title-rain { opacity: .18; pointer-events: none; }
  .rain-stone { pointer-events: none; }

  .deck-screen {
    min-height: 100dvh;
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .deck-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: calc(56px + env(safe-area-inset-top));
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: env(safe-area-inset-top) 12px 0;
  }

  .deck-topbar.title-topbar {
    position: absolute;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .title-topbar .brand-small { font-size: clamp(17px, 5.5vw, 22px); }

  .deck-topbar .brand-small {
    min-width: 0;
    justify-self: start;
    font-size: clamp(16px, 5.4vw, 21px);
  }

  .deck-topbar-actions { gap: 6px; }
  .deck-mode-label { display: none; }

  .deck-content {
    width: 100%;
    margin: 0;
    padding: 28px 16px max(38px, calc(env(safe-area-inset-bottom) + 26px));
  }

  .deck-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .deck-intro .eyebrow { grid-column: 1; }
  .deck-intro h1 { font-size: clamp(39px, 13vw, 55px); }
  .deck-intro > p:last-child { margin-top: 5px; font-size: 14px; line-height: 1.5; }

  .custom-game-settings {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin-top: 20px;
    padding: 15px;
  }

  .custom-game-settings > p { grid-column: 1; }
  .online-settings-grid { grid-template-columns: minmax(0, 1fr); }

  .deck-builders,
  .deck-builders.campaign,
  .deck-builders.hotseat-private {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .deck-builder,
  .campaign-roster,
  .online-connect-card { padding: 18px 15px; }

  .deck-builder-head {
    align-items: start;
    gap: 10px;
  }

  .deck-builder-head h2,
  .hotseat-name-field input { font-size: 24px; }

  .hotseat-name-field { width: 100%; }
  .deck-total strong { font-size: 24px; }

  .deck-color-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }

  .deck-color-name,
  .deck-color-copy { min-width: 0; }

  .deck-stepper { grid-template-columns: 38px 34px 38px; }
  .deck-stepper button { width: 38px; height: 38px; }
  .deck-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck-presets button { min-height: 42px; }

  .campaign-roster-head { grid-template-columns: minmax(0, 1fr); }
  .campaign-roster-head > p:last-child { max-width: none; }
  .campaign-roster ol { grid-template-columns: minmax(0, 1fr); }

  .deck-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
  }

  .deck-footer .button { width: 100%; min-width: 0; }
  .deck-start-wrap { width: 100%; min-width: 0; }
  .deck-footer .deck-loadout-hint { max-width: none; }

  .online-layout,
  .online-setup-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 24px;
  }

  .online-lobby-copy {
    min-height: 0;
    align-content: start;
    padding: 25px 18px;
  }

  .online-lobby-copy h2 { font-size: clamp(31px, 10vw, 42px); }
  .online-lobby-copy > p:not(.eyebrow) { margin-top: 15px; font-size: 14px; }
  .online-account { align-items: stretch; flex-direction: column; }
  .online-account .button { width: 100%; }

  .game-screen,
  .game-screen.opponent-turn {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: calc(56px + env(safe-area-inset-top));
    grid-template-columns: 40px minmax(58px, 1fr) auto;
    gap: 6px;
    padding: env(safe-area-inset-top) 10px 0;
  }

  .brand-cluster { display: none; }
  .turn-readout { justify-self: center; }
  .turn-label { display: none; }
  .turn-readout strong { font-size: 18px; }
  .turn-timer { min-width: 0; padding-left: 8px; font-size: 13px; }
  .topbar-actions { gap: 3px; }
  .icon-button { width: 36px; height: 36px; }

  .game-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
    padding: 8px 10px 7px;
  }

  .arena-column {
    grid-column: 1 / -1;
    grid-row: 1;
    height: auto;
    min-height: 0;
    container-type: normal;
  }

  #player-zero,
  #player-one {
    grid-row: 2;
    min-height: 106px;
    padding: 8px;
  }

  .player-card.current { transform: none; }
  .status-ribbon { display: none; }
  .player-index { font-size: 6px; letter-spacing: .08em; }
  .player-name-row { margin-top: 2px; }
  .player-name-row h3 { font-size: clamp(15px, 4.8vw, 20px); }
  .health-label { margin-top: 4px; font-size: 7px; letter-spacing: .08em; }
  .health-label strong { font-size: 20px; }
  .health-track { height: 3px; margin-top: 2px; }
  .player-resources { grid-template-columns: repeat(var(--resource-count, 4), minmax(0, 1fr)); margin-top: 6px; }
  .resource-quadrant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3px; margin-top: 2px; }
  .resource-quadrant b { font-size: 8px; line-height: .9; }
  .resource { padding-left: 4px; }
  .resource span { font-size: 6px; letter-spacing: .03em; }
  .resource strong { margin-top: 1px; font-size: 14px; }
  .player-reserve-time { margin-top: 5px; padding-top: 4px; }
  .player-reserve-time span,
  .player-reserve-time.no-reserve-time strong { font-size: 6px; }
  .player-reserve-time strong { font-size: 12px; }

  .arena-heading,
  .effect-strip { width: 100%; }

  .arena-stage { width: 100%; }

  .arena-heading { min-height: 22px; align-items: center; }
  .arena-heading .eyebrow { display: none; }
  .arena-heading h2 { font-size: 17px; }
  .board-owner { margin: 0; font-size: 7px; letter-spacing: .06em; }

  .arena {
    width: 100%;
    height: 94px;
    min-width: 0;
    aspect-ratio: auto;
    margin: 3px auto 0;
    border-radius: 9px;
    overflow: hidden;
  }

  .arena::before,
  .arena::after,
  .arena-grid,
  .arena-orbit { display: none; }

  .arena-serpent-spinner {
    top: 50%;
    left: 50%;
    inset: auto;
    width: 132px;
    height: 132px;
    margin: -66px 0 0 -66px;
  }

  .arena-ouroboros {
    opacity: .52;
  }

  .board-sector {
    top: 9px;
    right: auto;
    bottom: auto;
    z-index: 4;
    display: block;
    width: 25%;
    height: 76px;
  }

  .sector-red { left: 0; }
  .sector-blue { left: 25%; }
  .sector-yellow { left: 50%; }
  .sector-green { left: 75%; }

  .board-sector .board-stone {
    position: absolute;
    top: 50%;
    left: calc(50% - 31px);
    width: clamp(38px, 11.8vw, 46px);
    margin-top: -23px;
  }

  .board-sector .board-stone:nth-of-type(1) { z-index: 1; }
  .board-sector .board-stone:nth-of-type(2) { left: calc(50% - 25px); z-index: 2; }
  .board-sector .board-stone:nth-of-type(3) { left: calc(50% - 19px); z-index: 3; }
  .board-sector .board-stone:nth-of-type(4) { left: calc(50% - 13px); z-index: 4; }
  .board-sector .board-stone:nth-of-type(5) { left: calc(50% - 7px); z-index: 5; }
  .board-sector .power-pip { display: none; }

  .board-sector[data-power]:not([data-power=""])::after {
    position: absolute;
    right: calc(50% - 40px);
    bottom: 8px;
    z-index: 20;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    background: #ece8df;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    color: #111;
    content: attr(data-power);
    font-size: 9px;
    font-weight: 900;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.8));
  }

  .empty-sector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .arena-core { top: 50%; left: 50%; z-index: 2; width: 56px; min-width: 0; max-width: none; transform: translate(-50%,-50%); }
  .core-copy span { font-size: 18px; }
  .core-copy small { display: none; }
  .board-special { gap: 0; }
  .special-board-stone { width: 44px; }
  .special-board-stone + .special-board-stone { margin-left: -28px; }
  .effect-strip { display: none; }

  .play-console {
    display: block;
    min-height: 0;
    padding: 9px 10px max(12px, calc(env(safe-area-inset-bottom) + 8px));
  }

  .console-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
  }

  .console-header .eyebrow { display: none; }
  .console-header h2 { font-size: 20px; }

  .turn-guidance { display: none; }

  .hand-counter { grid-column: 2; grid-row: 1; }
  .hand-counter strong { font-size: 20px; }
  .hand-counter span { font-size: 7px; }

  .stone-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 6px;
  }

  .shelf,
  .shelf:has(.special-lane) { gap: 4px; }

  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shelf:has(.special-lane) { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .area-label { margin-bottom: 3px; }
  .area-label span { font-size: 7px; letter-spacing: .11em; }
  .area-label small { display: none; }

  .shelf-lane {
    display: block;
    height: 72px;
    min-height: 72px;
    padding: 0;
  }

  .shelf-lane .stone-button {
    position: absolute;
    top: 6px;
    left: calc(50% - 27px);
    width: clamp(36px, 11.5vw, 46px);
    min-width: 0;
  }

  .shelf-lane .stone-button:nth-of-type(1) { left: calc(50% - 27px); z-index: 1; }
  .shelf-lane .stone-button:nth-of-type(2) { left: calc(50% - 23px); z-index: 2; }
  .shelf-lane .stone-button:nth-of-type(3) { left: calc(50% - 19px); z-index: 3; }
  .shelf-lane .stone-button:nth-of-type(4) { left: calc(50% - 15px); z-index: 4; }
  .shelf-lane .stone-button:nth-of-type(5) { left: calc(50% - 11px); z-index: 5; }
  .shelf-lane .stone-button:hover { z-index: 8; translate: 0; scale: 1; }
  .lane-name { z-index: 9; font-size: 6px; letter-spacing: .04em; }
  .empty-lane { position: absolute; inset: 18px 0 auto; text-align: center; }

  .hand { min-height: 68px; padding: 4px; gap: 4px; }
  .hand .stone-button { width: min(100%, 58px); min-width: 0; }

  .turn-actions {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-rows: 46px;
    gap: 8px;
    padding-top: 0;
  }

  .turn-actions .button { min-width: 0; }
  kbd { display: none; }

  .tutorial-coach {
    top: calc(env(safe-area-inset-top) + 64px);
    width: calc(100vw - 24px);
    max-height: 44dvh;
    padding: 14px;
    overflow-y: auto;
  }

  .log-toggle {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .game-screen.opponent-turn .log-toggle,
  .game-screen.play-console-retracted .log-toggle { bottom: max(12px, env(safe-area-inset-bottom)); }

  .battle-log,
  .game-screen.opponent-turn .battle-log,
  .game-screen.play-console-retracted .battle-log {
    right: 12px;
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 44px));
    width: calc(100vw - 24px);
    max-height: min(52dvh, 360px);
  }

  .battle-log ol { max-height: calc(min(52dvh, 360px) - 44px); }

  .modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 58px 17px 24px;
  }

  .modal h2 { font-size: clamp(31px, 10vw, 42px); }
  .arena-card-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .arena-card-image { width: min(52vw, 210px); margin: 0 auto; }
  .rules-effects { grid-template-columns: minmax(0, 1fr); }
  .cancel-ring { justify-content: flex-start; overflow-x: auto; }
  .rule-steps { grid-template-columns: minmax(0, 1fr); }

  .handoff,
  .result-screen,
  .campaign-overlay {
    align-items: center;
    padding: 12px;
    overflow-y: auto;
  }

  .handoff-card,
  .result-card,
  .campaign-overlay-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 54px 18px 25px;
    overflow-y: auto;
  }

  .handoff-card h2,
  .result-card h2 { font-size: clamp(35px, 12vw, 45px); }

  .handoff-card .button { width: 100%; min-width: 0; }
  .result-actions { grid-template-columns: minmax(0, 1fr); }
  .campaign-map-options,
  .reward-options,
  .merchant-options { grid-template-columns: minmax(0, 1fr); }

  .toast-region {
    top: calc(env(safe-area-inset-top) + 62px);
    width: calc(100vw - 24px);
  }

  .toast { max-width: 100%; text-align: center; }
}

@media (max-width: 360px) {
  .deck-topbar { gap: 3px; padding-inline: 6px; }
  .deck-topbar-actions,
  .topbar-actions { gap: 2px; }
  .deck-topbar .brand-small { font-size: 10px; }
  .deck-topbar.title-topbar .brand-small { font-size: 14px; }
  .deck-topbar .brand-cards { display: none; }
  .icon-button { width: 32px; height: 32px; }
  .language-select { min-height: 32px; padding-inline: 6px; }
  .topbar { grid-template-columns: 32px minmax(50px, 1fr) auto; gap: 3px; padding-inline: 6px; }

  .title-content { padding-inline: 14px; }
  .title-content h1 { font-size: 43px; }
  .deck-content { padding-inline: 12px; }
  .deck-color-copy span { display: none; }

  .game-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-column { grid-column: 1 / -1; }
  #player-zero,
  #player-one { grid-row: 2; }

  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shelf:has(.special-lane) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  html,
  body {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell { width: 100%; height: auto; min-width: 0; min-height: 100dvh; }
  .screen { height: auto; min-height: 100dvh; }
  .title-screen { overflow-y: auto; }
  .title-content { min-height: 100dvh; padding: 68px 18px 24px; }
  .title-content h1 { font-size: 56px; }
  .title-copy { margin: 11px 0 13px; }
  .title-actions .button-large { min-width: 0; padding-block: 10px; }
  .title-footnote { margin-top: 10px; }
}

/* Keep the toolbar and its popovers above scrolling page content and setup cards. */
.deck-topbar,
.topbar { z-index: 45; }
.deck-topbar.title-topbar { z-index: 45; }
.language-options,
.music-controls { z-index: 120; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .resolution-stone { display: none; }
  .resolution-callout,
  .resolution-delta,
  .resolution-cancel-burst { animation-name: resolution-reduced-pop !important; animation-duration: 700ms !important; animation-delay: 0ms !important; }
}