/* ============================================================
   BLOOD CAFÉ — "REAPER" theme  (sniper / grim-reaper / Punisher)
   Built 2026-06-01. Hard art direction: black + bone + blood-red,
   gun-grit grain, sniper scope reticle, skull watermark, stencil type.
   Layered + reversible (remove the <link> to revert).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Black+Ops+One&display=swap');

:root{
  --bg:#060607; --bg2:#0b0b0d; --panel:#0d0d10; --panel2:#121216;
  --bone:#e9e6dd; --ash:#8d877c; --ash-dim:#5b564e;
  --blood:#b00710; --blood-hi:#ff2530; --blood-glow:rgba(190,12,20,.55);
  --steel:#23262c;
  --neon-blue:#ff2530; --neon-cyan:#ff2530;     /* hijack old cyan -> blood */
  --neon-purple:#ff2530; --cyber-purple:#b00710; --neon-magenta:#ff2530; /* kill purple */
  --gradient-primary:linear-gradient(135deg,#ff2530 0%,#b00710 55%,#7a050c 100%)!important;
  --gradient-secondary:linear-gradient(135deg,#ff2530,#b00710)!important;
  --text-primary:#e9e6dd; --text-secondary:#b9b3a8; --text-muted:#7d776c;
  --border:rgba(233,230,221,.10); --border-bright:rgba(255,37,48,.45);
}

/* ---------- base + grit atmosphere ---------- */
body{ background:var(--bg)!important; color:var(--bone)!important; position:relative; }
body::before{ /* film grain + blood vignette + faint scope behind hero */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(60% 42% at 50% 16%, rgba(176,7,16,.16), transparent 70%),
    radial-gradient(130% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.72) 100%);
}
body:has(.reaper-hero)::after{ /* sniper scope reticle — LANDING ONLY (not every page) */
  content:"";position:fixed;top:-160px;left:50%;transform:translateX(-50%);
  width:760px;height:760px;pointer-events:none;z-index:-1;opacity:.14;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ff2530' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='150'/%3E%3Ccircle cx='200' cy='200' r='96'/%3E%3Ccircle cx='200' cy='200' r='3' fill='%23ff2530'/%3E%3Cline x1='200' y1='20' x2='200' y2='150'/%3E%3Cline x1='200' y1='250' x2='200' y2='380'/%3E%3Cline x1='20' y1='200' x2='150' y2='200'/%3E%3Cline x1='250' y1='200' x2='380' y2='200'/%3E%3Cg stroke-width='2'%3E%3Cline x1='200' y1='112' x2='200' y2='128'/%3E%3Cline x1='200' y1='272' x2='200' y2='288'/%3E%3Cline x1='112' y1='200' x2='128' y2='200'/%3E%3Cline x1='272' y1='200' x2='288' y2='200'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
/* atmosphere lives at z-index:-1 (behind content) so we DON'T force position on
   body children — forcing it broke fixed/sticky headers & blocked clicks. */

/* ---------- typography: military stencil ---------- */
h1,h2,.section-title,.hero-title,.logo-text{
  font-family:'Black Ops One','Oswald',var(--font,sans-serif)!important;
  letter-spacing:.04em;color:var(--bone)!important;text-transform:uppercase;
}
h1,.hero-title{ text-shadow:0 0 24px var(--blood-glow), 0 2px 0 #000; }
h3,h4,.stat-label,.qa-text{ font-family:'Oswald',sans-serif!important; letter-spacing:.12em; }

/* ---------- panels: gun-metal slab, bone hairline, blood top-cut ---------- */
.panel,.stat-card,.quick-action-btn,.bs-cell,.sp-bi{
  position:relative;border-radius:2px!important;
  background:linear-gradient(180deg, rgba(18,18,22,.96), rgba(10,10,13,.98))!important;
  border:1px solid var(--border)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.7), inset 0 1px 0 rgba(233,230,221,.04);
}
.panel::before,.stat-card::before{ /* blood top edge */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blood-hi),transparent);opacity:.8;
}
.panel:hover,.stat-card:hover,.quick-action-btn:hover{
  border-color:var(--border-bright)!important;
  box-shadow:0 0 0 1px rgba(255,37,48,.25),0 14px 38px rgba(0,0,0,.75),0 0 30px var(--blood-glow)!important;
}

