:root{--bg:#ffffff;--bg2:#f7f7f8;--ink:#16181d;--mut:#5c6270;--line:rgba(0,0,0,.10);--acc:#002FA7}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;-webkit-tap-highlight-color:transparent}
.wrap{max-width:560px;margin:0 auto;padding:14px 14px 40px}
header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
header h1{font-size:1.35rem;letter-spacing:-.01em}
header h1 a{color:inherit;text-decoration:none}
.meta{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;color:var(--mut);font-variant-numeric:tabular-nums}
#timer{font-weight:600;color:var(--ink)}
#grid{display:grid;gap:6px;margin:0 auto;max-width:440px}
.cell{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--bg2);font-size:clamp(20px,7vw,34px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .06s}
.cell:active{transform:scale(.94)}
.cell.given{border-width:2px;border-color:rgba(0,0,0,.28)}
.cell.sel{outline:3px solid var(--acc);outline-offset:1px}
.cell.bad{box-shadow:inset 0 0 0 3px #C8102E}
#palette{display:grid;gap:5px;margin:14px auto 0;max-width:440px}
.pal{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;font-size:clamp(16px,5vw,24px);cursor:pointer}
.pal.used{opacity:.22;filter:grayscale(.6)}
.bar{display:flex;gap:8px;justify-content:center;margin:14px 0}
.btn{border:1px solid var(--line);background:var(--bg2);border-radius:9px;padding:9px 16px;font-size:.95rem;cursor:pointer;color:var(--ink);text-decoration:none}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
#win{border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0;text-align:center;background:var(--bg2)}
#win h2{font-size:1.2rem;margin-bottom:6px}
#win p{color:var(--mut);margin:4px 0}
.rules{border-top:1px solid var(--line);margin-top:22px;padding-top:14px;color:var(--mut);font-size:.92rem}
.rules h2{font-size:1rem;color:var(--ink);margin-bottom:6px}
.rules li{margin:4px 0 4px 18px}
.modes{margin:10px 0;font-size:.92rem;color:var(--mut)}
.modes a{color:var(--acc)}
footer{border-top:1px solid var(--line);margin-top:26px;padding-top:12px;font-size:.85rem;color:var(--mut)}
footer a{color:var(--acc)}
.subline{margin-top:8px}
.embed header,.embed .rules,.embed footer,.embed .modes,.embed .subline,.embed .gamesnav{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#101216;--bg2:#1a1d23;--ink:#e8eaf0;--mut:#9aa1b0;--line:rgba(255,255,255,.14);--acc:#7aa2ff}
  .cell.given{border-color:rgba(255,255,255,.4)}
}
/* tap feedback (all contexts) + portal stuck-nudge pulse */
#grid button.cell:active{transform:scale(.92);transition:transform .08s}
@keyframes glnudge{0%,100%{box-shadow:0 0 0 0 rgba(0,47,167,0)}50%{box-shadow:0 0 0 6px rgba(0,47,167,.35)}}
.nudge{animation:glnudge 1s ease-in-out 5}

.cell.pop{animation:glpop .2s ease}
@keyframes glpop{0%{transform:scale(.6)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.cell.pop{animation:none}}

/* Star Battle regions must actually be OUTLINED (2026-08-27).
   The shared grid style — gap:6px + border-radius:10px — renders the board as
   100 detached lozenges, so the per-cell region rims never join into a line and
   region identity fell entirely to fill colour. Two palette pairs sat at
   dE76 2.16 and 2.42 (below the just-noticeable difference), and 345 of the 450
   baked dailies — today's included — put such a pair physically adjacent. On a
   board where "two stars per region" IS the rule, that made 77% of dailies
   unreadable: verified by rendering the live board. The itch.io cohort is the
   only source of real players this site has, and this is the board they meet.
   Scoped to #grid.sb: the other ten games have no coloured regions. */
#grid.sb{gap:0;max-width:460px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.30)}
#grid.sb .cell{border:0;border-radius:0}
/* .bad ships as an inset box-shadow, and the engine now writes box-shadow
   inline to draw the region lines — an outline cannot be overwritten by it. */
#grid.sb .cell.bad{outline:3px solid #C8102E;outline-offset:-3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #grid.sb{box-shadow:0 0 0 2px rgba(255,255,255,.28)}}
#grid.sb .cell.st{color:#ffd84d;text-shadow:0 0 8px rgba(255,216,77,.45),0 1px 2px rgba(0,0,0,.5)}
#grid.sb .cell.mk{color:rgba(255,255,255,.9);font-size:.8em;text-shadow:0 1px 2px rgba(0,0,0,.45)}
@media(hover:hover){#grid.sb .cell:hover{filter:brightness(1.18)}}
.cg #chbtn,.cg .subline{display:none!important}