:root { color-scheme: dark; font-family: "Palatino Linotype", Palatino, "Noto Serif", serif; color: #ede2cc; background: #162830; --glass: rgba(23, 41, 47, .73); --border: rgba(203, 207, 180, .22); }
* { box-sizing: border-box; }
html, body, #experience { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
#experience { position: relative; height: 100dvh; background: linear-gradient(#152631, #345055); }
#river, #bridge { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
#river { z-index: 0; }
#bridge { z-index: 1; pointer-events: none; opacity: 0; }
[hidden] { display: none !important; }
[data-ui] { visibility: hidden; }
.localized [data-ui] { visibility: visible; }
.glass { border: 1px solid var(--border); border-radius: 20px; background: var(--glass); box-shadow: 0 8px 40px rgba(4, 14, 17, .2), inset 0 1px 0 rgba(229, 226, 197, .06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
button, select, input { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 14px; padding: 9px 13px; cursor: pointer; touch-action: manipulation; }
button:hover, button[aria-expanded="true"] { background: rgba(222, 216, 183, .1); }
button:active { background: rgba(222, 216, 183, .17); }
:focus-visible { outline: 2px solid #dec58c; outline-offset: 3px; }
#dock { position: absolute; z-index: 3; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; width: max-content; max-width: calc(100% - 24px); opacity: 1; transition: opacity 240ms ease; }
#dock button { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; white-space: nowrap; }
#dock .icon { display: inline-flex; min-width: 17px; justify-content: center; font: 19px/1 system-ui, sans-serif; opacity: .88; }
#dock .options-icon { font-size: 23px; }
.hud-rest #dock { opacity: 0; pointer-events: none; }
#options-panel { position: absolute; z-index: 5; inset: auto 16px 86px auto; width: min(310px, calc(100% - 32px)); max-height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0; padding: 0; color: inherit; overflow: hidden; }
#options-panel[open] { display: flex; flex-direction: column; }
#options-panel::backdrop { background: rgba(4, 13, 18, .12); }
#options-panel header { display: flex; flex: none; align-items: center; gap: 12px; padding: 9px 12px 2px 18px; }
#options-panel h1 { font-size: 18px; font-weight: normal; margin: 0; flex: 1; }
.icon-button { font: 27px/1 system-ui, sans-serif; padding: 5px; }
.panel-body { flex: 1 1 auto; min-height: 0; padding: 0 18px 13px; overflow-y: auto; scrollbar-width: thin; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 13px; }
select { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: 11px; padding: 0 10px; background: rgba(10, 25, 31, .52); }
select option { background: #20343b; color: #ede2cc; }
input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: #c6b28c; }
.check { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 44px; font-size: 13px; }
.check input { appearance: none; flex: none; width: 36px; height: 22px; margin: 0; border: 1px solid #6b7775; border-radius: 20px; background: #34474c; position: relative; cursor: pointer; }
.check input::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 100%; top: 3px; left: 3px; background: #bdc4b8; transition: transform 200ms; }
.check input:checked { background: #a39168; border-color: #c3ad7d; }
.check input:checked::after { transform: translateX(14px); background: #f1e6cf; }
.about, .connection:not([data-status="error"]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.connection[data-status="error"] { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #e4c5a2; }
#graphics-error { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 22px; width: min(350px, calc(100% - 32px)); border: 1px solid var(--border); border-radius: 20px; background: var(--glass); text-align: center; }
#graphics-error p { font-size: 16px; line-height: 1.6; }
#graphics-error button { border: 1px solid var(--border); }
@media (max-width: 899px), (orientation: portrait) { #options-panel { bottom: max(86px, calc(env(safe-area-inset-bottom) + 74px)); right: 50%; transform: translateX(50%); width: min(340px, calc(100% - 24px)); } }
@media (max-width: 390px) { #dock { gap: 1px; } #dock button { padding: 9px 10px; font-size: 13px; gap: 5px; } }
@media (max-width: 330px) { #dock { gap: 0; } #dock button { padding: 9px 8px; font-size: 12px; } #dock .icon { display: none; } #options-panel header { padding: 8px 13px 0 16px; } .panel-body { padding: 0 16px 16px; } }
@media (max-height: 480px) and (min-width: 600px) { #options-panel { inset: 12px 12px auto auto; transform: none; max-height: calc(100dvh - 24px); width: 390px; } #dock { left: 12px; transform: none; } }
@media (prefers-reduced-motion: reduce) { #dock, .check input::after { transition: none !important; } }
:root[data-motion="reduced"] #dock, :root[data-motion="reduced"] .check input::after { transition: none; }
@supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(23, 41, 47, .88); } }