/* Girls Life: visual fofo de game (rosa da logo, contorno ameixa, brilho de bala, luzes e transições) */
:root {
  --pink: #ff5fa8; --pink2: #ff8cc6; --pink3: #ffd1e6; --pink4: #fff0f7; --hot: #e0457b;
  --plum: #5b1a4a; --plum2: #8a2c6f; --lilac: #b98cff; --lilac2: #e4d4ff; --peach: #ffc9a8;
  --mint: #57d6b0; --sun: #ffd45e; --sky: #7cc4ff; --red: #ff4d6d; --cream: #fff4f8;
  --ink: #4a1640; --muted: #9a6a8c; --card: #fffafd;
  --f-title: 'Cherry Bomb One', 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-ui: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-script: 'Pacifico', 'Brush Script MT', cursive;
  --back: cubic-bezier(0.34, 1.56, 0.64, 1); --out: cubic-bezier(0, 0, 0.2, 1); --in: cubic-bezier(0.4, 0, 1, 1);
  --r: 24px; --app-h: 100vh;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  font-family: var(--f-ui);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #ffc4df; color: var(--ink); overscroll-behavior: none; }
body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; font-weight: 500; }
button, input, textarea { font: inherit; color: inherit; }
img, canvas { display: block; }

/* ---------- fundo vivo ---------- */
#bgfx { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #fff3fa 0%, #ffd6ea 45%, #ffb6d8 100%); }
#bgfx::before { content: ''; position: absolute; inset: -50%; opacity: .5; background-image: radial-gradient(circle at 25% 25%, #fff 0 3px, transparent 4px), radial-gradient(circle at 75% 70%, #ffe3f1 0 5px, transparent 6px); background-size: 46px 46px, 70px 70px; animation: drift 40s linear infinite; }
#bgfx i { position: absolute; bottom: -40px; opacity: .6; animation: floatUp linear infinite; }
#bgfx i svg { filter: drop-shadow(0 2px 0 rgba(255,255,255,.6)); }
@keyframes drift { to { transform: translate(46px, 46px); } }
@keyframes floatUp { 0% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-55vh) rotate(8deg); } 100% { transform: translateY(-115vh) rotate(-8deg); opacity: 0; } }

