:root {
  --ink: #15120f;
  --panel: rgba(27, 23, 20, 0.9);
  --line: rgba(233, 225, 207, 0.11);
  --text: #e9e1cf;
  --muted: #a1957f;
  --faint: #6f6657;
  --bone: #8db3cc;
  --amber: #e2a73f;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --panel-w: 332px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--text); font: 13px/1.45 var(--sans); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* Tytuł */
#title { position: fixed; left: 32px; top: 26px; pointer-events: none; }
#title h1 { margin: 0; font: 400 30px/1.05 var(--serif); letter-spacing: 0.02em; }
#title p { margin: 6px 0 0; font: italic 14px var(--serif); color: var(--muted); }
.chip { pointer-events: auto; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: rgba(27, 23, 20, 0.55); color: var(--muted); font-size: 12px; backdrop-filter: blur(6px); transition: color .2s, border-color .2s; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bone); }
.chip.free { color: var(--amber); border-color: rgba(226, 167, 63, 0.45); }
.chip.free::before { background: transparent; border: 1.5px solid var(--amber); }
.chip:hover { color: var(--text); }

/* Panel */
#panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); padding: 22px 22px 30px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); backdrop-filter: blur(14px); transition: transform .28s cubic-bezier(.3,.7,.2,1); scrollbar-width: thin; scrollbar-color: #4a4238 transparent; }
body.panel-closed #panel { transform: translateX(100%); }
#panel-toggle { position: fixed; top: 18px; right: calc(var(--panel-w) + 12px); z-index: 5; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(27, 23, 20, 0.7); color: var(--muted); font-size: 12px; transition: right .28s cubic-bezier(.3,.7,.2,1), color .2s; }
#panel-toggle:hover { color: var(--text); }
body.panel-closed #panel-toggle { right: 16px; }
details { border-top: 1px solid var(--line); padding: 12px 0 14px; }
details:first-of-type { border-top: 0; padding-top: 0; }
summary { list-style: none; cursor: pointer; font: 400 16px var(--serif); display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0 8px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--faint); font: 14px var(--sans); }
details[open] > summary::after { content: "\2212"; }
.sub { color: var(--muted); font: italic 12.5px var(--serif); margin: -4px 0 10px; }

