/* ==========================================================================
   EL ANTOJO SE JUEGA — UI
   Look de los mockups: fondo amarillo con rayos, paneles crema de borde
   amarillo, botones macizos con canto inferior y tipografía condensada.
   Tres fuentes: Luckiest Guy (display) · Bungee (UI) · Grand Hotel (script)
   ========================================================================== */
:root{
  --maiz:#FCE200; --maiz-2:#FFC81E; --maiz-3:#F5A100;
  --crema:#FDF6E3; --crema-2:#F3E7C8;
  --rojo:#BA0C2F; --azul:#001489;
  --verde:#5BBF2E; --verde-d:#3E9418;
  --azulc:#2FA8E8; --azulc-d:#1B7FBA;
  --naranja:#F26522; --naranja-d:#C44A12;
  --morado:#8E44AD; --morado-d:#6C3187;
  --rojo-b:#E5342C; --rojo-b-d:#B71F19;
  --amar-b:#FFC400; --amar-b-d:#D99400;
  --tinta:#3A2A08; --texto:#5A4520;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --display:'Luckiest Guy','Arial Black',Impact,sans-serif;
  --ui:'Bungee','Arial Black',Impact,sans-serif;
  --script:'Grand Hotel','Brush Script MT',cursive;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:#0b0a06;font-family:var(--ui);
  touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;}
body{display:flex;align-items:center;justify-content:center;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.ico{width:1.15em;height:1.15em;fill:currentColor;flex:none;}

#frame{position:relative;width:100%;height:100%;max-width:480px;overflow:hidden;background:#000;touch-action:none;
  box-shadow:0 0 80px rgba(0,0,0,.9);}
@media (min-aspect-ratio:9/16){#frame{height:100%;width:min(480px,calc(100vh*9/16));}}
body.fs #frame{max-width:none;width:100%;height:100%;}
canvas#gl{display:block;width:100%;height:100%;touch-action:none;
  background:linear-gradient(180deg,#2F8FE0 0%,#4FA9EE 42%,#9CCDF0 78%,#C8E3F7 100%);}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}
#speedlines{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:repeating-linear-gradient(96deg,rgba(255,255,255,.4) 0 2px,transparent 2px 26px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent 32%,#000 88%);
  mask-image:radial-gradient(ellipse at 50% 50%,transparent 32%,#000 88%);}
#speedlines.on{opacity:.45;}
#grade{position:absolute;inset:0;pointer-events:none;transition:box-shadow .3s;box-shadow:none;}
#grade.chile{box-shadow:inset 0 0 90px 20px rgba(210,40,10,.5);}
#grade.limon{box-shadow:inset 0 0 90px 20px rgba(20,120,180,.45);}
#toast{position:absolute;left:0;right:0;top:32%;text-align:center;pointer-events:none;opacity:0;
  font-family:var(--display);font-size:32px;color:#fff;letter-spacing:1px;
  -webkit-text-stroke:7px var(--tinta);paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,.35);transition:opacity .2s,transform .2s;}

/* ─────────────────────────────── HUD ─────────────────────────────── */
#hud{position:absolute;inset:0;pointer-events:none;user-select:none;}
#hud.hide{display:none;}
.hudchip{background:rgba(20,26,40,.55);border:2px solid rgba(255,255,255,.22);border-radius:12px;
  padding:6px 10px;backdrop-filter:blur(2px);}
#hudTop{position:absolute;top:calc(8px + var(--safe-t));left:8px;right:8px;display:flex;gap:6px;
  align-items:flex-start;justify-content:space-between;}
#livesRow{display:flex;gap:3px;}
#livesRow .ico{width:20px;height:20px;fill:#E5342C;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));}
#livesRow .ico.off{fill:#4a4a52;}
#levelName{font-size:7.5px;letter-spacing:1.5px;color:#FCE200;margin-top:5px;}
#metaWrap{flex:1;max-width:150px;margin-top:4px;}
.bar{height:11px;border:2px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(10,14,24,.6);overflow:hidden;}
.bar>i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#FCE200,#F5A100);transition:width .18s linear;}
#metaFlag{width:16px;height:16px;background:
  conic-gradient(#fff 0 25%,#111 0 50%,#fff 0 75%,#111 0);background-size:8px 8px;
  border:2px solid rgba(255,255,255,.5);border-radius:4px;}
#scoreBox{text-align:right;}
#score{font-family:var(--display);font-size:24px;line-height:1;color:#fff;
  -webkit-text-stroke:5px var(--tinta);paint-order:stroke fill;letter-spacing:1px;}
