/*
----------------------------------------
Numeon Website
Version 1.0

home.css

主页样式。

配色与布局严格依照设计图：

· 深灰底 + 微亮面板
· 青色作为唯一强调色
· 左侧竖排导航，右侧操作区，中间 Lobby
----------------------------------------
*/

:root {

    --bg:           #262421;
    --panel:        #302e2c;
    --panel-hi:     #3a3835;
    --panel-hover:  #403d3a;
    --line:         #3d3a37;

    --text:         #bdbab6;
    --text-strong:  #e6e3df;
    --muted:        #82807c;
    --dim:          #55534f;

    --accent:       #3d9dbf;
    --accent-hi:    #4bb6d6;

    --win:          #7aa354;
    --loss:         #b34a4a;

    --sidebar:      105px;
    --gap:          22px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans", "Segoe UI", Roboto,
                 "Helvetica Neue", system-ui, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
}


/* =====================================
   Layout
   ===================================== */

#shell {
    display: flex;
    min-height: 100vh;
}


/* =====================================
   Sidebar
   ===================================== */

#sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 34px 0 12px 0;
}

/* ---- 侧栏固定在屏幕上（2026-09-28）----
   以前侧栏是跟着页面内容一起被撑高的：内容一长，站点栏和玩家名就掉到整页的最底下，
   得滚到底才看得见。现在侧栏钉在屏幕上（sticky，高度 = 屏幕高度），页面怎么滚它都不动：
   上面是导航，中间留空，然后是各棋类的入口（Numerith / Orbit / Arkatana），
   玩家名钉在屏幕最左下角。手机上侧栏是抽屉（fixed），不受这条影响，见下面的 @media。 */

#sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
}

/* 消息 / 通知 / 设置那排小图标：原来在玩家名下面，现在玩家名要在最下面，
   所以搬到导航下面（跟导航同属上半部分）。 */
#tray {
    margin-top: 10px;
    margin-bottom: 8px;
}

/* 屏幕很矮（横屏手机 / 缩小的窗口）放不下时，侧栏自己可以滚动，别把玩家名挤出屏幕 */
@media (max-height: 520px) and (min-width: 901px) {
    #sidebar { overflow-y: auto; }
}

.nav-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 0 9px 14px;
    font-size: 15px;
    color: var(--muted);
    transition: color .12s;
}

.nav-item:hover {
    color: var(--text-strong);
}

.nav-item.is-active {
    color: var(--accent-hi);
}

/* 站点切换：Numerith(数弈) / Orbit(四轮) ——
   跟 .nav-item 一样占满宽度、左对齐，
   但用 margin-top:auto 贴着 #sidebar-foot 靠下，
   跟下面玩家名之间留出一点分隔。 */

#site-switch {
    margin-top: auto;
    padding: 12px 0 10px 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.site-switch-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 0 6px 14px;
    font-size: 13px;
    color: var(--muted);
    transition: color .12s;
}

.site-switch-btn:hover {
    color: var(--text-strong);
}

.site-switch-btn.is-active {
    color: var(--accent-hi);
    cursor: default;
}

#sidebar-foot {
    padding: 0 8px;
}

#account {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    width: 100%;
    text-align: left;
    margin-bottom: 12px;
}

#account:hover {
    color: var(--text-strong);
}

#avatar {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 2px;
    background: var(--panel-hi);
    display: grid;
    place-items: center;
    font-size: 9px;
    color: var(--text-strong);
}

#account-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tray {
    display: flex;
    gap: 14px;
    padding: 0 8px;
    position: relative;
}

.tray-btn {
    font-size: 13px;
    color: var(--muted);
    line-height: 1;
    position: relative;
}

.tray-btn:hover {
    color: var(--text-strong);
}

.tray-dot {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-hi);
    display: none;
}

.tray-dot.is-on {
    display: block;
}


/* =====================================
   Content
   ===================================== */

#content {
    flex: 1;
    min-width: 0;
    padding: 18px 30px 40px 30px;
}

#brand {
    font-size: 20px;
    color: var(--dim);
    letter-spacing: .5px;
    margin: 0 0 18px 6px;
}

#columns {
    display: grid;
    grid-template-columns: 250px minmax(0, 665px) 260px;
    gap: var(--gap);
    align-items: start;
}

