:root {
  --bg: #eceae4;
  --panel: #f7f4ef;
  --panel-2: #efece4;
  --line: #e2dccf;
  --line-soft: #ece7dc;
  --text: #2b2621;
  --muted: #8b8175;
  --accent: #e07a4a;
  --accent-press: #ef8a58;
  --accent-soft: rgba(224, 122, 74, 0.14);
  --surface: #fff;          /* inputs, buttons */
  --hover-wash: rgba(255, 255, 255, 0.55);
  --track: #ded8ca;         /* slider track, scrollbar */
  --thumb-edge: #cbbfa8;
  --edge-hover: #d2c8b3;
  --card: rgba(255, 255, 255, 0.94);
  --card-shadow: rgba(70, 61, 51, 0.12);
  --swatch-edge: rgba(0, 0, 0, 0.12);
  --radius: 8px;
  color-scheme: light;
  /* Map background (#stage) and its overlays. Keyed on data-stage, NOT
   * data-theme: it follows the theme by default but the background button
   * can pin it either way. Light = the original daylight-sky gradient. */
  --stage-bg-light: linear-gradient(180deg, #cfe9f5 0%, #e6f3f8 55%, #f1eee7 100%);
  --stage-bg-dark: radial-gradient(130% 130% at 50% 0%, #1c222c 0%, #11151c 72%);
  --stage-hint: #7d756a;
  --chip-bg: rgba(255, 255, 255, 0.82);
  --chip-edge: rgba(120, 108, 90, 0.26);
  --chip-text: #3a342d;
  --chip-btn-bg: rgba(0, 0, 0, 0.03);
  --chip-btn-text: #6b6356;
  --chip-btn-edge: rgba(120, 108, 90, 0.3);
}
:root[data-stage="dark"] {
  --stage-hint: #9a9284;
  --chip-bg: rgba(17, 21, 28, 0.76);
  --chip-edge: rgba(211, 201, 179, 0.24);
  --chip-text: #e9e1d4;
  --chip-btn-bg: rgba(255, 255, 255, 0.06);
  --chip-btn-text: #c9c0af;
  --chip-btn-edge: rgba(211, 201, 179, 0.28);
}

/* Dark theme: same accent and map palette, only the chrome changes. The
 * panel takes the viewport's night-sky blues (#11151c / #1c222c) so the
 * two halves read as one surface. Chosen by the toggle in the header, or by
 * the OS setting until the user picks one (see the inline script in
 * index.html, which sets data-theme before first paint). */
:root[data-theme="dark"] {
  --bg: #0f1216;
  --panel: #161a21;
  --panel-2: #1d222a;
  --line: #2a303a;
  --line-soft: #222731;
  --text: #e9e1d4;
  --muted: #9a9284;
  --accent-soft: rgba(224, 122, 74, 0.22);
  --surface: #1f242d;
  --hover-wash: rgba(255, 255, 255, 0.06);
  --track: #2e3440;
  --thumb-edge: #4a5160;
  --edge-hover: #3a414d;
  --card: rgba(22, 26, 33, 0.92);
  --card-shadow: rgba(0, 0, 0, 0.35);
  /* A black 0.12-alpha edge is nearly invisible on the dark panel — swap for
   * a light one (tarama 2026-09-23). */
  --swatch-edge: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; height: 100vh; height: 100dvh; }

/* Panel */
#panel {
  width: 312px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transition: margin-left 0.2s ease, visibility 0s linear 0s;
}
/* Collapsed (☰, main.js setPanel): the panel slides out to the left and the
 * map takes the freed width. visibility flips after the slide, so nothing in
 * the hidden panel stays focusable. */
:root[data-panel="collapsed"] #panel {
  margin-left: -312px;
  visibility: hidden;
  transition: margin-left 0.2s ease, visibility 0s linear 0.2s;
}

