/* ROOT: Node City: corner, reveal and flagship section. Self-contained, game palette only. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/local/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/local/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --nc-s {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  /* Logo font: placeholder until the game's font is known. Swap this line (plus an @font-face above)
     and set --nc-logo-cap to the new font's cap height in em; the logo proportions follow. */
  --nc-logo-font: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --nc-logo-weight: 900;
  --nc-logo-cap: 0.716;

  --nc-black: #0B0B0D;
  --nc-amber: #E0A84A;
  --nc-text: #EDE6DA;
  --nc-muted: rgba(237, 230, 218, 0.6);
  --nc-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --nc-z: 100000;
}

/* Logo */

.nc-logo {
  display: inline-flex;
  align-items: last baseline;
  font-family: var(--nc-logo-font);
  font-weight: var(--nc-logo-weight);
  font-size: 72px;
  line-height: 1;
  color: var(--nc-text);
  letter-spacing: 0;
  white-space: nowrap;
}
.nc-logo__oo {
  color: var(--nc-amber);
}
.nc-logo__rule {
  width: 1px;
  height: calc(var(--nc-logo-cap) * 1em);
  margin: 0 0.2em;
  background: var(--nc-amber);
}
/* 0.698 is Plex Mono's cap height, 1.22 its line pitch: NODE + CITY span exactly the ROOT cap height */
.nc-logo__sub {
  display: flex;
  flex-direction: column;
  font-family: var(--nc-mono);
  font-weight: 500;
  font-size: calc(1em * var(--nc-logo-cap) / 1.918);
  line-height: 1.22;
  letter-spacing: 0.04em;
}

/* Fold, shared by the corners and the reveal.
   Default geometry grows from the top-left; the site's burger breakpoint flips it to the top-right. */

.nc-fold-under,
.nc-fold-shade {
  position: absolute;
  left: 0;
  top: 0;
}
.nc-fold-under {
  width: 190px;
  height: 190px;
  overflow: hidden;
  background: var(--nc-black);
  clip-path: polygon(0 0, var(--nc-s) 0, 0 var(--nc-s));
}
.nc-fold-under img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0.4;
}
.nc-fold-shade {
  width: var(--nc-s);
  height: var(--nc-s);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(315deg, transparent 50%, rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 28px));
}
.nc-fold-flap-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4));
}
.nc-fold-flap {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--nc-s);
  height: var(--nc-s);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #fff 50%, #c8c5be calc(50% + 1px), #f4f2ed calc(50% + 7px), #fff calc(50% + 18px), #e7e4dd 100%);
}

/* Under the fold: camera lights and a terminal line */

