/* v3.1 시안(docs/design/v3.1 buttons.css·scenes.css)의 PAC 계열 표현을 실제 v2 화면에 입힌다.
   표현만 바꾼다 — 마크업·클래스·게임 판정은 그대로다. 이 파일은 가장 마지막에 읽혀 앞선 스타일을 덮는다.
   - 2px 검은 외곽선, 안쪽 베벨, 단단한 오프셋 그림자를 가진 입체 버튼과 카드
   - 중립 슬레이트 면 위에서 노란색으로 선택·주요 행동을 표시
   - 녹색은 확정, 파랑은 보조 행동, 빨강은 닫기·위험 */

:root {
  color-scheme: dark;
  --ground: #141823;
  --ground-grid: #1b2030;
  --surface: #20263a;
  --surface-2: #2a3147;
  --surface-3: #353e58;
  --surface-hover: #3e4966;
  --line: #3a4560;
  --line-soft: #2e3650;
  --line-strong: #5a6788;
  --edge: #0a0d15;
  --drop: #0a0d15;

  --ink: #f4f6fa;
  --ink-muted: #bcc4d6;
  --ink-faint: #8c96ad;
  --ink-inverse: #141823;

  --accent: #f7d51d;
  --accent-ink: #302510;
  --accent-soft: color-mix(in srgb, #f7d51d 22%, transparent);
  --signal: #92cc41;
  --signal-dim: #3d5a1c;
  --danger: #ff7a6e;
  --danger-dim: #6b2a2a;
  --health: #ff7b7b;
  --mana: #48b5ff;
  --shield: #55d7df;
  --gold: #ffd84a;
  --boss: #c9a2ff;
  --warn: #ffa851;
  --eyebrow: #a7e05a;

  /* 버튼 면 — PAC 원본 팔레트 */
  --btn-face: #54596b;
  --btn-shade: #383f50;
  --btn-hover: #61738a;
  --yellow-face: #f7d51d;
  --yellow-shade: #b29216;
  --yellow-hover: #ffe55e;
  --blue-face: #109fff;
  --blue-shade: #006bb3;
  --blue-hover: #48b5ff;
  --green-face: #92cc41;
  --green-shade: #65a013;
  --green-hover: #a5df56;
  --red-face: #e76e55;
  --red-shade: #a83d40;
  --red-hover: #ff8d70;
  --card-face: #465166;
  --card-shade: #2b3344;
  --card-hover: #53627b;
  --card-pick-face: #5c5946;
  --card-pick-shade: #393829;

  --bevel:
    inset -4px -4px 0 var(--btn-shade), inset 2px 2px 0 #ffffff26,
    2px 2px 0 var(--drop);
  --panel-shadow: inset 0 2px 0 #ffffff0d, 4px 4px 0 #0a0d1599;
  --r3: 10px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #c7cfdd;
  --ground-grid: #bcc5d5;
  --surface: #eef1f7;
  --surface-2: #e0e5ef;
  --surface-3: #d0d7e5;
  --surface-hover: #c4cde0;
  --line: #9aa6bd;
  --line-soft: #c3cbdb;
  --line-strong: #6f7b95;
  --edge: #1b2130;
  --drop: #1b213066;
  --ink: #161b28;
  --ink-muted: #3f4a62;
  --ink-faint: #5e6981;
  --accent: #c99f00;
  --accent-ink: #302510;
  --signal: #4f8a15;
  --danger: #c43a3a;
  --health: #d03b3b;
  --mana: #0b6fd0;
  --shield: #00838c;
  --gold: #8c6a00;
  --boss: #6b3fc9;
  --warn: #b55d00;
  --eyebrow: #4f8a15;
  --card-face: #dfe4ee;
  --card-shade: #b5bfd2;
  --card-hover: #eaeef5;
  --card-pick-face: #fff3b0;
  --card-pick-shade: #d9c46a;
}

/* --------------------------------------------------------------- 기본 */

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a3350 0%, transparent 60%),
    var(--ground);
  font-weight: 500;
}

:root[data-theme="light"] body {
  background: var(--ground);
}

.eyebrow {
  color: var(--eyebrow);
  font-weight: 800;
  letter-spacing: 0.14em;
}

:focus-visible {
  outline: 3px solid #fff5ad;
  outline-offset: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 2px solid var(--ground);
}

/* ------------------------------------------------------------- 버튼 */

.btn,
.rooms-ui .rooms-button {
  --bf: var(--btn-face);
  --bs: var(--btn-shade);
  --bh: var(--btn-hover);
  position: relative;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px 3px;
  border: 2px solid var(--edge);
  border-radius: 9px;
  background: var(--bf);
  color: #fff;
  font-weight: 800;
  text-shadow: 1px 2px 0 #0007;
  box-shadow:
    inset -4px -4px 0 var(--bs),
    inset 2px 2px 0 #ffffff26,
    2px 2px 0 var(--drop);
  transform: none;
  transition: none;
  filter: none;
}

.btn:hover:not(:disabled),
.rooms-ui .rooms-button:hover:not(:disabled) {
  background: var(--bh);
  border-color: var(--edge);
  transform: none;
  filter: none;
}

.btn:active:not(:disabled),
.rooms-ui .rooms-button:active:not(:disabled) {
  background: var(--bf);
  box-shadow:
    inset 3px 3px 0 var(--bs),
    1px 1px 0 var(--drop);
  translate: 2px 2px;
  transform: none;
}

.btn:disabled,
.rooms-ui .rooms-button:disabled {
  --bf: #757987;
  --bs: #535662;
  color: #d0d3da;
  opacity: 0.62;
}

.btn[data-variant="primary"],
.rooms-ui .rooms-button-primary,
.btn[aria-pressed="true"],
.rooms-ui .rooms-button.is-selected {
  --bf: var(--yellow-face);
  --bs: var(--yellow-shade);
  --bh: var(--yellow-hover);
  color: var(--accent-ink);
  text-shadow: 1px 1px 0 #fff8;
  border-color: #19100b;
}

.btn[data-variant="primary"]:hover:not(:disabled),
.rooms-ui .rooms-button-primary:hover:not(:disabled) {
  background: var(--bh);
  filter: none;
}

.btn[data-variant="danger"],
.rooms-ui .rooms-button-danger,
.btn.icon-btn,
.btn.reward-button[aria-label] {
  --bf: var(--red-face);
  --bs: var(--red-shade);
  --bh: var(--red-hover);
  color: #fff;
}

.btn.icon-btn {
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0 3px 4px 0;
  border-radius: 9px;
  font-size: 24px;
  line-height: 1;
  flex: none;
}

.btn[data-variant="ghost"] {
  --bf: transparent;
  --bs: transparent;
  --bh: #ffffff14;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-muted);
  text-shadow: none;
}

.btn[data-variant="ghost"]:hover:not(:disabled) {
  color: var(--ink);
  border-color: transparent;
}
.btn[data-variant="ghost"]:active:not(:disabled) {
  box-shadow: none;
}

.btn .key,
.btn kbd {
  padding: 1px 5px;
  border: 1px solid #ffffff50;
  border-radius: 4px;
  background: #121a3040;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 1;
  box-shadow: 0 2px 0 #0005;
}

/* 분할 버튼 — 배속처럼 하나만 고르는 묶음 */
.segment {
  gap: 0;
  border: 2px solid var(--edge);
  border-radius: 9px;
  background: var(--btn-shade);
  box-shadow: 2px 2px 0 var(--drop);
}

.segment .btn {
  min-height: 28px;
  padding: 0 9px 2px;
  border: 0;
  border-radius: 0;
  box-shadow:
    inset -2px -3px 0 var(--bs),
    inset 1px 1px 0 #ffffff22;
  font-family: var(--font-mono);
}

.segment .btn + .btn {
  border-left: 2px solid var(--edge);
}
.segment .btn:active:not(:disabled) {
  translate: none;
}

