/* Nullborn: the game's own interface (src/style.css). Night navy, panels with a bright
   blue rule, Cinzel Decorative with the title screen's glow, Cinzel for labels, Share Tech
   Mono for the system's voice. Paragraphs use Barlow for reading. */
@font-face{font-family:"Cinzel Decorative";src:url("/games/nullborn/fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url("/games/nullborn/fonts/cinzel-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cinzel";src:url("/games/nullborn/fonts/cinzel-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url("/games/nullborn/fonts/share-tech-mono-latin-400-normal.woff2") format("woff2");font-display:swap}

.null-site{
  --n50:#f0f5ff;--n100:#d6e2fa;--n200:#a4b8dd;--n300:#8ea6d0;--n700:#142138;--n800:#0d1627;--n900:#070d18;
  --panel:hsla(222,40%,11%,.96);--border:#2c4266;--accent:#00a8ff;--bp:#ffa502;--hp:#ff4757;
  --ember:#ff6b1a;--tide:#00a8ff;--loam:#eccc68;--gale:#2ed573;--lumen:#ffa502;--umbra:#a55eea;
  --title:"Cinzel Decorative","Cinzel",serif;--cinzel:"Cinzel",serif;--mono:"Share Tech Mono",ui-monospace,monospace;--display:var(--cinzel);
  background:var(--n900)}
.null-site main{color:var(--n50)}
.null-site main h2,.null-site main h3{font-family:var(--cinzel);font-weight:700;letter-spacing:.02em;text-transform:none}
.null-site :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.null-site .game-subnav a[aria-current]{text-decoration-color:var(--accent)}
.null-site main p{line-height:1.65}
.null-small{font-family:var(--mono);font-size:13px;color:var(--n300);margin:2px 0;letter-spacing:.04em}
.null-tag,.null-sys{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}

/* Menu items: the title screen's menu, used as the page's actions */
.null-menu{display:grid;gap:6px;max-width:520px;margin-top:30px}
.null-item{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:10px 18px;font-family:var(--cinzel);font-weight:700;font-size:17px;color:var(--n50);border:1px solid transparent;border-radius:3px;transition:background .12s,border-color .12s}
.null-item small{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--n200);letter-spacing:.04em}
.null-item:hover,.null-item.active{background:linear-gradient(90deg,rgba(0,168,255,.24),rgba(0,168,255,.08));border-color:var(--accent);box-shadow:0 0 18px rgba(0,168,255,.25)}
.null-item.active:not(:hover){background:linear-gradient(90deg,rgba(0,168,255,.18),rgba(0,168,255,.04))}

/* Hero: the title screen, split — copy on the night, the valley in a window */
.null-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;width:100vw;margin-left:calc(50% - 50vw);padding:64px var(--edge,40px) 56px;
  background:radial-gradient(ellipse 60% 80% at 15% 40%,rgba(0,168,255,.12),transparent 60%),var(--n900)}
.null-site .null-title{margin:12px 0 0;padding-left:.12em;font-family:var(--title);font-weight:700;font-size:clamp(50px,6vw,96px);line-height:1;color:#f4f8ff;letter-spacing:.01em;text-transform:none;
  text-shadow:0 0 18px rgba(80,180,255,.55),0 0 42px rgba(0,140,255,.35)}
.null-lead{max-width:30ch;margin:18px 0 0;font-family:var(--cinzel);font-weight:500;font-size:19px;line-height:1.5;color:var(--n100)}
.null-axiom{margin:26px 0 0;padding:4px 0 4px 16px;border-left:2px solid var(--accent)}
.null-axiom p{margin:0;font-family:var(--cinzel);font-style:italic;font-size:18px;color:var(--n100)}
.null-site .null-axiom .null-axiom-src{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--n300)}
.null-hero-art{margin:0;border:1px solid var(--border);box-shadow:0 0 0 1px rgba(0,168,255,.25),0 24px 60px rgba(0,0,0,.5);overflow:hidden;aspect-ratio:1180/1080;max-height:76vh}
.null-hero-art img{width:100%;height:100%;object-fit:cover}

