:root {
  color-scheme:dark;
  --bg:#111517;
  --panel:#171d20;
  --line:#343d40;
  --ink:#eee9db;
  --muted:#a9b2af;
  --accent:#d8bd79;
  --positive:#9bd0b3;
  --danger:#ed9a91;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
* {
  box-sizing:border-box
}
body {
  display:grid;
  place-items:center;
  min-height:100svh;
  margin:0;
  background:#080b0d;
  color:var(--ink);
  overflow:hidden
}
button,select,a {
  font:inherit
}
button,select {
  border:1px solid var(--line);
  border-radius:4px;
  background:#21282b;
  color:var(--ink);
  cursor:pointer
}
button:hover:not(:disabled),select:hover {
  background:#303b3e;
  border-color:#a9b2af
}
button[aria-pressed=true] {
  color:var(--positive);
  border-color:#527563
}
button:disabled {
  opacity:.45;
  cursor:default
}
button:focus-visible,select:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
a {
  color:var(--muted);
  text-decoration:none
}
a:hover {
  color:var(--ink)
}
h1,h2,h3,p {
  margin:0
}
svg,img {
  max-width:100%
}
.studio {
  position:relative;
  container-type:size;
  width:min(100vw,calc(100svh * 16 / 9));
  height:min(100svh,calc(100vw * 9 / 16));
  aspect-ratio:16/9;
  display:grid;
  grid-template-rows:6.5% minmax(0,1fr);
  background:var(--bg);
  overflow:hidden;
  font-size:clamp(10px,.8vw,15px)
}
.studio-bar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:1cqw;
  padding:.6cqh 1cqw;
  border-bottom:1px solid var(--line)
}
.studio-title {
  display:grid;
  gap:.25cqh;
  min-width:0
}
.studio-title strong {
  font-size:1.35cqw;
  font-weight:700;
  letter-spacing:.015em
}
.studio-title strong a {
  margin-left:.5cqw;
  font-size:.68cqw;
  font-weight:500;
  color:var(--accent);
  letter-spacing:.08em;
  text-transform:uppercase
}
.studio-title>span {
  font-size:.83cqw;
  line-height:1.2;
  color:var(--muted)
}
.run-stats {
  display:flex;
  align-items:center;
  gap:1.15cqw
}
.stat {
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:0 .3cqw;
  white-space:nowrap
}
.stat strong {
  font-size:1cqw;
  line-height:1.2;
  font-weight:650
}
.stat>span:not(.stat-icon) {
  grid-column:2;
  color:var(--muted);
  font-size:.67cqw;
  letter-spacing:.05em;
  text-transform:uppercase
}
.stat:not(:has(.stat-icon)) {
  grid-template-columns:auto
}
.stat:not(:has(.stat-icon))>span {
  grid-column:1
}
.stat-icon {
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:1.55cqw;
  height:1.55cqw
}
.stat-icon img {
  width:100%;
  height:100%;
  object-fit:contain
}
.stat.hp strong {
  color:#f2aaa0
}
.stat.gold strong {
  color:#e2c170
}
.stat.seed strong {
  font-size:.72cqw
}
.transport {
  display:flex;
  align-items:center;
  gap:.25cqw
}
.transport button,.transport select {
  height:2.55cqh;
  min-height:22px;
  padding:0 .4cqw;
  font-size:.87cqw
}
.transport button {
  min-width:1.7cqw
}
.transport #play {
  min-width:3.2cqw
}
.transport #position {
  min-width:4.1cqw;
  margin-left:.2cqw;
  text-align:right;
  font-size:.78cqw;
  font-variant-numeric:tabular-nums;
  color:var(--muted)
}
.relic-list {
  position:absolute;
  z-index:25;
  inset:.4cqh calc(var(--potion-slots, 0) * 2.8cqw + 4.8cqw) auto .6cqw;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:.4cqh .35cqw;
  pointer-events:none;
}
.relic {
  position:relative;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:3.2cqw;
  min-height:5.8cqh;
  padding-top:4.2cqh;
  pointer-events:auto;
  align-content:start
}
.relic img {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:4.2cqh;
  width:4.2cqh;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px #0008)
}
.relic.used {
  opacity:.4;
  filter:grayscale(1)
}
.relic>b,.relic>small {
  position:absolute;
  right:-2px;
  bottom:0;
  border-radius:3px;
  background:#10171ae8;
  padding:0 .2cqw;
  color:var(--ink);
  font-size:.8cqw;
  font-weight:700;
  line-height:1.2
}
.relic>small {
  top:0;
  bottom:auto;
  color:var(--accent)
}
.fallback {
  font-size:.85cqw;
  color:var(--accent)
}
.studio-actions {
  display:flex;
  align-items:center;
  gap:.45cqw;
  font-size:.75cqw;
  white-space:nowrap
}
.studio-actions button {
  padding:.4cqh .6cqw
}
.studio-grid {
  display:grid;
  min-width:0;
  min-height:0;
  padding:.75cqh .6cqw .6cqh;
  gap:.6cqw;
  grid-template-columns:13% minmax(0,1fr) 25%;
  grid-template-rows:minmax(0,46%) minmax(0,1fr);
  grid-template-areas:"map battle brain" "map cards cards"
}
.panel {
  min-width:0;
  min-height:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden
}
.panel>header,.card-zone>header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6cqw;
  min-height:3.4cqh;
  padding:.45cqh .65cqw;
  border-bottom:1px solid var(--line)
}
.panel>header h1,.panel>header h2 {
  font-size:1cqw;
  font-weight:650
}
.panel>header p,.panel>header span {
  color:var(--muted);
  font-size:.76cqw;
  line-height:1.2
}
.panel>header p:empty {
  display:none
}
.map-panel {
  grid-area:map;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:#242a2a
}
.map-panel>header {
  flex-direction:column;
  align-items:flex-start;
  gap:.3cqh
}
.map-panel>header h2 {
  color:var(--accent)
}
#route-map {
  height:100%;
  width:100%;
  min-height:0;
  padding:.5cqh .15cqw
}
.route-edge {
  stroke:#657170;
  stroke-width:1.15;
  opacity:.5
}
.route-edge.visited,.route-edge.taken {
  stroke:#e7c270;
  stroke-width:2.8;
  opacity:1
}
.route-node {
  fill:#262d2c;
  stroke:#596461;
  stroke-width:.9
}
.route-node.visited {
  fill:#79643c;
  stroke:#e6c980;
  stroke-width:1.5
}
.route-node.current {
  fill:#977a38;
  stroke:#fff0ae;
  stroke-width:2.5
}
.route-node.reachable {
  stroke:#cac5a5;
  stroke-width:1.5
}
.route-icon {
  filter:brightness(0) invert(.82);
  pointer-events:none
}
.route-visited .route-icon,.route-current .route-icon {
  filter:brightness(0) invert(1)
}
.route-symbol {
  fill:var(--ink);
  font-size:8px;
  text-anchor:middle;
  dominant-baseline:central
}
.map-boss {
  filter:brightness(0) invert(.8)
}
.boss-label {
  fill:#e4d9b7;
  font-size:6px;
  text-anchor:middle
}
.map-legend {
  display:flex;
  align-items:center;
  gap:.5cqw;
  padding:.6cqh .7cqw;
  color:var(--muted);
  font-size:.75cqw
}
.route-key {
  width:1.3cqw;
  border-top:2px solid #e7c270
}
.battle-panel {
  position:relative;
  grid-area:battle;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 38%;
  isolation:isolate
}
.battle-panel>header {
  position:relative;
  z-index:2
}
.battle-panel>header>div {
  display:flex;
  align-items:baseline;
  gap:.6cqw
}
.battle-panel>header p {
  font-size:.66cqw;
  text-transform:uppercase;
  letter-spacing:.07em
}
.battle-panel>header h1 {
  font-size:.95cqw
}
.battle-panel>header #turn-label {
  font-size:.8cqw;
  text-align:right
}
.battlefield {
  position:relative;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:1cqw;
  min-width:0;
  min-height:0;
  padding:.65cqh 1cqw;
  background:#232b2c center/cover;
  isolation:isolate
}
.battlefield:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,#11181a99,#0c1115bf)
}
.actor {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  gap:.3cqh
}
.actor-player {
  flex:0 0 22%
}
.actor-art {
  display:grid;
  place-items:end center;
  height:8.5cqh;
  max-width:9cqw
}
.actor-art img {
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 3px 3px #000a)
}
.actor-name {
  font-size:.85cqw;
  line-height:1.1;
  text-align:center;
  font-weight:650
}
.actor-vitals {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4cqw;
  font-size:.85cqw;
  font-variant-numeric:tabular-nums
}
.actor-vitals .hp {
  color:#f6b7ab
}
.actor-vitals .block {
  color:#9bcbeb
}
.actor-intent {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.25cqw;
  min-height:1.8cqh;
  font-size:.8cqw;
  color:#e4d2a1;
  text-align:center
}
.intent-icon {
  width:1.7cqw;
  height:2.5cqh;
  object-fit:contain
}
.actor-status {
  font-size:.68cqw;
  color:#d6c1a0
}
.power-list,.orb-list {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.2cqw;
  max-width:100%
}
.power-icon,.orb-icon {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.6cqw;
  height:2.25cqh
}
.power-icon img,.orb-icon img {
  height:100%;
  max-width:1.9cqw;
  object-fit:contain
}
.power-icon b,.orb-icon b {
  position:absolute;
  right:-.15cqw;
  bottom:-.1cqh;
  min-width:.65cqw;
  padding:0 .1cqw;
  border-radius:2px;
  background:#091014d9;
  color:#fff;
  font-size:.75cqw;
  line-height:1.1;
  font-weight:700
}
.orb-list {
  min-height:2.25cqh
}
.power-list .fallback,.orb-list .fallback {
  font-size:.7cqw
}
.actor.status-changed .actor-art,.actor.dead .actor-art {
  opacity:.35;
  filter:grayscale(1)
}
.enemies {
  flex:1;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:.5cqw
}
.enemies .actor {
  flex:1;
  max-width:10cqw
}
.enemies .actor-art {
  height:7.2cqh
}
.enemies:has(.actor:nth-child(4)) {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.4cqh
}
.enemies:has(.actor:nth-child(4)) .actor-art {
  height:3.7cqh
}
.enemies:has(.actor:nth-child(4)) .actor-name {
  font-size:.7cqw
}
.enemies:has(.actor:nth-child(4)) .actor-vitals {
  font-size:.72cqw
}
.enemy-overflow {
  font-size:.7cqw;
  color:var(--muted)
}
.loading-state {
  align-self:center;
  color:var(--muted);
  font-size:.9cqw;
  text-align:center
}
.event-options {
  display:grid;
  gap:.4cqh;
  max-height:100%;
  overflow:auto;
  font-size:.85cqw
}
.hand-area {
  display:grid;
  grid-template-rows:minmax(0,1fr);
  min-height:0;
  padding:.4cqh .6cqw .55cqh;
  border-top:1px solid #404c4f;
  background:linear-gradient(#1c2527,#141b20)
}
.hand {
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:.4cqw;
  min-height:0
}
.cards-panel {
  grid-area:cards;
  min-width:0;
  min-height:0
}
.piles {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.6cqw;
  height:100%;
  min-height:0
}
.card-zone {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-width:0;
  min-height:0;
  border:1px solid var(--line);
  border-radius:5px;
  background:#171e20;
  overflow:hidden
}
.card-zone>header {
  min-height:3.4cqh;
  background:#222b2d
}
.card-zone>header h3 {
  font-size:.94cqw;
  font-weight:650;
  color:#ddd3b4
}
.card-zone>header>span {
  font-size:.8cqw;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.empty-zone {
  grid-column:1/-1;
  align-self:start;
  padding:.9cqh .5cqw;
  font-size:.83cqw;
  color:#9aa5a1
}
.brain-panel {
  grid-area:brain;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:#1c2426
}
.brain-panel>header h2 {
  color:var(--accent)
}
.brain-panel>header>span {
  font-size:.7cqw
}
.brain-content {
  min-height:0;
  padding:.65cqh .65cqw;
  overflow-y:auto;
  scrollbar-width:thin;
  font-size:.85cqw
}
.brain-content>p {
  color:var(--muted);
  line-height:1.35
}
.candidate-list,.influence-list {
  display:grid;
  gap:.4cqh
}
.candidate {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.6cqw;
  min-height:2.9cqh;
  padding:.4cqh .45cqw;
  border-left:2px solid transparent;
  background:#283234;
  border-radius:3px;
  overflow:hidden
}
.candidate strong {
  font-size:.85cqw;
  font-weight:550;
  line-height:1.1;
  overflow-wrap:break-word
}
.candidate>span {
  font-size:.86cqw;
  color:#e0d5b6;
  font-variant-numeric:tabular-nums
}
.candidate.chosen {
  border-left-color:var(--accent);
  background:#474332
}
.candidate.chosen strong {
  color:#fff2be
}
.candidate i {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,#d8bd7977 var(--probability),transparent var(--probability))
}
.chosen-summary {
  font-size:.8cqw;
  line-height:1.2;
  margin:.6cqh 0;
  color:#ebd69f!important
}
.brain-subtitle {
  font-size:.73cqw;
  color:var(--muted);
  margin:.75cqh 0 .45cqh;
  text-transform:uppercase;
  letter-spacing:.045em
}
.influence {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.5cqw;
  font-size:.78cqw;
  line-height:1.16
}
.influence.supporting span:last-child {
  color:var(--positive)
}
.influence.opposing span:last-child {
  color:var(--danger)
}
.brain-pending {
  color:var(--muted)
}
.brain-pending:before {
  content:"";
  display:inline-block;
  width:.6cqw;
  height:.6cqw;
  margin-right:.4cqw;
  border:1px solid #94a59e;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
#action-overlay {
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  overflow:hidden
}
#playback-cursor {
  position:absolute;
  z-index:12;
  width:2cqw;
  height:2cqw;
  pointer-events:none;
  opacity:.85;
  left:52%;
  top:64%;
  filter:drop-shadow(0 1px 2px #000a)
}
#playback-cursor:not([src]) {
  display:none
}
.action-feedback {
  position:absolute;
  z-index:11;
  color:#ffebc0;
  font-size:1.8cqw;
  font-weight:750;
  text-shadow:0 2px 4px #000
}
.target-arrow {
  position:absolute;
  height:2px;
  transform-origin:left center;
  background:var(--accent);
  box-shadow:0 0 5px #fce7a888
}
.studio-notice {
  position:absolute;
  z-index:20;
  bottom:1cqh;
  left:15cqw;
  max-width:68cqw;
  padding:.8cqh 1cqw;
  border:1px solid #80594a;
  border-radius:4px;
  background:#32241ff2;
  color:#f3c5ad;
  font-size:.85cqw
}
.studio-notice:empty {
  display:none
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}
@media(max-width:760px) and (orientation:portrait) {
  body {
    display:block;
    overflow:auto
  }
  .studio {
    width:100vw;
    height:calc(100vw * 9 / 16);
    margin-top:12vh
  }
  .studio:after {
    content:"Turn your screen sideways for the full game view";
    position:fixed;
    bottom:8vh;
    left:8vw;
    right:8vw;
    text-align:center;
    font:14px/1.5 system-ui;
    color:#a9b2af
  }
  .transport button,.transport select {
    min-height:0
  }
}
.power {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75cqw;
  height:2.5cqh
}
.power .power-icon {
  width:100%;
  height:100%;
  overflow:hidden
}
.power>b {
  position:absolute;
  right:-.12cqw;
  bottom:-.15cqh;
  padding:0 .12cqw;
  border-radius:2px;
  background:#0a131be8;
  color:#fff;
  font-size:.78cqw;
  line-height:1.1
}
.power svg {
  width:100%;
  height:100%;
  overflow:hidden
}
.recorded-screen {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.6cqh;
  min-height:0;
  width:100%;
  overflow-y:auto
}
.recorded-screen>p {
  color:var(--muted);
  font-size:.85cqw;
  line-height:1.25
}
.recorded-choices {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:.5cqw;
  min-height:0
}
.recorded-choice {
  display:flex;
  flex-direction:column;
  gap:.4cqh;
  flex:1 1 26%;
  max-width:100%;
  min-width:0;
  padding:.6cqh .5cqw;
  border:1px solid #5b665e;
  border-radius:4px;
  background:#142022dc;
  font-size:.84cqw;
  line-height:1.2
}
.recorded-choice.chosen {
  border-color:var(--accent);
  background:#4a4133
}
.recorded-choice>strong {
  font-weight:600
}
.choice-cards {
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:.35cqw;
  min-height:0
}
.recorded-choice img {
  max-height:6cqh;
  object-fit:contain
}
.keys {
  display:flex;
  align-items:center;
  gap:.1cqw;
  height:2.2cqh
}
.key-icon {
  display:grid;
  place-items:center;
  width:1.25cqw;
  height:2.2cqh;
  opacity:.22;
  filter:grayscale(1)
}
.key-icon img {
  width:100%;
  height:100%;
  object-fit:contain
}
.key-icon.collected {
  opacity:1;
  filter:none
}
.stat-icon {
  width:1.3cqw;
  height:2cqh;
  object-fit:contain
}
.card-zone>header h3 {
  display:flex;
  align-items:center;
  gap:.4cqw
}
.pile-icon {
  width:1.65cqw;
  height:2.2cqh;
  object-fit:contain
}
.end-turn {
  position:absolute;
  right:.7cqw;
  bottom:.5cqh;
  display:grid;
  place-items:center;
  width:4.3cqw;
  height:3.5cqh;
  font-size:.68cqw
}
.end-turn img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.7
}
.end-turn>span:not(.action-probability) {
  position:relative;
  color:#e6e3d1
}
.map-panel {
  background:#c5bba5;
  color:#342d24;
  border-color:#7b7768
}
.map-panel>header {
  border-color:#928a77
}
.map-panel>header h2 {
  color:#3b3528
}
.map-panel>header #map-meta,.map-legend {
  color:#554a3a
}
.route-icon,.route-boss-icon {
  filter:none;
  opacity:.8
}
.route-outline {
  opacity:.3
}
.route-node.visited .route-icon,.route-node.current .route-icon {
  opacity:1
}
.route-edge {
  stroke:#827864;
  opacity:.55;
  stroke-width:1
}
.route-edge.visited {
  stroke:#b64927;
  opacity:1;
  stroke-width:2.6
}
.route-node .visited-ring {
  fill:#dc98644a;
  stroke:#ac3d21;
  stroke-width:1.4
}
.route-node.current .visited-ring {
  fill:#f3d281;
  stroke:#7e2715;
  stroke-width:2.2
}
.route-current {
  filter:none;
  opacity:.8
}
.route-symbol {
  fill:#40352b
}
.route-key {
  border-color:#b64927
}
.map-legend {
  font-size:.76cqw
}
#route-map {
  object-position:top
}
#selection-view:empty {
  display:none
}
.selection-heading {
  display:flex;
  gap:.6cqw;
  align-items:center;
  font-size:.77cqw;
  line-height:1.2;
  color:#e5c98b
}
.selection-cards {
  display:flex;
  align-items:stretch;
  gap:.3cqw;
  max-height:4.2cqh;
  overflow-y:auto
}
.selection-card {
  flex:1;
  min-width:0;
  border:1px solid #485758;
  border-radius:3px;
  background:#242e30;
  font-size:.75cqw
}
.selection-card.chosen {
  outline:1px solid var(--accent)
}
.route-icon,.route-boss-icon {
  filter:brightness(.16) sepia(1);
  opacity:.9
}
.route-outline {
  opacity:.2
}
.route-current {
  filter:brightness(.3) sepia(1)
}
#seed-label {
  font-size:.67cqw;
  color:#83918b;
  line-height:1.1;
  letter-spacing:.03em
}
.studio-title {
  gap:.1cqh
}
.target-arrow {
  inset:0;
  height:auto;
  background:none;
  box-shadow:none
}
.action-feedback {
  display:flex;
  align-items:center;
  gap:.4cqw;
  font-size:1.15cqw;
  white-space:nowrap
}
.action-feedback .power-icon {
  width:2cqw;
  height:3cqh
}
.played-card {
  z-index:11;
  max-width:none
}
.damage-slash {
  position:absolute;
  width:5cqw;
  height:2px;
  background:#fff0cb;
  box-shadow:0 0 5px 3px #f2966977;
  transform:translate(-50%,-50%) rotate(-45deg);
  pointer-events:none
}
.studio-grid {
  grid-template-areas:"map battle rail" "map cards rail"
}
.right-rail {
  grid-area:rail;
  display:grid;
  grid-template-rows:minmax(0,22%) minmax(0,1fr);
  gap:.6cqw;
  min-height:0;
  min-width:0
}
.right-rail .brain-panel {
  grid-area:auto
}
.right-rail #permanent-deck {
  min-height:0;
  min-width:0
}
.right-rail #permanent-deck>.card-zone {
  height:100%
}
.piles {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.brain-panel>header {
  min-height:2.7cqh;
  padding:.3cqh .55cqw
}
.brain-panel>header h2 {
  font-size:.87cqw
}
.brain-content {
  padding:.4cqh .5cqw
}
.candidate-list {
  gap:.18cqh
}
.candidate {
  min-height:1.85cqh;
  padding:.17cqh .35cqw;
  gap:.3cqw
}
.candidate strong {
  font-size:.77cqw;
  line-height:1.06
}
.candidate>span {
  font-size:.78cqw
}
.chosen-summary {
  margin:.4cqh 0 0;
  font-size:.71cqw;
  line-height:1.15
}
.brain-panel>header>span {
  font-size:.62cqw
}
.battle-panel {
  grid-template-rows:auto minmax(0,1fr) auto 38%
}
.battlefield {
  padding:.3cqh 1cqw;
  background-position:center 63%;
  align-items:center
}
.actor-art,.enemies .actor-art,.enemies:has(.actor:nth-child(4)) .actor-art {
  width:var(--creature-width,9cqw);
  height:var(--creature-height,8.3cqh);
  max-width:100%;
}
.actor-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.actor-footer {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3cqh;
  height:8cqh;
  width:10cqw;
  flex-shrink:0;
  max-width:100%;
}
.actor-footer>* { flex-shrink:0; }
.actor-target { translate:none; }
.actor-intent {
  height:1.8cqh;
  min-height:1.8cqh
}
.actor .power-list:empty {
  display:none
}
.studio-grid {
  gap:.5cqw;
  padding:.5cqh .5cqw
}
.panel,.card-zone {
  border-radius:3px
}
.battle-panel[data-combat=true] {
  grid-template-rows:minmax(0,1fr) auto 38%
}
.battle-panel[data-combat=true]>header {
  display:none
}
.battle-panel:not([data-combat=true])>header {
  min-height:2.5cqh;
  padding:.3cqh .6cqw
}
.battle-panel>header #screen-kind {
  display:none
}
.map-panel>header {
  min-height:2.6cqh;
  padding:.25cqh .55cqw;
  border-bottom:0
}
.map-panel>header h2 {
  display:none
}
.map-panel>header #map-meta {
  font-size:.78cqw
}
.map-legend {
  padding:.3cqh .6cqw
}
.card-zone>header {
  min-height:2.65cqh;
  padding:.25cqh .5cqw;
  border-bottom:0;
  background:transparent
}
.card-zone>header h3 {
  font-size:.88cqw
}
.pile-icon {
  height:1.9cqh;
  width:1.4cqw
}
.brain-panel>header {
  border-bottom:0;
  background:transparent;
  min-height:2.45cqh;
  padding:.25cqh .5cqw
}
.brain-panel>header h2 {
  font-size:.8cqw
}
.hand-area {
  position:relative;
  border-top:0
}
.hand {
  padding-left:4.25cqw;
  gap:.3cqw
}
.energy-well {
  position:absolute;
  z-index:3;
  bottom:2.5cqh;
  left:.4cqw;
  display:grid;
  place-items:center;
  width:4cqw;
  height:4cqw;
  pointer-events:none
}
.energy-well:empty {
  display:none
}
.energy-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(var(--energy-scale,1))
}
.energy-well strong {
  position:relative;
  z-index:2;
  font-size:1.9cqw;
  color:#fff;
  text-shadow:0 2px 4px #331d10;
  font-family:Georgia,serif
}
.turn-badge {
  position:absolute;
  top:.7cqh;
  right:.7cqw;
  font-size:.75cqw;
  color:#c8c6b9
}
.stance {
  font-size:.76cqw;
  color:#e4c5a2
}
.stance[data-stance=wrath] {
  color:#efa296
}
.stance[data-stance=calm] {
  color:#a7d3dd
}
.stance[data-stance=divinity] {
  color:#f4dc8f
}
/* Explicit rows keep the hand anchored when Brain effects have not arrived yet. */ .battlefield {
  grid-row:2
}
.hand-area {
  grid-row:4
}
.battle-panel[data-combat=true] .battlefield {
  grid-row:1
}
.battle-panel[data-combat=true] .hand-area {
  grid-row:3
}
.battle-panel:not([data-combat=true]) {
  grid-template-rows:auto minmax(0,1fr) auto auto
}
.battle-panel:not([data-combat=true]) .hand-area:not(:has(.selection-card)) {
  display:none
}
/* Combat piles use 60% of their previous height; deck sizing is independent. */ .studio-grid {
  grid-template-rows:minmax(0,67.6%) minmax(0,1fr)
}
#piles .card-zone>header {
  min-height:2.3cqh;
  padding:.15cqh .4cqw
}
#piles .card-zone>header h3 {
  font-size:.8cqw
}