/* 三列都显式钉死位置，不依赖隐式自动排列。
   之前 #live-games 插在 #entries 和 #center-column 之间、
   自己没写 grid-column，
   网格的隐式排列就把它塞进了第 2 列（中间 665px），
   把 #center-column 挤去了第 3 列、
   #right-column 折到了下一行——
   表现出来就是"有对局时棋盘跑到页面正中央"。

   显式写好之后，以后再插入新元素，
   只要没有专门写 grid-column，
   都不会再影响这三列的位置。

   Learn / Puzzle / Watch 那三张卡片（原来占第 1 行）
   已经删掉了，#live-games 直接顶上第 1 行。 */

#live-games {
    grid-column: 1;
    grid-row: 1;
}

#center-column {
    grid-column: 2;
    grid-row: 1 / span 2;
}

#right-column {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.section-title {
    font-size: 19px;
    color: var(--text);
    margin: 0 0 8px 2px;
    font-weight: 400;
}


/* =====================================
   Column B : Lobby
   ===================================== */

#lobby-panel,
#history-panel {
    background: var(--panel);
    border: 1px solid var(--line);
}

#history-panel {
    /* 只留大约 3 局的高度，其余靠滚动。

       主页的对局史如果按内容自然撑开，
       玩得越多主页越长——
       排行榜、创建对局这些右侧内容
       会被推到很下面去。

       这里定高之后主页的总长度就固定了，
       想看更多走下面的 → More。

       340px 是按一个条目约 108px 估的：
       露出三条，第四条露一点边，
       让人一眼看出这里可以往下滚。 */

    max-height: 340px;
    overflow-y: auto;

    /* 滚动条留在面板内部，
       不要盖住最右边那列文字 */
    overscroll-behavior: contain;
}

/* 细滚动条，配深色面板 */

#history-panel::-webkit-scrollbar {
    width: 8px;
}

#history-panel::-webkit-scrollbar-thumb {
    background: var(--line);
}

#history-panel::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- → More ---- */

#history-more-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

#btn-history-more {
    background: none;
    border: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 14px;
    padding: 4px 2px;
}

#btn-history-more:hover {
    text-decoration: underline;
}

/* =====================================
   完整对局史页面
   =====================================

   顶替 #columns 的位置，
   所以左右内边距要和它对齐，
   否则切过去的时候整块内容会横向跳一下。 */

#history-page-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

#history-page-head h1 {
    font-size: 22px;
    font-weight: 400;
    color: var(--text-strong);
    margin: 0;
}

#history-page-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
}

#btn-history-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text-strong);
    font-family: inherit;
    font-size: 14px;
    padding: 7px 14px;
}

#btn-history-back:hover {
    background: var(--panel-hover);
    border-color: var(--accent);
}

/* 列表本身不限高——
   这一页存在的意义就是能一直往下翻。 */

#history-page-list {
    background: var(--panel);
    border: 1px solid var(--line);
}

#lobby-panel {
    min-height: 300px;
    margin-bottom: 22px;
}

#history-panel {
    min-height: 260px;
}

.lobby-table {
    width: 100%;
    border-collapse: collapse;
}

.lobby-table thead th {
    background: var(--panel-hi);
    font-weight: 400;
    font-size: 15px;
    color: var(--text);
    padding: 9px 14px;
    text-align: right;
}

.lobby-table thead th:first-child {
    width: 46px;
}

.lobby-table thead th.col-name {
    text-align: left;
}

.lobby-table tbody tr {
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, .18);
}

.lobby-table tbody tr:hover {
    background: var(--panel-hover);
}

.lobby-table tbody tr.is-own {
    color: var(--muted);
}

.lobby-table td {
    padding: 6px 14px;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
}

.lobby-table td.col-icon {
    padding: 6px 10px 6px 14px;
    text-align: left;
}

.lobby-table td.col-name {
    text-align: left;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flag {
    margin-left: 6px;
    font-size: 13px;
    vertical-align: 1px;
}

/* 大厅里 bot 名字后面的小标签，
   让人点进去之前就知道对面是 AI。

   颜色刻意压得比较暗——
   这不是需要抢眼的警示信息，
   只是一个身份说明。 */

.bot-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 3px;
    vertical-align: 2px;
}

/* bot 行本身不需要特殊底色——
   它在视觉上应该和真人房间一样正常，
   区别只靠上面那个小标签传达，
   不需要整行都在提醒"这是电脑"。 */