/* Header: the first column is room for the ☰ button, which is position:
 * fixed (it stays put when the panel collapses), so it is not a grid item.
 * The tagline runs under the title and the buttons. */
#brand {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "menu logo title lang stage theme"
    ".    .    tag   tag  tag   tag";
  align-items: center;
  column-gap: 9px;
  row-gap: 1px;
  padding: 18px 19px 18.25px 15px; /* 88.75 px tall, as before the ☰ */
  border-bottom: 1px solid var(--line-soft);
}
#brand > div { display: contents; }
#brand .mark {
  grid-area: logo;
  width: 34px;
  height: 34px;
}
#brand h1 { grid-area: title; }
#brand .tag { grid-area: tag; }
#brand .lang-switch { grid-area: lang; }
#brand #stageToggle { grid-area: stage; }
#brand #themeToggle { grid-area: theme; }

/* ☰: the same element in both states, fixed at the panel's top-left corner.
 * Open: a header icon button like its neighbours. Collapsed: the accent
 * button (same token as Random and the active view tab), semi-transparent
 * until hovered, focused or touched. It is screen UI, not part of the map:
 * map zoom and pan never touch it, and main.js (placePanelToggle) undoes a
 * page pinch-zoom so it keeps its size and place on a phone. */
#panelToggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: calc(env(safe-area-inset-left, 0px) + 15px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  touch-action: none;
  transform-origin: 0 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    opacity 0.2s ease, box-shadow 0.15s ease;
}
#panelToggle:hover { background: var(--panel-2); border-color: var(--edge-hover); color: var(--text); }
#panelToggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
:root[data-panel="collapsed"] #panelToggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  opacity: 0.55;
  box-shadow: 0 2px 8px var(--card-shadow);
}
:root[data-panel="collapsed"] #panelToggle:hover,
:root[data-panel="collapsed"] #panelToggle:focus-visible,
:root[data-panel="collapsed"] #panelToggle:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
  opacity: 1;
}
:root[data-panel="collapsed"] #panelToggle:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 8px var(--card-shadow);
}
#panel #themeToggle,
#panel #stageToggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  color: var(--muted);
}
#panel #themeToggle:hover,
#panel #stageToggle:hover { color: var(--text); }
#panel #stageToggle { margin-right: -5px; }
/* TR / EN, same look as the rest of bilaxten.art (one localStorage key,
 * `bx-lang`): 11px / 600 / 0.08em, inactive muted, active in the text colour. */
.lang-switch { display: inline-flex; align-items: center; flex: none; margin-right: -4px; }
#panel .lang-switch button {
  padding: 4px 3px;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
}
#panel .lang-switch button + button::before {
  content: "/";
  margin-right: 6px;
  color: var(--thumb-edge);
  font-weight: 400;
}
#panel .lang-switch button:hover { background: none; color: var(--accent); }
#panel .lang-switch button[aria-pressed="true"] { color: var(--text); }
/* Sun and moon share one cell and turn into each other, as on bilaxten.art
 * (same 0.9 s rotate + scale, 0.5 s fade). */
#themeToggle svg { grid-area: 1 / 1; transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.5s ease; }
#themeToggle .moon { opacity: 0; transform: rotate(-120deg) scale(0.3); }
:root[data-theme="dark"] #themeToggle .sun { opacity: 0; transform: rotate(120deg) scale(0.3); }
:root[data-theme="dark"] #themeToggle .moon { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #themeToggle svg { transition: none; } }

/* Theme switch: UI colours ease over 0.6 s like bilaxten.art. Only while
 * html.theme-fade is set (main.js, ~0.7 s), so hover and focus keep their
 * own quick transitions the rest of the time. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-fade body,
  html.theme-fade body *,
  html.theme-fade body *::before,
  html.theme-fade body *::after {
    transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease,
      box-shadow 0.6s ease, fill 0.6s ease, stroke 0.6s ease !important;
  }
  html.theme-fade #themeToggle svg {
    transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.5s ease !important;
  }
  /* The stage's two background layers crossfade by opacity (see #stage). */
  html.theme-fade #stage::before,
  html.theme-fade #stage::after { transition: opacity 0.6s ease !important; }
}

