@font-face {
  font-family: "Okuda";
  src: url("assets/fonts/Okuda-A5PL.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root{
  --nav-offset-y: -3px;
  --info-arrow-nudge-y: 70px;

  --warp-head-y: 10px;
  --warp-header-gap: 6px;
  --warp-subheader-gap: -20px;
  --warp-blinkers-nudge-y: 7px;

  --info-area-top: 140px;
  --info-area-left: 0px;
  --info-area-width: 530px;
  --info-area-height: 450px;

  --info-buttons-left: 40px;
  --info-buttons-top: 70px;

  --info-arrow-left: 270px;

  --info-box-left: 300px;
  --info-box-top: 70px;
  --info-box-width: 220px;
  --info-box-height: 330px;
}

/* RESET */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

/* KILL iOS focus outlines */
*:focus { outline: none !important; }
img { -webkit-tap-highlight-color: transparent; }

/* SCALE WRAPPER */
#lcars-scale{
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px;
  height: 758px;
  transform-origin: top left;
  will-change: transform;
}

/* ROOT */
#lcars-root {
  position: relative;
  width: 1024px;
  height: 758px;
}

/* Scale to fit */
@media (orientation: landscape) {
  #lcars-scale {
    transform: scale(
      min(
        calc(100vw / 1024),
        calc(min(100dvh, 100vh) / 758)
      )
    );
  }
}

/* BASE LAYERS */
#background, #frame, #splash {
  position: absolute;
  inset: 0;
  width: 1024px;
  height: 758px;
}

#background { z-index: 1; }
#frame      { z-index: 2000; }
#splash     { z-index: 1000; pointer-events: none; }

/* NAV BUTTONS */
.navbtn {
  position: absolute;
  width: 128px;
  height: 50px;
  object-fit: fill;
  cursor: pointer;
  z-index: 2100;
  transition: filter 120ms ease;
}

.navbtn.sys      { left: 10px; top: calc(116px + var(--nav-offset-y)); --glow:#FE9901; }
.navbtn.warp     { left: 10px; top: calc(169px + var(--nav-offset-y)); --glow:#E6B0D4; }
.navbtn.music    { left: 10px; top: calc(222px + var(--nav-offset-y)); --glow:#99CBFF; }
.navbtn.lights   { left: 10px; top: calc(275px + var(--nav-offset-y)); --glow:#91A35B; }
.navbtn.sound    { left: 10px; top: calc(328px + var(--nav-offset-y)); --glow:#A9C4A5; }
.navbtn.ship     { left: 10px; top: calc(381px + var(--nav-offset-y)); --glow:#E7AC8B; }
.navbtn.render   { left: 10px; top: calc(434px + var(--nav-offset-y)); --glow:#58C8DF; }
.navbtn.homesys  { left: 10px; top: calc(487px + var(--nav-offset-y)); --glow:#C2A2AC; }
.navbtn.security { left: 10px; top: calc(540px + var(--nav-offset-y)); --glow:#FFD05E; }
.navbtn.alexa    { left: 10px; top: calc(593px + var(--nav-offset-y)); --glow:#F79969; }

.navbtn.glow {
  filter:
    brightness(1.25)
    drop-shadow(0 0 2px var(--glow))
    drop-shadow(0 0 10px var(--glow))
    drop-shadow(0 0 24px var(--glow));
}

/* STATUS */
#stardate, #clock {
  position: absolute;
  bottom: 15px;
  color: #FF8500;
  font-family: "Okuda", sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  z-index: 900;
}
#stardate { left: 190px; }
#clock    { right: 577px; }

/* WARP UI */
#warp-ui {
  display: none;
  position: absolute;
  inset: 0;
  width: 1024px;
  height: 758px;
  z-index: 950;
  pointer-events: none;
}

#warp-num {
  position: absolute;
  left: 840px;
  top: 135px;
  width: 60px;
  height: auto;
  z-index: 951;
  pointer-events: none;
}

#delta-stack {
  position: absolute;
  left: 914px;
  top: 213px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  z-index: 952;
  pointer-events: none;
}

#delta-stack .delta {
  width: 38px;
  height: 38px;
  margin-top: -4px;
}

/* click zones */
#warp-up, #warp-down {
  position: absolute;
  width: 70px;
  height: 70px;
  z-index: 999;
  pointer-events: auto;
  background: rgba(255,255,255,0);
}
#warp-up   { left: 900px; top: 125px; }
#warp-down { left: 900px; top: 520px; }

/* WARP PANEL */
#warp-panel {
  display: none;
  position: absolute;
  left: 165px;
  top: 60px;
  width: 530px;
  height: 610px;
  z-index: 800;
  --warp-color: #3CC6EF;
  pointer-events: auto;
}

#warp-header {
  position: absolute;
  right: 0;
  top: calc(var(--warp-head-y) + 0px);
  width: 530px;
  height: auto;
  display: block;
  z-index: 810;
  pointer-events: none;
}

#warp-lightspeed {
  position: absolute;
  right: 0;
  top: calc(var(--warp-head-y) + 30px + var(--warp-header-gap));
  width: 160px;
  height: auto;
  display: block;
  z-index: 811;
  pointer-events: none;
}

#warp-subheader {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--warp-head-y) + 53px + 42px + var(--warp-subheader-gap));
  width: 430px;
  height: auto;
  display: block;
  z-index: 812;
  pointer-events: none;
}

