/* ===== 全局重置 & 字体 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
    background: #f0f4f8;
    color: #2d3748;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #edf2f7;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ===== 图标（client/assets/icons/*.png，统一 3× 导出） =====
   1em 让图标随所在文字自动缩放：.btn 0.9rem→14.4px、.btn.small 0.8rem→12.8px、
   页签 0.95rem→15.2px。源图是这些设计尺寸的 3 倍（42/48/60px），所以 DPR 1~3
   全都是把源图**缩小**——缩小清晰，放大才糊（1× 导出曾在高分屏上整体发虚）。
   （唯一的例外是模态框标题 1.5rem，见下面的 #modal-content h2 .ui-icon。） */
.ui-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* 深色按钮上的图标必须转白：brightness(0) 把描边压成黑（保留 alpha 抗锯齿），
   invert(1) 再翻成纯白。这样一套深色图标同时服务浅色与深色按钮，
   无需为白色版重新出图。 */
.btn.primary .ui-icon,
.btn.success .ui-icon,
.btn.warning .ui-icon,
.btn.info .ui-icon,
.btn.danger .ui-icon,
.btn-close .ui-icon,
.turn-countdown.urgent .ui-icon,
.vote-countdown.urgent .ui-icon {
    filter: brightness(0) invert(1);
}

/* ===== 通用按钮 ===== */
.btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #e2e8f0;
    color: #2d3748;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn:active {
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn.primary {
    background: #3182ce;
    color: white;
}

.btn.primary:hover {
    background: #2b6cb0;
}

.btn.success {
    background: #38a169;
    color: white;
}

.btn.success:hover {
    background: #2f855a;
}

.btn.warning {
    background: #d69e2e;
    color: white;
}

.btn.warning:hover {
    background: #b7791f;
}

.btn.info {
    background: #3182ce;
    color: white;
}

.btn.info:hover {
    background: #2b6cb0;
}

.btn.danger {
    background: #e53e3e;
    color: white;
}

.btn.danger:hover {
    background: #c53030;
}

.btn.small {
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* ===== 顶部栏 ===== */
#app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 8px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 20;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Logo 是插画而非字体图标，故用固定尺寸 32×32（源图 logo.png 是 96px = 3×） */
.logo .icon {
    width: 32px;
    height: 32px;
    display: block;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.logo h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2b6cb0;
    letter-spacing: -0.5px;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    background: #e2e8f0;
    color: #4a5568;
    transition: all 0.3s ease;
}

.status-badge.online {
    background: #c6f6d5;
    color: #276749;
    box-shadow: 0 0 0 2px #48bb78 inset;
}

.status-badge.offline {
    background: #fed7d7;
    color: #9b2c2c;
    box-shadow: 0 0 0 2px #fc8181 inset;
}

.turn-info {
    background: #edf2f7;
    padding: 4px 14px;
    border-radius: 16px;
    font-weight: 500;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    min-width: 100px;
    justify-content: center;
}

.turn-info.playing {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    color: #2b6cb0;
}

.turn-info.waiting {
    background: #fefcbf;
    border: 1px solid #f6e05e;
    color: #975a16;
}

/* 房间控制区域 */
.header-room {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 200px;
    justify-content: flex-end;
}

#room-join-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

#room-join-controls input {
    padding: 6px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.9rem;
    width: 160px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#room-join-controls input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

#room-info-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ebf8ff;
    padding: 4px 12px 4px 16px;
    border-radius: 30px;
    border: 1px solid #bee3f8;
}

#room-info-display .room-name {
    font-weight: 600;
    color: #2b6cb0;
    font-size: 1rem;
}

/* 页头"我的昵称"（H22）：它同时是右上角账号菜单的触发按钮——
   房间内也显示（但房间内不提供"改名"，菜单里只剩"我的战绩"） */
.my-name {
    font-size: 0.85rem;
    color: #4a5568;
    background: #edf2f7;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    align-self: center;
}

/* ---- 右上角账号菜单（D1）----
   触发按钮沿用 .my-name 的胶囊外观，点开才是下拉面板。
   配色跟着登录态走（`body.is-logged-in` 由 client/auth.js 切换）：
   游客灰、已登录绿——绿色沿用原先"账号名"那块胶囊的色，视觉上是一脉的。
   原先「登录/退出/我的战绩/昵称/改名」五个控件并排，页头太挤。 */
