/* Poke Heist — shared console UI: retro background, HOME-menu style HUD, GBA boxes, cartridges */
:root{
  --ink:#2A2E27; --olive:#5E6B3A; --oliveD:#3E4826; --cream:#F8F8E8; --cream2:#E8E8C8; --paper:#F4F2E6;
  --blue:#3058A8; --joyB:#2FC2F5; --joyR:#FF5C62; --brass:#E0B040; --gold:#9A6B12; --red:#E04838; --green:#2E8B4A;
  --px:'Press Start 2P', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:#2A1E5C;color:var(--cream);font-family:var(--px)}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}button{font:inherit;color:inherit}

/* background: scrolling grid + synth floor; #bgc gets drifting pixel loot from ui.js */
.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 24px,transparent 24px 48px),
  linear-gradient(180deg,#3A2A80 0%,#2A1E5C 45%,#1A2A6C 100%)}
.bgfx::before{content:"";position:absolute;inset:-100% 0 0 0;background:
  linear-gradient(90deg,transparent 0 50%,rgba(255,255,255,.05) 50% 100%) 0 0/64px 64px,
  linear-gradient(0deg,transparent 0 50%,rgba(255,255,255,.05) 50% 100%) 0 0/64px 64px;
  animation:bgscroll 14s linear infinite}
.bgfx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;background:
  linear-gradient(180deg,transparent,rgba(255,96,160,.18)),
  repeating-linear-gradient(0deg,rgba(255,120,200,.35) 0 2px,transparent 2px 22px),
  repeating-linear-gradient(90deg,rgba(255,120,200,.35) 0 2px,transparent 2px 80px);
  transform:perspective(500px) rotateX(55deg);transform-origin:bottom;opacity:.55}
@keyframes bgscroll{to{transform:translateY(50%)}}
#bgc{position:absolute;inset:0;width:100%;height:100%}
.app{position:relative;z-index:1}

/* HUD: Switch HOME-menu feel — light bar, round profile, pill chips, tabs, console buttons, clock + battery */
.hud{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--paper);color:var(--ink);border-bottom:5px solid #0A0A14;box-shadow:0 4px 0 rgba(0,0,0,.28)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .pfp{width:40px;height:40px;border-radius:50%;border:3px solid #0A0A14;background:#CFD8C8 url(/assets/px/atlas.png) 25% 10%/500% 110% no-repeat;box-shadow:inset 0 0 0 2px #fff}
.brand .word{font-size:13px;letter-spacing:.02em;text-shadow:2px 2px 0 #C8C4B0}
.brand .word i{font-style:normal;color:var(--gold)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:7px;padding:7px 11px;background:var(--ink);color:var(--cream);border-radius:14px;white-space:nowrap;box-shadow:0 2px 0 #0A0A14}
.chip b{color:var(--brass);font-weight:400;margin-left:6px}
.chip.demo{background:var(--brass);color:#2A2E27}
.tabs{margin-left:auto;display:flex;gap:2px}
.tabs a{font-size:7px;text-decoration:none;color:#6A7050;padding:12px 10px 10px;border-bottom:4px solid transparent}
.tabs a:hover{color:var(--ink)}.tabs a.cur{color:var(--ink);border-bottom-color:var(--joyR)}
.hud .btns{display:flex;gap:8px;align-items:center}
.cbtn{display:inline-flex;align-items:center;gap:8px;font-size:8px;padding:10px 14px;border-radius:22px;border:3px solid #0A0A14;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 #0A0A14;color:#fff}
.cbtn::before{content:attr(data-k);width:16px;height:16px;border-radius:50%;background:#0A0A14;color:#fff;font-size:7px;display:grid;place-items:center}
.cbtn:hover{transform:translateY(1px);box-shadow:0 2px 0 #0A0A14}
.cbtn.a{background:var(--joyR)}.cbtn.b{background:var(--joyB);color:#0A1A2A}.cbtn.b::before{color:#fff}.cbtn.b.on{background:var(--brass);color:#2A2E27}
.sys{display:flex;align-items:center;gap:10px;font-size:8px;color:var(--ink);margin-left:6px}
.batt{position:relative;width:22px;height:11px;border:2px solid var(--ink);border-radius:2px}
.batt::before{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:70%;background:var(--green)}
.batt::after{content:"";position:absolute;right:-5px;top:2px;width:3px;height:3px;background:var(--ink)}

/* GBA box + cartridge */
.box{background:var(--cream);color:var(--ink);border:3px solid var(--oliveD);border-radius:6px;box-shadow:inset 0 0 0 2px var(--cream),inset 0 0 0 4px var(--olive),0 3px 0 rgba(0,0,0,.35)}
.box h2{margin:0 0 10px;font-size:10px;color:var(--oliveD)}
.box .sub{margin:0 0 10px;font-size:7px;line-height:1.8;color:#6A7050}
.dlg{background:#F8F8F8;color:#303030;border:4px solid var(--blue);border-radius:4px;box-shadow:inset 0 0 0 2px #F8F8F8,inset 0 0 0 5px #7090E0,0 3px 0 rgba(0,0,0,.35)}
.cart{position:relative;background:#E8E8D8;color:var(--ink);border:4px solid #0A0A14;border-radius:8px 8px 4px 4px;padding:34px 16px 14px;box-shadow:inset 0 0 0 3px #B8B8A0,0 8px 0 rgba(0,0,0,.35)}
.cart::before{content:"";position:absolute;left:14px;right:14px;top:0;height:10px;background:repeating-linear-gradient(90deg,#9A9A88 0 6px,transparent 6px 10px)}
.cart .label{position:absolute;left:14px;top:12px;font-size:7px;color:#F8F8E8;background:var(--ink);padding:5px 8px;border-radius:3px;letter-spacing:.06em}
.cart .label.blue{background:var(--blue)}.cart .label.red{background:#E03A48}.cart .label.olive{background:var(--oliveD)}.cart .label.gold{background:var(--gold)}
.foot{padding:12px 18px 28px;text-align:center;font-size:6px;color:#C8C0F0;line-height:2.2;text-shadow:1px 1px 0 #000}.foot a{color:#C8C0F0}

@media (max-width:900px){.hud{flex-wrap:wrap;gap:10px;padding:10px 12px}.tabs{margin-left:0;order:5;width:100%;justify-content:space-between}.chips .hide,.sys{display:none}.brand .word{font-size:11px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}