/* GENERATED by site/scripts/sync-w1.mjs from design/concepts/W1-website (Design's files). Do not edit: rerun the script. */
:root{
  --bg:#f8f0e7; --bg2:#f3e6f1; --ink:#3d2a26; --ink2:#6b5550; --card:rgba(255,251,246,.9); --cardline:#ead8cf;
  --dev:#ece2ea; --devline:#cbbcc8; --scr1:#fbeff6; --scr2:#e9f3fd; --scrui:#e3d3e2; --path:#d79ab7;
  --accent:#e0679b; --accent-ink:#fff; --soft:#fde3ec; --lilac:#cdbdf0; --gold:#ffd45c; --focus:#6a4bd1;
  --plaque:#fff7ea; --plaque-ink:#4a332c; --shadow:0 6px 22px rgba(90,50,60,.12);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#1b1828; --bg2:#231d33; --ink:#f6ece8; --ink2:#c9b9c4; --card:rgba(38,32,54,.9); --cardline:#4a3f63;
  --dev:#2c2741; --devline:#4c4468; --scr1:#352d55; --scr2:#283a5a; --scrui:#4b416d; --path:#a37cc8;
  --accent:#ff8fbd; --accent-ink:#2a1420; --soft:#4a2d45; --lilac:#7e6ab8; --focus:#c6b4ff;
  --plaque:#fff3df; --plaque-ink:#4a332c; --shadow:0 6px 22px rgba(0,0,0,.35); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#1b1828; --bg2:#231d33; --ink:#f6ece8; --ink2:#c9b9c4; --card:rgba(38,32,54,.9); --cardline:#4a3f63;
  --dev:#2c2741; --devline:#4c4468; --scr1:#352d55; --scr2:#283a5a; --scrui:#4b416d; --path:#a37cc8;
  --accent:#ff8fbd; --accent-ink:#2a1420; --soft:#4a2d45; --lilac:#7e6ab8; --focus:#c6b4ff;
  --plaque:#fff3df; --plaque-ink:#4a332c; --shadow:0 6px 22px rgba(0,0,0,.35); color-scheme:dark; }

:root{--catglow:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --catglow:drop-shadow(0 0 2.5px rgba(255,236,246,.55)); } }
:root[data-theme="dark"]{ --catglow:drop-shadow(0 0 2.5px rgba(255,236,246,.55)); }
.walker svg,.cat .mini svg,.stage .bcat svg,.furn .rider svg{filter:var(--catglow)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}   /* D-32: no page scroll, no scrollbar, no pull-to-refresh */
body{background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--ink);font:16px/1.5 ui-rounded,"Segoe UI",Roboto,system-ui,sans-serif;position:relative}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}

/* ---------- device wall ---------- */
#wall{position:absolute;left:0;top:0;width:100%;z-index:0;overflow:hidden;pointer-events:none}
#wall svg.devices{position:absolute;left:0;top:0}
#walkers{position:absolute;left:0;top:0;width:100%;height:0;z-index:3;pointer-events:none}
.walker{position:absolute;width:92px;height:54px;will-change:transform}
.walker svg{width:100%;height:100%;overflow:visible;display:block}
.paths{transition:opacity .3s}
body.nopaths .paths{opacity:0}

/* ---------- page ---------- */
header.top{position:relative;text-align:center;padding:4px 0 2px}
.word{display:inline-block;font:900 clamp(30px,6vw,58px)/1.05 "Trebuchet MS",ui-rounded,"Segoe UI",system-ui,sans-serif;letter-spacing:.5px;color:var(--ink);
  background:var(--card);border:2px solid var(--cardline);padding:10px 22px 12px;border-radius:26px;box-shadow:var(--shadow)}
