/* ============================================================
   速探模式 · 对局页 / 结算页样式（独立文件，避免与标准模式样式冲突）
   对局页 UI 与单人模式一致：聊天气泡样式/动画直接复用 style.css；
   观战通过顶部头像条带切换（选中背景变绿）；结算为全屏结果页
   ============================================================ */

/* 速探对局页：与标准对局页相同的全屏 flex 布局 */
.app-container.game-mode #page-speed-game.active {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px;
    height: 100%;
    gap: 8px;
    overflow: hidden;
}
.app-container.game-mode #page-speed-game.page-anim-forward,
.app-container.game-mode #page-speed-game.page-anim-back {
    animation: none;
}

/* 汤面（可折叠，样式对齐标准模式 #puzzle-body） */
#speed-puzzle-body {
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.25s ease;
    overflow-y: auto;
    max-height: 260px;
    opacity: 1;
    margin-top: 6px;
    color: var(--ink-text-soft);
}
#speed-puzzle-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
    overflow-y: hidden;
}
.speed-puzzle-text {
    display: block;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink-text);
    white-space: pre-wrap;
    word-break: break-all;
}

/* 玩家条带：已完成/放弃/超时的玩家仅置灰区分，不显示任何进度文字 */
.strip-player.done { opacity: 0.45; filter: grayscale(0.7); }
.strip-player.clickable { cursor: pointer; }
.strip-player.clickable:hover { border-color: var(--teal); color: var(--teal-bright); }
/* 当前观战对象：头像背景变绿 */
.strip-player.watching {
    background: rgba(79, 157, 146, 0.35);
    border-color: var(--teal);
    color: var(--teal-bright);
    font-weight: 600;
}

/* 观战态底部「退出观战」按钮：整行显示，与标准模式一致（.action-btn.full 样式已定义于 style.css） */

/* 问答列表容器（结算复盘弹窗共用） */
.speed-chat {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; padding: 8px 2px;
}

/* ===== 速探结算页（全屏，样式参考标准结果页） ===== */
#page-speed-result .result-box { padding: 26px 10px 40px; }
#speed-ranking {
    max-width: 540px;
    margin: 18px auto 0;
    text-align: left;
    /* 【速探】排行榜横排：多列网格自适应，一行显示多个玩家（自动换行） */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 6px;
    align-items: stretch;
}
.speed-rank-row {
    /* 【速探】两行卡片：第一行 名次+名字（横向），第二行 状态信息；名字永远不会被挤压成竖排 */
    display: flex; flex-direction: column; align-items: stretch; gap: 5px;
    padding: 9px 12px; border-radius: 8px;
    background: var(--surface-raised); border: 1px solid var(--border); font-size: 13px;
    min-width: 0;
}
.speed-rank-row.rank-finished { border-color: rgba(201,151,75,0.4); }
.speed-rank-row.me { border-color: var(--teal); background: rgba(79,157,146,0.1); }
.speed-rank-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.speed-rank-no { font-weight: 700; color: var(--brass-bright); flex-shrink: 0; min-width: 60px; }
.speed-rank-name {
    flex: 1; color: var(--ink-text); font-weight: 600;
    white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.speed-rank-meta { color: var(--ink-text-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speed-rank-row .code-btn { align-self: flex-end; margin-top: 2px; }
.speed-reward-line {
    grid-column: 1 / -1; /* 奖励行横跨整行 */
    margin: 6px 0 2px;
    font-size: 13px; color: var(--teal-bright); font-weight: 600; text-align: center;
}

/* 速探 Toast 小提示（屏幕下方居中弹出，如答对提示） */
.speed-toast {
    position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(16px);
    background: rgba(20,24,22,0.95); color: #f2ead8; border: 1px solid var(--teal);
    border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 600;
    z-index: 9999; opacity: 0; pointer-events: none; transition: all 0.25s var(--ease);
    max-width: 86vw; text-align: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.speed-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 小屏适配（与标准对局页保持一致） */
@media (max-width: 520px) {
    .app-container.game-mode #page-speed-game.active { padding: 8px 10px 12px; gap: 6px; }
}
@media (max-width: 400px) {
    .app-container.game-mode #page-speed-game.active { padding: 6px 8px 10px; }
}