/* ============================================================================
   Nexian Global — Component classes
   Reusable building blocks: nav, footer, buttons, glass panels, gold text.
   Depends on tokens.css + base.css + animations.css.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   GLASS SURFACE — the signature panel for landing-shell content
   ───────────────────────────────────────────────────────────────────────── */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(var(--gold-rgb), 0.1);
}

.glass-soft {
  background: var(--bg-glass-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-gold-faint);
}

/* ─────────────────────────────────────────────────────────────────────────
   GOLD GRADIENT TEXT — for titles
   ───────────────────────────────────────────────────────────────────────── */
.text-gold-gradient {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-gold        { color: var(--gold-400); }
.text-gold-bright { color: var(--gold-200); }
.text-muted-gold  { color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────── */

/* Base button (apply via .btn + variant).
 * NOTE: the 44×44 touch-target a11y rule applies to *standalone* CTAs
 * (Forge "Submit Forge Request", JourneyModal "Continue", auth-submit, etc.).
 * Inside the dense site-nav, V0 keeps every item at py-2 px-3.5 so the row
 * stays cohesive — we strip the min-height there via `.site-nav .btn`. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  min-height: 44px;            /* a11y — touch target on standalone CTAs */
  white-space: nowrap;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* In-nav buttons: cohesive row, match V0 sizing */
.site-nav .btn {
  min-height: 0;
  padding: 0.5rem 0.875rem;            /* py-2 px-3.5 */
  font-size: 0.8125rem;                  /* mobile text-xs */
  gap: 0.375rem;                       /* gap-1.5 */
  border-radius: var(--radius-md);     /* 8.8px — V0 rounded-md override */
}
@media (min-width: 768px) {
  .site-nav .btn { font-size: 13px; }  /* V0 md:text-[13px] literal */
}
/* Inter at 700 doesn't read as visibly bold against the 500-weight nav links
 * at the 13px nav size. 800 (extrabold) gives PLAY NOW real hierarchy. */
.site-nav .btn-primary { font-weight: 800; letter-spacing: 0.02em; }

/* ─────────────────────────────────────────────────────────────────────────
 * Per-icon hover animations — replicates V0's per-icon group-hover transforms.
 * Each icon has its own personality on hover: Scroll tilts forward, Gavel
 * swings backward, Crown lifts, Swords rotates, Play zooms hardest.
 * ───────────────────────────────────────────────────────────────────────── */
.site-nav svg[data-icon] {
  transition: transform 200ms var(--ease-out);
  transform-origin: center;
  will-change: transform;
}
.site-nav .nav-link:hover    svg[data-icon="castle"]         { transform: scale(1.10); }
.site-nav .nav-link:hover    svg[data-icon="scroll"]         { transform: scale(1.10) rotate(6deg); }
.site-nav .nav-link:hover    svg[data-icon="gavel"]          { transform: scale(1.10) rotate(-12deg); }
.site-nav .nav-link:hover    svg[data-icon="crown"]          { transform: scale(1.10) translateY(-2px); }
.site-nav .nav-link:hover    svg[data-icon="swords"]         { transform: scale(1.10) rotate(12deg); }
.site-nav .nav-link:hover    svg[data-icon="newspaper"]      { transform: scale(1.10); }
.site-nav .nav-link:hover    svg[data-icon="message-circle"] { transform: scale(1.10); }
.site-nav .btn-primary:hover svg[data-icon="play"]           { transform: scale(1.25); }

/* Primary CTA — Play Now / Forge Your Realm */
.btn-primary {
  background: var(--gradient-play);
  color: #000;
  font-weight: 700;
  border-color: var(--gold-400);
  /* V0: shadow-lg shadow-[#D4AF37]/30 → big gold-tinted drop shadow */
  box-shadow: 0 10px 15px -3px rgba(var(--gold-rgb), 0.3),
              0 4px 6px -4px rgba(var(--gold-rgb), 0.3);
}
.btn-primary:hover {
  background: var(--gradient-play-hover);
  transform: scale(1.05);              /* V0 hover:scale-105 */
  box-shadow: 0 14px 28px -3px rgba(var(--gold-rgb), 0.4),
              0 8px 10px -4px rgba(var(--gold-rgb), 0.35);
}

/* Secondary — outline gold */
.btn-secondary {
  color: var(--gold-400);
  border-color: var(--border-gold);
  background: rgba(var(--gold-rgb), 0.06);
}
.btn-secondary:hover {
  color: var(--gold-200);
  border-color: var(--border-gold-strong);
  background: rgba(var(--gold-rgb), 0.12);
}

/* Ghost — text-only with hover panel */
.btn-ghost {
  color: var(--text-400);
  border-color: var(--border-gold-faint);
}
.btn-ghost:hover {
  color: var(--gold-400);
  border-color: var(--border-gold);
  background: rgba(var(--gold-rgb), 0.08);
}

/* Discord button */
.btn-discord {
  color: var(--discord);
  border-color: rgba(88, 101, 242, 0.5);
  background: rgba(88, 101, 242, 0.1);
}
.btn-discord:hover {
  color: var(--discord-soft);
  background: rgba(88, 101, 242, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────
   SITE NAV BAR
   ───────────────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: var(--z-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-gold-soft);
  background: var(--glass-gold-bg);
  box-shadow: 0 4px 24px rgba(var(--gold-rgb), 0.08),
              inset 0 1px 0 rgba(var(--gold-rgb), 0.1);
}

/* Fixed nav requires a top offset on body so subpage content isn't hidden
 * underneath. The landing's hero is 100vh with justify-center, so the offset
 * just shifts the centered content down by nav-height — content still feels
 * vertically balanced in the viewport.
 */
body { padding-top: var(--nav-h); }

.site-nav-inner {
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .site-nav-inner { padding-inline: var(--space-6); }
}

/*
 * The logo YIELDS; the controls opposite it do not.
 *
 * This was flex-shrink: 0 with a rem height, making it the one element in the
 * bar that could not give way while its width grew with the device text-size
 * setting. On a phone with enlarged text the row ran past the viewport, and the
 * only thing left to push was the menu button — which has a 44px minimum, so it
 * went off the right edge rather than shrinking. It read as the button vanishing
 * a moment after load, that moment being the logo image arriving at full width.
 *
 * object-fit keeps the mark undistorted when max-width clamps it.
 */
.site-nav-logo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(45%, 12rem);
  height: 2rem;
  filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.4));
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-nav-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.site-nav-logo:hover { opacity: 0.9; }
@media (min-width: 768px) { .site-nav-logo { height: 2.5rem; } }

.site-nav-links {
  display: none;
  align-items: center;
  gap: var(--space-2);
  /* +20px breathing room from the NEXIAN logo. Within justify-between this is
   * added on top of the auto-distributed space, so the visible gap grows by
   * exactly 20px. */
  margin-right: 20px;
}
/* Desktop nav switchover: 1280px, not 1024.
 * Measured at the 16px root the bar needs ~1268px (logo 152 + gap 20 + links
 * 1048 + 48 padding). Below that the logo is the only flexible item, so it was
 * being crushed - 152px -> 35px at a 1150px window (and 65px even at the old
 * 14.4px root, so this predates the type change; the change only widened the
 * band). The drawer carries every link plus Discord and the language list, and
 * Play Now stays in the bar, so nothing is lost by handing over earlier. */
@media (min-width: 1280px) { .site-nav-links { display: flex; } }
/* The mark never distorts once the full bar is showing. */
@media (min-width: 1280px) { .site-nav-logo { flex-shrink: 0; } }
/* 1280-1439 is the tight band: shave the pill padding so long translations
 * (ru/cs/ro labels run wider than en) still have somewhere to go. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .site-nav-links { gap: var(--space-1); }
  .site-nav-links .nav-link,
  .site-nav-links .btn { padding-right: 0.625rem; padding-left: 0.625rem; }
}

/* Nav link pill — sizing matches V0 exactly:
 *   py-2 px-3.5 rounded-md text-xs md:text-[13px] gap-1.5
 *   rounded-md in V0 = calc(0.75rem - 2px) = 8.8px (NOT Tailwind's default 6px)
 *   text-[13px] is LITERAL 13px on desktop (not a rem value)
 *   default: text-gray-400 border-gray-700 bg-gray-900/50
 *   hover:   text-[#D4AF37] border-[#D4AF37]/50 bg-[#D4AF37]/10
 *   active:  text-[#D4AF37] font-semibold border-[#D4AF37]/50 bg-[#D4AF37]/10 shadow-sm
 */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;                            /* V0 mobile text-xs */
  font-weight: 500;
  border: 1px solid #374151;                    /* V0 border-gray-700 */
  border-radius: var(--radius-md);              /* 8.8px — V0 rounded-md override */
  color: #9CA3AF;                                /* V0 text-gray-400 */
  background: rgba(17, 24, 39, 0.5);             /* V0 bg-gray-900/50 */
  transition: all var(--dur-base) var(--ease-out);
  /* Multi-word labels ("Hall of Fame", "Server Details") must stay on one
   * line and the button must not shrink below its content. Without these,
   * any squeeze in the flex parent breaks the label and inflates the height. */
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .nav-link { font-size: 13px; }                /* V0 md:text-[13px] — literal 13px */
}
.nav-link:hover {
  color: var(--gold-400);
  border-color: rgba(212, 175, 55, 0.5);         /* V0 border-[#D4AF37]/50 */
  background: rgba(212, 175, 55, 0.10);          /* V0 bg-[#D4AF37]/10 */
}
.nav-link.active {
  color: var(--gold-400);
  font-weight: 600;                              /* V0 font-semibold */
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.10);
  box-shadow: var(--shadow-sm);
}

