/* Home page palette: orange first, white second, cyan third, with a little lavender, and pink and red as small accents.
   Loaded after main.css and site-vibe.css, so it only has to restate colours. */
:root{
  --cyan:#ffffff;
  --terminus-cyan:#65faff;
  --orange:#ff7a18;
  --terminus-orange:#ff7a18;
  --ink:#05050b;
  --terminus-ink:#05050b;
  --panel:rgba(5,7,14,.9);
  --terminus-panel:rgba(5,7,14,.9);
  --muted:#c9d6df;
  --lav:#c6a0ff;
  --cx:#65faff;
  --pink:#ff4fa8;
  --red:#ff3b42;
}
html,body{background:#05050b;color:#f3eef8}
#matrix{background:#05050b}

/* navigation */
nav.top-nav{border-bottom-color:rgba(101,250,255,.25);background:linear-gradient(180deg,rgba(5,7,14,.97),rgba(5,7,14,.88));box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 -1px rgba(255,122,24,.3)}
nav.top-nav::before{border-right-color:rgba(101,250,255,.28);color:#fff;text-shadow:0 0 14px rgba(255,122,24,.5)}
nav.top-nav a,nav.top-nav>details.nav-command-group>summary{color:#d9cfe6}
nav.top-nav a:hover,nav.top-nav a:focus-visible,nav.top-nav a.active,
nav.top-nav>details.nav-command-group>summary:hover,nav.top-nav>details.nav-command-group>summary:focus-visible,nav.top-nav>details.nav-command-group>summary.active{color:#fff;text-shadow:0 0 12px rgba(255,122,24,.6)}
nav.top-nav a:focus-visible,nav.top-nav>details.nav-command-group>summary:focus-visible{outline-color:var(--orange)}
nav.top-nav .nav-command-menu{border-color:rgba(101,250,255,.4);background:rgba(5,7,14,.98);box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 18px rgba(101,250,255,.14)}
nav.top-nav .nav-command-menu a{border-bottom-color:rgba(101,250,255,.16)}

/* hero */
.hero{border-color:rgba(255,122,24,.55);background:#07040b;box-shadow:0 0 42px rgba(255,122,24,.16),inset 0 0 80px rgba(101,250,255,.05)}
.hero-frame{border-color:rgba(101,250,255,.26)}
.castle{filter:contrast(1.1) saturate(1.05) drop-shadow(0 0 24px rgba(255,122,24,.25))}
.hero-shade{background:linear-gradient(180deg,rgba(6,3,10,.18),transparent 45%,rgba(6,3,10,.2))}
/* TERMINUS title: blue-black letters, outline cyan on the left, white in the middle, orange on the right */
.title{-webkit-text-stroke-color:#65faff;color:#030a1c;text-shadow:-6px 0 13px rgba(101,250,255,.7),6px 0 18px rgba(255,122,24,.55)}
.title::before{content:"TERMINUS";position:absolute;inset:0;color:#030a1c;-webkit-text-stroke:3px #fff;clip-path:polygon(33% 0,63% 0,63% 100%,33% 100%);text-shadow:0 0 14px rgba(255,255,255,.45)}
.title::after{clip-path:polygon(63% 0,100% 0,100% 100%,63% 100%);color:#030a1c}
@media(max-width:650px){.title::before{-webkit-text-stroke-width:2px}}
@keyframes titlePulse{50%{filter:drop-shadow(0 0 12px rgba(255,122,24,.55))}}
.subtitle{color:#fff;text-shadow:0 0 8px #000,0 0 12px rgba(255,122,24,.35)}
.intro{color:var(--muted)}
.music-toggle{border-color:rgba(101,250,255,.55);background:rgba(5,7,14,.9);color:#e6dcf2;box-shadow:inset 0 0 16px rgba(101,250,255,.07)}
.music-toggle:hover,.music-toggle:focus-visible,.music-toggle.active{border-color:var(--orange);color:#fff;box-shadow:0 0 14px rgba(255,122,24,.3),inset 0 0 16px rgba(255,122,24,.09)}
.enter-realm{color:#1a0b02;background:linear-gradient(90deg,#ff7a18,#ffb27a);box-shadow:0 0 18px rgba(255,122,24,.45)}
.enter-realm:hover{background:linear-gradient(90deg,#ffffff,#e5d4ff);box-shadow:0 0 22px rgba(198,160,255,.6)}

/* four-up status strip: white, orange, white (VALOR), cyan */
.realm-status{border-top-color:rgba(101,250,255,.4);border-left-color:rgba(101,250,255,.25);background:rgba(5,7,14,.86)}
.realm-status div{border-right-color:rgba(101,250,255,.25);border-bottom-color:rgba(101,250,255,.25)}
.realm-status small{color:#8fa9b6}
.realm-status strong{color:#fff}
.realm-status div:nth-child(2) strong{color:var(--orange)}
.realm-status div:nth-child(3) strong{color:#fff}
.realm-status div:nth-child(4) strong{color:var(--cx)}

/* three route cards */
.realm-routes a{border-color:rgba(101,250,255,.4);background:linear-gradient(145deg,rgba(101,250,255,.07),transparent 55%,rgba(255,122,24,.07)),rgba(5,7,14,.92);box-shadow:inset 0 0 24px rgba(101,250,255,.03)}
.realm-routes a::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);box-shadow:0 0 10px rgba(255,122,24,.6)}
.realm-routes a:nth-child(2)::before{background:var(--pink);box-shadow:0 0 10px rgba(255,79,168,.6)}
.realm-routes a:nth-child(3)::before{background:var(--cx);box-shadow:0 0 10px rgba(101,250,255,.6)}
.realm-routes a:nth-child(2)::after{color:var(--pink)}
.realm-routes a:nth-child(3)::after{color:var(--cx)}
.realm-routes a:nth-child(2):hover{border-color:var(--pink);box-shadow:0 0 18px rgba(255,79,168,.22)}
.realm-routes a:nth-child(3):hover{border-color:var(--cx);box-shadow:0 0 18px rgba(101,250,255,.24)}
.realm-routes strong{color:#fff;text-shadow:0 0 9px rgba(255,122,24,.45)}
.realm-routes span{color:#aebfca}

/* floor grid and artwork frame */
.floor-lines{background-image:linear-gradient(90deg,rgba(101,250,255,.24) 1px,transparent 1px),linear-gradient(rgba(255,100,20,.2) 1px,transparent 1px)}
.citadel-frame{background:linear-gradient(135deg,rgba(255,122,24,.95),rgba(255,255,255,.3) 22%,rgba(101,250,255,.45) 48%,rgba(198,160,255,.35) 66%,rgba(255,79,168,.35) 82%,rgba(255,122,24,.9));box-shadow:0 0 24px rgba(255,122,24,.2),0 0 42px rgba(101,250,255,.12)}
.citadel-frame::before{
  background:
    linear-gradient(#fff,#fff) left 0 top 0/54px 2px no-repeat,
    linear-gradient(#fff,#fff) left 0 top 0/2px 40px no-repeat,
    linear-gradient(var(--orange),var(--orange)) right 0 top 0/54px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) right 0 top 0/2px 40px no-repeat,
    linear-gradient(var(--red),var(--red)) left 0 bottom 0/54px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) left 0 bottom 0/2px 40px no-repeat,
    linear-gradient(var(--cx),var(--cx)) right 0 bottom 0/54px 2px no-repeat,
    linear-gradient(var(--cx),var(--cx)) right 0 bottom 0/2px 40px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent) center 4px/150px 1px no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,122,24,.5));
}
@media(max-width:650px){
  .citadel-frame::before{background-size:38px 2px,2px 28px,38px 2px,2px 28px,38px 2px,2px 28px,38px 2px,2px 28px,100px 1px}
}