guozu/css/app.css

:root{--bg:#0d0b1e;--panel:#1b1e45;--line:#f4f1e6;--gold:#ffcc33;--red:#e4252b;--txt:#f4f1e6;--mut:#8b8fa8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 3px 4px);color:var(--txt);font:14px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.top{padding:18px 24px 6px}
h1{font:28px GZPixel,monospace;margin:0;color:var(--gold);text-shadow:2px 2px 0 #9e1a26}
h1 small{font-size:14px;color:var(--mut);text-shadow:none;margin-left:8px}
.warn{margin:6px 0 0;color:#ff8f8f;font-size:13px}
main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;padding:12px 24px 40px;align-items:start}
@media (max-width:1000px){main{grid-template-columns:1fr}}
.stage{min-width:0}
.screen{position:relative;background:#000;border:4px solid var(--line);box-shadow:6px 6px 0 rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;max-height:78vh}
.screen canvas{display:block;max-width:100%;max-height:calc(78vh - 8px);image-rendering:pixelated}
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(13,11,30,.55);gap:8px}
.gate.hide{display:none}
button{font:14px GZPixel,monospace;background:var(--panel);color:var(--txt);border:2px solid var(--line);padding:6px 14px;cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
button:hover:not(:disabled){background:#2a2f6b}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.5)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--red);border-color:var(--gold);color:#fff;width:100%;padding:10px}
#bigPlay{font-size:22px;padding:12px 26px;background:var(--red);border-color:var(--gold)}
#loadMsg{margin:0;font:13px GZPixel,monospace;color:var(--gold)}
.bar{display:flex;gap:10px;align-items:center;margin-top:10px}
.bar input{flex:1;accent-color:var(--gold)}
#time{font:13px GZPixel,monospace;min-width:110px;text-align:right}
.opts{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:13px}
.opts select{background:var(--panel);color:var(--txt);border:2px solid var(--line);padding:4px 6px;margin-left:6px;font:inherit}
.chk{display:flex;align-items:center;gap:6px}
.card{background:var(--panel);border:2px solid var(--line);padding:12px 14px;margin-bottom:14px;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.card h2{font:16px GZPixel,monospace;margin:0 0 8px;color:var(--gold)}
.card.small p{font-size:12px;color:var(--mut);margin:0}
.hint{font-size:12px;color:var(--mut);margin:4px 0 8px}
.prog{height:10px;border:2px solid var(--line);margin-top:10px;background:#000}
#expBar{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--gold) 0 6px,#d18b16 6px 8px)}
.covers{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.covers a{color:var(--mut);font-size:11px;text-decoration:none;display:flex;flex-direction:column;gap:4px}
.covers a:first-child{flex:16}.covers a:last-child{flex:5.4}
.covers img{width:100%;border:2px solid var(--line);image-rendering:pixelated}
.pubtabs{display:flex;gap:6px;margin-bottom:8px}
.pubtabs button.on{background:var(--red);border-color:var(--gold)}
.field{margin-bottom:8px}
.field b{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--gold);font-weight:normal}
.field b button{font-size:11px;padding:1px 8px;box-shadow:none}
.field pre{white-space:pre-wrap;word-break:break-all;background:#0d0b1e;border:1px solid #4d5170;padding:6px 8px;margin:4px 0 0;font:12px/1.55 system-ui,sans-serif;max-height:220px;overflow:auto}