/* Functional additions to the original game styling in styles.css. */
:root {
  --clue-height: 0px;
  --hud-top: 32px;
  /* The original html/body filters composed twice. Keep that colour without
     making either page ancestor a containing block for fixed controls. */
  --game-colour: hue-rotate(5deg) saturate(1.1) contrast(1.1) hue-rotate(5deg) saturate(1.1) contrast(1.1);
}
html, body { filter: none; }
#map { position: fixed; inset: 0; }
#map, #popup, #coordinates, #game-info, #menu-button, #menu-content,
#clue-bar, #guess-confirm-controls, .ui-dialog, #score-popup, #game-notice,
#tutorial-card, #tutorial-backdrop, #round-reveal-controls, .round-outcome-banner { filter: var(--game-colour); }
[hidden] { display: none !important; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
button:disabled { opacity: .55; cursor: wait; }
.button, .quiet-button { box-sizing: border-box; min-height: 44px; }

/* Keep the original fullscreen welcome, logo and custom hard-mode switch. */
#popup { overflow-y: auto; }
#popup .popup-content { box-sizing: border-box; max-height: none; padding: 12px 12px 28px; }
#startup-status, .welcome-footnote, .image-share-note, .muted { font: 12px/1.6 Helvetica, Arial, sans-serif; color: #ccc; }
#startup-status:empty, #resume-round-status:empty { display: none; }
#popup [data-open-stats] { display: block; margin: 12px auto; }
.toggle-wrapper { position: relative; }
.toggle-wrapper input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-wrapper input:focus-visible + .toggle-track { outline: 2px solid #fff; outline-offset: 4px; }

/* Semantic menu buttons retain the original right-aligned menu appearance. */
#menu-content { position: fixed; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; }
#menu-content li { margin: 2px 0; }
#menu-content li > :is(button, a) { display: block; box-sizing: border-box; width: 100%; min-height: 0; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }
#menu-content li > :is(button, a):hover,
#menu-content li > :is(button, a):focus-visible { padding: 4px 6px; border-radius: 4px; background: rgba(90, 246, 243, .573); color: #fff; }
#menu-content li > :is(button, a):focus-visible { outline-offset: -2px; }
#menu-content .menu-legal { font-size: 12px; line-height: 1.6; }

/* Keep the original clue bar; limit long clues and preserve the HUD spotlight. */
#clue-bar { max-height: 36vh; max-height: 36dvh; overflow-y: auto; visibility: hidden; }
#clue-bar.clue-expanded { visibility: visible; }
#clue-bar.clue-hidden, #clue-bar.clue-collapsed { pointer-events: none; }
#clue-bar.tutorial-clue-muted { visibility: hidden; pointer-events: none; }
#clue-header { padding-right: 48px; }
#clue-toggle { top: 0; right: 0; transform: none; width: 44px; height: 44px; border: 0; background: none; color: #fff; font: 20px Arial, sans-serif; cursor: pointer; }
#clue-body { white-space: pre-line; }

/* Three compact distance rows, with scrolling only when history needs room. */
#coordinates { top: var(--hud-top); max-width: calc(100vw - 60px); max-height: calc(100vh - var(--hud-top) - 120px); max-height: calc(100dvh - var(--hud-top) - 120px); overflow-y: auto; }
#distance-details { font: inherit; }
.guess-history-wrap { max-height: 120px; }
body:has(#guess-confirm-controls:not([hidden]):not(.is-collapsed)) #coordinates { max-height: calc(100vh - var(--hud-top) - var(--guess-confirm-height, 110px) - 164px); max-height: calc(100dvh - var(--hud-top) - var(--guess-confirm-height, 110px) - 164px); }
body.clue-open { --hud-top: calc(12px + var(--clue-height)); }
body.tutorial-focus-hud { --hud-top: 32px; }
body:not(.round-active) #coordinates, body:not(.round-active) #game-info { visibility: hidden; }
body:has(#tutorial-card:not([hidden])) #coordinates, body:has(#tutorial-card:not([hidden])) #game-info { visibility: visible; }
body.round-revealing #coordinates, body.round-revealing #game-info { visibility: hidden; }

/* New controls use the game's existing black, cyan and pixel lettering. */
#guess-confirm-controls { --guess-bottom-gap: max(12px, env(safe-area-inset-bottom)); --guess-x: -50%; position: fixed; bottom: var(--guess-bottom-gap); left: 50%; transform: translate(var(--guess-x), 0); box-sizing: border-box; width: min(330px, calc(100vw - 24px)); color: #fff; z-index: 1600; text-align: center; transition: transform 280ms ease-in-out; }
#guess-confirm-controls.is-collapsed { transform: translate(var(--guess-x), calc(100% + var(--guess-bottom-gap))); }
#guess-confirm-panel { padding: 12px; border: 1px solid rgba(90, 246, 243, .7); border-radius: 5px; background: rgba(0, 0, 0, .85); transition: visibility 0s; }
#guess-confirm-controls.is-collapsed #guess-confirm-panel { visibility: hidden; pointer-events: none; transition-delay: 280ms; }
#guess-confirm-controls p { margin: 0 0 8px; font: 9px/1.7 'Press Start 2P', monospace; }
.guess-confirm-actions { display: flex; gap: 8px; }
#guess-confirm-controls button { margin: 0; font: 9px/1.5 'Press Start 2P', monospace; padding: 10px 12px; }
#guess-confirm-controls #guess-confirm-toggle { position: absolute; bottom: 100%; right: 0; min-height: 44px; border-radius: 5px 5px 0 0; background: rgba(0, 0, 0, .85); }
#guess-confirm-controls.is-collapsed #guess-confirm-toggle { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
#confirm-guess-button { flex: 1; }

/* Native dialogs need viewport bounds; their appearance follows the original results panel. */
.ui-dialog, #score-popup { position: fixed; inset: 0; transform: none; box-sizing: border-box; margin: auto; width: min(420px, calc(100vw - 24px)); min-width: 0; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 16px; border: 2px solid #00eff4; border-radius: 10px; background: rgba(0, 0, 0, .9); color: #fff; font: 11px/1.7 'Press Start 2P', monospace; text-align: center; }
#score-popup[open] { display: block; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.ui-dialog h2 { padding-right: 20px; color: #00eff4; font: 13px/1.8 'Press Start 2P', monospace; }
.ui-dialog h3 { font-size: 11px; text-align: left; margin-top: 22px; }
.dialog-close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; font: 24px Arial, sans-serif; }
.dialog-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ui-dialog .button, .ui-dialog .quiet-button,
#score-popup .button, #score-popup .quiet-button { font-family: 'Press Start 2P', monospace; font-size: 12px; line-height: 1.6; }
#game-notice { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.eyebrow { color: #5af6f3; font-size: 9px; }
#final-score { color: #00eff4; }
#score-popup { font-size: 12px; line-height: 1.4; }
#percentile:empty { display: none; }
.result-place, #result-recap, #result-witty { font: 12px/1.6 Helvetica, Arial, sans-serif; }
#result-witty { color: #ccc; font-style: italic; }
#score-popup .button-container > button { width: 100%; }
#score-popup #play-again-button { position: static; margin: 0; }
#share-text { box-sizing: border-box; width: 100%; min-height: 180px; margin-bottom: 12px; padding: 12px; border: 1px solid #5af6f3; border-radius: 5px; background: rgba(0, 0, 0, .7); color: #fff; font: 16px/1.5 Helvetica, Arial, sans-serif; resize: vertical; }
#stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#stats-grid > div { padding: 10px 2px; }
#stats-grid dt { color: #ccc; font-size: 8px; }
#stats-grid dd { margin: 8px 0 0; color: #00eff4; font-size: 12px; overflow-wrap: anywhere; }
#stats-recent { list-style: none; margin: 0; padding: 0; text-align: left; }
#stats-recent li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
#stats-recent strong, #stats-recent span { display: block; font: 12px/1.6 Helvetica, Arial, sans-serif; }
#stats-recent span { color: #ccc; }
#copyright { pointer-events: none; }

/* Short screens retain room for the map, HUD, confirmation and map controls. */
@media (max-width: 479px), (max-width: 699px) and (min-height: 501px) {
  body:has(#guess-confirm-controls:not([hidden])) #game-info,
  body:has(#guess-confirm-controls:not([hidden])) .mapboxgl-ctrl-bottom-right { bottom: calc(var(--guess-confirm-height, 110px) + 56px + max(12px, env(safe-area-inset-bottom))); }
  body:has(#guess-confirm-controls:not([hidden]).is-collapsed) #game-info,
  body:has(#guess-confirm-controls:not([hidden]).is-collapsed) .mapboxgl-ctrl-bottom-right { bottom: calc(56px + env(safe-area-inset-bottom)); }
  body:has(#guess-confirm-controls:not([hidden]):not(.is-collapsed)) .mapboxgl-ctrl-bottom-left { bottom: calc(var(--guess-confirm-height, 110px) + 8px + max(12px, env(safe-area-inset-bottom))); }
}
@media (max-height: 500px) and (min-width: 480px) {
  body, body.clue-open, body.tutorial-focus-hud { --hud-top: 32px; }
  #coordinates, body:has(#guess-confirm-controls:not([hidden]):not(.is-collapsed)) #coordinates { width: 230px; max-height: calc(100vh - 146px); max-height: calc(100dvh - 146px); }
  #coordinates .guess-history-wrap { max-height: none; overflow: visible; }
  #game-info { left: 10px; right: auto; bottom: 31px; max-width: 230px; }
  #guess-confirm-controls { --guess-x: 0%; left: auto; right: 60px; width: min(330px, calc(100vw - 320px)); }
  #clue-bar { width: min(420px, calc(100vw - 310px)); left: auto; right: 48px; }
  #clue-bar.clue-expanded { transform: none; }
}
@media (max-height: 500px) and (min-width: 480px) and (max-width: 559px) {
  .guess-confirm-actions { flex-direction: column; }
  .guess-confirm-actions button { width: 100%; }
  body:has(#guess-confirm-controls:not([hidden])) #clue-bar { max-height: calc(100vh - 234px); max-height: calc(100dvh - 234px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  #guess-confirm-controls, #guess-confirm-panel { transition: none; }
}