/* ==========================================================================
   Clay Ziemia – UI toola
   Jeden akcent ciepły (ogień), jeden pomocniczy (clay-zieleń lądów),
   powierzchnie granatowe spróbkowane z assets/simulations/ref-*.jpg
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ---------- wymiary ---------- */
  --panel-w: 344px;
  --panel-pad-x: 18px;
  --dock-gap: 12px;

  /* panel pływa: odstęp od krawędzi ekranu, z zapasem na safe-area */
  --panel-inset: 16px;
  --pi-t: max(var(--panel-inset), env(safe-area-inset-top));
  --pi-r: max(var(--panel-inset), env(safe-area-inset-right));
  --pi-b: max(var(--panel-inset), env(safe-area-inset-bottom));
  --pi-l: max(var(--panel-inset), env(safe-area-inset-left));

  /* ---------- powierzchnie ---------- */
  --space-0:    #050b18;
  --surface-1:  #0c1526;
  --surface-2:  #131e33;
  --surface-3:  #1b2942;
  --panel-bg:   linear-gradient(180deg, rgba(14, 23, 40, 0.96), rgba(9, 15, 28, 0.97));
  --hud-bg:     rgba(7, 13, 26, 0.86);

  /* ---------- linie ---------- */
  --line:        rgba(244, 236, 224, 0.14);
  --line-strong: rgba(244, 236, 224, 0.26);
  --track:       #6f7789;
  --control-off: #7b8397;

  /* ---------- tekst ---------- */
  --text-1: #f4ece0;
  --text-2: #b6ac9d;
  --text-3: #8f877a;
  --ink:    #22160b;

  /* ---------- akcenty ---------- */
  --accent:      #f2913f;
  --accent-hot:  #e0562a;
  --accent-weak: rgba(242, 145, 63, 0.18);
  --accent-line: rgba(242, 145, 63, 0.60);
  --jade:        #8ec7a4;
  --jade-weak:   rgba(142, 199, 164, 0.16);
  --danger:      #e2604a;
  --focus:       #ffd0a3;

  /* ---------- typografia ---------- */
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --fs-display: 1.375rem;
  --fs-lg:      1rem;
  --fs-md:      0.875rem;
  --fs-sm:      0.8125rem;
  --fs-xs:      0.75rem;
  --fs-2xs:     0.6875rem;

  /* ---------- spacing ---------- */
  --s-05: 2px; --s-1: 4px; --s-15: 6px; --s-2: 8px;
  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  /* ---------- promienie ---------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* ---------- cienie ---------- */
  --sh-panel: -16px 0 48px rgba(2, 5, 12, 0.60);
  --sh-float: 0 24px 64px -12px rgba(2, 5, 12, 0.72), 0 2px 8px rgba(2, 5, 12, 0.40);
  --sh-sheet: 0 -14px 40px rgba(2, 5, 12, 0.55);
  --sh-hud:   0 8px 32px rgba(2, 5, 12, 0.50);
  --sh-raise: 0 2px 10px rgba(2, 5, 12, 0.45);
  --sh-accent: 0 0 0 1px var(--accent-line), 0 8px 22px -8px rgba(242, 145, 63, 0.50);
  --sh-thumb: 0 0 0 2px var(--surface-1), 0 1px 4px rgba(2, 5, 12, 0.6);

  /* ---------- motion ---------- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 340ms;
  --dur-5: 550ms;
  --ease-out:    cubic-bezier(0.20, 0.80, 0.30, 1);
  --ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-pop:    cubic-bezier(0.34, 1.40, 0.64, 1);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--space-0);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

#canvas-container { position: fixed; inset: 0; z-index: 1; }

#canvas-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ===== focus + sr-only (jedna reguła na całą apkę) ===== */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: inherit;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ===== PANEL (pływająca karta, nie pas przyklejony do krawędzi) ===== */
.panel {
  position: fixed;
  top: auto;
  bottom: var(--pi-b);
  right: var(--pi-r);
  z-index: 10;
  width: var(--panel-w);
  height: auto;
  /* 56px rezerwy u góry na przycisk zwijania w prawym górnym narożniku */
  max-height: calc(100dvh - var(--pi-t) - var(--pi-b) - 56px);
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-float);
  padding: var(--s-4) var(--panel-pad-x);
  overflow: hidden;
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-4) var(--ease-out), visibility 0s;
}

.panel.collapsed {
  transform: translateX(calc(100% + var(--pi-r) + 12px));
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease-out),
              visibility 0s linear var(--dur-4);
}

.panel__grab { display: none; }

