.live-modal:has(.reaction-picker) { width:min(500px,100%); padding:20px 14px 10px; background:#222c3c; border:1px solid #48546a; overflow:hidden; }
.reaction-picker { display:flex; flex-direction:column; max-height:calc(100dvh - 86px); color:#edf1f8; min-width:0; }
.reaction-picker-head,.reaction-tabs,.reaction-picker-footer { flex:none; }
.reaction-picker-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 26px 12px 2px; }
.live-modal .reaction-picker-head h2 { margin:0 0 4px; padding-right:0; font-size:19px; }
.reaction-picker-head p { margin:0; color:#a8b7cc; font-size:11px; }
.reaction-picker-head>button { flex:none; border:0; background:transparent; color:#b9cae6; font-size:11px; min-height:36px; padding:4px; }
.reaction-picker-head>button[aria-pressed=true] { color:#ffcf72; }
.reaction-tabs { display:flex; gap:4px; padding:6px 0 10px; border-bottom:1px solid #44516a; }
.reaction-tabs button { flex:1; min-height:36px; border:0; border-radius:8px; font-size:13px; color:#b7c7df; background:transparent; }
.reaction-tabs button[aria-pressed=true] { color:#fff; background:#43506a; box-shadow:inset 0 0 0 1px #7182a13b; }
.live-modal .reaction-grid { display:grid; flex:0 1 auto; grid-template-columns:repeat(7,minmax(0,1fr)); align-content:start; gap:7px 1px; min-height:0; max-height:min(445px,52dvh); overflow:auto; overscroll-behavior:contain; margin:9px 0 4px; scrollbar-width:thin; }
.live-modal .reaction-grid button { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-width:0; min-height:62px; gap:0; padding:1px 0 3px; border:0; background:transparent; color:#d5dfef; border-radius:8px; }
.reaction-grid button:hover,.reaction-grid button:focus-visible,.reaction-grid button[aria-pressed=true] { background:#3c4861; }
.reaction-grid img { width:44px; height:44px; object-fit:contain; pointer-events:none; }
.reaction-grid .reaction-label { font-size:9px; line-height:13px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; }
.reaction-grid .reaction-favorite { position:absolute; top:1px; right:1px; color:#ff8d9e; font-style:normal; font-size:10px; }
.reaction-empty { grid-column:1/-1; align-self:center; margin:60px 0; text-align:center; color:#a8b7cc; font-size:12px; }
.reaction-picker-footer { display:flex; justify-content:space-between; padding:9px 1px 3px; color:#92a5bf; font-size:10px; border-top:1px solid #44516a; }
.avatar-reaction { position:fixed; z-index:45; transform:translate(-50%,-50%); pointer-events:none; filter:drop-shadow(0 3px 4px #0006); contain:layout style; }
.avatar-reaction img { width:100%; height:100%; object-fit:contain; display:block; }
.avatar-reacting > :is(img,span,.player-avatar,.avatar-fallback,.avatar-initials) { opacity:0!important; }
.chat-tools .emoji-open { width:100%; min-height:42px; margin-bottom:10px; border:1px solid #3c5768; border-radius:10px; color:#d6e6f4; background:#203c4d; }
@media(max-width:360px) { .live-modal:has(.reaction-picker) { padding:17px 8px 8px; }.reaction-grid img { width:38px;height:38px; }.live-modal .reaction-grid button { min-height:56px; }.reaction-grid .reaction-label { font-size:8px; } }
@media(orientation:landscape) and (max-height:500px) { .live-modal:has(.reaction-picker) { padding-top:12px; }.reaction-picker-head { padding-bottom:4px; }.reaction-picker-head p { display:none; }.reaction-tabs { padding:2px 0 4px; }.reaction-tabs button { min-height:29px; }.live-modal .reaction-grid { min-height:90px;max-height:calc(100dvh - 150px);grid-template-columns:repeat(10,minmax(0,1fr)); }.reaction-grid img { width:35px;height:35px; }.live-modal .reaction-grid button { min-height:48px; } }
@media(max-width:600px) and (orientation:portrait) { .modal-backdrop:has(.reaction-picker) { align-items:flex-end; padding-bottom:max(10px,env(safe-area-inset-bottom)); }.live-modal:has(.reaction-picker) { border-radius:18px 18px 12px 12px; } }

/* Keep a compact avatar visible beside the name in compact layouts, too. */
.live-screen.club-felt-screen .hero-identity .seat-avatar { display:grid; flex:none; }
@media(orientation:landscape) and (max-height:500px) {
  .live-modal .reaction-grid { min-height:0; }
  .live-screen.club-felt-screen .hero-identity { gap:4px; }
  .live-screen.club-felt-screen .hero-identity .seat-avatar { width:24px; height:24px; }
  .live-screen.club-felt-screen .hero-identity .hero-details { min-width:0; }
}