*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#15120e;color:#efe9df;font:14px/1.3 -apple-system,"Helvetica Neue",Arial,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}
canvas{display:block;width:100vw;height:100vh}
.hud{position:fixed;z-index:5;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.top{top:12px;left:12px;right:12px;display:flex;gap:1px;background:#2a2620;border:1px solid #2a2620;width:max-content;max-width:calc(100vw - 24px);flex-wrap:wrap}
.blk{background:rgba(16,14,11,.82);backdrop-filter:blur(8px);padding:8px 14px;min-width:84px}.k{display:block;font-size:10px;letter-spacing:.18em;color:#8f877b}.blk b{font-size:16px;font-weight:600}.sub{font-size:11px;color:#a9a195;margin-left:6px}
.bars{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle}.bars i{width:3px;background:#5a544b;display:block}.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:8px}.bars i:nth-child(3){height:11px}.bars i:nth-child(4){height:14px}.bars i.on{background:#7fd18b}
.earn{right:12px;top:12px;background:rgba(16,14,11,.86);border:1px solid #3b3529;padding:10px 14px;min-width:280px}.tag{font-size:10px;letter-spacing:.2em;color:#16100a;background:#ff6a1a;padding:2px 6px}
.earn .row{margin:8px 0 6px}.earn b#earn{font-size:26px;color:#ffd2b8}.earn input{background:transparent;border:0;border-bottom:1px dashed #6b6357;color:#efe9df;font:inherit;width:9em;padding:0}
.rec{font-size:11px;color:#a9a195}.rec b{color:#efe9df}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0453a;margin-right:6px;animation:p 1.2s infinite}@keyframes p{50%{opacity:.25}}
.tasks{left:12px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap}.tasks button{font:600 12px ui-monospace,Menlo,monospace;color:#efe9df;background:rgba(16,14,11,.85);border:1px solid #3b3529;padding:9px 12px;cursor:pointer}.tasks button.on{background:#ff6a1a;color:#140c05;border-color:#ff6a1a}
.toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);font:400 clamp(26px,4vw,46px) "Iowan Old Style",Palatino,Georgia,serif;text-shadow:0 4px 30px #000;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;z-index:6}.toast.show{opacity:1}
.help{position:fixed;right:12px;bottom:16px;font:11px ui-monospace,Menlo,monospace;color:#8f877b}
.back{position:fixed;right:12px;bottom:40px;font:12px ui-monospace,Menlo,monospace;color:#cfc7bb;text-decoration:none;z-index:5}
.joy,.grab{display:none}
@media (pointer:coarse),(max-width:760px){
 .help{display:none}.joy{display:block;position:fixed;left:18px;bottom:70px;width:128px;height:128px;border-radius:50%;border:1px solid #5a544b;background:rgba(16,14,11,.45);z-index:6}
 .knob{position:absolute;left:39px;top:39px;width:50px;height:50px;border-radius:50%;background:#efe9df;opacity:.85}
 .grab{display:block;position:fixed;right:20px;bottom:86px;width:92px;height:92px;border-radius:50%;border:0;background:#ff6a1a;color:#140c05;font:700 14px ui-monospace,Menlo,monospace;z-index:6}
 .top{top:8px;left:8px;right:auto}.blk{padding:5px 8px;min-width:0}.blk b{font-size:13px}.k{font-size:9px}.sub{display:none}
 .earn{top:auto;bottom:178px;right:8px;left:auto;min-width:0;padding:7px 10px}.earn b#earn{font-size:18px}.earn .row{margin:5px 0 3px}.rec{font-size:10px;max-width:190px}
 .tasks{left:8px;right:8px;bottom:10px}.tasks button{flex:1;padding:8px 4px;font-size:11px}.back{bottom:auto;top:auto;display:none}}
body.attract .hud.tasks,body.attract .help,body.attract .joy,body.attract .grab,body.attract .back,body.attract .earn,body.attract .top{display:none}