@font-face {
  font-family: "Nanum Myeongjo";
  src: url("./assets/fonts/NanumMyeongjo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, button, input, textarea, select,
#app, .screen, .abs-text {
  font-family: "Nanum Myeongjo", "나눔명조", serif !important;
}

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'Nanum Myeongjo', serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Viewport wrapper ─────────────────── */
.viewport-wrapper {
  position: relative;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  overflow: hidden;
}

/* ─── Game stage — 1920×1080, scaled by JS ─ */
.game-stage {
  position: absolute;
  width: 1920px; height: 1080px;
  overflow: hidden;
  background: #0a090e;
  transform-origin: center center;
}

/* ─── Scene image ──────────────────────── */
.scene-image {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

.scene-dim {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.30);
  z-index: 2; pointer-events: none;
}

/* ─── UI asset (Fullscreen 1920x1080) ───────────── */
.ui-asset {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
  filter: saturate(0.45) brightness(0.72);
  opacity: 0.7;
}

/* UI Asset with Absolute dimensions defined inline */
.ui-asset-abs {
  position: absolute;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
  filter: saturate(0.45) brightness(0.72);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════
   ABSOLUTE POSITIONING HELPERS
═══════════════════════════════════════════ */
.abs-text {
  position: absolute;
  display: flex;
  align-items: center;
  color: #efe7d2;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.95);
  pointer-events: none;
  z-index: 10;
}

.badge-text {
  text-shadow: 0px 2px 4px rgba(0,0,0,1);
}

.text-center { justify-content: center; text-align: center; }

/* ═══════════════════════════════════════════
   HUD ELEMENTS — SPACE 토글 대상
   transition: transform .35s ease, opacity .35s ease
═══════════════════════════════════════════ */
.hud-element {
  position: absolute;
  z-index: 20;
  transition: transform .35s ease, opacity .35s ease;
}

/* 상단바 슬라이드 (위로) */
.hud-topbar-wt.hud-hidden,
.hud-topbar-game.hud-hidden {
  transform: translateY(-120px);
  opacity: 0;
}

/* 좌측 로그 슬라이드 (왼쪽으로) */
.hud-log.hud-hidden {
  transform: translateX(-470px);
  opacity: 0;
}

/* 우측 정보 패널 슬라이드 (오른쪽으로) */
.hud-info-wt.hud-hidden,
.hud-info-game.hud-hidden {
  transform: translateX(500px);
  opacity: 0;
}

/* ═══════════════════════════════════════════
   INFO PANEL CONTENT
═══════════════════════════════════════════ */
.info-content-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 10;
  padding: 28px 32px !important;
  box-sizing: border-box;
  overflow: hidden;
}


.info-title {
  width: 100%;
  font-size: 18px;
  font-weight: 800;
  color: #d6b66a;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 1px;
  text-align: left;
  margin-bottom: 12px;
}

.info-body {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #f0e6cf;
  line-height: 1.75 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: pre-line;
  text-align: left;
  overflow-y: auto !important;
  max-height: calc(100% - 36px);
  pointer-events: auto !important;
}

.info-body::-webkit-scrollbar {
  width: 4px;
}
.info-body::-webkit-scrollbar-track {
  background: transparent;
}
.info-body::-webkit-scrollbar-thumb {
  background: rgba(214, 179, 106, 0.2);
  border-radius: 2px;
}
.info-body::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 179, 106, 0.4);
}

/* ─── Right Info Panel Premium Text styling ─── */
.dealer-title {
  color: #e4c978 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fx-reward {
  color: #74c476 !important;
  font-weight: 600;
}

.fx-penalty {
  color: #b34747 !important;
  font-weight: 600;
}

.fx-note {
  color: #bfb6a3 !important;
}

/* ═══════════════════════════════════════════
   LOG PANEL
═══════════════════════════════════════════ */
.log-slot {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 10;
}

.log-item {
  font-size: 13px; color: #d4c9b0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  line-height: 1.4;
  text-align: center;
}

