:root{
  --bg: #06060a;

  --text: #ffeedd;
  --text-strong: rgba(255,238,221,0.94);
  --text-muted: rgba(255,238,221,0.74);
  --text-soft: rgba(255,238,221,0.56);
  --text-dim: rgba(255,238,221,0.42);

  --card: rgba(0,0,0,0.58);
  --card-soft: rgba(0,0,0,0.28);
  --card-mid: rgba(0,0,0,0.42);
  --card-strong: rgba(0,0,0,0.72);

  --ember: #ff5a00;
  --ember2: #ffb300;
  --ember3: #ff2a00;

  --border-soft: rgba(255,140,0,0.18);
  --border: rgba(255,140,0,0.26);
  --border-strong: rgba(255,179,0,0.36);

  --glass: rgba(0,0,0,0.28);
  --glass-2: rgba(0,0,0,0.38);
  --glass-3: rgba(0,0,0,0.48);

  --shadow-soft:
    0 0 14px rgba(255,90,0,0.08);

  --shadow-med:
    0 0 22px rgba(255,90,0,0.12),
    0 0 48px rgba(255,179,0,0.08);

  --shadow-accent:
    0 0 18px rgba(255,90,0,0.22),
    0 0 42px rgba(255,179,0,0.14);

  --shadow-inset:
    inset 0 0 0 1px rgba(0,0,0,0.48);

  --radius: 18px;
  --radius-sm: 14px;
  --radius-lg: 22px;

  --maxw: 1120px;

  --transition-fast: 140ms ease;
  --transition-med: 180ms ease;
}

*{ box-sizing:border-box; }

html{
  min-height:100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  min-height:100svh;
  margin:0;
  position:relative;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background-color:var(--bg);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

iframe{
  border:0;
}

a{
  color:inherit;
}

a:hover{
  opacity:.98;
}

/* =========================================================
   BACKGROUND
========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255,90,0,0.18), transparent 60%),
    linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.84)),
    url("/bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

@supports (background-image: image-set(url("/bg-1280.webp") 1x)){
  body::before{
    background:
      radial-gradient(1200px 600px at 50% 0%, rgba(255,90,0,0.18), transparent 60%),
      linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.84)),
      image-set(
        url("/bg-1280.webp") 1x,
        url("/bg-1920.webp") 2x
      );
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,140,0,.14), transparent 60%),
    radial-gradient(900px 500px at 88% 10%, rgba(255,179,0,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.62));
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 16px 46px;
}

/* =========================================================
   NAV
========================================================= */
.topnav{
  position:sticky;
  top:12px;
  z-index:50;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;

  padding:12px 14px;
  border-radius:16px;

  background:rgba(0,0,0,0.45);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  backdrop-filter:none;
}

html.ready .topnav{
  backdrop-filter:blur(10px);
}

.navlinks{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  max-width:100%;
  min-width:0;
}

.navlink{
  flex:0 0 auto;
  min-width:0;
  white-space:nowrap;
  text-align:center;

  padding:11px 16px;
  border-radius:14px;

  font-size:13px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none;

  color:rgba(255,238,221,0.86);
  background:rgba(0,0,0,0.30);
  border:1px solid var(--border-soft);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.navlink::before,
.navlink::after{
  content:none !important;
}

.navlink:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,0.42);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-soft);
}

.navlink.active{
  color:#1a0b06;
  background:linear-gradient(135deg, var(--ember3), var(--ember2));
  border:1px solid rgba(255,140,0,0.24);
  box-shadow:var(--shadow-accent);
}

@media (max-width: 720px){
  .navlinks{
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap;
    padding:6px 4px;
  }

  .navlinks::-webkit-scrollbar{
    display:none;
  }
}

/* =========================================================
   HERO
========================================================= */
.heroFrame{
  margin-top:14px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);

  border:1px solid rgba(255,179,0,0.34);
  background:linear-gradient(180deg, rgba(0,0,0,0.76), rgba(0,0,0,0.38));
  box-shadow:var(--shadow-med);
}

.heroFrame__glow{
  position:absolute;
  inset:-60px;
  pointer-events:none;
  opacity:0;

  background:
    radial-gradient(700px 260px at 18% 35%, rgba(255,90,0,0.24), transparent 62%),
    radial-gradient(780px 280px at 85% 38%, rgba(255,179,0,0.18), transparent 62%),
    radial-gradient(700px 340px at 50% 120%, rgba(255,42,0,0.16), transparent 60%);
}

html.ready .heroFrame__glow{
  opacity:1;
  filter:blur(16px);
  animation:emberFlicker 6.5s ease-in-out infinite;
}