.nc-cam {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #E04A3A;
  box-shadow: 0 0 6px 1px rgba(224, 74, 58, 0.7);
}
.nc-cam--1 { left: 20px; top: 56px; }
.nc-cam--2 { left: 8px; top: 76px; width: 3px; height: 3px; }
.nc-cam--3 { left: 74px; top: 58px; width: 3px; height: 3px; animation: nc-cam 3s ease-in-out infinite; }
@keyframes nc-cam {
  50% { opacity: 0.15; }
}
.nc-term {
  position: absolute;
  left: 42px;
  top: 30px;
  display: flex;
  align-items: center;
  color: var(--nc-amber);
  font-family: var(--nc-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  white-space: pre;
  transition: left 0.28s ease, top 0.28s ease;
}
.nc-term__prompt {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.28s ease, opacity 0.28s ease;
}
/* The half-block glyph is missing from the Plex Mono subset, so the cursor is drawn at its exact cell shape */
.nc-term__cursor {
  width: 0.3em;
  height: 14px;
  background: var(--nc-amber);
  animation: nc-cursor 1s steps(1) infinite;
}
@keyframes nc-cursor {
  50% { opacity: 0; }
}
.nc-corner--lifted .nc-term,
.nc-corner:focus-visible .nc-term {
  left: 12px;
  top: 12px;
}
.nc-corner--lifted .nc-term__prompt,
.nc-corner:focus-visible .nc-term__prompt {
  max-width: 14em;
  opacity: 1;
}

/* Corner */

.nc-corner {
  --nc-s: 96px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: var(--nc-s);
  height: var(--nc-s);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition: --nc-s 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}
.nc-corner--lifted,
.nc-corner:focus-visible {
  --nc-s: 180px;
}
.nc-corner:focus-visible {
  outline: 2px solid var(--nc-amber);
  outline-offset: -2px;
}
/* Below the corner rather than beside it, where it would land on the menu */
.nc-corner__label {
  position: absolute;
  left: 12px;
  top: 190px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--nc-black);
  color: var(--nc-amber);
  font-family: var(--nc-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.nc-corner:focus-visible .nc-corner__label {
  opacity: 1;
  transform: none;
}
@media (hover: hover) and (min-width: 1200px) {
  .nc-corner:hover {
    --nc-s: 180px;
  }
  .nc-corner:hover .nc-corner__label {
    opacity: 1;
    transform: none;
  }
  .nc-corner:hover .nc-term {
    left: 12px;
    top: 12px;
  }
  .nc-corner:hover .nc-term__prompt {
    max-width: 14em;
    opacity: 1;
  }
}

/* Keep the menu clear of the corner: past the lifted size where the row has room for it,
   otherwise as far as the Russian menu fits (88px free at 1200px). */
@media (min-width: 1200px) {
  .header-one .tmp-mainmenu-nav {
    margin-left: min(80px, max(0px, calc(192px - (100vw - 1140px) / 2 - 8px)));
  }
}
@media (min-width: 1400px) {
  .header-one .tmp-mainmenu-nav {
    margin-left: max(0px, calc(192px - (100vw - 1320px) / 2 - 23px));
  }
}

/* The closing corner: the site's white page shows under it, the flap is the back of the scene */

.nc-corner--back .nc-fold-under {
  background: #fff;
}
.nc-corner--back .nc-fold-flap {
  background: linear-gradient(135deg, #fff 50%, var(--nc-amber) calc(50% + 1px), #1a1a1f calc(50% + 2px), var(--nc-black) 100%);
}

/* Reveal */

.nc-reveal {
  --nc-s: 0px;
  position: fixed;
  inset: 0;
  z-index: var(--nc-z);
}
.nc-reveal[hidden] {
  display: none;
}
.nc-reveal--anim {
  transition: --nc-s 0.7s cubic-bezier(0.45, 0.05, 0.35, 1);
}
.nc-reveal__scene {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--nc-black);
  color: var(--nc-text);
  clip-path: polygon(0 0, var(--nc-s) 0, 0 var(--nc-s));
}
.nc-reveal--open .nc-reveal__scene {
  clip-path: none;
}
.nc-reveal--open .nc-reveal__flap {
  display: none;
}
.nc-reveal--fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nc-reveal--fade.nc-reveal--shown {
  opacity: 1;
}
.nc-reveal--fade .nc-reveal__scene {
  clip-path: none;
}
.nc-reveal--fade .nc-reveal__flap {
  display: none;
}
.nc-reveal__bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 100% 100%;
  border-radius: 0;
}
.nc-reveal__shade {
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 13, 0.72) 0%, rgba(11, 11, 13, 0.35) 42%, rgba(11, 11, 13, 0) 68%);
}
.nc-reveal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100%;
  max-width: 680px;
  padding: 72px 32px 96px clamp(32px, 7vw, 120px);
}
.nc-reveal__tagline {
  margin: 28px 0 0;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.35;
  color: var(--nc-text);
}
.nc-reveal__desc {
  margin: 14px 0 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nc-muted);
}
.nc-reveal__content .nc-btn {
  margin-top: 32px;
}
.nc-reveal__close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(11, 11, 13, 0.55);
  color: var(--nc-text);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nc-reveal__close:hover {
  color: var(--nc-amber);
}
.nc-reveal__close:focus-visible,
.nc-zone a.nc-btn:focus-visible {
  outline: 2px solid var(--nc-amber);
  outline-offset: 3px;
}
.nc-reveal .nc-corner--back {
  position: fixed;
  z-index: 2;
}

html.nc-lock,
html.nc-lock body {
  overflow: hidden;
}

/* Button */

.nc-zone a.nc-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--nc-amber);
  color: var(--nc-black);
  font-family: var(--nc-mono);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.nc-zone a.nc-btn:hover {
  background: #edbd68;
  color: var(--nc-black);
}

/* Section */

/* The white hero lies over the section like a sheet of paper; the lighter top keeps its shadow readable */
.rpp-banner-three-area {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}
.nc-section {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #16161A 0, var(--nc-black) 120px);
  color: var(--nc-text);
}
.nc-section.tmp-section-gap {
  padding-top: 180px;
}
/* The hero ends at 983px on desktop, which would leave a thin dark strip on screens up to 160px taller:
   there it stretches to the full screen height and the section starts below the fold instead. */
