/* ==========================================================================
   public_mctemplate — logged-out landing/login page.

   Shares the dark-chrome / light-content design language and CSS custom
   properties introduced in templates/mctemplate/style-modern.css (see that
   file's THEME.md) so the pre-login page and the in-game dashboard read as
   one product instead of two different sites bolted together.
   ========================================================================== */

:root {
  --bg: #000000;
  --bg-header: #171717;
  --border: #2a2a2a;
  --text: #ffffff;
  --text-muted: #cccccc;
  --text-dim: #999999;

  --accent-primary: #6a0052;
  --accent-primary-hover: #120a0a;
  --accent-gold: #f1da36;
  --accent-red: #a7412a;
  --accent-green: #408000;
  /* Yellow-green — the color-wheel complement of --accent-primary's purple.
     Used sparingly (register's "Create New Character" header, the selected
     gender option) as a second accent so those bits don't just look like
     more purple. */
  --accent-olive: #8a9a3f;
  --accent-olive-dark: #5f6d1f;
  --accent-blue: #2f6f9f;

  --content-bg: #f4f4f4;
  --content-bg-alt: #e8e8e8;
  --content-border: #dcdcdc;
  --content-text: #1a1a1a;
  --content-text-muted: #555555;
  --content-link: var(--accent-primary);

  --radius: 5px;
  --radius-sm: 3px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size: 13px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: var(--bg);
  font-family: var(--font-family);
  font-size: var(--font-size);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Header shell — same structure as the logged-in template (topHeader +
   header with logo) so the transition from landing page to dashboard is
   seamless.
   ========================================================================== */

.topHeader {
  width: 100%;
  height: 25px;
  background-color: var(--bg-header);
}

.topHeaderInner {
  max-width: 982px;
  margin: 0 auto;
  height: 25px;
}

.header {
  width: 100%;
  height: 64px;
  border-bottom: 1px solid var(--border);
}

.headerInner {
  max-width: 982px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.headerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-3);
}

.headerLogo {
  flex: 1 1 auto;
  min-width: 0;
}

.headerLogo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}

.loginLink {
  flex: 0 0 auto;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--accent-primary);
  color: var(--text);
  font-weight: bold;
  font-size: 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.loginLink:hover {
  background-color: var(--accent-primary-hover);
  border: 1px solid var(--accent-primary);
  text-decoration: none;
}

/* Top nav row — Register/Forums/FAQ/Wiki/Rules/Contact/Credits. Wiki/Forums
   point at real modules that only have a logged-in content.php (no
   public.php), so they hit the login gate rather than 404 - expected, not a
   bug. Rules links to the standalone rules.php. Contact/Credits have no
   backing page yet; '#' until they do. */
.publicNav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.publicNav a {
  color: var(--text-muted);
  font-weight: normal;
  font-size: 12px;
  white-space: nowrap;
}

.publicNav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* ==========================================================================
   Page body
   ========================================================================== */

.pageBody {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
}

.container {
  max-width: 932px;
  width: 100%;
  background-color: var(--content-bg-alt);
  border: 1px solid var(--content-border);
  border-radius: var(--radius);
  height: fit-content;
}

.publicMain {
  min-width: 0;
  padding: var(--space-5) var(--space-4);
}

/* ==========================================================================
   Login/register modal — triggered by the "Login" header link. CSS-only
   (checkbox hack) since the public page has no reliable JS runtime: the
   checkbox lives right after <body> and .modalOverlay is its later sibling,
   so any <label for="loginModalToggle"> (header link, backdrop, close "×")
   toggles it open/closed without a script.
   ========================================================================== */

.modalToggle {
  display: none;
}

.modalOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.modalToggle:checked ~ .modalOverlay {
  display: flex;
}

.modalOverlayBg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.modalBox {
  position: relative;
  width: 100%;
  max-width: 320px;
  max-height: 90vh;
  overflow-y: auto;
}

