@font-face {
  font-family: "WN Sans SC";
  src: url("../assets/fonts/WN-Sans-SC-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --earth-950: #17120d;
  --earth-900: #241a12;
  --earth-850: #302219;
  --earth-800: #3c2b1e;
  --earth-700: #5d432c;
  --loess-500: #b58b50;
  --loess-300: #d9bc82;
  --paper: #eee0c1;
  --ink: #f7eedb;
  --muted: #baa98b;
  --gold: #d6ad55;
  --gold-bright: #f0d181;
  --line: rgba(238, 224, 193, 0.2);
  --line-strong: rgba(238, 224, 193, 0.42);
  --self: #2e8190;
  --self-bright: #62c2cc;
  --self-soft: rgba(46, 129, 144, 0.22);
  --opponent: #a8453b;
  --opponent-bright: #e58272;
  --opponent-soft: rgba(168, 69, 59, 0.22);
  --success: #598b55;
  --danger: #bd5145;
  --han: #b8443f;
  --wei: #68717d;
  --shu: #45805a;
  --wu: #397c86;
  --qun: #a0733e;
  --card-w: 108px;
  --card-h: 150px;
  --slot-w: 90px;
  --slot-h: 126px;
  --font: "WN Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--earth-950);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
select {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
select:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

button:disabled {
  cursor: default;
  opacity: 0.42;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--earth-800) url("../assets/images/battlefield-bg.jpg") center 40% / cover no-repeat;
}

#app::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: rgba(23, 18, 13, 0.52);
}

#fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn,
.icon-btn,
.mode-button,
.filter-button,
.intel-tab,
.info-badge {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--earth-850);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.btn {
  min-height: 40px;
  padding: 9px 18px;
  font-weight: 700;
}

.btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.mode-button:hover:not(:disabled),
.filter-button:hover:not(:disabled),
.intel-tab:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.btn:active:not(:disabled),
.icon-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary {
  border-color: #e1be6a;
  background: #c99d45;
  color: #21170d;
}

.btn-primary:hover:not(:disabled) {
  background: #ddb85e;
  color: #17100a;
}

.btn-ghost {
  background: rgba(36, 26, 18, 0.82);
  color: var(--paper);
}

.btn-quiet {
  border-color: var(--line);
  background: rgba(36, 26, 18, 0.82);
  color: var(--muted);
}

.icon-btn {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 18px;
}

.eyebrow,
.intel-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}

/* Setup */
.setup-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr) 70px;
  background: rgba(23, 18, 13, 0.42);
}

.setup-header,
.setup-footer,
.player-bar,
.action-dock {
  background: rgba(28, 21, 15, 0.94) url("../assets/images/panel-texture.jpg") center / cover;
}

.setup-header {
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  align-items: center;
  gap: 20px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line-strong);
}

.brand-mark {
  display: block;
  width: 150px;
  height: 48px;
  object-fit: contain;
}

.setup-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.setup-progress span {
  min-width: 66px;
  padding: 5px 10px;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.setup-progress span.active {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.setup-progress span.done {
  border-color: var(--success);
  color: #a9d1a5;
}

.seed-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.seed-block strong {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.setup-main {
  min-height: 0;
  overflow: auto;
  padding: 30px max(24px, calc((100vw - 1240px) / 2));
}

.setup-heading {
  margin-bottom: 24px;
}

.setup-heading h1 {
  margin-top: 5px;
  color: var(--paper);
  font-size: 28px;
  line-height: 1.25;
}

.setup-subtitle {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.55;
}

.setup-content {
  min-height: 300px;
}

.setup-footer {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-top: 1px solid var(--line-strong);
}

.setup-status {
  color: var(--muted);
  text-align: center;
}

.battlefield-reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.battlefield-reveal {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--earth-800) url("../assets/images/battlefield-bg.jpg") center / cover no-repeat;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.battlefield-reveal::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(35, 25, 16, 0.64);
}

.battlefield-reveal > * {
  position: relative;
}

.battlefield-reveal .lane-index {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold-bright);
  font-size: 11px;
}

.battlefield-reveal h2 {
  margin-top: 90px;
  color: #fff3d2;
  font-size: 32px;
}

.battlefield-reveal > p {
  margin-top: 4px;
  color: var(--loess-300);
}

.battlefield-reveal .rule-text {
  position: absolute;
  right: 26px;
  bottom: 24px;
  left: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--paper);
  line-height: 1.6;
}

.draft-rosters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
}

.roster-line {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}

.roster-line.self {
  background: rgba(28, 86, 97, 0.82);
  border-right: 1px solid var(--line-strong);
}

.roster-line.opponent {
  background: rgba(105, 42, 36, 0.84);
}

.roster-line span {
  color: var(--muted);
  font-size: 12px;
}

