:root {
  --c-gold: #f0c14b;
  --c-cream: #eef5ea;
  --c-bg-dark: #0f2417;
  --c-white: #fff;
  --c-sage-light: #bcd6b3;
  --c-accent-green: #5ab06a;
  --c-green-mid: #4a9e62;
  --c-sage: #c9dfc2;
  --c-sage-mid: #9dc294;
  --c-sage-dim: #6f9868;
  --c-gold-dark: #c99a2e;
  --c-green-dim: #2f5a3c;
  --c-gold-light: #f7d888;
  --c-cream-dim: #e2eedc;
  --c-cream-mid: #d3e6cb;
  --c-gold-soft: #e6c56e;
  --c-sage-pale: #e8f2e3;
  --c-gold-deep: #a67818;
  --c-bg-mid: #1c4a2e;
  --c-bg-black: #081409;
  /* NEUTRAL READING-TEXT TOKENS — always keep these desaturated/neutral (near-white/light-gray).
     Never repoint these at a saturated theme accent color when reskinning — body copy, nav
     text and subheads must stay readable regardless of what the accent palette does. */
  --c-text: #e8f0e4;
  --c-text-dim: #c3d4bd;
  /* button text color — flip this ONE variable when the button background changes from
     dark (needs light text, e.g. --c-white) to light (needs dark text, e.g. --c-bg-dark) */
  --c-btn-text: #0f2417;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Roboto',Arial,sans-serif;background:linear-gradient(160deg,var(--c-bg-black) 0%,var(--c-bg-mid) 28%,var(--c-bg-dark) 55%,var(--c-bg-mid) 78%,var(--c-bg-black) 100%);background-attachment:fixed;color:var(--c-text-dim);line-height:1.5;min-width:320px;overflow-x:hidden}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}
/* in-content links inside articles get a distinct color+underline so they read as links,
   not the same shade as body copy. The second rule MUST stay below and MUST have higher
   specificity (two classes) so CTA buttons that happen to sit inside .prose/.about-lead
   are never re-styled as underlined text links — this exact bug bit twice already. */
.prose a,.about-lead a{color:var(--c-gold);text-decoration:underline;text-decoration-color:rgba(240,193,75,.4);text-underline-offset:3px;transition:color .2s}
.prose a:hover,.about-lead a:hover{color:var(--c-gold-light)}
.cta-block a.btn-cta,.prose a.btn-cta,.about-lead a.btn-cta{color:var(--c-btn-text);text-decoration:none}

/* animations */
@keyframes t-glow{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes t-coin{0%{transform:translateY(-40px) rotate(0deg);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translateY(620px) rotate(320deg);opacity:0}}
@keyframes t-pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,193,75,.55),0 3px 12px rgba(74,158,98,.5);transform:scale(1)}50%{box-shadow:0 0 26px 5px rgba(240,193,75,.85),0 0 8px 0 rgba(240,193,75,.6),0 3px 12px rgba(74,158,98,.5);transform:scale(1.035)}}
.t-cta{animation:t-pulse 1.8s ease-in-out infinite}
.t-cta:hover{animation-play-state:paused;filter:brightness(1.12)}
@keyframes t-promo-pulse{0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(240,193,75,.45));transform:scale(1)}50%{filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(247,216,136,1)) drop-shadow(0 0 12px rgba(247,216,136,.9));transform:scale(1.045)}}
.t-promo{animation:t-promo-pulse 1.7s ease-in-out infinite;display:block}
.t-promo-static{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(240,193,75,.55))}
@keyframes t-feat-pulse{0%,100%{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(240,193,75,.4))}50%{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(247,216,136,.95)) drop-shadow(0 0 10px rgba(247,216,136,.7))}}
.t-feat-glow{animation:t-feat-pulse 2.1s ease-in-out infinite}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* header */
.site-head{position:sticky;top:0;z-index:10;padding:16px 0;background:linear-gradient(90deg,var(--c-bg-black),var(--c-bg-dark));border-bottom:1px solid rgba(201,154,46,.35);backdrop-filter:blur(6px)}
.head-in{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo-img{height:74px;width:auto}
.nav{display:flex;gap:26px}
.nav-a{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--c-text);transition:color .2s}
.nav-a:hover,.nav-a.active{color:var(--c-cream)}
.head-btns{display:flex;gap:12px}
.btn-ghost{display:inline-block;padding:11px 24px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;border-radius:4px;background:transparent;color:var(--c-cream);border:1px solid var(--c-gold);transition:box-shadow .3s}
.btn-ghost:hover{box-shadow:0 0 14px rgba(240,193,75,.4)}
.btn-cta{display:inline-block;padding:12px 24px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;border-radius:4px;background:linear-gradient(180deg,var(--c-accent-green) 0%,var(--c-green-mid) 100%);color:var(--c-btn-text);border:1px solid var(--c-gold)}

