/* --------------------------------------------------
   카드 앞면: 테두리 틀 + 모서리 숫자 + 10의 자리마다 다른 문양 (cards.js)
   --v (0~1): 숫자 색 — 낮은 수 파랑 → 높은 수 빨강
   data-tens (0~9, base): 문양 — 같은 10단위 카드끼리 같은 무늬라 손패에서 묶음이 보임
   모두 CSS 그라디언트라 이미지 요청 없음
   -------------------------------------------------- */

.card {
    --tone: hsl(calc(222 - var(--v, 0.5) * 222) 70% 42%);
    --pat: color-mix(in srgb, var(--tone) 17%, transparent);
    --frame: color-mix(in srgb, var(--tone) 45%, transparent);
}

/* 안쪽 틀 + 문양 */
.face-frame {
    position: absolute;
    inset: 4px;
    border: 1.5px solid var(--frame);
    border-radius: 7px;
    pointer-events: none;
}

/* 틀 안쪽 한 줄 더 (고급 카드 느낌) */
.face-frame::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px dashed color-mix(in srgb, var(--tone) 22%, transparent);
    border-radius: 5px;
}

[data-tens="0"] .face-frame {   /* 점 */
    background: radial-gradient(var(--pat) 1.4px, transparent 1.6px) 0 0 / 8px 8px;
}
[data-tens="1"] .face-frame {   /* 사선 */
    background: repeating-linear-gradient(45deg, var(--pat) 0 2px, transparent 2px 7px);
}
[data-tens="2"] .face-frame {   /* 격자 */
    background:
        linear-gradient(var(--pat) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(90deg, var(--pat) 1px, transparent 1px) 0 0 / 8px 8px;
}
[data-tens="3"] .face-frame {   /* 지그재그 */
    background:
        linear-gradient(135deg, var(--pat) 25%, transparent 25%) -5px 0 / 10px 10px,
        linear-gradient(225deg, var(--pat) 25%, transparent 25%) -5px 0 / 10px 10px;
}
[data-tens="4"] .face-frame {   /* 물결(비늘) */
    background: radial-gradient(circle at 50% 100%, transparent 0 3px, var(--pat) 3px 4.5px, transparent 4.5px) 0 0 / 10px 7px;
}
[data-tens="5"] .face-frame {   /* 마름모 */
    background:
        linear-gradient(45deg, transparent 42%, var(--pat) 42% 58%, transparent 58%) 0 0 / 10px 10px,
        linear-gradient(-45deg, transparent 42%, var(--pat) 42% 58%, transparent 58%) 0 0 / 10px 10px;
}
[data-tens="6"] .face-frame {   /* 세로줄 */
    background: repeating-linear-gradient(90deg, var(--pat) 0 2px, transparent 2px 6px);
}
[data-tens="7"] .face-frame {   /* 교차 사선 */
    background:
        repeating-linear-gradient(45deg, var(--pat) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, var(--pat) 0 1px, transparent 1px 6px);
}
[data-tens="8"] .face-frame {   /* 동심원 */
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, var(--pat) 5px 6.5px);
}
[data-tens="9"] .face-frame {   /* 체크 */
    background: conic-gradient(var(--pat) 25%, transparent 0 50%, var(--pat) 0 75%, transparent 0) 0 0 / 10px 10px;
}

/* 모서리 숫자 */
.corner {
    position: absolute;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.corner-tl { top: 7px; left: 7px; }
.corner-br { bottom: 7px; right: 7px; transform: rotate(180deg); }

/* 가운데 숫자: 문양 위에서도 읽히게 카드 바탕색 테두리 */
.face-value,
.pile-value {
    position: relative;
    z-index: 1;
    text-shadow:
        0 0 3px var(--card-face), 0 0 6px var(--card-face), 0 0 10px var(--card-face);
}

/* 더미: 위쪽 방향 띠 아래부터 틀 */
.pile .face-frame,
.pile-under .face-frame {
    top: 24px;
}

/* --- 카드 내기 연출 (fx.js) ----------------------------------------- */

/* 손/좌석에서 더미로 날아가는 카드
   선택자를 .card.fly-card 로: 뒤에 로드되는 board.css 의 `.card { position: relative }` 가
   이기면 카드가 화면에 고정되지 않고 페이지 맨 아래에 생겼음 */
.card.fly-card {
    position: fixed;
    z-index: 40;
    margin: 0;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    will-change: transform;
}

.fly-card .face-value {
    font-size: 40px;
    letter-spacing: -0.03em;
}

.fly-card .corner {
    font-size: 12px;
}

/* 착지 충격파 (세기 --k 에 따라 두께) */
.impact-ring {
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    border: calc(2px + 3px * var(--k, 0)) solid var(--gold);
    pointer-events: none;
    z-index: 2;
}