.log-win  { color: #f0c96a; }
.log-lose { color: #d85b5b; }
.log-push { color: #efe7d2; }
.log-fold { color: #b9b0a0; }
.log-bust { color: #ff6b6b; }
.log-sys  { color: #a8c4a0; }

/* ═══════════════════════════════════════════
   WAITING & GAME HITBOXES (INVISIBLE BUTTONS)
═══════════════════════════════════════════ */
.wt-hitbox {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 40;
  outline: none;
  box-shadow: none;
  pointer-events: auto;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}

.waiting-action-selected,
.is-key-selected {
  position: relative !important;
  transform: translateY(-4px) !important;
  filter: brightness(1.12) !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.waiting-action-selected::after,
.is-key-selected::after {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  top: 10% !important;
  width: 84% !important;
  height: 80% !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(220,200,150,.28) !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.08) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
}

.action-hitbox {
  position: absolute;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer;
  z-index: 40;
  outline: none !important;
  pointer-events: auto;
  opacity: 1 !important;
}

.action-hitbox:focus,
.action-hitbox.focused-control,
.action-hitbox:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
}

.action-hitbox:disabled {
  cursor: not-allowed;
}

.action-buttons-img {
  object-fit: contain;
  opacity: 0.48 !important;
  filter: brightness(0.82) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: opacity .2s ease, filter .2s ease !important;
}

#action-area:hover .action-buttons-img,
#action-area:focus-within .action-buttons-img,
#action-area:has(:focus) .action-buttons-img,
#action-area:has(.focused-control) .action-buttons-img {
  opacity: 0.58 !important;
  filter: brightness(0.88) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════
   CARD LAYER
═══════════════════════════════════════════ */
.card-layer {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  z-index: 15; pointer-events: none;
}

.card-img {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.90;
  filter: brightness(0.88);
  transition: filter .2s ease, transform .2s ease;
}

.player-card {
  pointer-events: auto;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

.player-card:hover { transform: translateY(-10px); filter: brightness(0.95); }

.player-card.selected {
  transform: translateY(-22px);
  filter: drop-shadow(0 0 10px rgba(220,180,60,0.65));
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-img.hit-new { animation: cardFadeIn .38s ease-out forwards; }

/* ═══════════════════════════════════════════
   SHOP SCREEN
═══════════════════════════════════════════ */
.shop-title-text {
  position: absolute;
  top: 130px; left: 0; right: 0;
  text-align: center;
  font-size: 28px; font-weight: 800;
  color: #d6b66a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 4px;
  z-index: 25;
}

.shop-cards-container {
  position: absolute;
  top: 200px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 50px; align-items: flex-end;
  z-index: 25;
  max-width: 1400px;
}

.shop-arcana-card {
  width: 280px; height: 420px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
}

.shop-arcana-card img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.shop-arcana-card:hover { transform: translateY(-14px); }
.shop-arcana-card.selected,
.shop-arcana-card.is-key-selected {
  transform: translateY(-8px) !important;
  filter: brightness(1.12) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.shop-desc-body {
  position: absolute;
  bottom: 130px; left: 50%;
  transform: translateX(-50%);
  width: 700px;
  background: rgba(8,6,16,0.75);
  border: 1px solid rgba(154,122,52,0.25);
  color: #f0e6cf;
  font-size: 15px; line-height: 1.6;
  padding: 16px 24px;
  text-align: center;
  border-radius: 4px;
  z-index: 25;
}

.shop-actions {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 24px;
  z-index: 30;
}

.shop-btn {
  padding: 14px 44px;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 18px; font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .18s, border-color .18s, color .18s;
}

.btn-shop-exit {
  background: rgba(10,8,18,0.72);
  border: 1px solid rgba(100,90,80,0.4);
  color: #c4b89a;
}

.btn-shop-exit:hover {
  background: rgba(30,22,40,0.88);
  color: #efe7d2;
}

.btn-shop-confirm {
  background: rgba(30,15,5,0.78);
  border: 1px solid rgba(180,130,40,0.5);
  color: #ffd87a;
}

.btn-shop-confirm:hover {
  background: rgba(60,32,10,0.88);
  border-color: rgba(220,170,60,0.7);
}

/* ═══════════════════════════════════════════
   END SCREENS (gameOver / clear)
═══════════════════════════════════════════ */
.endscreen-content {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 32px; z-index: 30;
}

.endscreen-title {
  font-size: 72px; font-weight: 800;
  letter-spacing: 8px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.9);
}

.gameover-title { color: #d85b5b; }
.clear-title    { color: #ffd87a; }

.endscreen-detail {
  font-size: 22px; color: #d4c9b0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  text-align: center; line-height: 1.8;
}

.endscreen-btn {
  padding: 16px 56px;
  background: rgba(15,10,28,0.8);
  border: 1px solid rgba(154,122,52,0.5);
  color: #efe7d2;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 20px; font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .18s, color .18s, border-color .18s;
}

.endscreen-btn:hover {
  background: rgba(40,28,60,0.9);
  color: #ffd87a;
  border-color: rgba(200,160,60,0.7);
}

/* ═══════════════════════════════════════════
   POPUP INFO PANEL
═══════════════════════════════════════════ */
.popup-panel {
  position: absolute;
  left: 299px;
  top: 780px; /* Y 좌표 780px 고정 */
  width: 1314px;
  height: 321px;
  z-index: 9000;
  transform: translateY(120%); /* 기본은 하단 아래에 대기 */
  opacity: 0;
  transition: transform .38s cubic-bezier(.22,.9,.36,1), opacity .32s ease;
  pointer-events: none;
}

.popup-panel.visible {
  transform: translateY(0); /* 보일 때 제자리 안착 */
  opacity: 1;
  pointer-events: auto;
}

.popup-inner {
  position: relative;
  z-index: 10;
  background: transparent !important;
  border: none !important;
  padding: 28px 44px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  justify-content: center;
}

#popup-header-label,
#shop-dialogue-header {
  position: absolute !important;
  left: 84px !important;
  top: 38px !important;
  width: 191px !important;
  height: 25px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-size: 15px !important;
  line-height: 25px !important;
  letter-spacing: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;

  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
  z-index: 9001 !important;
}

.popup-header-label[data-entity="SYSTEM"]       { color: #d6b66a; }
.popup-header-label[data-entity="dealer_greed"]   { color: #f0c060; }
.popup-header-label[data-entity="dealer_sloth"]   { color: #9ac0b0; }
.popup-header-label[data-entity="dealer_wrath"]   { color: #e06040; }
.popup-header-label[data-entity="dealer_envy"]    { color: #80c070; }
.popup-header-label[data-entity="dealer_pride"]   { color: #c0a8e0; }
.popup-header-label[data-entity="dealer_gluttony"]{ color: #e0a060; }
.popup-header-label[data-entity="dealer_lust"]    { color: #e080c0; }
.popup-header-label[data-entity="boss_desire"]    { color: #ff7070; }
.popup-header-label[data-entity="boss_binding"]   { color: #8060c0; }
.popup-header-label[data-entity="boss_regret"]    { color: #60a0d0; }
.popup-header-label[data-entity="boss_peccatum"]  { color: #ffffff; }

.popup-body-text {
  font-size: 17px; color: #f0e6cf;
  line-height: 1.7;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  white-space: pre-line;
  word-break: keep-all;
  z-index: 9001;
}

.popup-deposit-area {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}

.popup-deposit-area.hidden { display: none; }

.deposit-label { font-size: 15px; color: #c4b89a; letter-spacing: 1px; }

.deposit-input {
  width: 260px; height: 46px;
  background: rgba(20,14,36,0.8);
  border: 1px solid rgba(154,122,52,0.4);
  border-radius: 3px;
  color: #ffe0a0;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 22px; font-weight: 700;
  text-align: center; outline: none; padding: 0 12px;
}
.deposit-input:focus { border-color: rgba(200,160,60,0.7); }

.deposit-btns { display: flex; gap: 14px; }
.deposit-btn {
  padding: 10px 28px; font-family: 'Nanum Myeongjo', serif;
  font-size: 15px; font-weight: 700; cursor: pointer; border-radius: 3px;
  transition: background .15s, color .15s;
}
.btn-cancel { background: rgba(10,8,18,0.72); border: 1px solid rgba(100,90,80,0.4); color: #c4b89a; }
.btn-cancel:hover { background: rgba(30,22,40,0.85); color: #efe7d2; }
.btn-ok { background: rgba(30,18,6,0.78); border: 1px solid rgba(180,130,40,0.5); color: #ffd87a; }
.btn-ok:hover { background: rgba(60,30,8,0.88); }

.popup-close-btn {
  align-self: center;
  padding: 10px 36px;
  background: rgba(10,8,20,0.72);
  border: 1px solid rgba(154,122,52,0.4);
  color: #c4b89a;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer; border-radius: 3px;
  letter-spacing: 1px;
  transition: background .15s, color .15s;
}

.popup-close-btn:hover { background: rgba(30,22,50,0.88); color: #ffd87a; }
.popup-close-btn.hidden { display: none; }

/* ═══════════════════════════════════════════
   FADE OVERLAY
═══════════════════════════════════════════ */
#screenFadeOverlay {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .55s ease-in-out;
}

#screenFadeOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* waiting 금액 조작 모드 선택 시 어둡게 강조 */
.selected-money-mode {
  filter: brightness(0.55) !important;
}

/* popup 표시 중 인게임 및 대기 UI 숨김 및 클릭 차단 */
.popup-open #game-top-bar,
.popup-open #game-info-panel,
.popup-open #action-area,
.popup-open #card-layer,
.popup-open #game-money-display,
.popup-open #game-score-badges,
.popup-open #game-arcana-slots,
.popup-open #wt-top-bar,
.popup-open #wt-log-panel,
.popup-open #wt-info-panel,
.popup-open #wt-bet-area {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity .25s ease, visibility .25s ease;
}

/* 대화창 오픈 중에는 대기 화면의 버튼 클릭도 안전하게 차단 */
.popup-open .wt-hitbox,
.popup-open .action-hitbox {
  pointer-events: none !important;
}

/* 키보드 Tab 순회 가상 포커스 링 */
.focused-control {
  outline: none !important;
  box-shadow: none !important;
}

.score-badge-layer {
  position: absolute;
  inset: 0;
  z-index: 800;
  pointer-events: none;
}

#player-total-badge {
  position: absolute;
  left: 704px;
  top: 806px;
  width: 68px;
  height: 70px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 850 !important;
  pointer-events: none;
  object-fit: contain;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#player-total-badge-text {
  position: absolute;
  left: 704px;
  top: 806px;
  width: 68px;
  height: 70px;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 851 !important;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  color: #efe7d2 !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}

#dealer-total-badge {
  position: absolute;
  left: 1128px;
  top: 617px;
  width: 68px;
  height: 70px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 850 !important;
  pointer-events: none;
  object-fit: contain;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#dealer-total-badge-text {
  position: absolute;
  left: 1128px;
  top: 617px;
  width: 68px;
  height: 70px;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 851 !important;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  color: #efe7d2 !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}

#game-gold-bg,
#game-raise-bg {
  opacity: 0.48 !important;
  filter: brightness(0.82) !important;
  transition: opacity .2s ease, filter .2s ease !important;
}
#game-raise-bg:hover,
#game-raise-bg:focus {
  opacity: 0.58 !important;
  filter: brightness(0.88) !important;
}

#current-bet-text {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ─── Raise Panel slide-in transition ─── */
.raise-panel-open {
  animation: raisePanelIn .18s ease-out;
  height: 100%;
  width: 100%;
}

@keyframes raisePanelIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

#game-win-info {
  padding: 0 !important;
  overflow: hidden !important;
  color: #ddd3bf !important;
}

.raise-panel {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden !important;
  overflow-y: hidden !important;
  padding: 14px 24px 12px 24px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #ddd3bf !important;
}

.raise-panel-title {
  color: #e4c978 !important;
  font-weight: 700;
  font-size: 15px !important;
  margin-bottom: 8px !important;
  text-align: left;
}

.raise-input-display {
  color: #efe7d2 !important;
  font-size: 16px !important;
  font-weight: 700;
  margin-bottom: 7px !important;
  text-align: left;
}

.raise-preview-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 3px 0 !important;
  white-space: nowrap;
  color: #ddd3bf !important;
}

.raise-preview-label,
.raise-label {
  color: #c8bfaf !important;
}

.raise-preview-value,
.raise-value {
  color: #efe7d2 !important;
  font-weight: 600;
}

.raise-error-text {
  color: #e06060 !important;
  font-weight: bold;
  font-size: 12px !important;
  margin-top: 4px !important;
}

.raise-hint-text {
  color: #a89e8e !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(214, 179, 106, 0.12);
  padding-top: 5px;
  white-space: nowrap;
}

/* ─── Login Screen Custom Styles ─────────────────── */
#screen-login,
#screen-login input,
#screen-login button {
  font-family: "Nanum Myeongjo", "나눔명조", serif;
}

#login-username:focus {
  border-color: #d6b66a !important;
  pointer-events: auto !important;
}

#login-username {
  pointer-events: auto !important;
}

#login-btn-start {
  box-shadow: inset 0 0 18px rgba(0,0,0,.72) !important;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Nanum Myeongjo", "나눔명조", serif !important;
  padding-left: .34em !important;
  text-align: center !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  outline: none !important;
  pointer-events: auto !important;

  background: rgba(14, 14, 13, .72) !important;
  border: 1px solid rgba(150, 130, 82, .48) !important;
  color: rgba(212, 190, 128, .84) !important;
  letter-spacing: .34em !important;
  font-size: 18px !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.85);
}

#login-btn-start:hover,
#login-btn-start:focus {
  transform: translateY(-2px) !important;
  background: rgba(22, 20, 16, .82) !important;
  border-color: rgba(190, 158, 88, .72) !important;
  color: rgba(232, 208, 146, .95) !important;
}

#login-btn-start:active {
  transform: translateY(0px) scale(.99) !important;
}

.login-dealer-img {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1920px !important;
  height: 1080px !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
  pointer-events: none !important;
  filter: brightness(.75) contrast(.95) saturate(.85) !important;
  transition: opacity 1.2s ease-in-out;
}

html, body, button, input, textarea, select,
.screen, .abs-text, .ui-text, .dialogue-text, .log-text {
  font-family: "Nanum Myeongjo", "나눔명조", serif !important;
}

/* ─── Keyboard Help / Direction Key Guide / Key Hint ─── */
.keyboard-help,
.direction-key-guide,
.key-hint,
#waiting-action-desc,
.waiting-action-desc {
  position: absolute !important;
  left: 50% !important;
  bottom: 245px !important; /* Y좌표 835px 위치에 오도록 버튼 위로 조정 */
  transform: translateX(-50%) !important;
  width: 260px !important;
  height: 34px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(180,160,105,.24) !important;
  color: rgba(230,220,200,.82) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .82 !important;
  pointer-events: none !important;
  z-index: 8 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* ─── Waiting Screen Right Panel Text Overlap & Alignment Fixes ─── */
#wt-info-panel .info-content-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 24px 28px !important;
  text-align: left !important;
  pointer-events: none !important;
}

#wt-info-panel .info-title {
  position: static !important;
  text-align: left !important;
  justify-content: flex-start !important;
  margin-bottom: 12px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  height: auto !important;
  display: block !important;
}

#wt-info-panel .info-body {
  position: static !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: block !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  height: auto !important;
  width: 100% !important;
  margin-top: 4px !important;
  top: auto !important;
  left: auto !important;
  color: #efe7d2 !important;
}

#wt-savings-text {
  position: static !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: block !important;
  line-height: 1.6 !important;
  font-size: 28px !important;
  font-weight: bold !important;
  color: #d8b35a !important;
  margin-top: 8px !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
}

.waiting-log-list {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  display: grid !important;
  grid-template-rows: repeat(9, 1fr) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.waiting-log-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: rgba(220,235,210,.86) !important;
  pointer-events: none !important;
}

/* ─── In-game Action Buttons Keyboard Navigation Selection ─── */
.action-hitbox.is-key-selected,
#btn-raise-trigger.is-key-selected,
.game-action-btn.is-key-selected {
  position: relative !important;
  transform: translateY(-4px) !important;
  filter: brightness(1.12) !important;
  outline: none !important;
  box-shadow: none !important;
}

.action-hitbox.is-key-selected::after,
#btn-raise-trigger.is-key-selected::after,
.game-action-btn.is-key-selected::after {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  top: 10% !important;
  width: 84% !important;
  height: 80% !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(220,200,150,.22) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  border-radius: 4px !important;
}

/* ─── In-game Player Cards Keyboard Navigation Selection ─── */
.player-card.is-key-selected {
  transform: translateY(-30px) !important; /* -22px (선택) + -8px (포커스) */
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(220,180,60,0.65)) !important;
}

/* ─── Login Screen Styling ─── */
#login-username::placeholder {
  color: rgba(210,200,180,.42) !important;
}
#login-btn-start {
  background: rgba(0,0,0,.10) !important;
  border: 1px solid rgba(190,160,90,.50) !important;
  color: rgba(215,190,125,.86) !important;
  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
#login-btn-start:hover {
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(220,185,105,.72) !important;
  color: rgba(235,210,150,.95) !important;
}

.active-arcana-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 13px;
  font-weight: 700;
  color: #e4c978;
  text-shadow: 0 2px 4px rgba(0,0,0,.9);
  white-space: nowrap;
  z-index: 5;
}

#tutorial-overlay {
  position:absolute;
  inset:0;
  z-index:99999 !important;
  display:none;
  pointer-events:auto;
}

#tutorial-overlay.visible {
  display:block !important;
}

.tutorial-black {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.96);
}

.tutorial-text-wrap {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:780px;
  max-width:82%;
  max-height:82%;
  overflow-y:auto;
  text-align:center;
  color:#efe7d2;
  pointer-events:auto;
}

.tutorial-title {
  font-size:19px;
  font-weight:800;
  color:#d8b35a;
  letter-spacing:.12em;
  margin-bottom:22px;
}

.tutorial-text {
  font-size:16px;
  line-height:1.75;
  white-space:normal;
  word-break:keep-all;
  text-shadow:0 3px 10px rgba(0,0,0,.9);
}

.tutorial-hint {
  margin-top:30px;
  font-size:12px;
  color:#9f927c;
}

.tutorial-key {
  color:#d8b35a;
  font-weight:700;
}

.tutorial-muted {
  color:#bfb6a3;
}

@keyframes tutorialTextIn {
  from {
    opacity:0;
    transform:translate(-50%,-47%);
  }
  to {
    opacity:1;
    transform:translate(-50%,-50%);
  }
}

#game-top-bar,
#game-info-panel,
#wt-top-bar,
#wt-info-panel {
  transition: opacity .24s ease, transform .24s ease, filter .24s ease;
}

.hud-hidden {
  opacity: 0 !important;
  transform: translateY(-6px);
  pointer-events: none !important;
}

#btn-hit,
#btn-stand,
#btn-reroll,
#btn-fold,
#btn-raise-trigger,
#arcana-slot-0,
#arcana-slot-1,
#arcana-slot-2 {
  transition: filter .16s ease, opacity .16s ease, box-shadow .22s ease;
}

