/* Gready World UI v7 — mobile-first dark arcade */
:root {
  --v7-bg: #03070c;
  --v7-surface: #07131d;
  --v7-surface2: #0a1c28;
  --v7-line: rgba(92, 145, 166, 0.24);
  --v7-green: #168bff;
  --v7-green2: #0756c9;
  --v7-gold: #ffd75e;
  --v7-text: #f5fbff;
  --v7-muted: #89a1b1;
  --v7-radius: 18px;
}

/* v7.1 Royal Blue + Metallic Gold theme */
:root {
  --gw-green: #168bff;
  --gw-gold: #ffc94a;
  --v7-line: rgba(72, 139, 255, 0.3);
}
body {
  background: radial-gradient(
    90% 40% at 50% 0,
    #12366f 0,
    #07152d 46%,
    #020611 100%
  ) !important;
}
.live-ticker {
  border-color: rgba(22, 139, 255, 0.48) !important;
}
.ticker-main:first-child {
  background: linear-gradient(
    135deg,
    rgba(22, 139, 255, 0.22),
    #07162d
  ) !important;
}
.stats-grid article:first-child {
  border-color: rgba(22, 139, 255, 0.58) !important;
  background: linear-gradient(145deg, #0c2855, #07152d) !important;
}
.recharge-open-btn {
  border-color: rgba(22, 139, 255, 0.34) !important;
  background: rgba(22, 139, 255, 0.08) !important;
}
.recharge-open-btn b {
  color: #e1efff !important;
}
.recharge-open-btn small {
  color: #8caed8 !important;
}
.game-card {
  border-color: rgba(22, 139, 255, 0.5) !important;
  background: linear-gradient(
    155deg,
    rgba(9, 29, 61, 0.98),
    rgba(2, 8, 20, 0.99)
  ) !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.5),
    0 0 42px rgba(22, 139, 255, 0.1) !important;
}
.phase-banner {
  background: linear-gradient(
    135deg,
    rgba(22, 139, 255, 0.17),
    rgba(255, 201, 74, 0.06)
  ) !important;
  color: #8cc6ff !important;
}
.board-wrap {
  background: radial-gradient(
    circle,
    #0d2855 0,
    #061329 45%,
    #19448a 46%,
    #07152f 69%,
    #01040c 71%
  ) !important;
  border-color: rgba(22, 139, 255, 0.38) !important;
  box-shadow:
    inset 0 0 38px #000,
    0 0 36px rgba(22, 139, 255, 0.2) !important;
}
.cell.selected {
  border-color: #2595ff !important;
  box-shadow:
    0 0 0 2px rgba(22, 139, 255, 0.2),
    0 0 26px rgba(22, 139, 255, 0.55) !important;
}
.center-disc {
  border-color: #ffe29a !important;
  background: radial-gradient(
    circle at 35% 25%,
    #ffe79e,
    #d99a16 62%,
    #795000
  ) !important;
  color: #171005 !important;
  box-shadow:
    0 0 0 7px rgba(22, 139, 255, 0.12),
    0 0 37px rgba(255, 201, 74, 0.55) !important;
}
.center-disc span,
.center-disc small {
  color: #392500 !important;
}
.bet-buttons button.selected,
.bet-buttons button.active {
  border-color: #8fcaff !important;
  background: linear-gradient(145deg, #269bff, #0756c9) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(22, 139, 255, 0.38) !important;
}
.app-bottom-nav {
  border-top-color: rgba(22, 139, 255, 0.3) !important;
  background: rgba(2, 7, 18, 0.97) !important;
}
.app-bottom-nav a.active {
  color: #ffc94a !important;
  background: linear-gradient(
    180deg,
    rgba(22, 139, 255, 0.2),
    transparent
  ) !important;
}
body {
  background: radial-gradient(
    90% 38% at 50% 0,
    #10342e 0,
    #07141f 45%,
    #03070c 100%
  ) !important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif !important;
}
.game-shell {
  width: min(600px, 100%) !important;
  padding: calc(var(--safe-top) + 5px) 9px calc(78px + var(--safe-bottom)) !important;
}
.app-header {
  min-height: 52px !important;
  margin: 0 0 7px !important;
  padding: 5px 3px !important;
  border: 0 !important;
}
.header-logo {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 215, 94, 0.5) !important;
}
.header-brand-copy h1 {
  font-size: 18px !important;
}
.header-actions {
  gap: 5px !important;
}
.icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #0d2230, #07131c) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}
.announcement-banner {
  border-radius: 14px !important;
}
.live-ticker {
  top: max(var(--safe-top), 4px) !important;
  border-color: rgba(32, 238, 145, 0.35) !important;
  border-radius: 16px !important;
  background: rgba(3, 12, 18, 0.94) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}
