/* CheckerGames — layout + components. Token-only. No hardcoded aesthetic values. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);color-scheme:dark light}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .3s ease;
  padding:0 0 64px;
}

a{color:inherit}
button{font-family:inherit}

/* ============ HEADER ============ */
.site-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  color:var(--text);
}
.brand-mark{
  width:22px;height:22px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,var(--p1),var(--p1b)) 0 0/50% 100% no-repeat,
    radial-gradient(circle at 65% 30%,var(--p2),var(--p2b)) 100% 0/50% 100% no-repeat;
  box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px var(--line);
}
.site-nav{
  display:flex;
  gap:22px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  position:relative;
}
.site-nav .nav-link{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.02em;
  padding:8px 2px;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible{color:var(--text);border-bottom-color:var(--accent);outline:0}

.site-nav .nav-item{position:relative}
/* Invisible bridge that spans the gap between trigger and menu so
   the cursor never leaves the hover surface while moving down to select. */
.site-nav .nav-item.has-menu::after{
  content:"";
  position:absolute;
  left:-8px;right:-8px;
  top:100%;
  height:14px;
  background:transparent;
}
.site-nav .nav-caret{font-size:9px;color:var(--muted);transition:transform .18s,color .15s;margin-left:1px}
.site-nav .nav-link:hover .nav-caret{color:var(--text)}
.site-nav .nav-item:hover .nav-caret,
.site-nav .nav-trigger[aria-expanded="true"] .nav-caret{transform:translateY(1px) rotate(180deg)}

.site-nav .nav-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:300px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:1px;
  z-index:60;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .15s,visibility 0s linear .15s,transform .15s;
}
:root[data-skin="minimal"] .site-nav .nav-menu{box-shadow:0 16px 40px rgba(0,0,0,.14)}
.site-nav .nav-item:hover > .nav-menu,
.site-nav .nav-trigger[aria-expanded="true"] + .nav-menu{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.site-nav .nav-menu a{
  display:flex;flex-direction:column;gap:1px;
  padding:9px 12px;
  border-radius:7px;
  text-decoration:none;
  border-bottom:0;
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu a:focus-visible{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  outline:0;
}
.site-nav .nav-menu .nv-name{
  color:var(--text);font-weight:600;font-size:13.5px;line-height:1.2;
  display:flex;align-items:center;gap:8px;
}
.site-nav .nav-menu .nv-meta{
  color:var(--muted);font-weight:500;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  margin-top:1px;
}
.site-nav .nav-menu .nv-soon{
  font-size:9.5px;color:var(--muted);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--line);border-radius:999px;
}
.site-nav .nav-menu-sep{
  height:1px;background:var(--line);margin:6px 4px;
}
.site-nav .nav-menu .nav-see-all{
  font-weight:600;color:var(--accent-hi);font-size:13px;
  padding:9px 12px;
}
.site-nav .nav-menu .nav-see-all:hover{color:var(--text)}

.head-tools{display:flex;align-items:center;gap:14px;justify-self:end}
.skin-switch{display:flex;gap:4px;background:color-mix(in srgb,var(--bg) 60%,transparent);padding:4px;border-radius:9px;border:1px solid var(--line)}
.skin-switch button{
  border:0;background:transparent;color:var(--muted);
  font-weight:600;font-size:12px;letter-spacing:.04em;
  padding:6px 12px;border-radius:6px;cursor:pointer;
  transition:background .15s,color .15s;
  min-width:62px;text-align:center;
}
.skin-switch button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}

@media(max-width:760px){
  .site-head{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:10px;padding:12px 14px;gap:10px}
  .site-nav{grid-column:1 / -1;order:3;justify-content:center;gap:14px;flex-wrap:wrap}
  .site-nav .nav-link{font-size:13px;padding:6px 2px}
  .head-tools{justify-self:end}
  .brand{font-size:15px}
  .skin-switch{padding:3px;gap:2px}
  .skin-switch button{min-width:0;padding:5px 10px;font-size:11px}
  /* Mobile: drop the menu to viewport width and let it scroll. */
  .site-nav .nav-menu{
    left:0;right:0;
    transform:translateY(-6px);
    min-width:0;width:calc(100vw - 28px);
    max-width:none;
    max-height:60vh;overflow:auto;
    margin-left:auto;margin-right:auto;
  }
  .site-nav .nav-item:hover > .nav-menu,
  .site-nav .nav-trigger[aria-expanded="true"] + .nav-menu{
    transform:translateY(0);
  }
}
@media(max-width:380px){
  .skin-switch button{padding:5px 7px;font-size:10.5px}
  .brand-name{font-size:14px}
}