.hlabel{font-size:7px;letter-spacing:2px;color:#e8dfc6;}

#comboCard{position:absolute;top:calc(64px + var(--safe-t));left:50%;transform:translateX(-50%);
  display:flex;gap:4px;}
.cslot{font-size:7px;letter-spacing:1px;padding:4px 6px;border:2px solid rgba(255,255,255,.3);
  border-radius:8px;background:rgba(20,26,40,.5);color:#9d9686;}
.cslot.on{background:var(--maiz);border-color:#fff;color:var(--tinta);}
#fxBadges{position:absolute;top:calc(92px + var(--safe-t));left:0;right:0;display:flex;
  flex-direction:column;align-items:center;gap:5px;}
.fxb{font-size:10px;letter-spacing:2px;padding:5px 12px;border-radius:10px;border:2px solid #fff;
  animation:pop .25s cubic-bezier(.2,1.7,.4,1) both;}
.fxb.chile{background:var(--rojo-b);color:#fff;}
.fxb.limon{background:var(--azulc);color:#052a3b;}
.fxb.antojo{background:var(--maiz);color:var(--tinta);}
@keyframes pop{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}

#radar{position:absolute;top:calc(124px + var(--safe-t));left:50%;transform:translateX(-50%);
  background:rgba(20,26,40,.62);border:2px solid var(--maiz);border-radius:10px;color:#fff;
  font-size:8px;letter-spacing:1px;padding:5px 10px;white-space:nowrap;}
#radar.hide{display:none;}
#radar b{color:var(--maiz);}

#hudBottom{position:absolute;left:8px;right:8px;bottom:calc(10px + var(--safe-b));
  display:flex;justify-content:space-between;align-items:flex-end;gap:8px;}
#distBox{width:180px;}
#dist{font-family:var(--display);font-size:26px;line-height:1;color:var(--maiz);
  -webkit-text-stroke:5px var(--tinta);paint-order:stroke fill;margin-bottom:4px;}
#pads{position:absolute;left:8px;right:8px;bottom:calc(72px + var(--safe-b));display:flex;
  justify-content:space-between;}
.pad{width:56px;height:56px;border-radius:16px;border:2px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);color:#fff;font-size:9px;letter-spacing:1px;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .07s,background .07s;}
.pad .ico{width:20px;height:20px;}
.pad.dash{border-color:var(--maiz);color:var(--maiz);}
.pad:active,.pad.on{transform:scale(.9);background:rgba(252,226,0,.5);color:var(--tinta);}
#padL{margin-right:auto}#padR{margin-left:6px}#padU{margin-left:auto}#padD{margin-left:6px}
.iconbtn{width:44px;height:44px;border-radius:14px;pointer-events:auto;display:flex;
  align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.3);
  background:rgba(20,26,40,.6);color:var(--maiz);}
.iconbtn .ico{width:20px;height:20px;}

/* ────────────────────────── PANTALLAS ────────────────────────── */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  pointer-events:auto;overflow:hidden;}
.screen.show{display:flex;}
.screen.brand{background:url('../assets/img/back.png') center/cover no-repeat;}
.screen.dim::before{content:'';position:absolute;inset:0;background:rgba(60,42,0,.55);}
.screen > *{position:relative;}

/* carga */
#scLoad{background:#000;justify-content:flex-end;padding:0;}
#loadArt{position:absolute;inset:0;background:url('../assets/img/pantalla.jpg') center/cover no-repeat;}
#loadBar{width:76%;margin-bottom:calc(46px + var(--safe-b));}
#loadBar .bar{height:16px;border-color:rgba(255,255,255,.65);background:rgba(0,0,0,.45);}
#loadRow{display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#fff;
  margin-top:7px;text-shadow:0 2px 3px rgba(0,0,0,.6);}
#loadTip{position:absolute;bottom:calc(18px + var(--safe-b));left:20px;right:20px;text-align:center;
  font-size:7.5px;letter-spacing:1.5px;color:#ffe9a8;text-shadow:0 2px 3px rgba(0,0,0,.7);}

/* cabecera de marca */
.brandhead{width:100%;padding:calc(10px + var(--safe-t)) 12px 0;display:flex;align-items:flex-start;
  justify-content:space-between;gap:8px;}