/* hero */
.hero{position:relative;min-height:580px;background-image:url('images/hero-bg.webp');background-size:cover;background-position:center;display:flex;align-items:center;overflow:hidden}
.hero-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,9,.05) 0%,rgba(8,20,9,.45) 48%,rgba(8,20,9,.9) 78%,rgba(8,20,9,.95) 100%);z-index:1}
.coin-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.coin-layer span{position:absolute;top:-40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c-gold-light),var(--c-gold) 55%,var(--c-gold-deep));box-shadow:0 0 8px rgba(240,193,75,.6),inset 0 0 4px rgba(166,120,24,.6);border:1px solid rgba(166,120,24,.5)}
.coin-layer span:nth-child(1){left:6%;width:14px;height:14px;animation:t-coin 7s linear 0s infinite}
.coin-layer span:nth-child(2){left:18%;width:21px;height:21px;animation:t-coin 9.5s linear .9s infinite}
.coin-layer span:nth-child(3){left:30%;width:28px;height:28px;animation:t-coin 12s linear 1.8s infinite}
.coin-layer span:nth-child(4){left:44%;width:14px;height:14px;animation:t-coin 7s linear 2.7s infinite}
.coin-layer span:nth-child(5){left:58%;width:21px;height:21px;animation:t-coin 9.5s linear 3.6s infinite}
.coin-layer span:nth-child(6){left:70%;width:28px;height:28px;animation:t-coin 12s linear 4.5s infinite}
.coin-layer span:nth-child(7){left:80%;width:14px;height:14px;animation:t-coin 7s linear 5.4s infinite}
.coin-layer span:nth-child(8){left:90%;width:21px;height:21px;animation:t-coin 9.5s linear .3s infinite}
.coin-layer span:nth-child(9){left:12%;width:28px;height:28px;animation:t-coin 12s linear 1.2s infinite}
.hero-wrap{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.hero-c{max-width:600px;padding:64px 0;margin-left:auto;text-align:right}
.hero-h1{font-family:'Cinzel',serif;font-size:44px;font-weight:700;color:var(--c-cream);line-height:1.1;margin:0 0 22px auto;text-shadow:0 2px 14px rgba(0,0,0,.85);max-width:560px}
.hero-sub{font-family:'Marcellus',serif;font-size:18px;font-weight:400;color:var(--c-cream-dim);margin:0 0 30px auto;line-height:1.6;letter-spacing:.4px;text-shadow:0 2px 10px rgba(0,0,0,.85);max-width:540px}
.hero-logo{width:460px;max-width:100%;height:auto;margin-left:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(240,193,75,.3))}
.hero-cta{display:inline-block;margin-top:30px;padding:17px 46px;font-family:'Cinzel',serif;font-weight:700;font-size:16px;letter-spacing:2px;text-transform:uppercase;border-radius:5px;background:linear-gradient(180deg,var(--c-accent-green) 0%,var(--c-green-mid) 100%);color:var(--c-btn-text);border:1px solid var(--c-gold)}

/* divider */
.divider{position:relative;z-index:4;height:46px;margin-top:-23px;margin-bottom:-23px;background:linear-gradient(90deg,transparent,rgba(201,154,46,.0) 8%,var(--c-gold-dark) 30%,var(--c-gold) 50%,var(--c-gold-dark) 70%,rgba(201,154,46,0) 92%,transparent);clip-path:polygon(0 47%,46% 47%,50% 0,54% 47%,100% 47%,100% 53%,54% 53%,50% 100%,46% 53%,0 53%);pointer-events:none}

