/* ═══════════════════════════════════════════════════════════════════════════
   Multiplayer do Sketch Aura — lobby, salas, fichas de jogador, reações.
   Reaproveita os tokens do app (paper/cream/pink, Poppins/Fredoka) e as classes
   .screen/.card/.btn-p/.btn-s. Adiciona só o que é do multiplayer.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --mode-rajada:#FF2D6E;   /* velocidade */
  --mode-conjurar:#7B5CFF; /* memória/magia */
  --mode-telefone:#FFB02E; /* caô/distorção */
  --mode-dinamico:#2DBE7A; /* mudança */
  --mp-host:#FFB02E;
  --mp-ready:#2DBE7A;
}

.mp-screen { align-items:center; justify-content:flex-start; overflow-y:auto; padding:1.25rem; }
.mp-wrap { width:100%; max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:1.1rem; }
.mp-top { display:flex; align-items:center; gap:0.6rem; padding-top:0.3rem; }
.mp-top .mp-title { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.5rem; flex:1; }
.mp-back { cursor:pointer; background:var(--paper); border:1.5px solid var(--border); border-radius:10px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink); }
.mp-back:hover { border-color:var(--ink); }

/* Botão "Chamar a galera" no menu principal — pílula CONTORNADA de rosa:
   evidente, mas secundária ao JOGAR (rosa cheio). Mesma largura pra alinhar. */
.mp-menu-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  width:300px; max-width:86vw; box-sizing:border-box;
  background:transparent; color:var(--pink);
  border:2.5px solid var(--pink); border-radius:999px;
  font-family:inherit; font-weight:800; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:0.04em;
  padding:0.82rem 1rem; margin-top:0.85rem; cursor:pointer;
  transition:background .15s, transform .15s, box-shadow .15s;
}
.mp-menu-btn:hover { background:var(--pink-soft); transform:translateY(-2px); box-shadow:0 8px 22px rgba(255,45,110,0.18); }
.mp-menu-btn:active { transform:translateY(0); }

/* ── home: criar / entrar ── */
.mp-cards { display:grid; gap:0.9rem; }
@media (min-width:640px){ .mp-cards { grid-template-columns:1fr 1fr; align-items:stretch; } }
.mp-card { padding:1.4rem; border-radius:18px; display:flex; flex-direction:column; gap:0.6rem; }
.mp-card h3 { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.25rem; display:flex; align-items:center; gap:0.5rem; }
.mp-card p { color:var(--ink-soft); font-size:0.86rem; line-height:1.4; }
/* "Criar sala" sem fundo rosa: o rosa fica só no botão CRIAR (regra do sinal-guia) */
.mp-card .mp-row { display:flex; gap:0.5rem; margin-top:auto; }
.mp-card input { flex:1; }

