@font-face {
  font-family: "Colizeum Brand";
  src: url("/assets/fonts/Colizeum-Brand.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "TT Squares";
  src: url("/assets/fonts/TTSquaresCondensed-Regular.otf") format("opentype");
  font-display: swap;
}

:root {
  --accent: #ffe83d;
  --promo: #b6ff73;
  --ink: #050505;
  --panel: #101010;
  --panel-2: #161616;
  --muted: #929292;
  --white: #f6f6f2;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  color: var(--white);
  font-family: "TT Squares", sans-serif;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.screen {
  position: relative;
  width: 1080px;
  height: 1920px;
  min-height: 1920px;
  flex: 0 0 1080px;
  margin: 0;
  padding: 30px 34px 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(255,255,255,.018) 48% 52%, transparent 53%) 0 0 / 138px 138px,
    radial-gradient(circle at 82% 13%, rgba(255,232,61,.08), transparent 24%),
    radial-gradient(circle at 12% 71%, rgba(255,255,255,.045), transparent 25%),
    #050505;
  display: flex;
  flex-direction: column;
  gap: 14px;
  isolation: isolate;
}

.screen::before,
.screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  border: 32px solid rgba(255,255,255,.018);
  transform: rotate(45deg);
}

.screen::before { left: -250px; top: 490px; }
.screen::after { right: -260px; bottom: 210px; }

.brand-header {
  position: relative;
  height: 126px;
  flex: 0 0 126px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wordmark-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(1px);
}

.wordmark {
  font-family: "Colizeum Brand", sans-serif;
  font-size: 73px;
  line-height: .78;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255,255,255,.1);
}

.venue-status {
  margin-top: 18px;
  padding: 3px 12px 2px;
  color: var(--ink);
  background: var(--accent);
  font-size: 17px;
  line-height: 1;
  letter-spacing: .12em;
}

.edge-symbol {
  position: absolute;
  top: 13px;
  color: var(--accent);
  font-size: 72px;
  line-height: 1;
  opacity: .95;
}

.edge-symbol--left { left: 12px; transform: skewX(-12deg); }
.edge-symbol--right { right: 12px; }

.xo-mark {
  position: absolute;
  right: 86px;
  top: 9px;
  width: 58px;
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  padding: 0 7px;
  border-radius: 50%;
  color: #050505;
  background: var(--accent);
  font-size: 21px;
  transform: rotate(-8deg);
}

.promo {
  --promo-local: var(--promo);
  position: relative;
  flex: 0 0 182px;
  min-height: 182px;
  display: grid;
  grid-template-columns: 212px 260px 1fr;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  background: var(--promo-local);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.promo[hidden] { display: none; }

.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255,255,255,.34), transparent 40%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.025) 14px 16px);
  pointer-events: none;
}

.promo-cut { position: absolute; }

.promo-copy,
.promo-price-wrap,
.promo-main { position: relative; z-index: 1; }

.promo-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 34px;
  border-right: 2px solid rgba(0,0,0,.12);
}

.promo-eyebrow {
  font-size: 25px;
  letter-spacing: .14em;
}

.promo-zone {
  margin-top: 10px;
  font-size: 29px;
  line-height: 1;
}

.promo-price-wrap {
  justify-self: center;
  display: flex;
  align-items: flex-start;
}

.promo-price {
  font-size: 88px;
  line-height: .8;
  letter-spacing: -.05em;
}

.currency {
  margin: 0 0 0 5px;
  font-size: 88px;
  line-height: .8;
}

.promo-main {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
}

.promo-main strong {
  max-width: 390px;
  font-size: 50px;
  line-height: .84;
  font-weight: 400;
}

.promo-main span {
  margin-top: 14px;
  font-size: 25px;
}

.tariff-head {
  flex: 0 0 88px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 5px;
  align-items: stretch;
}

.tariff-heading {
  position: relative;
  padding: 14px 17px 8px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--ink);
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.tariff-heading span { font-size: 35px; }
.tariff-heading small {
  align-self: flex-end;
  font-size: 18px;
  letter-spacing: .06em;
}

.session-headings {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--session-count, 7), minmax(0, 1fr));
  gap: 0;
}

.session-heading {
  min-width: 0;
  padding: 12px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #191919;
  border-top: 3px solid #3a3a3a;
  border-left: 1px solid #292929;
}

.session-heading strong {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}

.session-heading span {
  min-height: 20px;
  margin-top: 8px;
  color: #989898;
  font-family: "TT Squares", sans-serif;
  font-size: 10px;
  line-height: 1.05;
}

.zones {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.zone-card {
  min-height: 0;
  display: grid;
  grid-template-rows: 54px 1fr 1fr;
  overflow: hidden;
  background: linear-gradient(100deg, #171717, #0e0e0e);
  border: 1px solid #282828;
  border-left: 5px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.zone-title {
  min-height: 0;
  display: grid;
  grid-template-columns: 68px 250px 1fr;
  align-items: center;
  border-bottom: 1px solid #2b2b2b;
}

.zone-badge {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--accent);
  font-size: 19px;
}

.zone-name {
  padding-left: 18px;
  color: var(--accent);
  font-size: 31px;
  line-height: 1;
  white-space: nowrap;
}

.zone-spec {
  justify-self: end;
  padding-right: 19px;
  color: #aaa;
  font-family: "TT Squares", sans-serif;
  font-size: 16px;
  letter-spacing: .025em;
  white-space: nowrap;
}

.tariff-row {
  min-height: 0;
  display: grid;
  grid-template-columns: 260px repeat(var(--session-count, 7), minmax(0, 1fr));
  align-items: stretch;
  transition: background-color .25s ease;
}

.tariff-row + .tariff-row { border-top: 1px solid #242424; }

.tariff-row.is-current {
  background: linear-gradient(90deg, rgba(255,232,61,.13), rgba(255,232,61,.035));
}

.day-type {
  display: flex;
  align-items: center;
  padding-left: 18px;
  color: #777;
  font-size: 19px;
}

.tariff-row.is-current .day-type { color: var(--accent); }

.price-cell {
  min-width: 0;
  display: grid;
  place-items: center;
  border-left: 1px solid #292929;
  color: #f2f2ed;
  font-size: 31px;
  line-height: 1;
}

.price-cell::after {
  content: "₽";
  margin-left: 3px;
  color: inherit;
  font-family: "TT Squares", sans-serif;
  font-size: 31px;
  align-self: center;
  grid-column: 2;
  grid-row: 1;
}

.price-cell {
  grid-template-columns: auto auto;
  justify-content: center;
}

.tariff-row.is-current .price-cell { color: var(--accent); }

.footer {
  position: relative;
  flex: 0 0 128px;
  padding: 7px 12px 0;
  border-top: 2px solid var(--accent);
  color: #989898;
  font-family: "TT Squares", sans-serif;
}

.footer p {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.25;
}

.footer-line {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.agreement {
  max-width: 780px;
  color: var(--accent);
  font-family: "TT Squares", sans-serif;
  font-size: 17px;
  letter-spacing: .035em;
}

.clock {
  color: #e8e8e4;
  font-family: "TT Squares", sans-serif;
  font-size: 35px;
  line-height: .8;
}

.connection {
  position: absolute;
  right: 12px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  opacity: .6;
}

.connection i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e85050;
}

.connection.is-online i {
  background: var(--promo);
  box-shadow: 0 0 8px color-mix(in srgb, var(--promo) 60%, transparent);
}