:root{
  --bg:#1a1c21;--bg2:#101114;--ink:#e9e2d3;--dim:#8d8676;--line:#2c2f36;
  --seal:#b8312a;--gold:#d6a23f;
  --serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",Georgia,serif;
  --sans:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-user-select:none;user-select:none}
#app{height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr 300px;grid-template-areas:"hd hd" "main side" "ft ft"}
header{grid-area:hd;display:flex;align-items:baseline;gap:18px;padding:14px 26px 8px;border-bottom:1px solid var(--line)}
header h1{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.1em;line-height:1}
header h1 small{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.35em;color:var(--dim);margin-left:10px;vertical-align:middle}
header .tag{color:var(--dim);font-size:13px}
header .sp{flex:1}
header .kbd{color:var(--dim);font-size:12px}
header .kbd b{display:inline-block;border:1px solid #3a3d45;border-radius:4px;padding:0 5px;margin:0 2px 0 8px;font-weight:500;color:#bdb5a3;font-family:ui-monospace,monospace;font-size:11px}
#stage{grid-area:main;position:relative;min-width:0;min-height:0}
canvas#c{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
canvas#c.dragging{cursor:grabbing}
#toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:#0e0f12cc;border:1px solid var(--line);padding:8px 16px;border-radius:6px;font-size:14px;color:#d8d0bf;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}
aside{grid-area:side;border-left:1px solid var(--line);padding:18px 22px;display:flex;flex-direction:column;gap:18px;min-height:0;overflow:auto}
aside h2{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--dim);font-weight:500}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:14px}
#target{display:block;width:100%;height:190px}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px dashed #2a2d34}
.stat:last-child{border-bottom:0}
.stat span{color:var(--dim);font-size:13px}
.stat b{font-family:var(--serif);font-size:24px;font-weight:600}
.stat b i{font-style:normal;font-size:13px;color:var(--dim);margin-left:4px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{appearance:none;border:1px solid #3a3d45;background:#202329;color:var(--ink);font:inherit;font-size:14px;padding:9px 10px;border-radius:6px;cursor:pointer;transition:background .15s,transform .08s}
button:hover{background:#2a2e36}button:active{transform:translateY(1px)}
button.primary{background:var(--seal);border-color:#d34a42;color:#fff5ee}
button.primary:hover{background:#c93a32}
button small{color:#9a9384;margin-left:6px;font-family:ui-monospace,monospace;font-size:11px}
button.primary small{color:#f7c9c3}
.chap{font-size:13px;color:#bdb5a3;line-height:1.7}
.chap b{font-family:var(--serif);color:var(--ink);font-size:15px;margin-right:6px}
footer{grid-area:ft;border-top:1px solid var(--line);padding:10px 26px 12px;display:flex;gap:26px;align-items:flex-start;overflow-x:auto}
.ch{display:flex;flex-direction:column;gap:6px}
.ch .nm{font-family:var(--serif);font-size:12px;letter-spacing:.25em;color:var(--dim)}
.ch .row{display:flex;gap:6px}
.tile{width:40px;height:40px;border:1px solid #33363e;border-radius:6px;background:#15171b;color:#bdb5a3;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative}
.tile:hover{background:#22252b}
.tile.cur{border-color:var(--gold);color:var(--ink);box-shadow:0 0 0 1px var(--gold) inset}
.tile .st{display:flex;gap:2px;height:5px}
.tile .st i{width:5px;height:5px;border-radius:50%;background:#3a3d45}
.tile .st i.on{background:var(--gold)}
.tile.daily{width:auto;padding:0 10px}
#win{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
#win.on{display:flex}
#win .box{pointer-events:auto;background:#0f1013ee;border:1px solid #3a3d45;border-radius:12px;padding:26px 30px 22px;text-align:center;min-width:280px;animation:pop .35s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 30px 60px #0009}
#win .seal{width:78px;height:78px;margin:-58px auto 10px;background:var(--seal);color:#fff2ea;font-family:var(--serif);font-size:44px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:8px;transform:rotate(-7deg);box-shadow:0 8px 20px #0008,0 0 0 3px #7a1d18 inset;animation:stamp .5s cubic-bezier(.3,1.5,.5,1) both}
#win .seal::after{content:"";position:absolute;inset:6px;border:2px solid #f6d6cf66;border-radius:4px}
#win h3{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.15em}
#win p{color:var(--dim);font-size:13px;margin:6px 0 14px}
#win .stars{font-size:22px;color:var(--gold);letter-spacing:.2em;margin-bottom:6px}
#win .stars .off{color:#3a3d45}
#win .btns{margin-top:10px}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes stamp{from{transform:rotate(-7deg) scale(2.2);opacity:0}60%{transform:rotate(-7deg) scale(.92);opacity:1}to{transform:rotate(-7deg) scale(1)}}
@media (max-width:820px){
  #app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"hd" "main" "side" "ft"}
  aside{border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:12px;padding:12px}
  aside .card{flex:1 1 140px}#target{height:120px}
  header .kbd{display:none}
}