/* FORZZA — Black Luxury (v3)
   Deep black canvas, hairline edges, electric blue for interaction only,
   green reserved for balance and success. Presentation only: no game,
   API, session, wallet or catalog logic is touched here.
   Loaded last; remove this stylesheet link to roll back the theme. */
:root {
  --bg:#05070a; --bg2:#080b11;
  --panel:#0b1017; --panel2:#111826; --card:#0b1017;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --hair:rgba(255,255,255,.05);
  --txt:#f2f5fa; --mut:#8b98ad; --mut2:#6b7789;
  --acc:#2f7bff; --acc2:#7fb0ff; --acc-dim:rgba(47,123,255,.10);
  --green:#4ade80; --go:#2f7bff; --goink:#ffffff; --blue:#2f7bff;
  /* v2-pro.css paints the VIP club, the VIP nav tab and the card top edge
     with --gold/--gold2 (12 rules). This block used to redefine BOTH as blue,
     so every "premium" surface silently rendered in the same blue as the
     normal accent. Restored to the warm gold v2-pro.css was written against. */
  --gold:#e4c57a; --gold2:#f3e2b0;
  --balance:#4ade80; --balance-soft:rgba(74,222,128,.07);
  --balance-line:rgba(74,222,128,.22); --balance-glow:transparent;
  --r:14px; --r-s:14px;
}
html,body { background:var(--bg)!important; }
body {
  letter-spacing:0;
  background:radial-gradient(1100px 460px at 50% -20%,rgba(47,123,255,.055),transparent 62%),var(--bg)!important;
}

