:root{
  --headerH:92px;
  /* Core palette (CSGOEmpire-ish) */
  --bg0:#0b0d10;
  --bg1:#101318;
  --bg2:#141821;

  --surface0: rgba(12,16,26,.88);
  --surface1: rgba(16,22,36,.82);
  --surface2: rgba(18,26,44,.92);

  --border0: rgba(255,255,255,.06);
  --border1: rgba(255,255,255,.09);

  --text:#e8eefc;
  --muted:#a9b3cc;

  --gold:#f5c542;
  --gold2:#d3a51e;

  --ok:#41d07b;
  --err:#ff4d4d;

  --shadow: 0 18px 60px rgba(0,0,0,.55);

  /* Back-compat */
  --card: var(--surface1);
  --card2: var(--surface2);
  --stroke: rgba(255,255,255,.10);
}


*{box-sizing:border-box}
html,body{height:100%}

/* --- 2026-02-15: Mobile<=820 + header/chat overflow safety (surgical) --- */
html, body{ height:100%; overflow-x:hidden; }
body{ overflow:hidden; }

/* App layout: prevent page scroll; only mainArea scrolls */
.page{ height:100%; }
.layout{ height: calc(100dvh - var(--headerH)); overflow:hidden; }
.mainArea{ height: calc(100dvh - var(--headerH)); overflow:auto; min-width:0; }
.mainRoot, .coinflipPage{ max-width:100%; }

/* Safety: avoid accidental 100vw overflow */
.hero, .heroSlides, .heroSlide{ max-width:100%; overflow:hidden; }
img, video, canvas{ max-width:100%; }

body {
  margin: 0;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  /* Simple solid background (requested) */
  background: #0b0c15;
}


.bg{
  position:fixed; inset:0;
  pointer-events:none;
  display:none;
}


.wrap{max-width:1420px; margin:0 auto; padding:18px 18px 48px;}


.page{
  max-width: none;
  margin: 0;
  padding: 16px 18px 48px;
}
.pageRow{
  max-width: 1640px;
  margin: 0 auto;
  padding: 10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* App layout: left chat rail + main area */
.layout{
  display:block;
}
.mainArea{ flex:1; min-width:0; padding-top: 16px; margin-left: 340px; padding-left: 18px; }

.chatRail{
  width:340px;
  min-height: 520px;
  border-radius: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: var(--headerH);
  bottom: 0; /* ensure input stays visible even if vh calc is off */
  height: auto;
  max-height: calc(100vh - var(--headerH));
  max-height: calc(100dvh - var(--headerH)); /* dynamic viewport fix */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface0);
  border: 1px solid var(--border0);
  box-shadow: 0 14px 42px rgba(0,0,0,.45);
}

.chatRail.lockedCard{
  opacity: .95;
}

/* Mobile: hide chat rail */
@media (max-width: 980px){
  /* Collapse layout: hide chat rail and remove left offset */
  .layout{ display:block !important; }
  .chatRail{ display:none !important; }
  .mainArea{ margin-left:0 !important; padding-left:0 !important; }

  /* Make header span full width */
  .topGrid{ grid-template-columns: 1fr !important; }
  .topRight{ width:100% !important; padding-left:0 !important; padding-right:0 !important; }

  /* Keep logo visible but overlay it so balance can be truly centered */
  .top{ position:relative; }
  .topLeft{
    display:block !important;
    position:absolute !important;
    left:12px !important;
    top:12px !important;
    z-index:20 !important;
    pointer-events:auto !important;
  }

  /* Hide mini bar on tablet/mobile */
  .miniBar{ display:none !important; }

  /* Hide desktop actions; rely on hamburger menu */
  .gamesWrap{ display:none !important; }
  .userbox{ display:none !important; }

  /* Main bar becomes: [spacer] [balance centered] [hamburger right] */
  .mainBar{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    padding:12px 12px !important;
  }
  #balancePill{
    grid-column:2 !important;
    justify-self:center !important;
  }
  .mobileMenuBtn{
    grid-column:3 !important;
    justify-self:end !important;
    margin-left:0 !important;
  }

  /* Signed-out: show a real login button in the header (mini bar is hidden on mobile) */
  .mobileLogin{
    display:inline-flex;
    grid-column:1;
    justify-self:start;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }
}


/* Tablet/mobile: use the same single-column header + hide chat a bit earlier
   so the UI doesn't feel cramped around ~821–900px widths. */
@media (max-width: 900px){
  .layout{ display:block; }
  .chatRail{ display:none; }
  .mainArea{ margin-left: 0; padding-left: 0; }

  .topGrid{ grid-template-columns: 1fr; }
  .topLeft{ display:none !important; }
  .topRight{ padding-left: 0; padding-right: 0; width:100%; }

  .miniBar{ display:none !important; }
  .gamesWrap{ display:none !important; }
  .userbox{ display:none !important; }

  .mainBar{
    grid-template-columns: auto 1fr auto;
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }
  .mainBar .centerBox{ justify-self:center; }
  .mobileMenuBtn{ display:flex; align-items:center; justify-content:center; justify-self:end; }

  .mainBar .brand.mBrand{ display:flex; align-items:center; }
  .mainBar .brand.mBrand .brandLogo{ height: 28px; width:auto; }
}

.top{
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(12,14,18,.86);
  border-bottom: none;
backdrop-filter: blur(10px);
}
.top .pageRow{
  padding-top: 10px;
  padding-bottom: 10px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  max-width: none;
  margin: 0;
  position: relative;
}


/* Dual header layout (CSGOEmpire-ish) */
.topGrid{
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: stretch;
}

.topLeft{
  display:flex;
  align-items:center;
  padding: 10px 0 10px 18px;
}

.topRight{
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 18px;
  padding-left: 18px; /* aligns with .mainArea padding-left */
}

.miniBar{
  height: 28px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  padding: 6px 0;
}

.miniNav{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}
.miniLink{
  color: rgba(255,255,255,.70);
  text-decoration: none;
  font-weight: 600;
}
.miniLink:hover{ color: rgba(255,255,255,.92); }

.miniRight{
  display:flex;
  align-items:center;
  gap: 10px;
}

.miniLvl{
  display:flex;
  align-items:center;
  gap: 6px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
}

.miniXp{
  width: 140px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.miniXpFill{
  height:100%;
  width:0%;
  background: rgba(255,255,255,.65);
}

.iconBtn.miniLogout{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
}
.iconBtn.miniLogout svg{
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,.82);
}

.mainBar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 12px;
  padding: 6px 0 10px 0;
}

.mainBar .centerBox{ justify-self:center; }
.mainBar .userbox{ justify-self:end; }

/* Mobile hamburger + slide menu (Step 5) */
.mobileMenuBtn{ display:none; }
.mobileMenuBtn{
  width: 50px;
  height: 44px;
  border-radius: 14px;
}
.hamburger{
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 2px;
  position: relative;
  display:block;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 2px;
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

.mobileMenuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
}
.mobileMenuPanel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(86vw, 360px);
  background: rgba(12,14,18,.98);
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -20px 0 50px rgba(0,0,0,.55);
  z-index: 9010;
  display:flex;
  flex-direction: column;
  padding: 14px;
}
.mobileMenuTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}
.mobileMenuTitle{ font-weight: 900; letter-spacing: .2px; }
.mobileMenuClose{ width: 42px; height: 42px; border-radius: 14px; }

.mobileMenuSection{ padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.mobileMenuSection:last-child{ border-bottom: none; }

.mobileMenuLink{
  display:flex;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-weight: 800;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.mobileMenuLink:last-child{ margin-bottom: 0; }
.mobileMenuLink:hover{ background: rgba(255,255,255,.06); }

.mobileMenuBtn{
  width: 50px;
  height: 44px;
  border-radius: 14px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
  margin-top: 10px;
}
.mobileMenuBtn:first-child{ margin-top: 0; }
.mobileMenuBtn:hover{ background: rgba(255,255,255,.08); }
.mobileMenuBtn.ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}

/* Games dropdown */
.gamesWrap{ position: relative; }
.navBtn{
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  font-weight: 800;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 8px;
}
.navBtn:hover{ background: rgba(255,255,255,.08); }
.navCaret{ opacity: .85; }

.dropdown{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: rgba(12,14,18,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  padding: 6px;
  z-index: 120;
}
.dropdownItem{
  width: 100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.88);
  font-weight: 700;
  cursor:pointer;
}
.dropdownItem:hover{ background: rgba(255,255,255,.08); }

/* Hide old big logout button (logout moved to mini header) */
#userBox #logoutBtn{ display:none; }

/* Make chat rail match header for a unified look */
.chatRail{
  background: rgba(12,14,18,.86);
}
.chatTop{
  background: rgba(12,14,18,.86);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{display:flex; gap:12px; align-items:center; justify-self:start;}
.brandLogo{
  height: 32px;
  width: auto;
  display:block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}

.centerBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 60vw;
}


.centerBox .currencyWrap {
  margin: 0 auto;
}



.title{font-weight:800; letter-spacing:.2px}
.sub{font-size:12px; color:var(--muted); margin-top:2px}

.userbox{display:flex; align-items:center; gap:10px; justify-self:end}
.userpill{
  display:flex; align-items:center; gap:10px;
  height: 40px;
  padding:0 12px;
  border-radius:12px;
  background: rgba(12,16,26,.72);
  border:1px solid var(--border0);
  cursor:pointer;
  user-select:none;
}
.userpill:hover{background:rgba(10,16,36,.72)}
.userpill:active{transform:translateY(1px)}
.userpill:focus{outline:2px solid rgba(64,120,255,.35); outline-offset:2px}
.avatar{
  width:30px;height:30px;border-radius:999px;
  background:linear-gradient(180deg, #1c2a55, #0b1227);
  border:1px solid rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
}
.uinfo{line-height:1.05}
.uname{font-weight:700; font-size:13px}
.utag{font-size:11px; color:var(--muted); margin-top:2px}

.balancepill, .cfBalancePill{
  display:flex; align-items:center; gap:8px;
  height: 40px;
  padding:0 12px;
  border-radius:12px;
  background: rgba(12,16,26,.72);
  border:1px solid var(--border0);
  box-shadow: 0 0 0 rgba(255,204,51,0);
}
.bpLabel{font-size:11px; color:var(--muted)}
.bpValue{
    font-weight:800;
    color: white;
}

.levelpill{ margin-left:10px; }

/* Make all header controls equal height */
.top .btn{ height: 40px; padding: 0 14px; display:inline-flex; align-items:center; }

.levelRow{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.levelMeta{ display:flex; align-items:baseline; gap:8px; }
.levelTitle{ font-weight:700; }
.levelNum{ font-weight:800; }

.levelBar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.levelBarFill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(255,204,51,.6), rgba(255,204,51,.95));
}

.card{
  background: var(--surface1);
  border: 1px solid var(--border0);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  padding: 16px 16px 12px;
}

.section{margin-top:14px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.footerline{margin-top:18px; opacity:.75}

.btn{
  appearance:none;
  border:1px solid var(--border0);
  background: rgba(16,22,36,.78);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition: transform .08s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{filter:brightness(1.06); border-color: var(--border1);}
.btn:active{transform: translateY(1px);}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.08);
}
.btn.gold{
  border-color: rgba(245,197,66,.55);
  background: linear-gradient(180deg, rgba(245,197,66,.95), rgba(245,197,66,.72));
  color: #12151b;
  box-shadow: 0 10px 24px rgba(245,197,66,.14);
}
.btn.gold:hover{filter:brightness(1.03);}


.badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px;height:22px;border-radius:6px;
  border:1px solid var(--border0);
  font-size:12px; font-weight:800;
}
.badge.ok{border-color:rgba(65,208,123,.5); color:var(--ok); background:rgba(65,208,123,.12)}