/* ============ HERO ============ */
.hero{text-align:center;padding:32px 20px 8px;max-width:760px;margin:0 auto}
.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(28px,6vw,40px);
  line-height:1.1;
  letter-spacing:-.01em;
}
.hero .lede{color:var(--muted);margin-top:8px;font-size:15px}
.hero .hero-stamp{
  font-size:12px;color:var(--muted);
  letter-spacing:.04em;
  margin-top:10px;opacity:.75;
}

/* ============ BOARD + PIECES (shared) ============ */
.frame{
  background:var(--frame);
  padding:var(--frame-pad);
  border-radius:calc(var(--frame-pad) + 6px);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
:root[data-skin="minimal"] .frame{box-shadow:0 6px 18px rgba(0,0,0,.08)}

.board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  aspect-ratio:1/1;
  width:100%;
  border-radius:var(--board-radius);
  overflow:hidden;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.4);
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
:root[data-skin="minimal"] .board{box-shadow:inset 0 1px 4px rgba(0,0,0,.06)}

.sq{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;
  min-width:0;
}
.sq.dark{background:var(--sq-dark)}
.sq.light{background:var(--sq-light)}
.sq.playable{cursor:pointer}
.sq.sel::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--accent-hi);pointer-events:none;z-index:1}
.sq.last::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none}
.sq:focus-visible{outline:2px solid var(--accent-hi);outline-offset:-3px;z-index:2}

.dot{
  width:26%;height:26%;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
  pointer-events:none;
  animation:dot-in .18s ease both;
}
.dot.cap{
  background:color-mix(in srgb,var(--p1) 70%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--p1) 22%,transparent);
}
@keyframes dot-in{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.pc{
  --pc-self-hi:var(--p1);
  --pc-self-lo:var(--p1b);
  width:74%;height:74%;border-radius:50%;
  position:relative;
  box-shadow:var(--pc-shadow);
  transition:transform .26s cubic-bezier(.4,.8,.3,1);
  pointer-events:none;
  background:radial-gradient(circle at 38% 32%,var(--pc-self-hi),var(--pc-self-lo));
}
.pc.p1{--pc-self-hi:var(--p1);--pc-self-lo:var(--p1b)}
.pc.p2{--pc-self-hi:var(--p2);--pc-self-lo:var(--p2b)}
.pc::after{
  content:"";position:absolute;inset:18%;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), inset 0 0 0 5px rgba(0,0,0,.18);
  pointer-events:none;
}
:root[data-skin="minimal"] .pc::after{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
:root[data-skin="neon"] .pc{box-shadow:var(--pc-glow)}
:root[data-skin="neon"] .pc::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}

/* Stacked-disc king (real-world checkers king, not a glyph).
   A second disc with the same gradient is offset upward.
   Flying-king variants add a brass ring around the stacked disc. */
.pc.king::before{
  content:"";
  position:absolute;
  left:50%;top:-26%;
  transform:translateX(-50%);
  width:100%;height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--pc-self-hi),var(--pc-self-lo));
  box-shadow:var(--pc-shadow);
  z-index:2;
}
/* Brass ring marker for flying-king variants — a glance-readable rules cue. */
:root[data-variant="international"] .pc.king::before,
:root[data-variant="brazilian"] .pc.king::before,
:root[data-variant="russian"] .pc.king::before,
:root[data-variant="canadian"] .pc.king::before,
:root[data-variant="turkish"] .pc.king::before{
  box-shadow:var(--pc-shadow), 0 0 0 2px var(--accent);
}
.pc.king.just-crowned::before{animation:king-stack-in .32s cubic-bezier(.4,.8,.3,1) both}
@keyframes king-stack-in{
  from{transform:translateX(-50%) translateY(40%) scale(.6);opacity:0}
  to  {transform:translateX(-50%) translateY(0) scale(1);opacity:1}
}

.pc.captured{animation:pc-out .26s ease forwards}
@keyframes pc-out{to{transform:scale(.2);opacity:0}}

