@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:      #b100ff;
  --purple-mid:  #7a00b3;
  --purple-dark: #4a0070;
  --purple-deep: #2a003d;
  --pink:        #ff00ff;
  --panel-bg:    #16191E;
  --disp-bg:     #071210;
  --green:       #00ff00;
  --steel-darker:#606870;
}

html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
body { font-family:'Share Tech Mono',monospace; background:#1a0030; }

/* ================================================================
   TELA DE ENTRADA
   ================================================================ */
.intro-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0d0020 0%, #1a0035 40%, #2d0050 70%, #3d006a 100%);
  overflow: hidden;
  transition: opacity .8s ease, transform .8s ease;
}
.intro-screen.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }

.stars, .stars2 { position: absolute; inset: 0; pointer-events: none; }
.stars  { background: radial-gradient(1px 1px at 10% 15%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 25% 8%, #ddd 100%, transparent),
                       radial-gradient(1px 1px at 40% 20%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 55% 5%, #eee 100%, transparent),
                       radial-gradient(1px 1px at 70% 18%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 85% 10%, #ccc 100%, transparent),
                       radial-gradient(1px 1px at 15% 35%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 30% 45%, #ddd 100%, transparent),
                       radial-gradient(1px 1px at 60% 38%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 80% 30%, #eee 100%, transparent),
                       radial-gradient(1px 1px at 92% 42%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 5%  55%, #ddd 100%, transparent),
                       radial-gradient(1px 1px at 45% 50%, #fff 100%, transparent),
                       radial-gradient(1px 1px at 75% 55%, #ccc 100%, transparent);
          animation: twinkle 4s ease-in-out infinite alternate; }
.stars2 { background: radial-gradient(1.5px 1.5px at 20% 25%, rgba(180,100,255,.8) 100%, transparent),
                       radial-gradient(1.5px 1.5px at 50% 15%, rgba(200,150,255,.7) 100%, transparent),
                       radial-gradient(1.5px 1.5px at 78% 22%, rgba(180,100,255,.9) 100%, transparent),
                       radial-gradient(1.5px 1.5px at 35% 40%, rgba(220,180,255,.6) 100%, transparent),
                       radial-gradient(1.5px 1.5px at 65% 48%, rgba(180,100,255,.8) 100%, transparent),
                       radial-gradient(1.5px 1.5px at 88% 35%, rgba(200,150,255,.7) 100%, transparent);
          animation: twinkle 3s ease-in-out infinite alternate-reverse; }
@keyframes twinkle { 0%{opacity:.5}100%{opacity:1} }

.pixel-cloud { position:absolute; image-rendering:pixelated; background:#c080ff; border-radius:4px; opacity:.35; }
.cloud-1 { width:80px;height:24px;top:12%;left:8%;box-shadow:8px -8px 0 #c080ff,16px -8px 0 #c080ff,24px -8px 0 #c080ff,32px -16px 0 #c080ff,40px -16px 0 #c080ff,48px -8px 0 #c080ff,56px -8px 0 #c080ff,16px -16px 0 #c080ff;animation:cloudFloat 18s linear infinite; }
.cloud-2 { width:60px;height:20px;top:18%;right:12%;box-shadow:8px -8px 0 #e0a0ff,16px -8px 0 #e0a0ff,24px -16px 0 #e0a0ff,32px -8px 0 #e0a0ff,40px -8px 0 #e0a0ff;opacity:.25;animation:cloudFloat 24s linear infinite reverse; }
.cloud-3 { width:50px;height:16px;top:8%;left:55%;box-shadow:8px -8px 0 #d090ff,16px -8px 0 #d090ff,24px -8px 0 #d090ff,32px -8px 0 #d090ff;opacity:.3;animation:cloudFloat 20s linear infinite; }
@keyframes cloudFloat { 0%{transform:translateX(0)}100%{transform:translateX(60px)} }

.pixel-ground { position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(180deg,#1a0030 0%,#0d0020 100%);border-top:4px solid #4a0070; }
.pixel-ground::before { content:'';position:absolute;top:-12px;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,#5a0080 0,#5a0080 16px,#3a0050 16px,#3a0050 32px);image-rendering:pixelated; }
.pixel-bench { position:absolute;bottom:72px;left:18%;width:80px;height:40px; }
.pixel-bench::before { content:'';position:absolute;top:0;left:4px;right:4px;height:10px;background:#8B4513;box-shadow:0 4px 0 #6B3410,0 8px 0 #8B4513,0 12px 0 #6B3410; }
.pixel-bench::after { content:'';position:absolute;bottom:0;left:6px;width:6px;height:20px;background:#8B4513;box-shadow:62px 0 0 #8B4513; }
.pixel-lamp { position:absolute;bottom:72px;left:14%;width:8px;height:60px;background:#7a00b3; }
.pixel-lamp::before { content:'';position:absolute;top:-8px;left:-20px;width:30px;height:8px;background:#7a00b3; }
.pixel-lamp::after { content:'';position:absolute;top:-16px;left:-18px;width:10px;height:8px;background:#ffee88;box-shadow:0 0 12px 4px rgba(255,238,136,.5),0 0 24px 8px rgba(255,200,100,.2); }

.intro-logo-wrap { position:relative;z-index:10;margin-bottom:30px;animation:logoFloat 3s ease-in-out infinite; }
@keyframes logoFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
.intro-logo { width:360px;max-width:85vw;display:block; }
.intro-logo-fallback { display:none;text-align:center;font-family:'Press Start 2P',monospace; }
.fallback-title { font-size:4rem;color:#8800cc;text-shadow:4px 4px 0 #4a0070,0 0 30px rgba(177,0,255,.6); }
.fallback-sub   { font-size:1.2rem;color:#fff;letter-spacing:8px;margin-top:8px; }

.start-btn { position:relative;z-index:10;padding:14px 40px;background:linear-gradient(180deg,#ffcc00 0%,#ff8800 60%,#ff4400 100%);border:none;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:1.1rem;color:#4a0070;letter-spacing:3px;box-shadow:0 4px 0 #cc4400,0 8px 0 #aa3300,inset 0 2px 0 rgba(255,255,200,.4),0 0 20px rgba(255,150,0,.4);transition:transform .1s,box-shadow .1s;animation:btnPulse 1.5s ease-in-out infinite; }
.start-btn:hover { transform:translateY(2px);box-shadow:0 2px 0 #cc4400,0 4px 0 #aa3300,inset 0 2px 0 rgba(255,255,200,.4),0 0 30px rgba(255,150,0,.6); }
.start-btn:active { transform:translateY(4px);box-shadow:0 1px 0 #cc4400,inset 0 2px 0 rgba(255,255,200,.4); }
@keyframes btnPulse { 0%,100%{box-shadow:0 4px 0 #cc4400,0 8px 0 #aa3300,inset 0 2px 0 rgba(255,255,200,.4),0 0 20px rgba(255,150,0,.4)}50%{box-shadow:0 4px 0 #cc4400,0 8px 0 #aa3300,inset 0 2px 0 rgba(255,255,200,.4),0 0 40px rgba(255,150,0,.7)} }
.press-start-text { margin-top:24px;font-family:'Press Start 2P',monospace;font-size:.5rem;color:rgba(200,150,255,.7);letter-spacing:2px;animation:blinkText 1.2s step-end infinite; }
@keyframes blinkText { 0%,100%{opacity:1}50%{opacity:0} }

/* ================================================================
   TELA DO JOGO
   ================================================================ */
.game-screen { position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden; }
.game-screen.fade-in { animation:fadeIn .8s ease forwards; }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }

.lofi-bg { position:fixed;inset:0;z-index:0;overflow:hidden;background:url('../IMG/bg-site.gif') center/cover no-repeat; }

/* No celular o GIF fica fixo na parte inferior onde está a máquina */
@media (max-width: 767px) {
  .lofi-bg { background-position: center bottom; }
  .game-screen { align-items: flex-end; justify-content: flex-end; }
}
.lofi-sky { position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 60% 40% at 70% 30%,rgba(80,0,120,.3) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 20% 20%,rgba(60,0,100,.2) 0%,transparent 70%); }
.lofi-window { position:absolute;top:6%;left:50%;transform:translateX(-50%);width:480px;height:320px;border:6px solid #2a1840;border-radius:4px;overflow:hidden;box-shadow:0 0 40px rgba(80,0,150,.4),inset 0 0 60px rgba(0,0,0,.5);z-index:2; }
.lofi-city { position:absolute;inset:0;background:linear-gradient(180deg,#05000f 0%,#0a0020 40%,#150030 70%,#0d0018 100%);overflow:hidden; }
.lofi-moon { position:absolute;top:15%;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#efe8ff,#c8a0ff 60%,#9060cc);box-shadow:0 0 20px rgba(200,160,255,.5),0 0 60px rgba(150,80,220,.25); }
.building { position:absolute;bottom:0;background:#0a0018;box-shadow:inset 0 0 0 1px rgba(80,0,120,.3); }
.building::before { content:'';position:absolute;inset:8px 4px;background:repeating-linear-gradient(0deg,transparent 0,transparent 6px,rgba(177,0,255,.15) 6px,rgba(177,0,255,.15) 8px),repeating-linear-gradient(90deg,transparent 0,transparent 6px,rgba(177,0,255,.15) 6px,rgba(177,0,255,.15) 8px); }
.b1{left:0%;width:60px;height:160px;background:#070012;}.b2{left:5%;width:45px;height:110px;}.b3{left:12%;width:70px;height:200px;background:#060010;}.b4{left:22%;width:50px;height:140px;}.b5{left:31%;width:80px;height:180px;background:#070012;}.b6{left:43%;width:55px;height:120px;}.b7{left:52%;width:90px;height:240px;background:#060010;}
.window-frame { position:absolute;inset:0;pointer-events:none;border:6px solid #1e0f30; }
.window-frame::before { content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:6px;background:#1e0f30; }
.window-frame::after { content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;background:#1e0f30; }
.window-glow { position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(150,80,255,.06) 0%,transparent 50%); }
.lofi-floor { position:absolute;bottom:0;left:0;right:0;height:130px;background:linear-gradient(180deg,#120022 0%,#0a0015 100%);border-top:2px solid #2a0050;z-index:2; }
.lofi-floor::before { content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(80,0,150,.12) 79px,rgba(80,0,150,.12) 80px),repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(80,0,150,.08) 39px,rgba(80,0,150,.08) 40px); }
.lofi-floor-reflection { position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:600px;height:80px;background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(100,0,180,.12) 0%,transparent 100%);pointer-events:none;z-index:2; }
.lofi-plant { position:absolute;bottom:115px;left:3%;display:flex;flex-direction:column;align-items:center;z-index:2; }
.lp-leaves{position:relative;width:60px;height:70px;margin-bottom:-4px;}.lp-leaf{position:absolute;border-radius:50% 5px 50% 5px;transform-origin:bottom center;}.lp-l1{width:22px;height:42px;background:linear-gradient(160deg,#3a0060,#1a0030);bottom:0;left:4px;transform:rotate(-30deg);}.lp-l2{width:20px;height:38px;background:linear-gradient(160deg,#4a0080,#280045);bottom:0;left:20px;transform:rotate(5deg);}.lp-l3{width:18px;height:35px;background:linear-gradient(160deg,#3a0060,#1a0030);bottom:0;left:34px;transform:rotate(32deg);}.lp-pot{width:40px;height:32px;background:linear-gradient(160deg,#2a0045,#150025);border-radius:3px 3px 8px 8px;border:1px solid #4a0070;}
.string-lights{position:absolute;top:3%;left:0;right:0;height:40px;pointer-events:none;z-index:2;}.sl-wire{position:absolute;top:8px;left:0;right:0;height:1px;background:rgba(80,0,150,.4);}.sl-bulb{position:absolute;top:0;width:10px;height:14px;background:radial-gradient(circle at 50% 40%,#ffe0ff,#cc60ff 60%,#7a00b3);border-radius:50% 50% 40% 40%;box-shadow:0 0 6px rgba(200,100,255,.6),0 0 14px rgba(177,0,255,.3);animation:bulbFlicker 4s ease-in-out infinite;}.sl-bulb:nth-child(odd){animation-delay:.5s;}.sl-bulb:nth-child(3n){animation-delay:1.2s;background:radial-gradient(circle at 50% 40%,#ffffd0,#ffcc40 60%,#cc8800);box-shadow:0 0 6px rgba(255,200,60,.6),0 0 14px rgba(255,160,0,.3);}
@keyframes bulbFlicker{0%,90%,100%{opacity:1}92%{opacity:.4}95%{opacity:1}97%{opacity:.6}}

/* ================================================================
   CENA
   ================================================================ */
.scene { position:relative;z-index:10;display:flex;align-items:flex-end;gap:0;filter:drop-shadow(0 8px 40px rgba(0,0,0,.5));margin-bottom:0; }

/* CARTEIRA — moedas clicáveis fixas */
.carteira { position:fixed;left:16px;top:50%;transform:translateY(-50%);background:#1a0030;border:1px solid #4a0070;padding:12px 10px;border-radius:15px;z-index:15;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 15px rgba(80,0,150,.2);max-height:70vh;overflow-y:auto;scrollbar-width:none; }
.carteira::-webkit-scrollbar{display:none;}

.moeda { width:52px;height:52px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#e080ff,#7a00b3);border:2px solid #b100ff;transition:transform .1s,box-shadow .1s;user-select:none;box-shadow:0 0 10px rgba(177,0,255,.4);overflow:hidden;padding:2px; }
.moeda:hover { transform:scale(1.1);box-shadow:0 0 20px rgba(177,0,255,.7); }
.moeda:active { transform:scale(.9); }
.moeda[data-val="1"] { width:44px;height:44px; }
.moeda[data-val="2"] { width:50px;height:50px; }
.moeda[data-val="5"] { width:58px;height:58px;border-color:#ffd700;box-shadow:0 0 14px rgba(255,200,0,.5); }
.moeda-img { width:100%;height:100%;object-fit:contain; }

/* ================================================================
   MÁQUINA
   ================================================================ */
.machine { position:relative;width:340px;height:620px;flex-shrink:0; }
.machine-shell { position:absolute;inset:0;background:linear-gradient(to right,#2a003d 0px,#4a0070 6px,#5a0080 12px,#3d0055 100px,#300048 240px,#280040 310px,#1a0028 328px,#0d0016 334px,#08000e 340px);border-radius:5px 5px 3px 3px;border:1.5px solid var(--purple);overflow:hidden;box-shadow:0 0 30px rgba(177,0,255,.35),0 20px 60px rgba(0,0,0,.8); }
.machine-shell::before { content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 2px,rgba(177,0,255,.03) 2px,rgba(177,0,255,.03) 3px);pointer-events:none;z-index:60; }
.machine-header { position:absolute;top:0;left:0;right:0;height:52px;padding:0 14px;z-index:5;overflow:hidden;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#7a00b3,#4a0070 60%,#2a003d);border-bottom:3px solid #1a0026; }
.machine-header::after { content:'';position:absolute;bottom:-5px;left:0;right:0;height:5px;background:rgba(0,0,0,.4); }
.brand-neon { font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.6rem;letter-spacing:6px;color:#fff;text-shadow:0 0 6px #fff,0 0 12px rgba(220,150,255,.9),0 0 24px rgba(177,0,255,.8),0 0 40px rgba(130,0,200,.6);animation:neonFlicker 4s infinite; }
@keyframes neonFlicker { 0%,18%,20%,50%,52%,64%,66%,80%,90%,92%,100%{text-shadow:0 0 6px #fff,0 0 12px rgba(220,150,255,.9),0 0 24px rgba(177,0,255,.8),0 0 40px rgba(130,0,200,.6);opacity:1}19%,51%,65%,81%,91%{text-shadow:none;opacity:.85} }
.brand-cat-led { display:flex;gap:4px;align-items:center; }
.led-dot { width:7px;height:7px;border-radius:50%;background:#ff00ff;box-shadow:0 0 6px #ff00ff,0 0 12px rgba(255,0,255,.5);animation:ledPulse 1.2s ease-in-out infinite; }
.led-dot:nth-child(2){animation-delay:.4s;}.led-dot:nth-child(3){animation-delay:.8s;}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.2;box-shadow:none}}

.glass-frame { position:absolute;top:56px;left:14px;right:14px;height:376px;background:linear-gradient(160deg,rgba(122,0,179,.25),rgba(42,0,61,.9));border:2px solid rgba(177,0,255,.4);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.9),inset 0 0 15px rgba(177,0,255,.15),0 0 20px rgba(177,0,255,.2); }
.shelf-light { position:absolute;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(177,0,255,.7) 20%,rgba(220,100,255,.9) 50%,rgba(177,0,255,.7) 80%,transparent);box-shadow:0 2px 18px rgba(177,0,255,.5); }
.glass-reflection { position:absolute;inset:0;z-index:50;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 30%,transparent 55%),linear-gradient(to bottom,transparent 60%,rgba(177,0,255,.06)); }
.glass-reflection::before { content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(180deg,rgba(177,0,255,.4),rgba(177,0,255,.1) 50%,transparent); }
.glass-reflection::after { content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,transparent,rgba(177,0,255,.3) 30%,rgba(220,100,255,.4) 50%,rgba(177,0,255,.3) 70%,transparent); }
.glass-frame::before { content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(177,0,255,.2),transparent);transform:skewX(-20deg);animation:reflexoVidro 8s infinite;pointer-events:none;z-index:51; }
@keyframes reflexoVidro{from{left:-40%}to{left:140%}}

.shelves { position:absolute;inset:3px 0 0 0;display:flex;flex-direction:column;padding:6px 6px 4px; }
.shelf-row { flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:4px 4px 6px;gap:4px; }
.shelf-row::after { content:'';position:absolute;bottom:0;left:4px;right:4px;height:4px;background:linear-gradient(180deg,rgba(177,0,255,.35),rgba(177,0,255,.12));border-radius:1px;box-shadow:0 0 8px rgba(177,0,255,.4),0 2px 4px rgba(0,0,0,.6); }
.slot { flex:0 0 calc(33.33% - 4px);height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.3));border-radius:6px;padding-bottom:10px;transition:background .3s; }
.slot.disponivel { background:linear-gradient(180deg,rgba(0,255,100,.07),rgba(0,0,0,.3)); }
.slot.disponivel .coil { border-top-color:rgba(0,255,100,.4); }
.coil { position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:28px;height:8px;border-radius:2px;border-top:1px solid rgba(177,0,255,.3);border-bottom:1px solid rgba(130,0,180,.5);background:repeating-linear-gradient(90deg,transparent 0px,transparent 1px,rgba(177,0,255,.65) 1px,rgba(177,0,255,.65) 2px,transparent 2px,transparent 4px,rgba(100,0,130,.45) 4px,rgba(100,0,130,.45) 5px,transparent 5px,transparent 7px); }
.slot-label { position:absolute;bottom:0;font-size:.36rem;color:rgba(200,100,255,.3);letter-spacing:.5px;z-index:5; }
.slot-num { position:absolute;top:4px;left:4px;width:16px;height:16px;background:#3d0249;color:#fff;font-size:9px;font-weight:bold;display:flex;align-items:center;justify-content:center;border-radius:3px;z-index:10; }
.produto-img { max-width:70%;max-height:52px;object-fit:contain;z-index:8;margin-bottom:14px;display:block; }
.slot-estoque { position:absolute;top:4px;right:4px;font-size:7px;color:rgba(177,0,255,.7);font-weight:bold;z-index:10; }
.slot.esgotado { opacity:.6;pointer-events:none; }
.slot-preco { position:absolute;bottom:14px;right:2px;background:#ff3b3b;color:#fff;font-size:8px;font-weight:bold;padding:1px 3px;border-radius:3px;z-index:10; }

/* Gato */
.cat-actor{position:absolute;left:-60px;bottom:0;width:34px;height:30px;z-index:45;pointer-events:none;opacity:0;}
.ca-body{position:absolute;bottom:0;left:7px;width:20px;height:15px;background:radial-gradient(ellipse,#c060ff 60%,#7a00b3);border-radius:10px 10px 7px 7px;}
.ca-head{position:absolute;bottom:13px;left:5px;width:22px;height:18px;background:radial-gradient(ellipse,#d080ff 50%,#9020cc);border-radius:50% 50% 42% 42%;}
.ca-ear-l,.ca-ear-r{position:absolute;width:7px;height:8px;background:#7a00b3;clip-path:polygon(50% 0%,0% 100%,100% 100%);bottom:30px;}
.ca-ear-l{left:6px;}.ca-ear-r{left:19px;}
.ca-eye-l,.ca-eye-r{position:absolute;width:4px;height:4px;background:#1a0026;border-radius:50%;bottom:20px;}
.ca-eye-l{left:10px;}.ca-eye-r{left:18px;}
.ca-eye-l::after,.ca-eye-r::after{content:'';position:absolute;top:0;left:1px;width:2px;height:2px;background:white;border-radius:50%;}
.ca-nose{position:absolute;bottom:17px;left:15px;width:5px;height:3px;background:#ff60ff;border-radius:50% 50% 40% 40%;}
.ca-tail{position:absolute;bottom:2px;right:-2px;width:14px;height:5px;background:linear-gradient(90deg,#7a00b3,#c060ff);border-radius:3px;transform-origin:left center;animation:tailSwing .8s ease-in-out infinite;}
@keyframes tailSwing{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
.ca-arm{position:absolute;bottom:9px;right:1px;width:10px;height:3px;background:#7a00b3;border-radius:2px;}
.ca-item{position:absolute;bottom:12px;right:-9px;width:11px;height:15px;border-radius:2px;display:none;}
.ca-item.has-item{display:block;}
.ca-item img{width:100%;height:100%;object-fit:contain;}
.ca-legs{position:absolute;bottom:0;left:7px;display:flex;gap:3px;}
.ca-leg{width:4px;height:5px;background:#9020cc;border-radius:0 0 2px 2px;transform-origin:top center;}
.ca-leg:nth-child(1){animation:legRun .22s ease-in-out infinite alternate;}
.ca-leg:nth-child(2){animation:legRun .22s ease-in-out infinite alternate-reverse;}
.ca-leg:nth-child(3){animation:legRun .22s ease-in-out infinite alternate;}
.ca-leg:nth-child(4){animation:legRun .22s ease-in-out infinite alternate-reverse;}
@keyframes legRun{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes catIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.cat-actor.idle{animation:catIdle 1s ease-in-out infinite;}

.price-strip{position:absolute;bottom:74px;left:14px;right:14px;height:24px;display:flex;align-items:center;padding:0 3px;gap:2px;background:#050008;border:1px solid #2a003d;}
.price-tag{flex:1;text-align:center;font-size:.4rem;color:rgba(177,0,255,.6);letter-spacing:.3px;padding:1px 0;border-right:1px solid #1a0026;}
.price-tag:last-child{border-right:none;}

.delivery-section{position:absolute;bottom:76px;left:14px;right:14px;height:54px;}
.delivery-bin{position:absolute;inset:0;border-radius:4px 4px 2px 2px;border:2px solid var(--steel-darker);overflow:hidden;background:linear-gradient(180deg,#0a0010,#060008);box-shadow:inset 0 4px 14px rgba(0,0,0,.9),0 0 10px rgba(177,0,255,.2);}
.delivery-flap{position:absolute;top:0;left:0;right:0;height:14px;z-index:10;background:linear-gradient(180deg,#4a0070,#2a003d);border-bottom:1px solid var(--purple);transform-origin:top center;transform:rotateX(0deg);transition:transform .5s ease;}
.delivery-flap.open{transform:rotateX(-80deg);}
.delivery-flap::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:50px;height:3px;background:#1a0026;border-radius:2px;}
.delivery-inner{position:absolute;top:14px;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.delivery-inner .produto-img{max-height:32px;}

.machine-base{position:absolute;bottom:0;left:0;right:0;height:74px;background:linear-gradient(180deg,#2a003d,#1a0026);border-top:2px solid var(--purple);border-radius:0 0 3px 3px;box-shadow:0 0 15px rgba(177,0,255,.3);}
.machine-feet{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:0 28px;}
.foot{width:40px;height:14px;background:linear-gradient(180deg,#1a0026,#0d0016);border-radius:0 0 4px 4px;border:1px solid #4a0070;border-top:none;}

/* ================================================================
   PAINEL LATERAL
   ================================================================ */
.side-panel { width:210px;height:620px;flex-shrink:0;position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#16191E,#12151A);border-left:2px solid #2A3040;box-shadow:inset -3px 0 10px rgba(0,0,0,.4),4px 0 20px rgba(0,0,0,.5); }
.side-panel::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple-mid),var(--purple),var(--purple-mid));box-shadow:0 0 8px rgba(177,0,255,.5); }
.terminal-brand { padding:8px 14px 6px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1E2830; }
.terminal-brand-name { font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:2px;color:rgba(255,255,255,.7); }
.terminal-brand-led { width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:0 0 6px var(--purple);animation:ledBreath 2s ease-in-out infinite; }
@keyframes ledBreath{0%,100%{opacity:1}50%{opacity:.4;box-shadow:none}}
.visor-wrap { padding:10px 12px 8px;border-bottom:1px solid #1A1E28; }
.visor { background:black;color:var(--green);padding:8px 10px;border-radius:6px;font-family:monospace;font-size:.72rem;text-align:center;line-height:1.4;border:1px solid #1a3a1a;box-shadow:inset 0 0 10px rgba(0,0,0,.8),0 0 6px rgba(0,255,0,.1);letter-spacing:1px;white-space:pre-line; }
.pay-section { padding:10px 12px 8px;border-bottom:1px solid #1A1E28; }
.pay-section-title { font-size:.52rem;color:rgba(255,255,255,.5);letter-spacing:2px;margin-bottom:8px;font-weight:700; }
.teclado { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.teclado button { padding:10px 6px;border:1px solid #2a003d;border-radius:7px;cursor:pointer;background:linear-gradient(180deg,#1a0028,#0d0016);color:#e0b0ff;font-size:.8rem;font-weight:bold;font-family:'Share Tech Mono',monospace;transition:.15s;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(177,0,255,.08); }
.teclado button:hover { background:linear-gradient(180deg,#260038,#180028);border-color:rgba(177,0,255,.5);transform:translateY(-1px); }
.teclado button:active { transform:translateY(1px); }
.teclado button.selecionado { border-color:var(--purple);background:linear-gradient(180deg,#2a0040,#1a0028);box-shadow:0 0 8px rgba(177,0,255,.4); }
.btn-apagar { background:linear-gradient(180deg,#1e0010,#120008)!important;color:#ff80c0!important;grid-column:1/4; }
.acoes { padding:8px 12px;border-bottom:1px solid #1A1E28;display:flex;flex-direction:column;gap:6px; }
.botao-comprar { width:100%;padding:10px;border:none;border-radius:8px;cursor:pointer;background:linear-gradient(180deg,#96015d,#6a003f);color:white;font-weight:bold;font-size:.75rem;font-family:'Share Tech Mono',monospace;letter-spacing:1px;transition:.2s;box-shadow:0 3px 8px rgba(150,1,93,.4); }
.botao-comprar:hover:not(:disabled) { background:linear-gradient(180deg,#c0017a,#8a0050);transform:scale(1.03); }
.botao-comprar:disabled { opacity:.35;cursor:not-allowed; }
.botao-finalizar { width:100%;padding:10px;border:1px solid #4a0070;border-radius:8px;cursor:pointer;background:linear-gradient(180deg,#1e0040,#130028);color:#c080ff;font-weight:bold;font-size:.75rem;font-family:'Share Tech Mono',monospace;letter-spacing:1px;transition:.2s;box-shadow:0 3px 8px rgba(80,0,150,.3); }
.botao-finalizar:hover { background:linear-gradient(180deg,#2e0060,#1e0040);border-color:#b100ff;color:#e0b0ff;transform:scale(1.02); }
.coin-entry-section { padding:10px 12px 8px;border-bottom:1px solid #1A1E28; }
.entrada-moeda { width:70px;height:70px;border-radius:50%;border:4px solid var(--purple);background:#0d0016;margin:0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;box-shadow:0 0 14px rgba(177,0,255,.4),inset 0 0 15px rgba(0,0,0,.8);transition:border-color .2s,box-shadow .2s; }
.entrada-moeda.ativo { border-color:#ff00ff;box-shadow:0 0 24px rgba(255,0,255,.7),inset 0 0 15px rgba(0,0,0,.8); }
.slot-hint { font-size:.4rem;color:rgba(177,0,255,.6);text-align:center;letter-spacing:.5px;pointer-events:none; }

/* ================================================================
   POPUP
   ================================================================ */
.popup-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s;}
.popup-overlay.visible{opacity:1;pointer-events:all;}
.popup-box{width:600px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#181C24,#12151C);border:1px solid #2A3040;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.9),0 0 0 1px rgba(177,0,255,.08);transform:translateY(24px);transition:transform .4s cubic-bezier(.2,1,.3,1);}
.popup-overlay.visible .popup-box{transform:translateY(0);}
.popup-head{padding:18px 22px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1E2830;background:rgba(177,0,255,.03);}
.popup-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.4rem;letter-spacing:3px;color:var(--purple);text-shadow:0 0 14px rgba(177,0,255,.4);}
.popup-sub{font-size:.52rem;color:rgba(255,255,255,.3);letter-spacing:1px;margin-top:4px;}
.popup-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:#2A3040 transparent;}
.popup-purchase{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(177,0,255,.05);border:1px solid rgba(177,0,255,.15);border-radius:6px;}
.popup-purchase .icon{font-size:2.2rem;}
.popup-purchase .info{flex:1;}
.popup-purchase .title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:2px;color:var(--purple);}
.popup-purchase .detail{font-size:.62rem;color:rgba(220,150,255,.7);margin-top:4px;line-height:1.6;}

/* Timeline AFD */
.tl-section h3,.log-section h3{font-size:.62rem;color:rgba(255,255,255,.5);letter-spacing:2px;margin-bottom:10px;font-weight:700;}
.timeline{display:flex;flex-direction:column;}
.tl-item{display:flex;gap:10px;animation:logIn .3s ease both;}
.tl-dot-col{display:flex;flex-direction:column;align-items:center;}
.tl-dot{width:36px;height:36px;border-radius:50%;border:2px solid #2A3040;background:#12151C;display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono',monospace;font-size:.38rem;color:rgba(255,255,255,.4);flex-shrink:0;text-align:center;line-height:1.2;}
.tl-dot.active{border-color:var(--purple);color:#e0b0ff;background:rgba(177,0,255,.08);}
.tl-dot.final{border-color:#00ff88;color:#00ff88;background:rgba(0,255,136,.1);box-shadow:0 0 10px rgba(0,255,136,.3);}
.tl-line{width:2px;flex:1;min-height:6px;background:#1E2830;margin:2px 0;}
.tl-content{padding:6px 0 8px;}
.tl-state{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.8rem;color:rgba(220,150,255,.9);}
.tl-trans{font-size:.55rem;color:rgba(255,255,255,.35);margin-top:2px;}
.tl-bal{font-size:.52rem;color:rgba(177,0,255,.7);margin-top:1px;font-family:'Share Tech Mono',monospace;}

.log-entries{display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto;scrollbar-width:thin;}
.log-entry{display:flex;gap:7px;align-items:flex-start;padding:4px 7px;border-radius:3px;border-left:2px solid transparent;background:rgba(255,255,255,.018);opacity:0;animation:logIn .3s ease forwards;}
@keyframes logIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.log-entry.coin{border-left-color:#ffd93d;}.log-entry.buy{border-left-color:var(--purple);}.log-entry.troco{border-left-color:#ff60ff;}.log-entry.system{border-left-color:#404860;}
.log-time{font-size:.5rem;color:rgba(255,255,255,.4);flex-shrink:0;padding-top:1px;}
.log-text{font-size:.6rem;color:rgba(220,150,255,.85);line-height:1.4;}
.popup-foot{padding:12px 22px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #1E2830;}
.popup-btn{padding:10px 22px;border:none;border-radius:4px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:2px;transition:.15s;}
.popup-btn.restart{background:linear-gradient(180deg,#9600cc,#5a0080);color:white;box-shadow:0 0 14px rgba(177,0,255,.4);}
.popup-btn.restart:hover{background:linear-gradient(180deg,#b100ff,#7a00b3);}
.popup-btn.close-btn{background:#1E2430;color:rgba(255,255,255,.55);border:1px solid #2A3040;}
.popup-btn.close-btn:hover{background:#252C3A;}

.sobreposicao{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:.3s;z-index:9999;}
.sobreposicao.ativa{visibility:visible;opacity:1;}
.popup-miau{background:black;color:white;padding:40px 60px;border-radius:20px;font-size:22px;font-weight:bold;border:2px solid var(--purple);box-shadow:0 0 30px rgba(177,0,255,.5);}

/* Animação moeda voando */
.moeda-voando{position:fixed;pointer-events:none;z-index:9000;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono',monospace;font-size:.6rem;font-weight:bold;animation:moedaVoo .48s cubic-bezier(.4,0,.8,1) forwards;}
@keyframes moedaVoo{0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1;}70%{opacity:1;}100%{transform:translate(var(--vx),var(--vy)) scale(.25) rotate(360deg);opacity:0;}}

@keyframes machineVib{0%,100%{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
.machine.vibrate{animation:machineVib .14s ease 3;}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(90px) rotate(720deg);opacity:0}}

/* ================================================================
   RESPONSIVO — escala a cena inteira para caber na tela
   ================================================================ */

/* Wrapper de escala */
.scene-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: bottom center;
  width: 100%;
}

/* Tela cheia padrão: escala via JS */
.game-screen {
  align-items: flex-end;
  justify-content: center;
}

/* Carteira responsiva */
@media (max-width: 700px) {
  .carteira {
    left: 4px;
    padding: 6px 4px;
    gap: 4px;
  }
  .moeda { width:38px!important; height:38px!important; }
  .moeda[data-val="5"] { width:44px!important; height:44px!important; }
}

/* Popup responsivo */
@media (max-width: 650px) {
  .popup-box { width: 95vw; }
  .popup-head { padding: 12px 14px 10px; }
  .popup-body { padding: 12px 14px; }
  .popup-foot { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
  .popup-btn  { font-size: .75rem; padding: 8px 14px; }
}