/* Pixelify draws 2, 3 and 5 with hooks that make them blur into 8 (and 5 into S) at small sizes.
   This tiny font only redraws those three digits with flat, open pixel shapes; every other character still comes from Pixelify Sans. */
@font-face{font-family:"Pixelify Five";src:url(../fonts/five-500.woff2) format("woff2");font-weight:400 600;unicode-range:U+0032,U+0033,U+0035;font-display:swap}
@font-face{font-family:"Pixelify Five";src:url(../fonts/five-700.woff2) format("woff2");font-weight:700 900;unicode-range:U+0032,U+0033,U+0035;font-display:swap}
/* Layout: a fishing log — sticky header with progress + season tabs, then area sections of sprite cards you tap to tick off. */
:root{
  /* Game-sprite palette: oak-resin parchment and leaves, wood frames, pumpkin autumn,
     and map water. Light surfaces blend parchment with wheat's cream highlight.
     Exact samples, blend ratios and contrast checks: docs/asset-design-audit.md. */
  --bg:#e9d8bd; --panel:#f3e7d6; --ink:#462709; --muted:#633a14; --line:#aa6a2e;
  --accent:#26513a; --accent-ink:#fff9f2; --done:#d7ded0; --done-line:#377247; --done-ink:#26513a;
  --sp:#26513a; --su:#855222; --fa:#913a1c; --wi:#37549e; --selection-ink:#fff9f2;
  --sve:#6a4373; --sve-ink:#fff9f2; --sve-bg:#f0e7e5; --legend:#855222; --legend-bg:#ffebca;
  --rain:#37549e; --sun:#855222;
  --sea:#9cc4cc; --land:#cfe3b0; --hill:#b9cf98; --hill2:#c8c0a4; --water:#5fa9cf; --sand:#ead9a8; --edge:#7a5a36;
  --wood:#aa6a2e; --wood-dark:#633a14; --wood-light:#dbc29a;
  --display:"Pixelify Five","Pixelify Sans","Courier New",monospace; --body:"Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
/* Night theme: forest shade from oak resin, with warm wood and cream page highlights. */
:root[data-theme="dark"]{
  --bg:#272d24; --panel:#343326; --ink:#fff9f2; --muted:#dbc29a; --line:#b57d46;
  --accent:#6bea6d; --accent-ink:#1a2f2f; --done:#2c422e; --done-line:#53ae60; --done-ink:#95edbe;
  --sp:#6bea6d; --su:#ffaa14; --fa:#ff7b00; --wi:#49ccdd; --selection-ink:#1a2f2f;
  --sve:#d68cbc; --sve-ink:#1a2f2f; --sve-bg:#3b343c; --legend:#ffaa14; --legend-bg:#433823;
  --rain:#49ccdd; --sun:#ffaa14;
  --sea:#23404a; --edge:#a8865c;
  --warn:#ff7b00; --warn-bg:#423022; --need:#95edbe; --need-bg:#2c422e;
  --wood:#855222; --wood-dark:#462709; --wood-light:#aa6a2e;
  color-scheme:dark;
}
.themebtn{font:inherit;font-size:.82rem;font-weight:700;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer;white-space:nowrap}
.themebtn:hover{border-color:var(--muted)}
.themebtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.headright{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end;margin-top:12px}
*{box-sizing:border-box}
[hidden]{display:none!important}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:10px 16px;background:var(--panel);color:var(--ink);border:3px solid var(--accent);border-radius:4px;transform:translateY(-160%);font-weight:700}
.skip-link:focus{transform:translateY(0)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
/* Keep the footer out of the first viewport while data is loading. */
.planner #view{min-height:70vh;min-height:calc(100svh - 12rem)}
.planner:not(.app-ready) footer{display:none}
.planner .farmbar{min-height:44px}
.loading-planner{padding:24px 0;color:var(--muted)}
.loading-planner h2{font-family:var(--display);font-weight:500;color:var(--ink)}
.loading-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.loading-cards span{height:96px;border:2px solid var(--line);border-radius:6px;background:var(--panel)}
.reference-links{margin-bottom:16px;line-height:2}
.update-notice{padding:12px;border:2px solid var(--accent);border-radius:6px;background:var(--panel);font-size:.95rem}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:3px solid var(--line);padding-block:14px 10px}
/* The wooden card frames stick out a few px past the content edge; widen the sticky header's backdrop
   (sideways and above) so those edges don't peek out beside it while scrolling. */
