/* ==========================================================================
   CineRoleta do Casal — tema divertido, fugindo de azul/verde
   ========================================================================== */

:root{
  --roxo-fundo: #1a0b2e;
  --roxo-fundo-2: #3a1052;
  --roxo-fundo-3: #63166b;
  --rosa: #ff2e88;
  --rosa-2: #ff6fb0;
  --roxo: #8b3ff7;
  --roxo-2: #b06bff;
  --laranja: #ff7a1a;
  --amarelo: #ffd23f;
  --coral: #ff4d6d;
  --branco: #fff8fb;
  --card-bg: rgba(255,255,255,0.07);
  --card-bg-forte: rgba(255,255,255,0.12);
  --borda: rgba(255,255,255,0.14);
  --sombra: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 20px;
  --radius-sm: 14px;
  font-size: 16px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0; height:100%;
  font-family: 'Fredoka', system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,122,26,0.25), transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(255,46,136,0.25), transparent 50%),
    linear-gradient(160deg, #1a0b2e 0%, #34103f 45%, #5a1360 100%);
  background-attachment: fixed;
  color: var(--branco);
  min-height: 100%;
  overflow-x: hidden;
}

h1,h2,h3, strong{ font-family:'Baloo 2', system-ui, sans-serif; }

.oculto{ display:none !important; }

button{ font-family:inherit; cursor:pointer; border:none; }
input, textarea{ font-family:inherit; }

/* ---------------- Login / PIN ---------------- */
.tela-login{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.login-card{
  width:100%; max-width:380px;
  background: var(--card-bg);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align:center;
  backdrop-filter: blur(12px);
  box-shadow: var(--sombra);
  animation: aparecer .5s ease;
}
.login-emoji{ font-size: 3rem; margin-bottom: 4px; }
.login-card h1{
  font-size: 2rem; margin: 4px 0 0;
  background: linear-gradient(90deg, var(--rosa), var(--amarelo), var(--laranja));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.subtitle{ opacity:.75; margin: 2px 0 20px; font-size: .95rem; }

.pin-dots{ display:flex; justify-content:center; gap:12px; margin-bottom: 10px; }
.pin-dots .dot{
  width:16px; height:16px; border-radius:50%;
  border: 2px solid var(--roxo-2);
  background: transparent;
  transition: all .15s ease;
}
.pin-dots .dot.preenchido{
  background: linear-gradient(135deg, var(--rosa), var(--laranja));
  border-color: transparent;
  transform: scale(1.15);
}
.pin-dots.erro .dot{ border-color: var(--coral); animation: tremer .35s ease; }

.pin-erro{ height: 20px; color: var(--coral); font-size:.85rem; margin-bottom: 14px; opacity:0; transition: opacity .2s; }
.pin-erro.mostrar{ opacity:1; }

.teclado{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tecla{
  aspect-ratio:1; border-radius: 50%;
  background: var(--card-bg-forte);
  border: 1px solid var(--borda);
  color: var(--branco); font-size:1.3rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  transition: transform .1s ease, background .15s ease;
}
.tecla:active{ transform: scale(0.9); background: var(--roxo); }
.tecla-fantasma{ visibility:hidden; }
.tecla-apagar{ font-size:1.1rem; background:transparent; border:none; }

@keyframes tremer{
  0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-4px);} 75%{ transform: translateX(4px);}
}
@keyframes aparecer{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:none; } }