#btn-hit:hover,
#btn-stand:hover,
#btn-reroll:hover,
#btn-fold:hover,
#btn-raise-trigger:hover {
  filter: brightness(1.12);
}

.focused-control,
.is-key-selected {
  filter: brightness(1.14) !important;
  box-shadow: 0 0 18px rgba(216,179,90,.32) !important;
  transition: filter .16s ease, box-shadow .16s ease;
}

.arcana-active-ready {
  animation: arcanaReadyPulse 1.9s ease-in-out infinite;
}

@keyframes arcanaReadyPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(216,179,90,.24);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(216,179,90,.52);
    filter: brightness(1.12);
  }
}

.card-img {
  animation: cardSoftIn .18s ease-out both;
}

@keyframes cardSoftIn {
  from {
    opacity: 0;
    filter: brightness(.85);
  }
  to {
    opacity: .85;
    filter: brightness(1);
  }
}

.player-card {
  animation: playerCardSoftIn .18s ease-out both;
}

@keyframes playerCardSoftIn {
  from {
    opacity: 0;
    filter: brightness(.85);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}

.shop-arcana-card {
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.shop-arcana-card.is-key-selected {
  transform: translateY(-5px) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 0 22px rgba(216,179,90,.34) !important;
}

#tutorial-overlay.visible .tutorial-text-wrap {
  animation: tutorialTextIn .28s ease-out both;
}

/* --- 새로고침 방지와 이미지 드래그 방지 --- */
html, body, .game-stage {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

img, .card-img, .shop-arcana-card, .game-stage * {
  -webkit-user-drag: none;
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* --- 대기화면 안내 문구 잘림 방지 --- */
#waiting-action-desc {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 900px !important;
  max-width: 900px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  pointer-events: none !important;
}

#game-action-guide {
  position: absolute !important;
  left: 50% !important;
  bottom: 150px !important;
  transform: translateX(-50%) !important;
  width: 1080px !important;
  max-width: 1080px !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #efe7d2 !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.9) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 850 !important;
}

#game-info-panel .info-title,
#game-info-panel .dealer-title {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

#game-info-panel .info-body,
#game-info-panel #game-opponent-body,
#game-info-panel #game-arcana-info,
#game-info-panel #game-win-info {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #efe7d2 !important;
  word-break: keep-all !important;
}