.roster-line strong {
  color: #fff5dd;
}

.draft-pool {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.draft-general {
  position: relative;
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
  padding: 18px 14px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--loess-500);
  border-radius: 6px;
  background: var(--earth-800) url("../assets/images/card-art-placeholder.jpg") center top / cover no-repeat;
  color: var(--paper);
  text-align: left;
}

.draft-general::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(25, 18, 12, 0.54);
}

.draft-general > * {
  position: relative;
}

.draft-general:hover:not(:disabled) {
  border-color: var(--gold-bright);
  transform: translateY(-3px);
}

.draft-general:disabled:not([disabled=""]) {
  filter: grayscale(0.5);
}

.draft-general strong {
  color: #fff4d8;
  font-size: 21px;
}

.draft-general small {
  color: var(--muted);
  line-height: 1.4;
}

.faction-edge-han { border-top-color: var(--han) !important; }
.faction-edge-wei { border-top-color: var(--wei) !important; }
.faction-edge-shu { border-top-color: var(--shu) !important; }
.faction-edge-wu { border-top-color: var(--wu) !important; }
.faction-edge-qun { border-top-color: var(--qun) !important; }

.formation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.formation-lane {
  min-height: 330px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--self);
  border-radius: 6px;
  background: rgba(36, 26, 18, 0.94);
}

.formation-lane.is-main {
  border-top-color: var(--gold-bright);
}

.formation-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.formation-lane-head span {
  color: var(--muted);
  font-size: 12px;
}

.formation-terrain-effect {
  min-height: 78px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.formation-terrain-effect strong {
  color: var(--gold);
  font-size: 11px;
}

.formation-terrain-effect p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.formation-lane select {
  width: 100%;
  height: 42px;
  margin-top: 14px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--earth-900);
}

.main-radio {
  display: inline-flex;
  margin-top: 14px;
  align-items: center;
  gap: 7px;
  color: var(--gold-bright);
}

.formation-general-name {
  display: flex;
  margin-top: 22px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--paper);
  font-size: 25px;
}

.formation-general-name span {
  color: var(--muted);
  font-size: 12px;
}

.ability-summary {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ability-summary strong {
  color: var(--gold);
}

.ability-summary p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.6;
}

.loadout-list {
  display: grid;
  gap: 12px;
}

.loadout-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(36, 26, 18, 0.93);
}

.loadout-fixed h2 {
  color: var(--paper);
  font-size: 20px;
}

.loadout-fixed > p {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 11px;
}

.fixed-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fixed-card-chip {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--earth-900);
  color: var(--paper);
  font-size: 12px;
}

.fixed-card-chip:hover {
  border-color: var(--gold);
}

.loadout-choice-list {
  display: flex;
  gap: 12px;
}

.loadout-choice {
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
}

.loadout-choice.selected {
  border-color: var(--gold-bright);
  background: rgba(214, 173, 85, 0.12);
}

.mulligan-hand {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.mulligan-hand .card.selected {
  border-color: var(--gold-bright);
  transform: translateY(-18px);
  box-shadow: 0 0 0 3px rgba(240, 209, 129, 0.24), 0 18px 28px rgba(0, 0, 0, 0.38);
}

/* Cards */
.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid #7c6240;
  border-radius: 7px;
  background: var(--earth-800);
  color: var(--ink);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  user-select: none;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.card:hover:not(.disabled) {
  z-index: 5;
  border-color: var(--gold-bright);
  transform: translateY(-5px);
}

.card.selected {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(240, 209, 129, 0.2), 0 8px 18px rgba(0, 0, 0, 0.42);
  transform: translateY(-8px);
}

.card.disabled {
  opacity: 0.48;
}

.card-face {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 66% 34%;
  background: #6f5435 url("../assets/images/card-frame.jpg") center / cover no-repeat;
}

.card-art {
  position: relative;
  overflow: hidden;
  background: #72583b url("../assets/images/card-art-placeholder.jpg") center / cover no-repeat;
}

.card-art::after {
  position: absolute;
  inset: 0;
  content: "";
  border-bottom: 1px solid rgba(238, 224, 193, 0.4);
  background: rgba(31, 22, 14, 0.18);
}

.art-pattern {
  position: absolute;
  inset: 0;
}

.art-glyph {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 1;
  color: rgba(255, 242, 210, 0.86);
  font-size: 22px;
  transform: translate(-50%, -50%);
}

.art-slot-hint {
  display: none;
}

.art-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-power,
.card-faction-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 246, 221, 0.62);
  border-radius: 50%;
  color: #fff8e6;
  font-weight: 700;
}

.card-power {
  top: 5px;
  left: 5px;
  width: 28px;
  height: 28px;
  background: #283f48;
  font-size: 15px;
}

.card-faction-badge {
  top: 6px;
  right: 6px;
  width: 23px;
  height: 23px;
  font-size: 11px;
}

