/* AI_TAG: FRONTEND_COMPONENT | PigeSurfers minimal UI styles */
:root{
  --bg: #0b1220;
  --panel: #0f192a;
  --text: #eaf2ff;
  --muted: #9fbbe6;
  --accent: #4da3ff;
  --accent2: #7df1ff;
}
html,body{height:100%;margin:0;background:radial-gradient(1200px 900px at 30% -10%, #183153, #0b1220 60%);} 
#app{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;background:linear-gradient(#0b1220,#0b1220);} 
.hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;z-index:10;pointer-events:none}
.hud .left,.hud .center,.hud .right{display:flex;align-items:center;gap:10px}
.hud .right button{pointer-events:auto;cursor:pointer;background:linear-gradient(180deg,#1b2a42,#0f192a);color:var(--text);border:1px solid rgba(77,163,255,0.4);border-radius:10px;padding:8px 10px;font-weight:800}
.hud .score{font-size:20px;font-weight:900;color:var(--text);text-shadow:0 2px 8px #0008}
.hud .speed{font-size:12px;font-weight:700;color:var(--muted)}
.powerups .pu{pointer-events:none;color:var(--text);font-weight:800;background:linear-gradient(180deg,#163052,#0e1a2a);border:1px solid rgba(125,241,255,.35);padding:6px 8px;border-radius:10px;box-shadow:0 8px 24px #0006}
.powerups .t{opacity:.8}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0b1220cc,#0b1220ee);z-index:20}
.overlay.hidden{display:none}
.panel{background:linear-gradient(180deg,#132337,#0e1828);border:1px solid rgba(77,163,255,.4);border-radius:16px;box-shadow:0 24px 80px #0008, 0 0 24px #4da3ff22;color:var(--text);padding:22px;max-width:520px;margin:16px}
.panel.small{max-width:360px}
.logo{margin:0 0 10px 0;font-size:28px;letter-spacing:.5px;background:linear-gradient(90deg,#4da3ff,#7df1ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.tag{margin:0 0 8px 0;color:var(--muted)}
.howto{margin:10px 0 16px 18px;color:#c8ddff}
.howto li{margin:6px 0}
.panel button{cursor:pointer;background:linear-gradient(180deg,#28507c,#1a2d4b);color:var(--text);border:1px solid rgba(77,163,255,.5);border-radius:12px;padding:10px 14px;font-weight:900}
.panel .actions{display:flex;gap:10px;justify-content:center}

/* On-screen controls (shown for touch) */
.touch-controls{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:14px;z-index:15}
.touch-controls .btn{width:64px;height:64px;border-radius:50%;border:1px solid rgba(77,163,255,.3);background:linear-gradient(180deg,#102036,#0a1422);box-shadow:0 10px 28px #0008;color:#cfe6ff;font-weight:900;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}

@media (pointer:coarse){
  .touch-controls{display:flex}
}
@media (pointer:fine){
  .touch-controls{display:none}
}