/*
 * THE BET GENERATOR
 * Betting Level Buttons
 *
 * Customer-facing colors:
 * RED    = GOLD
 * GREEN  = SILVER
 * YELLOW = BRONZE
 *
 * Internal identifiers remain unchanged.
 *
 * Version 12 — Improved Text Readability
 */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* BUTTON GROUP */

.tbg-levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 650px;
  margin: 15px auto;
}

/* SHARED METALLIC BUTTON */

.tbg-level {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 112px;
  padding: 12px 14px;
  overflow: hidden;

  border: 3px solid #fff2b4;
  border-radius: 17px;

  color: #fff;
  text-align: left;
  font-family: inherit;

  cursor: pointer;

  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.85),
    inset 0 -5px 7px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.28);

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

/* TOP GLOSSY REFLECTION */

.tbg-level::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3%;
  width: 94%;
  height: 38%;

  border-radius: 50% 50% 35% 35%;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.58),
    rgba(255,255,255,.12) 55%,
    transparent
  );

  pointer-events: none;
}

/* LOWER METALLIC REFLECTION */

.tbg-level::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 92%;
  height: 16%;

  background: linear-gradient(
    to top,
    rgba(255,255,255,.35),
    transparent
  );

  pointer-events: none;
}

.tbg-level:hover {
  transform: translateY(-2px);

  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.9),
    inset 0 -4px 7px rgba(0,0,0,.2),
    0 7px 15px rgba(0,0,0,.32);
}

.tbg-level:focus-visible {
  outline: 3px solid #1479d1;
  outline-offset: 3px;
}

/* GOLD — INTERNAL RED */

.tbg-level--red {
  background: linear-gradient(
    125deg,
    #fff2a4 0%,
    #f8c843 16%,
    #d99a08 38%,
    #9c6100 65%,
    #f4bd28 88%,
    #fff0a0 100%
  );

  border-color: #ffe887;

  color: #fff;

  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.95),
    inset 0 -4px 7px rgba(91,49,0,.5),
    0 4px 10px rgba(0,0,0,.3);
}

/* SILVER — INTERNAL GREEN */

.tbg-level--green {
  background: linear-gradient(
    125deg,
    #ffffff 0%,
    #d5dce7 14%,
    #9ca5b4 34%,
    #505b6c 62%,
    #aeb8c7 85%,
    #f1f5fa 100%
  );

  border-color: #e9edf4;

  color: #fff;

  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.95),
    inset 0 -4px 7px rgba(27,36,52,.45),
    0 4px 10px rgba(0,0,0,.3);
}

/* BRONZE — INTERNAL YELLOW */

.tbg-level--yellow {
  background: linear-gradient(
    125deg,
    #ffd4a0 0%,
    #d98a48 16%,
    #ad5f29 39%,
    #74350f 65%,
    #cc7837 87%,
    #f8b777 100%
  );

  border-color: #efae6c;

  color: #fff;

  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.85),
    inset 0 -4px 7px rgba(70,29,7,.55),
    0 4px 10px rgba(0,0,0,.3);
}

/* LEFT COLUMN: COINS AND PRICE */

.tbg-level__left {
  position: relative;
  z-index: 1;

  display: flex;
  flex: 0 0 85px;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  width: 85px;
  min-width: 0;
  max-width: 85px;
}

.tbg-level__coins,
.tbg-level__left .tbg-level__coins {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 80px;
  max-width: 80px;
  min-width: 0;
}

.tbg-level__coin-image,
.tbg-level__left .tbg-level__coins img {
  display: block;
  width: 80px;
  max-width: 100%;
  height: auto;
  object-fit: contain;

  filter:
    drop-shadow(1px 3px 3px rgba(0,0,0,.4));
}

/* SILVER COINS */

.tbg-level--green .tbg-level__coin-image,
.tbg-level--green .tbg-level__coins img {
  filter:
    grayscale(1)
    brightness(1.25)
    contrast(1.1)
    drop-shadow(1px 3px 3px rgba(0,0,0,.4));
}

/* BRONZE COINS */

.tbg-level--yellow .tbg-level__coin-image,
.tbg-level--yellow .tbg-level__coins img {
  filter:
    sepia(1)
    saturate(2)
    hue-rotate(340deg)
    brightness(.85)
    drop-shadow(1px 3px 3px rgba(0,0,0,.4));
}

/* PRICE FRAME */

.tbg-level__price {
  position: static;
  display: block;
  flex-shrink: 0;

  padding: 5px 8px;

  border: 2px solid #ffda70;
  border-radius: 10px;

  background: linear-gradient(
    to bottom,
    #353535 0%,
    #111 45%,
    #000 100%
  );

  color: #fff;

  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.35),
    0 2px 5px rgba(0,0,0,.3);
}

.tbg-level--red .tbg-level__price {
  border-color: #ffe37a;
}

.tbg-level--green .tbg-level__price {
  border-color: #e1e7f0;
}

.tbg-level--yellow .tbg-level__price {
  border-color: #eeb076;
}

/* TEXT CONTENT */

.tbg-level__content {
  position: relative;
  z-index: 1;

  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.tbg-level__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* LEVEL NAME */

.tbg-level__name,
.tbg-level__content .tbg-level__name {
  display: block;
  margin: 0;

  color: #080808;

  font-family: 'Anton', Impact, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .3px;
  text-transform: uppercase;

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

/*
 * DESCRIPTION
 * Stronger text contrast without background boxes.
 */

.tbg-level__description,
.tbg-level__content .tbg-level__description {
  display: block;
  margin-top: 9px;

  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;

  overflow-wrap: normal;

  background: transparent;

  text-shadow:
    0 1px 1px rgba(0,0,0,.95),
    0 2px 3px rgba(0,0,0,.85),
    0 0 5px rgba(0,0,0,.55);
}

/* ARROW */

.tbg-level__arrow {
  position: relative;
  z-index: 1;

  flex: 0 0 auto;

  color: #fff;

  font-size: 29px;
  font-weight: bold;
  line-height: 1;

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

/* MOBILE PHONES */

@media (max-width: 600px) {

  .tbg-levels {
    gap: 9px;
    margin: 10px auto;
  }

  .tbg-level {
    min-height: 145px;
    height: auto;
    padding: 12px 9px;
    gap: 9px;
    border-width: 2px;
    border-radius: 14px;
  }

  .tbg-level__name,
  .tbg-level__content .tbg-level__name {
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: .3px;
    white-space: nowrap;
  }

  .tbg-level__description,
  .tbg-level__content .tbg-level__description {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
  }

  .tbg-level__arrow {
    font-size: 21px;
  }

}

/* EXTRA-SMALL PHONES */

@media (max-width: 380px) {

  .tbg-level {
    padding: 10px 7px;
    gap: 6px;
  }

  .tbg-level__left {
    flex-basis: 70px;
    width: 70px;
    max-width: 70px;
  }

  .tbg-level__coins,
  .tbg-level__left .tbg-level__coins,
  .tbg-level__coin-image,
  .tbg-level__left .tbg-level__coins img {
    width: 65px;
  }

  .tbg-level__name,
  .tbg-level__content .tbg-level__name {
    font-size: 22px;
  }

  .tbg-level__description,
  .tbg-level__content .tbg-level__description {
    font-size: 15px;
  }

  .tbg-level__arrow {
    font-size: 18px;
  }

}