/* ================================================
   JOUELLE — main.css   |   Theme: #339933
   Font: Roboto + Roboto Slab
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@400;600;700;900&display=swap');

:root {
  --green:       #339933;
  --green-d:     #267326;
  --green-l:     #4db34d;
  --green-xl:    #73d473;
  --green-glow:  rgba(51,153,51,.28);
  --green-faint: rgba(51,153,51,.08);
  --gold:        #f0c040;
  --red:         #e63946;
  --blue:        #457b9d;
  --dark:        #050f05;
  --dark2:       #0b1f0b;
  --dark3:       #122112;
  --dark4:       #172b17;
  --bg:          #f3faf3;
  --bg2:         #e8f5e8;
  --white:       #ffffff;
  --card-bg:     #ffffff;
  --card-bd:     rgba(51,153,51,.14);
  --text:        #0a1a0a;
  --muted:       #4a694a;
  --border:      rgba(51,153,51,.18);
  --shadow:      0 4px 22px rgba(51,153,51,.10);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--dark2)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:3px}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── HEADER ── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(5,15,5,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(51,153,51,.22);
  transition:background .3s,box-shadow .3s;
}
.site-header.scrolled{background:rgba(5,15,5,.97);box-shadow:0 4px 28px rgba(51,153,51,.18)}
.hdr{max-width:1200px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Roboto Slab',serif;font-size:1.45rem;font-weight:900;color:#fff;flex-shrink:0}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--green),var(--green-d));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 3px 12px var(--green-glow)}
.logo em{color:var(--gold);font-style:normal}
.main-nav{display:flex;align-items:center;gap:2px}
.nl{padding:7px 10px;color:rgba(255,255,255,.6);font-size:.82rem;font-weight:500;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap}
.nl:hover,.nl.active{color:#fff;background:rgba(51,153,51,.18)}
.nav-cta{padding:8px 17px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;font-size:.82rem;font-weight:700;border-radius:20px;transition:opacity .2s,box-shadow .2s;box-shadow:0 3px 12px var(--green-glow);white-space:nowrap}
.nav-cta:hover{opacity:.88;box-shadow:0 5px 20px var(--green-glow)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mob-nav{display:none;flex-direction:column;background:rgba(5,15,5,.98);border-bottom:1px solid rgba(51,153,51,.18);padding:14px 24px 18px;gap:3px}
.mob-nav.open{display:flex}
.mob-nav .nl{padding:10px 12px;font-size:.92rem;color:rgba(255,255,255,.7)}

/* ── HERO ── */
.hero{min-height:100vh;background:radial-gradient(ellipse at 18% 55%,rgba(51,153,51,.13) 0%,transparent 52%),radial-gradient(ellipse at 82% 18%,rgba(240,192,64,.06) 0%,transparent 44%),linear-gradient(170deg,#050f05 0%,#0b1f0b 55%,#050f05 100%);display:flex;align-items:center;position:relative;overflow:hidden;padding-top:66px}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:bfloat 9s ease-in-out infinite}
.hb1{width:480px;height:480px;background:rgba(51,153,51,.09);top:-70px;right:-90px}
.hb2{width:280px;height:280px;background:rgba(240,192,64,.05);bottom:-40px;left:4%;animation-delay:-4s}
.hb3{width:190px;height:190px;background:rgba(230,57,70,.04);top:38%;left:44%;animation-delay:-2s}
@keyframes bfloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.04)}}
.hero-inner{max-width:1200px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(51,153,51,.14);border:1px solid rgba(51,153,51,.32);color:var(--green-l);padding:6px 16px;border-radius:50px;font-size:.76rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:20px}
.hdot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.7)}}
.hero-title{font-family:'Roboto Slab',serif;font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.08;font-weight:900;color:#fff;margin-bottom:18px}
.hero-title .hl{color:var(--green-l);display:block}
.hero-title .gd{color:var(--gold)}
.hero-desc{color:rgba(255,255,255,.58);font-size:1.03rem;line-height:1.8;margin-bottom:32px;max-width:480px}
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:26px;padding-top:18px;border-top:1px solid rgba(51,153,51,.22)}
.hs strong{display:block;font-family:'Roboto Slab',serif;font-size:1.55rem;color:var(--green-l);font-weight:900}
.hs span{font-size:.76rem;color:rgba(255,255,255,.45)}
/* Floating cards */
.cards-visual{position:relative;height:440px}
.fc{position:absolute;width:118px;height:168px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2.9rem;box-shadow:0 16px 42px rgba(0,0,0,.45);animation:cfloat 6s ease-in-out infinite;border:1.5px solid rgba(255,255,255,.2)}
.fc1{top:20px;left:55px;transform:rotate(-8deg)}
.fc2{top:60px;left:195px;transform:rotate(5deg);z-index:2;background:#e63946;color:#fff;animation-delay:-2s}
.fc3{top:165px;left:35px;transform:rotate(3deg);animation-delay:-1s}
.fc4{top:205px;left:215px;transform:rotate(-6deg);z-index:1;background:#0b1f0b;color:#fff;animation-delay:-3s}
.fc5{top:75px;right:35px;transform:rotate(10deg);z-index:3;width:100px;height:140px;font-size:2.3rem;animation-delay:-1.5s;background:#f0c040;color:#000}
@keyframes cfloat{0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}50%{transform:rotate(var(--r,0deg)) translateY(-12px)}}

/* ── BUTTONS ── */
.btn{padding:13px 26px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border:none;border-radius:11px;font-size:.93rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 18px var(--green-glow);display:inline-flex;align-items:center;gap:8px}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--green-glow);opacity:.92}
.btn-outline{padding:13px 26px;border:2px solid rgba(51,153,51,.38);color:var(--green-l);border-radius:11px;font-size:.93rem;font-weight:600;transition:all .2s;background:transparent;display:inline-flex;align-items:center;gap:8px}
.btn-outline:hover{background:rgba(51,153,51,.11);border-color:var(--green);color:#fff}
.btn-sm{padding:8px 18px;font-size:.82rem;border-radius:8px}

/* ── TICKER ── */
.ticker-wrap{background:linear-gradient(90deg,var(--dark2),rgba(51,153,51,.14),var(--dark2));border-top:1px solid rgba(51,153,51,.18);border-bottom:1px solid rgba(51,153,51,.18);padding:10px 0;overflow:hidden}
.ticker-track{display:flex;gap:58px;width:max-content;animation:tick 50s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{white-space:nowrap;font-size:.81rem;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:9px}
.ti{color:var(--gold)}

/* ── CAT BAR ── */
.cat-bar{background:var(--dark2);border-bottom:1px solid rgba(51,153,51,.18);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cat-bar::-webkit-scrollbar{height:0}
.cat-bar-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:2px;align-items:center;min-width:max-content}
.cp{padding:13px 17px;white-space:nowrap;font-size:.83rem;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;text-decoration:none;display:flex;align-items:center;gap:5px}
.cp:hover,.cp.active{color:var(--green-l);border-bottom-color:var(--green)}

/* ── SECTIONS ── */
.sec{padding:78px 0}
.sec-dark{background:var(--dark)}
.sec-dark2{background:var(--dark2)}
.sec-dark3{background:var(--dark3)}
.sec-light{background:var(--bg)}
.sec-light2{background:var(--bg2)}
.sec-hdr{text-align:center;margin-bottom:50px}
.eyebrow{display:inline-block;font-size:.71rem;letter-spacing:3px;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:9px}
.sec-title{font-family:'Roboto Slab',serif;font-size:clamp(1.55rem,3.5vw,2.25rem);color:var(--dark);font-weight:700;margin-bottom:9px}
.sec-title.lt{color:#fff}
.sec-title .hl{color:var(--green)}
.sec-title .gd{color:var(--gold)}
.sec-sub{color:var(--muted);font-size:.97rem;max-width:500px;margin:0 auto}
.sec-sub.lt{color:rgba(255,255,255,.52)}
.row-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.row-hdr h2{font-family:'Roboto Slab',serif;font-size:1.42rem;font-weight:700}
.row-hdr h2.lt{color:#fff}
.row-hdr h2.dk{color:var(--dark)}
.row-hdr h2 span{color:var(--green-l)}
.see-all{font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:4px;transition:gap .2s}
.see-all.gn{color:var(--green-l)}
.see-all.gd{color:var(--gold)}
.see-all:hover{gap:8px}

/* ── GAME CARDS ── */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.game-card{background:var(--card-bg);border:1px solid var(--card-bd);border-radius:17px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;box-shadow:var(--shadow);display:flex;flex-direction:column;text-decoration:none}
.game-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(51,153,51,.2);border-color:rgba(51,153,51,.38)}
.gc-img-wrap{overflow:hidden;position:relative}
.gc-img{width:100%;object-fit:cover;transition:transform .4s}
.gc-img.h200{height:200px}
.gc-img.h250{height:250px}
.game-card:hover .gc-img{transform:scale(1.05)}
.gc-badge{position:absolute;top:11px;left:11px;color:#fff;font-size:.67rem;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:1px;text-transform:uppercase}
.gb-green{background:var(--green)}
.gb-gold{background:var(--gold);color:#000}
.gb-red{background:var(--red)}
.gb-blue{background:var(--blue)}
.gb-dark{background:#b5460f}
.gc-diff{position:absolute;bottom:11px;right:11px;background:rgba(0,0,0,.68);color:#fff;font-size:.72rem;padding:3px 9px;border-radius:50px}
.gc-body{padding:18px 20px;flex:1}
.gc-title{font-family:'Roboto Slab',serif;font-size:1.02rem;font-weight:700;color:var(--dark);margin-bottom:7px;line-height:1.35}
.gc-desc{font-size:.83rem;color:var(--muted);line-height:1.7;margin-bottom:11px}
.gc-tags{display:flex;gap:6px;flex-wrap:wrap}
.gtag{padding:3px 9px;border-radius:50px;font-size:.69rem;font-weight:600;background:var(--green-faint);border:1px solid rgba(51,153,51,.2);color:var(--green-d)}
.gc-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);margin-top:auto}
.gc-players{font-size:.77rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.play-btn{padding:8px 17px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border-radius:8px;font-size:.81rem;font-weight:700;transition:all .2s;box-shadow:0 3px 10px var(--green-glow)}
.play-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px var(--green-glow)}

/* ── FEATURED GAME ── */
.feat-game{background:var(--card-bg);border:1px solid var(--card-bd);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;box-shadow:var(--shadow);transition:box-shadow .3s}
.feat-game:hover{box-shadow:0 22px 62px rgba(51,153,51,.2)}
.fg-img{width:100%;height:100%;min-height:370px;object-fit:cover}
.fg-body{padding:38px;display:flex;flex-direction:column;justify-content:center}
.fg-tag{display:inline-block;background:rgba(51,153,51,.1);border:1px solid rgba(51,153,51,.25);color:var(--green-d);padding:5px 13px;border-radius:50px;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:15px}
.fg-title{font-family:'Roboto Slab',serif;font-size:1.75rem;font-weight:900;color:var(--dark);line-height:1.2;margin-bottom:13px}
.fg-desc{color:var(--muted);line-height:1.8;margin-bottom:22px}
.fg-stats{display:flex;gap:18px;margin-bottom:26px}
.fgst{background:var(--bg2);border-radius:10px;padding:10px 14px;text-align:center}
.fgst .v{font-family:'Roboto Slab',serif;font-size:1.08rem;font-weight:700;color:var(--green);display:block}
.fgst .l{font-size:.69rem;color:var(--muted)}

/* ── DARK ARTICLE CARDS ── */
.art-card{background:rgba(255,255,255,.05);border:1px solid rgba(51,153,51,.18);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.art-card:hover{transform:translateY(-5px);box-shadow:0 16px 42px rgba(51,153,51,.2);border-color:rgba(51,153,51,.38)}
.art-card-img{width:100%;height:186px;object-fit:cover;transition:transform .4s}
.art-card:hover .art-card-img{transform:scale(1.05)}
.art-card-body{padding:18px 20px}
.atag{display:inline-block;font-size:.67rem;font-weight:700;padding:3px 9px;border-radius:50px;letter-spacing:1px;text-transform:uppercase;margin-bottom:9px}
.atag-gn{background:rgba(51,153,51,.18);border:1px solid rgba(51,153,51,.32);color:var(--green-l)}
.atag-gd{background:rgba(240,192,64,.14);border:1px solid rgba(240,192,64,.28);color:var(--gold)}
.atag-rd{background:rgba(230,57,70,.14);border:1px solid rgba(230,57,70,.28);color:#ff7070}
.atag-bl{background:rgba(69,123,157,.14);border:1px solid rgba(69,123,157,.28);color:#7eb8d4}
.art-card-title{font-family:'Roboto Slab',serif;font-size:.98rem;font-weight:700;color:#fff;margin-bottom:7px;line-height:1.38}
.art-card-desc{font-size:.82rem;color:rgba(255,255,255,.52);line-height:1.68}
.art-card-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 20px;border-top:1px solid rgba(51,153,51,.13)}
.art-meta{font-size:.74rem;color:rgba(255,255,255,.38)}
.read-lnk{font-size:.77rem;color:var(--green-l);font-weight:600;display:flex;align-items:center;gap:3px;transition:gap .2s}
.art-card:hover .read-lnk{gap:7px}

/* ── LIGHT ARTICLE CARDS ── */
.art-card-lt{background:var(--card-bg);border:1px solid var(--card-bd);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.art-card-lt:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(51,153,51,.14);border-color:rgba(51,153,51,.32)}
.art-card-lt .art-card-img{height:190px}
.art-card-lt .art-card-body{padding:16px 20px}
.art-card-lt .art-card-title{color:var(--dark)}
.art-card-lt .art-card-desc{color:var(--muted)}
.art-card-lt .art-card-foot{border-top-color:var(--border)}
.art-card-lt .art-meta{color:var(--muted)}

/* ── GAME PAGE HERO ── */
.gph{background:linear-gradient(170deg,var(--dark) 0%,var(--dark2) 55%,var(--dark3) 100%);padding:110px 0 54px;border-bottom:1px solid rgba(51,153,51,.2);position:relative;overflow:hidden}
.gph::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 62% 50%,rgba(51,153,51,.11),transparent 58%);pointer-events:none}
.gph-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 380px;gap:46px;align-items:center;position:relative;z-index:2}
.gph-badge{display:inline-block;background:rgba(51,153,51,.14);border:1px solid rgba(51,153,51,.28);color:var(--green-l);padding:5px 14px;border-radius:50px;font-size:.74rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.gph-title{font-family:'Roboto Slab',serif;font-size:clamp(1.85rem,4.5vw,2.9rem);color:#fff;font-weight:900;margin-bottom:13px}
.gph-title span{color:var(--green-l)}
.gph-desc{color:rgba(255,255,255,.58);font-size:.98rem;max-width:520px;line-height:1.8;margin-bottom:22px}
.gph-stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.gst{background:rgba(255,255,255,.06);border:1px solid rgba(51,153,51,.18);border-radius:10px;padding:10px 15px;text-align:center}
.gst .v{font-family:'Roboto Slab',serif;font-size:1.08rem;font-weight:700;color:var(--green-l);display:block}
.gst .l{font-size:.69rem;color:rgba(255,255,255,.38)}
.game-preview{border-radius:15px;overflow:hidden;box-shadow:0 18px 56px rgba(0,0,0,.5);border:1.5px solid rgba(51,153,51,.28);background:#000}
.game-preview img{width:100%;height:234px;object-fit:cover}
.game-play-strip{display:block;width:100%;padding:15px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;text-align:center;font-size:.97rem;font-weight:700;border:none;cursor:pointer;transition:opacity .2s;letter-spacing:.3px}
.game-play-strip:hover{opacity:.88}

/* ── PAGE HERO ── */
.ph{background:linear-gradient(170deg,var(--dark) 0%,var(--dark2) 100%);padding:108px 0 54px;text-align:center;border-bottom:1px solid rgba(51,153,51,.18);position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(51,153,51,.1),transparent 58%);pointer-events:none}
.ph-badge{display:inline-block;background:rgba(51,153,51,.12);border:1px solid rgba(51,153,51,.26);color:var(--green-l);padding:5px 15px;border-radius:50px;font-size:.73rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.ph h1{font-family:'Roboto Slab',serif;font-size:clamp(1.75rem,4.5vw,2.9rem);color:#fff;font-weight:900;margin-bottom:13px;position:relative;z-index:1}
.ph h1 span{color:var(--green-l)}
.ph p{color:rgba(255,255,255,.52);font-size:.98rem;max-width:520px;margin:0 auto;line-height:1.8;position:relative;z-index:1}

/* ── CONTENT + SIDEBAR ── */
.csl{display:grid;grid-template-columns:1fr 295px;gap:38px;max-width:1200px;margin:0 auto;padding:54px 24px}
.sw{background:var(--card-bg);border:1px solid var(--card-bd);border-radius:13px;padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.sw h3{font-family:'Roboto Slab',serif;font-size:.93rem;color:var(--dark);font-weight:700;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
.sgi{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(51,153,51,.07);text-decoration:none}
.sgi:last-child{border-bottom:none}
.sgi-ico{width:38px;height:38px;border-radius:8px;background:var(--green-faint);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;border:1px solid var(--border)}
.sgi-txt strong{display:block;font-size:.81rem;color:var(--dark);line-height:1.3}
.sgi-txt span{font-size:.7rem;color:var(--muted)}
.sgi:hover .sgi-txt strong{color:var(--green)}

/* ── GAME CONTENT ── */
.gcont h2{font-family:'Roboto Slab',serif;font-size:1.38rem;color:var(--dark);margin:30px 0 13px;padding-bottom:9px;border-bottom:2px solid rgba(51,153,51,.16)}
.gcont h3{font-family:'Roboto Slab',serif;font-size:1.08rem;color:var(--green-d);margin:22px 0 9px}
.gcont p{color:var(--muted);line-height:1.9;margin-bottom:15px;font-size:.95rem}
.gcont ul,.gcont ol{color:var(--muted);padding-left:21px;margin-bottom:15px}
.gcont li{margin-bottom:7px;line-height:1.8}
.gcont blockquote{border-left:3px solid var(--green);padding:13px 17px;background:rgba(51,153,51,.05);border-radius:0 10px 10px 0;margin:18px 0;color:var(--text);font-style:italic}
.tip-box{background:linear-gradient(135deg,rgba(51,153,51,.07),rgba(77,179,77,.04));border:1px solid rgba(51,153,51,.18);border-radius:13px;padding:20px;margin:18px 0}
.tip-box h4{font-family:'Roboto Slab',serif;font-size:.93rem;color:var(--green-d);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.tip-box ul{color:var(--muted);padding-left:19px;margin:0}
.tip-box li{margin-bottom:5px;font-size:.89rem}
.play-cta-box{background:linear-gradient(135deg,rgba(51,153,51,.1),rgba(38,115,38,.06));border:1px solid rgba(51,153,51,.2);border-radius:15px;padding:26px;text-align:center;margin:30px 0}
.play-cta-box h3{font-family:'Roboto Slab',serif;font-size:1.08rem;color:var(--dark);margin-bottom:9px}
.play-cta-box p{color:var(--muted);margin-bottom:17px;font-size:.91rem}

/* ── REVIEWS ── */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}
.rev-card{background:rgba(255,255,255,.05);border:1px solid rgba(51,153,51,.18);border-radius:15px;padding:22px;backdrop-filter:blur(6px);transition:transform .2s,box-shadow .2s}
.rev-card:hover{transform:translateY(-3px);box-shadow:0 9px 26px rgba(51,153,51,.14)}
.rev-card.lt{background:var(--card-bg);border-color:var(--card-bd);box-shadow:var(--shadow)}
.rev-stars{color:var(--gold);font-size:.88rem;margin-bottom:11px}
.rev-txt{font-size:.87rem;line-height:1.74;margin-bottom:13px;font-style:italic}
.rev-card .rev-txt{color:rgba(255,255,255,.62)}
.rev-card.lt .rev-txt{color:var(--muted)}
.rev-author{display:flex;align-items:center;gap:9px}
.rev-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-d));display:flex;align-items:center;justify-content:center;font-size:.83rem;color:#fff;font-weight:700;flex-shrink:0}
.rev-name{font-size:.84rem;font-weight:600}
.rev-card .rev-name{color:#fff}
.rev-card.lt .rev-name{color:var(--dark)}
.rev-date{font-size:.71rem}
.rev-card .rev-date{color:rgba(255,255,255,.38)}
.rev-card.lt .rev-date{color:var(--muted)}
.rev-badge{margin-left:auto;background:rgba(51,153,51,.14);border:1px solid rgba(51,153,51,.24);color:var(--green-l);font-size:.67rem;padding:2px 7px;border-radius:50px}
.rev-stats{background:rgba(255,255,255,.04);border:1px solid rgba(51,153,51,.18);border-radius:15px;padding:26px;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:18px;margin-bottom:34px}
.rvst-num{font-family:'Roboto Slab',serif;font-size:1.85rem;color:var(--green-l);font-weight:700;display:block}
.rvst-num.gd{color:var(--gold)}
.rvst-lbl{font-size:.77rem;color:rgba(255,255,255,.45)}

/* ── NEWSLETTER ── */
.nl-section{background:linear-gradient(135deg,var(--dark2),var(--dark3));border:1px solid rgba(51,153,51,.18);border-radius:20px;padding:50px 46px;text-align:center;position:relative;overflow:hidden}
.nl-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(51,153,51,.14),transparent 58%);pointer-events:none}
.nl-section h2{font-family:'Roboto Slab',serif;font-size:1.85rem;color:#fff;margin-bottom:11px;position:relative;z-index:1}
.nl-section p{color:rgba(255,255,255,.52);margin-bottom:26px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.8;position:relative;z-index:1}
.nl-form{display:flex;gap:11px;max-width:455px;margin:0 auto;position:relative;z-index:1}
.nl-form input{flex:1;padding:12px 17px;background:rgba(255,255,255,.07);border:1.5px solid rgba(51,153,51,.26);border-radius:11px;color:#fff;font-family:'Roboto',sans-serif;font-size:.93rem}
.nl-form input::placeholder{color:rgba(255,255,255,.28)}
.nl-form input:focus{outline:none;border-color:var(--green);background:rgba(51,153,51,.08)}
.nl-form button{padding:12px 21px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border:none;border-radius:11px;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .2s}
.nl-form button:hover{opacity:.88;transform:translateY(-1px)}

/* ── CONTACT FORM ── */
.cf{background:var(--card-bg);border:1px solid var(--card-bd);border-radius:19px;padding:38px;box-shadow:var(--shadow)}
.cf h2{font-family:'Roboto Slab',serif;font-size:1.55rem;color:var(--dark);margin-bottom:5px}
.cf .sub{color:var(--muted);margin-bottom:24px;font-size:.92rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fg{margin-bottom:17px}
.fg label{display:block;font-size:.81rem;font-weight:600;color:var(--text);margin-bottom:5px}
.fg label .req{color:var(--green)}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 15px;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;color:var(--dark);font-family:'Roboto',sans-serif;font-size:.91rem;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(51,153,51,.09)}
.fg select option{background:#fff;color:var(--dark)}
.fg textarea{resize:vertical;min-height:128px}
.f-submit{width:100%;padding:13px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border:none;border-radius:11px;font-size:.98rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .2s;box-shadow:0 4px 15px var(--green-glow)}
.f-submit:hover{opacity:.88;transform:translateY(-1px)}

/* ── LEGAL ── */
.legal-wrap{max-width:850px;margin:0 auto;padding:54px 24px 78px}
.legal-toc{background:var(--card-bg);border:1px solid var(--card-bd);border-left:4px solid var(--green);border-radius:11px;padding:20px 26px;margin-bottom:42px}
.legal-toc h3{font-family:'Roboto Slab',serif;font-size:.97rem;color:var(--dark);margin-bottom:11px}
.legal-toc ol{margin:0;padding-left:19px;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.legal-toc li a{color:var(--green);text-decoration:none;font-size:.86rem}
.ls{margin-bottom:42px;padding-bottom:42px;border-bottom:1px solid var(--border)}
.ls:last-child{border-bottom:none}
.ls h2{font-family:'Roboto Slab',serif;font-size:1.28rem;color:var(--dark);margin-bottom:15px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.ls h3{font-size:.92rem;font-weight:700;color:var(--green-d);margin:17px 0 7px}
.ls p{color:var(--muted);line-height:1.84;margin-bottom:11px;font-size:.92rem}
.ls ul{color:var(--muted);padding-left:19px;margin-bottom:11px;font-size:.92rem}
.ls ul li{margin-bottom:5px;line-height:1.78}
.linfo{background:rgba(51,153,51,.05);border:1px solid rgba(51,153,51,.17);border-radius:9px;padding:17px 21px;margin:13px 0}
.linfo p{margin-bottom:3px}
.linfo strong{color:var(--dark)}
.ltbl{width:100%;border-collapse:collapse;font-size:.85rem;margin:13px 0}
.ltbl th{background:rgba(51,153,51,.07);color:var(--dark);font-weight:700;padding:9px 13px;text-align:left;border:1px solid var(--border)}
.ltbl td{padding:9px 13px;border:1px solid var(--border);color:var(--muted);vertical-align:top}

/* ── FOOTER ── */
.site-footer{background:var(--dark);border-top:1px solid rgba(51,153,51,.16);padding:58px 0 0}
.ft-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:46px}
.ft-brand p{color:rgba(255,255,255,.38);font-size:.84rem;line-height:1.78;margin-top:13px;max-width:225px}
.ft-socials{display:flex;gap:9px;margin-top:15px}
.soc-lnk{width:35px;height:35px;background:rgba(51,153,51,.09);border:1px solid rgba(51,153,51,.18);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.97rem;transition:all .2s}
.soc-lnk:hover{background:rgba(51,153,51,.2);border-color:var(--green)}
.ft-col h4{font-size:.73rem;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:13px}
.ft-col a{display:block;color:rgba(255,255,255,.38);font-size:.84rem;margin-bottom:7px;transition:color .2s}
.ft-col a:hover{color:#fff}
.ft-btm{max-width:1200px;margin:42px auto 0;padding:17px 24px;border-top:1px solid rgba(51,153,51,.11);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:7px}
.ft-btm p{font-size:.74rem;color:rgba(255,255,255,.28)}

/* ── BACK TO TOP ── */
.btt{position:fixed;bottom:24px;right:24px;z-index:999;width:43px;height:43px;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border:none;border-radius:50%;font-size:1.08rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 4px 13px var(--green-glow)}
.btt.vis{opacity:1;pointer-events:auto}
.btt:hover{transform:translateY(-3px)}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .64s ease,transform .64s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:38px;text-align:center}
  .cards-visual{display:none}
  .hero-ctas,.hero-stats{justify-content:center}
  .ft-inner{grid-template-columns:1fr 1fr}
  .g5{grid-template-columns:repeat(3,1fr)}
  .gph-inner{grid-template-columns:1fr}
  .feat-game{grid-template-columns:1fr}
  .csl{grid-template-columns:1fr}
}
@media(max-width:768px){
  .main-nav{display:none}
  .burger{display:flex}
  .g3,.g2{grid-template-columns:1fr}
  .g5{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .ft-inner{grid-template-columns:1fr 1fr;gap:26px}
  .nl-form{flex-direction:column}
  .legal-toc ol{grid-template-columns:1fr}
  .nl-section{padding:34px 22px}
  .cf{padding:22px}
}
@media(max-width:480px){
  .ft-inner{grid-template-columns:1fr}
  .g5{grid-template-columns:1fr}
  .hero-stats{flex-direction:column;gap:13px}
}