.side-bet {
  position: absolute;
  top: 69%;
  z-index: 5;
  width: 126px;
  height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 184, 117, .46);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 40, 29, .92) 45%, rgba(6, 25, 18, .96));
  box-shadow: inset 0 0 0 5px rgba(214, 184, 117, .05), 0 10px 25px rgba(0, 0, 0, .25);
  transform: translateY(-50%);
  transition: border-color .25s, box-shadow .25s, opacity .25s;
}

.side-bet::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(214, 184, 117, .25);
  border-radius: 50%;
  pointer-events: none;
}

.side-bet-left { left: 4%; }
.side-bet-right { right: 4%; }
.side-kicker { color: var(--gold2); font: 500 8px "DM Mono"; letter-spacing: 1.2px; }
.side-bet > strong { margin-top: 3px; font: 700 9px Manrope; letter-spacing: .7px; }
.side-bet > small { margin-top: 2px; color: var(--muted); font: 500 7px "DM Mono"; }
.side-bet > b { margin-top: 7px; color: var(--gold2); font: 500 14px "DM Mono"; }

.side-adjust {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.side-adjust button {
  width: 36px;
  height: 30px;
  border: 1px solid rgba(214, 184, 117, .36);
  border-radius: 11px;
  background: rgba(214, 184, 117, .07);
  color: var(--ink);
  font: 500 21px/1 "DM Mono";
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.side-adjust button:hover:not(:disabled) { background: var(--gold); color: var(--deep); }
.side-adjust button:disabled { opacity: .24; cursor: not-allowed; }

.side-bet > em {
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 145px;
  min-height: 18px;
  transform: translateX(-50%);
  color: var(--muted);
  font: normal 500 8px "DM Mono";
  letter-spacing: .5px;
  text-align: center;
}

.side-bet.won {
  border-color: var(--gold2);
  box-shadow: inset 0 0 24px rgba(214, 184, 117, .2), 0 0 28px rgba(214, 184, 117, .2);
  animation: sideWin .65s ease-out;
}
.side-bet.won > em { color: var(--gold2); }
.side-bet.lost { opacity: .62; }

.side-win-line strong { color: var(--muted); transition: color .25s, transform .25s; }
.side-win-line.has-win strong {
  color: var(--gold2);
  animation: sideTotalWin .65s ease-out;
}

@keyframes sideTotalWin {
  45% { transform: scale(1.09); text-shadow: 0 0 15px rgba(240, 209, 139, .5); }
}

/* Krupiyenin ikinci kartı el çekildikten sonra masada net biçimde kapalı kalır. */
.dealer-zone .card.face-down {
  opacity: 1;
  transform: rotateY(180deg);
}
.dealer-zone .card.face-down .card-face {
  visibility: hidden;
  z-index: 0;
}
.dealer-zone .card.face-down .card-back {
  visibility: visible;
  z-index: 3;
  opacity: 1;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .46), 0 0 0 1px rgba(240, 209, 139, .26);
}

@keyframes sideWin {
  50% { transform: translateY(-50%) scale(1.06); }
}

/* Ana aksiyon, ekranın gerçek merkezinde bağımsız bir odak noktasıdır. */
.controls {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  position: relative;
}
.bet-area { grid-column: 1; min-width: 0; flex-direction: column; align-items: center; gap: 9px; }
.action-area { grid-column: 2; justify-content: center; }
.bet-row { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; }
.repeat-bet {
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(214, 184, 117, .32);
  border-radius: 18px;
  background: rgba(214, 184, 117, .06);
  color: var(--gold2);
  font: 600 8px Manrope;
  letter-spacing: .7px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s, transform .2s;
}
.repeat-bet span { margin-right: 5px; font-size: 13px; }
.repeat-bet:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(214, 184, 117, .14);
  transform: translateY(-2px);
}
.repeat-bet:disabled { opacity: .28; cursor: not-allowed; }
.deal-button {
  position: relative;
  min-width: 310px;
  overflow: hidden;
  border: 1px solid #f1d998;
  border-radius: 36px;
  background: linear-gradient(110deg, #b9964f, #f0d18b 45%, #c5a45f 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .42);
  padding-inline: 29px;
}
.deal-button::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 32%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.deal-button:hover:not(:disabled)::before { left: 115%; }
.deal-button i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(7, 23, 18, .4);
  border-radius: 50%;
}

@media (max-width: 1180px) {
  .side-bet { width: 108px; height: 108px; }
  .side-bet-left { left: 2%; }
  .side-bet-right { right: 2%; }
  .side-bet > small { display: none; }
  .deal-button { min-width: 265px; }
  .bet-area { gap: 10px; }
  .chips { gap: 6px; }
}

@media (max-width: 820px) {
  .controls { display: flex; }
  .side-bet { top: 70%; width: 92px; height: 92px; }
  .side-bet-left { left: 3%; }
  .side-bet-right { right: 3%; }
  .side-bet > strong { font-size: 7px; }
  .side-bet > b { margin-top: 4px; font-size: 11px; }
  .side-adjust { margin-top: 3px; }
  .side-adjust button { width: 31px; height: 25px; font-size: 18px; }
  .side-bet > em { bottom: -21px; width: 105px; font-size: 6px; }
  .deal-button { min-width: 0; }
  .bet-tools { width: 100%; justify-content: center; }
  .bet-row { flex-wrap: wrap; gap: 11px; }
  .bet-row .control-label { width: 100%; text-align: center; }
}

@media (max-width: 430px) {
  .side-bet { top: 70%; width: 79px; height: 79px; }
  .side-bet-left { left: 2%; }
  .side-bet-right { right: 2%; }
  .side-kicker { font-size: 6px; }
  .side-bet > strong { display: none; }
  .side-bet > b { margin-top: 3px; font-size: 10px; }
  .side-adjust button { width: 29px; height: 24px; font-size: 17px; }
  .repeat-bet { height: 30px; padding-inline: 10px; font-size: 7px; }
}