/* ============================================================
   SHINOBI-ARENA DESIGN TOKENS
   Shared token layer for all public pages (index, profile,
   missions, characters, etc.). Do NOT import into style.css —
   the game client keeps its own token scope.

   THEME: Naruto-Arena-inspired shinobi arena. Deep ink-navy
   tactical surfaces, shinobi-ember primary accent, warm amber
   chakra glow, crimson danger, chakra blue for info/ally,
   parchment/bone for light info zones. (Re-themed from the
   prior high-fantasy palette — see DESIGN_NOTES.md.
   Legacy token names like --ca-purple are kept to avoid churn
   but now hold shinobi-ember values; prefer the --ca-ember /
   --ca-amber / --ca-crimson / --ca-chakra aliases below.)
   ============================================================ */

:root {
  /* --- Ink-navy / Ground palette (tactical dark surfaces) --- */
  --ca-void:        #080706;   /* deep ink-navy body bg */
  --ca-smoke:       #111010;   /* near-black navy panel fill */
  --ca-ash:         #181719;   /* card surface */
  --ca-slate:       #242128;   /* border / divider dark */
  --ca-iron:        #302c35;   /* subtle raised surface */
  --ca-mist:        #4a4550;   /* soft divider */

  /* --- Bone / Parchment scale (light info zones) --- */
  --ca-bone:        #f2ede4;   /* primary text / parchment surface */
  --ca-parchment:   #c8beb0;   /* muted / meta text */
  --ca-dust:        #8f877c;   /* placeholder / disabled */

  /* --- Light content surfaces (warm-white / parchment "sheets")
         The dark navy shell is the FRAME; primary page content sits
         on these light surfaces with ink-navy text for readability. */
  --ca-surface-light: #eee5d6;  /* main body sheet — warm white */
  --ca-surface:       #f3ecdf;  /* parchment panel / card */
  --ca-surface-sunk:  #e2d7c6;  /* sunken / zebra / hover on light */
  --ca-ink:           #211a17;  /* primary text on light surfaces */
  --ca-ink-soft:      #5c5148;  /* secondary text on light */
  --ca-ink-faint:     #82766b;  /* meta / muted text on light */
  --ca-line-ink:      rgba(44, 34, 28, 0.16);  /* hairline on light */
  --ca-shadow-sheet:  0 18px 50px rgba(0, 0, 0, 0.5);  /* sheet float */

  /* --- Global cohesion tokens (preferred for website UI) --- */
  --ca-bg-page:       #080706;
  --ca-surface-warm:  #eee5d6;
  --ca-surface-card:  #eadfce;
  --ca-muted:         #a79d91;
  --ca-border:        rgba(44, 34, 28, 0.16);
  --ca-orange:        #d7953a;
  --ca-amber:         #f0bd62;
  --ca-purple-ui:     #8f78d8;
  --ca-violet:        #b19af2;
  --ca-danger:        #d15a5d;

  /* --- Shinobi accent trinity (ember / crimson / chakra blue) --- */
  --ca-purple:      #d7953a;   /* Shinobi Ember — primary CTA, active state */
  --ca-purple-lit:  #f0bd62;   /* warm amber chakra glow / hover */
  --ca-purple-dim:  #2f2214;   /* ember tint surface */
  --ca-red:         var(--ca-danger);   /* Shinobi Crimson — danger / enemy / damage */
  --ca-red-dim:     #351619;   /* crimson tint surface */
  --ca-blue:        #5aa7b5;   /* Chakra Blue — info / ally */
  --ca-blue-dim:    #14272c;   /* chakra blue tint surface */

  /* --- Forward-facing shinobi aliases (prefer these over --ca-purple* names) --- */
  --ca-ember:       var(--ca-orange);      /* primary action / active state */
  --ca-amber:       #f0bd62;               /* amber chakra glow / hover */
  --ca-crimson:     var(--ca-danger);      /* danger / enemy state */
  --ca-chakra:      var(--ca-blue);        /* chakra energy / info / ally */
  --ca-navy:        var(--ca-void);        /* tactical ground */
  --ca-purple-accent: var(--ca-purple-ui); /* secondary highlight */

  /* --- Gold / amber chakra (medals, #1, rewards) --- */
  --ca-gold:        #e7b85a;
  --ca-gold-warm:   #d7953a;

  /* --- Semantic aliases (used in CSS below) --- */
  --accent:         var(--ca-purple);
  --accent-lit:     var(--ca-purple-lit);
  --accent-dim:     var(--ca-purple-dim);
  --accent-glow:    rgba(215, 149, 58, 0.22);

  /* --- Glassmorphism & High-Contrast Gaming Tokens --- */
  --ca-glass-bg:        rgba(14, 18, 28, 0.78);
  --ca-glass-bg-hover:  rgba(20, 26, 40, 0.88);
  --ca-glass-border:    rgba(232, 128, 26, 0.22);
  --ca-glass-border-hover: rgba(255, 174, 66, 0.45);
  --ca-glass-blur:      blur(14px);
  --ca-shadow-glow:     0 8px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(232, 128, 26, 0.12);
  --danger:         var(--ca-danger);
  --info:           var(--ca-blue);

  /* --- Glow helpers --- */
  --glow-purple:    0 0 0 3px rgba(215, 149, 58, 0.28);
  --glow-red:       0 0 0 3px rgba(209, 90, 93, 0.28);
  --glow-blue:      0 0 0 3px rgba(90, 167, 181, 0.28);

  /* --- Surface borders --- */
  --border-void:    1px solid rgba(255, 255, 255, 0.05);
  --border-smoke:   1px solid rgba(255, 255, 255, 0.08);
  --border-slash:   1px solid rgba(215, 149, 58, 0.35);

  /* --- Typography scale (Outfit, already imported per page) --- */
  --font-ui:        "Outfit", system-ui, sans-serif;
  --fs-xs:          11px;
  --fs-sm:          13px;
  --fs-base:        15px;
  --fs-md:          17px;
  --fs-lg:          20px;
  --fs-xl:          24px;
  --fs-2xl:         30px;
  --fw-normal:      400;
  --fw-semi:        600;
  --fw-bold:        700;
  --fw-black:       800;

  /* --- Spacing rhythm --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* --- Radius --- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-pill: 999px;

  /* --- Clip paths (editorial slash corners) --- */
  --clip-slash-sm: polygon(8px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 8px);
  --clip-slash-md: polygon(14px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 14px);

  /* --- Transitions --- */
  --t-fast:  120ms ease;
  --t-base:  200ms ease;
  --t-slow:  350ms ease;

  /* --- Z-index layers --- */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* --- Ladder fills (replacing orange) --- */
  --ladder-fill-a: var(--ca-purple);
  --ladder-fill-b: var(--ca-purple-lit);
}

/* ============================================================
   HIDDEN-STATE GUARD
   Component classes below set `display: flex/grid/...`, which
   overrides the UA `[hidden] { display: none }` rule (class
   specificity beats the attribute-less UA rule). JS toggles
   auth/account state via the `hidden` attribute, so without
   this guard logged-in and logged-out UI render at the same
   time. This forces hidden elements to stay hidden everywhere.
   ============================================================ */
[hidden] {
  display: none !important;
}

/* ============================================================
   LEGACY LIGHT-SHEET UTILITIES
   Opt-in helpers for older website pages that still use their
   historical inline layouts. These keep the dark shell/nav while
   moving primary content onto parchment sheets.
   ============================================================ */
.ca-content-sheet,
.ca-light-card,
.ca-admin-panel {
  color: var(--ca-ink);
  border: 1px solid rgba(88, 64, 38, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 240, 228, 0.92)),
    var(--ca-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

.ca-content-sheet {
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.5vw, 30px);
}

.ca-light-card,
.ca-admin-panel {
  border-radius: var(--r-md);
}

.ca-form-field,
.ca-form-textarea,
.ca-form-select {
  width: 100%;
  border: 1px solid rgba(27, 35, 48, 0.16);
  background: #eadfce;
  color: var(--ca-ink);
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.ca-form-field,
.ca-form-select {
  min-height: 38px;
  padding: 0 12px;
}

.ca-form-textarea {
  min-height: 130px;
  padding: 12px;
  resize: vertical;
}

.ca-form-field:focus,
.ca-form-textarea:focus,
.ca-form-select:focus {
  border-color: rgba(196, 65, 36, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(196, 65, 36, 0.15);
}

.ca-thumb-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(27, 35, 48, 0.16);
  background: var(--ca-surface-sunk);
  border-radius: var(--r-md);
}

.ca-thumb-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.na-legacy-light {
  background:
    radial-gradient(ellipse at 16% 8%, rgba(215, 149, 58, 0.18), transparent 30%),
    radial-gradient(ellipse at 86% 10%, rgba(90, 167, 181, 0.11), transparent 28%),
    linear-gradient(155deg, #1c1511 0%, #17110f 42%, #100d0b 70%, #1e161b 100%);
}

.na-legacy-light .app {
  gap: 0;
}

.na-legacy-light .main {
  color: var(--ca-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 240, 232, 0.98)),
    var(--ca-surface-light);
  border-left: 1px solid rgba(215, 149, 58, 0.15);
  border-right: 1px solid rgba(27, 35, 48, 0.08);
  box-shadow: var(--ca-shadow-sheet);
}

.na-legacy-light .profile-search,
.na-legacy-light .profile-section,
.na-legacy-light .clan-profile-panel,
.na-legacy-light .clan-shell,
.na-legacy-light .avatar-panel,
.na-legacy-light .background-panel,
.na-legacy-light .reset-panel,
.na-legacy-light .release-panel,
.na-legacy-light .editor-stage,
.na-legacy-light .mission-panel,
.na-legacy-light .mainsection,
.na-legacy-light .news-editor-card,
.na-legacy-light .news-list-card,
.na-legacy-light .character-editor-modal,
.na-legacy-light .player-account-modal,
.na-legacy-light .clan-register-modal,
.na-legacy-light .goal-popup-card {
  color: var(--ca-ink);
  border: 1px solid rgba(88, 64, 38, 0.16);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 240, 228, 0.96)),
    var(--ca-surface);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.na-legacy-light .clan-card,