.segment .btn[aria-pressed="true"] {
  background: var(--yellow-face);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------- 패널 */

.panel,
.rooms-ui .rooms-card {
  background: var(--surface);
  border: 2px solid var(--edge);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

.panel > header {
  min-height: 42px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #ffffff0a, transparent), var(--surface-2);
  border-bottom: 2px solid var(--edge);
  border-radius: 10px 10px 0 0;
  font-size: 13px;
  font-weight: 800;
}

.panel > header .eyebrow,
.panel > header h2,
.panel > header h3 {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.note {
  border: 2px solid var(--edge);
  border-left: 5px solid var(--warn);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  color: var(--ink-muted);
}

/* 칩 */
.chip {
  padding: 3px 8px;
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset -2px -2px 0 #0003;
}

.chip[data-tone="signal"] {
  background: color-mix(in srgb, var(--signal) 22%, var(--surface-2));
  color: var(--signal);
  border-color: var(--edge);
}
.chip[data-tone="gold"] {
  background: color-mix(in srgb, var(--gold) 16%, var(--surface-2));
  border-color: var(--edge);
}
.chip[data-tone="boss"] {
  background: color-mix(in srgb, var(--boss) 16%, var(--surface-2));
  border-color: var(--edge);
}
.chip[data-tone="danger"] {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2));
  border-color: var(--edge);
}
.chip[data-tone="warn"] {
  background: color-mix(in srgb, var(--warn) 14%, var(--surface-2));
  border-color: var(--edge);
}

.type-chip {
  padding: 3px 8px 3px 5px;
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: color-mix(in srgb, var(--type) 30%, var(--surface-2));
  color: #fff;
  font-weight: 700;
  text-shadow: 1px 1px 0 #0006;
}

:root[data-theme="light"] .type-chip {
  color: var(--ink);
  text-shadow: none;
}

/* 수치 */
.stat-grid {
  background: transparent;
  border: 0;
  gap: 6px;
}

.stat {
  background: var(--surface-2);
  border: 2px solid var(--edge);
  border-radius: 8px;
  box-shadow: inset -2px -2px 0 #0003;
}

.stat dd {
  font-weight: 800;
}

.meter {
  height: 7px;
  border: 2px solid var(--edge);
  border-radius: 99px;
  background: #0f131d;
  box-sizing: content-box;
}

.meter > span {
  background: var(--signal);
}
.meter[data-tone="time"] > span {
  background: var(--accent);
}
.meter[data-tone="time"][data-urgent="true"] > span {
  background: var(--danger);
}

.switch input {
  border: 2px solid var(--edge);
  background: #0f131d;
}
.switch input:checked {
  background: var(--green-shade);
  border-color: var(--edge);
}
.switch input:checked::after {
  background: #fff;
}

.field-input input,
.field-input select,
.target-select select,
.catalog-tools input,
.catalog-tools select,
.rooms-ui input:not([type="checkbox"]),
.rooms-ui select,
.seed-input input,
.room-save-form input {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #121725;
  color: var(--ink);
  box-shadow: inset 2px 2px 0 #00000055;
}

:root[data-theme="light"]
  :is(
    .field-input input,
    .field-input select,
    .target-select select,
    .catalog-tools input,
    .catalog-tools select,
    .rooms-ui input:not([type="checkbox"]),
    .rooms-ui select,
    .seed-input input
  ) {
  background: #fff;
}

/* --------------------------------------------------------------- 상단 */

.topbar {
  background: linear-gradient(180deg, #2b3247, #20263a);
  border-bottom: 3px solid var(--edge);
  box-shadow: 0 3px 0 #ffffff08 inset;
}

:root[data-theme="light"] .topbar {
  background: linear-gradient(180deg, #f6f8fc, #e2e7f1);
}

.brand-mark {
  width: 28px;
  height: 28px;
  border: 2px solid var(--edge);
  background: linear-gradient(#ee4b4b 0 44%, var(--edge) 44% 56%, #f4f6fa 56%);
  box-shadow: 2px 2px 0 var(--drop);
}

.brand-mark::after {
  width: 9px;
  height: 9px;
  background: #f4f6fa;
  border: 2px solid var(--edge);
}

.brand-text b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}
.brand-text span {
  font-size: 10px;
  color: var(--ink-faint);
}

.readout {
  border-left: 2px solid #ffffff10;
}

.readout > .label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
}

.readout > .value {
  font-family: var(--font-ui);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 2px 2px 0 #0008;
}

:root[data-theme="light"] .readout > .value {
  text-shadow: none;
}
.readout > .value small {
  font-weight: 600;
  color: var(--ink-faint);
  text-shadow: none;
}
.readout[data-tone="round"] > .value {
  color: var(--ink);
}
.readout[data-tone="gold"] > .value {
  color: var(--gold);
}
.readout[data-tone="boss"] > .value {
  color: var(--boss);
}

.top-actions {
  gap: 6px;
}

.top-actions .btn {
  min-height: 34px;
  padding: 0 11px 3px;
  font-size: 12px;
}

.top-actions .btn[data-variant="ghost"] {
  --bf: var(--btn-face);
  --bs: var(--btn-shade);
  --bh: var(--btn-hover);
  border-color: var(--edge);
  box-shadow:
    inset -4px -4px 0 var(--bs),
    inset 2px 2px 0 #ffffff26,
    2px 2px 0 var(--drop);
  color: #fff;
  text-shadow: 1px 2px 0 #0007;
}

/* --------------------------------------------------------------- 전장 */

.stage-head {
  padding: 6px 8px 6px 12px;
  background: var(--surface);
  border: 2px solid var(--edge);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

.phase-label {
  font-size: 13px;
  font-weight: 800;
}
.phase-time {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.phase-dot {
  width: 10px;
  height: 10px;
  border: 2px solid var(--edge);
}
.phase[data-phase="prep"] .phase-dot {
  background: var(--signal);
  box-shadow: none;
}

.stage-controls .btn {
  min-height: 32px;
  padding: 0 12px 3px;
  font-size: 12px;
}
.stage-controls .segment .btn {
  min-height: 28px;
  padding: 0 9px 2px;
}
.stage-timer {
  height: 5px;
  margin-top: 2px;
}

.field-wrap {
  border: 3px solid var(--edge);
  border-radius: 12px;
  box-shadow:
    4px 4px 0 #0a0d15aa,
    inset 0 0 0 2px #ffffff12;
}

.location-label,
.hint {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #1b2030ee;
  color: #f4f6fa;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 2px 2px 0 #0a0d1599;
}

.round-banner {
  padding: 14px 30px 17px;
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--yellow-face);
  color: var(--accent-ink);
  font-size: 20px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #fff8;
  box-shadow:
    inset -5px -5px 0 var(--yellow-shade),
    inset 3px 3px 0 #fff6,
    5px 5px 0 #0a0d15aa;
}

.round-banner[data-boss="true"] {
  background: #7d4bd6;
  color: #fff;
  border-color: var(--edge);
  text-shadow: 1px 2px 0 #0008;
  box-shadow:
    inset -5px -5px 0 #4f2a99,
    inset 3px 3px 0 #ffffff33,
    5px 5px 0 #0a0d15aa;
}

.board-slot-access {
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: var(--surface-2);
}

/* ------------------------------------------------------------ 시너지 */

.synergy-list {
  gap: 6px;
}

.synergy-row {
  min-height: 42px;
  padding: 6px 9px;
  border: 2px solid var(--edge);
  border-left: 6px solid var(--type);
  border-radius: 8px;
  background: color-mix(in srgb, var(--type) 20%, var(--surface-2));
  box-shadow:
    inset -3px -3px 0 #0003,
    2px 2px 0 #0a0d1566;
  color: var(--ink);
  font-weight: 700;
}

.synergy-row:hover {
  background: color-mix(in srgb, var(--type) 32%, var(--surface-2));
}

.synergy-row[data-active="false"] {
  border-left-color: var(--surface-3);
  background: var(--surface-2);
  color: var(--ink-muted);
  opacity: 0.8;
}

.synergy-name {
  font-size: 12px;
  font-weight: 800;
}
.synergy-steps {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.synergy-steps b {
  color: var(--accent);
}

.synergy-count {
  min-width: 26px;
  margin-left: 4px;
  padding: 1px 6px;
  border: 2px solid var(--edge);
  border-left: 2px solid var(--edge);
  border-radius: 6px;
  background: #121725;
  color: var(--accent);
  font-weight: 800;
  text-align: center;
}

.synergy-footnote {
  font-size: 10px;
}

.boss-preview-round {
  color: var(--boss);
  font-weight: 800;
  font-size: 10px;
}
.boss-preview-selected .portrait {
  border: 2px solid var(--edge);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--drop);
}
.boss-preview-selected b {
  font-size: 17px;
  font-weight: 800;
}
.boss-preview > p {
  font-size: 11px;
  line-height: 1.65;
}

.boss-candidate {
  padding: 5px 2px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--surface-2);
}

.boss-candidate[data-selected="true"] {
  background: color-mix(in srgb, var(--boss) 22%, var(--surface-2));
  color: #fff;
}

.boss-hud {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #241f3a;
}

/* --------------------------------------------------------------- 상세 */

.detail .panel > header {
  padding: 10px 12px;
}
.detail .detail-title h3 {
  font-size: 18px;
  font-weight: 800;
}
.detail-head .portrait,
.detail-art {
  border: 2px solid var(--edge);
  border-radius: 10px;
  background:
    radial-gradient(70% 70% at 50% 75%, #ffffff1c, transparent 70%),
    var(--card-face);
  box-shadow:
    inset -3px -3px 0 var(--card-shade),
    2px 2px 0 var(--drop);
}

.detail-stat-grid .stat {
  padding: 6px 7px;
  border-radius: 8px;
  background: var(--surface-2);
}
.detail-stat-grid dd {
  font-size: 14px;
}
.combat-option-grid > .stat {
  border-width: 1px;
  border-radius: 5px;
  box-shadow: none;
}

.ability-card {
  padding: 10px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--surface-2);
}

.ally-detail .ability-card {
  padding: 9px 10px;
}
.ability-card b {
  color: var(--accent);
  font-weight: 800;
}

.evolution-action {
  --bf: var(--green-face);
  --bs: var(--green-shade);
  --bh: var(--green-hover);
  justify-content: flex-start;
}

.equipment-slot {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #121725;
  box-shadow: inset 2px 2px 0 #0007;
  color: var(--ink-faint);
}

.equipment-slot[data-berry="true"] {
  border-color: var(--edge);
  background: color-mix(in srgb, var(--signal) 18%, #121725);
}

.equipment-slot:hover {
  background: var(--surface-3);
}

.detail-unit-actions .btn {
  font-size: 11px;
}

.empty-detail {
  color: var(--ink-muted);
  font-size: 12px;
}
.empty-symbol {
  color: var(--accent);
  opacity: 0.9;
  text-shadow: 3px 3px 0 var(--edge);
}

/* --------------------------------------------------------------- 하단 */

.dock {
  background: linear-gradient(180deg, #2b3247, #20263a);
  border-top: 3px solid var(--edge);
  box-shadow: inset 0 2px 0 #ffffff0a;
}

:root[data-theme="light"] .dock {
  background: linear-gradient(180deg, #f6f8fc, #e2e7f1);
}

.bench-label h2 {
  font-size: 14px;
  font-weight: 800;
}
.bench-capacity {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-mono);
}

.bench-unit {
  border: 2px solid var(--edge);
  border-radius: 9px;
  background:
    linear-gradient(180deg, #ffffff10, transparent 45%), var(--card-face);
  color: #fff;
  box-shadow:
    inset -4px -4px 0 var(--card-shade),
    inset 2px 2px 0 #ffffff20,
    3px 3px 0 var(--drop);
  text-shadow: 1px 1px 0 #0008;
  transition: none;
}

.bench-unit:hover {
  border-color: var(--edge);
  background:
    linear-gradient(180deg, #ffffff10, transparent 45%), var(--card-hover);
  transform: none;
}

.bench-unit:active:not(:disabled) {
  translate: 2px 2px;
  box-shadow:
    inset 3px 3px 0 var(--card-shade),
    1px 1px 0 var(--drop);
}

.bench-unit[data-selected="true"] {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, #ffffff10, transparent 45%), var(--card-pick-face);
  outline: 2px solid var(--edge);
  box-shadow:
    inset -4px -4px 0 var(--card-pick-shade),
    inset 2px 2px 0 #e1c65455,
    3px 3px 0 var(--drop);
}

:root[data-theme="light"] .bench-unit {
  color: var(--ink);
  text-shadow: none;
}

.bench-name {
  font-weight: 800;
}
.bench-number {
  color: #ffffffaa;
  font-family: var(--font-mono);
  font-weight: 700;
}
.bench-unit .unit-stars {
  color: var(--gold);
}

.stack-count {
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: var(--yellow-face);
  color: var(--accent-ink);
  font-weight: 900;
  text-shadow: none;
}

.bench-empty-slot,
.bench-empty-slot:disabled:hover {
  border: 2px dashed #ffffff22;
  background: #10141f88;
  color: #ffffff40;
  box-shadow: inset 2px 2px 0 #0006;
}

:root[data-theme="light"] .bench-empty-slot {
  border-color: #1b213033;
  background: #ffffff66;
  color: #1b213055;
}

.bench-empty-slot:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #10141f88;
}
.bench-empty-slot .bench-number {
  color: #ffffff44;
  text-shadow: none;
}

.bench-copy-next {
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: var(--blue-face);
  color: #fff;
  box-shadow: inset -2px -2px 0 var(--blue-shade);
}

.recruit-button {
  min-height: 48px;
  padding: 0 16px 4px;
  justify-content: space-between;
  font-size: 15px;
}

.recruit-button b {
  font-size: 15px;
  font-weight: 900;
}
.recruit-button > span {
  font-size: 14px;
  font-weight: 900;
}

.recruit-secondary .btn:first-child {
  --bf: var(--blue-face);
  --bs: var(--blue-shade);
  --bh: var(--blue-hover);
}

.recruit-secondary .btn {
  font-size: 12px;
  min-height: 34px;
}

.game-footer {
  background: #0f131c;
  border-top: 2px solid var(--edge);
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

:root[data-theme="light"] .game-footer {
  background: var(--surface-3);
}

/* --------------------------------------------------------------- 모달 */

dialog,
.game-dialog {
  border: 3px solid var(--edge);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff08, transparent 120px), var(--surface);
  color: var(--ink);
  box-shadow:
    inset 0 2px 0 #ffffff12,
    6px 6px 0 #0a0d15cc,
    0 40px 120px #000a;
}

.game-dialog::backdrop,
dialog::backdrop {
  background: #070a12e0;
  backdrop-filter: none;
}

.dialog-heading {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--line-soft);
}

.dialog-heading h2 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 2px 2px 0 #0007;
}
:root[data-theme="light"] .dialog-heading h2 {
  text-shadow: none;
}
.dialog-heading p.muted {
  font-size: 12px;
}

/* 상점 카드 */
.item-shop-grid {
  gap: 15px;
}

.shop-item,
.wand-choices > article {
  position: relative;
  border: 3px solid var(--edge);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 18%, #ffffff18, transparent 70%),
    var(--card-face);
  color: #fff;
  box-shadow:
    inset -5px -5px 0 var(--card-shade),
    inset 3px 3px 0 #ffffff20,
    4px 4px 0 var(--drop);
}

:root[data-theme="light"] :is(.shop-item, .wand-choices > article) {
  color: var(--ink);
}

.shop-item .item-icon,
.wand-choices .item-icon {
  align-self: center;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff22, transparent 70%);
  color: var(--accent);
  font-size: 28px;
}

.shop-item h3,
.wand-choices h3 {
  font-size: 16px;
  font-weight: 900;
  text-shadow: 1px 2px 0 #0007;
}
:root[data-theme="light"] :is(.shop-item h3, .wand-choices h3) {
  text-shadow: none;
}
.shop-item p,
.wand-choices p {
  color: #d6dde8;
  font-size: 12px;
  line-height: 1.7;
}
:root[data-theme="light"] :is(.shop-item p, .wand-choices p) {
  color: var(--ink-muted);
}

.shop-item .btn,
.wand-choices .btn {
  --bf: var(--green-face);
  --bs: var(--green-shade);
  --bh: var(--green-hover);
  min-height: 38px;
  font-size: 13px;
}

.item-gold,
.research-gold b {
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 2px 2px 0 #0008;
}

.research-gold {
  align-items: center;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: #121725;
  color: var(--ink-muted);
}

.items-toolbar .segment .btn,
.items-toolbar .tabs .btn {
  font-family: var(--font-ui);
}

.owned-item {
  border: 2px solid var(--edge);
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: inset -3px -3px 0 #0003;
}

.owned-item[data-selected="true"] {
  border-color: var(--accent);
  background: var(--card-pick-face);
  outline: 2px solid var(--edge);
}
.item-detail {
  border-left: 2px solid var(--edge);
}
.craft-panel,
.borrowed-tools {
  border-top: 2px solid var(--edge);
}

/* 연구·진화·조합 카드 */
.research-card,
.evolution-plan {
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow:
    inset -3px -3px 0 #0003,
    3px 3px 0 #0a0d1566;
}

.research-card h3,
.evolution-plan b {
  font-weight: 800;
  font-size: 13px;
}
.research-card b {
  color: var(--accent);
}
.pips > i {
  height: 7px !important;
  border: 1px solid var(--edge);
  background: #121725;
}
.pips > i[data-on="true"] {
  background: var(--yellow-face);
}
.odds {
  height: 10px;
  border: 2px solid var(--edge);
  box-sizing: content-box;
}

/* 도감 */
.catalog-unit {
  border: 2px solid var(--edge);
  border-radius: 9px;
  background: var(--card-face);
  color: #fff;
  box-shadow:
    inset -3px -3px 0 var(--card-shade),
    inset 2px 2px 0 #ffffff1c,
    2px 2px 0 var(--drop);
  text-shadow: 1px 1px 0 #0008;
}

.catalog-unit:hover {
  background: var(--card-hover);
}
.catalog-unit[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--card-pick-face);
  outline: 2px solid var(--edge);
}
:root[data-theme="light"] .catalog-unit {
  color: var(--ink);
  text-shadow: none;
}
.catalog-detail {
  border-left: 2px solid var(--edge);
}
.catalog-portrait {
  background: radial-gradient(ellipse, #f7d51d1f, transparent 68%);
}
.catalog-detail h3 {
  font-weight: 900;
}

/* 설정 */
.settings-switch,
.settings-volume {
  border-bottom: 2px solid var(--line-soft);
  font-weight: 700;
}

/* 시너지 상세 */
.synergy-description {
  padding: 14px 16px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--surface-2);
}

/* 결과 */
.result-emblem {
  color: var(--accent);
  text-shadow: 4px 4px 0 var(--edge);
}
.result h2 {
  font-weight: 900;
}
.result-round b {
  font-family: var(--font-ui);
  font-weight: 900;
  text-shadow: 3px 3px 0 #0008;
}
.result .stat-grid {
  border-top: 2px solid var(--edge);
  border-bottom: 2px solid var(--edge);
}
.result-actions .btn {
  min-height: 44px;
  font-size: 14px;
}

/* 전설 보상 화면은 legendary-rewards.css */

/* 토스트 */
.toast {
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--yellow-face);
  color: var(--accent-ink);
  font-weight: 800;
  box-shadow:
    inset -3px -3px 0 var(--yellow-shade),
    3px 3px 0 #0a0d15aa;
}

