/* ------------- 全局 ------------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: #e5e7eb;
    background: #020617;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* 背景层 */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at top left, #22c55e33, transparent 60%),
        radial-gradient(circle at bottom right, #3b82f633, transparent 55%),
        radial-gradient(circle at center, #facc1533, transparent 60%),
        #020617;
}

/* 玻璃容器 */
.container.glass-card {
    max-width: 1100px;
    margin: 24px auto;
    padding: 20px 24px 20px;
    background: rgba(15,23,42,0.78);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.8);
    border: 1px solid rgba(148,163,184,0.3);
    backdrop-filter: blur(18px);
}

/* ------------- 头部 ------------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.page-title h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: .05em;
}
.page-title small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #9ca3af;
}
.top-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ------------- 按钮 / 表单 ------------- */
button,
.btn,
.btn-small,
.btn-secondary {
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: #f9fafb;
    box-shadow: 0 6px 16px rgba(37,99,235,0.45);
    transform: translateY(0);
    transition: all .2s ease;
}
button:hover,
.btn:hover,
.btn-small:hover,
.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37,99,235,0.6);
}
.btn-small {
    padding: 4px 12px;
    font-size: 12px;
}
.btn-secondary {
    background: rgba(15,23,42,0.7);
    color: #e5e7eb;
    box-shadow: 0 0 0 transparent;
    border: 1px solid rgba(148,163,184,0.5);
}
.btn-secondary:hover {
    background: rgba(15,23,42,0.95);
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 6px 18px rgba(239,68,68,0.6);
}
.btn-danger-soft {
    background: rgba(127,29,29,0.3);
    color: #fecaca;
    border: 1px solid rgba(248,113,113,0.7);
    box-shadow: none;
}

input[type="text"],
select {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    background: rgba(15,23,42,0.7);
    color: #f9fafb;
    outline: none;
    font-size: 14px;
}
input[type="text"]::placeholder {
    color: #6b7280;
}
input[type="text"]:focus,
select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8;
}

.error {
    margin-top: 8px;
    color: #fecaca;
    font-size: 13px;
}

/* ------------- 大厅布局 ------------- */
.lobby-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(320px, 1.4fr);
    gap: 18px;
    margin-top: 16px;
}
.card {
    border-radius: 14px;
    padding: 16px 18px;
    background: radial-gradient(circle at top left, rgba(56,189,248,0.16), transparent 60%),
                rgba(15,23,42,0.9);
    border: 1px solid rgba(75,85,99,0.8);
    box-shadow: 0 16px 35px rgba(15,23,42,0.9);
}
.big-card {
    margin-top: 12px;
}
.card h2 {
    margin: 0 0 8px;
    font-size: 18px;
}
.card-section {
    margin-top: 10px;
}
.meta {
    color: #9ca3af;
    font-size: 13px;
}

/* 表格 */
.room-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}
.room-table th,
.room-table td {
    border: 1px solid rgba(55,65,81,0.8);
    padding: 6px 8px;
    text-align: center;
}
.room-table th {
    background: rgba(17,24,39,0.85);
}