/* Language switch: characters of the new language appear left to right
 * (src/i18n.js typeIn), opacity only, so nothing moves. */
.typing > span { opacity: 0; animation: type-in 0.22s ease-out forwards; }
@keyframes type-in { from { opacity: 0; } to { opacity: 1; } }
#brand h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
#brand .tag { margin: 0; color: var(--muted); font-size: 11px; }

.seg {
  display: flex;
  gap: 3px;
  margin: 15px 18px 7px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--bg);
  border-radius: var(--radius);
}
#panel .seg button {
  flex: 1;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#panel .seg button:hover { background: var(--hover-wash); color: var(--text); }
#panel .seg button.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(112, 67, 41, 0.15);
}

.scroll {
  flex: 1;
  overflow-y: auto;
  padding: 7px 0 12px;
  scrollbar-color: var(--track) var(--panel);
  scrollbar-width: thin;
}
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-track { background: var(--panel); }
.scroll::-webkit-scrollbar-thumb {
  background: var(--track);
  border: 3px solid var(--panel);
  border-radius: 999px;
}

details.group { border-bottom: 1px solid var(--line-soft); }
details.group[hidden] { display: none; }
details.group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
details.group[open] > summary::after { transform: rotate(45deg); }
details.group > summary:hover { color: var(--text); }
details.group .body { padding: 2px 18px 18px; }

/* Controls */
#panel label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 7px;
  color: var(--muted);
  font-size: 12px;
}
#panel label:first-child { margin-top: 5px; }
#panel label span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
#panel label.check {
  justify-content: flex-start;
  color: var(--text);
  cursor: pointer;
}
#panel label.check input { margin-right: 8px; }
#panel input[type=checkbox] { accent-color: var(--accent); }

#panel .row { display: flex; gap: 7px; }
#panel input[type=number],
#panel select {
  min-width: 0;
  padding: 8px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#panel input[type=number] { flex: 1; }
#panel select { width: 100%; padding-right: 28px; }
#panel input[type=number]:focus,
#panel select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#panel input[type=range],
#yawControl input[type=range] {
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
#panel input[type=range]::-webkit-slider-runnable-track,
#yawControl input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--fill, 50%), var(--track) var(--fill, 50%) 100%);
}
#panel input[type=range]::-moz-range-track,
#yawControl input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--track);
}
#panel input[type=range]::-moz-range-progress,
#yawControl input[type=range]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
#panel input[type=range]::-webkit-slider-thumb,
#yawControl input[type=range]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--thumb-edge);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
#panel input[type=range]::-moz-range-thumb,
#yawControl input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid var(--thumb-edge);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
#panel input[type=range]:hover::-webkit-slider-thumb,
#yawControl input[type=range]:hover::-webkit-slider-thumb,
#panel input[type=range]:hover::-moz-range-thumb,
#yawControl input[type=range]:hover::-moz-range-thumb { transform: scale(1.08); }
#panel input[type=range]:active::-webkit-slider-thumb,
#yawControl input[type=range]:active::-webkit-slider-thumb,
#panel input[type=range]:active::-moz-range-thumb,
#yawControl input[type=range]:active::-moz-range-thumb { background: var(--accent); }
#panel input[type=range]:focus-visible,
#yawControl input[type=range]:focus-visible { outline: none; }
#panel input[type=range]:focus-visible::-webkit-slider-thumb,
#yawControl input[type=range]:focus-visible::-webkit-slider-thumb,
#panel input[type=range]:focus-visible::-moz-range-thumb,
#yawControl input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#panel button,
#tools .toolrow button {
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#panel button:hover,
#tools .toolrow button:hover { background: var(--panel-2); border-color: var(--edge-hover); }
#panel button:focus-visible,
#tools .toolrow button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
#panel button:disabled,
#tools .toolrow button:disabled { opacity: 0.4; cursor: default; }
#panel button.primary {
  margin: 13px 18px;
  padding: 10px;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
