:root {
  --bg: #edeef0;
  --card-radius: 12px;
  --accent: #f5c518;
  --accent-text: #1a1a1a;
  --text: #ffffff;
  --panel-dark: #1b1d21;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 16px 12px 40px;
  background: var(--bg);
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1000px; margin: 0 auto; }
.staleness {
  max-width: 1000px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  background: #e9ebee;
  color: #46505a;
  border: 1px solid #dcdfe3;
}
.staleness--stale {
  background: #fdecea;
  border-color: #f3b4ad;
  color: #8a2018;
  font-weight: 600;
}
.panel {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 4px 4px 12px; flex-wrap: wrap;
}
.panel__title { font-size: 17px; font-weight: 600; margin: 0; }
.panel__meta { font-size: 12px; color: #626d7a; }
.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 176px;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--panel-dark);
  text-decoration: none;
  color: var(--text);
  isolation: isolate;
}
.card__media { position: absolute; inset: 0; z-index: 0; }
.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card__placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #3a3f4b 0%, #23262d 100%);
  display: flex; align-items: center; justify-content: center;
  color: #8f98a5; font-size: 13px; text-align: center; padding: 0 16px;
}
.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.78) 100%);
}
.card__badges { position: absolute; top: 10px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.badge {
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff;
}
.badge--warn { background: #e8443a; }
.card__body {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
}
.card__text { min-width: 0; }
.card__title {
  margin: 0 0 4px;
  font-size: 19px; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  overflow-wrap: anywhere;
}
.card__meta {
  display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
  font-size: 13px; line-height: 1.35; color: #eef0f2;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.card__meta span { overflow-wrap: anywhere; }
.card__meta span + span::before { content: "· "; opacity: .65; }
.card__button {
  flex: 0 0 auto;
  background: var(--accent); color: var(--accent-text);
  font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 8px;
  white-space: nowrap;
}
.empty { padding: 28px 12px; text-align: center; color: #626d7a; font-size: 14px; }
.notes {
  max-width: 1000px; margin: 16px auto 0;
  font-size: 12px; line-height: 1.5; color: #4a545e;
  background: #fff8e1; border: 1px solid #ffe8a3; border-radius: 10px; padding: 12px 14px;
}
.notes ul { margin: 6px 0 0; padding-left: 18px; }
.notes code { font-size: 11px; background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 4px; }

@media (max-width: 480px) {
  body { padding: 8px 8px 32px; }
  .panel { padding: 8px; border-radius: 0; }
  /* Узкий экран: картинка сверху, текст под ней сплошным блоком.
     Ничего не обрезается — ни название, ни дата, ни площадка, ни цена. */
  .card { min-height: 0; }
  .card__media { position: static; height: 132px; }
  .card__scrim { display: none; }
  .card__body {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 10px 12px 12px;
    background: var(--panel-dark);
  }
  .card__title { font-size: 17px; text-shadow: none; }
  .card__meta { flex-direction: column; row-gap: 3px; font-size: 13px; text-shadow: none; }
  .card__meta span + span::before { content: none; }
  .card__button { align-self: flex-end; }
}

/* --- экран одной игры и служебные состояния мини-аппа --- */
.topbar {
  max-width: 1000px; margin: 0 auto 10px;
  display: flex; align-items: center; gap: 10px;
}
.back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #dcdfe3; border-radius: 8px;
  padding: 7px 12px; font-size: 14px; color: #2a5885; text-decoration: none;
}

/* Афиша игры — крупно и во всю ширину карточки. Пропорция исходная (1000×420),
   никакого затемнения: владелец просил именно такую картинку, как было. */
.detail__media {
  position: relative; border-radius: var(--card-radius); overflow: hidden;
  background: var(--panel-dark);
}
.detail__img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1000 / 420; object-fit: cover;
}
.detail__head { min-width: 0; margin-top: 12px; }
.detail__title {
  font-size: 21px; font-weight: 700; margin: 0 0 6px; line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Сведения одной строкой с точками-разделителями: компактно и читаемо. */
.detail__meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px;
  font-size: 14px; line-height: 1.4; color: #2c3338;
}
.detail__meta > span { overflow-wrap: anywhere; }
.detail__meta > span + span:not(.detail__status)::before { content: "· "; color: #818c99; }
.detail__price { font-weight: 600; }
.detail__status {
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  background: #e9f5e9; color: #2c6e2c;
}
.detail__status--warn { background: #fdecea; color: #8a2018; }

/* Цитата с сайта, сразу над кнопкой записи. */
.detail__intro {
  margin: 10px 0 0; padding: 0 0 0 12px;
  border-left: 3px solid var(--accent);
  font-size: 15px; line-height: 1.45; color: #46505a; font-style: italic;
  overflow-wrap: anywhere;
}
.detail__actions { margin-top: 12px; }
.detail__open {
  display: inline-block;
  background: var(--accent); color: var(--accent-text);
  font-size: 16px; font-weight: 600;
  padding: 12px 22px; border-radius: 10px; text-decoration: none;
}
.detail__hint { margin-top: 6px; font-size: 12px; color: #626d7a; }

/* Описание — отдельным блоком ниже. */
.detail__about { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e7e8ec; }
.detail__para {
  margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: #2c3338;
  overflow-wrap: anywhere;
}
.detail__para:last-child { margin-bottom: 0; }

/* Второстепенные характеристики: свёрнуты, данные никуда не делись. */
.detail__more { margin-top: 12px; }
.detail__more-title {
  cursor: pointer; font-size: 14px; color: #2a5885; list-style: none;
  padding: 8px 0;
}
.detail__more-title::-webkit-details-marker { display: none; }
.detail__more-title::before { content: "▸ "; }
.detail__more[open] .detail__more-title::before { content: "▾ "; }
/* Авторский display перебил бы скрытие внутри закрытого <details>, поэтому
   свёрнутое состояние задаётся явно. */
.detail__more:not([open]) .detail__facts { display: none; }
.detail__facts {
  margin: 4px 0 0; padding: 12px 14px;
  background: #f2f3f5; border-radius: 10px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 14px; line-height: 1.4;
}
.detail__fact-label { color: #626d7a; }
.detail__fact-label::after { content: ":"; }
.detail__fact-value { margin: 0; color: #000; overflow-wrap: anywhere; }

/* Подписка на анонсы (Senler): второстепенно, после карточек и после записи. */
.newsletter {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid #dcdfe3; border-radius: 10px;
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
}
.newsletter__text { flex: 1 1 260px; min-width: 0; }
.newsletter__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.newsletter__note { margin: 0; font-size: 14px; line-height: 1.45; color: #46505a; overflow-wrap: anywhere; }
.newsletter__button,
.detail__subscribe {
  display: inline-block; box-sizing: border-box; max-width: 100%;
  /* Жёлтый акцент как цвет текста на белом нечитаем: рамка акцентная, текст тёмный. */
  border: 1.5px solid var(--accent); border-radius: 10px;
  background: transparent; color: #2c3338;
  font-weight: 600; text-decoration: none; text-align: center;
  overflow-wrap: anywhere;
}
.newsletter__button { padding: 9px 16px; font-size: 15px; }
.detail__subscribe { margin-top: 8px; padding: 6px 12px; font-size: 13px; }
.detail__subscribe-row { margin-top: 2px; }

.state { padding: 28px 14px; text-align: center; color: #46505a; font-size: 15px; line-height: 1.5; }
.state strong { display: block; font-size: 17px; color: #000; margin-bottom: 6px; }

/* Невысокое окно VK: поджимаем отступы, но пропорцию афиши не трогаем —
   сплющенная полоска вместо картинки владельцу не нужна. */
@media (min-width: 481px) and (max-height: 760px) {
  body { padding: 6px 12px 24px; }
  .topbar { margin-bottom: 5px; }
  .back { padding: 5px 11px; }
  .panel { padding: 8px; }
  .detail__head { margin-top: 8px; }
  .detail__title { font-size: 19px; margin-bottom: 3px; }
  .detail__intro { margin-top: 7px; font-size: 14px; }
  .detail__actions { margin-top: 8px; }
  .detail__open { padding: 10px 20px; font-size: 15px; }
  .detail__hint { margin-top: 4px; }
}

/* --- страница владельца --- */
.setup { max-width: 760px; margin: 0 auto; }
.setup ol { padding-left: 20px; }
.setup li { margin-bottom: 14px; line-height: 1.55; }
.setup label { display: block; font-size: 13px; color: #46505a; margin: 10px 0 4px; }
.setup input[type=text] {
  width: 100%; padding: 9px 11px; font-size: 15px;
  border: 1px solid #dcdfe3; border-radius: 8px;
}
.setup button {
  margin-top: 10px; padding: 10px 16px; font-size: 15px; font-weight: 600;
  border: 0; border-radius: 8px; background: #4680c2; color: #fff; cursor: pointer;
}
.setup button[disabled] { background: #c4c8cc; cursor: not-allowed; }
.setup .why { font-size: 12px; color: #626d7a; margin-top: 6px; }
.setup__log {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: #f2f3f5; font-size: 13px; line-height: 1.5; white-space: pre-wrap;
  word-break: break-word;
}
.setup__blocked { background: #fdecea; border: 1px solid #f3b4ad; color: #8a2018; }

@media (max-width: 480px) {
  /* Телефон: та же последовательность, картинка чуть выше по пропорции. */
  .detail__img { aspect-ratio: 1000 / 560; }
  .detail__title { font-size: 19px; }
  /* Строка сведений переносится, и точка-разделитель попадала бы в начало
     новой строки. На узком экране просто складываем их столбиком. */
  .detail__meta { flex-direction: column; align-items: flex-start; row-gap: 3px; }
  .detail__meta > span + span:not(.detail__status)::before { content: none; }
  .detail__meta { font-size: 14px; }
  .detail__open { display: block; text-align: center; }
  .newsletter { padding: 12px; }
  .newsletter__button { display: block; width: 100%; }
  .detail__intro { font-size: 14px; padding-left: 10px; }
  .detail__facts { grid-template-columns: 1fr; gap: 0; padding: 10px 12px; font-size: 13px; }
  .detail__fact-label { margin-top: 6px; }
  .detail__facts > .detail__fact-label:first-child { margin-top: 0; }
  .detail__para { font-size: 14px; line-height: 1.5; }
}

/* Тёмная тема: data-theme ставит app.js по VKWebAppUpdateConfig или
   prefers-color-scheme. Баннеры и карточки не трогаем — только фон и текст. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #19191a; color: #e1e3e6; }
html[data-theme="dark"] .panel { background: #232324; box-shadow: none; }
html[data-theme="dark"] .panel__title,
html[data-theme="dark"] .detail__title,
html[data-theme="dark"] .state strong,
html[data-theme="dark"] .detail__fact-value { color: #e1e3e6; }
html[data-theme="dark"] .detail__meta,
html[data-theme="dark"] .detail__para { color: #c4c8cc; }
html[data-theme="dark"] .detail__intro,
html[data-theme="dark"] .state,
html[data-theme="dark"] .detail__hint,
html[data-theme="dark"] .detail__fact-label { color: #939aa2; }
html[data-theme="dark"] .back { background: #2c2d2e; border-color: #3a3b3c; color: #71aaeb; }
html[data-theme="dark"] .detail__more-title { color: #71aaeb; }
html[data-theme="dark"] .detail__facts { background: #2c2d2e; }
html[data-theme="dark"] .newsletter { border-color: #3a3b3c; }
html[data-theme="dark"] .newsletter__title { color: #e1e3e6; }
html[data-theme="dark"] .newsletter__note { color: #939aa2; }
html[data-theme="dark"] .newsletter__button,
html[data-theme="dark"] .detail__subscribe { color: #e1e3e6; }

/* Сохраняем широкие баннеры. Фон только внутри приложения. */
body, html[data-theme="dark"] body { background:#33004c; }
.afisha, html[data-theme="dark"] .afisha { background:#450366; padding:18px; border-radius:24px; }
.afisha .panel__head {padding:2px 2px 18px;}
.afisha .panel__title {color:white;font-size:24px;}
.afisha .panel__meta {color:#dfbce9;}
.afisha .cards {display:flex;flex-direction:column;gap:16px;}
.afisha .card {min-height:240px;border-radius:18px;}
.afisha .card__scrim {background:linear-gradient(180deg,transparent 15%,rgba(24,3,35,.35) 40%,rgba(24,3,35,.94) 100%);}
.afisha .card__body {padding:20px;gap:24px;align-items:flex-end;}
.afisha .card__title {font-size:23px;line-height:1.25;margin:0 0 8px;}
.afisha .card__description {font-size:14px;line-height:1.4;margin:0 0 10px;color:#eee2f2;max-width:680px;}
.afisha .card__meta {font-size:14px;gap:6px 14px;color:#fff;}
.afisha .card__price {font-weight:700;}
.afisha .card__actions {display:flex;flex-direction:column;gap:8px;flex:0 0 156px;}
.afisha .card__button {position:relative;display:block;text-align:center;border-radius:999px;background:#ffdf20;color:#25152d;padding:13px 18px;min-height:46px;text-decoration:none;}
.afisha .card__button span {position:relative;z-index:1;}
.afisha .card__details {display:block;text-align:center;color:#fff;font-size:14px;min-height:32px;padding:7px;text-decoration:underline;text-underline-offset:3px;}
.afisha .badge {padding:7px 10px;background:rgba(35,4,47,.85);}
.afisha a:focus-visible {outline:3px solid white;outline-offset:3px;}
.afisha .newsletter {background:#f7f1fc;border:0;border-radius:18px;margin-top:22px;}
.afisha .state, html[data-theme="dark"] .afisha .state {color:#eee2f2;}
.afisha .newsletter__button:focus-visible {outline-color:#851caa;}
.afisha .newsletter__title {color:#2d123e;}
.afisha .newsletter__note {color:#65516d;}
.afisha .newsletter__button {background:#521470;color:white;border-radius:999px;}
@media(max-width:600px) {
 .afisha {padding:10px;} .afisha .panel__title {font-size:21px;}
 .afisha .card__media {height:160px;position:static;}
 .afisha .card__scrim {display:none;}
 .afisha .card__body {background:#26083e;padding:16px;gap:14px;align-items:stretch;flex-direction:column;}
 .afisha .card__title {font-size:20px;}
 .afisha .card__actions {flex:auto;flex-direction:row;align-items:center;}
 .afisha .card__button {flex:1;align-self:auto;}
 .afisha .card__details {padding:12px;}
}
/* Страница игры: одна светлая поверхность в обеих темах VK. */
.detail, html[data-theme="dark"] .detail {background:#f7f1fc;color:#2d123e;border-radius:20px;padding:10px;}
.detail__media {border-radius:14px;}
.detail__head {padding:4px 10px 0;}
.detail .detail__title {color:#2d123e;font-size:23px;line-height:1.2;margin-bottom:8px;}
.detail .detail__meta {color:#514459;gap:6px 12px;font-size:14px;}
.detail .detail__intro {color:#65516d;border-color:#e60045;font-style:normal;line-height:1.4;}
.detail .detail__open {background:#e60045;color:#fff;border-radius:999px;min-height:44px;text-align:center;}
.detail .detail__hint {color:#75657d;}
.detail .detail__subscribe {border-color:#d4bcdf;color:#63277d;border-radius:999px;min-height:36px;padding:8px 16px;margin-top:4px;}
.detail .detail__about {padding:18px 10px 0;margin-top:18px;border-color:#ded0e9;}
.detail .detail__para {color:#493c50;font-size:15px;line-height:1.6;}
.detail .detail__more {padding:0 10px 8px;}
.detail .detail__more-title {color:#63277d;min-height:44px;padding-top:14px;}
.detail .detail__facts {background:#eee0f6;}
.detail .detail__fact-label {color:#75657d;}
.detail .detail__fact-value {color:#2d123e;}
html[data-theme="dark"] .detail .detail__title, html[data-theme="dark"] .detail .detail__fact-value {color:#2d123e;}
html[data-theme="dark"] .detail .detail__meta, html[data-theme="dark"] .detail .detail__para {color:#493c50;}
html[data-theme="dark"] .detail .detail__intro, html[data-theme="dark"] .detail .detail__hint, html[data-theme="dark"] .detail .detail__fact-label {color:#65516d;}
html[data-theme="dark"] .detail .detail__subscribe, html[data-theme="dark"] .detail .detail__more-title {color:#63277d;}
html[data-theme="dark"] .detail .detail__facts {background:#eee0f6;}
html[data-theme="dark"] .afisha .newsletter__title {color:#2d123e;}
html[data-theme="dark"] .afisha .newsletter__note {color:#65516d;}
.back, html[data-theme="dark"] .back {background:#521470;color:#fff;border:1px solid #75438d;border-radius:999px;}
.detail a:focus-visible, .detail summary:focus-visible {outline:3px solid #851caa;outline-offset:3px;}
@media(min-width:481px) and (max-height:760px) {
 .detail .detail__head {padding:0 4px;}
 .detail .detail__title {font-size:20px;margin-bottom:4px;}
 .detail .detail__intro {font-size:14px;line-height:1.3;margin-top:6px;}
 .detail .detail__actions {margin-top:7px;}
}
@media(max-width:480px) {
 .detail .detail__head {padding:8px 6px 0;}
 .detail .detail__title {font-size:22px;}
 .detail .detail__open {width:100%;}
 .detail .detail__subscribe {display:block;width:100%;}
}
/* Мобильный клиент VK показывает приложение на весь экран: сверху строка
   состояния телефона, снизу полоска «домой». Отступы — из безопасной зоны
   (работает вместе с viewport-fit=cover); вне VK и на компьютере они нулевые. */
:root {
 --safe-top:env(safe-area-inset-top, 0px); --safe-right:env(safe-area-inset-right, 0px);
 --safe-bottom:env(safe-area-inset-bottom, 0px); --safe-left:env(safe-area-inset-left, 0px);
}
html {padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);}
/* Справа вверху клиент VK рисует поверх приложения капсулу «⋯ ✕» (около 90 px).
   Заголовок списка под неё не заходит; «← Все игры» стоит слева и её не задевает. */
html.vk-mobile .afisha .panel__head {padding-right:88px;}