/* Paper Garden: one look for every room. Link this FIRST, then the room's own CSS.
   Tokens come from the Maker/Calculator (backlog §2). Rooms override sparingly. */
:root{
  color-scheme:light;
  --ink:#304c3e; --muted:#65735c; --paper:#fbf4dc; --cream:#f3e8c6; --edge:#bda879; --edge-dark:#ad9765;
  --gold:#f2ce71; --gold-edge:#b99340; --gold-dark:#a8853a; --picked:#dfe8c1; --picked-edge:#76905a; --glow:#fff4b0; --focus:#358270; --real-soft:#fbe9b5; --tray:#cfc7ad; --sage:#c9d6b0; --forest:#35563e; --mine:#4a86b5; --mine-soft:#cfe6f7; --count-b:#c8643b; --water:#cfe3ea; --glass:#ffffffc0; --block-edge:#7b694f99; --soil:#b98d5e; --frosting:#f3cfe0; --leaf:#76905a; --pot:#c98059; --pot-edge:#9d6348;
  --prop-shadow:drop-shadow(4px 8px 4px #3a4a2a40);   /* things standing in a scene (Town props, a pet) */
  --font:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23968766' opacity='.07' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
/* The shared header bar + 🏠 Home button (same spot, same size, every room). */
.nb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:var(--grain),var(--paper);border-bottom:3px solid var(--edge);font-family:var(--font);color:var(--ink)}
.nb-home{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;font-size:1.8rem;text-decoration:none;background:var(--grain),var(--paper);border:1px solid var(--edge);border-bottom:3px solid var(--edge-dark);box-shadow:0 2px 2px #675b2a12;-webkit-tap-highlight-color:transparent}
.nb-home:active{transform:translateY(2px);border-bottom-width:1px}
.nb-title{font:800 1.3rem var(--font);color:var(--ink);margin:0}

/* Page ground: the quiet sage-cream every room sits on (Maker/Calculator). */
:root{--ground:#ecebd5;--meta:#fbf4dc}
.nb-page{margin:0;min-height:100vh;background:var(--grain),radial-gradient(ellipse at 85% 30%,#fcf7e5,transparent 55%),var(--ground);color:var(--ink);font-family:var(--font)}
/* Buttons + pills: paper, a darker bottom edge, press-down on tap. */
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:10px 18px;border-radius:16px;font:800 1.1rem var(--font);color:var(--ink);text-decoration:none;cursor:pointer;background:var(--grain),var(--paper);border:1px solid var(--edge);border-bottom:3px solid var(--edge-dark);box-shadow:0 2px 2px #675b2a12;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nb-btn:active{transform:translateY(2px);border-bottom-width:1px}
.nb-btn[hidden]{display:none}
.nb-btn.big{min-height:60px;min-width:200px;font-size:1.3rem}   /* the one big action on a screen (Print, build bar) */
/* A row of picture tools (dress-up stickers: ui/stickers.mjs) — same in every room. */
.drow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.drow>[data-tool]{min-width:60px;min-height:60px;font-size:1.9rem;padding:4px 8px}
/* A round picture button (Town's games, walking pad, ↶): one size, one look. */
.nb-round{width:64px;height:64px;border-radius:50%;font-size:2rem;padding:0;background:var(--paper);display:grid;place-items:center;line-height:1}
.nb-round[hidden]{display:none}
.nb-round.gold{background:var(--grain),var(--gold);border-color:var(--gold-edge)}   /* the next thing to tap */
.nb-round.big{width:80px;height:80px;font-size:2.6rem}
.nb-round:disabled{opacity:.45}
.nb-round[aria-pressed=true]{background:var(--grain),var(--picked);outline:3px solid var(--picked-edge);outline-offset:1px}
/* A button that is a picture in the scene (a pet, the cake, a lamp): no button chrome at all. */
.nb-bare,.nb-bare:hover,.nb-bare:active{background:none;border:0;box-shadow:none;padding:0;cursor:pointer}
/* A little cheer hop (Houses' party guests). Rooms whose movers are positioned with transform keep their own. */
.nb-hop{animation:nb-hop .6s ease-out 2}
@keyframes nb-hop{40%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.nb-hop{animation:none}}
/* A row of big picture choices (pets, the tea menu); the picked one wears the shared picked look. */
.nb-picks{display:flex;gap:10px;flex-wrap:wrap}
/* A Numberblock figure with its numeral underneath (games/parts.mjs figTile). --fig sets the picture size. */
.nb-shelf{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px;border-radius:16px;border:2px dashed var(--edge)}
.nb-shelf.done{border-style:solid;border-color:var(--gold);box-shadow:0 0 18px var(--glow)}   /* every slot found */
.nb-slot{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:84px;min-height:72px;padding:4px;border-radius:12px;background:var(--grain),var(--paper);border:1px solid var(--edge);font-weight:800;font-size:.9rem}
.nb-slot.empty{border-style:dashed;background:none}
.nb-fig{display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:900;line-height:1.1}
.nb-fig svg{width:var(--fig,72px);height:var(--fig,72px)}
.nb-picks>button{min-width:64px;min-height:64px}
.nb-picks>button[aria-pressed=true]{background:var(--grain),var(--picked);outline:3px solid var(--picked-edge);outline-offset:1px}
.nb-btn.gold{background:var(--grain),var(--gold);border-color:var(--gold-edge)}
.nb-btn.mine{background:var(--grain),var(--mine-soft);border-color:var(--mine)}
.nb-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;font:800 .95rem var(--font);color:var(--ink);background:var(--cream);border:1px solid var(--edge);text-decoration:none}
.nb-card{background:var(--grain),var(--paper);border:1px solid var(--edge);border-bottom:5px solid var(--edge);border-radius:18px;color:var(--ink)}
/* Doors on Home: one picture tile per room. --door tints the picture well; each room has its own tint token. */
:root{--door-town:#c9d6b0; --door-maker:#f2ce71; --door-houses:#e5cbe9; --door-play:#cfe5bf; --door-numbers:#bfe0f2; --door-line:#f6e2a2; --door-tt:#f5d3b0; --door-badges:var(--frosting); --door-calculator:#d9e6c4; --door-lessons:#dce8bf; --door-letters:#f6d0c4;}
.nb-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;width:min(100%,980px)}
.nb-door{--door:var(--sage);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:12px 8px 14px;border-radius:24px;font:800 1.3rem/1.15 var(--font);color:var(--ink);text-decoration:none;cursor:pointer;background:var(--grain),var(--paper);border:1px solid var(--edge);border-bottom:6px solid var(--edge-dark);box-shadow:0 4px 10px #675b2a1c;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nb-door .nb-pic{display:grid;place-items:center;width:84px;height:84px;border-radius:22px;background:var(--door);font-size:3rem;line-height:1}
.nb-door:active{transform:translateY(3px);border-bottom-width:3px}
/* A door that turns the page (Home: ➡️ More; back is the usual ‹ top-left): same tile, gold well = the pager's gold. */
.nb-door-turn{--door:var(--gold)}
@media(max-width:520px){.nb-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.nb-door{min-height:132px;font-size:1.15rem}.nb-door .nb-pic{width:72px;height:72px;font-size:2.6rem}}
/* Pager: ◀ label ▶, big gold arrows. One component: <nb-pager> (ui/nb-pager.js). */
.nb-pager{display:flex;align-items:center;justify-content:center;gap:12px;font:800 1.15rem var(--font);color:var(--ink)}
.nb-pager>.nb-pager-prev,.nb-pager>.nb-pager-next{flex:none;min-width:64px;min-height:56px;padding:0 14px;border-radius:16px;font:900 1.4rem var(--font);color:var(--ink);background:var(--grain),var(--gold);border:1px solid var(--gold-edge);border-bottom:3px solid var(--gold-dark);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nb-pager>.nb-pager-prev:active,.nb-pager>.nb-pager-next:active{transform:translateY(2px);border-bottom-width:1px}
.nb-pager>button:disabled{opacity:.3;cursor:default}
.nb-pager[hide-ends]>button:disabled{visibility:hidden}
.nb-pager-label{min-width:6ch;text-align:center;white-space:nowrap}
.nb-pager[big]>.nb-pager-label{font-size:2rem;min-width:3ch}
/* Page chips inside a pager (Maker hundreds, album thousands): .nb-chips = 5 across, .nb-chip = one page.
   The page you're on is aria-pressed (picked look). .long/.longer shrink 5- and 6-digit labels. */
.nb-chips{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.nb-chip{min-height:48px;padding:6px 2px;font:800 .95rem var(--font);color:var(--ink);white-space:nowrap;cursor:pointer;background:var(--grain),var(--paper);border:1px solid var(--edge);border-bottom:3px solid var(--edge-dark);border-radius:12px;touch-action:manipulation}
.nb-chip[aria-pressed=true]{background:var(--grain),var(--picked);outline:3px solid var(--picked-edge);outline-offset:1px}
.nb-chip.wide{flex:0 0 auto;padding:10px 16px}   /* a free-flowing row of chips (badge bands, number-line thousands) */
.nb-chips.long .nb-chip{font-size:.85rem;letter-spacing:-.02em;padding:6px 0}
@media(max-width:520px){.nb-chips.long .nb-chip{font-size:.7rem;letter-spacing:-.05em}.nb-chips.longer .nb-chip{font-size:.6rem}}
/* Picked / you-are-here: one look in every room (sage fill, green outline). Rooms with their own buttons use the tokens. */
.nb-btn:is([aria-pressed=true],[aria-current=true]){background:var(--grain),var(--picked);outline:3px solid var(--picked-edge);outline-offset:1px}