:root { color-scheme:dark; font-family:"Microsoft YaHei","Noto Serif SC",serif; color:#eee2bd; background:#151812; }
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; }
canvas { display:block; width:100vw; height:100dvh; touch-action:none; }
header,footer { position:fixed; left:max(22px,env(safe-area-inset-left)); right:max(22px,env(safe-area-inset-right)); display:flex; align-items:center; justify-content:space-between; pointer-events:none; gap:18px; }
header { top:max(22px,env(safe-area-inset-top)); z-index:21; }
footer { bottom:max(20px,env(safe-area-inset-bottom)); }
.ornament { pointer-events:auto; color:#e9d7a3; border:1px solid #9e8249a3; padding:10px 18px; background:linear-gradient(115deg,#141813cf,#29261bc2); box-shadow:inset 0 0 0 3px #14181375,0 3px 20px #0002; text-decoration:none; font:inherit; cursor:pointer; border-radius:2px 12px 2px 12px; }
.ornament:hover { color:#fff4d4; border-color:#dcc388; }
.ornament:focus-visible,select:focus-visible { outline:2px solid #f0d18a; outline-offset:4px; }
.identity { text-align:center; text-shadow:0 2px 10px #000; }
.identity span { font:9px/1.5 Arial,sans-serif; letter-spacing:.38em; opacity:.8; }
h1 { margin:3px 0 0; font-size:20px; font-weight:500; letter-spacing:.18em; }
select { font:inherit; color:#ffe9ad; background:transparent; border:0; margin-left:8px; cursor:pointer; }
select option { background:#20241c; }
.hint { font-size:12px; color:#f1e6c7; text-shadow:0 1px 5px #000; }
#loading { position:fixed; inset:0; z-index:20; display:grid; place-content:end center; padding-bottom:14vh; background:linear-gradient(transparent 55%,#12150f44); pointer-events:auto; touch-action:none; }
#loading[hidden],#error[hidden] { display:none; }
.loading-bar { width:min(320px,60vw); height:2px; border:0; border-radius:2px; background:#b79b5b33; }
.loading-bar i { display:block; width:0; height:100%; border-radius:2px; background:linear-gradient(90deg,#917743,#d3b777 65%,#f7e7b7); box-shadow:0 0 6px #d6bd7644; transition:width .24s linear; }
.ornament:disabled,select:disabled { cursor:default; opacity:.45; }
#error { position:fixed; inset:0; z-index:20; display:grid; place-content:center; text-align:center; padding:30px; background:#111710ed; }
#error button { justify-self:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px) { header,footer { left:12px;right:12px; } .ornament { padding:9px 12px;font-size:12px; } h1 { font-size:16px; } .hint { font-size:10px;max-width:140px;text-align:right; } }