/* ===== 기본 ===== */
body {
  background-color: #121212;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
}
#container {
  max-width: 600px;
  margin: auto;
  padding: 20px;

}#chart {
  height: 40vh; /* 브라우저 화면 높이의 80% */
}

/* ===== 회차 ===== */
/* ===== 회차 ===== */
#round-no {
  display: flex;
  align-items: center;       /* 세로 가운데 */
  justify-content: center;   /* 가로 가운데 */
  font-size: 1.4em;           /* 글씨 조금 줄임 */
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #1d3557, #457b9d);
  border-radius: 8px;
  padding: 4px 8px;           /* 위아래 패딩 줄임 */
  line-height: 1.2;           /* 글씨 줄 간격 축소 */
  height: 40px;               /* 전체 박스 높이 축소 */
  box-sizing: border-box;     /* 패딩 포함 높이 계산 */
}

/* ===== 타이머 ===== */
/* 타이머 묶음 레이아웃 */
.timers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 12px;
  margin-bottom: 6px;
}

/* 각 타이머 카드 */
.timer-item{
  display: flex;
  flex-direction: column;      /* 위(라벨) → 아래(값) */
  justify-content: center;     /* ✅ 세로 가운데 */
  align-items: center;         /* ✅ 가로 가운데 */
  height: 56px;                /* 필요시 48~64px로 조절 */
  padding: 6px 10px;
  border-radius: 8px;
  background: #1a1a1a;         /* 카드 배경(원하는 색으로) */
  box-sizing: border-box;
}

/* 라벨과 값 */
.timer-item .timer-label{
  display: flex; align-items: center; gap: 6px; /* 아이콘/텍스트 수평정렬 */
  font-size: 12px;
  opacity: .8;
  line-height: 1;               /* 줄간격 때문에 위아래 뜨는 현상 방지 */
  margin-bottom: 2px;
}
.timer-item .timer-value{
  font-size: 20px;
  font-weight: 700;
  line-height: 1;               /* ✅ 숫자 세로정렬 정확히 */
}

/* 직접 타이머 값 넣는 엘리먼트(id)에도 안전 장치 */
#timer-deadline, #deadline, #deadline-timer,
#timer-result, #result, #result-timer{
  display: inline-block;
  text-align: center;
  line-height: 1;
  min-width: 64px;
}
/* ===== 가격판 ===== */
.price-board {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 기준가 / 종가 */
  gap: 8px;
  margin-bottom: 10px;
}

.price-col {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 6px 8px;       /* ⬅ 기존보다 안쪽 여백 줄임 */
  text-align: center;
}

.price-col .label {
  font-size: 0.8em;       /* ⬅ 라벨 글씨 크기 축소 */
  color: #aaa;
  margin-bottom: 2px;
}

.price-col .value {
  font-size: 1.2em;       /* ⬅ 가격 글씨 크기 축소 */
  font-weight: 700;
  color: #fff;
}

/* ✅ 레버리지 박스 */
.leveraged-board {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  font-size: 0.95em;
  font-weight: 600;
  color: #ffd166; /* 강조 색 */

  margin-top: 4px;   /* 위 박스와 간격 줄임 */
  margin-bottom: 12px; /* 아래 차트와 간격 띄움 */
}

.leveraged-board .label {
  font-size: 0.85em;
  color: #ffd166; /* 강조 색 */
  margin-bottom: 4px;
}

.leveraged-board .value {
  font-size: 1.3em;
  font-weight: 700;
  color: #ffd166;
}

/* ===== 베팅 UI ===== */
#betting-area {
  background-color: #1e1e1e;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}
.btn-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
  gap: 10px;
}
.btn {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  color: white;
}
.btn.selected { box-shadow: 0 0 5px 2px #fbc02d; transform: scale(1.05); }

.btn-rise { background-color: #2e7d32; }
.btn-fall { background-color: #b71c1c; }
.btn-rise.selected { background-color: #66bb6a !important; }
.btn-fall.selected { background-color: #ef5350 !important; }

.btn-multiplier { background-color: #3a3a3a; }
.btn-multiplier.selected { background-color: #fbc02d; color: black; }

.btn-submit { width: 100%; background-color: #2196f3; margin-top: 10px; }

#point-status { font-size: 14px; margin-bottom: 5px; }
#amount {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: #2c2c2c;
  color: white;
}

/* ===== 확정 요약 ===== */
#my-bet-summary.hidden { display: none; }
#my-bet-summary {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0 20px;
  line-height: 1.5;
}
#my-bet-summary .summary-line { display:flex; justify-content:space-between; margin:4px 0; }
#my-bet-summary .summary-line span:last-child { font-weight: 600; }

/* 읽기 전용/잠금 */
.disabled { opacity: .6; pointer-events: none; }

/* ===== 최근 베팅 내역 ===== */
#history {
  background-color: #1f1f1f;
  padding: 10px;
  border-radius: 10px;
}
#recent-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
#recent-list li {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.35;
}

/* 1줄: 날짜 OOO회차 + 결과 뱃지 */
#recent-list .row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  white-space: nowrap;
  line-height: 1;
}
#recent-list .row1 .date,
#recent-list .row1 .round { font-size: 1em; font-weight: normal; opacity: .9; }
#recent-list .result {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 18px;
  line-height: 18px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid transparent;
}
#recent-list .result.win  { background:#15391f; color:#7dff9b; border-color:#1f5a30; }
#recent-list .result.lose { background:#3a1717; color:#ff9a9a; border-color:#5c2323; }
#recent-list .result.wait { background:#2b2b2b; color:#e6e6e6; border-color:#3a3a3a; }

/* 2줄: 상승/하락 배율 획득포인트 */
#recent-list .row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
#recent-list .direction.rise { color:#7dff9b; }
#recent-list .direction.fall { color:#ff9a9a; }
#recent-list .multiplier { opacity:.9; }
#recent-list .reward {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 모바일 조정 */
@media (max-width: 420px){
  #recent-list li { padding: 9px 10px; }
  #recent-list .row2 { font-size: 12.5px; }
}

.bet-status {
  font-size: 13px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
}

.bet-status.win {
  background-color: rgba(0, 128, 0, 0.15);
  color: #ffffff; /* 녹색 */
}

.bet-status.lose {
  background-color: rgba(255, 0, 0, 0.15);
  color: #ffffff; /* 빨간색 */
}

.bet-status.wait {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff; /* 회색 */
}

/* ===== 확정 요약 색상 (기준가, 레버리지 적용가, 종료가, 획득 포인트) ===== */

/* 기준가 */
#sum-base {
  color: #ff5555;
}

/* 레버리지 적용가 */
#sum-base-x {
  color: #fc0505;
}

/* 종료가 */
#sum-close {
  color: #ff5555;
}

/* 획득 포인트 및 라벨 */
#sum-reward,
#sum-reward-label {
  color: #33ff33;
}

/* JS 버전 및 overlay 상태 표시 완전 숨김 */
div[id*="overlay"], 
div:has(> #overlay-status),
div:has(> .overlay-status),
div:contains("JS v="),
#overlay-status {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}