/**
 * Рабочее оформление. Намеренно нейтральное: дизайн ведётся отдельной задачей.
 *
 * Всё, что задаёт вид, вынесено в переменные ниже — дизайнер меняет их
 * и несколько правил, не трогая разметку и логику.
 *
 * Чего менять НЕЛЬЗЯ (это механика, а не композиция, см. portal-tz.md 10.5):
 *   — карта миров остаётся первым экраном;
 *   — в Портале порядок блоков: бюджет → экранные → неэкранные → цели;
 *   — баланс и опыт одного визуального веса, ни один не крупнее другого.
 */

/* Палитра снята с логотипа Майнскилл (design-system.md, раздел 1).
   Пока применён только тёмный, игровой контур. Гибридная модель —
   светлые учебные экраны и тёмные наградные — работа дизайн-задачи. */
:root {
  --bg: #0A0300;          /* ink-900 */
  --surface: #140600;     /* ink-800 */
  --surface-2: #241000;   /* ink-700 */
  --text: #FFFBF4;        /* paper */
  --text-dim: #A98B6E;
  --accent: #F1CE70;      /* gold-300 — изумруды, награды */
  --accent-dim: #E08A1E;  /* amber-500 — основная кнопка */
  --danger: #E4572E;      /* attention — «смотри сюда», не «ошибка».
                             Чистый красный запрещён: ошибка не должна
                             выглядеть как кровь. */
  --radius: 14px;
  --gap: 12px;
  --pad: 16px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Атрибут hidden должен побеждать любые display из классов.
   Без этого правила .sheet и .onboarding с display:flex остаются
   на экране, хотя код их спрятал: шторка накрывает приложение,
   и на телефоне видно только «Загрузка…». */
[hidden] { display: none !important; }


body {
  margin: 0;
  padding: 0 0 72px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.35rem; margin: var(--pad); }
h2 { font-size: 1rem; margin: 20px var(--pad) 8px; color: var(--text-dim); font-weight: 600; }

.view { padding-bottom: 16px; }

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

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  flex-wrap: wrap;
}

.who { font-size: 1.15rem; font-weight: 600; }

.meters { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }

/* Баланс и опыт одного размера — прогресс не должен весить меньше валюты. */
.meter {
  font-size: 0.8rem;
  color: var(--text-dim);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 999px;
}

.parent-entry {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
}

.pending-note, .bag-note {
  margin: 0 var(--pad) 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* --- миры ---------------------------------------------------------------- */

.worlds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  padding: 0 var(--pad);
}

.world {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: var(--pad);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 92px;
}

.world:active { background: var(--surface-2); }

.world-icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 2px; }

/* Профессор Пи: hello · think · hint · cheer.
   think — пока ждём ответ модели, hint — при подсказке, cheer — когда понял. */
.prof-face { display: block; width: 96px; height: 96px; object-fit: contain; margin: 0 var(--pad) 8px; }

/* Первый запуск: один шаг — один экран, ничего лишнего в кадре. */
.onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 32px var(--pad);
  text-align: center;
}

.ob-face { width: 128px; height: 128px; object-fit: contain; }
.ob-text { max-width: 34ch; font-size: 1.05rem; line-height: 1.5; margin: 0; }
.ob-input { width: 100%; max-width: 320px; }

.ob-field {
  width: 100%;
  padding: 14px;
  font: inherit;
  font-size: 1rem;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--surface-2);
  background: var(--surface);
  color: var(--text);
}

.onboarding .primary { max-width: 320px; margin: 0; }
.onboarding .action.ghost { border: 0; color: var(--text-dim); }

.rank-row { display: flex; align-items: center; gap: 12px; margin: 0 var(--pad) 8px; }
.rank-icon { width: 44px; height: 44px; object-fit: contain; }
.rank-row .rank { margin: 0; }
.world-title { font-size: 1.05rem; font-weight: 600; }
.world-role { font-size: 0.72rem; color: var(--accent); text-transform: lowercase; }
.world-note { font-size: 0.82rem; color: var(--text-dim); }

.rank { font-size: 1.2rem; font-weight: 700; margin: 0 var(--pad) 8px; }

.daily-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 var(--pad) var(--gap);
  padding: 12px var(--pad);
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.daily-goal .bar { flex-basis: 100%; }

.topic-title { margin: 0 var(--pad) 4px; font-size: 1.05rem; font-weight: 600; }

.today ul { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: 6px; }

.today-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9rem;
}