.hstack{display:flex;flex-direction:column;gap:7px;}
.wallet{display:flex;flex-direction:column;gap:7px;align-items:flex-end;}
.pill{display:flex;align-items:center;gap:6px;border-radius:20px;padding:5px 8px 5px 6px;
  border:2px solid rgba(255,255,255,.85);font-size:11px;color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.28);}
.pill.coin{background:linear-gradient(180deg,#2FA8E8,#1B7FBA);}
.pill.jar{background:linear-gradient(180deg,#B06BD0,#7B3E9C);}
.pill .plus{width:17px;height:17px;border-radius:50%;background:#5BBF2E;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;}
.sqbtn{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.9);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.28);}
.sqbtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.28);}
.sqbtn.blue{background:linear-gradient(180deg,#2FA8E8,#1B7FBA);}
.sqbtn.orange{background:linear-gradient(180deg,#F58220,#C44A12);}
.sqbtn .ico{width:21px;height:21px;}

/* logos */
.mcmark{width:52px;display:block;margin:0 auto;}
#titoLogo{width:min(72%,300px);display:block;margin:2px auto 0;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.22));}
.ribbon{display:inline-block;background:#7B3E9C;color:#fff;font-size:9px;letter-spacing:2.5px;
  padding:5px 14px;border-radius:6px;border:2px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.25);
  margin-top:6px;}

/* héroe del menú (slider de PNGs de Tito) */
#heroWrap{flex:1;position:relative;width:100%;min-height:120px;}
#heroWrap img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;
  object-fit:contain;opacity:0;transition:opacity .6s;filter:drop-shadow(0 12px 14px rgba(120,80,0,.35));}
#heroWrap img.on{opacity:1;}

/* botonera */
.menuwrap{width:100%;padding:0 12px calc(10px + var(--safe-b));}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:var(--display);font-size:20px;letter-spacing:1px;color:#fff;
  padding:12px 14px 10px;border-radius:16px;border:3px solid #fff;
  text-shadow:0 2px 0 rgba(0,0,0,.28);box-shadow:0 5px 0 rgba(0,0,0,.3);
  transition:transform .07s,box-shadow .07s;}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.3);}
