*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sky-top: #5ba3d9;
  --sky-bot: #a8daf0;
  --green: #5cb85c;
  --dark-green: #3d8b3d;
  --brown: #8b5e3c;
  --red: #e84040;
  --gold: #ffd700;
  --white: #fff;
  --font-title: 'Fredoka One', cursive;
  --font-ui: 'Nunito', sans-serif;
}
html, body { touch-action: none;  width:100%; height:100%; overflow:hidden; font-family: var(--font-ui); touch-action:none; }
#game-container { position:relative; width:100%; height:100%; background: linear-gradient(180deg, var(--sky-top), var(--sky-bot)); overflow:hidden; }
#gameCanvas { position:absolute; top:0; left:0; display:block; }

/* SCREENS */
.screen { position:absolute; top:0;left:0;width:100%;height:100%; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#87CEEB,#d0f0ff); z-index:100; padding:20px; }
.screen.active { display:flex; }

/* START */
.title-area { text-align:center; margin-bottom:20px; }
.game-thumbnail {
  border-radius: 14px;
  border: 3px solid #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  max-width: 320px;
  width: 90%;
  aspect-ratio: 16/9;
  object-fit: cover;
  margin-bottom: 12px;
}
.game-title { font-family:var(--font-title); font-size:clamp(2.5rem,10vw,4rem); color:var(--red);
  text-shadow:3px 3px 0 #b00,0 0 30px rgba(232,64,64,0.5); }
.game-sub { font-size:1rem; color:#444; font-weight:700; margin-top:4px; }
.stars-total { font-size:1.2rem; font-weight:900; color:#333; margin-bottom:16px; }

/* BUTTONS */
.btn-play { padding:16px 48px; background:linear-gradient(135deg,#ff4444,#cc0000);
  border:none; border-radius:50px; font-family:var(--font-title); font-size:1.3rem;
  color: #333; cursor:pointer; box-shadow:0 6px 20px rgba(200,0,0,0.4),0 3px 0 #800;
  transition:all 0.15s; margin-bottom:12px; letter-spacing:1px; }
.btn-play:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(200,0,0,0.5),0 3px 0 #800; }
.btn-play:active { transform:translateY(1px); box-shadow:0 3px 10px rgba(200,0,0,0.4),0 1px 0 #800; }
.btn-levels { padding:12px 36px; background:linear-gradient(135deg,#4caf50,#2e7d32);
  border:none; border-radius:50px; font-family:var(--font-title); font-size:1rem;
  color: #333; cursor:pointer; box-shadow:0 4px 15px rgba(0,150,0,0.4),0 3px 0 #1a4d1a;
  transition:all 0.15s; margin-bottom:10px; }
.btn-levels:hover { transform:translateY(-2px); }
.btn-back { padding:10px 28px; background:transparent; border:2px solid rgba(0,0,0,0.3);
  border-radius:30px; font-family:var(--font-ui); font-size:0.9rem; color:#444;
  cursor:pointer; transition:all 0.15s; }
.btn-back:hover { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }

/* LEVEL SELECT */
.ls-title { font-family:var(--font-title); font-size:2rem; color:var(--red); margin-bottom:20px; }
.level-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:400px; width:100%; margin-bottom:20px; max-height:50vh; overflow-y:auto; }
.level-btn { aspect-ratio:1; display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fff,#f0f0f0); border-radius:10px; border:2px solid #ddd;
  cursor:pointer; font-family:var(--font-title); font-size:1rem; color:#333;
  box-shadow:0 3px 8px rgba(0,0,0,0.15); transition:all 0.15s; padding:4px; }
.level-btn:hover { transform:scale(1.08); border-color:var(--red); }
.level-btn.locked { opacity:0.4; cursor:not-allowed; background:#ccc; }
.level-btn .lbstars { font-size:0.65rem; }
.level-btn.completed { border-color:var(--gold); background:linear-gradient(135deg,#fff9e0,#fff3c0); }

/* HUD */
#hud { position:absolute;top:0;left:0;right:0;z-index:50;pointer-events:none; }
.hud-top { display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); backdrop-filter:blur(4px); }
.hud-info { display:flex;flex-direction:column; }
.hud-level { font-family:var(--font-title); font-size:1.1rem; color: #333; text-shadow:1px 1px 3px rgba(0,0,0,0.5); }
.stars-row .star { font-size:1rem; color:var(--gold); }
.stars-row .star.empty { color:rgba(255,255,255,0.3); }
.hud-score { font-family:var(--font-title); font-size:1.8rem; color: #333;
  text-shadow:2px 2px 0 rgba(0,0,0,0.3); }
.hud-birds { display:flex;gap:4px;pointer-events:none; }
.bird-icon { width:28px;height:28px; border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1rem; }
.btn-pause { width:34px;height:34px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4);
  border-radius:50%; color: #333; font-size:0.9rem; cursor:pointer; pointer-events:auto; transition:all 0.2s; }
.btn-pause:hover { background:rgba(255,255,255,0.35); }

/* LEVEL COMPLETE */
.lc-title { font-family:var(--font-title); font-size:2.5rem; color:#2e7d32; text-shadow:2px 2px 0 #1a4d1a;
  margin-bottom:20px; animation:bounce 0.5s ease; }
@keyframes bounce { 0%{transform:scale(0.5)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }
.stars-display { display:flex;gap:12px; margin-bottom:20px; }
.big-star { font-size:3rem; color:rgba(0,0,0,0.1); transition:all 0.3s; }
.big-star.lit { color:var(--gold); text-shadow: 1px 2px 0px rgba(0,0,0,0.1); transform:scale(1.2); }
.lc-score { font-family:var(--font-title); font-size:1.5rem; color:#333; margin-bottom:20px; }

/* FAILED */
.lf-title { font-family:var(--font-title); font-size:2.5rem; color:var(--red); margin-bottom:10px; }
.lf-sub { font-size:1rem; color:#666; margin-bottom:24px; }

/* PAUSE */
.pause-title { font-family:var(--font-title); font-size:2.5rem; color:#333; margin-bottom:24px; }

/* SOUND */
.sound-btn { position:fixed;bottom:16px;right:16px;z-index:200;font-size:1.2rem;
  background:rgba(255,255,255,0.7);border-radius:50%;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.2); user-select:none; }

.hidden { display:none!important; }

/* Responsive */
@media(max-width:480px) {
  .level-grid { grid-template-columns:repeat(5,1fr); }
  .lc-title { font-size:2rem; }
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:#aaa; border-radius:2px; }