/* =========================================================
   CODE SEVEN — style.css (clean / consolidated)
   - Dark cinematic base
   - Gold accents (#d4af37)
   - Sections: Floating Menu / Hero / Characters / Gadgets / Boss / Story / Key Person / Staff / Modals
   - Notes:
     * gadgetHead / staffGrid / modal rules are de-duplicated and unified
========================================================= */


/* =========================================================
   Root
========================================================= */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --glass:rgba(0,0,0,.45);
  --gold:#d4af37;
  --act-red:#6d2020;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --radius:24px;
}


/* =========================================================
   Base
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
:target{ scroll-margin-top: 90px; }

/* Utilities */
.u-inner{ width:min(1120px, 92vw); margin-inline:auto; }


/* =========================================================
   Floating menu (hamburger + panel)
========================================================= */
.floatMenuBtn{
  position:fixed;
  top:18px;
  right:18px;
  z-index:2000;

  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:var(--glass);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  cursor:pointer;

  display:grid;
  place-items:center;
}

.floatMenuBtn span{
  position:absolute;
  width:22px;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.92);
  transform-origin:50% 50%;
  transition: transform .18s ease, opacity .18s ease;
}
.floatMenuBtn span:nth-child(1){ transform: translateY(-6px); }
.floatMenuBtn span:nth-child(2){ transform: translateY(0); }
.floatMenuBtn span:nth-child(3){ transform: translateY(6px); }

/* open -> X */
.floatMenuBtn.is-open span:nth-child(1){ transform: rotate(45deg); }
.floatMenuBtn.is-open span:nth-child(2){ opacity:0; }
.floatMenuBtn.is-open span:nth-child(3){ transform: rotate(-45deg); }

.floatMenu{
  position:fixed;
  top:72px;
  right:18px;
  z-index:1999;

  width:min(260px, calc(100vw - 36px));
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line2);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);

  display:none;
}
.floatMenu.is-open{ display:block; }

.floatMenu__link{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  letter-spacing:.08em;
  font-weight:600;
  font-size:13px;
  color:rgba(255,255,255,.92);
  transition: background .15s ease, transform .15s ease;
}
.floatMenu__link:hover{
  background:rgba(255,255,255,.06);
  transform: translateY(-1px);
}