@media (min-width: 992px) and (min-height: 850px) and (max-height: 1143px) {
  .rpp-banner-three-area {
    min-height: 100vh;
  }
}
.nc-section__label,
.nc-section__status {
  display: block;
  font-family: var(--nc-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}
.nc-section__label {
  color: var(--nc-amber);
}
.nc-section .nc-section__logo {
  margin: 20px 0 0;
  font-size: inherit;
  line-height: 1;
}
.nc-section .nc-section__desc {
  margin: 28px 0 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--nc-text);
}
.nc-section .nc-section__points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.nc-section .nc-section__points li {
  position: relative;
  margin: 10px 0 0;
  padding: 0 0 0 24px;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nc-text);
  list-style: none;
}
.nc-section__points li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--nc-mono);
  font-weight: 500;
  color: var(--nc-amber);
}
.nc-section__status {
  margin: 28px 0 16px;
  color: var(--nc-muted);
}
.nc-section__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

/* Below the site's burger breakpoint the corner lives top-right */

@media (max-width: 1199.98px) {
  .nc-corner {
    --nc-s: 72px;
    left: auto;
    right: 0;
  }
  .nc-corner--lifted,
  .nc-corner:focus-visible {
    --nc-s: 120px;
  }
  .nc-corner__label {
    display: none;
  }
  .nc-fold-under,
  .nc-fold-shade,
  .nc-fold-flap {
    left: auto;
    right: 0;
  }
  .nc-fold-under {
    clip-path: polygon(calc(100% - var(--nc-s)) 0, 100% var(--nc-s), 100% 0);
  }
  .nc-fold-shade {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 28px));
  }
  .nc-fold-flap-wrap {
    filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, 0.4));
  }
  .nc-fold-flap {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    background: linear-gradient(225deg, #fff 50%, #c8c5be calc(50% + 1px), #f4f2ed calc(50% + 7px), #fff calc(50% + 18px), #e7e4dd 100%);
  }
  .nc-corner--back .nc-fold-flap {
    background: linear-gradient(225deg, #fff 50%, var(--nc-amber) calc(50% + 1px), #1a1a1f calc(50% + 2px), var(--nc-black) 100%);
  }
  .nc-cam--1 { left: auto; right: 14px; top: 40px; }
  .nc-cam--2 { left: auto; right: 6px; top: 56px; }
  .nc-cam--3 { left: auto; right: 62px; top: 42px; }
  .nc-term {
    left: auto;
    right: 30px;
    top: 20px;
    font-size: 9px;
    line-height: 12px;
    transition: right 0.28s ease, top 0.28s ease;
  }
  .nc-term__cursor {
    height: 12px;
  }
  .nc-corner--lifted .nc-term,
  .nc-corner:focus-visible .nc-term {
    left: auto;
    right: 6px;
    top: 8px;
  }
  .nc-reveal__scene {
    clip-path: polygon(calc(100% - var(--nc-s)) 0, 100% var(--nc-s), 100% 0);
  }
  /* The top-right belongs to the corner, so the cross moves to the other side */
  .nc-reveal__close {
    right: auto;
    left: 16px;
    top: 16px;
  }
  .nc-reveal__shade {
    background: linear-gradient(90deg, rgba(11, 11, 13, 0.72) 0%, rgba(11, 11, 13, 0.4) 55%, rgba(11, 11, 13, 0.1) 100%);
  }
}

@media (max-width: 991.98px) {
  .nc-section.tmp-section-gap {
    padding-top: 120px;
  }
}

@media (max-width: 767.98px) {
  .nc-section.tmp-section-gap {
    padding-top: 96px;
  }
  .nc-logo {
    font-size: 52px;
  }
  .nc-reveal__shade {
    background: linear-gradient(180deg, rgba(11, 11, 13, 0.55) 0%, rgba(11, 11, 13, 0.25) 45%, rgba(11, 11, 13, 0) 62%);
  }
  .nc-reveal__content {
    justify-content: flex-start;
    padding: 84px 20px 32px;
  }
  .nc-reveal__tagline {
    margin-top: 20px;
    font-size: 21px;
  }
  .nc-reveal__desc {
    margin-top: 10px;
    font-size: 15px;
  }
  .nc-reveal__content .nc-btn {
    margin-top: 20px;
  }
  .nc-section .nc-section__desc {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-corner,
  .nc-corner__label,
  .nc-term,
  .nc-term__prompt,
  .nc-reveal--anim {
    transition: none;
  }
  .nc-term__cursor,
  .nc-cam--3 {
    animation: none;
  }
}