/* Layout and theme layer. Loaded after style.css and buttons.css, so it re-points the
   palette variables and replaces the page chrome (sidebar, top bar, lobby) without
   touching any game's own rules. The look is a dark navy app shell with a left menu,
   a top bar carrying balance and wallet, and a card lobby. All artwork is CSS. */

:root {
  --bg: #0f212e;
  --bg-deep: #071824;
  --bg-raised: #1a2c38;
  --panel: #1a2c38;
  --panel-hi: #213743;
  --bg-input: #0f212e;

  --gold: #fe1812;
  --gold-bright: #ff6a64;
  --gold-dim: #8f1713;
  --gold-line: rgba(255, 106, 100, .18);
  --gold-glow: rgba(254, 24, 18, .40);

  --felt: #0f3a45;
  --felt-hi: #14505e;
  --win: #00e701;

  --text: #e9f1f7;
  --text-dim: #b1bad3;
  --text-faint: #7b8ca8;
  --line: #2f4553;
  --line-soft: #223743;

  --radius: 10px;
  --shadow: none;

  --side-w: 260px;
  --top-h: 64px;
}

body { background: var(--bg); background-attachment: scroll; }

/* ------------------------------------------------------------------ shell */
.app {
  display: grid; min-height: 100vh;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: var(--top-h) minmax(0, 1fr);
}
.app > header.top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 70; }
.main { min-width: 0; }
.app.nav-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.app.nav-collapsed .sidebar { visibility: hidden; padding: 0; overflow: hidden; }

.sidebar {
  position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--bg);
  z-index: 60;
}
.side-nav {
  display: flex; flex-direction: column; gap: 0; flex: 0 0 auto;
  padding: 0; background: var(--panel); border-radius: 10px; overflow: hidden;
}

