/* 《404 旅馆：最后一次请求》 */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#07090d;
  background-image:radial-gradient(ellipse at 50% 30%,#0d1118 0%,#07090d 70%);
  display:flex;align-items:center;justify-content:center;
  font-family:"Verdana","Geneva","PingFang SC","Microsoft YaHei",sans-serif;
  overflow:hidden;
}

/* ---------- CRT 质感 ---------- */
#crt{
  position:fixed;inset:0;pointer-events:none;z-index:99;
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px);
  animation:crt-flicker 4.2s infinite;
}
@keyframes crt-flicker{
  0%,100%{opacity:1}
  96%{opacity:1}
  97%{opacity:.86}
  98%{opacity:1}
  99%{opacity:.93}
}

/* ---------- 浏览器窗框 ---------- */
#browser{
  width:min(1000px,97vw);
  background:#c8c4bc;
  border:2px solid;border-color:#e8e6e0 #6f6b62 #6f6b62 #e8e6e0;
  box-shadow:0 26px 70px rgba(0,0,0,.65);
}
#titlebar{
  background:linear-gradient(#33507e,#22375c);
  color:#e8e6e0;font-size:12px;padding:4px 8px;
  display:flex;justify-content:space-between;align-items:center;
  letter-spacing:.5px;
}
.win-btns{display:flex;gap:3px}
.wb{
  display:inline-block;width:16px;height:14px;text-align:center;line-height:12px;
  background:#c8c4bc;color:#333;font-size:11px;cursor:pointer;
  border:1px solid;border-color:#e8e6e0 #6f6b62 #6f6b62 #e8e6e0;
}
.wb:active{border-color:#6f6b62 #e8e6e0 #e8e6e0 #6f6b62}
#toolbar{
  display:flex;gap:8px;align-items:center;
  padding:5px 8px;font-size:12px;color:#333;
  border-bottom:1px solid #8a867e;
}
.tb-btn{
  background:#d4d0c8;padding:2px 10px;cursor:pointer;user-select:none;
  border:1px solid;border-color:#e8e6e0 #6f6b62 #6f6b62 #e8e6e0;
}
.tb-btn:active{border-color:#6f6b62 #e8e6e0 #e8e6e0 #6f6b62}
#clue-badge{color:#7a2a24;margin-left:2px}
#addr-wrap{flex:1;display:flex;align-items:center;gap:6px;margin-left:8px}
#addressbar{
  flex:1;background:#fff;color:#222;
  border:1px solid;border-color:#6f6b62 #e8e6e0 #e8e6e0 #6f6b62;
  padding:2px 8px;font-family:"Courier New",monospace;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#statusbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:3px 10px;font-size:12px;color:#333;
  border-top:1px solid #8a867e;
}
#objective{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clock{color:#555;font-family:"Courier New",monospace}

/* ---------- 视口 ---------- */
#viewport{
  position:relative;background:#000;
  aspect-ratio:16/9;overflow:hidden;
  border:1px solid #6f6b62;margin:0 3px;
}
#viewport.glitch{animation:glitch .55s steps(2) both}
@keyframes glitch{
  0%{filter:none;transform:none}
  20%{filter:invert(.9) contrast(2);transform:translateX(-6px)}
  40%{filter:none;transform:translateX(4px) scaleY(.96)}
  60%{filter:brightness(3) saturate(0);transform:none}
  80%{filter:none;transform:translateY(3px)}
  100%{filter:none;transform:none}
}

