/* =============================================================================
   Shelf Life stylesheet
   -----------------------------------------------------------------------------
   One dark room, one light, a piece of furniture standing in it. The creatures
   are the only saturated, moving things on the page; everything else is either
   unlit (recedes), engraved into something lit (the plank faces), or the single
   ember of a primary button.

   ORDER OF THE FILE
     1. tokens         the six rooms write a handful of variables onto <html>
                       (content/decor.js); everything else is derived here
     2. base + type
     3. chrome         top bar, buttons, the phone tab bar, the More tray
     4. layout         three panes: shelf / plots / notes
     5. the cabinet    carcass, planks, slots, nameplates, need lights
     6. the creatures  sprite boxes, idle motion, limbs, gaits, travel, duets
     7. notes, plots   paper on the wall, the conspiracy card, side doors
     8. sheets         card, studio, decorate, narrator, guide, incidents
     9. phone          <=720px: tabs, bottom bar, the small shelf
    10. motion off

   Two rules other modules depend on:
     .note { white-space: pre-line }   multi-line note forms
     .note--doc                        typed documents
   ============================================================================= */

/* ---- 1. tokens ------------------------------------------------------------ */
:root{
  /* fixed palette */
  --pink:#FF8FB8; --mint:#7FD8C0; --amber:#F2B441; --blood:#A32C3C; --paper:#EDE3D2;
  /* the room, as content/decor.js writes it (these are the fallbacks for first paint) */
  --room-a:#33203D; --room-b:#1A1220; --panel-a:#2C1D35; --panel-b:#241830;
  --line:#4A3557; --rule:#3A2A47; --surface:#241833; --surface-hi:#372748; --field:#1C1327;
  --bone:#F2E9DC; --bone-dim:#C9BCAE; --wall-ink:rgba(242,233,220,.14); --room-key:#F2C083;
  --wood:#5C3A47; --wood-lip:#7A4C5B;
  /* type */
  --display:'Gloock',Georgia,'Times New Roman',serif;
  --body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat','Bradley Hand','Segoe Print',cursive;
  /* geometry */
  --shell:1180px; --r:10px; --r-lg:16px;
  --topbar-h:58px; --tabbar-h:64px;
  /* the scale: new rules use these, and css/polish.css moves the drifters onto them */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-sheet:20px; --radius-pill:999px;
  --text-xs:11px; --text-sm:12.5px; --text-md:14px; --text-body:15px; --text-lg:18px; --text-xl:22px; --text-display:26px;
  --shadow-1:0 1px 0 rgba(0,0,0,.32),0 8px 18px -12px rgba(0,0,0,.7); --shadow-2:0 14px 30px -16px #000; --shadow-3:0 40px 100px -30px #000;
  --dur-press:.06s; --dur-quick:.14s; --dur-spring:.34s; --dur-sheet:.42s;
  /* Safe areas. The Android app's SystemBars plugin writes --safe-area-inset-*
     because older WebViews report env() wrongly edge to edge; browsers never
     set them, so the web keeps using env() exactly as before. */
  --sat:var(--safe-area-inset-top,env(safe-area-inset-top,0px)); --sab:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  --sal:var(--safe-area-inset-left,env(safe-area-inset-left,0px)); --sar:var(--safe-area-inset-right,env(safe-area-inset-right,0px));
  /* the bulb, and the one direction every shadow agrees on */
  --key:var(--room-key);
  --key-x:32%; --key-y:-8%; --cast-dx:22px; --cast-dy:16px;
  /* night palette (plain fallbacks; the @supports blocks below derive the real ones) */
  --night:#08060D; --night-2:#120D1A; --night-3:#1A1424;
  --case-lit:#170F22; --case-mid:#0C0914; --case-deep:#06040A;
  --ink:#F2E9DC; --ink-2:#B8AB9D; --ink-3:#8F857A;
  --hair:rgba(242,233,220,.10); --hair-lit:rgba(242,233,220,.17); --edge:rgba(242,233,220,.22);
  --glass:rgba(242,233,220,.05); --glass-2:rgba(242,233,220,.09);
  --accent-ink:#1A0A11;
  --ok:#8FE0CA; --warn:#F5C465; --danger:#FF8A96;
  --paper-lit:#F0E3CD;
  --key-soft:rgba(242,192,131,.14); --key-mid:rgba(242,192,131,.32); --key-hi:rgba(242,192,131,.62);
  --pink-glow:rgba(255,143,184,.35);
}
@supports (color:hsl(from red h s l)){
  :root{
    --night:hsl(from var(--room-b) h calc(s * .55 + 8) 3.6);
    --night-2:hsl(from var(--room-a) h calc(s * .55 + 10) 6.8);
    --night-3:hsl(from var(--room-a) h calc(s * .5 + 10) 10);
    --case-lit:hsl(from var(--room-a) h calc(s * .5 + 12) 9.5);
    --case-mid:hsl(from var(--room-b) h calc(s * .45 + 9) 5);
    --case-deep:hsl(from var(--room-b) h calc(s * .4 + 7) 2.4);
    --ink:hsl(from var(--bone) h calc(s * .5 + 5) 93);
    --ink-2:hsl(from var(--bone) h calc(s * .45 + 4) 71);
    --ink-3:hsl(from var(--bone) h calc(s * .3 + 3) 57);
    --accent-ink:hsl(from var(--pink) h calc(s * .3) clamp(9,calc((l - 55) * -1000),96));
  }
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  :root{
    --hair:color-mix(in srgb,var(--ink) 10%,transparent);
    --hair-lit:color-mix(in srgb,var(--ink) 17%,transparent);
    --edge:color-mix(in srgb,var(--ink) 24%,transparent);
    --glass:color-mix(in srgb,var(--ink) 5%,transparent);
    --glass-2:color-mix(in srgb,var(--ink) 9%,transparent);
    --key-soft:color-mix(in srgb,var(--key) 14%,transparent);
    --key-mid:color-mix(in srgb,var(--key) 32%,transparent);
    --key-hi:color-mix(in srgb,var(--key) 62%,transparent);
    --paper-lit:color-mix(in srgb,var(--paper) 86%,var(--key));
    --pink-glow:color-mix(in srgb,var(--pink) 36%,transparent);
    --ok:color-mix(in srgb,var(--mint) 55%,var(--ink));
    --warn:color-mix(in srgb,var(--amber) 55%,var(--ink));
    --danger:color-mix(in srgb,var(--blood) 40%,var(--ink));
  }
}

/* ---- 2. base + type ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;background:var(--night);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overscroll-behavior-y:none;
  padding-bottom:calc(24px + var(--sab));
}
/* The room: a fixed layer, so the furniture moves through it when you scroll. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 0%,var(--key-soft),transparent 72%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%),
    var(--night);
}
#wall{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9}
body { --wall-pattern: none; --wall-pattern-size: auto; }
#wall { background-image: var(--wall-pattern); background-size: var(--wall-pattern-size); }
body.wall-stripes { --wall-pattern: repeating-linear-gradient(90deg,var(--wall-ink) 0 2px,transparent 2px 30px); }
body.wall-dots { --wall-pattern: radial-gradient(var(--wall-ink) 1.5px,transparent 1.6px); --wall-pattern-size: 26px 26px; }
body.wall-grid { --wall-pattern: repeating-linear-gradient(0deg,var(--wall-ink) 0 1px,transparent 1px 36px),repeating-linear-gradient(90deg,var(--wall-ink) 0 1px,transparent 1px 36px); }
body.wall-web { --wall-pattern: repeating-radial-gradient(circle at 0 0,transparent 0 30px,var(--wall-ink) 30px 31px),repeating-radial-gradient(circle at 100% 0,transparent 0 30px,var(--wall-ink) 30px 31px); }
body.wall-diamond { --wall-pattern: repeating-linear-gradient(45deg,var(--wall-ink) 0 1px,transparent 1px 28px),repeating-linear-gradient(-45deg,var(--wall-ink) 0 1px,transparent 1px 28px); }
/* dust in the beam */
#wall::before{
  content:'';position:absolute;left:0;right:0;top:-4vh;height:70vh;pointer-events:none;opacity:.14;
  background-image:
    radial-gradient(2px 2px at 22% 34%,var(--key),transparent),
    radial-gradient(1.6px 1.6px at 37% 62%,var(--key),transparent),
    radial-gradient(2.2px 2.2px at 47% 18%,var(--key),transparent),
    radial-gradient(1.5px 1.5px at 58% 71%,var(--key),transparent),
    radial-gradient(2px 2px at 66% 41%,var(--key),transparent),
    radial-gradient(1.7px 1.7px at 29% 9%,var(--key),transparent);
  animation:dust 38s ease-in-out infinite alternate;
}
@keyframes dust{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-12px,-30px,0)}}
/* grain in the shadows */
#wall::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%,transparent 30%,#000 100%);
  mask-image:radial-gradient(120% 90% at 50% 42%,transparent 30%,#000 100%);
}

h1,h2,h3{margin:0;font-weight:400}
h2{font-family:var(--display);font-size:26px;line-height:1.1;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation}
button:disabled{cursor:default}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
::selection{background:var(--pink);color:var(--accent-ink)}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:200;background:var(--paper);color:#231c25;padding:12px;border-radius:6px}
.skip-link:focus{transform:none}
.eyebrow,.tool-label,.decor-section h3,.door-kicker{
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.hint{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:7px}
.card-meta{font-size:13px;color:var(--ink-2);line-height:1.45}

/* ---- 3. chrome: buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:var(--r);
  font-weight:700;font-size:14px;line-height:1.1;letter-spacing:.01em;
  color:var(--ink);background:var(--glass);border:1px solid var(--hair-lit);
  box-shadow:inset 0 1px 0 var(--hair);
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .08s ease,box-shadow .14s ease;
  -webkit-user-select:none;user-select:none;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{background:var(--glass-2);border-color:var(--edge)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.4}
.btn-ghost{background:transparent;color:var(--ink-2);box-shadow:none;border-color:var(--hair)}
.btn-ghost:hover,.btn-ghost[aria-pressed="true"]{color:var(--ink);background:var(--glass);border-color:var(--hair-lit)}
.btn-sm{min-height:36px;padding:7px 12px;font-size:13px;border-radius:8px}
.btn-icon{width:36px;padding:0}
.btn-wide{width:100%}
.btn-primary,.btn-primary:hover{
  background:var(--pink);color:var(--accent-ink);border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 24px -10px var(--pink);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--blood) 45%,transparent);box-shadow:none}
.btn-danger:hover{background:color-mix(in srgb,var(--blood) 18%,transparent);border-color:var(--blood)}
/* The heartbeat: lit by the bulb rather than the accent. */
.btn-check{
  background:linear-gradient(180deg,var(--key-soft),transparent),var(--glass);
  border-color:var(--key-mid);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--key-soft),0 10px 26px -14px var(--key-hi);
}
.btn-check:hover{border-color:var(--key-hi);background:linear-gradient(180deg,var(--key-mid),transparent),var(--glass)}
.btn-check svg{color:var(--key)}
@media (pointer:coarse){.btn-sm{min-height:44px}}

/* ---- 3. chrome: top bar ---------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:16px;
  min-height:calc(var(--topbar-h) + var(--sat));padding:var(--sat) 20px 0;
  padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar));
  background:color-mix(in srgb,var(--night) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
.wordmark{
  font-family:var(--display);font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:baseline;gap:.15em;flex:none;
}
.wordmark em{font-style:normal;color:var(--key)}
.topbar-actions{display:flex;gap:8px;margin-left:auto;flex:none}
/* the status line: small caps labels, display numerals */
.status{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;overflow:hidden;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.status>span{display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-left:1px solid var(--hair-lit);line-height:1.9}
.status>span:first-child{border-left:0}
.status b{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.status .bad::before,.status .mid::before,.status .good::before{content:'';width:7px;height:7px;border-radius:50%;flex:none}
.status .bad::before{background:var(--blood);box-shadow:0 0 8px var(--blood)}
.status .mid::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.status .good::before{background:var(--mint);box-shadow:0 0 8px var(--mint)}

/* ---- night on the shelf ------------------------------------------------------
   engine/tick.js isNight() decides, ui/main.js sets body.night once a minute.
   The bulb is the only light left on, so the case falls away into black, a
   thin wash of moon comes in from the top right, and the eyes catch it.
   ---------------------------------------------------------------------------- */
body.night{--night:#040309;--night-2:#0B0810;--night-3:#120D18;--case-lit:#0C0813;--case-mid:#06040A;--case-deep:#020104;
  --key-soft:color-mix(in srgb,var(--key) 11%,transparent)}
body.night::before{background:radial-gradient(60% 42% at 50% 0%,color-mix(in srgb,var(--key) 9%,transparent),transparent 70%),radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(0,0,0,.72) 100%),var(--night)}
body.night .cabinet::before{background:radial-gradient(80% 64% at var(--key-x) 2%,transparent 18%,rgba(0,0,0,.58) 66%,rgba(0,0,0,.9) 100%)}
/* Keep chosen wood and engraved labels readable; the cabinet vignette owns night lighting. */
body.night #wall::before{opacity:.07}
body.night .sl2 .sl-part[data-part="eye"]{filter:drop-shadow(0 0 2.5px rgba(255,250,232,.7)) drop-shadow(0 0 6px rgba(255,250,232,.28))}
body.night .sl2.sl-asleep .sl-part[data-part="eye"]{filter:none}
body.night .prop[data-prop="candle"]::before,body.night .prop[data-prop="lantern"]::before,body.night .prop[data-prop="lamp"]::before{filter:saturate(1.2) brightness(1.15)}
body.night .status .moon i{box-shadow:inset var(--ms,0px) 0 0 0 var(--night-3),0 0 10px rgba(234,223,199,.55),0 0 22px rgba(176,203,236,.35)}
/* the moon in the status line */
.status .moon{gap:8px}
.status .moon i{display:inline-block;width:13px;height:13px;border-radius:50%;background:#EADFC7;border:1px solid rgba(0,0,0,.45);
  box-shadow:inset var(--ms,0px) 0 0 0 var(--night-3),0 0 6px rgba(234,223,199,.3)}
.status .moon-name{font-size:10.5px;letter-spacing:.14em}

/* ---- 3. chrome: the tab bar (phones only; see §9) -------------------------- */
.tabbar{display:none}
/* ---- 3. chrome: the More tray ---------------------------------------------- */
.tray-scrim{position:fixed;inset:0;z-index:57;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tray-scrim[hidden]{display:none}
.tray{
  position:fixed;z-index:58;top:calc(var(--topbar-h) + var(--sat) + 8px);right:calc(16px + var(--sar));width:min(380px,calc(100vw - 32px));
  padding:12px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--hair-lit);
  box-shadow:0 30px 70px -24px #000,inset 0 1px 0 var(--key-soft);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:100% 0;pointer-events:none;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear .18s;
}
.tray.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.tray-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 10px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.tray-head h2{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.tray-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tray-item{flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:10px 12px;text-align:left;background:transparent;border-color:transparent;box-shadow:none}
.tray-item:hover{background:var(--glass);border-color:var(--hair-lit)}
.tray-item span{font-size:14px}
.tray-item small{font-size:11.5px;font-weight:400;color:var(--ink-3);line-height:1.3}
.tray-item[aria-pressed="true"]{background:var(--key-soft);border-color:var(--key-mid)}
.tray-item[aria-pressed="true"] span::after{content:' ·';color:var(--key)}
.tray-item[hidden]{display:none}

/* ---- 4. layout -------------------------------------------------------------- */
.app{
  max-width:var(--shell);margin:0 auto;padding:18px 20px 30px;
  padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar));
  display:grid;grid-template-columns:minmax(0,1fr) 336px;grid-template-areas:"shelf plots" "notes plots";
  gap:22px 26px;align-items:start;
}
.pane-shelf{grid-area:shelf;min-width:0}
.pane-plots{grid-area:plots;min-width:0;position:sticky;top:calc(var(--topbar-h) + var(--sat) + 18px);display:flex;flex-direction:column;gap:14px}
.pane-notes{grid-area:notes;min-width:0}
.storage-warn{max-width:var(--shell);margin:14px auto 0;padding:11px 16px;border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--amber) 50%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--ink);font-size:13px;line-height:1.45}
.storage-warn[hidden]{display:none}
@media (max-width:1040px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"shelf" "plots" "notes"}
  .pane-plots{position:static}
}

/* ---- 5. the cabinet ---------------------------------------------------------
   .cabinet-wrap is the carcass (two side returns, a shadow under the cornice);
   #cabinet is the back wall with the three shelves standing in it. A shelf row
   is six slots over a plank; the plank's front face carries the engraved names
   and the need lights sit in the strip beneath it. The key light is at the top
   left, so the left return shows a lit inner face and the right one turns away
   into the dark, and every cast shadow falls down and to the right.
   ---------------------------------------------------------------------------- */
.stage{position:relative}
.cabinet-wrap{
  --case-pad:22px; --return-w:18px;
  --shelf-w:min(calc(var(--shell) - 40px - 336px - 26px),calc(100vw - 40px - 336px - 26px));
  --rail:calc(var(--shelf-w) - var(--case-pad) * 2 - var(--return-w) * 2);
  position:relative;border-radius:14px;
  padding:0 var(--return-w);
  background:
    linear-gradient(90deg,rgba(0,0,0,.9) 0 1px,color-mix(in srgb,#000 50%,var(--wood)) 1px 8px,color-mix(in srgb,var(--wood-lip) 55%,var(--key)) 8px 12px,color-mix(in srgb,#000 30%,var(--wood)) 12px var(--return-w),transparent var(--return-w) calc(100% - var(--return-w)),color-mix(in srgb,#000 40%,var(--wood)) calc(100% - var(--return-w)) calc(100% - 6px),rgba(0,0,0,.92) calc(100% - 6px) 100%),
    var(--wood);
  box-shadow:0 0 170px -50px var(--key-mid),0 40px 80px -40px #000,inset 0 0 0 1px rgba(0,0,0,.6);
}
/* One column between the phone and the desktop layouts: the cabinet has the
   whole width, so the creatures are sized from it rather than from a sidebar
   that is no longer beside them. */
@media (min-width:721px) and (max-width:1040px){.cabinet-wrap{--shelf-w:calc(100vw - 40px)}}
/* the top rail of the case */
.cabinet-wrap::before{
  content:'';position:absolute;left:0;right:0;top:0;height:14px;z-index:5;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--wood-lip) 70%,var(--key)) 0 2px,color-mix(in srgb,#000 22%,var(--wood)) 2px 9px,color-mix(in srgb,#000 55%,var(--wood)) 9px 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.55);
}
.cabinet{
  position:relative;padding:46px var(--case-pad) 0;border-radius:2px;
  background:
    radial-gradient(120% 60% at var(--key-x) var(--key-y),color-mix(in srgb,var(--key) 30%,transparent) 0%,color-mix(in srgb,var(--key) 9%,transparent) 42%,transparent 74%),
    repeating-linear-gradient(90deg,rgba(255,240,215,.026) 0 1px,transparent 1px 52px),
    linear-gradient(180deg,var(--case-lit) 0%,var(--case-mid) 46%,var(--case-deep) 100%);
  box-shadow:inset 0 16px 26px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,240,215,.04);
  overflow-x:clip;overflow-clip-margin:12px;
}
.cabinet::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 64% at var(--key-x) 2%,transparent 26%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.82) 100%)}

