:root {
  --bg: #12181a; --card: #1c2528; --line: #33413f; --text: #eef1e8; --muted: #a4b0a8;
  --accent: #e8b04a; --accent-ink: #231a06; --danger: #ff8e7a;
  --p0: #4cc9f0; --p1: #f472b6; --p2: #fde047; --p3: #4ade80; --p4: #f4f4f5;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font: 700 2.8rem/1.1 Georgia, "Times New Roman", serif; margin: 0 0 .5rem; }
h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
h3 { font-size: .9rem; margin: .75rem 0 .4rem; }
p { margin: .4rem 0; }
.home { max-width: 460px; margin: 0 auto; padding: 40px 16px; }
.eyebrow { color: var(--accent); font-size: .85rem; margin: 0 0 .4rem; }
.lede { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 14px; }
label { display: block; font-size: .9rem; margin-bottom: 4px; color: var(--muted); }
.check { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
select { font: inherit; min-height: 42px; padding: 8px; margin-bottom: 6px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.settings { padding-left: 1.1rem; margin: 10px 0; color: var(--muted); }
input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
button { font: inherit; padding: 9px 13px; min-height: 42px; color: var(--text); background: #2b3735; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary { width: 100%; margin-top: 10px; font-weight: 600; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; width: 100%; }
.row { display: flex; gap: 8px; }
.divider { text-align: center; color: var(--muted); font-size: .85rem; margin: 14px 0; }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.code.big { font-size: 3rem; color: var(--accent); }
.error { color: var(--danger); margin: 8px 0; }
.warn { color: var(--danger); font-style: normal; }
.fine { font-size: .82rem; color: var(--muted); }
.rules summary { cursor: pointer; font-weight: 600; }
.rules ol { padding-left: 1.2rem; font-size: .92rem; }
.roster { list-style: none; margin: 0; padding: 0; }
.roster li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.roster li.active { background: #2f3b30; font-weight: 600; }
.roster em { color: var(--muted); font-size: .8rem; font-style: normal; }
.swatch { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 4px; color: #111; font-size: .78rem; font-weight: 700; }
.swatch.p0, rect.p0, circle.p0 { background: var(--p0); fill: var(--p0); }
.swatch.p1, rect.p1, circle.p1 { background: var(--p1); fill: var(--p1); }
.swatch.p2, rect.p2, circle.p2 { background: var(--p2); fill: var(--p2); }
.swatch.p3, rect.p3, circle.p3 { background: var(--p3); fill: var(--p3); }
.swatch.p4, rect.p4, circle.p4 { background: var(--p4); fill: var(--p4); }
.top { display: flex; gap: 14px; align-items: baseline; padding: 10px 16px; }
.top strong { font: 700 1.2rem Georgia, serif; }
.top .code { color: var(--muted); font-size: .85rem; }
.banner { padding: 9px 16px; background: var(--card); border-block: 1px solid var(--line); }
.banner.mine { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.banner.won { background: #2f6b45; color: #fff; font-weight: 600; }
.banner + .error { padding: 0 16px; }
.latest { margin: 0; padding: 7px 16px; font-size: .92rem; border-bottom: 1px solid var(--line); }
.latest strong { color: #ff6b6b; margin-right: 6px; }
.log .newest { color: #ff6b6b; font-weight: 600; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 14px 16px; max-width: 1240px; margin: 0 auto; align-items: start; }
aside .card:first-child { margin-top: 0; }
.board { display: block; width: 100%; height: auto; max-height: 82vh; user-select: none; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-icon { width: 20px; height: 20px; flex: none; }
.legend-icon.on-tan { background: #d9b56c; border-radius: 4px; }
.book-link { margin-left: auto; align-self: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: #2b3735; color: var(--text); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.book-link:hover { border-color: var(--accent); }
.clue-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.clue-head h2 { margin: 0; }
.small { min-height: 34px; padding: 4px 12px; font-size: .85rem; }
.clue-hidden { color: var(--muted); font-style: italic; }
.clue p { font: 600 1.05rem/1.35 Georgia, serif; }
.picked { font-weight: 600; }
.ask { display: flex; flex-wrap: wrap; gap: 6px; }
.ask button { display: flex; gap: 7px; align-items: center; flex: 1 1 45%; }
.log { margin: 0; padding-left: 1.4rem; max-height: 220px; overflow-y: auto; font-size: .87rem; color: var(--muted); }
.reveal ul { padding-left: 1.1rem; }
.hex { cursor: pointer; }
.hex:focus { outline: none; }
.cell { stroke: #10161a; stroke-width: 1.5; transition: opacity .12s; }
.hex:hover .cell, .hex:focus-visible .cell { stroke: #fff; stroke-width: 2.5; }
.hex.dim .cell { opacity: .28; }
.hex.dim .glyph, .hex.dim .territory, .hex.dim .structure { opacity: .35; }
.hex.selected .cell { stroke: #fff; stroke-width: 4; }
.last-ring { fill: rgba(255, 40, 40, .25); stroke: #ff2828; stroke-width: 4; pointer-events: none; }
.last-ring.flash { animation: last-pulse .8s ease-in-out 3; }
@keyframes last-pulse { 50% { fill: rgba(255, 40, 40, .6); stroke-width: 6; } }
@media (prefers-reduced-motion: reduce) { .last-ring.flash { animation: none; } }
.hex.habitat .cell { stroke: #fff; stroke-width: 5; }
.territory { fill: none; stroke-width: 2.5; pointer-events: none; }
.territory.bear { stroke: #3a2109; }
.territory.cougar { stroke: #fff4d6; stroke-dasharray: 5 4; }
.structure { pointer-events: none; }
.structure path { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 0 1px #000); }
.structure.red path { fill: #e11d2e; }
.structure.violet path { fill: #8b3ff0; }
.structure.white path { fill: #f4f4f5; stroke: #111; }
.structure.black path { fill: #17171a; }
.glyph { font-size: 13px; text-anchor: middle; pointer-events: none; }
.glyph.big { font-size: 20px; }
.coord { font-size: 8px; text-anchor: middle; fill: #fff; opacity: .75; pointer-events: none; paint-order: stroke; stroke: #0008; stroke-width: 2; }
.token { stroke: #111; stroke-width: 1.5; pointer-events: none; }
.token-num { font-size: 15px; font-weight: 700; text-anchor: middle; fill: #111; pointer-events: none; }
.token-num.small { font-size: 10px; }
a { color: var(--accent); }
.book { max-width: 720px; margin: 0 auto; padding: 40px 16px 64px; }
.book h2 { font: 700 1.5rem/1.2 Georgia, "Times New Roman", serif; letter-spacing: 0; text-transform: none; color: var(--text); margin: 2.2rem 0 .3rem; }
.book h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; color: var(--accent); }
.book .count { color: var(--muted); font-size: .85rem; font-weight: 400; }
.book ol { margin: 0; padding-left: 2.6rem; }
.book li { padding: 3px 0; }
.book li::marker { color: var(--muted); font-size: .85rem; }
.book .card ul { margin: .4rem 0; padding-left: 1.2rem; }
@media print {
  :root { --bg: #fff; --card: #fff; --line: #bbb; --text: #111; --muted: #555; --accent: #6b4a00; }
  .book { max-width: none; padding: 0; }
  .book h2 { break-after: avoid; }
  .book h3 { break-after: avoid; }
  .book li { break-inside: avoid; }
  .no-print { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 10px 8px; gap: 0; }
  .map-scroll { overflow-x: auto; }
  .board { width: 540px; max-width: none; max-height: none; margin: 0 auto; }
  aside { display: flex; flex-direction: column; }
  aside .actions { order: -1; }
  aside .card:first-child { margin-top: 14px; }
  h1 { font-size: 2.2rem; }
}