/* ============ Linux 镜像学院 ============ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b1020;--bg2:#0e1526;--panel:#121a30;--panel2:#0d1424;
  --line:rgba(148,163,184,.16);--line2:rgba(148,163,184,.28);
  --text:#e2e8f0;--muted:#94a3b8;--dim:#64748b;
  --cyan:#22d3ee;--green:#34d399;--amber:#fbbf24;--pink:#f472b6;
  --red:#f87171;--violet:#a78bfa;--blue:#60a5fa;
  --mono:ui-monospace,'Cascadia Code',Consolas,'Courier New',monospace;
  --radius:14px;
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.75;
  background-image:
    radial-gradient(1000px 500px at 85% -5%,rgba(34,211,238,.08),transparent 60%),
    radial-gradient(900px 500px at -10% 30%,rgba(167,139,250,.07),transparent 60%),
    linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:auto,auto,38px 38px,38px 38px;
}
::selection{background:rgba(34,211,238,.35)}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%;height:auto;display:block;margin:0 auto}

/* ---------- 导航 ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 22px;background:rgba(11,16,32,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .logo{font-weight:800;font-size:1.05rem;white-space:nowrap}
nav .logo b{background:linear-gradient(90deg,var(--cyan),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
nav .links{display:flex;gap:4px;flex-wrap:wrap}
nav .links a{color:var(--muted);font-size:.9rem;padding:4px 10px;border-radius:8px}
nav .links a:hover{color:var(--text);background:rgba(148,163,184,.12);text-decoration:none}
.hud{margin-left:auto;display:flex;align-items:center;gap:12px}
.hud .lvl{font-size:.82rem;color:var(--amber);white-space:nowrap}
.hud .xpbar{width:120px;height:8px;border-radius:99px;background:rgba(148,163,184,.15);overflow:hidden}
.hud .xpbar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .6s}
.hud .xpnum{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.ring{position:relative;width:34px;height:34px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;font-family:var(--mono);color:var(--cyan)}

/* ---------- 布局 ---------- */
main{max-width:1080px;margin:0 auto;padding:90px 20px 60px}
section.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 38px;margin:26px 0;scroll-margin-top:80px;
  opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s;
}
section.card.vis{opacity:1;transform:none}
h2.sec{font-size:1.7rem;display:flex;align-items:center;gap:12px;margin-bottom:6px}
h2.sec .tag{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--cyan);border:1px solid var(--cyan);padding:2px 9px;border-radius:99px;white-space:nowrap}
h3.sub{font-size:1.12rem;margin:26px 0 10px;color:var(--green)}
p{margin:10px 0;color:#cbd5e1}
ul.clean{list-style:none}
ul.clean li{padding:6px 0 6px 4px;color:#cbd5e1}
ul.clean li::before{content:'▸ ';color:var(--cyan)}
ul.check li::before{content:'✔ ';color:var(--green)}
ul.cross li::before{content:'✘ ';color:var(--red)}
strong{color:#f1f5f9}
.hl{color:var(--amber);font-weight:600}
.kw{color:var(--cyan);font-family:var(--mono);font-size:.92em;background:rgba(34,211,238,.1);padding:1px 6px;border-radius:6px}

/* ---------- hero ---------- */
header.hero{padding:130px 20px 30px;max-width:1080px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.25;margin:18px 0 8px}
.hero h1 b{background:linear-gradient(90deg,var(--cyan),var(--green),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--muted);font-size:1.05rem;max-width:640px;margin:6px auto}
.btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 10px}
.btn{
  display:inline-block;padding:12px 26px;border-radius:12px;font-weight:700;font-size:.95rem;
  border:1px solid var(--line2);color:var(--text);cursor:pointer;transition:.25s;background:rgba(148,163,184,.06)
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn.pri{background:linear-gradient(90deg,#0891b2,#059669);border-color:transparent;box-shadow:0 8px 24px rgba(34,211,238,.25)}
.btn.pri:hover{box-shadow:0 12px 30px rgba(34,211,238,.4)}
.stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.stats span{font-family:var(--mono);font-size:.8rem;color:var(--muted);border:1px dashed var(--line2);padding:5px 14px;border-radius:99px}
.stats b{color:var(--cyan)}

/* ---------- 图 / 代码 / 表格 ---------- */
figure.fig{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:18px 14px 10px;margin:22px 0}
figure.fig figcaption{text-align:center;color:var(--dim);font-size:.82rem;padding:8px 6px 4px}
pre{
  background:#070c18;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:.86rem;
  line-height:1.7;color:#bae6fd;margin:16px 0;position:relative
}
pre .c{color:#5b7391}
pre .p{color:var(--green)}
pre .y{color:var(--amber)}
pre .r{color:var(--red)}
pre .w{color:#e2e8f0}
code{font-family:var(--mono);font-size:.88em;background:rgba(148,163,184,.12);padding:1px 6px;border-radius:6px;color:#a5f3fc}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.88rem}
th{background:rgba(34,211,238,.08);color:var(--cyan);text-align:left;font-weight:700}
th,td{border:1px solid var(--line);padding:9px 12px;vertical-align:top}
td{color:#cbd5e1}
tr:hover td{background:rgba(148,163,184,.05)}
td .ok{color:var(--green)}td .no{color:var(--red)}td .mid{color:var(--amber)}

/* ---------- 提示框 ---------- */
.note{border-radius:12px;padding:14px 18px;margin:16px 0;font-size:.92rem;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.note .ico{font-size:1.2rem;flex:none;line-height:1.6}
.note.tip{background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.3)}
.note.warn{background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.35)}
.note.try{background:rgba(52,211,153,.07);border-color:rgba(52,211,153,.3)}
.note.danger{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.4)}
.note b{color:#f1f5f9}

/* ---------- 终端窗口 ---------- */
.term{background:#05080f;border:1px solid var(--line);border-radius:12px;margin:18px 0;overflow:hidden}
.term .bar{display:flex;gap:7px;padding:10px 14px;background:rgba(148,163,184,.07);border-bottom:1px solid var(--line)}
.term .bar i{width:11px;height:11px;border-radius:50%}
.term .bar i:nth-child(1){background:#f87171}.term .bar i:nth-child(2){background:#fbbf24}.term .bar i:nth-child(3){background:#34d399}
.term .bar span{margin-left:8px;font-size:.72rem;color:var(--dim);font-family:var(--mono)}
.term pre{border:none;border-radius:0;margin:0;background:transparent;color:#86efac}
.term pre .in{color:#7dd3fc}

/* ---------- 课后小测 ---------- */
.quiz{background:linear-gradient(135deg,rgba(34,211,238,.06),rgba(167,139,250,.06));border:1px dashed var(--line2);border-radius:12px;padding:18px 22px;margin:24px 0}
.quiz .q{font-weight:700;margin-bottom:12px}
.quiz .q::before{content:'🎯 快问快答  ';font-size:.78rem;color:var(--cyan);letter-spacing:.08em}
.quiz .opts{display:grid;gap:9px}
.quiz button{
  text-align:left;padding:10px 16px;border-radius:10px;border:1px solid var(--line2);
  background:rgba(11,16,32,.6);color:var(--text);cursor:pointer;font-size:.9rem;transition:.2s
}
.quiz button:hover{border-color:var(--cyan);background:rgba(34,211,238,.1)}
.quiz button.right{border-color:var(--green);background:rgba(52,211,153,.15)}
.quiz button.wrong{border-color:var(--red);background:rgba(248,113,113,.12);animation:shake .35s}
.quiz .fb{margin-top:10px;font-size:.86rem;min-height:1.4em}
.quiz .fb.good{color:var(--green)}.quiz .fb.bad{color:var(--red)}

/* ---------- 完成按钮 ---------- */
.done-row{display:flex;align-items:center;gap:14px;margin-top:22px}
.done-btn{
  padding:9px 22px;border-radius:99px;border:1px solid var(--green);color:var(--green);
  background:rgba(52,211,153,.08);cursor:pointer;font-weight:700;font-size:.88rem;transition:.25s
}
.done-btn:hover{background:rgba(52,211,153,.2)}
.done-btn.on{background:var(--green);color:#06281c;border-color:var(--green);cursor:default}
.done-btn.on::before{content:'✓ '}
.pagemark{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--dim)}

/* ---------- 游戏大厅 ---------- */
.games-intro{text-align:center;color:var(--muted);margin-bottom:10px}
details.game{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);margin:18px 0;overflow:hidden}
details.game summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 26px;transition:.2s
}
details.game summary::-webkit-details-marker{display:none}
details.game summary:hover{background:rgba(148,163,184,.06)}
details.game .gico{font-size:2rem;flex:none}
details.game .gt{font-weight:800;font-size:1.08rem}
details.game .gt small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:2px}
details.game .gxp{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--amber);border:1px dashed var(--amber);border-radius:99px;padding:3px 12px;white-space:nowrap}
details.game .gbadge{font-size:1.2rem;filter:grayscale(1);opacity:.35;transition:.3s}
details.game.won .gbadge{filter:none;opacity:1}
details.game[open] .gwrap{border-top:1px solid var(--line);padding:26px}
.gdesc{color:var(--muted);font-size:.9rem;margin-bottom:16px}

/* 游戏1 启动流水线 */
.pipe-slots{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.pslot{
  border:1.5px dashed var(--line2);border-radius:10px;padding:7px 13px;font-size:.82rem;
  color:var(--dim);min-width:120px;text-align:center;transition:.25s
}
.pslot.fill{border-style:solid;border-color:var(--green);color:var(--green);background:rgba(52,211,153,.1);animation:pop .3s}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:9px 16px;border-radius:99px;border:1px solid var(--line2);background:rgba(148,163,184,.08);
  color:var(--text);cursor:pointer;font-size:.88rem;transition:.2s;user-select:none
}
.chip:hover{border-color:var(--cyan);transform:translateY(-2px)}
.chip.shake{animation:shake .4s;border-color:var(--red)}
.hearts{font-size:1.1rem;letter-spacing:3px}
.gbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.gmsg{font-size:.9rem;min-height:1.5em;flex:1;min-width:200px}
.gmsg.ok{color:var(--green)}.gmsg.err{color:var(--red)}.gmsg.hint{color:var(--amber)}

/* 游戏2 POST 侦探 */
.led{
  background:#020509;border:2px solid #1e293b;border-radius:12px;padding:14px 30px;margin:0 auto 14px;
  width:max-content;box-shadow:inset 0 0 30px rgba(0,0,0,.9),0 0 22px rgba(34,211,238,.12)
}
.led .code{
  font-family:var(--mono);font-size:2.4rem;font-weight:800;letter-spacing:8px;color:#fb923c;
  text-shadow:0 0 14px rgba(251,146,60,.8);text-align:center
}
.led .cap{font-size:.68rem;color:#475569;text-align:center;letter-spacing:.25em;font-family:var(--mono)}
.post-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.post-opts{grid-template-columns:1fr}}
.post-opts button{
  padding:13px 16px;border-radius:10px;border:1px solid var(--line2);background:rgba(11,16,32,.6);
  color:var(--text);cursor:pointer;text-align:left;font-size:.9rem;transition:.2s
}
.post-opts button:hover{border-color:var(--cyan)}
.post-opts button.right{border-color:var(--green);background:rgba(52,211,153,.15)}
.post-opts button.wrong{border-color:var(--red);animation:shake .35s}
.combo{color:var(--pink);font-weight:800}

/* 游戏3 GRUB 实验室 */
.grub-goal{background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.35);border-radius:12px;padding:14px 18px;margin-bottom:14px;font-size:.94rem}
.grub-task-num{color:var(--violet);font-weight:800}
.fake-cmd{display:flex;flex-wrap:wrap;gap:9px}
.fake-cmd .chip.sel{border-color:var(--cyan);background:rgba(34,211,238,.16);box-shadow:0 0 12px rgba(34,211,238,.25)}

/* 游戏4 瘦身大亨 */
.slim-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.slim-size{font-family:var(--mono);font-size:2.3rem;font-weight:800;color:var(--cyan);text-shadow:0 0 18px rgba(34,211,238,.4)}
.slim-size small{font-size:1rem;color:var(--muted)}
.sizebar{height:18px;border-radius:99px;background:rgba(148,163,184,.12);overflow:hidden;margin:10px 0 20px;border:1px solid var(--line)}
.sizebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f87171,#fbbf24,#34d399);transition:width .7s;border-radius:99px}
.slim-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.slim-card{
  border:1px solid var(--line2);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.2s;
  background:rgba(11,16,32,.55)
}
.slim-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.slim-card h5{font-size:.92rem;margin-bottom:5px}
.slim-card p{font-size:.76rem;color:var(--muted);margin:0}
.slim-card .delta{font-family:var(--mono);color:var(--green);font-size:.82rem}
.slim-card.used{opacity:.35;pointer-events:none;border-color:var(--green)}
.slim-card.boom.used{border-color:var(--red)}

/* 游戏5 格式大师 */
.fmt-opts{display:flex;flex-wrap:wrap;gap:10px}
.fmt-opts button{padding:11px 22px;border-radius:10px;border:1px solid var(--line2);background:rgba(11,16,32,.6);color:var(--text);font-family:var(--mono);font-weight:700;cursor:pointer;transition:.2s}
.fmt-opts button:hover{border-color:var(--cyan);transform:translateY(-2px)}
.fmt-opts button.right{border-color:var(--green);background:rgba(52,211,153,.18)}
.fmt-opts button.wrong{border-color:var(--red);animation:shake .35s}
.scen{background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.3);border-radius:12px;padding:16px 20px;margin-bottom:16px;font-size:1rem}

/* 游戏6 考试 */
.exam-head{display:flex;justify-content:space-between;font-family:var(--mono);color:var(--muted);font-size:.85rem;margin-bottom:12px}

/* 通用游戏结束面板 */
.gover{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.4);border-radius:12px;padding:20px;text-align:center;margin-top:14px}
.gwin{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.4);border-radius:12px;padding:20px;text-align:center;margin-top:14px}
.gwin .big{font-size:2rem;margin-bottom:6px}

/* ---------- 勋章墙 ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.badge{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px 10px;text-align:center;transition:.3s
}
.badge .em{font-size:2rem;display:block;margin-bottom:8px;filter:grayscale(1);opacity:.28}
.badge.got{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.06)}
.badge.got .em{filter:none;opacity:1}
.badge .nm{font-size:.8rem;color:var(--muted)}
.badge.got .nm{color:var(--amber)}

/* ---------- 速查表 / footer ---------- */
footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 20px;text-align:center;color:var(--dim);font-size:.85rem}

/* ---------- 弹窗 / toast / 特效 ---------- */
#toastBox{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{
  background:#0c1a2b;border:1px solid var(--cyan);border-radius:12px;padding:10px 18px;
  font-size:.88rem;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:slidein .3s;color:var(--text)
}
.toast b{color:var(--amber)}
@keyframes slidein{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.confetti{position:fixed;top:-30px;z-index:299;pointer-events:none;animation:fall 3s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(560deg);opacity:.6}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes blink{50%{opacity:.25}}
.cursor::after{content:'▊';animation:blink 1s infinite;color:var(--green)}

/* 证书 */
#certModal{position:fixed;inset:0;z-index:400;background:rgba(4,7,15,.85);backdrop-filter:blur(6px);display:none;place-items:center;padding:20px}
#certModal.show{display:grid}
.cert{
  max-width:560px;width:100%;background:linear-gradient(160deg,#10203a,#0a1224);
  border:2px solid var(--amber);border-radius:18px;padding:40px;text-align:center;
  box-shadow:0 0 60px rgba(251,191,36,.25)
}
.cert h3{font-size:1.6rem;color:var(--amber);margin-bottom:6px}
.cert .name{font-size:1.4rem;margin:14px 0;color:var(--cyan);font-weight:800}
.cert .meta{color:var(--muted);font-size:.85rem;margin-top:14px}
.cert input{
  display:block;margin:14px auto;padding:10px 18px;border-radius:10px;min-width:240px;
  border:1px solid var(--line2);background:rgba(11,16,32,.7);color:var(--text);text-align:center;font-size:1rem
}
.cert .seal{font-size:3.4rem;margin:10px 0}

details.ref{border:1px solid var(--line);border-radius:12px;margin:14px 0;background:var(--panel2)}
details.ref summary{cursor:pointer;padding:12px 18px;color:var(--cyan);font-weight:600;font-size:.9rem;list-style:none}
details.ref summary::before{content:'▸ ';}
details.ref[open] summary::before{content:'▾ '}
details.ref .refbody{padding:0 18px 16px}

@media(max-width:720px){
  section.card{padding:24px 20px}
  nav{padding:10px 12px;gap:8px}
  .hud .xpbar{width:70px}
  nav .links{display:none}
}