/* ========================================================
   동전 던지기 — "벨벳 테이블 위의 금속 동전" 디자인
   - 하나의 오브젝트(동전)에 완전히 집중하는 미니멀 컨셉.
   - 시그니처: CSS 3D transform으로 실제 동전처럼 회전하며 튀어오르는 던지기 애니메이션.
   - 사다리/제비뽑기(목재·종이 톤)와 대비되는 다크 벨벳 + 메탈릭 골드 팔레트.
   - 다크모드 토글이 없는 공개 페이지(/play/coin) 전용이라 컬러를 고정값으로 사용한다.
   ======================================================== */

.coin-container {
    --cf-table: #16241d;
    --cf-table-light: #1f3327;
    --cf-felt-line: rgba(255,255,255,0.04);
    --cf-gold-1: #f6dd8c;
    --cf-gold-2: #d9a920;
    --cf-gold-3: #8a6512;
    --cf-silver-1: #f2f3f6;
    --cf-silver-2: #b9bfc9;
    --cf-silver-3: #6d7480;
    --cf-cream: #f5ead0;
    --cf-ink: #17130b;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.coin-container .hidden { display: none !important; }

/* ── 헤더 ── */
.coin-container .page-header {
    background:
        radial-gradient(circle at 80% -10%, rgba(217, 169, 32, 0.18), transparent 55%),
        linear-gradient(180deg, var(--cf-table-light), var(--cf-table));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.coin-container .page-header::before { display: none; }

.cf-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cf-ink);
    background: linear-gradient(135deg, var(--cf-gold-1), var(--cf-gold-2));
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

.coin-container .page-header h1 {
    font-family: 'Black Han Sans', -apple-system, sans-serif;
    font-weight: 400;
    background: linear-gradient(135deg, var(--cf-gold-1) 0%, var(--cf-gold-2) 60%, var(--cf-gold-1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cf-gold-1);
}

.coin-container .page-header .description {
    color: rgba(245, 234, 208, 0.75);
}

/* ── 카드 ── */
.coin-container .tool-section.card {
    background: var(--cf-table-light);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--cf-cream);
}

.coin-container .tool-section.card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(217, 169, 32, 0.18);
}

.coin-container .tool-section h2 {
    color: var(--cf-cream);
    border-bottom-color: rgba(255,255,255,0.08);
}

.coin-container .tool-section h2::after {
    background: linear-gradient(135deg, var(--cf-gold-1), var(--cf-gold-2));
}

.coin-container .helper-text { color: rgba(245, 234, 208, 0.55); }

.coin-container .tool-guide-text { color: rgba(245, 234, 208, 0.7); }

.coin-container .tool-intro-card,
.coin-container .tool-usage-steps li,
.coin-container .tool-example-card,
.coin-container .tool-usecase-chip,
.coin-container .tool-related-card {
    background: rgba(255,255,255,0.04) !important;
    color: var(--cf-cream) !important;
}

.coin-container .tool-intro-card h4,
.coin-container .tool-example-arrow,
.coin-container .tool-usecase-chip strong,
.coin-container .tool-related-card .tool-related-name {
    color: var(--cf-gold-1) !important;
}

.coin-container .tool-intro-card p,
.coin-container .tool-example-card .tool-example-label,
.coin-container .tool-related-card .tool-related-desc,
.coin-container .tool-meta-bar {
    color: rgba(245, 234, 208, 0.6) !important;
}

.coin-container .tool-example-card .tool-example-input,
.coin-container .tool-example-card .tool-example-output {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.08);
    color: var(--cf-cream);
}

.coin-container .tool-meta-bar { border-top-color: rgba(255,255,255,0.08); }
.coin-container .tool-meta-bar span strong { color: var(--cf-cream); }
.coin-container .tool-guide-section h2 { color: var(--cf-cream); }

.coin-container .tool-faq-item { background: rgba(255,255,255,0.04); }
.coin-container .tool-faq-item dt { color: var(--cf-cream); }
.coin-container .tool-faq-item dt::before { color: var(--cf-gold-1); }
.coin-container .tool-faq-item dd { color: rgba(245, 234, 208, 0.65); }
.coin-container .tool-faq-item dd::before { color: var(--cf-gold-2); }

/* ── 내기(stake) 입력 ── */
.coin-container .input-group input[type="text"] {
    background: rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.12);
    color: var(--cf-cream);
}

.coin-container .input-group input[type="text"]::placeholder { color: rgba(245, 234, 208, 0.35); }

