/* 베팅판 (모든 게임 공용) — static/js/bet-panel.js 가 만드는 DOM 의 스타일.
   2026-09-05 이전에는 이 규칙들이 static/trust/css/stage.css 안에만 있어서 Trust 이식 게임에서만
   쓸 수 있었다. 파워볼·룰렛·주사위·트랙에도 베팅판을 붙이려고 여기로 뽑았다.
   stage.css 는 이 파일을 @import 한다 — 규칙을 두 벌로 두지 않는다. */

#mg-bet { flex: 0 0 auto; margin-top: auto; padding: 8px 0 10px;
  background: linear-gradient(#070b1200, #070b12e6 24%); }
#mg-markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.mg-mk { background: #0c1420; border: 1px solid var(--line, #22303f); border-radius: 10px;
  padding: 5px 6px 6px; min-width: 0; }
.mg-mk > .t { font-size: 10.5px; color: var(--sub, #8798ad); font-weight: 700;
  margin-bottom: 5px; text-align: center; }
.mg-opts { display: flex; gap: 4px; }
.mg-opt { flex: 1 1 0; min-width: 0; border-radius: 8px; padding: 6px 3px 4px;
  background: #16202f; border: 1px solid #ffffff14; text-align: center; cursor: pointer;
  font-weight: 800; transition: transform .1s, border-color .12s, background .12s; color: inherit; }
.mg-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent, #38bdf8); }
.mg-opt:disabled { opacity: .45; cursor: default; }
.mg-opt .lb { display: block; font-size: 12px; line-height: 1.2; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* 좁은 화면에서는 잘리는 대신 두 줄까지 쓴다(2026-09-11).
   '홀언더' 가 '홀…' 로 잘려 무엇을 고르는지 알 수 없었다 — 375px 실측. */
@media (max-width: 560px) {
  .mg-opt .lb { white-space: normal; text-overflow: clip; font-size: 11px;
    line-height: 1.15; word-break: keep-all; }
  /* 선택칸이 여섯이면 한 칸이 36px 밖에 안 된다(375px 실측). 글자를 더 줄이는 대신
     **줄을 접는다** — 여섯 개가 3+3 두 줄이 되어 이름이 그대로 읽힌다. */
  .mg-opts { flex-wrap: wrap; row-gap: 4px; }
  .mg-opt { flex: 1 1 62px; min-width: 62px; }
}
.mg-opt .od { display: block; font-size: 10px; color: var(--accent, #38bdf8); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.mg-opt .amt { display: block; min-height: 12px; font-size: 10px; color: #ffd64a;
  font-variant-numeric: tabular-nums; }
.mg-opt .cap { display: block; font-size: 9.5px; color: var(--sub, #8798ad); }
.mg-opt.hit { border-color: #22c55e; background: #0e2a1b; }
.mg-opt[data-tone="red"] .lb { color: #ff9aa4; }
.mg-opt[data-tone="blue"] .lb { color: #9ec5ff; }
.mg-opt[data-tone="gold"] .lb { color: #ffd64a; }
.mg-opt[data-tone="green"] .lb { color: #86efac; }
.mg-opt[data-tone="purple"] .lb { color: #c4b5fd; }
.mg-opt[data-tone="black"] .lb { color: #cbd5e1; }

#mg-bar { display: flex; align-items: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.mg-chip { padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 800;
  background: #16202f; border: 1px solid var(--line, #22303f); color: inherit; cursor: pointer; }
.mg-chip.on { background: #0b3a63; border-color: var(--accent, #38bdf8); }
.mg-chip.cancel { background: #2a1418; border-color: #5b2630; color: #ffb4b4; }
#mg-wallet { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--sub, #8798ad); }
#mg-wallet b { color: var(--ink, #eaf2fb); font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums; }

#mg-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90;
  padding: 7px 16px; border-radius: 8px; background: #111827f2; border: 1px solid var(--line, #22303f);
  font-size: 12.5px; }
#mg-win { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center;
  text-align: center; background: #04070cc4; }
#mg-win .t { font-size: 20px; font-weight: 900; letter-spacing: .1em; color: #ffd64a; }
#mg-win .a { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }