/* Trust 이식 스테이지 — 원본 데모 CSS 위에 얹는 보정 + Manggo 베팅 바.
   원본 톤(어두운 남색 + 하늘색 강조)을 그대로 쓰고, 데모 전용 장식만 걷어낸다. */
/* 베팅판 규칙은 /static/css/bet-panel.css 하나로 관리한다.
   @import 로 끌어오지 않는다 — 그 주소에는 ?v= 를 붙일 수 없어서 고쳐도
   브라우저가 7일 동안 옛것을 쓴다(1 원칙, 2026-09-14).
   **이 파일을 쓰는 화면은 bet-panel.css 를 제 <link> 로 먼저 받는다.** */


/* ── 데모 전용 요소 감추기 (Trust make_embed.py 의 목록을 그대로 따랐다) ── */
.trust, .foot, .rules, .vbox, .tblbox, .pager, #p_wrap, .nroad, .nbottom,
.picks, .tally, .bet, .betmsg, .wrap > h2, .legend, .top, .nav, .head, .gnb,
.pbox, .pgrid, .tabs, #p_grid, .roads, .ptabs, .snd { display: none !important; }

html, body { height: 100%; overflow: hidden; }
body { font-size: 13px; }

/* ── 무대 ── */
.wrap { max-width: none; margin: 0; padding: 8px 12px 0; height: 100%;
  display: flex; flex-direction: column; }
.wrap > .card { border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.hud { flex: 0 0 auto; margin-bottom: 4px; font-size: 12px; }

/* ── 게임판이 남는 높이를 채운다 (2026-09-11) ──
   무대는 3:2 상자다(게임 페이지가 정한다). 그런데 게임판은 제 높이만 차지해서
   1009px 폭에서 673px 상자에 300px 짜리 판이 앉고 **아래 절반이 검게 비었다**
   (사용자 지적: 하이로우). 판을 늘리고 안쪽을 세로 가운데로 모은다.

   대상은 **골라서** 적는다. `.hud + *` 로 뭉뚱그리면 BTC 의 진행바(.prog)까지
   늘어나 10px 짜리 막대가 화면을 채운다 — 실제로 그렇게 될 뻔했다. */
.wrap > .card > .felt,
.wrap > .card > .stage,
.wrap > .card > .table,
.wrap > .card > .body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
}
/* 캔버스가 든 판은 캔버스를 가운데로. 캔버스 크기는 원본 코드가 정한다 — 건드리지 않는다. */
.wrap > .card > .stage > canvas { margin: 0 auto; }

/* ── 카운트다운은 줄을 차지하지 않는다 (2026-09-08) ──
   사용자: "타임아웃 시간 때문에 게임이 아래로 밀립니다."
   시계 글씨가 24px 라 머리줄이 그만큼 두꺼워지고, 좁은 화면에서는 이름·회차 뒤에서
   다음 줄로 넘어가 머리줄이 **두 줄(68px)** 이 됐다 — 세로 280px 짜리 모바일 무대에서
   4분의 1을 글자가 먹고 게임판이 그만큼 아래로 밀린다(351px 폭 실측).
   그래서 시계를 흐름에서 빼 머리줄 오른쪽 위에 얹는다. 자리를 안 먹고,
   게임 그림 위로는 내려오지 않아 무엇도 가리지 않는다.
   기준 상자가 게임마다 다르다 — 대개 .card 지만 섯다는 .wrap 이 바로 부모다. */
.wrap, .wrap > .card { position: relative; }
.wrap > .card > .hud, .wrap > .hud { padding-right: 86px; min-height: 20px; }
/* 줄바꿈을 막아야 이름이 줄어든다(안 막으면 먼저 다음 줄로 넘어간다).
   섯다(.wrap > .hud)는 뺀다 — 거기 첫 칸은 시세 숫자라 잘리면 게임 정보가 사라진다. */
.wrap > .card > .hud { flex-wrap: nowrap; }
.wrap > .card > .hud > .timer, .wrap > .hud > .timer {
  position: absolute; top: 0; right: 0; margin: 0; z-index: 6;
  font-size: 19px; line-height: 20px; }
@media (max-width: 430px) {
  .wrap > .card > .hud { padding-right: 78px; }
  /* 섯다 시계는 '다음' 글자 없이 숫자만이라(0:20) 자리를 덜 비워도 된다. */
  .wrap > .hud { padding-right: 52px; }
  .wrap > .card > .hud > .timer, .wrap > .hud > .timer { font-size: 17px; }
  /* 예전에는 좁으면 이름을 아예 감췄다(회차가 잘리는 것보다 낫다고 봤다).
     이제 이름이 '바카라 1분' 처럼 짧아졌으니 **보여 주고 폭만 묶는다**
     (사용자 지시 2026-09-14 "제목만 간단하게"). 모자라면 이름만 … 로 잘린다 —
     회차 번호는 이 span 밖이라 절대 안 잘린다. */
  #mg_gname { max-width: 38vw; }
  /* 섯다는 머리줄이 시세·회차·BASE·상태로 넉넉해 좁은 화면에서 두 줄이 된다.
     BASE(검증용 씨앗 두 자리)는 아래 검증란에도 있으니 좁을 때만 접고,
     시세는 조금 줄여 한 줄에 앉힌다. 시세 자체는 자르지 않는다. */
  .wrap > .hud > .base + .base { display: none; }
  .wrap > .hud > .price { font-size: 19px; }
}

/* 머리줄은 **한 줄**로 고정한다. 이름이 길면 말줄임으로 자른다 —
   두 줄이 되는 순간 게임판이 또 34px 내려간다. 게임 이름은 바로 위 페이지 머리에도 있다. */
.wrap > .card > .hud > .round {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap > .card > .hud > .state, .wrap > .hud > .state { flex: 0 0 auto; }
.stage { max-width: none; position: relative; margin: 0 auto; min-height: 0; }
canvas { max-width: none; margin: 0 auto; display: block; }
canvas.ts-fx { left: 0; right: 0; width: 100%; }
.strip { margin: 4px 0 0; flex-wrap: nowrap; overflow-x: auto; justify-content: center; }
.strip > * { flex: 0 0 auto; }
.result { margin: 4px 0 0; min-height: 30px; }
.verdict { display: none !important; }          /* 모의 예측 판정 문구 */

/* 머리줄 이름 — 한 줄 고정. 모자라면 **이름만** … 로 자른다(회차 번호는 이 span 밖이다).
   좁은 화면에서 이름이 접히면 머리줄이 두 줄이 되고 게임판이 그만큼 아래로 밀린다. */
#mg_gname { display: inline-block; vertical-align: bottom;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .round { white-space: nowrap; }
/* 섯다·BTC 는 이름이 `.round` 안이 아니라 머리줄의 첫 칸이다(빌더가 거기 꽂는다).
   그 경우에도 제목처럼 보이게 색·굵기를 준다. `.round` 안에 있을 때는 이미 같은 값이다. */
#mg_gname { color: var(--accent); font-weight: 700; }
#mg_gname:empty { display: none; }

/* 섯다 머리줄만 예외 — 시세·회차·상태로 이미 꽉 차 있어서, 좁은 화면에서 이름까지 넣으면
   줄이 하나 늘어 게임판이 그만큼 밀린다(실측 26px → 64px). 사용자가 못박은 우선순위가
   '행 밀림 방지' 이므로 이 화면만 좁을 때 이름을 접는다. 넓으면 보인다(2026-09-14). */
@media (max-width: 520px) { .wrap > .hud > #mg_gname { display: none; } }