.word b{color:var(--accent)}
.tag{margin:12px auto 0;font-weight:700;color:var(--ink2);background:var(--card);display:inline-block;padding:4px 14px;border-radius:99px;border:1px solid var(--cardline)}
/* ---------- D-32 paged deck: a fixed box (left/top/width/height set by layoutDeck()); every page is one card at the top of it ---------- */
main#deck{position:fixed;z-index:2;left:0;top:0;width:100px;height:100px;margin:0;padding:0}
section.panel{background:var(--card);border:2px solid var(--cardline);border-radius:24px;padding:22px 22px 24px;margin:0;box-shadow:var(--shadow)}   /* D-32: backdrop-filter removed (perf rule: no CSS filters) */
section.page{position:absolute;left:0;right:0;top:0;max-height:calc(100% - var(--pgr,56px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;transition:transform .34s cubic-bezier(.2,.8,.25,1),opacity .34s ease}
section.page::-webkit-scrollbar{display:none}
section.page[hidden]{display:none}
section.page.from-below{transform:translateY(34px);opacity:0}
section.page.from-above{transform:translateY(-34px);opacity:0}
section.page.to-above{transform:translateY(-34px);opacity:0;pointer-events:none}
section.page.to-below{transform:translateY(34px);opacity:0;pointer-events:none}
section.page.noanim{transition:none}
/* a page that can't fit scrolls INSIDE the card (no visible scrollbar): soft shadows show there is more above/below */
section.page.scrolls{background:
  linear-gradient(var(--card) 40%,transparent) center top/100% 26px no-repeat local,
  linear-gradient(transparent,var(--card) 60%) center bottom/100% 26px no-repeat local,
  radial-gradient(farthest-side at 50% 0,rgba(90,50,60,.22),transparent) center top/100% 12px no-repeat scroll,
  radial-gradient(farthest-side at 50% 100%,rgba(90,50,60,.22),transparent) center bottom/100% 12px no-repeat scroll,
  var(--card)}
.more{position:sticky;bottom:0;display:none;margin:10px auto -10px;width:max-content;font:800 12px/1 system-ui,sans-serif;color:var(--ink2);background:var(--soft);border-radius:99px;padding:5px 10px;pointer-events:none}
section.page.scrolls:not(.at-end) .more{display:block}
/* pager: prev, one dot per page, next; sits at the bottom of the deck box (never in the phone floor strip) */
#pager{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max-content;display:flex;align-items:center;gap:2px;background:var(--card);border:2px solid var(--cardline);border-radius:99px;padding:3px 6px;box-shadow:var(--shadow);white-space:nowrap}
#pg-dots{display:flex;align-items:center}
#pager button{border:0;background:none;color:var(--ink);cursor:pointer;padding:0;border-radius:99px;display:grid;place-items:center}
#pager .arr{width:36px;height:36px;font:900 18px/1 system-ui,sans-serif}
#pager .arr:disabled{opacity:.3;cursor:default}
#pager .dot{width:28px;height:28px}
#pager .dot i{display:block;width:10px;height:10px;border-radius:50%;background:var(--cardline);border:2px solid var(--ink2);transition:transform .2s,background .2s}
#pager .dot[aria-current="page"] i{background:var(--accent);border-color:var(--accent);transform:scale(1.35)}
#pager .dot:hover i{background:var(--soft)}
.hero-sub{margin:14px auto 4px;max-width:560px;text-align:center;color:var(--ink2)}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cta a{display:inline-block;padding:9px 16px;border-radius:14px;border:2px solid var(--accent);font-weight:800;text-decoration:none}
.cta a.main{background:var(--accent);color:var(--accent-ink)}
.turn{margin:14px 0 0;text-align:center;font-size:13px;color:var(--ink2)}
@media (prefers-reduced-motion:reduce){ section.page{transition:none} }
section.panel h2{margin:0 0 6px;font:800 26px/1.2 "Trebuchet MS",ui-rounded,system-ui,sans-serif}
.sub{margin:0 0 16px;color:var(--ink2)}
.ph{font:600 12px/1.3 ui-monospace,Consolas,monospace;color:var(--ink2);background:var(--soft);padding:1px 6px;border-radius:6px}

/* stores */
.stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.store{border:2px solid var(--cardline);border-radius:20px;padding:14px;background:color-mix(in srgb,var(--card) 70%,var(--bg))}
.store h3{margin:0;font-size:19px}
.store .plat{font-size:13px;color:var(--ink2);margin:0 0 8px}
.store .get{display:inline-block;margin-top:6px;padding:8px 14px;border-radius:12px;border:2px solid var(--cardline);color:var(--ink2);font-weight:700;background:transparent;cursor:not-allowed}
.stage{position:relative;height:118px;margin:4px 0 2px}
.stage .bcat{position:absolute;bottom:14px;width:64px;height:37.5px}
.stage .bcat svg{width:100%;height:100%;overflow:visible}
.badge{position:absolute;right:6px;bottom:10px;border:0;background:none;padding:0;cursor:pointer;transform-origin:50% 90%;width:132px}
.badge svg{display:block;width:100%;height:auto;overflow:visible}
.badge .lbl{display:block;margin-top:-2px;font:800 12px/1.2 system-ui,sans-serif;color:var(--ink)}
.badge:hover svg,.badge:focus-visible svg{filter:drop-shadow(0 0 6px rgba(255,212,92,.9))}
.badge.squish{animation:squish .35s ease-out}
.badge.chomp{animation:chomp .16s linear infinite}
.badge.hug{transform:rotate(-8deg) translateX(-4px);transition:transform .4s}
@keyframes squish{0%{transform:scale(1,1)}35%{transform:scale(1.12,.78)}70%{transform:scale(.95,1.08)}100%{transform:scale(1)}}
@keyframes chomp{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) translateY(1px)}75%{transform:rotate(5deg) translateY(-1px)}}
.fx{position:absolute;pointer-events:none;font-size:13px;animation:rise 1.1s ease-out forwards}
@keyframes rise{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx,0),-34px) scale(1.15)}}

