/* 游戏中心专用样式：页面骨架、房间卡片、房间内布局、棋盘与模态框 */

/* ------------------------------------------------------------------ 基础

   生产页面上 Tailwind 的 preflight 会把所有元素设成 border-box，本文件里凡是
   「写死高度 + 内边距/边框」的规则都是按这个口径写的（最典型的是触摸端
   `.gc-btn { min-height: 40px; padding: 7px 14px; border: 1px }`：border-box 下
   就是一个 40px 的按钮，content-box 下会变成 56px——每一条按钮行凭空高 16px，
   棋盘就少一行格子）。这里显式写一遍，不依赖那个 CDN 脚本：
   线上本来就是 border-box，等于没改；离线脚手架、preflight 加载失败时口径也一致。 */
body,
body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

/* preflight 同样会把标题/段落的默认外边距清掉，模态框高度按这个口径量 */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, figure, dl, dd, ul, ol {
    margin: 0;
}

/* ------------------------------------------------------------------ 页面骨架 */

.gc-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65px);
    min-height: 480px;
    overflow: hidden;
}

.gc-lobby {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* 左侧游戏列表 */
.gc-game-list {
    width: 190px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid #e5e7eb;
    background: #fff;
}

.gc-game-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    color: #374151;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gc-game-item:hover {
    background: rgba(167, 243, 208, 0.25);
}

.gc-game-item.active {
    background: rgba(167, 243, 208, 0.4);
    border-left-color: #10b981;
    color: #065f46;
    font-weight: 600;
}

.gc-game-item .gc-game-count {
    margin-left: auto;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
}

/* 右侧房间大厅 */
.gc-hall {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
}

/* 连接状态提示：绝对定位盖住整个大厅，内容居中 */
.gc-hall-status {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: rgba(249, 250, 251, 0.92);
    color: #6b7280;
    font-size: 14px;
    cursor: default;
}

.gc-hall-status[hidden] {
    display: none;
}

/* 只作用于状态图标；用 > 限定，避免波及「重新连接」按钮里的 fa 图标 */
.gc-hall-status > i {
    font-size: 34px;
    color: #d1d5db;
    animation: gc-status-pulse 1.6s ease-in-out infinite;
}

.gc-hall-status p {
    margin: 0;
    max-width: 320px;
    line-height: 1.6;
}

@keyframes gc-status-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

.gc-hall-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.gc-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
    margin-right: 18px;
}

.gc-stat strong {
    color: #059669;
    font-size: 18px;
    font-weight: 700;
}

.gc-hall-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 28px;
}

.gc-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
}

/* 房间卡片 */
.gc-room-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 148px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gc-room-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.45);
    border-color: #6ee7b7;
}

.gc-room-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
    word-break: break-all;
}

.gc-room-id {
    font-size: 12px;
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-room-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.gc-badge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    white-space: nowrap;
}

.gc-badge-game {
    background: rgba(167, 243, 208, 0.55);
    color: #065f46;
}

.gc-badge-playing {
    background: #fef3c7;
    color: #92400e;
}

.gc-badge-private {
    background: #ede9fe;
    color: #5b21b6;
}

.gc-room-players {
    margin-left: auto;
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    white-space: nowrap;
}

.gc-avatar-stack {
    display: flex;
    margin-top: auto;
    padding-top: 10px;
    align-items: center;
}

.gc-avatar-stack img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    background: #f3f4f6;
    object-fit: cover;
}

.gc-avatar-stack img:first-child {
    margin-left: 0;
}

