/* AI_TAG: FRONTEND_COMPONENT | AngryPiges layout and HUD */
:root{ color-scheme: light dark; }
html,body{ margin:0; padding:0; background:#0b132b; color:#e8f1ff; font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

#hud{ position:fixed; top:0; left:0; right:0; height:58px; display:flex; align-items:center; justify-content:space-between; padding:8px 12px; gap:12px; z-index:10; backdrop-filter: blur(8px); background: linear-gradient(135deg, #0e1a2aee, #0a1220ee); border-bottom:1px solid #223044; }
#hud .left, #hud .right{ display:flex; align-items:center; gap:12px; }
#hud .logo{ font-weight:900; letter-spacing:.5px; background: linear-gradient(90deg, #ffd166, #ef476f); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 2px 8px #ef476633; font-size:18px; }
#hud .level, #hud .birds, #hud .pigs, #hud .score{ opacity:.9; font-weight:800; }
#hud button{ appearance:none; border:none; border-radius:10px; background:#16223b; color:#e8f1ff; padding:8px 10px; font-weight:800; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 12px #0006; border:1px solid #2a3b5a; cursor:pointer; }
#hud button:hover{ background:#1b2a47; }
#hud button.ghost{ background:transparent; border-color:#2a3b5a; }

#stageWrap{ position:fixed; inset:58px 0 0 0; display:flex; align-items:center; justify-content:center; }
#game{ width: min(100vw, 1200px); height: calc(min(100vw, 1200px) * 9/16); max-height: calc(100vh - 64px); background: radial-gradient(1200px 800px at 24% -8%, #1f547a 0%, #3a82c4 22%, #0d1930 60%); border:2px solid #223044; border-radius:12px; box-shadow: 0 10px 36px #0008, 0 0 0 1px #000 inset; }
#touchHint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); background:#10243a; padding:10px 14px; border-radius:10px; border:1px solid #2a3b5a; box-shadow:0 8px 24px #0007; font-weight:800; opacity:.9; }

/* Overlays */
#overlay, #levelSelect{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #0b132bcc, #0b132bcc); z-index:20; }
#overlay[hidden], #levelSelect[hidden]{ display:none; }
.card{ background: linear-gradient(135deg, #0f1c31, #0a1526); border:1px solid #2a3b5a; border-radius:16px; padding:16px; box-shadow:0 10px 36px #0008; min-width: min(94vw, 480px); }
.card h2, .card h3{ margin:4px 0 8px 0; }
.row{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.row button{ appearance:none; border:none; border-radius:12px; background:#1b2a47; color:#e8f1ff; padding:10px 14px; font-weight:900; border:1px solid #2a3b5a; cursor:pointer; }
.row button.ghost{ background:transparent; }
.stars{ display:flex; gap:6px; font-size:20px; color:#ffd166; margin:8px 0; }

#levelGrid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:8px; }
#levelGrid button{ padding:10px; border-radius:10px; background:#10243a; color:#e8f1ff; border:1px solid #2a3b5a; font-weight:900; cursor:pointer; }
#levelGrid button.locked{ opacity:.5; cursor:not-allowed; }

@media (max-width: 640px){
  #hud{ height:54px; }
  #stageWrap{ inset:54px 0 0 0; }
  #game{ width:100vw; height: calc(100vw * 9/16); border-radius:0; border-left:0; border-right:0; }
}