/* ════════════════════════════════════════════════════════════
   QUALITY QUEST BINGO — 高级蓝色科技风设计系统 v2
   主色: 科技蓝 #4d9aff  辅色: 深海蓝 #0a1228  火焰: 橙金 #ff8c1a
   动态火炬: --flame-intensity (0~1, JS驱动)
   ════════════════════════════════════════════════════════════ */

:root {
    /* ── 背景层次（暗黑暖底，火焰主题）── */
    --bg-deep:        #0a0805;
    --bg-dark:        #14100b;
    --bg-mid:         #211a12;
    --bg-card:        rgba(28, 22, 14, 0.55);
    --bg-card-solid:  #1a140d;
    --bg-card-hover:  rgba(50, 38, 22, 0.6);
    --border-glow:    rgba(245, 158, 11, 0.16);
    --border-strong:  rgba(245, 158, 11, 0.32);

    /* ── 火焰色系（火炬 / 特殊元素 / 主题主色）── */
    --fire-red:       #ef4444;
    --fire-orange:    #ff8c1a;
    --fire-orange2:   #f97316;
    --fire-deep:      #ff5500;
    --fire-gold:      #fbbf24;
    --fire-bright:    #fef08a;
    --fire-light:     #fff7d4;
    --fire-glow:      rgba(255, 140, 26, 0.5);
    --flame-line:     #f59e0b;

    /* ── 主题主色系（暗黑火焰金；原科技蓝已统一映射）── */
    --tech-blue:      #f59e0b;
    --tech-blue-deep: #b45309;
    --tech-cyan:      #fbbf24;
    --tech-purple:    #ef4444;
    /* RGB 分量（供 rgba() 硬编码阴影/光晕随主题变色） */
    --tech-blue-rgb:     245, 158, 11;
    --tech-cyan-rgb:     251, 191, 36;
    --tech-purple-rgb:   239, 68, 68;

    /* ── 兼容旧变量 ── */
    --blue-primary:   #f59e0b;
    --blue-done:      #f59e0b;
    --blue-bright:    #f59e0b;
    --cyan-accent:    #fbbf24;
    --purple-accent:  #ef4444;
    --red-danger:     #ef4444;
    --gold:           #ffd700;

    /* ── 动态火炬强度 (0~1, JS 动态设置) ── */
    --flame-intensity: 0.5;

    /* ── 文字（暖白 / 金褐，去掉蓝调）── */
    --text-primary:   #f5ece0;
    --text-secondary: #d4b483;
    --text-muted:     #9a8b6e;
    --text-dim:       #6b5d44;

    /* ── 阴影（暖金光）── */
    --shadow-glow:    0 0 24px rgba(255, 140, 26, 0.35);
    --shadow-blue:    0 0 24px rgba(245, 158, 11, 0.35);
    --shadow-card:    0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 158, 11, 0.06);
    --shadow-premium: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ── 圆角 ── */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
}

/* ────────── Reset & 全局 ────────── */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    letter-spacing: 0.3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ────────── 星空背景（增强层次） ────────── */
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -5%, rgba(249, 115, 22, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 100%, rgba(239, 68, 68, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #0a0805 0%, #14100b 45%, #0a0705 100%);
    z-index: -2;
}
/* 星点粒子 */
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255,240,200,0.6), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(245,158,11,0.4), transparent),
        radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 50% 20%, rgba(249,115,22,0.35), transparent),
        radial-gradient(1px 1px at 10% 60%, rgba(255,215,0,0.3), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 15% 50%, rgba(255,255,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 85% 30%, rgba(245,158,11,0.3), transparent),
        radial-gradient(0.5px 0.5px at 45% 90%, rgba(255,255,255,0.3), transparent),
        radial-gradient(0.5px 0.5px at 65% 15%, rgba(255,215,0,0.2), transparent);
    background-size: 100% 100%;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* ────────── 闪现消息 ────────── */
.flash-container {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 9999; width: 90%; max-width: 400px;
}
.flash {
    padding: 12px 18px; border-radius: var(--radius-md);
    margin-bottom: 8px; font-size: 14px; text-align: center;
    animation: slideDown 0.3s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glow);
}
.flash-success { background: rgba(0, 224, 200, 0.15); color: var(--cyan-accent); border-color: rgba(0, 224, 200, 0.4); }
.flash-error   { background: rgba(255, 71, 87, 0.15); color: var(--red-danger); border-color: rgba(255, 71, 87, 0.4); }
.flash-info    { background: rgba(var(--tech-blue-rgb), 0.15); color: var(--tech-blue); border-color: rgba(var(--tech-blue-rgb), 0.4); }
@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   通用组件
   ════════════════════════════════════════════════════════════ */

/* 玻璃卡片（增强质感） */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

/* 主按钮(蓝金渐变) */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-size: 15px; font-weight: 700;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    color: #fff;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.15s, box-shadow 0.2s;
}
.btn-primary:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* 次按钮(蓝边框) */
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius-md);
    font-size: 14px; font-weight: 600;
    background: transparent;
    color: var(--tech-blue);
    border: 1px solid var(--border-strong);
    transition: all 0.2s;
}
.btn-secondary:active { background: var(--bg-card-hover); border-color: var(--tech-blue); }

/* 危险按钮 */
.btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius-md);
    font-size: 14px; font-weight: 600;
    background: rgba(255, 71, 87, 0.12);
    color: var(--red-danger);
    border: 1px solid rgba(255, 71, 87, 0.35);
}

/* 大按钮(用于卡片页主操作) */
.btn-large {
    display: block; width: 100%;
    padding: 14px;
    border-radius: var(--radius-md);
    font-size: 14px; font-weight: 700;
    text-align: center; letter-spacing: 1px;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* 输入框 */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block; font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(8, 20, 44, 0.6);
    border: 1px solid var(--border-glow);
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--tech-blue);
    background: rgba(12, 28, 62, 0.7);
    box-shadow: 0 0 0 3px rgba(var(--tech-blue-rgb), 0.12);
}

