*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#111;font-family:system-ui,sans-serif;color:#eee}
canvas{display:block}.hidden{display:none!important}
.ov{position:fixed;inset:0;padding:16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:rgba(10,14,20,.82);z-index:20}
.card{max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;background:#1c232d;border:1px solid #33404f;border-radius:12px;padding:28px 34px;max-width:560px;text-align:center}
.card ul{text-align:left}h1{margin:0 0 4px;letter-spacing:3px}.sub{color:#8fb3d9;margin-top:0}
button{background:#3a8dde;color:#fff;border:0;border-radius:8px;padding:10px 22px;font-size:16px;cursor:pointer}button:disabled{opacity:.6}
#bar{height:6px;background:#2a333e;border-radius:3px;margin:14px 0;overflow:hidden}#fill{display:block;height:100%;width:0;background:#3a8dde;transition:width .2s}
kbd{background:#2b3440;border:1px solid #445;border-radius:4px;padding:1px 6px}
#cross{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(255,255,255,.85);z-index:5;pointer-events:none}
#cross.on{width:12px;height:12px;margin:-6px;background:none;border:2px solid #fff}
#tip{position:fixed;left:50%;top:calc(50% + 22px);transform:translateX(-50%);font-size:14px;text-shadow:0 1px 3px #000;pointer-events:none;z-index:5}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(20,30,40,.9);padding:8px 16px;border-radius:20px;opacity:0;transition:opacity .3s;z-index:6}
#toast.show{opacity:1}#held{position:fixed;left:16px;bottom:16px;background:rgba(20,30,40,.85);padding:8px 12px;border-radius:8px;font-size:14px;z-index:6}#held:empty{display:none}
#nbBtn,#hintBtn{position:fixed;top:14px;z-index:8;font-size:20px;padding:6px 10px;background:rgba(30,40,52,.9)}#nbBtn{right:14px}#hintBtn{right:66px}
#hintBtn.glow{box-shadow:0 0 14px 4px #ffd34d;animation:p 1.4s infinite}@keyframes p{50%{box-shadow:0 0 4px 1px #ffd34d}}
#hintBox{position:fixed;top:64px;right:14px;max-width:320px;background:rgba(28,35,45,.95);padding:12px 14px;border-radius:8px;z-index:8;font-size:14px}
#nb{position:fixed;top:64px;right:14px;width:300px;background:#f4ecd8;color:#222;padding:14px 18px;border-radius:6px;z-index:9;font-family:Georgia,serif}
#nb h3,#nb h4{margin:4px 0}#nb input{width:150px;padding:4px}#calcOut{margin-left:8px;font-weight:bold}.small{font-size:12px;color:#777}.empty{color:#888}
#wrong{text-align:left;font-size:14px;color:#cdd}

#muteBtn{position:fixed;top:14px;right:118px;z-index:8;font-size:20px;padding:6px 10px;background:rgba(30,40,52,.9)}.story{font-size:19px;line-height:1.6;color:#cfe3f7;letter-spacing:.5px}#start .card{background:linear-gradient(#141c28,#0b1018);border-color:#2d4a6a}#patches{color:#ffd77a}