.coin-container .input-group input[type="text"]:focus {
    border-color: var(--cf-gold-2);
    box-shadow: 0 0 0 3px rgba(217, 169, 32, 0.18);
}

/* ── 버튼 ── */
.coin-container .btn-generate {
    background: linear-gradient(135deg, var(--cf-gold-1) 0%, var(--cf-gold-2) 100%);
    color: var(--cf-ink);
    border: none;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(217, 169, 32, 0.35);
}

.coin-container .btn-generate:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 24px rgba(217, 169, 32, 0.45);
}

.coin-container .btn-generate:disabled { opacity: 0.5; box-shadow: none; }

.coin-container .clear-btn {
    background: rgba(255,255,255,0.06);
    color: var(--cf-cream);
    border: 1px solid rgba(255,255,255,0.15);
}

.coin-container .clear-btn:hover { background: rgba(255,255,255,0.12); }

.coin-container .copy-btn {
    background: linear-gradient(135deg, var(--cf-gold-1) 0%, var(--cf-gold-2) 100%);
    color: var(--cf-ink);
    box-shadow: 0 4px 12px rgba(217, 169, 32, 0.3);
}

.coin-container .error-message {
    background: rgba(178, 58, 46, 0.16);
    color: #e6857a;
    border-left: 4px solid #b23a2e;
}

.coin-container .share-link-input {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--cf-cream);
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
}

/* ============================================================
   동전 스테이지 (시그니처 요소)
   3D perspective 안에서 rotateY로 실제 동전처럼 회전시킨다.
   앞/뒷면은 backface-visibility:hidden으로 서로를 가리며,
   착지 시 살짝 바운스되는 그림자 압축 연출을 함께 준다.
   ============================================================ */
.cf-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0 0.5rem;
}

.cf-coin-wrap {
    perspective: 900px;
    width: 168px;
    height: 168px;
    margin-bottom: 1.4rem;
}

/* 서버 응답을 기다리는 짧은 순간에만 켜지는 은은한 골드 펄스 - transform은 건드리지 않아
   이후 던지기 애니메이션(cf-toss-head/tail)으로 자연스럽게 이어진다 (끊김/튐 없음) */
@keyframes cfWaitPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(217, 169, 32, 0)); }
    50% { filter: brightness(1.18) drop-shadow(0 0 16px rgba(217, 169, 32, 0.55)); }
}

.cf-coin-wrap.cf-waiting .cf-coin {
    animation: cfWaitPulse 0.7s ease-in-out infinite;
}

.cf-coin {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0deg) translateY(0);
}

.cf-coin.cf-toss-head,
.cf-coin.cf-toss-tail {
    animation-duration: 1.05s;
    animation-timing-function: cubic-bezier(0.32, 0.02, 0.2, 1);
    animation-fill-mode: forwards;
}

/* 결과에 따라 JS가 이 두 클래스 중 하나를 최종 회전각으로 부여 (애니메이션 종료 시점) */
@keyframes cfTossHead {
    0%   { transform: translateY(0) rotateY(0deg) rotateX(0deg) scale(1); }
    12%  { transform: translateY(-130px) rotateY(360deg) rotateX(8deg) scale(1.04); }
    45%  { transform: translateY(-190px) rotateY(1080deg) rotateX(-6deg) scale(1.06); }
    75%  { transform: translateY(-70px) rotateY(1800deg) rotateX(4deg) scale(1.02); }
    88%  { transform: translateY(6px) rotateY(2160deg) scale(0.97); }
    94%  { transform: translateY(-4px) rotateY(2160deg) scale(1.01); }
    100% { transform: translateY(0) rotateY(2160deg) scale(1); }
}

@keyframes cfTossTail {
    0%   { transform: translateY(0) rotateY(0deg) rotateX(0deg) scale(1); }
    12%  { transform: translateY(-130px) rotateY(360deg) rotateX(8deg) scale(1.04); }
    45%  { transform: translateY(-190px) rotateY(1080deg) rotateX(-6deg) scale(1.06); }
    75%  { transform: translateY(-70px) rotateY(1620deg) rotateX(4deg) scale(1.02); }
    88%  { transform: translateY(6px) rotateY(1980deg) scale(0.97); }
    94%  { transform: translateY(-4px) rotateY(1980deg) scale(1.01); }
    100% { transform: translateY(0) rotateY(1980deg) scale(1); }
}

.cf-coin.cf-toss-head { animation-name: cfTossHead; }
.cf-coin.cf-toss-tail { animation-name: cfTossTail; }

