/* ================================================================
   DXED — small landing + nav additions layered on the original design.

   The landing itself is the original .dxl design; this file only adds the
   pieces the Arena work needs:
     • a secondary "ghost" variant of the existing .dxl-cta button
     • the Arena section's centered CTA row
     • a subtle PLAY chip on the in-app Arena nav item
   Reuses the existing dark tokens (accent #7a7e8c). No new landing system.
   ================================================================ */

/* Secondary call-to-action next to the primary .dxl-cta (matches its size). */
.dxl-cta.ghost {
  background: transparent;
  color: #e8e6de;
  border: 1px solid rgba(245, 243, 234, 0.22);
}
.dxl-cta.ghost:hover {
  background: rgba(245, 243, 234, 0.06);
  border-color: rgba(245, 243, 234, 0.34);
}

/* Arena section CTA row. */
.dxl-arena-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* Arena nav item in the app sidebar — prominent but part of the nav system. */
.sidebar-nav .nav-item-arena { position: relative; color: #eceef3; }
.sidebar-nav .nav-item-arena svg { color: #c3c6cf; }
.sidebar-nav .nav-item-arena::after {
  content: "PLAY"; margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 6px; color: #0a0b0f; background: #c3c6cf;
}
.sidebar-nav .nav-item-arena:hover { background: rgba(255,255,255,0.06); }

/* ── Landing: live feed preview ── */
.dxl-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: 1060px;
  margin: 0 auto;
}
.dxl-feed-card {
  background: #0b0c0f;
  border: 1px solid rgba(245, 243, 234, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
}
.dxl-feed-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dxl-feed-top .dxl-pv-av { width: 34px; height: 34px; flex-shrink: 0; }
.dxl-feed-who { min-width: 0; display: flex; flex-direction: column; }
.dxl-feed-who b { color: #e8e6de; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxl-feed-who span { color: #8b8d97; font-size: 11.5px; }
.dxl-feed-game {
  margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: #c3c6cf; background: rgba(195, 198, 207, 0.1); padding: 3px 8px; border-radius: 999px;
}
.dxl-feed-body { color: #b9bac2; font-size: 13.5px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }

/* ── Landing: trending games chips ── */
.dxl-trend-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 860px; margin: 0 auto;
}
.dxl-trend-chip {
  color: #d6d4cb; background: #101116; border: 1px solid rgba(245, 243, 234, 0.1);
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* ── Landing: final signup call to action ── */
.dxl-join-card {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, #101116, #0b0c0f);
  border: 1px solid rgba(245, 243, 234, 0.1);
  border-radius: 18px; padding: 44px 28px;
}
.dxl-join-card .dxl-sec-title { margin-bottom: 8px; }
.dxl-join-card .dxl-sec-sub { margin-bottom: 20px; }

/* ── Roadmap: Now / Next / Later tags + groups ── */
.rmp-tag.now { color: #9fd6a8; background: rgba(120, 200, 140, 0.12); }
.rmp-tag.next { color: #c3c6cf; background: rgba(195, 198, 207, 0.12); }
.rmp-tag.later { color: #8b8d97; background: rgba(139, 141, 151, 0.12); }
.rmp-group-title {
  grid-column: 1 / -1; margin: 18px 0 0; color: #e8e6de;
  font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* ── Official token section + landing footer ── */
.dxl-token-card { max-width: 720px; margin: 0 auto; background: rgba(21,22,28,.82); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px 24px; text-align: left; }
.dxl-token-warn { background: rgba(207,90,94,.09); border: 1px solid rgba(207,90,94,.38); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #f0c4c5; margin-bottom: 14px; }
.dxl-token-warn strong { color: #fca5a5; }
.dxl-token-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dxl-token-mint { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #edeef1; background: #0e0f14; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 11px 13px; word-break: break-all; flex: 1; min-width: 240px; }
.dxl-token-copy { background: #edeef1; color: #0a0b0f; border: none; border-radius: 9px; padding: 11px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.dxl-token-copy:hover { background: #fff; }
.dxl-token-links { display: flex; gap: 9px; flex-wrap: wrap; }
.dxl-token-links a { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 9px 14px; color: #c3c6cf; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.dxl-token-links a:hover { background: rgba(255,255,255,.09); color: #edeef1; }
.dxl-footer { text-align: center; padding: 26px 16px 34px; font-size: 12.5px; color: #969aa6; }
.dxl-footer a { color: #c3c6cf; text-decoration: none; }
.dxl-footer a:hover { color: #edeef1; }
.dxl-footer-mint { margin-top: 8px; font-size: 11px; color: #6f737f; }
.dxl-footer-mint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #969aa6; word-break: break-all; }
.dxl-footer-mint button { background: none; border: none; color: #6f737f; cursor: pointer; font-size: 11px; padding: 0 4px; }
.dxl-footer-mint button:hover { color: #edeef1; }
.dxl-footer-copy { margin-top: 6px; font-size: 11px; color: #5c606b; }

/* X (Twitter) follow button in the landing footer */
.dxl-x-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 8px 16px; color: #edeef1 !important; font-size: 12.5px; font-weight: 700; text-decoration: none; margin-bottom: 12px; transition: background .14s; }
.dxl-x-btn:hover { background: rgba(255,255,255,.1); }

/* ================================================================
   LANDING — LIGHT. The public landing flips to a white, editorial
   look: paper background, near-black type, one crimson accent, soft
   gray hairlines, quiet shadows. Token-level override of the dark
   .dxl design (this file loads after style.css, so equal-specificity
   rules here win); the logged-in app keeps its dark theme untouched.
   ================================================================ */
.auth-landing.dxl {
  --dxl-bg:        #fafaf8;
  --dxl-surface:   #ffffff;
  --dxl-raised:    #f3f3f0;
  --dxl-raised-2:  #ebebe7;
  --dxl-border:    #e6e6e2;
  --dxl-border-2:  #d9d9d4;
  --dxl-text:      #16161a;
  --dxl-sec:       #55555e;
  --dxl-muted:     #8b8b93;
  --dxl-red:       #c94f54;
  background-color: var(--dxl-bg);
}

/* photo slideshow washes into the paper instead of charcoal */
.landing-photo-bg { background: var(--dxl-bg); }
.landing-photo-bg .bg-slide img { opacity: 0.5; filter: blur(1.5px) saturate(0.9); }
.landing-photo-overlay {
  background:
    linear-gradient(to right, rgba(250,250,248,0.94), rgba(250,250,248,0.72), rgba(250,250,248,0.94)),
    linear-gradient(to bottom, rgba(250,250,248,0.55), rgba(250,250,248,0.97) 78%);
}
.dxl-grain { opacity: 0.05; mix-blend-mode: multiply; }

/* nav */
.dxl-nav { background: rgba(250,250,248,0.75); border-bottom-color: var(--dxl-border); }
.dxl-link:hover { color: var(--dxl-text); background: rgba(0,0,0,0.045); }
/* the mark is drawn for dark ground — give it its ink chip back */
.dxl-logo { background: #16161a; padding: 3px; box-shadow: 0 0 0 1px var(--dxl-border-2); }

/* the button system inverts: ink buttons on paper */
.dxl-getstarted, .dxl-cta, .dxl-submit, .dxl-pv-post, .dxl-price-btn, .dxl-token-copy {
  background: #16161a; color: #ffffff; border-color: #16161a;
}
.dxl-getstarted:hover, .dxl-cta:hover, .dxl-submit:hover, .dxl-price-btn:hover, .dxl-token-copy:hover {
  background: #000000; color: #ffffff;
}
.dxl-cta { box-shadow: 0 10px 26px rgba(22,22,26,0.18); }
.dxl-cta:hover { box-shadow: 0 14px 30px rgba(22,22,26,0.24); transform: translateY(-2px); }
.dxl-cta.ghost { background: transparent; color: var(--dxl-text); border: 1px solid var(--dxl-border-2); box-shadow: none; }
.dxl-cta.ghost:hover { background: rgba(0,0,0,0.045); border-color: #bdbdb7; }
.dxl-price-btn.ghost { background: var(--dxl-surface); color: var(--dxl-text); border: 1px solid var(--dxl-border-2); }

/* type: ink headlines, no glow shadows */
.dxl-headline { color: #131316; text-shadow: none; }
.dxl-subhead { color: rgba(22,22,26,0.66); }
.dxl-sec-title, .dxl-showcase-title { color: #131316; text-shadow: none; }
.dxl-sec-sub { text-shadow: none; }
.dxl-eyebrow { background: #ffffff; border-color: var(--dxl-border); box-shadow: 0 1px 4px rgba(22,22,26,0.05); }
.dxl-eyebrow-dot { background: var(--dxl-red); }
.dxl-values i, .dxl-trust i { background: #cfcfc9; }

/* hero sign-up card: crisp white */
.dxl-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--dxl-border);
  box-shadow: 0 24px 70px rgba(22,22,26,0.12);
}
.dxl-form .auth-field input, .dxl-form .auth-field select { background: #ffffff; }
.dxl-form .auth-field input::placeholder { color: #a6a6ad; }
.dxl-form .auth-field input:focus, .dxl-form .auth-field select:focus {
  border-color: #16161a; box-shadow: 0 0 0 3px rgba(22,22,26,0.08);
}
.dxl-form .auth-checkbox-label input { accent-color: var(--dxl-red); }
.dxl-form .auth-error { background: rgba(201,79,84,0.07); border-color: rgba(201,79,84,0.3); color: #a13a3f; }
.dxl-form .oauth-btn { background: #ffffff; }
.dxl-form .oauth-btn:hover { background: var(--dxl-raised); border-color: #c9c9c3; }

/* product preview window */
.dxl-preview { box-shadow: 0 18px 50px rgba(22,22,26,0.10); }
.dxl-pv-bar { background: #f3f3f0; }
.dxl-pv-dot { background: #d8d8d3; }
.dxl-pv-url { background: #ffffff; }
.dxl-pv-me { background: linear-gradient(135deg, #e4e4df, #d2d2cc); }
.dxl-pv-av.a1 { background: linear-gradient(135deg, #d8d8d2, #c2c2bb); }
.dxl-pv-av.a2 { background: linear-gradient(135deg, #cccdc6, #b5b6af); }
.dxl-pv-clip, .dxl-clip-media { background: radial-gradient(120% 120% at 30% 20%, #e7e7e2, #d4d4ce 70%); }
.dxl-pv-play { background: #16161a; color: #ffffff; }
.dxl-comm-ic { background: linear-gradient(135deg, #efefeb, #dededa); }
.dxl-stack-av { border-color: #ffffff; }

/* landing feed preview + roadmap cards (landing.css additions) */
.dxl-feed-card { background: #ffffff; border: 1px solid var(--dxl-border); }
.dxl-feed-who b { color: var(--dxl-text); }
.dxl-feed-who span { color: var(--dxl-muted); }
.dxl-feed-game { color: #55555e; background: rgba(22,22,26,0.06); }
.dxl-feed-body { color: #45454d; }
.rmp-card { color: #45454d; background: #ffffff; border: 1px solid var(--dxl-border); }
.rmp-head, .dxl-roadmap-note { color: var(--dxl-text); }
.rmp-tag.now { color: #2c7a44; background: rgba(60,150,90,0.10); }
.rmp-tag.next { color: #55555e; background: rgba(22,22,26,0.07); }
.rmp-tag.later { color: #8b8b93; background: rgba(22,22,26,0.05); }

/* sections + pricing */
.dxl-showcase { background: none; border-top-color: var(--dxl-border); }
.dxl-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(22,22,26,0.018), transparent 45%); }
.dxl-price-amt { color: #131316; }
.dxl-price-card.featured { background: #ffffff; border-color: #bdbdb7; box-shadow: 0 16px 44px rgba(22,22,26,0.10); }
.dxl-price-badge { color: #ffffff; background: var(--dxl-red); }

/* official token block */
.dxl-token-card { background: #ffffff; border-color: var(--dxl-border); }
.dxl-token-warn { background: rgba(201,79,84,0.06); border-color: rgba(201,79,84,0.32); color: #7c3a3d; }
.dxl-token-warn strong { color: #a13a3f; }
.dxl-token-mint { color: #16161a; background: #f3f3f0; border-color: var(--dxl-border-2); }
.dxl-token-links a { background: #ffffff; border-color: var(--dxl-border-2); color: #55555e; }
.dxl-token-links a:hover { background: var(--dxl-raised); color: #16161a; }

/* final call-to-action: a deliberate ink panel on the paper page —
   its contents invert so nothing drowns in the dark ground */
.dxl-join-card { background: #16161a; border-color: #16161a; box-shadow: 0 26px 64px rgba(22,22,26,0.20); }
.dxl-join-card .dxl-sec-title { color: #ffffff; }
.dxl-join-card .dxl-sec-sub { color: rgba(255,255,255,0.66); }
.dxl-join-card .dxl-cta { background: #ffffff; color: #16161a; border-color: #ffffff; box-shadow: none; }
.dxl-join-card .dxl-cta:hover { background: #efefec; color: #16161a; box-shadow: none; }
.dxl-join-card .dxl-cta.ghost { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.34); }
.dxl-join-card .dxl-cta.ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.5); }

/* footer */
.dxl-footer { color: #8b8b93; }
.dxl-footer a { color: #55555e; }
.dxl-footer a:hover { color: #16161a; }

/* alive: cards breathe on hover, everything eases */
.dxl-feed-card, .rmp-card, .dxl-comm-card, .dxl-clip-card, .dxl-price-card, .dxl-pv-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dxl-feed-card:hover, .rmp-card:hover, .dxl-comm-card:hover, .dxl-clip-card:hover, .dxl-price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(22,22,26,0.10);
  border-color: #d4d4cf;
}