/* =========================================================
   PBx1 ELITE — PREMIUM COIN FLIP
   CUSTOM FULL-SCREEN GAME SHELL
   ========================================================= */

:root {
  --cf-bg: #050914;
  --cf-card: #0a1224;
  --cf-card-2: #0d1830;

  --cf-border: rgba(0, 212, 255, 0.14);
  --cf-border-strong: rgba(0, 212, 255, 0.28);

  --cf-cyan: #00d4ff;
  --cf-blue: #1769ff;

  --cf-gold: #ffbd24;
  --cf-green: #00c878;
  --cf-red: #ef4444;

  --cf-text: #ffffff;
  --cf-muted: #8493a8;
}


/* =========================================================
   BODY
   ========================================================= */

body.custom-game-shell {
  margin: 0 !important;
  padding: 0 !important;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(0, 212, 255, 0.075),
      transparent 38%
    ),
    var(--cf-bg);

  color: var(--cf-text);

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


/* =========================================================
   PREMIUM CUSTOM HEADER
   ========================================================= */

.custom-game-header {

  position: fixed !important;

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

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

  padding:
    env(safe-area-inset-top, 0px)
    12px
    0
    12px !important;

  box-sizing: border-box !important;

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

  background:
    linear-gradient(
      180deg,
      rgba(7, 13, 29, 0.99),
      rgba(7, 13, 29, 0.94)
    ) !important;

  border-bottom:
    1px solid rgba(0, 212, 255, 0.13) !important;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255,255,255,0.025) !important;

  backdrop-filter:
    blur(18px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%);

  z-index: 99999 !important;
}


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

.game-hdr-left {

  min-width: 0;

  display: flex !important;
  align-items: center !important;

  gap: 9px !important;
}


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

.game-back-btn {

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

  flex: 0 0 36px;

  display: flex !important;

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

  border-radius: 11px !important;

  color: #e8fbff !important;

  background:
    linear-gradient(
      145deg,
      #101b34,
      #091226
    ) !important;

  border:
    1px solid rgba(0,212,255,0.22) !important;

  text-decoration: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 14px rgba(0,0,0,0.35) !important;

  font-size: 13px !important;

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

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;
}


.game-back-btn:active {

  transform: scale(.91);

  border-color:
    rgba(0,212,255,.55) !important;

  background:
    rgba(0,212,255,.12) !important;
}


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

.game-title-wrap {

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  line-height: 1;
}


.game-title {

  display: block;

  color: #ffffff !important;

  font-size: 15px !important;

  line-height: 1 !important;

  font-weight: 950 !important;

  letter-spacing: .65px !important;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


.game-title-sub {

  display: block;

  margin-top: 4px;

  color: var(--cf-cyan);

  font-size: 8px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: 2.2px;
}


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

.game-hdr-right {

  flex: 0 0 auto;

  display: flex !important;

  align-items: center !important;

  gap: 7px !important;

  margin-left: 8px;
}


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

.game-balance-chip {

  height: 34px;

  min-width: 72px;

  padding: 0 9px !important;

  box-sizing: border-box;

  display: flex !important;

  align-items: center !important;

  justify-content: center;

  gap: 5px !important;

  border-radius: 10px !important;

  background:
    rgba(9,18,38,.86) !important;

  border:
    1px solid rgba(0,212,255,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);
}


.curr-label {

  color: #718096 !important;

  font-size: 8px !important;

  font-weight: 900 !important;

  letter-spacing: .5px;
}


#hdrWallet {

  color: #ffffff;

  font-size: 12px;

  font-weight: 950;

  letter-spacing: .1px;

  white-space: nowrap;
}


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

.game-deposit-btn {

  height: 35px;

  min-width: 72px;

  padding: 0 13px !important;

  box-sizing: border-box;

  display: inline-flex !important;

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

  border-radius: 11px !important;

  color: #03101c !important;

  background:
    linear-gradient(
      135deg,
      #35e8ff 0%,
      #00bde8 48%,
      #1476ff 100%
    ) !important;

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

  text-decoration: none !important;

  font-size: 11px !important;

  font-weight: 950 !important;

  letter-spacing: .25px;

  box-shadow:
    0 5px 16px rgba(0,183,255,.24),
    inset 0 1px 0 rgba(255,255,255,.38) !important;

  transition:
    transform .12s ease,
    filter .12s ease;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;
}


.game-deposit-btn:active {

  transform: scale(.94);

  filter: brightness(.94);
}


/* =========================================================
   FULL SCREEN GAME VIEWPORT
   ========================================================= */

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

  position: fixed !important;

  top: 58px !important;

  bottom: 0 !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  height: auto !important;

  overflow-x: hidden !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior-y: contain;

  touch-action: pan-y;

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

  box-sizing: border-box !important;
}


