:root{
  --bg:#E9EEF5; --surface:#F7F9FC; --ink:#1E2836; --muted:#5B6878; --line:rgba(30,40,54,.18);
  --cat:#2A3446; --bad:#D6455D; --good:#2F8F6B; --accent:#3B5BDB;
  --r0:#F4AFAF; --r1:#F7D27E; --r2:#B5E0A0; --r3:#96D2E6; --r4:#C6B4F0;
  --r5:#F3BEDF; --r6:#FFB38A; --r7:#9FE2CC; --r8:#D9D29C; --r9:#AFC0F2;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141A24; --surface:#1D2533; --ink:#E7ECF4; --muted:#9AA6B8; --line:rgba(231,236,244,.18);
    --bad:#FF6B81; --good:#5CD3A2; --accent:#8EA6FF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141A24; --surface:#1D2533; --ink:#E7ECF4; --muted:#9AA6B8; --line:rgba(231,236,244,.18);
  --bad:#FF6B81; --good:#5CD3A2; --accent:#8EA6FF; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.45;
  -webkit-tap-highlight-color:transparent}
main{max-width:560px;margin:0 auto;padding:18px 16px 40px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
h1{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:2.4rem;line-height:1;margin:0;letter-spacing:-.02em}
.tag{color:var(--muted);font-size:.95rem;margin:6px 0 16px}
.seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:3px;border:1px solid var(--line)}
.seg button{font:inherit;font-size:.9rem;border:0;background:transparent;color:var(--muted);padding:6px 11px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:600}
.rowbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.status{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 10px;font-family:"Baloo 2",system-ui,sans-serif;font-size:1.15rem}
.lives{display:flex;gap:4px}
.lives svg{width:24px;height:24px}
.lives .lost path{fill:none;stroke:var(--muted);stroke-width:2}
.plabel{color:var(--muted);font-size:1rem}
.board-wrap{position:relative}
.board{display:grid;width:100%;aspect-ratio:1;border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;background:var(--ink)}
.cell{appearance:none;border:0 solid var(--ink);margin:0;padding:0;position:relative;cursor:pointer;
  display:grid;place-items:center;color:#1E2836;outline:none}
.cell:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}
.cell .x{width:26%;height:26%;opacity:.55}
.cell .cat{width:84%;height:84%;object-fit:cover;border-radius:24%;box-shadow:0 0 0 2px rgba(30,40,54,.55);pointer-events:none;display:block}
.cell.pop .cat{animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.5)}to{transform:scale(1)}}
.cell.wrong{animation:shake .35s}
.cell.wrong::after{content:"";position:absolute;inset:0;background:var(--bad);opacity:.45}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.cell.conflict::after{content:"";position:absolute;inset:3px;border:3px solid var(--bad);border-radius:6px}
.cell.hinted::after{content:"";position:absolute;inset:3px;border:3px solid var(--good);border-radius:6px}
.won .cell .cat{animation:nap 1.6s ease-in-out infinite}
@keyframes nap{50%{transform:translateY(-6%) scale(1.04)}}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.tools button,.btn{font:inherit;font-weight:600;font-size:.95rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:11px 6px;border-radius:12px;cursor:pointer}
.tools button:active,.btn:active{transform:translateY(1px)}
.tools button:focus-visible,.btn:focus-visible,.seg button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opts{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;color:var(--muted);font-size:.95rem}
.opts label{display:flex;align-items:center;gap:8px;cursor:pointer}
.opts input{width:18px;height:18px;accent-color:var(--ink)}
details{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
summary{cursor:pointer;font-weight:600}
details p,details li{color:var(--muted);font-size:.95rem;max-width:64ch}
details ul{padding-left:18px;margin:8px 0}
.stats{margin-top:10px;color:var(--muted);font-size:.9rem}
.overlay{position:absolute;inset:0;display:none;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);
  border-radius:10px;backdrop-filter:blur(2px)}
.overlay.show{display:grid}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-align:center;max-width:300px;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.card h2{font-family:"Baloo 2",system-ui,sans-serif;font-size:1.7rem;margin:0 0 4px}
.card p{margin:0 0 14px;color:var(--muted)}
.card .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.card .btn{padding:10px 14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;z-index:10;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.studio{display:block;color:var(--muted);font-size:.9rem;font-weight:600;text-decoration:none;margin-bottom:10px}
.studio:hover{color:var(--ink);text-decoration:underline}
a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.site-foot{max-width:560px;margin:0 auto;padding:0 16px 32px;color:var(--muted);font-size:.85rem}
.site-foot a{color:inherit}
.get-app{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.95rem;margin:-6px 0 16px}
.get-app .btn{text-decoration:none;display:inline-block}