:root { color-scheme:dark; font-family:Arial,sans-serif; background:#101923; color:#f5f7fa; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; }
button { min-height:50px; border:1px solid #70859a; border-radius:10px; background:#263b50; color:white; padding:10px 18px; cursor:pointer; touch-action:manipulation; }
button:focus-visible,input:focus-visible,select:focus-visible,#photo:focus-visible { outline:3px solid #ffc96b; outline-offset:2px; }
button:disabled { opacity:.5; }
#settings { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
form { width:min(600px,100%); }
h1 { font-size:28px; margin:0 0 6px; }
p { margin:8px 0 14px; color:#c6d4e1; }
label { display:block; font-size:18px; }
input,select { display:block; width:100%; min-height:44px; margin:5px 0 10px; border-radius:7px; border:1px solid #70859a; background:#192938; color:white; padding:8px; }
.dates { display:flex; gap:14px; }
.dates label { flex:1; min-width:0; }
.checkbox { display:flex; align-items:center; gap:10px; margin:8px 0 12px; min-height:32px; cursor:pointer; }
.checkbox input { width:24px; height:24px; min-height:24px; margin:0; accent-color:#286b80; }
small,.hint { font-size:14px; }
#start { background:#286b80; width:100%; }
#message { min-height:20px; color:#ffd18a; }
#show { position:fixed; inset:0; background:black; }
#show[hidden],#settings[hidden],#controls[hidden] { display:none; }
#photo { width:100%; height:100%; object-fit:contain; image-orientation:from-image; touch-action:pan-y pinch-zoom; -webkit-user-select:none; user-select:none; cursor:grab; }
#photo:active { cursor:grabbing; }
.overlay { position:absolute; bottom:0; left:0; right:0; padding:8px; background:linear-gradient(transparent,rgba(0,0,0,.7)); text-align:center; pointer-events:none; }
#caption { font-size:19px; text-shadow:0 1px 4px black; min-height:23px; }
#status { font-size:14px; min-height:19px; margin:3px; }
#controls { position:absolute; top:50%; left:10px; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; padding:8px; border-radius:14px; background:rgba(0,0,0,.55); max-height:100%; overflow-y:auto; }
#controls button { background:rgba(25,40,55,.95); min-width:110px; }
/* Hidden images still load into the HTTP cache for the next full page reload. */
#preload { visibility:hidden; position:fixed; left:-10000px; top:0; width:1px; height:1px; overflow:hidden; pointer-events:none; }
@media(max-width:450px) { .dates { gap:8px; } h1 { font-size:24px; } #controls { left:5px; padding:5px; gap:6px; } #controls button { min-width:96px; padding:9px 12px; } }
@media(max-height:600px) { #settings { align-items:flex-start; padding:10px 16px; } h1 { font-size:24px; } p { margin:5px 0 8px; } label { font-size:16px; } input,select { margin:3px 0 7px; min-height:40px; padding:6px 8px; } }
@media(max-height:350px) { #controls { gap:5px; } #controls button { min-height:42px; padding:7px 12px; } }