/* cobwebs in the top corners: nobody dusts up there */
.cabinet-wrap::after{content:'';position:absolute;z-index:4;left:var(--return-w);top:14px;width:118px;height:118px;pointer-events:none;opacity:.28;
  background:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'><path%20d='M0%200L118.0%200.0M0%200L109.0%2045.2M0%200L83.4%2083.4M0%200L45.2%20109.0M0%200L0.0%20118.0M26.0%200.0Q22.4%204.5%2024.0%209.9M24.0%209.9Q19.0%2012.7%2018.4%2018.4M18.4%2018.4Q12.7%2019.0%209.9%2024.0M9.9%2024.0Q4.5%2022.4%200.0%2026.0M50.0%200.0Q43.2%208.6%2046.2%2019.1M46.2%2019.1Q36.6%2024.4%2035.4%2035.4M35.4%2035.4Q24.4%2036.6%2019.1%2046.2M19.1%2046.2Q8.6%2043.2%200.0%2050.0M76.0%200.0Q65.6%2013.0%2070.2%2029.1M70.2%2029.1Q55.6%2037.2%2053.7%2053.7M53.7%2053.7Q37.2%2055.6%2029.1%2070.2M29.1%2070.2Q13.0%2065.6%200.0%2076.0M104.0%200.0Q89.8%2017.9%2096.1%2039.8M96.1%2039.8Q76.1%2050.8%2073.5%2073.5M73.5%2073.5Q50.8%2076.1%2039.8%2096.1M39.8%2096.1Q17.9%2089.8%200.0%20104.0'%20fill='none'%20stroke='%23F2E9DC'%20stroke-width='.9'%20stroke-linecap='round'/></svg>") left top/100% 100% no-repeat}
.stage::before{content:'';position:absolute;z-index:4;right:var(--return-w,18px);top:14px;width:96px;height:96px;pointer-events:none;opacity:.2;
  background:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'><path%20d='M120%200L2.0%200.0M120%200L11.0%2045.2M120%200L36.6%2083.4M120%200L74.8%20109.0M120%200L120.0%20118.0M94.0%200.0Q97.6%204.5%2096.0%209.9M96.0%209.9Q101.0%2012.7%20101.6%2018.4M101.6%2018.4Q107.3%2019.0%20110.1%2024.0M110.1%2024.0Q115.5%2022.4%20120.0%2026.0M70.0%200.0Q76.8%208.6%2073.8%2019.1M73.8%2019.1Q83.4%2024.4%2084.6%2035.4M84.6%2035.4Q95.6%2036.6%20100.9%2046.2M100.9%2046.2Q111.4%2043.2%20120.0%2050.0M44.0%200.0Q54.4%2013.0%2049.8%2029.1M49.8%2029.1Q64.4%2037.2%2066.3%2053.7M66.3%2053.7Q82.8%2055.6%2090.9%2070.2M90.9%2070.2Q107.0%2065.6%20120.0%2076.0M16.0%200.0Q30.2%2017.9%2023.9%2039.8M23.9%2039.8Q43.9%2050.8%2046.5%2073.5M46.5%2073.5Q69.2%2076.1%2080.2%2096.1M80.2%2096.1Q102.1%2089.8%20120.0%20104.0'%20fill='none'%20stroke='%23F2E9DC'%20stroke-width='.9'%20stroke-linecap='round'/></svg>") right top/100% 100% no-repeat}
/* the floor of the case */
.cabinet::after{content:'';display:block;height:24px;margin:0 calc(-1 * var(--case-pad));
  background:linear-gradient(180deg,var(--key-soft) 0,transparent 62%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.9))}
#cabinet>.shelf-row{--stop:.42}
#cabinet>.shelf-row:nth-child(1){--stop:1}
#cabinet>.shelf-row:nth-child(2){--stop:.66}

.shelf-row{
  --pitch:calc(var(--rail) / 6);
  --pet-size:clamp(112px,min(calc(var(--pitch) * 1.16),calc((100dvh - 430px) / 2)),178px);
  --slot-h:calc(var(--pet-size) + 14px);
  --plank-h:26px;--label-drop:12px;
  position:relative;display:flow-root;
}
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:0;min-height:var(--slot-h);padding:0}
.slot{position:relative;min-width:0;display:flex;align-items:flex-end;justify-content:center;height:var(--slot-h);border-radius:6px;transition:background .12s ease}
/* the pool of key light on the wood at the feet */
.slot::before{content:'';position:absolute;z-index:2;pointer-events:none;left:50%;transform:translateX(-50%);
  bottom:calc(-1 * var(--plank-h));width:150%;height:calc(var(--plank-h) * .55);
  background:radial-gradient(ellipse at 42% 22%,color-mix(in srgb,var(--key) calc(24% * var(--stop,1)),transparent),transparent 68%)}
.slot:first-child::before{left:0;transform:none;width:126%}
.slot:last-child::before{left:auto;right:0;transform:none;width:126%}
.slot:empty::before{opacity:.55}
.slot.drop-target{background:color-mix(in srgb,var(--mint) 18%,transparent);outline:2px dashed var(--mint);outline-offset:-3px}
/* an empty slot prints its position */
.shelf-row{counter-increment:sl-row}
.slots{counter-reset:sl-col}
.slot{counter-increment:sl-col}
.slot:empty::after{content:counter(sl-row,upper-alpha) counter(sl-col);position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font:600 9.5px/1 var(--body);letter-spacing:.22em;color:color-mix(in srgb,var(--ink) 22%,transparent);pointer-events:none}

/* the plank: lit lip, grain, and a dark front face for the name */
.plank{
  position:relative;z-index:1;height:var(--plank-h);margin-bottom:var(--label-drop);border-radius:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--key) calc(58% * var(--stop,1)),transparent) 0%,color-mix(in srgb,var(--key) calc(16% * var(--stop,1)),transparent) 46%,transparent 82%) 0 0/100% 3px no-repeat,
    repeating-linear-gradient(93deg,rgba(0,0,0,.05) 0 1px,rgba(255,255,255,.02) 1px 2px,transparent 2px 17px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,rgba(255,255,255,.03) 1px 2px,transparent 2px 11px),
    linear-gradient(180deg,var(--wood-lip) 0 3px,color-mix(in srgb,#000 16%,var(--wood)) 3px 7px,color-mix(in srgb,#000 34%,var(--wood)) 7px 13px,rgba(0,0,0,.94) 13px 14px,color-mix(in srgb,var(--wood) 26%,#000) 14px 100%);
  box-shadow:0 12px 22px -8px rgba(0,0,0,.9);
}
/* rows with nobody on them collapse to a bare shelf */
.shelf-row:not(:has(.pet)):has(.slot){--slot-h:84px;--label-drop:10px}
.shelf-row:not(:has(.pet)):has(.slot) .slot .prop svg{width:calc(var(--pitch) * .38);height:calc(var(--pitch) * .38)}
.shelf-row.row-empty{--slot-h:56px;--label-drop:8px}
.shelf-row.row-empty:hover .slot{background:var(--key-soft)}

/* ---- the pieces ------------------------------------------------------------ */
.pet,.prop{
  position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0;cursor:grab;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overflow:visible;
}
.pet:active,.prop:active{cursor:grabbing}
.pet .sprite,.prop svg{position:relative;z-index:4}
/* contact patch, offset toward the shadow side */
.pet::after,.prop::after{content:'';position:absolute;z-index:3;left:56%;bottom:-1px;width:64%;height:9px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.24) 52%,transparent 72%)}
.pet.asleep::after{opacity:.6}
.pet.dragging,.prop.dragging{opacity:.25}
.pet:focus-visible,.prop:focus-visible{outline:none}
.pet:focus-visible,.prop:focus-visible{outline:2px solid var(--mint);outline-offset:-3px;border-radius:10px}
.slot .sprite{--pet-h:var(--pet-size)}
.slot .sprite.sl2{width:var(--pet-h);max-width:none}
.slot .prop svg{width:calc(var(--pitch) * .6);height:calc(var(--pitch) * .6);pointer-events:none;
  filter:drop-shadow(var(--cast-dx) var(--cast-dy) 12px rgba(0,0,0,.5)) drop-shadow(2px 3px 1px rgba(0,0,0,.4))}
/* engraved into the plank face */
.pet .nameplate,.prop .nameplate{
  position:absolute;z-index:5;left:-2px;right:-2px;top:calc(100% + 14px);height:12px;line-height:12px;padding:0 3px;text-align:center;
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#EFE2CE;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.prop .nameplate{font-weight:500;color:#C4B7A4}
.pet:hover .nameplate{color:#FFF6E6}
.pet.furious .nameplate,.pet.feuding .nameplate{color:#FF9AA6}
.pet.scheming .nameplate{color:var(--mint)}
.pips{position:absolute;z-index:5;left:0;right:0;top:calc(100% + var(--plank-h) + 3px);display:flex;gap:5px;height:18px;align-items:center;justify-content:center;pointer-events:none}
/* A need mark is a shape and a letter as well as a colour: round F food, diamond A attention, square W washing. */
.pip{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 6px currentColor}
.pip>b{font:800 11px/1 var(--body);color:#1a0a11;pointer-events:none}
.pip.food{background:var(--amber);color:var(--amber)}
.pip.fuss{background:var(--pink);color:var(--pink);border-radius:3px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:none}
.pip.clean{background:var(--mint);color:var(--mint);border-radius:3px}
.pip[data-gloss]{pointer-events:auto;cursor:help}
.pip.zzz,.pip.plotting{width:auto;height:auto;background:none;box-shadow:none;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pip.plotting{color:var(--mint)}
/* props that are light sources */
.prop[data-prop]::before{content:'';position:absolute;z-index:0;pointer-events:none;left:50%;top:50%;width:300%;height:260%;transform:translate(-50%,-34%);display:none}
.prop[data-prop="candle"]::before,.prop[data-prop="lamp"]::before,.prop[data-prop="lantern"]::before,.prop[data-prop="cauldron"]::before,
.prop[data-prop="mirror"]::before,.prop[data-prop="globe"]::before,.prop[data-prop="bell"]::before,.prop[data-prop="skull"]::before,
.prop[data-prop="musicbox"]::before,.prop[data-prop="board"]::before,.prop[data-prop="jar"]::before,.prop[data-prop="hourglass"]::before{display:block}
.prop[data-prop="candle"]::before,.prop[data-prop="lantern"]::before{
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--key) 62%,transparent) 0%,color-mix(in srgb,var(--key) 26%,transparent) 16%,color-mix(in srgb,var(--key) 9%,transparent) 34%,transparent 70%);
  animation:flicker 4.3s ease-in-out infinite}
.prop[data-prop="candle"] svg,.prop[data-prop="lantern"] svg{filter:drop-shadow(0 0 10px var(--key)) drop-shadow(0 0 24px var(--key-mid))}
.prop[data-prop="lamp"]::before{width:340%;height:290%;
  background:radial-gradient(50% 50% at 50% 46%,color-mix(in srgb,var(--key) 46%,transparent) 0%,color-mix(in srgb,var(--key) 18%,transparent) 20%,color-mix(in srgb,var(--key) 6%,transparent) 40%,transparent 74%);
  animation:flicker 11s ease-in-out infinite}
.prop[data-prop="lamp"] svg{filter:drop-shadow(0 0 14px var(--key-mid))}
.prop[data-prop="cauldron"]::before{background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,#8FE07A 40%,transparent) 0%,color-mix(in srgb,#8FE07A 12%,transparent) 30%,transparent 68%);animation:flicker 6s ease-in-out infinite}
.prop[data-prop="cauldron"] svg{filter:drop-shadow(0 0 12px rgba(143,224,122,.6))}
.prop[data-prop="mirror"]::before,.prop[data-prop="globe"]::before,.prop[data-prop="bell"]::before,.prop[data-prop="skull"]::before,.prop[data-prop="jar"]::before,.prop[data-prop="hourglass"]::before{
  width:240%;height:210%;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--mint) 12%,transparent) 0%,transparent 62%)}
.prop[data-prop="musicbox"]::before,.prop[data-prop="board"]::before{background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--pink) 14%,transparent) 0%,transparent 66%)}
.prop[data-prop="candle"]::after,.prop[data-prop="lamp"]::after,.prop[data-prop="lantern"]::after,.prop[data-prop="cauldron"]::after{left:50%;width:190%;height:16px;bottom:-3px;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 24%,transparent 46%),radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--key) 40%,transparent) 0%,transparent 70%)}
@keyframes flicker{0%,100%{opacity:1}17%{opacity:.84}31%{opacity:1}48%{opacity:.76}63%{opacity:.97}81%{opacity:.88}}
/* a prop being interfered with */
.prop.sl-jostle svg{animation:prop-jostle .75s cubic-bezier(.3,1.4,.5,1) 1;transform-origin:50% 100%}
@keyframes prop-jostle{0%{rotate:0deg}18%{rotate:-9deg;translate:-2px 0}42%{rotate:7deg;translate:2px 0}66%{rotate:-3deg}84%{rotate:1.5deg}100%{rotate:0deg}}
.prop.sl-knocked svg{animation:prop-knock 1.1s cubic-bezier(.4,0,.2,1) 1;transform-origin:50% 100%}
@keyframes prop-knock{0%{rotate:0deg}25%{rotate:-14deg}55%{rotate:9deg;translate:0 -3px}75%{rotate:-4deg}100%{rotate:0deg}}

/* The shelf rests while a sheet is up: eighteen breathing creatures behind a
   blurred veil cost more than the sheet does. The director skips them too. */
body:has(.veil.open) #cabinet .sl2,body:has(.veil.open) #cabinet .sl2 *{animation-play-state:paused}

/* the lifted piece */
.ghost{position:fixed;z-index:80;pointer-events:none;width:120px;transform:translate(-50%,-62%) rotate(-4deg);filter:drop-shadow(0 14px 14px rgba(0,0,0,.65))}
.ghost svg{width:96px;height:96px;display:block}
.ghost .sprite{--pet-h:112px}

