/* Cold open, partner bubble, hand gestures and nudges. */
/* cold open: letterbox, the camera zooms into the hut, captions type themselves */
#cold { position: fixed; inset: 0; z-index: 15; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px calc(11vh + 28px); background: linear-gradient(to bottom, rgba(3,5,10,0) 35%, rgba(3,5,10,.8) 100%); transition: opacity .4s; }
#cold.out { opacity: 0; }
#cold::before, #cold::after { content: ""; position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform .5s cubic-bezier(.3,.7,.2,1); }
#cold::before { top: 0; }
#cold::after { bottom: 0; }
#cold.pre::before { transform: translateY(-100%); }
#cold.pre::after { transform: translateY(100%); }
.cold-lines { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; display: grid; gap: 4px; }
.cold-line { font-family: var(--f-type); font-size: 23px; line-height: 1.3; color: #f3ecdc; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.cold-line:first-child { font-size: 36px; letter-spacing: .05em; color: var(--ember); }
.cold-line .caret { display: inline-block; width: .45em; height: .95em; margin-left: 3px; vertical-align: -.1em; background: currentColor; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cold-skip { position: absolute; z-index: 2; right: max(16px, env(safe-area-inset-right, 0px)); top: calc(11vh - 30px); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(243,236,220,.7); pointer-events: none; }

/* partner: one short speech bubble at a time, anchored to the bottom, never in the way */
:root { --pa-bg: #1b2539; --pa-ring: var(--file); }
#partner { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: var(--pb, 80px); z-index: 23; max-width: 460px; margin: 0 auto; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; transition: bottom .25s ease, opacity .2s, transform .2s; }
#partner.hide { opacity: 0; transform: translateY(10px); }
.pa-face { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--pa-bg); border: 2.5px solid var(--pa-ring); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.pa-face .pa-pic { width: 100%; height: 100%; object-fit: cover; vertical-align: top; }   /* portraits: docs/design/partner/ (Codex), cropped to 160 px */
.pa-bub { position: relative; min-width: 0; margin: 0 0 10px 6px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--file); color: var(--file-ink); font-family: var(--f-type); font-size: 15px; line-height: 1.35; box-shadow: 0 10px 26px rgba(0,0,0,.5); cursor: pointer; pointer-events: auto; animation: paIn .25s ease-out; }
.pa-bub::before { content: ""; position: absolute; left: -8px; bottom: 0; width: 14px; height: 14px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pa-act { display: block; margin-top: 8px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--file-ink); color: var(--file); font: 700 14px var(--f-body); }
.pa-cozy { display: none; }
@keyframes paIn { from { transform: translateY(8px) scale(.97); opacity: 0; } }

/* gestures and nudges */
.hand { position: fixed; z-index: 18; left: 0; top: 0; width: 44px; height: 52px; margin: -2px 0 0 -17px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.hand svg { display: block; width: 100%; height: 100%; }
.tap-ring { position: fixed; z-index: 17; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 3px solid var(--file); pointer-events: none; opacity: 0; }
.drag-ghost .hand { position: absolute; left: 50%; top: 46%; }
.item-ghost .hand { position: absolute; left: 50%; top: 55%; }
.zone-pulse { position: absolute; border-radius: calc(16px * var(--inv)); border: calc(5px * var(--inv)) solid var(--ember); background: rgba(240,138,60,.12); box-shadow: 0 0 calc(36px * var(--inv)) rgba(240,138,60,.95), inset 0 0 calc(50px * var(--inv)) rgba(240,138,60,.5); pointer-events: none; animation: pulse 1.6s ease-in-out infinite; }
.fly-card { position: fixed; z-index: 18; left: 0; top: 0; max-width: 240px; padding: 8px 12px; border-radius: 4px; border-left: 4px solid var(--ember); background: var(--file); color: var(--file-ink); font-family: var(--f-display); font-weight: 800; font-size: 17px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 24px rgba(0,0,0,.5); pointer-events: none; }
@keyframes bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) scale(1.07); } 55% { transform: translateY(1px) scale(.97); } 75% { transform: translateY(-3px); } }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--file), 0 0 22px 6px rgba(240,138,60,.75); } }
.bounce { animation: bounce .6s ease-out; }
.glow { animation: glow 1.4s ease-in-out infinite; }
.flash { animation: glow .9s ease-in-out 3; }
#accuseBtn[aria-disabled="true"] { opacity: .42; filter: saturate(.4); }
.clue-pick.pair { box-shadow: 0 0 0 3px var(--ember), 0 0 16px rgba(240,138,60,.5); }

.small a { color: inherit; }