/* ==================== 全局样式 ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; font-family: 'Microsoft YaHei', sans-serif; }
.game-map {
    width: 100vw; height: 100vh; position: relative;
    background: url('../images/map.png') center/cover no-repeat;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.game-map::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
    pointer-events: none; z-index: 0;
}
.game-map > * { position: relative; z-index: 1; }

/* ==================== 在线人数 ==================== */
.online-count {
    position: fixed; top: 12px; left: 16px; z-index: 100;
    color: #4ade80; font-size: 13px; display: flex; align-items: center; gap: 5px;
    text-shadow: 0 0 6px rgba(74,222,128,0.5);
    background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 12px;
}
.online-count .dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 6px #4ade80; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ==================== 传送门 ==================== */
.portal-wrapper {
    position: fixed; top: 8%; left: 32%; z-index: 100;
    margin-left: -60px;
    cursor: pointer; transition: transform 0.3s;
    width: 120px; text-align: center;
}
.portal-wrapper:hover { transform: scale(1.1); }
.portal-img {
    width: 110px; height: 110px; object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(139,92,246,0.6));
    animation: portalFloat 3s ease-in-out infinite;
}
@keyframes portalFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.portal-label {
    color: #c4b5fd; font-size: 13px; margin-top: 4px;
    text-shadow: 0 0 6px rgba(139,92,246,0.5);
}
/* 单炉传送门特殊颜色 */
.portal-single-label {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251,191,36,0.6);
    font-weight: bold;
    font-size: 14px;
}

