:root{
  --bg:#F3EFE7;--panel:#E9E3D8;--surface:#FFFDF8;--cell:#E2DCCF;--cell-hi:#ECE7DC;--cell-text:#5E574A;
  --text:#1F1B16;--muted:#6B6457;--accent-ring:#B9831A;--accent-fill:#F4C95D;--on-accent:#1F1B16;
  --line:#DCD4C4;--shadow:rgba(60,45,20,.16);--ok:#2F7A66;--bad:#C0392B;
  --month:#F4C95D;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111316;--panel:#181B20;--surface:#1E2127;--cell:#272B32;--cell-hi:#2D323A;--cell-text:#A3A9B2;
    --text:#EFECE6;--muted:#A3A7AE;--accent-ring:#F4C95D;--accent-fill:#F4C95D;--on-accent:#121417;
    --line:#2E333B;--shadow:rgba(0,0,0,.45);--ok:#4FB394;--bad:#E46A5C;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111316;--panel:#181B20;--surface:#1E2127;--cell:#272B32;--cell-hi:#2D323A;--cell-text:#A3A9B2;
  --text:#EFECE6;--muted:#A3A7AE;--accent-ring:#F4C95D;--accent-fill:#F4C95D;--on-accent:#121417;
  --line:#2E333B;--shadow:rgba(0,0,0,.45);--ok:#4FB394;--bad:#E46A5C;color-scheme:dark;
}

/* ---------- base ---------- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;color:var(--text);font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  background-color:var(--bg);background-image:radial-gradient(110% 55% at 50% -12%,color-mix(in srgb,var(--month) 24%,transparent),transparent 70%);background-attachment:fixed}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hidden{display:none !important}
.wrap{max-width:480px;margin:0 auto;padding:18px 16px 28px;display:flex;flex-direction:column;gap:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.small{font-size:12px;color:var(--muted)}
.note{font-size:14px;color:var(--muted);margin:0;line-height:1.45}
.warn{color:var(--bad)}
kbd{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;padding:1px 6px;border-radius:5px;background:var(--panel);box-shadow:inset 0 -1px 0 var(--line),inset 0 0 0 1px var(--line)}

/* ---------- header ---------- */
header{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{flex:none;filter:drop-shadow(0 4px 8px var(--shadow))}
h1{margin:0;font-size:27px;font-weight:800;letter-spacing:-0.025em;line-height:1;
  background:linear-gradient(90deg,var(--text) 40%,color-mix(in srgb,var(--month) 75%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin-top:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.hdr-btns{display:flex;gap:8px;align-items:center;flex:none}

/* difficulty chip + popover */
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 9px;border:0;border-radius:99px;cursor:pointer;
  background:color-mix(in srgb,var(--month) 22%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--month) 45%,transparent);font-size:12px;font-weight:700;letter-spacing:.01em}
.chip svg{opacity:.7}
.pop{display:none;position:absolute;left:0;top:calc(100% + 10px);z-index:40;width:min(360px,calc(100vw - 32px));padding:14px 14px 12px;border-radius:16px;
  background:var(--surface);box-shadow:0 18px 40px -12px var(--shadow),inset 0 0 0 1px var(--line);font-size:13px;color:var(--text);text-align:left}
.pop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.diff.open .pop{display:block}
@media (hover:hover){.diff:hover .pop{display:block}}
.pop strong{display:block;font-size:14px;margin-bottom:8px}
.pop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pop li{display:grid;grid-template-columns:36px 72px 1fr;align-items:center;gap:6px;padding:5px 8px;border-radius:8px}
.pop li .d{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--muted)}
.pop li .n{font-weight:700}
.pop li .r{color:var(--muted);font-size:12px}
.pop li.today{background:color-mix(in srgb,var(--month) 20%,transparent)}
.pop li.today .d,.pop li.today .r{color:var(--text)}
.pop p{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---------- controls ---------- */
.icon{width:40px;height:40px;border-radius:12px;border:0;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background .15s ease}
.icon:hover:not(:disabled){background:var(--panel)}
.icon:disabled{opacity:.35;cursor:default}
.text-btn{height:40px;padding:0 14px;border-radius:12px;border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease}
.text-btn:hover{background:var(--panel)}
.primary{height:52px;border:0;border-radius:14px;background:var(--accent-fill);color:var(--on-accent);font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent-fill) 80%,transparent)}
.secondary{height:48px;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:600;cursor:pointer}
.secondary:hover{background:var(--panel)}

