*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--void)}
body{
  margin:0;min-width:320px;overflow-x:hidden;
  color:var(--text);font-family:var(--font-ui);
  background:
    radial-gradient(circle at 76% -8%,rgba(103,207,255,.075),transparent 34rem),
    var(--void);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd{margin-top:0}
::selection{background:rgba(103,207,255,.28);color:#fff}

.shell{width:var(--shell);margin-inline:auto}
.section-edge{border-top:1px solid var(--line)}
.section-kicker{color:#6e98ad;font-size:.59rem;font-weight:800;letter-spacing:.18em}

.skip-link{position:fixed;top:8px;left:8px;z-index:999;padding:10px 14px;background:#fff;color:#000;transform:translateY(-160%)}
.skip-link:focus{transform:none}

.page-noise{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.022;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.24) 0,rgba(255,255,255,.24) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:soft-light
}
.cursor-aura{
  width:520px;aspect-ratio:1;position:fixed;left:0;top:0;z-index:-1;border-radius:50%;pointer-events:none;opacity:.10;
  background:radial-gradient(circle,rgba(103,207,255,.5),rgba(148,119,255,.12) 34%,transparent 68%);
  filter:blur(28px)
}
.scroll-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;background:transparent}
.scroll-progress span{display:block;width:0;height:100%;background:var(--gradient-veyl);box-shadow:0 0 12px rgba(103,207,255,.45)}

.btn{
  min-height:52px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;gap:24px;
  border:1px solid var(--line-strong);font-size:.64rem;font-weight:800;letter-spacing:.14em;
  transition:transform .22s var(--ease-out),border-color .22s ease,background .22s ease,color .22s ease
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{color:#041018;border-color:transparent;background:var(--gradient-veyl);box-shadow:0 12px 44px rgba(103,207,255,.14)}
.btn--glass{color:#a9bbc8;background:rgba(8,16,26,.5)}
.btn--glass:hover{color:#fff;border-color:rgba(167,232,255,.32)}
.btn--large{min-height:60px;padding-inline:30px}

/* Header */
.header{
  height:var(--header-h);position:fixed;inset:0 0 auto;z-index:90;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease
}
.header.is-scrolled{background:rgba(4,7,12,.72);border-color:var(--line);backdrop-filter:blur(18px)}
.header__inner{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.game-brand{width:fit-content;display:grid;line-height:1}
.game-brand__main{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.18em}
.game-brand__sub{margin-top:5px;color:#608097;font-size:.44rem;font-weight:800;letter-spacing:.23em}
.nav{display:flex;align-items:center;gap:27px}
.nav a{position:relative;color:#7790a2;font-size:.60rem;font-weight:800;letter-spacing:.15em;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:1px;background:var(--veyl);transition:right .25s var(--ease-out)}
.nav a:hover{color:#d8f1ff}.nav a:hover::after{right:0}
.header__actions{
  justify-self:end;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
.btn--header-sm{
  min-height:38px;
  padding:0 14px;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.12em;
  gap:8px;
}
.wishlist{
  justify-self:end;min-height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(103,207,255,.23);color:#9cc8dd;background:rgba(103,207,255,.035);
  font-size:.58rem;font-weight:800;letter-spacing:.14em
}
.wishlist__dot{width:5px;height:5px;border-radius:50%;background:var(--veyl);box-shadow:0 0 12px var(--veyl)}
.menu-toggle{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.menu-toggle span{width:20px;height:1px;display:block;margin:5px auto;background:#d8edf7}

/* Hero */
.hero{min-height:100svh;position:relative;overflow:hidden;background:#03060b}
.hero__art{position:absolute;inset:0}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.80;filter:saturate(1.08) contrast(1.15) brightness(1.02);transform:scale(1.03)}
.hero__art-mask{position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(3,6,11,.90) 0%,rgba(3,6,11,.65) 40%,rgba(3,6,11,.22) 70%,rgba(3,6,11,.45) 100%),
 linear-gradient(180deg,rgba(3,6,11,.55) 0%,transparent 30%,rgba(3,6,11,.15) 60%,#03060b 100%)}
.hero__depth{position:absolute;width:min(58vw,860px);aspect-ratio:1;right:-5vw;top:7vh;pointer-events:none;opacity:.65}
.depth-ring{position:absolute;border-radius:50%;border:1px solid rgba(103,207,255,.22)}
.depth-ring--1{inset:8%;box-shadow:0 0 40px rgba(103,207,255,.12)}
.depth-ring--2{inset:20%;border-color:rgba(148,119,255,.24);border-style:dashed}
.depth-ring--3{inset:32%;border-color:rgba(167,232,255,.18)}
.depth-flare{position:absolute;inset:40%;border-radius:50%;background:radial-gradient(circle,rgba(103,207,255,.3),transparent 70%);filter:blur(18px)}
.depth-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--veyl);box-shadow:0 0 18px var(--veyl)}
.depth-particle--1{left:18%;top:34%}.depth-particle--2{right:13%;top:56%;width:4px;height:4px}.depth-particle--3{right:35%;bottom:12%;width:5px;height:5px}

.hero__inner{min-height:100svh;position:relative;z-index:2;padding-top:calc(var(--header-h) + 46px);padding-bottom:28px;display:flex;flex-direction:column}
.hero__status{display:flex;justify-content:space-between;color:#4e7184;font-size:.52rem;font-weight:800;letter-spacing:.14em}
.hero__status span:first-child{display:flex;gap:8px;align-items:center}
.hero__status i{width:5px;height:5px;border-radius:50%;background:var(--veyl);box-shadow:0 0 14px var(--veyl)}
.hero__copy{width:min(720px,70%);margin:auto 0;padding-block:55px}
.hero__signal{display:grid;gap:7px;color:#5e8498;font-size:.57rem;font-weight:800;letter-spacing:.14em}
.hero__signal b{color:#91b9ca}
.hero__logo{width:fit-content;margin:28px 0 0;display:grid;line-height:1}
.hero__logo>span{
  font-family:var(--font-display);font-size:clamp(6rem,13.5vw,13.5rem);font-weight:600;letter-spacing:-.065em;color:transparent;
  background:linear-gradient(180deg,#f6fbff,#b6c9d5 48%,#6f8492);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(103,207,255,.1))
}
.hero__logo small{margin-top:14px;padding-top:12px;border-top:1px solid rgba(103,207,255,.3);color:#8badbd;font-size:clamp(.62rem,1.2vw,.88rem);font-weight:800;letter-spacing:.34em;padding-left:.34em;text-align:center}
.hero__tagline{margin:35px 0 0;color:#aab9c5;font-family:var(--font-display);font-size:clamp(1.7rem,3.1vw,3.3rem);line-height:1.12;letter-spacing:-.025em}
.hero__tagline strong{color:#e8f5fb;font-weight:500}
.hero__intro{max-width:640px;margin:24px 0 0;color:#8298a8;font-size:.94rem;line-height:1.78}
.hero__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.hero__telemetry{display:grid;grid-template-columns:repeat(4,1fr);width:min(700px,66%);border-top:1px solid var(--line)}
.hero__telemetry div{min-height:68px;padding:18px 16px 0 0;display:grid;gap:6px;border-right:1px solid var(--line)}
.hero__telemetry div:not(:first-child){padding-left:16px}.hero__telemetry div:last-child{border-right:0}
.hero__telemetry small{color:#456a7e;font-size:.48rem;font-weight:800;letter-spacing:.14em}
.hero__telemetry strong{color:#9eb9c6;font-size:.66rem;letter-spacing:.10em}
.hero__scroll{position:absolute;right:0;bottom:30px;display:flex;gap:12px;color:#4d7589;font-size:.52rem;font-weight:800;letter-spacing:.16em}
.hero__scroll i{font-style:normal;animation:scrollCue 1.8s ease-in-out infinite}

/* =========================================================
   PRIME CORE — LAYERED PLANETARY INSPECTOR
   ========================================================= */
.core-inspector {
  padding-block: clamp(90px, 11vw, 150px);
  background: #03060b;
  position: relative;
  overflow: hidden;
}
.core-inspector__head {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 50px;
}
.core-inspector__head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 14px 0 18px;
}
.core-inspector__head p {
  color: #849dac;
  font-size: 0.95rem;
  line-height: 1.75;
}

.core-inspector__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(35px, 6vw, 80px);
  align-items: center;
}

/* Layered Sphere Stage */
.core-stage-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.core-sphere-stage {
  width: min(88vw, 480px);
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.core-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.core-layer.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.core-layer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 0 35px rgba(103, 207, 255, 0.3));
}
.core-layer__aura {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(28px);
  opacity: 0.45;
}
.aura--prime { background: radial-gradient(circle, #67cfff, #9477ff 50%, transparent 70%); }
.aura--mantle { background: radial-gradient(circle, #00f0ff, #0a1f33 60%, transparent 75%); }
.aura--earth { background: radial-gradient(circle, rgba(103, 207, 255, 0.6), rgba(20, 50, 90, 0.4) 60%, transparent 75%); }
.aura--anchor { background: radial-gradient(circle, #9477ff, #030812 60%, transparent 75%); }

/* Wireframe & Reticle HUD */
.core-sphere__hud {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
}
.sphere-reticle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(103, 207, 255, 0.18);
}
.reticle--outer { inset: 0; border-style: dashed; animation: rotateSlow 40s linear infinite; }
.reticle--inner { inset: 8%; border-color: rgba(103, 207, 255, 0.12); }
.sphere-scanline {
  position: absolute;
  left: 0; right: 0; top: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, #67cfff, transparent);
  box-shadow: 0 0 10px #67cfff;
  opacity: 0.6;
}
.hud-tag {
  position: absolute;
  font-family: monospace;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #5b879b;
}
.hud-tag--top { top: -24px; left: 50%; transform: translateX(-50%); }
.hud-tag--bot { bottom: -24px; left: 50%; transform: translateX(-50%); }
.hud-tag b { color: #8fd5ee; }

/* Navigation Arrows on Sphere */
.core-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(3, 8, 14, 0.85);
  border: 1px solid rgba(103, 207, 255, 0.35);
  color: #dcf2ff;
  font-size: 1.6rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.core-nav-btn:hover {
  background: rgba(103, 207, 255, 0.2);
  border-color: #67cfff;
  transform: translateY(-50%) scale(1.1);
}
.core-nav-btn--prev { left: -22px; }
.core-nav-btn--next { right: -22px; }

.core-scroll-hint {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #4e7385;
}

/* Layer Info Dossier */
.core-inspector__info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.core-layer-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-bottom: 1px solid rgba(103, 207, 255, 0.16);
  padding-bottom: 12px;
}
.core-tab {
  background: rgba(3, 8, 14, 0.6);
  border: 1px solid rgba(103, 207, 255, 0.14);
  padding: 10px 8px;
  color: #6b8899;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: grid;
  gap: 3px;
  text-align: center;
  transition: all 0.25s ease;
}
.core-tab span { font-size: 0.42rem; color: #436475; }
.core-tab:hover {
  color: #c2e8f8;
  border-color: rgba(103, 207, 255, 0.4);
  background: rgba(103, 207, 255, 0.05);
}
.core-tab.is-active {
  color: #fff;
  border-color: #67cfff;
  background: linear-gradient(180deg, rgba(103, 207, 255, 0.14), rgba(3, 8, 14, 0.8));
  box-shadow: 0 0 16px rgba(103, 207, 255, 0.15);
}

.core-layer-content {
  background: rgba(3, 8, 14, 0.8);
  border: 1px solid rgba(103, 207, 255, 0.18);
  backdrop-filter: blur(16px);
  border-radius: 4px;
  padding: 30px;
}
.core-layer-badge {
  color: #67cfff;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.core-layer-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.core-layer-content p {
  color: #9ab0bf;
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 24px;
}
.core-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border-top: 1px solid rgba(103, 207, 255, 0.14);
  padding-top: 18px;
}
.core-telemetry-grid div {
  display: grid;
  gap: 4px;
}
.core-telemetry-grid small {
  color: #4f7587;
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.core-telemetry-grid strong {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}


/* =========================================================
   HİKÂYE // VEYLCORE MULTI-FRAME TACTICAL DOSSIER CONSOLE
   (REFERENCE INSPIRED BENTO DASHBOARD)
   ========================================================= */
.story-console {
  padding-block: clamp(90px, 11vw, 150px);
  background: #020407;
  position: relative;
}
.story-console__header {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 35px;
}
.story-console__title-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 12px 0 0;
}
.story-console__header p {
  color: #829bad;
  font-size: 0.92rem;
  line-height: 1.75;
}

/* Quick Chapter Selector Strip */
.story-chapter-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 30px;
  scrollbar-width: thin;
}
.strip-btn {
  flex: 1;
  min-width: 130px;
  background: rgba(3, 8, 14, 0.65);
  border: 1px solid rgba(103, 207, 255, 0.14);
  padding: 10px 12px;
  color: #6a8899;
  font-size: 0.50rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: grid;
  gap: 3px;
  text-align: left;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.strip-btn span { font-size: 0.40rem; color: #436778; }
.strip-btn:hover {
  color: #d1effc;
  border-color: rgba(103, 207, 255, 0.35);
  background: rgba(103, 207, 255, 0.05);
}
.strip-btn.is-active {
  color: #fff;
  border-color: #67cfff;
  background: linear-gradient(180deg, rgba(103, 207, 255, 0.14), rgba(3, 8, 14, 0.9));
  box-shadow: 0 0 16px rgba(103, 207, 255, 0.15);
}

/* Bento / Tactical Multi-Frame Dashboard */
.story-dashboard {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}

/* Base Frame Styling with Reference-Style Cyber Cutouts & 1px Borders */
.dash-frame {
  background: rgba(3, 8, 14, 0.85);
  border: 1px solid rgba(103, 207, 255, 0.18);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
}
.dash-frame:hover {
  border-color: rgba(103, 207, 255, 0.35);
}
.dash-frame__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(103, 207, 255, 0.12);
  background: rgba(103, 207, 255, 0.02);
}
.frame-tag {
  color: #557e92;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.frame-coords, .frame-index {
  color: #4b6f82;
  font-size: 0.44rem;
  font-family: monospace;
  letter-spacing: 0.12em;
}

/* FRAME 1: Celestial Sphere (Left Box - Spans 2 Rows) */
.dash-frame--planet {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
}
.dash-planet-stage {
  flex: 1;
  min-height: 330px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 24px;
}
.dash-planet-orb {
  width: min(70vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 50px rgba(103, 207, 255, 0.25);
}
.dash-planet__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.dash-planet__grid-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(103, 207, 255, 0.22);
  pointer-events: none;
  animation: rotateSlow 35s linear infinite;
}

.dash-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(3, 8, 14, 0.88);
  border: 1px solid rgba(103, 207, 255, 0.3);
  color: #e1f4ff;
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
}
.dash-nav-btn:hover {
  background: rgba(103, 207, 255, 0.25);
  border-color: #67cfff;
  transform: translateY(-50%) scale(1.1);
}
.dash-nav-btn--prev { left: 14px; }
.dash-nav-btn--next { right: 14px; }

.dash-planet-footer {
  padding: 20px;
  border-top: 1px solid rgba(103, 207, 255, 0.12);
}
.dash-planet-telemetry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.dash-planet-telemetry small {
  color: #4a7082;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.dash-planet-telemetry strong {
  color: #92b8c9;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
.dash-planet-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 24px rgba(103, 207, 255, 0.35);
}

/* FRAME 2: Wide Anamorphic Event Frame (Top Right - Spans 2 Cols) */
.dash-frame--wide {
  grid-column: 2 / 4;
  grid-row: 1;
}
.dash-cinema-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  margin: 14px;
  width: calc(100% - 28px);
  border: 1px solid rgba(103, 207, 255, 0.22);
}
.dash-cinema__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) contrast(1.15);
  transition: transform 0.6s ease, opacity 0.4s ease;
}
.dash-cinema__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 8, 14, 0.15) 0%, rgba(3, 8, 14, 0.7) 100%);
  pointer-events: none;
}
.dash-cinema__scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.3) 3px, rgba(0,0,0,0.3) 4px);
  opacity: 0.4;
}

/* FRAME 3: Tactical Focal Frame (Bottom Center) */
.dash-frame--tactical {
  grid-column: 2;
  grid-row: 2;
}
.dash-tactical-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  margin: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  border: 1px solid rgba(103, 207, 255, 0.2);
}
.dash-tactical__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s ease;
}
.dash-tactical__glow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 30px rgba(103, 207, 255, 0.25);
  pointer-events: none;
}

/* FRAME 4: Classified Lore Dossier (Bottom Right) */
.dash-frame--lore {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}
.dash-lore-body {
  padding: 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-lore-body h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: #e5f6ff;
  letter-spacing: -0.01em;
}
.dash-lore-body p {
  color: #8fa7b7;
  font-size: 0.82rem;
  line-height: 1.68;
  margin: 0;
}
.dash-lore-meta {
  padding: 14px 20px;
  border-top: 1px solid rgba(103, 207, 255, 0.12);
  display: grid;
  gap: 6px;
  background: rgba(103, 207, 255, 0.02);
}
.dash-lore-meta small {
  color: #4a6e80;
  font-size: 0.40rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.dash-lore-meta strong {
  font-size: 0.60rem;
  letter-spacing: 0.06em;
}

/* Keyframes */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.text-cyan { color: #67cfff !important; text-shadow: 0 0 10px rgba(103,207,255,0.5); }
.text-purple { color: #a78bfa !important; text-shadow: 0 0 10px rgba(167,139,250,0.5); }
.text-blue { color: #60a5fa !important; text-shadow: 0 0 10px rgba(96,165,250,0.5); }
.text-orange { color: #fb923c !important; text-shadow: 0 0 10px rgba(251,146,60,0.5); }
.text-silver { color: #e2e8f0 !important; text-shadow: 0 0 10px rgba(226,232,240,0.5); }
.text-gold { color: #facc15 !important; text-shadow: 0 0 10px rgba(250,204,21,0.5); }
.text-crimson { color: #f43f5e !important; text-shadow: 0 0 10px rgba(244,63,94,0.5); }

/* Class selector */
.class-showcase{padding-block:clamp(110px,13vw,185px);background:#06101a}
.class-showcase__head{max-width:900px}
.class-showcase__head p{color:#758d9c;line-height:1.8}

.classes-hero-title {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  margin: 0 0 20px;
  text-align: left;
}
.classes-hero-title__num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8.5vw, 8.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #a2e2ff 45%, #4fa3d1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(103, 207, 255, 0.35));
}
.classes-hero-title__stacked {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.classes-hero-title__top,
.classes-hero-title__bot {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}
.classes-hero-title__top {
  color: #ffffff;
}
.classes-hero-title__bot {
  color: #8bb1c7;
}

.class-selector{margin-top:50px;display:grid;grid-template-columns:270px 1fr;min-height:720px;border:1px solid var(--line);background:#040910}
.class-tabs{display:flex;flex-direction:column;border-right:1px solid var(--line);background:#050a10}
.class-tab{
  min-height:82px;padding:0 14px;display:flex;align-items:center;gap:10px;text-align:left;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:#6a8392;font-size:0.50rem;font-weight:800;letter-spacing:0.04em;cursor:pointer;
  white-space:nowrap;word-break:keep-all;overflow:hidden;
  transition:background .2s,color .2s,padding .25s var(--ease-out)
}
.class-tab span{color:#395a6a;font-size:.44rem;min-width:18px;flex-shrink:0}
.class-tab[data-class="greatsword"],
.class-tab[data-class="shield"]{font-size:0.47rem;letter-spacing:0.02em}
.class-tab:hover{padding-left:18px;color:#a9d9eb;background:rgba(103,207,255,.025)}
.class-tab.is-active{color:#ddf5ff;background:linear-gradient(90deg,rgba(103,207,255,.08),transparent);box-shadow:inset 2px 0 0 var(--veyl)}

/* Language Switcher */
.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-btn {
  background: rgba(3, 8, 14, 0.75);
  border: 1px solid rgba(103, 207, 255, 0.28);
  padding: 8px 12px;
  color: #c2e4f5;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 2px;
  transition: all 0.25s ease;
}
.lang-btn:hover {
  border-color: #67cfff;
  background: rgba(103, 207, 255, 0.12);
  color: #fff;
  box-shadow: 0 0 14px rgba(103, 207, 255, 0.2);
}
.lang-icon { font-size: 0.75rem; }
.lang-arrow { font-size: 0.6rem; color: #588094; transition: transform 0.2s ease; }
.lang-btn[aria-expanded="true"] .lang-arrow { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 150px;
  background: rgba(4, 8, 15, 0.95);
  border: 1px solid rgba(103, 207, 255, 0.3);
  backdrop-filter: blur(16px);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(103, 207, 255, 0.1);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.lang-dropdown.is-open {
  display: flex;
}
.lang-opt {
  background: transparent;
  border: 0;
  padding: 8px 10px;
  color: #7e9bb0;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.lang-opt span { font-size: 0.75rem; }
.lang-opt:hover {
  color: #fff;
  background: rgba(103, 207, 255, 0.12);
  padding-left: 14px;
}
.lang-opt.is-active {
  color: #67cfff;
  background: rgba(103, 207, 255, 0.18);
  font-weight: 800;
  box-shadow: inset 2px 0 0 #67cfff;
}

.class-stage{--class-accent:#67cfff;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:580px;overflow:hidden;background:
 radial-gradient(circle at 34% 46%,color-mix(in srgb,var(--class-accent) 12%,transparent),transparent 28%),
 linear-gradient(145deg,#07111b,#04080e)}
.class-stage[data-current="fan"],.class-stage[data-current="twin"]{--class-accent:#9477ff}
.class-stage[data-current="staff"],.class-stage[data-current="hammer"]{--class-accent:#ff9c64}
.class-stage[data-current="greatsword"],.class-stage[data-current="shield"]{--class-accent:#bcc8d4}
.class-stage[data-current="archer"]{--class-accent:#71d5ad}
.class-stage__fx{position:absolute;inset:0;pointer-events:none}
.class-stage__ring{position:absolute;width:440px;aspect-ratio:1;left:12%;top:50%;transform:translateY(-50%);border-radius:50%;border:1px solid color-mix(in srgb,var(--class-accent) 23%,transparent);box-shadow:0 0 60px color-mix(in srgb,var(--class-accent) 8%,transparent)}
.class-stage__ring::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--class-accent) 18%,transparent)}
.class-stage__energy{position:absolute;width:420px;height:180px;left:10%;top:38%;opacity:.3;background:radial-gradient(ellipse,color-mix(in srgb,var(--class-accent) 25%,transparent),transparent 70%);filter:blur(22px)}
.class-stage__shockwave{position:absolute;width:120px;aspect-ratio:1;left:30%;bottom:12%;border-radius:50%;border:1px solid color-mix(in srgb,var(--class-accent) 45%,transparent);opacity:0;transform:scale(.2)}
.class-stage__lightning{position:absolute;width:2px;height:160px;left:31%;top:22%;background:linear-gradient(transparent,var(--class-accent),transparent);filter:drop-shadow(0 0 8px var(--class-accent));opacity:0}
.lightning--1{transform:rotate(22deg)}.lightning--2{left:38%;top:30%;height:120px;transform:rotate(-18deg)}

/* CLASS PORTRAIT FRAME (PERFECT 50/50 VERTICAL CENTERING) */
.class-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  min-height: 480px;
  display: grid;
  place-items: center;
  place-content: center;
  align-self: center;
  margin: auto;
  padding: 20px 0;
}
.class-portrait-img {
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
  object-position: center center;
  margin: auto;
  display: block;
  filter: drop-shadow(0 0 30px rgba(103, 207, 255, 0.4)) saturate(1.1);
  transition: transform 0.4s ease, opacity 0.3s ease;
  z-index: 2;
}
.class-portrait-glow {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 207, 255, 0.28), rgba(148, 119, 255, 0.10) 50%, transparent 70%);
  filter: blur(28px);
  z-index: 1;
}

.class-stage__gender{position:absolute;left:24px;bottom:24px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--class-accent) 20%,transparent);color:color-mix(in srgb,var(--class-accent) 70%,#93aab7);font-size:.47rem;font-weight:800;letter-spacing:.12em}
.class-info{align-self:center;padding:40px 24px 40px 12px;position:relative;z-index:2;min-width:0;}
.class-info__top{display:flex;justify-content:space-between;gap:18px;color:color-mix(in srgb,var(--class-accent) 72%,#758d9a);font-size:.51rem;font-weight:800;letter-spacing:.12em}
.class-info__top small{color:#4f6876;font-size:.47rem}
.class-info h3{
  margin: 14px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.1vw, 3.1rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.class-info>p{color:#8096a5;line-height:1.78}
.class-signature{margin-top:24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.class-signature small{display:block;color:#486c7d;font-size:.47rem;font-weight:800;letter-spacing:.12em}
.class-signature strong{display:block;margin-top:7px;color:color-mix(in srgb,var(--class-accent) 80%,#d9f3ff);font-family:var(--font-display);font-size:1.05rem;letter-spacing:.04em}
.class-signature p{margin:6px 0 0;color:#627a88;font-size:.74rem;line-height:1.6}
.class-stats{margin-top:20px;display:grid;gap:8px}
.class-stats div{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}.class-stats span{color:#4d6877;font-size:.42rem;font-weight:800;letter-spacing:.08em}
.class-stats i{height:2px;background:rgba(255,255,255,.055)}.class-stats b{display:block;height:100%;background:var(--class-accent);box-shadow:0 0 10px color-mix(in srgb,var(--class-accent) 60%,transparent);transition:width .55s var(--ease-out)}
.class-info__footer{margin-top:22px;display:grid;gap:4px}.class-info__footer span{color:#486674;font-size:.45rem;font-weight:800;letter-spacing:.11em}.class-info__footer strong{color:#9fb8c4;font-size:.62rem;letter-spacing:.09em}

/* Worlds */
.worlds{padding-block:clamp(110px,13vw,185px);background:#07101a}
.worlds__head{display:grid;grid-template-columns:1fr .7fr;gap:70px;align-items:end}.worlds__head p{color:#7c92a1;line-height:1.8}
.world-track{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.world-card{--world:#67cfff;min-height:510px;padding:22px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--world) 12%,transparent),transparent 30%),#080f17;transition:transform .3s var(--ease-out),border-color .3s}
.world-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--world) 36%,transparent)}
.world-card__planet{width:180px;aspect-ratio:1;margin:32px auto 48px;position:relative;border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--world) 65%,#fff) 0 2%,transparent 4%),radial-gradient(circle at 44% 38%,color-mix(in srgb,var(--world) 35%,transparent),transparent 28%),radial-gradient(circle,#16222c,#06090d 72%);box-shadow:inset -25px -18px 38px rgba(0,0,0,.65),0 0 55px color-mix(in srgb,var(--world) 11%,transparent);border:1px solid color-mix(in srgb,var(--world) 20%,transparent)}
.world-card__planet::after{content:"";position:absolute;inset:-12%;border:1px solid color-mix(in srgb,var(--world) 14%,transparent);border-radius:50%;transform:rotate(22deg) scaleY(.32)}
.world-card__planet--unknown{filter:blur(2px);opacity:.6}
.world-card>span{color:color-mix(in srgb,var(--world) 60%,#627888);font-size:.48rem;font-weight:800;letter-spacing:.13em}.world-card h3{margin:10px 0 12px;font-family:var(--font-display);font-size:1.55rem}.world-card p{min-height:90px;color:#6f8594;font-size:.77rem;line-height:1.65}
.world-card>div:last-child{padding-top:15px;display:grid;gap:6px;border-top:1px solid var(--line)}.world-card small{color:#496373;font-size:.45rem;font-weight:800;letter-spacing:.12em}.world-card strong{color:#a9bdc8;font-size:.62rem;letter-spacing:.08em}

/* Media */
.media{padding-block:clamp(110px,13vw,185px);background:#04070c}
.media-grid{margin-top:65px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.media-card{border:1px solid var(--line);background:#07101a;overflow:hidden;transition:transform .3s var(--ease-out),border-color .3s}
.media-card:hover{transform:translateY(-6px);border-color:rgba(103,207,255,.25)}
.media-card__placeholder{min-height:340px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 50%,rgba(103,207,255,.14),transparent 18%),radial-gradient(circle at 50% 50%,transparent 23%,rgba(103,207,255,.25) 24%,transparent 25%),radial-gradient(circle at 50% 50%,rgba(148,119,255,.12),transparent 43%),#050b12}
.media-card:not(.media-card--large) .media-card__placeholder{min-height:250px}
.media-card__placeholder--portal::after{content:"";width:120px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(103,207,255,.28);box-shadow:0 0 35px rgba(103,207,255,.16)}
.media-card__placeholder--anchor::after{content:"";width:55px;height:150px;clip-path:polygon(50% 0,100% 22%,76% 100%,24% 100%,0 22%);background:linear-gradient(90deg,#172838,#7ba3b6,#162533);box-shadow:0 0 35px rgba(103,207,255,.14)}
.play-button{width:64px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(103,207,255,.28);color:#aee9ff;background:rgba(4,10,16,.55);padding-left:4px}
.media-card>div:last-child{padding:22px}.media-card small{color:#4f7181;font-size:.47rem;font-weight:800;letter-spacing:.13em}.media-card h3{margin:12px 0 8px;font-family:var(--font-display);font-size:1.2rem;font-weight:500}.media-card>div:last-child>span{color:#526c79;font-size:.48rem;font-weight:800;letter-spacing:.11em}

/* Final/footer */
.final-cta{min-height:860px;position:relative;display:grid;place-items:center;overflow:hidden;text-align:center;background:#03060a}
.final-cta__glow{width:min(68vw,850px);aspect-ratio:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:.18;background:radial-gradient(circle,transparent 0 29%,#67cfff 30%,transparent 32%),radial-gradient(circle,rgba(148,119,255,.42),transparent 60%);filter:blur(20px)}
.final-cta__inner{position:relative;z-index:2;display:grid;justify-items:center}.final-cta__logo{margin:15px 0 45px;display:grid}.final-cta__logo strong{font-family:var(--font-display);font-size:clamp(5rem,12vw,11rem);font-weight:600;line-height:.9;letter-spacing:-.06em;color:transparent;background:linear-gradient(180deg,#fff,#8196a5);-webkit-background-clip:text;background-clip:text}.final-cta__logo small{margin-top:15px;padding-top:12px;border-top:1px solid rgba(103,207,255,.28);color:#779eaf;font-size:.62rem;font-weight:800;letter-spacing:.3em;padding-left:.3em}.final-cta__inner>p{margin:18px 0 0;color:#466473;font-size:.63rem}
.footer{padding-block:56px;border-top:1px solid var(--line);background:#020407}.footer__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:35px;align-items:start}.footer__game{display:grid;line-height:1}.footer__game strong{font-family:var(--font-display);font-size:1rem;letter-spacing:.12em}.footer__game small{margin-top:5px;color:#4c6b7a;font-size:.42rem;font-weight:800;letter-spacing:.22em}.footer__nav{display:flex;gap:19px;color:#597080;font-size:.55rem;font-weight:700}.footer__nav a:hover{color:#bfeaff}.footer__studio{justify-self:end;display:grid;gap:6px;text-align:right}.footer__studio span{color:#445965;font-size:.43rem;font-weight:800;letter-spacing:.13em}.footer__studio strong{color:#7f95a1;font-size:.62rem;letter-spacing:.1em}.footer__legal{grid-column:1/-1;margin-top:30px;padding-top:20px;display:flex;justify-content:space-between;border-top:1px solid rgba(103,207,255,.07);color:#354b56;font-size:.43rem;font-weight:700;letter-spacing:.1em}

/* Motion fallback */
.motion-reveal{opacity:1;transform:none}
.js-motion .motion-reveal{opacity:0;transform:translateY(24px)}

/* Keyframes */
@keyframes scrollCue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(.92);opacity:.25}50%{transform:scale(1.1);opacity:.8}}

/* Responsive */
@media(max-width:1100px){
  .header__inner{grid-template-columns:1fr auto auto}
  .nav{display:none;position:fixed;inset:var(--header-h) 0 0;padding:38px 28px;flex-direction:column;align-items:flex-start;gap:27px;background:rgba(4,7,12,.98);border-top:1px solid var(--line)}
  .nav.is-open{display:flex}.nav a{font-size:.78rem}.menu-toggle{display:block}
  .hero__copy{width:76%}.hero__telemetry{width:76%}
  .core-inspector__grid{grid-template-columns:1fr;gap:40px}
  .story-dashboard{grid-template-columns:1fr 1fr}
  .dash-frame--planet{grid-column:1/-1;grid-row:auto}
  .dash-frame--wide{grid-column:1/-1;grid-row:auto}
  .dash-frame--tactical{grid-column:1;grid-row:auto}
  .dash-frame--lore{grid-column:2;grid-row:auto}
  .class-selector{grid-template-columns:230px 1fr}.class-stage{grid-template-columns:.9fr 1.1fr}.class-avatar{transform:scale(.86)}
  .world-track{grid-template-columns:repeat(2,1fr)}
  .media-grid{grid-template-columns:1fr 1fr}.media-card--large{grid-column:1/-1}
}
@media(max-width:820px){
  .wishlist--header{display:none}.hero__copy{width:100%}.hero__logo>span{font-size:clamp(5.5rem,25vw,9rem)}.hero__telemetry{width:100%}.hero__scroll{display:none}
  
  .story-console__header{grid-template-columns:1fr;gap:20px}
  .story-dashboard{grid-template-columns:1fr}
  .dash-frame--planet, .dash-frame--wide, .dash-frame--tactical, .dash-frame--lore{grid-column:1;grid-row:auto}
  
  .core-layer-tabs{grid-template-columns:repeat(2,1fr)}
  
  .class-selector{grid-template-columns:1fr}.class-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.class-tab{min-width:165px;padding:0 12px;font-size:0.48rem;border-bottom:0;border-right:1px solid var(--line)}
  .class-stage{grid-template-columns:1fr;min-height:980px}.class-info{padding:25px 28px 48px}.class-stage__ring{left:50%;transform:translate(-50%,-50%)}.class-stage__energy{left:50%;transform:translateX(-50%)}.class-stage__gender{top:485px;bottom:auto}
  .worlds__head{grid-template-columns:1fr}.media-grid{grid-template-columns:1fr}.media-card--large{grid-column:auto}
  .footer__grid{grid-template-columns:1fr}.footer__studio{justify-self:start;text-align:left}.footer__nav{flex-wrap:wrap}.footer__legal{grid-column:1;flex-direction:column;gap:8px}
}
@media(max-width:580px){
  .game-brand__sub{display:none}.hero__status span:last-child{display:none}.hero__telemetry{grid-template-columns:1fr 1fr}.hero__telemetry div:nth-child(2){border-right:0}.hero__telemetry div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hero__actions{flex-direction:column}.hero__actions .btn{width:100%}
  .core-inspector__head h2{font-size:clamp(2.2rem,8vw,3.2rem)}
  .core-telemetry-grid{grid-template-columns:1fr}
  .core-sphere-stage{width:min(92vw,340px)}
  .dash-planet-telemetry{grid-template-columns:1fr}
  .dash-cinema-wrap{aspect-ratio:16/9}
  .class-stage{min-height:940px}.class-stage__gender{top:430px}
  .class-info h3{font-size:clamp(1.7rem, 6.8vw, 2.3rem); white-space:nowrap;}
  .world-track{grid-template-columns:1fr}.media-card__placeholder,.media-card:not(.media-card--large) .media-card__placeholder{min-height:260px}.final-cta{min-height:720px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .cursor-aura{display:none}.js-motion .motion-reveal{opacity:1!important;transform:none!important}
}


/* =========================================================
   PHASE 05 — SIGNATURE CANVAS IMAGE SEQUENCE
   ========================================================= */
.cinematic{
  height:700vh;
  position:relative;
  background:#020407;
}
.cinematic__pin{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  background:#020407;
}
.cinematic__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#020407;
}
.cinematic__shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,4,7,.88) 0%,rgba(2,4,7,.48) 42%,rgba(2,4,7,.12) 72%,rgba(2,4,7,.38) 100%),
    linear-gradient(180deg,rgba(2,4,7,.50),transparent 25%,rgba(2,4,7,.12) 62%,#020407 100%);
}
.sequence-loader{
  position:absolute;
  z-index:8;
  left:50%;
  top:50%;
  width:min(420px,calc(100vw - 56px));
  transform:translate(-50%,-50%);
  display:grid;
  gap:11px;
  transition:opacity .4s ease,visibility .4s ease;
}
.sequence-loader.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.sequence-loader__bar{height:2px;background:rgba(103,207,255,.10);overflow:hidden}
.sequence-loader__bar span{display:block;width:0;height:100%;background:var(--gradient-veyl);box-shadow:0 0 16px rgba(103,207,255,.5)}
.sequence-loader>span{color:#7396a8;font-size:.5rem;font-weight:800;letter-spacing:.14em;text-align:center}
.cinematic__ui{
  min-height:100svh;
  position:relative;
  z-index:4;
  padding-top:calc(var(--header-h) + 32px);
  padding-bottom:26px;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.cinematic__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:18px;
  border-bottom:1px solid rgba(103,207,255,.12);
  color:#567c8f;
}
.cinematic__header>div:first-child{display:grid;gap:7px}
.cinematic__header>div:first-child>strong{color:#91b6c6;font-size:.57rem;letter-spacing:.12em}
.cinematic__frame{text-align:right;display:grid;gap:5px}
.cinematic__frame small{font-size:.44rem;font-weight:800;letter-spacing:.12em}
.cinematic__frame strong{color:#94c9dc;font-family:var(--font-display);font-size:.86rem}
.cinematic__copy{
  width:min(620px,52vw);
  min-height:350px;
  margin-top:auto;
  margin-bottom:92px;
  position:relative;
}
.cinematic-beat{
  position:absolute;
  left:0;
  bottom:0;
  opacity:0;
  transform:translateY(20px);
}
.cinematic-beat.is-active{opacity:1;transform:none}
.cinematic-beat small{color:#5b8497;font-size:.52rem;font-weight:800;letter-spacing:.14em}
.cinematic-beat h2{
  margin:13px 0 17px;
  font-family:var(--font-display);
  font-size:clamp(3.2rem,6.3vw,6.8rem);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.05em;
}
.cinematic-beat p{
  max-width:560px;
  color:#90a6b5;
  line-height:1.76;
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}
.cinematic__hud{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(103,207,255,.14);
}
.cinematic__hud div{
  min-height:65px;
  padding:14px 15px 0 0;
  display:grid;
  gap:6px;
  border-right:1px solid rgba(103,207,255,.10);
}
.cinematic__hud div:not(:first-child){padding-left:15px}
.cinematic__hud div:last-child{border-right:0}
.cinematic__hud small{color:#436b7e;font-size:.43rem;font-weight:800;letter-spacing:.12em}
.cinematic__hud strong{color:#a2c7d7;font-size:.60rem;letter-spacing:.09em}
.cinematic__progress{
  height:2px;
  background:rgba(103,207,255,.06);
}
.cinematic__progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--gradient-veyl);
  box-shadow:0 0 18px rgba(103,207,255,.5);
}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

@media(max-width:820px){
  .cinematic{
    height:520vh;
  }
  .cinematic__shade{
    background:
      linear-gradient(180deg,rgba(2,4,7,.55),rgba(2,4,7,.06) 35%,rgba(2,4,7,.74) 72%,#020407 100%);
  }
  .cinematic__copy{
    width:100%;
    min-height:310px;
    margin-bottom:105px;
  }
  .cinematic-beat h2{
    font-size:clamp(2.8rem,13vw,5rem);
  }
  .cinematic__hud{
    grid-template-columns:1fr 1fr;
  }
  .cinematic__hud div:nth-child(2){border-right:0}
  .cinematic__hud div:nth-child(-n+2){border-bottom:1px solid rgba(103,207,255,.10)}
}
@media(max-width:560px){
  .cinematic__header>div:first-child>strong{display:none}
  .cinematic__copy{margin-bottom:150px}
  .cinematic__hud div{min-height:54px;padding-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .cinematic{height:auto;min-height:100svh}
  .cinematic__pin{min-height:100svh}
  .sequence-loader{display:none}
}

/* =========================================================
   DOMAIN LINKER & ENHANCEMENT STYLES (PLAYVEYL / NYTHRAGAMES)
   ========================================================= */
.domain-bar {
  background: rgba(3, 8, 14, 0.94);
  border-bottom: 1px solid rgba(103, 207, 255, 0.18);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding-block: 6px;
  position: relative;
  z-index: 100;
}
.domain-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.domain-bar__badge {
  color: #5c8599;
}
.domain-bar__links {
  display: flex;
  gap: 12px;
  align-items: center;
}
.domain-bar__links a {
  color: #799cb0;
  transition: color 0.2s;
}
.domain-bar__links a.domain-bar__active {
  color: #67cfff;
  font-weight: 800;
}
.domain-bar__links a:hover {
  color: #fff;
}
.domain-bar__sep {
  color: rgba(103, 207, 255, 0.2);
}

.nav-highlight {
  color: #67cfff !important;
  font-weight: 800 !important;
  border: 1px solid rgba(103, 207, 255, 0.3);
  padding: 4px 10px;
  border-radius: 2px;
  background: rgba(103, 207, 255, 0.06);
}
.btn--studio {
  background: rgba(148, 119, 255, 0.12);
  border-color: rgba(148, 119, 255, 0.35);
  color: #d1c4ff;
}
.btn--studio:hover {
  background: rgba(148, 119, 255, 0.25);
  color: #fff;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* CLASS PORTRAIT FRAME */
.class-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.class-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(103, 207, 255, 0.35)) saturate(1.1);
  transition: transform 0.4s ease, opacity 0.3s ease;
  z-index: 2;
}
.class-portrait-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 207, 255, 0.25), rgba(148, 119, 255, 0.08) 50%, transparent 70%);
  filter: blur(24px);
  z-index: 1;
}

/* SEAL BREAKER SIMULATOR */
.simulator {
  padding-block: clamp(90px, 11vw, 150px);
  background: #03060b;
}
.simulator__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 50px;
}
.simulator__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 6vw, 70px);
  align-items: center;
}
.simulator__visual {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(103, 207, 255, 0.22);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
.simulator__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease, filter 0.8s ease;
}
.simulator__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,6,11,0.3), rgba(3,6,11,0.85));
}
.simulator__hud {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: rgba(3, 6, 11, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(103, 207, 255, 0.16);
  padding: 12px;
}
.hud-item {
  display: grid;
  gap: 4px;
}
.hud-item small {
  color: #4f7487;
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.hud-item strong {
  color: #9cd5eb;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.threat-low { color: #67ffaa !important; }
.threat-high { color: #ffaa44 !important; }
.threat-omega { color: #ff4466 !important; text-shadow: 0 0 12px #ff4466; }

.simulator__boss {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: grid;
  gap: 6px;
}
.boss-badge {
  color: #ff6e8a;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.simulator__boss h3 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: -0.02em;
}

.simulator__controls {
  display: grid;
  gap: 20px;
}
.control-kicker {
  color: #557b8e;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.seals-list {
  display: grid;
  gap: 12px;
}
.seal-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(8, 16, 26, 0.6);
  border: 1px solid rgba(103, 207, 255, 0.16);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease;
}
.seal-btn:hover {
  border-color: rgba(103, 207, 255, 0.4);
  background: rgba(103, 207, 255, 0.06);
}
.seal-btn.is-broken {
  border-color: rgba(255, 80, 100, 0.45);
  background: rgba(255, 40, 60, 0.08);
}
.seal-btn.is-broken .seal-status {
  color: #ff5270;
}
.seal-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #67cfff;
}
.seal-info {
  display: grid;
  gap: 4px;
  flex: 1;
}
.seal-info strong {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.seal-info small {
  color: #728c9c;
  font-size: 0.58rem;
}
.seal-status {
  color: #5c8599;
  font-size: 0.50rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.simulator__actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

/* WORLD GRID */
.world-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.world-card {
  background: rgba(6, 12, 20, 0.7);
  border: 1px solid rgba(103, 207, 255, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.world-card:hover {
  border-color: rgba(103, 207, 255, 0.4);
  transform: translateY(-4px);
}
.world-card__img-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.world-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.world-card:hover .world-card__img {
  transform: scale(1.05);
}
.world-card__body {
  padding: 24px;
  display: grid;
  gap: 10px;
}
.world-card__body span {
  color: #52798c;
  font-size: 0.50rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.world-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin: 0;
  letter-spacing: -0.02em;
}
.world-card__body p {
  color: #859dae;
  font-size: 0.88rem;
  line-height: 1.6;
}
.world-card__meta {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(103, 207, 255, 0.12);
}
.world-card__meta small {
  color: #4a6c7e;
  font-size: 0.46rem;
  font-weight: 800;
}
.world-card__meta strong {
  color: #8acfe5;
  font-size: 0.62rem;
}

/* NUL SECTION */
.nul-section {
  padding-block: clamp(100px, 12vw, 160px);
  background: #020407;
}
.nul-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 90px);
  align-items: center;
}
.nul__visual {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(148, 119, 255, 0.25);
}
.nul__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nul__glow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgba(148, 119, 255, 0.2);
  pointer-events: none;
}
.nul__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  margin: 10px 0 20px;
  color: transparent;
  background: linear-gradient(180deg, #ffffff, #a291ff);
  -webkit-background-clip: text;
  background-clip: text;
}
.nul__copy p {
  color: #879cb0;
  line-height: 1.8;
}
.nul__stats {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 119, 255, 0.2);
}
.nul__stats div {
  display: grid;
  gap: 4px;
}
.nul__stats small {
  color: #605c87;
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.nul__stats strong {
  color: #c1b3ff;
  font-size: 0.62rem;
}

@media(max-width: 920px) {
  .simulator__grid, .world-grid, .nul-grid {
    grid-template-columns: 1fr;
  }
}