.empty-state {
    padding: 26px 16px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.empty-state .empty-action {
    color: var(--accent-hi);
}


/* =====================================
   Piece Icon
   ===================================== */

.piece {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    user-select: none;
}

.piece-black {
    background: #211f1d;
    color: #cfccc8;
    box-shadow: inset 0 0 0 1px #3f3c39;
}

.piece-red {
    background: #cdc9c4;
    color: #9d3b32;
    box-shadow: inset 0 0 0 1px #b5b1ac;
}

/* 挑战窗口里选 Orbit 时，"红方"换成"白方"：浅色圆片、不带数字 */
.piece-white {
    background: #f2efea;
    color: #f2efea;
    box-shadow: inset 0 0 0 1px #b5b1ac;
}

.piece-random {
    background: linear-gradient(
        135deg,
        #cdc9c4 0 50%,
        #211f1d 50% 100%
    );
    color: #8a8681;
    box-shadow: inset 0 0 0 1px #3f3c39;
}


/* =====================================
   Game History
   ===================================== */

.history-item {
    padding: 10px 14px 8px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    cursor: pointer;
}

.history-item:hover {
    background: var(--panel-hover);
}

.history-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
}

.history-date {
    margin-left: auto;
    color: var(--muted);
}

.history-players {
    text-align: center;
    font-size: 15px;
    color: var(--text-strong);
    margin: 6px 0 4px 0;
}

.history-result {
    text-align: center;
    font-size: 13px;
}

.history-result.win {
    color: var(--win);
}

.history-result.loss {
    color: var(--loss);
}

/* 和局：灰蓝 */

.history-result.draw {
    color: #7f9db5;
}

.history-moves {
    font-size: 12px;
    color: var(--muted);
}


/* =====================================
   Column C : Actions
   ===================================== */

#actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 46px;
}

.action {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 15px 16px;
    font-size: 20px;
    color: var(--text-strong);
    transition: background .12s;
}

.action:hover {
    background: var(--panel-hover);
}

.action-icon {
    flex: 0 0 26px;
    height: 26px;
    display: grid;
    place-items: center;
    opacity: .85;
}


/* =====================================
   Leaderboard
   ===================================== */

#leaderboard {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 12px 14px 16px 14px;
}

#leaderboard-head {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}

#leaderboard-head h2 {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    color: var(--text);
}

#leaderboard-more {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
}

#leaderboard-more:hover {
    color: var(--text-strong);
}

.rank-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 14px;
}

.rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-rating {
    margin-left: auto;
    color: var(--text);
}

.rank-delta {
    width: 34px;
    text-align: right;
    font-size: 12px;
}

.rank-delta.up {
    color: var(--win);
}

.rank-delta.down {
    color: var(--loss);
}


/* =====================================
   Modal
   ===================================== */

#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 20px;
}

#overlay.is-open {
    display: flex;
}

.modal {
    width: 366px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.modal-title {
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-strong);
    padding: 15px 16px;
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.modal-block {
    padding: 20px 24px 24px 24px;
    border-bottom: 1px solid var(--line);
}

.modal-foot {
    padding: 16px 24px 20px 24px;
    text-align: center;
}

.slider-label {
    text-align: center;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
}

.slider-label + .slider-label {
    margin-top: 24px;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 14px;
    background: var(--panel-hi);
}

input[type="range"]::-moz-range-track {
    height: 14px;
    background: var(--panel-hi);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 14px;
    background: #4a4744;
    border: 1px solid #565350;
}

input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 14px;
    border-radius: 0;
    background: #4a4744;
    border: 1px solid #565350;
}

input[type="range"]::-moz-range-progress {
    height: 14px;
    background: var(--accent-hi);
}

.slider-wrap {
    position: relative;
}

.slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 14px;
    background: var(--accent-hi);
    pointer-events: none;
}

.mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mode-switch-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.mode-btn {
    padding: 14px 0;
    font-size: 17px;
    background: var(--panel-hi);
    color: var(--text);
    transition: background .12s;
}

.mode-btn:hover {
    background: var(--panel-hover);
}

.mode-btn.is-on {
    background: var(--accent);
    color: #fff;
}

.mode-btn.is-off {
    opacity: .45;
    cursor: not-allowed;
}

.side-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    padding: 22px 10px 20px 10px;
    border-bottom: 1px solid var(--line);
}