/* ============ SOLO LAYOUT ============ */
.view{padding:24px 16px 0}
.solo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:28px;
  max-width:880px;
  margin:8px auto 0;
  align-items:start;
}
.solo .frame{max-width:560px;margin:0 auto;width:100%}
@media(max-width:780px){
  .view{padding:10px 6px 0}
  .solo{grid-template-columns:1fr;gap:14px}
  .solo .frame{order:1;padding:5px;border-radius:10px;max-width:none}
  .solo .panel{order:2;padding:16px;gap:14px}
  .below{padding:0 18px;margin-top:36px;gap:36px}
}
@media(max-width:380px){
  .view{padding:8px 4px 0}
  .solo .frame{padding:4px;border-radius:8px}
}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  display:flex;flex-direction:column;gap:18px;
}
.turn{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;
  min-height:24px;
}
.turn .chip{width:16px;height:16px;border-radius:50%;flex:none}
.chip[data-side="red"]{background:radial-gradient(circle at 38% 32%,var(--p1),var(--p1b))}
.chip[data-side="black"]{background:radial-gradient(circle at 38% 32%,var(--p2),var(--p2b))}

.bl{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:8px;
}
.toggle{
  display:flex;
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  border-radius:9px;padding:4px;gap:4px;
  border:1px solid var(--line);
}
.toggle button{
  flex:1;border:0;background:transparent;
  color:var(--muted);font-weight:600;font-size:13px;
  padding:9px 0;border-radius:6px;cursor:pointer;
  transition:background .15s,color .15s;
  min-height:38px;
}
.toggle button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
:root[data-skin="minimal"] .toggle button.on{box-shadow:0 1px 2px rgba(0,0,0,.08)}

.pills{display:flex;gap:7px}
.pills button{
  flex:1;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-weight:600;font-size:13px;
  padding:9px 0;border-radius:8px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
  min-height:38px;
}
.pills button.on{
  border-color:var(--accent);color:var(--accent-hi);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}

.caps-pair{display:flex;flex-direction:column;gap:8px}
.cap-row{display:flex;align-items:center;gap:10px;min-height:24px}
.cap-label{font-size:12px;color:var(--muted);min-width:36px}
.caps{display:flex;gap:3px;flex-wrap:wrap;min-height:14px}
.cap-pc{width:14px;height:14px;border-radius:50%}
.cap-pc.p1{background:radial-gradient(circle at 38% 32%,var(--p1),var(--p1b))}
.cap-pc.p2{background:radial-gradient(circle at 38% 32%,var(--p2),var(--p2b))}

.actions{display:flex;gap:10px;margin-top:auto}
.btn{
  flex:1;border:0;cursor:pointer;
  font-weight:600;font-size:14px;
  padding:13px 22px;border-radius:9px;
  transition:transform .1s,filter .15s;
  min-height:46px;
  line-height:1.15;
}
.btn.primary{background:var(--accent);color:var(--accent-on)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.ghost:hover{color:var(--text);border-color:var(--accent)}
/* Global full-width modifier — works anywhere, not just inside the result modal. */
.btn-full{display:block;width:100%;padding:14px 18px;min-height:48px}

/* ============ TABLETOP / 2P LAYOUT ============ */
.tt-wrap{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:18px;
  padding:0 12px;
}
.seat{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.phone{
  width:min(100%,420px);
  background:var(--bg);
  border:11px solid #060606;
  border-radius:40px;
  padding:14px;
  box-shadow:0 34px 70px rgba(0,0,0,.5);
  position:relative;
}
.phone::before{
  content:"";position:absolute;top:18px;left:50%;
  transform:translateX(-50%);
  width:60px;height:5px;border-radius:3px;background:#1a1a1a;
}
@media(max-width:780px){
  .tt-wrap{padding:0 6px;gap:6px;margin-top:10px}
  .phone{width:min(100%,440px);border-width:7px;border-radius:32px;padding:9px}
  .phone::before{top:11px;width:48px;height:4px}
  .tt-stack{padding-top:10px;gap:9px}
  .phone .frame{padding:5px;border-radius:8px}
  .zone{padding:8px 11px;min-height:52px}
  .zone .who{font-size:13px}
  .zone .state{font-size:11px}
  .tt-note{font-size:12px;margin:12px auto 0}
  .tt-actions{width:100%;max-width:440px}
}
.tt-stack{display:flex;flex-direction:column;gap:12px;padding-top:14px}
.zone{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  transition:opacity .2s,border-color .2s,box-shadow .2s;
  opacity:.5;
  min-height:60px; /* hold size between active/dim */
}
.zone.top{transform:rotate(180deg)}
.zone.active{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 25%,transparent);
}
.zone .chip{width:16px;height:16px;border-radius:50%;flex:none}
.zone-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.zone .who{font-weight:600;font-size:14px}
.zone .state{font-size:12px;color:var(--muted);min-height:14px}
.zone .caps{margin-left:auto;flex-wrap:nowrap}
.zone .cap-pc{width:12px;height:12px}

.tt-note{
  color:var(--muted);font-size:13px;
  max-width:440px;text-align:center;
  margin:18px auto 0;line-height:1.6;
}
/* §6c — Who Goes First picker, inside the tabletop card; same width as the action row. */
#ctl-tt-first{width:min(100%,360px);margin-top:8px}
#ctl-tt-first .bl{text-align:center;margin-bottom:6px}
.tt-actions{display:flex;gap:10px;width:min(100%,360px);margin-top:12px}

/* ============ BELOW-FOLD COPY ============ */
.below{max-width:760px;margin:48px auto 0;padding:0 22px;color:var(--muted);font-size:15px;line-height:1.7}
.below h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,3.6vw,26px);color:var(--text);
  margin-bottom:14px;letter-spacing:-.01em;
}
.below em{color:var(--text);font-style:normal;font-weight:500}
.below strong{color:var(--text)}

