/* ───────────────────────────────────────────────────────────────
   dots_and_boxes.css : ドッツ & ボックス（5x5の点 → 4x4のボックス）
   scope: .game-dab
   ボードは grid_size = 9x9（dot/edge/dot/edge/...）の擬似グリッド。
   ─────────────────────────────────────────────────────────────── */

.game-dab {
    --dab-box: clamp(48px, 13vmin, 72px);
    --dab-edge: clamp(10px, 2.6vmin, 14px);
    --dab-dot: clamp(8px, 2.2vmin, 12px);

    --dab-p1: var(--p1-strong);
    --dab-p2: var(--p2-strong);
    --dab-p1-bg: var(--p1-soft);
    --dab-p2-bg: var(--p2-soft);
    --dab-drawn: #475569;
    --dab-edge-hover: #94a3b8;
}

.game-dab.dab-room {
    align-items: center;
}

/* スコアパネル */
.game-dab .dab-scores {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.game-dab .dab-score {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--sh-sm);
}
.game-dab .dab-score.p1 {
    background: var(--dab-p1-bg);
    color: var(--dab-p1);
}
.game-dab .dab-score.p2 {
    background: var(--dab-p2-bg);
    color: var(--dab-p2);
}

.game-dab .dab-score-label {
    font-size: 0.85rem;
    opacity: 0.78;
}

.game-dab .dab-score-value {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

/* 盤本体（grid_size = (dots_per_side*2-1) = 9 列 × 9 行） */
.game-dab .dab-board {
    display: grid;
    grid-template-columns: repeat(9, auto);
    grid-template-rows: repeat(9, auto);
    gap: 0;
    align-self: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px;
    user-select: none;
    box-shadow: var(--sh-sm);
}

/* ドット */
.game-dab .dab-dot {
    width: var(--dab-dot);
    height: var(--dab-dot);
    border-radius: 50%;
    background: #334155;
    align-self: center;
    justify-self: center;
}

/* 横エッジ */
.game-dab .dab-edge.horizontal {
    width: var(--dab-box);
    height: var(--dab-edge);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 縦エッジ */
.game-dab .dab-edge.vertical {
    width: var(--dab-edge);
    height: var(--dab-box);
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-dab .dab-edge-line {
    border-radius: 3px;
    background: transparent;
    transition: background 0.15s ease;
}

.game-dab .dab-edge.horizontal .dab-edge-line {
    width: 100%;
    height: 4px;
}

.game-dab .dab-edge.vertical .dab-edge-line {
    width: 4px;
    height: 100%;
}

.game-dab .dab-edge.drawn .dab-edge-line {
    background: var(--dab-drawn);
}

.game-dab .dab-edge.clickable {
    cursor: pointer;
}

.game-dab .dab-edge.clickable:hover .dab-edge-line {
    background: var(--dab-edge-hover);
}

/* ボックス */
.game-dab .dab-box {
    width: var(--dab-box);
    height: var(--dab-box);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    border-radius: 4px;
}

.game-dab .dab-box.empty {
    background: transparent;
}

.game-dab .dab-box.p1 {
    background: var(--dab-p1-bg);
    animation: dab-claim 0.3s var(--ease-pop);
}

.game-dab .dab-box.p2 {
    background: var(--dab-p2-bg);
    animation: dab-claim 0.3s var(--ease-pop);
}

@keyframes dab-claim {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.game-dab .dab-box-mark {
    font-size: 1rem;
    font-weight: 800;
}

.game-dab .dab-box.p1 .dab-box-mark {
    color: var(--dab-p1);
}
.game-dab .dab-box.p2 .dab-box-mark {
    color: var(--dab-p2);
}

.game-dab .dab-final-score {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin: 0.25rem 0 0.75rem;
    text-align: center;
}