.null-tally{display:grid;grid-template-columns:repeat(6,1fr);margin:0;border-block:1px solid var(--border)}
.null-tally div{padding:16px 18px;display:flex;flex-direction:column-reverse;gap:4px;border-left:1px solid var(--border)}
.null-tally div:first-child{border-left:0}
.null-tally dd{margin:0;font-family:var(--mono);font-size:34px;line-height:1;color:var(--n50)}
.null-tally dt{font-family:var(--cinzel);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--n200)}
.null-subnav{border-bottom:1px solid var(--border);font-family:var(--cinzel);font-weight:700;font-size:15px}

/* Sections */
.null-head{max-width:760px;margin-bottom:34px}
.null-head h2{font-size:clamp(34px,4.4vw,56px);line-height:1.05;margin:0;color:var(--n50)}
.null-head p{color:var(--n200);font-size:18px;margin:14px 0 0}
.null-story,.null-party,.null-world,.null-combat,.null-bestiary,.null-motes,.null-score{padding:80px 0;border-top:1px solid var(--border)}
.null-story{max-width:900px}
.null-premise{font-family:var(--cinzel);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.6;color:var(--n50);margin:18px 0 0}
.null-note{color:var(--n200);font-size:17px;margin:22px 0 0;padding-left:16px;border-left:2px solid var(--border)}
.null-panel{background:var(--panel);border:1px solid var(--border)}

.null-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.null-member{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;padding:20px;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent)}
.null-member-art{display:grid;justify-items:center;align-content:start;gap:14px;padding:14px 8px;background:var(--n800);border:1px solid var(--border)}
.null-portrait{width:192px;max-width:100%;height:auto;image-rendering:pixelated}
.null-walk{display:block;width:96px;height:128px;background-size:384px 896px;background-position:0 0;image-rendering:pixelated;animation:null-walk .72s steps(4) infinite}
@keyframes null-walk{to{background-position:-384px 0}}
.null-member h3{font-size:28px;margin:0;color:var(--n50)}
.null-member-title{margin:2px 0 10px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.null-member-copy>p:not(.null-member-title){color:var(--n200);margin:0 0 14px}
.null-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.null-facts div{padding:8px 10px;background:var(--n800);border-left:2px solid var(--border)}
.null-facts .wide{grid-column:1/-1}
.null-facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--n300)}
.null-facts dd{margin:3px 0 0;color:var(--n100);font-size:15px}

.null-chip{display:inline-block;margin:0 4px 2px 0;padding:1px 8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border);color:var(--n100);background:var(--n800);border-radius:2px}
.null-chip.strain{border-color:var(--sc);color:var(--sc)}
.null-chip.ember{--sc:var(--ember)}.null-chip.tide{--sc:#4cc3ff}.null-chip.loam{--sc:var(--loam)}.null-chip.gale{--sc:var(--gale)}.null-chip.lumen{--sc:var(--lumen)}.null-chip.umbra{--sc:#c49af2}.null-chip.null{--sc:var(--n100)}

.null-act{margin-top:40px}
.null-act:first-of-type{margin-top:0}
.null-act h3{display:flex;align-items:baseline;gap:14px;font-size:30px;margin:0 0 14px;color:var(--n50)}
.null-act h3 small{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.null-regions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.null-region{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--border)}
.null-region.lead{grid-column:span 2;grid-row:span 2}
.null-region img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.null-region:hover img{transform:scale(1.03)}
.null-region span{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:6px 10px;background:rgba(7,13,24,.9);border-left:2px solid var(--accent)}
.null-region b{display:block;font-family:var(--cinzel);font-size:15px;color:var(--n50)}
.null-region small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--n200);text-transform:uppercase}

