/* Shadow Ops — Hangar: entrada cinematográfica + interior (esquerda = comando, direita = baias/frota) */
:root{--hg-accent:#63eaff;--hg-ratio:1.792}

/* ---------- cena de fundo ---------- */
.hangar-scene{position:absolute;inset:0;z-index:4;overflow:hidden;background:#02060b;opacity:1;transition:opacity .35s}
.hangar-scene.is-off{display:none}
.hg-view{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.hg-frame{position:absolute;left:50%;top:50%;width:max(100vw,calc(100dvh * var(--hg-ratio)));aspect-ratio:1000/558;transform:translate(-50%,-50%)}
.hg-frame>img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.hg-frame>img.hg-photo{transform-origin:50% 54.5%}

.hangar-scene[data-view="esquerda"] .hg-esquerda,
.hangar-scene[data-view="direita"] .hg-direita,
.hangar-scene[data-view="entrada"] .hg-entrada{opacity:1}
/* panorâmica: a vista inativa fica deslocada para o lado de onde a câmera "gira" */
.hangar-scene[data-view="esquerda"] .hg-direita{transform:translateX(7%) scale(1.04)}
.hangar-scene[data-view="direita"] .hg-esquerda{transform:translateX(-7%) scale(1.04)}

.hg-vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse at 50% 55%,transparent 45%,#02060bcc 100%),
  linear-gradient(180deg,#02060b88,transparent 18%,transparent 70%,#02060bcc)}
.hg-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,#e9fdff,#7fe4ff 35%,transparent 72%)}

/* nave exibida na baia (vista direita) */
.hg-ship{position:absolute;left:21%;top:41%;width:25%;aspect-ratio:1;display:grid;place-items:center;opacity:0;transform:translateY(12px);transition:opacity .7s .25s,transform .9s .25s;pointer-events:none}
.hangar-scene[data-view="direita"] .hg-ship{opacity:1;transform:none}
.hg-ship img{position:relative;z-index:2;width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 18px 18px #000c) drop-shadow(0 0 22px color-mix(in srgb,var(--hg-accent) 45%,transparent));animation:hgFloat 4.2s ease-in-out infinite}
.hg-pad{position:absolute;left:8%;right:8%;bottom:6%;height:17%;border-radius:50%;z-index:1;border:1px solid color-mix(in srgb,var(--hg-accent) 80%,transparent);background:radial-gradient(ellipse,color-mix(in srgb,var(--hg-accent) 38%,transparent),transparent 70%);box-shadow:0 0 28px color-mix(in srgb,var(--hg-accent) 45%,transparent)}
.hg-scan{position:absolute;left:14%;right:14%;top:12%;bottom:14%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 0 46%,color-mix(in srgb,var(--hg-accent) 40%,transparent) 50%,transparent 54% 100%);background-size:100% 220%;animation:hgScan 3.4s linear infinite;mix-blend-mode:screen}
.hg-ship-tag{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);z-index:4;white-space:nowrap;padding:3px 10px;border:1px solid color-mix(in srgb,var(--hg-accent) 70%,transparent);border-radius:3px;background:#04101be6;color:#d9fbff;font:700 clamp(9px,1.05vw,13px) Rajdhani,sans-serif;letter-spacing:1.4px}
@keyframes hgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5%)}}
@keyframes hgScan{from{background-position:0 130%}to{background-position:0 -130%}}

/* ---------- menu dentro do hangar ---------- */
#menu.hangar-on{display:block;padding:0;overflow:hidden;background:none}
#menu.hangar-on.hidden{display:none!important}
#menu.hangar-on .hangar-panel{position:absolute;top:0;bottom:62px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5fb7c4 transparent;
  padding:clamp(14px,2.4vw,30px);background:linear-gradient(180deg,#04101bd9,#050c14e6);border:1px solid #6ba6b340;box-shadow:0 0 0 1px #02060b,0 18px 50px #000a,inset 0 1px #b2ffff12;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
#menu.hangar-on .hangar-panel.is-active{opacity:1;transform:none;pointer-events:auto}
#menu.hangar-on .hangar-panel--command{left:clamp(10px,3vw,44px);top:clamp(10px,3vh,34px);bottom:74px;width:min(500px,calc(100% - 20px));border-radius:6px}
#menu.hangar-on .hangar-panel--command h1{font-size:clamp(52px,5.4vw,78px);margin:16px 0;display:flex;flex-wrap:wrap;gap:0 .22em}
#menu.hangar-on .hangar-panel--bays{right:clamp(10px,3vw,44px);top:84px;bottom:74px;width:min(640px,54vw);border-radius:6px}
#menu.hangar-on .menu-card{max-width:none}
#menu.hangar-on .hangar-panel--bays .hg-bays-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid #6ba6b340;color:#a7e9ed;font:700 13px Rajdhani,sans-serif;letter-spacing:2px}
#menu.hangar-on .hangar-panel--bays .hg-bays-head small{color:#7fa8b0;font:600 10px Rajdhani,sans-serif;letter-spacing:1.4px}
#menu.hangar-on .hangar-panel--bays .fleet-grid{margin:6px 0 16px}
#menu.hangar-on .hangar-panel--bays .fleet-name{font-size:14px}
#menu.hangar-on .hangar-panel--bays .fleet-class{font-size:9px}
#menu.hangar-on .hangar-panel--bays .fleet-weapon{font-size:11px}
#menu.hangar-on .hangar-panel--bays .fleet-spec{font-size:9px}
#menu.hangar-on .hangar-panel--bays .fleet-spec>b{font-size:8px}
#menu.hangar-on .hangar-panel--bays .fleet-stats small{font-size:7px}
#menu.hangar-on .hangar-panel--bays .fleet-stats b{font-size:11px}
#menu.hangar-on .hangar-panel--bays .fleet-trait{font-size:9px}
#menu.hangar-on .hangar-panel--bays .fleet-art{height:78px}
#menu.hangar-on .hangar-panel--bays .fleet-art img{height:68px}
#menu.hangar-on .hangar-panel--bays .boss-codex-grid,
#menu.hangar-on .hangar-panel--bays .enemy-codex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* durante a atracação a interface fica oculta */
#menu.hangar-on.is-docking .hangar-panel,#menu.hangar-on.is-docking .hangar-dock{opacity:0!important;pointer-events:none!important;transform:translateY(14px)}

/* dock inferior: troca de vista + decolar */
.hangar-dock{position:absolute;left:0;right:0;bottom:0;height:62px;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 clamp(10px,3vw,44px);
  background:linear-gradient(0deg,#02060bf2,#02060b99 70%,transparent);opacity:1;transition:opacity .45s,transform .6s}
.hg-tab,.hg-launch{font:700 13px Rajdhani,sans-serif;letter-spacing:1.6px;padding:10px 18px;border-radius:3px;border:1px solid #6ba6b366;background:#071a25d9;color:#bfe9e5;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s,color .15s}
.hg-tab:hover{border-color:#a5eafa;background:#0c2a39}
.hg-tab[aria-selected="true"]{border-color:#76e4f5;background:#133a49;color:#fff;box-shadow:0 0 16px #46cbe833}
.hg-tab:focus-visible,.hg-launch:focus-visible,.hg-skip:focus-visible{outline:2px solid #bdf7ff;outline-offset:2px}
.hg-launch{margin-left:auto;background:#bfe9e5;color:#082331;border-color:#e3fffa}
.hg-launch:hover{background:#e2f9f0}
.hg-launch-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,4vw,32px);border:1px solid #76e4f580;border-radius:8px;background:linear-gradient(150deg,#102a37,#040e18);color:#e6f6f4;box-shadow:0 24px 90px #000c}
.hg-launch-dialog::backdrop{background:#02060bba;backdrop-filter:blur(6px)}
.hg-launch-dialog h2{margin:0 0 12px;font:700 clamp(22px,4vw,28px) Rajdhani,sans-serif;letter-spacing:1px;color:#bdf7ff}
.hg-launch-dialog p{margin:0 0 24px;font:400 16px/1.6 Barlow,sans-serif;color:#b9d7db}
.hg-launch-choices{display:flex;flex-wrap:wrap;gap:10px}
.hg-launch-choices button{justify-content:center;min-height:44px;width:100%;margin:0;white-space:normal}
.hg-dock-hint{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);color:#8bb3ba;font:600 10px Rajdhani,sans-serif;letter-spacing:1.6px;pointer-events:none;white-space:nowrap}

/* ---------- entrada cinematográfica ---------- */
.hangar-intro{position:absolute;inset:0;z-index:8;overflow:hidden;background:#02060b;cursor:pointer;transition:opacity .5s}
.hangar-intro.is-off{display:none}
.hangar-intro.is-fading{opacity:0;pointer-events:none}
.hangar-intro .hg-frame>img{transform-origin:50.4% 54.7%;will-change:transform}
.hg-flyer{position:absolute;left:0;top:0;width:clamp(200px,26vw,400px);z-index:3;will-change:transform,opacity;opacity:0;pointer-events:none}
.hg-flyer img{display:block;width:100%;filter:drop-shadow(0 0 14px #7fe4ffaa) drop-shadow(0 8px 10px #000a)}
.hg-flyer::after{content:"";position:absolute;left:50%;top:84%;width:18%;height:46%;transform:translateX(-50%);background:linear-gradient(180deg,#bff6ff,#3fb8ff88 55%,transparent);filter:blur(5px);border-radius:50%}
.hg-comms{position:absolute;left:clamp(14px,4vw,56px);bottom:clamp(20px,7vh,70px);z-index:4;max-width:min(560px,86vw);padding:10px 16px 12px;border-left:2px solid var(--hg-accent);background:linear-gradient(90deg,#04101bd9,#04101b66);opacity:0;transition:opacity .4s}
.hg-comms.is-on{opacity:1}
.hg-comms small{display:block;color:var(--hg-accent);font:700 10px Rajdhani,sans-serif;letter-spacing:2.2px}
.hg-comms p{margin:4px 0 0;color:#e6f6f4;font:500 clamp(13px,1.5vw,17px)/1.45 Barlow,sans-serif;min-height:1.45em}
.hg-skip{position:absolute;right:clamp(12px,3vw,40px);bottom:clamp(16px,5vh,44px);z-index:5;font:700 12px Rajdhani,sans-serif;letter-spacing:1.6px;padding:8px 14px;border:1px solid #6ba6b366;border-radius:3px;background:#04101bcc;color:#bfe9e5}
.hg-skip:hover{border-color:#a5eafa}

/* ---------- celular / telas estreitas ---------- */
@media(max-width:820px){
  #menu.hangar-on .hangar-panel--command,
  #menu.hangar-on .hangar-panel--bays{left:8px;right:8px;top:116px;bottom:70px;width:auto;border-radius:5px}
  #menu.hangar-on .hangar-panel--bays .boss-codex-grid,
  #menu.hangar-on .hangar-panel--bays .enemy-codex-grid{grid-template-columns:1fr}
  #menu.hangar-on .hangar-panel--bays .fleet-grid{grid-template-columns:1fr}
  .hg-ship{display:none}
  .hg-tab,.hg-launch{padding:9px 8px;font-size:10.5px;letter-spacing:.4px;white-space:nowrap}
  #menu.hangar-on .hangar-panel--bays .hg-bays-head small{display:none}
  .hg-dock-hint{display:none}
  .hangar-dock{gap:6px;padding:0 8px}
}
@media(max-height:520px) and (orientation:landscape){
  #menu.hangar-on .hangar-panel--command{width:min(400px,46vw)}
  #menu.hangar-on .hangar-panel--bays{width:min(520px,52vw)}
}
@media(prefers-reduced-motion:reduce){
  .hg-ship img,.hg-scan{animation:none}
  .hg-view,#menu.hangar-on .hangar-panel{transition-duration:.01s}
}