* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --paper: #fff8e2; --paper2: #f5e9c0;
    --bd: #8a5a2b; --bd-d: #6b4423; --bd-dd: #54371a;
    --tx: #5b3d16; --tx2: #8a6a3a;
    --gold: #ffcf24;
}
html, body { min-height: 100vh; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    color: var(--tx); font-weight: 600; background: #79c05a;
}

/* ===== 页面背景：草地 / 浅绿格纹 / 深绿格纹 / 天空渐变 ===== */
body.menuBody, body.playBody {
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 96px, transparent 96px 192px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 96px, transparent 96px 192px),
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.25), transparent 40%),
        linear-gradient(180deg, #82c65a, #5da23e 65%, #4f8f33);
    background-attachment: fixed;
}
body.codexBody {
    background:
        repeating-linear-gradient(0deg, transparent 0 44px, rgba(255,255,255,.5) 44px 46px),
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.5) 44px 46px),
        linear-gradient(180deg, #cfe8a8, #b3d683);
    background-attachment: fixed;
}
body.recipeBody, body.setBody {
    background:
        repeating-linear-gradient(0deg, transparent 0 44px, rgba(255,255,255,.05) 44px 46px),
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.05) 44px 46px),
        linear-gradient(180deg, #2f6b3a, #1b3f24);
    background-attachment: fixed;
}
body.saveBody {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.7) 0 26px, transparent 27px),
        radial-gradient(circle at 17% 15%, rgba(255,255,255,.7) 0 34px, transparent 35px),
        radial-gradient(circle at 86% 12%, rgba(255,255,255,.7) 0 22px, transparent 23px),
        radial-gradient(circle at 90% 9%, rgba(255,255,255,.7) 0 30px, transparent 31px),
        linear-gradient(180deg, #b9e093, #e2f2c6 55%, #f4fadd);
    background-attachment: fixed;
}

