/* ============ base.css · 令牌/骨架 ============ */
:root{
  --bg:#07070d;
  --bg2:#0d0e18;
  --ink:#e8e8f0;
  --ink-dim:#9a9ab0;
  --accent:#2de2e6;
  --accent2:#ff3864;
  --line:#26263a;
  --card:#101020;
  --font-pixel:'Press Start 2P','ZCOOL QingKe HuangYou','Microsoft YaHei',monospace;
  --font-head:'ZCOOL QingKe HuangYou','Press Start 2P','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --maxw:1180px;
  --hard-shadow:4px 4px 0 rgba(0,0,0,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(45,226,230,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(255,56,100,.05), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.75;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#050508}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
sup.fn a{color:var(--accent);font-size:.68em;font-weight:700;padding:0 1px;text-decoration:none;border-bottom:1px dotted var(--accent)}
sup.fn a:hover{background:var(--accent);color:#050508}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- 顶部年代进度条 ---- */
#erabar{position:fixed;top:0;left:0;right:0;height:5px;display:flex;z-index:60;background:rgba(0,0,0,.5)}
#erabar i{flex:1;border-right:1px solid rgba(0,0,0,.6);background:var(--line);transition:background .4s,box-shadow .4s;cursor:pointer}
#erabar i.lit{background:var(--seg,var(--accent));box-shadow:0 0 8px var(--seg,var(--accent))}

/* ---- 顶栏 ---- */
#topbar{
  position:sticky;top:5px;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:10px 22px;
  background:rgba(10,10,18,.92);
  border-bottom:2px solid var(--line);
  backdrop-filter:blur(6px);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none!important}
.logo-img{width:28px;height:28px;image-rendering:pixelated;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.logo-cn{font-family:var(--font-head);font-size:1.25rem;color:var(--ink);letter-spacing:2px}
.logo-en{font-family:var(--font-pixel);font-size:.5rem;color:var(--accent);letter-spacing:1px;margin-top:6px}
#mainnav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
#mainnav a{
  font-size:.86rem;color:var(--ink-dim);padding:6px 10px;border:2px solid transparent;
  text-decoration:none!important;white-space:nowrap;
}
#mainnav a:hover{color:var(--ink);border-color:var(--line)}
#mainnav a.on{color:var(--accent);border-color:var(--accent);background:rgba(45,226,230,.08)}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
#shroom-count{font-size:.75rem;color:#ffb3c8;letter-spacing:1px}
.iconbtn{background:var(--card);border:2px solid var(--line);color:var(--ink);width:36px;height:34px;font-size:1rem;box-shadow:var(--hard-shadow)}
.iconbtn:hover{border-color:var(--accent);transform:translate(-1px,-1px)}
#btn-menu{display:none}

/* ---- 页脚 ---- */
#site-footer{margin-top:80px;border-top:3px solid var(--line);background:var(--bg2)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:44px 22px 20px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.foot-logo{font-family:var(--font-head);font-size:1.3rem;letter-spacing:2px;margin-bottom:10px}
.foot-logo span{font-family:var(--font-pixel);font-size:.55rem;color:var(--accent);display:block;margin-top:6px;letter-spacing:2px}
.foot-h{font-family:var(--font-head);color:var(--accent);letter-spacing:2px;margin-bottom:8px}
.foot-note{font-size:.85rem;color:var(--ink-dim);margin-bottom:6px}
.foot-copy{text-align:center;font-family:var(--font-pixel);font-size:.55rem;color:var(--ink-dim);padding:18px;border-top:1px solid var(--line)}

/* ---- 启动画面 ---- */
.boot-screen{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.boot-cart{width:90px;image-rendering:pixelated;animation:bob 1.2s ease-in-out infinite}
.boot-line{font-family:var(--font-pixel);font-size:.7rem;color:var(--accent);letter-spacing:1px}
.boot-bar{width:260px;height:14px;border:2px solid var(--accent);padding:2px}
.boot-bar i{display:block;height:100%;width:40%;background:var(--accent);animation:load 1.1s ease-in-out infinite}
@keyframes load{0%{width:8%}50%{width:82%}100%{width:8%}}

/* ---- 设置面板 ---- */
#settings{position:fixed;inset:0;z-index:90;background:rgba(4,4,10,.7);display:flex;align-items:center;justify-content:center;padding:20px}
#settings[hidden]{display:none}
.set-card{position:relative;width:min(560px,100%);max-height:84vh;overflow:auto;background:var(--bg2);border:3px solid var(--accent);box-shadow:8px 8px 0 rgba(0,0,0,.6);padding:26px}
.set-close{position:absolute;top:10px;right:10px;background:none;border:2px solid var(--line);color:var(--ink);width:32px;height:30px}
.set-title{font-family:var(--font-pixel);font-size:.8rem;color:var(--accent);letter-spacing:2px;margin-bottom:18px}
.set-row{display:grid;gap:10px;margin-bottom:20px}
.set-row label{display:flex;gap:10px;align-items:center;font-size:.95rem;cursor:pointer}
.set-row input{width:18px;height:18px;accent-color:var(--accent)}
.set-h{font-family:var(--font-head);font-size:1rem;letter-spacing:2px;margin:18px 0 10px;color:var(--accent2)}
.set-shrooms{display:flex;gap:8px;flex-wrap:wrap}
.set-shrooms .sh{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--line);background:var(--card)}
.set-shrooms .sh.got{border-color:#ff4d6d}
.set-shrooms .sh img{width:24px;image-rendering:pixelated;filter:grayscale(1) brightness(.4)}
.set-shrooms .sh.got img{filter:none}
.set-ach{list-style:none;display:grid;gap:8px}
.set-ach li{font-size:.85rem;color:var(--ink-dim);padding:8px 10px;border:1px solid var(--line);background:var(--card)}
.set-ach li.got{color:var(--ink);border-color:#ffd23f}
.set-ach li b{color:#ffd23f;margin-right:6px}

/* ---- 提示 toast ---- */
#toasts{position:fixed;top:64px;right:18px;z-index:95;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  min-width:220px;max-width:320px;padding:12px 14px;
  background:var(--bg2);border:2px solid var(--accent);box-shadow:var(--hard-shadow);
  animation:toast-in .3s steps(4);
}
.toast b{display:block;font-family:var(--font-pixel);font-size:.6rem;color:var(--accent);letter-spacing:1px;margin-bottom:6px}
.toast span{font-size:.86rem;color:var(--ink)}
.toast.gold{border-color:#ffd23f}.toast.gold b{color:#ffd23f}
.toast.pink{border-color:#ff4d6d}.toast.pink b{color:#ff4d6d}
@keyframes toast-in{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.toast.out{animation:toast-out .3s forwards}
@keyframes toast-out{to{transform:translateX(30px);opacity:0}}

/* ---- 全局特效层 ---- */
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:80}
#crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:70;display:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);}
body.crt #crt-overlay{display:block}

/* ---- 减少动效 ---- */
body.reduce *,body.reduce *::before,body.reduce *::after{animation-duration:.001s!important;transition-duration:.001s!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}}
body.konami #topbar,body.konami #erabar i.lit{animation:hue 1s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}

/* ---- 响应式 ---- */
@media (max-width:900px){
  .foot-inner{grid-template-columns:1fr}
}
@media (max-width:860px){
  #mainnav{position:fixed;top:52px;left:0;right:0;flex-direction:column;background:rgba(8,8,16,.98);border-bottom:2px solid var(--accent);padding:10px 18px;display:none;z-index:49}
  #mainnav.open{display:flex}
  #mainnav a{padding:12px 8px;border-bottom:1px solid var(--line)}
  #btn-menu{display:block}
  .logo-en{display:none}
  #shroom-count{display:none}
  #topbar{padding:8px 14px;gap:10px}
}