:root {
  color-scheme: dark;
  --bg: #080a0d;
  --panel: #10141a;
  --panel-2: #151b23;
  --line: #303846;
  --muted: #8e99aa;
  --text: #edf0f4;
  --gold: #d2ae63;
  --gold-soft: #7b663a;
  --danger: #d77c7c;
  --good: #82c79a;
  --frost: #91b8dc;
  --void: #a18ad3;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% 0%, #151a21 0, var(--bg) 46rem); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.handoff { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #07090c; }
.handoff[hidden] { display: none; }
.handoff-card { width: min(460px, 100%); padding: 28px; border: 1px solid var(--gold-soft); border-radius: 16px; background: linear-gradient(180deg, #171b21, #0c0f14); box-shadow: 0 24px 80px rgba(0,0,0,.65); text-align: center; }
.handoff-card h2 { margin: 2px 0 10px; font: 700 1.7rem Georgia, serif; }
.handoff-card p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.handoff-card button { margin-top: 8px; padding: 11px 18px; border: 1px solid var(--gold-soft); border-radius: 8px; background: #1b1811; cursor: pointer; }
.handoff-card button:hover { border-color: var(--gold); }

.shell { width: min(1500px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 36px; }
.masthead { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #15191f, #0d1015); border-radius: var(--radius); }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--gold-soft); border-radius: 50%; color: var(--gold); font-size: 30px; }
.brand-copy h1 { margin: 0; font: 700 clamp(1.65rem, 4vw, 2.6rem)/1 Georgia, serif; letter-spacing: .035em; }
.brand-copy > p:last-child { margin: 6px 0 0; color: var(--muted); }
.eyebrow { margin: 0 0 5px; color: var(--gold); text-transform: uppercase; font-size: .68rem; letter-spacing: .16em; font-weight: 800; }
.build-badge { text-align: right; border-left: 1px solid var(--line); padding-left: 18px; }
.build-badge span, .build-badge strong { display: block; }
.build-badge span { color: var(--muted); font-size: .72rem; }
.build-badge strong { color: var(--gold); }

.controls, .status-bar { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16,20,26,.9); display: flex; gap: 12px; align-items: center; padding: 10px 12px; flex-wrap: wrap; }
.controls label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.controls input { width: 96px; color: var(--text); background: #080b10; border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
.controls button, .target-picker button { background: #171d25; border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; cursor: pointer; }
.controls button:hover, .target-picker button:hover { border-color: var(--gold-soft); }
.connection { margin-left: auto; color: var(--muted); font-size: .8rem; }
.connection.online { color: var(--good); }
kbd { display: inline-block; padding: 1px 5px; border: 1px solid #4a5260; border-bottom-width: 2px; border-radius: 4px; background: #0b0e13; color: #ccd3dd; font-size: .72em; }
.status-bar { justify-content: center; font-size: .82rem; }
.status-bar span { padding: 3px 9px; border-right: 1px solid var(--line); color: var(--muted); }
.status-bar span:last-child { border-right: 0; }
.status-bar strong { color: var(--text); }
.status-bar .winner { color: var(--gold); }

.player-zone { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: linear-gradient(180deg, rgba(19,24,31,.96), rgba(12,15,20,.96)); }
.opponent-zone { border-top-color: #693d46; }
.self-zone { border-bottom-color: #496a55; }
.player-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.player-head h2 { margin: 0; font-family: Georgia, serif; }
.stronghold { display: grid; grid-template-columns: auto auto; gap: 0 10px; text-align: right; align-items: baseline; }
.stronghold span, .stronghold small { color: var(--muted); font-size: .72rem; }
.stronghold strong { font: 800 1.7rem Georgia, serif; color: var(--gold); }
.stronghold small { grid-column: 1 / -1; }
.resource-grid { display: grid; grid-template-columns: repeat(6, minmax(80px, 1fr)); margin: 10px 0 0; gap: 6px; }
.resource-grid div { padding: 7px 8px; background: #0b0f14; border: 1px solid #252c35; border-radius: 7px; }
.resource-grid dt { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.resource-grid dd { margin: 2px 0 0; font-weight: 800; }
.resource-grid dd small { color: var(--muted); font-weight: 400; }
.resource-grid .danger dd { color: var(--danger); }

.battlefield { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--gold-soft); border-radius: var(--radius); background: linear-gradient(180deg, #11161d, #0a0e13); }
.front-column { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #0d1117; padding: 8px; }
.front-column > header { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 4px 4px 8px; border-bottom: 1px solid var(--line); }
.front-column > header span { font-family: Georgia, serif; color: var(--gold); font-weight: 700; }
.front-column > header small { color: var(--muted); font-size: .65rem; }
.rank-label { margin: 7px 2px 3px; font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.board-slot { min-height: 108px; border: 1px dashed #343d49; border-radius: 8px; padding: 5px; display: grid; }
.enemy-slot { background: linear-gradient(180deg, rgba(72,33,41,.18), rgba(13,17,23,.1)); }
.own-slot { background: linear-gradient(180deg, rgba(37,72,48,.14), rgba(13,17,23,.1)); }
.slot-empty { display: grid; place-items: center; color: #535d6b; font-size: .72rem; }
.unit-token { border: 1px solid #404b59; border-radius: 7px; padding: 7px; background: #171d25; min-width: 0; }
.unit-token.enemy { border-color: #65424a; }
.unit-token.own { border-color: #42634d; }
.unit-token.exhausted { opacity: .68; filter: saturate(.72); }
.unit-token > strong, .unit-token > small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.unit-token > small { color: var(--muted); font-size: .68rem; margin-top: 2px; }
.unit-top, .unit-stats { display: flex; justify-content: space-between; gap: 7px; font-size: .65rem; color: var(--muted); }
.unit-stats { margin-top: 8px; color: var(--text); font-weight: 700; }
.token-badges { margin-top: 5px; display: flex; gap: 3px; flex-wrap: wrap; }
.token-badges span { padding: 2px 4px; border-radius: 4px; background: #232b36; color: #bdc5d0; font-size: .56rem; }
.object-lane { min-height: 50px; margin: 8px 0; padding: 6px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; align-content: center; border-top: 1px solid #242b34; border-bottom: 1px solid #242b34; }
.object-lane span { border: 1px solid #3c4653; border-radius: 999px; padding: 3px 6px; font-size: .58rem; }
.terrain-token { color: var(--frost); }
.threshold-token { color: var(--gold); }
.enemy-object { color: #d59999; }
.muted { color: #5d6671; }

.play-area, .lower-grid { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: 12px; }
.lower-grid { grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px; }
.panel > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.panel h2 { margin: 0; font: 700 1.1rem Georgia, serif; }
.panel > header > span { color: var(--muted); font-size: .72rem; }
.hand { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.hand-card { flex: 0 0 150px; min-height: 145px; border: 1px solid #4a4333; border-radius: 9px; padding: 9px; background: linear-gradient(160deg, #201c15, #12151a 60%); }
.card-no { color: var(--gold); font-size: .65rem; }
.hand-card strong, .hand-card small { display: block; margin-top: 5px; }
.hand-card small { color: var(--muted); min-height: 32px; font-size: .69rem; }
.hand-card dl { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hand-card dl div { background: #0b0e13; padding: 4px; border-radius: 4px; }
.hand-card dt { font-size: .55rem; color: var(--muted); }
.hand-card dd { margin: 0; font-weight: 800; }
.notice { min-height: 38px; margin: 0 0 10px; padding: 8px 9px; border-left: 3px solid var(--gold-soft); background: #0d1117; color: #c5ccd5; font-size: .78rem; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 400px; overflow-y: auto; }
.action-card { min-width: 0; text-align: left; padding: 8px; border: 1px solid #343d48; border-radius: 7px; background: #151a21; cursor: pointer; }
.action-card:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.action-card:disabled { opacity: .42; cursor: not-allowed; }
.action-card span, .action-card strong, .action-card small, .action-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-card strong { margin: 3px 0; }
.action-kind, .action-card small { color: var(--muted); font-size: .65rem; }
.action-cost { margin-top: 5px; color: var(--gold); font-size: .65rem; }
.action-card em { color: var(--danger); font-size: .6rem; font-style: normal; margin-top: 3px; }
.action-card.danger { border-color: #684249; }
.target-picker { margin-bottom: 9px; padding: 8px; border: 1px solid var(--gold-soft); border-radius: 8px; background: #17130d; }
.target-picker > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.target-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.target-options button { text-align: left; }
.soul-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.soul-line span { padding: 8px; background: #0b0f14; border-radius: 6px; color: var(--muted); font-size: .72rem; }
.soul-line strong { display: block; color: var(--text); font-size: 1.15rem; }
.oath-list { list-style: none; padding: 0; margin: 9px 0 0; }
.oath-list li { display: flex; justify-content: space-between; padding: 7px; border-bottom: 1px solid var(--line); }
.events { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.events li { padding: 7px 4px; border-top: 1px solid #252c35; }
.events li:first-child { border-top: 0; }
.events span { color: var(--gold); font-size: .6rem; }
.events p { margin: 2px 0 0; font-size: .75rem; color: #c1c8d1; }
.empty-copy { color: var(--muted); font-size: .76rem; }
footer { margin-top: 14px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .68rem; }

@media (max-width: 900px) {
  .battlefield { grid-template-columns: 1fr; }
  .front-column { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .front-column > header, .object-lane { grid-column: 1 / -1; }
  .rank-label { display: none; }
  .play-area, .lower-grid { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 14px, 1500px); padding-top: 7px; }
  .masthead { grid-template-columns: auto 1fr; }
  .build-badge { display: none; }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .actions, .target-options { grid-template-columns: 1fr; }
  footer { display: block; }
}