.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--panel);border-radius:14px;padding:4px}
.tab{height:38px;border:0;border-radius:10px;background:transparent;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .15s ease}
.tab:hover{color:var(--text)}
.tab[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 2px 6px -2px var(--shadow),inset 0 0 0 1px var(--line)}

.banner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--month)}
.banner .t{font-size:15px;font-weight:700}
.banner .s{font-size:12px;color:var(--muted);margin-top:1px}
.banner-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.swatches{display:grid;grid-template-columns:repeat(5,8px);gap:3px;flex:none}
.swatches i{width:8px;height:8px;border-radius:2.5px}

.goal{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.goal b{color:var(--text);font-weight:700;box-shadow:inset 0 -3px 0 var(--month)}

/* ---------- board ---------- */
.boardbox{background:var(--panel);border-radius:20px;padding:12px 10px;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--month) 50%,transparent),inset 0 0 0 1px var(--line)}
#board{position:relative;margin:0 auto}
.bcell{position:absolute;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--cell-hi),var(--cell));color:var(--cell-text);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;letter-spacing:-.02em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06)}
.bcell.hole{background:color-mix(in srgb,var(--month) 18%,transparent);color:var(--text);font-weight:700;box-shadow:inset 0 0 0 2.5px var(--month),0 0 14px -4px var(--month)}
.bcell.blank{background:repeating-linear-gradient(135deg,var(--cell) 0 3px,var(--panel) 3px 7px);box-shadow:none}
.bcell.tut{background:var(--cell)}
.pcell{position:absolute;cursor:grab;touch-action:none}
.pcell.sel{filter:brightness(1.12)}
.pcell.given{cursor:default;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 3px,transparent 3px 9px)}
.pcell.flash{animation:flash .45s ease-out}
.selring{position:absolute;pointer-events:none;border-radius:8px;outline:2px solid var(--text);outline-offset:1px}
.picon{position:absolute;pointer-events:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.pv{position:absolute;pointer-events:none;border-radius:8px;opacity:.45}
#ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:50;opacity:.92;filter:drop-shadow(0 10px 16px rgba(0,0,0,.3))}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}

/* ---------- dock + tray ---------- */
.dock{position:sticky;bottom:0;z-index:20;margin:0 -16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.count{font-size:14px;font-weight:600;color:var(--muted)}
.tools{display:flex;gap:5px}
@media (max-width: 400px){.tools .icon{width:36px}.tools .text-btn{padding:0 11px}}
#tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:66px;padding:0;border:0;border-radius:12px;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s ease,box-shadow .15s ease}
.tp:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--line),0 8px 16px -6px var(--shadow)}
.tp.sel{transform:translateY(-6px) scale(1.04);box-shadow:inset 0 0 0 2px var(--month),0 10px 18px -6px color-mix(in srgb,var(--month) 60%,transparent)}
.tpshape{height:40px;display:flex;align-items:center;justify-content:center}
.tpname{font-size:10px;color:var(--muted);line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 3px}
.mini{display:grid;gap:2px}
.mini i{display:block;width:11px;height:11px;border-radius:3px}
.empty-tray{grid-column:1/-1;font-size:14px;color:var(--muted);text-align:center;padding:12px 0}
#howto{line-height:1.6}

