/* ============================================================
   MASCOTES — 60 personagens (10 formatos x 6 cores), 100% CSS/DIV
   Sem imagens, sem SVG, sem libs. Cada personagem é escolhido
   pelo jogador em join.php e persiste (avatar_id no banco).

   v2 — visual "toy plastic" com gradiente, brilho, sobrancelhas,
   bochechas, mãos/pés, sombra de chão dinâmica e confete nas
   poses de comemoração. Continua usando somente <div>/CSS.
   ============================================================ */

/* ---------- Campo decorativo (telão) ---------- */
.mascot-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.presenter { position: relative; }
.presenter > * { position: relative; z-index: 1; }

.mascot-mini { width: 76px; height: 88px; margin: 0 auto 10px; position: relative; }
.mascot-mini .mascot { position: relative; left: 0; top: 0; margin: 0 auto; }

.mascot-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; }
.mascot-chip .mascot { width: 46px; height: 54px; }
.mascot-chip .mc-name { font-size: .68rem; font-weight: 700; color: var(--text-dim); text-align: center; line-height: 1.1; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mascot-row { display: flex; align-items: center; gap: 10px; }
.mascot-row .mascot { width: 34px; height: 40px; flex-shrink: 0; }

/* ---------- Estrutura base ---------- */
.mascot { position: relative; width: 64px; height: 74px; }
.mascot-bounce { position: absolute; inset: 0; animation: mascot-bounce 2.2s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); will-change: transform; }

/* Cores derivadas da cor base via color-mix(): tom claro (topo),
   tom escuro (base/sombra) e tom bem escuro (contorno). */
.mascot {
    --mc-color: #7c3aed;
    --mc-light: color-mix(in srgb, var(--mc-color) 100%, white 32%);
    --mc-dark:  color-mix(in srgb, var(--mc-color) 100%, black 18%);
    --mc-darker: color-mix(in srgb, var(--mc-color) 100%, black 42%);
    --mc-pale:  color-mix(in srgb, var(--mc-color) 100%, white 62%);
}

/* Sombra de chão — dá peso/volume ao personagem */
.m-shadow {
    position: absolute; left: 50%; bottom: -6%; width: 66%; height: 13%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.4), rgba(0,0,0,0) 72%);
    border-radius: 50%; transform: translateX(-50%);
    animation: mascot-shadow-pulse 2.2s ease-in-out infinite;
    animation-delay: var(--bounce-delay, 0s);
}

