/* LOCAL KNOWLEDGE preview page. Palette and type are the game's own (play/styles.css, view/map.js). */
:root {
  --ink: #3b3127;
  --paper: #efe4c8;
  --card: #fbf6e8;
  --field: #dfe2b4;
  --dim: #6d6152;
  --ok: #2f7a3a;
  --bad: #b8282f;
  --night: #2d2620;
  --night2: #382f27;
  --onnight: #f3ead2;
  --onnight-dim: #c9bc9d;
  --serif: Georgia, "Iowan Old Style", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --faint: #8a7d69;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 19px/1.6 var(--serif);
  -webkit-text-size-adjust: 100%;
}
a {
  color: inherit;
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
.narrow {
  max-width: 760px;
}
h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  margin: 14px 0 18px;
}
h2 {
  font-size: clamp(27px, 3.2vw, 38px);
  margin: 0 0 18px;
}
.eyebrow {
  font: 700 13px/1.5 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onnight-dim);
  margin: 0;
}

/* hero */
.hero {
  background: radial-gradient(ellipse at 75% 10%, #4a3d30, var(--night) 70%);
  color: var(--onnight);
  padding: 56px 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.dek {
  font-size: 20px;
  color: #e7dcc0;
  max-width: 34em;
}
.hero-fig {
  margin: 0;
}
.hero-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
figcaption {
  font: 14px/1.45 var(--sans);
  color: var(--onnight-dim);
  margin-top: 10px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 10px;
}
.fine {
  font: 14px var(--sans);
  color: var(--onnight-dim);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 8px;
  font: 700 17px var(--sans);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn.cta {
  background: #c0603a;
  color: #fff8ec;
  box-shadow: 0 3px 0 #7e3b20;
}
.btn.cta:hover {
  background: #cf6b43;
}
.btn.ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.phone-only {
  display: none;
}
@media (pointer: coarse) {
  .phone-only {
    display: inline-flex;
  }
}

/* bands */
.band {
  padding: 72px 0;
}
.band.ink {
  background: var(--night);
  color: var(--onnight);
}
.band.paper {
  background: var(--paper);
}
.band.paper2 {
  background: var(--card);
}
.lead {
  max-width: 44em;
  color: #e7dcc0;
}
.after {
  max-width: 44em;
  color: var(--onnight-dim);
  margin-top: 22px;
}

/* the demo */
.demo {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 16px;
  margin-top: 26px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  scroll-margin-top: 16px;
}
.d-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.d-vnum {
  font: 700 12px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.d-vname {
  font-size: 26px;
}
.d-walks {
  font: 14px var(--sans);
  color: var(--dim);
}
.d-coach {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.45;
}
.d-coach b {
  display: block;
  font: 700 11px var(--sans);
  letter-spacing: 0.12em;
  color: var(--dim);
}
.d-coach.off {
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.d-body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
}
.d-map {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 640;
  display: block;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.d-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background: var(--card);
  border-radius: 8px;
  padding: 8px 12px;
}
.tok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  min-height: 64px;
  padding: 4px 6px;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  font: 700 13px var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.tok canvas {
  width: 38px;
  height: 38px;
}
.tok.sel {
  border-color: var(--ink);
  background: #fff;
  transform: translateY(-3px);
}
.tok.placed canvas {
  opacity: 0.4;
}
.tok.placed span::after {
  content: " ✓";
}
.d-trayhelp {
  font-style: italic;
  font-size: 15px;
  color: var(--dim);
  flex: 1 1 220px;
}
.d-card {
  background: var(--card);
  border-left: 5px solid var(--who);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.d-card .who {
  font-size: 15px;
  margin-bottom: 4px;
}
.d-card .who b {
  color: var(--who);
}
.d-card .who i {
  color: var(--dim);
  font-size: 14px;
}
.idiom-tag,
.d-card .idiom,
.tag {
  font: 700 11px var(--sans);
  letter-spacing: 0.1em;
  border: 1.5px solid var(--who);
  color: var(--who);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.d-card .verdict {
  font: 700 14px var(--sans);
  margin-left: 8px;
}
.d-card.ok .verdict {
  color: var(--ok);
}
.d-card.bad .verdict {
  color: var(--bad);
}
.d-card.bad {
  background: #faeaea;
}
.d-card .said {
  font-size: 18px;
  line-height: 1.55;
}
.ph {
  border-radius: 3px;
  padding: 0 1px;
  transition: background 0.15s;
}
.ph.lit {
  background: #d9dfb6;
}
.ph.fail {
  background: var(--bad);
  color: #fff;
}
.d-card .why {
  color: var(--bad);
  font-style: italic;
  font-size: 15px;
}
.d-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}
.d-buttons button {
  min-height: 46px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 700 16px var(--sans);
  cursor: pointer;
}
.d-buttons .d-walk {
  background: var(--ink);
  color: var(--paper);
}
.d-buttons button:disabled {
  opacity: 0.45;
  cursor: default;
}
.d-buttons .d-walk:disabled {
  opacity: 1;
}
.d-toast {
  min-height: 1.5em;
  font-size: 16px;
  font-style: italic;
  margin: 4px 0;
}
.d-rules {
  font-size: 15px;
  color: var(--dim);
}
.d-rules summary {
  font: 700 14px var(--sans);
  cursor: pointer;
}
.d-rules ul {
  padding-left: 18px;
  margin: 6px 0;
}
.d-report {
  position: absolute;
  inset: 0;
  background: rgba(45, 38, 32, 0.55);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.d-sheet {
  background: var(--paper);
  border-radius: 10px;
  padding: 26px 30px;
  max-width: 520px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.d-rkicker {
  font: 700 12px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.d-sheet h3 {
  font-size: 32px;
  margin: 6px 0 12px;
}
.d-rstars div {
  font-size: 19px;
  margin: 4px 0;
}
.d-rstars .off {
  opacity: 0.35;
}
.d-rline {
  font-style: italic;
}
.d-rfine {
  font: 14px var(--sans);
  color: var(--dim);
  margin-top: 12px;
}
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* sections */
.idioms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}
.idiom {
  background: var(--card);
  border-left: 5px solid var(--who);
  border-radius: 6px;
  padding: 14px 16px;
}
.idiom p {
  margin: 0;
}
.idiom .who {
  margin-bottom: 6px;
  font-size: 16px;
}
.idiom .who b {
  color: var(--who);
}
.idiom .who i {
  color: var(--dim);
}
.reasons {
  list-style: none;
  padding: 0;
}
.reasons li {
  border-left: 4px solid var(--bad);
  padding: 4px 12px;
  margin: 8px 0;
  font-style: italic;
  color: var(--bad);
}
.tablewrap {
  overflow-x: auto;
  margin: 20px 0;
}
.counts {
  border-collapse: collapse;
  width: 100%;
  font: 16px var(--sans);
}
.counts th,
.counts td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #5a4c3e;
}
.counts th {
  color: var(--onnight-dim);
  font-weight: 700;
  font-size: 14px;
}
.counts td:nth-child(2),
.counts td:nth-child(3),
.counts th:nth-child(2),
.counts th:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.counts tr:last-child td {
  border-bottom: 0;
}
.villages li {
  margin: 8px 0;
}
.faq dt {
  font-weight: 700;
  margin-top: 18px;
}
.faq dd {
  margin: 4px 0 0;
}
.close .ps {
  color: var(--onnight-dim);
  font-style: italic;
  margin-top: 28px;
}
.foot {
  font: 14px var(--sans);
  color: var(--faint);
  padding: 28px 22px 40px;
}

@media (max-width: 900px) {
  .hero-grid,
  .d-body {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 36px 0 44px;
  }
  .band {
    padding: 52px 0;
  }
  .idioms {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  body {
    font-size: 18px;
  }
  .wrap {
    padding: 0 16px;
  }
  .demo {
    padding: 10px;
    margin-left: -8px;
    margin-right: -8px;
  }
  .d-card .said {
    font-size: 17px;
  }
  .tok {
    min-width: 58px;
  }
  .counts {
    font-size: 14px;
  }
  .counts th,
  .counts td {
    padding: 6px 6px;
  }
}
details.tablewrap summary {
  font: 700 14px var(--sans);
  color: var(--onnight-dim);
  cursor: pointer;
  margin-bottom: 8px;
}
/* Phones: the real game goes above the words, so the first screen isn't all text. */
@media (max-width: 900px) {
  .hero-fig {
    order: -1;
  }
  .hero-fig figcaption {
    font-size: 13px;
  }
}