.panel__head {
  flex-shrink: 0;
  padding-right: 52px;
  margin-bottom: var(--s-4);
}

h1 {
  font: 650 var(--fs-display)/1.15 var(--font);
  letter-spacing: -0.02em;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.panel__mark {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(242, 145, 63, 0.55);
}

.panel__sub {
  font: 400 var(--fs-xs)/1.45 var(--font);
  color: var(--text-2);
  margin-top: var(--s-1);
}

.eyebrow {
  font: 600 var(--fs-2xs)/1.3 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

/* ===== SIATKA KATAKLIZMÓW (jedyna strefa ze scrollem) ===== */
.sims {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 236, 224, 0.20) transparent;
  margin-right: calc(var(--panel-pad-x) * -1);
  padding-right: var(--panel-pad-x);
  /* dolna miękka krawędź: ucięty rząd czyta się jako „jest więcej", nie jako glitch */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

.sims > .eyebrow { flex-shrink: 0; margin-bottom: var(--s-2); }

.sims__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  padding-bottom: var(--s-6); /* ≥ wysokość maski, żeby ostatni rząd nie bladł */
}

.sim-btn {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  min-height: 56px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-1);
  font: 600 var(--fs-sm)/1.25 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

.sim-btn__icon {
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: color var(--dur-1), transform var(--dur-2) var(--ease-pop);
}

.sim-btn__icon svg { width: 18px; height: 18px; stroke-width: 1.75; }

.sim-btn__label { overflow-wrap: anywhere; }

.sim-btn__key {
  font: 600 var(--fs-2xs)/1 var(--font-num);
  color: var(--text-3);
  min-width: 16px; height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}

.sim-btn:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--sh-raise);
}

.sim-btn:hover .sim-btn__icon { color: var(--accent); }

.sim-btn:active { transform: translateY(0) scale(0.985); box-shadow: none; }

.sim-btn.active,
.sim-btn[aria-pressed="true"] {
  background: linear-gradient(150deg, var(--accent-weak), rgba(242, 145, 63, 0.05));
  border-color: var(--accent-line);
  box-shadow: var(--sh-accent);
  animation: tilePop var(--dur-3) var(--ease-pop);
}

.sim-btn.active .sim-btn__icon,
.sim-btn[aria-pressed="true"] .sim-btn__icon {
  color: var(--accent);
  transform: scale(1.08);
}

.sim-btn.active .sim-btn__key,
.sim-btn[aria-pressed="true"] .sim-btn__key {
  background: var(--accent);
  color: var(--ink);
  border-color: transparent;
}

/* aktywny nie udaje hovera */
.sim-btn.active:hover,
.sim-btn[aria-pressed="true"]:hover {
  background: linear-gradient(150deg, var(--accent-weak), rgba(242, 145, 63, 0.05));
  transform: translateY(-1px);
}

/* ===== DOCK (zawsze widoczny) ===== */
.dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dock-gap);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
}

.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-15);
}

.num {
  font: 600 var(--fs-2xs)/1 var(--font-num);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.transport { display: flex; align-items: center; gap: var(--s-2); }
.transport__gap { flex: 1 1 auto; }

/* ===== SLIDERY ===== */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--track);
}

.range::-moz-range-track {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--track);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -5px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--sh-thumb);
  transition: transform var(--dur-1) var(--ease-out);
}

.range::-moz-range-thumb {
  width: 16px; height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--sh-thumb);
  transition: transform var(--dur-1) var(--ease-out);
}

.range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.range:hover::-moz-range-thumb     { transform: scale(1.15); }
.range:active { cursor: grabbing; }
.range:active::-webkit-slider-thumb { transform: scale(1.25); }
.range:active::-moz-range-thumb     { transform: scale(1.25); }

.range:disabled { cursor: default; }
.range:disabled::-webkit-slider-runnable-track { background: rgba(111, 119, 137, 0.40); }
.range:disabled::-moz-range-track              { background: rgba(111, 119, 137, 0.40); }
.range:disabled::-webkit-slider-thumb { background: var(--control-off); box-shadow: none; transform: none; }
.range:disabled::-moz-range-thumb     { background: var(--control-off); box-shadow: none; transform: none; }

/* timeline: track wypełniany z --fill, ustawianego przez JS co ramkę */
.range--time { --fill: 0%; }

.range--time::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-full);
  background:
    linear-gradient(90deg, var(--accent) 0%, var(--accent-hot) 100%) 0 0 / var(--fill) 100% no-repeat,
    var(--track);
  transition: none;
}