.na-legacy-light .editor-note,
.na-legacy-light .editor-count,
.na-legacy-light .character-editor-card,
.na-legacy-light .character-editor-summary,
.na-legacy-light .mission-list-item,
.na-legacy-light .mission-toggle,
.na-legacy-light .goal-card,
.na-legacy-light .news-post-entry,
.na-legacy-light .player-account-entry,
.na-legacy-light .player-account-summary-card,
.na-legacy-light .clan-register-section,
.na-legacy-light .info-row,
.na-legacy-light .quick-game-row,
.na-legacy-light .clan-profile-info-row,
.na-legacy-light .clan-profile-bio,
.na-legacy-light .clan-profile-member-row,
.na-legacy-light .reset-confirm {
  color: var(--ca-ink);
  border-color: var(--ca-line-ink);
  background: rgba(255, 253, 248, 0.72);
}

.na-legacy-light .character-editor-card:hover,
.na-legacy-light .mission-list-item:hover,
.na-legacy-light .mission-list-item.active,
.na-legacy-light .news-post-entry:hover,
.na-legacy-light .player-account-entry:hover,
.na-legacy-light .clan-card:hover {
  color: var(--ca-ink);
  border-color: rgba(215, 149, 58, 0.38);
  background: rgba(255, 246, 230, 0.96);
}

.na-legacy-light .release-title,
.na-legacy-light .mainsection-kicker,
.na-legacy-light .profile-block-head,
.na-legacy-light .clan-profile-block-head,
.na-legacy-light .clan-profile-member-heading,
.na-legacy-light .mission-panel-title,
.na-legacy-light .mission-section-heading,
.na-legacy-light .news-editor-title,
.na-legacy-light .news-list-title,
.na-legacy-light .editor-note-title,
.na-legacy-light .background-panel-title,
.na-legacy-light .avatar-panel-title,
.na-legacy-light .reset-panel-title,
.na-legacy-light .clan-register-head,
.na-legacy-light .section-title {
  color: var(--ca-ink);
  border-bottom-color: rgba(196, 65, 36, 0.18);
}

.na-legacy-light .release-title::before,
.na-legacy-light .mainsection-kicker::before,
.na-legacy-light .mission-panel-title::before,
.na-legacy-light .background-panel-title::before,
.na-legacy-light .avatar-panel-title::before,
.na-legacy-light .profile-star,
.na-legacy-light .clan-profile-star,
.na-legacy-light .clan-register-star,
.na-legacy-light .mainsection-label,
.na-legacy-light .clan-profile-member-rank {
  color: var(--ca-violet);
}

.na-legacy-light .release-copy,
.na-legacy-light .mainsection-meta,
.na-legacy-light .mainsection-body,
.na-legacy-light .mainsection-balances,
.na-legacy-light .profile-search-status,
.na-legacy-light .avatar-preview-copy,
.na-legacy-light .avatar-hint,
.na-legacy-light .avatar-status,
.na-legacy-light .background-label,
.na-legacy-light .background-hint,
.na-legacy-light .background-status,
.na-legacy-light .reset-copy,
.na-legacy-light .reset-status,
.na-legacy-light .editor-note-copy,
.na-legacy-light .editor-count-label,
.na-legacy-light .character-editor-status,
.na-legacy-light .character-editor-id,
.na-legacy-light .mission-panel-copy,
.na-legacy-light .mission-field,
.na-legacy-light .mission-field-help,
.na-legacy-light .mission-section-copy,
.na-legacy-light .mission-list-meta,
.na-legacy-light .goal-card-meta,
.na-legacy-light .goal-popup-copy,
.na-legacy-light .mission-editor-status,
.na-legacy-light .news-admin-label,
.na-legacy-light .news-admin-help,
.na-legacy-light .news-admin-status,
.na-legacy-light .news-post-entry-meta,
.na-legacy-light .player-accounts-status,
.na-legacy-light .player-account-status,
.na-legacy-light .player-account-entry-meta,
.na-legacy-light .player-account-summary-label,
.na-legacy-light .clan-profile-label,
.na-legacy-light .clan-profile-empty,
.na-legacy-light .clan-profile-status,
.na-legacy-light .clan-register-copy,
.na-legacy-light .clan-register-label,
.na-legacy-light .clan-register-status {
  color: var(--ca-ink-soft);
}

.na-legacy-light .info-value,
.na-legacy-light .clan-profile-value,
.na-legacy-light .clan-profile-member-cell,
.na-legacy-light .clan-profile-member-date,
.na-legacy-light .player-account-summary-value,
.na-legacy-light .character-editor-card-name,
.na-legacy-light .mission-list-title,
.na-legacy-light .goal-card-summary,
.na-legacy-light .news-post-entry-title,
.na-legacy-light .clan-summary-copy,
.na-legacy-light .clan-register-value {
  color: var(--ca-ink);
}

.na-legacy-light .info-value.accent,
.na-legacy-light .clan-profile-value.accent,
.na-legacy-light .character-editor-name,
.na-legacy-light .editor-count-value,
.na-legacy-light .clan-summary-copy .rank,
.na-legacy-light .clan-summary-copy strong {
  color: #8a4f00;
}

.na-legacy-light .profile-search-input,
.na-legacy-light .avatar-input,
.na-legacy-light .background-input,
.na-legacy-light .character-editor-search,
.na-legacy-light .mission-search,
.na-legacy-light .mission-field input,
.na-legacy-light .mission-field select,
.na-legacy-light .news-admin-input,
.na-legacy-light .news-admin-textarea,
.na-legacy-light .player-accounts-search,
.na-legacy-light .clan-register-input,
.na-legacy-light .clan-register-textarea {
  border: 1px solid rgba(27, 35, 48, 0.16);
  background: #eadfce;
  color: var(--ca-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.na-legacy-light .profile-search-input::placeholder,
.na-legacy-light .avatar-input::placeholder,
.na-legacy-light .background-input::placeholder,
.na-legacy-light .character-editor-search::placeholder,
.na-legacy-light .mission-search::placeholder,
.na-legacy-light .news-admin-input::placeholder,
.na-legacy-light .news-admin-textarea::placeholder,
.na-legacy-light .player-accounts-search::placeholder,
.na-legacy-light .clan-register-input::placeholder,
.na-legacy-light .clan-register-textarea::placeholder {
  color: var(--ca-ink-faint);
}

.na-legacy-light .profile-search-input:focus,
.na-legacy-light .avatar-input:focus,
.na-legacy-light .background-input:focus,
.na-legacy-light .character-editor-search:focus,
.na-legacy-light .character-editor-json:focus,
.na-legacy-light .mission-search:focus,
.na-legacy-light .mission-field input:focus,
.na-legacy-light .mission-field select:focus,
.na-legacy-light .news-admin-input:focus,
.na-legacy-light .news-admin-textarea:focus,
.na-legacy-light .player-accounts-search:focus,
.na-legacy-light .player-account-editor:focus,
.na-legacy-light .clan-register-input:focus,
.na-legacy-light .clan-register-textarea:focus {
  border-color: rgba(215, 149, 58, 0.58);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(215, 149, 58, 0.18), 0 0 0 5px rgba(124, 77, 255, 0.08);
}

.na-legacy-light .character-editor-json,
.na-legacy-light .player-account-editor {
  border: 1px solid rgba(27, 35, 48, 0.14);
  background: #12161f;
  color: #f8efe0;
}

.na-legacy-light .mission-button.secondary,
.na-legacy-light .character-editor-button.secondary,
.na-legacy-light .player-account-button.secondary,
.na-legacy-light .news-admin-button.secondary,
.na-legacy-light .clan-register-button,
.na-legacy-light .reset-button.secondary,
.na-legacy-light .goal-card-button {
  border: 1px solid rgba(27, 35, 48, 0.16);
  background: rgba(255, 253, 248, 0.82);
  color: var(--ca-ink);
}

.na-legacy-light .profile-search-button,
.na-legacy-light .avatar-save,
.na-legacy-light .background-save,
.na-legacy-light .mission-button.primary,
.na-legacy-light .character-editor-button.primary,
.na-legacy-light .player-account-button.primary,
.na-legacy-light .news-admin-button.primary,
.na-legacy-light .clan-card button,
.na-legacy-light .clan-register-button.primary,
.na-legacy-light .reset-button.primary {
  border: 1px solid rgba(215, 149, 58, 0.45);
  background: linear-gradient(135deg, var(--ca-orange) 0%, var(--ca-amber) 74%, var(--ca-violet) 100%);
  color: #fffaf2;
  box-shadow: 0 10px 20px rgba(215, 149, 58, 0.2);
}

.na-legacy-light .avatar-preview,
.na-legacy-light .profile-avatar,
.na-legacy-light .profile-clan-badge,
.na-legacy-light .clan-avatar,
.na-legacy-light .clan-profile-avatar,
.na-legacy-light .clan-profile-member-avatar,
.na-legacy-light .character-editor-card-face,
.na-legacy-light .character-editor-face {
  border: 1px solid rgba(27, 35, 48, 0.16);
  background: var(--ca-surface-sunk);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.na-legacy-light .profile-avatar,
.na-legacy-light .avatar-preview,
.na-legacy-light .clan-avatar,
.na-legacy-light .clan-profile-avatar,
.na-legacy-light .clan-profile-member-avatar,
.na-legacy-light .character-editor-card-face,
.na-legacy-light .character-editor-face {
  object-fit: cover;
}

.na-legacy-light .profile-clan-badge,
.na-legacy-light .clan-profile-level-meter,
.na-legacy-light .clan-profile-member-level,
.na-legacy-light .ladder-bar {
  background: var(--ca-surface-sunk);
}

.na-legacy-light .clan-profile-member-row-header {
  background: rgba(235, 229, 215, 0.86);
  color: var(--ca-ink);
  font-weight: var(--fw-black);
}

.na-legacy-light .stats-panel,
.na-legacy-light .ladder {
  border-color: rgba(215, 149, 58, 0.14);
}

@media (max-width: 860px) {
  .na-legacy-light .main {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
}

/* ============================================================
   HOMEPAGE COMPONENT STYLES
   All homepage-specific styling lives here, not in style.css.
   style.css is for the game client only.
   ============================================================ */

/* ── RESET / BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body:not(.selection-client-page):not(.ingame-client-page) {
  margin: 0;
  min-height: 100vh;
  background-color: #07090e !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232, 128, 26, 0.12) 0%, transparent 70%),
    radial-gradient(circle at 85% 20%, rgba(124, 77, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(232, 128, 26, 0.06) 0%, transparent 50%),
    linear-gradient(90deg, rgba(3, 4, 7, 0.5) 0%, transparent 12%, transparent 88%, rgba(3, 4, 7, 0.5) 100%),
    url("shinobi-seal-pattern.svg?v=3") !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-position: top center, right 20%, left 80%, center center, top left !important;
  background-size: auto, auto, auto, auto, 240px 240px !important;
  color: var(--ca-bone);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ── NAV ──────────────────────────────────────────────────── */
.ca-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(13, 16, 26, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(232, 128, 26, 0.28);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65), 0 0 12px rgba(232, 128, 26, 0.08);
}

.ca-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

/* Seal glyph */
.ca-nav-seal {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.ca-seal-svg {
  width: 32px;
  height: 37px;
}

/* Center links */
.ca-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ca-nav-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-parchment);
  padding: 4px 0;
  transition: color var(--t-fast);
}

.ca-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--t-fast);
}

