:root{
  --bg:#141a2e; --bg2:#1b2340; --card:#222c52; --line:#33406e;
  --txt:#f2f5ff; --dim:#9aa6c7; --acc:#ffd166; --acc2:#6ee7a0; --pink:#ff8fb3;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:radial-gradient(1200px 800px at 20% -10%, #24315f 0%, var(--bg) 55%) fixed;
  color:var(--txt); font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden; user-select:none;
}
#topbar{display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:rgba(20,26,46,.7); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:50;}
.brand{display:flex; gap:12px; align-items:center;}
.brand .logo{font-size:38px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.brand h1{margin:0; font-size:22px; letter-spacing:2px;}
.brand p{margin:2px 0 0; font-size:12px; color:var(--dim);}
.top-actions{display:flex; gap:8px;}
.tbtn{width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:19px; cursor:pointer; transition:.15s;}
.tbtn:hover{transform:translateY(-1px); border-color:var(--acc);}
.tbtn.on{background:#3a2f14; border-color:var(--acc);}
#toolbar{display:flex; align-items:center; gap:14px; padding:8px 16px; background:rgba(27,35,64,.85); border-bottom:1px solid var(--line); z-index:40; flex-wrap:wrap;}
.gallery{display:flex; gap:8px; overflow-x:auto; max-width:46vw; padding:2px;}
.gallery img{width:64px; height:48px; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer; opacity:.75; transition:.15s; flex:0 0 auto;}
.gallery img:hover{opacity:1; transform:scale(1.06);}
.gallery img.active{border-color:var(--acc); opacity:1; box-shadow:0 0 10px rgba(255,209,102,.5);}
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.controls label{font-size:13px; color:var(--dim);}
select{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:14px; cursor:pointer;}
.btn{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:14px; cursor:pointer; transition:.15s; white-space:nowrap;}
.btn:hover{border-color:var(--acc); transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg,#ffb703,#fb8500); border:none; color:#3a2500; font-weight:700;}
.btn.toggle.on{background:#3a2f14; border-color:var(--acc); color:var(--acc);}
.stats{margin-left:auto; display:flex; gap:16px; font-size:14px; color:var(--dim);}
.stats b{color:var(--txt); font-variant-numeric:tabular-nums;}
#stage{flex:1; position:relative; overflow:hidden;}
#viewport{position:absolute; inset:0; overflow:hidden; cursor:grab;}
#viewport.panning{cursor:grabbing;}
#world{position:absolute; left:0; top:0; width:1600px; height:1200px; transform-origin:0 0;}
#board{position:absolute; left:200px; top:150px; width:1200px; height:900px; border:3px dashed #4a5b8c; border-radius:14px; background:rgba(10,14,30,.45); box-shadow:inset 0 0 60px rgba(0,0,0,.35);}
#boardLabel{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#5a6a94; font-size:26px; pointer-events:none; letter-spacing:3px;}
#pieces{position:absolute; inset:0;}
#pieces canvas{position:absolute; left:0; top:0; cursor:grab; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); touch-action:none;}
#pieces canvas:active{cursor:grabbing;}
#pieces canvas.locked{cursor:default;pointer-events:none;}
#pieces canvas.hint-glow{filter:drop-shadow(0 0 14px var(--acc)) drop-shadow(0 4px 6px rgba(0,0,0,.45));}
#refpanel{position:absolute; right:14px; top:14px; width:172px; background:rgba(20,26,46,.88); border:1px solid var(--line); border-radius:14px; padding:10px; z-index:30; backdrop-filter:blur(6px);}
.ref-title{font-size:12px; color:var(--dim); margin-bottom:6px; letter-spacing:2px;}
#refpanel img{width:100%; border-radius:8px; display:block; cursor:zoom-in;}
.ref-hint{font-size:11px; color:var(--dim); margin-top:6px;}
.ref-progress{height:8px; background:#0e1330; border-radius:6px; margin-top:8px; overflow:hidden;}
#refbar{height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--acc2),var(--acc)); transition:width .3s;}
#pcTip{display:none; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); background:rgba(20,26,46,.9); border:1px solid var(--line); padding:8px 18px; border-radius:20px; font-size:13px; color:var(--dim); z-index:30;}
@media (max-width:760px){ #pcTip{display:block;} .gallery{max-width:92vw;} }
#toast{position:absolute; left:50%; bottom:70px; transform:translateX(-50%) translateY(20px); background:rgba(20,26,46,.94); border:1px solid var(--acc); color:var(--txt); padding:10px 22px; border-radius:24px; font-size:14px; opacity:0; transition:.25s; z-index:60; pointer-events:none;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.modal{position:fixed; inset:0; background:rgba(8,11,24,.72); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(4px);}
.modal.hidden{display:none;}
.modal .card{background:linear-gradient(160deg,#232c55,#171d38); border:1px solid var(--line); border-radius:22px; padding:28px 32px; max-width:440px; width:92vw; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.55); animation:pop .3s ease;}
.modal .card.wide{max-width:min(880px,94vw); padding:18px;}
#refModal .card img{max-height:76vh; width:auto; max-width:100%; margin:0 auto 10px; display:block;}
@keyframes pop{from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;}}
.modal .card img{width:100%; border-radius:14px; margin-bottom:6px;}
.modal h2{margin:10px 0 6px;}
.modal p{color:var(--dim); margin:6px 0; font-size:15px;}
.modal p b{color:var(--acc); font-size:19px;}
.modal ul{text-align:left; color:var(--dim); line-height:2; font-size:14px; padding-left:20px;}
.modal ul b{color:var(--acc);}
.modal .row{display:flex; gap:10px; justify-content:center; margin-top:16px;}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:99;}