/* Checky guides: the app's sticker look (ink outlines, hard offset shadows, flat fills) set for reading. Light, as the
   app is unless you switch it to dark. One column on every screen, with a 16px gutter on phones. */
:root {
  --bg: #FFD34E; --surface: #FFFBF2; --surface-2: #F4EEDF; --text: #161616; --muted: #4D473D; --line: #161616;
  --mint: #8FD9C1; --mint-soft: #CDEFE3; --pink: #FF8FB8; --pink-soft: #FFD3E3; --butter: #FFD34E; --butter-soft: #FFEDB0;
  --sq-light: #FFFBF2; --sq-dark: #8FD9C1; --sq-last: #FFE48A; --sq-sel: #FFD34E; --sq-mark: #FFD34E; --sq-num: #16463A;
  --piece-ink: #45423D; --piece-pink: #FF8FB8; --bad: #D7263D;
  --font: "Gabarito", ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 500 18px/1.6 var(--font);
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
/* The header stays on screen, so the way into the app is always one tap away. Its yellow runs the full width, and
   it gets an ink line underneath once the page has scrolled. */
html { scroll-padding-top: 84px; }
.g-top {
  position: sticky; top: 0; z-index: 20; max-width: 1060px; margin: -14px auto 18px; padding: 12px 0 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax -4px);
}
.g-top::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: -3px; height: 3px; background: var(--line); opacity: 0; transition: opacity .15s ease; }
.scrolled .g-top::after { opacity: 1; }
.mark {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 12px 4px 14px; background: var(--surface); border: 3px solid var(--line);
  border-radius: 16px; box-shadow: 0 4px 0 var(--line); transform: rotate(-3deg); color: var(--text); text-decoration: none;
  font-weight: 900; font-size: 28px; letter-spacing: -0.045em; line-height: 1.2;
}
.mark i { width: 12px; height: 12px; margin: 0 2px 6px; align-self: flex-end; border-radius: 50%; background: var(--pink); border: 3px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.g-topnav { display: flex; align-items: center; gap: 14px; }
.g-toplink { font-size: 17px; text-decoration: none; }
.g-toplink:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 22px;
  background: var(--surface); color: var(--text); border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 4px 0 var(--line);
  font: 800 17px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn.primary { background: var(--pink); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; box-shadow: 0 3px 0 var(--line); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 0 3px 0 var(--line); }

/* ---------- Page ---------- */
.g-main { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--text); }
.g-art { background: var(--surface); border: 3px solid var(--line); border-radius: 24px; box-shadow: 0 6px 0 var(--line); padding: 26px max(18px, 4.5vw) 30px; min-width: 0; }
.kicker { margin: 0 0 6px; font-size: 14px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0 0 10px; font-size: clamp(32px, 6.4vw, 50px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.lede { margin: 0 0 10px; font-size: clamp(19px, 2.6vw, 21px); line-height: 1.5; color: var(--text); max-width: 62ch; }
.byline { margin: 0 0 20px; font-size: 15px; font-weight: 700; color: var(--muted); }
.g-art h2 { margin: 34px 0 8px; font-size: clamp(23px, 3.6vw, 28px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.g-art h3 { margin: 22px 0 4px; font-size: 20px; font-weight: 900; letter-spacing: -0.015em; line-height: 1.25; }
.g-art p, .g-art li { max-width: 66ch; }
.g-art p { margin: 10px 0; }
.g-art ul, .g-art ol { margin: 10px 0; padding-left: 24px; }
.g-art li { margin: 6px 0; }
.g-art li::marker { font-weight: 900; }
.g-art b, .g-art strong { font-weight: 800; }

.answer { margin: 4px 0 8px; padding: 16px 18px 6px; background: var(--mint-soft); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); }
.answer-tag { margin: 0 0 2px !important; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.answer p { margin: 6px 0 10px; font-size: 19px; }

.g-note { margin-top: 28px !important; font-size: 15px; color: var(--muted); }
.g-sources { font-size: 15px; color: var(--muted); }
.g-sources li { margin: 4px 0; }

/* Moves written out, kept together on one line where they fit */
.mv { font-weight: 800; font-variant-numeric: tabular-nums; word-spacing: .08em; }
.g-code { padding: 10px 14px; background: var(--surface-2); border: 3px solid var(--line); border-radius: 12px; font-weight: 800; font-variant-numeric: tabular-nums; width: fit-content; }
.g-names li { margin: 8px 0; }

/* Facts in a row of stickers */
.g-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; padding: 0; list-style: none; }
.g-facts li { margin: 0; padding: 12px 14px; background: var(--butter-soft); border: 3px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line); max-width: none; }
.g-facts b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.g-facts span { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--muted); margin-top: 4px; }

/* Tables: a frame of their own that scrolls sideways on a narrow phone rather than the page doing it */
.g-table { margin: 18px 0; border: 3px solid var(--line); border-radius: 16px; box-shadow: 0 4px 0 var(--line); overflow-x: auto; background: var(--surface); }
.g-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; min-width: 460px; }
.g-table th, .g-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--surface-2); }
.g-table thead th { background: var(--surface-2); font-weight: 900; border-bottom: 3px solid var(--line); }
.g-table tbody th { font-weight: 800; }
.g-table tr:last-child td, .g-table tr:last-child th { border-bottom: 0; }
.g-table .us { background: var(--pink-soft); }
.g-table .yes::before { content: "✓ "; font-weight: 900; }
.g-table .no { color: var(--muted); }