/* Accent variant — amber (Hall of Fame) */
.nav-link.accent-amber {
  color: var(--amber);
  border-color: rgba(255, 184, 0, 0.4);
  background: rgba(255, 184, 0, 0.08);
}
.nav-link.accent-amber:hover {
  border-color: rgba(255, 184, 0, 0.6);
  background: rgba(255, 184, 0, 0.15);
}
.nav-link.accent-amber.active {
  color: #FFB800;
  font-weight: 600;
  border-color: rgba(255, 184, 0, 0.6);
  background: rgba(255, 184, 0, 0.15);
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.2);
}

/* Accent variant — red (News) */
.nav-link.accent-red {
  color: var(--crimson);
  border-color: rgba(255, 77, 77, 0.4);
  background: rgba(255, 77, 77, 0.08);
}
.nav-link.accent-red:hover {
  border-color: rgba(255, 77, 77, 0.6);
  background: rgba(255, 77, 77, 0.15);
}
.nav-link.accent-red.active {
  font-weight: 600;
  border-color: rgba(255, 77, 77, 0.6);
  background: rgba(255, 77, 77, 0.15);
  box-shadow: 0 0 8px rgba(255, 77, 77, 0.2);
}

.nav-divider {
  width: 1px;
  height: 1.75rem;
  background: rgba(var(--gold-rgb), 0.3);
  margin-inline: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────────────────
   LANGUAGE SELECTOR — desktop dropdown + mobile drawer grid
   ───────────────────────────────────────────────────────────────────────── */
.nav-lang { position: relative; }
.nav-lang-trigger { font-weight: 600; cursor: pointer; }

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem;
  background: var(--glass-gold-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-gold-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
.nav-lang-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--text-400);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}