.tabs{display:flex; gap:10px; margin-top:16px}
.tabbtn{
  background:transparent;
  border:1px solid var(--border0);
  color:var(--muted);
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.tabbtn.active{
  color:var(--text);
  border-color:rgba(255,204,51,.45);
  box-shadow:0 0 20px rgba(255,204,51,.12);
}

.input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border0);
  background: rgba(12,16,26,.72);
  color:var(--text);
  outline:none;
}
.formrow{display:flex; gap:10px; align-items:center; margin-top:10px}
.err{color:var(--err)}

/* GrowID verification */
.verifyBox{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}
.verifyTitle{ font-weight: 800; margin-bottom: 6px; }
.verifyText{ line-height: 1.35; }
.verifySub{ margin-top: 6px; }
.hidden{display:none !important}

/* Redeem modal */
.modalOverlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:18px; z-index:50}
.modalCard{
  width:min(980px, 100%);
  max-height:calc(100vh - 60px);
  overflow:auto;
  background:var(--card2);
  border:1px solid var(--border0);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}
.modalTop{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.modalTitle{font-size:18px; font-weight:800}

/* Lock withdraw box (unlimited stock locks) */
.lockWithdraw{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(12,16,26,.55);
  border-radius:16px;
  padding:12px;
  margin: 8px 0 12px;
}
.lockWithdrawTop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.lockWithdrawTitle{font-weight:900}
.lockWithdrawRow{display:flex; gap:10px; align-items:center}
.lockWithdrawPreview {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.lockPrevItem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    font-weight: 700;
}

.lockPrevItem img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.notice{border:1px solid rgba(255,204,51,.25); background:rgba(255,204,51,.08); padding:10px 12px; border-radius:12px; margin:10px 0}
.shopgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
@media (max-width: 900px){ .shopgrid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 600px){ .shopgrid{grid-template-columns:1fr;} }
.shopItem{
  background: rgba(12,16,26,.72);
  border:1px solid var(--border0);
  border-radius:16px;
  padding:12px;
}
.shopRow{display:flex; gap:12px; align-items:center}
.shopIconWrap{position:relative; width:52px; height:52px; flex:0 0 52px}
.shopBorder{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; opacity:.95}
.shopIcon{position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; border-radius:10px}
.shopText{min-width:0}
.shopMeta{font-size:12px; color:var(--muted); margin-top:4px}
.shopName{font-weight:800}
.shopMeta{font-size:12px; color:var(--muted); margin-top:4px}
.shopActions{display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px}

.shopPrice{display:flex; align-items:center; gap:6px; font-weight:800}
.shopPriceIcon{width:18px; height:18px; object-fit:contain; flex:0 0 18px}

/* Coinflip full-page */
.coinflipPage{
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.cfTopBar{
  padding:10px;
  background: linear-gradient(180deg, rgba(11 12 21), rgba(11 12 21));
}
.cfTitle{display:flex; flex-direction:column; gap:4px; padding-left:5%}
.cfH1{font-size:26px; font-weight:900}
.cfSub{font-size:12px; color:var(--muted)}

.cfControls{
  margin-top:12px;
  display:flex; flex-wrap:wrap;
  gap:10px; align-items:center; justify-content:center;
}

.seg{
  display:flex; gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid var(--border0);
  background: rgba(12,16,26,.72);
}
.segBtn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
}
.segBtn.active{
  color:var(--text);
  background:rgba(255,204,51,.14);
  box-shadow: 0 0 18px rgba(255,204,51,.12);
}

.cfAmountWrap{
  display:flex; align-items:center; gap:8px;
  border-radius:12px;
  border:1px solid var(--border0);
  background: rgba(12,16,26,.72);
  padding:8px 10px;
}
.cfCoin {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex: 0 0 auto;
}
.cfAmount{
  width:180px;
  border:0; outline:0;
  background:transparent;
  color:var(--text);
  font-weight:800;
  font-size:14px;
}
.cfQuick{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.mini, .cfSelect{
  appearance:none;
  border:1px solid var(--border0);
  background: rgba(12,16,26,.72);
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
}
.mini:hover, .cfSelect:hover{filter:brightness(1.08)}
.cfSelect{color:var(--text); padding-right:12px}
.cfBody{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px}
@media (max-width: 820px){ .cfBody{grid-template-columns:1fr;} }

.cfSectionTitle{font-weight:900; font-size:14px; letter-spacing:.3px; text-transform:uppercase; display:flex; gap:10px; align-items:center; margin-bottom:10px}
.cfEmpty{color:var(--muted); padding:16px; border:1px dashed rgba(255,255,255,.12); border-radius:16px; margin-bottom:10px}

/* FIX: Ensure grid items don't overflow */
.cfGrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(460px, 1fr)); gap:14px}
@media (max-width: 520px){ .cfGrid{grid-template-columns:1fr;} }

.coinflipPage .gameCard{
  background: rgba(12,16,26,.72);
  border:1px solid var(--border0);
  border-radius:18px;
  padding:12px;
  position:relative;
  overflow:hidden;
  max-width:540px;
}
.gameCard:hover{filter:brightness(1.03)}

/* --- Coinflip game card V4 (CSGOEmpire-ish) --- */
#homeView .gameCard{padding:16px; border-radius:20px;}

/* FIX: Flexible layout instead of fixed pixels */
.gBody{
  display:grid;
  grid-template-columns: 1fr 140px 1fr; /* Flexible Sides, Fixed Center */
  justify-content:space-between;
  gap: 8px;
  align-items:stretch;
  margin-top:12px;
  min-height:150px;
}

.gCenter{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:100px; /* Reduced min-width */
  overflow: visible;
  align-self:stretch;
  height:100%;
  min-height:150px;
}
.gVs{
  font-weight:800;
  letter-spacing:.08em;
  opacity:.75;
  margin-bottom:8px;
}
.gCoin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* Frames are 640x640 in the sheet; render big enough to be readable */
    width: clamp(180px, 18vw, 300px);
    height: clamp(180px, 18vw, 300px);
    background-repeat: no-repeat;
    background-size: 7200% 100%;
    background-position: 0 0;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0;
    z-index: 50;
}

/* Show the in-card coin */
.gCoin.is-visible{ opacity:1; }

/* During the 3-2-1 countdown, keep coin visible but dimmed */
.gCoin.is-dim{ opacity:.25; }

/* Pick sheet by face */
.gCoin[data-face="heads"]{ background-image:url("/assets/coin/heads-spritesheet.png"); }
.gCoin[data-face="tails"]{ background-image:url("/assets/coin/tails-spritesheet.png"); }

@keyframes gCoinSprite{
  from { background-position: 0 0; }
  /* End at frame index 71 (last frame) */
  to { background-position: 100% 0; }
}

.gCountdown{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:42px;
  font-weight:1000;
  color:rgba(255,255,255,.95);
  text-shadow:0 12px 28px rgba(0,0,0,.75);
  pointer-events:none;
}
.gCountdown.show{ display:block; }

.pCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-self:center;
  gap:8px;
  border-radius:16px;
  min-height:150px;
  width:100%; /* Fill the grid cell */
  max-width:100%; /* No fixed 180px limit */
  overflow:hidden;
}
.pCard.p1{justify-self:start;}
.pCard.p2{justify-self:end;}

.pAvatar{
  width:70px;
  height:70px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#1c2a55,#0b1227);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  flex-shrink: 0; /* Prevent avatar squash */
}

.pAvatarImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.pAvatar.hasImg .pInitial{ opacity:0; }