/* ---------- 像素舞台 ---------- */
#stage-wrap{position:absolute;inset:0;display:none}
#stage{width:100%;height:100%;display:block;image-rendering:pixelated}
#hotspots{position:absolute;inset:0}
.hs{position:absolute;cursor:pointer}
.hs:hover{
  outline:1px dashed rgba(232,228,216,.5);outline-offset:1px;
  background:rgba(255,255,255,.04);
}
.hs .lbl{
  display:none;position:absolute;left:0;top:-20px;
  background:rgba(5,8,10,.9);color:#e8e4d8;
  font-size:11px;padding:2px 6px;white-space:nowrap;
  border:1px solid rgba(232,228,216,.25);
  font-family:"Songti SC","SimSun",serif;
  z-index:5;
}
.hs:hover .lbl{display:block}
.sign{
  position:absolute;pointer-events:none;
  color:#c8c0a8;font-size:10px;letter-spacing:2px;
  font-family:"Songti SC","SimSun",serif;
  text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.8);
}
.sign.dim{color:#565650}
.sign.red{color:#d86a60}
.sign.warm{color:#f4cf7a;text-shadow:0 0 8px rgba(244,207,122,.55)}

/* ---------- 旁白 ---------- */
#caption{
  display:none;position:absolute;left:0;right:0;bottom:0;
  background:rgba(4,7,9,.85);color:#e6e1d3;
  font-family:"Songti SC","SimSun",serif;
  font-size:14px;line-height:1.7;letter-spacing:.5px;
  padding:10px 18px;min-height:46px;
  border-top:1px solid rgba(232,228,216,.12);
  white-space:pre-line;cursor:pointer;
}

/* ---------- 提示 ---------- */
#toast{
  position:absolute;top:10px;right:10px;z-index:40;
  background:rgba(5,8,10,.92);color:#e8e4d8;
  font-size:12px;padding:6px 12px;
  border:1px solid rgba(232,228,216,.3);
  opacity:0;transition:opacity .3s;pointer-events:none;
  font-family:"Songti SC","SimSun",serif;
  max-width:60%;
}
#toast.show{opacity:1}

/* ---------- 覆盖面板 ---------- */
#overlay{
  position:absolute;inset:0;z-index:30;
  background:rgba(2,4,6,.72);
  display:none;align-items:center;justify-content:center;
}
#overlay.show{display:flex}
.panel{
  width:min(620px,92%);max-height:88%;overflow-y:auto;
  padding:20px 26px;font-size:13px;line-height:1.9;
  white-space:pre-line;
}
.panel h3{font-size:14px;letter-spacing:4px;margin-bottom:10px;font-weight:normal}
.panel .close-row{margin-top:14px;text-align:right;white-space:normal}
.panel button{
  font-size:12px;padding:3px 14px;cursor:pointer;
  font-family:inherit;
}
.panel.paper{
  background:#e8e4d8;color:#2b2b2b;
  font-family:"Songti SC","SimSun",serif;
  border:2px solid #8a867e;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.panel.paper button{
  background:#d4d0c8;border:1px solid;
  border-color:#f0eee8 #6f6b62 #6f6b62 #f0eee8;color:#222;
}
.panel.paper button:active{border-color:#6f6b62 #f0eee8 #f0eee8 #6f6b62}
.panel.paper pre{font-family:"Courier New",monospace;font-size:12px;line-height:1.8;white-space:pre-wrap}
.panel.src{
  background:#f4f2ea;color:#333;
  font-family:"Courier New",monospace;
  border:2px solid #8a867e;
}
.panel.src pre{font-size:12px;line-height:1.9;white-space:pre-wrap}
.panel.src .cm{color:#2a7a2a}
.panel.src a{color:#1b3fbf;text-decoration:underline;cursor:pointer}
.panel.src button{background:#d4d0c8;border:1px solid #8a867e;color:#222}
.panel.term{
  width:min(700px,94%);
  background:#050d08;color:#79c48b;
  font-family:"Courier New",monospace;
  border:2px solid #1e3a2a;
  box-shadow:0 0 40px rgba(60,160,100,.12) inset;
}
.panel.term button{
  background:#0a1a10;color:#79c48b;border:1px solid #2c5a3e;
}
.panel.term button:disabled{color:#3a5a46;border-color:#1e3a2a;cursor:default}
.panel.term input{
  background:#04120a;color:#a8e0b8;border:1px solid #2c5a3e;
  font-family:inherit;font-size:12px;padding:2px 8px;width:150px;
}
.panel.term input:disabled{border-color:#16281d;color:#3a5a46}
.panel.blue{
  background:#101c3f;color:#dfe6ff;
  font-family:"Courier New",monospace;
  border:2px solid #2c3f7a;
  text-align:center;
}
.panel.blue .nf-h{
  display:inline-block;background:#dfe6ff;color:#101c3f;
  padding:1px 14px;font-size:15px;letter-spacing:2px;margin-bottom:14px;
}
.panel.blue input{
  background:#0a1330;color:#dfe6ff;border:1px solid #3c52a0;
  font-family:inherit;font-size:13px;padding:3px 10px;width:180px;
  text-align:center;
}
.panel.blue button{
  background:#182a5e;color:#dfe6ff;border:1px solid #3c52a0;
}
.panel.black{
  background:#040506;color:#cfc9b8;
  font-family:"Courier New","Songti SC",monospace;
  border:1px solid #222;
  text-align:left;
}
.panel.black .quote{
  text-align:center;font-family:"Songti SC","SimSun",serif;
  font-size:16px;letter-spacing:2px;line-height:2.4;color:#e8e4d8;
}
.panel.black button{
  background:#111;color:#cfc9b8;border:1px solid #444;
}
.tlog{
  height:230px;overflow-y:auto;background:#030a06;
  border:1px solid #16281d;padding:8px 10px;margin:8px 0;
  font-size:12px;line-height:1.75;white-space:pre-wrap;
}
.tlog .hl{color:#c8e8a0}
.tbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;white-space:normal}
.tbar .tf.on{background:#1c3a28;color:#c8e8b0}
.tfoot{min-height:20px;font-size:12px;color:#5a9a6e;white-space:pre-wrap}
.err-t{color:#d86a60}
.warn-t{color:#d8c06a}

/* 301 分拣谜题 */
.sort-rules{
  border:1px dashed #8a867e;padding:8px 14px;margin-bottom:10px;
  font-family:"Courier New",monospace;font-size:12px;line-height:1.9;
}
.sort-area{display:flex;gap:18px;white-space:normal}
.sort-col{flex:1}
.sort-col h4{font-size:12px;font-weight:normal;letter-spacing:2px;margin-bottom:8px;color:#555}
.letter,.slot{
  display:block;width:100%;text-align:left;
  margin-bottom:6px;padding:5px 10px;font-size:12px;
  font-family:"Courier New",monospace;cursor:pointer;
}
.letter{background:#f6f3e8;border:1px solid #9a9488;color:#333}
.letter.sel{background:#3a4a44;color:#f6f3e8;border-color:#3a4a44}
.letter.done{opacity:.35;cursor:default;text-decoration:line-through}
.slot{background:#d8d4c8;border:1px solid #8a867e;color:#333}
.slot:hover{background:#c8c4b4}
.sort-msg{min-height:40px;font-size:12px;color:#5a4632;margin-top:8px}
.shake{animation:shake .35s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
}

/* ---------- 旧网页（开场 / 结局） ---------- */
#page{position:absolute;inset:0;display:none;overflow-y:auto;background:#e8e4d8}
.oldpage{
  min-height:100%;padding:52px 64px;
  background:#e8e4d8;color:#222;
  font-family:"Times New Roman","Songti SC","SimSun",serif;
}
.oldpage h1{font-size:26px;font-weight:bold;margin-bottom:10px}
.oldpage hr{border:none;border-top:1px solid #9a9488;margin:12px 0}
.oldpage p{margin:10px 0;font-size:14px;line-height:1.8}
.oldpage .zh{font-family:"Songti SC","SimSun",serif;color:#444}
.oldpage .btns{margin:22px 0}
.oldpage button{
  font-size:13px;padding:3px 16px;margin-right:10px;cursor:pointer;
  background:#d4d0c8;color:#222;
  border:2px solid;border-color:#f0eee8 #6f6b62 #6f6b62 #f0eee8;
  font-family:"Songti SC","SimSun",serif;
}
.oldpage button:active{border-color:#6f6b62 #f0eee8 #f0eee8 #6f6b62}
.oldpage .bootmsg{color:#7a2a24;font-family:"Songti SC","SimSun",serif;min-height:22px}
.oldpage .fine{color:#8a867e;font-size:11px;margin-top:46px;font-family:"Courier New",monospace}
.oldpage.flick{animation:pageflick .28s steps(2)}
@keyframes pageflick{
  0%{opacity:1}25%{opacity:.2}50%{opacity:.9}75%{opacity:.4}100%{opacity:1}
}
/* 结局页 */
.homecard{
  display:flex;gap:16px;align-items:center;
  border:1px solid #9a9488;background:#f2efe4;
  padding:16px 20px;margin:20px 0;max-width:420px;
}
.homecard canvas{width:64px;height:64px;image-rendering:pixelated;border:1px solid #9a9488;background:#0e1524}
.hc-title{font-size:17px;letter-spacing:2px}
.hc-sub{font-size:12px;color:#777;margin:4px 0 8px}
.homecard a{color:#1b3fbf;font-size:13px;cursor:pointer;text-decoration:underline}
.counter{font-family:"Courier New",monospace;font-size:12px;color:#555;letter-spacing:2px}