/* Люлея — ночная палитра «спальня при ночнике» */

:root {
  --night: #0f0b22;
  --surface: #1b1533;
  --surface-2: #241c42;
  --ink: #f4efe6;
  --dim: #9a91b8;
  --amber: #edb36b;      /* свет ночника = крафт брата */
  --amber-soft: rgba(237, 179, 107, 0.14);
  --indigo: #7a6bc4;     /* bed */
  --sea: #5c93a6;        /* mask */
  --rose: #c4708a;       /* pulse */
  --line: rgba(154, 145, 184, 0.18);
  --r: 18px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% -10%, #241c48 0%, var(--night) 55%),
    var(--night);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

h1, h2, h3, .btn-big, .phase-name {
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
}

/* ---------- шапка ---------- */

header { text-align: center; margin-bottom: 18px; }

.logo {
  display: block;
  margin: 0 auto 12px;
  border-radius: 20px;
  box-shadow: 0 0 34px rgba(237, 179, 107, 0.28);
  animation: glow 7s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 24px rgba(237,179,107,0.22); }
  50%      { box-shadow: 0 0 44px rgba(237,179,107,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
}

h1 { font-size: 30px; font-weight: 700; letter-spacing: 0.01em; }

.sub { color: var(--dim); font-size: 14px; margin-top: 4px; }

.badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- карточки ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.55;
}
.card p + p { margin-top: 8px; }
.card b { color: var(--amber); font-weight: 600; }
.card.intro { border-left: 3px solid var(--amber); }

.how {
  color: var(--dim);
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
  line-height: 1.45;
}

/* ---------- главный экран ---------- */

.label {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 22px 0 10px;
}

.worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.world {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.world.sel {
  border-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-soft), var(--surface));
}
.world h3 { font-size: 18px; margin-bottom: 3px; }
.world p { color: var(--dim); font-size: 13px; line-height: 1.35; }

.world.locked { cursor: default; opacity: 0.62; }
.world.locked .w-ico { opacity: 0.7; }

.w-ico {
  width: 36px;
  height: 36px;
  display: block;
  margin-bottom: 10px;
}

.w-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}
.w-badge.live { color: var(--amber); background: var(--amber-soft); }
.w-badge.soon { color: var(--dim); background: rgba(154, 145, 184, 0.14); }

/* режимы */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s, background 0.25s;
}
.mode small {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
.mode.sel {
  border-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-soft), var(--surface));
}

/* ---------- сказка ---------- */

.story {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}