.cf-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-family: 'Black Han Sans', -apple-system, sans-serif;
    font-size: 2.6rem;
    box-shadow:
        0 10px 26px rgba(0,0,0,0.45),
        inset 0 3px 0 rgba(255,255,255,0.35),
        inset 0 -6px 10px rgba(0,0,0,0.25);
    border: 6px solid;
}

.cf-face-head {
    background: radial-gradient(circle at 35% 30%, var(--cf-gold-1), var(--cf-gold-2) 60%, var(--cf-gold-3) 100%);
    border-color: var(--cf-gold-3);
    color: var(--cf-ink);
}

.cf-face-tail {
    background: radial-gradient(circle at 35% 30%, var(--cf-silver-1), var(--cf-silver-2) 60%, var(--cf-silver-3) 100%);
    border-color: var(--cf-silver-3);
    color: #2a2e35;
    transform: rotateY(180deg);
}

.cf-face::after {
    /* 동전 테두리 각인 링 */
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0,0,0,0.18);
}

.cf-shadow {
    width: 100px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
    margin-top: -0.6rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cf-shadow.cf-tossing {
    animation: cfShadowPulse 1.05s cubic-bezier(0.32, 0.02, 0.2, 1);
}

@keyframes cfShadowPulse {
    0% { transform: scale(1); opacity: 0.6; }
    45% { transform: scale(0.55); opacity: 0.25; }
    88% { transform: scale(0.7); opacity: 0.35; }
    100% { transform: scale(1); opacity: 0.6; }
}

.cf-result-label {
    font-family: 'Black Han Sans', -apple-system, sans-serif;
    font-size: 1.3rem;
    color: var(--cf-gold-1);
    min-height: 1.8rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cf-result-label.show { opacity: 1; transform: translateY(0); }

.cf-stake-echo {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cf-gold-1);
    margin-top: 0.2rem;
    min-height: 1.2rem;
}

/* ── 최근 기록 스트립 ── */
.cf-history-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.4rem;
}

.cf-history-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    animation: cfChipIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cfChipIn {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cf-history-chip.cf-h {
    background: linear-gradient(135deg, var(--cf-gold-1), var(--cf-gold-2));
    color: var(--cf-ink);
}

.cf-history-chip.cf-t {
    background: linear-gradient(135deg, var(--cf-silver-1), var(--cf-silver-2));
    color: #2a2e35;
}

.cf-history-empty {
    color: rgba(245, 234, 208, 0.4);
    font-size: 0.85rem;
}

/* ── 공유 결과 박스 ── */
.coin-container .ticket-stub {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(217, 169, 32, 0.35);
}

.share-link-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.share-link-row .share-link-input { flex: 1; min-width: 200px; }

/* ── 공유 보기 화면 전용 ── */
.cf-view-stake {
    text-align: center;
    color: rgba(245, 234, 208, 0.75);
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

/* ── 내가 던진 기록 ── */
.cf-my-games-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cf-my-game-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    text-decoration: none;
    color: var(--cf-cream);
    font-size: 0.85rem;
    font-weight: 600;
}

.cf-my-game-item:hover { border-color: rgba(217, 169, 32, 0.4); background: rgba(255,255,255,0.07); }
.cf-my-game-arrow { margin-left: auto; color: var(--cf-gold-1); font-weight: 700; }

/* ── 모션 최소화 선호 시 애니메이션 단축 (접근성) ── */
@media (prefers-reduced-motion: reduce) {
    .cf-coin.cf-toss-head,
    .cf-coin.cf-toss-tail,
    .cf-shadow.cf-tossing {
        animation-duration: 0.35s;
    }
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    .coin-container .page-header h1 { font-size: 1.9rem; }
    .cf-coin-wrap { width: 132px; height: 132px; margin-bottom: 1rem; }
    .cf-face { font-size: 2rem; }
    .share-link-row { flex-direction: column; }
    .cf-history-chip { width: 30px; height: 30px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .coin-container .page-header h1 { font-size: 1.55rem; }
    .cf-eyebrow { font-size: 0.65rem; }
    .cf-coin-wrap { width: 112px; height: 112px; }
    .cf-face { font-size: 1.7rem; }
    .cf-result-label { font-size: 1.1rem; }
    /* 내기 입력 + 던지기 버튼을 한 손 조작 영역에 맞게 여백 최적화 */
    .coin-container .tool-section.card { padding: 1.1rem; }
    .cf-my-game-item { flex-wrap: wrap; }
}