:root{--fg:#ffcc00;--accent:#ff9900;--red:#ff2a1a;--line:#661100;--paper:#efdcb8;--g:#39ff7a;--gd:#1f9e4a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:url("../assets/bg.png") repeat fixed #150000;color:var(--fg);
  font-family:"Courier New",Courier,"PingFang SC","Noto Sans CJK SC",monospace;padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--accent);text-decoration:none}
a:hover{color:#ff0000;background:#fff}
@keyframes blink{50%{opacity:0}}
@keyframes crossGlow{0%,100%{opacity:.3;text-shadow:0 0 2px #f00}50%{opacity:1;text-shadow:0 0 14px #f00,0 0 4px #500}}
.blink{animation:blink 1s infinite steps(1);color:#ff1a1a;font-weight:bold}
.cross{animation:crossGlow .9s infinite ease-in-out;color:#cc0000;font-weight:bold;display:inline-block}
.dim{color:#aa5522}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;gap:8px;align-items:center;
  padding:10px max(12px,env(safe-area-inset-left));padding-top:calc(10px + env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));
  background:rgba(10,0,0,.94);border-bottom:2px dashed #883300;font-size:13px}
.vault{max-width:960px;margin:24px auto 48px;padding:20px;border:3px solid var(--line);background:rgba(10,2,2,.97);
  box-shadow:10px 10px 0 #440000,-5px -5px 0 rgba(50,10,0,.6)}
.head{text-align:center;margin-bottom:12px;position:relative}
.book{font-size:13px;color:#aa5522;letter-spacing:3px}
.head h1{font-size:1.9rem;letter-spacing:4px;margin:8px 0 0;text-shadow:2px 2px 0 #550000}
.sub{color:#aa5522;font-size:12px;margin-top:4px}
.stamp{display:inline-block;margin-top:10px;border:2px solid var(--red);color:var(--red);padding:2px 10px;font-weight:bold;letter-spacing:3px;
  transform:rotate(-3deg);font-size:12px;text-shadow:0 0 6px rgba(255,40,20,.5);opacity:.9}
.query{font-size:13px;color:var(--g);background:#020802;border:1px solid #1f5a2e;padding:6px 10px;margin:12px 0;text-shadow:0 0 5px rgba(57,255,122,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur{animation:blink 1s infinite steps(1)}
.layout{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.index{display:flex;flex-direction:column;gap:6px;border:1px dashed #772200;background:rgba(0,0,0,.4);padding:8px}
.index button{font-family:inherit;font-size:14px;text-align:left;color:var(--paper);background:none;border:1px solid transparent;padding:8px 8px;cursor:pointer;
  border-radius:0;-webkit-appearance:none;white-space:normal;word-break:break-word;touch-action:manipulation}
.index button .n{color:#aa5522}
.index button:hover{border-color:#aa2200}
.index button.on{background:#2a0505;border-color:var(--fg);color:var(--fg)}
.index button.on::before{content:"▶ ";color:var(--red)}
.card{border:2px solid #772200;background:#0a0101;box-shadow:6px 6px 0 #330000;padding:16px;min-height:420px;position:relative;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px)}
.card.flash{animation:cardin .5s steps(5)}
@keyframes cardin{0%{opacity:.2;filter:blur(2px)}100%{opacity:1;filter:none}}
.c-top{display:grid;grid-template-columns:150px 1fr;gap:14px}
.photo{width:150px;height:190px;border:1px solid #aa2200;background:#000;position:relative;overflow:hidden}
.photo canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.photo .lbl{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;color:var(--red);background:rgba(0,0,0,.7);letter-spacing:2px;padding:2px 0}
.photo pre{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;color:#d8d8d8;font-size:11px;line-height:1.15;text-shadow:0 0 4px #fff}
.c-no{font-size:12px;color:#aa5522;letter-spacing:2px}
.c-name{font-size:1.5rem;margin:2px 0 0;color:var(--fg);text-shadow:1px 1px 0 #550000;word-break:break-word}
.c-roma{font-size:12px;color:#cc9966;margin-bottom:8px}
.fields{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.75}
.fields li{display:grid;grid-template-columns:6.5em 1fr;gap:6px;border-bottom:1px dotted #441100}
.fields b{color:var(--accent);font-weight:normal}
.fields span{color:var(--paper);word-break:break-word}
.fields .sync{color:var(--g);text-shadow:0 0 6px rgba(57,255,122,.5)}
.meta{margin:12px 0 0;font-size:13px;line-height:1.75}
.meta div{border-left:3px solid #881100;padding-left:8px;margin-bottom:4px;color:var(--paper)}
.meta b{color:var(--accent);font-weight:normal}
.sec{margin-top:14px;font-size:12px;color:var(--red);letter-spacing:2px;border-bottom:1px dashed #772200;padding-bottom:4px}
.body p{margin:8px 0;font-size:14px;line-height:1.85;color:var(--paper);font-family:"PingFang SC","Noto Sans CJK SC","Courier New",monospace;word-break:break-word}
.rd{background:#000;color:#000;box-shadow:0 0 0 1px #6a1a00;cursor:pointer;padding:0 1px;border-radius:0;letter-spacing:-1px;user-select:none;-webkit-tap-highlight-color:transparent}
.rd.open{background:rgba(255,40,20,.18);color:#ff9a8a;letter-spacing:0;user-select:text}
.quotes{margin-top:6px}
.q{border:1px dashed #772200;background:rgba(40,4,4,.5);padding:8px 10px;margin:8px 0;font-size:14px;line-height:1.8;color:#ffe9b8}
.q small{display:block;color:#aa5522;font-size:11px;letter-spacing:1px}
.q.none{color:#664422;font-style:italic}
.link-btn{display:block;width:100%;margin-top:16px;font-family:inherit;font-size:15px;color:var(--g);background:#020802;border:1px solid var(--gd);padding:12px;cursor:pointer;
  border-radius:0;-webkit-appearance:none;text-shadow:0 0 6px rgba(57,255,122,.6);touch-action:manipulation}
.link-btn:hover{background:#062a10}
.link-msg{margin-top:8px;font-size:13px;color:var(--g);min-height:1.4em;white-space:pre-wrap}
.foot{font-size:12px;margin-top:14px}
.home{text-align:center;margin-top:12px;font-size:14px;line-height:2}
@media (max-width:760px){
  .index button{white-space:nowrap;word-break:normal}
  .vault{margin:12px 8px 32px;padding:14px 10px;box-shadow:5px 5px 0 #440000}
  .head h1{font-size:1.5rem}
  .layout{grid-template-columns:1fr}
  .index{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px}
  .index button{flex:0 0 auto;scroll-snap-align:start;border-color:#551100}
  .card{padding:12px;min-height:0}
}
@media (max-width:460px){
  .c-top{grid-template-columns:110px 1fr;gap:10px}
  .photo{width:110px;height:140px}
  .c-name{font-size:1.25rem}
  .fields li{grid-template-columns:5.2em 1fr;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.blink,.cross,.cur,.card.flash{animation:none}}