/* ============================
   全局变量与重置
   ============================ */
:root {
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-start: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --bg-complete: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --color-unfilled: #d1d5db;
    --color-unfilled-text: #6b7280;
    --color-card-bg: rgba(255, 255, 255, 0.95);
    --color-text-dark: #1f2937;
    --color-text-white: #ffffff;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-piece: 0 6px 20px rgba(0, 0, 0, 0.25);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-circle: 50%;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-stack: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-stack);
    overscroll-behavior: none;
    touch-action: manipulation;
}

body {
    background: var(--bg-gradient);
    position: relative;
}

.hidden { display: none !important; }

/* ============================
   屏幕切换
   ============================ */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.screen.active {
    display: flex;
    animation: screenFadeIn 0.4s ease;
}

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

/* ============================
   加载浮层
   ============================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.loading-overlay.show { display: flex; }

.loading-content { text-align: center; }

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

/* ============================
   开始界面
   ============================ */
#start-screen {
    background: var(--bg-start);
    overflow-y: auto;
    /* 顶部预留安全区，避免主图/标题被手机状态栏遮盖 */
    /* max() 确保 PWA 刘海（env）和普通浏览器状态栏都能避开 */
    padding-top: max(env(safe-area-inset-top, 0px), 28px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 2vh);
    padding-left: 0;
    padding-right: 0;
    /* 内容超高时不要用 center（会把内容溢出顶部），改为 flex-start + start-content margin:auto 自然居中 */
    justify-content: flex-start;
}

.start-content {
    text-align: center;
    padding: 16px 20px 30px;
    max-width: 520px;
    width: 90%;
    /* 竖屏默认单栏：左栏在上，右栏在下 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* 与 #start-screen 的 flex-start 配合：不超高时自动居中，超高时从顶部开始可滚动 */
    margin: auto;
}

/* 首页左栏与右栏（竖屏单栏时均为自然块级堆叠） */
.home-left,
.home-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-circle {
    width: clamp(90px, 22vmin, 140px);
    height: clamp(90px, 22vmin, 140px);
    border-radius: 24px;
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: var(--shadow-card);
    animation: logoBounce 2s ease-in-out infinite;
    overflow: hidden;
}

.logo-emoji { font-size: clamp(36px, 9vmin, 56px); }

/* 游戏主图：彩色数字拼图块 */
.logo-puzzle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    width: 82%;
    height: 82%;
    padding: 8px;
}

.logo-puzzle .lp-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: clamp(14px, 3.5vmin, 24px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: tileFloat 2.4s ease-in-out infinite;
    min-height: 24px;
    overflow: hidden;
}

