/* The Pantry — playroom scene */
:root {
  --ink: #2B241C; --cream: #FDF8EE; --accent: #E0531F; --mint: #9BE8C4;
}
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden { display: none; }
[hidden] { display: none !important; }

/* full-bleed: the .playroom-main block (see base.html main_class block) already
   drops the Bootstrap .container/gutters/margins, so #playroom-page just needs
   to be a block that fills the remaining viewport under the sticky navbar. */
.playroom-main { margin: 0; padding: 0; width: 100%; }

#playroom-page { --nav-h: 64px; background: #EFE3CE; font-family: Georgia, 'Times New Roman', serif; display: block; }
.scene-wrap { height: calc(100vh - var(--nav-h)); overflow-x: auto; overflow-y: hidden; }
#pantry-scene { height: calc(100vh - var(--nav-h)); min-width: 1100px; width: 100%; display: block; touch-action: pan-x; }

/* jars */
[data-object="jar"] { cursor: pointer; }
[data-object="jar"] .jar-art { transition: transform 0.2s ease; transform-box: fill-box; transform-origin: 50% 90%; }
[data-object="jar"]:hover .jar-art, [data-object="jar"]:focus .jar-art { transform: rotate(-4deg) translateY(-6px); }
.jar-tag { font-size: 13px; fill: #6E543A; font-family: 'Courier New', monospace; }
.jar-label { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.jar-label text { font-size: 15px; font-family: Georgia, serif; }
[data-object="jar"]:hover .jar-label, [data-object="jar"]:focus .jar-label { opacity: 1; }

/* interactive props affordance */
[data-object]:not([data-object="jar"]) { cursor: pointer; }
[data-object="cat"]:hover, [data-object="radio"]:hover, [data-object="photo"]:hover,
[data-object="poll-machine"]:hover, [data-object="drawer"]:hover { filter: brightness(1.08); }

.machine-screen { font-size: 15px; fill: #1F352C; font-family: 'Courier New', monospace; font-weight: bold; }
.photo-text { font-size: 18px; fill: var(--ink); font-family: 'Courier New', monospace; }
.note { font-size: 26px; fill: var(--ink); }
.zzz { font-size: 22px; fill: #6E543A; font-family: Georgia, serif; }

/* cat ambience */
.cat-tail { transform-box: fill-box; transform-origin: left bottom; animation: tail 3.4s ease-in-out infinite; }
@keyframes tail { 0%,100% { transform: rotate(0deg);} 50% { transform: rotate(9deg);} }
[data-object="cat"].asleep .cat-eye { transform: scaleY(0.15); transform-box: fill-box; transform-origin: center; }

/* spotlight (dialogue action) */
#pantry-scene.dim [data-object="jar"] .jar-art { opacity: 0.25; }
#pantry-scene.dim [data-object="jar"].glow .jar-art { opacity: 1; filter: drop-shadow(0 0 14px var(--mint)); }

/* chrome */
#index-tag, #discovery-badge {
  position: fixed; z-index: 40; border: 2px solid var(--ink); background: var(--cream);
  color: var(--ink); font-family: Georgia, serif; font-size: 15px; padding: 6px 14px; border-radius: 4px 4px 12px 12px;
  box-shadow: 0 3px 0 rgba(43,36,28,0.3); cursor: pointer;
}
#index-tag { right: 16px; top: calc(var(--nav-h) + 10px); }
#discovery-badge { left: 16px; top: calc(var(--nav-h) + 10px); border-radius: 999px; }
#index-overlay, #overlay-host {
  position: fixed; inset: 0; z-index: 50; background: rgba(43,36,28,0.55);
  display: flex; align-items: center; justify-content: center;
}
.index-card { background: var(--cream); max-width: 560px; max-height: 82vh; overflow-y: auto; padding: 28px 32px; border-radius: 10px; position: relative; }
.index-card h2 { margin-top: 0; }
.index-card ul { list-style: none; padding: 0; }
.index-card li { margin: 10px 0; }
.index-card li span { color: #6E543A; font-size: 14px; display: block; }
.overlay-x, #overlay-close { position: absolute; top: 10px; right: 12px; font-size: 26px; background: none; border: none; cursor: pointer; color: var(--ink); }
#overlay-close { position: fixed; top: 18px; right: 22px; color: var(--cream); z-index: 51; }
#overlay-content { background: var(--cream); border-radius: 10px; padding: 24px; max-width: 90vw; max-height: 85vh; overflow: auto; }

/* dialogue panel */
#dialogue-panel {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 45;
  width: min(720px, 94vw); background: rgba(31,26,20,0.94); color: var(--cream);
  border: 2px solid var(--mint); border-radius: 10px; padding: 16px 20px;
  display: grid; grid-template-columns: 84px 1fr; gap: 4px 16px; font-size: 17px;
}
#dialogue-portrait { grid-row: span 2; width: 84px; height: 84px; background: #3B2F23; border-radius: 8px; }
#dialogue-portrait svg { width: 100%; height: 100%; }
#dialogue-options { margin: 6px 0 0; padding: 0; list-style: none; }
#dialogue-options button {
  display: block; width: 100%; text-align: left; background: none; border: none; color: var(--mint);
  font-family: Georgia, serif; font-size: 16px; padding: 5px 4px; cursor: pointer;
}
#dialogue-options button:hover, #dialogue-options button:focus { background: rgba(155,232,196,0.15); }

/* whisper + hint */
#whisper { position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%); z-index: 46; background: var(--cream); padding: 10px 14px; border-radius: 8px; border: 2px solid var(--ink); }
#hint-toast { position: fixed; top: calc(var(--nav-h) + 48px); left: 50%; transform: translateX(-50%); z-index: 46; background: var(--ink); color: var(--cream); padding: 8px 18px; border-radius: 999px; font-size: 15px; }

/* effects used by secrets.js */
.parade-cat { position: fixed; bottom: 4vh; z-index: 44; animation: parade 5s linear forwards; }
@keyframes parade { from { transform: translateX(-120px);} to { transform: translateX(110vw);} }
[data-object="jar"].tipped .jar-art { animation: tip-fall 0.9s ease-in forwards; }
@keyframes tip-fall { 30% { transform: rotate(14deg);} 100% { transform: rotate(86deg) translate(30px, 10px);} }
[data-object="jar"].restored .jar-art { animation: tip-restore 0.6s ease-out forwards; }
@keyframes tip-restore { from { transform: rotate(86deg) translate(30px,10px);} to { transform: none;} }
[data-object="drawer"] .drawer-slide { transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
[data-object="drawer"].open .drawer-slide { transform: translateY(46px); }
[data-object="drawer"] .drawer-contents { opacity: 0; transition: opacity 0.3s 0.25s; }
[data-object="drawer"].open .drawer-contents { opacity: 1; }
[data-object="photo"].flipped { animation: photo-flip 0.5s ease; }
@keyframes photo-flip { 50% { transform: scaleX(0.05); } }
body.disco #pantry-scene { animation: disco 1.2s linear infinite; }
@keyframes disco { 0% { filter: hue-rotate(0deg) saturate(1.6);} 100% { filter: hue-rotate(360deg) saturate(1.6);} }
.machine-lever { transform-box: fill-box; transform-origin: 1430px 430px; transition: transform 0.25s; }
.poll-pulled .machine-lever { transform: rotate(50deg); }
.cat-zzz .zzz { animation: floatup 2.4s ease-in-out infinite; }
.zzz-2 { animation-delay: 0.6s; } .zzz-3 { animation-delay: 1.2s; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(6px);} 40% { opacity: 1;} 100% { opacity: 0; transform: translateY(-14px);} }
.radio-notes .note { animation: floatup 1.8s ease-in-out infinite; }
.note-2 { animation-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .cat-tail, .zzz, .note, body.disco #pantry-scene, .parade-cat,
  [data-object="jar"].tipped .jar-art, [data-object="jar"].restored .jar-art, [data-object="photo"].flipped { animation: none !important; }
  [data-object="jar"] .jar-art, .drawer-slide, .machine-lever { transition: none !important; }
}
@media (max-width: 700px) {
  #dialogue-panel { grid-template-columns: 56px 1fr; font-size: 15px; }
  #dialogue-portrait { width: 56px; height: 56px; grid-row: span 2; }
}

/* poll overlay */
.poll-box { min-width: min(480px, 84vw); }
.poll-box h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: 1px; }
.poll-question { color: #6E543A; }
.poll-choice { display: block; width: 100%; margin: 8px 0; padding: 12px 14px; font-family: Georgia, serif; font-size: 16px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 8px; cursor: pointer; text-align: left; }
.poll-choice:hover { background: var(--mint); }
.poll-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; margin: 10px 0; }
.poll-bar-track { background: #E4D6BC; border-radius: 999px; height: 16px; }
.poll-bar { background: var(--accent); height: 16px; border-radius: 999px; transition: width 0.6s ease; }
.poll-pct { font-size: 14px; color: #6E543A; white-space: nowrap; }
.poll-total { color: #6E543A; font-size: 14px; }
.poll-error { color: #B5556B; font-size: 14px; }

/* shelf run */
.runner-wrap { text-align: center; }
.runner-canvas { max-width: 100%; border: 3px solid var(--ink); border-radius: 8px; background: #F4E9D8; touch-action: none; }
.runner-help { color: #6E543A; font-size: 14px; margin: 8px 0 0; }

/* cat CTA bubble */
#cat-cta { position: absolute; z-index: 30; background: var(--cream); border: 2px solid var(--ink);
  border-radius: 12px 12px 12px 2px; padding: 8px 14px; font-size: 15px; font-family: Georgia, serif;
  box-shadow: 0 3px 0 rgba(43,36,28,0.25); pointer-events: none; }
.scene-wrap { position: relative; }
[data-object="cat"].cta-bob { animation: cta-bob 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes cta-bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
@media (prefers-reduced-motion: reduce) { [data-object="cat"].cta-bob { animation: none !important; } }