:root{
  --bg:#0b0b0e; --panel:#121218; --accent:#ff3d2e; --accent-2:#ff9a3c;
  --ink:#e6e6ea; --muted:#9aa0a6; --shadow:rgba(0,0,0,.6)
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem;line-height:1.1}
p{line-height:1.6;color:#d7d7db}

.container{width:min(1100px,92%);margin:0 auto}

/* NAV */
header.nav{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.2) 70%,transparent);
  z-index:20;backdrop-filter:blur(6px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:38px;width:38px;object-fit:contain;filter:drop-shadow(0 4px 10px var(--shadow))}
.brand strong{letter-spacing:.5px}
nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
nav a{padding:.5rem .8rem;border-radius:10px}
nav a:hover{background:#1b1b24}

/* HERO SPLASH */
.hero-splash{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero-video{width:100%;height:100svh;object-fit:cover;display:block}
.hero-skip{position:absolute;right:1rem;bottom:1rem;z-index:3}
.hidden{display:none!important}

/* CENTERED MEDIA */
.center{text-align:center}
.media-img, video{max-width:100%;height:auto;display:block;margin-inline:auto}

/* CORNER LOOPING LOGOS */
.corner{position:fixed;top:.5rem;width:52px;aspect-ratio:1;object-fit:contain;z-index:25;pointer-events:none}
.corner-left{left:.5rem}
.corner-right{right:.5rem}

/* TITLES / LOGO */
.logo-big {
  display: block;
  width: 100%;     /* fill the screen width */
  height: auto;    /* keep proportions */
  max-width: 100%; /* no overflow */
  margin: 1rem auto;
}

.title.big {
  font-family: 'UnifrakturCook','Nosifer',cursive,fantasy;
  font-size: clamp(2.4rem,7vw,4.6rem);
  text-align: center;
}


/* SECTIONS / CARDS */
section{scroll-margin-top:80px;padding:80px 0;border-top:1px solid #1a1a24}
.card{background:linear-gradient(180deg,#15151d,#0f0f15);border:1px solid #242433;
  border-radius:18px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.card.game{padding:1rem}

/* GRID */
.grid-2{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.2rem;border-radius:14px;background:linear-gradient(180deg,#2a2a36,#171721);
  color:#fff;border:1px solid #2c2c38;box-shadow:0 10px 30px rgba(0,0,0,.35);
  text-transform:uppercase;font-weight:800;letter-spacing:.5px;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,var(--accent),#a3120b);border:1px solid #c31b12}
.btn.ghost{background:rgba(0,0,0,.45);border:1px solid #333}

/* CTAs */
.cta-row{display:flex;gap:.6rem;flex-wrap:wrap}
.cta-row.center{justify-content:center}

/* FORMS */
form label{display:block;margin:.6rem 0;font-weight:600;font-size:.92rem;color:#cfd1d9}
input,textarea{width:100%;padding:.9rem 1rem;border-radius:12px;border:1px solid #2b2b38;background:#101018;color:#e7e9ef}
textarea{min-height:160px;resize:vertical}

/* DIALOG MODAL (for trailers) */
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-card{background:#141414;color:#fff;width:min(960px,96vw);border-radius:12px;padding:1rem}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.icon-btn{background:#222;border:1px solid #333;border-radius:8px;padding:.4rem .6rem;color:#fff}
.modal-body{padding:.25rem}
.modal-video{width:100%;max-height:70svh;height:auto}

/* FOOTER */
footer{padding:40px 0 80px;color:#9da3ab;text-align:center}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.fancy{font-family:'UnifrakturCook','Nosifer',cursive,fantasy}

/* bottom fixed spinning logos */
.corner-bottom{ bottom:.5rem; top:auto; }
.corner-bottom-left{ left:.5rem; right:auto; }
.corner-bottom-right{ right:.5rem; left:auto; }

/* Mission wood frame */
.mission-frame{
  background: url("../../Images/WoodFloor.png") center/cover no-repeat;
  border: 6px solid #4a2c12;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  color: #fff;
}
.mission-frame h2,
.mission-frame p,
.mission-frame li{
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
}


/* === Mission frame tweaks === */
.mission-frame{
  color:#000;                         /* make text black */
}
.mission-frame h2{
  /* ~3x larger heading */
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  color:#000;
}
.mission-frame p,
.mission-frame li{
  /* ~2x larger body text */
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  color:#000;
}
.mission-frame .cta-row{
  justify-content:center;             /* center the button in the frame */
}
.mission-frame .checklist { font-size: inherit; }

/* === Mission framed panel === */
.mission-frame{
  position:relative;
  background: url("../Images/WoodFloor.png") center/cover no-repeat;
  padding: clamp(24px,4vw,48px) clamp(28px,5vw,80px);
  color:#111;
  text-shadow:none;
  border-radius: 8px; /* inner panel rounding under the frame cutout */
}
.mission-frame::before{
  content:"";
  position:absolute;
  inset:-28px;              /* thickness of the outer frame overlay */
  background:url("../Images/WoodFrame.png") center/contain no-repeat;
  pointer-events:none;
  z-index:1;
}
.mission-frame > *{ position:relative; z-index:2; } /* keep content above overlay */

/* headings & body scale */
.mission-frame h2{
  font-size: clamp(2.2rem,6vw,3.2rem);    /* ~2× */
  color:#111;
}
.mission-frame p{
  font-size: clamp(1.25rem,2.6vw,1.8rem); /* ~2× body */
  color:#111;
}
.mission-frame .checklist li{
  font-size: clamp(1.1rem,2.2vw,1.4rem);
  color:#111;
}

/* center CTA inside frame */
.mission-frame .cta-row{ justify-content:center; }

/* (optional) make the logo fill edge-to-edge at its section */
.logo-big{ width:100%; height:auto; display:block; }