/* ============ FOOTER ============ */
.site-foot{text-align:center;color:var(--muted);font-size:13px;margin-top:64px}

/* ============ MODAL ============ */
.modal-wrap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:50;
  background:color-mix(in srgb,var(--bg) 75%,transparent);
  backdrop-filter:blur(4px);
}
.modal-wrap.in-view{position:absolute}
.modal{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
  text-align:center;
  max-width:340px;width:100%;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.modal h3{
  font-family:var(--font-display);font-weight:600;
  font-size:22px;margin-bottom:8px;letter-spacing:-.01em;
}
.modal p{color:var(--muted);font-size:14px;margin-bottom:18px}
.modal .btn{padding:13px 26px}

/* Game over modal (extended) */
.modal-result{max-width:380px}
.modal-result .result-body{margin-bottom:16px}
.modal-result .btn-full{display:block;width:100%;padding:14px 18px}
.modal-result .result-diff{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 14px;padding:10px 12px;
  background:color-mix(in srgb,var(--surface) 60%,#000 40%);
  border:1px solid var(--line);border-radius:10px;
}
.modal-result .result-diff-label{
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
}
.modal-result .result-diff-pills{display:flex;gap:6px}
.modal-result .result-diff-pills button{
  font:inherit;font-size:12px;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:6px;
  padding:5px 10px;cursor:pointer;
}
.modal-result .result-diff-pills button.on{
  color:var(--text);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,transparent);
}
.modal-result .result-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;
}
.modal-result .result-grid .btn{
  padding:11px 12px;font-size:13px;line-height:1.1;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.modal-result .result-home{
  display:inline-block;margin-top:14px;
  color:var(--muted);font-size:13px;text-decoration:none;
}
.modal-result .result-home:hover{color:var(--text)}
@media (max-width:380px){
  .modal-result .result-grid{grid-template-columns:1fr}
}

/* §6c: board flip so local player's pieces face the bottom.
   .frame.is-flipped rotates the entire board 180°. Pieces are radially symmetric,
   so they read correctly upside-down; data-r/data-c on each square is unchanged,
   so click handlers (which read dataset, not screen position) keep working. */
.frame.is-flipped > .board{ transform: rotate(180deg); }
.frame.is-flipped > .board > *{ /* counter-rotate any directional glyphs if added later */ }

/* §6c on Chinese: in 2P vs-Computer where you play the top-triangle player (player 0),
   flip the SVG so your pegs face the bottom of the screen. Pegs / holes are radially
   symmetric and the click handler reads dataset.r/dataset.c (not screen position),
   so input still works correctly. */
#board-cn.cn-flipped{transform:rotate(180deg);transform-origin:center}

/* Chinese checkers — player legend (3+ players) */
.cn-legend{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--muted)}
.cn-legend-item{display:inline-flex;align-items:center;gap:6px}
.cn-legend-dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
}