/* 标签 chip */
.tag {
    display: inline-block;
    font-size: 11px; padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.tag-fire   { background: rgba(255, 140, 26, 0.12); color: var(--fire-orange); border: 1px solid rgba(255, 140, 26, 0.3); }
.tag-blue   { background: rgba(var(--tech-blue-rgb), 0.12); color: var(--tech-blue); border: 1px solid rgba(var(--tech-blue-rgb), 0.3); }
.tag-cyan   { background: rgba(var(--tech-cyan-rgb), 0.12); color: var(--cyan-accent); border: 1px solid rgba(var(--tech-cyan-rgb), 0.3); }
.tag-purple { background: rgba(var(--tech-purple-rgb), 0.12); color: var(--purple-accent); border: 1px solid rgba(var(--tech-purple-rgb), 0.3); }

/* 任务标签(弹窗内) */
.task-tag {
    display: inline-block;
    font-size: 12px; padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.12);
    color: var(--fire-gold);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ════════════════════════════════════════════════════════════
   品牌头部 (所有页面统一)
   ════════════════════════════════════════════════════════════ */
.brand-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-glow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.brand-left { display: flex; align-items: center; gap: 10px; }
.brand-logo {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 6px rgba(var(--tech-blue-rgb), 0.4));
}
.brand-name {
    font-size: 13px; font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-primary);
}
.brand-name span { color: var(--tech-blue); }
.brand-actions { display: flex; align-items: center; gap: 10px; }
.brand-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    display: flex; align-items: center; justify-content: center;
    color: var(--tech-blue);
    font-size: 16px;
    transition: all 0.2s;
}
.brand-btn:hover { border-color: var(--tech-blue); box-shadow: 0 0 12px rgba(var(--tech-blue-rgb), 0.2); }

/* ════════════════════════════════════════════════════════════
   动态火炬系统 — --flame-intensity 驱动
   ════════════════════════════════════════════════════════════ */

/* Play 页火炬：跟随进度动态变化 */
.play-torch img {
    filter:
        brightness(calc(0.35 + var(--flame-intensity) * 0.85))
        saturate(calc(0.15 + var(--flame-intensity) * 0.95))
        hue-rotate(calc((1 - var(--flame-intensity)) * 190deg))
        drop-shadow(0 0 calc(4px + var(--flame-intensity) * 28px) rgba(255, 140, 26, calc(0.15 + var(--flame-intensity) * 0.55)));
    transform: scale(calc(0.6 + var(--flame-intensity) * 0.45));
    transform-origin: center bottom;
    transition: filter 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Intro 页火炬：固定中等强度 */
.intro-torch img {
    filter:
        brightness(0.85)
        saturate(0.9)
        drop-shadow(0 0 12px rgba(255, 140, 26, 0.4));
}

/* Join 页火炬装饰：固定中等强度 */
.join-page::before, .join-page::after {
    filter:
        brightness(0.8)
        saturate(0.85)
        drop-shadow(0 0 10px rgba(255, 140, 26, 0.35));
}

/* 火炬光晕底座（play页，随强度变化） */
.play-torch::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: calc(60px + var(--flame-intensity) * 40px);
    height: calc(20px + var(--flame-intensity) * 30px);
    background: radial-gradient(ellipse, rgba(255, 140, 26, calc(0.08 + var(--flame-intensity) * 0.25)) 0%, transparent 70%);
    pointer-events: none;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* ════════════════════════════════════════════════════════════
   入场页 /join
   ════════════════════════════════════════════════════════════ */
.join-page {
    min-height: 100vh;
    padding: 20px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.join-page::before {
    content: '';
    position: absolute;
    left: -40px; top: 5%;
    width: 120px; height: 380px;
    background: url('/static/img/torch.svg') center/contain no-repeat;
    opacity: 0.5;
    pointer-events: none;
}
.join-page::after {
    content: '';
    position: absolute;
    right: -40px; top: 5%;
    width: 120px; height: 380px;
    background: url('/static/img/torch.svg') center/contain no-repeat;
    opacity: 0.5;
    pointer-events: none;
}
.join-card {
    width: 100%; max-width: 400px;
    background: var(--bg-card);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: 36px 30px;
    position: relative;
    box-shadow: var(--shadow-premium), 0 0 80px rgba(var(--tech-blue-rgb), 0.1);
}
.join-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--tech-blue), var(--tech-cyan), transparent);
}
.join-logo {
    text-align: center;
    margin-bottom: 28px;
}
.join-logo h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 8px;
}
.join-logo h1 .fire {
    background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(var(--tech-blue-rgb), 0.4);
}
.join-logo p {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   Play 主页 /play — 高级三栏布局
   ════════════════════════════════════════════════════════════ */
.play-page {
    position: relative;
    min-height: 100vh;
    padding-bottom: 100px;
}
/* play 页暖色光晕：让火焰更突出（叠加在星空背景之上） */
.play-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 50% -5%, rgba(249, 115, 22, 0.12), transparent 60%),
        radial-gradient(700px 400px at 100% 100%, rgba(239, 68, 68, 0.08), transparent 60%);
}

/* 顶栏:BEONE 品牌 + 双火炬 */
.play-top {
    position: relative;
    padding: 20px 16px 8px;
    text-align: center;
}
.play-torch {
    position: absolute;
    top: 20px;
    width: clamp(40px, 12vw, 80px); height: clamp(120px, 35vw, 220px);
    pointer-events: none;
    z-index: 1;
}
.play-torch.left  { left: -10px; }
.play-torch.right { right: -10px; }
.play-torch img { width: 100%; height: 100%; }