.modalBox .loginCard {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.modalClose {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.modalClose:hover {
  color: var(--accent-primary);
}

/* ==========================================================================
   Shared panel look (TableHeader()/TableFooter() output — .windowTitle /
   .windowContent) — matches the panel styling used sitewide once logged in.
   ========================================================================== */

.windowTitle {
  color: var(--text);
  font-weight: bold;
  text-align: left;
  height: 27px;
  line-height: 27px;
  background: linear-gradient(to bottom, #000000 0%, var(--bg-header) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 2px solid var(--accent-primary);
  padding-left: var(--space-4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
}

.windowContent {
  background-color: var(--content-bg);
  color: var(--content-text);
  border: 1px solid var(--content-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-4);
}

.windowContent a {
  color: var(--content-link);
}

/* ==========================================================================
   Table-based forms (register, recover_password, ...) — these come from the
   shared TableHeader()/TableFooter()+<table> pattern used engine-wide, so
   restyle them here rather than in the module PHP, to match the login
   card's stacked label/input look. Applies in either column since the
   register panel can render in the main column or swap into the sidebar.
   ========================================================================== */

.windowContent table,
.windowContent table tbody,
.windowContent table tr,
.windowContent table td {
  display: block;
  width: 100%;
}

.windowContent table {
  margin-bottom: var(--space-2);
}

.windowContent table td {
  padding: var(--space-1) 0;
}

.windowContent table td b {
  font-size: 11px;
  font-weight: bold;
  color: var(--content-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Undo the stacked-form table layout above for the Top Players leaderboard -
   this one needs real table/row/cell columns, not stacked full-width rows. */
.windowContent .topPlayersTable {
  display: table;
  width: 100%;
}

.windowContent .topPlayersTable tbody {
  display: table-row-group;
}

.windowContent .topPlayersTable tr {
  display: table-row;
}

.windowContent .topPlayersTable th,
.windowContent .topPlayersTable td {
  display: table-cell;
  width: auto;
}

.windowContent input[type="text"],
.windowContent input[type="password"],
.loginCardBody input[type="text"],
.loginCardBody input[type="password"] {
  border: 1px solid var(--content-border);
  background-color: #ffffff;
  color: var(--content-text);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.windowContent input[type="text"]:focus,
.windowContent input[type="password"]:focus,
.loginCardBody input[type="text"]:focus,
.loginCardBody input[type="password"]:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* ==========================================================================
   Login card — plain title row (not the sitewide dark windowTitle bar) so
   it reads as a lightweight popup, matching the "Login to X" / "or
   register" layout of Torn's login popup.
   ========================================================================== */

.loginCard {
  background-color: var(--content-bg);
  border: 1px solid var(--content-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.loginCardHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-right: calc(var(--space-2) + 24px + var(--space-2));
  background-color: var(--content-bg-alt);
  border-bottom: 1px solid var(--content-border);
}

.loginCardTitle {
  font-weight: bold;
  color: var(--content-text);
  font-size: 14px;
}

.loginCardAlt {
  font-size: 11px;
  white-space: nowrap;
}

.loginCardBody {
  padding: var(--space-4);
}

#loginForm form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.loginCardActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.recoverLink {
  font-size: 11px;
  font-weight: normal;
  color: var(--content-text-muted);
  line-height: 1.4;
}

.recoverLink:hover {
  color: var(--accent-primary);
}

.loginCardActions .linkButton {
  margin-top: 0;
  flex: 0 0 auto;
}

.errorInfo,
.resultInfo {
  color: var(--content-text);
  font-weight: bold;
  text-align: left;
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--content-border);
  border-radius: var(--radius);
}

.errorInfo {
  border-left: 4px solid var(--accent-red);
}

.resultInfo {
  border-left: 4px solid var(--accent-green);
}

.fieldLabel {
  font-size: 11px;
  font-weight: bold;
  color: var(--content-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: var(--space-2);
}

.fieldLabel:first-child {
  margin-top: 0;
}

.linkButton {
  min-width: 120px;
  padding: 0 var(--space-4);
  height: 30px;
  line-height: 30px;
  font-size: 11px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--accent-primary);
  color: var(--text);
  margin-top: var(--space-3);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.linkButton:hover {
  background-color: var(--accent-primary-hover);
  border: 1px solid var(--accent-primary);
}

/* LinkButton()'s $enabled=false output (see modules/register's signup
   button, which toggles between this and .linkButton client-side). */
.disabledLinkButton {
  min-width: 120px;
  padding: 0 var(--space-4);
  height: 30px;
  line-height: 30px;
  font-size: 11px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--content-border);
  border-radius: var(--radius-sm);
  background-color: var(--content-bg-alt);
  color: var(--content-text-muted);
  margin-top: var(--space-3);
  cursor: not-allowed;
}

a {
  font-weight: bold;
  color: var(--content-link);
  text-decoration: none;
}

a:hover {
  color: var(--accent-primary-hover);
  text-decoration: underline;
}

/* Register / forgot password links rendered below the login card by
   modules/public_menu's sideMenu hook — a plain centered link list. */
.menuTitle,
.menuFooter {
  height: var(--space-2);
}

.menuEntry {
  text-align: center;
  padding: var(--space-2) 0;
  font-size: 11px;
}

.menuEntry a {
  color: var(--content-text-muted);
}

.menuEntry a:hover {
  color: var(--accent-primary);
}

/* ==========================================================================
   Public main content
   ========================================================================== */

/* Hero banner + join CTA — modules/welcome's landing page header block. */
.heroBanner {
  position: relative;
  width: 100%;
  height: 260px;
  margin-bottom: var(--space-5);
  border: 1px solid var(--content-border);
  border-radius: var(--radius);
  background-image: url("images/2t0m8XK.jpeg");
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}

.joinRibbon {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  background: var(--accent-primary);
  color: var(--text) !important;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.joinRibbon:hover {
  background: var(--accent-primary-hover);
  text-decoration: none !important;
}

/* Two-column panel pairing (About+Users Online, Top Features+Top Players,
   Game Updates+Screenshots) - modules/welcome/public.php wraps each pair in
   a .landingRow of two .landingCol's. Collapses to one column below the
   breakpoint at the bottom of this file. */
.landingRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.landingCol {
  display: flex;
  flex-direction: column;
}

.landingCol > .windowContent {
  flex: 1 1 auto;
}

.windowContent p {
  margin: 0 0 var(--space-3);
}

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

/* Users Online counters - dark boxed digit tiles (matching the reference's
   ticker look) even though they sit inside the light .windowContent panel. */
.statsCounterRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}

.statsCounter {
  flex: 0 0 auto;
  background-color: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
}

.statsCounterValue {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.digitTile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05em;
  padding: 0.15em 0.05em;
  font-family: "Courier New", Courier, monospace;
  font-size: 26px;
  font-weight: bold;
  color: var(--accent-gold);
  background: linear-gradient(to bottom, #262626, #0d0d0d);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.digitTile::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.statsCounterLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-top: var(--space-1);
}

/* Top Features list */
.featureList {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.featureCard {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--content-border);
}

.featureCard:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.featureIcon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--content-text-muted);
  transition: fill 0.15s ease;
}

.featureCard:hover .featureIcon {
  color: var(--accent-gold);
}

.featureTitle {
  font-weight: bold;
  color: var(--content-text);
  margin-bottom: 2px;
}

.featureDesc {
  font-size: 12px;
  color: var(--content-text-muted);
}

/* Top Features interactive grid (homepage) - a grid of icon buttons next to
   a detail card that JS swaps the content of on click, so the panel can
   list many features without growing tall. See WelcomeRenderTopFeatures(). */
.featurePanel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.featureIconGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: var(--space-2);
  flex: 3 1 320px;
  align-content: start;
}

.featureGridBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  background-color: var(--content-bg-alt);
  border: 1px solid var(--content-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.featureGridBtn svg {
  width: 100%;
  height: 100%;
  color: var(--content-text-muted);
  transition: fill 0.15s ease;
}

.featureGridBtn:hover {
  border-color: var(--accent-primary);
}

.featureGridBtn:hover:not(.active) svg {
  color: var(--accent-gold);
}

.featureGridBtn.active {
  background-color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.featureGridBtn.active svg {
  color: var(--content-text);
}

.featureDetail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 260px;
  max-width: 360px;
  padding: var(--space-3);
  background-color: var(--content-bg-alt);
  border: 1px solid var(--content-border);
  border-radius: var(--radius-sm);
  text-align: left;
}

/* Icon with a prev chevron above it and a next chevron below, each as wide
   as the icon itself - no border/background of their own so they read as
   part of the card rather than separate buttons. Clicking either one also
   restarts the 5s auto-advance timer (WelcomeRenderTopFeatures()). */
.featureDetailIconCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.featureDetailPrev,
.featureDetailNext {
  padding: 0;
  width: 40px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--content-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

/* The glyph is scaled wide/flat on its own <span> rather than the button,
   so the stretch doesn't distort the button's hit area. */
.featureDetailPrev span,
.featureDetailNext span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transform: scale(4, 0.7);
}

.featureDetailPrev:hover,
.featureDetailNext:hover {
  color: var(--accent-gold);
}

.featureDetailIcon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--accent-gold);
}

.featureDetailText {
  flex: 1 1 auto;
  min-width: 0;
}

.featureDetailTitle {
  font-weight: bold;
  color: var(--content-text);
  margin-bottom: var(--space-1);
}

.featureDetailDesc {
  font-size: 12px;
  color: var(--content-text-muted);
}

/* modules/welcome wraps hooked content in a .box — currently
   modules/welcome_screenshots' development screenshots panel. */
.box {
  width: 100%;
}

.box .windowContent {
  text-align: center;
}

/* Top Players panel (modules/top_list) - single leaderboard ranked by total stats. */
.topPlayersTable {
  width: 100%;
  border-collapse: collapse;
}

.topPlayersTable th {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--content-text-muted);
  text-align: left;
  border-bottom: 1px solid var(--content-border);
  padding: 0 var(--space-2) var(--space-1);
}

.topPlayersTable td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--content-border);
}