.card-faction-badge.han { background: var(--han); }
.card-faction-badge.wei { background: var(--wei); }
.card-faction-badge.shu { background: var(--shu); }
.card-faction-badge.wu { background: var(--wu); }
.card-faction-badge.qun { background: var(--qun); }

.card-body {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  background: rgba(36, 26, 18, 0.92);
  text-align: center;
}

.card-name {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff3d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.card-back {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: #523728 url("../assets/images/card-back.jpg") center / cover no-repeat;
}

.face-down .card-face {
  display: none;
}

.face-down .card-back {
  display: flex;
}

.card-back-mark {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(29, 20, 13, 0.84);
  color: var(--gold-bright);
  font-size: 17px;
}

.ambush-used::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 4;
  padding: 2px 4px;
  border-radius: 3px;
  background: #5d382a;
  color: #f0b29f;
  content: "已伏";
  font-size: 8px;
}

/* Match table */
.table {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: 68px 0 minmax(0, 1fr) 70px 184px;
  background: rgba(23, 18, 13, 0.18);
}

.table > .opponent-bar { grid-row: 1; }
.table > .lane-tabs { grid-row: 2; }
.table > .board-shell { grid-row: 3; }
.table > .self-bar { grid-row: 4; }
.table > .action-dock { grid-row: 5; }

.player-bar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(170px, auto) 1fr auto minmax(110px, auto);
  align-items: center;
  gap: 14px;
  padding: 7px 15px;
}

.opponent-bar {
  border-bottom: 3px solid var(--opponent);
  box-shadow: 0 5px 18px rgba(110, 35, 31, 0.28);
}

.self-bar {
  grid-template-columns: minmax(170px, auto) 1fr auto;
  border-top: 3px solid var(--self);
  box-shadow: 0 -5px 18px rgba(25, 91, 103, 0.28);
}

.player-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.player-identity > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.player-identity strong,
.player-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-identity strong {
  color: #fff4d9;
}

.player-identity > div span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.side-seal {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: white;
  font-weight: 700;
}

.side-seal.opponent { background: var(--opponent); }
.side-seal.self { background: var(--self); }

.general-strip {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.general-chip {
  position: relative;
  display: grid;
  min-width: 126px;
  grid-template-columns: 22px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 5px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--loess-500);
  border-radius: 5px;
  background: rgba(35, 26, 18, 0.88);
  color: var(--paper);
  text-align: left;
}

.general-chip:hover {
  border-color: var(--gold);
}

.general-chip .general-lane {
  grid-row: 1 / 3;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--earth-700);
  color: var(--paper);
  font-size: 10px;
}

.general-chip strong {
  font-size: 12px;
}

.general-chip > span:not(.general-lane):not(.heart-route) {
  color: var(--muted);
  font-size: 9px;
}

.heart-route {
  grid-row: 1 / 3;
  max-width: 82px;
  color: var(--gold-bright);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.player-bar.turn-active {
  z-index: 12;
}

.opponent-bar.turn-active {
  background: rgba(112, 42, 37, 0.28);
  box-shadow: inset 0 -3px 0 var(--opponent-bright), 0 5px 22px rgba(110, 35, 31, 0.46);
}

.self-bar.turn-active {
  background: rgba(29, 91, 102, 0.28);
  box-shadow: inset 0 3px 0 var(--self-bright), 0 -5px 22px rgba(25, 91, 103, 0.44);
}

.action-indicator {
  position: absolute;
  top: 76px;
  left: 50%;
  z-index: 45;
  display: grid;
  min-width: min(440px, calc(100vw - 32px));
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--gold);
  border-radius: 5px;
  background: rgba(24, 18, 13, 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.44);
  pointer-events: none;
  transform: translateX(-50%);
}

.action-indicator.opponent { border-left-color: var(--opponent-bright); }
.action-indicator.self { border-left-color: var(--self-bright); }
.action-indicator.both { border-left-color: var(--gold-bright); }

.action-indicator > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.action-indicator strong {
  color: var(--paper);
  font-size: 16px;
}

.action-indicator small {
  color: var(--muted);
  font-size: 11px;
}

.match-meta {
  display: flex;
  gap: 6px;
}

.status-pill {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--earth-900);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.status-pill.phase {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.resource-count {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 11px;
}

.resource-count strong {
  color: var(--opponent-bright);
  font-size: 16px;
}

.formation-badges {
  display: flex;
  gap: 7px;
}

.info-badge {
  min-height: 30px;
  padding: 5px 9px;
  color: var(--paper);
  font-size: 11px;
}

.lane-tabs {
  display: none;
}

.board-shell {
  display: grid;
  min-height: 0;
  grid-template-columns: 50px minmax(0, 1fr) 278px;
  background: rgba(82, 57, 34, 0.52);
}

.phase-rail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid var(--line);
  background: rgba(28, 21, 15, 0.9);
}