.account-menu-wrap {
    position: relative;
    align-self: center;
}

.account-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.6;
    cursor: pointer;
}

.account-menu-btn:hover {
    background: #e2e8f0;
}

body.is-logged-in .account-menu-btn {
    background: #c6f6d5;
    color: #22543d;
}

body.is-logged-in .account-menu-btn:hover {
    background: #9ae6b4;
}

/* 首字头像：不用额外素材，"谁"一眼能看出，且随身份变化 */
.menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a0aec0;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

body.is-logged-in .account-menu-btn .menu-avatar {
    background: #38a169;
}

/* 没有可选项时（游客在房间里）退化成一条普通昵称：无箭头、不成手型 */
.account-menu-btn.no-menu {
    cursor: default;
}

.account-menu-btn.no-menu .caret {
    display: none;
}

.caret {
    font-size: 0.7em;
    color: #718096;
}

.account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 176px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.account-menu[hidden] {
    display: none;
}

.menu-info {
    padding: 6px 10px 8px;
    margin: -6px -6px 4px;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 9px 9px 0 0;
    background: #f7fafc;
    font-size: 0.78rem;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: #2d3748;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover {
    background: #edf2f7;
}

.menu-item[hidden] {
    display: none;
}

.menu-item .ui-icon {
    opacity: 0.75;
}

/* 菜单里的"主行动"与"危险动作"：与 .btn.primary / .btn.danger 同一色系，
   但不填满整块——菜单项填满底色会显得比按钮还重 */
.menu-item.primary {
    background: #ebf8ff;
    color: #2b6cb0;
    font-weight: 500;
}

.menu-item.primary:hover {
    background: #bee3f8;
}

.menu-item.danger {
    color: #c53030;
}

.menu-item.danger:hover {
    background: #fff5f5;
}

/* 登录/注册弹窗的行式表单（与既有弹窗风格一致） */
.form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.form-row label {
    flex: 0 0 4.5em;
    font-size: 0.85rem;
    color: #4a5568;
}

.form-row input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-error {
    min-height: 1.2em;
    font-size: 0.82rem;
    color: #c53030;
    margin: 4px 0 8px;
}

/* 我的战绩 */
.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 10px 0 14px;
    font-size: 0.85rem;
    color: #4a5568;
}

.stat-row strong {
    color: #2b6cb0;
    font-size: 1rem;
}

.match-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.match-table th,
.match-table td {
    padding: 5px 6px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.match-table th {
    color: #718096;
    font-weight: 500;
}

.match-table tr.won td {
    background: #f0fff4;
    color: #22543d;
}

/* 掉线但保留座位的玩家 */
#player-list li.offline {
    opacity: 0.6;
}

#player-list .player-offline {
    font-size: 0.72rem;
    color: #975a16;
    background: #fefcbf;
    padding: 0 5px;
    border-radius: 8px;
    margin-left: 4px;
}

/* 房主标识（左下角玩家栏，F22：房主身份会转移，故每次状态更新都重绘） */
#player-list li.is-host {
    font-weight: 600;
}

#player-list .player-host {
    font-size: 0.72rem;
    color: #2b6cb0;
    background: #bee3f8;
    padding: 0 5px;
    border-radius: 8px;
    margin-left: 4px;
}

/* 回合限时：数字与"秒"紧挨着，不要被 flex 的 space-between 拉开 */
#modal-content .turn-input-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#modal-content .turn-input-group .unit {
    font-size: 0.9rem;
    color: #4a5568;
}

#modal-content .turn-input-group input[type="number"] {
    width: 64px;
}

/* "我"标识，便于区分自己与他人 */
#player-list .player-me {
    font-size: 0.72rem;
    color: #4a5568;
    background: #e2e8f0;
    padding: 0 5px;
    border-radius: 8px;
    margin-left: 4px;
}

/* 表决倒计时（K22）：投票弹窗内 */
.vote-countdown {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: #2b6cb0;
    background: #ebf8ff;
    padding: 3px 10px;
    border-radius: 10px;
    margin: 6px auto;
    width: fit-content;
}