.ca-nav-link:hover {
  color: var(--ca-bone);
}

.ca-nav-link.active {
  color: var(--ca-amber);
}

.ca-nav-link.active::after {
  background: linear-gradient(90deg, var(--ca-orange), var(--ca-violet));
}

.ca-nav-num {
  font-size: 9px;
  font-weight: 700;
  color: var(--ca-purple-lit);
  vertical-align: super;
  line-height: 1;
  letter-spacing: 0;
}

/* ── NAV DROPDOWN MENUS (Game Manual / Ladders / Ninja Missions) ── */
.ca-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* toggle button styled identically to a nav link */
.ca-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-parchment);
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--t-fast);
}
.ca-nav-toggle:hover { color: var(--ca-bone); }
.ca-nav-toggle.active { color: var(--ca-amber); }

.ca-caret {
  font-size: 8px;
  line-height: 1;
  transition: transform var(--t-fast);
}
.ca-nav-item.open .ca-caret { transform: rotate(180deg); }

/* dropdown panel — dark ink surface w/ ember hover (matches account menu) */
.ca-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(15, 20, 32, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(232, 128, 26, 0.35);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 16px rgba(232, 128, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1010;
}
/* a small hover bridge so the menu doesn't close in the gap */
.ca-nav-menu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}
.ca-nav-item:hover .ca-nav-menu,
.ca-nav-item:focus-within .ca-nav-menu,
.ca-nav-item.open .ca-nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.ca-nav-menu-link {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ca-parchment);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.ca-nav-menu-link:hover,
.ca-nav-menu-link:focus-visible {
  background: rgba(215, 149, 58, 0.14);
  color: var(--ca-bone);
  outline: none;
}

/* hamburger (hidden on desktop; shown via responsive block) */
.ca-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.ca-nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ca-bone);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

/* Ryo shop trigger (injected by nav.js, sits just left of the account block) */
.ca-nav-shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 12px 5px 6px;
  border: 1px solid rgba(215, 149, 58, 0.35);
  border-radius: 999px;
  background: rgba(215, 149, 58, 0.1);
  color: var(--ca-bone);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ca-nav-shop:hover {
  background: rgba(215, 149, 58, 0.22);
  box-shadow: 0 0 0 2px rgba(215, 149, 58, 0.25);
  transform: translateY(-1px);
}
.ca-nav-shop:active {
  transform: scale(0.97);
}
.ca-nav-shop-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe6a8, #e7b85a 55%, #d7953a 100%);
  color: #4a2a05;
  font-size: 11px;
  font-weight: 900;
}
.ca-nav-shop-balance {
  color: #e7b85a;
}

/* Right: account */
.ca-nav-account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 200px;
}

.ca-nav-guest {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ca-nav-auth-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ca-parchment);
  transition: color var(--t-fast);
}

.ca-nav-auth-link:hover {
  color: var(--ca-purple-lit);
}

.ca-nav-auth-sep {
  color: var(--ca-mist);
  font-size: 12px;
}

.ca-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ca-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--ca-purple-dim), var(--ca-purple));
  border: 1px solid rgba(215, 149, 58, 0.5);
  flex: 0 0 auto;
}

.ca-nav-welcome {
  font-size: 12px;
  color: var(--ca-parchment);
  white-space: nowrap;
}

.ca-nav-welcome strong {
  color: var(--ca-purple-lit);
}

.ca-nav-logout-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-red);
  background: transparent;
  border: 1px solid rgba(209, 90, 93, 0.35);
  padding: 3px 10px;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.ca-nav-logout-btn:hover {
  background: rgba(209, 90, 93, 0.1);
  border-color: rgba(209, 90, 93, 0.65);
}

/* ── HERO ──────────────────────────────────────────────────── */
.ca-hero {
  position: relative;
  width: 100%;
  background: #1a1622;
  border-bottom: 1px solid rgba(232, 128, 26, 0.35);
  overflow: hidden;
}

.ca-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 100% at 50% -20%, rgba(232, 128, 26, 0.22), transparent 75%),
    linear-gradient(90deg, rgba(5, 7, 14, 0.35) 0%, transparent 25%, transparent 75%, rgba(5, 7, 14, 0.35) 100%),
    linear-gradient(180deg, rgba(5, 7, 14, 0.15) 0%, transparent 50%, rgba(5, 7, 14, 0.45) 100%);
  pointer-events: none;
}

.ca-hero-banners,
.ca-hero-banner {
  position: absolute;
  inset: 0;
}

.ca-hero-banners {
  z-index: 1;
  background-image: url("assets/home-banners/leaf.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ca-hero-banner {
  position: absolute;
  inset: 0;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 0;
  animation: ca-hero-banner-rotation 24s infinite linear;
  will-change: opacity;
}

.ca-hero-banner--cloud {
  animation-delay: 0s;
  background-image: url("assets/home-banners/cloud.png") !important;
}

.ca-hero-banner--leaf {
  animation-delay: -18s;
  background-image: url("assets/home-banners/leaf.png") !important;
}

.ca-hero-banner--sound {
  animation-delay: -12s;
  background-image: url("assets/home-banners/sound.png") !important;
}

.ca-hero-banner--sand {
  animation-delay: -6s;
  background-image: url("assets/home-banners/sand.png") !important;
}

@keyframes ca-hero-banner-rotation {
  0% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-hero-banner {
    animation: none;
  }

  .ca-hero-banner--cloud {
    opacity: 1;
  }
}

.ca-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 240px;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
}

.ca-hero-arrow {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.15);
  user-select: none;
  text-align: center;
  letter-spacing: -2px;
}

.ca-hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Play Now CTA */
.ca-hero-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 28px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ca-orange) 0%, var(--ca-amber) 68%, var(--ca-violet) 100%);
  border: none;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  box-shadow: 0 4px 24px rgba(215, 149, 58, 0.42), 0 2px 10px rgba(124, 77, 255, 0.24);
  transition: box-shadow var(--t-base), transform var(--t-fast);
}

.ca-hero-play:hover {
  box-shadow: 0 6px 32px rgba(215, 149, 58, 0.62), 0 4px 16px rgba(124, 77, 255, 0.32);
  transform: translateY(-1px);
}

/* Wordmark */
.ca-hero-wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ca-hero-word {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-bone);
  text-shadow: 0 0 40px rgba(215, 149, 58, 0.4), 0 2px 0 rgba(0, 0, 0, 0.6);
  line-height: 1;
}

.ca-hero-seal {
  width: 44px;
  height: 50px;
  flex: 0 0 auto;
}

/* Tagline */
.ca-hero-tagline {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 231, 220, 0.65);
}

.ca-hero--compact .ca-hero-inner {
  height: 132px;
  grid-template-columns: 42px 1fr 42px;
}

.ca-hero--compact .ca-hero-center {
  gap: 8px;
}

.ca-hero--compact .ca-hero-play {
  padding: 6px 20px;
  font-size: 11px;
}

.ca-hero--compact .ca-hero-word {
  font-size: clamp(26px, 3.8vw, 42px);
}

.ca-hero--compact .ca-hero-seal {
  width: 34px;
  height: 40px;
}

.ca-hero--compact .ca-hero-tagline {
  letter-spacing: 0.16em;
}

/* ── PAGE LAYOUT ───────────────────────────────────────────── */
.ca-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 0 28px;
  align-items: start;
}

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.ca-main {
  position: relative;
  padding-top: 28px;
}

/* Kanji watermark */
.ca-watermark {
  position: absolute;
  top: -20px;
  right: -12px;
  font-size: 160px;
  font-weight: 900;
  color: rgba(215, 149, 58, 0.04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
  overflow: hidden;
}

/* ANNOUNCEMENT oversized heading */
.ca-announce-heading {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: clamp(44px, 5.2vw, 64px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ca-orange);
  line-height: 1;
  opacity: 0.92;
}

/* ── RELEASES ──────────────────────────────────────────────── */
.ca-releases {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
  padding: 20px;
  background: var(--ca-bone);
  border-top: 3px solid var(--ca-orange);
}

.ca-section-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a4f00;
}

.ca-release-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ca-release-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: border-color var(--t-base);
}

.ca-release-card:hover {
  border-color: rgba(215, 149, 58, 0.3);
}

.ca-release-face {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ddd;
}