/* Chinese checkers — pass-the-phone overlay (hot-seat between turns) */
.cn-pass{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:120;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(6px);
}
.cn-pass-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;text-align:center;
  max-width:340px;width:100%;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.cn-pass-chip{
  display:inline-block;width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent);
  margin-bottom:12px;
}
.cn-pass-title{
  font-family:var(--font-display);font-weight:600;
  font-size:22px;margin-bottom:6px;letter-spacing:-.01em;
}
.cn-pass-body{color:var(--muted);font-size:14px;margin-bottom:18px}

/* Toast (clipboard fallback) */
.cg-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;font-size:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  z-index:200;
  opacity:1;transition:opacity .2s ease;
}
.cg-toast.hidden{opacity:0;pointer-events:none}

/* ============ VARIANT RAIL (below the board on every playable page) ============ */
.variant-rail{
  max-width:980px;
  margin:48px auto 0;
  padding:0 22px;
}
.variant-rail .rail-head{text-align:center;margin-bottom:22px;max-width:620px;margin-left:auto;margin-right:auto}
.variant-rail .rail-head h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(22px,3.6vw,28px);
  color:var(--text);
  margin:0 0 8px;
  letter-spacing:-.01em;line-height:1.2;
}
.variant-rail .rail-head p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.variant-rail .rail-foot{
  text-align:center;color:var(--muted);font-size:13px;
  margin:18px 0 0;
}
.variant-rail .rail-foot a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.variant-rail .rail-foot a:hover{color:var(--text)}

.variant-rail .variant-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.variant-rail .variant-grid > a,
.variant-rail .variant-grid > div{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  transition:border-color .15s,transform .1s,background .15s;
  position:relative;
}
.variant-rail .variant-grid > a:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  color:inherit;
}
.variant-rail .variant-grid .v-board{
  width:100%;
  aspect-ratio:1/1;
  padding:8px;
  background:linear-gradient(145deg,#6B4E37,#4A3526 40%,#2C2017);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  margin-bottom:14px;
  max-width:140px;
  margin-left:auto;margin-right:auto;
}
.variant-rail .variant-grid .v-board .mb-board{
  display:grid;
  width:100%;height:100%;
  border-radius:3px;
  overflow:hidden;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
}
.variant-rail .variant-grid .v-board .mb-sq{
  position:relative;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
}
.variant-rail .variant-grid .v-board .mb-pc{
  width:70%;height:70%;
  border-radius:50%;
  display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 1.5px rgba(255,255,255,.25);
}
.variant-rail .variant-grid .v-board .mb-pc.p1{background:radial-gradient(circle at 38% 32%,var(--p1),var(--p1b))}
.variant-rail .variant-grid .v-board .mb-pc.p2{background:radial-gradient(circle at 38% 32%,var(--p2),var(--p2b))}
.variant-rail .variant-grid .v-board .mb-star{
  width:100%;height:100%;display:block;
  background:#1A140A;border-radius:3px;
}

.variant-rail .variant-grid .v-name{
  font-family:var(--font-display);font-weight:600;font-size:19px;
  color:var(--text);line-height:1.2;
}
.variant-rail .variant-grid .v-meta{
  font-size:11px;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.variant-rail .variant-grid .v-desc{
  font-size:14px;color:var(--muted);line-height:1.55;
  margin-top:4px;
}
.variant-rail .variant-grid .v-cta{
  margin-top:8px;
  font-size:13px;font-weight:600;
  color:var(--accent-hi);
  letter-spacing:.01em;
}
.variant-rail .variant-grid > a:hover .v-cta{color:var(--text)}
.variant-rail .variant-grid .soon .v-name::after{
  content:" · soon";
  font-size:11px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  font-family:var(--font-ui);
}
.variant-rail .variant-grid .soon .v-cta{color:var(--muted)}
.variant-rail .variant-grid .current{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
}
.variant-rail .variant-grid .current .v-cta{color:var(--accent-hi)}

/* ============ MICROPILL ============ */
.micropill{
  font-size:11px;color:var(--muted);text-align:center;
  letter-spacing:.04em;
  margin-top:-4px;
  line-height:1.6;
}

/* ============ BELOW-FOLD COPY ============ */
.below{max-width:760px;margin:56px auto 0;padding:0 22px;display:flex;flex-direction:column;gap:48px}
.below article{color:var(--muted);font-size:15px;line-height:1.7}
.below h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(22px,3.6vw,28px);color:var(--text);
  margin:0 0 14px;letter-spacing:-.01em;line-height:1.2;
}
.below h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,2.6vw,20px);color:var(--text);
  margin:22px 0 6px;letter-spacing:-.005em;line-height:1.25;
}
.below p{margin:0 0 10px}
.below p:last-child{margin-bottom:0}
.below strong{color:var(--text)}
.below a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.below a:hover{color:var(--text)}