.vote-countdown:empty {
    display: none;
}

.vote-countdown.urgent {
    color: #fff;
    background: #e53e3e;
    font-weight: 700;
}

/* 在线标志：从页头挪到画布右上角（I23）。
   放右上而非左下，是为了不与画布底部中央的「轮到你了」横幅、底部两侧的按钮重叠。 */
#canvas-container #connection-status {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* 轮到我时的醒目提示：画布底部中央的大标签 */
.my-turn-banner {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #38a169, #2f855a);
    padding: 8px 26px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(47, 133, 90, 0.45);
    white-space: nowrap;
    pointer-events: none;
    animation: myTurnPulse 1.6s ease-in-out infinite;
}

.my-turn-banner:empty {
    display: none;
}

@keyframes myTurnPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.06); }
}

/* 轮到别人时画布不加边框；轮到我时给画布一个绿色描边提示 */
#canvas-container.my-turn {
    box-shadow: 0 0 0 3px #38a169, 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* 回合限时倒计时：叠在画布左上角，要够醒目 */
.turn-countdown {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1a365d;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #90cdf4;
    padding: 1px 8px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
}

.turn-countdown:empty {
    display: none;
}

/* 最后 5 秒：标红并轻微脉动提醒 */
.turn-countdown.urgent {
    color: #fff;
    background: #e53e3e;
    border-color: #c53030;
    animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* 开始按钮旁的说明（为什么现在看不到开始按钮） */
.start-hint {
    font-size: 0.78rem;
    color: #975a16;
    background: #fefcbf;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    align-self: center;
}

.start-hint:empty {
    display: none;
}

#copy-room-btn {
    background: transparent;
    border: none;
    color: #2b6cb0;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

#copy-room-btn:hover {
    background: #bee3f8;
}

/* ===== 主区域 ===== */
#game-main {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 12px;
    gap: 12px;
    background: #f0f4f8;
}

/* 左侧画布容器 */
#canvas-container {
    flex: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

#canvas-container:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

#main-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #ffffff;
    cursor: crosshair;
}

#canvas-overlay {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    pointer-events: none;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

/* 右侧面板 */
#side-panel {
    width: 280px;
    flex-shrink: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.panel-tabs .tab-btn {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.panel-tabs .tab-btn.active {
    color: #2b6cb0;
    border-bottom-color: #2b6cb0;
    background: #f7fafc;
}

.panel-tabs .tab-btn:hover {
    background: #f7fafc;
}

.panel-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
}

.panel-content.active {
    display: flex;
}

/* 笔画库 */
.stroke-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.stroke-categories .category {
    padding: 4px 12px;
    background: #edf2f7;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4a5568;
    user-select: none;
}

.stroke-categories .category:hover {
    background: #e2e8f0;
    transform: scale(1.02);
}

.stroke-categories .category.active {
    background: #3182ce;
    color: white;
    box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.stroke-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 4px 0;
    min-height: 100px;
}

.stroke-item {
    width: 44px;
    height: 44px;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: all 0.15s ease;
    font-size: 0.7rem;
    color: #4a5568;
}

.stroke-item:hover {
    transform: scale(1.05);
    border-color: #3182ce;
    background: #ebf8ff;
    box-shadow: 0 2px 8px rgba(49, 130, 206, 0.15);
}

.stroke-item:active {
    cursor: grabbing;
}

.stroke-item svg {
    width: 32px;
    height: 32px;
}

.placeholder {
    color: #a0aec0;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

/* 笔画库搜索框 */
.stroke-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.stroke-search input {
    flex: 1;
    padding: 4px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stroke-search input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

.stroke-search #stroke-search-clear {
    background: transparent;
    color: #a0aec0;
    padding: 2px 6px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    line-height: 1;
}

.stroke-search #stroke-search-clear:hover {
    color: #e53e3e;
    background: #fed7d7;
}

/* 草稿纸 */
.draft-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

#draft-canvas {
    flex: 1;
    background: #fefefe;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>') 2 2, auto;
}

.hint {
    font-size: 0.75rem;
    color: #a0aec0;
    text-align: center;
    margin-top: 6px;
    flex-shrink: 0;
}