.gc-avatar-more {
    margin-left: -8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.gc-empty {
    text-align: center;
    color: #9ca3af;
    padding: 70px 20px;
    font-size: 14px;
}

/* ------------------------------------------------------------------ 房间内布局 */

.gc-room {
    display: flex;
    flex: 1;
    min-height: 0;
}

.gc-room-main {
    flex: 1;
    min-width: 0;
    /* 高度链的一环：少了它，游戏区内容一高，这一层就跟着长高、溢出 .gc-page，
       被 overflow:hidden 裁掉又滚不到（最下面那块内容就彻底看不见了）。
       有了它，游戏区高度由 .gc-page 定死，内容高出多少都由 .gc-game-area 自己滚。 */
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
}

.gc-room-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    /* 不换行 + 固定最小高度：按钮是随状态增减的（对局中才有「不玩了」、
       房主才有「开始/重新开始」），工具栏要是从两行塌回一行，下面整个游戏区
       连棋盘都会跟着上移一截。挤不下就横向滚动，高度始终不变。 */
    flex-wrap: nowrap;
    min-height: 52px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gc-room-toolbar::-webkit-scrollbar {
    display: none;
}

/* 标题在 DOM 里排在按钮前面（手机端要单独占一行），桌面端用 order 换回
   「按钮在左、标题在右」，和改动前一致 */
.gc-toolbar-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.gc-toolbar-actions {
    order: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 成员 + 聊天抽屉的开关按钮，只有窄屏才显示 */
.gc-room-toolbar .gc-side-toggle {
    display: none;
}

.gc-room-title-text {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-game-area {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    /* 滚动条出现与否不再改变可用宽度。否则结算内容一多、出了纵向滚动条，
       棋盘会在同一帧里按新的宽度重算尺寸，看起来就是抖一下。
       这条也保证 #gcGameArea > div{height:100%} 后面那套百分比高度是稳的。 */
    scrollbar-gutter: stable;
}

/* gameHost 要有个确定的高度，里面 .gc-board-wrap 的 min-height:100% 才算得出来 */
.gc-game-area > div {
    height: 100%;
}

.gc-side {
    width: 288px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e7eb;
    background: #fff;
    min-height: 0;
}

.gc-members {
    height: 42%;
    min-height: 130px;
    overflow-y: auto;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px;
}

.gc-member {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 13px;
    color: #374151;
}

.gc-member:hover {
    background: #f9fafb;
}

.gc-member img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
}

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

.gc-member-tag {
    margin-left: auto;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    flex-shrink: 0;
}

.gc-member-tag.owner {
    background: rgba(167, 243, 208, 0.7);
    color: #065f46;
}

.gc-member-tag.turn {
    background: #fde68a;
    color: #92400e;
}

.gc-section-title {
    font-size: 12px;
    color: #9ca3af;
    padding: 8px 10px 4px;
    letter-spacing: 0.04em;
}

.gc-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gc-chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
}

.gc-chat-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.gc-chat-row img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: #f3f4f6;
}

.gc-chat-body {
    min-width: 0;
}

.gc-chat-name {
    color: #9ca3af;
    font-size: 11px;
    margin-bottom: 1px;
}

.gc-chat-text {
    color: #1f2937;
    word-break: break-word;
    white-space: pre-wrap;
}

.gc-chat-system {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    padding: 1px 0;
}

.gc-chat-form {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e5e7eb;
}

.gc-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}

.gc-input:focus {
    border-color: #6ee7b7;
}

/* ------------------------------------------------------------------ 按钮 */

.gc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.gc-btn-primary {
    background: #10b981;
    color: #fff;
}

.gc-btn-primary:hover {
    background: #059669;
}

.gc-btn-soft {
    background: rgba(167, 243, 208, 0.5);
    color: #065f46;
}

.gc-btn-soft:hover {
    background: rgba(110, 231, 183, 0.65);
}

.gc-btn-ghost {
    background: #f3f4f6;
    color: #374151;
}

.gc-btn-ghost:hover {
    background: #e5e7eb;
}

.gc-btn-danger {
    background: #fff1f2;
    color: #be123c;
}

.gc-btn-danger:hover {
    background: #ffe4e6;
}

.gc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ 模态框 */

.gc-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    padding: 20px;
}

.gc-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    padding: 22px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
    animation: gc-pop 0.16s ease-out;
}

@keyframes gc-pop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.gc-modal h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.gc-field {
    margin-bottom: 15px;
}

.gc-field label {
    display: block;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
}

.gc-field .gc-input {
    width: 100%;
}

.gc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 11px;
    cursor: pointer;
}

.gc-check input {
    width: 15px;
    height: 15px;
    accent-color: #10b981;
    cursor: pointer;
}

.gc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