.warp-subheader-row {
  position: absolute;
  left: 0;
  top: calc(
    var(--warp-head-y)
    + 42px
    + var(--warp-subheader-gap)
    + 54px
    + var(--warp-blinkers-nudge-y)
  );
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 813;
  pointer-events: none;
  padding: 0 0px;
  box-sizing: border-box;
}

.warp-indicator {
  width: 36px;
  height: 6px;
  border-radius: 3px;
  background: #9cff00;
  box-shadow: 0 0 8px rgba(156, 255, 0, 0.8);
}

.warp01-indicator-left  { animation: warpAltLeft  1s infinite; }
.warp01-indicator-right { animation: warpAltRight 1s infinite; }

@keyframes warpAltLeft {
  0%, 49% { background:#9cff00; box-shadow:0 0 8px rgba(156,255,0,0.8); }
  50%,100%{ background:#ffd400; box-shadow:0 0 8px rgba(255,212,0,0.9); }
}
@keyframes warpAltRight {
  0%, 49% { background:#ffd400; box-shadow:0 0 8px rgba(255,212,0,0.9); }
  50%,100%{ background:#9cff00; box-shadow:0 0 8px rgba(156,255,0,0.8); }
}

/* INFO AREA */
#warp-info-area {
  position: absolute;
  left: var(--info-area-left);
  top: var(--info-area-top);
  width: var(--info-area-width);
  height: var(--info-area-height);
  z-index: 820;
  pointer-events: auto;
}

#info-idle-gif {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 450px;
  height: 450px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
  cursor: pointer;
  z-index: 821;
}

#warp-info-ui {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 822;
}

#warp-info-buttons {
  position: absolute;
  left: var(--info-buttons-left);
  top: var(--info-buttons-top);
  width: 240px;
  z-index: 823;
}

.warp-infobtn {
  display: block;
  width: 240px;
  height: auto;
  margin: 14px 0;
  cursor: pointer;
  user-select: none;
}

#info-arrow {
  position: absolute;
  left: var(--info-arrow-left);
  top: 0px;
  width: 34px;
  height: auto;
  display: none;
  z-index: 824;
  pointer-events: none;
  transform: translateY(var(--info-arrow-nudge-y));
}

#warp-info-box {
  position: absolute;
  left: var(--info-box-left);
  top: var(--info-box-top);
  width: var(--info-box-width);
  height: var(--info-box-height);
  display: none;
  z-index: 825;
  border-radius: 22px;
  background: rgba(160, 205, 255, 0.92);
  box-shadow: 0 0 18px rgba(80,160,255,0.25);
  padding: 18px 16px;
  box-sizing: border-box;
}

#warp-info-text {
  font-family: "Okuda", sans-serif;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.6px;
  color: #0b1020;
  white-space: pre-wrap;
}

#warp-bottombar {
  position: absolute;
  left: 0;
  bottom: -22px;
  width: 100%;
  height: 18px;
  background: var(--warp-color);
  border-radius: 10px;
  animation: warpBottomPulse 3s ease-in-out infinite;
  z-index: 805;
}

@keyframes warpBottomPulse {
  0%   { opacity: .55; }
  50%  { opacity: 1; }
  100% { opacity: .55; }
}

/* No selection */
html, body, #lcars-root { -webkit-user-select: none; user-select: none; }

/* =========================
   BOOT OVERLAY
   ========================= */
@keyframes bootPulse {
  0%   { opacity: 0.55; filter: brightness(0.95); }
  50%  { opacity: 1;    filter: brightness(1.25); }
  100% { opacity: 0.55; filter: brightness(0.95); }
}

.boot-touch {
  animation: bootPulse 2.6s ease-in-out infinite;
}

#boot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 758px;
  background: #000;
  z-index: 100000;
}

.boot-logo {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 924px;
  height: auto;
  pointer-events: none;
}

.boot-touch {
  position: absolute;
  top: 620px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 32px;
  cursor: pointer;
}

.lcars-hidden {
  visibility: hidden;
}

