:root {
  color-scheme: dark;
  --bg-top: #100e1b;
  --bg-bottom: #18131f;
  --card: rgba(24, 20, 33, .96);
  --text: #f5ebd9;
  --muted: #b3a6bb;
  --accent: #f6aa64;
  --accent-dark: #e88b4d;
  --shadow: 0 24px 90px rgba(0, 0, 0, .4);
}

html, body { background: #100e1b; font-family: "Avenir Next", "Segoe UI", sans-serif; }
#game-shell { border: 1px solid #373044; background: #211c30; }
#overlay { background: rgba(10, 8, 18, .44); padding: 24px; }
.overlay-card { position: relative; width: min(520px, 100%); padding: 28px 34px 32px; border: 1px solid rgba(203, 174, 142, .22); border-radius: 24px; background: var(--card); box-shadow: var(--shadow), inset 0 1px rgba(255, 242, 218, .035); }
#overlay.start-mode .overlay-card { padding-top: 36px; padding-bottom: 40px; }
.mascot { height: 120px; display: grid; place-items: center; margin: 0 auto 8px; }
#overlay.start-mode .mascot { margin-bottom: 22px; }
.mascot svg { overflow: visible; filter: drop-shadow(0 0 22px rgba(153, 235, 199, .2)); animation: ghost-float 4s ease-in-out infinite; }
@keyframes ghost-float { 0%, 100% { transform: translateY(3px) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
#overlayTitle { font-family: Georgia, "Times New Roman", serif; }
#gameTitle { display: block; max-width: 390px; margin: 0 auto; font-family: inherit; font-weight: 700; font-size: clamp(2.7rem, 6.5vw, 4.25rem); line-height: .98; letter-spacing: -.055em; color: #f6ad6b; }
#gameTitle .title-ducks { color: #f6eedf; }
#gameTitle .title-ghost { color: #f6ad6b; }
.haunt-description { color: #b6aabd; margin: 22px 0 0; font-size: .91rem; line-height: 1.7; }
#overlaySubtitle { margin: 22px 0 4px; color: #d6ccdd; font-size: 1.1875rem; line-height: 1.85; }
#overlay.start-mode #overlaySubtitle { margin-top: 30px; }
#overlayReason, #overlay.end-mode #overlayTitle { color: #f1e5d3; }
#overlay.end-mode #overlayTitle { font-family: Georgia, serif; font-size: clamp(.875rem, 4vw, 1.25rem); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
#overlay.end-mode .mascot { height: 90px; }
#overlay.end-mode .mascot svg { width: 90px; height: 90px; }
#overlay.end-mode .haunt-description { display: none; }
#actionButton { min-width: 190px; border-radius: 10px; background: #f0a063; color: #241920; box-shadow: 0 5px 22px rgba(240, 160, 99, .09); }
#actionButton:hover { background: #ffb77a; }
#actionButton:focus-visible { outline: 2px solid #c6f9df; outline-offset: 4px; }
#tinyNote { color: #b7a8bf; }
#leaderboardToggle { color: #cebdad; border-bottom-color: #76624e; right: 30px; bottom: max(28px, env(safe-area-inset-bottom, 0px)); font-size: .75rem; letter-spacing: .035em; }
#leaderboardToggle:hover { color: #ffbc82; border-bottom-color: #ffbc82; }
.hud-card { background: rgba(20, 18, 29, .9); border: 1px solid #4a3c4c; box-shadow: 0 3px 16px rgba(0, 0, 0, .2); color: #ffe0b1; }
.hud-card .label { color: #beabc7; }
#countdownDisplay { font-family: Georgia, serif; color: #f5dfb5; text-shadow: 0 0 50px #e5985744; }
#scoreDialog { border: 1px solid #514354; border-radius: 20px; background: #1c1827; color: #f5ebd9; box-shadow: 0 24px 90px #0009; }
#scoreDialog::backdrop { background: rgba(8, 6, 15, .75); }
.leaderboard-heading h2 { font-family: Georgia, serif; font-size: 1.65rem; font-weight: 500; }
#leaderboardList { color: #e1d3e5; }
#leaderboardList li { border-bottom-color: #403348; }
#leaderboardList li::marker { color: #aa8b75; }
#leaderboardList li strong { color: #f9b77e; }
#closeLeaderboard { color: #c1abc9; }
#closeLeaderboard:hover { background: #393041; }
.player-name-label { color: #cbb9d0; }
#playerName { background: #100e1b; border: 1px solid #645268; color: #f4ebdb; }
#playerName:focus { outline-color: #c4ecd7; }
#highScoreNotice { background: #28463b; color: #c5f5db; }
.score-name-fields { align-items: stretch; }
#playerName, #claimHighScore { height: 50px; min-height: 50px; }
#claimHighScore { border-radius: 10px; padding: 0 14px; background: #bedecb; border-color: #bedecb; color: #1c3027; }
#claimHighScore:hover { background: #dcf5e6; }
#nameSaveStatus, #scoreStatus { color: #ffbb9c; }
#retryScore, #defaultSettings { border-color: #79617b; background: #362a3e; color: #f2d3af; }

/* Keep the original settings, with the same night palette as the game. */
.config-view #tuningPanel, #tuningPanel #tuningDetails { background: #14111e; }
#tuningDetails { background: #201a2c; border: 1px solid #514056; }
#tuningDetails > summary { background: #292133; color: #f5dfc2; }
#tuningCollapseButton, .mode-caret { background: #30253b; border-color: #77607b; color: #e3d4ed; }
.tuning-note, .control-def, .saved-version-empty, .save-version-subtitle { color: #b6a2c2; }
.saved-versions, .mode-group, .mode-grid { border-color: #514056; background: #211a2d; }
.saved-versions-title, .saved-version-name, .tuning-row, .toggle-row, .mode-summary-head, .mode-summary-active, .mode-summary-name, .save-version-title { color: #e0cde9; }
.saved-version-item { background: #292034; border-color: #514056; }
.tuning-row input, .tuning-row select, .save-version-input { background: #100e1b; color: #f0dfcc; border-color: #715478; }
.mode-active-pill { background: #b9dec9; color: #173225; }
.mode-run-btn, .saved-version-run, .save-version-confirm { background: #b9dec9; color: #173225; }
.mode-save-btn { background: #efab72; color: #291d25; }
.mode-group > summary { background: #292133; color: #ead6ee; }
.save-version-overlay { background: #1c1626; }

@media (max-width: 900px), (pointer: coarse) {
  #game-shell { border: 0; }
  #overlay { padding: 14px; padding-bottom: 44px; }
  .overlay-card { width: min(440px, 100%); padding: 24px 22px 26px; border-radius: 22px; max-height: calc(100svh - var(--mobile-pull-zone) - 64px); }
  #overlay.start-mode .overlay-card { padding-top: 32px; padding-bottom: 34px; }
  .mascot { height: 100px; margin-bottom: 4px; }
  #overlay.start-mode .mascot { margin-bottom: 18px; }
  .mascot svg { height: 100px; width: 100px; }
  #gameTitle { max-width: 290px; font-size: clamp(2.65rem, 12vw, 3.5rem); }
  .haunt-description { margin-top: 18px; font-size: .83rem; }
  #leaderboardToggle { bottom: max(16px, env(safe-area-inset-bottom, 0px)); right: 20px; }
  #overlaySubtitle { font-size: 1.125rem; }
  #overlay.start-mode #overlaySubtitle { margin-top: 28px; }
}
@media (max-height: 650px) {
  .overlay-card { padding: 18px 24px 22px; }
  #overlay.start-mode .overlay-card { padding: 24px 24px 26px; }
  .mascot { height: 64px; margin: 0; }
  #overlay.start-mode .mascot { margin-bottom: 12px; }
  .mascot svg { height: 72px; width: 72px; }
  #gameTitle { max-width: none; font-size: 2.4rem; }
  #overlay.start-mode #overlaySubtitle { margin-top: 22px; }
  .haunt-description { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot svg { animation: none; }
}