/* Оболочка: слой сцен поверх холста ядра. Все размеры — в точках холста (--px ставит ядро, см. core.css). */
.sh-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

/* ---- Картинка или серая заглушка с именем файла ---- */
.sh-sprite { position: relative; flex: none; }
.sh-sprite > img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
.sh-missing {
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  background: #8a8a8a;
  border: var(--px) solid #3c3c3c;
}
.sh-missing.alpha { background: rgba(138, 138, 138, 0.4); } /* картинка с прозрачным фоном — видно, что под ней */
.sh-missing.at-top { align-items: flex-start; padding-top: calc(var(--px) * 36); }
.sh-missing.at-bottom { align-items: flex-end; padding-bottom: calc(var(--px) * 20); }
.sh-missing-label {
  padding: 0 calc(var(--px) * 2);
  color: var(--text);
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
  text-shadow: var(--px) var(--px) 0 var(--ink);
}
.sh-bg { position: absolute; left: 0; top: 0; }

/* Портрет друга: рамка снаружи, картинка 1:1 */
.sh-portrait {
  flex: none;
  box-sizing: content-box;
  line-height: 0;
  border: calc(var(--px) * 2) solid #000;
  outline: var(--px) solid rgba(255, 180, 58, 0.55);
  background: var(--dark);
}

/* ---- Затемнение, подпись трека, пауза ---- */
.sh-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade, 0.25s) linear;
}
.sh-fade.on { opacity: 1; }
.sh-fade.busy { pointer-events: auto; }

.sh-tracklabel {
  position: absolute;
  left: calc(var(--px) * 4);
  top: calc(var(--px) * 3);
  color: var(--muted);
  opacity: 0.85;
  pointer-events: none;
  text-shadow: var(--px) var(--px) 0 var(--ink);
}

/* Подсказка внизу экрана */
.sh-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--px) * 6);
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 24);
  color: var(--text);
  pointer-events: none;
  text-shadow:
    var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink);
}

.sh-gap { margin-top: calc(var(--px) * 12); }
.sh-blink { color: var(--accent); animation: sh-blink 1.1s linear infinite; }
@keyframes sh-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.25; }
}

/* ---- Главное меню ---- */
/* название игры: первая строка помельче, вторая — крупно, с объёмной тенью; буквы — .sh-letters */
.sh-logo {
  margin: calc(var(--px) * 2) 0 calc(var(--px) * 16);
  white-space: nowrap;
  line-height: 1.3;
}
.sh-logo-top {
  font-size: calc(var(--px) * 16);
  color: var(--text);
  letter-spacing: calc(var(--px) * 6);
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 #000;
}
.sh-logo-main {
  margin-top: calc(var(--px) * 4);
  font-size: calc(var(--px) * 24);
  color: var(--best);
  text-shadow:
    var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--accent-dark),
    calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--accent-dark),
    calc(var(--px) * 4) calc(var(--px) * 4) 0 #000;
}
.core-btn.sh-mode { opacity: 0.6; }
.core-btn.sh-mode.on {
  opacity: 1;
  background: var(--best);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--accent-dark), 0 calc(var(--px) * 2) 0 #000;
}

/* ---- «Соревнование»: вкладки игр и турнирная таблица ---- */
.sh-tabs { display: flex; justify-content: center; gap: calc(var(--px) * 6); }
/* вкладка: портрет и имя друга; выбранная — светлая, как режим в меню */
.core-btn.sh-tab {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 6);
  min-height: calc(var(--px) * 46);
  padding: calc(var(--px) * 4) calc(var(--px) * 8) calc(var(--px) * 4) calc(var(--px) * 4);
  opacity: 0.6;
}
.core-btn.sh-tab.on {
  opacity: 1;
  background: var(--best);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--accent-dark), 0 calc(var(--px) * 2) 0 #000;
}
.core-btn.sh-tab:not(:has(.sh-portrait)) { padding-left: calc(var(--px) * 8); } /* «История» — без портрета */
.sh-board-title { margin-top: calc(var(--px) * 8); color: var(--accent); }
/* таблица — по центру и одной высоты, пока грузится и когда пустая: кнопки не прыгают */
.core-panel.wide .core-board { max-width: calc(var(--px) * 360); min-height: calc(var(--px) * 148); margin-left: auto; margin-right: auto; }

/* ---- Заставка мини-игры ---- */
.sh-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 20);
  padding: calc(var(--px) * 16) calc(var(--px) * 40);
  cursor: pointer;
}
.sh-intro .core-head-text { max-width: calc(var(--px) * 440); }
.sh-goal { line-height: 1.7; }
.sh-back { position: absolute; left: calc(var(--px) * 8); bottom: calc(var(--px) * 8); }
.sh-skip { position: absolute; right: calc(var(--px) * 8); bottom: calc(var(--px) * 8); } /* прелюдия на телефоне */

