/* fair-play.pro — shared site.css | FairPlay dark casino lobby | prefix fp- */
@font-face{font-family:'Unbounded';src:url('/fonts/unbounded-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+20B9,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Unbounded';src:url('/fonts/unbounded-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+20B9,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Jakarta';src:url('/fonts/jakarta-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+20B9,U+2122}
@font-face{font-family:'Jakarta';src:url('/fonts/jakarta-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+20B9,U+2122}
@font-face{font-family:'Jakarta';src:url('/fonts/jakarta-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+20B9,U+2122}
@font-face{font-family:'Teko';src:url('/fonts/teko-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+20B9}
@font-face{font-family:'Teko';src:url('/fonts/teko-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+20B9}

:root{
  --bg:#07120d; --panel:#0e1f17; --panel2:#12271c; --border:#1f3d2c;
  --ink:#eaf5ee; --muted:#9fb8ab; --green:#12d18e; --deep:#0a7d54; --gold:#f5c451; --gold-ink:#20160a;
  --wa:#25D366; --live:#ff5c5c; --shadow:0 10px 34px rgba(0,0,0,.45);
  --radius:16px; --tap:46px; --wrap:1200px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
:where(body *){min-width:0}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Jakarta',system-ui,Segoe UI,Roboto,sans-serif;
  line-height:1.62;font-size:16.5px;overflow-x:clip;max-width:100%;overflow-wrap:break-word;
  background-image:radial-gradient(1100px 460px at 82% -6%,rgba(18,209,142,.10),transparent 60%),radial-gradient(760px 420px at 6% 10%,rgba(245,196,81,.06),transparent 60%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:'Unbounded',sans-serif;line-height:1.16;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.6vw,2.15rem);font-weight:700}
h3{font-size:clamp(1.16rem,2.4vw,1.4rem);font-weight:700}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.fp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(14px,3.4vw,26px)}
.fp-skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--gold-ink);padding:10px 16px;z-index:200;font-weight:700}
.fp-skip:focus{left:8px;top:8px}
main{max-width:100%;overflow-x:clip;display:block}
section{padding:clamp(38px,6vw,68px) 0;position:relative}
.fp-eyebrow{font-family:'Teko',sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-size:1.15rem;margin:0 0 .3em}
.fp-lead{font-size:1.12rem;color:#d4e6db}

/* ---------- CTA buttons (only gold or wa-green, dark ink, >=4.5) ---------- */
.fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--tap);
  padding:.72em 1.5em;font-family:'Unbounded',sans-serif;font-weight:700;font-size:.98rem;cursor:pointer;
  border:0;text-align:center;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .14s ease,filter .14s ease}
.fp-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.fp-btn:active{transform:translateY(0)}
.fp-gold{background:var(--gold)!important;color:var(--gold-ink)!important;box-shadow:0 6px 18px rgba(245,196,81,.28)}
.fp-green{background:var(--wa)!important;color:#062611!important;box-shadow:0 6px 18px rgba(37,211,102,.26)}
.fp-ghost{background:transparent!important;color:var(--gold)!important;border:2px solid var(--gold)!important}

/* ---------- header ---------- */
.fp-hdr{position:sticky;top:0;z-index:120;width:100%;max-width:100vw;background:rgba(7,18,13,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--border)}
.fp-hdr-in{display:flex;align-items:center;gap:14px;min-height:64px}
.fp-brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.fp-brand img{height:38px;width:auto}
.fp-nav{display:flex;align-items:center;gap:4px}
.fp-nav a{color:var(--ink);font-weight:600;font-size:.9rem;padding:9px 10px;border-radius:9px;white-space:nowrap}
.fp-nav a:hover,.fp-nav a[aria-current=page]{color:var(--gold);background:rgba(245,196,81,.10)}
.fp-hdr-cta{display:flex;gap:8px}
.fp-hdr-cta .fp-btn{padding:.5em 1em;font-size:.85rem;min-height:40px;white-space:nowrap}
.fp-burger{display:none;background:transparent;border:1px solid var(--border);color:var(--ink);width:44px;height:44px;border-radius:10px;cursor:pointer;font-size:1.3rem}
@media(max-width:1240px){
  .fp-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--panel);border-bottom:1px solid var(--border);padding:8px;display:none;box-shadow:var(--shadow)}
  .fp-nav.open{display:flex}
  .fp-nav a{padding:13px 12px;border-radius:8px}
  .fp-burger{display:inline-flex;align-items:center;justify-content:center;order:3}
  .fp-hdr-cta .fp-btn:first-child{display:none}
}

/* ---------- news ticker ---------- */
.fp-ticker{background:linear-gradient(90deg,var(--deep),#075c3e);border-bottom:1px solid var(--border);overflow:hidden}
.fp-ticker-in{display:flex;align-items:center;gap:12px;height:40px}
.fp-ticker-tag{background:var(--gold);color:var(--gold-ink);font-family:'Teko',sans-serif;font-weight:600;
  font-size:1.1rem;letter-spacing:.08em;padding:0 14px;height:100%;display:flex;align-items:center;flex:none;text-transform:uppercase}
.fp-ticker-track{white-space:nowrap;overflow:hidden;flex:1}
.fp-ticker-track span{display:inline-block;padding-left:100%;animation:fp-marq 26s linear infinite;color:#eafff4;font-weight:500}
@keyframes fp-marq{to{transform:translateX(-100%)}}

/* ---------- hero carousel ---------- */
.fp-hero{position:relative;padding-top:clamp(20px,4vw,34px)}
.fp-carousel{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);
  aspect-ratio:1200/460;background:var(--panel)}
.fp-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;background-size:cover;background-position:center}
.fp-slide.on{opacity:1}
.fp-slide img{width:100%;height:100%;object-fit:cover}
.fp-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.fp-dots button{width:11px;height:11px;border-radius:50%;border:0;background:var(--border);cursor:pointer;padding:0}
.fp-dots button[aria-current=true]{background:var(--gold);width:26px;border-radius:6px}

/* ---------- lobby grid ---------- */
.fp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,16px)}
@media(max-width:900px){.fp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.fp-grid{grid-template-columns:repeat(2,1fr)}}
.fp-tile{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--panel2);
  aspect-ratio:1/1;box-shadow:0 6px 16px rgba(0,0,0,.3);isolation:isolate}
.fp-tile.wide{grid-column:span 2;aspect-ratio:2/1}
@media(max-width:560px){.fp-tile.wide{grid-column:span 2;aspect-ratio:2/1}}
.fp-tile-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;transform:scale(1.02);transition:filter .35s ease}
.fp-tile:hover .fp-tile-bg,.fp-tile:focus-visible .fp-tile-bg{filter:brightness(1.14) saturate(1.12)}
.fp-tile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,18,13,0) 34%,rgba(7,18,13,.86) 100%)}
.fp-tile-body{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
.fp-tile-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.92rem;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.fp-play{background:var(--gold)!important;color:var(--gold-ink)!important;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:.74rem;padding:6px 11px;min-height:34px;display:inline-flex;align-items:center;border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}
.fp-live{position:absolute;top:9px;right:9px;background:var(--live);color:#fff;font-family:'Teko',sans-serif;font-weight:600;
  font-size:.86rem;letter-spacing:.06em;padding:1px 9px;border-radius:5px;display:flex;align-items:center;gap:5px}
.fp-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:fp-pulse 1.1s infinite}
@keyframes fp-pulse{50%{opacity:.25}}
/* wide live-sports tile inner */
.fp-ls{position:absolute;top:12px;right:12px;background:rgba(7,18,13,.62);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-width:120px}
.fp-ls div{display:flex;justify-content:space-between;gap:14px;font-family:'Teko',sans-serif;font-size:1.12rem;line-height:1.5}
.fp-ls b{background:var(--gold);color:var(--gold-ink);border-radius:5px;padding:0 7px;font-family:'Jakarta';font-weight:700;font-size:.8rem}

/* ---------- panel / cards ---------- */
.fp-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(18px,3vw,30px);box-shadow:var(--shadow)}
.fp-two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3.4vw,40px);align-items:center}
@media(max-width:820px){.fp-two{grid-template-columns:1fr}}
.fp-figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.fp-figure img{width:100%;height:auto}

