/* online-aviator-game.bet — HOLO DECK shared styles */
@font-face{font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/Orbitron-var.woff2) format('woff2-variations')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/DMSans-var.woff2) format('woff2-variations')}

:root{
  --void:#140B0E;--deck:#1B1014;--slab:#241419;--slab2:#2D181F;
  --edge:rgba(255,255,255,.12);--edge2:rgba(229,42,61,.40);
  --lit:#F7F0F1;--dim:#C7ADB3;
  --jet:#E52A3D;--jetup:#FF5F70;--au:#FFC43D;--audeep:#E0A72A;--auink:#2A1A00;
  --lift:rgba(0,0,0,.45);
  --wa:#25D366;--waink:#04250F;
  --rad:16px;--df:'Orbitron',system-ui,sans-serif;--bf:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%;margin:0;background:var(--void);color:var(--lit);
  font-family:var(--bf);font-size:1.03rem;line-height:1.7}
main{max-width:100%;overflow-x:clip}
img{max-width:100%;height:auto}
h1,h2{font-family:var(--df);line-height:1.2;color:#fff;letter-spacing:.01em}
h3,h4{font-family:var(--bf);font-weight:700;line-height:1.3;color:#fff}
a{color:var(--jetup)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--au);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--au);color:var(--auink);padding:10px 16px;font-weight:700;z-index:99}
.skip-link:focus{left:0}

/* ---- holographic surfaces ---- */
.pane{position:relative;background:linear-gradient(168deg,#22141A,#1A0F13);
  border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px -18px rgba(0,0,0,.9)}
.pane::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,196,61,.55),transparent)}
.pane>*{position:relative;z-index:1}
.rimlit{border:1px solid transparent;
  background:linear-gradient(var(--deck),var(--deck)) padding-box,
             linear-gradient(120deg,rgba(229,42,61,.85),rgba(255,196,61,.75) 60%,rgba(255,255,255,.14)) border-box}
.floor{position:absolute;left:0;right:0;bottom:0;height:280px;perspective:600px;pointer-events:none;overflow:hidden}
.floor i{position:absolute;inset:0;transform:rotateX(76deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:linear-gradient(transparent,#000 72%);mask-image:linear-gradient(transparent,#000 72%)}
.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;opacity:.30}
.tilt{transition:transform .45s ease,box-shadow .45s ease}
@media(hover:hover) and (min-width:900px){
  .tilt{transform:perspective(1400px) rotateY(-2.2deg)}
  .tilt:hover{transform:perspective(1400px) rotateY(0deg) translateY(-4px);box-shadow:0 22px 50px -20px rgba(0,0,0,.95)}
}

/* ---- header: holobar + native details dropdown (zero JS) ---- */
.holobar{position:sticky;top:0;z-index:60;width:100%;max-width:100vw;background:rgba(20,11,14,.92);
  border-bottom:1px solid var(--edge2);backdrop-filter:blur(10px)}
.holobar-in{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:11px 18px;position:relative}
.mark{display:inline-flex;align-items:center;min-height:44px}
.mark img{height:31px;width:auto;display:block}
.rays{display:flex;gap:3px;margin-left:auto;align-items:center}
.ray{color:var(--lit);text-decoration:none;font-family:var(--df);font-weight:700;font-size:.82rem;
  letter-spacing:.02em;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:9px}
.ray:hover{background:var(--slab);color:#fff}
.ray[aria-current="page"]{color:var(--au);box-shadow:inset 0 -2px 0 var(--au)}
.beam{background:var(--au)!important;color:var(--auink)!important;font-family:var(--df);font-weight:700;
  border-radius:999px;padding:12px 19px!important;box-shadow:0 6px 16px -6px rgba(255,196,61,.55);margin-left:7px}
.beam:hover{background:var(--audeep)!important}
.navdrop{display:none;margin-left:auto}
.navdrop>summary{list-style:none;cursor:pointer;min-width:48px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:10px;
  color:var(--lit);font-size:1.35rem;line-height:1}
.navdrop>summary::-webkit-details-marker{display:none}
.navdrop .drop{position:absolute;top:100%;left:0;right:0;background:var(--deck);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge2);display:flex;flex-direction:column;padding:6px 0}
.navdrop .drop .ray{border-radius:0;padding:14px 22px;font-size:.9rem}
.navdrop .drop .beam{margin:10px 22px;align-self:flex-start}
@media(max-width:980px){ .rays{display:none} .navdrop{display:block} }

/* ---- buttons ---- */
.launch{display:inline-flex;align-items:center;justify-content:center;background:var(--au);color:var(--auink);
  font-family:var(--df);font-weight:700;font-size:1rem;text-decoration:none;padding:14px 28px;border-radius:999px;
  min-height:44px;box-shadow:0 8px 20px -8px rgba(255,196,61,.6)}
.launch:hover{background:var(--audeep)}
.launch.wa{background:var(--wa);color:var(--waink);box-shadow:0 8px 20px -8px rgba(37,211,102,.55)}
.launch.wa:hover{background:#1fbb59}
.launchrow{display:flex;gap:13px;flex-wrap:wrap}

/* ---- layout ---- */
.bay{max-width:1140px;margin:0 auto;padding:0 18px}
.bay-n{max-width:820px;margin:0 auto;padding:0 18px}
.trail{font-size:.85rem;color:var(--dim);padding:16px 0 0}
.trail a{color:var(--dim)}

/* ---- figure ---- */
.shot{margin:28px auto;max-width:820px;width:100%}
.shot img{display:block;width:100%;height:auto;border-radius:var(--rad);border:1px solid var(--edge)}
.shot figcaption{margin-top:9px;font-size:.85rem;color:var(--dim);text-align:center}

/* ---- seo box ---- */
.seo-box{max-width:1140px;margin:36px auto;padding:22px 26px;background:var(--deck);border:1px solid var(--edge);
  border-radius:var(--rad);max-height:296px;overflow-y:auto}
.seo-box h2{font-size:1.15rem;margin:0 0 10px}
.seo-box h3{font-size:1rem;margin:15px 0 6px}
.seo-box p,.seo-box li,.seo-box dd,.seo-box td,.seo-box th{font-size:.9rem;color:var(--dim)}
.seo-box ul,.seo-box ol{padding-left:20px;margin:8px 0}
.seo-box table{border-collapse:collapse;width:100%}
.seo-box td,.seo-box th{border:1px solid var(--edge);padding:6px 9px;text-align:left}
.seo-box dl{margin:8px 0}
.seo-box dt{font-weight:700;color:var(--lit);margin-top:10px}
.seo-box dd{margin:2px 0 0 0}
.seo-box .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.seo-box .duo{grid-template-columns:1fr}}

/* ---- chips ---- */
.also-search{max-width:1140px;margin:0 auto 36px;padding:0 18px}
.also-search h2{font-size:1.05rem}
.also-search ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:12px 0 0}
.also-search li a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;
  background:var(--slab);border:1px solid var(--edge);color:var(--dim);text-decoration:none;font-size:.85rem}