.side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    color: var(--muted);
    font-size: 13px;
}

.side-btn:hover {
    color: var(--text-strong);
}

.side-btn.is-on {
    color: var(--text-strong);
}

.side-btn .piece {
    width: 34px;
    height: 34px;
    font-size: 22px;
    border-radius: 4px;
}

.side-btn.is-on .piece {
    box-shadow: 0 0 0 2px var(--accent-hi);
}

.side-btn[disabled] {
    opacity: .3;
    cursor: not-allowed;
}

.primary-btn {
    background: var(--panel-hi);
    color: var(--text-strong);
    font-size: 15px;
    padding: 11px 22px;
    border: 1px solid var(--line);
    transition: background .12s;
}

.primary-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.modal-error {
    color: var(--loss);
    font-size: 13px;
    text-align: center;
    padding: 0 24px 14px 24px;
    display: none;
}

.modal-error.is-on {
    display: block;
}

/* =====================================
   登录 / 注册弹窗
   =====================================

   这里的显示与隐藏一律用 .auth-hidden 这个 class，
   不要用 HTML 的 hidden 属性——

   hidden 属性靠的是浏览器自带的 [hidden]{display:none}，
   优先级低于任何一条作者写的 display 规则。
   本文件里 .field{display:block} 就正好压过了它，
   曾导致该藏起来的手机号字段一直露在外面，
   把登录、注册、找回密码三套表单堆在同一个窗口里。

   .auth-hidden 带 !important，谁也压不过它。
   ===================================== */

.auth-hidden {
    display: none !important;
}

.field-input {
    display: block;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text-strong);
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 12px;
    font-family: inherit;
}

.field-input:last-child {
    margin-bottom: 0;
}

.field-input::placeholder {
    color: var(--muted);
}

.field-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* 手机号 + 获取验证码：同一行 */

.field-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.field-row .field-input {
    flex: 1;
    margin-bottom: 0;
}

.code-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    white-space: nowrap;
    transition: background .12s;
}

.code-btn:disabled {
    background: var(--panel-hi);
    border-color: var(--line);
    color: var(--muted);
    cursor: default;
}

/* 第三方登录图标行
   （分隔线之下、主按钮之上，与参考图一致） */

.provider-icon-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.provider-icon-btn {
    background: var(--panel-hi);
    border: 1px solid var(--line);
    width: 104px;
    padding: 14px 6px 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-family: inherit;
    transition: background .12s, border-color .12s;
}

.provider-icon-btn:hover {
    background: var(--panel-hover);
    border-color: var(--accent);
}

.provider-icon-btn svg {
    display: block;
}

.provider-icon-label {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: var(--text);
}

/* +Cn 是文字图标，不是 svg，
   这里把它撑到和 Google / 微软图标一样高，
   免得三个按钮的图标基线对不齐 */

.provider-icon-cn {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-strong);
    height: 22px;
    line-height: 22px;
}

/* 输入区整块为空时（例如注册第一步只有图标行），
   连同它的下边框一起收起来，
   避免窗口里出现一条无意义的横线 */

#login-fields.auth-hidden + .modal-error {
    padding-top: 14px;
}

.field {
    display: block;
    margin-bottom: 12px;
}

.field span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.field input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text-strong);
    padding: 8px 10px;
    font-size: 14px;
}

.field input:focus {
    outline: none;
    border-color: var(--accent);
}

.link-btn {
    color: var(--accent-hi);
    font-size: 13px;
}

.modal-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}


/* =====================================
   Notifications
   ===================================== */

#bell-pop {
    position: absolute;
    bottom: 26px;
    left: 0;
    width: 250px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
    padding: 10px 12px;
    display: none;
    z-index: 40;
}

#bell-pop.is-open {
    display: block;
}

.pop-title {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.pop-item {
    font-size: 13px;
    padding: 7px 0;
    border-top: 1px solid var(--line);
    display: block;
    width: 100%;
    text-align: left;
}

.pop-item:hover {
    color: var(--text-strong);
}

.pop-item .resume {
    color: var(--accent-hi);
}


/* =====================================
   Toast
   ===================================== */

#toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    background: var(--panel-hi);
    border: 1px solid var(--line);
    color: var(--text-strong);
    padding: 10px 18px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
    z-index: 90;
}

#toast.is-on {
    opacity: 1;
}