.m-body {
    position: absolute; left: 12%; top: 4%; width: 76%; height: 74%;
    background: linear-gradient(155deg, var(--mc-light) 0%, var(--mc-color) 48%, var(--mc-dark) 100%);
    box-shadow:
        inset 0 5px 7px rgba(255,255,255,.35),
        inset 0 -9px 12px rgba(0,0,0,.22),
        0 6px 10px rgba(0,0,0,.3);
    overflow: hidden;
}
.m-body::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.14);
    pointer-events: none;
}
.m-shine {
    position: absolute; inset: 0;
    background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,.4) 45%, transparent 60%);
    mix-blend-mode: screen; pointer-events: none;
}
.m-belly { position: absolute; left: 24%; top: 50%; width: 52%; height: 34%; background: #fff; opacity: .14; border-radius: 50%; }

/* Sobrancelhas */
.m-brow { position: absolute; top: 13%; width: 20%; height: 6%; background: var(--mc-darker); border-radius: 3px; opacity: .8; transition: transform .2s ease; }
.m-brow-l { left: 16%; transform: rotate(-6deg); }
.m-brow-r { right: 16%; transform: rotate(6deg); }

.m-eye { position: absolute; top: 27%; width: 24%; height: 24%; background: radial-gradient(circle at 34% 30%, #ffffff, #edf1f8 75%); border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.m-eye-l { left: 18%; }
.m-eye-r { right: 18%; }
.m-pupil { position: absolute; left: 30%; top: 30%; width: 42%; height: 42%; background: radial-gradient(circle at 35% 30%, #322f57, #14142c 75%); border-radius: 50%; display: block; animation: mascot-look 4.6s ease-in-out infinite; }
.m-eye-shine { position: absolute; left: 16%; top: 14%; width: 22%; height: 22%; background: #fff; border-radius: 50%; opacity: .95; pointer-events: none; }
.m-lid { position: absolute; inset: 0; background: var(--mc-color); border-radius: 50%; transform: scaleY(0); transform-origin: center; display: block; animation: mascot-blink 4.4s ease-in-out infinite; }

.m-mouth { position: absolute; left: 35%; top: 57%; width: 28%; height: 10%; border-radius: 0 0 60% 60% / 0 0 100% 100%; background: var(--mc-darker); opacity: .55; overflow: hidden; transition: all .15s ease; }

.m-cheek { position: absolute; top: 47%; width: 15%; height: 9%; border-radius: 50%; background: #ff8fac; opacity: .32; filter: blur(.4px); }
.m-cheek-l { left: 5%; }
.m-cheek-r { right: 5%; }

.m-sweat { position: absolute; top: 16%; right: 8%; width: 9%; height: 15%; background: #7fd0f2; border-radius: 50% 50% 50% 0; transform: rotate(45deg); opacity: 0; }

.m-arm { position: absolute; top: 32%; width: 13%; height: 32%; background: linear-gradient(160deg, var(--mc-color), var(--mc-dark)); border-radius: 40%; box-shadow: inset 0 2px 3px rgba(255,255,255,.3); }
.m-arm-l { left: 0; transform-origin: top center; animation: mascot-arm-l 2.2s ease-in-out infinite; }
.m-arm-r { right: 0; transform-origin: top center; animation: mascot-arm-r 2.2s ease-in-out infinite; }
.m-hand { position: absolute; left: 50%; bottom: -10%; width: 78%; height: 38%; background: var(--mc-pale); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 2px 2px rgba(0,0,0,.22); }

.m-leg { position: absolute; bottom: 0; width: 16%; height: 20%; background: linear-gradient(160deg, var(--mc-color), var(--mc-dark)); border-radius: 40%; box-shadow: inset 0 2px 3px rgba(255,255,255,.3); }
.m-leg-l { left: 28%; transform-origin: top center; animation: mascot-leg-l 2.2s ease-in-out infinite; }
.m-leg-r { right: 28%; transform-origin: top center; animation: mascot-leg-r 2.2s ease-in-out infinite; }
.m-foot { position: absolute; left: 50%; bottom: -14%; width: 96%; height: 34%; background: var(--mc-darker); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 2px 2px rgba(0,0,0,.25); }

.m-accessory { position: absolute; top: -12%; left: 50%; transform: translateX(-50%); font-size: 1.3em; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.m-name-badge { display: none; }

/* Confete — brilha nas poses de comemoração/pulo */
.m-fx { position: absolute; left: 0; right: 0; top: -6%; height: 55%; pointer-events: none; }
.m-fx span { position: absolute; top: 40%; left: 50%; width: 6px; height: 10px; border-radius: 2px; opacity: 0; }
.m-fx span:nth-child(1) { background: #ffd400; --fx-x: -30px; --fx-rot: -50deg; animation-delay: 0s; }
.m-fx span:nth-child(2) { background: #ff5da2; --fx-x: -12px; --fx-rot: 40deg;  animation-delay: .12s; }
.m-fx span:nth-child(3) { background: #22d3ee; --fx-x: 2px;   --fx-rot: -20deg; animation-delay: .24s; }
.m-fx span:nth-child(4) { background: #ffb020; --fx-x: 16px;  --fx-rot: 55deg;  animation-delay: .08s; }
.m-fx span:nth-child(5) { background: #7ef29b; --fx-x: 30px;  --fx-rot: -35deg; animation-delay: .3s; }

/* ---------- 10 formatos de corpo ---------- */
.mascot[data-shape="s0"] .m-body { border-radius: 50%; }
.mascot[data-shape="s1"] .m-body { border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
.mascot[data-shape="s2"] .m-body { border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; }
.mascot[data-shape="s3"] .m-body { border-radius: 24%; }
.mascot[data-shape="s4"] .m-body { border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; }
.mascot[data-shape="s5"] .m-body { border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%; }
.mascot[data-shape="s6"] .m-body { border-radius: 65% 35% 65% 35% / 50% 50% 50% 50%; }
.mascot[data-shape="s7"] .m-body { border-radius: 35% 65% 35% 65% / 50% 50% 50% 50%; }
.mascot[data-shape="s8"] .m-body { border-radius: 20% 60% 20% 60% / 60% 20% 60% 20%; }
.mascot[data-shape="s9"] .m-body { border-radius: 60% 20% 60% 20% / 20% 60% 20% 60%; }

/* ---------- Animações base (idle) ---------- */
@keyframes mascot-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    30%      { transform: translateY(-14%) rotate(-2deg) scale(1.03, .97); }
    55%      { transform: translateY(0) rotate(1deg) scale(.96, 1.05); }
    75%      { transform: translateY(-4%) rotate(0deg) scale(1, 1); }
}
@keyframes mascot-shadow-pulse {
    0%, 100% { transform: translateX(-50%) scale(1);   opacity: .38; }
    30%      { transform: translateX(-50%) scale(.7);  opacity: .18; }
    55%      { transform: translateX(-50%) scale(.86); opacity: .28; }
    75%      { transform: translateX(-50%) scale(.95); opacity: .34; }
}
@keyframes mascot-blink { 0%, 90%, 100% { transform: scaleY(0); } 94% { transform: scaleY(1); } }
@keyframes mascot-look  { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(10%); } 75% { transform: translateX(-10%); } }
@keyframes mascot-arm-l { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(20deg); } }
@keyframes mascot-arm-r { 0%, 100% { transform: rotate(10deg); }  50% { transform: rotate(-20deg); } }
@keyframes mascot-leg-l { 0%, 100% { transform: rotate(6deg); }   50% { transform: rotate(-10deg); } }
@keyframes mascot-leg-r { 0%, 100% { transform: rotate(-6deg); }  50% { transform: rotate(10deg); } }

/* ---------- Deslocamento ambiente (campo decorativo) ---------- */
.mascot-field .mascot { position: absolute; animation: mascot-drift var(--drift-dur, 9s) ease-in-out infinite; animation-delay: var(--drift-delay, 0s); }
@keyframes mascot-drift { 0%, 100% { margin-left: 0; } 50% { margin-left: 22px; } }

/* ---------- POSES ---------- */

/* Pulando de alegria — pulo rápido e alto, boca em "o", confete */
.mascot.mood-jump .mascot-bounce { animation: mascot-jump .5s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: var(--bounce-delay, 0s); }
@keyframes mascot-jump { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-38%); } 55% { transform: translateY(-38%); } }
.mascot.mood-jump .m-arm { animation: mascot-jump-arm .5s ease-in-out infinite; }
@keyframes mascot-jump-arm { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-50deg); } }
.mascot.mood-jump .m-leg { animation: mascot-jump-leg .5s ease-in-out infinite; }
@keyframes mascot-jump-leg { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
.mascot.mood-jump .m-shadow { animation: mascot-shadow-jump .5s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
@keyframes mascot-shadow-jump { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .4; } 35%, 55% { transform: translateX(-50%) scale(.5); opacity: .16; } }
.mascot.mood-jump .m-brow-l { transform: rotate(-20deg) translateY(-2px); }
.mascot.mood-jump .m-brow-r { transform: rotate(20deg) translateY(-2px); }
.mascot.mood-jump .m-mouth { width: 22%; height: 22%; top: 52%; left: 39%; border-radius: 50%; opacity: .85; }
.mascot.mood-jump .m-cheek { opacity: .55; }
.mascot.mood-jump .m-fx span { animation-name: mascot-confetti; animation-duration: .9s; animation-timing-function: ease-out; animation-iteration-count: infinite; }

/* Comemoração — braços no alto, risada aberta, confete */
.mascot.mood-cheer .mascot-bounce { animation: mascot-cheer .8s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
@keyframes mascot-cheer { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22%) rotate(6deg); } }
.mascot.mood-cheer .m-arm-l { animation: mascot-arm-l .45s ease-in-out infinite; }
.mascot.mood-cheer .m-arm-r { animation: mascot-arm-r .45s ease-in-out infinite; }
.mascot.mood-cheer .m-shadow { animation: mascot-shadow-cheer .8s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
@keyframes mascot-shadow-cheer { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .38; } 50% { transform: translateX(-50%) scale(.66); opacity: .2; } }
.mascot.mood-cheer .m-brow-l { transform: rotate(-16deg) translateY(-2px); }
.mascot.mood-cheer .m-brow-r { transform: rotate(16deg) translateY(-2px); }
.mascot.mood-cheer .m-mouth { width: 36%; height: 18%; top: 52%; left: 32%; border-radius: 0 0 55% 55% / 0 0 90% 90%; opacity: .92; }
.mascot.mood-cheer .m-mouth::before { content: ''; position: absolute; left: 8%; top: 0; width: 84%; height: 42%; background: #fff; border-radius: 0 0 40% 40% / 0 0 100% 100%; }
.mascot.mood-cheer .m-cheek { opacity: .58; }
.mascot.mood-cheer .m-fx span { animation-name: mascot-confetti; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: infinite; }

/* Pose para foto — parado, sorridente, acenando, com brilho */
.mascot.mood-pose .mascot-bounce { animation: mascot-breathe 2.6s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
@keyframes mascot-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .99); } }
.mascot.mood-pose .m-arm-r { animation: mascot-wave 1.1s ease-in-out infinite; }
@keyframes mascot-wave { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-70deg); } }
.mascot.mood-pose .m-arm-l { animation: none; transform: rotate(12deg); }
.mascot.mood-pose .m-leg { animation: none; }
.mascot.mood-pose .m-pupil, .mascot.mood-pose .m-lid { animation: none; }
.mascot.mood-pose .m-cheek { opacity: .5; }
.mascot.mood-pose .m-shadow { animation: mascot-shadow-breathe 2.6s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
.mascot.mood-pose::after {
    content: '✨'; position: absolute; top: -4%; right: -14%; font-size: 1em;
    animation: mascot-sparkle 1.3s ease-in-out infinite;
}
.mascot.mood-pose::before {
    content: '✨'; position: absolute; top: 30%; left: -16%; font-size: .6em;
    animation: mascot-sparkle 1.6s ease-in-out infinite .5s;
}
@keyframes mascot-sparkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }

/* Triste — cabeça baixa, sobrancelhas caídas, gota de suor */
.mascot.mood-sad .mascot-bounce { animation: mascot-droop 1.8s ease-in-out infinite; }
@keyframes mascot-droop { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(6%) rotate(-4deg); } }
.mascot.mood-sad .m-arm, .mascot.mood-sad .m-leg { animation-play-state: paused; transform: rotate(0deg); }
.mascot.mood-sad .m-brow-l { transform: rotate(14deg) translate(2px, 2px); }
.mascot.mood-sad .m-brow-r { transform: rotate(-14deg) translate(-2px, 2px); }
.mascot.mood-sad .m-mouth { border-radius: 60% 60% 0 0 / 100% 100% 0 0; top: 63%; opacity: .5; }
.mascot.mood-sad .m-pupil, .mascot.mood-sad .m-lid { animation: none; }
.mascot.mood-sad .m-cheek { opacity: .12; }
.mascot.mood-sad .m-shadow { animation: mascot-shadow-breathe 1.8s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
.mascot.mood-sad .m-sweat { animation: mascot-sweat 1.8s ease-in-out infinite; }
@keyframes mascot-sweat {
    0%   { opacity: 0; transform: translateY(-4px) rotate(45deg); }
    30%  { opacity: .9; transform: translateY(0) rotate(45deg); }
    70%  { opacity: .9; transform: translateY(7px) rotate(45deg); }
    100% { opacity: 0; transform: translateY(11px) rotate(45deg); }
}

/* Neutro/parado (ex.: aguardando) */
.mascot.mood-still .mascot-bounce { animation: mascot-breathe 3s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }
.mascot.mood-still .m-arm, .mascot.mood-still .m-leg { animation-duration: 3.2s; }
.mascot.mood-still .m-shadow { animation: mascot-shadow-breathe 3s ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); }

@keyframes mascot-shadow-breathe {
    0%, 100% { transform: translateX(-50%) scale(1);   opacity: .36; }
    50%      { transform: translateX(-50%) scale(.9);  opacity: .3; }
}
@keyframes mascot-confetti {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--fx-x, 20px), -46px) rotate(var(--fx-rot, 90deg)) scale(1); }
}

/* ---------- Seletor de personagens (tela de entrada) ---------- */
.mascot-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px; max-height: 300px; overflow-y: auto;
    padding: 10px; margin: 10px 0 6px; background: #0f0f26;
    border: 2px solid #333366; border-radius: 10px;
}
.mascot-pick-btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: transparent; border: 2px solid transparent; border-radius: 10px;
    padding: 6px 2px; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mascot-pick-btn:hover { background: rgba(255,255,255,.06); transform: translateY(-2px) scale(1.04); }