/* One live scene: actors and hand share the game's background. */
.battle-panel {
  background-image:linear-gradient(#10141733,#10141766),var(--scene-image);
  background-size:cover;
  background-position:center 63%;
}
.battlefield {
  background:transparent!important;
}
.battlefield:before { display:none; }
.hand-area { background:transparent; }
.hand { align-items:flex-end; padding-top:2.5cqh; }
.energy-well { left:1cqw; }
.actor-vitals { position:relative; min-height:2.1cqh; }
.life-bar {
  position:relative;
  width:8.2cqw;
  height:1.55cqh;
  min-height:10px;
  border:1px solid #613632;
  border-radius:1cqw;
  background:#3a2220;
  box-shadow:0 1px 2px #000b,inset 0 1px 2px #0008;
}
.life-fill {
  position:absolute;
  inset:0 auto 0 0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(#e07162,#c95549 50%,#a03530);
}
.life-text {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff3de;
  font-size:.7cqw;
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 2px #000,0 0 2px #000;
}
.actor-vitals .block {
  position:absolute;
  right:calc(100% - .2cqw);
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  min-width:2.2cqw;
  height:3cqh;
  color:#e5f6ff;
  font-size:.87cqw;
  font-weight:800;
  text-shadow:0 1px 2px #102639;
}
.block-icon { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:-1; }
.action-probability {
  position:absolute;
  z-index:4;
  top:-2.3cqh;
  left:50%;
  transform:translateX(-50%);
  padding:.2cqh .35cqw;
  border:1px solid #8e794e;
  border-radius:3px;
  background:#201d16ed;
  color:#ffdfa0;
  font-size:.78cqw;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
.recorded-choice,.selection-card { position:relative; }
.recorded-choice>.action-probability { top:.3cqh; left:auto; right:.4cqw; transform:none; }
.selection-card>.action-probability { top:0; left:auto; right:0; transform:none; }
.map-probability { fill:#4e240c; text-anchor:middle; font-size:4.2px; font-weight:800; paint-order:stroke; stroke:#ead7ac; stroke-width:2px; }
.brain-content .all-actions { margin-top:.5cqh; font-size:.7cqw; color:var(--muted); }
.brain-content .all-actions summary { cursor:pointer; }
.recorded-choices { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:.7cqh; }
.recorded-choice { flex:initial; padding:.55cqh .65cqw; }
.reward-row { display:flex; align-items:stretch; gap:.65cqw; padding:.5cqh; border:1px solid #816c45; border-radius:4px; background:#251f16cf; }
.reward-row .recorded-choice { flex:1; min-width:0; border-color:#665c46; background:#171d1ed9; padding-top:2.6cqh; }
#action-overlay { z-index:30; }
#playback-cursor { z-index:32; }
/* Keep actors on the scene floor and the hand over that same scene. */
.battle-panel[data-combat=true] { display:block; }
.battle-panel[data-combat=true] .battlefield { position:absolute; inset:0; padding:0; }
.battle-panel[data-combat=true] .actor-player { position:absolute; left:9%; bottom:37%; }
.battle-panel[data-combat=true] .enemies { position:absolute; left:36%; right:4%; bottom:37%; align-items:flex-end; }
.battle-panel[data-combat=true] .enemies:has(.actor:nth-child(4)) { display:flex; gap:.5cqw; }
.battle-panel[data-combat=true] .hand-area { position:absolute; inset:auto 0 0; height:33%; padding-top:1.2cqh; padding-bottom:1cqh; }
.stat,.keys,.card-zone>header,.actor-intent,#map-meta,.map-panel>header { position:relative; }
.reward-row .recorded-choice:only-child { padding-top:.55cqh; }
.reward-row .recorded-choice:only-child>.action-probability { top:.35cqh; }
.reward-row .recorded-choice:only-child>strong { padding-right:5cqw; }

/* Travel uses the same map artwork, framed around the next two rows. */
.battle-panel[data-map=true] { background:#cdbb95; }
.battle-panel[data-map=true]>header { display:none; }
.battle-panel[data-map=true] .battlefield { grid-row:1 / 3; display:block; padding:0; overflow:hidden; }
#live-map { display:block; width:100%; height:100%; min-height:0; }
#live-map .route-node:not(.reachable):not(.current):not(.visited) { opacity:.5; }
#live-map .route-node.reachable .route-icon { opacity:1; }
#live-map .route-node.chosen .route-icon { filter:drop-shadow(0 0 2px #9b311e); }
#live-map .map-probability { font-size:4.2px; stroke-width:1.2px; }

/* Every card keeps the source-game frame and proportions; pile cards omit body text. */
@font-face { font-family:"StS Kreon"; src:url('/assets/fonts/Kreon-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:"StS Kreon"; src:url('/assets/fonts/Kreon-Bold.ttf'); font-weight:700; font-display:swap; }
.card-list {
  display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); grid-auto-rows:max-content;
  align-content:start; justify-items:center; gap:3px; padding:3px;
  min-width:0; min-height:0; overflow:auto; scrollbar-width:thin; container-type:size;
}
.card-chip,.hand-card { position:relative; min-width:0; border:0; background:none; padding:0; overflow:visible; }
.card-chip { width:min(100%,calc((100cqh - (var(--rows) - 1) * 3px) / var(--rows) * 332 / 452)); aspect-ratio:332 / 452; }
.hand { container-type:size; gap:4px; }
.hand-card { flex:none; width:min(calc((100cqw - (var(--hand-count) - 1) * 4px) / var(--hand-count)),calc(100cqh * 332 / 452)); aspect-ratio:332 / 452; }
.card-canvas { position:relative; width:100%; height:100%; container-type:inline-size; border-radius:10%; filter:drop-shadow(0 2px 2px #0008); }
.card-canvas.missing-chrome { background:#713d31; border:1px solid #b7a274; }
.card-atlas { position:absolute; overflow:hidden; pointer-events:none; }
.card-atlas>img { position:absolute; max-width:none; max-height:none; }
.card-background { z-index:0; }
.card-frame { z-index:2; }
.card-banner { z-index:3; }
.card-orb { z-index:4; }
.card-art { position:absolute; z-index:1; top:18.2%; left:10.7%; width:78.6%; height:33.4%; overflow:hidden; border-radius:7% / 9%; background:#201c1c; }
.card-art .card-image { display:block; width:100%; height:100%; max-height:none; object-fit:cover; }
.card-name,.card-description,.card-type,.card-cost,.card-upgrade { position:absolute; z-index:6; font-family:"StS Kreon",Georgia,serif; color:#fff4df; text-align:center; text-shadow:0 1px 2px #000,0 0 2px #000; }
.card-name { top:7.3%; left:15%; right:12%; font-size:8.8cqw; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.card-name.long { font-size:7.5cqw; }
.card-cost { z-index:7; top:3%; left:1%; width:17%; height:9%; display:grid; place-items:center; font-size:12cqw; font-weight:700; line-height:1; }
.card-description { top:57%; left:12.5%; right:12.5%; bottom:10.7%; display:grid; place-content:center; font-size:8.2cqw; line-height:1.12; white-space:pre-line; }
.card-description.long { font-size:7.2cqw; }
.card-description.dense { font-size:6.3cqw; }
.card-type { top:50.2%; left:18%; right:18%; font-size:6cqw; line-height:1.1; color:#333; text-shadow:none; }
.card-upgrade { right:5%; bottom:5%; min-width:16%; font-size:13cqw; line-height:1; color:#a9ff82; background:#153213e6; border-radius:25%; }
.upgraded .card-name { color:#a9ff82; }
.card-chip:focus-visible,.hand-card:focus-visible,.hand-card.chosen { outline:2px solid var(--accent); border-radius:10%; }
.hand-card:hover,.hand-card:focus-visible { z-index:20; }
.hand-card>.action-probability { top:auto; bottom:100%; margin-bottom:2px; padding:1px 3px; font-size:clamp(8px,.72vw,14px); }
.choice-cards .card-chip { flex:none; width:8cqw; }
.selection-cards { max-height:12cqh; }
.selection-card { flex:none; width:6cqw; border:0; background:none; }
.selection-card .card-chip { width:100%; }

/* Input effects occupy their own small rows next to the source; % action badges stay separate. */
.input-effect-dock { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.12cqh .35cqw; min-width:0; max-width:100%; }
.input-influence { display:inline-flex; align-items:baseline; gap:.22cqw; color:var(--positive); font-size:clamp(8px,.64cqw,12px); line-height:1.25; white-space:nowrap; font-weight:400; }
.input-influence>b { font-weight:600; font-variant-numeric:tabular-nums; }
.input-influence.opposing { color:var(--danger); }
.input-influence.negligible { opacity:.52; color:#b5c4c3; }
.input-influence:focus,.input-influence:hover { opacity:1; outline:none; text-shadow:0 0 4px currentColor; }
/* Effects remain attached to the visible source, with space reserved below each icon/value. */
.actor-footer { height:11.3cqh; }
.actor-name>.input-effect-dock { margin-top:.2cqh; }
.actor-name>.input-effect-dock .input-influence { gap:.35cqw; }
.effect-scope { color:#cad3cd; font-weight:400; }
.actor-intent:has(>.input-effect-dock) { flex-wrap:wrap; height:auto; min-height:3.3cqh; }
.actor-intent>.input-effect-dock { flex-basis:100%; margin-top:-.15cqh; }
.actor-vitals:has(.input-effect-dock) { margin-bottom:1.75cqh; }
.life-bar>.input-effect-dock { position:absolute; top:calc(100% + .25cqh); left:0; right:0; }
.block>.input-effect-dock { position:absolute; top:calc(100% + .05cqh); left:50%; transform:translateX(-50%); width:max-content; max-width:none; }
.block>.input-effect-dock .input-influence { gap:.15cqw; }
.power-list { gap:.35cqh .3cqw; }
.power:has(>.input-effect-dock) { display:flex; flex-direction:column; width:auto; min-width:2.6cqw; height:auto; }
.power:has(>.input-effect-dock)>.power-icon { flex:none; width:1.75cqw; height:2.5cqh; }
.power:has(>.input-effect-dock)>b { top:1.2cqh; right:calc(50% - 1cqw); bottom:auto; }
.power>.input-effect-dock { width:max-content; max-width:none; margin-top:.25cqh; }
.power>.input-effect-dock .input-influence { font-size:clamp(8px,.62cqw,12px); }
.actor .input-influence { background:#111b18da; border-radius:2px; padding:0 .12cqw; text-shadow:0 1px 2px #000; }
.hand-card>.input-effect-dock { position:absolute; bottom:calc(100% + 22px); left:0; right:0; }
.hand-card .input-influence { background:#17221de6; padding:0 .1cqw; }
.stat:has(.input-effect-dock),.keys:has(.input-effect-dock) { flex-wrap:wrap; }
.stat>.input-effect-dock,.keys>.input-effect-dock { flex-basis:100%; }
.stat>.input-effect-dock .input-influence>span,.keys>.input-effect-dock .input-influence>span { display:none; }
#map-meta>.input-effect-dock,.map-panel>header>.input-effect-dock { justify-content:flex-start; }
.card-zone>header>.input-effect-dock { margin-left:auto; }
.relic>.input-effect-dock { position:relative; width:100%; flex-direction:column; align-items:center; gap:0; }
.relic>.input-effect-dock .input-influence { font-size:clamp(8px,.62cqw,12px); gap:0; padding:0 .15cqw; border-radius:2px; background:#111b18e8; text-shadow:0 1px 2px #000; }
#energy-orb>.input-effect-dock { position:absolute; top:100%; left:0; right:0; }
.unplaced-effects { margin-top:.3cqh; font-size:.62cqw; color:var(--muted); }
.unplaced-effects summary { cursor:pointer; }
.unplaced-effect { display:flex; justify-content:space-between; align-items:baseline; gap:.7cqw; padding:.15cqh 0; }
.unplaced-effect>span { color:#c9d2d2; }
.battle-panel:not([data-combat=true]) { grid-template-rows:auto minmax(0,1fr) auto; }
.battle-panel:not([data-combat=true]) .hand-area { grid-row:3; }

.map-panel .input-effect-dock .input-influence { background:#182523e8; padding:.08cqh .2cqw; border-radius:2px; }
.map-panel .input-effect-dock .input-influence.negligible { opacity:1; color:#aeb9b6; }
.card-zone>header>.input-effect-dock .input-influence>span { display:none; }

/* One live interaction surface. The overlay shades the scene, never its active cards. */
.battle-panel::after { content:""; position:absolute; inset:0; z-index:5; background:#0006; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.battle-panel[data-interaction]:not([data-interaction=""])::after { opacity:1; }
.battle-panel[data-interaction=hand] .hand-area { z-index:6; }
#selection-view { position:absolute; z-index:7; inset:5% 5%; padding:1cqh 1cqw; background:#172122f5; border:0; border-radius:7px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.8cqh; }
#selection-view:empty { display:none; }
#selection-view[data-mode=hand] { inset:auto 3% 34%; padding:.6cqh .8cqw; grid-template-rows:auto auto; background:#172122e8; }
#selection-view .selection-cards { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); grid-auto-rows:calc((100% - (var(--rows) - 1)*.5cqh)/var(--rows)); max-height:none; min-height:0; overflow-y:auto; gap:.5cqh .6cqw; justify-items:center; align-items:center; }
#selection-view .selection-card { width:100%; height:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
#selection-view .selection-card .card-chip { width:auto; height:100%; max-width:100%; max-height:100%; }
.card-chip.expanded { aspect-ratio:332/452; }
.selection-heading { justify-content:space-between; font-size:.85cqw; }
.selection-controls { display:flex; gap:1cqw; justify-content:flex-end; font-size:.8cqw; }
.selection-controls:empty { display:none; }
.selection-controls>span { padding:.4cqh .8cqw; border:1px solid #bea578; border-radius:4px; background:#393324; }
.selection-ineligible { opacity:.3; }
@media (prefers-reduced-motion:reduce) { .battle-panel::after { transition:none; } }


/* Compact replay player: the timeline seeks decisions, including the initial state at zero. */
.transport { display:grid; width:clamp(225px,24cqw,460px); gap:.1cqh; padding:.15cqh .5cqw; border:1px solid var(--line); border-radius:8px; background:#0e1416; }
.transport-buttons { display:flex; align-items:center; gap:.24cqw; }
.transport .transport-buttons button { display:grid; place-items:center; width:2.4cqh; min-width:23px; height:2.4cqh; min-height:23px; padding:3px; border-color:transparent; background:transparent; border-radius:50%; }
.transport .transport-buttons button:hover:not(:disabled) { background:#303a3b; }
.transport .transport-buttons #play { min-width:24px; width:2.8cqh; min-height:24px; height:2.8cqh; padding:5px; color:#171b18; background:var(--accent); }
.transport button svg { width:100%; height:100%; fill:currentColor; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.transport #play .pause-symbol { fill:none; stroke-width:4; }
.transport #play[data-playing=true] .play-symbol,.transport #play[data-playing=false] .pause-symbol { display:none; }
.transport #speed { margin-left:auto; height:2.4cqh; min-height:22px; padding:0 .45cqw; border:0; background:transparent; font-size:clamp(10px,.72cqw,14px); color:var(--muted); }
.transport-timeline { display:flex; align-items:center; gap:.7cqw; min-width:0; }
.transport #position { min-width:5.4cqw; margin:0; font-size:clamp(10px,.68cqw,13px); color:var(--muted); white-space:nowrap; }
.transport #position::before { content:"Decision "; font-size:.85em; }
.transport #timeline { --played:0%; appearance:none; -webkit-appearance:none; flex:1; min-width:0; height:4px; margin:4px 0; border:0; border-radius:99px; background:linear-gradient(to right,var(--accent) 0 var(--played),#34413f var(--played) 100%); cursor:pointer; }
.transport #timeline::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; border:0; border-radius:50%; background:#e7d9b1; box-shadow:0 0 0 2px #141b18; }
.transport #timeline::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#e7d9b1; box-shadow:0 0 0 2px #141b18; }
.transport #timeline:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.transport #timeline:disabled { opacity:.4; cursor:default; }


/* Reward pickup: the game's centered sheet and icon rows, with card offers kept together. */
.battle-panel[data-rewards=true]>header { display:none; }
.reward-modal.recorded-screen {
  position:relative;
  align-self:center;
  flex:0 1 34cqw;
  width:min(100%,34cqw);
  max-height:calc(100% - 1.2cqh);
  margin:auto;
  padding:1.9cqh 2.1cqw 2cqh;
  gap:1cqh;
  overflow-y:auto;
  isolation:isolate;
}
.reward-sheet {
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  filter:drop-shadow(0 5px 9px #0008);
}
.reward-modal>h2 {
  text-align:center;
  font:700 1.35cqw/1.15 'StS Kreon',Georgia,serif;
  color:#f3e1b1;
  text-shadow:0 2px 2px #000;
}
.reward-modal .recorded-choices { flex:0 0 auto; flex-wrap:nowrap; gap:.6cqh; }
.reward-modal .option-row { flex-shrink:0; min-width:0; }
.reward-modal .reward-item-row {
  position:relative;
  display:grid;
  grid-template-columns:2.5cqw minmax(0,1fr);
  align-items:center;
  column-gap:.7cqw;
  min-height:5.5cqh;
  padding:.4cqh 1cqw .4cqh .7cqw;
  border:0;
  border-radius:3px;
  background:#73888732;
  overflow:visible;
}
.reward-modal .reward-item-row:not(:has(.reward-icon)) { grid-template-columns:minmax(0,1fr); }
.reward-modal .reward-item-row>strong {
  position:relative;
  z-index:1;
  padding-right:3.3cqw;
  font:700 .95cqw/1.15 'StS Kreon',Georgia,serif;
  color:#f0e9d5;
  text-shadow:0 1px 2px #000;
}
.reward-modal .reward-panel-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:fill;
  opacity:.12;
  pointer-events:none;
}
.reward-modal .reward-icon {
  position:relative;
  z-index:1;
  width:2.5cqw;
  height:4.4cqh;
  max-height:none;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px #0008);
}
.reward-modal .reward-item-row>.action-probability {
  top:50%;
  right:.6cqw;
  left:auto;
  transform:translateY(-50%);
  font-size:.67cqw;
}
.reward-modal .reward-row {
  display:flex;
  flex-shrink:0;
  flex-wrap:wrap;
  gap:.7cqw;
  padding:0;
  border:0;
  background:transparent;
}
.reward-modal .reward-card-choice {
  flex:1 0 0;
  min-width:0;
  padding:1.9cqh 0 .2cqh;
  border:0;
  background:transparent;
}
.reward-modal .reward-card-choice .choice-cards { flex:none; width:100%; height:calc(8cqw * 452 / 332); min-height:calc(8cqw * 452 / 332); }
.reward-modal .reward-card-choice .card-image { max-height:none; }
.reward-modal .reward-card-choice .card-chip {
  flex:none;
  width:8cqw;
  height:calc(8cqw * 452 / 332);
  min-height:calc(8cqw * 452 / 332);
  max-width:none;
  max-height:none;
}
.reward-modal .reward-card-choice>.action-probability {
  top:0;
  right:auto;
  left:50%;
  transform:translateX(-50%);
}
.reward-modal .reward-row>.reward-item-row { flex:1 1 100%; }
.reward-modal .recorded-choice.chosen { box-shadow:0 0 0 2px #e3c477,0 0 10px #e3c47755; }


/* Chests keep their source-game canvas scale and hitbox, including transparent texture padding. */
.battle-panel[data-chest=true] { display:block; }
.battle-panel[data-chest=true]>header { display:none; }
.battle-panel[data-chest=true] .battlefield { position:absolute; inset:0; display:block; padding:0; }
.chest-room { position:absolute; inset:0; }
.chest-player { position:absolute; left:9%; bottom:calc(37% - 8.3cqh); }
.chest-sprite { position:absolute; left:68.125%; bottom:calc(37% - 2.15cqh); width:17.2cqh; height:17.2cqh; transform:translateX(-50%); }
.chest-art { width:100%; height:100%; object-fit:contain; }
.chest-target { position:absolute; background:transparent; border:0; }
.chest-sprite:has(.chest-target.chosen) .chest-art,.chest-sprite:has(.chest-target:hover) .chest-art { filter:drop-shadow(0 0 5px #f5d887); }
.chest-target>.action-probability { position:absolute; left:50%; top:-2.6cqh; transform:translateX(-50%); }
.chest-exit { position:absolute; bottom:5%; right:5%; display:flex; gap:1cqw; }
.chest-proceed { position:relative; padding:.6cqh 1cqw; border:1px solid #a79157; border-radius:5px; background:#322b20dc; color:#f0dfb3; font-family:"StS Kreon",Georgia,serif; }


/* Rest Site: source scene, campfire icons, and paired menu positions. */
.battle-panel[data-rest=true] { display:block; }
.battle-panel[data-rest=true]>header { display:none; }
.battle-panel[data-rest=true] .battlefield { position:absolute; inset:0; display:block; padding:0; }
.rest-site { position:absolute; inset:0; overflow:hidden; }
.rest-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.rest-player { position:absolute; left:12%; bottom:26%; }
.rest-option { position:absolute; width:12%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-50%); color:#f0d392; border:0; background:none; box-shadow:none; }
.rest-option-art { width:100%; height:100%; object-fit:contain; }
.rest-option strong { position:absolute; top:91%; width:150%; text-align:center; font:700 clamp(9px,1cqw,18px)/1.1 "StS Kreon",Georgia,serif; text-shadow:0 2px 3px #000; }
.rest-option.unavailable { color:#b1b1b1; }
.rest-option.unavailable .rest-option-art { filter:grayscale(1); opacity:.65; }
.rest-option>.action-probability { top:0; left:50%; transform:translate(-50%,-70%); }


/* Shop items sit on the source-game rug: five cards above, colorless cards and wares below. */
.battle-panel[data-shop=true] { display:block; }
.battle-panel[data-shop=true]>header { display:none; }
.battle-panel[data-shop=true] .battlefield { position:absolute; inset:0; display:block; padding:0; }
.shop-room { position:absolute; inset:0; overflow:hidden; }
.shop-rug { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.shop-offer { position:absolute; display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-50%); border:0; background:none; box-shadow:none; }
.shop-card { width:11.5%; }
.shop-card .card-chip { width:100%; height:auto; max-width:none; max-height:none; }
.shop-relic { width:12%; }
.shop-potion { width:6%; }
.shop-item-art { width:70%; aspect-ratio:1; object-fit:contain; }
.shop-service { width:16%; }
.shop-service-art { width:100%; aspect-ratio:1; object-fit:contain; }
.shop-price { display:flex; align-items:center; justify-content:center; gap:.2cqw; margin-top:.1cqh; color:#fff3d5; font:700 clamp(9px,.85cqw,16px)/1 "StS Kreon",Georgia,serif; text-shadow:0 1px 3px #000; }
.shop-price img { width:1.35cqh; height:1.35cqh; object-fit:contain; }
.shop-offer.unavailable .shop-price { color:#f49d8f; }
.shop-offer>.action-probability { top:0; left:50%; transform:translate(-50%,-100%); }
.shop-unknown { font-size:.8cqw; color:#fff3d5; }


/* Source event dialog artwork; only recorded descriptions and choices are displayed. */
.battle-panel[data-event=true] { display:block; }
.battle-panel[data-event=true]>header { display:none; }
.battle-panel[data-event=true] .battlefield { position:absolute; inset:0; display:block; padding:0; }
.event-scene { position:absolute; inset:8% 2% 3%; }
.event-panel-art { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.event-portrait { position:absolute; left:5%; top:18%; width:32%; aspect-ratio:1; }
.event-subject { width:100%; height:100%; object-fit:contain; }
.event-image-frame { position:absolute; inset:-1%; width:102%; height:102%; object-fit:fill; pointer-events:none; filter:brightness(0); }
.event-dialog { position:absolute; left:40%; top:12%; right:6%; bottom:12%; display:flex; flex-direction:column; justify-content:center; gap:1cqh; min-height:0; }
.event-dialog h2,.event-scene>h2 { margin:0; font:700 clamp(13px,1.35cqw,24px)/1.1 "StS Kreon",Georgia,serif; color:#e5c87e; text-shadow:0 1px 3px #000; }
.event-scene>h2 { position:absolute; left:10%; top:4%; max-width:45%; color:#3b2c20; text-shadow:none; }
.event-detail { margin:0; font:clamp(10px,.95cqw,17px)/1.3 "StS Kreon",Georgia,serif; color:#e2d8bd; }
.event-options { display:flex; flex-direction:column; gap:.55cqh; min-height:0; overflow:auto; padding:.3cqh .3cqw .5cqh; }
.event-option { position:relative; flex:0 0 auto; display:flex; align-items:center; min-height:3.8cqh; border:0; background:none; box-shadow:none; color:#fff1d8; padding:.6cqh 1.15cqw .6cqh 3.2cqw; font:clamp(10px,.94cqw,17px)/1.25 "StS Kreon",Georgia,serif; }
.event-option-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter:brightness(.3); }
.event-option>span { position:relative; }
.event-option.unavailable { color:#daaca1; }
.event-option.unavailable .event-option-art { filter:none; }
.event-option>.action-probability { position:absolute; inset:auto auto auto .35cqw; z-index:1; transform:none; font-size:.72cqw; }
.event-scene.without-portrait .event-dialog { left:14%; right:14%; }
.neow-scene { inset:8% 3% 3%; }
.neow-scene .event-dialog { left:7%; right:49%; top:16%; bottom:15%; }
.neow-art { position:absolute; right:0; bottom:10%; width:46%; height:84%; }
.neow-scene .event-option { padding-left:3.2cqw; }

.studio-actions #brain-backend { max-width:10cqw; padding:.4cqh .3cqw; font-size:.75cqw; }

/* Potion inventory stays distinct from relics and reward pickups. */
.potion-belt { position:absolute; z-index:26; top:.4cqh; right:4cqw; display:flex; align-items:flex-start; gap:.35cqw; }
.potion-slot { position:relative; width:2.45cqw; min-height:5.8cqh; padding-top:4.2cqh; display:flex; flex-direction:column; align-items:center; }
.potion-trigger { position:absolute; top:0; left:0; width:100%; height:4.2cqh; padding:0; border:0; background:none; cursor:pointer; }
.potion-trigger:hover,.potion-trigger:focus-visible { background:none; filter:brightness(1.2); }
.potion-trigger img,.potion-slot.empty>.potion-slot-outline { position:absolute; inset:0; width:100%; height:4.2cqh; object-fit:contain; filter:drop-shadow(0 2px 3px #0009); }
.potion-slot-outline { opacity:.6; }
.potion-menu { position:absolute; z-index:30; top:100%; left:50%; transform:translateX(-50%); width:9.5cqw; aspect-ratio:400/338; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.potion-slot:hover>.potion-menu,.potion-slot:focus-within>.potion-menu,.potion-slot.menu-open>.potion-menu { visibility:visible; opacity:1; pointer-events:auto; }
.potion-slot.targeting>.potion-menu { visibility:hidden; opacity:0; pointer-events:none; }
.potion-menu:not(.has-art) { background:#292c2b; border-radius:8px; box-shadow:0 4px 10px #0009; }
.potion-menu-art { position:absolute; inset:0; width:100%; height:100%; }
.potion-menu-action { position:absolute; left:14%; width:72%; display:flex; align-items:center; justify-content:center; gap:.5cqw; font-family:var(--game-font, Georgia, serif); font-size:clamp(10px,.9cqw,18px); color:#fff4d7; }
.potion-use { top:20%; height:34%; }
.potion-discard { top:57%; height:28%; color:#efaaa0; }
.potion-menu-action.unavailable { opacity:1; color:#858783; }
.potion-menu-action strong { position:relative; font-weight:600; text-shadow:0 1px 2px #000; }
.potion-menu-hover { position:absolute; width:138.89%; height:auto; left:-19.44%; opacity:0; pointer-events:none; }
.potion-use>.potion-menu-hover { top:-58.82%; }
.potion-discard>.potion-menu-hover { top:-203.57%; }
.potion-menu-action:hover:not(.unavailable)>.potion-menu-hover,.potion-menu-action.chosen>.potion-menu-hover { opacity:.5; }
.potion-menu-action>.action-probability { position:relative; inset:auto; font-size:.72cqw; padding:0; background:none; box-shadow:none; transform:none; }
.potion-slot>.input-effect-dock { width:100%; display:flex; flex-direction:column; align-items:center; }
.potion-slot>.input-effect-dock .input-influence { font-size:clamp(8px,.62cqw,12px); padding:0 .1cqw; background:#111b18e8; }

/* Physical deck selection keeps the event/relic scene visible and the exact copies in place. */
.battle-panel[data-interaction=deck]::after { background:#0004; }
.card-zone[data-deck-selecting=true] { grid-template-rows:auto minmax(0,1fr) auto; border-color:#a7c1b4; box-shadow:0 0 0 1px #a7c1b455; }
#permanent-deck [data-deck-eligible=false] { opacity:.3; }
#permanent-deck [data-deck-eligible=true].chosen { filter:brightness(1.16); }
.deck-selection-controls { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.5cqw; padding:.4cqh .5cqw; font-size:.76cqw; }
.deck-selection-controls:empty { display:none; }
.deck-selection-controls>span { border:1px solid #a7c1b466; border-radius:4px; padding:.25cqh .5cqw; }
.event-selection-status,.deck-selection-caption { font:600 clamp(12px,1.2cqw,22px)/1.3 "StS Kreon",Georgia,serif; color:#ede3c8; }
.deck-selection-caption { align-self:center; margin:auto; }
#permanent-deck .card-chip>.action-probability { right:1%; top:2%; left:auto; transform:none; font-size:clamp(8px,.64cqw,12px); }

.battle-panel[data-interaction=deck]>header { display:none; }

/* A fixed five-column deck is independent of browser and card count. */
#permanent-deck .card-list { grid-template-columns:repeat(5,minmax(0,1fr)); }


/* Match and Keep uses the source game's four columns, three rows, and persistent holes. */
.battle-panel[data-match=true] { display:block; }
.battle-panel[data-match=true]>header { display:none; }
.battle-panel[data-match=true] .battlefield { position:absolute; inset:0; display:block; padding:0; }
.match-scene { position:absolute; inset:0; background:#05080c55; }
.match-scene>h2 { position:absolute; left:0; right:0; top:8%; margin:0; text-align:center; color:#ead4a4; font:700 1.4cqw "StS Kreon",Georgia,serif; text-shadow:0 2px 3px #000; }
.match-grid { position:absolute; left:29%; right:29%; top:18.5%; bottom:14.5%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:3cqh 1.5cqw; justify-items:center; align-items:center; container-type:size; }
.match-slot { position:relative; width:min(100%,calc((100cqh - 3.6cqh) / 3 * 332 / 452)); aspect-ratio:332 / 452; overflow:visible; }
.match-slot[data-face=removed] { pointer-events:none; }
.match-slot>.card-chip,.match-slot>.match-card-back { width:100%; height:100%; }
.match-card-back { position:relative; filter:drop-shadow(0 2px 3px #000a); }
.match-slot>.action-probability { top:3%; right:3%; bottom:auto; left:auto; transform:none; font-size:clamp(8px,.67cqw,13px); }
.match-slot>.input-effect-dock { position:absolute; top:100%; left:50%; transform:translateX(-50%); width:max-content; max-width:none; }
.match-status { position:absolute; left:0; right:0; bottom:5%; display:flex; justify-content:center; align-items:center; gap:1cqw; color:#eee3c4; font:700 .9cqw "StS Kreon",Georgia,serif; text-shadow:0 2px 2px #000; }
.match-attempts { position:relative; }
.match-attempts>.input-effect-dock { position:absolute; top:100%; left:0; right:0; }
.match-result { color:#e4d080; }
.match-result:empty { display:none; }
.match-continue { padding:.35cqh .8cqw; background:#241d16e8; border:1px solid #9d8256; border-radius:3px; }

.studio-brand { display: flex; align-items: center; gap: .85cqw; }
.page-tabs { display: flex; align-items: center; gap: .2cqw; }
.page-tabs a { padding: .35cqh .45cqw; border-radius: 4px; font-size: .8cqw; }
.page-tabs a[aria-current] { color: var(--ink); background: #303b3e; }