header::before{content:"";position:absolute;z-index:-1;inset:-40px -12px 0;background:var(--bg);pointer-events:none}
.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
h1{font-family:var(--display);font-weight:700;font-size:1.9rem;margin:0;line-height:1;text-wrap:balance}
.brand-icon{display:inline-block;width:40px;height:40px;margin-right:8px;vertical-align:middle;image-rendering:pixelated}
h1 small{display:block;font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--muted);margin-top:6px}
.prog{min-width:0;flex:1 1 300px;max-width:460px}
.prog .row{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:.9rem}
.prog .row b{font-family:var(--display);font-size:1.25rem}
.bar{height:10px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.mini{display:flex;gap:10px;margin-top:6px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.mini span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:1px;background:var(--c)}
.tabs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.tab{font-family:var(--display);font-size:1rem;border:2px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 14px;border-radius:4px;cursor:pointer}
.tab[aria-pressed="true"]{background:var(--c,var(--accent));border-color:var(--c,var(--accent));color:var(--selection-ink)}
.tab:focus-visible,.chip:focus-visible,.card:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.filters{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.filters input[type=search],.filters select{font:inherit;font-size:.9rem;padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink)}
.filters input[type=search]{flex:1 1 180px;min-width:0}
.chip{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:5px 10px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
section{margin-top:26px}
section h2{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:0 0 10px;display:flex;gap:10px;align-items:baseline}
section h2 span{font-family:var(--body);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.card{display:grid;grid-template-columns:56px 1fr auto;gap:4px 12px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;min-width:0}
.card.sve{background:var(--sve-bg)}
.card.leg{background:var(--legend-bg);border-color:var(--legend)}
.card.done{background:var(--done);border-color:var(--done-line)}
.card.done .nm{text-decoration:line-through;text-decoration-thickness:2px;color:var(--done-ink)}
.card.done img{opacity:.55}
.sprite{width:56px;height:56px;display:grid;place-items:center;grid-row:span 3}
.sprite img{width:48px;height:48px;image-rendering:pixelated}
.nm{font-weight:700;font-size:1rem;min-width:0}
.box{width:24px;height:24px;border:2px solid var(--muted);border-radius:4px;display:grid;place-items:center;font-weight:700;color:var(--accent-ink);grid-row:span 2}
.card.done .box{background:var(--done-line);border-color:var(--done-line)}
.meta{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.meta .w-Rain{color:var(--rain);font-weight:700}
.meta .w-Sun{color:var(--sun);font-weight:700}
.loc{grid-column:2 / 4;font-size:.85rem;min-width:0;overflow-wrap:anywhere}
.note{grid-column:2 / 4;font-size:.78rem;color:var(--muted);font-style:italic}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.tag{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.tag.sve{color:var(--sve);border-color:var(--sve)}
.tag.leg{color:var(--legend);border-color:var(--legend)}
.dots{display:inline-flex;gap:3px;vertical-align:middle}
.dots i{width:9px;height:9px;border-radius:2px;background:var(--line)}
.dots i.on{background:var(--c)}
.empty{color:var(--muted);padding:30px 0;text-align:center}
.key{margin-top:30px;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:4px}

.bar2{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:flex-end}
.views{display:flex;border:2px solid var(--ink);border-radius:5px;overflow:hidden;margin-top:12px}
.vbtn{font:inherit;font-size:.85rem;font-weight:700;border:0;background:var(--panel);color:var(--ink);padding:7px 12px;cursor:pointer}
.vbtn+.vbtn{border-left:2px solid var(--ink)}
.vbtn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.vbtn:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.mapwrap{margin-top:18px}
.maphead h2{font-family:var(--display);font-weight:500;font-size:1.3rem;margin:0}
.maphead p{margin:4px 0 10px;color:var(--muted);font-size:.9rem}
.mapscroll{overflow-x:auto;border:2px solid var(--edge);border-radius:8px;background:var(--sea)}
.mapscroll svg{display:block;width:100%;min-width:900px;height:auto}
.mapnote{font-size:.75rem;color:var(--muted);margin:6px 0 0}
.tlabel{font:600 13px var(--body);fill:var(--edge)}
.pin{cursor:pointer}
.pinbox{fill:var(--panel);stroke:var(--ink);stroke-width:2}
.pin:hover .pinbox,.pin:focus-visible .pinbox{stroke:var(--accent);stroke-width:3}
.pin:focus{outline:none}
.pin.off .pinbox{stroke-dasharray:6 4}
.pin.sel .pinbox{stroke:var(--accent);stroke-width:4}
.pin.clear .pinbox{fill:var(--done);stroke:var(--done-line)}
.pin.clear .badge{fill:var(--done-line)}
.pix{image-rendering:pixelated}
.pix.got{opacity:.35}
.tick{font:700 20px var(--body);fill:var(--done-ink)}
.badge{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.badgetxt{font:700 13px var(--body);fill:var(--accent-ink)}
.plabel{font:700 13px var(--body);fill:var(--ink);paint-order:stroke;stroke:var(--land);stroke-width:4px;stroke-linejoin:round}
#spotpanel section{margin-top:14px}
@media (max-width:700px){header{position:relative}}
@media (max-width:520px){.views{width:100%}.vbtn{flex:1}h1{font-size:1.5rem}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

/* ---------- site additions ---------- */
:root{--warn:#913a1c; --warn-bg:#eedcd2; --need:#26513a; --need-bg:#dee0d6}
a{color:var(--accent)}
nav.main{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap;border-bottom:2px solid var(--line)}
nav.main a{font-family:var(--display);font-size:1.05rem;text-decoration:none;color:var(--muted);padding:6px 12px;border-bottom:3px solid transparent;margin-bottom:-2px}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav.main a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.controls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;margin-top:16px}
.ctl{display:flex;flex-direction:column;gap:4px;min-width:0}
.ctl>span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.seg{display:flex;border:2px solid var(--line);border-radius:5px;overflow:hidden}
.seg button{font:inherit;font-size:.9rem;border:0;background:var(--panel);color:var(--ink);padding:6px 11px;cursor:pointer}
.seg button+button{border-left:2px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--c,var(--ink));color:var(--selection-ink)}
.seg button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.day{display:flex;align-items:center;gap:6px}
.day input{width:4.2em;font:inherit;font-variant-numeric:tabular-nums;padding:6px 8px;border:2px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);text-align:center}
.day button,.btn{font:inherit;font-size:.9rem;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:5px;padding:6px 10px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.ctl select{font:inherit;font-size:.9rem;padding:6px 8px;border:2px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink)}
/* Tick boxes: one custom square everywhere (clear border, green with a check mark when ticked),
   and option toggles (.check) sit in a framed chip so they read as something you can click. */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;flex:none;display:inline-grid;place-content:center;border:2px solid var(--muted);border-radius:4px;background:var(--panel);cursor:pointer;transition:background .12s,border-color .12s}
input[type=checkbox]::before{content:"";width:12px;height:12px;background:var(--accent-ink);clip-path:polygon(12% 46%,0 62%,40% 100%,100% 18%,86% 4%,40% 70%);transform:scale(0);transition:transform .12s}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:hover{border-color:var(--accent)}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check{display:inline-flex;gap:10px;align-items:center;font-size:.9rem;cursor:pointer;padding:8px 12px;border:2px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 2px 0 var(--line);transition:border-color .12s,background .12s}
.check:hover{border-color:var(--accent)}
.check:has(input:checked){background:var(--done);border-color:var(--done-line);box-shadow:0 2px 0 var(--done-line);color:var(--done-ink);font-weight:700}
.events{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.event{border-left:4px solid var(--c,var(--accent));background:var(--panel);padding:10px 14px;border-radius:0 6px 6px 0;font-size:.9rem}
.event b{font-family:var(--display);font-weight:500;font-size:1.05rem;margin-right:6px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.stat b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:.82rem;color:var(--muted)}
.tag.need{color:var(--need);border-color:var(--need);background:var(--need-bg)}
.tag.last{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.tag.wx{color:var(--rain);border-color:var(--rain)}
.lede{color:var(--muted);font-size:.9rem;margin:4px 0 0;max-width:70ch}
/* bundles */
.rooms{display:flex;flex-direction:column;gap:6px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.bundle{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.bundle.complete{background:var(--done);border-color:var(--done-line)}
.bhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bhead h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0}
.bhead .n{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.reward{font-size:.8rem;color:var(--muted);margin:2px 0 8px}
.pick{font-size:.78rem;color:var(--muted);margin:-4px 0 8px}
.items{display:flex;flex-direction:column;gap:4px}
.item{display:grid;grid-template-columns:34px 1fr auto;gap:2px 10px;align-items:center;text-align:left;font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 6px;cursor:pointer;width:100%}
.item:hover{border-color:var(--line)}
.item:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.item img{width:32px;height:32px;image-rendering:pixelated}
.item .in{min-width:0}
.item .in b{font-size:.92rem}
.item .in small{display:block;font-size:.76rem;color:var(--muted);overflow-wrap:anywhere}
.item .qty{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.item .gold{color:var(--legend)}
.item.got .in b{text-decoration:line-through;color:var(--done-ink)}
.item.got img{opacity:.5}
.item .box{grid-row:auto;width:22px;height:22px}
.item.got .box{background:var(--done-line);border-color:var(--done-line)}
.item .today{font-size:.68rem;font-weight:700;color:var(--need);text-transform:uppercase;letter-spacing:.04em}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.ichip{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 10px 5px 6px;font-size:.85rem;min-width:0}
.ichip img{width:28px;height:28px;image-rendering:pixelated}
.ichip small{display:block;color:var(--muted);font-size:.74rem}
textarea{width:100%;min-height:90px;font:inherit;font-size:.85rem;padding:8px;border:2px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:12px;max-width:640px}
.msg{font-size:.88rem;color:var(--done-ink)}
footer{margin-top:40px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
/* map: catchable vs not */
.pix.off{opacity:.3;filter:grayscale(1)}
.pin.dim .pinbox{opacity:.55}
.pin.dim .badge{fill:var(--muted)}
.pin.dim .plabel{opacity:.7}
.card.later{opacity:.7}
.why{display:block;font-size:.78rem;font-weight:700;color:var(--warn);margin-top:2px}
/* bulk complete buttons */
.btn.small{font-size:.8rem;padding:4px 10px}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.danger{border-color:var(--warn);color:var(--warn)}
.sure{font-size:.8rem;color:var(--warn);font-weight:700}
.bulk{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.ccbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:16px}
.ccbar b{font-family:var(--display);font-weight:500;font-size:1.1rem}
.roomhead{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.roomhead h2{margin:0}
.bfoot{margin-top:8px;display:flex;justify-content:flex-end}
/* farm picker */
.farmbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font-size:.9rem}
.farmbar label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.farmbar select{font:inherit;font-weight:700;padding:5px 8px;border:2px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);max-width:100%}
.farmform{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.farmform input{font:inherit;font-size:.9rem;padding:5px 8px;border:2px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);min-width:0;width:14em;max-width:100%}
/* recipe line on fish cards */
.recipes{grid-column:2 / 4;font-size:.8rem;min-width:0;overflow-wrap:anywhere;border-top:1px dashed var(--line);padding-top:4px;margin-top:2px}
.recipes .with{color:var(--muted)}
.recipes .tag{vertical-align:1px}
/* bundle set picker */
.setbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:16px}
.setbar b{font-family:var(--display);font-weight:500;font-size:1.1rem}
.setbar .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
/* header controls */
.headrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
/* villagers */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:2px}
.cal .day{background:var(--panel);border:1px solid var(--line);border-radius:6px;min-height:78px;padding:4px 5px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cal .day.has{border-color:var(--legend)}
.cal .day.today{outline:3px solid var(--accent);outline-offset:-1px}
.cal .dn{font-family:var(--display);font-size:.95rem;line-height:1}
.cal .fest{font-size:.62rem;font-weight:700;color:var(--accent);line-height:1.15;overflow-wrap:anywhere}
.cal .who{display:flex;flex-wrap:wrap;gap:2px}
.cal .who button{display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font:inherit;min-width:0;max-width:100%}
.cal .who img{width:36px;height:36px;image-rendering:pixelated;border-radius:4px}
.cal .who span{font-size:.62rem;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.univbox{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--legend);border-radius:8px;padding:10px 14px;font-size:.88rem}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.villager{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0;transition:box-shadow .3s}
.villager.sve{background:var(--sve-bg)}
.villager.bday{border-color:var(--legend);box-shadow:0 0 0 2px var(--legend) inset}
.villager.flash{box-shadow:0 0 0 3px var(--accent)}
.vhead{display:flex;gap:12px;align-items:center}
.portrait{width:64px;height:64px;image-rendering:pixelated;border-radius:6px;background:var(--bg);flex:none}
.vmeta{min-width:0}
.vmeta h3{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:0}
.vmeta h3 small{font-family:var(--body);font-size:.75rem;color:var(--muted)}
.vmeta .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.when{margin:4px 0 0;font-size:.85rem;color:var(--muted)}
.when .soon{color:var(--legend)}
.glabel{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.gifts{display:flex;flex-wrap:wrap;gap:4px}
.gift{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.gift img{width:22px;height:22px;image-rendering:pixelated;margin-left:-4px}
.gift{padding:2px 9px 2px 6px}
.gift.fishy{border-color:var(--accent)}
.gift.hit{background:var(--legend-bg);border-color:var(--legend);font-weight:700}
.gnote{font-size:.76rem;color:var(--muted);font-style:italic;margin:6px 0 0}
.none{font-size:.8rem;color:var(--muted)}
.villager details{margin-top:8px}
.villager summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted)}
.villager details .gifts{margin-top:6px}
.event.bdayev{display:flex;gap:12px;align-items:center}
.event.bdayev img{width:44px;height:44px;image-rendering:pixelated;border-radius:6px;flex:none}
@media (max-width:520px){.cal .day{min-height:64px;padding:3px}.cal .who img{width:26px;height:26px}.cal .who span{display:none}.cal .fest{font-size:.55rem}}
@media (prefers-reduced-motion:reduce){.villager{transition:none}}
/* my to-do */
.todos{margin-top:26px}
.tcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.tcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.tcol h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0}
.tcol h3 small{font-family:var(--body);font-size:.8rem;color:var(--muted);font-weight:400;margin-left:6px}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.titem{display:flex;gap:10px;align-items:flex-start;padding:6px 4px;border-bottom:1px dashed var(--line)}
.titem input[type=checkbox]{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--done-line);cursor:pointer}
.ttext{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.93rem}
.titem.done .ttext{text-decoration:line-through;color:var(--muted)}
.tmeta{display:block;font-size:.75rem;color:var(--muted)}
.tmeta.late{color:var(--warn);font-weight:700}
.tbtn{font:inherit;font-size:.75rem;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:4px;padding:1px 7px;cursor:pointer;flex:none}
.tbtn.x{font-size:1rem;line-height:1;padding:0 6px}
.tbtn:hover{color:var(--ink);border-color:var(--muted)}
.tempty{font-size:.85rem;color:var(--muted);padding:4px 0}
.tadd{display:flex;gap:6px;flex-wrap:wrap}
.tadd input,.tadd select{font:inherit;font-size:.88rem;padding:6px 8px;border:2px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);min-width:0}
.tadd input:first-child{flex:1 1 160px}
.tadd input[type=number]{width:4.4em}
.tclear{align-self:flex-start;font:inherit;font-size:.8rem;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}

/* ---------- wooden frames, like the in-game menus ----------
   thick wood border + dark outer edge + light inner bevel + a small drop shadow */
.panel,.stat,.bundle,.villager,.mapscroll{
  border:4px solid var(--wood);border-radius:6px;
  box-shadow:0 0 0 2px var(--wood-dark),inset 0 0 0 2px var(--wood-light),0 4px 0 2px rgba(60,35,15,.25);
}
/* fish cards and to-do panels come in larger numbers, so a lighter frame */
.card{
  border:3px solid var(--wood);border-radius:5px;
  box-shadow:0 0 0 1px var(--wood-dark),inset 0 0 0 1px var(--wood-light),0 3px 0 1px rgba(60,35,15,.2);
}
/* keep status visible: the frame takes on the state colour */
.card.done,.bundle.complete{border-color:var(--done-line)}
.card.leg{border-color:var(--legend)}
.villager.bday{border-color:var(--legend);box-shadow:0 0 0 2px var(--wood-dark),inset 0 0 0 2px var(--legend-bg),0 4px 0 2px rgba(60,35,15,.25)}
.villager.flash{box-shadow:0 0 0 2px var(--wood-dark),0 0 0 6px var(--accent)}
/* frames need room for their shadow */
.grid,.bgrid,.vgrid,.stats,.tcols{gap:14px}
.stats{padding-bottom:4px}
.mapscroll{margin-bottom:6px}
/* recipes */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.recipe{background:var(--panel);min-width:0;padding:12px 14px;border:3px solid var(--wood);border-radius:5px;box-shadow:0 0 0 1px var(--wood-dark),inset 0 0 0 1px var(--wood-light),0 3px 0 1px rgba(60,35,15,.2)}
.recipe.sve{background:var(--sve-bg)}
.recipe.made{background:var(--done);border-color:var(--done-line)}
.rhead{display:flex;gap:12px;align-items:center}
.rpic{width:48px;height:48px;image-rendering:pixelated;flex:none}
.rpic.noimg{display:grid;place-items:center;background:var(--bg);border-radius:6px;color:var(--muted)}
.rmeta{flex:1;min-width:0}
.rmeta h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0}
.rmeta .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.rmade{display:flex;gap:6px;align-items:center;font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.rmade input{width:20px;height:20px;accent-color:var(--done-line)}
.recipe.made .rmeta h3{color:var(--done-ink)}
.unlock{font-size:.82rem;margin:8px 0;color:var(--ink)}
.unlock.u-friend{color:var(--warn);font-weight:700}
.gift.ing b{font-weight:700;margin-left:2px}
.gift.madeof{border-style:dashed;border-color:var(--muted)}
.noimg{display:inline-grid;place-items:center;width:22px;height:22px;font-size:.8rem;color:var(--muted)}
.shoplist{padding:6px 12px}
.shoplist ul{list-style:none;margin:0;padding:0;columns:2 340px;column-gap:24px}
.srow{break-inside:avoid;border-bottom:1px dashed var(--line);padding:6px 0}
.srow label{display:flex;gap:10px;align-items:center;cursor:pointer}
.srow input{width:20px;height:20px;flex:none;accent-color:var(--done-line)}
.srow img,.srow .noimg{width:28px;height:28px;image-rendering:pixelated;flex:none}
.sname{flex:1;min-width:0;font-size:.92rem;overflow-wrap:anywhere}
.sqty{font-family:var(--display);font-size:1.05rem;font-variant-numeric:tabular-nums}
.srow.got .sname{text-decoration:line-through;color:var(--muted)}
.srow details{margin:2px 0 0 30px}
.srow summary{font-size:.75rem;color:var(--muted);cursor:pointer}
.srow details p{font-size:.78rem;margin:4px 0 0;color:var(--muted)}
/* Game version switch (header) */
.gameseg{border-radius:999px}
.gameseg button{font-size:.8rem;font-weight:700;padding:4px 12px}
.gameseg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.gameseg button[data-g="sve"][aria-pressed="true"]{background:var(--sve);color:var(--sve-ink)}
.tag.gi{color:var(--rain);border-color:var(--rain)}
/* ---------- compact header on phones ---------- */
.menubtn{display:none;font:inherit;font-size:.85rem;font-weight:700;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer}
.menubtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.farmextra{display:contents}
@media (max-width:700px){
  header{padding-block:10px 0}
  .top{flex-wrap:nowrap;align-items:center;gap:12px}
  h1{font-size:1.3rem;flex:0 1 auto;min-width:0}
  .brand-icon{width:28px;height:28px;margin-right:4px}
  h1 small{display:none}
  .prog{flex:1 1 auto;min-width:0}
  .prog .row{font-size:.75rem}
  .prog .row b{font-size:1rem}
  .bar{height:7px;margin-top:2px}
  .mini{display:none}
  .headrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 8px}
  .headright{grid-column:1 / -1}
  .farmbar{margin-top:8px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
  .farmbar label{display:none}
  .farmbar select{width:100%;min-width:0;max-width:100%;min-height:44px;text-overflow:ellipsis}
  .menubtn,.menubtn.searchbtn-m{display:inline-flex;margin-top:8px}
  .farmextra{display:none}
  .farmextra.active,header.open .farmextra{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .headright{display:none;width:100%;justify-content:flex-start;margin-top:4px}
  header.open .headright{display:flex}
  nav.main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:8px;gap:0}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{flex:none;padding:6px 10px;font-size:.95rem}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stat{padding:8px 9px}
  .stat b{font-size:1.25rem}
  .stat span{font-size:.72rem;line-height:1.25;display:block}
  section h2{flex-direction:column;align-items:flex-start;gap:2px}
  .roomhead{align-items:flex-start}
}
/* crops */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px}
.crop{background:var(--panel);padding:12px 14px;min-width:0;border:3px solid var(--wood);border-radius:5px;box-shadow:0 0 0 1px var(--wood-dark),inset 0 0 0 1px var(--wood-light),0 3px 0 1px rgba(60,35,15,.2)}
.crop.late{opacity:.7}
.chead{display:flex;gap:12px;align-items:center}
.chead img{width:44px;height:44px;image-rendering:pixelated;flex:none}
.cmeta{flex:1;min-width:0}
.cmeta h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0}
.cmeta .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.cprofit{text-align:right;flex:none}
.cprofit b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--done-ink);font-variant-numeric:tabular-nums}
.cprofit b.neg{color:var(--warn)}
.cprofit span{font-size:.75rem;color:var(--muted)}
.cspan{margin:8px 0 0;font-size:.78rem;font-weight:700;color:var(--done-ink);background:var(--done);border-radius:4px;padding:3px 8px}
.cstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 6px}
.cstats div{background:var(--bg);border-radius:4px;padding:4px 6px;min-width:0}
.cstats dt{font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cstats dd{margin:0;font-size:.88rem;font-variant-numeric:tabular-nums}
.cstats s{color:var(--muted);font-size:.75rem}
.cseed{font-size:.8rem;margin:4px 0 0;color:var(--ink)}
@media (max-width:420px){.cstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer .about{margin:0 0 10px;max-width:90ch;line-height:1.5}
/* collections */
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:6px 12px}
.colitem{background:var(--panel);border:1px solid var(--line);align-items:start}
.colitem img{margin-top:2px}
.colitem .hl{background:var(--legend-bg)}
.rewards{margin-top:14px}
.rewards summary{cursor:pointer}
.rewards ul{margin:8px 0;padding-left:20px;font-size:.88rem;columns:2 300px}
.rewards li{break-inside:avoid;margin:2px 0}
.rewards li.got{color:var(--done-ink);text-decoration:line-through}
.pond{border-top:none;padding-top:0}

/* ---------- search everything ---------- */
.searchbtn{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.88rem;color:var(--muted);background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:4px 8px 4px 10px;margin-bottom:6px;cursor:pointer;min-width:200px}
.searchbtn:hover{border-color:var(--accent);color:var(--ink)}
.searchbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.searchbtn .sl{flex:1;text-align:left}
.menubtn.searchbtn-m{display:none}
@media (max-width:1080px){.searchbtn{min-width:0}.searchbtn .sl,.searchbtn kbd{display:none}}
.searchbtn kbd{font:inherit;font-size:.75rem;border:1px solid var(--line);border-radius:4px;padding:0 6px;background:var(--bg)}
.flash{outline:4px solid var(--accent);outline-offset:3px;transition:outline-color .3s}
dialog.search{width:min(720px,calc(100vw - 24px));max-height:min(80vh,760px);padding:0;margin:8vh auto auto;border:3px solid var(--wood);border-radius:6px;background:var(--panel);color:var(--ink);box-shadow:0 0 0 2px var(--wood-dark),inset 0 0 0 2px var(--wood-light),0 12px 40px rgba(30,15,5,.45);overflow:hidden}
dialog.search[open]{display:flex;flex-direction:column}
dialog.search::backdrop{background:rgba(40,25,10,.45)}
.shead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--line)}
.shead input{flex:1;min-width:0;font:inherit;font-size:1.05rem;padding:8px 10px;border:2px solid var(--line);border-radius:5px;background:var(--bg);color:var(--ink)}
.shead input:focus{outline:none;border-color:var(--accent)}
.sclose{font:inherit;font-size:1rem;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:5px;width:36px;height:36px;cursor:pointer;flex:none}
.sclose:hover{border-color:var(--accent)}
.sres{overflow-y:auto;padding:8px 14px 14px;overscroll-behavior:contain}
.shint,.scount{color:var(--muted);font-size:.9rem;margin:8px 2px;line-height:1.8}
.scount{margin:4px 2px 8px;font-size:.8rem}
.stry{font:inherit;font-size:.85rem;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:1px 10px;cursor:pointer}
.stry:hover{border-color:var(--accent)}
.sitem{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px dashed var(--line)}
.sitem:first-of-type{border-top:0}
.sitem>img,.sitem>.noimg{width:36px;height:36px;flex:none;object-fit:contain;image-rendering:pixelated;display:grid;place-items:center;color:var(--muted)}
.sbody{flex:1;min-width:0}
.sbody h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:4px 0 4px}
.sbody mark{background:var(--done);color:var(--done-ink);border-radius:2px}
.sbody ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sfact{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;font:inherit;font-size:.86rem;line-height:1.4;color:var(--ink);background:none;border:1px solid transparent;border-radius:5px;padding:4px 6px}
button.sfact{cursor:pointer}
button.sfact:hover,button.sfact:focus-visible{background:var(--bg);border-color:var(--line);outline:none}
.sico{flex:none;width:1.2em;text-align:center}
.stxt{flex:1;min-width:0}
.sgo{flex:none;font-size:.78rem;font-weight:700;color:var(--accent);white-space:nowrap}
@media (max-width:700px){
  .searchbtn{display:none}
  .headrow{grid-template-columns:minmax(0,1fr) auto auto}
  .menubtn.searchbtn-m{display:inline-flex}
  dialog.search{margin-top:12px;max-height:calc(100dvh - 24px)}
  .sgo{display:none}
}