.phase-rail span {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #94866f;
  font-size: 10px;
}

.phase-rail span.active {
  border-color: var(--gold);
  background: rgba(214, 173, 85, 0.14);
  color: var(--gold-bright);
}

.lanes {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}

.lane {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 34px minmax(116px, 1fr) 70px minmax(116px, 1fr) 34px;
  gap: 3px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: rgba(135, 99, 55, 0.36) url("../assets/images/battlefield-bg.jpg") center / cover no-repeat;
}

.lane::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: rgba(56, 39, 24, 0.36);
  pointer-events: none;
}

.lane > * {
  position: relative;
  z-index: 1;
}

.lane.self-leading {
  border-bottom: 3px solid var(--self-bright);
}

.lane.opponent-leading {
  border-top: 3px solid var(--opponent-bright);
}

.lane.selected-target {
  box-shadow: inset 0 0 0 3px var(--gold-bright), 0 0 18px rgba(240, 209, 129, 0.38);
}

.lane.legal-target:not(.selected-target) {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(240, 209, 129, 0.55);
}

.lane.legal-target:hover {
  border-color: var(--gold-bright);
}

.formation-rank,
.card-rank {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.formation-rank.opponent,
.card-rank.opponent {
  background: var(--opponent-soft);
}

.formation-rank.self,
.card-rank.self {
  background: var(--self-soft);
}

.lane-station {
  display: flex;
  min-width: 132px;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--paper);
}

.lane-station.opponent { background: rgba(112, 42, 37, 0.88); }
.lane-station.self { background: rgba(29, 91, 102, 0.9); }

.lane-station.trigger-ready,
.terrain-name.trigger-ready {
  position: relative;
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(240, 209, 129, 0.42), 0 0 12px rgba(240, 209, 129, 0.3);
}

.lane-station.trigger-ready::after,
.terrain-name.trigger-ready::after {
  position: absolute;
  top: 2px;
  right: 3px;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--gold-bright);
  color: var(--ink);
  content: "可发动";
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}

.lane-station span {
  color: rgba(255, 245, 220, 0.72);
  font-size: 9px;
}

.lane-station strong {
  font-size: 12px;
}

.card-slot {
  position: relative;
  width: var(--slot-w);
  height: var(--slot-h);
  flex: 0 0 auto;
  border: 1px dashed rgba(238, 224, 193, 0.28);
  border-radius: 6px;
  background: rgba(26, 19, 13, 0.26);
}

.card-slot.opponent {
  border-color: rgba(229, 130, 114, 0.35);
}

.card-slot.self {
  border-color: rgba(98, 194, 204, 0.38);
}

.card-slot.filled {
  border-style: solid;
  background: transparent;
}

.card-slot .card {
  --card-w: var(--slot-w);
  --card-h: var(--slot-h);
  position: absolute;
  inset: -1px;
}

.card-state-badges {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 7;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.card-state-badges span {
  display: flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--earth-900);
  color: var(--gold-bright);
  font-size: 8px;
}

.card-state-badges .power-source-badge {
  display: flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--gold-bright);
  border-radius: 50%;
  background: var(--earth-900);
  color: var(--gold-bright);
  font-size: 9px;
  font-weight: 700;
  pointer-events: auto;
}

.card-state-badges .power-source-badge:hover,
.card-state-badges .power-source-badge:focus-visible {
  border-color: var(--paper);
  color: var(--paper);
  box-shadow: 0 0 0 2px rgba(240, 209, 129, 0.3);
}

.lane-clash {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(31, 23, 16, 0.9);
}

.terrain-name {
  min-width: 0;
  background: transparent;
  text-align: left;
}

.terrain-name strong,
.terrain-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terrain-name strong {
  color: #fff0cd;
  font-size: 17px;
}

.terrain-name span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.power-versus {
  display: flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.power-versus strong {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--earth-950);
  font-size: 24px;
}

.power-versus strong.opponent { color: var(--opponent-bright); }
.power-versus strong.self { color: var(--self-bright); }

.power-versus span {
  color: var(--gold);
  font-size: 17px;
}

.intel-panel {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 56%) minmax(0, 44%);
  border-left: 1px solid var(--line-strong);
  background: rgba(28, 21, 15, 0.94);
}

.intel-section {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.intel-section + .intel-section {
  border-top: 1px solid var(--line-strong);
}

.intel-heading {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 13, 10, 0.45);
}

.intel-heading strong {
  color: var(--gold-bright);
  font-size: 12px;
}

.intel-heading span {
  color: var(--muted);
  font-size: 9px;
}

.intel-body {
  min-height: 0;
  overflow: auto;
  padding: 12px;
  font-size: 13px;
}

