/* ============================================================
   BASE — design tokens, reset, body, motion preferences
   Load order: base → layout → room → furniture → items → container → overlays
============================================================ */
:root{
  --bg:#211a12;
  --wall:#4a3a28;
  --wall-dark:#33281b;
  --ink:#f3e9d8;
  --ink-dim:#b9a88d;
  --gold:#f5c542;
  --panel:#2c2317;
  --slot:#3a2f20;
  /* HUD BAND HEIGHT, NOT COUNTING THE STATUS BAR.

     #hud adds env(safe-area-inset-top) ON TOP of this rather than padding
     inside it — see css/layout.css for why the old version crushed the row
     into the notch. Anything that positions itself BELOW the HUD (#objective,
     #toast) has to add the same inset, spelled out the same way:

         top: calc(var(--hud-h) + env(safe-area-inset-top, 0px) + Npx)

     Deliberately not wrapped in a --hud-drop custom property: env() nested
     inside a custom property has a history of resolving to nothing in Safari,
     and Safari on a notched phone is the only place any of this matters. */
  --hud-h:64px;
  --inv-h:110px;

  /* One voice, one hand. The client speaks and signs their own notes, so the
     bubble (css/client.css) and the note card (css/quests.css) must never
     drift apart. */
  --hand:"Segoe Print","Bradley Hand","Comic Sans MS",ui-rounded,cursive;

  /* How big items on the floor are drawn.
     This is the knob for "the emoji look fuzzy": they are simply small.
     A picked-up item shows in the loupe at 48px, so at the old effective
     18.9px it had about 2.5x less detail — that gap is most of the effect.
     Raising this gives more pixels per item; the cost is that a dense house
     (Mega packs ~170 items into a room) gets more visual overlap.
     --item-pad is the invisible touch target around the glyph; keep it at
     roughly half the size so items stay easy to hit. */
  --item-size:22px;
  --item-pad:10px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
/* iOS Safari inflates small text, and Chrome on Android "font boosts" any
   sub-12px text it decides is a block — both keyed off layout width, which
   is why in-room labels looked fine on a laptop and blew out of their boxes
   on a phone. Neither is a zoom/transform problem; this is the actual fix. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  display:flex;flex-direction:column;
}

/* The `hidden` attribute alone loses to any rule that sets `display` — which
   is why .menubtn{display:block} kept the Continue button on screen even
   though showTitle() correctly set hidden=true. setHidden() in js/dom.js
   pairs the attribute with this class so it always wins. */
[hidden], .is-hidden{display:none !important}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}