.also-search li a:hover{border-color:var(--au);color:var(--lit)}

/* ---- footer ---- */
.dock{background:#0D0608;border-top:1px solid var(--edge2);margin-top:44px}
.dock-in{max-width:1140px;margin:0 auto;padding:36px 18px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.dock h3{font-family:var(--df);font-size:.95rem;margin:0 0 12px;color:var(--au)}
.dock p{color:var(--dim);font-size:.9rem}
.dock a{color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;min-height:38px}
.dock a:hover{color:var(--lit)}
.dock ul{list-style:none;padding:0;margin:0}
.orbits{display:flex;gap:11px;flex-wrap:wrap;margin-top:12px}
.orbits a{width:44px;height:44px;border:1px solid var(--edge);border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
.orbits a:hover{border-color:var(--au)}
.orbits svg{width:21px;height:21px;fill:var(--dim)}
.orbits a:hover svg{fill:var(--lit)}
.tpilot{display:inline-flex;align-items:center;gap:8px;margin-top:14px;border:1px solid var(--edge);border-radius:10px;
  padding:9px 14px;text-decoration:none;color:var(--lit)!important;font-size:.88rem;min-height:44px}
.tpilot svg{width:20px;height:20px}
.baseline{border-top:1px solid var(--edge);padding:16px 18px;text-align:center;color:var(--dim);font-size:.82rem}
@media(max-width:820px){.dock-in{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.dock-in{grid-template-columns:1fr}}

/* ---- whatsapp float ---- */
.wbeacon{position:fixed;right:18px;bottom:18px;width:60px;height:60px;background:var(--wa);border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:70;box-shadow:0 6px 18px rgba(0,0,0,.45);animation:wping 2.3s infinite}
.wbeacon svg{width:32px;height:32px;fill:#fff}
@keyframes wping{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .tilt{transform:none!important}
}

/* float button: keep computed colour on the green disc contrast-safe */
.wbeacon{color:#04250F}

/* closed dropdown must not lay out — phantom box pushed the CTA pill past 360px */
.navdrop:not([open]) .drop{display:none}