.intel-body h2 {
  margin: 5px 0 12px;
  color: var(--paper);
  font-size: 18px;
}

.intel-body p,
.intel-copy {
  color: var(--muted);
  line-height: 1.6;
  white-space: pre-line;
}

.effect-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.effect-summary span {
  padding: 3px 6px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold-bright);
  font-size: 10px;
}

.effect-summary strong {
  color: var(--paper);
  font-size: 14px;
}

.effect-outcomes p {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 3px solid var(--line-strong);
}

.effect-outcomes p.self { border-left-color: var(--self-bright); }
.effect-outcomes p.opponent { border-left-color: var(--opponent-bright); }

.intel-body section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.intel-body section strong {
  color: var(--gold);
}

.resolution-order,
.route-note {
  margin-top: 9px;
  color: var(--loess-300);
  font-size: 11px;
}

.resolution-log {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 12px;
  scroll-behavior: smooth;
}

.resolution-log-empty {
  padding: 12px 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.resolution-entry {
  position: relative;
  margin-top: 6px;
  padding: 7px 8px 7px 11px;
  border-left: 3px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
  transition: background 180ms ease, border-color 180ms ease;
}

.resolution-entry.self { border-left-color: var(--self-bright); }
.resolution-entry.opponent { border-left-color: var(--opponent-bright); }
.resolution-entry.system { border-left-color: var(--gold); }

.resolution-entry.active {
  background: rgba(214, 173, 85, 0.13);
  box-shadow: inset 0 0 0 1px rgba(240, 209, 129, 0.18);
}

.resolution-entry strong,
.resolution-entry span {
  display: block;
}

.resolution-entry strong {
  color: var(--paper);
  font-size: 11px;
  line-height: 1.35;
}

.resolution-entry span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.action-dock {
  position: relative;
  z-index: 9;
  display: grid;
  min-width: 0;
  grid-template-columns: 156px minmax(0, 1fr) 180px;
  gap: 9px;
  padding: 9px 12px;
  border-top: 1px solid var(--line-strong);
}

.phase-actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.mode-button {
  display: grid;
  min-height: 43px;
  grid-template-columns: 28px 1fr;
  align-items: center;
  padding: 5px 8px;
  color: var(--muted);
  text-align: left;
}

.mode-button > span {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--earth-700);
  color: var(--paper);
  font-size: 10px;
}

.mode-button strong {
  font-size: 12px;
}

.mode-button.active {
  border-color: var(--gold-bright);
  background: rgba(214, 173, 85, 0.16);
  color: var(--gold-bright);
}

.phase-note {
  padding: 12px;
  border-left: 3px solid var(--gold);
  color: var(--paper);
  line-height: 1.5;
}

.hand-scroller {
  position: relative;
  min-width: 0;
  height: 100%;
}

.hand-viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.hand-nav {
  display: none;
}

.hand {
  display: flex;
  min-width: min-content;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 10px 0;
}

.hand .card {
  --card-w: 100px;
  --card-h: 139px;
}

.empty-hand {
  display: flex;
  min-width: 180px;
  height: 100px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
}

.command-panel {
  display: grid;
  grid-template-columns: 1fr 38px;
  grid-template-rows: 38px 1fr;
  gap: 7px;
  align-items: stretch;
}

.command-panel #btn-reform {
  grid-column: 1;
}

.command-panel #btn-gallery {
  grid-column: 2;
}

.command-primary {
  grid-column: 1 / -1;
  min-width: 0;
  white-space: normal;
}

/* Gallery */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  grid-template-rows: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: rgba(23, 18, 13, 0.98);
}

.gallery-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line-strong);
}

.gallery-header h2 {
  color: var(--paper);
  font-size: 21px;
}

.gallery-filters {
  display: flex;
  flex: 1;
  gap: 6px;
}

.filter-button {
  min-height: 30px;
  padding: 4px 11px;
  color: var(--muted);
  font-size: 11px;
}

.filter-button.active {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.gallery-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  align-content: start;
  gap: 13px;
  overflow: auto;
  padding: 8px;
}

.gallery-grid .card {
  margin: 0 auto;
}

.gallery-preview {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--earth-850);
}

.preview-card-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.preview-card-wrap .card {
  --card-w: 160px;
  --card-h: 222px;
}

.gallery-detail h3 {
  color: var(--paper);
  font-size: 20px;
}

.gallery-detail .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 12px;
}

.gallery-detail .tag {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--loess-300);
  font-size: 9px;
}

.gallery-detail .effect-block,
.gallery-detail p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.gallery-detail .effect-label {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 10px;
}

/* Decisions, tooltip, feedback */
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 12, 9, 0.8);
}

.decision-dialog {
  width: min(720px, 96vw);
  max-height: 88vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--gold);
  border-radius: 7px;
  background: var(--earth-850);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.48);
}