.ca-release-label {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

/* ── NEWS SECTION ──────────────────────────────────────────── */
.ca-news-section {
  position: relative;
  z-index: 1;
}

.ca-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.news-status {
  min-height: 18px;
  font-size: 12px;
  color: var(--ca-parchment);
}

.news-status[data-state="error"] {
  color: #ff8f8f;
}

.ca-news-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.ca-news-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(215, 149, 58, 0.08);
  border: 1px solid rgba(215, 149, 58, 0.3);
  color: var(--ca-purple-lit);
  font-size: 18px;
  line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.ca-news-btn:hover:not(:disabled) {
  background: rgba(215, 149, 58, 0.18);
  border-color: rgba(215, 149, 58, 0.6);
}

.ca-news-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.ca-news-counter {
  font-size: 12px;
  color: var(--ca-parchment);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* News content container — JS injects .news-post cards here */
.ca-news-content {
  display: grid;
  gap: 16px;
}

/* ── NEWS POST (rendered by index.js) ──────────────────────── */
/* These selectors must match exactly what renderNewsPost() creates */
.news-post {
  background: var(--ca-bone);
  border-top: 3px solid var(--ca-orange);
  padding: 24px 24px 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.mainsection-kicker {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: #1a1218;
  letter-spacing: -0.01em;
}

.mainsection-kicker::before {
  content: '</ ';
  color: var(--ca-violet);
  font-weight: 400;
}

.mainsection-kicker::after {
  content: ' >';
  color: var(--ca-violet);
  font-weight: 400;
}

.mainsection-meta {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 12px;
  color: #666;
}

.mainsection-meta .byline {
  color: #8a4f00;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.mainsection-body {
  font-size: 14px;
  line-height: 1.7;
  color: #2a2a2a;
}

.mainsection-body p {
  margin: 0 0 12px;
}

.mainsection-body p:last-child {
  margin-bottom: 0;
}

.news-divider {
  height: 1px;
  margin: 16px 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(215, 149, 58, 0.5), transparent);
}

/* Character change entries */
.news-change-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a4f00;
}

.news-change-title::before {
  content: '/ ';
  opacity: 0.5;
}

.news-change-list {
  display: grid;
  gap: 10px;
}

.news-change-group {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.news-change-group-list {
  display: grid;
  gap: 8px;
}

.news-change-character {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #ccc;
}

.news-change-copy {
  min-width: 0;
}

.news-change-character-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1218;
  margin-bottom: 4px;
}

.news-change-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.news-change-item {
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.news-change-type {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-change-type.buff {
  background: rgba(99, 214, 104, 0.15);
  border: 1px solid rgba(99, 214, 104, 0.3);
  color: #2a7a2e;
}

.news-change-type.nerf {
  background: rgba(209, 90, 93, 0.12);
  border: 1px solid rgba(209, 90, 93, 0.28);
  color: var(--ca-red);
}

.news-change-skill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 3px;
  background: rgba(215, 149, 58, 0.1);
  border: 1px solid rgba(215, 149, 58, 0.22);
  color: #8a4f00;
  font-size: 11px;
  font-weight: 600;
}

.news-change-skill-image {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #eee;
}

.news-change-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  white-space: pre-line;
  font-style: normal;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.ca-sidebar {
  position: relative;
  padding-top: 28px;
}

.ca-sidebar-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 12, 0.82) 0%, rgba(10, 9, 12, 0.97) 100%),
    var(--sidebar-backdrop, none) center/cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

.ca-sidebar > * {
  position: relative;
  z-index: 1;
}

.ca-sidebar-section {
  margin-bottom: 22px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(215, 149, 58, 0.18);
  border-top: 2px solid var(--ca-purple);
}

.ca-sidebar-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-purple-lit);
}

.ca-sidebar-subtitle {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 174, 66, 0.85);
}

/* Auth form */
.ca-auth-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ca-parchment);
  line-height: 1.4;
}

.ca-auth-form {
  display: grid;
  gap: 8px;
}

.ca-auth-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(215, 149, 58, 0.25);
  color: var(--ca-bone);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.ca-auth-input::placeholder {
  color: var(--ca-dust);
}

.ca-auth-input:focus {
  border-color: var(--ca-purple);
  box-shadow: var(--glow-purple);
}

.ca-auth-btn {
  width: 100%;
  height: 38px;
  background: linear-gradient(135deg, var(--ca-purple) 0%, var(--ca-purple-lit) 100%);
  border: none;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: var(--clip-slash-sm);
  box-shadow: 0 4px 14px rgba(215, 149, 58, 0.3);
  transition: box-shadow var(--t-base);
}

.ca-auth-btn:hover {
  box-shadow: 0 4px 22px rgba(215, 149, 58, 0.5);
}

.ca-auth-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ca-purple-lit);
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.ca-auth-status {
  min-height: 16px;
  margin: 0;
  font-size: 12px;
  color: var(--ca-parchment);
}

.ca-auth-status[data-state="error"] { color: #ff8f8f; }
.ca-auth-status[data-state="success"] { color: #9ce2a1; }

/* Account panel */
.ca-account-panel {
  /* shown/hidden via JS: `hidden` attribute */
}

.ca-account-greeting {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ca-bone);
}

.ca-account-name {
  color: var(--ca-purple-lit);
  font-weight: 700;
}

.ca-account-actions {
  display: grid;
  gap: 1px;
}

/* Shared .account-action class used by JS */
.account-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--ca-parchment);
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.account-action svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex: 0 0 auto;
  opacity: 0.65;
}

.account-action:hover {
  color: var(--ca-bone);
  background: rgba(215, 149, 58, 0.08);
  border-left-color: rgba(215, 149, 58, 0.4);
}

.ca-logout-action {
  margin-top: 6px;
  color: #f09090;
  border-left-color: transparent;
}

.ca-logout-action:hover {
  color: #ffaaaa;
  background: rgba(209, 90, 93, 0.1);
  border-left-color: rgba(209, 90, 93, 0.5);
}

/* ── LEADERBOARD PANELS ────────────────────────────────────── */
.ca-ladder-panel,
.ca-stats-panel {
  margin-bottom: 16px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(215, 149, 58, 0.15);
  border-top: 2px solid var(--ca-purple);
}

.ca-ladder-title {
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(215, 149, 58, 0.2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-purple-lit);
}

.ca-ladder-list,
.ca-stats-list,
.ca-stats-list {
  display: grid;
  gap: 6px;
}

/* Shared .ladder-row / .ladder-rank / .ladder-name etc. (also used by JS) */
.ladder-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 4px 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ladder-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ladder-rank {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: rgba(215, 149, 58, 0.12);
  border: 1px solid rgba(215, 149, 58, 0.28);
  font-size: 11px;
  font-weight: 800;
  color: var(--ca-purple-lit);
  line-height: 1;
}

.ladder-name {
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ca-bone);
  line-height: 1.2;
}

.ladder-name a {
  color: inherit;
  text-decoration: none;
}

.ladder-name a:hover {
  color: var(--ca-purple-lit);
}

.ladder-bar {
  height: 12px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.ladder-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ca-purple) 0%, var(--ca-purple-lit) 100%);
}

.ladder-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Stats list */
.ca-stats-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: var(--ca-parchment);
  line-height: 1.45;
  gap: 4px;
}

.ca-stats-list li {
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ca-page {
    grid-template-columns: 1fr;
  }
  .ca-sidebar {
    order: -1;
    padding-top: 0;
    margin-top: 20px;
  }
  .ca-sidebar-backdrop {
    display: none;
  }
  .ca-sidebar-section,
  .ca-ladder-panel,
  .ca-stats-panel {
    background: rgba(10, 9, 12, 0.9);
  }
}

/* ── MOBILE / TABLET NAV (hamburger + accordion dropdowns) ── */
@media (max-width: 960px) {
  .ca-nav-burger { display: flex; }
  .ca-nav-inner {
    grid-template-columns: auto auto 1fr;
    gap: 12px;
  }
  .ca-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #111010;
    border-top: 1px solid rgba(215, 149, 58, 0.28);
    border-bottom: 1px solid rgba(215, 149, 58, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    padding: 8px 16px 16px;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    display: none;
  }
  .ca-nav.ca-nav-mobile-open .ca-nav-links { display: flex; }
  .ca-nav-item { flex-direction: column; align-items: stretch; }
  .ca-nav-link,
  .ca-nav-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 13px 2px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  /* submenus expand inline (accordion), driven by .open only */
  .ca-nav-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-base);
  }
  .ca-nav-item:hover .ca-nav-menu,
  .ca-nav-item:focus-within .ca-nav-menu {
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
  }
  .ca-nav-item.open .ca-nav-menu {
    visibility: visible;
    pointer-events: auto;
    max-height: 600px;
  }
  .ca-nav-menu::before { display: none; }
  .ca-nav-menu-link { white-space: normal; padding: 11px 12px; }
}

@media (max-width: 680px) {
  .ca-nav-inner {
    padding: 0 14px;
  }
  .ca-nav-account {
    min-width: 0;
  }
  .ca-hero-inner {
    grid-template-columns: 32px 1fr 32px;
    height: 180px;
  }
  .ca-hero-word {
    font-size: 28px;
  }
  .ca-page {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ca-release-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SHARED SUBPAGE NAV: PLAY NOW CTA + ACCOUNT DROPDOWN
   Subpages no longer have a left sidebar; account/admin tools
   and Play Now live in the top nav. The #auth-panel section is
   physically moved here, so all index.js IDs are preserved.
   ============================================================ */
.ca-nav-account {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

/* Play Now CTA in the nav (single #play-now-button instance) */
.ca-nav-play {
  height: 30px;
  padding: 0 16px;
  border: 1px solid rgba(215, 149, 58, 0.6);
  background: linear-gradient(135deg, var(--ca-orange) 0%, var(--ca-amber) 68%, var(--ca-violet) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: var(--clip-slash-sm);
  box-shadow: 0 0 14px rgba(215, 149, 58, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--t-base), transform var(--t-fast);
}
.ca-nav-play:hover {
  box-shadow: 0 0 22px rgba(215, 149, 58, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* Account trigger (opens dropdown) */
.ca-account-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}
.ca-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 12px;
  color: var(--ca-parchment);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.ca-account-trigger:hover {
  color: var(--ca-bone);
  border-color: rgba(215, 149, 58, 0.4);
}
.ca-account-trigger .ca-nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ca-purple-dim), var(--ca-purple));
  border: 1px solid rgba(215, 149, 58, 0.5);
  flex: 0 0 auto;
}
.ca-account-trigger .ca-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ca-account-caret {
  font-size: 9px;
  color: var(--ca-purple-lit);
  transition: transform var(--t-fast);
}
.ca-account-trigger[aria-expanded="true"] .ca-account-caret {
  transform: rotate(180deg);
}

/* Dropdown panel — hosts the moved #auth-panel section */
.ca-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 68px);
  overflow: hidden auto;
  background: #111010;
  border: 1px solid rgba(215, 149, 58, 0.3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
  padding: 18px 20px 20px;
  z-index: var(--z-modal);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.ca-account-menu::-webkit-scrollbar {
  width: 10px;
}
.ca-account-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}
.ca-account-menu::-webkit-scrollbar-thumb {
  background: rgba(215, 149, 58, 0.42);
  border: 2px solid #111010;
  border-radius: 999px;
}
/* Neutralise the moved section's sidebar spacing inside the menu */
.ca-account-menu #auth-panel.group,
.ca-account-menu > #auth-panel {
  margin: 0;
}
.ca-account-menu #admin-panel-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ca-account-menu .group-title,
.ca-account-menu #auth-title {
  margin: 0 0 12px;
  padding: 0;
  color: var(--ca-bone);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.ca-account-menu #admin-panel-section .group-title {
  margin-top: 0;
  margin-bottom: 10px;
}