/* ---- Промежуточный итог и финал ---- */
.sh-phrase { margin: calc(var(--px) * 2) 0 calc(var(--px) * 6); line-height: 1.7; }
.sh-gamelines { color: var(--muted); line-height: 1.8; margin-bottom: calc(var(--px) * 6); }
.sh-scoreline { margin-top: calc(var(--px) * 4); }
.sh-scoreline b { font-weight: normal; color: var(--accent); }
.sh-scoreline.sh-day { font-size: calc(var(--px) * 16); line-height: 1.4; margin-top: calc(var(--px) * 8); }
.sh-count { color: var(--best); }
.sh-finale-lines { color: var(--muted); line-height: 1.8; margin-bottom: calc(var(--px) * 8); }

/* ---- Прелюдия ---- */
.sh-frames, .sh-frame { position: absolute; inset: 0; }
.sh-frame { animation: sh-fadein 0.6s linear both; }
@keyframes sh-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* свет из окна: слой поверх кадра, яркость меняет код; пылинки рисуются на своём холсте */
.sh-light { mix-blend-mode: screen; opacity: 0; }
.sh-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* уведомления от друзей поверх кадра: столбиком, по одному, выезжают слева */
.sh-pushes {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 6);
}
.sh-notify.sh-push {
  position: static;
  width: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  transition: none;
  animation: sh-push 0.3s ease-out both;
}
@keyframes sh-push {
  from { opacity: 0; transform: translateX(calc(var(--px) * -24)); }
  to { opacity: 1; transform: none; }
}
.sh-caption {
  position: absolute;
  left: 50%;
  bottom: calc(var(--px) * 26);
  max-width: calc(var(--px) * 576);
  transform: translateX(-50%); /* плашка по длине фразы, по центру */
  padding: calc(var(--px) * 8) calc(var(--px) * 12);
  font-size: calc(var(--px) * 16);
  line-height: 1.5;
  text-align: center;
  color: var(--accent);
  background: rgba(27, 23, 32, 0.85);
  border: calc(var(--px) * 2) solid #000;
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 #000;
  animation: sh-fadein 0.8s 0.4s linear both;
}

/* ---- Поездка ---- */
.sh-layer { position: absolute; left: 0; top: 0; display: flex; will-change: transform; }
.sh-car { position: absolute; }
.sh-car > .sh-sprite { position: absolute; left: 0; top: 0; } /* колёса двигает код */
.sh-tint { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; }
.sh-notify {
  position: absolute;
  top: calc(var(--px) * 18);
  left: 50%;
  width: calc(var(--px) * 300);
  margin-left: calc(var(--px) * -150);
  display: flex;
  gap: calc(var(--px) * 8);
  align-items: flex-start;
  padding: calc(var(--px) * 6);
  background: rgba(27, 23, 32, 0.92);
  border: calc(var(--px) * 2) solid #000;
  outline: var(--px) solid rgba(255, 180, 58, 0.55);
  opacity: 0;
  transform: translateY(calc(var(--px) * -60));
  transition: transform 0.35s ease-out, opacity 0.35s;
}
.sh-notify.show { opacity: 1; transform: none; }
.sh-notify-text { line-height: 1.6; }
.sh-notify-name { color: var(--accent); }

/* ---- Финал ---- */
/* надпись финала сверху кадра */
.sh-ftitle {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--px) * 12);
  text-align: center;
  white-space: nowrap;
  font-size: calc(var(--px) * 16);
  color: var(--best);
  pointer-events: none;
  text-shadow:
    var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 #000;
}
/* буквы надписей (Shell.letters): падают сверху, потом бегут волной — и в финале, и в меню */
.sh-letters span {
  display: inline-block;
  animation: sh-drop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both, sh-wave 1.8s ease-in-out infinite;
}
@keyframes sh-drop {
  from { opacity: 0; transform: translateY(calc(var(--px) * -40)) scale(1.6); }
  to { opacity: 1; transform: none; }
}
@keyframes sh-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--px) * -3)); color: var(--text); }
}
/* луч на говорящего: прозрачный круг с тенью на весь кадр, края размыты */
.sh-spot {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--px) * 700) rgba(10, 8, 16, 0.55);
  filter: blur(calc(var(--px) * 6));
  pointer-events: none;
  transition: left 0.6s ease, top 0.6s ease, width 0.6s ease, height 0.6s ease, opacity 0.4s;
}
.sh-spot.off { opacity: 0; }
/* карточка пожелания внизу по центру */
.sh-wish-slot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--px) * 10);
  width: calc(var(--px) * 400);
  transform: translateX(-50%);
}
.sh-notify.sh-wish {
  position: static;
  width: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  transition: none;
  animation: sh-wish 0.35s ease-out both;
}
@keyframes sh-wish {
  from { opacity: 0; transform: translateY(calc(var(--px) * 12)); }
  to { opacity: 1; transform: none; }
}