/* ---------- villagers: "already at max hearts" ---------- */
.villager{position:relative}
.villager .vmeta h3{padding-right:104px}
.maxbtn{position:absolute;top:10px;right:10px;font:inherit;font-size:.75rem;font-weight:700;color:var(--muted);background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:2px 9px;cursor:pointer;white-space:nowrap}
.maxbtn:hover{border-color:var(--heart,#c0446a);color:var(--ink)}
.maxbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.maxbtn[aria-pressed="true"]{background:#c0446a;border-color:#c0446a;color:#fff}
.villager.maxed{opacity:.85}
.maxfold{margin-top:22px;border-top:2px solid var(--line);padding-top:10px}
.maxfold>summary{font-family:var(--display);font-size:1.2rem;cursor:pointer;padding:4px 0}
.maxfold>summary span{font-family:var(--body);font-size:.85rem;color:var(--muted);margin-left:6px}
.maxfold[open]>summary{margin-bottom:10px}

/* ---------- feedback ---------- */
.fbdlg{max-width:560px}
.fbdlg form{display:flex;flex-direction:column;min-height:0}
.fbhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:2px solid var(--line)}
.fbhead h2{font-family:var(--display);font-weight:500;font-size:1.35rem;margin:0}
.fbbody{padding:12px 16px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.fblede{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.fbfield{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700;color:var(--muted)}
.fbfield i{font-weight:400;font-style:normal}
.fbfield textarea,.fbfield input{font:inherit;font-weight:400;font-size:.95rem;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:5px;padding:8px 10px;resize:vertical}
.fbfield textarea:focus,.fbfield input:focus{outline:none;border-color:var(--accent)}
.fbfield small{align-self:flex-end;font-weight:400;font-size:.75rem}
.fbstatus{margin:0;font-size:.9rem;font-weight:700;min-height:1.2em}
.fbstatus.ok{color:var(--done-ink)}
.fbstatus.err{color:var(--warn)}
.fbactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fbnote{margin-right:auto;font-size:.78rem;color:var(--muted)}
.fbnote a{color:inherit}
#fbsend:disabled{opacity:.6;cursor:wait}
.fbcta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:14px;font-size:.92rem;color:var(--ink)}
/* the three "What is it about?" choices: equal width, filling the row */
#fbkind{display:grid;grid-template-columns:repeat(3,1fr)}
#fbkind button{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;padding:8px 6px;line-height:1.25}

/* feedback buttons that stand out: green in the header, plus a floating one in the corner */
.themebtn.fbhot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.themebtn.fbhot:hover{filter:brightness(1.08);border-color:var(--accent)}
.fbfloat{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:8px;font:inherit;color:var(--accent-ink);background:var(--accent);border:3px solid var(--wood);border-radius:999px;padding:6px 16px 6px 8px;cursor:pointer;box-shadow:0 0 0 2px var(--wood-dark),0 6px 16px rgba(40,20,5,.35);transition:transform .15s}
.fbfloat:hover{transform:translateY(-2px)}
.fbfloat:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fbface{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel);font-size:1.15rem}
.fbtxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.fbtxt b{font-family:var(--display);font-weight:500;font-size:1.05rem}
.fbtxt small{font-size:.72rem;opacity:.9}
@media (prefers-reduced-motion:no-preference){.fbfloat{animation:fbhello .8s ease-in-out 3s 2}}
@keyframes fbhello{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px) rotate(-3deg)}60%{transform:translateY(0) rotate(2deg)}}
footer{padding-bottom:64px}
@media (max-width:700px){
  .fbfloat{padding:5px 12px 5px 6px}
  .fbface{width:30px;height:30px;font-size:1rem}
  .fbtxt small{display:none}
}