.pInitial{font-weight:900; font-size:18px; color:rgba(255,255,255,.9)}
.pInfo{min-width:0; display:flex; flex-direction:column; gap:3px}
.pName{
    font-weight:900; 
    font-size:14px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    max-width:100%; /* Ensure text truncates if card is small */
    text-align:center;
}
.pSub{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

.pAmount{
  margin-top:6px;
  font-weight:900;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
}
.pAmount::before{content:"🪙"; opacity:.9}

.gCenterTop{font-weight:1000; letter-spacing:.6px}
.gCenterSub{font-size:12px; color:rgba(255,255,255,.55); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


.gBtns{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

/* Result styles */
.pCard.win{
  border-color:rgba(65,208,123,.45);
  box-shadow:0 0 0 1px rgba(65,208,123,.18) inset;
}
.pCard.lose{
  border-color:rgba(255,77,77,.45);
  box-shadow:0 0 0 1px rgba(255,77,77,.18) inset;
}
.pCard.faded{
  opacity:.35;
  filter:saturate(.7);
}

/* Amount color hints */
.pCard.win .pAmount{color:rgba(65,208,123,.95)}
.pCard.lose .pAmount{color:rgba(255,77,77,.95)}

/* Mobile */
@media (max-width: 720px){
  .cfGrid{grid-template-columns:1fr;}
  .gBody{grid-template-columns:1fr 0.5fr 1fr; gap:6px} /* Tighter on mobile */
  .pName{font-size:12px;}
  .pAvatar{width:50px; height:50px;} /* Smaller avatar on mobile */
}

.gTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.gTime{font-size:11px; color:var(--muted)}
.gBet{font-weight:900; font-size:14px; display:flex; gap:6px; align-items:center}

.tag{
  padding:5px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  font-size:11px; color:var(--muted);
}
.toast{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom:18px;
  background:rgba(10,16,36,.90);
  border:1px solid rgba(255,255,255,.10);
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  max-width:min(680px, calc(100vw - 24px));
  z-index:60;
}

/* Inline center coin (inside game card) */
.gLive{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.gCountdown{font-weight:900; font-size:22px; line-height:1; opacity:.95; text-shadow:0 6px 18px rgba(0,0,0,.55);}
.gLiveText{font-size:12px; opacity:.85; max-width:92px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Call Bot button pulse */
.callBotBtn {
  box-shadow: 0 0 15px rgba(255, 204, 51, 0.3);
  animation: botPulse 2s infinite;
  white-space: nowrap;
}

@keyframes botPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(255, 204, 51, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0); }
}

.gCenterSub {
  min-height: 24px; /* Pitää tilan vakaana vaikka teksti/nappi vaihtuisi */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------- My Profile / Stats modal ---------------- */
.modalBack{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:60;
}
.modal{
  width:min(860px, 100%);
  margin:0 auto;
  max-height:min(86vh, 780px);
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(13,20,38,.98), rgba(10,16,36,.96));
  border:1px solid var(--border0);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border0);
}
.modalTitle{font-weight:800; letter-spacing:.2px}
.modalBody{
  padding:14px;
  overflow:auto;
}

.profTopCard{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.profAv{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(180deg, #1c2a55, #0b1227);
  border:1px solid rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
}
.profTopMeta{min-width:0; flex:1}
.profGrowid{font-weight:900; font-size:16px; letter-spacing:.2px}
.profDiscord{font-size:12px; color:var(--muted); margin-top:2px}
.profLevelRow{margin-top:10px}
.profLevelMeta{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.profLevelNum{font-weight:900}
.profXpMeta{margin-left:auto}

.profSection{margin-top:14px}
.profSectionTitle{font-weight:800; margin-bottom:10px; color:#dfe6ff}

.profStatsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.stat{
  padding:10px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.statLabel{font-size:11px; color:var(--muted)}
.statValue{font-weight:900; margin-top:4px}

.statMoney{display:inline-flex; align-items:center; gap:6px}
.statCurIcon{width:16px; height:16px; image-rendering:auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));}

.tabs.small{margin-top:8px}
.tabs.small .tabbtn{padding:8px 10px; font-size:12px}

.histWrap{margin-top:10px}
.histTable{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.histRow{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.histWhen{font-size:11px; color:var(--muted)}
.histMain{min-width:0}
.histTitle{font-weight:800; font-size:13px}
.histSub{font-size:11px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.histAmt{font-weight:900}
.histAmt.pos{color:var(--ok)}
.histAmt.neg{color:var(--err)}

@media (max-width: 720px){
  .profStatsGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .histRow{grid-template-columns: 110px 1fr auto;}
}
@media (max-width: 420px){
  .profStatsGrid{grid-template-columns: 1fr;}
  .histRow{grid-template-columns: 1fr; gap:6px;}
  .histAmt{justify-self:start}
}


/* =========================
   Daily Cases modal (UI only)
   ========================= */
.dailyModal{ max-width: 920px; }

.dailyIntro{ margin-bottom: 10px; }
.dailyIntroTitle{ font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.dailyIntroText{ color: var(--muted); font-size: 13px; line-height: 1.35; }

.dailyWrap{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Left column as its own panel */
.dailyLeft{
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(700px 320px at 10% 0%, rgba(0,200,255,.10), transparent 55%),
    radial-gradient(700px 320px at 90% 20%, rgba(150,120,255,.12), transparent 55%),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.dailyMeta{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}

.dailyMeta .dailyName{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* Daily status badge as icon */
#dailyStatusBadge{
  padding: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#dailyStatusBadge img{
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  display:block;
}

.dailySub{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.dailyActions{ margin-top: 12px; display:flex; flex-direction:column; gap:8px; }

/* Slightly larger primary action inside the modal */
.dailyActions #dailyOpenBtn{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
}

.dailyRight{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dailyStage{
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dailyArrow{
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.85);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.dailyArrow:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.5); }
.dailyArrow:disabled{ opacity:.4; cursor:not-allowed; }


/* CSGO-style roulette (Daily Case opening) */
.dailyRoulette{
  width: 100%;
  max-width: 560px;
  margin: 0 auto 10px;
}

.dailyRouletteFull{
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
}

.dailyRouletteInner{
  position: relative;
  height: 118px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.dailyRouletteTrack{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 180px; /* breathing room so first/last don't clip when centered */
  transform: translateX(0);
  will-change: transform;
}
.dailyRollItem{
  /* Roll strip: icons only (no cards) */
  width: 80px;
  height: 80px;
  border-radius: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}

.dailyItemFrame{
  width: 70px;
  height: 70px;
  position: relative;
  display: grid;
  place-items: center;
}

.dailyItemBorder{
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.dailyItemIcon{
  width: 70px;
  height: 70px;
  object-fit: contain;
  image-rendering: pixelated;
  display:block;
}

.dailyItemPlaceholder{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.25);
}
.dailyRollName{
  font-weight: 800;
  font-size: 12px;
  line-height: 1.15;
  max-height: 2.3em;
  overflow: hidden;
}
.dailyRollSub{
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.dailyRouletteMarker{
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-1px);
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  pointer-events: none;
}
.dailyRouletteMask{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.9) 100%);
}
.dailyRouletteWin{
  margin-top: 8px;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
}
.dailyRouletteWin b{ font-weight: 900; }

.dailyCard{
  width: 100%;
  max-width: 560px;
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(800px 320px at 80% 0%, rgba(150,120,255,.14), transparent 55%),
    radial-gradient(800px 320px at 10% 80%, rgba(0,200,255,.10), transparent 55%),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.38);
}

.dailyImgWrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
}
.dailyImg{
  display:block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  padding: 10px;
  opacity: .95;
}

.dailyLock{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
}
.dailyLockInner{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
  color: rgba(255,255,255,.92);
}


.dailyCardFootTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dailyCardActions{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
}

.dailyCardActions #dailyHint{
  text-align: right;
  max-width: 320px;
}
.dailyCardFoot{ margin-top: 10px; }
.dailyCardTitle{ font-weight: 800; font-size: 16px; }
.dailyDots{
  display:flex;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.dailyDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.dailyDot.on{ background: rgba(255,255,255,.55); }

/* Daily dots under the left (case list) column */
.dailyDotsLeft{
  justify-content: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}


@media (max-width: 900px){
  .dailyWrap{ grid-template-columns: 1fr; }
  .dailyRight{ grid-template-columns: 44px 1fr 44px; }
}

.dailyContents {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.dailyItems {
    margin-top: 8px;
    max-height: 260px;
    overflow: auto;
    padding-right: 6px;
}

/* Nicer scrollbar (webkit only, harmless elsewhere) */
.dailyItems::-webkit-scrollbar{ width: 10px; }
.dailyItems::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
.dailyItems::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; border: 2px solid rgba(0,0,0,.0); }
.dailyItems::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

.dailyItemRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    margin-bottom: 8px;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.dailyItemRow:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

.dailyItemIcon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.06);
}

.dailyItemMain {
    flex: 1;
    min-width: 0;
}

.dailyItemName {
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dailyItemChance {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}

.dailyItemPct {
    font-weight: 700;
    font-size: 12px;
    opacity: .85;
}

/* --------------------
   New Dashboard (csgoem-ish)
-------------------- */

.dashShell{
  display:block;
  margin-top: 14px;
}


.chatTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding-bottom: 12px; border-bottom:1px solid var(--border0); }
.chatTitle{ font-weight: 800; letter-spacing: .2px; }
.chatStatus{ font-size: 12px; opacity: .85; }
.chatBody{padding:12px; overflow:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:8px;}
.chatBubble{ padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.06); }
.chatInput{display:flex; gap:8px; padding:12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.06);}
.chatMenuWrap{ position:relative; display:flex; align-items:center; }
.chatMenuBtn{
  width: 40px; height: 40px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#ffd76a;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
.chatMenuBtn:hover{ background:rgba(255,255,255,.07); }
.chatMenuBtn:active{ transform: translateY(1px); }

.chatMenu{
  position:absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 140px;
  background: rgba(12,14,18,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 6px;
  z-index: 2000;
}
.chatMenuItem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-weight:700;
}
.chatMenuItem:hover{ background: rgba(255,255,255,.06); }

.chatInputBox{flex:1; min-width:0; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); color:#fff; padding:10px 10px; outline:none;}
.chatInputBox:focus{outline:none; border-color: rgba(245,197,66,.35); box-shadow: 0 0 0 3px rgba(245,197,66,.10); }


.dashMain{ display:flex; flex-direction:column; gap: 16px; }

/* Hero */
.hero{
  position: relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(900px 320px at 80% 20%, rgba(150,120,255,.25), transparent 60%),
              radial-gradient(900px 320px at 10% 80%, rgba(0,200,255,.16), transparent 60%),
              rgba(255,255,255,.03);
  min-height: 190px;
}

.heroSlides{ position:relative; min-height: 190px; }
.heroSlide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, rgba(0,0,0,.55)),
    var(--heroImg);
  background-size: cover;
  background-position: center;
}
.heroSlide.isActive{ opacity:1; pointer-events:auto; }

.heroInner{ padding: 22px 22px 46px; max-width: 620px; }
.heroKicker{ font-size: 12px; opacity:.8; text-transform: uppercase; letter-spacing: .14em; }
.heroH1{ font-size: 28px; font-weight: 900; margin-top: 6px; line-height: 1.05; }
.heroP{ margin-top: 8px; opacity:.85; }
.heroActions{ margin-top: 14px; display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.heroPill{ font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); }

.heroNav{
  position:absolute;
  top:50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  display:grid; place-items:center;
  z-index: 4;
}
.heroNav:hover{ background: rgba(0,0,0,.5); }
.heroPrev{ left: 12px; }
.heroNext{ right: 12px; }

.heroDots{
  position:absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 10px;
  display:flex; gap: 8px;
  z-index: 5;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}
.heroDots .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 0;
}
.heroDots .dot.isActive{ background: rgba(255,255,255,.95); }

.dashRowTop{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.dashH2{ font-weight: 900; font-size: 16px; letter-spacing:.2px; }
.dashHint{ font-size: 12px; }

#homeView .gamesGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

/* Keep tiles readable on very narrow widths */
@media (max-width: 420px){
  .gamesGrid{ grid-template-columns: 1fr; }
}

#homeView .gameCard{
  position:relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 12px;
  overflow:hidden;
  text-align:left;

  /* Prevent "zoomed" look on tablet/mobile by keeping a consistent tile shape */
  height: auto;
  aspect-ratio: 1 / 1; /* square tiles like BetDice */
}

#homeView button.gameCard{ cursor:pointer; }
#homeView button.gameCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
}

#homeView .gamesGrid .gameCard .gcBg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--gcImg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* fit 100% (no crop) */
    background-color: rgba(0,0,0,.22);
    opacity: .95;
}

.gameCard > :not(.gcBg){
  position: relative;
  z-index: 2;
}
.gcBg{
  position:absolute;
  inset:-2px;
  z-index: 1;
}
.gcTop{ display:flex; flex-direction:column; gap: 4px; }
.gcTitle{ font-weight: 900; font-size: 16px; }
.gcSub{ font-size: 11px; }
.gcGo{ position:absolute; right: 14px; bottom: 12px; font-weight: 800; opacity:.9; }

.lockedCard{
  cursor: not-allowed;
}
.lockedCard::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(10,10,18,.55);
  backdrop-filter: blur(6px);
  border-radius: inherit;
  z-index: 3;
}
.lockedCard > *{ position:relative; z-index: 4; }
.gcLock{ display:flex; align-items:center; gap: 8px; margin-top: 10px; font-weight: 800; }
.lockIc{ filter: drop-shadow(0 0 10px rgba(0,0,0,.45)); }

