/* ================================================================
   GAME ROOM — Responsive CSS (Mobile + Desktop)
   ================================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
    --board-size-lg: min(480px, calc(100vw - 380px));  /* desktop: trừ side-panel + gaps */
    --board-size-sm: min(420px, calc(100vw - 28px));   /* mobile: trừ padding game-room 12px×2 + 4px dư */
}

/* Game Room overrides body padding */
body:has(.game-room) {
    padding: 0;
}

/* ── Base layout ──────────────────────────────────────────── */
.game-room {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 12px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* ── Top bar ──────────────────────────────────────────────── */
.room-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    box-shadow: var(--shadow);
    min-height: 52px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.room-back {
    font-size: 18px;
    text-decoration: none;
    color: var(--text);
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    transition: background var(--transition);
}
.room-back:hover { background: var(--border); }

.room-info {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.room-id-label {
    font-size: 11px;
    color: var(--text-secondary);
    display: none; /* ẩn trên mobile */
}
.room-id-btn {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    min-height: 36px;
    cursor: pointer;
    color: var(--text);
    font-family: monospace;
    transition: background var(--transition);
}
.room-id-btn:hover { background: var(--border); }

.room-players {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
}
.player-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.player-badge.white { border-color: #ccc; }
.player-badge.black { border-color: #555; background: #222; color: #fff; }
.dark .player-badge.black { background: #111; border-color: #666; }

/* Dark toggle trong topbar */
.room-topbar .dark-toggle {
    position: static;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition);
}
.room-topbar .dark-toggle:hover { background: var(--bg); }

/* ── Status bar ───────────────────────────────────────────── */
.room-status {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: all var(--transition);
}
.room-status.your-turn  { background: rgba(52,199,89,0.15); color: #1a7f37; }
.dark .room-status.your-turn { color: #34c759; background: rgba(52,199,89,0.12); }
.room-status.waiting    { color: var(--text-secondary); }
.room-status.win        { background: rgba(52,199,89,0.2); color: #1a7f37; }
.dark .room-status.win  { color: #34c759; }
.room-status.lose       { background: rgba(255,59,48,0.1); color: var(--error); }
.room-status.draw       { background: rgba(255,149,0,0.12); color: #b35900; }
.dark .room-status.draw { color: #ff9500; }
.room-status.error      { background: rgba(255,59,48,0.1); color: var(--error); }

/* ── Main layout — desktop side by side ──────────────────── */
.room-layout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* ── Board section ────────────────────────────────────────── */
.board-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.board-actions {
    display: flex;
    gap: 8px;
}
.board-actions .btn-secondary {
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
}

/* ── Side panel ───────────────────────────────────────────── */
.side-panel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Panel input ──────────────────────────────────────────── */
.panel-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    font-family: inherit;
    min-height: 44px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.panel-input::placeholder { color: var(--text-secondary); }
.panel-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}
.dark .panel-input { background: #1c1c1e; }

/* ── Music search ─────────────────────────────────────────── */
.music-search-wrap { position: relative; }

.music-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
}
.dark .music-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.music-dropdown::-webkit-scrollbar { width: 4px; }
.music-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.music-dd-loading {
    padding: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}
.music-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    min-height: 52px;
}
.music-dd-item:last-child { border-bottom: none; }
.music-dd-item:hover { background: rgba(0,113,227,0.07); }
.music-dd-thumb {
    width: 48px; height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--border);
}
.music-dd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.music-dd-title {
    font-size: 13px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-dd-channel {
    font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Music controls ───────────────────────────────────────── */
.music-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.music-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    min-width: 44px; min-height: 44px;
    width: 44px; height: 44px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition);
}
.music-btn:hover { background: var(--accent-hover); }
.music-title {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Chat ─────────────────────────────────────────────────── */
.chat-panel { flex: 1; }
.chat-messages {
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
}
.dark .chat-messages { background: #1c1c1e; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.chat-msg {
    display: flex;
    gap: 5px;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.4;
}
.chat-name { font-weight: 700; color: var(--accent); flex-shrink: 0; font-size: 13px; }
.chat-text { color: var(--text); flex: 1; word-break: break-word; font-size: 13px; }
.chat-time { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }

/* ── Name modal ───────────────────────────────────────────── */
.name-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.name-modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: fadeUp 0.25s ease;
}
.name-modal-title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.name-modal-box input {
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    text-align: center;
    font-family: inherit;
    min-height: 48px;
}
.name-modal-box input:focus { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   BOARDS
   ═══════════════════════════════════════════════════════════ */

/* ── Caro 15×15 ───────────────────────────────────────────── */
.caro-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 0;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    width: var(--board-size-sm);
    aspect-ratio: 1;
    touch-action: manipulation;
}
.caro-cell {
    background: var(--surface);
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(12px, 2.8vw, 22px);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
    border: 1px solid var(--border);
    box-sizing: border-box;
}
.caro-cell:hover { background: rgba(0,113,227,0.08); }
.caro-cell.caro-x { color: #0071E3; cursor: default; }
.caro-cell.caro-o { color: #FF3B30; cursor: default; }

/* ── Chess 8×8 ────────────────────────────────────────────── */
.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: 2px solid #7a5c2e;
    border-radius: 6px;
    overflow: hidden;
    width: var(--board-size-sm);
    aspect-ratio: 1;
    touch-action: manipulation;
}
.chess-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding: 4%;
}
.chess-cell.light { background: #F0D9B5; }
.chess-cell.dark  { background: #B58863; }
.chess-cell.selected { outline: 3px solid #FFD700; outline-offset: -3px; background: rgba(255,215,0,0.35) !important; }
.chess-cell:hover:not(.selected) { filter: brightness(1.08); }
.chess-piece-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* ── Xiangqi 9×10 — intersection-based board ──────────────── */
.xiangqi-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Container ngoài: giới hạn width */
.xiangqi-board-wrap {
    width: var(--board-size-sm);
    aspect-ratio: 9/10;
    position: relative;
    touch-action: manipulation;
    background: #f0c060;
    border: 3px solid #7a5c2e;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

/* SVG đường kẻ phủ toàn bộ */
.xiangqi-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Grid ô click — 9×10 ô, mỗi ô là 1 giao điểm */
.xiangqi-board {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

/* Mỗi ô là vùng click xung quanh giao điểm */
.xiangqi-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    z-index: 2;
}
.xiangqi-cell:hover::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: rgba(255,215,0,0.25);
    pointer-events: none;
}

/* Quân cờ */
.xq-piece {
    width: 78%;
    height: 78%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(9px, 2vw, 16px);
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    transition: transform 0.1s;
    pointer-events: none;
}
.xq-red   { background: radial-gradient(circle at 35% 30%, #fff8f0, #fde8d8); border: 2px solid #cc2200; color: #cc2200; box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8); }
.xq-black { background: radial-gradient(circle at 35% 30%, #f0f0f0, #d0d0d0); border: 2px solid #222;    color: #111;    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6); }
.xiangqi-cell.selected .xq-piece { box-shadow: 0 0 0 3px #FFD700, 0 2px 8px rgba(0,0,0,0.4); transform: scale(1.1); }
.xiangqi-cell.selected.xq-red-cell .xq-piece  { border-color: #FFD700; }
.xiangqi-cell.selected.xq-black-cell .xq-piece { border-color: #FFD700; }

/* ── Checkers 8×8 ─────────────────────────────────────────── */
.checkers-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: 2px solid #7a5c2e;
    border-radius: 6px;
    overflow: hidden;
    width: var(--board-size-sm);
    aspect-ratio: 1;
    touch-action: manipulation;
}
.checkers-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
}
.dk-light { background: #F0D9B5; }
.dk-dark  { background: #B58863; }
.checkers-cell.selected { outline: 3px solid #FFD700; outline-offset: -3px; z-index: 1; }

.checkers-piece {
    width: 75%; height: 75%;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(12px, 3vw, 20px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform var(--transition);
}
.checkers-piece:hover { transform: scale(1.05); }
.ck-white { background: radial-gradient(circle at 35% 35%, #fff, #ddd); color: #555; border: 2px solid #bbb; }
.ck-black { background: radial-gradient(circle at 35% 35%, #555, #111); color: #FFD700; border: 2px solid #333; }
.ck-king  { border-color: #FFD700; }

/* ── Go 19×19 ─────────────────────────────────────────────── */
.go-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.go-board {
    display: grid;
    grid-template-columns: repeat(19, 1fr);
    background: #dcb468;
    border: 3px solid #8b6914;
    border-radius: 4px;
    width: var(--board-size-sm);
    aspect-ratio: 1;
    padding: 8px;
    position: relative;
    touch-action: manipulation;
}
.go-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.go-cell::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0; height: 1px;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
.go-cell::after {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0; width: 1px;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
.go-black::before, .go-black::after,
.go-white::before, .go-white::after { display: none; }

.go-black, .go-white {
    border-radius: 50%;
    width: 82%; height: 82%;
    z-index: 2;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
}
.go-black { background: radial-gradient(circle at 35% 35%, #555, #000); }
.go-white { background: radial-gradient(circle at 35% 35%, #fff, #ccc); border: 1px solid #999; }

.go-cell:not(.go-black):not(.go-white):hover::before,
.go-cell:not(.go-black):not(.go-white):hover::after { display: none; }
.go-cell:not(.go-black):not(.go-white):hover {
    background: rgba(0,0,0,0.18);
    border-radius: 50%;
    width: 60%; height: 60%;
    margin: auto;
}

.go-captures {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   LUDO — Cờ Cá Ngựa  (redesign v2)
   Palette ấm, thân thiện, Việt Nam-style
   ═══════════════════════════════════════════════════════════ */

/* ── Palette ──────────────────────────────────────────────── */
:root {
    /* 4 màu team — tươi nhưng không chói */
    --lr: #D63031;   /* đỏ ấm */
    --lb: #0984E3;   /* xanh dương rõ */
    --lg: #00A86B;   /* xanh lá tươi */
    --ly: #F0A500;   /* vàng đất, dễ nhìn */

    /* tông nhạt cho home area */
    --lr-pale: #FFEAEA;
    --lb-pale: #E3F2FD;
    --lg-pale: #E8F8F2;
    --ly-pale: #FFF8E1;

    /* tông vừa cho home column */
    --lr-mid: #FFCDD2;
    --lb-mid: #BBDEFB;
    --lg-mid: #C8F0E0;
    --ly-mid: #FFE9A0;

    /* nền bàn cờ */
    --ludo-board-bg: #F5F0E8;   /* trắng ngà ấm */
    --ludo-track-bg: #FDFCF8;
    --ludo-track-border: #DDD8CE;
    --ludo-empty-bg: #EDE8DF;
}

/* ── Wrapper tổng ─────────────────────────────────────────── */
.ludo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* ── Bàn cờ 15×15 ─────────────────────────────────────────── */
.ludo-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    width: var(--board-size-sm);
    aspect-ratio: 1;
    /* Viền ngoài — tạo cảm giác khung gỗ */
    border: 4px solid #8B7355;
    outline: 2px solid #C4A882;
    outline-offset: -1px;
    border-radius: 12px;
    overflow: hidden;
    touch-action: manipulation;
    background: var(--ludo-board-bg);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.18),
        0 2px 8px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ── Cell base ────────────────────────────────────────────── */
.ludo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1px;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

/* ── Ô trắng ngà — track thường ──────────────────────────── */
.ludo-cell.track {
    background: var(--ludo-track-bg);
    box-shadow: inset 0 0 0 0.5px var(--ludo-track-border);
}
/* Track trong home area: tô màu nhạt của home để track "hoà" vào home */
.ludo-cell.home-red.track    { background: rgba(255,255,255,0.28); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.4); }
.ludo-cell.home-blue.track   { background: rgba(255,255,255,0.28); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.4); }
.ludo-cell.home-green.track  { background: rgba(255,255,255,0.28); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.4); }
.ludo-cell.home-yellow.track { background: rgba(255,255,255,0.28); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.4); }

/* ── Ô safe — ngôi sao nhỏ ───────────────────────────────── */
.ludo-cell.safe-star {
    background: var(--ludo-track-bg);
    box-shadow: inset 0 0 0 0.5px var(--ludo-track-border);
}
.ludo-cell.safe-star::after {
    content: "★";
    position: absolute;
    font-size: 52%;
    color: #C8A000;
    pointer-events: none;
    line-height: 1;
    opacity: 0.85;
}

/* ── Entry squares (ô xuất phát) ─────────────────────────── */
.ludo-cell.entry-red    { background: #FFAAAA; box-shadow: inset 0 0 0 0.5px #E08888; }
.ludo-cell.entry-blue   { background: #99CCFF; box-shadow: inset 0 0 0 0.5px #77AADD; }
.ludo-cell.entry-green  { background: #88DDAA; box-shadow: inset 0 0 0 0.5px #66BB88; }
.ludo-cell.entry-yellow { background: #FFE066; box-shadow: inset 0 0 0 0.5px #DDB844; }

/* ── Home columns — đường về (màu nhạt, gradient nhẹ) ─────── */
.ludo-cell.home-col-red {
    background: linear-gradient(var(--lr-mid), #FFAAAA);
    box-shadow: inset 0 0 0 0.5px #FFAAAA;
}
.ludo-cell.home-col-blue {
    background: linear-gradient(var(--lb-mid), #99CCFF);
    box-shadow: inset 0 0 0 0.5px #99CCFF;
}
.ludo-cell.home-col-green {
    background: linear-gradient(var(--lg-mid), #88DDAA);
    box-shadow: inset 0 0 0 0.5px #88DDAA;
}
.ludo-cell.home-col-yellow {
    background: linear-gradient(var(--ly-mid), #FFE066);
    box-shadow: inset 0 0 0 0.5px #FFE066;
}

/* ── Empty — góc ngoài bàn ────────────────────────────────── */
.ludo-cell.empty { background: var(--ludo-empty-bg); }

/* ── Home areas — 4 góc màu đặc ─────────────────────────── */
/* Gradient nhẹ từ màu chính → sáng hơn 1 chút để có depth */
.ludo-cell.home-red    { background: var(--lr); border: none; }
.ludo-cell.home-blue   { background: var(--lb); border: none; }
.ludo-cell.home-green  { background: var(--lg); border: none; }
.ludo-cell.home-yellow { background: var(--ly); border: none; }

/* Các ô bên trong home — tối nhẹ ở cạnh để tạo cảm giác depth */
.ludo-cell.home-red.home-slot,
.ludo-cell.home-blue.home-slot,
.ludo-cell.home-green.home-slot,
.ludo-cell.home-yellow.home-slot {
    /* vòng tròn trắng mờ bao quanh quân */
}
/* Vòng tròn slot — nền đặt quân trong chuồng */
.ludo-cell.home-slot::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 2.5px solid rgba(255,255,255,0.55);
    pointer-events: none;
    z-index: 0;
}

/* ── Center 3×3 — hình tam giác 4 màu hướng vào giữa ──────── */
/* Mỗi ô center dùng clip-path hoặc gradient tạo hình tam giác */
.ludo-cell.center {
    background: var(--ludo-board-bg);
    box-shadow: inset 0 0 0 0.5px var(--ludo-track-border);
}

/* Ô [7,7] — điểm đích (ngôi sao) */
.ludo-cell.center-core {
    background: #FFFDE7;
    box-shadow: none;
}
.ludo-cell.center-core::after {
    content: "★";
    font-size: 88%;
    color: #F0A500;
    text-shadow: 0 1px 4px rgba(240,165,0,0.5);
    line-height: 1;
}

/* 8 ô xung quanh — tam giác màu hướng vào core [7,7] */
/* Góc: màu đặc ở góc gần home → gradient về phía center */
.ludo-cell.center-yellow-tl  { background: linear-gradient(to bottom right, var(--ly) 50%, var(--ludo-board-bg) 50%); } /* [6,6] TL */
.ludo-cell.center-blue-tr    { background: linear-gradient(to bottom left,  var(--lb) 50%, var(--ludo-board-bg) 50%); } /* [6,8] TR */
.ludo-cell.center-red-bl     { background: linear-gradient(to top right,    var(--lr) 50%, var(--ludo-board-bg) 50%); } /* [8,6] BL */
.ludo-cell.center-green-br   { background: linear-gradient(to top left,     var(--lg) 50%, var(--ludo-board-bg) 50%); } /* [8,8] BR */
/* Cạnh: nửa màu hướng vào core */
.ludo-cell.center-yellow-t   { background: linear-gradient(to bottom, var(--ly) 50%, var(--ludo-board-bg) 50%); }       /* [6,7] top */
.ludo-cell.center-red-l      { background: linear-gradient(to right,  var(--lr) 50%, var(--ludo-board-bg) 50%); }       /* [7,6] left */
.ludo-cell.center-green-r    { background: linear-gradient(to left,   var(--lg) 50%, var(--ludo-board-bg) 50%); }       /* [7,8] right */
.ludo-cell.center-green-b    { background: linear-gradient(to top,    var(--lg) 50%, var(--ludo-board-bg) 50%); }       /* [8,7] bottom */
/* Fallback aliases (backwards compat) */
.ludo-cell.center-red    { background: linear-gradient(to top right,    var(--lr) 50%, var(--ludo-board-bg) 50%); }
.ludo-cell.center-blue   { background: linear-gradient(to bottom left,  var(--lb) 50%, var(--ludo-board-bg) 50%); }
.ludo-cell.center-green  { background: linear-gradient(to top left,     var(--lg) 50%, var(--ludo-board-bg) 50%); }
.ludo-cell.center-yellow { background: linear-gradient(to bottom right, var(--ly) 50%, var(--ludo-board-bg) 50%); }

/* ── Quân cờ — token tròn với icon cá ngựa ───────────────── */
.ludo-pawn {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    flex-shrink: 0;
    user-select: none;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
/* Icon cá ngựa bên trong quân — dùng span.pawn-icon inject bởi JS */
.ludo-pawn .pawn-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 68%;
    line-height: 1;
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.55));
    pointer-events: none;
    z-index: 3;
    user-select: none;
}
/* Highlight tròn nhỏ trên đỉnh quân — tạo cảm giác 3D bóng loáng */
.ludo-pawn::after {
    content: "";
    position: absolute;
    top: 10%;
    left: 18%;
    width: 28%;
    height: 18%;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    pointer-events: none;
    z-index: 4;
}

/* Kích thước theo số quân trong ô */
.ludo-cell:has(.ludo-pawn:only-child)   .ludo-pawn { width: 74%; height: 74%; }
.ludo-cell:has(.ludo-pawn:nth-child(2)) .ludo-pawn { width: 46%; height: 46%; }
.ludo-cell:has(.ludo-pawn:nth-child(3)) .ludo-pawn { width: 34%; height: 34%; }
.ludo-cell:has(.ludo-pawn:nth-child(4)) .ludo-pawn { width: 30%; height: 30%; }
/* Icon scale theo cell — cell = board/15 ~ 28px(mobile)..32px(desktop) */
.ludo-cell:has(.ludo-pawn:only-child)   .pawn-icon { font-size: clamp(10px, 1.8vw, 18px); }
.ludo-cell:has(.ludo-pawn:nth-child(2)) .pawn-icon { font-size: clamp( 7px, 1.1vw, 12px); }
.ludo-cell:has(.ludo-pawn:nth-child(3)) .pawn-icon { font-size: clamp( 6px, 0.9vw, 10px); }
.ludo-cell:has(.ludo-pawn:nth-child(4)) .pawn-icon { font-size: clamp( 5px, 0.8vw,  9px); }

/* Màu quân */
.ludo-pawn.red {
    background: radial-gradient(circle at 40% 35%, #FF6B6B, #C0392B);
    border: 2px solid #922B21;
    box-shadow: 0 2px 6px rgba(192,57,43,0.55), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ludo-pawn.blue {
    background: radial-gradient(circle at 40% 35%, #5DADE2, #1A5276);
    border: 2px solid #154360;
    box-shadow: 0 2px 6px rgba(26,82,118,0.55), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ludo-pawn.green {
    background: radial-gradient(circle at 40% 35%, #52BE80, #1D6A3A);
    border: 2px solid #145A32;
    box-shadow: 0 2px 6px rgba(29,106,58,0.55), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ludo-pawn.yellow {
    background: radial-gradient(circle at 40% 35%, #F9E04B, #D4A017);
    border: 2px solid #9A7D0A;
    box-shadow: 0 2px 6px rgba(212,160,23,0.55), inset 0 -2px 3px rgba(0,0,0,0.25);
}

/* Quân trong chuồng — mờ, nhỏ hơn 1 chút */
.ludo-pawn.in-base {
    opacity: 0.82;
}
/* Quân trong chuồng — hover để biết có thể chọn */
.ludo-pawn.in-base:hover { transform: scale(1.08); }

/* Quân được chọn / có thể di chuyển — pulse vàng */
.ludo-pawn.selectable {
    transform: scale(1.18) translateY(-8%);
    cursor: pointer;
    animation: ludoPawnPulse 0.85s ease-in-out infinite alternate;
}
@keyframes ludoPawnPulse {
    from {
        box-shadow: 0 0 0 2.5px #F9CA24, 0 4px 12px rgba(249,202,36,0.5),
                    inset 0 -2px 3px rgba(0,0,0,0.25);
    }
    to {
        box-shadow: 0 0 0 4px #F9CA24, 0 6px 18px rgba(249,202,36,0.75),
                    inset 0 -2px 3px rgba(0,0,0,0.25);
    }
}

/* ── Controls bar ─────────────────────────────────────────── */
.ludo-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

/* Khu vực xúc xắc + nút tung */
.ludo-dice-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Xúc xắc lớn, trông như xúc xắc thật */
.ludo-dice {
    width: 58px; height: 58px;
    background: #fff;
    border: 2px solid #DDD;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -2px 4px rgba(0,0,0,0.06);
    transition: transform 0.1s;
    user-select: none;
    cursor: default;
}
.dark .ludo-dice { background: #2c2c2e; border-color: #444; }

.ludo-dice.rolling {
    animation: ludoDiceRoll 0.45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes ludoDiceRoll {
    0%   { transform: rotate(0deg)   scale(1);    }
    15%  { transform: rotate(-28deg) scale(1.25); }
    40%  { transform: rotate(22deg)  scale(1.2);  }
    65%  { transform: rotate(-14deg) scale(1.12); }
    85%  { transform: rotate(8deg)   scale(1.05); }
    100% { transform: rotate(0deg)   scale(1);    }
}

/* Nút Tung xúc xắc */
.btn-ludo-roll {
    padding: 11px 26px;
    background: linear-gradient(135deg, #0984E3, #0066CC);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    min-height: 46px;
    box-shadow: 0 3px 10px rgba(9,132,227,0.4), 0 1px 0 rgba(255,255,255,0.15) inset;
    letter-spacing: 0.2px;
}
.btn-ludo-roll:hover:not(:disabled) { opacity: 0.9; transform: translateY(-2px); }
.btn-ludo-roll:active:not(:disabled) { transform: translateY(0); }
.btn-ludo-roll:disabled {
    background: var(--border);
    color: var(--text-secondary);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* Nút Bắt đầu — chủ phòng */
.btn-ludo-start {
    padding: 12px 32px;
    background: linear-gradient(135deg, #00B894, #00A381);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    min-height: 48px;
    box-shadow: 0 4px 14px rgba(0,184,148,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
    letter-spacing: 0.3px;
}
.btn-ludo-start:hover { opacity: 0.92; transform: translateY(-2px); }
.btn-ludo-start:active { transform: translateY(0); }

/* Text chờ phòng */
.ludo-waiting-info {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

/* ── Player badges ────────────────────────────────────────── */
.ludo-players {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 2px 0;
}

.ludo-player-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 8px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid transparent;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1;
}

/* Lượt hiện tại — viền vàng nhẹ + glow */
.ludo-player-badge.active {
    border-color: #F9CA24;
    box-shadow: 0 0 0 3px rgba(249,202,36,0.22), var(--shadow);
}

/* Avatar màu tròn */
.ludo-player-badge .dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.dot-red    { background: radial-gradient(circle at 40% 35%, #FF6B6B, #C0392B); }
.dot-blue   { background: radial-gradient(circle at 40% 35%, #5DADE2, #1A5276); }
.dot-green  { background: radial-gradient(circle at 40% 35%, #52BE80, #1D6A3A); }
.dot-yellow { background: radial-gradient(circle at 40% 35%, #F9E04B, #D4A017); color: #5A3E00; }

/* Crown icon cho host */
.ludo-crown { font-size: 11px; margin-left: 2px; opacity: 0.85; }

/* Indicator lượt hiện tại — tam giác nhỏ hoặc spinner */
.ludo-player-badge.active::before {
    content: "▶";
    font-size: 9px;
    color: #F9CA24;
    margin-right: -2px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 760px) {
    .ludo-board { width: var(--board-size-lg); }
}
@media (max-width: 759px) {
    .ludo-board { width: min(420px, calc(100vw - 28px)); }
    .ludo-controls { padding: 10px 12px; gap: 12px; }
    .ludo-dice { width: 50px; height: 50px; font-size: 28px; }
    .btn-ludo-roll { padding: 10px 20px; font-size: 14px; }
}
@media (max-width: 399px) {
    .ludo-board { width: calc(100vw - 20px); }
    .ludo-player-badge { font-size: 12px; padding: 5px 10px 5px 6px; }
    .ludo-player-badge .dot { width: 20px; height: 20px; font-size: 9px; }
}

/* ── Game type grid (lobby) ──────────────────────────────── */
.game-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
.game-type-grid form { display: contents; }
.game-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 8px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    width: 100%;
    font-family: inherit;
    color: var(--text);
    min-height: 90px;
}
.game-type-card:hover {
    border-color: var(--accent);
    background: rgba(0,113,227,0.04);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.game-type-icon { font-size: 28px; line-height: 1; }
.game-type-name { font-size: 13px; font-weight: 700; }
.game-type-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Desktop >= 760px: side by side, board larger */
@media (min-width: 760px) {
    :root {
        --board-size-lg: min(500px, calc(100vw - 370px));
    }
    .caro-board, .chess-board, .checkers-board, .go-board {
        width: var(--board-size-lg);
    }
    .xiangqi-board-wrap { width: var(--board-size-lg); }
    .caro-cell { font-size: clamp(16px, 3.2vw, 26px); }
    .room-id-label { display: block; }
    .player-badge  { max-width: 160px; }
    .chat-messages { min-height: 160px; max-height: 240px; }
}

/* Mobile < 760px: stack vertically */
@media (max-width: 759px) {
    .room-layout {
        flex-direction: column;
    }
    .side-panel {
        width: 100%;
    }
    /* Topbar: ẩn label, giữ compact */
    .room-topbar { gap: 6px; padding: 6px 10px; }
    .room-players { gap: 4px; }
    .player-badge { font-size: 11px; padding: 4px 8px; max-width: 110px; }
    /* Board: dùng 100% thay vì 100vw để tránh bị cắt bởi padding container */
    .board-section { width: 100%; }
    .caro-board, .chess-board, .checkers-board, .go-board {
        width: 100%;
        max-width: 480px;
    }
    .xiangqi-board-wrap { width: 100%; max-width: 480px; }
    /* Panel nhỏ lại */
    .panel-card { padding: 12px; gap: 8px; }
    .chat-messages { min-height: 100px; max-height: 160px; }
}

/* Small mobile < 400px */
@media (max-width: 399px) {
    .game-room { padding: 8px 8px 32px; }
    .room-topbar { padding: 6px 8px; min-height: 48px; }
    .room-id-btn { font-size: 12px; letter-spacing: 1px; padding: 5px 7px; }
    .caro-board, .chess-board, .checkers-board, .go-board {
        width: 100%;
        max-width: 100%;
    }
    .xiangqi-board-wrap { width: 100%; max-width: 100%; }
    .game-type-grid { grid-template-columns: 1fr 1fr; }
    .game-type-card { padding: 12px 6px; min-height: 80px; }
    .game-type-icon { font-size: 24px; }
    .game-type-name { font-size: 12px; }
    .game-type-desc { display: none; }
}