.logo-puzzle .t1 { background: #FF6B6B; animation-delay: 0s; }
.logo-puzzle .t2 { background: #FF9F43; animation-delay: 0.15s; }
.logo-puzzle .t3 { background: #FECA57; animation-delay: 0.3s; }
.logo-puzzle .t4 { background: #26DE81; animation-delay: 0.45s; }
.logo-puzzle .t5 { background: #45AAF2; animation-delay: 0.6s; }
.logo-puzzle .t6 { background: #A55EEA; animation-delay: 0.75s; }
.logo-puzzle .t7 { background: #EE5A6F; animation-delay: 0.9s; }
.logo-puzzle .t8 { background: #00CEC9; animation-delay: 1.05s; }
.logo-puzzle .t9 { background: #54A0FF; animation-delay: 1.2s; }

@keyframes tileFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.04); }
}

@keyframes logoBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.game-title {
    font-size: clamp(26px, 6.5vmin, 38px);
    color: var(--color-text-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 4px;
    font-weight: 800;
    letter-spacing: 2px;
}

.game-subtitle {
    font-size: clamp(13px, 3vmin, 16px);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    font-weight: 500;
}

/* 配置区块 */
.config-section {
    margin-bottom: 18px;
    text-align: center;
}

.section-label {
    color: var(--color-text-white);
    font-size: clamp(13px, 3vmin, 16px);
    font-weight: 600;
    margin-bottom: 10px;
    text-align: left;
}

/* 模式选择器 */
.mode-selector {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.mode-btn {
    flex: 1;
    max-width: 200px;
    background: var(--color-card-bg);
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    padding: 14px 10px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-shadow: var(--shadow-soft);
    font-family: var(--font-stack);
}

.mode-btn:active { transform: scale(0.95); }

.mode-btn.active {
    border-color: #f5576c;
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(245, 87, 108, 0.4);
}

/* ============================
   形状模式选择
   ============================ */
.shape-mode-selector {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.shape-btn {
    flex: 1;
    max-width: 180px;
    background: var(--color-card-bg);
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 10px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--shadow-soft);
    font-family: var(--font-stack);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.shape-btn:active { transform: scale(0.95); }

.shape-btn.active {
    border-color: #00CEC9;
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.4);
}

.shape-icon { font-size: 18px; }

.mode-icon { font-size: 28px; }

.mode-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.mode-desc {
    font-size: 11px;
    color: #9ca3af;
}

/* 图片来源 */
.image-source-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.img-source-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-white);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.img-source-btn.active {
    background: #fff;
    color: #f5576c;
    border-color: #fff;
}

.image-preview-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.image-preview {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview::before {
    content: '🖼️';
    font-size: 32px;
    opacity: 0.4;
}

.image-preview.has-image::before { display: none; }

.text-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-white);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.text-btn:active { transform: scale(0.95); }

.text-input {
    width: 100%;
    max-width: 300px;
    padding: 10px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: var(--font-stack);
    color: var(--color-text-dark);
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}

.text-input:focus { border-color: #fff; }

/* 拼图块数选择器 */
.piece-count-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.piece-btn {
    background: var(--color-card-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    box-shadow: var(--shadow-soft);
    font-family: var(--font-stack);
    min-width: 60px;
}

.piece-btn:active { transform: scale(0.93); }

.piece-btn.active {
    border-color: #f5576c;
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.35);
}

.piece-btn span {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
}

.piece-btn.active span { color: #f5576c; }

/* 玩家数量选择器 */
.player-count-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.player-count-btn {
    background: var(--color-card-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    font-family: var(--font-stack);
}

.player-count-btn:active { transform: scale(0.93); }

.player-count-btn.active {
    border-color: #f5576c;
    background: #fff;
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.35);
}

.player-names-area {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.player-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-emoji-label { font-size: 20px; }

.player-name-input {
    width: 140px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: var(--font-stack);
    color: var(--color-text-dark);
    outline: none;
    text-align: center;
    -webkit-user-select: text;
    user-select: text;
}

.player-name-input:focus { border-color: #fff; }

/* ============================
   微信登录按钮
   ============================ */
.wechat-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #07C160;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
    flex-shrink: 0;
    line-height: 1;
}

.wechat-login-btn:active { transform: scale(0.93); }
.wechat-login-btn .wechat-icon { flex-shrink: 0; pointer-events: none; }
.wechat-login-btn span { pointer-events: none; }
.wechat-login-btn svg { pointer-events: none; }

.wechat-login-btn.logged-in {
    background: #f0f0f0;
    color: #07C160;
    border: 1.5px solid #07C160;
}

.wechat-login-btn.logged-in::before {
    content: '✓ ';
}

/* 已登录的头像显示 */
.player-wechat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #07C160;
    flex-shrink: 0;
}

/* 玩家栏 - 微信头像 */
.player-chip-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================
   微信登录弹窗
   ============================ */
.wechat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wechat-modal.show {
    display: flex;
    animation: wechatModalIn 0.3s ease;
}

@keyframes wechatModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.wechat-modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px 20px;
    width: 88%;
    max-width: 340px;
    text-align: center;
    position: relative;
    animation: wechatContentIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes wechatContentIn {
    from { transform: scale(0.8) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.wechat-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.wechat-modal-close:hover {
    background: #f0f0f0;
    color: #333;
}

.wechat-modal-header {
    margin-bottom: 20px;
}

.wechat-modal-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #07C160;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #fff;
}

.wechat-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.wechat-modal-subtitle {
    font-size: 13px;
    color: #999;
}

/* 二维码区 */
.wechat-qr-section { margin-bottom: 16px; }

.wechat-qr-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    position: relative;
    border-radius: 12px;
    background: #f9f9f9;
    overflow: hidden;
}

.wechat-qr-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wechat-qr-svg { opacity: 0.85; }

.wechat-qr-scan-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #07C160, transparent);
    border-radius: 3px;
    animation: wechatScanLine 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(7, 193, 96, 0.5);
}

@keyframes wechatScanLine {
    0%, 100% { top: 15%; }
    50% { top: 82%; }
}

.wechat-qr-scanned {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.wechat-scan-success {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #07C160;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    animation: wechatCheckPop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes wechatCheckPop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.wechat-qr-scanned p {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    margin: 0;
}

.wechat-scan-tip {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 400 !important;
    margin-top: 4px !important;
}

.wechat-qr-tip {
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
}

.wechat-emphasis { color: #07C160; font-weight: 600; }

.wechat-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.wechat-simulate-btn {
    background: #07C160;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.wechat-simulate-btn:active { transform: scale(0.95); }
.wechat-simulate-btn svg,
.wechat-simulate-btn span { pointer-events: none; }

/* 确认区 */
.wechat-confirm-section { margin-bottom: 16px; }

.wechat-confirm-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #07C160;
    margin: 0 auto 10px;
    display: block;
    object-fit: cover;
}

.wechat-confirm-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.wechat-confirm-tip {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.wechat-confirm-btn {
    background: #07C160;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.wechat-confirm-btn:active { transform: scale(0.95); }

.wechat-cancel-btn {
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.wechat-cancel-btn:active { transform: scale(0.95); }

.wechat-modal-footer {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: 4px;
}

.wechat-modal-footer p {
    font-size: 11px;
    color: #bbb;
}

/* 主按钮 */
.primary-btn {
    background: linear-gradient(135deg, #f5576c, #f093fb);
    color: var(--color-text-white);
    border: none;
    border-radius: 50px;
    padding: 14px 44px;
    font-size: clamp(17px, 4vmin, 21px);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
    margin-bottom: 16px;
    font-family: var(--font-stack);
}

.primary-btn:active {
    transform: scale(0.95);
    box-shadow: 0 3px 10px rgba(245, 87, 108, 0.4);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.3);
    color: var(--color-text-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.secondary-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.5);
}

/* 分享按钮 */
.share-btn {
    background: linear-gradient(135deg, #26DE81 0%, #20BF6B 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
    box-shadow: 0 4px 14px rgba(38, 222, 129, 0.4);
    margin-top: 6px;
}

.share-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(38, 222, 129, 0.3);
}

/* 首页投屏按钮 */
.cast-btn-home {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;
    padding: 9px 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
    margin-top: 6px;
}

.cast-btn-home:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.45);
}

/* 竖屏小屏：投屏按钮被 JS 移到主图区（home-left）底部时，更醒目、占满可用宽度 */
.home-left > .cast-btn-home {
    width: min(78%, 320px);
    margin-top: 14px;
    padding: 12px 26px;
    font-size: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.2));
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* 说明区 */
.instructions {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.instr-title {
    color: var(--color-text-white);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    user-select: none;
}

.instr-arrow {
    display: inline-block;
    font-size: 12px;
    margin-left: 4px;
    transition: transform 0.25s ease;
}

/* 玩法说明折叠：竖屏默认收起（省出首页第一屏空间），横屏展开 */
.instr-body {
    transition: max-height 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
}

.instr-body.collapsed {
    max-height: 0;
    opacity: 0;
}

.instr-arrow.rotated {
    transform: rotate(180deg);
}

/* 横屏下默认展开（去除折叠） */
@media (orientation: landscape) {
    .instr-body {
        max-height: 200px;
        opacity: 1;
    }
    .instr-body.collapsed {
        max-height: 0;
        opacity: 0;
    }
}

.instructions p:not(.instr-title) {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.7;
}

/* ============================
   游戏界面 - 顶部栏
   ============================ */
#game-screen {
    background: #F5F2EB;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(230, 220, 200, 0.3) 0%, transparent 50%);
    justify-content: flex-start;
    padding: 0;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: max(6px, env(safe-area-inset-top)) 10px 4px;
    flex-shrink: 0;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-circle);
    border: none;
    background: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.icon-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.4);
}

.icon-btn.muted {
    opacity: 0.45;
    background: rgba(255, 255, 255, 0.1);
}

.progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 10px;
}

.progress-bar {
    flex: 1;
    height: 14px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FFD93D, #FF9F43);
    border-radius: 7px;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px rgba(255, 159, 67, 0.4);
}

.progress-text {
    color: #555;
    font-size: 13px;
    font-weight: 700;
    min-width: 44px;
    text-align: right;
}

/* ============================
   玩家信息栏
   ============================ */
.player-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 2px 14px 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.player-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 5px 12px 5px 6px;
    transition: var(--transition);
    border: 2px solid transparent;
}

.player-chip.active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.player-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.player-chip-name {
    font-size: 13px;
    font-weight: 700;
    color: #666;
}

.player-chip.active .player-chip-name {
    color: var(--color-text-dark);
}

.player-chip-score {
    font-size: 14px;
    font-weight: 800;
    color: #FF9F43;
    min-width: 18px;
    text-align: center;
}

.player-chip.active .player-chip-score { color: #f59e0b; }

.player-chip-cards {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

/* ============================
   参考图按钮 & 面板
   ============================ */
.ref-image-btn {
    position: fixed;
    top: 56px;
    right: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    font-family: var(--font-stack);
}

.ref-image-btn:active { transform: scale(0.92); }

.ref-image-panel {
    position: fixed;
    top: 90px;
    right: 14px;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    z-index: 10;
    border: 3px solid rgba(255, 255, 255, 0.5);
    animation: refPanelShow 0.2s ease;
}

@keyframes refPanelShow {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.ref-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================
   游戏界面 - 拼图区
   ============================ */
.puzzle-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px 8px;
    min-height: 0;
}

.puzzle-grid {
    --n: 3;
    --cell-font-size: 32px;
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    grid-template-rows: repeat(var(--n), 1fr);
    gap: 2px;
    padding: 10px;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    width: min(96vw, 80vh);
    height: min(96vw, 80vh);
    max-width: 700px;
    max-height: 700px;
}

.puzzle-cell {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cell-font-size);
    font-weight: 800;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* 未填充状态 - 浅灰线稿风格（涂色书效果） */
.puzzle-cell.unfilled {
    background: #EEEAE3;
    color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    border: 1px dashed rgba(0, 0, 0, 0.12);
}

/* 图片模式 - 未填充显示灰度图片（线稿模板效果） */
.puzzle-cell.unfilled-image {
    background-size: calc(var(--n) * 100%) calc(var(--n) * 100%);
    background-repeat: no-repeat;
    background-color: #F5F2EB;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    filter: grayscale(1) brightness(1.3) contrast(0.7);
}

.puzzle-cell.unfilled-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(245, 242, 235, 0.2);
    border-radius: 6px;
    pointer-events: none;
}

.puzzle-cell.unfilled-image .number-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: max(10px, calc(var(--cell-font-size) * 0.3));
    z-index: 3;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 已填充状态 - 鲜艳彩色 + 贴纸描边感 */
.puzzle-cell.filled {
    color: var(--color-text-white);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    animation: cellPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.puzzle-cell.filled::after {
    content: '';
    position: absolute;
    top: 8%;
    left: 10%;
    width: 40%;
    height: 30%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

/* 图片模式 - 已填充显示图片片段 */
.puzzle-cell.filled.image-mode {
    background-size: calc(var(--n) * 100%) calc(var(--n) * 100%);
    background-repeat: no-repeat;
}

/* 图片模式 - 刚填充时的彩色渐现动画 */
.puzzle-cell.just-filled {
    animation: colorReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes colorReveal {
    0% { 
        filter: brightness(0.3) saturate(0); 
        transform: scale(0.9);
    }
    50% { 
        filter: brightness(1.3) saturate(1.5);
        transform: scale(1.08);
    }
    100% { 
        filter: brightness(1) saturate(1); 
        transform: scale(1);
    }
}

.puzzle-cell.filled.image-mode::after { display: none; }

/* 图片模式 - 数字徽章 */
.puzzle-cell .number-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: max(6px, calc(var(--cell-font-size) * 0.18));
    font-weight: 700;
    border-radius: 3px;
    padding: 0 2px;
    z-index: 3;
    line-height: 1.1;
    pointer-events: none;
}

.puzzle-cell.filled.image-mode .number-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #1f2937;
}

/* ============================
   不规则形状模式
   ============================ */
.puzzle-grid.irregular-mode {
    display: block;
    position: relative;
}

.puzzle-grid.irregular-mode .puzzle-cell {
    position: absolute;
    /* 确保透明区域不阻挡其他形状的交互 */
    pointer-events: none;
}

/* 形状精确点击区域：只有形状实际占据的矩形能接收事件 */
.puzzle-cell .shape-hit-area {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    z-index: 1;
    cursor: pointer;
}

/* hover 时高亮实际形状区域（不是整个 bounds） */
.puzzle-cell .shape-hit-area:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 拖拽悬停时高亮命中区域 */
.puzzle-cell.drag-hover .shape-hit-area {
    background: rgba(255, 255, 255, 0.2);
}

.puzzle-cell.drag-hover-match .shape-hit-area {
    background: rgba(67, 233, 123, 0.3);
}

.puzzle-cell.drag-hover-mismatch .shape-hit-area {
    background: rgba(239, 68, 68, 0.2);
}

/* 不规则形状的 canvas 渲染 */
.puzzle-cell .shape-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* 不规则形状活动区 */
.activity-piece.irregular-piece {
    position: relative;
    overflow: hidden;
}

.activity-piece.irregular-piece canvas {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* 不规则形状数字徽章 */
.irregular-piece .piece-number-badge {
    position: absolute;
    top: 1px;
    left: 1px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: max(7px, calc(var(--cell-font-size) * 0.26));
    font-weight: 700;
    border-radius: 4px;
    padding: 0 3px;
    z-index: 3;
    line-height: 1.1;
}

/* 拖拽中的不规则形状 */
.drag-piece.irregular-piece {
    border-radius: 8px;
    overflow: hidden;
}

@keyframes cellPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* 拖拽悬停高亮 */
.puzzle-cell.drag-hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 20px rgba(255, 255, 255, 0.4);
    z-index: 5;
}

/* 不规则模式：不缩放整个 bounds，只用 hit-area 高亮 */
.puzzle-grid.irregular-mode .puzzle-cell.drag-hover {
    transform: none;
    box-shadow: none;
}

.puzzle-cell.drag-hover-match {
    box-shadow: 0 0 0 4px #43e97b, 0 4px 20px rgba(67, 233, 123, 0.5);
    z-index: 6;
}

.puzzle-cell.drag-hover-mismatch {
    box-shadow: 0 0 0 4px #ef4444, 0 4px 20px rgba(239, 68, 68, 0.5);
    z-index: 6;
}

/* 提示动画 */
.puzzle-cell.hint-pulse {
    animation: hintPulse 1s ease-in-out 3;
}

@keyframes hintPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(245, 87, 108, 0.6); }
}

/* 不规则模式：用 hit-area 高亮代替 bounds 缩放 */
.puzzle-grid.irregular-mode .puzzle-cell.hint-pulse {
    animation: none;
    z-index: 10;
}
.puzzle-grid.irregular-mode .puzzle-cell.hint-pulse .shape-hit-area {
    animation: hintHitAreaPulse 1s ease-in-out 3;
}

@keyframes hintHitAreaPulse {
    0%, 100% { background: transparent; }
    50% { background: rgba(245, 87, 108, 0.4); }
}

/* ============================
   游戏界面 - 活动区
   ============================ */
.activity-section {
    flex-shrink: 0;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #26C6DA 0%, #00ACC1 100%);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.activity-label {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.activity-label .turn-name {
    color: #FFEB3B;
    font-weight: 800;
}

.activity-area {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.activity-slot {
    width: clamp(60px, 16vmin, 90px);
    height: clamp(60px, 16vmin, 90px);
    border-radius: var(--radius-md);
    border: 3px dashed rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.activity-slot.empty { border-color: rgba(255, 255, 255, 0.2); }

/* 活动区彩色小块 - 贴纸风格 */
.activity-piece {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 7vmin, 36px);
    font-weight: 800;
    color: var(--color-text-white);
    cursor: grab;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    touch-action: none;
    animation: pieceAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid #fff;
}

.activity-piece:active { cursor: grabbing; }

.activity-piece::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 12%;
    width: 40%;
    height: 30%;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

/* 图片模式活动小块 */
.activity-piece.image-mode {
    background-size: calc(var(--n, 3) * 100%) calc(var(--n, 3) * 100%);
    background-repeat: no-repeat;
    border: 3px solid #fff;
}

.activity-piece.image-mode::after { display: none; }

.activity-piece .piece-number-badge {
    position: absolute;
    top: 1px;
    left: 1px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: clamp(8px, 2vmin, 12px);
    font-weight: 700;
    border-radius: 4px;
    padding: 0 3px;
    z-index: 2;
}

@keyframes pieceAppear {
    from { transform: scale(0) rotate(-180deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

.activity-piece.shake { animation: shake 0.4s ease; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px) rotate(-3deg); }
    40% { transform: translateX(8px) rotate(3deg); }
    60% { transform: translateX(-6px) rotate(-2deg); }
    80% { transform: translateX(6px) rotate(2deg); }
}

/* 跳过按钮 */
.skip-btn {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.skip-btn:active { transform: scale(0.93); }

/* ============================
   拖拽浮层
   ============================ */
#drag-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.drag-piece {
    position: absolute;
    width: clamp(60px, 16vmin, 88px);
    height: clamp(60px, 16vmin, 88px);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(26px, 8vmin, 38px);
    font-weight: 800;
    color: var(--color-text-white);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 1001;
    overflow: hidden;
    border: 3px solid #fff;
}

.drag-piece::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 12%;
    width: 40%;
    height: 30%;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.drag-piece.image-mode {
    background-size: calc(var(--n, 3) * 100%) calc(var(--n, 3) * 100%);
    background-repeat: no-repeat;
    border: 3px solid #fff;
}

.drag-piece.image-mode::after { display: none; }

.drag-piece .piece-number-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 1px 5px;
    z-index: 2;
}

/* ============================
   完成界面
   ============================ */
#complete-screen {
    background: var(--bg-complete);
    padding-top: env(safe-area-inset-top, 0px);
}

.celebration-content {
    text-align: center;
    padding: 24px 20px;
    max-width: 400px;
    width: 90%;
}

.celebration-emoji {
    font-size: clamp(50px, 16vmin, 90px);
    animation: celebrateBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes celebrateBounce {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

.celebration-title {
    font-size: clamp(28px, 8vmin, 42px);
    color: var(--color-text-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    margin: 10px 0 4px;
    font-weight: 800;
}

.celebration-subtitle {
    font-size: clamp(15px, 4vmin, 18px);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

/* 计分板 */
.scoreboard {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.scoreboard-title {
    color: var(--color-text-white);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.15);
    transition: var(--transition);
    animation: scoreRowShow 0.4s ease backwards;
}

.score-row.winner {
    background: rgba(255, 215, 0, 0.3);
    border: 2px solid rgba(255, 215, 0, 0.6);
    transform: scale(1.03);
}

@keyframes scoreRowShow {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.score-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.score-row-name {
    color: var(--color-text-white);
    font-size: 15px;
    font-weight: 700;
}

.score-row-rank {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    margin-left: 4px;
}

.score-row-score {
    color: #fbbf24;
    font-size: 20px;
    font-weight: 800;
}

.score-row.winner .score-row-score { font-size: 24px; }

.score-row-stars {
    color: #fbbf24;
    font-size: 14px;
    margin-left: 4px;
}

#complete-screen .primary-btn {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    box-shadow: 0 6px 20px rgba(67, 233, 123, 0.4);
}

/* ============================
   彩纸画布
   ============================ */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

/* ============================
   提示气泡
   ============================ */
.toast {
    position: fixed;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2000;
    pointer-events: none;
    white-space: normal;
    max-width: 86vw;
    line-height: 1.4;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================
   响应式 - 首页横屏两栏布局
   （默认横屏时，左栏 logo/标题，右栏关卡/设置/按钮）
   ============================ */
@media (orientation: landscape) and (min-width: 620px) {
    #start-screen {
        /* flex-start + start-content margin:auto => 不超高时居中，超高时从顶部可滚动 */
        justify-content: flex-start;
        padding: 0;
    }

    .start-content {
        max-width: 1040px;
        width: 96%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 26px;
        padding: 10px 16px;
        text-align: left;
        margin: auto;
    }

    .home-left,
    .home-right {
        width: auto;
        flex: 1;
        max-width: 480px;
        align-items: center;
        min-height: 0;
    }

    /* 左栏：logo 更大，玩法说明紧凑 */
    .home-left {
        align-items: center;
    }

    .home-left .logo-circle {
        width: clamp(92px, 19vmin, 140px);
        height: clamp(92px, 19vmin, 140px);
        margin-bottom: 6px;
        border-radius: 20px;
    }

    .home-left .game-title {
        font-size: clamp(20px, 3.5vmin, 30px);
        margin-bottom: 2px;
    }

    .home-left .game-subtitle {
        font-size: clamp(11px, 1.8vmin, 14px);
        margin-bottom: 8px;
    }

    .home-left .instructions {
        text-align: left;
        max-width: 340px;
        padding: 8px 12px;
    }

    .home-left .instructions p:not(.instr-title) {
        font-size: 11px;
        line-height: 1.45;
        margin: 2px 0;
    }

    .home-left .instr-title {
        font-size: 12px;
        margin-bottom: 3px;
    }

    /* 右栏：设置与按钮 */
    .home-right {
        align-items: stretch;
    }

    .home-right .config-section {
        margin-bottom: 10px;
    }

    .home-right .section-label {
        text-align: left;
        margin-bottom: 6px;
    }

    .home-right .level-grid {
        max-height: 30vh;
    }

    .home-right .primary-btn,
    .home-right .online-mode-btn {
        width: 100%;
        max-width: 260px;
        font-size: 14px;
        padding: 10px 14px;
    }

    .device-name-input {
        font-size: 14px;
    }
}

/* ============================
   响应式 - 横屏适配
   ============================ */
@media (orientation: landscape) and (max-height: 500px) {
    .puzzle-grid {
        /* 扣除头部和底部操作区高度，防止溢出裁剪 */
        width: min(92vw, calc(100vh - 190px));
        height: min(92vw, calc(100vh - 190px));
        max-height: calc(100vh - 190px);
    }

    .activity-slot {
        width: clamp(45px, 10vmin, 65px);
        height: clamp(45px, 10vmin, 65px);
    }

    .game-header { padding: 2px 12px; }

    .activity-section { padding: 2px 12px 4px; }

    .activity-label { margin-bottom: 2px; }

    .ref-image-btn { top: 44px; }
    .ref-image-panel { top: 70px; width: 130px; height: 130px; }
}

/* iPad 横屏优化 - 让拼图占据更多宽度 */
@media (orientation: landscape) and (min-width: 768px) {
    .puzzle-grid {
        width: min(95vw, 90vh);
        height: min(95vw, 90vh);
        max-width: 900px;
        max-height: 900px;
    }

    .activity-slot {
        width: clamp(55px, 12vmin, 80px);
        height: clamp(55px, 12vmin, 80px);
    }

    .activity-piece {
        font-size: clamp(26px, 8vmin, 40px);
    }

    .game-header { padding: 4px 16px; }
}

/* ============================
   小屏手机适配
   ============================ */
@media (max-width: 380px) {
    .piece-btn { min-width: 52px; padding: 6px 8px; font-size: 12px; }
    .piece-btn span { font-size: 9px; }

    .activity-area { gap: 10px; }

    .puzzle-grid { gap: 3px; padding: 8px; }

    .mode-selector { flex-direction: column; }
    .mode-btn { max-width: 100%; }
}

/* 大屏平板竖屏优化 - 拼图更大 */
@media (min-width: 768px) and (orientation: portrait) {
    .puzzle-grid {
        width: min(85vw, 75vh);
        height: min(85vw, 75vh);
        max-width: 750px;
        max-height: 750px;
    }
}

/* 大屏平板横屏优化 - 拼图充满宽度 */
@media (min-width: 1024px) {
    .puzzle-grid {
        width: min(88vw, 88vh);
        height: min(88vw, 88vh);
        max-width: 1000px;
        max-height: 1000px;
    }

    .activity-slot {
        width: clamp(60px, 14vmin, 90px);
        height: clamp(60px, 14vmin, 90px);
    }
}

/* ============================
   关卡选择系统
   ============================ */
.level-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: min(28vh, 230px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
}

.level-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.level-tier-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-dark);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.level-tier-header .tier-badge {
    font-size: 16px;
}

.level-tier-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.level-card {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    border: 3px solid transparent;
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.level-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.level-card.unlocked {
    opacity: 1;
}

.level-card.unlocked:active {
    transform: scale(0.95);
}

.level-card.selected {
    border-color: #00CEC9;
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.4);
}

.level-card.completed {
    border-color: #2ed573;
}

.level-card .level-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1;
}

.level-card .level-icon {
    font-size: 22px;
    margin-bottom: 2px;
}

.level-card .level-stars {
    font-size: 9px;
    margin-top: 2px;
    line-height: 1;
}

.level-card .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

.level-card.tier-beginner .level-num { color: #2ed573; }
.level-card.tier-intermediate .level-num { color: #FFA502; }
.level-card.tier-challenge .level-num { color: #FF6B6B; }
.level-card.tier-master .level-num { color: #A55EEA; }

/* 退出按钮 */
.exit-btn {
    background: rgba(255, 107, 107, 0.15);
}

.exit-btn:active {
    background: rgba(255, 107, 107, 0.3);
}

/* 退出确认弹窗 */
.exit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.exit-modal.show {
    display: flex;
    animation: screenFadeIn 0.2s ease;
}

.exit-modal-content {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 24px 20px;
    text-align: center;
    max-width: 300px;
    width: 85%;
    box-shadow: var(--shadow-card);
}

.exit-modal-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.exit-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 6px;
}

.exit-modal-desc {
    font-size: 14px;
    color: var(--color-unfilled-text);
    margin-bottom: 20px;
}

.exit-modal-actions {
    display: flex;
    gap: 12px;
}

.exit-cancel-btn,
.exit-confirm-btn {
    flex: 1;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-stack);
}

.exit-cancel-btn {
    background: #f1f2f6;
    color: var(--color-text-dark);
}

.exit-cancel-btn:active {
    background: #dfe4ea;
}

.exit-confirm-btn {
    background: #FF6B6B;
    color: #fff;
}

.exit-confirm-btn:active {
    background: #ee5253;
}

/* 当前关卡标识 */
.current-level-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 8px;
}

/* 小屏适配 */
@media (max-width: 380px) {
    .level-tier-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================
   回合倒计时 & 延时卡
   ============================ */
.turn-timer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0;
    width: 100%;
}

.turn-timer-info {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 48px;
}

.turn-timer-text {
    font-size: 22px;
    font-weight: 800;
    color: #444;
    line-height: 1;
    transition: color 0.3s;
}

.turn-timer-text.warning {
    color: #FFA502;
    animation: timerPulse 0.5s ease infinite alternate;
}

.turn-timer-text.danger {
    color: #FF6B6B;
    animation: timerPulse 0.3s ease infinite alternate;
}

@keyframes timerPulse {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.turn-timer-unit {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

.turn-timer-track {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

.turn-timer-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.95s linear, background 0.3s;
    background: linear-gradient(90deg, #2ed573, #7bed9f);
    width: 100%;
}

.turn-timer-fill.warning {
    background: linear-gradient(90deg, #FFA502, #ffd32a);
}

.turn-timer-fill.danger {
    background: linear-gradient(90deg, #FF6B6B, #ff4757);
}

/* 总倒计时（单人模式） */
.total-timer-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 16px;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
}

.total-timer-icon {
    font-size: 18px;
}

.total-timer-text {
    font-size: 28px;
    font-weight: 800;
    color: #444;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.total-timer-text.warning {
    color: #FFA502;
    animation: timerPulse 0.5s ease infinite alternate;
}

.total-timer-text.danger {
    color: #FF6B6B;
    animation: timerPulse 0.3s ease infinite alternate;
}

/* 暂停遮罩 */
.pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.pause-overlay.hidden {
    display: none;
}

.pause-content {
    text-align: center;
    padding: 30px 40px;
    animation: screenFadeIn 0.3s ease;
}

.pause-icon {
    font-size: 60px;
    margin-bottom: 12px;
    animation: logoBounce 2s ease infinite;
}

.pause-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.pause-hint {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.pause-content .primary-btn,
.pause-content .secondary-btn {
    margin: 6px auto;
    display: block;
    min-width: 180px;
}

/* 投屏弹窗 */
.cast-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.cast-modal.hidden {
    display: none;
}

.cast-content {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    max-width: 380px;
    width: 100%;
    position: relative;
    animation: screenFadeIn 0.3s ease;
}

.cast-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    color: #666;
}

.cast-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 16px;
    text-align: center;
}

.cast-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cast-method-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-sm);
    background: rgba(102, 126, 234, 0.05);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

.cast-method-btn:active {
    transform: scale(0.97);
    background: rgba(102, 126, 234, 0.12);
}

/* 主投屏方案（扫码/链接）：高亮突出 */
.cast-method-btn.cast-main {
    border-color: #667EEA;
    background: linear-gradient(135deg, rgba(102,126,234,0.18), rgba(102,126,234,0.08));
    box-shadow: 0 2px 10px rgba(102,126,234,0.18);
}

/* 次要方案（搜索设备）：弱化视觉权重 */
.cast-method-btn:not(.cast-main) {
    opacity: 0.72;
    background: rgba(0,0,0,0.03);
}
.cast-method-btn:not(.cast-main):active {
    opacity: 1;
}

.cast-method-icon {
    font-size: 24px;
}

.cast-method-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.cast-method-desc {
    font-size: 12px;
    color: #999;
}

.cast-url-result {
    margin-top: 16px;
    padding: 12px;
    background: rgba(102, 126, 234, 0.06);
    border-radius: var(--radius-sm);
}

.cast-url-result.hidden {
    display: none;
}

.cast-url-hint {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

/* 投屏二维码区域 */
.cast-qrcode {
    display: flex;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cast-qrcode canvas {
    width: 180px;
    height: 180px;
    image-rendering: pixelated;
}

.cast-hint-2 {
    margin-top: 4px;
}

.cast-url-box {
    display: flex;
    gap: 6px;
}

.cast-url-box input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #333;
    background: #fff;
}

.cast-url-tip {
    font-size: 11px;
    color: #999;
    margin-top: 8px;
}

/* 投屏到机顶盒：配对码输入区 */
.cast-pair-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.cast-pair-input {
    flex: 1;
    padding: 12px 14px;
    border: 2px solid #667EEA;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 6px;
    text-align: center;
    color: #333;
    background: #fff;
    text-transform: uppercase;
    font-family: monospace;
}

.cast-pair-input:focus {
    outline: none;
    border-color: #764BA2;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.18);
}

.cast-pair-btn {
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #667EEA, #764BA2);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.cast-pair-btn:active {
    transform: scale(0.95);
}

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

/* 设备名称输入 */
.device-name-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.device-name-input {
    flex: 1;
    padding: 8px 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-family: var(--font-stack);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-dark);
    text-align: center;
}

.device-name-input:focus {
    outline: none;
    border-color: #667eea;
}

.save-device-name-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.save-device-name-btn:active {
    transform: scale(0.9);
}

/* 已填充图案微微浮动 */
@keyframes filledFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.puzzle-cell.filled .shape-canvas,
.puzzle-cell.filled:not(.just-filled) {
    animation: filledFloat 3s ease-in-out infinite;
}

.puzzle-grid.irregular-mode .puzzle-cell.filled:not(.just-filled) {
    animation: filledFloat 3s ease-in-out infinite;
    animation-delay: calc(var(--float-delay, 0) * 0.1s);
}

/* 延时卡按钮 */
.delay-card-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.delay-card-btn:active {
    transform: scale(0.92);
}

.delay-card-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.delay-card-icon {
    font-size: 18px;
    line-height: 1;
}

.delay-card-count {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    line-height: 1;
}

/* 延时卡使用动画 */
.delay-card-btn.used {
    animation: delayCardFlash 0.6s ease;
}

@keyframes delayCardFlash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 165, 2, 0.6); }
    50% { transform: scale(1.2); box-shadow: 0 0 20px 8px rgba(255, 165, 2, 0.4); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 165, 2, 0); }
}

/* 积分浮动提示 */
.score-popup {
    position: fixed;
    z-index: 5000;
    font-size: 28px;
    font-weight: 800;
    color: #2ed573;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    animation: scoreFloat 1.2s ease-out forwards;
}

@keyframes scoreFloat {
    0% { opacity: 1; transform: translateY(0) scale(0.5); }
    20% { transform: translateY(-10px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-60px) scale(1); }
}

/* ============================
   连击系统
   ============================ */
.combo-display {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4500;
    pointer-events: none;
    text-align: center;
    animation: comboBurst 1.2s ease-out forwards;
}

.combo-display .combo-text {
    font-size: clamp(28px, 8vmin, 48px);
    font-weight: 900;
    background: linear-gradient(135deg, #FF6B6B, #FF9F43, #FECA57);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
    line-height: 1;
}

.combo-display .combo-sub {
    font-size: clamp(14px, 3.5vmin, 20px);
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.combo-display.fire .combo-text {
    background: linear-gradient(135deg, #ff4757, #ffa502, #ffd32a, #ff4757);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: comboBurst 1.2s ease-out forwards, fireGradient 0.5s linear infinite;
}

@keyframes comboBurst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-15deg); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(5deg); }
    50% { transform: translate(-50%, -50%) scale(1) rotate(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) rotate(0); }
}

@keyframes fireGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 连击徽章（玩家栏中显示） */
.player-chip-combo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, #ff4757, #ffa502);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    animation: comboBadgePulse 0.6s ease infinite alternate;
}

@keyframes comboBadgePulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* 积分浮动 - 连击加分 */
.score-popup.combo {
    color: #ff4757;
    font-size: 32px;
}

.score-popup.combo::after {
    content: attr(data-combo);
    display: block;
    font-size: 14px;
    color: #ffa502;
}

/* ============================
   提示按钮 & 魔法眼按钮
   ============================ */
.hint-btn,
.magic-peek-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 4px 10px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-stack);
}

.hint-btn {
    background: rgba(255, 217, 61, 0.85);
    border-color: rgba(255, 159, 67, 0.3);
}

.magic-peek-btn {
    background: rgba(186, 104, 200, 0.85);
    border-color: rgba(149, 117, 205, 0.3);
}

.hint-btn:active,
.magic-peek-btn:active {
    transform: scale(0.92);
}

.hint-btn.disabled,
.magic-peek-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.hint-btn-icon,
.magic-peek-btn-icon {
    font-size: 16px;
    line-height: 1;
}

.hint-btn-count,
.magic-peek-btn-count {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* 工具栏 */
.game-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
}

/* ============================
   星级评价系统
   ============================ */
.star-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 4px;
}

.star-rating .star {
    font-size: clamp(32px, 9vmin, 48px);
    opacity: 0.2;
    transform: scale(0);
    transition: all 0.3s;
}

.star-rating .star.active {
    opacity: 1;
    transform: scale(1);
    animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

.star-rating .star.active:nth-child(1) { animation-delay: 0.2s; }
.star-rating .star.active:nth-child(2) { animation-delay: 0.5s; }
.star-rating .star.active:nth-child(3) { animation-delay: 0.8s; }

@keyframes starPop {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.4) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

.achievement-title {
    text-align: center;
    font-size: clamp(15px, 4vmin, 20px);
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 关卡卡片上的星级显示 */
.level-card .level-star-rating {
    font-size: 8px;
    margin-top: 1px;
    line-height: 1;
    letter-spacing: -1px;
}

.level-card .level-star-rating .star-filled {
    color: #fbbf24;
}

.level-card .level-star-rating .star-empty {
    color: rgba(255, 255, 255, 0.3);
}

/* ============================
   魔法眼透视效果
   ============================ */
.puzzle-grid.magic-peek .puzzle-cell.unfilled {
    animation: magicPeekFlash 2s ease;
}

@keyframes magicPeekFlash {
    0% { filter: brightness(1); }
    20% { filter: brightness(1.5) saturate(2); }
    80% { filter: brightness(1.3) saturate(1.5); }
    100% { filter: brightness(1); }
}

.magic-peek-btn.used {
    animation: magicPeekBtnFlash 0.6s ease;
}

.hint-btn.used {
    animation: hintBtnFlash 0.6s ease;
}

@keyframes hintBtnFlash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(85, 239, 196, 0.6); }
    50% { transform: scale(1.2); box-shadow: 0 0 20px 8px rgba(85, 239, 196, 0.4); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(85, 239, 196, 0); }
}

@keyframes magicPeekBtnFlash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(165, 94, 234, 0.6); }
    50% { transform: scale(1.2); box-shadow: 0 0 20px 8px rgba(165, 94, 234, 0.4); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(165, 94, 234, 0); }
}

/* ============================
   提示脉冲效果（增强）
   ============================ */
.puzzle-cell.hint-pulse {
    animation: hintPulseEnhanced 1s ease 3;
    z-index: 10;
}

@keyframes hintPulseEnhanced {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(85, 239, 196, 0.7);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(85, 239, 196, 0.4);
        filter: brightness(1.3);
    }
}

