:root {
  --sky-top:#48a0ff; --sky-mid:#7dd3ff; --sky-bottom:#bde8ff;
}
*{box-sizing:border-box;}
html,body{
  height:100%;margin:0;padding:0;background:#000;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f5f5f5;overflow:hidden;
}
.viewport-wrapper{
  height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(circle at 50% 0%,#ffe799 0%,var(--sky-top) 25%,var(--sky-mid) 60%,var(--sky-bottom) 100%);
}
.hud-bar{
  flex:0 0 auto;padding:.4rem .8rem;border-bottom:3px solid #000;
  background:rgba(0,0,0,.55);font-family:"Press Start 2P",system-ui,monospace;
  font-size:.7rem;text-transform:uppercase;display:flex;justify-content:space-between;
  align-items:center;gap:.5rem;box-shadow:0 3px 0 #fff,0 6px 0 #000;z-index:5;
}
.hud-label{white-space:nowrap;}
.hud-label span{margin-left:.4rem;}
.hud-coin{
  display:inline-block;width:8px;height:8px;background:#ffd54f;
  box-shadow:0 0 0 1px #ffb300,1px 1px 0 #ffb300,-1px 0 0 #ffb300;
}

.game-shell{
  flex:1 1 auto;display:flex;justify-content:center;align-items:center;padding:.25rem;
}

.game-container{
  position:relative;
  height:calc(100vh - 80px);
  width:calc((100vh - 80px) * 16 / 9);
  max-width:100%;max-height:100%;margin:0 auto;
  border:4px solid #000;box-shadow:0 0 0 3px #fff,0 0 0 6px #000;
  overflow:hidden;background:#000;
}
@media (max-aspect-ratio:16/9){
  .game-container{
    width:100%;height:calc(100vw * 9 / 16);
  }
}

#gameScene{
  width:100%;height:100%;display:block;
  image-rendering:pixelated;shape-rendering:crispEdges;
}

.info-panel{
  flex:0 0 auto;background:#050816;color:#d9e1ff;
  border-top:3px solid #000;box-shadow:0 -3px 0 #fff;
}
.pixel-card{
  background:#0a1024;border-radius:10px;border:3px solid #fff;
  box-shadow:0 0 0 3px #000;padding:1rem;position:relative;overflow:hidden;
  font-size:.85rem;
}
.pixel-card::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(135deg,rgba(255,255,255,0.08) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.08) 75%,transparent 75%,transparent);
  background-size:6px 6px;opacity:.3;pointer-events:none;mix-blend-mode:soft-light;
}
.pixel-badge{
  display:inline-block;padding:.2rem .5rem;font-size:.7rem;border:2px solid #fff;
  background:#222a4f;box-shadow:3px 3px 0 #000;margin-bottom:.5rem;
  text-transform:uppercase;font-family:"Press Start 2P",system-ui,monospace;
}
@font-face{
  font-family:"Press Start 2P";
  src:local("Press Start 2P"),local("PressStart2P");
  unicode-range:U+000-5FF;
}
@media(max-width:768px){
  .hud-bar{font-size:.55rem;box-shadow:0 2px 0 #fff,0 4px 0 #000;}
  .pixel-card{font-size:.8rem;}
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}