/* ================= THE ARKHELION GATE ================= */
  body.gate-locked{ overflow:hidden; height:100vh; }
  body.gate-frozen *{ animation-play-state:paused !important; }

  .gate-pulse{
    position:fixed; inset:0; z-index:299; pointer-events:none; opacity:0;
    background:radial-gradient(circle at 50% 50%, rgba(157,92,255,.55) 0%, rgba(214,182,115,.28) 32%, transparent 68%);
    transition:opacity .55s ease, transform 1.3s cubic-bezier(.16,1,.3,1);
    transform:scale(.25);
  }
  .gate-pulse.show{ opacity:1; transform:scale(1); }

  body.gate-shaking > *:not(#gate-overlay):not(script){
    animation:gate-shake .45s ease-in-out infinite;
    filter:blur(1.5px) saturate(1.35) contrast(1.08);
    transition:filter .5s ease;
  }
  body.gate-settle > *:not(#gate-overlay):not(script){
    filter:blur(0px) saturate(1) contrast(1);
    transition:filter 1.1s ease;
  }
  @keyframes gate-shake{
    0%,100%{ transform:translate(0,0); }
    25%{ transform:translate(0.6px,-0.8px); }
    50%{ transform:translate(-0.7px,0.6px); }
    75%{ transform:translate(0.5px,0.7px); }
  }

  .gate-overlay{
    position:fixed; inset:0; z-index:300; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .6s ease;
  }
  .gate-overlay.active{ opacity:1; pointer-events:auto; }

  .gate-dim{
    position:absolute; inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(14,6,26,.75), rgba(2,1,6,.97) 78%);
    backdrop-filter:blur(3px);
  }

  .gate-chroma{ position:absolute; inset:0; mix-blend-mode:screen; opacity:0; pointer-events:none; }
  .gate-chroma.cr{ background:rgba(255,25,90,.05); transform:translateX(-3px); }
  .gate-chroma.cb{ background:rgba(30,150,255,.05); transform:translateX(3px); }
  .gate-overlay.phase-distort .gate-chroma{ opacity:1; animation:chroma-flicker .5s steps(2) infinite; }
  @keyframes chroma-flicker{ 0%,100%{ opacity:.35; } 50%{ opacity:.85; } }

  .gate-converge{
    position:absolute; inset:0; opacity:0; pointer-events:none;
    background:repeating-conic-gradient(from 0deg, transparent 0deg 6deg, rgba(157,92,255,.08) 6deg 7deg);
    transform:scale(1.6);
    transition:opacity .6s ease, transform 1.6s ease;
  }
  .gate-overlay.phase-distort .gate-converge{ opacity:1; transform:scale(.55); animation:converge-spin 3s linear infinite; }
  @keyframes converge-spin{ to{ transform:scale(.55) rotate(360deg); } }

  .gate-portal{
    position:absolute; top:50%; left:50%; width:min(66vmin,540px); height:min(66vmin,540px);
    transform:translate(-50%,-50%) scale(0); opacity:0;
    transition:transform 1.2s cubic-bezier(.16,1,.3,1), opacity .8s ease;
  }
  .gate-overlay.portal-visible .gate-portal{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  .gate-overlay.crossing .gate-portal{
    transition:transform 1.15s cubic-bezier(.6,0,1,.45), opacity 1.15s ease .35s;
    transform:translate(-50%,-50%) scale(9); opacity:0;
  }
  .gate-portal canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  .gate-message{
    position:absolute; max-width:640px; text-align:center; padding:0 24px;
    font-family:var(--font-display); font-size:clamp(19px,2.8vw,28px); letter-spacing:.03em;
    color:var(--gold-bright); text-shadow:0 0 30px rgba(157,92,255,.6);
    opacity:0; transition:opacity 1.3s ease;
  }
  .gate-overlay.message-visible .gate-message{ opacity:1; }
  .gate-overlay.panel-visible .gate-message{ opacity:0; }
  .gate-overlay.oath-visible .gate-message{ opacity:0; }

  .gate-oath{
    position:absolute; top:50%; left:50%; z-index:2; max-width:760px; width:92vw;
    max-height:88vh; overflow-y:auto;
    padding:44px 40px; text-align:center; opacity:0; pointer-events:none;
    transform:translate(-50%,-50%) translateY(18px) scale(.97);
    transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
  }
  .gate-overlay.oath-visible .gate-oath{
    opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); pointer-events:auto;
  }
  .gate-oath-sub{ font-style:italic; color:var(--muted); font-size:17px; margin:14px 0 30px; }
  .oath-options{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
  @media(max-width:760px){ .oath-options{ grid-template-columns:1fr; } }
  .oath-option{
    appearance:none; cursor:pointer; text-align:left; padding:22px 20px;
    background:rgba(255,255,255,.02); border:1px solid rgba(214,182,115,.25); border-radius:4px;
    display:flex; flex-direction:column; gap:8px; transition:all .4s ease; position:relative; overflow:hidden;
  }
  .oath-option::after{
    content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
    background:radial-gradient(circle at 50% 50%, rgba(157,92,255,.4), transparent 70%);
    transition:opacity .5s ease;
  }
  .oath-option:hover{ border-color:var(--gold); transform:translateY(-3px); }
  .oath-option .oath-title{ font-family:var(--font-display); font-size:15px; letter-spacing:.03em; color:var(--gold-bright); }
  .oath-option .oath-desc{ font-size:14.5px; color:var(--muted); line-height:1.5; }
  .oath-option.chosen{ border-color:var(--gold-bright); box-shadow:0 0 30px rgba(157,92,255,.5); }
  .oath-option.chosen::after{ opacity:1; animation:oath-pulse 1.1s ease-out; }
  .gate-oath.locked .oath-option:not(.chosen){ opacity:.3; pointer-events:none; }
  @keyframes oath-pulse{
    0%{ opacity:.9; transform:scale(.9); }
    100%{ opacity:0; transform:scale(1.5); }
  }
  .oath-confirm{
    margin-top:26px; font-family:var(--font-display); font-size:14px; letter-spacing:.1em;
    color:var(--gold-bright); text-transform:uppercase; opacity:0; transition:opacity .8s ease .2s;
  }
  .gate-oath.confirmed .oath-confirm{ opacity:1; }

  .gate-panel{
    position:absolute; top:50%; left:50%; z-index:2; max-width:420px; width:88vw;
    max-height:88vh; overflow-y:auto;
    padding:44px 38px; text-align:center; opacity:0;
    transform:translate(-50%,-50%) translateY(18px) scale(.96);
    transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
  }
  .gate-overlay.panel-visible .gate-panel{
    opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1);
  }
  .gate-panel .eyebrow{ margin-bottom:14px; }
  .gate-panel h3{ font-size:clamp(22px,3vw,28px); color:var(--ink); margin-bottom:10px; }
  .gate-panel p{ font-size:17px; color:var(--muted); margin-bottom:28px; }
  .gate-panel-actions{ display:flex; flex-direction:column; gap:14px; align-items:center; }

  .gate-flash, .gate-blackout{ position:absolute; inset:0; opacity:0; pointer-events:none; }
  .gate-flash{ background:#fff; transition:opacity .45s ease; }
  .gate-flash.on{ opacity:1; }
  .gate-blackout{ background:#000; transition:opacity .9s ease; }
  .gate-blackout.on{ opacity:1; }

  @media(max-width:600px){
    .gate-portal{ width:78vmin; height:78vmin; }
    .gate-panel{ padding:34px 26px; }
    .gate-oath{ padding:30px 18px; }
    .oath-option{ padding:18px 16px; }
  }
  @media (prefers-reduced-motion: reduce){
    body.gate-shaking > *:not(#gate-overlay):not(script){ animation:none; filter:none; }
    .gate-converge{ animation:none; }
    .gate-portal canvas{ opacity:.9; }
  }