/* Tooltip via title-like attribute */
.lockedCard[data-tooltip]{ position:relative; }
.lockedCard[data-tooltip]:hover::before{
  content: attr(data-tooltip);
  position:absolute;
  top: -10px;
  right: 12px;
  transform: translateY(-100%);
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  z-index: 10;
}

/* Header buttons alignment */
#userBox .btn{ white-space: nowrap; }

/* OVERRIDE CSS FOR GAME CARDS/BANNERS */
/* ===== OUR GAMES (CSS-only rework) ===== */

/* Header */
.dashRowTop .dashH2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .6px;
}

/* Grid: saman kokoiset kortit */
#homeView .gamesGrid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch;
}

    /* Card base (button + div) */
    .gamesGrid .gameCard {
        position: relative;
        width: 200px;            /* vähän kapeampi */
        aspect-ratio: 1 / 1.15;  /* korkeampi -> kuva näkyy paremmin */
        height: auto;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(10,12,16,.65);
        box-shadow: 0 14px 40px rgba(0,0,0,.35);
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        cursor: pointer;
        transform: translateZ(0);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
    }

        /* Hover only for ACTIVE (ei lukituilla) */
        .gamesGrid .gameCard:not(.lockedCard):hover {
            transform: translateY(-6px);
            border-color: rgba(255,255,255,.18);
            box-shadow: 0 18px 55px rgba(0,0,0,.45);
        }

        /* Background image layer */
        /* Background image layer (FULL COVER, NO OVERLAY) */
        .gamesGrid .gameCard .gcBg {
            position: absolute;
            top: 0;
  left: 0;
            background-image: var(--gcImg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover; /* <-- täyttää koko kortin */
            opacity: 1;
            filter: none;
        }

        /* IMPORTANT: disable overlay completely */
        .gamesGrid .gameCard .gcBg::after {
        display: none !important;
        content: none !important;
        }

        /* Bottom text block */
        .gamesGrid .gameCard .gcTop {
            position: relative;
            z-index: 2;
            padding: 18px 18px 14px;
            text-align: center;
        }

        /* Title + subtitle */
        .gamesGrid .gameCard .gcTitle {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: .8px;
            text-transform: uppercase;
            line-height: 1.05;
            text-shadow: 0 10px 22px rgba(0,0,0,.65);
        }

        .gamesGrid .gameCard .gcSub {
            margin-top: 6px;
            font-size: 12px;
            letter-spacing: .7px;
            text-transform: uppercase;
            opacity: .85;
        }

        /* “Open →” / CTA */
        .gamesGrid .gameCard .gcGo {
            position: relative;
            z-index: 2;
            margin: 0 18px 16px;
            padding: 10px 12px;
            border-radius: 12px;
            text-align: center;
            font-weight: 800;
            letter-spacing: .4px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.10);
            backdrop-filter: blur(6px);
        }

        .gamesGrid .gameCard:not(.lockedCard):hover .gcGo {
            background: rgba(255,255,255,.14);
            border-color: rgba(255,255,255,.18);
        }

    /* LOCKED cards: pysyy lukittuna + ei hover “button” fiilistä */
    .gamesGrid .lockedCard {
        cursor: not-allowed;
        filter: saturate(.55) brightness(.90);
    }

        .gamesGrid .lockedCard:hover {
            transform: none;
            box-shadow: 0 14px 40px rgba(0,0,0,.35);
            border-color: rgba(255,255,255,.10);
        }

        /* Locked bottom badge */
        .gamesGrid .lockedCard .gcLock {
            position: relative;
            z-index: 2;
            margin: 0 18px 16px;
            padding: 10px 12px;
            border-radius: 12px;
            text-align: center;
            font-weight: 850;
            letter-spacing: .4px;
            background: rgba(0,0,0,.35);
            border: 1px solid rgba(255,255,255,.10);
            backdrop-filter: blur(6px);
        }

        .gamesGrid .lockedCard .lockIc {
            margin-right: 8px;
        }

/* ---------------- Leaderboard ---------------- */
.lbTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.lbTitle{ flex:1; text-align:center; }
.lbH1{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.lbSub{ font-size:12px; margin-top:2px; }

.lbPodium{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  margin: 14px 0 18px;
}
.lbPodiumCard{
  position:relative;
  border-radius:18px;
  padding:14px 14px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  overflow:hidden;
  text-align:center;
}
.lbPodiumCard.r1{
  transform: translateY(-6px);
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.09);
}
.lbRankBadge{
  position:absolute;
  top:10px;
  left:10px;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
.lbCrown{ margin-left:4px; }
.lbAvatar{
  width:72px; height:72px;
  margin: 10px auto 10px;
  border-radius:18px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.lbAvatar img{ width:100%; height:100%; object-fit:cover; }
.lbInitial{ font-weight:800; opacity:0.7; }
.lbName{
  font-weight:800;
  font-size:14px;
  margin-bottom:10px;
}
.lbMeta{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
  font-size:12px;
}
.lbMeta > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:12px;
}
.lbMetaK{ opacity:0.75; }
.lbMetaV{ font-weight:700; }

.lbTableWrap{
  border-radius:18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
}
.lbTableHead{
  display:grid;
  grid-template-columns: 1.3fr 0.6fr 0.6fr 0.5fr;
  gap:10px;
  padding:12px 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.02em;
  opacity:0.9;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lbRows{ display:flex; flex-direction:column; }
.lbRow{
  display:grid;
  grid-template-columns: 1.3fr 0.6fr 0.6fr 0.5fr;
  gap:10px;
  padding:12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lbRow:last-child{ border-bottom:none; }
.lbPlayerCell{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.lbPAvatar{
  width:34px; height:34px;
  border-radius:10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.lbPAvatar img{ width:100%; height:100%; object-fit:cover; }
.lbPInitial{ font-weight:800; opacity:0.7; font-size:12px; }
.lbPInfo{ min-width:0; }
.lbPName{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lbPSub{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lbRankSmall{
  flex:0 0 auto;
  margin-right:10px;
  font-weight:800;
  font-size:12px;
  opacity:0.7;
}
.lbCell{ display:flex; align-items:center; }
.lbColPlayer{ justify-content:flex-start; }
.mono{ font-variant-numeric: tabular-nums; }
.pos{ color: #4dff9a; }
.neg{ color: #ff5a5a; }

.lbHint{ margin-top:10px; }

@media (max-width: 820px){
  .lbPodium{ grid-template-columns: 1fr; }
  .lbPodiumCard.r1{ transform:none; }
  .lbTableHead, .lbRow{
    grid-template-columns: 1fr 0.9fr 0.9fr 0.7fr;
  }
}


/* Profile modal - Settings */
.profSettingsCard{margin-top:10px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.15);}
.profSettingsCard .formrow{margin-top:10px;}
.profVerifyHint{margin-top:10px;}



/* ------------------------------------------------------------
   Tight + centered Profile & Daily Cases modals (2026-02-12)
   - Reduce oversized cards
   - Remove empty side space
   - Keep content visually centered
------------------------------------------------------------ */

#profileModal.modalBack,
#dailyModal.modalBack{
  padding: 12px;
}

#profileModal .modal{
  width: min(720px, 100%);
  max-height: min(82vh, 680px);
}

#dailyModal .modalCard.dailyModal{
  width: min(840px, 100%);
  max-height: min(82vh, 700px);
}

#profileModal .modalBody,
#dailyModal .modalBody{
  padding: 12px;
}

/* Profile modal: tighten top card + stats */
#profileModal .profTopCard{
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
}
#profileModal .profAv{
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
#profileModal .profGrowid{ font-size: 15px; }
#profileModal .profDiscord{ font-size: 11px; }
#profileModal .profLevelRow{ margin-top: 8px; }
#profileModal .profSection{ margin-top: 10px; }
#profileModal .profSectionTitle{ margin-bottom: 8px; }
#profileModal .profStatsGrid{ gap: 8px; }
#profileModal .stat{
  padding: 9px 9px;
  border-radius: 13px;
}
#profileModal .statLabel{ font-size: 10.5px; }

/* Daily modal: smaller, more centered layout */
#dailyModal .dailyIntro{ margin-bottom: 10px; }
#dailyModal .dailyWrap{
  gap: 14px;
  align-items: center;
  grid-template-columns: 1fr 0.95fr;
}
#dailyModal .dailyLeft{
  padding: 12px;
  border-radius: 16px;
}
#dailyModal .dailyName{ font-size: 18px; }
#dailyModal .dailySub{ font-size: 12px; }
#dailyModal .dailyMetaRow{ margin-top: 8px; }
#dailyModal .dailyMeta{ font-size: 11px; }
#dailyModal .dailyActions{ margin-top: 10px; }
#dailyModal .dailyActions .btn{
  padding: 10px 12px;
  min-height: 38px;
}

#dailyModal .dailyCard{
  max-width: 520px;
  padding: 12px;
  border-radius: 16px;
}
#dailyModal .dailyStage{ max-width: 520px; }
#dailyModal .dailyRoulette{ max-width: 520px; }
#dailyModal .dailyRouletteInner{
  height: 108px;
  border-radius: 14px;
}
#dailyModal .dailyArrow{
  width: 38px;
  height: 38px;
  font-size: 22px;
}

/* On smaller screens, stack cleaner + reduce max widths */
@media (max-width: 860px){
  #dailyModal .modalCard.dailyModal{ width: min(720px, 100%); }
}
@media (max-width: 740px){
  #dailyModal .dailyWrap{ grid-template-columns: 1fr; }
  #dailyModal .dailyRight{ grid-template-columns: 40px 1fr 40px; }
  #dailyModal .dailyStage,
  #dailyModal .dailyCard,
  #dailyModal .dailyRoulette{ max-width: 100%; }
}


/* ------------------------------------------------------------
   FIX: Center profile/daily modal panels
   - .modal is used as an overlay for redeemModal, but inside
     #profileModal/#dailyModal it is the PANEL. Override here so
     the panel isn't position:fixed inset:0 (which pushes content to top).
------------------------------------------------------------ */
#profileModal > .modal,
#dailyModal > .modal{
  position:relative;
  inset:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:var(--card2);
  border:1px solid var(--border0);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:0;
  width: min(900px, 100%);
  max-height: min(86vh, 760px);
  overflow:hidden;
}

/* Keep inner scrolling inside modal body, not the whole panel */
#profileModal .modalBody,
#dailyModal .modalBody{
  overflow:auto;
}

/* Slightly tighter overlay padding so it stays centered on small screens */
#profileModal.modalBack,
#dailyModal.modalBack{
  padding: 18px;
}

.dailyRoulette.idle .dailyRouletteTrack{
  transition: none !important;
}


