/* ============================================================
   ICOC OMNIPO — Game Arcade Shared Stylesheet
   공통 게임 런처 / 모달 / 보드 / 포인트 UI
   ============================================================ */

/* ── Daily Points Badge (lang-bar에 삽입) ── */
.points-badge {
  display:flex; align-items:center; gap:6px;
  padding:5px 14px;
  border:1px solid var(--border);
  border-radius:2px;
  font-size:12px; letter-spacing:0.04em;
  color:var(--gold);
  margin-right:14px;
  white-space:nowrap;
  cursor:default;
}
.points-badge .coin { font-size:13px; }
.points-badge .cap-note {
  font-size:9px; color:rgba(245,240,232,0.4);
  margin-left:4px; letter-spacing:0;
}

/* ── Sport Card: 플레이 가능 표시 ── */
.sport-card.playable { cursor:pointer; }
.sport-card.playable:hover { background:rgba(201,168,76,0.08); }
.sport-card.playable .sport-name::after {
  content:"▶ PLAY"; display:inline-block;
  font-size:9px; letter-spacing:0.15em;
  color:var(--navy); background:var(--gold);
  padding:2px 7px; border-radius:2px;
  margin-left:10px; vertical-align:middle;
  font-family:'Noto Sans KR',sans-serif; font-weight:700;
}
.sport-card.coming-soon { opacity:0.55; }
.sport-card.coming-soon .sport-name::after {
  content:"준비중"; display:inline-block;
  font-size:9px; letter-spacing:0.1em;
  color:rgba(245,240,232,0.55); border:1px solid var(--border);
  padding:2px 7px; border-radius:2px;
  margin-left:10px; vertical-align:middle;
  font-family:'Noto Sans KR',sans-serif; font-weight:400;
}

/* ── Game Modal Shell ── */
.game-modal {
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(5,12,24,0.92);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  padding:24px;
}
.game-modal.open { display:flex; }
.game-modal-box {
  background:linear-gradient(160deg, #102745 0%, #0B1F3A 100%);
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px;
  /* 모바일: 꽉 채우기 */
  width:min(98vw, 600px);
  max-height:95vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
/* PC에서 바둑/오목 등 큰 보드는 더 넓게 */
@media(min-width:768px){
  .game-modal-box {
    width:min(90vw, 820px);
    max-height:92vh;
    padding:28px 32px;
  }
}
@media(min-width:1200px){
  .game-modal-box {
    width:min(82vw, 920px);
  }
}
.game-modal-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; gap:12px;
}
.game-modal-title {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:700; color:var(--cream);
  display:flex; align-items:center; gap:10px;
}
.game-modal-title .icon { font-size:24px; }
.game-close-btn {
  background:transparent; border:1px solid var(--border);
  color:var(--cream); width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:15px; line-height:1;
  transition:all 0.2s; flex-shrink:0;
}
.game-close-btn:hover { background:rgba(201,168,76,0.15); border-color:var(--gold); }

/* ── Status / Turn Bar ── */
.game-status-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; gap:10px; flex-wrap:wrap;
}
.game-turn-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:20px;
  font-size:12px; letter-spacing:0.05em;
  border:1px solid var(--border); color:rgba(245,240,232,0.55);
  transition:all 0.25s;
}
.game-turn-pill.active {
  border-color:var(--gold); color:var(--gold);
  background:rgba(201,168,76,0.1);
}
.game-result-msg {
  font-family:'Playfair Display',serif;
  font-size:15px; color:var(--gold); text-align:center;
  margin:10px 0; min-height:22px;
}
.game-points-earned {
  font-size:11px; color:rgba(245,240,232,0.55); text-align:center;
  margin-bottom:10px; letter-spacing:0.03em;
}

/* ── Board generic grid (칸 안에 말을 놓는 게임: 체스/체커 등) ── */
.board-grid {
  display:grid; margin:0 auto;
  background:#dcbc83;
  border:3px solid #8a6a3b;
  border-radius:4px;
  width:100%; max-width:460px;
  overflow:hidden;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.25);
}
.board-cell {
  position:relative;
  aspect-ratio:1/1;
  border:1px solid rgba(0,0,0,0.28);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  overflow:hidden;
}
.board-cell:hover::before {
  content:''; position:absolute; inset:8%;
  border-radius:50%; background:rgba(255,255,255,0.18);
}

