/* TheNexus V5 "Arena" — design layer, wave A (foundation + storefront shell).
 * Loaded after the existing public bundle. Markup and behaviour are untouched: this file only restyles
 * existing classes with the canonical tokens (assets/css/nx-tokens.css). No fonts, no JS, no external
 * requests. Content is never hidden waiting for an animation; every motion has a reduced-motion twin.
 * Direction: a competitive-gaming HUD — sharper geometry, hairline structure, one signal colour used
 * for action and price only, display type for headings, quiet surfaces so the game art carries colour. */

:root{
  --nx5-r-card:10px;      /* tiles, panels */
  --nx5-r-control:8px;    /* buttons, fields */
  --nx5-edge:rgba(69,248,130,.38);
  --nx5-edge-soft:rgba(69,248,130,.16);
  --nx5-glow:0 0 0 1px var(--nx5-edge-soft),0 10px 30px -12px rgba(69,248,130,.28);
  --nx5-lift:0 14px 34px -16px rgba(0,0,0,.7);
  --nx5-ease:cubic-bezier(.2,.7,.2,1);
  --nx5-t:160ms;
}

/* ---- header: calmer bar, a clear current-section mark ------------------------------------ */
.nx4-header{background:rgba(7,8,10,.82);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom-color:rgba(255,255,255,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nx4-header{background:rgba(7,8,10,.98)}}
.nx4-nav-list>li>a,.nx4-nav-list>li>button{position:relative;transition:color var(--nx5-t) var(--nx5-ease)}
.nx4-nav-list>li>a::after,.nx4-nav-list>li>button::after{content:"";position:absolute;inset-inline:12px;bottom:6px;height:2px;border-radius:2px;background:var(--nx-signal);transform:scaleX(0);transform-origin:center;transition:transform var(--nx5-t) var(--nx5-ease)}
.nx4-nav-list>li>a:hover::after,.nx4-nav-list>li>button:hover::after,.nx4-nav-list>li>a[aria-current]::after,.nx4-nav-list>li>button[aria-expanded="true"]::after{transform:scaleX(1)}

/* ---- hero: art stays the star; copy sits on a floor fade so it is always readable --------- */
.nxh-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,8,10,0),var(--nx-bg) 96%)}
/* the side scrim only where the copy sits beside the art; on phones the copy is over the art and the page already darkens it */
@media (min-width:900px){
  .nxh-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,10,.7) 0%,rgba(7,8,10,.26) 44%,rgba(7,8,10,0) 70%)}
  [dir="rtl"] .nxh-hero::before{background:linear-gradient(270deg,rgba(7,8,10,.7) 0%,rgba(7,8,10,.26) 44%,rgba(7,8,10,0) 70%)}
}
.nxh-hero h1{font-family:var(--nx-font-display);font-weight:800;text-transform:none;letter-spacing:-.018em;line-height:1.02;text-wrap:balance}
.nxh-hero-sub{color:var(--nx-text-2);max-width:46ch}

/* ---- section headings: a signal tick and a hairline that carries the eye to the action ----- */
.nxh-head{position:relative;align-items:center;padding-block-end:var(--nx-sp-3)}
.nxh-head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--nx5-edge) 0,var(--nx-line) 56px,var(--nx-line) 100%)}
[dir="rtl"] .nxh-head::after{background:linear-gradient(270deg,var(--nx5-edge) 0,var(--nx-line) 56px,var(--nx-line) 100%)}
.nxh-head h2,.nxh-card h2{font-family:var(--nx-font-display);font-weight:800;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:10px}
.nxh-head h2::before{content:"";width:6px;height:18px;border-radius:2px;background:var(--nx-signal);flex:none}

/* ---- game and gift tiles: art-first cards, one hover language ---------------------------- */
.nxt-art{border-radius:var(--nx5-r-card);border-color:rgba(255,255,255,.07);background:linear-gradient(180deg,var(--nx-s2),var(--nx-s1));transition:border-color var(--nx5-t) var(--nx5-ease),box-shadow var(--nx5-t) var(--nx5-ease),transform var(--nx5-t) var(--nx5-ease)}
.nxt-art::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;background:linear-gradient(180deg,rgba(7,8,10,0),rgba(7,8,10,.55))}
.nxt-name{font-weight:700;letter-spacing:-.005em}
.nxt-meta{color:var(--nx-text-3)}
@media (hover:hover){
  .nxt-link:hover .nxt-art{border-color:var(--nx5-edge);box-shadow:var(--nx5-glow),var(--nx5-lift);transform:translateY(-3px)}
  .nxt-link:hover .nxt-name{color:var(--nx-signal)}
}
.nxt-link:focus-visible .nxt-art{border-color:var(--nx-signal)}

/* ---- buttons: sharper corners, a quiet signal glow on the primary only -------------------- */
.nxh-btn{border-radius:var(--nx5-r-control);font-weight:700;letter-spacing:.005em;transition:background-color var(--nx5-t) var(--nx5-ease),border-color var(--nx5-t) var(--nx5-ease),box-shadow var(--nx5-t) var(--nx5-ease),transform 90ms var(--nx5-ease)}
.nxh-btn--primary{box-shadow:0 8px 24px -12px rgba(69,248,130,.55)}
@media (hover:hover){.nxh-btn--primary:hover{box-shadow:0 10px 28px -10px rgba(69,248,130,.7)}}

/* ---- panels that reuse the home card shell ------------------------------------------------ */
.nxh-card{border-radius:var(--nx5-r-card)}

@media (prefers-reduced-motion:reduce){
  .nx4-nav-list>li>a::after,.nx4-nav-list>li>button::after,.nxt-art,.nxh-btn{transition:none}
  .nxt-link:hover .nxt-art{transform:none}
}