/* identidade (quem você é) — por aba */
.mp-ident-bar { display:flex; align-items:center; gap:0.7rem; background:var(--paper); border:1.5px solid var(--border); border-radius:14px; padding:0.5rem 0.8rem; }
.mp-ident-av { font-size:2rem; line-height:1; }
.mp-ident-info { flex:1; min-width:0; }
.mp-ident-cap { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:800; }
.mp-ident-nm { font-weight:800; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-ident-edit { background:none; border:1.5px solid var(--border); border-radius:999px; padding:0.3rem 0.85rem; font-weight:700; font-size:0.78rem; cursor:pointer; color:var(--ink-soft); }
.mp-ident-edit:hover { border-color:var(--pink); color:var(--pink); }
.mp-ident-editor { margin-top:0.5rem; background:var(--paper); border:1.5px solid var(--border); border-radius:14px; padding:0.7rem; }
.mp-ident-avs { display:grid; grid-template-columns:repeat(8,1fr); gap:0.3rem; }
.mp-ident-avopt { font-size:1.5rem; padding:0.25rem; border:1.5px solid var(--border); background:var(--paper); border-radius:10px; cursor:pointer; transition:transform .1s, border-color .1s; }
.mp-ident-avopt:active { transform:scale(0.88); }
.mp-ident-avopt.sel { border-color:var(--pink); background:var(--pink-soft); }
.mp-ident-nick { margin-top:0.5rem; }
@media (max-width:640px){ .mp-ident-avs { grid-template-columns:repeat(6,1fr); } }

/* ── lista de salas ── */
.mp-rooms-head { display:flex; align-items:center; gap:0.6rem; }
.mp-rooms-head input { flex:1; }
.mp-rooms { display:grid; gap:0.5rem; }
.mp-room { display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0.9rem; cursor:pointer; }
.mp-room:hover { border-color:var(--pink); transform:translateY(-1px); }
.mp-room .mp-room-av { font-size:1.6rem; line-height:1; flex-shrink:0; }
.mp-room .mp-room-info { flex:1; min-width:0; }
.mp-room .mp-room-name { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-room .mp-room-sub { color:var(--muted); font-size:0.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-room .mp-room-code { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:0.08em; }
.mp-room .mp-room-meta { color:var(--ink); font-weight:700; font-size:0.82rem; margin-left:auto; text-align:right; flex-shrink:0; }
.mp-empty { color:var(--muted); font-size:0.85rem; text-align:center; padding:1.2rem; }

/* ── lobby: código herói ── */
.mp-code-card { text-align:center; padding:1.3rem; }
.mp-code-label { color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; }
.mp-code { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:clamp(2.4rem,9vw,3.6rem); letter-spacing:0.16em; line-height:1.1; color:var(--ink); }
.mp-code-hint { color:var(--ink-soft); font-size:0.84rem; margin-top:0.2rem; }
.mp-code-actions { display:flex; gap:0.5rem; justify-content:center; margin-top:0.8rem; flex-wrap:wrap; }

/* ── jogadores ── */
.mp-players { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:0.6rem; }
.mp-player { position:relative; padding:0.7rem 0.4rem; border-radius:14px; text-align:center; background:var(--paper); border:1.5px solid var(--border); transition:border-color .15s, opacity .15s; }
.mp-player.ready { border-color:var(--mp-ready); }
.mp-player.offline { opacity:0.4; }
.mp-player .mp-av { font-size:1.8rem; line-height:1; }
.mp-player .mp-nick { font-size:0.78rem; font-weight:700; margin-top:0.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-player .mp-badge { position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-size:0.62rem; font-weight:800; padding:1px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em; }
.mp-player .mp-badge.host { background:var(--mp-host); color:#1A1818; }
.mp-player .mp-badge.ready { background:var(--mp-ready); color:#fff; }
.mp-player .mp-kick { position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:none; background:var(--pink); color:#fff; font-size:0.7rem; cursor:pointer; display:none; align-items:center; justify-content:center; }
.mp-player:hover .mp-kick { display:flex; }
.mp-player.slot { border-style:dashed; opacity:0.5; }
.mp-player.slot .mp-av { opacity:0.4; }
/* entrou agora: pop curtinho (sala viva, dá pra notar "alguém chegou") */
.mp-player.mp-pop { animation:mpJoinPop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes mpJoinPop { 0% { transform:scale(0.6); opacity:0; } 100% { transform:scale(1); opacity:1; } }

/* ── seletor de modo ── */
.mp-section-label { font-weight:800; font-size:0.82rem; color:var(--ink); margin-bottom:0.1rem; }
.mp-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
#mp-modes-label { font-size:1.15rem; font-weight:800; }
/* rosa = sinal-guia: a área de votação acende em rosa até VOCÊ votar */
#mp-vote-area { border-radius:16px; padding:0.7rem; transition:background .2s, box-shadow .2s; }
#mp-vote-area.mp-vote-hl { background:var(--pink-soft); box-shadow:0 0 0 2px var(--pink); }
.mp-mode { padding:0.9rem 0.5rem; border-radius:14px; border:2px solid var(--border); background:var(--paper); cursor:pointer; text-align:center; transition:all .15s; }
.mp-mode:hover { border-color:var(--pink); transform:translateY(-2px); }
.mp-mode .mp-mode-em { font-size:1.9rem; }
.mp-mode .mp-mode-nm { font-size:0.82rem; font-weight:800; margin-top:0.2rem; }
.mp-mode { position:relative; }
.mp-mode.locked { cursor:default; opacity:0.85; }
/* SEU voto = forte, preenchido de rosa (o rosa guia pra SUA ação/escolha). */
.mp-mode.myvote { border-color:var(--pink); background:var(--pink); color:#fff; }
.mp-mode.myvote .mp-mode-nm, .mp-mode.myvote .mp-vote-cnt { color:#fff; }
/* vencedor (mais votos) = coroa discreta no canto + borda âmbar; não rouba a
   cena do seu voto (era o contrário antes). */
.mp-mode.winner { border-color:var(--mp-host); }
.mp-mode-crown { position:absolute; top:-9px; right:-7px; font-size:1.1rem; }
.mp-mode-votes { display:flex; align-items:center; justify-content:center; gap:1px; min-height:1.3em; margin-top:0.25rem; flex-wrap:wrap; }
.mp-vote-av { font-size:0.95rem; line-height:1; }
.mp-vote-cnt { font-size:0.72rem; font-weight:800; margin-left:2px; opacity:0.8; }
.mp-mode-desc { color:var(--ink-soft); font-size:0.82rem; min-height:2.4em; }

/* fonte das referências */
.mp-refsrc { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; font-size:0.85rem; }
.mp-refsrc-label { font-weight:800; color:var(--ink); }
.mp-refsrc-chip { border:1.5px solid var(--border); background:var(--paper); color:var(--ink-soft); border-radius:999px; padding:0.3rem 0.7rem; font-size:0.8rem; font-weight:700; cursor:pointer; }
.mp-refsrc-chip.sel { border-color:var(--pink); background:var(--pink-soft); color:var(--pink-dark); }
.mp-refsrc-chip:disabled { cursor:default; }
.mp-refsrc-theme { width:auto; min-width:140px; padding:0.35rem 1.8rem 0.35rem 0.6rem; font-size:0.8rem; }
.mp-refsrc-hint { color:var(--muted); font-size:0.78rem; }
.mp-step { text-align:center; font-weight:700; color:var(--ink-soft); background:var(--pink-soft); border-radius:12px; padding:0.7rem; }

.mp-start { width:100%; font-size:1.2rem; padding:1rem; }
.mp-start:disabled { opacity:0.5; cursor:not-allowed; }
/* tudo pronto pra começar: o rosa "escala" e o botão pulsa = manda ver */
.mp-start.go { animation:mpGoPulse 1.15s ease-in-out infinite; }
@keyframes mpGoPulse {
  0%,100% { box-shadow:0 0 0 0 var(--pink-glow); transform:scale(1); }
  50%     { box-shadow:0 0 0 7px rgba(255,45,110,0); transform:scale(1.02); }
}
.mp-foot { display:flex; gap:0.6rem; align-items:center; }
.mp-waiting { color:var(--muted); font-size:0.85rem; text-align:center; }

/* ── tela de partida ── */
/* NÃO sobrescrever position: .screen já é fixed/inset:0 (é o bloco de
   referência pros filhos absolutos). Sobrescrever quebrava a tela inteira. */
.mp-play-screen { padding:0; background:var(--cream); }
/* HUD flutuante no topo-CENTRO (os menus do motor ficam nos cantos, então não
   brigam com ele). O quadro ocupa a tela inteira por baixo. */
.mp-play-top { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:0.7rem; padding:0.3rem 0.45rem 0.3rem 0.9rem; background:var(--paper); border:1.5px solid var(--border); border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,0.18); max-width:calc(100vw - 16px); }
.mp-play-mode { font-weight:800; font-size:0.9rem; white-space:nowrap; }
.mp-play-timer { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.5rem; }
.mp-play-count { color:var(--ink-soft); font-size:0.82rem; font-weight:700; white-space:nowrap; }
.mp-play-top .mp-back { width:30px; height:30px; }
/* guia curto colado embaixo do contador (rosa = o sinal que diz "faça isto") */
.mp-play-hint { position:absolute; top:46px; left:50%; transform:translateX(-50%); z-index:59; display:none; max-width:calc(100vw - 24px); padding:0.28rem 0.85rem; background:var(--pink); color:#fff; font-weight:700; font-size:0.8rem; line-height:1.2; border-radius:999px; box-shadow:0 4px 14px var(--pink-glow); white-space:nowrap; text-align:center; }
.mp-play-hint.show { display:block; animation:mpPromptIn .3s ease both; }
@media (max-width:640px){ .mp-play-hint { white-space:normal; font-size:0.74rem; } }
.mp-play-body { position:absolute; inset:0; display:flex; }
.mp-play-ref { width:34%; min-width:120px; background:#fff; border-right:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; padding:0.5rem; }
.mp-play-ref img { max-width:100%; max-height:100%; object-fit:contain; }
.mp-play-ref-txt { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:clamp(1.2rem,3vw,2rem); text-align:center; color:var(--ink); padding:1rem; }
#mp-canvas-frame { flex:1; border:none; width:100%; height:100%; background:#fff; }
.mp-play-divider { width:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--cream-soft); border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); cursor:col-resize; position:relative; touch-action:none; }
.mp-play-divider::after { content:''; width:6px; height:60px; border-radius:999px; background:var(--pink); opacity:0.9; }
.mp-play-divider:hover { background:var(--pink-soft); }
.mp-play-divider:hover::after { opacity:1; }
@media (max-width:640px){
  .mp-play-body { flex-direction:column; }
  .mp-play-ref { width:auto; height:32%; border-right:none; border-bottom:1.5px solid var(--border); }
  .mp-play-divider { width:auto; height:18px; cursor:row-resize; border-left:none; border-right:none; border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border); }
  .mp-play-divider::after { width:60px; height:6px; }
}

/* sala "em jogo" na lista — cor diferente, não entrável */
.mp-room-playing { opacity:0.7; border-style:dashed; cursor:default; }
.mp-room-playing:hover { border-color:var(--border); transform:none; }
.mp-room-playing .mp-room-meta { color:var(--muted); }

/* ── contagem regressiva ── */
.mp-countdown { position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(12,10,9,0.96); color:#fff; }
.mp-countdown.hidden { display:none; }
.mp-cd-num { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:clamp(7rem,28vw,16rem); line-height:1; color:var(--pink); text-shadow:0 0 50px var(--pink-glow), 0 0 12px var(--pink-glow); animation:mpPop 0.5s ease; }
.mp-cd-sub { font-size:1.3rem; font-weight:700; letter-spacing:0.04em; opacity:0.9; margin-top:0.8rem; }
@keyframes mpPop { from { transform:scale(1.4); opacity:0.3; } to { transform:scale(1); opacity:1; } }

/* ── seleção (escolha a sua melhor) ── */
.mp-sel-hint { color:var(--ink-soft); font-size:0.95rem; text-align:center; margin:0 0 0.4rem; }
/* contador da escolha: grande e rosa, no topo, pra ficar evidente quanto tempo resta */
.mp-sel-timer { text-align:center; font-family:'Fredoka','Poppins',sans-serif; font-weight:800; font-size:1.7rem; line-height:1.1; color:var(--pink); min-height:1.4em; margin:0.1rem 0 0.2rem; }
.mp-select-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0.7rem; }
.mp-select-cell { padding:0; border:2.5px solid var(--border); border-radius:14px; background:#fff; cursor:pointer; overflow:hidden; aspect-ratio:1/1; transition:border-color .12s, transform .12s; }
.mp-select-cell img { width:100%; height:100%; object-fit:contain; display:block; }
.mp-select-cell:hover { transform:translateY(-2px); border-color:var(--pink); }
.mp-select-cell.sel { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-glow); }
/* célula sem desenho (ficou em branco) — aparece pra contagem bater, mas não dá pra escolher */
.mp-select-cell.empty { border-style:dashed; background:var(--cream-soft); cursor:default; display:flex; align-items:center; justify-content:center; }
.mp-select-cell.empty:hover { transform:none; border-color:var(--border); }
.mp-select-empty { color:var(--muted); font-size:0.8rem; font-weight:700; }

/* ── galeria (reveal v2): featured grandão + fileira de jogadores ── */
.mp-reveal-wrap { max-width:980px; }
.mp-feat { display:flex; flex-direction:column; align-items:center; gap:0.8rem; min-height:42vh; }
.mp-feat-author { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.7rem; animation:mpFeatIn .42s ease both; }
.mp-feat-pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; width:100%; animation:mpFeatIn .42s ease both; }
/* cada arte "se apresenta" ao entrar no holofote */
@keyframes mpFeatIn { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
.mp-feat-cell { display:flex; flex-direction:column; gap:0.4rem; }
.mp-feat-cell span { font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); text-align:center; }
.mp-feat-cell img { width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; border:2px solid var(--border); border-radius:16px; }
.mp-reveal-end { text-align:center; font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.6rem; padding:2rem; }
.mp-reveal-end span { display:block; font-family:'Poppins',sans-serif; font-weight:500; font-size:0.95rem; color:var(--ink-soft); margin-top:0.4rem; }
.mp-pl-row { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-top:0.3rem; }
.mp-pl { text-align:center; cursor:pointer; }
.mp-pl-sq { width:72px; height:72px; border-radius:14px; border:2.5px solid var(--border); object-fit:cover; background:#fff; display:block; }
.mp-pl-ph { display:flex; align-items:center; justify-content:center; font-size:2rem; }
.mp-pl.cur .mp-pl-sq { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-glow); animation:mpCurPulse 1.4s ease-in-out infinite; }
@keyframes mpCurPulse { 0%,100% { box-shadow:0 0 0 3px var(--pink-glow); } 50% { box-shadow:0 0 0 7px rgba(255,45,110,0.10); } }
.mp-pl.off { opacity:0.4; filter:grayscale(0.7); }
.mp-pl.off .mp-pl-sq { border-style:dashed; }
.mp-pl-nm { font-size:0.72rem; font-weight:700; margin-top:0.2rem; max-width:76px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* linha de contagem (tempo até passar) */
.mp-cd-line { text-align:center; font-size:0.82rem; font-weight:700; color:var(--muted); min-height:1.1em; }
@media (max-width:640px){ .mp-feat-author { font-size:1.3rem; } .mp-pl-sq { width:56px; height:56px; } }
.mp-reactions { display:flex; gap:0.9rem; justify-content:center; margin:0.6rem 0; }
.mp-react-btn { font-size:2.3rem; line-height:1; background:var(--paper); border:1.5px solid var(--border); border-radius:16px; padding:0.5rem 1rem; cursor:pointer; transition:transform .1s, border-color .1s; }
.mp-react-btn:hover { border-color:var(--pink); transform:translateY(-2px); }
.mp-react-btn:active { transform:scale(0.9); }
/* reações flutuando em cima do jogador (estilo Clash Royale) */
.mp-float { position:fixed; inset:0; pointer-events:none; z-index:9001; overflow:hidden; }
.mp-react-fly { position:absolute; bottom:18%; font-size:3.2rem; --dx:0px; transform:translateX(-50%); animation:mpFly 1.9s ease-out forwards; }
@keyframes mpFly { 0% { transform:translate(-50%,0) scale(0.5); opacity:0; } 15% { opacity:1; transform:translate(-50%,-14px) scale(1.15); } 100% { transform:translate(calc(-50% + var(--dx)),-210px) scale(1); opacity:0; } }

/* respeita quem não quer animação */
@media (prefers-reduced-motion: reduce){
  .mp-room:hover, .btn-s:hover, .mp-player, .mp-react-btn:hover { transform:none; }
  .mp-cd-num, .mp-react-fly, .mp-start.go, .mp-player.mp-pop,
  .mp-feat-author, .mp-feat-pair, .mp-pl.cur .mp-pl-sq { animation:none; }
  .mp-react-fly { opacity:1; bottom:auto; top:30%; }
  .mp-feat-author, .mp-feat-pair { opacity:1; transform:none; }
  .mp-play-ref-txt.show { animation:none; }
}

/* ═══════════════ Conjurar + Dinâmico (modos novos) ═══════════════ */

/* Dinâmico: quadro cheio — a "referência" é o desenho do colega que chega */
.mp-play-screen.no-ref #mp-play-ref,
.mp-play-screen.no-ref #mp-play-divider { display:none; }

/* Conjurar: o tema aparece grandão pra decorar, depois some */
.mp-play-ref-txt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; width:100%; height:100%; }
.mp-play-ref-txt.hidden { display:none; }
.mp-ref-prompt { background:linear-gradient(160deg,#fff,var(--cream-soft)); }
.mp-prompt-cap { font-family:'Poppins',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem; color:var(--pink); }
.mp-prompt-word { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:clamp(1.4rem,3.4vw,2.4rem); line-height:1.12; color:var(--ink); }
.mp-prompt-hint { font-family:'Poppins',sans-serif; font-weight:500; font-size:0.85rem; color:var(--muted); }
.mp-play-ref-txt.show { animation:mpPromptIn .3s ease both; }
.mp-play-ref-txt.show .mp-prompt-word { text-shadow:0 0 22px var(--pink-glow); }
.mp-play-ref-txt.faded { opacity:0.5; }
@keyframes mpPromptIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }

/* Reveal — Conjurar: o tema no lugar da referência */
.mp-feat-prompt-txt { display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1; background:var(--cream-soft); border:2px dashed var(--border); border-radius:16px; padding:1rem; font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:clamp(1.1rem,2.6vw,1.7rem); color:var(--ink); }

/* Reveal — Dinâmico: só o desenho coletivo + por quem passou */
.mp-feat-pair--single { grid-template-columns:minmax(0,520px); justify-content:center; }
.mp-feat-contrib { font-family:'Poppins',sans-serif; font-size:1.05rem; color:var(--ink-soft); margin-top:0.5rem; letter-spacing:0.04em; animation:mpFeatIn .42s ease both; }
.mp-feat-contrib span { font-family:'Poppins',sans-serif; font-weight:800; text-transform:uppercase; font-size:0.72rem; color:var(--muted); letter-spacing:0.08em; margin-right:0.4rem; }

/* Dinâmico: overlay de "troca de mãos" — a arte do vizinho chega deslizando */
.mp-handoff { position:fixed; inset:0; z-index:9002; display:flex; align-items:center; justify-content:center; background:rgba(12,10,9,0.9); padding:1rem; }
.mp-handoff.hidden { display:none; }
.mp-handoff-card { display:flex; flex-direction:column; align-items:center; gap:0.55rem; text-align:center; color:#fff; max-width:min(86vw,360px); }
.mp-handoff.in .mp-handoff-card { animation:mpHandoffIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
.mp-handoff-cap { font-family:'Poppins',sans-serif; font-weight:600; font-size:0.82rem; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.08em; }
.mp-handoff-who { display:flex; align-items:center; gap:0.5rem; font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:1.5rem; }
.mp-handoff-av { font-size:1.8rem; }
.mp-handoff-img { width:min(64vw,260px); aspect-ratio:1/1; object-fit:contain; background:#fff; border:3px solid var(--pink); border-radius:18px; box-shadow:0 12px 40px var(--pink-glow); }
.mp-handoff-sub { font-family:'Poppins',sans-serif; font-weight:500; font-size:0.9rem; color:rgba(255,255,255,0.85); }
@keyframes mpHandoffIn { 0% { opacity:0; transform:translateX(60px) rotate(3deg) scale(.9); } 100% { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .mp-handoff.in .mp-handoff-card { animation:none; } }