.topPlayersTable tr:last-child td {
  border-bottom: none;
}

.rankPlayer {
  white-space: nowrap;
}

.rankNumber {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--accent-primary);
  color: var(--text);
  font-size: 10px;
  font-weight: bold;
}

/* Name background (modules/nameIcon) - matches templates/mctemplate & light. */
.nameicon {
  display: inline-block;
  width: 130px;
  border: 1px solid #2a2a2a;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 2px;
  vertical-align: middle;
  background-color: black;
}

.nameGroup {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0;
  line-height: normal;
  text-align: left;
  overflow: hidden;
}

.nameBg {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.65);
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  vertical-align: middle;
}

.nameBg-narrow {
  width: 130px;
  height: 16px;
  line-height: 16px;
  font-size: 8px;
}

.nameBg-wide {
  width: 300px;
  height: 16px;
  line-height: 16px;
  font-size: 9px;
}

.studioIcon {
  display: inline-block;
  border: 1px solid #2a2a2a;
  padding: 2px;
  border-right: none;
  vertical-align: middle;
  background-color: black;
}

.studioName {
  display: inline-block;
  width: 100px;
  border: 1px solid #2a2a2a;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 2px;
  vertical-align: middle;
}

.nameGroup .studioIcon,
.nameGroup .studioIconEmpty {
  border: none;
  border-right: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  overflow: hidden;
}

