@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;background:#131b2d;color:#fff}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:0 36px}header{height:90px;display:flex;align-items:center;gap:20px}.brand{text-decoration:none;color:#fff;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-size:29px;letter-spacing:.5px}.brand>span:last-child{color:#d8f45b}.brand-icon{color:#d8f45b;margin-right:12px}.edition{margin-left:auto;font-size:12px;letter-spacing:2px;color:#a1a8bb}.edition span{background:#273148;padding:5px 7px;margin-left:8px}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible{outline:3px solid white;outline-offset:4px}#pause{background:#29324a;width:42px;height:42px;border-radius:50%;font-size:22px}.game{height:min(62vh,620px);min-height:360px;position:relative;border-radius:16px;overflow:hidden;background:#75c6df;box-shadow:0 14px 50px #0002}canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:23px;left:27px;right:27px;display:flex;justify-content:space-between;color:#16233d;pointer-events:none}.hud small{display:block;font-size:11px;letter-spacing:2px;font-weight:800}.hud strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px;font-weight:800}.best{text-align:right}.level{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:#24455d;font-weight:800}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#d9f3ed44,#d9f3ed08)}.overlay[hidden]{display:none}.panel{text-align:center;color:#152439;transform:translateY(-12px)}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:800}.panel h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(64px,8vw,106px);line-height:.85;letter-spacing:-2px;margin:16px 0}.panel em{font-style:normal;color:#f8ffb3;text-shadow:3px 4px 0 #192d45}.panel p{line-height:1.5;font-size:16px;font-weight:600}.start{background:#d8f45b;color:#172039;font-weight:900;border-radius:8px;padding:17px 25px;box-shadow:0 5px 0 #1f3544;min-width:210px}.start span{margin-left:30px}.instruction{font-size:12px;margin-top:20px;font-weight:600}.bottom-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#f8f9f4;pointer-events:none}.dashboard{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:26px 0}.controls{display:flex;gap:12px;flex:1;max-width:550px}.control{touch-action:none;user-select:none;display:flex;align-items:center;gap:16px;padding:16px 24px;border-radius:10px;background:#273148;position:relative;overflow:hidden;flex:1;text-align:left}.control>span{font-size:30px}.control div{font-size:16px;font-weight:800;letter-spacing:1px}.control small{display:block;font-size:11px;font-weight:400;color:#adb5c6;letter-spacing:0;margin-top:5px}.drop{background:#d8f45b;color:#162239}.drop small{color:#445328}.control:active,.control.pressed{transform:translateY(2px);filter:brightness(1.15)}#reload{position:absolute;bottom:0;left:0;height:3px;background:#6b8321;width:100%}.label{font-size:10px;letter-spacing:2px;color:#9da9be}.targets>div{display:flex;gap:22px;margin-top:12px}.targets>div>span{display:grid;grid-template-columns:auto auto;gap:4px 7px;font-size:20px}.targets b{font-size:12px;font-weight:500;align-self:center}.targets strong{grid-column:2;font-family:'Barlow Condensed',Impact,sans-serif;font-size:24px;color:#d8f45b}footer{border-top:1px solid #30384b;padding:18px 0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.3px;color:#8e9bb2}footer i{padding:0 9px} @media(max-width:760px){main{padding:0 12px}header{height:66px}.brand{font-size:24px}.edition{display:none}#pause{margin-left:auto}.game{height:60svh;min-height:350px;border-radius:12px}.level{top:82px;font-size:10px}.hud{top:16px;left:18px;right:18px}.hud strong{font-size:34px}.dashboard{display:block;padding:14px 0}.controls{max-width:none;gap:10px}.control{padding:14px 12px;gap:9px}.control div{font-size:14px}.control small{font-size:10px}.targets{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.label{max-width:65px;line-height:1.6}.targets>div{gap:15px;margin:0}.targets b{font-size:11px}.targets strong{font-size:20px}.panel h1{font-size:76px}.panel p{font-size:14px}.eyebrow{font-size:10px}.instruction{font-size:10px}footer{font-size:9px}footer>span:last-child{display:none}.bottom-hint{font-size:8px;letter-spacing:.7px}}@media(max-height:520px) and (orientation:landscape){header{height:48px}.game{height:65vh;min-height:220px}.panel h1{font-size:45px}.panel p,.instruction,.eyebrow{display:none}.start{padding:12px}.dashboard{padding:10px 0}.targets,footer{display:none}}
/* Prevent iOS selection and long-press callouts across touch controls. */
.controls,.controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.control{-webkit-tap-highlight-color:transparent}
/* Roomy thumb targets and no accidental selection around mobile controls. */
.dashboard,.dashboard *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:760px){.control{min-height:108px;padding:22px 16px}.controls{gap:12px}.dashboard{padding-top:16px}.control small{font-size:12px}.control div{letter-spacing:.3px}.targets{margin-top:20px}}
@media(max-height:520px) and (orientation:landscape){.control{min-height:80px;padding:16px}}

