/* Ninefold: a typography-led sudoku. Paper (light) and Ink (dark) follow the system or the store's setting;
   premium themes set [data-nf-theme]. Every colour is a token, so themes only redefine tokens. */
:root{
  --serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#f3eee4;--bg2:#ebe4d6;--card:#fbf8f2;--card2:#f6f1e7;--line:rgba(48,36,22,.12);--ink:#1d1914;--sub:#6e655a;--faint:#a39a8d;
  --accent:#c4492b;--accent-2:#e0663f;--accent-ink:#fff;--accent-soft:rgba(196,73,43,.12);--gold:#b8892a;
  --b-bg:#fffdf8;--b-line:#e5ddcf;--b-strong:#2b241c;--given:#1d1914;--pen:#2c4f9f;--note:#7d7366;
  --sel:#f7d9a6;--peer:#f4ede1;--same:#f2c98a;--same-note:#c4492b;--conflict:#d2362a;--conflict-bg:rgba(210,54,42,.12);
  --hl-house:rgba(44,79,159,.09);--hl-cell:#2c4f9f;--hl-elim:#d2362a;--hl-key:#1f8a4c;--cage:rgba(43,36,28,.55);--cage-sum:#3b3127;
  --shadow:0 1px 2px rgba(40,28,14,.06),0 8px 28px rgba(40,28,14,.08);--shadow-lg:0 24px 60px rgba(40,28,14,.22);
  --radius:18px;--tile-1:#efe6d6;--tile-ink:#3b3127;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-nf-theme]){
  --bg:#111215;--bg2:#17191d;--card:#1a1c21;--card2:#202228;--line:rgba(255,255,255,.08);--ink:#ede7dc;--sub:#a29b90;--faint:#6d675f;
  --accent:#ff7a59;--accent-2:#ff9a7a;--accent-ink:#1a0d08;--accent-soft:rgba(255,122,89,.14);--gold:#e7bf63;
  --b-bg:#1b1d22;--b-line:#2c2f37;--b-strong:#8a8378;--given:#efe9de;--pen:#93b6ff;--note:#9a948a;
  --sel:#4b3b20;--peer:#22252b;--same:#5a4321;--same-note:#ff9a7a;--conflict:#ff6b5e;--conflict-bg:rgba(255,107,94,.16);
  --hl-house:rgba(147,182,255,.10);--hl-cell:#93b6ff;--hl-elim:#ff6b5e;--hl-key:#5fd28f;--cage:rgba(237,231,220,.5);--cage-sum:#d9d1c4;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --tile-1:#2a2c33;--tile-ink:#ede7dc;color-scheme:dark;
}}
:root[data-theme="dark"]:not([data-nf-theme]){
  --bg:#111215;--bg2:#17191d;--card:#1a1c21;--card2:#202228;--line:rgba(255,255,255,.08);--ink:#ede7dc;--sub:#a29b90;--faint:#6d675f;
  --accent:#ff7a59;--accent-2:#ff9a7a;--accent-ink:#1a0d08;--accent-soft:rgba(255,122,89,.14);--gold:#e7bf63;
  --b-bg:#1b1d22;--b-line:#2c2f37;--b-strong:#8a8378;--given:#efe9de;--pen:#93b6ff;--note:#9a948a;
  --sel:#4b3b20;--peer:#22252b;--same:#5a4321;--same-note:#ff9a7a;--conflict:#ff6b5e;--conflict-bg:rgba(255,107,94,.16);
  --hl-house:rgba(147,182,255,.10);--hl-cell:#93b6ff;--hl-elim:#ff6b5e;--hl-key:#5fd28f;--cage:rgba(237,231,220,.5);--cage-sum:#d9d1c4;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --tile-1:#2a2c33;--tile-ink:#ede7dc;color-scheme:dark;
}
/* High contrast (free: accessibility is never paywalled) */
:root[data-nf-theme="contrast"]{--bg:#fff;--bg2:#f2f2f2;--card:#fff;--card2:#f4f4f4;--line:rgba(0,0,0,.35);--ink:#000;--sub:#222;--faint:#555;--accent:#0040c0;--accent-2:#0050e0;--accent-ink:#fff;--accent-soft:rgba(0,64,192,.12);--gold:#7a5200;
  --b-bg:#fff;--b-line:#777;--b-strong:#000;--given:#000;--pen:#0040c0;--note:#222;--sel:#ffe24d;--peer:#e9e9e9;--same:#ffd000;--same-note:#0040c0;--conflict:#c00000;--conflict-bg:rgba(192,0,0,.15);
  --hl-house:rgba(0,64,192,.12);--hl-cell:#0040c0;--hl-elim:#c00000;--hl-key:#006b2b;--cage:#000;--cage-sum:#000;--tile-1:#eee;--tile-ink:#000;color-scheme:light}
/* Pro themes */
:root[data-nf-theme="sage"]{--bg:#e9eee6;--bg2:#dfe7db;--card:#f6f8f3;--card2:#eef3ea;--line:rgba(30,50,30,.12);--ink:#1c2a1f;--sub:#5d6d5f;--faint:#94a395;--accent:#3f7a52;--accent-2:#5c9a6e;--accent-ink:#fff;--accent-soft:rgba(63,122,82,.12);--gold:#8a7a2a;
  --b-bg:#fbfdf9;--b-line:#d6e0d3;--b-strong:#22352a;--given:#1c2a1f;--pen:#3f6aa0;--note:#62735f;--sel:#d5e8c7;--peer:#eef3e9;--same:#bcdca8;--same-note:#3f7a52;--conflict:#c2402e;--conflict-bg:rgba(194,64,46,.12);
  --hl-house:rgba(63,106,160,.09);--hl-cell:#3f6aa0;--hl-elim:#c2402e;--hl-key:#2d7a44;--cage:rgba(34,53,42,.5);--cage-sum:#22352a;--tile-1:#dfe8d9;--tile-ink:#22352a;color-scheme:light}
:root[data-nf-theme="blueprint"]{--bg:#0d2a4d;--bg2:#103259;--card:#123762;--card2:#16406f;--line:rgba(200,225,255,.14);--ink:#eaf3ff;--sub:#a9c3e3;--faint:#6f8fb5;--accent:#ffd166;--accent-2:#ffe08f;--accent-ink:#1a2a40;--accent-soft:rgba(255,209,102,.16);--gold:#ffd166;
  --b-bg:#0f3157;--b-line:rgba(200,225,255,.18);--b-strong:#cfe4ff;--given:#ffffff;--pen:#ffd166;--note:#a9c3e3;--sel:#1d5a96;--peer:#133b68;--same:#245f97;--same-note:#ffd166;--conflict:#ff7b7b;--conflict-bg:rgba(255,123,123,.18);
  --hl-house:rgba(255,209,102,.10);--hl-cell:#ffd166;--hl-elim:#ff7b7b;--hl-key:#7fffb0;--cage:rgba(207,228,255,.6);--cage-sum:#eaf3ff;--tile-1:#16406f;--tile-ink:#eaf3ff;color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3)}
:root[data-nf-theme="terracotta"]{--bg:#efe0d2;--bg2:#e8d3c1;--card:#f8eee5;--card2:#f2e4d8;--line:rgba(80,40,20,.13);--ink:#3a2016;--sub:#7f5a48;--faint:#b08c79;--accent:#b5482a;--accent-2:#cf6a45;--accent-ink:#fff;--accent-soft:rgba(181,72,42,.13);--gold:#9a6a1c;
  --b-bg:#fbf4ec;--b-line:#e6d2c1;--b-strong:#4a2a1c;--given:#3a2016;--pen:#2f6b6b;--note:#87624f;--sel:#f3c7a4;--peer:#f4e7db;--same:#eab48c;--same-note:#b5482a;--conflict:#c0261b;--conflict-bg:rgba(192,38,27,.12);
  --hl-house:rgba(47,107,107,.1);--hl-cell:#2f6b6b;--hl-elim:#c0261b;--hl-key:#2f7a3c;--cage:rgba(74,42,28,.55);--cage-sum:#4a2a1c;--tile-1:#ecd8c6;--tile-ink:#4a2a1c;color-scheme:light}
:root[data-nf-theme="midnight"]{--bg:#09090b;--bg2:#101013;--card:#141418;--card2:#1a1a1f;--line:rgba(231,191,99,.14);--ink:#f3ead6;--sub:#b3a88f;--faint:#6d6655;--accent:#e7bf63;--accent-2:#f3d48a;--accent-ink:#1a1408;--accent-soft:rgba(231,191,99,.14);--gold:#e7bf63;
  --b-bg:#121216;--b-line:#26252a;--b-strong:#a68a4c;--given:#f3ead6;--pen:#e7bf63;--note:#a59a80;--sel:#3a301a;--peer:#1a1a1f;--same:#4a3c1c;--same-note:#f3d48a;--conflict:#ff6b5e;--conflict-bg:rgba(255,107,94,.16);
  --hl-house:rgba(231,191,99,.08);--hl-cell:#e7bf63;--hl-elim:#ff6b5e;--hl-key:#7fdc9f;--cage:rgba(231,191,99,.55);--cage-sum:#f3d48a;--tile-1:#1d1c21;--tile-ink:#f3ead6;color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5)}
:root[data-nf-theme="rose"]{--bg:#f6e9ea;--bg2:#f0dcde;--card:#fdf6f6;--card2:#f8ecee;--line:rgba(90,30,45,.11);--ink:#3a1a24;--sub:#80596a;--faint:#b897a3;--accent:#c2426b;--accent-2:#d9668b;--accent-ink:#fff;--accent-soft:rgba(194,66,107,.12);--gold:#a5732a;
  --b-bg:#fffafa;--b-line:#efd9dd;--b-strong:#4b2230;--given:#3a1a24;--pen:#6a4bb0;--note:#88606f;--sel:#f6cdd8;--peer:#f8ecee;--same:#efb3c4;--same-note:#c2426b;--conflict:#c72c2c;--conflict-bg:rgba(199,44,44,.12);
  --hl-house:rgba(106,75,176,.09);--hl-cell:#6a4bb0;--hl-elim:#c72c2c;--hl-key:#2f8a55;--cage:rgba(75,34,48,.5);--cage-sum:#4b2230;--tile-1:#f3dde2;--tile-ink:#4b2230;color-scheme:light}
:root[data-nf-theme="graphite"]{--bg:#26282c;--bg2:#2c2f34;--card:#303338;--card2:#363a40;--line:rgba(255,255,255,.09);--ink:#f1f1ee;--sub:#b4b5b0;--faint:#7d7f7c;--accent:#7fd1c7;--accent-2:#a0e2da;--accent-ink:#0e2421;--accent-soft:rgba(127,209,199,.14);--gold:#e2c46e;
  --b-bg:#2f3237;--b-line:#3f434a;--b-strong:#c9cbc6;--given:#f6f6f2;--pen:#7fd1c7;--note:#b0b2ad;--sel:#3f5a57;--peer:#353940;--same:#46625e;--same-note:#a0e2da;--conflict:#ff8a7a;--conflict-bg:rgba(255,138,122,.16);
  --hl-house:rgba(127,209,199,.08);--hl-cell:#7fd1c7;--hl-elim:#ff8a7a;--hl-key:#9be58f;--cage:rgba(241,241,238,.5);--cage-sum:#f1f1ee;--tile-1:#363a40;--tile-ink:#f1f1ee;color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;transition:background-color .3s}
button{font:inherit;color:inherit}
a{color:var(--accent)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.app{min-height:100dvh}
.view{min-height:100dvh}
html.yz-taxi body{padding-top:calc(58px + env(safe-area-inset-top))}
html.yz-taxi .view{min-height:calc(100dvh - 58px - env(safe-area-inset-top))}

/* ---------- buttons, cards ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:12px 20px;font-weight:700;font-size:.98rem;cursor:pointer;touch-action:manipulation;transition:transform .12s,background-color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 60%,#000),0 6px 16px var(--accent-soft)}
.btn.ghost{background:var(--accent-soft);color:var(--accent)}
.btn.sm{padding:8px 14px;font-size:.88rem}
.btn em{font-style:normal;opacity:.7;font-weight:600}
.link-btn{background:none;border:0;color:var(--sub);font-weight:600;cursor:pointer;padding:10px;text-decoration:underline;text-underline-offset:3px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--ink);touch-action:manipulation;flex:none}
.icon-btn:active{background:var(--accent-soft)}
.icon-btn svg,.tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg .fillc{fill:currentColor;stroke:none}
.eyebrow{font:800 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.chev{font-size:1.6rem;line-height:1;color:var(--faint);margin-left:auto}

/* ---------- home ---------- */
.home{overflow-y:auto;height:100dvh;-webkit-overflow-scrolling:touch}
html.yz-taxi .home{height:calc(100dvh - 58px - env(safe-area-inset-top))}
.hbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:2px;padding:calc(env(safe-area-inset-top) + 6px) max(10px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.back-store{font-weight:700;text-decoration:none;color:var(--ink);padding:8px 4px}
.grow{flex:1}
.home-in{max-width:560px;margin:0 auto;padding:4px 16px calc(40px + env(safe-area-inset-bottom))}
.hero{text-align:center;padding:14px 0 18px}
.wordmark{font:600 clamp(3rem,15vw,4.4rem)/.95 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.035em;margin:0;color:var(--ink)}
.wordmark i{font-style:italic;font-weight:400;color:var(--accent)}
.tagline{margin:8px 0 0;font:italic 400 1.12rem/1.3 var(--serif);color:var(--sub)}
.continue{margin-bottom:12px}
.cont-btn{width:100%;display:flex;align-items:center;gap:14px;padding:12px 14px;text-align:left;cursor:pointer}
.cont-txt{display:flex;flex-direction:column;gap:1px}.cont-txt small{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cont-txt b{font:600 1.25rem/1.15 var(--serif)}.cont-txt span{color:var(--sub);font-size:.88rem;font-variant-numeric:tabular-nums}
.mini{width:58px;height:58px;flex:none;border-radius:10px;display:grid;grid-template-columns:repeat(9,1fr);gap:1px;padding:3px;background:var(--b-line);overflow:hidden}
.mini i{background:var(--b-bg);border-radius:1px}.mini i.g{background:var(--given)}.mini i.u{background:var(--pen);opacity:.75}
.daily{padding:18px 18px 16px;margin-bottom:22px;position:relative;overflow:hidden}
.daily::before{content:"";position:absolute;right:-60px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);pointer-events:none}
.d-top{display:flex;align-items:center;gap:8px}.d-date{margin-left:auto;font-size:.85rem;color:var(--sub);font-weight:600}
.d-title{margin:8px 0 2px;font:600 2rem/1.05 var(--serif);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.d-streak{font:700 .85rem/1 var(--sans);color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);padding:5px 9px;border-radius:999px}
.d-sub{margin:0 0 12px;color:var(--sub);font-size:.95rem}
.d-week{display:flex;gap:6px;margin:0 0 14px}
.d-week span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;font-weight:700;color:var(--faint)}
.d-week i{width:100%;max-width:34px;aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--line);display:grid;place-items:center;font-style:normal;font-size:.8rem;color:var(--accent)}
.d-week .done i{background:var(--accent);border:0;color:var(--accent-ink)}
.d-week .today i{border:2px solid var(--accent)}
.d-week .today{color:var(--ink)}
.d-actions{display:flex;gap:8px}.d-actions .primary{flex:1}
.sec-title{font:800 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin:0 4px 10px}
.lv-list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px}
.lv{display:flex;align-items:center;gap:14px;padding:13px 16px;border:0;background:none;text-align:left;cursor:pointer;border-top:1px solid var(--line);touch-action:manipulation;transition:background-color .15s}
.lv:first-child{border-top:0}
.lv:active{background:var(--accent-soft)}
.lv-pips{display:flex;gap:3px;flex:none;width:44px}
.lv-pips i{width:6px;height:18px;border-radius:3px;background:var(--line)}
.lv-pips i.on{background:var(--accent)}
.lv-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.lv-txt b{font:600 1.2rem/1.2 var(--serif)}
.lv-txt span{font-size:.82rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-best{font-size:.8rem;color:var(--sub);font-variant-numeric:tabular-nums;text-align:right;flex:none}
.pro-tag,.free-tag{flex:none;font:800 .66rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:linear-gradient(135deg,#f7d774,#c9952b);color:#3a2700}
.free-tag{background:var(--accent-soft);color:var(--accent);letter-spacing:.02em;text-transform:none;font-size:.74rem}
.free-tag:empty{display:none}
html.nf-pro .pro-tag{display:none}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.more-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;text-align:left;cursor:pointer;position:relative;touch-action:manipulation;transition:transform .12s}
.more-card:active{transform:scale(.98)}
.more-card .pro-tag,.more-card .free-tag{position:absolute;top:12px;right:12px}
.mc-art{width:64px;height:64px;display:block}
.mc-art svg{width:100%;height:100%}
.mc-bg{fill:var(--b-bg);stroke:var(--b-strong);stroke-width:2}
.mc-cage{fill:none;stroke:var(--cage);stroke-width:1.6;stroke-dasharray:3 3}
.mc-art text{font:700 8px var(--sans);fill:var(--cage-sum)}
.tf-art{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg2)}
.tf-art i{display:grid;place-items:center;font:600 1rem/1 var(--serif);font-style:normal;border-radius:7px;background:var(--tile-1);color:var(--tile-ink)}
.tf-art i.b{background:color-mix(in srgb,var(--accent) 55%,var(--tile-1));color:#fff}.tf-art i.c{background:var(--accent);color:var(--accent-ink);font-size:.85rem}
.mc-txt{display:flex;flex-direction:column;gap:2px}.mc-txt b{font:600 1.1rem/1.2 var(--serif)}.mc-txt span{font-size:.82rem;color:var(--sub);line-height:1.3}
.learn-row{margin-bottom:28px}
.learn-btn{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left;cursor:pointer}
.learn-btn>span:nth-child(2){display:flex;flex-direction:column}.learn-btn b{font:600 1.1rem/1.2 var(--serif)}.learn-btn span span{font-size:.84rem;color:var(--sub)}
.lb-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:italic 600 1.3rem/1 var(--serif)}
.seo{color:var(--sub);font-size:.95rem;border-top:1px solid var(--line);padding-top:18px}
.seo h2{font:600 1.35rem/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.seo h3{font:600 1.08rem/1.2 var(--serif);color:var(--ink);margin:18px 0 6px}
.seo ul{padding-left:20px;margin:0}.seo b{color:var(--ink)}
.seo .foot{margin-top:22px;font-size:.85rem}

/* ---------- game ---------- */
.game{display:flex;flex-direction:column;height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.yz-taxi .game{height:calc(100dvh - 58px - env(safe-area-inset-top))}
.gbar{display:flex;align-items:center;gap:4px;padding:calc(env(safe-area-inset-top) + 4px) max(8px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left));flex:none}
.g-title{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15}
.g-title b{font:600 1.15rem/1.2 var(--serif)}
.g-title span{font-size:.75rem;color:var(--sub);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.timer{display:flex;align-items:center;gap:4px;border:0;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 10px 7px 12px;font:600 .95rem/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;min-width:78px;justify-content:center;touch-action:manipulation}
.timer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;opacity:.6}
html.nf-hide-timer .timer #gTime{display:none}
.g-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;min-height:0;--bs:min(calc(100vw - 24px),calc(100dvh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),600px)}
html.yz-taxi .g-main{--bs:min(calc(100vw - 24px),calc(100dvh - 388px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),600px)}
.board-wrap{position:relative;width:var(--bs);height:var(--bs);flex:none;margin-top:6px;--cs:calc((var(--bs) - 10px) / 9)}
.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:2px;background:var(--b-strong);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;touch-action:manipulation}
.box{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;background:var(--b-line)}
.board .box:nth-child(1){border-top-left-radius:12px;overflow:hidden}.board .box:nth-child(3){border-top-right-radius:12px;overflow:hidden}
.board .box:nth-child(7){border-bottom-left-radius:12px;overflow:hidden}.board .box:nth-child(9){border-bottom-right-radius:12px;overflow:hidden}
.cell{position:relative;background:var(--b-bg);display:grid;place-items:center;cursor:pointer;transition:background-color .14s;outline:none;overflow:hidden}
.cell.peer{background:var(--peer)}
.cell.same{background:var(--same)}
.cell.sel{background:var(--sel)}
.cell:focus-visible{box-shadow:inset 0 0 0 2.5px var(--accent)}
.cell .v{font:500 calc(var(--cs) * .64)/1 var(--serif);font-variation-settings:"opsz" 48;color:var(--pen);font-variant-numeric:lining-nums;pointer-events:none;position:relative;z-index:2}
.cell.given .v{font-weight:620;color:var(--given)}
.cell.same .v{font-weight:700}
.cell.bad .v{color:var(--conflict)}
.cell.bad{background:var(--conflict-bg)}
.cell.given.bad{background:var(--b-bg);box-shadow:inset 0 -3px 0 var(--conflict)}
.cell .nt{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none;z-index:2}
.cell .nt i{font:600 calc(var(--cs) * .25)/1 var(--sans);font-style:normal;color:var(--note);display:grid;place-items:center;font-variant-numeric:tabular-nums;border-radius:4px}
.cell .nt i.hi{color:var(--same-note);font-weight:800}
.cell .nt i.x{color:var(--hl-elim);text-decoration:line-through;text-decoration-thickness:2px}
.cell .nt i.k{color:#fff;background:var(--hl-key)}
.killer .cell .nt{inset:calc(var(--cs) * .22) 2px 2px}
.killer .cell .nt i{font-size:calc(var(--cs) * .21)}
.cell .cs{position:absolute;left:3px;top:2px;font:700 calc(var(--cs) * .21)/1 var(--sans);color:var(--cage-sum);z-index:3;pointer-events:none;background:var(--b-bg);padding:0 1px;border-radius:2px;font-variant-numeric:tabular-nums}
.cell.peer .cs{background:var(--peer)}.cell.same .cs{background:var(--same)}.cell.sel .cs{background:var(--sel)}
.cell.h-house{background:color-mix(in srgb,var(--hl-cell) 12%,var(--b-bg))}
.cell.h-cell{box-shadow:inset 0 0 0 2.5px var(--hl-cell)}
.cell.h-target{box-shadow:inset 0 0 0 3px var(--hl-key);background:color-mix(in srgb,var(--hl-key) 14%,var(--b-bg))}
.cell.h-colA{background:color-mix(in srgb,#3f8cff 22%,var(--b-bg))}.cell.h-colB{background:color-mix(in srgb,#ffb03f 26%,var(--b-bg))}
.cell .ghost{position:absolute;inset:0;display:grid;place-items:center;font:500 calc(var(--cs) * .64)/1 var(--serif);color:var(--hl-key);opacity:.55;z-index:2;pointer-events:none;animation:ghost 1.3s ease-in-out infinite}
@keyframes ghost{50%{opacity:.25}}
.cages{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.cages path{fill:none;stroke:var(--cage);stroke-width:1.3;stroke-dasharray:3.2 2.6;stroke-linecap:round}
/* entry animations */
.cell .v.pop{animation:pop .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.3);opacity:0;filter:blur(3px)}60%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
.cell .nt i.pop{animation:npop .22s ease-out}
@keyframes npop{from{transform:scale(.2);opacity:0}}
.cell.shake .v{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.cell.sweep::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--accent) 34%,transparent) 50%,transparent 70%);background-size:300% 100%;animation:sweep .7s ease-out both;animation-delay:calc(var(--k) * 40ms)}
@keyframes sweep{from{background-position:100% 0;opacity:1}to{background-position:0 0;opacity:0}}
.cell.digitdone .v{animation:dd .6s ease-out both;animation-delay:calc(var(--k) * 35ms)}
@keyframes dd{40%{transform:scale(1.22);color:var(--accent)}}
.board.won .cell{animation:wave .9s ease-out both;animation-delay:calc(var(--d) * 45ms)}
@keyframes wave{0%{transform:scale(1)}30%{transform:scale(.86);background:var(--accent);}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.board.won .cell .v{animation:wavev .9s ease-out both;animation-delay:calc(var(--d) * 45ms)}
@keyframes wavev{30%{color:var(--accent-ink)}}
.paused{position:absolute;inset:0;z-index:6;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--b-bg) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.paused b{font:italic 500 2.2rem/1 var(--serif)}
.side{width:100%;max-width:600px;display:flex;flex-direction:column;gap:10px;flex:none;position:relative}
.g-info{display:none}
.g-prog{height:3px;margin:0 16px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}
.g-prog i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .4s cubic-bezier(.2,.9,.3,1)}
.hint-panel,.tip{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;animation:rise .26s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rise{from{transform:translateY(12px);opacity:0}}
.side .hint-panel{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:7;max-height:46dvh;overflow:auto}
.side .tip{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:6;display:flex;gap:8px;align-items:flex-start}
.tip p{margin:0;font-size:.92rem;flex:1}
.hp-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hp-chip{font:700 .82rem/1 var(--sans);padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.hp-lv{font-size:.75rem;color:var(--sub);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.hp-x{margin-left:auto;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--sub)}
.hp-text{margin:0 0 10px;font-size:.96rem;line-height:1.45}
.hp-actions{display:flex;gap:8px;justify-content:flex-end}
.tools{display:flex;justify-content:space-between;gap:4px}
.tool{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;border-radius:14px;padding:6px 2px;cursor:pointer;position:relative;color:var(--ink);font-size:.74rem;font-weight:600;touch-action:manipulation;transition:background-color .15s,color .15s}
.tool:active{background:var(--accent-soft)}
.tool[disabled]{opacity:.35;cursor:default}
.tool svg{width:24px;height:24px}
.tool[aria-pressed="true"]{color:var(--accent)}
.tool-badge{position:absolute;top:1px;left:calc(50% + 8px);font:800 .62rem/1 var(--sans);font-style:normal;padding:3px 5px;border-radius:999px;background:var(--line);color:var(--sub)}
.tool[aria-pressed="true"] .tool-badge{background:var(--accent);color:var(--accent-ink)}
#hintBadge{background:var(--accent);color:var(--accent-ink)}
#hintBadge.inf{background:linear-gradient(135deg,#f7d774,#c9952b);color:#3a2700}
.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.key{position:relative;border:0;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 0 var(--line);height:clamp(54px,8.2dvh,66px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;touch-action:manipulation;transition:transform .1s,background-color .15s,opacity .2s;color:var(--pen)}
.key b{font:500 1.75rem/1 var(--serif);font-variation-settings:"opsz" 36}
.key small{font-size:.62rem;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.key:active{transform:scale(.93);background:var(--accent-soft)}
.key.done{opacity:.28}
.key.lock{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.key.lock small{color:var(--accent-ink);opacity:.75}
.notes-on .key b{font:italic 400 1.45rem/1 var(--serif);color:var(--note)}
.key.bump b{animation:pop .3s cubic-bezier(.2,1.6,.4,1)}

/* desktop and landscape: board left, controls right */
@media (min-width:760px) and (min-aspect-ratio:1/1){
  .g-main{flex-direction:row;justify-content:center;align-items:center;gap:clamp(24px,4vw,56px);--bs:min(calc(100dvh - 96px - env(safe-area-inset-top)),calc(100vw - 420px),680px);padding:8px 24px 24px}
  html.yz-taxi .g-main{--bs:min(calc(100dvh - 154px - env(safe-area-inset-top)),calc(100vw - 420px),680px)}
  .side{width:min(340px,40vw);gap:14px}
  .g-info{display:flex;justify-content:space-between;align-items:baseline;font:600 1.6rem/1 var(--serif)}
  .g-info span:last-child{font:600 1rem/1 var(--sans);color:var(--sub);font-variant-numeric:tabular-nums}
  .pad{grid-template-columns:repeat(3,1fr);gap:8px}
  .key{height:auto;aspect-ratio:1.15;border-radius:16px}
  .key b{font-size:2.3rem}
  .key small{font-size:.72rem}
  .side .hint-panel,.side .tip{position:static;max-height:none}
  .side{order:2}
}
@media (max-height:700px) and (max-aspect-ratio:1/1){.key{height:48px}.key b{font-size:1.5rem}.tool span{display:none}.g-main{--bs:min(calc(100vw - 24px),calc(100dvh - 250px),600px)}}

/* ---------- twofold ---------- */
.tf{display:flex;flex-direction:column;height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.yz-taxi .tf{height:calc(100dvh - 58px - env(safe-area-inset-top))}
.tf-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:8px 16px calc(16px + env(safe-area-inset-bottom));--ts:min(calc(100vw - 32px),calc(100dvh - 260px),520px)}
.tf-scores{width:var(--ts);display:flex;gap:10px;align-items:stretch}
.tf-score{position:relative;flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tf-score small{font:800 .66rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.tf-score b{font:600 1.6rem/1.15 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.tf-score em{position:absolute;right:12px;top:8px;font:700 .9rem var(--sans);font-style:normal;color:var(--accent);opacity:0}
.tf-score em.go{animation:gain .7s ease-out}
@keyframes gain{0%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(-14px)}}
.tf-scores .btn{align-self:center}
.tf-board{position:relative;width:var(--ts);height:var(--ts);border-radius:18px;background:color-mix(in srgb,var(--b-strong) 22%,var(--bg2));padding:calc(var(--ts) * .025);touch-action:none;box-shadow:var(--shadow);outline:none;--gap:calc(var(--ts) * .025);--t:calc((var(--ts) - var(--gap) * 5) / 4)}
.tf-board:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.tf-grid{position:absolute;inset:var(--gap);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tf-grid i{background:color-mix(in srgb,var(--b-bg) 55%,transparent);border-radius:10px}
.tf-tiles{position:absolute;inset:var(--gap)}
.tile{position:absolute;left:0;top:0;width:var(--t);height:var(--t);border-radius:10px;display:grid;place-items:center;font:600 calc(var(--t) * .44)/1 var(--serif);font-variation-settings:"opsz" 72;font-variant-numeric:lining-nums;transition:transform .11s ease-out;will-change:transform;background:var(--tile-1);color:var(--tile-ink)}
.tile span{display:block}
.tile.new span{animation:tnew .2s ease-out .08s both}
@keyframes tnew{from{transform:scale(0)}}
.tile.merged span{animation:tmerge .22s ease-out .08s}
.tile.merged{z-index:2}
@keyframes tmerge{50%{transform:scale(1.18)}}
.tile.d3{font-size:calc(var(--t) * .36)}.tile.d4{font-size:calc(var(--t) * .29)}.tile.d5{font-size:calc(var(--t) * .23)}
.tf-over{position:absolute;inset:0;border-radius:18px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .4s}
.tf-over b{font:600 2rem/1.1 var(--serif);text-align:center;padding:0 16px}
.tf-over span{color:var(--sub)}
.tf-over-a{display:flex;gap:8px;margin-top:8px}
@keyframes fade{from{opacity:0}}
.tf-help{margin:0;font-size:.85rem;color:var(--sub);text-align:center;max-width:var(--ts)}

/* ---------- sheets ---------- */
.sheet{border:0;padding:0;margin:auto;width:min(520px,calc(100vw - 24px));max-height:min(88dvh,760px);border-radius:24px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-lg);overscroll-behavior:contain}
.sheet[open]{display:flex;flex-direction:column;animation:sheetin .28s cubic-bezier(.2,.9,.3,1.1)}
@keyframes sheetin{from{opacity:0;transform:translateY(24px)}}
.sheet::backdrop{background:rgba(10,8,6,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sh-head{display:flex;align-items:center;gap:8px;padding:18px 18px 8px}
.sh-head h2{margin:0;font:600 1.5rem/1.1 var(--serif)}
.sh-body{overflow:auto;padding:4px 18px calc(20px + env(safe-area-inset-bottom))}
@media (max-width:560px){.sheet{margin:auto 0 0;width:100vw;max-width:100vw;max-height:90dvh;border-radius:24px 24px 0 0}}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row>span{flex:1;display:flex;flex-direction:column}.row>span small{color:var(--sub);font-size:.82rem;line-height:1.3}
.switch{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background-color .2s;margin:0}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch:checked{background:var(--accent)}.switch:checked::after{transform:translateX(20px)}
.seg{display:inline-flex;background:var(--bg2);border-radius:999px;padding:3px;flex:none}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 11px;font-size:.84rem;font-weight:700;color:var(--sub);cursor:pointer}
.seg button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.menu-list{display:flex;flex-direction:column;gap:2px}
.menu-list button,.menu-list a{display:flex;align-items:center;gap:12px;padding:13px 12px;border:0;background:none;border-radius:12px;text-align:left;cursor:pointer;font-weight:600;color:var(--ink);text-decoration:none;font-size:1rem}
.menu-list button:active,.menu-list a:active{background:var(--accent-soft)}
.menu-list small{margin-left:auto;color:var(--sub);font-weight:600}
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.th{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:8px;background:var(--card2);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px}
.th[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.th-sw{height:78px;border-radius:10px;display:grid;place-items:center;font:600 2rem/1 var(--serif)}
.th b{font-size:.92rem}.th small{font-size:.76rem;color:var(--sub);font-weight:600}
.th .pro-tag{position:absolute;top:12px;right:12px}
.stat-tabs{margin-bottom:12px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.stat{background:var(--card2);border-radius:14px;padding:10px 12px}
.stat small{display:block;font:800 .64rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.stat b{font:600 1.45rem/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.stat-table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.stat-table th,.stat-table td{text-align:right;padding:8px 4px;border-top:1px solid var(--line)}
.stat-table th:first-child,.stat-table td:first-child{text-align:left}
.stat-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0 16px}
.cal span{aspect-ratio:1;border-radius:8px;background:var(--bg2);display:grid;place-items:center;font-size:.72rem;color:var(--faint);font-weight:700}
.cal span.on{background:var(--accent);color:var(--accent-ink)}
.cal span.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal b{font-size:.66rem;color:var(--sub);text-align:center;letter-spacing:.06em}
.empty{text-align:center;padding:22px 10px;color:var(--sub)}
.empty .big{font:italic 300 4rem/1 var(--serif);color:var(--accent);display:block;margin-bottom:6px}
.tech-group h3{font:800 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:18px 0 8px}
.tech{border-top:1px solid var(--line);padding:12px 0}
.tech b{font:600 1.08rem/1.2 var(--serif)}
.tech p{margin:4px 0 0;color:var(--sub);font-size:.92rem}
.tech .seen{font-size:.74rem;font-weight:700;color:var(--hl-key);margin-left:8px}
.tech.focus{background:var(--accent-soft);border-radius:12px;padding:12px;margin:0 -12px}
/* result */
.result .res-in{padding:26px 22px calc(18px + env(safe-area-inset-bottom));text-align:center;overflow:auto}
.res-time{font:600 4.4rem/1 var(--serif);font-variation-settings:"opsz" 144;margin:8px 0 4px;letter-spacing:-.03em;font-variant-numeric:lining-nums}
.res-sub{margin:0 0 14px;color:var(--sub)}
.res-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.res-chips span{background:var(--card2);border-radius:12px;padding:8px 12px;font-size:.8rem;color:var(--sub);font-weight:600}
.res-chips b{display:block;font:600 1.15rem/1.2 var(--serif);color:var(--ink)}
.res-tech{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:12px}
.res-tech span{font-size:.78rem;font-weight:700;padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.res-extra{margin:0 0 12px;font-size:.88rem;color:var(--sub)}
.res-extra:empty{display:none}
.res-actions{display:flex;gap:8px;justify-content:center}
.res-actions .btn{flex:1;max-width:200px}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147482000}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.92rem;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:2147482500;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
}
/* desktop home: two columns */
@media (min-width:1000px){
  .home-in{max-width:1040px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start}
  .home-in>.hero{grid-column:1/-1;padding:24px 0 26px}
  .home-in>.continue{grid-column:1;grid-row:2}
  .home-in>.daily{grid-column:1;grid-row:3}
  .home-in>.more{grid-column:1;grid-row:4}
  .home-in>.levels{grid-column:2;grid-row:2/span 2}
  .home-in>.learn-row{grid-column:2;grid-row:4}
  .home-in>.seo{grid-column:1/-1;columns:2;column-gap:40px}
  .seo h2{column-span:all}
}