/* ---------- section titles: stenciled with crosshair tick ---------- */
.section-title{display:flex;align-items:center;gap:.65rem;font-size:1.05rem;}
.section-title::before{
  content:"✛";color:var(--blood-hi);font-size:1.1em;
  text-shadow:0 0 12px var(--blood-glow);transform:translateY(-1px);
}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-bright),transparent);}

/* ---------- stat readouts ---------- */
.stat-label{color:var(--ash)!important;text-transform:uppercase;font-size:.64rem;}
.stat-value{color:var(--bone)!important;text-shadow:0 0 18px var(--blood-glow);font-variant-numeric:tabular-nums;}
.stat-icon{filter:drop-shadow(0 0 8px var(--blood-glow));}

/* ---------- buttons: blood, sharp, lethal ---------- */
.btn,.btn-primary,button.btn,.quick-action-btn{
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;border-radius:2px;
}
.btn-primary,.btn.btn-primary{
  background:linear-gradient(135deg,var(--blood),#7a050c)!important;color:var(--bone)!important;
  border:1px solid rgba(255,37,48,.5)!important;box-shadow:0 0 20px var(--blood-glow);
}
.btn-primary:hover{box-shadow:0 0 34px var(--blood-hi),0 0 14px var(--blood-glow);transform:translateY(-1px);}
.quick-action-btn{overflow:hidden;}
.quick-action-btn::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,37,48,.18) 50%,transparent);transition:transform .5s ease;
}
.quick-action-btn:hover::after{transform:translateX(120%);}
.qa-icon{filter:drop-shadow(0 0 7px var(--blood-glow));}

/* ---------- inputs: terminal ---------- */
.input,input[type=text],input[type=password]{
  background:#08080a!important;border:1px solid var(--border)!important;color:var(--bone)!important;
}
.input:focus,input:focus{border-color:var(--blood-hi)!important;box-shadow:0 0 0 1px var(--blood-hi),0 0 18px var(--blood-glow)!important;outline:none!important;}

/* ---------- chips/badges: dog-tag stencil ---------- */
.legend-chip,.tag-badge,.pill,.sp-role,.sp-rarity{
  text-transform:uppercase;letter-spacing:.06em;border-radius:2px;
  border:1px solid var(--border)!important;background:rgba(255,37,48,.06)!important;color:var(--bone)!important;
}

/* hijack any leftover cyan accents toward blood */
[style*="#00d9ff"],[style*="#00ffff"]{color:var(--blood-hi)!important;}
a{color:var(--blood-hi);}
::selection{background:var(--blood);color:#fff;}

/* HERO v5 — dedicated splash element (.reaper-hero) injected ABOVE the configurator,
   fully self-contained so it doesn't fight the existing #heroSection collapse/CSS.
   display:grid here is SAFE — it only centers this element's own h1 (no page content). */
.reaper-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(360px,54vh,560px); margin:0 0 1.4rem; border:1px solid var(--border); border-radius:3px;
  display:grid; place-items:end center; text-align:center; padding:2rem 1.5rem 3.2rem;
  background:
    linear-gradient(180deg, rgba(6,6,7,.30) 0%, rgba(6,6,7,0) 26%, rgba(6,6,7,.08) 50%, rgba(6,6,7,.92) 100%),
    url('/img/gen-hero2.jpg') center 40% / cover no-repeat;
}
.reaper-hero::after{ /* scanline + scope vignette over the painting */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.10) 2px 3px),
    radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(6,6,7,.55) 100%);
}
.reaper-hero > .rh-inner{ position:relative; z-index:2; }
.reaper-hero h1{
  font-family:'Black Ops One','Oswald',sans-serif; font-weight:400; margin:0; color:var(--bone);
  font-size:clamp(3rem,9vw,7rem); line-height:.86; letter-spacing:.03em; text-transform:uppercase;
  text-shadow:0 3px 0 #000, 0 0 38px rgba(0,0,0,.92), 0 0 54px var(--blood-glow);
}
.reaper-hero .rh-tag{
  margin-top:.7rem; font-family:'Oswald',sans-serif; font-weight:700; color:var(--blood-hi);
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  font-size:clamp(.72rem,1.7vw,1.05rem); text-shadow:0 0 18px var(--blood-glow), 0 1px 4px #000;
}
.reaper-hero .rh-sub{ margin-top:.5rem; color:var(--ash); letter-spacing:.06em; font-size:.9rem; text-shadow:0 1px 6px #000; }
@media (prefers-reduced-motion:no-preference){
  .reaper-hero h1{ animation:rhIn .7s ease both; }
  @keyframes rhIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
}

/* Icon attribution (CC BY 3.0): reaper-emblem.svg + favicons are derived from
   skull & crosshair icons by Lorc & Delapouite, https://game-icons.net
   Kept in source + /humans.txt per site-owner request — no visible footer credit. */

/* ---- discreet unofficial-fan-site disclaimer (replaces the old icon credit) ---- */
.reaper-disclaimer{
  text-align:center; padding:16px 14px 26px; margin-top:2.2rem;
  font-family:'Oswald',sans-serif; font-size:.6rem; line-height:1.7;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash-dim);
  border-top:1px solid var(--border); position:relative; z-index:1; opacity:.7;
}

