: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,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.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;
  cursor: pointer;
}

.text-button:hover { color: var(--text); }

/* 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;
}

.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; }
.button-tutorial { grid-column: 1 / -1; 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-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; }
.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-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; }
.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; }
.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); }
.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; }

/* 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-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-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 { 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 { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--yellow-rgb),.08); }
.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: ""; }
.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 {
  display: grid;
  grid-template-rows: 56px minmax(300px, 1fr) minmax(245px, 35vh);
  background:
    linear-gradient(rgba(8,10,16,.92), rgba(8,10,16,.96)),
    url("assets/oroborous.jpg") center / 82vh auto no-repeat;
}
.game-screen.opponent-turn { grid-template-rows: 56px minmax(300px, 1fr); }
.game-screen.opponent-turn .log-toggle { bottom: 18px; }
.game-screen.opponent-turn .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.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; }
#music-button.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); }
.music-volume-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.music-volume-label input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.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.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; }
.resource strong { display: block; margin-top: 3px; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.resource-composition { position: relative; }
.resource-heading { display: flex; min-height: 20px; gap: 4px; align-items: center; }
.resource-heading span { flex: 0 1 auto; font-size: 6px; letter-spacing: .04em; }
.resource-pile { position: relative; display: block !important; width: 25px; height: 18px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.5); border-radius: 3px; overflow: visible; }
.resource-pile::before { position: absolute; top: 3px; left: -3px; z-index: -1; width: 100%; height: 100%; border: inherit; border-radius: inherit; background: inherit; box-shadow: -2px 2px 0 rgba(7,9,14,.72); content: ""; }
.resource-pile::after { position: absolute; inset: 2px; background-position: center; background-size: cover; content: ""; }
.resource-pile-deck { border-color: #5b6070; background: #0a0c12; box-shadow: inset 0 0 0 1px #030407; }
.resource-pile-deck::after { background-image: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.38)), url("assets/oroborous2.jpg"); filter: grayscale(1) contrast(1.35) brightness(.9); opacity: .9; }
.resource-pile-discard { border-color: #beb9ad; background: #f3f0e8; box-shadow: inset 0 0 0 1px #fff; }
.resource-pile-discard::after { border: 1px solid rgba(56,49,42,.5); background: radial-gradient(circle at 30% 30%, #a92832 0 1px, transparent 1.5px), radial-gradient(circle at 70% 70%, #1b2028 0 1px, transparent 1.5px); }
.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; }

/* Arena */
.arena-column { display: flex; min-width: 0; height: 100%; flex-direction: column; align-items: center; justify-content: center; }
.arena-heading { display: flex; width: min(100%, 590px); align-items: end; justify-content: space-between; }
.arena-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 27px); font-weight: 400; }
.board-owner { margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.arena {
  position: relative;
  width: min(31vh, 28vw, 360px);
  min-width: 220px;
  aspect-ratio: 1;
  margin: 6px auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,35,48,.9) 0 18%, rgba(17,20,29,.8) 19% 53%, rgba(8,10,16,.75) 54%);
  box-shadow: inset 0 0 80px #050608, 0 34px 80px rgba(0,0,0,.4);
}

.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-ouroboros { position: absolute; inset: 3%; z-index: 0; width: 94%; height: 94%; border-radius: 50%; object-fit: cover; opacity: .17; filter: invert(1) contrast(1.25); animation: spin 28s linear infinite; pointer-events: none; }
.arena-orbit { position: absolute; border: 1px solid rgba(231,208,155,.1); border-radius: 50%; pointer-events: none; }
.orbit-one { inset: -7px; animation: spin-counterclockwise 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(34px, 4.6vh, 56px);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 5px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 15px var(--stone-glow);
}
.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.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; }

.arena-core { position: absolute; top: 50%; left: 50%; z-index: 3; width: 25%; 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; }
.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 { display: grid; width: clamp(31px, 4vh, 50px); aspect-ratio: 1; place-items: center; border-radius: 50%; }
.special-stone-label { color: #fff; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-shadow: 0 1px 4px #000; }
.arena-core 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(19px, 2vw, 29px); 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%, 590px); grid-template-columns: repeat(4, 1fr); gap: 5px; }
.effect-chip { display: flex; min-width: 0; gap: 7px; align-items: center; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; 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: 15px; 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: 7px; font-weight: 800; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.effect-copy strong { font-family: var(--serif); font-size: 16px; 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);
}

.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(31px, 2.65vw, 48px)); 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; }
.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; }
.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::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:hover { z-index: 3; border-color: #fff; translate: 0 -7px; scale: 1.05; }
.stone-button:active { translate: 0 -2px; scale: .98; }
.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 .stone-button { width: min(18%, 72px); animation: hand-enter 280ms cubic-bezier(.2,.8,.2,1) both; }
.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; }
kbd { margin-left: 5px; border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; color: #737784; font-family: inherit; font-size: 8px; }

@keyframes hand-enter { from { opacity: 0; transform: translateY(30px) rotate(4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

/* Panels and overlays */
.resolution-vfx { position: fixed; inset: 0; z-index: 48; overflow: hidden; pointer-events: none; }
.resolution-card {
  position: fixed;
  width: clamp(43px, 4.8vw, 64px);
  aspect-ratio: .78;
  border: 2px solid var(--resolution-color);
  border-radius: 7px;
  background-position: center;
  background-size: cover;
  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-card::before { position: absolute; inset: -7px; border: 1px solid var(--resolution-color); border-radius: 10px; content: ""; opacity: .38; box-shadow: 0 0 25px var(--resolution-color); }
.resolution-card::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, rgba(255,255,255,.32), transparent 30%, rgba(0,0,0,.24)); content: ""; }
.resolution-card.damage { filter: saturate(1.3) brightness(1.08); }
.resolution-card.restore { filter: saturate(1.25) brightness(1.2); }
.resolution-card.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-card.recycle { border-radius: 50% 7px 50% 7px; box-shadow: 0 12px 28px rgba(0,0,0,.65), 0 0 22px var(--green), 0 0 52px rgba(var(--green-rgb),.45); }
.resolution-card.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-card.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; }

.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-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-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-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 {
  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;
}

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

.log-toggle { position: fixed; right: 20px; bottom: calc(35vh + 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(35vh + 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; }
.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; }
.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); }
.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-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 { 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.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; }.merchant-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Compact desktop layouts */
@media (max-height: 760px) {
  .game-screen { grid-template-rows: 50px minmax(285px, 1fr) minmax(230px, 35vh); }
  .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(31vh, 27vw, 300px); }
  .play-console { padding-top: 8px; padding-bottom: 10px; }
  .stone-workspace { margin-top: 7px; }
  .area-label { margin-bottom: 4px; }
  .log-toggle { bottom: calc(35vh + 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; }
}

@media (max-width: 940px) {
  .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; }
  .shelf:has(.special-lane) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .campaign-map-options, .reward-options, .merchant-options { 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)); }
}

@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-card { display: none; }
  .resolution-callout,
  .resolution-delta,
  .resolution-cancel-burst { animation-name: resolution-reduced-pop !important; animation-duration: 700ms !important; animation-delay: 0ms !important; }
}