/* ============================================================
   Top Casino Developer — social casino studio
   Visual language: Art Deco. Emerald, champagne, ivory, geometry.
   ============================================================ */

:root{
  --emerald:#0D2A22;
  --emerald-2:#123A2F;
  --emerald-3:#1A4A3D;
  --deep:#071812;
  --ivory:#F4ECDD;
  --ivory-2:#EADFCB;
  --gold:#C9A55A;
  --gold-hi:#E3C887;
  --gold-lo:#9C7C3C;
  --wine:#7A1F2B;

  --ink:#1A1A16;
  --text:#F4ECDD;
  --text-2:#CBBFA7;
  --text-3:#8F8672;
  --line:rgba(201,165,90,.28);
  --line-2:rgba(201,165,90,.5);

  --maxw:1180px;
  --ease:cubic-bezier(.2,.65,.3,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}

body{
  background:var(--emerald);color:var(--text);
  font-family:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.08}
h1 em,h2 em{font-style:italic;color:var(--gold-hi)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
svg{display:block}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* deco label: spaced caps between two rules */
.deco{display:inline-flex;align-items:center;gap:14px;font-family:"Josefin Sans",sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.deco::before,.deco::after{content:"";width:28px;height:1px;background:var(--gold)}
.deco.solo::after{display:none}

.sec{padding:110px 0}
.sec-sm{padding:72px 0}
.head{max-width:680px;margin:0 auto 60px;text-align:center}
.head h2{font-size:clamp(34px,5vw,58px);margin-top:20px}
.head p{color:var(--text-2);margin-top:18px;font-size:18px}

/* double-rule deco frame */
.frame{position:relative;border:1px solid var(--line-2);padding:36px 32px}
.frame::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Josefin Sans",sans-serif;font-weight:600;
  font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;padding:16px 30px;border:1px solid var(--gold);
  cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.btn-gold{background:var(--gold);color:var(--deep)}
.btn-gold:hover{background:var(--gold-hi);transform:translateY(-2px)}
.btn-line{color:var(--gold-hi)}
.btn-line:hover{background:rgba(201,165,90,.12);transform:translateY(-2px)}

/* ---------- reveal: pure CSS, always ends visible ---------- */
.rv{animation:rvReveal .8s var(--ease) both}
@keyframes rvReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rv.d1{animation-delay:.08s}.rv.d2{animation-delay:.16s}.rv.d3{animation-delay:.24s}.rv.d4{animation-delay:.32s}

/* ============================================================
   HEADER
   ============================================================ */
.top{position:sticky;top:0;z-index:90;background:rgba(13,42,34,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:42px;height:42px;flex:none}
.brand-txt{font-family:"Bodoni Moda",serif;font-size:21px;line-height:1;letter-spacing:.01em}
.brand-txt i{font-style:italic;color:var(--gold-hi)}
.brand-sub{display:block;font-family:"Josefin Sans",sans-serif;font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);margin-top:6px}

.nav{display:none;gap:34px}
@media(min-width:1000px){.nav{display:flex}.top-cta{display:inline-flex}}
.nav a{font-family:"Josefin Sans",sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);padding:6px 0;position:relative;transition:color .2s}
.nav a:hover{color:var(--gold-hi)}
.nav a.on{color:var(--gold-hi)}
.nav a.on::after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:6px;
  background:var(--gold);transform:translateX(-50%) rotate(45deg)}
.top-cta{display:none;padding:12px 20px;font-size:12px}

.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);background:transparent;cursor:pointer;flex:none}
.burger span{display:block;width:18px;height:1.5px;background:var(--gold-hi);transition:transform .25s,opacity .25s}
.burger span+span{margin-top:5px}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