/* ---- top nav = HUD command bar + in-page tabs tactical ---- */
.nav{ background:linear-gradient(180deg,rgba(11,11,14,.97),rgba(6,6,7,.985))!important;
  border-bottom:1px solid rgba(255,37,48,.28)!important; box-shadow:0 2px 22px rgba(0,0,0,.6)!important; backdrop-filter:blur(6px); }
.brand,.bloodcafe-logo{ letter-spacing:.08em!important; filter:drop-shadow(0 0 10px rgba(190,12,20,.4)); }
.tab{ text-transform:uppercase!important; letter-spacing:.1em!important; font-family:'Oswald',sans-serif!important; font-weight:600!important; position:relative; transition:color .15s ease; }
.tab:hover{ color:var(--blood-hi)!important; }
.tab.active{ color:var(--blood-hi)!important; }
.tab.active::after{ content:""; position:absolute; left:10%; right:10%; bottom:-2px; height:2px; background:var(--blood-hi); box-shadow:0 0 10px var(--blood-glow); }

/* ============================================================
   POLISH PASS (CSS-only)
   ============================================================ */
/* blood scrollbar (site-wide) */
html{ scrollbar-width:thin; scrollbar-color:#8a0a10 #0b0b0d; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#0a0a0d; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#b00710,#6a040a); border:2px solid #0a0a0d; }
::-webkit-scrollbar-thumb:hover{ background:var(--blood-hi); }
/* accessible blood focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,.tab:focus-visible,.character-item:focus-visible{
  outline:2px solid var(--blood-hi)!important; outline-offset:2px!important; }
/* stat-card HUD corner tick */
.stat-card::after{ content:""; position:absolute; bottom:6px; right:6px; width:9px; height:9px;
  border-right:1px solid var(--blood-hi); border-bottom:1px solid var(--blood-hi); opacity:.45; }
/* quick-action hover lift */
.quick-action-btn{ transition:transform .15s ease, border-color .15s ease; }
.quick-action-btn:hover{ transform:translateY(-2px); }
/* character buttons = dog-tags */
.character-item{ border:1px solid var(--border)!important; border-radius:2px!important; transition:all .15s ease; position:relative; }
.character-item:hover{ border-color:var(--border-bright)!important; transform:translateY(-1px); }
.character-item.active,.character-item.selected{ border-color:var(--blood-hi)!important;
  box-shadow:0 0 18px var(--blood-glow), inset 0 0 0 1px rgba(255,37,48,.3)!important; }
.character-name{ text-transform:uppercase!important; letter-spacing:.08em!important; font-family:'Oswald',sans-serif!important; }
/* hero scope-sweep line */
.reaper-hero::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--blood-hi),transparent); opacity:.55; animation:rhScan 6s linear infinite; }
@keyframes rhScan{ 0%{transform:translateY(0)} 100%{transform:translateY(540px)} }
@media (prefers-reduced-motion:reduce){ .reaper-hero::before{animation:none;opacity:0} }