/* --- Staff Panel --- */
.staffGrid{ display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .staffGrid{ grid-template-columns: 1.2fr .8fr; } .staffAudit{ grid-column: 1 / -1; } }
.staffCard{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; }
.staffLabel{ font-weight: 700; margin-bottom: 8px; }
.staffRow{ display:flex; gap:8px; align-items:center; }
.staffRow .input{ flex:1; }
.staffResults{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.staffUser{ display:flex; justify-content:space-between; gap:10px; padding:10px; border-radius:12px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.06); }
.staffUserMeta{ display:flex; flex-direction:column; gap:2px; }
.staffUserActions{ display:flex; flex-direction:column; gap:6px; min-width: 220px; }
.staffUserActions .staffRow{ justify-content:flex-end; }
.staffAuditList{ margin-top:10px; display:flex; flex-direction:column; gap:8px; max-height: 320px; overflow:auto; }
.staffAuditItem{ padding:10px; border-radius:12px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.06); }
.err{ color: #ff6b6b; }


/* =========================
   Top 1–3 Leaderboard Frames (Podium)
   Spec:
   - 1x thick gradient frame (static)
   - 1x thin rotating gradient ring (fast)
   - 1x slightly bigger + thicker rotating ring (slow)
   - Colors: Top1 gold/orange, Top2 violet, Top3 blue
   NOTE: Effects are constrained to the frame/ring only (no card gradients over avatar).
   ========================= */

@keyframes lbRingCW { from{ transform: rotate(0deg); } to{ transform: rotate(360deg);} }
@keyframes lbRingCCW { from{ transform: rotate(0deg); } to{ transform: rotate(-360deg);} }
@keyframes lbShineSweep { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.lbPodium .lbTopCard{
  text-align:left;
  padding:14px 14px 12px;
}

.lbPodium .lbTopInner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.lbPodium .lbTopGlow{
  position:absolute;
  inset:-40px -20px auto -20px;
  height:120px;
  filter: blur(40px);
  opacity:0.55;
  z-index:0;
  pointer-events:none;
}

/* Keep the card glow per rank (background only; does not overlay avatar) */
.lbPodium .lbTopCard.t3 .lbTopGlow{ background:#3aa2ff; opacity:0.55; }
.lbPodium .lbTopCard.t2 .lbTopGlow{ background:#a855ff; opacity:0.60; }
.lbPodium .lbTopCard.t1 .lbTopGlow{ background:#ffb347; opacity:0.70; }

.lbPodium .rank-frame{
  position:relative;
  width: 84px;
  height: 84px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible; /* rings can extend outside */
}

/* 1) Thick static frame (hollow center) */
.lbPodium .rank-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:5px;                 /* THICKNESS */
  background: var(--lbThickGrad);
  pointer-events:none;
  z-index:3;

  /* Hollow center mask */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Top1 extra: subtle animated shine on the THICK frame only (still hollow) */
.lbPodium .rank-frame.top1::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:5px;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0.0) 0deg,
      rgba(255,255,255,0.30) 22deg,
      rgba(255,255,255,0.0) 55deg,
      rgba(255,255,255,0.0) 360deg);
  opacity:0.65;
  pointer-events:none;
  z-index:4;
  animation: lbShineSweep 3.8s linear infinite;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* 2) Outer ring: bigger + thicker + slower rotation */
.lbPodium .mythic-square{
  position:absolute;
  inset:-2px;                  /* BIGGER */
  border-radius:14px;
  padding:4px;                 /* THICKER ring */
  background: var(--lbRingOuterGrad);
  pointer-events:none;
  z-index:6;
  animation: lbRingCW var(--lbOuterSpeed, 6.2s) linear infinite;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* 3) Inner ring: thinner + faster rotation */
.lbPodium .mythic-square-2{
  position:absolute;
  inset:6px;                   /* SMALLER */
  border-radius:10px;
  padding:2px;                 /* THINNER ring */
  background: var(--lbRingInnerGrad);
  pointer-events:none;
  z-index:7;
  animation: lbRingCCW var(--lbInnerSpeed, 3.0s) linear infinite;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Stronger glow on rings, WITHOUT tinting the avatar (no blend modes) */
.lbPodium .rank-frame .mythic-square,
.lbPodium .rank-frame .mythic-square-2{
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.10));
}

/* Per-rank color + intensity */
.lbPodium .rank-frame.top1{
  --lbThickGrad: linear-gradient(135deg, #ffb347 0%, #ffd56a 35%, #ff7a18 70%, #ffb347 100%);
  --lbRingOuterGrad: conic-gradient(from 0deg, #fff3b0, #ffb347, #ff7a18, #ffd56a, #fff3b0);
  --lbRingInnerGrad: conic-gradient(from 0deg, rgba(255,255,255,.9), #ffd56a, #ffb347, rgba(255,255,255,.9));
  --lbOuterSpeed: 6.8s;
  --lbInnerSpeed: 2.6s;
}
.lbPodium .rank-frame.top1::before{
  filter: drop-shadow(0 0 14px rgba(255,179,71,.35)) drop-shadow(0 0 22px rgba(255,122,24,.20));
}
.lbPodium .rank-frame.top1 .mythic-square{
  filter: drop-shadow(0 0 16px rgba(255,179,71,.38)) drop-shadow(0 0 26px rgba(255,122,24,.22));
}
.lbPodium .rank-frame.top1 .mythic-square-2{
  filter: drop-shadow(0 0 12px rgba(255,213,106,.34)) drop-shadow(0 0 22px rgba(255,255,255,.18));
}

.lbPodium .rank-frame.top2{
  --lbThickGrad: linear-gradient(135deg, #7b2cff 0%, #b65cff 40%, #ff2aa1 75%, #7b2cff 100%);
  --lbRingOuterGrad: conic-gradient(from 0deg, #e7b6ff, #a855ff, #ff2aa1, #7b2cff, #e7b6ff);
  --lbRingInnerGrad: conic-gradient(from 0deg, rgba(255,255,255,.75), #b65cff, #7b2cff, rgba(255,255,255,.75));
  --lbOuterSpeed: 7.4s;
  --lbInnerSpeed: 3.0s;
}
.lbPodium .rank-frame.top2::before{
  filter: drop-shadow(0 0 12px rgba(168,85,255,.30)) drop-shadow(0 0 18px rgba(255,42,161,.16));
}
.lbPodium .rank-frame.top2 .mythic-square{
  filter: drop-shadow(0 0 14px rgba(168,85,255,.32));
}
.lbPodium .rank-frame.top2 .mythic-square-2{
  filter: drop-shadow(0 0 10px rgba(255,42,161,.22));
}

.lbPodium .rank-frame.top3{
  --lbThickGrad: linear-gradient(135deg, #2ef2ff 0%, #3aa2ff 45%, #2b6cff 80%, #2ef2ff 100%);
  --lbRingOuterGrad: conic-gradient(from 0deg, #c9f7ff, #2ef2ff, #3aa2ff, #2b6cff, #c9f7ff);
  --lbRingInnerGrad: conic-gradient(from 0deg, rgba(255,255,255,.70), #2ef2ff, #2b6cff, rgba(255,255,255,.70));
  --lbOuterSpeed: 8.2s;
  --lbInnerSpeed: 3.4s;
}
.lbPodium .rank-frame.top3::before{
  filter: drop-shadow(0 0 12px rgba(46,242,255,.26)) drop-shadow(0 0 18px rgba(58,162,255,.14));
}
.lbPodium .rank-frame.top3 .mythic-square{
  filter: drop-shadow(0 0 12px rgba(46,242,255,.26));
}
.lbPodium .rank-frame.top3 .mythic-square-2{
  filter: drop-shadow(0 0 10px rgba(43,108,255,.20));
}

/* Ensure the avatar is above the THICK frame background (frame is hollow anyway) */
.lbPodium .lbTopAvatar{ position:relative; z-index:8; }
/* Avatar inside the frame */
.lbPodium .lbTopAvatar{
  position:relative;
  z-index:2;
  width:70px; height:70px;
  border-radius:10px;
  overflow:hidden;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lbPodium .lbTopAvatar img{
  width: 91px;
  height: 91px;
  object-fit: cover;
  object-position: center bottom;
}

/* Info under avatar */
.lbPodium .lbTopInfo{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.lbPodium .lbTopRank{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:8px;
  background: rgba(173,143,122,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
.lbPodium .lbTopCard.t2 .lbTopRank{ background: rgba(138,167,255,0.25); }
.lbPodium .lbTopCard.t1 .lbTopRank{ background: rgba(255,58,168,0.22); }

.lbPodium .lbTopName{
  font-weight:800;
  font-size:14px;
  letter-spacing:-0.02em;
}
.lbPodium .lbTopHr{
  width:100%;
  border:none;
  border-top:1px solid rgba(255,255,255,0.08);
  margin:2px 0 0;
}

.lbPodium .lbTopStat{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
}
.lbPodium .lbTopStat2{
  padding-top:8px;
  font-size:11px;
  opacity:0.65;
}

@media (max-width: 700px){
  .lbPodium{ grid-template-columns: 1fr; }
  .lbPodium .lbTopInner{ flex-direction:row; justify-content:flex-start; }
  .lbPodium .lbTopInfo{ align-items:flex-start; }
  .lbPodium .lbTopHr{ display:none; }
  .lbPodium .lbTopCard.r1{ transform:none; }
}



/* ---- Route styling (SPA pages) ---- */
body[data-route="withdraw"] #redeemModal,
body[data-route="daily-cases"] #dailyModal,
body[data-route="staff"] #staffModal{
  position:static;
  inset:auto;
  background:transparent;
  display:block;
  padding:0;
  z-index:auto;
}

body[data-route="withdraw"] #redeemModal{ align-items:stretch; justify-content:stretch; }
body[data-route="withdraw"] #redeemModal .modalCard{
  margin:0 auto;
  max-height:none;
}

body[data-route="daily-cases"] #dailyModal .modal,
body[data-route="staff"] #staffModal .modal{
  position:relative;
  inset:auto;
  display:block;
  padding:0;
  background:var(--card2);
  border:1px solid var(--border0);
  border-radius:18px;
  box-shadow:var(--shadow);
  width:min(980px, 100%);
  margin:0 auto;
}

body[data-route="daily-cases"] #dailyModal .modal{ max-height:none; overflow:visible; }
body[data-route="staff"] #staffModal .modal{ max-height:none; overflow:visible; }

.bpIcon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* --- Modal overlay safety net (prevents daily/withdraw/staff modals from dropping to page bottom) --- */
.modalBack{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.55) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  z-index:9999 !important;
}
.modalBack > .modal{
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  max-height:calc(100vh - 60px) !important;
  overflow:hidden !important;
}


/* --- Unified modal system (Phase B clean fix) --- */
.hidden{ display:none !important; }

.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}

.modalCard{
  position:relative;
}

/* Any legacy .modal class should not act as an overlay anymore (we don't use it) */
.modal{
  position:relative;
  inset:auto;
}

/* Daily + Profile cards sizing */
#dailyModal .modalCard.dailyModal{
  width: min(840px, 100%);
  max-height: min(82vh, 700px);
}

#profileModal .modalCard.profileModalCard{
  width:min(860px, 100%);
  max-height:min(86vh, 780px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}



/* Daily Cases full-page (match Coinflip layout) */
#dailyCasesView{
  width: min(1100px, 100%);
  margin: 18px auto;
}
#dailyCasesView .dailyPageBody{
  padding: 14px 16px 18px;
}


/* Currency dropdown (header balance pill) */
.currencyWrap{ position:relative; display:flex; align-items:center; }
.balancepill{ cursor:pointer; }
.bpCaret{ font-size:12px; opacity:.8; margin-left:2px; color: white;}

.currencyMenu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10,16,36,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  z-index: 1000;
}

.currencyItem{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:0;
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.currencyItem:hover{ background: rgba(255,255,255,.06); }
.currencyIcon{ width:18px; height:18px; image-rendering: pixelated; }
.currencyName{ font-weight:700; letter-spacing:.2px; }
.currencyAmt{ margin-left:auto; opacity:.85; font-variant-numeric: tabular-nums; }

.gBet .gIcon{ width:16px; height:16px; image-rendering: pixelated; opacity:.95; }




/* --- Coinflip reliability: ensure center layer can sit above player cards --- */
.gBody{ position: relative; overflow: visible; }
.gCenter{ z-index: 10; isolation: isolate; }
.pCard{ position: relative; z-index: 1; }


.mainRoot{ background: transparent; border: none; box-shadow:none; border-radius:0; padding:0; }


@media (max-width: 900px){
  .top .pageRow{ position: static; }
  .centerBox{ position: static; left:auto; transform:none; width:100%; max-width:none; }
}


.heroTwinWrap{ position: relative; }
.heroTwin{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px){
  .heroTwin{ grid-template-columns: 1fr; }
}
.heroTwinWrap .heroNav{ position:absolute; top:50%; transform: translateY(-50%); z-index: 6; }
.heroTwinWrap .heroPrev{ left: 10px; }
.heroTwinWrap .heroNext{ right: 10px; }


/* --- Sidebar Chat (live) --- */
.chatRail{ display:flex; flex-direction:column; height:100%; min-height:420px; }
.chatRail .chatTop{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; border-bottom:1px solid rgba(255,255,255,.06);}
.chatRail .chatTitle{ font-weight:700; letter-spacing:.2px; }
.chatRail .chatStatus{ font-size:12px; opacity:.85; display:flex; align-items:center; gap:8px; }
.chatRail .chatStatus .dot{ width:7px; height:7px; border-radius:99px; background:rgba(80,255,160,.9); box-shadow:0 0 0 3px rgba(80,255,160,.12); display:inline-block; }

.chatBody{ padding:12px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:8px; }
.chatMsg{ display:flex; gap:10px; align-items:flex-start; }
.chatAvatar{ width:28px; height:28px; border-radius:10px; flex:0 0 auto; object-fit:cover; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.chatBubble{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:8px 10px; flex:1; min-width:0; }
.chatMeta{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.chatNameBtn{ background:none; border:0; padding:0; color:inherit; font-weight:700; cursor:pointer; }
.chatNameBtn:hover{ text-decoration:underline; }
.chatTime{ font-size:11px; opacity:.6; margin-left:auto; }
.chatText{ font-size:13px; line-height:1.25rem; word-wrap:break-word; overflow-wrap:anywhere; }
.chatBadge{ font-size:10px; padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); font-weight:700; letter-spacing:.3px; opacity:.95; }
.chatBadge.mod{ background:rgba(80,160,255,.10); border-color:rgba(80,160,255,.28); }
.chatBadge.staff{ background:rgba(255,200,80,.10); border-color:rgba(255,200,80,.28); }

.chatActions{ display:flex; gap:8px; }
.chatDelBtn{ background:none; border:0; cursor:pointer; opacity:.7; font-size:14px; }
.chatDelBtn:hover{ opacity:1; }

.chatInput{ display:flex; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.06); }
.chatInputBox{ flex:1; min-width:0; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); color:#fff; padding:10px 10px; outline:none; }
.chatInputBox:focus{ border-color:rgba(140,170,255,.45); box-shadow:0 0 0 4px rgba(140,170,255,.12); }
.chatSendBtn{padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-weight:700;}
.chatSendBtn:hover{ background:rgba(255,255,255,.10); }
.chatSendBtn:disabled{ opacity:.5; cursor:not-allowed; }

.profileModal{ max-width:420px; width:92vw; }
.profileTop{ display:flex; gap:14px; align-items:center; padding:10px 4px 6px; }
.profileAvatar{ width:54px; height:54px; border-radius:16px; object-fit:cover; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
.profileGrowid{ font-size:18px; font-weight:800; }
.profileStats{ margin-top:10px; padding:10px 4px 2px; }
.profileStatsTitle{ font-weight:800; opacity:.9; margin-bottom:8px; }
.statRow{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.statRow:last-child{ border-bottom:0; }
.chatStatus.offline .dot{ background:rgba(255,100,100,.9); box-shadow:0 0 0 3px rgba(255,100,100,.12); }


/* ===== CHAT LAYOUT HARD FIX ===== */

.chatRail {
    display: flex;
    flex-direction: column;
    min-height: 0; /* <-- TÄMÄ PUUTTUI */
}

.chatTop {
    flex: 0 0 auto;
    padding: 14px;
}

.chatBody {
    flex: 1 1 auto;
    min-height: 0; /* <-- tärkein */
    overflow: auto;
}

.chatInput {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
}


/* ===============================
   PREMIUM CHAT POLISH
   =============================== */

.chatRail {
    backdrop-filter: blur(8px);
    border-right: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 20px 50px rgba(0,0,0,.55);
}

/* TOP BAR */

/* CHAT BODY */
.chatBody {
    scroll-behavior: smooth;
    padding: 12px;
    gap: 10px;
}

    /* smooth scrollbar */
    .chatBody::-webkit-scrollbar {
        width: 6px;
    }

    .chatBody::-webkit-scrollbar-track {
        background: transparent;
    }

    .chatBody::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 999px;
    }

        .chatBody::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,.22);
        }

/* MESSAGE BUBBLE */
.chatBubble {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    transition: all .15s ease;
}

.chatMsg:hover .chatBubble {
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.12);
}

/* NAME */
.chatNameBtn {
    font-weight: 700;
    opacity: .95;
}

    .chatNameBtn:hover {
        opacity: 1;
    }

/* BADGES */
.chatBadge {
    font-size: 10px;
    letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: 999px;
}

/* INPUT AREA */


/* INPUT FIELD */
.chatInputBox {
    transition: all .18s ease;
}

    .chatInputBox:focus {
        border-color: rgba(140,170,255,.55);
        box-shadow: 0 0 0 4px rgba(140,170,255,.14), 0 0 20px rgba(100,120,255,.20);
    }

/* SEND BUTTON */
.chatSendBtn {
    transition: all .15s ease;
}

    .chatSendBtn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.12);
    }

    .chatSendBtn:active {
        transform: translateY(0);
    }

/* STATUS DOT SMOOTH */
.chatStatus .dot {
    animation: pulseDot 2.2s infinite;
}

@keyframes pulseDot {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.25);
        opacity: .6;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}



/* =========================
   Daily Cases (Grid + Popup)
   ========================= */
#dailyCasesView .dailyGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:14px;
  padding:10px 4px 0;
}
.dailyCaseTile{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(20,26,44,.85), rgba(10,12,20,.78));
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  padding:12px;
  min-height:210px;
  display:flex;
  flex-direction:column;
  gap:10px;

  color: rgba(255,255,255,.92);
}
.dailyCaseTile:hover{ border-color: rgba(255,255,255,.14); }

.dailyCaseTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.dailyCaseTitle{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.1;
}
.dailyCaseSub{ font-size:12px; opacity:.7; margin-top:4px; }
.dailyCasePills{ display:flex; gap:6px; align-items:center; }
.dailyCasePill{
  font-size:11px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  white-space:nowrap;

  color: rgba(255,255,255,.92);
}
.dailyCasePill.ok{ border-color: rgba(120,255,190,.25); }
.dailyCasePill.bad{ border-color: rgba(255,120,120,.25); }

.dailyCaseThumbWrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 0 0;
}
.dailyCaseThumb{
  width:130px;
  height:130px;
  object-fit:contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
.dailyCaseLockOverlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  pointer-events:none;
}
.dailyCaseLockOverlay .tiny{ opacity:.85; }
.dailyCaseLockIcon{
  width:22px;
  height:22px;
  object-fit:contain;
  opacity:.9;
}

#dailyCaseModal .dailyCaseModalCard{
  width:min(820px, 100%);
  max-height:min(88vh, 820px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(16,20,34,.98), rgba(10,12,20,.96));
  box-shadow:0 20px 70px rgba(0,0,0,.65);
  padding:16px;

  color: rgba(255,255,255,.92);
}
#dailyCaseModal .modalX{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
#dailyCaseModal .modalX:hover{ border-color: rgba(255,255,255,.18); }

.dailyCaseModalHead{
  display:flex;
  gap:12px;
  align-items:center;
  padding-right:52px;
}
.dailyCaseModalIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
}
.dailyCaseModalTitle{ font-size:20px; font-weight:950; }
.dailyCaseModalSub{ margin-top:2px; }

.dailyCaseModalHero{
  position:relative;
  margin-top:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(1200px 450px at 50% 30%, rgba(130,190,255,.20), rgba(0,0,0,0)),
             linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.45));
  height:220px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dailyCaseModalHeroImg{
  width:190px;
  height:190px;
  object-fit:contain;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.55));
}
.dailyCaseModalHeroOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Daily case modal roll (preview slider) */
.dailyCaseModalRoll{
  position:absolute;
  left:16px;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  height:92px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}
.dailyCaseModalRollTrack{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  will-change:transform;
  animation:dailyRollMarquee 24s linear infinite;
}
@keyframes dailyRollMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.dailyCaseModalRollItem{
  width:54px;
  height:54px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.dailyCaseModalRollItem img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.dailyCaseModalRollNeedle{
  position:absolute;
  left:50%;
  top:10px;
  bottom:10px;
  width:2px;
  transform:translateX(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.85), rgba(255,255,255,.0));
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.dailyCaseModalHeroImg{ position:relative; z-index:2; }
.dailyCaseModalOpen{
  width:100%;
  margin-top:12px;
  font-weight:900;
  height:44px;
  border-radius:14px;
}
.dailyCaseDropsHead{
  margin-top:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.dailyCaseDropsTitle{ font-weight:900; font-size:16px; }
.dailyCaseDrops{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:6px;
}
.dailyDropRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
}
.dailyDropLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.dailyDropIcon{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.dailyDropName{
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dailyDropChance{
  font-size:12px;
  opacity:.7;
  margin-top:2px;
}
.dailyDropRight{
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  white-space:nowrap;
}


/* ===== Daily Cases (minimal card grid like Gamblit) ===== */
#dailyCasesView .cfTopBar{ padding:12px 16px; }
#dailyCasesView .cfTitle.dailyMiniTop{ display:flex; align-items:center; justify-content:flex-start; gap:10px; }
#dailyCasesView .cfTitle.dailyMiniTop .mini{ margin:0; }

/* Cards */
.dailyGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  align-items:stretch;
}

.dailyCaseTile{
  padding:12px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  color: rgba(255,255,255,.92);
}

.dailyCaseTile.isActive{ border-color: rgba(65,208,123,.35); box-shadow: 0 0 0 1px rgba(65,208,123,.14), var(--shadow); }
.dailyCaseTile.isLocked{ opacity:.92; }

.dailyCaseArt{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.dailyCaseArt .dailyCaseThumb{
  width:min(160px, 72%);
  height:auto;
  image-rendering:auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55));
  transform: translateY(2px);
}

.dailyCaseLockOverlayIcon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.50;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
  pointer-events:none;
}

