/* Monster · the blind box (box3d.js). Only active when WebGL started (body.box3d). */
body.box3d .plinth { background:none !important; border-radius:28px !important; overflow:hidden; box-shadow:0 18px 40px #1c142433; }
body.box3d .plinth::before, body.box3d .plinth::after, body.box3d .rays, body.box3d .bubbles { display:none !important; }
body.box3d .plinth #big { position:absolute; inset:0; opacity:0; pointer-events:none; }
body.box3d #box3d { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; cursor:pointer; touch-action:manipulation; }
body.box3d .stamp { z-index:3; }
body.box3d .pokeHint { z-index:3; }

/* ── intro: the key art IS the screen (house style) ── */
@font-face { font-family:'Fredoka'; font-weight:500 700; font-display:swap; src:url('../../vendor/fonts/fredoka-latin.woff2') format('woff2'); }
:root { --t-cream:#f7efe2; --t-ink:#2a2230; --t-round:"Fredoka",ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",system-ui,sans-serif; }
.intro { background:#f6e7dc !important; align-content:start !important; padding-top:0 !important; }
.intro .coverPic { display:block; margin:0 -20px; }
.intro .cover { display:block; width:100%; max-height:64dvh; object-fit:cover; object-position:top; -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
.intro:has(#friendFig:not([hidden])) .coverPic { display:none; }
.intro #kicker, .intro #title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.intro .parade { display:none !important; }
.intro .sub { background:var(--t-cream); color:var(--t-ink); border:3px solid var(--t-ink); border-radius:18px; padding:12px 14px; margin:-6px 0 4px; box-shadow:0 6px 0 #2a223033,0 14px 30px #5a2a1a22; font:700 18px/1.25 var(--t-round); }
.intro .startBtn { justify-self:stretch; font:700 20px var(--t-round) !important; border:3px solid var(--t-ink) !important; border-radius:18px !important; background:linear-gradient(#ff8fb4,#e2527f) !important; color:#fff !important; box-shadow:0 6px 0 var(--t-ink) !important; padding:16px 22px !important; }
.intro .startBtn:active { transform:translateY(5px); box-shadow:0 1px 0 var(--t-ink) !important; }
.intro .privacy { color:#6b5a55; }
@media (min-width:900px) and (min-aspect-ratio:5/4) {
  .intro { grid-template-columns:minmax(0,1.5fr) minmax(320px,440px); column-gap:48px; align-content:center !important; padding:40px 5vw !important; }
  .intro .coverPic { grid-column:1; grid-row:1 / span 6; margin:0; align-self:center; }
  .intro .cover { height:auto; max-height:calc(100dvh - 80px); aspect-ratio:3/2; border:4px solid var(--t-ink); border-radius:32px; box-shadow:0 10px 0 var(--t-ink),0 30px 60px #5a3a2e55; transform:rotate(-1deg); -webkit-mask-image:none; mask-image:none; object-position:center; }
  .intro .sub, .intro .startBtn, .intro .privacy, .intro .friendFig { grid-column:2; }
}

/* ── one result = one screen + the friends' shelf ── */
#actions .primary { font:700 19px var(--t-round) !important; min-height:60px; }
.shelf { margin:14px 0 0; padding:12px 12px 10px; border:3px solid var(--t-ink); border-radius:20px; background:linear-gradient(#fff6ec,#f6e7dc); box-shadow:0 5px 0 var(--t-ink); }
.shelfHead { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px; }
.shelfHead b { font:700 16px var(--t-round); color:var(--t-ink); letter-spacing:.04em; }
.shelfHead small { font:700 12px var(--t-round); color:#8a6a5e; }
.shelfRow { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; border-bottom:6px solid #c98b52; scrollbar-width:none; }
.shelfRow::-webkit-scrollbar { display:none; }
.shelfToy { flex:0 0 74px; margin:0; display:grid; justify-items:center; gap:2px; }
.shelfToy canvas { width:70px; height:70px; display:block; }
.shelfToy figcaption { font:700 10px var(--t-round); letter-spacing:.06em; color:#6b5a55; }
.shelfToy.me figcaption { color:#e2527f; }
.shelfToy.empty { height:70px; border:3px dashed #c9b3a6; border-radius:16px; place-items:center; font:700 26px var(--t-round); color:#c9b3a6; cursor:pointer; align-self:start; }
.shelfNote { margin:8px 0 0; font:600 13px/1.3 var(--t-round); color:#5a4a45; }
#reveal .ml-notes { background:#fff; border:2px solid #2a223022; }