* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0510; font-family:'Press Start 2P', monospace; -webkit-user-select:none; user-select:none; }
#game { position:fixed; inset:0; }
#canvas { position:absolute; inset:0; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; }

#ui { position:absolute; inset:0; z-index:10; }

.overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; overflow:hidden;
}

/* ---------- Menu ---------- */
.menu-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(247,37,133,0.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(76,201,240,0.25), transparent 40%),
    linear-gradient(160deg, #1a0b2e 0%, #2d1155 50%, #0a0518 100%);
}
.title { margin-bottom:36px; animation:pop 0.6s ease; }
.title .t1 { display:block; font-size:clamp(28px,9vw,64px); color:#ffd166; text-shadow:4px 4px 0 #e63946, 8px 8px 0 rgba(0,0,0,0.4); letter-spacing:2px; }
.title .t2 { display:block; font-size:clamp(36px,12vw,90px); color:#4cc9f0; text-shadow:4px 4px 0 #f72585, 8px 8px 0 rgba(0,0,0,0.4); letter-spacing:2px; }
.subtitle { margin-top:14px; font-size:clamp(8px,2.5vw,14px); color:#a7ff5e; letter-spacing:3px; }

.menu-buttons { display:flex; flex-direction:column; gap:16px; width:min(320px,80vw); animation:pop 0.8s ease; }

.pbtn {
  font-family:'Press Start 2P', monospace; cursor:pointer;
  background:#1b1030; color:#ffd166;
  border:3px solid #ffd166;
  padding:14px 18px; font-size:12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5), inset -3px -3px 0 rgba(0,0,0,0.4), inset 3px 3px 0 rgba(255,255,255,0.15);
  transition:transform .08s, background .1s;
  letter-spacing:1px;
}
.pbtn:hover:not(:disabled){ transform:translate(-2px,-2px); background:#2a1850; }
.pbtn:active:not(:disabled){ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,0.5); }
.pbtn:disabled{ opacity:0.4; cursor:not-allowed; }
.pbtn.big{ font-size:16px; padding:18px; color:#a7ff5e; border-color:#a7ff5e; }
.pbtn.danger{ color:#ff5b6e; border-color:#ff5b6e; margin-top:8px; }

.feathers-badge {
  position:absolute; top:16px; right:16px;
  background:rgba(0,0,0,0.5); border:2px solid #ffd166; color:#ffd166;
  padding:8px 12px; font-size:12px; border-radius:2px;
}
.footer { position:absolute; bottom:12px; font-size:8px; }
.footer a { color:#b892ff; text-decoration:none; }
.footer a:hover{ color:#f72585; }

.float-feather{ position:absolute; top:-40px; opacity:0.5; pointer-events:none; animation:fall linear infinite; animation-duration:8s; }
@keyframes fall{ 0%{ transform:translateY(-40px) rotate(0); } 100%{ transform:translateY(110vh) rotate(360deg); } }
@keyframes pop{ 0%{ transform:scale(0.8); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* ---------- Scroll overlays ---------- */
.scroll-overlay { justify-content:flex-start; overflow-y:auto; padding:0 12px 40px;
  background:linear-gradient(160deg,#120826,#0a0518); }
.ov-header{ position:sticky; top:0; z-index:5; width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 0 12px; background:linear-gradient(#120826,#120826dd,transparent); }
.ov-title{ font-size:clamp(10px,3vw,16px); color:#ffd166; flex:1; text-align:center; }
.ov-header .pbtn{ padding:8px 10px; font-size:9px; }
.ov-spacer{ width:70px; }

.chapter-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; width:100%; max-width:800px; }
.chapter-card{ border:3px solid #000; border-radius:4px; padding:12px; cursor:pointer; color:#0a0518; text-align:left; box-shadow:4px 4px 0 rgba(0,0,0,0.5); transition:transform .08s; position:relative; min-height:110px; }
.chapter-card:hover:not(.locked){ transform:translate(-2px,-2px); }
.chapter-card.locked{ filter:grayscale(1) brightness(0.6); cursor:not-allowed; }
.ch-num{ position:absolute; top:6px; right:8px; font-size:20px; opacity:0.4; }
.ch-name{ font-size:11px; margin-bottom:6px; text-shadow:1px 1px 0 rgba(255,255,255,0.3); }
.ch-theme{ font-size:8px; margin-bottom:10px; }
.ch-prog{ font-size:8px; background:rgba(0,0,0,0.35); color:#fff; display:inline-block; padding:4px 6px; border-radius:2px; }

.level-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; width:100%; max-width:640px; }
.level-cell{ background:#1b1030; border:3px solid; border-radius:4px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:transform .08s; }
.level-cell:hover:not(.locked){ transform:scale(1.06); }
.level-cell.locked{ opacity:0.4; cursor:not-allowed; border-color:#444 !important; }
.lv-num{ font-size:13px; color:#fff; }
.lv-stars{ font-size:8px; color:#ffd166; margin-top:4px; }

/* ---------- Upgrade ---------- */
.feathers-bar{ font-size:12px; color:#ffd166; margin:6px 0 16px; background:rgba(0,0,0,0.4); padding:10px 16px; border:2px solid #ffd166; }
.feathers-bar b{ color:#a7ff5e; }
.upgrade-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; width:100%; max-width:900px; }
.bird-card{ background:#160c2c; border:3px solid; border-radius:4px; padding:12px; text-align:left; box-shadow:4px 4px 0 rgba(0,0,0,0.5); }
.bird-card.locked{ filter:grayscale(0.7) brightness(0.7); }
.bird-head{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.bird-icon{ width:36px; height:36px; border-radius:50%; box-shadow:inset -4px -4px 0 rgba(0,0,0,0.3); flex-shrink:0; }
.bird-name{ font-size:12px; color:#fff; margin-bottom:4px; }
.bird-desc{ font-size:8px; color:#9a8fc0; line-height:1.4; }
.stat-row{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.stat-label{ font-size:8px; color:#ffd166; width:56px; }
.stat-bar{ font-size:10px; color:#4cc9f0; letter-spacing:-1px; flex:1; }
.up-btn{ font-family:'Press Start 2P'; font-size:8px; background:#2a1850; color:#a7ff5e; border:2px solid #a7ff5e; padding:6px 8px; cursor:pointer; }
.up-btn:hover:not(:disabled){ background:#3a2470; }
.up-btn:disabled{ opacity:0.35; cursor:not-allowed; border-color:#666; color:#888; }

/* ---------- Settings ---------- */
.settings-box{ width:min(420px,90vw); background:#160c2c; border:3px solid #b892ff; padding:24px; box-shadow:4px 4px 0 rgba(0,0,0,0.5); display:flex; flex-direction:column; gap:18px; }
.set-row{ display:flex; align-items:center; gap:12px; font-size:10px; color:#ffd166; }
.set-row input[type=range]{ flex:1; accent-color:#f72585; }
.set-row span{ width:44px; text-align:right; color:#a7ff5e; }
.toggle-row{ justify-content:space-between; }
.toggle{ font-family:'Press Start 2P'; font-size:9px; background:#2a1850; color:#ff5b6e; border:2px solid #ff5b6e; padding:8px 12px; cursor:pointer; }
.toggle.on{ color:#a7ff5e; border-color:#a7ff5e; }

/* ---------- Result overlays ---------- */
.result-overlay{ background:rgba(10,5,24,0.85); backdrop-filter:blur(2px); }
.result-card{ background:#160c2c; border:4px solid #ffd166; padding:26px 40px; box-shadow:6px 6px 0 rgba(0,0,0,0.5); animation:pop 0.35s ease; margin-bottom:20px; }
.result-overlay.lose .result-card{ border-color:#ff5b6e; }
.result-title{ font-size:20px; color:#a7ff5e; margin-bottom:14px; text-shadow:3px 3px 0 rgba(0,0,0,0.4); }
.lose-title{ color:#ff5b6e; }
.result-stars{ font-size:28px; color:#ffd166; margin-bottom:14px; }
.result-line{ font-size:10px; color:#fff; margin:8px 0; line-height:1.5; }
.result-line b{ color:#4cc9f0; }
.result-buttons{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:min(420px,90vw); }
.result-buttons .pbtn{ font-size:10px; padding:12px; }

/* ---------- In-play HUD ---------- */
.play-hud{ position:absolute; bottom:14px; right:14px; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.hud-btn{ font-size:9px !important; padding:10px 12px !important; }
.ability-btn{ color:#f72585 !important; border-color:#f72585 !important; }
.hud-btn.on{ color:#a7ff5e !important; border-color:#a7ff5e !important; }

@media (max-width:520px){
  .title .t1{ font-size:34px; } .title .t2{ font-size:48px; }
  .result-card{ padding:20px; } .result-title{ font-size:16px; }
  .play-hud{ bottom:8px; right:8px; }
}