@keyframes emberFlicker{
  0%, 100% { opacity: 0.94; transform: translateY(0); }
  40%      { opacity: 0.90; transform: translateY(0.4px); }
  70%      { opacity: 0.98; transform: translateY(-0.3px); }
}

.heroFrame__inner{
  position:relative;
  padding:18px;
}

.heroFrame__inner::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:18px;
  pointer-events:none;
  border:1px solid rgba(255,140,0,0.24);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.52);
}

.heroTop{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}

.heroTop__label{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:12px;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--text-muted);
}

.heroTop__dot{
  width:10px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--ember3), var(--ember2));
  box-shadow:0 0 10px rgba(255,90,0,0.28);
}

.heroMain{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:280px 1fr;
  gap:18px;
  align-items:center;

  padding:6px 4px 10px;
}

.heroLogo{
  position:relative;
  z-index:2;
  overflow:hidden;
  aspect-ratio:1 / 1;
  border-radius:22px;

  background:rgba(0,0,0,0.34);
  border:1px solid rgba(255,179,0,0.30);
  box-shadow:
    var(--shadow-inset),
    0 0 20px rgba(255,90,0,0.14);
}

.heroLogo::before,
.heroLogo::after{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  border:2px solid rgba(255,179,0,0.52);
  opacity:.95;
}

.heroLogo::before{
  top:14px;
  left:14px;
  border-right:none;
  border-bottom:none;
}

.heroLogo::after{
  right:14px;
  bottom:14px;
  border-left:none;
  border-top:none;
}

.heroLogo__img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.heroCopy{
  min-width:0;
}

.heroRole{
  margin-bottom:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,238,221,0.78);
}

.heroTitle{
  margin:0 0 8px;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  font-weight:1000;
  line-height:1;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(0,0,0,0.45);
}

.heroSub{
  margin:0 0 14px;
  max-width:760px;
  font-size:14px;
  line-height:1.6;
  color:var(--text-strong);
  text-shadow:0 0 10px rgba(0,0,0,0.45);
}

.heroChips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 16px;
}

.chip{
  padding:10px 14px;
  border-radius:999px;

  font-size:12px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(255,238,221,0.90);

  background:rgba(0,0,0,0.24);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-inset);
}

.heroActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

/* =========================================================
   PANELS
========================================================= */
.panel{
  position:relative;
  overflow:hidden;
  margin-top:16px;
  border-radius:var(--radius);

  background:linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.42));
  border:1px solid rgba(255,179,0,0.28);
  box-shadow:var(--shadow-soft);
}

.panel::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:calc(var(--radius) - 8px);
  pointer-events:none;
  border:1px solid rgba(255,140,0,0.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.52);
  opacity:.9;
}

.panelHead{
  position:relative;
  z-index:1;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,140,0,0.20);
  background:linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.20));
}

.panelHead--split{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.panelTitle{
  margin:0;
  font-size:15px;
  font-weight:1000;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.panelBody{
  position:relative;
  z-index:1;
  padding:16px;
}

.panelBody p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.65;
  color:var(--text-strong);
}

@media (hover:hover) and (pointer:fine){
  .panel{
    transition:
      transform var(--transition-med),
      box-shadow var(--transition-med),
      border-color var(--transition-med);
  }

  .panel:hover{
    transform:translateY(-1px);
    border-color:rgba(255,179,0,0.34);
    box-shadow:var(--shadow-med);
  }
}

/* =========================================================
   HOME ADDITIONS
========================================================= */
.proofStrip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.proofItem{
  padding:14px;
  border-radius:16px;
  background:rgba(0,0,0,0.22);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-inset);
}

.proofItem strong{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.proofItem span{
  display:block;
  font-size:12px;
  line-height:1.5;
  color:var(--text-muted);
}

.sectionIntro{
  margin:0 0 14px;
  color:var(--text-muted);
}

.featureGrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

.featureCard{
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.24);
  box-shadow:var(--shadow-inset);
}

.featureCard h3{
  margin:0 0 8px;
  font-size:14px;
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.featureCard p{
  margin:0 0 12px;
  color:var(--text-muted);
}

.hardwareTeaser{
  padding:24px 20px;
  text-align:center;
  border-radius:16px;
  background:rgba(0,0,0,0.28);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-inset);
}

.hardwareTeaser h3{
  margin:0 0 12px;
  font-size:1.35rem;
  font-weight:1000;
  letter-spacing:.8px;
  color:#fff;
}

.hardwareTeaser p{
  margin:0 auto 20px;
  max-width:640px;
  color:var(--text-muted);
}

