/* ======================================================
   PLAY.CSS – "GOOD UI" RESTORATION (v3.0.43)
   ====================================================== */

.play-wrap {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
  margin: 0 auto;
  min-height: calc(100vh - 52px);
  /* Fill SPA height */
}

/* ================= ROW LAYOUT (FLEX) ================= */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  /* Reduced vertical space */
  padding: 0 4px;
  flex-wrap: nowrap;
  justify-content: center;
  /* Center to make it "pas" */
  /* Force horizontal as requested */
}

/* ================= BALANCE ================= */
.balance-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
  /* Reduced vertical margins */
  background: transparent;
  /* Transparent as requested */
  padding: 8px;
  border-radius: 10px;
}

.balance-label {
  color: #aaa;
  font-size: 13px;
}

.balance-amount {
  color: #39e75f;
  font-weight: bold;
  font-size: 18px;
}

/* ================= COIN DROPDOWN ================= */
.coin-dropdown {
  position: relative;
  display: inline-block;
}

.coin-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 5px;
  padding-right: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}

.coin-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #bfbfbf;
}

.coin-label::before {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  border-left: 10px solid #bfbfbf;
  border-top: 7px solid transparent;
}

.coin-menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  min-width: 120px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.coin-menu.show {
  display: block;
}

.coin-item {
  padding: 8px 12px;
  cursor: pointer;
  color: #ddd;
  font-size: 13px;
  transition: all 0.2s;
  border-bottom: 1px solid #333;
}

.coin-item:last-child {
  border-bottom: none;
}

.coin-item:hover {
  background: rgba(79, 210, 255, 0.15);
  color: #4fd2ff;
}

.coin-item.active {
  background: rgba(57, 231, 95, 0.2);
  color: #39e75f;
  font-weight: 600;
}

/* ================= INPUTS ================= */
.label {
  color: #aaa;
  font-size: 13px;
  width: 78px;
  flex-shrink: 0;
}

.input-box {
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 8px;
  text-align: center;
  border-radius: 4px;
  font-family: monospace;
  width: 100%;
  min-width: 0;
  font-size: 15px;
  /* Allow shrinking */
}

.input-box.chance-main {
  width: 65px;
  /* Slightly wider as requested */
}

.input-box.small {
  width: 40px;
}

.basebet-small {
  width: 60px;
  /* Adjusted for better fit */
}

.dash {
  color: #666;
  font-weight: bold;
}

/* ================= AMOUNT LINE ================= */
.amount-label {
  position: relative;
  display: inline-block;
  color: #fff;
  padding-bottom: 5px;
  margin-right: 12px;
  /* Balanced gap */
  flex-shrink: 0;
  font-size: 11px;
  font-weight: bold;
}


.amount-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 95%;
  height: 2px;
  background: #bfbfbf;
}

.amount-line::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: 0;
  border-left: 12px solid #bfbfbf;
  border-top: 8px solid transparent;
}

/* ================= REPEAT ================= */
.repeat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #aaa;
  opacity: .45;
  margin: 5px 0;
  /* Reduced vertical margin */
}

.repeat-box {
  width: 14px;
  height: 14px;
  border: 1px solid #666;
}

.repeat-row.active {
  opacity: 1;
}

.repeat-row.active .repeat-box {
  background: #39e75f;
  border-color: #39e75f;
}

/* ================= PROFIT ================= */
.profit-center-row {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  /* Reduced vertical margin */
}

.profit-label {
  color: #aaa;
  font-size: 13px;
  margin-right: 6px;
}

.value.green {
  color: #39e75f;
  font-weight: bold;
}

/* ================= BUTTONS ================= */
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  /* Reduced vertical gap */
}

.btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  border-radius: 50px;
  background: linear-gradient(#cfcfcf, #9c9c9c);
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
  color: #222;
  text-transform: uppercase;
  font-size: 14px;
}

.btn:hover {
  opacity: 0.9;
}

.btn.stop,
.btn.stopwin {
  color: #ff5555;
}

.btn.stop:active,
.btn.stopwin:active,
.btn.stopwin-active,
.btn.play-active {
  color: #39e75f !important;
}

.auto {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Better gap */
  cursor: pointer;
  white-space: nowrap;
}

/* ================= LOG ================= */
.log-wrap {
  margin-top: 8px;
  flex: 1;
  /* Stretch to fill bottom space */
  min-height: 200px;
  max-height: 320px;
  /* Limit height for ~12 entries */
  overflow-y: auto;
}

.log-plain {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  font-family: Consolas, Menlo, Monaco, monospace;
}

.entry {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.line1 {
  width: 100%;
  white-space: normal;
  /* Changed from nowrap to normal to allow wrapping without JS */
  overflow: visible;
  /* changed from hidden */
  color: #fff;
  word-break: break-all;
  /* Ensure long hashes wrap */
}

.line2 {
  color: #aaa;
  font-size: 11px;
  margin-top: 2px;
}

/* Force all logs to be white, overriding any legacy/cached classes */
.entry.win .line1,
.entry.lose .line1,
.entry.win .profit-val {
  color: #fff !important;
}



/* ================= RESPONSIVE ================= */
@media (max-width: 480px) {
  .row {
    gap: 4px;
  }

  .label {
    width: 60px;
    /* Shrink label on mobile to save space */
    font-size: 11px;
  }

  .btn-row {
    flex-wrap: nowrap !important;
    gap: 6px;
  }

  .btn-row {
    flex-wrap: nowrap !important;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .label {
    width: 50px;
  }

  .input-box {
    font-size: 11px;
    padding: 6px 4px;
  }

  .auto {
    font-size: 11px;
  }
}