/* ---------- movie theater (Villagers page) ---------- */
.vview{margin-top:16px}
.vview .seg{display:inline-flex}
.vview .seg button{font-size:.95rem;padding:7px 14px}
.mline{margin-top:10px;border-top:1px dashed var(--line);padding-top:6px}
.mline>summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--muted);list-style-position:inside}
.mline .mlove{color:var(--done-ink)}
.mline .mhate{color:var(--warn)}
.gift.movie{font-weight:700}
.gift.movie.now{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.nowshow{display:flex;flex-direction:column;gap:2px;margin-top:14px;background:var(--done);border:2px solid var(--done-line);border-radius:6px;padding:10px 14px;color:var(--done-ink)}
.nslabel{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.nslabel small{text-transform:none;letter-spacing:0;font-weight:400}
.nowshow b{font-family:var(--display);font-weight:500;font-size:1.35rem}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mseason h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0 0 6px;color:var(--c)}
.mseason{display:flex;flex-direction:column;gap:8px}
.mbtn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-left:5px solid var(--c);border-radius:6px;padding:8px 10px;cursor:pointer}
.mbtn:hover{border-color:var(--accent);border-left-color:var(--c)}
.mbtn[aria-pressed="true"]{background:var(--done);border-color:var(--done-line);border-left-color:var(--c)}
.mbtn b{font-size:.9rem;line-height:1.25}
.mbtn small{font-size:.75rem;color:var(--muted)}
.nowtag{font-size:.68rem;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:0 7px;margin-top:3px}
.mpick{margin-top:18px;background:var(--panel);padding:12px 16px;border:3px solid var(--wood);border-radius:5px;box-shadow:0 0 0 1px var(--wood-dark),inset 0 0 0 1px var(--wood-light),0 3px 0 1px rgba(60,35,15,.2)}
.mpick h2{margin-top:0}
.faces{display:flex;flex-wrap:wrap;gap:6px}
.vface{display:flex;flex-direction:column;align-items:center;gap:2px;width:68px;font:inherit;font-size:.72rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 2px;cursor:pointer}
.vface:hover{border-color:var(--accent)}
.vface img{width:44px;height:44px;object-fit:cover;border-radius:4px;image-rendering:pixelated}
.vface span{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faces.sm .vface{width:56px}
.faces.sm .vface img{width:34px;height:34px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.snack{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.shead2{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.shead2 img{width:32px;height:32px;image-rendering:pixelated}
.shead2 b{display:block;font-size:.92rem}
.shead2 small{font-size:.75rem;color:var(--muted)}
@media (max-width:900px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.mgrid{grid-template-columns:1fr}}

/* perfection buildings (Recipes > crafting > ingredients for everything) */
.pbuild{margin:14px 0 6px;padding:12px 16px}
.pbuild h2{margin-top:0}
.blist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.blist label{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.blist input{align-self:center}
.blist b{font-size:.95rem}
.bcost{font-size:.85rem;color:var(--muted)}
.blist li.got label{background:var(--done);border-color:var(--done-line)}
.blist li.got b{text-decoration:line-through;color:var(--done-ink)}

/* Keep repeated progress actions usable by touch and keyboard. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.todo-check{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;cursor:pointer;min-height:32px}
.todo-check .ttext{flex:1;overflow-wrap:anywhere}
.titem input[type=checkbox],input[type=checkbox]{width:24px;height:24px}
button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:700px){
  .top{flex-wrap:wrap;gap:8px}
  .top h1{flex:1 0 100%}
  .prog{flex:1 0 100%;max-width:none}
  .prog .row{white-space:nowrap}
  nav.main{scrollbar-width:thin;scrollbar-color:var(--muted) transparent;padding-bottom:5px;scroll-padding-inline:10px}
  nav.main::-webkit-scrollbar{display:block;height:4px}
  nav.main::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px}
  nav.main a,.menubtn,.themebtn,.btn,.day button,.seg button,.tbtn,.tclear,.sclose{min-height:44px}
  .menubtn,.themebtn,.day button,.tbtn,.sclose{min-width:44px;align-items:center;justify-content:center}
  .todo-check,.rmade,.srow label{min-height:44px;align-items:center}
  .titem{align-items:center}
  .maxbtn{min-height:36px}
  .fbfloat{display:none}
}