.howto ul{padding-left:20px;margin:12px 0}
.howto li{margin-bottom:6px}

.faq details{
  border-top:1px solid var(--line);
  padding:16px 0;
}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;
  font-weight:600;color:var(--text);
  list-style:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-right:4px;
  font-size:15px;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:20px;color:var(--muted);font-weight:400;
  line-height:1;
  margin-top:2px;
  flex:none;
}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:10px;margin-bottom:0}

/* ============ FOOTER ============ */
.foot-links{
  display:flex;justify-content:center;gap:22px;
  flex-wrap:wrap;
  margin-bottom:12px;padding:0 18px;
}
.foot-links a{
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;
}
.foot-links a:hover{color:var(--text)}
.foot-mail{color:var(--accent-hi);text-decoration:none;font-weight:600}
.foot-mail:hover{color:var(--text)}

/* ============ CONTENT PAGES (how-to / strategy / variants / about / legal) ============ */
.content-page{max-width:720px;margin:32px auto 0;padding:0 22px}
.content-page .hero{text-align:left;padding:8px 0 0;margin:0 0 8px}
.content-page .hero h1{
  font-size:clamp(30px,5vw,42px);
  text-align:left;
  margin:0;
}
.content-page .last-updated{
  font-size:13px;color:var(--muted);
  margin:8px 0 32px;
  letter-spacing:.02em;
}
.content-page .lede{
  font-size:17px;line-height:1.55;color:var(--text);
  margin:0 0 24px;
}
.content-page article{color:var(--muted);font-size:16px;line-height:1.7}
.content-page article + article{margin-top:40px}
.content-page h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(22px,3.2vw,28px);
  color:var(--text);
  margin:32px 0 12px;
  letter-spacing:-.01em;line-height:1.2;
}
.content-page h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,2.4vw,22px);
  color:var(--text);
  margin:24px 0 8px;
  letter-spacing:-.005em;line-height:1.3;
}
.content-page h4{
  font-weight:700;
  font-size:16px;
  color:var(--text);
  margin:18px 0 6px;
}
.content-page p{margin:0 0 12px}
.content-page p:last-child{margin-bottom:0}
.content-page strong{color:var(--text)}
.content-page a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.content-page a:hover{color:var(--text)}
.content-page ul,.content-page ol{padding-left:22px;margin:10px 0 14px}
.content-page li{margin-bottom:6px}

.content-page article figure{
  margin:28px 0;
  padding:0;
  text-align:center;
}
.content-page article figure img{
  width:100%;
  max-width:560px;
  height:auto;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  display:block;
  margin:0 auto;
  background:var(--surface);
}
:root[data-skin="minimal"] .content-page article figure img{box-shadow:0 8px 24px rgba(0,0,0,.12)}
.content-page article figure figcaption{
  font-size:13.5px;
  color:var(--muted);
  margin-top:12px;
  font-style:italic;
  max-width:520px;
  margin-left:auto;margin-right:auto;
  line-height:1.5;
}
@media(max-width:780px){
  .content-page article figure{margin:22px 0}
  .content-page article figure img{border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.4)}
}

.content-page .faq details{
  border-top:1px solid var(--line);
  padding:16px 0;
}
.content-page .faq details:last-of-type{border-bottom:1px solid var(--line)}
.content-page .faq summary{
  cursor:pointer;
  font-weight:600;color:var(--text);
  list-style:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-right:4px;font-size:16px;line-height:1.4;
}
.content-page .faq summary::-webkit-details-marker{display:none}
.content-page .faq summary::after{
  content:"+";font-size:20px;color:var(--muted);font-weight:400;
  line-height:1;margin-top:2px;flex:none;
}
.content-page .faq details[open] summary::after{content:"−"}
.content-page .faq details p{margin-top:10px;margin-bottom:0}

.content-page .nextlinks{
  margin-top:36px;padding:18px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;flex-wrap:wrap;gap:14px 22px;
  font-size:14px;
}
.content-page .nextlinks strong{color:var(--text);margin-right:4px}