#game-info-panel #game-opponent-body div,
#game-info-panel #game-arcana-info div,
#game-info-panel #game-win-info div {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

#game-info-panel .raise-panel-title {
  font-size: 18px !important;
}

#game-info-panel .raise-preview-line,
#game-info-panel .raise-label,
#game-info-panel .raise-value {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

#waiting-action-desc {
  font-size: 21px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #efe7d2 !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.9) !important;
  max-width: 900px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  text-align: center !important;
}

/* 버튼/히트박스 계열에 대해서만 금 테두리 및 과한 glow 제거 */
.wt-hitbox.focused-control,
.wt-hitbox.is-key-selected,
.wt-hitbox.waiting-action-selected,
.action-hitbox.focused-control,
.action-hitbox.is-key-selected,
#btn-raise-trigger.focused-control,
#btn-raise-trigger.is-key-selected,
.game-action-btn.focused-control,
.game-action-btn.is-key-selected {
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(1.06) !important;
}

.waiting-action-selected::after,
.action-hitbox.is-key-selected::after,
#btn-raise-trigger.is-key-selected::after,
.game-action-btn.is-key-selected::after {
  border: none !important;
  box-shadow: none !important;
}

#waiting-action-desc {
  top: 790px !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
  line-height: 1.25 !important;
  pointer-events: none !important;
}

