/* ==========================================================================
   재미판 — 공용 카드 스타일 (cards.js 와 함께 씀)
   .cd-table   카드 테이블 (JS 가 --cd-w / --cd-h / --cd-r 를 정함)
   .cd-felt    펠트 바탕 — 게임마다 --cd-felt-1(가운데) · 2 · 3(가장자리) 색을 덮어쓴다
   ========================================================================== */

.cd-table {
  --cd-w: 80px;
  --cd-h: 112px;
  --cd-r: 7px;
  --cd-accent: #ffd23f;
  --cd-felt-1: #3fae67;
  --cd-felt-2: #2c8a50;
  --cd-felt-3: #1a5b35;
  --cd-line: rgba(255, 255, 255, .2);
  --cd-stitch: 8px;
  position: relative;
  contain: layout style;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 펠트: 결 텍스처 + 가운데가 밝은 조명 + 가장자리 그늘 */
.cd-felt {
  border-radius: var(--r-xl, 22px);
  background-color: var(--cd-felt-2);
  background-image:
    var(--cd-grain, linear-gradient(transparent, transparent)),
    radial-gradient(120% 95% at 50% 28%, var(--cd-felt-1) 0%, var(--cd-felt-2) 52%, var(--cd-felt-3) 100%);
  background-size: var(--cd-grain-size, 150px) var(--cd-grain-size, 150px), 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 -30px 60px -30px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(0, 0, 0, .28),
    0 24px 60px -26px rgba(0, 0, 0, .85);
}
/* 썸네일처럼 안쪽에 점선 바느질 */
.cd-felt::before {
  content: "";
  position: absolute;
  inset: var(--cd-stitch);
  border-radius: calc(var(--r-xl, 22px) - var(--cd-stitch) * .6);
  border: 2px dotted rgba(255, 255, 255, .13);
  pointer-events: none;
}

.cd-slots, .cd-layer, .cd-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-layer { z-index: 1; }
.cd-fx { z-index: 2; }

/* ---- 카드 ---- */
.cd-card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cd-w);
  height: var(--cd-h);
  pointer-events: none;
}
.cd-img {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--cd-r);
  background-color: #2b2f66;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  box-shadow: 0 1px 1px rgba(6, 8, 28, .2), 0 2px 5px -1px rgba(6, 8, 28, .34);
}
.cd-card.is-up > .cd-img { background-color: #fffaf0; }

/* 누르고 있는 카드 (끌기 직전) */
.cd-card.is-press > .cd-img {
  transform: translateY(-1.5px) scale(1.015);
  box-shadow: 0 2px 3px rgba(6, 8, 28, .22), 0 8px 16px -6px rgba(6, 8, 28, .55);
  transition: transform .09s var(--ease-out, ease-out);
}

/* 집어 든 카드 */
.cd-card.is-lift > .cd-img {
  box-shadow: 0 3px 6px rgba(6, 8, 28, .22), 0 18px 34px -10px rgba(6, 8, 28, .7);
  transform: scale(1.04);
  transition: transform .14s var(--ease-out, ease-out);
}
.cd-table.is-dragging { cursor: grabbing !important; }

/* 마우스를 올린 카드 (집을 수 있음) */
@media (hover: hover) {
  .cd-card.is-hover > .cd-img {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 4px rgba(6, 8, 28, .25), 0 8px 18px -8px rgba(6, 8, 28, .6);
  }
}

/* 힌트: 금빛 테두리가 두어 번 숨 쉰다 */
.cd-card.is-hint > .cd-img::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--cd-r) + 3px);
  box-shadow: 0 0 0 3px var(--cd-accent), 0 0 20px 3px rgba(255, 210, 63, .6);
  animation: cd-breathe .7s ease-in-out 4 alternate both;
}
@keyframes cd-breathe { from { opacity: .35; } to { opacity: 1; } }

/* 잘못된 수 */
.cd-card.is-bad > .cd-img::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--cd-r) + 2px);
  box-shadow: 0 0 0 2.5px var(--bad, #ff5d73), 0 0 16px rgba(255, 93, 115, .55);
  animation: cd-fade .42s ease-out both;
}
@keyframes cd-fade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* 힌트 미리보기 (반투명 유령 카드) */
.cd-ghost {
  pointer-events: none;
}
.cd-ghost > .cd-img {
  box-shadow: 0 0 0 2px var(--cd-accent), 0 10px 26px -8px rgba(6, 8, 28, .7);
}

/* ---- 빈 자리 ---- */
.cd-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cd-w);
  height: var(--cd-h);
  border-radius: var(--cd-r);
  border: max(1.5px, calc(var(--cd-w) * .018)) solid var(--cd-line);
  background: rgba(0, 0, 0, .1);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .16);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .32);
  font: 800 calc(var(--cd-w) * .34) / 1 var(--f-ui, sans-serif);
  letter-spacing: -.02em;
  transition: border-color .2s, background-color .2s, color .2s;
}
.cd-slot > svg { width: 40%; height: auto; }
.cd-slot.is-dim { border-style: dashed; color: rgba(255, 255, 255, .16); }
.cd-slot.is-flash { animation: cd-slot-flash .7s ease-out; }
@keyframes cd-slot-flash {
  0% { border-color: var(--cd-accent); background-color: rgba(255, 210, 63, .18); }
  100% { border-color: var(--cd-line); background-color: rgba(0, 0, 0, .1); }
}

/* ---- 놓을 자리 고리 ---- */
.cd-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cd-w);
  height: var(--cd-h);
  margin: -5px 0 0 -5px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: calc(var(--cd-r) + 5px);
  box-shadow: inset 0 0 0 3px var(--cd-accent), 0 0 24px 2px rgba(255, 210, 63, .45);
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
  z-index: 50000;
}
.cd-ring.is-on { opacity: 1; }
.cd-ring--hint.is-on { animation: cd-breathe .7s ease-in-out 4 alternate both; }

/* 키보드 커서 (집어 들면 금빛) */
.cd-ring--focus {
  box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 2px rgba(15, 16, 40, .55), 0 6px 18px rgba(0, 0, 0, .35);
  transition: opacity .12s, transform .14s var(--ease-out, ease-out), width .14s var(--ease-out, ease-out), height .14s var(--ease-out, ease-out);
}
.cd-ring--focus.is-held { box-shadow: inset 0 0 0 3px var(--cd-accent), 0 0 0 2px rgba(15, 16, 40, .55), 0 0 22px 3px rgba(255, 210, 63, .5); }
.cd-table:focus { outline: none; }
.cd-table:focus-visible { outline: 2px solid rgba(255, 210, 63, .55); outline-offset: 3px; }
.cd-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- 점수 튀어오름 ---- */
.cd-pop {
  position: absolute;
  z-index: 60000;
  transform: translate(-50%, -50%);
  color: var(--brand, #ffd23f);
  font: 800 clamp(14px, calc(var(--cd-w) * .24), 24px) / 1 var(--f-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .55);
  pointer-events: none;
  animation: cd-pop 1s var(--ease-out, ease-out) forwards;
}
.cd-pop.is-minus { color: #ffb3bd; }
.cd-pop.is-big { font-family: var(--f-display, sans-serif); font-weight: 400; font-size: clamp(22px, calc(var(--cd-w) * .42), 44px); }
@keyframes cd-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  30% { transform: translate(-50%, -80%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

/* ---- 승리 폭포 캔버스 ---- */
.cd-cascade {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 95;
  pointer-events: none;
  transition: opacity .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cd-card.is-lift > .cd-img, .cd-card.is-press > .cd-img { transform: none; }
}