/* A restrained mechanical entrance: brushed metal, inset joints, and a
   printed nameplate. Only progress and the physical door reveal move. */
#blastDoorGateway {
  --gateway-accent: #86d2da;
  --gateway-warm: #d7ad78;
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  pointer-events: auto;
  font-family: var(--font-body);
  user-select: none;
}
#blastDoorGateway.is-dismissed { display: none !important; }
.blast-door-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  overflow: hidden;
  background: #11161b;
  contain: layout paint style;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 1.15s cubic-bezier(.22, .76, .2, 1);
  will-change: transform;
}
.blast-door-leaf.left { left: 0; }
.blast-door-leaf.right { right: 0; }
#blastDoorGateway.is-opening .blast-door-leaf.left { transform: translate3d(-101%, 0, 0); }
#blastDoorGateway.is-opening .blast-door-leaf.right { transform: translate3d(101%, 0, 0); }
.gateway-leaf-canvas {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100dvh;
  isolation: isolate;
}
.blast-door-leaf.left .gateway-leaf-canvas { left: 0; }
.blast-door-leaf.right .gateway-leaf-canvas { right: 0; }
.gateway-leaf-canvas .gateway-shell {
  position: absolute;
  inset: clamp(10px, 1.5vw, 24px);
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr) 48px;
  overflow: hidden;
  border: 1px solid #424950;
  border-radius: 8px;
  background: #161c22;
  box-shadow: inset 0 1px 0 #596068, inset 0 -2px 0 #080b0e,
    0 0 0 5px #0b0f13, 0 0 0 6px #272e35;
}
.gateway-leaf-canvas .topbar,
.gateway-leaf-canvas .bottombar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  padding-inline: clamp(20px, 3vw, 44px);
  color: #aeb7c0;
  font-size: .75rem;
  letter-spacing: .015em;
  background: linear-gradient(110deg, #24363c, #1a252d 58%, #302c28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.gateway-leaf-canvas .topbar { border-bottom: 1px solid #0b1015; }
#blastDoorGateway .gateway-leaf-canvas .bottombar {
  height: 100%;
  min-height: 0;
  margin-top: 0;
  padding-block: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #43565e;
  background: linear-gradient(110deg, #18272e, #182127 58%, #292620);
  color: #adc3cc;
  text-align: left;
  line-height: 1.2;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gateway-leaf-canvas .gateway-footer-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.gateway-leaf-canvas .gateway-footer-label i {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border: 1px solid #76a8b3;
  background: #2d535e;
  transform: rotate(45deg);
}
.gateway-leaf-canvas .gateway-footer-tag {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #695840;
  border-radius: 3px;
  background: #302b24;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--gateway-warm);
  font-size: .65rem;
  font-weight: 500;
  white-space: nowrap;
}
.gateway-leaf-canvas .topbar strong { font-size: .8rem; font-weight: 600; color: #c9d1d8; }
.gateway-leaf-canvas .system-mark { display: inline-flex; align-items: center; gap: 10px; }
.gateway-leaf-canvas .system-mark::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gateway-accent);
  box-shadow: 0 0 0 3px rgba(114,195,206,.10);
}
.gateway-leaf-canvas .stage-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 12% 88%, rgba(0,0,0,.22)),
    radial-gradient(ellipse at 18% 24%, rgba(49,157,173,.22), transparent 58%),
    radial-gradient(ellipse at 88% 12%, rgba(193,132,76,.15), transparent 48%),
    radial-gradient(ellipse at 38% 0, rgba(255,255,255,.065), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, #263a40, #19242d 60%, #2c2b29);
  box-shadow: inset 0 12px 22px rgba(0,0,0,.28), inset 0 -1px 0 #343c44;
}
/* Recessed vertical channel and horizontal panel joints. */
.gateway-leaf-canvas .stage-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent calc(25% - 1px), rgba(0,0,0,.45) 25%,
    rgba(255,255,255,.035) calc(25% + 1px), transparent calc(25% + 2px),
    transparent calc(75% - 1px), rgba(0,0,0,.45) 75%,
    rgba(255,255,255,.035) calc(75% + 1px), transparent calc(75% + 2px));
  pointer-events: none;
}
.gateway-leaf-canvas .power-spine {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 34px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #0c1116, #434e58 12%, #1d252d 18%,
    #10161c 43%, #070b0e 49% 51%, #26313b 57%, #18212a 82%, #45515b 88%, #0c1116);
  box-shadow: -4px 0 10px rgba(0,0,0,.2), 4px 0 10px rgba(0,0,0,.2);
}
.gateway-leaf-canvas .panel-chamfer {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 130px;
  transform: translateY(-50%);
  border: 1px solid #49545e;
  border-radius: 2px;
  background: linear-gradient(90deg, #10171d, #39444e, #182129);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.gateway-leaf-canvas .panel-chamfer.left {
  left: 12px;
  border-color: #527e88;
  background: linear-gradient(90deg, #14252b, #4b7c86, #1c333b);
}
.gateway-leaf-canvas .panel-chamfer.right {
  right: 12px;
  border-color: #8d7255;
  background: linear-gradient(90deg, #2a211b, #8a6a48, #382c22);
}
.gateway-leaf-canvas .gateway-content {
  position: absolute;
  z-index: 18;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(760px, calc(100% - 96px));
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  border: 1px solid #49616a;
  border-radius: 5px;
  background:
    radial-gradient(circle at 12px 12px, #727c85 0 1px, #1a2026 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #727c85 0 1px, #1a2026 2px 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #727c85 0 1px, #1a2026 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #727c85 0 1px, #1a2026 2px 3px, transparent 4px),
    linear-gradient(145deg, #2b444b, #192b35 58%, #2b2b2a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 #0b1015,
    0 16px 40px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.5);
  text-align: center;
}
.gateway-leaf-canvas .awakening-row {
  margin-bottom: 26px;
  color: var(--gateway-warm);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .015em;
}
.gateway-leaf-canvas .given-name {
  margin: 0 0 4px;
  color: #c6ced5;
  font-size: clamp(1rem, 1.65vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .01em;
}
.gateway-leaf-canvas .gateway-name {
  font-family: var(--font-body);
  font-size: clamp(2rem, 5.3vw, 4.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.045em;
  color: #f0f3f5;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.gateway-leaf-canvas .gateway-role {
  margin: 16px 0 0;
  color: #9bc7cf;
  font-size: clamp(.8rem, 1.2vw, 1rem);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: .01em;
}
.gateway-leaf-canvas .loader { width: min(400px, 100%); margin-top: 36px; }
.gateway-leaf-canvas .loader-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #a5b1bb;
  font-size: .72rem;
  line-height: 1.5;
  font-weight: 400;
}
.gateway-leaf-canvas .loader-copy span:last-child {
  color: var(--gateway-accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}
.gateway-leaf-canvas .loader-track {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #0c1218;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 1px 2px #05090c;
}
.gateway-leaf-canvas .loader-fill {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  background: linear-gradient(90deg, #428fa2, #86d2da 72%, #d7ad78);
}
.hud-skip-wrap {
  position: absolute;
  top: clamp(10px, 1.5vw, 24px);
  right: clamp(30px, 4.5vw, 68px);
  height: 68px;
  display: flex;
  align-items: center;
  z-index: 50;
}
.hud-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  font: 500 .75rem var(--font-body);
  color: #c6d0d9;
  border: 1px solid #496872;
  border-radius: 4px;
  background: linear-gradient(#2c4650, #22333d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 3px rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.hud-skip-btn:hover { color: #fff; background: #345360; }
.hud-skip-btn:focus-visible { outline: 2px solid var(--gateway-accent); outline-offset: 4px; }
#blastDoorGateway.is-opening .hud-skip-wrap { opacity: 0; pointer-events: none; }
/* Inset colored trim and a stamped identity mark; all details are static. */
.gateway-leaf-canvas .gateway-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: 1px solid #54747c;
  border-radius: 3px;
  background: linear-gradient(145deg, #3a5962, #23353d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.35);
  color: #b8e4e8;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.gateway-leaf-canvas .gateway-content::before,
.gateway-leaf-canvas .gateway-content::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #72b5c0, #3b6470 32%, #35434a 66%, #b68c61);
}
.gateway-leaf-canvas .gateway-content::before { top: 0; }
.gateway-leaf-canvas .gateway-content::after { bottom: 0; opacity: .55; }
.gateway-leaf-canvas .awakening-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.gateway-leaf-canvas .awakening-row::before,
.gateway-leaf-canvas .awakening-row::after {
  content: '';
  width: 28px;
  height: 1px;
  background: #648e97;
}
.gateway-leaf-canvas .awakening-row::after { background: #a5825d; }
.gateway-leaf-canvas .bottombar::after {
  content: '';
  flex-shrink: 0;
  width: 52px;
  height: 7px;
  background: repeating-linear-gradient(90deg, #0e171e 0 3px, #58646b 3px 4px, transparent 4px 7px);
  opacity: .65;
}

@media (max-width: 760px) {
  .gateway-leaf-canvas .gateway-shell { grid-template-rows: 56px minmax(0, 1fr) 40px; }
  .hud-skip-wrap { height: 56px; right: 30px; }
  .gateway-leaf-canvas .bottombar::after { display: none; }
  .gateway-leaf-canvas .topbar,
  .gateway-leaf-canvas .bottombar { padding-inline: 20px; }
  .gateway-leaf-canvas .gateway-content { width: calc(100% - 48px); padding: 38px 24px; }
  .gateway-leaf-canvas .panel-chamfer { display: none; }
  .gateway-leaf-canvas .gateway-name { font-size: clamp(2rem, 7vw, 3.5rem); }
  .gateway-leaf-canvas .loader { margin-top: 28px; }
}
@media (max-height: 540px) {
  .gateway-leaf-canvas .gateway-content { padding-block: 22px; }
  .gateway-leaf-canvas .awakening-row { margin-bottom: 12px; }
  .gateway-leaf-canvas .loader { margin-top: 18px; }
  .gateway-leaf-canvas .gateway-role { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .blast-door-leaf { transition: none; }
}