.decision-dialog h2 {
  margin: 5px 0 18px;
  color: var(--paper);
  font-size: 25px;
}

.decision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.rematch-seed-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.seed-field-group {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

.next-seed-field {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.rematch-seed-field label {
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
}

.rematch-seed-field label span,
.rematch-seed-field small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.rematch-seed-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
}

.rematch-seed-control input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  outline: none;
  background: var(--earth-900);
  color: var(--paper);
  font: inherit;
  letter-spacing: 0;
}

.rematch-seed-control input[readonly] {
  cursor: text;
  font-variant-numeric: tabular-nums;
}

.rematch-seed-control input:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(214, 173, 85, 0.16);
}

.rematch-seed-control input[aria-invalid="true"] {
  border-color: var(--opponent-bright);
}

.rematch-seed-field .field-error {
  min-height: 14px;
  color: var(--opponent-bright);
}

.fate-choice-list {
  display: grid;
  gap: 8px;
}

.decision-prompt {
  margin: -8px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.trigger-consequence {
  padding: 10px 12px;
  border-left: 4px solid var(--gold);
  background: rgba(214, 173, 85, 0.09);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.55;
}

.effect-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.effect-choice {
  display: grid;
  min-height: 62px;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 5px;
  background: var(--earth-900);
  color: var(--paper);
  text-align: left;
}

.effect-choice:hover {
  border-color: var(--gold-bright);
  background: var(--earth-800);
}

.effect-choice strong {
  font-size: 13px;
}

.effect-choice span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.fate-choice {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--success);
  border-radius: 5px;
  background: var(--earth-900);
  color: var(--paper);
  text-align: left;
}

.fate-choice.switch {
  border-left-color: var(--gold);
}

.fate-choice:hover {
  border-color: var(--gold-bright);
}

.fate-choice > span {
  color: var(--muted);
  font-size: 11px;
}

.fate-choice small,
.fate-choice p {
  grid-column: 1 / -1;
}

.fate-choice small {
  color: var(--gold-bright);
  font-size: 11px;
}

.fate-choice p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.fate-choice .fate-rules {
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--paper);
}

.result-summary {
  display: grid;
  gap: 7px;
}

.result-lane {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  align-items: center;
  padding: 10px 12px;
  border-left: 4px solid var(--line-strong);
  background: var(--earth-900);
}

.result-lane.self { border-left-color: var(--self-bright); }
.result-lane.opponent { border-left-color: var(--opponent-bright); }