/* ------------------------------------------------------------------ 棋盘通用 */

/* 棋盘的三段式结构：上下各一段柔性、棋盘夹在中间。
   为什么要绕这一下：棋盘上方任何一个元素高度变化（操作条收起、状态栏文字换行、
   布阵面板消失、围棋子数明细出现）都会把棋盘顶上去。让上下两段把这部分变化吃掉，
   棋盘的位置就只由容器高度决定，和上下两段各自装了什么无关。

   两段都用 flex:1 1 0（基准 0，只按比例分）：高度 = (容器高 − 棋盘 − 间距) / 2，
   仍然是常数，而且富余是**上下均分**的 —— 大屏上棋盘落在房间正中，而不是贴着底边
   （基准写 auto 就会把内容高度算进去，棋盘位置就重新跟内容挂上钩了）。 */
.gc-board-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    /* 必须写 height 而不是 min-height：写成 min-height 时，内容一旦比容器高，
       高度就变成「内容高度」，flex:1 那段没有富余空间可吃，棋盘照样被顶动。
       定成容器高度后，上面那段的高度 = 容器高度 − 棋盘 − 底槽，是个常数。 */
    height: 100%;
    min-height: 0;
}

/* 棋盘上方：状态栏、操作条、布阵面板、结算明细都放这里。
   内容贴底（靠首个孩子的 margin-top:auto），所以仍然紧挨着棋盘上沿，观感和以前一致。
   故意不写 overflow（它不是滚动容器）：这样「自动最小高度 = 内容高」才生效，
   分到的份额不够装内容时（手机上斗地主的三家面板、海军棋的布阵面板）这一段
   会自己撑高，而不是把状态栏、认输按钮压进一个要滚才能看全的盒子里 ——
   代价是棋盘会略微跟着移动，换的是内容永远完整可见。
   份额够装时它按 1:1 走，棋盘稳稳落在正中，和上下装了什么都不相干。

   --gc-top-min 是各游戏自己声明的「我的信息面板至少要这么高」。不声明（默认 auto）
   就完全按 1:1 分；手机上份额装不下、又不想让棋盘跟着面板收起而上下跳的游戏
   （斗地主的三家面板、海军棋的布阵面板）把它设成自己面板的高度，这一段的下限
   就恒等于那个高度，棋盘不再随面板增减移动。它只是下限，内容更多时照旧撑高。 */
.gc-board-wrap > .gc-top {
    flex: 1 1 0;
    /* 默认值必须是 auto 不能是 0：显式写 0 会关掉「自动最小高度 = 内容高」，
       上面说的「撑高、不压内容」就失效了 */
    min-height: var(--gc-top-min, auto);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 别用 justify-content: flex-end / center：内容一旦比这段高，开头那块会被顶到
       负坐标上，既画不出来、也滚不到（scrollHeight 就等于 clientHeight，滚动范围
       是 0）。手机上布阵时状态栏里的「认输」就会变成半截、永远按不着。
       换成「首个孩子吃掉全部富余（auto 外边距 → 没富余时是 0）+ 从顶部开始排」，
       贴底的观感不变，内容超高时是从顶部完整排下来。 */
    justify-content: flex-start;
    gap: 14px;
}

.gc-board-wrap > .gc-top > :first-child {
    margin-top: auto;
}

/* 里面这些块不许被压扁：空间不够时状态栏会缩成 0 高、内容照样撑出来，
   看起来就是「状态栏没了」。 */
.gc-board-wrap > .gc-top > * {
    flex-shrink: 0;
}

/* 除了上面那一段，其余全是固定件（棋盘、舰队卡、底槽）：空间不够时只让 .gc-top
   变矮，棋盘的落点就只由「容器高 − 下面那几块」决定。
   不让它们跟着压缩还有一层原因：画布被纵向压扁的话格距就变了，点击会算错行。 */
.gc-board-wrap > :not(.gc-top) {
    flex-shrink: 0;
}

/* 棋盘下方：对局中空着，结束时放胜利横幅。
   和上面那段平分富余，棋盘就落在正中；内容贴顶，结算横幅仍然紧挨着棋盘下沿。
   上面 52px 是地板不是固定值：手机这种上下都没有富余的场景下，保证结算横幅那一行
   放得下。「黑 X 子 / 白 Y 子」这类长文本要放到 .gc-top 里去。 */