/* Country flag chip — small + subtle, sits left of the language name */
.nav-lang-flag {
  width: 0.95rem;
  height: 0.66rem;
  object-fit: cover;
  border-radius: 1.5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}
.nav-lang-item:hover {
  color: var(--gold-200);
  background: rgba(var(--gold-rgb), 0.1);
}
.nav-lang-item.active {
  color: var(--gold-400);
  background: rgba(var(--gold-rgb), 0.12);
  font-weight: 600;
}

/* Mobile drawer language grid */
.drawer-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem;
}
.drawer-lang-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--text-400);
  border: 1px solid var(--border-slate);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.5);
  transition: all var(--dur-base) var(--ease-out);
}
.drawer-lang-item:hover {
  color: var(--gold-400);
  border-color: var(--border-gold);
  background: rgba(var(--gold-rgb), 0.10);
}
.drawer-lang-item.active {
  color: var(--gold-400);
  border-color: var(--border-gold);
  background: rgba(var(--gold-rgb), 0.12);
  font-weight: 600;
}

/* Mobile nav controls */
/* The bar's only navigation control lives here: it never shrinks and never
   wraps, whatever the logo beside it is doing. */
.site-nav-mobile {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: var(--space-2);
}
@media (min-width: 1280px) { .site-nav-mobile { display: none; } }