.null-frame{margin:0;border:1px solid var(--border);box-shadow:0 0 0 1px rgba(0,168,255,.2)}
.null-frame img{display:block;width:100%;height:auto}
.null-frame figcaption{padding:10px 14px;font-family:var(--mono);font-size:13px;color:var(--bp);background:var(--n800);border-top:1px solid var(--border)}
.null-strains{margin-top:26px;display:grid;grid-template-columns:auto 1fr;gap:12px 22px;align-items:center}
.null-strains h3{font-size:22px;margin:0}
.null-strains ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.null-strains .null-chip{font-size:14px;padding:4px 12px}
.null-strains p{grid-column:1/-1;margin:0;color:var(--n200)}

.null-foes{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px}
.null-foe{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:12px;background:var(--panel);border:1px solid var(--border)}
.null-foe img{width:112px;height:112px;image-rendering:pixelated;background:var(--n800);border:1px solid var(--border)}
.null-foe h3{font-size:19px;margin:0;color:var(--n50)}
.null-foe p:not(.null-small){margin:6px 0 0;font-size:15px;color:var(--n200)}
.null-weak{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.null-weak span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--n300);margin-right:6px}

.null-summons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.null-summon-col{padding:12px;background:var(--panel);border:1px solid var(--border);border-top:3px solid var(--sc,var(--accent))}
.null-summon-col.ember{--sc:var(--ember)}.null-summon-col.tide{--sc:var(--tide)}.null-summon-col.loam{--sc:var(--loam)}.null-summon-col.gale{--sc:var(--gale)}.null-summon-col.lumen{--sc:var(--lumen)}.null-summon-col.umbra{--sc:var(--umbra)}
.null-summon-col h3{margin:0 0 10px}
.null-starts{margin:0;padding:0;list-style:none}.null-starts .null-chip{margin-bottom:10px}
.null-more{margin:20px 0 0;font-size:18px;color:var(--n200)}
.null-summon-col ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.null-summon-col b{display:block;font-family:var(--cinzel);font-size:16px;color:var(--n50)}
.null-summon-col small{font-family:var(--mono);font-size:11px;color:var(--n300);letter-spacing:.08em;text-transform:uppercase}
.null-summon-col p{margin:2px 0 0;font-size:14px;color:var(--n200);line-height:1.45}
.null-classes{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.null-classes li{padding:10px 12px;background:var(--n800);border-left:2px solid var(--accent);color:var(--n200);font-size:15px}
.null-classes b{display:block;font-family:var(--cinzel);color:var(--n50)}

.null-tracks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px}
.null-site .null-track{display:grid;grid-template-columns:36px 1fr;column-gap:12px;width:100%;min-height:70px;padding:10px 14px;text-align:left;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:0;color:var(--n50);font-family:var(--cinzel);font-weight:700;cursor:pointer}
.null-site .null-track:hover{border-left-color:var(--accent);background:var(--n700)}
.null-site .null-track[aria-pressed=true]{border-left-color:var(--accent);box-shadow:0 0 16px rgba(0,168,255,.22)}
.null-track-icon{grid-row:1/4;align-self:center;width:28px;height:28px;background:var(--accent);clip-path:polygon(25% 15%,85% 50%,25% 85%)}
.null-track[aria-pressed=true] .null-track-icon{clip-path:inset(20% 18%);background:linear-gradient(90deg,var(--accent) 0 38%,transparent 38% 62%,var(--accent) 62%)}
.null-track-title{font-size:17px}
.null-track .null-small{margin:0}
.null-track-plays{font-family:system-ui,sans-serif;font-weight:400;font-size:14px;color:var(--n200);line-height:1.4}
.null-track-file{display:none}
.null-tracks.no-js .null-track{display:none}
.null-tracks.no-js .null-track-file{display:block;padding:12px 14px;background:var(--panel);border:1px solid var(--border);color:var(--accent)}