.btn .ico{width:22px;height:22px;}
.btn.green {background:linear-gradient(180deg,#77D13F,#3E9418);}
.btn.blue  {background:linear-gradient(180deg,#3BB6F0,#1B7FBA);}
.btn.orange{background:linear-gradient(180deg,#F58220,#C44A12);}
.btn.purple{background:linear-gradient(180deg,#A85FC6,#6C3187);}
.btn.red   {background:linear-gradient(180deg,#F0554C,#B71F19);}
.btn.yellow{background:linear-gradient(180deg,#FFD84A,#D99400);color:var(--tinta);text-shadow:none;}
.btn.big{font-size:26px;padding:15px 14px 12px;}
.btn.sm{font-size:13px;padding:9px 10px 8px;border-radius:13px;border-width:2px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;}
.tinybtn{border-radius:13px;border:2px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.28);
  padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:7px;letter-spacing:.5px;color:#fff;line-height:1.25;text-align:center;position:relative;}
.tinybtn .ico{width:20px;height:20px;}
.tinybtn.soon{opacity:.55;}
.tinybtn .tag{position:absolute;top:-6px;right:-4px;background:#E5342C;border:2px solid #fff;
  border-radius:50%;width:17px;height:17px;font-size:8px;display:flex;align-items:center;justify-content:center;}

/* popup */
.popwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,14,0,.55);padding:16px;}
.pop{position:relative;margin-top:96px;width:min(330px,92%);background:var(--crema);border:5px solid var(--maiz-2);
  border-radius:26px;box-shadow:0 10px 0 rgba(0,0,0,.28);padding:16px 14px 14px;}
.pop .close{position:absolute;top:-14px;right:-8px;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(180deg,#F0554C,#B71F19);border:3px solid #fff;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.3);}
.pop .close .ico{width:20px;height:20px;}
.poptitle{background:linear-gradient(180deg,#FFE24A,#F5C400);border:3px solid #fff;border-radius:18px;
  box-shadow:0 4px 0 rgba(0,0,0,.22);font-family:var(--display);font-size:26px;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.25);text-align:center;padding:8px 10px 6px;margin:-34px auto 12px;
  width:86%;letter-spacing:1px;}
.popmascot{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:215px;
  margin-bottom:-26px;z-index:5;pointer-events:none;
  filter:drop-shadow(0 10px 12px rgba(80,50,0,.35));}
.poprow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:2px solid #EADFC0;}
.poprow:last-child{border-bottom:none;}
.poprow .ico{width:22px;height:22px;fill:var(--morado);}
.poprow span{font-size:11px;letter-spacing:1px;color:var(--texto);flex:1;}
.range{-webkit-appearance:none;appearance:none;height:14px;border-radius:10px;background:#E7DCBE;flex:1.4;}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--morado);border:3px solid #fff;box-shadow:0 2px 3px rgba(0,0,0,.3);}
.range.blue::-webkit-slider-thumb{background:var(--azulc);}
.toggle{width:62px;height:30px;border-radius:20px;background:var(--verde);border:3px solid #fff;
  display:flex;align-items:center;justify-content:flex-end;padding:2px;font-size:9px;color:#fff;gap:4px;
  box-shadow:0 3px 0 rgba(0,0,0,.2);}
.toggle i{width:22px;height:22px;border-radius:50%;background:#fff;display:block;}
.toggle.off{background:#B9AE93;flex-direction:row-reverse;}

/* tarjetas y datos */
.panel{background:var(--crema);border:4px solid var(--maiz-2);border-radius:20px;padding:12px 14px;
  width:min(330px,92%);box-shadow:0 6px 0 rgba(0,0,0,.22);}
.prow{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;
  color:var(--texto);padding:7px 0;border-bottom:2px dotted #E0D2AB;}
.prow:last-child{border-bottom:none;}
.prow b{font-family:var(--display);font-size:17px;color:var(--tinta);}
.prow.total b{color:var(--verde-d);font-size:22px;}
.headline{font-family:var(--display);font-size:30px;color:#fff;letter-spacing:1px;text-align:center;
  -webkit-text-stroke:7px var(--tinta);paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,0,0,.3);}
.headline.dark{color:var(--tinta);-webkit-text-stroke:0;text-shadow:none;}
.sub{font-size:9px;letter-spacing:2px;color:#fff;text-align:center;margin-top:6px;}
.sub.dark{color:var(--texto);}
.scrollpad{flex:1;width:100%;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;
  gap:10px;align-items:center;}
.stars{font-size:22px;letter-spacing:6px;color:var(--maiz);margin-top:8px;
  -webkit-text-stroke:4px var(--tinta);paint-order:stroke fill;}

/* mapa */
.maphead{width:100%;padding:calc(10px + var(--safe-t)) 12px 6px;display:flex;align-items:center;gap:8px;}
.maphead .sqbtn{background:#fff;color:var(--naranja-d);border-color:#fff;}
.maptitle{flex:1;text-align:center;}
.maptitle b{font-family:var(--display);font-size:24px;color:#fff;letter-spacing:1px;
  -webkit-text-stroke:6px #7B3E9C;paint-order:stroke fill;display:block;}
.maptitle span{font-size:8px;letter-spacing:2px;color:#7B3E9C;}
.chips{display:flex;gap:6px;padding:4px 12px 8px;overflow-x:auto;width:100%;}
.chip{display:flex;align-items:center;gap:5px;background:#fff;border:2px solid #fff;border-radius:20px;
  padding:7px 11px;font-size:8.5px;letter-spacing:1px;color:var(--texto);white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.15);}
.chip .ico{width:15px;height:15px;fill:var(--morado);}
.chip.on{background:linear-gradient(180deg,#77D13F,#3E9418);color:#fff;}
.chip.on .ico{fill:#fff;}
#mapWrap{position:relative;flex:1;width:calc(100% - 24px);margin:0 12px;border:4px solid #fff;
  border-radius:18px;overflow:hidden;background:#EFE7D2;box-shadow:0 5px 0 rgba(0,0,0,.18);}
#gmap{position:absolute;inset:0;display:none;}
#mapCanvas{position:absolute;inset:0;width:100%;height:100%;}
#pins{position:absolute;inset:0;}
.pin{position:absolute;transform:translate(-50%,-100%);width:26px;height:32px;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:center;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));}
.pin i{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;font-family:var(--ui);}
.pin i em{transform:rotate(45deg);font-style:normal;}
.pin.locked i{background:#8E44AD;}
.pin.open i{background:#5BBF2E;}
.pin.drop i{background:#F26522;}
.pin.you i{background:#2FA8E8;}
.pin.active{animation:ping 1.5s ease-out infinite;}
@keyframes ping{0%{filter:drop-shadow(0 0 0 rgba(252,226,0,.9))}100%{filter:drop-shadow(0 0 16px rgba(252,226,0,0))}}
.legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;background:#fff;border-radius:16px;
  margin:8px 12px 0;padding:6px 8px;font-size:7px;letter-spacing:.5px;color:var(--texto);}
.legend b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px;vertical-align:-1px;}
.sheet{width:calc(100% - 24px);margin:8px 12px calc(8px + var(--safe-b));background:#fff;
  border-radius:20px;padding:10px;box-shadow:0 5px 0 rgba(0,0,0,.16);}
.spotcard{display:flex;gap:10px;align-items:center;}
.spotthumb{width:74px;height:60px;border-radius:12px;flex:none;
  background:linear-gradient(160deg,#FFD84A,#F26522);border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;}
.spotcard .info{flex:1;min-width:0;}
.spotcard b{font-family:var(--display);font-size:14px;color:var(--morado-d);display:block;line-height:1.15;}
.spotcard .meta{font-size:7.5px;color:#7a7a82;margin-top:3px;}
.spotcard .dist{font-family:var(--display);font-size:16px;color:var(--tinta);text-align:right;}
.statusline{display:flex;gap:8px;align-items:center;background:#EFF8E9;border-radius:12px;
  padding:6px 9px;margin-top:8px;font-size:7.5px;color:var(--verde-d);letter-spacing:.5px;}

/* app (calle) */
.appbar{width:100%;background:var(--azul);color:#fff;padding:calc(12px + var(--safe-t)) 14px 12px;
  font-size:11px;letter-spacing:2px;}
.appbar.dark{background:var(--tinta);color:var(--maiz);}
.appbar span{display:block;font-size:8px;letter-spacing:1px;color:#cfd8f5;margin-top:4px;}
.card{background:#fff;border:3px solid #1b1b1f;border-radius:14px;padding:11px 13px;width:100%;}
.card.red{border-color:var(--rojo);} .card.purple{border-color:var(--morado);}
.card.orange{border-color:var(--naranja);} .card.green{border-color:var(--verde-d);}
.card h3,.card b{font-family:var(--display);font-size:16px;color:#1b1b1f;display:block;letter-spacing:.5px;}
.muted{font-size:8px;letter-spacing:.5px;color:#6a6a72;line-height:1.7;margin-top:3px;}
.strong{font-size:8px;letter-spacing:1px;color:var(--rojo);margin-top:6px;}
.tagchip{display:inline-block;font-size:7px;letter-spacing:1.5px;padding:3px 8px;border-radius:10px;
  border:2px solid;margin-bottom:5px;}
.tagchip.green{color:var(--verde-d);border-color:var(--verde-d);background:#EAF7EC;}
.tagchip.purple{color:var(--morado);border-color:var(--morado);background:#F7ECF6;}
.code{font-family:var(--display);font-size:24px;letter-spacing:3px;color:var(--tinta);text-align:center;
  border:3px dashed #1b1b1f;border-radius:12px;padding:8px;margin-top:6px;}
.appfoot{width:100%;padding:10px 12px calc(12px + var(--safe-b));display:flex;flex-direction:column;
  gap:7px;background:#fff;border-top:2px solid #eceaf0;}
.banner{background:#EAF7EC;border:3px solid var(--verde-d);border-radius:14px;color:var(--verde-d);
  font-size:9px;letter-spacing:1.5px;padding:9px 12px;width:100%;}
.banner span{display:block;font-size:7.5px;letter-spacing:.3px;color:#3d6b47;margin-top:3px;}
#routeCanvas,#qrDemo{display:block;width:100%;height:100%;}
#routeMap{width:100%;height:30%;border:3px solid #1b1b1f;border-radius:14px;overflow:hidden;}
.scanFrame{position:relative;width:225px;height:225px;background:#fff;border:5px solid #fff;
  border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.62);}
.laser{position:absolute;left:0;right:0;height:3px;background:#5BBF2E;animation:scan 2.2s ease-in-out infinite;}
@keyframes scan{0%,100%{top:4%}50%{top:94%}}
.golden{background:var(--maiz);justify-content:center;}
.gbox{background:#fff;border:4px solid var(--tinta);border-radius:18px;width:210px;height:160px;
  display:flex;align-items:center;justify-content:center;margin-top:12px;}
#goldenArt{width:130px;height:130px;}

@media (max-height:720px){
  .btn{font-size:17px;padding:10px 12px 8px}
  .btn.big{font-size:22px;padding:12px 12px 10px}
  #titoLogo{width:min(62%,250px)}
  .popmascot{width:170px;margin-bottom:-20px}
  .pop{margin-top:74px}
}