/* ==================== 基础重置 ==================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    background: #0d131a; 
    color: #e9f1f7; 
    font-family: system-ui, -apple-system, sans-serif; 
    display: flex; 
    justify-content: center; 
    overflow: hidden; 
}
#app { 
    width: 100vw; 
    height: 100vh; 
    max-width: 480px; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
}

/* ==================== 顶部状态栏 ==================== */
.top-bar { 
    display: flex; 
    justify-content: space-between; 
    background: #172733; 
    padding: 12px 10px; 
    font-size: 12px; 
    border-bottom: 1px solid #2f4a5c; 
    z-index: 10; 
}
.top-bar span { 
    color: #ffd166; 
    font-weight: bold; 
}

/* ==================== 页面容器与切换 ==================== */
.page { 
    display: none; 
    flex: 1; 
    overflow-y: auto; 
    padding: 16px 16px 84px; 
}
.page.active { 
    display: block; 
}
h2 { 
    margin-bottom: 20px; 
    font-weight: normal; 
    font-size: 20px; 
    color: #4cc9f0;
}
h3 {
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 10px;
}

/* ==================== 自习室主页 ==================== */
.study-room { text-align: center; }
.action-btns { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin: 20px 0; 
}
.action-btns button { 
    padding: 16px; 
    border-radius: 12px; 
    border: none; 
    background: #2d6a4f; 
    color: white; 
    font-size: 16px; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.action-btns button:active {
    transform: scale(0.98);
}
.action-btns button:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}
.pet-area { 
    background: #172733; 
    padding: 20px; 
    border-radius: 12px; 
    margin-top: 20px; 
    border: 1px solid #2f4a5c; 
}
.pet-area h3 { margin-bottom: 10px; color: #ffd166; }
.pet-area button { 
    padding: 8px 12px; 
    margin: 8px 8px 0 0; 
    border-radius: 8px; 
    background: #457b9d; 
    color: white; 
    border: none; 
    cursor: pointer; 
}

/* ==================== 设备升级列表 ==================== */
.equip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.equip-card {
    background: #172733;
    border: 1px solid #2f4a5c;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.equip-card h4 { color: #ffd166; margin-bottom: 5px; }
.equip-card p { font-size: 12px; color: #8fb3c9; margin-bottom: 5px; }
.equip-card button {
    width: 100%;
    padding: 6px;
    background: #2d6a4f;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

/* ==================== 商城列表 ==================== */
.shop-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #172733;
    border: 1px solid #2f4a5c;
    padding: 12px;
    border-radius: 10px;
}
.shop-item button {
    padding: 8px 16px;
    border-radius: 6px;
    background: #e76f51;
    color: white;
    border: none;
    cursor: pointer;
}

/* ==================== 抽卡区域 ==================== */
.gacha-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gacha-area button {
    padding: 15px;
    border-radius: 10px;
    background: #457b9d;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

/* ==================== 底部导航栏 ==================== */
#bottomNav { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 64px; 
    display: flex; 
    align-items: stretch; 
    background: #172733; 
    border-top: 1px solid #2f4a5c; 
    z-index: 50; 
}
.nav-btn { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    background: none; 
    border: none; 
    color: #8fb3c9; 
    cursor: pointer; 
    font-size: 10px; 
    gap: 2px; 
}
.nav-btn.active { color: #4cc9f0; }
.nav-btn.center { 
    background: #2d6a4f; 
    color: white; 
    margin: 7px; 
    border-radius: 10px; 
    font-weight: bold; 
    box-shadow: 0 0 12px rgba(45,106,79,.4); 
}
.nav-btn.center.active { background: #40916c; }
.nav-btn .icon { font-size: 18px; }

/* ==================== 答题层 ==================== */
#quiz-view { 
    position: absolute; 
    inset: 0; 
    background: #0d131a; 
    z-index: 60; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
}
#quiz-view.hidden { display: none; }
.progress { font-size: 13px; color: #8fb3c9; margin-bottom: 10px; text-align: right; }
.question { font-size: 18px; margin-bottom: 20px; line-height: 1.6; flex-shrink: 0; }
.options { display: grid; gap: 10px; flex: 1; overflow-y: auto; padding-bottom: 20px; }
.options button { padding: 14px; border-radius: 8px; background: #1e3544; border: 1px solid #35566b; color: white; text-align: left; font-size: 15px; cursor: pointer; }
.options button:disabled { cursor: default; }
.feedback-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; min-height: 40px; }
.feedback { font-size: 14px; color: #ffd166; flex: 1; line-height: 1.4; }
#show-explanation-btn { padding: 8px 16px; border-radius: 6px; background: #4cc9f0; color: #0d131a; border: none; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; }
#show-explanation-btn.hidden { display: none; }
#next-btn { margin-top: 10px; width: 100%; padding: 14px; background: #e76f51; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
#next-btn.hidden { display: none; }

/* ==================== 通用弹窗 ==================== */
.modal { position: absolute; inset: 0; background: rgba(10,14,20,0.9); z-index: 100; display: none; justify-content: center; align-items: center; padding: 20px; }
.modal.active { display: flex; }
.modal-content { background: #172733; border: 1px solid #4cc9f0; border-radius: 12px; padding: 20px; width: 100%; max-width: 360px; max-height: 80vh; overflow-y: auto; }
.modal-content h3 { color: #4cc9f0; margin-bottom: 15px; text-align: center; font-size: 18px; }
.modal-content p { font-size: 14px; line-height: 1.6; color: #e9f1f7; margin-bottom: 20px; text-align: justify; }
.modal-content button { width: 100%; padding: 12px; border-radius: 8px; background: #2d6a4f; color: white; border: none; cursor: pointer; font-size: 16px; }

/* ==================== 背包网格 ==================== */
.bag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
.bag-item { background: #172733; border: 1px solid #2f4a5c; border-radius: 10px; padding: 15px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.bag-item .item-icon { font-size: 28px; }
.bag-item .item-name { font-size: 12px; color: #8fb3c9; }
.bag-item .item-count { font-size: 16px; font-weight: bold; color: #ffd166; }
/* ==================== 关卡网格 ==================== */
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px; }
.level-btn { aspect-ratio: 1; border-radius: 12px; border: 2px solid #35566b; background: #1e3544; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.level-btn.cleared { border-color: #52b788; background: #1a3a2c; }
.level-btn.locked { opacity: 0.4; cursor: not-allowed; }
.level-btn span:first-child { font-size: 18px; font-weight: bold; }
.level-btn span:last-child { font-size: 10px; color: #ffd166; }

/* ==================== 战斗层 ==================== */
#battle-view { position: absolute; inset: 0; z-index: 70; background: #0d131a; display: flex; flex-direction: column; }
#battle-view.hidden { display: none; }
#battle-canvas { flex: 1; width: 100%; min-height: 0; display: block; background: #0d131a; }
.battle-top { position: absolute; top: 0; left: 0; right: 0; padding: 15px; display: flex; justify-content: space-between; pointer-events: none; }
.give-up-btn { pointer-events: auto; padding: 6px 12px; background: rgba(231,111,81,0.2); border: 1px solid #e76f51; color: #e76f51; border-radius: 6px; cursor: pointer; }
.battle-info { text-align: right; font-size: 14px; font-weight: bold; color: #ffd166; }
.battle-result { position: absolute; inset: 0; background: rgba(10,14,20,0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 80; }
.battle-result.hidden { display: none; }
.battle-result h3 { font-size: 28px; color: #52b788; margin-bottom: 10px; }
.battle-result p { font-size: 16px; color: #e9f1f7; margin-bottom: 20px; }
.battle-result button { padding: 12px 40px; background: #2d6a4f; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
/* 追加以下样式 */

/* 答题界面头部与退出 */
.quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.quit-btn { padding: 4px 10px; background: rgba(231,111,81,0.2); border: 1px solid #e76f51; color: #e76f51; border-radius: 6px; font-size: 12px; cursor: pointer; }

/* 抽卡Tabs */
.gacha-tabs { display: flex; gap: 5px; margin-bottom: 15px; }
.gacha-tabs button { flex: 1; padding: 8px; background: #172733; border: 1px solid #2f4a5c; color: #8fb3c9; border-radius: 8px; cursor: pointer; }
.gacha-tabs button.active { background: #2d6a4f; color: white; border-color: #52b788; }
.gacha-draw-btns { display: flex; gap: 10px; margin-top: 20px; }
.gacha-draw-btns button { flex: 1; padding: 15px; border-radius: 10px; border: none; color: white; font-size: 16px; cursor: pointer; }

/* 商城网格 */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
.shop-item { background: #172733; border: 1px solid #2f4a5c; border-radius: 10px; padding: 12px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.shop-item button { width: 100%; padding: 6px; margin-top: 5px; border-radius: 6px; background: #e76f51; color: white; border: none; font-size: 12px; cursor: pointer; }

.hidden { display: none !important; }
/* 追加到 style.css 末尾 */

/* 自习室场景化 */
#page-study {
    background-color: #1a202c; /* 房间底板色 */
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="%231a202c"/><path d="M0 50 L100 50 M50 0 L50 100" stroke="%232d3748" stroke-width="0.5"/></svg>');
    padding: 0;
    position: relative;
    overflow: hidden;
}
.study-room-scene {
    position: absolute;
    inset: 0;
    padding-bottom: 60px; /* 留出底部答题按钮空间 */
}
.room-bg {
    position: absolute;
    inset: 0;
    /* 未来可以替换为真实房间图片 */
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%);
}

.device-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(23, 39, 51, 0.8);
    border: 1px solid #2f4a5c;
    border-radius: 8px;
    padding: 8px;
    transition: transform 0.1s;
}
.device-node:active { transform: scale(0.95); }
.device-node .d-icon { font-size: 32px; }
.device-node .d-name { font-size: 10px; color: #e9f1f7; margin-top: 4px; }

.pet-area-scene {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(23, 39, 51, 0.9);
    border: 1px solid #2f4a5c;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.pet-area-scene button {
    padding: 4px 8px;
    margin: 0 2px;
    border-radius: 4px;
    background: #457b9d;
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.study-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: #0d131a;
    border-top: 1px solid #2f4a5c;
    z-index: 10;
}
.start-quiz-btn {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: #2d6a4f;
    color: white;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(45,106,79,0.3);
}
/* 追加到 style.css 末尾 */

/* 顶部任务按钮 */
.task-btn {
    background: #e76f51;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

/* 任务列表 */
.task-section-title { font-size: 14px; color: #4cc9f0; margin: 15px 0 10px; border-bottom: 1px solid #2f4a5c; padding-bottom: 5px; }
.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e3544;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.task-info { font-size: 13px; color: #e9f1f7; }
.task-progress { font-size: 12px; color: #8fb3c9; margin-top: 4px; }
.task-reward { color: #ffd166; font-weight: bold; font-size: 13px; }
.task-claim-btn {
    padding: 6px 10px;
    border-radius: 6px;
    background: #2d6a4f;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
}
.task-claim-btn:disabled { background: #35566b; opacity: 0.5; cursor: not-allowed; }

/* ==================== 1026.7 新增 ==================== */

/* 答题道具栏（4 个） */
.quiz-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 2px;
    border-radius: 8px;
    background: #1e3544;
    border: 1px solid #35566b;
    color: #8fb3c9;
    font-size: 10px;
    line-height: 1.2;
    cursor: pointer;
}
.tool-btn .tool-icon { font-size: 15px; }
.tool-btn .tool-name { white-space: nowrap; }
.tool-btn b { color: #ffd166; font-size: 11px; }
.tool-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tool-btn:active:not(:disabled) { transform: scale(0.96); }
.tool-btn.active { border-color: #ffd166; background: rgba(255,209,102,0.12); }

/* 选项状态 */
.options button.correct { border-color: #52b788 !important; background: rgba(82,183,136,0.14) !important; }
.options button.wrong { border-color: #e76f51 !important; background: rgba(231,111,81,0.14) !important; }
.options button.eliminated { opacity: 0.28; text-decoration: line-through; }

/* 轻提示 */
.toast {
    position: absolute;
    left: 50%;
    bottom: 96px;
    transform: translate(-50%, 8px);
    max-width: 80%;
    padding: 9px 16px;
    border-radius: 20px;
    background: rgba(23,39,51,0.96);
    border: 1px solid #2f4a5c;
    color: #e9f1f7;
    font-size: 13px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-item { border-color: #ffd166; color: #ffd166; }
.toast-danger { border-color: #e76f51; color: #e76f51; }

/* 贪分：补给面板 */
.chest-panel {
    position: absolute;
    inset: 0;
    background: rgba(10,14,20,0.95);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
}
.chest-panel.hidden { display: none; }
.chest-panel h3 { color: #4cc9f0; font-size: 20px; margin-bottom: 6px; }
.chest-round { font-size: 13px; color: #ffd166; margin-bottom: 6px; }
.chest-tip { font-size: 12px; color: #8fb3c9; margin-bottom: 20px; text-align: center; line-height: 1.5; }
.chest-options { display: flex; gap: 10px; width: 100%; margin-bottom: 22px; }
.chest-card {
    flex: 1;
    padding: 16px 6px;
    border-radius: 12px;
    background: #172733;
    border: 1px solid #2f4a5c;
    color: #e9f1f7;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform .1s;
}
.chest-card:active { transform: scale(0.96); }
.chest-card .chest-icon { font-size: 30px; }
.chest-card .chest-name { font-size: 13px; font-weight: bold; }
.chest-card .chest-desc { font-size: 11px; color: #8fb3c9; line-height: 1.4; text-align: center; }
.chest-card.tone-safe { border-color: #52b788; }
.chest-card.tone-buff { border-color: #4cc9f0; }
.chest-card.tone-risk { border-color: #e76f51; }
.retreat-btn {
    padding: 10px 22px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #4cc9f0;
    color: #4cc9f0;
    font-size: 13px;
    cursor: pointer;
}

/* 战斗结算细化 */
.br-stars { font-size: 26px; color: #ffd166; letter-spacing: 4px; margin-bottom: 10px; }
.br-line { display: flex; justify-content: space-between; font-size: 14px; color: #e9f1f7; padding: 4px 0; }
.br-divider, .qr-divider { height: 1px; background: #2f4a5c; margin: 12px 0; }
.br-gain, .qr-gain { font-size: 14px; color: #52b788; line-height: 1.8; text-align: center; }
.br-hint, .qr-hint { font-size: 13px; color: #8fb3c9; text-align: center; margin-top: 10px; line-height: 1.6; }
.br-first { font-size: 13px; color: #ffd166; margin-top: 10px; text-align: center; }
.br-warn { font-size: 12px; color: #e76f51; margin-top: 10px; text-align: center; }

/* 答题结算 */
.qr-line { display: flex; justify-content: space-between; font-size: 14px; color: #e9f1f7; padding: 5px 0; }
.qr-line b { color: #ffd166; }

/* 重置存档 */
.reset-btn {
    display: block;
    margin: 24px auto 10px;
    padding: 8px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #3a2a2a;
    color: #8a6a63;
    font-size: 12px;
    cursor: pointer;
}

/* BOSS 关卡标记 */
.level-btn.boss-level { border-color: #9b5de5; }
.level-btn.boss-level span:last-child { color: #9b5de5; }

/* 顶栏改成两行，腾位置给准考证 */
.top-bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
}
.tb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tb-row-sub { font-size: 11px; color: #8fb3c9; justify-content: flex-start; gap: 16px; }
.tb-item { font-size: 12px; }
.tb-sub { color: #8fb3c9; font-weight: normal; font-size: 10px; }
.pass-timer { font-style: normal; font-size: 10px; margin-left: 3px; }

/* 答题场次弹窗里的准考证提示 */
.quiz-pass-info {
    text-align: center;
    font-size: 12px;
    color: #8fb3c9;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* 商城限购提示 */
.item-sub { font-size: 10px; color: #8fb3c9; }

/* 关键关标记 */
.level-btn.key-level { border-color: #ffd166; }
.level-btn .key-mark {
    position: absolute;
    top: 6px;
    right: 8px;
    font-style: normal;
    font-size: 9px;
    color: #0d131a;
    background: #ffd166;
    border-radius: 3px;
    padding: 0 3px;
}
.level-btn { position: relative; }

/* ==================== 1026.8 新增：粒子层 + 抽卡/开箱动画 ==================== */

/* 粒子层 */
.fx-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 300;
}
.fx-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 290;
    opacity: 0;
    background: #fff;
}

/* 抽卡结果网格 */
.gacha-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.gacha-grid.single { grid-template-columns: 1fr; }

.gacha-card {
    background: #1e3544;
    border: 1px solid #35566b;
    border-radius: 10px;
    padding: 10px 4px;
    text-align: center;
    opacity: 0;
}
.gacha-grid.single .gacha-card { padding: 26px 12px; }

.gacha-card.show { animation: gcPop .36s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes gcPop {
    0%   { transform: scale(.35) rotate(-10deg); opacity: 0; }
    62%  { transform: scale(1.12) rotate(2deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0);        opacity: 1; }
}

.gc-icon { font-size: 26px; line-height: 1.2; }
.gacha-grid.single .gc-icon { font-size: 56px; }
.gc-name { font-size: 11px; color: #e9f1f7; margin-top: 4px; word-break: break-all; }
.gacha-grid.single .gc-name { font-size: 16px; margin-top: 10px; }
.gc-tag { font-size: 10px; color: #8fb3c9; margin-top: 2px; }

.rarity-SSR {
    border-color: #ffd166;
    background: linear-gradient(160deg, #2c2513, #1e3544);
    box-shadow: 0 0 16px rgba(255, 209, 102, .5);
}
.rarity-SSR .gc-tag { color: #ffd166; font-weight: bold; }
.rarity-SR { border-color: #9b5de5; box-shadow: 0 0 10px rgba(155, 93, 229, .35); }

/* 图鉴 */
.gallery-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 18px 0 8px;
    font-size: 14px;
    color: #8fb3c9;
}
.gallery-title span { color: #ffd166; font-size: 12px; }

.bag-item.card-owned {
    border-color: #ffd166;
    box-shadow: 0 0 10px rgba(255, 209, 102, .18);
}
.bag-item.card-locked {
    opacity: .32;
    filter: grayscale(1);
}
.card-rarity { font-size: 10px; color: #8fb3c9; }
.bag-item.card-owned .card-rarity { color: #ffd166; }

/* 开箱 */
.chest-options.fade-out { opacity: .22; transition: opacity .3s; }

.chest-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px 0 20px;
    min-height: 92px;
}
.chest-reveal.hidden { display: none; }

.cr-icon { font-size: 62px; line-height: 1; }
.cr-name { font-size: 13px; color: #8fb3c9; }
.cr-result {
    font-size: 16px;
    font-weight: bold;
    color: #ffd166;
    opacity: 0;
    text-align: center;
}

.chest-reveal.shake .cr-icon { animation: chestShake .42s ease-in-out; }
@keyframes chestShake {
    0%   { transform: translateX(0) scale(1); }
    20%  { transform: translateX(-7px) scale(1.06); }
    40%  { transform: translateX(7px) scale(1.12); }
    60%  { transform: translateX(-5px) scale(1.16); }
    80%  { transform: translateX(5px) scale(1.20); }
    100% { transform: translateX(0) scale(1.22); }
}

.chest-reveal.open .cr-icon { animation: chestOpen .5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes chestOpen {
    0%   { transform: scale(1.22); }
    45%  { transform: scale(1.62); }
    100% { transform: scale(1.28); }
}

.chest-reveal.open .cr-result { animation: fadeUp .4s .08s forwards; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 设备满星禁用 */
#device-upgrade-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ==================== 1026.8 贪分面板 ==================== */
.gf-title {
    color: #ffd166;
    font-size: 22px;
    letter-spacing: 8px;
    text-indent: 8px;
    margin-bottom: 4px;
}

.run-buffs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 22px;
    max-width: 100%;
}
.rb-title { font-size: 11px; color: #8fb3c9; }
.rb-chip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 209, 102, .14);
    border: 1px solid rgba(255, 209, 102, .38);
    color: #ffd166;
    white-space: nowrap;
}
.rb-none { font-size: 10px; color: #55697a; }

.chest-kind {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.5;
}
.kind-res { background: rgba(82, 183, 136, .18); color: #52b788; }
.kind-buff { background: rgba(155, 93, 229, .20); color: #c77dff; }

/* 两个选项时卡片更宽，描述能放下 */
.chest-options .chest-card { min-width: 0; }

/* ==================== 1026.9 新增 ==================== */

.page-tip { text-align: center; font-size: 11px; color: #55697a; margin-top: 14px; }

/* 自习室：顶部两个大按钮 */
#page-study.active {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.study-top-actions {
    display: flex;
    gap: 10px;
    padding: 12px 12px 8px;
}
.big-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 1px solid #2f4a5c;
    background: #172733;
    color: #e9f1f7;
    cursor: pointer;
    transition: transform .1s;
}
.big-action:active { transform: scale(.97); }
.big-action.quiz { border-color: #52b788; background: linear-gradient(160deg, #1a3a2c, #172733); }
.big-action.pet { border-color: #ffd166; background: linear-gradient(160deg, #2c2513, #172733); }
.ba-icon { font-size: 26px; line-height: 1.2; }
.ba-label { font-size: 14px; font-weight: bold; }
.ba-sub { font-size: 10px; color: #8fb3c9; }

#page-study .study-room-scene {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
    padding-bottom: 0;
}

/* 宠物页 */
.pet-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 16px;
}
.pet-top h2 { margin: 0; }
.back-btn {
    padding: 5px 10px;
    border-radius: 8px;
    background: #172733;
    border: 1px solid #2f4a5c;
    color: #8fb3c9;
    font-size: 12px;
    cursor: pointer;
}
.pet-list { display: flex; flex-direction: column; }
.pet-empty {
    text-align: center;
    color: #8fb3c9;
    font-size: 13px;
    line-height: 2;
    padding: 40px 0;
}
.pet-empty span { font-size: 11px; color: #55697a; }

.pet-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #172733;
    border: 1px solid #2f4a5c;
    margin-bottom: 10px;
    cursor: pointer;
}
.pet-card.ready { border-color: #ffd166; box-shadow: 0 0 12px rgba(255, 209, 102, .22); }
.pc-icon { font-size: 36px; line-height: 1.1; }
.pc-main { flex: 1; min-width: 0; }
.pc-head { display: flex; justify-content: space-between; align-items: baseline; }
.pc-name { font-size: 14px; font-weight: bold; }
.pc-status { font-size: 11px; color: #8fb3c9; }
.pc-mult { font-size: 10px; color: #8fb3c9; margin-top: 5px; }

/* 状态条 */
.bar-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.bar-label { font-size: 10px; color: #8fb3c9; width: 32px; flex: none; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: #0d131a; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.bar i.ok { background: #52b788; }
.bar i.warn { background: #ffd166; }
.bar i.danger { background: #e76f51; }
.bar-num { font-size: 10px; color: #c9d8e3; width: 26px; text-align: right; flex: none; }

/* 宠物详情 */
.pd-top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.pd-icon { font-size: 46px; line-height: 1; }
.pd-bars { flex: 1; min-width: 0; }
.pd-mult { font-size: 12px; margin-bottom: 14px; text-align: center; }
.pd-items { display: flex; gap: 8px; margin-bottom: 12px; }
.pd-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 10px;
    background: #1e3544;
    border: 1px solid #35566b;
    color: #e9f1f7;
    font-size: 11px;
    cursor: pointer;
}
.pd-item b { color: #ffd166; font-size: 11px; }
.pd-item:disabled { opacity: .35; cursor: not-allowed; }
.pdi-icon { font-size: 20px; }
.pd-explore { display: flex; gap: 8px; margin-bottom: 12px; }
.pd-explore button {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background: #2d6a4f;
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.pd-explore .ready-btn { background: #e76f51; width: 100%; }
.pd-explore-tip {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background: #172733;
    border: 1px solid #2f4a5c;
    color: #8fb3c9;
    text-align: center;
    font-size: 12px;
}

/* 出战准备 */
.loadout-sub { text-align: center; font-size: 12px; color: #8fb3c9; margin-bottom: 14px; }
.loadout-slots { display: flex; gap: 8px; margin-bottom: 16px; }
.loadout-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px;
    border-radius: 12px;
    background: #1e3544;
    border: 1px dashed #35566b;
    color: #e9f1f7;
    cursor: pointer;
}
.loadout-slot.has-item {
    border-style: solid;
    border-color: #ffd166;
    background: linear-gradient(160deg, #2c2513, #1e3544);
}
.ls-label { font-size: 10px; color: #8fb3c9; }
.ls-icon { font-size: 22px; }
.ls-name { font-size: 12px; font-weight: bold; }
.ls-desc { font-size: 9px; color: #8fb3c9; text-align: center; line-height: 1.3; }
.loadout-start {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    background: #2d6a4f;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

/* 装备选择 */
.picker-list { margin-bottom: 14px; }
.picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #1e3544;
    border: 1px solid #35566b;
    color: #e9f1f7;
    text-align: left;
    cursor: pointer;
}
.picker-row.equipped { border-color: #ffd166; }
.pr-icon { font-size: 22px; }
.pr-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pr-main b { font-size: 13px; }
.pr-main i { font-style: normal; font-size: 11px; color: #8fb3c9; }
.pr-flag { font-size: 10px; color: #ffd166; }

/* 战斗中的本局增益条 */
.battle-buffs {
    position: absolute;
    top: 54px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    z-index: 65;
    pointer-events: none;
}
.bb-chip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 9px;
    background: rgba(23, 39, 51, .85);
    border: 1px solid rgba(255, 209, 102, .5);
    color: #ffd166;
}

/* 通关宝箱 */
.br-chest-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.br-chest {
    font-size: 64px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    animation: chestBob 1.1s ease-in-out infinite;
}
@keyframes chestBob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.06); }
}
.br-chest.opened { animation: none; opacity: .25; }
.br-chest-tip { font-size: 12px; color: #8fb3c9; }
.br-loot { width: 100%; padding: 0 6px; text-align: center; }
.br-loot button {
    display: block;
    margin: 18px auto 0;
    padding: 12px 40px;
    background: #2d6a4f;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}
.br-buffs { font-size: 11px; color: #ffd166; text-align: center; line-height: 1.6; }

/* ==================== 1026.13：局内抽卡（押题） ==================== */
.battle-left { display: flex; gap: 8px; pointer-events: auto; }

.ink-btn {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(76, 201, 240, .18);
    border: 1px solid #4cc9f0;
    color: #4cc9f0;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}
.ink-btn:active { transform: scale(.95); }

.draw-panel {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(8, 12, 17, .96);
    display: flex;
    flex-direction: column;
    padding: 14px;
}
.draw-panel.hidden { display: none; }

.dp-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dp-ink { font-size: 14px; color: #e9f1f7; }
.dp-ink b { color: #4cc9f0; font-size: 18px; }
.dp-close {
    padding: 7px 14px;
    border-radius: 8px;
    background: #2d6a4f;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.dp-bonds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    min-height: 22px;
}
.bond-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid;
    background: rgba(255, 255, 255, .04);
}

.dp-choices {
    flex: 1;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.dp-choices.hidden { display: none; }

.draw-card {
    flex: 1;
    max-width: 160px;
    padding: 14px 8px;
    border-radius: 14px;
    background: linear-gradient(165deg, #1e2b36, #131c25);
    border: 2px solid #35566b;
    color: #e9f1f7;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: cardIn .3s cubic-bezier(.2, 1.4, .4, 1);
}
.draw-card:active { transform: scale(.96); }
@keyframes cardIn {
    from { transform: scale(.7) rotate(-6deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}
.dc-q { font-size: 10px; font-weight: bold; letter-spacing: 1px; }
.dc-icon { font-size: 34px; }
.dc-name { font-size: 14px; font-weight: bold; }
.dc-desc { font-size: 11px; color: #8fb3c9; line-height: 1.4; text-align: center; }
.dc-pick {
    margin-top: 6px;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 10px;
    background: rgba(255, 209, 102, .16);
    color: #ffd166;
}

.dp-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.dp-actions.hidden { display: none; }
.dp-actions button {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    background: #1e3544;
    border: 1px solid #4cc9f0;
    color: #e9f1f7;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.5;
}
.dp-actions button small { font-size: 11px; color: #8fb3c9; }
.dp-actions button#dp-premium { border-color: #ffd166; }
.dp-actions button:disabled { opacity: .35; cursor: not-allowed; }

/* ==================== 1026.13 改版：底部押题栏 ==================== */

.bond-strip {
    position: absolute;
    left: 6px;
    top: 46%;
    transform: translateY(-50%);
    width: 78px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    z-index: 66;
    pointer-events: none;
}
.bond-strip .bond-chip {
    pointer-events: auto;
    cursor: pointer;
    background: rgba(10, 16, 22, .85);
    text-align: center;
}
.bond-none { font-size: 10px; color: #55697a; text-align: center; }

.draw-bar {
    position: absolute;
    right: 6px;
    top: 46%;
    transform: translateY(-50%);
    width: 70px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    z-index: 68;
}

.db-ink {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(23, 39, 51, .94);
    border: 1px solid #4cc9f0;
    color: #4cc9f0;
    font-size: 12px;
}
.db-ink b { font-size: 17px; }

.db-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-family: inherit;
    cursor: pointer;
    background: rgba(23, 39, 51, .94);
    border: 1px solid #35566b;
    color: #e9f1f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.db-btn.normal { border-color: #4cc9f0; background: rgba(76, 201, 240, .14); }
.db-btn.premium { border-color: #ffd166; background: rgba(255, 209, 102, .12); }
.db-name { font-size: 13px; font-weight: bold; }
.db-cost { font-size: 10px; color: #8fb3c9; }
.db-btn:disabled { opacity: .35; cursor: not-allowed; }
.db-btn:active:not(:disabled) { transform: scale(.95); }

.draw-choice {
    position: absolute;
    inset: 0;
    z-index: 96;
    background: rgba(8, 12, 17, .95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
}
.draw-choice.hidden { display: none; }
.dc-title { font-size: 15px; color: #ffd166; }
.dc-list { display: flex; gap: 12px; width: 100%; justify-content: center; }

/* 商城分组 */
.shop-section {
    grid-column: span 3;
    font-size: 12px;
    color: #4cc9f0;
    margin: 12px 2px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #2f4a5c;
}
.shop-item.is-owned { opacity: .65; }
.item-price { color: #ffd166; font-weight: bold; font-size: 12px; }

/* ==================== 1026.9 修订：品级 / 卡牌升星 / 四槽 ==================== */

/* 装备品级角标 */
.q-tag {
    font-size: 9px;
    border: 1px solid;
    border-radius: 6px;
    padding: 0 4px;
    line-height: 1.4;
}
.shop-refresh { grid-column: span 3; text-align: center; margin: 4px 0 6px; }
.shop-refresh button {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    background: #172733;
    border: 1px solid #4cc9f0;
    color: #4cc9f0;
    font-size: 12px;
    cursor: pointer;
}

/* 出战阵容提示 */
.deck-info {
    font-size: 11px;
    color: #8fb3c9;
    text-align: center;
    margin-bottom: 10px;
}
.bag-item.in-deck { border-color: #52b788 !important; box-shadow: 0 0 10px rgba(82,183,136,.35); }
.deck-flag {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 9px;
    background: #2d6a4f;
    color: #fff;
    border-radius: 4px;
    padding: 0 3px;
}
.bag-item { position: relative; }

/* 卡牌详情 */
.cd-body { text-align: center; margin-bottom: 16px; }
.cd-icon { font-size: 52px; line-height: 1.1; }
.cd-stars { color: #ffd166; font-size: 18px; letter-spacing: 3px; margin: 6px 0 10px; }
.cd-desc { font-size: 13px; color: #e9f1f7; line-height: 1.6; margin-bottom: 12px; }
.cd-q {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: -4px 0 10px;
}
.cd-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8fb3c9;
    padding: 4px 0;
    border-top: 1px solid #22384a;
}
.cd-line b { color: #ffd166; }
.cd-hint { font-size: 11px; color: #55697a; margin-top: 8px; }

/* 出战面板 */
.deck-panel {
    margin: 10px 12px 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(23, 39, 51, .75);
    border: 1px solid #2f4a5c;
}
.dpk-head { font-size: 13px; color: #e9f1f7; font-weight: bold; margin-bottom: 8px; }
.dpk-head span { font-size: 11px; color: #8fb3c9; font-weight: normal; }
.dpk-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.dq-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid;
    background: rgba(255, 255, 255, .04);
}
.dpk-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 20px 5px 8px;
    border-radius: 9px;
    border: 1px solid;
    background: rgba(10, 16, 22, .7);
    color: #e9f1f7;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}
.deck-card:active { transform: scale(.96); }
.dk-ic { font-size: 14px; }
.dk-x {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    line-height: 13px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 11px;
    color: #ff8fa3;
}
.deck-empty { font-size: 11px; color: #55697a; text-align: center; padding: 6px 0; }
.cd-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.cd-btn {
    flex: 1;
    padding: 11px;
    border-radius: 9px;
    background: #1e3544;
    border: 1px solid #35566b;
    color: #e9f1f7;
    font-size: 13px;
    cursor: pointer;
}
.cd-btn.on { border-color: #52b788; color: #52b788; }
.cd-btn.star { background: #2d6a4f; border-color: #52b788; color: #fff; }
.cd-btn:disabled { opacity: .4; cursor: not-allowed; }

/* 套装说明 / 空列表 */
.loadout-set {
    text-align: center;
    font-size: 11px;
    color: #8fb3c9;
    margin: -6px 0 14px;
}
.picker-empty {
    text-align: center;
    font-size: 12px;
    color: #8fb3c9;
    line-height: 2;
    padding: 18px 0;
}
.picker-empty span { font-size: 11px; color: #55697a; }

/* ==================== 顶栏可点 + 出战舞台 ==================== */

.top-bar .tb-item {
    background: none;
    border: none;
    padding: 2px 0;
    color: #e9f1f7;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.top-bar .tb-item:active { opacity: .55; }
.tb-item-sm { font-size: 11px; color: #8fb3c9; }

/* 中间人物 + 四周装备 */
.loadout-stage {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ".    pen    ."
        "cup  avatar ear"
        ".    watch  .";
    gap: 8px;
    margin-bottom: 10px;
}
.ls-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 3px;
    border-radius: 12px;
    background: #1e3544;
    border: 1px dashed #35566b;
    color: #e9f1f7;
    font-family: inherit;
    cursor: pointer;
}
.ls-slot.has-item {
    border-style: solid;
    background: linear-gradient(160deg, #2c2513, #1e3544);
}
.slot-pen { grid-area: pen; }
.slot-cup { grid-area: cup; }
.slot-watch { grid-area: watch; }
.slot-ear { grid-area: ear; }
.ls-icon { font-size: 20px; line-height: 1.1; }
.ls-label { font-size: 9px; color: #8fb3c9; }
.ls-name { font-size: 10px; font-weight: bold; text-align: center; line-height: 1.2; }

.ls-avatar {
    grid-area: avatar;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(160deg, #22303c, #172733);
    border: 1px solid #2f4a5c;
    min-height: 120px;
}
.ls-avatar span { font-size: 44px; line-height: 1; }
.ls-avatar em { font-style: normal; font-size: 9px; color: #55697a; margin-top: 6px; }

/* 底部消耗品格 */
.cons-row { display: flex; gap: 8px; margin-bottom: 14px; }
.cons-slot {
    flex: 1;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 10px;
    border: 1px dashed #2f4a5c;
    background: rgba(23, 39, 51, .55);
    color: #55697a;
    font-size: 13px;
}
.cons-slot span { font-size: 9px; }

/* ==================== 1026.10：学习模块 / 卡牌特性 ==================== */

.module-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.module-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    border-radius: 12px;
    background: #1e3544;
    border: 1px solid #35566b;
    color: #e9f1f7;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.module-card:active { transform: scale(.98); }
.module-card.empty { opacity: .5; }
.md-icon { font-size: 26px; }
.md-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.md-main b { font-size: 14px; }
.md-main i { font-style: normal; font-size: 11px; color: #8fb3c9; }
.md-count { font-size: 11px; color: #ffd166; }

/* 卡牌特性块 */
.cd-trait {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(23, 39, 51, .8);
    border: 1px dashed #35566b;
    text-align: left;
}
.cd-trait.on {
    border-style: solid;
    border-color: #ffd166;
    background: rgba(255, 209, 102, .10);
}
.cd-trait b { display: block; font-size: 12px; color: #8fb3c9; margin-bottom: 3px; }
.cd-trait.on b { color: #ffd166; }
.cd-trait span { font-size: 12px; color: #e9f1f7; line-height: 1.5; }

/* 补给面板底部按钮 */
.chest-actions { display: flex; gap: 10px; align-items: center; }
.reroll-btn {
    padding: 10px 18px;
    border-radius: 8px;
    background: rgba(255, 209, 102, .14);
    border: 1px solid #ffd166;
    color: #ffd166;
    font-size: 13px;
    cursor: pointer;
}
.reroll-btn.hidden { display: none; }

/* ==================== 1026.11：新手引导 / 分享 / 解锁锁 ==================== */

.tut-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 132px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(23, 39, 51, .97);
    border: 1px solid #ffd166;
    color: #e9f1f7;
    font-size: 12px;
    line-height: 1.5;
    z-index: 950;
    /* 提示条只是说明文字，没有任何可点元素；
       设成不接收点击，就永远不可能挡住下面按钮（如「开始考试」）的点击。 */
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.tut-bar.hidden { display: none; }
.tut-icon { font-size: 16px; }
.tut-text { flex: 1; }

.tut-body { font-size: 13px; line-height: 1.7; color: #e9f1f7; margin-bottom: 16px; }
.tut-body p { margin-bottom: 8px; }
.tut-body b { color: #ffd166; }

.share-box {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 10px;
    background: #1e3544;
    border: 1px solid #35566b;
}
.share-title { font-size: 13px; color: #4cc9f0; margin-bottom: 4px; }
.share-desc { font-size: 11px; color: #8fb3c9; line-height: 1.5; margin-bottom: 8px; }
.share-btn {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    background: #2d6a4f;
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.share-btn:disabled { background: #35566b; opacity: .6; cursor: not-allowed; }

.study-lock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(13, 19, 26, .84);
    color: #ffd166;
    font-size: 14px;
    text-align: center;
    z-index: 5;
}
.study-lock span { font-size: 11px; color: #8fb3c9; }
.study-lock.hidden { display: none; }

.big-action:disabled { opacity: .45; cursor: not-allowed; }

/* 覆盖式引导：四块遮罩挖出一个洞 + 高亮框 */
.tut-block {
    position: fixed;
    z-index: 900;
    background: rgba(6, 10, 14, .78);
}
.tut-block.hidden { display: none; }

.tut-ring {
    position: fixed;
    z-index: 901;
    border: 2px solid #ffd166;
    border-radius: 12px;
    pointer-events: none;
    animation: ringPulse 1s ease-in-out infinite;
}
.tut-ring.hidden { display: none; }
@keyframes ringPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 209, 102, .55), inset 0 0 10px rgba(255, 209, 102, .2); }
    50%      { box-shadow: 0 0 26px rgba(255, 209, 102, 1), inset 0 0 22px rgba(255, 209, 102, .45); }
}

/* 覆盖式引导：遮罩 + 只留一个导航可点 */
.tut-mask {
    position: absolute;
    inset: 0;
    background: rgba(6, 10, 14, .72);
    z-index: 150;
}
.tut-mask.hidden { display: none; }

#app.tut-locking #bottomNav { z-index: 165; }
#app.tut-locking .nav-btn:not(.tut-focus) { opacity: .2; pointer-events: none; }
.nav-btn.tut-focus {
    color: #ffd166;
    box-shadow: 0 0 0 2px #ffd166 inset, 0 0 18px rgba(255, 209, 102, .7);
    border-radius: 8px;
    animation: navPulse 1s ease-in-out infinite;
}
.nav-btn.center.tut-focus { background: #40916c; }
@keyframes navPulse {
    0%, 100% { box-shadow: 0 0 0 2px #ffd166 inset, 0 0 10px rgba(255, 209, 102, .4); }
    50%      { box-shadow: 0 0 0 2px #ffd166 inset, 0 0 24px rgba(255, 209, 102, .95); }
}

/* 顶栏分享按钮 */
.tb-actions { display: flex; align-items: center; gap: 6px; }
.share-chip {
    padding: 4px 9px;
    border-radius: 8px;
    border: 1px solid #ffd166;
    background: linear-gradient(140deg, #ffb703, #e76f51);
    color: #1a1208;
    font-size: 11px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    animation: shareGlow 1.4s ease-in-out infinite;
}
.share-chip:active { transform: scale(.95); }
.share-chip.done,
.share-chip:disabled {
    background: #35566b;
    border-color: #35566b;
    color: #8fb3c9;
    animation: none;
    cursor: default;
}
@keyframes shareGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 183, 3, 0); transform: scale(1); }
    50%      { box-shadow: 0 0 14px rgba(255, 183, 3, .9); transform: scale(1.06); }
}

/* 背包页底部：存档管理 */
.save-box {
    margin: 18px 16px 24px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(23, 39, 51, .6);
    border: 1px solid #22384a;
    text-align: center;
}
.save-line {
    font-size: 11px;
    color: #8fb3c9;
    margin-bottom: 10px;
}
.save-line b { color: #ffd166; font-weight: normal; }
.save-box .reset-btn { margin: 6px auto; }
.reset-btn.old { border-color: #2f4a5c; color: #7d93a5; }
/* ============================================================
 * 美术皮肤层 · 1026.14 —— 「木质绘本 × 圆润拟物」
 * 定位：只改视觉（配色 / 材质 / 按钮手感 / 图标），不动布局与功能。
 * 放在文件末尾，靠层叠覆盖旧版深蓝配色。
 * ------------------------------------------------------------
 * 素材：assets/bg-app.jpg（主界面底） bg-battle.jpg（战斗底）
 *       bg-study.jpg（自习室底） ribbon.png（缎带标题）
 *       icon-gold / star / pass / ink / ticket（货币与道具）
 * ============================================================ */
:root {
    --wood-dark: #5A3413;
    --wood: #8B5A2B;
    --wood-mid: #A9713B;
    --wood-light: #C98F4E;
    --paper: #FFF9EC;
    --paper-2: #FFEBC4;
    --ink: #4A2E1B;
    --ink-soft: #8A6A4A;
    --gold: #FFC93C;
    --gold-deep: #E8A317;
    --gold-dark: #B57A1E;
    --green: #7BC950;
    --green-dark: #3F7A22;
    --blue: #4FA8E0;
    --blue-dark: #21689E;
    --red: #E8543F;
    --red-dark: #8F2418;
    --q-gold: #FFB300;
    --q-purple: #A66BE0;
    --q-blue: #3E9BE8;
    --q-green: #57C46C;
    --q-white: #C9CFD8;
}

/* ---------- 全局底色：书房场景 + 奶油纱，保证文字可读 ---------- */
body { background: #3A2412; color: var(--ink); }
#app {
    background-image:
        linear-gradient(180deg, rgba(255,249,236,.62) 0%, rgba(255,240,210,.42) 45%, rgba(255,235,196,.58) 100%),
        url('assets/bg-app.jpg');
    background-size: cover, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}

/* ---------- 顶部栏：木质条 + 纸片货币 ---------- */
.top-bar {
    background: linear-gradient(180deg, #C98F4E 0%, #A9713B 55%, #8B5A2B 100%);
    border-bottom: 4px solid var(--wood-dark);
    box-shadow: 0 4px 0 rgba(90,52,19,.35);
    padding: 9px 8px;
}
#app .tb-item {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 2px solid var(--wood-dark);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 900;
    box-shadow: 0 3px 0 var(--wood-mid);
    padding: 5px 12px 5px 6px;
    text-shadow: none;
}
#app .tb-item:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-mid); }
#app .top-bar span { color: var(--wood-dark); }
#app .tb-sub { color: var(--ink-soft); }
#app .tb-item-sm { font-size: 11px; padding: 4px 9px 4px 5px; }
.tb-ico { width: 20px; height: 20px; vertical-align: -5px; margin-right: 2px; }
.tb-ico-sm { width: 15px; height: 15px; vertical-align: -3px; margin-right: 1px; }
#app .share-chip {
    background: linear-gradient(180deg, #A9E184, #5AA832);
    border: 2px solid var(--wood-dark);
    border-radius: 999px;
    color: #23390F; font-weight: 900;
    box-shadow: 0 3px 0 var(--green-dark);
}
#app .task-btn {
    background: linear-gradient(180deg, #9AD4F5, #2F86C4);
    border: 2px solid var(--wood-dark);
    border-radius: 999px;
    color: #10324F; font-weight: 900;
    box-shadow: 0 3px 0 var(--blue-dark);
}

/* ---------- 页面标题：缎带横幅 ---------- */
#app h2 {
    background-image: url('assets/ribbon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 54px;
    color: #FFF6DC;
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: 0 2px 0 rgba(0,0,0,.5);
    padding: 15px 0 19px;
    margin-bottom: 16px;
}
#app .page-tip { color: var(--ink-soft); font-weight: 700; }

/* ---------- 通用按钮：圆润拟物，按下去有实感 ---------- */
#app button {
    border-radius: 999px;
    border: 3px solid var(--wood-dark);
    background: linear-gradient(180deg, #FFE79B 0%, #FFC93C 48%, #E8A317 100%);
    color: #5A3413;
    font-weight: 900;
    font-family: inherit;
    box-shadow: 0 4px 0 var(--gold-dark), 0 6px 12px rgba(0,0,0,.20), inset 0 2px 0 rgba(255,255,255,.55);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    transition: transform .06s, box-shadow .06s;
}
#app button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--gold-dark), inset 0 2px 0 rgba(255,255,255,.55);
}
#app button:disabled {
    background: linear-gradient(180deg, #E4DCCB, #CFC4AE);
    color: #9C9080;
    border-color: #8B7E6B;
    box-shadow: 0 3px 0 #8B7E6B;
    text-shadow: none;
}
/* index.html 里有行内 style 写死的颜色，只能用属性选择器 + !important 顶掉。
   按原来的语义分色：绿色=主操作，橙色=强调，深色=取消/次要。 */
#app button[style*="2d6a4f"] {
    background: linear-gradient(180deg, #A9E184, #5AA832) !important;
    color: #23390F !important;
    border-color: var(--wood-dark) !important;
}
#app button[style*="e76f51"] {
    background: linear-gradient(180deg, #FF8C7A, #C23A28) !important;
    color: #FFF0E4 !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.35) !important;
    border-color: var(--wood-dark) !important;
}
#app button[style*="172733"] {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4) !important;
    color: var(--ink) !important;
    border: 2px solid var(--wood-mid) !important;
    box-shadow: 0 3px 0 var(--wood-mid) !important;
    text-shadow: none !important;
}
#app button[style*="457b9d"] {
    background: linear-gradient(180deg, #9AD4F5, #2F86C4) !important;
    color: #10324F !important;
    border-color: var(--wood-dark) !important;
}

/* ---------- 祈福页签 ---------- */
#app .gacha-tabs button {
    border: 3px solid var(--wood-dark);
    border-radius: 999px;
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    color: var(--ink-soft);
    font-weight: 900;
    box-shadow: 0 3px 0 var(--wood-mid);
}
#app .gacha-tabs button.active {
    background: linear-gradient(180deg, #FFE08A, #E8A317);
    color: #5A3413;
    border-color: var(--wood-dark);
    box-shadow: 0 3px 0 var(--gold-dark);
}

/* ---------- 底部导航 ---------- */
#app #bottomNav {
    background: linear-gradient(180deg, #C98F4E, #8B5A2B);
    border-top: 4px solid var(--wood-dark);
    box-shadow: 0 -4px 0 rgba(90,52,19,.30);
}
#app .nav-btn {
    color: #FFF3D8;
    font-weight: 900;
    border-radius: 14px;
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
#app .nav-btn.active {
    color: #FFE08A;
    background: linear-gradient(180deg, #A9713B, #7A4A22);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(255,224,138,.30);
}
#app .nav-btn.center.active {
    background: linear-gradient(180deg, #FFE08A, #E8A317);
    color: #5A3413;
    text-shadow: none;
}

/* ---------- 弹窗：木框 + 纸卡 ---------- */
#app .modal { background: rgba(58,36,18,.74); }
#app .modal-content {
    background: linear-gradient(180deg, #FFFDF5 0%, #FFF9EC 55%, #FFEBC4 100%);
    border: 5px solid var(--wood-mid);
    border-radius: 20px;
    color: var(--ink);
    box-shadow: 0 8px 0 rgba(90,52,19,.45), 0 14px 30px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.85);
}
#app .modal-content h3 {
    background-image: url('assets/ribbon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 50px;
    color: #FFF6DC;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 2px 0 rgba(0,0,0,.5);
    padding: 13px 0 15px;
    margin: -4px -6px 14px;
}
#app .modal-content p { color: var(--ink-soft); }

/* ---------- 各宫格：纸卡 + 木边 ---------- */
#app #level-grid > *,
#app .bag-grid > *,
#app .shop-grid > *,
#app .gacha-grid > *,
#app .pet-list > *,
#app .deck-panel {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-mid);
    border-radius: 14px;
    color: var(--ink);
    box-shadow: 0 4px 0 rgba(90,52,19,.25);
}

/* ---------- 自习室两个大按钮 ---------- */
#app .big-action {
    border: 4px solid var(--wood-dark);
    border-radius: 20px;
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    color: var(--ink);
    box-shadow: 0 6px 0 var(--wood-mid), 0 10px 18px rgba(0,0,0,.18);
}
#app .big-action .ba-label { color: var(--ink); font-weight: 900; }
#app .big-action .ba-sub { color: var(--ink-soft); }

/* ---------- 自习室场景 ---------- */
#app .room-bg {
    background-image: url('assets/bg-study.jpg');
    background-size: cover;
    background-position: center;
    opacity: .95;
}

/* ---------- 战斗页：考场场景 ---------- */
#app #battle-view {
    background-image: url('assets/bg-battle.jpg');
    background-size: cover;
    background-position: center top;
}
#app #battle-canvas { background: transparent; }
#app .battle-top { text-shadow: 0 2px 4px rgba(0,0,0,.6); }
#app .give-up-btn,
#app .quit-btn {
    background: linear-gradient(180deg, #FF8C7A, #C23A28);
    color: #FFF0E4;
    border: 3px solid var(--wood-dark);
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 4px 0 var(--red-dark);
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* ---------- 押题条 ---------- */
#app .draw-bar {
    background: linear-gradient(180deg, #C98F4E, #8B5A2B);
    border-top: 4px solid var(--wood-dark);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 0 rgba(90,52,19,.30);
}
#app .db-ink {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 2px solid var(--wood-dark);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 900;
    box-shadow: 0 3px 0 var(--wood-mid);
}
#app .db-btn {
    border: 3px solid var(--wood-dark);
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 4px 0 var(--gold-dark), inset 0 2px 0 rgba(255,255,255,.55);
}
#app .db-btn.normal {
    background: linear-gradient(180deg, #FFE79B, #FFC93C);
    color: #5A3413;
}
#app .db-btn.premium {
    background: linear-gradient(180deg, #E9D3FF, #B98BF0);
    color: #2A1240;
    box-shadow: 0 4px 0 #5B3A9A, inset 0 2px 0 rgba(255,255,255,.5);
}

/* ---------- 轻提示 ---------- */
#app .toast {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-mid);
    border-radius: 16px;
    color: var(--ink);
    font-weight: 900;
    box-shadow: 0 6px 0 rgba(90,52,19,.35), 0 10px 22px rgba(0,0,0,.25);
}

/* ---------- 背包页存档框 ---------- */
#app .save-box {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-mid);
    border-radius: 16px;
    color: var(--ink-soft);
}
#app .save-line b { color: var(--wood-dark); }

/* ============================================================
 * 美术皮肤层 v2 · 反馈修订（文字可读性 + 尺寸 + 特效）
 * ============================================================ */

/* ---------- 1) 缎带标题：改纯 CSS 横幅，宽度随文字自适应 ----------
   原来用 ribbon.png 固定尺寸，长标题（如「1-1 考前准备」）会溢出包不住。
   现在用 clip-path 做燕尾，盒子宽度 = 文字宽度 + padding，永远贴合。 */
#app h2,
#app .modal-content h3 {
    width: fit-content;
    max-width: 92%;
    margin: 14px auto 16px;
    padding: 12px 34px;
    background: linear-gradient(180deg, #D9483A 0%, #B32E22 55%, #9A2519 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #FFF6DC;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.35;
    text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 10px rgba(255,200,120,.40);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
    box-shadow: inset 0 0 0 3px rgba(255,215,120,.50);
    filter: drop-shadow(0 4px 0 #6E1B11);
}
#app .modal-content h3 { font-size: 19px; letter-spacing: 2px; margin: -6px auto 14px; }

/* ---------- 2) 答题页：原来写死黑底，深色文字压黑底直接看不见 ---------- */
#app #quiz-view {
    background-color: #FFF6E2;
    background-image:
        linear-gradient(180deg, rgba(255,249,236,.80), rgba(255,235,196,.68)),
        url('assets/bg-app.jpg');
    background-size: cover, cover;
    background-position: center top, center top;
}
#app .question {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 4px solid var(--wood-mid);
    border-radius: 16px;
    padding: 16px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.75;
    box-shadow: 0 5px 0 rgba(90,52,19,.28);
}
#app .options button {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-mid);
    border-radius: 14px;
    color: var(--ink);
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 0 rgba(90,52,19,.25);
}
#app .options button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(90,52,19,.25); }
#app .progress { color: var(--wood-dark); font-weight: 900; font-size: 14px; }
#app .feedback { color: var(--wood-dark); font-weight: 900; }
#app #show-explanation-btn { border-radius: 999px; border: 2px solid var(--wood-dark); font-weight: 900; }

/* ---------- 3) 答题道具：纸卡底 + 数量加粗放大 ---------- */
#app .tool-btn {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 2px solid var(--wood-mid);
    border-radius: 12px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 3px 0 rgba(90,52,19,.25);
}
#app .tool-btn b { color: var(--wood-dark); font-size: 15px; font-weight: 900; }
#app .tool-btn .tool-icon { font-size: 18px; }

/* ---------- 4) 底部导航：自习室是核心入口，图标明显大一圈 ---------- */
#app .nav-btn .icon { font-size: 18px; }
#app .nav-btn.center { margin: 2px 7px 4px; font-size: 12px; border-radius: 16px; }
#app .nav-btn.center .icon {
    font-size: 32px;
    display: block;
    line-height: 1.05;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.28));
}

/* ---------- 5) 设备节点：去掉 emoji 小图标补丁，改压在场景上的艺术字 ---------- */
#app .device-node { background: none; border: none; box-shadow: none; padding: 0; }
#app .device-node .d-icon { display: none; }
#app .device-node .d-name {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #FFF7DC;
    text-shadow:
        0 2px 0 #6B1F12, 2px 0 0 #6B1F12, -2px 0 0 #6B1F12,
        0 -2px 0 #6B1F12, 0 4px 10px rgba(0,0,0,.55);
    animation: devPulse 2.4s ease-in-out infinite;
}
#app .device-node .d-star {
    display: inline-block;
    margin-left: 5px;
    font-size: 15px;
    color: #FFD766;
    text-shadow: 0 2px 0 #6B1F12, 0 0 8px rgba(255,200,80,.85);
}
@keyframes devPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.06); filter: brightness(1.18); }
}

/* ---------- 6) 考前准备槽位：字号整体放大（原来标签 10px 比「空」还小） ---------- */
#app .loadout-slot,
#app .loadout-stage > * {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-mid);
    border-radius: 14px;
    color: var(--ink);
    padding: 11px 4px;
}
#app .loadout-slot.has-item {
    border-color: var(--gold-deep);
    background: linear-gradient(160deg, #FFF3C9, #FFE0A0);
}
#app .ls-icon  { font-size: 26px; }
#app .ls-label { font-size: 14px; font-weight: 900; color: var(--wood-dark); }
#app .ls-name  { font-size: 15px; font-weight: 900; } /* 颜色交给行内的 deep 品质色 */
#app .ls-desc  { font-size: 11px; font-weight: 700; color: var(--ink-soft); }

/* ---------- 7) 贪分面板：字数太小，整体放大 ---------- */
#app .chest-panel {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 4px solid var(--wood-mid);
    border-radius: 18px;
    box-shadow: 0 8px 0 rgba(90,52,19,.40);
}
#app .gf-title   { font-size: 27px; color: var(--wood-dark); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
#app .chest-round{ font-size: 15px; font-weight: 900; color: var(--wood-dark); }
#app .chest-tip  { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
#app .cr-name    { font-size: 18px; font-weight: 900; color: var(--ink); }
#app .cr-result  { font-size: 19px; font-weight: 900; color: var(--wood-dark); }
#app .run-buffs > * { font-size: 13px; font-weight: 900; color: var(--ink); }
#app .run-buffs  { color: var(--ink-soft); font-weight: 800; }

/* ---------- 8) 商城：分类标题原来像小宋体，改成木质横条 ---------- */
#app .shop-section {
    grid-column: 1 / -1;
    font-size: 17px;
    font-weight: 900;
    color: #FFF6DC;
    letter-spacing: 3px;
    text-align: center;
    padding: 9px 0 10px;
    margin: 8px 0 2px;
    background: linear-gradient(180deg, #C98F4E, #8B5A2B);
    border: 3px solid var(--wood-dark);
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(90,52,19,.35);
    text-shadow: 0 2px 0 rgba(0,0,0,.40);
}
#app .shop-item { color: var(--ink); }
#app .shop-item .item-name { font-size: 14px !important; font-weight: 900; color: var(--ink); }
#app .item-sub, #app .item-price { color: var(--ink-soft); font-weight: 800; }

/* ---------- 9) 抽到 SSR：单独大卡 + 放射光 + 粒子，点任意处继续 ---------- */
.ssr-spotlight {
    position: absolute; inset: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(255,209,102,.35) 0%, rgba(58,36,18,.90) 70%);
    cursor: pointer; opacity: 0; transition: opacity .18s; overflow: hidden;
}
.ssr-spotlight.on { opacity: 1; }
.ssr-spotlight .ss-rays {
    position: absolute; width: 380px; height: 380px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(255,209,102,.40) 0deg 7deg, rgba(255,209,102,0) 7deg 22deg);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.95) 30%, transparent 72%);
            mask-image: radial-gradient(circle, rgba(0,0,0,.95) 30%, transparent 72%);
    animation: ssSpin 7s linear infinite;
}
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ssr-spotlight .ss-glow {
    position: absolute; width: 250px; height: 250px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,190,.95), rgba(255,209,102,0) 70%);
    animation: ssBreath 1.6s ease-in-out infinite;
}
@keyframes ssBreath {
    0%, 100% { transform: scale(.90); opacity: .75; }
    50%      { transform: scale(1.12); opacity: 1; }
}
.ssr-spotlight .ss-card {
    position: relative; z-index: 2;
    width: 210px; padding: 24px 16px 20px; text-align: center;
    background: linear-gradient(160deg, #FFF3C9 0%, #FFD766 55%, #E8A317 100%);
    border: 5px solid var(--wood-dark);
    border-radius: 24px;
    box-shadow: 0 12px 0 rgba(90,52,19,.55), 0 0 70px rgba(255,209,102,.95);
    transform: scale(.25); opacity: 0;
    animation: ssPop .55s cubic-bezier(.2,1.5,.4,1) .05s forwards;
}
@keyframes ssPop { to { transform: scale(1); opacity: 1; } }
.ssr-spotlight .ss-card .gc-icon { font-size: 66px; line-height: 1.1; }
.ssr-spotlight .ss-card .gc-name { font-size: 22px; font-weight: 900; color: var(--wood-dark); }
.ssr-spotlight .ss-card .gc-tag  { font-size: 13px; font-weight: 800; color: var(--ink-soft); margin-top: 4px; }
.ssr-spotlight .ss-badge {
    position: relative; z-index: 2; margin-top: 16px;
    padding: 5px 22px; border-radius: 999px;
    background: linear-gradient(180deg, #FF8C7A, #C23A28);
    border: 3px solid var(--wood-dark);
    color: #FFF0E4; font-weight: 900; font-size: 18px; letter-spacing: 3px;
    box-shadow: 0 4px 0 var(--red-dark);
}
.ssr-spotlight .ss-tip {
    position: relative; z-index: 2; margin-top: 22px;
    font-size: 13px; font-weight: 800; color: #FFE9BE;
    text-shadow: 0 2px 4px rgba(0,0,0,.6);
    animation: ssBlink 1.4s ease-in-out infinite;
}
@keyframes ssBlink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- 10) 其余浅色文字统一压深，保证对比度 ---------- */
#app .quiz-pass-info,
#app .loadout-sub,
#app .loadout-set,
#app .picker-empty,
#app #gacha-pity-text { color: var(--ink-soft); font-weight: 700; }
#app .gacha-draw-btns button { font-weight: 900; }

/* 顶栏两行都允许换行，数字再长也不会把分享/任务挤出去 */
#app .top-bar .tb-row { flex-wrap: wrap; gap: 6px; row-gap: 5px; }
#app .top-bar .tb-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* 自习室背景铺满（不用 cover，避免裁图导致艺术字对不上物件位置） */
#app .room-bg { background-size: 100% 100%; opacity: 1; }
/* 艺术字以物件为中心对齐 */
#app .device-node { transform: translate(-50%, -50%); }
#app .device-node:active { transform: translate(-50%, -50%) scale(0.94); }

/* ============================================================
 * 美术皮肤层 v3 · 品质用渐变说话，效果文字放大加深
 * 原则：底色已经说明品质，就不再用文字写「绿卡C」占位名；
 *      所有「效果/描述」类小灰字统一放大到 14px 并压深。
 * ============================================================ */

/* ---------- 学习模块：小蓝字和题数加深加大 ---------- */
#app .module-card {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-dark);
    border-radius: 16px;
    box-shadow: 0 5px 0 rgba(90,52,19,.32);
}
#app .module-card .md-main b { font-size: 18px; font-weight: 900; color: var(--wood-dark); }
#app .module-card .md-main i {
    font-size: 14px; font-weight: 800; font-style: normal; color: var(--ink);
}
#app .module-card .md-count { font-size: 15px; font-weight: 900; color: var(--wood-dark); }

/* ---------- 押题二选一：整块按品质渐变，不再写「绿卡C」 ---------- */
#app .draw-card {
    border: 4px solid var(--wood-dark);
    border-radius: 18px;
    box-shadow: 0 6px 0 rgba(90,52,19,.38);
    overflow: hidden;
}
#app .draw-card.q-gold   { background: linear-gradient(165deg, #FFF0BE 0%, #FFD766 55%, #E8A317 100%); }
#app .draw-card.q-purple { background: linear-gradient(165deg, #EEDCFF 0%, #B98BF0 55%, #7B52C9 100%); }
#app .draw-card.q-blue   { background: linear-gradient(165deg, #DCECFF 0%, #6FBBF5 55%, #2F86C4 100%); }
#app .draw-card.q-green  { background: linear-gradient(165deg, #DDF5E2 0%, #7ED093 55%, #3F9E52 100%); }
#app .draw-card.q-white  { background: linear-gradient(165deg, #F6F8FC 0%, #D3DAE4 55%, #A9B2C0 100%); }

/* 品质名（绿卡C 之类占位名）交给渐变表达，这里隐藏；以后换成真角色名再放出来 */
#app .draw-card .dc-name { display: none; }

#app .draw-card .dc-q {
    font-size: 15px; font-weight: 900; letter-spacing: 2px;
    color: #FFF8E0;
    text-shadow: 0 2px 0 rgba(90,52,19,.8), 0 0 8px rgba(0,0,0,.35);
}
#app .draw-card .dc-icon { font-size: 40px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
#app .draw-card .dc-desc {
    font-size: 15px; font-weight: 900; line-height: 1.5; text-align: center;
    color: #3A2208;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
/* 紫 / 蓝 渐变偏深，改用白字 + 暗描边 */
#app .draw-card.q-purple .dc-desc,
#app .draw-card.q-blue .dc-desc {
    color: #FFFFFF;
    text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.3);
}
#app .draw-card .dc-pick {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-dark);
    border-radius: 999px;
    color: var(--wood-dark);
    font-weight: 900; font-size: 14px;
    padding: 6px 0; margin-top: 8px;
    box-shadow: 0 3px 0 rgba(90,52,19,.42);
    text-shadow: none;
}
#app .dc-title {
    font-size: 17px; font-weight: 900; color: #FFF8E0;
    text-shadow: 0 2px 0 rgba(0,0,0,.55), 2px 0 0 rgba(0,0,0,.4), -2px 0 0 rgba(0,0,0,.4);
}

/* ---------- 贪分：增益紫 / 资源绿 / 风险橙 ---------- */
#app .chest-card {
    border: 4px solid var(--wood-dark);
    border-radius: 16px;
    box-shadow: 0 5px 0 rgba(90,52,19,.35);
    overflow: hidden;
}
#app .chest-card.kind-buff { background: linear-gradient(165deg, #EEDCFF 0%, #B98BF0 55%, #7B52C9 100%); }
#app .chest-card.kind-res  { background: linear-gradient(165deg, #DDF5E2 0%, #7ED093 55%, #3F9E52 100%); }
/* 高风险档单独走暖橙，和「稳」的绿区分开 */
#app .chest-card.tone-risk { background: linear-gradient(165deg, #FFE3CE 0%, #FFAE8C 55%, #E8703A 100%); }

#app .chest-card .chest-name {
    font-size: 16px; font-weight: 900; color: #3A2208;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
#app .chest-card .chest-desc {
    font-size: 14px; font-weight: 900; line-height: 1.5; text-align: center;
    color: #2A1806;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
#app .chest-card.kind-buff .chest-name,
#app .chest-card.kind-buff .chest-desc {
    color: #FFFFFF;
    text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.3);
}
#app .chest-card .chest-kind {
    font-size: 12px; font-weight: 900; letter-spacing: 1px;
    padding: 2px 12px; border-radius: 999px;
    border: 2px solid var(--wood-dark);
    background: rgba(255,253,245,.92);
    color: var(--wood-dark);
    text-shadow: none;
}
#app .chest-card .chest-icon { font-size: 32px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }

/* ---------- 装备选择列表：品质名用 deep 色，属性字加深 ---------- */
#app .picker-row {
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 3px solid var(--wood-mid);
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(90,52,19,.28);
}
#app .picker-row.equipped { border-color: var(--gold-deep); background: linear-gradient(160deg,#FFF3C9,#FFE0A0); }
#app .pr-main b { font-size: 15px; font-weight: 900; }
#app .pr-main i { font-size: 12px; font-weight: 800; font-style: normal; color: var(--ink); }
#app .pr-flag {
    font-size: 11px; font-weight: 900; color: #123A20;
    background: #7ED093; border: 2px solid var(--wood-dark);
    border-radius: 999px; padding: 2px 9px;
}

/* ============================================================
 * 美术皮肤层 v4 · 立绘替换 emoji
 * 有 img 的卡/宠物用立绘，没有的（蓝/绿/白占位卡）继续用 emoji。
 * 容器统一 flex 居中，避免 emoji 时代的 line-height 造成偏移。
 * ============================================================ */
.cico { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#app .gc-icon, #app .dc-icon, #app .cd-icon, #app .pc-icon,
#app .item-icon, #app #pet-detail-icon, #app .dk-ic {
    display: flex; align-items: center; justify-content: center;
}
#app .gc-icon .cico        { width: 58px; height: 58px; }
#app .dc-icon .cico        { width: 76px; height: 76px; }
#app .cd-icon .cico        { width: 92px; height: 92px; }
#app .pc-icon .cico        { width: 56px; height: 56px; }
#app .item-icon .cico      { width: 54px; height: 54px; }
#app #pet-detail-icon .cico{ width: 74px; height: 74px; }
#app .dk-ic .cico          { width: 28px; height: 28px; }

/* ---------- 卡牌详情：白字 / 浅金字压深加大 ---------- */
#app .cd-desc {
    font-size: 15px; font-weight: 900; line-height: 1.6;
    color: var(--ink);
    margin-bottom: 12px;
}
#app .cd-line { color: var(--ink-soft); font-weight: 800; }
#app .cd-line b { color: var(--wood-dark); font-weight: 900; }

/* ---------- v5：下导航换图标（自习室是核心入口，明显大一圈） ---------- */
#app .nav-btn img.nav-ico {
    display: block; margin: 0 auto 2px;
    width: 30px; height: 30px; object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.30));
}
#app .nav-btn.center img.nav-ico { width: 42px; height: 42px; margin-bottom: 1px; }

/* ============================================================
 * 新手引导皮肤适配（1026.2）
 * 原来的引导条是旧版深蓝底 + 白字，和暖木风格打架，这里整体重做。
 * ============================================================ */
#app .tut-bar {
    left: 12px;
    right: 12px;
    /* 下导航自习室图标放大到 42px 后导航条变高，这里跟着上移，避免压住 */
    bottom: 150px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFDF5, #FFEBC4);
    border: 4px solid var(--wood-mid);
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.55;
    box-shadow: 0 6px 0 rgba(90,52,19,.38), 0 10px 22px rgba(0,0,0,.28);
    text-shadow: none;
}
#app .tut-bar .tut-icon {
    font-size: 20px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.22));
}
/* 引导用的说明弹窗：标题也换成缎带自适应横幅，别再出现白字 */
#app #tut-modal .modal-content h3 {
    width: fit-content;
    max-width: 92%;
    margin: -6px auto 14px;
    padding: 12px 30px;
    background: linear-gradient(180deg, #D9483A 0%, #B32E22 55%, #9A2519 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg, #D9483A 0%, #B32E22 55%, #9A2519 100%);
    color: #FFF6DC;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 2px 0 rgba(0,0,0,.5);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
    box-shadow: inset 0 0 0 3px rgba(255,215,120,.5);
    filter: drop-shadow(0 4px 0 #6E1B11);
}

/* 引导遮罩/光环：从 fixed（视口坐标）改成 absolute（相对 #app）。
   #app 是 max-width:480 居中的，fixed + 视口坐标在宽屏下会和游戏区域错位；
   改成和 .tut-mask 同一个参照系后，任何窗口宽度都不会跑偏。 */
.tut-block { position: absolute; }
.tut-ring  { position: absolute; }

/* 引导提示条默认位置再往上抬一档，落到「消耗品格」那一带的高度。
   那一排永远是空的，提示条待在那儿既醒目又不会压住「开始考试」。
   （具体位置仍由 tutLockTo/showTutBar 动态算，这里只是兜底默认值） */
#app .tut-bar { bottom: 196px; }

/* 新手引导说明里的强调词：不用刺眼的金黄，改深红，压在奶油底上也清楚 */
#app #tut-modal .modal-content p b,
#app #tut-modal .tut-body b,
#app .tut-body b {
    color: #C23A28;
    font-weight: 900;
}