/* ==========================================================================
   43c modern design layer. Loaded after site.css + extra.css.
   Remove the <link> to modern.css in templates/index.html + join.html to go back.
   ========================================================================== */
:root{
  --r-lg:18px; --r-md:12px; --r-sm:8px; --r-pill:999px;
  --brand:208 62% 52%;          /* brighter navy-blue for accents */
  --brand-deep:212 55% 32%;
  --gold:40 62% 68%;
  --surface-1:215 16% 11%;
  --surface-2:215 15% 14%;
  --line:215 16% 22%;
  --glow:0 0 0 1px hsl(var(--brand)/.35),0 10px 40px -10px hsl(var(--brand)/.55);
  --lift:0 18px 50px -20px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.25);
}

/* ---------- Page background: soft lighting instead of flat black ---------- */
body{background:
  radial-gradient(1200px 600px at 10% -10%,hsl(var(--brand)/.10),transparent 60%),
  radial-gradient(900px 500px at 100% 10%,hsl(var(--gold)/.06),transparent 60%),
  hsl(var(--background));background-attachment:fixed}
.min-h-screen.bg-background,main section.bg-background{background:transparent!important}
main section.vellum,main section[class*="bg-card/40"]{background:linear-gradient(180deg,hsl(var(--surface-1)/.55),hsl(var(--surface-1)/.25))!important;border-top:1px solid hsl(var(--line)/.6);border-bottom:1px solid hsl(var(--line)/.6)}
::selection{background:hsl(var(--brand)/.45);color:#fff}

/* ---------- Header: frosted glass, pill nav ---------- */
header.fixed{background:hsl(var(--background)/.62)!important;backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid hsl(var(--line)/.7)!important;box-shadow:0 8px 30px -18px rgba(0,0,0,.8)}
header .nav-desk{gap:.25rem!important}
header .nav-link{padding:.5rem .8rem;border-radius:var(--r-pill);transition:background .2s,color .2s}
header .nav-link:hover{background:hsl(var(--foreground)/.06)}
header .nav-link.active{background:hsl(var(--brand)/.18);color:hsl(var(--foreground))!important;box-shadow:inset 0 0 0 1px hsl(var(--brand)/.35)}
header .nav-link.active::after{display:none}
.staff-btn{border-radius:var(--r-pill)!important}
#mobile-menu aside{border-radius:var(--r-lg) 0 0 var(--r-lg)}
#mobile-menu .nav-link{border-radius:var(--r-sm)}

/* ---------- Buttons ---------- */
a.bg-primary,button.bg-primary,.join-submit,.jr-write,.srv-join,.join-dlg-btn,.live-join,.explore-card.enlist .ex-icon{
  border-radius:var(--r-pill)!important;
  background:linear-gradient(135deg,hsl(var(--brand)),hsl(var(--brand-deep)))!important;color:#fff!important;
  box-shadow:0 8px 24px -10px hsl(var(--brand)/.8),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s,box-shadow .2s,filter .2s}
a.bg-primary:hover,button.bg-primary:hover,.join-submit:hover,.jr-write:hover,.srv-join:hover,.join-dlg-btn:hover{transform:translateY(-1px);box-shadow:var(--glow);filter:brightness(1.08)}
.jr-btn,.det-trailer,.cr-links a,.live-links a,.meet-jump a,.fchip,.chip,.roll-filters .chip{border-radius:var(--r-pill)!important}
.btn-ghost-hero{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;border-radius:var(--r-pill);border:1px solid hsl(var(--foreground)/.35);color:hsl(var(--foreground));font-size:.875rem;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;backdrop-filter:blur(6px);background:hsl(var(--background)/.25);transition:background .2s,border-color .2s}
.btn-ghost-hero:hover{background:hsl(var(--foreground)/.1);border-color:hsl(var(--foreground)/.7)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.5rem}
.hero-ctas>a{margin-top:0!important}

/* ---------- Hero ---------- */
#overview h1{text-shadow:0 6px 40px rgba(0,0,0,.6)}
#overview h1,.scope-line h2{background:linear-gradient(180deg,hsl(var(--gold)) 0%,hsl(40 38% 80%) 55%,hsl(40 30% 62%) 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#overview .absolute.inset-0 .bg-gradient-to-b{background:linear-gradient(180deg,hsl(var(--background)/.55) 0%,hsl(var(--background)/.25) 45%,hsl(var(--background)) 100%)!important}

/* ---------- Section headings: badge label + gradient title ---------- */
.scope-line>p:first-child{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .9rem;border-radius:var(--r-pill);background:hsl(var(--brand)/.12);border:1px solid hsl(var(--brand)/.3);color:hsl(var(--brand))!important;font-size:.66rem!important;letter-spacing:.24em!important;margin-bottom:1rem!important}
.scope-line::after{width:3rem!important;height:2px!important;border-radius:2px;background:linear-gradient(90deg,transparent,hsl(var(--gold)/.8),transparent)!important}
main section.py-24{padding-top:5rem;padding-bottom:5rem}
@media (min-width:1024px){main section.lg\:py-32{padding-top:6.5rem;padding-bottom:6.5rem}}

/* ---------- Cards everywhere ---------- */
main .bg-card.border,main .border.bg-card,.act-tile,.act-chart,.act-list,.srv,.explore-card,.social-card,.creator-card,.jr-card,.meet-card,
.medal-card,.soldier,.stats-panel,.leader,.join-step,.notif-card,.chan-list li,.ladder li,.tl-img,.empty-note,.join-dlg,.recip-box,.ev-card,.ev-day,.stats-table-wrap{
  border-radius:var(--r-lg)!important;border-color:hsl(var(--line))!important;
  background:linear-gradient(180deg,hsl(var(--surface-2)/.92),hsl(var(--surface-1)/.92))!important;
  box-shadow:inset 0 1px 0 hsl(var(--foreground)/.04),0 1px 2px rgba(0,0,0,.25)}
.chan-list li,.ladder li,.notif-card{border-radius:var(--r-md)!important}
main .bg-card.border,.act-tile,.srv,.explore-card,.social-card,.creator-card,.jr-card,.medal-card,.soldier,.leader,.meet-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
main .bg-card.border:hover,.explore-card:hover,.social-card:hover,.creator-card:hover,.jr-card:hover,.medal-card:hover,.soldier:hover,.srv:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:hsl(var(--brand)/.45)!important}
button.officer:hover{transform:none}
button.officer{border-radius:var(--r-md)!important}
#officer-panel,#officer-panel>div{border-radius:var(--r-lg)!important}
.srv.live{box-shadow:0 0 0 1px rgba(35,165,90,.5),0 12px 40px -16px rgba(35,165,90,.6)!important}
img.object-cover,.tl-img,.jr-thumb,.jr-hero{border-radius:var(--r-md)}
#gallery-track>button>div{border-radius:var(--r-lg)!important}
#gallery-track>button>div+div{border-radius:0 0 var(--r-lg) var(--r-lg)}
.lightbox img,.lightbox .lb-video,.lightbox .lb-yt{border-radius:var(--r-md);overflow:hidden}
.play-badge{backdrop-filter:blur(6px)}