/* 大标题 */
.play-title {
    font-size: clamp(22px, 6vw, 42px);
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 8px;
}
.play-title .fire {
    background: linear-gradient(180deg, var(--fire-bright), var(--fire-gold) 55%, var(--fire-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(245, 158, 11, 0.25);
}
.play-subtitle {
    font-size: clamp(11px, 3vw, 15px);
    letter-spacing: 1px;
    color: var(--fire-gold);
    margin-bottom: 16px;
    opacity: 0.88;
}
.play-subtitle span { color: var(--fire-orange); margin: 0 6px; }

/* 标题左侧燃烧火炬（与火焰 demo 一致：跳动 + 红橙黄脉动光晕） */
.title-torch-svg {
    width: clamp(36px, 9vw, 62px);
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.6));
    animation: torch-bob 2.4s ease-in-out infinite;
    position: relative;
}
.title-torch-svg .flame { transform-origin: 50% 100%; animation: flame-dance 0.55s ease-in-out infinite; }
.title-torch-svg .flame-outer { animation: flame-color 1.2s linear infinite; }
.title-torch-svg .flame-mid   { animation: flame-color 1.2s linear infinite reverse; }
.title-torch-svg::after {
    content: "";
    position: absolute;
    left: 50%; top: 14%;
    width: 64px; height: 64px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(245,158,11,0.55) 0%, rgba(249,115,22,0.18) 45%, transparent 70%);
    border-radius: 50%;
    animation: halo 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes flame-dance {
    0%,100% { transform: scaleY(1) scaleX(1) translateY(0) skewX(0); }
    25% { transform: scaleY(1.08) scaleX(0.95) translateY(-2px) skewX(3deg); }
    50% { transform: scaleY(0.95) scaleX(1.04) translateY(1px) skewX(-2deg); }
    75% { transform: scaleY(1.05) scaleX(0.97) translateY(-1px) skewX(2deg); }
}
@keyframes flame-color {
    0%   { fill: var(--fire-red); }
    50%  { fill: var(--fire-orange2); }
    100% { fill: var(--fire-gold); }
}
@keyframes torch-bob {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%     { transform: translateY(-4px) rotate(1deg); }
}
@keyframes halo {
    0%,100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
    50%     { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
}

/* 透明 PNG 火炬图片样式（AI 生成，替代 SVG 火炬） */
.torch-img {
    height: 90px;
    width: auto;
    flex-shrink: 0;
    display: block;
    filter:
        drop-shadow(0 0 10px rgba(255, 120, 30, 0.5))
        drop-shadow(0 0 22px rgba(255, 90, 16, 0.25));
    object-fit: contain;
}
.torch-anim {
    animation: torch-float-glow 2.4s ease-in-out infinite;
}
@keyframes torch-float-glow {
    0%   { transform: translateY(0px) scale(1);    filter: drop-shadow(0 0 10px rgba(255, 120, 30, 0.5)); }
    50%  { transform: translateY(-6px) scale(1.04);filter: drop-shadow(0 0 22px rgba(255, 90, 16, 0.8)); }
    100% { transform: translateY(0px) scale(1);   filter: drop-shadow(0 0 10px rgba(255, 120, 30, 0.5)); }
}

/* 主舞台:左右信息卡 + 中央地图 */
.play-stage {
    position: relative;
    display: grid;
    grid-template-columns: clamp(70px, 18vw, 130px) 1fr clamp(70px, 18vw, 130px);
    gap: clamp(6px, 2vw, 16px);
    padding: 0 clamp(8px, 3vw, 24px);
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

/* 左右信息卡 */
.play-side {
    background: linear-gradient(180deg, #161620, #101019);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #2a2a3d;
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.play-side h4 {
    font-size: clamp(9px, 2.5vw, 13px);
    color: var(--fire-gold);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.play-side h4 .panel-flame {
    color: var(--fire-orange2);
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.7));
}
.play-side .step-list {
    text-align: left;
    list-style: none;
    font-size: clamp(9px, 2.2vw, 12px);
    color: var(--text-secondary);
    line-height: 1.8;
}
.play-side .step-list li {
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}
.play-side .step-list li::before {
    content: counter(step);
    counter-increment: step;
    position: absolute; left: 0;
    width: 12px; height: 12px;
    background: linear-gradient(135deg, var(--fire-orange2), var(--fire-deep));
    color: #1a0a00;
    border-radius: 50%;
    font-size: 8px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    top: 4px;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
.play-side.progress { counter-reset: step; }
.play-side .progress-ring {
    margin: 0 auto 12px;
    width: clamp(56px, 16vw, 90px); height: clamp(56px, 16vw, 90px);
    position: relative;
}
.play-side .progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.play-side .progress-ring circle.bg {
    fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6;
}
.play-side .progress-ring circle.fg {
    fill: none; stroke: var(--fire-gold); stroke-width: 6; stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
}
.play-side .progress-ring .num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    font-weight: 900;
}
.play-side .progress-ring .num .big {
    font-size: clamp(18px, 5vw, 28px); color: var(--fire-gold);
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.play-side .progress-ring .num .small {
    font-size: clamp(8px, 2vw, 11px); color: var(--text-secondary);
    margin-top: -2px;
}
.play-side .legend {
    text-align: left;
    font-size: clamp(9px, 2.2vw, 12px);
    color: var(--text-secondary);
}
.play-side .legend .row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
}
.play-side .legend .dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.play-side .legend .dot.done     { background: var(--fire-gold); box-shadow: 0 0 8px var(--fire-gold); }
.play-side .legend .dot.bingo    { background: var(--fire-orange); box-shadow: 0 0 8px var(--fire-orange); }
.play-side .legend .dot.points   { background: var(--fire-bright); box-shadow: 0 0 8px var(--fire-bright); }
.play-side .legend .dot.achieve  { background: var(--fire-red); box-shadow: 0 0 8px var(--fire-red); }
.play-side .achieve-link {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2a2a3d;
    font-size: 10px;
    color: var(--fire-gold);
    display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* 中央 Bingo 网格（增强质感） */
.bingo-board {
    background: linear-gradient(180deg, #161620, #0f0f18);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid #2a2a3d;
    border-radius: var(--radius-lg);
    padding: clamp(10px, 3vw, 24px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}
.bingo-board::before {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--fire-orange2), var(--fire-gold), transparent);
}
.bingo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: clamp(4px, 1.5vw, 10px);
}
.bingo-cell {
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(9px, 2.8vw, 14px);
    font-weight: 700;
    text-align: center;
    padding: clamp(2px, 1vw, 6px);
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    background: linear-gradient(160deg, #171722, #0f0f18);
    border: 1px solid rgba(245, 158, 11, 0.12);
    color: #9aa0b5;
    letter-spacing: 0.5px;
}
.bingo-cell:active { transform: scale(0.92); }
.bingo-cell.locked {
    background: rgba(10, 10, 16, 0.6);
    color: #3a3a4d;
    font-size: clamp(14px, 4vw, 24px);
}
.bingo-cell.active {
    background: linear-gradient(160deg, #1d1a12, #15110a);
    border-color: rgba(245, 158, 11, 0.22);
    color: #c9b48a;
    flex-direction: column;
}
.bingo-cell.active span {
    display: block;
    font-size: clamp(8px, 2.2vw, 12px);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.bingo-cell.free {
    background: linear-gradient(135deg, var(--fire-orange), var(--fire-deep));
    color: #1a0a00;
    font-size: clamp(10px, 3vw, 15px);
    box-shadow: var(--shadow-glow);
    border-color: var(--fire-light);
    flex-direction: column;
}
.bingo-cell.free::before {
    content: '\2605';
    font-size: clamp(14px, 4vw, 24px);
    margin-bottom: 2px;
}
.bingo-cell.completed {
    background: linear-gradient(135deg, var(--tech-blue-deep), #1a4fb5);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
    border-color: var(--tech-blue);
    flex-direction: column;
}
.bingo-cell.completed::before {
    content: '';
    display: none;
}
/* ═══ bingo-line: 动态燃烧火焰效果 ═══ */
.bingo-cell.bingo-line {
    /* 火焰底色：底部火焰渐变 + 蓝色基底 */
    background:
        radial-gradient(ellipse 90% 60% at 50% 115%, rgba(255, 215, 0, 0.4), transparent 55%),
        radial-gradient(ellipse 70% 45% at 30% 110%, rgba(255, 140, 26, 0.35), transparent 50%),
        radial-gradient(ellipse 70% 45% at 70% 110%, rgba(255, 85, 0, 0.3), transparent 50%),
        linear-gradient(180deg, var(--tech-blue-deep) 0%, #1a4fb5 50%, rgba(255, 120, 20, 0.15) 100%);
    border-color: rgba(255, 215, 0, 0.7);
    animation: flame-glow 1.5s ease-in-out infinite alternate;
}
/* 火焰闪烁叠加层（::after，不遮挡内容） */
.bingo-cell.bingo-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 35% at 20% 105%, rgba(255, 230, 80, 0.45), transparent 70%),
        radial-gradient(ellipse 50% 35% at 50% 105%, rgba(255, 170, 30, 0.4), transparent 70%),
        radial-gradient(ellipse 50% 35% at 80% 105%, rgba(255, 100, 0, 0.35), transparent 70%);
    animation: flame-flicker 0.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}
/* 内容层级置于火焰之上 */
.bingo-cell.bingo-line > * {
    position: relative;
    z-index: 1;
}
.bingo-cell.bingo-line::before {
    z-index: 1;
}
/* 辉光脉动：外发光 + 内发光在火色间交替 */
@keyframes flame-glow {
    0% {
        box-shadow:
            0 0 10px rgba(255, 140, 26, 0.45),
            0 0 20px rgba(255, 180, 0, 0.25),
            inset 0 0 0 2px rgba(255, 215, 0, 0.5),
            inset 0 -6px 12px rgba(255, 140, 26, 0.15);
    }
    50% {
        box-shadow:
            0 0 16px rgba(255, 180, 0, 0.6),
            0 0 32px rgba(255, 215, 0, 0.35),
            inset 0 0 0 2px rgba(255, 230, 100, 0.65),
            inset 0 -10px 18px rgba(255, 160, 30, 0.25);
    }
    100% {
        box-shadow:
            0 0 14px rgba(255, 160, 20, 0.55),
            0 0 28px rgba(255, 200, 0, 0.3),
            inset 0 0 0 2px rgba(255, 220, 80, 0.6),
            inset 0 -8px 15px rgba(255, 150, 20, 0.2);
    }
}
/* 火焰闪烁：位移 + 缩放 + 透明度变化模拟火苗跳动 */
@keyframes flame-flicker {
    0%   { transform: translateY(0)   scaleY(1)    scaleX(1);    opacity: 0.7; }
    20%  { transform: translateY(-2px) scaleY(1.08) scaleX(0.97); opacity: 0.85; }
    40%  { transform: translateY(-1px) scaleY(0.95) scaleX(1.03); opacity: 0.75; }
    60%  { transform: translateY(-3px) scaleY(1.1)  scaleX(0.98); opacity: 0.9; }
    80%  { transform: translateY(-1px) scaleY(1.02) scaleX(1.01); opacity: 0.8; }
    100% { transform: translateY(-2px) scaleY(1.05) scaleX(0.99); opacity: 0.88; }
}
/* 连线格子的对勾变金色 + 火焰文字阴影 */
.bingo-cell.bingo-line.completed::before {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 0 16px rgba(255, 140, 26, 0.4);
}
/* FREE 格子连线时叠加火焰 */
.bingo-cell.bingo-line.free {
    background:
        radial-gradient(ellipse 90% 60% at 50% 115%, rgba(255, 230, 80, 0.35), transparent 55%),
        linear-gradient(135deg, var(--fire-orange), var(--fire-deep));
}

/* 副标题 */
.play-tagline {
    text-align: center;
    font-size: clamp(10px, 2.8vw, 14px);
    color: var(--fire-gold);
    margin-top: 16px;
    padding: 0 16px;
    letter-spacing: 0.5px;
    opacity: 0.85;
}
.play-tagline::before, .play-tagline::after { content: '\2605'; color: var(--fire-orange2); margin: 0 8px; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); }

/* 流程图 */
.flow-section {
    padding: 24px 16px;
}
.flow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}
.flow-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 14px;
    font-size: 12px;
    box-shadow: var(--shadow-card);
}
.flow-card .flow-num {
    display: inline-block;
    font-size: 10px;
    color: var(--tech-blue);
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.flow-card .flow-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.flow-card .flow-body {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.flow-card .flow-points {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    background: rgba(var(--tech-blue-rgb), 0.12);
    color: var(--tech-blue);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
}

/* 任务类别彩卡 — 折叠区 */
.category-collapse {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
}
.category-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}
.category-toggle:hover { border-color: var(--fire-orange2); color: var(--fire-gold); }
.category-toggle .arrow { transition: transform 0.3s; font-size: 10px; }
.category-toggle.open .arrow { transform: rotate(180deg); }
.category-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.category-content.open { max-height: 800px; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    padding-top: 12px;
}
.cat-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    text-align: center;
    position: relative;
}
.cat-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 25%; right: 25%; height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.6;
}
.cat-card.quality  { color: var(--fire-gold); }
.cat-card.qeci     { color: var(--fire-orange2); }
.cat-card.people   { color: var(--fire-red); }
.cat-card.fun      { color: var(--fire-bright); }
.cat-card.champion { color: var(--gold); }
.cat-card .cat-icon {
    width: 32px; height: 32px;
    margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
}
.cat-card .cat-name {
    font-size: clamp(10px, 2.5vw, 13px);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.cat-card .cat-items {
    font-size: clamp(8px, 2vw, 11px);
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left;
    padding-left: 8px;
    list-style: none;
}
.cat-card .cat-items li {
    margin-bottom: 2px;
    position: relative;
}
.cat-card .cat-items li::before {
    content: '\00B7';
    position: absolute;
    left: -8px;
    color: currentColor;
}

/* ════════════════════════════════════════════════════════════
   隐藏任务区块
   ════════════════════════════════════════════════════════════ */
.hidden-section {
    margin: 24px 16px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 140, 26, 0.08), rgba(var(--tech-purple-rgb), 0.08));
    border: 1px solid rgba(255, 140, 26, 0.3);
    position: relative;
}
.hidden-section::before {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--fire-orange), transparent);
}
.hidden-title {
    font-size: 16px;
    color: var(--fire-orange);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
    text-shadow: 0 0 12px var(--fire-glow);
}
.hidden-task-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.hidden-task-item.done { opacity: 0.5; }
.hidden-task-item .ht-title { font-size: 13px; }
.hidden-task-item .ht-points { font-size: 12px; color: var(--fire-orange); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   游戏介绍页 /intro — 6 步玩法流程
   ════════════════════════════════════════════════════════════ */
.intro-page {
    position: relative;
    min-height: 100vh;
    padding-bottom: 100px;
}

.intro-hero {
    position: relative;
    padding: 24px 16px 16px;
    text-align: center;
}
.intro-torch {
    position: absolute;
    top: 0;
    width: 50px;
    height: 150px;
    pointer-events: none;
}
.intro-torch.left  { left: 10px;  transform: scaleX(-1); }
.intro-torch.right { right: 10px; }
.intro-torch img { width: 100%; height: 100%; object-fit: contain; }

.intro-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--text-primary);
    margin: 12px 0 6px;
}
.intro-subtitle {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 6px;
    margin: 4px 0 8px;
}
.intro-subtitle .fire {
    background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.intro-tagline {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.intro-flow {
    padding: 16px 16px 0;
    max-width: 700px;
    margin: 0 auto;
}

.intro-footer {
    max-width: 600px;
    margin: 32px auto 24px;
    padding: 20px 16px;
    text-align: center;
}
.intro-champion {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(255, 140, 26, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    text-align: left;
    margin-bottom: 20px;
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.1);
}
.intro-champion img {
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}
.intro-champion-text {
    flex: 1;
}
.champion-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.champion-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.intro-cta {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 3px;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
}
.intro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ════════════════════════════════════════════════════════════
   底部导航（active 改蓝色）
   ════════════════════════════════════════════════════════════ */
.bottom-nav {
    position: fixed; bottom: 20px; left: 0; right: 0;
    display: flex; justify-content: space-around; align-items: center;
    background: rgba(3, 8, 20, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--border-glow);
    padding: 10px 0 env(safe-area-inset-bottom, 10px);
    z-index: 100;
}
.bottom-nav::before {
    content: '';
    position: absolute;
    top: -1px; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--fire-orange2), transparent);
    opacity: 0.5;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 6px;
    flex: 1;
    min-width: 0;
    transition: color 0.2s;
}
.nav-item.active {
    color: var(--fire-gold);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.nav-item svg { width: 22px; height: 22px; }
.nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ════════════════════════════════════════════════════════════
   ID 卡片 /card
   ════════════════════════════════════════════════════════════ */
.card-page {
    padding: 20px;
    padding-bottom: 100px;
    min-height: 100vh;
}
.card-wrap {
    perspective: 1200px;
    max-width: 360px;
    margin: 32px auto 24px;
}
.id-card {
    width: 100%;
    aspect-ratio: 1.586;
    border-radius: var(--radius-lg);
    position: relative;
    transition: transform 0.7s;
    transform-style: preserve-3d;
    cursor: pointer;
}
.id-card.flipped { transform: rotateY(180deg); }
.card-face {
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    backface-visibility: hidden;
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 24px;
}
.card-front {
    background: var(--card-color, var(--tech-blue));
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
}
.card-front::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.2), transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px);
}
.card-back {
    background: #fff;
    color: #333;
    transform: rotateY(180deg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.card-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    position: relative;
}
.card-name {
    font-size: 28px;
    font-weight: 800;
    margin: 8px 0 4px;
    position: relative;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.card-dept {
    font-size: 14px;
    opacity: 0.9;
    position: relative;
}
.card-bottom {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: flex-end;
    position: relative;
}
.card-id {
    font-size: 12px;
    opacity: 0.7;
}
.card-color-badge {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: var(--card-color, var(--tech-blue));
}
.card-qr {
    width: 200px; height: 200px;
    border-radius: var(--radius-md);
}
.card-qr-hint {
    font-size: 12px;
    color: #999;
    margin-top: 12px;
    text-align: center;
}
.card-actions {
    display: flex; gap: 12px;
    margin-top: 24px; justify-content: center;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   任务弹窗
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(3, 8, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal {
    width: 100%; max-width: 380px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-premium);
    transform: scale(0.9);
    transition: transform 0.3s;
    position: relative;
}
.modal-overlay.show .modal { transform: scale(1); }
.modal::before {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--fire-orange2), var(--fire-gold), transparent);
}
.modal h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--fire-gold);
}
.modal .task-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.7;
}
.modal .task-meta {
    display: flex; gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   扫码页 /scan
   ════════════════════════════════════════════════════════════ */
.scan-page {
    padding: 20px;
    min-height: 100vh;
    display: flex; flex-direction: column;
}
.scan-header { text-align: center; margin-bottom: 24px; }
.scan-header h2 {
    font-size: 24px; font-weight: 900;
    letter-spacing: 2px; margin-bottom: 8px;
}
.scan-header h2 .fire {
    background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.scan-area {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 24px;
}
.scan-frame {
    width: 260px; height: 260px;
    border: 2px solid var(--tech-blue);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 32px rgba(var(--tech-blue-rgb), 0.25), inset 0 0 32px rgba(var(--tech-blue-rgb), 0.08);
}
.scan-frame::before, .scan-frame::after {
    content: '';
    position: absolute;
    width: 36px; height: 36px;
    border: 4px solid var(--tech-blue);
    border-radius: 4px;
}
.scan-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.scan-frame::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.scan-line {
    position: absolute;
    left: 8px; right: 8px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tech-blue), transparent);
    box-shadow: 0 0 12px var(--tech-blue);
    animation: scanMove 2s linear infinite;
}
@keyframes scanMove {
    0%   { top: 10%; }
    50%  { top: 90%; }
    100% { top: 10%; }
}
.scan-hint {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 280px;
    line-height: 1.7;
}
.scan-result {
    text-align: center;
    padding: 20px;
}
.scan-result .scanned-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 900;
    color: #fff;
    box-shadow: 0 0 24px rgba(var(--tech-blue-rgb), 0.4);
}
.scan-result .scanned-name {
    font-size: 22px; font-weight: 800;
    margin: 8px 0;
}
.scan-result .scanned-info {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════
   个人页 /profile
   ════════════════════════════════════════════════════════════ */
.profile-page {
    padding: 20px;
    padding-bottom: 100px;
}
.profile-header { text-align: center; margin-bottom: 24px; }
.profile-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    box-shadow: 0 0 24px rgba(var(--tech-blue-rgb), 0.4);
}
.profile-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
}
.profile-dept {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.profile-stat {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 16px 8px;
    text-align: center;
}
.profile-stat-num {
    font-size: 24px;
    font-weight: 900;
    color: var(--tech-blue);
    text-shadow: 0 0 12px rgba(var(--tech-blue-rgb), 0.4);
}
.profile-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
.section-title {
    font-size: 14px;
    color: var(--tech-blue);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}
.history-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.history-item .h-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tech-blue-deep), #1a4fb5);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}
.history-item .h-title { font-size: 13px; }
.history-item .h-time  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   排行榜 /leaderboard
   ════════════════════════════════════════════════════════════ */
