/* Minimal, clean layout for Birdie Bonanza */
:root {
  --bg: #0f172a;
  --panel: #0b1220;
  --panel2: #111827;
  --accent: #60a5fa;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --green: #22c55e;
  --gold: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background: radial-gradient(1200px 600px at 50% -200px, #154c2e 0, #0f172a 60%); color: var(--text); font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

#app { max-width: 980px; margin: 0 auto; padding: 16px 16px 32px; }
header { display:flex; align-items: baseline; gap: 16px; justify-content: space-between; }
header h1 { margin:0; font-size: clamp(22px, 4vw, 34px); letter-spacing: 0.5px; }
.tag { color: var(--muted); }

#hud { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: var(--panel2); padding: 12px; border-radius: 12px; margin: 12px 0; }
#hud div { background: rgba(255,255,255,0.03); padding: 8px 10px; border-radius: 8px; }
#hud button.ghost { background: transparent; border: 1px solid #1f2937; color: var(--text); }

#reels { display:flex; justify-content:center; padding: 12px; background: var(--panel2); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
canvas#slot { width: 100%; height: auto; border-radius: 10px; background: linear-gradient(#0a2a0f,#0b1220); }

#controls { display:flex; gap: 10px; justify-content:center; margin: 12px 0; flex-wrap: wrap; }
button { background: var(--accent); color: #02131f; border: none; border-radius: 9px; padding: 12px 16px; font-weight: 700; cursor: pointer; }
button.sm { padding: 6px 10px; font-weight: 600; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

dialog { background: var(--panel2); color: var(--text); border: 1px solid #1f2937; border-radius: 12px; padding: 18px; width: min(720px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,0.4); }
#paytableBody { display:grid; grid-template-columns: 1fr 3fr; gap: 8px; }

footer { margin-top: 18px; color: var(--muted); }