* {
  box-sizing: border-box;
}

:root {
  --background: #080609;
  --panel: #160f17;
  --panel-light: #211521;
  --border: #553a45;
  --text: #ead9c1;
  --muted: #a99583;
  --crimson: #7b242c;
  --crimson-light: #b84948;
  --gold: #d5a65a;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(121, 31, 41, 0.28),
      transparent 38%
    ),
    linear-gradient(
      to bottom,
      #160a0d,
      var(--background) 48%,
      #030203
    );
  font-family: Georgia, "Times New Roman", serif;
}

button {
  font: inherit;
}

#game {
  width: min(1280px, 100%);
  height: 100vh;
  min-height: 640px;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.game-header {
  min-height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 12px 18px;
  background:
    linear-gradient(
      to bottom,
      rgba(44, 25, 31, 0.96),
      rgba(18, 11, 15, 0.96)
    );
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.studio-name {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 3px;
}

.game-header h1 {
  margin: 3px 0 0;
  font-size: 25px;
  font-weight: normal;
}

.wave-display {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 2px;
}

.wave-display span {
  color: var(--text);
  font-size: 24px;
}

.battle-screen {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}

.battlefield {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 72%,
      rgba(114, 58, 46, 0.2),
      transparent 46%
    ),
    linear-gradient(
      to bottom,
      #21141d,
      #100a10 58%,
      #080608
    );
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.62),
    0 16px 35px rgba(0, 0, 0, 0.42);
}

.battle-background {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
  opacity: 0.82;
}

.formation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.combatant {
  position: absolute;
  width: 140px;
  min-height: 96px;
  padding: 8px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.combatant-sprite {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background:
    radial-gradient(
      circle,
      rgba(184, 73, 72, 0.72),
      rgba(72, 24, 31, 0.7)
    );
  border: 1px solid rgba(233, 200, 151, 0.38);
  border-radius: 50%;
  image-rendering: pixelated;
}

.combatant-name {
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
}

.health-bar {
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  background: #160b0c;
  border: 1px solid rgba(233, 200, 151, 0.25);
}

.health-bar-fill {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      to right,
      var(--crimson),
      var(--crimson-light)
    );
}

.effects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.battle-message {
  position: absolute;
  top: 24px;
  left: 50%;
  padding: 9px 18px;
  transform: translateX(-50%);
  color: var(--gold);
  background: rgba(8, 5, 7, 0.76);
  border: 1px solid rgba(213, 166, 90, 0.38);
  font-size: 15px;
  letter-spacing: 1px;
}

.battle-interface {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) 2fr minmax(200px, 1fr);
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(
      to bottom,
      rgba(35, 21, 29, 0.98),
      rgba(13, 8, 12, 0.98)
    );
  border: 1px solid var(--border);
}

.turn-order,
.battle-log {
  min-height: 78px;
  padding: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(232, 200, 160, 0.12);
  font-size: 12px;
}

.command-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.command-panel button {
  min-height: 78px;
  padding: 10px 8px;
  color: var(--text);
  background:
    linear-gradient(
      to bottom,
      #57272d,
      #271216
    );
  border: 1px solid #82505a;
  cursor: pointer;
  letter-spacing: 1px;
}

.command-panel button:hover {
  filter: brightness(1.18);
}

.command-panel button:active {
  transform: translateY(1px);
}

#executeTurnButton {
  color: #1c1007;
  background:
    linear-gradient(
      to bottom,
      #e0b66c,
      #95642d
    );
  border-color: #e8c88d;
  font-weight: bold;
}

@media (max-width: 850px) {
  .battle-interface {
    grid-template-columns: 1fr;
  }

  .command-panel button {
    min-height: 54px;
  }
}

/* =========================================================
   REAL PIXEL ASSET RENDERING
   ========================================================= */

.battle-background {
  background-image:
    linear-gradient(
      to bottom,
      rgba(8, 5, 7, 0.08),
      rgba(8, 5, 7, 0.22)
    ),
    url("assets/backgrounds/Plains/Bg_plains_01.png");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  image-rendering: pixelated;
  opacity: 1;
}

.combatant {
  width: 130px;
  min-height: 120px;
  padding: 0;
  transform: translate(-50%, -50%);
  transition:
    transform 140ms ease,
    opacity 180ms ease,
    filter 140ms ease;
}

.combatant-sprite-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
}

.combatant-sprite-image {
  position: absolute;
  left: 50%;
  bottom: 8px;

  width: 96px;
  height: 96px;

  transform: translateX(-50%);

  object-fit: contain;
  image-rendering: pixelated;
  user-select: none;

  filter:
    drop-shadow(
      0 6px 3px
      rgba(0, 0, 0, 0.35)
    );
}

.combatant-shadow {
  position: absolute;
  left: 50%;
  bottom: 7px;

  width: 52px;
  height: 14px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0)
      72%
    );
}

.combatant-name {
  position: relative;
  z-index: 2;

  width: max-content;
  max-width: 125px;
  margin: -3px auto 4px;
  padding: 2px 7px;

  color: #fff0d3;
  background:
    rgba(18, 8, 10, 0.76);

  border:
    1px solid
    rgba(221, 174, 98, 0.34);

  font-size: 11px;
  line-height: 1.1;

  text-shadow:
    0 2px 3px #000;
}

.health-bar {
  width: 96px;
  height: 8px;
  margin: 0 auto;

  background: #160b0c;

  border:
    1px solid
    rgba(233, 200, 151, 0.48);
}

.health-bar-fill {
  height: 100%;

  background:
    linear-gradient(
      to right,
      #8b252a,
      #e05b50
    );

  transition: width 180ms ease;
}

.combatant.attacking {
  transform:
    translate(-50%, -50%)
    translate(34px, -8px)
    scale(1.08);
}

.combatant.enemy.attacking {
  transform:
    translate(-50%, -50%)
    translate(-34px, 8px)
    scale(1.08);
}

.combatant.hit {
  filter:
    brightness(1.8)
    saturate(0.5);

  transform:
    translate(-50%, -50%)
    translateX(10px);
}

.combatant.guarding
.combatant-sprite-image {
  filter:
    drop-shadow(
      0 0 7px
      rgba(120, 195, 255, 0.85)
    );
}

.combatant.defeated {
  opacity: 0.32;
  filter: grayscale(1);
}

.battle-effect-image {
  position: absolute;

  width: 128px;
  height: 96px;

  transform:
    translate(-50%, -50%);

  object-fit: contain;
  image-rendering: pixelated;

  filter:
    drop-shadow(
      0 0 8px
      rgba(255, 190, 95, 0.5)
    );

  pointer-events: none;
}

.floating-damage {
  position: absolute;

  transform: translateX(-50%);

  color: #ffd270;
  font-size: 27px;
  font-weight: bold;

  text-shadow:
    0 3px 2px #000,
    0 0 8px
    rgba(155, 30, 20, 0.9);

  animation:
    dragonsritualDamageFloat
    780ms ease-out forwards;

  pointer-events: none;
}

@keyframes dragonsritualDamageFloat {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 12px)
      scale(0.7);
  }

  18% {
    opacity: 1;
    transform:
      translate(-50%, 0)
      scale(1.2);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -58px)
      scale(1);
  }
}

@media (min-width: 1000px) {
  .combatant-sprite-wrap {
    width: 112px;
    height: 112px;
  }

  .combatant-sprite-image {
    width: 112px;
    height: 112px;
  }

  .combatant {
    width: 145px;
    min-height: 136px;
  }
}

.combatant.enemy .combatant-sprite-image {
  transform:
    translateX(-50%)
    scaleX(-1);
}
/* =========================================================
   STRATEGIC PLANNING AND TURN TIMELINE
   ========================================================= */

.battle-screen {
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;
}

.timeline-panel {
  padding: 8px 10px;

  background:
    linear-gradient(
      to bottom,
      rgba(36, 21, 29, 0.98),
      rgba(13, 8, 12, 0.98)
    );

  border:
    1px solid
    var(--border);

  overflow: hidden;
}

.timeline-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 7px;

  color: var(--muted);

  font-size: 10px;
  letter-spacing: 1.5px;
}

.timeline-heading strong {
  color: var(--gold);
  font-weight: normal;
}

.timeline-bar {
  display: flex;
  align-items: stretch;
  gap: 5px;

  min-height: 64px;
  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 2px;
}

.timeline-entry {
  position: relative;

  flex:
    1 0 115px;

  min-width: 115px;
  max-width: 160px;

  padding: 7px 8px 6px 25px;

  border:
    1px solid
    rgba(233, 200, 151, 0.2);

  background:
    rgba(255, 255, 255, 0.035);
}

.timeline-entry.fighter {
  border-color:
    rgba(205, 169, 95, 0.46);

  background:
    linear-gradient(
      to bottom,
      rgba(92, 59, 35, 0.32),
      rgba(33, 19, 18, 0.7)
    );
}

.timeline-entry.enemy {
  border-color:
    rgba(181, 61, 67, 0.5);

  background:
    linear-gradient(
      to bottom,
      rgba(100, 25, 32, 0.34),
      rgba(34, 12, 16, 0.72)
    );
}

.timeline-number {
  position: absolute;
  top: 5px;
  left: 7px;

  color: var(--gold);

  font-size: 10px;
}