.mascot-pick-btn.selected { border-color: var(--accent, #22d3ee); background: rgba(34,211,238,.12); }
.mascot-pick-btn.selected::after {
    content: '✓'; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
    background: var(--accent, #22d3ee); color: #0f0f26; font-size: .68rem; font-weight: 900;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.mascot-pick-btn .mascot { width: 42px; height: 50px; pointer-events: none; }
.mascot-pick-btn .mc-name { font-size: .62rem; font-weight: 700; color: var(--text-dim); text-align: center; line-height: 1.1; }
.mascot-picker-current { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.mascot-picker-current .mascot { width: 56px; height: 66px; }
.mascot-picker-current strong { font-size: 1rem; }

/* Performance da grade de seleção (60 personagens ao mesmo tempo):
   1) cada botão só é de fato renderizado/pintado quando visível na
      área de rolagem — o navegador pula o trabalho de layout/pintura
      dos demais, que é o que deixava a troca de seleção lenta;
   2) as animações contínuas (respirar, piscar, olhar, balançar
      braço/perna) ficam desligadas dentro da grade — o personagem
      grande no topo (#mascotPreview) continua totalmente animado.
   O clique/hover ainda dá feedback (leve "salto" do botão). */
.mascot-pick-btn {
    content-visibility: auto;
    contain-intrinsic-size: 74px 92px;
}
.mascot-picker-grid .mascot-bounce,
.mascot-picker-grid .m-pupil,
.mascot-picker-grid .m-lid,
.mascot-picker-grid .m-arm,
.mascot-picker-grid .m-leg,
.mascot-picker-grid .m-shadow,
.mascot-picker-grid .m-fx span {
    animation: none !important;
}
.mascot-picker-grid .m-shine { mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
    .mascot-bounce, .m-pupil, .m-lid, .m-arm, .m-leg, .m-shadow, .m-fx span, .m-sweat,
    .mascot.mood-pose::after, .mascot.mood-pose::before {
        animation: none !important;
    }
}