/* AI 인디언포커 — 카지노풍(초록 펠트·달러)을 피하고 차분한 심야 테이블 톤으로
 *
 * ★레이아웃 원칙(09-18 사용자 요청)★
 *  1) 가로는 부모 폭을 꽉 쓴다(폭 고정 없음). 넓은 화면에서는 트레이를 오른쪽 기둥으로 보낸다.
 *  2) ★스테이지 높이를 고정★ — 카드가 펼쳐지거나 말풍선·베팅칩이 나타난다고 문서 높이가 변하면
 *     스크롤바가 생겼다 사라지며 화면이 출렁인다. 안쪽 요소는 전부 자리를 미리 잡아 두고
 *     넘치면 자기 안에서 스크롤한다(트레이·액션바는 가로 스크롤).
 *  3) 전체화면은 Fullscreen API, 안 되면(iOS) .ipk-fs-on 로 위치 고정 대체.
 */
#ipk-game{
  --ipk-bg:#131a26;--ipk-panel:#1b2433;--ipk-line:#2c384b;--ipk-text:#eef2f8;--ipk-muted:#93a3b8;
  --ipk-me:#4ea8ff;--ipk-ai:#ff7a7a;--ipk-gold:#f5c451;
  /* ★카드 크기는 vh 가 아니라 '스테이지에서 고정 부품을 뺀 나머지'로 역산한다★
     vh 로 잡으면 화면이 낮을 때 카드가 테이블 칸을 넘어 잘린다(실제로 잘렸다).
     고정 부품: HUD 44 + 액션 60 + 트레이 40 + 패딩·간격 16 = 160, 가운데 칸 50,
     한쪽 칸의 카드 외 요소(이름 14 + 말풍선 28 + 베팅칩 20 + 간격 12) = 74 */
  --ipk-h:min(clamp(440px, 74vh, 700px), calc(100dvh - 110px));
  --cardh:clamp(52px, calc((var(--ipk-h) - 210px) / 2 - 74px), 170px);
  --cardw:calc(var(--cardh) * 0.71);
  position:relative;width:100%;max-width:100%;margin:0 auto;color:var(--ipk-text);font-family:inherit;text-align:left}
#ipk-game *{box-sizing:border-box}
#ipk-game [hidden]{display:none !important}
#ipk-game button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#ipk-game button:focus-visible{outline:3px solid var(--ipk-gold);outline-offset:-3px}

.ipk-stage{position:relative;display:grid;grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:"hud" "table" "actions" "tray";
  height:var(--ipk-h);overflow:hidden;
  background:linear-gradient(180deg,#1a2332,#101724);border:1px solid var(--ipk-line);
  border-radius:20px;box-shadow:0 18px 40px rgba(6,12,22,.25)}

/* ── HUD ── */
.ipk-hud{grid-area:hud;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--ipk-line);background:rgba(255,255,255,.03);
  font-size:12px;color:var(--ipk-muted);height:44px;flex:0 0 auto}
