:root{--cyan:#67f7ff;--orange:#ff7800;--ink:#02070a;--panel:rgba(0,7,11,.9);--muted:#9bb9bd}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000306;color:#dfffff;font-family:"Courier New",monospace}
body{overflow-x:hidden}
#matrix{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:#000306}
.top-nav{position:relative;z-index:20;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:24px 170px 0}
.top-nav a{color:var(--cyan);font-size:12px;letter-spacing:.18em;text-decoration:none;padding:10px 15px;border:1px solid rgba(103,247,255,.55);background:rgba(0,5,8,.88);box-shadow:0 0 10px rgba(0,234,255,.18);transition:.25s}
.top-nav a:hover,.top-nav a.active{color:white;border-color:var(--orange);box-shadow:0 0 14px rgba(255,120,0,.68)}
.audio-control{position:fixed;top:24px;right:24px;z-index:100}
.audio-control button{color:var(--cyan);font:11px "Courier New",monospace;letter-spacing:.16em;padding:10px 14px;border:1px solid rgba(103,247,255,.55);background:rgba(0,5,8,.9);box-shadow:0 0 10px rgba(0,234,255,.18);cursor:pointer}
.audio-control button span{color:var(--orange);margin-right:6px}.audio-control button:hover{color:white;border-color:var(--orange)}
.realm-shell{position:relative;z-index:5;width:min(1320px,calc(100% - 40px));margin:34px auto 70px}
.hero{position:relative;min-height:700px;display:flex;align-items:center;overflow:hidden;border:1px solid rgba(103,247,255,.52);background:#000609;box-shadow:0 0 42px rgba(0,234,255,.18),inset 0 0 80px rgba(0,234,255,.04)}
.hero-frame{position:absolute;inset:18px;border:1px solid rgba(103,247,255,.17);clip-path:polygon(0 0,38% 0,40% 2px,60% 2px,62% 0,100% 0,100% 100%,62% 100%,60% calc(100% - 2px),40% calc(100% - 2px),38% 100%,0 100%)}
.castle{position:absolute;z-index:1;right:-3%;top:1%;width:72%;height:82%;object-fit:contain;object-position:center top;filter:contrast(1.1) saturate(1.05) drop-shadow(0 0 24px rgba(103,247,255,.2));opacity:.96}
.hero-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(0,3,6,.98) 0%,rgba(0,3,6,.91) 32%,rgba(0,3,6,.34) 60%,rgba(0,3,6,.12) 78%,rgba(0,3,6,.62) 100%),linear-gradient(0deg,rgba(0,3,6,.98),transparent 46%)}
.hero-content{position:relative;z-index:4;width:min(720px,68%);padding:68px 0 130px 6%}
.eyebrow{margin:0 0 18px;color:var(--orange);font-size:11px;font-weight:bold;letter-spacing:.25em}
.title{position:relative;margin:0;font-family: "Orbitron", "Arial Black", sans-serif;font-size:clamp(76px,11vw,164px);line-height:.82;letter-spacing:.035em;color:#02070a;-webkit-text-stroke:3px var(--cyan);text-shadow:-6px 0 13px rgba(103,247,255,.75),6px 0 18px rgba(255,120,0,.42);animation:titlePulse 4s ease-in-out infinite}
.title::after{content:"TERMINUS";position:absolute;inset:0;color:#02070a;-webkit-text-stroke:3px var(--orange);clip-path:polygon(55% 0,100% 0,100% 100%,55% 100%);text-shadow:6px 0 13px rgba(255,120,0,.72)}
.subtitle{margin:30px 0 0;color:#dfffff;font-size:clamp(12px,1.4vw,18px);letter-spacing:.3em;line-height:1.7;text-shadow:0 0 8px #000,0 0 12px rgba(103,247,255,.38)}
.intro{max-width:650px;margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.8;letter-spacing:.06em;text-shadow:0 2px 5px #000}
.enter-realm{display:inline-flex;align-items:center;gap:34px;margin-top:30px;padding:14px 18px;color:#071013;background:linear-gradient(90deg,var(--cyan),#caffff);font-size:12px;font-weight:bold;letter-spacing:.2em;text-decoration:none;box-shadow:0 0 18px rgba(103,247,255,.4);transition:.25s}
.enter-realm b{font-size:24px}.enter-realm:hover{background:linear-gradient(90deg,var(--orange),#ffd1ad);box-shadow:0 0 22px rgba(255,120,0,.65);transform:translateY(-2px)}
.realm-status{position:absolute;z-index:5;left:3%;right:3%;bottom:24px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(103,247,255,.35);border-left:1px solid rgba(103,247,255,.22);background:rgba(0,5,8,.86);backdrop-filter:blur(5px)}
.realm-status div{padding:15px 18px;border-right:1px solid rgba(103,247,255,.22);border-bottom:1px solid rgba(103,247,255,.22)}
.realm-status small{display:block;color:#65898e;font-size:9px;letter-spacing:.2em}.realm-status strong{display:block;margin-top:5px;color:var(--cyan);font-size:13px;letter-spacing:.16em}.realm-status div:nth-child(even) strong{color:var(--orange)}
.realm-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.realm-routes a{position:relative;min-height:150px;padding:25px;border:1px solid rgba(103,247,255,.38);color:inherit;background:linear-gradient(145deg,rgba(0,234,255,.055),transparent 55%,rgba(255,120,0,.045)),rgba(0,7,11,.92);text-decoration:none;box-shadow:inset 0 0 24px rgba(0,234,255,.025);transition:.25s}
.realm-routes a::after{content:"◇";position:absolute;right:22px;bottom:16px;color:var(--orange);font-size:24px}.realm-routes a:hover{transform:translateY(-3px);border-color:var(--orange);box-shadow:0 0 18px rgba(255,120,0,.22)}
.realm-routes small{color:var(--orange);font-size:9px;letter-spacing:.2em}.realm-routes strong{display:block;margin:17px 0 9px;color:var(--cyan);font-size:clamp(18px,2vw,26px);letter-spacing:.12em;text-shadow:0 0 9px rgba(103,247,255,.6)}.realm-routes span{color:#88a8ad;font-size:12px;line-height:1.6}
.floor{position:fixed;z-index:1;left:-25%;right:-25%;bottom:-18%;height:48%;perspective:800px;pointer-events:none;opacity:.38}.floor-lines{position:absolute;inset:0;transform-origin:top center;transform:rotateX(67deg);background-image:linear-gradient(90deg,rgba(0,225,255,.25) 1px,transparent 1px),linear-gradient(rgba(255,90,0,.18) 1px,transparent 1px);background-size:90px 90px}
.vignette{position:fixed;z-index:4;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 14%,transparent 86%,rgba(0,0,0,.55)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 32%)}
@keyframes titlePulse{50%{filter:drop-shadow(0 0 12px rgba(103,247,255,.55))}}
@media(max-width:980px){.top-nav{padding:20px 120px 0}.hero{min-height:720px}.castle{width:95%;right:-22%;opacity:.72}.hero-content{width:82%;padding-left:5%}.realm-routes{grid-template-columns:1fr}.realm-routes a{min-height:125px}.realm-status{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.top-nav{padding:78px 12px 0;gap:7px}.top-nav a{font-size:9px;padding:8px}.audio-control{top:18px;right:18px}.realm-shell{width:calc(100% - 20px);margin-top:22px}.hero{min-height:740px;align-items:flex-start}.castle{top:70px;right:-52%;width:150%;height:62%;opacity:.58}.hero-shade{background:linear-gradient(0deg,rgba(0,3,6,.99) 0 32%,rgba(0,3,6,.35) 70%,rgba(0,3,6,.78) 100%)}.hero-content{width:100%;padding:290px 24px 230px}.title{font-size:clamp(52px,18vw,82px);-webkit-text-stroke-width:2px}.title::after{-webkit-text-stroke-width:2px}.subtitle{letter-spacing:.16em}.realm-status{left:16px;right:16px;bottom:16px}.realm-status div{padding:12px}.enter-realm{gap:18px}.realm-routes a{padding:22px}}

/* Faceted frame around the home citadel artwork */
.citadel-frame{
  position:relative;
  z-index:3;
  isolation:isolate;
  display:block;
  flex:none;
  width:min(100%,1100px);
  aspect-ratio:1672 / 941;
  margin:18px auto 0;
  padding:6px;
  clip-path:polygon(0 22px,22px 0,calc(50% - 74px) 0,calc(50% - 64px) 8px,calc(50% + 64px) 8px,calc(50% + 74px) 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px));
  background:linear-gradient(135deg,rgba(101,250,255,.95),rgba(101,250,255,.24) 24%,rgba(255,122,24,.5) 52%,rgba(198,160,255,.3) 76%,rgba(101,250,255,.88));
  box-shadow:0 0 24px rgba(101,250,255,.2),0 0 42px rgba(255,122,24,.1);
}
.citadel-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(var(--terminus-cyan),var(--terminus-cyan)) left 0 top 0/54px 2px no-repeat,
    linear-gradient(var(--terminus-cyan),var(--terminus-cyan)) left 0 top 0/2px 40px no-repeat,
    linear-gradient(var(--terminus-orange),var(--terminus-orange)) right 0 top 0/54px 2px no-repeat,
    linear-gradient(var(--terminus-orange),var(--terminus-orange)) right 0 top 0/2px 40px no-repeat,
    linear-gradient(var(--terminus-orange),var(--terminus-orange)) left 0 bottom 0/54px 2px no-repeat,
    linear-gradient(var(--terminus-orange),var(--terminus-orange)) left 0 bottom 0/2px 40px no-repeat,
    linear-gradient(var(--terminus-cyan),var(--terminus-cyan)) right 0 bottom 0/54px 2px no-repeat,
    linear-gradient(var(--terminus-cyan),var(--terminus-cyan)) right 0 bottom 0/2px 40px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent) center 4px/150px 1px no-repeat;
  filter:drop-shadow(0 0 5px rgba(101,250,255,.55));
}
.citadel-frame>.castle{
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  object-position:center;
  clip-path:polygon(0 18px,18px 0,calc(50% - 70px) 0,calc(50% - 60px) 8px,calc(50% + 60px) 8px,calc(50% + 70px) 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px));
}

@media(max-width:650px){
  .citadel-frame{width:100%;margin-top:14px;padding:4px}
  .citadel-frame::before{background-size:38px 2px,2px 28px,38px 2px,2px 28px,38px 2px,2px 28px,38px 2px,2px 28px,100px 1px}
  .citadel-frame>.castle{width:100%;height:100%;opacity:1}
}

/* Keep the full castle visible, with the title above it and the main action below. */
.top-nav{padding:24px 24px 0}
.hero{min-height:0;flex-direction:column;align-items:center;padding:clamp(30px,5vh,54px) clamp(18px,4vw,50px) 142px;text-align:center}
.hero-content{width:100%;max-width:960px;padding:0}
.eyebrow{margin-bottom:12px}
.title{font-size:clamp(64px,9.5vw,136px);line-height:.9}
.subtitle{margin-top:16px}
.intro{margin:14px auto 0}
.castle{position:relative;z-index:1;top:auto;right:auto;display:block;flex:none;width:min(100%,1200px);height:min(56svh,560px);margin:18px auto 0;object-fit:contain;object-position:center;opacity:1}
.hero-shade{background:linear-gradient(180deg,rgba(0,3,6,.18),transparent 45%,rgba(0,3,6,.16));pointer-events:none}
.music-toggle{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border:1px solid rgba(101,250,255,.55);background:rgba(0,8,12,.9);color:#8fbfc3;font:700 11px "Courier New",monospace;letter-spacing:.16em;cursor:pointer;box-shadow:inset 0 0 16px rgba(0,234,255,.05);transition:180ms ease}
.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,.28),inset 0 0 16px rgba(255,122,24,.08);outline:none}
.music-icon{color:var(--orange);text-shadow:0 0 8px rgba(255,122,24,.8)}
.music-toggle.active .music-icon{animation:musicPulse 1.4s ease-in-out infinite}
.enter-realm{position:relative;z-index:4;margin:14px auto 0}

@media(max-width:980px){
  .castle{width:min(100%,1100px);height:min(50svh,480px);right:auto;opacity:1}
  .hero-content{width:100%;padding:0;text-align:center}
}

@media(max-width:650px){
  .top-nav{padding:20px 12px 0;gap:7px}
  .realm-shell{width:calc(100% - 20px);margin-top:22px}
  .hero{min-height:0;align-items:center;padding:28px 16px 142px}
  .hero-content{width:100%;padding:0;text-align:center}
  .eyebrow{font-size:9px;letter-spacing:.16em;line-height:1.7}
  .title{font-size:clamp(44px,13.5vw,70px);letter-spacing:.02em;-webkit-text-stroke-width:2px}
  .title::after{-webkit-text-stroke-width:2px}
  .subtitle{margin-top:14px;font-size:10px;letter-spacing:.12em;line-height:1.7}
  .intro{margin-top:12px;font-size:12px;line-height:1.65}
  .music-toggle{margin-top:15px}
  .castle{width:100%;height:min(32svh,260px);margin-top:14px;opacity:1}
  .hero-shade{background:linear-gradient(180deg,rgba(0,3,6,.12),transparent 60%,rgba(0,3,6,.15))}
  .enter-realm{gap:18px;margin-top:14px;padding:12px 15px;font-size:10px}
  .realm-status{left:10px;right:10px;bottom:12px}
  .realm-status div{padding:10px 7px}
  .realm-status small{font-size:8px}
  .realm-status strong{font-size:10px;letter-spacing:.1em}
  .realm-routes a{padding:22px}
}