.sheet{position:fixed;top:84px;left:0;right:0;z-index:89;background:var(--deep);border-bottom:1px solid var(--line-2);
  max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.sheet.open{max-height:460px}
.sheet ul{padding:10px 28px 26px}
.sheet li+li{border-top:1px solid var(--line)}
.sheet a{display:block;padding:16px 0;font-family:"Josefin Sans",sans-serif;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.sheet a.on{color:var(--gold-hi)}

/* ============================================================
   HERO — sunburst + marquee
   ============================================================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-2);
  background:radial-gradient(80% 70% at 50% 100%,var(--emerald-3),var(--emerald) 60%,var(--deep))}
.sunburst{position:absolute;left:50%;bottom:-40%;width:1500px;height:1500px;transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg,rgba(201,165,90,.09) 0deg 4deg,transparent 4deg 12deg);
  border-radius:50%;animation:turn 120s linear infinite;pointer-events:none}
@keyframes turn{to{transform:translateX(-50%) rotate(360deg)}}
.hero .wrap{position:relative;z-index:2;padding:96px 28px 104px;text-align:center}
.hero h1{font-size:clamp(46px,8vw,104px);max-width:13ch;margin:26px auto 0}
.hero .lead{color:var(--text-2);font-size:clamp(17px,2vw,20px);max-width:56ch;margin:28px auto 0}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}

.marquee{margin:64px auto 0;max-width:520px;background:var(--deep);border:1px solid var(--gold);padding:10px;position:relative}
.marquee::before{content:"";position:absolute;inset:4px;border:1px solid var(--line);pointer-events:none}
.bulbs{display:flex;justify-content:space-between;padding:6px 10px}
.bulbs i{width:7px;height:7px;border-radius:50%;background:var(--gold-hi);animation:bulb 1.4s ease-in-out infinite}
.bulbs i:nth-child(2n){animation-delay:.7s}
@keyframes bulb{0%,100%{opacity:1;box-shadow:0 0 8px var(--gold-hi)}50%{opacity:.25;box-shadow:none}}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 10px}
.reel{height:96px;overflow:hidden;background:var(--ivory);border:1px solid var(--gold-lo);position:relative}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,24,18,.45),transparent 30%,transparent 70%,rgba(7,24,18,.45))}
.strip{display:flex;flex-direction:column;animation:spin 3.2s cubic-bezier(.3,.05,.2,1) infinite}
.reel:nth-child(2) .strip{animation-duration:3.6s}
.reel:nth-child(3) .strip{animation-duration:4s}
@keyframes spin{0%{transform:translateY(0)}70%,100%{transform:translateY(-480px)}}
.sym{height:96px;flex:none;display:grid;place-items:center;font-family:"Bodoni Moda",serif;font-size:42px;color:var(--wine)}
.sym.g{color:var(--gold-lo)}.sym.e{color:var(--emerald-2)}
.marquee-note{font-family:"Josefin Sans",sans-serif;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);padding:10px 0 4px}

/* ============================================================
   DIVIDER (deco fan)
   ============================================================ */
.fan{display:flex;justify-content:center;padding:6px 0}
.fan svg{width:120px;height:30px}

/* ============================================================
   PANELS
   ============================================================ */
.panels{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:700px){.panels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.panels.p3{grid-template-columns:repeat(3,1fr)}}
.panel{position:relative;border:1px solid var(--line-2);padding:38px 32px;background:linear-gradient(180deg,rgba(26,74,61,.35),transparent);
  transition:transform .3s var(--ease),border-color .3s}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.panel:hover{transform:translateY(-4px);border-color:var(--gold)}
.panel .num{font-family:"Josefin Sans",sans-serif;font-size:12px;letter-spacing:.3em;color:var(--gold)}
.panel h3{font-size:28px;margin:14px 0 12px}
.panel p{color:var(--text-2);font-size:15.5px}
.panel .tagline{display:block;margin-top:18px;font-family:"Josefin Sans",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
.panel .ico{width:54px;height:54px;margin-bottom:18px}

/* ivory section (contrast) */
.ivory{background:var(--ivory);color:var(--ink)}
.ivory .deco{color:var(--gold-lo)}.ivory .deco::before,.ivory .deco::after{background:var(--gold-lo)}
.ivory .head p{color:#5C574A}
.ivory h2,.ivory h3{color:var(--emerald)}
.ivory h2 em{color:var(--wine)}

/* chapter list — the story */
.chapters{max-width:820px;margin:0 auto}
.chapter{display:grid;grid-template-columns:1fr;gap:6px 36px;padding:36px 0;border-top:1px solid rgba(156,124,60,.35)}
@media(min-width:760px){.chapter{grid-template-columns:120px 1fr}}
.chapter:last-child{border-bottom:1px solid rgba(156,124,60,.35)}
.chapter .roman{font-family:"Bodoni Moda",serif;font-style:italic;font-size:40px;color:var(--gold-lo);line-height:1}
.chapter h3{font-size:26px;margin-bottom:10px}
.chapter p{color:#4E4A3F;font-size:16.5px}
.chapter p+p{margin-top:12px}

/* split */
.split{display:grid;gap:50px}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}
.split h2{font-size:clamp(32px,4.4vw,50px);margin-top:18px}
.split p{color:var(--text-2);font-size:17px;margin-top:18px}
.ivory .split p{color:#4E4A3F}

/* rules list */
.rules li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.rules li:last-child{border-bottom:0}
.rules .gem{width:12px;height:12px;background:var(--gold);transform:rotate(45deg);margin:8px 0 0 6px}
.rules b{display:block;font-family:"Bodoni Moda",serif;font-weight:500;font-size:19px;margin-bottom:3px}
.rules span{color:var(--text-2);font-size:15.5px}

/* pledge band */
.pledge{background:var(--wine);border-block:1px solid var(--gold);text-align:center;padding:64px 28px}
.pledge p{font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(24px,3.6vw,40px);max-width:24ch;margin:0 auto;line-height:1.25;color:var(--ivory)}
.pledge span{display:block;margin-top:22px;font-family:"Josefin Sans",sans-serif;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi)}

/* banner */
.banner{position:relative;overflow:hidden;border-bottom:1px solid var(--line-2);padding:84px 0 70px;text-align:center;
  background:radial-gradient(70% 90% at 50% 120%,var(--emerald-3),var(--emerald) 70%)}
.banner .sunburst{bottom:-120%;width:1100px;height:1100px;opacity:.7}
.banner .wrap{position:relative;z-index:2}
.banner h1{font-size:clamp(40px,6.4vw,78px);margin:22px auto 0;max-width:16ch}
.banner p{color:var(--text-2);font-size:18.5px;max-width:58ch;margin:22px auto 0}

/* cta */
.cta{text-align:center}
.cta h2{font-size:clamp(30px,4.4vw,48px);margin-top:18px}
.cta p{color:var(--text-2);margin:16px auto 32px;max-width:50ch;font-size:17px}
.mail{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--gold);padding:16px 28px;
  font-family:"Josefin Sans",sans-serif;font-size:14px;letter-spacing:.12em;color:var(--gold-hi);transition:background .25s;word-break:break-all}
.mail:hover{background:rgba(201,165,90,.12)}

.todo{border:1px dashed var(--gold);color:var(--gold-hi);padding:1px 7px;font-family:"Josefin Sans",sans-serif;font-size:.82em;letter-spacing:.06em}

/* footer */
.foot{background:var(--deep);border-top:1px solid var(--line-2);color:var(--text-3)}
.foot-grid{display:grid;gap:36px;padding:62px 0 42px;border-bottom:1px solid var(--line)}
@media(min-width:820px){.foot-grid{grid-template-columns:1.8fr 1fr 1fr}}
.foot-grid p{font-size:14.5px;margin-top:18px;max-width:38ch;color:var(--text-3)}
.foot h4{font-family:"Josefin Sans",sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:600}
.foot li{margin-bottom:10px}
.foot li a{font-size:14.5px;color:var(--text-2);transition:color .2s}
.foot li a:hover{color:var(--gold-hi)}
.foot-end{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:24px 0 30px;
  font-family:"Josefin Sans",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.foot-end .warn{color:var(--gold-hi)}

/* prose */
.prose{max-width:840px;padding:60px 0 96px}
.prose h1{font-size:clamp(36px,5vw,56px);margin:20px 0 10px}
.prose h2{font-size:27px;margin:42px 0 12px}
.prose p,.prose li{color:var(--text-2);font-size:16.5px}
.prose p{margin-bottom:14px}
.prose ul{margin-bottom:18px}
.prose li{position:relative;padding-left:26px;margin-bottom:9px}
.prose li::before{content:"";position:absolute;left:5px;top:11px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.prose a{color:var(--gold-hi);border-bottom:1px solid var(--line-2)}
.prose .upd{font-family:"Josefin Sans",sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.prose .frame{margin:30px 0 38px}
.prose .frame p{color:var(--text);margin:0}

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