/* =========================================================
   NEW: FULL SCREEN NAV TRAY (INVISIBLE SURFACE + BLUR)
   ========================================================= */

:root{
  --tray-gap: 14px;         /* button-to-button gap */
  --tray-pad: 28px;         /* outer margin (≈ 2x gap) */
  --tray-radius: 18px;

  --tray-btn-radius: 16px;
  --tray-btn-font: 16px;
}

/* tray container covers FULL lcars-scale (1024x758) */
#nav-tray{
  position: absolute;
  inset: 0;
  width: 1024px;
  height: 758px;
  z-index: 5000;            /* above everything inside lcars */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-36px);
  transition: opacity 220ms ease, transform 260ms ease;
}

/* open state */
#nav-tray.open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* blur layer (invisible tray surface) */
#nav-blur{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20); /* fallback tint */
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

/* If iPad Safari refuses blur, this still looks good */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #nav-blur{
    background: rgba(0,0,0,0.42);
  }
}

/* grid sits on top, tray itself remains invisible */
#nav-grid{
  position: absolute;
  inset: var(--tray-pad);
  display: grid;

  /* ✅ MATCHES YOUR IMAGE: 3 columns x 6 rows */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  
  

  gap: var(--tray-gap);
  align-content: center;
  z-index: 5001;
}

/* the CSS buttons */
.tray-btn{
  appearance: none;
  border: 0;
  width: 100%;
  height: 100%;

  border-radius: var(--tray-btn-radius);
  background: rgba(255, 188, 170, 0.82);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.25);

  color: rgba(20, 10, 0, 0.88);
  font-family: "Okuda", sans-serif;
  font-size: var(--tray-btn-font);
  letter-spacing: 1.5px;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: filter 120ms ease, transform 120ms ease;
}

/* same glow behavior (and a slight press) */
.tray-btn.glow{
  filter:
    brightness(1.15)
    drop-shadow(0 0 2px #ff9900)
    drop-shadow(0 0 10px #ff9900)
    drop-shadow(0 0 24px #ff9900);
}

.tray-btn:active{
  transform: translateY(1px);
}

/* edge swipe hint bar */
#nav-tray-tab{
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 758px;
  z-index: 5002;
  cursor: pointer;
  background: rgba(255, 200, 175, 0.14);
}

/* when tray open, tab stays visible but subtle */
#nav-tray.open + #nav-tray-tab{
  background: rgba(255, 200, 175, 0.08);
}

/* when tray open, prevent clicking nav buttons underneath */
body.tray-open .navbtn{
  pointer-events: none;
}

/* =========================================================
   NAV TRAY — FINAL ILLUSTRATOR MATCH (OVERRIDES ONLY)
   Paste this at the VERY BOTTOM of your working style.css
   ========================================================= */

/* FULL SCREEN TRAY */
#nav-tray{
  position: fixed !important;
  inset: 0 !important;
  width: 1024px !important;
  height: 758px !important;
  z-index: 5000 !important;
  transform: translateX(-100%) !important;
  transition: transform 360ms cubic-bezier(.4,0,.2,1) !important;
  pointer-events: none !important;
}

#nav-tray.open{
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* BLUR SURFACE (TRAY ITSELF INVISIBLE) */
#nav-blur{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}

/* GRID — FIXED ROW HEIGHT (THIS IS THE KEY) */
#nav-grid{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(6, 62px) !important;   /* <— smaller buttons */
  gap: 34px !important;                             /* <— more air */

  /* OUTER AIR (MATCHES YOUR WORKING VERSION) */
  padding: 96px 140px 96px 180px !important;
  box-sizing: border-box !important;
}

/* BUTTONS */
.tray-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  background: linear-gradient(180deg,#f6c9a8 0%,#efb184 100%) !important;
  border-radius: 18px !important;

  font-family: "Okuda", sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 2.8px !important;
  text-transform: uppercase !important;
  color: #2b1a0f !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 8px 20px rgba(0,0,0,0.32) !important;

  cursor: pointer !important;
  user-select: none !important;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease !important;
}

.tray-btn.glow{
  filter:
    brightness(1.25)
    drop-shadow(0 0 6px #ff9900)
    drop-shadow(0 0 18px #ff9900) !important;
}

.tray-btn:active{
  transform: translateY(1px) !important;
}

/* SHORT EDGE TAB (NOT FULL HEIGHT) */
#nav-tray-tab{
  position: fixed !important;
  left: 0 !important;
  top: 200px !important;
  width: 8px !important;
  height: 320px !important;

  background: linear-gradient(180deg,#e7b1b5,#c77a82) !important;
  border-radius: 4px 4px 4px 4px !important;

  z-index: 5100 !important;
  cursor: pointer !important;
  
  
  pointer-events: auto;
  touch-action: manipulation;

}