.gc-board-wrap > .gc-bottom {
    flex: 1 1 0;
    width: 100%;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* 不加间距：槽位里的东西贴顶排，多一个间距就等于把地板抬高一截，
       空着的时候（没有结算条）和结算时的高度就对不上了。 */
    gap: 0;
}

/* 游戏区又矮又宽（手机横屏：844×390 的上下一减，游戏区只有 800×250）：
   上下两段挪到棋盘左右，变成「状态栏 | 棋盘 | 结算槽」。竖着排的时候纵向要扣掉
   状态栏和底槽那 180 多像素，250 高的游戏区扣完只剩几十像素，棋盘只能缩到最小格；
   横着排之后纵向一点都不扣，棋盘直接由游戏区高度决定。
   宽高由 .gc-board-wrap.gc-short 决定（JS 里的 SHORT_SIDE / SHORT_GAP 要对上）。 */
.gc-board-wrap.gc-short {
    flex-direction: row;
    /* 不能用 stretch：画布的高度是 auto，被拉长就变形了 */
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.gc-board-wrap.gc-short > .gc-top,
.gc-board-wrap.gc-short > .gc-bottom {
    flex: 0 0 148px;
    width: 148px;
    /* 原来是 flex:1（吃掉富余高度）和一个 52px 的底槽高度，横排下都不适用：
       两列按内容高、超过游戏区高就自己滚 */
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    /* 列里的东西（状态栏、结算条、按钮）撑满列宽，别挤成一列字 */
    align-items: stretch;
}

/* 竖排时状态栏靠 margin-top:auto 贴着棋盘上沿；横排下这段高度就是内容高，
   那个 auto 外边距没有作用，留着反而让内容在列里贴底、和棋盘对不齐 */
.gc-board-wrap.gc-short > .gc-top > :first-child {
    margin-top: 0;
}

.gc-board-wrap.gc-short > .gc-bottom {
    min-height: 0;
}

/* 148px 宽的列里，状态栏原来那条「一行排开」排不下了：允许换行，字号和内边距
   按手机那一档收（和 ≤640 那条口径一致），不然一列字会横着溢出列外 */
.gc-board-wrap.gc-short .gc-status-bar {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    gap: 6px;
    padding: 6px 8px;
    line-height: 1.4;
}

.gc-board-wrap.gc-short .gc-status-bar .gc-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

/* 结算横幅也是一样：右边那列只有 148px，「你赢了！✕ 连成一线获胜」被省略号截掉之后
   分数/原因就没了。这一列的高度是跟着内容走的，多占一两行不挤棋盘（它在棋盘旁边） */
.gc-board-wrap.gc-short .gc-result {
    padding: 8px 10px;
    gap: 6px;
}

.gc-board-wrap.gc-short .gc-result > span {
    white-space: normal;
    text-align: center;
}

.gc-status-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
    color: #374151;
    background: #fff;
    border-radius: 11px;
    padding: 9px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gc-turn-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

/* 轮到我：状态栏描一圈绿、行棋点呼吸。类名由 room.js 统一挂（所有游戏都有），
   只在行棋方是自己的时候挂着，所以不用额外清理。全部用 box-shadow，
   不占布局 —— 棋盘的位置不会被这个动画推动。 */
.gc-board-wrap.gc-my-turn .gc-status-bar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 0 0 1.5px #6ee7b7;
}

.gc-board-wrap.gc-my-turn .gc-turn-dot {
    animation: gcTurnPulse 1.5s ease-in-out infinite;
}

@keyframes gcTurnPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }
}

/* 结算横幅：图标和文字并排一行。底槽高度必须恒定，所以这里不能出现
   「文字换行 → 横幅变高 → 棋盘被顶走」，超长就省略号截断。 */
.gc-result {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    background: rgba(167, 243, 208, 0.4);
    border: 1px solid #6ee7b7;
    color: #065f46;
    padding: 10px 18px;
    border-radius: 11px;
    font-weight: 600;
}