/* 连击时的拼图格子光效 */
.puzzle-cell.combo-glow {
    animation: comboGlow 0.6s ease;
}

@keyframes comboGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.8); }
    100% { box-shadow: 0 0 25px 10px rgba(255, 71, 87, 0); }
}

/* ============================
   完成统计信息
   ============================ */
.completion-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-icon {
    font-size: 18px;
}

.stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.stat-value {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
}

/* ============================
   联机模式 UI
   ============================ */
#online-lobby-screen {
    background: var(--bg-gradient);
    overflow-y: auto;
    padding-top: calc(env(safe-area-inset-top, 0px) + 2vh);
    padding-bottom: 2vh;
}

.online-lobby-content {
    text-align: center;
    padding: 16px 20px 30px;
    max-width: 480px;
    width: 90%;
    margin: 0 auto;
}

.online-logo {
    font-size: clamp(48px, 12vmin, 72px);
    margin-bottom: 8px;
    animation: logoBounce 2s ease infinite;
}

.online-title {
    font-size: clamp(24px, 6vmin, 34px);
    color: var(--color-text-white);
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 4px;
}

.online-subtitle {
    font-size: clamp(13px, 3vmin, 16px);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

.online-section {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    margin-bottom: 16px;
}

.online-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-stack);
}

.online-action-btn.create-btn {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    box-shadow: 0 6px 20px rgba(67, 233, 123, 0.35);
}