.mobile-menu-btn {
  padding: var(--space-2);
  color: rgba(var(--gold-rgb), 0.8);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: rgba(var(--gold-rgb), 0.06);
  border-radius: var(--radius-md);
  transition: all var(--dur-base) var(--ease-out);
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn:hover {
  border-color: var(--border-gold);
  background: rgba(var(--gold-rgb), 0.12);
}

/* Mobile drawer */
.site-nav-drawer {
  border-top: 1px solid rgba(var(--gold-rgb), 0.15);
  background: linear-gradient(
    180deg,
    rgba(10, 7, 3, 0.97) 0%,
    rgba(6, 4, 1, 0.99) 100%
  );
  animation: drawer-slide-down var(--dur-base) var(--ease-out);
}
.site-nav-drawer-inner {
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  font-size: var(--size-sm);
  border: 1px solid var(--border-slate);
  border-radius: var(--radius-md);
  color: var(--text-400);
  background: rgba(15, 23, 42, 0.5);
  transition: all var(--dur-base) var(--ease-out);
}
.drawer-link:hover,
.drawer-link.active {
  color: var(--gold-400);
  border-color: var(--border-gold);
  background: rgba(var(--gold-rgb), 0.10);
}
.drawer-link.accent-amber.active { color: var(--amber); border-color: rgba(255,184,0,0.6); background: rgba(255,184,0,0.15); }
.drawer-link.accent-red.active   { color: var(--crimson); border-color: rgba(255,77,77,0.6); background: rgba(255,77,77,0.15); }

/* ─────────────────────────────────────────────────────────────────────────
   SITE FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: var(--z-overlay);
  border-top: 1px solid var(--border-gold-faint);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(
    180deg,
    rgba(10, 7, 3, 0.55) 0%,
    rgba(6, 4, 1, 0.65) 100%
  );
  margin-top: auto;
}

.site-footer-inner {
  /* V0 uses max-w-6xl (72rem ≈ 1037px). Anything wider lets the 3-column
   * desktop layout spread too far to the edges. */
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-4);
}
@media (min-width: 768px) {
  .site-footer-inner { padding: var(--space-5) var(--space-8); }
}

/* Footer link — three zones kept for hierarchy, but raised in the 2026-07
 * legibility pass (originals 0.4/0.55/0.6 failed contrast on the dark bg).
 *   default          → 0.88  (mobile combined nav)
 *   .footer-link.med → 0.92  (desktop primary nav, font-medium)
 *   .footer-link.mute→ 0.8   (desktop legal links)
 */
.footer-link {
  /* Hit area. As plain inline text these measured 20px tall, well under any
   * usable target. inline-flex + padding-block gives ~32px on a mouse and
   * ~44px on a touch screen (see the coarse-pointer block at the foot of this
   * file) without moving the text or widening the row. */
  display: inline-flex;
  align-items: center;
  padding-block: 0.375rem;
  font-size: var(--size-xs);
  color: rgba(186, 162, 112, 0.88);
  transition: color var(--dur-base) var(--ease-out);
}
.footer-link.med  { color: rgba(186, 162, 112, 0.92); font-weight: 500; }
.footer-link.mute { color: rgba(186, 162, 112, 0.8); }
.footer-link:hover,
.footer-link.med:hover,
.footer-link.mute:hover { color: var(--gold-400); }

/* Effects-mode toggle — a <button> dressed as a footer link. */
.fx-toggle {
  appearance: none;
  background: none;
  border: 0;
  /* padding-inline, NOT padding. This rule sits after .footer-link, so a
     blanket `padding: 0` silently reset the vertical padding that gives every
     other footer link its hit area - this button alone stayed a 20px target
     while its neighbours grew. Only the horizontal side needs zeroing. */
  padding-inline: 0;
  font: inherit;
  font-size: var(--size-xs);
  cursor: pointer;
}

