/* Design pass 2026-11 (owner 2026-11-10; spec: Fable 5.2 review of every public page except Nexus Lab).
   Loaded LAST by layout/header.php while UI v2 is on, and every rule sits under .nx-ui-v2, so the existing switch covers it:
   ?ui=off shows the previous look in one browser, NEXUS_UI_V2=0 turns it off for everybody. Green on black only, logical
   properties, transform/opacity motion only, nothing moves under prefers-reduced-motion. */

/* ---- 1. launch bar: shorter on phones (90px -> two tight rows), readable small print ---- */
.nx-ui-v2 .nx-launch-badge{font-size:11px;letter-spacing:.1em}
.nx-ui-v2 .nx-launch-protected{font-size:11px;color:var(--nx-text-3,#8ea396)}
@media (max-width:767.98px){
  .nx-ui-v2 .nx-launch-inner{flex-wrap:wrap;gap:3px 10px;inline-size:calc(100% - 24px);min-height:0;padding-block:7px}
  .nx-ui-v2 .nx-launch-badge{display:none}
  .nx-ui-v2 .nx-launch-main{flex:1 0 100%;font-size:12.5px;line-height:17px}
  .nx-ui-v2 .nx-launch-code,.nx-ui-v2 .nx-launch-cta{position:relative;min-height:0}
  .nx-ui-v2 .nx-launch-code{padding:5px 8px}
  .nx-ui-v2 .nx-launch-code::after,.nx-ui-v2 .nx-launch-cta::after{content:"";position:absolute;inset:-9px -4px}   /* the tap area stays 44px tall */
  .nx-ui-v2 .nx-launch-timer{min-width:0}
  html.nx-sale-on body.nx-ui-v2 #nx-campaign-mount:empty{min-height:60px}
}

/* ---- 2. logo: a calm fade-in once per tab session, then a slow glow behind the mark on desktop pointers ---- */
.nx-ui-v2 .nx4-header .nx4-logo{position:relative;isolation:isolate}
.nx-logo-intro .nx-ui-v2 .nx4-header .nx4-logo .nx4-mark{animation:nx-dp-mark 560ms cubic-bezier(.2,.7,.2,1) both}
.nx-logo-intro .nx-ui-v2 .nx4-header .nx4-wm>img{animation:nx-dp-word 480ms 120ms cubic-bezier(.2,.7,.2,1) both}
.nx-logo-intro .nx-ui-v2 .nx4-header .nx4-wm-sheen::before{animation:none}
@keyframes nx-dp-mark{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes nx-dp-word{from{opacity:0;transform:translateX(calc(-6px * var(--tb-dir,1)))}to{opacity:1;transform:none}}
.nx-ui-v2 .nx4-header .nx4-logo::before{content:"";position:absolute;z-index:-1;inset-inline-start:-6px;inset-block-start:50%;inline-size:46px;block-size:46px;margin-block-start:-23px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(69,248,130,.42) 0,rgba(69,248,130,0) 70%);opacity:.3}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nx-ui-v2 .nx4-header .nx4-logo::before{animation:nx-dp-breathe 7s ease-in-out infinite alternate;will-change:opacity,transform}
}
@keyframes nx-dp-breathe{from{opacity:.2;transform:scale(.96)}to{opacity:.48;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .nx-logo-intro .nx-ui-v2 .nx4-header .nx4-logo .nx4-mark,.nx-logo-intro .nx-ui-v2 .nx4-header .nx4-wm>img,.nx-ui-v2 .nx4-header .nx4-logo::before{animation:none!important}
}

/* ---- 3. Store menu: with only the Sell card in it, the side column was 87% empty. The games take the full width and the
        card sits as one compact line at the end of the "All games" row. Browsers without :has keep the side column. ---- */
.nx-ui-v2 .nx4-mega:has(>.nx4-mega-aside>.nx4-sell:only-child){grid-template-columns:minmax(0,1fr)}
.nx-ui-v2 .nx4-mega-aside:has(>.nx4-sell:only-child){position:absolute;inset-block-end:var(--nx-sp-5,20px);inset-inline-end:var(--nx-sp-5,20px);padding:0;border:0}
.nx-ui-v2 .nx4-mega-aside>.nx4-sell:only-child{margin:0;min-height:44px;padding:6px 12px}
.nx-ui-v2 .nx4-mega-aside>.nx4-sell:only-child small{display:none}
@media (min-width:1280px){.nx-ui-v2 .nx4-mega:has(>.nx4-mega-aside>.nx4-sell:only-child) .nx4-mega-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}

/* ---- 4. header switch: room for "EN · USD" before the currency arrives, so the row does not jump ---- */
.nx-ui-v2 .nx4-header .nx4-switch-code{display:inline-block;min-inline-size:8.5ch;text-align:start}

/* ---- 5. home on phones: the three category chips stay on one row under the hero (the third used to drop to a row of its own) ---- */
@media (max-width:767.98px){
  body.nx-ui-v2.nx-home-v4 .nxh-cats-row{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  body.nx-ui-v2.nx-home-v4 .nxh-cats-row::-webkit-scrollbar{display:none}
  body.nx-ui-v2.nx-home-v4 .nxh-cats-row>li{flex:none}
  body.nx-ui-v2.nx-home-v4 .nxh-cat{gap:6px;padding-inline:11px;font-size:13px}
}

/* ---- 6. backdrop: the second glow and the grid move from teal to a deeper brand green; the still backdrop loses its blue glow ---- */
:root:has(body.nx-ui-v2){--nx-bg-teal:50,186,110}
html.nx-bg-static body.nx-ui-v2{background-image:radial-gradient(circle at 0 0,rgba(var(--nx-bg-teal),.3) 0 1.2px,transparent 1.8px),linear-gradient(rgba(var(--nx-bg-teal),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--nx-bg-teal),.035) 1px,transparent 1px),radial-gradient(900px 640px at 5% 5%,rgba(33,112,80,.13),transparent 60%),radial-gradient(900px 700px at 100% 25%,rgba(33,112,80,.1),transparent 62%)!important}

/* ---- 7. game and gift-card hubs with nothing to sell yet: a smaller box with readable text (was grey #686968 in 145px) ---- */
.nx-ui-v2 .nxg-empty{padding:32px 20px;color:var(--nx-text-2,#b9c7bd);font-size:15px;line-height:22px}

/* ---- 8. cart checkout: a button that cannot be pressed looks off, and "not available right now" reads as a notice, not an error ---- */
.nx-ui-v2 .nxcc-submit.nx5-btn:disabled{opacity:1;border-color:var(--nx-line,rgba(69,248,130,.14));background:var(--nx-s3,#1a231e);color:var(--nx-text-3,#8ea396);box-shadow:none}
.nx-ui-v2 .nxcc-line-warn{color:var(--nx-warn,#f5b544)}