.online-action-btn.join-btn {
    background: linear-gradient(135deg, #45AAF2, #00CEC9);
    box-shadow: 0 4px 15px rgba(69, 170, 242, 0.3);
    padding: 12px 20px;
    flex-direction: row;
    justify-content: center;
    flex: 1;
}

.online-action-btn:active {
    transform: scale(0.96);
}

.online-action-icon {
    font-size: 28px;
}

.online-action-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.online-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.5);
}

.online-divider::before,
.online-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.online-join-area {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.online-room-input {
    flex: 1;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-text-dark);
    font-family: var(--font-stack);
    outline: none;
}

.online-room-input:focus {
    border-color: #00CEC9;
    box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.2);
}

.online-room-input::placeholder {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 400;
    color: #aaa;
    text-transform: none;
}

/* 房间等待区 */
.room-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.room-code-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 600;
}

.room-code-text {
    font-size: clamp(32px, 10vmin, 48px);
    font-weight: 900;
    color: #fff;
    letter-spacing: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 20px;
    border-radius: var(--radius-sm);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.copy-code-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.copy-code-btn:active {
    transform: scale(0.9);
}

.room-hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin-bottom: 12px;
}

/* 邀请链接分享按钮 */
.share-invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #00ACC1, #26C6DA);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0, 172, 193, 0.4);
    font-family: var(--font-stack);
}

