/* =========================================================
   PBx1 ELITE
   DRAGON TIGER
   PREMIUM SERVER-AUTHORITATIVE UI
   ========================================================= */


html,
body {

  margin: 0;
  padding: 0;

  min-height: 100%;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(244,63,94,.09),
      transparent 38%
    ),

    radial-gradient(
      circle at 50% 32%,
      rgba(234,179,8,.065),
      transparent 52%
    ),

    #000 !important;

  background-attachment: fixed !important;

  color: #fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.dt-wrapper {

  width: 100%;

  max-width: 480px;

  margin: 0 auto;

  padding:
    9px
    11px
    26px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  gap: 9px;
}


/* =========================================================
   ARENA
   ========================================================= */

.dt-arena {

  position: relative;

  width: 100%;

  overflow: hidden;

  box-sizing: border-box;

  padding:
    13px
    11px
    15px;

  border:
    1px solid
    rgba(255,215,0,.30);

  border-radius: 20px;

  background:

    radial-gradient(
      circle at 50% 45%,
      #1b0d25 0%,
      #0b0610 54%,
      #020203 100%
    );

  box-shadow:

    inset 0 0 35px
    rgba(0,0,0,.92),

    0 9px 28px
    rgba(0,0,0,.80);
}


.dt-arena::before {

  content: "";

  position: absolute;

  width: 170%;
  height: 170%;

  left: -35%;
  top: -35%;

  background:

    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(244,63,94,.045) 55deg,
      transparent 115deg,
      rgba(234,179,8,.045) 220deg,
      transparent 315deg
    );

  animation:
    arenaRotate
    24s
    linear
    infinite;

  pointer-events: none;

  z-index: 0;
}


@keyframes arenaRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   ROUND ID
   ========================================================= */

.round-id-tag {

  position: absolute;

  top: 9px;
  left: 10px;

  z-index: 20;

  max-width: 175px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  padding:
    4px
    8px;

  border-radius: 7px;

  background:
    rgba(0,0,0,.72);

  border:
    1px solid
    rgba(255,255,255,.09);

  color: #858585;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 9px;

  font-weight: 800;
}


/* =========================================================
   SOUND
   ========================================================= */

.sound-toggle-btn {

  position: absolute;

  top: 8px;
  right: 10px;

  z-index: 20;

  width: 33px;
  height: 33px;

  padding: 0;

  border-radius: 9px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    rgba(0,0,0,.72);

  border:
    1px solid
    rgba(255,215,0,.35);

  color: #ffd700;

  font-size: 13px;

  cursor: pointer;

  transition:
    transform .15s ease,
    background .15s ease;
}


.sound-toggle-btn:active {

  transform:
    scale(.91);
}


/* =========================================================
   TIMER
   ========================================================= */

.dt-timer-badge {

  position: relative;

  z-index: 5;

  width: max-content;

  min-width: 120px;

  margin:
    19px
    auto
    0;

  padding:
    6px
    17px;

  box-sizing: border-box;

  border-radius: 30px;

  background:
    rgba(0,0,0,.82);

  border:
    1.3px solid
    #ffd700;

  color: #ffd700;

  text-align: center;

  font-size: 12px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: .35px;

  box-shadow:
    0 0 15px
    rgba(255,215,0,.18);

  transition:
    all .2s ease;
}


.dt-timer-badge.locked {

  border-color:
    #ff3b4f;

  color:
    #ff3b4f;

  box-shadow:
    0 0 17px
    rgba(255,59,79,.30);
}


/* =========================================================
   DUEL STAGE
   ========================================================= */

.cards-duel-stage {

  position: relative;

  z-index: 3;

  width: 100%;

  margin:
    14px
    0
    8px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  perspective: 1100px;
}


.card-slot {

  width: 100px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;
}


/* =========================================================
   CARD LABEL
   ========================================================= */

.card-label {

  min-height: 19px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  font-size: 12px;

  font-weight: 1000;

  letter-spacing: 1.25px;
}


.card-label.dragon {

  color: #f43f5e;

  text-shadow:
    0 0 11px
    rgba(244,63,94,.65);
}


.card-label.tiger {

  color: #eab308;

  text-shadow:
    0 0 11px
    rgba(234,179,8,.65);
}