.bonus{position:absolute;left:50%;top:86px;transform:translateX(-50%);width:min(280px,calc(100% - 28px));padding:9px 12px 12px;border:1px solid var(--bonus-color);border-radius:9px;background:#172039ed;color:var(--bonus-color);display:flex;justify-content:space-between;gap:10px;font-size:14px;pointer-events:none}.bonus[hidden]{display:none}.bonus strong{white-space:nowrap}.bonus i{position:absolute;left:12px;right:12px;bottom:5px;height:3px;background:#ffffff30}.bonus b{display:block;height:100%;background:var(--bonus-color)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:760px){.bonus{top:70px}}

/* A compact, translucent bonus tucked underneath the score. */
.bonus {
  left: 27px;
  transform: none;
  width: 210px;
  max-width: calc(100% - 54px);
  padding: 5px 8px 9px;
  gap: 8px;
  border-radius: 6px;
  background: #172039a6;
  font-size: 14px;
  line-height: 1.25;
}
.bonus > span { min-width: 0; }
.bonus i { left: 8px; right: 8px; bottom: 3px; height: 2px; }
@media(max-width:760px) {
  .bonus { left: 18px; top: 70px; width: 200px; max-width: 57%; font-size: 12px; }
  .level { left: auto; right: 18px; top: 76px; transform: none; letter-spacing: 1px; }
}

/* Let both landscape controls share the full play-area width. */
@media(orientation:landscape){.dashboard{flex-wrap:wrap}.controls{flex:0 0 100%;width:100%;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.control{width:100%;min-width:0}}

#sound{background:#29324a;flex-shrink:0;width:42px;height:42px;border-radius:50%;font-size:20px;touch-action:manipulation}@media(max-width:760px){#sound{margin-left:auto}#pause{margin-left:0}}

.leaderboard{margin:4px 0 24px;padding:22px;border:1px solid #35425b;border-radius:12px;background:#1b263c}.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.leaderboard h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:26px;margin:0;color:#d8f45b}.leaderboard p{font-size:14px;line-height:1.5;color:#c4cfe0}.leaderboard button,#skip-score{background:#35425b;padding:12px 16px;border-radius:8px;font-size:14px}.leaderboard ol{padding:0;list-style:none;margin:16px 0}.leaderboard li{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #35425b;font-size:16px}.leaderboard li>span{color:#93a3be}.leaderboard li>b{overflow-wrap:anywhere;flex:1}.leaderboard li>strong{color:#d8f45b;white-space:nowrap}#champion{overflow-wrap:anywhere}#score-dialog{color:#fff;background:#1b263c;border:1px solid #d8f45b;border-radius:16px;padding:24px;max-width:min(420px,calc(100% - 24px));max-height:90svh;overflow:auto}#score-dialog::backdrop{background:#071123c9}#score-dialog h2{margin:0 0 12px;font-size:24px;color:#d8f45b}#score-dialog p{font-size:14px;line-height:1.5}#score-dialog label{display:block;font-size:16px;margin-bottom:8px}#nickname{font:inherit;font-size:16px;width:100%;padding:12px;background:#111b2e;color:white;border:1px solid #667691;border-radius:8px}#submitted-score{font-size:24px!important;font-weight:bold}.score-actions{display:flex;gap:10px;flex-wrap:wrap}#save-score{padding:14px;background:#d8f45b;color:#172039;font-weight:bold;border-radius:8px}button:disabled{opacity:.6;cursor:wait}@media(max-width:600px){.leaderboard{padding:16px}.ranking-heading{align-items:flex-start;flex-direction:column}.leaderboard h2{font-size:24px}}

/* Keep long presses on the play area and every button out of iOS text selection. */
.game,.game *,button,button *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.control{touch-action:none}
#nickname{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Prevent iOS selection across the whole page, including the leaderboard. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#nickname {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}


/* Medal podium: semantic ranking order, visual silver / gold / bronze layout. */
.leaderboard .podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin: 26px 0 18px;
}
.leaderboard .podium[hidden], #ranking[hidden] { display: none; }
.leaderboard .podium-place {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 16px 10px 12px;
  text-align: center;
  border: 1px solid var(--medal);
  border-bottom: 5px solid var(--medal);
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, var(--tint), #172238);
}
.leaderboard .place-1 { grid-column: 2; min-height: 210px; --medal: #f2cd60; --tint: #51452c; }
.leaderboard .place-2 { grid-column: 1; min-height: 178px; --medal: #becddd; --tint: #38455b; }
.leaderboard .place-3 { grid-column: 3; min-height: 152px; --medal: #d89b6c; --tint: #4c3833; }
.leaderboard .podium-place > span { font-size: 30px; line-height: 1.2; }
.leaderboard .podium-place > b { flex: 1; font-size: 16px; width: 100%; overflow-wrap: anywhere; }
.leaderboard .podium-place > strong { color: var(--medal); font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
.leaderboard .podium-place > small { font-size: 14px; font-weight: 800; color: var(--medal); }
@media (max-width: 600px) {
  .leaderboard .podium { gap: 6px; }
  .leaderboard .podium-place { padding: 12px 5px 10px; gap: 8px; }
  .leaderboard .podium-place > b { font-size: 14px; }
  .leaderboard .podium-place > strong { font-size: 16px; }
}


.health{position:absolute;right:27px;top:86px;display:flex;align-items:center;justify-content:space-between;gap:6px;width:104px;max-width:29%;padding:5px 8px 10px;border-radius:6px;background:#172039a6;color:#ffd4df;font-size:14px;pointer-events:none}
.health>span{color:#ff8da8;font-size:17px}.health>b{white-space:nowrap}.health>i{position:absolute;left:8px;right:8px;bottom:4px;height:3px;background:#ffffff30}.health>i>span{display:block;width:100%;height:100%;background:#ff8da8}.health.low{background:#681f35cf;color:#fff}
.targets>div{flex-wrap:wrap}
@media(max-width:760px){.health{right:18px;top:97px}.targets{align-items:flex-start}.targets>div{justify-content:flex-end;gap:12px}.instruction{max-width:310px;margin:14px auto 0}}

/* Readable HUD throughout the complete day/night cycle. */
.hud { transition: color .8s; }
.night-hud .hud { color: #fff4d4; text-shadow: 0 2px 4px #111b35; }
.level { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#daylight { padding: 4px 8px; border-radius: 20px; color: #fff4d4; background: #172039ba; font-size: 12px; letter-spacing: 1px; }
.night-hud .level { color: #fff4d4; text-shadow: 0 1px 3px #111b35; }

/* A compact pre-flight picker also stays available before each new round. */
.overlay { padding: 16px; overflow-y: auto; place-items: safe center; }
.panel { width: min(440px, 100%); margin: auto; padding: 18px; transform: none; border: 1px solid #ffffff80; border-radius: 16px; background: #eaf3e9ed; box-shadow: 0 10px 40px #15243930; }
.panel h1 { font-size: 60px; margin: 8px 0; }
.panel p { font-size: 14px; line-height: 1.4; margin: 8px 0; }
.instruction { font-size: 12px; line-height: 1.4; margin: 12px auto 0; max-width: 350px; }
.bird-picker { margin: 14px 0; padding: 0; border: 0; min-width: 0; }
.bird-picker[hidden] { display: none; }
.bird-picker legend { float: left; width: 100%; margin-bottom: 7px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.bird-options { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bird-options button { min-width: 0; padding: 0 2px 7px; border: 2px solid #7d94994a; border-radius: 9px; background: #ffffff91; color: #243349; font-size: 14px; font-weight: 700; }
.bird-options button[aria-pressed="true"] { border-color: #354b36; background: #d8f45b; box-shadow: 0 2px 0 #354b36; }
.bird-options button:focus-visible { outline-color: #243349; outline-offset: 2px; }
.bird-options canvas { width: 100%; height: auto; aspect-ratio: 3 / 2; pointer-events: none; }
.bird-picker > small { display: block; margin-top: 7px; font-size: 12px; }
.panel .start { min-height: 48px; padding: 13px 24px; }
@media (max-width: 760px) {
  .level { align-items: flex-end; }
  #daylight { position: absolute; right: 0; top: 56px; white-space: nowrap; font-size: 12px; }
  .overlay { padding: 10px; }
  .panel { padding: 14px; }
  .panel h1 { font-size: 48px; }
  .panel .eyebrow { letter-spacing: 1.4px; }
  .bird-picker { margin: 10px 0; }
  .bird-options { gap: 5px; }
}
@media (max-height: 760px) and (orientation: portrait) {
  .panel h1 { font-size: clamp(32px, 9vw, 42px); }
  #overlay[data-state="ready"] .panel p { display: none; }
  .panel h1 br { display: none; }
  .panel h1 em { margin-left: 6px; }
  .panel p { margin: 5px 0; }
  .instruction { margin-top: 8px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .overlay { padding: 8px; }
  .panel { width: min(720px, 100%); padding: 10px 16px; display: grid; grid-template-columns: 1fr 2fr; align-items: center; column-gap: 20px; }
  .panel h1 { font-size: 44px; grid-column: 1; grid-row: 1; }
  .panel p { display: none; }
  .bird-picker { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .bird-picker legend { font-size: 12px; }
  .panel .start { grid-column: 1; grid-row: 2; min-width: 0; width: 100%; padding: 10px; }
  .panel .start span { margin-left: 10px; }
  .panel:has(.bird-picker[hidden]) { display: block; width: min(340px, 100%); }
}

.bird-options .bird-speed { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #49613e; }
@media (max-width: 380px) and (orientation: portrait) {
  .bird-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bird-options canvas { max-width: 64px; margin: auto; }
}
@media (max-width: 620px) and (orientation: landscape) {
  .bird-options { grid-template-columns: repeat(5, minmax(64px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
}

.play-counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid #35425b; border-radius: 12px; background: #1b263c; }
.play-counter > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.play-counter strong { color: #d8f45b; font: 800 32px 'Barlow Condensed', Impact, sans-serif; }
.play-counter span { font-size: 16px; }
.play-counter p { color: #aebcd1; font-size: 12px; line-height: 1.5; margin: 0; }
@media(max-width:760px) { .play-counter { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px 16px; } }

#weather { padding: 4px 8px; border-radius: 20px; color: #e6f4ff; background: #172039ba; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
@media(max-width:760px) { #weather { position: absolute; right: 0; top: 84px; } }