*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#05060f;font-family:Georgia,serif;color:#dfe6ff;touch-action:none;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%}
#hud{position:fixed;top:0;left:0;right:0;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:linear-gradient(#05060fcc,#0000);pointer-events:none}
#hud>*{pointer-events:auto}#title{font-size:20px;letter-spacing:1px}
#stats{font-size:14px;opacity:.85;display:flex;align-items:center;gap:6px}
#xpbar{display:inline-block;width:90px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}#xpfill{height:100%;width:0;background:linear-gradient(90deg,#8fb4ff,#ffe9a8);transition:width .8s}
button{background:#ffffff12;color:#dfe6ff;border:1px solid #ffffff2a;border-radius:16px;padding:6px 12px;font-family:inherit;cursor:pointer;transition:background .3s}button:hover{background:#ffffff26}button:disabled{opacity:.4;cursor:default}
#info{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);text-align:center;max-width:560px;width:90%;font-size:15px;opacity:.9;transition:opacity 1s;pointer-events:none}
#info h2{margin:0 0 6px;font-weight:normal;font-size:28px;color:#ffe9a8;letter-spacing:2px}#info .next{pointer-events:auto;margin-top:10px}
#panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:80vh;overflow:auto;background:#0b0e22ee;border:1px solid #ffffff22;border-radius:16px;padding:20px;transition:opacity .4s}
.hidden{opacity:0;pointer-events:none}
.up{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #ffffff12}.up small{opacity:.6;display:block}
.atlas{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.atlas div{padding:8px;border:1px solid #ffffff18;border-radius:10px;text-align:center;font-size:13px}.atlas canvas{position:static;width:90px;height:60px}
.locked{opacity:.35}
#toast{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);font-size:30px;color:#ffe9a8;text-shadow:0 0 20px #ffe9a8;transition:opacity .8s;text-align:center;pointer-events:none}
input[type=range]{accent-color:#ffe9a8;width:160px}