:root {
  color-scheme:dark;
  --bg:#111;
  --surface:#1a1e18;
  --line:#3c4637;
  --text:#f8faf2;
  --muted:#bdc7b6;
  --lime:#a3e635;
  --ink:#142009;
  font:18px/1.5 system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); }
button,input,select { font:inherit; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.58; }
:focus-visible { outline:3px solid #d5ff98; outline-offset:3px; }
[hidden] { display:none!important; }
a { color:inherit; }
h1,h2,p { margin:0; }
h1,h2 { letter-spacing:-.055em; line-height:1; }
.wrap { width:min(1100px,calc(100% - 32px)); margin:auto; }
header { border-bottom:1px solid var(--line); }
.header,.hero-inner,.panel-head,.sponsor,.footer { display:flex; align-items:center; justify-content:space-between; gap:13px; }
.header { min-height:66px; }
.brand { display:flex; gap:9px; align-items:center; font-weight:850; letter-spacing:.025em; text-decoration:none; }
.brand span { width:33px; height:33px; display:grid; place-items:center; color:var(--ink); background:var(--lime); border-radius:7px; font-size:25px; line-height:1; }
.back,.footer { color:var(--muted); font-size:.85rem; }
.hero { background:radial-gradient(ellipse at 80% 0%,#2b3c1e,transparent 67%); padding:clamp(26px,5vw,65px) 0 26px; }
.hero h1 { font-size:clamp(3.4rem,9vw,7rem); margin:5px 0 13px; letter-spacing:-.082em; }
.hero h1 span,.eyebrow { color:var(--lime); }
.eyebrow { font:700 .72rem/1.45 ui-monospace,monospace; letter-spacing:.09em; }
.intro,.instructions { color:var(--muted); }
.hero-board { flex:0 0 clamp(70px,20vw,160px); display:grid; grid-template-columns:repeat(2,1fr); border:1px solid #5b704a; border-radius:10px; overflow:hidden; transform:rotate(-7deg); }
.hero-board span { display:grid; place-items:center; aspect-ratio:1; font-size:clamp(1.1rem,4vw,2.7rem); color:var(--lime); background:#22301c; }
.hero-board span:nth-child(2),.hero-board span:nth-child(3) { background:#151d13; }
.game-menu { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:15px; }
.game-card { display:grid; justify-items:start; gap:2px; text-align:left; padding:10px 12px; min-height:104px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:10px; }
.game-card[aria-pressed=true] { border-color:var(--lime); background:#29391e; }
.game-card span { font-size:1.42rem; color:var(--lime); line-height:1.2; }
.game-card small { font-size:.73rem; color:var(--muted); }
.panel { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:clamp(11px,3.4vw,29px); scroll-margin-top:10px; }
.panel h2 { font-size:clamp(1.9rem,5.5vw,3rem); margin-top:4px; }
.panel-head { flex-wrap:wrap; }
.instructions { margin:10px 0 16px; max-width:62ch; }
.button,.number { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:7px 11px; border:1px solid #64715b; border-radius:8px; background:#283124; color:var(--text); font-weight:700; text-decoration:none; }
.button:hover,.number:hover { border-color:var(--lime); }
.primary { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.controls { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:10px; }
.controls label { display:grid; gap:3px; min-width:120px; flex:1; max-width:260px; }
.controls input[type=range] { accent-color:var(--lime); min-height:42px; width:100%; margin:0; }
.status { margin-top:11px; color:#dbffc0; min-height:1.5em; }
.board { display:grid; width:min(100%,440px); border:2px solid #607453; border-radius:5px; overflow:hidden; }
.board.sudoku { grid-template-columns:repeat(9,minmax(0,1fr)); }
.board.checkered { grid-template-columns:repeat(8,minmax(0,1fr)); }
.board button { aspect-ratio:1; min-width:0; border:1px solid #61715c; background:#273324; color:#f6ffe9; padding:0; font:750 clamp(.9rem,5vw,1.55rem)/1 system-ui,sans-serif; }
.board button:hover,.board button:focus-visible { position:relative; z-index:1; }
.board button.given { color:#fff; background:#141c13; }
.board button.box-edge-right { border-right:2px solid #b6c8ae; }
.board button.box-edge-bottom { border-bottom:2px solid #b6c8ae; }
.board button.dark { background:#354832; }
.board button.light { background:#c8d6ba; }
.board button[aria-pressed=true] { box-shadow:inset 0 0 0 3px var(--lime); }
.board button.allowed { box-shadow:inset 0 0 0 3px #ffdf85; }
.board button.error { background:#713c36; }
.board .piece-white { color:#fff; text-shadow:0 1px 2px #070907,0 -1px 2px #070907; }
.board .piece-black { color:#151914; text-shadow:0 1px 2px #fff,0 -1px 2px #fff; }
.board.checkered button { font-size:clamp(1.25rem,6.5vw,2.1rem); }
.sudoku-keys { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; max-width:440px; margin-top:9px; }
.sudoku-keys button { min-width:0; padding:4px; }
.pool { display:block; width:min(100%,640px); height:auto; border:1px solid #789268; border-radius:9px; touch-action:manipulation; }
.sapo-board,.goal { display:grid; border:1px solid #6d865d; border-radius:12px; background:linear-gradient(135deg,#2e4727,#1c2b1a); position:relative; overflow:hidden; max-width:500px; }
.sapo-board { aspect-ratio:1.75; }
.hole,.throw-mark { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; }
.hole { width:14%; aspect-ratio:1; color:#e3ffba; background:#152612; border:2px solid #a1bd7f; font-weight:800; }
.hole.target { background:#4d6024; border-color:#d0ee86; }
.throw-mark { width:14px; height:14px; border:2px solid #111; background:#ffd16b; z-index:1; }
.goal { grid-template-columns:repeat(3,1fr); gap:4px; padding:8px; min-height:140px; }
.goal button { min-height:130px; border:1px dashed #9bb690; background:#35572e; color:#fff; border-radius:6px; font-weight:800; }
.goal button.keeper { border:2px solid #ffd981; background:#684a25; }
.sponsor { flex-wrap:wrap; margin:20px 0 14px; padding:15px 17px; border:1px solid #4d6056; background:#1a2521; border-radius:11px; }
.sponsor .eyebrow { color:#b5d9c8; }
.sponsor strong { font-size:1.25rem; }
.sponsor p:not(.eyebrow) { color:#d1e2d9; font-size:.85rem; }
.footer { padding:17px 0 30px; }
@media(max-width:560px) {
  .game-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-card { min-height:82px; }
  .hero-board { flex-basis:68px; }
  .board button { border-width:1px; }
}

.game-actions { display:flex; gap:7px; flex-wrap:wrap; }
.share-url { width:min(100%,430px); min-height:46px; padding:7px; background:#141814; color:var(--text); border:1px solid #64715b; border-radius:7px; }
.levels { margin-bottom:15px; }
.level-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:12px; }
.level-grid>div { border:1px solid var(--line); border-radius:9px; padding:10px; }
.level-grid p { color:var(--muted); font-size:.83rem; }
.mancala-board { width:min(100%,540px); background:#30291e; border:1px solid #806b4d; border-radius:10px; padding:9px; }
.mancala-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.mancala-row .button { padding:4px; min-width:0; }
.mancala-board .instructions { margin:5px 0; font-size:.8rem; }
.mancala-stores { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.mancala-store,.domino-tile { padding:5px 8px; border:1px solid #6d7b60; border-radius:7px; }
.domino-line { display:flex; flex-wrap:wrap; gap:5px; max-width:600px; padding:9px; background:#162016; border-radius:8px; }
.domino-tile { background:#dde4cd; color:#15210c; font-weight:750; }
.domino-game button[aria-pressed=true] { background:var(--lime); color:var(--ink); }
.board.checkered button:disabled { opacity:1; }
.catalog-title { font-size:1.15rem; margin:1.25rem 0 .65rem; }
.catalog-section { margin:0 0 16px; }
.catalog-section summary { cursor:pointer; padding:14px; border-radius:10px; border:1px solid var(--line); font-weight:750; }
.challenge-prompt { font-size:clamp(1.2rem,5vw,1.8rem); margin:.5rem 0 1rem; }
.challenge-result { margin:.75rem 0; }
.challenge-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:490px; }
.mini-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:min(100%,340px); }
.challenge-grid .button,.mini-board .button { min-width:0; min-height:48px; padding:6px; }
.mini-board .button { aspect-ratio:1; }
.challenge-grid button[aria-pressed=true],.mini-board button[aria-pressed=true] { color:#111; background:var(--lime); }