.leaderboard-page {
    padding: 20px;
    padding-bottom: 100px;
}
.leaderboard-header {
    text-align: center;
    margin-bottom: 24px;
}
.leaderboard-header h2 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
}
.leaderboard-header h2 .fire {
    background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.leaderboard-tabs {
    display: flex; gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}
.leaderboard-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.leaderboard-tab.active {
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    color: #fff;
    border-color: var(--tech-blue);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.rank-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
}
.rank-item.me {
    background: rgba(var(--tech-blue-rgb), 0.08);
    border-color: var(--tech-blue);
}
.rank-item.top1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 140, 26, 0.08));
    border-color: var(--gold);
}
.rank-num {
    font-size: 18px; font-weight: 900;
    width: 32px; text-align: center;
    color: var(--text-muted);
}
.rank-num.top1 { color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
.rank-num.top2 { color: #C0C0C0; }
.rank-num.top3 { color: #CD7F32; }
.rank-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    background: var(--bg-card-hover);
    color: var(--tech-blue);
    border: 2px solid var(--border-glow);
}
.rank-info { flex: 1; }
.rank-name { font-size: 14px; font-weight: 600; }
.rank-dept { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.rank-score {
    font-size: 18px; font-weight: 900;
    color: var(--tech-blue);
    text-shadow: 0 0 12px rgba(var(--tech-blue-rgb), 0.3);
}

/* ════════════════════════════════════════════════════════════
   上传区域 / 通用
   ════════════════════════════════════════════════════════════ */
.upload-area {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 30px;
    text-align: center;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.upload-area:hover, .upload-area.drag-over {
    background: var(--bg-card);
    border-color: var(--tech-blue);
}
.upload-area img { max-height: 200px; margin: 0 auto; border-radius: var(--radius-sm); }
.upload-hint { font-size: 13px; color: var(--text-muted); }

.page-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 900;
    letter-spacing: 2px;
}
.page-title .fire {
    background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 响应式 */
@media (max-width: 380px) {
    .play-side { padding: 10px 6px; }
}

/* 平板及以上:放大关键元素 */
@media (min-width: 600px) {
    .play-top { padding: 28px 16px 10px; }
    .bingo-board { padding: 20px; }
    .play-side { padding: 16px 12px; }
}

/* 桌面端:充分利用宽屏 */
@media (min-width: 900px) {
    .play-page { max-width: 1000px; margin: 0 auto; }
    .play-top { padding: 32px 16px 12px; }
    .bingo-board { padding: 24px; }
    .cat-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   管理端 — 蓝色科技风
   ════════════════════════════════════════════════════════════ */
.admin-body {
    background: var(--bg-deep);
    color: var(--text-primary);
}
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 220px;
    background: rgba(3, 8, 20, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--border-glow);
    position: fixed; top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    padding: 20px 0;
    z-index: 10;
}
.admin-sidebar::before {
    content: '';
    position: absolute;
    top: 60px; right: -1px;
    width: 1px; height: 60px;
    background: linear-gradient(180deg, transparent, var(--tech-blue), transparent);
}
.admin-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--border-glow);
}
.admin-sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
    border-left: 3px solid transparent;
    font-weight: 500;
}
.admin-sidebar a .icon { font-size: 16px; width: 20px; text-align: center; }
.admin-sidebar a:hover {
    background: rgba(var(--tech-blue-rgb), 0.06);
    color: var(--text-primary);
}
.admin-sidebar a.active {
    background: linear-gradient(90deg, rgba(var(--tech-blue-rgb), 0.12), transparent);
    color: var(--tech-blue);
    border-left-color: var(--tech-blue);
    font-weight: 700;
}
.admin-main {
    margin-left: 220px;
    padding: 32px;
    flex: 1;
    min-height: 100vh;
    width: calc(100% - 220px);
}
.admin-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-glow);
}
.admin-page-header h2 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
}
.admin-page-header h2 .fire {
    background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.admin-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: var(--shadow-card);
}
.admin-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--tech-blue), transparent);
    opacity: 0.4;
}
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.admin-stat {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.admin-stat::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle, var(--tech-blue) 0%, transparent 70%);
    opacity: 0.12;
    border-radius: 50%;
    transform: translate(30%, -30%);
}
.admin-stat-num {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.admin-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.admin-table-wrap {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    padding: 4px;
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-table th, .admin-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-glow);
    font-size: 13px;
}
.admin-table th {
    background: rgba(var(--tech-blue-rgb), 0.06);
    font-weight: 700;
    color: var(--tech-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}
.admin-table tr:hover td { background: rgba(var(--tech-blue-rgb), 0.04); }
.admin-table tr:last-child td { border-bottom: none; }

.admin-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    margin-right: 4px;
}
.admin-btn-primary {
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-blue-deep));
    color: #fff;
}
.admin-btn-primary:hover { box-shadow: 0 0 12px rgba(var(--tech-blue-rgb), 0.35); }
.admin-btn-danger {
    background: rgba(255, 71, 87, 0.12);
    color: var(--red-danger);
    border: 1px solid rgba(255, 71, 87, 0.3);
}
.admin-btn-success {
    background: rgba(0, 224, 200, 0.12);
    color: var(--cyan-accent);
    border: 1px solid rgba(0, 224, 200, 0.3);
}
.admin-btn-outline {
    background: transparent;
    border: 1px solid var(--border-glow);
    color: var(--text-secondary);
}
.admin-btn-outline:hover { border-color: var(--tech-blue); color: var(--tech-blue); }