.toast[data-tone="error"] {
  background: var(--red-face);
  color: #fff;
  border-color: var(--edge);
  box-shadow:
    inset -3px -3px 0 var(--red-shade),
    3px 3px 0 #0a0d15aa;
}

/* 방 화면 상단 좌석 */
.room-seat,
.room-vote {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--surface-2);
}

.room-seat[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--card-pick-face);
}

.room-save-row {
  border: 2px solid var(--edge);
  background: var(--surface-2);
}

/* --------------------------------------------------------------- 로비 */

.lobby {
  background: #10141f;
  color: #f4f6fa;
}

.lobby-scenery {
  background:
    linear-gradient(90deg, #0d1220d9 0%, #0f152430 52%, #0d1220c2 100%),
    linear-gradient(0deg, #0b0f1a 0%, transparent 40%, #0b0f1a55 100%),
    url("../assets/generated/expedition-backdrop.png") center 58% / cover;
}

.lobby-scenery::after {
  background: radial-gradient(ellipse at 29% 58%, #f7d51d0d, transparent 52%);
}

.lobby-brand .brand-mark {
  width: 34px;
  height: 34px;
}
.lobby-brand b {
  font-size: 20px;
  font-weight: 900;
  text-shadow: 2px 2px 0 #0a0d15;
}
.lobby-brand small {
  color: #c9d0de;
}

.lobby-nav .btn,
.lobby-nav .btn[data-variant="ghost"] {
  --bf: #2a3147e6;
  --bs: #1a2033;
  --bh: #3a4462;
  border-color: var(--edge);
  color: #fff;
  box-shadow:
    inset -3px -3px 0 var(--bs),
    inset 2px 2px 0 #ffffff1a,
    2px 2px 0 var(--drop);
  text-shadow: 1px 2px 0 #0007;
}

.hero-copy > .eyebrow {
  display: inline-block;
  padding: 5px 10px 6px;
  border: 2px solid var(--edge);
  border-radius: 7px;
  background: var(--yellow-face);
  color: var(--accent-ink);
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 var(--drop);
}

.hero-copy h1 {
  font-weight: 900;
  letter-spacing: -0.045em;
  text-shadow:
    3px 4px 0 #0a0d15,
    0 6px 30px #04060cd9;
}

.hero-intro {
  color: #d3d9e6;
  text-shadow: 1px 1px 0 #0a0d15;
}

.hero-features > span {
  border-left: 2px solid #ffffff1f;
}

.hero-features b {
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 900;
  color: var(--yellow-face);
  text-shadow: 2px 3px 0 #0a0d15;
}

.hero-features small {
  color: #c9d0de;
  font-size: 11px;
  font-weight: 700;
}

.companion-strip {
  padding: 8px 14px 8px 12px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: #1b2030d9;
  color: #f4f6fa;
  box-shadow: 3px 3px 0 var(--drop);
}

.companion-strip:hover {
  background: #262d44e6;
}
.companion-strip small {
  color: var(--eyebrow);
}
.companion-portraits .portrait {
  border: 2px solid var(--edge);
  background: var(--card-face);
}

.setup-card {
  border: 3px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff0a, transparent 140px), #1d2335;
  box-shadow:
    inset 0 2px 0 #ffffff14,
    6px 6px 0 #0a0d15cc,
    0 30px 90px #000a;
  backdrop-filter: none;
}

.setup-heading .eyebrow {
  color: var(--eyebrow);
  font-size: 10px;
}
.setup-heading h2 {
  font-size: 26px;
  font-weight: 900;
  text-shadow: 2px 2px 0 #0a0d15;
}

.mode-options {
  gap: 9px;
}

.mode-option > span,
.difficulty-option > span {
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--card-face);
  color: #fff;
  box-shadow:
    inset -4px -4px 0 var(--card-shade),
    inset 2px 2px 0 #ffffff1c,
    2px 2px 0 var(--drop);
  transition: none;
}

.mode-option:hover > span,
.difficulty-option:hover > span {
  background: var(--card-hover);
}

.mode-option input:checked + span,
.difficulty-option input:checked + span {
  border-color: var(--yellow-face);
  background: var(--card-pick-face);
  color: #fff;
  outline: 2px solid var(--edge);
  box-shadow:
    inset -4px -4px 0 var(--card-pick-shade),
    inset 2px 2px 0 #e1c65455,
    2px 2px 0 var(--drop);
}

.mode-option b {
  font-size: 14px;
  font-weight: 900;
  text-shadow: 1px 2px 0 #0007;
}
.mode-option b::before {
  color: var(--yellow-face);
}
.mode-option small {
  font-size: 11px;
  color: #d6dde8;
}

.difficulty-options legend,
.seed-label {
  font-size: 12px;
  font-weight: 800;
  color: #e3e8f2;
}
.difficulty-option > span {
  padding: 10px 4px 12px;
}
.difficulty-option b {
  font-size: 13px;
  font-weight: 900;
  text-shadow: 1px 2px 0 #0007;
}
.difficulty-option small {
  font-size: 9px;
  color: #c9d0de;
}

.seed-input input {
  min-height: 42px;
  font-size: 13px;
}

.seed-input .btn {
  --bf: var(--blue-face);
  --bs: var(--blue-shade);
  --bh: var(--blue-hover);
  width: 44px;
  min-height: 42px;
  color: #fff;
  background: var(--bf);
  border-color: var(--edge);
}

.seed-label > small {
  color: #a9b2c6;
  font-size: 10px;
}

.start-button,
.start-button.btn {
  --bf: var(--yellow-face);
  --bs: var(--yellow-shade);
  --bh: var(--yellow-hover);
  min-height: 56px;
  padding: 0 20px 5px;
  border-color: #19100b !important;
  background: var(--bf) !important;
  color: var(--accent-ink) !important;
  font-size: 17px;
  font-weight: 900;
  box-shadow:
    inset -5px -6px 0 var(--bs),
    inset 3px 3px 0 #fff7,
    4px 4px 0 var(--drop);
}

.start-button:hover:not(:disabled) {
  background: var(--bh) !important;
}

.continue-button {
  margin-top: 14px;
  padding: 10px 14px 13px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--blue-face);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 1px 2px 0 #0007;
  box-shadow:
    inset -4px -4px 0 var(--blue-shade),
    inset 2px 2px 0 #ffffff33,
    2px 2px 0 var(--drop);
}