/* ---------------- Tela "quem é você" ---------------- */
.quem-opcoes{ display:flex; gap:14px; margin-top: 18px; }
.quem-card{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding: 26px 12px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.18); color:#fff;
  box-shadow: var(--sombra); transition: transform .12s ease;
}
.quem-card:active{ transform: scale(0.94); }
.quem-emoji{ font-size: 2.4rem; }
.quem-card strong{ font-size: 1.05rem; }
.quem-dimma{ background: linear-gradient(145deg, var(--roxo), var(--rosa)); }
.quem-mika{ background: linear-gradient(145deg, var(--laranja), var(--amarelo)); color:#3a1052; }

.chip-usuario{ font-size: 1rem; }
.badge-usuario{ background: linear-gradient(135deg, var(--roxo-2), var(--rosa-2)); }

/* ---------------- App shell ---------------- */
.app{ min-height:100vh; display:flex; flex-direction:column; max-width:520px; margin:0 auto; }

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 18px 14px;
}
.header-title{ display:flex; align-items:center; gap:10px; }
.header-emoji{ font-size:1.8rem; }
.header-title h1{ font-size:1.3rem; margin:0; line-height:1; }
.header-sub{ font-size:.75rem; opacity:.7; }
.header-actions{ display:flex; gap:8px; }
.icon-btn{
  background: var(--card-bg); border:1px solid var(--borda);
  width:38px; height:38px; border-radius:50%; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; color:var(--branco);
}

.app-main{ flex:1; padding: 0 16px 100px; }

.titulo-secao{ font-size:1.1rem; margin: 6px 0 14px; }

/* ---------------- Chips / filtros ---------------- */
.filtros-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 16px; }
.filtro-grupo{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--borda);
  font-size: .82rem; color: var(--branco); opacity:.85;
  transition: all .15s ease; user-select:none;
}
.chip.ativo{
  background: linear-gradient(135deg, var(--rosa), var(--roxo));
  border-color: transparent; opacity:1; font-weight:600;
  box-shadow: 0 4px 14px rgba(255,46,136,0.35);
}
.filtro-select{
  flex: 1 1 150px; padding: 9px 12px; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--borda); color: var(--branco);
  font-size:.82rem; font-family:inherit;
}
.filtro-select option{ background: var(--roxo-fundo-2); color: var(--branco); }
.chip-toggle{ cursor:pointer; }
.chip-toggle input{ display:none; }
.chip-toggle:has(input:checked){
  background: linear-gradient(135deg, var(--laranja), var(--amarelo));
  border-color:transparent; color:#3a1052; opacity:1; font-weight:700;
}