/* Explore: colourful icon tiles, Enlist as a banner */
.explore-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:1.1rem!important}
.explore-card .ex-icon{border-radius:14px!important;border:0!important;background:linear-gradient(135deg,hsl(var(--brand)/.28),hsl(var(--brand)/.08));color:hsl(var(--brand))!important;width:48px!important;height:48px!important}
.explore-card:nth-child(3n+2) .ex-icon{background:linear-gradient(135deg,hsl(var(--gold)/.28),hsl(var(--gold)/.06));color:hsl(var(--gold))!important}
.explore-card:nth-child(3n) .ex-icon{background:linear-gradient(135deg,hsl(0 60% 55%/.25),hsl(0 60% 55%/.05));color:hsl(0 70% 70%)!important}
.explore-card.enlist{grid-column:1/-1;flex-direction:row!important;align-items:center;gap:1.25rem!important;padding:1.75rem 2rem!important;
  background:linear-gradient(120deg,hsl(var(--brand)/.35),hsl(var(--brand-deep)/.25) 50%,hsl(var(--gold)/.12))!important;border-color:hsl(var(--brand)/.5)!important}
.explore-card.enlist .ex-icon{color:#fff!important;flex-shrink:0}
.explore-card.enlist b{font-size:1.4rem}
.explore-card.enlist small{font-size:.95rem}

/* Stat tiles + fact boxes */
.act-tile b,.tile b{background:linear-gradient(180deg,hsl(var(--gold)),hsl(40 35% 70%));-webkit-background-clip:text;background-clip:text;color:transparent}
#regiment .border.bg-card{border-radius:var(--r-md)!important}

/* Chips / pills */
.pill,.flag{border-radius:var(--r-pill)}
.roll-search,.recip-search,#roll-search{border-radius:var(--r-pill)!important}

/* Banners */
.live-banner,.stream-banner{backdrop-filter:blur(12px)}
.stream-banner .sb-cta,.live-join{border-radius:var(--r-pill)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid hsl(var(--line));background:linear-gradient(180deg,transparent,hsl(var(--surface-1)/.7));padding:4rem 1.5rem 2rem}
.site-footer .f-inner{max-width:80rem;margin:0 auto;display:grid;gap:2.5rem;grid-template-columns:1.4fr repeat(3,1fr)}
.site-footer .f-brand{display:flex;flex-direction:column;gap:.9rem}
.site-footer .f-brand img{width:56px;height:56px;object-fit:contain}
.site-footer .f-brand b{font-family:var(--font-heading);letter-spacing:.15em;color:hsl(var(--foreground))}
.site-footer .f-brand p{font-size:.85rem;color:hsl(var(--muted-foreground));max-width:22rem;line-height:1.6}
.site-footer h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:hsl(var(--brand));margin-bottom:.9rem;font-family:var(--font-body)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-footer ul a{font-size:.88rem;color:hsl(var(--muted-foreground));text-decoration:none;transition:color .2s}
.site-footer ul a:hover{color:hsl(var(--foreground))}
.site-footer .f-bottom{max-width:80rem;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid hsl(var(--line)/.6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
.site-footer .f-bottom a{color:hsl(var(--muted-foreground))}
@media (max-width:900px){.site-footer .f-inner{grid-template-columns:1fr 1fr}.site-footer .f-brand{grid-column:1/-1}}

/* ---------- Motion: fade-up on scroll (respects reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  main .bg-card.border,.explore-card,.social-card,.creator-card,.jr-card,.medal-card,.soldier,.srv,a.bg-primary{transition:none!important}
  main .bg-card.border:hover,.explore-card:hover,.social-card:hover,.creator-card:hover,.jr-card:hover,.medal-card:hover,.soldier:hover,.srv:hover{transform:none}
}
.site-footer,.site-footer .f-inner,.site-footer .f-bottom{text-align:left}
.site-footer .f-brand{align-items:flex-start}

/* ==========================================================================
   Buttons v2: cut-corner "insignia" buttons with a light sweep
   ========================================================================== */
a.bg-primary,button.bg-primary,.join-submit,.jr-write,.srv-join,.join-dlg-btn,.live-join,
.btn-ghost-hero,.jr-btn,.det-trailer,.staff-btn{
  --cut:11px;
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:0!important;border:0!important;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  font-weight:600;letter-spacing:.2em;
  transition:transform .18s ease,filter .25s ease,background-position .5s ease!important;
}
/* filled (primary) */
a.bg-primary,button.bg-primary,.join-submit,.jr-write,.srv-join,.join-dlg-btn,.live-join{
  background:linear-gradient(135deg,hsl(208 70% 56%) 0%,hsl(212 60% 40%) 45%,hsl(215 55% 30%) 100%)!important;background-size:160% 160%!important;
  color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 1px hsl(var(--gold)/.45),inset 0 1px 0 rgba(255,255,255,.25)!important;
  filter:drop-shadow(0 8px 18px hsl(var(--brand)/.45));
}
.live-join{background:linear-gradient(135deg,#2fcf74,#1a8a4a)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)!important;filter:drop-shadow(0 6px 16px rgba(35,165,90,.45))}
/* outline (ghost) with a beveled gold→blue frame */
.btn-ghost-hero,.jr-btn,.det-trailer,.staff-btn,.srv.off .srv-join{
  background:linear-gradient(135deg,hsl(var(--gold)/.85),hsl(var(--brand)/.85))!important;
  color:hsl(var(--foreground))!important;
}
.btn-ghost-hero::before,.jr-btn::before,.det-trailer::before,.staff-btn::before,.srv.off .srv-join::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:linear-gradient(180deg,hsl(var(--surface-2)),hsl(var(--background)));
  clip-path:polygon(calc(var(--cut) - .5px) 0,100% 0,100% calc(100% - var(--cut) + .5px),calc(100% - var(--cut) + .5px) 100%,0 100%,0 calc(var(--cut) - .5px));
  transition:background .25s ease;
}
.btn-ghost-hero:hover::before,.jr-btn:hover::before,.det-trailer:hover::before,.staff-btn:hover::before{background:linear-gradient(180deg,hsl(var(--brand)/.35),hsl(var(--brand-deep)/.35))}
/* the light sweep */
a.bg-primary::after,button.bg-primary::after,.join-submit::after,.jr-write::after,.srv-join::after,.join-dlg-btn::after,.live-join::after,
.btn-ghost-hero::after,.jr-btn::after,.det-trailer::after,.staff-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);transition:left .7s ease;
}
a.bg-primary:hover::after,button.bg-primary:hover::after,.join-submit:hover::after,.jr-write:hover::after,.srv-join:hover::after,.join-dlg-btn:hover::after,.live-join:hover::after,
.btn-ghost-hero:hover::after,.jr-btn:hover::after,.det-trailer:hover::after,.staff-btn:hover::after{left:120%}
/* hover + press */
a.bg-primary:hover,button.bg-primary:hover,.join-submit:hover,.jr-write:hover,.srv-join:hover,.join-dlg-btn:hover,.live-join:hover{
  transform:translateY(-2px);background-position:100% 100%!important;filter:drop-shadow(0 12px 26px hsl(var(--brand)/.65)) brightness(1.06)}
.btn-ghost-hero:hover,.jr-btn:hover,.det-trailer:hover,.staff-btn:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 22px hsl(var(--gold)/.25))}
a.bg-primary:active,button.bg-primary:active,.join-submit:active,.jr-write:active,.srv-join:active,.join-dlg-btn:active,.live-join:active,
.btn-ghost-hero:active,.jr-btn:active,.det-trailer:active,.staff-btn:active{transform:translateY(0) scale(.97);transition-duration:.06s!important}
/* keyboard focus stays visible despite the clipped shape */
a.bg-primary:focus-visible,button.bg-primary:focus-visible,.join-submit:focus-visible,.jr-write:focus-visible,.srv-join:focus-visible,.join-dlg-btn:focus-visible,
.btn-ghost-hero:focus-visible,.jr-btn:focus-visible,.det-trailer:focus-visible,.staff-btn:focus-visible,.live-join:focus-visible{outline:none;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px hsl(var(--gold)))}
/* arrows that nudge forward */
.cta-arrow{display:inline-block;margin-left:.6em;transition:transform .25s ease}
a:hover>.cta-arrow,button:hover>.cta-arrow{transform:translateX(4px)}
/* sizes */
.hero-ctas>a{--cut:14px;padding:1.05rem 2.3rem!important;font-size:.85rem!important}
header a.bg-primary,.staff-btn{--cut:8px}
.det-trailer,.jr-btn{--cut:8px}
.det-trailer{color:hsl(var(--foreground))!important}
/* the old pulsing glow on the hero button clashes with the new shape */
.glow-pulse{animation:none!important}
@media (prefers-reduced-motion:reduce){
  a.bg-primary::after,button.bg-primary::after,.join-submit::after,.jr-write::after,.srv-join::after,.join-dlg-btn::after,.live-join::after,
  .btn-ghost-hero::after,.jr-btn::after,.det-trailer::after,.staff-btn::after{display:none}
}