.continue-button:hover {
  background: var(--blue-hover);
}

.opening-recruit-note,
.setup-preferences > p {
  color: #a9b2c6;
  font-size: 10px;
}
.setup-preferences {
  border-top: 2px solid #ffffff14;
}
.setup-preferences summary {
  color: #e3e8f2;
  font-weight: 700;
  font-size: 11px;
}

.preference-type {
  border: 2px solid var(--edge);
  border-radius: 7px;
  background: var(--card-face);
  color: #fff;
  font-size: 9px;
  box-shadow: inset -2px -2px 0 var(--card-shade);
}

.preference-type[data-value="preferred"] {
  background: #4e7a22;
  border-color: var(--edge);
  color: #fff;
}
.preference-type[data-value="avoided"] {
  background: #8a3c35;
  border-color: var(--edge);
  color: #fff;
}
.setup-regional {
  color: #d3d9e6;
}

.lobby-footer {
  color: #8c96ad;
}

/* -------------------------------------------------------- 로그인·방 */

.rooms-ui {
  background:
    radial-gradient(ellipse at 90% 0%, #f7d51d12, transparent 40%),
    radial-gradient(1200px 600px at 20% 110%, #2a3350 0%, transparent 60%),
    var(--ground);
}

.rooms-ui .rooms-topbar {
  border-bottom: 3px solid var(--edge);
  background: linear-gradient(180deg, #2b3247, #20263a);
}

:root[data-theme="light"] .rooms-ui .rooms-topbar {
  background: linear-gradient(180deg, #f6f8fc, #e2e7f1);
}

.rooms-ui .rooms-wordmark {
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--edge);
}
:root[data-theme="light"] .rooms-ui .rooms-wordmark {
  text-shadow: none;
}
.rooms-ui .rooms-button {
  min-height: 40px;
  padding: 8px 16px 11px;
  font-size: 13px;
}
.rooms-ui .rooms-kicker {
  color: var(--eyebrow);
  font-weight: 800;
}
.rooms-ui h1,
.rooms-ui h2 {
  font-weight: 900;
}
.rooms-ui .rooms-welcome h1 {
  text-shadow: 3px 4px 0 var(--edge);
}
:root[data-theme="light"] .rooms-ui .rooms-welcome h1 {
  text-shadow: none;
}

.rooms-ui .rooms-orbit span {
  border: 2px solid var(--edge);
  border-radius: 14px;
  background: var(--card-face);
  color: #fff;
  font-weight: 800;
  box-shadow:
    inset -4px -4px 0 var(--card-shade),
    3px 3px 0 var(--drop);
}

.rooms-ui .rooms-orbit span:first-child {
  background: var(--yellow-face);
  color: var(--accent-ink);
  border-color: var(--edge);
  box-shadow:
    inset -4px -4px 0 var(--yellow-shade),
    3px 3px 0 var(--drop);
}

.rooms-ui .rooms-card {
  padding: 28px;
  border-radius: 16px;
}
.rooms-ui .rooms-auth {
  padding: 34px;
}

.rooms-ui .rooms-nav {
  border-bottom: 2px solid var(--line-soft);
}

.rooms-ui .rooms-nav .rooms-button:not(.is-selected),
.rooms-ui .rooms-auth-tabs .rooms-button:not(.is-selected) {
  --bf: var(--surface-2);
  --bs: #1a2033;
  --bh: var(--surface-3);
  color: var(--ink-muted);
}

.rooms-ui .rooms-field > span {
  font-weight: 800;
  color: var(--ink);
}

.rooms-ui .rooms-notice {
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 3px 3px 0 #0a0d1566;
}

.rooms-ui .rooms-notice[data-tone="error"] {
  border-color: var(--edge);
  border-left: 6px solid var(--red-face);
  background: color-mix(in srgb, var(--red-face) 14%, var(--surface));
  color: #ffb2a6;
}

:root[data-theme="light"] .rooms-ui .rooms-notice[data-tone="error"] {
  color: var(--danger);
}
.rooms-ui .rooms-notice[data-tone="success"] {
  border-left: 6px solid var(--green-face);
}

.rooms-ui .rooms-tag {
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 700;
}

.rooms-ui .rooms-seat {
  border: 3px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}

.rooms-ui .rooms-seat.is-mine {
  border-color: var(--yellow-face);
  outline: 2px solid var(--edge);
  background:
    linear-gradient(180deg, #f7d51d14, transparent 60%), var(--surface);
}

.rooms-ui .rooms-seat.is-empty {
  border: 3px dashed #ffffff24;
  background: #10141f88;
  box-shadow: none;
}

.rooms-ui .rooms-avatar {
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: var(--card-face);
  color: var(--yellow-face);
  box-shadow:
    inset -3px -3px 0 var(--card-shade),
    2px 2px 0 var(--drop);
}

.rooms-ui .rooms-type-choice {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--card-face);
  color: #fff;
  font-weight: 700;
  box-shadow:
    inset -3px -3px 0 var(--card-shade),
    2px 2px 0 var(--drop);
}

.rooms-ui .rooms-type-choice.is-selected {
  background: var(--card-pick-face);
  border-color: var(--yellow-face);
  color: #fff;
}
.rooms-ui .rooms-type-group-avoided .rooms-type-choice.is-selected {
  background: #8a3c35;
  border-color: var(--edge);
  color: #fff;
}

.rooms-ui .rooms-rating-grid > div,
.rooms-ui .rooms-match-detail {
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: #121725;
}

:root[data-theme="light"]
  .rooms-ui
  :is(.rooms-rating-grid > div, .rooms-match-detail) {
  background: var(--surface-2);
}
.rooms-ui .rooms-rating-grid b {
  color: var(--yellow-face);
  font-family: var(--font-ui);
  font-weight: 900;
}
.rooms-ui .rooms-footer {
  border-top: 2px solid var(--edge);
  background: #0f131c;
}
:root[data-theme="light"] .rooms-ui .rooms-footer {
  background: var(--surface-3);
}

/* ---------------------------------------------- 넓은 화면의 글자 크기 */

@media (min-width: 900px) {
  .hint,
  .location-label {
    font-size: 11px;
  }
  .type-chip,
  .detail .type-chip {
    font-size: 10px;
  }
  .stat dt {
    font-size: 10px;
  }
  .combat-option-grid dt {
    font-size: 9px;
  }
  .combat-option-grid dd {
    font-size: 11px;
  }
  .bench-name {
    font-size: 10px;
  }
  .bench-number {
    font-size: 10px;
  }
  .bench-label > small,
  .recruit-controls > small {
    font-size: 10px;
  }
  .bench-label > .btn {
    font-size: 11px;
  }
  .ally-detail .ability-card p {
    font-size: 11px;
  }
  .evolution-action b {
    font-size: 11px;
  }
  .evolution-action small,
  .evolution-reason {
    font-size: 10px;
  }
  .game-footer {
    font-size: 10px;
  }
  .boss-candidate small {
    font-size: 9px;
  }
  .catalog-unit b {
    font-size: 12px;
  }
  .evolution-plan small {
    font-size: 11px;
  }
  .odds-legend {
    font-size: 10px;
  }
  .item-shop-actions .btn,
  .item-detail > .btn-row .btn,
  .research-card .btn {
    font-size: 12px;
  }
  .owned-item-button b {
    font-size: 12px;
  }
  .owned-item-button small {
    font-size: 10px;
  }
}

/* =====================================================================
   몰입형 게임 화면 — 글자를 줄이고 아이콘·발광·움직임으로 상태를 보인다.
   이름·스탯·상세 설명만 글자로 남기고 나머지는 아이콘과 툴팁(title/aria-label)으로 둔다.
   ===================================================================== */

.ico {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.ico[data-icon="book"] {
  --ico: url("../assets/generated/icons/book.svg");
}
.ico[data-icon="bag"] {
  --ico: url("../assets/generated/icons/bag.svg");
}
.ico[data-icon="target"] {
  --ico: url("../assets/generated/icons/target.svg");
}
.ico[data-icon="save"] {
  --ico: url("../assets/generated/icons/save.svg");
}
.ico[data-icon="flask"] {
  --ico: url("../assets/generated/icons/flask.svg");
}
.ico[data-icon="gear"] {
  --ico: url("../assets/generated/icons/gear.svg");
}
.ico[data-icon="crown"] {
  --ico: url("../assets/generated/icons/crown.svg");
}
.ico[data-icon="sun"] {
  --ico: url("../assets/generated/icons/sun.svg");
}
.ico[data-icon="users"] {
  --ico: url("../assets/generated/icons/users.svg");
}
.ico[data-icon="back"] {
  --ico: url("../assets/generated/icons/back.svg");
}
.ico[data-icon="play"] {
  --ico: url("../assets/generated/icons/play.svg");
}
.ico[data-icon="pause"] {
  --ico: url("../assets/generated/icons/pause.svg");
}
.ico[data-icon="up"] {
  --ico: url("../assets/generated/icons/up.svg");
}
.ico[data-icon="evolve"] {
  --ico: url("../assets/generated/icons/evolve.svg");
}
.ico[data-icon="wand"] {
  --ico: url("../assets/generated/icons/wand.svg");
}
.ico[data-icon="globe"] {
  --ico: url("../assets/generated/icons/globe.svg");
}
.ico[data-icon="flag"] {
  --ico: url("../assets/generated/icons/flag.svg");
}
.ico[data-icon="heart"] {
  --ico: url("../assets/generated/icons/heart.svg");
}
.ico[data-icon="coin"] {
  --ico: url("../assets/generated/icons/coin.svg");
}
.ico[data-icon="skull"] {
  --ico: url("../assets/generated/icons/skull.svg");
}
.ico[data-icon="grid"] {
  --ico: url("../assets/generated/icons/grid.svg");
}
.ico[data-icon="clock"] {
  --ico: url("../assets/generated/icons/clock.svg");
}
.ico[data-icon="ball"] {
  --ico: url("../assets/generated/icons/ball.svg");
}
.ico[data-icon="swords"] {
  --ico: url("../assets/generated/icons/swords.svg");
}
.ico[data-icon="bench"] {
  --ico: url("../assets/generated/icons/bench.svg");
}
.ico[data-icon="sell"] {
  --ico: url("../assets/generated/icons/sell.svg");
}
.ico[data-icon="move"] {
  --ico: url("../assets/generated/icons/move.svg");
}
.ico[data-icon="refresh"] {
  --ico: url("../assets/generated/icons/refresh.svg");
}
.ico[data-icon="lock"] {
  --ico: url("../assets/generated/icons/lock.svg");
}
.ico[data-icon="close"] {
  --ico: url("../assets/generated/icons/close.svg");
}
.ico[data-icon="spark"] {
  --ico: url("../assets/generated/icons/spark.svg");
}
.ico[data-icon="home"] {
  --ico: url("../assets/generated/icons/home.svg");
}
.ico[data-icon="user"] {
  --ico: url("../assets/generated/icons/user.svg");
}

/* 시각적으로만 숨기는 글자 — 화면 낭독기와 툴팁에는 남는다 */
.btn.icon-only .btn-label,
.readout > .label,
.phase-label,
.rail .synergy-label,
.detail-stat-grid dt > span:not(.stat-icon),
.equipment-preview > .eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 글자 대신 아이콘만 쓰는 곳에서 지우는 안내 문구 */
.synergy-footnote,
.rail .panel > header,
.detail .panel > header,
.boss-preview > p,
.boss-candidates > span,
.boss-candidate small,
.bench-label h2,
.bench-label > small,
.bench-number,
.recruit-controls > small,
#footer-hint,
.dialog-heading .eyebrow,
.dialog-heading p.muted,
.hero-intro,
.hero-copy > .eyebrow,
.mode-option small,
.difficulty-option small,
.seed-label > small,
.opening-recruit-note,
.lobby-footer,
.setup-heading .eyebrow {
  display: none !important;
}

/* 아이콘 버튼 */
.btn.icon-only {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0 2px 3px 0;
  border-radius: 11px;
}

.btn.icon-only .ico {
  width: 21px;
  height: 21px;
  filter: drop-shadow(1px 2px 0 #0007);
}

/* 마우스를 올리면 이름을 보여 주는 말풍선 */
.btn.icon-only[aria-label]:hover::after,
.btn.icon-only[aria-label]:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 90;
  left: 50%;
  top: calc(100% + 8px);
  translate: -50% 0;
  padding: 5px 10px 6px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #0f131d;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 3px 3px 0 #0a0d15aa;
  pointer-events: none;
}

.dock .btn.icon-only[aria-label]:hover::after,
.dock .btn.icon-only[aria-label]:focus-visible::after {
  top: auto;
  bottom: calc(100% + 8px);
}

/* 알림이 있는 버튼(전설 보상·빛 시너지) */
.btn[data-alert="true"] {
  --bf: #b06ef3;
  --bs: #6f3ab8;
  --bh: #c48cff;
  animation: alert-pulse 1.4s ease-in-out infinite;
}

@keyframes alert-pulse {
  0%,
  100% {
    box-shadow:
      inset -4px -4px 0 var(--bs),
      inset 2px 2px 0 #ffffff26,
      2px 2px 0 var(--drop),
      0 0 0 0 #c48cff99;
  }
  50% {
    box-shadow:
      inset -4px -4px 0 var(--bs),
      inset 2px 2px 0 #ffffff26,
      2px 2px 0 var(--drop),
      0 0 0 7px #c48cff00;
  }
}

/* 주요 행동 버튼의 빛 번쩍임 */
.btn[data-variant="primary"]:not(:disabled),
.start-button:not(:disabled) {
  overflow: hidden;
  isolation: isolate;
}

.btn[data-variant="primary"]:not(:disabled)::before,
.start-button:not(:disabled)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px auto -2px -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, #ffffffa8, transparent);
  transform: skewX(-20deg);
  animation: cta-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.segment .btn[data-variant="primary"]::before {
  display: none;
}

@keyframes cta-shine {
  0%,
  55% {
    left: -60%;
  }
  85%,
  100% {
    left: 130%;
  }
}

/* ------------------------------------------------------------ 상단 HUD */

.topbar {
  position: relative;
  gap: 18px;
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #f7d51d,
    #ff9b3d,
    #f7d51d,
    transparent
  );
  background-size: 200% 100%;
  opacity: 0.75;
  animation: none;
}

@keyframes hud-sweep {
  to {
    background-position: -200% 0;
  }
}

.readouts {
  gap: 10px;
  align-items: center;
}

.readout {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 14px 3px 4px;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(180deg, #0c0f18, #161b29);
  box-shadow:
    inset 0 2px 0 #0008,
    0 1px 0 #ffffff14;
}

.readout:first-child {
  padding-left: 4px;
  border-left: 2px solid var(--edge);
}

.readout > .ico {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: none;
  position: relative;
  box-shadow:
    inset -2px -3px 0 #0005,
    inset 2px 2px 0 #ffffff40;
}

.readout > .ico::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 #0006);
}

.readout[data-tone="round"] > .ico {
  background-color: #3d7bd9;
}
.readout[data-tone="life"] > .ico {
  background-color: #e5484d;
}
.readout[data-tone="gold"] > .ico {
  background-color: #e0a91a;
}
.readout[data-tone="enemies"] > .ico {
  background-color: #6b4fa8;
}
.readout[data-tone="board"] > .ico {
  background-color: #3e9a5c;
}

.readout > .value {
  font-size: 21px;
  line-height: 1;
}
.readout[data-tone="life"] > .value {
  color: #ff8a8a;
}
.readout[data-tone="gold"] > .value {
  color: #ffd84a;
}
.readout[data-tone="enemies"] > .value,
.readout[data-tone="board"] > .value {
  font-size: 17px;
}

:root[data-theme="light"] .readout {
  background: linear-gradient(180deg, #fff, #e8ecf4);
}

.top-actions .btn.icon-only {
  width: 42px;
}
.top-actions {
  gap: 8px;
}

/* -------------------------------------------------------------- 전장 머리 */

.stage-head {
  padding: 5px 6px 5px 14px;
}
.phase {
  gap: 10px;
}
.phase .phase-dot {
  width: 14px;
  height: 14px;
}
.phase[data-phase="combat"] .phase-dot {
  background: #ff5a5a;
}
.phase-time {
  font-size: 20px;
  font-family: var(--font-ui);
  font-weight: 900;
  text-shadow: 2px 2px 0 #0008;
  min-width: 64px;
}
.phase[data-phase="combat"] .phase-time {
  color: #ff8a8a;
}

.start-combat {
  min-height: 40px !important;
  padding: 0 14px 4px 12px !important;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 900;
}

.start-combat .ico {
  width: 17px;
  height: 17px;
}
.start-combat kbd {
  font-size: 9px !important;
}
.stage-controls .btn.icon-only {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}
.stage-controls .segment .btn {
  min-height: 36px;
  padding: 0 10px 2px;
  font-size: 13px;
}

.stage-timer {
  height: 6px;
  background: #0b0e16;
}
.stage-timer > span {
  background: linear-gradient(90deg, #ff9b3d, #f7d51d) !important;
  box-shadow: 0 0 10px #f7d51d88;
}

.field-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 80px #05081099,
    inset 0 0 0 1px #ffffff14;
  border-radius: 9px;
}

.location-label {
  padding: 6px 14px 7px;
  background: linear-gradient(180deg, #2b3247, #1b2030);
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 1px 2px 0 #0008;
}

.hint {
  padding: 7px 14px 8px;
  border-color: var(--edge);
  background: #f7d51df0;
  color: var(--accent-ink);
  font-weight: 900;
}

.hint:empty {
  display: none;
}

.round-banner[data-visible="true"] {
  animation: banner-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes banner-pop {
  from {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

/* ---------------------------------------------------------- 시너지 레일 */

.rail .synergy-list {
  gap: 6px;
}

.rail .synergy-row {
  grid-template-columns: auto 1fr;
  min-height: 46px;
  padding: 5px 8px 5px 5px;
  border-left-width: 2px;
}

.rail .synergy-name .type-icon,
.rail .synergy-row .type-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 5px;
  border: 2px solid var(--edge);
  border-radius: 9px;
  background: var(--type);
  box-shadow:
    inset -3px -3px 0 #0004,
    inset 2px 2px 0 #ffffff40;
}

.rail .synergy-row[data-active="false"] .type-icon {
  background: var(--surface-3);
  filter: grayscale(0.6);
}

.rail .synergy-steps {
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  font-size: 0;
}

.rail .synergy-steps > span,
.rail .synergy-steps > b {
  width: 9px;
  height: 9px;
  border: 2px solid var(--edge);
  border-radius: 3px;
  background: #0f131d;
}

.rail .synergy-steps > b {
  background: var(--type);
  box-shadow: 0 0 6px var(--type);
}

.rail .synergy-count {
  order: -1;
  margin: 0 6px 0 0;
  font-size: 15px;
  font-family: var(--font-ui);
}

.rail .synergy-row[data-active="true"] .synergy-count {
  background: var(--type);
  color: #fff;
  text-shadow: 1px 1px 0 #0009;
}

/* 다음 보스 카드 */
.boss-preview {
  gap: 8px;
}

.boss-preview-round {
  align-self: flex-start;
  padding: 3px 9px 4px;
  border: 2px solid var(--edge);
  border-radius: 7px;
  background: #7d4bd6;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  box-shadow: inset -2px -2px 0 #4f2a99;
}

.boss-preview-selected {
  padding: 8px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 20% 50%, #c9a2ff40, transparent 60%), #1a1630;
}

.boss-preview-selected small {
  display: none !important;
}
.boss-candidates {
  border-top: 0;
  padding-top: 0;
}
.boss-candidate {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.boss-candidate[data-selected="true"] {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 10px #c9a2ff88;
}

.wave-summary {
  padding: 4px;
}
.wave-summary .portrait {
  filter: brightness(0.5) saturate(0.6);
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #2a1822;
}

/* --------------------------------------------------------------- 상세 */

.detail-stat-grid .stat-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  background: center / contain no-repeat;
  image-rendering: pixelated;
}

.stat[data-stat="atk"] .stat-icon {
  background-image: url("../assets/icons/ATK.png");
  font-size: 0;
}
.stat[data-stat="matk"] .stat-icon {
  background-image: url("../assets/icons/AP.png");
  font-size: 0;
}
.stat[data-stat="aps"] .stat-icon,
.stat[data-stat="speed"] .stat-icon {
  background-image: url("../assets/icons/SPEED.png");
  font-size: 0;
}
.stat[data-stat="range"] .stat-icon {
  background-image: url("../assets/icons/RANGE.png");
  font-size: 0;
}
.stat[data-stat="mana"] .stat-icon {
  background-image: url("../assets/icons/PP.png");
  font-size: 0;
}
.stat[data-stat="hp"] .stat-icon {
  background-image: url("../assets/icons/HP.png");
  font-size: 0;
}
.stat[data-stat="shield"] .stat-icon {
  background-image: url("../assets/icons/SHIELD.png");
  font-size: 0;
}
.stat[data-stat="def"] .stat-icon {
  background-image: url("../assets/icons/DEF.png");
  font-size: 0;
}
.stat[data-stat="mdef"] .stat-icon {
  background-image: url("../assets/icons/SPE_DEF.png");
  font-size: 0;
}

.detail-stat-grid .stat {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.detail-stat-grid dd {
  margin: 0 !important;
  font-size: 15px !important;
}

.ally-detail {
  gap: 9px;
}

.detail-head .portrait {
  background:
    radial-gradient(70% 70% at 50% 70%, #f7d51d33, transparent 70%),
    var(--card-face);
}

/* --------------------------------------------------------------- 하단 */

.bench-section {
  grid-template-columns: 62px minmax(0, 1fr) !important;
}

.bench-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px !important;
}

.bench-capacity {
  margin: 0 !important;
  padding: 3px 7px 4px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #0f131d;
  font-size: 11px !important;
  white-space: nowrap;
}

.bench-label > .btn.icon-only {
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0 !important;
  font-size: inherit !important;
}

.bench-auto {
  --bf: var(--green-face);
  --bs: var(--green-shade);
  --bh: var(--green-hover);
}

.bench-unit {
  justify-content: flex-end;
  padding-bottom: 7px;
}
.bench-unit > .portrait {
  filter: drop-shadow(2px 3px 0 #0007);
  transition: filter 0.18s ease;
}
.bench-unit:not(:disabled):hover > .portrait,
.bench-unit:focus-visible > .portrait {
  filter: drop-shadow(0 0 4px #ffffff70) drop-shadow(0 0 9px #ffffff35);
}
.bench-unit[data-selected="true"] {
  animation: none;
  outline: 2px solid #f7d51d;
  outline-offset: -2px;
}

@keyframes bench-glow {
  50% {
    box-shadow:
      inset -4px -4px 0 var(--card-pick-shade),
      inset 2px 2px 0 #e1c65455,
      3px 3px 0 var(--drop),
      0 0 16px #f7d51d88;
  }
}

.recruit-controls {
  gap: 8px;
}

.recruit-button {
  min-height: 56px !important;
  gap: 10px;
  justify-content: flex-start !important;
}

.recruit-button > .ico {
  width: 26px;
  height: 26px;
  transition: rotate 0.3s;
}
.recruit-button:hover:not(:disabled) > .ico {
  rotate: -25deg;
}
.recruit-button > b {
  flex: 1;
  text-align: left;
  font-size: 17px !important;
}
.recruit-cost {
  display: inline-flex;
  align-items: center;
  gap: 5px !important;
}
.recruit-cost .ico {
  width: 16px;
  height: 16px;
}

.recruit-secondary {
  display: flex !important;
  gap: 8px !important;
  justify-content: stretch;
}
.recruit-secondary .btn.icon-only {
  flex: 1;
  width: auto;
}
.recruit-research {
  --bf: var(--blue-face) !important;
  --bs: var(--blue-shade) !important;
  --bh: var(--blue-hover) !important;
}
.recruit-evolution {
  --bf: #b06ef3;
  --bs: #6f3ab8;
  --bh: #c48cff;
}

.game-footer {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------- 로비 */

.lobby-brand .brand-mark {
  width: 38px;
  height: 38px;
  border: 3px solid var(--edge);
  background: linear-gradient(#ee4b4b 0 43%, var(--edge) 43% 57%, #f4f6fa 57%);
  box-shadow: 3px 3px 0 var(--drop);
  animation: ball-wobble 4s ease-in-out infinite;
}

.lobby-brand .brand-mark::after {
  width: 12px;
  height: 12px;
  border: 3px solid var(--edge);
  background: #fff;
}

@keyframes ball-wobble {
  0%,
  80%,
  100% {
    rotate: 0deg;
  }
  84% {
    rotate: -14deg;
  }
  88% {
    rotate: 12deg;
  }
  92% {
    rotate: -6deg;
  }
}

.lobby-nav {
  gap: 10px;
}
.lobby-nav .btn {
  min-height: 42px;
  gap: 8px;
  padding: 0 14px 3px 12px;
}
.lobby-nav .btn .ico {
  width: 19px;
  height: 19px;
}
.lobby-rooms {
  --bf: var(--blue-face) !important;
  --bs: var(--blue-shade) !important;
  --bh: var(--blue-hover) !important;
}

.hero-copy h1 {
  font-size: clamp(40px, 4.6vw, 72px) !important;
  line-height: 1.12;
  background: linear-gradient(180deg, #fff 30%, #ffe27a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(4px 5px 0 #0a0d15) drop-shadow(0 10px 40px #000c);
}

.hero-features {
  margin: 34px 0 36px !important;
  gap: 12px;
}

.hero-features > span {
  flex-direction: row !important;
  align-items: baseline;
  gap: 8px !important;
  padding: 8px 16px 10px !important;
  border: 2px solid var(--edge) !important;
  border-radius: 12px;
  background: #121725d9;
  box-shadow: 3px 3px 0 var(--drop);
}

.hero-features b {
  font-size: 30px;
}

.companion-strip {
  padding: 10px 18px 10px 14px;
}
.companion-portraits .portrait {
  width: 48px !important;
  height: 48px !important;
  margin-left: -10px;
  transition: translate 0.2s;
}
.companion-portraits .portrait:first-child {
  margin-left: 0;
}
.companion-strip:hover .portrait {
  translate: 0 -5px;
}
.companion-strip:hover .portrait:nth-child(even) {
  translate: 0 -9px;
}
.companion-strip b {
  font-size: 13px;
}

.setup-card {
  position: relative;
  overflow: hidden;
}

.setup-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(
    90deg,
    #ee4b4b,
    #f7d51d,
    #92cc41,
    #109fff,
    #b06ef3
  );
}

.setup-heading {
  margin-bottom: 18px;
}
.mode-option > span {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 16px !important;
}
.mode-option .ico {
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 2px solid var(--edge);
  border-radius: 9px;
  background: #ffffff;
  color: transparent;
}
.mode-option > span > .ico {
  background: var(--blue-face);
  -webkit-mask: none;
  mask: none;
  position: relative;
  box-shadow: inset -2px -2px 0 var(--blue-shade);
}
.mode-option > span > .ico::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.mode-option input:checked + span > .ico {
  background: var(--yellow-face);
  box-shadow: inset -2px -2px 0 var(--yellow-shade);
}
.mode-option input:checked + span > .ico::before {
  background: var(--accent-ink);
}
.mode-option b {
  font-size: 16px;
}
.mode-option b::before {
  content: none !important;
}
.difficulty-option > span {
  padding: 13px 4px 15px !important;
}

.seed-input .btn.icon-only {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.start-button {
  justify-content: center !important;
  gap: 12px;
  min-height: 62px !important;
  font-size: 20px !important;
  letter-spacing: 0.02em;
}

.start-button > .ico {
  width: 22px;
  height: 22px;
}
.start-button > .ico[data-icon="ball"] {
  margin-left: auto;
  width: 26px;
  height: 26px;
  transition: rotate 0.4s;
}
.start-button > .ico[data-icon="play"] {
  margin-right: auto;
}
.start-button:hover:not(:disabled) > .ico[data-icon="ball"] {
  rotate: 360deg;
}

.lobby-scenery {
  animation: scenery-drift 40s ease-in-out infinite alternate;
}

@keyframes scenery-drift {
  from {
    background-position:
      center 58%,
      center,
      center 58%;
  }
  to {
    background-position:
      center 58%,
      center,
      54% 52%;
  }
}

/* 로그인 탭에서 선택된 탭은 눌린 상태로 선명하게 */
.rooms-ui .rooms-button.is-selected:disabled {
  opacity: 1;
  color: var(--accent-ink);
  --bf: var(--yellow-face);
  --bs: var(--yellow-shade);
}
.rooms-ui .rooms-welcome > p {
  display: none;
}

/* 모바일: 아이콘 크기만 줄인다 */
@media (max-width: 900px) {
  .readout > .ico {
    width: 26px;
    height: 26px;
  }
  .readout {
    padding-right: 10px;
  }
  .btn.icon-only,
  .top-actions .btn.icon-only {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .bench-section {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .bench-label {
    flex-direction: row;
  }
  .hero-copy h1 {
    font-size: 34px !important;
  }
}

/* 좁은 칸 보정 */
.bench-capacity {
  display: none !important;
}
.bench-section {
  grid-template-columns: 50px minmax(0, 1fr) !important;
}
.bench-empty-slot {
  justify-content: center !important;
  padding-bottom: 2px !important;
}
.detail-stat-grid {
  gap: 5px !important;
}
.detail-stat-grid .stat {
  gap: 5px;
  padding: 6px 6px !important;
  min-width: 0;
}
.detail-stat-grid dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px !important;
  letter-spacing: -0.02em;
}
:is(
    .shop-item,
    .wand-choices,
    .recruit-controls,
    .stage-controls,
    .lobby-nav,
    .bench-label
  )
  .btn:disabled,
.btn.icon-only:disabled {
  --bf: #757987;
  --bs: #535662;
  --bh: #757987;
  color: #d0d3da;
}

@media (max-width: 640px) {
  .topbar {
    gap: 6px;
    padding: 0 6px;
  }
  .readouts {
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .readout {
    gap: 4px;
    padding: 2px 8px 2px 2px;
  }
  .readout > .ico {
    width: 24px;
    height: 24px;
  }
  .readout > .ico::before {
    inset: 5px;
  }
  .readout > .value {
    font-size: 15px;
  }
  .readout > .value small {
    display: none;
  }
  .top-actions {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 42vw;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
  }
  .top-actions .btn.icon-only,
  .pane-toggles .btn.icon-only {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
  .btn.icon-only[aria-label]:hover::after {
    display: none;
  }
  .stage-head {
    flex-wrap: wrap !important;
    gap: 6px;
    padding: 5px 6px;
  }
  .stage-controls {
    flex-wrap: wrap !important;
    gap: 4px;
  }
  .start-combat kbd {
    display: none;
  }
  .start-combat {
    font-size: 12px !important;
    padding: 0 10px 3px !important;
    min-height: 36px !important;
  }
  .phase-time {
    font-size: 16px;
    min-width: 50px;
  }
  .recruit-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .recruit-secondary {
    min-width: 0;
  }
  .recruit-button {
    min-height: 44px !important;
  }
  .recruit-button > b {
    font-size: 14px !important;
  }
  .hero-features {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-features > span {
    padding: 6px 12px 8px !important;
  }
  .hero-features b {
    font-size: 24px;
  }
  .hero-features small {
    white-space: nowrap;
  }
  .lobby-nav .lobby-rooms span {
    display: none;
  }
}

/* 로비 로고 — 원본 로고 에셋이 없어 글자와 CSS로 만든다 */
.lobby-brand {
  visibility: hidden;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
}

.game-logo {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 0 10px;
  margin: 0;
  filter: drop-shadow(0 18px 40px #000b);
  animation: logo-float 5s ease-in-out infinite;
}

.game-logo-ball {
  position: absolute;
  z-index: -1;
  top: -40px;
  left: 50%;
  translate: -50% 0;
  width: 150px;
  height: 150px;
  border: 7px solid var(--edge);
  border-radius: 50%;
  background: linear-gradient(#ee4b4b 0 44%, var(--edge) 44% 56%, #f4f6fa 56%);
  opacity: 0.22;
  animation: logo-spin 24s linear infinite;
}

.game-logo-ball::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 42px;
  height: 42px;
  border: 7px solid var(--edge);
  border-radius: 50%;
  background: #f4f6fa;
}

.game-logo-title {
  font-size: clamp(64px, 8.4vw, 132px);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #ffcb05;
  -webkit-text-stroke: 0.09em #2a5ca8;
  paint-order: stroke fill;
  text-shadow: 0.05em 0.07em 0 #102a5a;
  transform: skewX(-6deg);
}

.game-logo-sub {
  margin-top: -6px;
  padding: 6px 22px 9px;
  border: 3px solid var(--edge);
  border-radius: 10px;
  background: linear-gradient(180deg, #ee4b4b, #c22f35);
  color: #fff;
  font-size: clamp(16px, 1.9vw, 28px);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-shadow: 2px 2px 0 #0008;
  box-shadow:
    inset -4px -4px 0 #8e1f25,
    inset 2px 2px 0 #ffffff55,
    4px 4px 0 var(--drop);
  transform: rotate(-2deg);
}

@keyframes logo-float {
  50% {
    translate: 0 -8px;
  }
}
@keyframes logo-spin {
  to {
    rotate: 360deg;
  }
}

.companion-strip {
  padding: 10px 16px;
}
.companion-portraits .portrait {
  width: 56px !important;
  height: 56px !important;
  margin-left: -12px;
}

@media (max-width: 640px) {
  .hero-copy {
    align-items: center;
    gap: 24px;
  }
  .game-logo-ball {
    width: 110px;
    height: 110px;
    top: -28px;
  }
  .companion-portraits .portrait {
    width: 42px !important;
    height: 42px !important;
  }
}

/* 비활성 버튼 — 흐리게 겹치지 않고 어두운 회색 면에 밝은 글자로 또렷하게 둔다 */
.btn:disabled,
.btn[data-variant="primary"]:disabled,
.start-button:disabled,
.rooms-ui .rooms-button:disabled {
  --bf: #5a5f6e !important;
  --bs: #3d414c !important;
  --bh: #5a5f6e !important;
  background: var(--bf) !important;
  border-color: var(--edge) !important;
  color: #eceef3 !important;
  text-shadow: 1px 2px 0 #0009 !important;
  opacity: 1;
  cursor: not-allowed;
}
.btn:disabled .ico {
  opacity: 0.85;
}
.btn:disabled kbd {
  color: #eceef3;
  border-color: #ffffff40;
}
.btn[data-variant="ghost"]:disabled {
  background: transparent !important;
  box-shadow: none;
  color: var(--ink-faint) !important;
  text-shadow: none !important;
}
.rooms-ui .rooms-button.is-selected:disabled {
  --bf: var(--yellow-face) !important;
  --bs: var(--yellow-shade) !important;
  color: var(--accent-ink) !important;
  text-shadow: 1px 1px 0 #fff8 !important;
}

.ico[data-icon="evolve-auto"] {
  --ico: url("../assets/generated/icons/evolve-auto.svg");
}
.bench-auto-evolve {
  --bf: #b06ef3;
  --bs: #6f3ab8;
  --bh: #c48cff;
}
.bench-label > .btn.icon-only.bench-auto-evolve:not(:disabled) {
  animation: alert-pulse 1.4s ease-in-out infinite;
}

/* =====================================================================
   전장 전체 화면 배치 — 전장이 뷰포트 폭·높이를 최대한 쓰고
   시너지(왼쪽)는 비치는 유리 패널, 상세(오른쪽)는 선택 시 팝업으로 전장 위에 겹친다.
   ===================================================================== */

:root {
  --topbar-h: 56px;
  --dock-h: 118px;
}

.app {
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--dock-h) !important;
  max-width: none !important;
}

.game-footer {
  display: none !important;
}

.main,
.main[data-pane] {
  position: relative;
  display: block !important;
  padding: 6px 8px !important;
  min-height: 0;
}

.stage {
  position: relative;
  height: 100%;
  gap: 0 !important;
}

.field-wrap {
  height: 100%;
  border-radius: 14px;
}

/* 전투 상태줄은 전장 위 가운데에 떠 있는 알약 */
#stage-head {
  position: absolute;
  z-index: 18;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 4px;
  justify-items: stretch;
  pointer-events: none;
}

#stage-head > * {
  pointer-events: auto;
}

#stage-head .stage-head {
  min-height: 0;
  gap: 14px;
  padding: 4px 5px 4px 14px;
  border-radius: 999px;
  background: #141823;
  backdrop-filter: none;
  box-shadow:
    3px 3px 0 #0a0d15aa,
    0 10px 30px #0008;
}

/* 준비·전투·날씨 표시가 바뀌어도 막대 크기는 고정한다 */
#stage-head .stage-head {
  box-sizing: border-box;
  width: 550px;
  max-width: 100%;
}
#stage-head .stage-head .phase {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
#stage-head .stage-head .weather-hud {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#stage-head .phase-time {
  flex: 0 0 auto;
  min-width: 72px;
  white-space: nowrap;
}
#stage-head .stage-controls {
  flex: none;
  margin-left: auto;
}
#stage-head .stage-timer {
  height: 5px;
  margin: 0 22px;
}
#stage-head .stage-timer > span {
  transition: width 120ms linear;
}
#stage-head .boss-hud {
  min-width: 320px;
  background: #241f3a;
  backdrop-filter: none;
}

.room-status {
  position: absolute;
  z-index: 18;
  top: 62px;
  left: 50%;
  translate: -50% 0;
}

.location-label {
  top: auto !important;
  bottom: 12px !important;
  left: auto !important;
  right: 14px !important;
}
.field-overlay {
  left: 50% !important;
  right: auto !important;
  translate: -50% 0;
  bottom: 12px !important;
}

/* 왼쪽: 비치는 유리 시너지 패널 */
.main > .rail,
.main[data-pane] > .rail {
  position: absolute !important;
  z-index: 16;
  display: flex !important;
  top: 16px !important;
  bottom: 16px !important;
  left: 18px !important;
  right: auto !important;
  width: 232px !important;
  padding: 0 !important;
  gap: 8px;
  overflow-y: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  scrollbar-width: none;
  pointer-events: none;
}

.main > .rail > * {
  pointer-events: auto;
}

.rail > .panel {
  background: #161b2a !important;
  border-color: #0a0d15cc !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    3px 3px 0 #0a0d1577,
    0 12px 30px #0006;
}

.rail .synergy-row {
  background: color-mix(in srgb, var(--type) 22%, #1d2333aa);
  box-shadow: inset -3px -3px 0 #0003;
}

.rail .synergy-row[data-active="false"] {
  background: #1d2333aa;
}
.rail .boss-preview-selected {
  background:
    radial-gradient(ellipse at 20% 50%, #c9a2ff40, transparent 60%), #1a1630b3;
}

/* 오른쪽: 선택했을 때만 나오는 상세 팝업 */
.main > .detail,
.main[data-pane] > .detail {
  position: absolute !important;
  z-index: 17;
  display: flex !important;
  top: 16px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: 304px !important;
  max-height: calc(100% - 32px);
  padding: 0 !important;
  overflow-y: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  scrollbar-width: thin;
  animation: detail-pop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.detail:has(.empty-symbol) {
  display: none !important;
}

.detail > .panel {
  background:
    linear-gradient(180deg, #ffffff0c, transparent 90px), #1d2335f2 !important;
  border-width: 3px !important;
  box-shadow:
    5px 5px 0 #0a0d15cc,
    0 24px 60px #000a !important;
}

@keyframes detail-pop {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 하단 벤치 높이 축소 */
.dock {
  padding: 8px 14px !important;
  gap: 14px !important;
}
.bench-unit {
  height: 92px !important;
}
.recruit-button {
  min-height: 50px !important;
}
.recruit-secondary .btn.icon-only {
  height: 40px;
  min-height: 40px;
}
.bench-label {
  gap: 6px !important;
}
.bench-label > .btn.icon-only {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

/* 좁은 화면: 시너지는 버튼으로 열고 상세는 아래쪽 팝업 */
.pane-toggles {
  display: none !important;
}

@media (max-width: 900px) {
  :root {
    --dock-h: 190px;
  }
  .pane-toggles {
    display: flex !important;
  }
  .main > .rail {
    display: none !important;
  }
  .main[data-pane="rail"] > .rail {
    display: flex !important;
    top: 60px !important;
  }
  .main > .detail,
  .main[data-pane] > .detail {
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 58%;
  }
  #stage-head {
    top: 6px;
    width: calc(100% - 16px);
  }
  #stage-head .stage-head {
    border-radius: 14px;
  }
  .bench-unit {
    height: 66px !important;
  }
}

@media (max-height: 760px) {
  :root {
    --dock-h: 104px;
  }
  .bench-unit {
    height: 80px !important;
  }
}
.main > .detail:has(.empty-symbol),
.main[data-pane] > .detail:has(.empty-symbol) {
  display: none !important;
}
@media (max-width: 900px) {
  .main:not([data-pane="rail"]) > .rail,
  .main[data-pane]:not([data-pane="rail"]) > .rail {
    display: none !important;
  }
  .board-access {
    position: absolute;
    z-index: 19;
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
}
/* 키보드 배치 버튼은 초점이 들어오면 전장 아래쪽 위에 겹쳐 나타난다 */
.board-access {
  position: absolute;
  z-index: 19;
  left: 260px;
  right: 330px;
  bottom: 54px;
}
.board-access:focus-within {
  padding: 6px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: #141823e6;
}
@media (max-width: 900px) {
  .board-access {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
}

/* 이동식 상세 · 항상 열려 있는 도구 가방 */
#inventory-window {
  position: fixed;
  z-index: 20;
  right: 18px;
  bottom: calc(var(--dock-h) + 16px);
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: min(44vh, calc(100dvh - var(--dock-h) - 80px));
  overflow: auto;
  scrollbar-width: thin;
}
#inventory-window[hidden],
#detail[hidden] {
  display: none !important;
}
#inventory-window > .inventory-panel {
  background: linear-gradient(180deg, #ffffff0b, transparent 90px), #1d2335f5;
  border: 3px solid var(--edge);
  border-radius: 12px;
  box-shadow:
    4px 4px 0 #0a0d15bb,
    0 14px 36px #0007;
}
#inventory-window .inventory-window-heading,
#detail .panel > header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#detail .panel > header {
  min-height: 32px;
  padding: 6px 10px;
}
#detail[data-window-dragging] .panel > header,
#inventory-window[data-window-dragging] .inventory-window-heading {
  cursor: grabbing;
}
#inventory-window .inventory-collapse {
  min-height: 26px;
  padding: 2px 8px;
}
#inventory-window .inventory-window-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 38px;
  padding: 6px 10px;
  border-bottom: 2px solid var(--edge);
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #ffffff0a, transparent), var(--surface-2);
}
#inventory-window .inventory-window-heading h2 {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
}
#inventory-window .inventory-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}
#inventory-window .inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
#inventory-window .inventory-grid > .empty-detail {
  grid-column: 1 / -1;
}
#inventory-window .inventory-item {
  position: relative;
  min-width: 0;
  padding: 0;
  border-radius: 8px;
}
#inventory-window .owned-item-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  padding: 4px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: grab;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
#inventory-window .owned-item-button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
#inventory-window .owned-item-button:hover,
#inventory-window .owned-item-button:focus-visible,
#inventory-window .inventory-item[data-selected="true"] .owned-item-button {
  border-color: #ffffffb3;
  background: var(--surface-3);
  box-shadow: 0 0 10px #ffffff20;
}
#inventory-window .inventory-item[data-equipped="true"] {
  opacity: 0.6;
}
#inventory-window .inventory-item > input {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--accent);
}
#inventory-window .inventory-item-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#inventory-window .inventory-drag-hint {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.5;
}
#inventory-window .inventory-item-detail {
  padding: 8px;
  border-radius: 8px;
}
#inventory-window .inventory-item-detail {
  border-left: 0;
  border-top: 1px solid #ffffff20;
}
#inventory-window .selected-item-detail h3 {
  margin: 0;
  font-size: 13px;
}
#inventory-window .selected-item-detail,
#inventory-window .craft-panel {
  gap: 6px;
}
#inventory-window .craft-panel {
  padding-top: 8px;
  margin-top: 2px;
}
#inventory-window .inventory-item-detail p,
#inventory-window .craft-result,
#inventory-window .borrowed-tools {
  margin: 3px 0;
  font-size: 11px;
  line-height: 1.5;
}
#inventory-window .target-select {
  width: 100%;
  min-width: 0;
}
#inventory-window .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#inventory-window .btn-row .btn {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
}

