/* The desk ornament is a scene object; its 44px button is the input surface. */
.reaction-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-text); padding: var(--space-text) var(--space-control); border: 1px solid rgba(226,133,128,.35); border-radius: 999px; color: #F0B0A6; background: #34252D; font: 500 12px/1.4 var(--ui); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent }
.reaction-button[hidden], .reaction-settings[hidden] { display: none }
.reaction-button:focus { outline: none }
.reaction-button:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px }
.reaction-icon { color: #F07175; font: 24px/1 var(--ui) }
.reaction-button[data-pressed=true] { background: #64313C; color: var(--paper) }
.reaction-home { position: absolute; z-index: 6; left: 16%; top: 76%; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-text); min-width: 88px; min-height: 72px; background: transparent; border: 0; transform: translate(-50%, -50%) }
.gl-on .reaction-home { left: 0; top: 0; min-height: 76px; justify-content: flex-end; padding-bottom: 0 }
.gl-on .reaction-home .reaction-icon { visibility: hidden }
.gl-on .reaction-home[data-pressed=true] { background: transparent }
.reaction-effects { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; contain: layout paint }
.reaction-particle { position: absolute; left: 50%; top: 78%; color: #F58B93; font: 26px/1 sans-serif; pointer-events: none; text-shadow: 0 2px 8px rgba(119,36,54,.2) }
.reaction-particle[hidden] { display: none }
.reaction-home-effects .reaction-particle { left: 16%; top: 76% }
.player-art .reaction-effects { z-index: 2 }
.player-art .reaction-particle { top: 72% }
.player-transport { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--space-group) }
.player-transport > .reaction-effects { inset: auto 0 50%; height: 180px; overflow: visible; contain: layout }
.player-transport > .reaction-effects .reaction-particle { top: 100%; left: calc(50% + 44px) }
.player-transport .reaction-button { padding: 0 }
.player-transport .reaction-icon { display: block; width: 32px; height: 32px; fill: currentColor }
.reaction-settings { max-width: 350px; margin: var(--space-control) auto 0; text-align: left; color: var(--mist); font: 12px/1.6 var(--ui) }
.reaction-settings summary { width: fit-content; min-height: 44px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 4px }
.reaction-settings label { display: flex; align-items: center; gap: var(--space-control); min-height: 44px }
.reaction-settings input { width: 18px; height: 18px; accent-color: #F07175 }
@media (hover: hover) and (pointer: fine) { .reaction-button:hover { color: var(--paper); border-color: #F0B0A6 } }
@media (max-width: 899px) { .player-transport > .reaction-effects .reaction-particle { left: calc(50% + 40px) } }
@media (prefers-reduced-motion: reduce) { .reaction-button { transition: none } }