:root {
  color-scheme: dark;
  --ink: #101a2b;
  --deep: #091322;
  --paper: #f5edd8;
  --muted: #b7bac0;
  --gold: #d8b577;
  --gold-bright: #ffe2a1;
  --line: #7b735c;
  --mint: #86d5b1;
  --red: #f4988e;
  --blue: #a5ccec;
  --panel: linear-gradient(
    145deg,
    rgba(22, 36, 52, 0.97),
    rgba(8, 19, 33, 0.97)
  );
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 16px;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--deep);
  color: var(--paper);
}
html {
  overflow-x: clip;
}
body {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button,
input,
select {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled {
  cursor: default;
  opacity: 0.42;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
button,
input,
select {
  border-radius: 3px;
}
button {
  border: 1px solid #9a8a67;
  background: linear-gradient(#283748, #142333);
  padding: 0.66rem 1rem;
  box-shadow: inset 0 0 0 2px #101c28;
  transition:
    background 0.18s,
    transform 0.18s,
    border-color 0.18s;
}
button:hover:not(:disabled) {
  background: linear-gradient(#35485b, #23394b);
  border-color: var(--gold-bright);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
input,
select {
  width: 100%;
  min-height: 42px;
  background: #0b1928;
  color: var(--paper);
  border: 1px solid #778176;
  padding: 0.55rem 0.7rem;
}
input::placeholder {
  color: #9ca7ab;
}
label {
  display: block;
  font-size: 0.83rem;
  color: var(--muted);
}
label input,
label select {
  margin-top: 0.32rem;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
}
h2 {
  font-size: 2rem;
  line-height: 1.05;
}
h3 {
  font-size: 1.4rem;
}
p {
  line-height: 1.45;
}
small {
  font-size: 0.8rem;
}
strong {
  font-weight: 600;
}
a {
  color: var(--gold-bright);
}
.muted {
  color: var(--muted);
}
.gold {
  color: var(--gold-bright);
}
.positive {
  color: var(--mint);
}
.negative {
  color: var(--red);
}
.eyebrow {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.tiny {
  font-size: 0.73rem;
}
.primary {
  background: linear-gradient(#e7c88b, #b99055);
  color: #172434;
  border-color: #ffdfa0;
  box-shadow: inset 0 0 0 2px #bf9d63;
  font-weight: 600;
}
.primary:hover:not(:disabled) {
  background: linear-gradient(#ffe4ad, #cfaa6e);
  color: #101a2b;
}
.quiet {
  background: transparent;
  border-color: #647282;
  box-shadow: none;
}
.danger {
  color: var(--red);
}
.icon-button {
  display: grid;
  place-items: center;
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
}
.icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.17em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid #718073;
  border-radius: 99px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, #7b735c, transparent);
  margin: 1rem 0;
}
.empty-state {
  padding: 1.3rem;
  text-align: center;
  color: var(--muted);
}
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.world-shade {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 13, 25, 0.5),
    transparent 23%,
    transparent 58%,
    rgba(4, 12, 22, 0.73)
  );
  z-index: 1;
}
.topbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 62px;
  padding: 0.55rem 1.2rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(#091424f2, #101c2dde, transparent);
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}
.brand {
  font-family: Newsreader, serif;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  text-shadow: 0 2px 8px #000;
  background: none !important;
  box-shadow: none;
  border: 0;
  padding: 0.2rem 0;
}
.top-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.top-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.top-tools .icon-button {
  background: #122337d9;
  border-color: #9e967e;
  width: 34px;
  min-width: 34px;
  height: 34px;
}
.room-tag {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
#app {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  padding: 76px 24px 20px;
}
.screen {
  animation: screen-arrive 0.32s ease both;
}
.frame {
  position: relative;
  background: var(--panel);
  border: 1px solid #a09273;
  box-shadow:
    0 12px 45px #0006,
    inset 0 0 0 4px #152433,
    inset 0 0 0 5px #40515a;
  padding: 1.35rem;
}
.frame:before,
.frame:after {
  content: "◆";
  position: absolute;
  top: -9px;
  font-size: 12px;
  color: var(--gold);
  text-shadow: 0 1px #091424;
}
.frame:before {
  left: 12px;
}
.frame:after {
  right: 12px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.section-heading p {
  margin-top: 0.3rem;
}
.section-heading .eyebrow {
  margin-bottom: 0.4rem;
}
.scroll-panel {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #8f8a6a #102033;
}
.art-img {
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 3px #0006);
}
.art-placeholder {
  display: grid;
  place-items: center;
  color: #e5d5a0;
  font-size: 2rem;
  background: radial-gradient(ellipse, #45637344, transparent 65%);
}
.home {
  height: calc(100dvh - 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 2rem;
  align-items: center;
  max-width: 1340px;
  margin: auto;
}
.home-title {
  align-self: start;
  margin-top: clamp(30px, 9vh, 110px);
  pointer-events: none;
}
.home-title h1 {
  font-size: clamp(4rem, 8.7vw, 9rem);
  line-height: 1;
  color: var(--gold-bright);
  letter-spacing: -0.045em;
  text-shadow:
    0 3px 0 #263745,
    0 6px 20px #000,
    0 0 55px #071322;
}
.home-title .eyebrow {
  margin-left: 0.5rem;
  text-shadow: 0 2px 6px #000;
}
.home-title p:last-child {
  margin: 0.6rem 0 0 0.5rem;
  font-size: 1.05rem;
  max-width: 330px;
  text-shadow: 0 2px 8px #000;
}
.home-menu {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.2rem;
  background: linear-gradient(
    90deg,
    transparent,
    #0a1824b8 18%,
    #0a1824b8 82%,
    transparent
  );
  max-height: calc(100dvh - 120px);
  overflow: auto;
}
.menu-button {
  position: relative;
  text-align: left;
  font-family: Newsreader, serif;
  font-size: 1.6rem;
  min-height: 65px;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(90deg, #112235f5, #192e40f5);
  border-color: #b3a077;
  box-shadow:
    inset 0 0 0 3px #162738,
    0 5px 13px #0003;
}
.menu-button small {
  display: block;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}
.menu-button.primary {
  color: var(--paper);
  background: linear-gradient(90deg, #345050f7, #1c353ff7);
  border-color: #e0c58c;
}
.join-row {
  display: flex;
  gap: 0.4rem;
}
.join-row input {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.home-footnote {
  text-align: center;
  color: #ced0c9;
  font-size: 0.76rem;
  margin-top: 0.6rem;
  text-shadow: 0 1px 6px #000;
}
.connection-note {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #162a3b;
  color: var(--gold-bright);
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  z-index: 60;
  font-size: 0.8rem;
}
.lobby {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, 1.55fr) minmax(300px, 1fr);
  gap: 1rem;
  height: calc(100dvh - 96px);
}
.lobby-build {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lobby-build .scroll-panel {
  padding: 3px 4px 10px;
  flex: 1;
}
.identity-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.identity-fields .team-field {
  grid-column: 1/-1;
}
.selection-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 1.1rem 0 0.6rem;
}
.selection-label h3 {
  font-size: 1.22rem;
}
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
}
.portrait-choice {
  position: relative;
  padding: 0.4rem 0.18rem 0.5rem;
  height: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  background: radial-gradient(ellipse at 50% 40%, #34515d, #142232 80%);
  border-color: #4b6570;
  overflow: hidden;
}
.portrait-choice .art-img {
  width: 90%;
  height: 77px;
  object-fit: contain;
}
.portrait-choice span {
  font-size: 0.75rem;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portrait-choice:hover {
  transform: translateY(-3px);
}
.portrait-choice.selected {
  border: 2px solid var(--gold-bright);
  box-shadow:
    inset 0 0 0 2px #8f7446,
    0 0 15px #e9bd7322;
  background: radial-gradient(ellipse, #49616a, #203441 75%);
}
.portrait-choice.selected:after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2px;
  background: var(--gold-bright);
}
.pet-select-grid .portrait-choice {
  height: 130px;
}
.pet-select-grid .art-img {
  height: 90px;
  width: 95%;
}
.selection-preview {
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 0.6rem 0.8rem;
  margin: 0.7rem 0;
  background: #0a1826;
  border-left: 2px solid var(--gold);
  gap: 1rem;
}
.selection-preview p {
  font-size: 0.85rem;
  color: var(--muted);
}
.lobby-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}
.lobby-roster {
  flex: 1;
  min-height: 0;
}
.room-code {
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
}
.player-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.player-seat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #0a1928;
  border: 1px solid #526470;
  padding: 0.55rem 0.7rem;
  min-height: 59px;
}
.seat-avatar {
  width: 33px;
  height: 39px;
  object-fit: contain;
  image-rendering: pixelated;
}
.player-seat .seat-info {
  flex: 1;
  min-width: 0;
}
.seat-info strong,
.seat-info small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-info small {
  color: var(--muted);
}
.seat-status {
  font-size: 0.75rem;
  color: var(--gold);
  white-space: nowrap;
}
.player-seat .icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
}
.match-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.lobby-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.lobby-actions .primary {
  flex: 1;
}
.lobby-hint {
  min-height: 2.8rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.7rem;
}
.deploy {
  max-width: 1120px;
  margin: 0 auto;
  max-height: calc(100dvh - 96px);
  overflow: auto;
}
.deploy-intro {
  text-align: center;
  margin: 0 0 1.2rem;
  text-shadow: 0 2px 8px #000;
}
.deploy-intro h2 {
  font-size: 2.7rem;
}
.deploy-intro p {
  margin-top: 0.4rem;
}
.roster-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.pet-tile {
  position: relative;
  background: linear-gradient(150deg, #1b3347f5, #0b1727f7);
  border: 1px solid #6f807d;
  padding: 0.8rem;
  min-width: 0;
}
.pet-tile .pet-art {
  height: 120px;
  width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 4px #0008);
}
.pet-tile h3 {
  margin: 0.4rem 0 0.15rem;
}
.pet-tile .pet-desc {
  font-size: 0.78rem;
  min-height: 2.2rem;
  color: var(--muted);
}
.pet-tile.selected {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 0 0 2px #a78e58,
    0 0 25px #eac57c22;
}
.pet-tile .tile-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.6rem;
}
.tile-actions button {
  flex: 1;
  font-size: 0.82rem;
  padding: 0.45rem 0.5rem;
}
.pet-stats {
  display: flex;
  gap: 0.6rem;
  margin: 0.4rem 0;
  font-size: 0.8rem;
  color: var(--blue);
}
.deploy-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.deploy-split .roster-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deploy-split .roster-row:has(> :nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.deploy-split .pet-tile .pet-art {
  height: 105px;
}
.deploy-lock {
  text-align: center;
  margin-top: 1rem;
}
.deploy-lock button {
  min-width: 210px;
}
.deployment-wait {
  color: var(--gold-bright);
  padding: 0.8rem;
  min-height: 3rem;
}
.battle {
  height: calc(100dvh - 96px);
  position: relative;
}
.battle-heading {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  min-width: 210px;
  text-shadow: 0 2px 7px #000;
}
.battle-heading h2 {
  font-size: 1.6rem;
}
.battle-heading small {
  color: var(--gold);
}
.battle-status {
  height: 1.7rem;
  font-size: 0.78rem;
  margin-top: 0.28rem;
  color: var(--muted);
}
.combatant {
  position: absolute;
  top: clamp(115px, 26vh, 260px);
  width: clamp(215px, 23vw, 350px);
  filter: drop-shadow(0 2px 5px #0008);
}
.combatant.left {
  left: 6%;
}
.combatant.right {
  right: 6%;
}
.combatant-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.combatant-name h3 {
  font-size: 1.65rem;
  text-shadow: 0 2px 8px #000;
}
.combatant-name small {
  color: #e4d7b9;
  text-shadow: 0 2px 5px #000;
}
.health-shell {
  position: relative;
  padding: 4px 6px;
  height: 30px;
  border: 1px solid #c1af7f;
  background: #0e1c2e;
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
}
.health-fill {
  height: 20px;
  background: linear-gradient(#9bd1b0, #417e70);
  transition: width 0.45s ease;
  box-shadow: inset 0 2px #d7f3bc66;
}
.right .health-fill {
  background: linear-gradient(#ddaa99, #9f6466);
}
.health-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 1px 3px #122c28,
    0 -1px 3px #122c28;
}
.status-list {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.4rem;
  margin: 0.25rem 0.6rem;
  font-size: 0.8rem;
  text-shadow: 0 2px 5px #000;
}
.intent-line {
  position: relative;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  background: linear-gradient(90deg, #0a192ae8, #162c3de8);
  border: 1px solid #778777;
  padding: 0.5rem 0.7rem;
  margin-top: 0.35rem;
  min-height: 58px;
}
.intent-symbol {
  font-size: 1.55rem;
  color: var(--gold-bright);
  width: 30px;
  text-align: center;
}
.intent-copy {
  flex: 1;
  min-width: 0;
}
.intent-copy strong {
  display: block;
  font-size: 0.93rem;
}
.intent-copy small {
  display: block;
  color: #d0d5cc;
  font-size: 0.78rem;
}
.initiative-token {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #bca67a;
  border-radius: 50%;
  color: var(--gold-bright);
  background: #112331;
  font-size: 0.83rem;
}
.battle-tools {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 0.4rem;
}
.battle-tools button {
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  background: #0c1c2ce8;
}
.plan-feedback {
  position: absolute;
  bottom: clamp(240px, 29vh, 330px);
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  max-width: 60vw;
  min-height: 40px;
  text-align: center;
  font-size: 0.88rem;
  text-shadow: 0 2px 6px #000;
}
.plan-feedback strong {
  color: var(--gold-bright);
}
.hand-zone {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: min(850px, 78vw);
  height: 280px;
  pointer-events: none;
}
.hand {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  isolation: isolate;
  pointer-events: none;
}
.hand-slot {
  --hand-lift: -65px;
  --arc-angle: calc(var(--arc-index, 0) * 5deg);
  position: relative;
  width: clamp(120px, 12vw, 176px);
  height: 247px;
  margin: 0 -12px;
  transform: translateY(var(--arc-y, 0px)) rotate(var(--arc-angle, 0deg));
  transform-origin: center 160%;
  transition: transform 0.25s cubic-bezier(0.2, 0.75, 0.2, 1);
  pointer-events: auto;
  z-index: var(--card-z, 1);
}
.hand-slot:hover,
.hand-slot:focus-within {
  z-index: 30;
  transform: translateY(var(--arc-y, 0px)) rotate(var(--arc-angle, 0deg));
}
.hand-slot .game-card {
  width: 100%;
  height: 100%;
  transition:
    transform 0.16s ease,
    box-shadow 0.2s;
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}
.hand-slot:hover .game-card,
.hand-slot:focus-within .game-card {
  transform: translateY(var(--hand-lift))
    rotate(calc(-1 * var(--arc-angle, 0deg))) perspective(800px)
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow:
    0 15px 30px #0009,
    0 0 15px #edd59d33;
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #202c32;
  padding: 7px;
  background: linear-gradient(135deg, #dac399, #f0dfbc 45%, #bb9565);
  border: 1px solid #d9bd7b;
  border-radius: 7px;
  box-shadow:
    0 5px 10px #0006,
    inset 0 0 0 2px #3a5557;
  overflow: hidden;
  isolation: isolate;
}
.game-card:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #716e52;
  border-radius: 3px;
  pointer-events: none;
  z-index: 5;
}
.game-card:hover:not(:disabled) {
  color: #202c32;
  border-color: #ffedb8;
  background: linear-gradient(135deg, #ead4a6, #f6e8c7 45%, #c7a773);
}
.game-card:disabled {
  opacity: 1;
  filter: saturate(0.72);
}
.game-card:disabled .card-art {
  opacity: 0.75;
}
.card-topline {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  position: relative;
  z-index: 2;
}
.card-cost {
  flex: 0 0 25px;
  height: 25px;
  display: grid;
  place-items: center;
  font-size: 1.12rem;
  font-weight: 600;
  color: #fff4d6;
  text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 35% 25%, #70928b, #223e4a);
  border: 1px solid #f2e3a9;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #3c514f;
}
.card-title {
  font-family: Newsreader, serif;
  font-weight: 600;
  text-align: center;
  flex: 1;
  font-size: 0.89rem;
  line-height: 1.04;
  min-width: 0;
}
.card-speed {
  font-weight: 600;
  flex: 0 0 22px;
  text-align: center;
  font-size: 0.86rem;
}
.card-art {
  height: 100px;
  flex: 1;
  min-height: 55px;
  position: relative;
  overflow: hidden;
  border: 1px solid #7a7d63;
  margin-top: 4px;
  background: radial-gradient(ellipse at 50% 40%, #466773, #233b4c);
  border-radius: 3px;
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
.card-art-symbol {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.8rem;
  color: #e9cc91;
  text-shadow: 0 2px 8px #051a27;
}
.card-rules {
  font-size: 0.77rem;
  line-height: 1.18;
  min-height: 60px;
  padding: 6px 3px 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-rules .icon {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.3;
}
.card-footer {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475c58;
  text-align: center;
  line-height: 1.2;
  height: 15px;
  padding-top: 2px;
  flex-shrink: 0;
}
.game-card.queued {
  box-shadow:
    0 0 0 2px var(--gold-bright),
    0 5px 18px #0008;
}
.queued-stamp {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) rotate(-13deg);
  border: 3px double #7d312e;
  color: #7d312e;
  background: #f3debfe8;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.87rem;
  padding: 0.28rem 0.5rem;
  animation: stamp-in 0.22s ease both;
  pointer-events: none;
}
.queued-stamp.removing {
  animation: stamp-out 0.28s ease both;
}
.energy-constellation {
  position: absolute;
  bottom: 42px;
  left: max(0px, calc(50% - 540px));
  width: 128px;
  height: 135px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 12px #6dad9b33);
}
.energy-orbit {
  display: grid;
  place-items: center;
  width: 79px;
  height: 79px;
  border: 1px solid #cfb778;
  border-radius: 50%;
  box-shadow:
    inset 0 0 25px #71af9d55,
    0 0 0 6px #102c3966,
    0 0 0 7px #a99b6c77;
  background: radial-gradient(circle at 40% 30%, #477b78, #173442 65%, #071c2b);
  position: relative;
}
.energy-orbit:before,
.energy-orbit:after {
  content: "◆";
  position: absolute;
  color: var(--gold-bright);
  font-size: 9px;
}
.energy-orbit:before {
  top: -6px;
}
.energy-orbit:after {
  bottom: -6px;
}
.energy-number {
  font-family: Newsreader, serif;
  font-size: 2.4rem;
  color: #fff0c8;
  text-shadow: 0 0 10px #c6efe5;
  line-height: 1;
  padding-top: 0.12em;
}
.energy-pips {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}
.energy-pip {
  width: 17px;
  height: 17px;
  transform: rotate(45deg);
  border: 1px solid #a4b8a7;
  background: #759c8c;
  box-shadow: 0 0 7px #92decf88;
}
.energy-pip.spent {
  background: #203742;
  box-shadow: none;
  border-color: #526563;
}
.energy-caption {
  margin-top: 7px;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d3d2bb;
}
.lock-control {
  position: absolute;
  right: max(0px, calc(50% - 560px));
  bottom: 64px;
  width: 150px;
  text-align: center;
}
.lock-button {
  min-height: 66px;
  width: 150px;
  font-family: Newsreader, serif;
  font-size: 1.5rem;
  color: var(--gold-bright);
  background: linear-gradient(145deg, #284440, #162b3a);
  border: 1px solid #d7b773;
  clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
  box-shadow: inset 0 0 0 4px #244047;
  padding: 0.6rem 1.1rem;
}
.lock-control small {
  display: block;
  color: #c3cabb;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  min-height: 1rem;
}
.resolution-strip {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-start;
  width: max-content;
  gap: 0.65rem;
  max-width: 90vw;
  overflow: auto;
  padding: 10px;
}
.resolution-card {
  width: 130px;
  flex: 0 0 130px;
  position: relative;
  background: #112435;
  border: 1px solid #677c7b;
  padding: 0.45rem;
  opacity: 0.55;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.resolution-card.active {
  opacity: 1;
  transform: translateY(-7px);
  border-color: var(--gold-bright);
  box-shadow: 0 0 20px #e8c38033;
}
.resolution-card.done {
  opacity: 0.3;
}
.resolution-card.cancelled {
  pointer-events: none;
  animation: queue-break-fall 620ms ease-in forwards;
  border-color: #e19883;
}
.resolution-card.cancelled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffe7c2;
  clip-path: polygon(47% 0, 52% 26%, 42% 46%, 55% 64%, 49% 100%, 53% 100%, 60% 63%, 47% 46%, 57% 26%, 51% 0);
}
.queue-cancel-label {
  position: absolute;
  inset: 40% 0 auto;
  text-align: center;
  color: #fff0dd;
  background: #542c2be8;
  font-weight: 700;
  z-index: 1;
}
.reduced-motion .resolution-card.cancelled { animation: none; opacity: 0.2; }
@keyframes queue-break-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  20% { opacity: 1; transform: translateY(-6px) rotate(-5deg); }
  100% { opacity: 0; transform: translateY(110px) rotate(18deg); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .resolution-card.cancelled { animation: none; opacity: 0.2; }
}
.resolution-card img {
  display: block;
  width: 100%;
  height: 65px;
  object-fit: cover;
  image-rendering: pixelated;
  margin-bottom: 0.3rem;
}
.resolution-card strong {
  display: block;
  font-size: 0.83rem;
  line-height: 1.1;
}
.resolution-card small {
  font-size: 0.68rem;
  color: var(--muted);
}
.resolution-message {
  position: absolute;
  bottom: 170px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  max-width: 75vw;
  text-align: center;
  min-height: 60px;
  text-shadow: 0 2px 7px #000;
}
.resolution-message h3 {
  font-size: 1.9rem;
  color: var(--gold-bright);
  margin-bottom: 0.3rem;
}
.resolution-message p {
  font-size: 0.92rem;
}
.round-result {
  max-width: 680px;
  margin: 8vh auto 0;
  text-align: center;
}
.round-result h2 {
  font-size: 3rem;
}
.round-result .result-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.2rem 0;
}
.result-fact strong {
  display: block;
  font-size: 1.7rem;
  font-family: Newsreader, serif;
  color: var(--gold-bright);
}
.result-fact small {
  color: var(--muted);
}
.hand.discarding .hand-slot {
  animation: hand-discard 0.46s ease-in both;
  animation-delay: calc(var(--card-z) * 35ms);
  pointer-events: none;
}
.camp {
  max-width: 1320px;
  height: calc(100dvh - 96px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.camp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.camp-tabs {
  display: flex;
  gap: 0.35rem;
}
.camp-tabs button {
  font-size: 0.9rem;
  padding: 0.55rem 0.95rem;
}
.camp-tabs button.active {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  background: #2a4146;
}
.camp-tabs .tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
}
.camp-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 4px 8px;
}
.draft-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1rem;
  height: 100%;
  min-height: 440px;
}
.draft-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.draft-aside h3 {
  margin-bottom: 0.5rem;
}
.draft-aside p {
  font-size: 0.85rem;
  color: var(--muted);
}
.draft-picks {
  display: flex;
  gap: 6px;
  margin: 0.7rem 0;
}
.draft-pick {
  width: 20px;
  height: 20px;
  border: 1px solid #9a8a66;
  transform: rotate(45deg);
  background: #142736;
}
.draft-pick.done {
  background: var(--gold);
  box-shadow: 0 0 10px #dcc58555;
}
.draft-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.draft-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.draft-cards .game-card {
  width: 180px;
  height: 280px;
  flex-shrink: 0;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.draft-cards .game-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 14px 25px #0008,
    0 0 16px #dcc28033;
}
.draft-cards .card-rules {
  font-size: 0.88rem;
  min-height: 80px;
}
.draft-cards .card-title {
  font-size: 1rem;
}
.draft-wait {
  text-align: center;
  padding: 3rem 1rem;
}
.camp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid #778170;
  padding: 1rem 0 0;
  margin-top: 0.6rem;
  min-height: 63px;
}
.camp-footer p {
  font-size: 0.84rem;
  color: var(--muted);
}
.camp-footer .primary {
  min-width: 190px;
}
.deck-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.deck-column {
  min-width: 0;
}
.deck-column .section-heading {
  margin-bottom: 0.8rem;
}
.card-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.card-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  min-height: 55px;
  background: #102131;
  border: 1px solid #4d6570;
  padding: 0.4rem 0.55rem;
}
.card-row img {
  width: 46px;
  height: 40px;
  object-fit: cover;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.card-row-main {
  min-width: 0;
  flex: 1;
}
.card-row-main strong {
  display: block;
  color: var(--paper);
  font-size: 0.9rem;
}
.card-row-main small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}
.card-row .row-cost {
  color: var(--gold-bright);
  font-size: 1rem;
  width: 16px;
  text-align: center;
}
.card-row .icon-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
}
.development-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1rem;
}
.roster-rail {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.roster-mini {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  min-height: 78px;
  padding: 0.5rem 0.7rem;
}
.roster-mini .art-img {
  width: 65px;
  height: 63px;
}
.roster-mini .mini-text {
  flex: 1;
  min-width: 0;
}
.roster-mini strong,
.roster-mini small {
  display: block;
}
.roster-mini small {
  color: var(--muted);
  font-size: 0.74rem;
}
.roster-mini.active {
  border-color: var(--gold-bright);
  background: #2a424c;
}
.development-main {
  min-width: 0;
}
.part-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1rem;
}
.part-row {
  padding: 0.65rem 0.8rem;
  background: #0c1b2b;
  border: 1px solid #4d6671;
}
.part-row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.part-row-heading h4 {
  font-size: 1.05rem;
}
.part-row-heading small {
  color: var(--gold);
}
.part-cards {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.45rem 0;
  font-size: 0.75rem;
  color: var(--blue);
}
.part-cards span {
  padding: 0.2rem 0.45rem;
  background: #1d3545;
  border: 1px solid #46606a;
}
.mutation-option {
  border-top: 1px solid #3a515e;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.mutation-option > div {
  flex: 1;
}
.mutation-option p {
  font-size: 0.79rem;
  color: var(--muted);
}
.mutation-option button {
  font-size: 0.79rem;
  padding: 0.4rem 0.65rem;
}
.criteria-track {
  height: 3px;
  background: #263c4b;
  margin-top: 0.35rem;
}
.criteria-track span {
  display: block;
  height: 100%;
  background: var(--gold);
}
.pet-actions {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}
.pet-actions button.active {
  border-color: var(--gold);
  background: #2b444c;
}
.recruit-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.fusion-slots {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0;
}
.fusion-plus {
  text-align: center;
  font-family: Newsreader, serif;
  color: var(--gold);
  font-size: 2rem;
}
.fusion-result {
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, #344750, #18293c);
  padding: 1rem;
  margin: 1rem 0;
}
.fusion-result-header {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.fusion-result-header img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  image-rendering: pixelated;
}
.inheritance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.75rem 0;
}
.inheritance-option {
  padding: 0.5rem;
  text-align: left;
  font-size: 0.8rem;
}
.inheritance-option.selected {
  border-color: var(--gold-bright);
  background: #39514e;
}
.inheritance-option small {
  display: block;
  color: var(--muted);
}
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.standings-table th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.5rem;
  border-bottom: 1px solid #66716b;
}
.standings-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #324956;
}
.standings-table tr.you {
  background: #263d46;
}
.standings-table .rank {
  font-family: Newsreader, serif;
  font-size: 1.4rem;
  color: var(--gold);
}
.standings-table .score {
  text-align: right;
  font-weight: 600;
  color: var(--gold-bright);
}
.end-screen {
  max-width: 850px;
  margin: 3vh auto;
}
.end-screen h2 {
  font-size: 3rem;
  text-align: center;
}
.end-screen > .eyebrow {
  text-align: center;
  margin-bottom: 0.5rem;
}
.end-screen > .button-row {
  justify-content: center;
  margin-top: 1.5rem;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #030a13b8;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.18s ease;
}
.modal {
  width: min(720px, 100%);
  max-height: 90dvh;
  overflow: auto;
  padding: 1.7rem;
}
.modal.wide {
  width: min(1050px, 100%);
}
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.modal h2 {
  padding-right: 35px;
  margin-bottom: 0.8rem;
}
.modal p {
  color: var(--muted);
  margin: 0.55rem 0;
}
.modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0;
}
.guide-step {
  background: #0b1b2c;
  border: 1px solid #536b71;
  padding: 0.85rem;
}
.guide-step .step-number {
  font-family: Newsreader, serif;
  font-size: 1.5rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
}
.guide-step h3 {
  font-size: 1.15rem;
}
.guide-step p {
  font-size: 0.86rem;
  margin-bottom: 0;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid #3b5360;
}
.settings-row label {
  font-size: 1rem;
  color: var(--paper);
}
.settings-row small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}
.settings-row input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  accent-color: var(--gold);
}
.pet-detail-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.pet-detail-head img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
}
.pet-detail-head p {
  font-size: 0.86rem;
}
.pet-deck-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}
.pet-deck-card {
  padding: 0.6rem;
  background: #142a3a;
  border: 1px solid #607571;
  min-height: 105px;
}
.pet-deck-card strong {
  display: block;
  color: var(--gold-bright);
  font-size: 0.83rem;
}
.pet-deck-card p {
  font-size: 0.76rem;
  line-height: 1.25;
}
.toast {
  position: fixed;
  z-index: 150;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 15px);
  max-width: min(580px, 90vw);
  padding: 0.7rem 1.2rem;
  background: #142c3bf5;
  border: 1px solid var(--gold);
  box-shadow: 0 6px 20px #0007;
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  text-align: center;
  font-size: 0.9rem;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.announcement {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  pointer-events: none;
  place-items: center;
  background: radial-gradient(ellipse, #09192bd9, #09192b44 65%, transparent);
}
.announcement.visible {
  display: grid;
}
.versus-splash {
  width: min(950px, 90vw);
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  text-align: center;
  animation: versus-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.versus-team h2 {
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  color: var(--paper);
  text-shadow: 0 2px 10px #000;
  margin-top: 0.5rem;
}
.versus-team p {
  color: var(--gold);
}
.versus-team img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 12px #0008);
}
.versus-mark {
  font-family: Newsreader, serif;
  font-style: italic;
  font-size: 5rem;
  color: var(--gold-bright);
  text-shadow:
    0 3px #705e44,
    0 0 40px #b29663;
}
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at 50% 42%, #243e4f, #0a1527 65%);
  text-align: center;
  transition: opacity 0.45s ease;
}
.loading-screen.ready {
  opacity: 0;
  pointer-events: none;
}
.loading-screen h1 {
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 1.1;
  color: var(--gold-bright);
  letter-spacing: -0.03em;
}
.loading-stars {
  color: var(--gold);
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: star-breathe 2s ease-in-out infinite;
}
.loading-message {
  height: 3.3rem;
  max-width: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 1.2rem;
}
.loading-track {
  width: min(320px, 75vw);
  height: 5px;
  background: #243d50;
  overflow: hidden;
  border: 1px solid #71816e;
}
.loading-track span {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--gold);
  animation: loading-progress 1.6s ease-in-out infinite;
}
.loading-foot {
  position: absolute;
  bottom: 8vh;
  color: #aeb7b5;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
@keyframes screen-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes stamp-in {
  from {
    opacity: 0;
    scale: 1.7;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes stamp-out {
  to {
    opacity: 0;
    transform: translate(-50%, -80%) rotate(-24deg);
    scale: 1.3;
  }
}
@keyframes hand-discard {
  to {
    transform: translate(50vw, 45vh) rotate(65deg);
    opacity: 0;
  }
}
@keyframes versus-in {
  from {
    opacity: 0;
    transform: scale(1.13);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes star-breathe {
  50% {
    opacity: 0.45;
    transform: scale(0.92);
  }
}
@keyframes loading-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(400%);
  }
}
@media (min-width: 1600px) {
  .hand-zone {
    height: 310px;
  }
  .hand-slot {
    width: 190px;
    height: 285px;
    margin: 0 -9px;
  }
  .game-card .card-title {
    font-size: 1rem;
  }
  .game-card .card-rules {
    font-size: 0.86rem;
  }
  .card-art {
    min-height: 110px;
  }
  .combatant {
    top: 26vh;
  }
  .energy-constellation {
    left: calc(50% - 590px);
  }
  .lock-control {
    right: calc(50% - 620px);
  }
}
@media (max-width: 1100px) {
  .lobby {
    grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr);
  }
  .portrait-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .portrait-choice {
    height: 90px;
  }
  .portrait-choice .art-img {
    height: 59px;
  }
  .pet-select-grid .portrait-choice {
    height: 105px;
  }
  .pet-select-grid .art-img {
    height: 70px;
  }
  .combatant.left {
    left: 1%;
  }
  .combatant.right {
    right: 1%;
  }
  .combatant {
    width: 27vw;
  }
  .hand-zone {
    width: 75vw;
  }
  .hand-slot {
    width: 145px;
    height: 225px;
    margin: 0 -17px;
  }
  .card-title {
    font-size: 0.83rem;
  }
  .card-rules {
    font-size: 0.73rem;
  }
  .energy-constellation {
    left: 0;
    width: 90px;
    bottom: 38px;
  }
  .energy-orbit {
    width: 64px;
    height: 64px;
  }
  .lock-control {
    right: 0;
    width: 113px;
    bottom: 58px;
  }
  .lock-button {
    width: 113px;
    font-size: 1.22rem;
    min-height: 58px;
  }
  .draft-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .draft-cards {
    gap: 0.6rem;
  }
  .draft-cards .game-card {
    width: 160px;
    height: 260px;
  }
  .development-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .pet-deck-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .pet-deck-card {
    padding: 0.4rem;
  }
  .combatant-name h3 {
    font-size: 1.35rem;
  }
}
@media (max-width: 760px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #app {
    padding: 66px 12px 14px;
    min-height: 100dvh;
  }
  .topbar {
    height: 55px;
    padding: 0.45rem 0.8rem;
  }
  .brand {
    font-size: 1.35rem;
  }
  .top-center {
    font-size: 0.73rem;
  }
  .top-tools {
    gap: 0.3rem;
  }
  .top-tools .icon-button {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }
  .room-tag {
    display: none;
  }
  .home {
    height: calc(100dvh - 90px);
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    max-width: 520px;
  }
  .home-title {
    margin-top: 3vh;
    align-self: start;
    text-align: center;
  }
  .home-title h1 {
    font-size: clamp(4rem, 15vw, 6rem);
  }
  .home-title .eyebrow {
    font-size: 0.65rem;
  }
  .home-title p:last-child {
    font-size: 0.9rem;
    margin: 0.4rem auto;
  }
  .home-menu {
    width: min(360px, 100%);
    margin: auto;
    padding: 1rem;
    gap: 0.45rem;
    background: linear-gradient(
      90deg,
      transparent,
      #0a1824dd 8%,
      #0a1824dd 92%,
      transparent
    );
  }
  .menu-button {
    min-height: 52px;
    font-size: 1.3rem;
    padding: 0.6rem 1rem;
  }
  .menu-button small {
    font-size: 0.72rem;
  }
  .home-footnote {
    font-size: 0.68rem;
  }
  .lobby {
    height: auto;
    display: flex;
    flex-direction: column;
    max-width: 560px;
  }
  .lobby-build .scroll-panel {
    overflow: visible;
  }
  .lobby-build {
    order: 2;
  }
  .lobby-meta {
    display: contents;
  }
  .lobby-roster {
    order: 1;
  }
  .lobby-settings {
    order: 3;
  }
  .frame {
    padding: 1.1rem;
  }
  .portrait-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.3rem;
  }
  .portrait-choice {
    height: 86px;
  }
  .portrait-choice .art-img {
    height: 54px;
  }
  .portrait-choice span {
    font-size: 0.63rem;
  }
  .pet-select-grid .portrait-choice {
    height: 95px;
  }
  .pet-select-grid .art-img {
    height: 65px;
  }
  .player-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .player-seat {
    padding: 0.45rem;
    gap: 0.4rem;
    min-height: 53px;
  }
  .seat-info strong {
    font-size: 0.81rem;
  }
  .seat-info small {
    font-size: 0.67rem;
  }
  .seat-status {
    font-size: 0.65rem;
  }
  .seat-avatar {
    width: 23px;
    height: 31px;
  }
  .section-heading h2 {
    font-size: 1.7rem;
  }
  .deploy {
    max-height: none;
  }
  .deploy-intro h2 {
    font-size: 2rem;
  }
  .deploy-split {
    grid-template-columns: 1fr;
  }
  .deploy-split .roster-row,
  .deploy-split .roster-row:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pet-tile {
    padding: 0.55rem;
  }
  .pet-tile h3 {
    font-size: 1.1rem;
  }
  .pet-tile .pet-desc {
    font-size: 0.7rem;
  }
  .deploy-split .pet-tile .pet-art {
    height: 80px;
  }
  .pet-stats {
    font-size: 0.71rem;
    gap: 0.35rem;
  }
  .tile-actions button {
    font-size: 0.71rem;
    padding: 0.4rem 0.25rem;
  }
  .battle {
    height: calc(100dvh - 80px);
    min-height: 510px;
  }
  .battle-heading {
    top: 0;
    min-width: 160px;
  }
  .battle-heading h2 {
    font-size: 1.2rem;
  }
  .battle-heading .eyebrow {
    font-size: 0.6rem;
  }
  .battle-tools {
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .battle-tools button {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }
  .combatant {
    top: 23%;
    width: 43%;
  }
  .combatant.left {
    left: 0;
  }
  .combatant.right {
    right: 0;
  }
  .combatant-name {
    display: block;
  }
  .combatant-name h3 {
    font-size: 1.1rem;
  }
  .combatant-name small {
    font-size: 0.67rem;
    display: block;
  }
  .health-shell {
    height: 25px;
    padding: 3px 5px;
  }
  .health-fill {
    height: 17px;
  }
  .health-text {
    font-size: 0.77rem;
  }
  .status-list {
    font-size: 0.68rem;
    gap: 0.35rem;
    margin: 0.2rem 0.25rem;
  }
  .intent-line {
    padding: 0.35rem 0.4rem;
    gap: 0.25rem;
    min-height: 64px;
  }
  .intent-symbol {
    font-size: 1.1rem;
    width: 20px;
  }
  .intent-copy strong {
    font-size: 0.75rem;
  }
  .intent-copy small {
    font-size: 0.64rem;
  }
  .initiative-token {
    width: 23px;
    height: 23px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }
  .plan-feedback {
    bottom: 235px;
    width: 90%;
    max-width: 90%;
    font-size: 0.77rem;
    min-height: 34px;
  }
  .hand-zone {
    width: calc(100vw - 12px);
    height: 200px;
    bottom: 0;
  }
  .hand-slot {
    width: 110px;
    height: 175px;
    margin: 0 -18px;
  }
  .hand-slot:hover,
  .hand-slot:focus-within {
    transform: translateY(-42px) rotate(0);
  }
  .game-card {
    padding: 5px;
    border-radius: 5px;
  }
  .game-card:before {
    inset: 3px;
  }
  .card-topline {
    min-height: 24px;
    gap: 2px;
  }
  .card-cost {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 0.85rem;
  }
  .card-title {
    font-size: 0.68rem;
  }
  .card-speed {
    font-size: 0.67rem;
    flex-basis: 17px;
  }
  .card-art {
    min-height: 42px;
    margin-top: 2px;
  }
  .card-art-symbol {
    font-size: 1.8rem;
  }
  .card-rules {
    font-size: 0.64rem;
    line-height: 1.14;
    min-height: 49px;
    padding: 3px 2px;
  }
  .card-footer {
    font-size: 0.46rem;
    height: 12px;
  }
  .queued-stamp {
    font-size: 0.65rem;
    padding: 0.2rem 0.3rem;
  }
  .energy-constellation {
    bottom: 175px;
    left: 4px;
    width: 65px;
    height: 66px;
  }
  .energy-orbit {
    width: 45px;
    height: 45px;
  }
  .energy-number {
    font-size: 1.6rem;
  }
  .energy-pips {
    gap: 5px;
    margin-top: 8px;
  }
  .energy-pip {
    width: 13px;
    height: 13px;
  }
  .energy-caption {
    display: none;
  }
  .lock-control {
    right: 4px;
    bottom: 178px;
    width: 98px;
  }
  .lock-button {
    width: 98px;
    min-height: 43px;
    font-size: 1.12rem;
    padding: 0.4rem 0.5rem;
  }
  .lock-control small {
    font-size: 0.61rem;
    margin-top: 0.25rem;
  }
  .resolution-strip {
    bottom: 10px;
    gap: 0.4rem;
    max-width: 98vw;
  }
  .resolution-card {
    width: 94px;
    flex-basis: 94px;
    padding: 0.3rem;
  }
  .resolution-card img {
    height: 50px;
  }
  .resolution-card strong {
    font-size: 0.73rem;
  }
  .resolution-card small {
    font-size: 0.6rem;
  }
  .resolution-message {
    bottom: 160px;
    max-width: 90%;
    font-size: 0.8rem;
  }
  .resolution-message h3 {
    font-size: 1.5rem;
  }
  .round-result {
    margin-top: 12vh;
  }
  .round-result h2 {
    font-size: 2.2rem;
  }
  .camp {
    height: auto;
    min-height: calc(100dvh - 90px);
  }
  .camp-nav {
    gap: 0.7rem;
  }
  .camp-tabs {
    width: 100%;
    overflow: auto;
  }
  .camp-tabs button {
    flex: 1;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.45rem 0.5rem;
  }
  .camp-content {
    overflow: visible;
  }
  .draft-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .draft-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .draft-aside .frame {
    padding: 0.75rem;
  }
  .draft-aside p {
    font-size: 0.73rem;
  }
  .draft-aside h3 {
    font-size: 1.1rem;
  }
  .draft-cards {
    gap: 0.7rem;
    padding: 0.6rem 0;
  }
  .draft-cards .game-card {
    width: 145px;
    height: 240px;
  }
  .draft-cards .card-rules {
    font-size: 0.8rem;
    min-height: 66px;
  }
  .draft-cards .card-title {
    font-size: 0.87rem;
  }
  .draft-cards .card-art {
    min-height: 85px;
  }
  .camp-footer {
    position: sticky;
    bottom: 0;
    background: #0d1d2cef;
    padding: 0.65rem;
    z-index: 15;
    gap: 0.5rem;
  }
  .camp-footer p {
    font-size: 0.73rem;
  }
  .camp-footer .primary {
    min-width: 135px;
    font-size: 0.85rem;
  }
  .deck-layout {
    grid-template-columns: 1fr;
  }
  .development-layout {
    grid-template-columns: 1fr;
  }
  .roster-rail {
    flex-direction: row;
    overflow: auto;
  }
  .roster-mini {
    min-width: 145px;
    padding: 0.45rem;
    gap: 0.3rem;
  }
  .roster-mini .art-img {
    width: 42px;
    height: 45px;
  }
  .roster-mini strong {
    font-size: 0.83rem;
  }
  .roster-mini small {
    font-size: 0.63rem;
  }
  .recruit-offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recruit-offers .pet-tile:last-child {
    grid-column: 1/-1;
  }
  .recruit-offers .pet-tile .pet-art {
    height: 90px;
  }
  .pet-deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pet-detail-head img {
    width: 95px;
    height: 100px;
  }
  .pet-detail-head {
    gap: 0.7rem;
  }
  .pet-detail-head h2 {
    font-size: 1.5rem;
  }
  .modal {
    padding: 1.2rem;
  }
  .modal-backdrop {
    padding: 10px;
  }
  .modal h2 {
    font-size: 1.65rem;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .guide-step {
    padding: 0.7rem;
  }
  .guide-step .step-number {
    float: left;
    width: 28px;
    font-size: 1.2rem;
  }
  .guide-step h3 {
    font-size: 1.05rem;
  }
  .guide-step p {
    font-size: 0.8rem;
    margin: 0.3rem 0 0 28px;
  }
  .versus-splash {
    grid-template-columns: 1fr 55px 1fr;
  }
  .versus-team img {
    height: 150px;
  }
  .versus-team h2 {
    font-size: 1.6rem;
  }
  .versus-mark {
    font-size: 3rem;
  }
  .end-screen h2 {
    font-size: 2.3rem;
  }
  .standings-table {
    font-size: 0.8rem;
  }
  .identity-fields {
    gap: 0.5rem;
  }
  .fusion-result-header img {
    width: 85px;
    height: 85px;
  }
  .inheritance-grid {
    grid-template-columns: 1fr;
  }
  .fusion-slots {
    grid-template-columns: 1fr 25px 1fr;
    gap: 0.25rem;
  }
}
@media (max-width: 390px) {
  .portrait-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hand-slot {
    width: 103px;
    margin: 0 -19px;
  }
  .card-rules {
    font-size: 0.61rem;
  }
  .draft-cards .game-card {
    width: 135px;
    height: 230px;
  }
  .top-center {
    display: none;
  }
  .deploy-split .roster-row,
  .deploy-split .roster-row:has(> :nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .combatant {
    width: 45%;
  }
  .combatant-name h3 {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body.reduced-motion *,
body.reduced-motion *:before,
body.reduced-motion *:after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
.phase-clock {
  font-size: 0.75rem;
  color: var(--gold);
  margin-left: 0.65rem;
}
.hand-zone {
  bottom: 22px;
}
.card-rule-text {
  display: block;
}
.card-art > .art-img {
  width: 100%;
  height: 100%;
}
.versus-team > .art-img {
  width: 100%;
  height: 250px;
}
.fusion-result-header > .art-img {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}
.pet-detail-head > .art-img {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.card-row > .art-img {
  width: 46px;
  height: 40px;
  flex-shrink: 0;
}
.resolution-card > .art-img {
  width: 100%;
  height: 65px;
}
.mutation-option .icon-button {
  flex-shrink: 0;
}
.mutation-option:has(button[aria-label^="Unpin"]) {
  border-left: 2px solid var(--gold);
  padding-left: 0.4rem;
}
@media (max-width: 760px) {
  .hand-zone {
    bottom: 16px;
  }
  .versus-team > .art-img {
    height: 150px;
  }
  .fusion-result-header > .art-img {
    width: 85px;
    height: 85px;
  }
  .pet-detail-head > .art-img {
    width: 95px;
    height: 100px;
  }
  .resolution-card > .art-img {
    height: 50px;
  }
}
[hidden] {
  display: none !important;
}
body {
  overflow-x: hidden;
}
@media (max-width: 760px) {
  body[data-phase="combat"] {
    overflow: hidden;
  }
  .hand-zone {
    width: 100%;
    bottom: 22px;
  }
  .hand-slot {
    width: 90px;
    margin: 0 -20px;
    flex-shrink: 0;
  }
  .hand-slot:nth-child(1) {
    --arc-angle: -6deg !important;
  }
  .hand-slot:nth-child(2) {
    --arc-angle: -3deg !important;
  }
  .hand-slot:nth-child(4) {
    --arc-angle: 3deg !important;
  }
  .hand-slot:nth-child(5) {
    --arc-angle: 6deg !important;
  }
  .battle-heading {
    width: 90%;
    min-width: 0;
  }
  .battle-tools {
    top: 66px;
  }
  .battle-heading > .eyebrow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .plan-feedback {
    bottom: 250px;
  }
  .card-title {
    font-size: 0.64rem;
  }
  .card-cost {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
  }
  .card-speed {
    flex-basis: 17px;
    font-size: 0.64rem;
  }
  .card-rules {
    font-size: 0.62rem;
  }
  .card-footer {
    font-size: 0.44rem;
  }
}
.modal .result-facts {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
}
.combatant {
  top: 8vh;
}
.plan-feedback {
  bottom: 295px;
}
.intent-line {
  min-height: 55px;
}
.battle-heading {
  top: 0;
}
@media (min-width: 1600px) {
  .combatant {
    top: 9vh;
  }
  .plan-feedback {
    bottom: 335px;
  }
}
@media (max-width: 760px) {
  .combatant {
    top: 17%;
    width: 43%;
  }
  .plan-feedback {
    bottom: 246px;
  }
  .battle-heading {
    top: 0;
  }
  .battle-tools {
    gap: 0.3rem;
  }
  .battle-tools button {
    font-size: 0.65rem;
    padding: 0.3rem 0.35rem;
  }
}
.pet-deck-card .pet-move-art {
  height: 70px;
  width: 100%;
  margin-bottom: 0.5rem;
  background-size: cover !important;
  border: 1px solid #576962;
}
.intent-copy strong {
  overflow-wrap: anywhere;
}
.intent-copy small {
  overflow-wrap: anywhere;
}
.topbar .phase-clock {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .mutation-option {
    flex-wrap: wrap;
  }
  .mutation-option > div {
    flex-basis: 100%;
  }
  .mutation-option .icon-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  .part-row {
    padding: 0.6rem;
  }
  .recruit-offers {
    grid-template-columns: 1fr 1fr;
  }
  .modal .result-facts {
    gap: 1rem;
  }
}
.deploy-split .roster-row {
  grid-template-columns: repeat(
    var(--roster-count, 2),
    minmax(0, 1fr)
  ) !important;
}
.deploy-split .roster-row:has(> .pet-tile:only-child) {
  max-width: 350px;
  margin: 0 auto;
  width: 100%;
}
.card-title {
  overflow-wrap: anywhere;
}
.camp-nav > .button-row > [data-action="standings"] {
  min-width: 42px;
}

/* Decision feedback occupies reserved space; changing rules text never moves the hand. */
.plan-feedback {
  width: min(480px, 40vw);
  max-width: 40vw;
  height: 108px;
  min-height: 108px;
  top: 108px;
  bottom: auto;
  padding: 0.3rem 0.6rem;
  background: linear-gradient(135deg, #0a1828ef, #172d3dec);
  border: 1px solid #7d896f;
  box-shadow: 0 8px 22px #06111b66;
  text-align: left;
  overflow: hidden;
  z-index: 8;
}
.forecast-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 21px;
}
.forecast-heading > strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}
.forecast-heading button {
  padding: 0.16rem 0.35rem;
  flex-shrink: 0;
  font-size: 0.68rem;
}
.forecast-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  min-height: 38px;
}
.forecast-sides > div {
  display: flex;
  align-content: start;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  min-width: 0;
}
.forecast-sides > div > strong {
  flex-basis: 100%;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forecast-sides span {
  white-space: nowrap;
}
.forecast-sides small {
  font-size: 0.65rem;
  color: var(--muted);
}
.delta-arrow {
  color: #a2c4b7;
}
.forecast-warnings {
  max-height: 15px;
  overflow: auto;
  color: #f0bc94;
  font-size: 0.69rem;
  line-height: 1.25;
  margin: 0.25rem 0;
}
.forecast-warnings > span {
  display: block;
}
.forecast-uncertainty {
  display: block;
  color: #d7dacb;
  font-size: 0.65rem;
  line-height: 1.2;
}
.forecast-detail {
  margin: 1rem 0;
  padding: 1rem;
  background: #0b1c2c;
  border: 1px solid #60776e;
}
.forecast-detail .forecast-heading button {
  display: none;
}
.forecast-detail .forecast-warnings {
  max-height: none;
  font-size: 0.88rem;
}
.forecast-detail .forecast-sides {
  margin: 0.5rem 0;
  font-size: 1rem;
}
.forecast-detail .forecast-sides > div {
  font-size: 1rem;
}
.forecast-order {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  margin: 0.8rem 0 1.2rem;
}
.forecast-order li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.55rem;
  background: #102636;
  border-left: 2px solid #9fa98b;
}
.forecast-order li > span {
  grid-row: span 2;
  align-self: center;
  color: var(--gold-bright);
}
.forecast-order li > small {
  color: var(--muted);
}
.retain-button {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.22rem 0.55rem;
  border-radius: 20px;
  background: #102737;
  box-shadow: 0 3px 8px #0009;
  min-width: 69px;
  font-size: 0.68rem;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s;
}
.retain-button:active:not(:disabled) {
  /* The generic button press must preserve this control's horizontal anchor. */
  transform: translateX(-50%) translateY(1px);
}
.hand-slot:hover .retain-button,
.hand-slot:focus-within .retain-button,
.hand-slot.retained .retain-button {
  opacity: 1;
}
.hand-slot.retained .game-card {
  border-color: #b5d7b9;
  box-shadow: 0 0 16px #a2d6bf66;
}
.hand-slot.carried .retain-button {
  opacity: 1;
}
.hand-slot.carried .game-card {
  border-top-color: #b5d7b9;
}
.retain-button[aria-pressed="true"] {
  background: #34584c;
  color: #fff4d7;
  border-color: #c4dca9;
}
.hand-slot .retain-button:disabled {
  opacity: 0.4;
}
.intent-inspect {
  position: absolute;
  right: -9px;
  bottom: -10px;
  width: 25px;
  height: 25px;
  padding: 2px;
  border-radius: 50%;
  background: #193346;
  display: grid;
  place-items: center;
}
.intent-inspect .icon {
  width: 14px;
  height: 14px;
}
.tendency-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.6rem;
  margin: 0.45rem 0;
  font-size: 0.7rem;
  color: #d3decd;
}
.tendency-row span {
  white-space: nowrap;
}
.pet-detail-head .tendency-row {
  justify-content: flex-start;
  font-size: 0.84rem;
}
.instinct-explainer {
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--gold);
  background: #102638;
  margin: 1rem 0 1.3rem;
}
.instinct-explainer p {
  margin: 0.4rem 0;
  font-size: 0.9rem;
}
.instinct-explainer small {
  color: var(--muted);
}
.intent-reason {
  color: #e4ca95;
}
.stakes-label {
  font-size: 0.7rem;
  color: #d5d9c5;
  max-width: 460px;
  line-height: 1.3;
  margin: 0.3rem auto 0;
  height: 1.9em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.own-duel-alert {
  position: absolute;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #102b3bf2;
  border: 1px solid #899680;
  padding: 0.45rem 0.7rem;
  z-index: 12;
  max-width: 70%;
  font-size: 0.78rem;
}
.own-duel-alert small {
  font-size: 0.72rem;
  color: var(--muted);
}
.own-duel-alert button {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}
.own-duel-alert.needs-choice {
  border-color: #dabb83;
  box-shadow: 0 0 16px #dabb8333;
}
.camp-nav {
  display: block;
  margin-bottom: 0.6rem;
}
.camp-nav > .section-heading {
  margin-bottom: 0.5rem;
}
.camp-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 0.6rem;
  background: #102435f5;
  border: 1px solid #5f776e;
}
.camp-context > div:first-child {
  display: flex;
  gap: 0.4rem 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}
.camp-context .eyebrow {
  margin: 0;
  font-size: 0.63rem;
}
.camp-context .button-row {
  gap: 0.3rem;
}
.camp-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  font-size: 0.7rem;
}
.camp-progress small {
  flex-basis: 100%;
  text-align: right;
}
.camp-context > button {
  white-space: nowrap;
}
.new-card-badge {
  display: inline-block;
  margin-left: 0.4rem;
  background: #759d85;
  color: #102838;
  padding: 0.1rem 0.3rem;
  font-size: 0.57rem;
  border-radius: 2px;
  vertical-align: middle;
}
.deck-row-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--gold);
  margin-top: 0.25rem;
}
.latest-pick small {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
}
.draft-wait > button {
  margin: 0.8rem 0.3rem 0;
}
.replacement-intro {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}
.replacement-intro > .art-img {
  width: 110px;
  height: 90px;
  flex-shrink: 0;
}
.replacement-intro p {
  margin: 0.5rem 0;
}
.replacement-intro small {
  color: var(--muted);
}
.part-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 1rem 0;
}
.part-comparison > div {
  padding: 0.7rem;
  background: #0c2030;
  border: 1px solid #48645e;
}
.part-comparison > div:last-child {
  border-color: #a7ae86;
}
.part-comparison .eyebrow {
  font-size: 0.65rem;
}
.move-comparison {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0;
  border-top: 1px solid #354c51;
  font-size: 0.85rem;
}
.move-comparison small {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #d5ddce;
}
.move-comparison > span {
  color: var(--gold);
  font-size: 0.72rem;
}
.fusion-losses {
  margin: 0.8rem 0;
  padding: 0.6rem 0.8rem;
  background: #302d31;
  border-left: 2px solid #c89678;
  font-size: 0.83rem;
}
.fusion-losses p {
  margin: 0.35rem 0 0;
}

/* Anatomy is shown at the same scale reference across a lineage. The active
   preview keeps a fixed footprint while its text and portraits change. */
.lineage-preview {
  margin: 0.85rem 0;
  padding: 0.8rem;
  border: 1px solid #69817e;
  background: linear-gradient(140deg, #142c35f5, #10202df5);
}
.development-reveal-active #app {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.development-reveal-caption {
  position: fixed;
  z-index: 65;
  bottom: 7dvh;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 460px);
  text-align: center;
  padding: 0.9rem 1.8rem;
  background: radial-gradient(ellipse, #081c2cf0 35%, #081c2c00 73%);
  pointer-events: none;
}
.development-reveal-caption h2 {
  margin: 0.15rem 0;
  color: #f4dda5;
  text-shadow: 0 2px 8px #000;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
}
.development-reveal-caption p {
  color: #e4e9d8;
  text-shadow: 0 1px 3px #000;
}
.lineage-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.lineage-stage {
  min-width: 0;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0a1b26;
}
.lineage-stage.current {
  border-color: var(--gold-bright);
}
.lineage-stage strong {
  font-size: 0.82rem;
  line-height: 1.2;
  min-height: 2.4em;
  display: grid;
  place-items: center;
}
.lineage-stage small {
  color: var(--muted);
  font-size: 0.7rem;
}
.lineage-silhouette {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 96px;
  width: 100%;
}
.lineage-silhouette .art-img {
  width: min(100%, var(--form-height));
  height: var(--form-height);
}
.lineage-preview p {
  margin: 0.4rem 0 0;
}
.anatomy-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.65rem 0;
}
.anatomy-slots span {
  font-size: 0.76rem;
  color: #c4d2c9;
  padding: 0.45rem 0.6rem;
  border-left: 2px solid #85937b;
  background: #102330;
}
.anatomy-slots strong {
  display: block;
  color: #e5d9b1;
  text-transform: capitalize;
}
.anatomy-preview {
  display: grid;
  grid-template-columns: 125px 20px 125px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  margin: 0.8rem 0;
  padding: 0.65rem;
  background: #102431;
  border: 1px solid #576d71;
}
.anatomy-closeups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.anatomy-closeups figure { min-width: 0; margin: 0; text-align: center; border: 1px solid #b7a16d; background: radial-gradient(#294959, #0b1a28); }
.anatomy-closeups canvas { display: block; width: min(100%, 192px); height: auto; margin: auto; image-rendering: pixelated; }
.anatomy-closeups figcaption { padding: 6px; color: #f8daa1; font-size: .8rem; }
.anatomy-figure {
  min-width: 0;
  text-align: center;
}
.anatomy-figure .art-img {
  width: 100%;
  height: 118px;
}
.anatomy-figure small {
  display: block;
  font-size: 0.72rem;
  color: var(--gold-bright);
}
.anatomy-preview-copy {
  min-width: 0;
}
.anatomy-preview-copy strong {
  color: var(--gold-bright);
}
.fusion-size-note {
  min-height: 2.8em;
}
.fusion-size-note.warning {
  color: #f6b78b;
}
.anatomy-arrow {
  font-size: 1.4rem;
  color: var(--gold);
}
.inheritance-option .inherited-part-art {
  float: left;
  width: 43px;
  height: 43px;
  margin: 0 0.5rem 0.2rem 0;
  background-size: cover !important;
  border: 1px solid #67817d;
}
.pet-select-grid .portrait-choice {
  height: 105px;
}
.pet-select-grid .art-img {
  height: 72px;
}
#pet-preview {
  height: 125px;
  min-height: 125px;
  overflow: hidden;
}
#pet-preview > div {
  min-width: 0;
  overflow: auto;
  max-height: 108px;
  scrollbar-width: thin;
}
#pet-preview > button {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .pet-select-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pet-select-grid .portrait-choice {
    height: 99px;
  }
  .pet-select-grid .art-img {
    height: 66px;
  }
  .anatomy-preview {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  }
  .anatomy-preview-copy {
    grid-column: 1 / -1;
  }
  .anatomy-slots {
    grid-template-columns: 1fr;
  }
  .lineage-preview {
    padding: 0.55rem;
  }
}
.development-goal {
  margin: 0.7rem 0;
}
.recipe-goals {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}
.recipe-goal {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #48675f;
  background: #0c2130;
}
.recipe-goal.pinned {
  border-color: var(--gold);
}
.recipe-goal > .art-img {
  height: 110px;
  width: 110px;
  align-self: start;
}
.recipe-goal p {
  margin: 0.35rem 0;
  font-size: 0.9rem;
}
.recipe-parents {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.55rem 0;
}
.recipe-goal button {
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
}
.camp-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.camp-summary > div {
  padding: 0.8rem;
  background: #102536;
  border: 1px solid #48685d;
}
.camp-summary p {
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
.exchange-review {
  margin: 1rem 0;
  padding: 0.7rem;
  background: #102637;
  border: 1px solid #536f63;
}
.exchange-review summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gold-bright);
  font-size: 0.9rem;
}
.history-beat {
  margin: 0.7rem 0;
  border-left: 2px solid #7f9a8b;
  padding: 0.35rem 0.7rem;
}
.history-beat strong,
.history-beat small {
  display: block;
}
.history-beat small {
  color: var(--muted);
  font-size: 0.73rem;
  margin: 0.2rem 0;
}
.history-beat p {
  font-size: 0.9rem;
  margin: 0.3rem 0;
}
.causal-facts {
  margin: 1rem 0;
  padding-left: 1.3rem;
}
.causal-facts li {
  margin: 0.5rem 0;
  line-height: 1.45;
}
.card-focus-art {
  height: 185px;
  margin: 0.8rem 0;
}
.card-focus-art > .art-img {
  width: 100%;
  height: 100%;
  background-size: cover !important;
}
.card-focus-stats {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  color: var(--gold);
  font-size: 0.87rem;
}
.card-focus-rules {
  font-size: 1.12rem;
  line-height: 1.55;
  padding: 1rem 0;
  margin: 0;
}
.winner-names {
  text-align: center;
  margin: 0.8rem 0 1.2rem;
  color: var(--muted);
}
.exhibition-choice {
  padding: 1rem;
  border: 1px solid #ac9e71;
  background: #253a40;
  margin: 1rem 0;
}
.exhibition-choice p {
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
}
.company-recap {
  margin: 1rem 0;
  padding: 1rem;
  background: #102738;
  border: 1px solid #536d62;
}
.company-recap > p {
  font-size: 0.8rem;
  margin: 0.7rem 0;
}
.recap-roster {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.8rem 0;
}
.recap-roster > div {
  flex: 1;
  max-width: 180px;
  text-align: center;
}
.recap-roster .art-img {
  height: 90px;
  width: 100%;
}
.recap-roster strong,
.recap-roster small {
  display: block;
}
.recap-roster small {
  font-size: 0.7rem;
  color: var(--muted);
}
.end-screen {
  max-height: calc(100dvh - 110px);
  overflow: auto;
}
@media (min-width: 1600px) {
  .plan-feedback {
    bottom: auto;
  }
}
@media (max-width: 760px) {
  .plan-feedback {
    height: 74px;
    min-height: 74px;
    width: calc(100% - 12px);
    max-width: none;
    top: auto;
    bottom: 237px;
    padding: 0.4rem 0.55rem;
  }
  .plan-feedback .forecast-sides {
    min-height: 20px;
  }
  .plan-feedback .forecast-sides > div {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }
  .plan-feedback .forecast-sides > div > strong {
    flex-basis: auto;
    max-width: 65px;
    flex-shrink: 1;
  }
  .plan-feedback .forecast-sides > div > span {
    flex-shrink: 0;
  }
  .plan-feedback .forecast-sides > div > span:not(:nth-of-type(3)),
  .plan-feedback .forecast-warnings {
    display: none;
  }
  .forecast-heading {
    height: 22px;
  }
  .forecast-heading > strong {
    font-size: 0.76rem;
  }
  .forecast-sides {
    gap: 0.5rem;
    min-height: 32px;
  }
  .forecast-sides > div {
    gap: 0.25rem;
    font-size: 0.7rem;
  }
  .forecast-sides > div > strong {
    font-size: 0.68rem;
  }
  .forecast-sides small {
    font-size: 0.58rem;
  }
  .forecast-warnings {
    font-size: 0.65rem;
    max-height: 17px;
    margin: 0.2rem 0;
  }
  .forecast-uncertainty {
    font-size: 0.62rem;
  }
  .hand-slot {
    --hand-lift: -25px;
    --arc-angle: calc(var(--arc-index, 0) * 3deg);
    width: 108px;
    margin: 0 -30px;
    height: 192px;
  }
  .hand-zone {
    bottom: 17px;
    height: 208px;
  }
  .lock-control > small {
    display: none;
  }
  .hand-slot .card-rules {
    font-size: 0.71rem;
    line-height: 1.17;
    min-height: 70px;
  }
  .hand-slot .card-title {
    font-size: 0.7rem;
  }
  .hand-slot .card-footer {
    font-size: 0.53rem;
  }
  .hand-slot .card-art {
    min-height: 34px;
  }
  .retain-button {
    opacity: 1;
    bottom: 0;
    left: 26px;
    font-size: 0.56rem;
    width: 52px;
    min-width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    isolation: isolate;
  }
  .retain-button::before {
    content: "";
    position: absolute;
    inset: 12px 0;
    z-index: -1;
    border: 1px solid #9a8a67;
    border-radius: 12px;
    background: #102737;
    box-shadow: 0 3px 8px #0009;
    pointer-events: none;
  }
  .retain-button .icon {
    width: 11px;
    height: 11px;
  }
  .retain-button:hover:not(:disabled),
  .retain-button:active:not(:disabled),
  .retain-button[aria-pressed="true"] {
    background: transparent;
  }
  .retain-button[aria-pressed="true"]::before {
    background: #34584c;
    border-color: #c4dca9;
  }
  .hand-slot.carried .retain-button {
    font-size: 0.5rem;
  }
  .hand-slot:hover,
  .hand-slot:focus-within {
    transform: translateY(var(--arc-y, 0px)) rotate(var(--arc-angle, 0deg));
  }
  .stakes-label {
    max-width: 90vw;
    font-size: 0.62rem;
    height: 1.7em;
  }
  .battle-tools {
    top: 86px;
    max-width: 98%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .battle-tools button {
    font-size: 0.64rem;
    padding: 0.25rem 0.35rem;
  }
  .combatant {
    top: 19%;
  }
  .intent-inspect {
    width: 26px;
    height: 26px;
    right: -5px;
    bottom: -10px;
  }
  .own-duel-alert {
    top: 112px;
    max-width: 98%;
    width: 98%;
    font-size: 0.67rem;
    padding: 0.35rem;
    justify-content: center;
  }
  .own-duel-alert small {
    font-size: 0.6rem;
  }
  .camp-nav h2 {
    font-size: 1.55rem;
  }
  .camp-context {
    flex-wrap: wrap;
    padding: 0.5rem;
    gap: 0.35rem;
  }
  .camp-context > div:first-child {
    gap: 0.25rem 0.45rem;
    flex: 1 1 70%;
  }
  .camp-context > div:first-child > strong {
    font-size: 0.8rem;
  }
  .camp-context .button-row {
    flex-basis: 100%;
  }
  .camp-context .button-row button {
    font-size: 0.65rem;
    padding: 0.2rem 0.35rem;
  }
  .camp-progress {
    justify-content: flex-start;
    order: 3;
    flex-basis: 100%;
    align-items: center;
  }
  .camp-progress small {
    flex-basis: auto;
    font-size: 0.65rem;
  }
  .camp-progress .pill {
    font-size: 0.6rem;
    padding: 0.15rem 0.3rem;
  }
  .camp-context > button {
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
  }
  .camp-tabs button {
    font-size: 0.76rem;
    padding: 0.45rem 0.55rem;
  }
  .card-row {
    gap: 0.35rem;
  }
  .card-row > .art-img {
    width: 35px;
    height: 35px;
  }
  .card-row > button {
    font-size: 0.66rem;
    padding: 0.3rem;
  }
  .card-row-main small {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .part-comparison,
  .camp-summary {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .part-comparison > div {
    padding: 0.6rem;
  }
  .move-comparison {
    font-size: 0.88rem;
  }
  .move-comparison small {
    font-size: 0.85rem;
  }
  .recipe-goal {
    grid-template-columns: 65px 1fr;
    padding: 0.6rem;
    gap: 0.6rem;
  }
  .recipe-goal > .art-img {
    width: 65px;
    height: 75px;
  }
  .recipe-goal h3 {
    font-size: 1.3rem;
  }
  .recipe-goal p {
    font-size: 0.83rem;
  }
  .replacement-intro > .art-img {
    width: 75px;
    height: 75px;
  }
  .tendency-row {
    font-size: 0.61rem;
    gap: 0.2rem 0.35rem;
  }
  .recap-roster {
    gap: 0.4rem;
  }
  .recap-roster .art-img {
    height: 70px;
  }
  .recap-roster strong {
    font-size: 0.85rem;
  }
  .exhibition-choice {
    padding: 0.7rem;
  }
  .end-screen {
    max-height: calc(100dvh - 95px);
  }
  .card-focus-art {
    height: 160px;
  }
  .card-focus-rules {
    font-size: 1.08rem;
  }
  .modal-footer {
    flex-wrap: wrap;
  }
}
@media (hover: none) {
  .hand-slot .game-card {
    transform: none !important;
  }
  .hand-slot:hover,
  .hand-slot:focus-within {
    transform: translateY(var(--arc-y)) rotate(var(--arc-angle));
    /* Touch does not lift a card. Raising its stack would cover the next
       card's separate Keep control after a tap leaves keyboard focus here. */
    z-index: var(--card-z, 1);
  }
}
.status-list {
  height: 25px;
  min-height: 25px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.status-list > span {
  flex-shrink: 0;
}
.intent-line {
  height: 77px;
  min-height: 77px;
}
.intent-copy strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.intent-copy small {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
@media (min-width: 761px) {
  .intent-line {
    height: 65px;
    min-height: 65px;
  }
  .status-list {
    height: 20px;
    min-height: 20px;
  }
  .hand-zone {
    bottom: 24px;
  }
  .hand-slot {
    height: 225px;
  }
  .hand-slot .card-art {
    min-height: 68px;
    height: 68px;
  }
  .plan-feedback {
    height: 100px;
    min-height: 100px;
  }
}
.initiative-token.planned {
  width: 49px;
  min-width: 49px;
  border-radius: 15px;
  font-size: 0.7rem;
}
.length-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 220px;
}

/* Consequences have a fixed slot. Overflow can never push the hand or stage. */
.forecast-headline {
  height: 2.5em;
  margin: 2px 0;
  line-height: 1.25;
  font-size: .76rem;
  color: #ffe6ad;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.plan-feedback { height: 126px; min-height: 126px; }
.plan-feedback .forecast-warnings { display: none; }
@media (min-width: 761px) {
  .plan-feedback { height: 104px; min-height: 104px; }
  .plan-feedback .forecast-headline { display: block; height: 17px; white-space: nowrap; text-overflow: ellipsis; }
  .plan-feedback .forecast-sides { min-height: 32px; }
}
.game-card.unaffordable .card-cost { color: #8a3329; }
.card-focus-nav { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: .5rem 0; }
.card-focus-nav small { text-align: center; }
.pinned-route { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; background: #20394c; border-left: 3px solid #dcb871; padding: .7rem; margin: .6rem 0; }
.pinned-route span { grid-column: 1; font-size: .78rem; }
.pinned-route button { grid-column: 2; grid-row: 1 / 3; }
.route-next { color: #f2d59e; }
.recipe-goal ol { margin: .5rem 0 .5rem 1.2rem; }
.recipe-goal li { padding: .2rem 0; }

@media (max-width: 760px) and (orientation: portrait) {
  .battle { --phone-hand: clamp(142px, 22.7dvh, 192px); height: calc(100dvh - 70px); min-height: 0; }
  .battle-heading { width: 100%; }
  .battle-heading h2 { font-size: 1.05rem; }
  .battle-heading .eyebrow { font-size: .52rem; }
  .battle-status { font-size: .64rem; height: 17px; margin-top: 0; }
  .battle-heading .stakes-label { display: none; }
  .battle-tools { top: 51px; width: 100%; gap: 4px; flex-wrap: nowrap; }
  .battle-tools button { padding: 6px 5px; font-size: .6rem; min-width: 0; white-space: nowrap; }
  .combatant { top: 89px; width: 47%; }
  .combatant-name { height: 22px; margin: 0; }
  .combatant-name h3 { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .combatant-name small { display: none; }
  .health-shell { height: 23px; }
  .health-fill { height: 15px; }
  .status-list { height: 18px; min-height: 18px; margin: 1px 3px; }
  .intent-line { height: 65px; min-height: 65px; padding: 4px; margin-top: 1px; gap: 3px; }
  .intent-copy strong { font-size: .69rem; }
  .intent-copy small { font-size: .65rem; line-height: 1.2; }
  .intent-symbol { width: 17px; flex-shrink: 0; }
  .intent-inspect { bottom: -7px; right: -3px; width: 25px; height: 25px; }
  .plan-feedback { top: auto; bottom: calc(var(--phone-hand) + 53px); height: 94px; min-height: 94px; padding: 3px 7px; }
  .forecast-headline { font-size: .67rem; height: 2.5em; margin: 1px 0; }
  .plan-feedback .forecast-heading { height: 21px; }
  .plan-feedback .forecast-heading > strong { font-size: .68rem; }
  .plan-feedback .forecast-sides { min-height: 18px; }
  .plan-feedback .forecast-uncertainty { font-size: .58rem; }
  .hand-zone { height: var(--phone-hand); bottom: 16px; }
  .hand-slot { height: calc(var(--phone-hand) - 6px); }
  .hand-slot .card-art { height: clamp(32px, 5.8dvh, 49px); min-height: 32px; }
  .hand-slot .card-rules { min-height: 0; font-size: .64rem; }
  .hand-slot .card-footer { font-size: .47rem; }
  .lock-control { bottom: calc(var(--phone-hand) - 8px); right: 5px; width: 128px; }
  .lock-control > small { display: block; font-size: .59rem; height: 15px; white-space: nowrap; }
  .keyboard-hint { display: none; }
  .lock-button { min-height: 34px; height: 34px; padding: 4px 14px; }
  .energy-constellation { bottom: calc(var(--phone-hand) - 8px); left: 9px; height: 50px; }
  .energy-orbit { width: 32px; height: 32px; flex-shrink: 0; }
  .energy-number { font-size: 1.35rem; }
  .own-duel-alert { top: 225px; }
  .resolution-message { max-height: 83px; overflow: auto; }
  /* A reading tray leaves both committed moves and the forecast in view. */
  .card-focus-open .modal-backdrop { background: transparent; backdrop-filter: none; pointer-events: none; padding: 0; align-items: end; }
  .card-focus-open .modal { pointer-events: auto; position: absolute; bottom: 0; width: 100%; max-height: calc(var(--focus-tray-height, 235px)); height: 235px; padding: 12px; margin: 0; overflow: auto; box-shadow: 0 -6px 24px #071420aa; }
  .card-focus-open .modal > h2 { font-size: 1.08rem; margin: 0 28px 5px 0; }
  .card-focus-open .card-focus-art { width: 74px; height: 73px; float: left; margin: 0 9px 4px 0; }
  .card-focus-open .card-focus-art > .art-img { height: 73px; }
  .card-focus-open .card-focus-stats { font-size: .65rem; gap: .45rem; margin: 2px 0; }
  .card-focus-open .card-focus-rules { font-size: .85rem; margin: 5px 0; min-height: 36px; }
  .card-focus-open .modal > .muted { display: none; }
  .card-focus-open .card-focus-nav { clear: both; margin: 2px 0; }
  .card-focus-open .card-focus-nav button { padding: 4px 12px; }
  .card-focus-open .card-focus-nav small { font-size: .64rem; }
  .card-focus-open .modal-footer { margin: 5px 0 0; padding-top: 6px; }
  .card-focus-open .modal-footer button { padding: 8px; font-size: .73rem; }
  .pinned-route { grid-template-columns: 1fr; }
  .pinned-route button { grid-column: 1; grid-row: auto; justify-self: start; }
}
.selection-tendency .tendency-row {
  justify-content: flex-start;
  font-size: 0.7rem;
  margin: 0.4rem 0 0;
}
@media (max-width: 760px) {
  .intent-line {
    height: 65px;
    min-height: 65px;
    padding: 0.3rem;
  }
  .intent-copy small {
    font-size: 0.69rem;
  }
  .initiative-token.planned {
    width: 38px;
    min-width: 38px;
    font-size: 0.59rem;
  }
}
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .battle { --phone-hand: 126px; }
  .battle-heading > .eyebrow, .battle-status { display: none; }
  .battle-tools { top: 24px; }
  .combatant { top: 59px; }
  .hand-slot .card-art { height: 30px; min-height: 30px; }
  .hand-slot .card-rules { font-size: .58rem; line-height: 1.1; }
  .hand-slot .card-title { font-size: .59rem; }
  .card-focus-open .modal { height: 184px; padding: 8px; }
  .card-focus-open .card-focus-art, .card-focus-open .card-focus-art > .art-img { height: 50px; }
  .card-focus-open .card-focus-art { width: 52px; }
  .card-focus-open .card-focus-rules { font-size: .76rem; min-height: 24px; margin: 3px 0; }
  .card-focus-open .modal-footer { margin-top: 2px; padding-top: 4px; }
  .card-focus-open .modal-footer button { padding: 6px; }
}

/* Expected health lives on the existing bars; no separate planning panel. */
.health-track { position: relative; height: 100%; overflow: hidden; }
.health-track .health-fill { height: 100%; }
.health-forecast { position: absolute; top: 0; bottom: 0; pointer-events: none; transition: left .18s ease, width .18s ease; }
.health-forecast.damage { background: repeating-linear-gradient(125deg, #572f37c9 0 4px, #f5ac8177 4px 6px); box-shadow: inset 0 0 0 1px #edbe9b88; }
.health-forecast.healing { background: repeating-linear-gradient(125deg, #8fe5bbc9 0 4px, #d7ffcbdd 4px 6px); box-shadow: inset 0 0 0 1px #dcffc9bb; }
.health-endpoint { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: #fff0bd; box-shadow: 0 0 3px #0a1828; pointer-events: none; transition: left .18s ease; }
.health-shell.has-projection .health-text { right: 42px; pointer-events: none; }
.health-projection { position: absolute; right: 5px; top: 2px; bottom: 2px; display: grid; place-items: center; min-height: 0; min-width: 34px; padding: 0 4px; border: 0; border-left: 1px solid #f4dfab70; border-radius: 0; background: #122637df; color: #ffdeb5; font-size: .76rem; font-weight: 700; line-height: 1; box-shadow: none; text-shadow: 0 1px 2px #000; }
.health-projection.healing { color: #c7ffcd; }
.health-projection:hover, .health-projection:focus-visible { background: #29443f; color: #fff7dc; transform: none; outline-offset: -2px; }
.status-projection small { color: #f0d8a3; margin-left: 2px; font-size: inherit; }
@media (prefers-reduced-motion: reduce) {
  .health-forecast, .health-endpoint { transition: none; }
}
@media (max-width: 760px) {
  .health-shell.has-projection .health-text { right: 37px; }
  .health-projection { min-width: 31px; font-size: .68rem; right: 4px; }
}

/* Mobile playtest: stable choices, immediate input feedback, contained dialogs. */
.portrait-choice.selected::after { display: none; }
.starter-slots { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .5rem; margin-bottom: .65rem; }
.starter-slots button { width: 100%; height: 44px; min-width: 0; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-tile[role="button"] { cursor: pointer; }
.pet-tile[role="button"]:focus-visible { outline: 3px solid var(--gold, #ead291); outline-offset: 3px; }
.card-cost { line-height: 1; padding: 0; box-sizing: border-box; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; align-self: center; }
.lock-control > small { display: none !important; }
.hand-zone { touch-action: none; }
.hand-slot.touch-browse { z-index: 50; }
.hand-slot.touch-browse .game-card { transform: translateY(var(--hand-lift, -38px)) rotate(calc(-1 * var(--arc-angle, 0deg))); box-shadow: 0 10px 22px #0009; }
#entry-progress { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: #08152244; }
#entry-progress[hidden] { display: none; }
.entry-spinner { width: 38px; height: 38px; border: 3px solid #ead29140; border-top-color: #ead291; border-radius: 50%; animation: entry-spin .75s linear infinite; filter: drop-shadow(0 2px 5px #000); }
@keyframes entry-spin { to { transform: rotate(360deg); } }
#app { transition: opacity .16s ease, transform .16s ease; }
#app.navigating { opacity: .65; transform: translateY(-5px); pointer-events: none; }
html.dialog-open, html.dialog-open body { overflow: hidden; overscroll-behavior: none; }
.modal-backdrop { overscroll-behavior: none; overflow: hidden; }
.modal, .modal .scroll-panel { overscroll-behavior: contain; touch-action: pan-y; }
@media (max-width: 760px) {
  .hand-zone { pointer-events: auto; }
  .hand-slot.touch-browse { transform: translateY(var(--arc-y, 0px)) rotate(var(--arc-angle, 0deg)); }
  .lock-control { bottom: calc(var(--phone-hand, 170px) + 64px); right: 8px; width: 128px; }
  .lock-button { height: 40px; min-height: 40px; }
  .energy-constellation { bottom: calc(var(--phone-hand, 170px) + 64px); }
}
@media (prefers-reduced-motion: reduce) { #app { transition: none; } .entry-spinner { animation-duration: 1.5s; } }

[data-action][data-pending] { filter: brightness(.8); pointer-events: none; transform: translateY(1px); }

.hand:has(.touch-browse) .hand-slot:not(.touch-browse) { z-index: var(--card-z, 1); transform: translateY(var(--arc-y, 0px)) rotate(var(--arc-angle, 0deg)); }
.hand:has(.touch-browse) .hand-slot:not(.touch-browse) .game-card { transform: perspective(800px); }