/* =========================================================
   CARD FLIPPER
   ========================================================= */

.card-flipper-container {

  position: relative;

  width: 91px;
  height: 124px;

  flex-shrink: 0;

  transform-style: preserve-3d;

  transform:
    rotateY(180deg);

  transform-origin:
    center center;

  transition:
    transform
    .72s
    cubic-bezier(
      .22,
      .75,
      .20,
      1
    );

  will-change: transform;
}


.card-flipper-container.is-flipped {

  transform:
    rotateY(0deg);
}


/* =========================================================
   CARD SIDE
   ========================================================= */

.card-side {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  border-radius: 12px;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;

  overflow: hidden;

  user-select: none;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.82);
}


/* =========================================================
   CARD BACK
   ========================================================= */

.card-back-face {

  transform:
    rotateY(180deg);

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    2px solid
    #e9c238;

  background:

    radial-gradient(
      circle at center,
      #8a192b 0%,
      #560d18 45%,
      #1f0308 100%
    );

  box-shadow:

    inset 0 0 0 3px
    rgba(0,0,0,.45),

    inset 0 0 0 5px
    rgba(255,215,0,.07),

    0 10px 25px
    rgba(0,0,0,.85);
}


.card-back-face::before {

  content: "";

  position: absolute;

  inset: 7px;

  border:
    1px solid
    rgba(255,215,0,.48);

  border-radius: 8px;

  background:

    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 2px,
      transparent 2px,
      transparent 7px
    );
}


.card-back-face::after {

  content: "PBX1";

  position: absolute;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle,
      #1b1510,
      #060606
    );

  border:
    2px solid
    rgba(255,215,0,.68);

  color: #ffd700;

  font-size: 10px;

  font-weight: 1000;

  letter-spacing: 1.4px;

  box-shadow:
    0 0 15px
    rgba(255,215,0,.18);
}


/* =========================================================
   CARD FRONT
   ========================================================= */

.card-front-face {

  transform:
    translateZ(.1px);

  position: absolute;

  padding: 0;

  background:
    linear-gradient(
      145deg,
      #fff 0%,
      #fafafa 54%,
      #e7e7e7 100%
    );

  border:
    1px solid
    #cfcfcf;

  color: #151515;

  box-shadow:

    inset 0 0 0 1px
    rgba(0,0,0,.04),

    inset 0 0 14px
    rgba(0,0,0,.08),

    0 10px 28px
    rgba(0,0,0,.82);
}


.card-front-face.red {

  color: #d51f35;
}


.card-front-face.black {

  color: #151515;
}


/* =========================================================
   CARD VALUES
   ========================================================= */

.card-top-left {

  position: absolute;

  top: 7px;
  left: 9px;

  width: 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 18px;

  line-height: 1;

  font-weight: 1000;

  z-index: 4;
}


.card-inner-val {

  display: block;
}


/* =========================================================
   CENTER SUIT
   ========================================================= */

.card-suit-icon {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 42px;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 30px;

  line-height: 1;

  z-index: 3;

  pointer-events: none;
}


.card-suit-icon i {

  display: block !important;

  font-size: 30px !important;

  line-height: 1 !important;
}


/* =========================================================
   BOTTOM VALUE
   ========================================================= */

.card-bottom-right {

  position: absolute;

  right: 9px;
  bottom: 7px;

  width: 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 18px;

  line-height: 1;

  font-weight: 1000;

  transform:
    none !important;

  z-index: 4;
}


/* =========================================================
   CARD REVEAL
   ========================================================= */

.card-flipper-container.is-flipped
.card-front-face {

  animation:
    cardReveal
    .55s
    ease-out;
}


@keyframes cardReveal {

  0% {

    box-shadow:
      0 0 0
      rgba(255,215,0,0);
  }

  45% {

    box-shadow:

      0 0 25px
      rgba(255,215,0,.60),

      0 0 45px
      rgba(255,159,28,.22);
  }

  100% {

    box-shadow:

      0 10px 28px
      rgba(0,0,0,.82),

      inset 0 0 14px
      rgba(0,0,0,.08);
  }
}


/* =========================================================
   VS
   ========================================================= */