/* login/register replica card */
.fp-auth{max-width:420px;margin:0 auto;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);box-shadow:var(--shadow)}
.fp-auth h3{text-align:center}
.fp-field{margin:0 0 13px}
.fp-field label{display:block;font-size:.82rem;color:var(--muted);margin:0 0 5px;font-weight:600}
.fp-field .fp-inp{display:block;width:100%;min-height:var(--tap);background:#0a1a12;border:1px solid var(--border);border-radius:10px;
  color:var(--ink);padding:0 14px;font:inherit;line-height:var(--tap)}
.fp-auth .fp-btn{width:100%}

/* stat/chip rows */
.fp-chips{display:flex;flex-wrap:wrap;gap:9px}
.fp-chip{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:.86rem;color:#cfe3d8;font-weight:500}
.fp-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){.fp-stat{grid-template-columns:repeat(2,1fr)}}
.fp-stat .fp-panel{text-align:center;padding:18px 12px}
.fp-stat b{display:block;font-family:'Teko',sans-serif;font-weight:600;font-size:2.2rem;color:var(--gold);line-height:1}
.fp-stat span{color:var(--muted);font-size:.85rem}

/* steps */
.fp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
@media(max-width:820px){.fp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.fp-steps{grid-template-columns:1fr}}
.fp-step{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px 16px;position:relative}
.fp-step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:16px;width:34px;height:34px;border-radius:9px;
  background:var(--gold);color:var(--gold-ink);font-family:'Unbounded';font-weight:800;display:flex;align-items:center;justify-content:center}