/* ==========================================================================
   Cards: soft light that follows the mouse
   ========================================================================== */
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),hsl(var(--brand)/.16),transparent 45%)}
.spot:hover::before{opacity:1}
.spot::before{mix-blend-mode:screen}
@media (max-width:640px){#overview [data-scroll="regiment"]{display:none}.hero-ctas{flex-direction:column;align-items:center}}
#command-chain p.mt-6:has(> a.jr-write){text-align:center}

/* ==========================================================================
   Readability: same fonts + colours, lighter shades, bigger small text
   (contrast on the page background: blue labels 2.7 -> 7.1, grey text 6.5 -> 8.9)
   ========================================================================== */
:root{
  --muted-foreground:40 22% 67%;
  --foreground:40 40% 80%;
  --label:208 70% 64%;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-size:1rem;line-height:1.65}
.text-primary{color:hsl(var(--label))!important}
.scope-line>p:first-child{color:hsl(var(--label))!important}
/* small text: a little bigger, less stretched */
.text-xs{font-size:.8125rem!important;line-height:1.55!important}
.text-sm{font-size:.9375rem!important;line-height:1.6!important}
[class*="text-[10px]"]{font-size:.72rem!important}
[class*="tracking-[0.4em]"],[class*="tracking-[0.3em]"]{letter-spacing:.2em!important}
[class*="tracking-[0.2em]"]{letter-spacing:.14em!important}
[class*="tracking-[0.15em]"]{letter-spacing:.1em!important}
/* body copy */
main p.text-muted-foreground,main .text-base{font-size:1.02rem;line-height:1.75}
main p.max-w-2xl{font-size:1.06rem}
.act-list li,.jr-excerpt,.cr-bio,.meet-text,.tl-text,.sc-text span,.explore-card small{font-size:.95rem!important;line-height:1.7!important}
.explore-card small,.sc-text span,.jr-excerpt,.cr-bio{color:hsl(var(--muted-foreground))!important}
.jr-text p{font-size:1.1rem;line-height:1.9}
/* headings: slightly brighter gold so they read at a glance */
#overview h1,.scope-line h2{background:linear-gradient(180deg,hsl(42 75% 76%) 0%,hsl(40 45% 84%) 55%,hsl(40 35% 70%) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
h3.font-heading,.explore-card b,.sc-text b{letter-spacing:.02em!important}
/* hero: text sits on a photo, so give it a soft shadow + slightly darker middle */
#overview .relative.z-10{text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9)}
#overview .relative.z-10 p{color:hsl(40 30% 86%)!important}
#overview .relative.z-10::before{content:"";position:absolute;inset:20% 10%;z-index:-1;background:radial-gradient(closest-side,rgba(8,10,14,.55),transparent);pointer-events:none}
/* text over gallery photos */
#gallery-track p{text-shadow:0 1px 6px rgba(0,0,0,.9)}
/* nav: a touch bigger and brighter */
header .nav-link{font-size:.78rem!important;letter-spacing:.12em!important;color:hsl(var(--muted-foreground))}
header .nav-link:hover{color:hsl(var(--foreground))}
/* labels inside cards (e.g. "COMMANDER", "KILLS THIS MONTH") */
.act-tile span,.meet-facts dt,.mfacts dt,.tl-era,.jr-battle,.leader-label,.soldier-rank-title,.recip-kicker{color:hsl(var(--label))!important;letter-spacing:.14em!important;font-size:.72rem!important}
.site-footer ul a{font-size:.95rem}

/* ==========================================================================
   Live servers: roomier section + bigger, clearer cards
   ========================================================================== */
#servers{padding-top:6rem!important;padding-bottom:6rem!important}
#servers .servers-grid{margin-top:3.5rem;gap:1.5rem}
#servers .servers-grid .sv-card{flex:0 1 560px}
.sv-card{display:flex;flex-direction:column;gap:1.1rem;padding:2rem 2.2rem;border-radius:22px;border:1px solid hsl(var(--line));
  background:linear-gradient(180deg,hsl(var(--surface-2)/.95),hsl(var(--surface-1)/.95));box-shadow:0 24px 60px -30px rgba(0,0,0,.9);text-align:left}
.sv-card.live{border-color:rgba(35,165,90,.55);box-shadow:0 0 0 1px rgba(35,165,90,.2),0 24px 70px -28px rgba(35,165,90,.45)}
.sv-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sv-status{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sv-status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.sv-status.live{color:#6fe0a0;background:rgba(35,165,90,.14);border:1px solid rgba(35,165,90,.45)}
.sv-status.live i{box-shadow:0 0 0 0 rgba(111,224,160,.7);animation:svpulse 1.8s infinite}
.sv-status.on{color:#8fc5f0;background:hsl(var(--brand)/.14);border:1px solid hsl(var(--brand)/.4)}
.sv-status.off{color:hsl(var(--muted-foreground));background:hsl(var(--foreground)/.05);border:1px solid hsl(var(--line))}
@keyframes svpulse{0%{box-shadow:0 0 0 0 rgba(111,224,160,.6)}70%{box-shadow:0 0 0 8px rgba(111,224,160,0)}100%{box-shadow:0 0 0 0 rgba(111,224,160,0)}}
.sv-kind{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--label))}
.sv-name{font-family:var(--font-heading);font-size:1.7rem;line-height:1.2;margin:0;color:hsl(var(--foreground))}
.sv-sub{margin:-.6rem 0 0;font-size:.9rem;color:hsl(var(--muted-foreground))}
.sv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.sv-stats>div{padding:.85rem 1rem;border-radius:14px;background:hsl(var(--background)/.55);border:1px solid hsl(var(--line)/.8);min-width:0}
.sv-stats span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--label));margin-bottom:.3rem}
.sv-stats b{display:block;font-size:1.1rem;font-weight:600;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-stats b small{font-size:.85rem;font-weight:400;color:hsl(var(--muted-foreground))}
.sv-bar{height:10px;border-radius:999px;background:hsl(var(--foreground)/.08);overflow:hidden}
.sv-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,hsl(var(--brand)),hsl(190 70% 55%))}
.sv-card.live .sv-bar i{background:linear-gradient(90deg,#1f9d55,#6fe0a0)}
.sv-off-note{margin:0;font-size:.95rem;line-height:1.65;color:hsl(var(--muted-foreground))}
.sv-actions{display:flex;gap:.75rem;margin-top:.3rem}
.sv-actions .srv-join{flex:1;margin:0;padding:1rem 1.5rem!important;font-size:.8rem!important;--cut:12px}
.sv-copy{font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:0 1.2rem;border-radius:12px;cursor:pointer;
  background:hsl(var(--foreground)/.05);border:1px solid hsl(var(--line));color:hsl(var(--foreground));transition:background .2s,border-color .2s}
.sv-copy:hover{background:hsl(var(--brand)/.2);border-color:hsl(var(--brand)/.5)}
@media (max-width:560px){.sv-card{padding:1.5rem}.sv-stats{grid-template-columns:1fr 1fr}.sv-stats>div:last-child{grid-column:1/-1}.sv-actions{flex-direction:column}.sv-copy{padding:.9rem}.sv-name{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.sv-status.live i{animation:none}}


/* ==========================================================================
   No sideways scrollbars: hidden bars + arrow buttons
   ========================================================================== */
html,body{overflow-x:clip}
.hscroll,.rs-wrap{scrollbar-width:none;-ms-overflow-style:none}
.hscroll::-webkit-scrollbar,.rs-wrap::-webkit-scrollbar{display:none}
#gallery-track{padding-bottom:.5rem!important}
[data-gallery]{border-radius:12px!important;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:hsl(var(--surface-2))!important;border:1px solid hsl(var(--line))!important;transition:background .2s,border-color .2s,opacity .2s}
[data-gallery]:hover:not(:disabled){background:hsl(var(--brand)/.3)!important;border-color:hsl(var(--brand)/.6)!important}
[data-gallery]:disabled{opacity:.3;cursor:default}
.hs-nav{display:flex;justify-content:flex-end;gap:.5rem;margin:0 0 .6rem}
.hs-nav[hidden]{display:none}
.hs-btn{width:40px;height:40px;border-radius:12px;font-size:1.4rem;line-height:1;cursor:pointer;color:hsl(var(--foreground));background:hsl(var(--surface-2));border:1px solid hsl(var(--line));transition:background .2s,border-color .2s,opacity .2s}
.hs-btn:hover:not(:disabled){background:hsl(var(--brand)/.3);border-color:hsl(var(--brand)/.6)}
.hs-btn:disabled{opacity:.3;cursor:default}
.stats-table-wrap.hscroll{overflow-x:auto}

/* server card: let long map names wrap instead of "PalisadeA…" */
.sv-stats{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1fr)}
.sv-stats b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:1.05rem;line-height:1.3}
.sv-stats>div:last-child b{white-space:nowrap;font-size:.98rem}

/* ---------- Line Stats (kill reports) ---------- */
.ls-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:2.5rem 0 1.75rem}
.ls-tab{font:inherit;display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;border-radius:999px;cursor:pointer;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));background:hsl(var(--surface-2)/.8);border:1px solid hsl(var(--line));transition:background .2s,color .2s,border-color .2s}
.ls-tab span{font-size:.75rem;padding:.15rem .55rem;border-radius:999px;background:hsl(var(--foreground)/.08);color:hsl(var(--foreground))}
.ls-tab:hover{color:hsl(var(--foreground))}
.ls-tab.on{color:#fff;background:linear-gradient(135deg,hsl(var(--brand)/.5),hsl(var(--brand-deep)/.5));border-color:hsl(var(--brand)/.6)}
.ls-tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ls-cols{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1rem}
.ls-top,.ls-recent{list-style:none;margin:0;padding:0}
.ls-top li,.ls-recent li{display:flex;align-items:center;gap:.8rem;padding:.65rem 0;border-bottom:1px solid hsl(var(--line)/.6)}
.ls-top li:last-child,.ls-recent li:last-child{border-bottom:0}
.ls-pos{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.8rem;font-weight:700;background:hsl(var(--foreground)/.08);color:hsl(var(--foreground))}
.ls-top li:first-child .ls-pos{background:linear-gradient(135deg,hsl(var(--gold)),hsl(40 50% 45%));color:#1a1407}
.ls-top .pfp-wrap img,.ls-recent .pfp-wrap img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.ls-top .pfp-wrap,.ls-recent .pfp-wrap{width:34px;height:34px;border-radius:50%;background:hsl(var(--foreground)/.06);flex-shrink:0}
.ls-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ls-who b{color:hsl(var(--foreground));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-who small{color:hsl(var(--muted-foreground));font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-k{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.ls-k b{font-size:1.15rem;color:hsl(var(--gold))}
.ls-k small{font-size:.72rem;color:hsl(var(--muted-foreground))}

.site-footer .f-bottom{align-items:center}
.f-motto{font-family:var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--gold)/.8)}
.f-credit a{display:inline-flex;align-items:center;gap:.35rem;margin-left:.25rem;padding:.2rem .65rem;border-radius:999px;color:hsl(var(--foreground))!important;text-decoration:none;
  background:hsl(235 70% 65%/.14);border:1px solid hsl(235 70% 65%/.4);transition:background .2s,border-color .2s}
.f-credit a:hover{background:hsl(235 70% 65%/.3);border-color:hsl(235 70% 70%/.7)}
.join-footer .f-credit{display:inline-block;margin-top:.5rem}

/* footer: website creator */
.f-creator{display:inline-flex;align-items:center;gap:.7rem;text-align:left}
.f-cr-pfp{position:relative;width:40px;height:40px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--surface-2));border:2px solid hsl(var(--gold)/.55);font-family:var(--font-heading);color:hsl(var(--foreground))}
.f-cr-pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-cr-txt{display:flex;flex-direction:column;line-height:1.3}
.f-cr-txt small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--label))}
.f-cr-txt small:last-child{letter-spacing:.06em;text-transform:none;color:hsl(var(--muted-foreground));font-size:.75rem}
.f-cr-txt b{display:inline-flex;align-items:center;gap:.35rem;font-size:.95rem;color:hsl(var(--foreground));font-weight:600}
.f-cr-rank{width:18px;height:18px;object-fit:contain}
.join-footer .f-creator{margin-top:.9rem}