.vs-emblem {

  position: relative;

  z-index: 8;

  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #fff1a8,
      #ff9f1c 55%,
      #d80000
    );

  border:
    2px solid
    #fff;

  color: #050505;

  font-size: 14px;

  font-weight: 1000;

  font-style: italic;

  box-shadow:
    0 0 18px
    rgba(255,159,28,.65);

  animation:
    vsPulse
    1.8s
    ease-in-out
    infinite
    alternate;
}


@keyframes vsPulse {

  from {

    transform:
      scale(.94)
      rotate(-2deg);
  }

  to {

    transform:
      scale(1.06)
      rotate(2deg);
  }
}


/* =========================================================
   RESULT TEXT
   ========================================================= */

.round-outcome-banner {

  position: relative;

  z-index: 4;

  min-height: 17px;

  margin-top: 2px;

  text-align: center;

  font-size: 12px;

  font-weight: 1000;

  letter-spacing: .7px;

  text-transform: uppercase;

  color: #fff;
}


/* =========================================================
   BET ZONES
   ========================================================= */

.bet-spots-grid {

  width: 100%;

  display: grid;

  grid-template-columns:
    1fr
    .82fr
    1fr;

  gap: 7px;
}


.bet-box {

  position: relative;

  min-height: 91px;

  box-sizing: border-box;

  padding:
    10px
    4px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 4px;

  border-radius: 14px;

  background: #080512;

  border:
    1px solid
    rgba(255,255,255,.08);

  box-shadow:
    0 5px 16px
    rgba(0,0,0,.72);

  cursor: pointer;

  transition:
    transform .12s ease,
    filter .12s ease,
    opacity .2s ease;
}


.bet-box:active {

  transform:
    scale(.96);
}


.bet-box.is-locked {

  opacity: .50;

  cursor: not-allowed;

  filter:
    grayscale(.12);
}


.dragon-zone {

  border-color:
    rgba(244,63,94,.45);

  background:
    linear-gradient(
      180deg,
      rgba(244,63,94,.13),
      #080512
    );
}


.tie-zone {

  border-color:
    rgba(0,230,137,.42);

  background:
    linear-gradient(
      180deg,
      rgba(0,230,137,.12),
      #080512
    );
}


.tiger-zone {

  border-color:
    rgba(234,179,8,.45);

  background:
    linear-gradient(
      180deg,
      rgba(234,179,8,.12),
      #080512
    );
}


/* =========================================================
   BET ICONS
   ========================================================= */

.bet-zone-icon {

  font-size: 21px;

  line-height: 1;

  margin-bottom: 1px;
}


.dragon-icon {

  color: #f43f5e;

  filter:
    drop-shadow(
      0 0 6px
      rgba(244,63,94,.38)
    );
}


.tie-icon {

  color: #00e689;

  filter:
    drop-shadow(
      0 0 6px
      rgba(0,230,137,.30)
    );
}


.tiger-icon {

  color: #eab308;

  filter:
    drop-shadow(
      0 0 6px
      rgba(234,179,8,.34)
    );
}


/* =========================================================
   BET TEXT
   ========================================================= */

.bet-spot-name {

  font-size: 13px;

  font-weight: 1000;

  line-height: 1.1;
}


.dragon-zone
.bet-spot-name {

  color: #f43f5e;
}


.tie-zone
.bet-spot-name {

  color: #00e689;
}


.tiger-zone
.bet-spot-name {

  color: #eab308;
}


.bet-spot-rate {

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 10px;

  font-weight: 800;

  color: #8f96a2;
}


/* =========================================================
   CHIP BADGE
   ========================================================= */

.placed-chip-badge {

  position: absolute;

  top: 50%;
  left: 50%;

  width: 44px;
  height: 44px;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(.25);

  display: none;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #00c06d,
      #008f52 68%,
      #022013
    );

  border:
    2.5px dashed
    #ffd700;

  color: #fff;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 10px;

  font-weight: 1000;

  box-shadow:

    0 4px 15px
    rgba(0,0,0,.95),

    0 0 15px
    rgba(0,192,109,.60);

  z-index: 20;

  pointer-events: none;

  transition:
    transform
    .25s
    cubic-bezier(
      .175,
      .885,
      .32,
      1.275
    );
}