.dailyCaseMeta{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dailyCaseLevel{
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  opacity:.9;
}

.dailyCaseBtn{
  width:100%;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
}
.dailyCaseBtn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.dailyCaseBtn:disabled{ opacity:.6; cursor:not-allowed; }
.dailyCaseBtn.isPrimary{ background: rgba(88,122,255,.18); border-color: rgba(88,122,255,.26); }
.dailyCaseBtn.isPrimary:hover{ background: rgba(88,122,255,.24); }

/* Mobile tighten */
@media (max-width: 520px){
  .dailyGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .dailyCaseTile{ min-height:220px; padding:10px; }
  .dailyCaseArt .dailyCaseThumb{ width:min(140px, 78%); }
}



/* Daily roll win highlight */
.dailyCaseModalRollItem.isDim{ opacity:.35; filter:brightness(.6); transform:scale(.96); }
.dailyCaseModalRollItem.isWin{
  opacity:1;
  filter:brightness(1.25) drop-shadow(0 0 14px rgba(255,255,255,.18));
  transform:scale(1.08);
  border-color:rgba(255,255,255,.28);
}

/* Won name overlay (below roll) */
.dailyCaseModalHeroOverlay{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  display:flex;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.dailyCaseModalHeroOverlay.isVisible{ opacity:1; transform:translateY(0); }

.dailyWonName{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,12,18,.55);
  color:rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.2px;
}

/* --- Header mini fixes (surgical) --- */
.mainBar .centerBox{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* keep balance centered */
  width: 100%;
}
.mainBar .centerBox .userbox{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Chat rail: make it blend with header (surgical) --- */
.chatRail.card{
  background: rgba(12,14,18,.86);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.chatRail .chatTop{
  border-bottom: none;
}

/* --- Header alignment fixes (balance absolute center, actions absolute right) --- */
.mainBar{ position: relative; }
.mainBar .centerBox{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-self: unset;
}
.mainBar .userbox{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* --- Seam fix: ensure header height matches --headerH so chat starts exactly at header bottom --- */
.top{ height: var(--headerH) !important; }
.topGrid{ height: 100% !important; }
.topLeft, .topRight{ height: 100% !important; }


/* --- Step 3: Desktop chat toggle --- */
.chatCloseBtn{
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  line-height: 1;
  font-size: 18px;
}

.chatOpenBtn{
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,14,18,.92);
  color: #fff;
  box-shadow: 0 14px 42px rgba(0,0,0,.45);
  cursor: pointer;
}
.chatOpenSvg{width:32px;height:32px;fill:currentColor;}
.chatOpenBtn:hover{ background: rgba(18,22,30,.92); }
.chatOpenBtn:active{ transform: translateY(1px); }

.chatCollapsed .chatRail{ display:none; }
.chatCollapsed .mainArea{ margin-left: 0 !important; padding-left: 0 !important; }
.chatCollapsed .chatOpenBtn{ display:flex; }

/* When chat is collapsed, also collapse the left header column so layout truly becomes full-width */
.chatCollapsed .topLeft{ display:none !important; }
.chatCollapsed .topGrid{ grid-template-columns: 1fr !important; }
.chatCollapsed .topRight{ padding-left: 0 !important; }

/* --- Step 4: Mobile chat fullscreen --- */
@media (max-width: 820px){
  /* Open button becomes bottom-right on mobile */
  .chatOpenBtn{
    left: 14px;
    right: auto;
    bottom: 14px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }
  .chatOpenSvg{ width: 34px; height: 34px; }

  /* Mobile default: chat hidden (we reuse .chatCollapsed) */
  .chatCollapsed .chatOpenBtn{ display:flex; }

  /* When mobile chat is open, show only chat fullscreen */
  body.chatMobileOpen .top{ display:none !important; }
  body.chatMobileOpen .mainArea{ display:none !important; }
  body.chatMobileOpen .chatOpenBtn{ display:none !important; }

  body.chatMobileOpen .chatRail{
    display:flex !important;
    position:fixed;
    left:0; top:0; right:0; bottom:0;
    width:100vw;
    height:100vh;
    max-width:none;
    border-radius:0;
    z-index: 10000;
  }
  body.chatMobileOpen .chatTop{
    border-radius:0;
  }
}


/* =========================================================
   STEP5 FIX PATCH: Desktop hamburger off + header center
   + no page scroll (desktop) + chat height
   ========================================================= */

/* Desktop: never show mobile hamburger / panels */
@media (min-width: 981px){
  .mobileMenuBtn,
  .mobileMenuOverlay,
  .mobileMenuPanel{ display:none !important; }

  /* Never show the mobile-only login button on desktop */
  .mobileLogin{ display:none !important; }
}

/* Desktop: true center balance without absolute hacks */
@media (min-width: 981px){
  .mainBar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
  }
  .mainBar .gamesWrap{ justify-self:start; }
  .mainBar .centerBox{
    position: static !important;
    left: auto !important;
    transform: none !important;
    justify-self:center;
  }
  .mainBar .userbox{
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self:end;
    display:flex;
    align-items:center;
  }

  /* Lock page scrolling to the main area only */
  html, body{ height:100%; overflow:hidden; }
  .page{
    height: calc(100vh - var(--headerH));
    height: calc(100dvh - var(--headerH));
    overflow:hidden;
    padding-bottom: 0;
  }
  .layout{ height:100%; }
  .mainArea{
    height: 100%;
    overflow:auto;
  }
  /* Ensure chat always fits viewport */
  .chatRail{
    height: calc(100vh - var(--headerH));
    height: calc(100dvh - var(--headerH));
  }
}

/* Mobile: keep balance centered and hamburger on right */
@media (max-width: 820px){
  .mainBar{
    display:grid;
    grid-template-columns: auto 1fr auto; /* login/space, balance centered, hamburger */
    align-items:center;
  }
  .mainBar .centerBox{
    grid-column: 2;
    justify-self:center;
    position: static !important;
    transform: none !important;
  }
  .mainBar .mobileLogin{ grid-column: 1; justify-self:start; }
  .mainBar .mobileMenuBtn{
    grid-column: 3;
    justify-self:end;
  }
}



/* Mobile (<=820px): full-width (no boxed), no horizontal scroll */
@media (max-width: 820px){
  .page{ padding-left: 0; padding-right: 0; }
  .mainArea{ padding-left: 0; margin-left: 0; }
  .topRight{ padding-left: 12px; padding-right: 12px; }
  /* Avoid 100vw scrollbar mismatch when chat is fullscreen */
  body.chatMobileOpen .chatRail{ width:100%; max-width:none; }
}


/* === Homepage tweaks: hero + horizontal rows (surgical overrides) === */

/* Keep hero as single centered card (same width as old 2-column half) */
.heroTwin{ grid-template-columns: 1fr; justify-items: center; }
#heroCarouselA{ width: calc((100% - 18px) / 2); }
@media (max-width: 820px){
  #heroCarouselA{ width: 100%; }
}

/* Remove visible carousel controls (auto-rotate still runs) */
.heroDots{ display:none !important; }


/* --- Compact game tiles (BetDice-ish) + fix MORE thumbnails --- */
/* Make tiles truly square so 1024x1024 images don't get "zoom-cropped" on tablet/mobile */
#homeView .hScrollRow{
  display:flex !important;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
#homeView .hScrollRow.isDragging{ cursor: grabbing; }
#homeView .hScrollRow::-webkit-scrollbar{ display:none; }

#homeView .hScrollRow > .gameCard,
#homeView .hScrollRow > .lockedCard{
  flex: 0 0 200px;
  width: 200px !important;
  aspect-ratio: 1 / 1;
}

@media (max-width: 820px){
  #homeView .hScrollRow > .gameCard,
  #homeView .hScrollRow > .lockedCard{
    flex-basis: 72vw;
    width: 72vw !important;
    aspect-ratio: 1 / 1;
  }
}

.hScrollRow .gameCard,
.hScrollRow .lockedCard{
  height: auto !important;
  padding: 0 !important;
  border-radius: 18px;
  overflow: hidden;
}

.hScrollRow .gameCard .gcBg,
.hScrollRow .lockedCard .gcBg{
  position:absolute;
  inset:0;
  background-image: var(--gcImg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* square image + square tile => no crop, no zoom */
  opacity: .98;
}

/* Keep text readable on top of images */
.hScrollRow .gameCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.08));
  pointer-events:none;
  z-index: 2;
}

.hScrollRow .gameCard > :not(.gcBg){
  position: relative;
  z-index: 3;
}
.hScrollRow .lockedCard > :not(.gcBg){
  position: relative;
  z-index: 4; /* keep above locked overlay */
}

.hScrollRow .gcTop{ padding: 12px; }
.hScrollRow .gcTitle{ font-size: 15px; }
.hScrollRow .gcSub{ font-size: 11px; }




.topLeft,
.topRight,
.chatTop {
  background: rgb(12,14,18) !important;
}

@media (max-width: 860px){
  .mainBar{
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 1050px){

  .topRight,
  .headerRight,
  .topActions{
    display:flex;
    flex-wrap:wrap !important;
    gap:8px;
    justify-content:flex-end;
  }

  /* ettei venytä koko riviä */
  .topBar,
  .header{
    align-items:flex-start;
  }

}




/* --- 2026-02-16: Force-hide chat rail at <=980px (wins against later generic .chatRail rules) --- */
@media (max-width: 980px){
  .chatRail{ display:none !important; }
  .mainArea{ margin-left:0 !important; padding-left:0 !important; }
}


/* MOBILE HEADER FIX */
@media (max-width: 980px){

  .hamburgerBtn,
  .menuBtn,
  .topMenuBtn{
    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    max-width: 44px !important;

    flex: 0 0 44px !important;
    padding: 0 !important;

    display:grid !important;
    place-items:center;
  }

}



/* ==== COINFLIP: X icon for Cancel/Dismiss (keeps card height stable) ==== */
.coinflipPage .gBet{ display:none !important; }

.coinflipPage .gX{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:rgba(232,238,252,.88);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  padding:0;
  z-index:5;
}
.coinflipPage .gX:hover{ background:rgba(255,255,255,.06); color:rgba(232,238,252,.98); }
.coinflipPage .gX:active{ transform:translateY(1px); }
.coinflipPage .gX:focus-visible{ outline:2px solid rgba(120,160,255,.55); outline-offset:2px; }
.coinflipPage .gX.hidden{ display:none !important; }

/* Use a clean × without needing extra assets */
.coinflipPage .gX::before{ content:"×"; }

/* When bet badge is hidden, keep top row compact */
.coinflipPage .gTop{ min-height: 18px; }

/* ===== Shine for game cards (Games + More) - single system ===== */
#homeView .gamesGrid .gameCard,
.moreGrid.hScrollRow .gameCard {
    position: relative;
    overflow: hidden;
}

    /* Shine layer */
    #homeView .gamesGrid .gameCard::before,
    .moreGrid.hScrollRow .gameCard::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -120%;
        width: 60%;
        height: 200%;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 65%, transparent 100% );
        transform: skewX(-20deg);
        pointer-events: none;
        mix-blend-mode: screen;
        opacity: 0;
        z-index: 2;
    }

    /* keep card content above shine (gcBg can stay under it) */
    #homeView .gamesGrid .gameCard > :not(.gcBg),
    .moreGrid.hScrollRow .gameCard > :not(.gcBg) {
        position: relative;
        z-index: 3;
    }

    /* hover animate (exclude locked if you want) */
    #homeView .gamesGrid .gameCard:not(.lockedCard):hover::before,
    .moreGrid.hScrollRow .gameCard:not(.lockedCard):hover::before {
        opacity: 1;
        animation: gameCardShine .7s ease forwards;
    }

