/* Halaman Tonton (watch.html) */
body {
    background: radial-gradient(ellipse at center, #3a3a3a 0%, #1e1e1e 100%) !important;
    color: #e8e8e8;
    margin: 0;
}

.hidden { display: none !important; }
.muted { color: #9a9a9a; font-size: 13px; }

.watch-page {
    max-width: 1100px;
    margin: 20px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.w-card {
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 14px;
}
.w-card h3 { margin: 0 0 10px; font-size: 15px; }

.w-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #444; color: #e8e8e8;
    border: 1px solid #555; border-radius: 4px;
    padding: 7px 12px; font-size: 13px;
    cursor: pointer; text-decoration: none;
}
.w-btn:hover { background: #555; }

/* ---------- Daftar partai ---------- */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.list-head h1 { margin: 0; font-size: 22px; }

.live-list {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.empty { color: #888; padding: 24px; text-align: center; grid-column: 1 / -1;
         background: #2b2b2b; border: 1px dashed #555; border-radius: 6px; }

.live-card {
    display: flex; flex-direction: column; gap: 8px;
    background: #2b2b2b; border: 1px solid #444; border-radius: 6px;
    padding: 12px 14px; color: inherit; text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.live-card:hover { border-color: #2e7d32; transform: translateY(-1px); }
.live-card .row { display: flex; align-items: center; gap: 8px; }
.live-card .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-card .rating { color: #38bdf8; font-family: monospace; }
.live-card .meta { display: flex; justify-content: space-between; color: #9a9a9a; font-size: 12px;
                   border-top: 1px solid #3a3a3a; padding-top: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid #777; }
.dot.white { background: #f0f0f0; }
.dot.black { background: #111; }

/* ---------- Menonton ---------- */
.game-layout {
    display: grid;
    grid-template-columns: minmax(0, 600px) 320px;
    gap: 16px;
    justify-content: center;
    align-items: start;
}
.board-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.watch-board {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
/* Papan hanya untuk dilihat: biarkan halaman tetap bisa di-scroll di HP */
.watch-board.cg-wrap { touch-action: pan-y; }

.player-strip {
    display: flex; align-items: center; gap: 8px;
    background: #2b2b2b; border: 1px solid #444; border-radius: 4px;
    padding: 6px 10px;
}
.player-strip .p-color { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #777; flex-shrink: 0; }
.player-strip .p-color.white { background: #f0f0f0; }
.player-strip .p-color.black { background: #111; }
.player-strip .p-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-strip .p-rating { color: #38bdf8; font-family: monospace; font-size: 13px; }
.player-strip .p-clock {
    font-family: monospace; font-size: 20px; font-weight: 700;
    background: #1f1d1b; color: #bbb; padding: 2px 10px; border-radius: 4px; min-width: 76px; text-align: right;
}
.player-strip .p-clock.active { background: #2e7d32; color: #fff; }
.player-strip .p-clock.low { background: #a33; color: #fff; }

.side-col { display: flex; flex-direction: column; gap: 12px; }
.status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-row #spectator-count { margin-left: auto; }
.live-badge { color: #ef4444; font-weight: 700; font-size: 12px; letter-spacing: 1px; }
.live-badge.ended { color: #888; }
.game-status { margin: 10px 0; font-size: 15px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.move-list {
    display: grid;
    grid-template-columns: 36px 1fr 1fr;
    gap: 2px 6px;
    max-height: 360px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 14px;
}
.move-list .no { color: #777; text-align: right; }
.move-list .mv { padding: 1px 4px; border-radius: 3px; }
.move-list .mv.last { background: #3a6ea5; color: #fff; }

@media (max-width: 900px) {
    .game-layout { grid-template-columns: 1fr; }
    .board-col { max-width: 600px; width: 100%; margin: 0 auto; }
    .move-list { max-height: 220px; }
}
@media (max-width: 480px) {
    .watch-page { margin: 10px auto; padding: 0 8px; }
    .player-strip .p-clock { font-size: 17px; min-width: 64px; }
}