.result-lane span {
  color: var(--paper);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.result-lane em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.result-total {
  margin-top: 12px;
  color: var(--gold-bright);
  text-align: center;
}

.tooltip {
  position: fixed;
  z-index: 200;
  width: min(330px, calc(100vw - 28px));
  padding: 11px 13px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: rgba(24, 18, 13, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.46);
  pointer-events: none;
}

.tooltip strong {
  display: block;
  color: var(--gold-bright);
  line-height: 1.4;
}

.tooltip p {
  margin-top: 5px;
  color: var(--paper);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
}

.toast-layer {
  position: fixed;
  top: 78px;
  left: 50%;
  z-index: 160;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  transform: translateX(-50%);
  transition: top 160ms ease;
}

.toast-layer.resolution-active {
  top: 150px;
}

.toast {
  padding: 9px 16px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: rgba(28, 21, 15, 0.96);
  color: var(--gold-bright);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  animation: toast-life 2300ms ease forwards;
}

.toast.danger {
  border-color: var(--danger);
  color: #f4b0a8;
}

.toast.success {
  border-color: var(--success);
  color: #b7d9b3;
}

.float-layer {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow: hidden;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: spark-out 620ms ease forwards;
}

.shockwave {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  animation: shock-out 500ms ease forwards;
  transform: translate(-50%, -50%);
}

.float-num {
  position: absolute;
  color: var(--gold-bright);
  font-size: 25px;
  font-weight: 700;
  animation: number-out 900ms ease forwards;
}

.float-num.plus { color: #9fd19b; }
.float-num.minus { color: #ef9688; }

.enter-board {
  animation: card-enter 520ms ease;
}

.effect-focus {
  z-index: 20 !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 3px rgba(240, 209, 129, 0.32), 0 0 24px rgba(240, 209, 129, 0.52) !important;
}

.effect-source-focus {
  z-index: 21 !important;
  box-shadow: 0 0 0 2px rgba(240, 209, 129, 0.5), 0 0 30px rgba(240, 209, 129, 0.66) !important;
}

.resolution-card-proxy {
  position: fixed !important;
  z-index: 145 !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: center;
  transition: none !important;
}

.resolution-card-proxy.revealing {
  animation: revealFlip 380ms ease both;
}

.resolution-card-proxy.concealing {
  animation: concealFlip 440ms ease both;
}

.ambush-set-proxy,
.ambush-reveal-proxy {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 2px rgba(240, 209, 129, 0.34), 0 0 24px rgba(240, 209, 129, 0.44) !important;
}

.resolution-card-dismiss {
  animation: resolution-dismiss 360ms ease-in forwards;
}

.effect-protect { box-shadow: 0 0 0 3px rgba(89, 139, 85, 0.46), 0 0 28px rgba(89, 139, 85, 0.62) !important; }
.effect-silence,
.effect-remove,
.effect-withdraw { filter: saturate(0.25) contrast(1.15); }

@keyframes toast-life {
  0% { opacity: 0; transform: translateY(-8px); }
  12%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes spark-out {
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

@keyframes shock-out {
  to { width: 110px; height: 110px; opacity: 0; }
}

@keyframes number-out {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

@keyframes card-enter {
  0% { opacity: 0; transform: translateY(-26px) scale(1.08); }
  65% { opacity: 1; transform: translateY(3px) scale(0.98); }
  100% { transform: none; }
}

@keyframes revealFlip {
  0% { filter: brightness(1.1); transform: scaleX(1); }
  46%, 54% { filter: brightness(1.8); transform: scaleX(0.04) scale(1.06); }
  100% { filter: none; transform: none; }
}

@keyframes concealFlip {
  0% { filter: brightness(1.2); transform: scaleX(1); }
  46%, 54% { filter: brightness(1.65); transform: scaleX(0.04) scale(1.05); }
  100% { filter: none; transform: none; }
}

@keyframes resolution-dismiss {
  to { filter: grayscale(0.8); opacity: 0; transform: translateX(var(--dismiss-x)) scale(0.72) rotate(7deg); }
}

@media (max-width: 1180px) {
  :root {
    --slot-w: 80px;
    --slot-h: 112px;
  }

  .draft-pool {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }

  .draft-general {
    min-height: 190px;
  }

  .board-shell {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .intel-panel {
    display: none;
  }

  .general-chip {
    min-width: 108px;
  }

  .lane-station {
    min-width: 116px;
  }

  .hand .card {
    --card-w: 92px;
    --card-h: 128px;
  }
}

@media (max-width: 820px) {
  html,
  body,
  #app {
    min-height: 100svh;
  }

  .setup-screen {
    grid-template-rows: 58px minmax(0, 1fr) 64px;
  }

  .setup-header {
    grid-template-columns: 110px 1fr auto;
    gap: 8px;
    padding: 6px 10px;
  }

  .brand-mark {
    width: 100px;
    height: 40px;
  }

  .setup-progress {
    gap: 3px;
  }

  .setup-progress span {
    min-width: 0;
    flex: 1;
    padding: 4px 2px;
    font-size: 9px;
  }

  .seed-block > span,
  .seed-block > strong {
    display: none;
  }

  .setup-main {
    padding: 18px 12px;
  }

  .setup-heading h1 {
    font-size: 23px;
  }

  .setup-footer {
    grid-template-columns: auto 1fr auto;
    gap: 7px;
    padding: 8px 10px;
  }

  .setup-footer .btn {
    padding: 8px 11px;
    font-size: 11px;
  }

  .setup-status {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .battlefield-reveal-grid,
  .formation-grid {
    grid-template-columns: 1fr;
  }

  .battlefield-reveal {
    min-height: 230px;
  }

  .battlefield-reveal h2 {
    margin-top: 42px;
  }

  .draft-rosters {
    grid-template-columns: 1fr;
  }

  .roster-line.self {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .draft-pool {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .draft-general {
    min-height: 180px;
  }

  .loadout-row {
    grid-template-columns: 1fr;
  }

  .loadout-choice-list {
    justify-content: center;
  }

  .mulligan-hand {
    min-height: 0;
    flex-wrap: wrap;
    gap: 9px;
  }

  .mulligan-hand .card {
    --card-w: 92px;
    --card-h: 128px;
  }

  .table {
    grid-template-rows: 58px 38px minmax(330px, 1fr) 52px 194px;
  }

  .player-bar {
    padding: 5px 8px;
  }

  .opponent-bar {
    grid-template-columns: minmax(118px, 1fr) auto auto;
  }

  .self-bar {
    grid-template-columns: 1fr;
  }

  .general-strip,
  .formation-badges {
    display: none;
  }

  .side-seal {
    width: 30px;
    height: 30px;
  }

  .player-identity strong {
    font-size: 12px;
  }

  .match-meta .status-pill:first-child {
    display: none;
  }

  .status-pill {
    padding: 4px 6px;
    font-size: 9px;
  }

  .resource-count {
    gap: 5px;
    font-size: 9px;
  }

  .resource-count strong {
    font-size: 13px;
  }

  .lane-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line-strong);
    background: rgba(28, 21, 15, 0.96);
  }

  .lane-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 10px;
  }

  .lane-tabs button.active {
    border-bottom: 2px solid var(--gold-bright);
    color: var(--paper);
  }

  .lane-tabs strong.self { color: var(--self-bright); }
  .lane-tabs strong.opponent { color: var(--opponent-bright); }

  .board-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .phase-rail {
    display: none;
  }

  .lanes {
    display: block;
    padding: 5px;
  }

  .lane {
    display: none;
    height: 100%;
    grid-template-rows: 28px minmax(94px, 1fr) 56px minmax(94px, 1fr) 28px;
  }

  .lane.mobile-active {
    display: grid;
  }

  :root {
    --slot-w: 70px;
    --slot-h: 98px;
  }

  .lane-station {
    min-width: 120px;
    height: 24px;
  }

  .terrain-name strong {
    font-size: 15px;
  }

  .power-versus strong {
    width: 35px;
    height: 35px;
    font-size: 19px;
  }

  .self-bar .player-identity {
    justify-content: center;
  }

  .action-dock {
    grid-template-columns: minmax(0, 1fr) minmax(156px, auto);
    grid-template-rows: 130px 46px;
    gap: 5px;
    padding: 6px;
  }

  .phase-actions {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    gap: 4px;
  }

  .mode-button {
    min-width: 0;
    min-height: 40px;
    flex: 1 1 0;
    grid-template-columns: 22px 1fr;
    padding: 4px;
  }

  .mode-button > span {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }

  .mode-button strong {
    font-size: 10px;
  }

  .phase-note {
    padding: 7px;
    font-size: 10px;
  }

  .hand-scroller {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hand-viewport {
    overscroll-behavior-x: contain;
    scroll-padding-inline: 38px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .hand-viewport::-webkit-scrollbar {
    display: none;
  }

  .hand-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    width: 32px;
    height: 46px;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    border-color: rgba(240, 209, 129, 0.62);
    background: rgba(36, 26, 18, 0.94);
    color: var(--gold-bright);
    font-size: 26px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .hand-scroller.has-overflow .hand-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .hand-scroller.has-overflow .hand-nav:disabled {
    opacity: 0.32;
    pointer-events: none;
  }

  .hand-nav-prev {
    left: 2px;
  }

  .hand-nav-next {
    right: 2px;
  }

  .hand {
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 38px 0;
  }

  .hand .card {
    --card-w: 82px;
    --card-h: 114px;
    scroll-snap-align: center;
  }

  .command-panel {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 48px minmax(72px, 1fr) 30px;
    grid-template-rows: 42px;
    gap: 4px;
  }

  .command-panel #btn-reform {
    grid-column: 1;
    grid-row: 1;
  }

  .command-panel #btn-confirm {
    grid-column: 2;
    grid-row: 1;
  }

  .command-panel #btn-gallery {
    grid-column: 3;
    grid-row: 1;
  }

  .command-panel .icon-btn {
    width: 30px;
    height: 42px;
    font-size: 12px;
  }

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

  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 8px;
  }

  .gallery-header {
    flex-wrap: wrap;
    padding-bottom: 7px;
  }

  .gallery-header h2 {
    font-size: 17px;
  }

  .gallery-filters {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .gallery-preview {
    display: none;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }

  .gallery-grid .card {
    --card-w: 88px;
    --card-h: 122px;
  }

  .fate-choice {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .effect-choice-list {
    grid-template-columns: 1fr;
  }

  .action-indicator {
    top: 64px;
    min-width: calc(100vw - 20px);
    padding: 8px 12px;
  }

  .action-indicator strong {
    font-size: 14px;
  }

  .result-lane {
    grid-template-columns: 1fr 70px 75px;
  }
}

@media (max-width: 430px) {
  .setup-subtitle {
    font-size: 12px;
  }

  .battlefield-reveal {
    min-height: 210px;
    padding: 18px;
  }

  .battlefield-reveal .rule-text {
    right: 18px;
    bottom: 16px;
    left: 18px;
  }

  .draft-general {
    min-height: 165px;
    padding: 12px 10px;
  }

  .draft-general strong {
    font-size: 18px;
  }

  .formation-lane {
    min-height: 290px;
  }

  .card-rank {
    gap: 3px;
  }

  :root {
    --slot-w: 67px;
    --slot-h: 94px;
  }

  .lane-clash {
    padding: 4px 7px;
  }

  .terrain-name span {
    display: none;
  }

  .power-versus {
    gap: 5px;
  }

  .power-versus strong {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }

  .decision-dialog {
    padding: 18px;
  }

  .decision-actions .btn {
    min-width: 0;
    flex: 1;
  }

  .rematch-seed-field {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .next-seed-field {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}