/* =========================================================
   FULL WIDTH PAGE
   ========================================================= */

.cf-page {

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding:
    0 10px !important;

  box-sizing: border-box !important;

  display: flex;

  flex-direction: column;

  gap: 10px;
}


/* =========================================================
   STAGE / PANELS FULL AVAILABLE WIDTH
   ========================================================= */

.cf-stage,
.cf-panel {

  width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   WIN TOAST
   ========================================================= */

.cf-win-toast {

  display: none !important;

  background:
    rgba(11,19,41,.96);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

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

  box-shadow:
    0 12px 30px rgba(0,0,0,.7);

  border-radius: 13px;

  padding: 10px 14px;

  align-items: center;

  justify-content: space-between;
}


.cf-win-toast.active,
.cf-win-toast[style*="display: flex"],
.cf-win-toast[style*="display:block"] {

  display: flex !important;

  margin-bottom: 2px !important;
}


/* =========================================================
   MAIN STAGE
   ========================================================= */

.cf-stage {

  position: relative;

  background:
    radial-gradient(
      circle at 50% 25%,
      #122342 0%,
      #080f20 52%,
      #050914 100%
    );

  border:
    1px solid var(--cf-border);

  border-radius: 17px;

  padding: 13px;

  overflow: hidden;

  box-shadow:
    0 12px 32px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.025);
}


.grid-overlay {

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(0,212,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,212,255,.025) 1px,
      transparent 1px
    );

  background-size: 24px 24px;

  pointer-events: none;
}


/* =========================================================
   STAGE TOP
   ========================================================= */

.cf-stage-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  z-index: 2;
}


.cf-round span {

  color: var(--cf-muted);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .8px;
}


.cf-round strong {

  color: #fff;

  font-size: 12px;

  font-weight: 950;

  margin-left: 4px;
}


.cf-sound-btn {

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

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

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

  border-radius: 9px;

  color: var(--cf-muted);

  font-size: 13px;

  cursor: pointer;
}


/* =========================================================
   COIN AREA
   ========================================================= */

.coin-area {

  position: relative;

  height: 190px;

  display: flex;

  align-items: center;

  justify-content: center;

  perspective: 1200px;

  margin: 3px 0;

  z-index: 2;
}


.coin-glow {

  position: absolute;

  width: 145px;

  height: 145px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,212,255,.30),
      transparent 70%
    );

  filter: blur(15px);

  transition: all .3s;
}


.coin {

  width: 126px;

  height: 126px;

  position: relative;

  transform-style: preserve-3d;

  transition: transform .1s;
}


.coin-face {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:
    inset 0 3px 8px rgba(255,255,255,.5),
    0 12px 32px rgba(0,0,0,.82);
}


/* =========================================================
   TAILS
   ========================================================= */

.coin-face.tails {

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff 0%,
      #d9e1e9 45%,
      #77879a 78%,
      #334155 100%
    );

  border:
    4px solid #f8fafc;
}


/* =========================================================
   HEADS
   ========================================================= */

.coin-face.heads {

  transform: rotateY(180deg);

  background:
    radial-gradient(
      circle at 35% 30%,
      #fffbe9 0%,
      #ffd65a 38%,
      #d9910b 76%,
      #8d4e08 100%
    );

  border:
    4px solid #fff1b5;
}


.coin-inner-ring {

  width: 104px;

  height: 104px;

  border-radius: 50%;

  border:
    1.5px dashed rgba(0,0,0,.25);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 4px;
}


.coin-face.heads .coin-inner-ring {

  border-color:
    rgba(255,255,255,.42);
}


.coin-brand {

  font-size: 9px;

  font-weight: 950;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  color: rgba(0,0,0,.6);
}


.coin-face.heads .coin-brand {

  color:
    rgba(255,255,255,.86);
}


.coin-main-text {

  font-size: 18px;

  font-weight: 950;

  line-height: 1.1;

  letter-spacing: -.5px;

  color: #0b1329;

  text-shadow:
    0 1px 2px rgba(255,255,255,.4);
}


.coin-face.heads .coin-main-text {

  color: #fff;

  text-shadow:
    0 2px 4px rgba(0,0,0,.5);
}


/* =========================================================
   COIN ANIMATION
   ========================================================= */

