:root {
  color-scheme: light;
  --ink: #211810;
  --muted: #5f5045;
  --paper: #f3dfb5;
  --panel: rgba(32, 27, 24, 0.91);
  --panel-strong: #fff1cf;
  --line: rgba(236, 196, 112, 0.42);
  --shadow: rgba(33, 24, 17, 0.2);
  --accent: #b6533b;
  --accent-dark: #713125;
  --steel: #244d5a;
  --danger: #7d2d2d;
  --focus: #ffe86e;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

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

.mode-select {
  align-items: center;
  background:
    linear-gradient(rgba(17, 15, 14, 0.82), rgba(17, 15, 14, 0.82)),
    radial-gradient(circle at 50% 28%, rgba(231, 189, 96, 0.16), transparent 22rem),
    linear-gradient(160deg, #2f2422 0%, #1f2e34 52%, #171824 100%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: fixed;
  z-index: 30;
}

.mode-select-inner {
  display: grid;
  gap: 18px;
  max-width: 1040px;
  width: min(100%, 1040px);
}

.mode-select-copy {
  color: rgba(255, 239, 206, 0.86);
  font-family: ui-sans-serif, system-ui, sans-serif;
  max-width: 48rem;
}

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

.mode-card {
  background:
    linear-gradient(rgba(39, 31, 27, 0.95), rgba(29, 26, 24, 0.96)),
    radial-gradient(circle at 22% 18%, rgba(255, 228, 160, 0.1), transparent 8rem),
    linear-gradient(145deg, rgba(79, 69, 54, 0.2), rgba(28, 32, 41, 0.06));
  border: 1px solid rgba(236, 196, 112, 0.32);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  color: #fff0cc;
  display: grid;
  gap: 12px;
  padding: 20px;
}

.mode-card-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.mode-badge,
.info-dot {
  align-items: center;
  background: rgba(255, 237, 193, 0.14);
  border: 1px solid rgba(236, 196, 112, 0.28);
  border-radius: 999px;
  color: #fff0cc;
  display: inline-flex;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  justify-content: center;
  min-height: 28px;
  min-width: 28px;
  padding: 0 10px;
}

.info-dot {
  cursor: help;
  padding: 0;
}

.mode-card p,
.mode-card li {
  color: rgba(255, 239, 206, 0.82);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.mode-card ul {
  margin: 0;
  padding-left: 18px;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 48% 28%, rgba(221, 183, 88, 0.22), transparent 30rem),
    radial-gradient(circle at 14% 8%, rgba(255, 225, 134, 0.32), transparent 22rem),
    radial-gradient(circle at 84% 16%, rgba(129, 181, 202, 0.15), transparent 22rem),
    linear-gradient(140deg, #342328 0%, #20383d 48%, #171824 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 380px;
  height: 100svh;
  padding: 18px;
}

.game-area {
  display: grid;
  gap: 18px;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.topbar {
  align-items: start;
  color: #fff9eb;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.brand-block {
  min-width: 0;
}

.eyebrow {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  opacity: 0.72;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.topbar h1 {
  font-size: clamp(1.9rem, 3.7vw, 3.4rem);
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.28);
}

.save-status,
.board-banner-copy,
.subtle-copy,
.overlay-copy,
.tutorial-body,
.rules-body,
.reference-summary,
.selection-hint,
.change-list,
.game-log,
.field-label,
.stack-field span {
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.save-status {
  background: rgba(18, 15, 14, 0.6);
  border: 1px solid rgba(255, 236, 177, 0.22);
  border-radius: 7px;
  color: #fff2cf;
  margin-top: 10px;
  max-width: 40rem;
  padding: 8px 10px;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ghost-button,
.ghost-chip,
.secondary-button,
.segmented button,
.action-stack button,
.replay-controls button {
  background: rgba(255, 249, 238, 0.14);
  border: 1px solid rgba(255, 249, 238, 0.28);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
}

.ghost-button,
.secondary-button,
.ghost-chip {
  padding: 10px 14px;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

.link-button:visited,
.link-button:hover,
.link-button:active {
  color: inherit;
}

.ghost-chip.link-button,
.ghost-button.link-button {
  background: rgba(255, 249, 238, 0.14);
  border-color: rgba(255, 249, 238, 0.28);
  color: #fff4d8;
}

.ghost-button {
  color: #fff9eb;
}

.ghost-button.danger {
  background: rgba(125, 45, 45, 0.28);
  border-color: rgba(255, 219, 219, 0.28);
}

.board-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px;
  min-height: 0;
}

.board-wrap {
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 226, 112, 0.24), transparent 16rem),
    radial-gradient(circle at 18% 20%, rgba(79, 91, 73, 0.34), transparent 15rem),
    radial-gradient(circle at 84% 70%, rgba(68, 102, 122, 0.3), transparent 19rem),
    linear-gradient(rgba(188, 166, 107, 0.58), rgba(99, 101, 84, 0.64)),
    linear-gradient(135deg, rgba(255, 241, 206, 0.08) 0, rgba(255, 241, 206, 0.08) 24%, transparent 24%, transparent 50%, rgba(255, 241, 206, 0.05) 50%, rgba(255, 241, 206, 0.05) 74%, transparent 74%, transparent 100%);
  background-size: auto, auto, auto, auto, 72px 72px;
  border: 1px solid rgba(255, 244, 196, 0.72);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 0 70px rgba(255, 238, 164, 0.28);
  height: 100%;
  justify-self: stretch;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#board {
  display: block;
  height: 100%;
  min-height: 620px;
  width: 100%;
}

.board-banner,
.replay-bar,
.setup-panel,
.turn-panel,
.scoreboard,
.history-panel,
.changes-panel,
.reference-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  color: #fff3d4;
}

.board-banner,
.replay-bar {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.replay-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.replay-controls button,
.segmented button {
  background: #ecddc1;
  border: 1px solid rgba(89, 67, 43, 0.16);
  color: #251b12;
  padding: 10px 12px;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100svh - 36px);
  overflow: auto;
  padding-right: 4px;
}

.setup-panel,
.turn-panel,
.scoreboard,
.history-panel,
.changes-panel,
.reference-panel {
  background-image:
    linear-gradient(rgba(35, 29, 25, 0.96), rgba(28, 25, 23, 0.97)),
    linear-gradient(135deg, rgba(255, 225, 168, 0.04) 0, rgba(255, 225, 168, 0.04) 25%, transparent 25%, transparent 50%, rgba(255, 225, 168, 0.02) 50%, rgba(255, 225, 168, 0.02) 75%, transparent 75%, transparent 100%);
  background-size: auto, 56px 56px;
  padding: 14px;
}

.panel-heading {
  margin-bottom: 12px;
}

.panel-heading h2,
.turn-panel h2 {
  font-size: 1.35rem;
  letter-spacing: 0;
}

.setup-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.stack-field {
  display: grid;
  gap: 8px;
}

.field-label {
  color: rgba(255, 230, 178, 0.86);
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.stack-field input,
.controller-select {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  min-height: 42px;
  padding: 10px 12px;
}

.stack-field span {
  color: rgba(255, 230, 178, 0.82);
}

.segmented {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.segmented button.selected {
  background: var(--steel);
  color: #fff9eb;
}

.player-setup-list,
.players-list,
.change-list {
  display: grid;
  gap: 8px;
}

.setup-shortcuts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 10px;
}

.player-setup-row,
.player-row {
  align-items: center;
  background: rgba(255, 235, 184, 0.14);
  border: 1px solid rgba(236, 196, 112, 0.28);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 10px;
}

.player-setup-row {
  grid-template-columns: 42px minmax(0, 1fr) 130px;
}

.player-swatch {
  align-items: center;
  border-radius: 999px;
  color: #fff7dc;
  display: flex;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 950;
  height: 42px;
  justify-content: center;
  min-width: 42px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.player-name {
  display: block;
  font-weight: 900;
}

.player-meta {
  color: rgba(255, 241, 210, 0.72);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
}

.player-score {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 950;
}

.player-row.active {
  outline: 2px solid rgba(154, 70, 48, 0.32);
}

.setup-actions,
.turn-controls,
.modal-footer,
.modal-header {
  display: flex;
  gap: 10px;
}

.setup-actions,
.turn-controls {
  margin-top: 14px;
}

.primary-button,
.secondary-button {
  min-height: 46px;
  padding: 11px 14px;
}

.primary-button {
  background: var(--accent);
  color: #fff9eb;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
}

.secondary-button {
  background: #ead4a5;
  border: 1px solid rgba(255, 231, 172, 0.28);
  color: #211810;
  font-weight: 850;
}

.current-player {
  align-items: center;
  display: flex;
  gap: 12px;
}

.sigil {
  align-items: center;
  border: 4px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 5px 14px var(--shadow);
  display: inline-block;
  color: #fff8db;
  display: flex;
  flex: 0 0 auto;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 950;
  height: 46px;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  width: 46px;
}

.stat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0;
}

.stat-grid div {
  background: rgba(255, 235, 184, 0.14);
  border: 1px solid rgba(236, 196, 112, 0.28);
  border-radius: 7px;
  padding: 10px;
}

.stat-grid span {
  color: rgba(255, 241, 210, 0.68);
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
}

.stat-grid strong {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
  margin-top: 4px;
}

.action-stack {
  display: grid;
  gap: 8px;
}

.action-stack button {
  align-items: center;
  background: #e6c98d;
  border: 1px solid rgba(255, 236, 177, 0.24);
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 12px;
  text-align: left;
}

.action-stack button.active {
  background: var(--steel);
  color: #fff9eb;
}

.action-stack button span {
  font-size: 0.74rem;
  opacity: 0.76;
}

.selection-hint {
  background: rgba(255, 244, 214, 0.92);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  margin-top: 14px;
  min-height: 54px;
  padding: 11px 12px;
}

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

.game-log {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  max-height: 230px;
  overflow: auto;
  padding: 0;
}

.game-log li {
  background: rgba(255, 235, 184, 0.14);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  padding: 10px 11px;
}

.game-log li.selected {
  border-color: rgba(154, 70, 48, 0.38);
  box-shadow: inset 0 0 0 1px rgba(154, 70, 48, 0.16);
}

.log-meta {
  color: rgba(255, 226, 176, 0.68);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.log-text {
  color: #fff3d4;
  display: block;
  font-size: 0.88rem;
  line-height: 1.45;
}

.change-list {
  color: rgba(255, 241, 211, 0.86);
  list-style: disc;
  margin: 0;
  min-height: 54px;
  padding-left: 20px;
}

.reference-summary {
  display: grid;
  gap: 12px;
}

.reference-block {
  background: rgba(255, 239, 200, 0.16);
  border: 1px solid rgba(236, 196, 112, 0.3);
  border-radius: 7px;
  color: #fff0c8;
  padding: 10px;
}

.reference-block h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.reference-block ul {
  color: rgba(255, 241, 211, 0.86);
  line-height: 1.55;
  margin: 0;
  padding-left: 18px;
}

.reference-downloads {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.overlay {
  align-items: center;
  background: rgba(20, 17, 14, 0.76);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 22px;
  position: fixed;
  z-index: 20;
}

.overlay-sheet {
  background: var(--panel-strong);
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  max-width: 430px;
  padding: 24px;
  width: min(100%, 430px);
}

.overlay-sheet.large {
  max-height: min(92svh, 860px);
  max-width: 780px;
  overflow: auto;
  width: min(100%, 780px);
}

.modal-header {
  align-items: start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-footer {
  justify-content: space-between;
  margin-top: 18px;
}

.tutorial-body,
.rules-body {
  display: grid;
  gap: 16px;
  line-height: 1.6;
}

.tutorial-card,
.rules-card {
  background: rgba(255, 255, 255, 0.52);
  border-radius: 7px;
  padding: 14px;
}

.tutorial-card ul,
.rules-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.hidden {
  display: none !important;
}

.map-backdrop {
  pointer-events: none;
}

.map-sea {
  fill: rgba(41, 82, 102, 0.58);
  stroke: rgba(203, 226, 218, 0.22);
  stroke-width: 4;
}

.map-highlands {
  fill: rgba(169, 149, 105, 0.34);
  stroke: rgba(244, 226, 171, 0.16);
  stroke-width: 3;
}

.map-forest {
  fill: rgba(44, 66, 54, 0.34);
  stroke: rgba(222, 200, 138, 0.14);
  stroke-width: 3;
}

.map-fen {
  fill: rgba(66, 80, 78, 0.34);
  stroke: rgba(205, 206, 174, 0.16);
  stroke-width: 3;
}

.map-redlands {
  fill: rgba(116, 55, 42, 0.36);
  stroke: rgba(224, 166, 112, 0.16);
  stroke-width: 3;
}

.starfall-crater {
  fill: rgba(255, 229, 137, 0.08);
  filter: url("#magicGlow");
  stroke: rgba(255, 231, 151, 0.32);
  stroke-dasharray: 8 12;
  stroke-width: 4;
}

.ley-lines {
  fill: none;
  opacity: 0.36;
  stroke: rgba(250, 231, 154, 0.62);
  stroke-dasharray: 5 18;
  stroke-linecap: round;
  stroke-width: 3;
}

.connection-bed,
.connection {
  pointer-events: none;
  stroke-linecap: round;
}

.connection-bed {
  stroke: rgba(67, 42, 33, 0.27);
  stroke-width: 22;
}

.connection {
  stroke: rgba(255, 230, 158, 0.86);
  stroke-linecap: round;
  stroke-dasharray: 18 12;
  stroke-width: 8;
}

.region-hit {
  cursor: pointer;
  fill: transparent;
}

.region-shape {
  fill: rgba(116, 111, 75, 0.9);
  filter: url("#softShadow");
  stroke: rgba(236, 210, 137, 0.78);
  stroke-width: 4;
  transition: filter 140ms ease, stroke-width 140ms ease, transform 140ms ease;
}

.region-texture {
  fill: url("#grassTexture");
  opacity: 0.32;
  pointer-events: none;
}

.region.ruin .region-shape {
  fill: rgba(80, 99, 116, 0.92);
  stroke: rgba(197, 211, 238, 0.82);
  stroke-dasharray: 8 5;
}

.region.ruin .region-texture {
  fill: url("#roadTexture");
  opacity: 0.28;
}

.region.keep .region-shape {
  fill: rgba(126, 94, 52, 0.96);
  stroke: rgba(255, 232, 152, 0.96);
  stroke-width: 6;
}

.region.keep .region-texture {
  fill: url("#roadTexture");
  opacity: 0.36;
}

.terrain-river .region-shape,
.terrain-coast .region-shape {
  fill: rgba(64, 117, 126, 0.92);
  stroke: rgba(155, 212, 217, 0.8);
}

.terrain-river .region-texture,
.terrain-coast .region-texture {
  fill: url("#waterTexture");
  opacity: 0.38;
}

.terrain-forest .region-shape,
.terrain-highland .region-shape {
  fill: rgba(81, 86, 63, 0.92);
}

.terrain-moor .region-shape,
.terrain-fen .region-shape {
  fill: rgba(91, 91, 76, 0.9);
  stroke: rgba(198, 184, 135, 0.72);
}

.terrain-wall .region-shape,
.terrain-gate .region-shape {
  fill: rgba(136, 94, 61, 0.93);
  stroke: rgba(226, 169, 106, 0.8);
}

.terrain-field .region-shape {
  fill: rgba(135, 128, 73, 0.9);
}

.terrain-barrow .region-shape,
.terrain-abbey .region-shape,
.terrain-ruin .region-shape {
  fill: rgba(83, 86, 111, 0.94);
  stroke: rgba(219, 216, 232, 0.86);
}

.keep-aura {
  fill: rgba(255, 218, 89, 0.16);
  filter: url("#magicGlow");
  pointer-events: none;
}

.keep-star {
  fill: rgba(255, 242, 166, 0.22);
  stroke: rgba(122, 70, 35, 0.34);
  stroke-width: 2;
  pointer-events: none;
}

.region.source .region-shape {
  filter: url("#softShadow") drop-shadow(0 0 12px rgba(130, 212, 255, 0.7));
  stroke: #82d4ff;
  stroke-width: 6;
}

.region.target .region-shape {
  filter: url("#softShadow") drop-shadow(0 0 12px rgba(255, 245, 185, 0.95));
  stroke: #fff1a7;
  stroke-width: 6;
}

.region.selected .region-shape {
  filter: url("#softShadow") drop-shadow(0 0 14px rgba(53, 37, 20, 0.35));
  stroke: #2a2117;
  stroke-width: 6;
}

.region-name {
  fill: #fff5d7;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 850;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(30, 22, 17, 0.82);
  stroke-width: 5px;
  text-anchor: middle;
}

.region-tag {
  fill: #f7dfaa;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  text-anchor: middle;
  text-transform: uppercase;
}

.region-epithet {
  fill: rgba(255, 235, 190, 0.86);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(30, 22, 17, 0.72);
  stroke-width: 3px;
  text-anchor: middle;
  text-transform: uppercase;
}

.region-asset {
  opacity: 0.95;
  pointer-events: none;
}

.decor-asset {
  fill: rgba(241, 230, 199, 0.74);
  filter: drop-shadow(0 4px 5px rgba(35, 31, 26, 0.24));
  opacity: 0.8;
  stroke: rgba(83, 64, 43, 0.42);
  stroke-width: 2;
}

.ruin-asset {
  fill: rgba(194, 203, 221, 0.78);
  filter: drop-shadow(0 5px 7px rgba(39, 37, 56, 0.32));
  opacity: 0.82;
  stroke: rgba(79, 84, 113, 0.48);
  stroke-width: 2;
}

.keep-asset {
  fill: rgba(236, 227, 204, 0.86);
  filter: drop-shadow(0 8px 10px rgba(75, 45, 24, 0.38)) drop-shadow(0 0 12px rgba(255, 224, 92, 0.6));
  stroke: rgba(111, 75, 37, 0.48);
  stroke-width: 2;
}

.ownership-ring {
  opacity: 0.46;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 5;
}

.owner-plaque {
  filter: drop-shadow(0 3px 4px rgba(31, 22, 18, 0.35));
  opacity: 0.95;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
}

.owner-standard {
  filter: drop-shadow(0 3px 4px rgba(31, 22, 18, 0.42));
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.piece-shape,
.piece-disc,
.piece-tower {
  filter: drop-shadow(0 4px 6px rgba(31, 22, 18, 0.38));
  pointer-events: none;
}

.piece-shape {
  fill: #f3e7cb;
  opacity: 0.98;
  stroke: rgba(80, 56, 35, 0.42);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.banner-shape {
  filter: drop-shadow(0 3px 5px rgba(31, 22, 18, 0.42));
}

.tower-shape {
  filter: drop-shadow(0 4px 6px rgba(31, 22, 18, 0.46));
}

.piece-disc,
.piece-tower {
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 4;
}

.piece-tower {
  stroke-width: 3;
}

.tower-crown {
  fill: #fff4bc;
  opacity: 0.9;
  pointer-events: none;
  stroke: rgba(61, 38, 23, 0.28);
  stroke-width: 2;
}

.piece-mark {
  fill: #fff9ec;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 950;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(42, 26, 18, 0.48);
  stroke-width: 3px;
  text-anchor: middle;
}

.piece-badge {
  filter: drop-shadow(0 2px 3px rgba(31, 22, 18, 0.45));
  pointer-events: none;
  stroke: rgba(255, 249, 226, 0.95);
  stroke-width: 3;
}

.piece-type-label {
  fill: #fff8df;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(32, 22, 17, 0.62);
  stroke-width: 3px;
  text-anchor: middle;
  text-transform: uppercase;
}

.tower-role-label,
.ley-anchor-mark,
.archmage-mark {
  fill: #fff6df;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(32, 22, 17, 0.62);
  stroke-width: 2px;
  text-anchor: middle;
  text-transform: uppercase;
}

.archmage-piece,
.ley-anchor,
.ward-token,
.warden-piece,
.torch-route-marker,
.torchfall-beacon-ring,
.torchfall-beacon {
  filter: drop-shadow(0 4px 5px rgba(31, 22, 18, 0.45));
  pointer-events: none;
  stroke: rgba(255, 247, 226, 0.95);
  stroke-width: 3;
}

.torchfall-beacon {
  stroke: rgba(255, 247, 226, 0.75);
  stroke-width: 2;
}

.torch-route-mark,
.warden-mark {
  fill: #fff6df;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 950;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(32, 22, 17, 0.62);
  stroke-width: 2px;
  text-anchor: middle;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-panel {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .app-shell {
    gap: 16px;
    padding: 14px;
  }

  .topbar {
    flex-direction: column;
  }

  .topbar-actions,
  .turn-controls,
  .setup-actions,
  .modal-footer,
  .modal-header,
  .board-banner,
  .replay-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .setup-grid {
    grid-template-columns: 1fr;
  }

  .mode-card-grid {
    grid-template-columns: 1fr;
  }

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

  .player-setup-row,
  .player-row {
    grid-template-columns: 12px 1fr;
  }

  .player-score,
  .controller-select {
    grid-column: 2;
  }

  .setup-shortcuts {
    grid-template-columns: 1fr;
  }
}