.nameGroup .studioIcon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nameGroup .studioIconEmpty {
  font-size: 8px;
  line-height: 1;
}

.studioIconEmpty {
  display: inline-block;
  border: 1px solid #2a2a2a;
  padding: 2px;
  border-right: none;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  color: #a7412a;
  background-color: black;
}

/* Public player profile (modules/view_player/public.php). */
.profileHeader {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.profileAvatarWrap {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--bg-header);
}

.profileAvatarWrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) brightness(0.55);
  transform: scale(1.15);
}

.profileAvatarLock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  color: var(--text);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: var(--space-2);
}

.profileAvatarLock svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent-gold);
}

.profileIdentity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.profileStatus {
  font-size: 12px;
}

.profileStatus.online {
  color: var(--accent-green);
}

.profileStatus.offline {
  color: var(--accent-red);
}

.profileLevelRow {
  justify-content: flex-start;
}

/* Torn-style "Login to view your interactions" gate. */
.profileLoginGate {
  display: block;
  text-align: center;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background-color: var(--content-bg-alt);
  border: 1px dashed var(--content-border);
  border-radius: var(--radius);
  color: var(--content-text-muted);
  cursor: pointer;
}

.profileLoginGate:hover {
  border-color: var(--accent-primary);
  color: var(--content-text);
}

.profileInfoRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--content-border);
}

.profileInfoRow:last-child {
  border-bottom: none;
}

.profileInfoLabel {
  font-size: 11px;
  font-weight: bold;
  color: var(--content-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}

.profileInfoValue {
  text-align: right;
}

.profileBio {
  white-space: pre-wrap;
}

/* Game Updates teaser panel (modules/welcome's WelcomeRenderRecentUpdates) -
   brief icon + title rows, each linking to its full entry on the "See all
   updates" page (modules/recentgameupdates). Mirrors .featureCard's layout. */
.updatesList {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.updateEntry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--content-border);
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
}

.updateEntry:last-child {
  border-bottom: none;
}

.updateIcon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--content-text-muted);
  transition: fill 0.15s ease;
}

.updateEntry:hover .updateIcon {
  color: var(--accent-gold);
}