/* ===== 顶部木质标题栏 ===== */
header {
    display: flex; align-items: center; gap: 14px; padding: 8px 16px;
    background: linear-gradient(#7a4a20, #5a3414);
    border-bottom: 4px solid #3f2410; box-shadow: 0 3px 8px rgba(0,0,0,.3);
    position: sticky; top: 0; z-index: 40;
}
header .title { color: #ffe9b8; font-size: 18px; font-weight: 800; letter-spacing: 2px; text-shadow: 1px 2px 0 rgba(0,0,0,.4); }
header nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
header nav a {
    color: #ffe9b8; text-decoration: none; font-size: 13px; padding: 4px 12px;
    border-radius: 9px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,233,184,.35);
}
header nav a:hover { background: rgba(255,255,255,.28); }

/* ===== 木质按钮四色系 ===== */
.btnG, .btnY, .btnO, .btnB, .btnR {
    display: inline-block; border-radius: 11px; padding: 9px 22px;
    font-size: 15px; font-weight: 800; letter-spacing: 2px; cursor: pointer; text-decoration: none;
    color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); border: 2px solid;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 rgba(0,0,0,.28);
    transition: filter .1s;
}
.btnG { background: linear-gradient(#9ad455, #4c9a30); border-color: #2d6b1e; }
.btnY { background: linear-gradient(#ffdf70, #f0a72c); border-color: #b06f10; }
.btnO { background: linear-gradient(#f2cf8e, #d9a558); border-color: #a5741f; color: #5b3d16; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.btnB { background: linear-gradient(#7cc9ef, #3f96cc); border-color: #22709e; }
.btnR { background: linear-gradient(#e08a70, #c05a3a); border-color: #8a3a24; }
.btnG:hover, .btnY:hover, .btnO:hover, .btnB:hover, .btnR:hover { filter: brightness(1.08); }
.btnG:active, .btnY:active, .btnO:active, .btnB:active, .btnR:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.28); }
button.btnG, button.btnY, button.btnO, button.btnB, button.btnR { font-family: inherit; }

/* ===== 窗体：木质外框 + 标题条 ===== */
.gameWin {
    max-width: 1060px; margin: 14px auto; border: 4px solid var(--bd-dd);
    border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.35);
    background: var(--paper);
}
.winBar {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(#7a4a20, #5a3414);
    padding: 8px 14px; color: #ffe9b8; font-weight: 800; font-size: 17px; letter-spacing: 6px;
    text-shadow: 1px 2px 0 rgba(0,0,0,.4);
}
.winBar .menuIco { font-size: 16px; letter-spacing: 0; opacity: .9; }
.winBody { padding: 14px 16px 18px; }

/* ===== 通用芯片 ===== */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--paper); border: 2px solid var(--bd); border-radius: 10px;
    padding: 4px 12px; font-size: 13px; color: var(--tx); white-space: nowrap;
}
.chip b { color: #c96a10; }
.chip.onDark { background: rgba(255,248,226,.92); }

/* ===== 拨动开关（设置/菜单） ===== */
.tgl { position: relative; display: inline-block; width: 48px; height: 24px; flex: 0 0 auto; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.tgl i {
    position: absolute; inset: 0; border-radius: 14px; background: #b9c4b0;
    border: 2px solid #7d8f76; transition: .15s;
}
.tgl i::before {
    content: ""; position: absolute; top: 2px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: .15s;
}
.tgl input:checked + i { background: linear-gradient(#8fd05f, #3d8b2f); border-color: #2d6b1e; }
.tgl input:checked + i::before { left: 25px; }

/* ===== 对局页：顶部 HUD ===== */
#statBar { display: flex; gap: 8px; flex-wrap: wrap; max-width: 1140px; margin: 8px auto 0; padding: 0 14px; }
.statItem {
    background: rgba(28,56,22,.78); border: 2px solid rgba(255,233,184,.4);
    border-radius: 10px; padding: 4px 12px; font-size: 13px; color: #ffe9b8;
}
.statItem b { color: #ffdf70; }
.statItem.sun { background: rgba(96,62,10,.78); }
#battleInfo { max-width: 1140px; margin: 6px auto 0; padding: 0 16px; text-align: center; color: #ffe9b8; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#hint { max-width: 1140px; margin: 6px auto 0; padding: 0 16px; color: #fff8e2; font-size: 13px; min-height: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#keyHint { max-width: 1140px; margin: 0 auto; padding: 4px 16px 14px; color: rgba(255,248,226,.7); font-size: 12px; }

#topHud { display: flex; align-items: stretch; gap: 10px; padding: 10px 14px 0; max-width: 1140px; margin: 0 auto; }
#sunPanel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 86px;
    background: linear-gradient(#fff6d8, #f0dfa8); border: 3px solid var(--bd); border-radius: 12px;
    color: var(--tx); box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
#sunPanel .sunIcon { font-size: 22px; }
#sunPanel b { font-size: 18px; color: #c96a10; }
#topHud #plantBar { flex: 1; min-height: 92px; }
#plantBar {
    display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding: 8px;
    background: var(--paper); border: 3px solid var(--bd); border-radius: 12px;
    box-shadow: inset 0 2px 6px rgba(138,90,43,.25);
}

/* ===== 滚动条美化：横向细条（种子卡工具条 / 首页种子栏） ===== */
#plantBar::-webkit-scrollbar,
#homeSeeds::-webkit-scrollbar {
    height: 8px;
}

#plantBar::-webkit-scrollbar-track,
#homeSeeds::-webkit-scrollbar-track {
    background: rgba(138, 90, 43, .12);
    border-radius: 999px;
    margin: 0 6px;
}

#plantBar::-webkit-scrollbar-thumb,
#homeSeeds::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #c99a5a, #a8773a);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#plantBar::-webkit-scrollbar-thumb:hover,
#homeSeeds::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #a8773a, #8a5a2b);
    background-clip: padding-box;
}

/* Firefox */
#plantBar,
#homeSeeds {
    scrollbar-width: thin;
    scrollbar-color: #b08a4a transparent;
}
.plant-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 78px; padding: 6px 8px; border-radius: 10px; flex: 0 0 auto; user-select: none; cursor: pointer;
    background: linear-gradient(#fffdf0, #f3e3ae); border: 2px solid #b08a4a; color: var(--tx);
    touch-action: none;   /* 触屏拖拽种植时不触发页面滚动 */
}
.plant-item:hover { filter: brightness(1.04); }
.plant-item.active { outline: 3px solid #ffdf70; border-color: #c98a1e; background: linear-gradient(#fffbe6, #ffe9a8); }
.plant-item.disabled { filter: grayscale(.7); opacity: .55; cursor: default; }
.plant-item.poor { filter: grayscale(.85); opacity: .5; cursor: not-allowed; }
.plant-item.poor .cost { color: #c0392b; font-weight: 800; }
.plant-item .ico { font-size: 24px; }
.plant-item .nm { font-size: 12px; white-space: nowrap; }
.plant-item .cost { color: #c96a10; font-size: 12px; }
#topHud button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px;
    background: linear-gradient(#fff6d8, #f0dfa8); border: 2px solid var(--bd); border-radius: 12px;
    color: var(--tx); font-size: 20px; font-weight: 700; cursor: pointer; font-family: inherit;
}
#topHud button span { font-size: 11px; }
#topHud button:hover { filter: brightness(1.06); }
body.shoveling #shovelBtn { outline: 3px solid #ffdf70; background: linear-gradient(#ffe9a8, #f0c860); }
body.shoveling #game { cursor: crosshair; }

/* ===== 拖拽种植：跟随光标的种子幽灵卡 ===== */
body.dragPlant { cursor: grabbing; }
body.dragPlant #game { cursor: crosshair; }
.dragGhost {
    position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none;
    display: flex; align-items: center; gap: 6px; padding: 4px 10px;
    transform: translate(-50%, -130%);
    background: linear-gradient(#fffdf0, #f3e3ae); border: 2px solid #b08a4a; border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,.35); font-size: 12px; color: var(--tx); white-space: nowrap;
}
.dragGhost .gi { font-size: 22px; }
.dragGhost .gn { font-weight: 800; }
.dragGhost .gc { background: #ffedb0; border: 1px solid #d9b25a; border-radius: 8px; padding: 0 6px; color: #b06f10; font-weight: 800; }
.dragGhost.poor { border-color: #c0392b; box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(255,90,90,.45); }

main { display: flex; gap: 14px; padding: 12px 14px 6px; align-items: flex-start; max-width: 1140px; margin: 0 auto; }
#gameCol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#game {
    background: #1c4326; display: block; width: 100%; max-width: 900px; height: auto; touch-action: none;
    border: 6px solid #6b4423; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
#waveTrack { position: relative; height: 24px; background: rgba(20,35,15,.8); border: 2px solid rgba(255,233,184,.4); border-radius: 12px; overflow: hidden; }
#waveFill { height: 100%; width: 0; background: linear-gradient(90deg, #4c9a30, #9ad455); transition: width .5s; }
#waveText { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #ffe9b8; text-shadow: 0 1px 2px #000; }

/* 融合推荐面板（深绿半透明） */
#fusePanel {
    flex: 0 0 262px; align-self: flex-start; padding: 12px;
    background: rgba(24,52,26,.88); border: 3px solid rgba(255,233,184,.5); border-radius: 14px; color: #ffe9b8;
}
#fusePanel h4 { color: #ffdf70; letter-spacing: 2px; margin-bottom: 6px; font-size: 15px; }
#fusePanel .selRow { font-size: 13px; margin-bottom: 8px; }
#fusePanel .selRow b { color: #ffdf70; }
#fuseList { display: flex; flex-direction: column; gap: 6px; max-height: 330px; overflow-y: auto; }
.fuseItem {
    background: rgba(255,248,226,.94); color: var(--tx); border: 1px solid #b08a4a;
    border-radius: 9px; padding: 6px 8px; font-size: 12px; line-height: 1.5;
}
.fuseItem.link { cursor: pointer; border-color: #2d6b1e; box-shadow: 0 0 0 1px rgba(76,154,48,.4); }
.fuseItem.link:hover { background: #eaf6d8; }
.fuseItem b { display: block; color: #2d6b1e; }
.fuseBtns { display: flex; gap: 8px; margin-top: 10px; }
.fuseBtns button { flex: 1; font-family: inherit; padding: 8px 6px; }
.fuseTip { margin-top: 8px; font-size: 11px; color: rgba(255,233,184,.75); line-height: 1.6; }

/* ===== 游戏内菜单 / 弹窗 ===== */
#gameMenu { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10,25,8,.55); z-index: 50; }
.menuPanel {
    width: min(430px, 92vw); background: var(--paper); border: 4px solid var(--bd);
    border-radius: 18px; padding: 20px 24px 22px; color: var(--tx);
    box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.55);
}
.menuPanel h3 { text-align: center; letter-spacing: 10px; margin-bottom: 14px; color: var(--bd-d); font-size: 20px; }
.optRow { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.optRow label { flex: 0 0 96px; font-size: 14px; color: var(--tx); }
.optRow input[type=range] { flex: 1; accent-color: #4c9a30; }
.optRow input[type=checkbox] { width: 18px; height: 18px; accent-color: #4c9a30; }
.optRow b { width: 44px; text-align: right; color: #c96a10; }
.menuBtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.credits { margin-top: 14px; text-align: center; font-size: 12px; line-height: 1.8; color: var(--tx2); border-top: 2px dashed #d9c08a; padding-top: 10px; }
.modal { display: none; position: fixed; inset: 0; background: rgba(20,40,15,.55); z-index: 60; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modalBox {
    width: min(430px, 92vw); background: var(--paper); border: 4px solid var(--bd);
    border-radius: 16px; padding: 20px 22px; color: var(--tx); box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.modalBox h3 { text-align: center; letter-spacing: 8px; margin-bottom: 14px; color: var(--bd-d); }
.helpText { font-size: 13px; line-height: 1.9; font-weight: 500; }
.helpText b { color: #2d6b1e; }

/* ===== 图鉴 / 配方：奶油大面板 + 竖排标签 ===== */
.codexPage {
    max-width: 1080px; margin: 14px auto; background: var(--paper);
    border: 4px solid var(--bd); border-radius: 18px; padding: 16px 18px 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.55);
}
.codexHead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.codexHead h1 { font-size: 26px; color: #7a4a1f; letter-spacing: 6px; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.codexHead .sub { color: var(--tx2); font-size: 13px; }
#kw {
    flex: 1; min-width: 170px; max-width: 330px; padding: 8px 16px;
    border: 2px solid var(--bd); border-radius: 20px; background: #fffdf2;
    color: var(--tx); font-size: 13px; outline: none; font-family: inherit;
}
#kw:focus { border-color: #c98a1e; box-shadow: 0 0 0 3px rgba(255,207,36,.35); }
.seal {
    margin-left: auto; width: 34px; height: 34px; border-radius: 8px;
    background: linear-gradient(#e05540, #b02a18); border: 2px solid #7a180a;
    color: #ffe9b8; display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900; box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.codexCols { display: flex; gap: 16px; align-items: flex-start; }
.listSide { flex: 1; min-width: 0; }

.catTabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.catTabs .cat {
    padding: 9px 14px; border: 2px solid var(--bd); border-radius: 11px;
    background: linear-gradient(#fff6d8, #efd9a2); color: var(--tx);
    font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.catTabs .cat:hover { filter: brightness(1.05); }
.catTabs .cat.active {
    background: linear-gradient(#9ad455, #3d8b2f); border-color: #2d6b1e; color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.catTabs.v { flex-direction: column; flex: 0 0 132px; }
.catTabs.v .cat { text-align: left; }
.catTabs.bottom { justify-content: center; margin: 14px 0 0; }

/* ===== 图鉴：种子包卡片 ===== */
.packetGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; max-height: 58vh; overflow-y: auto; padding: 6px; }
.packet {
    background: linear-gradient(#fffdf0, #f5e9c0); border: 2px solid #c9a763; border-radius: 12px;
    padding: 10px 4px 8px; text-align: center; cursor: pointer; color: var(--tx);
}
.packet:hover { filter: brightness(1.04); }
.packet.sel { outline: 3px solid #ffdf70; border-color: #c98a1e; }
.packet.locked { filter: grayscale(1); opacity: .6; }
.packet.empty { grid-column: 1/-1; cursor: default; color: var(--tx2); }
.packet .pico { font-size: 30px; }
.packet .pname { font-size: 12px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.packet .pcost {
    display: inline-flex; align-items: center; gap: 2px; margin-top: 4px;
    background: #ffedb0; border: 1px solid #d9b25a; border-radius: 8px;
    font-size: 12px; font-weight: 800; padding: 0 7px; color: #b06f10;
}

/* ===== 详情面板（图鉴/配方/关卡/存档共用） ===== */
.detailPanel {
    flex: 0 0 300px; background: linear-gradient(#fffdf0, #f7ecd0);
    border: 3px solid var(--bd); border-radius: 14px; padding: 14px; min-height: 330px; color: var(--tx);
}
.dIco {
    height: 110px; display: flex; align-items: center; justify-content: center; font-size: 56px;
    background: linear-gradient(#9ad455, #5aa232); border: 2px solid #2d6b1e;
    border-radius: 12px; margin-bottom: 10px;
}
.dIco.s { background: linear-gradient(#ffe08a, #e8b23e); border-color: #b06f10; }
.dIco.z { background: linear-gradient(#7a8a9a, #4a5a68); border-color: #33424e; }
.detailPanel h4 { color: #a5541a; font-size: 19px; letter-spacing: 1px; margin-bottom: 8px; }
.dRow {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: rgba(255,255,255,.65); border: 1px solid #d9c08a; border-radius: 9px;
    padding: 6px 10px; margin: 6px 0; font-size: 13px;
}
.dRow b { color: #c96a10; text-align: right; }
.dDesc { font-size: 13px; line-height: 1.8; font-weight: 500; }
.dSub { margin-top: 12px; font-weight: 800; color: #8a5a2b; font-size: 14px; }
.ttag { margin-left: 8px; font-size: 11px; background: #3f96cc; color: #fff; border-radius: 6px; padding: 2px 7px; vertical-align: middle; }
.ftag { margin-left: 6px; font-size: 11px; background: #d84315; color: #fff; border-radius: 6px; padding: 2px 7px; vertical-align: middle; }
.fuseMini {
    background: rgba(255,255,255,.6); border: 1px dashed #b09a5e; border-radius: 8px;
    padding: 5px 8px; margin: 4px 0; font-size: 12px; cursor: pointer;
}
.fuseMini.none { cursor: default; color: var(--tx2); }
.codexFooter { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* ===== 配方页：序号配方行 ===== */
.recipeSub { color: var(--tx2); font-size: 13px; }
.recipeList { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.recipeCard {
    position: relative; background: var(--paper); border: 2px solid #c9a763;
    border-radius: 12px; padding: 10px 12px 10px 42px; cursor: pointer;
}
.recipeCard:hover { filter: brightness(1.03); }
.recipeCard.sel { outline: 3px solid #ffdf70; border-color: #c98a1e; }
.rNo {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 23px; height: 23px; border-radius: 50%;
    background: linear-gradient(#ffdf70, #f0a72c); border: 2px solid #b06f10;
    color: #5b3d16; font-size: 12px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.recipeCard .pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recipeCard .rIco {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: #eef6dc; border: 1px solid #8fb56e; border-radius: 9px;
    padding: 4px 9px; font-size: 20px; min-width: 66px;
}
.recipeCard .rIco i { font-style: normal; font-size: 11px; color: var(--tx); font-weight: 800; }
.recipeCard .rIco.res { background: #ffe9b0; border-color: #c98a3e; }
.recipeCard .plus, .recipeCard .arrow { color: #b3541e; font-size: 17px; font-weight: 900; }
.recipeCard .rMeta { margin-top: 6px; font-size: 12px; color: var(--tx2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.recipeCard .rMeta i { font-style: normal; }
.tag { display: inline-block; background: #3f96cc; color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 800; }
.tag.star { background: #d8a012; }

/* ===== 关卡选择 ===== */
.lvHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lvMap { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.lvCard {
    position: relative; background: linear-gradient(#eaf5cf, #c8e39a);
    border: 3px solid var(--bd); border-radius: 14px; padding: 12px 8px 10px;
    text-align: center; cursor: pointer; color: var(--tx); box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.lvCard:hover { filter: brightness(1.04); }
.lvCard.sel { outline: 3px solid #ffdf70; }
.lvCard.locked { filter: grayscale(.85); opacity: .7; cursor: default; }
.lvCard .lvNo { position: absolute; left: 8px; top: 8px; background: var(--bd-dd); color: #ffe08a; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.lvCard .lvIco { font-size: 34px; display: block; margin: 10px 0 4px; }
.lvCard .lvName { display: block; background: var(--bd); color: #ffe9b8; border-radius: 8px; margin: 4px 10px 4px; padding: 2px 4px; font-size: 13px; }
.lvCard .lvStars { display: block; color: #e8a018; letter-spacing: 2px; font-size: 14px; margin-top: 2px; }
.lvCard .lvState { display: inline-block; margin-top: 4px; font-size: 11px; border-radius: 8px; padding: 1px 9px; color: #fff; font-weight: 800; }
.lvState.done { background: #2d7a34; }
.lvState.doing { background: #3a6fae; }
.lvState.lock { background: #8a8a8a; }
.goBtn {
    display: block; width: 100%; margin-top: 14px; padding: 12px;
    border: 2px solid #2d6b1e; border-radius: 11px; background: linear-gradient(#9ad455, #4c9a30);
    color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 6px; cursor: pointer;
    text-shadow: 0 1px 0 rgba(0,0,0,.35); box-shadow: 0 3px 0 rgba(0,0,0,.28); font-family: inherit;
}
.goBtn:hover { filter: brightness(1.08); }
.goBtn:disabled { background: #a8ab9e; border-color: #7a7d72; cursor: not-allowed; box-shadow: none; }

/* ===== 云端存档 ===== */
.savePage {
    max-width: 1020px; margin: 18px auto; padding: 20px 22px;
    background: var(--paper); border: 4px solid var(--bd); border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.55);
}
.saveHead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.saveHead h1 { font-size: 28px; color: #7a4a1f; letter-spacing: 6px; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.saveHead p { color: var(--tx2); font-size: 13px; margin-top: 4px; }
.saveHead .chip { margin-left: auto; }
#slotList { display: flex; flex-direction: column; gap: 10px; }
.slotCard {
    display: flex; align-items: center; gap: 12px; background: var(--paper);
    border: 3px solid var(--bd); border-radius: 14px; padding: 10px 14px; cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.slotCard:hover { filter: brightness(1.03); }
.slotCard.sel { outline: 3px solid #ffdf70; }
.slotAva {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 30% 25%, #9ad455, #4c9a30);
    border: 3px solid #2d6b1e; display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.slotTxt { flex: 1; min-width: 0; }
.slotTxt b { display: block; color: #7a4a1f; font-size: 15px; }
.slotTxt span { font-size: 12px; color: var(--tx2); }
.slotState { font-size: 11px; border-radius: 8px; padding: 2px 9px; color: #fff; white-space: nowrap; font-weight: 800; }
.slotState.now { background: #3a6fae; }
.slotState.done { background: #2d7a34; }
.slotState.lock { background: #8a8a8a; }
.detailHead {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(#7a4a20, #5a3414); color: #ffe9b8;
    border-radius: 10px; padding: 6px 12px; margin-bottom: 10px;
    letter-spacing: 3px; font-weight: 800;
}
.detailHead .x {
    width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#e05540, #b02a18);
    border: 2px solid #7a180a; color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}

/* ===== 设置 ===== */
.setCols { display: flex; gap: 16px; align-items: flex-start; max-width: 1020px; margin: 16px auto; padding: 0 14px; }
.setCols .catTabs.v { flex: 0 0 140px; }
.setWrap {
    flex: 1; min-width: 0; background: var(--paper); border: 4px solid var(--bd);
    border-radius: 16px; padding: 18px 20px; min-height: 430px;
    box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.55);
}
.setWrap .optRow label { color: var(--tx); font-size: 14px; }
.setWrap .optRow .cyc { min-width: 108px; font-family: inherit; }
.setWrap .optRow b { color: #c96a10; }
.cyc {
    padding: 7px 12px; border: 2px solid #a5741f; border-radius: 10px;
    background: linear-gradient(#f2cf8e, #d9a558); color: #5b3d16;
    font-size: 14px; font-weight: 800; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,.45);
    box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.cyc:hover { filter: brightness(1.06); }
.setSub { margin: 14px 0 4px; font-weight: 800; color: #8a5a2b; font-size: 14px; border-bottom: 2px dashed #d9c08a; padding-bottom: 4px; }
.ctrlCard {
    background: rgba(255,255,255,.6); border: 1px solid #d9c08a; border-radius: 10px;
    padding: 10px 12px; font-size: 13px; line-height: 1.9; margin-bottom: 8px; font-weight: 500;
}
.ctrlCard b { color: #b3541e; margin-right: 6px; }
.okTag { background: #2d7a34; color: #fff; border-radius: 6px; padding: 1px 9px; font-size: 12px; margin-left: 8px; }

/* ===== 主首页 ===== */
#homeWrap { max-width: 1080px; margin: 0 auto; padding: 14px 14px 30px; }
#homeCols { display: flex; gap: 14px; align-items: stretch; }
#homeSideL { flex: 0 0 76px; display: flex; flex-direction: column; gap: 10px; }
.sqBtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 70px; border-radius: 14px; border: 3px solid var(--bd);
    background: linear-gradient(#fff6d8, #f0dfa8); color: var(--tx);
    font-size: 22px; font-weight: 800; cursor: pointer; text-decoration: none; font-family: inherit;
    box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.sqBtn span { font-size: 12px; }
.sqBtn:hover { filter: brightness(1.06); }
#homeField {
    flex: 1; min-width: 0; border: 5px solid var(--bd-d); border-radius: 18px;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 64px, transparent 64px 128px),
        linear-gradient(180deg, #8ccc60, #5da23e);
    box-shadow: inset 0 0 40px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.3);
    padding: 26px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fieldPlants { font-size: 30px; letter-spacing: 10px; text-shadow: 0 3px 4px rgba(0,0,0,.35); margin-bottom: 8px; }
.bigBtn {
    display: block; width: min(300px, 100%); text-align: center; text-decoration: none;
    padding: 13px 10px; border-radius: 12px; border: 3px solid;
    font-size: 23px; font-weight: 900; letter-spacing: 8px; cursor: pointer;
    text-shadow: 0 2px 0 rgba(0,0,0,.35); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 rgba(0,0,0,.3);
}
.bigBtn.g { background: linear-gradient(#9ad455, #4c9a30); border-color: #2d6b1e; color: #fff; }
.bigBtn.y { background: linear-gradient(#ffdf70, #f0a72c); border-color: #b06f10; color: #fff; font-size: 19px; letter-spacing: 6px; padding: 10px; }
.bigBtn.b { background: linear-gradient(#7cc9ef, #3f96cc); border-color: #22709e; color: #fff; font-size: 19px; letter-spacing: 6px; padding: 10px; }
.bigBtn:hover { filter: brightness(1.08); }
.miniRow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.miniBtn { border: 2px solid #a5741f; border-radius: 10px; background: linear-gradient(#f2cf8e, #d9a558); color: #5b3d16; font-size: 13px; font-weight: 800; padding: 6px 14px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.miniBtn.g { background: linear-gradient(#9ad455, #4c9a30); border-color: #2d6b1e; color: #fff; }
.miniBtn.y { background: linear-gradient(#ffdf70, #f0a72c); border-color: #b06f10; color: #fff; }
.miniBtn:hover { filter: brightness(1.07); }
#homeSideR { flex: 0 0 190px; display: flex; flex-direction: column; gap: 12px; }
.sideCard {
    background: var(--paper); border: 3px solid var(--bd); border-radius: 14px;
    padding: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 6px;
}
.sideCard h5 { color: #7a4a1f; font-size: 15px; letter-spacing: 1px; }
.sideCard p { font-size: 12px; color: var(--tx2); line-height: 1.6; }
.sideCard .miniBtn { align-self: flex-start; }
#homeInfo { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 14px 0 10px; }
#homeInfo .statItem { background: var(--paper); border: 2px solid var(--bd); color: var(--tx); }
#homeInfo .statItem b { color: #c96a10; }
#homeSeeds { display: flex; gap: 8px; overflow-x: auto; padding: 10px; background: var(--paper); border: 3px solid var(--bd); border-radius: 14px; }
.seedCard {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 72px; background: linear-gradient(#fffdf0, #f3e3ae);
    border: 2px solid #b08a4a; border-radius: 10px; padding: 6px 8px;
}
.seedCard .sIco { font-size: 24px; }
.seedCard .sCost { font-size: 12px; font-weight: 800; color: #b06f10; background: #ffedb0; border: 1px solid #d9b25a; border-radius: 8px; padding: 0 7px; }
.seedCard .sNm { font-size: 12px; color: var(--tx); }

/* ===== 战斗结算 ===== */
#resultWrap { max-width: 620px; margin: 0 auto; padding: 24px 14px 60px; position: relative; }
.deco { position: fixed; font-size: 44px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); z-index: 1; pointer-events: none; }
.deco.l { left: 6%; top: 42%; }
.deco.r { right: 6%; top: 40%; }
#confetti {
    position: fixed; inset: 0; pointer-events: none; opacity: .8;
    background:
        radial-gradient(circle 5px at 8% 12%, #ffdf70 98%, transparent),
        radial-gradient(circle 4px at 22% 30%, #fff 98%, transparent),
        radial-gradient(circle 5px at 37% 8%, #9ad455 98%, transparent),
        radial-gradient(circle 4px at 55% 22%, #ff9a3e 98%, transparent),
        radial-gradient(circle 5px at 72% 10%, #ffdf70 98%, transparent),
        radial-gradient(circle 4px at 88% 26%, #7cc9ef 98%, transparent),
        radial-gradient(circle 4px at 14% 55%, #ff9a3e 98%, transparent),
        radial-gradient(circle 5px at 45% 40%, #fff 98%, transparent),
        radial-gradient(circle 4px at 66% 48%, #9ad455 98%, transparent),
        radial-gradient(circle 5px at 90% 60%, #ffdf70 98%, transparent);
}
.resultGrid { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.resultMain { flex: 1 1 240px; text-align: center; }
.resultMain .stars { font-size: 42px; letter-spacing: 8px; color: #cfc4a4; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.resultMain .stars .on { color: #ffcf24; text-shadow: 0 3px 0 #a8760a; }
#verdict { font-size: 46px; letter-spacing: 16px; margin: 6px 0 2px; color: #e8a018; text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.resultSub { font-size: 14px; color: var(--tx2); margin-bottom: 10px; }
.rewardBox {
    flex: 1 1 220px; background: rgba(255,255,255,.65); border: 2px solid #d9c08a;
    border-radius: 12px; padding: 10px 14px; text-align: left; align-self: center;
}
.rewardBox .dRow { background: transparent; border: 0; border-bottom: 1px dashed #e0cf9e; border-radius: 0; padding: 6px 2px; }
.rewardBox .dRow:last-child { border-bottom: 0; }

@media (max-width: 880px) {
    .codexCols, .setCols { flex-direction: column; }
    .detailPanel { width: auto; flex: 1; }
    .catTabs.v { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; }
    #homeCols { flex-direction: column; }
    #homeSideL { flex-direction: row; flex: 1 1 auto; }
    #homeSideL .sqBtn { flex: 1; height: 58px; }
    #homeSideR { flex-direction: row; flex: 1 1 auto; }
    #homeSideR .sideCard { flex: 1; }
    #fusePanel { flex: 1 1 100%; }
    main { flex-direction: column; }
    .deco { display: none; }
}