:root {
  color-scheme: dark;
  --bg: #060a14;
  --panel: #0d1526;
  --panel-2: #0a1120;
  --line: #1d2c48;
  --text: #f5f7ff;
  --muted: #95a2bb;
  --gold: #d9b25f;
  --player: #2f7bde;
  --banker: #c22e3c;
  --tie: #1f9e53;
  --pair-p: #4aa3ff;
  --pair-b: #ff5f6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- 상단 바 ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: 54px;
  padding: 8px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand {
  color: var(--gold);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
}

.game-name { font-size: 14px; white-space: nowrap; }

.back-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 17px;
  text-decoration: none;
  transition: background .15s;
}
.back-btn:hover { background: #1b2740; }

.conn {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--muted);
}
.conn[data-state="ok"]    { color: #6fe3a1; border-color: rgba(111, 227, 161, .5); }
.conn[data-state="ok"]::before { content: "●"; margin-right: 5px; font-size: 9px; }
.conn[data-state="error"] { color: #ff8089; border-color: rgba(255, 128, 137, .5); }

/* ---------- 본문 레이아웃 ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 14px;
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: 14px 16px;
}

/* ---------- 게임 컬럼 ---------- */

.game-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.game-stage { position: relative; }   /* 오버레이 배너 기준점 */

.game-frame-box {
  position: relative;             /* 터치 실드 기준점 */
  aspect-ratio: 980 / 720;        /* WebGL 빌드 해상도와 동일 비율 */
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.game-frame-shield {
  position: absolute;
  inset: 0;
  touch-action: pan-y;   /* 세로 스크롤 제스처를 페이지에 넘긴다 */
}

/* 배너 (샘플): PC=게임 화면 위 좌/우 세로 스택 오버레이, 모바일=게임 아래 가로 줄 (반응형 아래쪽) */

.banner-stack {
  position: absolute;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: clamp(112px, 17.6%, 192px);   /* 원래 가로폭의 80% */
}
.stack-left  { left: 12px; }
.stack-right { right: 12px; }

.game-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  transition: transform .15s, filter .15s;
}
.game-banner:hover { transform: translateY(-2px); filter: brightness(1.12); }

.banner-a { background: linear-gradient(135deg, #b8862f, #7a5314); }
.banner-b { background: linear-gradient(135deg, #1f8f4c, #135c30); }
.banner-c { background: linear-gradient(135deg, #b52736, #7c1a25); }
.banner-d { background: linear-gradient(135deg, #3f5fd8, #5a2f9e); }
.banner-e { background: linear-gradient(135deg, #0e9aa7, #0a5f68); }
.banner-f { background: linear-gradient(135deg, #c05299, #7d2d64); }

.banner-tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .35);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

#game-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;   /* 게임은 관전 전용 — 마우스/터치를 통과시켜 페이지 스크롤이 되게 한다 */
}

/* 베팅 보드 */

.bet-board {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 1fr 90px;
  gap: 10px;
}

.bet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  transition: filter .15s;
}
.bet:hover { filter: brightness(1.15); }

.bet .bet-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.bet .bet-odds { font-size: 15px; opacity: .9; }

.bet.side .bet-name { font-size: 14px; font-weight: 800; }
.bet.side .bet-odds { font-size: 13px; }

.bet.player { background: linear-gradient(180deg, #2559b8, #1b4494); }
.bet.tie    { background: linear-gradient(180deg, #1f8f4c, #16793d); }
.bet.banker { background: linear-gradient(180deg, #b52736, #99202d); }

.bet.pair-p { background: rgba(37, 89, 184, .16); border-color: rgba(74, 163, 255, .55); color: var(--pair-p); }
.bet.pair-b { background: rgba(181, 39, 54, .16);  border-color: rgba(255, 95, 107, .55);  color: var(--pair-b); }

/* 베팅 푸터 */

.bet-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.my-bet { color: var(--muted); font-size: 14px; white-space: nowrap; }
.my-bet b { margin-left: 6px; color: var(--gold); font-size: 18px; font-weight: 800; }

.chips {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex: 1;
}

.chip {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px dashed rgba(255, 255, 255, .75);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s;
}
.chip:hover { transform: translateY(-2px); }

.chip-10k  { background: radial-gradient(circle at 35% 30%, #c9a24f, #8a6a25); }
.chip-50k  { background: radial-gradient(circle at 35% 30%, #3fae62, #1d7a3c); }
.chip-100k { background: radial-gradient(circle at 35% 30%, #3f7fd8, #1d4f9e); }
.chip-500k { background: radial-gradient(circle at 35% 30%, #9a5bd0, #6a3399); }

.chip.selected {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.bet-actions { display: flex; gap: 10px; }

.btn-cancel, .btn-confirm {
  padding: 14px 28px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-cancel { background: #141d31; color: var(--text); }
.btn-cancel:hover { background: #1b2740; }

.btn-confirm { background: linear-gradient(180deg, #e3bc66, #c69a3f); border-color: transparent; color: #241a05; }
.btn-confirm:hover { filter: brightness(1.08); }

/* ---------- 게임 기록 사이드바 ---------- */

.record-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.record-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.record-sec h3 {
  margin: 0 0 8px;
  color: #aebad0;
  font-size: 12px;
  font-weight: 800;
}

/* 로드맵 카운트 */

.road-counts {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 13px;
}

.cnt { display: flex; align-items: center; gap: 6px; }
.cnt b { font-weight: 800; }
.cnt-total { margin-left: auto; color: var(--muted); }
.cnt-total b { margin-left: 4px; color: var(--text); }

.tag {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
}
.tag-p { background: var(--player); }
.tag-b { background: var(--banker); }
.tag-t { background: var(--tie); }

/* 기록 그리드 공통 — JS 가 (채운 셀 + 빈 셀)로 전칸을 렌더 */

.road {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  overflow: hidden;
}

.road .cell {
  position: relative;
  border: 1px solid rgba(29, 44, 72, .8);
  border-radius: 50%;
  background: rgba(10, 17, 32, .6);
}

/* 로드맵 (bead) — 18px 셀, 채움 원 */
.bead-road { grid-template-rows: repeat(6, 18px); grid-auto-columns: 18px; }

.bead-road .cell.P, .bead-road .cell.B, .bead-road .cell.T {
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.bead-road .cell.P { background: var(--player); }
.bead-road .cell.B { background: var(--banker); }
.bead-road .cell.T { background: var(--tie); }

.bead-road .cell.pp::before, .bead-road .cell.bp::after { content: ""; position: absolute; }
.bead-road .cell.pp::before { top: 1px; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--pair-p); outline: 1px solid #fff; }
.bead-road .cell.bp::after { right: 1px; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--pair-b); outline: 1px solid #fff; }

/* 빅 로드 — 16px 셀, 속 빈 링 (레거시: 타이도 셀 자체가 격자에 들어옴 → 초록 링) */
.big-road { grid-template-rows: repeat(6, 16px); grid-auto-columns: 16px; }

.big-road .cell.P, .big-road .cell.B, .big-road .cell.T { background: transparent; }
.big-road .cell.P { border: 2px solid var(--player); }
.big-road .cell.B { border: 2px solid var(--banker); }
.big-road .cell.T { border: 2px solid var(--tie); }

/* 빅 아이/스몰 로드 — 13px 셀. 관례대로 빅아이=속 빈 링 / 스몰=채운 원 */
.small-grid { grid-template-rows: repeat(6, 13px); grid-auto-columns: 13px; }

#big-eye-road .cell.P, #big-eye-road .cell.B { background: transparent; }
#big-eye-road .cell.P { border: 2px solid var(--player); }
#big-eye-road .cell.B { border: 2px solid var(--banker); }

#small-road .cell.P { border: 0; background: var(--player); }
#small-road .cell.B { border: 0; background: var(--banker); }

/* 최근 결과 */

.recent-beads { display: flex; gap: 6px; overflow: hidden; }

.recent-beads .bead {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.recent-beads .bead.P { background: var(--player); }
.recent-beads .bead.B { background: var(--banker); }
.recent-beads .bead.T { background: var(--tie); }

/* ---------- 반응형 ---------- */

@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }

  .bet-board { grid-template-columns: 70px 1fr 1fr 1fr 70px; }
  .bet .bet-name { font-size: 18px; }

  .bet-footer { flex-wrap: wrap; }
}

/* 모바일: 게임 화면 위 양옆 오버레이 유지, 배너는 2개씩 4개만 (3·6번 숨김) + 축소 */
@media (max-width: 760px) {
  .banner-stack {
    top: 8px;
    gap: 6px;
    width: clamp(84px, 24%, 130px);
  }
  .stack-left  { left: 8px; }
  .stack-right { right: 8px; }

  .banner-c, .banner-f { display: none; }

  .game-banner {
    height: 40px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .banner-tag { padding: 1px 4px; font-size: 9px; }
}