/* ==========================================================================
   Spacing + fill the screen
   ========================================================================== */
/* every section gets the same breathing room (some sizes were missing from the base stylesheet) */
main>section.px-6:not(#overview),main>article.px-6{padding-top:clamp(4.5rem,7vw,7rem)!important;padding-bottom:clamp(4.5rem,7vw,7rem)!important;padding-left:clamp(1.25rem,4vw,3rem)!important;padding-right:clamp(1.25rem,4vw,3rem)!important}
main>.page-top+section.px-6:not(#overview),main>.page-top+article.px-6:not(#overview){padding-top:clamp(2.75rem,4.5vw,4rem)!important}
.page-top{height:84px}
body.has-live .page-top{height:130px}
body[data-stream] .page-top{height:124px}
/* footer always at the bottom of the screen, no empty band underneath */
body>.min-h-screen{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body>.min-h-screen>main{flex:1 0 auto;display:flex;flex-direction:column}
body>.min-h-screen>main>section:last-of-type,body>.min-h-screen>main>article:last-of-type{flex:1 0 auto}
.site-footer{flex-shrink:0}
/* wider content on big screens */
@media (min-width:1600px){
  main .max-w-5xl{max-width:72rem!important} main .max-w-6xl{max-width:80rem!important} main .max-w-7xl{max-width:88rem!important}
  main .max-w-4xl{max-width:60rem!important} main .max-w-3xl{max-width:52rem!important}
  .site-footer .f-inner,.site-footer .f-bottom{max-width:88rem}
}
/* headings: a bit more space under the intro before content */
main section .scope-line+p,main section .scope-line~p.mt-6{margin-top:1.4rem}
.live-wrap,.explore-grid,.social-grid,.creator-grid,.jr-list,.meet-list,.timeline{margin-top:3rem!important}
/* footer bottom row: tidy three-column line on desktop */
@media (min-width:900px){
  .site-footer .f-bottom{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem}
  .site-footer .f-bottom>span:first-child{justify-self:start}
  .site-footer .f-bottom .f-motto{justify-self:center}
  .site-footer .f-bottom .f-creator{justify-self:end}
}

/* Live page: a proper "offline" screen in the player's place */
.live-offline{margin-top:3rem;aspect-ratio:16/9;max-height:70vh;width:100%;border-radius:22px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid hsl(var(--line));background:radial-gradient(800px 400px at 50% 30%,hsl(var(--brand)/.18),transparent 70%),linear-gradient(180deg,hsl(var(--surface-2)),hsl(var(--surface-1)));box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.live-offline::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px);pointer-events:none}
.lo-inner{position:relative;max-width:36rem;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.lo-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));background:hsl(var(--foreground)/.05);border:1px solid hsl(var(--line))}
.lo-kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--label));margin:0}
.lo-inner h3{font-size:clamp(1.6rem,3vw,2.3rem);color:hsl(var(--foreground));margin:0}
.lo-text{color:hsl(var(--muted-foreground));font-size:1.02rem;line-height:1.7;margin:0}
.lo-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:.8rem}
.lo-actions a{display:inline-flex;align-items:center;padding:.95rem 1.8rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;text-decoration:none}
@media (max-width:640px){.live-offline{aspect-ratio:auto;min-height:420px}}

