/* ── Board ──────────────────────────────────────────────── */
#board {
    width: 520px;
    height: 520px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: 3px solid #ffd36b;
    box-shadow: 0 0 24px rgba(201,169,92,0.35);
    border-radius: 4px;
    overflow: hidden;
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.12s ease;
}

.cell.white { background: #f0d9b5; }
.cell.black { background: #b58863; }

.cell:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.cell.selected {
    outline: 3px solid rgba(255, 211, 107, 0.95);
    outline-offset: -3px;
}

.fixed-cell {
    width: 65px;
    height: 65px;
    box-sizing: border-box;
}

/* ── Pieces ─────────────────────────────────────────────── */
.piece {
    user-select: none;
    background: none !important;
    transition: transform 0.2s ease;
    font-variant-emoji: text;
    font-family: "Segoe UI Symbol", "Noto Chess", "DejaVu Sans", serif;
}

.piece.white {
    color: #ffffff;
    text-shadow: 0 0 3px #000;
}

.piece.black {
    color: #111111;
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.5);
    text-shadow: 0 0 3px rgba(255,255,255,0.3);
}

/* ── Room input ─────────────────────────────────────────── */
.room-input {
    background: rgba(255,255,255,0.08);
    border: 2px solid #c9a95c;
    border-radius: 8px;
    color: #f2e9d9;
    padding: 8px 14px;
    font-size: 0.95rem;
    outline: none;
    width: 200px;
}

.room-input::placeholder { color: rgba(242,233,217,0.45); }
.room-input:focus        { border-color: #ffd36b; box-shadow: 0 0 0 3px rgba(255,211,107,0.2); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-game {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-game:hover { transform: translateY(-2px); opacity: 0.88; }

.btn-create { background: #c9a95c; color: #2e1a19; }
.btn-join   { background: #6b3e3a; color: #f2e9d9; border: 1px solid #c9a95c; }

/* ── Promotion menu ─────────────────────────────────────── */
.promotion-menu button {
    font-size: 32px;
    padding: 6px 14px;
    margin: 4px;
    cursor: pointer;
    border: 2px solid #c9a95c;
    background: #3d1e1f;
    color: #f2e9d9;
    border-radius: 8px;
    transition: background 0.2s, transform 0.15s;
}

.promotion-menu button:hover {
    background: #6b3e3a;
    transform: scale(1.1);
}