.placed-chip-badge.active-show {

  display: flex;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);
}


/* =========================================================
   CONTROLLER
   ========================================================= */

.bet-controller-panel {

  width: 100%;

  box-sizing: border-box;

  padding:
    11px;

  border:
    1px solid
    rgba(255,215,0,.22);

  border-radius: 14px;

  background:
    #080512;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.72);

  display: flex;

  flex-direction: column;

  gap: 9px;
}


/* =========================================================
   STEPPER
   ========================================================= */

.stepper-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 9px;
}


.stepper-label {

  color: #858585;

  font-size: 10px;

  font-weight: 1000;

  letter-spacing: .7px;

  white-space: nowrap;
}


.stepper-box {

  width: 190px;
  height: 43px;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    3px 5px;

  background:
    #030208;

  border:
    1px solid
    rgba(255,215,0,.34);

  border-radius: 10px;

  box-shadow:
    inset 0 0 10px
    rgba(0,0,0,.85);

  transition:
    opacity .2s ease;
}


.stepper-box.is-locked {

  opacity: .50;
}


.stepper-btn {

  width: 32px;
  height: 32px;

  padding: 0;

  border-radius: 8px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    #0d0c05;

  border:
    1px solid
    rgba(255,215,0,.40);

  color: #ffd700;

  font-size: 17px;

  font-weight: 1000;

  cursor: pointer;
}


.stepper-btn:active {

  transform:
    scale(.92);

  background:
    #ffd700;

  color: #000;
}


.stepper-btn:disabled {

  opacity: .38;

  cursor: not-allowed;
}


.stepper-box input {

  flex: 1;

  min-width: 0;

  height: 100%;

  padding:
    0 5px;

  border: 0;

  outline: 0;

  background: transparent;

  color: #ffd700;

  text-align: center;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 17px;

  font-weight: 1000;

  appearance: textfield;
}


.stepper-box input::-webkit-outer-spin-button,
.stepper-box input::-webkit-inner-spin-button {

  appearance: none;

  margin: 0;
}


/* =========================================================
   PRESETS
   ========================================================= */

.preset-pills-bar {

  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap: 5px;
}


.preset-pill {

  min-height: 33px;

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 8px;

  background:
    #030208;

  color: #858585;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 10.5px;

  font-weight: 1000;

  cursor: pointer;

  transition:
    all .15s ease;
}


.preset-pill.active {

  border-color:
    #ffd700;

  color: #ffd700;

  background:
    #0f0d06;

  box-shadow:
    0 0 10px
    rgba(255,215,0,.20);
}


.preset-pill.is-locked {

  opacity: .40;

  pointer-events: none;
}


/* =========================================================
   LIMIT INFO
   ========================================================= */

.bet-limit-info {

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  color: #656b75;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .3px;
}


.limit-dot {

  color: #444;
}


.server-live-dot {

  margin-left: 4px;

  padding:
    2px
    5px;

  border-radius: 5px;

  color: #00e689;

  background:
    rgba(0,230,137,.08);

  border:
    1px solid
    rgba(0,230,137,.18);

  font-size: 8px;

  font-weight: 1000;
}


/* =========================================================
   HISTORY CONTAINER
   ========================================================= */

.history-tabs-container {

  width: 100%;

  overflow: hidden;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,215,0,.20);

  border-radius: 14px;

  background:
    #050505;

  box-shadow:
    0 6px 20px
    rgba(0,0,0,.72);
}


/* =========================================================
   TABS
   ========================================================= */

.hub-nav-tabs {

  display: flex;

  background:
    #020202;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.hub-tab-btn {

  flex: 1;

  min-width: 0;

  height: 42px;

  padding:
    0 5px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  border: 0;

  outline: 0;

  background:
    transparent;

  color: #777;

  font-size: 10.5px;

  font-weight: 1000;

  cursor: pointer;

  transition:
    all .2s ease;
}


.hub-tab-btn i {

  font-size: 10px;
}


.hub-tab-btn.active {

  color: #ffd700;

  background:
    rgba(255,215,0,.035);

  box-shadow:
    inset 0 -2px 0
    #ffd700;
}


/* =========================================================
   ROADMAP HEADER
   ========================================================= */

