/* An audience-owned boundary: independent of slide media and navigation. */
/* The QR occupies its own grid track. Hidden = no track, with no slide/media remount. */
.talk-deck { grid-template-columns: minmax(0, 1fr) auto; }
.talk-deck > .talk-stage { grid-area: 1 / 1; min-width: 0; }
.talk-deck:has(.reaction-qr:not([hidden])) .talk-slide { padding-right: calc(var(--slide-padding-inline) / 2); }
.reaction-overlay { --reaction-size: 112px; --reaction-inset: 16px; display: contents; pointer-events: none; }
/* Anchor to the real QR height without creating a stacking context: puppets still blend with the slide. */
.reaction-overlay:has(> .reaction-qr:not([hidden])) { display: block; position: relative; grid-area: 1 / 2; align-self: end; width: 164px; margin: 20px; }
.reaction-overlay:has(> .reaction-qr:not([hidden])) > .reaction-corner { position: absolute; right: calc((100% - var(--reaction-size)) / 2); bottom: calc(100% + 12px); }
.reaction-overlay:has(> .reaction-qr:not([hidden])) > .reaction-count { position: absolute; left: calc((100% - var(--reaction-size)) / 2); bottom: calc(100% + var(--reaction-size)); }
.reaction-corner { position: fixed; z-index: 40; right: var(--reaction-inset); bottom: var(--reaction-inset); width: var(--reaction-size); aspect-ratio: 1; mix-blend-mode: multiply; pointer-events: none; }
.reaction-corner .reaction-film { background: transparent; }
.reaction-count { position: fixed; z-index: 41; left: calc(100% - var(--reaction-inset) - var(--reaction-size)); bottom: calc(var(--reaction-inset) + var(--reaction-size) - 12px); pointer-events: none; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.reaction-count__pill { display: flex; align-items: center; justify-content: center; min-width: 38px; padding: 6px 10px; border-radius: 999px; background: #e98028; color: #3c210f; text-align: center; box-shadow: inset 0 -2px 0 #a6451426; animation: reaction-count-pop 280ms ease-out both; }
/* Inter centers its plus below the numerals; lift the glyph, not the whole pill. */
.reaction-count__plus { transform: translateY(-.1em); }
.reaction-corner .reaction-film img, .reaction-corner .reaction-film video { mix-blend-mode: normal; }
.reaction-film { width: 100%; height: 100%; background: var(--paper, #eeece4); animation: reaction-arrive 220ms ease-out both; }
.reaction-film img, .reaction-film video { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; clip-path: inset(2px); }
.reaction-qr { position: relative; z-index: 41; width: 164px; padding: 12px; background: var(--paper, #eeece4); color: #292923; border: 1px solid #bcb8ac; border-radius: 12px; box-shadow: 0 4px 20px #29292312; pointer-events: auto; text-align: center; overflow-wrap: anywhere; }
.reaction-qr[hidden], .reaction-qr [hidden] { display: none; }
.reaction-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.reaction-qr .reaction-eyebrow { margin-bottom: 8px; font-size: 12px; letter-spacing: -.02em; line-height: 1.25; text-transform: none; }
.reaction-qr__code { position: relative; display: block; width: 132px; margin: auto; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: white; color: inherit; cursor: pointer; }
.reaction-qr__code img { display: block; width: 100%; height: auto; }
.reaction-qr__paused { position: absolute; inset: 0; display: grid; place-items: center; background: #eeece4e8; pointer-events: none; }
.reaction-page { margin: 0; min-width: 280px; background: var(--paper, #eeece4); color: #292923; font-family: 'Inter', system-ui, sans-serif; }
.reaction-phone { min-height: 100svh; display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.reaction-phone__main { width: min(100%, 460px); text-align: center; }
/* Reserve space around the copy as a pair, not between title and takeaway, so controls stay steady. */
.reaction-phone__heading { display: flex; flex-direction: column; justify-content: center; min-height: calc(3.3em + 8px + 63px); font-size: clamp(28px, 7vw, 36px); }
.reaction-phone h1 { margin: 0 0 8px; font-size: inherit; line-height: 1.1; letter-spacing: -.045em; font-weight: 600; overflow-wrap: anywhere; }
.reaction-phone__takeaway { max-width: 320px; margin: 0 auto; font-size: 14px; line-height: 1.5; color: #69665c; overflow-wrap: anywhere; }
.reaction-phone__stage { width: 144px; aspect-ratio: 1; margin: 8px auto; }
.reaction-phone__stage > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.reaction-phone__prompt { margin: 16px 0 8px; font-size: 13px; line-height: 1.4; font-weight: 550; color: #69665c; }
.reaction-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reaction-buttons button { min-height: 78px; border: 1px solid #c4c0b3; border-radius: 19px; background: #f7f5ee; color: inherit; touch-action: manipulation; cursor: pointer; transition: transform 140ms, background 140ms; }
.reaction-buttons button:hover:enabled { background: #fffdf6; transform: translateY(-3px); }
.reaction-buttons button:active:enabled { transform: scale(.94); }
.reaction-buttons button:disabled { opacity: .48; cursor: default; }
.reaction-buttons span { display: block; margin-bottom: 6px; font-size: 27px; line-height: 1; }
.reaction-buttons strong { display: block; font-size: 12px; font-weight: 550; }
.reaction-buttons button:focus-visible, .reaction-qr button:focus-visible { outline: 3px solid #66634b; outline-offset: 4px; }
.reaction-feedback { margin: 14px 0 0; font-size: 13px; color: #934628; }
.reaction-feedback:empty { margin: 0; }
@keyframes reaction-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reaction-count-pop {
  0% { opacity: .65; transform: translateY(3px) scale(.86); }
  45% { opacity: 1; transform: translateY(-1px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-height: 700px) {
  .reaction-overlay { --reaction-size: 96px; }
  .reaction-phone { padding-top: 20px; padding-bottom: 20px; }
  .reaction-phone__stage { width: 120px; }
}
@media (max-height: 600px) {
  .reaction-phone__heading { font-size: 26px; }
  .reaction-phone__stage { width: 96px; margin: 4px auto; }
  .reaction-phone .reaction-buttons { gap: 8px; }
  .reaction-phone .reaction-buttons button { min-height: 70px; }
}
@media (max-width: 720px) {
  .talk-deck { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .reaction-overlay:has(> .reaction-qr:not([hidden])) { grid-area: 2 / 1; justify-self: end; margin-top: calc(var(--reaction-size) + 48px); }
  /* This scene normally uses viewport height; fit it to the shorter slide above the reaction row. */
  .talk-deck:has(.reaction-qr:not([hidden])) .slide-grid--familiar { height: 100%; }
  .talk-deck:has(.reaction-qr:not([hidden])) .slide-grid--familiar .clay-scene { max-height: 100%; }
}
@media (max-width: 500px) { .reaction-overlay { --reaction-size: 88px; --reaction-inset: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .reaction-film, .reaction-count__pill { animation: none; }
  .reaction-buttons button { transition: none; }
  .reaction-buttons button:hover:enabled { transform: none; }
}