/* ==========================================================================
   Word Racer Arena — Shared Theme
   Extends the palette/type system already established in word-racer.html
   so client + admin pages feel like one product.
   ========================================================================== */

:root
{
  --ink: #0f0e17;
  --canvas: #f5f3ef;
  --canvas-raised: #ffffff;
  --board-bg: #1a1825;
  --board-rim: #2a2738;
  --tile-face: #ffffff;
  --tile-shadow: #c8c4d4;
  --tile-border: #e2dff0;

  /* Light-blue "shell" surfaces: navbar, admin sidebar, footer, dark-style
     buttons — anything that is NOT the actual game board. Kept as separate
     variables from --board-bg/--board-rim on purpose, since the board
     wrapper's dark styling stays untouched while these become light blue. */
  --shell-bg: #dceaf7;
  --shell-bg-raised: #c9defa;
  --shell-border: #b9d3ee;
  --shell-text: #16324f;
  --shell-text-muted: #4d7298;
  --shell-text-faint: #6f93b8;

  --accent-violet: #7b61ff;
  --accent-violet-dark: #6a50ee;
  --accent-violet-light: #a593ff;
  --accent-lime: #a8ff3e;
  --accent-coral: #ff6b6b;
  --accent-gold: #ffd93d;
  --accent-sky: #4ecdc4;

  --selected-bg: #7b61ff;
  --selected-text: #fff;
  --found-bg: #a8ff3e;
  --found-text: #1a1825;

  --text-muted: #6b6880;
  --text-faint: #9b97ad;
  --border-soft: #e7e4f0;

  --radius-tile: 14px;
  --radius-card: 20px;
  --radius-pill: 30px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-card: 0 2px 24px rgba(123, 97, 255, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 4px 24px rgba(0, 0, 0, 0.18);
  --border: #BDD4E8;
  --border-light: #DAE9F4;
  --shadow-sm: 0 1px 3px rgba(21, 34, 50, .10), 0 1px 2px rgba(21, 34, 50, .06);
  --shadow-md: 0 4px 16px rgba(21, 34, 50, .14), 0 2px 6px rgba(21, 34, 50, .08);
  --shadow-lg: 0 10px 32px rgba(21, 34, 50, .18), 0 4px 12px rgba(21, 34, 50, .10);
  --shadow-card: 0 2px 12px rgba(21, 34, 50, .10);
}

*
{
  box-sizing: border-box;
}

body
{
  background: var(--canvas);
  font-family: var(--font-display);
  color: var(--ink);
}

a
{
  color: var(--accent-violet);
  text-decoration: none;
}

a:hover
{
  color: var(--accent-violet-dark);
}

.font-mono
{
  font-family: var(--font-mono);
}

/* ── Layout shells ── */
.app-shell
{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.arena-shell
{
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* ── Top navigation (client) ── */
.wr-navbar
{
  background: var(--shell-bg);
  padding: 14px 0;
  border-bottom: 1px solid var(--shell-border);
}

.wr-navbar .wordmark
{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--shell-text);
}

.header-logo-img
{
  height: 3.6rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

.footer-logo-img
{
  height: 3rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

.wr-navbar .wordmark span.w1
{
  color: var(--accent-violet-dark);
}

.wr-navbar .wordmark span.w3
{
  color: #4f9b1f;
}

.wr-navbar .wordmark span.w2
{
  color: var(--shell-text);
}

.wr-navbar .nav-link
{
  color: var(--shell-text-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px !important;
  border-radius: 10px;
  transition: all .15s;
}

.wr-navbar .nav-link:hover,
.wr-navbar .nav-link.active
{
  color: var(--shell-text);
  background: rgba(123, 97, 255, 0.16);
}

.wr-navbar .btn-nav-cta
{
  background: var(--accent-violet);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 14px;
  border: none;
}

.wr-navbar .btn-nav-cta:hover
{
  background: var(--accent-violet-dark);
  color: #fff;
}

.wr-navbar .navbar-toggler
{
  border: none;
}

.wr-navbar .navbar-toggler-icon-wr
{
  color: var(--shell-text);
}

.wr-navbar .navbar-toggler:focus
{
  box-shadow: 0 0 0 2px var(--accent-violet-light);
}

/* ── Navbar user avatar dropdown (logged-in state) ── */
.wr-user-dropdown .dropdown-toggle::after
{
  display: none;
}

/* avatar + name is enough; drop the default caret */
.wr-navbar-avatar-img
{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.wr-navbar-username
{
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-user-dropdown-menu
{
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 6px;
  margin-top: 8px !important;
  min-width: 190px;
}

.wr-user-dropdown-menu .dropdown-item
{
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.wr-user-dropdown-menu .dropdown-item:hover,
.wr-user-dropdown-menu .dropdown-item:focus
{
  background: #f0ecff;
  color: var(--accent-violet-dark);
}

.wr-user-dropdown-menu .dropdown-item.active
{
  background: var(--accent-violet);
  color: #fff;
}

.wr-user-dropdown-menu .dropdown-item.text-danger:hover,
.wr-user-dropdown-menu .dropdown-item.text-danger:focus
{
  background: #fdeaea;
  color: var(--accent-coral);
}

.wr-user-dropdown-menu .dropdown-divider
{
  margin: 4px 0;
  border-color: var(--border-soft);
}

/* ── Cards ── */
.wr-card
{
  background: var(--canvas-raised);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-soft);
}

.wr-card h2,
.wr-card h3
{
  font-weight: 800;
  letter-spacing: -0.3px;
}

.wr-card-narrow
{
  max-width: 380px;
  width: 100%;
}

.wr-card-narrow-md
{
  max-width: 400px;
  width: 100%;
}

.eyebrow
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Buttons ── */
.btn-wr-primary
{
  background: var(--accent-violet);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 22px;
  font-weight: 700;
  font-family: var(--font-display);
  transition: all .18s;
}

.btn-wr-primary:hover
{
  background: var(--accent-violet-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-wr-primary:disabled
{
  opacity: .6;
  transform: none;
}

.btn-wr-outline
{
  background: transparent;
  color: var(--accent-violet);
  border: 2px solid var(--accent-violet-light);
  border-radius: 14px;
  padding: 10px 20px;
  font-weight: 700;
  transition: all .18s;
}

.btn-wr-outline:hover
{
  background: #f0ecff;
  color: var(--accent-violet-dark);
}

.btn-wr-outline-on-shell
{
  background: transparent;
  color: var(--shell-text);
  border: 2px solid var(--shell-border);
  border-radius: 14px;
  padding: 10px 20px;
  font-weight: 700;
  transition: all .18s;
}

.btn-wr-outline-on-shell:hover
{
  background: var(--shell-bg-raised);
  color: var(--shell-text);
}

.btn-wr-dark
{
  background: var(--shell-bg);
  color: var(--shell-text);
  border: 1px solid var(--shell-border);
  border-radius: 14px;
  padding: 10px 20px;
  font-weight: 700;
}

.btn-wr-dark:hover
{
  background: var(--shell-bg-raised);
  color: var(--shell-text);
}

/* ── Pills / badges ── */
.pill
{
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  display: inline-block;
}

.pill-live
{
  background: #ffe1e1;
  color: #d23c3c;
}

.pill-upcoming
{
  background: #e7e4ff;
  color: var(--accent-violet-dark);
}

.pill-complete
{
  background: #e3f9d8;
  color: #3f8f1f;
}

.pill-pending
{
  background: #f1f0f5;
  color: var(--text-muted);
}

/* ── Stat blocks ── */
.stat-tile
{
  background: var(--canvas-raised);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 18px 20px;
}

.stat-tile .stat-num
{
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.stat-tile .stat-label
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ── Tables (admin) ── */
.wr-table thead th
{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  border-bottom: 2px solid var(--border-soft);
  font-weight: 700;
  padding-bottom: 10px;
}

.wr-table td
{
  padding: 12px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}

.wr-table tbody tr:hover
{
  background: #faf9ff;
}

/* ── Admin sidebar ── */
.admin-shell
{
  display: flex;
  min-height: 100vh;
}

.admin-sidebar
{
  width: 230px;
  background: var(--shell-bg);
  color: var(--shell-text);
  border-right: 1px solid var(--shell-border);
  flex-shrink: 0;
  padding: 20px 14px;
}

.admin-sidebar .wordmark
{
  font-size: 18px;
  font-weight: 800;
  padding: 8px 10px 22px;
  color: var(--shell-text);
}

.admin-sidebar .wordmark span.w1
{
  color: var(--accent-violet-dark);
}

.admin-sidebar .wordmark span.w3
{
  color: #4f9b1f;
}

.admin-badge
{
  font-size: 11px;
  opacity: .65;
}

.admin-nav-link-back
{
  margin-top: 14px;
  opacity: .8;
}

.admin-nav-link
{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--shell-text-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 2px;
  transition: all .15s;
}

.admin-nav-link i
{
  width: 18px;
  text-align: center;
}

.admin-nav-link:hover
{
  color: var(--shell-text);
  background: rgba(123, 97, 255, 0.12);
}

.admin-nav-link.active
{
  color: #fff;
  background: var(--accent-violet);
}

.admin-main
{
  flex: 1;
  background: var(--canvas);
  padding: 28px 32px 60px;
  min-width: 0;
}

.admin-topbar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 860px)
{
  .admin-shell
  {
    flex-direction: column;
  }

  .admin-sidebar
  {
    width: 100%;
    padding: 14px;
  }

  .admin-sidebar .nav-grid
  {
    display: flex;
    overflow-x: auto;
    gap: 6px;
  }

  .admin-sidebar .wordmark
  {
    padding: 4px 6px 10px;
  }

  .admin-main
  {
    padding: 20px 16px 50px;
  }
}

/* ── Modals (shared across admin + client) ── */
.modal-content-wr
{
  border-radius: 18px;
}

.modal-header-wr
{
  border-bottom: 1px solid var(--border-soft);
}

/* ── Forms ── */
.wr-form-label
{
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.form-control.wr-input,
.form-select.wr-input
{
  border: 2px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 500;
}

.form-control.wr-input:focus,
.form-select.wr-input:focus
{
  border-color: var(--accent-violet-light);
  box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.12);
}

/* ── Footer ── */
.wr-footer
{
  background: var(--shell-bg);
  color: var(--shell-text-muted);
  padding: 36px 0 24px;
  font-size: 13px;
  border-top: 1px solid var(--shell-border);
}

.wr-footer a
{
  color: var(--shell-text-muted);
}

.wr-footer a:hover
{
  color: var(--shell-text);
}

.wr-footer .wordmark span.w2
{
  color: var(--shell-text);
}

.wr-footer .wordmark span.w3
{
  color: #4f9b1f;
}

.wordmark-sm
{
  font-size: 16px;
}

.copyright-note
{
  font-size: 11px;
  opacity: .7;
}

/* ── Misc helpers ── */
.text-muted-wr
{
  color: var(--text-muted);
}

.text-faint-wr
{
  color: var(--text-faint);
}

.section-pad
{
  padding: 56px 0;
}

@media (max-width: 768px)
{
  .section-pad
  {
    padding: 36px 0;
  }
}

.hero-subtext
{
  font-size: 16px;
  max-width: 480px;
}

.icon-emoji-lg
{
  font-size: 28px;
}

.icon-emoji-xl
{
  font-size: 42px;
}

.intro-text-centered
{
  max-width: 560px;
  margin: 0 auto;
}

.alert-soft-violet
{
  background: #f0ecff;
  color: var(--accent-violet-dark);
  border: none;
  border-radius: 12px;
}

.bracket-column
{
  min-width: 230px;
}

.text-winner
{
  color: var(--accent-violet-dark);
}

.avatar-circle-sm
{
  width: 28px;
  height: 28px;
  background: var(--accent-violet);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

.avatar-circle-lg
{
  width: 84px;
  height: 84px;
  background: var(--accent-violet);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

.avatar-circle-lg-img
{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-upload-preview
{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Notifications ─────────────────────────────────────────── */
.notif-shell
{
  max-width: 760px;
}

.notif-item+.notif-item
{
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.notif-item.notif-unread
{
  background: rgba(139, 92, 246, 0.08);
  cursor: pointer;
}

.notif-dot
{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
}

.notif-dot-unread
{
  background: var(--accent-violet);
}

.wr-notif-badge
{
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--accent-violet);
  color: #fff;
}

.text-2xs
{
  font-size: 11px;
}

.border-bottom-soft
{
  border-color: var(--border-soft) !important;
}

.text-status-success
{
  color: var(--accent-violet-dark);
}

.text-status-error
{
  color: var(--accent-coral);
}

.input-width-sm
{
  width: 160px;
}

.input-width-md
{
  width: 220px;
}

.nav-pills-wr
{
  --bs-nav-link-color: var(--text-muted);
  --bs-nav-pills-link-active-bg: var(--accent-violet);
  --bs-nav-pills-link-active-color: #fff;
}

.nav-pills-sm .nav-link
{
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.nav-tabs-wr
{
  border-bottom: 1px solid var(--border-soft);
}

/* ── Named section backgrounds (replaces inline styles on index.php) ── */
.section-hero
{
  background: linear-gradient(180deg, var(--shell-bg) 0%, var(--shell-bg-raised) 100%);
  color: var(--shell-text);
}

.section-hero .eyebrow-hero
{
  color: var(--accent-violet-dark);
}

.section-hero p
{
  color: var(--shell-text-muted);
}

.hero-heading
{
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -1px;
  line-height: 1.05;
}

.text-accent-green
{
  color: #4f9b1f;
}

.section-stats
{
  background: var(--canvas-raised);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.section-cta
{
  background: var(--shell-bg);
  color: var(--shell-text);
  border-top: 1px solid var(--shell-border);
}

.section-cta p
{
  color: var(--shell-text-muted);
}

/* ── Decorative hero tile (replaces inline cursor:default style) ── */
.wr-tile-static
{
  cursor: default;
}

/* ── Board preview surface (admin modals, coming-soon, 404, hero) ──────── */

/* The surface wraps the grid and gives it the dark board background.
   inline-flex shrink-wraps to exactly the grid's dimensions. */
.wr-preview-surface
{
  background: var(--board-bg);
  border-radius: 18px;
  padding: 18px;
  display: inline-flex;
}

/* Root fix: explicit px column widths (not 1fr) so each column is always
   exactly --wr-tile-sz wide. 1fr lets columns shrink narrower than the
   tile's fixed height, making each cell a tall oval instead of a square. */
:root
{
  --wr-tile-sz: 54px;
}

.wr-preview-grid
{
  display: grid;
  grid-template-columns: repeat(4, var(--wr-tile-sz));
  gap: 8px;
}

.wr-preview-tile
{
  width: var(--wr-tile-sz);
  height: var(--wr-tile-sz);
  aspect-ratio: 1;
  /* belt-and-suspenders guarantee of square */
  background: var(--tile-face);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--ink);
}

/* ==========================================================================
   Legal pages (Terms of Service / Privacy Policy / Cookie Policy)
   ========================================================================== */
.legal-hero
{
  padding: 44px 0 6px;
}

.legal-updated
{
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  margin-top: 8px;
}

.legal-shell
{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 860px)
{
  .legal-shell
  {
    grid-template-columns: 1fr;
  }
}

.legal-toc
{
  position: sticky;
  top: 24px;
}

.legal-toc-label
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 12px;
  margin-bottom: 8px;
  display: block;
}

.legal-toc .nav-link
{
  display: block;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all .15s;
}

.legal-toc .nav-link:hover
{
  background: #f0ecff;
  color: var(--accent-violet-dark);
}

.legal-toc .nav-link.active
{
  background: var(--accent-violet);
  color: #fff;
}

@media (max-width: 860px)
{
  .legal-toc
  {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
  }

  .legal-toc-label
  {
    display: none;
  }

  .legal-toc .nav-link
  {
    white-space: nowrap;
  }
}

.legal-content h2
{
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-top: 36px;
  margin-bottom: 12px;
  scroll-margin-top: 24px;
}

.legal-content h2:first-child
{
  margin-top: 0;
}

.legal-content p,
.legal-content li
{
  color: var(--ink);
  line-height: 1.7;
  font-size: 15px;
}

.legal-content p
{
  margin-bottom: 14px;
}

.legal-content ul,
.legal-content ol
{
  padding-left: 20px;
  margin-bottom: 16px;
}

.legal-content li
{
  margin-bottom: 6px;
}

.legal-content strong
{
  color: var(--ink);
}

.legal-content table
{
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 13.5px;
}

.legal-content table th,
.legal-content table td
{
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.legal-content table th
{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-weight: 700;
}

.legal-content table tr:last-child td
{
  border-bottom: none;
}

.legal-divider
{
  border-color: var(--border-soft);
  margin: 32px 0;
}

/* ── Legal page enhancements ─────────────────────────────────────── */
.legal-hero-sub
{
  color: var(--text-muted);
  font-size: 15px;
  max-width: 720px;
  margin-top: 10px;
  line-height: 1.6;
}

.legal-badges
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.legal-badge
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #efeaff;
  color: var(--accent-violet-dark, #4a2fd0);
}

/* "At a glance" summary card */
.legal-summary
{
  background: linear-gradient(180deg, rgba(123, 97, 255, .06), var(--canvas-raised, #fff));
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent-violet);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.legal-summary h2
{
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px !important;
  color: var(--accent-violet-dark, #4a2fd0);
}
.legal-summary ul
{
  margin: 0;
  padding-left: 18px;
}
.legal-summary li
{
  font-size: 14px;
  margin-bottom: 6px;
}

/* Inline callouts (notes / cautions) */
.legal-callout
{
  border-radius: 12px;
  padding: 12px 16px;
  margin: 4px 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--border-soft);
}
.legal-callout-note { background: #eef4ff; border-color: #d5e3ff; color: #2b4a7e; }
.legal-callout-warn { background: #fff6e9; border-color: #ffe2b8; color: #7a531a; }
.legal-callout strong { color: inherit; }

/* Numbered table of contents */
.legal-toc.numbered { counter-reset: toc; }
.legal-toc.numbered .nav-link { counter-increment: toc; }
.legal-toc.numbered .nav-link::before
{
  content: counter(toc) ". ";
  color: var(--text-faint);
  font-weight: 700;
}
.legal-toc.numbered .nav-link.active::before { color: #fff; }

/* Reopen-consent button on the cookie page */
.legal-cookie-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 22px;
}

/* ==========================================================================
   Error / 404 page (shares the dark "mystery board" motif with Coming Soon)
   ========================================================================== */
.section-error-page
{
  background: linear-gradient(180deg, var(--shell-bg) 0%, var(--shell-bg-raised) 100%);
  color: var(--shell-text);
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
}

.error-stack
{
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.error-code
{
  font-family: var(--font-mono);
  font-size: clamp(56px, 13vw, 120px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--accent-violet-dark);
}

.error-board-wrap
{
  display: flex;
  justify-content: center;
  margin: 28px 0;
}

.error-board-wrap .wr-preview-surface
{
  padding: 14px;
}

.error-board-wrap .wr-preview-grid
{
  grid-template-columns: repeat(4, 44px);
}

.error-board-wrap .wr-preview-tile
{
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  font-size: 17px;
}

.error-actions
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}



/* ==========================================================================
   Notifications
   ========================================================================== */

/* ── Navbar bell button ── */
.wr-bell-btn
{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  transition: background .15s;
  position: relative;
}

.wr-bell-btn:hover
{
  background: rgba(123, 97, 255, 0.12);
}

.wr-bell-icon
{
  font-size: 17px;
  color: var(--shell-text-muted);
}

/* ── Unread badge on the bell ── */
.wr-notif-badge
{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent-coral);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ── Inline unread badge (used in filter tab) ── */
.wr-notif-badge-inline
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-coral);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  border-radius: 9px;
  line-height: 1;
  margin-left: 4px;
}

/* ── Unread dot on individual notification items ── */
.wr-notif-dot
{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-violet);
  flex-shrink: 0;
}

/* ── Notification list item ── */
.wr-notif-item
{
  background: var(--canvas-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  transition: box-shadow .15s;
}

.wr-notif-item:hover
{
  box-shadow: var(--shadow-card);
}

.wr-notif-item--unread
{
  background: #faf9ff;
}

/* ── Icon circle ── */
.wr-notif-icon
{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}


/* ==========================================================================
   Game-over share section (solo-play.php)
   ========================================================================== */

/* Wrapper — sits between the word count and play-again buttons */
.wr-go-share
{
  margin: 18px 0 4px;
  padding: 16px;
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}

.wr-go-share-label
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
  text-align: center;
}

/* ── Shared base for both share buttons ── */
.wr-share-btn
{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

/* Facebook button */
.wr-share-btn-fb
{
  background: #1877f2;
  color: #fff;
}

.wr-share-btn-fb:hover
{
  background: #1464d2;
  transform: translateY(-1px);
}

.wr-share-btn-fb:active
{
  transform: none;
}

/* Copy link button */
.wr-share-btn-copy
{
  background: var(--canvas-raised);
  color: var(--accent-violet);
  border: 2px solid var(--accent-violet-light);
}

.wr-share-btn-copy:hover
{
  background: #f0ecff;
}

.wr-share-btn-copy.wr-share-btn-copied
{
  border-color: var(--accent-lime);
  color: #3f8f1f;
  background: #f0fbea;
}

/* ── QR code block ── */
.wr-go-qr-wrap
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.wr-go-qr-hint
{
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: .04em;
}

/* The div that qrcode.js renders into — force square canvas/img */
.wr-go-qr img,
.wr-go-qr canvas
{
  width: 128px !important;
  height: 128px !important;
  border-radius: 10px;
  display: block;
}

/* ── PHP-generated QR image (used in dashboard modal / other pages) ── */
.wr-qr-img
{
  border-radius: 10px;
  display: block;
}

/* ==========================================================================
   Coming Soon page
   ========================================================================== */
.section-coming-soon
{
  background: linear-gradient(180deg, var(--shell-bg) 0%, var(--shell-bg-raised) 100%);
  color: var(--shell-text);
  min-height: calc(100vh - 72px);
  /* full viewport minus the navbar's rough height */
  display: flex;
  align-items: center;
}

.section-coming-soon .eyebrow-hero
{
  color: var(--accent-violet-dark);
}

.section-coming-soon p
{
  color: var(--shell-text-muted);
}

/* Decorative dark board with shimmering "?" tiles — same motif as the
   homepage hero board, but every letter is unknown since the feature
   hasn't shipped yet. */
.wr-tile-mystery
{
  cursor: default;
  color: var(--accent-violet-light);
  animation: wr-mystery-pulse 2.4s ease-in-out infinite;
}

.wr-tile-mystery:nth-child(2n)
{
  animation-delay: .3s;
}

.wr-tile-mystery:nth-child(3n)
{
  animation-delay: .6s;
}

.wr-tile-mystery:nth-child(4n)
{
  animation-delay: .9s;
}

@keyframes wr-mystery-pulse
{

  0%,
  100%
  {
    opacity: .45;
  }

  50%
  {
    opacity: 1;
  }
}

.coming-soon-stack
{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.coming-soon-board-wrap
{
  display: flex;
  justify-content: center;
  margin: 32px 0;
}

/* ── Hero page decorative board (index.php) ─────────────────────────────── */
/* The hero board now uses the same .wr-preview-surface markup as the
   coming-soon board so all tile/grid rules above apply automatically.
   Only the box-shadow is added here for the hero context. */
.section-hero .wr-preview-surface
{
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
}

.coming-soon-actions
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ==========================================================================
   Playing History (dashboard)
   ========================================================================== */
.history-section+.history-section
{
  margin-top: 40px;
}

.history-section-title
{
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 0;
}

/* ── Mini board grid (inline in table) ── */

/* .wr-history-grid-link IS the grid container — tiles are direct children.
   grid-template-columns is the only thing that varies per board size, so it
   is set as an inline style in PHP. Everything else lives here in CSS.
   Using inline-grid (not inline-flex) so `grid-template-columns` on this
   element controls the tile layout directly with no intermediate wrapper. */
.wr-history-grid-link
{
  display: inline-grid;
  gap: 3px;
  padding: 6px;
  background: var(--board-bg);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  vertical-align: middle;
}

.wr-history-grid-link:hover
{
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
}

/* Tile sizes (width / height / font-size) are set via inline style in PHP
   so they scale per board size without any CSS attribute-selector dependency. */
.wr-history-tile
{
  background: var(--tile-face);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

/* ── Board cell: mini grid + replay button side by side ── */
.history-board-cell
{
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-history-replay
{
  background: transparent;
  color: var(--accent-violet);
  border: 2px solid var(--accent-violet-light);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: all .15s;
}

.btn-history-replay:hover
{
  background: #f0ecff;
  color: var(--accent-violet-dark);
}

.btn-history-replay i
{
  margin-right: 5px;
}

/* Challenge a friend button — per solo-history row */
.btn-history-challenge
{
  background: transparent;
  color: var(--shell-text-muted);
  border: 2px solid var(--shell-border);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-display);
}

.btn-history-challenge:hover
{
  background: var(--shell-bg);
  color: var(--shell-text);
  border-color: var(--shell-text-muted);
}

.btn-history-challenge i
{
  margin-right: 5px;
}

/* Utility colour used in challenge modal icon */
.text-accent-violet
{
  color: var(--accent-violet);
}

/* ── Board preview modal (enlarged) ── */
/* The grid and tile dimensions inside the modal are set entirely via
   inline style in JS so layout is immune to CSS load order. These rules
   only handle the dark outer surface and the overall centering. */
.board-preview-surface
{
  background: var(--board-bg);
  border-radius: 18px;
  padding: 18px;
  display: inline-flex;
}

/* ── Tournament name + round (Arena history) ── */
.history-tournament-name
{
  font-weight: 700;
  color: var(--ink);
}

.history-tournament-round
{
  font-size: 12px;
  color: var(--text-faint);
}

/* ── Rank pill ── */
.pill-rank
{
  background: #f1f0f5;
  color: var(--text-muted);
}

.pill-rank-gold
{
  background: #fff4d6;
  color: #a87900;
}

.pill-rank-silver
{
  background: #eef0f3;
  color: #5b6470;
}

.pill-rank-bronze
{
  background: #fbe7d6;
  color: #a35a1c;
}

/* ── Auth Pages: No-navbar layout ── */
/* ════════════════════════════════════════════════════════════════
   AUTH PAGES — unified layout system
   All 6 pages share the same wrapper structure:

   .auth-page                  — full-viewport centred background
     .auth-card                — the white card (max-width varies)
       .auth-card-header       — dark gradient logo band (always first)
       [.step-indicator]       — optional: step pages only
       .auth-card-body         — form / content area
   .support-note               — sits OUTSIDE .auth-card, below it

   Modifiers:
     .auth-card--wide          — wider card (register page, 500px)
     .auth-card-body--center   — centred body text
   ════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.auth-page
{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 2rem 1rem;
}

/* ── Card ─────────────────────────────────────────────────────── */
.auth-card
{
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  /* clips header gradient corners automatically */
  display: flex;
  flex-direction: column;
}

/* Wide variant — register page */
.auth-card--wide
{
  max-width: 500px;
}

/* ── Card header — dark gradient logo band ────────────────────── */
.auth-card-header
{
  /*background: linear-gradient(140deg, var(--bg-dark) 0%, var(--bg-nav) 60%, #2B6496 100%);*/
  background: var(--shell-bg);
  padding: 1.6rem 2rem 1.4rem;
  text-align: center;
  flex-shrink: 0;
  /* No border-radius needed — auth-card overflow:hidden handles clipping */
}

.auth-card-header a
{
  display: inline-block;
  text-decoration: none;
  transition: opacity var(--transition);
}

.auth-card-header a:hover
{
  opacity: .85;
}

.auth-logo-img
{
  height: 48px;
  width: auto;
  /*display: block;*/
  margin: 0 auto;
}

.auth-logo-tagline
{
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
  margin-top: .45rem;
  letter-spacing: .01em;
}

/* ── Step indicator strip — between header and card body ─────── */
.auth-card .step-indicator
{
  background: var(--bg-base);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  padding: 1rem 1.5rem .75rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* ── Card body ────────────────────────────────────────────────── */
.auth-card-body
{
  padding: 2rem;
  flex: 1;
}

.auth-card-body--center
{
  text-align: center;
}

/* ── Typography inside card ───────────────────────────────────── */
.auth-card h3
{
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .25rem;
  color: var(--text-primary);
  text-align: center;
}

.auth-card .auth-sub
{
  color: var(--text-muted);
  font-size: .85rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* ── Mobile: full-screen card ─────────────────────────────────── */
@media (max-width: 540px)
{
  .auth-page
  {
    padding: 0;
    align-items: stretch;
  }

  .auth-card
  {
    max-width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .auth-card-header
  {
    padding: 2rem 1.5rem 1.4rem;
  }

  .auth-card .step-indicator
  {
    border-left: none;
    border-right: none;
    padding: .85rem 1rem .65rem;
  }

  .auth-card-body
  {
    padding: 1.75rem 1.25rem 2rem;
  }

  .auth-card-body--center .th-verify-email-pill
  {
    font-size: .8rem;
    padding: .4rem .85rem;
  }
}

.auth-divider
{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.2rem 0;
  color: var(--text-light);
  font-size: .8rem;
}

.auth-divider::before,
.auth-divider::after
{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-footer-note
{
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
}

.auth-footer-note a
{
  font-weight: 600;
  color: var(--primary);
}

/* ── Auth: "back to home" link ───────────────────────────────────────────── */
.back-home-link
{
  font-size: .85rem;
  color: var(--text-muted);
}

.back-home-link:hover
{
  color: var(--primary-deep);
}

.btn-social
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .9rem;
  padding: .65rem 1.2rem;
  transition: all var(--transition);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-primary);
  width: 100%;
}

.btn-social:hover
{
  background: var(--bg-base);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-social img
{
  width: 20px;
  height: 20px;
}

/* ── Facebook social button ── */
.btn-social-facebook
{
  background: #1877F2;
  color: #fff !important;
  border-color: #1877F2;
}

.btn-social-facebook:hover
{
  background: #1560cc;
  border-color: #1560cc;
}
/* ── Player level & XP (dashboard profile card + navbar chip) ── */
.wr-level-badge
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet-dark));
  box-shadow: 0 2px 6px rgba(123, 97, 255, .35);
}

.wr-xp-track
{
  height: 8px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.wr-xp-fill
{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-violet-light), var(--accent-violet));
  transition: width .4s ease;
}

/* Small "Lv N" chip next to the name in the navbar dropdown trigger. */
.wr-nav-level
{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet-dark));
  vertical-align: middle;
}

/* ── Home: Global leaderboard + Tournaments sections ── */
.section-tournaments
{
  background: linear-gradient(180deg, rgba(123, 97, 255, .045), transparent 55%);
}

/* Smaller pills for the week / all-time toggle */
.nav-pills-sm .nav-link
{
  font-size: 12px;
  padding: 4px 14px;
}

/* Tournament cards get a colored top stripe by state */
.tournament-card
{
  border-top: 3px solid var(--border-soft);
}
.tournament-card-live { border-top-color: var(--accent-coral); }
.tournament-card-open { border-top-color: var(--accent-violet); }
.tournament-card-done { border-top-color: #3f8f1f; }

/* Hall of Fame — latest champions */
.hall-of-fame
{
  background: linear-gradient(180deg, rgba(255, 217, 61, .09), var(--canvas-raised));
}
.hof-list
{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hof-item
{
  display: flex;
  align-items: center;
  gap: 12px;
}
.hof-medal
{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  background: var(--border-soft);
  color: var(--text-muted);
}
.hof-medal-gold
{
  background: linear-gradient(135deg, #ffd93d, #f0a500);
  color: #3a2a00;
  box-shadow: 0 2px 8px rgba(240, 165, 0, .35);
}
.hof-body
{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hof-name { font-weight: 700; }
.hof-meta
{
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Arena page: sectioned tournament lists ─────────────────────── */
.arena-section-head
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

/* "View more" card — same wr-card shell, styled as a call-to-action tile */
.tournament-viewmore
{
  color: var(--accent-violet);
  border-style: dashed;
  transition: background .18s, border-color .18s, transform .18s;
}
.tournament-viewmore:hover
{
  background: #f5f2ff;
  border-color: var(--accent-violet-light);
  transform: translateY(-2px);
}
.tournament-viewmore .viewmore-arrow
{
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

/* Anchor/​span buttons in the arena pager */
a.btn-wr-outline { text-decoration: none; display: inline-block; }
.btn-wr-outline.disabled
{
  opacity: .45;
  pointer-events: none;
}