/* ---------------- Modo selector (roleta) ---------------- */
.modo-selector{ display:flex; flex-direction:column; gap:14px; margin-top: 6px; }
.modo-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding: 20px; border-radius: var(--radius);
  color: var(--branco); text-align:left;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--sombra);
  transition: transform .15s ease;
}
.modo-card:active{ transform: scale(0.97); }
.modo-emoji{ font-size:2rem; margin-bottom:6px; }
.modo-card strong{ font-size:1.15rem; }
.modo-desc{ font-size:.8rem; opacity:.85; margin-top:2px; }
.modo-classica{ background: linear-gradient(135deg, var(--rosa), var(--laranja)); }
.modo-genero{ background: linear-gradient(135deg, var(--roxo), var(--rosa)); }
.modo-duelo{ background: linear-gradient(135deg, var(--laranja), var(--amarelo)); color:#3a1052; }
.modo-duelo .modo-desc{ color: #3a1052cc; }

/* ---------------- Palco da roleta ---------------- */
.palco-roleta{ margin-top: 10px; text-align:center; animation: aparecer .3s ease; }
.palco-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.btn-voltar{
  background: var(--card-bg); border:1px solid var(--borda); color:var(--branco);
  padding: 8px 14px; border-radius: 999px; font-size:.85rem;
}
.etapa-titulo{ font-weight:700; font-size:1rem; }

.wheel-wrap{ position:relative; width: min(320px, 88vw); margin: 18px auto 10px; }
.wheel-ponteiro{
  position:absolute; top:-14px; left:50%; transform: translateX(-50%);
  width:0; height:0; z-index:5;
  border-left: 14px solid transparent; border-right:14px solid transparent;
  border-top: 26px solid var(--amarelo);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.wheel{
  position:relative; width:100%; aspect-ratio:1; border-radius:50%;
  border: 6px solid var(--amarelo);
  box-shadow: 0 0 0 6px rgba(0,0,0,0.25), var(--sombra);
  transition: transform 6.2s cubic-bezier(0.13, 0.85, 0.15, 1);
  overflow:hidden;
}
/* Ambos nascem apontando pra CIMA (0deg = norte, igual o conic-gradient) e
   giram em torno do centro exato da roda — assim rotate(Xdeg) cai sempre
   na mesma fatia de cor que o gradiente desenha em Xdeg. */
.wheel-fatia-label{
  position:absolute; left:50%; top:4%; width:0; height:46%;
  transform-origin: center bottom;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top: 8px;
}
.wheel-fatia-label span{
  display:block; flex-shrink:0;
  font-size: .64rem; font-weight:700; color:#fff; line-height:1.15; text-align:center;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  width: 84px; white-space:normal; word-break:break-word; overflow-wrap:break-word;
}
.wheel-fatia-label span.virado{ transform: rotate(180deg); }
.wheel-divisor{
  position:absolute; left: calc(50% - 1px); top:0; width:2px; height:50%;
  background: rgba(255,255,255,0.4); transform-origin: center bottom;
  pointer-events:none;
}
.wheel-centro{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 26%; aspect-ratio:1; border-radius:50%;
  background: var(--roxo-fundo-2); border: 4px solid var(--amarelo);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  z-index:4;
}

.btn-girar{
  margin-top: 14px; padding: 16px 40px; border-radius: 999px;
  font-size: 1.15rem; font-weight:700; color:#3a1052;
  background: linear-gradient(135deg, var(--amarelo), var(--laranja));
  box-shadow: 0 8px 24px rgba(255,122,26,0.45);
  transition: transform .12s ease;
}
.btn-girar:active{ transform: scale(0.95); }
.btn-girar:disabled{ opacity:.6; }

.vs-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; font-weight:800;
  background: linear-gradient(135deg, var(--coral), var(--roxo));
  margin: 6px auto; font-size:1rem;
}

.duelo-round-titulo{ font-weight:700; margin: 4px 0 12px; opacity:.9; text-align:center; }
.duelo-par{ display:flex; flex-direction:column; gap:12px; align-items:center; }

.duelo-placar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom: 14px; }
.duelo-placar-item{
  font-size:.78rem; font-weight:700; padding: 6px 12px; border-radius: 999px;
  background: var(--card-bg-forte); border:1px solid var(--borda);
}

.lista-selecao-duelo{
  display:flex; flex-direction:column; gap:10px; max-height: 340px; overflow-y:auto;
  margin-bottom: 16px; padding-right:2px;
}
.selecao-duelo-item{
  display:flex; align-items:center; gap:12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--card-bg); border: 1px solid var(--borda); color: var(--branco); text-align:left;
  position:relative;
}
.selecao-duelo-item img{ width:44px; height:64px; object-fit:cover; border-radius:8px; }
.selecao-duelo-poster-vazio{
  width:44px; height:64px; border-radius:8px; background: linear-gradient(160deg,var(--roxo),var(--rosa));
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.selecao-duelo-item span:not(.selecao-duelo-check){ font-size:.88rem; font-weight:600; flex:1; }
.selecao-duelo-check{
  width:24px; height:24px; border-radius:50%; border:2px solid var(--borda);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; opacity:0;
}
.selecao-duelo-item.selecionado{ border-color: var(--amarelo); background: rgba(255,210,63,0.12); }
.selecao-duelo-item.selecionado .selecao-duelo-check{
  opacity:1; background: linear-gradient(135deg, var(--amarelo), var(--laranja)); border-color:transparent; color:#3a1052; font-weight:800;
}

/* ---------------- Cards de filme ---------------- */
.filme-card-grande{
  background: var(--card-bg-forte); border:1px solid var(--borda);
  border-radius: var(--radius); padding: 16px; text-align:left;
  display:flex; gap:14px; width:100%; max-width: 420px; margin: 0 auto;
  box-shadow: var(--sombra); animation: aparecer .35s ease;
}
.filme-card-grande.selecionavel{ transition: transform .12s ease, box-shadow .2s ease; }
.filme-card-grande.selecionavel:active{ transform: scale(0.96); }
.filme-card-grande.vencedor{
  border: 2px solid var(--amarelo);
  box-shadow: 0 0 0 3px rgba(255,210,63,0.4), var(--sombra);
}
.filme-poster{
  width: 78px; min-width:78px; height: 112px; border-radius: 12px;
  background: linear-gradient(160deg, var(--roxo), var(--rosa));
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  object-fit:cover; overflow:hidden;
}
.filme-info{ flex:1; min-width:0; }
.filme-info h3{ margin:0 0 4px; font-size:1.05rem; line-height:1.2; }
.badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.badge{ font-size:.7rem; padding:3px 9px; border-radius:999px; background: rgba(255,255,255,0.12); }
.badge-plataforma{ background: linear-gradient(135deg, var(--roxo), var(--roxo-2)); }
.badge-genero{ background: linear-gradient(135deg, var(--rosa), var(--coral)); }
.estrelas{ font-size:.8rem; margin-bottom:4px; letter-spacing:1px; }
.filme-sinopse{ font-size:.78rem; opacity:.8; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.resultado-wrap{ margin-top: 14px; }
.resultado-titulo{ font-size:1.3rem; margin: 8px 0 12px; }
.acoes-resultado{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; justify-content:center; }

.btn-primario{
  background: linear-gradient(135deg, var(--rosa), var(--roxo));
  color:#fff; padding: 12px 22px; border-radius: 999px; font-weight:700; font-size:.95rem;
  box-shadow: 0 6px 18px rgba(139,63,247,0.4);
}
.btn-secundario{
  background: var(--card-bg-forte); border:1px solid var(--borda); color:var(--branco);
  padding: 12px 22px; border-radius: 999px; font-weight:600; font-size:.95rem;
}
.btn-block{ width:100%; margin-top: 10px; }
.btn-primario:disabled, .btn-secundario:disabled{ opacity:.7; }

.spinner{
  display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px;
  border: 2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%;
  animation: girar-spinner .7s linear infinite;
}
@keyframes girar-spinner{ to{ transform: rotate(360deg); } }

/* ---------------- Lista de filmes (aba Filmes) ---------------- */
.busca-bar{ display:flex; gap:8px; margin-bottom: 12px; }
.busca-bar input{
  flex:1; padding: 12px 16px; border-radius: 999px; border:1px solid var(--borda);
  background: var(--card-bg); color: var(--branco); font-size:.9rem;
}
.busca-bar input::placeholder{ color: rgba(255,255,255,0.5); }
.btn-fab-inline{
  background: linear-gradient(135deg, var(--laranja), var(--amarelo));
  color:#3a1052; font-weight:700; padding: 10px 16px; border-radius: 999px; font-size:.85rem; white-space:nowrap;
}

.lista-filmes{ display:flex; flex-direction:column; gap:12px; }
.filme-item{
  background: var(--card-bg); border:1px solid var(--borda); border-radius: var(--radius-sm);
  padding: 12px; display:flex; gap:12px; align-items:flex-start;
}
.filme-item .filme-poster{ width:60px; height:86px; font-size:1.4rem; cursor:pointer; }
.filme-sinopse-completa{ font-size:.85rem; line-height:1.55; margin: 12px 0; opacity:.9; }
.link-trailer-grande{
  display:block; text-align:center; text-decoration:none; margin-top: 6px;
}
.filme-item-acoes{ display:flex; flex-direction:column; gap:6px; }
.mini-btn{
  width:32px; height:32px; border-radius:50%; background: var(--card-bg-forte);
  border:1px solid var(--borda); font-size:.9rem; display:flex; align-items:center; justify-content:center;
}
.filme-item.assistido{ opacity:.55; }
.filme-item.assistido .filme-poster{ filter: grayscale(0.6); }

.estado-vazio{ text-align:center; padding: 50px 20px; opacity:.8; }
.estado-emoji{ font-size:2.4rem; display:block; margin-bottom:10px; }

/* ---------------- Histórico ---------------- */
.lista-historico{ display:flex; flex-direction:column; gap:10px; }
.historico-item{
  background: var(--card-bg); border:1px solid var(--borda); border-radius: var(--radius-sm);
  padding: 12px 14px; display:flex; gap:10px; align-items:center; cursor:pointer;
  transition: background .15s ease;
}
.historico-item:active{ background: var(--card-bg-forte); }
.historico-emoji{ font-size:1.4rem; }
.historico-texto{ font-size:.85rem; flex:1; min-width:0; }
.historico-texto b{ display:inline; font-size:.95rem; }
.historico-data{ font-size:.7rem; opacity:.6; margin-top:2px; }
.historico-seta{ font-size:1.3rem; opacity:.4; }
.badge-nota-casal{
  display:inline-block; font-size:.7rem; font-weight:700; margin-left:6px;
  background: linear-gradient(135deg, var(--amarelo), var(--laranja)); color:#3a1052;
  padding: 2px 8px; border-radius: 999px;
}

/* ---------------- Bottom nav ---------------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  max-width:520px; margin:0 auto;
  display:flex; background: rgba(26,11,46,0.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--borda);
  padding: 8px 8px calc(env(safe-area-inset-bottom,0px) + 8px);
  z-index: 20;
}
.nav-item{
  flex:1; background:none; color: rgba(255,255,255,0.55);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding: 6px 0; font-size:.72rem; border-radius: 14px; font-weight:600;
}
.nav-item.ativo{ color: var(--branco); background: rgba(255,255,255,0.08); }
.nav-emoji{ font-size:1.3rem; }

/* ---------------- Modais ---------------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(10,4,20,0.7); backdrop-filter: blur(4px);
  display:flex; align-items:flex-end; justify-content:center; z-index:50;
  animation: aparecer .2s ease;
}
.modal-card{
  width:100%; max-width:520px; max-height: 88vh; overflow-y:auto;
  background: linear-gradient(180deg, #2d1444, #1a0b2e);
  border: 1px solid var(--borda); border-radius: 24px 24px 0 0;
  padding: 20px 20px calc(env(safe-area-inset-bottom,0px) + 24px);
}
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.modal-header h2{ font-size:1.15rem; margin:0; }

#form-filme label, #modal-config label{
  display:block; margin-bottom: 12px; font-size:.82rem; opacity:.85;
}
.opcional{ opacity:.6; font-size:.72rem; }
#form-filme input, #form-filme textarea, #modal-config input{
  width:100%; margin-top:6px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--card-bg); color: var(--branco); font-size:.92rem;
}
#form-filme input:focus, #form-filme textarea:focus{ outline:2px solid var(--rosa); }

.estrelas-input{ display:flex; gap:6px; font-size:1.5rem; margin-top:6px; cursor:pointer; }
.estrelas-input span{ opacity:.3; transition: opacity .1s ease, transform .1s ease; }
.estrelas-input span.ativa{ opacity:1; transform: scale(1.1); }

/* ---------------- Busca automática TMDB ---------------- */
.busca-tmdb{ display:flex; gap:8px; margin-bottom: 10px; }
.busca-tmdb input{
  flex:1; padding: 11px 14px; border-radius: 999px; border:1px solid var(--borda);
  background: var(--card-bg); color: var(--branco); font-size:.88rem;
}
.busca-tmdb-resultados{
  display:flex; flex-direction:column; gap:8px; margin-bottom: 14px;
  max-height: 260px; overflow-y:auto; padding-right:2px;
}
.busca-tmdb-item{
  display:flex; gap:10px; align-items:center; padding:8px; border-radius: 12px;
  background: var(--card-bg); border:1px solid var(--borda); text-align:left; color:var(--branco);
}
.busca-tmdb-item img{ width:40px; height:58px; object-fit:cover; border-radius:6px; background: var(--roxo); }
.busca-tmdb-item .sem-poster{ width:40px; height:58px; border-radius:6px; background: linear-gradient(160deg,var(--roxo),var(--rosa)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.busca-tmdb-item span{ font-size:.85rem; }
.busca-tmdb-item small{ display:block; opacity:.6; font-size:.72rem; }

.detalhe-tmdb-topo{ display:flex; gap:14px; margin-bottom: 14px; }
.detalhe-tmdb-poster{ width:100px; min-width:100px; height:150px; border-radius:12px; object-fit:cover; background: linear-gradient(160deg,var(--roxo),var(--rosa)); }
.detalhe-tmdb-poster.sem-poster{ display:flex; align-items:center; justify-content:center; font-size:2rem; }
.detalhe-tmdb-topo h3{ margin: 0 0 4px; font-size:1.15rem; }
.detalhe-tmdb-tagline{ font-style:italic; opacity:.75; font-size:.82rem; margin: 0 0 8px; }
.detalhe-tmdb-trailer{ margin: 14px 0; border-radius: 12px; overflow:hidden; }
.detalhe-tmdb-trailer iframe{ width:100%; aspect-ratio:16/9; height:auto; display:block; border:0; }

.filme-meta-extra{ display:flex; flex-wrap:wrap; gap:6px; font-size:.7rem; opacity:.75; margin: 2px 0 6px; }
.filme-meta-extra span{ background: rgba(255,255,255,0.08); padding: 2px 8px; border-radius:999px; }
.link-trailer{ color: var(--amarelo); font-weight:700; text-decoration:none; font-size:.75rem; }

/* ---------------- Quiz ---------------- */
.quiz-intro{ text-align:center; padding: 6px 4px 4px; }
.quiz-pergunta{ margin-bottom: 18px; }
.quiz-pergunta p{ font-weight:700; margin: 0 0 10px; font-size:.95rem; }
.quiz-opcoes{ display:flex; flex-direction:column; gap:8px; }
.quiz-opcao{
  text-align:left; padding: 12px 14px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--borda); color: var(--branco); font-size:.88rem;
}
.quiz-opcao.selecionada{ border-color: var(--rosa); background: rgba(255,46,136,0.18); font-weight:600; }
.quiz-opcao.correta{ border-color: var(--amarelo); background: rgba(255,210,63,0.22); font-weight:700; }
.quiz-opcao.errada{ border-color: var(--coral); background: rgba(255,77,109,0.22); }
.quiz-progresso{ font-size:.75rem; opacity:.7; margin-bottom: 6px; }
.quiz-resultado-final{ text-align:center; padding: 10px 4px; }
.quiz-resultado-final .placar{ font-size:2.2rem; font-weight:800; margin: 8px 0; }

.nota-casal-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:8px; margin-top:18px; }
.nota-casal-btn{
  padding: 14px 0; border-radius: 12px; background: var(--card-bg-forte);
  border: 1px solid var(--borda); color: var(--branco); font-weight:700; font-size:1.05rem;
}
.nota-casal-btn:active{ transform: scale(0.9); background: linear-gradient(135deg, var(--rosa), var(--roxo)); }

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; bottom: 100px; left:50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--roxo), var(--rosa)); color:#fff;
  padding: 12px 20px; border-radius: 999px; font-size:.85rem; font-weight:600;
  box-shadow: var(--sombra); z-index: 60; animation: aparecer .25s ease;
  max-width: 90vw; text-align:center;
}

/* ---------------- Confete de fundo simples p/ transições ---------------- */
.girando{ pointer-events:none; }

::-webkit-scrollbar{ width:0; height:0; }