.admin-form-group { margin-bottom: 16px; }
.admin-form-group label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.admin-form-group input,
.admin-form-group textarea,
.admin-form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    background: rgba(8, 20, 44, 0.6);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s;
}
.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
    border-color: var(--tech-blue);
    box-shadow: 0 0 0 3px rgba(var(--tech-blue-rgb), 0.12);
}

.admin-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

/* 状态徽章 */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.badge-active  { background: rgba(0, 224, 200, 0.12); color: var(--cyan-accent); border: 1px solid rgba(0, 224, 200, 0.3); }
.badge-paused  { background: rgba(255, 71, 87, 0.12); color: var(--red-danger); border: 1px solid rgba(255, 71, 87, 0.3); }
.badge-pending { background: rgba(var(--tech-blue-rgb), 0.12); color: var(--tech-blue); border: 1px solid rgba(var(--tech-blue-rgb), 0.3); }

/* 颜色组小圆点 */
.color-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════
   礼物盒按钮 (play 页右上角)
   ════════════════════════════════════════════════════════════ */
.gift-box {
    position: fixed;
    top: 16px; right: 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gift-box .gift-icon {
    font-size: 28px;
    line-height: 1;
}
.gift-box .gift-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
/* 锁定状态: 灰暗 */
.gift-box.locked {
    opacity: 0.35;
    filter: grayscale(0.8);
}
.gift-box.locked .gift-icon {
    filter: brightness(0.5);
}
/* 解锁状态: 发光 + 脉冲动画 */
.gift-box.unlocked {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
    animation: gift-pulse 2s ease-in-out infinite;
}
.gift-box.unlocked:hover {
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    transform: scale(1.05);
}
@keyframes gift-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); }
    50%      { box-shadow: 0 0 32px rgba(255, 215, 0, 0.35); }
}