.fp-step h3{margin-top:8px;font-size:1.05rem}

/* phone frame */
.fp-phone{width:min(280px,72vw);margin:0 auto;border:9px solid #05100b;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);background:#05100b}
.fp-phone img{width:100%;display:block}

/* ---------- seo-box: ledger variant (full-bleed tinted band, accent-bar) ---------- */
.fp-seo-band{background:linear-gradient(180deg,#0a1a12,#0b1f15);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.seo-box.ledger{display:block}
.seo-box.ledger h2{margin-bottom:.2em}
.seo-box.ledger .lg-row{border-left:3px solid var(--gold);padding:2px 0 2px 16px;margin:0 0 16px}
.seo-box.ledger h3{font-size:1.05rem;color:var(--gold);margin:0 0 .3em}
.seo-box.ledger p{margin:0;color:#cfe3d8}

/* ---------- FAQ accordion (gold bar, +/-) ---------- */
.fp-faq details{border:1px solid var(--border);border-radius:12px;background:var(--panel);margin:0 0 11px;overflow:hidden}
.fp-faq summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;font-family:'Unbounded';font-weight:700;font-size:1rem;position:relative}
.fp-faq summary::-webkit-details-marker{display:none}
.fp-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.6rem;line-height:1}
.fp-faq details[open] summary::after{content:"\2212"}
.fp-faq summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);opacity:.0;transition:opacity .2s}
.fp-faq details[open] summary::before{opacity:1}
.fp-faq .fp-a{padding:0 18px 16px;color:#cfe3d8}

/* ---------- related strip ---------- */
.fp-related{display:flex;flex-wrap:wrap;gap:12px}
.fp-related a{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px;font-weight:600;color:var(--ink);flex:1 1 200px}
.fp-related a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- footer ---------- */
.fp-foot{background:#050d09;border-top:1px solid var(--border);padding:44px 0 90px;margin-top:20px}
.fp-foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px}
@media(max-width:820px){.fp-foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.fp-foot-cols{grid-template-columns:1fr}}
.fp-foot h4,.fp-foot .fp-fcat{font-family:'Unbounded';font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.fp-foot a{display:block;color:var(--muted);padding:5px 0;font-size:.92rem}
.fp-foot a:hover{color:var(--gold)}
.fp-social{display:flex;gap:10px;margin:12px 0}
.fp-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.fp-social svg{width:19px;height:19px;fill:var(--muted)}
.fp-social a:hover svg{fill:var(--gold)}
.fp-partner{display:flex;align-items:center;gap:12px;margin:18px 0;flex-wrap:wrap}
.fp-partner-plate{background:#fff;border-radius:12px;padding:10px 14px;display:inline-flex;align-items:center}
.fp-partner-plate img{height:34px;width:auto}
.fp-partner span{color:var(--muted);font-size:.82rem;max-width:320px}
.fp-foot-legal{border-top:1px solid var(--border);margin-top:26px;padding-top:20px;color:#7f9a8d;font-size:.82rem}

/* ---------- whatsapp float ---------- */
.fp-wa{position:fixed;right:18px;bottom:18px;z-index:130;width:60px;height:60px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.42);animation:fp-wapulse 2.4s infinite}
.fp-wa svg{width:32px;height:32px;fill:#fff}
@keyframes fp-wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- confetti canvas ---------- */
#fp-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
body>*{position:relative;z-index:2}
#fp-fx{z-index:1}

/* ---------- breadcrumb ---------- */
.fp-crumb{font-size:.86rem;color:var(--muted);padding-top:18px}
.fp-crumb a{color:var(--muted)}.fp-crumb a:hover{color:var(--gold)}

/* ---------- tables (scoped min-width only in wrap) ---------- */
.fp-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border:1px solid var(--border);border-radius:12px;position:relative}
.fp-tbl-wrap>table{min-width:520px;width:100%;border-collapse:collapse}
.fp-tbl-wrap th,.fp-tbl-wrap td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:.92rem}
.fp-tbl-wrap th{background:var(--panel2);color:var(--gold);font-family:'Unbounded';font-weight:700;font-size:.82rem}

/* ---------- image motion (CSS only; default state VISIBLE, JS only adds .in/.seen) ---------- */
@keyframes fp-kb{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes fp-drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.08) translate(-1.6%,-1.2%)}}
@keyframes fp-pan{from{transform:scale(1.01)}to{transform:scale(1.035) translateX(-.8%)}}
@keyframes fp-sheen{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(360%) skewX(-18deg)}}
@keyframes fp-sheen-h{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(360%) skewX(-18deg)}}
@keyframes fp-float{50%{transform:translateY(-9px)}}
.fp-slide img{transform-origin:78% 50%}
.fp-slide.on img{animation:fp-kb 6.5s ease-out both}
.fp-tile.in .fp-tile-bg{animation:fp-drift 12s ease-in-out infinite alternate}
.fp-tile.in:nth-child(3n+2) .fp-tile-bg{animation-duration:15s;animation-delay:-5s}
.fp-tile.in:nth-child(3n) .fp-tile-bg{animation-duration:10s;animation-delay:-7s;animation-direction:alternate-reverse}
.fp-tile::before{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,196,81,0),rgba(245,196,81,.3),rgba(245,196,81,0));transform:translateX(-140%) skewX(-18deg)}
.fp-tile.seen::before{animation:fp-sheen 1.15s ease-out var(--fp-d,0ms) both}
.fp-tile:hover::before,.fp-tile:focus-visible::before{animation:fp-sheen-h .9s ease-out both}
.fp-mo{position:relative;overflow:hidden;border-radius:14px}
.fp-mo img{transform-origin:72% 50%}
.fp-mo.in img{animation:fp-pan 14s ease-in-out infinite alternate}
.fp-mo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,236,170,0),rgba(255,236,170,.24),rgba(255,236,170,0));transform:translateX(-140%) skewX(-18deg)}
.fp-mo.seen::after{animation:fp-sheen 1.6s .25s ease-out both}
.fp-mo:hover::after{animation:fp-sheen-h 1.2s ease-out both}
.fp-float{animation:fp-float 5.5s ease-in-out infinite}

/* rotate lock (portrait-first like model, but non-blocking) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .fp-ticker-track span{animation:none;padding-left:0}}

.fp-tile.wide .fp-tile-bg{background-position:center 12%}