.ca-account-menu .account-greeting,
.ca-account-menu .auth-description {
  margin: 0 0 12px;
  color: var(--ca-parchment);
  font-size: 13px;
  line-height: 1.4;
}

.ca-account-menu .account-actions,
.ca-account-menu .nav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.ca-account-menu .account-action,
.ca-account-menu .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--ca-parchment);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  transform: none;
}

.ca-account-menu .account-action::before,
.ca-account-menu .account-action::after,
.ca-account-menu .nav-link::before,
.ca-account-menu .nav-link::after {
  display: none;
  content: none;
}

.ca-account-menu .account-action svg,
.ca-account-menu .nav-link svg {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  opacity: 0.68;
  transform: none;
}

.ca-account-menu .account-action span,
.ca-account-menu .nav-link span {
  min-width: 0;
}

.ca-account-menu .account-action:hover,
.ca-account-menu .account-action.active,
.ca-account-menu .nav-link:hover,
.ca-account-menu .nav-link.active {
  color: var(--ca-bone);
  border-left-color: rgba(215, 149, 58, 0.55);
  background: rgba(215, 149, 58, 0.09);
}

.ca-account-menu .ca-logout-action,
.ca-account-menu #logout-button {
  margin-top: 6px;
  color: #e68b8e;
}

.ca-account-menu .ca-logout-action:hover,
.ca-account-menu #logout-button:hover {
  color: #ffc0c2;
  border-left-color: rgba(209, 90, 93, 0.55);
  background: rgba(209, 90, 93, 0.1);
}

@media (max-width: 680px) {
  .ca-account-menu {
    position: fixed;
    top: 56px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 72px);
  }
}

/* ============================================================
   WEBSITE DARK PALETTE REFRESH
   Scoped to brand.css pages only. The in-game client uses
   style.css and is intentionally untouched.
   ============================================================ */
