/* MODO EXPEDICIÓN (js/modos/expedicion.js). Todo va dentro de #exp, una capa a pantalla completa, y las animaciones llevan el prefijo ex-:
 así no toca ni le tocan los estilos del resto del juego. Fuentes: Lilita One (títulos) y Nunito (index.html). */
#exp{position:fixed;inset:0;z-index:40;overflow-y:auto;overflow-x:hidden}
#exp[hidden]{display:none}
/* Quita lo que el juego pone a estas etiquetas (button, h2, input...): aquí mandan los estilos del modo */
#exp :is(button,input,h1,h2,h3,p,small){all:revert}
#exp{--bg:#dff1fd;--bg2:#f4fbff;--card:#ffffff;--ink:#2f3a44;--mute:#6b7c8a;--line:#d3e4f0;--dot:#bfe2f8;
--green:#58cc02;--green-d:#46a302;--blue:#1cb0f6;--blue-d:#1899d6;--yellow:#ffc800;--yellow-d:#e0a800;--red:#ff4b4b;--red-d:#d93a3a;--orange:#ff9600;--purple:#ce82ff;
--gold:#ffd23f;--strap:#1899d6;--strap-d:#147fb3;--stitch:#ffffff;--shade:rgba(20,40,60,.5);
--f:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--fd:"Lilita One","Arial Rounded MT Bold","Nunito",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #exp{--bg:#0f1820;--bg2:#15212b;--card:#1d2a35;--ink:#e8f0f6;--mute:#93a6b5;--line:#2c3c4a;--dot:#1b2a36;--shade:rgba(0,0,0,.62);color-scheme:dark}}
:root[data-theme="dark"] #exp{--bg:#0f1820;--bg2:#15212b;--card:#1d2a35;--ink:#e8f0f6;--mute:#93a6b5;--line:#2c3c4a;--dot:#1b2a36;--shade:rgba(0,0,0,.62);color-scheme:dark}
#exp *{box-sizing:border-box}
#exp{height:100%}
#exp{margin:0;background:radial-gradient(circle,var(--dot) 2.5px,transparent 3px) 0 0/26px 26px,linear-gradient(var(--bg),var(--bg2));background-attachment:fixed;color:var(--ink);font-family:var(--f);font-weight:800;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-block:10px 18px;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
#exp button{font-family:var(--f);font-weight:900;cursor:pointer;color:inherit}
#exp button:focus-visible,#exp input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#exp .stickers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#exp .stk{position:absolute;width:64px;padding:0;border-radius:9px;overflow:hidden;border:4px solid #fff;box-shadow:0 6px 14px rgba(20,60,100,.18);opacity:.55;animation:ex-bob 6s ease-in-out infinite}
#exp .stk svg{display:block;width:100%;height:auto}
@keyframes ex-bob{50%{transform:translateY(-10px) rotate(var(--r2,4deg))}}
#exp #app{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
#exp .btn{border:0;border-radius:16px;color:#fff;font-size:20px;letter-spacing:.5px;padding:13px 18px;border-bottom:5px solid rgba(0,0,0,.2);transition:transform .08s;font-family:var(--fd);font-weight:400}
#exp .btn:active{transform:translateY(3px);border-bottom-width:2px}
#exp .btn:disabled{opacity:.4;cursor:default}
#exp .g{background:var(--green);border-bottom-color:var(--green-d)}
#exp .r{background:var(--red);border-bottom-color:var(--red-d)}
#exp .b{background:var(--blue);border-bottom-color:var(--blue-d)}
#exp .y{background:var(--yellow);border-bottom-color:var(--yellow-d);color:#4a3a00}
#exp .ghost{background:var(--card);color:var(--mute);border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;font-size:14px;padding:9px 14px}
#exp .rlabel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
#exp .rlabel .t{font-family:var(--fd);font-size:20px;line-height:1}
#exp .rlabel.boss .t{color:var(--red)}
#exp .rlabel .rr{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute);letter-spacing:1px;text-transform:uppercase}
#exp .qh{font-family:var(--fd);font-size:16px;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);color:var(--blue);padding:0}
#exp .route{position:relative;height:46px;margin:2px 4px 0}
#exp .route svg.path{position:absolute;left:0;right:0;top:20px;width:100%;height:12px;overflow:visible}
#exp .stops{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-start}
#exp .stop{width:34px;display:flex;justify-content:center}
#exp .stop i{width:28px;height:28px;margin-top:12px;border-radius:50%;background:var(--card);border:3px solid var(--line);display:grid;place-items:center;font-style:normal;font-family:var(--fd);font-size:14px;color:var(--mute)}
#exp .stop.done i{background:var(--green);border-color:var(--green-d);color:#fff}
#exp .stop.cur i{border-color:var(--blue);color:#fff;background:var(--blue);transform:scale(1.18);box-shadow:0 0 0 5px rgba(28,176,246,.2)}
#exp .stop.bossst i{background:var(--yellow);border-color:var(--yellow-d);color:#4a3a00}
#exp .stop.bossst.cur i{background:var(--red);border-color:var(--red-d);color:#fff}
#exp .stop.bossst.done i{background:var(--green);border-color:var(--green-d);color:#fff}
#exp .plane{position:absolute;top:-12px;width:30px;height:24px;transition:left .9s cubic-bezier(.5,0,.3,1);margin-left:-15px;animation:ex-fly 2.4s ease-in-out infinite}
@keyframes ex-fly{50%{transform:translateY(-4px) rotate(-6deg)}}
#exp .tix{display:grid;grid-template-columns:1fr auto auto;gap:8px}
#exp .ticket{background:var(--card);border-radius:14px;padding:7px 14px;border:2px solid var(--line);border-bottom-width:4px;
 -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
 mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