/* ===== 底部栏 ===== */
#game-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 8px 24px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.players-list {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.players-list .label {
    font-weight: 500;
    color: #4a5568;
}

#player-list {
    display: flex;
    gap: 16px;
    list-style: none;
    flex-wrap: wrap;
}

#player-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    padding: 2px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

#player-list .player-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #cbd5e0;
}

#player-list .empty {
    color: #a0aec0;
    font-style: italic;
}

/* H23：两种高亮必须有明显区分，且同时出现时不互相遮蔽。
   - 当前回合：**黄色底** + 左侧竖条（"轮到谁"）
   - 自己：**淡蓝底** + 蓝色「我」标识（"哪个是我"）
   底色不同、维度不同（左侧条 vs 圆角底色），叠加时仍能分别看清。 */
#player-list .current-turn {
    font-weight: 700;
    background: #fefcbf;
    border-left: 3px solid #d69e2e;
    padding: 2px 10px;
    border-radius: 12px;
}

/* 自己：淡蓝底（故意与回合的黄色区分开） */
#player-list li.is-me {
    background: #ebf8ff;
    border-radius: 12px;
    padding: 2px 8px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-buttons .btn {
    min-width: 80px;
}

/*
 * 质疑 / 宣布写完 的悬停提示。
 *
 * 为什么不用 title：原生 title 提示有约 1 秒延迟，体验差，且无法调整。
 * 这里改为自绘 tooltip——提示语写入 data-hint，用 ::after 即时显示。
 *
 * 为什么提示挂在 span 上而不是按钮上：disabled 按钮在多数浏览器不触发
 * mouseenter/mouseover，挂按钮上的提示不会弹出。故由外层 span 承载，
 * 并让内部禁用按钮不拦截事件（pointer-events: none）。
 */
.btn-hint {
    display: inline-flex;
    position: relative;
}

.btn-hint .btn {
    min-width: 80px;
    width: 100%;
}

.btn-hint .btn:disabled {
    pointer-events: none;
    cursor: default;
}

/* 无提示语时不生成伪元素内容，因此不会出现空气泡 */
.btn-hint[data-hint]:not([data-hint=""])::after {
    content: attr(data-hint);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease;
    z-index: 20;
}

/* 悬停即显示（无延迟） */
.btn-hint[data-hint]:not([data-hint=""]):hover::after {
    opacity: 1;
    visibility: visible;
}

.action-buttons .btn.active-turn {
    animation: btnPulse 1.5s ease-in-out infinite;
}

@keyframes btnPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(49, 130, 206, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(49, 130, 206, 0);
    }
}

/* ===== 计分板（顶部） ===== */
#scoreboard-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #edf2f7;
    padding: 4px 14px 4px 12px;
    border-radius: 16px;
    cursor: default;
    max-height: 32px;
    overflow: hidden;
    transition: max-height 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
    min-width: 100px;
}

#scoreboard-wrapper:hover {
    max-height: 300px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    padding-bottom: 8px;
}

#scoreboard-label {
    font-weight: 500;
    font-size: 0.85rem;
    color: #4a5568;
    flex-shrink: 0;
}

#scoreboard-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

#scoreboard-wrapper:not(:hover) #scoreboard-list .score-item:nth-child(n+4) {
    display: none;
}

.score-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

.score-item .score-rank {
    font-weight: 600;
    color: #a0aec0;
    width: 20px;
    text-align: right;
    font-size: 0.75rem;
}

.score-item .score-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #cbd5e0;
    flex-shrink: 0;
}

.score-item .score-name {
    font-weight: 500;
    color: #2d3748;
    flex: 1;
}

.score-item .score-value {
    font-weight: 700;
    color: #2b6cb0;
    background: #ebf8ff;
    padding: 0 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    font-size: 0.85rem;
}

.score-item:nth-child(1) .score-rank {
    color: #d69e2e;
}

.score-item:nth-child(2) .score-rank {
    color: #a0aec0;
}

.score-item:nth-child(3) .score-rank {
    color: #b7791f;
}

#scoreboard-wrapper:hover #scoreboard-list .score-item {
    display: flex !important;
}

#scoreboard-wrapper:hover::-webkit-scrollbar {
    width: 4px;
}

#scoreboard-wrapper:hover::-webkit-scrollbar-track {
    background: #edf2f7;
}