/* 状态点 */
.dot {
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    margin-right:4px;
}
.dot.waiting { background:#22c55e; }
.dot.playing { background:#fbbf24; }
.dot.finished { background:#6b7280; }

/* 行内操作容器 */
.room-actions-inline {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* 表单布局 */
.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 昵称卡片 */
.nickname-card .nickname-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nickname-card .nickname-form input[type="text"] {
    width: 100%;
}
.nickname-card .nickname-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------- 游戏布局 ------------- */
.game-container {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.left-panel {
    flex: 2;
    min-width: 320px;
}
.right-panel {
    flex: 1;
    min-width: 260px;
}

/* 信息卡 / 日志 */
.info {
    padding: 10px 12px;
    background: rgba(15,23,42,0.85);
    border-radius: 10px;
    border: 1px solid rgba(55,65,81,0.9);
    margin-bottom: 8px;
}
.info p {
    margin: 4px 0;
}
.log {
    height: 260px;
    border-radius: 10px;
    border: 1px solid rgba(55,65,81,0.9);
    background: radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 65%),
                rgba(15,23,42,0.85);
    padding: 8px;
    overflow-y: auto;
    font-size: 12px;
}

/* 棋盘外包裹 */
.board-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

/* 棋盘画布 */
#board {
    border-radius: 12px;
    display: block;
    border: 1px solid rgba(30,41,59,0.9);
    box-shadow:
        0 20px 40px rgba(15,23,42,0.95),
        0 0 0 1px rgba(15,23,42,0.7);
    transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}
#board:hover {
    box-shadow:
        0 24px 60px rgba(56,189,248,0.7),
        0 0 0 1px rgba(56,189,248,0.9);
    transform: translateY(-1px);
}

/* 标签 / 状态 */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(75,85,99,0.95);
    background: rgba(15,23,42,0.85);
    color: #e5e7eb;
}
.tag-black {
    background: radial-gradient(circle at top, #4b5563, #020617);
    color:#f9fafb;
}
.tag-white {
    background: radial-gradient(circle at top, #f9fafb, #e5e7eb);
    color:#111827;
}
.status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    margin-left: 4px;
}
.status-ok {
    background: rgba(22,163,74,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.6);
}
.status-warn {
    background: rgba(245,158,11,0.2);
    color: #facc15;
    border: 1px solid rgba(234,179,8,0.6);
}

/* 回合条 */
.turn-bar {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(75,85,99,0.95);
    font-size: 13px;
    background: linear-gradient(90deg, rgba(15,23,42,0.95), rgba(15,23,42,0.9));
    color: #e5e7eb;
    box-shadow: 0 4px 16px rgba(15,23,42,0.9);
    transition: all .25s ease;
}
.turn-bar.turn-black {
    background: linear-gradient(90deg, #020617, #111827);
    border-color: rgba(248,250,252,0.4);
}
.turn-bar.turn-white {
    background: linear-gradient(90deg, #f9fafb, #e5e7eb);
    color: #111827;
}

/* ------------- 弹幕层 ------------- */
.barrage-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.barrage-item {
    position: absolute;
    white-space: nowrap;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.8);
    border: 1px solid rgba(148,163,184,0.6);
    color: #e5e7eb;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    animation: barrage-move linear forwards;
}
.barrage-item .barrage-nick {
    color: #38bdf8;
    margin-right: 4px;
}
@keyframes barrage-move {
    from { transform: translateX(100%); }
    to   { transform: translateX(-120%); }
}

/* ------------- 弹幕对话框 ------------- */
.barrage-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
}
.barrage-dialog.hidden {
    display: none;
}
.barrage-dialog > div {
    width: 320px;
    max-width: calc(100% - 40px);
    background: rgba(15,23,42,0.95);
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,0.7);
    box-shadow: 0 24px 60px rgba(15,23,42,0.95);
    backdrop-filter: blur(14px);
}
.barrage-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(55,65,81,0.9);
    font-size: 13px;
}
.barrage-dialog-body {
    padding: 8px 12px 10px;
    font-size: 13px;
}
.barrage-section {
    margin-bottom: 6px;
}
.barrage-section-title {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
}
.barrage-emojis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.barrage-chip {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(75,85,99,0.9);
    background: rgba(15,23,42,0.9);
    font-size: 13px;
    cursor: pointer;
}
.barrage-chip:hover {
    background: rgba(30,64,175,0.8);
    border-color: rgba(129,140,248,0.9);
}
.barrage-input-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.barrage-input-row input {
    flex: 1;
    min-width: 0;
}

/* ------------- 主题 ------------- */
/* 木纹主题 */
body.theme-wood #board {
    background-color: #d9a066;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.05) 75%, transparent 75%, transparent),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.2), transparent 60%);
    background-size: 40px 40px, 80px 80px;
}