/* few cards: keep them centred instead of stuck to the left */
.social-grid,.creator-grid{grid-template-columns:repeat(auto-fit,minmax(300px,380px))!important;justify-content:center}
/* officers without a picture: initial in a ring */
.meet-pfp{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,hsl(var(--brand)/.35),hsl(var(--surface-1)));border:2px solid hsl(var(--gold)/.5)}
.meet-pfp .meet-init{font-family:var(--font-heading);font-size:3.2rem;color:hsl(var(--gold))}
.meet-pfp img{position:absolute;inset:0}
.meet-card{align-items:start}
.meet-side{padding-top:.25rem}

/* join page: readable step labels + rounded step links */
.step-no{color:hsl(var(--label))!important;letter-spacing:.2em!important}
.join-steps-nav a{border-radius:999px!important;border-color:hsl(var(--line))!important;background:hsl(var(--surface-2)/.6);transition:background .2s,border-color .2s}
.join-steps-nav a:hover{background:hsl(var(--brand)/.2);border-color:hsl(var(--brand)/.5)!important}
.join-hero .text-primary{color:hsl(var(--label))!important}

/* medal artwork: show the whole medal, ribbon included, not cropped into a circle */
.medal-card .flex-shrink-0:has(> .medal-img){width:5.5rem;height:7.25rem;border:0;border-radius:0;background:none;overflow:visible}
.medal-card .medal-img{object-fit:contain;filter:drop-shadow(0 6px 10px rgb(0 0 0/.45));transition:transform .25s ease}
.medal-card:hover .medal-img,.medal-card:focus .medal-img{transform:translateY(-3px) scale(1.04)}
.recip-icon:has(img){width:64px;height:88px;border-radius:0;background:none;border:0;overflow:visible}
.recip-icon img{object-fit:contain}

/* war journal: link to the Discord copy */
.jr-source{margin-top:2rem;font-size:.9rem}.jr-source a{color:hsl(var(--label));text-decoration:none;border-bottom:1px solid hsl(var(--label)/.35)}.jr-source a:hover{border-color:hsl(var(--label))}

.site-footer .f-about{font-size:.85rem;line-height:1.55;color:hsl(var(--muted-foreground))}.site-footer .f-about b{font-family:inherit;letter-spacing:0;color:hsl(var(--foreground));font-weight:600}