.variant-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:20px 0 28px;
}
.variant-grid a{
  display:block;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .15s,transform .1s;
}
.variant-grid a:hover{border-color:var(--accent);transform:translateY(-1px);color:inherit}
.variant-grid .v-name{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--text);margin-bottom:4px;line-height:1.2}
.variant-grid .v-meta{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.variant-grid .v-desc{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.variant-grid .soon{opacity:.7}
.variant-grid .soon .v-name::after{content:" · soon";font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:500;font-family:var(--font-ui)}

/* Contact form */
.contact-form{
  display:flex;flex-direction:column;gap:14px;
  margin-top:18px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text)}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:var(--font-ui);font-size:15px;
  padding:11px 13px;
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:9px;
  min-height:44px;
  resize:vertical;
}
.contact-form textarea{min-height:140px}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.contact-form .hp-trap{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.contact-form button{margin-top:6px;min-height:48px}
.contact-form .form-note{font-size:13px;color:var(--muted);margin:0}

/* Playable variant pages: tighter top margin so board is above-fold */
.variant-page .view-solo,
.variant-page .view-tt{padding-top:14px}
.variant-page .hero{padding-top:18px;padding-bottom:0}

/* ============ UTIL ============ */
.hidden{display:none !important}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ============ CHINESE CHECKERS BOARD ============ */
.cn-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:28px;
  max-width:880px;
  margin:8px auto 0;
  align-items:start;
  padding:24px 16px 0;
}
.cn-frame{
  background:var(--frame);
  padding:var(--frame-pad);
  border-radius:calc(var(--frame-pad) + 6px);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
:root[data-skin="minimal"] .cn-frame{box-shadow:0 6px 18px rgba(0,0,0,.08)}
#board-cn{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--board-radius);
  overflow:hidden;
  background:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.cn-hole,.cn-peg,.cn-target{cursor:pointer}
.cn-peg{transition:filter .15s}
.cn-peg:hover{filter:brightness(1.1)}
@media(max-width:780px){
  .cn-wrap{grid-template-columns:1fr;gap:14px;padding:10px 6px 0}
  .cn-frame{padding:6px;border-radius:10px}
}

/* ============ RULES-PDF PAGE ============ */
.rules-pdf-actions{
  display:flex;gap:12px;flex-wrap:wrap;
  margin:18px 0 28px;
}
.rules-pdf-actions .btn{
  flex:0 1 auto;
  padding:12px 22px;
  font-size:14px;
  min-height:46px;
}
.rules-pdf-actions .btn.primary{text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.rules-block-head{margin-top:32px}
.rules-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 26px;
  margin:8px 0 24px;
}
.rules-block h3{
  margin-top:18px;
  margin-bottom:6px;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.rules-block h3:first-child{margin-top:0}
.rules-block p{font-size:15px;line-height:1.6}

/* ============ PRINT STYLESHEET ============ */
@media print{
  :root{
    color-scheme:light;
  }
  html,body{
    background:#fff !important;
    color:#000 !important;
    font-family:'Helvetica',Arial,sans-serif;
  }
  .site-head,
  .site-foot,
  .variant-rail,
  .nextlinks,
  .faq,
  .rules-pdf-actions,
  .head-tools,
  .site-nav,
  script,
  .modal-wrap{
    display:none !important;
  }
  main.content-page{
    max-width:100%;
    margin:0;
    padding:0;
  }
  .content-page .hero h1{
    color:#000 !important;
    font-size:24pt;
    text-align:center;
    margin-bottom:8pt;
  }
  .content-page .last-updated,
  .content-page .lede{
    display:none;
  }
  .content-page article{
    color:#000 !important;
    font-size:11pt;
    line-height:1.45;
  }
  .content-page article h2,
  .content-page article h3{
    color:#000 !important;
    page-break-after:avoid;
    break-after:avoid;
  }
  .content-page article a{color:#000 !important;text-decoration:none}
  .rules-block{
    background:#fff !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
  }
  .rules-block h3{
    text-transform:none;
    letter-spacing:0;
    font-size:13pt;
    margin-top:10pt;
  }
  .rules-block-head{display:none}
  /* Footer credit */
  main.content-page::after{
    content:"Play free, no signup: checkergames.com";
    display:block;
    text-align:center;
    font-weight:600;
    font-size:11pt;
    margin-top:18pt;
    padding-top:8pt;
    border-top:1pt solid #000;
  }
}