/* =====================================
   Responsive
   ===================================== */

/* iPad 横屏（约 901–1180px，比电脑窄一些）：跟电脑版一样的三栏布局，
   只是把三栏宽度、间距、按钮、表格都等比缩小一些。

   以前这一档把右栏（创建对局 / 在线玩家）改成横跨整行的两列，但没有
   重置它在电脑版里的 grid-row: 1 / span 2，结果右栏被压在第 1、2 行，
   跟谜题、大厅叠在了一起——iPad 上看到的"窗口全部重叠"就是这个。

   左栏不能窄于 220px：谜题 / 观战小棋盘是按每格 24px 固定画的
   （9 格 + 坐标约 216px）。≤ 900px 交给下面的手机布局。 */

@media (max-width: 1180px) and (min-width: 901px) {

    :root {
        --sidebar: 90px;
        --gap: 16px;
    }

    #content {
        padding: 16px 18px 34px 18px;
    }

    #brand {
        margin-bottom: 14px;
    }

    #columns {
        grid-template-columns: 220px minmax(0, 1fr) 232px;
    }

    #live-games {
        margin-top: 84px;
    }

    .section-title {
        font-size: 17px;
    }

    /* 大厅 / 对局记录 */

    .lobby-table thead th {
        font-size: 13px;
        padding: 8px 8px;
    }

    .lobby-table td {
        font-size: 14px;
        padding: 5px 8px;
    }

    .lobby-table td.col-icon {
        padding: 5px 6px 5px 10px;
    }

    .lobby-table thead th:first-child {
        width: 38px;
    }

    #lobby-panel {
        min-height: 260px;
    }

    .history-item {
        padding: 9px 10px 7px 10px;
    }

    /* 右栏：创建对局 / 单机对局 / 人机对战 + 在线玩家 */

    #actions {
        gap: 8px;
        margin-bottom: 30px;
    }

    .action {
        gap: 11px;
        padding: 11px 12px;
        font-size: 17px;
    }

    .action-icon {
        flex-basis: 22px;
        height: 22px;
    }

    #leaderboard {
        padding: 10px 11px 12px 11px;
    }

    #leaderboard-head h2 {
        font-size: 16px;
    }

    /* 在线玩家名单：右栏变窄后，给名字多留点地方 */

    #leaderboard .op-row {
        gap: 6px;
    }

    #leaderboard .op-btn {
        padding: 2px 7px;
    }
}

@media (max-width: 820px) {

    :root {
        --sidebar: 88px;
    }

    #content {
        padding: 14px 16px 34px 16px;
    }

    #columns {
        grid-template-columns: minmax(0, 1fr);
    }

    #live-games {
        margin-top: 0;
    }

    #right-column {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    * {
        transition: none !important;
    }
}


/* =====================================
   主页上的实时对局
   =====================================

   电脑版：左列，直接顶在第 1 行——
   Learn / Puzzle / Watch 那三张卡片删掉之后，
   这里接过了它们原来的位置，margin-top 也沿用
   原来 #entries 的 100px，跟中间栏的 Lobby
   标题对齐。

   手机版：靠下面 @media 里的 order
   挪到 Single game 按钮下面，放 2 盘。 */

#live-games {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 100px;
}

.live-card {
    cursor: pointer;

    /* 参考图里棋盘是略微透下去的，
       不与上方那几张实心卡片抢视线——
       它是个入口，不是主角。 */
    opacity: .9;

    transition: opacity .12s;
}

.live-card:hover {
    opacity: 1;
}

/* 一盘棋结束（或被优先级更高的挤下去）之后，
   先暗下来停留 10 秒再移除，
   免得棋盘毫无征兆地凭空消失。 */

.live-card.is-finished {
    opacity: .45;
}

.live-board {
    display: flex;
    justify-content: center;
}

.live-board canvas {
    display: block;
}

.live-player {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    min-height: 20px;
    padding: 3px 0;
}

.live-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 轮到谁走，名字旁边亮一个点——
   小棋盘上没有时钟，
   这是唯一能看出棋局还在动的线索。 */

.live-turn-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 6px;
}


/* =====================================
   谜题小棋盘

   固定占 #live-games 第一个位置，与观战小棋盘
   共用同一套容器（桌面版左列、手机版栅格），
   样式上刻意贴近 .live-card——都是"点一下进
   另一个页面"的入口，视觉上应该是同一类东西，
   不是两套不相关的卡片贴在一起。
   ===================================== */