.aboutLead{
  color:var(--text-strong);
  font-weight:700;
}

/* =========================================================
   UNIVERSAL GRIDS / CARDS
========================================================= */
.cardsGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 820px){
  .cardsGrid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 1180px){
  .cardsGrid{
    grid-template-columns:repeat(3, 1fr);
  }
}

.mediaCard,
.playlistCard,
.updateCard,
.rigCard,
.recCard{
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:var(--glass);
  box-shadow:var(--shadow-inset);
}

.mediaCard{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.mediaThumb{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid var(--border-soft);
}

.mediaThumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

.mediaBody{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px 14px;
}

.mediaTitle{
  margin:0;
  font-size:13px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.mediaText{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--text-muted);
}

.mediaActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}

/* =========================================================
   GAMES PAGE
========================================================= */
body.games .gamesGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}

body.games .gameCard{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.26);
  box-shadow:var(--shadow-inset);
  transition:
    transform var(--transition-med),
    box-shadow var(--transition-med),
    border-color var(--transition-med);
}

body.games .gameCard:hover{
  transform:translateY(-3px);
  border-color:rgba(255,140,0,0.32);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,140,0,0.14),
    0 0 20px rgba(255,140,0,0.10);
}

body.games .gameMedia{
  position:relative;
  overflow:hidden;
  aspect-ratio:2 / 3;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid var(--border-soft);
}

body.games .gameMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .25s ease;
}

body.games .gameCard:hover .gameMedia img{
  transform:scale(1.06);
}

body.games .gameBody{
  padding:12px;
}

body.games .gameTitle{
  margin:0 0 6px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,238,221,0.95);
}

body.games .gameDesc{
  margin:0 0 10px;
  min-height:36px;
  font-size:12px;
  line-height:1.5;
  color:var(--text-muted);
}

body.games .gameLinks{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

body.games .miniLinksRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

body.games .gameTag{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.18);

  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(255,238,221,0.85);
}

body.games .gameQuick{
  padding:0 0 2px;
  border:none;
  border-bottom:1px solid rgba(255,140,0,0.22);
  background:none;
  cursor:pointer;

  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(255,238,221,0.88);

  transition:opacity .15s ease, border-color .15s ease;
}

body.games .gameQuick:hover{
  opacity:1;
  border-bottom-color:rgba(255,140,0,0.55);
}

@media (max-width: 1100px){
  body.games .gamesGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  body.games .gamesGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   PLAYLISTS / VIDEO
========================================================= */
.playlistGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 820px){
  .playlistGrid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 1180px){
  .playlistGrid{
    grid-template-columns:repeat(3, 1fr);
  }
}

.playlistCard{
  display:flex;
  flex-direction:column;
}

.playlistHead{
  padding:12px 14px;
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.22));
}

.playlistTitle{
  margin:0;
  font-size:13px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.playlistFrame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid var(--border-soft);
}

.playlistFrame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.playlistFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,140,0,0.12);
  background:linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.22));
}

.playlistNote{
  margin:0;
  font-size:12px;
  color:var(--text-muted);
}

/* =========================================================
   INTRO VIDEO / YOUTUBE LITE
========================================================= */
.introVideo{
  width:100%;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.28);
  box-shadow:var(--shadow-inset);
}

.ytLite{
  position:relative;
  display:grid;
  place-items:center;
}

.ytLite iframe{
  width:100%;
  height:100%;
}

.ytLite__thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

html.ready .ytLite__thumb{
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
}

.ytLite::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 240px at 50% 30%, rgba(255,179,0,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,90,0,0.10), rgba(0,0,0,0.55));
}

.ytLite__btn{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
}

.ytLite__play{
  position:relative;
  width:76px;
  height:54px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--ember3), var(--ember2));
  box-shadow:
    0 0 18px rgba(255,90,0,0.26),
    0 0 42px rgba(255,179,0,0.16),
    inset 0 0 0 1px rgba(0,0,0,0.25);
}

.ytLite__play::before{
  content:"";
  position:absolute;
  left:30px;
  top:16px;
  width:0;
  height:0;
  border-left:16px solid #1a0b06;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}

.ytLite__btn:focus-visible{
  outline:3px solid rgba(255,179,0,0.45);
  outline-offset:4px;
}

/* =========================================================
   RIG GRID
========================================================= */
.rigGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.rigMedia{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border-bottom:1px solid var(--border-soft);
}

.rigMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
}

html.ready .rigMedia img{
  transform:scale(1.02);
}

