/* ============================================================
   灰の小站 — 1999 年个人主页样式表
   （本站用 FrontPage 4.0 制作 / 最佳浏览分辨率 800x600）
   ============================================================ */

:root{
  --bg:#000008;
  --panel:#000030;
  --panel2:#000018;
  --ink:#d8d8d8;
  --dim:#7a7a7a;
  --link:#00ffff;
  --visited:#ff88ff;
  --hot:#ff2020;
  --wood:#3a2410;
  --wood-dark:#1a0e05;
  --page-bg:#050510;
  --lime:#00ff00;
  --yellow:#ffff00;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:"Times New Roman", "Songti SC", SimSun, serif;
  font-size:15px;
  line-height:1.7;
}

body{
  background-color:#000008;
  background-image:
    radial-gradient(1px 1px at 6px 8px, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 34px 40px, rgba(255,255,255,.20) 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 16px, rgba(255,255,255,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 20px 62px, rgba(255,255,255,.16) 50%, transparent 51%),
    linear-gradient(0deg, rgba(0,0,60,.35), rgba(0,0,20,.35));
  background-size:80px 80px, 80px 80px, 80px 80px, 80px 80px, auto;
  animation:stardrift 120s linear infinite;
}
@keyframes stardrift{
  from{ background-position:0 0,0 0,0 0,0 0,0 0; }
  to{ background-position:0 240px,0 240px,0 240px,0 240px,0 0; }
}

a{ color:var(--link); }
a:visited{ color:var(--visited); }
a:hover{ color:#fff; background:var(--hot); }

.center{ text-align:center; }
.dim{ color:var(--dim); }
.tiny{ font-size:11px; }
.bold{ font-weight:bold; }
.hidden{ display:none !important; }

/* ---------- overlays ---------- */
#noise-layer{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation:noisejump .12s steps(2) infinite;
}
@keyframes noisejump{ 0%{transform:translate(0,0);} 50%{transform:translate(-3px,2px);} 100%{transform:translate(2px,-2px);} }
#scanlines{
  position:fixed; inset:0; z-index:9001; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 3px 4px);
  animation:crtflicker 6s infinite;
}
@keyframes crtflicker{ 0%,96%,100%{opacity:.5;} 97%{opacity:.25;} 98%{opacity:.8;} 99%{opacity:.4;} }
#vignette{
  position:fixed; inset:0; z-index:9002; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.85) 100%);
}
#darkness-tint{
  position:fixed; inset:0; z-index:8200; pointer-events:none; background:#000; opacity:0;
  transition:opacity 1.8s ease;
}
#darkness-iris{
  position:fixed; inset:0; z-index:8300; pointer-events:none; opacity:0;
  transition:opacity 1.8s ease, box-shadow 1.8s ease;
}
#face-flash{
  position:fixed; inset:0; z-index:9500; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-size:64px; color:#ff1a1a; opacity:0; white-space:pre; line-height:1;
  text-shadow:0 0 20px #ff0000, 0 0 60px #8b0000; background:rgba(0,0,0,.6);
}
#face-flash.show{ animation:facein .28s steps(1) forwards; }
@keyframes facein{ 0%{opacity:0;} 10%{opacity:1;} 70%{opacity:.9;} 100%{opacity:0;} }