/* ── Goban (줄의 교차점에 돌을 놓는 게임: 바둑/오목 등) ── */
.goban {
  position:relative; margin:0 auto;
  background:linear-gradient(135deg,#e8c87a 0%,#dcbc83 40%,#d4b06a 100%);
  border:3px solid #8a6a3b;
  border-radius:4px;
  aspect-ratio:1/1;
  width:min(calc(100% - 0px), calc(96vh - 200px));
  max-width:100%;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.2), 0 4px 24px rgba(0,0,0,0.35);
  overflow: hidden;
  box-sizing: border-box;
  /* 가장자리 돌이 보드 테두리에 정확히 맞도록 padding 확보
     19×19: cell spacing ≈ 5.56%, 돌 반지름 ≈ 2.3% */
  padding: 2.8%;
}
/* 19×19 전용 래퍼 */
.go-board-wrap-19 .goban {
  width:min(100%, calc(96vh - 180px));
  max-width:100%;
}
/* 데스크톱 */
@media(min-width:768px){
  .goban { width:min(100%, min(72vh, 640px)); max-width:100%; }
  .go-board-wrap-19 .goban { width:min(100%, min(80vh, 760px)); max-width:100%; }
}
@media(min-width:1200px){
  .goban { width:min(100%, min(76vh, 700px)); max-width:100%; }
  .go-board-wrap-19 .goban { width:min(100%, min(84vh, 820px)); max-width:100%; }
}
.goban-inner {
  position:absolute;
  inset: 0; /* padding이 여백 역할 → inner는 padding 영역 안에서 꽉 채움 */
}
.grid-line { position:absolute; background:rgba(0,0,0,0.4); }
.grid-line-h { left:0; right:0; height:1px; }
.grid-line-v { top:0; bottom:0; width:1px; }
.star-point {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:rgba(0,0,0,0.6); transform:translate(-50%,-50%);
  pointer-events:none;
}
.intersection {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:1;
}
.intersection:hover:not(:has(.go-stone))::before {
  content:''; width:72%; height:72%; border-radius:50%;
  background:rgba(0,0,0,0.15); display:block;
}
/* 바둑돌 */
.go-stone {
  width:88%; height:88%; border-radius:50%;
  position:relative; transition:transform .08s;
}
.go-stone.go-black {
  background:radial-gradient(circle at 35% 30%, #6a6a6a, #111 60%, #000);
  box-shadow:1px 2px 4px rgba(0,0,0,0.6);
}
.go-stone.go-white {
  background:radial-gradient(circle at 35% 30%, #fff, #e8e8e8 60%, #c0c0c0);
  box-shadow:1px 2px 4px rgba(0,0,0,0.45);
  border:1px solid rgba(0,0,0,0.12);
}
.go-stone.last-move::after {
  content:''; position:absolute; inset:30%; border-radius:50%;
  background:rgba(220,80,80,0.75);
}
.go-status-text {
  text-align:center; font-size:13px; min-height:18px;
  color:rgba(245,240,232,0.7); margin:6px 0 2px;
}

/* ── Chess ── */
.chess-cell.chess-light { background:#eed9b5; }
.chess-cell.chess-dark { background:#a9764f; }
.chess-cell { border:none !important; }
.chess-piece {
  font-size:min(8vw, 34px); line-height:1; user-select:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.chess-piece-w { color:#f7f3ea; }
.chess-piece-b { color:#161616; }
.chess-cell.chess-selected { box-shadow:inset 0 0 0 3px var(--gold); }
.chess-cell.chess-target::after {
  content:''; position:absolute; width:30%; height:30%; border-radius:50%;
  background:rgba(201,168,76,0.55);
}
.chess-cell.chess-last { background-color:rgba(201,168,76,0.35) !important; }

/* ── Connect 4 ── */
.connect4-grid { background:#1b4d8f; border-color:#0d2c52; }
.connect4-cell { border-radius:50%; background:rgba(255,255,255,0.06); margin:6%; border:none !important; }
.connect4-cell:hover::before { content:''; position:absolute; inset:8%; border-radius:50%; background:rgba(255,255,255,0.15); }

/* ── Reversi ── */
.reversi-cell { background:#2a7a3d; border-color:rgba(0,0,0,0.2) !important; }
.reversi-cell.reversi-hint::before {
  content:''; position:absolute; width:22%; height:22%; border-radius:50%;
  background:rgba(255,255,255,0.35);
}

/* ── Hex ── */
.hex-board-wrap {
  max-width:480px; margin:0 auto; padding:14px 8px 14px 0;
  background:rgba(0,0,0,0.15); border-radius:8px;
}
.hex-row { display:flex; }
.hex-cell {
  flex:0 0 8.4%;
  margin:0 0.7% 0 0;
  aspect-ratio:1/0.87;
  background:#c9a256;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.15s;
}
.hex-cell:hover { background:#e0c98a; }
.hex-disc { width:62%; height:62%; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,0.4); }
.hex-red { background:radial-gradient(circle at 32% 30%, #ff7b7b, #b91c1c 78%); }
.hex-blue { background:radial-gradient(circle at 32% 30%, #7bb6ff, #1d4ed8 78%); }

/* ── Quoridor ── */
.qd-wrap { max-width:460px; margin:0 auto; }
.qd-grid {
  display:grid;
  grid-template-columns:repeat(17, 1fr);
  grid-template-rows:repeat(17, 1fr);
  aspect-ratio:1/1;
  background:#8a6a3b; border-radius:4px; padding:3%;
  gap:2px;
}
.qd-cell {
  background:#dcbc83; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
}
.qd-cell.qd-hint::before {
  content:''; position:absolute; inset:18%; border-radius:50%;
  background:rgba(201,168,76,0.5);
}
.qd-wall-slot { background:transparent; cursor:pointer; border-radius:2px; }
.qd-wall-slot:hover { background:rgba(201,168,76,0.35); }
.qd-wall-slot.qd-wall-active { background:#c0392b; }
.qd-mode-bar { display:flex; gap:10px; justify-content:center; margin-bottom:14px; }
.qd-mode-btn {
  padding:7px 18px; border-radius:3px; font-size:12px; letter-spacing:0.05em;
  border:1px solid var(--border); background:transparent; color:var(--cream); cursor:pointer;
}
.qd-mode-btn.active { background:var(--gold); border-color:var(--gold); color:var(--navy); font-weight:700; }

/* ── Checkers ── */
.checker-king {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:55%; color:var(--gold); pointer-events:none;
}

/* ── Blackjack ── */
.bj-table { margin-bottom:18px; }
.bj-hand-area { margin-bottom:18px; text-align:center; }
.bj-hand-label { font-size:13px; color:rgba(245,240,232,0.65); margin-bottom:8px; letter-spacing:0.05em; }
.bj-total { color:var(--gold); font-weight:700; margin-left:6px; }
.bj-cards { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; min-height:84px; }
.bj-card {
  width:56px; height:80px; border-radius:6px; background:#fdfaf3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; color:#1a1a1a;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);
  animation:stonePop 0.2s ease;
}
.bj-card.bj-red { color:#c0392b; }
.bj-suit { font-size:16px; }
.bj-card-back {
  background:repeating-linear-gradient(45deg, var(--gold) 0 6px, #8a6a3b 6px 12px);
  border:2px solid var(--gold);
}

/* ── Old Maid ── */
.om-card { width:46px; height:66px; font-size:14px; }
.om-card .bj-suit { font-size:13px; }
.om-joker { color:var(--gold); font-size:10px; }
.om-pickable { cursor:pointer; transition:transform 0.15s; }
.om-pickable:hover { transform:translateY(-6px); }

/* ── Bowling ── */
.bw-scoreboard { margin-bottom:16px; }
.bw-scoreboard-label { font-size:12px; color:rgba(245,240,232,0.55); margin:10px 0 4px; letter-spacing:0.05em; }
.bw-frames-row { display:flex; gap:3px; overflow-x:auto; }
.bw-frame-cell {
  flex:1 0 auto; min-width:34px;
  border:1px solid var(--border); border-radius:3px;
  text-align:center; padding:4px 2px;
}
.bw-frame-cell.bw-frame-active { border-color:var(--gold); background:rgba(201,168,76,0.12); }
.bw-frame-num { font-size:9px; color:rgba(245,240,232,0.4); }
.bw-frame-rolls { font-size:12px; font-weight:700; color:var(--gold); min-height:16px; }

/* ── Da Vinci Code ── */
.dv-tile-row { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; min-height:64px; }
.dv-tile {
  width:48px; height:64px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);
  animation:stonePop 0.2s ease;
}
.dv-tile-black { background:#1a1a1a; color:#f5f0e8; border:1px solid #444; }
.dv-tile-white { background:#f5f0e8; color:#1a1a1a; border:1px solid #ccc; }
.dv-tile-back {
  background:repeating-linear-gradient(45deg, var(--gold) 0 6px, #8a6a3b 6px 12px);
  border:2px solid var(--gold); color:var(--navy); font-size:18px;
}
.dv-pickable { cursor:pointer; transition:transform 0.15s; }
.dv-pickable:hover { transform:translateY(-6px); }
.dv-picker {
  display:grid; grid-template-columns:repeat(12, 1fr); gap:4px;
  margin:12px 0; padding:10px; border:1px solid var(--border); border-radius:6px;
}
.dv-picker-btn {
  aspect-ratio:1/1; border-radius:4px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid var(--border);
}
.dv-picker-black { background:#1a1a1a; color:#f5f0e8; }
.dv-picker-white { background:#f5f0e8; color:#1a1a1a; }
.dv-picker-disabled { opacity:0.18; cursor:not-allowed; }

/* ── One Card ── */
.oc-card { width:50px; height:72px; font-size:16px; }
.oc-card .bj-suit { font-size:14px; }
.oc-card-disabled { opacity:0.4; }

/* ── Backgammon ── */
.bg-off-pill { font-size:11px; color:rgba(245,240,232,0.6); }
.bg-dice { display:flex; justify-content:center; gap:10px; margin:10px 0 16px; }
.bg-die {
  width:34px; height:34px; border-radius:6px; background:var(--cream); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.bg-die-used { opacity:0.25; }
.bg-board { background:#5c3a21; border:3px solid #3a2414; border-radius:6px; padding:8px; }
.bg-row { display:flex; gap:2px; }
.bg-point {
  flex:1; min-height:90px; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding-top:4px; cursor:pointer;
  background:rgba(255,255,255,0.04);
  border-left:1px solid rgba(255,255,255,0.06);
}
.bg-point:nth-child(odd) { background:rgba(255,255,255,0.09); }
.bg-point-selected { outline:2px solid var(--gold); }
.bg-point-hint { background:rgba(201,168,76,0.3) !important; }
.bg-stack { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bg-checker {
  width:22px; height:22px; border-radius:50%;
  box-shadow:0 2px 3px rgba(0,0,0,0.5);
}
.bg-checker-p { background:radial-gradient(circle at 32% 30%, #f7f3ea, #c9bca4 78%); }
.bg-checker-a { background:radial-gradient(circle at 32% 30%, #555, #050505 78%); }
.bg-checker-count { font-size:10px; color:var(--gold); font-weight:700; }
.bg-bar-row { display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 0; }
.bg-bar-pill {
  font-size:11px; padding:6px 14px; border-radius:3px;
  border:1px solid var(--border); cursor:pointer; color:rgba(245,240,232,0.7);
}
.bg-bar-pill:hover { border-color:var(--gold); color:var(--gold); }

/* ── Go-Stop (화투) ── */
.gs-panel {
  border:1px solid var(--border); border-radius:8px;
  padding:12px; margin-bottom:12px;
  background:rgba(0,0,0,0.18);
}
.gs-panel-header {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:10px;
}
.gs-panel-title { font-size:13px; font-weight:700; color:var(--cream); letter-spacing:0.03em; }
.gs-panel-meta { font-size:12px; color:var(--gold); font-weight:700; }
.gs-badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; min-height:22px; }
.gs-badge {
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px;
  color:var(--navy);
}
.gs-badge-gwang { background:var(--gold); }
.gs-badge-animal { background:#7fb88a; }
.gs-badge-ribbon { background:#d98a8a; }
.gs-badge-junk { background:#9aa3ad; }
.gs-card-row {
  display:flex; gap:6px; flex-wrap:wrap;
  min-height:50px;
}
.gs-card {
  width:64px; height:96px; border-radius:5px;
  box-shadow:0 3px 7px rgba(0,0,0,0.4);
  background-repeat:no-repeat;
  animation:stonePop 0.2s ease;
  flex-shrink:0;
}
.gs-card-small { width:42px; height:63px; }
.gs-card.om-pickable { cursor:pointer; transition:transform 0.15s; }
.gs-card.om-pickable:hover { transform:translateY(-8px); }
.gs-card-selected { outline:3px solid var(--gold); transform:translateY(-8px); }
.gs-confirm-box {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border:1px solid var(--gold); border-radius:6px; padding:14px; margin-bottom:14px;
  background:rgba(201,168,76,0.1);
}
.gs-confirm-text { font-size:13px; text-align:center; color:var(--cream); }
.gs-confirm-btns { display:flex; gap:10px; }
.gs-gostop-box {
  flex-direction:column; align-items:center; gap:10px;
  border:1px solid var(--gold); border-radius:6px; padding:14px; margin-bottom:14px;
  background:rgba(201,168,76,0.08);
}
.gs-gostop-text { font-size:13px; text-align:center; color:var(--cream); }
.gs-gostop-btns { display:flex; gap:10px; }
.gs-log { font-size:12px; color:rgba(245,240,232,0.55); text-align:center; margin-top:8px; min-height:16px; }

/* ── Backgammon ── */
.bg-dice { display:flex; justify-content:center; gap:8px; margin-bottom:14px; min-height:34px; }
.bg-die {
  width:32px; height:32px; border-radius:6px; background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.bg-die-used { opacity:0.25; }
.bg-board { background:#5a3a22; border:3px solid #3a2414; border-radius:4px; padding:10px 6px; }
.bg-row { display:flex; gap:2px; }
.bg-point {
  flex:1; min-height:90px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding-top:4px;
  background:rgba(0,0,0,0.12); cursor:pointer; position:relative;
}
.bg-row-top .bg-point, #bg-row-top .bg-point { border-bottom: 2px solid rgba(0,0,0,0.3); }
.bg-point:nth-child(odd) { background:rgba(255,255,255,0.04); }
.bg-point-selected { outline:2px solid var(--gold); }
.bg-point-hint::after {
  content:''; position:absolute; bottom:6px; width:10px; height:10px; border-radius:50%;
  background:rgba(201,168,76,0.7);
}
.bg-stack { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bg-checker { width:22px; height:22px; border-radius:50%; box-shadow:0 2px 3px rgba(0,0,0,0.4); }
.bg-checker-p { background:radial-gradient(circle at 32% 30%, #fff, #ccc 78%); }
.bg-checker-a { background:radial-gradient(circle at 32% 30%, #555, #050505 78%); }
.bg-checker-count { font-size:10px; color:var(--gold); font-weight:700; }
.bg-bar-row { display:flex; justify-content:center; align-items:center; gap:14px; padding:8px 0; }
.bg-bar-pill {
  font-size:11px; padding:5px 12px; border-radius:3px; border:1px solid var(--border);
  cursor:pointer; color:var(--cream);
}
.bg-off-pill { font-size:11px; color:rgba(245,240,232,0.6); margin-right:8px; }
.stone {
  position:relative;
  width:84%; height:84%; border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
  pointer-events:none;
  animation:stonePop 0.18s ease;
}
.stone.black,
.stone.go-black { background:radial-gradient(circle at 32% 30%, #555, #050505 78%); }
.stone.white,
.stone.go-white { background:radial-gradient(circle at 32% 30%, #fff, #c9c9c9 78%); }
.stone.go-last::after,
.stone.last-move::after {
  content:''; position:absolute; inset:32%;
  border-radius:50%; border:1.5px solid rgba(255,0,0,0.7);
}
@keyframes stonePop { from{ transform:scale(0.3); opacity:0; } to{ transform:scale(1); opacity:1; } }

.grid-diag-line { height:1px; transform-origin:0 0; }

/* ── 장기 기물 ── */
.stone.jg-piece {
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:clamp(11px,3.4vw,17px);
  border:1.5px solid rgba(0,0,0,0.35);
}
.stone.jg-red { background:radial-gradient(circle at 32% 30%, #fdebe0, #d6452f 85%); color:#5a0e00; }
.stone.jg-blue { background:radial-gradient(circle at 32% 30%, #e3f1ff, #2461b0 85%); color:#04204a; }
.intersection.jg-selected::before {
  content:''; position:absolute; inset:2%; border-radius:50%;
  border:2px solid var(--gold); pointer-events:none;
}
.intersection.jg-legal::after {
  content:''; position:absolute; width:26%; height:26%; border-radius:50%;
  background:rgba(212,175,55,0.55); pointer-events:none;
}
.intersection.jg-legal-capture::after {
  content:''; position:absolute; inset:6%; border-radius:50%;
  border:2.5px solid rgba(212,55,55,0.75); background:transparent; pointer-events:none;
}

/* ── 쇼기(Shogi) ── */
.shg-cell.shg-light { background:#eed9b5; }
.shg-cell.shg-dark { background:#dcc596; }
.shg-cell { border:1px solid rgba(0,0,0,0.25) !important; }
.shg-piece {
  font-size:min(7vw, 28px); line-height:1; user-select:none; font-weight:700;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.shg-piece-player { color:#c0392b; }
.shg-piece-ai { color:#1f4fb0; }
.shg-piece.shg-promoted { color:#b8860b; }
.shg-cell.shg-selected { box-shadow:inset 0 0 0 3px var(--gold); }
.shg-cell.shg-target::after {
  content:''; position:absolute; width:28%; height:28%; border-radius:50%;
  background:rgba(201,168,76,0.55);
}
.shg-cell.shg-target-capture::after {
  content:''; position:absolute; inset:8%; border-radius:50%; width:auto; height:auto;
  border:2.5px solid rgba(212,55,55,0.75); background:transparent;
}
.shg-hand-tray { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:8px 4px; min-height:40px; }
.shg-hand-piece {
  display:flex; align-items:center; justify-content:center; gap:2px;
  width:38px; height:38px; border-radius:6px; cursor:pointer;
  background:rgba(245,240,232,0.08); border:1.5px solid rgba(245,240,232,0.2);
  font-size:16px; font-weight:700; position:relative;
}
.shg-hand-piece.shg-hand-selected { box-shadow:0 0 0 2px var(--gold); background:rgba(212,175,55,0.18); }
.shg-hand-piece .shg-hand-count {
  position:absolute; bottom:-4px; right:-4px; background:var(--gold); color:#1a1408;
  font-size:10px; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
}

/* ── Generic action buttons inside modal ── */
.game-actions {
  display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap;
}
.game-btn {
  padding:9px 22px; font-size:12px; letter-spacing:0.1em;
  border-radius:2px; cursor:pointer; font-family:inherit;
  text-transform:uppercase; transition:all 0.25s;
}
.game-btn.primary { background:var(--gold); color:var(--navy); border:none; font-weight:700; }
.game-btn.primary:hover { background:var(--gold-light); }
.game-btn.ghost { background:transparent; border:1px solid var(--border); color:var(--cream); }
.game-btn.ghost:hover { border-color:var(--gold); color:var(--gold); }

/* ── Toast (준비중 안내 등) ── */
.icoc-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#102745; border:1px solid var(--gold); color:var(--cream);
  padding:12px 22px; border-radius:6px; font-size:13px;
  z-index:4000; opacity:0; pointer-events:none;
  transition:all 0.3s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.icoc-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Rummikub ── */
.rk-table { display:flex; flex-wrap:wrap; gap:10px; min-height:50px; }
.rk-group {
  display:flex; gap:3px; padding:5px; border-radius:6px;
  background:rgba(0,0,0,0.15); border:1px solid var(--border);
}
.rk-group-targetable { border-color:var(--gold); cursor:pointer; background:rgba(201,168,76,0.12); }
.rk-table-empty { font-size:12px; color:rgba(245,240,232,0.4); padding:10px; }
.rk-tile {
  width:34px; height:46px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; background:#f5f0e8;
  box-shadow:0 2px 4px rgba(0,0,0,0.35);
  flex-shrink:0; animation:stonePop 0.18s ease;
}
.rk-tile-red { color:#c0392b; }
.rk-tile-blue { color:#2563eb; }
.rk-tile-black { color:#1a1a1a; }
.rk-tile-yellow { color:#c9921a; }
.rk-tile-joker { color:var(--gold); background:#2a2a2a; }
.rk-tile.om-pickable { cursor:pointer; transition:transform 0.15s; }
.rk-tile.om-pickable:hover { transform:translateY(-6px); }
.rk-tile-selected { outline:3px solid var(--gold); transform:translateY(-6px); }

/* ── Billiards (당구) ── */
.bl-canvas-wrap {
  width:100%; min-height:280px; border-radius:8px; overflow:hidden;
  background:#0d0d09; margin-bottom:12px; touch-action:none;
  display:flex; align-items:center; justify-content:center;
}
.bl-canvas-wrap canvas { display:block; touch-action:none; max-width:100%; }
.bl-loading { color:rgba(245,240,232,0.5); font-size:13px; }
.bl-turn-info { font-size:13px; color:var(--gold); text-align:center; margin-bottom:10px; min-height:18px; }

@media(max-width:480px){
  .game-modal { padding:10px; }
  .game-modal-box { padding:14px; }
  .game-modal-title { font-size:16px; gap:6px; }
  .game-modal-title .icon { font-size:20px; }
  .game-close-btn { width:26px; height:26px; font-size:13px; }
  .game-turn-pill { font-size:11px; padding:5px 11px; }
  .game-btn { padding:8px 16px; font-size:11px; }
}
@media(max-width:360px){
  .game-modal { padding:6px; }
  .game-modal-box { padding:10px; }
}

/* ── Mahjong Solitaire ── */
.mj-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 8px; gap:10px; flex-wrap:wrap;
}
.mj-status-text { font-size:12px; color:rgba(245,240,232,0.65); }
.mj-hint-btn { padding:4px 12px !important; font-size:11px !important; }
.mj-board-wrap {
  overflow:auto;
  background:linear-gradient(135deg, #1a3d1f 0%, #0d2a10 100%);
  border-radius:6px; padding:4px;
  min-height:240px;
}
.mj-board { position:relative; }

/* 타일 기본 스타일 */
.mj-tile {
  position:absolute;
  width:40px; height:52px;
  background:#f5f0dc;
  border:1.5px solid #b09060;
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  user-select:none; box-sizing:border-box;
}
/* 3D 측면 효과 */
.mj-tile::before {
  content:''; position:absolute;
  left:-5px; top:3px;
  width:5px; height:100%;
  background:linear-gradient(to right, #5a3010, #8a5828);
  border-radius:2px 0 0 2px;
}
.mj-tile::after {
  content:''; position:absolute;
  left:0; bottom:-5px;
  width:100%; height:5px;
  background:linear-gradient(to bottom, #6a4020, #4a2808);
  border-radius:0 0 3px 3px;
}
.mj-tile.mj-free {
  cursor:pointer;
  background:#fffef2;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.mj-tile.mj-free:hover {
  background:#fff9d0;
  border-color:#c8a020;
  transform:translateY(-2px);
  z-index:99999 !important;
}
.mj-tile.mj-blocked {
  background:#d0c4a0;
  border-color:#9a8050;
  cursor:default;
  filter:brightness(0.82) saturate(0.7);
}
.mj-tile.mj-selected {
  background:#fff3a0;
  border-color:#d4af37;
  box-shadow:0 0 0 2px rgba(212,175,55,0.7);
  transform:translateY(-4px);
  z-index:99999 !important;
}
.mj-tile.mj-hint {
  animation:mj-hint 0.4s ease alternate 4;
}
@keyframes mj-hint {
  from { border-color:#5be; box-shadow:0 0 6px rgba(80,190,230,0.7); }
  to   { border-color:#09d; box-shadow:0 0 14px rgba(0,150,220,0.9); }
}
.mj-tile.mj-shake { animation:mj-shake 0.28s ease; }
@keyframes mj-shake {
  0%,100%{ transform:translateX(0) }
  25%    { transform:translateX(-4px) }
  75%    { transform:translateX(4px) }
}

/* ── Texas Hold'em ── */
.hd-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 8px; font-size:12px; color:rgba(245,240,232,0.6);
}
.hd-hand-info { font-weight:600; color:var(--gold); }
.hd-table {
  background:radial-gradient(ellipse at center, #2d6a3a 0%, #1a4022 60%, #0d2414 100%);
  border:2px solid rgba(201,168,76,0.3);
  border-radius:12px; padding:12px 8px;
  display:flex; flex-direction:column; gap:10px;
  min-height:260px;
}
.hd-ai-row, .hd-pl-row, .hd-comm-row {
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.hd-tag {
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  color:rgba(245,240,232,0.45); min-width:36px; text-align:center;
}
.hd-cards { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }
.hd-chip-badge {
  font-size:13px; font-weight:700; color:var(--gold);
  background:rgba(201,168,76,0.12);
  border:1px solid rgba(201,168,76,0.3);
  padding:3px 10px; border-radius:14px;
  min-width:72px; text-align:center;
}
.hd-pot-badge {
  font-size:13px; font-weight:700; color:#c0e8c0;
  background:rgba(100,180,100,0.12);
  border:1px solid rgba(100,180,100,0.3);
  padding:3px 10px; border-radius:14px;
}

/* ── 카드 ── */
.hd-card {
  width:48px; height:68px;
  background:#fffef8;
  border:1.5px solid #bbb;
  border-radius:5px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  font-weight:700;
}
.hd-cr { font-size:15px; line-height:1; }
.hd-cs { font-size:18px; line-height:1; }
.hd-card.hd-red { color:#cc1122; }
.hd-card.hd-back {
  background:linear-gradient(135deg, #1a3580 20%, #2a4db0 80%);
  border-color:rgba(201,168,76,0.5);
}
.hd-card.hd-empty {
  background:rgba(255,255,255,0.06);
  border:1.5px dashed rgba(255,255,255,0.2);
  box-shadow:none;
}

/* ── 상태/액션 ── */
.hd-status-msg {
  font-family:'Playfair Display',serif;
  font-size:14px; color:var(--gold);
  text-align:center; min-height:22px; padding:6px 0;
}
.hd-actions {
  display:flex; gap:8px; justify-content:center;
  flex-wrap:wrap; padding:4px 0;
}
.hd-fold  { border-color:rgba(200,80,80,0.6) !important; color:rgba(200,80,80,0.9) !important; }
.hd-raise { background:rgba(201,168,76,0.15); border-color:var(--gold); color:var(--gold); }
.hd-wait  { font-size:12px; color:rgba(245,240,232,0.45); padding:8px; }
.hd-x     { margin-top:4px; width:100%; }

/* ── Screen Golf ── */
.sg-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 6px; gap:8px; flex-wrap:wrap;
}
.sg-hole-lbl { font-weight:700; color:var(--gold); font-size:13px; }
.sg-wind-lbl { font-size:12px; color:rgba(245,240,232,0.6); }
.sg-cvs-wrap {
  background:#0a1a08;
  border-radius:6px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  line-height:0;
}
.sg-cvs-wrap canvas { display:block; width:100%; }
.sg-msg-line {
  font-family:'Playfair Display',serif;
  text-align:center; min-height:20px;
  font-size:14px; color:var(--gold); padding:6px 0 2px;
}
.sg-dist-line { font-size:11px; color:rgba(245,240,232,0.5); text-align:center; margin-bottom:8px; }

/* Controls */
.sg-ctrl-area { padding:4px 0 6px; }
.sg-clubs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.sg-cb {
  flex:1; min-width:60px;
  padding:5px 8px; font-size:11px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:4px; color:rgba(245,240,232,0.6);
  cursor:pointer; transition:all 0.2s;
}
.sg-cb:hover { border-color:var(--gold); color:var(--cream); }
.sg-cb.sg-cb-on {
  background:rgba(201,168,76,0.15);
  border-color:var(--gold); color:var(--gold); font-weight:700;
}
.sg-aim-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.sg-ab {
  width:32px; height:32px; font-size:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border); border-radius:4px;
  color:var(--cream); cursor:pointer;
}
.sg-ab:hover { background:rgba(201,168,76,0.12); border-color:var(--gold); }
.sg-angv { font-size:13px; font-weight:700; color:var(--gold); min-width:36px; text-align:center; }
.sg-swing { padding:7px 20px !important; font-size:13px !important; }

/* Power meter */
.sg-pm-area { display:flex; align-items:flex-end; gap:16px; }
.sg-pm-bar {
  width:28px; height:110px; position:relative;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border); border-radius:4px;
  overflow:hidden; flex-shrink:0;
  display:flex; align-items:flex-end;
}
.sg-pm-fill {
  width:100%; height:0%;
  transition:none;
  border-radius:2px;
}
.sg-pm-lbl {
  position:absolute; bottom:3px; width:100%;
  text-align:center; font-size:8px;
  color:rgba(255,255,255,0.5); letter-spacing:0.05em;
}
.sg-flying { font-size:13px; color:rgba(245,240,232,0.5); padding:12px 0; text-align:center; }

/* Scorecard */
.sg-card {
  width:100%; border-collapse:collapse;
  margin-top:10px; font-size:12px;
}
.sg-card th, .sg-card td {
  padding:5px 8px; text-align:center;
  border-bottom:1px solid var(--border);
  color:rgba(245,240,232,0.65);
}
.sg-card th { color:var(--gold); font-size:10px; letter-spacing:0.1em; }
.sg-card td:first-child { text-align:left; font-size:10px; letter-spacing:0.1em; color:rgba(245,240,232,0.4); }
.sg-under { color:#4ddf4d; font-weight:700; }
.sg-even  { color:var(--gold); }
.sg-over  { color:#df6060; }

/* ── Bridge ── */
.br-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 8px; gap:8px; flex-wrap:wrap;
  font-size:13px; font-weight:600; color:var(--gold);
}
.br-rule-hint { font-size:10px; color:rgba(245,240,232,0.4); font-weight:400; }
.br-content { padding:4px 0; }
.br-info-box {
  font-size:12px; color:rgba(245,240,232,0.7);
  background:rgba(201,168,76,0.07);
  border:1px solid rgba(201,168,76,0.2);
  padding:8px 12px; border-radius:4px; margin-bottom:10px;
}
.br-declare-hands { margin-bottom:10px; }
.br-handrow-label, .br-label {
  font-size:10px; letter-spacing:0.12em; color:rgba(245,240,232,0.4);
  margin-bottom:4px; margin-top:6px; text-transform:uppercase;
}
.br-handrow {
  display:flex; flex-wrap:nowrap; overflow-x:auto;
  padding-bottom:4px; gap:1px;
  scrollbar-width:thin;
}
.br-trump-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;
}
.br-trump-lbl { font-size:11px; color:rgba(245,240,232,0.5); }
.br-tb {
  padding:5px 12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--cream); border-radius:3px;
  cursor:pointer; font-size:14px; transition:all 0.2s;
}
.br-tb:hover { background:rgba(201,168,76,0.15); border-color:var(--gold); color:var(--gold); }

/* Score row */
.br-score {
  display:flex; gap:10px; flex-wrap:wrap;
  font-size:11px; color:rgba(245,240,232,0.55);
  margin-bottom:6px; padding:5px 8px;
  background:rgba(255,255,255,0.03); border-radius:3px;
}
.br-score b { color:var(--cream); }

/* Middle area (trick + side hands) */
.br-middle {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:6px 0;
}
.br-side { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:50px; }
.br-opp-hand {
  display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center;
}
.br-opp-hand .br-card { width:14px; height:22px; min-width:14px; flex-shrink:0; border-radius:2px; }

/* Trick grid (3×3) */
.br-trick-grid {
  display:grid; grid-template-columns:42px 50px 42px;
  grid-template-rows:48px 52px 48px;
  gap:2px; background:rgba(0,0,0,0.2);
  border-radius:6px; padding:4px;
  flex-shrink:0;
}
.br-trick-slot {
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:rgba(255,255,255,0.2); border-radius:3px;
}
.br-tc-center {
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:rgba(201,168,76,0.6);
}
.br-tc {
  width:40px !important; height:54px !important;
  font-size:11px !important;
}

/* Bridge cards (smaller than holdem) */
.br-card {
  width:32px; height:46px; flex-shrink:0;
  background:#fffef8;
  border:1px solid #bbb; border-radius:3px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1px;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
  font-weight:700; cursor:default;
  transition:transform 0.1s, box-shadow 0.1s;
}
.br-cr { font-size:11px; line-height:1; }
.br-cs { font-size:13px; line-height:1; }
.br-card.br-red { color:#cc1122; }
.br-card.br-back {
  background:linear-gradient(135deg,#1a3580 20%,#2a4db0 80%);
  border-color:rgba(201,168,76,0.4);
}
.br-card.br-pick {
  cursor:pointer;
  border-color:#c9a84c;
}
.br-card.br-pick:hover {
  transform:translateY(-5px);
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
  z-index:10; position:relative;
}

.br-msg-line {
  text-align:center; font-size:13px; color:var(--gold);
  font-family:'Playfair Display',serif;
  min-height:20px; padding:6px 0 4px;
}
.br-actions { display:flex; gap:8px; justify-content:center; padding:4px 0; }

/* ── Gin Rummy ── */
.rm-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 8px; font-size:13px; font-weight:600; color:var(--gold);
}
.rm-sub { font-size:10px; color:rgba(245,240,232,0.4); font-weight:400; }
.rm-content { padding:2px 0; }
.rm-piles {
  display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.rm-pile-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; }
.rm-pile { cursor:pointer; border-radius:4px; transition:box-shadow 0.15s; }
.rm-pile.rm-pile-on { box-shadow:0 0 0 2px var(--gold); }
.rm-pile-lbl { font-size:9px; color:rgba(245,240,232,0.38); letter-spacing:0.06em; }
.rm-pile-card { width:44px !important; height:60px !important; }
.rm-spacer { flex:1; }
.rm-ai-row {
  display:flex; align-items:center; gap:3px; flex-wrap:wrap;
  max-width:220px;
}
.rm-ai-cnt { font-size:10px; color:rgba(245,240,232,0.35); }
.rm-ai-reveal {
  display:flex; flex-wrap:wrap; gap:3px;
  padding:6px 8px; background:rgba(255,255,255,0.03);
  border-radius:4px; width:100%;
}
.rm-player-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:5px;
}
.rm-hand-lbl { font-size:10px; color:rgba(245,240,232,0.4); letter-spacing:0.1em; }
.rm-dw { font-size:12px; font-weight:700; color:rgba(245,240,232,0.45); }
.rm-dw.rm-dw-low { color:#5dcc5d; }
.rm-hand { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:3px; padding-bottom:4px; }
.rm-sel-bar {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px 8px; margin-top:6px;
  background:rgba(201,168,76,0.08); border-radius:4px;
  font-size:11px; color:rgba(245,240,232,0.6);
}
.rm-act-btn { padding:4px 12px !important; font-size:11px !important; }
.rm-knock { border-color:rgba(100,180,255,0.5) !important; color:rgba(100,180,255,0.9) !important; }
.rm-actions { display:flex; gap:8px; justify-content:center; padding:8px 0 4px; }

/* Cards */
.rm-card {
  width:38px; height:52px; flex-shrink:0;
  background:#fffef8;
  border:1.5px solid #bbb; border-radius:4px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1px; box-sizing:border-box;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
  font-weight:700; user-select:none;
  transition:transform 0.12s, box-shadow 0.12s;
  cursor:default;
}
.rm-r { font-size:12px; line-height:1; }
.rm-s { font-size:14px; line-height:1; }
.rm-card.rm-red { color:#cc1122; }
.rm-card.rm-back {
  background:linear-gradient(135deg,#163278 25%,#2248a8 75%);
  border-color:rgba(201,168,76,0.3);
}
.rm-card.rm-sm { width:16px !important; height:22px !important; border-radius:2px; }
.rm-card.rm-empty {
  background:transparent; border:1.5px dashed rgba(255,255,255,0.12); box-shadow:none;
}
.rm-card.rm-pick { cursor:pointer; }
.rm-card.rm-pick:hover { transform:translateY(-4px); box-shadow:0 4px 10px rgba(0,0,0,0.3); }
.rm-card.rm-sel {
  border-color:var(--gold); border-width:2px;
  transform:translateY(-8px);
  box-shadow:0 0 0 2px rgba(201,168,76,0.35), 0 5px 12px rgba(0,0,0,0.3);
}
.rm-card.rm-melded { background:#efffef; border-color:#4a9e4a; }
.rm-card.rm-melded.rm-red { color:#cc1122; }
.rm-msg-line {
  text-align:center; font-size:12px; color:rgba(245,240,232,0.6);
  min-height:18px; padding:4px 0 2px;
}

/* ── Hearts ── */
.ht-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 6px; font-size:13px; font-weight:600; color:#e05070;
}
.ht-sub { font-size:9.5px; color:rgba(245,240,232,0.35); font-weight:400; }
.ht-content { padding:2px 0; }

.ht-score-bar {
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
  padding:5px 8px; background:rgba(255,255,255,0.04); border-radius:4px;
}
.ht-score-item { display:flex; flex-direction:column; align-items:center; gap:1px; flex:1; }
.ht-score-me .ht-score-name { color:var(--gold); }
.ht-score-name { font-size:9px; color:rgba(245,240,232,0.4); letter-spacing:0.05em; }
.ht-score-val  { font-size:14px; font-weight:700; color:var(--cream); }
.ht-round-lbl  { font-size:10px; color:rgba(245,240,232,0.3); margin-left:auto; }

.ht-table { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.ht-opp-row { display:flex; align-items:center; gap:6px; justify-content:center; }
.ht-north   { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ht-opp { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:48px; }
.ht-opp-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:1px; max-width:60px; }
.ht-opp-lbl { font-size:9px; color:rgba(245,240,232,0.35); }

/* Trick grid */
.ht-trick-grid {
  display:grid; grid-template-columns:48px 56px 48px;
  grid-template-rows:50px 56px 50px;
  gap:2px; background:rgba(0,0,0,0.2);
  border-radius:6px; padding:4px; flex-shrink:0;
}
.ht-trick-slot {
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:rgba(255,255,255,0.18); border-radius:3px;
}
.ht-tc-center {
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
  font-size:8px; color:rgba(245,240,232,0.4); line-height:1.4;
}
.ht-tc {
  width:40px !important; height:52px !important; font-size:11px !important;
}

.ht-player-bar {
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; color:rgba(245,240,232,0.4); margin-bottom:4px;
}
.ht-your-turn { color:var(--gold); font-weight:600; }
.ht-hand { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:3px; padding-bottom:4px; }
.ht-sel-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:5px 8px; margin-top:5px;
  background:rgba(201,168,76,0.08); border-radius:4px;
  font-size:11px; color:rgba(245,240,232,0.6);
}
.ht-play-btn { padding:4px 14px !important; font-size:11px !important; }
.ht-actions { display:flex; gap:8px; justify-content:center; padding:8px 0 2px; }

/* Cards */
.ht-card {
  width:36px; height:50px; flex-shrink:0;
  background:#fffef8;
  border:1.5px solid #bbb; border-radius:4px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1px; box-sizing:border-box;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
  font-weight:700; user-select:none; cursor:default;
  transition:transform 0.1s, box-shadow 0.1s;
}
.ht-r { font-size:11px; line-height:1; }
.ht-s { font-size:13px; line-height:1; }
.ht-card.ht-red { color:#cc1122; }
.ht-card.ht-back {
  background:linear-gradient(135deg,#8c1a1a 25%,#cc2222 75%);
  border-color:rgba(255,150,150,0.3);
}
.ht-card.ht-sm { width:14px !important; height:20px !important; border-radius:2px; }
.ht-card.ht-pick { cursor:pointer; }
.ht-card.ht-pick:hover { transform:translateY(-5px); box-shadow:0 5px 12px rgba(0,0,0,0.3); }
.ht-card.ht-sel {
  border-color:var(--gold); border-width:2px;
  transform:translateY(-8px);
  box-shadow:0 0 0 2px rgba(201,168,76,0.4), 0 6px 14px rgba(0,0,0,0.3);
}
.ht-card.ht-penalty { border-color:#e04040; background:#fff5f5; }
.ht-card.ht-penalty.ht-red { color:#aa0000; }
.ht-msg-line {
  text-align:center; font-size:12px; color:rgba(245,240,232,0.6);
  min-height:18px; padding:4px 0 2px;
}

/* ── Sport Category Dividers ── */
.sport-cat-divider {
  grid-column: 1 / -1;
  padding: 28px 24px 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.sport-cat-label {
  font-family: 'Playfair Display', serif;
  font-size: 13px; letter-spacing: 0.2em;
  color: rgba(201,168,76,0.7);
  text-transform: uppercase;
}

/* ── Auth UI ── */
.nav-auth-area { display:flex; align-items:center; margin-left:10px; flex-shrink:0; }
.nav-login-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px; font-size:11px; font-weight:600;
  background:rgba(201,168,76,0.12);
  border:1px solid rgba(201,168,76,0.4);
  color:var(--gold); border-radius:20px; cursor:pointer;
  transition:all 0.2s; white-space:nowrap;
}
.nav-login-btn:hover { background:rgba(201,168,76,0.22); border-color:var(--gold); }
.nav-user-area {
  display:flex; align-items:center; gap:5px;
  padding:4px 10px; font-size:11px;
  background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.3);
  border-radius:20px; cursor:pointer;
  transition:all 0.2s;
}
.nav-user-area:hover { background:rgba(201,168,76,0.2); }
.nav-nickname { color:var(--gold); font-weight:600; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.nav-arrow { color:rgba(201,168,76,0.6); font-size:10px; }

/* ── 프로필 설정 모달 ── */
#profile-setup-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
}
.ps-modal {
  background:#0f1e38; border:1px solid rgba(201,168,76,0.3);
  border-radius:12px; padding:28px; max-width:520px; width:100%;
  max-height:90vh; overflow-y:auto;
}
.ps-title { font-family:'Playfair Display',serif; font-size:22px; color:var(--gold); margin-bottom:6px; }
.ps-sub { font-size:12px; color:rgba(245,240,232,0.45); margin-bottom:20px; }
.ps-label { font-size:11px; letter-spacing:0.1em; color:rgba(201,168,76,0.7); display:block; margin:14px 0 5px; }
.ps-note { color:rgba(245,240,232,0.35); font-size:10px; }
.ps-input {
  width:100%; padding:9px 12px; font-size:13px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:4px; color:var(--cream); outline:none;
  transition:border-color 0.2s;
}
.ps-input:focus { border-color:rgba(201,168,76,0.5); }
.ps-select { appearance:none; cursor:pointer; }
.ps-input-row { display:flex; gap:8px; }
.ps-input-row .ps-input { flex:1; }
.ps-check-btn {
  padding:0 14px; font-size:11px; white-space:nowrap;
  background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.3);
  color:var(--gold); border-radius:4px; cursor:pointer;
}
.ps-msg { font-size:11px; margin-top:4px; }
.ps-ok  { color:#5dc85d; }
.ps-err { color:#e05050; }
.ps-gen-row { display:flex; flex-wrap:wrap; gap:6px; }
.ps-gen-btn {
  padding:5px 14px; font-size:11px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:20px; color:rgba(245,240,232,0.6); cursor:pointer;
  transition:all 0.2s;
}
.ps-gen-btn.active { background:rgba(201,168,76,0.15); border-color:var(--gold); color:var(--gold); }
.ps-sport-grid { display:flex; flex-wrap:wrap; gap:5px; }
.ps-sport-btn {
  padding:4px 10px; font-size:10px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:14px; color:rgba(245,240,232,0.55); cursor:pointer;
  transition:all 0.2s;
}
.ps-sport-btn.active { background:rgba(201,168,76,0.15); border-color:var(--gold); color:var(--gold); }
.ps-submit-btn {
  margin-top:22px; width:100%; padding:12px; font-size:14px; font-weight:700;
  background:var(--gold); color:#0a1628; border:none; border-radius:6px; cursor:pointer;
  transition:opacity 0.2s;
}
.ps-submit-btn:hover { opacity:0.88; }

/* ── 마이페이지 모달 ── */
#mypage-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.75);
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:60px 16px 16px;
}
.mp-modal {
  background:#0f1e38; border:1px solid rgba(201,168,76,0.3);
  border-radius:12px; padding:22px; width:320px;
  max-height:85vh; overflow-y:auto; position:relative;
}
.mp-close {
  position:absolute; top:12px; right:14px;
  background:none; border:none; color:rgba(245,240,232,0.4);
  font-size:16px; cursor:pointer;
}
.mp-header { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.mp-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(201,168,76,0.4); }
.mp-nickname { font-size:16px; font-weight:700; color:var(--cream); }
.mp-meta { font-size:11px; color:rgba(245,240,232,0.5); margin-top:2px; }
.mp-gen  { font-size:11px; color:rgba(201,168,76,0.7); margin-top:2px; }
.mp-points-box {
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.2);
  border-radius:8px; padding:10px 14px; margin-bottom:16px;
}
.mp-pts-label { font-size:11px; color:rgba(245,240,232,0.5); }
.mp-pts-val   { font-size:18px; font-weight:700; color:var(--gold); }
.mp-section-title { font-size:10px; letter-spacing:0.15em; color:rgba(245,240,232,0.35); margin-bottom:8px; }
.mp-records { display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.mp-record-row { display:flex; align-items:center; gap:8px; font-size:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.mp-rec-sport { flex:1; color:var(--cream); }
.mp-rec-stat  { color:rgba(245,240,232,0.5); font-size:11px; }
.mp-rec-rate  { color:var(--gold); font-weight:700; min-width:35px; text-align:right; }
.mp-actions { display:flex; justify-content:center; }

/* ── Hero Auth Area ── */
.hero-auth-area {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-auth-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
.hero-google-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  background: #fff; color: #1a1a1a;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: all 0.2s;
  white-space: nowrap;
}
.hero-google-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.hero-auth-note {
  font-size: 10px; color: rgba(245,240,232,0.35);
  text-align: center;
}
.hero-terms-link { color: rgba(201,168,76,0.5); text-decoration: none; }
.hero-terms-link:hover { color: var(--gold); }
.hero-social-below {
  display: flex; gap: 8px; margin-top: 8px; justify-content: center;
}
.hero-social-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
  border: none;
}
.hero-yt { background: rgba(255,0,0,0.9); color: #fff; }
.hero-yt:hover { background: #ff0000; transform: translateY(-1px); }
.hero-fb { background: rgba(24,119,242,0.9); color: #fff; }
.hero-fb:hover { background: #1877f2; transform: translateY(-1px); }
/* 소셜 아이콘 전용 버튼 (로그인 옆) */
.hero-auth-row .hero-social-btn {
  padding: 10px 12px; border-radius: 8px;
}

/* 로그인 후 유저 카드 */
.hero-user-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,18,35,0.75);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 40px; padding: 8px 16px 8px 8px;
  backdrop-filter: blur(16px);
  max-width: 340px; width: 100%;
}
.hero-user-info { flex: 1; min-width: 0; }
.hero-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--gold); object-fit: cover;
}
.hero-user-name { font-size: 16px; font-weight: 700; color: var(--cream); }
.hero-user-meta { font-size: 11px; color: rgba(201,168,76,0.7); margin-top: 2px; }
.hero-mypage-btn {
  margin-left: auto; padding: 7px 16px;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold); border-radius: 20px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.hero-mypage-btn:hover { background: rgba(201,168,76,0.25); }

@media(max-width:640px) {
  .hero-google-btn { min-width: 220px; font-size: 14px; padding: 12px 24px; }
  .hero-user-card { flex-wrap: wrap; }
  .hero-mypage-btn { margin-left: 0; }
}

/* ── Hero Video Slides ── */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.75;
}

/* ── Hero Topbar Area (네비바 바로 아래) ── */
.hero-topbar-area {
  position: absolute;
  top: 58px; left: 0; right: 0;
  display: flex; justify-content: center;
  padding: 8px 16px;
  z-index: 10;
}
.hero-login-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
.hero-user-card-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,18,35,0.72);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 40px;
  padding: 6px 14px 6px 6px;
  backdrop-filter: blur(16px);
  flex-wrap: wrap; justify-content: center;
}
/* 66개 종목 강조 */
.hero-sports-count {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.05em;
}

/* 기존 hero-auth-area/user-area absolute 제거 */
.hero-auth-area { position: static !important; }
.hero-user-area  { position: static !important; }

/* ── Hero Profile Bar (로고 위, 슬림) ── */
.hero-profile-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 16px;
  position: relative; z-index: 10;
}
.hero-google-slim {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 24px;
  background: rgba(255,255,255,0.95); color: #222;
  border: none; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  transition: all 0.2s; white-space: nowrap;
}
.hero-google-slim:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.hero-user-slim {
  background: rgba(10,18,35,0.7);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 32px; padding: 5px 14px 5px 5px;
  backdrop-filter: blur(14px);
}
.hero-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--gold); object-fit: cover; flex-shrink: 0;
}
.hero-nick-sm  { font-size: 13px; font-weight: 700; color: var(--cream); }
.hero-meta-sm  { font-size: 10px; color: rgba(201,168,76,0.7); }
.hero-mypage-slim {
  padding: 4px 12px; border-radius: 14px;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold); font-size: 11px; font-weight:600;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.hero-mypage-slim:hover { background: rgba(201,168,76,0.28); }

/* ── Hero SNS Bottom (항상 표시, 하단 고정) ── */
.hero-sns-bottom {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 10px;
  z-index: 10;
}

/* ── ICOC Map Section ── */
.icoc-map-container {
  width:100%; height:420px;
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(201,168,76,0.2);
  margin-top:20px;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
  position:relative;
}
@media(min-width:640px){ .icoc-map-container { height:520px; } }
@media(min-width:1024px){ .icoc-map-container { height:620px; } }
@media(min-width:1440px){ .icoc-map-container { height:700px; } }
@media(max-width:480px){ .icoc-map-container { height:360px; } }

.map-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; margin-top: 20px;
}
.map-filter-btn {
  padding: 6px 14px; font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 20px; color: rgba(245,240,232,0.6);
  cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.map-filter-btn:hover { border-color: var(--gold); color: var(--cream); }
.map-filter-btn.active {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold); color: var(--gold); font-weight: 700;
}
.map-count {
  margin-left: auto; font-size: 11px;
  color: rgba(245,240,232,0.4);
}
.map-note {
  font-size: 12px; color: rgba(245,240,232,0.35);
  margin-top: 10px; text-align: center;
}
.map-register-link { color: var(--gold); text-decoration: none; }
.map-register-link:hover { text-decoration: underline; }

/* 팝업 스타일 */
.map-popup { padding: 4px; min-width: 160px; }
.map-popup-type { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.map-popup-name { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 4px; }
.map-popup-addr { font-size: 11px; color: #555; margin-bottom: 2px; }
.map-popup-city { font-size: 11px; color: #888; }

/* MapLibre 기본 팝업 오버라이드 */
.maplibregl-popup-content { padding: 12px 14px; border-radius: 8px; }

/* ── News Ticker ── */
.news-ticker-wrap {
  display: flex; align-items: center;
  background: rgba(5,12,28,0.95);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  border-top: 1px solid rgba(201,168,76,0.1);
  height: 38px; overflow: hidden;
  position: sticky; top: 46px; z-index: 90;
}
.ticker-label {
  flex-shrink: 0;
  padding: 0 14px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  border-right: 1px solid rgba(201,168,76,0.2);
  white-space: nowrap; height: 100%;
  display: flex; align-items: center;
  background: rgba(201,168,76,0.06);
}
.ticker-viewport {
  flex: 1; overflow: hidden; height: 100%;
  display: flex; align-items: center;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
.ticker-track {
  display: flex; align-items: center;
  white-space: nowrap;
  will-change: transform;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 28px;
  font-size: 12px; color: rgba(245,240,232,0.75);
  text-decoration: none; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s;
}
.ticker-item:hover { color: var(--gold); }
.ticker-bullet { color: var(--gold); font-size: 8px; flex-shrink: 0; }
.ticker-text { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.ticker-reload {
  flex-shrink: 0; padding: 0 12px;
  background: none; border: none;
  color: rgba(245,240,232,0.3); font-size: 14px;
  cursor: pointer; height: 100%;
  border-left: 1px solid rgba(201,168,76,0.15);
  transition: color 0.2s;
}
.ticker-reload:hover { color: var(--gold); }

@media(max-width:640px) {
  .ticker-label { padding: 0 10px; font-size: 9px; }
  .ticker-item  { padding: 0 18px; font-size: 11px; }
  .ticker-text  { max-width: 260px; }
}

/* ── Hero Bottom Area (구글로그인 + SNS 하단 고정) ── */
.hero-bottom-area {
  position: absolute;
  bottom: 20px; left: 0; right: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  z-index: 10; padding: 0 16px;
}
.hero-sns-row {
  display: flex; gap: 10px; justify-content: center;
}
/* hero-sns-bottom 비활성화 */
.hero-sns-bottom { display: none !important; }

/* ── Nav Music Player ── */
.nav-music-player {
  display: flex; align-items: center; gap: 6px;
  margin-right: 6px; flex-shrink: 0;
}
.music-toggle {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 50%; cursor: pointer;
  font-size: 14px; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.2s; padding: 0;
}
.music-toggle:hover {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold);
}
.music-volume {
  -webkit-appearance: none; appearance: none;
  width: 60px; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px; outline: none; cursor: pointer;
}
.music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(201,168,76,0.5);
}
.music-volume::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%; border: none;
  background: var(--gold); cursor: pointer;
}
@media(max-width:640px) {
  .music-volume { width: 44px; }
  .music-toggle { width: 26px; height: 26px; font-size: 12px; }
}