.rigMedia::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,90,0,0.08), rgba(0,0,0,0.55));
  box-shadow:
    inset 0 0 0 1px rgba(255,140,0,0.22),
    inset 0 -40px 60px rgba(0,0,0,0.65);
}

.rigLabel{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;

  font-size:11px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;

  color:#1a0b06;
  background:linear-gradient(135deg, var(--ember3), var(--ember2));
  box-shadow:
    0 0 12px rgba(255,90,0,0.26),
    0 0 24px rgba(255,179,0,0.14);
}

.rigContent{
  padding:12px 12px 14px;
}

.rigTitle{
  margin:0 0 10px;
  font-size:13px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.rigList{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,238,221,0.84);
}

.rigList li{
  margin:6px 0;
}

/* =========================================================
   GRID HELPERS / ABOUT / LINKS
========================================================= */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}

.aboutDivider{
  height:1px;
  margin:12px 0;
  border-radius:999px;
  background:rgba(255,140,0,0.18);
}

.linksGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

/* =========================================================
   FORMS / BUSINESS
========================================================= */
.formGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.field label{
  display:block;
  margin:0 0 8px;

  font-size:12px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,238,221,0.78);
}

.input,
.textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  outline:none;

  color:var(--text-strong);
  background:rgba(0,0,0,0.28);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-inset);
}

.textarea{
  min-height:120px;
  resize:vertical;
}

.input:focus,
.textarea:focus{
  border-color:rgba(255,179,0,0.45);
  box-shadow:
    0 0 0 3px rgba(255,179,0,0.14),
    inset 0 0 0 1px rgba(0,0,0,0.45);
}

.checkRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  line-height:1.55;
  color:rgba(255,238,221,0.78);
}

.checkRow input{
  margin-top:3px;
  transform:scale(1.05);
}

.noticeBox{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.28);

  font-size:12px;
  line-height:1.6;
  color:var(--text-muted);
}

.successBox{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,179,0,0.30);
  background:rgba(0,0,0,0.34);

  font-weight:1000;
}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.formStatus{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;

  font-size:12px;
  font-weight:1000;
  letter-spacing:.6px;
  text-transform:uppercase;

  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.22);
  color:var(--text-muted);
}

.formStatus[data-kind="busy"]{
  border-color:rgba(255,179,0,0.30);
  color:rgba(255,238,221,0.85);
}

.formStatus[data-kind="ok"]{
  border-color:rgba(255,179,0,0.40);
  color:var(--text-strong);
  box-shadow:0 0 16px rgba(255,90,0,0.12);
}

.formStatus[data-kind="error"]{
  border-color:rgba(255,90,0,0.40);
  color:var(--text-strong);
  box-shadow:0 0 16px rgba(255,42,0,0.12);
}

/* =========================================================
   BUTTONS / LINKS
========================================================= */
.btnPrimary,
.btnGhost,
.miniLink,
.btn-affiliate{
  font-weight:1000;
  text-decoration:none;
  transition:
    transform var(--transition-fast),
    filter var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btnPrimary,
.btnGhost{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.btnPrimary{
  padding:16px 18px;
  color:#1a0b06;
  background:linear-gradient(135deg, var(--ember3), var(--ember2));
  border:1px solid rgba(255,140,0,0.24);
  box-shadow:
    0 0 18px rgba(255,90,0,0.22),
    0 0 42px rgba(255,179,0,0.14),
    inset 0 0 0 1px rgba(0,0,0,0.22);
}

.btnPrimary:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.btnGhost{
  padding:14px 16px;
  color:var(--text-strong);
  background:rgba(0,0,0,0.28);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-inset);
}

.btnGhost:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,0.40);
  border-color:var(--border-strong);
}

.miniLink{
  display:inline-block;
  padding:8px 12px;
  border-radius:12px;

  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;

  color:#1a0b06;
  background:linear-gradient(135deg, var(--ember3), var(--ember2));
  box-shadow:
    0 0 14px rgba(255,90,0,0.18),
    0 0 34px rgba(255,179,0,0.12);
}

.miniLink:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.btn-affiliate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;

  padding:8px 12px;
  border-radius:12px;
  font-size:11px;
  letter-spacing:.4px;
  text-transform:uppercase;

  color:var(--text-strong);
  background:rgba(255,140,0,0.14);
  border:1px solid rgba(255,140,0,0.34);
  box-shadow:var(--shadow-inset);
}

.btn-affiliate:hover{
  transform:translateY(-1px);
  background:rgba(255,140,0,0.26);
  border-color:rgba(255,140,0,0.58);
  color:#fff;
}

