/* ===== Bandeja Alta — el juego del coca-colero =====
   Pixel-art canvas + HTML overlay HUD. Static, no build step.
   Type: Anton (ultras-banner caps) + Oswald (body). */

:root{
  --boca-blue:#1f4ea1;
  --boca-blue-d:#14306b;
  --boca-blue-xd:#0c1f49;
  --boca-gold:#f4c430;
  --boca-gold-d:#c89a14;
  --boca-gold-l:#ffe06b;
  --ink:#0a0c12;
  --panel:#11192e;
  --panel-2:#1a2440;
  --good:#4fd06b;
  --bad:#ff5a4d;
  --txt:#f4f1e8;
}

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

html,body{
  height:100%;
  background:#000;
  color:var(--txt);
  font-family:"Oswald", system-ui, sans-serif;
  overflow:hidden;
}

.banner-font{ font-family:"Anton", Impact, "Arial Black", sans-serif; }

#stage{
  position:relative; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:#05060a;
}
#game{
  image-rendering:pixelated; image-rendering:crisp-edges;
  background:#0a0d14; display:block;
}
.hidden{ display:none !important; }

/* ============ HUD ============ */
#hud{
  position:absolute; inset:0; pointer-events:none;
  padding:14px 18px;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.hud-panel{
  background:linear-gradient(180deg, rgba(20,29,56,.94), rgba(10,15,30,.94));
  border:2px solid #000;
  box-shadow:0 0 0 2px var(--boca-gold-d), 0 6px 0 rgba(0,0,0,.45);
  border-radius:4px;
}

/* stats (left) */
.hud-stats{ display:flex; gap:2px; padding:6px; }
.chip{ display:flex; align-items:center; gap:7px; padding:4px 11px 4px 7px; }
.chip + .chip{ border-left:1px solid #ffffff14; }
.chip-ico{
  font-family:"Anton",sans-serif; font-size:16px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:3px; color:#0a0c12; line-height:1;
}
.ico-plata{ background:var(--good); }
.ico-coca{ background:var(--bad); color:#fff; }
.ico-cambio{ background:var(--boca-gold); }
.chip-body{ display:flex; flex-direction:column; line-height:1; }
.chip-lbl{
  font-family:"Anton",sans-serif; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:#9fb0d6;
}
.chip-val{ font-family:"Anton",sans-serif; font-size:21px; color:var(--boca-gold); letter-spacing:.5px; }

/* scoreboard (center) */
.hud-score{ padding:7px 22px 9px; text-align:center; }
.score-lbl{
  font-family:"Anton",sans-serif; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:#9fb0d6; margin-bottom:4px;
}
#hud-hearts{ font-size:24px; letter-spacing:4px; color:var(--bad); line-height:1; }

/* balance (right) */
.hud-balance{ padding:8px 12px 10px; text-align:center; }
.bal-lbl{
  font-family:"Anton",sans-serif; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:#9fb0d6; margin-bottom:5px;
}
.wobble{
  position:relative; width:150px; height:14px;
  background:#05070d; border:2px solid #000; border-radius:3px; overflow:hidden;
}
.wobble-zone{ position:absolute; top:0; bottom:0; left:35%; width:30%; background:rgba(79,208,107,.18); }
.wobble-fill{
  position:absolute; top:1px; bottom:1px; left:50%; width:5px;
  background:var(--good); transform:translateX(-50%); border-radius:2px;
}
.wobble-mid{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#ffffff3a; transform:translateX(-50%); }

/* ============ Toast ============ */
#toast{
  position:absolute; left:50%; top:60%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none;
}
.toast-msg{
  font-family:"Anton",sans-serif; font-size:18px; letter-spacing:1px;
  padding:5px 14px; background:#000c; border:2px solid #ffffff2e; border-radius:3px;
  text-transform:uppercase; text-shadow:0 2px 0 #000;
  animation:floatUp 1.1s ease-out forwards;
}
.toast-msg.good{ color:var(--good); }
.toast-msg.bad{ color:var(--bad); }
.toast-msg.gold{ color:var(--boca-gold); }
@keyframes floatUp{
  0%{ opacity:0; transform:translateY(10px) scale(.9); }
  15%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-30px); }
}

