/* Starshott Battle School — per the Starshott Hegemony Brand Identity Guide.
   Black primary; greys/metallics secondary; neon accents sampled from the official neon logo, used sparingly
   (critical areas, patches/rank-style details). Hegemony overlay: pastel airbrush haze, fractured grid that frays
   at the edges, star field, cosmic particles, starbursts. Fonts are an interpretation (guide names styles, not faces). */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Nunito:wght@300;400;600&display=swap");
:root{
  --void:#000000; --gunmetal:#16181c; --steel:#2a2d33; --grey:#8a9099; --silver:#c8d2e0; --white:#f4f8ff;
  /* sampled from the neon logo (starshott-neon.jpg) glow strokes */
  --neon-cyan:#57def2; --neon-teal:#59ecd6; --neon-blue:#588ee0; --neon-violet:#7858df; --neon-purple:#de4cf2;
  --neon-magenta:#f063cd; --neon-pink:#f25b99; --neon-orange:#e28954; --neon-yellow:#f9db66;
  --neon-green:var(--neon-teal);
  --head:"Rajdhani","Arial Narrow",sans-serif; --soft:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--silver);font:16px/1.65 var(--soft);background:var(--void);position:relative;min-height:100vh}
/* star field + cosmic particles */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1px 1px at 12% 18%,#fff9,transparent),radial-gradient(1px 1px at 72% 9%,#fff7,transparent),
  radial-gradient(1px 1px at 38% 62%,#fff6,transparent),radial-gradient(1.5px 1.5px at 88% 44%,#fff8,transparent),
  radial-gradient(1px 1px at 22% 86%,#fff6,transparent),radial-gradient(1px 1px at 58% 31%,#fff5,transparent),
  radial-gradient(1px 1px at 5% 52%,#fff6,transparent),radial-gradient(1px 1px at 94% 78%,#fff6,transparent),
  radial-gradient(2px 2px at 30% 40%,#57def288,transparent),radial-gradient(2px 2px at 80% 25%,#f063cd77,transparent),
  radial-gradient(2px 2px at 65% 80%,#f9db6666,transparent),radial-gradient(2px 2px at 15% 70%,#de4cf266,transparent),
  /* pastel airbrush haze */
  radial-gradient(40% 35% at 10% 10%,#de4cf214,transparent 70%),radial-gradient(45% 40% at 90% 20%,#57def212,transparent 70%),
  radial-gradient(50% 40% at 50% 100%,#f9db660d,transparent 70%),#000}
/* fractured grid that frays toward the edges */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(#c8d2e00d 1px,transparent 1px),linear-gradient(90deg,#c8d2e00d 1px,transparent 1px),
    linear-gradient(115deg,transparent 48%,#57def20a 49%,transparent 50%);
  background-size:64px 64px,64px 64px,320px 220px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%)}
a{color:var(--white)}a:hover{color:var(--neon-blue)}
.draft{background:#1a1300;color:#ffd479;text-align:center;font:600 12px var(--head);letter-spacing:.2em;padding:6px;text-transform:uppercase}
header{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--steel);background:#000c;backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:12px;font:700 22px var(--head);letter-spacing:.32em;text-transform:uppercase;color:var(--white);text-decoration:none}
.brand img{height:44px;mix-blend-mode:screen}
nav a{font:600 14px var(--head);color:var(--grey);text-decoration:none;margin-left:24px;letter-spacing:.18em;text-transform:uppercase}
nav a:hover,nav a.on{color:var(--white);text-shadow:0 0 8px var(--neon-blue)}
main{max-width:1060px;margin:0 auto;padding:48px 32px}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;color:var(--white)}
h2{font-size:30px;letter-spacing:.2em;border-left:3px solid var(--neon-purple);padding-left:14px}
h3{letter-spacing:.12em;font-size:19px;margin:0 0 6px}
.hero{text-align:center;padding:48px 0 56px;border-bottom:1px solid var(--steel)}
.hero .mark{width:min(380px,75%);mix-blend-mode:screen;display:block;margin:0 auto}
.hero h1{font-size:64px;letter-spacing:.3em;margin:8px 0 0;font-weight:700}
.hero p{font-family:var(--soft);font-weight:300;color:var(--grey);letter-spacing:.35em;text-transform:uppercase;margin:4px 0 26px}
.btn{display:inline-block;font:700 14px var(--head);border:1px solid var(--silver);background:linear-gradient(#1e2126,#0b0c0e);padding:11px 26px;margin:8px;color:var(--white);text-decoration:none;letter-spacing:.2em;text-transform:uppercase}
.btn:hover{border-color:var(--neon-green);box-shadow:0 0 12px #39ff8855;color:var(--white)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.card{background:linear-gradient(160deg,var(--gunmetal),#0a0b0d);border:1px solid var(--steel);border-top:2px solid var(--grey);padding:20px}
.card:hover{border-top-color:var(--neon-green)}
.todo{color:#ffd479;font-style:italic}
footer{border-top:1px solid var(--steel);padding:24px 32px;color:var(--grey);font-size:13px;text-align:center}
.tv{background:#000;border:12px solid var(--gunmetal);border-radius:16px;box-shadow:0 0 0 1px var(--steel),0 0 40px #b56cff22,0 20px 60px #000}
.screen{position:relative;aspect-ratio:16/9;background:#000;display:flex;justify-content:center}.screen.vertical #player{aspect-ratio:9/16;height:100%;width:auto}
#player{width:100%;height:100%}
.osd{position:absolute;top:12px;left:16px;font:700 22px var(--head);letter-spacing:.1em;color:var(--neon-green);text-shadow:0 0 8px var(--neon-green);pointer-events:none}
.controls{display:flex;gap:10px;justify-content:center;align-items:center;padding:14px;font-family:var(--head);letter-spacing:.1em;text-transform:uppercase}
.controls button{font:700 14px var(--head);background:var(--gunmetal);color:var(--white);border:1px solid var(--steel);padding:8px 18px;cursor:pointer;letter-spacing:.15em}
.controls button:hover{border-color:var(--neon-blue)}
.lead{font-size:18px;font-weight:300;color:var(--white);max-width:760px}
.motto{font:700 20px var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--white);text-shadow:0 0 10px #57def255}
ul.ranks{padding-left:18px}ul.ranks li::marker{color:var(--neon-cyan)}
/* Home: CIC warp starfield behind content (warp.js). Replaces the static star/haze layer on this page only. */
#warp{position:fixed;inset:0;width:100vw;height:100vh;z-index:-3;display:block;background:#000}
body.home{background:transparent}
body.home::before{background:radial-gradient(40% 35% at 10% 10%,#de4cf214,transparent 70%),radial-gradient(45% 40% at 90% 20%,#57def212,transparent 70%)}
body.home header{background:#000b}
body.home .hero h1,body.home .hero p{text-shadow:0 0 12px #000,0 0 4px #000}
body.home .card{background:linear-gradient(160deg,#16181ce6,#0a0b0de6)}
body.home footer{background:#000c}