.ticker-main {
  min-height: 42px !important;
}
.ticker-main:first-child {
  background: linear-gradient(
    135deg,
    rgba(32, 238, 145, 0.16),
    #071723
  ) !important;
}
.ticker-main.winner {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 94, 0.13),
    #10150f
  ) !important;
}
.user-strip {
  padding: 7px 10px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #0d2130, #07131d) !important;
}
.user-strip > div:last-child {
  text-align: right;
}
.user-avatar {
  width: 32px !important;
  height: 32px !important;
}
.player-meta strong {
  font-size: 12px !important;
}
.stats-grid {
  grid-template-columns: 1.35fr 0.85fr 0.85fr 0.85fr !important;
}
.stats-grid article {
  min-height: 51px !important;
  padding: 8px 4px !important;
  border-color: var(--v7-line) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #0c202d, #06111a) !important;
}
.stats-grid article:first-child {
  border-color: rgba(32, 238, 145, 0.48) !important;
  background: linear-gradient(145deg, #0d2b25, #07151d) !important;
}
.stats-grid span {
  font-size: 7px !important;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.stats-grid strong {
  font-size: 14px !important;
}
.stats-grid article:first-child strong {
  color: var(--v7-gold) !important;
}
.wallet-toolbar {
  margin: 0 0 7px !important;
}
.recharge-open-btn {
  min-height: 36px !important;
  padding: 6px 9px !important;
  border-color: rgba(32, 238, 145, 0.24) !important;
  border-radius: 12px !important;
  background: rgba(32, 238, 145, 0.055) !important;
}
.recharge-icon {
  width: 27px !important;
  height: 27px !important;
  background: linear-gradient(
    145deg,
    var(--v7-green),
    var(--v7-green2)
  ) !important;
}
.recharge-open-btn b {
  color: #dfffee;
}
.recharge-open-btn small {
  color: #7fa796 !important;
}
.game-card {
  position: relative;
  padding: 9px !important;
  border: 1px solid rgba(32, 238, 145, 0.42) !important;
  border-radius: 22px !important;
  background: linear-gradient(
    155deg,
    rgba(10, 28, 40, 0.98),
    rgba(3, 10, 16, 0.98)
  ) !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.46),
    0 0 40px rgba(32, 238, 145, 0.06) !important;
}
.phase-banner {
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: rgba(32, 238, 145, 0.08) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px;
}
.phase-banner.result {
  background: rgba(255, 215, 94, 0.11) !important;
  color: var(--v7-gold) !important;
}
.board-wrap {
  width: min(350px, 92vw) !important;
  height: min(350px, 92vw) !important;
  margin: 9px auto !important;
  background: radial-gradient(
    circle,
    #0d2630 0,
    #061018 45%,
    #153b35 46%,
    #07151d 69%,
    #02060a 71%
  ) !important;
  border: 1px solid rgba(32, 238, 145, 0.24);
  box-shadow:
    inset 0 0 38px #000,
    0 0 34px rgba(32, 238, 145, 0.12) !important;
}
.cell {
  width: 84px !important;
  height: 84px !important;
  border: 2px solid #31515e !important;
  background: linear-gradient(160deg, #112d3b, #07121b) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5) !important;
}
.cell.hot {
  background: linear-gradient(160deg, #39280c, #11150e) !important;
  border-color: #7c6321 !important;
}
.cell .icon {
  font-size: 27px !important;
}
.cell .name {
  font-size: 9px !important;
}
.cell .multi {
  color: var(--v7-gold) !important;
}
.cell.selected {
  border-color: var(--v7-green) !important;
  box-shadow:
    0 0 0 2px rgba(32, 238, 145, 0.18),
    0 0 24px rgba(32, 238, 145, 0.38) !important;
}
.cell.active,
.cell.win {
  border-color: var(--v7-gold) !important;
  box-shadow: 0 0 30px rgba(255, 215, 94, 0.8) !important;
}
.center-disc {
  width: 105px !important;
  height: 105px !important;
  border: 3px solid #8effca !important;
  background: radial-gradient(
    circle at 35% 25%,
    #2cff9c,
    #08714e 62%,
    #033a2c
  ) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 7px rgba(32, 238, 145, 0.08),
    0 0 35px rgba(32, 238, 145, 0.48) !important;
}
.center-disc strong {
  font-size: 32px !important;
}
.center-disc span,
.center-disc small {
  color: #d8ffed;
}
.instruction {
  font-size: 9px !important;
  color: var(--v7-muted) !important;
}
.bet-buttons {
  gap: 6px !important;
}
.bet-buttons button {
  min-height: 45px !important;
  padding: 10px 3px !important;
  border: 1px solid rgba(255, 215, 94, 0.34) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #1d220f, #0b1515) !important;
  color: var(--v7-gold) !important;
  font-size: 11px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}
.bet-buttons button.selected,
.bet-buttons button.active {
  border-color: #7dffd0 !important;
  background: linear-gradient(145deg, #21dc89, #078a58) !important;
  color: #02180f !important;
  box-shadow: 0 8px 22px rgba(32, 238, 145, 0.23) !important;
}
.selection-card,
.status-card {
  border-color: var(--v7-line) !important;
  background: rgba(5, 15, 22, 0.78) !important;
}
.section-title {
  color: #eaf8ff !important;
}
.status-card {
  min-height: 38px !important;
}
.panel-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}
.panel {
  border-color: var(--v7-line) !important;
  background: linear-gradient(145deg, #091a25, #050d14) !important;
}
.panel-grid .panel {
  max-height: 190px;
  overflow: auto;
}
.history-panel {
  max-height: 210px;
  overflow: auto;
}
.winner-row,
.leader-row,
.history-row {
  grid-template-columns: 29px 1fr auto !important;
  font-size: 10px !important;
}
.rank {
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
}
.row-value {
  font-size: 9px;
}
.app-bottom-nav {
  height: calc(66px + var(--safe-bottom)) !important;
  border-top-color: rgba(32, 238, 145, 0.2) !important;
  background: rgba(3, 10, 15, 0.96) !important;
}
.app-bottom-nav a {
  font-size: 8px !important;
}
.app-bottom-nav a b {
  font-size: 19px !important;
}
.app-bottom-nav a.active {
  color: var(--v7-green) !important;
  background: linear-gradient(
    180deg,
    rgba(32, 238, 145, 0.12),
    transparent
  ) !important;
}
footer {
  color: #607887 !important;
}
footer a {
  color: #91b9a9 !important;
}
@media (max-width: 390px) {
  .game-shell {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .header-brand-copy h1 {
    font-size: 17px !important;
  }
  .icon-btn {
    width: 33px !important;
    height: 33px !important;
  }
  .stats-grid strong {
    font-size: 12px !important;
  }
  .board-wrap {
    width: min(322px, 92vw) !important;
    height: min(322px, 92vw) !important;
  }
  .cell {
    width: 77px !important;
    height: 77px !important;
  }
  .cell .icon {
    font-size: 24px !important;
  }
  .center-disc {
    width: 96px !important;
    height: 96px !important;
  }
  .panel-grid {
    grid-template-columns: 1fr !important;
  }
  .panel-grid .panel {
    max-height: 175px;
  }
}
@media (max-width: 350px) {
  .header-actions .icon-btn:nth-child(2),
  .header-actions .icon-btn:nth-child(3) {
    display: none;
  }
  .board-wrap {
    width: 300px !important;
    height: 300px !important;
  }
  .cell {
    width: 72px !important;
    height: 72px !important;
  }
  .center-disc {
    width: 90px !important;
    height: 90px !important;
  }
}

/* Final cascade lock: Royal Blue + Gold */
body {
  background: radial-gradient(
    90% 40% at 50% 0,
    #12366f 0,
    #07152d 46%,
    #020611 100%
  ) !important;
}
.live-ticker {
  border-color: rgba(22, 139, 255, 0.48) !important;
}
.ticker-main:first-child {
  background: linear-gradient(
    135deg,
    rgba(22, 139, 255, 0.22),
    #07162d
  ) !important;
}
.stats-grid article:first-child {
  border-color: rgba(22, 139, 255, 0.58) !important;
  background: linear-gradient(145deg, #0c2855, #07152d) !important;
}
.recharge-open-btn {
  border-color: rgba(22, 139, 255, 0.34) !important;
  background: rgba(22, 139, 255, 0.08) !important;
}
.game-card {
  border-color: rgba(22, 139, 255, 0.5) !important;
  background: linear-gradient(
    155deg,
    rgba(9, 29, 61, 0.98),
    rgba(2, 8, 20, 0.99)
  ) !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.5),
    0 0 42px rgba(22, 139, 255, 0.1) !important;
}
.phase-banner {
  background: linear-gradient(
    135deg,
    rgba(22, 139, 255, 0.17),
    rgba(255, 201, 74, 0.06)
  ) !important;
  color: #8cc6ff !important;
}
.board-wrap {
  background: radial-gradient(
    circle,
    #0d2855 0,
    #061329 45%,
    #19448a 46%,
    #07152f 69%,
    #01040c 71%
  ) !important;
  border-color: rgba(22, 139, 255, 0.38) !important;
  box-shadow:
    inset 0 0 38px #000,
    0 0 36px rgba(22, 139, 255, 0.2) !important;
}
.cell.selected {
  border-color: #2595ff !important;
  box-shadow:
    0 0 0 2px rgba(22, 139, 255, 0.2),
    0 0 26px rgba(22, 139, 255, 0.55) !important;
}
.center-disc {
  border-color: #ffe29a !important;
  background: radial-gradient(
    circle at 35% 25%,
    #ffe79e,
    #d99a16 62%,
    #795000
  ) !important;
  color: #171005 !important;
  box-shadow:
    0 0 0 7px rgba(22, 139, 255, 0.12),
    0 0 37px rgba(255, 201, 74, 0.55) !important;
}
.center-disc span,
.center-disc small {
  color: #392500 !important;
}
.bet-buttons button.selected,
.bet-buttons button.active {
  border-color: #8fcaff !important;
  background: linear-gradient(145deg, #269bff, #0756c9) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(22, 139, 255, 0.38) !important;
}
.app-bottom-nav {
  border-top-color: rgba(22, 139, 255, 0.3) !important;
  background: rgba(2, 7, 18, 0.97) !important;
}
.app-bottom-nav a.active {
  color: #ffc94a !important;
  background: linear-gradient(
    180deg,
    rgba(22, 139, 255, 0.2),
    transparent
  ) !important;
}