/* KingExch365 — shared site styles (header, footer, tokens, panel UI) */
:root{
  --green-900:#063b2b;
  --green-800:#0a5c43;
  --green-700:#0d7a55;
  --green-600:#12946a;
  --green-100:#e6f4ee;
  --gold:#f5a800;
  --gold-2:#ffd257;
  --ink:#12211c;
  --muted:#5a6b64;
  --line:#d8e5df;
  --bg:#f4f7f5;
  --white:#fff;
  --blue:#1e4f9c;
  --back:#a7d8f4;
  --lay:#f6c6ce;
  --radius:10px;
  --shadow:0 2px 10px rgba(6,59,43,.10);
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.7;font-size:16.5px;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#20180a;padding:10px 16px;z-index:999;font-weight:700}
.skip-link:focus{left:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.site-head{background:linear-gradient(180deg,var(--green-700),var(--green-800));position:sticky;top:0;z-index:120;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.head-row{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;position:relative}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand img{height:44px;width:auto;display:block}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{color:#dff0e8;font-size:14.5px;font-weight:600;padding:8px 11px;border-radius:6px}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.nav a[aria-current="page"]{color:var(--gold-2);background:rgba(0,0,0,.22)}
.btn-cta{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2b1f00 !important;font-weight:800;padding:9px 18px;border-radius:6px;font-size:14.5px;box-shadow:0 2px 0 #b57c00}
.btn-cta:hover{filter:brightness(1.06);text-decoration:none}
.burger{display:none;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:20px;line-height:1;padding:9px 12px;border-radius:6px;cursor:pointer;margin-left:auto}

@media(max-width:940px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--green-800);padding:0 12px;max-height:0;overflow:hidden;margin:0;border-top:0 solid transparent}
  .nav.open{max-height:640px;padding:10px 12px 16px;border-top:1px solid rgba(255,255,255,.14)}
  .nav a{padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.09)}
  .btn-cta{text-align:center;margin-top:10px}
}

/* ---------- Generic content ---------- */
main{display:block}
.breadcrumb{font-size:13.5px;color:var(--muted);padding:12px 0}
.breadcrumb a{color:var(--green-700)}
h1{font-size:clamp(25px,4.2vw,38px);line-height:1.22;margin:.2em 0 .45em;color:var(--green-900)}
h2{font-size:clamp(21px,3vw,27px);line-height:1.3;margin:1.6em 0 .5em;color:var(--green-800)}
h3{font-size:clamp(18px,2.3vw,21px);margin:1.3em 0 .4em;color:var(--green-800)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:22px}
li{margin-bottom:.45em}
.sec{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:20px 0;box-shadow:var(--shadow)}
.lead{font-size:18px;color:#25403a}
.answer{background:var(--green-100);border-left:5px solid var(--green-600);padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 1.1em;font-size:16.5px}
.tbl-wrap{overflow-x:auto;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;background:#fff}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--green-800);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:#f7fbf9}

details{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:10px}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:700;padding:13px 16px;color:var(--green-800);list-style:none}
summary::-webkit-details-marker{display:none}
summary:before{content:"+ ";color:var(--gold);font-weight:900}
details[open] summary:before{content:"– "}
details p,details ul{padding:0 16px;margin-bottom:14px}

.cta-band{background:linear-gradient(120deg,var(--green-800),var(--green-600));color:#fff;border-radius:var(--radius);padding:26px 24px;margin:26px 0;text-align:center}
.cta-band h2,.cta-band h3{color:#fff;margin-top:0}
.cta-band p{color:#dff0e8}
.cta-band .btn-cta{display:inline-block;font-size:16px;padding:12px 26px}

.also-search{margin:26px 0 10px}
.also-search h2{margin-bottom:.6em}
.also-search ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.also-search li{background:#fff;border:1px solid var(--line);color:#3c5049;border-radius:20px;padding:6px 14px;font-size:13.5px;margin:0}

/* ---------- Footer ---------- */
.site-foot{background:var(--green-900);color:#bcd6cc;margin-top:34px;padding:30px 0 18px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;max-width:1180px;margin:0 auto;padding:0 16px}
.site-foot h3{color:#fff;font-size:16px;margin:0 0 10px}
.site-foot a{color:#bcd6cc}
.site-foot ul{list-style:none;padding:0}
.site-foot li{margin-bottom:7px}
.foot-brand img{height:40px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:14px;text-align:center;font-size:13px;color:#8faea2}
.age{display:inline-block;border:2px solid var(--gold);color:var(--gold);border-radius:50%;width:34px;height:34px;line-height:30px;text-align:center;font-weight:800;font-size:13px;margin-bottom:8px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:16px;bottom:16px;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;z-index:200;box-shadow:0 4px 14px rgba(0,0,0,.3);animation:wapulse 2s infinite}
.wa-float svg{width:34px;height:34px;fill:#fff}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- Exchange panel demo (shared by home + casino) ---------- */
.panel{background:#eef2f0;border:1px solid #cfded7;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.panel-top{background:linear-gradient(180deg,#0d7a55,#0a5c43);display:flex;overflow-x:auto;scrollbar-width:none}
.panel-top::-webkit-scrollbar{display:none}
.panel-top span,.panel-top a{color:#dff0e8;font-size:13.5px;font-weight:700;padding:10px 14px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.08)}
.panel-top .on{background:#063b2b;color:#fff}
.panel-top .hot{color:var(--gold-2)}
.panel-body{display:grid;grid-template-columns:230px 1fr 200px;gap:8px;padding:8px;background:#e7ede a;background:#e7edea}
@media(max-width:1000px){.panel-body{grid-template-columns:1fr}.panel-side,.panel-bets{display:none}}
.panel-side,.panel-bets{background:#fff;border:1px solid #d5e2db;border-radius:6px;overflow:hidden}
.side-head,.bets-head{background:var(--blue);color:#fff;font-size:13px;font-weight:700;padding:7px 10px}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{margin:0}
.panel-main{min-width:0}
.pbanner{background:linear-gradient(110deg,#3b1d6e,#7b2ea8 55%,#c02fa0);border-radius:6px;padding:26px 22px;color:#fff;position:relative;overflow:hidden}
.pbanner b{display:block;font-size:clamp(22px,3.4vw,34px);letter-spacing:1px;text-transform:uppercase;line-height:1.1}
.pbanner span{font-size:14px;color:#ffd9f4}
.pbanner .chips{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:44px;opacity:.85}
.hl-head{background:linear-gradient(180deg,#0d7a55,#0a5c43);color:#fff;font-size:13px;font-weight:700;padding:6px 10px;margin-top:8px;border-radius:6px 6px 0 0}
.hl-tabs{display:flex;background:#dfe8e4;border-bottom:1px solid #cfded7}
.hl-tabs span{font-size:13px;font-weight:700;padding:7px 16px;color:#3c5049;cursor:default}
.hl-tabs .on{background:#fff;color:var(--green-800);border-top:2px solid var(--gold)}
.mkt{background:#fff;border:1px solid #d5e2db;border-top:0;border-radius:0 0 6px 6px;overflow-x:auto}
.mkt table{min-width:640px;font-size:13.5px;border-collapse:collapse;width:100%}
.mkt td{border:0;border-bottom:1px solid #eef3f0;padding:7px 9px}
.mkt .ev{color:var(--blue);font-weight:600;white-space:nowrap}
.mkt .tm{color:#7c8b85;font-size:12.5px;padding-left:8px;white-space:nowrap}
.mkt .live{background:#e4372e;color:#fff;font-size:10.5px;font-weight:800;border-radius:3px;padding:1px 5px;margin-left:6px}
.odd{display:inline-block;min-width:52px;text-align:center;border-radius:3px;padding:4px 0;font-weight:700;font-size:13px}
.odd.b{background:var(--back)}
.odd.l{background:var(--lay)}

/* casino grid */
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px}
@media(max-width:760px){.game-grid{grid-template-columns:repeat(2,1fr)}}
.game{display:block;position:relative;border-radius:10px;overflow:hidden;background:#0a2b20;box-shadow:0 3px 10px rgba(6,59,43,.18);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease;
  animation:tileIn .55s cubic-bezier(.2,.8,.3,1) both}
.game img{display:block;width:100%;height:auto;aspect-ratio:640/672;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s ease}
.game:hover,.game:focus-visible{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 26px rgba(6,59,43,.38),0 0 0 2px var(--gold) inset}
.game:hover img,.game:focus-visible img{transform:scale(1.08);filter:saturate(1.15) brightness(1.05)}
.game:active{transform:translateY(-2px) scale(.99)}

/* shine sweep across the tile on hover */
.game:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);
  transform:translateX(-120%);opacity:0}
.game:hover:before,.game:focus-visible:before{animation:shine .85s ease-out forwards}

/* gold glow ring pulses on the first tile of each grid */
.game-grid .game:first-child:after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(245,168,0,.55);animation:hotpulse 2.6s ease-out infinite}

@keyframes tileIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes shine{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
@keyframes hotpulse{0%{box-shadow:0 0 0 0 rgba(245,168,0,.5)}70%{box-shadow:0 0 0 12px rgba(245,168,0,0)}100%{box-shadow:0 0 0 0 rgba(245,168,0,0)}}

/* staggered entrance, row by row */
.game-grid .game:nth-child(1){animation-delay:.02s}
.game-grid .game:nth-child(2){animation-delay:.08s}
.game-grid .game:nth-child(3){animation-delay:.14s}
.game-grid .game:nth-child(4){animation-delay:.20s}
.game-grid .game:nth-child(5){animation-delay:.26s}
.game-grid .game:nth-child(6){animation-delay:.32s}
.game-grid .game:nth-child(7){animation-delay:.38s}
.game-grid .game:nth-child(8){animation-delay:.44s}
.game-grid .game:nth-child(n+9){animation-delay:.50s}

/* logo + brand images */
.brand img{transition:transform .25s ease,filter .25s ease}
.brand:hover img{transform:scale(1.05);filter:drop-shadow(0 0 8px rgba(255,210,87,.55))}

@media(prefers-reduced-motion:reduce){
  .game,.game img,.game:before,.game-grid .game:first-child:after,.brand img{animation:none !important;transition:none !important}
  .game:hover{transform:none}
}

/* ---------- shared content blocks (numbered steps, myth/fact) ---------- */
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 52px;margin:0}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#2b1f00;font-weight:900;display:flex;align-items:center;justify-content:center}
.steps li b{display:block;color:var(--green-800)}
.mf2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mf2 div{border-radius:8px;padding:14px 16px;font-size:15.5px}
.mf2 .myth{background:#fdeeee;border-left:5px solid #d24a4a}
.mf2 .fact{background:#eaf6f0;border-left:5px solid var(--green-600)}
@media(max-width:700px){.mf2{grid-template-columns:1fr}}

/* ---------- lobby category tabs ---------- */
.cat-bar button{background:none;border:0;color:#cfe9dd;font-family:var(--font);font-weight:700;font-size:13.5px;padding:11px 18px;white-space:nowrap;cursor:pointer;border-radius:0}
.cat-bar button:hover{color:#fff;background:rgba(255,255,255,.10)}
.cat-bar button.on{color:#fff;background:#063b2b;box-shadow:inset 0 -3px 0 var(--gold)}
.cat-bar button:focus-visible{outline:2px solid var(--gold-2);outline-offset:-3px}
.game[hidden]{display:none}

/* ---------- interactive sports panel ---------- */
.panel-top a{display:inline-block;text-decoration:none}
.panel-top a:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.panel-top a.on{background:#063b2b;color:#fff}
.side-list a{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-size:14px;color:#25403a;border-bottom:1px solid #e8efeb;text-decoration:none}
.side-list a:after{content:"\203A";color:#8aa79b;font-weight:900}
.side-list a:hover{background:#eef6f2;color:var(--green-700);text-decoration:none}
.hl-tabs button{background:none;border:0;font-family:var(--font);font-size:13px;font-weight:700;padding:7px 16px;color:#3c5049;cursor:pointer}
.hl-tabs button:hover{color:var(--green-800);background:#eef6f2}
.hl-tabs button.on{background:#fff;color:var(--green-800);box-shadow:inset 0 2px 0 var(--gold)}
.hl-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.mkt a.ev{color:var(--blue);font-weight:600;text-decoration:none}
.mkt a.ev:hover{text-decoration:underline}
a.odd{text-decoration:none;color:#12211c;transition:filter .15s ease}
a.odd:hover{filter:brightness(.93);text-decoration:none}
.mkt tr[hidden]{display:none}
.pbanner-link{display:block;text-decoration:none;color:inherit}
.pbanner-link:hover .pbanner{filter:brightness(1.06)}