.updateTitle {
  font-size: 13px;
  font-weight: bold;
  color: var(--content-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updateHeaderIcon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: var(--space-2);
  color: var(--content-text-muted);
}

.updateMeta {
  font-size: 12px;
  color: var(--content-text-muted);
}

.seeAllLink {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 11px;
}

/* "Which Path Will You Take" progression diagram - three tracks of
   connected, numbered nodes. Node numbering/connector line is pure CSS
   (counter + a background line behind each column) so it works without JS. */
.pathDiagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* Mobile-only tab bar for switching between tracks one at a time (see the
   max-width:700px block below). Hidden on desktop, where all three tracks
   render side by side and this bar/behaviour has no visual effect. */
.pathTabs {
  display: none;
}

.pathTab {
  flex: 1 1 0;
  padding: var(--space-2) var(--space-1);
  background-color: #ffffff;
  border: 1px solid var(--content-border);
  color: var(--content-text-muted);
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  position: relative;
}

.pathTab + .pathTab {
  margin-left: -1px;
}

.pathTab:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.pathTab:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.pathTab-active {
  z-index: 1;
  color: #ffffff;
}

/* Selected tab picks up its track's accent colour (see the
   .pathTrack-fighter/-pimp/-hustler rules below), so the highlighted tab
   matches the numbered nodes it's showing. */
.pathTab[data-track="fighter"].pathTab-active {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

.pathTab[data-track="pimp"].pathTab-active {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.pathTab[data-track="hustler"].pathTab-active {
  background-color: var(--accent-green);
  border-color: var(--accent-green);
}

.pathTrack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  counter-reset: pathStep;
}

.pathTrackTitle {
  font-weight: bold;
  text-align: center;
  color: var(--content-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12px;
  margin-bottom: var(--space-3);
}

.pathNode {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background-color: #ffffff;
  border: 1px solid var(--content-border);
  border-radius: var(--radius-sm);
  color: var(--content-text);
  cursor: default;
}

.pathNode:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 1px;
  height: 10px;
  background-color: var(--content-border);
}

.pathNode::before {
  counter-increment: pathStep;
  content: counter(pathStep);
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--accent-olive);
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
}

.pathNodeIcon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--content-text-muted);
  transition: fill 0.15s ease;
}

.pathNodeLabel {
  font-weight: bold;
  font-size: 12px;
}

.pathNode:hover {
  border-color: var(--accent-olive);
}

.pathNode:hover:not(.pathNodeSoon) .pathNodeIcon {
  color: var(--accent-gold);
}

.pathNodeSoon {
  background-color: var(--content-bg-alt);
  color: var(--content-text-muted);
  cursor: default;
}

.pathNodeSoon .pathNodeIcon {
  color: var(--content-border);
}

.pathNodeSoon:hover {
  border-color: var(--content-border);
}

.pathNodeSoon::before {
  background-color: var(--content-border);
  color: var(--content-text-muted);
}

.pathNodeBadge {
  margin-left: auto;
  font-size: 9px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--content-text-muted);
  white-space: nowrap;
}

/* Per-track accent colours so the three "Which Path" tracks read as
   distinct routes rather than three copies of the same green track. */
.pathTrack-fighter .pathNode::before {
  background-color: var(--accent-red);
}

.pathTrack-fighter .pathNode:hover:not(.pathNodeSoon) {
  border-color: var(--accent-red);
}

.pathTrack-fighter .pathNode:hover:not(.pathNodeSoon) .pathNodeIcon {
  color: var(--accent-red);
}

.pathTrack-pimp .pathNode::before {
  background-color: var(--accent-blue);
}

.pathTrack-pimp .pathNode:hover:not(.pathNodeSoon) {
  border-color: var(--accent-blue);
}

.pathTrack-pimp .pathNode:hover:not(.pathNodeSoon) .pathNodeIcon {
  color: var(--accent-blue);
}

.pathTrack-hustler .pathNode::before {
  background-color: var(--accent-green);
}

.pathTrack-hustler .pathNode:hover:not(.pathNodeSoon) {
  border-color: var(--accent-green);
}

.pathTrack-hustler .pathNode:hover:not(.pathNodeSoon) .pathNodeIcon {
  color: var(--accent-green);
}

.pathTrack .pathNodeSoon::before {
  background-color: var(--content-border) !important;
}

/* ==========================================================================
   Registration (modules/register) — multi-account warning, gender choice
   row, and the "I understand and agree" gate before step 2.
   ========================================================================== */

/* windowTitle's usual header sits right above this, unchanged — only the
   content box below it becomes a solid, high-contrast panel (matching
   Torn's warning box) instead of a light tinted one. */
.warningBanner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--accent-red);
  color: #ffffff;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-4);
  line-height: 1.5;
}

