*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1b1430;color:#fff;font-family:system-ui,"Segoe UI",Roboto,sans-serif}
body.noche{background:#0e0b1f}body.dia,body.voto{background:#2a3d6b}
#app{max-width:720px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom)}
h1{font-size:2.4rem;text-align:center;margin:18px 0 4px;letter-spacing:2px}.sub{text-align:center;opacity:.75;margin:0 0 18px}
input,button,select{font:inherit;font-size:1.05rem;border-radius:14px;border:0;min-height:48px;padding:10px 14px}
input{background:#fff;color:#222;width:100%}
button{background:#ffcf3f;color:#2a1a00;font-weight:700;cursor:pointer}button.sec{background:#3b3060;color:#fff}button:disabled{opacity:.4}
.card{background:#ffffff14;border-radius:18px;padding:14px;margin:8px 0}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}
.top{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;font-weight:700}
.timer{background:#0006;border-radius:20px;padding:6px 14px;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.pl{background:#ffffff10;border-radius:14px;padding:4px 2px 6px;text-align:center;font-size:.8rem;position:relative;border:3px solid transparent;cursor:pointer;min-height:96px}
.pl.sel{border-color:#ffcf3f;background:#ffcf3f33}.pl.dead{opacity:.35;filter:grayscale(1)}.pl .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .tag{font-size:.65rem;background:#000a;border-radius:8px;padding:1px 5px}.pl .vd{position:absolute;top:2px;right:4px}
.role{display:flex;gap:10px;align-items:center;border-radius:16px;padding:10px;margin:4px 0}
.t-pueblo{background:#2f7d4f}.t-impostores{background:#8f2338}.t-neutral{background:#7a4ab0}
.role b{font-size:1.1rem}.role small{display:block;opacity:.9}
#main{flex:1;overflow:auto;min-height:0}
.chat{display:flex;flex-direction:column;height:34dvh;min-height:150px}
.msgs{flex:1;overflow:auto;background:#0004;border-radius:14px;padding:8px;font-size:.95rem}
.msgs div{margin:3px 0;word-wrap:break-word}.msgs .sys{color:#ffe07a;font-style:italic}.msgs .imp{color:#ff8a9b}.msgs .dead{color:#aaa}
.chat form{display:flex;gap:6px;margin-top:6px}.chat input{flex:1}
.swatch{width:40px;height:40px;border-radius:50%;min-height:0;padding:0;border:3px solid transparent}.swatch.on{border-color:#fff}
.hats{display:flex;gap:6px;overflow-x:auto}.hats button{min-width:64px;padding:2px;background:#ffffff18}.hats button.on{background:#ffcf3f}
.cfg label{display:flex;justify-content:space-between;align-items:center;padding:6px 0;gap:8px}.cfg input{width:90px;min-height:40px}
.big{width:100%;font-size:1.2rem;min-height:56px;margin:6px 0}.err{color:#ff8a8a;text-align:center;min-height:1.2em}
.notes{font-size:.9rem;background:#0004;border-radius:10px;padding:6px 10px}
.win{text-align:center;font-size:1.6rem;font-weight:800;padding:10px}
.bounce svg{animation:bob 1.6s ease-in-out infinite;transform-origin:50% 100%}@keyframes bob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-4px) scaleY(1.03)}}
.banner{background:#ffcf3f;color:#2a1a00;font-weight:800;text-align:center;border-radius:14px;padding:12px;margin:6px 0}
.mini{min-height:34px;padding:2px 10px;font-size:.9rem}
.tabs button{min-height:48px}.rolepick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.rolepick label{background:#ffffff10;border-radius:12px;padding:6px 8px}.rolepick label span small{display:block;opacity:.7;font-size:.7rem}
.cfg input[type=checkbox]{width:28px;min-height:28px}.rolepick button{min-height:48px;font-size:.9rem}
.g-pueblo{border-left:4px solid #4bd17a}.g-doble{border-left:4px solid #e3b23c}.g-imp{border-left:4px solid #ff5470}.g-neutral{border-left:4px solid #a77bff}
.rc{background:#ffffff10;border-radius:12px;padding:8px 10px;margin:6px 0}.rc small{display:block;opacity:.9}.help p{line-height:1.4}.help h3{margin:14px 0 4px}
.t-imp{background:#8f2338}.t-neutral{background:#6a3fb0}

/* ===== Escritorio / tablet horizontal ===== */
@media (min-width:1024px){
 #app{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,420px);grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px;padding:10px 18px 14px}
 #app>h1,#app>.sub,#app>.card,#app>.big,#app>.err,#app>#hz{grid-column:1/-1;max-width:560px;width:100%;justify-self:center}
 .top{grid-column:1/-1;font-size:1.3rem;padding:6px 4px 12px}.top .timer{font-size:1.25rem;padding:8px 20px}
 #main{grid-column:1;grid-row:2}#app>.err{grid-row:3}
 .chat{grid-column:2;grid-row:2/4;height:auto;min-height:0}
 #main{display:flex;gap:16px}#main:not(:has(.dside)){display:block}
 .dside{flex:0 0 340px;overflow:auto;padding-right:4px}.dcen{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column}
 body.wide .dcen>.card{margin-top:0}
 .dcen .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.dcen .grid .pl{min-height:150px;font-size:1rem}
 .dcen .grid .pl svg,.dside .bounce svg{width:96px!important;height:auto!important}
 .mesa{position:relative;flex:1;min-height:520px;border-radius:50%/42%;margin:10px;background:radial-gradient(ellipse at center,#ffffff1c 0 30%,#ffffff08 31% 62%,transparent 63%)}
 body.noche .mesa{background:radial-gradient(ellipse at center,#7a6cff22 0 30%,#ffffff06 31% 62%,transparent 63%)}
 body.dia .mesa,body.voto .mesa{background:radial-gradient(ellipse at center,#ffd86b30 0 30%,#ffffff0c 31% 62%,transparent 63%)}
 .mesa .pl{position:absolute;transform:translate(-50%,-50%);width:clamp(96px,9vw,130px);min-height:0;padding:6px 4px 8px;font-size:1rem;background:#0003}
 .mesa .pl svg{width:clamp(68px,6.4vw,96px)!important;height:auto!important}
 .mesa .pl.sel{background:#ffcf3f44}
 .plaza{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:34%;pointer-events:none}
 .plaza .pi{font-size:4rem;line-height:1}.plaza .pt{font-size:1.5rem;font-weight:800;margin-top:6px;opacity:.9}.plaza .win{font-size:1.5rem;pointer-events:auto}
 .dside .role{padding:14px}.dside .role b{font-size:1.25rem}
 .help{max-width:900px;margin:0 auto}.help .rc{display:inline-block;width:calc(50% - 8px);margin:4px;vertical-align:top}
 .rolepick{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1024px) and (max-height:700px){.mesa{min-height:400px}.mesa .pl svg{width:58px!important}}
.sndbtn{flex:0 0 auto!important;min-width:44px}.top .timer{white-space:nowrap}
@media (min-width:1024px){.dside .bounce svg{width:130px!important;max-height:170px}.dside .bounce>*{flex:0 0 auto}}

.hbeans{display:flex;justify-content:center;gap:6px;margin:4px 0 2px}.hbeans span{display:block;animation:hb 2.4s ease-in-out infinite}@keyframes hb{50%{transform:translateY(-5px)}}
@media (min-width:1024px){body.home #app{display:block;max-width:560px;margin:0 auto}body.home .hbeans svg{width:64px;height:77px}}

/* ===== Aldea (original) ===== */
body{transition:background-color 1.2s}
.vplaza{display:flex;justify-content:center;margin:2px 0 -6px}.vplaza .fire{width:150px;height:auto}
.village{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px 6px}
.pl.house{background:none;border:0;padding:0 0 4px;min-height:0;contain:layout paint}
.pl.house .hs{position:relative;width:100%;max-width:120px;margin:0 auto;border-radius:16px;border:3px solid transparent;transition:border-color .2s,background .2s}
.pl.house.sel .hs{border-color:#ffcf3f;background:#ffcf3f30}.pl.house.sel{background:none}
.hsvg{display:block;width:100%;height:auto}
.pl.house .door{position:absolute;left:40%;bottom:2%;width:38%;transform:translateX(-50%);transition:opacity .6s,transform .6s}
.pl.house .door svg{width:100%!important;height:auto!important;display:block}
.hsvg .win{fill:#a8d4f0;transition:fill 1.2s}.hsvg .lamp{fill:#c9b07a;transition:fill 1.2s}.hsvg .glow{fill:#ffd36b;opacity:0;transition:opacity 1.2s}
.hsvg .smoke{fill:#ffffff55;animation:smk 3s ease-in-out infinite}@keyframes smk{50%{transform:translateY(-3px);opacity:.4}}
body.noche .hsvg .win,body.fxnight .hsvg .win{fill:#ffd36b}body.noche .hsvg .lamp,body.fxnight .hsvg .lamp{fill:#fff2b0}body.noche .hsvg .glow,body.fxnight .hsvg .glow{opacity:.25}
body.noche .pl.house .door,body.fxnight .pl.house .door{opacity:0;transform:translateX(-50%) scale(.6)}
body.fxnight{background-color:#0e0b1f!important}
.pl.house.dead{opacity:.6;filter:grayscale(.6)}.pl.house.dead .door{opacity:.85}
.fire .flame{transform-origin:60px 50px;animation:flk .5s ease-in-out infinite alternate}@keyframes flk{to{transform:scale(1.06,.92) skewX(3deg)}}
.fire .bulbs circle{animation:bl 2s infinite alternate}.fire .bulbs circle:nth-child(2n){animation-delay:1s}@keyframes bl{to{opacity:.45}}
.bean .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.pl.house:nth-child(3n) .bean .eyes{animation-delay:1.7s}.pl.house:nth-child(3n+1) .bean .eyes{animation-delay:3.1s}
/* capa de efectos */
#fxl{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.walker,.ghost,.accused{position:absolute;left:0;top:0;will-change:transform}
.walker svg{filter:drop-shadow(0 0 4px #000)}.walker.knock{animation:knk .3s 3}.walker.shake{animation:shk .12s 7}
@keyframes knk{50%{margin-top:-4px}}@keyframes shk{50%{margin-left:4px}}
.trapfx{position:absolute;font-size:28px;transform:translate(-50%,-50%);animation:pop .3s}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.2)}}
.ghost svg{filter:drop-shadow(0 0 8px #aab4ff)}
.skyfx{position:absolute;inset:0;animation:fade 2.3s forwards}.skyfx.sunrise{background:linear-gradient(#ffb36b00,#ff9b6b66 60%,#ffd36b88)}
.skyfx.moonrise{background:linear-gradient(#0e0b1fcc,#2a1d5a66)}
.skyfx .sun{position:absolute;left:50%;bottom:-120px;width:160px;height:160px;margin-left:-80px;border-radius:50%;background:radial-gradient(#fff6b0,#ffc24a 60%,#ff9b3d00 72%);animation:rise 2.3s ease-out forwards}
.skyfx .moon{position:absolute;right:18%;top:110%;width:90px;height:90px;border-radius:50%;background:#f3eeda;box-shadow:inset -18px -6px 0 #d9d2b8,0 0 40px #f3eeda88;animation:rise2 2.3s ease-out forwards}
.skyfx .stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#fff,transparent),radial-gradient(2px 2px at 85% 50%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 75%,#fff,transparent);animation:tw 1s infinite alternate}
@keyframes rise{to{bottom:45%}}@keyframes rise2{to{top:12%}}@keyframes tw{to{opacity:.5}}@keyframes fade{0%{opacity:0}20%,75%{opacity:1}100%{opacity:0}}
.spot{position:absolute;inset:0;background:radial-gradient(circle 110px at var(--x) var(--y),#fff3c020 0,#fff3c010 70%,#000000c0 100%);animation:fade 99s}
.accused .balloon{position:absolute;left:50%;top:-70px;width:44px;height:54px;margin-left:-22px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 30%,#ffb3c8,#ff4d7d 60%,#c22a55);opacity:0;transition:opacity .4s}
.accused .balloon:after{content:"";position:absolute;left:50%;top:54px;width:2px;height:30px;background:#fff8}
.accused.up .balloon{opacity:1}
.vcount{position:absolute;right:-26px;top:-6px;background:#ff4d6d;color:#fff;font-weight:900;border-radius:20px;padding:4px 10px;font-size:1.2rem}.vcount.pop{animation:pop2 .25s}@keyframes pop2{50%{transform:scale(1.5)}}
.toastfx{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:max-content;max-width:min(88vw,520px);text-align:center;background:#000b;padding:14px 22px;border-radius:16px;font-weight:800;font-size:1.2rem;animation:fade 2.2s forwards}
.rcard{position:absolute;left:50%;top:45%;width:220px;height:290px;margin:-145px 0 0 -110px;perspective:900px;pointer-events:auto;animation:pop .35s;transition:opacity .4s,transform .4s}.rcard.out{opacity:0;transform:translateY(-30px)}
.rin{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}.rcard.flip .rin{transform:rotateY(180deg)}
.rfront,.rback{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:4px solid #fff3;box-shadow:0 12px 40px #000a;text-align:center;padding:10px}
.rfront{background:linear-gradient(160deg,#3b3060,#1b1430)}.rback{transform:rotateY(180deg)}
.rfront b,.rback b{font-size:1.3rem}.ric{font-size:4rem}
.t2-pueblo{background:linear-gradient(160deg,#3fae6a,#1f5c3a)}.t2-imp{background:linear-gradient(160deg,#d0405e,#6a1426)}.t2-neutral{background:linear-gradient(160deg,#9a6bff,#45237a)}.t2-hid{background:linear-gradient(160deg,#666,#2a2a33)}
.msgs .pending{opacity:.6}
@media (min-width:1024px){
 .mesa .pl.house{background:none;width:clamp(110px,10vw,150px);padding:0}.mesa .pl.house svg.hsvg{width:100%!important}
 .mesa .pl.house .door svg{width:100%!important}
 .plaza .fire{width:min(220px,80%);height:auto;display:block;margin:0 auto}.plaza .pi{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* ===== v6: escenario 2.5D ===== */
html{background:#1b1430}body:not(.home){background:transparent!important}#app{position:relative;z-index:1}
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;--px:0;--py:0;color:#2e5a4a}
#scene .sk{position:absolute;inset:0;transition:opacity 1.6s}
#scene .sday{background:linear-gradient(#5aa9e6 0%,#9fd3f0 45%,#ffe2b0 70%)}
#scene .snight{background:linear-gradient(#0a0820 0%,#1d1648 50%,#3a2860 72%);opacity:0}
#scene .ly{position:absolute;left:-4%;width:108%;transition:transform .4s ease-out,fill 1.6s,color 1.6s}
#scene .lstar{top:0;height:60%;fill:#fff;opacity:0;transition:opacity 1.6s}
#scene .tw circle{animation:tw 3s ease-in-out infinite}@keyframes tw{50%{opacity:.3}}
#scene .l1{bottom:30%;height:32%;fill:#7fb3a6;transform:translate(calc(var(--px)*-10px),calc(var(--py)*-4px))}
#scene .l2{bottom:22%;height:30%;fill:#4f8f6a;color:#3d7556;transform:translate(calc(var(--px)*-22px),calc(var(--py)*-8px))}
#scene .ground{position:absolute;left:-20%;right:-20%;bottom:-30%;height:58%;background:radial-gradient(ellipse at 50% 35%,#ffcf6b33 0 12%,transparent 30%),repeating-linear-gradient(90deg,#0000 0 60px,#00000010 60px 62px),linear-gradient(#6aa45e,#3f7a46);transform:perspective(500px) rotateX(55deg) translateX(calc(var(--px)*-40px));transform-origin:50% 0;transition:filter 1.6s}
#scene .orb{position:absolute;border-radius:50%;transition:transform 1.8s cubic-bezier(.3,1.2,.5,1),opacity 1.6s}
#scene .osun{width:90px;height:90px;right:14%;top:9%;background:radial-gradient(circle,#fff6c8 0 40%,#ffd36b 55%,#ffb34700 72%);box-shadow:0 0 80px #ffd36b88}
#scene .omoon{width:64px;height:64px;left:12%;top:8%;background:radial-gradient(circle at 35% 35%,#fffbe8,#d9d4f0 60%);box-shadow:0 0 50px #cfd6ff66,inset -10px -6px 0 #b9b2dd;opacity:0;transform:translateY(120px)}
#scene .pt i{position:absolute;display:block;will-change:transform}
#scene .ff{width:5px;height:5px;border-radius:50%;background:#fff59a;box-shadow:0 0 8px 3px #fff59a99;opacity:0;animation:ff 8s ease-in-out infinite alternate}
@keyframes ff{0%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}100%{transform:translate(-20px,-10px)}}
#scene .lf{width:9px;height:6px;border-radius:0 80% 0 80%;background:#e9a03b;opacity:.75;animation:lf 9s linear infinite;top:-5%!important}
@keyframes lf{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-120px,105vh) rotate(540deg)}}
body.noche #scene .sday,body.fxnight #scene .sday{opacity:0}body.noche #scene .snight,body.fxnight #scene .snight{opacity:1}
body.noche #scene .lstar,body.fxnight #scene .lstar{opacity:.9}
body.noche #scene .osun,body.fxnight #scene .osun{opacity:0;transform:translateY(160px)}
body.noche #scene .omoon,body.fxnight #scene .omoon{opacity:1;transform:none}
body.noche #scene .l1,body.fxnight #scene .l1{fill:#2a2a5a}body.noche #scene .l2,body.fxnight #scene .l2{fill:#1c2440;color:#141a30}
body.noche #scene .ground,body.fxnight #scene .ground{filter:brightness(.35) saturate(.6) hue-rotate(40deg)}
body.noche #scene .ff,body.fxnight #scene .ff{opacity:1}body.noche #scene .lf,body.fxnight #scene .lf{display:none}
body.voto #scene .sday{background:linear-gradient(#e98a5a,#f5b77a 50%,#ffd9a0 72%)}
body.home #scene{display:none}
/* casas */
.pl.house .door{left:32%;bottom:4%;width:30%}
.pl.house .hs{filter:drop-shadow(0 6px 6px #0005)}
body.noche .pl.house .hs,body.fxnight .pl.house .hs{filter:drop-shadow(0 0 10px #ffb34733) drop-shadow(0 6px 6px #0008)}
.mesa .pl{transform:translate(-50%,-50%) scale(var(--s,1))}
.mesa{background:radial-gradient(ellipse at center,#ffb34733 0 22%,#00000018 23% 64%,transparent 65%)!important}
body.noche .mesa,body.fxnight .mesa{background:radial-gradient(ellipse at center,#ff9a3c44 0 18%,#ff9a3c10 30%,#00000030 31% 64%,transparent 65%)!important}
.nm{text-shadow:0 1px 3px #000,0 0 6px #000}
.walker.own{z-index:3;filter:drop-shadow(0 0 6px #fff8)}.walker.tome{filter:drop-shadow(0 0 6px #ff4d6d)}
/* móvil: aldea compacta para que entre el chat */
@media (max-width:1023px){
 .vplaza .fire{width:96px}.vplaza{margin:0 0 -10px}
 .village{grid-template-columns:repeat(4,1fr);gap:0 2px}
 .village .pl.house .hs{max-width:84px}.village .nm{font-size:.72rem}.village .tag{font-size:.6rem;padding:0 3px}
 .village.many{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:84px;overflow-x:auto;scroll-snap-type:x proximity;touch-action:pan-x pinch-zoom;padding-bottom:4px}
 .village.many .pl{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){#scene .pt,#scene .tw circle{display:none;animation:none}#scene *{transition:none!important}}
.mesa .pl.house{width:clamp(130px,11.5vw,175px)!important}
@media (min-width:1024px) and (max-height:700px){.mesa .pl.house{width:110px!important}}
/* efectos de rol */
.rfx{position:fixed;left:0;top:0;transform:translate(-50%,-100%);pointer-events:none;z-index:6;text-align:center}
.rfx.ico{font-size:30px;animation:pop .35s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 2px 3px #0008)}
@keyframes pop{0%{transform:translate(-50%,-100%) scale(.2)}100%{transform:translate(-50%,-100%) scale(1)}}
.hs.slam{animation:slam .4s}@keyframes slam{30%{transform:scale(1.06,.92)}60%{transform:scale(.97,1.03)}}
.hs.lightsout .win,.hs.lightsout .lamp{fill:#222!important}.hs.lightsout .glow{opacity:0!important}
.puff{width:var(--w);height:60px}.puff .pf{position:absolute;left:50%;bottom:0;width:30px;height:30px;border-radius:50%;background:#cfc8dc;animation:puff 1.2s ease-out forwards}
.puff .pf:nth-child(2){animation-delay:.1s;--dx:-30px}.puff .pf:nth-child(3){animation-delay:.2s;--dx:26px}
@keyframes puff{0%{transform:translate(-50%,0) scale(.3);opacity:.9}100%{transform:translate(calc(-50% + var(--dx,0px)),-40px) scale(2.2);opacity:0}}
.hatfall{position:absolute;left:60%;bottom:30px;font-size:22px;animation:hatf 1.4s ease-in forwards}@keyframes hatf{0%{transform:translateY(-30px) rotate(0)}70%{transform:translateY(28px) rotate(80deg)}100%{transform:translateY(26px) rotate(95deg)}}
.snatch{position:absolute;left:30%;bottom:20px;font-size:24px;animation:snat 1.4s ease-in forwards}@keyframes snat{40%{transform:translate(0,-10px)}100%{transform:translate(-90px,-120px) rotate(-40deg);opacity:0}}
.puff .ico{position:absolute;left:10%;bottom:40px;font-size:22px}
.bubble{width:calc(var(--w)*1.2);height:calc(var(--w)*1.1);border-radius:50%;border:3px solid #7dffb0;background:radial-gradient(circle,#7dffb022,#7dffb044 70%,#7dffb000);box-shadow:0 0 24px #7dffb099;animation:bub 1.8s ease-out forwards;transform:translate(-50%,-80%)}
.bubble i{position:absolute;width:6px;height:6px;border-radius:50%;background:#d6ffe4;box-shadow:0 0 8px #7dffb0;animation:spk 1.2s ease-out infinite}
.bubble i:nth-child(1){left:20%;top:30%}.bubble i:nth-child(2){left:70%;top:20%;animation-delay:.2s}.bubble i:nth-child(3){left:50%;top:60%;animation-delay:.4s}.bubble i:nth-child(4){left:30%;top:75%;animation-delay:.6s}.bubble i:nth-child(5){left:80%;top:55%;animation-delay:.3s}.bubble i:nth-child(6){left:45%;top:10%;animation-delay:.5s}
@keyframes spk{0%{transform:translateY(0) scale(.4);opacity:0}50%{opacity:1}100%{transform:translateY(-20px) scale(1);opacity:0}}
@keyframes bub{0%{transform:translate(-50%,-80%) scale(.3);opacity:0}25%{transform:translate(-50%,-80%) scale(1.05);opacity:1}85%{opacity:1}100%{opacity:0}}
.bubble.crack::after{content:"";position:absolute;inset:18% 30% 40% 35%;background:linear-gradient(60deg,transparent 45%,#fff 47% 50%,transparent 52%),linear-gradient(-30deg,transparent 45%,#fff 47% 50%,transparent 52%);opacity:0;animation:crk .3s .7s forwards}@keyframes crk{to{opacity:1}}
.snap{animation:snp .5s cubic-bezier(.3,1.8,.5,1) both}@keyframes snp{0%{transform:translate(-50%,-100%) scale(1.6) rotate(20deg)}100%{transform:translate(-50%,-100%) scale(1)}}
.lockfx .chain{position:absolute;left:-26px;right:-26px;top:50%;height:10px;background:repeating-linear-gradient(90deg,#c9c9d6 0 8px,transparent 8px 11px);border-radius:4px;transform:rotate(-12deg)}
.roof{animation:pop .35s both,bob 1s ease-in-out infinite alternate .35s}@keyframes bob{to{margin-top:-6px}}
.roof .cnt,.crowd b{display:inline-block;margin-left:4px;font-size:16px;background:#ffcf3f;color:#2b1d33;border-radius:10px;padding:0 6px}
.cards3{display:flex;gap:4px;justify-content:center;margin-top:-80px}.cards3 span{font-size:10px;background:#fff;color:#2b1d33;border-radius:5px;padding:6px 4px;width:56px;box-shadow:0 2px 6px #0006;animation:fl 2s ease-in-out infinite alternate}
.cards3 span:nth-child(2){animation-delay:.3s;margin-top:-10px}.cards3 span:nth-child(3){animation-delay:.6s}@keyframes fl{to{transform:translateY(-6px) rotate(3deg)}}
.prints span{position:fixed;transform:translate(-50%,-50%);font-size:14px;opacity:0;animation:prt 2s forwards}@keyframes prt{20%{opacity:.9}80%{opacity:.9}100%{opacity:0}}
.tick{animation:pop .35s both,tck .25s steps(2) infinite .35s}@keyframes tck{50%{margin-left:2px}}
.boom{font-size:60px}.boom span{display:block;animation:bm .9s ease-out both}.boom b{font:900 22px system-ui;color:#ffcf3f;text-shadow:0 2px 0 #c0392b,0 0 10px #000}
@keyframes bm{0%{transform:scale(.2)}40%{transform:scale(1.5)}100%{transform:scale(1.1);opacity:.85}}
.zap .ball{font-size:28px;display:block}.zap .bolt{font-size:44px;display:block;animation:blt .15s 4 alternate}@keyframes blt{from{opacity:.2}to{opacity:1}}
.wipe{animation:pop .3s both,wp .3s ease-in-out 4 alternate .3s}@keyframes wp{to{margin-left:18px}}
.stampfx{animation:stm .4s cubic-bezier(.5,2,.5,1) both}@keyframes stm{0%{transform:translate(-50%,-160%) scale(2)}100%{transform:translate(-50%,-100%) scale(1)}}
.barr .planks{position:absolute;left:-20px;right:-20px;top:30%;height:30px;background:repeating-linear-gradient(-20deg,#8a5a3c 0 8px,transparent 8px 14px);opacity:.9}
.markfx{animation:pop .35s both,glw 1s ease-in-out infinite alternate}@keyframes glw{to{filter:drop-shadow(0 0 10px #b9a6ff)}}
.rcard .eraser{position:absolute;left:30%;top:45%;font-size:36px;z-index:3;animation:wp .25s ease-in-out 6 alternate}
.rfx.mega,.rfx.crowd{font-size:32px}
@media (max-width:1023px){.village .pl.house .hs{max-width:68px}.village .pl.house{width:auto!important}.chat{height:30dvh}.vplaza .fire{width:76px}.village{gap:0}}
/* revelación por equipo: verde pueblo, rojo impostor, azul neutral */
.t2-neutral{background:linear-gradient(160deg,#3d8bff,#173d86)!important}
.rback.t2-pueblo{box-shadow:0 0 0 3px #7dffa8aa,0 0 38px 8px #2fd06a88}.rback.t2-imp{box-shadow:0 0 0 3px #ff8aa0aa,0 0 38px 8px #ff2e5288}.rback.t2-neutral{box-shadow:0 0 0 3px #8cc4ffaa,0 0 38px 8px #2f8bff88}
.rback.t2-pueblo b{color:#c9ffd9}.rback.t2-imp b{color:#ffd0d8}.rback.t2-neutral b{color:#d2e6ff}
.rback b{text-shadow:0 2px 0 #0006}
.tag.tg-pueblo{background:#1f8a4a;color:#eafff0;box-shadow:0 0 8px #2fd06a99}.tag.tg-imp{background:#b8223f;color:#fff0f3;box-shadow:0 0 8px #ff2e5299}.tag.tg-neutral{background:#2465c9;color:#eef5ff;box-shadow:0 0 8px #2f8bff99}.tag.tg-hid{background:#555;color:#eee}
.kickrow div{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.kickb{flex:0 0 auto;padding:4px 10px;font-size:.85rem;background:#b8223f55}