/* Additions on top of the original compiled stylesheet (site.css). Uses the same theme tokens. */
html { scroll-behavior: smooth; }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }

/* Mobile menu */
.mobile-menu { opacity: 0; pointer-events: none; }
.mobile-menu .mobile-panel { transform: translateX(100%); }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu.open .mobile-panel { transform: translateX(0); }

/* Officer selection */
.officer.selected { background: hsl(var(--primary) / .15); border-color: hsl(var(--primary)); }
.officer.selected .chev { transform: rotate(90deg); }
#officer-panel.filled { display: block; text-align: left; border-color: hsl(var(--primary) / .4); }
#officer-panel .op-rank { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: hsl(var(--primary)); }
#officer-panel .op-name { font-family: var(--font-heading); font-size: 1.5rem; line-height: 2rem; margin-top: .5rem; }
#officer-panel .op-desc { font-size: .875rem; color: hsl(var(--foreground) / .8); margin-top: 1rem; line-height: 1.6; }
#officer-panel .op-status { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.status-on-the-field { color: hsl(var(--accent-foreground)); }
.status-on-the-field svg { color: hsl(0 59% 55%); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.status-on-leave, .status-away { opacity: .7; }

/* Medal cards: reveal detail on hover / focus / tap */
.medal-extra { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.medal-card:hover .medal-extra, .medal-card:focus-within .medal-extra, .medal-card.open .medal-extra { max-height: 220px; opacity: 1; }
.medal-card:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }
.medal-img { width: 100%; height: 100%; object-fit: cover; }
.medal-count { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--muted-foreground)); margin-top: .35rem; }
.recipients { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.recipient { width: 28px; height: 28px; border-radius: 999px; overflow: hidden; border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary)); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: hsl(var(--foreground)); }
.recipient img { width: 100%; height: 100%; object-fit: cover; }
.recipient.more { width: auto; padding: 0 .5rem; }