.share-invite-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(0, 172, 193, 0.4);
}

.share-invite-btn .share-icon {
    font-size: 18px;
}

/* 在线玩家列表 */
.online-player-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.online-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    animation: scoreRowShow 0.4s ease backwards;
}

.online-player-item.me {
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.online-player-item .player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.online-player-item .player-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.online-player-item .player-info-name {
    flex: 1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.online-player-item .player-host-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.online-player-item .player-ready-badge {
    color: #2ed573;
    font-size: 14px;
}

.online-player-item .player-waiting-slot {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    font-style: italic;
}

/* 联机大厅关卡选择 */
.online-level-select {
    margin-bottom: 16px;
}

.online-section-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.online-lobby-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.online-back-btn {
    margin-top: 8px;
}

/* 联机模式按钮 */
.online-mode-btn {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.online-mode-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.25);
}

/* 连接状态指示器 */
.connection-status {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 5000;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
}

.connection-status .conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ed573;
    animation: connPulse 1.5s ease infinite;
}

.connection-status.disconnected .conn-dot {
    background: #FF6B6B;
    animation: none;
}

@keyframes connPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 联机模式 - 非当前玩家禁用拖拽 */
.activity-slot.disabled .activity-piece {
    opacity: 0.5;
    pointer-events: none;
}

