/* HYPERNIX — DECK, for the website.
 *
 * The launcher was rebuilt around one vocabulary — a token set, a radius scale,
 * depth instead of hairlines, and a colour per section — and the website was not.
 * Three pages ended up as three products: the hub is a marketing landing page
 * with a video hero and a pixel-art wordmark, Studio is IDE chrome with native
 * OS selects, and Community has its own header, its own cards and a Unicode
 * lightning glyph where the logo should be. Between them they load eleven
 * stylesheets and share almost nothing.
 *
 * This sheet is the same system as HQLauncher/renderer/css/hypernix-deck.css and
 * hypernix-aurora.css, deliberately using the identical token names, so a player
 * moving from the launcher to the site is looking at one product. It loads LAST
 * on every page, so the sheets underneath keep supplying structure — grids,
 * component layout, the Studio editor — and this one decides what they look
 * like. Nothing below has to be deleted for it to work.
 *
 * Two house rules carried over from the launcher:
 *   1. Every warm colour derives from --section, so a page is tinted by where
 *      you are rather than by one brand yellow everywhere.
 *   2. The mark is the twin strike, at every size, on every page.
 */

:root {
  --deck-bar: 64px;
  --deck-pad: 28px;
  --deck-gap: 18px;

  --deck-r: 12px;
  --deck-r-lg: 18px;
  --deck-r-pill: 999px;

  --deck-lift-1: 0 1px 0 rgba(255,255,255,.055) inset, 0 6px 18px -8px rgba(0,0,0,.75);
  --deck-lift-2: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 44px -16px rgba(0,0,0,.85);
  --deck-lift-3: 0 1px 0 rgba(255,255,255,.1) inset, 0 32px 70px -22px rgba(0,0,0,.9);

  --deck-ink: #f5f5ef;
  --deck-dim: color-mix(in srgb, #f5f5ef 48%, transparent);
  --deck-line: color-mix(in srgb, #f5f5ef 7%, transparent);
  --deck-surface: color-mix(in srgb, #f5f5ef 4%, transparent);
  --deck-surface-lit: color-mix(in srgb, #f5f5ef 7.5%, transparent);
  --deck-mark: color-mix(in srgb, #f5f5ef 12%, transparent);
  --deck-mark-line: color-mix(in srgb, #f5f5ef 15%, transparent);

  --deck-black: #050604;
  --deck-brand: #f5c400;
  --section: var(--deck-brand);

  --deck-spring: cubic-bezier(.2,.9,.24,1);
  --deck-spring-out: cubic-bezier(.34,1.4,.5,1);
}

/* The same five hues the launcher gives its sections, muted the same way, so
   Places is the same colour in both programs. Keyed off the hub's own view
   attribute and off the page class everywhere else. */
body:has(.app-view.active[data-view="places"]) { --section: #8b7bc4; }
body:has(.app-view.active[data-view="inventory"]) { --section: #4fa9b0; }
body:has(.app-view.active[data-view="friends"]) { --section: #63ab77; }
body:has(.app-view.active[data-view="profile"]) { --section: #b083b2; }
body:has(.app-view.active[data-view="plans"]) { --section: #d09a4e; }
body.page-community { --section: #c47a86; }
body.page-studio, .studio-shell { --section: #8b7bc4; }

/* Derived tints are declared on body, not :root. A custom property is
   substituted where it is DECLARED, so writing these beside --section above
   would freeze them at the brand yellow and no section would ever recolour —
   the exact bug that kept every soft fill in the launcher yellow. */
body {
  --section-soft: color-mix(in srgb, var(--section) 13%, transparent);
  --section-line: color-mix(in srgb, var(--section) 36%, transparent);
  --deck-line-lit: color-mix(in srgb, var(--section) 42%, transparent);
}

/* --- Page ----------------------------------------------------------------- */

body {
  background-color: var(--deck-black) !important;
  color: var(--deck-ink);
}

/* --- The mark ------------------------------------------------------------- */
/* One drawing, everywhere. It used to be a 2.3 MB pixel-art PNG on the hub, a
   different lockup in Studio and the Unicode character U+03DF in Community. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-bolt { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--deck-brand); }
.brand-word, .brand > span:not(.brand-bolt) {
  font: 750 13px/1 var(--font-display, "Segoe UI", system-ui, sans-serif);
  letter-spacing: .3em; text-indent: .3em; color: var(--deck-ink);
}

/* --- Top bar -------------------------------------------------------------- */

.site-header, .community-topbar {
  display: flex; align-items: center; gap: 22px;
  height: var(--deck-bar); min-height: var(--deck-bar);
  padding: 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--deck-line) !important;
  background-color: color-mix(in srgb, var(--deck-black) 88%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: none !important;
}

.site-nav {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  height: 100%;
  border: 0 !important; background: none !important; padding: 0 !important;
}
.site-nav .nav-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px !important;
  border: 0 !important; border-radius: var(--deck-r-pill) !important;
  background: none !important; box-shadow: none !important;
  color: var(--deck-dim) !important;
  font: 640 12.5px/1 var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  cursor: pointer;
  transition: color .18s ease, background-color .2s ease;
}
.site-nav .nav-link svg { width: 15px; height: 15px; opacity: .85; }
.site-nav .nav-link:hover { color: var(--deck-ink) !important; }
/* Neutral, not the section colour: the row of five sits under five labels that
   each belong to a different section, so tinting the pill means a yellow slab
   under a green Friends. */
.site-nav .nav-link.active {
  color: var(--section) !important;
  background-color: var(--deck-mark) !important;
  box-shadow: 0 0 0 1px var(--deck-mark-line) !important;
}
.site-nav .nav-link.active svg { color: var(--section); opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-actions .coin-pill, .header-actions .lang-button, .header-actions .user-pill,
.community-topbar a:not(.brand) {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px !important;
  border: 0 !important; border-radius: var(--deck-r-pill) !important;
  background-color: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
  color: var(--deck-dim) !important;
  font: 640 12px var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.header-actions .coin-pill:hover, .header-actions .lang-button:hover,
.header-actions .user-pill:hover, .community-topbar a:not(.brand):hover {
  color: var(--deck-ink) !important; background-color: var(--deck-surface-lit) !important;
}
.header-actions .user-pill { color: var(--deck-ink) !important; }
.header-actions .user-pill .avatar, .header-actions .user-pill img {
  width: 22px; height: 22px; border-radius: 6px; image-rendering: pixelated;
}
.header-actions .coin-pill img { width: 16px; height: 16px; }
.header-actions .lang-button { padding: 0 10px !important; }

/* --- Buttons -------------------------------------------------------------- */

.btn, button.btn, .filter, .community-topbar .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border: 0 !important; border-radius: var(--deck-r-pill) !important;
  background-color: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
  color: var(--deck-dim) !important;
  font: 640 12.5px var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, translate .26s var(--deck-spring-out), scale .14s ease;
}
.btn:hover, .filter:hover { color: var(--deck-ink) !important; background-color: var(--deck-surface-lit) !important; }
.btn:active, .filter:active { scale: .97; }
.btn svg { width: 15px; height: 15px; }

/* The main action is the brand's colour, not the section's.
 *
 * Section hue is a wayfinding device — it tells you which part of the platform
 * you are standing in. Painting the single largest solid shape on the screen
 * with it made the hue the loudest thing instead of a hint, and put «+ Новый
 * пост» in rose and «Выбрать» in teal on a product whose colour is gold. Both
 * read as mistakes rather than as signals.
 *
 * So the hue keeps everything it was good at — borders, chips, eyebrows, stat
 * figures, progress — and gives up the primary button. To go back to a
 * per-section fill, put var(--section) back in place of var(--accent) here.
 */
.btn-primary, button.btn-primary, .button.primary, #catalogCreate, #homeCreate {
  background-color: var(--accent, #f5c400) !important;
  color: #0b0c08 !important;
  box-shadow: 0 10px 26px -12px var(--accent, #f5c400) !important;
  font-weight: 700 !important;
}
.btn-primary:hover, .button.primary:hover {
  translate: 0 -2px;
  box-shadow: 0 16px 34px -12px var(--accent, #f5c400) !important;
  color: #0b0c08 !important;
  background-color: var(--accent, #f5c400) !important;
}
.btn-icon { width: 40px; padding: 0 !important; }
.btn-quiet { background: none !important; box-shadow: none !important; }
.filter.active, .filter[aria-selected="true"] {
  background-color: var(--section-soft) !important; color: var(--section) !important;
  box-shadow: 0 0 0 1px var(--section-line) !important;
}

/* --- Surfaces ------------------------------------------------------------- */

.panel, .metric, .place-card, .rank-card, .feature-large, .feature-stack > article,
.community-card, .post-card, .side-card, .checkout-receipt, .plan-card, .store-card {
  border: 0 !important; border-radius: var(--deck-r-lg) !important;
  background-color: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
  transition: box-shadow .32s var(--deck-spring), translate .32s var(--deck-spring),
              background-color .24s ease;
}
.place-card:hover, .store-card:hover, .plan-card:hover, .post-card:hover, .community-card:hover {
  translate: 0 -3px;
  background-color: var(--deck-surface-lit) !important;
  box-shadow: var(--deck-lift-2), 0 0 0 1px var(--section-line),
              0 22px 48px -26px var(--section) !important;
}

/* --- Fields --------------------------------------------------------------- */

.search, .friend-search, input[type="text"], input[type="search"], input[type="email"],
textarea, select, .catalog-tools label {
  border: 0 !important; border-radius: var(--deck-r) !important;
  background-color: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
  color: var(--deck-ink) !important;
  font: 13px var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
}
.search input, .friend-search input, .catalog-tools label input {
  border: 0 !important; background: none !important; box-shadow: none !important;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--section-line), var(--deck-lift-1) !important;
}

/* --- Type ----------------------------------------------------------------- */
/* The hub set its hero at 60px and Community at 44px while the launcher's page
   heading is 30px. One scale, so the two stop looking like different sites. */
.eyebrow, .section-title .eyebrow, .chip {
  color: var(--deck-dim) !important;
  font: 620 10px var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
}
.eyebrow::before { display: none !important; }
h1, .page-head h1, .catalog-hero h1 {
  margin: 0 !important;
  font: 700 clamp(26px, 2.4vw, 34px)/1.1 var(--font-display, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: -.02em !important; color: var(--deck-ink) !important;
  text-transform: none !important;
}
h2, .section-title h2 {
  margin: 0 !important;
  font: 700 clamp(18px, 1.5vw, 21px)/1.2 var(--font-display, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: -.015em !important; color: var(--deck-ink) !important;
  text-transform: none !important;
}
h3 { font-weight: 650 !important; letter-spacing: -.01em !important; text-transform: none !important; }
.section-title { align-items: baseline; gap: 18px; margin-bottom: 14px !important; }

/* --- Home: a band with one decision, not a poster --------------------------
   The hero was a full-bleed autoplaying video behind a three-line slogan and a
   60px heading — a page about the product rather than a page you use. It becomes
   the launcher's own band: one line saying where you are, one button saying what
   to do next. The picture goes; nothing on it was information. */
.home-hero, .home-hero.portal-lobby {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 0 !important; height: auto !important;
  padding: 26px 28px !important;
  border: 0 !important; border-radius: var(--deck-r-lg) !important;
  background: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
  overflow: hidden;
}
.home-hero video, .home-hero .fallback, .home-hero .hero-index,
.home-hero picture, .home-hero > img { display: none !important; }
.hero-copy { grid-column: 1; display: grid; gap: 10px; max-width: 620px; }
.hero-copy h1 { font-size: clamp(28px, 2.6vw, 36px) !important; }
.hero-copy p {
  margin: 0 !important; color: var(--deck-dim) !important;
  font: 13px/1.6 var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
}
.hero-actions { display: flex; gap: 10px; margin-top: 6px; }
.portal-home-model { grid-column: 2; }
.portal-home-session {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px;
  margin-top: 4px; padding-top: 16px;
  border-top: 1px solid var(--deck-line) !important;
  background: none !important;
}

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.metric { padding: 16px 18px !important; }
.metric strong {
  display: block; font: 300 30px/1 var(--font-display, "Segoe UI", system-ui, sans-serif);
  letter-spacing: -.03em; color: var(--deck-ink);
}
.metric small, .metric p {
  color: var(--deck-dim) !important;
  font: 11px/1.5 var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: .04em;
}

/* --- Community ------------------------------------------------------------ */
/* Its headline was set half in the accent as a second colour, which is the one
   thing the launcher never does: colour marks where you are, not which words are
   important. */
.community-hero, .community-topbar + * { border-radius: var(--deck-r-lg) !important; }
/* Half the headline was set in the accent as a second colour. The launcher never
   does that: colour says where you are, not which words matter. */
:root .community-hero h2 em, :root .community-hero h1 em,
:root .community-hero h2 span, :root .accent {
  color: var(--deck-ink) !important; font-style: normal !important;
}
:root .community-topbar .topbar-copy h1 {
  font-size: 15px !important; font-weight: 640 !important; letter-spacing: 0 !important;
}
:root .community-topbar .topbar-copy .eyebrow { display: none !important; }
:root .hero-stats strong { color: var(--section) !important; }

/* --- Studio ----------------------------------------------------------------
   The editor's own layout is left alone — 788 rules of panel geometry that work
   — but its chrome spoke a different language from everything else: native OS
   dropdowns, a green DEV badge, a red counter, and panel headings three times
   the size of the launcher's. */

/* A native <select> draws the operating system's widget: white on Windows
   whatever the theme, its own font, its own radius. It was the one control on
   the screen that visibly belonged to another program — the same fix the
   launcher's version picker got. */
:root .studio-app select, :root .page-studio select {
  appearance: none; -webkit-appearance: none;
  padding: 0 30px 0 12px !important;
  min-height: 32px;
  border: 0 !important; border-radius: var(--deck-r) !important;
  background-color: var(--deck-surface) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--deck-dim) 50%),
                    linear-gradient(135deg, var(--deck-dim) 50%, transparent 50%) !important;
  background-position: right 15px center, right 10px center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  box-shadow: var(--deck-lift-1) !important;
  color: var(--deck-ink) !important;
  font: 640 12px var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
}
:root .studio-app select:focus-visible { box-shadow: 0 0 0 1px var(--section-line), var(--deck-lift-1) !important; }
/* The dropdown list itself is drawn by the OS; this is the one part of it a page
   is allowed to colour. */
:root .studio-app select option { background-color: #14150f; color: var(--deck-ink); }

/* A green badge and a red counter, neither of which is a colour this product
   uses anywhere else. */
:root .environment-badge, :root .count-badge {
  border: 0 !important; border-radius: var(--deck-r-pill) !important;
  background-color: var(--section-soft) !important; color: var(--section) !important;
  font: 620 9.5px var(--font-ui, "Segoe UI", system-ui, sans-serif) !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
}
:root .studio-panel h2, :root .studio-panel h1,
:root .studio-pane-title, :root .studio-side-title {
  font-size: 17px !important; font-weight: 650 !important;
  letter-spacing: -.01em !important; text-transform: none !important;
}

/* --- Motion ---------------------------------------------------------------- */
/* One system: sections arrive, cards answer the pointer, nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
  .app-view.active > *, .community-hero, .panel, .place-card {
    animation: deck-rise .46s var(--deck-spring) both;
  }
  .app-view.active > *:nth-child(2) { animation-delay: .05s }
  .app-view.active > *:nth-child(3) { animation-delay: .1s }
  .app-view.active > *:nth-child(4) { animation-delay: .15s }
  .app-view.active > *:nth-child(n+5) { animation-delay: .2s }
}
@keyframes deck-rise { from { opacity: 0; translate: 0 14px } to { opacity: 1; translate: none } }

/* --- Out-shouting the generations underneath -------------------------------
   modern.css writes `.home-hero .hero-copy h1{font-size:clamp(46px,5.7vw,82px)
   !important}`, and four other sheets write the same declaration at four other
   sizes. !important against !important is decided on specificity, so a plain
   `.hero-copy h1` here loses however late it loads. These selectors are written
   to win rather than to read nicely — every one of them exists because a sheet
   below states the same property with !important. Deleting those sheets is the
   real fix and is happening page by page; until a page is clear, this block
   holds the line for it. */
:root .home-hero .hero-copy h1,
:root .page-hub .portal-lobby .hero-copy h1 {
  font-size: clamp(28px, 2.6vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  max-width: 620px !important;
  margin: 4px 0 2px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
:root .page-hub .home-hero,
:root .home-hero.portal-lobby {
  min-height: 0 !important; height: auto !important;
  padding: 26px 28px !important;
  border-radius: var(--deck-r-lg) !important;
  background: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
}
:root .page-hub .catalog-hero h1, :root .page-hub .page-head h1 {
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.1 !important; font-weight: 700 !important;
}
:root .page-hub .hero-copy p {
  max-width: 560px !important;
  font-size: 13px !important; line-height: 1.6 !important;
  color: var(--deck-dim) !important;
}
/* The session strip under the hero reported "Подключение" and "Ready" in two
   languages and in a green that belongs to no part of this palette. */
:root .portal-home-session dd { color: var(--deck-ink) !important; font-weight: 640 !important; }
:root .portal-home-session dt { color: var(--deck-dim) !important; }
:root .portal-home-session {
  border-radius: var(--deck-r) !important;
  background-color: color-mix(in srgb, #f5f5ef 3%, transparent) !important;
  box-shadow: none !important;
}

/* --- No stock imagery ------------------------------------------------------
   Six blocks were photographs: the home hero, the three feature panels, the
   Places banner, the profile cover and the sign-in art. None of them showed
   anything about Hypernix — they were generated pictures of generic voxel
   landscapes, 2.3 MB each, with a black gradient over the top so text could sit
   on them. A flat surface in the section's colour says the same thing and says
   it honestly. The files are deleted; these rules make sure nothing goes looking
   for them again. */
:root .home-hero .fallback,
:root .home-hero video,
:root .feature-large, :root .feature-stack article,
:root .catalog-hero, :root .profile-cover, :root .launcher-required-art {
  background-image: none !important;
}
:root .feature-large, :root .feature-stack article,
:root .catalog-hero, :root .profile-cover, :root .launcher-required-art {
  border: 0 !important; border-radius: var(--deck-r-lg) !important;
  background-color: var(--deck-surface) !important;
  box-shadow: var(--deck-lift-1) !important;
}
/* The dark scrim existed only to make text legible over a photograph. */
:root .home-hero::after, :root .catalog-hero::after,
:root .profile-cover::after, :root .feature-large::after,
:root .feature-stack article::after { display: none !important; }
/* Without the picture these blocks do not need to be 560px tall. */
:root .feature-large { min-height: 260px !important; }
:root .feature-stack article { min-height: 124px !important; }
:root .catalog-hero { min-height: 0 !important; padding: 26px 28px !important; }
:root .profile-cover { height: auto !important; min-height: 220px !important; }
:root .feature-copy, :root .catalog-hero > *, :root .profile-identity { position: relative !important; }
:root .feature-copy { position: static !important; padding: 20px 22px !important; }

/* --- The public landing page ----------------------------------------------
   It set its headline at clamp(68px, 10.2vw, 156px) — the launcher's page
   heading is 30px — so the first line overran the paragraph under it and the
   page read as a poster for a different company. Same scale as everywhere else,
   and the floating rounded header becomes the same bar the hub uses. */
:root .welcome-header {
  position: sticky; top: 0; left: auto; right: auto;
  transform: none !important;
  width: auto !important; height: var(--deck-bar) !important;
  margin: 0 !important; padding: 0 18px !important;
  border: 0 !important; border-bottom: 1px solid var(--deck-line) !important;
  border-radius: 0 !important;
  background-color: color-mix(in srgb, var(--deck-black) 88%, transparent) !important;
}
/* Twenty-five lines of !important overrides for the old welcome page lived here
   — .public-hero, .manifesto, .examples, .final-cta, .public-rail — undoing the
   three competing heights that welcome-vision.css and hypernix-premium.css each
   declared for the same hero. That page and both of those sheets are gone; the
   landing page is web/site-home.html and owns its own layout.
   One of the rules was `:root .scroll-cue { display: none !important }`, and
   site.css uses that class name for the hero's scroll hint, so leaving the block
   here would have hidden it the moment the two sheets met on one page.

   A place with no cover shows its initial, large and faint, in the section
   colour — the same answer the launcher gives. It used to be handed one of four
   generated photographs at random, so unrelated worlds shared a picture. */
:root .place-image { position: relative; background-color: color-mix(in srgb, var(--section) 8%, transparent) !important; }
:root .place-image[data-initial]:not([style*="background-image"])::before {
  content: attr(data-initial);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--section); opacity: .28;
  font: 700 clamp(38px, 4vw, 56px) var(--font-display, "Segoe UI", system-ui, sans-serif);
}

/* --- Light theme ----------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root[data-theme="light"] {
    --deck-ink: #181912;
    --deck-dim: #66675f;
    --deck-line: color-mix(in srgb, #10120c 12%, transparent);
    --deck-surface: color-mix(in srgb, #10120c 4%, transparent);
    --deck-surface-lit: color-mix(in srgb, #10120c 8%, transparent);
    --deck-mark: color-mix(in srgb, #10120c 10%, transparent);
    --deck-mark-line: color-mix(in srgb, #10120c 16%, transparent);
    --deck-black: #eeede6;
  }
}