.range--time::-moz-range-track {
  height: 6px;
  border-radius: var(--r-full);
  background:
    linear-gradient(90deg, var(--accent) 0%, var(--accent-hot) 100%) 0 0 / var(--fill) 100% no-repeat,
    var(--track);
  transition: none;
}

.range--time::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4px; }
.range--time::-moz-range-thumb     { width: 14px; height: 14px; }

.range--time:disabled::-webkit-slider-runnable-track { background: rgba(111, 119, 137, 0.40); }
.range--time:disabled::-moz-range-track              { background: rgba(111, 119, 137, 0.40); }

/* ===== PRZYCISKI ===== */
.ibtn {
  flex-shrink: 0;
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}

.ibtn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-strong); }
.ibtn:active:not(:disabled) { transform: scale(0.94); }
.ibtn:disabled { opacity: 0.42; cursor: not-allowed; }
.ibtn svg { width: 18px; height: 18px; stroke-width: 1.9; }

.ibtn--primary {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(242, 145, 63, 0.7);
}

.ibtn--primary:hover:not(:disabled) { background: #f8a257; border-color: transparent; }
.ibtn--primary svg { width: 20px; height: 20px; stroke-width: 2.1; fill: currentColor; }

/* play/pause: ikona i nazwa dostępna przełączane po data-state, bez JS */
#btn-play .i--play,
#btn-play .i--pause,
#btn-play .sr--play,
#btn-play .sr--pause { visibility: hidden; }

#btn-play[data-state="paused"] .i--play,
#btn-play[data-state="paused"] .sr--play,
#btn-play[data-state="playing"] .i--pause,
#btn-play[data-state="playing"] .sr--pause { visibility: visible; }

#btn-play .ibtn__i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-pop);
}

#btn-play[data-state="paused"] .i--play,
#btn-play[data-state="playing"] .i--pause { opacity: 1; transform: scale(1); }

.tbtn {
  height: 40px;
  padding: 0 var(--s-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  font: 500 var(--fs-md)/1 var(--font);
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1),
              color var(--dur-1), transform var(--dur-1);
}

.tbtn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); color: var(--text-1); }
.tbtn:active:not(:disabled) { transform: scale(0.97); }
.tbtn:disabled { opacity: 0.42; cursor: not-allowed; }

.tbtn--reset:hover:not(:disabled) {
  background: rgba(226, 96, 74, 0.14);
  border-color: var(--danger);
  color: #f0a196;
}

.tbtn--reset:focus-visible { outline-color: var(--danger); }

/* ===== CHIPY (checkbox) ===== */
.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-15);
}

.chip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-2) 0 var(--s-15);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: 500 var(--fs-md)/1 var(--font);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}

.chip:hover { background: var(--surface-3); border-color: var(--line-strong); }
.chip:has(:checked) { color: var(--text-1); }

.chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 32px; height: 18px;
  margin: 0;
  background: var(--control-off);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}

.chip input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 14px;
  background: var(--surface-1);
  border-radius: 50%;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2);
}

.chip input:checked { background: var(--jade); }
.chip input:checked::before { transform: translateX(14px); background: var(--space-0); }
.chip input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ===== INFO + SKRÓTY ===== */
.info {
  font: 400 var(--fs-xs)/1.5 var(--font);
  color: var(--text-2);
  min-height: 32px;
}

.keys { font: 400 var(--fs-2xs)/1.6 var(--font); color: var(--text-3); }

