/* Chinese Chess Extension - Modern Game UI */

:root {
    --chess-bg-dark: #1a1a2e;
    --chess-bg-medium: #16213e;
    --chess-bg-light: #0f3460;
    --chess-accent-gold: #e2b714;
    --chess-accent-red: #c0392b;
    --chess-accent-teal: #1abc9c;
    --chess-text: #e8e8e8;
    --chess-text-muted: #8899aa;
    --chess-border: rgba(255, 255, 255, 0.08);
    --chess-glass: rgba(22, 33, 62, 0.7);
    --chess-glass-light: rgba(255, 255, 255, 0.05);
    --chess-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --chess-radius: 12px;
    --chess-radius-sm: 8px;
    --chess-transition: 0.25s ease;
}

/* Lobby */
.chess-lobby {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 1.5em;
}

.chess-lobby h2 {
    color: var(--chess-accent-gold);
    font-size: 1.6em;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-align: center;
}

.chess-create-game {
    background: var(--chess-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--chess-border);
    border-radius: var(--chess-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--chess-shadow);
}

.chess-create-game h3 {
    color: var(--chess-accent-gold);
    font-size: 1.1em;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.chess-create-form .form-group {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chess-create-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.chess-create-form label {
    margin-right: 18px;
    cursor: pointer;
    color: var(--chess-text);
    font-size: 14px;
    transition: color var(--chess-transition);
}

.chess-create-form label:hover {
    color: var(--chess-accent-gold);
}

.chess-create-form select {
    background: var(--chess-bg-dark);
    color: var(--chess-text);
    border: 1px solid var(--chess-border);
    border-radius: var(--chess-radius-sm);
    padding: 6px 12px;
    font-size: 14px;
}

.chess-create-form .button1,
.chess-create-form button[type="submit"] {
    background: linear-gradient(135deg, var(--chess-accent-gold), #c9980a);
    color: #1a1a2e;
    border: none;
    border-radius: var(--chess-radius-sm);
    padding: 10px 28px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--chess-transition);
    box-shadow: 0 4px 15px rgba(226, 183, 20, 0.3);
}

.chess-create-form .button1:hover,
.chess-create-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 183, 20, 0.5);
}

.chess-create-form .button1:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.chess-login-hint {
    font-size: 13px;
    color: #f39c12;
    white-space: nowrap;
}

.chess-login-hint a {
    color: var(--chess-accent-teal);
    text-decoration: underline;
}

/* AI stats link */
.chess-ai-stats-link {
    color: var(--chess-accent-teal);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--chess-transition);
}

.chess-ai-stats-link:hover {
    color: var(--chess-accent-gold);
}

/* Popup overlay */
.chess-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chess-popup {
    background: var(--chess-bg-medium);
    border: 1px solid var(--chess-border);
    border-radius: var(--chess-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chess-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--chess-border);
}

.chess-popup-header h3 {
    margin: 0;
    color: var(--chess-accent-gold);
    font-size: 1.05em;
}

.chess-popup-close {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.chess-popup-close:hover {
    color: #fff;
}

.chess-popup-body {
    padding: 20px;
    overflow-y: auto;
}

.chess-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--chess-radius-sm);
    margin-bottom: 4px;
}

.chess-stats-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.05);
}

.chess-stats-row-level {
    font-weight: 700;
    color: var(--chess-accent-gold);
    min-width: 70px;
}

.chess-stats-row-record {
    font-size: 13px;
    color: #ccc;
}

.chess-stats-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--chess-text);
    margin: 16px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chess-stats-section-title:first-child {
    margin-top: 0;
}

