/* Страница игры (?event=ID) — макет A «Штаб-страница», docs/design/event-card-layouts.html (issue #395).
   Токены и шрифты — из макетов (docs/design/home-shared.css), но объявлены только на .ep,
   чтобы не менять палитру остального сайта. Углы острые (border-radius: 0). */
@import url('../fonts/fonts-new.css');

.ep {
  --bg: #0f100c; --surface: #181913; --surface2: #21221a;
  --line: #34352b; --line-hi: #4d4e3c;
  --text: #ece8dc; --muted: #aaa595;
  --accent: #9bc653; --accent-ink: #12150a; --sand: #d7b657;
  --sans: 'Onest', 'Segoe UI', sans-serif;
  --cond: 'Sofia Sans Extra Condensed', 'Onest', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  container-type: inline-size;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.4 var(--sans);
  min-height: 60vh;
  -webkit-font-smoothing: antialiased;
}
.ep[hidden], .ep [hidden] { display: none !important; }
.ep h1:focus { outline: none; }
.ep button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ep a { color: inherit; }
.ep :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ep .i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; flex-shrink: 0; }
.ep .dim { color: var(--muted); }
.ep .dimv { color: var(--muted); }

/* хлебные крошки */
.ep .crumb { padding: 4px 16px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; }
.ep .crumb a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ep .crumb a:hover { color: var(--text); }

/* атомы */
.ep .tg { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; font: 700 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; background: rgba(155,198,83,.16); color: var(--accent); }
.ep .tg.tag-large { background: rgba(215,182,87,.16); color: var(--sand); }
.ep .tg.tag-night { background: rgba(184,143,219,.16); color: #b88fdb; }
.ep .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; font: 700 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line-hi); background: var(--surface2); color: var(--text); transition: border-color .15s, background .15s; }
.ep .btn:hover { border-color: var(--accent); }
.ep .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ep .btn.pri:hover { background: #b0dc66; }
.ep .btn.ghost { background: transparent; }
.ep .btn.wide { width: 100%; }
.ep .k { font: 700 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ep .big { font: 700 clamp(34px, 8cqw, 64px)/.95 var(--cond); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.ep .price { font: 600 28px/1 var(--mono); letter-spacing: -.03em; color: var(--sand); }
.ep .chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-hi); font-size: 14px; }
.ep .b-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ep .src { font-size: 13px; color: var(--muted); }

/* плашка статуса (отменена / перенесена / состоялась) — классы .fc-status-banner из style.css */
.ep .fc-status-banner { margin: 0; }

/* обложка: размытая копия заполняет поля, сама картинка видна целиком; cover — только для широких баннеров */
.ep .cv { position: relative; overflow: hidden; background: var(--surface2); }
.ep .cv-bg { position: absolute; inset: -24px; background: var(--u) center / cover; filter: blur(22px) brightness(.55) saturate(1.1); }
.ep .cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ep[data-shape=wide] .cv.fill img { object-fit: cover; }
.ep[data-shape=small] .cv img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; } /* мелкую не растягиваем */
.ep .cv-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font: 700 clamp(40px, 12cqw, 120px)/.9 var(--cond); text-transform: uppercase; overflow: hidden; }
.ep .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,16,12,.92), rgba(15,16,12,.1) 65%); }