.timeline-unit-name {
  overflow: hidden;

  color: var(--text);

  font-size: 12px;
  font-weight: bold;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-action {
  margin-top: 4px;

  color: var(--gold);

  font-size: 10px;
}

.timeline-target {
  margin-top: 2px;

  overflow: hidden;

  color: var(--muted);

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-arrow {
  align-self: center;

  flex: 0 0 auto;

  color: rgba(
    230,
    193,
    128,
    0.52
  );

  font-size: 24px;
}

.formation {
  pointer-events: none;
}

.combatant {
  pointer-events: auto;
}

.combatant-intent {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 8px);

  z-index: 5;

  min-width: 92px;
  max-width: 145px;

  padding: 3px 6px;

  transform: translateX(-50%);

  overflow: hidden;

  color: #f2d493;

  background:
    rgba(16, 8, 11, 0.88);

  border:
    1px solid
    rgba(213, 166, 90, 0.35);

  font-size: 9px;

  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combatant-intent:empty {
  display: none;
}

.combatant.active-planner {
  filter:
    drop-shadow(
      0 0 7px
      rgba(240, 190, 87, 0.9)
    );
}

.combatant.active-planner::after {
  content: "ACTIVE";

  position: absolute;
  left: 50%;
  bottom: -18px;

  z-index: 5;

  padding: 2px 6px;

  transform: translateX(-50%);

  color: #1b1008;

  background: var(--gold);

  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
}

.combatant.selectable-target {
  cursor: crosshair;

  filter:
    drop-shadow(
      0 0 7px
      rgba(218, 64, 64, 0.92)
    );
}

.combatant.selectable-target::before {
  content: "TARGET";

  position: absolute;
  left: 50%;
  top: -18px;

  z-index: 6;

  padding: 2px 7px;

  transform: translateX(-50%);

  color: #fff4db;

  background: #8d272d;

  border:
    1px solid
    rgba(255, 202, 150, 0.52);

  font-size: 8px;
  letter-spacing: 1px;
}

.combatant.selectable-target:hover {
  transform:
    translate(-50%, -50%)
    scale(1.08);

  filter:
    brightness(1.22)
    drop-shadow(
      0 0 10px
      rgba(230, 75, 75, 1)
    );
}

.combatant.guard-pulse
.combatant-sprite-image {
  animation:
    dragonsritualGuardPulse
    480ms ease-out;
}

@keyframes dragonsritualGuardPulse {
  0% {
    filter:
      brightness(1)
      drop-shadow(
        0 0 0
        rgba(105, 195, 255, 0)
      );
  }

  40% {
    filter:
      brightness(1.6)
      drop-shadow(
        0 0 14px
        rgba(105, 195, 255, 0.95)
      );
  }

  100% {
    filter:
      brightness(1)
      drop-shadow(
        0 0 0
        rgba(105, 195, 255, 0)
      );
  }
}

.command-panel button:disabled {
  cursor: default;
  opacity: 0.4;
  filter: grayscale(0.5);
}

#executeTurnButton:not(:disabled) {
  animation:
    dragonsritualExecuteReady
    1.4s ease-in-out infinite;
}

@keyframes dragonsritualExecuteReady {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.22);
  }
}

@media (max-width: 850px) {
  .timeline-entry {
    flex-basis: 105px;
    min-width: 105px;
  }

  .timeline-bar {
    min-height: 60px;
  }
}

.combatant.selectable-target::before {
  top: -38px;
}

.combatant.enemy .combatant-intent {
  bottom: calc(100% - 3px);
}

.combatant.active-planner::after {
  bottom: -22px;
}

.compact-header {
  min-height: 48px;
  padding: 8px 14px;
}

.compact-header .studio-name {
  margin: 0;
  font-size: 12px;
  letter-spacing: 3px;
}

.compact-header .wave-display {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.compact-header .wave-display span {
  font-size: 20px;
}
/* =========================================================
   COMPACT TURN STRIP AND ACTION PHASE
   ========================================================= */

.turn-strip-panel {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  background:
    linear-gradient(
      to bottom,
      rgba(36, 21, 29, 0.98),
      rgba(13, 8, 12, 0.98)
    );
  border: 1px solid var(--border);
}

.turn-strip-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.turn-label {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.5px;
}

.turn-strip-left strong {
  color: var(--text);
  font-size: 25px;
  font-weight: normal;
}

.planning-status {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1.3px;
  white-space: nowrap;
}

.turn-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.turn-token {
  position: relative;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  overflow: hidden;
  background: #120a0d;
  border: 2px solid rgba(213, 166, 90, 0.48);
  transition:
    opacity 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

.turn-token.enemy {
  border-color: rgba(191, 57, 65, 0.72);
}

.turn-token img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: scale(1.28);
}

.turn-token.enemy img {
  transform: scale(1.28) scaleX(-1);
}

.turn-action-symbol {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  display: grid;
  place-items: center;
  color: #1a0d08;
  background: var(--gold);
  border: 1px solid #f0cf8e;
  font-size: 9px;
  font-weight: bold;
}

.turn-token.enemy
.turn-action-symbol {
  color: #fff0db;
  background: #8c272e;
  border-color: #d87878;
}

.turn-token.active {
  z-index: 2;
  transform: translateY(-3px) scale(1.12);
  filter:
    brightness(1.35)
    drop-shadow(
      0 0 6px
      rgba(232, 183, 88, 0.9)
    );
}

.turn-token.finished {
  opacity: 0.3;
  filter: grayscale(1);
}

.action-phase-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 80;
  width: 100%;
  padding: 16px;
  transform:
    translate(-50%, -50%)
    scaleX(0.85);
  opacity: 0;
  color: #f6d58e;
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(86, 20, 28, 0.9) 24%,
      rgba(113, 31, 36, 0.94) 50%,
      rgba(86, 20, 28, 0.9) 76%,
      transparent
    );
  border-top:
    1px solid
    rgba(242, 197, 111, 0.52);
  border-bottom:
    1px solid
    rgba(242, 197, 111, 0.52);
  font-size: 32px;
  letter-spacing: 8px;
  text-align: center;
  text-shadow:
    0 3px 4px #000,
    0 0 16px rgba(197, 72, 47, 0.8);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 300ms ease;
}

.action-phase-banner.show {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    scaleX(1);
}

.action-phase-banner.hidden,
.action-resolution-panel.hidden {
  display: none;
}

.action-resolution-panel {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 72;
  width: min(310px, 36%);
  padding: 9px 11px 8px;
  background:
    linear-gradient(
      to bottom,
      rgba(28, 15, 20, 0.94),
      rgba(8, 5, 7, 0.96)
    );
  border:
    1px solid
    rgba(213, 166, 90, 0.52);
  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.45);
}

.action-resolution-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.action-resolution-top strong {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 1px;
}

.action-resolution-top span {
  color: var(--gold);
  font-size: 11px;
}

.action-progress-track {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: #180b0d;
  border:
    1px solid
    rgba(238, 201, 136, 0.38);
}

.action-progress-fill {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      to right,
      #8c282e,
      #d07840,
      #e7bd68
    );
}

.action-impact-marker {
  position: absolute;
  left: 43%;
  top: -2px;
  width: 2px;
  height: 14px;
  background: #fff2ba;
  box-shadow:
    0 0 6px
    rgba(255, 224, 142, 0.8);
}

.action-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: 1px;
}

.action-resolution-panel.impact-flash {
  filter: brightness(1.65);
  transform: scale(1.015);
}

#battlefield.action-phase-active {
  box-shadow:
    inset 0 0 90px
    rgba(0, 0, 0, 0.38);
}

#battlefield.resolving-action
.battle-background {
  filter:
    brightness(0.78)
    saturate(0.86);
}

.combatant.background-unit {
  filter:
    brightness(0.62)
    saturate(0.72);
}

.combatant.current-actor {
  z-index: 20;
  filter:
    brightness(1.22)
    drop-shadow(
      0 0 9px
      rgba(242, 197, 104, 0.8)
    );
}

@media (max-width: 850px) {
  .turn-strip-panel {
    gap: 7px;
    padding: 5px 7px;
  }

  .turn-token {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .action-resolution-panel {
    right: 9px;
    bottom: 9px;
    width: 44%;
  }

  .action-phase-banner {
    font-size: 23px;
    letter-spacing: 5px;
  }
}

/* =========================================================
   STONE-FRAMED TURN PORTRAITS
   ========================================================= */

.turn-strip-panel {
  min-height: 76px;
}

.turn-strip {
  gap: 7px;
}

.turn-token {
  position: relative;

  width: 62px;
  height: 62px;
  flex: 0 0 62px;

  overflow: visible;

  background: transparent;
  border: 0;

  transition:
    opacity 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

.turn-token-frame {
  position: absolute;
  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: contain;
  image-rendering: pixelated;

  pointer-events: none;
}

.turn-token-portrait-window {
  position: absolute;

  left: 7px;
  top: 7px;

  z-index: 3;

  width: 48px;
  height: 48px;

  overflow: hidden;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(51, 38, 31, 0.95),
      rgba(12, 8, 9, 0.98)
    );
}

.turn-token-portrait {
  position: absolute;

  left: 50%;
  bottom: 8px;

  width: 92px;
  height: 92px;

  transform:
    translateX(-50%);

  object-fit: contain;
  image-rendering: pixelated;

  filter:
    drop-shadow(
      0 2px 1px
      rgba(0, 0, 0, 0.6)
    );
}

.turn-token.enemy
.turn-token-portrait {
  transform:
    translateX(-50%)
    scaleX(-1);
}

.turn-token.enemy
.turn-token-portrait-window {
  background: rgba(54, 12, 18, 0.72);
}

.turn-token.enemy
.turn-token-frame {
  filter:
    sepia(0.25)
    saturate(1.45)
    hue-rotate(315deg)
    brightness(0.78);
}

.turn-action-symbol {
  position: absolute;

  right: -2px;
  bottom: -2px;

  z-index: 6;

  min-width: 22px;
  height: 22px;

  padding: 0 3px;

  display: grid;
  place-items: center;

  color: #211107;

  background:
    linear-gradient(
      to bottom,
      #efd37f,
      #ad6d2d
    );

  border:
    2px solid
    #f5dea0;

  border-radius: 50%;

  font-size: 13px;
  font-weight: bold;

  text-shadow: none;

  box-shadow:
    0 2px 5px
    rgba(0, 0, 0, 0.65);
}

.turn-token.enemy
.turn-action-symbol {
  color: #fff0dc;

  background:
    linear-gradient(
      to bottom,
      #b94b4e,
      #681921
    );

  border-color: #dc8481;
}

.turn-token.active {
  z-index: 9;

  transform:
    translateY(-4px)
    scale(1.14);

  filter:
    brightness(1.3)
    drop-shadow(
      0 0 8px
      rgba(248, 209, 114, 1)
    );
}

.turn-token.active
.turn-token-frame {
  animation:
    dragonsritualFramePulse
    900ms ease-in-out infinite;
}

.turn-token.finished {
  opacity: 0.34;
  filter: grayscale(1);
}

@keyframes dragonsritualFramePulse {
  0%,
  100% {
    filter:
      brightness(1);
  }

  50% {
    filter:
      brightness(1.45)
      drop-shadow(
        0 0 5px
        rgba(255, 225, 144, 0.9)
      );
  }
}

@media (max-width: 850px) {
  .turn-strip-panel {
    min-height: 68px;
  }

  .turn-token {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .turn-token-portrait-window {
  left: 6px;
  top: 6px;

  width: 42px;
  height: 42px;
}

  .turn-token-portrait {
  width: 60px;
  height: 60px;
}

  .turn-action-symbol {
    width: 19px;
    min-width: 19px;
    height: 19px;

    font-size: 11px;
  }
}

.turn-token > img.turn-token-frame {
  width: 100%;
  height: 100%;
  transform: none;
}

.turn-token.enemy
> img.turn-token-frame {
  transform: none;
}
\n\n

/* =========================================================
   ARCADE TITLE / START SCREEN
   ========================================================= */

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #080507;
  opacity: 1;
  transition: opacity 300ms ease;
}

.start-screen.leaving {
  opacity: 0;
  pointer-events: none;
}

.start-screen-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(7, 4, 6, 0.60), rgba(7, 4, 6, 0.90)),
    url("assets/backgrounds/Plains/Bg_plains_01.png") center / cover no-repeat;
  image-rendering: pixelated;
  transform: scale(1.03);
}