.roadmap-header {

  height: 31px;

  padding:
    0 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);

  color: #676d77;

  font-size: 8.5px;

  font-weight: 1000;

  letter-spacing: .65px;
}


.roadmap-live {

  color: #00e689;

  font-size: 8px;
}


/* =========================================================
   ROADMAP
   ========================================================= */

.roadmap-matrix {

  display: flex;

  align-items: center;

  gap: 7px;

  min-height: 52px;

  overflow-x: auto;

  padding:
    9px
    11px;

  scrollbar-width: none;
}


.roadmap-matrix::-webkit-scrollbar {

  display: none;
}


.bead-dot {

  width: 28px;
  height: 28px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 9px;

  font-weight: 1000;
}


.bead-dot.D {

  background:
    rgba(244,63,94,.15);

  border:
    1.5px solid
    #f43f5e;

  color: #f43f5e;
}


.bead-dot.T {

  background:
    rgba(234,179,8,.15);

  border:
    1.5px solid
    #eab308;

  color: #eab308;
}


.bead-dot.TIE {

  background:
    rgba(0,230,137,.15);

  border:
    1.5px solid
    #00e689;

  color: #00e689;

  font-size: 7px;
}


/* =========================================================
   MY BETS
   ========================================================= */

.my-bets-section {

  max-height: 220px;

  overflow: hidden;
}


.my-bets-scroll {

  width: 100%;

  overflow-x: auto;

  overflow-y: auto;

  max-height: 220px;

  scrollbar-width: thin;
}


/* =========================================================
   TABLE
   ========================================================= */

.hub-table {

  width: 100%;

  min-width: 430px;

  border-collapse: collapse;

  font-size: 9.5px;
}


.hub-table th {

  padding:
    9px 8px;

  background:
    #020202;

  color: #737985;

  text-align: left;

  font-size: 8px;

  font-weight: 900;

  white-space: nowrap;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  position: sticky;

  top: 0;

  z-index: 2;
}


.hub-table td {

  padding:
    9px 8px;

  color: #eee;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-weight: 700;

  white-space: nowrap;

  border-bottom:
    1px solid
    rgba(255,255,255,.035);
}


.lost-text {

  color: #ff5267;

  font-weight: 900;
}


.cashed-out-text {

  color: #00e689;

  font-weight: 900;
}


/* =========================================================
   MODAL
   ========================================================= */

.pbx-modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 999999;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 20px;

  box-sizing: border-box;

  background:
    rgba(0,0,0,.86);

  backdrop-filter:
    blur(6px);
}


.pbx-modal-backdrop.active {

  display: flex;
}


.pbx-modal-card {

  width: 100%;

  max-width: 320px;

  box-sizing: border-box;

  padding:
    21px
    19px
    18px;

  text-align: center;

  border:
    1px solid
    rgba(255,215,0,.38);

  border-radius: 17px;

  background:
    #0b0f19;

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.85);
}


.pbx-modal-icon {

  margin-bottom: 7px;

  color: #ffd700;

  font-size: 24px;
}


.pbx-modal-icon.alert-red {

  color: #ff5267;
}


.pbx-modal-title {

  margin:
    0
    0
    7px;

  color: #fff;

  font-size: 16px;

  font-weight: 1000;
}


.pbx-modal-msg {

  margin:
    0
    0
    17px;

  color: #94a3b8;

  font-size: 12.5px;

  line-height: 1.45;
}