/* Feature tiles */
.g-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 18px 0; }
.g-tile { padding: 14px 16px 12px; background: var(--surface); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); }
.g-tile h3 { margin: 0 0 4px !important; font-size: 19px !important; }
.g-tile p { margin: 0 0 8px !important; font-size: 16px; line-height: 1.45; }
.g-tile a { font-size: 16px; }
.g-tile.mint { background: var(--mint-soft); } .g-tile.pink { background: var(--pink-soft); } .g-tile.butter { background: var(--butter-soft); }

/* A timeline down the left */
.g-time { list-style: none; padding: 0 !important; margin: 18px 0; border-left: 3px solid var(--line); }
.g-time li { position: relative; margin: 0 0 14px; padding-left: 20px; }
.g-time li::before { content: ""; position: absolute; left: -9px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--pink); border: 3px solid var(--line); }
.g-time b { display: block; font-size: 15px; font-weight: 900; letter-spacing: .03em; }

/* ---------- Boards ---------- */
.cb { margin: 26px auto; max-width: 440px; }
.cb .cb-still { display: block; width: 100%; height: auto; }
.cb figcaption { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.45; }
.cb-board {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border: 4px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 7px 0 var(--line); background: var(--sq-light); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.cb-board.shake { animation: cb-shake .36s ease; }
@keyframes cb-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.cb-sqs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.cb-sq { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.cb-sq.light { background: var(--sq-light); }
.cb-sq.dark { background: var(--sq-dark); }
button.cb-sq { appearance: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: default; }
button.cb-sq.can, button.cb-sq.dest { cursor: pointer; }
.cb-sq.last { background: var(--sq-last); }
.cb-sq.sel { background: var(--sq-sel); }
.cb-sq.mark { background: var(--sq-mark); }
button.cb-sq:focus-visible { outline: 3px solid var(--line); outline-offset: -6px; }
.cb-sq.spot::before { content: ""; position: absolute; inset: 5%; border: 3px dashed var(--line); border-radius: 50%; pointer-events: none; z-index: 2; }
.cb-num { position: absolute; right: 3px; bottom: 2px; font-size: clamp(8px, 2.3vw, 11px); font-weight: 800; line-height: 1; color: var(--sq-num); display: none; pointer-events: none; }
.cb-board.nums .cb-num { display: block; }
.cb-dot { position: absolute; width: 24%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--line); opacity: .6; pointer-events: none; z-index: 3; }
.cb-dot.cap { width: 62%; background: transparent; border: 3px dashed var(--line); opacity: .9; }
.cb-pcs { position: absolute; inset: 0; pointer-events: none; }
.cb-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; display: flex; align-items: center; justify-content: center; transition: transform .26s ease; z-index: 1; }
.cb-pc.moving { z-index: 4; }
.cb-pc i {
  display: block; width: 70%; aspect-ratio: 1 / 1; border-radius: 50%; margin-top: -4px;
  border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: opacity .18s ease, transform .18s ease;
}
.cb-pc.ink i { background: var(--piece-ink); --fill: var(--piece-ink); }
.cb-pc.pink i { background: var(--piece-pink); --fill: var(--piece-pink); }
.cb-pc.king i { background: radial-gradient(circle closest-side, var(--fill) 0 34%, var(--line) 34% 43%, var(--butter) 43% 65%, var(--line) 65% 73%, var(--fill) 73% 100%); }
.cb-pc.gone i { opacity: 0; transform: scale(.2); }
.cb-panel { margin-top: 16px; padding: 12px 14px; background: var(--surface-2); border: 3px solid var(--line); border-radius: 16px; display: grid; gap: 10px; }
.cb.solved .cb-panel { background: var(--mint-soft); }
.cb-say { margin: 0 !important; font-size: 17px; font-weight: 700; line-height: 1.45; min-height: 2.9em; }
.cb-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cb-count { font-size: 14px; font-weight: 800; color: var(--muted); margin-right: auto; order: -1; flex-basis: 100%; }
.cb.cb-on figcaption { text-align: left; }
/* The same thing in the app, under every board */
.cb-app {
  display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 8px 16px;
  background: var(--butter-soft); border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line);
  font-size: 16px; font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none;
}
.cb-app:hover { background: var(--butter); }
.cb-app span { margin-left: 6px; }
.cb-app:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.chip { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--line); vertical-align: -2px; margin-right: 7px; }
.chip.ink { background: var(--piece-ink); }
.chip.pink { background: var(--piece-pink); }
@media (prefers-reduced-motion: reduce) { .cb-pc, .cb-pc i { transition: none; } .cb-board.shake { animation: none; } }

