:root{font-family:system-ui,-apple-system,sans-serif;color:#302236;background:#bb8765}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100dvh;touch-action:none}header{position:fixed;top:0;left:0;width:100%;height:70px;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;background:#2d2038;color:#f9ead8;border-bottom:1px solid #f2c89944}small{font-size:10px;letter-spacing:2.4px;color:#e5b982;font-weight:800}h1{font:600 24px Georgia,serif;margin:2px 0}h1 span{font:12px system-ui;color:#d3bacd;margin-left:12px}nav{display:flex;gap:7px}button{font:600 12px system-ui;border:1px solid #927b95;background:#49354e;color:#ffefd8;border-radius:8px;padding:10px 13px;cursor:pointer;min-height:40px}button:hover{background:#604367}button:focus-visible{outline:3px solid #ffc879;outline-offset:2px}.stats{position:fixed;top:75px;left:0;width:100%;display:flex;gap:24px;justify-content:center;font-size:12px;pointer-events:none}.stats b{font-size:17px;margin-left:4px}#turn{color:#41312e}.padlabels{position:fixed;top:calc(65% + 10px);width:100%;display:flex;pointer-events:none}.padlabels span{width:50%;text-align:center;color:#e8d7b7;font-size:11px;font-weight:800;letter-spacing:1.5px}#recognition{position:fixed;bottom:12px;width:100%;text-align:center;color:#e4d9e8;pointer-events:none;font-size:12px}dialog{color:#f5e8d7;border:1px solid #9e6c99;border-radius:20px;background:#2d2038;padding:30px;max-width:470px;width:calc(100% - 28px);max-height:90dvh;box-shadow:0 25px 100px #160b2b80}dialog::backdrop{background:#201027aa;backdrop-filter:blur(5px)}h2{font:500 34px/1.08 Georgia,serif;margin:12px 0 18px}p{font-size:14px;line-height:1.6;color:#e6d5df}strong,b{color:inherit}.tip{background:#64466666;border:1px solid #ae7aab55;border-radius:12px;padding:14px}.tip p{margin:6px 0 0}.primary{width:100%;background:#f1c48a;color:#302236;border:none;font-size:14px;margin:10px 0}.primary:hover{background:#ffdbab}footer{text-align:center;font-size:11px;line-height:1.7;color:#bca6bc;margin-top:12px}.muted{font-size:12px;color:#bfaec6}@media(max-width:550px){header{padding:8px 12px;height:65px}h1{font-size:21px}h1 span{display:none}nav{gap:4px}button{padding:8px;min-height:40px}.stats{gap:13px;top:73px}.stats span{font-size:11px}#turn{position:fixed;top:94px;font-size:11px}.padlabels span{letter-spacing:.4px;font-size:9px}dialog{padding:23px}h2{font-size:31px}}