/* ---- left menu rows: 47px tall, 15px bold label, 20px line icon */
.ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-item {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; height: 47px; padding: 0 16px;
  text-align: left; font-size: 15px; font-weight: 700; line-height: 1;
  color: #b1bad3; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.side-item .ico { color: #b1bad3; }
.side-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.side-item:hover:not(:disabled) { background: #213743; border-color: transparent; }
.side-item.on { background: #2f4553; }
.side-head[aria-expanded="true"] { background: #213743; }
.side-chev { margin-left: auto; transition: transform .15s; }
.side-group.open > .side-head .side-chev { transform: rotate(180deg); }
.side-sub { display: none; flex-direction: column; background: var(--bg-deep); }
.side-group.open > .side-sub { display: flex; }
.side-child { height: 40px; padding-left: 50px; font-weight: 600; }
.side-child .side-label { color: #d5dceb; font-size: 14px; }
.side-sep { height: 1px; margin: 8px 16px 8px; background: #2f4553; }

.scrim { display: none; }

/* -------------------------------------------------------------------- top bar */
header.top {
  height: var(--top-h); padding: 0 20px; gap: 12px;
  background: #1a2c38; border-bottom: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.brand { color: #fff; font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: .01em; }
.brand .chip { box-shadow: 0 0 12px var(--gold-glow); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; font-size: 18px;
  background: transparent; border: 0; box-shadow: none; color: var(--text-dim);
}
.icon-btn:hover:not(:disabled) { background: #213743; color: #fff; border-color: transparent; }
.ic-burger {
  display: block; width: 18px; height: 12px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.balance {
  height: 44px; padding: 0 16px; gap: 8px; align-items: center;
  background: #0f212e; border: 0; border-radius: 8px 0 0 8px; box-shadow: none;
}
.balance .label:first-child { display: none; }
.balance .value { color: #fff; font-size: 15px; }
.balance .label { color: var(--text-dim); }
.wallet-btn { display: none; }
#balanceBox:not([hidden]) + .wallet-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
  background: #fe1812; color: #fff; font-weight: 700;
  border: 0; border-radius: 0 8px 8px 0; box-shadow: none;
}
#balanceBox:not([hidden]) + .wallet-btn:hover { background: #ff3b35; }

.menu-panel { background: #1a2c38; border: 1px solid #2f4553; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }

/* -------------------------------------------------------- flat controls */
button {
  background: #2f4553; border-color: transparent; box-shadow: none;
}
button:hover:not(:disabled), .btn:hover {
  background: #557086; border-color: transparent;
}
button.primary {
  background: #00e701; border-color: transparent; color: #052e16; text-shadow: none; box-shadow: none;
}
button.primary:hover:not(:disabled) { background: #1fff20; box-shadow: none; }
button.ghost { background: transparent; }
button.ghost:hover:not(:disabled) { background: #213743; }
button.danger { background: transparent; border-color: #2f4553; }
input, select { background: #0f212e; border: 2px solid #2f4553; border-radius: 8px; }
input:focus, select:focus { border-color: #557086; box-shadow: none; outline: 0; }

.panel { background: #1a2c38; border: 0; box-shadow: none; }
.stage { background: #1a2c38; border: 0; box-shadow: none; }
.modal { background: #1a2c38; border: 0; }
.tabs button.on { background: #2f4553; border-color: transparent; color: #fff; }
h3 { color: var(--text-dim); }

/* ------------------------------------------------------------------- lobby */
.lobby { width: 100%; }
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hero-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
  background: #213743; border: 0; border-radius: 12px; cursor: pointer; transition: transform .15s;
}
.hero-card:hover:not(:disabled) { background: #213743; transform: translateY(-3px); }
.hero-art { position: relative; display: block; height: 170px; overflow: hidden; }
.hero-casino .hero-art { background: linear-gradient(135deg, #e32722 0%, #7a0f0c 100%); }
.hero-match  .hero-art { background: linear-gradient(135deg, #ff5a54 0%, #7a0f0c 100%); }
.hero-title { position: absolute; left: 18px; top: 14px; z-index: 2; font-size: 22px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.hero-foot { display: flex; align-items: center; padding: 14px 16px; font-weight: 700; color: #fff; }
.hero-play::before { content: '\25B6'; margin-right: 10px; font-size: 12px; color: var(--gold-bright); }

/* Decorations: a gem, a chip and a die, drawn with gradients. */
.art-a, .art-b, .art-c { position: absolute; display: block; }
.art-a { /* gem */
  left: 18%; bottom: -18px; width: 120px; height: 120px; transform: rotate(18deg);
  background: linear-gradient(145deg, #bfe8ff 0%, #5ab6ee 45%, #1f6fb8 100%);
  clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); opacity: .95;
}
.art-b { /* chip */
  left: 46%; bottom: 8px; width: 112px; height: 112px; border-radius: 50%;
  background:
    radial-gradient(circle, #f4f7fb 0 26%, transparent 27%),
    repeating-conic-gradient(#f4f7fb 0 12deg, #d1263f 12deg 30deg);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .3);
}
.art-c { /* die */
  right: 8%; bottom: 14px; width: 92px; height: 92px; border-radius: 18px; transform: rotate(-12deg);
  background:
    radial-gradient(circle at 28% 28%, #0b1f3a 0 8%, transparent 9%),
    radial-gradient(circle at 72% 28%, #0b1f3a 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, #0b1f3a 0 8%, transparent 9%),
    radial-gradient(circle at 28% 72%, #0b1f3a 0 8%, transparent 9%),
    radial-gradient(circle at 72% 72%, #0b1f3a 0 8%, transparent 9%),
    linear-gradient(145deg, #f4f8ff, #b8cbe6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.hero-match .art-a { left: 12%; clip-path: none; border-radius: 50%; width: 110px; height: 110px; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ff3b35 13%, #5a0d0a 100%); }
.hero-match .art-b { background: repeating-conic-gradient(#fff 0 25%, #0b1f3a 0 50%) 0 0 / 28px 28px; border-radius: 10px; width: 140px; height: 100px; left: 52%; transform: skewX(-8deg); box-shadow: none; }

.lobby-search {
  display: flex; align-items: center; gap: 12px; height: 48px; margin: 22px 0 0; padding: 0 14px;
  background: #0f212e; border: 2px solid #2f4553; border-radius: 8px; cursor: text;
}
.lobby-search:focus-within { border-color: #557086; }
.lobby-search input { flex: 1 1 auto; height: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: 15px; color: #fff; }
.lobby-search input::placeholder { color: var(--text-dim); }
.kbd { white-space: nowrap; padding: 2px 8px; font: 700 12px var(--sans); color: #fff; background: #2f4553; border-radius: 4px; }
.ic-search {
  position: relative; display: block; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--text-dim); border-radius: 50%;
}
.ic-search::after {
  content: ''; position: absolute; right: -6px; bottom: -4px; width: 6px; height: 2px;
  background: var(--text-dim); transform: rotate(45deg);
}

h2.lobby-h {
  margin: 28px 0 14px; font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: 0; color: #fff;
}
.gcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  aspect-ratio: 3 / 4; padding: 12px; overflow: hidden; text-align: left; color: #fff;
  background: linear-gradient(160deg, hsl(var(--g-hue, 205) 70% 46%), hsl(calc(var(--g-hue, 205) + 28) 62% 20%));
  border: 0; border-radius: 8px; transition: transform .15s;
}
.gcard::before {
  content: attr(data-glyph); position: absolute; top: 6px; right: 12px;
  font-size: 84px; font-weight: 900; line-height: 1; opacity: .18;
}
.gcard:hover:not(:disabled) {
  background: linear-gradient(160deg, hsl(var(--g-hue, 205) 75% 52%), hsl(calc(var(--g-hue, 205) + 28) 62% 24%));
  transform: translateY(-4px);
}
.gcard .g-kind { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.gcard .g-name { font-size: 16px; font-weight: 800; }
.lobby-none { margin: 18px 0 0; color: var(--text-dim); }

/* ------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .app, .app.nav-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .app.nav-collapsed .sidebar {
    position: fixed; top: var(--top-h); bottom: 0; left: 0; width: 272px; height: auto;
    visibility: visible; padding: 16px;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .app.nav-open .sidebar { transform: none; }
  .scrim { position: fixed; inset: var(--top-h) 0 0 0; z-index: 55; background: rgba(0, 0, 0, .55); }
  .app.nav-open .scrim { display: block; }
  header.top { padding: 0 10px; gap: 8px; }
  .mode-tabs, #btnFeedToggle, #btnBell { display: none; }
  .hero-art { height: 130px; }
}
@media (max-width: 560px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .brand { font-size: 17px; }
  #balanceBox:not([hidden]) + .wallet-btn { padding: 0 14px; }
  .balance { padding: 0 10px; }
  .gcard-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .hero-card, .gcard { transition: none; }
}

/* The feed panel used to carry an inline margin, which the CSP blocks. */
.feed-panel { margin-top: 16px; }

/* Lobby: no empty controls column, no card around the whole thing. */
.lobby-on .layout { grid-template-columns: minmax(0, 1fr); }
.lobby-on .controls-col { display: none; }
.lobby-on .stage { background: transparent; padding: 0; min-height: 0; justify-content: flex-start; }

/* The old header hid the brand word on phones to make room for the game nav. That nav now
   lives in the drawer, so there is room again. */
.brand #siteName { display: inline; }
@media (hover: none) { .kbd { display: none; } }
header.top button { white-space: nowrap; }


/* ============================================================== top bar
   Height, tab size and icon size sit in variables so a restyle is one edit. */
:root {
  --tab-h: 36px;
  --menu-row-h: 47px;
  --card-w: 150px;
  --card-gap: 14px;
  --blue: #fe1812;
  --blue-hi: #ff3b35;
}
header.top { display: flex; align-items: center; }
header.top .icon-btn { width: 40px; height: 40px; border-radius: 8px; }
header.top .icon-btn .ico { width: 22px; height: 22px; }
header.top #btnSound { font-size: 18px; }
.spacer { flex: 1 1 auto; }

.mode-tabs { display: flex; gap: 8px; margin-left: 4px; }
.mode-tabs .mode {
  min-width: 87px; height: var(--tab-h); padding: 0 16px; border-radius: 8px;
  font-size: 15px; font-weight: 700; color: #b1bad3; background: #213743;
}
.mode-tabs .mode.on { color: #fff; background: #2f4553; }
.mode-tabs .mode:hover:not(:disabled) { background: #2f4553; color: #fff; }
.brand { margin-left: max(0px, calc(var(--side-w) - 340px)); }

.balance { margin-left: 8px; }
.menu { position: relative; }

/* ---- profile dropdown */
.menu-panel {
  position: absolute; top: calc(100% + 12px); right: -8px; min-width: 225px; padding: 8px;
  display: flex; flex-direction: column; gap: 0;
  background: #213743; border: 0; border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.menu-panel[hidden] { display: none; }
.menu-panel::before {
  content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
  background: #213743; transform: rotate(45deg); border-radius: 2px;
}
.menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 700; color: #fff; background: transparent; border: 0; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
}
.menu-item .ico { color: #b1bad3; }
.menu-item:hover { background: #2f4553; color: #fff; }
.menu-item.hide { display: none; }

/* ============================================================== sheets (wallet, VIP, ...) */
.modal.sheet { max-width: 625px; padding: 20px; background: #1a2c38; border-radius: 10px; }
.modal.sheet.wide { max-width: 760px; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.sheet-head h2 { margin: 0; flex: 1; font-size: 18px; font-weight: 800; color: #fff; }
.sheet-ico { color: #b1bad3; }
.sheet-x { color: #b1bad3; }
.sheet-x .ico { width: 22px; height: 22px; }
.sheet-h3 { margin: 22px 0 12px; font-size: 18px; font-weight: 800; color: #fff; }
.pill-tabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 20px; overflow-x: auto; background: #0f212e; border-radius: 999px; scrollbar-width: thin; }
.pill { flex: 0 0 auto; height: 44px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; background: transparent; border: 0; }
.pill:hover:not(:disabled) { background: #1a2c38; }
.pill.on { background: #2f4553; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 0; color: #b1bad3; }
.empty-ico { width: 36px; height: 36px; }
.form-stack { display: flex; flex-direction: column; gap: 10px; }
.btn-main, .btn-2nd {
  height: 52px; padding: 0 22px; border-radius: 8px; border: 0; font-size: 15px; font-weight: 700; color: #fff;
}
.btn-main { background: var(--blue); }
.btn-main:hover:not(:disabled) { background: var(--blue-hi); }
.btn-2nd { background: #3f566a; }
.btn-2nd:hover:not(:disabled) { background: #557086; }
.btn-main.small { height: 40px; padding: 0 20px; }
.wide-btn { width: 100%; margin-top: 12px; }

/* ---- wallet overview */
.wal-label { font-size: 15px; font-weight: 700; color: #b1bad3; }
.wal-total { margin: 4px 0 18px; font-size: 24px; font-weight: 800; color: #fff; }
.wal-cur { font-size: 15px; color: #b1bad3; }
.wal-table { padding: 18px 20px 6px; background: #0f212e; border-radius: 10px; }
.wal-head { display: flex; justify-content: space-between; padding-bottom: 12px; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #b1bad3; border-bottom: 1px solid #2f4553; }
.wal-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.wal-coin {
  display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  font-size: 14px; font-weight: 800; color: #fff; background: hsl(var(--g-hue, 205) 60% 45%);
}
.wal-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.wal-name b { font-size: 16px; color: #fff; }
.wal-name small { font-size: 14px; color: #b1bad3; }
.wal-val { font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.wal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

/* ---- VIP */
.vip-badge {
  display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; color: #b8864b;
}
.vip-badge .ico { width: 100%; height: 100%; stroke-width: 1.6; }
.vip-badge.big { width: 92px; height: 92px; }
.vip-badge.lvl1 { color: #b8c2d4; } .vip-badge.lvl2 { color: #e6b73c; } .vip-badge.lvl3 { color: #7fd0e8; }
.vip-badge.lvl4 { color: #8aa2ff; } .vip-badge.lvl5 { color: #c486ff; }
.vip-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  background: #1a2c38; border: 2px solid #b8864b; border-radius: 10px;
}
.vip-card.lvl1 { border-color: #b8c2d4; } .vip-card.lvl2 { border-color: #e6b73c; }
.vip-card.lvl3 { border-color: #7fd0e8; } .vip-card.lvl4 { border-color: #8aa2ff; } .vip-card.lvl5 { border-color: #c486ff; }
.vip-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vip-card-name { font-size: 18px; color: #fff; }
.vip-card-pct { font-size: 16px; font-weight: 700; color: #fff; }
.vip-card small { font-size: 15px; color: #b1bad3; }
.vip-bar { display: block; height: 8px; overflow: hidden; background: #0f212e; border-radius: 999px; }
.vip-fill { display: block; height: 100%; min-width: 6px; background: #b8864b; border-radius: 999px; }
.vip-card.lvl1 .vip-fill { background: #b8c2d4; } .vip-card.lvl2 .vip-fill { background: #e6b73c; }
.bonus-row { display: flex; align-items: center; gap: 16px; padding: 22px 20px; margin-bottom: 12px; background: #213743; border-radius: 10px; }
.bonus-ico { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; color: #b1bad3; background: #0f212e; border-radius: 16px; }
.bonus-ico .ico { width: 30px; height: 30px; }
.bonus-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.bonus-text b { font-size: 18px; color: #fff; }
.bonus-text small { font-size: 16px; color: #b1bad3; }
.bonus-chev { color: #fff; }

/* ============================================================== lobby (empty boxes) */
.lobby-search { margin-top: 20px; }
.lobby-row { margin-top: 8px; }
h2.lobby-h { display: flex; align-items: center; gap: 8px; }
.lobby-h-go { width: 16px; height: 16px; transform: rotate(-90deg); color: #b1bad3; }
.gcard-grid { grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: var(--card-gap); }
.pcard { display: flex; flex-direction: column; gap: 8px; padding: 0; text-align: left; background: transparent; border: 0; }
.pcard-art {
  display: block; aspect-ratio: 133 / 178; width: 100%; overflow: hidden;
  font-weight: 800; color: #fff; background: #213743; border-radius: 8px; transition: transform .15s;
}
.pcard.live { cursor: pointer; }
.pcard.live:hover .pcard-art { transform: translateY(-4px); }
.pcard-foot { display: flex; align-items: center; gap: 6px; height: 16px; }
.pcard-dot { width: 6px; height: 6px; border-radius: 50%; background: #2f4553; }
.pcard-bar { width: 56px; height: 8px; border-radius: 4px; background: #213743; }
.load-more { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: #b1bad3; }
.load-more::before, .load-more::after { content: ''; flex: 1 1 auto; height: 1px; background: #2f4553; }
.lobby-found { margin-top: 18px; }
.ic-s { color: #b1bad3; }
.lobby-search .ic-search { display: none; }
.stub .hint { margin: 0 0 14px; }

.vip-strip {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; text-align: left;
  background: #1a2c38; border: 0; border-radius: 10px;
}
.vip-strip .vip-badge { width: 56px; height: 56px; }
.vip-mid { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.vip-user { font-size: 16px; font-weight: 700; color: #fff; }
.vip-lv { display: flex; justify-content: space-between; font-size: 14px; color: #b1bad3; }
.vip-pct { align-self: flex-start; font-size: 14px; font-weight: 700; color: #b1bad3; }

.feed-hidden .feed-panel { display: none; }

/* The old account button drew its own burger glyph; the profile icon replaces it. */
header.top .menu-trigger::before { content: none; display: none; }
header.top .menu-trigger { padding: 0; }

/* Sheets sit above the top bar and use the app's sans face, not the old modal serif. */
.modal-back { z-index: 90; align-items: center; }
.modal.sheet .sheet-head h2, .modal.sheet h3.sheet-h3 {
  font-family: var(--sans); color: #fff; text-transform: none; letter-spacing: 0;
}
.modal.sheet h3.sheet-h3 { font-size: 18px; font-weight: 800; }


/* ============================================================== live bets table */
.feed-panel { margin-top: 28px; padding: 0; background: transparent; }
.feed-panel .tabs { gap: 6px; padding: 5px; margin: 0 0 18px; width: fit-content; max-width: 100%; overflow-x: auto; background: #0f212e; border-radius: 999px; }
.feed-panel .tabs button { height: 44px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; background: transparent; border: 0; white-space: nowrap; }
.feed-panel .tabs button.on { background: #2f4553; }
.feed-panel .tabs button:hover:not(.on) { background: #1a2c38; }
.feed-grid { font-size: 15px; font-weight: 600; background: #1a2c38; border-radius: 10px; overflow: hidden; }
.feed-grid th { padding: 20px 20px; font-size: 15px; font-weight: 700; color: #b1bad3; background: #0f212e; text-align: left; border: 0; }
.feed-grid td { padding: 18px 20px; color: #fff; border-bottom: 1px solid #223743; }
.feed-grid th.num, .feed-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.feed-grid td.pos { color: var(--win); }
.feed-grid td.neg { color: #ff6b6b; }
.feed-grid tbody tr:hover td { background: #213743; }

/* ============================================================== footer */
.site-footer { margin-top: 40px; padding: 40px 20px 48px; background: #0b1b27; }
.foot-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; max-width: 1480px; margin: 0 auto; }
.foot-col h4 { margin: 0 0 18px; font-family: var(--sans); font-size: 17px; font-weight: 800; color: #fff; text-transform: none; letter-spacing: 0; }
.foot-col a { display: block; margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.35; color: #b1bad3; text-decoration: none; }
.foot-col a:hover { color: #fff; }
.foot-social { display: flex; justify-content: center; gap: 14px; margin: 36px 0 28px; }
.foot-ico { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #b1bad3; background: transparent; border: 0; border-radius: 8px; }
.foot-ico:hover:not(:disabled) { color: #fff; background: #1a2c38; }
.foot-line { height: 1px; max-width: 1480px; margin: 0 auto; background: #2f4553; }
.foot-note { max-width: 1480px; margin: 20px auto 0; font-size: 13px; font-weight: 600; color: #7b8ca8; }

/* ============================================================== floating buttons */
.fabs { position: fixed; right: 24px; bottom: 24px; z-index: 65; display: flex; flex-direction: column; gap: 12px; }
.fab { display: grid; place-items: center; width: 75px; height: 55px; padding: 0; color: #fff; background: #3f566a; border: 0; border-radius: 28px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.fab:hover:not(:disabled) { background: #557086; }
.fab[hidden] { display: none; }
.fab .ico { width: 24px; height: 24px; }

/* ============================================================== profile button */
#btnAccount[aria-expanded="true"] { background: transparent; box-shadow: inset 0 0 0 2px #fff; }

@media (max-width: 900px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab { width: 56px; height: 48px; }
  .feed-grid th, .feed-grid td { padding: 12px 10px; font-size: 13px; }
}

/* Test slot cards: a live box coloured by its machine's hue, with the name on it. */
.pcard.live .pcard-art {
  position: relative; display: flex; align-items: flex-end; padding: 12px; font-size: 16px; line-height: 1.15;
  background:
    radial-gradient(120% 70% at 50% 0%, hsl(var(--p-hue) 80% 55% / .45), transparent 70%),
    linear-gradient(180deg, hsl(var(--p-hue) 55% 22%), hsl(var(--p-hue) 60% 9%));
}
.pcard.live .pcard-art::before {
  content: attr(data-glyph); position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  font-size: 54px; font-weight: 900; color: hsl(var(--p-hue) 90% 80% / .9);
  text-shadow: 0 0 24px hsl(var(--p-hue) 90% 60% / .7);
}
.pcard-badge {
  position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(0, 0, 0, .45); color: #fff;
}
.pcard.live .pcard-dot { background: hsl(var(--p-hue) 80% 55%); }

/* External test client cards: the thumbnail replaces the big letter. */
.pcard.ext .pcard-art::before { content: none; }
.pcard.ext .pcard-art { text-shadow: 0 1px 6px #000; }

/* admin-managed wallet, support chat and content pages */
.ops-methods { display: grid; gap: 10px; }
.ops-method { display: flex; align-items: center; gap: 10px; text-align: left; }
.ops-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ops-qr { display: block; width: 180px; max-width: 100%; margin: 12px auto; border-radius: 8px; background: #fff; }
.ops-sel { max-width: 220px; }
.ops-msgs { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; padding: 12px; }
.ops-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: #2f4553; word-wrap: break-word; }
.ops-msg.me { align-self: flex-end; background: #fe1812; color: #fff; }
.ops-chatimg { display: block; max-width: 200px; margin-top: 6px; border-radius: 8px; }
.ops-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #2f4553; }
.ops-compose input[type=text] { flex: 1; }
.ops-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ops-cap { padding: 8px; display: flex; flex-direction: column; }
.hide { display: none; }

/* support popup (bottom right) */
.support-pop { position: fixed; right: 18px; bottom: 90px; z-index: 70; display: flex; flex-direction: column; width: 360px; max-width: calc(100vw - 24px); height: 480px; max-height: calc(100vh - 120px); overflow: hidden; border-radius: 16px; background: #1a2c38; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); border: 1px solid #2f4553; }
.sp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #fe1812, #0f4fa0); color: #fff; }
.sp-who { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.sp-who small { opacity: .85; }
.sp-who small::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #3be07a; }
.sp-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: #2f4553; }
.sp-initial { display: grid; place-items: center; font-weight: 700; color: #fff; }
.ops-row { display: flex; align-items: flex-end; gap: 8px; }
.ops-row.me { justify-content: flex-end; }
.ops-row .sp-avatar { width: 28px; height: 28px; }
.ops-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: #2f4553; word-wrap: break-word; }
.ops-msg.me { background: #fe1812; color: #fff; }
.fab.has-avatar { position: relative; padding: 0; overflow: visible; }
.fab-avatar { width: 100%; height: 100%; border-radius: 28px; object-fit: cover; }
.fab-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #3be07a; border: 2px solid #1a2c38; }

/* scrolling ticker */
.ticker { overflow: hidden; margin: 0 0 14px; padding: 10px 0; border-radius: 10px; background: #1a2c38; white-space: nowrap; }
.ticker[hidden] { display: none; }
.ticker-track { display: inline-flex; width: max-content; will-change: transform; animation-duration: var(--ticker-dur, 25s); animation-timing-function: linear; animation-iteration-count: infinite; }
.ticker-track.ltr { animation-name: tk-ltr; }
.ticker-track.rtl { animation-name: tk-rtl; }
.ticker-item { padding: 0 40px; font-weight: 600; color: #cfe3ff; }
.ticker-item::before { content: '★'; margin-right: 12px; color: #f0a93b; }
@keyframes tk-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes tk-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* currency dropdown, bell and quick menu */
.cur-drop, .notif-panel, .quick-panel { position: absolute; top: 62px; z-index: 80; border-radius: 12px; background: #1a2c38; border: 1px solid #2f4553; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.cur-drop { left: 50%; transform: translateX(-50%); width: 340px; max-width: calc(100vw - 20px); padding: 10px; }
.cur-search { width: 100%; margin-bottom: 8px; }
.cur-list { max-height: 320px; overflow-y: auto; }
.cur-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.cur-row:hover, .cur-row.on { background: #2f4553; }
.cur-row small { color: #9fb0c4; }
.notif-panel { right: 70px; width: 340px; max-width: calc(100vw - 20px); max-height: 420px; overflow-y: auto; padding: 6px; }
.notif-head { padding: 10px 12px; font-weight: 700; border-bottom: 1px solid #2f4553; }
.notif-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; }
.notif-row.new { background: rgba(254, 24, 18, .15); }
.notif-row small { color: #b1bad3; }
.notif-time { font-size: 11px; opacity: .7; }
.notif-empty { padding: 24px; text-align: center; color: #9fb0c4; }
.quick-panel { right: 12px; min-width: 190px; padding: 6px; }
.quick-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.quick-item:hover { background: #2f4553; }
#btnBell.has-new { position: relative; }
#btnBell.has-new::after { content: attr(data-count); position: absolute; top: 2px; right: 0; min-width: 16px; padding: 0 4px; border-radius: 99px; background: #ec5b5b; color: #fff; font-size: 11px; line-height: 16px; }
.balance { cursor: pointer; }

/* promotions page: two large cards per row, title above the picture, text below */
.promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.promo-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #1a2c38; }
.promo-title { margin: 0; font-size: 18px; }
.promo-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #2f4553; }
.promo-text { margin: 0; color: #b1bad3; line-height: 1.5; white-space: pre-line; }
.promo-more { align-self: flex-start; text-decoration: none; }
@media (max-width: 700px) { .promo-grid { grid-template-columns: minmax(0, 1fr); } }

/* wallet: modern, compact */
.modal.sheet { max-height: 88vh; overflow-y: auto; }
.wal-hero { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #1d3a52, #16293a); }
.wal-hero .wal-total { font-size: 32px; }
.wal-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wal-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #16293a; }
.wal-item .wal-name { flex: 1; display: flex; flex-direction: column; }
.wal-item .wal-name small { color: #8ea3b8; }
.wal-item .wal-val { font-weight: 700; }
.wal-logo, .cur-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: #2f4553; }
.cur-name { display: flex; flex-direction: column; }
.dep-head { gap: 10px; margin-bottom: 8px; }
.dep-grid { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.dep-grid .ops-qr { width: 112px; margin: 0; flex: none; }
.dep-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dep-addr { display: flex; gap: 8px; align-items: center; }
.dep-addr .phrase-box { flex: 1; margin: 0; padding: 8px 10px; font-size: 12px; }
.dep-files { gap: 10px; flex-wrap: nowrap; }
.dep-files .field { flex: 1; min-width: 0; margin-bottom: 6px; }
.modal.sheet .field { margin-bottom: 8px; }
.amt-box { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.amt-row { flex-wrap: nowrap; gap: 8px; }
.amt-row input { flex: 1; min-width: 0; }
.amt-sel { width: 96px; }
.amt-prev { margin: 0; min-height: 16px; }

/* brand, tabs, online counts, vip icon, stake tag */
.brand.clickable { cursor: pointer; }
.brand-logo { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.mode-tabs .mode:hover:not(:disabled) { background: #fe1812; color: #fff; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; }
.online-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #b1bad3; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #3be07a; display: inline-block; }
.online-line { padding: 10px 4px 0; }
.vip-img { width: 100%; height: 100%; object-fit: contain; }
.cur-tag { align-self: center; padding: 0 8px; color: #8ea3b8; font-size: 12px; font-weight: 700; }

/* ---- dark native widgets and slim gray scrollbars, to match the site */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #3d5566 #12202b; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #12202b; }
*::-webkit-scrollbar-thumb { background: #3d5566; border-radius: 8px; border: 2px solid #12202b; }
*::-webkit-scrollbar-thumb:hover { background: #557489; }
*::-webkit-scrollbar-corner { background: #12202b; }
select, option, input, textarea { color-scheme: dark; }

/* ---- game cards: online count */
.g-online { display: block; margin-top: 6px; font-size: 12px; color: #b1bad3; }
.g-online:empty { display: none; }
.g-on { display: inline-flex; align-items: center; gap: 5px; }
.pcard-foot .g-online { margin: 0 0 0 auto; }

/* ---- promo detail */
.promo-detail-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.promo-detail-text { white-space: pre-wrap; margin: 0 0 12px; }
.promo-terms { background: #12202b; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.promo-terms h4 { margin: 0 0 6px; font-size: 14px; }
.promo-terms p { margin: 0; white-space: pre-wrap; color: #b1bad3; font-size: 13px; line-height: 1.5; }
.promo-msg { margin: 8px 0; }
.promo-claim { width: 100%; margin-top: 6px; }
.promo-claim:disabled { opacity: .6; cursor: default; }

/* ---- support agents */
.ops-agent { display: block; font-size: 12px; margin-bottom: 2px; color: #7fd1ff; }
.sp-headav { display: inline-flex; }

/* ---- game page chrome */
.game-chrome { margin-top: 10px; }
.gc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #1a2c38; border-radius: 10px; padding: 8px 10px; }
.gc-tools, .gc-right { display: flex; align-items: center; gap: 6px; }
.gc-right { margin-left: auto; }
.gc-btn, .gc-cur, .gc-fair { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; background: #213743; color: #fff; border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.gc-btn:hover, .gc-cur:hover, .gc-fair:hover { background: #2f4553; }
.gc-btn .ico, .gc-fair .ico { width: 16px; height: 16px; }
.gc-mode { display: inline-flex; background: #0f212e; border-radius: 999px; padding: 3px; }
.gc-m { border: 0; background: transparent; color: #b1bad3; padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
.gc-m.on { background: #2f4553; color: #fff; }
.gc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; margin-top: 10px; }
.gc-main { background: #1a2c38; border-radius: 10px; padding: 14px; }
.gc-info h2 { margin: 0 0 8px; font-size: 20px; }
.gc-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gc-save { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: #b1bad3; cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.gc-save .ico { width: 16px; height: 16px; }
.gc-save.on { color: #ffd54a; }
.gc-playing { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #b1bad3; }
.gc-tabs { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.gc-tabs button { border: 0; background: #0f212e; color: #b1bad3; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
.gc-tabs button.on { background: #2f4553; color: #fff; }
.gc-row { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.gc-row:nth-child(odd) { background: #12202b; }
.gc-desc { margin: 0; white-space: pre-wrap; line-height: 1.55; color: #b1bad3; font-size: 14px; }
.gc-side { background: #1a2c38; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-self: start; }
.gc-side h3 { margin: 0 0 6px; font-size: 14px; }
.gc-other { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #fff; text-align: left; padding: 6px; border-radius: 8px; cursor: pointer; font: inherit; }
.gc-other:hover { background: #213743; }
.gc-tile { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: hsl(var(--h, 200) 45% 32%); flex: none; }
.gc-oname { display: flex; flex-direction: column; min-width: 0; }
.gc-oname b { font-size: 14px; }
.gc-oname small { color: #b1bad3; font-size: 12px; }
body.theater .layout { display: block; }
body.theater .controls-col { margin-bottom: 10px; }
@media (max-width: 900px) { .gc-grid { grid-template-columns: 1fr; } .gc-right { margin-left: 0; } }

/* ---- phones: one tidy header row, nothing wider than the screen */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 700px) {
  header.top { gap: 5px; padding-left: 8px; padding-right: 8px; min-width: 0; }
  header.top .icon-btn { width: 34px; height: 34px; padding: 0; flex: none; }
  header.top #btnBell, header.top #btnFeedToggle { display: inline-flex; }
  header.top #btnSearch { display: none; }
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand .chip, .brand-logo { width: 32px; height: 32px; flex: none; }
  .balance { padding: 0 8px; gap: 4px; min-width: 0; }
  .balance .label:not(#currencyLabel) { display: none; }
  .balance .value { font-size: 13px; }
  .balance #currencyLabel { font-size: 10px; }
  .wallet-btn { padding: 0 10px; font-size: 13px; height: 34px; }
  #authButtons { gap: 4px; }
  #authButtons button { padding: 0 10px; font-size: 13px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .controls-col { order: 2; }
  .stage-col { order: 1; min-width: 0; }
  .stage { max-width: 100%; overflow: hidden; }
  .feed-panel .table-wrap { overflow-x: auto; }
  .modal, .sheet, .sheet-wide { max-width: calc(100vw - 16px); }
  .support-pop { right: 8px; left: 8px; width: auto; bottom: 76px; }
  .fabs { right: 12px; bottom: 12px; }
  .gc-toolbar { gap: 6px; padding: 6px; }
  .gc-fair { font-size: 12px; padding: 0 8px; }
  .gc-mode { width: 100%; }
  .gc-m { flex: 1; }
  .promo-card { padding: 12px; }
  .ticker { font-size: 13px; }
}
@media (max-width: 700px) {
  header.top .mode-tabs { display: none !important; }
  header.top .brand #siteName { display: none !important; }
  header.top:has(#btnWallet.hide) #btnBell,
  header.top:has(#btnWallet.hide) #btnFeedToggle { display: none; }
}

/* ---- lobby banners: the supplied pictures replace the drawn art */
.hero-casino .hero-art { background: #0b1f3a url('/banners/casino.jpg') center / cover no-repeat; }
.hero-match .hero-art { background: #0b1f3a url('/banners/match.jpg') center / cover no-repeat; }
.hero-casino .art-a, .hero-casino .art-b, .hero-casino .art-c,
.hero-match .art-a, .hero-match .art-b, .hero-match .art-c { display: none; }
.hero-casino .hero-title, .hero-match .hero-title { text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }

/* lobby rows: two rows of cards, the rest behind the button */
.gcard-grid > [hidden] { display: none !important; }
button.load-more { width: 100%; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
button.load-more[hidden] { display: none; }
button.load-more:hover { color: #fff; }

/* third-party game inside the page */
.ext-wrap { width: 100%; background: #000; border-radius: 8px; overflow: hidden; }
.ext-frame { display: block; width: 100%; height: min(72vh, 640px); min-height: 420px; border: 0; background: #000; }
@media (max-width: 700px) { .ext-frame { height: 72vh; min-height: 360px; } }
.theater .ext-frame { height: 82vh; }

#stage:fullscreen, #stage:-webkit-full-screen { background: #000; }
#stage:fullscreen .ext-wrap, #stage:fullscreen .ext-frame { width: 100vw; height: 100vh; min-height: 0; border-radius: 0; }

.ext-wrap:fullscreen, .ext-wrap:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; background: #000; }
.ext-wrap:fullscreen .ext-frame, .ext-wrap:-webkit-full-screen .ext-frame { width: 100%; height: 100%; min-height: 0; }

.ext-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.ext-info-cell { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ext-info-k { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .04em; }
.ext-info-cell b { font-size: 15px; }

.ban-overlay { position: fixed; inset: 0; z-index: 2147483647; background: #7a0000; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 20px; }
.ban-box { max-width: 520px; }
.ban-ico { font-size: 96px; line-height: 1; }
.ban-box h1 { font-size: clamp(28px, 7vw, 56px); margin: 12px 0; font-weight: 900; letter-spacing: .02em; }
.ban-box p { font-size: clamp(15px, 3.5vw, 20px); opacity: .95; }
.ban-time { font-size: clamp(40px, 12vw, 84px); font-weight: 900; margin-top: 16px; font-variant-numeric: tabular-nums; }

/* ---- smaller wallet, sturdier mobile header (overrides, kept last) */
.balance { height: 38px; padding: 0 12px; }
.balance .value { font-size: 14px; }
#balanceBox:not([hidden]) + .wallet-btn { height: 38px; padding: 0 16px; font-size: 14px; }
@media (max-width: 700px) {
  header.top { flex-wrap: nowrap; overflow: hidden; }
  header.top .brand { margin-left: 0; flex: 0 0 auto; max-width: 40px; overflow: hidden; }
  header.top .brand #siteName { display: none !important; }
  .balance { height: 30px; padding: 0 6px; max-width: 34vw; overflow: hidden; }
  .balance .value { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .balance #currencyLabel { display: none; }
  #balanceBox:not([hidden]) + .wallet-btn { height: 30px; padding: 0 9px; font-size: 12px; }
  header.top .icon-btn { width: 30px; height: 30px; }
  #authButtons button { padding: 0 8px; font-size: 12px; height: 30px; }
  .ext-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ext-frame { height: 78vh; }
}

/* cards with a cover image show only the picture */
.pcard-art.has-cover { font-size: 0 !important; color: transparent !important; text-shadow: none !important; }
.pcard-art.has-cover::before, .pcard-art.has-cover::after { content: none !important; }

/* games keep their own 16:9 shape: no black side bars, centred, never taller than the screen */
@media (min-width: 701px) {
  .ext-wrap { max-width: calc((100vh - 200px) * 16 / 9); min-width: min(100%, 640px); margin: 0 auto; }
  .ext-frame { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .theater .ext-wrap { max-width: calc((100vh - 120px) * 16 / 9); }
  .theater .ext-frame { height: auto; }
  #stage:fullscreen .ext-wrap, .ext-wrap:fullscreen { max-width: none; width: 100vw; height: 100vh; }
  #stage:fullscreen .ext-frame, .ext-wrap:fullscreen .ext-frame { aspect-ratio: auto; height: 100%; }
}

/* ================= wallet: right side, slim, oval ================= */
header.top .balance { height: 34px; padding: 0 14px; border-radius: 999px 0 0 999px; background: #0f212e; margin-left: 0; }
header.top .balance .value { font-size: 13.5px; font-weight: 700; }
#balanceBox:not([hidden]) + .wallet-btn { height: 34px; padding: 0 16px; font-size: 13px; border-radius: 0 999px 999px 0; margin-right: 8px; }
@media (max-width: 700px) {
  header.top .balance { height: 28px; padding: 0 8px; }
  #balanceBox:not([hidden]) + .wallet-btn { height: 28px; padding: 0 10px; font-size: 12px; margin-right: 4px; }
}

/* ================= live support button ================= */
.fabs { right: 22px; bottom: 22px; gap: 10px; align-items: flex-end; }
.fab { width: auto; height: 50px; min-width: 50px; padding: 0 18px 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #1fa2ff 0%, #12d8b3 100%); color: #04202c; font-weight: 800; font-size: 14px;
  box-shadow: 0 10px 28px rgba(18, 216, 179, .35), 0 2px 6px rgba(0, 0, 0, .35); transition: transform .15s ease, box-shadow .2s ease; }
.fab:hover:not(:disabled) { background: linear-gradient(135deg, #3bb0ff 0%, #2ae6c2 100%); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(18, 216, 179, .5), 0 2px 6px rgba(0, 0, 0, .35); }
#fabSupport::after { content: 'Canlı Destek'; }
#fabTop { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; background: #22384a; color: #cfe3ff; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
#fabTop:hover:not(:disabled) { background: #2d4a61; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.fab.has-avatar { padding: 0; }
@media (max-width: 700px) { #fabSupport::after { content: none; } #fabSupport { padding: 0; width: 48px; justify-content: center; } }

/* ================= thin modern scrollbars ================= */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 150, 175, .45) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(120, 150, 175, .4); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(150, 185, 210, .65); }

/* ================= ticker image strip ================= */
.ticker-img { height: 26px; width: auto; vertical-align: middle; margin: 0 40px; border-radius: 6px; }
.ticker { padding: 6px 0; }

/* ================= neon theme (colour from the admin panel) ================= */
body.neon:not([style*="--neon"]) { --neon: #00e5ff; }
body.neon header.top { box-shadow: 0 1px 0 var(--neon), 0 4px 24px color-mix(in srgb, var(--neon) 35%, transparent); }
body.neon .brand { text-shadow: 0 0 10px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 60%, transparent); }
body.neon header.top .balance { box-shadow: inset 0 0 0 1px var(--neon), 0 0 14px color-mix(in srgb, var(--neon) 45%, transparent); }
body.neon #balanceBox:not([hidden]) + .wallet-btn { background: var(--neon); color: #02141a; box-shadow: 0 0 16px var(--neon); font-weight: 800; }
body.neon button.primary, body.neon .btn.primary { box-shadow: 0 0 14px color-mix(in srgb, var(--neon) 70%, transparent); }
body.neon .pcard.live:hover, body.neon .gcard:hover { box-shadow: 0 0 0 2px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 60%, transparent); }
body.neon .ticker { box-shadow: inset 0 0 0 1px var(--neon), 0 0 18px color-mix(in srgb, var(--neon) 45%, transparent); }
body.neon .ticker-item::before { color: var(--neon); text-shadow: 0 0 8px var(--neon); }
body.neon .ticker-img { box-shadow: 0 0 12px var(--neon); }
body.neon .sidebar .side-item.on, body.neon .sidebar .on { box-shadow: inset 3px 0 0 var(--neon); }
body.neon .ext-wrap { box-shadow: 0 0 0 1px var(--neon), 0 0 28px color-mix(in srgb, var(--neon) 40%, transparent); }
body.neon #fabSupport { background: var(--neon); color: #02141a; box-shadow: 0 0 22px var(--neon); }
body.neon *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--neon) 55%, transparent); }

/* ================= providers ================= */
.prov-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.prov-chip { height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: #1a2c38; color: #cfe3ff; font-weight: 700; font-size: 13px; cursor: pointer; }
.prov-chip:hover { background: #24394a; }
.prov-chip.on { background: #fe1812; color: #fff; }
body.neon .prov-chip.on { background: var(--neon); color: #02141a; box-shadow: 0 0 14px var(--neon); }
.pcard-prov { flex: 1; font-size: 11px; font-weight: 700; color: #9fb4c7; text-align: left; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; }
.gc-tile.has-cover { background-size: 107% 107%; background-position: center; background-repeat: no-repeat; }
.lobby-h[style*="cursor"]:hover .lobby-h-t { text-decoration: underline; }
.page-p { line-height: 1.6; color: #cfe3ff; margin: 6px 0 12px; }

/* personal bonuses + chat pdf */
.pb-card{display:grid;gap:8px;padding:12px;margin-bottom:10px;border:1px solid var(--line,#2a3140);border-radius:14px;background:rgba(255,255,255,.03)}
.pb-img{width:100%;max-height:160px;object-fit:cover;border-radius:10px}
.ops-pdf{color:inherit;text-decoration:underline}
#currencyLabel{display:inline-flex;align-items:center;gap:5px}

/* signup: compact, two sliding pages, red wrong fields */
.reg-view{overflow:hidden;width:min(340px,82vw)}
.reg-track{display:flex;transition:transform .3s ease;width:100%}
.reg-pane{flex:0 0 100%;display:grid;gap:8px;align-content:start;padding:2px;box-sizing:border-box}
.reg-pane .field{margin:0}
.reg-pane input,.reg-pane select{padding:8px 10px;font-size:14px}
.reg-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.reg-dots{display:flex;justify-content:center;gap:6px;margin:6px 0}
.reg-dots i{width:7px;height:7px;border-radius:50%;background:#3a4a58}
.reg-dots i.on{background:var(--neon,#00e5ff)}
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:38px;box-sizing:border-box}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:#8aa;padding:4px;cursor:pointer;width:30px;height:30px}
.pw-eye.on{color:var(--neon,#00e5ff)}
.pw-eye svg{width:18px;height:18px}
.req{color:#ff4d4d;font-style:normal}
.phone-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px}
.bad-in{border-color:#ff4d4d!important;box-shadow:0 0 0 1px #ff4d4d inset}
.bad-f>span{color:#ff4d4d}
.modal.reg-modal{max-width:380px;width:92vw;padding:18px}
.reg-view{width:100%!important;transition:height .25s ease}
.reg-track{align-items:flex-start}
.reg-pane{gap:6px}
.gc-maxbet{background:var(--neon,#00e5ff);color:#02141a;border:0;border-radius:8px;padding:6px 12px;font-weight:800;font-size:12px;letter-spacing:.04em;cursor:pointer}
.gc-maxbet:hover{filter:brightness(1.1)}

/* profile: small, short, two sliding pages */
.pf-tabs{display:flex;gap:6px;margin-bottom:8px}
.pf-tab{flex:1;background:#0f212e;color:#9fb4c7;border:1px solid #2a3b48;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:700;cursor:pointer}
.pf-tab.on{color:#02141a;background:var(--neon,#00e5ff);border-color:transparent}
.pf-info{gap:0}
.pf-row{display:flex;justify-content:space-between;gap:10px;padding:6px 2px;border-bottom:1px solid #1d2d3a;font-size:13px}
.pf-row span{color:#9fb4c7}
.pf-row b{color:#fff;text-align:right;overflow-wrap:anywhere;max-width:62%}
/* left menu: long lists fold, the rest scrolls */
.side-extra{display:none}
.side-sub.more .side-extra{display:flex}
.side-sub.more{max-height:none}
.side-more .side-label{color:var(--neon,#00e5ff)!important;font-size:13px!important}
.side-child{height:34px}
.side-child .side-label{font-size:13px}
/* game card: name, with a tiny online line under it */
.pcard-foot.two{flex-wrap:wrap;height:auto;row-gap:1px}
.pcard-foot.two .pcard-prov{flex:1 1 0;min-width:0}
.pcard-foot.two .g-online{flex-basis:100%;margin:0 0 0 12px;font-size:10px;color:#7e90a3}
.pcard-foot.two .g-online .online-dot{width:5px;height:5px}
/* VIP sheet a little smaller */
.vip-badge.big{width:60px;height:60px}
.vip-card-main{gap:6px}
.vip-card-name{font-size:15px}
.vip-card-pct{font-size:14px}
.vip-card small{font-size:12px}
.bonus-row{padding:12px 14px;gap:12px;margin-bottom:8px}
.bonus-ico{width:44px;height:44px;border-radius:12px}
.bonus-ico .ico{width:22px;height:22px}

/* provider rows as buttons, with an optional logo */
.side-child{margin:3px 10px;border-radius:8px;background:#152a3a;height:34px;padding-left:12px!important;gap:8px;width:calc(100% - 20px)}
.side-child:hover{background:#1c3549}
.side-child.on{background:#21415a}
.prov-logo{width:20px;height:20px;border-radius:5px;object-fit:contain;flex:0 0 auto;background:#0b1721}
.prov-chip{display:inline-flex;align-items:center;gap:6px}
.prov-chip .prov-logo{width:18px;height:18px}
.side-more{justify-content:center}
/* currency logo in the wallet pill: smaller, inside the pill */
#currencyLabel .wal-coin,#currencyLabel .wal-logo{width:20px;height:20px;font-size:10px;border-radius:50%;object-fit:cover}
.gc-cur .wal-coin{width:20px;height:20px;font-size:10px}

.prov-bar.folded{max-height:84px;overflow:hidden;position:relative;padding-right:130px}
.prov-bar .prov-more{background:#fe1812;color:#fff}
.prov-bar.folded .prov-more{position:absolute;right:0;bottom:0}

.cur-drop{padding:8px;font-size:12px}
.cur-drop .cur-logo,.cur-drop .wal-coin,.cur-drop .wal-logo{width:22px;height:22px;font-size:10px}
.cur-drop .cur-row{padding:5px 8px;gap:8px;font-size:12px}
.cur-drop .cur-row b{font-size:12px}.cur-drop .cur-row small{font-size:10px}
.cur-drop .cur-search{height:30px;font-size:12px}


/* ---- lobby: three small entrances side by side (slots, live casino, sports), sport tiles, sportsbook frame */
.hero { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
.hero-art { height: 108px; }
.hero-foot { padding: 10px 14px; font-size: 14px; }
.hero-title { font-size: 18px; left: 14px; top: 12px; }
.hero-live .hero-art { background: linear-gradient(135deg, #7a2fd6 0%, #2a1170 100%); }
.hero-live .art-a, .hero-live .art-b, .hero-live .art-c { display: none; }
.hero-live .hero-title { text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.sport-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sport-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; height: 128px; padding: 14px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; text-align: left;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(150deg, var(--c1) 0%, var(--c2) 100%); box-shadow: 0 6px 16px rgba(0, 0, 0, .28); transition: transform .15s, box-shadow .15s; }
.sport-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .38); }
.sport-ic { position: absolute; right: 10px; top: 8px; font-size: 52px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); opacity: .95; }
.sport-nm { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.sport-go { font-size: 12px; font-weight: 700; opacity: .85; }
.sport-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 0; border-radius: 12px; }
.lobby-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.lobby-head .lobby-h { margin: 0; }
.lobby-head .lobby-search { flex: 1 1 240px; margin: 0; }
.live-page { margin-top: -8px; }
@media (max-width: 700px) {
  .hero { gap: 8px; }
  .hero-art { height: 78px; }
  .hero-title { font-size: 13px; left: 9px; top: 8px; }
  .hero-foot { display: none; }
  .sport-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sport-tile { height: 100px; padding: 11px; }
  .sport-ic { font-size: 40px; }
  .sport-frame { height: calc(100dvh - 120px); min-height: 480px; border-radius: 8px; }
  .live-page { margin-top: -4px; }
}


/* ---- stage 1 refresh: bigger entrances with admin banners, one-row provider chips, 3-up promotions, short account menu, dark boxes */
:root { --bg: #172b39; --bg-deep: #101f2b; --box: #05080b; --box-line: #1f3342; }
body { background: var(--bg); }
.hero { gap: 14px; }
.hero-art { height: 190px; position: relative; }
.hero-art.has-media { background: #000 !important; }
.hero-art.has-media .art-a, .hero-art.has-media .art-b, .hero-art.has-media .art-c { display: none; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-art.has-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 45%); pointer-events: none; }
.hero-title { font-size: 22px; z-index: 2; }
.hero-card, .hero-foot { background: var(--box); }
.hero-card:hover:not(:disabled) { background: #0b1118; }
.prov-bar, .prov-bar.folded { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; padding-right: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.prov-bar::-webkit-scrollbar { display: none; }
.prov-chip { flex: none; background: var(--box); border: 1px solid var(--box-line); }
.prov-chip.on { background: #fe1812; border-color: #fe1812; }
.lobby-search, .cur-search, input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea { background-color: var(--box); }
.lobby-search { border-color: var(--box-line); }
.pcard-art, .gcard { background-color: #0a1118; }
.promo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.promo-card { padding: 0; overflow: hidden; gap: 0; background: var(--box); border: 1px solid var(--box-line); }
.promo-media { position: relative; aspect-ratio: 16 / 9; background: #0c1722; overflow: hidden; }
.promo-media .promo-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.promo-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 800; color: #fe1812; background: linear-gradient(135deg, #0f2236, #0a1522); }
.promo-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.promo-title { margin: 0; font-size: 16px; line-height: 1.25; }
.promo-text { margin: 0; font-size: 13px; line-height: 1.45; color: #b1bad3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.promo-body .promo-more { align-self: flex-start; margin-top: 2px; }
.promo-detail-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; }
.lobby > h2.lobby-h:first-child { margin-top: 0; }
.lobby:not(:has(.hero)) { margin-top: -14px; }
#userButtons.menu-panel { position: fixed; top: calc(var(--top-h, 56px) + 6px); right: 10px; left: auto; width: 250px; max-height: calc(100dvh - var(--top-h, 56px) - 20px); overflow-y: auto; padding: 6px; z-index: 80; background: #0f1b25; border: 1px solid var(--box-line); }
#userButtons.menu-panel::before { display: none; }
#userButtons .menu-item { height: 40px; font-size: 14px; }
#userButtons .menu-extra { display: none; }
#userButtons.show-extra .menu-extra { display: flex; }
#userButtons .menu-more { color: #ff6a64; }
.menu-more-ic { width: 22px; text-align: center; font-size: 20px; line-height: 1; }
@media (max-width: 900px) {
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-art { height: 150px; }
}
@media (max-width: 700px) {
  .hero { gap: 8px; }
  .hero-art { height: 112px; }
  .hero-title { font-size: 13px; left: 9px; top: 9px; }
  .promo-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #userButtons.menu-panel { right: 6px; width: min(260px, calc(100vw - 12px)); }
  .lobby, .lobby-row, .gcard-grid { max-width: 100%; }
}

/* ---- red neon theme (from the mock-up): near-black navy pages, dark-red boxes with glowing red edges */
:root {
  --bg: #070c18; --bg-deep: #050912; --panel: #0b121e; --panel-hi: #131b2b; --bg-input: #070c18; --box: #18070f; --field: #070c18;
  --red: #fe1812; --red-2: #e32722; --red-dim: #782a29; --glow: 0 0 14px rgba(227, 39, 34, .55);
  --text: #f1f4fa; --text-dim: #a9b4c8; --blue: #fe1812; --blue-hi: #ff3b35;
  --gold: #e32722; --gold-bright: #ff5a54; --gold-dim: #8f1713; --gold-line: rgba(227, 39, 34, .30); --gold-glow: rgba(254, 24, 18, .45);
}
body { background: #070c18; color: #f1f4fa; }
header.top { background: #0b121e; box-shadow: 0 1px 0 rgba(227, 39, 34, .25); }
.sidebar { background: #070c18; }
.side-nav { background: #0b121e; border: 1px solid #b3262a; border-radius: 12px; box-shadow: var(--glow), inset 0 0 16px rgba(227, 39, 34, .12); }
.side-item { color: #f1f4fa; }
.side-item:hover:not(:disabled) { background: rgba(227, 39, 34, .12); }
.side-item.on { background: rgba(227, 39, 34, .18); box-shadow: inset 3px 0 0 #fe1812; }
.side-item .ico { color: #ff5a54; }
.mode-tabs .mode { background: #191e2c; color: #a9b4c8; }
.mode-tabs .mode.on, .mode-tabs .mode:hover:not(:disabled) { background: #29313c; color: #fff; }
.balance { background: #070c16; }
.hero-card { background: linear-gradient(180deg, #1c0810, #12060b); border: 1px solid #c9272b; box-shadow: var(--glow), inset 0 0 18px rgba(227, 39, 34, .18); }
.hero-foot { background: transparent; }
.hero-card:hover:not(:disabled) { background: linear-gradient(180deg, #260a14, #170810); box-shadow: 0 0 22px rgba(254, 24, 18, .7), inset 0 0 18px rgba(227, 39, 34, .25); }
.hero-art.has-media::after { background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 45%); }
.prov-chip { background: #2e0b10; border: 1px solid #782a29; color: #f1f4fa; box-shadow: 0 0 8px rgba(227, 39, 34, .25); }
.prov-chip:hover { background: #3d0f16; border-color: #c9272b; box-shadow: var(--glow); }
.prov-chip.on { background: #fe1812; border-color: #ff5a54; color: #fff; box-shadow: var(--glow); }
.lobby-search, .cur-search, input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea { background-color: #070c18; }
.lobby-search { border: 1px solid #5a1d24; border-radius: 10px; }
.lobby-search:focus-within { border-color: #e32722; box-shadow: var(--glow); }
.pcard-art, .gcard { background-color: #0b121e; border: 1px solid #2a1218; }
.pcard.live:hover .pcard-art { box-shadow: var(--glow); }
.promo-card { background: #0b121e; border: 1px solid #5a1d24; box-shadow: 0 0 10px rgba(227, 39, 34, .18); }
.promo-card:hover { border-color: #c9272b; box-shadow: var(--glow); }
.promo-media, .promo-ph { background: #12060b; }
.promo-ph { color: #fe1812; }
.sport-tile { border: 1px solid rgba(255, 255, 255, .12); }
#userButtons.menu-panel { background: #0b121e; border: 1px solid #b3262a; box-shadow: var(--glow); }
.menu-item:hover { background: rgba(227, 39, 34, .15); }
.menu-item .ico { color: #ff5a54; }
.load-more { color: #a9b4c8; }
.load-more::before, .load-more::after { background: #3a1a22; }
#fabSupport { background: #fe1812; box-shadow: var(--glow); color: #fff; }
.stage { background: #0b121e; }
.hero-live .hero-art { background: linear-gradient(135deg, #7a0f0c 0%, #2a0509 100%); }

/* ---- live support: custom colour/background, small phone button, no sideways shifting */
.sp-head { background: var(--sp-color, linear-gradient(135deg, #fe1812, #7a0c0a)) !important; }
.support-pop .ops-compose .btn-main { background: var(--sp-color, #fe1812); }
.support-pop .ops-msgs { background-size: cover; background-position: center; }
#fabSupport { transition: transform .25s ease, opacity .25s ease; }
@media (max-width: 700px) {
  #fabSupport { width: 40px; height: 40px; right: 10px; bottom: 12px; }
  #fabSupport.fab-hide { transform: translateY(90px); opacity: 0; pointer-events: none; }
  .support-pop { right: 8px; left: 8px; bottom: 64px; width: auto; max-width: none; height: min(480px, calc(100dvh - 96px)); }
  html, body { overflow-x: hidden; max-width: 100vw; }
  .lobby, .live-page, .hero { max-width: 100%; }
  .prov-bar { max-width: 100%; overflow-x: auto; }
}

/* ---- red neon edges (cards, chips, search, VIP) + "Oyna" hover on game cards */
:root { --neon-r: #ff2a24; --neon-glow: 0 0 0 1px rgba(255,42,36,.85), 0 0 10px rgba(255,42,36,.65), 0 0 22px rgba(255,42,36,.35), inset 0 0 10px rgba(255,42,36,.18); }
.pcard-art, .gcard { border: 1px solid rgba(255,42,36,.9) !important; box-shadow: var(--neon-glow); border-radius: 12px; }
.pcard.ext .pcard-art { position: relative; overflow: hidden; }
.pcard.ext:hover .pcard-art { box-shadow: 0 0 0 1px #ff4a44, 0 0 16px rgba(255,42,36,.9), 0 0 34px rgba(255,42,36,.55), inset 0 0 14px rgba(255,42,36,.3); }
.prov-chip { border: 1px solid rgba(255,42,36,.85) !important; box-shadow: 0 0 8px rgba(255,42,36,.45), inset 0 0 6px rgba(255,42,36,.15); }
.prov-chip.on { box-shadow: 0 0 14px rgba(255,42,36,.85); }
.lobby-search { border: 1px solid rgba(255,42,36,.9) !important; box-shadow: var(--neon-glow); }
.hero-card { box-shadow: var(--neon-glow) !important; border: 1px solid rgba(255,42,36,.9) !important; }
.vip-strip { border: 1px solid rgba(255,42,36,.9) !important; box-shadow: var(--neon-glow); background: linear-gradient(180deg, #1a0709, #0b0508) !important; }
.vip-strip .vip-fill { background: linear-gradient(90deg, #a10d0a, #ff2a24) !important; box-shadow: 0 0 12px rgba(255,42,36,.8); }
.vip-strip .vip-bar { border: 1px solid rgba(255,42,36,.5); box-shadow: 0 0 8px rgba(255,42,36,.3); }
.vip-strip .vip-pct, .vip-strip .vip-lv { color: #ff6a64 !important; }
/* hover: dark blur layer, red play button and the word "Oyna" */
.pcard.ext .pcard-art::before, .pcard.ext .pcard-art.has-cover::before {
  content: 'Oyna' !important; position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; transform: none; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26%;
  font-size: 15px !important; font-weight: 700; color: #fff !important; text-shadow: none !important; letter-spacing: .02em;
  background: rgba(8,4,6,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.pcard.ext .pcard-art::after, .pcard.ext .pcard-art.has-cover::after {
  content: '' !important; position: absolute; left: 50%; top: 42%; width: 52px; height: 52px; margin: -26px 0 0 -26px; z-index: 3; border-radius: 50%;
  background: #ff2a24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow: 0 0 18px rgba(255,42,36,.9); opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.pcard.ext:hover .pcard-art::before, .pcard.ext:hover .pcard-art::after, .pcard.ext:focus-visible .pcard-art::before, .pcard.ext:focus-visible .pcard-art::after { opacity: 1; }
.pcard.ext:hover .pcard-art::after { transform: scale(1); }
@media (hover: none) { .pcard.ext .pcard-art::before, .pcard.ext .pcard-art::after { display: none; } }

/* ============ red neon, round 2: windows, panels, drop-downs, notifications ============ */
body.neon, body.neon:not([style*="--neon"]) { --neon: #ff2a24; }
.pf-tab.on, .gc-maxbet { color: #fff !important; background: #ff2a24 !important; box-shadow: 0 0 12px rgba(255,42,36,.7); }
.side-more .side-label { color: #ff6a64 !important; }
.modal-back { background: rgba(4,2,3,.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal, .modal.sheet {
  background: linear-gradient(180deg, #170709, #0a0507) !important; color: var(--text);
  border: 1px solid rgba(255,42,36,.9) !important; border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(255,42,36,.45), 0 0 22px rgba(255,42,36,.5), inset 0 0 18px rgba(255,42,36,.12), 0 28px 60px rgba(0,0,0,.7);
}
.modal.sheet { max-width: 470px; padding: 16px; }
.modal.sheet.wide { max-width: 720px; }
.modal.sheet.sheet-i-wallet { max-width: 390px; }
.modal[data-t="Profilim"] { max-width: 620px; width: 94vw; padding: 24px; font-size: 16px; }
.modal[data-t="Profilim"] header h2 { font-size: 22px; }
.modal header { margin-bottom: 14px; }
.modal header h2, .sheet-head h2, .modal .sheet-head h2 {
  font-family: var(--sans) !important; color: #fff !important; font-size: 17px; font-weight: 800; text-shadow: 0 0 10px rgba(255,42,36,.5);
}
.modal h3, .modal .sheet-h3, .modal h3.sheet-h3 { font-family: var(--sans) !important; color: #fff !important; font-size: 15px; font-weight: 800; margin: 14px 0 8px; }
.sheet-ico, .sheet-x { color: #ff6a64 !important; }
.modal p, .modal small, .modal .hint { color: #c9b3b6; }
.modal input, .modal select, .modal textarea { background: #070c18 !important; border: 1px solid #5a1d24 !important; border-radius: 10px !important; color: #fff !important; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #ff2a24 !important; box-shadow: 0 0 0 1px rgba(255,42,36,.6), 0 0 12px rgba(255,42,36,.45) !important; outline: 0; }
.modal button:not(.icon-btn):not(.pill):not(.sheet-x):not(.ghost) { background: #1c0a0e; border: 1px solid rgba(255,42,36,.75); border-radius: 999px; color: #fff; }
.modal button:not(.icon-btn):not(.pill):not(.sheet-x):not(.ghost):hover:not(:disabled) { background: #2d0e14; box-shadow: 0 0 12px rgba(255,42,36,.5); }
.modal button.primary, .modal button.btn-main, .btn-main, .modal .wal-actions button:last-child {
  background: linear-gradient(180deg, #ff3b35, #c3100c) !important; border: 0 !important; border-radius: 999px !important; color: #fff !important;
  box-shadow: 0 0 14px rgba(255,42,36,.6) !important; text-shadow: none;
}
.modal button.btn-main:disabled { opacity: .45; box-shadow: none !important; }
.btn-2nd, .modal button.ghost { background: #1c0a0e !important; border: 1px solid rgba(255,42,36,.7) !important; border-radius: 999px !important; color: #fff !important; }
.modal button.ghost.tiny { padding: 4px 14px; }
.pill-tabs { background: #0a0507 !important; border: 1px solid rgba(255,42,36,.55); box-shadow: 0 0 10px rgba(255,42,36,.25); }
.pill:hover:not(:disabled) { background: #2a0c11 !important; }
.pill.on { background: #ff2a24 !important; box-shadow: 0 0 12px rgba(255,42,36,.7); }
.modal-tabs, .modal .tabs { gap: 6px; border: 0; }
.modal-tabs button, .modal .tabs button { border-radius: 999px !important; border: 1px solid rgba(255,42,36,.5) !important; background: #14070a !important; color: #f1d9db !important; border-bottom-width: 1px; }
.modal-tabs button.on, .modal .tabs button.on { background: #ff2a24 !important; color: #fff !important; box-shadow: 0 0 12px rgba(255,42,36,.7); }
.stat-card, .vip-card, .bonus-row, .wal-table, .modal .panel, .modal .box, .modal .ops-card {
  background: linear-gradient(180deg, #1a0709, #0c0508) !important; border: 1px solid rgba(255,42,36,.6) !important; border-radius: 14px !important;
  box-shadow: 0 0 10px rgba(255,42,36,.28), inset 0 0 10px rgba(255,42,36,.1);
}
.vip-card, .vip-card.lvl1, .vip-card.lvl2, .vip-card.lvl3, .vip-card.lvl4, .vip-card.lvl5 { border-color: rgba(255,42,36,.9) !important; box-shadow: var(--neon-glow); }
.vip-bar { background: #1c0a0e !important; border: 1px solid rgba(255,42,36,.45); }
.vip-card .vip-fill, .vip-card.lvl1 .vip-fill, .vip-card.lvl2 .vip-fill { background: linear-gradient(90deg, #a10d0a, #ff2a24) !important; box-shadow: 0 0 10px rgba(255,42,36,.8); }
.bonus-ico { background: #2a0c11 !important; color: #ff6a64 !important; border-radius: 14px; }
.bonus-row { padding: 14px 16px; gap: 14px; margin-bottom: 10px; }
.bonus-ico { width: 48px; height: 48px; }
.bonus-text b { font-size: 16px; } .bonus-text small { font-size: 14px; }
.wal-head { border-bottom-color: rgba(255,42,36,.4); }
.modal table th { color: #ff8a85; }
.modal table td { border-color: rgba(255,42,36,.18); }
.modal a { color: #ff6a64; }
/* wallet: smaller */
.sheet-i-wallet .wal-total { font-size: 20px; margin: 2px 0 12px; }
.sheet-i-wallet .wal-label, .sheet-i-wallet .wal-cur { font-size: 13px; }
.sheet-i-wallet .pill { height: 34px; padding: 0 11px; font-size: 13px; }
.sheet-i-wallet .pill-tabs { margin-bottom: 12px; }
.sheet-i-wallet .wal-table { padding: 12px 14px 4px; }
.sheet-i-wallet .wal-row { padding: 8px 0; }
.sheet-i-wallet .wal-coin { width: 26px; height: 26px; font-size: 12px; }
.sheet-i-wallet .wal-name b, .sheet-i-wallet .wal-val { font-size: 14px; } .sheet-i-wallet .wal-name small { font-size: 12px; }
.sheet-i-wallet .wal-actions { margin-top: 12px; gap: 8px; }
.sheet-i-wallet .btn-main, .sheet-i-wallet .btn-2nd, .sheet-i-wallet .wal-actions button { height: 40px; font-size: 14px; }
.sheet-i-vault, .sheet-i-chart, .sheet-i-list, .sheet-i-receipt, .sheet-i-gear, .sheet-i-scale, .sheet-i-shield, .sheet-i-share, .sheet-i-mail, .sheet-i-gift { font-size: 14px; }
/* Profilim: bigger rows */
.modal[data-t="Profilim"] .row, .modal[data-t="Profilim"] .kv, .modal[data-t="Profilim"] li { padding: 8px 0; }
.modal[data-t="Profilim"] .modal-tabs button, .modal[data-t="Profilim"] .tabs button { height: 44px; font-size: 15px; }
/* drop-downs: currency, notifications, quick menu, account menu */
.cur-drop, .notif-panel, .quick-panel, #userButtons.menu-panel {
  background: linear-gradient(180deg, #170709, #0a0507) !important; border: 1px solid rgba(255,42,36,.9) !important; border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(255,42,36,.4), 0 0 20px rgba(255,42,36,.45), 0 20px 40px rgba(0,0,0,.6) !important;
}
.cur-drop { padding: 10px; font-size: 13px; }
.cur-drop .cur-search { background: #070c18 !important; border: 1px solid #5a1d24 !important; border-radius: 999px !important; color: #fff; height: 34px; padding: 0 14px; }
.cur-drop .cur-search:focus { border-color: #ff2a24 !important; box-shadow: 0 0 12px rgba(255,42,36,.5) !important; }
.cur-row { border-radius: 12px; }
.cur-row:hover, .cur-row.on { background: rgba(255,42,36,.18) !important; box-shadow: inset 0 0 0 1px rgba(255,42,36,.55); }
.cur-drop .cur-logo, .cur-drop .wal-coin, .cur-drop .wal-logo { background: #3a0f15 !important; color: #ffb0ac; }
.cur-drop *::-webkit-scrollbar-thumb, .cur-drop::-webkit-scrollbar-thumb { background: #ff2a24; border-radius: 6px; }
.notif-head { color: #fff; border-bottom: 1px solid rgba(255,42,36,.45) !important; }
.notif-row { border-radius: 12px; margin-top: 4px; background: rgba(255,255,255,.03); }
.notif-row.new { background: rgba(255,42,36,.16) !important; box-shadow: inset 0 0 0 1px rgba(255,42,36,.5); }
.notif-row small { color: #d8b6b9; }
.notif-act { align-self: flex-start; margin-top: 6px; height: 30px; padding: 0 20px; border: 0; border-radius: 999px; font-weight: 800; font-size: 13px; color: #fff; cursor: pointer; background: linear-gradient(180deg, #ff3b35, #c3100c); box-shadow: 0 0 12px rgba(255,42,36,.65); }
.notif-act:hover { background: #ff3b35; }
.notif-empty { color: #c9b3b6; }
/* account menu: compact, wallet and others smaller */
#userButtons.menu-panel { width: 228px; padding: 6px; }
#userButtons .menu-item { height: 36px; padding: 0 10px; font-size: 13.5px; border-radius: 10px; }
#userButtons .menu-item .ico { width: 17px; height: 17px; }
/* top bar: wallet pill smaller */
header.top .balance { height: 32px; padding: 0 12px; }
header.top .balance .value { font-size: 12.5px; }
#balanceBox:not([hidden]) + .wallet-btn { height: 32px; padding: 0 14px; font-size: 12.5px; }
header.top .icon-btn { width: 36px; height: 36px; }
#btnAccount { transform: scale(1.12); }
/* home: provider chips on one line, sports tiles same size as game cards, smaller VIP strip */
.prov-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.prov-bar::-webkit-scrollbar { display: none; }
.prov-chip { flex: 0 0 auto; }
.sport-row { grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); }
.sport-row .sport-tile { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 133 / 178; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,42,36,.9) !important; box-shadow: var(--neon-glow); background: linear-gradient(160deg, var(--c1), var(--c2)); justify-content: flex-end; }
.sport-row .sport-tile.has-img { background: #0b121e; }
.sport-row .sport-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sport-row .sport-tile.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.78)); }
.sport-row .sport-nm, .sport-row .sport-go { position: relative; z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.sport-row .sport-nm { font-size: 15px; } .sport-row .sport-ic { font-size: 44px; }
.sport-row .sport-tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #ff4a44, 0 0 18px rgba(255,42,36,.9); }
.vip-strip { padding: 8px 14px !important; min-height: 0; }
.vip-strip .vip-badge { width: 36px !important; height: 36px !important; }
.vip-strip .vip-name, .vip-strip b { font-size: 14px; }
.vip-strip small, .vip-strip .vip-pct, .vip-strip .vip-lv { font-size: 12px; }
@media (max-width: 700px) {
  .modal, .modal.sheet, .modal[data-t="Profilim"] { max-width: calc(100vw - 16px) !important; width: calc(100vw - 16px); max-height: 90dvh; overflow-y: auto; padding: 14px; }
  .modal[data-t="Profilim"] { font-size: 15px; }
  .hero { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
  .hero-art { height: 76px; }
  .hero-title { font-size: 11px; left: 8px; top: 8px; letter-spacing: 0; }
  .hero-foot { padding: 6px 8px; font-size: 11px; }
  .hero-foot .hero-play::before { margin-right: 5px; font-size: 9px; }
  .hero-online { display: none; }
  .hero-card { border-radius: 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .notif-panel { right: 8px; left: 8px; width: auto; max-width: none; }
  .cur-drop { width: calc(100vw - 16px); }
  .vip-strip { padding: 6px 10px !important; }
  .sport-row { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  #btnAccount { transform: none; }
}

/* every green primary / wallet button is red now */
button.primary, .btn.primary, a.primary, .wallet-btn, #btnWallet, #balanceBox + .wallet-btn {
  background: linear-gradient(180deg, #ff3b35, #c3100c) !important; color: #fff !important; border-color: transparent !important; text-shadow: none !important;
}
button.primary:hover:not(:disabled), .wallet-btn:hover { background: #ff3b35 !important; box-shadow: 0 0 14px rgba(255,42,36,.7) !important; }

/* top bar: red mode tabs, neon buttons and icons, neon ticker */
.mode-tabs .mode { background: #1c0a0e !important; color: #ffd9d7 !important; border: 1px solid rgba(255,42,36,.85) !important; box-shadow: 0 0 10px rgba(255,42,36,.45), inset 0 0 8px rgba(255,42,36,.15); border-radius: 999px !important; }
.mode-tabs .mode.on, .mode-tabs .mode:hover:not(:disabled) { background: linear-gradient(180deg, #ff3b35, #c3100c) !important; color: #fff !important; box-shadow: 0 0 16px rgba(255,42,36,.85); }
#authButtons .ghost, #authButtons .primary, #btnSignin, #btnSignup {
  background: linear-gradient(180deg, #ff3b35, #c3100c) !important; color: #fff !important; border: 1px solid #ff6a64 !important; border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(255,42,36,.6), 0 0 14px rgba(255,42,36,.75) !important; font-weight: 800;
}
#btnSignin { background: #1c0a0e !important; }
#btnSignin:hover, #btnSignup:hover { box-shadow: 0 0 22px rgba(255,42,36,.95) !important; }
#balanceBox:not([hidden]) + .wallet-btn, .wallet-btn { border: 1px solid #ff6a64 !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(255,42,36,.55), 0 0 14px rgba(255,42,36,.8) !important; }
header.top .balance { border: 1px solid rgba(255,42,36,.85) !important; border-radius: 999px 0 0 999px !important; box-shadow: 0 0 10px rgba(255,42,36,.45) !important; }
header.top .icon-btn { border: 1px solid rgba(255,42,36,.85) !important; border-radius: 50% !important; background: #14070a !important; box-shadow: 0 0 10px rgba(255,42,36,.5), inset 0 0 6px rgba(255,42,36,.15) !important; color: #ffd9d7; }
header.top .icon-btn:hover { box-shadow: 0 0 18px rgba(255,42,36,.95) !important; background: #2a0c11 !important; }
header.top #btnMenu { border-radius: 12px !important; }
.ticker { border: 1px solid rgba(255,42,36,.9); border-radius: 12px; background: #0a0507; box-shadow: var(--neon-glow); }
@media (max-width: 700px) { #authButtons .tiny { padding: 0 10px; font-size: 12px; height: 30px; } }

/* ============ round 3: coming-soon window, telegram buttons, intro, welcome banner, phone fixes ============ */
#btnAccount { transform: none !important; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
.soon-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px 10px; text-align: center; }
.soon-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #ff6a64; border: 1px solid rgba(255,42,36,.8); box-shadow: 0 0 18px rgba(255,42,36,.6), inset 0 0 12px rgba(255,42,36,.25); }
.soon-ico .ico { width: 34px; height: 34px; }
.modal .soon-h { margin: 6px 0 0; font-size: 20px; }
.soon-p { margin: 0 0 8px; max-width: 320px; }
.soon-box .btn-main { min-width: 140px; height: 42px; }
/* telegram buttons: left menu and footer */
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #fff !important; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #ff3b35, #c3100c); border: 1px solid #ff6a64; box-shadow: 0 0 0 1px rgba(255,42,36,.55), 0 0 14px rgba(255,42,36,.7); }
.tg-btn .ico { width: 18px; height: 18px; }
.tg-btn:hover { box-shadow: 0 0 22px rgba(255,42,36,.95); }
.side-tg { display: flex; flex-direction: column; gap: 8px; margin: 12px 4px 6px; padding-top: 12px; border-top: 1px solid rgba(255,42,36,.25); }
.foot-tg { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; }
.foot-ico { border: 1px solid rgba(255,42,36,.7) !important; border-radius: 50% !important; color: #ffd9d7 !important; box-shadow: 0 0 10px rgba(255,42,36,.4); text-decoration: none; }
.foot-ico:hover { background: #2a0c11 !important; box-shadow: 0 0 16px rgba(255,42,36,.9); }
.foot-ico .ico { width: 18px; height: 18px; }
/* opening animation */
.intro { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 45%, #2a0709 0%, #070306 70%); opacity: 1; transition: opacity .6s ease; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-logo { display: grid; place-items: center; width: 96px; height: 96px; animation: intro-pop 1.1s cubic-bezier(.2,1.4,.4,1) both; }
.intro-logo img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 0 18px rgba(255,42,36,.9)); }
.intro-dot { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a85, #ff2a24 45%, #5a0d0a); box-shadow: 0 0 40px rgba(255,42,36,.9), 0 0 90px rgba(255,42,36,.5); }
.intro-name { font-size: clamp(24px, 6vw, 44px); font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 0 18px rgba(255,42,36,.9), 0 0 44px rgba(255,42,36,.6); animation: intro-rise .9s .25s ease both; }
.intro-bar { width: min(240px, 60vw); height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.1); }
.intro-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #a10d0a, #ff2a24); box-shadow: 0 0 12px #ff2a24; animation: intro-load 1.8s .2s ease-out forwards; }
@keyframes intro-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes intro-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes intro-load { to { width: 100%; } }
/* first-visit welcome banner */
.welcome-back { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,2,3,.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.welcome-card { position: relative; width: min(520px, 100%); max-height: 92dvh; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: linear-gradient(180deg, #170709, #0a0507); border: 1px solid rgba(255,42,36,.9); box-shadow: 0 0 0 1px rgba(255,42,36,.45), 0 0 28px rgba(255,42,36,.55); animation: intro-pop .5s ease both; }
.welcome-img { display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: transparent; cursor: pointer; }
.welcome-img img { display: block; width: 100%; max-height: 66dvh; object-fit: cover; }
.welcome-go { height: 46px; width: 100%; border-radius: 999px; font-size: 16px; }
.welcome-x { position: absolute; right: -6px; top: -6px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; color: #fff; background: #ff2a24; border: 2px solid #0a0507; box-shadow: 0 0 12px rgba(255,42,36,.8); }
/* game: full-window layer on phones, edges that let the page scroll */
.ext-wrap { position: relative; }
.ext-edge { display: none; }
.ext-wrap.pseudo-fs { position: fixed; inset: 0; z-index: 99999; width: 100vw; height: 100dvh; max-width: none !important; min-width: 0 !important; margin: 0; border-radius: 0; }
.ext-wrap.pseudo-fs .ext-frame { width: 100%; height: 100% !important; min-height: 0; aspect-ratio: auto !important; }
.ext-wrap.pseudo-fs .ext-edge { display: none; }
.fs-exit { position: absolute; right: 10px; top: 10px; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #fff; background: rgba(255,42,36,.9); border: 1px solid #ff6a64; box-shadow: 0 0 12px rgba(255,42,36,.8); }
body.fs-on { overflow: hidden; }
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px !important; }
  /* signed-out phone: only the menu button, logo + name, sign in and register */
  body:not(.authed) #btnAccount, body:not(.authed) #btnBell, body:not(.authed) #btnFeedToggle, body:not(.authed) #btnSearch,
  body:not(.authed) #btnWallet, body:not(.authed) #balanceBox, body:not(.authed) .mode-tabs { display: none !important; }
  body:not(.authed) header.top .brand { max-width: none; flex: 1 1 auto; min-width: 0; }
  body:not(.authed) header.top .brand #siteName { display: inline !important; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(.authed) #authButtons { flex: 0 0 auto; display: flex; gap: 6px; }
  /* game: a notch smaller on first open, and edge strips so a finger can scroll the page */
  .ext-frame { height: min(70dvh, 640px) !important; min-height: 360px !important; }
  .ext-edge { display: block; position: absolute; top: 0; bottom: 0; width: 22px; z-index: 3; touch-action: pan-y; }
  .ext-edge.l { left: 0; } .ext-edge.r { right: 0; }
  /* currency list: a sheet under the top bar with its own scrolling */
  .cur-drop { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important; top: 62px !important; transform: none !important; display: flex; flex-direction: column; max-height: min(70dvh, 460px); }
  .cur-drop .cur-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* live support: small, fits the screen */
  .support-pop { left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto !important; max-width: none !important; height: min(68dvh, 440px) !important; max-height: calc(100dvh - 16px) !important; border-radius: 14px; }
  .sp-head { padding: 8px 12px; }
  .sp-avatar { width: 30px; height: 30px; }
  .ops-compose { padding: 6px; gap: 6px; }
  .ops-compose input { min-width: 0; height: 38px; }
  .ops-compose button { height: 38px; padding: 0 12px; }
  #fabSupport { bottom: 12px; }
  /* live casino page */
  .live-page .lobby-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .live-page .lobby-head .lobby-search { flex: 0 0 auto; width: 100%; min-width: 0; margin: 0; }
  .live-page .prov-bar { margin: 4px 0 8px; }
  .tg-btn { height: 38px; font-size: 13px; }
}
/* nothing may be wider than the screen: grid children shrink, long chip rows scroll inside themselves */
.layout, .stage-col, .stage, .lobby, .controls-col, .wrap, .main { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr) !important; } }
.prov-bar { max-width: 100%; }
/* sub-pages (promotions, sports, live casino): the heading sits clear of the sticky top bar */
.lobby:not(:has(.hero)) { margin-top: 0 !important; padding-top: 6px; }
.lobby > h2.lobby-h:first-child, .lobby .lobby-head .lobby-h { margin-top: 4px; }
.promo-title { text-transform: none !important; letter-spacing: 0 !important; color: #fff !important; font-family: var(--sans) !important; font-size: 16px; }

/* ticker keeps moving even when the phone asks for reduced motion (the global rule froze it) */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-duration: var(--ticker-dur, 25s) !important; animation-iteration-count: infinite !important; }
}
.ticker { -webkit-overflow-scrolling: auto; contain: paint; }
.ticker-track { -webkit-animation-duration: var(--ticker-dur, 25s); backface-visibility: hidden; }

/* site name as a picture or video */
.brand-nameimg { height: 34px; max-width: 220px; width: auto; object-fit: contain; display: block; }
@media (max-width: 700px) { .brand-nameimg { height: 28px; max-width: 150px; } }

/* music button */
.music-btn { position: fixed; left: 12px; bottom: 76px; z-index: 60; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,42,36,.9); background: #0a0507; color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 0 14px rgba(255,42,36,.5); }
.music-btn.off { opacity: .55; box-shadow: none; }

/* IBAN / crypto address: long text wraps inside the box, the copy button drops below */
.dep-addr { flex-direction: column; align-items: stretch; }
.dep-addr .phrase-box { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.dep-addr .tiny { align-self: flex-start; }
.dep-info { min-width: 0; }
.dep-grid { min-width: 0; }

/* promo code box */
.pcode-box { margin: 14px 0 4px; padding: 12px; border: 1px solid rgba(255,42,36,.8); border-radius: 12px; background: #0a0507; box-shadow: 0 0 14px rgba(255,42,36,.25); }
.pcode-row { display: flex; gap: 8px; margin-top: 8px; }
.pcode-in { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,42,36,.6); background: #12090c; color: #fff; text-transform: uppercase; font-size: 16px; }

/* phones: dropdowns were cut off by the header (overflow hidden) and hid behind the page; they now float above everything */
@media (max-width: 900px) {
  header.top { overflow: visible !important; }
  .notif-panel, .quick-panel, .cur-drop { position: fixed !important; top: calc(var(--top-h, 56px) + 6px) !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; z-index: 2000 !important; max-height: calc(100dvh - var(--top-h, 56px) - 24px); overflow-y: auto; }
  #userButtons.menu-panel { z-index: 2000 !important; }
}

/* game close button (phones) */
.ext-close { display: none; }
@media (max-width: 900px) {
  .ext-wrap { position: relative; max-width: 100%; overflow: hidden; }
  .ext-close { display: grid; place-items: center; position: absolute; right: 8px; top: 8px; z-index: 6; width: 34px; height: 34px; padding: 0; border-radius: 50%; color: #fff; background: rgba(255,42,36,.92); border: 1px solid #ff6a64; box-shadow: 0 0 12px rgba(255,42,36,.8); }
  .ext-wrap.pseudo-fs .ext-close { display: none; }
  .game-chrome, .ext-info, #infoPanel { max-width: 100%; overflow: hidden; }
}

/* unread support messages on the floating support button */
#fabSupport { position: relative; }
#fabSupport[data-count]:not([data-count=""])::after { content: attr(data-count); position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: #d4140f; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; box-shadow: 0 0 10px rgba(255,42,36,.9); }

.brand .chip { width: 34px; height: 34px; }
.foot-trust { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin: 16px 0 6px; }
.foot-trust img { height: 38px; width: auto; max-width: 140px; object-fit: contain; opacity: .92; }
.foot-license { margin: 10px auto 4px; max-width: 900px; text-align: center; font-size: 12px; line-height: 1.55; color: #9aa7b8; overflow-wrap: anywhere; }
.foot-license a { color: #ff5a54; }

/* the close button sits in its own strip above the game, never on top of the game's own buttons */
@media (max-width: 900px) {
  .ext-wrap:not(.pseudo-fs) { padding-top: 40px; }
  .ext-close { top: 3px !important; right: 8px !important; width: 32px; height: 32px; }
}

/* phones: the game and sports frames fill most of the screen (they had shrunk to a strip) */
@media (max-width: 900px) {
  .ext-frame, .theater .ext-frame { height: min(82dvh, 760px) !important; min-height: 460px !important; aspect-ratio: auto !important; }
  .sport-frame, .ext-frame.sport-frame { height: calc(100dvh - 130px) !important; min-height: 560px !important; aspect-ratio: auto !important; }
  .ext-wrap.pseudo-fs .ext-frame { height: 100dvh !important; min-height: 0 !important; }
}

/* phones, round 5: bigger game, wide scroll strips on both sides, smaller profile / bell / panel buttons */
@media (max-width: 900px) {
  .ext-frame, .theater .ext-frame { height: max(78dvh, 520px) !important; min-height: 520px !important; }
  .ext-edge { width: 44px !important; }
  header.top .icon-btn, header.top #btnAccount, header.top #btnBell, header.top #btnFeedToggle { width: 30px !important; height: 30px !important; min-width: 30px !important; }
  header.top .icon-btn .ico, header.top #btnAccount .ico, header.top #btnBell .ico, header.top #btnFeedToggle .ico { width: 17px !important; height: 17px !important; }
  header.top .icon-btn svg { width: 17px; height: 17px; }
}

/* sportsbook frame: red neon edge and dark background to match the site */
.sport-frame { background: #0a0507 !important; border: 1px solid rgba(255,42,36,.9) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px rgba(255,42,36,.35), 0 0 22px rgba(255,42,36,.4); }

/* Spor sayfası: kutuyu yukarı al, ekrana sığdır */
.sport-page { padding-top: 0 !important; margin-top: -6px; }
.sport-page .lobby-h { margin: 0 0 6px !important; padding: 0 !important; font-size: 18px; }
.sport-page .hint { margin: 0 0 4px; }
.sport-page .sport-frame, .sport-page .ext-frame.sport-frame { height: calc(100dvh - 118px) !important; min-height: 520px !important; }
@media (max-width: 700px) {
  .sport-page .lobby-h { margin-bottom: 4px !important; font-size: 16px; }
  .sport-page .sport-frame, .sport-page .ext-frame.sport-frame { height: calc(100dvh - 104px) !important; min-height: 480px !important; }
}

/* Karşılama banner'ı: kayan slayt */
.welcome-view { overflow: hidden; border-radius: 14px; touch-action: pan-y; }
.welcome-track { display: flex; transition: transform .45s ease; transform: translateX(calc(var(--i, 0) * -100%)); }
.welcome-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.welcome-dots { display: flex; justify-content: center; gap: 7px; }
.welcome-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; }
.welcome-dots i.on { background: #ff2a24; box-shadow: 0 0 8px #ff2a24; }

/* Kırmızı kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: #ff2a24 #1a0a0c; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #1a0a0c; }
*::-webkit-scrollbar-thumb { background: #ff2a24; border-radius: 8px; border: 2px solid #1a0a0c; }
*::-webkit-scrollbar-thumb:hover { background: #ff5a52; }

/* Canlı destek: gönder / dosya butonları küçük */
.support-pop .ops-compose .btn-main, .support-pop .ops-compose .btn-2nd { width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 10px; display: grid; place-items: center; flex: none; }
.support-pop .ops-compose .btn-main svg, .support-pop .ops-compose .btn-2nd svg { width: 16px; height: 16px; }
.support-pop .ops-compose input[type=text] { height: 34px; min-width: 0; }

/* Bakım kutusu, karşılama (resimsiz), açılış videosu */
.maint-box { max-width: 520px; margin: 60px auto; padding: 32px 24px; text-align: center; border-radius: 18px; background: linear-gradient(180deg, #170709, #0a0507); border: 1px solid rgba(255,42,36,.8); box-shadow: 0 0 24px rgba(255,42,36,.35); }
.maint-box .soon-ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; color: #fff; background: #ff2a24; box-shadow: 0 0 22px rgba(255,42,36,.8); }
.maint-box .soon-h { margin: 0 0 8px; font-size: 22px; color: #fff; }
.maint-box .soon-p { margin: 0; color: #d8c4c4; line-height: 1.5; white-space: pre-line; }
.welcome-plain { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 8px; text-align: center; }
.welcome-plain img { max-height: 70px; filter: drop-shadow(0 0 14px rgba(255,42,36,.8)); }
.welcome-plain h3 { margin: 0; font-size: 24px; color: #fff; text-shadow: 0 0 16px rgba(255,42,36,.8); }
.welcome-plain p { margin: 0; color: #e6d3d3; line-height: 1.5; }
.intro.has-video { background: #000; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 8px 16px; border-radius: 999px; color: #fff; background: rgba(255,42,36,.85); border: 1px solid #ff2a24; font-weight: 700; cursor: pointer; }

.vault-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 13px; color: var(--text-dim, #9fb0c3); }
.vault-info b { color: #fff; }
.vault-maxrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vault-max { padding: 6px 12px; border-radius: 999px; border: 1px solid #fe1812; background: transparent; color: #fff; font-weight: 700; cursor: pointer; }
.vault-max:hover { background: rgba(254,24,18,.18); }

.bet-list { display: flex; flex-direction: column; gap: 12px; max-height: 70dvh; overflow-y: auto; padding: 2px 2px 8px; }
.bet-card { border: 1px solid rgba(254,24,18,.35); border-radius: 14px; background: rgba(255,255,255,.03); padding: 12px 14px; }
.bet-card.won { border-color: rgba(60,200,120,.5); } .bet-card.open { border-color: rgba(230,180,40,.5); }
.bc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bc-title { font-weight: 700; font-size: 15px; flex: 1 1 auto; min-width: 0; }
.bc-when { width: 100%; font-size: 12px; color: var(--text-dim, #9fb0c3); }
.bc-legs { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.bc-leg { padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); }
.bc-match { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.bc-pick { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-dim, #b9c6d6); margin-top: 2px; }
.bc-odds { font-weight: 700; color: #ffd166; }
.bc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.bc-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-k { font-size: 11px; color: var(--text-dim, #9fb0c3); } .bc-v { font-size: 14px; overflow-wrap: anywhere; }
.bc-v.pos { color: #3ddc84; } .bc-v.neg { color: #ff6a64; }
@media (max-width: 520px) { .bc-grid { grid-template-columns: repeat(2, 1fr); } }


.sport-warn { margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,196,0,.6); background: rgba(255,196,0,.12); color: #ffd666; font-weight: 700; font-size: 14px; line-height: 1.45; }

.dep-bonus { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.dep-bonus-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid rgba(254,24,18,.35); border-radius: 12px; cursor: pointer; }
.dep-bonus-opt span { display: flex; flex-direction: column; gap: 2px; } .dep-bonus-opt small { color: var(--text-dim, #9fb0c3); }

.dep-step { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #ff8a84; margin: 6px 0 8px; }
.dep-bonus { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.dep-bonus-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid rgba(254,24,18,.35); border-radius: 14px; background: rgba(255,255,255,.03); color: #fff; cursor: pointer; font: inherit; }
.dep-bonus-card .dbc-dot { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); }
.dep-bonus-card.on { border-color: #fe1812; background: rgba(254,24,18,.14); }
.dep-bonus-card.on .dbc-dot { border-color: #fe1812; background: radial-gradient(circle, #fe1812 45%, transparent 50%); }
.dep-bonus-card .dbc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.dep-bonus-card small { color: var(--text-dim, #b9a6a8); }
.dep-bonus-card.locked { opacity: .6; border-style: dashed; }
.dep-bonus-card .dbc-need { color: #ffd166; }
.dep-lock-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,196,0,.6); background: rgba(255,196,0,.1); color: #ffd666; font-weight: 600; }
.dep-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 14px; }

.dep-bonus { gap: 6px; }
.dep-bonus-card { padding: 8px 12px; gap: 10px; border-radius: 12px; font-size: 14px; }
.dep-bonus-card .dbc-dot { flex-basis: 16px; width: 16px; height: 16px; margin-top: 1px; }
.dep-bonus-card .dbc-txt { gap: 1px; } .dep-bonus-card small { font-size: 12px; line-height: 1.35; }

.sport-page .lobby-h { display: none !important; }
.sport-page { margin-top: -14px; }
.sport-page .sport-frame, .sport-page .ext-frame.sport-frame { height: calc(100dvh - 90px) !important; }
/* phones: two cards across the top (slots, sports), home rows show 2x2 */
@media (max-width: 700px) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .hero-art { height: 96px; }
}
/* live casino: every provider is one row that scrolls sideways */
.gcard-grid.live-hscroll { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--card-gap); padding-bottom: 8px; scroll-snap-type: x proximity; }
.gcard-grid.live-hscroll > * { flex: 0 0 var(--card-w); width: var(--card-w); scroll-snap-align: start; }