#detail[data-window-moved="true"],
#inventory-window[data-window-moved="true"] {
  position: fixed !important;
  top: var(--window-y) !important;
  left: var(--window-x) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(304px, calc(100vw - 16px)) !important;
  max-height: calc(100dvh - 16px);
  animation: none !important;
  transform: none !important;
  translate: none !important;
}
#detail {
  max-width: calc(100vw - 16px);
}
[data-item-drop="valid"] {
  outline: 2px solid #ffffffd9;
  outline-offset: 3px;
  box-shadow:
    inset 0 0 14px #ffffff1a,
    0 0 18px #ffffff66;
  transition:
    outline-color 140ms ease,
    box-shadow 140ms ease;
}
.recruit-secondary {
  display: flex;
  flex-wrap: nowrap;
}
@media (max-width: 600px) {
  #inventory-window {
    right: 8px;
    bottom: calc(var(--dock-h) + 8px);
    width: 260px;
    max-height: 36vh;
  }
  #inventory-window .inventory-body {
    padding: 8px;
  }
}

/* 도구 설명은 아이콘 옆에 즉시 나타나며 가방의 공간을 차지하지 않는다. */
.item-tooltip {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid #ffffff52;
  border-radius: 10px;
  background: #171d2af7;
  color: #f2f5ff;
  box-shadow:
    0 6px 24px #0009,
    inset 0 1px 0 #ffffff0d;
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}
.item-tooltip > b {
  display: block;
  color: #fff;
  font-size: 13px;
}
.item-tooltip > p {
  margin: 5px 0 0;
  color: #cbd3e4;
  white-space: pre-line;
}
.item-tooltip > p:empty {
  display: none;
}
#inventory-window .inventory-item > .item-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #394359;
  color: white;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