.chess-stat-win { color: #4caf50; font-weight: bold; }
.chess-stat-draw { color: #ff9800; font-weight: bold; }
.chess-stat-loss { color: #f44336; font-weight: bold; }

/* Game list */
.chess-game-list {
    background: var(--chess-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--chess-border);
    border-radius: var(--chess-radius);
    padding: 24px;
    box-shadow: var(--chess-shadow);
}

.chess-game-list h3 {
    color: var(--chess-accent-gold);
    font-size: 1.1em;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Game cards */
.chess-game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.chess-game-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--chess-radius);
    padding: 16px;
    transition: all var(--chess-transition);
}

.chess-game-card:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.chess-game-card-playing {
    border-color: rgba(46, 204, 113, 0.3);
}

.chess-game-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.chess-game-card-time {
    margin-left: auto;
    font-size: 12px;
    color: #95a5a6;
    white-space: nowrap;
}

.chess-game-card-players {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.chess-game-card-player {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.chess-game-card-name {
    color: #f0f0f0;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chess-game-card-waiting {
    color: #95a5a6;
    font-style: italic;
    font-weight: 400;
}

.chess-game-card-vs {
    color: var(--chess-accent-gold);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.chess-side-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chess-side-dot-red {
    background: #e74c3c;
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.5);
}

.chess-side-dot-black {
    background: #2c3e50;
    border: 1px solid #555;
}

.chess-game-card-result {
    font-size: 13px;
    color: #bdc3c7;
    margin-bottom: 10px;
}

.chess-game-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Status badges */
.chess-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.chess-status-waiting {
    background: rgba(230, 126, 34, 0.15);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.chess-status-playing {
    background: rgba(39, 174, 96, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
    animation: chess-glow-green 2s ease-in-out infinite;
}

.chess-status-finished {
    background: rgba(127, 140, 141, 0.15);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.3);
}

@keyframes chess-glow-green {
    0%, 100% { box-shadow: 0 0 4px rgba(46, 204, 113, 0.2); }
    50% { box-shadow: 0 0 12px rgba(46, 204, 113, 0.4); }
}

/* Ranked/Casual badges */
.chess-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.chess-badge-ranked {
    background: rgba(226, 183, 20, 0.15);
    color: var(--chess-accent-gold);
    border: 1px solid rgba(226, 183, 20, 0.3);
}

.chess-badge-casual {
    background: rgba(26, 188, 156, 0.15);
    color: var(--chess-accent-teal);
    border: 1px solid rgba(26, 188, 156, 0.3);
}

/* Buttons */
.chess-game-card .button2,
.chess-lobby .button2 {
    background: linear-gradient(135deg, var(--chess-bg-light), var(--chess-bg-medium));
    color: var(--chess-text);
    border: 1px solid var(--chess-border);
    border-radius: var(--chess-radius-sm);
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--chess-transition);
    text-decoration: none;
    display: inline-block;
    margin: 2px;
}

.chess-game-card .button2:hover,
.chess-lobby .button2:hover {
    background: linear-gradient(135deg, var(--chess-accent-teal), #16a085);
    border-color: var(--chess-accent-teal);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
}

.chess-lobby .join-game-btn {
    background: linear-gradient(135deg, var(--chess-accent-gold), #c9980a);
    color: #1a1a2e;
    border-color: transparent;
}

.chess-lobby .join-game-btn:hover {
    background: linear-gradient(135deg, #f0c929, var(--chess-accent-gold));
    color: #1a1a2e;
}

.chess-lobby p {
    color: var(--chess-text-muted);
    font-style: italic;
}

/* ============================================================
   Game page v2 — recreated from design_handoff_game_page
   (lobby rules above are unchanged)
   ============================================================ */

/* ---- Shared bits kept from the old game page (JS depends on them) ---- */

.chess-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 16, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 10px;
    z-index: 5;
}

.chess-loading-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.chess-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #c8a341;
    border-radius: 50%;
    animation: chess-spin 0.8s linear infinite;
}

@keyframes chess-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.chess-ai-avatar {
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.chess-avatar-placeholder {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--t3, #6b7a92);
}

/* Retract / draw / join dialogs (re-skinned dark) */
.chess-retract-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 100;
}

.chess-retract-dialog-content {
    background: linear-gradient(180deg, #191e25, #12161c);
    border: 1px solid rgba(200, 163, 65, 0.35);
    border-radius: 14px;
    padding: 26px 34px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    max-width: 400px;
}

.chess-retract-dialog-content p {
    color: #e7e3db;
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.6;
}

.chess-retract-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.chess-retract-dialog-buttons .button1,
.chess-retract-dialog-buttons .button2 {
    border-radius: 10px;
    padding: 9px 26px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    display: inline-block;
}

.chess-retract-dialog-buttons .button1 {
    background: #c8a341;
    color: #0d1014;
    border-color: transparent;
}

.chess-retract-dialog-buttons .button2 {
    background: rgba(255, 255, 255, 0.06);
    color: #e7e3db;
}

/* Retract / draw notification toast */
.chess-retract-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 13px 30px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    z-index: 300;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    animation: chess-toast-in 0.3s ease-out;
}

@keyframes chess-toast-in {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.chess-retract-notification.accepted { background: #1f7a52; color: #fff; }
.chess-retract-notification.declined { background: #8f2b22; color: #fff; }

/* Repetition warning overlay */
.chess-repetition-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: chess-fade-in 0.2s ease-out;
}

@keyframes chess-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chess-repetition-popup {
    background: linear-gradient(180deg, #191e25, #12161c);
    border: 1px solid rgba(227, 156, 60, 0.5);
    border-radius: 14px;
    padding: 26px 34px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: chess-popup-in 0.25s ease-out;
}

@keyframes chess-popup-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.chess-repetition-popup-icon { font-size: 38px; margin-bottom: 12px; }

.chess-repetition-popup-msg {
    color: #e7e3db;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 20px;
}

.chess-repetition-popup-btn {
    background: #c8a341;
    color: #0d1014;
    border: none;
    border-radius: 10px;
    padding: 9px 32px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* Game result popup */
.chess-result-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 200;
}

.chess-result-popup-content {
    background: linear-gradient(180deg, #191e25, #12161c);
    border: 1px solid rgba(200, 163, 65, 0.35);
    border-radius: 16px;
    padding: 34px 40px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    max-width: 420px;
    min-width: 300px;
    width: 90%;
    box-sizing: border-box;
    animation: chess-popup-in 0.25s ease-out;
}

.chess-result-icon { font-size: 56px; margin-bottom: 12px; line-height: 1; }

.chess-result-title {
    font-size: 26px;
    font-weight: 800;
    color: #c8a341;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.chess-result-detail {
    font-size: 15px;
    color: #e7e3db;
    margin-bottom: 10px;
    line-height: 1.5;
}

.chess-result-reason {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #e6c25f;
    background: rgba(200, 163, 65, 0.14);
    border: 1px solid rgba(200, 163, 65, 0.3);
    border-radius: 999px;
    padding: 3px 14px;
    margin-bottom: 16px;
}

.chess-result-moves {
    font-size: 13px;
    color: #9aa4b2;
    margin-bottom: 24px;
}

.chess-result-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.chess-result-buttons .button1,
.chess-result-buttons .button2 {
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    display: inline-block;
}

.chess-result-buttons .button1 {
    background: #c8a341;
    color: #0d1014;
    border-color: transparent;
    font-weight: 700;
}

.chess-result-buttons .button2 {
    background: rgba(255, 255, 255, 0.06);
    color: #e7e3db;
}

.chess-result-buttons .button2:hover { background: rgba(255, 255, 255, 0.12); }

/* Game status text set by updateGameStatus() on #gameStatus */
.chess-system-message { display: none; }
.chess-win { color: #e6c25f; }
.chess-lose { color: #e39c93; }
.chess-draw { color: #9aa4b2; }
.chess-ai-thinking { color: #c8a341; }

/* ---- v2 layout ---- */

.cc-shell {
    padding: 16px 0;
    color: #e7e3db;
    box-sizing: border-box;
}

.cc-panel {
    --cc-gold: #c8a341;
    --cc-gold-lt: #e6c25f;
    --cc-red: #b3261e;
    --cc-danger: #e39c93;
    --cc-green: #3fae7a;

    width: 100%;
    box-sizing: border-box;
    /* No padding: #page-body already provides the page inset. Only 夜色 fills a
       background (via --pg); light themes let the forum page show through. */
    background: var(--pg, transparent);
    color: var(--t1, #2b3648);
    font-family: 'Noto Sans SC', Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

.cc-panel a { color: var(--goldT, #8a6d16); text-decoration: none; }
.cc-panel a:hover { color: var(--cc-gold); }

/* 夜色 — the one theme whose chrome goes dark; every other theme uses the
   var() fallbacks above untouched. */
.cc-panel.cc-theme-night {
    --pg: radial-gradient(900px 500px at 50% -20%, #1a2028, #0d1014 72%);
    --pgb: rgba(255, 255, 255, .08);
    --pgs: 0 6px 18px rgba(20, 30, 45, .16);
    --t1: #e7e3db;
    --t2: #9aa4b2;
    --t3: #8b95a3;
    --t4: #5d6673;
    --t5: #4d5561;
    --card: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
    --cardb: rgba(255, 255, 255, .07);
    --div: rgba(255, 255, 255, .06);
    --btn: rgba(255, 255, 255, .05);
    --btnb: rgba(255, 255, 255, .1);
    --btnh: rgba(255, 255, 255, .09);
    --goldT: #c8a341;
    --goldSel: rgba(200, 163, 65, .16);
    --goldSelB: rgba(200, 163, 65, .4);
    --inp: rgba(0, 0, 0, .3);
    --avatar: #1c2129;
    --bub: rgba(255, 255, 255, .06);
    --bpanel: linear-gradient(180deg, #191e25, #12161c);
    --bpanelb: rgba(255, 255, 255, .07);
    --bpanels: 0 24px 60px rgba(0, 0, 0, .45);
    --activeBg: linear-gradient(180deg, rgba(200, 163, 65, .10), rgba(200, 163, 65, .03));
    --activeB: rgba(200, 163, 65, .22);
    --redT: #e0a89c;
    --redB: rgba(179, 38, 30, .45);
    --chipB: rgba(255, 255, 255, .1);
    --dangerBg: rgba(179, 38, 30, .12);
    --dangerB: rgba(179, 38, 30, .35);
    --dangerT: #e39c93;
    --dangerH: rgba(179, 38, 30, .2);
}

/* Main grid */
.cc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 16px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
.cc-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-rail { display: flex; flex-direction: column; gap: 14px; }

/* Player bars */
.cc-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--card, #f7f9fc);
    border: 1px solid var(--cardb, #dde5ee);
}
.cc-bar-self {
    background: var(--activeBg, linear-gradient(180deg, #fdf7e6, #fbf2da));
    border-color: var(--activeB, #e3cf95);
}
.cc-bar-main { min-width: 0; }

.cc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--avatar, #e8eef5);
    border: 1px solid var(--pgb, #cfd8e3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-bar-self .cc-avatar { border-color: var(--btnb, #c6d0dd); }
.cc-panel.cc-theme-night .cc-bar-self .cc-avatar { background: #232a33; }
.cc-avatar img, .cc-avatar .avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.cc-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-name { font-weight: 700; font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.cc-rating {
    font-size: 11px;
    font-weight: 700;
    color: #0d1014;
    background: var(--cc-gold);
    padding: 1px 7px;
    border-radius: 6px;
}
.cc-side-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--t2, #536482);
    border: 1px solid var(--chipB, #c6d0dd);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.cc-side-chip .cc-side-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2b333d;
    border: 1px solid #6b7683;
}
.cc-side-red { color: var(--redT, #a3231b); border-color: var(--redB, #e2b5b0); }
.cc-side-red .cc-side-dot { background: var(--cc-red); border: none; }

.cc-tray {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    min-height: 22px;
    flex-wrap: wrap;
}
.cc-tray-label { font-size: 11px; color: var(--t4, #8e9bb0); }
.cc-cap {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    font-weight: 700;
    font-size: 13px;
}
.cc-cap-red { background: #f0e6d2; border: 1px solid #c9bda3; color: #b3261e; }
.cc-cap-black { background: #e9e4da; border: 1px solid #b9b3a6; color: #1f2933; }

.cc-clock { margin-left: auto; text-align: right; flex-shrink: 0; }
.cc-clock-time {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    color: var(--t4, #8e9bb0);
}
.cc-clock-label { font-size: 11px; color: var(--t4, #8e9bb0); margin-top: 2px; }
.cc-clock.is-active .cc-clock-time { color: var(--t1, #2b3648); }
.cc-bar-self .cc-clock.is-active .cc-clock-time { color: var(--cc-gold-lt); }
.cc-bar-self .cc-clock.is-active .cc-clock-label { color: var(--goldT, #8a6d16); }

/* Board panel */
.cc-board-panel {
    /* Portrait board: bound by viewport height so both player bars stay on
       screen (theme picker + action buttons now live in the right rail).
       0.894 = 507/567 (w:h). 440px floor keeps it usable on short screens;
       plain 680px fallback for browsers without svh/min()/max()/calc. */
    --cc-board-w: 680px;
    --cc-board-w: min(820px, max(440px, calc((100svh - 200px) * 0.894)));
    border-radius: 18px;
    padding: 18px;
    background: var(--bpanel, linear-gradient(180deg, #eef2f7, #e3e9f1));
    border: 1px solid var(--bpanelb, #d3dbe6);
    box-shadow: var(--bpanels, 0 2px 10px rgba(20, 40, 70, .10));
}

.cc-board {
    position: relative;
    width: 100%;
    max-width: var(--cc-board-w);
    margin: 0 auto;
    aspect-ratio: 507 / 567;
    container-type: inline-size;

    --cc-paper: #e9dcc0;
    --cc-line: #4b3a29;
    --cc-surface-bg: transparent;
    --cc-surface-size: auto;
    --cc-red-disc: radial-gradient(circle at 34% 28%, #fffaf0, #e4d8bf 68%, #cfc0a2);
    --cc-red-ring: #b3261e;
    --cc-red-ink: #a8231c;
    --cc-red-shadow: 0 3px 7px rgba(60, 40, 20, .35);
    --cc-black-disc: radial-gradient(circle at 34% 28%, #fbf7ee, #ded6c6 68%, #c4bbaa);
    --cc-black-ring: #2b333d;
    --cc-black-ink: #232b34;
    --cc-black-shadow: 0 3px 7px rgba(60, 40, 20, .35);
}

.cc-theme-wood {
    --cc-paper: #d9a869;
    --cc-line: #6b3f1d;
    --cc-red-disc: radial-gradient(circle at 34% 28%, #fff6e2, #f0d9a8 66%, #d8b878);
    --cc-red-ring: #a3231b;
    --cc-red-ink: #9c1f18;
    --cc-red-shadow: 0 3px 8px rgba(70, 40, 10, .4);
    --cc-black-disc: radial-gradient(circle at 34% 28%, #fdf4e6, #e6d6b8 66%, #c9b38c);
    --cc-black-ring: #3a2b1e;
    --cc-black-ink: #2c2118;
    --cc-black-shadow: 0 3px 8px rgba(70, 40, 10, .4);
}
.cc-theme-night {
    --cc-paper: #1b222b;
    --cc-line: #7e8b9a;
    --cc-red-disc: radial-gradient(circle at 34% 28%, #3a2b30, #2a2024 70%, #1d1518);
    --cc-red-ring: #e0645a;
    --cc-red-ink: #f08a80;
    --cc-red-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    --cc-black-disc: radial-gradient(circle at 34% 28%, #2b333d, #222932 70%, #191f26);
    --cc-black-ring: #93a3b5;
    --cc-black-ink: #cdd8e4;
    --cc-black-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.cc-theme-stock {
    --cc-line: #f0d8b2;
    --cc-surface-bg: #c58c42;
    --cc-surface-size: 100% 100%;
}

.cc-surface {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background-color: var(--cc-surface-bg);
    background-size: var(--cc-surface-size);
    background-repeat: no-repeat;
    box-shadow: inset 0 0 70px rgba(30, 12, 0, 0.45);
}

.cc-grid-svg { position: absolute; inset: 0; color: var(--cc-line); }
.cc-grid-svg svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: block;
}
.cc-theme-stock .cc-grid-svg { display: none; }

.cc-highlights, .cc-hints, .cc-pieces { position: absolute; inset: 0; }
/* Last-move rings sit ABOVE the pieces so the destination marker traces the
   piece edge instead of hiding behind the disc. pointer-events: none keeps the
   layer from swallowing piece clicks / overriding the pointer cursor. */
.cc-highlights { z-index: 4; pointer-events: none; }
.cc-pieces { z-index: 3; }
.cc-hints { z-index: 2; }

.cc-hl {
    position: absolute;
    width: 10.65%;
    height: 9.52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid;
    box-sizing: border-box;
}

/* 原版 last-move marker: the r_box / b_box bitmap at the piece footprint */
.cc-hl-img {
    position: absolute;
    width: 10.651%;
    height: 9.524%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.cc-hint {
    position: absolute;
    width: 4.2%;
    height: 3.8%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.cc-theme-night .cc-hint { background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); }

.cc-piece {
    position: absolute;
    width: 10.65%;
    height: 9.52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left .18s ease, top .18s ease, opacity .18s ease;
    cursor: pointer;
}
.cc-piece.is-red { background: var(--cc-red-disc); box-shadow: var(--cc-red-shadow); }
.cc-piece.is-black { background: var(--cc-black-disc); box-shadow: var(--cc-black-shadow); }
.cc-piece-ring {
    width: 82%;
    height: 82%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.cc-piece.is-red .cc-piece-ring { border: 1.5px solid var(--cc-red-ring); }
.cc-piece.is-black .cc-piece-ring { border: 1.5px solid var(--cc-black-ring); }
.cc-piece-glyph {
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    font-weight: 700;
    font-size: clamp(18px, 3.4cqw, 30px);
    line-height: 1;
}
.cc-piece.is-red .cc-piece-glyph { color: var(--cc-red-ink); }
.cc-piece.is-black .cc-piece-glyph { color: var(--cc-black-ink); }

.cc-piece.is-stock {
    width: 10.651%;
    height: 9.524%;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: none;
}

/* Selected piece: a bright gold ring + glow drawn as an ::after so it never
   fights the disc's own drop shadow. */
.cc-piece.is-sel { outline: none; }
.cc-piece.is-sel::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108%;
    height: 108%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid #f4c948;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 16px 4px rgba(244, 201, 72, 0.9);
}
/* 原版: bitmap pieces have transparent corners and the disc art is drawn ~2.5px
   up-left of the 54px box centre (bottom-right is drop shadow), so the ring is
   offset to sit on the visible disc rather than the box. */
.cc-theme-stock .cc-piece.is-sel::after {
    left: 45.4%;
    top: 45.4%;
    width: 96%;
    height: 96%;
}
.cc-piece.is-captured { opacity: 0; }

/* Rail control card — holds the theme picker */
.cc-controls { padding: 12px 14px; }

/* Action row as a standalone rail card (sits below the chat) */
.cc-actions.cc-rail-actions {
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--card, #f7f9fc);
    border: 1px solid var(--cardb, #dde5ee);
    margin-top: 0;
}
.cc-rail > .cc-invite { margin: 0; padding: 0 4px; }

/* Theme picker (single dropdown) */
.cc-theme-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cc-theme-label { font-size: 11px; color: var(--t4, #8e9bb0); flex-shrink: 0; }
.cc-theme-picker .cc-back {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    white-space: nowrap;
    color: var(--t3, #6b7a92);
}
.cc-theme-picker .cc-back:hover { color: var(--goldT, #8a6d16); }
.cc-theme-select {
    flex: 0 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 28px 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--btnb, #c6d0dd);
    background-color: var(--btn, #ffffff);
    color: var(--t1, #2b3648);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7a92' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.cc-theme-select:focus { outline: none; border-color: var(--goldSelB, #ddc784); }
.cc-theme-select option { color: #2b3648; background: #ffffff; }

/* Action row */
.cc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.cc-btn {
    font-family: inherit;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--btnb, #c6d0dd);
    background: var(--btn, #ffffff);
    color: var(--t1, #2b3648);
}
.cc-btn:hover { background: var(--btnh, #eef3f9); }
.cc-btn-danger {
    border-color: var(--dangerB, #f0c2be);
    background: var(--dangerBg, #fdeceb);
    color: var(--dangerT, #a3231b);
}
.cc-btn-danger:hover { background: var(--dangerH, #f9dedb); }
.cc-btn:disabled { opacity: .5; cursor: not-allowed; }
.cc-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; }
.cc-tag-ranked { background: rgba(200, 163, 65, .15); color: var(--cc-gold-lt); border: 1px solid rgba(200, 163, 65, .3); }
.cc-tag-casual { background: rgba(63, 174, 122, .15); color: var(--cc-green); border: 1px solid rgba(63, 174, 122, .3); }
.cc-status { font-size: 12px; color: var(--t3, #6b7a92); font-weight: 600; }
.cc-meta { margin-left: auto; font-size: 12px; color: var(--t4, #8e9bb0); font-variant-numeric: tabular-nums; }

.cc-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--t3, #6b7a92);
    margin-top: 2px;
}
.cc-invite-url { color: var(--t4, #8e9bb0); word-break: break-all; user-select: all; }
.cc-invite-copy { cursor: pointer; }

/* Review scrubber / spectator strip */
.cc-scrubber, .cc-spectate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--card, #f7f9fc);
    border: 1px solid var(--cardb, #dde5ee);
    flex-wrap: wrap;
}
.cc-scrub-btns { display: flex; gap: 6px; }
.cc-step {
    font-family: inherit;
    cursor: pointer;
    width: 36px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--btnb, #c6d0dd);
    background: var(--btn, #ffffff);
    color: var(--t1, #2b3648);
    font-size: 12px;
}
.cc-step:disabled { opacity: .4; cursor: not-allowed; }
.cc-play {
    font-family: inherit;
    cursor: pointer;
    min-width: 64px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--goldSelB, #ddc784);
    background: var(--goldSel, #f6ecd3);
    color: var(--cc-gold-lt);
    font-size: 12px;
    font-weight: 600;
}
.cc-range { flex: 1; min-width: 160px; height: 4px; accent-color: var(--cc-gold); }
.cc-ply-count {
    font-size: 12px;
    color: var(--t3, #6b7a92);
    font-variant-numeric: tabular-nums;
    min-width: 96px;
    text-align: right;
}
.cc-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2, #536482); }
.cc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-green); }
.cc-spectate-meta { font-size: 12px; color: var(--t4, #8e9bb0); margin-left: auto; }

/* Right rail cards */
.cc-card {
    border-radius: 14px;
    background: var(--card, #f7f9fc);
    border: 1px solid var(--cardb, #dde5ee);
    overflow: hidden;
}
.cc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--div, #e4eaf2);
}
.cc-card-title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--goldT, #8a6d16); }
.cc-card-meta { font-size: 11px; color: var(--t4, #8e9bb0); }

/* Fixed height (not max-height) so the rail below doesn't shift as moves arrive */
.cc-moves { height: 330px; overflow-y: auto; padding: 6px 8px; }
.cc-move-row {
    display: grid;
    grid-template-columns: 26px 1fr 1fr;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.cc-move-num {
    font-size: 11px;
    color: var(--t3, #6b7a92);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.cc-move-cell {
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    text-align: left;
    border: none;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    cursor: default;
}
.cc-move-cell.cc-red { color: var(--redT, #a3231b); }
.cc-move-cell.cc-black { color: var(--t1, #2b3648); }
.cc-moves.is-jumpable .cc-move-cell { cursor: pointer; }
.cc-move-cell.is-sel { background: var(--goldSel, #f6ecd3); color: var(--goldT, #8a6d16); }

/* Chat */
.cc-chat { display: flex; flex-direction: column; }
.cc-chat-log {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 210px;
    overflow-y: auto;
}
.cc-msg { font-size: 13px; line-height: 1.5; }
.cc-msg.is-system { font-size: 11px; color: var(--goldT, #8a6d16); opacity: .7; text-align: center; }
.cc-msg.is-in {
    align-self: flex-start;
    max-width: 88%;
    background: var(--bub, #eef2f7);
    border-radius: 12px 12px 12px 4px;
    padding: 7px 11px;
}
.cc-msg.is-own {
    align-self: flex-end;
    max-width: 88%;
    background: rgba(200, 163, 65, 0.14);
    border: 1px solid rgba(200, 163, 65, 0.2);
    border-radius: 12px 12px 4px 12px;
    padding: 7px 11px;
}
.cc-msg-author { font-size: 11px; color: var(--t3, #6b7a92); margin-bottom: 2px; }
.cc-msg.is-own .cc-msg-author { color: var(--goldT, #8a6d16); }

.cc-composer {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--div, #e4eaf2);
}
.cc-composer input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    background: var(--inp, #ffffff);
    border: 1px solid var(--pgb, #cfd8e3);
    border-radius: 10px;
    padding: 8px 11px;
    color: var(--t1, #2b3648);
    font-size: 13px;
    outline: none;
}
.cc-composer input::placeholder { color: var(--t4, #8e9bb0); }
.cc-send {
    font-family: inherit;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    background: var(--cc-gold);
    color: #0d1014;
    font-size: 13px;
    font-weight: 700;
}

/* Scrollbars */
.cc-moves::-webkit-scrollbar, .cc-chat-log::-webkit-scrollbar { width: 6px; }
.cc-moves::-webkit-scrollbar-thumb, .cc-chat-log::-webkit-scrollbar-thumb {
    background: var(--cardb, #dde5ee);
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 900px) {
    .cc-grid { grid-template-columns: 1fr; gap: 16px; }
    /* Single column: size the board to the column; the page scrolls. */
    .cc-board-panel { padding: 12px; --cc-board-w: min(560px, 100%); }
}

@media (max-width: 480px) {
    .cc-shell { padding: 8px 0; }
    .cc-board-panel { padding: 8px; border-radius: 14px; }
    .cc-bar { padding: 10px 12px; gap: 10px; }
    .cc-grid { gap: 14px; }
    .cc-left { gap: 8px; }
}