@keyframes coinFlipAnim {

  0% {
    transform:
      rotateY(0)
      translateY(0)
      scale(1);
  }

  25% {
    transform:
      rotateY(720deg)
      translateY(-35px)
      scale(1.12);
  }

  50% {
    transform:
      rotateY(1440deg)
      translateY(-45px)
      scale(1.18);
  }

  75% {
    transform:
      rotateY(2160deg)
      translateY(-20px)
      scale(1.05);
  }

  100% {
    transform:
      rotateY(2880deg)
      translateY(0)
      scale(1);
  }
}


.coin.flipping {

  animation:
    coinFlipAnim
    1.6s
    cubic-bezier(.2,.8,.2,1)
    forwards;
}


/* =========================================================
   META BAR
   ========================================================= */

.cf-meta-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

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

  padding:
    10px 14px;

  border-radius: 11px;

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

  position: relative;

  z-index: 2;
}


.meta-item small {

  display: block;

  color: var(--cf-muted);

  font-size: 9px;

  font-weight: 750;
}


.meta-item strong {

  display: block;

  color: #fff;

  font-size: 13px;

  font-weight: 950;

  margin-top: 3px;
}


.gold-txt {

  color: var(--cf-gold) !important;
}


/* =========================================================
   PANELS
   ========================================================= */

.cf-panel {

  background:
    linear-gradient(
      145deg,
      rgba(11,19,41,.98),
      rgba(8,16,32,.98)
    );

  border:
    1px solid var(--cf-border);

  border-radius: 16px;

  padding: 12px;

  box-shadow:
    0 8px 25px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.02);
}


/* =========================================================
   AMOUNT
   ========================================================= */

.amount-control-row {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 8px;

  align-items: center;
}


.amount-input-box {

  position: relative;

  background:
    #070d1d;

  border:
    1px solid rgba(0,212,255,.18);

  border-radius: 11px;

  height: 45px;

  display: flex;

  align-items: center;

  padding: 0 12px;

  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.35);
}


.amount-input-box input {

  width: 100%;

  background: transparent;

  border: none;

  outline: none;

  color: #fff;

  font-size: 15px;

  font-weight: 950;
}


.currency-symbol {

  color: var(--cf-muted);

  font-weight: 850;

  font-size: 13px;
}


/* =========================================================
   QUICK BUTTONS
   ========================================================= */

.quick-btn-group {

  display: flex;

  gap: 4px;
}


.q-btn {

  width: 36px;

  height: 45px;

  background:
    linear-gradient(
      145deg,
      #14203b,
      #0b1428
    );

  border:
    1px solid rgba(0,212,255,.17);

  border-radius: 9px;

  color: #fff;

  font-weight: 850;

  font-size: 11px;

  cursor: pointer;

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


.q-btn:active {

  transform: scale(.95);
}


/* =========================================================
   HEADS / TAILS
   ========================================================= */

.side-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;

  margin-top: 10px;
}


.side-btn {

  height: 47px;

  border-radius: 12px;

  border: none;

  font-size: 14px;

  font-weight: 950;

  cursor: pointer;

  transition:
    transform .1s,
    box-shadow .15s;
}


.side-btn:active {

  transform: scale(.97);
}


.btn-heads {

  background:
    linear-gradient(
      135deg,
      #ffd34e,
      #e08a0a
    );

  color: #07101d;

  box-shadow:
    0 5px 16px rgba(251,191,36,.24);
}


.btn-tails {

  background:
    linear-gradient(
      135deg,
      #26364d,
      #0e1728
    );

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

  color: #fff;
}


.side-btn.selected {

  border:
    2px solid var(--cf-cyan) !important;

  box-shadow:
    0 0 18px rgba(0,212,255,.35) !important;

  transform: scale(.985);
}


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

.tab-header {

  display: flex;

  align-items: center;

  gap: 9px;

  border-bottom:
    1px solid var(--cf-border);

  padding-bottom: 8px;

  margin-bottom: 8px;
}


.tab-btn {

  background: transparent;

  border: none;

  color: var(--cf-muted);

  font-size: 12px;

  font-weight: 850;

  cursor: pointer;

  padding: 4px 8px;
}


.tab-btn.active {

  color: var(--cf-cyan);

  border-bottom:
    2px solid var(--cf-cyan);
}


.refresh-history-btn {

  margin-left: auto;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

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

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

  border-radius: 8px;

  color: var(--cf-muted);

  cursor: pointer;
}


.history-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 9px 10px;

  background:
    #070d1d;

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

  border-radius: 9px;

  margin-bottom: 6px;

  font-size: 12px;
}


.history-row strong {

  color: #fff;
}


.history-row.win .win-txt {

  color: var(--cf-green);

  font-weight: 950;
}


.history-row.loss .win-txt {

  color: var(--cf-red);

  font-weight: 950;
}


.history-loading,
.history-empty {

  text-align: center;

  color: var(--cf-muted);

  padding: 14px 0;

  font-size: 12px;
}