.start-screen-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(213, 166, 90, 0.13), transparent 35%),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 4px
    );
}

.start-screen-content {
  position: relative;
  z-index: 2;
  width: min(720px, 86vw);
  padding: 34px 48px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(29, 12, 20, 0.93), rgba(8, 5, 7, 0.95));
  border: 1px solid rgba(213, 166, 90, 0.52);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px rgba(255, 232, 185, 0.08);
}

.start-kicker {
  color: #d5a65a;
  font-size: 12px;
  letter-spacing: 4px;
  margin-bottom: 7px;
}

.start-screen h1 {
  margin: 0;
  color: #f0c75e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 0.95;
  letter-spacing: 4px;
  text-shadow:
    0 3px 0 #54242a,
    0 8px 22px rgba(0, 0, 0, 0.8);
}

.start-rule {
  width: 76%;
  height: 1px;
  margin: 19px auto 12px;
  background: linear-gradient(90deg, transparent, #d5a65a, transparent);
}

.start-party {
  height: 132px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 28px;
  margin: 2px 0 5px;
}

.start-party img {
  width: 94px;
  height: 112px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 9px 4px rgba(0, 0, 0, 0.65));
}

.start-party img.start-hero {
  width: 112px;
  height: 130px;
  transform: translateY(1px);
}

.start-tagline {
  margin: 5px 0 19px;
  color: #e9c897;
  font-size: 12px;
  letter-spacing: 2px;
}

.start-game-button {
  min-width: 300px;
  padding: 15px 34px;
  cursor: pointer;
  border: 1px solid #f1cc68;
  color: #160b0c;
  background: linear-gradient(#f1cc68, #cf9d3d);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
  box-shadow:
    0 0 22px rgba(213, 166, 90, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 120ms ease, filter 120ms ease;
}

.start-game-button:hover,
.start-game-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.12);
  outline: none;
}

.start-game-button:active {
  transform: translateY(1px);
}

.start-hint {
  margin-top: 13px;
  color: rgba(233, 200, 151, 0.72);
  font-size: 10px;
  letter-spacing: 1.5px;
}

.start-build {
  margin-top: 18px;
  color: rgba(213, 166, 90, 0.55);
  font-size: 9px;
  letter-spacing: 2px;
}

.game-before-start {
  visibility: hidden;
}

@media (max-width: 700px) {
  .start-screen-content {
    width: 92vw;
    padding: 26px 18px 22px;
  }

  .start-party {
    height: 108px;
    gap: 8px;
  }

  .start-party img {
    width: 76px;
    height: 94px;
  }

  .start-party img.start-hero {
    width: 88px;
    height: 108px;
  }

  .start-game-button {
    min-width: min(300px, 78vw);
  }
}


/* =========================================================
   FULL GAME-VIEWPORT TITLE SCREEN
   The start screen is the game screen itself, not a modal/card.
   ========================================================= */

.start-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  background: #080507;
}