.activity-area.not-your-turn .activity-slot {
    pointer-events: none;
}

.activity-area.not-your-turn .activity-label::before {
    content: '⏳ ';
}

/* 等待提示 */
.waiting-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px 30px;
    border-radius: var(--radius-lg);
    z-index: 4000;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.waiting-overlay .waiting-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: spin 0.8s linear infinite;
}

/* ============================
   情境化叙事 - 故事横幅
   ============================ */
.story-banner {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4200;
    max-width: 90vw;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: storySlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.story-banner.fade-out {
    animation: storyFadeOut 0.5s ease-out forwards;
}

.story-banner-emoji {
    font-size: 28px;
    flex-shrink: 0;
    animation: storyEmojiBounce 0.6s ease-out 0.2s;
}

.story-banner-text {
    color: #fff;
    font-size: clamp(14px, 3.5vmin, 18px);
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.story-banner.story-complete {
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.95), rgba(254, 202, 87, 0.95));
}

.story-banner.story-complete .story-banner-emoji {
    animation: storyEmojiSpin 0.8s ease-out;
}

@keyframes storySlideIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.8); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes storyFadeOut {
    0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
}

@keyframes storyEmojiBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes storyEmojiSpin {
    0% { transform: scale(0) rotate(0deg); }
    50% { transform: scale(1.4) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* ============================
   多感官数字反馈 - 粒子动画
   ============================ */
@keyframes numberPop {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    20% {
        transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.5);
        opacity: 0;
    }
}

/* ============================
   无失败设计 - 温和弹回动画
   ============================ */
.activity-piece.gentle-bounce {
    animation: gentleBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gentleBounce {
    0% { transform: scale(1) translateY(0); }
    20% { transform: scale(0.9) translateY(-6px) rotate(-5deg); }
    40% { transform: scale(1.05) translateY(-3px) rotate(3deg); }
    60% { transform: scale(0.97) translateY(-4px) rotate(-2deg); }
    80% { transform: scale(1.02) translateY(-1px) rotate(1deg); }
    100% { transform: scale(1) translateY(0) rotate(0); }
}

/* ============================
   投屏 TV 模式
   ============================ */
body.tv-mode {
    background: #000;
}

body.tv-mode .puzzle-grid {
    max-width: 90vw;
    max-height: 80vh;
}

body.tv-mode .puzzle-cell {
    font-size: clamp(20px, 4vw, 48px);
}

body.tv-mode .game-header,
body.tv-mode .activity-section {
    transform: scale(1.2);
    transform-origin: center;
}

body.tv-mode .total-timer-text {
    font-size: 48px;
}

/* ============================
   无障碍：减弱动效支持
   ============================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 回合切换期间锁定活动区输入 */
.activity-area.input-locked {
    pointer-events: none;
    opacity: 0.6;
}

/* ============================
   拖拽放大镜
   ============================ */
.drag-magnifier {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #667eea;
    border-radius: 18px;
    padding: 8px 12px 10px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(102, 126, 234, 0.15);
    animation: magPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drag-magnifier.hidden {
    display: none;
}

/* 放大镜中的超大数字 */
.magnifier-badge {
    font-size: clamp(34px, 7vmin, 52px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--mag-color, #667eea);
    min-width: 48px;
    text-align: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* 放大镜中的碎片预览（不规则形状） */
.magnifier-piece {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.magnifier-piece canvas {
    max-width: 56px;
    max-height: 56px;
    border-radius: 8px;
}

@keyframes magPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}