/* MAZALITO test-draw roulette (public/mazalito.js). Theme tokens only, so light and night modes both apply. */
.mazalito-draw-title { margin-bottom: 6px; font-weight: 700; color: var(--text); }
.mazalito-roulette { min-width: 0; max-width: 100%; margin: 0 0 12px; }
.mazalito-reel { position: relative; height: 108px; overflow: hidden; contain: paint; isolation: isolate; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2, var(--surface)); }
.mazalito-reel::before, .mazalito-reel::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 22px; pointer-events: none; }
.mazalito-reel::before { left: 0; background: linear-gradient(90deg, var(--surface-2, var(--surface)), transparent); }
.mazalito-reel::after { right: 0; background: linear-gradient(270deg, var(--surface-2, var(--surface)), transparent); }
.mazalito-reel-strip { position: absolute; top: 8px; left: 0; display: flex; gap: 8px; margin: 0; padding: 0; will-change: transform; backface-visibility: hidden; }
.mazalito-reel-card { box-sizing: border-box; flex: 0 0 76px; width: 76px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); transition: opacity .3s, border-color .3s, box-shadow .3s; }
.mazalito-reel-card img { flex: none; width: 44px; height: 44px; margin-bottom: 2px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; background: var(--surface-2, var(--surface)); }
.mazalito-reel-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; line-height: 1.4; unicode-bidi: isolate; }
.mazalito-reel-tag { flex: none; font-size: 8px; font-weight: 700; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.mazalito-reel-marker { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.mazalito-reel-marker::before, .mazalito-reel-marker::after { content: ''; position: absolute; left: 50%; margin-left: -6px; border-style: solid; border-color: transparent; }
.mazalito-reel-marker::before { top: 0; border-width: 7px 6px 0; border-top-color: var(--accent); }
.mazalito-reel-marker::after { bottom: 0; border-width: 0 6px 7px; border-bottom-color: var(--accent); }
.mazalito-roulette[data-phase=landed] .mazalito-reel-card { opacity: .4; }
.mazalito-roulette[data-phase=landed] .mazalito-reel-card.is-winner { opacity: 1; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mazalito-reel-card.is-winner .mazalito-reel-name { font-weight: 700; }
.mazalito-result { min-width: 0; margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.mazalito-result p { margin: 0; }
.mazalito-result-note { color: var(--muted); font-size: 10px; }
.mazalito-result :is(.mazalito-result-name, .mazalito-result-prize) { font-weight: 700; unicode-bidi: isolate; }
.mazalito-result.is-mine { padding: 9px 10px; border: 1px solid var(--accent); border-radius: 5px; background: var(--surface); }
.mazalito-result.is-mine .mazalito-result-text { color: var(--text); font-size: 12px; }
.mazalito-result .mazalito-use-prize { margin-top: 8px; }
.no-motion .mazalito-reel-card { transition: none; }
@media (prefers-reduced-motion: reduce) { .mazalito-reel-card { transition: none; } }
/* Name-tag entry rule: shown on every event so the requirement is visible before joining. */
.mazalito .mazalito-tag { font-weight: 700; color: var(--text); }
.mazalito .mazalito-tag.ok { color: var(--accent); }
/* Desktop: the chat column is one screen tall but starts below the top bar. While MAZALITO is shown the chat stops
   stretching, so the panel sits higher and its Join button stays on screen without scrolling. */
@media (min-width: 1081px) {
  .lobby-page .community-panel:has(.mazalito:not([hidden])) .chat-box, .lobby-page .community-panel:has(.mazalito:not([hidden])) > .chat-section { flex: none; min-height: auto; }
  .lobby-page .community-panel:has(.mazalito:not([hidden])) .chat-messages { flex: none; height: clamp(160px, calc(100dvh - 495px), 600px); }
}