#inventory-window .inventory-item > .item-remove:hover {
  background: #65738d;
}
#inventory-window .inventory-item[data-equipped="true"] {
  opacity: 1;
}
#inventory-window .inventory-item[data-equipped="true"] > .owned-item-button {
  opacity: 0.6;
}
#inventory-window .inventory-item > .item-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 상점: 카드 전체를 구매 대상으로, 설명은 기존 hover/focus 툴팁으로 표시. */
.shop-purchase-card {
  font: inherit;
  text-align: center;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 12px;
  cursor: pointer;
}
.shop-purchase-card .shop-item-name {
  font-size: 14px;
  font-weight: 900;
}
.shop-purchase-card .shop-item-owned {
  font-size: 11px;
  color: var(--ink-muted);
}
.shop-purchase-card .shop-item-price {
  margin-top: auto;
  padding-top: 4px;
  color: var(--accent);
  font-weight: 900;
}
.shop-purchase-card:not([aria-disabled="true"]):hover,
.shop-purchase-card:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.shop-purchase-card[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Special material drag: only eligible forms illuminate, including bench units. */
.bench-unit[data-special-evolution-eligible="true"] {
  border-color: #ffe08a;
  box-shadow:
    0 0 12px #f4d35b99,
    inset 0 0 10px #f4d35b33;
}

.special-energy-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ffe39b;
}
.detail-special-energy {
  height: 9px;
  border: 1px solid #c19a3d;
  background: #302610;
}
.meter[data-tone="special"] > span {
  background: #ffd34f;
}
.special-evolution-detail > small {
  color: #e8be63;
}