.ipk-hud strong{color:var(--ipk-text);font-size:15px;font-variant-numeric:tabular-nums}
.ipk-hud-l,.ipk-hud-r{display:flex;align-items:center;gap:4px;min-width:82px}
.ipk-hud-r{justify-content:flex-end;text-align:right}
.ipk-hud-c{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.ipk-chip{background:rgba(255,255,255,.06);border-radius:999px;padding:3px 9px;font-size:12px}
.ipk-chip-me strong{color:var(--ipk-me)}
.ipk-chip-ai strong{color:var(--ipk-ai)}
.ipk-pot{font-size:12px;white-space:nowrap}
.ipk-pot strong{color:var(--ipk-gold);font-size:16px}
.ipk-pot em{font-style:normal;color:var(--ipk-gold);opacity:.75;font-size:11px;margin-left:3px}
.ipk-fs{border:1px solid var(--ipk-line);background:rgba(255,255,255,.05);color:var(--ipk-muted);
  border-radius:9px;width:28px;height:26px;font-size:13px;line-height:1;padding:0;margin-left:4px}
.ipk-fs:hover{color:var(--ipk-text)}
.ipk-shoe-lab{display:inline}

/* ── 테이블 ── */
.ipk-table{grid-area:table;position:relative;display:grid;grid-template-rows:1fr auto 1fr;
  gap:2px;padding:6px 12px;min-height:0;overflow:hidden}
.ipk-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:0}
.ipk-who{font-size:11.5px;color:var(--ipk-muted);font-weight:700;text-align:center;line-height:14px;
  height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.ipk-who small{font-weight:500;font-size:10px;opacity:.72}
.ipk-talk{display:flex;align-items:center;justify-content:center;text-align:center;
  height:28px;max-width:min(88%,320px);font-size:12.5px;color:#dbe6f5;
  background:rgba(255,255,255,.07);border-radius:12px;padding:0 10px;opacity:0;transition:opacity .2s;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ipk-talk.on{opacity:1}

.ipk-card{height:var(--cardh);width:auto;aspect-ratio:71/100;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:calc(var(--cardh) * .38);font-weight:800;
  position:relative;transition:transform .25s;flex:0 1 auto;min-height:44px;overflow:hidden}
.ipk-card span{line-height:1}
.ipk-card-ai{background:linear-gradient(160deg,#fff,#e6ecf5);color:#1a2332;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.ipk-card-me{background:repeating-linear-gradient(45deg,#2b3a54,#2b3a54 6px,#33445f 6px,#33445f 12px);
  color:#6d7f98;border:1px solid #3c4d68;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.ipk-card-me.open{background:linear-gradient(160deg,#fff,#e6ecf5);color:#1a2332}
.ipk-card.win{transform:scale(1.06);box-shadow:0 0 0 3px var(--ipk-gold),0 8px 20px rgba(0,0,0,.4)}
.ipk-card.flip{animation:ipkflip .34s ease}
@keyframes ipkflip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) scale(.96)}100%{transform:rotateY(0)}}

/* 베팅칩은 숨겨도 자리를 비우지 않는다(높이 출렁임 방지) */
.ipk-bet{font-size:12px;font-weight:800;color:var(--ipk-gold);background:rgba(245,196,81,.12);
  border:1px solid rgba(245,196,81,.35);border-radius:999px;padding:1px 10px;height:20px;
  line-height:16px;visibility:hidden;flex:0 0 auto}
.ipk-bet.on{visibility:visible}
.ipk-center{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;flex:0 0 auto}
.ipk-msg{font-size:13px;font-weight:700;color:var(--ipk-muted);text-align:center;
  max-width:min(80%,420px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipk-msg.big{color:var(--ipk-gold);font-size:15px}

.ipk-timer{position:relative;width:44px;height:44px;flex:0 0 auto}
.ipk-timer svg{width:44px;height:44px;transform:rotate(-90deg)}
.ipk-ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:4}
.ipk-ring{fill:none;stroke:var(--ipk-me);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:132;stroke-dashoffset:0;transition:stroke .3s}
.ipk-ring.warn{stroke:var(--ipk-ai)}
.ipk-timer b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-variant-numeric:tabular-nums}

/* ── 액션 ── */
.ipk-actions{grid-area:actions;display:flex;align-items:center;gap:6px;padding:8px 12px;
  border-top:1px solid var(--ipk-line);background:rgba(255,255,255,.02);
  height:60px;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;justify-content:center;
  scrollbar-width:none;-ms-overflow-style:none}
.ipk-actions::-webkit-scrollbar{display:none}
.ipk-bets{display:flex;gap:5px;flex:0 0 auto}
.ipk-btn{border:1px solid var(--ipk-line);background:var(--ipk-panel);color:var(--ipk-text);border-radius:12px;
  padding:9px 12px;font-size:14px;font-weight:800;min-width:56px;flex:0 0 auto;white-space:nowrap}
.ipk-btn:disabled{opacity:.35;cursor:default}
.ipk-call{color:#0b1420;background:linear-gradient(135deg,#7ee0c2,#46b8d8);border:0}
.ipk-fold{color:#ffb4b4}
.ipk-bet-btn{border:1px solid rgba(245,196,81,.4);background:rgba(245,196,81,.12);color:var(--ipk-gold);
  border-radius:12px;padding:9px 11px;font-size:14px;font-weight:800;min-width:48px;flex:0 0 auto;white-space:nowrap}
.ipk-bet-btn.allin{background:rgba(255,122,122,.16);border-color:rgba(255,122,122,.5);color:#ffb4b4}
.ipk-bet-btn:disabled{opacity:.35;cursor:default}

/* ── 트레이(버린 카드) — 한 줄 가로 스크롤 ── */
.ipk-tray{grid-area:tray;display:flex;gap:4px;padding:7px 12px;height:40px;flex:0 0 auto;
  align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  border-top:1px solid var(--ipk-line);scrollbar-width:none;-ms-overflow-style:none}
.ipk-tray::-webkit-scrollbar{display:none}
.ipk-tray i{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:800;color:#8fa2bb;
  background:rgba(255,255,255,.06);border-radius:6px;width:20px;height:24px;
  display:flex;align-items:center;justify-content:center}
.ipk-tray i.hot{color:var(--ipk-gold);background:rgba(245,196,81,.14)}

/* ── 오버레이(시작·결과) — 스테이지 안에서만 스크롤한다 ── */
.ipk-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;
  background:rgba(10,16,26,.92);backdrop-filter:blur(3px);overflow-y:auto;z-index:5}
.ipk-card-panel{width:100%;max-width:340px;text-align:center;margin:auto}
.ipk-emoji{font-size:32px;display:block;margin-bottom:2px}
.ipk-card-panel h2{font-size:20px;font-weight:800;margin:0 0 8px;color:#fff}
.ipk-rule{font-size:12.5px;line-height:1.65;color:var(--ipk-muted);margin:0 0 12px}
.ipk-rule b{color:#fff}
.ipk-warn{color:#ffc9c9;font-size:12px}
.ipk-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.ipk-levels button{border:1px solid var(--ipk-line);background:var(--ipk-panel);color:var(--ipk-muted);
  border-radius:12px;padding:9px 6px;font-size:13px;font-weight:700}
.ipk-levels button.on{background:#2a3550;border-color:var(--ipk-gold);color:var(--ipk-gold)}
.ipk-record{font-size:12px;color:var(--ipk-muted);margin-bottom:10px;min-height:16px}
.ipk-primary{width:100%;border:0;border-radius:14px;padding:12px 16px;font-size:15px;font-weight:800;
  color:#0b1420;background:linear-gradient(135deg,#f5c451,#e79b3c);box-shadow:0 8px 20px rgba(231,155,60,.28)}
.ipk-secondary{width:100%;margin-top:7px;border:1px solid var(--ipk-line);border-radius:14px;padding:10px 16px;
  font-size:13px;font-weight:700;color:var(--ipk-muted);background:transparent}
.ipk-eyebrow{display:inline-block;font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--ipk-gold);margin-bottom:5px}
.ipk-final{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-bottom:4px}
.ipk-final strong{font-size:34px;font-weight:800;color:var(--ipk-gold);font-variant-numeric:tabular-nums}
.ipk-final span{font-size:13px;color:var(--ipk-muted)}
.ipk-chips-final{font-size:13px;color:var(--ipk-muted);margin-bottom:6px}
.ipk-index{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.ipk-index span{font-size:15px;font-weight:800;color:#fff}
.ipk-index i{font-style:normal;font-size:12px;color:var(--ipk-muted)}
.ipk-index b{color:var(--ipk-me)}
.ipk-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}
.ipk-stats div{background:rgba(255,255,255,.05);border-radius:10px;padding:6px 5px}
.ipk-stats b{display:block;font-size:14px;font-weight:800}
.ipk-stats small{font-size:10px;color:var(--ipk-muted)}
.ipk-report{background:rgba(78,168,255,.08);border:1px solid rgba(78,168,255,.25);border-radius:12px;
  padding:9px;margin-bottom:10px;text-align:left}
.ipk-report b{font-size:12px;color:var(--ipk-me)}
.ipk-report p{font-size:12.5px;line-height:1.55;margin:4px 0;color:#dbe6f5}
.ipk-report small{font-size:11.5px;color:var(--ipk-muted)}
/* ★조작 안내는 스테이지 밖(페이지 배경 위)에 있다★ — 어두운 판 안에서 쓰던 색을 그대로 쓰면
   밝은 테마에서 거의 안 보인다(kbd 는 어두운 배경에 어두운 글자라 더 심했다). 테마별로 따로 준다. */
.ipk-hint{width:100%;margin:8px auto 0;font-size:12.5px;color:#54657d;text-align:center;line-height:1.9}
.ipk-hint kbd{display:inline-block;background:#eef2f7;border:1px solid #c9d4e2;border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;margin:0 1px;font-size:11.5px;font-weight:700;color:#2f4059;
  font-family:inherit;line-height:1.5}
/* 다크 배경은 body::after 그라데이션(#2e3647~#455470)이라 ★가장 밝은 구간 기준★으로 맞춘다
   (#a9b8cd 는 밝은 쪽에서 3.78:1 로 떨어졌다 → #cdd8e8 은 최악 구간에서도 4.9:1) */
html[data-theme="dark"] .ipk-hint{color:#cdd8e8}
html[data-theme="dark"] .ipk-hint kbd{background:#222d3f;border-color:#3a4860;color:#e6edf7}

/* ── 넓은 화면: 트레이를 오른쪽 기둥으로 보내 가로를 쓴다 ── */
@media (min-width:820px){
  #ipk-game{--ipk-h:min(clamp(480px, 76vh, 760px), calc(100dvh - 130px))}
  .ipk-stage{grid-template-columns:minmax(0,1fr) clamp(150px,18%,210px);
    grid-template-areas:"hud hud" "table tray" "actions tray"}
  .ipk-tray{height:auto;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;
    border-top:0;border-left:1px solid var(--ipk-line);padding:12px 10px;gap:5px;white-space:normal}
  .ipk-tray::before{content:'버린 카드';flex:0 0 100%;font-size:11px;font-weight:700;
    color:var(--ipk-muted);margin-bottom:2px}
  .ipk-tray i{width:24px;height:28px;font-size:12px}
  .ipk-card-panel{max-width:380px}
  .ipk-talk{font-size:13.5px;height:34px}
  .ipk-msg{font-size:14px}
}
/* ── 가로로 누운 폰·작은 노트북: 높이를 더 아낀다 ── */
@media (max-height:520px){
  #ipk-game{--ipk-h:calc(100dvh - 76px)}
  .ipk-hud{height:38px}
  .ipk-actions{height:52px}
  .ipk-tray{height:34px}
  .ipk-who small{display:none}
  .ipk-center{height:46px}
}
@media (max-width:380px){
  .ipk-btn,.ipk-bet-btn{padding:9px 9px;min-width:44px;font-size:13px}
  .ipk-hud{font-size:11px;padding:8px 9px}
  .ipk-shoe-lab{display:none}
}

/* ── 전체화면(네이티브 :fullscreen · iOS 대체 .ipk-fs-on) ── */
#ipk-game:fullscreen,#ipk-game.ipk-fs-on{position:fixed;inset:0;z-index:99999;max-width:none;
  margin:0;padding:0;background:#0d131d;display:flex;align-items:center;justify-content:center}
#ipk-game:fullscreen .ipk-stage,#ipk-game.ipk-fs-on .ipk-stage{
  height:100dvh;width:100%;max-width:none;border-radius:0;border:0;box-shadow:none}
#ipk-game:fullscreen .ipk-hint,#ipk-game.ipk-fs-on .ipk-hint{display:none}
#ipk-game:fullscreen{--ipk-h:100dvh}
#ipk-game.ipk-fs-on{--ipk-h:100dvh}
body.ipk-fs-lock{overflow:hidden !important}

/* ── 안내 박스(09-11 규격: 왼쪽 정렬·여백·글자 크기) ── */
.answer_shadow.ipk-guide{text-align:left;line-height:1.7;margin-top:16px}
.answer_shadow.ipk-guide h3{font-size:1rem;font-weight:800;margin:0 0 8px}
.answer_shadow.ipk-guide p{font-size:.9rem;margin:0 0 8px}
.answer_shadow.ipk-guide ul{margin:0 0 8px;padding-left:18px}
.answer_shadow.ipk-guide li{font-size:.9rem;margin-bottom:4px}
.answer_shadow.ipk-guide small{display:block;font-size:.8rem;color:#888;line-height:1.7}