#panel button.primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
/* Regenerate (new seed, same settings) and Random (random settings + new seed) side by side
 * (Uğur 2026-10-05). The primary button's own margin moves to the row. */
.gen-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 13px 18px; }
#panel .gen-actions button.primary { margin: 0; }
#regenMap, #randomMap { display: flex; align-items: center; justify-content: center; gap: 8px; }
#regenMap .regen { flex: none; transition: transform 0.35s ease; }
#regenMap.rolling .regen { transform: rotate(180deg); }
#randomMap .dice { flex: none; transition: transform 0.35s ease; }
#randomMap.rolling .dice { transform: rotate(180deg); }

.edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 15px;
}
.edit-actions #editReset { grid-column: 1 / -1; }
#panel .edit-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }

#pipelineToggle { width: 100%; }
#pipelineToggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#panel .stage-label { margin: 12px 0 6px; font-weight: 600; font-size: 12px; }
#panel #stageDesc { line-height: 1.45; }

#legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}
#legend .legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}
#legend .sw {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid var(--swatch-edge);
  border-radius: 3px;
}

#tools { padding: 11px 18px 15px; border-top: 1px solid var(--line-soft); }
#stats {
  display: block;
  min-height: 14px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
#tools .toolrow { display: flex; gap: 7px; }
#tools .toolrow[hidden] { display: none; }
#tools .toolrow + .toolrow { margin-top: 7px; }
#tools .toolrow button { flex: 1; padding: 7px 8px; font-size: 12px; }
#tools .toolrow button.ok { border-color: var(--accent); color: var(--accent); }

/* Stage */
#stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  /* The two backgrounds are stacked layers, so a switch crossfades them
   * (a gradient cannot transition). isolation keeps the z-index -1 layers
   * inside the stage, under the canvases. */
  isolation: isolate;
  /* Gestures on the map belong to the app (src/main.js, touch): no page
   * pan or pinch-zoom here, no text selection or long-press callout. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#stage::before,
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}
#stage::before { background: var(--stage-bg-light); }
#stage::after { background: var(--stage-bg-dark); }
:root[data-stage="light"] #stage::before,
:root[data-stage="dark"] #stage::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  #stage::before, #stage::after { transition: opacity 0.6s ease; }
}
#stage.dragging { cursor: grabbing; }
#stage.editing { cursor: crosshair; }
/* Space held: the next drag pans, whatever the tool (main.js setSpaceHeld). */
#stage.space-pan, #stage.space-pan.editing { cursor: grab; }
#stage.space-pan.dragging { cursor: grabbing; }
#map, #riverfx, #gl {
  position: absolute;
  top: 0;
  left: 0;
}
#map, #riverfx {
  transform-origin: 0 0;
  image-rendering: pixelated;
}
#riverfx { pointer-events: none; }
#gl { width: 100%; height: 100%; }

#daynight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: transparent;
  transition: background 0.25s linear;
}

#isohint {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  color: var(--stage-hint);
  font-size: 11px;
  pointer-events: none;
}
/* In the isometric view the yaw chip sits bottom-centre on the same line:
 * the hint wraps upward before it reaches the chip (half its width + gaps)
 * instead of running under it. */
body.iso #isohint { max-width: max(120px, calc(50% - 172px)); }

/* One grid for every screen (Uğur 2026-10-13, phone: the icons crowded
 * the slider): button | slider | readout | button. The buttons share one
 * size, the gaps are fixed, the readout has a fixed width, and the slider
 * gets the rest of the row -- grid tracks cannot overlap. The compact block
 * below only changes the sizes. */