body,
body.na-legacy-light {
  background:
    radial-gradient(ellipse at 16% 8%, rgba(215, 149, 58, 0.14), transparent 30%),
    radial-gradient(ellipse at 86% 10%, rgba(143, 120, 216, 0.08), transparent 28%),
    linear-gradient(155deg, #1c1511 0%, #17110f 46%, #100d0b 72%, #1e161b 100%);
  color: var(--ca-bone);
}

.ca-nav,
.ca-nav-menu,
.ca-account-menu {
  background: rgba(17, 16, 16, 0.98);
  border-color: rgba(215, 149, 58, 0.22);
}

.ca-content-sheet,
.ca-light-card,
.ca-admin-panel,
.na-legacy-light .main,
.na-legacy-light .profile-search,
.na-legacy-light .profile-section,
.na-legacy-light .clan-profile-panel,
.na-legacy-light .clan-shell,
.na-legacy-light .avatar-panel,
.na-legacy-light .background-panel,
.na-legacy-light .reset-panel,
.na-legacy-light .release-panel,
.na-legacy-light .editor-stage,
.na-legacy-light .mission-panel,
.na-legacy-light .mainsection,
.na-legacy-light .news-editor-card,
.na-legacy-light .news-list-card,
.na-legacy-light .character-editor-modal,
.na-legacy-light .player-account-modal,
.na-legacy-light .clan-register-modal,
.na-legacy-light .goal-popup-card,
.ca-releases,
.news-post {
  color: var(--ca-ink);
  border: 1px solid var(--ca-line-ink);
  border-top-color: rgba(215, 149, 58, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    var(--ca-surface);
  box-shadow: var(--ca-shadow-sheet);
}

.na-legacy-light .clan-card,
.na-legacy-light .editor-note,
.na-legacy-light .editor-count,
.na-legacy-light .character-editor-card,
.na-legacy-light .character-editor-summary,
.na-legacy-light .mission-list-item,
.na-legacy-light .mission-toggle,
.na-legacy-light .goal-card,
.na-legacy-light .news-post-entry,
.na-legacy-light .player-account-entry,
.na-legacy-light .player-account-summary-card,
.na-legacy-light .clan-register-section,
.na-legacy-light .info-row,
.na-legacy-light .quick-game-row,
.na-legacy-light .clan-profile-info-row,
.na-legacy-light .clan-profile-bio,
.na-legacy-light .clan-profile-member-row,
.na-legacy-light .reset-confirm,
.ca-release-card,
.news-change-group,
.news-change-item {
  color: var(--ca-ink);
  border: 1px solid var(--ca-line-ink);
  background: var(--ca-surface-card);
}

.na-legacy-light .character-editor-card:hover,
.na-legacy-light .mission-list-item:hover,
.na-legacy-light .mission-list-item.active,
.na-legacy-light .news-post-entry:hover,
.na-legacy-light .player-account-entry:hover,
.na-legacy-light .clan-card:hover,
.ca-release-card:hover {
  color: var(--ca-ink);
  border-color: rgba(215, 149, 58, 0.48);
  background: #fff4df;
}

.ca-form-field,
.ca-form-textarea,
.ca-form-select,
.na-legacy-light .profile-search-input,
.na-legacy-light .avatar-input,
.na-legacy-light .background-input,
.na-legacy-light .character-editor-search,
.na-legacy-light .mission-search,
.na-legacy-light .mission-field input,
.na-legacy-light .mission-field select,
.na-legacy-light .news-admin-input,
.na-legacy-light .news-admin-textarea,
.na-legacy-light .player-accounts-search,
.na-legacy-light .clan-register-input,
.na-legacy-light .clan-register-textarea {
  color: var(--ca-ink);
  border: 1px solid rgba(44, 34, 28, 0.18);
  background: #f8f0e3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.ca-form-field:focus,
.ca-form-textarea:focus,
.ca-form-select:focus,
.na-legacy-light .profile-search-input:focus,
.na-legacy-light .avatar-input:focus,
.na-legacy-light .background-input:focus,
.na-legacy-light .character-editor-search:focus,
.na-legacy-light .character-editor-json:focus,
.na-legacy-light .mission-search:focus,
.na-legacy-light .mission-field input:focus,
.na-legacy-light .mission-field select:focus,
.na-legacy-light .news-admin-input:focus,
.na-legacy-light .news-admin-textarea:focus,
.na-legacy-light .player-accounts-search:focus,
.na-legacy-light .player-account-editor:focus,
.na-legacy-light .clan-register-input:focus,
.na-legacy-light .clan-register-textarea:focus {
  border-color: rgba(215, 149, 58, 0.62);
  background: #fffaf0;
  box-shadow: 0 0 0 3px rgba(215, 149, 58, 0.18), 0 0 0 5px rgba(143, 120, 216, 0.07);
}

.ca-form-field::placeholder,
.ca-form-textarea::placeholder,
.na-legacy-light .profile-search-input::placeholder,
.na-legacy-light .avatar-input::placeholder,
.na-legacy-light .background-input::placeholder,
.na-legacy-light .character-editor-search::placeholder,
.na-legacy-light .mission-search::placeholder,
.na-legacy-light .news-admin-input::placeholder,
.na-legacy-light .news-admin-textarea::placeholder,
.na-legacy-light .player-accounts-search::placeholder,
.na-legacy-light .clan-register-input::placeholder,
.na-legacy-light .clan-register-textarea::placeholder {
  color: var(--ca-ink-faint);
}

.ca-auth-input {
  color: var(--ca-bone);
  border: 1px solid rgba(215, 149, 58, 0.25);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.ca-auth-input:focus {
  border-color: rgba(215, 149, 58, 0.62);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--glow-purple);
}

.ca-auth-input::placeholder {
  color: var(--ca-dust);
}

.ca-announce-heading,
.ca-section-label,
.mainsection-meta .byline,
.news-change-title,
.news-change-skill,
.na-legacy-light .info-value.accent,
.na-legacy-light .clan-profile-value.accent,
.na-legacy-light .character-editor-name,
.na-legacy-light .editor-count-value,
.na-legacy-light .clan-summary-copy .rank,
.na-legacy-light .clan-summary-copy strong {
  color: var(--ca-amber);
}

.mainsection-kicker,
.mainsection-body,
.news-change-character-name,
.news-change-text,
.ca-release-label,
.na-legacy-light .info-value,
.na-legacy-light .clan-profile-value,
.na-legacy-light .clan-profile-member-cell,
.na-legacy-light .clan-profile-member-date,
.na-legacy-light .player-account-summary-value,
.na-legacy-light .character-editor-card-name,
.na-legacy-light .mission-list-title,
.na-legacy-light .goal-card-summary,
.na-legacy-light .news-post-entry-title,
.na-legacy-light .clan-summary-copy,
.na-legacy-light .clan-register-value {
  color: var(--ca-ink);
}

.mainsection-meta,
.news-status,
.ca-news-counter,
.na-legacy-light .release-copy,
.na-legacy-light .mainsection-meta,
.na-legacy-light .mainsection-body,
.na-legacy-light .mainsection-balances,
.na-legacy-light .profile-search-status,
.na-legacy-light .avatar-preview-copy,
.na-legacy-light .avatar-hint,
.na-legacy-light .avatar-status,
.na-legacy-light .background-label,
.na-legacy-light .background-hint,
.na-legacy-light .background-status,
.na-legacy-light .reset-copy,
.na-legacy-light .reset-status,
.na-legacy-light .editor-note-copy,
.na-legacy-light .editor-count-label,
.na-legacy-light .character-editor-status,
.na-legacy-light .character-editor-id,
.na-legacy-light .mission-panel-copy,
.na-legacy-light .mission-field,
.na-legacy-light .mission-field-help,
.na-legacy-light .mission-section-copy,
.na-legacy-light .mission-list-meta,
.na-legacy-light .goal-card-meta,
.na-legacy-light .goal-popup-copy,
.na-legacy-light .mission-editor-status,
.na-legacy-light .news-admin-label,
.na-legacy-light .news-admin-help,
.na-legacy-light .news-admin-status,
.na-legacy-light .news-post-entry-meta,
.na-legacy-light .player-accounts-status,
.na-legacy-light .player-account-status,
.na-legacy-light .player-account-entry-meta,
.na-legacy-light .player-account-summary-label,
.na-legacy-light .clan-profile-label,
.na-legacy-light .clan-profile-empty,
.na-legacy-light .clan-profile-status,
.na-legacy-light .clan-register-copy,
.na-legacy-light .clan-register-label,
.na-legacy-light .clan-register-status {
  color: var(--ca-ink-soft);
}

.mainsection-kicker::before,
.mainsection-kicker::after,
.na-legacy-light .release-title::before,
.na-legacy-light .mainsection-kicker::before,
.na-legacy-light .mission-panel-title::before,
.na-legacy-light .background-panel-title::before,
.na-legacy-light .avatar-panel-title::before,
.na-legacy-light .profile-star,
.na-legacy-light .clan-profile-star,
.na-legacy-light .clan-register-star,
.na-legacy-light .mainsection-label,
.na-legacy-light .clan-profile-member-rank {
  color: var(--ca-purple-accent);
}

.ca-auth-btn,
.ca-nav-play,
.ca-hero-play,
.na-legacy-light .profile-search-button,
.na-legacy-light .avatar-save,
.na-legacy-light .background-save,
.na-legacy-light .mission-button.primary,
.na-legacy-light .character-editor-button.primary,
.na-legacy-light .player-account-button.primary,
.na-legacy-light .news-admin-button.primary,
.na-legacy-light .clan-card button,
.na-legacy-light .clan-register-button.primary,
.na-legacy-light .reset-button.primary {
  border-color: rgba(215, 149, 58, 0.54);
  background: linear-gradient(135deg, #9f6028 0%, var(--ca-orange) 54%, var(--ca-amber) 100%);
  color: #17100a;
  box-shadow: 0 10px 24px rgba(215, 149, 58, 0.2);
}

.na-legacy-light .mission-button.secondary,
.na-legacy-light .character-editor-button.secondary,
.na-legacy-light .player-account-button.secondary,
.na-legacy-light .news-admin-button.secondary,
.na-legacy-light .clan-register-button,
.na-legacy-light .reset-button.secondary,
.na-legacy-light .goal-card-button {
  color: var(--ca-ink);
  border: 1px solid var(--ca-line-ink);
  background: #e7dbc8;
}

.news-change-type.buff {
  color: #2f7644;
  border-color: rgba(117, 181, 129, 0.34);
  background: rgba(117, 181, 129, 0.14);
}

.news-change-type.nerf,
.ca-auth-status[data-state="error"],
.news-status[data-state="error"] {
  color: #e68b8e;
}

.ca-auth-status[data-state="success"] {
  color: #9ed7aa;
}

/* ── BUG REPORTER MODAL & TRIGGER ───────────────────────────── */
.na-bug-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1c150c 0%, #3a2008 100%);
  color: #ffae42;
  border: 1px solid rgba(215, 149, 58, 0.4);
  border-radius: 24px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(232, 128, 26, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.na-bug-trigger:hover {
  transform: translateY(-2px);
  border-color: #ffae42;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.8), 0 0 18px rgba(232, 128, 26, 0.45);
}

.na-bug-trigger-icon {
  font-size: 15px;
}

.na-bug-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 7, 14, 0.82);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.na-bug-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.na-bug-modal {
  background: #faf8f3;
  color: #1b2330;
  border: 2px solid #8b7d5c;
  border-radius: 12px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.na-bug-overlay.active .na-bug-modal {
  transform: scale(1);
}

.na-bug-modal-header {
  background: linear-gradient(135deg, #1b2330 0%, #0d121a 100%);
  color: #f0ede8;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e8801a;
}

.na-bug-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffae42;
  display: flex;
  align-items: center;
  gap: 8px;
}

.na-bug-modal-close {
  background: none;
  border: none;
  color: #a8a095;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.na-bug-modal-close:hover {
  color: #e11836;
  background: rgba(225, 24, 54, 0.15);
}

.na-bug-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.na-bug-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.na-bug-field-group label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4c5562;
}

.na-bug-input,
.na-bug-select,
.na-bug-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(27, 35, 48, 0.2);
  border-radius: 6px;
  background: #ffffff;
  color: #1b2330;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.na-bug-input:focus,
.na-bug-select:focus,
.na-bug-textarea:focus {
  outline: none;
  border-color: #e8801a;
  box-shadow: 0 0 0 3px rgba(232, 128, 26, 0.15);
}

.na-bug-textarea {
  min-height: 100px;
  resize: vertical;
}

.na-bug-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1b2330;
  cursor: pointer;
}

.na-bug-checkbox-group input[type="checkbox"] {
  accent-color: #e8801a;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.na-bug-status-msg {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  display: none;
}

.na-bug-status-msg.error {
  display: block;
  background: rgba(225, 24, 54, 0.12);
  color: #c41e3a;
  border: 1px solid rgba(225, 24, 54, 0.3);
}

.na-bug-status-msg.success {
  display: block;
  background: rgba(47, 118, 68, 0.12);
  color: #1f7a3f;
  border: 1px solid rgba(47, 118, 68, 0.3);
}

.na-bug-modal-footer {
  padding: 14px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.na-bug-btn-secondary {
  padding: 8px 16px;
  background: #ebe5d7;
  color: #4c5562;
  border: 1px solid rgba(27, 35, 48, 0.2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.na-bug-btn-primary {
  padding: 8px 20px;
  background: linear-gradient(135deg, #e8801a 0%, #ffae42 100%);
  color: #17100a;
  border: 1px solid rgba(215, 149, 58, 0.5);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(232, 128, 26, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.na-bug-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(232, 128, 26, 0.45);
}

.na-bug-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── GLOBAL SHINOBI SCROLLBAR STYLING ──────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0d121a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #3a2a19;
  border: 1px solid rgba(232, 128, 26, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e8801a;
}

/* ── ADMIN DASHBOARD VISUAL POLISH ─────────────────────────────── */
.acp-table th {
  background: #141923 !important;
  color: #ffae42 !important;
  border-bottom: 2px solid #e8801a !important;
  font-family: 'Franklin', Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.acp-table tr:hover td {
  background: rgba(232, 128, 26, 0.06);
}

.na-bug-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.na-bug-badge.open {
  background: rgba(232, 128, 26, 0.18);
  color: #ffae42;
  border: 1px solid rgba(232, 128, 26, 0.45);
}

.na-bug-badge.investigating {
  background: rgba(44, 156, 219, 0.18);
  color: #2c9cdb;
  border: 1px solid rgba(44, 156, 219, 0.45);
}

.na-bug-badge.resolved {
  background: rgba(47, 118, 68, 0.18);
  color: #2f9e53;
  border: 1px solid rgba(47, 118, 68, 0.45);
}

.na-bug-badge.dismissed {
  background: rgba(105, 112, 124, 0.18);
  color: #8a92a0;
  border: 1px solid rgba(105, 112, 124, 0.45);
}

/* ============================================================
   MASTER UNIFIED WEBSITE REDESIGN SYSTEM
   Overrides legacy light-parchment sheets across all webpages.
   Unifies index, missions, story, profile, leaderboards, manual,
   and admin under a single dark shinobi design language.
   ============================================================ */

/* Global Dark Body Canvas */
body,
body.na-legacy-light {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(232, 128, 26, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 90%, rgba(163, 107, 255, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, #07090e 0%, #0d121c 50%, #05070a 100%) !important;
    color: #ffffff !important;
}

/* Master Dark Sheet Container (Main Content Surface) */
.na-legacy-light .main,
.ca-content-sheet,
.ca-light-card,
.ca-admin-panel,
.na-legacy-light .profile-search,
.na-legacy-light .profile-section,
.na-legacy-light .clan-profile-panel,
.na-legacy-light .clan-shell,
.na-legacy-light .avatar-panel,
.na-legacy-light .background-panel,
.na-legacy-light .reset-panel,
.na-legacy-light .release-panel,
.na-legacy-light .editor-stage,
.na-legacy-light .mission-panel,
.na-legacy-light .mainsection,
.na-legacy-light .news-editor-card,
.na-legacy-light .news-list-card,
.na-legacy-light .character-editor-modal,
.na-legacy-light .player-account-modal,
.na-legacy-light .clan-register-modal,
.na-legacy-light .goal-popup-card {
    background: linear-gradient(165deg, #121724 0%, #0a0d16 100%) !important;
    border: 1px solid #3a3225 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7) !important;
}

/* Master Inner Card Fills */
.na-legacy-light .clan-card,
.na-legacy-light .editor-note,
.na-legacy-light .editor-count,
.na-legacy-light .character-editor-card,
.na-legacy-light .character-editor-summary,
.na-legacy-light .mission-list-item,
.na-legacy-light .mission-toggle,
.na-legacy-light .goal-card,
.na-legacy-light .news-post-entry,
.na-legacy-light .player-account-entry,
.na-legacy-light .player-account-summary-card,
.na-legacy-light .clan-register-section,
.na-legacy-light .info-row,
.na-legacy-light .quick-game-row,
.na-legacy-light .clan-profile-info-row,
.na-legacy-light .clan-profile-bio,
.na-legacy-light .clan-profile-member-row,
.na-legacy-light .reset-confirm {
    background: linear-gradient(145deg, #18202e 0%, #0d121c 100%) !important;
    border: 1px solid #3a3225 !important;
    color: #ffffff !important;
}

.na-legacy-light .character-editor-card:hover,
.na-legacy-light .mission-list-item:hover,
.na-legacy-light .mission-list-item.active,
.na-legacy-light .news-post-entry:hover,
.na-legacy-light .player-account-entry:hover,
.na-legacy-light .clan-card:hover {
    border-color: #ffae42 !important;
    background: linear-gradient(145deg, #1e283a 0%, #101622 100%) !important;
    box-shadow: 0 8px 24px rgba(255, 174, 66, 0.25) !important;
}

/* Titles & Headings — Gold Amber Glow */
.na-legacy-light .release-title,
.na-legacy-light .mainsection-kicker,
.na-legacy-light .profile-block-head,
.na-legacy-light .clan-profile-block-head,
.na-legacy-light .clan-profile-member-heading,
.na-legacy-light .mission-panel-title,
.na-legacy-light .mission-section-heading,
.na-legacy-light .news-editor-title,
.na-legacy-light .news-list-title,
.na-legacy-light .editor-note-title,
.na-legacy-light .background-panel-title,
.na-legacy-light .avatar-panel-title,
.na-legacy-light .reset-panel-title,
.na-legacy-light .clan-register-head,
.na-legacy-light .section-title,
.ca-hero-title,
h1, h2, h3 {
    color: #ffae42 !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* Secondary Subtext & Labels — Light Parchment */
.na-legacy-light .release-copy,
.na-legacy-light .mainsection-meta,
.na-legacy-light .mainsection-body,
.na-legacy-light .mainsection-balances,
.na-legacy-light .profile-search-status,
.na-legacy-light .avatar-preview-copy,
.na-legacy-light .avatar-hint,
.na-legacy-light .avatar-status,
.na-legacy-light .background-label,
.na-legacy-light .background-hint,
.na-legacy-light .background-status,
.na-legacy-light .reset-copy,
.na-legacy-light .reset-status,
.na-legacy-light .editor-note-copy,
.na-legacy-light .editor-count-label,
.na-legacy-light .character-editor-status,
.na-legacy-light .character-editor-id,
.na-legacy-light .mission-panel-copy,
.na-legacy-light .mission-field,
.na-legacy-light .mission-field-help,
.na-legacy-light .mission-section-copy,
.na-legacy-light .mission-list-meta,
.na-legacy-light .goal-card-meta,
.na-legacy-light .goal-popup-copy,
.na-legacy-light .mission-editor-status,
.na-legacy-light .news-admin-label,
.na-legacy-light .news-admin-help,
.na-legacy-light .news-admin-status,
.na-legacy-light .news-post-entry-meta,
.na-legacy-light .player-accounts-status,
.na-legacy-light .player-account-status,
.na-legacy-light .player-account-entry-meta,
.na-legacy-light .player-account-summary-label,
.na-legacy-light .clan-profile-label,
.na-legacy-light .clan-profile-empty,
.na-legacy-light .clan-profile-status,
.na-legacy-light .clan-register-copy,
.na-legacy-light .clan-register-label,
.na-legacy-light .clan-register-status,
p, label, span {
    color: #d0c8b8 !important;
}

/* Primary Values & High Contrast White Text */
.na-legacy-light .info-value,
.na-legacy-light .clan-profile-value,
.na-legacy-light .clan-profile-member-cell,
.na-legacy-light .clan-profile-member-date,
.na-legacy-light .player-account-summary-value,
.na-legacy-light .character-editor-card-name,
.na-legacy-light .mission-list-title,
.na-legacy-light .goal-card-summary,
.na-legacy-light .news-post-entry-title,
.na-legacy-light .clan-summary-copy,
.na-legacy-light .clan-register-value,
strong, b {
    color: #ffffff !important;
}

/* Form Inputs & Search Fields */
.ca-form-field,
.ca-form-textarea,
.ca-form-select,
.na-legacy-light .profile-search-input,
.na-legacy-light .avatar-input,
.na-legacy-light .background-input,
.na-legacy-light .character-editor-search,
.na-legacy-light .mission-search,
.na-legacy-light .mission-field input,
.na-legacy-light .mission-field select,
.na-legacy-light .news-admin-input,
.na-legacy-light .news-admin-textarea,
.na-legacy-light .player-accounts-search,
.na-legacy-light .clan-register-input,
.na-legacy-light .clan-register-textarea {
    background: rgba(9, 12, 18, 0.9) !important;
    border: 1px solid #4a3e2b !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}

.ca-form-field:focus,
.ca-form-textarea:focus,
.ca-form-select:focus,
.na-legacy-light .profile-search-input:focus,
.na-legacy-light .avatar-input:focus,
.na-legacy-light .background-input:focus,
.na-legacy-light .character-editor-search:focus,
.na-legacy-light .mission-search:focus {
    border-color: #ffae42 !important;
    box-shadow: 0 0 10px rgba(255, 174, 66, 0.35) !important;
}

/* Buttons — Master Gold Foil Gradient */
.ca-nav-play,
.ca-hero-play,
.na-legacy-light .profile-search-button,
.na-legacy-light .avatar-save,
.na-legacy-light .background-save,
.na-legacy-light .mission-button.primary,
.na-legacy-light .character-editor-button.primary,
.na-legacy-light .player-account-button.primary,
.na-legacy-light .news-admin-button.primary,
.na-legacy-light .clan-card button,
.na-legacy-light .clan-register-button.primary,
.na-legacy-light .reset-button.primary {
    background: linear-gradient(135deg, #ffae42 0%, #e8801a 100%) !important;
    border: 1px solid #ffae42 !important;
    color: #1b0d02 !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(232, 128, 26, 0.4) !important;
    transition: all 0.15s ease !important;
}

.ca-nav-play:hover,
.ca-hero-play:hover,
.na-legacy-light .profile-search-button:hover,
.na-legacy-light .mission-button.primary:hover {
    background: linear-gradient(135deg, #ffffff 0%, #e8801a 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 174, 66, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   CHARACTERS & SKILLS + MISSIONS DARK SHINOBI OVERRIDES
   Fixes white-on-white text contrast and aligns standalone pages
   ============================================================ */
.gi-ingame,
.gi-grid,
#gi-detail-view {
    background: linear-gradient(165deg, #121724 0%, #0a0d16 100%) !important;
    border: 1px solid #3a3225 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7) !important;
}

.gi-skill {
    background: linear-gradient(145deg, #18202e 0%, #0d121c 100%) !important;
    border: 1px solid #3a3225 !important;
    color: #ffffff !important;
}

.gi-skill.alt {
    background: linear-gradient(145deg, #201a34 0%, #0d121c 100%) !important;
    border: 1px solid #c490ff !important;
}

.gi-char-name {
    color: #ffae42 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.gi-skill-name {
    color: #ffae42 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    border-bottom: 1px solid rgba(255, 174, 66, 0.25) !important;
}

.gi-skill.alt .gi-skill-name {
    color: #c490ff !important;
    border-bottom-color: rgba(196, 144, 255, 0.3) !important;
}

.gi-char-desc,
.gi-skill-desc,
.gi-ingame p,
.gi-intro {
    color: #d0c8b8 !important;
}

.gi-char-unlock {
    background: #090c12 !important;
    border: 1px solid #ffae42 !important;
    color: #ffffff !important;
}

.gi-char-unlock::before {
    color: #ffae42 !important;
}

.gi-crumb,
.gi-crumb a {
    color: #9ca7b8 !important;
}

.gi-crumb .cur {
    color: #ffae42 !important;
}

.gi-detail-nav a {
    background: rgba(18, 23, 36, 0.8) !important;
    border: 1px solid #3a3225 !important;
    color: #ffffff !important;
}

.gi-detail-nav a:hover {
    border-color: #ffae42 !important;
    color: #ffae42 !important;
}

/* Standalone Missions Overview Dark Unification */
.ms-cat-thumb {
    border: 2px solid #ffae42 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8) !important;
}

.ms-cat-thumb.t-dc,
.ms-cat-thumb.t-b,
.ms-cat-thumb.t-a,
.ms-cat-thumb.t-s {
    background: linear-gradient(145deg, #1e2638 0%, #0c1018 100%) !important;
}

.ms-cat-thumb span {
    color: #ffae42 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* Vibrant Hero Village Banners Across All Subpages & Hero Text Stacking Fix */
.ca-hero-banners {
    z-index: 1 !important;
    opacity: 1 !important;
}

.ca-hero::after {
    z-index: 2 !important;
    background:
        radial-gradient(ellipse 80% 100% at 50% -20%, rgba(232, 128, 26, 0.22), transparent 75%),
        linear-gradient(90deg, rgba(5, 7, 14, 0.35) 0%, transparent 25%, transparent 75%, rgba(5, 7, 14, 0.35) 100%),
        linear-gradient(180deg, rgba(5, 7, 14, 0.15) 0%, transparent 50%, rgba(5, 7, 14, 0.45) 100%) !important;
    pointer-events: none !important;
}

.ca-hero-inner {
    position: relative !important;
    z-index: 10 !important;
}

.ca-hero-play {
    position: relative !important;
    z-index: 15 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #e8801a 0%, #ffae42 60%, #e11836 100%) !important;
    box-shadow: 0 4px 24px rgba(232, 128, 26, 0.6), 0 0 14px rgba(255, 174, 66, 0.4) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.ca-hero-word {
    color: #ffffff !important;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.95), 0 0 24px rgba(232, 128, 26, 0.4) !important;
}

.ca-hero-tagline {
    color: #e8c89b !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* ============================================================
   ANNOUNCEMENTS & NEWS FEED DARK SHINOBI OVERRIDES
   Fixes white-on-beige text contrast in news posts and releases
   ============================================================ */

/* News Posts & Main Announcements Cards */
.news-post,
.ca-releases,
.ca-sidebar-section {
    background: linear-gradient(165deg, #121724 0%, #0a0d16 100%) !important;
    border: 1px solid #3a3225 !important;
    border-top: 3px solid #ffae42 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7) !important;
}

/* Post Titles */
.mainsection-kicker,
.ca-announce-heading,
.ca-section-label,
.news-change-title {
    color: #ffae42 !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.mainsection-kicker::before,
.mainsection-kicker::after {
    color: #c490ff !important;
}

/* Post Metadata & Byline */
.mainsection-meta {
    color: #9ca7b8 !important;
    border-bottom: 1px solid rgba(255, 174, 66, 0.2) !important;
}

.mainsection-meta .byline {
    color: #ffae42 !important;
}

/* Body Text & Subheadings Inside Announcements */
.mainsection-body,
.mainsection-body p,
.mainsection-p,
.ca-news-content p,
.news-post p,
.news-post span,
.news-change-copy {
    color: #ffffff !important;
    font-style: normal !important;
}

.mainsection-subhead,
.news-post h2,
.news-post h3,
.news-post h4,
.news-change-character-name {
    color: #ffae42 !important;
    font-weight: 800 !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
}

/* Character Release Cards */
.ca-release-card,
.news-change-group,
.news-change-item {
    background: linear-gradient(145deg, #18202e 0%, #0d121c 100%) !important;
    border: 1px solid #3a3225 !important;
    color: #ffffff !important;
}

.ca-release-label {
    color: #ffffff !important;
}

/* ============================================================
   PROFESSIONAL GAMING UI/UX & MICRO-INTERACTION POLISH
   ============================================================ */

/* Glassmorphic Cards & Elevated Surfaces */
.news-post,
.ca-releases,
.ca-sidebar-section,
#gi-detail-view,
.gi-ingame,
.gi-grid {
    background: rgba(14, 18, 28, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(232, 128, 26, 0.28) !important;
    border-top: 3px solid #ffae42 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 14px rgba(232, 128, 26, 0.08) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.news-post:hover,
.ca-releases:hover,
.ca-sidebar-section:hover {
    border-color: rgba(255, 174, 66, 0.45) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.85), 0 0 20px rgba(232, 128, 26, 0.15) !important;
}

/* Character Cards Lift & Face Zoom Micro-Animations */
.gi-tile,
.ca-release-card {
    border-radius: 8px !important;
    overflow: hidden !important;
    background: rgba(10, 14, 22, 0.95) !important;
    border: 1px solid rgba(232, 128, 26, 0.25) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.gi-tile:hover,
.ca-release-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    border-color: #ffae42 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 174, 66, 0.35) !important;
}

.gi-tile img,
.ca-release-face {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gi-tile:hover img,
.ca-release-card:hover .ca-release-face {
    transform: scale(1.08) !important;
}

/* Category Filter Bar Polish */
.gi-catbar {
    background: rgba(10, 14, 24, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(232, 128, 26, 0.25) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.gi-search input:focus {
    border-bottom-color: #ffae42 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(232, 128, 26, 0.25) !important;
}

/* Button & Form Focus Effects */
.ca-auth-btn,
.auth-button,
.ca-news-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.ca-auth-btn:hover,
.auth-button:hover,
.ca-news-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(232, 128, 26, 0.4) !important;
}

.ca-auth-input:focus,
.auth-input:focus {
    border-color: #ffae42 !important;
    box-shadow: 0 0 0 3px rgba(232, 128, 26, 0.22) !important;
    outline: none !important;
}

/* Top Leaderboards Metallic Rank Badges */
.lb-clan-row.r1 .lb-clan-rank {
    background: linear-gradient(135deg, #ffe6a8, #e7b85a) !important;
    color: #3d2402 !important;
    box-shadow: 0 0 12px rgba(231, 184, 90, 0.6) !important;
}
.lb-clan-row.r2 .lb-clan-rank {
    background: linear-gradient(135deg, #ffffff, #b0b8c4) !important;
    color: #1a222d !important;
    box-shadow: 0 0 10px rgba(176, 184, 196, 0.5) !important;
}
.lb-clan-row.r3 .lb-clan-rank {
    background: linear-gradient(135deg, #f0aa7d, #cd7f32) !important;
    color: #2e1503 !important;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.5) !important;
}

/* ============================================================
   SHINOBI ACADEMY STARTER GUIDE (FTUE OVERLAY)
   ============================================================ */
.academy-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 12, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: academy-fade-in 0.3s ease-out;
}

.academy-guide-overlay.dismissed,
.academy-guide-overlay[hidden] {
    display: none !important;
}

.academy-guide-card {
    max-width: 580px;
    width: 100%;
    background: linear-gradient(165deg, #121826 0%, #0a0d16 100%);
    border: 2px solid rgba(255, 174, 66, 0.4);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(232, 128, 26, 0.25);
    color: #ffffff;
    text-align: center;
}

.academy-guide-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(232, 128, 26, 0.18);
    border: 1px solid rgba(255, 174, 66, 0.4);
    color: #ffae42;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.academy-guide-header h2 {
    margin: 0 0 6px 0;
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.academy-guide-header p {
    margin: 0 0 20px 0;
    color: #a0aec0;
    font-size: 13px;
}

.academy-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
    text-align: left;
}

.academy-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    border-radius: 10px;
}

.academy-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8801a, #ffae42);
    color: #211202;
    font-weight: 900;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(232, 128, 26, 0.5);
}

.academy-step-text strong {
    display: block;
    color: #ffae42;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.academy-step-text span {
    display: block;
    color: #cbd5e0;
    font-size: 12px;
    line-height: 1.4;
}

.academy-guide-dismiss-btn {
    width: 100%;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8801a 0%, #ffae42 60%, #e11836 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(232, 128, 26, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.academy-guide-dismiss-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(232, 128, 26, 0.7);
}

@keyframes academy-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   UNIFIED PUBLIC WEBSITE FOOTER & SUBPAGE CONTAINER STYLES
   ============================================================ */
.ca-subpage-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.ca-site-footer {
  width: 100%;
  background: rgba(10, 12, 18, 0.95);
  border-top: 1px solid rgba(232, 128, 26, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 40px 24px 30px;
  text-align: center;
  margin-top: 60px;
  position: relative;
  z-index: 10;
}

.ca-site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ca-site-footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.ca-site-footer-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ca-orange), var(--ca-amber));
  color: #110d0a;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 0 16px rgba(232, 128, 26, 0.35);
}

.ca-site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-parchment);
}

.ca-site-footer-links a:hover {
  color: var(--ca-amber);
}

.ca-site-footer-copy {
  margin: 0;
  font-size: 12px;
  color: var(--ca-orange);
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ============================================================
   UNIFORM CONTAINER SIZING & READABILITY CONTRAST RULES
   ============================================================ */
.mn-page,
.gi-page,
.ms-page,
.st-page,
.ca-subpage-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Ensure all text on light parchment content cards is dark and highly readable */
.lb-hub,
.lb-clanboard,
.lb-clan-row,
.lb-clan-empty,
.lb-hof-coming,
.mn-sheet,
.gi-sheet,
.gi-empty,
.ms-sheet,
.ms-cat,
.ms-empty,
.st-sheet,
.st-episode,
.st-empty,
.ca-content-sheet,
.ca-light-card,
.ca-admin-panel,
.ca-releases,
.news-post,
.news-editor-card,
.news-list-card,
.profile-section,
.profile-search,
.avatar-panel,
.background-panel,
.reset-panel,
.clan-profile-panel,
.clan-shell,
.clan-card,
.character-editor-card,
.character-editor-modal,
.player-account-modal,
.mainsection,
.na-legacy-light .main,
.na-legacy-light .profile-section {
  color: #1a1512 !important; /* Extremely sharp dark ink text */
}

/* Headings on light parchment sheets */
.lb-hub h1, .lb-hub h2, .lb-hub h3, .lb-hub h4,
.mn-sheet h1, .mn-sheet h2, .mn-sheet h3, .mn-sheet h4,
.gi-sheet h1, .gi-sheet h2, .gi-sheet h3, .gi-sheet h4,
.ms-sheet h1, .ms-sheet h2, .ms-sheet h3, .ms-sheet h4,
.st-sheet h1, .st-sheet h2, .st-sheet h3, .st-sheet h4,
.ca-content-sheet h1, .ca-content-sheet h2, .ca-content-sheet h3,
.na-legacy-light h1:not(.aside *):not(.sidebar *):not(.stats-title):not(.ladder-title),
.na-legacy-light h2:not(.aside *):not(.sidebar *):not(.stats-title):not(.ladder-title),
.na-legacy-light h3:not(.aside *):not(.sidebar *):not(.stats-title):not(.ladder-title),
.na-legacy-light h4:not(.aside *):not(.sidebar *):not(.stats-title):not(.ladder-title),
.mainsection h1, .mainsection h2, .mainsection h3,
.lb-faq dt, .mn-faq dt {
  color: #110d0a !important; /* Deep black-ink headers */
  font-weight: 800 !important;
}

/* Paragraphs & Description Text on light parchment sheets */
.lb-hub p,
.mn-sheet p,
.gi-sheet p,
.ms-sheet p,
.st-sheet p,
.ca-content-sheet p,
.na-legacy-light p,
.mainsection p,
.lb-faq dd,
.mn-faq dd,
.lb-hub-note,
.st-episode-synopsis,
.ms-cat-intro,
.ms-cat p,
.editor-note-copy,
.release-copy {
  color: #2c221c !important; /* Rich readable dark text */
  font-weight: 500 !important;
}

/* Strong / Bold highlights on light parchment sheets */
.lb-hub strong, .lb-hub p strong,
.mn-sheet strong, .mn-sheet p strong, .mn-list li strong,
.gi-sheet strong, .ms-sheet strong, .st-sheet strong,
.ca-content-sheet strong, .mainsection strong,
.na-legacy-light strong, .st-col-line strong, .ms-col-line strong {
  color: #0d0a08 !important; /* Solid black-ink bold text */
  font-weight: 800 !important;
}

/* List Items on light parchment sheets */
.lb-hub li,
.mn-list li,
.ms-list li,
.st-list li,
.gi-list li,
.ca-content-sheet li,
.na-legacy-light li,
.mainsection li {
  color: #2c221c !important;
  font-weight: 500 !important;
}

.mn-list li::before,
.ms-list li::before,
.st-list li::before {
  color: #d7953a !important; /* High contrast amber bullet arrow */
  font-weight: 900 !important;
}

/* Chapter / Kicker Labels on light parchment sheets */
.lb-hub-kicker,
.mn-kicker,
.ms-kicker,
.st-kicker,
.ca-section-label,
.mainsection-kicker {
  color: #8a4f00 !important; /* Dark burnt-amber kicker label */
  font-weight: 800 !important;
}

/* Ensure text on dark headers, navs, and footers is bright bone white */
.ca-nav,
.ca-hero,
.ca-site-footer,
.st-footer,
.ms-footer,
.mn-footer,
.gi-footer,
.lb-footer {
  color: var(--ca-bone);
}

/* Sidebar Top 10 High-Contrast Readability */
.aside .ladder-title,
.aside .stats-title,
.sidebar .ladder-title,
.sidebar .stats-title,
.na-legacy-light .aside h3,
.na-legacy-light .sidebar h3,
.na-legacy-light .stats-title,
.na-legacy-light .ladder-title,
.ladder-title,
.stats-title {
  color: #ffae42 !important;
  border-bottom-color: rgba(232, 128, 26, 0.35) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.ladder-rank {
  color: #ffae42 !important;
  background: rgba(232, 128, 26, 0.2) !important;
  border-color: rgba(255, 174, 66, 0.45) !important;
}

.ladder-name,
.ladder-name a {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.ladder-bar {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.ladder-fill {
  background: linear-gradient(90deg, #d7953a 0%, #f0bd62 60%, #ffae42 100%) !important;
}

.ladder-score {
  color: #110d0a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.stats-list li {
  color: #f2ede4 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(232, 128, 26, 0.22) !important;
  font-weight: 600 !important;
}

.stats-list li strong {
  color: #ffae42 !important;
  font-weight: 800 !important;
}