/* ---------- clues ---------- */
.clues{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.clue{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:12px;padding:9px 12px;box-shadow:inset 0 0 0 1px var(--line);font-size:15px;transition:box-shadow .15s ease}
.clue .chips{display:flex;gap:4px;flex:none}
.clue .txt{flex:1}
.clue .st{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.clue.ok{box-shadow:inset 0 0 0 2px var(--ok)}
.clue.ok .st{color:var(--ok)}
.clue.bad{box-shadow:inset 0 0 0 2px var(--bad)}
.clue.bad .st{color:var(--bad)}

/* ---------- tutorial ---------- */
.panel{background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px var(--line)}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.steps li{display:flex;gap:10px;align-items:center;font-size:15px}
.steps .dot{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--line);font-size:13px;font-weight:700}
.steps li.done .dot{background:var(--month);box-shadow:none;color:#121417}
.steps li.done span:last-child{color:var(--muted);text-decoration:line-through}

/* ---------- result ---------- */
.solved-title{font-size:34px;font-weight:800;letter-spacing:-0.025em;margin:0;line-height:1.1}
.rare-line{font-size:19px;font-weight:600;line-height:1.3;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:22px;font-weight:500}
.stat .k{font-size:12px;color:var(--muted)}
textarea{width:100%;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px;resize:none}
footer{display:flex;justify-content:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}

/* ---------- hints ---------- */
.peek{position:absolute;pointer-events:none;box-shadow:inset 0 0 0 3px var(--pc),0 0 0 3px color-mix(in srgb,var(--pc) 35%,transparent);
  background:color-mix(in srgb,var(--pc) 30%,transparent);animation:peek 1.2s ease-in-out infinite}
.pcell.wrong{background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--bad) 70%,transparent) 0 4px,transparent 4px 9px)}
.hintline{margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--text);padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--month) 16%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--month) 40%,transparent)}

/* ---------- tutorial blank legend ---------- */
.bcell.tut.blank{background:repeating-linear-gradient(135deg,var(--cell) 0 3px,var(--panel) 3px 7px)}
.legend{display:flex;align-items:center;gap:10px}
.legend .stripe{flex:none;width:24px;height:24px;border-radius:6px;background:repeating-linear-gradient(135deg,var(--cell) 0 3px,var(--panel) 3px 7px);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- archive + calendar ---------- */
.archive{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;font-size:13px;
  background:color-mix(in srgb,var(--month) 16%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--month) 45%,transparent)}
.archive a,#nextIn a{color:var(--text);font-weight:700}
dialog.cal{width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;border:0;border-radius:20px;padding:16px;background:var(--surface);color:var(--text);
  box-shadow:0 24px 60px -16px var(--shadow),inset 0 0 0 1px var(--line);display:none;flex-direction:column;gap:12px}
dialog.cal[open]{display:flex}
dialog.cal::backdrop{background:rgba(10,12,16,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.cal h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calgrid .wd{font-size:11px;text-align:center;color:var(--muted);font-weight:600;padding-bottom:2px}
.cd{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:10px;background:var(--panel);color:var(--text);
  text-decoration:none;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;transition:background .15s ease}
a.cd:hover{background:color-mix(in srgb,var(--month) 20%,var(--panel))}
.cd.off{opacity:.35}
.cd.today{box-shadow:inset 0 0 0 2px var(--month)}
.cd.cur{background:color-mix(in srgb,var(--month) 28%,var(--panel));font-weight:700}
.cd b{display:flex;gap:3px;height:6px}
.cd i,.calkey i{display:inline-block;width:6px;height:6px;border-radius:50%;background:transparent}
.cd i.c,.calkey i.c{background:var(--month)}
.cd i.p,.calkey i.p{background:var(--ok)}
.calkey{margin:0;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.calkey span{display:inline-flex;align-items:center;gap:6px}
.calkey .tapnote{margin-left:auto}
dialog.cal .stats .stat{background:var(--panel);box-shadow:none}

/* ---------- motion ---------- */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes peek{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes flash{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.won{animation:pop .5s ease}
@media (prefers-reduced-motion: reduce){.won,.pcell.flash,.peek{animation:none}.tp,.tab,.icon,.text-btn,.clue{transition:none}}

/* ---------- wide screens ---------- */
@media (min-width: 760px){
  .wrap{max-width:720px;padding-top:28px;gap:16px}
  h1{font-size:32px}
  .logo{width:40px;height:40px}
  .tp{height:96px;gap:6px}
  .tpshape{height:58px}
  .tpname{font-size:12px}
}