.start-screen-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.start-screen-content {
  position: relative;
  z-index: 2;

  /* Fill the entire embedded game viewport instead of being a box. */
  width: 100%;
  height: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: clamp(28px, 5vh, 56px) clamp(32px, 6vw, 88px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.start-kicker {
  margin: 0 0 10px;
  font-size: clamp(10px, 1.15vw, 15px);
  letter-spacing: clamp(3px, .5vw, 7px);
}

.start-screen h1 {
  margin: 0;
  max-width: 1000px;
  font-size: clamp(52px, 8vw, 108px);
  line-height: .88;
  letter-spacing: clamp(3px, .7vw, 10px);
}

.start-rule {
  width: min(720px, 62vw);
  margin: clamp(18px, 3vh, 28px) auto clamp(12px, 2vh, 20px);
}

.start-party {
  height: clamp(120px, 22vh, 180px);
  gap: clamp(20px, 4vw, 58px);
  margin: 0 0 clamp(6px, 1.5vh, 14px);
}

.start-party img {
  width: clamp(92px, 9vw, 138px);
  height: clamp(118px, 18vh, 160px);
}

.start-party img.start-hero {
  width: clamp(112px, 11vw, 162px);
  height: clamp(136px, 21vh, 184px);
}

.start-tagline {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: clamp(1px, .25vw, 3px);
}

.start-game-button {
  min-width: clamp(280px, 28vw, 400px);
  padding: clamp(14px, 2vh, 20px) clamp(34px, 4vw, 58px);
  font-size: clamp(17px, 1.65vw, 24px);
}

.start-hint {
  margin-top: 14px;
  font-size: clamp(9px, .85vw, 12px);
}

.start-build {
  margin-top: clamp(12px, 2vh, 20px);
  font-size: clamp(8px, .75vw, 11px);
}

/* Make sure old mobile card rules cannot turn it back into a modal. */
@media (max-width: 700px) {
  .start-screen-content {
    width: 100%;
    height: 100%;
    padding: 22px 16px;
  }

  .start-party {
    height: 105px;
    gap: 12px;
  }

  .start-party img {
    width: 72px;
    height: 90px;
  }

  .start-party img.start-hero {
    width: 86px;
    height: 104px;
  }

  .start-game-button {
    min-width: min(300px, 78vw);
  }
}

/* =========================================================
   MOBILE / SMALL-VIEWPORT GAME FIT PASS
   Keeps the whole battle usable inside itch.io's game iframe.
   ========================================================= */

html,
body {
  height: 100%;
  height: 100dvh;
  max-width: 100%;
}

body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

#game {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-width: 1280px;
}

.battle-screen,
.battlefield,
.turn-strip-panel,
.battle-interface {
  min-width: 0;
}

.turn-strip {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.turn-strip::-webkit-scrollbar {
  display: none;
}

.command-panel button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hidden-control {
  display: none !important;
}

#restartButton {
  color: #1c1007;
  background: linear-gradient(to bottom, #e0b66c, #95642d);
  border-color: #e8c88d;
  font-weight: bold;
}

/* Landscape phones and short embedded game windows. */
@media (max-height: 600px), (max-width: 850px) and (orientation: landscape) {
  #game {
    width: 100%;
    padding: 5px;
    gap: 4px;
  }

  .compact-header {
    min-height: 32px;
    padding: 4px 9px;
  }

  .compact-header .studio-name {
    font-size: 9px;
    letter-spacing: 1.8px;
  }

  .compact-header .wave-display {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .compact-header .wave-display span {
    font-size: 15px;
  }

  .battle-screen {
    gap: 4px;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .turn-strip-panel {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 3px 6px;
  }

  .turn-label,
  .planning-status {
    font-size: 7px;
    letter-spacing: .8px;
  }

  .turn-strip-left strong {
    font-size: 18px;
  }

  .turn-strip {
    gap: 2px;
  }

  .turn-token {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .turn-token-portrait-window {
    left: 4px;
    top: 4px;
    width: 32px;
    height: 32px;
  }

  .turn-token-portrait {
    width: 52px;
    height: 52px;
    bottom: 4px;
  }

  .turn-action-symbol {
    width: 16px;
    min-width: 16px;
    height: 16px;
    right: -1px;
    bottom: -1px;
    border-width: 1px;
    font-size: 9px;
  }

  .combatant {
    width: 92px;
    min-height: 88px;
  }

  .combatant-sprite-wrap {
    width: 68px;
    height: 68px;
  }

  .combatant-sprite-image {
    width: 68px;
    height: 68px;
    bottom: 5px;
  }

  .combatant-shadow {
    width: 38px;
    height: 10px;
    bottom: 4px;
  }

  .combatant-name {
    max-width: 88px;
    margin-top: -5px;
    padding: 1px 4px;
    font-size: 8px;
  }

  .health-bar {
    width: 68px;
    height: 6px;
  }

  .combatant-intent {
    min-width: 62px;
    max-width: 95px;
    padding: 2px 4px;
    font-size: 7px;
  }

  .combatant.selectable-target::before,
  .combatant.active-planner::after {
    font-size: 6px;
    padding: 1px 4px;
  }

  .combatant.selectable-target::before {
    top: -25px;
  }

  .combatant.active-planner::after {
    bottom: -16px;
  }

  .battle-message {
    top: 7px;
    max-width: 70%;
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .battle-interface {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px;
  }

  .turn-order,
  .battle-log {
    display: none;
  }

  .command-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .command-panel button {
    min-height: 42px;
    padding: 4px 3px;
    font-size: 10px;
    letter-spacing: .4px;
  }

  .action-resolution-panel {
    right: 6px;
    bottom: 6px;
    width: min(250px, 45%);
    padding: 5px 7px;
  }

  .action-resolution-top strong,
  .action-resolution-top span {
    font-size: 8px;
  }

  .action-progress-labels {
    display: none;
  }

  .action-phase-banner {
    padding: 10px;
    font-size: 18px;
    letter-spacing: 4px;
  }
}

/* Portrait phones: fit without forcing a desktop minimum height. */
@media (max-width: 700px) and (orientation: portrait) {
  #game {
    width: 100%;
    padding: 6px;
    gap: 5px;
  }

  .compact-header {
    min-height: 38px;
    padding: 5px 9px;
  }

  .compact-header .studio-name {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .compact-header .wave-display span {
    font-size: 16px;
  }

  .battle-screen {
    gap: 5px;
  }

  .turn-strip-panel {
    min-height: 52px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding: 4px 6px;
  }

  .planning-status {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 8px;
  }

  .turn-token {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .turn-token-portrait-window {
    left: 5px;
    top: 5px;
    width: 32px;
    height: 32px;
  }

  .turn-token-portrait {
    width: 52px;
    height: 52px;
    bottom: 4px;
  }

  .combatant {
    width: 88px;
    min-height: 92px;
  }

  .combatant-sprite-wrap,
  .combatant-sprite-image {
    width: 68px;
    height: 68px;
  }

  .health-bar {
    width: 68px;
  }

  .combatant-name {
    max-width: 84px;
    font-size: 8px;
  }

  .combatant-intent {
    min-width: 58px;
    max-width: 90px;
    font-size: 7px;
  }

  .battle-message {
    top: 8px;
    max-width: 78%;
    padding: 5px 8px;
    font-size: 9px;
  }

  .battle-interface {
    grid-template-columns: 1fr;
    padding: 5px;
  }

  .turn-order,
  .battle-log {
    display: none;
  }

  .command-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .command-panel button {
    min-height: 44px;
    padding: 5px;
    font-size: 10px;
  }

  .action-resolution-panel {
    right: 6px;
    bottom: 6px;
    width: 58%;
  }
}

/* Extremely short browser/iframe windows. */
@media (max-height: 420px) {
  .turn-strip-panel {
    min-height: 42px;
  }

  .turn-token {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .turn-token-portrait-window {
    left: 4px;
    top: 4px;
    width: 26px;
    height: 26px;
  }

  .turn-token-portrait {
    width: 44px;
    height: 44px;
  }

  .command-panel button {
    min-height: 36px;
  }
}


/* =========================================================
   MOBILE MERGE PASS 03 — RUN / BOON UI
   These rules intentionally sit AFTER the existing mobile-fit
   pass so the new gameplay systems inherit the mobile layout.
   ========================================================= */

.run-stats{
  display:flex;
  gap:12px;
  align-items:center;
  margin-left:auto;
  font-size:9px;
  letter-spacing:1.2px;
  color:#9d8790;
  white-space:nowrap;
}
.run-stats b{color:#ead9c1;font-size:12px}

.upgrade-overlay{
  position:absolute;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(4,2,4,.80);
  backdrop-filter:blur(4px);
}
.upgrade-overlay.hidden{display:none!important}
.upgrade-card-shell{
  width:min(820px,94%);
  max-height:92%;
  overflow:auto;
  padding:24px;
  background:linear-gradient(180deg,rgba(25,12,19,.98),rgba(8,5,8,.99));
  border:1px solid #6b3945;
  box-shadow:0 28px 80px #000;
  text-align:center;
}
.upgrade-kicker{font-size:9px;letter-spacing:2.4px;color:#a67a82}
.upgrade-card-shell h2{margin:7px 0 20px;color:#ead9c1;font-size:clamp(20px,4vw,30px);letter-spacing:1.7px}
.upgrade-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.boon-card{
  position:relative;
  min-height:138px;
  padding:23px 15px 16px;
  background:linear-gradient(180deg,#1c1118,#0d090c);
  border:1px solid #55333f;
  color:#ead9c1;
  cursor:pointer;
  text-align:left;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.boon-card:active,.boon-card:hover{border-color:#e2bb57;background:linear-gradient(180deg,#29151d,#100a0d)}
.boon-card strong{display:block;margin:10px 0 7px;font-size:13px;letter-spacing:.8px}
.boon-card span:last-child{color:#ad9ba0;font-size:11px;line-height:1.45}
.boon-number{position:absolute;top:9px;right:11px;color:#e2bb57;font-size:9px}
.upgrade-hint{margin-top:13px;font-size:8px;letter-spacing:1.7px;color:#735b62}
.affix-mark{margin-left:4px;color:#e2bb57;text-shadow:0 0 8px rgba(226,187,87,.8)}

@media(max-width:700px),(max-height:600px){
  .run-stats{gap:6px;font-size:7px;letter-spacing:.8px}
  .run-stats b{font-size:9px}
  .upgrade-overlay{padding:7px}
  .upgrade-card-shell{width:min(96%,620px);padding:12px}
  .upgrade-card-shell h2{font-size:17px;margin:5px 0 10px}
  .upgrade-kicker{font-size:7px;letter-spacing:1.4px}
  .upgrade-choices{grid-template-columns:1fr;gap:5px}
  .boon-card{min-height:56px;padding:9px 11px}
  .boon-card strong{margin:2px 0 3px;font-size:10px}
  .boon-card span:last-child{font-size:9px}
  .boon-number{top:7px;right:8px;font-size:8px}
  .upgrade-hint{margin-top:7px;font-size:7px}
}

@media(max-height:440px) and (orientation:landscape){
  .upgrade-card-shell{padding:8px}
  .upgrade-card-shell h2{font-size:14px;margin:3px 0 6px}
  .upgrade-choices{grid-template-columns:repeat(3,1fr);gap:4px}
  .boon-card{min-height:72px;padding:14px 7px 7px}
  .boon-card strong{font-size:8px}
  .boon-card span:last-child{font-size:7px;line-height:1.25}
}

/* PASS 04 — combat depth */
.status-marks{margin-left:5px;font-size:.82em;letter-spacing:1px}
.affix-mark[title="Boss"]{font-size:1.05em;text-shadow:0 0 10px rgba(226,187,87,.95)}
.combatant-card:has(.affix-mark[title="Boss"]){box-shadow:inset 0 0 0 1px rgba(226,187,87,.34),0 0 22px rgba(123,36,44,.20)}


/* =========================================================
   WEBSITE DEEP PASS 03 — THE RITUAL DRAW
   Original Arcade Battle + booster-run identity
   ========================================================= */
.collection-button{
  border:1px solid rgba(226,187,87,.35)!important;
  background:#0c080c!important;
  color:#e2bb57!important;
  padding:5px 8px!important;
  font-size:8px!important;
  letter-spacing:.08em!important;
  cursor:pointer;
}

.run-reveal-shell{width:min(980px,96%)!important}
.run-reveal-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.resonance-text{
  margin:-6px 0 12px;
  color:#9d8790;
  font-size:8px;
  letter-spacing:.12em;
  text-align:center;
}
.ritual-card{
  position:relative;
  min-width:0;
  padding:16px;
  border:1px solid #55333f;
  background:linear-gradient(180deg,#1a0f17,#0b080b);
  color:#ead9c1;
  text-align:left;
}
.ritual-card__top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#9d8790;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
}
.ritual-card__portrait{
  display:block;
  width:88px;
  height:88px;
  margin:8px auto 5px;
  object-fit:contain;
  image-rendering:pixelated;
}
.ritual-card h3{
  margin:5px 0 3px;
  color:#ead9c1;
  font-size:17px;
  text-align:center;
}
.ritual-card>small{
  display:block;
  color:#8f737d;
  font-size:7px;
  text-align:center;
  letter-spacing:.08em;
}
.ritual-card__stats{
  margin:10px 0 8px;
  padding:7px 0;
  border-top:1px solid #4b303a;
  border-bottom:1px solid #4b303a;
  color:#c7b2b9;
  font-size:8px;
  text-align:center;
}
.ritual-card__text{
  min-height:42px;
  color:#a78f97;
  font-size:8px;
  line-height:1.45;
}
.ritual-card__text p{margin:3px 0}
.ritual-card__text b{color:#ead9c1}

.rarity-common{border-color:#6f676a!important}
.rarity-uncommon{border-color:#4e955b!important;box-shadow:inset 0 3px 0 #4e955b35}
.rarity-rare{border-color:#4f86b9!important;box-shadow:inset 0 3px 0 #4f86b940}
.rarity-legendary{border-color:#d19a28!important;box-shadow:inset 0 3px 0 #d19a2850,0 0 22px #d19a2818!important}
.rarity-mythic{border-color:#c14e82!important;box-shadow:inset 0 3px 0 #c14e8260,0 0 28px #c14e8220!important}
.rarity-text-common{color:#aaa}
.rarity-text-uncommon{color:#75ba7e}
.rarity-text-rare{color:#75aade}
.rarity-text-legendary{color:#e2bb57}
.rarity-text-mythic{color:#e47aaa}

.reveal-start{
  position:static!important;
  display:block!important;
  margin:16px auto 0!important;
  transform:none!important;
}
.ritual-single-draw{
  grid-template-columns:minmax(0,460px)!important;
  justify-content:center;
}
.reward-card{text-align:center!important}
.reward-card p{color:#a99098;font-size:10px}
.artifact-mark{margin:8px 0;font-size:34px;color:#e2bb57}
.reward-question{margin:14px 0 7px;color:#907983;font-size:8px;font-weight:800;letter-spacing:.12em}
.reward-equip-grid{display:grid;grid-template-columns:1fr;gap:5px}
.reward-equip-grid button,.reward-accept,.reward-leave{
  border:1px solid #55333f!important;
  background:#120b10!important;
  color:#ead9c1!important;
  padding:9px!important;
  font-size:9px!important;
  font-weight:800!important;
  cursor:pointer;
}
.reward-equip-grid button:hover,.reward-accept:hover{border-color:#e2bb57!important;color:#e2bb57!important}
.reward-leave{margin-top:7px;color:#806970!important}

.affinity-glyph{font-size:.9em}
.rarity-chip{
  display:inline-block;
  margin-left:4px;
  padding:1px 4px;
  border:1px solid currentColor;
  font-size:6px;
  vertical-align:2px;
  opacity:.9;
}

.inspect-overlay{
  position:absolute;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:rgba(3,2,3,.82);
  backdrop-filter:blur(4px);
}
.inspect-overlay.hidden{display:none!important}
.inspect-card{
  position:relative;
  width:min(620px,95%);
  max-height:92%;
  overflow:auto;
  padding:22px;
  background:linear-gradient(180deg,#180d15,#090609);
  border:1px solid #66414d;
  color:#ead9c1;
  box-shadow:0 28px 80px #000;
}
.inspect-close{
  position:absolute;
  top:7px;
  right:9px;
  border:0!important;
  background:none!important;
  color:#9d8790!important;
  font-size:24px!important;
  cursor:pointer;
}
.inspect-rarity{font-size:8px;font-weight:800;letter-spacing:.14em}
.inspect-hero{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.inspect-hero img{width:82px;height:82px;object-fit:contain;image-rendering:pixelated}
.inspect-hero h2{margin:0;color:#ead9c1;font-size:24px}
.inspect-hero p{margin:4px 0;color:#917982;font-size:8px}
.inspect-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.inspect-stat-grid span{padding:8px;border:1px solid #3f2932;color:#907984;font-size:7px}
.inspect-stat-grid b{display:block;margin-top:2px;color:#ead9c1;font-size:12px}
.inspect-card h3{margin:16px 0 7px;color:#e2bb57;font-size:10px;letter-spacing:.1em}
.inspect-rules p{margin:5px 0;color:#ac969d;font-size:9px;line-height:1.45}
.inspect-rules b{color:#ead9c1}
.inspect-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.inspect-slot{padding:8px;border:1px solid #3f2932}
.inspect-slot small,.inspect-slot span{display:block;color:#806970;font-size:7px}
.inspect-slot b{display:block;margin:3px 0;color:#ead9c1;font-size:9px}
.inspect-source{margin-top:14px;color:#634d55;font-size:6px;letter-spacing:.08em}

.collection-shell{width:min(800px,96%)}
.collection-meta{margin:8px 0 12px;color:#8f737d;font-size:8px;letter-spacing:.08em}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.collection-entry{
  display:grid;
  grid-template-columns:1fr auto;
  padding:9px;
  border:1px solid #55333f;
  background:#0b080b;
}
.collection-entry small{grid-column:1/-1;color:#806970;font-size:7px;letter-spacing:.08em}
.collection-entry b{color:#ead9c1;font-size:11px}
.collection-entry span{color:#9d8790;font-size:8px}
.collection-entry em{grid-row:2/4;grid-column:2;color:#6f5961;font-size:7px;font-style:normal}
.empty-collection{color:#9d8790;font-size:9px}

@media(max-width:700px),(max-height:620px){
  .run-reveal-cards{grid-template-columns:1fr;gap:5px}
  .run-reveal-shell{max-height:94%;overflow:auto}
  .ritual-card{padding:9px}
  .ritual-card__portrait{width:54px;height:54px;margin:3px auto}
  .ritual-card h3{font-size:13px}
  .ritual-card__text{min-height:0;font-size:7px}
  .ritual-card__stats{margin:5px 0;padding:5px 0}
  .inspect-card{padding:14px}
  .inspect-hero img{width:56px;height:56px}
  .inspect-hero h2{font-size:17px}
  .inspect-slots,.collection-grid{grid-template-columns:1fr}
  .collection-button{font-size:7px!important;padding:4px 6px!important}
}
@media(max-height:440px) and (orientation:landscape){
  .run-reveal-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ritual-card__portrait{width:42px;height:42px}
  .ritual-card__text{display:none}
  .ritual-card h3{font-size:11px}
  .reveal-start{margin-top:6px!important;padding:7px 18px!important}
}


/* =========================================================
   WORLD FEEL PASS 04 — grounded sprites / arcane presentation
   ========================================================= */
.affinity-fire{--aff:#d56b35;--affsoft:rgba(213,107,53,.20)}
.affinity-water{--aff:#5da9d6;--affsoft:rgba(93,169,214,.20)}
.affinity-forest{--aff:#6da75b;--affsoft:rgba(109,167,91,.20)}
.affinity-frost{--aff:#9fd7e6;--affsoft:rgba(159,215,230,.20)}
.affinity-thunder{--aff:#d7b94b;--affsoft:rgba(215,185,75,.20)}
.affinity-air{--aff:#c5c1d5;--affsoft:rgba(197,193,213,.20)}
.affinity-blood{--aff:#b3424b;--affsoft:rgba(179,66,75,.22)}
.affinity-void{--aff:#9d6eb4;--affsoft:rgba(157,110,180,.22)}
.affinity-none{--aff:#8b7880;--affsoft:rgba(139,120,128,.16)}

.combatant-sprite-wrap{overflow:visible!important}
.combatant-ground-sigil{
  position:absolute;left:50%;bottom:4px;z-index:0;width:52px;height:18px;
  transform:translateX(-50%) perspective(55px) rotateX(66deg);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--aff,#8b7880);
  border-radius:50%;color:var(--aff,#8b7880);
  background:radial-gradient(ellipse,var(--affsoft,rgba(139,120,128,.12)),transparent 68%);
  box-shadow:0 0 12px var(--affsoft,transparent);font-size:8px;opacity:.6;pointer-events:none
}
.combatant-shadow{
  bottom:5px!important;width:48px!important;height:11px!important;z-index:1!important;
  background:radial-gradient(ellipse,rgba(0,0,0,.68),rgba(0,0,0,0) 72%)!important
}
.combatant-sprite-image{
  bottom:4px!important;z-index:2!important;
  transform:translateX(-50%) scale(1.08)!important;transform-origin:50% 100%!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))!important
}
.combatant.enemy .combatant-sprite-image{
  transform:translateX(-50%) scaleX(-1) scale(1.08)!important;transform-origin:50% 100%!important
}
.combatant.unit-hover .combatant-sprite-image{bottom:13px!important}
.combatant.unit-hover .combatant-shadow{bottom:3px!important;width:42px!important;opacity:.68}
.combatant.unit-hover .combatant-ground-sigil{bottom:2px!important;opacity:.38}
.combatant.fighter .combatant-name{
  border-color:var(--aff,#d5a65a)!important;box-shadow:0 0 11px var(--affsoft,transparent)
}
.combatant.fighter.active-planner .combatant-sprite-image{
  filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 7px var(--aff,#e2bb57))!important
}
.combatant.fighter.active-planner .combatant-ground-sigil{opacity:1;box-shadow:0 0 18px var(--affsoft,transparent)}
.rarity-common .rarity-chip{color:#bcb6b8}
.rarity-uncommon .rarity-chip{color:#78bd82}
.rarity-rare .rarity-chip{color:#7db2df}
.rarity-legendary .rarity-chip{color:#e2bb57}
.rarity-mythic .rarity-chip{color:#e47aaa}

.run-sigils{display:flex;align-items:center;justify-content:center;gap:5px;min-width:74px}
.run-sigil{
  position:relative;width:22px;height:22px;display:grid;place-items:center;
  border:1px solid var(--aff,#8b7880);background:radial-gradient(circle,var(--affsoft),#090609 72%);
  transform:rotate(45deg);box-shadow:0 0 9px var(--affsoft)
}
.run-sigil i{display:block;transform:rotate(-45deg);color:var(--aff);font:normal 10px Georgia,serif}
.run-sigil.rarity-legendary{box-shadow:0 0 12px rgba(226,187,87,.28)}
.run-sigil.rarity-mythic{box-shadow:0 0 14px rgba(228,122,170,.32)}

.battlefield:before,.battlefield:after{
  content:"✦";position:absolute;z-index:1;color:rgba(226,187,87,.18);font:26px Georgia,serif;
  pointer-events:none;text-shadow:0 0 14px rgba(226,187,87,.09)
}
.battlefield:before{left:15px;top:12px}
.battlefield:after{right:15px;bottom:12px;transform:rotate(180deg)}
.battle-message{
  border-color:rgba(226,187,87,.42)!important;
  background:linear-gradient(90deg,rgba(8,5,7,.75),rgba(33,18,24,.88),rgba(8,5,7,.75))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 18px rgba(226,187,87,.06)
}
.turn-strip-panel{
  background:linear-gradient(90deg,rgba(226,187,87,.025),transparent 25%,transparent 75%,rgba(226,187,87,.025)),
  linear-gradient(180deg,#1b0f16,#0d080c)!important
}
.combatant-intent{
  border:1px solid rgba(226,187,87,.36)!important;background:rgba(13,8,11,.86)!important;
  color:#d9bd88!important;box-shadow:0 3px 12px rgba(0,0,0,.35)
}
.combatant.enemy .combatant-intent{border-color:rgba(190,72,78,.48)!important;color:#e0a1a3!important}

/* compact in-world character dossier */
#inspectOverlay{
  align-items:flex-start!important;justify-content:flex-end!important;padding:18px!important;
  background:linear-gradient(90deg,transparent 45%,rgba(3,2,3,.18) 72%,rgba(3,2,3,.62))!important;
  backdrop-filter:none!important;pointer-events:none
}
#inspectOverlay .inspect-card{
  pointer-events:auto;width:min(360px,34vw)!important;max-height:calc(100% - 36px)!important;
  padding:0!important;overflow:auto!important;scrollbar-width:none!important;
  background:linear-gradient(180deg,rgba(22,12,18,.97),rgba(8,6,8,.98))!important;
  border:1px solid #6c4450!important;
  box-shadow:-18px 22px 58px rgba(0,0,0,.55),inset 0 0 0 1px rgba(226,187,87,.035)!important
}
#inspectOverlay .inspect-card::-webkit-scrollbar{width:0;height:0}
#inspectOverlay .inspect-close{
  z-index:5;top:6px!important;right:7px!important;width:24px!important;height:24px!important;
  font:400 20px/20px Georgia,serif!important;color:#b4959f!important
}
.world-sheet{position:relative;padding:14px;border-top:3px solid var(--aff)}
.world-sheet:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,var(--affsoft),transparent 22%),radial-gradient(circle at 100% 0,var(--affsoft),transparent 34%);
  opacity:.7
}
.world-sheet>*{position:relative;z-index:1}
.world-sheet__header{
  display:grid;grid-template-columns:32px minmax(0,1fr) 58px;align-items:center;gap:9px;
  padding:3px 22px 10px 0;border-bottom:1px solid #4b303a
}
.world-sheet__sigil{
  width:30px;height:30px;display:grid;place-items:center;color:var(--aff);border:1px solid var(--aff);
  background:rgba(5,4,5,.48);transform:rotate(45deg);box-shadow:0 0 12px var(--affsoft);font-size:13px
}
.world-sheet__identity small{display:block;color:var(--aff);font:700 7px/1.2 Georgia,serif;letter-spacing:.10em}
.world-sheet__identity h2{margin:2px 0!important;color:#f0dfc5!important;font:700 20px/1 Georgia,serif!important}
.world-sheet__identity p{margin:0!important;color:#9d8790!important;font:7px/1.25 Arial,sans-serif!important;letter-spacing:.08em}
.world-sheet__portrait{width:56px!important;height:56px!important;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 3px #000)}
.world-sheet__lore{
  margin:9px 0 8px;padding:7px 9px;border-left:2px solid var(--aff);
  background:rgba(255,255,255,.018);color:#b9a2aa;font:italic 9px/1.35 Georgia,serif
}
.world-sheet__stats{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:3px!important}
.world-sheet__stats span{min-width:0;padding:5px 2px!important;text-align:center;border:1px solid #3c2930!important;background:rgba(255,255,255,.014)}
.world-sheet__stats small{display:block;color:#725e65;font:6px/1 Arial,sans-serif}
.world-sheet__stats b{display:block!important;margin-top:2px!important;color:#ead9c1!important;font:700 9px/1 Georgia,serif!important}
.world-sheet__skill{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0;padding:6px 8px;
  border:1px solid #4a333b;background:var(--affsoft)
}
.world-sheet__skill small{color:#8b737c;font:6px Arial,sans-serif;letter-spacing:.1em}
.world-sheet__skill b{color:#e7cfab;font:700 9px Georgia,serif}
.world-sheet__section{margin-top:9px}
.world-sheet__section h3{
  margin:0 0 4px!important;padding-bottom:3px;color:var(--aff)!important;border-bottom:1px solid #3a2830;
  font:700 7px Georgia,serif!important;letter-spacing:.10em!important
}
.inspect-rule{display:grid;grid-template-columns:104px minmax(0,1fr);gap:7px;padding:4px 2px;border-bottom:1px solid rgba(85,51,63,.32)}
.inspect-rule b{color:#e3cdb3;font:700 8px Georgia,serif}
.inspect-rule span{color:#9d8790;font:7px/1.35 Arial,sans-serif}
.inspect-rule--plain{opacity:.78}
.inspect-equip-list{display:grid;gap:3px}
.inspect-equip-row{
  display:grid;grid-template-columns:24px 1fr;gap:6px;align-items:center;min-height:31px;padding:4px 6px;
  border:1px solid #3a2830;background:rgba(255,255,255,.012)
}
.inspect-equip-row.has-item{border-color:#5e414b}
.inspect-equip-icon{width:21px;height:21px;display:grid;place-items:center;color:var(--aff);border:1px solid #4d353e;font-size:10px}
.inspect-equip-copy small,.inspect-equip-copy b,.inspect-equip-copy em{display:block}
.inspect-equip-copy small{color:#6f5961;font:6px Arial,sans-serif}
.inspect-equip-copy b{color:#d9c3aa;font:700 8px Georgia,serif}
.inspect-equip-copy em{color:#88737a;font:italic 6px/1.25 Arial,sans-serif}

/* reveal card cleanup */
.run-reveal-cards{gap:8px!important}
.ritual-card{overflow:hidden;background:radial-gradient(circle at 50% 25%,var(--affsoft,rgba(226,187,87,.06)),transparent 38%),linear-gradient(180deg,#1a0f17,#090609)!important}
.ritual-card:before,.ritual-card:after{
  content:"";position:absolute;width:28px;height:28px;border-color:var(--aff,#7c5f68);opacity:.55;pointer-events:none
}
.ritual-card:before{left:6px;top:6px;border-left:1px solid;border-top:1px solid}
.ritual-card:after{right:6px;bottom:6px;border-right:1px solid;border-bottom:1px solid}
.ritual-card__portrait{width:76px!important;height:76px!important;margin:5px auto 3px!important;filter:drop-shadow(0 3px 3px #000)}
.ritual-card__stats{font-size:7px!important}
.ritual-card__text{min-height:30px!important}

/* laptop-specific compression without shrinking the whole game globally */
@media(max-height:820px) and (min-width:900px){
  #game{min-height:560px!important}
  .game-header{min-height:52px!important;padding:7px 14px!important}
  .battle-screen{gap:7px!important}
  .timeline-panel{padding:5px 8px!important}
  .battle-interface{padding:6px!important;gap:6px!important}
  .turn-order,.battle-log{min-height:58px!important;padding:7px!important}
  .command-panel button{min-height:58px!important;padding:6px!important}
  .run-reveal-shell{max-height:none!important;overflow:visible!important}
  .run-reveal-cards{gap:6px!important}
  .ritual-card{padding:9px!important}
  .ritual-card__portrait{width:62px!important;height:62px!important}
  .ritual-card h3{font-size:13px!important}
  .ritual-card__text{font-size:7px!important;min-height:24px!important}
  .reveal-start{margin-top:8px!important}
}
@media(max-width:1100px){#inspectOverlay .inspect-card{width:min(330px,42vw)!important}}
@media(max-width:760px){
  #inspectOverlay{align-items:flex-end!important;justify-content:center!important;padding:8px!important;background:linear-gradient(0deg,rgba(3,2,3,.68),transparent 55%)!important}
  #inspectOverlay .inspect-card{width:calc(100% - 12px)!important;max-height:72%!important}
  .world-sheet__stats{grid-template-columns:repeat(3,1fr)!important}
}


/* =========================================================
   PRESENTATION PASS 05 — Relic award altar
   ========================================================= */
#upgradeOverlay{
  background:
    radial-gradient(ellipse at 50% 54%,rgba(69,43,27,.20),transparent 35%),
    rgba(4,3,4,.64)!important;
  backdrop-filter:blur(2px);
}
#upgradeOverlay .upgrade-panel,
#upgradeOverlay .run-reveal-shell{
  width:min(860px,92vw)!important;
  max-height:88vh!important;
  overflow:auto!important;
  scrollbar-width:none!important;
  background:
    linear-gradient(180deg,rgba(23,13,18,.98),rgba(8,6,8,.99))!important;
  border:1px solid #69424d!important;
  box-shadow:0 28px 80px rgba(0,0,0,.68),inset 0 0 45px rgba(226,187,87,.025)!important;
}
#upgradeOverlay .upgrade-panel::-webkit-scrollbar,
#upgradeOverlay .run-reveal-shell::-webkit-scrollbar{display:none!important}

.artifact-award{
  --aff:#d8ad59;
  --affsoft:rgba(216,173,89,.12);
  width:min(720px,100%);
  margin:0 auto;
  padding:18px 22px 16px;
  position:relative;
  background:
    radial-gradient(circle at 50% 8%,var(--affsoft),transparent 28%),
    linear-gradient(180deg,rgba(26,14,21,.97),rgba(9,6,9,.98));
  border:1px solid #65414b;
}
.artifact-award:before,.artifact-award:after{
  content:"";position:absolute;width:34px;height:34px;pointer-events:none;opacity:.65
}
.artifact-award:before{left:8px;top:8px;border-left:1px solid var(--aff);border-top:1px solid var(--aff)}
.artifact-award:after{right:8px;bottom:8px;border-right:1px solid var(--aff);border-bottom:1px solid var(--aff)}
.artifact-award__eyebrow{
  display:flex;justify-content:space-between;color:#9b7d87;
  font:700 7px Georgia,serif;letter-spacing:.16em
}
.artifact-award__relic{
  display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;
  width:max-content;max-width:82%;margin:6px auto 10px;text-align:left
}
.artifact-award__mark{
  width:50px;height:50px;display:grid;place-items:center;
  color:var(--aff);font-size:22px;transform:rotate(45deg);
  border:1px solid var(--aff);background:rgba(6,4,6,.66);
  box-shadow:0 0 24px var(--affsoft)
}
.artifact-award__mark::first-letter{transform:rotate(-45deg)}
.artifact-award__relic small{color:#8d717a;font:700 6px Arial,sans-serif;letter-spacing:.15em}
.artifact-award__relic h3{
  margin:2px 0!important;color:#f1dfc4!important;font:700 23px/1 Georgia,serif!important
}
.artifact-award__relic p{margin:3px 0 0!important;color:#c2aeb3!important;font:10px Georgia,serif!important}
.artifact-award__rule{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:8px 0 9px;
  color:#b58d58;font:700 7px Georgia,serif;letter-spacing:.15em
}
.artifact-award__rule span{height:1px;background:linear-gradient(90deg,transparent,#6b4b3a)}
.artifact-award__rule span:last-child{background:linear-gradient(90deg,#6b4b3a,transparent)}

.bearer-lineup{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important
}
.bearer-choice{
  --aff:#8b7880;--affsoft:rgba(139,120,128,.16);
  min-width:0!important;padding:8px 6px 7px!important;cursor:pointer;
  color:#e8d6bd!important;background:
    radial-gradient(circle at 50% 35%,var(--affsoft),transparent 42%),
    linear-gradient(180deg,#1a1016,#0b080a)!important;
  border:1px solid #51353e!important;
  transition:transform .14s ease,border-color .14s ease,filter .14s ease!important
}
.bearer-choice:hover,.bearer-choice:focus{
  transform:translateY(-3px)!important;border-color:var(--aff)!important;filter:brightness(1.12);
  box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 15px var(--affsoft)
}
.bearer-choice__stage{
  position:relative;display:block;width:104px;height:88px;margin:0 auto 3px
}
.bearer-choice__stage img{
  position:absolute;z-index:3;left:50%;bottom:6px;width:96px;height:96px;
  transform:translateX(-50%) scale(1.04);transform-origin:50% 100%;
  object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px #000)
}
.bearer-choice__shadow{
  position:absolute;z-index:1;left:50%;bottom:5px;width:48px;height:10px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 72%)
}
.bearer-choice__rune{
  position:absolute;z-index:0;left:50%;bottom:3px;width:54px;height:18px;
  transform:translateX(-50%) perspective(55px) rotateX(66deg);
  display:grid;place-items:center;border:1px solid var(--aff);border-radius:50%;
  color:var(--aff);background:radial-gradient(ellipse,var(--affsoft),transparent 70%);font-size:8px
}
.bearer-choice strong{display:block;color:#f0dcc0;font:700 12px Georgia,serif}
.bearer-choice small{display:block;margin-top:2px;color:var(--aff);font:700 6px Arial,sans-serif;letter-spacing:.08em}
.bearer-choice em{display:block;margin-top:5px;color:#78636b;font:normal 6px Arial,sans-serif;letter-spacing:.05em}
.reward-leave{
  display:block!important;width:max-content!important;min-width:190px!important;margin:10px auto 0!important;
  padding:7px 14px!important;color:#927a82!important;background:transparent!important;
  border:1px solid #4d343c!important;font:700 7px Georgia,serif!important;letter-spacing:.1em!important
}
.reward-leave:hover{color:#d9bd88!important;border-color:#80604b!important}

@media(max-height:760px) and (min-width:800px){
  .artifact-award{padding:11px 16px 10px}
  .artifact-award__relic{margin:2px auto 5px}
  .artifact-award__mark{width:38px;height:38px;font-size:17px}
  .artifact-award__relic h3{font-size:18px!important}
  .bearer-choice__stage{height:70px}
  .bearer-choice__stage img{width:78px;height:78px}
}
@media(max-width:650px){
  .bearer-lineup{grid-template-columns:1fr!important}
  .bearer-choice{display:grid!important;grid-template-columns:92px 1fr!important;text-align:left!important}
}

/* PRESENTATION PASS 05 — mortality + pixel-grounding refinement */
.combatant-sprite-image{
  transform:translateX(-50%) translateY(var(--ground-nudge,0px)) scale(1.08)!important;
}
.combatant.enemy .combatant-sprite-image{
  transform:translateX(-50%) translateY(var(--ground-nudge,0px)) scaleX(-1) scale(1.08)!important;
}
.bearer-choice__stage img{
  transform:translateX(-50%) translateY(var(--ground-nudge,0px)) scale(1.04)!important;
}
.mortality-state{
  width:max-content;margin:3px auto 0;padding:2px 5px;border:1px solid #4a3940;
  color:#7f7277;background:rgba(7,5,7,.58);font:700 6px Arial,sans-serif;letter-spacing:.11em;
}
.mortality-state.bloodied{color:#d39472;border-color:#754536;background:rgba(79,29,22,.42)}
.mortality-state.critical{color:#f0a0a0;border-color:#9d4148;background:rgba(100,20,29,.5);animation:mortalPulse 1.25s ease-in-out infinite}
.mortality-state.wounded{color:#c5a576;border-color:#6e573b}
@keyframes mortalPulse{50%{filter:brightness(1.35);box-shadow:0 0 9px rgba(190,52,65,.22)}}
@media(max-height:760px) and (min-width:800px){
  #upgradeOverlay .upgrade-panel,#upgradeOverlay .run-reveal-shell{max-height:94vh!important;overflow:hidden!important}
  .artifact-award{max-height:calc(94vh - 48px);overflow:hidden}
}

/* =========================================================
   PRESENTATION PASS 06 — unified pixel scale + RPG gear compare
   ========================================================= */

/* No browser-default scrollbar styling anywhere inside Arcade Battle. */
html,body,#game,#game *{
  scrollbar-width:thin;
  scrollbar-color:#69424d #0a0709;
}
html::-webkit-scrollbar,body::-webkit-scrollbar,#game *::-webkit-scrollbar{width:7px;height:7px}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track,#game *::-webkit-scrollbar-track{
  background:#0a0709;border-left:1px solid #24161b
}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,#game *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#79505a,#4f3038);border:1px solid #9b6d61;border-radius:8px
}
html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover,#game *::-webkit-scrollbar-thumb:hover{background:#8f5d67}

/* Normalize visible sprite height rather than raw PNG canvas dimensions. */
.combatant-sprite-image{
  transform:translateX(-50%) translateY(var(--ground-nudge,0px)) scale(var(--sprite-scale,.88))!important;
  transform-origin:50% 100%!important;
}
.combatant.enemy .combatant-sprite-image{
  transform:translateX(-50%) translateY(var(--ground-nudge,0px)) scaleX(-1) scale(var(--sprite-scale,.88))!important;
}
.combatant-sprite-wrap{width:92px!important;height:88px!important}
.combatant{width:118px!important;min-height:108px!important}
.combatant-shadow{width:42px!important;height:9px!important}
.combatant-ground-sigil{width:46px!important;height:15px!important;opacity:.48!important}
.combatant-name{font-size:9px!important;max-width:116px!important}
.combatant.fighter.active-planner .combatant-sprite-image{
  filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px var(--aff,#e2bb57))!important
}

/* Reward shell is intentionally wider so comparison information fits without scrolling. */
#upgradeOverlay{padding:18px!important}
#upgradeOverlay .ritual-reward-shell{
  width:min(1060px,96vw)!important;
  max-width:1060px!important;
  max-height:94vh!important;
  padding:16px 18px 12px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 0,rgba(123,73,46,.13),transparent 34%),
    linear-gradient(180deg,rgba(24,14,19,.995),rgba(7,5,7,.995))!important;
  border:1px solid #734752!important;
  box-shadow:0 30px 95px rgba(0,0,0,.78),inset 0 0 54px rgba(226,187,87,.025)!important;
}
#upgradeOverlay .ritual-reward-shell h2{margin:3px 0 8px!important;font-size:20px!important}
#upgradeOverlay .upgrade-kicker,#upgradeOverlay .upgrade-hint{letter-spacing:.12em!important}

.artifact-award{
  width:100%!important;max-width:none!important;padding:10px 14px 9px!important;
  overflow:hidden!important
}
.artifact-award__relic{margin:1px auto 5px!important;gap:11px!important}
.artifact-award__mark{width:42px!important;height:42px!important;font-size:18px!important}
.artifact-award__relic h3{font-size:20px!important;margin:0!important}
.artifact-award__relic p{font-size:9px!important}
.artifact-award__rule{margin:7px 0 4px!important}
.artifact-award__rule b{font-size:8px!important;letter-spacing:.14em!important}

.artifact-compare-legend{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;width:238px;margin:0 14px 4px auto;
  color:#735f66;font:700 5px Arial,sans-serif;letter-spacing:.11em;text-align:center
}

.bearer-lineup{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;
  align-items:stretch!important;margin-top:5px!important
}
.bearer-choice{
  position:relative!important;display:grid!important;
  grid-template-columns:82px 1fr!important;grid-template-rows:auto auto auto 1fr auto!important;
  column-gap:8px!important;row-gap:4px!important;align-items:start!important;
  min-height:224px!important;padding:8px!important;text-align:left!important;overflow:hidden!important;
  border:1px solid #51353e!important;
  background:
    radial-gradient(circle at 28% 30%,var(--affsoft),transparent 34%),
    linear-gradient(180deg,#191016,#0b080a)!important
}
.bearer-choice:before{
  content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.025);pointer-events:none
}
.bearer-choice:hover,.bearer-choice:focus-visible{
  transform:translateY(-2px)!important;border-color:var(--aff)!important;filter:brightness(1.09)!important;
  box-shadow:0 9px 25px rgba(0,0,0,.34),0 0 14px var(--affsoft)!important;outline:none!important
}
.bearer-choice__identity{grid-row:1 / span 5;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.bearer-choice__stage{position:relative!important;display:block!important;width:78px!important;height:70px!important;margin:0 auto 2px!important}
.bearer-choice__stage img{
  width:82px!important;height:82px!important;bottom:4px!important;
  transform:translateX(-50%) translateY(var(--ground-nudge,0px)) scale(var(--sprite-scale,.82))!important;
  transform-origin:50% 100%!important
}
.bearer-choice__shadow{width:38px!important;height:8px!important;bottom:4px!important}
.bearer-choice__rune{width:43px!important;height:14px!important;bottom:2px!important;font-size:7px!important;opacity:.65}
.bearer-choice__identity strong{display:block;color:#f0dcc0;font:700 11px Georgia,serif;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bearer-choice__identity small{display:block;margin-top:2px;color:var(--aff);font:700 5.5px Arial,sans-serif;letter-spacing:.06em}
.bearer-choice__identity em{display:block;margin-top:2px;color:#76636a;font:normal 5px Arial,sans-serif;letter-spacing:.08em}

.bearer-choice__condition{
  grid-column:2;display:flex;align-items:center;justify-content:space-between;padding-bottom:4px;
  border-bottom:1px solid #332128;color:#b89d86;font:700 6px Arial,sans-serif
}
.bearer-choice__condition b{color:#e4c7a3;font-size:7px}
.bearer-choice__condition i{font-style:normal;color:#8a747c;letter-spacing:.07em}

.gear-stat-grid{grid-column:2;display:grid;grid-template-columns:1fr;gap:2px}
.gear-stat{
  display:grid;grid-template-columns:44px 28px 40px 28px;align-items:center;gap:3px;
  min-height:18px;padding:2px 4px;background:rgba(0,0,0,.18);border-left:2px solid #3b2930;
  font:6px Arial,sans-serif
}
.gear-stat b{color:#8f777f;letter-spacing:.05em}
.gear-stat i{color:#c3b2a5;font-style:normal;text-align:right}
.gear-stat strong{color:#e8d7bf;font-size:7px;text-align:right}
.gear-stat em{font-style:normal;text-align:right;font-weight:800}
.gear-stat.gain{border-left-color:#678d65}.gear-stat.gain em{color:#8cc486}
.gear-stat.loss{border-left-color:#8f4c55}.gear-stat.loss em{color:#da7f86}
.gear-stat.same em{color:#62545a}

.bearer-choice__slot{
  grid-column:2;display:grid;grid-template-columns:44px 1fr;gap:2px 4px;padding:4px 5px;
  border:1px solid #34242a;background:#0c090b;font:6px Arial,sans-serif
}
.bearer-choice__slot>b{grid-row:1 / span 2;color:#846b72;letter-spacing:.08em}
.bearer-choice__slot span{color:#cbb49a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bearer-choice__slot em{color:#77575d;font:700 5px Arial,sans-serif;letter-spacing:.05em}
.bearer-choice__slot.empty em{color:#617863}
.bearer-choice__verdict{
  grid-column:2;align-self:end;display:block;padding:5px 7px;text-align:center;
  color:#d7bb8b;border:1px solid #5b4138;background:linear-gradient(180deg,#241712,#120d0b);
  font:700 6px Georgia,serif;letter-spacing:.1em
}
.bearer-choice:hover .bearer-choice__verdict{border-color:var(--aff);color:#f0d6a4}

.artifact-award__footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px;padding-top:6px;
  border-top:1px solid #332229;color:#746168;font:italic 6px Georgia,serif
}
.artifact-award__footer .reward-leave{margin:0!important;min-width:145px!important;padding:6px 11px!important}

@media(max-height:760px) and (min-width:800px){
  #upgradeOverlay{padding:7px!important}
  #upgradeOverlay .ritual-reward-shell{max-height:97vh!important;padding:8px 12px 7px!important}
  #upgradeOverlay .ritual-reward-shell h2{font-size:15px!important;margin:2px 0 4px!important}
  .artifact-award{padding:6px 10px!important}
  .artifact-award__mark{width:34px!important;height:34px!important;font-size:15px!important}
  .artifact-award__relic h3{font-size:16px!important}
  .artifact-award__rule{margin:4px 0 2px!important}
  .bearer-choice{min-height:190px!important;padding:6px!important;grid-template-columns:72px 1fr!important}
  .bearer-choice__stage{width:68px!important;height:58px!important}
  .bearer-choice__stage img{width:72px!important;height:72px!important}
  .gear-stat{min-height:15px!important}
  .artifact-award__footer{margin-top:4px!important;padding-top:4px!important}
}

@media(max-width:760px){
  #upgradeOverlay{padding:5px!important;align-items:flex-start!important}
  #upgradeOverlay .ritual-reward-shell{
    width:100%!important;max-height:calc(100dvh - 10px)!important;overflow-y:auto!important;padding:9px!important
  }
  .bearer-lineup{grid-template-columns:1fr!important;gap:6px!important}
  .bearer-choice{grid-template-columns:76px 1fr!important;min-height:186px!important}
  .artifact-compare-legend{display:none!important}
  .artifact-award__footer{position:sticky;bottom:0;background:rgba(8,6,8,.96);padding:7px 0 2px!important}
}

/* PASS 06 decision cues */
.bearer-choice__condition{grid-template-columns:auto auto 1fr!important;gap:5px!important}
.bearer-choice__condition strong{color:#d7bb8b;font:700 6px Arial,sans-serif;white-space:nowrap}
.bearer-choice__condition i{text-align:right}
.fit-badge{
  position:absolute;top:5px;right:5px;z-index:6;padding:3px 5px;
  color:#c9ae78;background:rgba(25,16,9,.9);border:1px solid #6b5230;
  font:700 4.8px Arial,sans-serif;letter-spacing:.07em;pointer-events:none
}
.bearer-choice.recommended-fit{border-color:#69503a!important}
.bearer-choice.recommended-fit:after{
  content:"";position:absolute;inset:1px;border:1px solid rgba(201,174,120,.12);pointer-events:none
}


/* =========================================================
   PRESENTATION PASS 07 — DENSE COLOR / STABLE SPRITES / GEAR READABILITY
   ========================================================= */
:root{
  --aff-fire:#f05a34;--aff-water:#3aa7ff;--aff-forest:#66cf57;--aff-frost:#a7e8ff;
  --aff-thunder:#b66cff;--aff-air:#eee6cb;--aff-blood:#e23a4f;--aff-void:#9e48d8;
}
/* No native white browser bars inside the game. */
#game *{scrollbar-width:thin;scrollbar-color:#66414d #0c080b}
#game .upgrade-card-shell,#game .artifact-award,#game .bearer-lineup,#game .bearer-choice{scrollbar-width:none}
#game .upgrade-card-shell::-webkit-scrollbar,#game .artifact-award::-webkit-scrollbar,#game .bearer-lineup::-webkit-scrollbar,#game .bearer-choice::-webkit-scrollbar{display:none}

/* Make affinity a repeated gameplay language, not a tiny label. */
.combatant{--unit-aff:#b58d58;filter:drop-shadow(0 8px 8px rgba(0,0,0,.38))}
.combatant.affinity-fire{--unit-aff:var(--aff-fire)}.combatant.affinity-water{--unit-aff:var(--aff-water)}
.combatant.affinity-forest{--unit-aff:var(--aff-forest)}.combatant.affinity-frost{--unit-aff:var(--aff-frost)}
.combatant.affinity-thunder{--unit-aff:var(--aff-thunder)}.combatant.affinity-air{--unit-aff:var(--aff-air)}
.combatant.affinity-blood{--unit-aff:var(--aff-blood)}.combatant.affinity-void{--unit-aff:var(--aff-void)}
.combatant-ground-sigil{border-color:color-mix(in srgb,var(--unit-aff) 68%,transparent)!important;background:radial-gradient(ellipse,var(--unit-aff),transparent 68%)!important;box-shadow:0 0 10px color-mix(in srgb,var(--unit-aff) 40%,transparent)!important}
.combatant-name{border-color:color-mix(in srgb,var(--unit-aff) 48%,#2d1c22)!important;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--unit-aff) 70%,transparent)!important}
.combatant-affinity-strip{display:flex;align-items:center;gap:3px;max-width:116px;margin:2px auto 2px;padding:2px 4px;border:1px solid color-mix(in srgb,var(--unit-aff) 45%,#2d1c22);background:linear-gradient(90deg,color-mix(in srgb,var(--unit-aff) 18%,#090709),#0a0709);font:700 5px Arial,sans-serif;letter-spacing:.04em;color:#cbb9a6}
.combatant-affinity-strip span{color:var(--unit-aff);font-size:8px}.combatant-affinity-strip b{color:var(--unit-aff);text-transform:uppercase}.combatant-affinity-strip em{margin-left:auto;font-style:normal;color:#8d7a81;text-transform:uppercase}
.health-readout{width:104px;margin:1px auto 1px;text-align:right;color:#bca69a;font:700 6px Arial,sans-serif}.health-readout b{color:#f0dfc8;font-size:7px}.health-readout span{opacity:.5;margin:0 1px}
.combatant-mini-stats{display:flex;justify-content:center;gap:3px;width:106px;margin:2px auto 0}.combatant-mini-stats span{min-width:31px;padding:2px 3px;border:1px solid #32242a;background:#0b080a;color:#c6b4a5;font:700 5.5px Arial,sans-serif;text-align:center}.combatant-mini-stats span:first-child{border-color:#633126;color:#e99b7f}.combatant-mini-stats span:nth-child(2){border-color:#34495e;color:#9bc4e4}.combatant-mini-stats span:nth-child(3){border-color:#4c3a61;color:#cbb0e4}
.health-bar{width:106px!important;margin:0 auto!important;height:7px!important;border-color:#40242c!important}.health-bar-fill{box-shadow:0 0 7px rgba(214,59,74,.35)}

/* Reward window: make the comparison the star. */
#upgradeOverlay .ritual-reward-shell{width:min(1180px,97vw)!important;max-width:1180px!important;padding:14px 16px 11px!important}
.artifact-award{padding:9px 12px 8px!important}
.artifact-award__relic p{font-size:11px!important;color:#d6c0a6!important;font-weight:700!important}
.artifact-award__rule b{font-size:9px!important;color:#d8b25e!important}
.artifact-compare-legend{display:grid!important;grid-template-columns:50px 42px 48px 58px!important;width:198px!important;margin:0 9px 4px auto!important;gap:4px!important;font-size:5.5px!important;color:#9b858c!important}
.bearer-lineup{gap:12px!important}.bearer-choice{grid-template-columns:94px 1fr!important;min-height:252px!important;padding:10px!important;background:radial-gradient(circle at 24% 27%,var(--affsoft),transparent 36%),linear-gradient(180deg,#1c1118,#090709)!important}
.bearer-choice__stage{width:90px!important;height:82px!important}.bearer-choice__stage img{width:88px!important;height:88px!important}
.bearer-choice__identity strong{font-size:13px!important;max-width:92px!important}.bearer-choice__identity small{font-size:6.5px!important}.bearer-choice__identity em{font-size:5.5px!important}
.bearer-choice__condition{grid-column:2!important;padding:4px 5px!important;background:#0b080a!important;border:1px solid #34242a!important;border-bottom-color:#51333e!important}.bearer-choice__condition b{font-size:8px!important;color:#f0dbc0!important}.bearer-choice__condition strong{font-size:7px!important;color:#e1c16e!important}.bearer-choice__condition i{font-size:5.5px!important}
.gear-stat-grid{gap:4px!important}.gear-stat{grid-template-columns:50px 42px 48px 58px!important;min-height:24px!important;padding:3px 5px!important;border:1px solid #2f2026!important;border-left-width:3px!important;background:linear-gradient(90deg,#0d090b,#130c10)!important;font-size:7px!important}.gear-stat b{font-size:6.5px!important}.gear-stat .stat-now{font-size:8px!important;color:#c9b8aa!important}.gear-stat .stat-after{font-size:9px!important;color:#f1e1cc!important}.gear-stat .stat-delta{padding:3px 4px!important;border-radius:2px!important;text-align:center!important;font-size:7.5px!important;letter-spacing:.02em!important}.gear-stat.gain{border-left-color:#5fba62!important}.gear-stat.gain .stat-delta{color:#b7f0b0!important;background:#17331a!important;border:1px solid #356d38!important}.gear-stat.loss{border-left-color:#c04d58!important}.gear-stat.loss .stat-delta{color:#ff9ea7!important;background:#36151a!important;border:1px solid #73303a!important}.gear-stat.same .stat-delta{color:#706168!important;background:#100c0e!important;border:1px solid #2c2024!important;font-size:5.5px!important}
.bearer-choice__slot{font-size:7px!important;padding:5px 6px!important}.bearer-choice__slot em{font-size:5.5px!important}.bearer-choice__verdict{font-size:7px!important;padding:6px 8px!important}
.fit-badge{font-size:5.5px!important;padding:4px 6px!important;color:#f0cf77!important;border-color:#9b7131!important;box-shadow:0 0 12px rgba(226,187,87,.16)}

/* Dense-but-readable fantasy color on interface furniture. */
.run-sigils>*{box-shadow:0 0 10px color-mix(in srgb,currentColor 32%,transparent)!important}
.turn-strip-panel{background:linear-gradient(90deg,rgba(54,21,31,.84),rgba(17,10,14,.96),rgba(38,18,31,.84))!important}
.command-panel button{position:relative;overflow:hidden!important}.command-panel button:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#8b2d37,#d7a344,#456f9e,#628448);opacity:.72}
.battle-message{border-color:#6e4e35!important;color:#e5c77e!important;box-shadow:0 0 14px rgba(225,178,73,.10)!important}

@media(max-height:760px) and (min-width:800px){
  .bearer-choice{min-height:220px!important;grid-template-columns:82px 1fr!important;padding:7px!important}
  .bearer-choice__stage{width:78px!important;height:68px!important}.bearer-choice__stage img{width:76px!important;height:76px!important}
  .gear-stat{min-height:20px!important;grid-template-columns:46px 38px 44px 54px!important}
}