.pbx-modal-btn {

  width: 100%;

  height: 41px;

  border: 0;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #ffd700,
      #ff9d00
    );

  color: #000;

  font-size: 13px;

  font-weight: 1000;

  cursor: pointer;

  box-shadow:
    0 4px 14px
    rgba(255,215,0,.25);
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .dt-wrapper {

    padding-left: 8px;
    padding-right: 8px;
  }


  .dt-arena {

    padding-left: 9px;
    padding-right: 9px;
  }


  .card-flipper-container {

    width: 83px;
    height: 114px;
  }


  .card-slot {

    width: 87px;
  }


  .card-suit-icon,
  .card-suit-icon i {

    font-size: 28px !important;
  }


  .vs-emblem {

    width: 37px;
    height: 37px;

    font-size: 13px;
  }


  .stepper-box {

    width: 175px;
  }


  .preset-pills-bar {

    gap: 4px;
  }


  .preset-pill {

    font-size: 10px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 340px) {

  .card-flipper-container {

    width: 77px;
    height: 106px;
  }


  .card-slot {

    width: 80px;
  }


  .vs-emblem {

    width: 34px;
    height: 34px;

    font-size: 12px;
  }


  .stepper-box {

    width: 158px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .dt-arena::before,
  .vs-emblem {

    animation: none !important;
  }


  .card-flipper-container {

    transition: none !important;
  }
}

/* =========================================================
   CUSTOM GAME HEADER
   COIN FLIP STYLE — DRAGON TIGER
   ========================================================= */

body.custom-game-shell .custom-game-header {

  width: 100%;
  height: 58px;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    7px
    12px;

  background:
    linear-gradient(
      180deg,
      #0c0c10 0%,
      #07070a 100%
    );

  border-bottom:
    1px solid
    rgba(255,215,0,.16);

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

  position: relative;
  z-index: 1000;

  flex-shrink: 0;
}


/* =========================================================
   HEADER LEFT
   ========================================================= */

body.custom-game-shell .game-hdr-left {

  display: flex;

  align-items: center;

  min-width: 0;

  gap: 10px;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

body.custom-game-shell .game-back-btn {

  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border-radius: 10px;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid
    rgba(255,215,0,.20);

  color: #ffd700 !important;

  text-decoration: none !important;

  font-size: 14px;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}


body.custom-game-shell .game-back-btn:active {

  transform: scale(.92);

  background:
    rgba(255,215,0,.10);

  border-color:
    rgba(255,215,0,.45);
}


body.custom-game-shell .game-back-btn i {

  color: #ffd700 !important;

  font-size: 14px;

  line-height: 1;
}


/* =========================================================
   GAME TITLE
   ========================================================= */

body.custom-game-shell .game-title-wrap {

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 1px;
}


body.custom-game-shell .game-title {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #ffffff;

  font-size: 14px;

  line-height: 17px;

  font-weight: 900;

  letter-spacing: .55px;

  text-transform: uppercase;
}


body.custom-game-shell .game-title-sub {

  display: block;

  color: #ffd700;

  font-size: 8px;

  line-height: 10px;

  font-weight: 900;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  opacity: .88;
}


/* =========================================================
   HEADER RIGHT
   ========================================================= */

body.custom-game-shell .game-hdr-right {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 7px;

  flex-shrink: 0;
}


/* =========================================================
   BALANCE CHIP
   ========================================================= */

body.custom-game-shell .game-balance-chip {

  min-width: 78px;
  height: 34px;

  box-sizing: border-box;

  padding:
    0
    9px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  border-radius: 9px;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid
    rgba(255,215,0,.20);

  box-shadow:
    inset 0 0 10px
    rgba(0,0,0,.45);
}


body.custom-game-shell .game-balance-chip .curr-label {

  color: #8d939e;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .5px;
}


body.custom-game-shell .game-balance-chip #hdrWallet {

  color: #ffd700;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 12px;

  font-weight: 900;

  white-space: nowrap;
}


/* =========================================================
   DEPOSIT BUTTON
   ========================================================= */

body.custom-game-shell .game-deposit-btn {

  height: 34px;

  padding:
    0
    12px;

  box-sizing: border-box;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #ffd700 0%,
      #ffb300 100%
    );

  border:
    1px solid
    rgba(255,255,255,.20);

  color: #050505 !important;

  text-decoration: none !important;

  font-size: 10px;

  font-weight: 1000;

  letter-spacing: .2px;

  box-shadow:
    0 4px 12px
    rgba(255,215,0,.20);

  transition:
    transform .15s ease,
    filter .15s ease;
}


