/* Jumplin v26 reaction themes (v25 "Power-Up Arcade" + v26 "Sticker Squad" and "Jumpy Moves"). Pairs with reactions.js.
   Only transform / opacity animate (cheap on TVs and old phones); everything shares one 1.6 s loop. */
/* the shared <defs> (halo gradient) must not take space */
.jlr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jlr { display: block; width: 100%; height: 100%; overflow: visible; }
.jlr .jlr-lbl { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 700; letter-spacing: .02em; }
.jlr g, .jlr path, .jlr rect, .jlr text { transform-box: fill-box; transform-origin: center; }

/* --- buttons (host bar + phone controller) --- */
.mp-react-btn.jlr-btn { padding: 0; border: 0; background: transparent; border-radius: 22%; line-height: 0; font-size: 0;
  width: 64px; height: 64px; flex: 0 0 auto; cursor: pointer; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.mp-react-btn.jlr-btn:hover { transform: translateY(-2px) scale(1.04); }
.mp-react-btn.jlr-btn:active { transform: scale(.92); }
.mp-react-btn.jlr-btn:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
#mp-react-bar.jlr-bar { gap: 6px; }
#mp-ctrl-react.jlr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 320px; }
#mp-ctrl-react.jlr-grid .mp-react-btn.jlr-btn { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 74px; justify-self: center; }
@media (max-width: 640px) {
  /* v26dev2 (Ry): phone host bar = 4 x 2 grid of big tiles (~74px) so the word labels read clearly; Skip/Kick/Leave stay on top.
     minmax keeps it on screen on narrow phones (320px → ~68px tiles). */
  #mp-host-bar { padding-left: 8px; padding-right: 8px; }
  #mp-host-bar #mp-react-bar.jlr-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 74px)); justify-content: center; gap: 6px;
    flex: 1 1 100%; width: 100%; overflow: visible; }
  #mp-host-bar #mp-react-bar.jlr-bar .mp-react-btn.jlr-btn { width: 100%; height: auto; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; font-size: 0; padding: 0; }
  /* Video chat open on the host phone: fall back to the v25 single row of 44px tiles (all 8 visible, no scrolling) so the
     bar + video dock still leave the board and dice clear. Back to the 4 x 2 grid as soon as video chat closes. */
  body:has(#vc-dock:not(.hidden)) #mp-host-bar #mp-react-bar.jlr-bar,
  body:has(#vc-dock:not(.hidden)) #mp-host-bar #mp-react-bar[data-react-theme="classic"] { grid-template-columns: repeat(8, minmax(0, 44px)); gap: 0; justify-content: center; }
  body:has(#vc-dock:not(.hidden)) #mp-host-bar #mp-react-bar.jlr-bar .mp-react-btn.jlr-btn { width: 100%; max-width: 44px; height: auto; }
  body:has(#vc-dock:not(.hidden)) #mp-host-bar #mp-react-bar[data-react-theme="classic"] button { width: 42px; height: 42px; font-size: 22px; }
  /* Classic (plain emoji) gets the same 4 x 2 grid so nothing scrolls off the edge */
  #mp-host-bar #mp-react-bar[data-react-theme="classic"] { display: grid; grid-template-columns: repeat(4, minmax(0, 74px)); justify-content: center; justify-items: center;
    gap: 10px 6px; flex: 1 1 100%; width: 100%; overflow: visible; }
  #mp-host-bar #mp-react-bar[data-react-theme="classic"] button { width: 60px; height: 60px; font-size: 32px; line-height: 1; padding: 0; }
}
@media (min-width: 1024px) {
  body.mp-is-screen #mp-host-bar #mp-react-bar.jlr-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  body.mp-is-screen #mp-host-bar #mp-react-bar.jlr-bar .mp-react-btn.jlr-btn { width: 100%; height: auto; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; }
}

/* --- per-sticker loops --- */
.jlr-fireA { animation: jlrFrameA .4s steps(1) infinite; }
.jlr-fireB { opacity: 0; animation: jlrFrameB .4s steps(1) infinite; }
.jlr-ember { opacity: 0; animation: jlrEmber 1.6s ease-out infinite; }
.jlr-e2 { animation-delay: -.55s; } .jlr-e3 { animation-delay: -1.1s; }
.jlr-chg { animation: jlrCharge 1.6s steps(1) infinite; }
.jlr-b1 { animation-name: jlrCharge1; } .jlr-b2 { animation-name: jlrCharge2; } .jlr-b3 { animation-name: jlrCharge3; } .jlr-b4 { animation-name: jlrCharge4; }
.jlr-dumb { animation: jlrPump 1.6s ease-in-out infinite; }
.jlr-hop { animation: jlrHop .4s cubic-bezier(.3,0,.5,1) infinite alternate; }
.jlr-faceA { animation: jlrFrameA .4s steps(1) infinite; }
.jlr-faceB { opacity: 0; animation: jlrFrameB .4s steps(1) infinite; }
.jlr-tear { animation: jlrTear .4s steps(1) infinite; }
.jlr-handL { animation: jlrClapL .4s ease-in-out infinite; }
.jlr-handR { animation: jlrClapR .4s ease-in-out infinite; }
.jlr-impact { animation: jlrFrameA .4s steps(1) infinite reverse; }
.jlr-c1, .jlr-c2 { opacity: 0; }
.jlr-c1 { animation: jlrCnt1 1.6s ease-out infinite; } .jlr-c2 { animation: jlrCnt2 1.6s ease-out infinite; } .jlr-c3 { animation: jlrCnt3 1.6s ease-out infinite; }
.jlr-flash { opacity: 0; animation: jlrFlash 1.6s linear infinite; }
.jlr-bolt { animation: jlrZap 1.6s linear infinite; }
.jlr-zz { animation: jlrZz 1.6s steps(1) infinite; } .jlr-z2 { animation-delay: -.8s; }
.jlr-beat { animation: jlrBeat .8s ease-in-out infinite; }
.jlr-plus { opacity: 0; animation: jlrPlus 1.6s ease-out infinite; }
.jlr-rise { animation: jlrRise 1.6s cubic-bezier(.5,0,.3,1) infinite; }
.jlr-tw { animation: jlrTw 1.6s ease-in-out infinite; }
.jlr-t2 { animation-delay: -.4s; } .jlr-t3 { animation-delay: -.8s; } .jlr-t4 { animation-delay: -1.2s; }
.jlr-wipe { opacity: 0; animation: jlrWipe 1.6s ease-in-out infinite; }
.jlr-drop { animation: jlrDrop 1.6s ease-in infinite; }

@keyframes jlrFrameA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes jlrFrameB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes jlrEmber { 0% { opacity: 0; transform: translateY(14px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes jlrCharge  { 0% { opacity: .15; } 10% { opacity: 1; } 85% { opacity: 1; } 90% { opacity: .15; } }
@keyframes jlrCharge1 { 0% { opacity: .15; } 25% { opacity: 1; } 85% { opacity: 1; } 90% { opacity: .15; } }
@keyframes jlrCharge2 { 0% { opacity: .15; } 40% { opacity: 1; } 85% { opacity: 1; } 90% { opacity: .15; } }
@keyframes jlrCharge3 { 0% { opacity: .15; } 55% { opacity: 1; } 85% { opacity: 1; } 90% { opacity: .15; } }
@keyframes jlrCharge4 { 0% { opacity: .15; } 70% { opacity: 1; } 85% { opacity: 1; } 90% { opacity: .15; } }
@keyframes jlrPump { 0%, 68% { transform: none; } 74% { transform: translateY(-5px) scale(1.12); } 82% { transform: translateY(-3px) scale(1.06); } 90%, 100% { transform: none; } }
@keyframes jlrHop { from { transform: translateY(2px); } to { transform: translateY(-6px) rotate(-4deg); } }
@keyframes jlrTear { 0% { transform: none; } 50% { transform: translateY(5px); } }
@keyframes jlrClapL { 0%, 100% { transform: translateX(-3px) rotate(-12deg); } 50% { transform: translateX(6px) rotate(6deg); } }
@keyframes jlrClapR { 0%, 100% { transform: translateX(3px) rotate(12deg); } 50% { transform: translateX(-6px) rotate(-6deg); } }
@keyframes jlrCnt1 { 0% { opacity: 1; transform: scale(.4); } 8% { transform: scale(1.25); } 14% { transform: scale(1); } 30% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes jlrCnt2 { 0%, 30% { opacity: 0; transform: scale(.4); } 31% { opacity: 1; transform: scale(.4); } 39% { transform: scale(1.25); } 45% { transform: scale(1); } 61% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes jlrCnt3 { 0%, 61% { opacity: 0; transform: scale(.4); } 62% { opacity: 1; transform: scale(.4); } 70% { transform: scale(1.4) rotate(-6deg); } 78% { transform: scale(1.1); } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jlrFlash { 0%, 54% { opacity: 0; } 56% { opacity: .55; } 60% { opacity: 0; } 63% { opacity: .35; } 68%, 100% { opacity: 0; } }
@keyframes jlrZap { 0%, 52% { transform: none; } 56% { transform: translate(-2px, 1px) scale(1.12); } 60% { transform: translate(2px, -1px) scale(1.06); } 64% { transform: translate(-1px, 0) scale(1.1); } 72%, 100% { transform: none; } }
@keyframes jlrZz { 0% { opacity: 1; } 25% { opacity: .2; } 50% { opacity: 1; } 75% { opacity: .2; } }
@keyframes jlrBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(.98); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
@keyframes jlrPlus { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes jlrRise { 0% { transform: translateY(14px); opacity: 0; } 15% { opacity: 1; } 65% { transform: translateY(-6px); opacity: 1; } 75% { transform: translateY(-4px); } 92% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes jlrTw { 0%, 100% { opacity: .2; transform: scale(.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@keyframes jlrWipe { 0%, 40% { opacity: 0; transform: translateX(-12px); } 46% { opacity: 1; } 70% { opacity: 1; transform: translateX(40px); } 76%, 100% { opacity: 0; transform: translateX(46px); } }
@keyframes jlrDrop { 0% { opacity: 0; transform: translateY(-6px); } 12% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translateY(6px); } 72% { opacity: 1; transform: translateY(26px); } 80%, 100% { opacity: 0; transform: translateY(30px); } }

/* --- burst bubble (what everyone else sees) --- */
.mp-reaction-bubble.jlr-bubble { display: flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; }
.jlr-burst { position: relative; width: 72px; height: 72px; flex: 0 0 auto; }
.jlr-burst .jlr { position: relative; z-index: 1; animation: jlrBurstIn .55s cubic-bezier(.2,1.6,.4,1) both, jlrBurstWig 1.6s ease-in-out .55s infinite; }
.jlr-burst::before, .jlr-burst::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; }
.jlr-burst::before { background: repeating-conic-gradient(from 0deg, rgba(253,224,71,.85) 0 10deg, transparent 10deg 30deg); animation: jlrRays .7s ease-out both; }
.jlr-burst::after { border: 4px solid #f472b6; animation: jlrRing .6s ease-out .05s both; }
.jlr-bubble-name { font-weight: 700; }
@keyframes jlrBurstIn { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes jlrBurstWig { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes jlrRays { 0% { opacity: 0; transform: scale(.3) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(40deg); } }
@keyframes jlrRing { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }

/* --- v26 die-cut edge for Sticker Squad + Jumpy: a copy of the art turned into a thick white silhouette (no SVG filters) --- */
.jlr .jlr-cut, .jlr .jlr-cut * { fill: #fff; stroke: #fff; stroke-width: 11px; stroke-linejoin: round; stroke-linecap: round; opacity: 1; }
.jlr .jlr-cut text { stroke-width: 12px; }

/* --- v26 "Sticker Squad" loops (1.6 s, like the others) --- */
.jlr .jlrA-flick { animation: jlrKFlick 1.6s ease-in-out infinite; transform-origin: bottom; }
.jlr .jlrA-burst { animation: jlrKSpin 3.2s linear infinite; }
.jlr .jlrA-pump { animation: jlrKPump 1.6s ease-in-out infinite; }
.jlr .jlrA-shake { animation: jlrKShake 1.6s ease-in-out infinite; }
.jlr .jlrA-handL { animation: jlrKClapL 1.6s ease-in-out infinite; transform-origin: bottom; }
.jlr .jlrA-handR { animation: jlrKClapR 1.6s ease-in-out infinite; transform-origin: bottom; }
.jlr .jlrA-lines { animation: jlrKFlash 1.6s linear infinite; }
.jlr .jlrA-jitter { animation: jlrKJitter 1.6s ease-in-out infinite; }
.jlr .jlrA-gasp { animation: jlrKJaw 1.6s ease-in-out infinite; transform-origin: top; }
.jlr .jlrA-beat { animation: jlrKBeat 1.6s ease-in-out infinite; }
.jlr .jlrA-confetti { animation: jlrKConfetti 1.6s ease-out infinite; }
.jlr .jlrA-bob { animation: jlrKBob 1.6s ease-in-out infinite; }
/* --- v26 "Jumpy Moves" loops --- */
.jlr .jlrC-hover { animation: jlrKHover 1.6s ease-in-out infinite; }
.jlr .jlrC-flame { animation: jlrKFlick .4s ease-in-out infinite; transform-origin: top; }
.jlr .jlrC-pump { animation: jlrKPump 1.6s ease-in-out infinite; transform-origin: bottom; }
.jlr .jlrC-spark { animation: jlrKSpin 1.6s linear infinite; }
.jlr .jlrC-roll { animation: jlrKRoll 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.jlr .jlrC-bounce { animation: jlrKHop 1.6s ease-in-out infinite; }
.jlr .jlrC-clap { animation: jlrKClapUp .8s ease-in-out infinite; transform-origin: 50% 100%; }
.jlr .jlrC-pop { animation: jlrKFlash .8s linear infinite; }
.jlr .jlrC-jaw { animation: jlrKJaw 1.6s ease-in-out infinite; transform-origin: top; }
.jlr .jlrC-shiver { animation: jlrKShiver 1.6s linear infinite; }
.jlr .jlrC-alert { animation: jlrKBlink .8s steps(1) infinite; }
.jlr .jlrC-heart { animation: jlrKBeat 1.6s ease-in-out infinite; }
.jlr .jlrC-float { animation: jlrKFloat 1.6s ease-out infinite; }
.jlr .jlrC-sway { animation: jlrKSway 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.jlr .jlrC-hoop { animation: jlrKHoop .8s ease-in-out infinite; }
.jlr .jlrC-conf { animation: jlrKBlink .8s steps(1) infinite; }
.jlr .jlrC-wipe { animation: jlrKWipe 1.6s ease-in-out infinite; transform-origin: 100% 100%; }
.jlr .jlrC-drop { animation: jlrKDrop 1.6s ease-in infinite; }
.jlr .jlrC-breathe { animation: jlrKBreathe 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes jlrKFlick { 0%, 100% { transform: scaleY(1); } 25% { transform: scaleY(1.12) skewX(-3deg); } 50% { transform: scaleY(.94); } 75% { transform: scaleY(1.08) skewX(3deg); } }
@keyframes jlrKSpin { to { transform: rotate(360deg); } }
@keyframes jlrKPump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.12) rotate(-4deg); } 55% { transform: scale(.97); } }
@keyframes jlrKShake { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 37% { transform: rotate(-4deg); } 50% { transform: translateY(-3px); } }
@keyframes jlrKClapL { 0%, 40%, 100% { transform: rotate(-14deg) translateX(-4px); } 20%, 60% { transform: rotate(0); } }
@keyframes jlrKClapR { 0%, 40%, 100% { transform: rotate(14deg) translateX(4px); } 20%, 60% { transform: rotate(0); } }
@keyframes jlrKFlash { 0%, 15%, 45%, 55%, 100% { opacity: 0; } 20%, 40%, 60%, 75% { opacity: 1; } }
@keyframes jlrKJitter { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.08) rotate(-3deg); } 20% { transform: scale(.98) rotate(3deg); } 30% { transform: scale(1.06) rotate(-2deg); } 40% { transform: scale(1); } }
@keyframes jlrKBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(.98); } 36% { transform: scale(1.1); } 50% { transform: scale(1); } }
@keyframes jlrKConfetti { 0% { transform: translate(-6px, 8px) scale(.4); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(2px, -4px) scale(1.1); opacity: 1; } 100% { transform: translate(4px, 6px); opacity: 0; } }
@keyframes jlrKBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-4deg); } }
@keyframes jlrKHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes jlrKRoll { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg) translateX(-3px); } 50% { transform: rotate(0); } 75% { transform: rotate(16deg) translateX(3px); } }
@keyframes jlrKHop { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-6px); } 40% { transform: translateY(0); } 55% { transform: translateY(-3px); } 70% { transform: translateY(0); } }
@keyframes jlrKClapUp { 0%, 100% { transform: scaleX(1.25); } 50% { transform: scaleX(.95); } }
@keyframes jlrKJaw { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.45); } }
@keyframes jlrKShiver { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-1.5px); } 20%, 40%, 60%, 80% { transform: translateX(1.5px); } }
@keyframes jlrKBlink { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes jlrKFloat { 0% { transform: translateY(8px) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes jlrKSway { 0%, 100% { transform: translateX(-3px) rotate(-3deg); } 50% { transform: translateX(3px) rotate(3deg); } }
@keyframes jlrKHoop { 0%, 100% { transform: translateX(-4px) rotate(-6deg); } 50% { transform: translateX(4px) rotate(6deg); } }
@keyframes jlrKWipe { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-8px) rotate(-10deg); } }
@keyframes jlrKDrop { 0%, 30% { transform: translateY(0); opacity: 1; } 90% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes jlrKBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } }

/* --- v26 burst bubble per theme (arcade keeps the v25 look) --- */
.mp-reaction-bubble.jlr-bubble.jlr-bth-stickers { border-color: #f97316; }
.mp-reaction-bubble.jlr-bubble.jlr-bth-jumpy { border-color: #38bdf8; }
.jlr-bth-jumpy .jlr-burst::before { background: repeating-conic-gradient(from 0deg, rgba(56,189,248,.8) 0 10deg, transparent 10deg 30deg); }
.jlr-bth-jumpy .jlr-burst::after { border-color: #facc15; }
.jlr-bth-stickers .jlr-burst::after { border-color: #f97316; }

/* --- v26 theme pickers (settings sheet + create-room panels): a card per theme with a live preview --- */
.jlt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .4rem 0 .2rem; }
@media (min-width: 560px) { .jlt-grid.jlt-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jlt-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; padding: .5rem .5rem .55rem; border-radius: 1.1rem;
  border: 3px solid rgba(133,77,14,.16); background: #fff; color: #713f12; font: inherit; font-weight: 800; font-size: .8rem; text-align: center; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.jlt-card:hover { transform: translateY(-2px); }
.jlt-card:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.jlt-card[aria-checked="true"] { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(250,204,21,.45), 0 6px 16px rgba(113,63,18,.14); background: #fffbeb; }
.jlt-card[aria-checked="true"]::after { content: '✓'; position: absolute; top: -.55rem; right: -.45rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #f59e0b; color: #fff;
  font-size: .9rem; line-height: 1.5rem; box-shadow: 0 2px 6px rgba(113,63,18,.25); }
.jlt-card:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.jlt-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: .8rem; }
.jlt-card[data-theme="arcade"] .jlt-mini, .jlt-live[data-theme="arcade"], .jlt-mini[data-theme-bg="arcade"] { background: #1e1850; }
.jlt-card[data-theme="stickers"] .jlt-mini, .jlt-live[data-theme="stickers"], .jlt-mini[data-theme-bg="stickers"] { background: #fde68a; }
.jlt-card[data-theme="jumpy"] .jlt-mini, .jlt-live[data-theme="jumpy"], .jlt-mini[data-theme-bg="jumpy"] { background: #7dd3fc; }
.jlt-card[data-theme="classic"] .jlt-mini, .jlt-live[data-theme="classic"], .jlt-mini[data-theme-bg="classic"] { background: #f3f4f6; }
.jlt-chip { display: block; aspect-ratio: 1 / 1; min-width: 0; line-height: 0; }
.jlt-chip .jlr { width: 100%; height: 100%; }
.jlt-emoji { display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.35rem; background: #fff; border-radius: 22%; }
.jlt-name { display: block; line-height: 1.1; }
.jlt-blurb { display: block; font-size: .66rem; font-weight: 700; color: rgba(133,77,14,.75); }
.jlt-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 1.1rem; margin: .5rem 0 .2rem; }
.jlt-live .jlt-emoji { font-size: 2rem; }
.jlt-live-cap { font-size: .72rem; font-weight: 800; color: rgba(133,77,14,.85); text-align: center; margin: .1rem 0 .4rem; }
.jlt-lock { display: flex; gap: .55rem; align-items: center; padding: .6rem .75rem; border-radius: 1rem; background: #fef3c7; border: 2px solid rgba(217,119,6,.25);
  color: #713f12; font-weight: 800; font-size: .8rem; margin: .4rem 0; }
.jlt-lock b { font-weight: 900; }
.jlt-switch { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .8rem; border-radius: 1rem; background: #fff;
  border: 2px solid rgba(133,77,14,.15); margin: .6rem 0 .3rem; color: #713f12; font-weight: 800; font-size: .85rem; cursor: pointer; }
.jlt-switch small { display: block; font-weight: 700; font-size: .7rem; color: rgba(133,77,14,.75); margin-top: .1rem; }
.jlt-toggle { appearance: none; -webkit-appearance: none; flex: none; width: 3.1rem; height: 1.8rem; border-radius: 999px; background: #d6d3d1; position: relative; cursor: pointer;
  transition: background .15s ease; margin: 0; }
.jlt-toggle::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.jlt-toggle:checked { background: #22c55e; }
.jlt-toggle:checked::after { transform: translateX(1.3rem); }
.jlt-toggle:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
/* only the chosen card (and the one under the pointer / focus) animates; the big live strip always does */
.jlt-card:not([aria-checked="true"]):not(:hover):not(:focus-visible) .jlr, .jlt-card:not([aria-checked="true"]):not(:hover):not(:focus-visible) .jlr * { animation-play-state: paused; }
/* create-room panels: compact row of the 4 themes + "who picked" note */
.jlt-host { border: 2px solid rgba(133,77,14,.12); border-radius: 1.1rem; padding: .55rem .6rem .4rem; background: #fffdf5; }
.jlt-host-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .75rem; font-weight: 800; color: #713f12; }
.jlt-host-h small { font-weight: 700; color: rgba(133,77,14,.75); font-size: .68rem; }
.jlt-host .jlt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.jlt-host .jlt-card { padding: .3rem .3rem .4rem; font-size: .66rem; border-width: 2px; border-radius: .9rem; }
.jlt-host .jlt-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; gap: 2px; }
.jlt-host .jlt-blurb { display: none; }
.jlt-host .jlt-live { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 5px; margin: .45rem 0 .25rem; border-radius: .9rem; }
.jlt-host .jlt-live .jlt-emoji { font-size: clamp(1.1rem, 4.2vw, 2.1rem); }
.jlt-host .jlt-mini .jlt-emoji { font-size: clamp(.95rem, 3.4vw, 1.9rem); }
.jlt-host-note { font-size: .68rem; font-weight: 700; color: rgba(133,77,14,.8); margin: .1rem 0 0; }
.jlt-host .jlt-lock { margin: .35rem 0 .1rem; font-size: .72rem; padding: .45rem .6rem; }
.ja-reax { display: flex; align-items: center; gap: .6rem; }
.ja-reax-pill { padding-left: .55rem; padding-right: .55rem; font-size: .95rem; line-height: 1; }
.ja-reax .jlt-mini { width: 4.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; padding: 3px; gap: 2px; }

/* --- reduced motion: one clear still frame, no loops, no burst --- */
@media (prefers-reduced-motion: reduce) {
  .jlr *, .jlr-burst .jlr, .jlr-burst::before, .jlr-burst::after, .mp-react-btn.jlr-btn, .jlt-card, .jlt-toggle, .jlt-toggle::after { animation: none !important; transition: none !important; }
  .jlr-burst::before, .jlr-burst::after { display: none; }
  .jlr-fireB, .jlr-faceB, .jlr-c1, .jlr-c2, .jlr-flash, .jlr-wipe { opacity: 0; }
  .jlr-c3, .jlr-plus, .jlr-ember, .jlr-tw { opacity: 1; }
  .jlr-rise, .jlr-drop { opacity: 1; transform: none; }
}