/* section title */
.stitle{font-family:'Cinzel',serif;font-size:24px;font-weight:600;text-transform:uppercase;text-align:center;color:var(--c-gold);letter-spacing:3px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:20px;text-shadow:0 2px 10px rgba(240,193,75,.3)}
.stitle span{width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--c-gold),transparent)}

/* slot section */
.slot-sec{position:relative;padding:60px 0 50px;background:radial-gradient(ellipse at center,var(--c-bg-mid) 0%,var(--c-bg-dark) 72%)}
.lead{max-width:880px;margin:0 auto 34px;text-align:center;font-size:15px;line-height:1.85;color:var(--c-text-dim)}
.cta-row{text-align:center;margin-top:34px}

/* promo */
.promo-sec{padding:46px 0 30px;background:var(--c-bg-dark)}
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1080px;margin:0 auto;align-items:start}
.promo-card{display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;transition:transform .25s ease;text-align:center}
.promo-card:hover{transform:scale(1.04)}
.promo-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.promo-card span{font-family:'Marcellus',serif;font-size:13.5px;line-height:1.45;color:var(--c-sage-pale);text-align:center;display:block;width:100%;min-height:44px}

/* about */
.about-sec{padding:30px 0 80px;background:var(--c-bg-dark)}
.about-lead{max-width:880px;margin:0 auto 56px;text-align:center;font-size:15px;line-height:1.85;color:var(--c-text-dim)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1000px;margin:0 auto}
.feat{text-align:center;padding:20px 10px;transition:transform .3s}
.feat:hover{transform:translateY(-5px)}
.feat-ic{width:96px;height:96px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.feat-ic img{width:96px;height:96px;object-fit:contain}
.feat h3{font-family:'Cinzel',serif;font-size:16px;font-weight:600;color:var(--c-gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}
.feat p{font-size:13px;line-height:1.6;color:var(--c-sage-dim)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:60px auto 0;padding:30px;background:linear-gradient(180deg,rgba(28,74,46,.5) 0%,rgba(8,20,9,.5) 100%);border:1px solid rgba(201,154,46,.3);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(240,193,75,.08)}
.spec-col h3{font-family:'Cinzel',serif;font-size:17px;font-weight:600;color:var(--c-gold);text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(201,154,46,.3)}
.spec-col li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(201,154,46,.15);font-size:13.5px}
.spec-col li span:first-child{color:var(--c-sage-light)}
.spec-col li span:last-child{color:var(--c-cream);font-weight:500;text-align:right}

/* content prose (inner pages) */
.prose{max-width:880px;margin:0 auto;padding:50px 20px 70px}
.prose h2{font-family:'Cinzel',serif;font-size:26px;color:var(--c-gold);letter-spacing:1px;margin:38px 0 16px;text-shadow:0 2px 10px rgba(240,193,75,.25)}
.prose h3{font-family:'Cinzel',serif;font-size:19px;color:var(--c-gold-soft);margin:26px 0 12px}
.prose p{font-size:15.5px;line-height:1.85;color:var(--c-text-dim);margin-bottom:16px}
.prose .cta-block{text-align:center;margin:30px 0}
.page-h1{font-family:'Cinzel',serif;font-size:38px;color:var(--c-cream);text-align:center;letter-spacing:1px;padding:56px 20px 10px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.page-sub{text-align:center;color:var(--c-text-dim);max-width:760px;margin:0 auto;padding:0 20px;font-family:'Marcellus',serif;font-size:17px}

/* footer */
.site-foot{background:var(--c-bg-black);padding:50px 0 30px;border-top:1px solid rgba(201,154,46,.25)}
.foot-in{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;align-items:start}
.foot-logo{height:92px;width:auto;margin-bottom:12px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.foot-brand p{font-size:12px;color:var(--c-green-dim)}
.foot-col h4{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--c-gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.foot-col li{margin-bottom:8px}
.foot-col a{font-size:13px;color:var(--c-sage-dim);transition:color .2s}
.foot-col a:hover{color:var(--c-cream)}
.foot-legal{max-width:1200px;margin:34px auto 0;padding:20px 20px 0;border-top:1px solid rgba(201,154,46,.15);font-size:12px;color:var(--c-green-dim);text-align:center}

/* responsive */
@media(max-width:900px){
  .head-in{flex-wrap:wrap;gap:14px 20px;justify-content:center}
  .nav{gap:10px 16px;flex-wrap:wrap;justify-content:center}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:1fr;gap:24px}
  .foot-in{grid-template-columns:1fr 1fr;gap:28px;text-align:center}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:760px){
  .hero{min-height:440px}
  .hero-ov{background:linear-gradient(180deg,rgba(8,20,9,.4) 0%,rgba(8,20,9,.88) 100%)}
  .hero-c{max-width:100%;margin:0 auto;text-align:center;padding:40px 0}
  .hero-h1{margin:0 auto 18px;font-size:34px}
  .hero-sub{margin:0 auto 22px;max-width:100%;font-size:16px}
  .hero-logo{margin:0 auto;width:320px}
  .promo-grid{grid-template-columns:1fr;max-width:420px}
  .stitle{font-size:18px;letter-spacing:2px;gap:10px}
  .stitle span{width:30px}
}
@media(max-width:480px){
  .feat-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .hero-h1{font-size:28px}
  .hero-sub{font-size:15px}
  .head-btns a{padding:10px 16px;font-size:12px}
  .page-h1{font-size:28px}
}

/* page banner with logo overlay */
.page-banner{position:relative;max-width:1100px;margin:0 auto 10px;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px rgba(240,193,75,.35),inset 0 0 60px rgba(0,0,0,.3)}
.page-banner img.bnr{width:100%;height:auto;display:block}
.page-banner .bnr-ov{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,20,9,.15) 0%,rgba(8,20,9,.55) 100%)}
.banner-wrap{padding:34px 20px 0}

/* inline promo block (all pages) */
.promo-inline{padding:44px 0 20px;background:var(--c-bg-dark)}
.promo-inline .promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1080px;margin:0 auto;align-items:start}
@media(max-width:760px){.promo-inline .promo-grid{grid-template-columns:1fr;max-width:420px}}