/* ---------- 页顶滚动乱码 ---------- */
#garble-bar{ position:relative; z-index:140; height:22px; overflow:hidden; background:#000; border-bottom:1px solid #200; }
.garble-track{
  position:absolute; top:1px; left:0; white-space:nowrap;
  font-family:"Courier New", monospace; font-size:12px; letter-spacing:1px;
  color:#7a2020; text-shadow:0 0 6px rgba(139,0,0,.55); will-change:transform;
}
#garble-a{ animation:garble-a 44s linear infinite; }
#garble-b{ animation:garble-b 44s linear infinite; }
@keyframes garble-a{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@keyframes garble-b{ from{transform:translateX(100%);} to{transform:translateX(0);} }

/* ---------- 假浏览器 ---------- */
#browser-chrome{ position:relative; z-index:100; background:#1b1b1f; border-bottom:1px solid #000; font-size:11px; box-shadow:0 2px 0 #000; font-family:"Courier New",monospace; }
.chrome-row{ display:flex; align-items:center; gap:6px; padding:4px 8px; background:#2a2a30; }
.chrome-btn{ width:16px; height:14px; line-height:12px; text-align:center; background:#3a3a42; border:1px solid #555; color:#aaa; font-size:9px; }
.chrome-title{ color:#c9c6c0; font-size:11px; max-width:280px; overflow:hidden; white-space:nowrap; }
.chrome-url{ flex:1; margin-left:8px; padding:2px 8px; background:#0b0b0d; border:1px solid #111; color:#7fdc9a; font-size:11px; overflow:hidden; white-space:nowrap; }
.chrome-menu{ display:flex; gap:14px; padding:3px 12px; color:#9a9a9a; border-top:1px solid #000; }

/* ---------- 欢迎跑马灯 ---------- */
.welcome-marquee{
  display:block; margin:0; padding:3px 0;
  background:#000060; color:#ffff00; font-size:12px; letter-spacing:1px;
  border-bottom:1px solid #000030;
}

/* ---------- 木框主表 ---------- */
#layout.woodframe{
  width:100%; max-width:1000px; margin:10px auto;
  background:var(--wood);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(91deg, rgba(255,255,255,.03) 0 1px, transparent 1px 16px),
    linear-gradient(180deg,#5a3a1c,#3a2410 55%,#241408);
  border:6px ridge #8a5a2a;
  padding:8px;
  transition:background 1.8s ease;
}
.leftcol{ width:206px; vertical-align:top; padding:0 8px 0 0; }
.maincol{ vertical-align:top; padding:0; }

.panel{ background:var(--panel); border:2px outset #5566aa; margin-bottom:8px; transition:background 1.8s ease; }
.panel-head{
  background:#000080; color:#ffff00; font-size:12px; font-weight:bold;
  letter-spacing:3px; padding:3px 8px; border-bottom:1px solid #000; text-align:center;
}
.panel-body{ padding:8px; font-size:12px; }
.hr-mini{ border-top:1px solid #333; margin:5px 0; }

.nav-links a{ display:block; padding:3px 2px; font-size:12px; text-decoration:none; border-bottom:1px dotted #333; }
.nav-links a::before{ content:"» "; color:#00ff00; }
.nav-links a:hover{ background:#000080; }
.nav-links a.dead::after{ content:" (404)"; color:#666; font-size:10px; }
.nav-links a.dead:hover::after{ color:#ff6060; }

.counter{
  font-family:"Courier New", monospace; background:#000; color:var(--lime);
  border:2px inset #333; padding:3px 6px; letter-spacing:4px; font-size:16px;
  text-align:center; margin:2px 0; text-shadow:0 0 8px rgba(0,255,0,.6);
}

.btn88{
  display:inline-block; width:72px; margin:2px; padding:5px 2px;
  font-family:"Courier New", monospace; font-size:8px; line-height:1.15;
  border:2px outset #888; background:#000080; color:#ffff00; text-align:center;
}

.old-btn{
  display:block; width:100%; margin-top:5px; cursor:pointer;
  background:#c0c0c0; color:#000; border:2px outset #ffffff;
  padding:3px 8px; font-family:"Times New Roman", serif; font-size:12px;
  box-shadow:1px 1px 0 #000;
}
.old-btn:hover{ background:#d8d8d8; }
.old-btn:active{ border-style:inset; }
.old-btn.danger{ color:#800000; }

/* ---------- 站内搜索 ---------- */
.search-form{ display:flex; gap:4px; }
#search-input{
  flex:1; min-width:0; background:#000; color:var(--lime);
  border:2px inset #5566aa; padding:4px 6px; font-family:"Courier New",monospace; font-size:11px; outline:none;
}
.search-form button{
  background:#c0c0c0; color:#000; border:2px outset #fff; padding:3px 8px;
  font-family:"Times New Roman",serif; font-size:12px; cursor:pointer; white-space:nowrap;
}
.search-form button:active{ border-style:inset; }
.search-results{ margin-top:6px; background:#000010; border:1px solid #333; padding:8px; font-size:11px; color:var(--ink); line-height:1.6; }
.search-results .sr-title{ color:#ff8080; font-weight:bold; margin-bottom:4px; }
.search-results .sr-item{ color:#ffff00; }
.search-results .no{ color:#888; }

/* ---------- 主页面 ---------- */
.page{
  background:var(--page-bg); border:2px inset #333;
  padding:18px 22px; min-height:440px;
  color:var(--ink); font-family:"Times New Roman","Songti SC",SimSun,serif;
  transition:background 1.8s ease;
}

.site-title{
  text-align:center; font-size:30px; color:var(--yellow); letter-spacing:3px;
  text-shadow:2px 2px 0 #800000; margin:0 0 2px;
}
.site-sub{ text-align:center; font-size:11px; color:#888; letter-spacing:6px; margin-bottom:6px; }
.site-meta{ text-align:center; font-size:11px; color:#999; border-bottom:1px solid #444; padding-bottom:6px; margin-bottom:14px; }
.site-meta .wx{ color:#ff8080; }

.wn-title{ color:var(--lime); font-size:15px; font-weight:bold; letter-spacing:2px; margin:16px 0 6px; }
.wn-item{ font-size:13px; padding:4px 0; border-bottom:1px dotted #333; }
.wn-date{ color:var(--lime); font-size:11px; margin-right:6px; font-family:"Courier New",monospace; }
.wn-item a{ color:var(--link); }
.wn-more{ font-size:11px; color:#666; margin-top:4px; }

.article-title{
  text-align:center; font-size:24px; color:var(--yellow); letter-spacing:1px;
  margin:0 0 4px; line-height:1.35; text-shadow:1px 1px 0 #400;
}
.article-sub{ text-align:center; font-size:12px; color:#aaa; font-style:italic; margin:0 0 6px; }
.article-meta{ text-align:center; font-size:11px; color:#888; border-bottom:1px solid #444; padding-bottom:6px; margin-bottom:14px; }
.article-body{ font-size:15px; line-height:1.95; }
.article-body p{ text-indent:2em; margin:0 0 10px; }
.article-body p.noindent{ text-indent:0; }
.dropcap::first-letter{ float:left; font-size:40px; line-height:34px; padding:2px 6px 0 0; color:#ff3030; font-weight:bold; }

hr.hr3d{ border:0; border-top:1px solid #666; border-bottom:1px solid #000; height:0; margin:10px 0; }
hr.hr2{
  border:0; height:3px; margin:14px 0;
  background:linear-gradient(#800000,#300000);
}

/* 纸片 / 附件 */
.note-slip{
  position:relative; display:block; background:#d8cfb0; color:#1a1206;
  border:1px solid #6a4a1a; box-shadow:3px 3px 0 rgba(0,0,0,.5);
  padding:12px 14px; margin:14px 0; transform:rotate(-.7deg);
  font-family:"Courier New", monospace;
}
.note-slip.tilt-r{ transform:rotate(.9deg); }
.slip-cap{ font-size:10px; letter-spacing:3px; color:#8a2a10; border-bottom:1px dotted #8a6a30; padding-bottom:3px; margin-bottom:8px; }
.stamp{
  position:absolute; right:8px; bottom:6px; width:58px; height:58px;
  border:3px solid rgba(160,0,0,.6); border-radius:50%; color:rgba(160,0,0,.65);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:10px; font-weight:bold; letter-spacing:2px; transform:rotate(-16deg); line-height:1.1;
  pointer-events:none; box-shadow:inset 0 0 0 1px rgba(160,0,0,.35);
}
.poem-slip{ white-space:pre-wrap; font-size:15px; line-height:2.1; margin:0; }
.typewriter{
  font-family:"Courier New", monospace; background:#000; color:var(--lime);
  border:2px inset #2a4a30; padding:12px 14px; margin:14px 0;
  word-break:break-all; font-size:13px; line-height:1.85; user-select:all;
  text-shadow:0 0 8px rgba(0,255,0,.4);
}
.hidden-text{ color:var(--page-bg); user-select:text; }
.hidden-text::selection{ color:#ff2020; background:#000; }
.hidden-text::-moz-selection{ color:#ff2020; background:#000; }

.classified{ margin:14px 0; border:1px dashed #666; background:#0a0a18; padding:10px 12px; }
.classified .class-title{ font-size:11px; letter-spacing:3px; color:#ff8080; font-weight:bold; border-bottom:1px dotted #444; padding-bottom:3px; margin-bottom:6px; }
.classified p{ text-indent:0; margin:0 0 6px; font-size:13px; }

.pullquote{ text-align:center; color:#ffb000; font-style:italic; font-size:16px; border-top:1px solid #444; border-bottom:1px solid #444; padding:8px 0; margin:14px 0; text-indent:0; }

/* ---------- 留言簿 ---------- */
.guestbook{ margin-top:12px; background:var(--panel2); border:2px outset #5566aa; padding:10px 12px; }
.gb-head{ text-align:center; color:var(--yellow); font-weight:bold; letter-spacing:6px; font-size:13px; border-bottom:1px solid #000080; padding-bottom:4px; margin-bottom:8px; }
.gb-item{ border-bottom:1px dotted #333; padding:5px 0; font-size:12px; line-height:1.6; }
.gb-name{ color:#ff8080; font-weight:bold; margin-right:6px; }
.gb-date{ color:#666; font-size:10px; font-family:"Courier New",monospace; }
.gb-form{ display:flex; gap:6px; margin-top:8px; }
#guestbook-input{
  flex:1; min-width:0; background:#000; color:var(--lime);
  border:2px inset #5566aa; padding:5px 8px; font-family:"Courier New",monospace; font-size:12px; outline:none;
}
.gb-form .old-btn{ width:auto; margin:0; }

/* ---------- 页脚 ---------- */
.site-footer{ max-width:1000px; margin:0 auto 40px; padding:0 8px; text-align:center; color:#888; }
#layout{ transition:filter 1.8s ease; }

.blink{ animation:blink 1s steps(1) infinite; }
.blink-red{ color:#ff3030; animation:blink .8s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0;} }
.screen-shake{ animation:screenshake .4s; }
@keyframes screenshake{
  0%,100%{transform:translate(0,0);} 10%{transform:translate(-8px,4px);} 30%{transform:translate(7px,-5px);}
  50%{transform:translate(-5px,-3px);} 70%{transform:translate(6px,4px);} 90%{transform:translate(-3px,2px);}
}
.type-line{ display:block; min-height:1.4em; }
.cursor::after{ content:"_"; animation:blink .7s steps(1) infinite; }
.ending-quote{ font-size:16px; line-height:2.1; border-left:3px solid #800000; padding-left:14px; }

.glitch{ position:relative; }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; opacity:.7; }
.glitch::before{ color:#ff2020; animation:glitch-a 3s infinite linear alternate-reverse; }
.glitch::after{ color:#00c0ff; animation:glitch-b 3.6s infinite linear alternate-reverse; }
@keyframes glitch-a{ 0%{clip-path:inset(0 0 85% 0);transform:translate(-2px,0);} 50%{clip-path:inset(40% 0 40% 0);transform:translate(2px,-1px);} 100%{clip-path:inset(70% 0 10% 0);transform:translate(-1px,1px);} }
@keyframes glitch-b{ 0%{clip-path:inset(60% 0 20% 0);transform:translate(2px,0);} 50%{clip-path:inset(10% 0 75% 0);transform:translate(-2px,1px);} 100%{clip-path:inset(45% 0 45% 0);transform:translate(1px,-1px);} }

@media (max-width:760px){
  #browser-chrome{ display:none; }
  .mobile-hide{ display:none !important; }

  /* 木框表改成一列纵向堆叠：左栏在上，正文在下 */
  #layout.woodframe{ display:block; width:auto; max-width:100%; margin:8px 6px; padding:6px; border-width:4px; }
  #layout.woodframe tbody,
  #layout.woodframe tr,
  #layout.woodframe td{ display:block; }
  .leftcol{ width:auto; padding:0; margin-bottom:10px; }
  .maincol{ width:auto; padding:0; }

  .page{ padding:14px 12px; min-height:0; }
  .site-title{ font-size:22px; letter-spacing:1px; }
  .article-title{ font-size:19px; }
  .article-body{ font-size:16px; line-height:1.9; }
  .dropcap::first-letter{ font-size:32px; line-height:28px; }
  .poem-slip{ font-size:14px; }

  /* 触摸友好：输入框 ≥16px 防止 iOS 聚焦缩放，按钮加高 */
  #search-input,
  #guestbook-input{ font-size:16px; padding:8px 10px; }
  .search-form button,
  .old-btn{ padding:9px 12px; font-size:14px; }
  .search-form button{ min-width:64px; }

  .gb-form{ flex-direction:column; }
  .gb-form .old-btn{ margin-top:6px; }

  .typewriter{ font-size:12px; padding:10px; }
  .ending-quote{ padding-left:10px; }

  /* 隐藏侧栏里最占地方的装饰件，减少滚动 */
  .btn88{ width:64px; }
}