/* 活动指引 / 情报手册：游戏内 628×426、788×546 小窗口优先，桌面浏览器同样可用。
   字号沿用原版刻度（10/11/12/13/15px），只调整布局、层次与动效。 */
:root {
  --bg:#f3eee1; --paper:#fffdf7; --paper-2:#f8f4e8; --ink:#27362c; --muted:#6c7464;
  --line:#ddd5c1; --line-2:#cbc1a6; --green:#2d5b43; --green-deep:#1f3a2d;
  --accent:#b9672b; --gold:#d9a441; --mark:#ffe08a;
  --shadow-sm:0 1px 2px rgba(60,45,20,.07);
  --shadow-lg:0 8px 18px -10px rgba(60,45,20,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
  --cat:#2d7050; --cat-2:#4fa06f; --cat-ink:#1f4d37; --cat-soft:rgba(45,112,80,.12); --cat-line:rgba(45,112,80,.45);
  --grad-green:linear-gradient(100deg,#245a40,#3c7f57); --gold-2:#f0c25a;
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  --i-start:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13C12 9 9 6 4 6c0 4 3 7 8 7z'/%3E%3Cpath d='M12 11c0-3 2.5-6 7-6 0 3.5-2.5 6-7 6z'/%3E%3C/svg%3E");
  --i-daily:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h3'/%3E%3C/svg%3E");
  --i-battle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-story:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5M8 7h7M8 11h7'/%3E%3C/svg%3E");
  --i-sa70:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E");
  --i-tools:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E");
  --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-1.5v13c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5v-13c-3-.5-6 0-8 1.5z'/%3E%3Cpath d='M12 6v13'/%3E%3C/svg%3E");
  font:12px/1.5 "Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--ink); background:var(--bg); font-synthesis:none;
}
/* 分类配色：卡片色条、图标、分类标签共用 */
[data-cat=start]{--cat:#2f9d5b;--cat-2:#79c46a;--cat-ink:#1f6b3d;--cat-soft:rgba(47,157,91,.14);--cat-line:rgba(47,157,91,.55);--cat-icon:var(--i-start)}
[data-cat=daily]{--cat:#e0861c;--cat-2:#f4bd4a;--cat-ink:#9a5608;--cat-soft:rgba(224,134,28,.15);--cat-line:rgba(224,134,28,.55);--cat-icon:var(--i-daily)}
[data-cat=battle]{--cat:#d2463a;--cat-2:#f08455;--cat-ink:#9c2b22;--cat-soft:rgba(210,70,58,.13);--cat-line:rgba(210,70,58,.55);--cat-icon:var(--i-battle)}
[data-cat=story]{--cat:#7b5bcc;--cat-2:#b28ce6;--cat-ink:#583a9e;--cat-soft:rgba(123,91,204,.13);--cat-line:rgba(123,91,204,.55);--cat-icon:var(--i-story)}
[data-cat=sa70]{--cat:#1c8cb3;--cat-2:#4cc5cc;--cat-ink:#10647f;--cat-soft:rgba(28,140,179,.13);--cat-line:rgba(28,140,179,.55);--cat-icon:var(--i-sa70)}
[data-cat=tools]{--cat:#a47a22;--cat-2:#d9ae45;--cat-ink:#74540f;--cat-soft:rgba(164,122,34,.14);--cat-line:rgba(164,122,34,.55);--cat-icon:var(--i-tools)}
[data-cat=intel]{--cat:#2d7050;--cat-2:#4fa06f;--cat-ink:#1f4d37;--cat-soft:rgba(45,112,80,.13);--cat-line:rgba(45,112,80,.55);--cat-icon:var(--i-book)}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{height:100vh;height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(700px 300px at 0% 0%,rgba(244,189,74,.20),transparent 60%),
    radial-gradient(600px 360px at 100% 28%,rgba(76,197,204,.12),transparent 60%),
    radial-gradient(700px 400px at 18% 110%,rgba(123,91,204,.08),transparent 60%),
    radial-gradient(800px 420px at 105% 110%,rgba(47,157,91,.13),transparent 60%),var(--bg)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}button:disabled{cursor:default;opacity:.45}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px;box-shadow:0 0 0 1px rgba(217,164,65,.35)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:4px;background:var(--green);color:#fff;padding:6px;z-index:20;border-radius:4px}.skip-link:focus{top:4px}
.icon{display:inline-block;width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* ── 顶栏：品牌 + 视图切换 + 统一搜索 ── */
.site-header{height:40px;flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;position:relative;z-index:5;
  background:linear-gradient(100deg,#1d3d2d 0%,#2a5a41 52%,#36694b 100%);border-bottom:2px solid var(--gold);box-shadow:0 3px 10px -6px rgba(20,40,28,.8)}
.brand{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;white-space:nowrap;color:#fbeecb;border-radius:6px;padding:2px 4px 2px 0}
.brand span{background:linear-gradient(180deg,#fff3c8,#f2c35a);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.brand img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));transition:transform .3s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.view-tabs{position:relative;display:flex;align-items:stretch;align-self:stretch;gap:2px}
.page-tab{display:flex;align-items:center;gap:4px;padding:0 10px;font-size:12px;color:rgba(251,238,203,.72);transition:color .15s,background .15s}
.page-tab:hover{color:#fff8e4;background:rgba(255,255,255,.06)}
.page-tab.active{color:#fff;font-weight:700;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.08))}
.tab-count{font-size:10px;font-weight:400;padding:0 5px;border-radius:8px;background:rgba(255,255,255,.14);color:#ffe7a6;line-height:1.6;transition:background .2s,color .2s}
.page-tab.active .tab-count{background:var(--gold-2);color:#3d2a06}
.tab-indicator{position:absolute;left:0;bottom:-2px;height:3px;width:var(--tab-w,0);border-radius:3px 3px 0 0;background:linear-gradient(90deg,#f7d57a,#e8a93a);box-shadow:0 0 8px rgba(247,213,122,.6);
  transform:translateX(var(--tab-x,0));transition:transform .25s var(--ease),width .25s var(--ease)}
.search-box{position:relative;flex:1;max-width:360px;margin-left:auto}
.search-box::before{content:"";position:absolute;left:9px;top:50%;width:13px;height:13px;margin-top:-6.5px;background:var(--muted);-webkit-mask:var(--i-search) center/contain no-repeat;mask:var(--i-search) center/contain no-repeat;pointer-events:none;transition:background .15s}
.search-box:focus-within::before{background:var(--green)}
#site-search{width:100%;height:28px;padding:3px 28px 3px 28px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,252,242,.96);font-size:11px;
  box-shadow:inset 0 1px 2px rgba(60,45,20,.12);transition:border-color .15s,box-shadow .15s}
#site-search:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(240,194,90,.4)}
#site-search::-webkit-search-cancel-button{cursor:pointer}
.search-box kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:10px/1 Consolas,monospace;color:var(--muted);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;padding:2px 4px;background:var(--paper-2);pointer-events:none;transition:opacity .15s}
.search-box:focus-within kbd,.search-box.has-value kbd{opacity:0}

main{width:100%;max-width:1400px;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;animation:view-in .2s var(--ease)}
@keyframes view-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── 活动指引 ── */
.category-nav{flex:none;display:flex;align-items:center;gap:5px;padding:6px 12px;overflow-x:auto;scrollbar-width:none;background:rgba(255,251,240,.55);border-bottom:1px solid rgba(221,213,193,.7);
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
.category-nav::-webkit-scrollbar{display:none}
.category-nav a{display:flex;align-items:center;gap:5px;flex:none;font-size:11px;padding:3px 10px 3px 8px;border-radius:13px;white-space:nowrap;
  background:var(--cat-soft);color:var(--cat-ink);border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.category-nav a::before{content:"";width:12px;height:12px;background:var(--cat);-webkit-mask:var(--cat-icon) center/contain no-repeat;mask:var(--cat-icon) center/contain no-repeat}
.category-nav a b{font-weight:400;font-size:10px;opacity:.7}
.category-nav a:hover{border-color:var(--cat-line);background:#fff}
.category-nav a:active{transform:scale(.96)}
.category-nav a.active{background:linear-gradient(135deg,var(--cat),var(--cat-2));color:#fff;font-weight:700;box-shadow:0 3px 8px -4px var(--cat)}
.category-nav a.active::before{background:#fff}
.category-nav a.active b{opacity:.85}
.category-nav .intel-shortcut{margin-left:auto;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--cat),var(--cat-2));box-shadow:0 3px 8px -5px var(--cat)}
.category-nav .intel-shortcut::before{background:#fff}
.category-nav .intel-shortcut:hover{background:linear-gradient(135deg,var(--cat-ink),var(--cat));border-color:transparent}
.category-nav .intel-shortcut::after{content:"→";transition:transform .15s}
.category-nav .intel-shortcut:hover::after{transform:translateX(2px)}

.scroller{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.scroller::-webkit-scrollbar{width:8px;height:8px}
.scroller::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.scroller::-webkit-scrollbar-thumb:hover{background-color:#b6ab8e}
#guide-sections{padding:0 8px 8px 12px}

.quick-start{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:2px 0 8px;padding:6px 10px;font-size:11px;border-radius:8px;
  background:linear-gradient(100deg,#fff0c9 0%,#ffe0a6 55%,#ffd6b4 100%);border:1px solid #efc47a;box-shadow:0 2px 6px -4px rgba(180,110,20,.55)}
.quick-start>span{color:#a0580c;font-weight:700}
.quick-start>span::before{content:"★ ";color:#e8932a}
.quick-start a{color:#7a4410;font-weight:700;padding:1px 9px;border-radius:10px;background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(160,90,12,.15);transition:color .15s,background .15s}
.quick-start a::after{content:"→";display:inline-block;margin-left:2px;transition:transform .15s}
.quick-start a:hover{color:#c0651a;background:#fff}.quick-start a:hover::after{transform:translateX(2px)}

.intel-hint{display:flex;align-items:center;gap:8px;margin:2px 0 8px;padding:7px 10px;border-radius:8px;font-size:11px;
  background:linear-gradient(100deg,#e3f3e6,#f4fbf1 60%,#eef7f6);border:1px solid rgba(45,112,80,.35);color:#1f4d37;animation:view-in .2s var(--ease);transition:background .15s,border-color .15s,box-shadow .15s}
.intel-hint::before{content:"";width:14px;height:14px;background:var(--green);-webkit-mask:var(--i-book) center/contain no-repeat;mask:var(--i-book) center/contain no-repeat}
.intel-hint strong{font-weight:700}
.intel-hint span{margin-left:auto;font-weight:700;color:#fff;padding:0 9px;border-radius:10px;background:var(--grad-green)}
.intel-hint:hover{border-color:rgba(45,112,80,.6);box-shadow:0 4px 12px -8px rgba(31,77,55,.8)}

.guide-section{margin:0 0 10px;scroll-margin-top:2px}
.section-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 0 5px;
  background:linear-gradient(var(--bg) 78%,rgba(243,238,225,0))}
.section-heading::before{content:"";width:18px;height:18px;flex:none;border-radius:6px;background:linear-gradient(135deg,var(--cat),var(--cat-2));box-shadow:0 2px 5px -2px var(--cat)}
.section-heading::after{content:"";position:absolute;left:4px;top:50%;width:10px;height:10px;margin-top:-5.5px;background:#fff;-webkit-mask:var(--cat-icon) center/contain no-repeat;mask:var(--cat-icon) center/contain no-repeat}
.section-heading>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.section-heading h2{font-size:12px;font-weight:700;white-space:nowrap;color:var(--cat-ink)}
.section-heading p{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-count{font-size:10px;font-weight:700;color:var(--cat-ink);margin-left:auto;padding:0 7px;border-radius:8px;background:var(--cat-soft)}

.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.guide-link{position:relative;display:flex;flex-direction:column;gap:3px;padding:7px 9px 8px 12px;border-radius:7px;overflow:hidden;
  background:linear-gradient(135deg,var(--cat-soft) 0%,rgba(255,253,247,0) 58%),var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;
  animation:card-in .3s var(--ease) both;animation-delay:calc(var(--i,0) * 16ms)}
@keyframes card-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.guide-link::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--cat),var(--cat-2));transition:top .18s,bottom .18s,width .18s}
.guide-link::after{content:"→";position:absolute;right:8px;bottom:5px;font-size:11px;color:var(--cat);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.guide-link:hover{transform:translateY(-2px);border-color:var(--cat-line);box-shadow:0 10px 20px -12px var(--cat)}
.guide-link:hover::before{top:0;bottom:0;width:4px}
.guide-link:hover h3{color:var(--cat-ink)}
.guide-link:hover::after{opacity:1;transform:none}
.guide-link:active{transform:translateY(0) scale(.985);transition-duration:.06s}
.card-top{display:flex;align-items:flex-start;gap:6px}
.guide-link h3{flex:1;min-width:0;font-size:12px;line-height:1.5;transition:color .18s}
.card-tag{flex:none;font-size:10px;line-height:1.5;margin-top:1px;padding:0 6px;border-radius:9px;color:var(--cat-ink);background:var(--cat-soft);border:1px solid var(--cat-line)}
.guide-link.is-intel .card-tag{color:#fff;background:var(--grad-green);border-color:transparent}
.guide-link p{font-size:11px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;padding-right:6px}

.empty-state{padding:16px;margin:4px 0;background:var(--paper);border:1px dashed var(--line-2);border-radius:8px;font-size:12px;text-align:center;line-height:1.7;color:var(--muted)}
.empty-state a{color:var(--green);text-decoration:underline}
.empty-state button,.btn{font-size:11px;padding:3px 12px;margin-top:6px;border-radius:13px;background:var(--grad-green);color:#fffbea;border:0;box-shadow:0 3px 8px -5px rgba(31,77,55,.9);transition:filter .15s,transform .1s}
.empty-state button:hover,.btn:hover{filter:brightness(1.1)}
.empty-state button:active,.btn:active{transform:scale(.96)}
.page-footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);padding:8px 2px 2px;margin-top:4px;border-top:1px solid var(--line)}
.page-footer a:hover{color:var(--green)}
.to-top{position:absolute;right:18px;bottom:14px;z-index:4;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.8);font-size:13px;line-height:1;
  background:var(--grad-green);color:#fff;box-shadow:0 6px 14px -6px rgba(31,77,55,.9);animation:view-in .2s var(--ease);transition:transform .15s,filter .15s}
.to-top:hover{transform:translateY(-2px);filter:brightness(1.12)}

/* ── 情报手册 ── */
.mission-controls{flex:none;display:flex;align-items:center;gap:6px;padding:6px 12px;margin-bottom:6px;background:rgba(255,251,240,.55);border-bottom:1px solid rgba(221,213,193,.7)}
.select{position:relative;flex:0 1 170px;min-width:0}
.select::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;margin-top:-5px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.select select{width:100%;height:26px;padding:2px 22px 2px 9px;border:1px solid var(--line-2);border-radius:13px;background:var(--paper);font-size:11px;appearance:none;cursor:pointer;transition:border-color .15s}
.select select:hover{border-color:var(--green)}
.select select.filtered{border-color:#e0a53c;background:#fff4d6;color:#8a5208;font-weight:700}
#mission-status{flex:1;min-width:0;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mission-status .pending{color:var(--accent)}
#mission-reset{flex:none;font-size:10px;padding:2px 9px;border-radius:12px;border:1px solid var(--line-2);background:var(--paper);color:var(--green);transition:background .15s,border-color .15s}
#mission-reset:hover{border-color:var(--green);background:#f1f6ee}
#mission-error{margin:0 12px 6px}
.mission-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:8px;flex:1;min-height:0;padding:0 12px 8px}
.mission-results{position:relative;display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,rgba(255,253,247,.92),rgba(250,243,226,.92));border:1px solid var(--line);border-radius:8px;overflow:hidden}
#mission-list{flex:1;min-height:0;padding:3px;scroll-behavior:auto}
.mission-result{position:relative;display:block;width:100%;padding:6px 8px 6px 14px;margin:0 0 1px;border:0;border-radius:6px;background:none;text-align:left;
  transition:background .12s,color .12s}
.mission-result::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--dot,#9aa88d);box-shadow:0 0 0 2px rgba(255,255,255,.8)}
.mission-result:hover{background:rgba(255,255,255,.9);box-shadow:inset 3px 0 0 var(--dot,#9aa88d)}
.mission-result[aria-current=true]{background:var(--grad-green);color:#fffbea;box-shadow:0 3px 8px -5px rgba(31,58,45,.8)}
.mission-result[aria-current=true]::before{background:var(--gold)}
.mission-result[aria-current=true] mark{background:rgba(255,224,138,.35);color:#fff;box-shadow:none}
.mission-result strong{display:block;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.mission-result small{display:block;font-size:10px;line-height:1.35;opacity:.72;margin-top:1px;overflow-wrap:anywhere}
.mission-result .snippet{display:block;font-size:10px;line-height:1.4;margin-top:3px;opacity:.85;overflow-wrap:anywhere}
.list-more{font-size:10px;color:var(--muted);text-align:center;padding:6px}
.skeleton-row{height:34px;margin:3px;border-radius:6px}
.skeleton{background:linear-gradient(90deg,#ebe4d2 25%,#f6f1e4 37%,#ebe4d2 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

.mission-reader{position:relative;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 14px 12px;
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--dot,#2d7050);border-radius:8px;box-shadow:0 4px 14px -10px rgba(60,45,20,.6);overflow-wrap:anywhere;scroll-behavior:auto}
.mission-reader:focus-visible,#guide-sections:focus-visible{outline:none;border-color:var(--line-2)}
.reader-placeholder{max-width:360px;margin:34px auto 10px;text-align:center;color:var(--muted);animation:view-in .25s var(--ease)}
.placeholder-icon{display:block;width:34px;height:34px;margin:0 auto 6px;background:linear-gradient(135deg,#e8a93a,#2f9d5b);-webkit-mask:var(--i-book) center/contain no-repeat;mask:var(--i-book) center/contain no-repeat}
.reader-placeholder h2{font-size:13px;margin:4px 0;color:var(--ink)}
.reader-placeholder p{font-size:11px;line-height:1.6}
.source-note{margin-top:12px!important;font-size:10px!important;line-height:1.5;color:#596950;background:#eef1e3;border-radius:6px;padding:6px 9px;text-align:left}
.source-note a{color:var(--green);text-decoration:underline}
.reader-head{position:sticky;top:0;z-index:2;margin:0 -14px 8px;padding:9px 14px 6px;background:linear-gradient(var(--paper) 88%,rgba(255,253,247,0))}
.reader-crumb{font-size:10px;color:var(--dot,var(--muted));line-height:1.4;margin-bottom:2px;font-weight:700;opacity:.9}
.reader-title{font-size:15px;line-height:1.5;margin-bottom:4px;color:#1f3a2d;animation:view-in .2s var(--ease)}
.reader-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.reader-tools .badge{font-size:10px;padding:0 6px;border-radius:3px;background:#ecf0e4;color:#56684c}
.reader-tools .badge.local{background:var(--grad-green);color:#fffbea}
.reader-tools .spacer{flex:1}
.reader-tools button,.reader-tools a{font-size:10px;padding:1px 8px;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);color:var(--green);line-height:1.6;transition:background .15s,border-color .15s}
.reader-tools button:hover:not(:disabled),.reader-tools a:hover{border-color:var(--green);background:#f1f6ee}
.reader-back{display:none}
.reader-note{font-size:11px;color:#7b6a45;line-height:1.5;margin-bottom:8px;padding:4px 8px;border-radius:5px;background:#faf3de}
.reader-body{animation:view-in .22s var(--ease)}
.reader-body p,.reader-body li{font-size:12px;line-height:1.6;white-space:pre-wrap;margin-bottom:8px}
.reader-body h3{font-size:12px;border-left:3px solid var(--dot,var(--accent));padding:1px 0 1px 7px;margin:14px 0 6px;background:linear-gradient(90deg,rgba(244,189,74,.16),transparent 70%)}
.reader-body dl{margin:0 0 10px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:linear-gradient(90deg,#eef6ea,#fbfaf2 40%)}
.reader-body dl>div{display:grid;grid-template-columns:65px minmax(0,1fr);gap:6px;padding:4px 8px;font-size:11px;line-height:1.5;border-bottom:1px solid var(--line)}
.reader-body dl>div:last-child{border-bottom:0}.reader-body dt{font-weight:700;color:#2d7050}.reader-body dd{margin:0;white-space:pre-wrap}
.reader-body .table-wrap{overflow:auto;margin-bottom:10px;border-radius:6px;border:1px solid var(--line)}
.reader-body table{border-collapse:collapse;font-size:11px;min-width:100%}
.reader-body th,.reader-body td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:4px 7px;text-align:left;white-space:pre-wrap}
.reader-body tr:nth-child(even) td{background:#fbf9f1}
.reader-body th{background:#f6ecd2;color:#6b4a12;position:sticky;top:0}
.reader-skeleton .skeleton{height:12px;margin:10px 0;border-radius:4px}
.reader-skeleton .skeleton:nth-child(3n){width:70%}
.original-text{border-top:1px solid var(--line);margin-top:14px;padding-top:7px}
.original-text summary{font-size:11px;color:var(--muted);cursor:pointer;width:max-content;border-radius:3px}
.original-text summary:hover{color:var(--green)}
.original-text pre{font:11px/1.5 Consolas,"Microsoft YaHei",monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#f8f6ee;border-radius:6px;padding:8px;margin:6px 0 0}
.child-links{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.child-links a{font-size:11px;padding:3px 9px;background:#e8f3ea;color:#1f4d37;border-radius:12px;border:1px solid rgba(45,112,80,.25);transition:border-color .15s,background .15s}
.child-links a:hover{border-color:var(--green);background:#f1f6ee}
.child-title{font-size:12px;margin:14px 0 4px}

/* ── 响应式：800 游戏窗口 / 640 游戏窗口 / 高 DPI 小窗口 ── */
@media(max-width:700px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .guide-link{padding:6px 8px 7px 11px;gap:2px}
  .guide-link h3{font-size:11px}.card-tag{font-size:9px}
  .guide-link p{font-size:10px;line-height:1.45}
  .section-heading p{display:none}
  .mission-layout{grid-template-columns:190px minmax(0,1fr)}
}
@media(max-width:650px){
  .site-header{gap:8px;padding:0 8px}
  .page-tab{padding:0 7px;font-size:11px}
  .category-nav{padding:5px 8px;gap:4px}
  .category-nav a{font-size:10px;padding:2px 8px 2px 6px}
  .category-nav a b{display:none}
  #guide-sections{padding:0 5px 6px 8px}
  .card-grid{gap:5px}
  .mission-controls{padding:5px 8px}
  .mission-layout{grid-template-columns:165px minmax(0,1fr);gap:6px;padding:0 8px 6px}
  .mission-reader{padding:0 10px 10px}.reader-head{margin:0 -10px 6px;padding:7px 10px 5px}
  .mission-result strong{font-size:11px}.reader-title{font-size:14px}
  .reader-body p,.reader-body li{font-size:11px;line-height:1.55}
  .to-top{right:12px;bottom:10px}
}
@media(max-width:560px){.brand span{display:none}}
@media(max-width:520px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search-box kbd{display:none}
  .mission-layout{display:flex}.mission-results{flex:1}
  .mission-reader{display:none;flex:1}
  #mission-panel.reading .mission-reader{display:block}
  #mission-panel.reading .mission-results{display:none}
  .reader-back{display:inline-block}
}
@media(max-height:450px){.page-footer{display:none}}
@media(max-height:360px){
  .site-header{height:34px}
  .category-nav{padding:3px 8px}
  .quick-start{display:none}
  .mission-controls{padding:3px 8px}
  .section-heading{padding:3px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}