/* ============================================================
   HRAVA — bespoke layer on top of Tailwind. Atmosphere, 3D, motion.
   Cinematic dark gaming-tech: near-black, electric cyan, real depth.
   ============================================================ */
:root{
  --ink:#0b1024; --cy:#f3c24b; --cy-deep:#b49038; --line:rgba(255,255,255,.08);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box }
/* Shared content container — matches the homepage (index.html) --inset model so headers and
   sections sit flush to the same centred 1300px column on every page. */
.shell{ width:100%; margin-inline:auto; padding-inline:max(clamp(18px,5.5vw,80px),calc((100% - 1300px) / 2)) }
html{ scroll-behavior:smooth }
body{ background:var(--ink); color:#eaf2f6; -webkit-font-smoothing:antialiased; overflow-x:clip }
::selection{ background:var(--cy); color:#06121a }

/* ---- ambient backdrop: gradient mesh + grain + three canvas ---- */
.bg-fx{ position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -8%, rgba(243,194,75,.16), transparent 60%),
    radial-gradient(50vw 45vh at 8% 12%, rgba(243,194,75,.08), transparent 55%),
    radial-gradient(70vw 60vh at 50% 115%, rgba(180,144,56,.12), transparent 60%);
}
#bg-canvas{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.9 }
.grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- type helpers ---- */
.gtext{ color:var(--cy) }
.kicker{ font:700 12px/1 'Onest',sans-serif; letter-spacing:.28em; text-transform:uppercase; color:var(--cy) }
.display{ font-family:'Onest',sans-serif; font-weight:800; letter-spacing:.02em; line-height:.95 }
.h-stroke{ -webkit-text-stroke:1px rgba(255,255,255,.6); color:transparent }

/* ---- buttons ---- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.55rem; font-weight:700; border-radius:999px;
  padding:.95rem 1.6rem; transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; will-change:transform }
.btn-cy{ background:var(--cy); color:#06121a }
.btn-cy:hover{ background:#f7d788 }
.btn-ghost{ border:1px solid rgba(255,255,255,.16); color:#eaf2f6 }
.btn-ghost:hover{ border-color:var(--cy); color:var(--cy) }

/* ---- glass + line ---- */
.glass{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.hair{ border:1px solid var(--line) }
.chip{ display:inline-flex; align-items:center; gap:.5rem; font:700 12px/1 'Onest'; padding:.55rem .85rem;
  border-radius:999px; border:1px solid var(--line); color:#cdd6e4; background:rgba(255,255,255,.03) }
.dot{ width:7px; height:7px; border-radius:999px; background:var(--cy); box-shadow:0 0 12px var(--cy) }

/* ---- marquee ---- */
.marquee{ display:flex; gap:3rem; width:max-content; animation:marq 28s linear infinite }
.marquee.rev{ animation-direction:reverse }
@keyframes marq{ to{ transform:translateX(-50%) } }
.marquee:hover{ animation-play-state:paused }

/* ============================================================
   CSS-3D MacBook — crisp, always renders (Three is ambient only)
   ============================================================ */
.stage{ perspective:1600px; perspective-origin:50% 40% }
.macbook{ position:relative; width:min(72vw,640px); transform-style:preserve-3d;
  transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-14deg)); transition:transform .25s var(--ease) }
.mb-screen{ position:relative; border-radius:18px; padding:11px 11px 14px; transform-style:preserve-3d;
  background:linear-gradient(160deg,#20262f,#0c0f15); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03) }
.mb-screen::after{ content:""; position:absolute; inset:11px; border-radius:10px; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.12), transparent 30%); mix-blend-mode:screen; opacity:.5 }
.mb-disp{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/10.2; background:#070b12 }
.mb-cam{ position:absolute; top:5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:999px;
  background:#0a0f16; box-shadow:0 0 0 1px rgba(255,255,255,.07) }
.mb-base{ position:relative; height:16px; margin:0 auto; width:104%; left:-2%;
  background:linear-gradient(180deg,#aeb6c2,#5d6675); border-radius:0 0 16px 16px; transform:translateZ(-1px) }
.mb-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:16%; height:7px;
  background:linear-gradient(180deg,#3a414d,#2a303a); border-radius:0 0 8px 8px }
.mb-glow{ position:absolute; inset:-12% -6% -30%; z-index:-1; filter:blur(40px); opacity:.55;
  background:radial-gradient(50% 60% at 50% 40%, rgba(243,194,75,.5), transparent 70%) }
.scan{ position:absolute; inset:0; pointer-events:none; opacity:.06;
  background:repeating-linear-gradient(180deg, #fff 0 1px, transparent 1px 3px) }

/* ---- in-screen app mock ---- */
.app{ position:absolute; inset:0; display:flex; flex-direction:column; font-family:'Onest',sans-serif }
.app-bar{ display:flex; align-items:center; gap:6px; padding:7px 10px; background:#0b1018; border-bottom:1px solid rgba(255,255,255,.06) }
.tl{ width:8px; height:8px; border-radius:999px } .tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840}
.app-body{ flex:1; display:grid; grid-template-columns:64px 1fr; min-height:0 }
.app-side{ background:#090d14; border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px 0 }
.app-side i{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.06) }
.app-side i.on{ background:rgba(243,194,75,.18); box-shadow:inset 0 0 0 1px rgba(243,194,75,.5) }
.app-main{ padding:12px; overflow:hidden }
.app-hero{ height:34%; min-height:64px; border-radius:10px; background:linear-gradient(110deg,#13314e,#1f5e6b 60%,#0c2330);
  border:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; padding:10px; position:relative; overflow:hidden }
.app-hero::after{ content:"▶ PLAY"; position:absolute; top:10px; right:10px; font:800 9px/1 'Onest'; letter-spacing:.1em;
  color:#06121a; background:var(--cy); padding:5px 8px; border-radius:999px }
.app-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px }
.cover{ aspect-ratio:3/4; border-radius:7px; border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden }
.cover::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, var(--c1,#2b3a5e), var(--c2,#0e1a2c)) }
.cover::after{ content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(0deg, rgba(0,0,0,.5), transparent) }

/* ---- game library cards (section) ---- */
.gcard{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:3/4;
  transition:transform .4s var(--ease), border-color .4s; transform-style:preserve-3d }
.gcard:hover{ transform:translateY(-8px); border-color:rgba(243,194,75,.5) }
.gcard .art{ position:absolute; inset:0; background:linear-gradient(150deg,var(--c1),var(--c2)) }
.gcard .art::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 50% at 50% 0%, rgba(255,255,255,.18), transparent 60%) }
.gcard .meta{ position:absolute; inset:auto 0 0 0; padding:14px; background:linear-gradient(0deg, rgba(0,0,0,.7), transparent);
  font-family:'Onest'; font-weight:800; font-size:14px; z-index:1 }
.gcard .tag{ position:absolute; top:10px; left:10px; z-index:1; font:800 10px/1 'Onest'; letter-spacing:.06em;
  padding:5px 8px; border-radius:999px; background:rgba(4,20,26,.6); color:var(--cy); border:1px solid rgba(243,194,75,.4) }

/* ---- feature sticky media ---- */
.feat-media{ aspect-ratio:4/3; border-radius:20px; overflow:hidden; position:relative; border:1px solid var(--line) }

/* ---- reveal fallback (only applied when GSAP present, via .js class) ---- */
.js .reveal{ opacity:0; transform:translateY(24px) }

/* ---- preloader ---- */
#pre{ position:fixed; inset:0; z-index:10000; background:var(--ink); display:grid; place-items:center }
#pre .pw{ font-family:'Onest'; font-weight:900; font-size:clamp(40px,9vw,120px); letter-spacing:-.04em; color:#fff }
#pre .pc{ position:absolute; bottom:7vh; right:7vw; font-family:'Onest'; font-weight:800; color:var(--cy); font-size:clamp(28px,6vw,64px) }
.pre-hidden{ opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s }

/* ---- nav underline ---- */
.navlink{ position:relative; color:#aeb8c8; font-weight:600; transition:color .2s }
.navlink:hover{ color:#fff }
.navlink::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--cy); transition:width .3s var(--ease) }
.navlink:hover::after, .navlink[aria-current]::after{ width:100% }

/* ---- counters / stats ---- */
.stat-num{ font-family:'Onest'; font-weight:900; line-height:1; color:var(--cy) }

/* ============================================================
   Prose / legal / content (reused by legal + simple content pages)
   ============================================================ */
.page-hero{ padding:128px 0 36px; border-bottom:1px solid var(--line) }
.page-hero .container{ max-width:880px; margin:0 auto; padding:0 24px }
.page-hero h1{ font-family:'Onest'; font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(26px,3.6vw,44px) }
.page-hero p{ color:var(--mist,#9aa6bd); font-size:18px; max-width:620px; margin-top:14px }
.prose{ max-width:760px; margin:0 auto; padding:48px 24px 0 }
.prose .legal-meta{ color:#9aa6bd; font-size:14px; margin-bottom:32px; padding-bottom:18px; border-bottom:1px solid var(--line) }
.prose h2{ font-family:'Onest'; font-weight:800; font-size:22px; margin:38px 0 12px; color:#fff }
.prose h2:first-of-type{ margin-top:0 }
.prose h3{ font-weight:800; font-size:18px; margin:24px 0 10px; color:#eaf2f6 }
.prose p, .prose li{ color:#c2c9d6; font-size:16px; line-height:1.75 }
.prose p{ margin-bottom:15px }
.prose ul, .prose ol{ margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:8px }
.prose a{ color:var(--cy); text-decoration:none } .prose a:hover{ text-decoration:underline }
.prose strong{ color:#fff }
.prose code{ font-family:ui-monospace,Menlo,monospace; font-size:14px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--cy) }
.prose .callout{ border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--cy); background:rgba(255,255,255,.03); border-radius:10px; padding:16px 18px; margin:8px 0 22px; font-size:15px; color:#9aa6bd }
.toc{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-bottom:32px }
.toc h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#9aa6bd; margin-bottom:12px }
.toc ol{ columns:2; gap:24px; padding-left:18px } .toc a{ color:#c2c9d6; text-decoration:none } .toc a:hover{ color:var(--cy) }
@media (max-width:560px){ .toc ol{ columns:1 } }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .js .reveal{ opacity:1; transform:none }
}

/* no orphan words */
h1,h2,h3,h4,.font-display,.display{text-wrap:balance}
p,.lead,.text-mist{text-wrap:pretty}