/* All special-evolution candidates remain visible while their material is being dragged. */
.bench-unit[data-special-evolution-eligible="true"] {
  outline: 2px solid var(--evolution-target-color, #ffe08a);
  outline-offset: -2px;
  border-color: var(--evolution-target-color, #ffe08a);
}

/* X/Y comparison uses actual in-game sprites, never the origin portrait fallback. */
.special-evolution-choice {
  width: min(840px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  overflow: auto;
  box-sizing: border-box;
}
.special-evolution-choice .dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.special-evolution-choice .dialog-heading h2 {
  font-size: 21px;
}
.special-evolution-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.special-evolution-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 18px 14px;
  text-align: left;
  color: var(--ink);
  background: var(--surface-2);
  border: 2px solid #9581c4;
  border-radius: 12px;
  cursor: pointer;
}
.special-evolution-choice-card:hover,
.special-evolution-choice-card:focus-visible {
  outline: 3px solid #dec1ff;
  outline-offset: 2px;
  background: var(--surface-3);
}
.special-evolution-choice-card h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}
.special-evolution-choice-sprite {
  display: grid;
  place-items: center;
  min-height: 164px;
  background: radial-gradient(ellipse at 50% 75%, #a879ec33, transparent 65%);
}
.special-evolution-choice-sprite canvas {
  image-rendering: pixelated;
  max-width: 100%;
}
.special-evolution-choice-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
}
.special-evolution-choice-stats > div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.special-evolution-choice-stats dt {
  color: var(--ink-faint);
  font-size: 12px;
}
.special-evolution-choice-stats dd {
  margin: 0;
  font-weight: bold;
  font-size: 13px;
}
.special-evolution-choice-card .ability-card {
  display: grid;
  gap: 5px;
}
.special-evolution-choice-card .ability-card p {
  margin: 0;
  line-height: 1.6;
}
.special-evolution-choice-select {
  margin-top: auto;
  text-align: center;
}
@media (max-width: 440px) {
  .special-evolution-choice {
    padding: 12px;
  }
  .special-evolution-choice-grid {
    gap: 8px;
  }
  .special-evolution-choice-card {
    padding: 12px 8px;
  }
  .special-evolution-choice-stats {
    grid-template-columns: 1fr;
  }
  .special-evolution-choice-card h3 {
    font-size: 14px;
  }
}

/* Item drag candidates pulse without covering the Pokémon with labels. */
.bench-unit[data-special-evolution-eligible="true"] {
  animation: item-target-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes item-target-pulse {
  from {
    box-shadow: 0 0 3px var(--evolution-target-color);
  }
  to {
    box-shadow:
      0 0 16px var(--evolution-target-color),
      inset 0 0 8px var(--evolution-target-color);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bench-unit[data-special-evolution-eligible="true"] {
    animation: none;
  }
}

/* Compact detail: descriptions live in hover cards; reserve the bag's screen area. */
#detail {
  overflow: visible;
}
#detail > .panel {
  transform-origin: top right;
}
#detail .panel > header {
  min-height: 24px;
  padding: 3px 8px;
}
#detail .panel > .panel-body {
  padding: 6px 8px;
}
#detail .ally-detail {
  gap: 5px;
}
#detail .detail-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}
#detail .detail-stat-grid .stat {
  padding: 3px 4px;
}
#detail .detail-stat-grid dt > span:not(.stat-icon) {
  display: none;
}
#detail .detail-stat-grid dt {
  float: left;
  margin-right: 4px;
}
#detail .detail-stat-grid dd {
  font-size: 11px;
  margin: 0;
}
#detail .combat-option-grid {
  margin: 0;
  gap: 3px;
}
#detail .combat-option-grid .stat {
  padding: 3px;
}
#detail .combat-option-grid dt > span:not(.stat-icon) {
  display: none;
}
#detail .compact-skill {
  border: 1px solid var(--line-soft);
  padding: 5px;
  cursor: help;
}
#detail .special-evolution-detail {
  position: relative;
  padding: 4px;
  gap: 3px;
}
#detail .compact-skill-info {
  position: absolute;
  right: 3px;
  top: 3px;
  cursor: help;
}
#detail .evolution-inline .evolution-action {
  min-height: 30px;
}
.active-buff-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.active-buff-strip:empty {
  display: none;
}
.active-buff-icon {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 30px;
  padding: 0 3px;
  color: #abe3a4;
  border: 1px solid #83c99080;
  background: #173e2a88;
  border-radius: 4px;
  cursor: help;
}
.active-buff-icon b {
  font-size: 18px;
}
.active-buff-icon small {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 8px;
  background: #121c29;
}
.active-buff-icon:focus-visible,
.active-buff-icon:hover {
  outline: 1px solid #b9f5b0;
}