@keyframes gameCardShine {
    from {
        left: -120%;
    }

    to {
        left: 160%;
    }
}


/* ===== Coin side badge on avatars (UI only; does NOT affect coinflip animation) ===== */

.pCard .pAvatar {
    position: relative;
    overflow: visible; /* allow badge outside avatar */
}

/* shared badge */
.pCard.p1 .pAvatar::after,
.pCard.p2 .pAvatar::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    box-shadow: none;
    /* strong depth like empire */
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
    z-index: 5;
    pointer-events: none;
}

/* LEFT player -> badge outside to RIGHT */
.pCard.p1 .pAvatar::after {
    top: -6px;
    right: -10px;
    background-image: url("/assets/coin/heads.webp");
}

/* RIGHT player -> badge outside to LEFT */
.pCard.p2 .pAvatar::after {
    top: -6px;
    left: -10px;
    background-image: url("/assets/coin/tails.webp");
}


/* ===== Make Join game a clearer primary action ===== */
.joinGameBtn {
    font-weight: 900;
    letter-spacing: .2px;
}

    .joinGameBtn.btn.gold {
        box-shadow: 0 10px 26px rgba(245,197,66,.22);
    }

        .joinGameBtn.btn.gold:hover {
            filter: brightness(1.08);
        }


/* ---- Roulette (UI-only) ---- */
.rouletteBody{padding:18px; display:flex; flex-direction:column; gap:16px;}
.rouletteCard{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:16px; box-shadow:var(--shadow); overflow:hidden;}
.rouletteCardHead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.roulettePf{display:flex; align-items:center; gap:8px; font-weight:700; color:rgba(255,255,255,.85); font-size:13px;}
.roulettePfDot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.85); opacity:.9;}
.rouletteTimerPill{
  padding:10px 14px;
  border-radius:12px;
  background:rgba(0,132,255,.85);
  color:#fff;
  font-weight:900;
  min-width:170px;
  text-align:center;
  position:relative;
  overflow:hidden;
  /* progress (1 -> full, 0 -> empty). driven by JS via --p */
  --p: 1;
}
.rouletteTimerPill::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.18);
  transform:scaleX(var(--p));
  transform-origin:left center;
  transition:transform 120ms linear;
  pointer-events:none;
}
.rouletteTimerPill{z-index:0;}
.rouletteTimerPill > *{position:relative; z-index:1;}
.rouletteTimerPill{display:flex; align-items:center; justify-content:center;}
.rouletteTimerPill.isRolling{background:rgba(0,132,255,.55);}
.rouletteTimerPill.isRolling::before{opacity:.35;}
.rouletteStripWrap{position:relative; border-radius:16px; overflow:hidden; background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.06);}
.rouletteStripMask{overflow:hidden; padding:14px 12px;}
.rouletteStrip{display:inline-flex; gap:10px; will-change:transform;}
.rTile{width:82px; height:82px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; letter-spacing:.2px; user-select:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); color:#fff;}
.rTile.red{background:rgba(255,43,97,.88);}
.rTile.black{background:rgba(60,68,92,.92);}
.rTile.green{background:rgba(46,214,84,.88);}
.rTile.isResult{outline:3px solid rgba(255,255,255,.7); outline-offset:2px;}
.rouletteNeedle{position:absolute; left:50%; top:8px; bottom:8px; width:4px; transform:translateX(-50%); border-radius:999px; background:rgba(255,255,255,.85); box-shadow:0 0 0 3px rgba(0,0,0,.25);}
.rouletteInfoRow{margin-top:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.rouletteInfoLabel{font-size:12px; color:rgba(255,255,255,.6); margin-bottom:6px; font-weight:700;}
.roulettePrev{display:flex; gap:8px; flex-wrap:wrap;}
.rChip{min-width:34px; height:34px; padding:0 10px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; border:1px solid rgba(255,255,255,.10); color:#fff;}
.rChip.red{background:rgba(255,43,97,.85);}
.rChip.black{background:rgba(60,68,92,.92);}
.rChip.green{background:rgba(46,214,84,.85);}
.rouletteLast100Pills{display:flex; gap:10px; align-items:center;}
.rPill{min-width:44px; height:34px; padding:0 12px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; border:1px solid rgba(255,255,255,.10);}
.rPill.red{background:rgba(255,43,97,.35); color:rgba(255,255,255,.95);}
.rPill.black{background:rgba(60,68,92,.45); color:rgba(255,255,255,.95);}
.rPill.green{background:rgba(46,214,84,.30); color:rgba(255,255,255,.95);}

/* Bets */
.rouletteBetCard{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:16px; box-shadow:var(--shadow);}
.rouletteBetTop{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.rouletteBetTitle{font-weight:900; font-size:14px;}
.rouletteQuick{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.rouletteBetInputRow{margin-top:10px;}
.rouletteAmtWrap{display:flex; align-items:center; gap:10px; background:rgba(13,20,38,.55); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:10px 12px;}
.rouletteAmtIcon{width:18px; height:18px;}
.rouletteAmt{flex:1; background:transparent; border:0; outline:0; color:#fff; font-weight:900; font-size:14px;}
.roulettePanels{margin-top:14px; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
@media (max-width: 980px){ .roulettePanels{grid-template-columns:1fr; } }
.rPanel{border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:rgba(13,20,38,.35);}
.rPanel.red{background:linear-gradient(180deg, rgba(255,43,97,.18), rgba(13,20,38,.35));}
.rPanel.green{background:linear-gradient(180deg, rgba(46,214,84,.16), rgba(13,20,38,.35));}
.rPanel.black{background:linear-gradient(180deg, rgba(60,68,92,.22), rgba(13,20,38,.35));}
.rPanelHead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px;}
.rPanelTitle{font-weight:900; font-size:13px; opacity:.9;}
.rPanelMul{font-weight:900; font-size:12px; color:rgba(255,255,255,.7);}
.rBetBtn{border:0; cursor:pointer; border-radius:14px; padding:12px 14px; font-weight:900; color:#fff; background:rgba(255,255,255,.10);}
.rPanel.red .rBetBtn{background:rgba(255,43,97,.85);}
.rPanel.green .rBetBtn{background:rgba(46,214,84,.85);}
.rPanel.black .rBetBtn{background:rgba(60,68,92,.92);}
.rBetBtn:disabled{opacity:.45; cursor:not-allowed;}
.rBetBtnActive{filter:brightness(1.08);}
.rPanelMeta{display:flex; align-items:center; justify-content:space-between; padding:0 14px 10px; color:rgba(255,255,255,.85); font-weight:800; font-size:12px;}
.rBettors{padding:10px 14px 14px; max-height:260px; overflow:auto;}
.rBettorRow{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(255,255,255,.06); font-weight:800; font-size:13px;}
.rBettorRow:first-child{border-top:0;}
.rBettorName{opacity:.92;}
.rBettorAmt{opacity:.92;}



/* --- Home "BetDice-ish" rows --- */
.dashShell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px 26px;
}

.rows{display:flex; flex-direction:column; gap:18px; margin-top:14px;}
.rowBlock{
  background: rgba(10,12,20,.45);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:14px;
}
.rowHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.rowTitle{display:flex; flex-direction:column; gap:2px;}
.rowH2{font-weight:900; letter-spacing:.01em; font-size:16px;}
.rowSub{color:var(--muted); font-size:12px;}

.rowActions{display:flex; gap:8px; align-items:center;}
.rowBtn{
  height:32px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(12,16,26,.55);
  color: #fff;
  font-weight:800;
  font-size:12px;
}
.rowBtn:hover{filter:brightness(1.06)}

.rowNav{
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(12,16,26,.55);
  color:#fff;
  font-weight:900;
  line-height:1;
}
.rowNav:hover{filter:brightness(1.06)}

.rowScroller{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rowScroller::-webkit-scrollbar{height:10px}
.rowScroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10); border-radius:999px}
.rowScroller::-webkit-scrollbar-track{background:rgba(255,255,255,.03); border-radius:999px}

.gameTile{
  flex: 0 0 auto;
  width: 188px;
  height: 190px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(12,16,26,.72);
  overflow:hidden;
  position:relative;
  scroll-snap-align:start;
}
.gameTile:hover{filter:brightness(1.05)}

/* --- Game tile hover shine (casino polish) --- */
.gameTile{ transform: translateZ(0); }
.gameTile::before{
  content:"";
  position:absolute;
  top:-55%;
  left:-70%;
  width:55%;
  height:220%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(0) rotate(12deg);
  opacity:0;
  pointer-events:none;
  z-index: 3;
}
.gameTile.isActive:hover::before{
  opacity:1;
  animation: gameTileShine .75s ease;
}
@keyframes gameTileShine{
  from{ transform: translateX(0) rotate(12deg); }
  to{ transform: translateX(280%) rotate(12deg); }
}

.gameTile .gcBg{
  position:absolute;
  inset:0;
  background-image: var(--gcImg);
  background-repeat: no-repeat;
  background-size: contain; /* show full 1:1 art */
  background-position:center;
  opacity: .95;
  background-color: rgba(0,0,0,.18);
  z-index: 1;
}

.gameTile.isActive{cursor:pointer}

.rowScrollerSmall .miniGame{width: 210px; height: 120px;}

.miniGame{
  flex:0 0 auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(12,16,26,.50);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px;
  scroll-snap-align:start;
}
.miniGameTitle{font-weight:900; letter-spacing:.02em}
.miniGameSub{margin-top:4px; font-size:12px; color:var(--muted)}
.miniGame.lockedCard{opacity:.75}


/* Roulette optimistic pending bet */
.rBettorRow.isPending{ opacity:.65; }
.rBettorRow.isPending .rBettorName::after{ content:" (pending)"; font-size:12px; opacity:.7; }