/* 暗黑主题 */
body.theme-dark .bg-layer {
    background:
        radial-gradient(circle at top left, #0ea5e933, transparent 60%),
        radial-gradient(circle at bottom right, #22c55e33, transparent 55%),
        #020617;
}
body.theme-dark #board {
    background: radial-gradient(circle at top, #111827, #020617);
}

/* 霓虹主题 */
body.theme-neon .bg-layer {
    background:
        radial-gradient(circle at top left, #f9731633, transparent 60%),
        radial-gradient(circle at bottom right, #22d3ee33, transparent 55%),
        radial-gradient(circle at center, #a855f733, transparent 60%),
        #020617;
}
body.theme-neon #board {
    background:
        radial-gradient(circle at 10% 10%, rgba(59,130,246,0.6), transparent 60%),
        radial-gradient(circle at 90% 90%, rgba(16,185,129,0.6), transparent 60%),
        #020617;
    box-shadow:
        0 0 25px rgba(59,130,246,0.7),
        0 0 0 1px rgba(56,189,248,0.9);
}

/* ------------- 大厅：手机卡片 ------------- */
.desktop-only { }
.mobile-only  { display: none; }

.room-list-mobile {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.room-card {
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 12px 28px rgba(15,23,42,0.9);
}
.room-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}
.room-card-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 2px;
}
.room-card-line .label {
    color: #9ca3af;
    margin-right: 8px;
}
.room-card-line .remark-text {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room-card-actions {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 大厅顶部过滤器 */
.lobby-filters {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.filter-select {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(75,85,99,0.8);
    background: rgba(15,23,42,0.9);
    color: #e5e7eb;
    font-size: 12px;
}

/* 底部操作栏（现在 PC + 手机都显示） */
.mobile-action-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px 10px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(15,23,42,0.2), rgba(15,23,42,0.98));
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(51,65,85,0.9);
    z-index: 55;
}
.mobile-action-bar button {
    flex: 1;
    font-size: 15px;
    padding: 10px 0;
}

/* ------------- 回放大厅 / 时间轴（如果有 history.php） ------------- */
.history-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(320px, 1.4fr);
    gap: 18px;
    margin-top: 12px;
}
.history-filters {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.history-filters input[type="text"] {
    flex: 1;
    min-width: 150px;
}

.history-timeline {
    margin-top: 10px;
    position: relative;
    padding-left: 14px;
}
.history-timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(148,163,184,0.6), transparent 80%);
}
.timeline-empty {
    padding: 8px 0;
}
.timeline-item {
    position: relative;
    padding-left: 12px;
    margin-bottom: 10px;
}
.timeline-dot {
    position: absolute;
    left: 4px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,0.8);
}
.timeline-content {
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(55,65,81,0.9);
    box-shadow: 0 10px 24px rgba(15,23,42,0.9);
}
.timeline-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 2px;
}
.timeline-time {
    color: #9ca3af;
}
.timeline-mode {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(75,85,99,0.8);
    font-size: 11px;
}
.timeline-room {
    font-weight: 600;
    margin: 2px 0;
    font-size: 13px;
}
.timeline-players {
    font-size: 13px;
}
.timeline-remark {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}
.timeline-actions {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

/* ------------- 手机端 ------------- */
@media (max-width: 768px) {
    .container.glass-card {
        margin: 8px;
        padding: 10px 10px 80px;
        border-radius: 0;
        max-width: 100%;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .page-title h1 {
        font-size: 18px;
    }
    .page-title small {
        font-size: 12px;
    }

    .lobby-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 12px 12px;
        border-radius: 12px;
        box-shadow: 0 14px 32px rgba(15,23,42,0.95);
    }

    .desktop-only { display: none !important; }
    .mobile-only  { display: block !important; }

    .room-list-mobile {
        margin-top: 8px;
    }

    .history-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .game-container {
        flex-direction: column;
        gap: 12px;
    }

    .right-panel {
        display: none !important;
    }

    .board-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        width: 100%;
    }

    #board {
        margin: 0 auto;
    }
}
/* ===== 棋盘操作栏：PC / 手机分离显示 ===== */

/* 默认：两种操作栏都先隐藏，后面用媒体查询分别打开 */
.desktop-action-bar {
    display: none;
}

.mobile-action-bar {
    display: none;
}

/* 大屏（PC / 平板横屏）：显示棋盘下那一行按钮，隐藏底部大按钮 */
@media (min-width: 769px) {
    .desktop-action-bar {
        display: flex !important;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
    }
    .mobile-action-bar {
        display: none !important;
    }
}

/* 小屏（手机）：隐藏棋盘下那一行，只保留底部大按钮 */
@media (max-width: 768px) {
    .desktop-action-bar {
        display: none !important;
    }
    .mobile-action-bar {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 12px env(safe-area-inset-bottom);
        justify-content: space-around;
        gap: 10px;
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(148, 163, 184, 0.4);
        z-index: 40;
    }
    .mobile-action-bar .btn,
    .mobile-action-bar .btn-secondary,
    .mobile-action-bar .btn-danger {
        flex: 1 1 0;
        font-size: 14px;
        padding: 10px 0;
    }
}
/* ===== 底部操作栏：PC + 手机统一使用 ===== */

.mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px env(safe-area-inset-bottom);
    display: flex !important;
    justify-content: space-around;
    gap: 10px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(148, 163, 184, 0.4);
    z-index: 40;
}

.mobile-action-bar .btn,
.mobile-action-bar .btn-secondary,
.mobile-action-bar .btn-danger {
    flex: 1 1 0;
    font-size: 14px;
    padding: 10px 0;
}