/* slot overlay button responsive */
@media(max-width:760px){
  
}
@media(max-width:480px){
  
}

/* in-content image break — use once per subpage, mid-article, reusing the page's own
   banner image. This is a STANDARD structural element now, not an afterthought — every
   subpage should have one of these inserted roughly halfway through the body text. */
.art-banner{position:relative;border-radius:14px;overflow:hidden;margin:30px auto;max-width:820px;box-shadow:0 10px 30px rgba(0,0,0,.4);border:1px solid rgba(240,193,75,.3)}
.art-banner img{width:100%;height:auto;display:block}

/* VS comparison block — standard component for any "version A vs version B" page
   (e.g. base slot vs its 1000x variant). Do not reuse .specs/.spec-col for this — that
   grid is built for 3 columns on the homepage and looks wrong squeezed into 2. */

/* collapsible FAQ — the standard FAQ pattern for every page. Always use <details class="faq-item">
   <summary>question</summary><p>answer</p></details>, never bare <h3>/<p> — FAQ must expand on click. */
.faq-item{border:1px solid rgba(240,193,75,.28);border-radius:12px;margin-bottom:12px;background:linear-gradient(135deg,rgba(15,36,23,.5),rgba(28,74,46,.5));overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 46px 18px 22px;font-family:'Marcellus',serif;font-size:17px;color:var(--c-text);position:relative;font-weight:600}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--c-gold);transition:transform .25s ease}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--c-gold)}
.faq-item p{padding:0 22px 18px;margin:0;color:var(--c-text-dim);line-height:1.6}

/* demo game iframe */
.game-frame-wrap{position:relative;display:block;width:100%;max-width:1200px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 1px rgba(240,193,75,.4);background:var(--c-bg-black)}
.game-frame{position:relative;display:block;width:100%;height:0;padding-top:56.25%}
.game-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
@media(max-width:760px){.game-frame{padding-top:75%}}