.warningIcon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.warningText b {
  display: block;
  margin-bottom: var(--space-1);
}

/* Second header treatment (see --accent-olive) for panels that should
   stand out from the sitewide dark windowTitle bar — currently just
   register's "Create New Character". */
.windowTitle.accentTitle {
  background: linear-gradient(to right, var(--accent-olive-dark) 0%, var(--accent-olive) 55%, rgba(138, 154, 63, 0.5) 100%);
  border-bottom: 2px solid var(--accent-olive-dark);
}

.windowContent input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent-primary);
}

.genderChoices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.genderRadio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.genderOption {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--content-border);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: var(--content-text-muted);
  font-weight: normal;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.genderOption svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.genderRadio:checked ~ svg,
.genderRadio:checked ~ .genderLabel {
  color: var(--content-text);
  font-weight: bold;
}

.genderOption:has(.genderRadio:checked) {
  border-color: var(--accent-olive);
  background-color: rgba(138, 154, 63, 0.12);
}

.agreeRow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  font-size: 12px;
  color: var(--content-text-muted);
  cursor: pointer;
}

.agreeRow input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.stepBackLink {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 11px;
  font-weight: normal;
  color: var(--content-text-muted);
}

.footer {
  width: 100%;
  height: 60px;
}

/* ==========================================================================
   Rules page (rules.php) — icon overview grid + collapsible rule sections,
   plus the info/warning callouts at the top of the page. Reuses
   .warningBanner/.warningIcon from the register warning above; adds a
   blue "info" variant for the language/content policy callout.
   ========================================================================== */

.rulesIntro {
  margin-bottom: var(--space-4);
}

.ruleCallouts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.infoBanner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--accent-blue);
  color: #ffffff;
  border-radius: var(--radius);
  padding: var(--space-4);
  line-height: 1.5;
}

.infoIcon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  font-style: italic;
}

.infoText b {
  display: block;
  margin-bottom: var(--space-1);
}

.ruleOverviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ruleOverviewCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background-color: #ffffff;
  border: 1px solid var(--content-border);
  border-radius: var(--radius-sm);
  color: var(--content-text);
  font-weight: bold;
}

.ruleOverviewCard:hover {
  border-color: var(--accent-primary);
  text-decoration: none;
}

.ruleOverviewIcon {
  width: 28px;
  height: 28px;
  color: var(--content-text-muted);
  transition: color 0.15s ease;
}

.ruleOverviewCard:hover .ruleOverviewIcon {
  color: var(--accent-primary);
}

.ruleOverviewTitle {
  font-size: 11px;
}

.ruleSections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ruleSection {
  background-color: #ffffff;
  border: 1px solid var(--content-border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: var(--space-4);
}

.ruleSection summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: bold;
  color: var(--content-text);
  background-color: var(--content-bg-alt);
  list-style: none;
}

.ruleSection summary::-webkit-details-marker {
  display: none;
}

.ruleSection summary::after {
  content: "+";
  margin-left: auto;
  font-size: 16px;
  color: var(--content-text-muted);
}

.ruleSection[open] summary::after {
  content: "\2212";
}

.ruleSectionIcon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--accent-primary);
}

.ruleSectionBody {
  padding: var(--space-4);
}

.ruleList {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: ruleItem;
}

.ruleList li {
  display: flex;
  gap: var(--space-2);
  line-height: 1.5;
}

.ruleList li::before {
  counter-increment: ruleItem;
  content: counter(ruleItem) ".";
  font-weight: bold;
  color: var(--content-text-muted);
  flex: 0 0 auto;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Responsive - first breakpoint in this stylesheet, scoped to the grid/nav/
   diagram classes the two-column landing-page redesign introduced rather
   than retrofitting every existing panel.
   ========================================================================== */

@media (max-width: 700px) {
  .headerRow {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .header {
    height: auto;
  }

  .publicNav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }

  .landingRow {
    grid-template-columns: 1fr;
  }

  .pathTabs {
    display: flex;
    margin-bottom: var(--space-4);
  }

  .pathDiagram {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .pathTrack {
    display: none;
  }

  .pathTrack.pathTrack-active {
    display: flex;
  }

  /* The tab bar above already names the selected track, so repeating it
     as a heading inside the track content would be redundant here. */
  .pathTrackTitle {
    display: none;
  }

  .statsCounter {
    min-width: 0;
    padding: var(--space-2) var(--space-1);
  }

  .digitTile {
    font-size: 18px;
  }
}