/* Navidad 2026 · Les Carpes */
@font-face{font-family:Fredoka;font-weight:400;font-display:swap;src:url(/vendor/fredoka/fredoka-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:500;font-display:swap;src:url(/vendor/fredoka/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(/vendor/fredoka/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(/vendor/fredoka/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:500;font-display:swap;src:url(/vendor/nunito/nunito-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(/vendor/nunito/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/vendor/nunito/nunito-latin-800-normal.woff2) format("woff2")}
:root{
  --red:#c8202b;--red-d:#8f1219;--red-l:#e8434d;
  --green:#176b3a;--green-d:#0f4526;--green-l:#2c9c5a;
  --gold:#e0ab2f;--gold-d:#a97a10;--gold-l:#ffe29a;--gold-t:#7a5806;
  --ink:#1c2a22;--mute:#5a6b61;--line:#e6e1d3;--paper:#fff;--cream:#fffaf0;--snow:#f4f4fb;
  --r:20px;--shadow:0 12px 34px rgba(30,40,70,.16);--shadow-s:0 4px 14px rgba(30,40,70,.12);
  --head:Fredoka,"Baloo 2","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --body:Nunito,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:500 17px/1.5 var(--body);color:var(--ink);background:var(--snow);-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.15;margin:0}
p{margin:0}
a{color:var(--green)}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.scene{position:fixed;inset:0;z-index:-2;background:#e8e8f6 url(/assets/fondo.jpg) center top/cover no-repeat}
.scene:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 34% at 50% 30%,rgba(255,255,255,.72),transparent 72%)}
#snow{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:.6em 1.4em;border:0;border-radius:18px;font:600 1.08rem/1.15 var(--head);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s;text-align:center}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-red{background:linear-gradient(180deg,var(--red-l),var(--red));color:#fff;box-shadow:0 6px 0 var(--red-d),0 12px 22px rgba(160,20,30,.3)}
.btn-green{background:linear-gradient(180deg,var(--green-l),var(--green));color:#fff;box-shadow:0 6px 0 var(--green-d),0 12px 22px rgba(15,70,40,.3)}
.btn-gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#4a3604;box-shadow:0 6px 0 var(--gold-d),0 12px 22px rgba(160,120,10,.28)}
.btn-ghost{background:#fff;color:var(--green-d);border:2px solid var(--line)}
.btn-block{width:100%}
.btn-red:active,.btn-green:active,.btn-gold:active{box-shadow:0 2px 0 rgba(0,0,0,.25);transform:translateY(4px)}

/* ==== Portada: escala por unidades para llenar el móvil sin scroll ==== */
.home{--u:min(1vw,.585dvh);min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*3);overflow:hidden;position:relative;text-align:center}
.h-shield{width:calc(var(--u)*22);filter:drop-shadow(0 calc(var(--u)*.6) calc(var(--u)*1.8) rgba(40,50,90,.25));animation:drop .8s cubic-bezier(.2,1.5,.5,1) both}
.h-org{margin-top:calc(var(--u)*1.4);color:var(--green-d);font-family:var(--head);animation:fadeUp .6s .15s both}
.h-org small{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.4);font-size:calc(var(--u)*4.6);font-weight:600;line-height:1}
.h-org small:before,.h-org small:after{content:"";width:calc(var(--u)*6);height:calc(var(--u)*.45);border-radius:9px;background:var(--gold)}
.h-org b{display:block;font-size:calc(var(--u)*8.6);font-weight:700;line-height:1.1}
.h-title{position:relative;margin-top:calc(var(--u)*.4);font-size:calc(var(--u)*14.2);font-weight:700;letter-spacing:-.01em;line-height:1.05;color:var(--red);white-space:nowrap;text-shadow:0 calc(var(--u)*.35) 0 var(--red-d),0 0 calc(var(--u)*3) rgba(255,255,255,.95);paint-order:stroke fill;-webkit-text-stroke:calc(var(--u)*.9) #fff;animation:pop .7s .25s cubic-bezier(.2,1.6,.4,1) both}
.h-hat{position:absolute;width:calc(var(--u)*15);left:calc(var(--u)*-4.2);top:calc(var(--u)*-6.4);transform:rotate(-8deg);transform-origin:80% 90%;animation:hat 4s ease-in-out infinite;pointer-events:none}
.h-ribbon{position:relative;margin-top:calc(var(--u)*1.6);padding:calc(var(--u)*1.25) calc(var(--u)*7);font:600 calc(var(--u)*4.7)/1.1 var(--head);color:var(--green-d);background:linear-gradient(180deg,#ffe9ae,#e8bb4c);border-radius:calc(var(--u)*.8);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1.6) rgba(150,110,10,.35);clip-path:polygon(0 0,100% 0,calc(100% - var(--u)*2.4) 50%,100% 100%,0 100%,calc(var(--u)*2.4) 50%);animation:fadeUp .6s .4s both;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.h-stage{position:relative;width:calc(var(--u)*92);margin-top:calc(var(--u)*25.5)}
.h-elf{position:absolute;left:50%;top:calc(var(--u)*-25.3);width:calc(var(--u)*44);transform:translateX(-50%);z-index:0;animation:peek 1s .5s cubic-bezier(.2,1.4,.4,1) both;pointer-events:none}
.h-elf img{animation:bob 3.4s ease-in-out 1.5s infinite;transform-origin:50% 100%}
.h-cards{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2)}
.h-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*2) calc(var(--u)*1.5) calc(var(--u)*3);border-radius:calc(var(--u)*6);border:calc(var(--u)*.55) solid var(--gold-l);color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 calc(var(--u)*1.5) calc(var(--u)*4) rgba(30,30,60,.3),0 0 calc(var(--u)*2.6) rgba(255,220,130,.6);transition:transform .2s;animation:rise .7s .6s cubic-bezier(.2,1.3,.4,1) both}
.h-card:nth-child(2){animation-delay:.75s}
.h-card:active{transform:scale(.97)}
@media(hover:hover){.h-card:hover{transform:translateY(-1%) scale(1.02)}}
.h-card.red{background:radial-gradient(circle at 50% 30%,#d9313a,#a3141d 72%)}
.h-card.green{background:radial-gradient(circle at 50% 30%,#2a8349,#114d2a 72%)}
.h-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%);animation:sheen 5s 2s infinite;pointer-events:none}
.h-card img{width:calc(var(--u)*36);height:calc(var(--u)*26);object-fit:contain;filter:drop-shadow(0 calc(var(--u)*.6) calc(var(--u)*1) rgba(0,0,0,.3))}
.h-card span{margin-top:calc(var(--u)*1);font:600 calc(var(--u)*7)/1.08 var(--head);text-shadow:0 calc(var(--u)*.3) 0 rgba(0,0,0,.2)}
.h-card i{margin-top:calc(var(--u)*1.6);width:calc(var(--u)*14);height:calc(var(--u)*7);border-radius:calc(var(--u)*4);background:linear-gradient(180deg,#fff0c0,var(--gold));display:grid;place-items:center;box-shadow:0 calc(var(--u)*.5) 0 var(--gold-d);animation:nudge 1.8s ease-in-out infinite}
.h-card i svg{width:60%;height:60%;stroke:var(--red);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.h-card.off{filter:saturate(.62)}
.h-card.off i{display:none}
.h-card em{display:none;margin-top:calc(var(--u)*1.6);font:600 calc(var(--u)*3.4)/1 var(--head);padding:calc(var(--u)*1.2) calc(var(--u)*2.4);border-radius:99px;background:rgba(255,255,255,.2)}
.h-card.off em{display:block}
.h-deco{position:absolute;bottom:0;width:calc(var(--u)*23);pointer-events:none;z-index:2}
.h-deco.l{left:calc(var(--u)*-2)}
.h-deco.r{right:calc(var(--u)*-2)}
.h-foot{position:relative;z-index:3;margin-top:calc(var(--u)*2.2);font-size:calc(var(--u)*2.7);color:var(--mute)}
.h-foot a{color:inherit}
@keyframes drop{from{transform:translateY(-40%) scale(.8);opacity:0}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes fadeUp{from{transform:translateY(14px);opacity:0}}
@keyframes rise{from{transform:translateY(30px);opacity:0}}
@keyframes peek{from{transform:translate(-50%,45%)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3%) rotate(-1.5deg)}70%{transform:translateY(-2%) rotate(1.5deg)}}
@keyframes hat{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-2deg)}}
@keyframes sheen{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6%)}}

/* ==== Páginas interiores ==== */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(30,40,70,.08)}
.topbar a.back{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--snow);color:var(--green-d);text-decoration:none;font-size:1.3rem;font-weight:800}
.topbar img{height:42px;width:auto}
.topbar b{font:600 1.05rem/1.1 var(--head);color:var(--green-d)}
.topbar b small{display:block;font:500 .78rem var(--body);color:var(--mute)}
.page{max-width:560px;margin:0 auto;padding:16px 16px 48px}
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.preview-note{background:#fff5d6;color:#6b4f05;border-radius:14px;padding:10px 14px;margin-bottom:12px;font-weight:700;font-size:.92rem}
.center-note{min-height:80dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.center-note h1{color:var(--red);font-size:1.9rem}
body.plain{background:var(--snow)}

/* Formularios */
.field{margin-bottom:14px}
.field label{display:block;font:600 1.02rem var(--head);margin-bottom:5px;color:var(--green-d)}
.field input,.field textarea,.field select{width:100%;min-height:54px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;font:600 1.05rem var(--body);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(224,171,47,.2)}
.field.bad input{border-color:var(--red);background:#fff5f5}
.err{display:none;color:var(--red-d);font-weight:800;font-size:.9rem;margin-top:4px}
.bad>.err,.field.bad .err{display:block}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--snow);cursor:pointer}
.check input{flex:none;width:28px;height:28px;margin:0;accent-color:var(--green)}
.check span{font-size:.95rem;line-height:1.35}
.bad .check{outline:2px solid var(--red);background:#fff5f5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{background:#fde8e9;color:var(--red-d);padding:10px 14px;border-radius:12px;font-weight:800;margin-bottom:12px}

/* Diálogo */
dialog.sheet{border:0;padding:0;background:transparent;width:min(94vw,480px);max-width:none;max-height:92dvh;overflow:visible}
dialog.sheet::backdrop{background:rgba(15,30,25,.6);backdrop-filter:blur(3px)}
.sheet-in{background:#fff;border-radius:26px;padding:22px 20px;max-height:92dvh;overflow:auto;text-align:center;animation:sheetIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes sheetIn{from{transform:translateY(40px) scale(.92);opacity:0}}
.okmark{width:76px;height:76px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--green-l),var(--green));box-shadow:0 8px 20px rgba(20,90,50,.35)}
.okmark svg{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;animation:draw .6s .2s both}
@keyframes draw{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
.sheet-in h2{color:var(--green-d);font-size:1.7rem}
.ticket{position:relative;margin:14px 0;display:flex;border-radius:18px;overflow:hidden;background:var(--cream);box-shadow:inset 0 0 0 2px var(--gold-l);text-align:left}
.ticket .t-l{flex:1;min-width:0;padding:14px}
.ticket .t-l small{display:block;color:var(--mute);font-weight:700;font-size:.8rem}
.ticket .t-l b{display:block;font:600 1.12rem/1.2 var(--head);overflow-wrap:anywhere}
.ticket .t-num{font:700 2.3rem/1 var(--head);color:var(--red);margin-top:6px}
.ticket .t-r{flex:none;width:128px;padding:10px;background:#fff;border-left:2px dashed var(--gold-l);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ticket .t-r img{width:108px;height:108px;border-radius:6px}
.ticket .t-r code{font:700 .78rem var(--body)}
.payinfo{text-align:left;border:2px solid var(--gold);background:#fffaf0;border-radius:16px;padding:12px 14px;margin-bottom:14px}
.payinfo-t{font:700 1.08rem var(--head);color:var(--red-d);margin:0 0 6px}
.payinfo ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.payinfo li{display:flex;gap:10px;align-items:flex-start}
.pay-ic{flex:none;font-size:1.2rem;line-height:1.2}
.payinfo li small{display:block;font-size:.78rem;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.03em}
.payinfo li b{display:block;font-size:1rem;line-height:1.25;color:var(--ink)}
.payinfo-n{margin:8px 0 0;font-size:.9rem;font-weight:700;color:#5c4404}
.notice{display:flex;gap:10px;text-align:left;padding:12px 14px;border-radius:16px;background:#fff5d6;color:#5c4404;font-weight:700;font-size:.97rem;line-height:1.35;margin-bottom:14px}
.draw{margin:12px 0;padding:12px 14px;border-radius:16px;background:var(--red-d);color:#fff;text-align:left;box-shadow:0 0 0 3px var(--gold-l),0 8px 18px rgba(140,18,25,.28)}
.draw-label{display:block;font:600 .88rem/1.2 var(--head);color:var(--gold-l);letter-spacing:.02em;text-transform:uppercase}
.draw-when{display:block;margin-top:3px;font:600 1.22rem/1.2 var(--head);overflow-wrap:anywhere}
.draw-how{margin:4px 0 0;font-weight:700;font-size:.98rem;line-height:1.3;white-space:pre-line;overflow-wrap:anywhere}
.stack-btns{display:grid;gap:12px;margin-top:8px}
.linklike{background:none;border:0;color:var(--green);font:700 1rem var(--body);text-decoration:underline;cursor:pointer;padding:8px}
.stateline{display:inline-block;font:600 .95rem var(--head);padding:5px 14px;border-radius:99px;margin-bottom:6px}
.stateline.ok{background:#dff5e6;color:var(--green-d)}
.stateline.wait{background:#fff0c9;color:#6b4f05}
.stateline.no{background:#fde8e9;color:var(--red-d)}
.prose h1{color:var(--red);font-size:1.7rem;margin-bottom:8px}
.prose h2{color:var(--green-d);font-size:1.15rem;margin:16px 0 4px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:999;background:#16261d;color:#fff;font-weight:700;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow);max-width:90vw;animation:fadeUp .25s;text-align:center}

.mod{margin-top:16px;padding-top:14px;border-top:2px solid var(--line);text-align:center}
.mod h2{font-size:1.3rem;color:var(--green-d)}
.mod p{color:var(--mute);font-weight:700;font-size:.97rem;margin-top:2px}
.mod-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 6px}
.mod-row button{width:64px;height:64px;border:0;border-radius:50%;color:#fff;font:700 2.3rem/1 var(--head);cursor:pointer;touch-action:manipulation;transition:transform .1s}
.mod-row button:active{transform:scale(.93)}
.mod-row button[disabled]{background:#c9ced8!important;color:#4b5563;cursor:not-allowed}
.mod-minus{background:var(--red)}
.mod-plus{background:var(--green)}
.mod-row output{min-width:74px;font:700 2.8rem/1 var(--head);font-variant-numeric:tabular-nums;color:var(--ink)}
.mod-total{font-weight:800;font-size:1.08rem;margin-bottom:10px}
.mod.flash{animation:modFlash 1.5s ease-out}
@keyframes modFlash{0%,50%{background:#fff0c9;box-shadow:0 0 0 10px #fff0c9}100%{background:transparent;box-shadow:0 0 0 10px transparent}}
.mod-saved{background:#dff5e6;color:var(--green-d);font-weight:800;border-radius:12px;padding:8px 12px;margin-bottom:10px}

/* ==== Juego ==== */
body.game{height:100dvh;overflow:hidden;background:var(--green-d)}
#map{position:fixed;inset:0;background:#dfe6dc;z-index:1}
.hud{position:fixed;z-index:500;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:stretch;gap:8px;pointer-events:none}
.hud>*{pointer-events:auto}
.hud .back{flex:none;width:48px;display:grid;place-items:center;background:#fff;border-radius:16px;box-shadow:var(--shadow-s);text-decoration:none;font-weight:800;font-size:1.3rem;color:var(--green-d)}
.clock{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(180deg,var(--green),var(--green-d));color:#fff;padding:6px 14px;border-radius:16px;box-shadow:var(--shadow-s);border:2px solid var(--gold-l)}
.clock b{font:700 1.75rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.clock small{display:block;font-size:.72rem;font-weight:800;color:var(--gold-l);text-align:right}
.clock .team{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;max-width:46vw;font:600 .95rem var(--head)}
.pen-fly{position:fixed;z-index:900;left:50%;top:80px;transform:translateX(-50%);color:#fff;background:var(--red);font:700 1.3rem var(--head);padding:6px 16px;border-radius:99px;animation:penfly 1.8s forwards;pointer-events:none}
@keyframes penfly{0%{opacity:0;transform:translate(-50%,30px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-30px)}}
.dock{position:fixed;z-index:500;left:0;right:0;bottom:0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.2);max-height:52dvh;overflow:auto}
.dock-inner{max-width:560px;margin:0 auto}
.pips{display:flex;gap:4px;justify-content:center;margin-bottom:8px}
.pips i{flex:1;max-width:32px;height:9px;border-radius:9px;background:#e8e8ec;transition:background .4s}
.pips i.on{background:linear-gradient(90deg,var(--gold),var(--green-l))}
.pips i.now{background:var(--gold);animation:pulseBar 1.4s infinite}
@keyframes pulseBar{50%{opacity:.4}}
.next{display:flex;gap:10px;align-items:center;margin-bottom:10px;text-align:left}
.next img{flex:none;width:52px;height:64px;object-fit:contain}
.next h3{font-size:1.15rem;color:var(--red)}
.next small{display:block;font-weight:800;font-size:.8rem;color:var(--gold-t)}
.next p{font-size:.96rem;line-height:1.3}
.scan-big{width:100%;min-height:64px;font-size:1.3rem}
.scan-big svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.locate{position:fixed;z-index:500;right:12px;display:grid;place-items:center;width:48px;height:48px;background:#fff;border:0;border-radius:14px;box-shadow:var(--shadow-s);cursor:pointer}
.locate svg{width:24px;height:24px;fill:none;stroke:var(--green-d);stroke-width:2.2;stroke-linecap:round}
.leaflet-container{font-family:var(--body)}
.pin{position:relative;display:grid;place-items:center}
.leaflet-container .leaflet-marker-pane .pin img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.pin-done{border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);border:3px solid var(--green-l)}
.pin-done img{border-radius:50%;clip-path:circle(50% at 50% 34%)}
.leaflet-container .leaflet-marker-pane .pin-done img{filter:none;object-position:top;scale:1.5;translate:0 22%}
.pin-done:after{content:"✓";position:absolute;right:-1px;bottom:-1px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font:800 12px/18px var(--body);text-align:center}
.pin-next img{animation:hop 1.1s ease-in-out infinite;transform-origin:50% 100%}
.pin-next:before{content:"";position:absolute;left:50%;bottom:-10px;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:radial-gradient(circle,rgba(224,171,47,.75),rgba(224,171,47,0) 70%);animation:halo 1.6s ease-out infinite}
.pin-final img{animation:hop 1.3s ease-in-out infinite}
.pin-final:before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(200,32,43,.55),transparent 70%);animation:halo 1.6s ease-out infinite}
.pin-start{border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);border:3px solid var(--gold);font-size:24px;text-align:center}
.pin-me{width:18px;height:18px;border-radius:50%;background:#2a7de1;border:3px solid #fff;box-shadow:0 0 0 6px rgba(42,125,225,.25)}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px) scaleY(1.05)}60%{transform:translateY(0) scaleY(.93)}}
@keyframes halo{from{transform:scale(.5);opacity:1}to{transform:scale(1.4);opacity:0}}

.join{position:fixed;inset:0;z-index:600;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:20px 16px 34px;background:#e8e8f6 url(/assets/fondo.jpg) center top/cover no-repeat}
.join-card{width:100%;max-width:480px;background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:22px 20px;text-align:center;margin-top:8px}
.join-tio{width:min(58vw,250px);margin-top:calc(8px + env(safe-area-inset-top));animation:floaty 4s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.join-card h1{color:var(--red);font-size:1.95rem;margin-bottom:8px}
.story{white-space:pre-line;text-align:left;margin-bottom:14px;line-height:1.45}
.rules{list-style:none;padding:0;margin:0 0 16px;text-align:left;display:grid;gap:8px}
.rules li{display:flex;gap:10px;align-items:flex-start;background:var(--snow);padding:10px 12px;border-radius:14px;font-weight:700;font-size:.97rem;line-height:1.3}
.rules li b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#493503;font:700 .98rem/28px var(--head);text-align:center}

.scanner{position:fixed;inset:0;z-index:2000;background:#06140c;display:flex;flex-direction:column;color:#fff}
.scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent)}
.scan-top b{font:600 1.15rem var(--head)}
.scan-close{width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:1.3rem;cursor:pointer}
.scan-frame{position:relative;z-index:2;flex:1;display:grid;place-items:center;pointer-events:none}
.scan-frame div{width:min(70vw,300px);aspect-ratio:1;border-radius:26px;box-shadow:0 0 0 2000px rgba(0,0,0,.42);border:4px solid var(--gold-l);position:relative;overflow:hidden}
.scan-frame div:after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--gold);box-shadow:0 0 14px var(--gold);animation:scanline 2s ease-in-out infinite}
@keyframes scanline{0%,100%{top:6%}50%{top:92%}}
.scan-msg{text-align:center;padding:8px 18px;font-weight:700;position:relative;z-index:2}
.scan-manual{position:relative;z-index:2;display:flex;gap:8px;padding:10px 14px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}
.scan-manual input{flex:1;min-width:0;min-height:52px;padding:0 14px;border-radius:14px;border:0;font:700 1.05rem var(--body);text-transform:uppercase}

.quiz-q{font:600 1.35rem/1.25 var(--head);margin:10px 0 16px;color:var(--ink)}
.quiz-tag{font:600 .92rem var(--head);color:var(--gold-t)}
.quiz-elf{height:96px;width:auto;margin:0 auto;object-fit:contain;animation:floaty 3s ease-in-out infinite}
.quiz-photo{width:100%;max-height:180px;object-fit:cover;border-radius:16px;margin-bottom:8px}
.opts{display:grid;gap:10px}
.opt{min-height:60px;padding:12px 16px;border:2px solid var(--line);border-radius:16px;background:#fff;font:700 1.08rem/1.25 var(--body);text-align:left;cursor:pointer;transition:transform .12s,background .2s,border-color .2s}
.opt:active{transform:scale(.98)}
.opt:disabled{cursor:default;color:var(--ink)}
.opt.ok{background:#dff5e6;border-color:var(--green-l);animation:bump .4s}
.opt.no{background:#fde8e9;border-color:var(--red);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.res-msg{margin-top:12px;font:600 1.2rem var(--head)}
.res-msg.ok{color:var(--green)}
.res-msg.no{color:var(--red)}
.rank{list-style:none;padding:0;margin:10px 0 0;text-align:left;display:grid;gap:6px}
.rank li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--snow);font-weight:800}
.rank li.me{background:#fff0c9;box-shadow:inset 0 0 0 2px var(--gold)}
.rank li i{font:700 1rem var(--head);width:28px;text-align:center;font-style:normal;color:var(--red)}
.rank li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank li b{font-variant-numeric:tabular-nums;font-family:var(--head)}
.big-time{font:700 3.2rem/1 var(--head);color:var(--red);font-variant-numeric:tabular-nums;margin:8px 0 2px}
.ctext{white-space:pre-line}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}