:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;color:#e8ede3;background:#0b1112}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;touch-action:none}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid #53645b;background:#25352e;color:#e9f0e8;border-radius:8px;padding:10px 17px}button:hover{background:#3b5143;border-color:#bcd3a1}button:disabled{opacity:.4;cursor:default}button.primary{background:#b9cd8a;color:#162217;border-color:#b9cd8a;font-weight:700}button.ghost{background:transparent}main{width:min(100vw,177.77778dvh);aspect-ratio:16/9;position:absolute;inset:0;margin:auto;overflow:hidden;background:#14231d}canvas{width:100%;height:100%;display:block}#panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b1412d9;padding:20px;backdrop-filter:blur(4px)}#panel:empty{display:none}.sheet{width:min(820px,95%);max-height:100%;overflow:auto;touch-action:pan-y}.eyebrow{font-size:11px;letter-spacing:3px;color:#a9bf84;margin:0 0 10px}h1{font-size:clamp(26px,4vw,50px);margin:0 0 10px;letter-spacing:-1.5px}h2{font-size:24px;margin:0 0 12px}h3{margin:5px 0 8px}p{color:#b5c6ba;line-height:1.65;margin:8px 0 16px;font-size:14px}small{color:#a4b6a8}.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:600px;margin:20px 0}.menu button{text-align:left;padding:17px 22px;font-size:18px}.menu small{display:block;font-size:12px;margin-top:5px;color:inherit;opacity:.7}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.muted{color:#a4b6a8;font-size:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.card{border:1px solid #43574a;background:#1b2c24;padding:18px;border-radius:10px;text-align:left}.card .icon{font-size:32px;display:block;margin-bottom:8px;color:#cbdf98}.card p{margin-bottom:0;font-size:12px}.card.selected{border-color:#d0e59b;background:#2a3b2b}table{border-collapse:collapse;width:100%;font-size:13px;margin:15px 0}td,th{text-align:left;padding:8px;border-bottom:1px solid #33483c}th{color:#b6cd9d}a{color:#d5eaa7}#hud{position:absolute;inset:0;pointer-events:none;padding:12px 18px}#hud button,#joy{pointer-events:auto}.hp{width:190px;font-size:12px}.track{height:7px;background:#080f0b;margin:4px 0 7px;border-radius:5px;overflow:hidden}.track i{display:block;background:#c47667;height:100%;width:100%}.xp i{background:#b8ce83}.clock{position:absolute;top:10px;left:40%;width:20%;text-align:center}.clock b{font-size:25px;letter-spacing:2px}.clock small{display:block;font-size:11px}.tools{position:absolute;top:12px;right:15px;display:flex;gap:6px}.tools button{padding:7px 11px;min-height:38px;font-size:12px}#toast{position:absolute;top:91px;width:100%;left:0;text-align:center;color:#e8dda9;font-size:15px;text-shadow:0 2px 8px #000}#weapon{position:absolute;left:18px;top:84px;font-size:11px;color:#b7c8b4}#joy{position:absolute;bottom:22px;left:26px;width:112px;height:112px;border-radius:50%;background:#b4dbbc0d;border:1px solid #b4dbbc55;touch-action:none}#knob{position:absolute;top:35px;left:35px;width:40px;height:40px;border-radius:50%;background:#adce9b88;border:1px solid #c4e0af}#dodge{position:absolute;bottom:28px;right:30px;border-radius:50%;width:84px;height:84px;background:#41523ecf;border:2px solid #c2d79b;padding:0;font-size:16px;font-weight:700}#dodge small{display:block;font-size:11px;margin-top:4px}.form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.form label{font-size:12px;color:#becbb7}.form input,.form select{display:block;width:100%;margin-top:5px;padding:8px;color:#f1f6ea;background:#17221c;border:1px solid #64745a;border-radius:5px}.form input[type=checkbox]{width:auto;display:inline}#portrait{display:none;position:absolute;inset:0;z-index:10;background:#0d1714;align-items:center;justify-content:center;text-align:center}#portrait small{display:block;margin-top:12px}#storageWarning{position:absolute;bottom:0;background:#713f2c;color:white;font-size:11px;padding:5px;z-index:20}@media(orientation:portrait){#portrait{display:flex}}@media(max-height:500px){#panel{padding:12px}.sheet{width:min(760px,96%)}h1{font-size:28px}h2{font-size:20px}.eyebrow{margin-bottom:5px}p{font-size:12px;margin:6px 0 10px}.menu{margin:10px 0;gap:7px}.menu button{padding:10px 16px;font-size:15px}.cards{gap:8px;margin:10px 0}.card{padding:12px}.card .icon{font-size:23px;margin-bottom:3px}.hp{width:160px}.clock b{font-size:20px}#joy{width:96px;height:96px;left:20px;bottom:15px}#knob{left:27px;top:27px}#dodge{width:72px;height:72px;right:24px;bottom:18px}#weapon{top:80px}#toast{top:80px}.form{margin:10px 0;gap:7px}td,th{padding:6px}}

#joy,#dodge{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#dodge>*{pointer-events:none}