:root {
  --bg: #0e1020;
  --panel: #181b33;
  --text: #eef1ff;
  --muted: #9aa0c7;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
html, body {
  margin: 0; width: 100%;
  height: 100%; height: var(--app-height, 100%);
  overflow: hidden;                 /* нет браузерного скролла (п. 1.10.2) */
  touch-action: manipulation;       /* запрет пинч-зума/двойного тапа */
  overscroll-behavior: none;        /* нет pull-to-refresh */
}
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 800px at 50% -10%, #1c2150, var(--bg));
  color: var(--text);
}
/* Стартовый сплэш (до сборки UI) — на случай ожидания SDK/языка */
.boot-splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.boot-splash-icon { font-size: 64px; animation: bootpulse 1.1s ease-in-out infinite; }
@keyframes bootpulse { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.14); opacity: 1; } }
/* Запрет браузерных жестов на интерактивных элементах (п. 1.10.2) */
button, select, textarea, input, .card, .arr-block, .char, .tab, .emoji-pick,
.cc-lane, .cc-diff, .cc-res-btn { touch-action: none; }

/* Прокручиваемый контейнер (единственная зона скролла) */
.scrollable-container {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.scrollable-container::-webkit-scrollbar { display: none; }
/* Выделение текста разрешено ТОЛЬКО в настоящих полях ввода (ввод кода трека).
   Это не «выделение игрового поля» (п. 1.6.1.8 / 1.6.2.7) — обычный текст-инпут. */
.code-input { user-select: text; -webkit-user-select: text; }

/* Оверлеи модалок. align-items:flex-start + margin:auto на карточке — центрируем,
   когда влезает, и НЕ обрезаем верх/низ при переполнении (низкие/ландшафт-экраны):
   overflow-y:auto даёт прокрутку, а auto-margins схлопываются — весь диалог доступен. */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(8, 9, 20, 0.85); z-index: 10;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 0;
}
.overlay > * { margin: auto; }
.overlay.hidden { display: none; }

#app {
  max-width: 1000px; margin: 0 auto;
  /* Учитываем «вырезы» (notch) в портретной ориентации через safe-area-inset. */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  height: var(--app-height, 100%);
  overflow-y: auto; overflow-x: hidden;
}

/* Тач-устройства: крупные кнопки (п. 1.8, минимум 48px) */
@media (pointer: coarse) {
  .nav-btn, .controls button, .track-btn, .feed-tab, .nav-shop,
  .save-actions button, .si-buy, .onb-next, .cat-filter button, .cat-filter select { min-height: 48px; }
  .mini { min-width: 42px; min-height: 42px; }
  .scene-btn, .arr-block, .arr-add { min-width: 48px; min-height: 48px; }
}

/* Ландшафт на мобильных: отступ под боковую панель Яндекса слева (п. 1.10.3) */
@media (orientation: landscape) and (max-height: 500px) {
  #app { padding-left: max(68px, env(safe-area-inset-left)); }
}

