/**
 * Tango Puzzle Game - Board & Cell CSS
 * 
 * 機能概要:
 * - パズル盤面グリッド (#game-board)
 * - セル要素 (.cell, .cell.locked, クリック時のアクティブ効果)
 * - 太陽と月アイコン (.icon-sun, .icon-moon, Material Symbols Rounded)
 * - 等号/不等号ヒント記号 (.hint, .hint.eq, .hint.diff)
 * - ヒントハイライト表示とパルスアニメーション (.hint-highlight, @keyframes hint-pulse)
 */

#game-board {
    position: relative;
    background: var(--board-bg);
    padding: var(--board-padding);
    border-radius: 16px;
    display: grid;
    gap: var(--gap-size);
    margin: 0 auto;
    user-select: none;
    box-shadow: inset 0 0 0 1px var(--control-border);
    transition: opacity 0.2s;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: var(--cell-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    position: relative;
}

.cell.locked {
    background-color: var(--cell-locked);
    cursor: default;
}

.cell:active:not(.locked) {
    transform: scale(0.95);
}

.material-symbols-rounded {
    font-size: calc(var(--cell-size) * 0.75);
    user-select: none;
    pointer-events: none;
}

.icon-sun { 
    color: var(--sun-color); 
    font-variation-settings: 'FILL' 0, 'wght' 700; 
}

.icon-moon { 
    color: var(--moon-color); 
    font-variation-settings: 'wght' 700; 
}

.hint {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 2;
    pointer-events: none;
    width: var(--gap-size);
    height: var(--gap-size);
}

.hint span {
    font-size: calc(var(--gap-size) * 0.9);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hint.eq {
    color: var(--hint-eq);
}

.hint.diff {
    color: var(--hint-diff);
}

.hint.diff span {
    font-size: calc(var(--gap-size) * 0.95);
    font-weight: 900;
}

/* ヒントハイライト */
.cell.hint-highlight {
    box-shadow: inset 0 0 0 3px var(--accent);
    animation: hint-pulse 1s ease-in-out infinite;
}

@keyframes hint-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@media (max-width: 600px) {
    #game-board {
        --board-padding: 8px;
    }
}