.footer-tagline {
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}

.footer-forge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--size-xs);
  font-weight: 600;
  color: rgba(var(--gold-rgb), 0.8);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 0.375rem;       /* V0 rounded-md */
  transition: color var(--dur-base) var(--ease-out);
}
.footer-forge-link:hover { color: #E0C074; }

/* ─────────────────────────────────────────────────────────────────────────
   PAGE TITLE (used on subpages)
   ───────────────────────────────────────────────────────────────────────── */
.page-title {
  font-family: var(--font-display);
  font-size: var(--size-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  text-align: center;
  color: var(--gold-400);
  text-shadow: 0 0 80px rgba(var(--gold-rgb), 0.6),
               0 0 30px rgba(var(--gold-rgb), 0.3),
               0 2px 6px rgba(0, 0, 0, 0.9);
  padding: var(--space-6) var(--space-12);
  position: relative;
  display: inline-block;
}
@media (min-width: 768px) {
  .page-title { font-size: var(--size-5xl); }
}

.page-title-wrapper {
  text-align: center;
  margin-block: var(--space-8) var(--space-12);
}

/* ─────────────────────────────────────────────────────────────────────────
   ATMOSPHERE LAYERS — background gradient, fog, embers (landing only)
   ───────────────────────────────────────────────────────────────────────── */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmosphere-bg {
  position: absolute;
  inset: -10vh 0 0 0;
  height: 120vh;
  background: var(--bg-base);
  background-size: cover;
  background-position: center;
  filter: blur(2px);
}
.atmosphere-bg.has-image { background-image: url('/assets/img/background-nexian.jpg'); }

.atmosphere-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.atmosphere-bottom-fade {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  height: 12rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    transparent 100%
  );
}

/* ─── The footer link, restored ───────────────────────────────────────────
   It was a rounded box with a border on the bottom edge only, which reads as
   an accident rather than a shape. A quiet outlined pill instead - the same
   family as the band's CTA, a step down in weight so the two do not compete
   inside one screen at the page foot. */
.footer-forge-link {
  border-bottom: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  background: rgba(var(--gold-rgb), 0.07);
  color: rgba(var(--gold-rgb), 0.95);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
.footer-forge-link:hover {
  color: #F0D890;
  border-color: rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.13);
}

/* ─── Desktop footer, two rows ────────────────────────────────────────────
   Measured at 1280px: the single desktop row had 134px of slack and the Forge
   pill needs ~150, so adding it wrapped five things at once - the tagline onto
   two lines, "Manual" out of the nav, the Effects toggle, and the pill itself.

   The three legal links and the toggle (~250px) moved down to the row that
   already existed for the copyright. The top row is one clean statement now:
   who we are, where to go, what to do. Nothing left the page. */
.footer-utility-row {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--gold-rgb), 0.06);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-utility-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.footer-copyright-text {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(186, 162, 112, 0.85);
}

/* Nothing in the top row may wrap: every item there is two or three words and
   a second line is what made it look accidental. */
.footer-desktop .footer-tagline,
.footer-desktop .footer-link,
.footer-desktop .footer-forge-link { white-space: nowrap; }

/* ═════════════════════════════════════════════════════════════════════════
   FORGE PROMOTION DOCK   2026-08-20

   Owner: a band above the footer only reaches the people who scroll all the
   way down, and you must not build on that. So the advertisement is a card
   pinned to the bottom-right corner instead.

   It replaces .forge-floater in landing.css, which was landing only, hidden
   below 768px, and bobbed on an infinite float-y animation. This one appears
   once, sits still, and can be dismissed.

   z-index 90 keeps it under the nav (100) and far under the modals (900+), so
   it can never sit on top of the journey modal or the language dropdown.
   ───────────────────────────────────────────────────────────────────────── */
.forge-dock {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 19.5rem;
  max-width: calc(100vw - 2rem);
}

/* Closed is the DEFAULT state, so the card is hidden before Alpine has run and
   stays hidden if Alpine never runs at all. Opening is one bound class.
   ⚠ visibility, not display: a display toggle would need Alpine to stage the
   transition across animation frames, and the shown state has to survive
   whether or not that staging ever happens. visibility also takes it out of
   hit-testing so a hidden card cannot swallow a click. */