#scoreboard-wrapper:hover::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

/* ===== 模态框 ===== */
#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px 32px 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

#modal-content h2 {
    margin-top: 0;
    color: #2d3748;
    font-size: 1.5rem;
}

/* 标题 1.5rem = 24px，若让图标随 1em 缩放会超过源图尺寸而发虚，
   故标题内的图标固定为其设计尺寸（20px）。 */
#modal-content h2 .ui-icon {
    width: 20px;
    height: 20px;
    vertical-align: -0.15em;
}

#modal-content .subtitle {
    color: #4a5568;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

#modal-content .canvas-wrapper {
    background: #f7fafc;
    border-radius: 8px;
    padding: 8px;
    margin: 12px 0;
    display: inline-block;
}

#modal-content .canvas-wrapper canvas {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 4px;
    background: white;
}

#modal-content .info-line {
    margin: 8px 0;
    font-size: 0.95rem;
}

#modal-content .score-changes {
    text-align: left;
    background: #f7fafc;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 0.9rem;
}

#modal-content .score-changes .change-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #e2e8f0;
}

#modal-content .score-changes .change-item:last-child {
    border-bottom: none;
}

/* 对局结束界面：获胜者高亮 */
#modal-content .score-changes .change-item.winner {
    font-weight: 600;
    color: #2f855a;
    background: #f0fff4;
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
}

/* 对局设置面板（F20） */
#modal-content .settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 4px;
}

#modal-content .settings-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

#modal-content .settings-row input[type="number"] {
    width: 80px;
    padding: 6px 8px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
}

#modal-content .settings-row input[type="radio"] {
    cursor: pointer;
}

#modal-content .score-changes .positive {
    color: #38a169;
}

#modal-content .score-changes .negative {
    color: #e53e3e;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.modal-buttons .btn {
    min-width: 100px;
    font-size: 1rem;
    padding: 10px 20px;
}

#modal-content .btn-close {
    background: #3182ce;
    color: white;
}

#modal-content .btn-close:hover {
    background: #2b6cb0;
}

/* ===== 房间列表条 ===== */
#room-list-bar {
    display: none;
    background: white;
    padding: 6px 24px;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    flex-shrink: 0;
}

#room-list-bar.visible {
    display: block;
}

#room-list {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.room-item {
    background: #edf2f7;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.room-item:hover {
    background: #bee3f8;
    transform: scale(1.02);
}

.room-item .room-name {
    font-weight: 600;
    color: #2b6cb0;
}

.room-item .room-count {
    color: #4a5568;
    margin-left: 6px;
}

/* 房间状态标识 */
.room-item .room-status {
    margin-left: 6px;
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #4a5568;
}

.room-item.status-playing {
    cursor: not-allowed;
    opacity: 0.65;
}

.room-item.status-playing .room-status {
    background: #fefcbf;
    color: #975a16;
}

.room-item.status-ended .room-status {
    background: #e2e8f0;
    color: #718096;
}

/* ===== 响应式 ===== */
@media (max-width: 860px) {
    #side-panel {
        width: 220px;
    }

    #room-join-controls input {
        width: 120px;
    }

    .header-status {
        gap: 10px;
    }

    #scoreboard-wrapper {
        min-width: 80px;
        padding: 2px 10px;
    }

    .score-item {
        font-size: 0.75rem;
    }
}

@media (max-width: 680px) {
    #app-header {
        flex-direction: column;
        align-items: stretch;
    }

    .header-status {
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-room {
        justify-content: center;
    }

    #game-main {
        flex-direction: column;
    }

    #side-panel {
        width: 100%;
        height: 220px;
    }

    #canvas-container {
        min-height: 300px;
    }

    #game-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .players-list {
        justify-content: center;
    }

    .action-buttons {
        justify-content: center;
    }

    #scoreboard-wrapper {
        max-height: 28px;
    }

    #scoreboard-wrapper:hover {
        max-height: 250px;
    }
}

