/* GoldenX visual layer for the embedded blackjack controls. */
@font-face {
  font-family: 'Gotham Pro';
  src: url('/fonts/GothamPro.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url('/fonts/GothamPro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url('/fonts/GothamPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-gray-950: #0f1728;
  --color-gray-900: #111a2e;
  --color-gray-800: #20273a;
  --color-gray-700: #2e3955;
  --color-gray-500: #7486b7;
  --color-gray-400: #9aaad0;
  --color-neutral-900: #0f1728;
  --color-purple-600: #397ce6;
  --color-purple-500: #4788ef;
}

html,
body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #fff;
  font-family: 'Gotham Pro', Gotham, Arial, sans-serif;
  height: 100% !important;
  overflow: hidden !important;
}

body {
  padding: 32px 48px;
}

/* The first visible body child is the game shell rendered by Next. */
body > div:not([hidden]) {
  height: 356px !important;
  min-height: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body > div:not([hidden]) > div {
  background: transparent !important;
}

body > div:not([hidden]) > div:first-child {
  border: 0 !important;
  outline: 0 !important;
  background-color: #041a42 !important;
  background-image: url('/blackjack-game/blackjack-background.png?v=20260925-1') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Remove the payout/dealer rules ribbon from the play area. */
body > div:not([hidden]) [aria-label="Правила выплат"] {
  display: none !important;
}

body > div:not([hidden]) > div:last-child {
  padding: 24px !important;
}

label {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Plinko keeps the amount row self-contained without a separate "Сумма"
   caption. Hiding only the bet field label also removes its old vertical gap. */
body > div:not([hidden]) label[for] {
  display: none !important;
}

input[placeholder='1.00'] {
  height: 55px !important;
  min-height: 55px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #20273a !important;
  color: #7486b7 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 56px 0 20px !important;
}

/* Plinko places the currency mark at the right edge of the amount field,
   immediately before the two compact amount steppers. */
body > div:not([hidden]) .relative:has(> input[placeholder='1.00']) {
  display: flex !important;
  align-items: stretch !important;
  gap: 5px !important;
}

body > div:not([hidden]) .relative:has(> input[placeholder='1.00']) > input[placeholder='1.00'] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

body > div:not([hidden]) .relative:has(> input[placeholder='1.00']) > div {
  position: static !important;
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  transform: none !important;
  translate: none !important;
}

body > div:not([hidden]) svg.absolute.left-4 {
  left: auto !important;
  right: 113px !important;
  width: 24px !important;
  height: 24px !important;
  color: #f2ac44 !important;
}

input[placeholder='1.00'] + div button {
  width: 44px !important;
  min-width: 44px !important;
  height: 55px !important;
  min-height: 55px !important;
  border-radius: 15px !important;
  background: #252d42 !important;
  color: #7486b7 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

input[placeholder='1.00'] + div button:hover {
  background: #2e3955 !important;
  color: #b6c6ff !important;
}

button {
  border-radius: 16px !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

button:disabled {
  opacity: .72;
}

body > div:not([hidden]) button.bg-gray-700.w-full {
  display: none !important;
  min-height: 64px !important;
  background: #2e3955 !important;
  color: #9aaad0 !important;
}

/* The stake control is the first full-width button in the control rail;
   hide it regardless of whether its enabled state changes its color class. */
body > div:not([hidden]) > div:last-child > button.w-full:first-of-type {
  display: none !important;
}

body > div:not([hidden]) .grid.grid-cols-2 {
  gap: 4px !important;
}

body > div:not([hidden]) > div:last-child.space-y-6 > :not(:last-child) {
  margin-block-end: 8px !important;
}

body > div:not([hidden]) .grid.grid-cols-2 > button {
  height: 55px !important;
  min-height: 55px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #20273a !important;
  color: #fff !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

body > div:not([hidden]) button.bg-purple-600 {
  height: 55px !important;
  min-height: 55px !important;
  border-radius: 15px !important;
  background: #397ce6 !important;
  color: #fff !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

body > div:not([hidden]) button.bg-purple-600:hover {
  background: #4788ef !important;
}

body > div:not([hidden]) .bg-gray-950.rounded-md {
  display: none !important;
  border: 1px solid rgba(41, 71, 99, .8) !important;
  border-radius: 18px !important;
  background: #0f1728 !important;
}

body > div:not([hidden]) > div:last-child.space-y-6 > button.bg-purple-600 {
  margin-block-end: 0 !important;
}

body > div:not([hidden]) h3 {
  color: #9aaad0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body > div:not([hidden]) .text-gray-500 {
  color: #7486b7 !important;
}

/* Keep both hands comfortably inside the compact play field. The original
   Tailwind card sizes (84x124 / 96x144) are too tall once the field is
   shortened, so only the cards are reduced here; the menu and field size are
   intentionally left untouched. */
body > div:not([hidden]) > div:first-child .w-21 {
  width: 72px !important;
  height: 108px !important;
}

body > div:not([hidden]) > div:first-child .w-21 .text-xl {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

body > div:not([hidden]) > div:first-child .w-21 .text-lg {
  font-size: 15px !important;
  line-height: 1 !important;
}

body > div:not([hidden]) > div:first-child .w-21 .text-5xl {
  font-size: 40px !important;
  line-height: 1 !important;
}

/* Identify each hand's live total without replacing the game's score node.
   The pseudo-label sits before the dynamic number, so it stays in sync as
   cards are dealt or removed. */
body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center:first-child div[class*="rounded-4xl"],
body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center:nth-child(3) div[class*="rounded-4xl"] {
  width: auto !important;
  min-width: 120px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center:first-child div[class*="rounded-4xl"]::before {
  content: "Дилер - " !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center:nth-child(3) div[class*="rounded-4xl"]::before {
  content: "Игрок - " !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col-reverse > div[class~="flex"][class~="gap-2.5"] {
  transform: translateY(0) !important;
}

body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col > div[class~="flex"][class~="gap-2.5"] {
  transform: translateY(0) !important;
}

/* Keep the table clean: hide result captions such as "ПЕРЕБОР" and
   "БЛЭКДЖЕК" that the original game places beneath the player's hand. */
body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col-reverse > span.text-sm.font-semibold.h-5,
body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col > span.text-sm.font-semibold.h-5 {
  display: none !important;
}

/* Keep the dealer and player hands equidistant from the table edges. */
body > div:not([hidden]) > div:first-child {
  align-content: center !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (min-width: 768px) {
  /* Match Plinko's 360px control rail with 20px inner spacing. */
  body > div:not([hidden]) > div:first-child {
    align-self: flex-start !important;
    height: clamp(356px, calc(50vh + 16px), 486px) !important;
    align-content: center !important;
    row-gap: 4px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Keep both hands centered in the field. The previous negative offset
     clipped the dealer badge at the top of the table. */
  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateY(0) !important;
  }

  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col-reverse,
  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col {
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col-reverse > div[class~="flex"][class~="gap-2.5"],
  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col > div[class~="flex"][class~="gap-2.5"] {
    transform: none !important;
  }

  body > div:not([hidden]) > div:last-child {
    width: 360px !important;
    padding: 20px !important;
    position: relative !important;
    left: -24px !important;
    transform: translateY(-20px) !important;
  }
}

/* Keep the play field's top and bottom breathing room identical inside the
   compact host frame. */
@media (min-width: 768px) {
  body > div:not([hidden]) {
    height: 356px !important;
  }

  body > div:not([hidden]) > div:first-child {
    height: 356px !important;
  }
}

@media (max-width: 767px) {
  body > div:not([hidden]) {
    /* Let the shell follow its compact children. The previous fixed height
       stopped before the final stake button on phones. */
    height: auto !important;
  }

  body {
    padding: 20px 16px;
  }

  body > div:not([hidden]) {
    width: 100%;
  }

  body > div:not([hidden]) > div:last-child {
    padding: 20px 0 !important;
  }

  body > div:not([hidden]) {
    min-height: 0 !important;
  }

  body > div:not([hidden]) > div:first-child {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 330px !important;
    min-height: 330px !important;
    align-content: start !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Keep the player hand below the dealer hand. The previous negative shift
     pulled the two rows into each other on narrow screens. */
  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center:nth-child(3) {
    transform: translateY(0) !important;
  }

  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col-reverse,
  body > div:not([hidden]) > div:first-child > div.flex.items-center.justify-center > div.flex.flex-col {
    row-gap: 10px !important;
  }

  /* Keep the complete control rail inside the iframe viewport. */
  body > div:not([hidden]) > div:last-child {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  input[placeholder='1.00'],
  input[placeholder='1.00'] + div button,
  body > div:not([hidden]) > div:last-child > div.grid button,
  body > div:not([hidden]) > div:last-child > button.bg-purple-600 {
    height: 44px !important;
    min-height: 44px !important;
  }

  body > div:not([hidden]) > div:last-child > div.grid {
    gap: 4px !important;
  }
}