/* ============================================================
   SQUAD LOGIN (squad-login.html) — cinematic + animated
   ============================================================ */
.login-bg{
  position:fixed!important; inset:0!important; z-index:0!important;
  background:url('/img/gen-gate.jpg') center 30%/cover no-repeat!important;
  animation:loginZoom 26s ease-in-out infinite alternate;
}
@keyframes loginZoom{ from{transform:scale(1.06)} to{transform:scale(1.2) translateY(-2%)} }
.login-bg::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px),
    linear-gradient(180deg, rgba(6,6,7,.7), rgba(6,6,7,.86)),
    radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(6,6,7,.85) 100%);
  animation:loginFlicker 7s steps(60) infinite; }
@keyframes loginFlicker{0%,96%{opacity:1}97%{opacity:.9}98%{opacity:1}}
.login-card{
  position:relative!important; z-index:2!important; overflow:hidden;
  background:linear-gradient(180deg,rgba(13,13,16,.96),rgba(8,8,10,.985))!important;
  border:1px solid rgba(255,37,48,.4)!important; border-radius:3px!important;
  box-shadow:0 0 0 1px rgba(255,37,48,.12),0 40px 100px rgba(0,0,0,.85),0 0 60px rgba(190,12,20,.3)!important;
  animation:cardIn .7s cubic-bezier(.2,.7,.2,1) both, cardPulse 4.5s ease-in-out 1s infinite;
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cardPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,37,48,.12),0 40px 100px rgba(0,0,0,.85),0 0 50px rgba(190,12,20,.25)}50%{box-shadow:0 0 0 1px rgba(255,37,48,.25),0 40px 100px rgba(0,0,0,.85),0 0 80px rgba(190,12,20,.45)}}
.login-card::before{ /* scope-sweep line down the card */
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:3;
  background:linear-gradient(90deg,transparent,#ff2530,transparent);
  animation:loginSweep 4.5s linear infinite; }
@keyframes loginSweep{0%{transform:translateY(0);opacity:0}8%{opacity:.7}92%{opacity:.7}100%{transform:translateY(440px);opacity:0}}
.login-logo{ filter:drop-shadow(0 0 10px rgba(255,37,48,.55)); animation:emblemPulse 3.4s ease-in-out infinite; }
@keyframes emblemPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(255,37,48,.45))}50%{filter:drop-shadow(0 0 18px rgba(255,37,48,.8))}}
.login-title{ font-family:'Black Ops One',Oswald,sans-serif!important; letter-spacing:.06em!important; text-transform:uppercase!important; color:var(--bone)!important; text-shadow:0 2px 0 #000,0 0 26px rgba(190,12,20,.7)!important; }
.login-subtitle{ color:#ff2530!important; letter-spacing:.3em!important; text-transform:uppercase!important; font-size:.7rem!important; font-weight:700!important; }
.login-card input{ background:#08080a!important; border:1px solid rgba(255,255,255,.1)!important; color:var(--bone)!important; letter-spacing:.08em!important; border-radius:2px!important; }
.login-card input:focus{ border-color:#ff2530!important; box-shadow:0 0 0 1px #ff2530,0 0 18px rgba(190,12,20,.4)!important; outline:none!important; }
.submit-btn{ position:relative; overflow:hidden; background:linear-gradient(135deg,#b00710,#7a050c)!important; color:var(--bone)!important; border:1px solid rgba(255,37,48,.55)!important; border-radius:2px!important; text-transform:uppercase!important; letter-spacing:.2em!important; font-weight:700!important; box-shadow:0 0 22px rgba(190,12,20,.4)!important; animation:btnPulse 3s ease-in-out infinite; }
@keyframes btnPulse{0%,100%{box-shadow:0 0 18px rgba(190,12,20,.35)}50%{box-shadow:0 0 32px rgba(255,37,48,.6)}}
.submit-btn::after{ content:""; position:absolute; inset:0; transform:translateX(-130%); background:linear-gradient(100deg,transparent,rgba(255,255,255,.18) 50%,transparent); animation:btnShine 3.6s ease-in-out infinite; }
@keyframes btnShine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){ .login-bg,.login-card,.login-card::before,.login-logo,.submit-btn,.submit-btn::after{animation:none!important} }

/* ============================================================
   MOBILE polish + animation  (+ height-adaptive hero sweep)
   ============================================================ */
/* make the hero scope-sweep adapt to any hero height (mobile included) */
.reaper-hero::before{ animation:rhScan2 6s linear infinite!important; }
@keyframes rhScan2{ 0%{top:0;opacity:0} 6%{opacity:.55} 94%{opacity:.55} 100%{top:99%;opacity:0} }

@keyframes popIn{ from{opacity:0;transform:translateY(10px) scale(.96)} to{opacity:1;transform:none} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

@media (max-width:768px){
  /* hero: punchier + cleaner on portrait */
  .reaper-hero{ min-height:46vh!important; padding:1.4rem 1rem 2.2rem!important; background-position:center 36%!important; }
  .reaper-hero h1{ font-size:clamp(2.7rem,13vw,4.2rem)!important; line-height:.88!important; }
  .reaper-hero .rh-tag{ letter-spacing:.26em!important; text-indent:.26em!important; font-size:.6rem!important; }
  .reaper-hero .rh-sub{ font-size:.78rem!important; }
  .reaper-hero .rh-inner{ animation:fadeUp .7s ease both; }
  /* character buttons: cleaner grid + staggered pop-in + tap feedback */
  .grid-characters{ gap:8px!important; }
  .character-item{ animation:popIn .5s ease both; }
  .character-item:nth-child(1){animation-delay:.03s}.character-item:nth-child(2){animation-delay:.06s}
  .character-item:nth-child(3){animation-delay:.09s}.character-item:nth-child(4){animation-delay:.12s}
  .character-item:nth-child(5){animation-delay:.15s}.character-item:nth-child(6){animation-delay:.18s}
  .character-item:nth-child(7){animation-delay:.21s}.character-item:nth-child(8){animation-delay:.24s}
  .character-item:nth-child(9){animation-delay:.27s}
  .character-item:active,.quick-action-btn:active,.btn:active{ transform:scale(.96)!important; }
  .stat-card{ animation:fadeUp .55s ease both; }
  .section-title{ font-size:.95rem!important; }
}
@media (prefers-reduced-motion:reduce){ .reaper-hero .rh-inner,.character-item,.stat-card{ animation:none!important } }

/* ============================================================
   IN-PAGE POLISH — sphere cards, tooltips, spinners
   ============================================================ */
/* sphere cards = tactical slabs */
.sphere-card{ border:1px solid var(--border)!important; border-radius:2px!important;
  background:linear-gradient(180deg,rgba(18,18,22,.92),rgba(10,10,13,.96))!important;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.sphere-card:hover{ border-color:var(--border-bright)!important; transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 26px var(--blood-glow)!important; }
.sp-mode-warn,.sp-low-warn{ color:var(--blood-hi)!important; }
/* tooltips = reaper terminal (override colors only, keep positioning) */
[data-tip]::after{ background:#0d0d10!important; border:1px solid rgba(255,37,48,.4)!important; color:var(--bone)!important;
  font-family:'Oswald',sans-serif!important; letter-spacing:.03em!important; border-radius:2px!important;
  box-shadow:0 8px 26px rgba(0,0,0,.75),0 0 18px var(--blood-glow)!important; }
[data-tip]::before{ border-top-color:rgba(255,37,48,.5)!important; }
/* loading spinners -> blood */
.dev-news-spinner,.sb-load,[class*="spinner"]{ border-color:rgba(255,37,48,.22)!important; border-top-color:var(--blood-hi)!important; }