/* Piezas comunes (v3 «Pop con caramelo»): marcador (HUD), rótulos de resultado, rasca, flujo de premio, burbujas de WhatsApp,
   Cartera, rótulo de las 22:22 y «Desliza para empezar». El sistema (colores, letras, botones) está en base.css. */

[hidden]{display:none !important}

/* ---------- marcador de arriba (#hud): una tarjeta de tinta, fija arriba sobre el color de la pantalla ----------
   Izquierda, la prueba y la ronda; derecha, el dinero (cifras grandes en el color de la pantalla, o girasol sobre cobalto y tinta);
   debajo, el nivel de mimitos: un medidor hundido de 20 huecos que se llenan de chicle. */
:root{--acc:var(--bg)}
html[data-step="safe"],html[data-step="p2"],html[data-step="p4"],html[data-step="p5"]{--acc:var(--girasol)}
#hud{
  position:sticky;top:0;z-index:20;width:100%;max-width:480px;margin:0 auto;
  padding:calc(10px + var(--sat) + var(--rh)) calc(16px + var(--sar)) 8px calc(16px + var(--sal));
  background:var(--bg);transition:background-color .45s ease;
}
#hud:empty{display:none}
/* con el teclado abierto (ui/keyboard.js) el marcador deja de ir pegado arriba: si no, tapa el campo o el panel (revisión móvil I6) */
html.is-typing #hud{position:static}
/* con marcador, el aire de arriba ya lo pone el propio marcador y #app ocupa solo lo que queda de la pantalla */
body{display:flex;flex-direction:column}
#hud:not(:empty) + #app{min-height:0;flex:1;padding-top:var(--sp-4)}