/* ---------- Chart ---------- */
.g-chart { margin: 22px 0; padding: 16px 16px 14px; background: var(--surface); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); }
.g-chart h3 { margin: 0 0 2px !important; }
.g-chart-sub { margin: 0 0 12px !important; font-size: 15px; color: var(--muted); }
/* The bars sit right of a gutter that holds the scale's labels, so a label never covers a bar. */
.g-plot { position: relative; margin-left: 34px; }
.g-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 3px; pointer-events: none; }
.g-grid i { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(22, 22, 22, .16); }
.g-grid span { position: absolute; left: -34px; top: -9px; font-size: 11px; font-weight: 800; color: var(--muted); font-style: normal; line-height: 1; }
.g-chart-span { margin: 0 0 6px 34px !important; width: calc((100% - 34px - 69px) * 10 / 24 + 27px); }
.g-chart-span span { display: block; padding: 2px 4px; background: var(--mint-soft); border: 2px solid var(--line); border-radius: 8px; text-align: center; font-size: 12px; font-weight: 900; line-height: 1.3; }
.g-bars { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 190px; border-bottom: 3px solid var(--line); }
.g-bar { appearance: none; border: 0; padding: 0; margin: 0; background: transparent; height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.g-bar span { display: block; width: 100%; border: 2px solid var(--line); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--piece-ink); }
.g-bar.db span { background: var(--mint); }
.g-bar.on span, .g-bar:hover span { background: var(--pink); }
.g-bar:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }
.g-axis { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin: 4px 0 0 34px; font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; }
.g-axis-note { margin: 2px 0 0 34px !important; font-size: 13px; color: var(--muted); text-align: center; }
.g-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.g-key i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.g-chart-read { margin: 12px 0 0 !important; min-height: 3em; font-size: 16px; font-weight: 800; line-height: 1.4; }
.g-chart details { margin-top: 8px; font-size: 15px; }
.g-chart summary { cursor: pointer; font-weight: 800; }
.g-chart details table { margin-top: 8px; border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
.g-chart details td, .g-chart details th { padding: 3px 6px; border-bottom: 1px solid var(--surface-2); text-align: right; }
.g-chart details th:first-child, .g-chart details td:first-child { text-align: left; }

/* ---------- Call to play, more guides, hub ---------- */
.g-cta {
  display: grid; gap: 14px; padding: 22px max(18px, 4vw); background: var(--pink-soft); border: 3px solid var(--line); border-radius: 24px; box-shadow: 0 6px 0 var(--line);
}
.g-cta h2 { margin: 0 0 4px; font-size: clamp(23px, 3.6vw, 28px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; }
.g-cta p { margin: 0; max-width: 56ch; }
.g-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.g-art .g-cta { margin: 26px 0; box-shadow: 0 4px 0 var(--line); }
@media (min-width: 720px) { .g-cta { grid-template-columns: 1fr auto; align-items: center; } }

.g-more h2, .g-group h2 { margin: 6px 0 12px; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.g-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px 14px; text-decoration: none;
  background: var(--surface); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line);
}
.g-card:hover { background: var(--butter-soft); }
.g-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.g-card img { width: 76px; height: auto; }
.g-card b { display: block; font-size: 18px; font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; }
.g-card small { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.g-hubhead { padding: 6px 2px 0; }
.g-hubhead .lede { max-width: 50ch; }

/* ---------- Footer ---------- */
.g-foot { max-width: 760px; margin: 34px auto 0; display: grid; gap: 8px; justify-items: center; font-size: 15px; font-weight: 700; }
.g-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.g-foot p { margin: 0; color: var(--muted); }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .mark { font-size: 24px; }
  .g-toplink { display: none; }
  .g-art { border-radius: 20px; }
  .cb-say { font-size: 16px; }
  /* Tables fit the phone's width, so no column hides off to the side. */
  .g-table table { min-width: 0; font-size: 14.5px; }
  .g-table th, .g-table td { padding: 8px 8px; }
  .g-cta-btns .btn { flex: 1 1 auto; }
}