/* ======================= Портрет / узкие экраны ======================= */
/* Группа иконок справа в навигации (магазин/помощь/гардероб/настройки). */
.nav-icons { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

@media (max-width: 560px) {
  /* Навигация: три вкладки «Студия/Концерт/Каталог» делят верхний ряд поровну,
     HUD и иконки переносятся ниже (HUD — слева, иконки — справа). */
  .nav { gap: 8px 6px; }
  .nav-btn { flex: 1 1 calc(33.333% - 4px); font-size: 14px; padding: 11px 4px; }
  .hud { margin-left: 0; margin-right: auto; }
  .nav-icons { margin-left: auto; }

  /* Шапка студии: заголовок мира сверху, панель кнопок — отдельным рядом во всю ширину. */
  .header { gap: 8px; }
  .header h1 { font-size: 20px; }
  .controls { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* Совсем узкие экраны (iPhone SE и т.п.): экономим горизонтальные поля. */
@media (max-width: 360px) {
  #app {
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .header h1 { font-size: 18px; }
  .controls button { padding: 9px 11px; font-size: 13px; }
  /* На совсем узких экранах эмодзи в сетках чуть меньше — не упираются в края ячеек. */
  .emoji-pick { font-size: 20px; }
  .acc-item { font-size: 22px; }
}

/* Навигация Студия/Каталог */
.nav { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.nav-btn {
  flex: 1; padding: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid #2c3160; border-radius: 12px;
}
.nav-btn.active { color: #0e1020; background: linear-gradient(135deg, #6df, #9d7bff); border-color: transparent; }
/* !important: некоторые скрываемые блоки (.cc-play, .cc-pause-overlay) сами задают
   display:flex с равной специфичностью — без !important они бы не скрывались. */
.view-hidden { display: none !important; }

/* HUD: Ноты + уровень */
.hud { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 8px; }
.hud-notes, .hud-lvl {
  font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid #2c3160; white-space: nowrap;
}
.hud-notes { color: #ffd24d; }
.hud-lvl { color: #6df; }

/* Задание дня */
.daily-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, #1b2348, #181b33);
  border: 1px solid #2c3160; border-radius: 12px;
}
.daily-text { font-size: 14px; }
.daily-text b { color: #ffd24d; }
.daily-actions { margin-left: auto; }
.daily-actions button {
  padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; color: #0e1020;
  background: linear-gradient(135deg, #ffd24d, #ffb14e); border: none; border-radius: 9px;
}
.daily-done { font-size: 13px; color: #5cffa6; font-weight: 700; }

/* Заблокированный мир */
.tab.locked { color: #6a6f96; border-style: dashed; }

/* Кнопка магазина в навигации */
.nav-shop {
  flex: 0 0 auto; padding: 12px 16px; font-size: 18px; cursor: pointer;
  color: var(--text); background: var(--panel); border: 1px solid #2c3160; border-radius: 12px;
}
.nav-shop:active { transform: scale(.96); }

/* Онбординг */
.onb-card {
  width: min(380px, 92vw); padding: 30px 26px; text-align: center;
  background: var(--panel); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.onb-emoji { font-size: 72px; line-height: 1; }
.onb-card h2 { margin: 14px 0 8px; font-size: 24px; }
.onb-card p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; }
.onb-dots { display: flex; gap: 8px; justify-content: center; margin: 20px 0 16px; }
.onb-dot { width: 9px; height: 9px; border-radius: 50%; background: #2c3160; }
.onb-dot.on { background: #6df; transform: scale(1.2); }
.onb-next {
  display: block; width: 100%; padding: 14px; font-size: 18px; font-weight: 700; cursor: pointer;
  color: #0e1020; background: linear-gradient(135deg, #6df, #9d7bff); border: none; border-radius: 12px;
}
.onb-skip {
  display: block; margin: 10px auto 0; padding: 6px 12px; font-size: 13px; cursor: pointer;
  color: var(--muted); background: none; border: none;
}

/* Настройки (громкость) */
.settings-card { text-align: left; }
.settings-card h2 { text-align: center; }
.settings-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.set-label { flex: 0 0 110px; font-size: 15px; font-weight: 600; }
.settings-row input[type="range"] { flex: 1; height: 28px; accent-color: #6df; cursor: pointer; }
.settings-card > button:last-child {
  display: block; margin: 18px auto 0; padding: 10px 22px; cursor: pointer;
  color: var(--text); background: #20254a; border: 1px solid #2c3160; border-radius: 10px;
}

/* Гардероб */
.wardrobe-card { text-align: center; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.acc-item {
  position: relative; aspect-ratio: 1; font-size: 26px; cursor: pointer;
  background: #20254a; border: 2px solid transparent; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.acc-item.on { border-color: #6df; background: #2a3470; box-shadow: 0 0 0 2px rgba(102,221,255,.35); }
.acc-item.locked { opacity: .8; }
.acc-cost {
  position: absolute; bottom: 2px; left: 0; right: 0; font-size: 10px; color: #ffd24d;
}
.wardrobe-card > button:last-child {
  display: block; margin: 4px auto 0; padding: 9px 20px; cursor: pointer;
  color: var(--text); background: #20254a; border: 1px solid #2c3160; border-radius: 10px;
}

/* Диалог подтверждения */
.confirm-card { text-align: center; }
.confirm-text { font-size: 17px; margin: 0 0 18px; line-height: 1.4; }

/* Магазин */
.shop-card { text-align: left; }
.shop-card h2 { text-align: center; }
.shop-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid #2c3160;
}
.si-emoji { font-size: 24px; }
.si-title { flex: 1; font-weight: 600; }
.si-buy {
  padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; color: #0e1020;
  background: linear-gradient(135deg, #5cffa6, #6df); border: none; border-radius: 9px; white-space: nowrap;
}
.si-buy:disabled { background: #2c3160; color: #6a6f96; cursor: default; }
.shop-card > button:last-child {
  display: block; margin: 16px auto 0; padding: 9px 20px; cursor: pointer;
  color: var(--text); background: #20254a; border: 1px solid #2c3160; border-radius: 10px;
}

/* Каталог */
.cat-title { font-size: 22px; margin: 0 0 12px; }
.feed-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.feed-tab {
  padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid #2c3160; border-radius: 999px;
}
.feed-tab.active { color: #0e1020; background: #6df; border-color: transparent; }
.cat-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cat-filter select, .cat-filter button {
  padding: 9px 12px; font-size: 14px; cursor: pointer;
  color: var(--text); background: var(--panel); border: 1px solid #2c3160; border-radius: 10px;
}
/* Чемпион недели */
.champ { margin-bottom: 14px; }
.champ-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: linear-gradient(135deg, #3a2f10, #181b33);
  border: 1px solid #6a5a1e; border-radius: 14px;
}
.champ-title { width: 100%; font-size: 12px; font-weight: 700; color: #ffd24d; }
.champ-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.champ-emoji { font-size: 30px; }
.champ-name { font-weight: 700; font-size: 16px; }
.champ-meta { font-size: 12px; color: var(--muted); }

/* Защита от переполнения длинными именами на узких экранах */
.ci-name, .champ-name, .ci-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cat-list { display: flex; flex-direction: column; gap: 8px; }
.cat-empty { color: #5b6092; font-size: 15px; padding: 24px 0; text-align: center; }
.cat-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid #2c3160; border-radius: 12px;
}
.ci-emoji { font-size: 28px; }
.ci-main { flex: 1; min-width: 0; }
.ci-name { font-weight: 700; font-size: 16px; }
.ci-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ci-btns { display: flex; gap: 5px; }
.ci-btns .mini { width: 34px; height: 34px; font-size: 15px; }
/* Узкий экран: не ужимаем имя трека в «…» из-за кнопок — разрешаем перенос,
   кнопки уходят во второй ряд строки каталога. */
.cat-item { flex-wrap: wrap; }
.ci-main { min-width: 150px; }
.ci-btns { margin-left: auto; }

/* Вкладки миров */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
  padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid #2c3160; border-radius: 999px;
}
.tab:active { transform: scale(.96); }
.tab.active { color: #0e1020; background: linear-gradient(135deg, #6df, #9d7bff); border-color: transparent; }

/* Заголовок */
.header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.header h1 { margin: 0; font-size: 24px; }
.bpm { font-size: 13px; color: var(--muted); padding: 4px 10px; border: 1px solid #2c3160; border-radius: 20px; }
.controls { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.controls button {
  padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text); background: var(--panel); border: 1px solid #2c3160; border-radius: 10px;
}
.controls button:active { transform: scale(.96); }

/* Сцена */
.stage-wrap {
  background: linear-gradient(180deg, #11142b, #0c0e1c);
  border: 1px solid #242a52; border-radius: 18px; padding: 18px; margin-bottom: 16px;
}
.stage {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  min-height: 120px;
}
.stage-empty { color: #5b6092; font-size: 15px; align-self: center; text-align: center; }

/* Пати-режим (трансформация) — диско-перелив цветов */
@keyframes partyhue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.stage-wrap.party { animation: partyhue 3s linear infinite; box-shadow: inset 0 0 60px rgba(157,123,255,.25); }

/* Громкость на персонажа (живой микшер) */
.char-vol {
  width: 64px; height: 16px; margin-top: 6px; cursor: pointer;
  accent-color: var(--accent, #6df); touch-action: none;
}

/* Подсказка о секретах */
.secrets-hint { text-align: center; font-size: 12px; color: #b388ff; margin-top: 10px; min-height: 14px; }
.hint-btn {
  display: block; margin: 8px auto 0; padding: 6px 14px; font-size: 13px; cursor: pointer;
  color: #b388ff; background: #20254a; border: 1px solid #3a2c66; border-radius: 999px;
}

/* Празднование находки секрета */
.celebrate {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.celebrate-emoji { font-size: 90px; animation: celebpop .5s cubic-bezier(.2,1.4,.4,1); }
.celebrate-text {
  margin-top: 12px; font-size: 20px; font-weight: 800; text-align: center; line-height: 1.4;
  background: #222a55; color: #fff; padding: 12px 22px; border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
@keyframes celebpop { from { transform: scale(0) rotate(-25deg); } to { transform: scale(1) rotate(0); } }
/* Ширина фигурки должна вмещать ряд из трёх контролов (mute/solo/убрать),
   иначе .char-ctrls вылезает за пределы и ломает раскладку сцены. */
.char { width: 96px; text-align: center; cursor: pointer; animation: pop-in .25s ease; }

/* Тач: контролы крупнее (min 42px), поэтому фигурку расширяем, а её мини-кнопки
   делаем компактнее — это вторичные элементы. Блок идёт ПОСЛЕ базового .char,
   иначе базовая ширина перебьёт значение из медиазапроса (медиа не повышает специфичность). */
@media (pointer: coarse) {
  .char { width: 112px; }
  .char-ctrls .mini { min-width: 32px; min-height: 32px; width: 32px; height: 32px; font-size: 15px; }
  .char-vol { width: 88px; }
}
.char-body {
  width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  background: radial-gradient(circle at 35% 30%, #ffffff22, transparent 60%),
              color-mix(in srgb, var(--accent) 35%, #1c2143);
  border: 3px solid var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
  will-change: transform; position: relative;
}
.char-name { font-size: 12px; color: var(--muted); margin-bottom: 4px; overflow-wrap: anywhere; word-break: break-word; }
.char-acc {
  position: absolute; top: -6px; right: -4px; font-size: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); pointer-events: none;
}
.char.silent .char-body { opacity: .35; filter: grayscale(.6); }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* Контролы персонажа (mute / solo / убрать) */
.char-ctrls { display: flex; gap: 4px; justify-content: center; }
.mini {
  width: 26px; height: 26px; padding: 0; font-size: 13px; cursor: pointer;
  color: var(--text); background: #20254a; border: 1px solid #2c3160; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mini:active { transform: scale(.9); }
.mini.on { background: var(--accent, #6df); color: #0e1020; border-color: transparent; }

/* Индикатор битов */
.dots { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3160; transition: transform .05s, background .05s; }
.dot.on { background: #6df; transform: scale(1.6); box-shadow: 0 0 12px #6df; }

/* Студийная панель: сцены + дорожка */
.studio-panel {
  background: var(--panel); border: 1px solid #242a52; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 16px;
}
.scene-row, .arr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scene-row { margin-bottom: 10px; }
.row-label { font-size: 13px; color: var(--muted); min-width: 64px; }
.scene-btns { display: flex; gap: 8px; }
.scene-btn {
  position: relative; min-width: 44px; padding: 8px 12px; font-size: 16px; font-weight: 800;
  cursor: pointer; color: var(--text); background: #20254a;
  border: 2px solid #2c3160; border-radius: 10px;
}
.scene-btn.active { border-color: var(--sc); color: var(--sc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 35%, transparent); }
.scene-count {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  color: #0e1020; background: var(--sc); border-radius: 9px;
}
.arr-blocks { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.arr-block {
  position: relative; width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sc) 22%, #20254a);
  border: 2px solid var(--sc); border-radius: 9px; font-weight: 800;
}
.arr-block.playing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 55%, transparent); transform: translateY(-2px); }
.ab-x {
  position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; padding: 0;
  font-size: 10px; line-height: 1; cursor: pointer; color: #fff;
  background: #444; border: none; border-radius: 50%;
}
.arr-add {
  width: 40px; height: 40px; font-size: 20px; cursor: pointer; color: var(--muted);
  background: #20254a; border: 2px dashed #2c3160; border-radius: 9px;
}
.track-btn {
  padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; color: #0e1020;
  background: linear-gradient(135deg, #6df, #9d7bff); border: none; border-radius: 10px;
}
.track-btn.playing { background: linear-gradient(135deg, #ff7a7a, #ff5c7a); color: #fff; }

/* DJ-эффекты: ручки */
.fx-row { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 10px; }
.fx-slider { display: flex; flex-direction: column; gap: 6px; flex: 1 1 130px; min-width: 120px; }
.fx-slider-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.fx-slider input[type="range"] { width: 100%; height: 28px; accent-color: #6df; cursor: pointer; }

/* Доска категорий: грид с авто-подбором колонок — предсказуемо на всех ширинах.
   ПК: 5 категорий в ряд. Телефон (портрет): 2 колонки даже на 320px. */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; align-items: start; }
.col {
  min-width: 0; background: var(--panel);
  border-radius: 16px; padding: 12px; border-top: 3px solid var(--accent, #555);
}
.col-h { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--accent); }
.card {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 12px;
  text-align: left; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--text); background: #20254a; border: 2px solid transparent; border-radius: 12px;
  transition: transform .06s, box-shadow .15s, background .15s;
  /* Длинные слова без пробелов/дефисов (напр. «Колокольчики») переносим внутри
     слова, чтобы текст не вылезал за карточку на узких экранах (≤360px). */
  min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.card-emoji { font-size: 20px; }
.card:active { transform: scale(.97); }
.card.active {
  background: color-mix(in srgb, var(--accent) 28%, #20254a);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent),
              0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Мои треки */
.mytracks { margin-top: 22px; }
.mt-head { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.mt-empty { color: #5b6092; font-size: 14px; }
.track-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid #2c3160; border-radius: 12px;
}
.ti-emoji { font-size: 22px; }
.ti-name { font-weight: 600; }
.ti-world { font-size: 12px; color: var(--muted); margin-left: auto; }
.track-item .mini { width: 30px; height: 30px; font-size: 14px; }

/* Диалог сохранения */
.save-card {
  width: min(420px, 92vw); padding: 24px; text-align: center;
  background: var(--panel); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.save-card h2 { margin: 0 0 14px; font-size: 22px; }
.gen-name {
  font-size: 24px; font-weight: 800; padding: 14px; margin-bottom: 12px;
  background: #0c0e1c; border-radius: 12px;
}
.emoji-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px;
}
.emoji-pick {
  aspect-ratio: 1; font-size: 22px; cursor: pointer;
  background: #20254a; border: 2px solid transparent; border-radius: 10px;
}
.emoji-pick.on { border-color: #6df; background: #2a3470; }
.save-actions { display: flex; gap: 10px; justify-content: center; }
.save-actions button {
  padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--text); background: #20254a; border: 1px solid #2c3160; border-radius: 10px;
}
.save-card > button {
  padding: 8px 14px; font-size: 14px; cursor: pointer;
  color: var(--text); background: #20254a; border: 1px solid #2c3160; border-radius: 10px;
}
.code-input {
  width: 100%; box-sizing: border-box; resize: none; margin: 8px 0 10px;
  padding: 12px; font-size: 14px; font-family: ui-monospace, monospace; line-height: 1.4;
  color: var(--text); background: #0c0e1c; border: 1px solid #2c3160; border-radius: 12px;
  word-break: break-all;
}
.code-input.input-err { border-color: #ff5c7a; }
.paste-btn { margin-bottom: 14px; }

/* Всплывашка */
.flash {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #222a55; color: #fff; padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 20; font-size: 14px;
}

/* ========================= Режим «Концерт» (ритм-игра) ========================= */
/* CTA в студии — делает геймплей заметным (п. 2.4) */
.cc-cta {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px;
  padding: 12px 16px; cursor: pointer; text-align: left;
  color: #0e1020; background: linear-gradient(135deg, #ff7ae0, #9d7bff);
  border: none; border-radius: 14px; box-shadow: 0 6px 20px rgba(157,123,255,.35);
}
.cc-cta:active { transform: scale(.99); }
.cc-cta-emoji { font-size: 30px; }
.cc-cta-main { display: flex; flex-direction: column; }
.cc-cta-title { font-size: 17px; font-weight: 800; }
.cc-cta-sub { font-size: 12px; font-weight: 600; opacity: .85; }
.cc-cta-go { margin-left: auto; font-size: 22px; font-weight: 800; }

/* Выбор уровня */
.cc-title { font-size: 24px; margin: 0 0 4px; }
.cc-sub { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.cc-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 12px 14px; background: var(--panel); border: 1px solid #2c3160; border-radius: 14px;
}
.cc-row.locked { opacity: .5; }
.cc-row-name { font-size: 15px; font-weight: 700; flex: 1 1 130px; min-width: 0; }
.cc-diffs { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-diff {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px;
  padding: 8px 10px; cursor: pointer; color: var(--text);
  background: #20254a; border: 2px solid var(--accent, #2c3160); border-radius: 12px;
}
.cc-diff.locked { border-color: #2c3160; color: #6a6f96; }
.cc-diff.cleared { background: color-mix(in srgb, var(--accent) 18%, #20254a); }
.cc-diff:active { transform: scale(.96); }
.cc-cell-name { font-size: 13px; font-weight: 700; }
.cc-cell-stars { display: flex; gap: 2px; }
.cc-st, .cc-rst { color: #3a4070; font-size: 13px; }
.cc-st.on, .cc-rst.on { color: #ffd24d; }
.cc-lock { font-size: 13px; }

/* Игровой экран */
.cc-play { display: flex; flex-direction: column; }
.cc-hud { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cc-hud-left { display: flex; flex-direction: column; min-width: 84px; }
.cc-score { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.cc-combo { font-size: 13px; font-weight: 700; color: #ffd24d; min-height: 16px; }
.cc-energy { flex: 1; height: 16px; background: #20254a; border-radius: 999px; overflow: hidden; border: 1px solid #2c3160; }
.cc-energy-fill { height: 100%; width: 100%; background: #5cffa6; transition: width .15s linear; }
.cc-pause-btn {
  flex: 0 0 auto; width: 48px; height: 48px; font-size: 20px; cursor: pointer; color: var(--text);
  background: var(--panel); border: 1px solid #2c3160; border-radius: 12px;
}
.cc-progress { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; min-height: 14px; }

.cc-field {
  position: relative; height: min(58vh, 480px); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #11142b, #0a0c18); border: 1px solid #242a52;
}
.cc-lanes { position: absolute; inset: 0; display: flex; gap: 6px; padding: 0 6px; }
.cc-lane {
  position: relative; flex: 1; height: 100%; overflow: hidden; cursor: pointer; padding: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lane) 6%, transparent), color-mix(in srgb, var(--lane) 16%, transparent));
  border: none; border-left: 1px solid #ffffff10; border-right: 1px solid #ffffff10;
}
.cc-notes { position: absolute; inset: 0; pointer-events: none; }
.cc-key {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: color-mix(in srgb, var(--lane) 22%, #11142b); border-top: 2px solid var(--lane);
  pointer-events: none;
}
.cc-lane:active .cc-key { background: color-mix(in srgb, var(--lane) 45%, #11142b); }
.cc-lane.hit-ok .cc-key { animation: ccflashok .25s ease; }
.cc-lane.hit-bad .cc-key { animation: ccflashbad .25s ease; }
@keyframes ccflashok { from { background: color-mix(in srgb, var(--lane) 80%, #fff); } }
@keyframes ccflashbad { 0%,100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cc-hitline {
  position: absolute; left: 0; right: 0; top: 80%; height: 4px; transform: translateY(-2px);
  background: linear-gradient(90deg, transparent, #ffffffcc, transparent); pointer-events: none;
  box-shadow: 0 0 12px #fff8; z-index: 2;
}
.cc-note {
  position: absolute; top: 0; left: 50%; width: 76%; max-width: 64px; aspect-ratio: 1.4;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: radial-gradient(circle at 50% 35%, #ffffff33, transparent 65%),
              color-mix(in srgb, var(--c) 70%, #1c2143);
  border: 2px solid var(--c); border-radius: 12px; will-change: transform;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
}
.cc-judge {
  position: absolute; left: 50%; top: 70%; transform: translateX(-50%);
  font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px #000a;
  pointer-events: none; z-index: 3; animation: ccjudge .5s ease forwards; white-space: nowrap;
}
.cc-judge.perfect { color: #5cffa6; }
.cc-judge.miss { color: #ff6b8a; }
@keyframes ccjudge { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -22px); } }

/* Пауза */
.cc-pause-overlay {
  position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,20,.8); border-radius: 18px;
}
.cc-pause-card { text-align: center; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.cc-pause-card h2 { margin: 0; }
.cc-pause-resume, .cc-pause-quit {
  padding: 12px 28px; font-size: 16px; font-weight: 700; cursor: pointer; border-radius: 12px; border: none;
}
.cc-pause-resume { color: #0e1020; background: linear-gradient(135deg, #6df, #9d7bff); }
.cc-pause-quit { color: var(--text); background: #20254a; border: 1px solid #2c3160; }

/* Туториал */
.cc-howto { text-align: center; }
.cc-howto-emoji { font-size: 56px; }
.cc-howto p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 8px 0; }
.cc-howto-keys { color: #6df !important; font-weight: 700; }
.cc-howto-go {
  display: block; width: 100%; margin-top: 12px; padding: 14px; font-size: 17px; font-weight: 700;
  cursor: pointer; color: #0e1020; background: linear-gradient(135deg, #6df, #9d7bff); border: none; border-radius: 12px;
}

/* Результаты */
.cc-results { text-align: center; }
.cc-res-title { font-size: 22px; font-weight: 800; color: #5cffa6; margin-bottom: 8px; }
.cc-res-title.fail { color: #ff6b8a; }
.cc-res-stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.cc-rst { font-size: 40px; }
.cc-rst.on { animation: ccstar .4s cubic-bezier(.2,1.5,.4,1) backwards; }
.cc-rst.on:nth-child(2) { animation-delay: .12s; }
.cc-rst.on:nth-child(3) { animation-delay: .24s; }
@keyframes ccstar { from { transform: scale(0) rotate(-30deg); } }
.cc-res-score { font-size: 34px; font-weight: 800; color: #fff; }
.cc-res-line { font-size: 14px; color: var(--muted); margin-top: 4px; }
.cc-res-reward { font-size: 16px; font-weight: 700; color: #ffd24d; margin-top: 10px; }
.cc-res-badge { display: inline-block; margin-top: 8px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: #0e1020; background: #ffd24d; border-radius: 999px; }
.cc-res-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.cc-res-btn {
  padding: 11px 16px; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--text);
  background: #20254a; border: 1px solid #2c3160; border-radius: 10px;
}
.cc-res-btn.primary { color: #0e1020; background: linear-gradient(135deg, #6df, #9d7bff); border-color: transparent; }

/* Лидерборд */
.cc-leaders { margin-top: 14px; text-align: left; }
.cc-leaders-h { font-size: 13px; font-weight: 700; color: #ffd24d; margin-bottom: 6px; text-align: center; }
.cc-leader { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.cc-leader.me { background: #2a3470; }
.cc-lr-rank { width: 22px; color: var(--muted); font-weight: 700; }
.cc-lr-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-lr-score { font-weight: 700; color: #6df; }

/* Тач: крупные зоны (п. 1.8) и адаптация поля под низкие/ландшафт-экраны */
@media (pointer: coarse) {
  .cc-diff { min-height: 56px; }
  .cc-res-btn { min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cc-field { height: 52vh; }
  .cc-key { font-size: 20px; }
}