:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { min-height: 100%; touch-action: manipulation; }
body { margin: 0; min-height: 100%; background: #001a45; font-family: "Courier New", monospace; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 560px); min-height: 100%; height: auto; margin: 0 auto; padding: 0 0 18px; }
.top-safe-placeholder { height: 88px; background: #001a45; }
.tracker { position: relative; width: 100%; aspect-ratio: 941 / 1672; overflow: hidden; background: #003a78; }
.base-map { display: block; width: 100%; height: 100%; user-select: none; }
.upload-prompt { position: absolute; z-index: 2; left: 32.9%; top: 32.1%; width: 28.3%; aspect-ratio: 818 / 416; border: 0; padding: 0; background: transparent; cursor: pointer; }
.upload-prompt img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sighting-preview { position: absolute; z-index: 2; left: 31.4%; top: 18.5%; width: 33.3%; aspect-ratio: 1120 / 1404; border: 0; padding: 0; background: transparent; cursor: pointer; }
.preview-photo { position: absolute; z-index: 1; left: 13.75%; top: 7.4%; width: 71.88%; height: 71.9%; overflow: hidden; }
.preview-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.preview-art { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.hidden { display: none !important; }
.actions { position: absolute; z-index: 2; top: 80.5%; left: 21.8%; width: 56%; aspect-ratio: 6.1 / 1; }
.actions > img { position: absolute; z-index: 1; top: 0; width: 44%; height: 100%; object-fit: fill; image-rendering: pixelated; pointer-events: none; }
.actions .report-button-art { left: 0; }
.actions .save-disabled-art, .actions .save-normal-art { left: 56%; }
.actions button { position: absolute; z-index: 2; top: 0; height: 100%; width: 44%; border: 0; background: transparent; cursor: pointer; }
#reportButton { left: 0; }
#saveButton { left: 56%; }
.actions button:active { transform: translate(2px, 2px); }
.actions button.disabled { cursor: not-allowed; }
.detail-backdrop { position: absolute; z-index: 4; inset: 0; background: rgb(0 20 54 / .74); overflow: auto; padding: 17.5% 6.5% 8%; }
.detail-panel { width: 100%; background: #051c52; box-shadow: 5px 6px #07101b; }
.detail-panel header { position: relative; width: 100%; line-height: 0; }
.detail-panel header img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.detail-panel header button { position: absolute; top: 0; right: 0; width: 27%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.detail-photo-frame { width: 100%; background: #4cb173; border: clamp(3px, .55vw, 5px) solid #080c10; border-top: 0; line-height: 0; }
.detail-photo-frame img { display: block; width: 100%; height: auto; max-height: none; }
.hint { min-height: 1.4em; margin: 10px 14px 0; color: #a8dfff; font-size: 13px; text-align: center; }
.snapshot-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px; }
.snapshot-preview img { display: block; width: 100%; border: 2px solid #a8dfff; }
@media (min-width: 561px) { .tracker { box-shadow: 0 8px 30px #000a; } }