.today-time { min-width: 92px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.today-title { flex: 1; }
/* Школа и прочее — приглушённо: они в дне есть, но отмечать их не нужно. */
.today-item.is-plain .today-title { color: var(--text-dim); }

.bell {
  background: var(--surface);
  border: 0;
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8rem;
  padding: 5px 12px;
  cursor: pointer;
}

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: flex-end;
  z-index: 30;
}

.sheet-body {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--pad) var(--pad) 28px;
}

.sheet-body h2 { margin: 0 0 12px; }
.bell-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }

/* Родительский контур: предложение по ставкам и формы. */
.proposal {
  margin: var(--gap) var(--pad);
  padding: var(--pad);
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent-dim);
  border-radius: 0;
}

.proposal h2 { margin: 0 0 8px; padding: 0; }
.proposal p { margin: 0 0 8px; font-size: 0.9rem; }
.warn { color: var(--danger); }
.hint { margin: 0 var(--pad) var(--gap); font-size: 0.85rem; color: var(--text-dim); }

.goals-form {
  display: grid;
  gap: var(--gap);
  margin: 0 var(--pad) var(--gap);
}

.goals-form label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--text-dim); }

.goals-form input {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--surface-2);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.goals-form .primary { width: 100%; margin: 0; }

.entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: calc(100% - 32px);
  margin: var(--gap) var(--pad) 0;
  padding: var(--pad);
  text-align: left;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.entry:active { background: var(--surface-2); }
.entry .card-note { width: auto; }

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

.cards { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: var(--gap); }

.card {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--pad);
}

.card-title { flex: 1; min-width: 140px; }
.card-price { color: var(--text-dim); font-size: 0.9rem; }
.card-status { color: var(--accent); font-size: 0.85rem; }
.card-note { width: 100%; font-size: 0.8rem; color: var(--text-dim); }

.action {
  background: var(--accent-dim);
  color: var(--text);
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font: inherit;
  cursor: pointer;
}

.action:disabled { opacity: 0.4; cursor: default; }
.action.ghost { background: transparent; border: 1px solid var(--surface-2); }
.primary { background: var(--accent-dim); color: var(--text); border: 0; border-radius: 10px; padding: 12px; margin: 0 var(--pad) var(--gap); font: inherit; width: calc(100% - 32px); cursor: pointer; }

/* --- Портал -------------------------------------------------------------- */

.screen-budget {
  margin: 0 var(--pad);
  padding: var(--pad);
  background: var(--surface);
  border-radius: var(--radius);
}

/* «Твои 30 минут» набраны крупнее купленного: база принадлежит ребёнку
   по умолчанию, её не надо зарабатывать. */
.budget-base { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.budget-bought, .budget-left { margin: 2px 0; font-size: 0.9rem; color: var(--text-dim); }
.budget-cap { margin: 8px 0 0; font-size: 0.9rem; color: var(--danger); }

.bar { width: 100%; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }

/* --- лента --------------------------------------------------------------- */

.feed { margin-top: 24px; }
.feed ul { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: 6px; }
.feed-item { font-size: 0.88rem; color: var(--text-dim); }

.empty { color: var(--text-dim); padding: 0 var(--pad); }

/* --- вкладки ------------------------------------------------------------- */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1;
  background: none;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.82rem;
  padding: 14px 4px;
  cursor: pointer;
}

.tab.is-active { color: var(--accent); }

/* --- родительский раздел ------------------------------------------------- */
/* Визуально отличается от детского, чтобы случайно не перепутать. */

.parent {
  position: fixed;
  inset: 0;
  background: #0d1016;
  overflow-y: auto;
  z-index: 10;
}

.parent-top { justify-content: space-between; border-bottom: 1px solid var(--surface-2); }
.parent-top button { background: none; border: 0; color: var(--text-dim); font: inherit; cursor: pointer; }

#pin { font-size: 1.4rem; padding: 12px; width: 160px; margin: 0 var(--pad); border-radius: 10px; border: 1px solid var(--surface-2); background: var(--surface); color: var(--text); letter-spacing: 6px; }
#btn-pin { margin: var(--gap) var(--pad); padding: 12px 20px; border: 0; border-radius: 10px; background: var(--accent-dim); color: var(--text); font: inherit; cursor: pointer; }

.queue { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: var(--gap); }

.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--pad);
}

.queue-title { flex: 1; min-width: 140px; }
.error { color: var(--danger); padding: 0 var(--pad); }

/* --- служебное ----------------------------------------------------------- */

.toast {
  position: fixed;
  left: var(--pad); right: var(--pad); bottom: 76px;
  background: var(--surface-2);
  padding: 14px var(--pad);
  border-radius: var(--radius);
  z-index: 20;
  font-size: 0.9rem;
}

.boot { padding: 40px var(--pad); color: var(--text-dim); }