.puzzle-card {
    cursor: pointer;
    opacity: .9;
    transition: opacity .12s;
}

.puzzle-card:hover {
    opacity: 1;
}

.puzzle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 3px 0;
}

.puzzle-board {
    display: flex;
    justify-content: center;
}

.puzzle-board canvas {
    display: block;
}

.puzzle-solve-text {
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    padding: 3px 0;
}


/* =====================================
   顶栏（仅窄屏可见）
   =====================================

   电脑版上完全隐藏；
   下面 @media 里再打开。 */

#topbar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 40;
}

#menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    padding: 0;
}

#menu-toggle span {
    display: block;
    height: 3px;
    background: var(--text-strong);
}

#topbar-title {
    font-size: 19px;
    color: var(--muted);
}

/* 用户名靠右——
   电脑版里它在侧栏左下角，
   侧栏一收起来就跟着不见了。 */

#topbar-account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 0;
}

#topbar-avatar {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-hi);
    border: 1px solid var(--line);
    font-size: 13px;
}

/* 抽屉打开时盖住内容的那层。
   点它可以关掉抽屉。 */

#drawer-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 45;
}

#drawer-mask.is-on {
    display: block;
}


/* =====================================
   手机版主页
   =====================================

   断点取 900px，与站内其它页面一致。

   整体思路：
   三列网格拉成一列，
   再用 order 把各块排成参考图的顺序：

     Learn / Puzzle / Watch（横排三个）
     Lobby
     Create a game + Play against ai（一行两个）
     Single game（单独一行，居中，窄一些）
     实时对局（0~2 盘）
     Game History
   ===================================== */

@media (max-width: 900px) {

    #topbar {
        display: flex;
    }

    /* 站名已经在顶栏里了，
       内容区里那个大标题就是重复的。 */

    #brand {
        display: none;
    }

    /* ---- 侧栏变抽屉 ----

       平时整个移到屏幕左边外面，
       点 ☰ 才滑出来。

       用 transform 而不是改 display，
       是为了有个滑动的过程，
       直接跳出来会很突兀。 */

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: auto;
        align-self: auto;
        width: 220px;
        flex: 0 0 220px;
        background: var(--bg);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .18s ease;
        padding-top: 18px;
        overflow-y: auto;
    }

    #sidebar.is-open {
        transform: translateX(0);
    }

    /* 抽屉里已经有导航了，
       底部那块账号信息是电脑版的位置，
       手机上它在顶栏右上角。 */

    #sidebar-foot,
    #tray {
        display: none;
    }

    #content {
        padding: 14px 14px 40px 14px;
    }

    /* ---- 一列 ---- */

    #columns {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #center-column {
        order: 2;
        display: contents;
    }

    /* #center-column 用了 display: contents，
       它的子元素直接参与外层的 flex 排序，
       所以这里给每个子块单独指定顺序。 */

    #lobby-title,
    #lobby-panel {
        order: 2;
    }

    #right-column {
        order: 3;
        display: contents;
    }

    /* ---- 三个操作按钮 ----

       参考图：
       Create a game 和 Play against ai 并排一行，
       Single game 单独一行、居中、略窄。 */

    #actions {
        order: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 14px 0 0 0;
    }

    #btn-single {
        /* 跨满两列，再用 justify-self 收窄居中 */
        grid-column: 1 / -1;
        justify-self: center;
        width: 72%;
        justify-content: center;
    }

    .action {
        padding: 14px 12px;
        font-size: 16px;
    }

    /* ---- 实时对局 ----

       Single game 下面。

       两盘时并排，一盘时占满宽度居中
       （auto-fit 会自动做到这一点）。 */

    #live-games {
        order: 4;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin: 18px 0 0 0;
    }

    .live-player {
        font-size: 11px;
        gap: 4px;
    }

    .puzzle-label,
    .puzzle-solve-text {
        font-size: 11px;
    }

    /* ---- Game History ----

       实时对局下面。
       一盘对局都没有时 #live-games 整块收起，
       它会自然顶上来。 */

    #history-title,
    #history-panel,
    #history-more-wrap,
    #history-page {
        order: 5;
    }

    /* 排行榜放最后 */

    #leaderboard {
        order: 6;
        margin-top: 22px;
    }
}