/* RAGE BAIT CHEF · house style (briefs/HOUSE_STYLE_3D_TOY.md): the 3D toy kitchen + cream toy UI. */
@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-terra:#e2653f; --t-shadow:0 6px 0 #2a223033, 0 14px 30px #5a2a1a33;
  --t-round:"Fredoka",ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",system-ui,sans-serif; }
html, body { background:#f3dcc0 !important; color:var(--t-ink); }
#kitchen, .hero { display:none !important; }
#world { position:fixed; left:0; right:0; top:0; width:100%; height:36dvh; display:block; z-index:0; }
body.no3d #world { display:none; }
body::after { content:""; position:fixed; left:0; right:0; top:33dvh; bottom:0; z-index:0; pointer-events:none; background:linear-gradient(#e9c79f00,#e9c79f 5%,#e2b88c); }
#app { position:relative; z-index:1; }
.bar .brand, .bar .counter { color:#fff !important; text-shadow:0 2px 6px #5a2a1a99; }
.heat-icon { color:#fff; text-shadow:0 2px 6px #5a2a1a99; }
.eyebrow { font-family:var(--t-round) !important; font-weight:700 !important; }

/* intro: the cover is the screen */
#intro { background:none !important; }
#intro::before { content:""; position:fixed; inset:0; z-index:-1; background:#f7efe2; }
#intro .cover { display:block; width:calc(100% + 40px); margin:-8px -20px 0; max-height:62dvh; object-fit:cover; object-position:top; -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
#intro #kicker, #intro #title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#intro .intro-line, #intro .rule, #intro .friend-intro, #intro .privacy { background:var(--t-cream); color:var(--t-ink) !important; border:3px solid var(--t-ink); border-radius:18px; padding:12px 14px; margin:0 0 10px; box-shadow:var(--t-shadow); max-width:none !important; }
#intro .intro-line { font:700 21px/1.2 var(--t-round) !important; }
#intro .rule, #intro .privacy { font:600 14px/1.35 system-ui,sans-serif !important; }
#intro .privacy { font-size:11.5px !important; }

/* chunky pressable buttons */
.primary, .secondary, #start, .serve, .back, .next { font-family:var(--t-round) !important; font-weight:700 !important; border:3px solid var(--t-ink) !important; border-radius:18px !important; box-shadow:0 6px 0 var(--t-ink) !important; }
.primary, #start { background:linear-gradient(#ffd26b,#f2a93c) !important; color:var(--t-ink) !important; }
.secondary, .back { background:#fff !important; color:var(--t-ink) !important; }
.serve { background:linear-gradient(#ff8a5a,#e2653f) !important; color:#fff !important; }
.serve i { background:#ffd26b !important; }
.primary:active, .secondary:active, #start:active, .serve:active, .back:active { transform:translateY(5px) !important; box-shadow:0 1px 0 var(--t-ink) !important; }
.next:disabled { opacity:.55; }

/* play: kitchen on top, the post + stations below */
#play { background:none !important; padding-top:calc(env(safe-area-inset-top) + 30dvh) !important; }
.stage-line { position:absolute; top:calc(env(safe-area-inset-top) + 50px); left:20px; right:20px; }
.stage-line .eyebrow, .stage-line .heat { color:#fff !important; text-shadow:0 2px 6px #5a2a1acc; font-family:var(--t-round) !important; }
.post { border:3px solid var(--t-ink) !important; border-radius:20px !important; box-shadow:0 6px 0 var(--t-ink), 0 14px 30px #5a2a1a44 !important; transform:rotate(-1.5deg) !important; }
.post-story { font-family:var(--t-round) !important; font-weight:700 !important; }
.play h2 { color:var(--t-ink) !important; font-family:var(--t-round) !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.stage-hint { color:#5a3a2e !important; }
.ingredient { background:#fff !important; color:var(--t-ink) !important; border:3px solid var(--t-ink) !important; border-radius:16px !important; box-shadow:0 4px 0 var(--t-ink) !important; }
.ingredient:hover { transform:translateY(-1px) !important; }
.ingredient.selected { background:linear-gradient(#ffe39a,#ffc259) !important; color:var(--t-ink) !important; box-shadow:0 4px 0 var(--t-ink), 0 0 0 3px #fff inset !important; }
.ingredient-name { font-family:var(--t-round) !important; font-weight:700 !important; font-size:15px !important; }
.ingredient-symbol { color:var(--t-terra); }

/* result: cream receipt over the bowl of angry toys */
#result { background:none !important; padding-top:calc(env(safe-area-inset-top) + 30dvh) !important; }
#result .eyebrow { position:absolute; top:calc(env(safe-area-inset-top) + 50px); left:20px; color:#fff !important; text-shadow:0 2px 6px #5a2a1acc; }
#result h2 { color:var(--t-ink) !important; font-family:var(--t-round) !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.receipt { border:3px solid var(--t-ink) !important; box-shadow:0 6px 0 var(--t-ink) !important; }
.crowd p { background:#fff !important; color:var(--t-ink) !important; border:3px solid var(--t-ink) !important; border-radius:16px !important; box-shadow:0 4px 0 var(--t-ink) !important; font-family:var(--t-round) !important; font-weight:600 !important; }
.truth { background:#1f3b34 !important; border:3px solid var(--t-ink) !important; border-radius:18px !important; box-shadow:0 6px 0 var(--t-ink) !important; }
.insight { color:#8a2d18 !important; font-family:var(--t-round) !important; font-weight:700 !important; }
.riku-line { background:#1c2a3a !important; color:#ffe2b0 !important; border:3px solid var(--t-ink) !important; border-radius:18px !important; }
.app-door { background:#f2a541 !important; color:#1c1424 !important; border:3px solid var(--t-ink) !important; border-radius:18px !important; box-shadow:0 6px 0 var(--t-ink) !important; font-family:var(--t-round) !important; font-weight:700 !important; }
[tabindex="-1"]:focus { outline:none; }
#result { padding-top:calc(env(safe-area-inset-top) + 34dvh) !important; }

/* ── desktop stage: the kitchen fills the window, the game is a panel on the right ── */
@media (min-width:900px) and (min-aspect-ratio:5/4) {
  #world { height:100dvh; }
  body::after { display:none; }
  #app { width:520px !important; max-width:520px; margin:0 max(24px,4vw) 0 auto; }
  #intro::before { background:radial-gradient(ellipse at 30% 40%,#fff6e6,#f1dcc0 75%); }
  #intro .cover { position:fixed; left:max(24px,4vw); top:50%; transform:translateY(-50%) rotate(-1deg); width:calc(100vw - 520px - max(24px,4vw)*3); max-height:calc(100dvh - 80px);
    aspect-ratio:3/2; height:auto; margin:0; object-fit:cover; object-position:center; border:4px solid var(--t-ink); border-radius:32px; box-shadow:0 10px 0 var(--t-ink),0 30px 60px #5a3a2e55;
    -webkit-mask-image:none; mask-image:none; z-index:0; }
  #intro { padding-top:calc(env(safe-area-inset-top) + 110px) !important; }
  #intro .intro-line { font-size:26px !important; }
  #play, #result { padding-top:calc(env(safe-area-inset-top) + 110px) !important; }
  .post { background-color:var(--t-cream); }
}
#app[data-phase="intro"] .bar .brand, #app[data-phase="intro"] .bar .counter { color:var(--t-ink) !important; text-shadow:none; }
#intro .intro-line, #intro .rule, #intro .friend-intro, #intro .privacy { align-self:stretch; display:block; }
#app::before { display:none !important; }
.truth p { color:#f4fbf6 !important; } .truth span { color:#a4e8c2 !important; }
.app-door { padding:12px 18px !important; display:inline-flex !important; align-items:center; gap:8px; font-size:14px !important; }
#app-door { display:none !important; }
.ml-mute { position:fixed; right:14px; bottom:calc(env(safe-area-inset-bottom) + 14px); z-index:40; width:44px; height:44px; border-radius:50%; border:3px solid var(--t-ink); background:var(--t-cream); box-shadow:0 4px 0 var(--t-ink); font-size:18px; }

/* THE REVEAL: the kitchen takes the whole screen while the crowd turns to you */
body.chef-reveal #world { height:100dvh; }
body.chef-reveal::after { opacity:0; }
#result { transition:opacity .5s ease .1s; }
body.chef-reveal #result, body.chef-reveal .bar { opacity:0; pointer-events:none; }
#result .ml-notes { background:#fffaf2; border:3px solid var(--t-ink); }
#result .ml-notes > summary { color:var(--t-ink); font-family:var(--t-round); }
#result .actions .primary { font-size:19px !important; min-height:60px; }