.cf-bottom-space {

  height: 20px;
}


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

@media (max-width: 420px) {

  .custom-game-header {

    padding-left: 9px !important;

    padding-right: 9px !important;
  }


  .game-hdr-left {

    gap: 8px !important;
  }


  .game-back-btn {

    width: 35px !important;

    height: 35px !important;

    flex-basis: 35px;
  }


  .game-title {

    font-size: 14px !important;
  }


  .game-title-sub {

    font-size: 7px;

    letter-spacing: 2px;
  }


  .game-hdr-right {

    gap: 5px !important;
  }


  .game-balance-chip {

    min-width: 67px;

    padding:
      0 7px !important;
  }


  .game-deposit-btn {

    min-width: 68px;

    padding:
      0 10px !important;
  }


  .cf-page {

    padding-left: 8px !important;

    padding-right: 8px !important;
  }
}


@media (max-width: 360px) {

  .game-title {

    font-size: 13px !important;
  }


  .game-title-sub {

    display: none;
  }


  .game-balance-chip {

    min-width: 62px;
  }


  .game-deposit-btn {

    min-width: 63px;

    padding:
      0 9px !important;
  }


  .coin {

    width: 116px;

    height: 116px;
  }


  .coin-inner-ring {

    width: 96px;

    height: 96px;
  }
}


/* =========================================================
   NO MASTER FOOTER / HEADER CONFLICT
   ========================================================= */

body.custom-game-shell #appHeader,
body.custom-game-shell #appFooter {

  display: none !important;
}

/* =========================================================
   PREMIUM WINNING TOAST — IMAGE 2 STYLE
   ========================================================= */

.cf-win-toast {
  display: none !important;

  width: 100%;
  min-height: 78px;

  box-sizing: border-box;

  margin: 0 !important;
  padding: 10px 10px 10px 14px !important;

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

  gap: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(10, 20, 43, 0.98),
      rgba(8, 17, 37, 0.98)
    ) !important;

  border:
    1px solid rgba(0, 212, 255, 0.48) !important;

  border-radius: 17px !important;

  box-shadow:
    0 0 0 1px rgba(0,212,255,.035),
    0 8px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* JS adds .active after a win */
.cf-win-toast.active {
  display: flex !important;

  animation:
    winToastIn
    .25s
    cubic-bezier(.2,.8,.2,1)
    both;
}


/* LEFT SIDE */
.cf-win-toast .toast-left {

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 4px;
}


/* YOU WIN */
.cf-win-toast .toast-left strong {

  display: block;

  color: #ffffff;

  font-size: 20px;

  line-height: 1;

  font-weight: 950;

  letter-spacing: -.35px;

  white-space: nowrap;
}


/* MULTIPLIER */
.cf-win-toast #toastMultiplier {

  display: block;

  color: #00d4ff;

  font-size: 13px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: .1px;

  white-space: nowrap;
}


/* WIN AMOUNT PILL */
.cf-win-toast .toast-right {

  flex: 0 0 auto;

  min-width: 104px;

  height: 46px;

  padding: 0 14px;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #16d9ff 0%,
      #0daeea 48%,
      #1769ff 100%
    );

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

  box-shadow:
    0 5px 18px rgba(0,183,255,.32),
    inset 0 1px 0 rgba(255,255,255,.35);

  font-size: 17px;

  line-height: 1;

  font-weight: 950;

  letter-spacing: .1px;

  white-space: nowrap;
}


/* ENTRY ANIMATION */
@keyframes winToastIn {

  from {
    opacity: 0;
    transform: translateY(-7px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}


/* MOBILE */
@media (max-width: 420px) {

  .cf-win-toast {

    min-height: 78px;

    padding:
      10px 9px 10px 14px !important;

    border-radius: 16px !important;

    gap: 8px;
  }


  .cf-win-toast .toast-left strong {

    font-size: 19px;
  }


  .cf-win-toast #toastMultiplier {

    font-size: 12px;
  }


  .cf-win-toast .toast-right {

    min-width: 102px;

    height: 45px;

    padding: 0 12px;

    font-size: 16px;

    border-radius: 12px;
  }
}


/* SMALL PHONES */
@media (max-width: 360px) {

  .cf-win-toast {

    min-height: 72px;

    padding-left: 12px !important;
  }


  .cf-win-toast .toast-left strong {

    font-size: 17px;
  }


  .cf-win-toast #toastMultiplier {

    font-size: 11px;
  }


  .cf-win-toast .toast-right {

    min-width: 92px;

    height: 42px;

    font-size: 15px;

    padding: 0 9px;
  }
}