/* ───────────────────────────────────────────────────────────────
   cribbage.css : クリベッジ
   scope: .game-cribbage
   ─────────────────────────────────────────────────────────────── */

.game-cribbage {
    --cb-green: #2d5a27;
    --cb-felt: #3a7a32;
    --cb-card-bg: #fff;
    --cb-card-border: #bbb;
    --cb-card-shadow: rgba(0, 0, 0, 0.25);
    --cb-red: #c0392b;
    --cb-selected: #f1c40f;
    --cb-clickable: #3498db;
}

.game-cribbage .cribbage-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
    padding: 12px;
}

/* ── Score bar ── */
.game-cribbage .score-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.game-cribbage .score-chip {
    display: flex;
    gap: 6px;
    background: var(--cb-green);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
}

.game-cribbage .score-label {
    opacity: 0.8;
}

.game-cribbage .score-value {
    font-weight: bold;
}

/* ── Phase label ── */
.game-cribbage .phase-label {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--cb-green);
}

/* ── Opp info ── */
.game-cribbage .opp-info {
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ── Starter ── */
.game-cribbage .starter-area {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.game-cribbage .starter-label {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ── Card ── */
.game-cribbage .card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 76px;
    background: var(--cb-card-bg);
    border: 2px solid var(--cb-card-border);
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--cb-card-shadow);
    cursor: default;
    user-select: none;
    transition: transform 0.12s, box-shadow 0.12s;
}

.game-cribbage .card.red .card-rank,
.game-cribbage .card.red .card-suit {
    color: var(--cb-red);
}

.game-cribbage .card.selected {
    border-color: var(--cb-selected);
    box-shadow: 0 0 0 3px var(--cb-selected);
    transform: translateY(-6px);
}

.game-cribbage .card.clickable {
    cursor: pointer;
    border-color: var(--cb-clickable);
}

.game-cribbage .card.clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.game-cribbage .card-rank {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
}

.game-cribbage .card-suit {
    font-size: 1.2rem;
    line-height: 1;
}

/* ── Hand area ── */
.game-cribbage .hand-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.game-cribbage .hand-label {
    font-size: 0.8rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-cribbage .card-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.game-cribbage .hint {
    font-size: 0.85rem;
    opacity: 0.7;
    font-style: italic;
    margin: 0;
}

/* ── Pegging area ── */
.game-cribbage .pegging-area {
    background: rgba(45, 90, 39, 0.08);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.game-cribbage .pegging-area p {
    font-size: 0.9rem;
    margin: 0 0 8px;
}

.game-cribbage .peg-row {
    justify-content: center;
}

/* ── Last score / show ── */
.game-cribbage .last-score {
    text-align: center;
    padding: 6px 12px;
    background: rgba(241, 196, 15, 0.15);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.game-cribbage .last-show {
    background: rgba(45, 90, 39, 0.06);
    border-radius: 8px;
    padding: 10px;
}

.game-cribbage .show-title {
    font-weight: 600;
    margin: 0 0 6px;
}

.game-cribbage .last-show ul {
    margin: 0 0 8px;
    padding-left: 16px;
    font-size: 0.85rem;
}

.game-cribbage .show-cards {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Action bar ── */
.game-cribbage .action-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Resign dialog ── */
.game-cribbage .resign-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 100;
}

.game-cribbage .resign-dialog p {
    color: #fff;
    font-size: 1.1rem;
}

/* ── Error message ── */
.game-cribbage .error-msg {
    text-align: center;
    color: var(--cb-red);
    font-size: 0.9rem;
}

/* ── Waiting ── */
.game-cribbage .waiting {
    text-align: center;
    opacity: 0.6;
    font-style: italic;
}