/* ==================== 播报条 ==================== */
.broadcast-bar {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100;
    width: 500px; max-width: 60vw; height: 32px;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,180,0,0.3);
    border-radius: 16px; overflow: hidden;
}
.broadcast-content {
    height: 100%; display: flex; align-items: center;
    white-space: nowrap; overflow: hidden;
}
.broadcast-text {
    color: #ffd700; font-size: 13px; font-weight: bold;
    animation: scrollText 12s linear infinite;
    padding-left: 100%;
}
@keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ==================== 幸运榜 ==================== */
.lucky-board {
    position: fixed; top: 8%; left: 10px; z-index: 90;
    width: 20vw; min-width: 180px; max-width: 280px;
    background: rgba(5,5,25,0.75);
    border: 1px solid rgba(100,150,255,0.2); border-radius: 10px;
    padding: 10px; backdrop-filter: blur(8px);
    max-height: 80vh; overflow-y: auto;
}
.board-title {
    color: #7dd3fc; font-size: 13px; text-align: center;
    margin-bottom: 8px; font-weight: bold;
    text-shadow: 0 0 8px rgba(125,211,252,0.5);
}
.lucky-list { max-height: 200px; overflow-y: auto; }
.lucky-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px; color: #cbd5e1;
}
.lucky-item .name { color: #fbbf24; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.lucky-item .level { color: #a78bfa; font-weight: bold; }
.lucky-item .time { color: #64748b; font-size: 11px; }

/* ==================== 财富排行榜 ==================== */
.wealth-ranking {
    position: fixed; top: 8%; right: 10px; z-index: 90;
    width: 20vw; min-width: 180px; max-width: 280px;
    height: 40vh;
    background: rgba(5,5,25,0.75);
    border: 1px solid rgba(255,200,50,0.2); border-radius: 10px;
    padding: 10px; backdrop-filter: blur(8px);
}
.wealth-list { max-height: 280px; overflow-y: auto; }
.wealth-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px; color: #cbd5e1;
}
.wealth-item:last-child { border-bottom: none; }
.wealth-item .rank { width: 22px; font-weight: bold; text-align: center; }
.wealth-item .rank-1 { color: #fbbf24; }
.wealth-item .rank-2 { color: #d1d5db; }
.wealth-item .rank-3 { color: #cd7f32; }
.wealth-item .wname { color: #e2e8f0; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.wealth-item .wvalue { color: #fbbf24; font-weight: bold; font-size: 11px; }

/* ==================== 炉子区域 ==================== */

/* 炉子整体容器：margin-top 控制上下位置（负值越大越靠上） */
.furnace-area {
    display: flex; flex-direction: column; align-items: center;
    margin-top: -250px; z-index: 10;
}

/* 冶炼状态栏（倒计时+状态文字） */
.smelt-timer {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    margin-bottom: 15px; background: rgba(0,0,0,0.5);
    padding: 6px 20px; border-radius: 20px;
    border: 1px solid rgba(255,200,0,0.3);
}
#phase-text { color: #fbbf24; font-size: 14px; font-weight: bold; }
#countdown-text { color: #f87171; font-size: 18px; font-weight: bold; min-width: 30px; text-align: center; }

/* 两个炉子所在的行：gap 控制两个炉子之间的间距 */
.furnace-row { display: flex; gap: 20px; align-items: center; }

/* 单个炉子容器：width/height 控制炉子的可点击区域大小 */
.furnace-wrapper {
    position: relative; cursor: pointer; transition: transform 0.3s;
    width: 380px; height: 400px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.furnace-wrapper:hover { transform: scale(1.05); }

/* 炉子上方的文字标签 */
.furnace-label {
    font-size: 18px; font-weight: bold; margin-bottom: 5px;
    text-shadow: 0 0 10px currentColor;
}
.yang-label { color: #f59e0b; }
.yin-label { color: #60a5fa; }

/* 炉子图片：width/height 控制图片显示大小 */
.furnace-img { width: 320px; height: 320px; object-fit: contain; filter: drop-shadow(0 0 25px rgba(255,150,0,0.4)); }
.yin-furnace-img { filter: drop-shadow(0 0 20px rgba(96,165,250,0.4)); }

/* 炉子底部光晕：width/height 控制光晕大小，bottom 控制位置 */
.furnace-glow {
    position: absolute; bottom: 10px; width: 200px; height: 60px;
    border-radius: 50%; filter: blur(30px); opacity: 0.6;
}
.yang-glow { background: radial-gradient(ellipse, #f59e0b, transparent); }
.yin-glow { background: radial-gradient(ellipse, #60a5fa, transparent); }

/* 转化期摇晃动画（仅在converting状态时触发） */
.furnace-wrapper.converting { animation: furnaceShake 0.3s infinite; }
@keyframes furnaceShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-3px) rotate(-1deg); }
    75% { transform: translateX(3px) rotate(1deg); }
}

/* ==================== 光束特效 ==================== */
.beam-container {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 100%; pointer-events: none; z-index: 20;
    overflow: visible;
}
.beam {
    position: absolute; bottom: 40%; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 0;
    background: linear-gradient(to top,
        rgba(255,215,0,0.9) 0%,
        rgba(255,255,200,0.7) 20%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,215,0,0.2) 80%,
        transparent 100%);
    border-radius: 25px 25px 0 0;
    animation: beamShoot 2.5s ease-out forwards;
    filter: blur(2px);
}
.beam.yang-beam {
    background: linear-gradient(to top,
        rgba(245,158,11,0.9) 0%,
        rgba(255,200,50,0.7) 20%,
        rgba(255,255,200,0.5) 50%,
        rgba(245,158,11,0.2) 80%,
        transparent 100%);
}
.beam.yin-beam {
    background: linear-gradient(to top,
        rgba(96,165,250,0.9) 0%,
        rgba(147,197,253,0.7) 20%,
        rgba(255,255,255,0.5) 50%,
        rgba(96,165,250,0.2) 80%,
        transparent 100%);
}
.beam.fail-beam {
    background: linear-gradient(to top,
        rgba(239,68,68,0.9) 0%,
        rgba(248,113,113,0.7) 20%,
        rgba(255,200,200,0.5) 50%,
        rgba(239,68,68,0.2) 80%,
        transparent 100%);
}
@keyframes beamShoot {
    0% { height: 0; opacity: 1; width: 50px; }
    15% { height: 350px; opacity: 1; width: 40px; }
    40% { height: 500px; opacity: 0.9; width: 35px; }
    70% { height: 600px; opacity: 0.5; width: 25px; }
    100% { height: 700px; opacity: 0; width: 10px; }
}
/* 光束粒子 */
.light-particle {
    position: absolute; bottom: 40%; left: 50%;
    border-radius: 50%; pointer-events: none;
    animation: particleFloat 2s ease-out forwards;
}
@keyframes particleFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}
/* 成功光环 */
.success-ring {
    position: absolute; bottom: 35%; left: 50%;
    transform: translate(-50%, 50%);
    width: 200px; height: 200px; border-radius: 50%;
    border: 3px solid rgba(74,222,128,0.8);
    animation: ringExpand 1.5s ease-out forwards;
    pointer-events: none;
}
@keyframes ringExpand {
    0% { transform: translate(-50%, 50%) scale(0.3); opacity: 1; border-width: 4px; }
    100% { transform: translate(-50%, 50%) scale(2); opacity: 0; border-width: 1px; }
}
/* 失败裂纹 */
.fail-flash {
    position: absolute; inset: 0; border-radius: 10px;
    background: rgba(239,68,68,0.3);
    animation: failFlashAnim 0.8s ease-out forwards;
    pointer-events: none;
}
@keyframes failFlashAnim {
    0% { opacity: 1; }
    30% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* ==================== 商店图标（底部中央偏左，聊天框右侧） ==================== */
.shop-icon-wrapper {
    position: fixed; bottom: 20px; left: 27%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.shop-icon-wrapper:hover { transform: scale(1.1); }
.shop-icon-img {
    width: 70px; height: 70px; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(251,191,36,0.5));
}
.shop-icon-label {
    color: #fbbf24; font-size: 12px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(251,191,36,0.5);
    font-weight: bold;
}

/* 右上角气泡提示 */
.shop-bubble {
    position: absolute; top: -10px; right: -60px;
    background: rgba(20,10,40,0.92); color: #ffe066;
    font-size: 12px; padding: 6px 12px; border-radius: 12px;
    border: 1.5px solid rgba(255,204,102,0.5);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 200;
}
.shop-bubble::before {
    content: ''; position: absolute; left: -8px; top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: rgba(20,10,40,0.92);
}
.shop-icon-wrapper:hover .shop-bubble {
    opacity: 1; transform: scale(1);
}
.typing-cursor {
    display: inline-block; margin-left: 1px;
    animation: blink-cursor 0.6s step-end infinite;
    color: #ffe066; font-weight: bold;
}
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 灵石商店弹窗下方小字提示 */
.shop-footer-tip {
    text-align: center; color: rgba(255,224,102,0.7); font-size: 11px;
    padding: 6px 0 2px; letter-spacing: 0.5px;
}

/* ==================== 背包按钮（商店右侧，底部并排） ==================== */
.bag-btn-wrapper {
    position: fixed; bottom: 20px; left: 56%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.bag-btn-wrapper:hover { transform: scale(1.1); }
.bag-btn-img {
    width: 50px; height: 50px; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.5));
    border-radius: 8px;
}
.bag-btn-label {
    color: #c4b5fd; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(139,92,246,0.5);
}

/* ==================== 更新公告按钮（背包右侧，底部并排） ==================== */
.announce-btn-wrapper {
    position: fixed; bottom: 20px; left: 36%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.announce-btn-wrapper:hover { transform: scale(1.15); }
.announce-icon {
    width: 50px; height: 50px;
    background: rgba(30,20,10,0.7); border: 2px solid rgba(160,82,45,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(160,82,45,0.4);
}
.announce-label {
    color: #d4a06a; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(160,82,45,0.5);
    font-weight: bold;
}

/* ==================== 进群按钮（公告右侧，底部并排） ==================== */
.group-btn-wrapper {
    position: fixed; bottom: 20px; left: 40%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.group-btn-wrapper:hover { transform: scale(1.15); }
.group-icon {
    width: 50px; height: 50px;
    background: rgba(10,30,50,0.7); border: 2px solid rgba(59,130,246,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(59,130,246,0.4);
}
.group-label {
    color: #93c5fd; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(59,130,246,0.5);
    font-weight: bold;
}

/* ==================== 进群扫码弹窗 ==================== */
.group-modal { width: 90%; max-width: 400px; }
.group-header {
    background: linear-gradient(to bottom, #1e3a5f, #0f2340) !important;
    color: #93c5fd !important;
    font-size: 20px !important;
    letter-spacing: 2px;
}
.group-content {
    text-align: center; padding: 20px;
}
.group-qr-wrap {
    display: inline-block; padding: 10px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.group-qr-img {
    width: 260px; height: 260px; object-fit: contain;
    border-radius: 6px;
}
.group-tip {
    margin-top: 16px; font-size: 15px; color: #4a3520; font-weight: bold;
}
.group-tip-sub {
    margin-top: 6px; font-size: 12px; color: #8b6914;
}

/* ==================== 广告位按钮（进群右侧，底部并排） ==================== */
.ad-btn-wrapper {
    position: fixed; bottom: 20px; left: 44%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.ad-btn-wrapper:hover { transform: scale(1.15); }
.ad-icon {
    width: 50px; height: 50px;
    background: rgba(40,10,10,0.7); border: 2px solid rgba(239,68,68,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(239,68,68,0.4);
}
.ad-label {
    color: #fca5a5; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(239,68,68,0.5);
    font-weight: bold;
}

/* ==================== 广告位弹窗 ==================== */
.ad-modal { width: 90%; max-width: 400px; }
.ad-header {
    background: linear-gradient(to bottom, #5a1a1a, #3a0f0f) !important;
    color: #fca5a5 !important;
    font-size: 20px !important;
    letter-spacing: 2px;
}
.ad-content {
    text-align: center; padding: 25px 20px;
}
.ad-platform-list {
    display: flex; justify-content: center; gap: 16px;
    margin-bottom: 16px;
}
.ad-platform {
    padding: 10px 20px;
    background: rgba(239,68,68,0.1); border: 2px solid rgba(239,68,68,0.3);
    border-radius: 8px; font-size: 18px; font-weight: bold;
    color: #b91c1c; letter-spacing: 1px;
}
.ad-divider {
    border-top: 1px dashed rgba(139,69,19,0.3);
    margin: 12px 0;
}
.ad-desc {
    font-size: 16px; color: #4a3520; font-weight: bold;
    letter-spacing: 1px;
}
.ad-rule-title {
    font-size: 16px; color: #b45309; font-weight: bold;
    margin-bottom: 6px;
}
.ad-rule {
    font-size: 13px; color: #6b4423; line-height: 1.6;
}

/* ==================== CDK兑换按钮（广告位右侧，底部并排） ==================== */
.cdk-btn-wrapper {
    position: fixed; bottom: 20px; left: 48%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.cdk-btn-wrapper:hover { transform: scale(1.15); }
.cdk-icon {
    width: 50px; height: 50px;
    background: rgba(10,40,20,0.7); border: 2px solid rgba(34,197,94,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(34,197,94,0.4);
}
.cdk-label {
    color: #86efac; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(34,197,94,0.5);
    font-weight: bold;
}

/* ==================== CDK兑换弹窗 ==================== */
.cdk-modal { width: 90%; max-width: 380px; }
.cdk-header {
    background: linear-gradient(to bottom, #14532d, #052e16) !important;
    color: #86efac !important;
    font-size: 20px !important;
    letter-spacing: 2px;
}
.cdk-content {
    text-align: center; padding: 25px 20px;
}
.cdk-desc {
    font-size: 14px; color: #4a3520; margin-bottom: 16px;
}
.cdk-input-wrap {
    margin-bottom: 12px;
}
.cdk-input-wrap input {
    width: 100%; padding: 10px 14px; font-size: 16px;
    border: 2px solid rgba(34,197,94,0.4); border-radius: 8px;
    background: rgba(255,255,255,0.9); color: #1a1a1a;
    text-align: center; letter-spacing: 2px;
    outline: none; transition: border-color 0.3s;
}
.cdk-input-wrap input:focus {
    border-color: rgba(34,197,94,0.8);
    box-shadow: 0 0 8px rgba(34,197,94,0.3);
}
.cdk-error {
    color: #dc2626; font-size: 13px; min-height: 18px; margin-bottom: 6px;
}
.cdk-success {
    color: #16a34a; font-size: 14px; font-weight: bold; min-height: 18px; margin-bottom: 6px;
}
.btn-parchment-cancel {
    padding: 8px 24px; font-size: 14px; cursor: pointer;
    background: rgba(100,100,100,0.3); border: 1px solid rgba(100,100,100,0.5);
    border-radius: 8px; color: #666; margin-left: 10px;
    transition: all 0.3s;
}
.btn-parchment-cancel:hover { background: rgba(100,100,100,0.5); }

/* ==================== 邀请好友按钮（CDK右侧，底部并排） ==================== */
.invite-btn-wrapper {
    position: fixed; bottom: 20px; left: 52%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.invite-btn-wrapper:hover { transform: scale(1.15); }
.invite-icon {
    width: 50px; height: 50px;
    background: rgba(40,10,40,0.7); border: 2px solid rgba(168,85,247,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(168,85,247,0.4);
}
.invite-label {
    color: #c4b5fd; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(168,85,247,0.5);
    font-weight: bold;
}

/* ==================== 邀请好友弹窗 ==================== */
.invite-modal { width: 90%; max-width: 420px; }
.invite-header {
    background: linear-gradient(to bottom, #3b0764, #1e0538) !important;
    color: #c4b5fd !important;
    font-size: 20px !important;
    letter-spacing: 2px;
}
.invite-content {
    text-align: center; padding: 20px;
}
.invite-rule {
    font-size: 14px; color: #4a3520; line-height: 1.8;
    margin-bottom: 14px;
}
.invite-highlight {
    color: #b45309; font-weight: bold;
}
.invite-img-wrap {
    margin-bottom: 14px;
}
.invite-img {
    width: 100%; max-width: 360px; border-radius: 8px;
    border: 2px solid rgba(168,85,247,0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.invite-url-section {
    margin-bottom: 10px;
}
.invite-url-label {
    font-size: 13px; color: #6b4423; font-weight: bold;
    margin-bottom: 6px;
}
.invite-url-row {
    display: flex; gap: 8px; align-items: center;
    justify-content: center;
}
.invite-url-input {
    flex: 1; max-width: 260px; padding: 8px 10px; font-size: 12px;
    border: 2px solid rgba(168,85,247,0.4); border-radius: 6px;
    background: rgba(255,255,255,0.9); color: #333;
    outline: none;
}
.invite-copy-btn {
    padding: 8px 16px; font-size: 13px; cursor: pointer;
    background: linear-gradient(to bottom, #7c3aed, #5b21b6);
    border: none; border-radius: 6px; color: #fff;
    font-weight: bold; transition: all 0.3s;
}
.invite-copy-btn:hover { background: linear-gradient(to bottom, #8b5cf6, #6d28d9); transform: scale(1.05); }
.invite-copy-tip {
    font-size: 12px; color: #16a34a; min-height: 16px; margin-top: 4px;
}

/* ==================== 关注主播按钮（邀请返券右侧，底部并排） ==================== */
.douyin-btn-wrapper {
    position: fixed; bottom: 20px; left: 32%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.douyin-btn-wrapper:hover { transform: scale(1.15); }
.douyin-icon {
    width: 50px; height: 50px;
    background: rgba(30,10,20,0.7); border: 2px solid rgba(254,44,85,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(254,44,85,0.4);
}
.douyin-label {
    color: #fda4af; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(254,44,85,0.5);
    font-weight: bold;
}

/* ==================== 关注主播弹窗 ==================== */
.douyin-modal { width: 90%; max-width: 420px; }
.douyin-header {
    background: linear-gradient(to bottom, #4a0e1a, #1e0510) !important;
    color: #fda4af !important;
    font-size: 20px !important;
    letter-spacing: 2px;
}
.douyin-content {
    text-align: center; padding: 20px;
}
.douyin-desc {
    font-size: 14px; color: #4a3520; margin-bottom: 14px;
}
.douyin-img-wrap {
    margin-bottom: 14px;
}
.douyin-img {
    width: 100%; max-width: 360px; border-radius: 8px;
    border: 2px solid rgba(254,44,85,0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ==================== 灵石商店弹窗 ==================== */
.market-window.shop-market-window { max-width: 700px; width: 90%; height: auto; max-height: 80vh; }
#shop-modal, #bag-modal { z-index: 600; }
#qty-modal { z-index: 700; }
.shop-stone-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.stone-card {
    padding: 12px; background: rgba(255,255,255,0.4);
    border: 1.5px solid #8b6d45; border-radius: 6px;
    text-align: center; cursor: pointer; transition: all 0.3s;
    display: flex; flex-direction: column; align-items: center;
}
.stone-card:hover { border-color: #ffcc66; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139,109,69,0.3); }
.stone-card.locked { opacity: 0.6; cursor: not-allowed; position: relative; }
.stone-card img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.stone-card .stone-name { color: #3d2a1a; font-size: 13px; margin: 6px 0 2px; font-weight: bold; }
.stone-card .stone-price { color: #c00; font-size: 12px; margin: 2px 0 6px; }
.stone-card .stone-price img { width: 12px; height: 12px; vertical-align: middle; }
.stone-card .stone-actions { display: flex; gap: 4px; justify-content: center; }
.stone-card .stone-actions button {
    font-size: 11px; padding: 4px 10px; border: 1px solid #5a4033; border-radius: 4px;
    cursor: pointer; transition: all 0.2s; font-weight: bold;
}
.btn-buy { background: #8d4513; color: #fff; }
.btn-buy:hover { background: #ff6600; box-shadow: 0 0 8px rgba(255,102,0,0.4); }
.btn-decompose { background: #1565c0; color: #fff; }
.btn-decompose:hover { background: #1976d2; }
.stone-lock-tip {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); color: #ffcc66; font-size: 10px;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    z-index: 10;
}

/* ==================== 冶炼记录（左侧悬浮） ==================== */
.smelt-history {
    position: fixed; top: calc(8% + 40vh + 10px); right: 10px; z-index: 90;
    width: 20vw; min-width: 180px; max-width: 280px;
    height: 40vh;
    background: rgba(5,5,25,0.75);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    backdrop-filter: blur(8px);
    display: flex; flex-direction: column;
    padding: 10px 10px;
}
.history-title {
    color: #94a3b8; font-size: 13px; text-align: center;
    margin-bottom: 8px; font-weight: bold; flex-shrink: 0;
    letter-spacing: 2px;
}
.history-list {
    flex: 1; overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.history-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 5px 6px; font-size: 12px; color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    line-height: 1.4;
}
.history-item .h-name { color: #fbbf24; font-weight: bold; flex-shrink: 0; }
.history-item .h-furnace { font-weight: bold; }
.history-item .h-furnace.yang { color: #f59e0b; }
.history-item .h-furnace.yin { color: #60a5fa; }
.history-item .h-furnace.sf { color: #fbbf24; text-shadow: 0 0 4px rgba(251,191,36,0.4); }
.history-item .h-result { font-weight: bold; }
.history-item .h-result.success { color: #4ade80; }
.history-item .h-result.fail { color: #f87171; }
.history-item .h-result.protect { color: #fbbf24; }
.history-item .h-time { color: #475569; font-size: 10px; width: 100%; }

/* ==================== 熔炉记录（右侧悬浮，冶炼记录下方） ==================== */
.furnace-result {
    position: fixed; top: calc(8% + 40vh + 10px); right: 10px; z-index: 90;
    width: 20vw; min-width: 180px; max-width: 280px;
    height: 40vh;
    background: rgba(5,5,25,0.75);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    backdrop-filter: blur(8px);
    display: flex; flex-direction: column;
    padding: 10px 10px;
}
.furnace-result-title {
    color: #7dd3fc; font-size: 13px; text-align: center;
    margin-bottom: 8px; font-weight: bold; flex-shrink: 0;
    letter-spacing: 2px;
}
.furnace-result-list {
    flex: 1; overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.fr-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fr-time { color: #64748b; font-size: 12px; min-width: 45px; }
.fr-furnace { font-weight: bold; font-size: 14px; }
.fr-furnace.yang { color: #f59e0b; text-shadow: 0 0 6px rgba(245,158,11,0.4); }
.fr-furnace.yin { color: #60a5fa; text-shadow: 0 0 6px rgba(96,165,250,0.4); }

/* ==================== 玩家栏 ==================== */
.player-bar, .login-hint {
    position: fixed; top: 12px; right: 230px; z-index: 100;
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.5); padding: 6px 14px; border-radius: 20px;
}
.player-name { color: #fbbf24; font-size: 14px; font-weight: bold; }
.player-vouchers { display: flex; align-items: center; gap: 4px; color: #fbbf24; font-size: 13px; }
.voucher-icon { width: 18px; height: 18px; border-radius: 50%; }
.btn-logout, .btn-login, .btn-register {
    padding: 4px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
    background: rgba(255,255,255,0.1); color: #e2e8f0; cursor: pointer; font-size: 12px;
    transition: all 0.2s;
}
.btn-logout:hover, .btn-login:hover, .btn-register:hover { background: rgba(255,255,255,0.2); }
.btn-register { border-color: #f59e0b; color: #f59e0b; }

/* ==================== 弹窗通用 ==================== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.modal-box {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border: 1px solid rgba(139,92,246,0.3); border-radius: 16px;
    padding: 24px; min-width: 320px; max-width: 600px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; color: #c4b5fd; font-size: 18px; font-weight: bold;
}
.modal-close {
    background: none; border: none; color: #94a3b8; font-size: 22px;
    cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: #fff; }

/* ==================== 登录/注册弹窗 ==================== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; color: #a5b4fc; font-size: 13px; margin-bottom: 4px; }
.form-group input {
    width: 100%; padding: 8px 12px; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(139,92,246,0.3); border-radius: 8px;
    color: #e2e8f0; font-size: 14px; outline: none;
}
.form-group input:focus { border-color: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.3); }
.form-error { color: #f87171; font-size: 12px; margin: 8px 0; min-height: 16px; }
.btn-submit {
    width: 100%; padding: 10px; background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; border: none; border-radius: 8px; font-size: 15px;
    cursor: pointer; font-weight: bold; transition: all 0.3s;
}
.btn-submit:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); transform: translateY(-1px); }

/* ==================== 冶炼选择弹窗 ==================== */
.market-window.smelt-market-window { max-width: 550px; width: 90%; height: auto; max-height: 80vh; }
#smelt-modal { z-index: 600; }
.smelt-stone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.smelt-stone-item {
    padding: 12px; background: rgba(255,255,255,0.4);
    border: 1.5px solid #8b6d45; border-radius: 6px;
    text-align: center; cursor: pointer; transition: all 0.3s;
    display: flex; flex-direction: column; align-items: center;
}
.smelt-stone-item:hover { border-color: #ffcc66; transform: scale(1.05); box-shadow: 0 4px 12px rgba(139,109,69,0.3); }
.smelt-stone-item.disabled { opacity: 0.4; cursor: not-allowed; }
.smelt-stone-item img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.smelt-stone-item .s-level { color: #3d2a1a; font-size: 13px; font-weight: bold; margin-top: 4px; }
.smelt-stone-item .s-count { color: #5a4033; font-size: 12px; margin-top: 2px; }

/* ==================== 冶炼结果弹窗 ==================== */
.result-modal-box {
    text-align: center;
    background: linear-gradient(135deg, #1a1530, #2d1f5e);
    border: 2px solid rgba(251,191,36,0.4);
}
.result-header {
    color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1);
    padding: 10px; margin: -24px -24px 16px; border-radius: 14px 14px 0 0;
    font-size: 18px; font-weight: bold;
}
.result-body { padding: 20px 0; }
.result-icon { font-size: 48px; margin-bottom: 12px; }
.result-text { color: #e2e8f0; font-size: 15px; line-height: 1.6; }
.result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.btn-result {
    padding: 8px 20px; border: none; border-radius: 8px;
    font-size: 14px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
.btn-continue { background: #f59e0b; color: #000; }
.btn-continue:hover { background: #d97706; }
.btn-collect { background: rgba(255,255,255,0.1); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.2); }
.btn-collect:hover { background: rgba(255,255,255,0.2); }

/* ==================== 灵石背包弹窗 ==================== */
.market-window.bag-market-window { max-width: 600px; width: 90%; height: auto; max-height: 80vh; }
.bag-stone-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.bag-stone-item {
    padding: 12px; background: rgba(255,255,255,0.4);
    border: 1.5px solid #8b6d45; border-radius: 6px;
    text-align: center; position: relative;
    display: flex; flex-direction: column; align-items: center;
}
.bag-stone-item img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.bag-stone-item .b-level { color: #3d2a1a; font-size: 14px; font-weight: bold; margin-top: 4px; }
.bag-stone-item .b-count { color: #5a4033; font-size: 12px; margin-top: 4px; }
.bag-stone-item .btn-decompose {
    margin-top: 6px; font-size: 11px; padding: 4px 10px; border: 1px solid #5a4033;
    border-radius: 4px; background: #1565c0; color: #fff; cursor: pointer;
}
.bag-stone-item .btn-decompose:hover { background: #1976d2; }
.bag-stone-item .btn-merge {
    margin-top: 6px; font-size: 11px; padding: 4px 10px; border: 1px solid #5a4033;
    border-radius: 4px; background: #8d4513; color: #fff; cursor: pointer;
}
.bag-stone-item .btn-merge:hover { background: #ff6600; box-shadow: 0 0 8px rgba(255,102,0,0.4); }

/* ==================== 滚动条 ==================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ==================== 聊天面板（左下角） ==================== */

/* 聊天面板容器：left/bottom 控制位置，width/height 控制大小 */
.chat-panel {
    position: fixed; left: 0; bottom: 0; z-index: 90;
    width: 25%; height: 40%;
    background: rgba(5,5,25,0.75);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 0 10px 0 0;
    backdrop-filter: blur(8px);
    display: flex; flex-direction: column;
}

/* 聊天Tab栏 */
.chat-tabs-bar {
    display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
    overflow-x: auto; scrollbar-width: none;
}
.chat-tabs-bar::-webkit-scrollbar { display: none; }
.chat-tab {
    padding: 4px 10px; font-size: 11px; color: #888; cursor: pointer;
    border-bottom: 2px solid transparent; transition: 0.2s; font-weight: bold;
    white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.chat-tab:hover { color: #ccc; }
.chat-tab.active { color: #ffcc66; border-bottom-color: #ffcc66; }
.chat-tab-close {
    font-size: 10px; color: #888; cursor: pointer; line-height: 1;
    border-radius: 50%; width: 14px; height: 14px; text-align: center;
}
.chat-tab-close:hover { color: #f66; background: rgba(255,100,100,0.2); }
.chat-tab .chat-unread-dot {
    width: 6px; height: 6px; background: #f00; border-radius: 50%; display: none;
}

/* 消息列表区：支持竖向滚动 */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 8px 10px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}

/* 单条消息：最大宽度、自动换行 */
.chat-msg {
    padding: 4px 0; font-size: 13px; color: #94a3b8;
    word-break: break-all; line-height: 1.4;
    max-width: 100%;
}

/* 普通玩家昵称 */
.chat-msg .chat-name { color: #60a5fa; font-weight: bold; }

/* 自己发的消息昵称（高亮） */
.chat-msg.mine .chat-name { color: #fbbf24; }

/* 开发者消息特效：橙色昵称 + 金色边框 + 背景发光 */
.chat-msg.dev {
    background: linear-gradient(90deg, rgba(251,146,60,0.12), transparent);
    border-left: 3px solid #f97316;
    padding: 5px 8px; margin: 3px 0;
    border-radius: 0 6px 6px 0;
}
.chat-msg.dev .chat-name {
    color: #f97316; font-weight: bold;
    text-shadow: 0 0 6px rgba(249,115,22,0.5);
}
.chat-msg.dev .chat-role-tag {
    display: inline-block; font-size: 10px; color: #fff;
    background: linear-gradient(135deg, #f97316, #ea580c);
    padding: 1px 5px; border-radius: 3px; margin-right: 4px;
    font-weight: bold; letter-spacing: 1px;
}

/* 系统消息样式：冶炼升级通知 */
.chat-msg.system {
    background: linear-gradient(90deg, rgba(96,165,250,0.10), transparent);
    border-left: 3px solid #3b82f6;
    padding: 5px 8px; margin: 3px 0;
    border-radius: 0 6px 6px 0;
    color: #cbd5e1;
}
.chat-msg.system .chat-name {
    color: #60a5fa; font-weight: bold;
}
.chat-msg.system .chat-role-tag {
    display: inline-block; font-size: 10px; color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    padding: 1px 5px; border-radius: 3px; margin-right: 4px;
    font-weight: bold; letter-spacing: 1px;
}
.chat-msg.system .chat-furnace {
    color: #fbbf24; font-weight: bold;
}
.chat-msg.system .chat-jump {
    color: #f97316; font-weight: bold;
    font-size: 12px;
    animation: jumpPulse 0.6s ease-in-out 2;
}
@keyframes jumpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* 底部输入框区域 */
.chat-input-wrap {
    display: flex; gap: 6px; padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* 输入框 */
.chat-input {
    flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px; padding: 6px 10px; color: #e2e8f0; font-size: 13px;
    outline: none;
}
.chat-input:focus { border-color: rgba(96,165,250,0.5); }

/* 发送按钮 */
.chat-send-btn {
    background: #3b82f6; color: #fff; border: none; border-radius: 6px;
    padding: 6px 14px; font-size: 13px; cursor: pointer; font-weight: bold;
}
.chat-send-btn:hover { background: #2563eb; }

/* 聊天提示文字 */
.chat-hint {
    text-align: center; color: #475569; font-size: 11px;
    padding: 6px; flex-shrink: 0;
}

/* ==================== Toast通知（顶部渐入渐出） ==================== */
.toast-container {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    background: rgba(15,23,42,0.85); color: #e2e8f0;
    padding: 8px 20px; border-radius: 6px;
    font-size: 13px; white-space: nowrap; text-align: center;
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1);
    animation: toastIn 0.3s ease-out, toastOut 0.4s ease-in 2s forwards;
    pointer-events: auto;
}
.toast.success { border-color: rgba(74,222,128,0.4); color: #4ade80; }
.toast.error { border-color: rgba(248,113,113,0.4); color: #f87171; }
.toast.warning { border-color: rgba(251,191,36,0.4); color: #fbbf24; }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-30px); }
}

/* ==================== 羊皮纸弹窗 ==================== */
.parchment-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}
.parchment-modal { width: 90%; max-width: 420px; }

/* 标题栏 */
.parchment-header {
    background: linear-gradient(to bottom, #162a40, #0a1a2a);
    color: white; font-size: 22px; padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    display: flex; justify-content: center; align-items: center;
}
.parchment-header.fail-header {
    background: linear-gradient(to bottom, #3a1515, #1a0a0a);
    color: #f87171;
}

/* 内容区 - 羊皮纸纹理 */
.parchment-content {
    background-color: #e6d4a9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.2'/%3E%3C/svg%3E");
    border: 4px solid #a0522d; border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 25px 20px; position: relative;
    box-shadow: inset 0 0 30px rgba(139,69,19,0.3);
}
.parchment-content.fail-content {
    background-color: #2a1a1a;
    background-image: none;
    border-color: #5a2020;
    color: #ccc;
}

/* 失败内容区深色风格 */
.parchment-body { text-align: center; }
.parchment-body .result-line {
    font-size: 18px; color: #333; line-height: 1.8; margin: 8px 0;
}
.parchment-body .result-line.fail-line { color: #f87171; }

/* 灵石图片 */
.parchment-body .stone-row {
    display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 0;
}
.parchment-body .stone-row img {
    width: 60px; height: 60px; object-fit: contain;
}
.parchment-body .stone-row .arrow { font-size: 24px; color: #a0522d; }

/* 灵石等级文字颜色：3-8级白色，9级以上渐变色 */
.stone-text { font-weight: bold; }
.stone-text.low { color: #333; }
.stone-text.high { background: linear-gradient(90deg, #c084fc, #f472b6, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: stoneGlow 2s ease-in-out infinite; }
@keyframes stoneGlow {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* 保级信息 */
.protect-info {
    margin-top: 10px; padding: 8px 12px;
    background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3);
    border-radius: 6px; font-size: 14px; color: #92400e;
}

/* ==================== 保级弹窗专属样式 ==================== */

/* 标题栏：琥珀色渐变，区别于成功的蓝色和失败的暗红 */
.parchment-header.protect-header {
    background: linear-gradient(to bottom, #78510e, #4a3008);
    color: #fbbf24;
}

/* 内容区：暗金色羊皮纸风格 */
.parchment-content.protect-content {
    background-color: #d4b876;
    border-color: #8b6914;
}

/* 保级加号（+） */
.protect-plus {
    color: #16a34a !important;
    font-size: 28px !important;
    font-weight: bold;
}

/* 保级文字 */
.protect-line {
    color: #78350f !important;
    font-weight: bold;
    font-size: 16px !important;
}

/* 保级补偿详情 */
.protect-detail {
    margin-top: 8px; font-size: 15px; color: #92400e;
    padding: 6px 10px;
    background: rgba(251,191,36,0.15);
    border: 1px dashed rgba(180,83,9,0.4);
    border-radius: 6px;
}

/* 跳级信息 */
.jump-info {
    margin-top: 6px; font-size: 16px; color: #b45309; font-weight: bold;
}

/* ==================== 羊皮纸弹窗底部确认按钮 ==================== */
.parchment-footer {
    text-align: center; margin-top: 18px;
}
.btn-parchment-confirm {
    background: linear-gradient(135deg, #8b5e3c, #a0522d);
    color: #fff; border: 2px solid #6b3a1f;
    padding: 8px 36px; border-radius: 6px;
    font-size: 15px; font-weight: bold; cursor: pointer;
    transition: all 0.2s; letter-spacing: 2px;
}
.btn-parchment-confirm:hover {
    background: linear-gradient(135deg, #a0522d, #c2784a);
    transform: translateY(-1px); box-shadow: 0 3px 10px rgba(139,69,19,0.4);
}

/* ==================== 游戏内数量选择弹窗 ==================== */
.market-window.qty-market-window {
    max-width: 380px; width: 90%; height: auto; max-height: none;
}
.qty-hint {
    color: #5a4033; font-size: 13px; text-align: center; margin-bottom: 14px;
}
.qty-row {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    margin: 10px 0;
}
.qty-btn {
    background: #8d4513; color: #fff;
    border: 1px solid #5a4033; border-radius: 4px;
    padding: 7px 16px; font-size: 14px; font-weight: bold;
    cursor: pointer; transition: all 0.2s; min-width: 48px;
}
.qty-btn:hover { background: #ff6600; box-shadow: 0 0 8px rgba(255,102,0,0.4); }
.qty-max-btn { background: #2e7d32; }
.qty-max-btn:hover { background: #43a047; box-shadow: 0 0 8px rgba(67,160,71,0.4); }
.qty-input {
    width: 90px; text-align: center; padding: 8px 10px;
    background: rgba(10,31,51,0.1); border: 1px solid #8b6d45;
    border-radius: 4px; color: #c00; font-size: 20px;
    font-weight: bold; outline: none;
    -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { border-color: #ffcc66; box-shadow: 0 0 8px rgba(255,204,102,0.4); }
.qty-preview {
    text-align: center; color: #3d2a1a; font-size: 13px;
    margin: 10px 0 6px; min-height: 18px; font-weight: bold;
}
.qty-actions {
    text-align: center; margin-top: 14px;
}
.qty-confirm-btn { padding: 10px 40px; font-size: 15px; }

/* ==================== 商店13-18级灵石展示（不可购买） ==================== */
.stone-card.locked {
    opacity: 0.55; cursor: default; border-color: rgba(139,109,69,0.3);
}
.stone-card.locked:hover {
    transform: none; border-color: rgba(139,109,69,0.5);
    box-shadow: none;
}
.stone-card.locked .stone-lock-tip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.88); color: #ffcc66; font-size: 12px;
    padding: 6px 12px; border-radius: 6px; white-space: nowrap;
    border: 1px solid rgba(255,204,102,0.3);
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
    z-index: 10; margin-bottom: 6px;
}
.stone-card.locked:hover .stone-lock-tip { opacity: 1; }
.stone-card.locked .stone-name { color: #8b6d45; }
.stone-card.locked .stone-price { color: #a08060; }

/* ==================== 更新公告弹窗（羊皮纸风格） ==================== */

/* 公告弹窗尺寸更大，支持滚动 */
.announce-modal { width: 90%; max-width: 560px; }

/* 标题栏：深棕色渐变 */
.announce-header {
    background: linear-gradient(to bottom, #5c3d1a, #3a2410) !important;
    color: #fbbf24 !important;
    font-size: 20px !important;
    letter-spacing: 2px;
}

/* 内容区：羊皮纸风格，支持滚动 */
.announce-content {
    max-height: 65vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(139,69,19,0.3) transparent;
}
.announce-content::-webkit-scrollbar { width: 6px; }
.announce-content::-webkit-scrollbar-thumb { background: rgba(139,69,19,0.3); border-radius: 3px; }

/* 公告正文：左对齐，段落式 */
.announce-body {
    text-align: left; color: #3a2410;
    font-size: 14px; line-height: 1.8;
}

/* 公告日期标题 */
.announce-body .a-date {
    font-size: 16px; font-weight: bold; color: #78350f;
    border-bottom: 2px solid rgba(139,69,19,0.3);
    padding-bottom: 6px; margin-bottom: 12px;
    letter-spacing: 1px;
}

/* 公告分类标题 */
.announce-body .a-section {
    font-size: 15px; font-weight: bold; color: #92400e;
    margin: 14px 0 6px; display: flex; align-items: center; gap: 6px;
}

/* 公告条目 */
.announce-body .a-item {
    padding: 3px 0 3px 16px; position: relative;
    font-size: 13px; color: #4a3520;
}
.announce-body .a-item::before {
    content: '•'; position: absolute; left: 4px; color: #a0522d;
    font-weight: bold;
}

/* 公告高亮文字 */
.announce-body .a-highlight {
    color: #b45309; font-weight: bold;
}

/* 公告分隔线 */
.announce-body .a-divider {
    border: none; border-top: 1px dashed rgba(139,69,19,0.3);
    margin: 16px 0;
}

/* ==================== 单炉子场景 ==================== */

/* 双炉子场景容器 */
.dual-furnace-scene {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
}

/* 单炉子场景容器 */
.single-furnace-scene {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}

/* 单炉子场景隐藏熔炉记录和共享传送门 */
[data-scene="single"] .furnace-result,
[data-scene="single"] #portal {
    display: none !important;
}

/* 双炉场景隐藏财富榜（熔炉记录已占据该位置） */
[data-scene="double"] .wealth-ranking {
    display: none !important;
}

/* 单炉子地图背景覆盖 */
[data-scene="single"] .game-map::before {
    background: radial-gradient(ellipse at center, rgba(10,15,30,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

/* 单炉子炉子区域 */
.sf-furnace-area {
    display: flex; flex-direction: column; align-items: center;
    position: absolute; top: 38%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* 单炉子炉子容器 */
.sf-furnace-wrapper {
    position: relative; cursor: pointer; transition: transform 0.3s;
    width: 380px; height: 400px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.sf-furnace-wrapper:hover { transform: scale(1.05); }

/* 单炉子进度条（fixed定位，永远在最外层可见） */
/* 单炉子进度条容器 */
.sf-progress-box {
    position: fixed; bottom: 350px; left: 50%; transform: translateX(-50%);
    width: 280px; visibility: hidden; z-index: 9999;
    text-align: center;
}
/* 悬浮文字：灵石冶炼中... */
.sf-progress-label {
    color: #ffcc66; font-size: 14px; text-shadow: 1px 1px 2px #000;
    margin-bottom: 8px; letter-spacing: 1px;
}
/* 拟物化金属边框（梭形/胶囊形） */
.sf-progress-box .progress-frame {
    position: relative;
    height: 14px;
    background: #111;
    border: 2px solid #5a4a3a;
    border-radius: 12px;
    box-shadow: inset 0 0 5px #000, 0 1px 3px rgba(255,255,255,0.1);
    overflow: hidden;
    padding: 1px;
}
/* 绿晶石能量填充条 */
.sf-progress-fill {
    width: 0%; height: 100%;
    border-radius: 8px;
    background: linear-gradient(to bottom, #81c784 0%, #4caf50 50%, #2e7d32 100%);
    box-shadow: 0 0 12px #4caf50;
    transition: none;
}
/* 进度条内反光流动感 */
.sf-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
}

/* ==================== 单炉子卷轴弹窗风格 ==================== */

/* 弹窗描述文字 */
.sf-desc {
    font-size: 15px; line-height: 1.8; color: #3d2a1a;
    margin-bottom: 25px; text-align: justify;
}

/* 弹窗选项按钮 */
.sf-option {
    display: flex; align-items: center; margin-bottom: 15px;
    color: #8d4513; font-weight: bold; font-size: 16px;
    cursor: pointer; transition: all 0.15s;
}
.sf-option:hover {
    color: #ff6600; text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
}

/* 选项前的小图标 */
.sf-option-icon {
    width: 22px; height: 14px; background: #967249; border-radius: 4px;
    margin-right: 12px; position: relative;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3); flex-shrink: 0;
}
.sf-option-icon::after {
    content: "..."; color: rgba(255,255,255,0.5); font-size: 10px;
    position: absolute; top: -2px; left: 4px;
}

/* 分隔线 */
.sf-divider {
    display: flex; align-items: center; justify-content: center;
    margin: 15px 0; color: #c00000; font-size: 18px; font-weight: bold;
}
.sf-divider::before, .sf-divider::after {
    content: ""; flex: 1; height: 1px; background: #8b6d45;
    margin: 0 10px; box-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* 灵石展示名称 */
.sf-gem-name {
    font-size: 22px; margin-bottom: 10px; text-align: center; font-weight: bold;
}

/* 灵石价格信息 */
.sf-price-info {
    color: #555; font-size: 13px; margin: 10px 0 20px 0; display: block;
}
.sf-price-val {
    color: #009dff; font-weight: bold;
}

/* 12级以上幻彩色（单炉子专用） */
.sf-legendary {
    animation: sfChroma 4s linear infinite;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
}
@keyframes sfChroma {
    0% { color: #ff0000; } 33% { color: #00ff00; } 66% { color: #0000ff; } 100% { color: #ff0000; }
}

/* 红色高亮值 */
.sf-red-val {
    color: #c00000; font-weight: bold;
}

/* 结果弹窗灵石图片 */
.sf-stone-img {
    width: 60px; height: 60px; object-fit: contain;
    display: block; margin: 0 auto 10px;
    filter: drop-shadow(0 0 8px rgba(255,200,0,0.4));
}

/* 单炉子魔能熔炉弹窗定位在右侧，不遮挡炉子 */
#sf-result-modal .parchment-modal,
#sf-start-modal .parchment-modal {
    position: absolute; right: 20%; top: 40%;
    transform: translateY(-50%);
    min-height: 420px;
    display: flex; flex-direction: column;
}
#sf-result-modal .parchment-content,
#sf-start-modal .parchment-content {
    flex: 1;
}

/* 结果弹窗操作按钮 */
.sf-result-actions {
    margin-top: 20px;
}

/* 失败弹窗深色风格 */
.sf-fail-header {
    background: linear-gradient(to bottom, #3a1515, #1a0a0a) !important;
    color: #f87171 !important;
}
.sf-fail-content {
    background-color: #2a1a1a !important;
    background-image: none !important;
    border-color: #5a2020 !important;
    color: #ccc;
}

/* 保级弹窗琥色风格 */
.sf-protect-header {
    background: linear-gradient(to bottom, #78510e, #4a3008) !important;
    color: #fbbf24 !important;
}
.sf-protect-content {
    background-color: #d4b876 !important;
    border-color: #8b6914 !important;
}

/* 成功特效动画 */
.sf-furnace-wrapper.sf-success {
    animation: sfSuccessPulse 1s ease-out;
}
@keyframes sfSuccessPulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5) drop-shadow(0 0 30px gold); }
    100% { filter: brightness(1); }
}

/* ==================== 交易所按钮 ==================== */
.market-btn-wrapper {
    position: fixed; bottom: 20px; left: 60%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.market-btn-wrapper:hover { transform: scale(1.15); }
.market-icon {
    width: 50px; height: 50px;
    background: rgba(10,31,51,0.85); border: 2px solid rgba(255,204,102,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(255,204,102,0.3);
}
.market-label {
    color: #ffcc66; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(255,204,102,0.5);
    font-weight: bold;
}

/* ==================== 交易所弹窗（全屏窗口风格） ==================== */
.market-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500;
    display: flex; justify-content: center; align-items: center;
}
.market-window {
    width: 90%; max-width: 800px; height: 80vh; max-height: 600px;
    background: #0a1f33; border: 2px solid #444;
    box-shadow: 0 0 50px rgba(0,0,0,0.8); display: flex; flex-direction: column;
    border-radius: 4px; overflow: hidden;
}
.market-header {
    height: 42px; background: linear-gradient(to bottom, #1a4261, #0a1f33);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 16px; color: #ffcc66; font-weight: bold; letter-spacing: 2px;
    border-bottom: 1px solid #333; flex-shrink: 0;
}
.market-close { cursor: pointer; font-size: 22px; opacity: 0.7; }
.market-close:hover { opacity: 1; color: #fff; }

.market-body {
    flex: 1; display: flex; overflow: hidden;
}

/* 侧边导航 */
.market-sidebar {
    width: 130px; border-right: 1px solid #2a4a6a; background: rgba(0,0,0,0.15);
    display: flex; flex-direction: column; flex-shrink: 0;
}
.market-nav-tab {
    padding: 14px 12px; cursor: pointer; font-weight: bold; color: #7aa4c8;
    border-bottom: 1px solid rgba(42,74,106,0.4); transition: 0.2s;
    font-size: 13px; position: relative;
}
.market-nav-tab:hover { background: rgba(255,255,255,0.05); color: #ffcc66; }
.market-nav-tab.active { background: #2a4a6a; color: #ffcc66; }
.market-red-dot {
    position: absolute; right: 10px; top: 14px; width: 8px; height: 8px;
    background: #ff0000; border-radius: 50%; box-shadow: 0 0 6px red; display: none;
}

/* 内容区 */
.market-content {
    flex: 1; background: #e6ce9e; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: inset 0 0 30px #d4b47c;
}
.market-panel { display: none; flex: 1; overflow-y: auto; padding: 16px; }
.market-panel.active { display: block; }

/* 底部状态栏 */
.market-footer {
    height: 40px; background: rgba(0,0,0,0.05); border-top: 1px solid #8b6d45;
    display: flex; align-items: center; padding: 0 16px; font-size: 13px;
    flex-shrink: 0;
}
.market-coupons { font-weight: bold; color: #c00000; margin-right: 20px; }
.market-tax-tip { color: #666; font-size: 11px; }

/* 表格 */
.market-table { width: 100%; border-collapse: collapse; }
.market-table th {
    text-align: left; padding: 8px 10px; border-bottom: 2px solid #8b6d45;
    color: #666; font-size: 12px;
}
.market-table td {
    padding: 10px; border-bottom: 1px solid rgba(139,109,69,0.15); vertical-align: middle;
    font-size: 13px;
}

/* 按钮 */
.market-btn {
    background: #8d4513; color: #fff; border: 1px solid #5a4033;
    padding: 5px 12px; cursor: pointer; border-radius: 4px;
    font-size: 12px; font-weight: bold; transition: 0.2s;
}
.market-btn:hover { background: #ff6600; box-shadow: 0 0 8px rgba(255,102,0,0.4); }
.market-btn-green { background: #2e7d32; }
.market-btn-green:hover { background: #43a047; }
.market-btn:disabled { background: #999; cursor: not-allowed; }

/* 批量购买数量输入框 */
.market-buy-qty {
    width: 48px; padding: 4px 6px; text-align: center;
    background: rgba(10,31,51,0.8); color: #ffcc66; border: 1px solid #5a4033;
    border-radius: 4px; font-size: 12px; font-weight: bold;
    margin-right: 4px; vertical-align: middle;
}
.market-buy-qty::-webkit-inner-spin-button,
.market-buy-qty::-webkit-outer-spin-button { opacity: 1; }

/* 背包网格 */
.market-inv-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.market-inv-card {
    background: rgba(255,255,255,0.4); border: 1px solid #8b6d45;
    border-radius: 4px; padding: 12px; text-align: center; position: relative;
}
.market-inv-card img { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.market-qty-badge {
    position: absolute; right: 4px; top: 4px; background: #0a1f33;
    color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px;
}

/* 灵石名字颜色分级 */
.stone-lvl-normal { color: #5a4033; font-weight: bold; }
.stone-lvl-rare { color: #0070dd; font-weight: bold; }
.stone-lvl-epic { color: #a335ee; font-weight: bold; }
.stone-lvl-legendary {
    background: linear-gradient(90deg, #ff8c00, #ff0055, #ff8c00);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: stoneShine 3s linear infinite; font-weight: bold;
}
.stone-lvl-mythic {
    background: linear-gradient(90deg, #ff0000, #ffeb3b, #00ff00, #00e5ff, #ff00ff, #ff0000);
    background-size: 300% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: stoneShine 4s linear infinite; font-weight: 900;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.3));
}
@keyframes stoneShine { to { background-position: 200% center; } }

/* 邮件未读高亮 */
.mail-unclaimed { background: rgba(46,125,50,0.08); }

/* 上架价格输入弹窗 */
.market-price-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 600;
    display: flex; justify-content: center; align-items: center;
}
.market-price-box {
    background: #e6ce9e; border: 2px solid #8b6d45; border-radius: 8px;
    padding: 24px; text-align: center; min-width: 300px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.market-price-title { font-size: 16px; font-weight: bold; color: #3d2a1a; margin-bottom: 12px; }
.market-price-input {
    width: 200px; padding: 8px 12px; border: 2px solid #8b6d45;
    border-radius: 4px; font-size: 16px; text-align: center;
    background: rgba(255,255,255,0.6);
}
.market-price-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }

/* 交易所V2：宝物图片 */
.market-stone-img {
    width: 40px; height: 40px; object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255,200,0,0.3));
    vertical-align: middle;
}

/* 交易所V2：分页栏 */
.market-page-bar {
    display: flex; justify-content: center; align-items: center;
    gap: 4px; padding: 10px 0 4px;
}
.market-page-btn {
    padding: 4px 10px; border: 1px solid #8b6d45; border-radius: 4px;
    background: rgba(255,255,255,0.5); color: #3d2a1a; cursor: pointer;
    font-size: 12px; transition: all 0.2s;
}
.market-page-btn:hover { background: rgba(139,109,69,0.15); }
.market-page-btn.active { background: #8b6d45; color: #fff; font-weight: bold; }

/* ==================== 管理后台入口按钮 ==================== */
.admin-entry-btn {
    position: fixed; bottom: 20px; left: 85%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.admin-entry-btn:hover { transform: scale(1.15); }
.admin-entry-icon {
    width: 50px; height: 50px;
    background: rgba(50,10,10,0.85); border: 2px solid rgba(255,80,80,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(255,80,80,0.3);
}
.admin-entry-label {
    color: #ff5050; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(255,80,80,0.5);
    font-weight: bold;
}

/* ==================== 我的 - 入口按钮 ==================== */
.profile-entry-btn {
    position: fixed; bottom: 20px; left: 80%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.profile-entry-btn:hover { transform: scale(1.15); }
.profile-entry-icon {
    width: 50px; height: 50px;
    background: rgba(10,30,50,0.85); border: 2px solid rgba(100,180,255,0.6);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(100,180,255,0.3);
    margin: 0 auto;
}
.profile-entry-label {
    color: #64b4ff; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(100,180,255,0.5);
    font-weight: bold;
}

/* ==================== 我的 - 弹窗样式 ==================== */
.profile-modal-box {
    max-width: 400px; width: 90%; max-height: 80vh; overflow-y: auto;
}
.profile-info-section {
    background: rgba(30,40,70,0.6);
    border: 1px solid rgba(100,180,255,0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.profile-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0;
}
.profile-info-row + .profile-info-row {
    border-top: 1px solid rgba(255,255,255,0.06);
}
.profile-info-label {
    color: #8899aa; font-size: 13px;
}
.profile-info-value {
    color: #e0e8ff; font-size: 14px; font-weight: bold;
}
.profile-section {
    margin-bottom: 18px;
}
.profile-section-title {
    color: #a0b0cc; font-size: 13px; font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ==================== 游戏交易行入口按钮（注册按钮右侧，始终可见） ==================== */
@keyframes trade-border-spin {
    0% { border-color: #ff4500; box-shadow: 0 0 14px rgba(255,69,0,0.6), inset 0 0 6px rgba(255,69,0,0.15); }
    16% { border-color: #ff00ff; box-shadow: 0 0 14px rgba(255,0,255,0.6), inset 0 0 6px rgba(255,0,255,0.15); }
    33% { border-color: #00bfff; box-shadow: 0 0 14px rgba(0,191,255,0.6), inset 0 0 6px rgba(0,191,255,0.15); }
    50% { border-color: #7fff00; box-shadow: 0 0 14px rgba(127,255,0,0.6), inset 0 0 6px rgba(127,255,0,0.15); }
    66% { border-color: #ffd700; box-shadow: 0 0 14px rgba(255,215,0,0.6), inset 0 0 6px rgba(255,215,0,0.15); }
    83% { border-color: #ff1493; box-shadow: 0 0 14px rgba(255,20,147,0.6), inset 0 0 6px rgba(255,20,147,0.15); }
    100% { border-color: #ff4500; box-shadow: 0 0 14px rgba(255,69,0,0.6), inset 0 0 6px rgba(255,69,0,0.15); }
}
.trade-entry-btn {
    position: fixed; bottom: 20px; right: 20px; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.trade-entry-btn:hover { transform: scale(1.1); }
.trade-entry-icon {
    width: 240px; height: 52px;
    background: rgba(10,15,30,0.9); border: 2.5px solid #ff4500;
    border-radius: 8px; display: flex; justify-content: center; align-items: center;
    gap: 6px; font-size: 14px; color: #ffd700; white-space: nowrap;
    text-shadow: 0 0 6px rgba(255,215,0,0.5);
    animation: trade-border-spin 2.5s linear infinite;
    margin: 0 auto;
}
.trade-entry-icon .trade-emoji { font-size: 20px; }
.trade-entry-label {
    color: #ffd700; font-size: 12px; margin-top: 2px;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
    font-weight: bold; letter-spacing: 1px;
}

/* ==================== 底部按钮自动气泡提示 ==================== */
@keyframes bubblePop {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.7); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes bubbleFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}
.auto-bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(30,50,90,0.95), rgba(15,30,60,0.95));
    color: #9fd8ff; font-size: 12px; font-weight: bold;
    padding: 6px 12px; border-radius: 12px; white-space: nowrap;
    border: 1px solid rgba(120,190,255,0.5);
    box-shadow: 0 2px 12px rgba(60,140,255,0.35);
    z-index: 150; pointer-events: none;
    animation: bubblePop 0.35s ease-out, bubbleFloat 2.2s ease-in-out 0.35s infinite;
}
.auto-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: rgba(20,40,75,0.95);
}

/* ==================== 点券补给 ==================== */
.supply-entry-icon {
    width: 50px; height: 50px;
    background: rgba(5,20,40,0.85); border: 2px solid rgba(80,170,255,0.7);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; box-shadow: 0 0 12px rgba(80,170,255,0.4);
    margin: 0 auto;
}
.supply-entry-label {
    color: #5eb2ff; font-size: 11px; margin-top: 2px;
    text-shadow: 0 0 6px rgba(80,170,255,0.5); font-weight: bold;
}

/* 补给弹窗内部 */
#supply-modal .market-window {
    height: auto; max-height: 85vh;
}
#supply-body {
    flex: 1; width: 100%; overflow-y: auto; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
}
.supply-loading, .supply-error {
    text-align: center; padding: 40px 0; color: #889; font-size: 14px;
}
.supply-error { color: #ff6b6b; }
.supply-intro { text-align: center; margin-bottom: 18px; }
.supply-intro-title {
    font-size: 22px; font-weight: bold; margin-bottom: 8px;
    background: linear-gradient(90deg, #f0c040, #ffe9a8, #f0c040);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(240,192,64,0.3);
    letter-spacing: 2px;
}
.supply-intro-desc { color: #8a93b0; font-size: 12px; line-height: 1.8; }

/* 双卡片布局 */
.supply-cards {
    display: flex; gap: 12px; justify-content: center; margin-bottom: 18px; width: 100%;
}
.supply-card {
    flex: 1; max-width: 200px; position: relative;
    border-radius: 12px; padding: 18px 14px 14px; text-align: center;
    background: rgba(20,26,48,0.95);
    border: 1.5px solid rgba(120,130,160,0.25);
    transition: transform 0.25s, box-shadow 0.25s;
}
.supply-card:hover { transform: translateY(-4px); }
.supply-card-star.active {
    border-color: rgba(240,192,64,0.8);
    background: linear-gradient(180deg, rgba(60,45,10,0.95), rgba(25,20,8,0.95));
    box-shadow: 0 0 18px rgba(240,192,64,0.25), inset 0 0 30px rgba(240,192,64,0.06);
}
.supply-card-moon.active {
    border-color: rgba(160,128,240,0.8);
    background: linear-gradient(180deg, rgba(45,32,75,0.95), rgba(20,16,40,0.95));
    box-shadow: 0 0 18px rgba(160,128,240,0.25), inset 0 0 30px rgba(160,128,240,0.06);
}
.supply-card-badge {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    padding: 2px 12px; border-radius: 10px; font-size: 11px; font-weight: bold;
    background: linear-gradient(135deg, #4ade80, #22a35a); color: #fff;
    box-shadow: 0 2px 8px rgba(74,222,128,0.4);
}
.supply-card-icon-big { font-size: 38px; margin-bottom: 6px; filter: drop-shadow(0 0 8px rgba(255,255,255,0.25)); }
.supply-card-name { font-size: 17px; font-weight: bold; color: #e8ecff; margin-bottom: 6px; }
.supply-card-star .supply-card-name { color: #ffd76a; }
.supply-card-moon .supply-card-name { color: #c8b0ff; }
.supply-card-amount { font-size: 22px; font-weight: bold; color: #fff; margin-bottom: 10px; }
.supply-card-amount .unit { font-size: 11px; font-weight: normal; color: #8a93b0; }
.supply-card-divider {
    height: 1px; margin: 0 6px 10px;
    background: linear-gradient(90deg, transparent, rgba(160,170,200,0.4), transparent);
}
.supply-card-detail {
    display: flex; justify-content: space-between; font-size: 12px;
    color: #8a93b0; margin-bottom: 6px; padding: 0 4px;
}
.supply-card-detail b { color: #d8dfff; font-weight: normal; }
.supply-card-status-on { margin-top: 8px; font-size: 12px; color: #4ade80; font-weight: bold; }
.supply-card-status-off { margin-top: 8px; font-size: 12px; color: #667; }

/* 底部按钮 */
.supply-footer { text-align: center; padding-top: 4px; width: 100%; }
.supply-go-btn {
    padding: 12px 56px; font-size: 16px; font-weight: bold; letter-spacing: 4px;
    background: linear-gradient(135deg, #f7d56a, #e8a020);
    color: #3d2600; border: none; border-radius: 26px; cursor: pointer;
    box-shadow: 0 4px 18px rgba(240,192,64,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}
.supply-go-btn:hover { transform: scale(1.05); box-shadow: 0 6px 26px rgba(240,192,64,0.65); }
.supply-go-hint { color: #667; font-size: 11px; margin-top: 8px; }

@media (max-width: 480px) {
    .supply-cards { flex-direction: column; align-items: center; }
    .supply-card { width: 100%; max-width: 320px; }
}