/* ════════════════════════════════════════════════════════════
   奖品详情页 /rewards
   ════════════════════════════════════════════════════════════ */

/* 当前等级卡片 */
.reward-current-card {
    max-width: 400px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 30px color-mix(in srgb, var(--tier-color, var(--tech-blue)) 15%, transparent);
    position: relative;
    overflow: hidden;
}
.reward-current-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-color, var(--tech-blue)), transparent);
}
.reward-current-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tier-color, var(--tech-blue)) 40%, transparent));
}
.reward-current-info {
    flex: 1;
}
.reward-current-label {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.reward-current-name {
    font-size: 22px;
    font-weight: 900;
    color: var(--tier-color, var(--tech-blue));
    line-height: 1.2;
}
.reward-current-en {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.reward-current-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 224, 200, 0.12);
    color: var(--cyan-accent);
    border: 1px solid rgba(0, 224, 200, 0.3);
}
.reward-current-badge.locked {
    background: rgba(74, 106, 150, 0.12);
    color: var(--text-muted);
    border-color: rgba(74, 106, 150, 0.3);
}

/* 火焰进度条 */
.reward-flame-bar {
    max-width: 400px;
    margin: 0 auto 24px;
}
.reward-flame-track {
    height: 8px;
    background: rgba(8, 20, 44, 0.8);
    border-radius: 4px;
    border: 1px solid var(--border-glow);
    overflow: hidden;
}
.reward-flame-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fire-deep), var(--fire-orange), var(--fire-light));
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 140, 26, 0.4);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reward-flame-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* 等级列表 */
.reward-tier-list {
    max-width: 400px;
    margin: 0 auto 20px;
}
.reward-tier-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 10px;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    transition: all 0.3s;
}
.reward-tier-item.unlocked {
    border-color: color-mix(in srgb, var(--tier-color, var(--tech-blue)) 30%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--tier-color, var(--tech-blue)) 8%, transparent);
}
.reward-tier-item.locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}
.reward-tier-icon {
    font-size: 32px;
    line-height: 1;
    width: 40px;
    text-align: center;
}
.reward-tier-info {
    flex: 1;
}
.reward-tier-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tier-color, var(--text-primary));
}
.reward-tier-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.reward-tier-status {
    font-size: 12px;
    font-weight: 600;
}
.reward-tier-status.unlocked {
    color: var(--cyan-accent);
}
.reward-tier-status.locked {
    font-size: 18px;
}

