/* Normal diorama: translucent right tabs + instant bottom camera presets. */
.diorama-layout{color-scheme:dark;color:var(--ink);--ink:#e2e8dc;--muted:#aab5a0;--line:#d0dfbd24;--panel:#151d17e8;--rail:#131a15ef;--green:#759a50;--dock-height:52px}
.diorama-layout #caption{left:30px;top:26px;max-width:calc(100% - 450px);color:#f2f5e9;text-shadow:0 1px 6px #182015}
.diorama-layout #caption .overline,.diorama-layout #caption .subtitle{color:#c2cbb8}
.diorama-layout #control-shell{position:absolute;right:24px;top:24px;width:360px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);backdrop-filter:blur(18px);box-shadow:0 12px 38px #0910083b;pointer-events:auto}
.diorama-layout #navigation{position:static;width:100%;display:flex;flex-direction:row;align-items:stretch;padding:0 8px;gap:0;background:#0d140ed9;border:0;border-radius:0;box-shadow:none;overflow-x:auto}
.diorama-layout #navigation button{border:0;border-radius:0;background:transparent;color:#abb6a3;white-space:nowrap;padding:15px 9px;font-size:12px;min-height:49px;flex:1}
.diorama-layout #navigation button[aria-selected=true]{color:#fff;border-bottom:2px solid #99b86e;background:#ffffff05}
.diorama-layout #navigation #mode-cycle{flex:0;padding:10px 8px;font-size:22px;line-height:1;min-width:24px;margin:0;opacity:1}
.diorama-layout #panel-stack{position:static;width:auto}
.diorama-layout #panel-stack .panel[data-pane]{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;padding:20px;max-height:calc(100dvh - 175px);overflow:auto;scrollbar-width:thin;scrollbar-color:#73806766 transparent}
.diorama-layout .panel h2{font-size:13px;font-weight:600;margin:12px 0}
.diorama-layout .row{gap:12px;min-height:30px;margin-bottom:8px}
.diorama-layout .help{font-size:11px;line-height:1.65;margin:8px 0 14px}
.diorama-layout button,.diorama-layout select{color:var(--ink);background:#dae4cc0a;border:1px solid var(--line);font:inherit;border-radius:8px}
.diorama-layout button:hover{background:#a3bd8525}
.diorama-layout button[aria-pressed=true]{background:#54773c;border-color:#6c8d51;color:#fff}
.diorama-layout select{max-width:190px;padding:6px;font-size:12px}.diorama-layout option{background:#202b20}
.diorama-layout button:disabled{opacity:.45;cursor:default}
.diorama-layout input[type=range]{accent-color:#9ab871;margin:10px 0 8px}
.diorama-layout .switch-track{background:#485045}.diorama-layout .switch input:checked+.switch-track{background:#658747}
.diorama-layout output{color:#adcb82}.diorama-layout a{color:#b8cc9a}
.diorama-layout .background-options{margin-top:10px}.diorama-layout .background-swatch{height:36px}.diorama-layout .background-option[aria-pressed=true]{background:#536e3f44;color:var(--ink)}
.diorama-layout .weather-controls{margin:22px 0 18px;padding-top:16px}.diorama-layout .weather-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.diorama-layout .weather-buttons button{font-size:12px;padding:8px 3px;background:#c5d6b212}.diorama-layout .weather-buttons button[aria-pressed=true]{background:#54773c}
.diorama-layout #weather-auto{grid-column:1/-1;margin-top:5px}
.diorama-layout .day-clock-controls button,.diorama-layout .day-clock-controls select{background:#ffffff0a;color:var(--ink)}
.diorama-layout .day-clock-controls button[aria-pressed=true]{background:#54773c}
.diorama-layout .moonlight-controls{border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:16px}
.diorama-layout .winter-scene-buttons{display:grid;grid-template-columns:1fr;gap:5px}.diorama-layout .winter-scene-buttons button{font-size:12px;padding:8px;text-align:left}.diorama-layout #winter-scenes{border-top:1px solid var(--line);margin:12px 0;padding-top:2px}.diorama-layout #winter-scenes[hidden]{display:none}.diorama-layout .cloud-shadow-controls{border-bottom:1px solid var(--line);margin-bottom:14px}
.diorama-layout .season-buttons{display:flex;gap:3px;background:#c5d6b208;border-radius:9px;padding:3px;margin:3px 0 9px}.season-buttons button{flex:1;border:0;padding:9px}
.diorama-layout #season-auto{font-size:12px}.diorama-layout .compact-help{font-size:10px}
.diorama-layout .snow-details{border-top:1px solid var(--line);padding-top:12px;margin-top:10px}.snow-details>summary{cursor:pointer;color:#dce5cf;margin-bottom:12px}
.diorama-layout .animal-section[open]>summary{color:#b9d29a}.diorama-layout #people-controls>summary{cursor:pointer}.diorama-layout #animal-controls{margin-top:22px}
.diorama-layout #camera-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;max-width:calc(100% - 34px);padding:6px 10px;border:1px solid var(--line);border-radius:16px;background:#121a14dc;backdrop-filter:blur(16px);box-shadow:0 6px 24px #0b120b25;overflow:auto;pointer-events:auto}
.diorama-layout #camera-bar button{padding:10px 12px;white-space:nowrap;border:0;background:transparent;font-size:12px;flex:none;min-height:38px}
.diorama-layout #camera-bar button[aria-pressed=true]{background:#52753a}.diorama-layout #camera-bar button:hover{background:#91b26a2e}
.diorama-layout #camera-bar .bar-separator{border-left:1px solid var(--line);border-radius:0;margin-left:6px;padding-left:18px}
.diorama-layout[data-ui-mode=collapsed] #caption{display:block}.diorama-layout[data-ui-mode=collapsed] #control-shell{width:auto}
.diorama-layout[data-ui-mode=collapsed] #navigation [data-panel]{display:none}.diorama-layout[data-ui-mode=collapsed] #navigation #mode-cycle{min-width:90px;font-size:12px;padding:12px}
.diorama-layout #restore-ui{left:auto;right:20px;bottom:20px;width:auto;height:auto;padding:11px 17px;color:#e2e8dc;background:#121a14dc;opacity:1;border:1px solid var(--line);border-radius:12px}
.diorama-layout #creature-card{left:24px;right:auto;bottom:90px;background:var(--panel)}
.diorama-layout .catalog-shortcut{right:20px;bottom:23px;background:#121a14dc;font-size:11px}.diorama-layout[data-ui-mode=hidden] .catalog-shortcut{display:none}
.diorama-layout .choice-list{margin:18px 0}.diorama-layout #language-options{margin-top:18px}
@media(max-width:850px){.diorama-layout #caption{max-width:calc(100% - 385px);left:20px}.diorama-layout #caption h1{font-size:22px}.diorama-layout #caption .subtitle{display:none}.diorama-layout #control-shell{right:14px;top:14px;width:340px}.diorama-layout .catalog-shortcut{display:none}}
@media(max-width:600px){.diorama-layout #caption{top:18px;left:16px;max-width:calc(100% - 32px)}.diorama-layout #caption h1{font-size:20px;margin:3px 0}.diorama-layout #control-shell{top:94px;right:12px;width:min(340px,calc(100% - 24px))}.diorama-layout #panel-stack .panel[data-pane]{max-height:calc(100dvh - 226px);padding:16px}.diorama-layout #camera-bar{bottom:12px;width:calc(100% - 20px);max-width:none;gap:0;padding:5px}.diorama-layout #camera-bar button{font-size:11px;padding:9px 8px}.diorama-layout #camera-bar .bar-separator{padding-left:9px;margin-left:2px}.diorama-layout .background-options{grid-template-columns:1fr 1fr}.diorama-layout .language-options{flex-direction:row}}
/* Coastal photo choices share the river layout without expanding the panel. */
.diorama-layout .photo-swatch{width:100%;object-fit:cover}
.diorama-layout .ambient-track{border-top:1px solid var(--line);padding-top:14px}
.catalog-shortcut{position:fixed;z-index:10;padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;backdrop-filter:blur(10px)}
.catalog-shortcut[hidden]{display:none!important}
.catalog-shortcut:focus-visible{outline:2px solid #9ab871;outline-offset:3px}
#people-controls>summary,#angler-motion-check>summary{cursor:pointer;padding:8px 0;font-weight:600}
.angler-mode button{flex:1;padding:8px}
#angler-motion-check{border-top:1px solid var(--line);margin-top:12px;padding-top:6px}
#angler-motion{display:block;width:100%;max-width:none;margin:8px 0 12px}
#angler-menu{position:fixed;z-index:12000;min-width:205px;width:240px;max-height:calc(100dvh - 32px);overflow:auto;padding:14px;pointer-events:auto;background:#1c281fee;border:1px solid var(--line);border-radius:12px}
#angler-menu button{display:block;width:100%;margin-top:5px;text-align:left;padding:8px 10px}
/* opening (OP) video, shown over the start-up screen while the diorama loads (js/opening.js) */
#opening{position:fixed;inset:0;z-index:30000;background:#000;display:grid;place-items:center;transition:opacity .7s}
#opening.closing{opacity:0;pointer-events:none}
#opening video{width:100%;height:100%;object-fit:contain;background:#000}
#opening .opening-btn{position:absolute;font:inherit;font-size:15px;letter-spacing:.06em;color:#fff;background:#0008;border:1px solid #fff6;border-radius:999px;padding:8px 18px;cursor:pointer}
#opening .opening-btn:hover{background:#000c;border-color:#fff}
#opening-skip{right:28px;bottom:26px}
#opening-skip.preparing{cursor:default;opacity:.72;animation:opening-wait 1.6s ease-in-out infinite}
#opening-skip.preparing:hover{background:#0008;border-color:#fff6}
@keyframes opening-wait{50%{opacity:.45}}
#opening-sound{left:28px;bottom:26px}
#opening-play{left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;padding:14px 30px}
#angler-lures{margin-top:9px;padding-top:7px;border-top:1px solid var(--line)}
#angler-lures>span{font-size:12px;opacity:.8}
#angler-lures button[aria-pressed="true"]{background:#ffb35a;color:#1d1a12;border-color:#ffd9a8}
#angler-toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:12001;max-width:min(600px,85vw);padding:12px 18px;border-radius:12px;background:#244033ed;color:white;font-size:14px;pointer-events:none}

.background-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px}.background-option{padding:7px;text-align:left;background:transparent}.background-option strong{display:block;font-size:12px;font-weight:500;margin-top:8px}.background-option small{display:block;font-size:10px;margin-top:3px;opacity:.78}
.background-swatch{height:36px;border-radius:5px;display:grid;place-items:center;color:#79917e}.studio-swatch{background:#fff;border:1px solid #dae0d6}
.night-swatch{background:radial-gradient(ellipse at 78% 32%,#59616a 0,#252c34 23%,#0b1017 62%,#030508 100%);color:#c3ced7}
.sky-swatch{background:radial-gradient(circle at 72% 74%,#fff0c0 0,#ffc47a 9%,#ea743f 22%,rgba(234,116,63,0) 46%),linear-gradient(#2f4f86,#8fb0cf 55%,#f1c79b)}
.sun-look{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
/* Eight languages (2026-10-09): a language's own name never breaks inside (日本語, 한국어), and in the longer languages the view buttons
   wrap onto a second row instead of scrolling out of the bar (ja / en keep the one scrolling row). */
.diorama-layout .language-options button{flex:1 0 auto}
html:not([lang="ja"]):not([lang="en"]) .diorama-layout #camera-bar{flex-wrap:wrap;justify-content:center;overflow:visible}
/* Russian: the Japanese Mincho fonts draw Cyrillic full-width (П р и б о й…), so the titles take a serif with its own Cyrillic first. */
html[lang="ru"] h1,html[lang="ru"] #journal h2{font-family:Georgia,'Times New Roman',serif}
/* back to scene select in the top tabs (EXE only, 2026-10-10): not stretched like the tabs, hidden with the tabs when the UI is folded */
.diorama-layout #navigation #nav-scene-select{flex:0 0 auto;color:#f0d9a0;padding:15px 10px}.diorama-layout #navigation #nav-scene-select[hidden],.diorama-layout[data-ui-mode=collapsed] #navigation #nav-scene-select{display:none}