/* Fixed-width detail; numeric values are never truncated. */
.main > #detail.detail,
.main[data-pane] > #detail.detail {
  width: 400px !important;
}
#detail > .panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#detail .detail-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
#detail .detail-stat-grid .stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 5px 4px !important;
}
#detail .detail-stat-grid dt {
  float: none;
  margin: 0;
  min-width: 0;
}
#detail .detail-stat-grid dd,
#detail .combat-option-grid dd {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#detail .detail-stat-grid .stat[data-stat="hp"],
#detail .detail-stat-grid .stat[data-stat="shield"] {
  grid-column: span 2;
}

/* Stable detail viewport: transient stats/effects never rescale the whole card. */
#detail {
  height: min(600px, calc(100dvh - 120px));
}
#detail > .panel {
  height: 800px;
  max-height: none;
  min-height: 800px;
  flex: 0 0 auto;
  zoom: 1;
  overflow: visible;
}
#detail > .panel > header {
  flex: 0 0 auto;
}
#detail > .panel > .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
#detail > .panel.summon-detail {
  overflow: visible;
}
#detail .active-buff-strip,
#detail .active-buff-strip:empty,
#detail .detail-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  height: 96px;
  min-height: 96px;
  gap: 4px;
  overflow: visible;
}
#detail :is(.active-buff-strip, .detail-status-strip) > * {
  flex: 0 0 auto;
  white-space: nowrap;
}
#detail .detail-growth-region {
  height: 64px;
  overflow: visible;
}
#detail .detail-growth-region > * {
  margin: 0;
}
#detail .enhancement-control > .btn {
  block-size: calc(2.5em + 12px);
  min-block-size: 36px;
  line-height: 1.25;
  white-space: normal;
}
/* A bottom anchor would make measured top depend on the card's own height. */
@media (max-width: 900px) {
  .main > #detail.detail:not([data-window-moved="true"]),
  .main[data-pane] > #detail.detail:not([data-window-moved="true"]) {
    top: 16px !important;
    bottom: auto !important;
  }
}
/* Leave room for a two-line numeric value without moving the following rows. */
#detail {
  max-width: min(calc(100vw - 16px), calc(100% - 24px));
}
#detail .detail-stat-grid .stat {
  min-height: 44px;
}

/* Rarity/stage belong to the scaled header, beside its close button. */
#detail.detail[data-pokemon-card="true"]::before {
  content: none;
}
#detail > .panel > header {
  display: flex;
  align-items: center;
  gap: 8px;
}
#detail > .panel > header > h2 {
  margin-right: auto;
  min-width: 0;
}
#detail > .panel > header::after {
  content: attr(data-card-label);
  order: 1;
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 2px solid #0a0d15;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card-accent), var(--card-deep));
  color: #10131a;
  font: 800 10px / 1.3 var(--font-ui, sans-serif);
  white-space: nowrap;
}
#detail > .panel > header:not([data-card-label])::after,
#detail > .panel > header[data-card-label=""]::after {
  display: none;
}
#detail > .panel > header > .btn-row {
  order: 2;
  flex: 0 0 auto;
}

#detail .detail-growth-region .stat {
  min-height: 28px;
}
#detail .flask-growth-summary {
  font-size: 11px;
  line-height: 14px;
}