/* 提示信息 */
.reward-tip {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    background: rgba(var(--tech-blue-rgb), 0.04);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glow);
}

/* ═══ admin 后台保持蓝科技风（不被前台火焰重映射覆盖）═══ */
body.admin-body {
    --bg-deep:        #030814;
    --bg-dark:        #0a1228;
    --bg-mid:         #0f1e42;
    --bg-card:        rgba(14, 30, 64, 0.55);
    --bg-card-solid:  #0c1c3e;
    --bg-card-hover:  rgba(30, 60, 120, 0.55);
    --border-glow:    rgba(80, 160, 255, 0.16);
    --border-strong:  rgba(80, 160, 255, 0.32);
    --tech-blue:      #4d9aff;
    --tech-blue-deep: #2563eb;
    --tech-cyan:      #00e0ff;
    --tech-purple:    #8b5cf6;
    /* RGB 分量还原（后台保持蓝科技风） */
    --tech-blue-rgb:     77, 154, 255;
    --tech-cyan-rgb:     0, 224, 255;
    --tech-purple-rgb:   139, 92, 246;
    --blue-primary:   #4d9aff;
    --blue-done:      #3b82f6;
    --blue-bright:    #4d9aff;
    --cyan-accent:    #00e0ff;
    --purple-accent:  #8b5cf6;
    --red-danger:     #ff4757;
    --gold:           #ffd700;
    --text-primary:   #e8f0ff;
    --text-secondary: #7ba8e0;
    --text-muted:     #4a6a96;
    --text-dim:       #2a4a70;
    --shadow-blue:    0 0 24px rgba(var(--tech-blue-rgb), 0.35);
    --shadow-card:    0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(80, 160, 255, 0.04);
    --shadow-premium: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(80, 160, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* admin 背景还原为蓝星空（覆盖前台暖色） */
body.admin-body::before {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 70, 160, 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 100%, rgba(50, 30, 100, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(20, 60, 120, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #030814 0%, #0a1228 40%, #050d20 100%);
}
body.admin-body::after {
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(125,168,224,0.5), transparent),
        radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 50% 20%, rgba(125,168,224,0.4), transparent),
        radial-gradient(1px 1px at 10% 60%, rgba(var(--tech-cyan-rgb),0.3), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(0.5px 0.5px at 15% 50%, rgba(255,255,255,0.4), transparent),
        radial-gradient(0.5px 0.5px at 85% 30%, rgba(125,168,224,0.3), transparent),
        radial-gradient(0.5px 0.5px at 45% 90%, rgba(255,255,255,0.3), transparent),
        radial-gradient(0.5px 0.5px at 65% 15%, rgba(var(--tech-cyan-rgb),0.2), transparent);
}

/* ── 1. 标题火炬: 跳动 + 颜色脉动光晕 ── */
.title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.title-torch {
    display: inline-block;
    font-size: clamp(26px, 7vw, 46px);
    line-height: 1;
    transform-origin: 50% 80%;
    animation: torch-burn 1.6s ease-in-out infinite;
    will-change: transform, filter;
}
@keyframes torch-burn {
    0%   { transform: translateY(0)    scale(1);    filter: drop-shadow(0 0 6px rgba(249,115,22,0.5))  drop-shadow(0 0 14px rgba(245,158,11,0.25)); }
    20%  { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 10px rgba(251,191,36,0.7)) drop-shadow(0 0 22px rgba(245,158,11,0.4)); }
    40%  { transform: translateY(1px)  scale(0.98); filter: drop-shadow(0 0 6px rgba(249,115,22,0.5))  drop-shadow(0 0 14px rgba(245,158,11,0.25)); }
    60%  { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 0 12px rgba(251,191,36,0.8)) drop-shadow(0 0 26px rgba(245,158,11,0.45)); }
    80%  { transform: translateY(0)    scale(1.01); filter: drop-shadow(0 0 8px rgba(249,115,22,0.6))  drop-shadow(0 0 18px rgba(245,158,11,0.3)); }
    100% { transform: translateY(0)    scale(1);    filter: drop-shadow(0 0 6px rgba(249,115,22,0.5))  drop-shadow(0 0 14px rgba(245,158,11,0.25)); }
}

/* ── 2. 完成格子"火炬点燃": 暗→金 + 扩散光晕 + 🔥 图标 ── */
.bingo-cell.completed {
    background:
        radial-gradient(circle at 50% 120%, rgba(245,158,11,0.55), transparent 60%),
        linear-gradient(160deg, #3a2a08 0%, #5a3d0a 45%, #b87410 100%);
    color: #fff8e6;
    border-color: rgba(245,158,11,0.6);
    box-shadow:
        0 0 12px rgba(245,158,11,0.45),
        inset 0 0 14px rgba(245,158,11,0.25),
        inset 0 0 0 1px rgba(251,191,36,0.35);
    flex-direction: column;
    cursor: default;
    pointer-events: none;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}
/* 🔥 完成格：火焰居中、大小适中（替代对勾） */
.bingo-cell.completed .cell-fire {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: clamp(22px, 6vw, 44px); /* 回退：不支持 cqw 的浏览器 */
    font-size: 50cqw;                  /* ≈ 格子半边长 → 面积约占 1/4 */
    line-height: 1;
    pointer-events: none;
    filter:
        drop-shadow(0 0 8px rgba(245, 158, 11, 0.9))
        drop-shadow(0 0 18px rgba(255, 140, 26, 0.5));
    animation: fire-burn 1.6s ease-in-out infinite alternate;
}
@keyframes fire-burn {
    0%   { transform: translate(-50%, -50%) scale(1)    rotate(-2deg); opacity: 0.92; }
    100% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg);  opacity: 1; }
}