#waiting-action-desc .waiting-guide-controls {
  display: block !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(239,231,210,0.82) !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
}

#waiting-action-desc .waiting-guide-detail {
  display: block !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #efe7d2 !important;
  white-space: nowrap !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.9) !important;
}

#waiting-log-text-layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1920px !important;
  height: 1080px !important;
  pointer-events: none !important;
  z-index: 900 !important;
}

.waiting-log-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.waiting-log-slot .log-item {
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
  max-width: 390px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translateY(2px) !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.9) !important;
}

#wt-log-panel,
#waiting-log-text-layer,
#wt-info-panel {
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms ease !important;
}

#wt-log-panel.hud-hidden,
#waiting-log-text-layer.hud-hidden,
#wt-info-panel.hud-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}

#wt-log-panel:not(.hud-hidden),
#waiting-log-text-layer:not(.hud-hidden),
#wt-info-panel:not(.hud-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

#help-key-guide-floating {
  position: absolute !important;
  left: 50% !important;
  top: 642px !important;
  transform: translateX(-50%) !important;
  z-index: 1600 !important;
  color: rgba(239,231,210,0.88) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.95) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#help-key-guide-floating.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.help-wrap {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #efe7d2 !important;
  text-align: center !important;
  transform: none !important;
  padding-top: 34px !important;
}

.help-page-count {
  text-align: center !important;
  color: #d8b35a !important;
  font-size: 16px !important;
  margin-bottom: 42px !important;
  font-weight: 700 !important;
}

.help-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  text-align: center !important;
  overflow: visible !important;
  max-height: none !important;
}

.help-line {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

.help-blue {
  color: #70a7ff !important;
  font-weight: 800 !important;
}

.help-red {
  color: #ff6b6b !important;
  font-weight: 800 !important;
}

#popup-body-text,
.popup-body-text,
.popup-body {
  overflow: visible !important;
}

.arcana-disabled {
  opacity: 0.45 !important;
  filter: grayscale(0.8) !important;
  pointer-events: none !important;
}