/* ---------- top bar + identity ---------- */
.fz-top {
  background:rgba(5,7,10,.92)!important;
  border-bottom:1px solid var(--line)!important;
  padding:8px 16px; padding-top:calc(8px + env(safe-area-inset-top,0px));
  gap:8px; min-height:60px;
}
.fz-logo { gap:9px; font-size:17px; cursor:pointer; }
.fz-logo .mark {
  width:33px; height:33px; border-radius:10px; flex:0 0 33px;
  background:none; object-fit:contain; box-shadow:0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.55);
}
.fz-logo .wm { display:flex; flex-direction:column; min-width:0; }
.fz-logo .word { font-weight:800; font-size:17px; letter-spacing:.22em; line-height:1; color:#fff; }
.fz-logo .tag { font-size:6.8px; font-weight:600; letter-spacing:.26em; color:var(--mut2); margin-top:3px; white-space:nowrap; }
[dir="rtl"] .fz-logo .word,[dir="rtl"] .fz-logo .tag { letter-spacing:0; }
[dir="rtl"] .fz-logo .tag { font-size:7.6px; }
.fz-btn { min-height:42px; border-radius:10px; font-weight:650; }
.fz-btn.blu,.fz-btn.go {
  background:var(--acc)!important; color:#fff!important; border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.5)!important;
}
.fz-btn.blu:hover,.fz-btn.go:hover { background:#3f88ff!important; }
.fz-btn.blu:active,.fz-btn.go:active { background:#2a6ee5!important; }
.fz-btn.ghost { border-color:var(--line2)!important; color:var(--txt)!important; box-shadow:none!important; }
.fz-top .top-menu {
  width:44px; height:44px; flex:0 0 44px; padding:12px;
  border:0; border-radius:10px; background:transparent; color:var(--txt); box-shadow:none!important;
}
.fz-top .top-menu:hover { background:var(--panel); }
.fz-top .top-menu svg { width:20px; height:20px; }
.fz-top .top-menu:active { background:var(--panel2); }
.fz-bal {
  border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  text-shadow:none; gap:6px; padding:7px 9px!important;
  background:var(--balance-soft)!important; border:1px solid var(--balance-line)!important; color:var(--balance)!important;
}
.fz-bal small { color:rgba(255,255,255,.55)!important; letter-spacing:0; text-transform:none; }
.fz-bal b,.fz-ucard .bl { color:var(--balance)!important; text-shadow:none!important; }
.fz-wrap { padding:18px 18px 32px; }
.fz-search { margin-bottom:20px; }
.fz-search input {
  height:44px; background:var(--panel)!important; border:1px solid var(--line)!important;
  border-radius:12px; font-size:16px; font-weight:500; box-shadow:inset 0 1px 0 var(--hair)!important;
}
.fz-search input::placeholder { color:var(--mut2); }
.fz-search input:focus { border-color:var(--acc)!important; box-shadow:0 0 0 3px var(--acc-dim)!important; }
.fz-search::before { color:var(--mut2); }

/* ---------- hero: one message, one action, minimal height ---------- */
.fz-hero.art-sports {
  min-height:152px; padding:18px; margin-bottom:22px;
  border-radius:16px!important; border:1px solid var(--line)!important;
  background-image:linear-gradient(100deg,rgba(5,7,10,.65) 6%,rgba(5,7,10,.25) 40%,rgba(5,7,10,.05)),url('/mobile/v2-img/hero-sports.webp?v=17')!important;
  background-position:center 42%!important; box-shadow:inset 0 1px 0 var(--hair)!important;
}
[dir="rtl"] .fz-hero.art-sports {
  background-image:linear-gradient(260deg,rgba(5,7,10,.65) 6%,rgba(5,7,10,.25) 40%,rgba(5,7,10,.05)),url('/mobile/v2-img/hero-sports.webp?v=17')!important;
}
.fz-hero .live { color:var(--acc2)!important; font-size:9px; font-weight:700; letter-spacing:1.3px; margin-bottom:8px; }
.fz-hero .live i { width:5px; height:5px; background:var(--acc)!important; animation:none; box-shadow:none!important; }
.fz-hero.art-sports h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; line-height:1.18; max-width:230px; margin:0 0 13px; text-shadow:none; }
.fz-hero h1 span { color:#fff!important; }
.fz-hero.art-sports p { display:none; }
.fz-hero.art-sports .row { margin-top:0; }
.fz-hero .fz-btn { font-size:12px; padding:9px 15px; }
.fz-hero .odds { display:none; }

/* ---------- compact category dock ---------- */
.fz-dock { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin:0 0 6px; }
.fz-dock button,.fz-dock button.vip {
  min-width:0; min-height:44px; padding:8px 3px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  color:var(--mut); box-shadow:inset 0 1px 0 var(--hair); justify-content:center;
}
.fz-dock img,.fz-dock .dock-svg { display:none; }
.fz-dock span,.fz-dock button.vip span { font-size:10px; line-height:1.35; font-weight:600; color:#c2cddd; letter-spacing:0; }
.fz-dock button:hover { background:var(--panel2); border-color:var(--line2); }
.fz-dock button:active { transform:scale(.97); background:var(--acc-dim); border-color:rgba(47,123,255,.35); color:var(--acc2); }

/* ---------- game rails come before the membership promotion ---------- */
#view-home.on { display:flex; flex-direction:column; }
#view-home > * { min-width:0; }
#view-home > .fz-vipstrip { order:1; }
.fz-vipstrip {
  min-height:74px; padding:16px; margin:32px 0 8px; gap:14px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:inset 0 1px 0 var(--hair);
}
.fz-vipstrip > img { display:none; }
.fz-vipstrip::before {
  content:''; display:block; width:22px; height:22px; flex:0 0 22px;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb0ff' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 8-8 10-8-10 8-8Z M4 11h16 M8 7l4 14 4-14'/%3E%3C/svg%3E");
}
.fz-vipstrip b { font-size:14px; font-weight:700; letter-spacing:.1px; color:var(--txt); }
.fz-vipstrip small { font-size:11px; font-weight:500; color:var(--mut); line-height:1.6; margin-top:4px; }
.fz-vipstrip .go { width:24px; flex-basis:24px; background:transparent; color:var(--acc2); font-size:24px; font-weight:400; }
[dir="rtl"] .fz-vipstrip .go { transform:scaleX(-1); }

/* ---------- sections: calm counters, explicit "see all" ---------- */
.fz-sec-head { gap:10px; margin:26px 0 14px; min-height:38px; }
.fz-sec-head h2 { color:var(--txt); font-size:19px; font-weight:750; letter-spacing:-.45px; }
.fz-sec-head .n { color:var(--mut2); background:transparent; border:0; padding:0 2px; font-size:11.5px; font-weight:500; letter-spacing:.01em; }
.fz-sec-head .all {
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); box-shadow:inset 0 1px 0 var(--hair);
  color:#d3dceb!important; font-size:11.5px; font-weight:600; cursor:pointer;
}
.fz-sec-head .all .all-t { white-space:nowrap; }
.fz-sec-head .all svg { width:14px; height:14px; flex:none; color:var(--acc2); }
.fz-sec-head .all:hover { background:var(--panel2); border-color:var(--line2); }
.fz-sec-head .all:active,.fz-sec-head .all:focus-visible { background:var(--acc-dim); border-color:rgba(47,123,255,.4); }
[dir="rtl"] .fz-sec-head .all svg { transform:scaleX(-1); }

/* ---------- unified game card: artwork on top, calm two-line footer ---------- */
.fz-grid { gap:16px 12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.fz-tile:not(.book) {
  aspect-ratio:auto; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card)!important; border-radius:14px!important;
  border:1px solid var(--line)!important;
  box-shadow:inset 0 1px 0 var(--hair),0 1px 2px rgba(0,0,0,.4);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.fz-tile:not(.book) img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; flex:none; }
.fz-tile img { filter:none; animation:none; }
.fz-tile:not(.book) .nm {
  /* Two lines instead of one: a 117px tile only fits ~15 characters, so
     "Gates of Olympus 1000" was rendered as "Gates of Oly...". v2.css already
     asked for a 2-line clamp; this block was overriding it back to a single
     truncated line. */
  position:static; order:3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  white-space:normal; overflow:hidden; text-overflow:ellipsis;
  background:none; padding:9px 9px 0; height:auto; min-height:29px;
  font-size:11px; font-weight:600; line-height:1.3; color:#e8eef8;
}
.fz-tile:not(.book) .vn {
  position:static; order:4; display:block; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:3px 9px 9px; background:none; border:0; border-radius:0;
  font-size:9px; font-weight:500; color:var(--mut2);
}
.fz-tile .lv {
  top:6px; inset-inline-start:auto; inset-inline-end:6px;
  background:rgba(5,7,10,.72); color:#cfdcee; font-size:7.5px; font-weight:700;
  padding:3px 6px; border-radius:5px; letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.fz-tile .lv i { width:4px; height:4px; animation:none; background:var(--acc2); }
.fz-tile:not(.book) .play { inset:auto; top:0; left:0; right:0; aspect-ratio:1/1; }
.fz-tile .play b { background:var(--acc)!important; color:#fff!important; box-shadow:none!important; width:36px; height:36px; font-size:13px; }
.fz-tile:active { transform:scale(.98); border-color:rgba(47,123,255,.5)!important; }
.fz-tile:active .play { opacity:1; }
.fz-sk { aspect-ratio:1/1.42; border-radius:14px; }
.fz-chips { gap:8px; padding-bottom:18px; }
.fz-chip {
  padding:10px 14px; font-weight:600; font-size:12px;
  background:var(--panel); border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--hair);
}
.fz-chip.on { background:var(--acc-dim)!important; border-color:rgba(47,123,255,.4)!important; color:var(--acc2)!important; }
.fz-count { margin-bottom:16px; color:var(--mut2); font-weight:500; }
.fz-more { box-shadow:inset 0 1px 0 var(--hair); background:var(--panel)!important; border-color:var(--line)!important; }

/* ---------- chrome: blue marks interaction, nothing glows ---------- */
.fz-nav { background:rgba(5,7,10,.96)!important; border-top:1px solid var(--line)!important; }
.fz-nav button { padding:13px 2px 11px; gap:6px; font-size:9px!important; font-weight:600; }
.fz-nav button .nic { width:21px!important; height:21px!important; border-radius:0!important; opacity:.55; filter:none!important; box-shadow:none!important; }
.fz-nav button.on,.fz-nav button[data-nav="vip"].on { color:var(--acc2)!important; }
.fz-nav button.on .nic { opacity:1; transform:none; box-shadow:none!important; }
.fz-nav button.on::before,.fz-nav button[data-nav="vip"].on::before { width:18px; height:2px; background:var(--acc)!important; box-shadow:none!important; }
.fz-pills { top:68px; background:var(--bg)!important; border-bottom:1px solid var(--line)!important; }
.fz-pill { background:var(--panel); border:1px solid var(--line); font-weight:600; }
.fz-pill.on { background:var(--acc-dim)!important; color:var(--acc2)!important; border-color:rgba(47,123,255,.4)!important; box-shadow:none!important; }
.fz-pill .dot { background:var(--acc2); box-shadow:none; }
.fz-side { background:var(--bg)!important; border-inline-end:1px solid var(--line)!important; }
.fz-side button { font-weight:600; }
.fz-side button .nic { width:22px; height:22px; border-radius:0; box-shadow:none; }
.fz-mrow.vip { background:var(--panel); border:1px solid var(--line); }
.fz-mrow.vip img { width:24px; height:24px; border-radius:0; }
.fz-ucard { background:var(--panel)!important; border-color:var(--line)!important; box-shadow:inset 0 1px 0 var(--hair); }
.fz-ucard .av { background:var(--acc); color:#fff; }
.fz-card { background:var(--bg2)!important; border-color:var(--line2)!important; box-shadow:0 24px 60px rgba(0,0,0,.6)!important; }
.fz-card::before { background:var(--acc)!important; height:2px; }
.fz-card input { background:var(--panel)!important; border-color:var(--line2)!important; font-size:16px; box-shadow:inset 0 1px 0 var(--hair); }
.fz-card input:focus { border-color:var(--acc)!important; }
.fz-lang button.on { border-color:rgba(47,123,255,.45)!important; color:var(--acc2)!important; background:var(--acc-dim)!important; }
.fz-pwrow button { background:var(--panel2); color:var(--acc2); }

/* banners + VIP hero: flat black scrim, hairline frame, no gold */
.fz-banner {
  border:1px solid var(--line)!important; border-radius:16px!important;
  min-height:150px; box-shadow:inset 0 1px 0 var(--hair); background-color:var(--bg);
}
.fz-banner.art-live {
  background-image:linear-gradient(100deg,rgba(5,7,10,.94) 18%,rgba(5,7,10,.42)),url('/mobile/v2-img/hero-live.webp?v=12')!important;
  background-size:cover!important; background-position:center!important;
}
.fz-banner.art-casino {
  background-image:linear-gradient(100deg,rgba(5,7,10,.94) 18%,rgba(5,7,10,.42)),url('/mobile/v2-img/hero-casino.webp?v=12')!important;
  background-size:cover!important; background-position:center!important;
}
.fz-banner.art-vip {
  background-image:linear-gradient(100deg,rgba(5,7,10,.94) 18%,rgba(5,7,10,.46)),url('/mobile/v2-img/hero-vip.webp?v=12')!important;
  background-size:cover!important; background-position:center 40%!important; border-color:var(--line)!important;
}
.fz-livepill { align-self:flex-start; background:rgba(5,7,10,.72); color:#cfdcee; border:1px solid rgba(255,255,255,.10); }
.fz-livepill i { background:var(--acc2); }
.fz-vip .hero {
  background-image:linear-gradient(115deg,rgba(5,7,10,.95) 12%,rgba(5,7,10,.6) 62%,rgba(5,7,10,.42)),url('/mobile/v2-img/hero-vip.webp?v=12');
  background-size:cover; background-position:center;
  border-color:var(--line); box-shadow:inset 0 1px 0 var(--hair); padding:24px;
}
.fz-vip .hero .k { color:var(--acc2); }
.fz-vip .medal { display:none; }
.fz-vip .stat { background:var(--panel); border-color:var(--line); box-shadow:inset 0 1px 0 var(--hair); }
.fz-vip .stat .v { color:var(--acc2); }
.fz-vip .stat .v.mint { color:var(--green); }
.fz-vip .tier { background:var(--panel); border-color:var(--line); padding:18px; margin-bottom:14px; box-shadow:inset 0 1px 0 var(--hair); }
.fz-vip .tier::before { background:var(--acc); width:2px; }
.fz-vip .how { background:var(--panel); border-color:var(--line); }
.fz-vip .legal { color:var(--mut2); }
.fz-frame .ld { background:var(--bg); }
.fz-frame .ld .g { color:#fff; }
.fz-toast { background:var(--panel2); border-color:var(--line2); box-shadow:0 18px 40px rgba(0,0,0,.6); }
.fz-toast.ok { border-color:rgba(74,222,128,.35); }
.fz-toast.ok::before { color:var(--green); }
.fz-toast button { background:var(--acc); color:#fff; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
@media (hover:hover) {
  .fz-tile:hover { border-color:rgba(47,123,255,.42)!important; transform:translateY(-3px); }
  .fz-tile:hover .play { opacity:1; }
  .fz-nav button:hover,.fz-side button:hover,.fz-mrow:hover { color:var(--txt); background:var(--panel); }
  .fz-chip:hover,.fz-pill:hover,.fz-sec-head .all:hover { border-color:var(--line2); }
}
@media (max-width:359px) {
  .fz-wrap { padding-inline:14px; }
  .fz-top { padding-inline:10px; gap:5px; }
  .fz-logo .mark { width:28px; height:28px; flex-basis:28px; }
  .fz-logo .word { font-size:15px; letter-spacing:.16em; }
  .fz-logo .tag { display:none; }
  .fz-bal { font-size:11px!important; padding:6px!important; }
  .fz-bal small { display:none; }
  .fz-grid { gap:14px 9px; }
  .fz-dock span { font-size:9px; }
  .fz-sec-head .all .all-t { display:none; }
  .fz-sec-head .all { padding:0 10px; }
}
@media (min-width:600px) and (max-width:899px) { .fz-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:900px) {
  .fz-top { padding-inline:24px; }
  .fz-wrap { padding:28px 32px 48px; }
  .fz-side { top:68px; }
  .fz-pills { display:none!important; }
  .fz-hero.art-sports { min-height:208px; padding:28px; }
  .fz-hero.art-sports h1 { font-size:30px; max-width:380px; }
  .fz-hero.art-sports p { display:block; max-width:430px; font-size:13px; color:#aebccf; }
  .fz-hero .live { font-size:10px; }
  .fz-dock { grid-template-columns:repeat(5,minmax(0,128px)); gap:10px; }
  .fz-dock span { font-size:12px; }
  .fz-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 16px; }
  .fz-tile:not(.book) .nm { font-size:12px; }
  .fz-tile:not(.book) .vn { font-size:10px; }
  .fz-sec-head { margin-top:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .fz-view,.fz-tile,.fz-tile img,.fz-sk { animation:none; }
  .fz-tile,.fz-tile .play,.fz-dock button,.fz-nav button { transition:none; }
}

/* ============================================================
   FLOATING RETURN BAR INSIDE AN OPEN GAME
   ------------------------------------------------------------
   The game runs in a full-bleed iframe (z 1) with the Forzza
   loader on top (z 2). This bar is z 6 so the player always has
   a visible way back to the lobby — previously the frame had no
   header at all and the only exit was the system Back button.
   pointer-events are off on the wrapper so the game stays fully
   tappable everywhere except the controls themselves.
   ============================================================ */
.fz-frame .fz-fbar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;
  background:linear-gradient(180deg,rgba(2,4,10,.92) 0%,rgba(2,4,10,.55) 62%,rgba(2,4,10,0) 100%);
  pointer-events:none;
}
.fz-frame .fz-fbar>*{pointer-events:auto}
.fz-frame .fz-fbar-back{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  border:1px solid rgba(255,255,255,.24);background:rgba(11,24,40,.88);
  color:#fff;font-size:26px;font-weight:900;line-height:38px;text-align:center;
  cursor:pointer;padding:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,.55);
  -webkit-tap-highlight-color:transparent;
}
.fz-frame .fz-fbar-back:active{transform:scale(.93);background:rgba(20,117,225,.85)}
.fz-frame .fz-fbar-name{
  flex:1;min-width:0;font-weight:800;font-size:13px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.fz-frame .fz-fbar-bal{
  font-weight:900;font-size:12px;color:#7fd1ff;white-space:nowrap;
  background:rgba(11,24,40,.88);border:1px solid rgba(20,117,225,.45);
  border-radius:999px;padding:9px 13px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* The loader must never hide the return bar while a session settles. */
.fz-frame .fz-fbar{transition:opacity .18s ease}

/* ------------------------------------------------------------------
   Closed side drawer must paint nothing at all. translateX(105%)
   pushes it off-screen, but some mobile GPUs still anti-alias its
   edge behind the bottom-right dock item (the faint lighter panel).
   visibility flips AFTER the slide-out finishes (0.25s delay), so
   the open/close animation is preserved.
   ------------------------------------------------------------------ */
.fz-drawer{visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.fz-drawer.on{visibility:visible;transition:transform .25s ease,visibility 0s}
.fz-scrim:not(.on){visibility:hidden}

/* ------------------------------------------------------------------
   Owner directive (2026-09-22): NO bar over the games — ever.
   The in-game floating bar (back ‹ / game name / balance) is removed
   completely. The game iframe is already position:absolute inset:0,
   so it now fills the whole screen. Exit stays on the phone's system
   Back gesture/button (the history bridge in v2.js), and the balance
   is shown by the game itself.
   ------------------------------------------------------------------ */
.fz-frame .fz-fbar{display:none!important}