#app { position: fixed; inset: 0; z-index: 1; height: var(--app-h); display: flex; justify-content: center; }
.scr { position: relative; width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; padding: calc(var(--sat) + 10px) 16px calc(var(--sab) + 12px); gap: 10px; overflow: hidden; }
.scr.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scr.out { animation: scrOut .2s var(--in) forwards; position: absolute; pointer-events: none; }
@keyframes scrOut { to { opacity: 0; transform: translateX(-24%) scale(.96); } }
.st { animation: rise .5s var(--back) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.9); } }
.pop { animation: popIn .45s var(--back) both; animation-delay: var(--d, 0ms); }
@keyframes popIn { from { transform: scale(.2); opacity: 0; } }
.grow { flex: 1; min-height: 0; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.center { text-align: center; align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.spacer { height: 4px; }
.small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ic { display: inline-flex; line-height: 0; flex: none; }

/* ---------- transição (íris de coração) ---------- */
#veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; }
#veil .veil-in { position: absolute; inset: 0; background: radial-gradient(circle at var(--x) var(--y), #ffb3d7 0%, #ff7fbf 45%, #e0457b 100%); clip-path: circle(0% at var(--x) var(--y)); }
#veil .veil-in::before { content: ''; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle, #fff 0 3px, transparent 4px); background-size: 34px 34px; }
#veil .veil-heart { position: absolute; left: var(--x); top: var(--y); width: 120px; height: 120px; margin: -60px 0 0 -60px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23fff" stroke="%235b1a4a" stroke-width="2" d="M16 27C6 20 3 15 3 10.5 3 6.9 5.9 4 9.4 4c2.7 0 5 1.6 6.6 4 1.6-2.4 3.9-4 6.6-4C26.1 4 29 6.9 29 10.5 29 15 26 20 16 27z"/></svg>') center/contain no-repeat; transform: scale(0); }
#veil.cover, #veil.uncover { visibility: visible; pointer-events: all; }
#veil.cover .veil-in { animation: irisIn .3s var(--in) forwards; }
#veil.cover .veil-heart { animation: heartIn .32s var(--back) .08s forwards; }
#veil.uncover .veil-in { clip-path: circle(150% at var(--x) var(--y)); animation: irisOut .38s var(--out) forwards; }
#veil.uncover .veil-heart { transform: scale(1); animation: heartOut .25s var(--in) forwards; }
@keyframes irisIn { to { clip-path: circle(150% at var(--x) var(--y)); } }
@keyframes irisOut { to { clip-path: circle(0% at var(--x) var(--y)); } }
@keyframes heartIn { to { transform: scale(1) rotate(-6deg); } }
@keyframes heartOut { to { transform: scale(1.8); opacity: 0; } }

/* ---------- textos ---------- */
.title { font-family: var(--f-title); font-weight: 400; font-size: clamp(27px, 7.6vw, 36px); line-height: 1.05; color: #fff; text-align: center; -webkit-text-stroke: 7px var(--plum); paint-order: stroke fill; letter-spacing: .3px; text-shadow: 0 4px 0 var(--plum), 0 8px 18px rgba(224,69,123,.35); }
.title.sm { font-size: 24px; -webkit-text-stroke-width: 6px; }
.script { font-family: var(--f-script); font-weight: 400; color: var(--hot); }
.sub { font-size: 16px; color: var(--plum2); font-weight: 600; text-align: center; }
.big { font-size: 20px; font-weight: 700; }
.lbl { font-family: var(--f-title); font-size: 14px; color: var(--plum2); letter-spacing: .5px; margin: 2px 4px; display: flex; align-items: center; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 99px; background: var(--plum); color: #fff; font-size: 13px; font-weight: 700; }
.tag.pink { background: linear-gradient(180deg, #ff8cc6, #ff5fa8); border: 2px solid var(--plum); }
.tag .ic svg { width: 16px; height: 16px; }

/* ---------- botões geleia ---------- */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 22px; border: 3px solid var(--plum); border-radius: 24px; cursor: pointer; font-family: var(--f-title); font-weight: 400; font-size: 22px; letter-spacing: .3px; color: #fff; background: linear-gradient(180deg, #ffa6d4 0%, #ff5fa8 55%, #ec3d8c 100%); box-shadow: 0 6px 0 var(--plum), inset 0 -4px 0 rgba(150, 20, 90, .25), inset 0 3px 0 rgba(255, 255, 255, .65); text-shadow: 0 2px 0 rgba(91, 26, 74, .55); transition: transform .2s var(--back), box-shadow .1s; overflow: hidden; white-space: nowrap; }
.btn::after { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 38%; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events: none; }
.btn:active { transform: translateY(4px) scale(.96); transition: transform .05s; box-shadow: 0 2px 0 var(--plum), inset 0 -2px 0 rgba(150,20,90,.25), inset 0 3px 0 rgba(255,255,255,.6); }
.btn[disabled] { filter: grayscale(.7) brightness(1.05); opacity: .55; pointer-events: none; }
.btn .ic svg { filter: drop-shadow(0 1px 0 rgba(91,26,74,.4)); }
.btn.lilac { background: linear-gradient(180deg, #e0ccff 0%, #a97cff 60%, #915ef2 100%); }
.btn.mint { background: linear-gradient(180deg, #b0f5df 0%, #45cfa5 60%, #2cb68c 100%); }
.btn.sun { background: linear-gradient(180deg, #fff3b3 0%, #ffcf4a 60%, #f5b82a 100%); color: var(--plum); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.btn.white { background: linear-gradient(180deg, #fff 0%, #ffeaf5 100%); color: var(--plum); text-shadow: none; }
.btn.sm { min-height: 44px; font-size: 17px; padding: 4px 14px; border-radius: 18px; box-shadow: 0 4px 0 var(--plum), inset 0 3px 0 rgba(255,255,255,.6); }
.btn.xs { min-height: 36px; font-size: 15px; padding: 2px 10px; border-radius: 14px; border-width: 2.5px; box-shadow: 0 3px 0 var(--plum), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.cta { animation: breathe 1.6s ease-in-out infinite; }
.btn.cta::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes breathe { 50% { transform: scale(1.03); } }
.icon-btn { width: 50px; height: 50px; min-height: 0; padding: 0; border-radius: 18px; }
.duo { display: flex; gap: 10px; } .duo > .btn { flex: 1; min-width: 0; padding: 8px 8px; font-size: 19px; }

/* ---------- cartões ---------- */
.card { background: var(--card); border: 3px solid var(--plum); border-radius: var(--r); box-shadow: 0 6px 0 rgba(91,26,74,.28); padding: 14px; }
.card.glass { background: rgba(255,250,253,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.speech { position: relative; background: #fff; border: 3px solid var(--plum); border-radius: 26px; padding: 14px 18px; font-size: 19px; font-weight: 600; line-height: 1.38; box-shadow: 0 6px 0 rgba(91,26,74,.28); }
.speech b { color: var(--hot); font-weight: 700; }

/* ---------- logo e home ---------- */
.logo { width: min(84%, 370px); margin: 0 auto; filter: drop-shadow(0 6px 0 rgba(91,26,74,.22)); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-1deg); } }
.corner { position: absolute; top: calc(var(--sat) + 10px); right: 14px; z-index: 5; display: flex; gap: 8px; }
.corner.l { right: auto; left: 14px; }

/* palco da boneca: pedestal, holofote, brilho */
.stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; }
.stage .spot { position: absolute; left: 50%; top: -10%; bottom: 0; width: 120%; transform: translateX(-50%); background: radial-gradient(60% 55% at 50% 100%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%), conic-gradient(from 180deg at 50% -8%, transparent 158deg, rgba(255,247,214,.55) 172deg, rgba(255,247,214,.55) 188deg, transparent 202deg); pointer-events: none; }
.stage .pedestal { position: absolute; bottom: 0; left: 50%; width: 62%; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, #ffd1e6 55%, rgba(255,140,198,.0) 100%); box-shadow: 0 0 30px rgba(255,140,198,.6); }
.stage canvas.doll { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(91,26,74,.18)); transition: transform .3s var(--back); }
.stage canvas.doll.bounce { animation: dollPop .45s var(--back); }
@keyframes dollPop { 30% { transform: scale(1.05, .96); } 60% { transform: scale(.98, 1.03); } }
.home-doll { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; }

/* ---------- fotos: polaroide (foto inteira, sem corte) ---------- */
.pola { position: relative; display: inline-flex; flex-direction: column; align-items: center; background: #fff; border: 3px solid var(--plum); border-radius: 14px; padding: 6px 6px 4px; box-shadow: 0 5px 0 rgba(91,26,74,.25); transform: rotate(var(--rot, -2deg)); flex: none; }
.pola .ph { position: relative; width: var(--w, 96px); height: calc(var(--w, 96px) * 1.15); border-radius: 9px; overflow: hidden; background: #ffe3f0; }
.pola .ph .bg { position: absolute; inset: -12px; background: center/cover; filter: blur(10px) saturate(1.2); opacity: .8; }
.pola .ph .fg { position: absolute; inset: 0; background: center/contain no-repeat; }
.pola .ph .ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-title); font-size: calc(var(--w, 96px) * .45); color: var(--plum2); }
.pola .cap { font-family: var(--f-script); font-size: calc(var(--w, 96px) * .17 + 6px); color: var(--plum); line-height: 1.5; max-width: calc(var(--w, 96px) + 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pola .badge { position: absolute; top: -10px; right: -10px; }
.pola.done::after { content: ''; position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--plum); background: var(--mint) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8 17 L14 23 L25 10" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/80% no-repeat; animation: popIn .4s var(--back); }
.pola.off { filter: grayscale(1); opacity: .6; }
.pola .crown { position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-10deg); animation: crownDrop .7s var(--back) both; }
@keyframes crownDrop { from { transform: translate(-50%, -60px) rotate(-30deg); opacity: 0; } }
.pola.glow { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--pink), 0 0 30px 8px rgba(255,95,168,.6); }
/* avatar pequeno: quadradinho fofo com a foto inteira */
.av { position: relative; width: 44px; height: 44px; border-radius: 14px; border: 2.5px solid var(--plum); background: #ffe3f0; flex: none; overflow: hidden; box-shadow: 0 3px 0 rgba(91,26,74,.22); }
.av .bg { position: absolute; inset: -8px; background: center/cover; filter: blur(6px); opacity: .85; }
.av .fg { position: absolute; inset: 0; background: center/contain no-repeat; }
.av .ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-title); color: var(--plum2); font-size: 20px; }
.av.sm { width: 34px; height: 34px; border-radius: 11px; } .av.sm .ini { font-size: 15px; }
.av.lg { width: 64px; height: 64px; border-radius: 18px; } .av.lg .ini { font-size: 28px; }
.av.done { outline: 3px solid var(--mint); outline-offset: 1px; }
.av.done::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; z-index: 2; border-radius: 50%; border: 2px solid #fff; background: var(--mint) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8 17 L14 23 L25 10" fill="none" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/85% no-repeat; }
.av.just { animation: hop .55s var(--back); }
.wcount { font-size: 14px; font-weight: 700; color: var(--muted); text-align: center; }
.av.off { filter: grayscale(1); opacity: .55; }
.av.ok { outline: 3px solid var(--mint); outline-offset: 1px; animation: hop .5s var(--back); }
.av.no { transform: rotate(-8deg); outline: 3px solid var(--red); outline-offset: 1px; }
.av.no::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; z-index: 2; border-radius: 50%; border: 2px solid #fff; background: var(--red) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10 10 L22 22 M22 10 L10 22" fill="none" stroke="white" stroke-width="5" stroke-linecap="round"/></svg>') center/85% no-repeat; }
.av.ok::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; z-index: 2; border-radius: 50%; border: 2px solid #fff; background: var(--mint) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8 17 L14 23 L25 10" fill="none" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/85% no-repeat; }
@keyframes hop { 40% { transform: translateY(-12px) scale(1.15, .9); } }
.avrow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.plist { display: flex; flex-direction: column; gap: 8px; }
.pl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 3px solid var(--plum); border-radius: 18px; box-shadow: 0 4px 0 rgba(91,26,74,.2); }
.pl .nm { flex: 1; font-weight: 700; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .pts { font-family: var(--f-title); color: var(--hot); font-size: 20px; display: flex; align-items: center; gap: 4px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 10px; justify-items: center; padding: 10px 0; }

/* ---------- campos ---------- */
.inp { width: 100%; padding: 12px 16px; border: 3px solid var(--plum); border-radius: 18px; background: #fff; font-size: 22px; font-weight: 600; outline: none; box-shadow: inset 0 3px 0 rgba(91,26,74,.08); -webkit-user-select: text; user-select: text; }
.inp.code { text-align: center; letter-spacing: 12px; text-transform: uppercase; font-family: var(--f-title); font-size: 38px; }
textarea.inp { font-size: 19px; resize: none; min-height: 120px; line-height: 1.35; }
.code-big { font-family: var(--f-title); font-size: 58px; letter-spacing: 10px; color: #fff; -webkit-text-stroke: 8px var(--plum); paint-order: stroke fill; text-shadow: 0 5px 0 var(--plum); text-align: center; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #fff; border: 3px solid var(--plum); border-radius: 18px; font-weight: 600; font-size: 17px; }
.toggle .row { gap: 8px; }
.sw { width: 58px; height: 34px; border-radius: 99px; background: #e5cfe0; border: 3px solid var(--plum); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--plum); transition: left .25s var(--back); }
.sw.on { background: var(--pink); } .sw.on::after { left: 26px; }
.stepper { display: flex; align-items: center; gap: 6px; } .stepper b { min-width: 52px; text-align: center; font-size: 17px; }

/* ---------- topo do jogo ---------- */
.hud { display: flex; align-items: center; gap: 8px; position: relative; z-index: 3; }
.hud .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.9); border: 3px solid var(--plum); border-radius: 18px; padding: 4px 10px 4px 4px; box-shadow: 0 4px 0 rgba(91,26,74,.2); }
.hud .who .t { min-width: 0; } .hud .who .t div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .who .t .s1 { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.1; } .hud .who .t .s2 { font-size: 16px; font-weight: 700; line-height: 1.2; }
.hud .score-btn.bump { animation: hop .5s var(--back); }
.timer { position: relative; width: 54px; height: 54px; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-title); font-size: 16px; }
.timer.hurry span { color: var(--red); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.18); } }

/* cena: cenário + vinheta rosada + bokeh */
.scene { position: absolute; inset: 0; z-index: -1; background: #ffd1e6 center/cover no-repeat; overflow: hidden; }
.scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(90,20,60,0) 55%, rgba(90,20,60,.38) 100%); }
.scene.dim::after { background: radial-gradient(ellipse at 50% 45%, rgba(255,240,248,.35) 30%, rgba(90,20,60,.4) 100%); }
.scene.blur { filter: blur(3px) saturate(1.1); transform: scale(1.05); }
.bokeh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bokeh span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); mix-blend-mode: screen; animation: bokeh linear infinite; }
@keyframes bokeh { from { transform: translateY(0); } to { transform: translateY(-120vh); } }

/* ---------- editor ---------- */
.banner { align-self: center; position: relative; z-index: 2; padding: 6px 18px; border-radius: 16px; background: linear-gradient(180deg, #fff, #ffe6f2); border: 3px solid var(--plum); box-shadow: 0 4px 0 rgba(91,26,74,.25); font-family: var(--f-title); font-size: 17px; color: var(--plum); text-align: center; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 5px 7px 3px; border: 3px solid var(--plum); border-radius: 16px; background: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 3px 0 rgba(91,26,74,.25); transition: transform .2s var(--back); }
.tab .ic svg { width: 30px; height: 30px; }
.tab.on { background: linear-gradient(180deg, #ffe0ef, #ff9fcf); transform: translateY(-3px); box-shadow: 0 6px 0 rgba(91,26,74,.25); }
.tab.has::after { content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); border: 2px solid var(--plum); }
.items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.item { position: relative; aspect-ratio: 1; border: 3px solid var(--plum); border-radius: 18px; background: radial-gradient(circle at 50% 35%, #fff 0%, #ffeaf4 100%) ; box-shadow: 0 4px 0 rgba(91,26,74,.22); padding: 0; overflow: hidden; transition: transform .2s var(--back); }
.item img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.item.none { display: grid; place-items: center; }
.item.on { border-color: var(--hot); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink), 0 4px 0 rgba(91,26,74,.22); transform: translateY(-2px) scale(1.03); }
.item.on::after { content: ''; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--plum); background: var(--pink) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 26C7 19.5 4.5 15 4.5 11c0-3.3 2.6-6 5.8-6 2.4 0 4.4 1.4 5.7 3.5C17.3 6.4 19.3 5 21.7 5c3.2 0 5.8 2.7 5.8 6 0 4-2.5 8.5-11.5 15z" fill="white"/></svg>') center/70% no-repeat; }
.colors { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 44px; align-items: center; }
.candy { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--plum); padding: 0; box-shadow: inset 0 -6px 0 rgba(0,0,0,.16), inset 0 4px 0 rgba(255,255,255,.5), 0 3px 0 rgba(91,26,74,.25); transition: transform .2s var(--back); flex: none; }
.candy::after { content: ''; position: absolute; left: 6px; top: 5px; width: 10px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75); transform: rotate(-25deg); }
.candy.on { transform: scale(1.22); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--hot), inset 0 -6px 0 rgba(0,0,0,.16); }
.candy.none { background: repeating-linear-gradient(45deg, #fff 0 6px, #f3dbe8 6px 12px) !important; }
.candy.orig::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--plum2); opacity: .5; }
.colors.hscroll { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 10px 8px; scrollbar-width: none; } .colors.hscroll::-webkit-scrollbar { display: none; }
.cname { text-align: center; font-weight: 700; font-size: 14px; color: var(--plum2); min-height: 18px; }
.panel { position: relative; z-index: 2; background: rgba(255,255,255,.93); border: 3px solid var(--plum); border-radius: 24px; padding: 10px; box-shadow: 0 6px 0 rgba(91,26,74,.25); }
.opt { padding: 8px 12px; border: 3px solid var(--plum); border-radius: 16px; background: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 3px 0 rgba(91,26,74,.22); transition: transform .2s var(--back); }
.opt.on { background: linear-gradient(180deg, #ffe0ef, #ff9fcf); transform: translateY(-2px); }

/* espelho de penteadeira (maquiagem / cabelo) */
.mirror { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mirror .frame { position: relative; height: 100%; max-height: 420px; aspect-ratio: .82; border-radius: 48% 48% 42% 42% / 40% 40% 36% 36%; padding: 16px; background: linear-gradient(145deg, #ffe7a8, #e8b84a 40%, #fff1c2 60%, #d9a43a); border: 3px solid var(--plum); box-shadow: 0 8px 0 rgba(91,26,74,.25), 0 0 40px rgba(255,212,94,.45); }
.mirror .glass { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; border: 3px solid var(--plum); background: radial-gradient(circle at 50% 30%, #fff, #ffe3f0); }
.mirror canvas { width: 100%; height: 100%; object-fit: cover; }
.mirror .glass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.35) 0 18%, transparent 19% 32%, rgba(255,255,255,.18) 33% 38%, transparent 39%); pointer-events: none; }
.bulbs { position: absolute; inset: -4px; pointer-events: none; }
.bulbs i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #fff3b0 50%, #ffd45e); border: 2px solid var(--plum); box-shadow: 0 0 12px 4px rgba(255,236,150,.85); animation: bulb 1.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes bulb { 50% { box-shadow: 0 0 4px 1px rgba(255,236,150,.5); } }
.tool { position: absolute; z-index: 5; pointer-events: none; width: 64px; height: 64px; margin: -32px; transition: left .35s var(--back), top .35s var(--back); filter: drop-shadow(0 6px 6px rgba(91,26,74,.3)); }
.tool .ic svg { width: 64px; height: 64px; }
.tool.wiggle { animation: wiggle .6s ease-in-out; }
@keyframes wiggle { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-14px,4px) rotate(-12deg); } 50% { transform: translate(12px,-2px) rotate(10deg); } 75% { transform: translate(-8px,3px) rotate(-6deg); } }
.shelf { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: none; } .shelf::-webkit-scrollbar { display: none; }
.prod { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 16px; border: 3px solid transparent; transition: transform .25s var(--back); background: none; }
.prod svg { width: 46px; height: 58px; }
.prod span { font-size: 11px; font-weight: 700; color: var(--plum2); white-space: nowrap; }
.prod.on { transform: translateY(-8px) scale(1.1); border-color: var(--pink); background: rgba(255,255,255,.8); }

/* salão de unhas */
.salon { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.salon .towel { position: absolute; inset: 6% 4%; border-radius: 40px; background: repeating-linear-gradient(90deg, #ffe0ef 0 14px, #fff 14px 28px); border: 3px solid var(--plum); box-shadow: 0 6px 0 rgba(91,26,74,.2); }
.salon canvas { position: relative; max-width: 88%; max-height: 90%; filter: drop-shadow(0 8px 6px rgba(91,26,74,.2)); }

/* ---------- visual novel ---------- */
.vn { position: relative; flex: 1; min-height: 0; }
.vn .actor { position: absolute; bottom: 0; transition: transform .45s var(--back), filter .3s, opacity .3s; }
.vn .actor.dim { filter: brightness(.6) saturate(.8); transform: scale(.96); }
.vn .actor.npc { right: -4%; width: 62%; animation: slideL .55s var(--back) both; }
.vn .actor.npc img { width: 100%; filter: drop-shadow(0 8px 0 rgba(91,26,74,.18)); }
.vn .actor.star { left: 0; height: 100%; display: flex; align-items: flex-end; animation: slideR .55s var(--back) both; }
.vn .actor.star canvas { height: 100%; width: auto; }
.vn .actor.solo { left: 50%; transform: translateX(-50%); }
.vn .actor.friend { right: 6%; bottom: 12%; }
@keyframes slideL { from { transform: translateX(60%); opacity: 0; } }
@keyframes slideR { from { transform: translateX(-60%); opacity: 0; } }
.dbox { position: relative; z-index: 3; background: rgba(255,255,255,.96); border: 3px solid var(--plum); border-radius: 26px; padding: 22px 18px 14px; min-height: 120px; box-shadow: 0 6px 0 rgba(91,26,74,.28); font-size: 19px; font-weight: 600; line-height: 1.42; }
.dbox .who { position: absolute; top: -18px; left: 16px; padding: 3px 14px; border-radius: 14px; border: 3px solid var(--plum); background: var(--c, #ff8cc6); font-family: var(--f-title); font-size: 16px; color: #fff; text-shadow: 0 1px 0 var(--plum); -webkit-text-stroke: 0; }
.dbox b { color: var(--hot); }
.dbox .more { position: absolute; right: 14px; bottom: 6px; animation: nudge .9s ease-in-out infinite; opacity: 0; }
.dbox.typed .more { opacity: 1; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.locard { align-self: center; display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; background: var(--plum); color: #fff; font-family: var(--f-title); font-size: 16px; animation: popIn .5s var(--back); }

/* ---------- escolhas e votos ---------- */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border: 3px solid var(--plum); border-radius: 22px; background: #fff; font-size: 18px; font-weight: 600; line-height: 1.22; box-shadow: 0 5px 0 rgba(91,26,74,.25); overflow: visible; transition: transform .3s var(--back), opacity .3s, filter .3s; }
.choice .let { flex: none; width: 38px; height: 38px; border-radius: 13px; border: 3px solid var(--plum); display: grid; place-items: center; font-family: var(--f-title); font-size: 19px; color: #fff; text-shadow: 0 1px 0 var(--plum); background: var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), inset 0 3px 0 rgba(255,255,255,.45); }
.choice .tx { flex: 1; }
.choice.mine { background: linear-gradient(180deg, #fff, #ffe8f3); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 5px 0 rgba(91,26,74,.25); transform: scale(1.02); }
.choice.fade { opacity: .45; filter: grayscale(.4); transform: scale(.97); }
.choice.star { transform: scale(1.05); box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--sun), 0 0 34px 8px rgba(255,212,94,.7); z-index: 2; }
.choice .voters { position: absolute; left: 56px; bottom: -17px; display: flex; gap: 3px; z-index: 4; }
.choices.res { gap: 24px; padding-bottom: 8px; }
.choice.hv { padding-bottom: 26px; transition: padding .35s var(--back), transform .3s var(--back), opacity .3s, filter .3s; }
.choice .voters .av { animation: landHop .45s var(--back) both; animation-delay: var(--d, 0ms); }
@keyframes landHop { from { transform: translateY(-60px) scale(.6); opacity: 0; } 70% { transform: translateY(3px) scale(1.15, .85); } }
.choice .pick { position: absolute; right: -8px; top: -18px; animation: popIn .5s var(--back) both; }
.choice.star { margin-bottom: 6px; }
.vote-bar { height: 10px; border-radius: 99px; background: #f3dbe8; overflow: hidden; border: 2px solid var(--plum); }
.vote-bar i { display: block; height: 100%; background: var(--c, var(--pink)); width: 0; transition: width 1s var(--out); }
.stamp { position: absolute; z-index: 6; padding: 4px 14px; border: 4px solid currentColor; border-radius: 12px; font-family: var(--f-title); font-size: 26px; transform: rotate(-12deg); animation: stamp .35s var(--in) both; background: rgba(255,255,255,.9); }
.stamp.ok { color: #22a77c; } .stamp.no { color: var(--red); }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.6); opacity: 0; } }
.hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rays { position: absolute; width: 360px; height: 360px; left: 50%; top: 50%; margin: -180px; z-index: -1; background: repeating-conic-gradient(rgba(255,240,170,.55) 0 10deg, transparent 10deg 20deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* WhatsApp de mentirinha */
.phone { background: #efe7de; border: 4px solid var(--plum); border-radius: 30px; overflow: hidden; box-shadow: 0 6px 0 rgba(91,26,74,.25); display: flex; flex-direction: column; }
.phone .bar { background: #0b6b5c; color: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-weight: 700; }
.phone .bar .pic { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: #ffd1e6 center top/cover; overflow: hidden; display: grid; place-items: center; font-family: var(--f-title); color: var(--plum); }
.phone .msgs { padding: 12px; display: flex; flex-direction: column; gap: 6px; background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px); background-size: 14px 14px; min-height: 140px; }
.bub { max-width: 82%; padding: 6px 10px 4px; border-radius: 12px; font-size: 16px; line-height: 1.25; background: #fff; align-self: flex-start; box-shadow: 0 1px 0 rgba(0,0,0,.1); animation: bubIn .35s var(--back) both; }
.bub.me { background: #d8fdd2; align-self: flex-end; }
.bub.big { font-size: 66px; background: transparent; box-shadow: none; padding: 0; }
.bub small { display: block; text-align: right; font-size: 11px; color: #7a8a86; }
.bub small .tick { color: #34b7f1; font-weight: 700; }
.bub.typing { display: flex; gap: 4px; padding: 10px 12px; } .bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa; animation: tdot 1s infinite; } .bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes bubIn { from { transform: scale(.4); opacity: 0; } }
.stickers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sticker { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 3px solid var(--plum); border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(91,26,74,.22); font-weight: 700; font-size: 15px; transition: transform .2s var(--back); }
.sticker .e { font-size: 34px; line-height: 1; }
.sticker.on { background: linear-gradient(180deg, #fff, #ffe0ef); transform: scale(1.05); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink); }

/* respostas escritas: cartinhas */
.letter { position: relative; background: #fff; border: 3px solid var(--plum); border-radius: 20px; padding: 18px 16px 14px; box-shadow: 0 5px 0 rgba(91,26,74,.25); font-size: 20px; font-weight: 600; line-height: 1.35; text-align: center; }
.letter::before { content: ''; position: absolute; top: -14px; left: 50%; width: 30px; height: 30px; margin-left: -15px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23ff5fa8" stroke="%235b1a4a" stroke-width="2.4" d="M16 27C6 20 3 15 3 10.5 3 6.9 5.9 4 9.4 4c2.7 0 5 1.6 6.6 4 1.6-2.4 3.9-4 6.6-4C26.1 4 29 6.9 29 10.5 29 15 26 20 16 27z"/></svg>') center/contain no-repeat; }
.letter.flip { animation: flipIn .5s var(--out) both; }
@keyframes flipIn { from { transform: rotateY(90deg) scale(.9); opacity: 0; } }
.letters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.letters { margin-top: 12px; }
.letters .letter { font-size: 17px; padding: 20px 10px 14px; min-height: 120px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff 0%, #fff4fa 100%); }
.letters .letter.pick { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--pink), 0 0 28px 6px rgba(255,95,168,.5); transform: scale(1.04); }
.dots { display: flex; gap: 6px; justify-content: center; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--plum); } .dots i.on { background: var(--pink); transform: scale(1.2); }

/* detector de mentira */
.gauge { position: relative; width: 260px; height: 150px; margin: 0 auto; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge .needle { transform-origin: 130px 130px; transition: transform .25s ease-in-out; }
.lamp { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--plum); background: #ddd; }
.lamp.g { background: #3ee08f; box-shadow: 0 0 20px 6px rgba(62,224,143,.7); } .lamp.r { background: #ff4d6d; box-shadow: 0 0 20px 6px rgba(255,77,109,.7); }

/* ---------- desfile ---------- */
.runway { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #6b1e57 0%, #2a0a26 70%); }
.runway .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #4a1240, #2a0a26); }
.runway .floor::before { content: ''; position: absolute; left: 30%; right: 30%; top: 0; bottom: 0; background: linear-gradient(180deg, #ff8cc6, #b0306f); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); opacity: .55; }
.runway .beam { position: absolute; top: -10%; width: 60%; height: 120%; background: conic-gradient(from 180deg at 50% 0%, transparent 165deg, rgba(255,240,200,.32) 175deg, rgba(255,240,200,.32) 185deg, transparent 195deg); transform-origin: 50% 0; }
.runway .beam.l { left: -5%; animation: sweepL 2.4s ease-in-out infinite alternate; } .runway .beam.r { right: -5%; animation: sweepR 2.4s ease-in-out infinite alternate; }
@keyframes sweepL { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
@keyframes sweepR { from { transform: rotate(18deg); } to { transform: rotate(-14deg); } }
.runway .glow { position: absolute; left: 50%; bottom: 8%; width: 70%; height: 60px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,210,.8), transparent); }
.curtain { position: absolute; top: 0; bottom: 0; width: 52%; z-index: 4; background: repeating-linear-gradient(90deg, #b8205c 0 18px, #8e1546 18px 30px, #c8326c 30px 40px); box-shadow: inset 0 -30px 40px rgba(0,0,0,.35); pointer-events: none; }
.curtain.l { left: 0; border-right: 4px solid var(--plum); animation: curL .55s var(--back) .1s forwards; }
.curtain.r { right: 0; border-left: 4px solid var(--plum); animation: curR .55s var(--back) .1s forwards; }
@keyframes curL { to { transform: translateX(-100%); } } @keyframes curR { to { transform: translateX(100%); } }
.catwalk { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; }
.catwalk canvas { height: 100%; width: auto; max-width: 100%; animation: walkIn 1.4s var(--out) .45s both, silhouette 1.9s linear .45s both; }
@keyframes walkIn { from { transform: scale(.62) translateY(-4%); } }
@keyframes silhouette { 0%, 55% { filter: brightness(0) drop-shadow(0 0 12px rgba(255,180,220,.8)); } 100% { filter: brightness(1) drop-shadow(0 8px 6px rgba(0,0,0,.35)); } }
.nameplate { align-self: center; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 99px; background: #fff; border: 3px solid var(--plum); font-weight: 700; font-size: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.3); animation: rise .5s var(--back) 1.6s both; }
.bigbanner { position: absolute; left: 50%; top: 30%; z-index: 6; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; font-family: var(--f-title); font-size: 34px; color: #fff; -webkit-text-stroke: 7px var(--plum); paint-order: stroke fill; text-shadow: 0 5px 0 var(--plum), 0 0 30px rgba(255,212,94,.9); animation: bannerIn 2.4s var(--back) both; pointer-events: none; }
@keyframes bannerIn { 0% { transform: translateX(-50%) rotate(-4deg) scale(2.6); opacity: 0; } 15% { transform: translateX(-50%) rotate(-4deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) rotate(-4deg) scale(1.05); } }
.lineup { display: flex; gap: 2px; justify-content: center; align-items: flex-end; flex: 1; min-height: 0; }
.lineup .dl { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; position: relative; }
.lineup .dl canvas { flex: 1; min-height: 0; width: 170%; margin: 0 -35%; object-fit: contain; object-position: center bottom; }
.lineup .dl > :not(canvas) { position: relative; z-index: 2; }
.lineup .dl.real canvas { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #ffd45e); }
.lineup .pct { font-family: var(--f-title); font-size: 18px; color: #fff; -webkit-text-stroke: 4px var(--plum); paint-order: stroke fill; }
.lineup .pct.pop { animation: popIn .35s var(--back); }
.lineup .bar { width: 80%; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; } .lineup .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd45e, #ff5fa8); transition: width 1.1s var(--out); }
.lineup .crown { margin-bottom: -6px; animation: crownDrop2 .8s var(--back) both; }
@keyframes crownDrop2 { from { transform: translateY(-120px) rotate(-30deg); opacity: 0; } }
.realtag { font-family: var(--f-title); font-size: 13px; padding: 2px 10px; border-radius: 99px; background: var(--sun); border: 2px solid var(--plum); color: var(--plum); }

/* pódio */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 30px; }
.podium .pd { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium .block { width: 92px; border: 3px solid var(--plum); border-radius: 14px 14px 6px 6px; display: grid; place-items: center; font-family: var(--f-title); font-size: 30px; color: #fff; -webkit-text-stroke: 5px var(--plum); paint-order: stroke fill; box-shadow: inset 0 6px 0 rgba(255,255,255,.4); animation: rise .6s var(--back) both; animation-delay: var(--d); }
.podium .p1 .block { height: 120px; background: linear-gradient(180deg, #ffe48a, #f5b82a); } .podium .p2 .block { height: 86px; background: linear-gradient(180deg, #e9e4ff, #b9a7e8); } .podium .p3 .block { height: 64px; background: linear-gradient(180deg, #ffd3b8, #e8a07a); }

/* roleta */
.wheel-wrap { position: relative; width: min(90vw, 390px); aspect-ratio: 1; margin: 0 auto; }
.wheel-wrap canvas { width: 100%; height: 100%; }
.wheel-wrap .pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 4px 0 var(--plum)); animation: pinTick .12s ease-in-out infinite alternate; }
.wheel-wrap .pin svg { width: 58px; height: 58px; display: block; }
@keyframes pinTick { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
.wheel-wrap .pin { transform-origin: 50% 20%; }
.wheel-wrap.stop .pin { animation: pinWin .6s var(--back) both; }
@keyframes pinWin { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) translateY(6px) scale(1.25, .85); } 100% { transform: translateX(-50%) scale(1.1); } }

/* fotos do perfil */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ph-slot { position: relative; aspect-ratio: .85; border: 3px dashed var(--plum2); border-radius: 22px; background: rgba(255,255,255,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 700; padding: 0; overflow: hidden; }
.ph-slot.has { border-style: solid; border-color: var(--plum); background: #fff; box-shadow: 0 5px 0 rgba(91,26,74,.25); }
.ph-slot .bg { position: absolute; inset: -10px; background: center/cover; filter: blur(10px); opacity: .8; }
.ph-slot .fg { position: absolute; inset: 0 0 26px; background: center/contain no-repeat; }
.ph-slot .k { position: absolute; bottom: 4px; left: 6px; right: 6px; background: rgba(255,255,255,.92); border: 2px solid var(--plum); border-radius: 12px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* placar / janelas */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(91,26,74,.45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .2s; }
.overlay .card { width: 100%; max-width: 420px; max-height: 86%; overflow-y: auto; animation: popIn .35s var(--back); }
@keyframes fadeIn { from { opacity: 0; } }

#toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 90px); transform: translateX(-50%) translateY(20px); z-index: 95; background: var(--plum); color: #fff; padding: 10px 18px; border-radius: 18px; font-weight: 600; opacity: 0; transition: .25s; pointer-events: none; text-align: center; max-width: 90%; }
#toast.on { opacity: 1; transform: translateX(-50%); }
#land { display: none; }
@media (orientation: landscape) and (max-height: 500px) { #land { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99; background: var(--pink2); color: #fff; font-family: var(--f-title); font-size: 28px; -webkit-text-stroke: 5px var(--plum); paint-order: stroke fill; } }

#fxc { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }
.confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.flystar { position: fixed; z-index: 85; display: flex; align-items: center; gap: 2px; margin: -18px 0 0 -24px; font-family: var(--f-title); color: #fff; -webkit-text-stroke: 4px var(--plum); paint-order: stroke fill; font-size: 22px; transition: transform .85s cubic-bezier(.5,-0.4,.6,1), opacity .85s; pointer-events: none; }
.flystar span { color: var(--sun); font-size: 34px; }
.camflash { position: fixed; z-index: 75; width: 160px; height: 160px; margin: -80px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.8) 20%, transparent 65%); animation: flash .4s ease-out forwards; pointer-events: none; }
@keyframes flash { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.wait { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--plum2); font-size: 17px; text-align: center; }
.dotsx::after { content: '...'; display: inline-block; width: 18px; text-align: left; animation: dotsx 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dotsx { from { width: 0; } to { width: 18px; } }

/* movimento reduzido: só um fade curto (o ?motion=1 força as animações para teste) */
@media (prefers-reduced-motion: reduce) { html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }