@font-face{ font-family:"Press"; src:url("lib/fonts/pressstart.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"VT"; src:url("lib/fonts/vt323.woff2") format("woff2"); font-display:swap; }
:root{
  --bg:#0b1020; --panel:#101830; --ink:#eafff5; --mut:#9fb6d6;
  --cyan:#39e7ff; --purple:#c479ff; --gold:#ffd23f; --green:#5dff9b; --red:#ff5a6a; --blue:#4a78ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:repeating-linear-gradient(0deg,#0b1020 0 2px,#0a0f1e 2px 4px),var(--bg);
  color:var(--ink);font-family:"VT","Courier New",monospace;overflow-x:hidden;}
.scan{position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;}
.machine{max-width:780px;margin:0 auto;min-height:100%;padding:10px;}
.machine.shake{animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
/* HUD */
.hud{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:"Press";font-size:9px;margin:6px 2px 8px;}
.hud .score{color:var(--gold);}
.hud .fase{color:var(--cyan);}
.hud .lives{font-size:11px;}
.chips{display:flex;gap:5px;margin-left:auto;}
.chip{padding:5px 6px;border:2px solid #2a3a66;border-radius:4px;color:#54618a;background:#0d1530;font-size:8px;}
.chip.on{color:#04111a;border-color:var(--green);background:var(--green);}
.mute{cursor:pointer;border:2px solid #2a3a66;background:#0d1530;color:var(--mut);border-radius:4px;padding:5px 7px;font-family:"Press";font-size:8px;}
/* scene */
.screenbox{border:4px solid #2b1a66;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 0 0 3px #0b1020,0 0 26px rgba(80,40,160,.35);}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;}
/* OBJETIVO bem evidente */
.obj{border:4px solid #1a1140;border-radius:8px;margin:12px 0;overflow:hidden;box-shadow:0 5px 0 #1a1140;}
.obj .top{font-family:"Press";font-size:10px;background:#1a1140;color:var(--gold);padding:7px 10px;letter-spacing:1px;}
.obj .mid{font-family:"VT";font-size:27px;line-height:1.15;color:#04111a;background:var(--gold);padding:11px 12px;display:flex;gap:10px;align-items:center;}
.obj .mid .arrow{font-size:26px;animation:point .8s steps(2) infinite;}
@keyframes point{50%{transform:translateX(6px);}}
.demoband{font-family:"Press";font-size:10px;text-align:center;background:var(--purple);color:#1a0b30;padding:7px;border-radius:6px;margin:8px 0;}
/* panel / dialog */
.panel{background:var(--panel);border:3px solid #2b3b6e;border-radius:8px;padding:14px;margin-bottom:12px;}
.dlg{display:flex;gap:10px;align-items:flex-start;}
.face{flex:0 0 auto;width:54px;height:54px;background:#0d1530;border:3px solid var(--cyan);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:32px;}
.say{font-size:22px;line-height:1.25;color:var(--ink);} .say b{color:var(--gold);}
.how{font-family:"VT";font-size:21px;color:var(--cyan);margin:2px 0 4px;}
.q{font-size:25px;line-height:1.2;margin:6px 0 10px;color:#fff;}
.small{font-size:18px;color:var(--mut);}
.tip{font-size:18px;color:var(--green);margin-top:6px;}
/* botoes */
.btn{display:block;width:100%;text-align:left;font-family:"VT";font-size:23px;line-height:1.12;color:#04111a;background:var(--cyan);
  border:none;border-bottom:5px solid #1278a8;border-radius:7px;padding:12px 14px;margin:9px 0;cursor:pointer;}
.btn:active{transform:translateY(2px);border-bottom-width:3px;}
.btn.p{background:var(--purple);border-bottom-color:#7a3fb0;} .btn.g{background:var(--gold);border-bottom-color:#b8941f;}
.btn.v{background:var(--green);border-bottom-color:#2bbf6a;} .btn.r{background:var(--red);border-bottom-color:#b83644;}
.btn .k{font-family:"Press";font-size:11px;margin-right:8px;}
.btn:disabled{opacity:.45;cursor:default;}
.btn.right{outline:4px solid var(--green);} .btn.wrong{outline:4px solid var(--red);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .grid2 .btn{margin:0;}
/* feedback */
.fb{font-size:22px;line-height:1.3;border-radius:7px;padding:12px;margin:10px 0;}
.fb.good{background:#0c3322;border:3px solid var(--green);color:#c9ffe2;}
.fb.bad{background:#3a1320;border:3px solid var(--red);color:#ffd2d8;}
/* bars / cards / regions */
.bars{margin:10px 0;}
.barrow{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:19px;}
.barrow .nm{width:104px;color:var(--mut);} .barrow .tr{flex:1;height:24px;background:#0d1530;border:2px solid #2b3b6e;border-radius:4px;overflow:hidden;}
.barrow .tr i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));} .barrow .vl{width:120px;text-align:right;color:#fff;}
.cards{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0;}
.rcard{display:flex;justify-content:space-between;gap:8px;background:#0d1530;border:2px solid #2b3b6e;border-radius:6px;padding:9px 11px;font-size:19px;}
.rcard b{color:var(--gold);}
.regions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;}
.reg{border:3px solid #2bbf6a;border-radius:6px;padding:9px;text-align:center;font-size:19px;color:#bdf7d3;background:#0c2a1e;}
.reg.alert{border-color:var(--red);color:#ffd2d8;background:#3a1320;}
/* titulos / resultado */
.center{text-align:center;}
.title{font-family:"Press";font-size:24px;line-height:1.5;color:var(--gold);text-shadow:3px 3px 0 #7a3fb0;margin:10px 0;}
.titlec{font-family:"Press";font-size:13px;color:var(--cyan);line-height:1.6;}
input{width:100%;font-family:"Press";font-size:15px;text-align:center;letter-spacing:3px;text-transform:uppercase;color:#fff;background:#0d1530;border:3px solid var(--cyan);border-radius:6px;padding:14px;}
.err{color:var(--red);font-size:20px;min-height:22px;margin-top:6px;}
.code{font-family:"Press";font-size:12px;color:var(--cyan);background:#04111a;border:3px dashed var(--cyan);border-radius:6px;padding:12px;word-break:break-all;margin:10px 0;line-height:1.7;}
.pyr{display:flex;flex-direction:column;align-items:center;gap:5px;margin:12px 0;font-family:"Press";font-size:10px;}
.pyr div{color:#04111a;padding:8px 6px;border-radius:4px;}
.pl4{width:46%;background:var(--green);} .pl3{width:64%;background:var(--gold);} .pl2{width:82%;background:var(--purple);color:#fff;} .pl1{width:100%;background:var(--cyan);}
.blink{animation:bl 1s steps(2) infinite;} @keyframes bl{50%{opacity:.25;}}
/* popup de vida perdida / pontos ganhos */
.popfx{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:70;pointer-events:none;font-family:"Press";text-align:center;animation:popfx 2.3s ease-out forwards;}
.popfx.bad{color:#ff5a6a;} .popfx.good{color:#5dff9b;}
.popfx .big{font-size:26px;text-shadow:3px 3px 0 #1a1140;} .popfx .sub{font-size:12px;margin-top:8px;color:#fff;text-shadow:2px 2px 0 #1a1140;}
@keyframes popfx{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.4);}
  8%{opacity:1;transform:translate(-50%,-52%) scale(1.25);}
  16%{transform:translate(-50%,-52%) scale(1);}
  70%{opacity:1;transform:translate(-50%,-54%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-95%) scale(1);}}
.conf{position:fixed;top:-24px;z-index:60;font-size:22px;animation:fall 3s linear forwards;pointer-events:none;}
@keyframes fall{to{transform:translateY(110vh) rotate(380deg);opacity:0;}}
/* menu (index) */
.menu a{display:block;font-family:"VT";font-size:24px;color:#04111a;background:var(--cyan);border-bottom:5px solid #1278a8;border-radius:7px;padding:14px;margin:9px 0;text-decoration:none;}
.menu a.p{background:var(--purple);border-bottom-color:#7a3fb0;} .menu a.g{background:var(--gold);border-bottom-color:#b8941f;} .menu a.v{background:var(--green);border-bottom-color:#2bbf6a;}
.menu a small{font-family:"VT";display:block;font-size:17px;color:#1a1140;}