/* ❓ 未完成格：问号占位（提高特异性以覆盖 .bingo-cell.active span） */
.bingo-cell.active .cell-q,
.bingo-cell.locked .cell-q {
    font-size: clamp(18px, 5.5vw, 32px);
    font-weight: 800;
    line-height: 1;
    display: block;
    color: rgba(245, 158, 11, 0.5);
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.25);
    opacity: 0.9;
}
.bingo-cell.locked .cell-q {
    color: rgba(154, 160, 181, 0.35);
    text-shadow: none;
}

/* ── 3. 连线点燃序列 / 整条线闪 3 次 (叠加层, 不与格子自身动画冲突) ── */
.fuse-overlay, .flash-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
}
.fuse-overlay {
    animation: fuse-ignite 0.55s ease-out forwards;
}
@keyframes fuse-ignite {
    0%   { box-shadow: inset 0 0 0 0 rgba(245,158,11,0), 0 0 0 0 rgba(245,158,11,0); background: rgba(245,158,11,0); }
    45%  { box-shadow: inset 0 0 22px 4px rgba(251,191,36,0.85), 0 0 28px 6px rgba(245,158,11,0.9); background: rgba(245,158,11,0.18); }
    100% { box-shadow: inset 0 0 14px 2px rgba(245,158,11,0.4), 0 0 16px 3px rgba(245,158,11,0.5); background: rgba(245,158,11,0.06); }
}
.flash-overlay {
    animation: overlay-flash 0.42s ease-in-out 3;
}
@keyframes overlay-flash {
    0%, 100% { box-shadow: inset 0 0 10px 1px rgba(245,158,11,0.4), 0 0 10px 1px rgba(245,158,11,0.4); background: rgba(251,191,36,0); }
    50%      { box-shadow: inset 0 0 26px 5px rgba(255,240,138,0.9), 0 0 34px 9px rgba(251,191,36,0.95); background: rgba(251,191,36,0.22); }
}

/* ── 粒子 (JS 在 .fx-layer 中生成) ── */
.fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 300;
    overflow: hidden;
}
.bingo-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--fire-bright), var(--fire-orange2) 60%, transparent 70%);
    will-change: transform, opacity;
    animation: particle-fly var(--dur, 850ms) cubic-bezier(0.2,0.6,0.3,1) forwards;
}
@keyframes particle-fly {
    0%   { transform: translate(0,0) scale(1);   opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

/* ── 4. BINGO 庆祝弹窗 ── */
.bingo-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 8, 20, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.bingo-popup-overlay.show { opacity: 1; pointer-events: auto; }
.bingo-popup {
    position: relative;
    overflow: hidden;
    width: min(86vw, 360px);
    padding: 34px 26px 26px;
    text-align: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #7a4a06, #b87410 40%, #fbbf24 100%);
    border: 1px solid rgba(255,240,138,0.6);
    box-shadow: 0 0 50px rgba(245,158,11,0.45), 0 20px 60px rgba(0,0,0,0.6);
    color: #2a1500;
    animation: pop-in 0.4s cubic-bezier(0.2,1.2,0.4,1);
}
@keyframes pop-in {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.bingo-popup .bp-title {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 18px rgba(255,240,138,0.9), 0 2px 4px rgba(120,60,0,0.5);
    animation: bp-title-burn 1.2s ease-in-out infinite;
}
@keyframes bp-title-burn {
    0%, 100% { transform: scale(1)    translateY(0);    text-shadow: 0 0 14px rgba(255,240,138,0.7), 0 2px 4px rgba(120,60,0,0.5); }
    50%      { transform: scale(1.06) translateY(-2px); text-shadow: 0 0 26px rgba(255,240,138,1), 0 0 40px rgba(245,158,11,0.8); }
}
.bingo-popup .bp-lines {
    margin: 14px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #3a1e00;
}
.bingo-popup .bp-sub {
    font-size: 12px;
    color: rgba(58,30,0,0.75);
    margin-bottom: 20px;
}
.bingo-popup .bp-keep {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange2));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(249,115,22,0.6);
    transition: transform 0.2s, box-shadow 0.2s;
}
.bingo-popup .bp-keep:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 30px rgba(251,191,36,0.9), 0 0 50px rgba(245,158,11,0.6);
}
/* 弹窗火焰雨 */
.bp-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.bp-ember {
    position: absolute;
    top: -10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--fire-bright), var(--fire-orange2) 60%, transparent);
    animation: ember-fall linear infinite;
}
@keyframes ember-fall {
    0%   { transform: translateY(-10px) scale(1);   opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(440px) scale(0.4); opacity: 0; }
}

/* ── 5. 进度面板火炬: 完成 5/10/15/20/25 时变大变亮 ── */
.progress-torch {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    transform: scale(calc(0.7 + var(--ptorch, 0) * 0.5));
    filter: drop-shadow(0 0 calc(2px + var(--ptorch, 0) * 6px) rgba(245,158,11, calc(0.3 + var(--ptorch, 0) * 0.5)));
    transition: transform 0.5s, filter 0.5s;
}

/* ── 尊重"减少动态效果"偏好 ── */
@media (prefers-reduced-motion: reduce) {
    .title-torch,
    .bingo-cell.completed { transition: none; }
    .fuse-overlay, .flash-overlay, .bingo-particle,
    .bingo-popup, .bingo-popup .bp-title, .bp-ember,
    .torch-anim { animation: none !important; }
    .bingo-cell.completed { box-shadow: 0 0 12px rgba(245,158,11,0.5), inset 0 0 14px rgba(245,158,11,0.25); }
}

/* ════════════════════════════════════════════════════════════
   ICP 备案号
   ════════════════════════════════════════════════════════════ */
.icp-footer {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    text-align: center;
    font-size: 10px;
    line-height: 1;
    padding: 5px 0;
    background: rgba(3, 8, 20, 0.95);
    z-index: 100;
}
.icp-footer a {
    color: var(--text-muted);
    text-decoration: none;
}