#exp .ticket small{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
#exp .ticket .big{font-family:var(--fd);font-size:26px;line-height:1.05}
#exp .ticket .row{display:flex;align-items:baseline;gap:6px;margin-top:0}
#exp .ticket .tg{font-size:14px;color:var(--mute);font-family:var(--fd)}
#exp .prog{height:10px;border-radius:6px;background:var(--line);margin-top:4px;overflow:hidden;position:relative}
#exp .prog i{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;background:repeating-linear-gradient(-45deg,var(--green) 0 8px,#7ae024 8px 16px);transition:width .3s;animation:ex-barber 1s linear infinite;background-size:22.6px 22.6px}
@keyframes ex-barber{to{background-position:22.6px 0}}
#exp .ticket.mini{display:flex;flex-direction:column;justify-content:center;text-align:center;min-width:70px;padding:7px 10px}
#exp .ticket.pl .big{color:var(--blue)}
#exp .ticket.ds .big{color:var(--red)}
#exp .ticket .rule{font-size:12px;color:var(--red);margin-top:3px;font-weight:900}
#exp .ticket .big.pulse{animation:ex-tpulse .35s}
@keyframes ex-tpulse{50%{transform:scale(1.35)}}
#exp .strap{background:var(--strap-bg,var(--strap));border-radius:16px;padding:6px 8px;display:flex;gap:6px;align-items:center;min-height:62px;position:relative;box-shadow:0 4px 0 var(--strap-d)}
#exp .strap::before{content:"";position:absolute;inset:4px;border:2px dashed rgba(255,255,255,.55);border-radius:12px;pointer-events:none}
#exp .strap .lbl{position:absolute;right:12px;bottom:6px;font-family:var(--fd);font-size:12px;color:rgba(255,255,255,.75);letter-spacing:.5px}
#exp .patch{--tela:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 1.5px,transparent 1.5px 3px),radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(255,255,255,0) 60%);flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--tela),var(--pc);border:3px solid #fff;padding:0;display:grid;place-items:center;position:relative;box-shadow:0 3px 0 rgba(0,0,0,.2);z-index:1}
#exp .patch::before{content:"";position:absolute;inset:3px;border-radius:50%;border:2px dashed rgba(255,255,255,.8)}
#exp .patch svg{width:28px;height:28px;position:relative}
#exp .patch .ct{position:absolute;top:-6px;right:-6px;background:var(--yellow);color:#4a3a00;font-size:12px;border-radius:9px;padding:0 6px;font-family:var(--fd);font-style:normal;border:2px solid #fff}
#exp .pslot{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:2px dashed rgba(255,255,255,.5);z-index:1}
#exp .patch.fire{animation:ex-pfire .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes ex-pfire{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(-14deg)}70%{transform:scale(.92) rotate(6deg)}100%{transform:scale(1)}}
#exp .board{background:var(--card);border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:8px 10px 8px 4px;display:grid;grid-template-columns:86px 1fr;gap:6px;align-items:end;position:relative}
#exp .mascot{position:relative;height:104px;align-self:end}
#exp .mascot img{position:absolute;bottom:-4px;left:50%;height:112px;transform:translateX(-50%);transform-origin:50% 100%;animation:ex-idle 2.2s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08))}
@keyframes ex-idle{50%{transform:translateX(-50%) scale(1.02,.98)}}
#exp .mascot img.jump{animation:ex-jump .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes ex-jump{0%{transform:translateX(-50%) scale(1.15,.8)}35%{transform:translateX(-50%) translateY(-30px) scale(.9,1.12) rotate(-6deg)}70%{transform:translateX(-50%) translateY(0) scale(1.1,.9)}100%{transform:translateX(-50%)}}
#exp .mascot img.spin{animation:ex-spin .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes ex-spin{0%{transform:translateX(-50%) scale(1.15,.8)}40%{transform:translateX(-50%) translateY(-38px) rotate(200deg)}80%{transform:translateX(-50%) translateY(0) rotate(360deg) scale(1.1,.9)}100%{transform:translateX(-50%) rotate(360deg)}}
#exp .mascot img.sad{animation:ex-sad .8s}
@keyframes ex-sad{20%{transform:translateX(-50%) rotate(-7deg) scale(.96)}40%{transform:translateX(-50%) rotate(6deg)}60%{transform:translateX(-50%) rotate(-4deg)}80%{transform:translateX(-50%) rotate(2deg) scale(.98,1.02)}}
#exp .bubble{position:absolute;left:76px;top:-30px;z-index:6;background:#fff;color:#2f3a44;border:2px solid #24323f;border-radius:14px;padding:5px 11px;font-size:14px;font-weight:900;white-space:nowrap;box-shadow:0 3px 0 #24323f;pointer-events:none;animation:ex-bub 2.2s cubic-bezier(.2,1.5,.4,1) forwards;transform-origin:0 100%}
#exp .bubble::after{content:"";position:absolute;left:-9px;bottom:6px;width:12px;height:12px;background:#fff;border-left:2px solid #24323f;border-bottom:2px solid #24323f;transform:rotate(45deg) skew(10deg,10deg)}
@keyframes ex-bub{0%{transform:scale(0) rotate(-8deg)}12%{transform:scale(1.08)}18%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1) translateY(-6px)}}
#exp .calcw{display:flex;flex-direction:column;gap:4px;min-width:0}
#exp .calc{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
#exp .flaps{display:flex;gap:3px;justify-content:center}
#exp .fl{width:28px;height:42px;border-radius:9px;background:var(--acc);color:#fff;font-family:var(--fd);font-size:28px;display:grid;place-items:center;line-height:1;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);position:relative;overflow:hidden}
#exp .fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.14)}
#exp .fl:empty{background:var(--line);box-shadow:none}
#exp .flaps.c .fl{--acc:var(--blue)}
#exp .flaps.m .fl{--acc:var(--red)}
#exp .fl.flip{animation:ex-flip .22s ease-in-out}
@keyframes ex-flip{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}
#exp .calc .x{font-family:var(--fd);font-size:24px;color:var(--mute)}
#exp .flabel{text-align:center;font-size:10px;letter-spacing:1.4px;margin-top:3px;font-weight:900}
#exp .flabel.c{color:var(--blue)}
#exp .flabel.m{color:var(--red)}
#exp .tags{min-height:30px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:4px 0 0}
#exp .ltag{position:relative;background:var(--yellow);color:#4a3a00;font-size:12px;font-weight:900;padding:4px 10px 4px 20px;border-radius:4px 10px 10px 4px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);transform-origin:6px 50%}
#exp .ltag::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--card)}
#exp .ltag.q{background:var(--line);color:var(--mute)}
#exp .ltag.off{background:var(--line);color:var(--mute);text-decoration:line-through}
#exp .ltag.c2{background:var(--green);color:#fff}
#exp .ltag.c3{background:var(--blue);color:#fff}
#exp .ltag.c4{background:var(--orange);color:#fff}
#exp .ltag.c5{background:var(--purple);color:#fff}
#exp .ltag.swing{animation:ex-swing 1s cubic-bezier(.3,1.4,.4,1)}
@keyframes ex-swing{0%{transform:rotate(-35deg) translateY(-14px) scale(.5);opacity:0}30%{transform:rotate(14deg) scale(1.15);opacity:1}55%{transform:rotate(-7deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}
#exp .hand{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 9px;padding:8px 2px 2px}
/* CARTAS DE BANDERA (v98). Cada bandera es una carta: la bandera en su ventana con reflejo, y abajo la dificultad (puntos) y un sello
 holográfico. Con ratón la carta se inclina y el brillo sigue al puntero (--tx/--ty/--mx/--my y la clase .tilt los pone tilt() en expedicion.js).
 Mejoras: dorada (lámina de oro con destello), brillante (marco de arcoíris) y rubí (cristal tallado). Se ven todas en el Álbum.
 Al puntuar, cada carta da un golpe (.golpe) con una onda (.onda). Fondo liso a propósito (el dueño descartó la textura de líneas). */
#exp .stamp{--pf:var(--card);--bd:var(--line);--tx:0deg;--ty:0deg;--mx:50%;--my:30%;
 display:block;width:100%;position:relative;isolation:isolate;border:2px solid var(--bd);border-bottom-width:5px;border-radius:14px;padding:6px 6px 4px;background:var(--pf);
 transform:perspective(700px) rotateX(var(--tx)) rotateY(var(--ty)) rotate(var(--rot,0deg));transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;touch-action:manipulation}
#exp .stamp.tilt{transition:transform .08s linear,box-shadow .2s}
#exp .stamp::before{content:"";position:absolute;inset:0;border-radius:12px;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.7),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .2s}
#exp .stamp.tilt::before{opacity:1}
#exp .stamp .in{display:block;position:relative;overflow:hidden;border-radius:7px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,40,60,.28)}
#exp .stamp .in svg{display:block;width:100%;height:auto}
#exp .stamp .in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,rgba(255,255,255,.32),rgba(255,255,255,0) 42%)}
#exp .stamp .pie{display:flex;align-items:center;justify-content:space-between;height:12px;margin-top:5px;padding:0 3px}
#exp .stamp .pie .pp{display:flex;gap:3px}
#exp .stamp .pie .pp i{width:6px;height:6px;border-radius:50%;background:var(--line)}
#exp .stamp .pie.d1 .pp i.on{background:var(--green)}
#exp .stamp .pie.d2 .pp i.on{background:var(--blue)}
#exp .stamp .pie.d3 .pp i.on{background:var(--orange)}
#exp .stamp .pie .sello{width:12px;height:12px;border-radius:50%;background:conic-gradient(from var(--hang,0deg),#ff8fb1,#ffe08a,#9ff0b4,#8fd8ff,#d6a8ff,#ff8fb1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 0 0 1px rgba(0,0,0,.08);animation:ex-holo 5s linear infinite}
#exp .stamp .star{position:absolute;right:-9px;top:-9px;width:24px;height:24px;z-index:4;animation:ex-twk 1.6s ease-in-out infinite}
@keyframes ex-twk{50%{transform:scale(1.2) rotate(20deg)}}
#exp .stamp.sel{transform:translateY(-12px) perspective(700px) rotateX(var(--tx)) rotateY(var(--ty)) rotate(calc(var(--rot,0deg) * -2)) scale(1.05);border-color:var(--blue);box-shadow:0 14px 24px rgba(28,176,246,.38)}
#exp .stamp.sel::after{content:"";position:absolute;inset:-6px;border:3px solid var(--blue);border-radius:18px;pointer-events:none;opacity:.4;animation:ex-selp .3s cubic-bezier(.3,1.8,.5,1)}
@keyframes ex-selp{from{transform:scale(1.15);opacity:0}}
#exp .stamp.deal{animation:ex-deal .45s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes ex-deal{from{transform:translate(30px,-140px) rotate(40deg) scale(.4);opacity:0}}
#exp .stamp.out{animation:ex-out .34s ease-in forwards}
@keyframes ex-out{to{transform:translateY(-100px) rotate(-25deg) scale(.3);opacity:0}}
#exp .stamp.dim{opacity:.35;filter:grayscale(.6)}
#exp .stamp.golpe{animation:ex-golpe .42s cubic-bezier(.3,1.8,.5,1)!important;z-index:5}
@keyframes ex-golpe{30%{transform:translateY(-16px) perspective(700px) rotate(calc(var(--rot,0deg) * -3)) scale(1.2);filter:brightness(1.2) saturate(1.2)}}
#exp .stamp .onda{position:absolute;inset:-4px;border-radius:17px;border:3px solid var(--pc,var(--blue));pointer-events:none;z-index:4;animation:ex-onda .55s ease-out forwards}
@keyframes ex-onda{from{transform:scale(.92);opacity:1}to{transform:scale(1.45);opacity:0}}
/* Mejoras */
#exp .stamp.en-gold{--bd:#c99400;background:linear-gradient(135deg,#fff4c4 0%,#ffd45c 28%,#fff1b8 46%,#e9ad12 70%,#ffe08a 100%);box-shadow:0 0 14px rgba(255,190,0,.45)}
#exp .stamp.en-gold .in{box-shadow:0 0 0 2px #fff6d0,0 0 0 4px #c99400,0 2px 6px rgba(120,80,0,.3)}
#exp .stamp.en-gold::before{opacity:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 47%,transparent 60%) 0 0/260% 100% no-repeat;mix-blend-mode:overlay;animation:ex-oro 3.2s ease-in-out infinite}
#exp .stamp.en-gold.tilt::before{animation:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.9),rgba(255,255,255,0) 50%)}
@keyframes ex-oro{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
#exp .stamp.en-holo{border-color:transparent;background:linear-gradient(var(--pf),var(--pf)) padding-box,conic-gradient(from var(--hang,0deg),#ff4b4b,#ffc800,#58cc02,#1cb0f6,#ce82ff,#ff4b4b) border-box;animation:ex-holo 3s linear infinite;box-shadow:0 0 14px rgba(206,130,255,.4)}
#exp .stamp.en-holo::before{z-index:0;opacity:1;background:linear-gradient(115deg,transparent 18%,rgba(255,90,170,.7) 30%,rgba(255,215,80,.7) 40%,rgba(90,230,150,.7) 50%,rgba(70,185,255,.7) 60%,rgba(190,120,255,.7) 70%,transparent 82%) 0 0/300% 300%;mix-blend-mode:soft-light;animation:ex-pelicula 4s ease-in-out infinite alternate}
#exp .stamp.en-holo.tilt::before{animation:none;background-position:var(--mx) var(--my)}
@keyframes ex-pelicula{from{background-position:0% 0%}to{background-position:100% 100%}}
/* Rubí: la mejor. Como la brillante pero más rica: marco nacarado rosa, borde grueso de rubí, rosa y oro que gira, película de luz
 en el marco (nunca sobre la bandera), aura roja y dorada que late y tres destellos que parpadean (.brillos, lo pone cardFace) */
#exp .stamp.en-ruby{border-color:transparent;border-width:3px 3px 6px;background:linear-gradient(160deg,#fff6f8,#ffe0e7 48%,#fff1f4) padding-box,conic-gradient(from var(--hang,0deg),#b3001e,#ff4d6d,#ffd23f,#fff3c4,#ff4d6d,#b3001e,#ff8fa3,#ffd23f,#b3001e) border-box;animation:ex-holo 2.2s linear infinite,ex-rubyglow 1.8s ease-in-out infinite}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #exp .stamp.en-ruby{background:linear-gradient(160deg,#3a1520,#561d2c 48%,#3a1520) padding-box,conic-gradient(from var(--hang,0deg),#b3001e,#ff4d6d,#ffd23f,#fff3c4,#ff4d6d,#b3001e,#ff8fa3,#ffd23f,#b3001e) border-box}}
:root[data-theme="dark"] #exp .stamp.en-ruby{background:linear-gradient(160deg,#3a1520,#561d2c 48%,#3a1520) padding-box,conic-gradient(from var(--hang,0deg),#b3001e,#ff4d6d,#ffd23f,#fff3c4,#ff4d6d,#b3001e,#ff8fa3,#ffd23f,#b3001e) border-box}
#exp .stamp.en-ruby::before{z-index:0;opacity:1;background:linear-gradient(115deg,transparent 15%,rgba(255,40,80,.75) 28%,rgba(255,210,80,.75) 38%,rgba(255,255,255,.85) 46%,rgba(255,120,160,.75) 56%,rgba(255,40,80,.75) 66%,transparent 80%) 0 0/300% 300%;mix-blend-mode:soft-light;animation:ex-pelicula 3s ease-in-out infinite alternate}
#exp .stamp.en-ruby.tilt::before{animation:none;background-position:var(--mx) var(--my)}
#exp .stamp.en-ruby .in{box-shadow:0 0 0 2px #fff,0 0 0 4px #ff8fa3,0 3px 10px rgba(179,0,30,.35)}
@keyframes ex-rubyglow{0%,100%{box-shadow:0 0 12px rgba(224,38,60,.45),0 0 0 rgba(255,190,60,0)}50%{box-shadow:0 0 20px rgba(224,38,60,.7),0 0 34px rgba(255,190,60,.45)}}
#exp .stamp .brillos{position:absolute;inset:0;pointer-events:none;z-index:5}
#exp .stamp .brillos i,#exp .stamp .brillos::before,#exp .stamp .brillos::after{content:"";position:absolute;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.6 5 11 7.4 16 8 11 8.6 8.6 11 8 16 7.4 11 5 8.6 0 8 5 7.4 7.4 5 8 0z' fill='%23fff6c8' stroke='%23ffb300' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;animation:ex-brillo 1.8s ease-in-out infinite}
#exp .stamp .brillos i{right:6%;top:-7px}
#exp .stamp .brillos::before{left:-6px;top:45%;width:11px;height:11px;animation-delay:.6s}
#exp .stamp .brillos::after{right:-5px;bottom:12%;width:12px;height:12px;animation-delay:1.2s}
@keyframes ex-brillo{0%,100%{transform:scale(0) rotate(0);opacity:0}45%{transform:scale(1.15) rotate(45deg);opacity:1}70%{transform:scale(.8) rotate(70deg);opacity:.9}}
#exp .stamp .enb{position:absolute;left:-6px;top:-7px;z-index:4;font-family:var(--fd);font-size:11px;color:#fff;border-radius:8px;padding:1px 6px;border:2px solid #fff}
#exp .enb.gold{background:#e0a800}
#exp .enb.holo{background:linear-gradient(90deg,#ff4b4b,#ffc800,#58cc02,#1cb0f6)}
#exp .enb.ruby{background:linear-gradient(90deg,#b3001e,#ff4d6d,#e0a800)}
@property --hang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ex-holo{to{--hang:360deg}}
/* Reverso (aduana Boca abajo): azul noche con las cuatro franjas del logo */
#exp .stamp .in .back{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(135deg,#2b3d4f,#1a2734);font-family:var(--fd);font-size:30px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
#exp .stamp .in .back::after{content:"";position:absolute;left:18%;right:18%;bottom:12%;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--green) 0 25%,var(--blue) 25% 50%,var(--yellow) 50% 75%,var(--red) 75%)}
#exp .stamp.covered .in{box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,40,60,.28)}
#exp .gray .in svg{filter:grayscale(1) contrast(1.15)}
#exp .mir .in svg{transform:scaleX(-1)}
#exp .pts{position:absolute;z-index:5;pointer-events:none;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;font-size:17px!important;border-radius:50%;background:var(--pc,var(--blue));color:#fff;font-family:var(--fd);font-size:19px;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.2);animation:ex-stk .4s cubic-bezier(.2,1.9,.4,1) forwards}
@keyframes ex-stk{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(var(--r,-8deg))}}
#exp .actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
#exp .hint{color:var(--mute);font-size:13px;text-align:center;min-height:18px;font-weight:800}
#exp .hint.tip{color:var(--blue)}
#exp .ov{position:fixed;inset:0;background:var(--shade);display:flex;align-items:center;justify-content:center;z-index:20;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
#exp .panel{background:var(--card);border-radius:26px;padding:20px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 0 rgba(0,0,0,.12),0 20px 50px rgba(0,0,0,.25);animation:ex-pin .4s cubic-bezier(.2,1.6,.4,1);max-height:100%;overflow:auto;position:relative}
@keyframes ex-pin{from{transform:scale(.7) rotate(-3deg);opacity:0}}
#exp .panel h2{margin:0;font-family:var(--fd);font-weight:400;font-size:30px;text-align:center;line-height:1.05;text-wrap:balance}
#exp .panel p{margin:0;color:var(--mute);line-height:1.45;font-weight:700;text-align:center}
#exp .tip{font-size:13px;color:var(--mute);text-align:center}
#exp .hero{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:end}
#exp .hero img{width:110px;animation:ex-idle2 2.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes ex-idle2{50%{transform:scale(1.03,.97)}}
#exp .say{position:relative;background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 12px;font-size:15px;line-height:1.35;font-weight:800;margin-bottom:30px}
#exp .say::after{content:"";position:absolute;left:-10px;bottom:14px;width:16px;height:16px;background:var(--bg2);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
#exp .logo{font-family:var(--fd);font-size:clamp(40px,12vw,54px);text-align:center;line-height:.95;color:var(--blue);-webkit-text-stroke:0;text-shadow:0 4px 0 var(--blue-d);transform:rotate(-3deg);letter-spacing:.5px}
#exp .logo span{display:block;font-size:.42em;color:var(--orange);text-shadow:0 3px 0 #c76f00;transform:rotate(2deg)}
#exp .demo{display:flex;justify-content:center;align-items:flex-end;gap:8px;position:relative;padding:4px 0 28px}
#exp .demo .stamp{width:80px}
#exp .demo .ltag{position:absolute;bottom:0;left:50%;transform:translateX(-50%) rotate(-3deg)}
#exp .steps{display:flex;flex-direction:column;gap:9px}
#exp .step{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;text-align:left}
#exp .step b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;font-family:var(--fd);font-weight:400}
#exp .step div{font-weight:700;color:var(--ink);line-height:1.4;font-size:15px}
#exp .step div em{font-style:normal;color:var(--mute)}
#exp .nm .bigstamp{width:min(290px,84%);margin:0 auto;--rot:-2deg;padding:9px 9px 6px}
#exp .nm .bigstamp .pie{height:20px;margin-top:8px}
#exp .nm .bigstamp .pie .pp{gap:5px}
#exp .nm .bigstamp .pie .pp i{width:10px;height:10px}
#exp .nm .bigstamp .pie .sello{width:20px;height:20px}
#exp .nm .dots{display:flex;gap:6px;justify-content:center}
#exp .nm .dots i{width:12px;height:12px;border-radius:6px;background:var(--line)}
#exp .nm .dots i.cur{background:var(--blue);transform:scale(1.25)}
#exp .nm .dots i.ok{background:var(--green)}
#exp .nm .dots i.no{background:var(--red)}
#exp .nm input{box-sizing:border-box;font-family:var(--f);font-weight:900;font-size:20px;text-align:center;padding:13px;border-radius:16px;border:2px solid var(--blue);border-bottom-width:4px;background:var(--card);color:var(--ink);width:100%}
#exp .nm .row2{display:grid;grid-template-columns:1fr 2fr;gap:10px}
#exp .nm .fb{min-height:26px;text-align:center;font-size:19px;font-family:var(--fd);color:var(--green)}
#exp .nm .fb.no{color:var(--red)}
#exp .tbar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
#exp .tbar i{display:block;height:100%;background:var(--red);width:100%}
/* Racha: alto fijo para que el panel no salte al subir de tramo. Cada tramo: llama más grande, más rápida y con más brillo */
#exp .streak{display:flex;justify-content:center;align-items:center;gap:4px;height:36px;--vel:.9s}
#exp .streak.on{animation:ex-stkin .35s cubic-bezier(.2,1.8,.4,1)}
#exp .streak svg{width:var(--tam);height:var(--tam);overflow:visible}
#exp .streak b{font-family:var(--fd);font-weight:400;font-size:var(--txt);line-height:1;color:var(--col)}
#exp .streak .f1,#exp .streak .f2,#exp .streak .f3{transform-box:fill-box;transform-origin:50% 100%;animation:ex-llama var(--vel) ease-in-out infinite}
#exp .streak .f2{animation-delay:-.15s}
#exp .streak .f3{animation-delay:-.3s}
#exp .streak .ch{animation:ex-chispa 1.1s ease-out infinite}
#exp .streak.n1{--tam:24px;--txt:20px;--col:var(--orange)}
#exp .streak.n2{--tam:30px;--txt:24px;--col:#ff6a1a;--vel:.6s}
#exp .streak.n3{--tam:34px;--txt:28px;--col:#f0361c;--vel:.4s}
#exp .streak.n3 svg{filter:drop-shadow(0 0 5px rgba(255,90,0,.65))}
#exp .streak.n4{--tam:38px;--txt:32px;--col:var(--blue);--vel:.28s}
#exp .streak.n4 svg{filter:drop-shadow(0 0 7px rgba(40,160,255,.85))}
#exp .streak.n3 b,#exp .streak.n4 b{animation:ex-stkx .7s ease-in-out infinite}
@keyframes ex-stkin{0%{transform:scale(.5)}100%{transform:scale(1)}}
@keyframes ex-llama{33%{transform:scale(.95,1.08) skewX(-3deg)}66%{transform:scale(1.04,.96) skewX(3deg)}}
@keyframes ex-chispa{0%{transform:translateY(4px);opacity:0}25%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
@keyframes ex-stkx{50%{transform:scale(1.1)}}
#exp .shake{animation:ex-shk .35s}
@keyframes ex-shk{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
#exp .verdict{position:absolute;left:50%;top:30%;z-index:4;font-family:var(--fd);font-size:44px;color:#fff;padding:2px 22px;border-radius:18px;transform:translate(-50%,-50%) rotate(-8deg);box-shadow:0 6px 0 rgba(0,0,0,.2);animation:ex-verd .45s cubic-bezier(.2,1.9,.4,1) forwards;pointer-events:none}
#exp .verdict.ok{background:var(--green)}
#exp .verdict.no{background:var(--red)}
@keyframes ex-verd{from{transform:translate(-50%,-50%) rotate(-8deg) scale(0)}}
#exp .customs{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:end}
#exp .customs img{width:96px;animation:ex-robo 1.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes ex-robo{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
#exp .customs .say{margin-bottom:34px}
#exp .hazard{height:16px;border-radius:8px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,#2f3a44 14px 28px)}
#exp .rulecard{background:var(--bg2);border:3px solid var(--red);border-radius:16px;padding:12px 14px;text-align:center}
#exp .rulecard b{display:block;font-family:var(--fd);font-weight:400;font-size:26px;color:var(--red);line-height:1.1}
#exp .rulecard span{font-size:15px;font-weight:800}
#exp .choose{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#exp .pc{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;animation:ex-sew .6s cubic-bezier(.2,1.6,.4,1) backwards;color:#fff}
@keyframes ex-sew{from{transform:scale(.2) rotate(-40deg);opacity:0}}
#exp .pc .patch{width:76px;height:76px;pointer-events:none;transition:transform .2s cubic-bezier(.3,1.6,.5,1);border-width:4px}
#exp .pc .patch svg{width:44px;height:44px}
#exp .pc .lab{background:#fff;color:#2f3a44;border-radius:12px;padding:7px 6px;font-size:11.5px;line-height:1.3;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.18)}
#exp .pc .lab b{display:block;font-family:var(--fd);font-weight:400;font-size:15px;color:var(--strap);margin-bottom:2px}
#exp .pc:hover .patch,#exp .pc:focus-visible .patch{transform:rotate(-10deg) scale(1.1)}
#exp .float{position:fixed;pointer-events:none;font-family:var(--fd);font-size:22px;z-index:40;animation:ex-flo 1s ease-out forwards;text-shadow:0 2px 0 rgba(0,0,0,.15)}
@keyframes ex-flo{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{transform:translate(-50%,-10px) scale(1.25);opacity:1}100%{transform:translate(-50%,-60px) scale(1);opacity:0}}
#exp .slam{position:fixed;left:50%;top:42%;z-index:45;pointer-events:none;width:300px;height:300px;margin:-150px 0 0 -150px;display:grid;place-items:center;animation:ex-slam 1.25s cubic-bezier(.2,1.6,.4,1) forwards}
#exp .slam .txt{position:relative;font-family:var(--fd);font-size:clamp(46px,14vw,74px);color:#fff;line-height:1;text-align:center;-webkit-text-stroke:7px #24323f;paint-order:stroke fill;transform:rotate(-6deg);white-space:nowrap}
#exp .slam .txt small{display:block;font-size:.34em;-webkit-text-stroke:5px #24323f;color:var(--yellow);letter-spacing:1px}
@keyframes ex-slam{0%{transform:scale(0) rotate(-20deg);opacity:0}18%{transform:scale(1.15);opacity:1}28%{transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
#exp .win{position:fixed;inset:0;z-index:44;pointer-events:none;display:grid;place-items:center}
#exp .win img{position:absolute;bottom:-20px;left:50%;height:min(52vh,400px);transform:translateX(-50%);animation:ex-winpop 1.6s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes ex-winpop{0%{transform:translate(-50%,100%)}25%{transform:translate(-50%,-6%) scale(1.04,.96)}35%{transform:translate(-50%,0)}80%{transform:translate(-50%,0)}100%{transform:translate(-50%,110%)}}
#exp #app.quake{animation:ex-quake .5s}
@keyframes ex-quake{10%{transform:translate(calc(var(--q,1) * -7px),calc(var(--q,1) * 5px)) rotate(calc(var(--q,1) * -.6deg))}25%{transform:translate(calc(var(--q,1) * 8px),calc(var(--q,1) * -6px)) rotate(calc(var(--q,1) * .6deg))}40%{transform:translate(calc(var(--q,1) * -6px),calc(var(--q,1) * -3px))}55%{transform:translate(calc(var(--q,1) * 4px),calc(var(--q,1) * 5px))}70%{transform:translate(calc(var(--q,1) * -3px),calc(var(--q,1) * 2px))}85%{transform:translate(calc(var(--q,1) * 2px),calc(var(--q,1) * -1px))}}
#exp #expfx{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
#exp .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#exp .stats div{background:var(--bg2);border-radius:14px;padding:10px;text-align:center;border:2px solid var(--line)}
#exp .stats small{display:block;font-size:11px;color:var(--mute);letter-spacing:1px;text-transform:uppercase}
#exp .stats b{font-size:26px;font-family:var(--fd);font-weight:400}
#exp .endhero{display:flex;justify-content:center;margin:-6px 0 -6px}
#exp .endhero img{height:150px;animation:ex-idle2 2.2s ease-in-out infinite;transform-origin:50% 100%}
@media (max-width:430px){#exp .fl{width:24px;height:38px;font-size:24px}
#exp .ticket .big{font-size:22px}
#exp .patch,#exp .pslot{width:44px;height:44px}
#exp .board{grid-template-columns:70px 1fr}
#exp .mascot img{height:96px}}
@media (prefers-reduced-motion:reduce){#exp *{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}
#exp .hdrbtns{display:flex;gap:6px;align-items:center;margin-left:auto}
#exp .ib{font-family:var(--fd);font-size:12px;height:32px;border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);color:var(--blue);padding:0 10px;letter-spacing:.3px}
#exp .tix{grid-template-columns:1fr auto auto auto!important}
#exp .ticket.mini{min-width:58px!important;padding:7px 6px!important}
#exp .ticket.co .big{color:#e0a800;display:flex;align-items:center;gap:3px;justify-content:center}
#exp .coin{display:inline-block;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe36b,#ffc800 60%,#e0a800);border:2px solid #b88400;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);flex:0 0 auto;vertical-align:-2px}
#exp .coin.b{width:22px;height:22px}
#exp .deckinfo{font-size:11px;color:var(--mute);text-align:right;letter-spacing:.5px;margin-top:-4px}
#exp .ticket.score .row{flex-wrap:nowrap;white-space:nowrap}
#exp .ticket.score .big{font-size:22px}
#exp .ticket.score .tg{font-size:12px}
#exp .shopbar{position:sticky;bottom:-20px;background:var(--card);padding:10px 0 4px;margin-bottom:-4px;z-index:3}
#exp .shopbar .btn{font-size:17px;padding:12px 8px;white-space:nowrap}
#exp .shop{gap:10px!important}
#exp .item{padding:8px 5px 7px}
#exp .item .patch{width:54px;height:54px}
#exp .bgc{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:auto;filter:saturate(1.05)}
#exp.livebg{background:var(--bg)!important}
#exp.livebg::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.35) 2px,transparent 2.6px) 0 0/26px 26px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #exp.livebg::before{background:radial-gradient(circle,rgba(255,255,255,.06) 2px,transparent 2.6px) 0 0/26px 26px}}
:root[data-theme="dark"] #exp.livebg::before{background:radial-gradient(circle,rgba(255,255,255,.06) 2px,transparent 2.6px) 0 0/26px 26px}
#exp .stickers{z-index:0}
#exp .hand .stamp{animation:ex-cbob 3.2s ease-in-out var(--bob,0s) infinite}
#exp .hand .stamp.en-holo{animation:ex-cbob 3.2s ease-in-out var(--bob,0s) infinite,ex-holo 3s linear infinite}
#exp .hand .stamp.en-ruby{animation:ex-cbob 3.2s ease-in-out var(--bob,0s) infinite,ex-holo 2.2s linear infinite,ex-rubyglow 1.8s ease-in-out infinite}
#exp .hand .stamp.deal{animation:ex-deal .45s cubic-bezier(.2,1.5,.4,1) backwards,ex-cbob 3.2s ease-in-out .5s infinite}
@keyframes ex-cbob{50%{translate:0 -3px}}
#exp .hand .stamp.out{animation:ex-out .34s ease-in forwards}
#exp .hand .stamp:hover:not(.sel){scale:1.05}
#exp .stamp .in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.1) 55%,transparent 62%);transform:translateX(-120%);animation:ex-glint 7s ease-in-out infinite;animation-delay:var(--gd,0s)}
@keyframes ex-glint{0%,86%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
#exp .board{transition:box-shadow .3s}
#exp .board.onfire{border-color:#ff9600;box-shadow:0 0 0 3px rgba(255,150,0,.35),0 0 28px rgba(255,90,0,.45)}
#exp .board.onfire::before{content:"";position:absolute;left:8px;right:8px;top:-18px;height:26px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,#ffd23f 0,#ff9600 35%,#ff4b4b 60%,transparent 72%);filter:blur(3px);animation:ex-flame .18s steps(2) infinite alternate;transform-origin:50% 100%}
@keyframes ex-flame{from{transform:scaleY(.85) skewX(-3deg)}to{transform:scaleY(1.15) skewX(3deg)}}
#exp .board.onfire .fl{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 0 12px var(--acc)}
#exp .flash{position:fixed;inset:0;z-index:49;pointer-events:none;background:#fff;animation:ex-flash .35s ease-out forwards}
@keyframes ex-flash{from{opacity:.35}to{opacity:0}}
#exp .spark{position:fixed;z-index:48;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;background:radial-gradient(circle,#fff 0,#fff6b0 30%,rgba(255,200,0,0) 70%);border-radius:50%;animation:ex-spk .6s ease-out forwards}
@keyframes ex-spk{from{transform:translate(0,0) scale(1.4)}to{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}}
#exp .flaps.glow .fl{animation:ex-fglow .4s ease-out}
@keyframes ex-fglow{0%{filter:brightness(1.8);transform:scale(1.15)}100%{filter:none;transform:none}}
#exp .btn:disabled{opacity:1!important;filter:saturate(.3) brightness(1.12);box-shadow:none}
#exp .menu .heroimg .bubble{left:auto!important;right:0;top:-4px!important;white-space:normal;max-width:170px;text-align:center}
#exp .menu .heroimg .bubble::after{display:none}
#exp .rulestrip{background:var(--red);color:#fff;font-weight:900;font-size:13px;border-radius:12px;padding:6px 12px;text-align:center;box-shadow:0 3px 0 var(--red-d);margin-top:-2px}
#exp .patch.rar-c{border-color:#fff}
#exp .patch.rar-r{border-color:#1cb0f6;box-shadow:0 3px 0 rgba(0,0,0,.2),0 0 0 2px #fff}
#exp .patch.rar-e{border-color:#ce82ff;box-shadow:0 3px 0 rgba(0,0,0,.2),0 0 0 2px #fff,0 0 12px rgba(206,130,255,.7)}
#exp .patch.rar-l{border-color:transparent;background:var(--tela),linear-gradient(var(--pc),var(--pc)),conic-gradient(from var(--hang,0deg),#ffd23f,#fff6b0,#ffb300,#fff6b0,#ffd23f);background-clip:padding-box,padding-box,padding-box,padding-box,border-box;background-origin:padding-box,padding-box,padding-box,padding-box,border-box;box-shadow:0 3px 0 rgba(0,0,0,.2),0 0 16px rgba(255,200,0,.85);animation:ex-holo 2.5s linear infinite}
#exp .patch.rar-l::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle at 20% 15%,#fff 0 2px,transparent 3px),radial-gradient(circle at 85% 30%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 70% 90%,#fff 0 2px,transparent 3px);animation:ex-twk 1.4s ease-in-out infinite;pointer-events:none}
#exp .item.it-r{border-color:#9fdcfb;background:linear-gradient(#eaf7ff,var(--bg2))}
#exp .item.it-e{border-color:#ce82ff;background:linear-gradient(#f6ecff,var(--bg2))}
#exp .item.it-l{border-color:#ffc800;background:linear-gradient(#fff6cc,var(--bg2));box-shadow:0 0 18px rgba(255,200,0,.55)}
#exp .item.it-l::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-100%);animation:ex-glint 2.4s ease-in-out infinite;pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #exp .item.it-r{background:linear-gradient(#123247,var(--bg2))}
:root:not([data-theme="light"]) #exp .item.it-e{background:linear-gradient(#2c1a40,var(--bg2))}
:root:not([data-theme="light"]) #exp .item.it-l{background:linear-gradient(#3d3200,var(--bg2))}}
:root[data-theme="dark"] #exp .item.it-r{background:linear-gradient(#123247,var(--bg2))}
:root[data-theme="dark"] #exp .item.it-e{background:linear-gradient(#2c1a40,var(--bg2))}
:root[data-theme="dark"] #exp .item.it-l{background:linear-gradient(#3d3200,var(--bg2))}
#exp .rar.re{color:#a35ce0}
#exp .rbanner{position:fixed;left:50%;top:22%;z-index:46;pointer-events:none;font-family:var(--fd);font-size:34px;color:#fff;padding:6px 22px;border-radius:16px;transform:translate(-50%,-50%) rotate(-4deg);animation:ex-verd .5s cubic-bezier(.2,1.9,.4,1),ex-fade 1.8s forwards;white-space:nowrap}
#exp .rbanner.l{background:linear-gradient(90deg,#ffb300,#ffd23f,#ffb300);box-shadow:0 6px 0 #c78a00,0 0 30px rgba(255,200,0,.8);color:#4a3a00}
#exp .rbanner.e{background:#ce82ff;box-shadow:0 6px 0 #9a55cc}
#exp .alsec{grid-column:1/-1;font-family:var(--fd);font-size:15px;margin-top:4px}
#exp .alh{margin:2px 0 -6px;font-family:var(--fd);font-weight:400;font-size:21px}
#exp .alcartas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:4px}
#exp .alcartas .ac{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0}
#exp .alcartas .ac b{font-family:var(--fd);font-weight:400;font-size:14px;margin-top:4px}
#exp .alcartas .ac small{font-size:10.5px;line-height:1.25;color:var(--mute);font-weight:700}
#exp .alsec.as-c{color:var(--mute)}
#exp .alsec.as-r{color:#1cb0f6}
#exp .alsec.as-e{color:#a35ce0}
#exp .alsec.as-l{color:#e0a800}
#exp .slam{width:auto!important;height:auto!important;margin:0!important;transform:translate(-50%,-50%);animation:ex-slam2 1.25s cubic-bezier(.2,1.6,.4,1) forwards!important}
#exp .slam .glow{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,var(--sc) 0,transparent 62%);opacity:.55;animation:ex-gpulse 1.25s ease-out forwards;pointer-events:none}
@keyframes ex-gpulse{0%{transform:scale(.3)}40%{transform:scale(1)}100%{transform:scale(1.25);opacity:0}}
#exp .slam .plate{position:relative;background:var(--sc);border-radius:26px;padding:10px 30px 8px;box-shadow:0 7px 0 var(--sd),0 14px 30px rgba(0,0,0,.25);transform:rotate(-4deg);overflow:hidden}
#exp .slam .plate::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:rgba(255,255,255,.22);border-radius:26px 26px 40% 40%}
#exp .slam .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);animation:ex-pglint .9s .15s ease-out forwards}
@keyframes ex-pglint{to{transform:translateX(120%)}}
#exp .slam .txt{transform:none!important;-webkit-text-stroke:0!important;color:#fff;text-shadow:0 4px 0 var(--sd)}
#exp .slam .txt small{-webkit-text-stroke:0!important;color:#fff!important;opacity:.95;text-shadow:0 2px 0 var(--sd)}
#exp .slam .tw{position:absolute;width:16px;height:16px;pointer-events:none;animation:ex-tw 1.1s ease-out forwards}
#exp .slam .tw svg{width:100%;height:100%}
@keyframes ex-tw{0%{transform:scale(0) rotate(0)}40%{transform:scale(1.2) rotate(90deg)}100%{transform:scale(0) rotate(180deg)}}
@keyframes ex-slam2{0%{transform:translate(-50%,-50%) scale(0);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12);opacity:1}28%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(.96)}}
#exp .rlabel .tl{display:flex;align-items:center;gap:8px;min-width:0}
#exp .home{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);color:var(--blue);padding:0;display:grid;place-items:center}
#exp .home svg{display:block;width:18px;height:18px}
/* Regulador de volumen, a la derecha del título: el altavoz relleno y con trazo grueso para que pegue con la casa */
#exp .xsnd{position:relative;flex:0 0 auto}
#exp .xsnd svg{stroke-width:3}
#exp .xsnd svg path:first-child{fill:currentColor}
#exp .xsnd .off{color:var(--mute)}
#exp .xsndm{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);z-index:30;width:170px;padding:10px 14px 12px;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
#exp .xsndm[hidden]{display:none}
#exp .xsndm label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink)}
#exp .xsndm input{width:100%;margin:0;accent-color:var(--blue);cursor:pointer}
#exp .quit{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#exp .glogo{position:relative;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:2px 0 -6px}
#exp .glogo .word{position:relative;z-index:2;display:flex;font-family:var(--fd);font-size:clamp(40px,11.5vw,56px);line-height:1;letter-spacing:-.5px}
#exp .glogo .word span{display:inline-block;color:var(--lc);-webkit-text-stroke:7px #24323f;paint-order:stroke fill;text-shadow:0 6px 0 #24323f;transform:rotate(var(--lr));animation:ex-lwave 2.6s ease-in-out infinite;animation-delay:var(--ld)}
@keyframes ex-lwave{0%,60%,100%{translate:0 0}30%{translate:0 -7px}}
#exp .glogo .rib{position:relative;z-index:3;margin-top:8px;background:var(--yellow);color:#4a3a00;font-family:var(--fd);font-size:17px;letter-spacing:.5px;padding:5px 18px 4px;box-shadow:0 4px 0 var(--yellow-d);transform:rotate(-2deg)}
#exp .glogo .rib::before,#exp .glogo .rib::after{content:"";position:absolute;top:6px;width:20px;height:100%;background:var(--yellow-d);z-index:-1}
#exp .glogo .rib::before{left:-14px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
#exp .glogo .rib::after{right:-14px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
#exp .glogo .trail{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
#exp .glogo .gplane{position:absolute;z-index:4;width:34px;height:28px;left:0;top:0;offset-path:path('M20 120 C 60 10, 160 0, 200 40 S 330 120, 360 30');offset-rotate:auto;animation:ex-gfly 5s ease-in-out infinite;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}
@keyframes ex-gfly{0%{offset-distance:0%;opacity:0}8%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
#exp .glogo .gst{position:absolute;z-index:1;width:46px;border:3px solid #fff;border-radius:7px;overflow:hidden;box-shadow:0 4px 10px rgba(20,60,100,.25);animation:ex-bob 4s ease-in-out infinite}
#exp .glogo .gst svg{display:block;width:100%;height:auto}
#exp .menu{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding-top:6px}
#exp .menu .heroimg{display:flex;justify-content:center;position:relative;height:190px}
#exp .menu .heroimg img{height:190px;animation:ex-idle2 2.2s ease-in-out infinite;transform-origin:50% 100%;cursor:pointer}
#exp .menu .heroimg .bubble{left:58%;top:0}
#exp .menu .rec{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#exp .menu .rec div{background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;padding:8px;text-align:center}
#exp .menu .rec small{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
#exp .menu .rec b{font-family:var(--fd);font-weight:400;font-size:20px}
#exp .menu .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#exp .menu #msalir{align-self:flex-start;margin-bottom:-2px}   /* volver al menú del juego: arriba a la izquierda, como el "← Menú" de las demás pantallas */
#exp .btn.big{font-size:26px;padding:16px}
#exp .btn.daily{background:var(--yellow);border-bottom-color:var(--yellow-d);color:#4a3a00;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.1}
#exp .btn.daily small{font-family:var(--f);font-weight:900;font-size:12px;letter-spacing:0}
#exp .btn.w{background:var(--card);color:var(--blue);border:2px solid var(--line);border-bottom-width:5px;font-size:18px}
#exp .passes{display:flex;flex-direction:column;gap:10px}
#exp .pass{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;text-align:left;background:var(--card);border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:10px 12px;color:var(--ink)}
#exp .pass .pb{width:64px;height:80px;border-radius:10px;background:var(--pc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;font-family:var(--fd);font-size:11px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.15);position:relative}
#exp .pass .pb svg{width:30px;height:30px}
#exp .pass b{font-family:var(--fd);font-weight:400;font-size:20px;display:block}
#exp .pass span{font-size:13px;color:var(--mute);font-weight:700;line-height:1.35}
#exp .pass.lock{opacity:.55;filter:grayscale(.7)}
#exp .pass .pb .pblock{position:absolute;display:grid;place-items:center}#exp .pass .pb .pblock svg{width:26px;height:26px}
#exp .rulestrip .ic{vertical-align:-2px}
#exp .pass:not(.lock):hover{border-color:var(--blue)}
#exp .pay{display:flex;flex-direction:column;gap:6px}
#exp .pay div{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);border-radius:12px;padding:8px 12px;font-weight:900;animation:ex-payin .35s cubic-bezier(.2,1.5,.4,1) backwards}
#exp .pay div b{font-family:var(--fd);font-weight:400;font-size:20px;color:#e0a800;display:flex;align-items:center;gap:4px}
#exp .pay .tot{background:#fff6cc;border:2px solid var(--yellow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #exp .pay .tot{background:#3d3200}}
:root[data-theme="dark"] #exp .pay .tot{background:#3d3200}
@keyframes ex-payin{from{transform:translateX(-30px);opacity:0}}
#exp .shop{max-width:520px}
#exp .shop .top{display:flex;justify-content:space-between;align-items:center}
#exp .shop .wallet{font-family:var(--fd);font-size:28px;color:#e0a800;display:flex;align-items:center;gap:6px}
#exp .shop h3{margin:2px 0 -4px;font-family:var(--fd);font-weight:400;font-size:16px;color:var(--mute);letter-spacing:.5px}
#exp .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#exp .sgrid.two{grid-template-columns:repeat(2,1fr)}
#exp .item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg2);border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:10px 6px 8px;text-align:center;color:var(--ink);animation:ex-sew .5s cubic-bezier(.2,1.6,.4,1) backwards;min-width:0}
#exp .item .patch{width:60px;height:60px}
#exp .item .patch svg{width:36px;height:36px}
#exp .item .nm{font-family:var(--fd);font-size:15px;line-height:1.05}
#exp .item .ds{font-size:11.5px;color:var(--mute);font-weight:700;line-height:1.3}
#exp .item .rar{font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:900}
#exp .rar.rc{color:var(--blue)}
#exp .rar.rr{color:var(--red)}
#exp .rar.rl{color:#e0a800}
#exp .item .price{font-family:var(--fd);font-size:17px;display:flex;align-items:center;gap:4px;background:var(--yellow);color:#4a3a00;border-radius:10px;padding:2px 10px;margin-top:auto}
#exp .item.cant .price{background:var(--line);color:var(--mute)}
#exp .item.sold{visibility:hidden}
#exp .item .ico{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-family:var(--fd);color:#fff;font-size:22px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
#exp .item .ico svg{width:38px;height:38px}
/* Artículos de la tienda: con ratón se inclinan y brillan como las cartas (tilt() en expedicion.js); el parche sale hacia delante */
#exp .item{transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
#exp .item.tilt{transition:transform .08s linear,box-shadow .2s;box-shadow:0 12px 22px rgba(20,60,100,.18)}
#exp .item::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .2s}
#exp .item.tilt::after{opacity:1}
#exp .item .patch,#exp .item .ico{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#exp .item.tilt:not(.cant) .patch,#exp .item.tilt:not(.cant) .ico{transform:scale(1.12) rotate(-6deg)}
#exp .shopbar{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
#exp .mochi{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;background:var(--strap-bg,var(--strap));border-radius:14px;padding:8px;position:relative}
#exp .mochi .patch{width:46px;height:46px}
#exp .mochi .patch svg{width:27px;height:27px}
#exp .mochi .empty{color:rgba(255,255,255,.85);font-size:13px;padding:12px}
#exp .sellbox{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;min-height:40px;text-align:center}
#exp .pack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;perspective:600px}
#exp .pack .stamp{animation:ex-flipin .6s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes ex-flipin{0%{transform:rotateY(180deg) scale(.6);opacity:0}100%{transform:rotateY(0)}}
#exp .pack .cap{text-align:center;font-size:12px;font-weight:900;margin-top:4px}
#exp .pack.cerrado{display:none}
#exp .premioad{width:min(190px,60%);margin:0 auto;padding-top:6px}
/* Sobre de banderas (openPack): se balancea esperando; al abrirlo (.rasga) la tira de arriba sale volando y el sobre cae */
#exp .sobre{display:block;position:relative;width:150px;height:196px;margin:4px auto;padding:0;border:0;background:none;cursor:pointer;animation:ex-sobrein .5s cubic-bezier(.2,1.6,.4,1) backwards,ex-sobrebaila 1.4s ease-in-out .5s infinite}
@keyframes ex-sobrein{from{transform:translateY(-60px) scale(.6) rotate(-12deg);opacity:0}}
@keyframes ex-sobrebaila{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-4px)}}
#exp .sobre .tapa{position:absolute;left:0;right:0;top:0;height:32px;border-radius:16px 16px 0 0;background:linear-gradient(160deg,#6fd0fa,#1cb0f6);clip-path:polygon(0 0,100% 0,100% 72%,95% 100%,90% 72%,85% 100%,80% 72%,75% 100%,70% 72%,65% 100%,60% 72%,55% 100%,50% 72%,45% 100%,40% 72%,35% 100%,30% 72%,25% 100%,20% 72%,15% 100%,10% 72%,5% 100%,0 72%)}
#exp .sobre .cuerpo{position:absolute;left:0;right:0;top:26px;bottom:0;overflow:hidden;border-radius:0 0 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;color:#fff;text-align:center;background:repeating-radial-gradient(circle at 50% 42%,transparent 0 7px,rgba(255,255,255,.1) 7px 8px),linear-gradient(160deg,#1cb0f6,#8b5cf6);box-shadow:0 6px 0 rgba(0,0,0,.18),0 16px 30px rgba(40,90,200,.35)}
#exp .sobre .cuerpo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%) 0 0/260% 100% no-repeat;animation:ex-oro 2.4s ease-in-out infinite;pointer-events:none}
#exp .sobre b{font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.2)}
#exp .sobre .franjas{width:70%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) 0 25%,#fff 25% 50%,var(--yellow) 50% 75%,var(--red) 75%)}
#exp .sobre small{font-family:var(--fd);font-size:13px;letter-spacing:.5px;opacity:.9}
#exp .sobre.rasga{animation:none}
#exp .sobre.rasga .tapa{animation:ex-tapa .45s ease-in forwards}
@keyframes ex-tapa{to{transform:translate(70px,-90px) rotate(40deg);opacity:0}}
#exp .sobre.rasga .cuerpo{animation:ex-cuerpo .4s .12s ease-in forwards}
@keyframes ex-cuerpo{to{transform:translateY(70px) scale(.85);opacity:0}}
#exp .deckgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:52vh;overflow:auto;padding:4px}
#exp .deckgrid .stamp{padding:3px;border-radius:9px;border-bottom-width:3px}
#exp .deckgrid .stamp .in{border-radius:5px}
#exp .deckgrid .stamp.used{opacity:.3}
#exp .deckgrid .stamp .star{width:14px;height:14px;right:-5px;top:-5px}
#exp .deckgrid .stamp .enb{font-size:8px;padding:0 3px;left:-4px;bottom:-4px;border-width:1px}
@media (max-width:420px){#exp .deckgrid{grid-template-columns:repeat(5,1fr)}}
#exp .ctab{display:flex;flex-direction:column;gap:6px}
#exp .crow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;background:var(--bg2);border-radius:12px;padding:8px 10px}
#exp .crow b{font-family:var(--fd);font-weight:400;font-size:17px}
#exp .crow span.d{display:block;font-size:12px;color:var(--mute);font-weight:700}
#exp .crow .lv{font-family:var(--fd);background:var(--purple);color:#fff;border-radius:10px;padding:2px 8px;font-size:14px}
#exp .crow .vals{font-size:12px;font-weight:900;text-align:right;line-height:1.3}
#exp .crow .vals .c{color:var(--blue)}
#exp .crow .vals .m{color:var(--red)}
#exp .album{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#exp .album .a{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:11px;font-weight:900;color:var(--ink)}
#exp .album .a .patch{width:54px;height:54px}
#exp .album .a .patch svg{width:32px;height:32px}
#exp .album .a.no .patch{background:var(--line)!important;border-color:var(--line)}
#exp .album .a.no .patch svg{opacity:0}
#exp .album .a.no .patch::after{content:"?";position:absolute;font-family:var(--fd);font-size:24px;color:var(--mute)}
#exp .album .a.no span{color:var(--mute)}
#exp .album .a{background:none;border:0;padding:0}
#exp .lvup{position:fixed;left:50%;top:40%;z-index:46;pointer-events:none;font-family:var(--fd);font-size:30px;color:#fff;background:var(--purple);padding:8px 20px;border-radius:16px;transform:translate(-50%,-50%);box-shadow:0 6px 0 #9a55cc;animation:ex-verd .5s cubic-bezier(.2,1.9,.4,1),ex-fade 1.6s forwards}
@keyframes ex-fade{80%{opacity:1}100%{opacity:0}}
#exp .coinfly{position:fixed;z-index:47;pointer-events:none;animation:ex-cfly .8s cubic-bezier(.5,0,.5,1) forwards}
@keyframes ex-cfly{0%{transform:translate(0,0) scale(.5)}30%{transform:translate(0,-30px) scale(1.2)}100%{transform:translate(var(--tx),var(--ty)) scale(.6);opacity:.7}}
#exp .share{font-size:13px;background:var(--bg2);border:2px dashed var(--line);border-radius:12px;padding:10px;text-align:center;white-space:pre-line;user-select:all}
#exp .endless{font-family:var(--fd);color:var(--purple)}

/* PROGRESIÓN (v99): marcos de carta del camino, rango, diario de viaje, cumbres, kilómetros al acabar y aviso de reto. Ver docs/modo-expedicion.md */
/* Marcos (solo cartas normales; las mejoradas llevan el suyo). Los animados mueven el fondo (ex-fondo); en la mano se suman al balanceo */
#exp .stamp.mk-cielo{--bd:#8fd0f3;background:linear-gradient(160deg,#f1faff,#bfe6fb)}
#exp .stamp.mk-menta{--bd:#7fd8a8;background:linear-gradient(160deg,#effff6,#bff0d6)}
#exp .stamp.mk-atardecer{--bd:#ff9a8a;background:linear-gradient(160deg,#ffe8c9,#ffb3c8)}
#exp .stamp.mk-bosque{--bd:#3f8a30;background:radial-gradient(circle at 15% 90%,rgba(255,255,255,.18) 0 18%,transparent 19%),linear-gradient(160deg,#a8d98a,#4f9a3e)}
#exp .stamp.mk-arena{--bd:#d39a4a;background:radial-gradient(ellipse 120% 40% at 30% 110%,#e8b56a 0 50%,transparent 51%),linear-gradient(160deg,#fff4dc,#f2cf8f)}
#exp .stamp.mk-noche{--bd:#0b1220;background:radial-gradient(1.2px 1.2px at 12px 9px,#fff,transparent),radial-gradient(1px 1px at 31px 22px,#fff,transparent),radial-gradient(1.5px 1.5px at 22px 4px,#ffe08a,transparent),linear-gradient(160deg,#2b3c58,#0f1726);background-size:40px 30px,40px 30px,40px 30px,100% 100%}
#exp .stamp.mk-oceano{--bd:#0f4c9a;background:linear-gradient(180deg,#8fe3ff,#2a9fe8 35%,#1c6fd0 65%,#0f4c9a);background-size:100% 260%;animation:ex-fondo 5s ease-in-out infinite alternate}
#exp .stamp.mk-aurora{--bd:#5b3bbf;background:linear-gradient(120deg,#58cc02,#14b8a6,#1cb0f6,#8b5cf6,#ff6fae,#58cc02);background-size:300% 300%;animation:ex-fondo 7s ease-in-out infinite alternate}
#exp .stamp.mk-lava{--bd:#4a0a12;background:radial-gradient(circle at 25% 85%,rgba(255,210,63,.9),transparent 35%),radial-gradient(circle at 80% 20%,rgba(255,150,0,.7),transparent 40%),linear-gradient(160deg,#ff9600,#e0263c 55%,#5a0d16);background-size:180% 180%;animation:ex-fondo 4s ease-in-out infinite alternate;box-shadow:0 0 12px rgba(255,90,0,.35)}
#exp .stamp.mk-galaxia{--bd:#170a2e;background:radial-gradient(1.3px 1.3px at 8px 7px,#fff,transparent),radial-gradient(1px 1px at 27px 19px,#fff,transparent),radial-gradient(1.6px 1.6px at 17px 26px,#d6a8ff,transparent),radial-gradient(ellipse at 70% 30%,rgba(255,111,174,.45),transparent 55%),linear-gradient(160deg,#2a1450,#5b2a9a 50%,#1a0b33);background-size:36px 32px,36px 32px,36px 32px,200% 200%,100% 100%;animation:ex-fondo 9s ease-in-out infinite alternate;box-shadow:0 0 12px rgba(139,92,246,.35)}
@keyframes ex-fondo{from{background-position:0% 0%}to{background-position:100% 100%}}
#exp .hand .stamp:is(.mk-oceano,.mk-aurora,.mk-lava,.mk-galaxia){animation:ex-cbob 3.2s ease-in-out var(--bob,0s) infinite,ex-fondo 6s ease-in-out infinite alternate}
#exp .stamp:is(.mk-bosque,.mk-noche,.mk-oceano,.mk-aurora,.mk-lava,.mk-galaxia) .pie .pp i:not(.on){background:rgba(255,255,255,.3)}
/* Rango (menú, diario y final) */
#exp .rango{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:10px 14px 12px;color:var(--ink)}
/* Medalla: círculo dorado con el número y una cinta azul de dos puntas por detrás */
#exp .rango .rn{position:relative;width:54px;height:72px;display:block}
#exp .rango .rn .num{position:absolute;left:0;top:0;width:54px;height:54px;z-index:1;display:grid;place-items:center;border-radius:50%;font-family:var(--fd);font-size:27px;line-height:1;color:#fff;text-shadow:0 2px 0 rgba(160,85,0,.7);background:radial-gradient(circle at 34% 28%,#fff7c8 0 10%,#ffd23f 40%,#ff9f1a 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),inset 0 -4px 0 rgba(170,90,0,.25),0 0 0 3px #f0a800,0 4px 0 3px #c97800}
#exp .rango .rn .cinta{position:absolute;left:11px;right:11px;top:38px;height:34px;background:linear-gradient(90deg,#1cb0f6 0 50%,#1899d6 50%);clip-path:polygon(0 0,100% 0,100% 100%,78% 82%,56% 100%,56% 40%,44% 40%,44% 100%,22% 82%,0 100%)}
#exp .rango .ri{display:flex;flex-direction:column;gap:4px;min-width:0}
#exp .rango .ri .rl{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--orange);font-weight:900}
#exp .rango .ri b{font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.05}
#exp .rango .rb{display:block;height:10px;border-radius:6px;background:var(--line);overflow:hidden}
#exp .rango .rb i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--yellow),var(--orange));transition:width .8s cubic-bezier(.2,1,.3,1)}
#exp .rango .ri small{font-size:11px;color:var(--mute);font-weight:800}
#exp .menu #mrango:hover{border-color:var(--yellow)}
/* Diario de viaje */
#exp .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg2);border-radius:14px;padding:4px}
#exp .tabs button{border:0;background:none;border-radius:10px;padding:8px 4px;font-family:var(--fd);font-weight:400;font-size:15px;color:var(--mute)}
#exp .tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 0 var(--line)}
#exp .tabc{display:flex;flex-direction:column;gap:10px}
#exp .pasos,#exp .retos{display:flex;flex-direction:column;gap:6px}
#exp .paso{display:grid;grid-template-columns:30px 46px 1fr 20px;gap:10px;align-items:center;background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:6px 10px;opacity:.72}
#exp .paso.ok{opacity:1;border-color:var(--green)}
#exp .paso.sig{opacity:1;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,200,0,.25)}
#exp .paso .pnv{font-family:var(--fd);font-size:18px;text-align:center}
#exp .paso .pt{display:flex;flex-direction:column;min-width:0}
#exp .paso .pt small,#exp .premio small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);font-weight:900}
#exp .paso .pt b{font-family:var(--fd);font-weight:400;font-size:16px}
#exp .paso .st{color:var(--green);font-weight:900;font-size:18px}
#exp .muestra{display:block;flex:0 0 auto}
#exp .muestra.stamp{width:46px;padding:3px 3px 2px;border-width:2px 2px 3px;border-radius:8px;transform:none}
#exp .muestra.stamp .in{border-radius:4px}
#exp .muestra.mo{width:46px;height:30px;border-radius:9px;background:var(--strap-bg);box-shadow:0 3px 0 var(--strap-d);position:relative}
#exp .muestra.mo::before{content:"";position:absolute;inset:3px;border:1.5px dashed rgba(255,255,255,.6);border-radius:6px}
#exp .muestra.ti{width:46px;height:38px;display:grid;place-items:center;font-size:22px;color:#fff;border-radius:50%;background:conic-gradient(var(--yellow),var(--orange),var(--yellow));box-shadow:0 3px 0 #d97f00}
#exp .reto{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;background:var(--bg2);border:2px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px;font-weight:800}
#exp .reto .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:#fff;font-size:13px}
#exp .reto.ok{border-color:var(--green)}
#exp .reto.ok .ck{background:var(--green);border-color:var(--green)}
#exp .reto .rk{font-family:var(--fd);font-size:14px;color:var(--orange);white-space:nowrap}
#exp .reto.ok .rk{color:var(--mute)}
#exp .egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#exp .egrid.mo{grid-template-columns:repeat(5,1fr)}
#exp .eopt{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:4px;border-radius:12px;color:var(--ink);font-size:11px;font-weight:900;text-align:center}
#exp .eopt .stamp{transform:none}
#exp .eopt .muestra.mo{width:100%;height:34px}
#exp .eopt.on{background:var(--bg2);box-shadow:0 0 0 3px var(--blue)}
#exp .eopt.lock{opacity:.62}
#exp .eopt.lock .stamp,#exp .eopt.lock .muestra{filter:saturate(.75)}
#exp .eopt.lock small{color:var(--mute)}
/* Cumbres */
#exp .cumbres{display:flex;flex-direction:column;gap:8px}
#exp .cumbre{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--card);border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:8px 12px;color:var(--ink)}
#exp .cumbre:hover{border-color:var(--blue)}
#exp .cumbre.top{border-color:var(--orange)}
#exp .cumbre .cn{width:44px;height:40px;display:grid;place-items:end center;padding-bottom:3px;font-family:var(--fd);font-size:16px;color:#fff;background:linear-gradient(#8fa3b5,#5b7084);clip-path:polygon(50% 0,100% 100%,0 100%)}
#exp .cumbre.top .cn{background:linear-gradient(#fff 0 22%,#ff9600 23%,#d93a3a)}
#exp .cumbre .ct{display:flex;flex-direction:column;min-width:0}
#exp .cumbre .ct b{font-family:var(--fd);font-weight:400;font-size:18px}
#exp .cumbre .ct small{font-size:12px;color:var(--mute);font-weight:700}
#exp .cumbre i{font-style:normal;font-family:var(--fd);font-size:14px;color:var(--orange);white-space:nowrap}
#exp .pass .cucima{display:inline-block;margin-top:4px;font-style:normal;font-size:11px;font-weight:900;color:#fff;background:var(--orange);border-radius:8px;padding:1px 8px}
/* Kilómetros al acabar */
#exp .kmres{display:flex;flex-direction:column;gap:6px;background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px}
#exp .kmres h3{margin:0;font-family:var(--fd);font-weight:400;font-size:18px;text-align:center}
#exp .kmres .kr{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800}
#exp .kmres .kr b{font-family:var(--fd);font-weight:400;font-size:15px;color:var(--orange)}
#exp .kmres .kr.tot{border-top:2px dashed var(--line);padding-top:6px;font-size:15px}
#exp .kmres .kr.tot b{font-size:19px}
#exp .kmres .rango{pointer-events:none}
#exp .subes{display:flex;flex-direction:column;gap:6px;align-items:stretch;animation:ex-pin .5s cubic-bezier(.2,1.6,.4,1) .3s backwards}
#exp .subes>b{font-family:var(--fd);font-weight:400;font-size:20px;text-align:center;color:var(--orange)}
#exp .premio{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--yellow);border-radius:12px;padding:6px 10px;font-family:var(--fd);font-size:16px}
#exp .premio>span:last-child{display:flex;flex-direction:column}
#exp .hoy{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:800;color:var(--green)}
#exp .hoy small{color:var(--mute);letter-spacing:1px;text-transform:uppercase;font-size:10px}
/* Aviso de reto conseguido (arriba, se apilan) */
#exp .retook{position:fixed;left:50%;z-index:47;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;min-width:240px;max-width:calc(100% - 32px);background:var(--card);border:3px solid var(--yellow);border-radius:16px;padding:6px 16px;box-shadow:0 6px 0 rgba(0,0,0,.12),0 10px 30px rgba(255,170,0,.35);text-align:center;animation:ex-retook 2.8s cubic-bezier(.2,1.6,.4,1) forwards;pointer-events:none}
#exp .retook small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--orange);font-weight:900}
#exp .retook b{font-family:var(--fd);font-weight:400;font-size:16px;line-height:1.15}
#exp .retook i{font-style:normal;font-family:var(--fd);color:var(--orange)}
@keyframes ex-retook{0%{transform:translate(-50%,-40px) scale(.7);opacity:0}12%{transform:translate(-50%,0) scale(1);opacity:1}85%{opacity:1}100%{transform:translate(-50%,-20px);opacity:0}}