/* 실제 플레이 모드 보조 스타일 — 기존 table.css 의 색·질감(블랙·골드·에메랄드)을 그대로 따름 */

/* 데모 컨트롤은 실제 플레이에서 숨김 (주소에 ?demo 를 붙이면 표시) */
body.play-mode .demo { display: none; }
body.play-mode .rank-delta { display: none; }

/* 공개 카드 선택: 내 카드 3장만 클릭 가능 */
#cardLayer.picking .card.pickable { pointer-events: auto; cursor: pointer; }
#cardLayer.picking .card.pickable .card-face { box-shadow: 0 0 0 2px rgba(251, 226, 160, .85), 0 0 16px rgba(255, 210, 90, .55), 0 6px 14px rgba(0, 0, 0, .4); }
#cardLayer.picking .card.pickable:hover { transform: translateY(-16px) !important; }
#cardLayer.picking .card.pickable:hover .card-face { box-shadow: 0 0 0 3px #ffd75e, 0 0 26px rgba(255, 210, 90, .9), 0 10px 18px rgba(0, 0, 0, .45); }

/* 남은 시간 (내 아바타 옆) */
.turn-clock {
  position: absolute; right: -10px; top: -10px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 900 16px var(--ui); color: #2a1a03; font-variant-numeric: tabular-nums;
  background: var(--gold-metal); box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 -2px 2px rgba(0, 0, 0, .25);
  border: 2px solid #1a1206; opacity: 0; transform: scale(.4); transition: .25s cubic-bezier(.3, 1.6, .5, 1);
}
.turn-clock.show { opacity: 1; transform: scale(1); }
.turn-clock.urgent { background: linear-gradient(180deg, #ff7b6b, #c4172a); color: #fff; animation: clockPulse .5s ease-in-out infinite alternate; }
@keyframes clockPulse { to { transform: scale(1.12); } }
.portrait .turn-clock { width: 30px; height: 30px; font-size: 14px; }

/* 남은 시간 (베팅 버튼 위, 2026-10-13) — 버튼 영역 위쪽 가장자리에 걸쳐 표시 · 버튼 배치·크기는 그대로 */
.turn-bar { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s; }
.turn-bar.show { opacity: 1; }
.turn-bar .tb-track { position: absolute; left: 6px; right: 6px; top: -9px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .6); overflow: hidden; }
.turn-bar .tb-fill { height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #7dff8a, #ffd257); transition: width 1s linear; }
.turn-bar .tb-pill {
  position: absolute; left: 50%; top: -6px; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 4px 18px; border-radius: 22px; font: 700 22px var(--ui); color: #2a1a03; font-variant-numeric: tabular-nums;
  background: var(--gold-metal); border: 2px solid #1a1206; box-shadow: 0 4px 12px rgba(0, 0, 0, .65);
}
.turn-bar .tb-pill b { font-size: 30px; font-weight: 900; margin: 0 2px; }
.turn-bar.urgent .tb-fill { background: #ff4d4d; }
.turn-bar.urgent .tb-pill { background: linear-gradient(180deg, #ff7b6b, #c4172a); color: #fff; animation: tbBlink .5s ease-in-out infinite alternate; }
@keyframes tbBlink { to { filter: brightness(1.35); box-shadow: 0 0 22px rgba(255, 70, 70, .95); } }
.portrait .turn-bar .tb-pill { font-size: 26px; padding: 4px 22px; }
.portrait .turn-bar .tb-pill b { font-size: 36px; }

/* 잔액 부족 시 올인 별도 선택 */
.allin-btn {
  position: absolute; right: 0; top: -54px; height: 44px; padding: 0 18px; border-radius: 22px; display: none; align-items: center; gap: 10px;
  color: #fff; background: linear-gradient(180deg, #c065e6, #5e1a86); border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .55), 0 0 0 2px rgba(0, 0, 0, .55);
}
.allin-btn.show { display: inline-flex; animation: halfGlow 1.6s ease-in-out infinite; }
.allin-btn .ai-k { font-size: 18px; font-weight: 900; }
.allin-btn .ai-amt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.portrait .allin-btn { top: -56px; height: 46px; }

/* 관전·충전 안내 */
.center-msg {
  position: absolute; left: 50%; top: 42%; z-index: 70; transform: translate(-50%, -50%); padding: 18px 28px; border-radius: 18px; text-align: center;
  background: rgba(5, 10, 8, .9); border: 1px solid rgba(232, 194, 106, .6); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  font-size: 16px; color: #e8e2d0; white-space: nowrap; display: none;
}
.center-msg.show { display: block; }
.center-msg b { color: var(--gold-hi); font-size: 20px; display: block; margin-bottom: 6px; }
.center-msg button {
  margin-top: 12px; height: 38px; padding: 0 22px; border-radius: 19px; font-size: 15px; font-weight: 900; color: #052a1d;
  background: linear-gradient(180deg, #a9ffdc, #2fd197 50%, #12996b); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0, 0, 0, .5);
}
.center-msg button:disabled { filter: grayscale(1) brightness(.6); }

/* ---------------------------------------------------------------- 브랜드: 하이로AI 온라인 (HILO AI ONLINE, 2026-10-13)
   대표 로고(assets/brand/hilo-logo.png) 를 작은 화면용으로 단순화: O = 스페이드가 든 금 고리 · AI = 은청색 · ONLINE 은 금선 사이 */
.hilo-mark { display: inline-flex; align-items: center; white-space: nowrap; }
.hilo-mark .hm-o {
  display: inline-block; width: .82em; height: .82em; margin: 0 .04em 0 .02em; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 50% 45%, #10204a 0 54%, transparent 56%), var(--gold-metal);
  box-shadow: inset 0 0 0 .02em rgba(0, 0, 0, .55), 0 .04em .06em rgba(0, 0, 0, .6);
}
.hilo-mark .hm-o::after {
  content: ''; position: absolute; inset: 24%;
  background: var(--gold-metal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C9 6 4 9 4 13.2 4 16 6 17.8 8.3 17.8c1.3 0 2.4-.6 3-1.4-.2 2-1 3.6-2.6 4.6h6.6c-1.6-1-2.4-2.6-2.6-4.6.6.8 1.7 1.4 3 1.4 2.3 0 4.3-1.8 4.3-4.6C20 9 15 6 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C9 6 4 9 4 13.2 4 16 6 17.8 8.3 17.8c1.3 0 2.4-.6 3-1.4-.2 2-1 3.6-2.6 4.6h6.6c-1.6-1-2.4-2.6-2.6-4.6.6.8 1.7 1.4 3 1.4 2.3 0 4.3-1.8 4.3-4.6C20 9 15 6 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.brand-main.hilo-mark .hm-ai {
  margin-left: .16em;
  background: linear-gradient(170deg, #f4f8ff 0%, #b9cbe6 35%, #6f8fbf 62%, #dbe7fb 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hilo-sub { gap: 7px; letter-spacing: 6px; }
.hilo-sub i { width: auto !important; height: 1px !important; flex: 1; min-width: 10px; transform: none !important; background: linear-gradient(90deg, transparent, #b8922f) !important; }
.hilo-sub i:last-child { background: linear-gradient(90deg, #b8922f, transparent) !important; }
/* 테이블 바닥 무늬: 같은 모양을 옅게 */
.fl-main.hilo-mark { justify-content: center; }
.fl-main.hilo-mark .hm-o { opacity: .22; box-shadow: none; }
.fl-main.hilo-mark .hm-ai { margin-left: .14em; color: rgba(185, 205, 235, .2); }

/* 하이·로우·스윙 선언 창 (2026-10-16 사용자 요청): 화면 아래에 붙이고 어둡게 덮지 않음
   → 상대 공개 카드를 보면서 선택 (가운데 창이 중간 줄 두 자리의 공개 카드를 가리던 문제) */
.hilo-overlay { align-items: flex-end; background: none; }
.hilo-overlay.show { pointer-events: none; }
.hilo-overlay.show .hilo-panel { pointer-events: auto; }
.hilo-panel { margin-bottom: 12px; padding: 14px 24px 16px; }
.hilo-eyebrow, .hilo-desc, .ch-info { display: none; }
.hilo-title { margin-top: 0; font-size: 22px; }
.hilo-hand { margin: 10px 0 12px; }
.choice { height: 118px; }
.ch-ic { height: 34px; }
.ch-ic svg { width: 30px; height: 30px; }
.ch-en { font-size: 24px; }
.hilo-timer { margin-top: 14px; }
.portrait .hilo-panel { width: 696px; padding: 14px 16px 16px; }
.portrait .hilo-hand { flex-direction: row; gap: 12px; }
.portrait .choice { height: 128px; }