@import url("assets/fonts/fonts.css");

:root {
  --parchment-50: #FCF8EF;
  --parchment-100: #F6EDD6;
  --parchment-200: #EEE0BF;
  --parchment-300: #E3CFA4;
  --parchment-400: #D3B986;
  --wood-200: #D5B07C;
  --wood-300: #BE9358;
  --wood-400: #A3773F;
  --wood-500: #86592C;
  --wood-600: #68421E;
  --wood-700: #4E3017;
  --wood-800: #3A2210;
  --wood-900: #26150A;
  --ink-900: #2A170A;
  --ink-700: #4A2E16;
  --ink-500: #6E4D2E;
  --ink-400: #7A5A3B;
  --cream-100: #FBF6EA;
  --cream-300: #EBDDBF;
  --cream-500: #CDB890;
  --gold-200: #F0DC8C;
  --gold-300: #E3C65B;
  --gold-500: #C9A227;
  --gold-700: #7E6310;
  --success-500: #3C7A4A;
  --success-700: #2F6B3F;
  --success-100: #DCEBD7;
  --warning-500: #B5741A;
  --warning-700: #8F5A0E;
  --warning-100: #F6E3C0;
  --danger-500: #B5402F;
  --danger-700: #A3362A;
  --danger-100: #F3D7D0;
  --piece-light: #ECD9B4;
  --piece-light-edge: #B6925E;
  --piece-dark: #5A3A1E;
  --piece-dark-edge: #2A170A;
  --piece-light-rim: var(--wood-500);
  --bg: var(--parchment-100);
  --bg-sunken: var(--parchment-200);
  --surface: var(--parchment-50);
  --surface-raised: #FFFDF7;
  --surface-dark: var(--wood-800);
  --fg: var(--ink-700);
  --fg-strong: var(--ink-900);
  --fg-muted: var(--ink-400);
  --fg-on-dark: var(--cream-100);
  --fg-on-dark-muted: var(--cream-500);
  --fg-on-accent: var(--cream-100);
  --accent: var(--wood-700);
  --accent-hover: var(--wood-600);
  --accent-active: var(--wood-800);
  --highlight: var(--gold-500);
  --border: rgba(74, 46, 22, .18);
  --border-strong: rgba(74, 46, 22, .34);
  --border-on-dark: rgba(251, 246, 234, .16);
  --tint: rgba(134, 89, 44, .08);
  --tint-strong: rgba(134, 89, 44, .16);
  --focus-ring: 0 0 0 3px var(--parchment-100), 0 0 0 5px var(--gold-700);
  --focus-ring-inset: inset 0 0 0 3px var(--gold-700);
  --focus-cell: inset 0 0 0 3px var(--gold-300), inset 0 0 0 6px var(--wood-900);
  --focus-ring-dark: 0 0 0 3px var(--wood-800), 0 0 0 5px var(--gold-300);
  --scrim: rgba(38, 21, 10, .62);
  --shade-faint: rgba(38, 21, 10, .08);
  --shade-soft: rgba(38, 21, 10, .18);
  --shade-mid: rgba(38, 21, 10, .3);
  --shade-strong: rgba(38, 21, 10, .5);
  --line-dark: rgba(38, 21, 10, .4);
  --line-light: rgba(255, 240, 210, .16);
  --sheen-faint: rgba(255, 250, 240, .12);
  --sheen-soft: rgba(255, 250, 240, .3);
  --sheen-strong: rgba(255, 250, 240, .55);
  --gloss: rgba(255, 255, 255, .45);
  --tint-light: rgba(255, 253, 247, .5);
  --tint-on-dark: rgba(251, 246, 234, .08);
  --tint-on-dark-strong: rgba(251, 246, 234, .16);
  --gold-wash: rgba(201, 162, 39, .3);
  --gold-ring: rgba(201, 162, 39, .55);
  --cell-light: #E5CFA3;
  --cell-dark: #B08754;
  --cell-hex: #DFC79A;
  --cell-legal: rgba(60, 122, 74, .55);
  --cell-legal-dot: var(--success-500);
  --cell-last: rgba(201, 162, 39, .42);
  --cell-selected: var(--gold-500);
  --cell-capture: rgba(181, 64, 47, .5);
  --cell-hover: rgba(255, 253, 247, .28);
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.014 0.42' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  --texture-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0 0.06 0 0 0 0.09 0'/></filter><rect width='120' height='120' filter='url(%23p)'/></svg>");
  --wood-sheen: linear-gradient(100deg, rgba(255, 245, 220, .16), rgba(255, 245, 220, 0) 38%, rgba(38, 21, 10, .18) 100%);
  --surface-wood: var(--texture-grain), var(--wood-sheen), linear-gradient(180deg, var(--wood-600), var(--wood-700));
  --surface-wood-dark: var(--texture-grain), var(--wood-sheen), linear-gradient(180deg, var(--wood-800), var(--wood-900));
  --surface-wood-light: var(--texture-grain), linear-gradient(180deg, var(--wood-200), var(--wood-300));
  --surface-parchment: var(--texture-paper), linear-gradient(180deg, var(--parchment-50), var(--parchment-100));
  --bevel-wood: inset 0 1px 0 rgba(255, 240, 210, .22), inset 0 -2px 0 rgba(38, 21, 10, .45), inset 0 0 0 1px rgba(38, 21, 10, .35);
  --bevel-inlay: inset 0 2px 4px rgba(38, 21, 10, .35), inset 0 -1px 0 rgba(255, 245, 220, .25);
  --icon-crown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8.5 7.2 12 12 5l4.8 7L21 8.5 19.2 18H4.8z'/><rect x='4.8' y='19.2' width='14.4' height='2.2' rx='1'/></svg>");
  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234A2E16'><path d='M208,96l-80,80L48,96Z' opacity='.2'/><path d='M215.39,92.94A8,8,0,0,0,208,88H48a8,8,0,0,0-5.66,13.66l80,80a8,8,0,0,0,11.32,0l80-80A8,8,0,0,0,215.39,92.94ZM128,164.69,67.31,104H188.69Z'/></svg>");
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px;
  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px; --radius-round: 50%;
  --shadow-1: 0 1px 2px rgba(42, 23, 10, .12), 0 1px 1px rgba(42, 23, 10, .06);
  --shadow-2: 0 2px 6px rgba(42, 23, 10, .14), 0 1px 2px rgba(42, 23, 10, .08);
  --shadow-3: 0 8px 20px rgba(42, 23, 10, .18), 0 2px 6px rgba(42, 23, 10, .1);
  --shadow-4: 0 20px 48px rgba(42, 23, 10, .32), 0 6px 14px rgba(42, 23, 10, .16);
  --shadow-piece: 0 2px 2px rgba(42, 23, 10, .25), 0 6px 10px rgba(42, 23, 10, .22);
  --shadow-piece-lift: 0 6px 6px rgba(42, 23, 10, .25), 0 16px 24px rgba(42, 23, 10, .28);
  --glow-gold: 0 0 0 3px rgba(201, 162, 39, .35), 0 0 18px rgba(201, 162, 39, .45);
  --font-display: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: .75rem; --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.5rem;
  --fs-display: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 800;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.5;
  --tracking-caps: .1em; --tracking-display: -.005em; --num-tabular: tabular-nums lining-nums;
  --control-h: 44px; --control-h-sm: 36px; --control-h-lg: 52px; --appbar-h: 56px;
  --icon-size: 22px; --icon-size-sm: 18px; --icon-size-xs: 16px; --icon-size-lg: 32px; --icon-size-xl: 64px;
  --piece-inline: 22px; --piece-inline-sm: 16px;
  --switch-w: 52px; --switch-h: 30px; --switch-knob: 22px;
  --drawer-w: min(360px, 88vw); --modal-w: 440px; --modal-w-wide: 640px; --toast-w: 420px;
  --board-max: 560px; --content-max: 960px;
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; overflow: hidden;
  background: var(--surface-parchment) fixed; background-color: var(--bg);
  color: var(--fg); font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-body);
  font-kerning: normal; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold-200); color: var(--ink-900); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; fill: currentColor; vertical-align: middle; }
.icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon--xs { width: var(--icon-size-xs); height: var(--icon-size-xs); }
.icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

#app { height: 100svh; min-height: 0; display: flex; flex-direction: column; }
.loading-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; align-content: center; gap: var(--space-3); background: var(--surface-parchment); color: var(--fg); }
.loading-overlay--hidden { display: none; }
.loading-spinner { width: 36px; height: 36px; border: 3px solid var(--parchment-300); border-top-color: var(--wood-700); border-radius: 50%; animation: loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.appbar { width: 100%; flex: none; }
.appbar__title small { margin-top: 2px; }
.restart-button { min-width: var(--control-h); min-height: var(--control-h); padding-inline: var(--space-3); }
.shell { flex: 1; min-height: 0; width: 100%; padding: var(--space-2) var(--gutter) calc(var(--space-2) + var(--safe-bottom)); gap: var(--space-3); }
.shell__main { width: 100%; max-width: 500px; margin-inline: auto; justify-items: stretch; align-content: center; gap: var(--space-3); }
.variant-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); text-align: center; }
.variant-note .icon { color: var(--wood-500); }
.players { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); width: min(100%, var(--board-max)); margin-inline: auto; }
.players .player { min-width: 0; min-height: 56px; flex: 1; }
.player__meta { flex: 1; }
.player--right .player__meta { align-items: flex-end; }
.board-stage { width: 100%; }
.board.board--cross { width: min(100%, 430px, 52svh); padding: clamp(12px, 3.5vw, 16px); }
.board--cross::before { inset: 8px; border-radius: var(--radius-lg); }
.cross-field {
  position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface-wood-dark); box-shadow: var(--bevel-inlay);
}
.cross-route { position: absolute; z-index: 0; background: var(--surface-wood-light); border: 1px solid var(--wood-500); box-shadow: var(--bevel-inlay); pointer-events: none; }
.cross-route--vertical { top: 15%; bottom: 15%; left: 50%; width: 12%; transform: translateX(-50%); border-radius: var(--radius-sm); }
.cross-route--horizontal { left: 15%; right: 15%; top: 50%; height: 12%; transform: translateY(-50%); border-radius: var(--radius-sm); }
.cell.spot {
  position: absolute; z-index: 2; width: 23%; aspect-ratio: 1; padding: 0; overflow: visible;
  border: 2px solid var(--wood-600); border-radius: var(--radius-round); background: var(--surface-wood-light);
  box-shadow: var(--bevel-wood), var(--shadow-2); transform: translate(-50%, -50%);
}
.spot--top { top: 15%; left: 50%; }
.spot--right { top: 50%; left: 85%; }
.spot--bottom { top: 85%; left: 50%; }
.spot--left { top: 50%; left: 15%; }
.spot:disabled { cursor: default; }
.spot.is-legal::after { background: transparent; opacity: 0; }
.spot .piece { width: 75%; height: 75%; }
.piece-mark { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-size: clamp(1.45rem, 8vw, 2.1rem); font-weight: var(--fw-bold); line-height: 1; color: var(--wood-800); }
.piece--dark .piece-mark { color: var(--cream-100); }
.piece--inline .piece-mark { font-size: var(--fs-sm); }
.center-node {
  position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; width: 24%; aspect-ratio: 1; border: 2px solid var(--gold-700); border-radius: var(--radius-round);
  color: var(--gold-300); background: var(--surface-wood); box-shadow: var(--bevel-wood), var(--glow-gold); transform: translate(-50%, -50%); text-align: center;
}
.center-node__mark { font-family: var(--font-display); font-size: clamp(1.8rem, 10vw, 2.55rem); font-weight: var(--fw-display); line-height: .78; }
.center-node__label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .05em; line-height: 1; color: var(--gold-200); }
.action-cue {
  width: min(100%, var(--board-max)); min-height: var(--control-h-lg); margin: 0 auto; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); color: var(--fg-strong);
}
.action-cue .icon { color: var(--wood-500); }
.action-cue--result { color: var(--success-700); }
#restart-dialog .modal__foot .btn:first-child { border-color: var(--border); }
@media (max-width: 360px) {
  .players { gap: var(--space-1); }
  .players .player { padding-inline: var(--space-2); }
  .variant-note { font-size: var(--fs-xs); }
  .board.board--cross { width: min(100%, 52svh); }
  .action-cue { padding-inline: var(--space-2); font-size: var(--fs-sm); }
}
@media (max-height: 620px) {
  .shell { padding-block: var(--space-1); }
  .shell__main { gap: var(--space-2); }
  .players .player { min-height: 48px; }
  .board.board--cross { width: min(100%, 48svh); }
  .action-cue { min-height: 44px; padding-block: var(--space-2); }
}
@media (min-width: 760px) {
  .shell__main { max-width: 500px; }
  .appbar { max-width: 500px; }
}