/* KingExch365 — shared tokens, panel header, footer, utilities */
:root{
  --green-1:#1aa15f;
  --green-2:#0b6b3d;
  --green-dark:#0a5c34;
  --green-deep:#064a29;
  --gold:#ffc02e;
  --gold-2:#f2a007;
  --red:#c8102e;
  --red-2:#9b0c23;
  --back:#a6d8f7;
  --lay:#f8c8d0;
  --page:#0e1b16;
  --panel:#ffffff;
  --panel-2:#f2f4f5;
  --ink:#16241d;
  --ink-dim:#5b6b63;
  --link:#0a58a8;
  --line:#d8dedb;
  --wa:#25D366;
  --radius:6px;
  --wrap:1280px;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.7;overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 14px}

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

/* ---------- panel header ---------- */
.site-head{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#1eb46a 0%,#12915a 45%,#0b6b3d 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:62px;position:relative}
.brand{display:flex;align-items:center;gap:8px}
.brand img{width:120px;height:auto;display:block}
.brand b{display:none}
.head-login{display:flex;align-items:center;gap:8px}
.head-search{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:17px;border:1px solid rgba(255,255,255,.35)}
.head-search:hover{background:rgba(255,255,255,.14);text-decoration:none}
.fake-field{display:flex;align-items:center;background:#fff;border:1px solid #cfd8d3;
  border-radius:3px;height:32px;padding:0 10px;font-size:13.5px;color:#8a968f;min-width:130px}
.fake-field:hover{text-decoration:none;border-color:var(--gold);color:#5b6b63}
.btn-login{display:flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:3px;
  background:linear-gradient(180deg,#e0233c,var(--red-2));color:#fff;font-weight:700;font-size:13.5px}
.btn-login:hover{text-decoration:none;filter:brightness(1.08)}
.nav-toggle{display:none;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:5px;width:42px;height:36px;font-size:19px;cursor:pointer}
/* nav tab bar */
.nav-bar{background:var(--green-dark);border-top:1px solid rgba(255,255,255,.12)}
.nav-links{display:flex;align-items:stretch;flex-wrap:wrap}
.nav-links a{color:#eafff3;font-size:14px;font-weight:600;padding:9px 15px;display:block;
  border-right:1px solid rgba(255,255,255,.08)}
.nav-links a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.nav-links a[aria-current="page"]{background:var(--green-deep);color:#fff}
.nav-links a.hot{background:#111;color:#ff3b3b;font-style:italic;font-weight:800}
.nav-links a.hot:hover{background:#000}

/* ---------- buttons ---------- */
.btn{display:inline-block;border-radius:4px;font-weight:800;text-align:center;
  padding:12px 24px;line-height:1.2;transition:filter .15s ease}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#20180a}
.btn-green{background:linear-gradient(180deg,#1eb46a,#0b6b3d);color:#fff}
.btn-sm{padding:8px 16px;font-size:13.5px}

/* ---------- content shell ---------- */
.content{background:var(--panel);color:var(--ink)}
.content .wrap{padding-top:6px;padding-bottom:6px}
h1,h2,h3{line-height:1.28;color:#0f2b1e}
h1{font-size:clamp(25px,4.2vw,38px);margin:0 0 14px;font-weight:800}
h2{font-size:clamp(21px,3vw,29px);margin:0 0 14px;font-weight:800}
h3{font-size:clamp(18px,2.2vw,21px);margin:24px 0 9px;font-weight:700}
section{padding:38px 0;border-bottom:1px solid var(--line)}
.lead{font-size:17.5px;color:#3d4f46}
p{margin:0 0 15px}
.answer-box{background:#f0f8f3;border-left:4px solid var(--green-1);
  border-radius:0 var(--radius) var(--radius) 0;padding:15px 18px;margin:18px 0}
.answer-box p:last-child{margin-bottom:0}
.crumbs{font-size:13px;color:var(--ink-dim);padding:12px 0 0}

/* tables */
table{width:100%;border-collapse:collapse;font-size:15px}
.table-scroll{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius)}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--green-deep);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.4px}
td{color:#3d4f46}
tr:last-child td{border-bottom:none}

figure{margin:24px 0}
figure img{border-radius:var(--radius);display:block;width:100%}
figcaption{font-size:13.5px;color:var(--ink-dim);margin-top:8px;text-align:center}

details{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;padding:0 16px}
details summary{cursor:pointer;font-weight:700;color:#0f2b1e;padding:14px 0;font-size:16px}
details[open] summary{color:var(--green-2)}
details p{margin:0 0 14px;color:#3d4f46}

.also-search{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.also-search span{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:14px;color:#3d4f46}

/* ---------- footer ---------- */
.site-foot{background:#08301d;color:#bcd6c8;padding:40px 0 24px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot-grid h2{font-size:14px;color:#fff;margin:0 0 11px;letter-spacing:.5px;text-transform:uppercase}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:7px}
.foot-grid a,.foot-bottom a{color:#bcd6c8}
.foot-grid a:hover,.foot-bottom a:hover{color:var(--gold)}
.foot-brand img{width:130px;margin-bottom:10px}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;margin:0 0 14px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;
  font-size:13.5px;line-height:1.7}
.age-badge{display:inline-block;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:3px 11px;font-weight:700;color:var(--gold);margin-right:9px;font-size:13px}

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

@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:820px){
  .nav-toggle{display:block}
  .head-login .fake-field{display:none}
  .nav-bar{position:absolute;top:100%;left:0;right:0;display:none;z-index:70;
    border-bottom:2px solid var(--gold)}
  .nav-bar.open{display:block}
  .nav-links{flex-direction:column}
  .nav-links a{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding:12px 16px;font-size:15px}
}
@media (max-width:520px){
  .brand img{width:96px}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- exchange panel components (shared by all panel pages) ---------- */

/* homepage-only: exchange panel replica */
.panel{background:#e9edeb;padding:0 0 18px}
.panel-grid{display:grid;grid-template-columns:232px 1fr 250px;gap:8px;padding-top:8px}
.side-head{background:var(--green-deep);color:#fff;font-size:12.5px;font-weight:700;
  padding:6px 10px;display:flex;justify-content:space-between;letter-spacing:.4px}
.side-list{background:#fff;border:1px solid var(--line);border-top:none}
.side-list a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;
  font-size:14px;color:#1d3a2c;font-weight:600;border-bottom:1px solid #eceeed}
.side-list a:hover{background:#f2f8f5;color:var(--green-2);text-decoration:none}
.side-list a span{color:var(--green-1);font-weight:800}
.bets-head{background:#14335c;color:#fff;font-size:12.5px;font-weight:700;padding:6px 10px;
  letter-spacing:.4px}
.bets-box{background:#fff;border:1px solid var(--line);border-top:none;min-height:150px;
  padding:16px 12px;font-size:13.5px;color:var(--ink-dim);text-align:center}
.bets-box .btn{margin-top:10px}
.banner-link{display:block;line-height:0}
.banner-link img{width:100%;border:1px solid var(--line)}
.hl-head{background:var(--green-deep);color:#fff;font-size:12.5px;font-weight:700;
  padding:6px 10px;margin-top:8px;letter-spacing:.4px}
.hl-tabs{display:flex;background:#dfe4e2;border:1px solid var(--line);border-top:none}
.hl-tabs a{padding:7px 20px;font-size:13.5px;font-weight:700;color:#3d4f46;
  border-right:1px solid var(--line)}
.hl-tabs a:hover{text-decoration:none;background:#eef2f0}
.hl-tabs a.on{background:#fff;color:var(--green-2)}
.hl-table{background:#fff;border:1px solid var(--line);border-top:none;overflow-x:auto}
.hl-table table{min-width:660px;font-size:13.5px}
.hl-table th{background:#f2f4f5;color:#3d4f46;text-transform:none;font-size:12.5px;
  padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;letter-spacing:0}
.hl-table th:first-child{text-align:left}
.hl-table td{padding:6px 8px;border-bottom:1px solid #eceeed;color:#3d4f46;vertical-align:middle}
.hl-table tr:hover td{background:#f7faf9}
.mkt a{font-weight:700;color:var(--link);font-size:13.5px}
.mkt time{color:#6b7a72;font-size:12.5px;margin-left:6px;font-weight:600}
.inplay{color:#d0021b;font-weight:800;font-size:12.5px;margin-left:6px}
.tagset{display:flex;gap:4px;justify-content:center}
.tag{width:19px;height:19px;border-radius:3px;color:#fff;font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.tag.bm{background:#14335c}.tag.f{background:#1279c4}.tag.s{background:#f26522}
.odd{display:block;text-align:center;padding:5px 0;font-weight:700;color:#16241d;font-size:13.5px;
  border-radius:2px;min-width:44px}
.odd.back{background:var(--back)}
.odd.lay{background:var(--lay)}
.odd:hover{text-decoration:none;filter:brightness(.94)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.pin{color:#9aa8a1;text-align:center}
/* casino tiles */
.game-tabs{display:flex;flex-wrap:wrap;background:linear-gradient(180deg,#12915a,#0b6b3d);
  margin-top:14px;border-radius:4px 4px 0 0}
.game-tabs a{padding:9px 18px;color:#eafff3;font-size:14px;font-weight:700}
.game-tabs a:hover{background:rgba(0,0,0,.16);text-decoration:none}
.game-tabs a.on{background:rgba(0,0,0,.28);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#fff;
  border:1px solid var(--line);border-top:none;padding:12px;border-radius:0 0 4px 4px}
.tile{display:block;border-radius:8px;overflow:hidden;line-height:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .18s ease}
.tile:hover{transform:translateY(-4px);text-decoration:none}
.tile img{width:100%;display:block;aspect-ratio:640/672;object-fit:cover}
.panel-note{font-size:12.5px;color:#6b7a72;text-align:center;padding:12px 4px 0;line-height:1.6}

@media (max-width:1100px){
  .panel-grid{grid-template-columns:210px 1fr}
  .bets-col{display:none}
}
@media (max-width:820px){
  .panel-grid{grid-template-columns:1fr}
  .side-col{order:2}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .mf{grid-template-columns:1fr}
  .steps li{padding-left:48px}
}
.hl-table caption{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- mobile overflow fixes ---------- */
.panel-grid > *{min-width:0}
.main-col,.side-col,.bets-col{min-width:0;max-width:100%}
.hl-table,.table-scroll{max-width:100%}
.wrap{overflow-wrap:break-word}
main,.panel,.content{max-width:100%;overflow-x:clip}

/* ---------- shared content components (used across pages) ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0 0}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 56px;
  border-left:2px dashed var(--line);margin-left:20px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-21px;top:-4px;width:40px;height:40px;
  border-radius:50%;background:linear-gradient(180deg,#1eb46a,#0b6b3d);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.steps h3{margin:0 0 5px}
.steps p{margin:0;color:#3d4f46}
.checks{list-style:none;padding:0;margin:16px 0 0}
.checks li{position:relative;padding-left:32px;margin-bottom:11px;color:#3d4f46}
.checks li::before{content:"\2713";position:absolute;left:0;top:1px;width:21px;height:21px;
  border-radius:50%;background:#dcf0e4;color:#12784a;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800}
.glossary{margin:18px 0 0}
.glossary dt{font-weight:800;color:var(--green-2);margin-top:14px}
.glossary dd{margin:4px 0 0;color:#3d4f46}
.numbox{background:#f0f8f3;border:1px solid #d5e8de;border-radius:var(--radius);padding:18px;margin-top:16px}
.numbox p:last-child{margin:0}
.rounds,.week,.clock{list-style:none;padding:0;margin:18px 0 0}
.rounds li,.week li,.clock li{display:grid;grid-template-columns:140px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.rounds li:last-child,.week li:last-child,.clock li:last-child{border-bottom:none}
.rounds b,.week b,.clock b{color:var(--green-2)}
.mf{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.mf > div{border-radius:var(--radius);padding:16px;font-size:15px}
.myth{background:#fdf0f1;border:1px solid #f2c9ce}
.fact{background:#eff8f2;border:1px solid #c9e6d4}
.mf h3{margin:0 0 6px;font-size:15.5px}
.myth h3{color:#b0263a}.fact h3{color:#12784a}
.tl{list-style:none;padding:0 0 0 24px;margin:22px 0 0;border-left:3px solid var(--green-1)}
.tl li{position:relative;margin-bottom:22px}
.tl li::before{content:"";position:absolute;left:-32px;top:7px;width:13px;height:13px;border-radius:50%;
  background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--green-1)}
.tl h3{margin:0 0 5px}
.tl p{margin:0;color:#3d4f46}
.tl b{color:var(--green-2)}
.warn{background:#fdf0f1;border:1px solid #f2c9ce;border-radius:var(--radius);padding:16px;margin-top:18px}
@media (max-width:820px){
  .mf{grid-template-columns:1fr}
  .rounds li,.week li,.clock li{grid-template-columns:1fr;gap:4px}
  .steps li{padding-left:48px}
}

/* ---------- game tiles with category filter ---------- */
.game-tabs{display:flex;flex-wrap:wrap;gap:0}
.cat-tab{appearance:none;border:none;cursor:pointer;font-family:var(--font);
  padding:10px 18px;color:#eafff3;font-size:14px;font-weight:700;background:transparent}
.cat-tab:hover{background:rgba(0,0,0,.16)}
.cat-tab.on{background:rgba(0,0,0,.3);color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
.tile{position:relative;line-height:0}
.tile[hidden]{display:none}
.tile-meta{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;line-height:1.3;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));text-align:left}
.tile-meta b{display:block;color:#fff;font-size:13.5px;font-weight:800}
.tile-meta em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--gold);margin-top:2px}
.tiles-empty{background:var(--panel-2);border:1px solid var(--line);border-top:none;
  margin:0;padding:18px;text-align:center;color:#3d4f46;font-size:14.5px}
@media (max-width:560px){
  .cat-tab{padding:9px 12px;font-size:13px}
  .tile-meta b{font-size:12px}
  .tile-meta em{font-size:10px}
}

/* ---------- image animations: 8 entry modes + 5 hover modes ---------- */
.anim{will-change:opacity,transform}
@media (prefers-reduced-motion:no-preference){
  .anim{opacity:0;transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.3,1)}
  .anim.in{opacity:1;transform:none}
  .a1{transform:translateY(30px)}
  .a2{transform:scale(.84)}
  .a3{transform:translateX(-38px)}
  .a4{transform:translateX(38px)}
  .a5{transform:rotate(-7deg) scale(.88)}
  .a6{transform:perspective(760px) rotateY(26deg);transform-origin:left center}
  .a7{transform:translateY(-28px) scale(.94)}
  .a8{transform:perspective(760px) rotateX(30deg);transform-origin:bottom center}
}
/* hover treatments */
.tile img,figure.anim img,.banner-link img{transition:transform .55s cubic-bezier(.2,.7,.3,1),filter .55s ease}
.tile{overflow:hidden}
.h1:hover img{transform:scale(1.09)}
.h2:hover img{transform:scale(1.07) rotate(1.6deg)}
.h3:hover img{filter:saturate(1.35) brightness(1.08);transform:scale(1.04)}
.h4:hover img{transform:translateY(-8px) scale(1.06)}
.h5:hover img{transform:scale(1.12);filter:contrast(1.12)}
/* shine sweep across tiles */
.tile::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));
  transform:skewX(-18deg);opacity:0;transition:none}
.tile:hover::after{opacity:1;animation:tile-shine .85s ease forwards}
@keyframes tile-shine{from{left:-70%}to{left:125%}}
/* banner + content figures */
.banner-link{overflow:hidden;border-radius:4px}
.banner-link:hover img{transform:scale(1.03)}
figure.anim img{border-radius:var(--radius)}
figure.anim:hover img{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){
  .tile:hover::after{animation:none;opacity:0}
  .tile img,figure.anim img,.banner-link img{transition:none}
}

/* header logo: gentle one-time entry, distinct from scroll animations */
@media (prefers-reduced-motion:no-preference){
  .brand img{animation:brand-in .8s cubic-bezier(.2,.75,.3,1) both}
  @keyframes brand-in{from{opacity:0;transform:translateX(-14px) scale(.92)}to{opacity:1;transform:none}}
  .brand img{transition:transform .4s ease}
  .brand:hover img{transform:scale(1.05)}
}