/* cats gallery */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.cats > .cat{border:2px solid var(--cardline);border-radius:16px;padding:8px 6px 8px;text-align:center;position:relative}
.cat .mini{height:36px;display:flex;justify-content:center;align-items:flex-end}
.cat .mini svg{width:62px;height:36px;overflow:visible}
.cat b{display:block;font-size:14px;margin-top:4px}
.prem{position:absolute;top:-9px;right:8px;font:800 10px/1 system-ui;background:linear-gradient(180deg,#ffe58a,#ffc94a);color:#5a3b10;border:1.5px solid #c98a1c;border-radius:99px;padding:3px 6px}

.shop{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.coin{width:64px;height:64px;flex:none}
footer{text-align:center;color:var(--ink2);font-size:14px;padding:16px 0 0}
footer .row{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center;background:var(--card);padding:8px 16px;border-radius:14px;border:1px solid var(--cardline)}

/* ---------- furniture nav ---------- */
#furn{position:fixed;inset:0;z-index:5;pointer-events:none}
.furn{position:absolute;pointer-events:auto;border:0;background:none;padding:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 4px 6px rgba(70,40,40,.18))}
.furn.dragging{cursor:grabbing;filter:drop-shadow(0 12px 14px rgba(70,40,40,.28));z-index:3}
.furn .art{position:relative}
.furn .art>svg{display:block}
.furn .plaque{margin-top:-4px;background:var(--plaque);color:var(--plaque-ink);border:2px solid #4a332c;border-radius:12px;padding:3px 12px;font:800 var(--plq,20px)/1.25 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 0 #4a332c}
.furn:hover .plaque,.furn:focus-visible .plaque{background:#ffe3ef}
.furn .rider{position:absolute;pointer-events:none}
.furn .rider svg{width:100%;height:100%;overflow:visible;display:block}
.hint{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:6;background:var(--card);border:1px solid var(--cardline);padding:4px 12px;border-radius:99px;font-size:13px;color:var(--ink2);pointer-events:none;transition:opacity .6s}

/* ---------- review page ---------- */
#review{position:fixed;inset:0;z-index:20;display:none;align-items:flex-start;justify-content:center;background:rgba(40,25,35,.45);overflow:auto;padding:40px 16px}
#review.open{display:flex}
#review .sheet{background:var(--bg);color:var(--ink);max-width:560px;width:100%;border-radius:24px;border:2px solid var(--cardline);padding:22px;box-shadow:var(--shadow);position:relative}
#review h2{margin:0 0 4px;font:800 28px/1.2 "Trebuchet MS",ui-rounded,system-ui,sans-serif}
#review .x{position:absolute;right:14px;top:12px;border:2px solid var(--cardline);background:var(--card);color:var(--ink);border-radius:12px;padding:4px 10px;font-weight:800;cursor:pointer}
.rlinks{display:grid;gap:10px;margin:14px 0}
.rlink{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:2px solid var(--cardline);background:var(--card);text-decoration:none;font-weight:700}
.rlink:hover{border-color:var(--accent)}
.rlink small{display:block;font-weight:500;color:var(--ink2)}
.rlink svg{width:34px;height:34px;flex:none}
.empty{padding:12px 14px;border-radius:16px;background:var(--soft)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{padding:6px 12px;border-radius:99px;border:2px solid var(--cardline);text-decoration:none;font-weight:700}

/* ---------- concept controls ---------- */
#cc{position:fixed;right:10px;bottom:10px;z-index:15;background:var(--card);border:2px solid var(--cardline);border-radius:16px;padding:8px 10px;font-size:13px;max-width:290px;box-shadow:var(--shadow)}
#cc summary{cursor:pointer;font-weight:800}
#cc .btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#cc button{font:700 12px/1 system-ui;padding:7px 9px;border-radius:10px;border:2px solid var(--cardline);background:var(--bg);color:var(--ink);cursor:pointer}
#cc button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
details.notes{font-size:14px}
details.notes summary{cursor:pointer;font-weight:800}
details.notes li{margin:4px 0}
@media (max-width:699px){ .furn .plaque{padding:1px 6px;border-radius:9px;font-size:11.5px} #cc{top:8px;bottom:auto;right:8px} .hint{bottom:auto;top:8px;left:8px;transform:none;max-width:60%}
  section.panel{padding:16px 14px 18px;border-radius:20px} section.panel h2{font-size:22px} .cats{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} .cats > .cat b{font-size:12.5px} .turn{display:none} .hero-sub{font-size:15px;line-height:1.45} }
@media (max-height:560px){ section.panel{padding:12px 14px 14px} .hero-sub{margin-top:8px} }
@media (max-width:699px) and (max-height:720px){ .word{font-size:26px;padding:6px 14px 8px;border-radius:20px} .tag{font-size:13px;margin-top:8px} .hero-sub{margin:8px auto 0;font-size:14.5px;line-height:1.4} .cta{margin-top:10px} .cta a{padding:7px 12px} .turn{display:none} }
@media (prefers-reduced-motion:reduce){ .badge.chomp,.badge.squish{animation:none} .fx{display:none} }

/* site build (scripts/sync-w1.mjs): concept notes, concept controls and placeholder chips are not part of the live site */
#notes,#cc,.ph{display:none!important}