/* ============ GOL banner ============ */
#gol-banner{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  font-family:"Anton",sans-serif; font-size:74px; color:var(--boca-gold);
  -webkit-text-stroke:3px var(--boca-blue-d);
  text-shadow:0 0 22px #f4c43099, 5px 5px 0 #000; letter-spacing:5px;
  animation:golPop .5s ease-out, golShake .3s infinite; pointer-events:none;
}
@keyframes golPop{ 0%{ transform:translate(-50%,-50%) scale(.2); opacity:0;} 100%{ transform:translate(-50%,-50%) scale(1); opacity:1;} }
@keyframes golShake{ 0%,100%{ margin-left:0; } 25%{ margin-left:-5px;} 75%{ margin-left:5px;} }

/* ============ Overlays ============ */
.overlay{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, rgba(20,30,60,.78), rgba(4,6,12,.93));
}
.title-card, .txn-card{
  position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:3px solid var(--boca-gold);
  box-shadow:0 0 0 4px #000, 0 14px 0 rgba(0,0,0,.5);
  padding:30px 34px; max-width:480px; width:92%; text-align:center;
}
.title-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-top:4px solid var(--boca-blue);
}
.title-kicker{
  font-family:"Anton",sans-serif; color:var(--boca-blue); letter-spacing:4px;
  text-transform:uppercase; font-size:13px; margin-bottom:8px;
}
.title-card h1{
  font-family:"Anton",sans-serif; font-size:62px; line-height:.86;
  color:var(--boca-gold); letter-spacing:2px;
  text-shadow:4px 4px 0 var(--boca-blue-d), 0 0 18px #f4c43033;
  margin-bottom:16px;
}
.title-card h1 span{ display:block; color:#fff; -webkit-text-stroke:2px var(--boca-blue-d); }
.title-blurb{ font-size:16px; line-height:1.5; margin-bottom:20px; color:#e7e3d6; }
.title-blurb b{ color:var(--boca-gold); }
.controls{
  text-align:left; font-size:14px; line-height:1; display:grid; gap:9px;
  background:#0006; padding:14px 16px; border-left:3px solid var(--boca-blue); margin-bottom:22px;
}
.controls div{ display:flex; align-items:baseline; gap:10px; }
.controls b{ font-family:"Anton",sans-serif; color:var(--boca-gold); letter-spacing:1px; min-width:84px; }
.controls span{ color:#c9ccd6; }

button{
  font-family:"Anton",sans-serif; cursor:pointer; letter-spacing:1px;
  background:var(--panel-2); color:var(--txt);
  border:2px solid #000; padding:9px 18px; font-size:16px; text-transform:uppercase;
  box-shadow:0 4px 0 #000, inset 0 0 0 1px #ffffff14; border-radius:3px;
}
button:hover{ filter:brightness(1.1); }
button:active{ transform:translateY(3px); box-shadow:0 1px 0 #000; }
button.primary{ background:var(--boca-gold); color:#1a1300; box-shadow:0 4px 0 var(--boca-gold-d); }
button.big{ font-size:22px; padding:13px 30px; }

/* ============ Transaction ============ */
.txn-card{ max-width:420px; padding:16px 24px; max-height:95vh; overflow-y:auto; }
.txn-head{ font-family:"Anton",sans-serif; color:var(--boca-blue); letter-spacing:3px; text-transform:uppercase; font-size:12px; margin-bottom:2px; }
.txn-order{ font-family:"Anton",sans-serif; font-size:22px; color:var(--boca-gold); }
.txn-order .txn-sub{ display:block; font-family:"Oswald"; font-size:11px; opacity:.6; color:var(--txt); }
.txn-rows{ margin:8px 0; }
.txn-row{ display:flex; justify-content:space-between; font-size:14px; padding:2px 0; text-transform:uppercase; letter-spacing:.5px; }
.txn-row b{ font-family:"Anton",sans-serif; }
.txn-row.big{ font-size:18px; border-top:2px dashed #ffffff33; margin-top:4px; padding-top:6px; }
.txn-row.big b{ color:var(--boca-gold); }
.txn-given{ font-size:18px; margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.txn-given b{ font-family:"Anton",sans-serif; color:var(--good); }
.txn-hint{ font-size:11px; opacity:.6; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:0; }
.txn-hand{ width:100%; max-width:236px; margin:0 auto 4px; user-select:none; }
.txn-hand svg{ width:100%; height:auto; display:block; overflow:visible; }
.bill{ cursor:pointer; transition:transform .12s ease; }
.bill:hover{ transform:translateY(-13px); }
.bill:active{ transform:translateY(-20px); }
.bill.spent{ opacity:.2; pointer-events:none; }
.bill-num{ font-family:"Anton",sans-serif; font-size:19px; letter-spacing:.5px; }
.bill-pesos{ font-family:"Oswald",sans-serif; font-size:6.5px; letter-spacing:1.5px; opacity:.75; }
.bill-cnt{ font-family:"Anton",sans-serif; font-size:11px; opacity:.95; }
.txn-actions{ display:flex; gap:10px; justify-content:center; }
.txn-timerbar{ height:9px; background:#000; margin-top:16px; border:2px solid #000; border-radius:2px; overflow:hidden; }
#txn-timerfill{ height:100%; width:100%; background:var(--good); }

/* ============ End ============ */
.end-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
button.wa{ background:#25d366; color:#06351a; box-shadow:0 4px 0 #128c3e; }

/* ===== Scoreboard: matchup + goal + hearts ===== */
.score-match{ font-family:"Anton",sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#fff; text-shadow:0 2px 0 #000; }
.score-goal{ font-family:"Oswald",sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#9fb0d6; margin:2px 0 3px; }
.score-goal b{ font-family:"Anton",sans-serif; font-size:15px; color:var(--boca-gold); }

/* ===== Level intro card ===== */
.level-card{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:linear-gradient(180deg, rgba(20,29,56,.96), rgba(10,15,30,.96));
  border:2px solid var(--boca-gold); box-shadow:0 0 0 3px #000, 0 8px 0 #0007;
  padding:12px 28px; border-radius:5px; text-align:center;
  animation:lvlCard 2.8s ease forwards;
}
@keyframes lvlCard{ 0%{opacity:0; transform:translateY(12px) scale(.94);} 12%{opacity:1; transform:none;} 84%{opacity:1;} 100%{opacity:0; transform:translateY(-10px);} }
.lc-n{ font-family:"Anton",sans-serif; font-size:11px; letter-spacing:2px; color:var(--boca-blue); text-transform:uppercase; }
.lc-match{ font-family:"Anton",sans-serif; font-size:26px; color:var(--boca-gold); letter-spacing:1px; }
.lc-match i{ font-style:normal; color:#fff; font-size:15px; }
.lc-stadium{ font-family:"Anton",sans-serif; font-size:13px; color:#fff; letter-spacing:1.5px; }
.lc-goal{ font-size:12px; color:#cdd3e2; }

/* ===== Level select ===== */
.levels-card{ max-width:540px; }
.levels-title{ font-family:"Anton",sans-serif; font-size:34px; color:var(--boca-gold); letter-spacing:2px; text-shadow:3px 3px 0 var(--boca-blue-d); margin-bottom:14px; }
.level-list{ display:flex; flex-direction:column; gap:7px; max-height:58vh; overflow-y:auto; padding-right:4px; }
.lvl-row{ display:flex; align-items:center; gap:12px; text-align:left; padding:9px 12px; background:var(--panel-2); border:2px solid #000; box-shadow:0 3px 0 #000; cursor:pointer; }
.lvl-row:not(.locked):hover{ filter:brightness(1.14); }
.lvl-row:not(.locked):active{ transform:translateY(2px); box-shadow:0 1px 0 #000; }
.lvl-row.locked{ opacity:.45; box-shadow:none; cursor:not-allowed; }
.lvl-n{ font-family:"Anton",sans-serif; font-size:20px; color:var(--boca-gold); min-width:22px; text-align:center; }
.lvl-mid{ display:flex; flex-direction:column; flex:1; min-width:0; }
.lvl-match{ font-family:"Anton",sans-serif; font-size:15px; letter-spacing:.5px; }
.lvl-match i{ font-style:normal; color:var(--boca-blue); font-size:12px; }
.lvl-sub{ font-family:"Oswald",sans-serif; font-size:11px; color:#9aa3bd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvl-goal{ font-family:"Anton",sans-serif; font-size:14px; color:var(--boca-gold); white-space:nowrap; }
.stats{ text-align:left; font-size:16px; line-height:1; display:grid; gap:11px; background:#0006; padding:16px 22px; margin-bottom:22px; }
.stats .row{ display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:.5px; }
.stats .row b{ font-family:"Anton",sans-serif; color:var(--boca-gold); }