/* Short-lived toys, with no effect on arena layout or pointer targets. */
#roomEffects { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.msn-wink-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.msn-wink-stage > .msn-face { zoom: 3; }
@media (max-width: 480px), (max-height: 480px) { .msn-wink-stage > .msn-face { zoom: 2; } }
.room-buzz { animation: room-buzz .09s steps(2,end) 8; }
@keyframes room-buzz { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-3px,1px); } 75% { transform: translate(3px,-1px); } }
.effects-toggle { justify-self: end; width: auto; color: #593381; font-size: 9px; padding: 1px 4px; min-height: 18px; }
.effect-store-item { min-width: 0; padding: 8px; display: grid; gap: 6px; background: #fff; border: 1px solid #a4b3cc; color: #294369; }
.effect-store-item > p { margin: 0; font: 11px/1.4 Tahoma, sans-serif; }
.effect-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.effect-actions button { flex: 1; min-width: 0; padding: 6px; border: 1px solid #849cb9; background: linear-gradient(#fff,#d8e9fb); color: #254271; font: 11px Tahoma, sans-serif; cursor: pointer; }
.effect-actions button:disabled { opacity: .55; cursor: default; }
.effect-actions button:focus-visible { outline: 2px solid #345f9d; outline-offset: 1px; }
.effect-preview { padding: 8px 3px; font: bold 11px Tahoma, sans-serif; text-align: center; color: #254c7e; background: #f1f8ff; border: 1px solid #c4d8eb; }
.effect-preview .chat-body { display: block; font-size: 11px; }
#chatPanel .chat-message { display: grid; grid-template-rows: minmax(16px, auto) minmax(44px, auto); gap: 3px; width: 100%; min-width: 0; box-sizing: border-box; padding: 2px; }
#chatPanel .chat-meta { min-width: 0; padding: 0 4px; line-height: 16px; }
#chatPanel .chat-user::after { content: ''; }
#chatPanel .chat-message:not([class*="bubble_"]) > .chat-body { box-sizing: border-box; min-height: 44px; margin: 0 2px 2px 0; padding: 10px 10px 7px; border: 1px solid #a7b7ce; border-radius: 2px 6px 2px 6px; background: linear-gradient(#ffffff, #edf3fa); box-shadow: inset 1px 1px #fff, 1px 1px 0 #d1dbe9; color: #12398b; overflow-wrap: anywhere; }
.bubble_lime, .bubble_pink, .bubble_aurora { --bubble-edge: #448021; --bubble-ink: #203c12; --bubble-top: #edffb5; --bubble-base: #a9e95c; --bubble-band: #62b61c; }
.bubble_pink { --bubble-edge: #b43e83; --bubble-ink: #62204e; --bubble-top: #ffe4fa; --bubble-base: #ffaddb; --bubble-band: #ed68bb; }
.bubble_aurora { --bubble-edge: #ef47d0; --bubble-ink: #dffcff; --bubble-top: #17285c; --bubble-base: #070b27; --bubble-band: #22ddff; }
/* Candy-shell bevels and pixel sparkles, like a mid-2000s chat skin. */
:is(.bubble_lime, .bubble_pink, .bubble_aurora) > .chat-body {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  min-width: 0; min-height: 44px; padding: 10px 10px 7px; border: 1px solid var(--bubble-edge);
  border-radius: 7px 7px 7px 1px; color: var(--bubble-ink);
  background: linear-gradient(180deg, #ffffffde 0, #ffffff66 5px, transparent 6px), linear-gradient(var(--bubble-top), var(--bubble-base));
  box-shadow: inset 1px 1px #fff, inset -1px -1px #ffffff80, 1px 1px 0 var(--bubble-edge);
  margin: 0 2px 2px 0; overflow-wrap: anywhere; text-shadow: 0 1px #ffffff99;
}
:is(.bubble_lime, .bubble_pink, .bubble_aurora) > .chat-body::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 auto; height: 6px; border-bottom: 1px solid #ffffffaa;
  background: repeating-linear-gradient(90deg, transparent 0 5px, #ffffff88 5px 7px, transparent 7px 10px), var(--bubble-band);
}
.bubble_pink > .chat-body { background: radial-gradient(circle at 95% 85%, #fff7 0 2px, transparent 3px), radial-gradient(circle at 88% 70%, #fff6 0 4px, transparent 5px), linear-gradient(180deg, #ffffffdd, #ffffff33 7px, transparent 8px), linear-gradient(var(--bubble-top), var(--bubble-base)); }
.bubble_aurora > .chat-body { border-radius: 2px 8px 2px 8px; background: repeating-linear-gradient(0deg, #ffffff0d 0 1px, transparent 1px 4px), linear-gradient(135deg, #071235 0 35%, #152f70 36% 45%, #b51baa 46% 48%, #081333 49% 100%); box-shadow: inset 1px 1px #89f8ff, inset -1px -1px #620e78, 0 0 0 1px #3c91c3, 2px 2px 0 #54115e; text-shadow: 1px 1px #120018, 0 0 5px #65efff; }
.bubble_aurora > .chat-body::before { height: 7px; background: repeating-linear-gradient(90deg, #ddfaff 0 2px, transparent 2px 6px), linear-gradient(90deg, #00dffd, #a44dff 53%, #ff3ca8); border-bottom-color: #f1a1eb; }
.bubble_aurora .chat-body::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(112deg, transparent 36%, #3fffff00 40%, #a9ffffcc 48%, #fff 50%, #ff78dfcc 53%, transparent 61%); transform: translateX(-115%); animation: bubble-shine 2.4s steps(12,end) 2; animation-delay: var(--bubble-age, 0s); pointer-events: none; }
@keyframes bubble-shine { to { transform: translateX(100%); } }
.room-effects-muted .bubble_aurora .chat-body::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .room-buzz, .bubble_aurora .chat-body::after { animation: none; } }

/* Retro windows and pastel stationery, independent from the lettering. */
:is(.bubble_win98,.bubble_terminal,.bubble_arcade,.bubble_cloud,.bubble_strawberry,.bubble_kitty) > .chat-body {
  position: relative; isolation: isolate; box-sizing: border-box; min-height: 48px;
  margin: 0 2px 2px 0; padding: 15px 12px 9px; overflow-wrap: anywhere;
  border: 2px solid #9aabc5; background: #f6f6fa; color: #283961;
  box-shadow: inset 1px 1px #fff, 2px 2px #26335433;
}
.bubble_win98 > .chat-body { border-color: #fff #666 #666 #fff; border-radius: 0; background: #c0c0c0; padding-top: 23px; color: #151515; font-family: Tahoma,sans-serif; }
.bubble_win98 > .chat-body::before { content: 'Mensaje.exe'; position: absolute; top: 2px; left: 2px; right: 2px; height: 16px; padding-left: 4px; text-align: left; background: linear-gradient(90deg,#07188c,#458adc); color: #fff; font: bold 10px/16px Tahoma,sans-serif; }
.bubble_win98 > .chat-body::after { content: '− □ ×'; position: absolute; right: 5px; top: 3px; color: #222; background: #c0c0c0; font: bold 10px/13px monospace; border: 1px outset #eee; }
.bubble_terminal > .chat-body { border-color: #3f6d4a; border-radius: 5px; color: #81ff94; background: repeating-linear-gradient(0deg,#15261a 0 1px,#08180d 1px 4px); font-family: Consolas,monospace; box-shadow: inset 0 0 12px #000, 2px 2px #163d1d; }
.bubble_terminal > .chat-body::before { content: '>_'; color: #b5ffb5; padding-right: 7px; }
.bubble_arcade > .chat-body { border: 3px double #ff86f4; border-radius: 0; color: #fff29b; background: radial-gradient(circle at 15% 15%,#79ffff 0 1px,transparent 2px),radial-gradient(circle at 90% 80%,#fe7cff 0 1px,transparent 2px),linear-gradient(135deg,#36105f,#110a35); box-shadow: 2px 2px #ff63c8, -2px -2px #54dbff; font-family: Consolas,monospace; }
.bubble_arcade > .chat-body::before { content: '★'; position: absolute; top: 0; right: 5px; color: #ff9cde; font-size: 10px; }
.bubble_cloud > .chat-body { border-color: #a5c9eb; border-radius: 17px 17px 17px 3px; color: #284b70; background: radial-gradient(ellipse at 15% 100%,#fff 0 18%,transparent 19%),radial-gradient(ellipse at 80% 100%,#fff 0 20%,transparent 21%),linear-gradient(#d8f1ff,#f0e7ff); }
.bubble_cloud > .chat-body::before { content: '☁'; position: absolute; right: 7px; top: -3px; color: #fff; font-size: 23px; text-shadow: 0 1px #a9c9df; }
.bubble_strawberry > .chat-body { border-color: #d983a0; border-radius: 10px 10px 3px 10px; color: #752d4b; background: repeating-linear-gradient(90deg,#fff6 0 10px,transparent 10px 20px),repeating-linear-gradient(0deg,#fff6 0 10px,#ffd1dd 10px 20px); }
.bubble_strawberry > .chat-body::before { content: '🍓'; position: absolute; right: 5px; top: -5px; font-size: 19px; }
.bubble_kitty > .chat-body { border-color: #d6ae89; border-radius: 12px 12px 3px 12px; color: #6b4439; background: radial-gradient(circle at 92% 80%,#edbfad66 0 3px,transparent 4px),linear-gradient(#fff8e8,#ffecd7); padding-top: 20px; }
.bubble_kitty > .chat-body::before { content: 'ฅ^•ﻌ•^ฅ'; position: absolute; top: -3px; left: 9px; font: bold 13px monospace; color: #b87877; }
.bubble_kitty > .chat-body::after { content: '♡'; position: absolute; right: 7px; bottom: 0; font-size: 18px; color: #c98e91; }
.chat-text { position: relative; z-index: 1; }
.text_rainbow { background: linear-gradient(90deg,#d52f64,#bc590b,#287437,#126acc,#733fb4,#d52f64); background-size: 200% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; font-weight: 800; text-shadow: none; animation: text-rainbow 6s linear infinite; }
.text_neon { color: #004fa5; font-weight: 800; text-shadow: 0 0 2px #fff,0 0 5px #23ecff,1px 1px #ef75dd; }
.text_candy { color: #bc2365; font-weight: 800; text-shadow: 0 1px #fff,1px 2px #f3a5c6; }
.text_fire { color: #87360a; font-weight: 800; text-shadow: 0 -1px #ffe386,0 -2px 3px #ff923d,1px 1px #fff2be; }
:is(.bubble_aurora,.bubble_arcade,.bubble_terminal) .text_neon { color: #bdffff; text-shadow: 0 0 5px #28eaff,1px 1px #ff55bc; }
:is(.bubble_aurora,.bubble_arcade,.bubble_terminal) .text_fire { color: #ffda78; text-shadow: 0 -1px #fff4b2,0 -3px 4px #ff5c16; }
:is(.bubble_aurora,.bubble_arcade,.bubble_terminal) .text_candy { color: #ffb8df; text-shadow: 1px 1px #c74391; }
:is(.bubble_aurora,.bubble_arcade,.bubble_terminal) .text_rainbow { background-image: linear-gradient(90deg,#ff94c1,#ffe5a0,#b4ffc7,#a3e4ff,#dfb4ff,#ff94c1); }
@keyframes text-rainbow { to { background-position: -200% 0; } }

/* Small, glossy yellow emoticons, drawn consistently on every platform. */
.msn-face { position: relative; width: 76px; height: 76px; border: 1px solid #b18022; border-radius: 50%; background: radial-gradient(circle at 33% 24%, #fff9bc, #ffdb51 48%, #efb52d 85%); box-shadow: inset 1px 2px #fff6, 1px 2px #8d691b33; }
.msn-eye { position: absolute; top: 23px; width: 13px; height: 8px; border: 2px solid #624619; border-bottom: 0; border-radius: 50% 50% 0 0; }
.msn-eye.left { left: 13px; }.msn-eye.right { right: 13px; }
.msn-mouth { position: absolute; left: 20px; bottom: 13px; width: 34px; height: 24px; border: 1px solid #78441c; border-radius: 2px 2px 20px 20px; background: linear-gradient(#fff 0 5px, #71302b 6px 16px, #e98683 17px); }
.msn-laugh { animation: msn-laugh .38s steps(5,end) 8; }
.msn-laugh .msn-eye { top: 20px; height: 7px; border-width: 3px; transform: rotate(-12deg); }
.msn-laugh .msn-eye.right { transform: rotate(12deg); }
.msn-laugh .msn-mouth { left: 14px; bottom: 8px; width: 46px; height: 34px; border-radius: 3px 3px 28px 28px; background: radial-gradient(ellipse at 50% 100%, #f19a9c 0 32%, transparent 35%), linear-gradient(#fff 0 7px, #71302b 8px); }
.msn-laugh::before, .msn-laugh::after { content: ''; position: absolute; top: 35px; width: 10px; height: 6px; border-radius: 50%; background: #ee9b57; }
.msn-laugh::before { left: 5px; }.msn-laugh::after { right: 5px; }
.msn-face:not(.msn-cry):not(.msn-laugh) .msn-tear { display: none; }
.msn-cry { animation: msn-cry .5s steps(4,end) 6; }
.msn-cry .msn-eye { top: 25px; border-top: 0; border-bottom: 3px solid #624619; border-radius: 0 0 50% 50%; }
.msn-cry::before, .msn-cry::after { content: ''; position: absolute; top: 17px; width: 17px; height: 4px; border-top: 2px solid #624619; border-radius: 50%; }
.msn-cry::before { left: 12px; transform: rotate(-24deg); }.msn-cry::after { right: 12px; transform: rotate(24deg); }
.msn-cry .msn-mouth { left: 22px; width: 30px; height: 23px; bottom: 8px; border-radius: 22px 22px 5px 5px; background: linear-gradient(#71302b 65%, #d88385 66%); }
.msn-tear { position: absolute; z-index: 1; top: 34px; height: 40px; width: 9px; border: 1px solid #439ec8; border-radius: 2px 2px 6px 6px; background: linear-gradient(90deg, #ddfaff, #76caee); animation: msn-tears .6s steps(5,end) infinite; }
.msn-tear.left { left: 17px; }.msn-tear.right { right: 17px; animation-delay: .2s; }
.msn-laugh .msn-tear { top: 29px; width: 7px; height: 14px; border-radius: 60% 40% 60% 40%; animation: msn-laugh-tears .55s steps(5,end) infinite; }
.msn-laugh .msn-tear.left { left: 8px; --tear-travel: -10px; --tear-tilt: 25deg; }
.msn-laugh .msn-tear.right { right: 8px; --tear-travel: 10px; --tear-tilt: -25deg; animation-delay: .18s; }
.msn-fart .msn-mouth { left: 28px; bottom: 18px; width: 21px; height: 5px; border: 0; border-bottom: 2px solid #78441c; border-radius: 0 0 50% 50%; background: none; animation: msn-fart-smile 1s ease-in-out 3; }
.msn-fart .msn-eye.right { top: 28px; height: 0; border-radius: 0; }
.msn-puff { position: absolute; right: -12px; bottom: 0; width: 18px; height: 15px; border: 1px solid #8eaa77; border-radius: 50%; background: #dfebcd; animation: msn-puff 1.1s steps(6,end) 3; }
.msn-puff.puff-two { right: -24px; bottom: 8px; width: 24px; height: 21px; animation-delay: .15s; }
.msn-puff.puff-three { right: -31px; bottom: -7px; animation-delay: .3s; }
.msn-nudge { position: relative; width: 64px; height: 52px; border: 1px solid #699ac6; border-radius: 3px; background: linear-gradient(#d3eaff 0 10px, #fff 11px); box-shadow: inset 1px 1px #fff, 2px 2px #bed1e1; animation: msn-nudge .12s steps(2,end) 6; }
.msn-nudge span { display: block; margin-top: 14px; color: #ce9030; font: bold 28px Tahoma, sans-serif; text-align: center; }
.msn-nudge i, .msn-nudge b { position: absolute; top: 20px; width: 6px; height: 17px; border: 2px solid #699ac6; border-top: 0; border-bottom: 0; }
.msn-nudge i { left: -13px; border-right: 0; }.msn-nudge b { right: -13px; border-left: 0; }
.msn-wink-preview { display: grid; justify-items: center; gap: 7px; padding: 8px 0 2px; }
.msn-wink-preview .msn-face { zoom: .65; }
.msn-wink-preview .msn-nudge { zoom: .8; }
.msn-wink-preview *, .msn-wink-preview .msn-face, .msn-wink-preview .msn-tear, .msn-wink-preview .msn-mouth { animation: none; }
@keyframes msn-laugh { 0%,100% { transform: rotate(-9deg); } 25% { transform: translateY(-7px) rotate(7deg) scale(.96,1.06); } 50% { transform: translateY(1px) rotate(12deg) scale(1.08,.92); } 75% { transform: translateY(-4px) rotate(-6deg); } }
@keyframes msn-cry { 0%,100% { transform: rotate(-4deg); } 25% { transform: translateY(2px) rotate(-2deg) scale(1.02,.97); } 50% { transform: rotate(4deg); } 75% { transform: translateY(2px) rotate(2deg) scale(1.02,.97); } }
@keyframes msn-tears { 0% { transform: translateY(0) scaleY(.6); opacity: .65; } 60% { opacity: 1; } 100% { transform: translateY(22px) scaleY(1.2); opacity: 0; } }
@keyframes msn-laugh-tears { 0% { transform: translate(0,0) rotate(var(--tear-tilt)) scale(.65); opacity: .6; } 35% { opacity: 1; } 100% { transform: translate(var(--tear-travel),18px) rotate(var(--tear-tilt)); opacity: 0; } }
@keyframes msn-fart-smile { 0%,100% { width: 21px; height: 5px; transform: rotate(0); } 45%,65% { width: 25px; height: 10px; transform: translate(-2px,1px) rotate(-9deg); } }
@keyframes msn-puff { 0% { transform: translateX(0) scale(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateX(22px) scale(1.2); opacity: 0; } }
@keyframes msn-nudge { 50% { transform: translateX(3px) rotate(3deg); } }

.arena-message-banner { position: absolute; z-index: 3; left: 26px; right: 26px; top: 12px; text-align: center; pointer-events: none; }
.arena-message-banner.hidden { display: none; }
.arena-message-author,.arena-message-time { display: none; }
.arena-message-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.arena-message-skip { position: absolute; right: -12px; top: 0; pointer-events: auto; padding: 2px 4px; font: 9px Tahoma,sans-serif; border: 1px solid #aa7485; background: #fff7fa; color: #832f48; cursor: pointer; }
.arena-message-form,.arena-message-queue { grid-column: 1 / -1; display: grid; gap: 7px; padding: 10px; background: #fff; border: 1px solid #a4b3cc; color: #294369; font: 12px Tahoma,sans-serif; }
.arena-message-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 65px; padding: 8px; border: 1px solid #8ca4c3; font: 12px/1.5 Tahoma,sans-serif; }
.arena-message-rules { margin: 0; padding: 8px; background: #fff6dd; border: 1px solid #d1b77a; line-height: 1.4; }
.arena-message-consent { display: flex; gap: 6px; align-items: center; }
.arena-message-form button,.arena-message-queue button { padding: 6px; border: 1px solid #849cb9; background: linear-gradient(#fff,#d8e9fb); color: #254271; cursor: pointer; }
.arena-message-form button:disabled,.arena-message-queue button:disabled { opacity: .5; cursor: default; }
.arena-message-queue-item { display: grid; gap: 5px; padding: 7px; border: 1px solid #c6d2e5; background: #f4f8ff; }
.arena-message-queue-item p { margin: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .text_rainbow,.msn-face,.msn-tear,.msn-puff,.msn-nudge,.msn-fart .msn-mouth,.msn-laugh .msn-tear,.arena-message-copy { animation: none; }
}
.room-effects-muted .text_rainbow,.room-effects-muted .arena-message-copy { animation: none; }

/* Keep every chat skin on the same geometry, including its decoration space. */
#chatPanel .chat-messages {
  align-content: start;
  grid-auto-rows: max-content;
}
#chatPanel .chat-message {
  grid-template-rows: minmax(32px, auto) minmax(56px, auto);
  align-content: start;
}
#chatPanel .chat-messages .chat-message > .chat-body {
  box-sizing: border-box;
  min-width: 0;
  min-height: 56px;
  margin: 0 2px 2px 0;
  padding: 23px 10px 9px;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}