/* Team rebate network details */
.rb-teamcats{display:grid;gap:10px;margin-bottom:12px}.rb-teamcats>article,.rb-branches,.rb-members{padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.rb-teamcats header{display:flex;align-items:center;gap:10px}.rb-teamcats header div small{display:block;color:var(--muted);font-size:9px}.rb-teamcats header div strong{font-size:15px}.rb-teamcats mark{margin-left:auto;background:none;color:var(--brand);font-weight:900}.rb-teamcats .rb-bar{margin-top:12px}.rb-teamcats footer{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:9px}.rb-branches,.rb-members{margin-bottom:12px}.rb-branches>header,.rb-members>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.rb-branches header small,.rb-members header small{font-size:8px;letter-spacing:.09em;color:var(--brand);font-weight:900}.rb-branches h3,.rb-members h3{margin:2px 0;font-size:15px}.rb-branches>header>span,.rb-members>header>b{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:10px;background:var(--surface);font-size:12px}.rb-branch{border-top:1px solid var(--line)}.rb-branch:last-child{border-bottom:1px solid var(--line)}.rb-branch summary{display:flex;align-items:center;gap:9px;padding:12px 2px;cursor:pointer;list-style:none}.rb-branch summary::-webkit-details-marker{display:none}.rb-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--brand) 18%,var(--surface));color:var(--brand);font-weight:900}.rb-branch summary>div{min-width:0;flex:1}.rb-branch summary b,.rb-branch summary small{display:block;font-size:11px}.rb-branch summary small{color:var(--muted);font-size:8px;margin-top:2px}.rb-branch summary aside{text-align:right}.rb-branch summary aside strong{font-size:11px}.rb-branch summary>svg{width:14px;transition:.2s}.rb-branch[open] summary>svg{transform:rotate(180deg)}.rb-gaprows{padding:0 0 9px 43px}.rb-gaprows>div{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:9px;border-radius:10px;background:var(--surface);margin-bottom:5px}.rb-gaprows span b,.rb-gaprows span small{display:block;font-size:9px}.rb-gaprows span small{color:var(--muted)}.rb-gaprows em{font-size:9px;font-style:normal;color:var(--muted)}.rb-gaprows mark{padding:4px 6px;border-radius:7px;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-size:8px;font-weight:900}.rb-members>div{max-height:270px;overflow:auto}.rb-member{display:flex;align-items:center;gap:9px;padding:9px 2px;border-top:1px solid var(--line)}.rb-member>div{min-width:0;flex:1}.rb-member b,.rb-member small{display:block;font-size:10px}.rb-member small{color:var(--muted);font-size:8px}.rb-member mark{padding:4px 7px;border-radius:7px;background:#efffc8;color:#315115;font-size:8px;font-weight:900}.rb-member em{font-size:8px;font-style:normal;color:#2b8b5a}.rb-team{padding:5px 15px 15px}@media(min-width:700px){.rb-teamcats{grid-template-columns:1fr 1fr}}@media(max-width:520px){.rb-gaprows{padding-left:0}}

/* ============================================================
   BO88 frontend — mobile-first cyan/white casino layout
   Left vertical category rail + stacked brand cards + bottom tabs
   ============================================================ */

@import url('/vendor/fonts/inter.css');

:root{
  /* Merchant-controlled theme. The BO provides four core colours; the shared
     CMS theme engine expands them into this complete semantic palette. */
  --brand:var(--cms-primary-solid,#1e6cff);
  --brand-grad:var(--cms-primary,var(--brand));
  --brand-contrast:var(--cms-primary-contrast,#fff);
  --brand-soft:var(--cms-primary-soft,#e7f0ff);
  --accent:var(--cms-accent-solid,#06b6d4);
  --accent-grad:var(--cms-accent,var(--accent));
  --accent-soft:var(--cms-accent-soft,#e4f8fb);

  --bg-1:color-mix(in srgb,var(--cms-bg-solid,#f0f5fd) 84%,var(--brand) 16%);
  --bg-2:color-mix(in srgb,var(--cms-bg-solid,#f0f5fd) 92%,var(--accent) 8%);
  --bg-3:var(--cms-bg-solid,#f0f5fd);
  --bg-glow-1:color-mix(in srgb,var(--brand) 24%,transparent);
  --bg-glow-2:color-mix(in srgb,var(--accent) 18%,transparent);

  --surface:var(--cms-surface,rgba(255,255,255,.86));
  --surface-2:var(--cms-surface-2,rgba(255,255,255,.6));
  --surface-deep:var(--cms-surface-strong,#fff);

  --ink:var(--cms-text-solid,#1e293b);
  --ink-2:color-mix(in srgb,var(--ink) 86%,var(--bg-3));
  --muted:var(--cms-muted,#64748b);
  --muted-2:var(--cms-muted-2,#94a3b8);

  --line:var(--cms-line,rgba(148,163,184,.18));
  --line-2:var(--cms-line-strong,rgba(148,163,184,.32));

  --brand-2:color-mix(in srgb,var(--brand) 68%,var(--accent));
  --brand-dark:color-mix(in srgb,var(--brand) 76%,#000);
  --cyan:var(--accent);
  --teal:color-mix(in srgb,var(--accent) 78%,#158f70);
  --emerald:color-mix(in srgb,var(--brand) 55%,#10b981);
  --rose:#fb7185;
  --amber:#fbbf24;
  --gold:#eab308;
  --violet:#8b5cf6;

  --shadow-sm:0 1px 2px var(--cms-shadow-color,rgba(15,23,42,.04));
  --shadow-md:0 8px 20px -8px var(--cms-shadow-color,rgba(15,23,42,.12));
  --shadow-lg:0 18px 38px -16px var(--cms-shadow-color,rgba(15,23,42,.18));
  --font-heading:var(--cms-font-heading,'Plus Jakarta Sans',sans-serif);
  --font-body:var(--cms-font-body,'Plus Jakarta Sans',sans-serif);
}

/* Member profile — editorial account hub */
.member-profile-page{padding:.7rem .72rem 5.5rem;display:grid;gap:.72rem;color:var(--ink)}
.profile-identity-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;overflow:hidden;padding:1rem;border-radius:1.35rem;background:linear-gradient(135deg,#0b3022,#174d38 72%,#1c6143);color:#fff;box-shadow:0 1.2rem 2.3rem rgba(9,48,34,.16)}
.profile-identity-card:after{content:"";position:absolute;width:10rem;height:10rem;right:-4.8rem;top:-5.3rem;border:1px solid rgba(199,255,45,.22);border-radius:50%;box-shadow:0 0 0 1.8rem rgba(199,255,45,.04),0 0 0 3.6rem rgba(199,255,45,.025)}
.profile-avatar-wrap,.profile-identity,.profile-settings,.profile-avatar-actions{position:relative;z-index:1}.profile-avatar{position:relative;width:4.2rem;height:4.2rem;padding:0;overflow:hidden;display:grid;place-items:center;border:3px solid rgba(255,255,255,.14);border-radius:1.28rem;background:#c7ff2d;color:#17351f;font-size:1.25rem;font-weight:900;box-shadow:0 .55rem 1.1rem rgba(0,0,0,.2);cursor:pointer}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar>i{position:absolute;right:.18rem;bottom:.18rem;width:1.25rem;height:1.25rem;padding:.25rem;border-radius:.42rem;background:#fff;color:#17351f;box-sizing:border-box}.profile-identity{min-width:0}.profile-identity>small{display:block;color:#c7ff2d;font-size:.58rem;font-weight:900;letter-spacing:.08em}.profile-identity h1{overflow:hidden;text-overflow:ellipsis;margin:.22rem 0;font-size:1.25rem;letter-spacing:-.03em}.profile-identity p{display:flex;align-items:center;gap:.38rem;margin:0;color:#bcd0c6;font-size:.65rem}.profile-identity p i{width:3px;height:3px;border-radius:50%;background:#78998a}.profile-settings{width:2.3rem;height:2.3rem;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:.72rem;background:rgba(255,255,255,.08);color:#fff}.profile-settings svg{width:1rem}.profile-avatar-actions{grid-column:2/4;display:flex;gap:.4rem}.profile-avatar-actions button{display:flex;align-items:center;gap:.3rem;padding:.42rem .58rem;border:1px solid rgba(255,255,255,.16);border-radius:.58rem;background:rgba(255,255,255,.08);color:#e5f0ea;font-size:.61rem;font-weight:800}.profile-avatar-actions button.danger{color:#ffc8c8}.profile-avatar-actions svg{width:.78rem}
.profile-balance-card,.profile-menu-card{padding:.95rem;border:1px solid var(--line);border-radius:1.25rem;background:rgba(255,255,255,.78);box-shadow:0 .7rem 1.9rem rgba(21,56,42,.06);backdrop-filter:blur(12px)}.profile-balance-card>header,.profile-menu-card>header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.profile-balance-card header small,.profile-menu-card header small{display:block;color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.08em}.profile-balance-card header strong{display:block;margin-top:.16rem;font-size:1.65rem;letter-spacing:-.045em}.profile-balance-card header button{display:flex;align-items:center;gap:.12rem;border:0;background:transparent;color:var(--muted);font-size:.62rem;font-weight:800}.profile-balance-card header button svg{width:.8rem}.profile-money-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--line)}
.profile-shortcut{min-width:0;padding:.25rem .1rem;border:0;background:transparent;color:var(--ink);text-align:center}.profile-shortcut-icon{position:relative;width:2.7rem;height:2.7rem;display:grid;place-items:center;margin:0 auto .4rem;border-radius:.86rem;background:#e6f2eb;color:#1e6a47;transition:transform .18s ease}.profile-shortcut:active .profile-shortcut-icon{transform:scale(.93)}.profile-shortcut-icon svg{width:1.15rem}.profile-shortcut b{display:block;overflow:hidden;text-overflow:ellipsis;font-size:.62rem;white-space:nowrap}.profile-shortcut.blue .profile-shortcut-icon{background:#e8f1ff;color:#2870b9}.profile-shortcut.gold .profile-shortcut-icon{background:#fff2ce;color:#9b6a08}.profile-shortcut.violet .profile-shortcut-icon{background:#f0eaff;color:#7448b5}.profile-shortcut.aqua .profile-shortcut-icon{background:#e0f6f4;color:#14736c}
.profile-vip-card{display:flex;align-items:center;justify-content:space-between;gap:.8rem;overflow:hidden;padding:1rem;border:1px solid #e7dcb3;border-radius:1.25rem;background:linear-gradient(120deg,#fffaf0,#fff 58%,#f3f7ee);box-shadow:0 .65rem 1.7rem rgba(80,60,20,.06)}.profile-vip-card small{color:#99720c;font-size:.55rem;font-weight:900;letter-spacing:.09em}.profile-vip-card h2{margin:.2rem 0;font-size:.92rem}.profile-vip-card p{margin:0;color:var(--muted);font-size:.61rem;line-height:1.45}.profile-vip-card>span{flex:0 0 4.2rem;height:4.2rem;display:grid;place-items:center;border-radius:1.1rem;background:linear-gradient(145deg,#17281f,#3e5a49);color:#ffeaa8;box-shadow:0 .6rem 1.2rem rgba(23,40,31,.16)}.profile-vip-card>span svg{width:1.35rem}.profile-vip-card>span b{font-size:.52rem}.profile-menu-card h2{margin:.15rem 0 0;font-size:1rem}.profile-menu-card header>button{position:relative;width:2.25rem;height:2.25rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:.72rem;background:var(--bg-2);color:var(--ink)}.profile-menu-card header>button svg{width:1rem}.profile-menu-card header>button span{display:none;position:absolute;right:-.25rem;top:-.25rem;min-width:1rem;height:1rem;padding:0 .18rem;place-items:center;border:2px solid #fff;border-radius:99px;background:#e74a4a;color:#fff;font-size:.5rem}.profile-menu-card header>button span.show{display:grid}.profile-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem .25rem;margin-top:1rem}.profile-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem;border:1px solid #f1cccc;border-radius:.85rem;background:#fff8f8;color:#c83b3b;font-size:.7rem;font-weight:900}.profile-logout svg{width:.95rem}
.profile-guest{display:flex;align-items:center;gap:1rem;padding:1.3rem;border-radius:1.35rem;background:linear-gradient(135deg,#0b3022,#174d38);color:#fff}.profile-guest>span{flex:0 0 4rem;height:4rem;display:grid;place-items:center;border-radius:1.15rem;background:#c7ff2d;color:#17351f}.profile-guest>span svg{width:1.5rem}.profile-guest small{color:#c7ff2d;font-size:.55rem;font-weight:900;letter-spacing:.1em}.profile-guest h1{margin:.18rem 0;font-size:1.15rem}.profile-guest p{margin:0;color:#bdd0c7;font-size:.64rem;line-height:1.45}.profile-guest button{display:flex;align-items:center;gap:.3rem;margin-top:.65rem;padding:.48rem .7rem;border:0;border-radius:.62rem;background:#fff;color:#17351f;font-size:.62rem;font-weight:900}.profile-guest button svg{width:.8rem}
@media(max-width:380px){.profile-menu-grid{grid-template-columns:repeat(3,1fr)}.profile-identity-card{grid-template-columns:auto 1fr}.profile-settings{position:absolute;right:.7rem;top:.7rem}.profile-avatar-actions{grid-column:1/3}.profile-vip-card>span{flex-basis:3.7rem;height:3.7rem}}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height:100%; }
body{
  font-family:var(--font-body),'PingFang SC','Microsoft YaHei',sans-serif;
  color: var(--ink);
  background:
    radial-gradient(700px 500px at 10% 0%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, var(--bg-glow-2), transparent 60%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  background-attachment: fixed;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}
/* Desktop: the mobile-width app sits in wide side gutters. A fixed glow-gradient
   makes those gutters look top-tinted vs flat-black lower down. Use a uniform
   solid background on wide screens so the gutters read as one clean colour. */
@media(min-width:768px){
  body{ background:var(--bg-3,#f0f5fd) !important; background-attachment:scroll !important; }
  html[data-cms-scheme="dark"] body{ background:#0a0a0d !important; }
}

h1,h2,h3,h4,h5,h6,.brand-name,.section-title{ font-family:var(--font-heading); }

/* Dark merchant themes are derived automatically from the selected BO
   Background colour; no template-specific dark-mode switch is required. */
:root[data-cms-scheme="dark"] body{ color:var(--ink); }
:root[data-cms-scheme="dark"] .app-strip,
:root[data-cms-scheme="dark"] #bottomtab{ background:color-mix(in srgb,var(--surface-deep) 90%,transparent); }
:root[data-cms-scheme="dark"] .field,
:root[data-cms-scheme="dark"] input,
:root[data-cms-scheme="dark"] select,
:root[data-cms-scheme="dark"] textarea{ color:var(--ink); background:var(--surface-deep); border-color:var(--line-2); }

::-webkit-scrollbar{ width:0; height:0; }

/* ================ APP SHELL ================ */
#app{ max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 78px; }
/* Desktop / any screen wider than a phone → render as a centered phone frame
   (480px column + shadow + its own gradient background) so the app never
   stretches full-width and the min-height:100vh fill reads as a phone screen
   instead of a broken empty page. The fixed bottom bar is already centered at
   max-width:480, so it lines up with this frame. */
@media (min-width: 540px){
  #app{
    max-width: 480px;
    box-shadow: 0 18px 70px -16px rgba(15,23,42,.40), 0 0 0 1px rgba(15,23,42,.06);
    background:
      radial-gradient(700px 500px at 10% 0%, var(--bg-glow-1), transparent 60%),
      radial-gradient(700px 500px at 90% 100%, var(--bg-glow-2), transparent 60%),
      linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  }
}

/* ================ APP DOWNLOAD STRIP ================ */
.app-strip{
  position: sticky; top: 0; z-index: 20;
  display:flex; align-items:center; gap:.6rem;
  padding: .55rem .8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.app-strip .close{
  width:22px; height:22px; border-radius:50%;
  background: rgba(148,163,184,.25); color: var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.app-strip .icon-box{
  width:32px; height:32px; border-radius:.55rem;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.78rem;
  box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 35%,transparent);
  flex-shrink:0;
}
.app-strip .copy{ flex:1; min-width:0; }
.app-strip .copy .title{ font-weight:700; font-size:.82rem; color: var(--ink); }
.app-strip .copy .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.app-strip .dl{
  padding: .45rem .9rem;
  background:var(--brand-grad);
  color:var(--brand-contrast); font-weight:700; font-size:.78rem;
  border-radius:9999px; box-shadow:0 4px 10px color-mix(in srgb,var(--brand) 34%,transparent);
  cursor:pointer; flex-shrink:0;
}

/* ================ BRAND ROW ================ */
.brand-row{
  display:flex; align-items:center; gap:.6rem;
  padding: .85rem 1rem .65rem;
}
.brand-logo{
  display:inline-flex; align-items:center; gap:.45rem;
  flex:1; min-width:0;
}
.brand-mark{
  width:38px; height:38px; border-radius:.7rem;
  background:linear-gradient(135deg,var(--accent) 0%,var(--brand) 100%);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.85rem;
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--brand) 40%,transparent);
  flex-shrink:0;
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  width:24px; height:6px;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--brand) 55%,transparent),transparent 70%);
  border-radius:50%;
}
/* Uploaded brand logo (image) replaces the square "B8" mark. */
img.brand-mark{ width:auto; height:42px; max-width:230px; border-radius:.5rem; background:transparent; box-shadow:none; object-fit:contain; }
img.brand-mark::after{ content:none; }
.app-strip img.icon-box{ background:transparent; box-shadow:none; object-fit:contain; padding:2px; }
.brand-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.05rem;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.01em;
}
.brand-name .dot{ color:var(--accent); }
.url-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .35rem .65rem .35rem .8rem;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  border-radius:9999px;
  font-size:.72rem; color: var(--ink-2); font-weight:500;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.url-chip .lbl{ color: var(--muted); }
.url-chip .ic{
  width:22px; height:22px; border-radius:50%;
  background:var(--accent-grad);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
}

/* ================ HERO BANNER ================ */
.hero-banner{
  margin: .35rem 1rem .8rem;
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
  height: 132px;
  background:
    linear-gradient(110deg,color-mix(in srgb,var(--brand) 45%,#07152f) 0%,color-mix(in srgb,var(--brand) 24%,#061326) 48%,var(--brand) 100%);
  box-shadow: var(--shadow-md);
}
.hero-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(220px 160px at 18% 50%, rgba(250,204,21,.4), transparent 60%),
    radial-gradient(280px 200px at 78% 30%,color-mix(in srgb,var(--brand) 50%,transparent),transparent 65%),
    radial-gradient(280px 220px at 90% 90%, rgba(124,58,237,.45), transparent 65%);
}
.hero-banner .figure{
  position:absolute; left:.85rem; bottom:0; top:.7rem;
  width: 100px;
  background: radial-gradient(ellipse at 50% 90%, rgba(250,204,21,.35), transparent 70%);
  display:flex; align-items:flex-end; justify-content:center;
  font-size: 3.5rem;
}
.hero-banner .copy{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  text-align:right; color:#fff;
}
.hero-banner .copy .eyebrow{
  font-size:.72rem; color:#fde68a; letter-spacing:.04em;
  text-transform:uppercase; font-weight:700;
}
.hero-banner .copy .title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.4rem; line-height:1.05;
  letter-spacing:-0.02em; margin-top:.2rem;
}
.hero-banner .copy .title em{
  font-style:normal;
  background: linear-gradient(135deg,#fde68a,#fbbf24,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-banner .copy .sub{
  font-size:.7rem; color:#cbd5e1; margin-top:.2rem;
  display:flex; gap:.4rem; justify-content:flex-end;
}
.hero-banner .copy .sub span{
  padding: .1rem .35rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:.25rem;
  background: rgba(255,255,255,.08);
}

/* ================ NOTIFICATION STRIP ================ */
.notice-strip{
  margin: .7rem 1rem .85rem;
  display:flex; align-items:center; gap:.55rem;
  padding: .55rem .75rem;
  background: rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius: 9999px;
  font-size: .72rem; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.notice-strip .bell{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  flex-shrink:0;
}
.notice-strip .text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notice-strip .cup{
  padding:.2rem .55rem; background: linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff;
  border-radius:9999px; font-weight:700; font-size:.7rem; flex-shrink:0;
  box-shadow: 0 3px 8px rgba(124,58,237,.4);
}

/* ================ LOGIN PROMPT + 4 ACTION ICONS ================ */
.login-row{
  margin: 0 1rem .85rem;
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
}
.login-prompt{ flex:0 1 auto; }
.login-prompt .title{ font-weight:700; font-size:.92rem; color: var(--ink); }
.login-prompt .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.action-row{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.4rem;
  flex:1;
}
.action-row .item{
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  cursor:pointer;
  text-align:center;
}
.action-row .item .ic-wrap{
  width:42px; height:42px; border-radius:.85rem;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-shadow: 0 5px 14px -6px rgba(15,23,42,.18);
}
.action-row .item:nth-child(1) .ic-wrap{ background:linear-gradient(135deg,var(--accent),var(--brand)); }
.action-row .item:nth-child(2) .ic-wrap{ background:linear-gradient(135deg,var(--brand-2),var(--brand)); }
.action-row .item:nth-child(3) .ic-wrap{ background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.action-row .item:nth-child(4) .ic-wrap{ background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.action-row .item .ic-wrap::before{
  content:""; position:absolute; top:-2px; left:-2px; right:-2px; bottom:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  border-radius:.85rem .85rem 0 0;
}
.action-row .item .ic-wrap{ transition:transform .15s ease, box-shadow .2s ease; }
.action-row .item:hover .ic-wrap{ transform:translateY(-2px); box-shadow:0 9px 18px -7px rgba(15,23,42,.34); }
.action-row .item:active .ic-wrap{ transform:scale(.92); }
.action-row .item .ic-wrap i{ color:#fff; position:relative; z-index:1; width:20px; height:20px; }
.action-row .item .name{ font-size:.7rem; color: var(--ink-2); font-weight:600; }

/* ===== "More" panel icon badges (colorful, glossy, tactile) ===== */
.more-item{ display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.5rem .15rem; cursor:pointer; text-decoration:none; color:var(--ink); border-radius:.75rem; transition:transform .15s ease, background .2s ease; }
.more-item:hover{ transform:translateY(-2px); background:rgba(15,23,42,.035); }
.more-item:active{ transform:scale(.93); }
.more-badge{ position:relative; overflow:hidden; width:48px; height:48px; border-radius:.95rem; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 16px -7px rgba(15,23,42,.4); transition:transform .15s ease, box-shadow .2s ease; }
.more-item:hover .more-badge{ box-shadow:0 10px 20px -8px rgba(15,23,42,.42); }
.more-badge::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:50%; background:linear-gradient(180deg,rgba(255,255,255,.5),transparent); }
.more-badge i{ position:relative; z-index:1; }
.more-label{ font-size:.7rem; font-weight:600; text-align:center; line-height:1.2; }

/* Merchant-uploaded custom icons (png/gif/webp) — show the raw artwork, drop the gradient/gloss. */
.action-row .item .ic-wrap.custom{ background:transparent; box-shadow:none; }
.action-row .item .ic-wrap.custom::before{ display:none; }
.action-row .item .ic-wrap.custom img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }
.more-badge.custom{ background:transparent; box-shadow:none; }
.more-badge.custom::before{ display:none; }
.more-badge.custom img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }

/* ================ HOME GRID (LEFT RAIL + RIGHT BRAND CARDS) ================ */
.home-grid{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:.6rem;
  padding: 0 .6rem .5rem .6rem;
}
.cat-rail{
  padding: .1rem 0;
  display:flex; flex-direction:column; gap:.4rem;
}
.cat-rail .cat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.34rem;
  min-height: 5.1rem;                 /* uniform card height so 1- and 2-line labels align */
  padding: .55rem .2rem;
  cursor:pointer;
  color: var(--ink-2, #475569);
  border-radius: .8rem;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 3px 8px -5px rgba(15,40,90,.18);
  transition: all .15s ease;
}
.cat-rail .cat .lbl{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  width:100%; text-align:center;
  font-size:.64rem; font-weight:800; line-height:1.22; letter-spacing:.015em;
  min-height:1.56em;                  /* reserve ~2 lines so rows stay even */
  word-break: break-word; overflow-wrap:anywhere;
}
html[lang="km"] .cat-rail .cat .lbl, .cat-rail .cat .lbl:lang(km){ font-size:.6rem; line-height:1.35; }
.cat-rail .cat:hover{ border-color: var(--brand, #1e6cff); color: var(--brand, #1e6cff); }
.cat-rail .cat.active{
  color: var(--brand, #1e6cff);
  border-color: transparent;
  background:linear-gradient(160deg,var(--accent-soft),var(--brand-soft));
  box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 40%,transparent);
}
.cat-rail .cat .ic{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: .65rem;
  background: linear-gradient(135deg, #eef5ff, #dbe9ff);
  color: var(--brand, #1e6cff);
}
.cat-rail .cat.active .ic{
  background:linear-gradient(135deg,var(--accent),var(--brand));
  color:#fff;
  box-shadow:0 5px 12px -3px color-mix(in srgb,var(--brand) 50%,transparent);
}

.brand-list{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:.55rem;
}
/* Cards slide up + fade in, staggered, every time a category is (re)rendered. */
@keyframes brandCardIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
.brand-list .brand-card{ animation:brandCardIn .5s cubic-bezier(.22,.61,.36,1) both; }
.brand-list .brand-card:nth-child(1){ animation-delay:.02s }
.brand-list .brand-card:nth-child(2){ animation-delay:.07s }
.brand-list .brand-card:nth-child(3){ animation-delay:.12s }
.brand-list .brand-card:nth-child(4){ animation-delay:.17s }
.brand-list .brand-card:nth-child(5){ animation-delay:.22s }
.brand-list .brand-card:nth-child(6){ animation-delay:.27s }
.brand-list .brand-card:nth-child(7){ animation-delay:.32s }
.brand-list .brand-card:nth-child(8){ animation-delay:.37s }
.brand-list .brand-card:nth-child(9){ animation-delay:.42s }
.brand-list .brand-card:nth-child(10){ animation-delay:.47s }
.brand-list .brand-card:nth-child(11){ animation-delay:.52s }
.brand-list .brand-card:nth-child(n+12){ animation-delay:.57s }
@media (prefers-reduced-motion: reduce){ .brand-list .brand-card{ animation:none } }
/* Same staggered slide-in for the Promotions list cards. */
.promo-list .promo-item{ animation:brandCardIn .5s cubic-bezier(.22,.61,.36,1) both; }
.promo-list .promo-item:nth-child(1){ animation-delay:.03s }
.promo-list .promo-item:nth-child(2){ animation-delay:.09s }
.promo-list .promo-item:nth-child(3){ animation-delay:.15s }
.promo-list .promo-item:nth-child(4){ animation-delay:.21s }
.promo-list .promo-item:nth-child(5){ animation-delay:.27s }
.promo-list .promo-item:nth-child(6){ animation-delay:.33s }
.promo-list .promo-item:nth-child(7){ animation-delay:.39s }
.promo-list .promo-item:nth-child(8){ animation-delay:.45s }
.promo-list .promo-item:nth-child(n+9){ animation-delay:.5s }
@media (prefers-reduced-motion: reduce){ .promo-list .promo-item{ animation:none } }
.brand-card{
  position: relative;
  background: linear-gradient(115deg, #f0faff 0%, #dbecff 60%, #c4e1fa 100%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:.82rem;
  padding:.72rem .48rem .62rem;
  overflow:hidden;
  display:flex; flex-direction:column-reverse; align-items:stretch; justify-content:flex-end; gap:.45rem;
  cursor:pointer;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .2s;
  min-width:0;
  min-height:0;
  aspect-ratio:3/4;
}
.brand-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.brand-card.featured{
  grid-column:1/-1;
  min-height:108px;
  padding:1.65rem 1rem .8rem;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border-radius:1rem;
  background:
    radial-gradient(circle at 86% 48%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 30%),
    linear-gradient(115deg,var(--brand-soft) 0%,color-mix(in srgb,var(--accent-soft) 76%,#fff) 100%);
  border-color:color-mix(in srgb,var(--brand) 24%,#fff);
  box-shadow:0 12px 28px -16px color-mix(in srgb,var(--brand) 52%,transparent);
  aspect-ratio:auto;
}
.hot-game-label{
  position:absolute; left:1rem; top:.65rem; z-index:2;
  display:inline-flex; align-items:center; gap:.28rem;
  color:var(--brand-dark); font-size:.61rem; line-height:1; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.hot-game-label i{ width:12px; height:12px; color:var(--accent); fill:currentColor; }
.brand-card .info{ flex:1; min-width:0; position:relative; z-index:1; }
.brand-card:not(.featured) .info{ flex:0 0 auto; }
.brand-card .name-row{
  min-width:0; display:flex; align-items:center; gap:.3rem;
  margin-bottom:.18rem;
}
.brand-card .name{
  font-family:'Plus Jakarta Sans',sans-serif;
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:750; font-size:.72rem; color:var(--ink);
}
.brand-card.featured .name{ font-size:1.02rem; }
.brand-card.featured .name{ overflow:visible; white-space:normal; text-overflow:clip; }
.brand-card .official{
  padding:.08rem .3rem;
  background: linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff;
  font-size:.5rem; font-weight:800; border-radius:.25rem;
  box-shadow: 0 2px 5px rgba(245,158,11,.45);
}
.brand-card .count{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.02em; line-height:1;
}
.brand-card.featured .count{ font-size:1.72rem; }
.brand-card .count .unit{
  -webkit-text-fill-color: var(--muted);
  font-size:.58rem;
  font-weight: 600;
  margin-left:.12rem;
}
.brand-card.featured .count .unit{ font-size:.78rem; }
.brand-card .tag{
  display:block; max-width:100%; margin-top:.28rem; padding:.14rem .35rem;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  color:#fff; font-size:.5rem; line-height:1.25; font-weight:700;
  border-radius: 9999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 3px 7px -2px color-mix(in srgb,var(--accent) 45%,transparent);
}
.brand-card.featured .tag{ display:inline-flex; width:auto; font-size:.64rem; padding:.16rem .52rem; }
.brand-card .figure{
  width:100%; height:auto; min-height:0; flex:1 1 auto;
  border-radius: .6rem;
  background-position: center bottom; background-size: 110%; background-repeat: no-repeat;
  filter: drop-shadow(0 4px 8px rgba(15,23,42,.18));
  position:relative;
}
.brand-card.featured .figure{ width:94px; height:76px; }
.brand-card .figure img{ width:100%!important; height:100%!important; object-fit:contain!important; }
/* Merchant-designed provider card: show ONLY the uploaded image (logo baked in) —
   no frame, name or game-count. */
.brand-list .brand-card--photo{ display:block!important; padding:0!important; background:transparent!important; border:none!important; box-shadow:none!important; aspect-ratio:auto!important; height:auto!important; overflow:hidden; border-radius:14px; }
.brand-list .brand-card--photo img{ width:100%!important; height:auto!important; display:block; object-fit:contain; border-radius:14px; }
.brand-card:not(.featured) .figure img{ object-fit:contain!important; border-radius:.55rem; }
.brand-card .figure::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 60%);
}
/* placeholder silhouette using emoji until real images are wired */
.brand-card .figure .emoji{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2.35rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
}
.brand-card.has-provider-art{
  padding:.45rem;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  background:rgba(255,255,255,.92);
  aspect-ratio:auto;
  min-height:0;
}
.brand-card.has-provider-art.featured{
  grid-column:1/-1;
  min-height:0;
  padding:.55rem;
  flex-direction:column;
  align-items:stretch;
  background:rgba(255,255,255,.94);
}
.brand-card.has-provider-art .figure,
.brand-card.has-provider-art.featured .figure{
  width:100%;
  height:auto;
  flex:none;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:.65rem;
  background:#f3f6f5;
  filter:none;
}
.brand-card.has-provider-art.featured .figure{ aspect-ratio:16/7; }
.brand-card.has-provider-art .figure::before{ display:none; }
.brand-card.has-provider-art .figure img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  opacity:1!important;
}
.brand-card.has-provider-art .info{
  width:100%;
  padding:.58rem .2rem .16rem;
  background:transparent;
}
.brand-card.has-provider-art .name-row{ margin-bottom:.3rem; }
.brand-card.has-provider-art .name,
.brand-card.has-provider-art.featured .name{ font-size:.72rem; color:var(--ink); }
.brand-card.has-provider-art .count,
.brand-card.has-provider-art.featured .count{ font-size:.95rem; }
.brand-card.has-provider-art .hot-game-label{
  position:static;
  margin-left:auto;
  padding:.18rem .35rem;
  border-radius:999px;
  color:var(--brand-dark);
  background:var(--brand-soft);
  font-size:.48rem;
  white-space:nowrap;
}
.brand-card.featured .figure .emoji{ font-size:3.4rem; }
.brand-list.layout-1{ grid-template-columns:1fr; }
.brand-list.layout-1 .brand-card,
.brand-list.layout-1 .brand-card.featured{
  grid-column:auto;
  min-height:96px;
  aspect-ratio:auto;
  padding:.85rem 1rem;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  border-radius:.9rem;
  background:linear-gradient(115deg,#f0faff 0%,#dbecff 60%,#c4e1fa 100%);
  border-color:rgba(255,255,255,.85);
  box-shadow:var(--shadow-md);
}
.brand-list.layout-1 .hot-game-label{ display:none; }
.brand-list.layout-1 .brand-card .info{ flex:1 1 auto; }
.brand-list.layout-1 .brand-card .name{ font-size:1rem; overflow:visible; white-space:normal; text-overflow:clip; }
.brand-list.layout-1 .brand-card .count{ font-size:1.6rem; }
.brand-list.layout-1 .brand-card .count .unit{ font-size:.82rem; }
.brand-list.layout-1 .brand-card .tag{ display:inline-flex; width:auto; font-size:.66rem; padding:.15rem .55rem; }
.brand-list.layout-1 .brand-card .figure{ width:88px; height:76px; flex:0 0 88px; }
.brand-list.layout-1 .brand-card .figure img{ object-fit:contain!important; }
.brand-list.layout-1 .brand-card.has-provider-art{ padding:.55rem; flex-direction:column; align-items:stretch; }
.brand-list.layout-1 .brand-card.has-provider-art .figure{ width:100%; height:auto; aspect-ratio:16/7; }
.brand-list.layout-1 .brand-card .figure .emoji{ font-size:3rem; }
@media(max-width:360px){
  .home-grid{ grid-template-columns:58px 1fr; gap:.42rem; padding-left:.42rem; padding-right:.42rem; }
  .brand-list{ gap:.4rem; }
  .brand-card{ padding:.58rem .35rem .52rem; }
  .brand-card .figure{ height:auto; }
  .brand-card .name{ font-size:.64rem; }
  .brand-card .count{ font-size:.88rem; }
}

/* ================ BOTTOM TAB ================ */
#bottomtab{
  position: fixed; bottom:0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(170%);
  border-top: 1px solid var(--line);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom,0));
  display:flex; justify-content:space-around;
}
/* Floating live-chat bubble (moved out of the bottom tab bar). */
#chatFab{
  position:fixed; z-index:31;
  right:max(16px, calc(50% - 240px + 16px));
  bottom:calc(72px + env(safe-area-inset-bottom,0));
  width:52px; height:52px; border-radius:50%;
  border:none; cursor:pointer; display:grid; place-items:center;
  color:#fff; background:var(--brand,#1e6cff);
  box-shadow:0 10px 24px rgba(0,0,0,.30), 0 0 0 4px rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
#chatFab:hover{ transform:translateY(-2px) scale(1.04); }
#chatFab:active{ transform:scale(.95); }
#chatFab i{ width:24px; height:24px; transition:transform .22s cubic-bezier(.34,1.4,.5,1); }
/* Little bounce whenever the bubble is tapped (open or close). */
#chatFab.fab-pop{ animation:fabPop .34s cubic-bezier(.34,1.5,.5,1); }
@keyframes fabPop{ 0%{transform:scale(1)} 32%{transform:scale(.82)} 66%{transform:scale(1.14)} 100%{transform:scale(1)} }
body.playing #chatFab{ display:none !important; }
/* Pop-up chat overlay — animates both open AND close via transitions (kept in the DOM,
   toggled with opacity/visibility so the close is smooth, not a snap). */
/* Overlay stays visible through the whole close animation (visibility flips only AFTER the
   .5s reveal collapses), so you clearly see it grow out of / shrink back into the bubble. */
#chatOverlay{ position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .5s; }
body.chat-open #chatOverlay{ visibility:visible; transition:visibility 0s; }
/* Only the floating panel captures clicks; the rest of the screen stays live so
   the page behind the widget is fully interactive. */
#chatOverlay .chat-ov-panel{ pointer-events:auto; }
/* Blurred backdrop: opening the chat frosts the page behind to focus the widget.
   Clicking the backdrop (outside the panel) closes the chat. */
.chat-ov-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .35s ease; }
body.chat-open .chat-ov-backdrop{ opacity:1; pointer-events:auto; }
/* Floating chat widget — a bounded pop-up whose bottom sits in line with the bubble
   (the bubble is its bottom-right toggle). Circular reveal grows OUT of the bubble on
   open and shrinks back INTO it on close. */
.chat-ov-panel{ position:fixed;
  right:max(12px, calc(50% - 240px + 12px));
  bottom:calc(72px + env(safe-area-inset-bottom,0));
  width:min(440px, calc(100vw - 20px));
  height:min(900px, calc(100vh - 104px));
  overflow:hidden; border-radius:22px;
  background:var(--surface-deep,#0b0f1a); border:1px solid var(--line);
  box-shadow:0 30px 72px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.35);
  clip-path:circle(0% at calc(100% - 30px) calc(100% - 26px));
  transition:clip-path .45s cubic-bezier(.4,0,.2,1); }
body.chat-open .chat-ov-panel{ clip-path:circle(170% at calc(100% - 30px) calc(100% - 26px)); }
/* Pop-up chat: make the reused chat page fill the panel and leave a clear gap at the
   bottom-right for the bubble, so the toggle never overlaps the send button. */
#chatOverlay .chat-ov-panel{ display:flex; }
#chatOverlay #chatOverlayBody{ display:flex; flex-direction:column; width:100%; height:100%; }
#chatOverlay #chatOverlayBody > div:last-child{ flex:1 1 auto; height:auto !important; min-height:0 !important; margin:0 !important; }
/* Compact the reused chat page inside the small widget: drop the page-level header
   row, keep the status card as the widget header, let the thread fill the rest. */
#chatOverlay .service-head{ display:none !important; }
#chatOverlay .service-card{ margin:.55rem .6rem .5rem !important; }
/* The floating bubble IS the open/close toggle — keep it in its normal spot (below
   the widget) so the panel visibly collapses back into it on close. */
/* Header has its own minimize button now, so hide the floating bubble while the chat is open
   and let the input bar sit flush at the panel bottom (no empty strip). */
body.chat-open #chatFab{ opacity:0; pointer-events:none; }
.bt-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding: .35rem .25rem;
  color: var(--muted-2);
  font-size:.7rem; font-weight:600;
  cursor:pointer;
  position:relative;
}
.bt-item .ic{
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
}
.bt-item.active{ color: var(--brand); }
.bt-item.active .ic{ color: var(--brand); }
.bt-item.active::before{
  content:""; position:absolute; top:0; left:50%; transform: translateX(-50%);
  width:30px; height:3px; border-radius:0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

/* ================ GENERIC ================ */
.page{ padding-bottom: 1rem; }
.page-title{
  padding: .85rem 1rem .5rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:1.1rem; color: var(--ink);
}

/* ================ PROMOTIONS PAGE ================ */
/* Hero carousel: small side breathing room so it isn't edge-to-edge */
.hero-carousel-host{ margin: 0 .7rem; }

/* Promo page hero header */
.promo-head{
  margin: 1rem 1rem .9rem;
  border-radius: 1.1rem;
  padding: 1.15rem 1.2rem;
  color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--brand) 50%,transparent);
  position:relative; overflow:hidden;
}
.promo-head .emoji{ position:absolute; right:-6px; top:-10px; font-size:5.2rem; opacity:.18; transform:rotate(-8deg); }
.promo-head .eyebrow{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(255,255,255,.2); padding:.25rem .6rem; border-radius:9999px;
}
.promo-head h1{ font-weight:800; font-size:1.55rem; margin:.55rem 0 0; line-height:1.15; }
.promo-head .sub{ font-size:.85rem; opacity:.92; margin-top:.35rem; line-height:1.5; }

.promo-tabs{
  display:flex; gap:.45rem; padding: 0 1rem;
  overflow-x: auto;
  white-space:nowrap;
  margin-bottom: .85rem;
}
.promo-tabs::-webkit-scrollbar{ height: 0; }
.promo-tabs .tab{
  display:inline-flex; align-items:center; gap:.35rem;
  padding: .45rem .95rem;
  font-size:.85rem; font-weight:700;
  color: var(--muted);
  cursor:pointer;
  flex-shrink:0;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 9999px;
  transition: all .15s ease;
}
.promo-tabs .tab .tab-ic{ width:16px; height:16px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.promo-tabs .tab .tab-ic-e{ font-size:.95rem; line-height:1; }
.promo-tabs .tab:hover{ border-color: var(--brand, #1e6cff); color: var(--brand, #1e6cff); }
.promo-tabs .tab.active{
  color:#fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand, #1e6cff), var(--cyan, #22d3ee));
  box-shadow:0 5px 12px -5px color-mix(in srgb,var(--brand) 55%,transparent);
}

.promo-list{ display:flex; flex-direction:column; gap:.7rem; padding: 0 .85rem; }
.promo-item{
  position: relative;
  background: linear-gradient(120deg, #f0faff 0%, #dbecff 60%, #c4e1fa 100%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:1rem;
  padding: 1rem 1.1rem;
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-md);
  min-height: 124px;
}
.promo-item .copy{ position:relative; z-index:1; max-width: 60%; }
.promo-item .copy .title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.05rem; color: var(--ink);
  line-height:1.2; letter-spacing:-0.01em;
}
.promo-item .copy .desc{
  font-size:.74rem; color: var(--ink-2); margin-top:.45rem; line-height:1.5;
}
.promo-item .copy .meta{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.85rem;
  padding: .25rem .55rem;
  background:linear-gradient(135deg,var(--accent),var(--brand)); color:var(--brand-contrast);
  border-radius:9999px;
  font-size:.65rem; font-weight:700;
  box-shadow:0 3px 7px -2px color-mix(in srgb,var(--accent) 40%,transparent);
}
.promo-item .promo-figure{
  position:absolute; right:.5rem; top:50%; transform: translateY(-50%);
  width: 130px; height: 110px;
  display:flex; align-items:center; justify-content:center;
  font-size: 3.5rem;
  filter: drop-shadow(0 6px 14px rgba(15,23,42,.2));
}
.promo-item .promo-figure .glow{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.45), transparent 65%);
}
.promo-item .date{
  position:absolute; bottom:.65rem; right:1rem;
  font-size:.65rem; color: var(--muted-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ================ PROFILE PAGE ================ */
.profile-head{
  padding: .85rem 1rem .65rem;
  display:flex; align-items:center; gap:.85rem;
}
.profile-head .avatar{
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.5rem;
  box-shadow: 0 6px 14px -4px rgba(15,23,42,.18);
}
.profile-head .who{ flex:1; min-width:0; }
.profile-head .who .name{ font-weight:700; font-size:1.05rem; color: var(--ink); }
.profile-head .who .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.profile-head .header-actions{ display:flex; gap:.45rem; }
.profile-head .header-actions .ic-btn{
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.7);
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-2); cursor:pointer;
  box-shadow: var(--shadow-sm);
}

.vip-banner{
  margin: .35rem 1rem .85rem;
  border-radius: 1rem;
  overflow: hidden;
  padding: 1rem 1.1rem;
  background: linear-gradient(115deg, #f5fbff 0%, #e0f0ff 50%, #cae3fb 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-md);
}
.vip-banner .row{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:.95rem; color: var(--ink);
  margin-bottom: .7rem;
}
.vip-banner .row i{ width:1rem; height:1rem; color: var(--muted-2); }
.vip-banner .perks{ display:grid; grid-template-columns: repeat(4,1fr); gap:.3rem; }
.vip-banner .perks .perk{
  text-align:center;
  font-size:.7rem; color: var(--ink-2);
  padding: .5rem .1rem;
  background: rgba(255,255,255,.6);
  border-radius:.55rem;
  font-weight:600;
}

.asset-card{
  margin: 0 1rem .85rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.asset-card .head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.55rem;
}
.asset-card .head .lbl{
  font-size:.78rem; color: var(--ink-2); font-weight:700;
}
.asset-card .head .sub{
  font-size:.7rem; color: var(--muted); font-weight:500;
}
.asset-card .row4{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.3rem;
  margin-top:.5rem;
}
.asset-card .row4 .item{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.35rem .1rem; cursor:pointer;
}
.asset-card .row4 .item .ic{
  width:42px; height:42px; border-radius:.7rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: 0 5px 12px -5px rgba(15,23,42,.2);
}
.asset-card .row4 .item:nth-child(1) .ic{ background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.asset-card .row4 .item:nth-child(2) .ic{ background:linear-gradient(135deg,var(--accent),var(--brand)); }
.asset-card .row4 .item:nth-child(3) .ic{ background:linear-gradient(135deg,var(--brand-2),var(--brand)); }
.asset-card .row4 .item:nth-child(4) .ic{ background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.asset-card .row4 .item .name{ font-size:.7rem; color: var(--ink-2); font-weight:600; }

.welfare-card{
  margin: 0 1rem .85rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.welfare-card .head{
  background: linear-gradient(120deg, #d9f0ff 0%, #c4e1fa 100%);
  padding: .65rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.welfare-card .head .lbl{
  font-weight:700; font-size:.92rem; color: var(--ink);
}
.welfare-card .head .right{
  padding:.3rem .65rem; background: linear-gradient(135deg,#10b981,#059669); color:#fff;
  font-size:.7rem; font-weight:700; border-radius:9999px;
  display:inline-flex; align-items:center; gap:.25rem;
  box-shadow: 0 3px 8px -2px rgba(16,185,129,.45);
}
.welfare-card .grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.3rem;
  padding: 1rem .85rem;
}
.welfare-card .grid .it{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding: .35rem .1rem;
  cursor:pointer;
}
.welfare-card .grid .it .ic{
  width:42px; height:42px; border-radius:.7rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: 0 4px 10px -4px rgba(15,23,42,.2);
}
.welfare-card .grid .it:nth-child(8n+1) .ic{ background:linear-gradient(135deg,var(--accent),var(--brand)); }
.welfare-card .grid .it:nth-child(8n+2) .ic{ background: linear-gradient(135deg,#60a5fa,#1d4ed8); }
.welfare-card .grid .it:nth-child(8n+3) .ic{ background: linear-gradient(135deg,#fbbf24,#d97706); }
.welfare-card .grid .it:nth-child(8n+4) .ic{ background: linear-gradient(135deg,#a78bfa,#6d28d9); }
.welfare-card .grid .it:nth-child(8n+5) .ic{ background: linear-gradient(135deg,#34d399,#059669); }
.welfare-card .grid .it:nth-child(8n+6) .ic{ background: linear-gradient(135deg,#fb7185,#be123c); }
.welfare-card .grid .it:nth-child(8n+7) .ic{ background: linear-gradient(135deg,#67e8f9,#0e7490); }
.welfare-card .grid .it:nth-child(8n+8) .ic{ background: linear-gradient(135deg,#fdba74,#c2410c); }
.welfare-card .grid .it .nm{ font-size:.7rem; color: var(--ink-2); font-weight:600; text-align:center; }

.about-row{
  margin: 0 1rem .85rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 9999px;
  padding: .65rem 1rem;
  display:flex; align-items:center; gap:.55rem;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  color: var(--ink-2); font-size:.85rem; font-weight:500;
}
.about-row .ic{ color: var(--muted-2); }
.about-row .arrow{ margin-left:auto; color: var(--muted-2); }

/* ================ SERVICE PAGE ================ */
.service-head{
  padding: 1rem 1rem .65rem;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:1.05rem; color: var(--ink);
}
.service-head .right{ font-size:.78rem; color: var(--brand); font-weight:600; cursor:pointer; }
.service-card{
  margin: 0 1rem .85rem;
  display:flex; align-items:center; gap:.85rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.service-card .face{
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
}
.service-card .who .name{ font-weight:700; font-size:.95rem; color: var(--ink); }
.service-card .who .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }

.live-entry{
  margin: 0 1rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  padding: .85rem 1rem;
  display:flex; align-items:center; gap:.65rem;
  cursor:pointer;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.live-entry .info{ flex:1; min-width:0; }
.live-entry .info .name{ font-weight:700; font-size:.95rem; color: var(--ink); }
.live-entry .info .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.live-entry .bubble{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 4px 10px -3px color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ================ MODAL (dark for contrast) ================ */
#modal-root{ position: fixed; inset:0; pointer-events:none; z-index: 50; }
.modal-backdrop-light{
  position:absolute; inset:0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  pointer-events:auto;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 3vh 1rem;
  overflow:auto;
}
.modal-light{
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 24px 50px -10px rgba(15,23,42,.3);
  max-height: 92vh; max-height: 92dvh;
  display:flex; flex-direction:column;
  overflow:hidden;
  animation: popIn .22s ease-out;
}
@keyframes popIn{ from{ opacity:0; transform: translateY(8px) scale(.97);} to{opacity:1; transform:none;} }
.modal-light .head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.modal-light .head h3{ font-weight:700; font-size:1.05rem; color: var(--ink); }
.modal-light .head .x{
  width:28px; height:28px; border-radius:50%;
  background: rgba(148,163,184,.18);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-2); cursor:pointer;
}
.modal-light .body{ flex:1 1 auto; min-height:0; padding: 1.1rem 1.15rem; overflow:auto; color: var(--ink); }
.promo-detail-hero{ background:transparent; }
.promo-custom-shell{ position:relative; width:100%; max-width:460px; background:transparent; border:0; box-shadow:none; }
.promo-custom-foot{ display:flex; gap:.6rem; justify-content:center; align-items:center; margin:14px 2px calc(14px + env(safe-area-inset-bottom,0px)); }
.promo-custom-foot .btn-light,.promo-custom-foot .btn-blue{ box-shadow:0 8px 22px rgba(0,0,0,.5); }
.btn-claim-off{ border:0; border-radius:.6rem; padding:.6rem 1.25rem; min-width:120px; font-weight:800; font-size:.9rem; background:#2b2b34; color:#7c7c88; cursor:not-allowed; box-shadow:0 8px 22px rgba(0,0,0,.5); }
.promo-custom-foot .btn-light,.promo-custom-foot .btn-blue{ min-width:120px; }
.promo-detail-rich{ zoom:.82; } .promo-detail-rich *{ max-width:100% !important; }
.modal-light .foot{
  flex:0 0 auto;
  padding: .85rem 1.15rem;
  display:flex; gap:.5rem; justify-content:flex-end;
  border-top:1px solid var(--line);
  background: #fafbfd;
}

.btn-light{
  padding: .55rem 1.1rem;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius:.55rem;
  font-size:.85rem; font-weight:600;
  color: var(--ink-2); cursor:pointer;
}
.btn-light:hover{ background:#f8fafc; }
.btn-blue{
  padding: .55rem 1.2rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  border:none; border-radius: .55rem;
  font-size:.85rem; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px -3px color-mix(in srgb,var(--brand) 40%,transparent);
}
.btn-blue:hover{ box-shadow:0 6px 16px -3px color-mix(in srgb,var(--brand) 50%,transparent); }

/* Light-theme form fields (used inside light modal) */
.field-light label{ display:block; font-size:.75rem; color: var(--muted); font-weight:600; margin-bottom:.3rem; }
/* Compact spacing inside popups so the full form (incl. Telegram button) shows without scrolling. */
.modal-light .field-light{ margin-bottom:.5rem !important; }
.field-light input, .field-light select, .field-light textarea{
  width:100%;
  padding:.6rem .8rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  font-size:.9rem;
  color: var(--ink);
  font-family:inherit;
  background:#fff;
}
.field-light input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent); }

/* Mini util classes */
.center{ text-align:center; }
.flex{ display:flex; }
.flex-1{ flex:1; }
.gap-2{ gap:.5rem; }
.muted{ color: var(--muted); }

/* ================ EMPTY STATE / LOGIN MODAL HEADER OVERRIDES ================ */
.legacy-hidden{ display:none !important; }

.quick-login-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.quick-login{min-height:2.7rem;display:flex;align-items:center;justify-content:flex-start;gap:.65rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:.72rem;background:var(--surface);color:var(--ink);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.quick-login:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:0 7px 16px rgba(31,63,95,.08)}.quick-login:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:2px}.quick-login-icon{width:1.65rem;height:1.65rem;display:grid;place-items:center;flex:0 0 auto}.quick-login-icon svg{width:100%;height:100%;display:block}

/* CMS-driven footer navigation */
#siteFooter{margin:1rem 1rem 5.4rem;border:1px solid var(--line);border-radius:1.15rem;background:color-mix(in srgb,var(--surface) 96%,var(--brand));box-shadow:0 14px 34px rgba(31,63,95,.07);overflow:hidden}
.site-footer-inner{padding:1.15rem}.site-footer-brand{padding-bottom:1rem;border-bottom:1px solid var(--line)}.site-footer-brand b{font-size:1rem}.site-footer-brand p{margin:.45rem 0 0;color:var(--muted);font-size:.72rem;line-height:1.6}
.site-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem;padding:1rem 0}.site-footer-nav section{min-width:0}.site-footer-nav h2{margin:0 0 .55rem;color:var(--ink);font-size:.72rem;letter-spacing:.02em}.site-footer-nav a{display:block;padding:.33rem 0;color:var(--muted);font-size:.69rem;line-height:1.35;text-decoration:none;transition:color .18s ease,transform .18s ease}.site-footer-nav a:hover,.site-footer-nav a:focus-visible{color:var(--brand);transform:translateX(2px)}
.site-footer-base{display:flex;justify-content:space-between;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--line);color:var(--muted);font-size:.63rem;line-height:1.45}
@media(max-width:380px){.site-footer-nav{grid-template-columns:1fr}.site-footer-base{flex-direction:column}}

/* ---------- CMS license + trust badges ---------- */
.license-chip, .trust-chip{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .55rem;
  font-size:.68rem; font-weight:600;
  background:var(--accent-soft);
  color: var(--brand, #0891b2);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius: .35rem;
  letter-spacing:.04em;
}
.trust-chip{ background: rgba(15,23,42,.06); color: var(--text, #0f172a); border-color: rgba(15,23,42,.12); }

/* Toast feedback */
.ui-toast{
  position:fixed; left:50%; bottom:84px; transform:translate(-50%, 16px);
  z-index:9999; max-width:88vw;
  background:#0f172a; color:#fff;
  padding:.7rem 1.1rem; border-radius:.6rem;
  font-size:.86rem; font-weight:600; line-height:1.4;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
}
.ui-toast.show{ opacity:1; transform:translate(-50%, 0); }
.ui-toast.err{ background:#dc2626; }

/* game lobby animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* hide bottom tab while inside a game (full-screen play) */
body.playing #bottomtab { display:none !important; }
body.playing #app { padding-bottom:0 !important; }

/* Platform information center (Me → About) */
.info-center{padding-bottom:5.5rem;color:var(--ink)}
.info-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.25rem 1rem 1rem;padding:1.2rem 1.25rem;overflow:hidden;border-radius:1.05rem;background:linear-gradient(135deg,#093226,#174f3b);color:#fff;box-shadow:0 15px 34px rgba(8,47,36,.17)}
.info-hero:after{content:"";position:absolute;right:-2.7rem;width:8.5rem;height:8.5rem;border:1px solid rgba(199,255,45,.28);border-radius:50%}.info-hero small,.info-panel>header small,.info-about-brand small{color:#c7ff2d;font-size:.58rem;font-weight:900;letter-spacing:.1em}.info-hero h1{margin:.28rem 0;font-size:1.35rem}.info-hero p{max-width:22rem;margin:0;color:#c9d9d3;font-size:.72rem;line-height:1.55}.info-hero>svg{width:2.5rem;height:2.5rem;color:#c7ff2d;z-index:1}
.info-hero-logo{height:46px;width:auto;max-width:62%;margin:.28rem 0;object-fit:contain;display:block;z-index:1}
.info-tabs-shell{position:relative;margin:0 1rem 1rem}.info-tabs-shell:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1.8rem;pointer-events:none;background:linear-gradient(90deg,transparent,var(--surface))}.info-tabs{display:flex;gap:.4rem;padding:.35rem;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);box-shadow:0 8px 22px rgba(31,63,95,.05);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x}.info-tabs.is-dragging{cursor:grabbing;scroll-behavior:auto}.info-tabs.is-dragging .info-tab{pointer-events:none}.info-tabs::-webkit-scrollbar{display:none}.info-tab{min-height:2.3rem;display:flex;align-items:center;justify-content:center;gap:.35rem;flex:0 0 auto;padding:.55rem .72rem;border:0;border-radius:.65rem;background:transparent;color:var(--muted);font:inherit;font-size:.66rem;font-weight:800;cursor:pointer;transition:background .18s,color .18s,transform .18s}.info-tab svg{width:.85rem}.info-tab.is-active{background:var(--brand);color:var(--brand-contrast);box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 25%,transparent)}.info-tab:active{transform:scale(.97)}
.info-panels{margin:0 1rem}.info-panel{padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);box-shadow:0 10px 28px rgba(31,63,95,.06);animation:infoIn .22s ease}.info-panel[hidden]{display:none}.info-panel>header{padding-bottom:.85rem;border-bottom:1px solid var(--line)}.info-panel>header small,.info-about-brand small{color:var(--brand)}.info-panel>header h2{margin:.2rem 0 0;font-size:1.05rem}@keyframes infoIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.info-about-brand{display:flex;align-items:center;gap:.75rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}.info-brand-mark{width:3.25rem;height:3.25rem;display:grid;place-items:center;flex:0 0 auto;border-radius:.9rem;background:linear-gradient(135deg,var(--brand),var(--accent));color:var(--brand-contrast);font-size:.95rem;font-weight:900}.info-about-brand h2{margin:.12rem 0;font-size:1.15rem}.info-about-brand p{margin:0;color:var(--muted);font-size:.67rem}.info-trust{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}.info-rich{padding:.9rem 0 0;color:var(--ink-2);font-size:.76rem;line-height:1.72}.info-rich>:first-child{margin-top:0}.info-rich ol,.info-rich ul{margin:.6rem 0 1.1rem;padding-left:1.4rem}.info-rich li{margin:.5rem 0;padding-left:.25rem;line-height:1.62}.info-rich ol li::marker,.info-rich ul li::marker{color:var(--brand);font-weight:800}.info-rich h3{position:relative;margin:1.5rem 0 .6rem;padding-left:.7rem;font-size:.98rem;line-height:1.35;font-weight:800;color:var(--ink);border-left:3px solid var(--brand);border-radius:2px}.info-rich>h3:first-child{margin-top:.2rem}.info-rich p{margin:.6rem 0;color:var(--ink-2)}.info-rich b{color:var(--ink);font-weight:700}.info-rich>:last-child{margin-bottom:0}.info-rich img{max-width:100%;height:auto;border-radius:.75rem}.info-rich table{display:block;max-width:100%;overflow-x:auto}.info-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.9rem}.info-contact-grid>div{min-width:0;padding:.7rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface-2)}.info-contact-grid svg{width:.9rem;color:var(--brand)}.info-contact-grid span,.info-contact-grid b{display:block;margin-top:.15rem;font-size:.62rem}.info-contact-grid span{color:var(--muted)}.info-contact-grid b{overflow:hidden;text-overflow:ellipsis}.info-legal-note{margin:.9rem 0 0;text-align:center;color:var(--muted);font-size:.62rem}
.info-empty{display:grid;place-items:center;padding:2.3rem 1rem;text-align:center}.info-empty svg{width:1.8rem;color:var(--brand)}.info-empty b{margin-top:.6rem;font-size:.8rem}.info-empty p{max-width:22rem;margin:.3rem 0 0;color:var(--muted);font-size:.68rem;line-height:1.55}.info-article-grid{display:grid;gap:.6rem;margin-top:.9rem}.info-article{display:block;padding:.85rem;border:1px solid var(--line);border-radius:.8rem;color:var(--ink);text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}.info-article:active{transform:scale(.985)}.info-article>span{color:var(--brand);font-size:.56rem;font-weight:900;letter-spacing:.08em}.info-article h3{margin:.3rem 0 0;font-size:.82rem;line-height:1.35}.info-article p{margin:.35rem 0 0;color:var(--muted);font-size:.67rem;line-height:1.5}.info-article small,.info-view-all{display:flex;align-items:center;gap:.3rem;margin-top:.55rem;color:var(--brand);font-size:.62rem;font-weight:800}.info-article small svg,.info-view-all svg{width:.75rem}.info-view-all{justify-content:center;padding:.75rem;text-decoration:none}@media(min-width:720px){.info-article-grid{grid-template-columns:repeat(2,1fr)}.info-panel{padding:1.25rem}}
/* Search discovery content: intentionally calm and secondary to the game lobby. */
.seo-discovery{margin:1rem;padding:1rem;border:1px solid var(--line,#dbe4ee);border-radius:1rem;background:color-mix(in srgb,var(--surface,#fff) 92%,var(--brand));box-shadow:0 10px 28px rgba(31,63,95,.07);color:var(--ink,#182433)}
.seo-discovery h2{margin:0;font-size:1rem;line-height:1.3}.seo-story>p{margin:.55rem 0;color:var(--muted);font-size:.78rem;line-height:1.65}.seo-story details{margin-top:.65rem}.seo-discovery summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;list-style:none;cursor:pointer;font-size:.8rem;font-weight:800}.seo-discovery summary::-webkit-details-marker{display:none}.seo-discovery details summary span{transition:transform .2s ease}.seo-discovery details[open] summary span{transform:rotate(45deg)}.seo-story-body{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line,#e2e8f0);color:var(--muted);font-size:.75rem;line-height:1.72}.seo-faq{display:grid;gap:.55rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line,#e2e8f0)}.seo-faq-heading span{display:block;margin-bottom:.25rem;color:var(--brand);font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.seo-faq details{padding:.75rem .8rem;border:1px solid var(--line,#e2e8f0);border-radius:.75rem;background:var(--surface,#fff)}.seo-faq details p{margin:.65rem 0 0;padding-top:.65rem;border-top:1px solid var(--line,#e2e8f0);color:var(--muted);font-size:.75rem;line-height:1.65}

/* VIP privilege center */
.vip-page{padding-bottom:5.5rem;color:var(--ink)}.vip-title{display:flex;align-items:center;gap:.65rem;padding:1rem}.vip-title button{width:2.2rem;height:2.2rem;display:grid;place-items:center;border:0;border-radius:.7rem;background:var(--surface);color:var(--ink)}.vip-title button svg{width:1.2rem}.vip-title small,.vip-section-head small,.vip-member-top small,.vip-hero small{display:block;color:var(--brand);font-size:.61rem;font-weight:900;letter-spacing:.1em}.vip-title h1,.vip-section-head h2{margin:.12rem 0 0;font-size:1.18rem}.vip-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 1rem 1rem;padding:1.25rem;border-radius:1.1rem;overflow:hidden;background:linear-gradient(135deg,#092f25,#18503b);color:#fff;box-shadow:0 16px 32px rgba(8,47,36,.18)}.vip-hero:after{content:"";position:absolute;width:9rem;height:9rem;right:-3rem;border:1px solid rgba(199,255,45,.27);border-radius:50%}.vip-hero small{color:#c7ff2d}.vip-hero h2{margin:.35rem 0;font-size:1.45rem}.vip-hero p{max-width:20rem;margin:0;color:#c6d8d1;font-size:.75rem;line-height:1.55}.vip-hero>svg{width:3rem;height:3rem;color:#c7ff2d;z-index:1}.vip-member-card,.vip-section,.vip-guest{margin:0 1rem 1rem;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);box-shadow:0 10px 26px rgba(31,63,95,.06)}.vip-member-top{display:flex;align-items:center;gap:.75rem}.vip-member-top>span{width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:.9rem;background:linear-gradient(135deg,#d7ff63,#a5e918);font-size:1.65rem}.vip-member-top h2{margin:.15rem 0;font-size:1.18rem}.vip-member-top p{margin:0;color:var(--muted);font-size:.7rem}.vip-progress-head{display:flex;align-items:baseline;gap:.35rem;margin-top:1rem}.vip-progress-head b{font-size:1.05rem}.vip-progress-head span{color:var(--muted);font-size:.68rem}.vip-progress{height:.48rem;margin-top:.45rem;border-radius:99px;background:var(--surface-2);overflow:hidden}.vip-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .5s ease}.vip-progress-metrics,.vip-threshold{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.85rem}.vip-progress-metrics>div,.vip-threshold div{padding:.7rem;border:1px solid var(--line);border-radius:.75rem}.vip-progress-metrics span,.vip-progress-metrics small,.vip-threshold span{display:block;color:var(--muted);font-size:.61rem}.vip-progress-metrics b,.vip-threshold b{display:block;margin:.2rem 0;font-size:.7rem}.vip-section-head{margin-bottom:.8rem}.vip-reward-grid,.vip-tier-grid{display:grid;gap:.65rem}.vip-reward{display:flex;align-items:center;gap:.7rem;padding:.7rem;border:1px solid var(--line);border-radius:.8rem}.vip-reward>span{width:2.15rem;height:2.15rem;display:grid;place-items:center;border-radius:.65rem;background:var(--surface-2);color:var(--brand)}.vip-reward svg{width:1rem}.vip-reward div{flex:1}.vip-reward b,.vip-reward strong{display:block;font-size:.7rem}.vip-reward strong{margin-top:.15rem;color:var(--brand)}.vip-reward button,.vip-guest button{padding:.5rem .7rem;border:0;border-radius:.6rem;background:var(--brand);color:var(--brand-contrast);font-size:.66rem;font-weight:800}.vip-reward button:disabled{background:var(--surface-2);color:var(--muted)}.vip-tier{position:relative;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}.vip-tier.is-current{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent)}.vip-tier>em{position:absolute;right:.7rem;top:.7rem;padding:.25rem .45rem;border-radius:99px;background:var(--brand);color:var(--brand-contrast);font-size:.55rem;font-style:normal;font-weight:900}.vip-tier header{display:flex;align-items:center;gap:.65rem}.vip-tier header>span{font-size:1.75rem}.vip-tier header small{color:var(--muted);font-size:.58rem}.vip-tier h3{margin:.1rem 0;font-size:1rem}.vip-benefit-pills{display:flex;gap:.4rem;margin-top:.65rem}.vip-benefit-pills span{padding:.35rem .5rem;border-radius:99px;background:var(--surface-2);font-size:.61rem}.vip-tier ul{display:grid;gap:.35rem;margin:.75rem 0;padding:0;list-style:none}.vip-tier li{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.67rem}.vip-tier li svg{width:.8rem;color:var(--brand)}.vip-tier footer{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;padding-top:.7rem;border-top:1px solid var(--line)}.vip-tier footer span,.vip-tier footer b{display:block;text-align:center;font-size:.58rem}.vip-tier footer span{color:var(--muted)}.vip-tier footer b{margin-top:.15rem;color:var(--ink)}.vip-guest{display:flex;align-items:center;gap:.75rem}.vip-guest>svg{width:1.6rem;color:var(--brand)}.vip-guest div{flex:1}.vip-guest h2{margin:0;font-size:.82rem}.vip-guest p{margin:.25rem 0 0;color:var(--muted);font-size:.65rem;line-height:1.45}.vip-empty{text-align:center;color:var(--muted);font-size:.75rem;padding:1rem}@media(min-width:720px){.vip-tier-grid{grid-template-columns:repeat(2,1fr)}}
.bo-announcement-bar{position:fixed;inset:0 0 auto;z-index:9000;display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:8px 46px 8px 16px;background:linear-gradient(100deg,var(--brand,#06adc5),var(--accent,#20c7d4));color:#fff;box-shadow:0 10px 30px rgba(5,52,68,.18);font-size:13px}.bo-announcement-copy{display:flex;align-items:center;gap:9px;min-width:0}.bo-announcement-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bo-announcement-link{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.18);color:inherit;font:inherit;font-weight:800;white-space:nowrap}.bo-announcement-close{position:absolute;right:14px;border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.bo-popup-notice{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(4,27,36,.58);backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}.bo-popup-notice.is-open{opacity:1;visibility:visible}.bo-popup-card{position:relative;width:min(430px,100%);max-height:min(720px,calc(100vh - 40px));overflow:auto;border:1px solid rgba(255,255,255,.78);border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(5,40,54,.34);transform:translateY(18px) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1)}.bo-popup-notice.is-open .bo-popup-card{transform:none}.bo-popup-media{aspect-ratio:2/1;overflow:hidden;background:#e8f8fa}.bo-popup-media img{display:block;width:100%;height:100%;object-fit:cover}.bo-popup-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border:1px solid rgba(9,54,66,.1);border-radius:50%;background:rgba(255,255,255,.92);color:#17313a;font-size:22px;line-height:1;box-shadow:0 5px 20px rgba(8,45,59,.12);cursor:pointer}.bo-popup-content{padding:26px}.bo-popup-kicker{display:inline-flex;margin-bottom:10px;color:var(--brand,#09acc4);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.bo-popup-content h2{margin:0;color:#122933;font-size:25px;line-height:1.15;letter-spacing:-.025em}.bo-popup-content p{margin:12px 0 0;color:#5f7076;font-size:14px;line-height:1.65;white-space:pre-line}.bo-popup-actions{display:grid;gap:9px;margin-top:22px}.bo-popup-actions button{min-height:45px;border-radius:13px;font:inherit;font-weight:850;cursor:pointer}.bo-popup-cta{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:linear-gradient(100deg,var(--brand,#06adc5),var(--accent,#20c7d4));color:#fff;box-shadow:0 10px 24px rgba(4,174,198,.22)}.bo-popup-later{border:1px solid #dce6e8;background:#f7fafb;color:#5b696e}
@media(max-width:520px){.bo-announcement-bar{justify-content:flex-start}.bo-announcement-copy strong{display:none}.bo-popup-notice{padding:14px}.bo-popup-card{border-radius:22px}.bo-popup-content{padding:22px}}@media(prefers-reduced-motion:reduce){.bo-popup-notice,.bo-popup-card{transition:none}}

/* ---- Community chat rooms ---- */
.rooms-page{position:fixed;top:0;left:0;right:0;bottom:var(--rm-navh,56px);display:flex;flex-direction:column;background:var(--bg,#0a0a0d);z-index:40}
.rm-head{display:flex;align-items:center;gap:.35rem;padding:calc(.7rem + env(safe-area-inset-top)) 1rem .5rem;font-size:1.25rem;font-weight:800;flex:0 0 auto}
.rm-back{cursor:pointer;display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-.35rem;color:var(--ink)}
.rm-tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.1rem 1rem .7rem;scrollbar-width:none}
.rm-tabs::-webkit-scrollbar{display:none}
.rm-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.72rem;font-weight:800;cursor:pointer;white-space:nowrap}
.rm-tab.on{border-color:transparent;background:var(--brand);color:var(--brand-contrast,#fff)}
.rm-shell{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.rm-msgs{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem;background:var(--bg-3,transparent)}
.rm-empty{margin:auto;color:var(--muted);font-size:.82rem;text-align:center;padding:2rem}
.rm-row{display:flex;gap:.5rem;align-items:flex-end;max-width:86%}
.rm-row.mine{align-self:flex-end;flex-direction:row-reverse}
.rm-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rm-av-i{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--brand),var(--accent));color:#fff;font-weight:800;font-size:.8rem}
.rm-bubble{background:var(--bg-3,#f1f5f9);border:1px solid var(--line);border-radius:.9rem;padding:.4rem .65rem;min-width:0}
.rm-row.mine .rm-bubble{background:var(--brand);color:var(--brand-contrast,#fff);border-color:transparent}
.rm-meta{display:flex;align-items:center;gap:.35rem;font-size:.64rem;margin-bottom:.15rem;color:var(--muted)}
.rm-row.mine .rm-meta{justify-content:flex-end;color:rgba(255,255,255,.85)}
.rm-meta b{color:var(--ink);font-weight:800}
.rm-vip{background:linear-gradient(135deg,#f5c518,#e8a400);color:#3a2a00;font-size:.56rem;font-weight:900;padding:.03rem .32rem;border-radius:.3rem;letter-spacing:.02em}
.rm-t{opacity:.7}
.rm-text{font-size:.85rem;line-height:1.42;word-break:break-word;overflow-wrap:anywhere}
.rm-note{padding:.4rem .9rem 0;color:var(--brand);font-size:.7rem;font-weight:700}
.rm-inbar{display:flex;gap:.5rem;padding:.6rem .8rem;border-top:1px solid var(--line);background:var(--surface)}
.rm-inbar input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:.6rem .9rem;background:var(--bg-3,#fff);color:var(--ink);font-size:.9rem}
.rm-inbar .btn-blue{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center;flex:0 0 auto}
body.rooms-active #chatFab{display:none !important}