.null-close{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;width:100vw;margin-left:calc(50% - 50vw);padding:72px var(--edge,40px);background:radial-gradient(ellipse 60% 120% at 85% 0%,rgba(0,168,255,.14),transparent 60%),var(--n800);border-top:1px solid var(--accent)}
.null-close h2{font-size:clamp(34px,4.4vw,56px);margin:0}
.null-close p{color:var(--n200);font-size:18px;margin:0}

@media(max-width:1100px){
  .null-hero{grid-template-columns:1fr;gap:32px}
  .null-hero-art{max-height:none}
  .null-tally{grid-template-columns:repeat(3,1fr)}
  .null-tally div:nth-child(4){border-left:0}
  .null-members{grid-template-columns:1fr}
  .null-summons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .null-close{grid-template-columns:1fr;gap:24px}
}
@media(max-width:700px){
  .null-hero{padding:40px 16px 32px}
  .null-lead{font-size:17px}
  .null-tally dd{font-size:26px}
  .null-member{grid-template-columns:1fr;padding:14px}
  .null-member-art{grid-template-columns:auto auto;justify-content:center;align-items:end}
  .null-portrait{width:144px}
  .null-facts{grid-template-columns:1fr}
  .null-regions{grid-template-columns:1fr 1fr}
  .null-region.lead{grid-row:auto}
  .null-region.lead ~ .null-region:last-child:nth-child(even){grid-column:span 2}
  .null-region span{left:4px;bottom:4px;padding:4px 8px}
  .null-region small{display:none}
  .null-foes,.null-tracks{grid-template-columns:1fr}
  .null-foe{grid-template-columns:88px 1fr}
  .null-foe img{width:88px;height:88px}
  .null-summons{grid-template-columns:1fr 1fr}
  .null-classes{grid-template-columns:1fr}
  .null-story,.null-party,.null-world,.null-combat,.null-bestiary,.null-motes,.null-score{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){.null-walk{animation:none}.null-region img,.null-item{transition:none}.null-region:hover img{transform:none}}

.null-site .site-nav,.null-site footer{background-image:none}
.null-site .site-nav::after,.null-site footer::before{display:none}
/* Header and footer as the game's HUD: night navy, a blue rule, Cinzel for the menu. */
.null-site .site-nav,.null-site footer{background-color:#070d18}
.null-site .site-nav{background-color:rgba(7,13,24,.96);border-bottom:1px solid #2c4266;box-shadow:0 1px 0 rgba(0,168,255,.35)}
.null-site .nav-links{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.06em;color:#d6e2fa}
.null-site .nav-links a::after{background:#00a8ff;box-shadow:0 0 10px rgba(0,168,255,.6)}
.null-site .brand-subtitle{color:#8ea6d0!important}
.null-site footer{border-top:1px solid #2c4266;color:#8ea6d0}
.null-site footer::after{color:#f0f5ff;font-family:"Cinzel Decorative",serif;font-size:24px;text-shadow:0 0 14px rgba(80,180,255,.45)}
.null-site footer .footer-row{border-top-color:#2c4266}
/* Header and footer run edge to edge, rules included. */
.null-site .site-nav{background:#070d18;border-bottom:0;box-shadow:0 0 0 100vmax #070d18;clip-path:inset(0 -100vmax -1px)}
.null-site .site-nav::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:-1px;height:1px;background:#2c4266;pointer-events:none}
.null-site footer{background:#070d18;border-top:0;overflow:visible;box-shadow:0 0 0 100vmax #070d18;clip-path:inset(-10px -100vmax 0)}
.null-site footer::before{display:block!important;content:"";position:absolute;inset:-1px calc(50% - 50vw) auto;width:auto;height:1px;opacity:1;background:#2c4266}
body.null-site{background:#070d18}
@media(max-width:1000px){.null-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.null-site .null-title{font-size:min(50px,14vw)}}