.ep .lims { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ep .lim { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 14px; background: var(--surface); align-items: baseline; }
.ep .lim b { font: 700 14px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ep .lim.none span { color: var(--muted); }
.ep .lim.hot span { font: 600 15px/1.35 var(--mono); }
@container (max-width: 520px) { .ep .lim { grid-template-columns: 1fr; gap: 4px; } }

/* «ещё игры» */
.ep .mini { display: grid; gap: 8px; }
.ep .mini a { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.ep .mini a:hover { border-color: var(--accent); }
.ep .mini .d { font: 700 22px/1 var(--cond); }
.ep .mini .d small { display: block; white-space: nowrap; font: 500 12px/1.2 var(--mono); color: var(--muted); }
.ep .mini .p { font: 600 15px/1 var(--mono); color: var(--sand); }

/* схема полигона */
.ep .mapimg { display: block; position: relative; aspect-ratio: 2475 / 1732; background: var(--surface2); border: 1px solid var(--line-hi); overflow: hidden; }
.ep .mapimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ep .mapimg span { position: absolute; left: 0; bottom: 0; padding: 8px 12px; font: 600 13px/1 var(--mono); background: rgba(15,16,12,.88); color: var(--text); }
.ep .route { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; background: var(--surface); border: 1px solid var(--line); }
.ep .route div { display: grid; gap: 2px; }
.ep .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ═════ A. Штаб-страница: две колонки + липкая панель записи ═════ */
.ep .a-hero { position: relative; }
.ep .a-hero .cv { height: 240px; border-bottom: 1px solid var(--line); }
.ep .a-hero .shade { display: none; }
.ep[data-shape=wide] .a-hero .cv { height: auto; aspect-ratio: var(--ar); }
.ep .a-title { position: relative; z-index: 2; display: grid; gap: 12px; padding: 18px 16px 0; }
.ep .a-title .row { display: flex; gap: 8px; flex-wrap: wrap; }
.ep .a-wrap { display: grid; gap: 24px; padding: 20px 16px 28px; }
.ep .a-main { display: grid; gap: 28px; min-width: 0; }
.ep .a-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ep .a-facts > div { background: var(--surface); padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.ep .a-facts .v { font: 600 22px/1.1 var(--mono); letter-spacing: -.03em; overflow-wrap: anywhere; }
.ep .a-facts .s { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.ep .a-sec { display: grid; gap: 12px; min-width: 0; }
.ep .a-sec h2 { font: 700 22px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.ep .a-sec p, .ep .ptext { white-space: pre-line; max-width: 70ch; font-size: 15px; overflow-wrap: anywhere; }
.ep .a-side { display: none; }
.ep .a-bottom { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line-hi); }
.ep .a-bottom .price { font-size: 22px; margin-right: auto; }
.ep .a-bottom .bdate { margin-right: auto; display: grid; gap: 2px; white-space: nowrap; }
.ep .a-bottom .bdate b { font: 600 20px/1 var(--mono); letter-spacing: -.04em; }
.ep .a-bottom .bdate small { font: 500 13px/1 var(--mono); color: var(--muted); }
.ep .a-side .panel { position: sticky; top: 76px; padding: 18px; background: var(--surface); border: 1px solid var(--line-hi); display: grid; gap: 14px; }
.ep .panel .price { font-size: 40px; }
.ep .b-org { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); background: var(--bg); text-decoration: none; min-height: 44px; }
.ep .b-org:hover { border-color: var(--accent); }
.ep .b-org .av, .ep .tmedia .av { display: grid; place-items: center; font: 700 22px/1 var(--cond); font-style: normal; color: var(--muted); width: 48px; height: 48px; background: var(--surface2) center / cover; border: 1px solid var(--line-hi); }
.ep .b-org b { font: 700 18px/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; display: block; overflow-wrap: anywhere; }
.ep .b-org span { font-size: 13px; color: var(--muted); }
@container (min-width: 760px) {
  .ep .a-hero .cv { height: 320px; }
  .ep .a-title { padding: 22px 32px 0; }
  .ep .crumb { padding-inline: 32px; }
  .ep[data-shape=wide] .a-hero { height: 380px; display: flex; align-items: flex-end; }
  .ep[data-shape=wide] .a-hero .cv { position: absolute; inset: 0; height: auto; aspect-ratio: auto; border: 0; }
  .ep[data-shape=wide] .a-hero .shade { display: block; }
  .ep[data-shape=wide] .a-title { padding: 28px 32px; }
  .ep .a-wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding: 28px 32px 40px; align-items: start; }
  .ep .a-facts { grid-template-columns: repeat(4, 1fr); }
  .ep .a-side { display: block; }
  .ep .a-bottom { display: none; }
}

/* расширенная раскладка */
.ep .tiles { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ep .tile { background: var(--surface); padding: 14px; display: grid; gap: 6px; align-content: start; text-decoration: none; min-width: 0; }
.ep .tile .tv { font: 700 24px/1.05 var(--cond); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.ep .tile .ts { font-size: 14px; color: var(--muted); }
.ep .tile .tl { font: 600 14px/1.3 var(--mono); color: var(--accent); }
.ep .tile.link { transition: background .15s; }
.ep .tile.link:hover { background: var(--surface2); }
.ep .tile.link .tv { color: var(--accent); }
.ep .tmedia { display: flex; align-items: center; gap: 10px; }
.ep .tmedia .av { width: 40px; height: 40px; flex: none; }
.ep .pl { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; color: var(--muted); }
.ep .pl b { font: 600 22px/1 var(--mono); letter-spacing: -.03em; color: var(--sand); white-space: nowrap; }
.ep .reqreg { margin-top: 4px; padding: 8px 10px; background: var(--sand); color: var(--accent-ink); font: 700 14px/1.25 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.ep .reqreg a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ep .lm { display: flex; gap: 8px; font: 500 13px/1.4 var(--mono); letter-spacing: -.03em; }
.ep .lm i { font-style: normal; color: var(--muted); min-width: 4.6em; }
@container (min-width: 600px) { .ep .tiles { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
@container (min-width: 380px) and (max-width: 599px) { .ep .tiles { grid-template-columns: 1fr 1fr; } .ep .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* табы */
.ep .tabs { display: flex; flex-wrap: wrap; }
.ep .tabs button { flex: 1 1 auto; min-height: 48px; padding: 0 12px; font: 700 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-hi); }
.ep .tabs button:hover { color: var(--text); }
.ep .tabs button[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -3px var(--accent); }
.ep .tpanel { display: grid; gap: 12px; padding-top: 16px; }
.ep .tpanel[hidden] { display: none; }
.ep .tmeta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ep .tmeta a { font: 700 15px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ep .tmeta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ep .ptext a { color: var(--accent); }