/* =========================================================
   SMALL UI HELPERS
========================================================= */
.smallNote,
.tinyNote,
.mutedNote{
  margin:0 0 10px;
  line-height:1.6;
  color:var(--text-muted);
}

.tinyNote{
  margin-top:10px;
  font-size:12px;
}

.mutedNote{
  font-size:13px;
}

/* =========================================================
   UPDATES GRID
========================================================= */
.updatesGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.updateCard{
  display:flex;
  flex-direction:column;
}

.updateTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--border-soft);
  background:rgba(0,0,0,0.22);
}

.updateMeta{
  font-size:12px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,238,221,0.80);
}

.updateBodyWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
}

.thumbLink{
  display:block;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.35);
}

.thumbImg{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================
   MODAL
========================================================= */
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}

.modal.is-open{
  display:block;
}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.70);
}

.modal__panel{
  position:relative;
  width:min(720px, calc(100vw - 28px));
  margin:7vh auto 0;
  overflow:hidden;
  transform:translateY(6px);

  border-radius:18px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.72);
  box-shadow:0 20px 70px rgba(0,0,0,0.55);
}

html.ready .modal__panel{
  backdrop-filter:blur(10px);
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,140,0,0.16);
  background:linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.20));
}

.modal__title{
  margin:0;
  font-size:14px;
  font-weight:1000;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.modal__close{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.35);
  color:rgba(255,238,221,0.88);
  cursor:pointer;
  font-weight:1000;
  line-height:1;
}

.modal__body{
  padding:16px;
}

.modal__foot{
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,140,0,0.12);
}

.modal__body h4{
  margin:0 0 8px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.modal__body p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,238,221,0.84);
}

body.modal-open{
  overflow:hidden;
}

/* =========================================================
   HARDWARE PAGE
========================================================= */
.hwGrid2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
}

.embedFrame{
  overflow:hidden;
  aspect-ratio:16 / 9;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.28);
  box-shadow:var(--shadow-inset);
}

.embedFrame iframe{
  width:100%;
  height:100%;
}

.recGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.recCard{
  display:flex;
  flex-direction:column;
  padding:12px;
}

.recTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;

  font-size:13px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-strong);
}

.recTag{
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.22);

  font-size:11px;
  color:rgba(255,238,221,0.82);
}

.recList{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,238,221,0.78);
}

/* affiliate gear */
.disclaimerBox{
  margin-bottom:20px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(0,0,0,0.24);
  border:1px solid rgba(255,140,0,0.20);
  border-left:3px solid rgba(255,140,0,0.50);
}

.gearList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.gearItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.gearItem:last-child{
  padding-bottom:0;
  border-bottom:none;
}

.gearInfo{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.gearType{
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ember2);
}

.gearName{
  max-width:180px;
  font-size:12px;
  color:rgba(255,238,221,0.90);
}

/* =========================================================
   ANCHOR OFFSET FOR STICKY NAV
========================================================= */
.mediaCard[id],
.panel[id],
section[id]{
  scroll-margin-top: 96px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width: 820px){
  .formGrid{
    grid-template-columns:1fr 1fr;
  }

  .formGrid .full{
    grid-column:1 / -1;
  }

  .updatesGrid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 1180px){
  .updatesGrid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width: 980px){
  .grid2{
    grid-template-columns:1fr;
  }

  .heroMain{
    grid-template-columns:240px 1fr;
  }

  .rigGrid{
    grid-template-columns:1fr 1fr;
  }

  .proofStrip,
  .featureGrid{
    grid-template-columns:1fr 1fr;
  }

  .hwGrid2{
    grid-template-columns:1fr;
  }

  .recGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .heroMain{
    grid-template-columns:1fr;
    text-align:left;
    gap:14px;
  }

  .heroLogo{
    max-width:240px;
  }

  .heroTitle{
    font-size:42px;
  }

  .navlinks{
    gap:8px;
  }

  .navlink{
    padding:10px 14px;
  }

  body.games .gamesGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .proofStrip,
  .featureGrid{
    grid-template-columns:1fr;
  }

  .heroActions{
    flex-direction:column;
  }
}

@media (max-width: 520px){
  .heroFrame__inner{
    padding:14px;
  }

  .heroMain{
    grid-template-columns:1fr;
    text-align:center;
    gap:12px;
  }

  .heroLogo{
    max-width:200px;
    margin:0 auto;
  }

  .heroTitle{
    font-size:30px;
  }

  .heroSub{
    font-size:13px;
  }

  .heroChips{
    justify-content:center;
  }

  .rigGrid{
    grid-template-columns:1fr;
  }
}