.emote-wheel { position:fixed; inset:0; z-index:95; display:grid; place-items:center; background:#1117223d; user-select:none; -webkit-user-select:none; touch-action:none; font-family:var(--ui,system-ui,sans-serif); }
.emote-ring { --radius:124px; position:relative; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, #171d28e8 0 27%,#171d2855 28% 67%,transparent 68%); }
.emote-option { position:absolute; left:calc(50% + var(--x) * var(--radius)); top:calc(50% + var(--y) * var(--radius)); transform:translate(-50%,-50%); width:104px; min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 5px; border:1px solid #ffffff26; border-radius:16px; background:#202733ed; color:#eff3f8; font:600 12px/1.3 var(--ui,system-ui,sans-serif); box-shadow:0 5px 18px #0003; cursor:pointer; transition:background .1s,border-color .1s,box-shadow .1s; }
.emote-option.selected { background:#edf3fa; color:#18202c; border-color:#ffffff; box-shadow:0 0 0 3px #ffffff32,0 8px 24px #0004; }
.emote-option:focus-visible,.emote-cancel:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.emote-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; color:white; gap:7px; }
.emote-center strong { max-width:90px; text-align:center; font-size:13px; font-weight:650; line-height:1.3; }
.emote-center span { color:#c2cad5; font-size:10px; }
.emote-cursor { position:absolute; left:calc(50% - 3px); top:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:white; box-shadow:0 0 0 2px #17202b9c; pointer-events:none; }
.emote-cancel { position:absolute; top:calc(50% + 186px); border:0; background:#1c2531eb; border-radius:20px; color:#c5cedb; min-width:76px; min-height:34px; font:500 11px var(--ui,system-ui,sans-serif); cursor:pointer; }
.emote-feedback { position:fixed; left:50%; top:calc(16% + env(safe-area-inset-top)); transform:translateX(-50%); z-index:40; padding:9px 16px; border:1px solid #ffffff25; border-radius:24px; background:#1e2632e8; color:#f5f7fc; box-shadow:0 4px 18px #0003; font:600 13px var(--ui,system-ui,sans-serif); pointer-events:none; white-space:nowrap; }
@media(max-width:390px),(max-height:520px) { .emote-ring { --radius:102px; width:286px; height:286px; } .emote-option { width:86px; min-height:50px; font-size:11px; border-radius:13px; } .emote-center strong { font-size:12px; max-width:85px; } .emote-cancel { top:calc(50% + 152px); min-height:30px; } }
@media(max-height:370px) { .emote-ring { --radius:91px; width:258px; height:258px; } .emote-option { width:80px; min-height:48px; } .emote-cancel { top:auto; bottom:8px; right:12px; } }
@media(prefers-reduced-motion:reduce) { .emote-option { transition:none; } }