kbd {
  font: 600 var(--fs-2xs)/1 var(--font-num);
  color: var(--text-2);
  padding: 2px 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.keys__dot { opacity: 0.5; padding: 0 2px; }

/* ===== TOGGLE PANELU ===== */
.toggle {
  position: fixed;
  z-index: 30;
  top:   var(--pi-t);
  right: var(--pi-r);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: rgba(19, 30, 51, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1),
              transform var(--dur-1), top var(--dur-4) var(--ease-out),
              right var(--dur-4) var(--ease-out), bottom var(--dur-4) var(--ease-out);
}

.toggle:hover { background: var(--surface-3); border-color: var(--line-strong); }
.toggle:active { transform: scale(0.94); }
.toggle svg { width: 20px; height: 20px; stroke-width: 1.9; }
.toggle__i { display: grid; place-items: center; }
.toggle__i--open { display: none; }
body:not(.panel-open) .toggle__i--close { display: none; }
body:not(.panel-open) .toggle__i--open  { display: grid; }

/* ===== HUD =====
   Briefing card, not a badge: what the scene would do to the place it is set
   in. Width is capped so it never reaches the panel on the other side, and the
   body scrolls rather than pushing the card off a short window. */
.hud {
  position: fixed;
  z-index: 15;
  bottom: var(--pi-b);
  left: var(--pi-l);
  /* max() to podłoga: gdyby kadr został zmierzony jako zerowy (embed w iframe
     przed layoutem), calc schodzi poniżej zera i karta znika */
  width: min(520px, max(260px, calc(100vw - var(--panel-w) - var(--pi-l) - var(--pi-r) - var(--s-8))));
  max-height: min(56dvh, 420px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--hud-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-hud);
  animation: hudIn var(--dur-3) var(--ease-out) both;
}

.hud[hidden] { display: none; }

.hud__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.hud__pulse {
  flex-shrink: 0;
  width: 8px; height: 8px;
  margin-top: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(242, 145, 63, 0.18);
  animation: pulse 2.2s var(--ease-in-out) infinite;
}

.hud__id { min-width: 0; }

.hud__title {
  font: 600 var(--fs-display)/1.25 var(--font);
  color: var(--text-1);
  letter-spacing: -0.015em;
}

.hud__where {
  margin-top: var(--s-1);
  color: var(--text-3);
  line-height: 1.4;
}

/* faza (building / peak / aftermath) siedzi tam, gdzie wcześniej procent */
.hud__phase {
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 3px;
  padding: var(--s-1) var(--s-2);
  background: var(--accent-weak);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  font: 600 var(--fs-2xs)/1.3 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.hud__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.hud__body::-webkit-scrollbar { width: 6px; }
.hud__body::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
}

.hud__block { display: grid; gap: var(--s-2); }

.hud__text {
  font: 400 var(--fs-sm)/1.55 var(--font);
  color: var(--text-1);
  text-wrap: pretty;
}

.hud__list { list-style: none; display: grid; gap: var(--s-15); }

.hud__list li {
  position: relative;
  padding-left: var(--s-4);
  font: 400 var(--fs-sm)/1.5 var(--font);
  color: var(--text-2);
  text-wrap: pretty;
}

/* kropka zamiast bulletu, w akcencie lądów – ta sama rola co w panelu */
.hud__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px; height: 5px;
  background: var(--jade);
  border-radius: 50%;
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  z-index: 40;
  top: var(--pi-t);
  left: var(--pi-l);
  max-width: 320px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--jade-weak);
  border-left: 3px solid var(--jade);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hud);
  font: 500 var(--fs-xs)/1.45 var(--font);
  color: var(--text-1);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: toastIn var(--dur-2) var(--ease-out) both;
}

.toast[hidden] { display: none; }

/* ===== ŁADOWANIE ===== */
.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  background: radial-gradient(120% 90% at 50% 40%, #0c1c38 0%, var(--space-0) 70%);
  transition: opacity var(--dur-5) var(--ease-out), visibility var(--dur-5);
}

.loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loading__sphere {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5c93bd 0%, #2d5f8a 42%, #123a5e 72%, #0a2440 100%);
  box-shadow: inset -6px -8px 16px rgba(2, 10, 24, 0.65),
              0 12px 32px -10px rgba(45, 95, 138, 0.6);
  animation: bob 3.2s var(--ease-in-out) infinite;
}

.loading__title { font: 600 var(--fs-lg)/1.3 var(--font); color: var(--text-1); }
.loading__sub   { font: 400 var(--fs-xs)/1.4 var(--font); color: var(--text-2); min-height: 16px; }

.loading__track {
  width: 200px; height: 3px;
  margin-top: var(--s-1);
  background: rgba(244, 236, 224, 0.14);
  border-radius: var(--r-full);
  overflow: hidden;
}

#loading-bar {
  display: block;
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  border-radius: inherit;
  transition: width var(--dur-2) linear;
}

/* ===== MOTION ===== */
@keyframes tilePop {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-2px) scale(1.035); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes hudIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0 4px rgba(242, 145, 63, 0.18); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 7px rgba(242, 145, 63, 0.05); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

/* ===== TABLET / NISKIE OKNO ===== */
@media (max-width: 1023px) {
  :root { --panel-w: 320px; --panel-pad-x: 16px; --dock-gap: 10px; }
  .sim-btn { min-height: 52px; padding-left: var(--s-2); }
  .hud {
    width: min(400px, max(260px, calc(100vw - var(--panel-w) - var(--pi-l) - var(--pi-r) - var(--s-6))));
    padding: var(--s-3);
  }
  .hud__title { font-size: var(--fs-lg); }
}

@media (max-height: 760px) and (min-width: 721px) {
  :root { --dock-gap: 10px; }
  .panel__sub { display: none; }
  .keys { display: none; }
  .hud { max-height: 64dvh; }
}