/* Roll of Honor */
.roll-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.roll-search { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground)); min-width: 240px; flex: 0 1 320px; }
.roll-search:focus-within { border-color: hsl(var(--primary)); }
.roll-search input { background: transparent; border: 0; outline: 0; color: hsl(var(--foreground)); font: inherit; font-size: .875rem; width: 100%; }
.roll-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .4rem .8rem; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground));
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: all .2s; }
.chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .6); }
.chip.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.roll-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.soldier { padding: 1.25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: border-color .2s; }
.soldier:hover { border-color: hsl(var(--accent) / .6); }
.soldier-head { display: flex; align-items: center; gap: .85rem; }
.soldier-head h3 { font-size: 1.05rem; color: hsl(var(--foreground)); word-break: break-word; }
.soldier-avatar { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 1px solid hsl(var(--accent) / .5); }
.soldier-avatar.initials { display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--secondary)); font-family: var(--font-heading); }
.soldier-meta { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--muted-foreground)); margin-top: .2rem; }
.soldier-medals { list-style: none; margin: 1rem 0 0; padding: .85rem 0 0; border-top: 1px solid hsl(var(--border)); display: flex; flex-direction: column; gap: .45rem; }
.soldier-medals li { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: hsl(var(--foreground) / .9); }
.mini-medal { width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  color: hsl(var(--accent)); background: linear-gradient(135deg, hsl(var(--accent) / .4), hsl(var(--primary) / .3)); border: 1px solid hsl(var(--accent) / .5); }
.mini-medal img { width: 100%; height: 100%; object-fit: cover; }
.w-3\.5 { width: .875rem; } .h-3\.5 { height: .875rem; }
.soldier[hidden] { display: none; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60; background: hsl(var(--background) / .92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 4rem 1rem 2rem; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; border: 1px solid hsl(var(--border)); }
.lightbox figcaption { margin-top: .75rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; padding: .5rem; color: hsl(var(--muted-foreground)); background: none; border: 0; cursor: pointer; }
.lightbox-close:hover { color: hsl(var(--foreground)); }

.footer-admin { color: hsl(var(--muted-foreground)); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: .65rem; }
.footer-admin:hover { color: hsl(var(--foreground)); }

@media (prefers-reduced-motion: reduce) {
  .march-in { animation: none; opacity: 1; transform: none; }
  .glow-pulse, .animate-bounce { animation: none; }
  html { scroll-behavior: auto; }
}

/* Medal recipients modal (double-click a medal) */
.medal-card { cursor: pointer; user-select: none; }
.view-recipients { margin-top: .85rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--foreground) / .85); }
.view-recipients:hover { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 3px; }
.recip-modal { position: fixed; inset: 0; z-index: 60; background: hsl(var(--background) / .85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.recip-modal[hidden] { display: none; }
.recip-box { width: min(560px, 100%); max-height: min(80vh, 720px); display: flex; flex-direction: column; background: hsl(var(--card));
  border: 1px solid hsl(var(--accent) / .5); box-shadow: 0 24px 60px rgb(0 0 0 / .6); animation: marchIn .25s ease-out both; transform: translateY(8px); }
.recip-head { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.recip-icon { width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: hsl(var(--accent)); background: linear-gradient(135deg, hsl(var(--accent) / .4), hsl(var(--primary) / .3)); border: 1px solid hsl(var(--accent) / .5); }
.recip-icon img { width: 100%; height: 100%; object-fit: cover; }
.recip-titles { flex: 1; min-width: 0; }
.recip-kicker { font-size: .65rem; text-transform: uppercase; letter-spacing: .25em; color: hsl(var(--muted-foreground)); }
.recip-titles h3 { font-size: 1.35rem; color: hsl(var(--foreground)); margin-top: .2rem; }
.recip-count { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .2rem; }
.recip-close { align-self: flex-start; background: none; border: 0; padding: .35rem; cursor: pointer; color: hsl(var(--muted-foreground)); }
.recip-close:hover { color: hsl(var(--foreground)); }
.recip-search { margin: 1rem 1.25rem .5rem; flex: none; min-width: 0; }
.recip-list { list-style: none; margin: 0; padding: .25rem 1.25rem 1.25rem; overflow-y: auto; counter-reset: r; }
.recip-list li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid hsl(var(--border) / .6); }
.recip-list li:last-child { border-bottom: 0; }
.recip-list .ra { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; object-fit: cover; border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: .85rem; color: hsl(var(--foreground)); }
.recip-list .rn { flex: 1; min-width: 0; }
.recip-list .rn b { display: block; font-weight: 500; color: hsl(var(--foreground)); font-size: .9rem; word-break: break-word; }
.recip-list .rn small { color: hsl(var(--muted-foreground)); font-size: .72rem; }
.recip-list .rd { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.recip-empty { padding: 1.5rem 1.25rem 2rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); }
body.modal-open { overflow: hidden; }
@media (max-width: 480px) { .recip-list .rd { display: none; } }

/* Events schedule */
.ev-tz { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: .75rem; letter-spacing: .08em; color: hsl(var(--muted-foreground)); }
.ev-tz b { color: hsl(var(--foreground)); font-weight: 500; }
.ev-next { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--primary) / .6); box-shadow: 0 0 0 1px hsl(var(--primary) / .15) inset; }
.ev-next[hidden] { display: none; }
.ev-next .lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .25em; color: hsl(var(--primary)); filter: brightness(1.6); }
.ev-next .lbl.live { color: hsl(0 70% 62%); filter: none; display: inline-flex; align-items: center; gap: .4rem; }
.ev-next .lbl.live::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; animation: pulse 1.6s infinite; }
.ev-next .t { font-family: var(--font-heading); font-size: 1.35rem; color: hsl(var(--foreground)); margin-top: .2rem; }
.ev-next .w { font-size: .85rem; color: hsl(var(--muted-foreground)); margin-top: .15rem; }
.ev-next .main { flex: 1; min-width: 220px; }
.ev-next .cd { font-family: var(--font-heading); font-size: 1.1rem; color: hsl(var(--foreground)); white-space: nowrap; }
.ev-week { margin-top: 1.5rem; display: grid; gap: .75rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ev-day { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); min-height: 180px; display: flex; flex-direction: column; }
.ev-day.today { border-color: hsl(var(--primary) / .7); }
.ev-day h3 { padding: .7rem .8rem; border-bottom: 1px solid hsl(var(--border)); font-family: var(--font-heading); font-size: .95rem; color: hsl(var(--foreground)); }
.ev-day h3 small { display: block; font-family: var(--font-body); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-top: .1rem; }
.ev-day.today h3 small { color: hsl(var(--primary)); filter: brightness(1.6); }
.ev-list { list-style: none; margin: 0; padding: .35rem .55rem .6rem; display: flex; flex-direction: column; gap: .4rem; }
.ev { padding: .55rem .6rem; border-left: 2px solid hsl(var(--primary) / .7); background: hsl(var(--background) / .55); }
.ev.ours { border-left-color: hsl(var(--accent)); background: hsl(var(--accent) / .12); }
.ev.past { opacity: .45; }
.ev.live { box-shadow: 0 0 0 1px hsl(0 70% 55% / .6); }
.ev .tm { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: hsl(var(--foreground)); }
.ev .et { font-size: .65rem; color: hsl(var(--muted-foreground)); margin-left: .25rem; font-weight: 400; }
.ev .nm { font-size: .8rem; line-height: 1.35; color: hsl(var(--foreground) / .9); margin-top: .2rem; word-break: break-word; }
.ev .tag { display: inline-block; margin-left: .3rem; padding: 0 .3rem; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--accent-foreground)); background: hsl(var(--accent)); vertical-align: 1px; }
.ev-join { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: hsl(var(--foreground) / .85); text-decoration: none; border-bottom: 1px solid hsl(var(--primary) / .6); }
.ev-join:hover { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--foreground)); }
.ev-none { padding: .8rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.ev-noscript { margin-top: 1.5rem; line-height: 1.9; font-size: .875rem; }
@media (max-width: 1100px) { .ev-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ev-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ev-week { grid-template-columns: 1fr; } .ev-day { min-height: 0; } }

/* Staff Login / Admin Panel button (header, next to Enlist) */
.staff-btn { align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid hsl(var(--primary));
  background: hsl(var(--primary) / .12); color: hsl(var(--foreground)); font-size: .75rem; line-height: 1rem; text-transform: uppercase;
  letter-spacing: .15em; text-decoration: none; transition: background-color .2s, border-color .2s; }
.staff-btn:hover { background: hsl(var(--primary) / .3); }
.staff-btn:focus-visible { outline: 2px solid hsl(var(--foreground)); outline-offset: 2px; }
.staff-btn.mobile { display: flex; padding: .75rem 1rem; }
.staff-btn.mobile + a { margin-top: .5rem; }

/* Bigger hero crest: scales with screen height so the title and Enlist button always still fit */
#overview img.march-in.object-contain { width: clamp(9rem, 24vh, 16rem); height: clamp(9rem, 24vh, 16rem); margin-bottom: 1.5rem; }

/* Rank badges + Discord pictures (chain of command, detachments, roll of honor) */
.officer-face { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.officer-pfp { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); }
.officer-badge { height: 44px; width: auto; }
.officer.selected .officer-pfp { border-color: hsl(var(--primary)); }
.op-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.op-pfp { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; border: 2px solid hsl(var(--primary) / .6); background: hsl(var(--secondary)); }
.op-badge { height: 92px; width: auto; filter: drop-shadow(0 4px 12px rgb(0 0 0 / .45)); }
.rank-badge-sm { height: 1.35em; width: auto; vertical-align: -.3em; margin-right: .4em; }

/* Main crest - bigger (overrides the earlier size) */
#overview img.march-in.object-contain { width: clamp(11rem, 32vh, 22rem); height: clamp(11rem, 32vh, 22rem); margin-bottom: 1.25rem; }
@media (max-height: 800px) { #overview img.march-in.object-contain { width: clamp(9rem, 26vh, 16rem); height: clamp(9rem, 26vh, 16rem); margin-bottom: .75rem; } }

/* Discord pictures + live online dots */
.pfp-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.pdot { display: none; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid hsl(var(--card)); }
.pdot.online { display: block; background: #23a55a; }
.pdot.idle { display: block; background: #f0b232; }
.pdot.dnd { display: block; background: #f23f43; }
.pdot.offline { display: block; background: #80848e; }
.pfp-wrap.sm .pdot { width: 11px; height: 11px; right: -2px; bottom: -2px; }
.det-cmd { display: flex; align-items: center; gap: .5rem; }
.det-cmd .rank-badge-sm { margin-right: 0; }
.det-pfp { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); }
.op-discord { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.op-discord .pdot { position: static; border: 0; width: 10px; height: 10px; }

/* Rank insignia placement: its own column on the right (Roll of Honor cards + medal recipients) */
.soldier-head { gap: .85rem; }
.soldier-id { flex: 1; min-width: 0; }
.soldier-rank { height: 52px; width: auto; flex-shrink: 0; margin-left: auto; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .45)); }
.soldier-rank-title { color: hsl(var(--foreground) / .85); }
.recip-rank-slot { width: 34px; display: flex; justify-content: center; flex-shrink: 0; }
.recip-rank { height: 34px; width: auto; }
.recip-list .rn small.rt { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; }

/* ================= Centered layout for the main page ================= */
/* Section headings: centered, with a short rule underneath instead of the left line */
main section .scope-line { padding-left: 0; text-align: center; }
main section .scope-line::before { display: none; }
main section .scope-line::after { content: ""; display: block; width: 4rem; height: 1px; margin: 1.25rem auto 0; background: hsl(var(--primary) / .6); }
main section p.max-w-2xl { margin-left: auto; margin-right: auto; text-align: center; }

/* Regiment: centered text, fact boxes in a centered row below */
#regiment .grid { display: flex; flex-direction: column; align-items: center; }
#regiment .grid > .space-y-6 { max-width: 48rem; text-align: center; }
#regiment .grid > .space-y-4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; }
#regiment .grid > .space-y-4 > * { margin-top: 0 !important; flex: 0 1 250px; justify-content: center; text-align: left; }

/* Events */
.ev-tz { justify-content: center; text-align: center; }
.ev-next { justify-content: center; text-align: center; }

/* Chain of command: empty detail panel message centered */
#officer-panel:not(.filled) { text-align: center; }

/* Detachment cards: centered content */
#detachments .group { text-align: center; }
#detachments .group > div:first-child { justify-content: center; gap: .6rem; }
#detachments .det-cmd { justify-content: center; }

/* Gallery: heading + arrows centered, photos centered when they don't fill the row */
#gallery .justify-between { flex-direction: column; align-items: center; justify-content: center; }
#gallery-track { justify-content: safe center; }

/* Hall of Valor: centered cards, last row centered too */
#valor .grid { display: flex; flex-wrap: wrap; justify-content: center; }
#valor .grid > * { flex: 0 1 100%; }
@media (min-width: 640px) { #valor .grid > * { flex-basis: calc(50% - .625rem); } }
@media (min-width: 1024px) { #valor .grid > * { flex-basis: calc(33.333% - .834rem); } }
.medal-card { text-align: center; }
.medal-card > .flex { flex-direction: column; align-items: center; }
.medal-card .recipients { justify-content: center; }

/* Roll of Honor: search + filters centered, cards centered (incl. last row) */
.roll-tools { flex-direction: column; align-items: center; }
.roll-search { width: 100%; max-width: 420px; flex: none; }
.roll-filters { justify-content: center; }
.roll-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.roll-grid .soldier { flex: 0 1 300px; }
.roll-empty { text-align: center; }

/* Footer: everything stacked in the middle */
footer > div { flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center; }
footer > div > .flex.items-center { flex-direction: column; gap: .5rem; }

/* Header: menu centered between the logo and the buttons, with breathing room */
header .justify-between > button:first-child { margin-right: 1.5rem; flex-shrink: 0; }
header nav { flex: 1; justify-content: center; }
@media (min-width: 1024px) and (max-width: 1400px) { header nav { gap: 1.25rem !important; } }

/* Events: "Next event" banner stacked in the middle */
.ev-next { flex-direction: column; align-items: center; gap: .6rem; }
.ev-next .main { flex: none; min-width: 0; }

/* ================= Grenadier & Skirmisher stats ================= */
.stats-tabs { display: flex; justify-content: center; gap: .6rem; margin-top: 2.5rem; flex-wrap: wrap; }
.stats-tabs .chip { font-size: .75rem; padding: .55rem 1.1rem; }
.stats-count { opacity: .7; margin-left: .35rem; }
.stats-panel { max-width: 64rem; margin: 1.75rem auto 0; }
.stats-panel[hidden] { display: none; }
.stats-summary { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.stats-summary > div { display: flex; flex-direction: column; align-items: center; min-width: 150px; padding: .75rem 1.25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.stats-summary span { font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; color: hsl(var(--muted-foreground)); }
.stats-summary b { font-family: var(--font-heading); font-size: 1.15rem; color: hsl(var(--foreground)); margin-top: .25rem; font-weight: 600; }
.stats-table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.stats-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.stats-table th { position: sticky; top: 0; background: hsl(var(--secondary)); font-size: .62rem; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--muted-foreground)); padding: .75rem .9rem; text-align: center; white-space: nowrap; }
.stats-table td { padding: .6rem .9rem; border-top: 1px solid hsl(var(--border) / .6); text-align: center; color: hsl(var(--foreground) / .9); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table tbody tr:hover td { background: hsl(var(--primary) / .08); }
.stats-table .left { text-align: left; }
.stats-table td.muted { color: hsl(var(--muted-foreground)); font-size: .8rem; }
.stats-table td.all { font-weight: 600; color: hsl(var(--foreground)); }
.stats-table td.top { color: hsl(40 70% 70%); font-weight: 700; }
.stat-soldier { display: flex; align-items: center; gap: .6rem; }
.stat-pfp-slot { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.stat-pfp { position: absolute; inset: 0; width: 34px; height: 34px; border-radius: 999px; object-fit: cover; border: 1px solid hsl(var(--border)); z-index: 1; }
.stat-pfp.initials { display: flex; align-items: center; justify-content: center; background: hsl(var(--secondary)); font-family: var(--font-heading); font-size: .85rem; color: hsl(var(--foreground)); z-index: 0; }
.stat-rank-slot { width: 30px; display: flex; justify-content: center; flex-shrink: 0; }
.stat-rank { height: 30px; width: auto; }
.stat-who { display: flex; flex-direction: column; min-width: 0; }
.stat-who b { font-weight: 500; color: hsl(var(--foreground)); }
.stat-who small { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
@media (max-width: 640px) { .stats-table .hide-sm { display: none; } .stats-table td, .stats-table th { padding: .55rem .5rem; } }

/* Kill leaders */
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.leader { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 1rem 1.1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); position: relative; }
.leader-all { border-color: hsl(40 60% 55% / .6); box-shadow: 0 0 0 1px hsl(40 60% 55% / .15) inset; }
.leader-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: hsl(var(--primary)); filter: brightness(1.6); }
.leader-all .leader-label { color: hsl(40 70% 65%); filter: none; }
.leader-face { position: relative; margin: .9rem 0 .6rem; }
.leader-pfp-slot { position: relative; display: block; width: 72px; height: 72px; }
.leader-pfp { position: absolute; inset: 0; width: 72px; height: 72px; border-radius: 999px; object-fit: cover; border: 2px solid hsl(var(--primary) / .6); z-index: 1; }
.leader-all .leader-pfp { border-color: hsl(40 60% 55%); }
.leader-pfp.initials { display: flex; align-items: center; justify-content: center; background: hsl(var(--secondary)); font-family: var(--font-heading); font-size: 1.6rem; color: hsl(var(--foreground)); z-index: 0; }
.leader-rank { position: absolute; right: -14px; bottom: -6px; height: 36px; width: auto; z-index: 2; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .6)); }
.leader-name { font-family: var(--font-heading); font-size: 1.1rem; color: hsl(var(--foreground)); word-break: break-word; }
.leader-rank-title { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: hsl(var(--muted-foreground)); margin-top: .15rem; }
.leader-kills { margin-top: .6rem; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.leader-kills b { font-family: var(--font-heading); font-size: 1.5rem; color: hsl(var(--foreground)); margin-right: .2rem; }
.leader-all .leader-kills b { color: hsl(40 70% 70%); }
.leader-none { margin: 1.5rem 0; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.stats-total { text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: .25rem 0 1.25rem; }
@media (max-width: 640px) { .leaders { grid-template-columns: 1fr; } }

/* Leader cards: rank insignia sits beside the rank title under the name, not over the picture */
.leader-rank { position: static; right: auto; bottom: auto; height: 28px; width: auto; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)); }
.leader-rank-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .4rem; }
.leader-rank-row .leader-rank-title { margin-top: 0; }

/* Discord status on the stats tables + kill leaders */
.stat-pfp-slot .pdot { z-index: 2; width: 12px; height: 12px; right: -2px; bottom: -2px; }
.leader-pfp-slot .pdot { z-index: 3; width: 16px; height: 16px; right: 2px; bottom: 2px; border-width: 3px; }
.stats-table tbody tr td .pdot { border-color: hsl(var(--card)); }
.activity { color: hsl(140 45% 60%) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .7rem !important; }
.leader-activity { margin-top: .35rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity[hidden] { display: none; }

/* "Playing …" lines on the chain of command + detachments */
.officer-activity { margin-top: .15rem; }
.det-activity { margin-top: .3rem; text-align: center; }
.op-activity { margin-top: .35rem; }

/* ---------- Live servers ---------- */
.servers-grid{margin-top:3rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.servers-grid .srv{flex:0 1 320px;min-width:260px}
.servers-empty{width:100%;text-align:center}
.srv{padding:1.25rem;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:.5rem}
.srv-head{display:flex;align-items:center;gap:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:hsl(var(--muted-foreground))}
.srv-dot{width:9px;height:9px;border-radius:50%;background:hsl(var(--muted-foreground)/.5);flex-shrink:0}
.srv.on .srv-dot{background:#3ba55d;box-shadow:0 0 0 3px rgba(59,165,93,.2)}
.srv-name{font-family:var(--font-heading);color:hsl(var(--foreground));font-size:1rem;line-height:1.3;word-break:break-word}
.srv-map{font-size:.8rem;color:hsl(var(--muted-foreground))}
.srv-bar{height:6px;background:hsl(var(--border));border-radius:3px;overflow:hidden;margin-top:.25rem}
.srv-bar i{display:block;height:100%;background:hsl(var(--primary));border-radius:3px}
.srv-count{font-size:.8rem;color:hsl(var(--foreground));display:flex;justify-content:space-between}
.srv-count small{color:hsl(var(--muted-foreground))}
.srv.off .srv-name{color:hsl(var(--muted-foreground))}
.servers-empty{margin-top:2rem;color:hsl(var(--muted-foreground));font-size:.9rem}

/* ---------- Regiment activity (HFStats) ---------- */
.act-tiles{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.act-tile{padding:1.25rem;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:.35rem}
.act-tile span{font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--muted-foreground))}
.act-tile b{font-family:var(--font-heading);font-size:2rem;font-weight:600;color:hsl(var(--foreground));line-height:1.1}
.act-tile small{font-size:.75rem;color:hsl(var(--muted-foreground))}
.act-chart{position:relative;margin:2rem 0 0;padding:1.25rem;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.act-chart figcaption{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--muted-foreground));margin-bottom:.75rem}
.act-chart svg{display:block;width:100%;height:190px;overflow:visible}
.act-base{stroke:hsl(var(--border));stroke-width:1}
.act-bar{fill:hsl(var(--primary));transition:opacity .15s}
.act-hit{fill:transparent;cursor:default}
.act-chart svg:hover .act-col .act-bar{opacity:.45}
.act-chart svg .act-col:hover .act-bar,.act-chart svg .act-col:focus .act-bar{opacity:1}
.act-col:focus{outline:none}
.act-col:focus .act-hit{fill:hsl(var(--foreground)/.06)}
.act-axis{fill:hsl(var(--muted-foreground));font-size:11px;font-family:var(--font-body)}
.act-tip{position:absolute;pointer-events:none;background:hsl(var(--background));border:1px solid hsl(var(--border));padding:.4rem .6rem;font-size:.75rem;color:hsl(var(--foreground));white-space:nowrap;transform:translate(-50%,-100%);z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.act-tip b{display:block;font-size:.95rem}
.act-tip span{color:hsl(var(--muted-foreground))}
.act-table{margin-top:.75rem;font-size:.8rem;color:hsl(var(--muted-foreground))}
.act-table summary{cursor:pointer;width:max-content}
.act-table table{margin-top:.5rem;border-collapse:collapse;min-width:220px}
.act-table td,.act-table th{padding:.2rem .75rem .2rem 0;text-align:left;border-bottom:1px solid hsl(var(--border))}
.act-table td:last-child{color:hsl(var(--foreground));text-align:right}
.act-lists{margin-top:1.5rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.act-list{padding:1.25rem;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.act-list h3{font-size:.95rem;color:hsl(var(--foreground));margin-bottom:.75rem;letter-spacing:.08em}
.act-list ul{list-style:none;margin:0;padding:0}
.act-list li{display:flex;align-items:baseline;gap:.75rem;padding:.45rem 0;border-bottom:1px solid hsl(var(--border)/.6);font-size:.85rem}
.act-list li:last-child{border-bottom:0}
.act-list .d{flex:0 0 4.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:hsl(var(--muted-foreground))}
.act-list a{color:hsl(var(--foreground));flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-list a:hover{color:hsl(var(--primary))}
.act-list b{font-variant-numeric:tabular-nums;color:hsl(var(--foreground))}
.act-credit{margin-top:1rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
.act-credit a{text-decoration:underline}

/* ---------- Join page ---------- */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
.join-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid hsl(var(--border))}
.join-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);letter-spacing:.15em;font-size:.85rem;color:hsl(var(--foreground))}
.join-brand img{width:36px;height:36px;object-fit:contain}
.join-header .staff-btn{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:hsl(var(--muted-foreground))}
.join-header .staff-btn:hover{color:hsl(var(--foreground))}
.join-main{max-width:820px;margin:0 auto;padding:3rem 1.25rem 4rem}
.join-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.join-crest{width:110px;height:110px;object-fit:contain}
.join-hero h1{font-size:clamp(1.8rem,5vw,2.8rem);color:hsl(var(--foreground))}
.join-intro{max-width:600px;color:hsl(var(--muted-foreground));white-space:pre-line}
.join-steps-nav{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:0;margin:1rem 0 0}
.join-steps-nav a{display:block;padding:.45rem .9rem;border:1px solid hsl(var(--border));font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:hsl(var(--muted-foreground))}
.join-steps-nav a:hover{border-color:hsl(var(--primary));color:hsl(var(--foreground))}
.join-step{margin-top:3rem;padding:2rem;background:hsl(var(--card));border:1px solid hsl(var(--border));scroll-margin-top:1rem}
.join-step h2{font-size:1.6rem;color:hsl(var(--foreground));margin-bottom:1rem}
.join-step p{color:hsl(var(--muted-foreground));line-height:1.65}
.step-no{font-size:.7rem!important;text-transform:uppercase;letter-spacing:.3em;color:hsl(var(--primary))!important;margin-bottom:.25rem}
.join-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.join-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:hsl(var(--muted-foreground))}
.join-form label.wide{grid-column:1/-1}
.join-form input,.join-form select,.join-form textarea{font:inherit;font-size:.95rem;text-transform:none;letter-spacing:normal;color:hsl(var(--foreground));background:hsl(var(--background));border:1px solid hsl(var(--border));padding:.65rem .75rem;border-radius:0;width:100%}
.join-form input:focus,.join-form select:focus,.join-form textarea:focus{outline:2px solid hsl(var(--primary));outline-offset:-1px}
.join-submit{grid-column:1/-1;justify-self:start;display:inline-block;padding:.8rem 1.6rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;border:0;cursor:pointer}
.join-submit:hover{background:hsl(var(--primary)/.8)}
.join-submit.inline{margin-top:1rem}
.join-flash{padding:.75rem 1rem;margin-bottom:1rem;border:1px solid hsl(var(--border));font-size:.9rem;color:hsl(var(--foreground))}
.join-flash.error{border-color:hsl(var(--destructive));background:hsl(var(--destructive)/.12)}
.join-flash.ok{border-color:#3ba55d;background:rgba(59,165,93,.12)}
.join-sent{padding:1rem 1.25rem;border:1px solid #3ba55d;background:rgba(59,165,93,.12);color:hsl(var(--foreground))}
.notif-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.25rem}
.notif-card{padding:1.25rem;border:1px solid hsl(var(--border));background:hsl(var(--background))}
.notif-card h3,.notif-sub{font-family:var(--font-heading);font-size:1rem;color:hsl(var(--foreground));margin-bottom:.6rem}
.notif-sub{margin-top:1.75rem}
.notif-card ol{padding-left:1.2rem;margin:0;color:hsl(var(--muted-foreground));font-size:.9rem;line-height:1.7;list-style:decimal}
.notif-card b{color:hsl(var(--foreground))}
.chan-list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.chan-list li{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;padding:.5rem .75rem;border-left:3px solid hsl(var(--muted-foreground)/.5);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem}
.chan-list.keep li{border-left-color:#3ba55d}
.chan-list .hash{color:hsl(var(--muted-foreground))}
.chan-list small{flex-basis:100%;color:hsl(var(--muted-foreground));font-size:.78rem;padding-left:.9rem}
.ladder{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.ladder li{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem .5rem;border:1px solid hsl(var(--border));background:hsl(var(--background));text-align:center;font-size:.75rem;color:hsl(var(--foreground))}
.ladder img{width:44px;height:44px;object-fit:contain}
.join-footer{text-align:center;padding:2rem 1rem;border-top:1px solid hsl(var(--border));font-size:.75rem;color:hsl(var(--muted-foreground))}
@media (max-width:600px){.join-form{grid-template-columns:1fr}.join-step{padding:1.25rem}}

/* ---------- Live banner + join window ---------- */
.live-banner{position:fixed;top:64px;left:0;right:0;z-index:39;display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;padding:.55rem 3rem .55rem 1rem;background:linear-gradient(90deg,rgba(35,165,90,.18),rgba(35,165,90,.28),rgba(35,165,90,.18)),hsl(var(--background));border-bottom:1px solid rgba(35,165,90,.55);color:hsl(var(--foreground));font-size:.85rem;backdrop-filter:blur(8px)}
.live-banner[hidden]{display:none}
.live-dot{width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.7);animation:livepulse 1.6s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live-text b{font-family:var(--font-heading);letter-spacing:.06em}
.live-text span{color:hsl(var(--muted-foreground));margin-left:.35rem}
.live-join{font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;padding:.45rem 1rem;border:0;cursor:pointer;background:#23a55a;color:#fff}
.live-join:hover{background:#1d8a4b}
.live-close{position:absolute;right:.75rem;font:inherit;background:none;border:0;color:hsl(var(--muted-foreground));cursor:pointer;font-size:.9rem;padding:.25rem .4rem}
.live-close:hover{color:hsl(var(--foreground))}
body.has-live #overview{scroll-margin-top:110px}
.srv-kind{margin-left:auto;font-size:.62rem;letter-spacing:.12em;color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border));padding:.1rem .4rem}
.srv-state{display:inline-block;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;padding:.12rem .45rem;border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))}
.srv-state.live{border-color:rgba(229,72,77,.6);color:#ff8a8d;background:rgba(229,72,77,.12)}
.srv-state.on{border-color:rgba(35,165,90,.6);color:#6fd49a}
.srv.live{border-color:rgba(35,165,90,.6);box-shadow:0 0 0 1px rgba(35,165,90,.25) inset}
.srv-join{margin-top:.6rem;font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;padding:.6rem 1rem;cursor:pointer;border:1px solid hsl(var(--primary));background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.srv-join:hover{background:hsl(var(--primary)/.8)}
.srv.off .srv-join{background:transparent;color:hsl(var(--foreground))}
.join-dlg{width:min(520px,calc(100vw - 2rem));padding:1.75rem;background:hsl(var(--card));color:hsl(var(--foreground));border:1px solid hsl(var(--border));box-shadow:0 24px 70px rgba(0,0,0,.65)}
.join-dlg::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(3px)}
.join-dlg h2{font-size:1.5rem;margin:.25rem 0 .35rem}
.join-dlg-x{position:absolute;top:.75rem;right:.75rem;font:inherit;background:none;border:0;color:hsl(var(--muted-foreground));cursor:pointer;font-size:1rem;padding:.3rem}
.join-dlg-status{font-size:.85rem;color:hsl(var(--muted-foreground));margin-bottom:1.25rem}
.join-dlg-steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.join-dlg-steps li{display:flex;gap:.85rem;align-items:flex-start}
.join-dlg-steps li>span{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:.85rem;background:hsl(var(--primary)/.25);border:1px solid hsl(var(--primary))}
.join-dlg-steps li>div{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.join-dlg-steps small{color:hsl(var(--muted-foreground));font-size:.8rem;line-height:1.5}
.join-dlg-steps small b{color:hsl(var(--foreground))}
.join-dlg-btn{display:inline-block;text-align:center;padding:.65rem 1rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:.72rem;text-transform:uppercase;letter-spacing:.16em}
.join-dlg-btn:hover{background:hsl(var(--primary)/.8)}
.join-dlg-addr{display:flex;border:1px solid hsl(var(--border));background:hsl(var(--background))}
.join-dlg-addr code{flex:1;padding:.6rem .75rem;font-size:1rem;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.join-dlg-addr button{font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;padding:0 1rem;border:0;border-left:1px solid hsl(var(--border));background:hsl(var(--secondary));color:hsl(var(--foreground));cursor:pointer}
.join-dlg-addr button:hover{background:hsl(var(--primary)/.35)}
#join-copied{color:#6fd49a}
.join-dlg-note{margin-top:1.1rem;padding:.65rem .8rem;border-left:3px solid #f0b232;background:rgba(240,178,50,.08);font-size:.85rem}
.join-dlg-tip{margin-top:1rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
@media (max-width:640px){.live-banner{font-size:.78rem;gap:.5rem}.live-text span{display:block;margin:0}}

.srv-live{margin-left:auto}

/* ---------- Multi-page layout ---------- */
.page-top{height:64px}
body.has-live .page-top{height:110px}
.nav-link.active{color:hsl(var(--foreground));position:relative}
header .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:hsl(var(--primary))}
#mobile-menu .nav-link.active{color:hsl(var(--foreground));border-left:2px solid hsl(var(--primary));padding-left:.75rem}
.explore-grid{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.explore-card{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem;background:hsl(var(--card));border:1px solid hsl(var(--border));text-decoration:none;transition:border-color .2s,transform .2s}
.explore-card:hover{border-color:hsl(var(--primary));transform:translateY(-2px)}
.explore-card b{font-family:var(--font-heading);font-size:1.15rem;color:hsl(var(--foreground));letter-spacing:.04em}
.explore-card small{font-size:.85rem;color:hsl(var(--muted-foreground));line-height:1.55}
.explore-card .ex-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid hsl(var(--border));color:hsl(var(--primary));margin-bottom:.35rem}
.explore-card.enlist{border-color:hsl(var(--primary)/.6);background:hsl(var(--primary)/.12)}
@media (prefers-reduced-motion:reduce){.explore-card{transition:none}.explore-card:hover{transform:none}}

/* ---------- Our Story, Socials, War Journal ---------- */
@media (max-width:1279px){.nav-desk{display:none!important}.nav-burger{display:inline-flex!important}}
.nav-desk{gap:1.6rem!important}
.empty-note{margin-top:2.5rem;padding:2rem;border:1px dashed hsl(var(--border));text-align:center;color:hsl(var(--muted-foreground))}
.timeline{list-style:none;margin:3rem 0 0;padding:0 0 0 2rem;border-left:1px solid hsl(var(--border));display:grid;gap:2.5rem}
.tl-item{position:relative}
.tl-dot{position:absolute;left:calc(-2rem - 7px);top:.35rem;width:13px;height:13px;border-radius:50%;background:hsl(var(--background));border:2px solid hsl(var(--primary))}
.tl-era{font-size:.72rem;text-transform:uppercase;letter-spacing:.25em;color:hsl(var(--primary));margin-bottom:.35rem}
.tl-title{font-size:1.5rem;color:hsl(var(--foreground));margin-bottom:.75rem}
.tl-img{width:100%;max-height:420px;object-fit:cover;border:1px solid hsl(var(--border));margin:.25rem 0 1rem}
.tl-text{color:hsl(var(--muted-foreground));line-height:1.75;margin-top:.75rem;white-space:pre-line}
.social-grid{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.social-card{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;background:hsl(var(--card));border:1px solid hsl(var(--border));text-decoration:none;transition:border-color .2s}
.social-card:hover{border-color:hsl(var(--primary))}
.social-card .ex-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid hsl(var(--border));color:hsl(var(--primary))}
.sc-text{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.sc-text small{font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--muted-foreground))}
.sc-text b{font-family:var(--font-heading);color:hsl(var(--foreground));font-size:1.05rem}
.sc-text span{font-size:.85rem;color:hsl(var(--muted-foreground))}
.sc-go{color:hsl(var(--muted-foreground));flex-shrink:0}
.creator-grid{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.creator-card{position:relative;padding:1.5rem;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:.85rem}
.creator-card.featured{border-color:hsl(var(--primary)/.7);box-shadow:0 0 0 1px hsl(var(--primary)/.25) inset}
.cr-flag{position:absolute;top:1rem;right:1rem;font-size:.6rem;text-transform:uppercase;letter-spacing:.18em;padding:.15rem .5rem;border:1px solid hsl(var(--primary));color:hsl(var(--foreground))}
.cr-head{display:flex;align-items:center;gap:1rem}
.cr-pfp{width:64px;height:64px}
.cr-pfp img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.cr-head h3{font-size:1.15rem;color:hsl(var(--foreground))}
.cr-rank{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
.cr-rank img{width:18px;height:18px;object-fit:contain}
.cr-bio{font-size:.9rem;color:hsl(var(--muted-foreground));line-height:1.6}
.cr-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.cr-links a{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;font-size:.75rem;border:1px solid hsl(var(--border));color:hsl(var(--foreground));text-decoration:none}
.cr-links a:hover{border-color:hsl(var(--primary));background:hsl(var(--primary)/.15)}
.jr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.jr-write,.jr-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.2rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;background:hsl(var(--primary));color:hsl(var(--primary-foreground));text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.jr-write:hover{background:hsl(var(--primary)/.8)}
.jr-btn{background:transparent;border:1px solid hsl(var(--border));color:hsl(var(--foreground))}
.jr-btn:hover{border-color:hsl(var(--primary))}
.jr-btn.danger:hover{border-color:#e5484d;color:#ff8a8d}
.jr-hint{margin-top:1rem;font-size:.9rem;color:hsl(var(--muted-foreground))}
.jr-hint a,.jr-back a{text-decoration:underline;color:hsl(var(--foreground))}
.jr-list{margin-top:2.5rem;display:grid;gap:1rem}
.jr-card{display:flex;gap:1.25rem;padding:1.25rem;background:hsl(var(--card));border:1px solid hsl(var(--border));text-decoration:none;transition:border-color .2s}
.jr-card:hover{border-color:hsl(var(--primary))}
.jr-thumb{width:200px;height:130px;object-fit:cover;flex-shrink:0;border:1px solid hsl(var(--border))}
.jr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.jr-body h3{font-size:1.3rem;color:hsl(var(--foreground))}
.jr-battle{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:hsl(var(--primary))}
.jr-excerpt{font-size:.9rem;color:hsl(var(--muted-foreground));line-height:1.6}
.jr-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8rem;color:hsl(var(--muted-foreground));margin-top:auto}
.jr-meta .pfp-wrap img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.jr-meta b{color:hsl(var(--foreground))}
.jr-rank{width:20px;height:20px;object-fit:contain}
.jr-meta.big{margin:1rem 0 2rem;gap:.75rem;font-size:.85rem}
.jr-meta.big .pfp-wrap img{width:44px;height:44px}
.jr-by{display:flex;align-items:center;gap:.4rem}
.jr-by small{color:hsl(var(--muted-foreground));margin-left:.2rem}
.jr-back{font-size:.85rem;margin-bottom:1.5rem}
.jr-title{font-size:clamp(1.8rem,4.5vw,2.8rem);color:hsl(var(--foreground));line-height:1.15;margin:.35rem 0 .75rem}
.jr-hero{width:100%;max-height:480px;object-fit:cover;border:1px solid hsl(var(--border));margin-bottom:2rem}
.jr-text p{color:hsl(var(--foreground));opacity:.9;line-height:1.85;font-size:1.05rem;margin-bottom:1.25rem;white-space:pre-line}
.jr-actions{display:flex;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid hsl(var(--border))}
.jr-status{padding:.75rem 1rem;margin-bottom:1.5rem;border:1px solid #f0b232;background:rgba(240,178,50,.08);font-size:.9rem;color:hsl(var(--foreground))}
.jr-form{display:grid;gap:1.1rem;margin-top:1.5rem}
.jr-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:hsl(var(--muted-foreground))}
.jr-form label small{text-transform:none;letter-spacing:0}
.jr-form input[type=text],.jr-form textarea{font:inherit;font-size:1rem;text-transform:none;letter-spacing:normal;color:hsl(var(--foreground));background:hsl(var(--card));border:1px solid hsl(var(--border));padding:.75rem;width:100%}
.jr-form textarea{line-height:1.7;resize:vertical}
.jr-form input:focus,.jr-form textarea:focus{outline:2px solid hsl(var(--primary));outline-offset:-1px}
.jr-form .jr-check{flex-direction:row;align-items:center;text-transform:none;letter-spacing:0;font-size:.85rem}
.jr-note{font-size:.85rem;color:hsl(var(--muted-foreground))}
.jr-form .join-submit{justify-self:start}
@media (max-width:640px){.jr-card{flex-direction:column}.jr-thumb{width:100%;height:170px}}

/* ---------- Meet the Chain of Command ---------- */
.meet-jump{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2rem}
.meet-jump a{font-size:.75rem;padding:.35rem .75rem;border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));text-decoration:none}
.meet-jump a:hover{border-color:hsl(var(--primary));color:hsl(var(--foreground))}
.meet-list{margin-top:2.5rem;display:grid;gap:1.5rem}
.meet-card{display:grid;grid-template-columns:220px 1fr;gap:2rem;padding:2rem;background:hsl(var(--card));border:1px solid hsl(var(--border));scroll-margin-top:90px}
.meet-side{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.meet-pfp{width:140px;height:140px}
.meet-pfp img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:2px solid hsl(var(--border))}
.meet-pfp .pdot{width:18px;height:18px;right:8px;bottom:8px}
.meet-badge{width:56px;height:56px;object-fit:contain}
.meet-facts{margin:0;width:100%;display:grid;gap:.6rem;text-align:left}
.meet-facts dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--muted-foreground))}
.meet-facts dd{margin:0;font-size:.9rem;color:hsl(var(--foreground))}
.meet-main h3{font-size:1.8rem;color:hsl(var(--foreground))}
.meet-quote{margin:1rem 0 0;padding:.25rem 0 .25rem 1rem;border-left:3px solid hsl(var(--primary));font-style:italic;color:hsl(var(--foreground));font-size:1.05rem}
.meet-h{margin:1.5rem 0 .5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:hsl(var(--primary));font-family:var(--font-body)}
.meet-text{color:hsl(var(--muted-foreground));line-height:1.8;margin-top:.6rem;white-space:pre-line}
@media (max-width:760px){.meet-card{grid-template-columns:1fr;padding:1.5rem}.meet-facts{text-align:center}}
.jr-head{flex-direction:column;align-items:center;gap:0}
.jr-head .jr-write{order:3;margin-top:1.75rem}
#journal .jr-hint{text-align:center}
.meet-jump{justify-content:center}
#journal-entry,#journal-write{padding-top:3.5rem;padding-bottom:5rem}
#journal-entry .join-flash,#journal .join-flash{margin-bottom:1.25rem}

/* ---------- Videos: gallery + trailers ---------- */
.play-badge{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:4px;background:rgba(0,0,0,.6);color:#fff;border:2px solid rgba(255,255,255,.85);transition:transform .2s,background .2s;pointer-events:none}
.is-video:hover .play-badge{background:hsl(var(--primary));transform:translate(-50%,-50%) scale(1.08)}
.lightbox .lb-video{display:block;max-width:100%;max-height:78vh;background:#000;border:1px solid hsl(var(--border))}
.lightbox .lb-video[hidden],.lightbox .lb-yt[hidden],.lightbox img[hidden]{display:none}
.lightbox .lb-yt{width:min(1100px,92vw);aspect-ratio:16/9;background:#000;border:1px solid hsl(var(--border))}
.lightbox .lb-yt iframe{width:100%;height:100%;border:0}
.det-trailer{margin-top:.75rem;display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;padding:.45rem .8rem;cursor:pointer;border:1px solid hsl(var(--primary));background:hsl(var(--primary)/.15);color:hsl(var(--foreground))}
.det-trailer:hover{background:hsl(var(--primary))}
@media (prefers-reduced-motion:reduce){.play-badge{transition:none}}

/* ---------- Live stream ---------- */
.nav-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5484d;margin-right:.4rem;vertical-align:middle;animation:livepulse 1.6s infinite}
.stream-banner{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;padding:.5rem 1rem;background:linear-gradient(90deg,rgba(229,72,77,.22),rgba(229,72,77,.35),rgba(229,72,77,.22)),hsl(var(--background));border-top:1px solid rgba(229,72,77,.45);color:hsl(var(--foreground));font-size:.85rem;text-decoration:none}
.stream-banner b{font-family:var(--font-heading);letter-spacing:.06em}
.stream-banner span{color:hsl(var(--muted-foreground))}
.stream-banner .sb-cta{color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;padding:.3rem .8rem;background:#e5484d}
.stream-banner:hover .sb-cta{background:#c93b40}
body[data-stream] .page-top{height:104px}
body[data-stream].has-live .page-top{height:150px}
body[data-stream] .live-banner{top:104px}
.live-pill{display:inline-flex;align-items:center;gap:.45rem;color:#ff8a8d}
.live-head{text-align:center}
.live-wrap{margin-top:2.5rem;display:grid;gap:1rem;grid-template-columns:1fr}
.live-wrap.has-chat{grid-template-columns:minmax(0,1fr) 340px}
.live-player{position:relative;aspect-ratio:16/9;background:#000;border:1px solid hsl(var(--border));box-shadow:0 20px 60px rgba(0,0,0,.45)}
.live-player iframe,.live-chat iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-chat{position:relative;min-height:360px;border:1px solid hsl(var(--border));background:hsl(var(--card))}
.live-under{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem}
.live-links{display:flex;gap:1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
.live-links a{color:hsl(var(--foreground));text-decoration:none;border-bottom:1px solid hsl(var(--primary))}
@media (max-width:1023px){.live-wrap.has-chat{grid-template-columns:1fr}.live-chat{height:420px}}
@media (prefers-reduced-motion:reduce){.nav-live-dot{animation:none}}