.forge-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 320ms var(--ease-out),
              transform 320ms var(--ease-out),
              visibility 0s linear 320ms;
}
.forge-dock.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 320ms var(--ease-out),
              transform 320ms var(--ease-out),
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .forge-dock, .forge-dock.is-open { transition-duration: 1ms; transform: none; }
}

.forge-dock-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  padding-inline-end: 2rem;               /* clear of the dismiss button */
  border-radius: 0.9rem;
  text-decoration: none;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--gold-rgb), 0.10) 0%, rgba(var(--gold-rgb), 0) 60%),
    linear-gradient(160deg, rgba(26, 21, 12, 0.97) 0%, rgba(12, 9, 5, 0.98) 100%);
  box-shadow:
    0 18px 44px -12px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(var(--gold-rgb), 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow  var(--dur-base) var(--ease-out),
              transform   var(--dur-base) var(--ease-out);
}
.forge-dock-card:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  box-shadow:
    0 22px 54px -12px rgba(0, 0, 0, 0.8),
    0 0 34px -10px rgba(var(--gold-rgb), 0.28),
    inset 0 1px 0 rgba(var(--gold-rgb), 0.2);
  transform: translateY(-2px);
}

.forge-dock-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.65rem;
  color: var(--gold-400);
  background: linear-gradient(140deg, rgba(var(--gold-rgb), 0.20) 0%, rgba(var(--gold-rgb), 0.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.22);
}

.forge-dock-text { display: flex; flex-direction: column; min-width: 0; }
.forge-dock-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-400);                 /* 8.4:1 on the card */
}
.forge-dock-desc {
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(198, 176, 128, 0.92);       /* 7.1:1 */
}

.forge-dock-go {
  display: inline-flex;
  flex-shrink: 0;
  margin-inline-start: auto;
  color: rgba(var(--gold-rgb), 0.55);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.forge-dock-card:hover .forge-dock-go { color: var(--gold-400); transform: translateX(-2px); }

/* Always visible, never hover-only: on a touch screen a hover-revealed
   dismiss is a card that cannot be closed. */
.forge-dock-close {
  position: absolute;
  top: 0.3rem;
  inset-inline-end: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  background: transparent;
  color: rgba(198, 176, 128, 0.6);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.forge-dock-close:hover {
  color: var(--gold-400);
  background: rgba(var(--gold-rgb), 0.12);
}

/* Narrow screens: the description is the first thing to go, so the card stays
   a single compact line instead of covering the content behind it. */
@media (max-width: 480px) {
  .forge-dock { left: 0.75rem; bottom: 0.75rem; width: auto; }
  .forge-dock-desc { display: none; }
  .forge-dock-card { padding: 0.6rem 0.7rem; padding-inline-end: 1.9rem; gap: 0.55rem; }
  .forge-dock-mark { width: 2rem; height: 2rem; }
}


/* ============================================================================
   Touch hit areas
   ----------------------------------------------------------------------------
   Measured 2026-08-22: on the home page 38 of 49 interactive elements were
   under 44px tall on a phone. Everything below only grows the TAP area on a
   coarse pointer; mouse layouts are untouched, and nothing here changes a
   font size, a colour or a position.

   Scoped to (hover: none) and (pointer: coarse) rather than a width query so
   a small laptop window keeps its compact desktop layout.
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  /* 0.6875rem landed on 42px against a 20px text box. 0.75rem is 44 exactly. */
  .footer-link          { padding-block: 0.75rem; }
  .footer-forge-link    { min-height: 44px; }
  /* .site-nav .btn strips .btn's min-height for a cohesive desktop row. On a
     phone that leaves Play Now - the single most important control on the
     site - at a 37px target. Put it back for touch only. */
  .site-nav .btn        { min-height: 44px; }
  .nav-link             { min-height: 44px; }
  .drawer-link          { min-height: 44px; }
  .drawer-lang-item     { min-height: 44px; }
  .forge-dock-close     { width: 2.75rem; height: 2.75rem; }
  .mobile-menu-btn      { min-width: 44px; min-height: 44px; }
}