/* ===========================
   GLOBAL VARIABLES (NEON)
   =========================== */
   :root {
    --bg:#09082a;
    --panel:#18153a;
    --neon:#00fff2;
    --neon-pink:#ff3ea9;
    --muted:#a5eaff;
    --radius:16px;
    --shadow:0 0 18px var(--neon);
  
    --bird-inner:#ffffff;
    --bird-mid:#ff3ea9;
    --bird-outer:#6a004d;
  
    /* =========== MODE COLORS =========== */
    --mode-normal:#00fff2;
    --mode-hard:#ff3ea9;
    --mode-reverse:#9d7dff;
    --mode-timerush:#ffcc00;
    --mode-hardcore:#ff2e2e;
    --mode-custom:#6aff6a;
  }
  
  /* ===========================
     GLOBAL PAGE STYLES
     =========================== */
  html, body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    font-family:'Inter', sans-serif;
    background:radial-gradient(circle at 60% 20%, #0b0a2b 0%, #09082a 100%);
    color:var(--neon);
  }
  
  .app { height:100%; width:100%; }
  
  /* ===========================
     HEADER — hidden on gameplay
     =========================== */
  header {
    z-index:9999;
    background:rgba(24,21,58,0.7);
    backdrop-filter:blur(10px);
    padding:14px 20px;
    box-shadow:var(--shadow);
    border-bottom:1px solid rgba(255,255,255,0.1);
    position:relative;
    transition:0.3s ease-in-out;
  }
  
  header.hidden {
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
  }
  
  .title-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  
  .title {
    font-size:2rem;
    font-weight:800;
  }
  
  .pink {
    color:var(--neon-pink);
    text-shadow:0 0 10px var(--neon-pink);
  }
  
  /* ===========================
     MENU BUTTON + DROPDOWN
     =========================== */
  .menu-container {
    position:relative;
    z-index:999999;
  }
  
  #menuBtn {
    background:var(--panel);
    color:var(--neon);
    border:none;
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer;
  }
  
  .dropdown-content {
    display:none;
    position:absolute;
    top:46px;
    left:0;
    background:var(--panel);
    border-radius:10px;
    min-width:160px;
    z-index:999999;
  }
  
  .dropdown-content a {
    display:block;
    padding:10px 14px;
    color:var(--neon);
    text-decoration:none;
  }
  
  .menu-container:hover .dropdown-content { display:block; }
  
  /* ===========================
     FULLSCREEN CANVAS
     =========================== */
  main.stage {
    position:fixed;
    inset:0;
    z-index:1;
  }
  
  canvas#game {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:5;
    background:linear-gradient(135deg,#101042 60%, #1a1853 100%);
  }
  
  /* ===========================
     HUD (score + mode + pause)
     =========================== */
  .hud {
    position:absolute;
    top:72px;
    left:14px;
    display:flex;
    gap:12px;
    z-index:9000;
  }
  
  .hud .box {
    background:rgba(0,0,0,0.5);
    padding:8px 12px;
    border-radius:8px;
    border:1px solid var(--neon);
    box-shadow:0 0 8px var(--neon);
  }
  
  .pause-btn {
    padding:8px 12px;
    border-radius:10px;
    border:1px solid var(--neon);
    background:rgba(0,0,0,0.5);
    color:var(--neon);
    cursor:pointer;
    font-size:1.1rem;
  }
  
  /* ===========================
     OVERLAY MENUS
     =========================== */
  .overlay {
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
    z-index:99999;
  }
  
  .overlay.hidden { display:none; }
  
  .menu {
    pointer-events:auto;
    background:linear-gradient(180deg,rgba(0,255,231,0.08),rgba(255,62,169,0.06));
    padding:24px;
    border-radius:16px;
    border:2px solid var(--neon-pink);
    min-width:260px;
    text-align:center;
    box-shadow:0 0 30px rgba(255,62,169,0.5);
  }
  
  /* ===========================
     BUTTONS — BIG & SMALL
     =========================== */
  .big-btn,
  .small {
    background:rgba(0,0,0,0.35) !important;
    border:2px solid var(--neon);
    color:var(--neon);
    box-shadow:0 0 14px var(--neon);
    padding:10px 22px;
    margin:6px 0;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
  }
  
  .small { padding:8px 14px; border-radius:8px; }
  
  .big-btn:hover,
  .small:hover {
    background:var(--neon);
    color:#18153a;
    box-shadow:0 0 30px var(--neon);
  }
  
  /* ===========================
     INPUT & SELECT
     =========================== */
  input[type="text"],
  input[type="number"],
  select {
    background:rgba(0,0,0,0.4);
    color:var(--neon);
    border:2px solid var(--neon);
    padding:8px 12px;
    border-radius:12px;
    font-size:1rem;
    margin-top:6px;
    box-shadow:0 0 12px rgba(0,255,242,0.4);
  }
  
  /* ===========================
     TIMER OVERLAY
     =========================== */
  .timer {
    font-size:80px;
    color:white;
    text-shadow:0 0 20px var(--neon-pink);
  }
  
  /* ===========================
     CONTENT SECTION BELOW GAME
     =========================== */
  .content-block {
    position:relative;
    z-index:1;
    margin-top:100vh;
    padding:20px;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    color:#ddd;
  }
  
  .content-block h1 { color:var(--neon); }
  
  .main-footer {
    text-align:center;
    color:#aaa;
    padding:14px 0;
    margin-top:20px;
  }
  
  /* ===========================
     MODE LABEL COLORS
     =========================== */
  .mode-normal     { color:var(--mode-normal); }
  .mode-hard       { color:var(--mode-hard); }
  .mode-reverse    { color:var(--mode-reverse); }
  .mode-timerush   { color:var(--mode-timerush); }
  .mode-hardcore   { color:var(--mode-hardcore); }
  .mode-custom     { color:var(--mode-custom); }
  
  /* For Game Over summary mode */
  #final-mode.mode-normal   { color:var(--mode-normal); }
  #final-mode.mode-hard     { color:var(--mode-hard); }
  #final-mode.mode-reverse  { color:var(--mode-reverse); }
  #final-mode.mode-timerush { color:var(--mode-timerush); }
  #final-mode.mode-hardcore { color:var(--mode-hardcore); }
  #final-mode.mode-custom   { color:var(--mode-custom); }
  
  /* ===========================
     MOBILE FIX
     =========================== */
  @media (max-width:600px) {
    .hud { top:20px; left:10px; gap:8px; }
    .title { font-size:1.6rem; }
  }