body.custom-game-shell .game-deposit-btn:active {

  transform: scale(.94);

  filter: brightness(.92);
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media (max-width: 380px) {

  body.custom-game-shell .custom-game-header {

    height: 56px;

    padding-left: 9px;
    padding-right: 9px;
  }


  body.custom-game-shell .game-hdr-left {

    gap: 8px;
  }


  body.custom-game-shell .game-back-btn {

    width: 34px;
    height: 34px;
  }


  body.custom-game-shell .game-title {

    font-size: 13px;
  }


  body.custom-game-shell .game-title-sub {

    font-size: 7px;

    letter-spacing: 1.3px;
  }


  body.custom-game-shell .game-hdr-right {

    gap: 5px;
  }


  body.custom-game-shell .game-balance-chip {

    min-width: 70px;

    height: 32px;

    padding-left: 7px;
    padding-right: 7px;

    gap: 4px;
  }


  body.custom-game-shell .game-balance-chip #hdrWallet {

    font-size: 11px;
  }


  body.custom-game-shell .game-deposit-btn {

    height: 32px;

    padding-left: 9px;
    padding-right: 9px;

    font-size: 9px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 340px) {

  body.custom-game-shell .game-title {

    font-size: 12px;
  }


  body.custom-game-shell .game-balance-chip {

    min-width: 64px;
  }


  body.custom-game-shell .game-balance-chip .curr-label {

    display: none;
  }


  body.custom-game-shell .game-deposit-btn {

    padding-left: 8px;
    padding-right: 8px;
  }
}

/* =========================================================
   PBX1 ELITE
   DRAGON TIGER
   COIN FLIP STYLE — TRUE TOP GAME HEADER FIX
   ========================================================= */

/* ---------------------------------------------------------
   GAME HEADER
   EXACTLY AT TOP
   --------------------------------------------------------- */

html body.custom-game-shell {

  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;

  overflow: hidden !important;

  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}


/* ---------------------------------------------------------
   CUSTOM HEADER — TOP EDGE
   --------------------------------------------------------- */

html body.custom-game-shell .custom-game-header {

  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;

  height: 58px !important;

  min-height: 58px !important;
  max-height: 58px !important;

  margin: 0 !important;

  padding:
    7px
    12px !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  z-index: 99999 !important;

  flex-shrink: 0 !important;

  background:
    linear-gradient(
      180deg,
      #0c0c10 0%,
      #07070a 100%
    ) !important;

  border-top: 0 !important;

  border-left: 0 !important;
  border-right: 0 !important;

  border-bottom:
    1px solid
    rgba(255,215,0,.16) !important;

  box-shadow:
    0 4px 18px
    rgba(0,0,0,.55) !important;
}


/* ---------------------------------------------------------
   GAME VIEWPORT
   START EXACTLY BELOW 58px HEADER
   --------------------------------------------------------- */

html body.custom-game-shell .pbx-game-viewport {

  position: fixed !important;

  top: 58px !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;

  height: auto !important;

  margin: 0 !important;

  padding:
    0
    0
    calc(20px + env(safe-area-inset-bottom, 0px))
    0 !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  overscroll-behavior-y: contain !important;

  touch-action: pan-y !important;

  z-index: 10 !important;
}


/* ---------------------------------------------------------
   IMPORTANT:
   CANCEL MASTER LAYOUT HEADER OFFSET
   --------------------------------------------------------- */

html body.custom-game-shell .pbx-game-viewport {

  top: 58px !important;

  padding-top: 0 !important;

}


/* ---------------------------------------------------------
   GAME CONTENT
   NO EXTRA TOP GAP
   --------------------------------------------------------- */

html body.custom-game-shell .pbx-game-viewport > main {

  margin-top: 0 !important;

  padding-top: 0 !important;
}


/* ---------------------------------------------------------
   DRAGON TIGER MAIN WRAPPER
   --------------------------------------------------------- */

html body.custom-game-shell .dt-wrapper {

  margin-top: 0 !important;

  padding-top: 9px !important;

}


/* ---------------------------------------------------------
   HEADER LEFT
   --------------------------------------------------------- */

html body.custom-game-shell .game-hdr-left {

  display: flex !important;

  align-items: center !important;

  min-width: 0 !important;

  gap: 10px !important;
}


/* ---------------------------------------------------------
   BACK BUTTON
   --------------------------------------------------------- */

html body.custom-game-shell .game-back-btn {

  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  min-height: 36px !important;

  flex: 0 0 36px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  border-radius: 10px !important;

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid
    rgba(255,215,0,.20) !important;

  color: #ffd700 !important;

  text-decoration: none !important;
}


/* ---------------------------------------------------------
   HEADER TITLE
   --------------------------------------------------------- */

html body.custom-game-shell .game-title-wrap {

  min-width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 1px !important;
}


html body.custom-game-shell .game-title {

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  color: #fff !important;

  font-size: 14px !important;

  line-height: 17px !important;

  font-weight: 900 !important;

  letter-spacing: .55px !important;

  text-transform: uppercase !important;
}


html body.custom-game-shell .game-title-sub {

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffd700 !important;

  font-size: 8px !important;

  line-height: 10px !important;

  font-weight: 900 !important;

  letter-spacing: 1.5px !important;

  text-transform: uppercase !important;
}


/* ---------------------------------------------------------
   HEADER RIGHT
   --------------------------------------------------------- */

html body.custom-game-shell .game-hdr-right {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 7px !important;

  flex-shrink: 0 !important;

  margin: 0 !important;
}


/* ---------------------------------------------------------
   BALANCE
   --------------------------------------------------------- */

html body.custom-game-shell .game-balance-chip {

  min-width: 78px !important;

  height: 34px !important;

  margin: 0 !important;

  padding:
    0
    9px !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  border-radius: 9px !important;

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid
    rgba(255,215,0,.20) !important;

  box-shadow:
    inset 0 0 10px
    rgba(0,0,0,.45) !important;
}


/* ---------------------------------------------------------
   DEPOSIT
   --------------------------------------------------------- */

html body.custom-game-shell .game-deposit-btn {

  height: 34px !important;

  margin: 0 !important;

  padding:
    0
    12px !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 9px !important;

  background:
    linear-gradient(
      135deg,
      #ffd700 0%,
      #ffb300 100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.20) !important;

  color: #050505 !important;

  text-decoration: none !important;

  font-size: 10px !important;

  font-weight: 1000 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 380px) {

  html body.custom-game-shell .custom-game-header {

    height: 56px !important;

    min-height: 56px !important;
    max-height: 56px !important;

    padding-left: 9px !important;
    padding-right: 9px !important;
  }


  html body.custom-game-shell .pbx-game-viewport {

    top: 56px !important;

    padding-top: 0 !important;
  }


  html body.custom-game-shell .game-hdr-left {

    gap: 8px !important;
  }


  html body.custom-game-shell .game-back-btn {

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    flex-basis: 34px !important;
  }


  html body.custom-game-shell .game-title {

    font-size: 13px !important;
  }


  html body.custom-game-shell .game-title-sub {

    font-size: 7px !important;

    letter-spacing: 1.3px !important;
  }


  html body.custom-game-shell .game-hdr-right {

    gap: 5px !important;
  }


  html body.custom-game-shell .game-balance-chip {

    min-width: 70px !important;

    height: 32px !important;

    padding-left: 7px !important;
    padding-right: 7px !important;

    gap: 4px !important;
  }


  html body.custom-game-shell .game-balance-chip #hdrWallet {

    font-size: 11px !important;
  }


  html body.custom-game-shell .game-deposit-btn {

    height: 32px !important;

    padding-left: 9px !important;
    padding-right: 9px !important;

    font-size: 9px !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 340px) {

  html body.custom-game-shell .custom-game-header {

    height: 55px !important;

    min-height: 55px !important;
    max-height: 55px !important;
  }


  html body.custom-game-shell .pbx-game-viewport {

    top: 55px !important;
  }


  html body.custom-game-shell .game-title {

    font-size: 12px !important;
  }


  html body.custom-game-shell .game-balance-chip {

    min-width: 64px !important;
  }


  html body.custom-game-shell .game-balance-chip .curr-label {

    display: none !important;
  }


  html body.custom-game-shell .game-deposit-btn {

    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* =========================================================
   DRAGON TIGER — HEADER TO GAME GAP
   COIN FLIP STYLE SPACING FIX
   ========================================================= */

html body.custom-game-shell .pbx-game-viewport {

  padding-top: 5px !important;

}


/* Keep arena/card cleanly below header */

html body.custom-game-shell .dt-wrapper {

  padding-top: 4px !important;

  margin-top: 0 !important;

}


/* Prevent first game card from touching viewport edge */

html body.custom-game-shell .dt-arena {

  margin-top: 0 !important;

}