#yawControl {
  --yaw-btn: 22px;
  --yaw-gap: 10px;
  position: absolute;
  bottom: 13px;
  left: 50%;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--yaw-btn) minmax(0, 1fr) 4.5ch var(--yaw-btn);
  align-items: center;
  column-gap: var(--yaw-gap);
  width: min(292px, calc(100% - 42px));
  padding: 7px 11px;
  border: 1px solid var(--chip-edge);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  transform: translateX(-50%);
}
#yawControl[hidden] { display: none; }
#yawControl input[type=range] { min-width: 0; }
#yawControl span { text-align: center; white-space: nowrap; }

/* The two icon buttons of the yaw chip: center view (left of the slider)
 * and auto-rotate (right). Same chip button, only auto-rotate toggles. */
#autoRotateBtn, #centerViewBtn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chip-btn-edge);
  border-radius: 5px;
  background: var(--chip-btn-bg);
  color: var(--chip-btn-text);
  cursor: pointer;
}
#autoRotateBtn svg, #centerViewBtn svg { width: 13px; height: 13px; }
#autoRotateBtn:hover, #centerViewBtn:hover { border-color: var(--accent); color: var(--chip-text); }
#centerViewBtn:active { background: var(--accent-soft); color: var(--accent); }
#autoRotateBtn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
#autoRotateBtn[aria-pressed="true"] svg { animation: autoRotateSpin 1.1s linear infinite; }
@keyframes autoRotateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
body.iso #hover { display: none; }

#brushCursor {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 1px 8px rgba(98, 57, 35, 0.14);
}
#brushCursor[hidden], body.iso #brushCursor { display: none; }

#hover {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px var(--card-shadow);
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
#hover[hidden] { display: none; }
/* Panel collapsed: the ☰ button sits over the map's top-left corner. */
:root[data-panel="collapsed"] #hover { left: calc(env(safe-area-inset-left, 0px) + 62px); }
#hover .sw {
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid var(--swatch-edge);
  border-radius: 2px;
}

/* Performance panel (P): a stage chip in the top-right corner, same tokens as
 * the yaw chip. Numbers are tabular so the columns do not jitter. */
#perfPanel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  min-width: 228px;
  max-width: calc(100% - 24px);
  padding: 8px 11px 9px;
  border: 1px solid var(--chip-edge);
  border-radius: var(--radius);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 11px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#perfPanel[hidden] { display: none; }