.story-select {
  width: 100%;
  min-height: 46px;
  padding: 11px 40px 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background-color: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23edb36b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.story-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.story-select option { background: var(--surface); color: var(--ink); }

.story-pick {
  display: inline-block;
  margin-top: 10px;
  border: 1.5px dashed rgba(237, 179, 107, 0.45);
  color: var(--amber);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
.story-msg { color: var(--rose); font-size: 12.5px; margin-top: 8px; line-height: 1.4; }
.story-msg:empty { display: none; }
.story-attrib { color: var(--dim); font-size: 12px; margin-top: 10px; }

.story-now { color: var(--amber); font-size: 13.5px; margin: -2px 0 10px; }
.story-now b { font-weight: 600; }

.btn-big {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 20px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(160deg, #f2c184, var(--amber) 55%, #d1913f);
  color: #2a1c08;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(237, 179, 107, 0.28);
}
.btn-big:active { transform: scale(0.985); }

/* ---------- плеер ---------- */

.player-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.world-now { color: var(--dim); font-size: 14px; }
.world-now b { color: var(--ink); }

.phases { display: flex; gap: 6px; margin-bottom: 14px; }
.ph-seg {
  --p: 0%;
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.ph-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--p);
  background: var(--amber);
  border-radius: 99px;
  transition: width 0.4s linear;
}
.ph-seg.done::after { width: 100%; opacity: 0.45; }

.phase-name { font-size: 26px; font-weight: 700; }
.phase-timer { color: var(--amber); font-size: 13px; margin-top: 2px; }
.phase-hint { color: var(--dim); font-size: 14px; margin-top: 6px; min-height: 42px; }

.row-btns { display: flex; gap: 10px; margin: 16px 0 12px; }
.btn {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
.btn:active { background: var(--surface-2); }
.btn.warm { border-color: rgba(237, 179, 107, 0.5); color: var(--amber); }

.btn-dim {
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: 8px;
  border-color: rgba(122, 107, 196, 0.55);
  color: #b7abe8;
}

.charge-hint {
  color: var(--dim);
  font-size: 12.5px;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.45;
  min-height: 1em;
}

/* ---------- движок (свёрнутый) ---------- */

.engine {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.engine > summary {
  list-style: none;
  cursor: pointer;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 0;
  user-select: none;
}
.engine > summary::-webkit-details-marker { display: none; }
.engine > summary::before { content: '▸ '; color: var(--amber); }
.engine[open] > summary::before { content: '▾ '; }

/* ---------- слои ---------- */

.layer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.layer.craft { border-left: 3px solid var(--amber); }

.l-head { display: flex; align-items: baseline; gap: 8px; }
.l-name { font-size: 14px; font-weight: 600; }
.l-tag {
  font-size: 11px;
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: 99px;
  padding: 1px 8px;
}
.l-tag-dim { color: var(--dim); background: rgba(154,145,184,0.12); }
.l-val { margin-left: auto; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.l-track {
  height: 8px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--night);
  overflow: hidden;
}
.l-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  transition: width 0.12s linear;
}
.layer:nth-child(1) .l-bar { background: linear-gradient(90deg, #4d3f8f, var(--indigo)); }
.layer:nth-child(2) .l-bar { background: linear-gradient(90deg, #b9843e, var(--amber)); }
.layer:nth-child(3) .l-bar { background: linear-gradient(90deg, #3c6a7b, var(--sea)); }
.layer:nth-child(4) .l-bar { background: linear-gradient(90deg, #8f4a60, var(--rose)); }

/* ---------- микшер слоёв (ручной баланс родителя) ---------- */

.mixer {
  margin-top: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.mix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mix-head .label { margin-bottom: 6px; }
.mix-reset {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline dotted;
  flex: none;
}
.mix-reset:hover { color: var(--amber); }
.mix-hint { color: var(--dim); font-size: 12.5px; line-height: 1.45; margin-bottom: 14px; }

.mix-row { margin-bottom: 10px; }
.mix-row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 2px;
}
.mix-name { font-weight: 600; }
.mix-val { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.mix-row input[type='range'] { height: 30px; }
.mix-row[data-layer='bed'] input[type='range'] { accent-color: var(--indigo); }
.mix-row[data-layer='lullaby'] input[type='range'] { accent-color: var(--amber); }
.mix-row[data-layer='mask'] input[type='range'] { accent-color: var(--sea); }
.mix-row[data-layer='pulse'] input[type='range'] { accent-color: var(--rose); }

/* ---------- слайдеры ---------- */

.slider-row.vol { margin-top: 12px; }
.slider-row { margin-bottom: 14px; }
.slider-row label {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 6px;
}
input[type='range'] {
  width: 100%;
  accent-color: var(--amber);
  height: 28px;
}

/* ---------- панель дизайнера ---------- */

.designer-toggle { margin-top: 26px; text-align: center; }
#btn-designer {
  background: none;
  border: 1.5px dashed rgba(237, 179, 107, 0.45);
  color: var(--amber);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
}
#btn-designer.on { background: var(--amber-soft); border-style: solid; }

#designer {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 16px;
}
#designer h2 { font-size: 18px; margin-bottom: 4px; color: var(--amber); }
#designer .d-sub { color: var(--dim); font-size: 13px; margin-bottom: 14px; }
#designer h3 { font-size: 14px; margin: 16px 0 8px; }

#designer table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
#designer th, #designer td {
  text-align: left;
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--dim);
}
#designer th { color: var(--ink); font-weight: 600; }
#designer td:first-child { color: var(--ink); white-space: nowrap; }
#designer td.need { color: var(--amber); }

.d-snd {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--sea);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.02em;
}

#designer pre {
  background: var(--night);
  border-radius: 12px;
  padding: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  overflow-x: auto;
  color: #c9c2e0;
}

#designer ul { padding-left: 18px; color: var(--dim); font-size: 13.5px; }
#designer li { margin-bottom: 5px; }
#designer li b { color: var(--ink); }

.d-note { color: var(--dim); font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.d-note code { color: var(--amber); }

.btn-eq {
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--dim);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
}
.btn-eq.on {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

/* ---------- о проекте ---------- */

#about {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
#about summary {
  padding: 14px 16px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}
#about summary::-webkit-details-marker { display: none; }
#about summary::after { content: ' +'; color: var(--amber); }
#about[open] summary::after { content: ' −'; }
.about-body {
  padding: 0 16px 16px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.55;
}
.about-body p + p { margin-top: 9px; }
.about-body b { color: var(--amber); font-weight: 600; }

footer {
  margin-top: 30px;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- шторка (чёрный экран на ночь) ---------- */

#veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.veil-clock {
  font-size: 44px;
  font-weight: 300;
  color: #241f38;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.veil-phase {
  font-size: 14px;
  color: #1b172c;
}
.veil-hint {
  position: absolute;
  bottom: 34px;
  font-size: 12px;
  color: #17132a;
}

/* ---------- лоадер старта (греем стемы мира) ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 998;
  background:
    radial-gradient(120% 90% at 50% 32%, #241c48 0%, var(--night) 60%),
    var(--night);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}
.loader-moon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f2c184, var(--amber) 55%, #b9843e);
  box-shadow: 0 0 40px rgba(237, 179, 107, 0.4);
  animation: loaderBreath 2.6s ease-in-out infinite;
}
@keyframes loaderBreath {
  0%, 100% { transform: scale(0.9); box-shadow: 0 0 26px rgba(237, 179, 107, 0.28); }
  50%      { transform: scale(1.05); box-shadow: 0 0 46px rgba(237, 179, 107, 0.5); }
}
.loader-text { font-size: 18px; font-weight: 600; }
.loader-track {
  width: 200px;
  max-width: 70vw;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--amber);
  transition: width 0.3s ease;
}
.loader-count { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.loader-sub { color: var(--dim); font-size: 12px; max-width: 260px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .loader-moon { animation: none; }
  .loader-bar { transition: none; }
}

[hidden] { display: none !important; }