/* the empty shelf */
.empty-shelf{
  grid-column:1/-1;align-self:center;justify-self:center;position:relative;max-width:420px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 28px 22px;text-align:center;
  background:var(--paper-lit);color:#2B2028;border-radius:4px;transform:rotate(-.7deg);
  font-size:15px;line-height:1.45;box-shadow:0 2px 2px rgba(0,0,0,.22),0 14px 26px -12px rgba(0,0,0,.7);
}
.empty-shelf::before{content:'';position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 46%),#B8414F;box-shadow:0 2px 3px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25)}
.empty-shelf strong{font-family:var(--hand);font-size:32px;font-weight:600;line-height:1.05}
.empty-shelf .empty-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#675244;font-weight:700}
.empty-shelf .btn{margin-top:6px;background:#3A2438;color:#F7ECDD;border-color:#3A2438;box-shadow:none}
body:has(.empty-shelf) .shelf-row:first-child{--slot-h:300px}
body:has(.empty-shelf) .shelf-row.row-empty{--slot-h:40px}

/* the camera in the corner of the case */
.snap-btn{width:50px;min-width:50px;padding:0;color:var(--ink-2)}
.snap-btn svg{width:20px;height:20px}
.snap-btn:hover{color:var(--ink)}
body:has(.empty-shelf) .snap-btn{display:none}

/* ---- the row of verbs under the shelf ---------------------------------------- */
.actions{display:grid;grid-template-columns:1.35fr 1fr 1fr auto;gap:10px;margin:16px 0 0}
.actions .btn{min-height:50px;font-size:14.5px}
body:has(.empty-shelf) .actions{grid-template-columns:1fr 1fr 1.35fr}
body:has(.empty-shelf) .btn-check{opacity:.75}

/* ---- the latest note, peeking onto the shelf tab (phones; §9 shows it) -------- */
.shelf-teaser{display:none;width:100%;text-align:left;margin:12px 0 0;padding:14px 16px 12px;border-radius:4px;background:var(--paper-lit);color:#2B2028;
  box-shadow:0 2px 3px rgba(0,0,0,.5),0 16px 28px -14px rgba(0,0,0,.9);transform:rotate(-.4deg);position:relative;
  background-image:repeating-linear-gradient(180deg,transparent 0 25px,rgba(43,32,40,.07) 25px 26px);background-position:0 14px}
.shelf-teaser::before{content:'';position:absolute;top:-6px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 46%),#B8414F;box-shadow:0 2px 3px rgba(0,0,0,.5)}
.shelf-teaser .teaser-kicker{display:block;font:700 9.5px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#7A6A72;margin-bottom:4px}
.shelf-teaser .teaser-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--hand);font-size:19px;line-height:26px;white-space:pre-line}
.shelf-teaser .teaser-from{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font:italic 11px var(--body);color:#7A6A72}
.shelf-teaser .teaser-from b{font-style:normal;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:9.5px;color:#4E3A46}
.shelf-teaser[hidden]{display:none}

/* ---- what needs you ----------------------------------------------------------- */
.needs-you{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.needs-you:empty{display:none}
.needs-you .need-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid var(--hair-lit);background:var(--glass);color:var(--ink);font:600 12.5px var(--body);transition:background .14s,border-color .14s}
.needs-you .need-chip:hover{background:var(--glass-2);border-color:var(--edge)}
.needs-you .need-chip i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);flex:none}
.needs-you .need-chip.urgent i{background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 1.8s ease-in-out infinite}
.needs-you .need-chip.sore i{background:var(--blood);box-shadow:0 0 8px var(--blood)}
.needs-you .need-chip b{font-family:var(--display);font-weight:400;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.needs-you .need-chip small{font-weight:500;color:var(--ink-2)}
.filter-chip.pet-filter{background:var(--key-soft);border-color:var(--key-mid);color:var(--ink)}
.filter-chip.pet-filter span{margin-left:6px;color:var(--ink-3)}
.note .from{cursor:pointer}
.note .from:hover{color:#2B2028;text-decoration:underline}
.grievance-list{margin:6px 0 0;padding:0;list-style:none;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.grievance-list li::before{content:'· ';color:var(--danger)}
.particulars-hint{margin:6px 0 2px}
.on-file-more{display:inline-block;margin-top:8px;font-size:12px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.scheme-alone small{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;text-decoration:none}

/* ---- the next unlock ---------------------------------------------------------- */
.shelf-progress{margin:14px 0 0;display:flex;align-items:center;gap:18px;padding:12px 16px;border-radius:var(--r);
  border:1px solid var(--hair);background:linear-gradient(100deg,var(--key-soft),transparent 60%)}
.shelf-progress>div{flex:1;min-width:0}
.shelf-progress .eyebrow{font-size:9.5px}
.shelf-progress p{margin:3px 0 0;color:var(--ink-2);font-size:13px;line-height:1.45}
.shelf-progress strong{font-weight:700;color:var(--ink)}
.shelf-progress p span{color:var(--ink-3)}
.shelf-progress meter{width:150px;height:7px;flex:none;appearance:none;background:var(--glass-2);border-radius:9px;border:0}
.shelf-progress meter::-webkit-meter-bar{background:var(--glass-2);border:0;border-radius:9px;height:7px}
.shelf-progress meter::-webkit-meter-optimum-value{background:var(--mint);border-radius:9px}
.shelf-progress meter::-moz-meter-bar{background:var(--mint);border-radius:9px}
.shelf-progress:empty{display:none}

/* ---- 6. the creatures --------------------------------------------------------
   A pet is four nested boxes (src/art/sprite.js), because `animation` is a
   non-additive shorthand and every simultaneous motion needs its own element:

     .sprite.sl2        posture: static tilt/sag from mood, feud, traits
       .sprite-act      behaviour: one-shot clips the director assigns
         .sprite-figure idle: breathing loop; also the shadow chain
           svg.sprite-creature | .sprite-drawing > img + stamps

   Direction. --sl-dir points at whoever a clip is aimed at (+1 = right).
   --sl-face flips the whole figure to face the way it is walking or looking.
   --sl-gaze-x/y slide the pupils of a generated creature.
   ---------------------------------------------------------------------------- */
.sprite{--pet-h:124px;position:relative;width:100%;max-height:var(--pet-h);display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%}
.sprite-body{width:100%;max-height:var(--pet-h);object-fit:contain;pointer-events:none;position:relative}
.sprite-stamp{position:absolute;pointer-events:none;transform-origin:center center}
.sprite-stamp svg{width:100%;height:100%;display:block}
.stamp-preview-layer{position:absolute;inset:0;pointer-events:none}
.stamp-preview-layer .sprite-stamp{position:absolute}

.sprite.sl2{
  animation:none;position:relative;width:min(100%,var(--pet-h,124px));aspect-ratio:1;height:auto;max-height:none;
  display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;
  transform:rotate(calc(var(--sl-tilt0,0deg) + var(--sl-tilt,0deg))) translateY(var(--sl-sag,0));
  transition:transform .5s cubic-bezier(.34,1.25,.64,1);
  --sl-dir:1;--sl-tempo:1;--sl-face:1;
}
.sl2 .sprite-act{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:50% 100%;will-change:transform}
.sl2 .sprite-figure{position:relative;height:100%;aspect-ratio:1;transform-origin:50% 100%;
  animation:breathe var(--sl-breath,3.8s) ease-in-out var(--sl-phase,0s) infinite}
.sprite.sl2 .sprite-body{position:relative;width:100%;height:100%;max-height:none;object-fit:contain;transform:none;transition:none}
/* the vector creature: footing, and a turn to face the way it is going */
.sl2 .sprite-creature{position:relative;width:100%;height:100%;display:block;overflow:visible;pointer-events:none;
  transform:translateY(var(--sl-foot,8%)) scaleX(var(--sl-face,1));transition:transform .28s cubic-bezier(.3,.8,.4,1.2)}
.sl2.sl-vector .sprite-act,.sl2.sl-vector .sprite-figure{overflow:visible}
/* the drawn creature: its own framing layer, same turn */
.sprite-drawing{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 100%;transform:scaleX(var(--sl-face,1));transition:transform .28s cubic-bezier(.3,.8,.4,1.2)}
.sl-handdrawn .sprite-drawing .sprite-body{display:block;object-fit:fill;filter:none}
.sl-handdrawn .sprite-figure{width:100%}
.sl-handdrawn:not(.sl-asleep):not(.sl-still) .sprite-body{animation:ink-settle calc(var(--sl-breath,4s) * 1.7) ease-in-out var(--sl-phase) infinite;transform-origin:50% 85%}
.sl-handdrawn .sprite-stamp svg{overflow:visible}
@keyframes ink-settle{0%,100%{transform:skewX(0deg)}35%{transform:skewX(.8deg)}70%{transform:skewX(-.6deg)}}

/* the shadow chain: cast, contact, and a warm edge toward the key */
.sl2 .sprite-figure{filter:
  drop-shadow(var(--cast-dx) var(--cast-dy) 14px rgba(0,0,0,.58))
  drop-shadow(2px 3px 1px rgba(0,0,0,.42))
  drop-shadow(-3px -2px 5px var(--key-hi))}
.pet.furious .sprite-figure{filter:
  drop-shadow(var(--cast-dx) var(--cast-dy) 14px rgba(0,0,0,.58))
  drop-shadow(2px 3px 1px rgba(0,0,0,.42))
  drop-shadow(-3px -2px 5px rgba(255,74,87,.72))
  drop-shadow(0 0 18px rgba(255,74,87,.3))}
.pet.asleep .sprite-figure{filter:
  drop-shadow(calc(var(--cast-dx) * .5) calc(var(--cast-dy) * .5) 12px rgba(0,0,0,.5))
  drop-shadow(2px 3px 1px rgba(0,0,0,.4))}
.pet:hover .sprite-figure{filter:
  drop-shadow(var(--cast-dx) var(--cast-dy) 14px rgba(0,0,0,.58))
  drop-shadow(2px 3px 1px rgba(0,0,0,.42))
  drop-shadow(-3px -2px 7px color-mix(in srgb,var(--key) 92%,transparent))}
.card-portrait .sprite-figure,.gen-mount .sprite-figure,.draw-preview .sprite-figure{filter:
  drop-shadow(calc(var(--cast-dx) * .6) calc(var(--cast-dy) * .6) 12px rgba(0,0,0,.55))
  drop-shadow(2px 3px 1px rgba(0,0,0,.4))
  drop-shadow(-3px -2px 6px var(--key-hi))}

/* mood posture and idle character */
.sl2.sl-mood-content .sprite-figure{animation:breathe-big calc(var(--sl-breath,3.8s) * .82) cubic-bezier(.45,0,.35,1) var(--sl-phase,0s) infinite}
.sl2.sl-mood-content{--sl-tempo:.9}
.sl2.sl-mood-fine{--sl-tempo:1}
.sl2.sl-mood-annoyed{--sl-tempo:.7;--sl-tilt:-1.5deg}
.sl2.sl-mood-annoyed .sprite-figure{animation:breathe-shallow calc(var(--sl-breath,3.8s) * .5) ease-in-out var(--sl-phase,0s) infinite,tic 2.9s ease-in-out var(--sl-phase,0s) infinite}
.sl2.sl-mood-furious{--sl-tempo:.45;--sl-tilt:-3.5deg;--sl-sag:2%}
.sl2.sl-mood-furious .sprite-figure{animation:breathe-shallow calc(var(--sl-breath,3.8s) * .34) ease-in-out var(--sl-phase,0s) infinite,seethe .27s ease-in-out var(--sl-phase,0s) infinite}
.sl2.sl-asleep{--sl-tempo:2.6;--sl-sag:7%;--sl-tilt:4deg}
.sl2.sl-asleep .sprite-figure{animation:breathe-sleep calc(var(--sl-breath,3.8s) * 2.1) ease-in-out var(--sl-phase,0s) infinite}
.sl2.sl-feud-left{--sl-dir:1;--sl-tilt:-6deg}
.sl2.sl-feud-right{--sl-dir:-1;--sl-tilt:6deg}
.sl2.sl-mood-furious.sl-feud-left{--sl-tilt:5deg}
.sl2.sl-mood-furious.sl-feud-right{--sl-tilt:-5deg}
.sl2.sl-still .sprite-figure,.sl2.sl-still .stamp-art,.sl2.sl-still .sl-part{animation-play-state:paused}
/* the legacy whole-sprite motion classes are inert under .sl2 */
.motion-bob,.motion-furious,.motion-jitter,.motion-asleep,.motion-lean-left,.motion-lean-right{animation:none}

@keyframes breathe{0%,100%{scale:1 1;translate:0 0}50%{scale:.985 1.03;translate:0 -1.4%}}
@keyframes breathe-big{0%,100%{scale:1 1;translate:0 0}42%{scale:.968 1.055;translate:0 -3%}72%{scale:1.025 .982;translate:0 .5%}}
@keyframes breathe-shallow{0%,100%{scale:1 1;translate:0 0}50%{scale:.995 1.014;translate:0 -.6%}}
@keyframes breathe-sleep{0%,100%{scale:1 1;translate:0 0}45%{scale:.962 1.06;translate:0 -1.2%}82%{scale:1.032 .974;translate:0 1%}}
@keyframes tic{0%,84%,100%{rotate:0deg}87%{rotate:-1.8deg}91%{rotate:1.3deg}95%{rotate:-.5deg}}
@keyframes seethe{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}

/* eyes: pupils glance, lids blink (generated creatures) */
.sl2 .cr-pupil{translate:calc(var(--sl-gaze-x,0) * 1.5px) calc(var(--sl-gaze-y,0) * 1.1px);transition:translate .38s cubic-bezier(.3,.9,.4,1.1)}
.sl2 .sl-part[data-part="eye"]{transform-box:view-box;transform-origin:0 0}
.sl2.sl-blink .sl-part[data-part="eye"]{animation:lid 165ms ease-in-out 1}
.sl2.sl-blink-deep .sl-part[data-part="eye"]{animation:lid 240ms ease-in-out 1}
.sl2.sl-asleep .sl-part[data-part="eye"]{scale:1 .12}
.sl2.sl-squint .sl-part[data-part="eye"]{scale:1 .55;transition:scale .2s}
@keyframes lid{0%,100%{scale:1 1}42%,58%{scale:1 .06}}

/* stamps (drawn creatures): secondary motion on the art, never the placement box */
.sl2 .sprite-stamp{position:absolute;pointer-events:none;transform-origin:center center}
.sl2 .stamp-art{width:100%;height:100%;transform-origin:50% 50%;animation:none}
.sl2 .stamp-art svg{width:100%;height:100%;display:block}
.sl2 .sprite-stamp[data-kind="wing"] .stamp-art{transform-origin:78% 42%;animation:flap calc(1.5s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="tail"] .stamp-art{transform-origin:14% 86%;animation:wag calc(2.2s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="ears"] .stamp-art{transform-origin:50% 68%;animation:earflick calc(5.4s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="antlers"] .stamp-art{transform-origin:50% 74%;animation:swayslow calc(5.6s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="horns"] .stamp-art{transform-origin:50% 78%;animation:twitch calc(4.1s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="stitches"] .stamp-art{animation:twitch calc(4.8s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="tentacles"] .stamp-art{transform-origin:50% 12%;animation:undulate calc(2.7s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="halo"] .stamp-art{animation:halo calc(3.4s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="crown"] .stamp-art,.sl2 .sprite-stamp[data-kind="bow"] .stamp-art{animation:bobtilt calc(3s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2 .sprite-stamp[data-kind="grin"] .stamp-art{transform-origin:50% 30%;animation:chew calc(3.6s * var(--sl-sj,1) * var(--sl-tempo,1)) ease-in-out var(--sl-sd,0s) infinite}
.sl2.sl-blink .stamp-art.anim-blink{animation:blink 165ms ease-in-out 1}
.sl2.sl-blink-deep .stamp-art.anim-blink-slow{animation:blink 240ms ease-in-out 1}
.sl2 .sprite-stamp[data-kind="eyes"] .stamp-art,.sl2 .sprite-stamp[data-kind="bigeye"] .stamp-art,.sl2 .sprite-stamp[data-kind="thirdeye"] .stamp-art{transform-origin:50% 50%}
.sl2.sl-asleep .stamp-art.anim-blink{transform:scaleY(.12)}
@keyframes blink{0%,100%{transform:scaleY(1)}42%,58%{transform:scaleY(.06)}}
@keyframes flap{0%,100%{transform:rotate(-17deg) scaleX(1)}50%{transform:rotate(15deg) scaleX(.84)}}
@keyframes wag{0%,100%{transform:rotate(-14deg)}55%{transform:rotate(16deg)}}
@keyframes earflick{0%,66%,100%{transform:rotate(0)}71%{transform:rotate(-11deg)}76%{transform:rotate(7deg)}81%{transform:rotate(-3deg)}86%{transform:rotate(1deg)}}
@keyframes swayslow{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes twitch{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-7deg)}89%{transform:rotate(5deg)}93%{transform:rotate(-2deg)}}
@keyframes undulate{0%,100%{transform:translateX(0) rotate(0) skewX(0)}25%{transform:translateX(3%) rotate(3deg) skewX(-6deg)}50%{transform:translateX(0) rotate(0) skewX(0)}75%{transform:translateX(-3%) rotate(-3deg) skewX(6deg)}}
@keyframes halo{0%,100%{transform:translateY(0) rotate(-3deg) scaleX(1)}50%{transform:translateY(-16%) rotate(3deg) scaleX(.95)}}
@keyframes bobtilt{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11%) rotate(3deg)}}
@keyframes chew{0%,100%{transform:scale(1,1)}50%{transform:scale(1.05,.9)}}

/* limbs: anything carrying data-part (art/anatomy.js contract) */
.sl2 .sl-part{transform-box:fill-box}
.sl2 .sl-part[data-pivot-x]{transform-box:view-box;transform-origin:0 0}
.sl2 .sl-part[data-part="leg"]{animation:legidle calc(4.4s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 4.4s) infinite}
.sl2 .sl-part[data-part="arm"]{animation:armswing calc(3.6s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 3.6s) infinite}
.sl2 .sl-part[data-part="wing"]{animation:wingbeat calc(2.4s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 2.4s) infinite}
.sl2 .sl-part[data-part="tail"]{animation:tailwag calc(2.3s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 2.3s) infinite}
.sl2 .sl-part[data-part="ear"]{animation:earwave calc(5s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 5s) infinite}
.sl2 .sl-part[data-part="antenna"]{animation:antennabob calc(3.1s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 3.1s) infinite}
.sl2 .sl-part[data-part="tentacle"]{animation:tentaclecurl calc(2.8s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 2.8s) infinite}
.sl2 .sl-part[data-part="head"]{animation:headnod calc(5.2s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 5.2s) infinite}
.sl2 .sl-part[data-part="horn"],.sl2 .sl-part[data-part="crest"]{animation:hornsway calc(6s * var(--sl-tempo,1)) ease-in-out calc(var(--sl-ph,0) * 6s) infinite}
@keyframes legidle{0%,100%{rotate:0deg}50%{rotate:2.5deg}}
@keyframes armswing{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes wingbeat{0%,100%{rotate:-6deg;scale:1 1}50%{rotate:9deg;scale:.95 1}}
@keyframes tailwag{0%,100%{rotate:-12deg}50%{rotate:14deg}}
@keyframes earwave{0%,100%{rotate:-4deg}50%{rotate:5deg}}
@keyframes antennabob{0%,100%{rotate:-8deg}50%{rotate:8deg}}
@keyframes tentaclecurl{0%,100%{rotate:-9deg;translate:0 0}50%{rotate:9deg;translate:0 -3%}}
@keyframes headnod{0%,100%{rotate:0deg}50%{rotate:-3.5deg}}
@keyframes hornsway{0%,100%{rotate:0deg}50%{rotate:-2deg}}

/* travel: the walk between slots (art/animator.js sets --sl-gait-dur and --sl-travel-dur) */
.sl2.sl-travel{--sl-tempo:.4}
.sl2.sl-travel .sprite-act{animation:travellean var(--sl-travel-dur,900ms) cubic-bezier(.4,0,.3,1) 1}
.sl2.sl-travel .sl-part[data-part="leg"]{animation:legwalk var(--sl-gait-dur,300ms) ease-in-out calc(var(--sl-ph,0) * var(--sl-gait-dur,300ms)) infinite}
.sl2.sl-travel .sl-part[data-part="arm"]{animation:armwalk var(--sl-gait-dur,300ms) ease-in-out calc(var(--sl-ph,0) * var(--sl-gait-dur,300ms) - var(--sl-gait-dur,300ms) * .5) infinite}
.sl2.sl-gait-walk .sprite-figure{animation:walkbob var(--sl-gait-dur,300ms) ease-in-out infinite}
.sl2.sl-gait-scuttle .sprite-figure{animation:scuttlebob var(--sl-gait-dur,170ms) linear infinite}
.sl2.sl-gait-scuttle .sl-part[data-part="leg"]{animation:legscuttle var(--sl-gait-dur,170ms) linear calc(var(--sl-ph,0) * var(--sl-gait-dur,170ms)) infinite}
.sl2.sl-gait-flap .sprite-figure{animation:flapbob calc(var(--sl-gait-dur,240ms) * 2) ease-in-out infinite}
.sl2.sl-gait-flap .sl-part[data-part="wing"]{animation:wingflap calc(var(--sl-gait-dur,240ms) * .5) ease-in-out infinite}
.sl2.sl-gait-flap .sl-part[data-part="leg"]{animation:legdangle 1.2s ease-in-out calc(var(--sl-ph,0) * 1.2s) infinite}
.sl2.sl-gait-hop .sprite-figure{animation:hoptravel var(--sl-gait-dur,380ms) cubic-bezier(.32,.75,.4,1) infinite}
.sl2.sl-gait-ooze .sprite-figure{animation:oozebob calc(var(--sl-gait-dur,300ms) * 1.6) ease-in-out infinite}
.sl2.sl-gait-ooze .sl-part[data-part="leg"],.sl2.sl-gait-ooze .sl-part[data-part="tentacle"]{animation:oozecreep calc(var(--sl-gait-dur,300ms) * 1.6) ease-in-out calc(var(--sl-ph,0) * var(--sl-gait-dur,300ms) * 1.6) infinite}
@keyframes legwalk{0%,100%{rotate:26deg}50%{rotate:-26deg}}
@keyframes legscuttle{0%,100%{rotate:17deg}50%{rotate:-17deg}}
@keyframes armwalk{0%,100%{rotate:19deg}50%{rotate:-19deg}}
@keyframes legdangle{0%,100%{rotate:-7deg}50%{rotate:7deg}}
@keyframes wingflap{0%,100%{rotate:-28deg;scale:1 1}50%{rotate:32deg;scale:.78 1}}
@keyframes walkbob{0%,100%{translate:0 0;scale:1 1}25%{translate:0 -4%;scale:.98 1.02}50%{translate:0 0;scale:1.03 .97}75%{translate:0 -4%;scale:.98 1.02}}
@keyframes scuttlebob{0%,100%{translate:0 0;scale:1.04 .96}50%{translate:0 -2%;scale:.99 1.01}}
@keyframes hoptravel{0%{translate:0 0;scale:1.14 .86}32%{translate:0 -17%;scale:.89 1.13}62%{translate:0 0;scale:1.16 .85}100%{translate:0 0;scale:1 1}}
@keyframes flapbob{0%,100%{translate:0 0}50%{translate:0 -9%}}
@keyframes oozebob{0%,100%{translate:0 0;scale:1.06 .94}35%{translate:0 -2%;scale:.96 1.05}70%{translate:0 1%;scale:1.08 .93}}
@keyframes oozecreep{0%,100%{rotate:-12deg;translate:0 0}40%{rotate:10deg;translate:0 -5%}70%{rotate:2deg;translate:0 2%}}
@keyframes travellean{0%{transform:none}9%{transform:rotate(calc(-4deg * var(--sl-dir,1)))}20%{transform:rotate(calc(8deg * var(--sl-dir,1))) scale(1.05,.95)}68%{transform:rotate(calc(6deg * var(--sl-dir,1)))}88%{transform:rotate(calc(-5deg * var(--sl-dir,1))) scale(.95,1.06)}100%{transform:none}}

/* anatomy-gated clips held on the root while their body clip plays */
.sl2.sl-sneaking{--sl-tempo:2;--sl-sag:5%}
.sl2.sl-sneaking .sprite-figure{animation:sneakbob .66s ease-in-out infinite}
.sl2.sl-sneaking .sl-part[data-part="leg"]{animation:legsneak .66s cubic-bezier(.5,0,.5,1) calc(var(--sl-ph,0) * .66s) infinite}
.sl2.sl-hanging .sl-part[data-part="arm"]{animation:armhang 1.9s ease-in-out calc(var(--sl-ph,0) * 1.9s) infinite}
.sl2.sl-hanging .sl-part[data-part="leg"]{animation:legdangle 2.3s ease-in-out calc(var(--sl-ph,0) * 2.3s) infinite}
.sl2.sl-flapping{--sl-tempo:.5}
.sl2.sl-flapping .sl-part[data-part="wing"]{animation:wingflap .22s ease-in-out infinite}
.sl2.sl-stepping .sl-part[data-part="leg"]{animation:legstomp .42s cubic-bezier(.3,0,.2,1) calc(var(--sl-ph,0) * .42s) infinite}
.sl2.sl-reaching .sl-part[data-part="arm"]{animation:armreach .9s cubic-bezier(.3,0,.2,1) 1 forwards}
.sl2.sl-waving .sl-part[data-part="arm"][data-side="right"],.sl2.sl-waving .sl-part[data-part="arm"][data-side="r"]{animation:armwave .5s ease-in-out 3}
.sl2.sl-tailthump .sl-part[data-part="tail"]{animation:tailthump .55s ease-in-out 3}
@keyframes legsneak{0%,100%{rotate:11deg;translate:0 0}28%{rotate:-21deg;translate:0 -7%}56%{rotate:-3deg;translate:0 0}}
@keyframes legstomp{0%,68%,100%{rotate:0deg}34%{rotate:-24deg;translate:0 -6%}}
@keyframes armhang{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes armreach{0%{rotate:0deg}40%,70%{rotate:calc(-70deg * var(--sl-dir,1))}100%{rotate:0deg}}
@keyframes armwave{0%,100%{rotate:-40deg}50%{rotate:-90deg}}
@keyframes tailthump{0%,100%{rotate:-8deg}50%{rotate:38deg}}
@keyframes sneakbob{0%,100%{translate:0 1%;scale:1.07 .9}50%{translate:0 -1%;scale:1.03 .93}}

/* one-shot behaviour clips (the director assigns these to .sprite-act) */
@keyframes sl2-hop{0%{transform:none}12%{transform:translateY(0) scale(1.14,.84)}30%{transform:translateY(-20%) scale(.9,1.16)}46%{transform:translateY(-25%) scale(1,1)}64%{transform:translateY(0) scale(1.16,.83)}80%{transform:translateY(-5%) scale(.96,1.05)}100%{transform:none}}
@keyframes sl2-stretch{0%{transform:none}26%{transform:translateY(-3%) scale(.93,1.13)}48%{transform:translateY(-3%) scale(.92,1.14) rotate(-2.5deg)}70%{transform:scale(1.08,.92)}86%{transform:scale(.98,1.03)}100%{transform:none}}
@keyframes sl2-shiver{0%,100%{transform:none}8%{transform:translateX(-3.5%) rotate(-1.8deg) scale(1.02,.99)}20%{transform:translateX(3.5%) rotate(1.8deg)}32%{transform:translateX(-3%) rotate(-1.5deg)}44%{transform:translateX(3%) rotate(1.5deg)}56%{transform:translateX(-2%) rotate(-1deg)}68%{transform:translateX(2%) rotate(1deg)}80%{transform:translateX(-1%) rotate(-.5deg)}92%{transform:translateX(.5%)}}
@keyframes sl2-sigh{0%{transform:none}20%{transform:translateY(-2.5%) scale(.95,1.07)}32%{transform:translateY(-2.5%) scale(.95,1.07)}62%{transform:scale(1.09,.89)}76%{transform:scale(1.1,.88)}92%{transform:scale(.99,1.02)}100%{transform:none}}
@keyframes sl2-perk{0%{transform:none}18%{transform:scale(1.08,.92)}40%{transform:translateY(-9%) scale(.9,1.13)}62%{transform:translateY(0) scale(1.07,.94)}80%{transform:translateY(-2%) scale(.98,1.03)}100%{transform:none}}
@keyframes sl2-look{0%{transform:none}22%{transform:translateX(calc(4% * var(--sl-dir,1))) rotate(calc(6deg * var(--sl-dir,1))) scale(1.01,.99)}52%{transform:translateX(calc(4% * var(--sl-dir,1))) rotate(calc(6deg * var(--sl-dir,1)))}76%{transform:translateX(calc(-2.5% * var(--sl-dir,1))) rotate(calc(-4deg * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-sway{0%,100%{transform:none}27%{transform:translateX(calc(-4.5% * var(--sl-dir,1))) rotate(calc(-3.5deg * var(--sl-dir,1))) scale(1.03,.985)}73%{transform:translateX(calc(4.5% * var(--sl-dir,1))) rotate(calc(3.5deg * var(--sl-dir,1))) scale(1.03,.985)}}
@keyframes sl2-wobble{0%{transform:none}18%{transform:rotate(-7.5deg) scale(1.02,.98)}40%{transform:rotate(5.5deg)}60%{transform:rotate(-3.5deg)}78%{transform:rotate(2deg)}90%{transform:rotate(-.8deg)}100%{transform:none}}
@keyframes sl2-skitter{0%{transform:none}14%{transform:scale(1.12,.88)}36%{transform:translateX(calc(14% * var(--sl-dir,1))) rotate(calc(5deg * var(--sl-dir,1))) scale(.92,1.08)}54%{transform:translateX(calc(16% * var(--sl-dir,1))) scale(1.08,.93)}82%{transform:translateX(0) scale(.96,1.04)}100%{transform:none}}
@keyframes sl2-snatch{0%{transform:none}18%{transform:translateX(calc(-6% * var(--sl-dir,1))) scale(1.06,.94)}40%{transform:translateX(calc(20% * var(--sl-dir,1))) rotate(calc(10deg * var(--sl-dir,1))) scale(.87,1.12)}56%{transform:translateX(calc(17% * var(--sl-dir,1))) scale(1.1,.92)}80%{transform:translateX(calc(2% * var(--sl-dir,1))) scale(.97,1.03)}100%{transform:none}}
@keyframes sl2-leanin{0%{transform:none}26%{transform:translateX(calc(7% * var(--sl-dir,1))) rotate(calc(10deg * var(--sl-dir,1))) scale(1.04,.97)}60%{transform:translateX(calc(8% * var(--sl-dir,1))) rotate(calc(11deg * var(--sl-dir,1))) scale(1.05,.96)}84%{transform:translateX(calc(-1% * var(--sl-dir,1))) rotate(calc(-2deg * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-leanaway{0%{transform:none}30%,64%{transform:translateX(calc(-6% * var(--sl-dir,1))) rotate(calc(-8deg * var(--sl-dir,1))) scale(.98,1.02)}100%{transform:none}}
@keyframes sl2-stir{0%,100%{transform:none}28%{transform:translateY(-2.5%) rotate(-3deg) scale(1.02,.98)}58%{transform:rotate(2deg) scale(.99,1.01)}80%{transform:rotate(-.8deg)}}
@keyframes sl2-snore{0%,100%{transform:none}38%{transform:translateY(-3.5%) scale(.93,1.1)}70%{transform:scale(1.1,.89)}88%{transform:scale(1.02,.99)}}
@keyframes sl2-sneak{0%{transform:none}9%{transform:scale(1.11,.87)}19%{transform:scale(1.11,.87)}30%{transform:translateX(calc(6% * var(--sl-dir,1))) scale(1.09,.89)}42%,50%{transform:translateX(calc(10% * var(--sl-dir,1))) scale(1.09,.89)}64%{transform:translateX(calc(16% * var(--sl-dir,1))) scale(1.08,.9)}76%{transform:translateX(calc(19% * var(--sl-dir,1))) rotate(calc(-5deg * var(--sl-dir,1))) scale(1.06,.92)}90%{transform:translateX(calc(5% * var(--sl-dir,1))) scale(1.02,.97)}100%{transform:none}}
@keyframes sl2-hang{0%{transform:none}9%{transform:scale(1.1,.9)}20%{transform:translate(calc(11% * var(--sl-dir,1)),0) rotate(calc(9deg * var(--sl-dir,1)))}32%{transform:translate(calc(15% * var(--sl-dir,1)),44%) rotate(calc(4deg * var(--sl-dir,1))) scale(.93,1.09)}46%{transform:translate(calc(15% * var(--sl-dir,1)),52%) rotate(-8deg)}60%{transform:translate(calc(15% * var(--sl-dir,1)),52%) rotate(8deg)}74%{transform:translate(calc(15% * var(--sl-dir,1)),52%) rotate(-5deg)}88%{transform:translate(calc(7% * var(--sl-dir,1)),7%) scale(1.07,.93)}100%{transform:none}}
@keyframes sl2-flutter{0%{transform:none}14%{transform:scale(1.09,.9)}34%{transform:translateY(-17%) scale(.93,1.08)}54%{transform:translateY(-20%) rotate(calc(4deg * var(--sl-dir,1)))}74%{transform:translateY(-10%) rotate(calc(-4deg * var(--sl-dir,1)))}92%{transform:translateY(0) scale(1.08,.93)}100%{transform:none}}
@keyframes sl2-stomp{0%{transform:none}19%{transform:translateY(-9%) rotate(calc(-5deg * var(--sl-dir,1))) scale(.94,1.07)}33%{transform:translateY(0) scale(1.15,.85)}49%{transform:translateY(-7%) scale(.96,1.05)}64%{transform:translateY(0) scale(1.13,.87)}83%{transform:scale(.99,1.02)}100%{transform:none}}
/* duet clips: aimed at a neighbour (--sl-dir) */
@keyframes sl2-nudge{0%{transform:none}18%{transform:translateX(calc(-5% * var(--sl-dir,1))) scale(1.06,.95)}40%{transform:translateX(calc(24% * var(--sl-dir,1))) rotate(calc(8deg * var(--sl-dir,1))) scale(.94,1.05)}52%{transform:translateX(calc(26% * var(--sl-dir,1))) rotate(calc(9deg * var(--sl-dir,1))) scale(1.08,.94)}78%{transform:translateX(calc(2% * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-shoved{0%{transform:none}20%{transform:translateX(calc(16% * var(--sl-dir,1))) rotate(calc(11deg * var(--sl-dir,1))) scale(.92,1.06)}44%{transform:translateX(calc(22% * var(--sl-dir,1))) rotate(calc(6deg * var(--sl-dir,1))) scale(1.1,.92)}70%{transform:translateX(calc(4% * var(--sl-dir,1))) rotate(calc(-3deg * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-whisper{0%{transform:none}22%{transform:translateX(calc(10% * var(--sl-dir,1))) rotate(calc(13deg * var(--sl-dir,1))) translateY(-3%) scale(1.02,.98)}55%{transform:translateX(calc(11% * var(--sl-dir,1))) rotate(calc(14deg * var(--sl-dir,1))) translateY(-3%)}82%{transform:translateX(calc(-2% * var(--sl-dir,1))) rotate(calc(-3deg * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-listen{0%{transform:none}30%{transform:translateX(calc(3% * var(--sl-dir,1))) rotate(calc(-6deg * var(--sl-dir,1))) scale(.98,1.03)}70%{transform:translateX(calc(3% * var(--sl-dir,1))) rotate(calc(-6deg * var(--sl-dir,1))) scale(.98,1.03)}100%{transform:none}}
@keyframes sl2-glare{0%{transform:none}25%,80%{transform:translateX(calc(5% * var(--sl-dir,1))) rotate(calc(7deg * var(--sl-dir,1))) scale(1.03,.97)}100%{transform:none}}
@keyframes sl2-startle{0%{transform:none}14%{transform:translateY(-14%) scale(.9,1.14) rotate(calc(-4deg * var(--sl-dir,1)))}34%{transform:translateY(0) scale(1.14,.88)}56%{transform:translateY(-4%) scale(.97,1.03)}100%{transform:none}}
@keyframes sl2-poke{0%{transform:none}25%{transform:translateX(calc(-4% * var(--sl-dir,1))) scale(1.05,.96)}50%{transform:translateX(calc(18% * var(--sl-dir,1))) rotate(calc(6deg * var(--sl-dir,1))) scale(.96,1.03)}62%{transform:translateX(calc(18% * var(--sl-dir,1))) rotate(calc(6deg * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-sniff{0%{transform:none}20%{transform:translateX(calc(8% * var(--sl-dir,1))) rotate(calc(10deg * var(--sl-dir,1))) translateY(2%)}35%{transform:translateX(calc(9% * var(--sl-dir,1))) rotate(calc(12deg * var(--sl-dir,1))) translateY(0)}50%{transform:translateX(calc(9% * var(--sl-dir,1))) rotate(calc(10deg * var(--sl-dir,1))) translateY(2%)}65%{transform:translateX(calc(9% * var(--sl-dir,1))) rotate(calc(12deg * var(--sl-dir,1))) translateY(0)}100%{transform:none}}
@keyframes sl2-mirror{0%,100%{transform:none}30%{transform:translateY(-8%) scale(.94,1.08)}55%{transform:translateY(0) scale(1.08,.94)}}
@keyframes sl2-shuffle{0%{transform:none}30%{transform:translateX(calc(-9% * var(--sl-dir,1))) rotate(calc(-4deg * var(--sl-dir,1)))}60%{transform:translateX(calc(-11% * var(--sl-dir,1))) rotate(calc(-3deg * var(--sl-dir,1)))}100%{transform:none}}

/* care reactions */
@keyframes sl2-chomp{0%{transform:none}13%{transform:scale(1.14,.85)}30%{transform:translateY(-13%) scale(.85,1.19)}44%{transform:translateY(0) scale(1.2,.83)}57%{transform:translateY(-6%) scale(.93,1.09)}72%{transform:translateY(0) scale(1.09,.93)}87%{transform:scale(.98,1.03)}100%{transform:none}}
@keyframes sl2-wiggle{0%,100%{transform:none}12%{transform:translateY(-9%) rotate(-9deg) scale(.94,1.08)}28%{transform:translateY(-3%) rotate(9deg) scale(1.05,.96)}44%{transform:translateY(-10%) rotate(-7deg) scale(.94,1.08)}60%{transform:translateY(-2%) rotate(6deg) scale(1.05,.96)}76%{transform:translateY(-5%) rotate(-3deg)}90%{transform:rotate(1deg) scale(1.03,.98)}}
@keyframes sl2-recoil{0%{transform:none}22%{transform:translateX(calc(-11% * var(--sl-dir,1))) rotate(calc(-12deg * var(--sl-dir,1))) scale(1.07,.94)}48%{transform:translateX(calc(-12% * var(--sl-dir,1))) rotate(calc(-10deg * var(--sl-dir,1)))}72%{transform:translateX(calc(3% * var(--sl-dir,1))) rotate(calc(3deg * var(--sl-dir,1)))}88%{transform:rotate(calc(-1deg * var(--sl-dir,1)))}100%{transform:none}}
@keyframes sl2-shakeoff{0%,100%{transform:none}7%{transform:rotate(-10deg) scale(1.03,.97)}17%{transform:rotate(10deg)}27%{transform:rotate(-9deg)}37%{transform:rotate(9deg)}47%{transform:rotate(-7deg)}57%{transform:rotate(6deg)}68%{transform:rotate(-4deg)}80%{transform:rotate(2.5deg)}91%{transform:rotate(-1deg)}}
.sl-care-food .sprite-stamp[data-kind="grin"] .stamp-art{animation:chew .18s ease-in-out 4}
.sl-care-fuss .stamp-art.anim-blink{transform:scaleY(.18);transition:transform .2s}
.sl-care-fuss .sl-part[data-part="eye"]{scale:1 .25;transition:scale .2s}
.sl-care-clean .sprite-stamp[data-kind="ears"] .stamp-art{animation:earflick .3s ease-in-out 3}
.sl-care-fuss .sl-part[data-part="arm"]{animation:armswing .45s ease-in-out 2}
.sl-care-food .sl-part[data-part="arm"]{animation:armswing .3s ease-in-out 3}
.sl-care-food .sl-part[data-part="mouth"]{animation:chomp-mouth .22s ease-in-out 4;transform-box:view-box;transform-origin:0 0}
@keyframes chomp-mouth{0%,100%{scale:1 1}50%{scale:1.15 1.5}}
.care-motes{position:absolute;left:50%;top:40%;pointer-events:none;z-index:9}
.care-motes i{position:absolute;width:5px;height:5px;background:#e7ba74;border-radius:1px;opacity:0;animation:care-mote .85s ease-out var(--mote-delay) forwards}
.care-motes-clean i{background:transparent;border:1.5px solid #b5e2d5;border-radius:50%;width:8px;height:8px}
.care-motes-fuss i{background:#e69bac;width:7px;height:7px;clip-path:polygon(50% 20%,75% 0,100% 20%,100% 50%,50% 100%,0 50%,0 20%,25% 0)}
@keyframes care-mote{0%{opacity:0;transform:translate(0,0) scale(.3)}18%{opacity:.9}100%{opacity:0;transform:translate(var(--mote-x),-65px) rotate(28deg) scale(.8)}}

/* thought bubbles: paper, pinned above the head, rationed by the director */
.sl-bubble{
  position:absolute;left:50%;bottom:calc(100% - 26px);z-index:6;transform:translateX(-50%);transform-origin:50% 100%;
  max-width:min(150px,180%);padding:6px 9px;background:var(--paper-lit);color:#221826;
  font-family:var(--hand);font-size:13px;line-height:1.2;text-align:center;border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.5);pointer-events:none;animation:bubble-in 260ms cubic-bezier(.2,1.5,.4,1) 1;
}
.sl-bubble::after{content:'';position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--paper-lit);border-bottom:0}
.sl-bubble.bubble-reply{background:#DCE7DC}
.sl-bubble.bubble-reply::after{border-top-color:#DCE7DC}
.sl-bubble.bubble-dark{background:#3A2438;color:#F7ECDD}
.sl-bubble.bubble-dark::after{border-top-color:#3A2438}
.sl-bubble.out{opacity:0;transform:translateX(-50%) translateY(-4px);transition:opacity .38s ease,transform .38s ease}
/* the top row has the case top above it, not another shelf: keep its bubbles inside the case */
.shelf-row:first-child .sl-bubble{bottom:calc(100% - 40px)}
.shelf-row:first-child .sl-zzz{bottom:calc(100% - 34px)}
@keyframes bubble-in{0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.7)}60%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.04)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
/* tiny zzz above a sleeper, and a mask on a schemer */
.sl-zzz{position:absolute;left:62%;bottom:calc(100% - 22px);z-index:6;font:600 13px var(--hand);color:var(--ink-2);pointer-events:none;animation:zzz 2.6s ease-out 1 forwards}
@keyframes zzz{0%{opacity:0;transform:translate(0,4px) scale(.7)}25%{opacity:.9}100%{opacity:0;transform:translate(10px,-26px) scale(1.15)}}

/* ---- 7. notes ---------------------------------------------------------------- */
.notes-head{display:flex;align-items:center;gap:14px;margin:0 0 4px;min-height:36px}
.notes-head h2{order:0;flex:0 1 auto;min-width:0;font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.notes-head::after{content:'';order:1;flex:1 1 16px;min-width:8px;height:1px;background:var(--hair-lit)}
@media (max-width:420px){.notes-head{gap:8px}.notes-head h2{letter-spacing:.16em;font-size:10px}}
.notes-head .btn{order:2;flex:none}
.note-filters{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.filter-chip{min-height:44px;padding:5px 12px;border-radius:99px;border:1px solid var(--hair);background:var(--glass);color:var(--ink-2);font:600 12px var(--body);letter-spacing:.02em;transition:background .14s,border-color .14s,color .14s}
.filter-chip:hover{background:var(--glass-2);color:var(--ink)}
.filter-chip[aria-pressed="true"]{background:var(--paper-lit);color:#2B2028;border-color:transparent}
.notes{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:30px 18px;padding:30px 0 0}
.notes::before{content:'';position:absolute;z-index:0;inset:-18px 0 auto;height:340px;pointer-events:none;
  background:radial-gradient(60% 100% at 30% 0%,color-mix(in srgb,var(--key) 13%,transparent),transparent 72%)}
.note{
  position:relative;z-index:1;--pin:#B8414F;white-space:pre-line;
  background-color:var(--paper-lit);
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(43,32,40,.075) 27px 28px);background-position:0 20px;
  color:#2B2028;padding:22px 15px 12px;border-radius:2px;
  font-family:var(--hand);font-size:20px;line-height:28px;overflow-wrap:anywhere;
  box-shadow:0 2px 3px rgba(0,0,0,.5),0 18px 30px -14px rgba(0,0,0,.92);
  transform-origin:50% 0;transition:transform .16s ease,box-shadow .16s ease,filter .3s ease;
}
.note::before{content:'';position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 46%),var(--pin);box-shadow:0 2px 3px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25)}
.note::after{content:'';position:absolute;top:5px;left:50%;margin-left:-4px;width:8px;height:5px;border-radius:50%;background:rgba(43,32,40,.28);filter:blur(1px)}
.note:nth-child(4n+1){transform:rotate(-.8deg)}
.note:nth-child(4n+2){transform:rotate(.7deg)}
.note:nth-child(4n+3){transform:rotate(.3deg)}
.note:nth-child(4n+4){transform:rotate(-.4deg)}
.note:hover{transform:rotate(0) translateY(-2px);filter:none;z-index:2}
.note:nth-child(n+7):not(:hover){filter:brightness(.74)}
.note:nth-child(n+11):not(:hover){filter:brightness(.62)}
.note .from{display:block;font-family:var(--body);font-size:11px;color:#7A6A72;margin-top:10px;padding-top:6px;border-top:1px solid rgba(43,32,40,.16);font-style:italic;text-align:right;line-height:1.4}
.note-time{display:block;font-family:var(--body);font-size:10px;letter-spacing:.02em;opacity:.62;margin-top:6px;white-space:normal}
.note.feud{background-color:#E8CFCE;--pin:#8E2130;border-left:4px solid var(--blood)}
.note.arrival{background-color:#D9E9DF;--pin:#2F7F68;border-left:4px solid #2F7F68}
.note.angry{background-color:#E4C9C4;--pin:#5A1119;border-left:4px solid #6E1B26}
.note.scheme{background-color:#D4DDC2;--pin:#4E6B2E}
.note--doc{font-family:var(--body);font-size:13.5px;line-height:1.5;letter-spacing:.01em;background-image:none;padding-top:24px}
/* The Alibi. Three sworn statements, styled as testimony rather than as buttons:
   quoted, ragged, on the same paper the notes are written on, because what the
   player is really doing is reading the shelf's own records back at it. */

/* Form 9, the inner voice. Everything else on this board was written down by
   somebody: it is ruled paper, pinned, signed. A thought was not written down at
   all, so it loses the rule lines and the pin, goes italic, and cools off the
   paper — it reads as the one card on the wall that nobody meant to leave. */
.note--thought{
  background-image:none;font-style:italic;
  background-color:color-mix(in srgb,var(--paper-lit) 84%,#7FA8C8 16%);
  box-shadow:0 1px 2px rgba(0,0,0,.34),0 12px 22px -16px rgba(0,0,0,.8);
}
.note--thought::before{opacity:.28;filter:grayscale(1)}
.note--thought .from{font-style:normal;border-top-style:dotted}
.note--thought .from::after{content:', not out loud'}
.note--new{animation:note-in .55s cubic-bezier(.2,1.2,.3,1) 1}
@keyframes note-in{0%{opacity:0;transform:translateY(-14px) rotate(-3deg) scale(.96)}100%{opacity:1}}
@media (min-width:720px){.note--doc{grid-column:span 2}}
.notes-empty{grid-column:1/-1;color:var(--ink-3);font-family:var(--hand);font-size:21px;text-align:center;padding:14px 8px;line-height:1.35}
#notesMore{display:block;margin:26px auto 0}
#notesMore[hidden]{display:none}
.pane-notes footer{margin-top:44px;font-size:12px;line-height:1.6;color:var(--ink-3);max-width:70ch}
.voice-hint{margin:12px 0 4px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--hair);border-radius:var(--r);background:var(--glass);color:var(--ink-2);font-size:13px}
.voice-hint p{margin:0;line-height:1.5}
.voice-hint-actions{display:flex;gap:8px;flex:none}
.voice-hint[hidden]{display:none}

/* ---- 7. plots: the conspiracy card and the side doors ----------------------- */
.scheme-card{
  position:relative;padding:22px 22px 20px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--mint) 22%,var(--hair));
  background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--mint) 8%,transparent),transparent 70%),linear-gradient(180deg,var(--night-3),var(--night-2));
  box-shadow:0 24px 50px -30px #000,inset 0 1px 0 var(--hair);
}
.scheme-card::before{content:'';position:absolute;left:0;top:24px;width:3px;height:26px;background:var(--mint);opacity:.85;border-radius:0 2px 2px 0}
.scheme-heading{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.live-dot{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);white-space:nowrap}
.live-dot::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;box-shadow:0 0 8px currentColor;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.scheme-card h2{font-size:27px;line-height:1.08;margin:14px 0 12px;letter-spacing:-.015em}
.scheme-card>p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 16px}
.scheme-choices{display:grid;gap:8px}
.scheme-choice{width:100%;display:grid;gap:4px;text-align:left;padding:12px 14px;border:1px solid var(--hair-lit);background:var(--glass);color:var(--ink);border-radius:var(--r);
  font:700 14px var(--body);transition:background .15s,border-color .15s,transform .08s}
.scheme-choice:hover,.scheme-choice:focus-visible{background:color-mix(in srgb,var(--mint) 10%,transparent);border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.scheme-choice:active{transform:translateY(1px)}
.scheme-choice small{font-size:11px;line-height:1.5;color:var(--ink-2);font-weight:500}
.scheme-alone{display:block;width:100%;background:none;color:var(--ink-2);border:0;text-decoration:underline;text-underline-offset:3px;font:13px var(--body);padding:14px 8px 6px;min-height:44px}
.scheme-alone:hover{color:var(--ink)}
.scheme-clock{font-size:11px;line-height:1.5;text-align:center;color:var(--ink-3);margin:6px 0 0}
.scheme-tally{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);border-top:1px solid var(--hair);padding-top:14px;margin-top:22px}
.scheme-card .eyebrow{color:var(--ink-3)}
/* the schemer, caught in the card */
.scheme-portrait{float:right;width:92px;height:92px;margin:2px -4px 10px 14px;border-radius:14px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 8px;
  background:radial-gradient(70% 60% at 50% 34%,color-mix(in srgb,var(--mint) 20%,transparent),transparent 74%),linear-gradient(180deg,var(--glass),transparent);
  border:1px solid color-mix(in srgb,var(--mint) 30%,var(--hair));box-shadow:inset 0 -14px 20px -16px #000}
.scheme-portrait .sprite{--pet-h:80px}
.scheme-portrait .sprite.sl2{width:80px}
.scheme-card .scheme-choices,.scheme-card .scheme-alone,.scheme-card .scheme-clock{clear:both}
.side-doors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.door{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 14px 12px;border-radius:var(--r);border:1px solid var(--hair);background:var(--glass);color:var(--ink);transition:background .14s,border-color .14s,transform .08s}
.door:hover{background:var(--glass-2);border-color:var(--hair-lit)}
.door:active{transform:translateY(1px)}
.door-kicker{font-size:9.5px}
.door-title{font-family:var(--display);font-size:20px;line-height:1.1}
.door-sub{font-size:11.5px;line-height:1.4;color:var(--ink-3)}

/* ---- the postcard ---------------------------------------------------------------- */
.sheet-postcard{max-width:560px}
.postcard-frame{position:relative;margin:0;border-radius:10px;overflow:hidden;background:var(--night);box-shadow:0 24px 50px -24px #000;border:1px solid var(--hair)}
.postcard-frame img{display:block;width:100%;height:auto}
.postcard-frame figcaption{display:none}
.postcard-frame.busy{aspect-ratio:4/5}
.postcard-frame.busy img{display:none}
.postcard-frame.busy figcaption{display:grid;place-items:center;position:absolute;inset:0;color:var(--ink-3);font:600 24px var(--hand);animation:pulse 1.6s ease-in-out infinite}
.postcard-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.postcard-actions .btn{flex:1 1 auto}

/* ---- 8. sheets ----------------------------------------------------------------- */
.veil{position:fixed;inset:0;z-index:60;display:none;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(4,3,8,.82);-webkit-backdrop-filter:blur(4px) saturate(.9);backdrop-filter:blur(4px) saturate(.9);
  padding:max(24px,var(--sat)) 16px calc(40px + var(--sab))}
.veil.open{display:block;animation:veil-in .18s ease-out 1}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
.sheet{
  position:relative;max-width:600px;margin:0 auto;padding:22px 24px 24px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--hair-lit);
  box-shadow:0 40px 100px -30px #000,inset 0 1px 0 var(--key-soft);
  animation:sheet-in .26s cubic-bezier(.2,.9,.3,1.1) 1;
}
@keyframes sheet-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.sheet h2{font-size:28px}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--hair-lit)}
.sheet-head>div{min-width:0}
.sheet-head .btn{flex:none}
.sheet-grab{display:none}
.sheet-transfer p,.sheet-transfer li{line-height:1.55}
.sheet-transfer h3{margin:18px 0 10px}
.sheet-transfer ol{padding-left:24px}
.sheet-transfer li+li{margin-top:8px}
.sheet-transfer .btn{min-height:44px;white-space:normal;text-align:center}
#transferShare{width:100%;margin-top:16px}
.transfer-email{border-top:1px solid var(--hair-lit);margin-top:20px}
.transfer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.transfer-actions .btn{flex:1 1 180px;min-width:0;justify-content:center}
#transferFilename{overflow-wrap:anywhere}
.transfer-status:not(:empty){padding:12px;border:1px solid var(--hair-lit);border-radius:var(--r);margin-top:16px;color:var(--ink)}
.tool-block{margin-bottom:16px}
.tool-label{display:block;margin-bottom:8px}
.chiprow{display:flex;flex-wrap:wrap;gap:7px}
.chip{min-height:38px;padding:8px 13px;font-size:13px;font-weight:700;border:1px solid var(--hair-lit);background:var(--glass);color:var(--ink);border-radius:999px;display:inline-flex;align-items:center;transition:background .12s,color .12s,border-color .12s}
.chip:hover{background:var(--glass-2);border-color:var(--edge)}
.chip[aria-pressed="true"],.chip[aria-pressed="true"]:hover{background:var(--mint);color:#10281F;border-color:var(--mint)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:38px;height:38px;border:2px solid var(--hair-lit);border-radius:10px;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .1s,border-color .1s}
.sw[aria-pressed="true"]{border-color:var(--ink);transform:scale(1.1);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--hair-lit)}
input[type=text]{width:100%;min-height:46px;padding:12px 14px;background:var(--case-mid);border:1px solid var(--hair-lit);color:var(--ink);border-radius:var(--r)}
input[type=text]::placeholder{color:var(--ink-3)}
input[type=text]:focus{border-color:var(--mint);outline:none}
.studio-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
@media (pointer:coarse){.chip{min-height:44px}.sw{width:44px;height:44px}}

/* the resident's card */
.card-hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:8px}
.card-portrait{width:150px;height:150px;flex:none;border-radius:var(--r);border:1px solid var(--hair-lit);display:flex;align-items:flex-end;justify-content:center;padding:10px;overflow:visible;
  background:radial-gradient(80% 74% at var(--key-x) 12%,var(--key-soft),var(--night) 76%);box-shadow:inset 0 1px 0 var(--hair)}
.card-portrait img{max-width:100%;max-height:100%;object-fit:contain}
.card-portrait svg{width:92px;height:92px}
.card-portrait .sprite{--pet-h:132px}
.card-portrait .sprite.sl2{height:100%;max-height:100%}
/* There used to be a 5px plank drawn across the bottom of the portrait here. As a
   pseudo-element on a positioned parent it painted OVER the sprite, so every
   resident stood behind a bar in its own profile — a shelf edge in a frame that is
   not a shelf. The card already has a border; the creature does not need a second
   one across its feet. */
.card-portrait{position:relative}
.mood-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--glass);border:1px solid var(--hair-lit)}
.mood-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.mood-content::before{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.mood-annoyed::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.mood-furious::before{background:var(--blood);box-shadow:0 0 8px var(--blood)}
.needs{margin:2px 0 4px;min-width:0}
.need{display:grid;grid-template-columns:58px 1fr 30px;align-items:center;gap:10px;margin-bottom:9px;font-size:13px;color:var(--ink-2)}
.bar{height:9px;border-radius:99px;background:var(--case-mid);border:1px solid var(--hair);overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.need.food .bar span{background:var(--amber)}
.need.fuss .bar span{background:var(--pink)}
.need.clean .bar span{background:var(--mint)}
.need.low .bar span{background:var(--blood)}
.need .num{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.bondline{font-size:12px;color:var(--ink-2);margin-top:10px;line-height:1.55}
.bondline b{color:var(--ink);font-weight:700}
.bond-bar{display:block;height:6px;border-radius:99px;background:var(--case-mid);border:1px solid var(--hair);margin-top:6px;overflow:hidden}
.bond-bar span{display:block;height:100%;background:var(--amber)}
.care-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 6px}
.care-row .btn{min-height:50px;flex-direction:column;gap:3px;padding:8px 6px}
.care-row .btn small{font-weight:500;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.care-row .btn.care-food:hover{border-color:var(--amber)}
.care-row .btn.care-fuss:hover{border-color:var(--pink)}
.care-row .btn.care-clean:hover{border-color:var(--mint)}
.bio{font-family:var(--hand);font-size:21px;line-height:1.32;color:var(--ink);margin:16px 0 8px;padding-left:14px;border-left:3px solid var(--key-mid)}
.section-rule{border-top:1px solid var(--hair);margin:18px 0 14px}
.card-section-title{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 10px}
.stat{display:grid;grid-template-columns:74px 1fr 26px;align-items:center;gap:10px;margin-bottom:7px;font-size:13px;color:var(--ink-2)}
.stat .bar span{background:var(--pink)}
.stat.menace .bar span{background:var(--blood)}
.stat.damp .bar span{background:var(--mint)}
.stat.mystique .bar span{background:var(--amber)}
.stat .num{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.traits{list-style:none;padding:0;margin:0}
.traits li{border-top:1px solid var(--hair);padding:10px 0}
.traits strong{font-size:14.5px;color:var(--warn);font-weight:700}
.traits em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.on-file{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.on-file li{font-family:var(--hand);font-size:17px;line-height:1.3;color:#2B2028;background:var(--paper-lit);padding:8px 12px;border-radius:3px;white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.on-file li.angry{background:#E4C9C4}
.on-file li.feud{background:#E8CFCE}
.on-file li.arrival{background:#D9E9DF}
.on-file-empty{font-size:13px;color:var(--ink-3)}
.position-control{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0}
.position-control label{font-size:12px;color:var(--ink-2);flex:none}
.position-control select,select.voice-select{flex:1;min-width:150px;max-width:100%;min-height:44px;background:var(--case-mid);color:var(--ink);border:1px solid var(--hair-lit);padding:10px 34px 10px 12px;border-radius:var(--r);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select option,select optgroup{background:#1A1424;color:#F2E9DC}
select.voice-select{width:100%}
.card-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px;flex-wrap:wrap}
.inline-prompt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:12px;border:1px solid var(--hair-lit);background:var(--glass);border-radius:var(--r)}
.inline-prompt label{font-size:12px;color:var(--ink-2);flex:none}
.inline-prompt input[type=text]{flex:1 1 160px;min-width:140px;width:auto}

/* studio */
.studio-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px}
.studio-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:10px 14px;text-align:left;border:1px solid var(--hair-lit);border-radius:var(--r);background:transparent;color:var(--ink-2);transition:background .12s,color .12s,border-color .12s}
.studio-tab:hover{background:var(--glass);color:var(--ink)}
.studio-tab-name{font-size:15px;font-weight:700}
.studio-tab-sub{font-size:11px;opacity:.8;line-height:1.3}
.studio-tab[aria-selected="true"]{background:var(--glass-2);color:var(--ink);border-color:var(--key-mid);box-shadow:inset 0 -3px 0 var(--pink)}
.studio-panel[hidden]{display:none}
.gen-stage{position:relative;width:100%;max-width:360px;margin:0 auto 12px;min-height:262px;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px 0;border:1px solid var(--hair-lit);border-radius:var(--r);overflow:hidden;
  background:radial-gradient(110% 72% at var(--key-x) 0%,color-mix(in srgb,var(--key) 16%,transparent) 0%,color-mix(in srgb,var(--key) 4%,transparent) 40%,var(--night) 76%);
  box-shadow:inset 0 12px 22px -12px rgba(0,0,0,.8),0 20px 44px -24px #000}
.gen-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--wood-lip) 62%,#fff) 0 2px,var(--wood-lip) 2px 5px,color-mix(in srgb,#000 26%,var(--wood)) 5px 12px,color-mix(in srgb,var(--wood) 26%,#000) 12px 100%)}
.gen-mount{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:center}
.gen-mount .sprite{--pet-h:200px;margin-bottom:13px}
.gen-desc{margin:0 0 14px;text-align:center;font-family:var(--hand);font-size:19px;line-height:1.25;color:var(--ink-2);min-height:1.25em}
.gen-palette .sw{width:34px;height:34px}
.drawing-workbench{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:20px;align-items:center;margin:8px 0 18px}
.pad-wrap{position:relative;width:100%;aspect-ratio:1;margin:0;background-color:#eee5d4;background-image:radial-gradient(#ac9b8638 .8px,transparent .8px);background-size:16px 16px;border:1px solid #8b7461;box-shadow:0 12px 25px #0004;border-radius:6px;overflow:hidden}
#pad{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.drawing-caption{text-align:center;font:19px var(--hand);color:var(--ink-2);margin:8px 0 0}
.drawing-live{text-align:center;min-width:0}
/* overflow:hidden is load-bearing, not decoration. The live sprite crops-and-zooms
   to whatever you have actually inked, which it does by sizing itself well past
   100% (211% is typical) and offsetting back. Unclipped, that oversized box hangs
   over the button below it and — being a real element with real hit-testing —
   silently eats every click aimed at "Try a wiggle". Clip the frame, and make the
   preview non-interactive as a belt-and-braces second guard: nothing in here is
   ever meant to be clicked. */
.draw-preview{height:165px;display:flex;align-items:flex-end;justify-content:center;position:relative;padding-bottom:10px;margin:12px 0 18px;background:radial-gradient(ellipse at 50% 80%,var(--key-soft),transparent 65%);border-bottom:8px solid var(--wood-lip);border-radius:4px 4px 0 0;overflow:hidden}
.draw-preview>.sprite{--pet-h:145px;width:145px}
.draw-preview .sprite,.draw-preview .sprite *{pointer-events:none}
.draw-preview>span{font:18px var(--hand);color:var(--ink-3);align-self:center;padding:12px}
.drawing-live .hint{font-size:12px;margin-top:12px}

/* decorate */
.decor-section{margin-bottom:22px}
.decor-section h3{margin:0 0 10px}
.decor-hint{margin:-4px 0 12px}
.opt-row{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:40px;padding:8px 12px;font-size:13px;font-weight:700;border:1px solid var(--hair-lit);background:var(--glass);color:var(--ink);border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:background .12s,border-color .12s}
.opt:hover{background:var(--glass-2);border-color:var(--edge)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.opt .dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.35);display:inline-block;flex:none;box-shadow:0 0 0 1px var(--hair)}
.prop-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.prop-card{border:1px solid var(--hair-lit);background:var(--glass);padding:12px 8px 10px;text-align:center;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);transition:background .12s,border-color .12s,transform .08s}
.prop-card:hover:not(.locked){background:var(--glass-2);border-color:var(--edge);transform:translateY(-1px)}
.prop-card svg{width:52px;height:52px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.prop-card b{font-size:12.5px;font-weight:700}
.prop-card small{font-size:11px;color:var(--ink-3);line-height:1.35}
.prop-card.locked{opacity:.55;cursor:not-allowed;background:transparent;border-style:dashed}
.prop-card.locked small{color:var(--warn);font-weight:700}
.prop-card.locked svg{opacity:.5;filter:grayscale(.6)}
@media (pointer:coarse){.opt{min-height:44px}}

/* narrator */
.voice-upgrade{margin-top:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--amber) 50%,transparent);border-radius:var(--r);color:var(--ink-2);font-size:13px;line-height:1.5}
.voice-upgrade b{display:block;color:var(--warn);font-size:13px;margin-bottom:7px}
.voice-upgrade p{margin:8px 0 0}
.voice-steps{font-size:12px;color:var(--ink);background:rgba(0,0,0,.28);padding:8px 10px;border-left:2px solid var(--amber);line-height:1.7;border-radius:0 6px 6px 0}
.voice-steps span{color:var(--warn);padding:0 2px}
.voice-upgrade[hidden]{display:none}

/* guide, incidents */
.guide-steps{padding-left:24px;display:grid;gap:18px;line-height:1.6;margin:0}
.guide-steps li::marker{color:var(--pink);font-weight:700}
.guide-steps h3{margin:0 0 4px;font-family:var(--hand);font-size:25px;color:var(--ink)}
.guide-steps p{margin:0;color:var(--ink-2);font-size:14px}
.guide-footnote{font-size:13px;line-height:1.65;color:var(--ink-2);border-top:1px solid var(--hair);padding-top:14px;margin-top:16px}
/* The log reads in chapters now, with a count per chapter, a date on anything
   that has happened, and a bar on anything that is quietly counting toward
   something. A locked entry that says how far along it is stops being a tease. */
#incidentsSheet .incident-group{margin-top:20px}
#incidentsSheet .incident-group h3{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;
  font:600 10px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
}
#incidentsSheet .incident-group h3 span{font-family:var(--display);font-size:13px;letter-spacing:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
#incidentsSheet .incident time{font:400 10.5px/1.4 var(--body);color:var(--ink-3);white-space:nowrap;margin-top:5px}
#incidentsSheet .incident-progress{display:block;height:4px;border-radius:3px;background:var(--glass);margin:8px 0 4px;max-width:220px;overflow:hidden}
#incidentsSheet .incident-progress i{display:block;height:100%;background:var(--mint);opacity:.75}
#incidentsSheet .incident small{font:400 10.5px/1 var(--body);color:var(--ink-3);letter-spacing:.04em}
#incidentsSheet .incident{border-top:1px solid var(--hair);padding:12px 0;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
#incidentsSheet .incident::before{content:'✓';width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint);font-size:13px;font-weight:700;margin-top:2px}
#incidentsSheet .incident b{color:var(--warn);font-size:14.5px}
#incidentsSheet .incident p{margin:3px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
#incidentsSheet .incident.locked{opacity:.55}
#incidentsSheet .incident.locked::before{content:'';background:var(--glass)}
#incidentsSheet .incident.locked b{color:var(--ink-2)}
#incidentsSheet .incident-empty{font-family:var(--hand);font-size:22px;color:var(--ink-3)}

/* toast: a slip of paper */
#toast{position:fixed;left:50%;bottom:calc(22px + var(--sab));z-index:90;transform:translateX(-50%) translateY(20px);
  max-width:min(88vw,460px);padding:12px 18px;background:var(--paper-lit);color:#2B2028;border-radius:6px;
  font-family:var(--hand);font-size:20px;line-height:1.25;text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.32),0 14px 26px -12px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .22s cubic-bezier(.2,1.2,.3,1)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 9. the phone ---------------------------------------------------------------
   Three tabs and a bottom bar. The shelf keeps all six columns (adjacency is the
   game), bleeds to the screen edges, and the creatures overhang their slots the
   way figurines crowd a real shelf. Sheets rise from the bottom and can be pulled
   shut by their handle (ui/nav.js).
   ------------------------------------------------------------------------------ */
@media (max-width:720px){
  :root{--topbar-h:52px}
  body{padding-bottom:0}
  .topbar{gap:10px;padding-left:calc(14px + var(--sal));padding-right:calc(10px + var(--sar))}
  .wordmark{font-size:21px}
  .status{font-size:8.5px;letter-spacing:.1em;gap:0;justify-content:flex-end;overflow:visible}
  .status>span{padding:0 8px;gap:5px;line-height:1.6}
  .status>span:last-child{padding-right:0}
  .status b{font-size:14px}
  .status .of,.status .pop{display:none}
  .status .trust{border-left:0}
  @media (max-width:360px){.status>span{padding:0 6px}.status .day{display:none}}
  @media (max-width:360px){.actions small{display:none}}
  #moreBtn{display:none}
  .storage-warn{margin:10px 10px 0}

  .app{display:block;padding:10px 10px calc(var(--tabbar-h) + var(--sab) + 24px)}
  .shelf-teaser{display:block}
  .cabinet-wrap::after{width:74px;height:74px;opacity:.2}
  .stage::before{width:60px;height:60px;opacity:.15}
  .pane{animation:pane-in .24s ease-out 1}
  @keyframes pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .status .moon-name{display:none}
  .pane{display:none;animation:pane-in .22s ease-out 1}
  body[data-tab="shelf"] .pane-shelf,body[data-tab="notes"] .pane-notes,body[data-tab="plots"] .pane-plots{display:block}
  .pane-plots{position:static;display:none;gap:12px}
  body[data-tab="plots"] .pane-plots{display:flex}
  @keyframes pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* the bottom bar */
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:55;
    padding:6px 8px calc(6px + var(--sab));padding-left:calc(8px + var(--sal));padding-right:calc(8px + var(--sar));
    background:color-mix(in srgb,var(--night) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--hair-lit);box-shadow:0 -18px 34px -18px #000;
  }
  .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;
    font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);transition:color .14s,background .14s}
  .tab svg{width:22px;height:22px}
  .tab[aria-current="page"],.tab[aria-expanded="true"]{color:var(--ink);background:var(--glass)}
  .tab[aria-current="page"] svg{color:var(--key)}
  .tab-badge{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--pink);color:var(--accent-ink);font-size:10px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--night)}
  .tab-badge[hidden],.tab-dot[hidden]{display:none}
  .tab-dot{position:absolute;top:8px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px var(--night),0 0 8px var(--mint)}

  /* the More tray becomes a bottom sheet */
  .tray{top:auto;right:0;left:0;bottom:0;width:auto;max-height:82dvh;overflow-y:auto;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:8px 14px calc(16px + var(--sab));transform:translateY(102%);transform-origin:50% 100%;transition:transform .26s cubic-bezier(.32,1,.45,1),visibility 0s linear .26s;opacity:1}
  .tray.open{transform:none}
  .tray-head{position:relative;padding:20px 4px 10px}
  .tray-head::before{content:'';position:absolute;left:50%;top:7px;transform:translateX(-50%);width:38px;height:4px;border-radius:99px;background:var(--edge)}
  .tray-item{min-height:62px}
  .tray-scrim{z-index:56}

  /* THE SHELF */
  .stage{margin:0 -10px}
  .cabinet-wrap{--case-pad:5px;--return-w:9px;--shelf-w:100vw;--rail:calc(100vw - var(--return-w) * 2 - var(--case-pad) * 2);border-radius:0;box-shadow:0 30px 60px -30px #000;
    background:linear-gradient(90deg,rgba(0,0,0,.9) 0 1px,color-mix(in srgb,var(--wood-lip) 55%,var(--key)) 1px 4px,color-mix(in srgb,#000 32%,var(--wood)) 4px var(--return-w),transparent var(--return-w) calc(100% - var(--return-w)),color-mix(in srgb,#000 45%,var(--wood)) calc(100% - var(--return-w)) calc(100% - 3px),rgba(0,0,0,.92) calc(100% - 3px) 100%),var(--wood)}
  .cabinet-wrap::before{border-radius:0;height:10px}
  .cabinet{padding-top:40px}
  .cabinet::after{height:16px}
  .shelf-row{--pitch:calc(var(--rail) / 6);--pet-size:calc(var(--pitch) * 1.62);--slot-h:calc(var(--pet-size) + 10px);--plank-h:30px;--label-drop:10px}
  .slots{padding:0 calc(var(--pitch) * .12)}
  .slot .prop svg{width:calc(var(--pitch) * .98);height:calc(var(--pitch) * .98);filter:drop-shadow(7px 6px 6px rgba(0,0,0,.5)) drop-shadow(0 0 1.5px rgba(0,0,0,.5))}
  .shelf-row:not(:has(.pet)):has(.slot){--slot-h:64px;--label-drop:8px}
  .shelf-row:not(:has(.pet)):has(.slot) .slot .prop svg{width:calc(var(--pitch) * .62);height:calc(var(--pitch) * .62)}
  .shelf-row.row-empty{--slot-h:42px;--label-drop:6px}
  .plank{background:
    linear-gradient(90deg,color-mix(in srgb,var(--key) calc(54% * var(--stop,1)),transparent) 0%,color-mix(in srgb,var(--key) calc(14% * var(--stop,1)),transparent) 46%,transparent 82%) 0 0/100% 2px no-repeat,
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,rgba(255,255,255,.03) 1px 2px,transparent 2px 11px),
    linear-gradient(180deg,var(--wood-lip) 0 2px,color-mix(in srgb,#000 16%,var(--wood)) 2px 4px,color-mix(in srgb,#000 34%,var(--wood)) 4px 6px,rgba(0,0,0,.94) 6px 7px,color-mix(in srgb,var(--wood) 26%,#000) 7px 100%)}
  /* halved blur: three drop-shadows on eighteen animating SVGs is real GPU cost */
  .sl2 .sprite-figure{filter:drop-shadow(8px 6px 7px rgba(0,0,0,.6)) drop-shadow(0 0 1.5px rgba(0,0,0,.55)) drop-shadow(-2px -1px 3px var(--key-hi))}
  .pet.furious .sprite-figure{filter:drop-shadow(8px 6px 7px rgba(0,0,0,.6)) drop-shadow(0 0 1.5px rgba(0,0,0,.55)) drop-shadow(-2px -1px 3px rgba(255,74,87,.7))}
  .pet.asleep .sprite-figure{filter:drop-shadow(5px 4px 6px rgba(0,0,0,.52)) drop-shadow(0 0 1.5px rgba(0,0,0,.5))}
  .pet .nameplate,.prop .nameplate{left:0;right:0;padding:0 1px;top:calc(100% + 7px);height:22px;line-height:10px;font-size:8.5px;letter-spacing:.02em;
    white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
  .pips{top:calc(100% + var(--plank-h) + 2px);gap:4px;height:6px}
  .pip{width:5.5px;height:5.5px}
  .pip.zzz,.pip.plotting{font-size:7.5px}
  .pet::after,.prop::after{width:92%;left:54%}
  .slot:empty::after{font-size:8px;bottom:8px}
  .sl-bubble{font-size:12px;max-width:min(128px,200%);padding:5px 7px}
  .ghost{width:126px}
  .empty-shelf{max-width:300px;padding:20px 16px 16px;font-size:13px;gap:8px}
  .empty-shelf strong{font-size:27px}
  body:has(.empty-shelf) .shelf-row:first-child{--slot-h:262px}

  .actions{grid-template-columns:1.4fr 1fr 1fr 44px;gap:8px;margin-top:12px}
  .actions .btn{min-height:56px;flex-direction:column;gap:4px;padding:8px 4px;font-size:11.5px;letter-spacing:.02em}
  .actions .btn svg{width:20px;height:20px}
  .actions .snap-btn{min-width:44px;width:44px;padding:0}
  body:has(.empty-shelf) .actions{grid-template-columns:1fr 1fr 1.4fr}
  .shelf-progress{margin-top:10px;padding:10px 14px;gap:12px}
  .shelf-progress meter{width:70px}
  .shelf-progress p{font-size:12px}

  /* notes */
  .notes{grid-template-columns:1fr;gap:26px 0;padding-top:26px}
  .note{font-size:21px;line-height:30px;padding:24px 18px 14px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(43,32,40,.075) 29px 30px)}
  .note--doc{font-size:14px;line-height:1.5}
  .voice-hint{flex-direction:column;align-items:flex-start;gap:10px}

  /* plots */
  .scheme-card{padding:20px 18px 18px}
  .scheme-card h2{font-size:26px}

  /* sheets rise from the bottom */
  .veil{padding:0;display:none;align-items:flex-end}
  .veil.open{display:flex}
  .sheet{width:100%;max-width:none;max-height:calc(100dvh - 40px - var(--sat));overflow-y:auto;overscroll-behavior:contain;margin:auto 0 0;border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:0 16px calc(24px + var(--sab));animation:sheet-up .3s cubic-bezier(.32,1,.45,1) 1}
  @keyframes sheet-up{from{transform:translateY(60px);opacity:.6}to{transform:none;opacity:1}}
  .sheet-head{position:sticky;top:0;z-index:3;margin:0 -16px 16px;padding:22px 16px 12px;background:var(--night-3);border-bottom:1px solid var(--hair);touch-action:none}
  .sheet-head::before{content:'';position:absolute;left:50%;top:8px;transform:translateX(-50%);width:40px;height:4px;border-radius:99px;background:var(--edge)}
  .sheet h2{font-size:26px}
  .sheet.sheet-dragging{transition:none}
  .card-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
  .card-portrait{width:172px;height:172px}
  .card-portrait .sprite{--pet-h:150px}
  .needs{width:100%;text-align:left}
  .care-row{gap:7px}
  .care-row .btn{padding:8px 4px;font-size:13px}
  .card-actions .btn{flex:1 1 0}
  .prop-tray{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .studio-tab{min-height:52px;padding:9px 11px}
  .studio-tab-sub{display:none}
  .gen-stage{min-height:222px;padding:12px 10px 0}
  .gen-mount .sprite{--pet-h:165px}
  .gen-desc{font-size:17px}
  .drawing-workbench{grid-template-columns:minmax(0,1fr) 110px;gap:12px}
  .draw-preview{height:118px}
  .draw-preview>.sprite{--pet-h:100px;width:100px}
  .drawing-live .tool-label{font-size:9px;letter-spacing:.12em;white-space:nowrap}
  .drawing-live .hint{font-size:11px}
  .drawing-caption{font-size:17px}
  #studioVeil .studio-actions{position:sticky;bottom:0;z-index:2;margin:18px -16px 0;padding:12px 16px calc(12px + var(--sab));background:var(--night-2);border-top:1px solid var(--hair);gap:8px}
  #studioVeil .studio-actions .btn{flex:1 1 0;min-width:0}
  #studioVeil #savePet{flex:1.5 1 0}
  #toast{bottom:calc(var(--tabbar-h) + 14px + var(--sab));font-size:18px;max-width:calc(100vw - 32px)}
  body:has(.veil.open) #toast{bottom:calc(22px + var(--sab))}
}
@media (max-width:400px){
  .wordmark{font-size:19px}
  .status>span{padding:0 6px}
  .gen-stage{min-height:198px}
  .gen-mount .sprite{--pet-h:145px}
  .gen-palette .sw{width:30px;height:30px}
  .actions .btn{font-size:11px}
}
/* a phone on its side: nothing may be taller than it has to be */
@media (orientation:landscape) and (max-height:520px){
  :root{--topbar-h:44px;--tabbar-h:50px}
  .wordmark{font-size:19px}
  .cabinet{padding-top:30px}
  .shelf-row{--pet-size:clamp(70px,calc((100dvh - 210px) / 2),112px)}
  .tab{min-height:40px;flex-direction:row;gap:6px;font-size:11px}
  .tab svg{width:18px;height:18px}
  .tab-badge{top:2px}
  .veil{padding:0}
  .sheet{max-height:100dvh;border-radius:0}
  .gen-stage{min-height:150px}
  .gen-mount .sprite{--pet-h:120px}
}

/* ---- 10. motion off ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .sprite.sl2,.sl2 .sprite-act,.sl2 .sprite-figure,.sl2 .stamp-art,.sl2 .sl-part{animation:none!important;transform:none!important;rotate:none!important;translate:none!important;scale:none!important}
  .sl2 .sprite-stamp{transform:translate(-50%,-50%)!important}
  .sl2 .sprite-creature{transform:translateY(var(--sl-foot,8%))!important}
  .sl2.sl-asleep .sl-part[data-part="eye"]{scale:1 .12!important}
  .sl2.sl-asleep .stamp-art.anim-blink{transform:scaleY(.12)!important}
  .sl-bubble,.sl-zzz,.care-motes{display:none}
  .sl2 .sprite-figure,.pet.furious .sprite-figure,.pet.asleep .sprite-figure,.pet:hover .sprite-figure{filter:drop-shadow(2px 3px 2px rgba(0,0,0,.5))!important}
}

/* The living-room edition: a readable invitation above a tactile miniature stage. */
.shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 18px}
.shelf-heading h1{font:400 clamp(25px,3vw,36px)/1.18 var(--display);margin:7px 0 0;letter-spacing:-.035em}
.shelf-heading .eyebrow{font-size:9px;color:var(--mint)}
.room-live{font-size:10px;color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:7px}
.room-live i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
.shelf-brief{display:flex;gap:12px;align-items:center;padding:12px 15px;background:linear-gradient(110deg,color-mix(in srgb,var(--mint) 10%,var(--night-2)),var(--night-2));border:1px solid color-mix(in srgb,var(--mint) 25%,transparent);border-radius:14px;margin-bottom:16px}
.brief-icon{font:28px var(--display);color:var(--mint)}
.shelf-brief>div{flex:1;min-width:0}.shelf-brief b{font-size:14px;display:block}.shelf-brief span:not(.brief-icon){display:block;color:var(--ink-2);font-size:12px;margin-top:3px}.shelf-brief .btn{min-height:44px;flex:none}
.actions .btn{position:relative}.actions #roundsBtn{flex-wrap:wrap;gap:3px 7px}.actions small{display:block;font-size:9px;font-weight:400;color:var(--ink-2);flex-basis:100%}
.cabinet{counter-reset:sl-row;background-color:var(--case-lit)}
.cabinet::before{background:radial-gradient(80% 64% at var(--key-x) 2%,transparent 28%,rgba(0,0,0,.2) 74%,rgba(0,0,0,.48) 100%)}
.slot .sprite{--pet-h:min(var(--pet-size),calc(var(--pitch) * 1.06))}
.pet:focus-visible{outline:2px solid var(--mint);outline-offset:-3px;border-radius:10px}
.care-explainer{font-size:12px;color:var(--ink-2);line-height:1.5;margin:10px 0 14px}
.play-invite{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:14px 16px;border:1px solid color-mix(in srgb,var(--pink) 40%,transparent);border-radius:12px;background:linear-gradient(110deg,color-mix(in srgb,var(--pink) 13%,var(--night-2)),var(--night-2));color:var(--ink);gap:14px}
.play-invite b{display:block;font-family:var(--display);font-size:20px;font-weight:400}.play-invite small{display:block;font-size:12px;color:var(--ink-2);margin-top:5px}.play-invite>span:last-child{font-size:26px;color:var(--pink)}
.care-float{position:absolute;z-index:9;left:50%;top:15%;white-space:nowrap;font:bold 20px var(--body);color:var(--mint);text-shadow:0 2px 8px #000;animation:care-rise 1.4s ease-out forwards;pointer-events:none}
.care-float.food{color:var(--amber)}.care-float.fuss{color:var(--pink)}
@keyframes care-rise{0%{opacity:0;transform:translate(-50%,15px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-38px)}}
.sheet-play{max-width:480px}
#playPortrait{height:120px;display:flex;justify-content:center;align-items:end}#playPortrait .sprite{--pet-h:120px;width:120px}
#playCue{display:block;font:500 24px/1.3 var(--hand);margin-top:10px;min-height:32px}.play-sparks{position:absolute;inset:20px 20px auto;color:var(--amber);font-size:28px;letter-spacing:20px;pointer-events:none;opacity:.5}
.play-rounds{display:flex;align-items:center;gap:7px;margin-top:16px}.play-rounds>span:first-child{margin-right:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}.play-step{width:22px;height:5px;border-radius:3px;background:var(--glass-2)}.play-step.done{background:var(--mint)}
#playStatus{font-size:14px;line-height:1.5;min-height:42px;color:var(--ink-2);margin:12px 0}
.gesture{--gesture:var(--amber);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gesture) 40%,transparent);background:color-mix(in srgb,var(--gesture) 8%,var(--night-2));color:var(--gesture);min-height:96px;transition:transform .12s,background .12s,box-shadow .12s}
.gesture:nth-child(2){--gesture:var(--pink)}.gesture:nth-child(3){--gesture:var(--mint)}.gesture:nth-child(4){--gesture:#BCACED}.gesture svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.gesture span{font-size:12px;font-weight:700}.gesture.lit,.gesture[aria-disabled=false]:active{background:var(--gesture);color:var(--night);transform:translateY(-5px);box-shadow:0 6px 28px color-mix(in srgb,var(--gesture) 35%,transparent)}.gesture[aria-disabled=true]{cursor:default}
.play-controls{display:flex;justify-content:center;margin:20px 0 12px}.play-controls .btn{width:100%;min-height:48px}.sheet-play .hint{text-align:center;font-size:12px}.celebrate{animation:club-bounce .7s ease-in-out}
@keyframes club-bounce{25%{transform:translateY(-18px) rotate(-8deg)}60%{transform:rotate(8deg)}85%{transform:translateY(-6px)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1040px) and (min-width:721px){.room-live{display:none}}
@media(max-width:720px){
  .shelf-heading{margin:7px 4px 16px}.shelf-heading h1{font-size:28px}.room-live{display:none}
  .shelf-brief{margin-bottom:16px;padding:10px 12px}.shelf-brief b{font-size:13px}.shelf-brief span:not(.brief-icon){font-size:11px}
  /* Six visible spaces preserve the same neighbour relationships at every size. */
  .stage{overflow:clip;border-radius:0;margin:0 -10px;touch-action:pan-y}
  .cabinet-wrap{width:100%;min-width:0;max-width:100%;--shelf-w:100vw;--return-w:9px;--case-pad:5px;--rail:calc(var(--shelf-w) - var(--return-w) * 2 - var(--case-pad) * 2);border-radius:0}
  .cabinet{padding-top:32px;overflow-clip-margin:0}.shelf-row{--pitch:calc(var(--rail) / 6);--pet-size:calc(var(--pitch) * 1.06);--slot-h:clamp(78px,calc(var(--pet-size) + 18px),128px);--plank-h:32px;--label-drop:16px}.slots{padding:0}
  .pet,.prop{min-height:44px;touch-action:pan-y}
  .pet .nameplate,.prop .nameplate{font-size:clamp(8.5px,2.5vw,10px);line-height:11px;letter-spacing:0;white-space:normal;overflow-wrap:break-word;hyphens:auto;top:calc(100% + 7px);height:22px}
  .actions{gap:6px}.actions #roundsBtn{gap:3px;flex-wrap:nowrap}.actions .btn{font-size:11px}.actions small{font-size:8px;flex-basis:auto}
  .card-hero{grid-template-columns:92px minmax(0,1fr);text-align:left;align-items:center;gap:12px}.card-portrait{width:92px;height:112px;padding:4px}.card-portrait .sprite{--pet-h:100px}.needs{width:100%}.need{grid-template-columns:42px 1fr 24px;gap:5px;font-size:11px}.bondline{font-size:10px}.care-row{position:sticky;bottom:0;z-index:5;background:var(--night-2);padding:10px 0;margin-bottom:8px;border-radius:12px}.care-row .btn{min-height:54px;font-size:12px}.care-row .btn small{font-size:9px}
  .sheet-play .sheet-head{margin-bottom:8px}#playPortrait{height:92px}#playPortrait .sprite{--pet-h:92px;width:92px}.gesture{min-height:88px}
}
@media(prefers-reduced-motion:reduce){.care-float{animation:none;transform:translateX(-50%)}.celebrate{animation:none}.gesture{transition:none}.gesture.lit{transform:none}}

/* Case papers, visiting step, and the museum share the cabinet's materials. */
.story-card{padding:22px;border:1px solid var(--hair-lit);border-radius:16px;margin-bottom:14px;background:linear-gradient(145deg,var(--night-3),var(--night-2));color:var(--ink);overflow:hidden;position:relative}
.story-card h2{font:400 25px/1.2 var(--display);margin:12px 0}.story-card p{font-size:14px;line-height:1.65;color:var(--ink-2)}.story-card small{font-size:11px;line-height:1.6;color:var(--ink-2);display:block}.story-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.file-stamp{font:700 10px var(--body);letter-spacing:.12em;padding:5px 7px;border:1px solid var(--amber);color:var(--amber);transform:rotate(4deg)}
.case-card{border-top:3px solid var(--amber);background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--amber) 10%,transparent),transparent 65%),var(--night-2)}.case-track{display:flex;gap:5px;margin:16px 0}.case-track i{height:4px;flex:1;background:var(--glass-2);border-radius:4px}.case-track i.done{background:var(--amber)}.case-hint{padding:10px 12px;border-left:2px solid var(--amber);background:var(--glass);font-size:12px!important}.case-choices{display:flex;flex-direction:column;gap:8px;margin:14px 0}.case-choices .btn{font-size:13px;min-height:44px}
.visitor-card{border-color:color-mix(in srgb,var(--pink) 30%,transparent)}.guest-portrait{float:right;width:100px;height:100px;display:flex;align-items:end;justify-content:center;margin:10px -10px 4px 6px}.guest-portrait .sprite{--pet-h:100px;width:100px}.guest-title{font:500 18px var(--hand);color:var(--pink)}.visitor-host{display:block;font-size:11px;color:var(--ink-2);clear:both;margin:12px 0}.visitor-host select{display:block;width:100%;min-height:44px;margin-top:6px;padding:8px 10px;border:1px solid var(--hair-lit);border-radius:9px;background:var(--night-3);color:var(--ink);font-size:16px}.request-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.request-actions .btn{min-height:44px;font-size:11px;flex:1 1 110px;white-space:normal}.accepted{font-size:12px;color:var(--mint)!important}
.museum-door{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:15px 18px;background:var(--glass);color:var(--ink);border:1px solid var(--hair-lit);border-radius:12px;margin:14px 0}.museum-door>span{font-size:24px;color:var(--amber)}.museum-door>div{flex:1}.museum-door b{display:block;font:400 20px var(--display)}.museum-door small{display:block;font-size:11px;color:var(--ink-2);margin-top:5px}
.daily-card{display:flex;gap:15px;align-items:center;padding:16px;margin-top:12px;background:linear-gradient(110deg,color-mix(in srgb,var(--amber) 10%,var(--night-2)),var(--night-2));border:1px solid var(--hair-lit);border-radius:12px}.daily-card>div{min-width:0;flex:1}.daily-card b{display:block;font:400 20px var(--display);margin:7px 0}.daily-card span:not(.eyebrow){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 17px/1.3 var(--hand);color:var(--ink-2)}.daily-card .btn{flex:none;min-height:44px}
.resident-request{margin:18px 0;padding:16px;border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);border-radius:12px;background:color-mix(in srgb,var(--amber) 6%,var(--night-2))}.resident-request p{font:500 22px/1.3 var(--hand);margin:8px 0}.resident-request small{font-size:11px;color:var(--ink-2)}
.anatomy-cards{display:grid;gap:8px}.anatomy-cards>div{padding:12px 14px;background:var(--glass);border-radius:10px;border-left:2px solid var(--pink)}.anatomy-cards b{font-size:13px}.anatomy-cards p{font-size:12px;line-height:1.6;color:var(--ink-2);margin:6px 0 0}
.relationship-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.relationship-list article{padding:14px;border:1px solid var(--hair-lit);border-radius:10px}.relationship-list b{display:block;font:400 18px var(--display);margin:6px 0}.relationship-tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}.relationship-list p{font-size:12px;line-height:1.5;color:var(--ink-2)}
.sheet-museum{max-width:720px}.sheet-museum h3{font:400 22px var(--display);margin:26px 0 12px}.sheet-museum h3 small{font:400 11px var(--body);display:block;margin-top:6px;color:var(--ink-2)}.museum-intro{font:500 23px var(--hand);color:var(--ink-2)}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.collection-grid article{padding:18px 12px;border:1px solid var(--hair-lit);border-radius:12px;text-align:center;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--amber) 9%,transparent),transparent)}.collection-grid article>span{display:block;font-size:32px;color:var(--amber);margin-bottom:10px}.collection-grid b{font-size:13px;display:block}.collection-grid small{font-size:10px;display:block;line-height:1.4;color:var(--ink-2);margin-top:8px}.uncollected{opacity:.6}.album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.album figure{margin:0}.album img{width:100%;border-radius:8px;display:block}.album figcaption{font:500 16px/1.3 var(--hand);margin-top:8px}.album small{display:block;font:10px var(--body);margin-top:4px;color:var(--ink-2)}.memorials{display:flex;gap:10px;flex-wrap:wrap}.memorials article{border:1px solid var(--hair-lit);border-radius:10px;padding:14px;flex:1 1 140px}.memorials p{font-size:13px;color:var(--ink-2)}.memorials small{font-size:11px;color:var(--ink-2)}.memory-row{padding:12px 0;border-bottom:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:6px 15px;font-size:13px}.memory-row span{color:var(--ink-2)}.memory-row small{flex-basis:100%;color:var(--ink-2)}.memory-timeline{border-left:1px solid var(--hair-lit);padding-left:18px}.memory-timeline article{position:relative;padding:8px 0 18px}.memory-timeline article::before{content:'';position:absolute;width:7px;height:7px;left:-22px;top:13px;border-radius:50%;background:var(--amber)}.memory-timeline small{font-size:10px;color:var(--ink-2)}.memory-timeline b{display:block;font-size:14px;margin-top:8px}.memory-timeline p{font:500 20px/1.35 var(--hand);color:var(--ink-2);margin:6px 0}
@media(min-width:1041px){.pane-plots{max-height:calc(100dvh - 100px);overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--edge) transparent;overscroll-behavior-y:contain}}
@media(max-width:720px){.daily-card{padding:12px;gap:10px}.daily-card .btn{font-size:11px;padding:8px}.daily-card b{font-size:18px}.story-card{padding:20px}.story-card h2{font-size:27px}.collection-grid{gap:6px}.collection-grid article{padding:12px 7px}.collection-grid b{font-size:11px}.album{grid-template-columns:repeat(2,minmax(0,1fr))}}
[hidden]{display:none!important}
.pane-plots>*{flex-shrink:0}.pane-plots .story-card,.pane-plots .museum-door{margin:0}

.update-banner{display:flex;align-items:center;justify-content:center;gap:15px;padding:12px;background:var(--mint);color:#10281F;font-size:13px}.update-banner .btn{color:#10281F;border-color:#397462}
.pet-arrival .sprite{animation:resident-arrives .7s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes resident-arrives{0%{opacity:0;transform:translateY(-35px) rotate(-8deg) scale(.8)}55%{opacity:1;transform:translateY(3px) scale(1.08,.9)}78%{transform:translateY(-5px) scale(.98,1.04)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pet-arrival .sprite{animation:none}}

/* Articulated residents: a shoulder/hip and a separate elbow/knee. Mirrored
   SVG mounts need their rotation sign reversed once, independently of phase. */
.cr-joint{transform-box:view-box;transform-origin:0 0}
.sl2:where(:not(.sl-asleep):not(.sl-still)) .cr-joint[data-joint="elbow"]{animation:elbow-rest 4.2s ease-in-out calc(var(--sl-ph,0) * 4.2s) infinite}
.sl2.sl-vector:not(.sl-asleep):not(.sl-still):not(.sl-travel):not(.sl-sauntering):not(.sl-sneaking):not(.sl-flapping):not(.sl-hanging) .sprite-figure{animation:none}
.sl2.sl-vector:where(:not(.sl-asleep):not(.sl-still)) .cr-torso{animation:torso-breathe var(--sl-breath,3.8s) ease-in-out var(--sl-phase,0s) infinite;transform-origin:0 32px;transform-box:view-box}
.sl2:not(.sl-travel):not(.sl-sauntering):not(.sl-sneaking):not(.sl-stepping):not(.sl-hanging) .sl-part[data-part="leg"]{animation:none}
@keyframes torso-breathe{0%,100%{translate:0 0;scale:1 1}50%{translate:0 -.65px;scale:1.015 1.025}}
@keyframes elbow-rest{0%,100%{rotate:calc(6deg * var(--sl-pose,1))}40%{rotate:calc(23deg * var(--sl-pose,1))}70%{rotate:calc(11deg * var(--sl-pose,1))}}
@keyframes armswing{0%,100%{rotate:calc(-7deg * var(--sl-mirror,1))}50%{rotate:calc(9deg * var(--sl-mirror,1))}}
.sl2.sl-sauntering{--sl-gait-dur:560ms}
.sl2.sl-vector:is(.sl-gait-walk,.sl-gait-scuttle,.sl-sauntering,.sl-sneaking) .sprite-figure{animation:none}
.sl2:is(.sl-gait-walk,.sl-gait-scuttle,.sl-sauntering,.sl-sneaking) .cr-torso{animation:torso-walk var(--sl-gait-dur,660ms) ease-in-out infinite}
.sl2.sl-sauntering .sl-part[data-part="leg"]{animation:legwalk var(--sl-gait-dur) linear calc(var(--sl-ph,0) * var(--sl-gait-dur)) infinite}
.sl2.sl-sauntering .sl-part[data-part="arm"]{animation:armwalk var(--sl-gait-dur) ease-in-out calc((var(--sl-ph,0) - .5) * var(--sl-gait-dur)) infinite}
.sl2:is(.sl-travel,.sl-sauntering,.sl-sneaking,.sl-stepping) .cr-joint[data-joint="knee"]{animation:knee-step var(--sl-gait-dur,660ms) linear calc(var(--sl-ph,0) * var(--sl-gait-dur,660ms)) infinite}
.sl2:is(.sl-travel,.sl-sauntering,.sl-sneaking) .cr-joint[data-joint="elbow"]{animation:elbow-step var(--sl-gait-dur,660ms) ease-in-out calc((var(--sl-ph,0) - .5) * var(--sl-gait-dur,660ms)) infinite}
.sl2.sl-gait-flap .cr-joint[data-joint="knee"]{animation:knee-tuck 1.1s ease-in-out calc(var(--sl-ph,0) * 1.1s) infinite}
.sl2.sl-gait-hop .cr-joint[data-joint="knee"]{animation:knee-tuck var(--sl-gait-dur,560ms) ease-in-out infinite}
.sl2.sl-gait-ooze .cr-joint[data-joint="knee"]{animation:knee-tuck 1.2s ease-in-out calc(var(--sl-ph,0) * 1.2s) infinite}
@keyframes legwalk{0%,100%{rotate:calc(-24deg * var(--sl-mirror,1));translate:0 0}52%{rotate:calc(24deg * var(--sl-mirror,1));translate:0 0}72%{rotate:calc(3deg * var(--sl-mirror,1));translate:0 -2.4px}90%{rotate:calc(-25deg * var(--sl-mirror,1));translate:0 -.8px}}
@keyframes legscuttle{0%,100%{rotate:calc(-30deg * var(--sl-mirror,1));translate:0 0}50%{rotate:calc(30deg * var(--sl-mirror,1));translate:0 -1.5px}}
@keyframes legsneak{0%,100%{rotate:calc(-28deg * var(--sl-mirror,1));translate:0 0}50%{rotate:calc(28deg * var(--sl-mirror,1));translate:0 -3px}}
@keyframes armwalk{0%,100%{rotate:calc(-28deg * var(--sl-mirror,1))}50%{rotate:calc(28deg * var(--sl-mirror,1))}}
@keyframes knee-step{0%,100%{rotate:calc(6deg * var(--sl-mirror,1))}45%{rotate:calc(10deg * var(--sl-mirror,1))}66%{rotate:calc(65deg * var(--sl-mirror,1))}82%{rotate:calc(28deg * var(--sl-mirror,1))}94%{rotate:0deg}}
@keyframes elbow-step{0%,100%{rotate:calc(12deg * var(--sl-mirror,1))}38%{rotate:calc(52deg * var(--sl-mirror,1))}72%{rotate:calc(24deg * var(--sl-mirror,1))}}
@keyframes knee-tuck{0%,100%{rotate:calc(12deg * var(--sl-mirror,1))}50%{rotate:calc(48deg * var(--sl-mirror,1))}}
@keyframes torso-walk{0%,50%,100%{translate:0 .7px;rotate:0deg;scale:1.015 .99}25%{translate:0 -1.2px;rotate:-1.8deg;scale:.995 1.015}75%{translate:0 -1.2px;rotate:1.8deg;scale:.995 1.015}}
@keyframes sl2-saunter{0%,100%{transform:none}8%{transform:translateX(calc(-2% * var(--sl-dir,1)))}45%,53%{transform:translateX(calc(13% * var(--sl-dir,1)))}92%{transform:translateX(calc(-1% * var(--sl-dir,1)))}}
/* A gesture travels through the shoulder first; the hand follows at its elbow. */
.sl2:is(.sl-waving,.sl-stretching,.sl-care-fuss) .sl-part[data-part="arm"]{animation:arm-lift 1s ease-in-out both}
.sl2:is(.sl-waving,.sl-stretching,.sl-care-fuss) .cr-joint[data-joint="elbow"]{animation:elbow-wave .38s ease-in-out 3}
.sl2.sl-reaching .cr-joint[data-joint="elbow"]{animation:elbow-reach .9s ease-in-out both}
.sl2.sl-care-food .sl-part[data-part="arm"]{animation:arm-feed 1s ease-in-out both}
.sl2.sl-care-food .cr-joint[data-joint="elbow"]{animation:elbow-feed .28s ease-in-out 4}
.sl2.sl-care-clean .sl-part[data-part="arm"]{animation:armwalk .22s ease-in-out calc(var(--sl-ph,0) * .22s) 5}
.sl2.sl-care-clean .cr-joint[data-joint="elbow"]{animation:elbow-wave .22s ease-in-out calc(var(--sl-ph,0) * .22s - .06s) 5}
@keyframes arm-lift{0%,100%{rotate:0deg}30%,70%{rotate:calc(110deg * var(--sl-pose,1))}}
@keyframes elbow-wave{0%,100%{rotate:calc(-18deg * var(--sl-pose,1))}50%{rotate:calc(42deg * var(--sl-pose,1))}}
@keyframes elbow-reach{0%,100%{rotate:calc(16deg * var(--sl-pose,1))}35%{rotate:calc(-38deg * var(--sl-pose,1))}65%{rotate:0deg}}
@keyframes arm-feed{0%,100%{rotate:0deg}25%,80%{rotate:calc(-34deg * var(--sl-pose,1))}}
@keyframes elbow-feed{0%,100%{rotate:calc(-70deg * var(--sl-pose,1))}50%{rotate:calc(-115deg * var(--sl-pose,1))}}
.portrait-stage{display:flex;flex-direction:column;align-items:center;min-width:0}
.motion-preview{min-height:44px;white-space:nowrap;padding:6px 8px}
@media(prefers-reduced-motion:reduce){.sl2 .cr-joint,.sl2 .cr-torso,.sl2 .sl-part,.sl2 .sprite-figure{animation:none!important;rotate:none!important;translate:none!important;scale:none!important}.motion-preview,#genMotion{display:none}}

/* Crumb Chase: the resident is the player, with continuous steering and jumps. */

@media (max-width:720px){.sheet-play{max-width:none}}

@keyframes chase-feedback{0%{opacity:0;translate:0 7px}12%,75%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -5px}}

@keyframes chase-flutter{from{scale:1 1}to{scale:.7 1.06}}
@keyframes chase-glint{0%,100%{filter:drop-shadow(0 0 4px #b9a6ff)}50%{filter:drop-shadow(0 0 9px #e6dcff)}}
@keyframes chase-squash{0%{scale:1 1;opacity:1}35%{scale:1.5 .28}100%{scale:1.9 .08;opacity:0}}
@keyframes chase-puff{from{opacity:.9;scale:.5 .6}to{opacity:0;scale:1.7 1;translate:0 -6px}}
@keyframes chase-float{0%{opacity:0;translate:0 6px}20%{opacity:1}100%{opacity:0;translate:0 -28px}}
@keyframes chase-shake{0%,100%{translate:0 0}20%{translate:-3px 1px}40%{translate:3px -1px}60%{translate:-2px 0}80%{translate:2px 0}}
@keyframes chase-star{from{scale:.3;opacity:0}60%{scale:1.25;opacity:1}to{scale:1;opacity:1}}

.sl2.sl-controlled.sl-travel .sprite-act{animation:none}
.sl-controlled .sprite-creature,.sl-controlled .sprite-drawing{transition:none}
.sl2.sl-controlled.sl-airborne .cr-joint[data-joint="knee"]{animation:knee-tuck .7s ease-in-out infinite}
.sl2.sl-catching .sl-part[data-part="arm"]{animation:arm-feed .36s ease-in-out both}
.sl2.sl-catching .cr-joint[data-joint="elbow"]{animation:elbow-feed .18s ease-in-out 2}
.sl2.sl-pushing-off .cr-joint[data-joint="knee"]{animation:knee-tuck .23s ease-out both}
.sl2.sl-parry .cr-horn,.sl2.sl-parry .cr-crest{filter:drop-shadow(0 0 3px #ffe683)}
@keyframes sl2-nibble{0%,100%{transform:none}35%{transform:scale(1.05,.95)}70%{transform:scale(.98,1.03)}}
@keyframes sl2-pushoff{0%,100%{transform:none}30%{transform:scale(1.08,.9)}70%{transform:scale(.95,1.06)}}

/* Deliberate creation: a named, ordered catalog with reversible browsing. */
.variant-picker{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;margin:12px 0 18px;padding:12px;background:rgba(0,0,0,.15);border:1px solid var(--line);border-radius:12px}
.variant-picker label{grid-column:1/3;font-weight:700;font-size:12px;align-self:center}
#genVariantCount{font-size:11px;white-space:nowrap;color:var(--ink-2);align-self:center;text-align:right}
.variant-picker select{background:var(--night-2);color:var(--ink);border:1px solid var(--edge);padding:0 10px;min-width:0;width:100%;min-height:44px;border-radius:8px;font:inherit;font-size:14px}
.variant-picker .btn{padding:0;min-height:44px;font-size:25px}
#genParts .chip[aria-pressed=true]{background:var(--mint);color:#10281f;border-color:var(--mint)}
.care-record{margin:12px 0;color:var(--ink-2);font-size:12px;line-height:1.6}
.care-record summary{cursor:pointer;padding:8px 0;color:var(--ink)}
.care-record p{margin:4px 0}
/* Testimony reads as numbered evidence, with explicit verdicts, not colour alone. */

/* A little stagecraft, kept behind the actual collision silhouettes. */

@keyframes chase-dust{to{translate:12px -16px;opacity:.25}}

.gesture.tapped{animation:gesture-confirm .3s ease-out}
@keyframes gesture-confirm{0%{box-shadow:0 0 0 3px var(--gesture);transform:scale(.95)}100%{box-shadow:0 0 0 0 transparent;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.gesture.tapped{animation:none}}

/* The visiting step: a little lit theatre in the household ledger. */
.guest-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.guest-clock{border:1px solid var(--hair-lit);border-radius:20px;padding:4px 9px;color:var(--ink-2);font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.visitor-card.guest-present{background:radial-gradient(ellipse at 95% 30%,color-mix(in srgb,var(--amber) 10%,transparent),transparent 55%),var(--night-2);position:relative}
.guest-portrait{position:relative;isolation:isolate;width:114px;height:124px;margin:0 -4px 8px 12px}
.guest-portrait::before{content:"";position:absolute;z-index:-1;inset:0 8px 3px;border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);border-bottom:3px solid var(--wood-lip);border-radius:55px 55px 3px 3px;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--amber) 14%,transparent),transparent 72%);box-shadow:inset 0 0 20px #0002}
.guest-portrait::after{content:"";position:absolute;z-index:-1;bottom:4px;width:65px;height:9px;border-radius:50%;background:#0005;filter:blur(3px);animation:guest-shadow 5s ease-in-out infinite}
.guest-portrait .sprite{animation:guest-breathe 5s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 3px 4px #0004)}
.guest-portrait .sl-part[data-part="wing"]{animation:guest-wing 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.guest-dialogue{min-height:4.8em;line-height:1.7}
.guest-receipt{clear:both;padding:14px 14px 12px;border:1px dashed color-mix(in srgb,var(--mint) 32%,transparent);border-radius:8px;background:color-mix(in srgb,var(--mint) 4%,transparent);display:grid;gap:8px;animation:receipt-in .4s ease-out}
.guest-receipt b{font:500 22px var(--hand);color:var(--ink)}
.guest-receipt .btn{justify-self:start}
@keyframes guest-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}45%{transform:translateY(-3px) rotate(1deg)}55%{transform:translateY(-3px) rotate(0deg)}}
@keyframes guest-shadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.85);opacity:.55}}
@keyframes guest-wing{0%,38%,58%,100%{scale:1}43%,53%{scale:.86 1}48%{scale:1.04 1}}
@keyframes receipt-in{from{opacity:0;transform:translateY(7px) rotate(-1deg)}to{opacity:1;transform:none}}
/* Care now has its own material response: crumbs fall into the mouth, soap
   bubbles drift and pop, affection opens out into a small fan of hearts. */
.care-motes-food i{animation-name:care-crumb;animation-duration:.72s}
.care-motes-clean i{animation-name:care-bubble;animation-duration:1s;box-shadow:inset 2px 2px 0 #fff5}
.care-motes-fuss i{animation-name:care-heart;animation-duration:1s}
@keyframes care-crumb{0%{opacity:0;transform:translate(var(--mote-x),-48px) rotate(0deg) scale(var(--mote-size))}20%{opacity:1}80%{opacity:1;transform:translate(0,8px) rotate(110deg) scale(.75)}100%{opacity:0;transform:translate(0,12px) scale(0)}}
@keyframes care-bubble{0%{opacity:0;transform:translate(0,12px) scale(.1)}20%{opacity:.8}78%{opacity:.6;transform:translate(var(--mote-x),var(--mote-rise)) scale(var(--mote-size))}90%,100%{opacity:0;transform:translate(var(--mote-x),var(--mote-rise)) scale(1.5)}}
@keyframes care-heart{0%{opacity:0;transform:translate(0,8px) scale(.1)}22%{opacity:1;transform:translate(calc(var(--mote-x) * .4),-18px) scale(1.2)}50%{opacity:.9}100%{opacity:0;transform:translate(var(--mote-x),var(--mote-rise)) rotate(-12deg) scale(.6)}}
@media(prefers-reduced-motion:reduce){.guest-portrait .sprite,.guest-portrait .sl-part[data-part="wing"],.guest-portrait::after,.guest-receipt{animation:none}.care-motes{display:none}}

/* Keep motion on what the player can actually see. Light mode saves paint work,
   while blinks, purposeful gestures and the game's movement remain expressive. */
.app-hidden *, .app-hidden *::before, .app-hidden *::after,
[inert] .sprite, [inert] .sprite *, [inert] .guest-portrait::after,
.sl-offscreen, .sl-offscreen *{animation-play-state:paused!important}
.sl2 .sprite-act{will-change:auto}
body[data-effects="light"] .sprite-figure,
body[data-effects="light"] .prop svg,
body[data-effects="light"] .guest-portrait .sprite{filter:none!important}
body[data-effects="light"] :is(.veil,.tray,.bottom-nav){backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-effects="light"] .sl2:not(.sl-controlled):not(.sl-travel):not(.sl-sauntering):not(.sl-sneaking):not(.sl-flapping) :is(.sl-part[data-part="arm"],.sl-part[data-part="ear"],.sl-part[data-part="horn"],.sl-part[data-part="crest"],.cr-joint){animation:none}

.effects-setting{grid-column:1/-1;padding:14px;border:1px solid var(--hair-lit);border-radius:12px;display:grid;gap:8px;font-size:13px}
.effects-setting select{min-height:44px;background:var(--night-3);color:var(--ink);border:1px solid var(--hair-lit);border-radius:8px;padding:8px;font-size:16px}
.effects-setting small{color:var(--ink-2);line-height:1.5}
.gen-details{width:100%;margin-top:14px;border-top:1px solid var(--hair-lit);padding-top:12px}
.gen-details summary{cursor:pointer;min-height:44px;color:var(--mint);font-size:13px;line-height:44px}
.gen-tuning{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gen-tuning label{font-size:12px;color:var(--ink-2)}.gen-tuning output{float:right;font-variant-numeric:tabular-nums;color:var(--mint)}
.gen-tuning input{display:block;width:100%;min-height:40px;accent-color:var(--mint)}
.gen-colours{display:flex;gap:16px;margin-top:14px}.gen-colours label{font-size:12px;display:grid;gap:6px;flex:1}.gen-colours input{min-height:44px;width:100%;padding:3px;border:1px solid var(--hair-lit);border-radius:8px;background:var(--night-3)}

@keyframes sl2-land{0%{transform:scale(1,1)}35%{transform:scale(1.12,.87)}70%{transform:scale(.98,1.04)}100%{transform:scale(1,1)}}
.sl2.sl-landing .cr-joint[data-joint="knee"]{animation:knee-tuck .24s ease-out 1}
.sl2.sl-airborne .sl-part[data-part="tail"]{rotate:calc(-26deg * var(--sl-mirror,1));transition:rotate .14s}
/* Purposeful gestures: reaching with both arms, a small bow on a successful
   testimony, and a settling tail after a landing. No extra perpetual loops. */
.sl2.sl-reaching .cr-joint[data-joint="elbow"]{animation:handshake-reach .62s ease-out 1}
.sl2.sl-waving .sl-part[data-part="arm"]{animation:handshake-wave .48s ease-out 1}
@keyframes handshake-reach{0%,100%{rotate:calc(10deg * var(--sl-pose,1))}45%{rotate:calc(65deg * var(--sl-pose,1))}}
@keyframes handshake-wave{0%,100%{rotate:0deg}35%{rotate:calc(-35deg * var(--sl-mirror,1))}65%{rotate:calc(18deg * var(--sl-mirror,1))}}
@media(prefers-reduced-motion:reduce){.sl2.sl-reaching .cr-joint,.sl2.sl-waving .sl-part,.sl2.sl-landing .cr-joint{animation:none!important}}

/* Keep the live creature in view while tuning its face farther down the sheet. */
#genPanel:has(.gen-details[open]) .gen-stage{position:sticky;top:0;z-index:4;background:var(--night-3);box-shadow:0 8px 18px #0003}
@media(max-height:700px){#genPanel:has(.gen-details[open]) .gen-stage{min-height:125px;height:125px}#genPanel:has(.gen-details[open]) .gen-mount .sprite{--pet-h:110px}}

/* The playroom: a readable catalogue, with the residents still at its centre. */
.playroom-launch{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 30%,transparent);background:color-mix(in srgb,var(--mint) 8%,var(--night-2));white-space:nowrap}
.playroom-launch span{margin-left:2px}.sheet-playroom{max-width:840px}.sheet-playroom .sheet-head h2{font-size:34px;margin-top:7px}.sheet-playroom .sheet-head .eyebrow{color:var(--mint);font-size:9px}
.playroom-intro{font:22px/1.45 var(--hand);color:var(--ink-2);margin:-4px 0 18px}.playroom-company{display:flex;align-items:center;gap:16px;padding:10px 16px;margin-bottom:20px;border:1px solid var(--hair-lit);border-radius:14px;background:var(--night-2)}
#playroomPortrait{width:76px;height:82px;display:flex;align-items:center;justify-content:center;flex:none}#playroomPortrait .sprite{width:76px;--pet-h:76px}.playroom-company label{min-width:0;flex:1;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mint)}.playroom-company select{display:block;width:100%;margin-top:7px;padding:9px 10px;background:var(--field);color:var(--ink);border:1px solid var(--hair-lit);border-radius:8px;font:14px var(--body);min-height:44px}.playroom-company p{font-size:12px;color:var(--ink-2);line-height:1.6;max-width:205px}.playroom-empty{padding:18px;border:1px solid var(--hair-lit);border-radius:12px;margin-bottom:20px}.playroom-empty .btn{margin-top:12px}
.activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.activity-card{--activity:var(--mint);display:flex;flex-direction:column;align-items:start;text-align:left;position:relative;min-width:0;padding:20px;border:1px solid var(--hair-lit);border-top:2px solid var(--activity);border-radius:14px;color:var(--ink);background:linear-gradient(145deg,color-mix(in srgb,var(--activity) 6%,var(--night-3)),var(--night-2));transition:background .15s,border-color .15s,translate .15s}
.activity-card:hover:not(:disabled){border-color:var(--activity);translate:0 -2px;background:color-mix(in srgb,var(--activity) 9%,var(--night-2))}.activity-card:disabled{opacity:.48;cursor:default}.activity-card strong{font:25px/1.2 var(--display);margin:12px 0 8px}.activity-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}.activity-top>span:last-child{font-size:10px;color:var(--activity);text-align:right;letter-spacing:.035em}.activity-icon{width:44px;height:44px;background:color-mix(in srgb,var(--activity) 10%,transparent);border-radius:10px;display:grid;place-items:center}.activity-icon svg{width:32px;height:32px;color:var(--activity)}.activity-line{font:18px/1.35 var(--hand);color:var(--activity);margin-bottom:9px}.activity-detail{font-size:12px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}.activity-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;font-size:10px;color:var(--ink-2)}.activity-bottom b{font-size:21px;font-weight:400;color:var(--activity)}.activity-outing{--activity:var(--mint)}
.studio-remix-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}.studio-remix-tools p{flex-basis:100%;margin:0}.studio-remix-tools .chip[aria-pressed=true]{border-color:var(--mint);color:var(--mint);background:color-mix(in srgb,var(--mint) 10%,transparent)}

/* A single page scroll on desktop. The case files no longer trap the wheel. */
@media(min-width:1041px){.pane-plots{position:static;max-height:none;overflow:visible;padding-right:0;overscroll-behavior:auto}}
.tray{max-height:calc(100dvh - var(--topbar-h) - var(--sat) - 24px);overflow-y:auto}
@media(max-width:720px){.playroom-launch{min-height:36px;padding:7px 9px;font-size:11px}.sheet-playroom .sheet-head h2{font-size:28px}.playroom-company{gap:10px;padding:8px 10px}.playroom-company p{display:none}#playroomPortrait{width:58px;height:68px}#playroomPortrait .sprite{width:58px;--pet-h:58px}.playroom-intro{font-size:21px}.activity-grid{gap:10px}.activity-card{padding:13px}.activity-card strong{font-size:20px}.activity-top{align-items:start}.activity-top>span:last-child{font-size:9px;max-width:70px}.activity-icon{width:34px;height:34px}.activity-icon svg{width:27px;height:27px}.activity-detail{font-size:11px}.activity-line{font-size:17px}.activity-bottom{font-size:9px}.tray{max-height:82dvh}}
@media(max-width:370px){.activity-grid{grid-template-columns:1fr}.activity-detail{font-size:12px}.playroom-launch span{display:none}}
@media(prefers-reduced-motion:reduce){.activity-card{transition:none}.activity-card:hover:not(:disabled){translate:none}}
[hidden].playroom-company,[hidden].playroom-empty{display:none}

@media(max-width:540px){.topbar #quickHelp{display:none}.status .day{display:none}.status{overflow:hidden}.topbar-actions{gap:5px}}

/* A completed evening has a visible history, without another reward currency. */
.playroom-passport{margin:0 0 20px;padding:16px;border:1px solid var(--hair-lit);border-radius:12px;background:linear-gradient(130deg,#c9a5650b,transparent 65%),var(--night-2)}
.passport-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.passport-heading strong{display:block;font:20px/1.3 var(--display);margin-top:4px}
.passport-seal{flex-shrink:0;display:grid;place-content:center;width:52px;height:52px;border:2px double var(--amber);border-radius:50%;text-align:center;color:var(--amber);font-size:9px;letter-spacing:.12em;transform:rotate(-9deg)}
.passport-stamps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:14px 0}
.passport-stamps>span{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--ink-2);font-size:10px;line-height:1.4;padding:7px 3px;border:1px dashed var(--hair-lit);border-radius:5px}
.passport-stamps>span>b{font-size:17px;line-height:1}.passport-stamps .earned{color:var(--mint);background:color-mix(in srgb,var(--mint) 6%,transparent);border-style:solid;border-color:color-mix(in srgb,var(--mint) 35%,transparent)}
.passport-next{display:flex;align-items:center;justify-content:space-between;gap:16px}.passport-next p{font-size:12px;color:var(--ink-2);margin:0;line-height:1.5}.passport-next .btn{flex-shrink:0}

@media(max-width:540px){.playroom-passport{padding:12px}.passport-heading strong{font-size:17px}.passport-stamps{grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0}.passport-stamps>span{flex-direction:row;justify-content:center;font-size:10px;padding:7px 2px}.passport-stamps>span>b{font-size:12px}.passport-next{gap:8px;align-items:stretch;flex-direction:column}.passport-next .btn{width:100%}.passport-seal{width:44px;height:44px;font-size:8px}}

/* A material preview beside the choices; uses the same paint and plank layers
   as the shelf, with the player's own residents rather than stock mascots. */
.decor-preview { margin: 0 0 18px; padding: 12px; background: var(--night-2); border: 1px solid var(--hair); border-radius: 8px; }
.decor-preview-wall { background: var(--cabinet-surface); background-size: var(--wall-pattern-size), auto, auto; border: 7px solid var(--wood); border-top: 10px solid var(--wood-lip); border-bottom: 0; padding-top: 8px; box-shadow: inset 0 3px 9px #0005; }
.decor-preview-residents { display: flex; align-items: end; justify-content: space-evenly; height: 78px; overflow: hidden; }
.decor-preview-residents .sprite { width: 74px; --pet-h: 74px; flex: 0 0 74px; }
.decor-preview-residents .sprite * { animation: none !important; }
.decor-preview-empty { color: var(--ink-2); font: 16px var(--hand); align-self: center; }
.decor-preview-plank { height: 15px; }
.decor-preview figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.decor-preview figcaption span:first-child { border-bottom: 2px solid var(--pink); color: var(--ink); }
#decorSaveStatus[data-failed] { color: var(--warn); }
#decorVeil .opt { min-height: 44px; }