/* 小屏手机额外优化 */
@media (max-width: 480px) {
    .logo h1 {
        font-size: 1.2rem;
    }

    .turn-info {
        font-size: 0.8rem;
        padding: 2px 10px;
    }

    .status-badge {
        font-size: 0.75rem;
        padding: 2px 8px;
    }

    #room-join-controls input {
        width: 100px;
    }

    .btn {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

/* ==========================================================================
   首页视图（与对局视图互斥显示；由 main.js 的 showView 切换）
   设计要点：只新增样式，不改动上面任何一条对局视图的规则
   ========================================================================== */

/* 两个视图容器：首页可滚动，对局视图仍是满屏不滚的 flex 列 */
#home-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#game-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 首页时收起只与对局相关的页头内容（回合提示/排名/房间信息） */
body.view-home #game-status,
body.view-home #room-info-display {
    display: none !important;
}

/* ---- Hero ---- */
.hero {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 24px 28px;
    text-align: center;
}

.hero-title {
    font-size: 2.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1a202c;
    letter-spacing: 2px;
}

/* 一条墨色下划线，替代 Hero 主视觉插画（插画是 3× 导出的空态小图，放大必糊） */
.hero-title::after {
    content: '';
    display: block;
    width: 68px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #3182ce, #38a169);
}

.hero-sub {
    margin-top: 18px;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.85;
}

.hero-actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-actions input {
    width: 220px;
    padding: 10px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.95rem;
}

.hero-actions input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

.btn.large {
    padding: 10px 20px;
    font-size: 1rem;
}

.hero-note {
    margin-top: 14px;
    color: #718096;
    font-size: 0.85rem;
}

.hero-note .status-badge {
    margin-left: 8px;
}

/* ---- 首页通用区块 ---- */
.home-section {
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 24px 22px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
}

/* ---- 怎么玩 ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.step {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.step-icon {
    width: 26px;
    height: 26px;
}

.step b {
    display: block;
    margin: 10px 0 6px;
    color: #2d3748;
    font-size: 0.95rem;
}

.step p {
    color: #4a5568;
    font-size: 0.86rem;
    line-height: 1.75;
}

/* ---- 房间列表（沿用 #room-list-bar 的显隐逻辑，只换成卡片外观） ---- */
#room-list-bar {
    border-radius: 12px;
    padding: 14px 16px;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    align-items: center;
    gap: 10px;
}

#room-list-bar.visible {
    display: flex;
}

/* 空态：纯文字（按用户要求不使用 empty-room.png 插画） */
.empty-rooms {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #718096;
    font-size: 0.88rem;
}

/* ---- 规则速览 ---- */
.rules {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.rules summary {
    cursor: pointer;
    color: #2b6cb0;
    font-size: 0.95rem;
}

.rules ul {
    margin: 12px 0 0 18px;
    color: #4a5568;
    font-size: 0.86rem;
    line-height: 1.95;
}

.rules ul b {
    color: #2d3748;
}

/* ---- 我的账号卡片 ---- */
.home-account {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.account-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: #4a5568;
    font-size: 0.88rem;
}

.account-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2d3748;
}

.account-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.home-account .stat-row {
    justify-content: flex-start;
    margin: 12px 0 0;
}

.muted {
    color: #718096;
    font-size: 0.82rem;
}

/* ---- 首页页脚：备案号必须展示并链接工信部（备案要求） ---- */
#home-footer {
    max-width: 880px;
    margin: 6px auto 0;
    padding: 22px 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #718096;
    font-size: 0.8rem;
}

#home-footer a {
    color: #718096;
    text-decoration: none;
}

#home-footer a:hover {
    color: #3182ce;
    text-decoration: underline;
}

/* 公安联网备案：徽标 + 编号（备案要求"展示编号并链到查询页"）。
   徽标源图是 62×67 的 RGBA，这里缩到 16px 显示——缩小不会糊。 */
#home-footer .gongan-beian {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#home-footer .gongan-beian img {
    width: 16px;
    height: 17px;
}

/* ==========================================================================
   首页接入的素材
   注：illustrations 里的 empty-room / empty-waiting / loading 三张按用户要求
   **不使用**（空态与加载中都改为纯文字），故这里没有它们的样式。
   ========================================================================== */

/* magnifier.png：搜索框前缀图标（.stroke-search 已是 flex，直接作为第一个子元素即可） */
.search-icon {
    opacity: 0.55;
    width: 0.95em;
    height: 0.95em;
}