.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.presets button { padding: 7px 4px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--text); font-size: 12px; transition: background .15s, border-color .15s; }
.presets button:hover { background: rgba(255, 255, 255, 0.07); }
.presets button.active { border-color: var(--bone); color: #fff; background: rgba(141, 179, 204, 0.13); }

/* Suwaki */
.row { margin: 0 0 13px; }
.row .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 3px; }
.row .name { color: var(--text); font-size: 12.5px; }
.row .val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.row.limit .name, .row.limit .val { color: var(--amber); }
.row.limit input[type=range]::-webkit-slider-thumb { background: var(--amber); box-shadow: 0 0 0 4px rgba(226, 167, 63, 0.22); }
.row.limit input[type=range]::-moz-range-thumb { background: var(--amber); }
.track { position: relative; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(233, 225, 207, 0.22); border-radius: 2px; }
input[type=range]::-moz-range-track { height: 2px; background: rgba(233, 225, 207, 0.22); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%; background: var(--text); border: 0; transition: box-shadow .15s, background .15s; }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--text); border: 0; }
input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(233, 225, 207, 0.12); }
.notch { position: absolute; top: 5px; width: 1px; height: 8px; background: rgba(233, 225, 207, 0.4); pointer-events: none; }
.ends { display: flex; justify-content: space-between; color: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; margin-top: -1px; }
.joint-title { font: 400 14px/1.3 var(--serif); margin: 0 0 10px; transition: color .2s; }
.joint-title.limit { color: var(--amber); }
.empty { color: var(--muted); font: italic 13px var(--serif); margin: 4px 0 6px; }
.btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 12px; }
.btn:hover { background: rgba(255, 255, 255, 0.07); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Przełączniki */
.switch { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; font-size: 12.5px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .pill { position: relative; width: 30px; height: 16px; border-radius: 99px; background: rgba(233, 225, 207, 0.16); transition: background .2s; flex: none; }
.switch .pill::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.switch input:checked + .pill { background: var(--bone); }
.switch input:checked + .pill::after { transform: translateX(14px); background: #12100e; }
.switch input:focus-visible + .pill { outline: 2px solid var(--bone); outline-offset: 2px; }
.switch kbd, #help kbd { font: 11px var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 8px; }

/* Dymek */
#tooltip { position: fixed; z-index: 10; pointer-events: none; max-width: 270px; padding: 8px 11px 9px; border-radius: 7px; background: rgba(21, 18, 15, 0.94); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
#tooltip[hidden] { display: none; }
#tooltip b { display: block; font: 500 13px var(--sans); }
#tooltip i { display: block; font: italic 13px var(--serif); color: var(--muted); }
#tooltip small { display: block; margin-top: 5px; color: var(--faint); font-size: 11.5px; line-height: 1.35; }
#tooltip small em { font-style: normal; color: var(--bone); }

/* HUD */
#hud { position: fixed; left: 0; top: 24px; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; transition: right .28s; }
body:not(.panel-closed) #hud { right: var(--panel-w); }
#hud > div { padding: 6px 14px; border-radius: 99px; background: rgba(21, 18, 15, 0.7); border: 1px solid var(--line); color: var(--muted); font: italic 14px var(--serif); backdrop-filter: blur(6px); transition: opacity .8s; }
#hud > div[hidden] { display: none; }
#hint-first.gone { opacity: 0; }
#limit-note { color: var(--amber) !important; font: 500 12.5px var(--sans) !important; border-color: rgba(226, 167, 63, 0.4) !important; }

/* Widoki */
#views { position: fixed; left: 0; bottom: 22px; right: 0; display: flex; justify-content: center; gap: 2px; transition: right .28s; pointer-events: none; }
body:not(.panel-closed) #views { right: var(--panel-w); }
#views .bar { pointer-events: auto; display: flex; padding: 3px; border-radius: 99px; background: rgba(27, 23, 20, 0.78); border: 1px solid var(--line); backdrop-filter: blur(8px); }
#views button { padding: 5px 13px; border: 0; background: transparent; border-radius: 99px; color: var(--muted); font-size: 12px; transition: color .15s, background .15s; }
#views button:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
#views button.active { color: #fff; background: rgba(141, 179, 204, 0.18); }
#views .sep { width: 1px; margin: 6px 5px; background: var(--line); }

#credit { text-shadow: 0 1px 6px #000, 0 0 2px #000; color: var(--muted) !important; position: fixed; left: 32px; bottom: 26px; color: var(--faint); font: italic 12px var(--serif); pointer-events: none; }
#help-btn { position: fixed; left: 32px; bottom: 52px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(27, 23, 20, 0.6); color: var(--muted); font: 13px var(--serif); }
#help-btn:hover { color: var(--text); }
#help { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(12, 10, 8, 0.72); backdrop-filter: blur(6px); }
#help[hidden] { display: none; }
#help .card { width: min(560px, 92vw); padding: 26px 30px 24px; border-radius: 10px; background: #1d1915; border: 1px solid var(--line); max-height: 90vh; overflow: auto; }
#help h2 { margin: 0 0 14px; font: 400 22px var(--serif); }
#help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 14px; }
#help dt { white-space: nowrap; }
#help dd { margin: 0; color: var(--muted); }
#help p { color: var(--faint); font: italic 12.5px var(--serif); margin: 8px 0 0; }

#loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #14110f; transition: opacity .6s; font: italic 16px var(--serif); color: var(--muted); }
#loading.done { opacity: 0; pointer-events: none; }
#loading.error { color: #e6806b; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(233, 225, 207, 0.15); border-top-color: var(--bone); animation: spin 1s linear infinite; }
#loading.error .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { :root { --panel-w: 300px; } #title { left: 22px; top: 18px; } #title h1 { font-size: 25px; } #credit, #help-btn { left: 22px; } }
@media (max-height: 760px) { #title p { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 1250px) { #views { bottom: 46px; } #credit { bottom: 16px; } #help-btn { bottom: 44px; } }

.note { margin: -4px 0 12px; color: var(--muted); font: italic 12px/1.4 var(--serif); }