#perfPanel .perf-title {
  margin-bottom: 3px;
  color: var(--stage-hint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#perfPanel .perf-row { display: flex; gap: 10px; }
#perfPanel .perf-row span:first-child { flex: 0 0 74px; color: var(--stage-hint); }
#perfPanel .perf-note { margin-top: 3px; color: var(--stage-hint); }

/* ---------- Compact screens: phones, portrait and landscape ----------
 * Same media query as COMPACT_QUERY in src/main.js and the panel state
 * script in index.html. Until 2026-10-05 there was no phone layout: the
 * 312 px panel stayed docked and a 390 px phone kept 78 px for the map
 * (48 px at 360). Here the map takes the whole screen and the panel is a
 * drawer over it, opened and closed by the ☰ button; a tap on the dimmed
 * map beside it or Esc closes it. Every control is at least 44 px for a
 * thumb; inputs use 16 px text so iOS does not zoom the page on focus;
 * notches and the home bar are kept clear with the safe-area insets. */
#panelScrim { display: none; }
@media (max-width: 700px), (max-height: 500px) {
  #panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: min(340px, calc(100% - 48px));
    padding-left: env(safe-area-inset-left, 0px);
    box-shadow: 0 0 28px var(--card-shadow);
    transition: transform 0.2s ease, visibility 0s linear 0s;
  }
  :root[data-panel="collapsed"] #panel {
    margin-left: 0;
    transform: translateX(calc(-100% - 32px));
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  #panelScrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: var(--card-shadow);
    touch-action: none;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  :root[data-panel="collapsed"] #panelScrim {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  #panelToggle {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: calc(env(safe-area-inset-left, 0px) + 12px);
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
  }

  /* Header: ☰, logo and name on top, the TR / EN and theme buttons on a
   * second row, so each button can be 44 px wide. */
  #brand {
    grid-template-columns: 44px 30px minmax(0, 1fr) auto auto auto;
    grid-template-rows: 22px 22px auto;
    grid-template-areas:
      "menu logo title title title title"
      "menu logo tag   tag   tag   tag"
      ".    .    .     lang  stage theme";
    column-gap: 8px;
    row-gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 6px;
  }
  #brand .mark { width: 30px; height: 30px; }
  #brand h1 { align-self: end; }
  #brand .tag { align-self: start; }
  #panel #themeToggle,
  #panel #stageToggle { width: 44px; height: 44px; margin: 0; }
  .lang-switch { margin-right: 0; }
  #panel .lang-switch button { min-width: 44px; min-height: 44px; }

  .seg { margin: 10px 12px 6px; }
  #panel .seg button { min-height: 44px; }

  .scroll { overscroll-behavior: contain; }
  details.group > summary { min-height: 48px; padding: 0 16px; }
  details.group .body { padding: 0 16px 14px; }
  #panel label { margin: 8px 0 0; }
  #panel label:first-child { margin-top: 2px; }
  #panel label.check { min-height: 44px; align-items: center; margin: 0; }
  #panel label.check input { width: 20px; height: 20px; }
  #panel input[type=number],
  #panel select { min-height: 44px; font-size: 16px; }
  #panel input[type=range],
  #yawControl input[type=range] { height: 44px; }
  #panel input[type=range]::-webkit-slider-thumb,
  #yawControl input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }
  #panel input[type=range]::-moz-range-thumb,
  #yawControl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
  #panel button,
  #tools .toolrow button { min-height: 44px; }
  .gen-actions { margin: 10px 12px; }
  #tools { padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }

  /* Stage overlays: the angle chip with 44 px buttons, the hint centred
   * above it, the hover card beside the ☰ button. The chip is centred
   * between the safe-area insets (left/right + auto margins, not 50% and a
   * transform, which would ignore a landscape notch). Round buttons with
   * the same 4 px on every side sit concentric in the pill; 10 px gaps keep
   * the slider's thumb clear of them at both ends. */
  #yawControl {
    --yaw-btn: 44px;
    --yaw-gap: 10px;
    left: calc(env(safe-area-inset-left, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    width: auto;
    max-width: 360px;
    margin: 0 auto;
    padding: 4px;
    transform: none;
  }
  #autoRotateBtn, #centerViewBtn { width: 44px; height: 44px; border-radius: 50%; }
  #autoRotateBtn svg, #centerViewBtn svg { width: 18px; height: 18px; }
  #isohint,
  body.iso #isohint {
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    width: max-content;
    max-width: calc(100% - 32px);
    text-align: center;
    transform: translateX(-50%);
  }
  body.iso #isohint { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
  :root[data-panel] #hover {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: calc(env(safe-area-inset-left, 0px) + 66px);
    flex-wrap: wrap;
    max-width: calc(100% - 78px);
  }
  #perfPanel { top: calc(env(safe-area-inset-top, 0px) + 12px); }
}
/* Landscape phone: too short for a header, a scrolling middle and a footer,
 * so the whole drawer scrolls as one. */
@media (max-height: 500px) {
  #panel { overflow-y: auto; overscroll-behavior: contain; }
  #panel .scroll { flex: none; overflow: visible; }
}
/* Last in the file so it wins over the collapsed and compact rules. */
@media (prefers-reduced-motion: reduce) {
  :root[data-panel] #panel,
  :root[data-panel] #panelToggle,
  :root[data-panel] #panelScrim { transition: none; }
}