#game-reactions { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:2; --reaction-scale:1; --reaction-control-height:max(46px,calc(50px * var(--reaction-scale))); color:#f4f8ff; }
#game-reactions [hidden], #game-reactions[hidden] { display:none!important; }
#game-reactions button { font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#game-reactions button:focus { outline:none; }
:root[data-input-mode="keyboard"] #game-reactions button:focus-visible { outline:2px solid white; outline-offset:3px; }
.reaction-controls { --reaction-emoji-size:calc(34px * var(--reaction-scale)); position:absolute; right:calc(6px * var(--reaction-scale)); bottom:calc(20px * var(--reaction-scale)); width:calc(74px * var(--reaction-scale)); height:var(--reaction-control-height); padding:0; border:1px solid #6263a1; border-radius:calc(11px * var(--reaction-scale)); background:linear-gradient(145deg,#102035,#030e1b); color:#00e3ef; pointer-events:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:center; }
.reaction-controls>button { display:grid; place-items:center; padding:0; width:100%; height:100%; min-width:24px; min-height:44px; color:inherit; background:transparent; border:0; border-radius:inherit; }
.reaction-change { display:flex; align-items:center; justify-content:center; align-self:center; width:100%; height:70%; box-sizing:border-box; border-left:1px solid #6263a1; }
.reaction-change svg { display:block; width:calc(17px * var(--reaction-scale)); height:calc(17px * var(--reaction-scale)); }
.reaction-controls>button:disabled { cursor:default; opacity:.55; }
.reaction-controls:has([aria-expanded="true"]) { box-shadow:0 0 12px #00cfee44; }
.reaction-emoji { display:block; width:1em; height:1em; font-size:var(--reaction-emoji-size,calc(36px * var(--reaction-scale))); background-image:url('/reactions-3d.webp'); background-size:300% 200%; background-repeat:no-repeat; pointer-events:none; }
/* Optical offsets center the visible artwork, not the transparent cell padding. */
.reaction-emoji[data-reaction-art="happy"] { background-position:calc(0% - .0078em) calc(0% - .0459em); }
.reaction-emoji[data-reaction-art="sad"] { background-position:calc(50% + .0068em) calc(0% - .0459em); }
.reaction-emoji[data-reaction-art="angry"] { background-position:calc(100% + .0283em) calc(0% - .0479em); }
.reaction-emoji[data-reaction-art="confused"] { background-position:calc(0% - .0215em) calc(100% + .0352em); }
.reaction-emoji[data-reaction-art="laugh"] { background-position:calc(50% - .0020em) calc(100% + .0332em); }
.reaction-emoji[data-reaction-art="like"] { background-position:calc(100% + .0205em) calc(100% + .0322em); }
.reaction-stream { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.reaction-own { position:absolute; left:calc(250px * var(--reaction-scale)); top:calc(8px * var(--reaction-scale)); width:calc(43px * var(--reaction-scale)); height:calc(29px * var(--reaction-scale)); pointer-events:none; }
.reaction-bubble { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.reaction-bubble path { fill:#0a2034; stroke:#548dc2; stroke-width:1; }
.reaction-own-art { --reaction-emoji-size:calc(25px * var(--reaction-scale)); position:absolute; inset:0 0 0 11%; display:grid; place-items:center; }
.reaction-float { --reaction-emoji-size:clamp(36px,calc(50px * var(--reaction-scale)),80px); --reaction-rise:calc(210px * var(--reaction-scale)); --reaction-sway:calc(18px * var(--reaction-scale) * var(--reaction-drift,1)); position:absolute; right:calc(13px * var(--reaction-scale)); bottom:calc(26px * var(--reaction-scale) + var(--reaction-control-height)); display:grid; place-items:center; width:1.2em; height:1.2em; font-size:var(--reaction-emoji-size); pointer-events:none; opacity:0; animation:reaction-rise 3s linear both; }
@keyframes reaction-rise {
  0% { opacity:0; transform:translate3d(0,0,0) scale(.6) rotate(-6deg); }
  12% { opacity:1; transform:translate3d(calc(var(--reaction-sway) * -.25),calc(var(--reaction-rise) * -.12),0) scale(1) rotate(0); }
  55% { opacity:.9; transform:translate3d(calc(var(--reaction-sway) * -1),calc(var(--reaction-rise) * -.55),0) scale(1.08) rotate(5deg); }
  100% { opacity:0; transform:translate3d(calc(var(--reaction-sway) * -.4),calc(var(--reaction-rise) * -1),0) scale(.88) rotate(-5deg); }
}
@keyframes reaction-fade { 0%,100% { opacity:0; } 12%,55% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .reaction-float { animation-name:reaction-fade; } }
.reaction-dismiss { position:absolute; inset:0; pointer-events:auto; z-index:3; }
#reaction-picker { position:absolute; right:calc(6px * var(--reaction-scale)); bottom:calc(32px * var(--reaction-scale) + var(--reaction-control-height)); width:min(356px,calc(100% - 24px)); box-sizing:border-box; padding:10px 12px 12px; border:1px solid #5479ac; border-radius:18px; background:linear-gradient(130deg,#10273d,#061524); box-shadow:0 12px 24px #0006; pointer-events:auto; z-index:4; }
#reaction-picker::before { content:''; position:absolute; bottom:-7px; right:calc(30px * var(--reaction-scale)); width:12px; height:12px; transform:rotate(45deg); border-bottom:1px solid #5479ac; border-right:1px solid #5479ac; background:#061524; }
.reaction-heading { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.reaction-heading strong { font-size:17px; font-weight:650; }
.reaction-close { margin-left:auto; width:36px; height:36px; padding:6px; border:0; border-radius:10px; color:#f4f8ff; background:#061524; }
.reaction-close svg { width:24px; height:24px; }
.reaction-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.reaction-options button { --reaction-emoji-size:40px; display:grid; place-items:center; padding:4px 0; min-height:52px; background:linear-gradient(145deg,#142c43,#061523); color:#fff; border:1px solid #3a506a; border-radius:13px; }
.reaction-options button:hover { border-color:#00d4ef; background:#0d3852; }
.reaction-options button:active { transform:scale(.94); }
.reaction-announcement { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-height:380px) { #reaction-picker { padding:6px 10px 10px; } .reaction-heading { margin-bottom:2px; } .reaction-options button { min-height:46px; } }

@media(max-width:650px) { #game-reactions { --reaction-control-height:90px; } .reaction-controls { grid-template-columns:1fr; } .reaction-change { border-left:0; border-top:1px solid #6263a1; } }