.gc-result > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gc-canvas {
    background: #f0b872;
    border-radius: 8px;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.35);
    touch-action: manipulation;
    max-width: 100%;
}

/* DOM 棋盘（飞行棋 / 海军棋） */
.gc-grid-board {
    display: grid;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.3);
}

.gc-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    user-select: none;
}

.gc-clickable {
    cursor: pointer;
}

.gc-clickable:hover {
    outline: 2px solid #10b981;
    outline-offset: -2px;
    z-index: 3;
}

.gc-plane {
    width: 76%;
    height: 76%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    font-size: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.gc-ship {
    background: #64748b;
    border-radius: 3px;
}

.gc-shot-miss {
    background: #bfdbfe;
}

.gc-shot-hit {
    background: #fca5a5;
}

.gc-sunk {
    background: #7f1d1d;
}

/* 滚动条美化 */
.gc-hall-body::-webkit-scrollbar,
.gc-members::-webkit-scrollbar,
.gc-chat-log::-webkit-scrollbar,
.gc-game-area::-webkit-scrollbar,
.gc-game-list::-webkit-scrollbar {
    width: 8px;
}

.gc-hall-body::-webkit-scrollbar-thumb,
.gc-members::-webkit-scrollbar-thumb,
.gc-chat-log::-webkit-scrollbar-thumb,
.gc-game-area::-webkit-scrollbar-thumb,
.gc-game-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ 窄屏适配（平板 + 手机） */

@media (max-width: 900px) {
    .gc-page {
        /* 高度必须是确定值：棋盘那套定位（底槽定高、上段吃掉余量）全靠它。
           原来这里写的是 height:auto，整条高度链一散，棋盘又会跟着内容上下跑。
           用 dvh：手机上 100vh 算的是「地址栏收起后」的高度，会把底部裁掉又滚不到。 */
        height: calc(100vh - 65px);
        height: calc(100dvh - 65px);
        /* 横屏手机整屏还不到 480 高，桌面那个下限不能沿用 */
        min-height: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 页面上 body 带着 Tailwind 的 min-h-screen（= 100vh，手机上算的是
       「地址栏收起后」的高度），比实际可视区高一截，整页会多出一段能滚的空白。
       选择器带上类名是为了压过 Tailwind 的 .min-h-screen（同类优先级还要靠顺序，
       而它注入的样式在 gamecenter.css 后面）。 */
    body.min-h-screen {
        min-height: 0;
    }

    .gc-lobby {
        flex-direction: column;
    }

    .gc-game-list {
        width: 100%;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .gc-game-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 12px 16px;
    }

    .gc-game-item.active {
        border-left: none;
        border-bottom-color: #10b981;
    }

    .gc-room {
        position: relative;
        flex-direction: column;
    }

    /* 游戏区的内边距直接吃掉棋盘的可画面积（上下左右都吃）：手机上一律收窄。
       棋盘是按「可用宽/高」定尺寸的，少一层边距就多一圈棋盘。 */
    .gc-game-area {
        padding: 10px;
    }

    /* 工具栏压成一行：左上角房间名（截断）+ 右侧按钮行（挤不下就横向滚动）。
       原来这里分两行，390px 的手机上量出来 116px —— 快占满屏高的六分之一，
       全是从棋盘身上抠走的。一行是固定高度，按钮增减/换行都不会让它变高变矮，
       下面整个游戏区连棋盘就不会跟着上移。 */
    .gc-room-toolbar {
        flex-wrap: nowrap;
        padding: 6px 10px;
        gap: 8px;
        min-height: 52px;
    }

    /* 标题让位给按钮，但不让到没有：给个下限，剩下的宽度留给按钮横向滚动 */
    .gc-toolbar-title {
        order: 0;
        flex: 0 1 auto;
        min-width: 92px;
    }

    .gc-toolbar-actions {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* 横向滚动的按钮行不能带滚动条：headless 里量出来它占了 17px 高，
       整条工具栏就跟着高 17px，而这些都是从棋盘身上抠的 */
    .gc-toolbar-actions::-webkit-scrollbar {
        display: none;
    }

    .gc-toolbar-actions::-webkit-scrollbar {
        display: none;
    }

    .gc-room-toolbar .gc-side-toggle {
        display: inline-flex;
    }

    /* 成员 + 聊天做成底部抽屉：默认收起，工具栏「聊天」按钮展开 */
    .gc-side {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        width: 100%;
        height: 42vh;
        height: 42dvh;
        min-height: 200px;
        max-height: 80%;
        display: none;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -14px 30px -14px rgba(0, 0, 0, 0.35);
    }

    .gc-room.gc-side-open .gc-side {
        display: flex;
    }

    /* 抽屉占了下半屏，键盘弹出来时输入框不能被顶出去 */
    .gc-chat-form {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* 弹窗：手机上两个按钮各占半行，弹窗本身别超出屏幕 */
    .gc-modal {
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------ 手机 */

@media (max-width: 640px) {
    .gc-hall-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
    }

    .gc-hall-head .gc-btn {
        width: 100%;
        justify-content: center;
    }

    .gc-hall-body {
        padding: 12px 12px 24px;
    }

    /* 卡片一排一张：手机上两列会把房间名和人数挤扁 */
    .gc-room-grid {
        grid-template-columns: 1fr;
    }

    .gc-room-card {
        min-height: 0;
    }

    .gc-game-area {
        padding: 8px;
    }

    /* 状态栏：手机上文字一换行就是十几像素的棋盘高度。字号、间距、内边距一起收，
       同一句话能少换一行，棋盘就多一行格子。里面的按钮也跟着矮一点，
       别把整条撑成「按钮那么高」——认输有二次确认，按小一点也不怕误触。 */
    .gc-status-bar {
        font-size: 12px;
        gap: 8px;
        padding: 5px 10px;
        line-height: 1.4;
    }

    .gc-status-bar .gc-btn {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    .gc-room-toolbar {
        padding: 6px 8px;
    }

    .gc-modal-actions {
        flex-direction: column-reverse;
    }

    .gc-modal-actions .gc-btn {
        width: 100%;
        justify-content: center;
    }

    .gc-modal-mask {
        padding: 12px;
    }

    /* 右上角提示原来贴在 4px 处，会盖住吸顶的页头（样式是 CDN 上的库注入的，
       改不了源码，只能从页面样式里用 !important 压过去） */
    #notificationContainer {
        top: 72px !important;
        right: 10px !important;
    }

    #notificationContainer .notification-item {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* 海军棋的两张舰队卡片：手机上默认会因为 min-width 换行上下堆，
       各占 200 多像素高，把棋盘压得很小 */
    .bs-fleet {
        min-width: 0;
        flex: 1 1 140px;
    }
}

/* ------------------------------------------------------------------ 触摸端 */

@media (pointer: coarse) {
    /* 手指点得中：按钮加高，输入框 16px（小于 16px 时 iOS 聚焦会自动放大页面） */
    .gc-btn {
        min-height: 40px;
    }

    .gc-btn:active {
        background: rgba(16, 185, 129, 0.22);
    }

    .gc-input {
        font-size: 16px;
    }

    /* 长按不要弹系统菜单（棋盘上按久了会冒出来） */
    .gc-canvas,
    .bs-grid,
    .gc-grid-board {
        -webkit-touch-callout: none;
    }

    .gc-clickable:hover {
        outline: none;
    }
}

/* ------------------------------------------------------------------ 横屏手机

   横屏时高度比宽度金贵得多：844×390 的机器上，页头 65px + 房间工具栏 53px
   就吃掉了 390 里的 118，游戏区只剩 252 高 —— 围棋盘再怎么算也只有 238，
   而横向还空着 400 多像素。页头在横屏下只是 logo 和头像，先收起来；
   .gc-page 吃满整个视口，游戏区就有 337，棋盘能到 328（+38%）。

   只对触摸设备生效：桌面上把窗口拖成又矮又宽（比如 1280×500）时页头不该消失。 */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    #mainHeader {
        display: none;
    }

    /* 页头没了，高度不用再减 65；横屏时刘海在左右两侧 */
    .gc-page {
        height: 100dvh;
        min-height: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}