/* ===== MOBILE: bottom sheet ===== */
@media (max-width: 720px) {
  :root { --panel-inset: 10px; }

  /* pływający bottom sheet: odklejony od wszystkich krawędzi */
  .panel {
    top: auto;
    left: var(--pi-l);
    right: var(--pi-r);
    bottom: var(--pi-b);
    width: auto;
    height: auto;
    max-height: min(68dvh, 540px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-float);
    padding: var(--s-2) var(--s-4) var(--s-4);
  }

  .panel.collapsed { transform: translateY(calc(100% + var(--pi-b) + 12px)); }

  .panel__grab {
    display: block;
    width: 40px; height: 4px;
    margin: 0 auto var(--s-3);
    background: var(--line-strong);
    border-radius: var(--r-full);
  }

  .panel__head { padding-right: 0; margin-bottom: var(--s-3); }
  h1 { font-size: 1.125rem; }
  .panel__sub { display: none; }

  .sims { min-height: 96px; }
  .sim-btn { min-height: 48px; }

  /* na mobile toggle jest osobną pigułką nad sheetem, nie w narożniku karty */
  .toggle,
  body.panel-open .toggle {
    top: auto;
    bottom: var(--pi-b);
    right: var(--pi-r);
    width: 44px; height: 44px;
    background: rgba(19, 30, 51, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--line);
    color: var(--text-1);
  }

  body.panel-open .toggle { bottom: calc(min(68dvh, 540px) + var(--pi-b) + var(--s-2)); }
  body.panel-open .toggle svg { width: 20px; height: 20px; }

  /* pola trafienia 44px */
  .ibtn { width: 44px; height: 44px; }
  .chip { min-height: 44px; }
  .range { height: 44px; }
  .range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; }
  .range::-moz-range-thumb     { width: 20px; height: 20px; }
  .range--time::-webkit-slider-runnable-track,
  .range--time::-moz-range-track { height: 8px; }
  .range--time::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; }
  .range--time::-moz-range-thumb     { width: 20px; height: 20px; }

  .hud {
    bottom: auto;
    top:  max(var(--s-3), env(safe-area-inset-top));
    left: max(var(--s-3), env(safe-area-inset-left));
    right: calc(56px + max(var(--s-3), env(safe-area-inset-right)));
    width: auto;
    max-height: min(42dvh, 300px);
    padding: var(--s-3);
    gap: var(--s-2);
  }

  .hud__head { padding-bottom: var(--s-2); }
  .hud__title { font-size: var(--fs-md); }
  .hud__body { gap: var(--s-3); }
  .keys { display: none; }

  .toast {
    top: auto;
    left: var(--pi-l);
    right: calc(var(--pi-r) + 56px);
    max-width: none;
    bottom: var(--pi-b);
  }

  body.panel-open .toast { bottom: calc(min(68dvh, 540px) + var(--pi-b) + var(--s-2)); right: var(--pi-r); }
}

@media (max-width: 400px) {
  .hud__phase { display: none; }
}

/* telefon w poziomie */
@media (max-width: 900px) and (max-height: 480px) {
  .panel { max-height: 88vh; }
  .sims { min-height: 60px; }
  .info, .keys { display: none; }
  /* w poziomie na briefing nie ma pionu: zostaje sam nagłówek */
  .hud { max-height: none; }
  .hud__body { display: none; }
}

/* ===== PREFERENCJE UŻYTKOWNIKA ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 120ms; }

  .sim-btn, .sim-btn__icon, .ibtn, .tbtn, .toggle, .chip input, .chip input::before,
  .range::-webkit-slider-thumb, .range::-moz-range-thumb { transition-duration: 1ms; }

  .sim-btn:hover, .sim-btn:active, .sim-btn.active, .sim-btn[aria-pressed="true"],
  .ibtn:active, .tbtn:active, .toggle:active { transform: none; }

  .hud, .toast, .sim-btn.active, .sim-btn[aria-pressed="true"],
  .hud__pulse, .loading__sphere { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .panel { background: var(--surface-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hud   { background: #070d1a; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .toggle { background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(244, 236, 224, 0.30);
    --line-strong: rgba(244, 236, 224, 0.48);
    --text-2: #d2c9bb;
    --text-3: #b3ab9e;
  }
}

@media (forced-colors: active) {
  .sim-btn.active, .sim-btn[aria-pressed="true"] { border: 2px solid Highlight; }
  .chip input:checked { background: Highlight; }
  .sim-btn__icon svg, .ibtn svg, .toggle svg { forced-color-adjust: auto; }
}