.hud{padding:12px 18px 14px;border-radius:26px;background:var(--tinta);color:#fff}
.hud-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.hud-where{min-width:0}
.hud-title{display:block;font:700 13px/1.15 var(--ui);color:var(--lila);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-round{display:block;margin-top:3px;font:800 16px/1.1 var(--ui);color:#fff}
.hud-money{
  flex:none;display:flex;align-items:baseline;gap:3px;padding-top:4px;
  font:400 22px/1 var(--display);color:var(--acc);transform-origin:right center;
}
.hud-money b{font:400 40px/.9 var(--display);font-variant-numeric:tabular-nums;font-weight:400}
.hud-money.pop{animation:hud-pop .5s ease-out}
@keyframes hud-pop{35%{transform:scale(1.12)}}

.hud-mimitos{display:flex;align-items:center;gap:var(--sp-3);margin-top:10px}
.hud-label{flex:none;font:700 13px/1 var(--ui);color:var(--lila)}
/* el medidor hundido: el hueco (tinta honda), 20 huecos (tinta-2) y lo lleno (chicle, crece con scaleX desde hud.js) */
.hud-track{flex:1;padding:3px;border-radius:9px;background:var(--tinta-d)}
.hud-segs{
  --seg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12' preserveAspectRatio='none'%3E%3Crect width='12' height='12' rx='4'/%3E%3C/svg%3E");
  display:block;height:11px;overflow:hidden;background:var(--tinta-2);
  -webkit-mask:var(--seg) 0 0/calc((100% + 3px) / 20) 100% repeat-x;
  mask:var(--seg) 0 0/calc((100% + 3px) / 20) 100% repeat-x;
}
.hud-segs i{display:block;width:100%;height:100%;background:var(--chicle);transform-origin:left center;transition:transform .5s ease}
.hud.is-falling .hud-label{color:var(--tomate)}
.hud.is-falling .hud-segs i{background:var(--tomate);animation:blink .5s 3}

@media (max-width:359px){
  .hud{padding:10px 14px 12px}
  .hud-round{font-size:15px}
  .hud-money b{font-size:34px}
}
/* pantallas bajas (el SE, y cualquier iPhone con las barras de Safari a la vista): marcador más prieto, unos 30 px menos */
@media (max-height:700px){
  #hud{padding-top:calc(6px + var(--sat) + var(--rh));padding-bottom:4px}
  .hud{padding:8px 14px 10px}
  .hud-round{font-size:15px}
  .hud-money b{font-size:30px}
  .hud-mimitos{margin-top:6px}
}

/* ---------- rótulos de resultado (lo que sale tras responder en todas las pruebas) ----------
   El dinero ganado, una píldora de tinta torcida con la cifra en el color de la pantalla; lo que pasó, una tarjeta de leche;
   el fallo, una tarjeta de tinta con letra blanca. Los contenedores (.quiz-feedback, .quiz-foot) separan con --sp-3. */
.quiz-gain{
  align-self:flex-start;display:inline-flex;align-items:center;height:48px;margin:0;padding:4px 20px 0;border-radius:var(--r-pill);
  background:var(--tinta);color:var(--acc);font:400 32px/1 var(--display);font-variant-numeric:tabular-nums;
  rotate:-3deg;animation:gain-in .45s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes gain-in{0%{transform:scale(.5);opacity:0}100%{transform:none;opacity:1}}
.quiz-fail,.tl-fail{
  margin:0;padding:15px 18px;border-radius:var(--r-tesela);text-align:left;text-wrap:pretty;
  background:var(--tinta);color:#fff;font:700 var(--fs-lead)/1.3 var(--ui);
}
.quiz-reveal,.map-result{
  margin:0;padding:15px 18px;border-radius:var(--r-tesela);text-align:left;text-wrap:pretty;
  background:var(--leche);color:var(--tinta);font:600 17px/1.4 var(--ui);
}
/* una sola cifra, sin frase que la acompañe (Línea del tiempo, ordenar canciones): sale grande y centrada */
.tl-gain,.mus-feedback > .quiz-gain:only-child{
  align-self:center;height:auto;margin:0;padding:10px 26px 6px;text-align:center;
  font:400 var(--t-l)/1 var(--display);
}

/* ---------- flujo de premio: rasca, revelación y Cartera (sobre chicle) ---------- */
.prize-screen{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5);-webkit-user-select:none;user-select:none}

/* el boleto: una hoja de leche un poco torcida, con su título y la zona de rascar (capa cobalto con lunares, ui/scratch.js) */
.ticket{
  position:relative;border-radius:var(--r-hoja);background:var(--leche);color:var(--tinta);padding:20px 16px 16px;
}
/* el canto, en el envoltorio (sigue la silueta del boleto torcido) */
.ticket-stage{rotate:-1.6deg;filter:drop-shadow(0 7px 0 var(--chicle-d))}
.ticket-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 6px 14px}
.ticket-head b{display:block;font:400 var(--t-l)/.9 var(--display)}
.ticket-head small{display:block;font:700 14px/1.2 var(--ui);color:#4B4470;text-align:right}
.ticket-scratch{position:relative}

.scratch{position:relative;height:clamp(200px,46vh,340px);height:clamp(200px,46svh,340px);border-radius:var(--r-tesela);overflow:hidden;background:var(--crema)} /* svh: el alto con las barras de Safari a la vista */
.scratch-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px 20px;text-align:center}
.scratch-text{margin:0;font:400 clamp(38px,12vw,46px)/.94 var(--display);text-wrap:balance;color:var(--tinta)}
.scratch-text.is-prize{color:var(--tinta)} /* «Pide a Mario…»: lo que tiene que hacer ahora */
.scratch-text.is-none{color:#4B4470;font:700 22px/1.3 var(--ui)}
/* con foto vuestra debajo: la foto a sangre y el texto en una tarjeta de leche abajo */
.scratch-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scratch-result:has(.scratch-photo){align-items:flex-end;padding:12px}
.scratch-result:has(.scratch-photo) .scratch-text{
  position:relative;width:100%;padding:14px 14px 10px;border-radius:16px;background:var(--leche);
  font-size:clamp(28px,8.6vw,34px);box-shadow:0 5px 0 rgba(10,6,36,.3);
}
.scratch-result:has(.scratch-photo) .scratch-text.is-none{font-size:18px}
.scratch-canvas{
  position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:opacity .48s;
}
.scratch-canvas.gone{opacity:0;pointer-events:none}
.scratch-canvas:focus-visible{outline:3px solid var(--tinta);outline-offset:-3px}

.prize-screen .btn{transition:opacity .3s,transform .08s ease,box-shadow .08s ease}
.prize-screen .btn.is-hidden{opacity:0;pointer-events:none}

/* ---------- burbujas de WhatsApp (Ane a la derecha, Mario a la izquierda): el WhatsApp de verdad, en una tarjeta con canto ---------- */
.chat{overflow:hidden;border-radius:var(--r-tesela);background:var(--wa-bg);box-shadow:0 var(--canto) 0 var(--tinta-d)}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#202C33;color:#E9EDEF}
.chat-head b{font:600 17px/1.2 system-ui,-apple-system,sans-serif}
.chat-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--chicle);color:var(--tinta);font:800 17px/1 var(--ui)}
.chat-body{
  display:flex;flex-direction:column;gap:3px;padding:12px 10px 14px;
  background:
    radial-gradient(circle at 20px 20px,rgba(255,255,255,.035) 2px,transparent 2.5px) 0 0/40px 40px,
    var(--wa-bg);
}
.chat-date{
  align-self:center;margin:8px 0 6px;padding:4px 12px;border-radius:8px;
  background:#182229;color:#8696A0;font:500 12.5px/1.2 system-ui,-apple-system,sans-serif;
}
.chat-msg{
  display:flow-root;position:relative;max-width:82%;padding:6px 9px 5px 10px;border-radius:9px;
  color:#E9EDEF;font:400 16px/1.3 system-ui,-apple-system,sans-serif;overflow-wrap:anywhere;
  box-shadow:0 1px .5px rgba(0,0,0,.3);
}
.chat-msg.own{align-self:flex-end;background:var(--wa-own)}
.chat-msg.other{align-self:flex-start;background:var(--wa-other)}
.chat-msg.tail{margin-top:6px}
.chat-msg.own.tail{border-top-right-radius:2px}
.chat-msg.other.tail{border-top-left-radius:2px}
.chat-text{white-space:pre-wrap}
.chat-meta{
  float:right;display:inline-flex;align-items:center;gap:3px;margin:8px 0 -3px 12px;
  color:rgba(233,237,239,.75);font:400 11px/1 system-ui,-apple-system,sans-serif; /* .75: 4,5:1 también sobre la burbuja verde */
}
.chat-meta svg{color:#53BDEB}

/* ---------- Cartera: pases de colores apilados, como en Apple Wallet, troquelados (borde blanco y canto) ---------- */
.wallet-title{margin:0 0 var(--sp-4);font:400 var(--t-l)/.92 var(--display);color:var(--fg)}
.wallet-stack{list-style:none;margin:0;padding:0 3px}
.pass-item{position:relative;animation:pass-in .5s both;animation-delay:calc(var(--i,0) * 110ms)}
.pass-item + .pass-item{margin-top:-34px}
@keyframes pass-in{from{opacity:0;transform:translateY(26px)}}

.pass{
  --pc:var(--leche); --pd:var(--leche-d);
  display:flex;align-items:flex-start;gap:14px;min-height:100px;padding:12px 16px 12px 12px;border-radius:var(--r-tesela);
  background:var(--pc);color:var(--tinta);box-shadow:0 0 0 3px #fff,0 7px 0 3px var(--pd);
}
.pass-panel{--pc:var(--leche);--pd:var(--leche-d)}
.pass-mcbesitos{--pc:var(--chicle);--pd:var(--chicle-d)}
.pass-morritocetamol{--pc:var(--menta);--pd:var(--menta-d)}
.pass-bando{--pc:var(--crema);--pd:#E3C9A0}
.pass-thumb{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;overflow:hidden;background:var(--tinta)}
.pass-thumb img{width:84%;height:84%;object-fit:contain}
/* arriba, como en Apple Wallet: la franja que deja ver el pase de delante es la de arriba */
.pass-info{min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:4px}
/* una sola línea (la tarjeta de debajo tapa el resto): «Panel de atención al pupi» es el título más largo */
.pass-info b{font:400 clamp(18px,5.1vw,27px)/1 var(--display);color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* entero en 375 y 390 */
.pass-info span{font:700 13px/1 var(--ui);color:var(--tinta)}

/* el vale no tiene camiseta: un pase de tinta con la letra en girasol y la matriz troquelada */
.pass-vale{--pc:var(--tinta);--pd:var(--tinta-d);gap:0;min-height:124px;padding:0;color:#fff}
.pass-vale-main{flex:1;display:flex;flex-direction:column;gap:5px;padding:16px 12px 16px 20px}
.pass-vale-main small{font:700 13px/1 var(--ui);color:var(--lila)}
.pass-vale-main b{font:400 46px/.9 var(--display);color:var(--girasol)}
.pass-vale-main span{font:600 14px/1.25 var(--ui);color:#fff}
.pass-vale-stub{
  align-self:stretch;display:grid;place-items:center;width:62px;border-left:2px dashed var(--tinta-3);
  font:400 28px/1 var(--display);color:var(--girasol);
}

/* ---------- rótulo de las 22:22: una pegatina girasol arriba ---------- */
.banner2222{
  position:fixed;z-index:960;left:50%;top:calc(14px + var(--sat) + var(--rh));transform:translateX(-50%);rotate:-2deg; /* 960: también encima de los anuncios (950) */
  max-width:calc(100vw - 32px);padding:12px 24px 8px;border-radius:var(--r-pill);text-align:center;white-space:nowrap;pointer-events:none;
  background:var(--girasol);color:var(--tinta);
  font:400 30px/1 var(--display);
  box-shadow:0 0 0 3px #fff,0 8px 0 3px var(--girasol-d);
  animation:banner-in .5s cubic-bezier(.2,1.4,.4,1) both;
}
.banner2222.out{opacity:0;transition:opacity .4s}
@keyframes banner-in{from{opacity:0;transform:translate(-50%,-26px) scale(.7)}}

@media (prefers-reduced-motion:reduce){
  .scratch-canvas,.prize-screen .btn,.hud-segs i,.banner2222.out{transition-duration:.01ms !important}
  .pass-item,.quiz-gain{animation:none}
}

/* ---------- «Desliza para empezar» (ui/swipe.js): --x = px recorridos, --p = 0..1 ----------
   Un carril de tinta hundido y el tirador gordo girasol que sobresale. */
.swipe{
  --x:0px; --p:0;
  position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:76px;
  border-radius:var(--r-pill);background:var(--tinta);box-shadow:inset 0 5px 0 var(--tinta-d);overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.swipe-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--x) + 68px);border-radius:inherit;background:var(--tinta-2);transition:width .45s cubic-bezier(.3,1.6,.5,1)}
.swipe-text{position:relative;padding:2px 0 0 66px;font:800 19px/1 var(--ui);color:#fff;opacity:calc(1 - var(--p) * 1.7)}
.swipe-knob{
  position:absolute;left:8px;top:7px;z-index:2;width:60px;height:56px;border:0;border-radius:30px;cursor:grab;touch-action:none;
  background:var(--girasol);box-shadow:0 5px 0 var(--girasol-d);transform:translateX(var(--x));
  transition:transform .45s cubic-bezier(.3,1.6,.5,1);
}
.swipe-knob::before{ /* flecha */
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background:var(--tinta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.swipe.is-dragging .swipe-knob{transition:none;cursor:grabbing}
.swipe.is-dragging .swipe-fill{transition:none}
/* mientras nadie lo toca, el tirador da un empujoncito de vez en cuando */
.swipe:not(.is-dragging):not(.is-done) .swipe-knob{animation:swipe-hint 3.6s ease-in-out 1.2s infinite}
@keyframes swipe-hint{0%,62%,100%{translate:0}70%{translate:16px}78%{translate:0}84%{translate:8px}90%{translate:0}}
.swipe.is-nudge .swipe-knob{animation:swipe-nudge .7s ease}
@keyframes swipe-nudge{30%{translate:46px}60%{translate:-4px}100%{translate:0}}
.swipe.is-done .swipe-knob{transition:transform .25s ease-out}
.swipe-knob:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .swipe-knob,.swipe-fill{transition-duration:.01ms}
  .swipe .swipe-knob,.swipe.is-nudge .swipe-knob{animation:none !important}
}

/* ---------- la cuenta atrás antes de la primera prueba (ui/countdown.js) ---------- */
.cd{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:var(--tinta);animation:cd-in .3s ease backwards}
@keyframes cd-in{from{opacity:0}}
.cd.is-out{opacity:0;transition:opacity .5s ease;pointer-events:none}
.cd-rays{position:absolute;left:50%;top:50%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,84,54,.24) 0deg 9deg,rgba(255,84,54,0) 9deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 8%,transparent 72%);mask-image:radial-gradient(closest-side,#000 8%,transparent 72%);
  animation:rayos-giro 26s linear infinite}
.cd-ring{position:absolute;width:min(78vw,380px);aspect-ratio:1;border-radius:50%;border:10px solid var(--girasol);opacity:0}
.cd-ring.is-on{animation:cd-ring .85s ease-out both}
@keyframes cd-ring{from{opacity:.85;scale:.55}to{opacity:0;scale:1.3}}
.cd-label{position:relative;margin:0;padding:0 24px;text-align:center;color:var(--girasol);font:400 min(56vw,320px)/.9 var(--display);
  text-shadow:0 .06em 0 var(--tomate-d);opacity:0}
.cd-label.is-word{color:#fff;font-size:clamp(46px,13.5vw,80px);line-height:.95;text-shadow:0 5px 0 var(--tomate)}
.cd-label.is-on{animation:cd-pop .85s cubic-bezier(.2,1.5,.4,1) both}
.cd-label.is-word.is-on{animation-duration:1.2s}
@keyframes cd-pop{0%{opacity:0;scale:.4}30%{opacity:1;scale:1.08}72%{opacity:1;scale:1}100%{opacity:0;scale:1.22}}
@keyframes cd-fade{0%,100%{opacity:0}20%,80%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .cd-rays{animation:none}
  .cd-ring{display:none}
  .cd-label.is-on{animation-name:cd-fade;animation-timing-function:linear}
}