:root{color-scheme:light;--bg:#f7f8fa;--panel:#fff;--surface:#f7f7fa;--surface-hover:#f1f0f7;--text:#30303c;--muted:#93929e;--secondary:#767583;--line:#eeedf2;--accent:#7964c8;--accent-soft:#f0ecfa;--accent-hover:#6b55bb;--gold:#b8944d;--gold-bg:#faf5e9;--green:#7a9a7e;--danger:#b77e7d;--body:#749986;--body-bg:#eef5f0;--mind:#7299b5;--mind-bg:#edf4f8;--soul:#a28ac0;--soul-bg:#f4eff8;--heart:#c38d9c;--heart-bg:#fbf0f3;--harm:#b29a80;--harm-bg:#f7f3ed;--shadow:0 4px 24px #24223c03;--font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--heading:'Manrope',var(--font)}
:root[data-theme=dark]{color-scheme:dark;--bg:#191a22;--panel:#22232d;--surface:#292a35;--surface-hover:#30303e;--text:#e4e2ee;--muted:#858493;--secondary:#aaa7ba;--line:#34333f;--accent:#af9be9;--accent-soft:#342d49;--accent-hover:#c0adef;--gold:#d1b16d;--gold-bg:#373122;--green:#91b396;--danger:#d49a98;--body:#94b7a0;--body-bg:#2b3932;--mind:#8cacc6;--mind-bg:#293541;--soul:#b59ad3;--soul-bg:#352e40;--heart:#d6a1af;--heart-bg:#402e38;--harm:#c0aa8e;--harm-bg:#38332b;--shadow:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;transition:background .15s,transform .15s,color .15s}button:disabled{cursor:default;opacity:.45}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,textarea,select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;padding:12px;min-width:0;width:100%}input::placeholder,textarea::placeholder{color:var(--muted)}textarea{resize:vertical;line-height:1.8}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--heading)}.icon{width:19px;height:19px;flex-shrink:0;vertical-align:middle}.icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--secondary);flex-shrink:0}.icon-button:hover{background:var(--surface-hover);color:var(--text)}.icon-button .icon{width:18px;height:18px}.topbar{height:80px;border-bottom:1px solid var(--line);padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:var(--panel)}.wordmark{text-decoration:none;color:var(--text);display:flex;align-items:center;gap:10px;font-family:var(--heading);font-weight:800;font-size:25px;letter-spacing:-1px}.logo-mark{width:36px;height:36px;display:block;flex-shrink:0}.logo-mark svg{width:100%;height:100%}.beta{font-family:var(--font);font-size:8px;letter-spacing:1.2px;color:var(--muted);font-weight:650;margin:5px 0 0 4px}.topbar-actions{display:flex;align-items:center;gap:9px}.capture-button{display:flex;align-items:center;gap:8px;font-size:12px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.capture-button:hover{background:var(--surface)}.capture-button .icon{width:15px;height:15px;color:var(--secondary)}kbd{font-family:inherit;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 4px;background:var(--surface);font-weight:500}.capture-button kbd{margin-left:12px}.toolbar-divider{height:20px;width:1px;background:var(--line);margin:0 7px}.profile-dot{border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;width:31px;height:31px;margin-left:9px}main{max-width:1640px;margin:auto;padding:34px 4% 14px}.day-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:29px;gap:20px}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:600;color:var(--muted);margin-bottom:9px}h1{font-size:29px;font-weight:750;letter-spacing:-1.2px;line-height:1.3}h1 span{color:var(--accent)}.day-heading p{color:var(--secondary);font-size:12px;margin-top:8px}.day-summary{display:flex;gap:19px;padding-bottom:5px;font-size:11px;color:var(--muted)}.day-summary>span{display:flex;align-items:center;gap:6px}.day-summary .icon{width:15px;height:15px;color:var(--green)}.day-summary strong{color:var(--secondary);font-weight:600}.dashboard{display:grid;grid-template-columns:1.03fr 1.04fr .87fr;gap:22px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.tasks-panel,.habits-panel{padding:25px 23px 0;min-height:675px;display:flex;flex-direction:column;height:calc(100vh - 280px);max-height:1000px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.section-kicker{font-size:8px;letter-spacing:1.4px;color:var(--muted);font-weight:600;display:block}.panel-heading h2{font-size:22px;letter-spacing:-.6px;font-weight:750;margin-top:5px;display:flex;align-items:center;gap:9px}.count{font-family:var(--font);font-size:10px;background:var(--surface);color:var(--muted);border-radius:5px;min-width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;font-weight:500;letter-spacing:0}.panel-heading>.icon-button{background:var(--surface);width:29px;height:29px}.task-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px}.task-tabs button{font-size:11px;padding:0 0 10px;color:var(--muted);position:relative}.task-tabs button.selected{color:var(--text);font-weight:600}.task-tabs button.selected:after{content:'';height:2px;background:var(--accent);position:absolute;bottom:-1px;left:0;right:0;border-radius:2px}.task-tabs span{font-size:9px;margin-left:3px}.tasks-scroll{overflow:auto;min-height:180px;flex:1;padding-right:3px}.task-group{margin-bottom:25px}.group-heading{display:flex;align-items:center;gap:7px}.group-heading h3{font-size:11px;font-weight:700;letter-spacing:0}.group-heading>span{font-size:9px;color:var(--muted);background:var(--surface);border-radius:4px;padding:0 5px}.group-description{font-size:9px;color:var(--muted);margin-top:3px;margin-bottom:11px}.task-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);min-height:47px}.task-row:last-child{border-bottom:0}.task-check{width:18px;height:18px;border:1.5px solid #d9d7e1;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.task-check:hover{background:var(--accent-soft);border-color:var(--accent)}.task-check .icon{width:12px;height:12px}.task-title{font-size:12px;line-height:1.5;flex:1;overflow-wrap:anywhere}.task-reward{font-size:10px}.gold-value{display:inline-flex;align-items:center;gap:4px;color:var(--gold);font-weight:650;white-space:nowrap}.gold-value .icon{width:13px;height:13px;stroke-width:1.8}.task-row>.icon-button{width:21px;height:25px;color:var(--muted)}.task-row>.icon-button .icon{width:15px;height:15px}.completed .task-check{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.completed .task-title{color:var(--muted);text-decoration:line-through}.add-task{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);text-align:left;padding:15px 0 20px}.add-task .icon{width:15px;height:15px}.add-task:hover{color:var(--accent)}.vault-card{display:flex;align-items:center;text-align:left;border:1px solid var(--line);border-radius:11px;padding:14px 12px;gap:11px;margin:2px 0 18px;background:var(--surface);width:100%}.vault-card:hover{background:var(--surface-hover)}.vault-symbol{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:9px;background:var(--panel);color:var(--accent);flex-shrink:0}.vault-card>span:nth-child(2){flex:1}.vault-card strong{font-size:12px;font-weight:600;display:block}.vault-card small{display:block;font-size:9px;color:var(--muted);line-height:1.7;margin-top:2px}.vault-card>.icon{width:15px;color:var(--muted)}.panel-footnote{display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px solid var(--line);font-size:9px;color:var(--muted);padding:15px 0;margin-top:auto;flex-shrink:0}.panel-footnote .icon{width:13px;height:13px;color:var(--gold)}.habits-panel .panel-heading{margin-bottom:11px}.panel-description{font-size:11px;color:var(--muted);margin-bottom:23px}.habits-scroll{overflow:auto;flex:1;padding-right:3px;padding-bottom:10px}.habit-category{--cat:var(--body);--cat-bg:var(--body-bg);margin-bottom:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.body{--cat:var(--body);--cat-bg:var(--body-bg)}.mind{--cat:var(--mind);--cat-bg:var(--mind-bg)}.soul{--cat:var(--soul);--cat-bg:var(--soul-bg)}.heart{--cat:var(--heart);--cat-bg:var(--heart-bg)}.harm{--cat:var(--harm);--cat-bg:var(--harm-bg)}.category-header{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 13px}.category-header:hover{background:var(--surface)}.category-symbol{width:32px;height:32px;background:var(--cat-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--cat)}.category-symbol .icon{width:18px;height:18px}.category-name{flex:1}.category-name strong{display:block;font-size:12px;font-weight:650;line-height:1.6}.category-name small{display:block;color:var(--muted);font-size:9px}.category-level{font-size:10px;color:var(--cat);font-weight:600}.category-chevron{width:13px;height:13px;color:var(--muted);transition:transform .2s}.expanded .category-chevron{transform:rotate(90deg)}.category-progress{height:2px;background:var(--cat-bg);margin:0 13px}.category-progress>div{background:var(--cat);height:100%;transition:width .4s}.category-body{padding:9px 10px 4px}.category-subtitle{font-size:9px;color:var(--muted);padding:0 4px 7px}.habit-row{display:flex;align-items:center}.habit-complete{flex:1;display:flex;align-items:center;gap:8px;text-align:left;padding:9px 3px;min-width:0;border-radius:6px}.habit-complete:hover{background:var(--cat-bg)}.habit-icon{color:var(--cat);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--cat-bg);border-radius:6px;flex-shrink:0}.habit-icon .icon{width:13px;height:13px}.habit-name{font-size:11px;line-height:1.4;flex:1;overflow-wrap:anywhere}.habit-name small{font-size:8px;display:block;color:var(--cat);margin-top:2px}.xp-badge{font-size:9px;color:var(--cat);white-space:nowrap;flex-shrink:0}.habit-row>.icon-button{width:21px;height:24px;color:var(--muted)}.habit-row>.icon-button .icon{width:14px;height:14px}.done .habit-name{color:var(--secondary)}.done .habit-icon{background:var(--cat);color:var(--panel)}.done .xp-badge{opacity:.5}.add-habit{display:flex;align-items:center;gap:5px;padding:11px 4px 9px;font-size:9px;color:var(--muted);width:100%}.add-habit .icon{width:12px;height:12px}.add-habit:hover{color:var(--cat)}.harm-tag{font-size:9px;color:var(--harm);border:1px solid var(--harm-bg);border-radius:5px;padding:2px 5px}.habits-panel .panel-footnote .icon{color:var(--soul)}.character-column{display:flex;flex-direction:column;gap:18px}.character-panel{padding:22px 23px 19px;text-align:center}.character-heading{display:flex;align-items:center;justify-content:space-between}.wallet{background:var(--gold-bg);border:1px solid color-mix(in srgb,var(--gold) 12%,transparent);padding:5px 9px;border-radius:7px;font-size:12px}.wallet .icon{width:15px;height:15px}.avatar-scene{height:180px;position:relative;display:flex;align-items:center;justify-content:center;margin-top:7px}.voxel-art{overflow:visible;isolation:isolate}.avatar-art{width:178px;height:196px;z-index:1}.scene-orbit{position:absolute;border-radius:50%;border:1px solid var(--line);width:150px;height:150px;top:15px}.orbit-two{width:110px;height:110px;top:35px;border-style:dashed;opacity:.5}.equipment-edit{position:absolute;right:12px;bottom:20px;border:1px solid var(--line);background:var(--panel);border-radius:8px;width:29px;height:29px;color:var(--secondary);z-index:2}.equipment-edit .icon{width:14px;height:14px}.character-name{font-size:18px;font-weight:750;letter-spacing:-.4px;margin-top:-2px;overflow-wrap:anywhere}.character-subtitle{font-size:9px;color:var(--muted);margin-top:4px}.health-label{display:flex;align-items:center;justify-content:space-between;margin-top:21px;font-size:10px}.health-label>span{display:flex;align-items:center;gap:5px;color:var(--secondary)}.health-label .icon{width:12px;height:12px;color:var(--heart)}.health-label strong{font-size:10px;font-weight:600}.health-label strong span{font-weight:400;color:var(--muted)}.health-bar{height:5px;background:var(--heart-bg);border-radius:5px;margin-top:8px;overflow:hidden}.health-bar>div{height:100%;background:var(--heart);border-radius:5px;transition:width .4s}.stat-chips{display:flex;justify-content:space-between;gap:7px;margin-top:14px}.stat-chips>span{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;background:var(--cat-bg);color:var(--cat);padding:6px;flex:1;font-size:11px}.stat-chips .icon{width:14px;height:14px}.stat-chips strong{font-weight:600}.character-actions{display:flex;gap:7px;margin-top:20px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:9px 14px;border-radius:8px;font-size:11px;font-weight:600;line-height:1.4;text-decoration:none}.button .icon{width:15px;height:15px}.button.primary{background:var(--accent);color:#fff;border:1px solid transparent}.button.primary:hover:not(:disabled){background:var(--accent-hover)}:root[data-theme=dark] .button.primary{color:#241c37}.button.secondary{background:var(--panel);border:1px solid var(--line)}.button.secondary:hover:not(:disabled){background:var(--surface-hover)}.button.danger{background:var(--heart-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 20%,transparent)}.button.subtle{background:none;border-color:transparent}.character-actions>.button{flex:1;padding:8px 6px;font-size:10px;min-height:33px;gap:4px}.character-actions>.button .icon{width:13px;height:13px}.potion-button{border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;gap:3px;min-width:43px;font-size:9px;color:var(--muted)}.potion-button svg{width:22px;height:22px}.recovery-link{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;font-size:9px;margin-top:13px;color:var(--accent)}.recovery-link .icon{width:12px;height:12px}.monster-panel{padding:19px 23px 21px;text-align:center}.monster-heading{display:flex;align-items:center;justify-content:space-between}.chapter{font-size:9px;color:var(--muted);background:var(--surface);padding:2px 5px;border-radius:4px}.monster-scene{height:136px;display:flex;align-items:center;justify-content:center;position:relative}.monster-art{width:155px;height:148px;position:relative;z-index:1;animation:breathe 5s ease-in-out infinite}.monster-art.defeated{animation:none;opacity:.75}.monster-ground{position:absolute;width:111px;height:40px;bottom:12px;border:1px solid var(--line);border-radius:50%;transform:rotate(-5deg)}.monster-panel h3{font-size:15px;font-weight:750;letter-spacing:-.3px;margin-top:-5px}.monster-panel>p{font-size:9px;color:var(--muted);margin-top:4px}.readiness{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:19px}.readiness strong{font-size:11px;color:var(--secondary);font-weight:600}.readiness-bar{height:3px;background:var(--surface);border-radius:3px;margin-top:6px;overflow:hidden}.readiness-bar>div{background:var(--soul);height:100%;transition:width .4s}.fight-button{width:100%;margin-top:16px}.fight-hint{display:block;font-size:8px;color:var(--muted);margin-top:9px}.victory-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;font-size:10px;color:var(--green);background:var(--body-bg);padding:10px;border-radius:7px}.victory-note .icon{width:14px;height:14px}.app-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:9px;margin-top:22px;gap:10px}.app-footer>span:first-child{display:flex;align-items:center;gap:5px}.local-dot{width:5px;height:5px;background:var(--green);border-radius:50%}.app-footer>button{font-size:9px;color:var(--muted)}.app-footer kbd{font-size:8px;margin-left:5px}.empty-state{text-align:center;padding:48px 18px;color:var(--muted);grid-column:1/-1}.empty-symbol{width:44px;height:44px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--accent)}.empty-state h3{font-size:14px;color:var(--secondary);margin-bottom:7px}.empty-state p{font-size:11px;line-height:1.8;max-width:260px;margin:0 auto 16px}.save-warning{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold);font-size:11px;padding:12px;border-radius:8px;margin-bottom:15px}.modal-open{overflow:hidden}.scrim{position:fixed;inset:0;background:#25233752;backdrop-filter:blur(5px);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:480px;max-width:100%;max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 24px 100px #18152a26;animation:arrive .18s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:start;gap:15px;padding:24px 25px 19px;border-bottom:1px solid var(--line)}.modal-header h2{font-size:20px;letter-spacing:-.6px;font-weight:750}.modal-header p{font-size:11px;color:var(--muted);margin-top:5px}.modal-header .icon-button{margin:-3px -5px 0 0}.form-body{padding:23px 25px}.form-body>label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:550;margin-bottom:19px}.form-body input,.form-body select,.form-body textarea{font-size:12px;font-weight:400}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{display:flex;flex-direction:column;font-size:11px;gap:8px}.form-help{font-size:11px;color:var(--muted);line-height:1.8;margin:13px 0}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px}.form-actions .small-label{font-size:8px}.checkbox-label{flex-direction:row!important;align-items:center;font-size:11px!important;font-weight:400!important;gap:9px!important}.checkbox-label input{width:14px;height:14px;accent-color:var(--accent)}.small-label{font-size:9px;letter-spacing:1px;color:var(--muted);font-weight:500}.suggestions{margin-top:23px}.suggestions>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.suggestions button{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:10px;color:var(--secondary)}.suggestions button:hover{background:var(--surface)}.segmented{display:flex;align-items:center;gap:4px}.segmented button{padding:8px 12px;font-size:11px;color:var(--muted);border-radius:7px;display:flex;align-items:center;gap:6px}.segmented button .icon{width:13px;height:13px}.segmented button.selected{background:var(--accent-soft);color:var(--accent);font-weight:600}.capture-kind{margin-bottom:20px;background:var(--surface);padding:3px;width:max-content;border-radius:8px}.capture-kind button.selected{background:var(--panel);box-shadow:0 1px 5px #26213408;color:var(--text)}.capture-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;margin-top:9px}.reflection-prompt{color:var(--secondary);font-size:13px;margin-bottom:20px;line-height:1.8}.recovery-preview{display:flex;justify-content:space-between;font-size:11px;color:var(--heart);align-items:center}.recovery-preview>span:first-child{display:flex;align-items:center;gap:6px}.recovery-preview .icon{width:14px;height:14px}.reflection-modal .health-bar{margin-bottom:20px}.vault-modal{width:760px;min-height:500px}.vault-toolbar{display:flex;align-items:center;gap:12px;padding:20px 25px 14px}.search-box{position:relative;flex:1;display:flex;align-items:center}.search-box>.icon{position:absolute;left:11px;width:15px;color:var(--muted)}.search-box input{padding:10px 12px 10px 34px;font-size:12px}.vault-tabs{margin:0 25px;padding-bottom:15px;border-bottom:1px solid var(--line)}.vault-tabs button{font-size:10px}.vault-tabs button span{font-size:9px}.vault-results{padding:18px 25px;max-height:52vh;min-height:270px;overflow:auto}.note-card{border:1px solid var(--line);border-radius:11px;padding:15px 17px;margin-bottom:12px}.note-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted)}.note-top>span:first-child{font-size:8px;letter-spacing:.6px}.note-top .icon{width:12px;height:12px}.note-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:12px;margin:12px 0;max-height:240px;overflow:auto}.hashtag{color:var(--accent)}.note-actions{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--secondary);padding:3px 0}.text-button:hover{color:var(--accent)}.text-button .icon{width:12px;height:12px}.note-actions .archive{margin-left:auto;color:var(--muted)}.converted{font-size:10px;color:var(--green);display:flex;align-items:center;gap:3px}.converted .icon{width:12px;height:12px}.vault-footer{padding:13px 25px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.shop-modal{width:680px}.shop-top{display:flex;align-items:center;justify-content:space-between;padding:19px 25px 0}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:21px 25px 0}.shop-item{text-align:center;border:1px solid var(--line);border-radius:10px;padding:16px 10px 12px;display:flex;flex-direction:column;align-items:center}.item-art{background:var(--surface);border-radius:10px;width:63px;height:63px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}.item-art svg{width:45px;height:45px}.shop-item.special .item-art{background:var(--soul-bg)}.item-tier{font-size:7px;letter-spacing:1px;color:var(--muted)}.shop-item h3{font-size:11px;margin-top:5px;font-weight:700}.shop-item p{font-size:9px;line-height:1.7;color:var(--muted);margin:6px 0 14px;flex:1}.shop-item>.button{width:100%;font-size:10px;min-height:31px;padding:6px 9px}.shop-note{font-size:10px;color:var(--muted);text-align:center;padding:18px 25px}.backup-box{background:var(--surface);border-radius:10px;border:1px solid var(--line);padding:16px;margin-top:23px}.backup-box h3{font-size:12px}.backup-box p{font-size:10px;color:var(--muted);line-height:1.8;margin-top:6px}.backup-actions{display:flex;gap:9px;margin-top:14px}.backup-actions>.button{font-size:10px;padding:8px 10px;flex:1}.battle-modal{width:560px}.battle-body{padding:25px;text-align:center}.battle-stage{display:flex;justify-content:center;align-items:center;gap:18px}.battle-fighter{flex:1;min-width:0}.battle-fighter .avatar-art,.battle-fighter .monster-art{width:160px;height:185px;max-width:100%}.battle-fighter .monster-art{padding-top:20px}.battle-fighter>strong{font-size:12px;display:block;overflow-wrap:anywhere}.battle-fighter>small{font-size:9px;color:var(--muted);display:block;margin-top:6px}.battle-fighter .health-bar{max-width:130px;margin:12px auto 0}.enemy{background:var(--body-bg)}.enemy>div{background:var(--body)}.versus{font-family:var(--heading);font-weight:750;font-size:12px;color:var(--muted)}.battle-status{font-size:12px;color:var(--secondary);padding:25px 0 14px;min-height:60px}.loot-box{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold-bg);border-radius:9px;padding:14px;color:var(--gold);margin:6px 0 14px}.loot-box>svg{width:25px;height:25px}.loot-box strong{font-size:13px}.loot-box>span{font-size:10px;color:var(--secondary)}.wide{width:100%;margin-top:8px}.centered{text-align:center}.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none;max-width:90vw}.toast{background:var(--text);color:var(--panel);padding:11px 17px;border-radius:10px;box-shadow:0 4px 25px #13102018;font-size:11px;pointer-events:auto;animation:arrive .2s ease-out;text-align:center}.toast button{color:inherit;text-decoration:underline;margin-left:13px;font-size:11px}#effects{pointer-events:none;position:fixed;inset:0;z-index:110;overflow:hidden}.reward-pop{position:fixed;font-size:12px;font-weight:700;color:var(--gold);animation:reward 1s ease-out forwards;white-space:nowrap}.reward-pop.xp{color:var(--accent)}.flying-coin{position:fixed;width:9px;height:9px;border-radius:2px;background:#dfbd69;border:2px solid #b8944d;animation:coin-fly .8s cubic-bezier(.4,0,.6,1) forwards}.tasks-scroll,.habits-scroll,.vault-results,.modal{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.save-warning+.dashboard{margin-top:15px}@keyframes breathe{50%{transform:translateY(-4px)}}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes reward{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-45px)}}@keyframes coin-fly{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}
@media(min-width:1500px){.tasks-panel,.habits-panel{min-height:720px}.task-title{font-size:13px}.habit-name{font-size:12px}.tasks-panel,.habits-panel{padding-left:28px;padding-right:28px}.dashboard{gap:26px}.character-panel{padding:24px 28px}.avatar-scene{height:200px}.avatar-art{width:195px;height:215px}.monster-scene{height:160px}.monster-art{width:175px;height:170px}.character-name{font-size:21px}.section-kicker{font-size:9px}}
@media(max-width:1100px){.topbar{padding:0 25px}main{padding:28px 25px 14px}.dashboard{gap:14px;grid-template-columns:1fr 1fr .9fr}.tasks-panel,.habits-panel{padding-left:16px;padding-right:16px}.character-panel,.monster-panel{padding-left:16px;padding-right:16px}.section-kicker{font-size:7px;letter-spacing:1px}.character-actions{gap:4px}.character-actions>.button{font-size:9px}.day-summary{gap:10px}.task-row{gap:7px}.habit-name{font-size:10px}.category-header{padding:11px 10px;gap:7px}.xp-badge{font-size:8px}.category-level{font-size:9px}.panel-footnote{font-size:8px}.task-row>.icon-button{width:16px}.avatar-scene{height:165px}.avatar-art{width:160px;height:180px}}
@media(max-width:850px){.dashboard{grid-template-columns:1fr 1fr}.character-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start}.tasks-panel,.habits-panel{height:690px;min-height:0}.day-summary{display:none}.character-panel{min-height:435px}.monster-panel{min-height:435px}.monster-scene{height:220px}.monster-art{width:190px;height:200px}.section-kicker{font-size:8px}.habit-name{font-size:12px}.task-title{font-size:12px}.app-footer>span:nth-child(2){display:none}}
@media(max-width:560px){.topbar{height:65px;padding:0 18px}.wordmark{font-size:23px;gap:7px}.beta{display:none}.logo-mark{width:32px;height:32px}.topbar-actions{gap:3px}.toolbar-divider,.profile-dot,.capture-button kbd{display:none}.capture-button{font-size:0;border:0;padding:0;width:28px;height:28px;flex-shrink:0;gap:0;justify-content:center;background:var(--surface)}.capture-button>.icon{width:18px;height:18px}.topbar-actions>.icon-button{width:28px}.topbar-actions>[data-action=mute]{display:none}main{padding:24px 16px 16px}.day-heading{margin-bottom:22px}h1{font-size:25px}.eyebrow{font-size:8px}.day-heading p{font-size:11px}.dashboard{grid-template-columns:1fr;gap:16px}.tasks-panel,.habits-panel{height:auto;min-height:0;max-height:none;padding:22px 20px 0}.tasks-scroll{min-height:0;max-height:480px}.task-group{margin-bottom:18px}.habits-scroll{max-height:none;overflow:visible}.character-column{grid-column:auto;grid-template-columns:1fr;gap:16px}.character-panel,.monster-panel{min-height:0;padding:21px}.character-panel{padding-bottom:22px}.avatar-scene{height:190px}.avatar-art{width:190px;height:210px}.character-name{font-size:20px}.monster-scene{height:160px}.monster-art{width:180px;height:170px}.character-actions>.button{font-size:11px}.character-subtitle{font-size:10px}.fight-hint{font-size:9px}.app-footer{margin-top:17px;font-size:8px}.app-footer kbd{display:none}.scrim{padding:12px}.modal{max-height:94vh;border-radius:13px}.modal-header{padding:20px}.form-body{padding:20px}.shop-grid{grid-template-columns:repeat(2,1fr);padding:18px}.shop-top{padding:18px 18px 0}.shop-note{padding:16px 18px}.vault-toolbar{padding:18px 18px 12px;gap:8px}.vault-toolbar .button{padding:10px;font-size:0}.vault-toolbar .button .icon{width:16px;height:16px}.vault-tabs{margin:0 18px;gap:2px}.vault-tabs button{padding:7px 8px;font-size:9px}.vault-results{padding:16px 18px;max-height:58vh}.capture-meta{font-size:8px}.backup-actions{flex-direction:column}.battle-body{padding:18px}.battle-stage{gap:5px}.battle-fighter .avatar-art,.battle-fighter .monster-art{width:130px;height:150px}.battle-status{font-size:11px}.loot-box{flex-wrap:wrap}.loot-box>span{width:100%}.toast{font-size:10px;padding:10px 13px}.category-header{padding:12px}.category-name strong{font-size:13px}.xp-badge{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.flying-coin{display:none}.reward-pop{opacity:1;transform:translate(-50%,-20px)}}
:root[data-motion=reduced] *,:root[data-motion=reduced] *:before,:root[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}:root[data-motion=reduced] .flying-coin{display:none}:root[data-motion=reduced] .reward-pop{transform:translate(-50%,-20px)}

@media(min-width:851px){
.tasks-panel,.habits-panel{height:calc(100dvh - 280px);min-height:560px;max-height:none}
.character-panel{padding-top:19px;padding-bottom:17px}.avatar-scene{height:150px;margin-top:3px}.avatar-art{height:170px;width:155px}
.character-name{font-size:18px}.health-label{margin-top:15px}.character-actions{margin-top:14px}
.monster-panel{padding-top:16px;padding-bottom:17px}.monster-scene{height:110px}.monster-art{height:125px;width:135px}.readiness{margin-top:13px}.fight-button{margin-top:12px}
.character-column{gap:16px}
}
@media(min-width:851px) and (max-height:950px){
.topbar{height:68px}main{padding-top:25px}.day-heading{margin-bottom:22px}.day-heading p{margin-top:5px}h1{font-size:26px}
.tasks-panel,.habits-panel{height:calc(100dvh - 242px);min-height:540px}
.character-panel{padding-top:16px;padding-bottom:15px}.avatar-scene{height:113px}.avatar-art{height:133px;width:125px}.scene-orbit{height:108px;width:108px;top:5px}.orbit-two{height:80px;width:80px;top:19px}.character-name{font-size:17px}.character-subtitle{margin-top:2px}.health-label{margin-top:12px}.stat-chips{margin-top:10px}.character-actions{margin-top:12px}.monster-scene{height:83px}.monster-art{height:100px;width:110px}.monster-ground{bottom:3px;width:84px;height:28px}.monster-panel{padding-top:14px;padding-bottom:14px}.monster-panel h3{font-size:14px}.readiness{margin-top:11px}.fight-button{margin-top:10px}.app-footer{margin-top:15px}
}

.vault-tabs{flex-wrap:wrap}
@media(min-width:851px) and (max-height:950px){
.habits-panel .panel-description{margin-bottom:18px}.habits-panel .panel-heading{margin-bottom:9px}
.habit-category{margin-bottom:10px}.category-header{padding:9px 11px}.category-symbol{width:30px;height:30px}
.category-body{padding-top:7px;padding-bottom:2px}.category-subtitle{padding-bottom:5px}.habit-complete{padding-top:6px;padding-bottom:6px}.add-habit{padding-top:8px;padding-bottom:7px}
}

@media(min-width:851px){.tasks-panel,.habits-panel{height:calc(100dvh - 191px)}}
@media(min-width:851px) and (max-height:950px){.tasks-panel,.habits-panel{height:calc(100dvh - 172px)}}
/* Combat: stable beats, readable impacts, and equipment feedback. */
.monster-art.defeated{filter:grayscale(1);opacity:.8;animation:none}
.replay-button{margin:12px auto 0;font-size:9px;color:var(--muted)}
.battle-modal{width:700px}.battle-modal .modal-header{padding-bottom:17px}.battle-modal .battle-body{padding:18px 26px 24px}
.battle-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.7px;color:var(--muted);font-weight:600;min-height:30px}
.battle-toolbar>div{display:flex;align-items:center;gap:10px}.battle-toolbar .icon-button{width:28px;height:28px}.battle-toolbar .icon{width:15px;height:15px}.replay-label{color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:3px 6px;font-size:8px}
.battle-modal .battle-stage{--lunge:85px;position:relative;display:grid;grid-template-columns:1fr 30px 1fr;gap:12px;margin:0 -5px 20px;padding:8px 0 18px;border-bottom:1px solid var(--line);isolation:isolate;background:radial-gradient(ellipse at 50% 50%,var(--accent-soft),transparent 68%)}
.battle-modal .battle-fighter{position:relative;min-width:0;align-self:end;z-index:2}.fighter-scene{height:225px;position:relative;display:flex;align-items:center;justify-content:center}
.fighter-motion{position:relative;z-index:2;transform-origin:50% 80%;will-change:transform;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.battle-modal .battle-fighter .avatar-art{height:225px;width:205px;max-width:100%;padding:0}.battle-modal .battle-fighter .monster-art{height:220px;width:220px;max-width:100%;padding:0;animation:none}
.battle-modal .battle-fighter>strong{font-size:13px;font-weight:700;position:relative;z-index:2}.battle-modal .battle-fighter .health-bar{max-width:190px;height:7px;margin-top:11px;transition:none}.battle-modal .battle-fighter .health-bar>div{transition:width .4s ease-out}.battle-modal .battle-fighter>small{font-size:10px;margin-top:7px;font-variant-numeric:tabular-nums}
.battle-divider{color:var(--muted);font-size:10px;font-weight:700;align-self:center;display:flex;align-items:center;justify-content:center;position:relative;z-index:0}.battle-divider i{position:absolute;width:150px;border-top:1px dashed var(--line);top:24px}
.battle-step{background:var(--surface);border:1px solid var(--line);border-radius:11px;min-height:102px;padding:15px 18px;text-align:center;margin-top:2px}
.battle-step-content>strong{font-family:var(--heading);font-size:18px;letter-spacing:-.4px;display:block}.battle-step p{font-size:11px;color:var(--secondary);margin-top:5px;line-height:1.7}.battle-step.hit .battle-step-content>strong,.battle-step.lost .battle-step-content>strong{color:var(--danger)}.battle-step.deflect .battle-step-content>strong{color:var(--soul)}.battle-step.rally .battle-step-content>strong{color:var(--heart)}.battle-step.won .battle-step-content>strong{color:var(--green)}
.combat-badges{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:10px}.combat-badges:empty{display:none}.combat-badge{font-size:10px;border-radius:5px;padding:4px 7px;color:var(--cat,var(--accent));background:var(--cat-bg,var(--accent-soft))}.combat-badge.gear{color:var(--gold);background:var(--gold-bg)}
.combat-loadout{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:13px 0 7px}.combat-loadout span{font-size:9px;color:var(--cat,var(--secondary));padding:3px 6px;border:1px solid var(--line);border-radius:5px}.combat-loadout .gear{color:var(--secondary)}
.combat-history{text-align:left;border-top:1px solid var(--line);margin:9px 0 14px}.combat-history summary{cursor:pointer;color:var(--muted);font-size:10px;padding:10px 0;list-style-position:inside}.combat-history summary>span{float:right;font-size:9px}.combat-history ol{margin:0;padding:0 10px 2px;list-style:none;max-height:135px;overflow:auto;scrollbar-width:thin}.combat-history li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 0;font-size:10px;border-bottom:1px solid var(--line);color:var(--secondary)}.combat-history li:last-child{border-bottom:0}.combat-history li strong{font-weight:600;color:var(--danger)}.combat-history li.deflect strong{color:var(--soul)}.combat-history li.rally strong{color:var(--heart)}.combat-history li small{grid-column:1/-1;color:var(--muted);font-size:9px}
.battle-modal .loot-box{margin-top:12px}.battle-skip{padding:10px 12px;margin-top:7px}.combat-float,.combat-block{position:absolute;z-index:6;pointer-events:none;opacity:0;white-space:nowrap;font-family:var(--heading);font-weight:800;letter-spacing:-.4px}.combat-float{left:50%;top:45px;color:var(--danger);font-size:24px;text-shadow:0 2px 0 var(--panel),0 -2px 0 var(--panel),2px 0 0 var(--panel),-2px 0 0 var(--panel);transform:translate(-50%,0)}.combat-float.deflect{font-size:16px;color:var(--soul);top:52px}.combat-float.rally{color:var(--heart)}.combat-block{left:50%;top:22px;color:var(--gold);background:var(--gold-bg);font-size:10px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:6px;transform:translate(-50%,0);display:flex;align-items:center;gap:5px}.combat-block .icon{width:13px;height:13px}
.strike-arc,.hit-sparks{position:absolute;pointer-events:none;z-index:5;opacity:0;overflow:visible}.strike-arc{width:135px;height:135px;left:50%;top:54px;transform:translateX(-50%);fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--panel))}.strike-arc path+path{stroke:#fff;stroke-width:3}.monster .strike-arc{transform:translateX(-50%) rotate(-12deg)}.player .strike-arc{stroke:var(--danger);transform:translateX(-50%) scaleX(-1)}.hit-sparks{width:88px;height:88px;top:89px;left:50%;transform:translateX(-50%);fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.deflect-ring,.healing-ring{position:absolute;left:50%;top:77px;transform:translate(-50%,0);opacity:0;z-index:4;pointer-events:none;border-radius:50%;width:95px;height:95px;border:2px solid var(--soul);background:color-mix(in srgb,var(--soul) 9%,transparent);display:flex;align-items:center;justify-content:center}.deflect-ring .icon{width:55px;height:55px;color:var(--soul)}.healing-ring{border-color:var(--heart);background:color-mix(in srgb,var(--heart) 12%,transparent);box-shadow:0 0 30px color-mix(in srgb,var(--heart) 25%,transparent)}
.event-attack .player .fighter-motion{animation:player-lunge 1.3s ease-in-out both}.event-hit .monster .fighter-motion,.event-deflect .monster .fighter-motion{animation:monster-lunge 1.3s ease-in-out both}
.impacted.event-attack .monster .fighter-motion,.impacted.event-hit .player .fighter-motion{animation:combat-stagger .48s ease-out both}.event-deflect .player .fighter-motion{animation:combat-evade 1.3s ease-in-out both}
.impacted .combat-float{animation:combat-number 1.15s ease-out both}.impacted .combat-block{animation:block-callout 1.3s ease-out both}.impacted .strike-arc{animation:sword-slash .38s ease-out both}.impacted .hit-sparks{animation:spark-burst .45s ease-out both}.impacted .deflect-ring{animation:magic-ring .8s ease-out both}.impacted .healing-ring{animation:magic-ring 1.1s ease-out both}
.impacted.event-rally .player .fighter-motion{animation:healing-glow 1.1s ease-out both}.outcome.victory .monster .fighter-motion{animation:monster-fall .75s ease-out both}.outcome.defeat .player .fighter-motion{animation:adventurer-fall .75s ease-out both}.outcome.defeat .player .avatar-art{filter:grayscale(.8);opacity:.6}
@keyframes player-lunge{0%,100%{transform:translateX(0)}24%,32%{transform:translateX(var(--lunge)) rotate(7deg)}55%{transform:translateX(12px) rotate(-2deg)}}
@keyframes monster-lunge{0%,100%{transform:translateX(0)}24%,32%{transform:translateX(calc(-1 * var(--lunge))) rotate(-9deg)}55%{transform:translateX(-9px) rotate(2deg)}}
@keyframes combat-stagger{0%,100%{transform:translateX(0);filter:none}15%{transform:translateX(10px) rotate(4deg);filter:brightness(1.6)}35%{transform:translateX(-7px) rotate(-3deg)}65%{transform:translateX(4px)}}
@keyframes combat-evade{0%,100%{transform:translate(0,0)}24%,42%{transform:translate(-27px,-13px) rotate(-7deg)}65%{transform:translate(-8px,-3px)}}
@keyframes combat-number{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}15%,65%{opacity:1}25%{transform:translate(-50%,-3px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
@keyframes block-callout{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}15%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px)}}
@keyframes sword-slash{0%{opacity:0;stroke-dasharray:180;stroke-dashoffset:180;transform:translateX(-50%) rotate(-35deg) scale(.7)}25%{opacity:1}75%{opacity:1;stroke-dashoffset:0}100%{opacity:0;transform:translateX(-50%) rotate(15deg) scale(1.15)}}
@keyframes spark-burst{0%{opacity:1;transform:translateX(-50%) scale(.35)}100%{opacity:0;transform:translateX(-50%) scale(1.5)}}
@keyframes magic-ring{0%{opacity:0;transform:translate(-50%,0) scale(.6)}25%{opacity:.85}100%{opacity:0;transform:translate(-50%,0) scale(1.5)}}
@keyframes healing-glow{35%{filter:drop-shadow(0 0 15px var(--heart));transform:translateY(-5px)}}
@keyframes monster-fall{30%{transform:translateY(-5px) rotate(-4deg)}100%{transform:translateY(9px) rotate(10deg) scale(.9)}}
@keyframes adventurer-fall{30%{transform:translateY(-5px) rotate(4deg)}100%{transform:translateY(9px) rotate(-12deg) scale(.9)}}
@media(max-width:560px){.battle-modal .battle-body{padding:12px 16px 20px}.battle-modal .battle-stage{--lunge:40px;grid-template-columns:1fr 18px 1fr;gap:4px;margin-bottom:15px;padding-bottom:15px}.fighter-scene{height:170px}.battle-modal .battle-fighter .avatar-art{height:170px;width:155px}.battle-modal .battle-fighter .monster-art{height:165px;width:165px}.battle-modal .battle-fighter>strong{font-size:11px}.battle-modal .battle-fighter .health-bar{max-width:120px}.battle-toolbar{font-size:8px;letter-spacing:.2px}.battle-toolbar>div{gap:5px}.battle-step{padding:12px;min-height:96px}.battle-step-content>strong{font-size:16px}.battle-step p{font-size:10px}.combat-badge{font-size:9px}.combat-loadout span{font-size:8px}.combat-float{font-size:20px;top:24px}.combat-float.deflect{font-size:12px;top:32px}.combat-block{font-size:8px;top:6px;padding:4px 6px}.strike-arc{width:100px;height:100px;top:40px}.hit-sparks{top:57px;width:70px;height:70px}.deflect-ring,.healing-ring{width:70px;height:70px;top:55px}.battle-modal .modal-header h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.impacted .combat-float,.impacted .combat-block{opacity:1;transform:translate(-50%,0)}.impacted .deflect-ring,.impacted .healing-ring{opacity:.65}.strike-arc,.hit-sparks{display:none}}
:root[data-motion=reduced] .impacted .combat-float,:root[data-motion=reduced] .impacted .combat-block{opacity:1;transform:translate(-50%,0)}:root[data-motion=reduced] .impacted .deflect-ring,:root[data-motion=reduced] .impacted .healing-ring{opacity:.65}:root[data-motion=reduced] .strike-arc,:root[data-motion=reduced] .hit-sparks{display:none}

/* Inspectable character model, with native pointer and keyboard rotation. */
.character-panel .avatar-scene{height:205px;margin:3px auto 4px;width:100%;border-radius:12px}
.character-panel .avatar-art{width:205px;height:220px;max-width:100%;flex-shrink:0}
.avatar-interactive{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative;isolation:isolate}
.avatar-interactive.dragging{cursor:grabbing;touch-action:none}
.avatar-interactive:active{transform:none!important}
.avatar-inspect-hint{position:absolute;left:0;right:0;bottom:2px;color:var(--muted);font-size:8px;letter-spacing:.2px;display:flex;justify-content:center;align-items:center;gap:7px;pointer-events:none;opacity:0;transition:opacity .15s}
.avatar-inspect-hint>span{font-size:13px}.avatar-interactive:hover .avatar-inspect-hint,.avatar-interactive:focus-visible .avatar-inspect-hint{opacity:1}
.avatar-modal{width:830px}.avatar-modal .modal-header{padding-bottom:18px}
.character-studio{display:grid;grid-template-columns:1.3fr 1fr;padding:24px;gap:26px;text-align:left}
.character-preview{min-width:0;align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.avatar-turntable{height:365px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,var(--accent-soft),transparent 70%)}
.avatar-model-scale{width:320px;height:350px;max-width:100%;transform:scale(var(--avatar-zoom,1));transform-origin:50% 55%;pointer-events:none}
.avatar-model-scale .avatar-art{width:100%;height:100%}
.avatar-view-controls{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px 0}.avatar-view-controls>span{flex:1;max-width:18px}.avatar-view-controls .text-button{font-size:10px}.avatar-view-controls output{min-width:31px;text-align:center;font-size:10px;color:var(--secondary);font-variant-numeric:tabular-nums}.avatar-view-controls .icon-button{font-size:19px}
.avatar-drag-help{color:var(--muted);font-size:9px;text-align:center;padding:8px 12px 16px}
.appearance-panel{min-width:0}.appearance-panel h3{font-size:13px;letter-spacing:-.2px;margin:0 0 18px}.appearance-field{border:0;padding:0;margin:0 0 20px;min-width:0}.appearance-field legend{font-size:10px;color:var(--secondary);padding:0;margin-bottom:9px}.appearance-swatches{display:flex;gap:10px;flex-wrap:wrap}
.appearance-swatch{width:29px;height:29px;background:var(--swatch);border:3px solid var(--panel);border-radius:50%;outline:1px solid var(--line);display:flex;align-items:center;justify-content:center}.appearance-swatch .icon{width:13px;height:13px;color:#fff;filter:drop-shadow(0 1px 1px #0008);stroke-width:2.5}.appearance-swatch.selected{outline:2px solid var(--accent)}.appearance-swatch:hover{outline-color:var(--accent)}
.hair-style-options{display:flex;gap:6px;flex-wrap:wrap}.style-option{border:1px solid var(--line);border-radius:6px;font-size:10px;padding:6px 10px;color:var(--secondary)}.style-option.selected{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.avatar-equipped{border-top:1px solid var(--line);padding-top:17px;margin-top:2px}.avatar-equipped h3{margin-bottom:10px;font-size:11px}.avatar-equipped>div{display:flex;align-items:center;gap:10px;margin:10px 0}.avatar-gear-icon{width:33px;height:33px;border-radius:7px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted)}.avatar-gear-icon>svg{width:26px;height:26px}.avatar-gear-icon>.icon{width:16px;height:16px}.avatar-equipped strong{display:block;font-size:10px;font-weight:600}.avatar-equipped small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.appearance-save-note{font-size:9px;color:var(--muted);line-height:1.7;margin-top:16px}
@media(max-width:650px){.character-studio{grid-template-columns:1fr;padding:18px;gap:22px}.avatar-turntable{height:285px}.avatar-model-scale{height:280px;width:260px}.appearance-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.appearance-panel>h3,.appearance-panel>.avatar-equipped,.appearance-save-note{grid-column:1/-1}.appearance-swatches{gap:8px}.appearance-swatch{width:27px;height:27px}.avatar-equipped{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.avatar-equipped h3{grid-column:1/-1}.avatar-view-controls>span{max-width:24px}.avatar-inspect-hint{opacity:1}.appearance-field{margin-bottom:18px}}
@media(max-width:650px){.appearance-swatches{gap:6px}.appearance-swatch{width:24px;height:24px}}

/* Voxel gold, kept beside the exact reward and balance amounts. */
.voxel-gold{display:block;overflow:visible;flex-shrink:0;pointer-events:none}
.voxel-gold-value{gap:5px;font-variant-numeric:tabular-nums}
.task-reward{flex-shrink:0;min-width:47px;text-align:right}.task-reward .gold-value{justify-content:flex-end;width:100%;font-size:10px;gap:3px}.task-reward .gold-pile{width:31px;height:26px}.task-reward .gold-value>span{min-width:12px}
#gold-target{padding:2px 10px 2px 5px;border-radius:9px}#gold-target .gold-value{gap:6px;font-size:13px}#gold-target .gold-pile{width:43px;height:34px}
.flying-coin{width:19px;height:13px;background:none;border:0;border-radius:0}.flying-coin .voxel-coin{width:100%;height:100%}
@media(max-width:560px){.task-reward .gold-pile{width:28px;height:24px}.task-reward{min-width:43px}}

/* Shop displays use the same modeled equipment as the character. */
.shop-modal{width:790px}.shop-modal .modal-header{padding-bottom:17px}.shop-top{padding-top:14px;gap:12px}.shop-wallet{display:flex;align-items:center;gap:10px}.shop-wallet>span:first-child{font-size:10px;color:var(--muted)}.shop-wallet .wallet{padding:1px 10px 1px 4px;border-radius:9px}.shop-wallet .gold-pile{width:43px;height:35px}.shop-wallet .gold-value{font-size:13px;gap:7px}
.shop-grid{gap:12px;padding-top:15px}.shop-item{position:relative;padding:10px 13px 12px;border-radius:12px;overflow:hidden;transition:border-color .18s,background .18s}.shop-item:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.shop-item .item-art{width:100%;height:110px;background:radial-gradient(ellipse at 50% 64%,var(--surface-hover),transparent 70%);border-radius:9px;margin-bottom:1px}.shop-item .item-art svg{width:133px;height:123px;transition:transform .2s ease-out}.shop-item:hover .item-art svg{transform:translateY(-3px)}.shop-item.special .item-art{background:radial-gradient(ellipse at 50% 60%,var(--soul-bg),transparent 73%)}.shop-item .item-copy{flex:1;width:100%}.shop-item .item-tier{font-size:7px;letter-spacing:1.3px;color:var(--muted)}.shop-item.large .item-tier{color:var(--body)}.shop-item.special .item-tier{color:var(--soul)}.shop-item h3{font-size:12px;margin-top:3px}.shop-item p{font-size:10px;line-height:1.6;margin:5px 0 12px}.shop-item>.button{min-height:35px;padding:3px 10px;font-size:10px;gap:8px}.shop-item>.button:disabled{opacity:1;color:var(--muted);background:var(--surface)}.shop-item>.button:disabled .gold-value{opacity:.65}.shop-item>.button .gold-pile{width:31px;height:25px}.shop-item>.button .gold-value{font-size:11px;gap:5px}.shop-item.owned>.button{color:var(--green)}
.shop-item.potion{grid-column:1/-1;flex-direction:row;text-align:left;gap:18px;padding:8px 16px;background:var(--surface)}.shop-item.potion .item-art{flex:0 0 74px;width:74px;height:73px;margin:0;background:radial-gradient(ellipse,var(--soul-bg),transparent 75%)}.shop-item.potion .item-art svg{width:80px;height:86px}.shop-item.potion .item-copy{flex:1}.shop-item.potion p{margin-bottom:0}.shop-item.potion>.button{width:auto;min-width:100px;align-self:center;background:var(--panel)}.shop-item.potion .item-tier{color:var(--heart)}.shop-note{font-size:9px;line-height:1.7;padding:14px 25px 17px}
@media(max-width:560px){.shop-top{padding-top:12px}.shop-modal .modal-header{padding-bottom:15px}.shop-wallet{gap:5px}.shop-wallet>span:first-child{display:none}.shop-wallet .gold-pile{width:34px;height:29px}.shop-wallet .gold-value{font-size:12px;gap:4px}.shop-grid{padding-top:13px;gap:9px}.shop-item{padding:8px 9px 10px}.shop-item .item-art{height:94px}.shop-item .item-art svg{width:111px;height:109px}.shop-item h3{font-size:11px}.shop-item p{font-size:9px;margin-bottom:10px}.shop-item.potion{padding:8px 10px;gap:8px}.shop-item.potion .item-art{flex-basis:46px;width:46px;height:60px}.shop-item.potion .item-art svg{width:60px;height:68px}.shop-item.potion>.button{min-width:76px;padding-left:6px;padding-right:6px;gap:4px}.shop-item.potion p{font-size:9px}.shop-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){.shop-item:hover .item-art svg{transform:none}}
:root[data-motion=reduced] .shop-item:hover .item-art svg{transform:none}

/* Item categories keep the shop and inventory focused on one shelf at a time. */
.shop-tabs{display:flex;margin:17px 25px 0;border-bottom:1px solid var(--line);gap:6px}.shop-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 13px 12px;color:var(--muted);font-size:11px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.shop-tabs button .icon{width:15px;height:15px}.shop-tabs button[aria-selected=true]{color:var(--accent);border-color:var(--accent);font-weight:650}.shop-tabs button:hover{color:var(--text);background:var(--surface)}.shop-grid{min-height:267px}.shop-item.item-selected{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.item-count{align-self:flex-end;display:flex;align-items:center;gap:3px;font-size:8px;color:var(--muted);height:17px;position:absolute;right:10px;top:8px}.item-count .icon{width:11px;height:11px;color:var(--green)}.shop-item .item-use{min-height:29px;margin-top:5px;background:transparent;color:var(--accent);font-size:9px}.shop-item>.button+.button{margin-top:6px}.shop-grid>.empty-state{grid-column:1/-1;align-self:center;padding:32px}.shop-grid>.empty-state .button{margin:15px auto 0}.shop-note{min-height:47px}.shop-item.potion{grid-column:auto;flex-direction:column;text-align:center;gap:0;padding:10px 13px 12px;background:transparent}.shop-item.potion .item-art{flex:none;width:100%;height:110px;background:radial-gradient(ellipse at 50% 64%,var(--surface-hover),transparent 70%);margin-bottom:1px}.shop-item.potion .item-art svg{width:133px;height:123px}.shop-item.potion .item-copy{flex:1}.shop-item.potion p{margin:5px 0 12px}.shop-item.potion>.button{width:100%;min-width:0;background:var(--surface)}.shop-item.potion>.button.primary{background:var(--accent);color:white}.shop-item.potion>.button.item-use{background:transparent;color:var(--accent)}.shop-item.potion>.button:disabled{background:var(--surface);color:var(--muted)}.pet-companion{position:absolute;bottom:6px;right:calc(50% - 142px);width:92px;height:100px;pointer-events:none;display:block}.pet-companion svg{width:100%;height:100%}.avatar-turntable .pet-companion{bottom:20px;right:calc(50% - 165px);width:110px;height:120px}.prepared-spell{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px;background:var(--soul-bg);border:1px solid var(--line);border-radius:8px;color:var(--soul);font-size:10px;margin-top:13px}.prepared-spell .icon{width:17px}.prepared-spell small{display:block;font-size:8px;color:var(--muted);margin-top:1px}
@media(max-width:560px){.shop-tabs{margin:14px 18px 0;gap:0}.shop-tabs button{flex:1;gap:4px;padding:10px 4px;font-size:9px}.shop-tabs button .icon{width:12px;height:12px}.shop-grid{min-height:235px}.shop-item.potion{padding:8px 9px 10px}.shop-item.potion .item-art{width:100%;height:94px}.shop-item.potion .item-art svg{width:111px;height:109px}.shop-item.potion>.button{min-width:0}.shop-item.potion p{font-size:9px}.avatar-turntable .pet-companion{width:90px;height:100px;right:calc(50% - 142px)}}

/* The desktop dashboard shares one height; long lists scroll inside their panels. */
.topbar-brand{display:flex;align-items:center;gap:23px;min-width:0}
.topbar-date{font-size:10px;color:var(--muted);white-space:nowrap;letter-spacing:.5px;padding-left:23px;border-left:1px solid var(--line)}
.app-footer .day-summary{display:flex;padding:0;font-size:9px;gap:17px}
.app-footer .day-summary .icon{width:12px;height:12px}
@media(min-width:851px){
  .topbar{height:68px}
  main{height:calc(100dvh - 68px);min-height:646px;padding-top:16px;padding-bottom:12px;display:flex;flex-direction:column}
  .dashboard{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
  .tasks-panel,.habits-panel{height:100%;min-height:0;max-height:none}
  .tasks-scroll,.habits-scroll{min-height:0}
  .character-column{height:100%;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:14px}
  .character-panel{min-height:0;padding-top:12px;padding-bottom:13px}
  .character-heading{height:31px}
  #gold-target{padding-top:0;padding-bottom:0}
  #gold-target .gold-pile{height:29px;width:37px}
  .character-panel .avatar-scene{height:clamp(132px,18dvh,175px);margin:-2px auto 0}
  .character-panel .avatar-art{width:162px;height:174px;transform:translateY(-5px)}
  .character-name{font-size:17px;margin-top:0}
  .health-label{margin-top:8px}
  .health-bar{margin-top:6px}
  .stat-chips{margin-top:9px}
  .character-actions{margin-top:10px}
  .monster-panel{min-height:0;padding-top:13px;padding-bottom:13px;display:flex;flex-direction:column;align-items:stretch;overflow:auto;scrollbar-width:thin}
  .monster-scene{flex:1;min-height:55px;max-height:none;height:auto}
  .monster-panel .monster-art{height:100px;width:110px}
  .monster-panel>p{margin-top:3px}
  .readiness{margin-top:7px}
  .monster-panel .readiness-bar{flex-shrink:0}
  .fight-button{margin-top:9px;flex-shrink:0}
  .fight-hint{margin-top:6px}
  .app-footer{flex-shrink:0;margin-top:12px;min-height:19px}
  .save-warning{flex-shrink:0}
}
@media(min-width:851px) and (max-height:720px){
  main{min-height:646px;height:calc(100dvh - 68px)}
  .dashboard{min-height:570px}
  .character-panel .avatar-scene{height:132px}
  .character-panel .avatar-art{width:145px;height:157px}
  .monster-panel .monster-art{height:85px;width:95px}
}
@media(max-width:850px){
  main{padding-top:16px}
  .topbar-brand{gap:14px}.topbar-date{padding-left:14px;font-size:9px}
  .beta{display:none}
  .app-footer{flex-wrap:wrap;row-gap:9px}
  .app-footer .day-summary{order:3;flex-basis:100%;justify-content:center}
}
@media(max-width:560px){
  .topbar-brand{gap:9px}.topbar-date{padding-left:9px;max-width:108px;white-space:normal;font-size:8px;line-height:1.5}
  .topbar-actions{flex-shrink:0}
  .app-footer .day-summary{font-size:9px}
}
@media(min-width:851px) and (max-height:800px){
  .monster-panel:has(.prepared-spell)>p,.monster-panel:has(.prepared-spell)>.fight-hint{display:none}
  .monster-panel .prepared-spell{padding:6px;margin-top:7px}
  .monster-panel .prepared-spell span{display:flex;align-items:center;gap:6px}
  .monster-panel .prepared-spell small{margin:0;font-size:7px}
  .monster-panel .replay-button{margin-top:6px}
  .character-column:has(.prepared-spell):has(.replay-button){gap:12px}
  .character-column:has(.prepared-spell):has(.replay-button) .avatar-scene{height:104px}
  .character-column:has(.prepared-spell):has(.replay-button) .avatar-art{height:134px;width:125px}
  .monster-panel:has(.prepared-spell):has(.replay-button) .monster-scene{min-height:40px}
  .monster-panel:has(.prepared-spell):has(.replay-button) .monster-art{height:75px;width:84px}
}

/* A separate collection keeps milestones and future encounters off the dashboard. */
.collection-button{height:33px;padding:0 10px;display:flex;align-items:center;gap:7px;border-radius:8px;font-size:11px;color:var(--secondary)}
.collection-button:hover{background:var(--accent-soft);color:var(--accent)}.collection-button .icon{width:17px;height:17px}
button.monster-scene{width:100%;padding:0;border-radius:10px;cursor:pointer}
button.monster-scene:hover{background:color-mix(in srgb,var(--surface) 65%,transparent)}
.collection-modal{width:980px;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden}
.collection-modal .modal-header{flex-shrink:0;padding-bottom:19px}
.collection-tabs{display:flex;gap:24px;padding:0 26px;border-bottom:1px solid var(--line);flex-shrink:0}
.collection-tabs>button{display:flex;align-items:center;gap:9px;padding:13px 0 12px;font-size:12px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.collection-tabs>button[aria-selected=true]{color:var(--accent);border-color:var(--accent);font-weight:650}
.collection-tabs>button>span{font-size:9px;font-weight:500;background:var(--surface);border-radius:5px;padding:2px 6px;color:var(--secondary)}
.collection-body{overflow:auto;padding:22px 26px 20px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}
.collection-toolbar h3{font-size:14px;letter-spacing:-.2px}.collection-toolbar p{font-size:10px;color:var(--muted);margin-top:4px}
.earned-filter{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:7px;font-size:10px;padding:7px 9px;white-space:nowrap;color:var(--secondary)}
.earned-filter svg{width:13px;height:13px}.earned-filter.selected{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}
.seal-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:20px}
.seal-filters button{font-size:10px;padding:6px 10px;border-radius:6px;color:var(--muted)}.seal-filters button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);font-weight:600}.seal-filters button:hover{background:var(--surface)}
.seal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.seal-card{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:12px;padding:23px 14px 14px;min-width:0;background:var(--panel)}
.seal-card.is-earned{background:radial-gradient(ellipse at 50% 20%,var(--gold-bg),transparent 67%);border-color:color-mix(in srgb,var(--gold) 24%,var(--line))}
.seal-art{width:104px;height:110px;display:block;flex-shrink:0}.seal-card.is-locked .seal-art{filter:grayscale(1);opacity:.45}
.seal-state{position:absolute;right:10px;top:8px;display:flex;align-items:center;gap:4px;color:var(--muted);font-size:8px}.seal-state svg{width:10px;height:10px}.is-earned .seal-state{color:var(--gold)}
.seal-category{text-transform:uppercase;color:var(--cat,var(--muted));font-size:7px;letter-spacing:1.2px;margin-top:5px}
.seal-card h4{font-family:var(--heading);font-size:12px;line-height:1.4;margin:5px 0 0;font-weight:700}
.seal-card p{font-size:10px;color:var(--muted);line-height:1.6;margin:6px 0 12px;flex:1}
.seal-progress{width:100%;height:3px;border-radius:3px;background:var(--surface);overflow:hidden}.seal-progress span{display:block;height:100%;background:var(--cat,var(--accent))}.is-earned .seal-progress span{background:var(--gold)}
.seal-card>small{font-size:8px;color:var(--muted);margin-top:7px;font-variant-numeric:tabular-nums}
.collection-note{font-size:9px;color:var(--muted);text-align:center;margin-top:20px;line-height:1.7}
.collection-empty{grid-column:1/-1;text-align:center;padding:48px 15px}.collection-empty h3{font-size:15px}.collection-empty p{font-size:11px;color:var(--muted);margin:8px 0 20px}
.bestiary-feature{display:grid;grid-template-columns:190px minmax(0,1fr);gap:23px;align-items:center;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:15px 22px;margin-bottom:18px}
.bestiary-portrait{height:204px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(ellipse,var(--accent-soft),transparent 72%)}
.bestiary-portrait .monster-art{width:190px;height:206px}.bestiary-kind{display:block;font-size:9px;color:var(--muted);margin-top:10px}
.bestiary-detail h3{font-size:23px;letter-spacing:-.6px;margin:4px 0 7px}.bestiary-detail p{font-size:11px;color:var(--secondary);line-height:1.7;max-width:450px}
.bestiary-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin-top:13px}.bestiary-stats strong{color:var(--secondary);font-weight:650}
.bestiary-detail>small{font-size:9px;color:var(--muted);display:block;margin-top:11px;line-height:1.6}.bestiary-detail>.button{font-size:10px;padding:7px 10px;min-height:30px;margin-top:12px}
.monster-status{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:9px;color:var(--muted);line-height:1.5}.monster-status svg{width:11px;height:11px}.monster-status.available{color:var(--accent)}.monster-status.defeated{color:var(--green)}.monster-status.next{color:var(--gold)}
.bestiary-detail>.monster-status{padding:4px 7px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.bestiary-pagination{display:flex;align-items:center;justify-content:center;gap:13px;margin:8px 0 18px}.bestiary-pagination label{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted)}.bestiary-pagination select{width:auto;font-size:11px;padding:6px 10px;background:var(--panel)}
.bestiary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.monster-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:15px 8px 14px;border:1px solid var(--line);border-radius:11px;min-width:0;background:var(--panel)}
.monster-card:hover{background:var(--surface)}.monster-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.monster-card.available{background:var(--accent-soft)}
.monster-card-number{position:absolute;top:9px;left:11px;font-size:8px;color:var(--muted)}
.monster-card .monster-art{width:130px;height:141px;max-width:100%;margin-bottom:5px}.monster-card.locked .monster-art{filter:grayscale(.7);opacity:.55}.monster-card.next .monster-art{opacity:.8}
.monster-card>strong{font-size:11px;font-family:var(--heading);font-weight:700;display:block}.monster-card .monster-status{margin-top:6px;font-size:8px}
.badge-unlock{display:flex;align-items:center;gap:8px;background:var(--panel);color:var(--text);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));border-radius:12px;box-shadow:0 8px 28px #1710201a;padding:7px 17px 7px 7px;pointer-events:auto;animation:arrive .25s ease-out;text-align:left}
.badge-unlock .seal-art{width:55px;height:58px}.badge-unlock>span{display:flex;flex-direction:column;gap:2px}.badge-unlock small{font-size:7px;letter-spacing:1.3px;color:var(--gold)}.badge-unlock strong{font-size:13px}.badge-unlock>span>span{font-size:9px;color:var(--muted)}
@media(max-width:1100px){.collection-button{padding:0 7px}.collection-button>span{display:none}}
@media(max-width:720px){.seal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bestiary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bestiary-feature{grid-template-columns:140px minmax(0,1fr);gap:14px;padding:14px}.bestiary-portrait{height:165px}.bestiary-portrait .monster-art{width:145px;height:160px}.bestiary-detail h3{font-size:20px}}
@media(max-width:560px){
  .collection-button{padding:0;width:28px;justify-content:center}.collection-button .icon{width:17px;height:17px}
  .collection-modal{max-height:94dvh}.collection-tabs{padding:0 18px;gap:19px}.collection-tabs>button{font-size:10px;gap:6px}.collection-tabs>button>span{font-size:8px;padding:2px 4px}
  .collection-body{padding:18px}.collection-toolbar{align-items:flex-start;gap:10px}.collection-toolbar h3{font-size:13px}.collection-toolbar p{font-size:9px;max-width:205px}.earned-filter{font-size:9px;padding:6px;gap:3px}.seal-filters{gap:3px}.seal-filters button{font-size:9px;padding:5px 8px}
  .seal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.seal-card{padding:23px 10px 12px}.seal-art{width:88px;height:93px}.seal-card h4{font-size:11px}.seal-card p{font-size:9px}.seal-state{font-size:7px;right:8px}
  .bestiary-feature{grid-template-columns:1fr;padding:12px 15px;gap:5px}.bestiary-portrait{height:145px}.bestiary-portrait .monster-art{width:140px;height:152px}.bestiary-detail h3{font-size:20px}.bestiary-detail p{font-size:10px}.bestiary-kind{font-size:8px}.bestiary-stats{gap:11px;font-size:9px}.bestiary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.monster-card .monster-art{width:110px;height:119px}.monster-card>strong{font-size:10px}.monster-card .monster-status{font-size:7px}.bestiary-pagination{gap:8px}.bestiary-pagination label{font-size:9px;gap:7px}.bestiary-pagination select{max-width:190px;font-size:10px}.collection-note{font-size:8px}
}

/* Compact stat chips reveal their current and next combat benefits on demand. */
.collection-button{width:32px;padding:0;justify-content:center}
.stat-chips>.stat-chip{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;background:var(--cat-bg);color:var(--cat);padding:6px;flex:1;min-width:0;font-size:11px;line-height:1.5}
.stat-chip:hover,.stat-chip[aria-expanded=true]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 45%,transparent)}
.stat-tooltip{position:fixed;z-index:45;background:var(--panel);border:1px solid color-mix(in srgb,var(--cat) 35%,var(--line));border-radius:12px;padding:15px;text-align:left;box-shadow:0 10px 40px #18152a24;max-height:calc(100dvh - 24px);overflow:auto}
.stat-tooltip[hidden]{display:none}
.stat-tip-heading{display:flex;align-items:center;gap:8px;color:var(--cat);font-size:13px}.stat-tip-heading .icon{width:17px;height:17px}
.stat-tooltip>p{font-size:11px;line-height:1.65;color:var(--secondary);margin:9px 0 12px}
.stat-tip-benefit{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:10px;padding:9px;border-radius:7px;font-size:11px}
.stat-tip-benefit>span{color:var(--secondary);font-weight:600}.stat-tip-benefit small{display:block;font-size:9px;font-weight:400;color:var(--muted)}
.stat-tip-benefit>strong{font-size:11px;font-weight:600;line-height:1.5}.stat-tip-benefit.next{background:var(--cat-bg)}.stat-tip-benefit.next>strong{color:var(--cat)}
.stat-tooltip>.stat-tip-healing{font-size:10px;margin-bottom:0}.stat-tip-xp{display:block;font-size:9px;color:var(--muted);border-top:1px solid var(--line);margin-top:12px;padding-top:9px}
@media(max-width:560px){.collection-button{width:28px}}

/* Saved habit symbols and the character's own face keep personalization compact. */
.habit-icon-picker{border:0;padding:0;margin:20px 0 0;min-width:0}
.habit-icon-picker legend{font-size:11px;font-weight:600;margin-bottom:10px;padding:0;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}
.habit-icon-picker legend>span{font-size:10px;font-weight:400;color:var(--cat)}
.habit-icon-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
.habit-icon-option{position:relative;min-width:0;height:39px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.habit-icon-option input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.habit-icon-option>span{display:flex;pointer-events:none}.habit-icon-option .icon{width:19px;height:19px}
.habit-icon-option:hover{background:var(--surface)}.habit-icon-option:has(input:checked){border-color:var(--cat);background:var(--cat-bg);color:var(--cat)}
.habit-icon-option:has(input:focus-visible){outline:2px solid var(--cat);outline-offset:3px}
.profile-dot{width:34px;height:34px;margin-left:5px;padding:2px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:var(--accent-soft)}
.profile-dot:hover{border-color:var(--accent)}.profile-dot .avatar-face{display:block;width:100%;height:100%;pointer-events:none}
@media(max-width:560px){.habit-icon-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.habit-icon-option{height:37px}.profile-dot{display:flex;width:30px;height:30px;margin-left:3px}}
.backup-nudge{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:15px;font-size:11px}
.backup-nudge p{display:flex;align-items:center;gap:8px;margin:0;color:var(--text)}
.backup-nudge p svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.backup-nudge-actions{display:flex;align-items:center;gap:14px}
.backup-nudge-actions .button{min-height:30px;padding:5px 12px;font-size:10px}
.backup-box .backup-status{color:var(--text);font-weight:600}
.project-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 16px}
.project-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--secondary)}
.project-chip:hover{background:var(--surface-hover)}
.project-chip.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.project-chip span{font-size:9px;color:var(--muted)}
.project-chip.selected span{color:var(--accent)}
.task-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.task-tag{color:var(--accent);font-size:inherit;padding:0;border-radius:3px}
.task-tag:hover{text-decoration:underline}
.task-row.completed .task-tag{color:var(--muted)}
.task-meta{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:var(--muted)}
.task-meta .icon{width:11px;height:11px}
.item-compare{width:100%;display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--secondary);background:var(--surface);border-radius:8px;padding:7px 8px;margin:-4px 0 10px;text-align:left}
.item-compare small{color:var(--muted);font-size:9px}
.item-compare strong{color:var(--text);font-weight:600}
.item-compare .up{color:var(--green)}
.item-compare .down{color:var(--danger)}
.item-odds{font-size:9px;color:var(--muted)}
.habit-details{padding:20px 25px 0}
.habit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.habit-stats>div{background:var(--surface);border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:1px;min-width:0}
.habit-stats small{font-size:9px;color:var(--muted)}
.habit-stats strong{font-size:15px;font-family:var(--heading)}
.habit-stats span{font-size:9px;color:var(--secondary)}
.habit-history{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin-top:14px}
.history-cell{aspect-ratio:1;border-radius:3px;background:var(--surface-hover);border:1px solid var(--line)}
.habit-details.body .history-cell.done{background:var(--body);border-color:var(--body)}
.habit-details.mind .history-cell.done{background:var(--mind);border-color:var(--mind)}
.habit-details.soul .history-cell.done{background:var(--soul);border-color:var(--soul)}
.habit-details.heart .history-cell.done{background:var(--heart);border-color:var(--heart)}
.habit-details.harm .history-cell.done{background:color-mix(in srgb,var(--harm) 55%,transparent);border-color:var(--harm)}
.habit-details.harm .history-cell.many{background:var(--harm)}
.history-cell.today{outline:1.5px solid var(--accent);outline-offset:1px}
.history-range{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:5px}
.habit-details .form-help{margin:8px 0 0}
.note-card.pinned{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.note-top .icon{width:11px;height:11px;vertical-align:-1px}
button.hashtag{font-size:inherit;line-height:inherit;padding:0}
button.hashtag:hover{text-decoration:underline}
.vault-tag-chips{margin:12px 25px 0}
.review-progress{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:16px 25px 0}
.review-card{margin:10px 25px 0;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface)}
.review-text{font-size:14px;line-height:1.7;margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow:auto}
.review-actions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 25px 0;align-items:center}
.review-actions .button{flex:1 1 auto;white-space:nowrap}
.review-actions kbd{font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:4px;font-family:inherit}
.review-help{padding:0 25px 22px}
.review-done{padding:30px 25px}
@media (max-width:600px){.habit-details,.review-progress,.review-actions,.review-help{padding-left:20px;padding-right:20px}.review-card{margin-left:20px;margin-right:20px}.habit-history{gap:3px}}
@media(max-width:560px){.vault-tag-chips{margin:12px 18px 0}}
/* Celebration pass */
@keyframes coin-arc{0%{opacity:0;transform:translate(0,0) scale(.6) rotate(0)}12%{opacity:1;transform:translate(calc(var(--dx)*.08),calc(var(--arc) * .6)) scale(1.15) rotate(40deg)}45%{transform:translate(calc(var(--dx)*.45),calc(var(--dy)*.25 + var(--arc))) scale(1.1) rotate(140deg)}88%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.7) rotate(300deg)}}
.flying-coin{animation:coin-arc .82s cubic-bezier(.45,0,.55,1) both;filter:drop-shadow(0 0 3px #f2cf6b99)}
@keyframes burst-out{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(120deg)}}
.burst-particle{position:fixed;width:var(--size);height:var(--size);border-radius:50%;background:var(--color);box-shadow:0 0 6px var(--color);animation:burst-out .75s cubic-bezier(.15,.7,.3,1) both}
.burst-particle.star{border-radius:1px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:calc(var(--size)*1.8);height:calc(var(--size)*1.8)}
@keyframes wallet-bump{0%{transform:scale(1)}30%{transform:scale(1.14);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent),0 0 18px #f2cf6b66}100%{transform:scale(1);box-shadow:none}}
.wallet-bump{animation:wallet-bump .45s ease-out}
.reward-pop{font-size:13px;font-weight:800;text-shadow:0 1px 0 var(--panel),0 0 10px color-mix(in srgb,currentColor 35%,transparent)}
@keyframes reward{0%{opacity:0;transform:translate(-50%,0) scale(.6)}18%{opacity:1;transform:translate(-50%,-14px) scale(1.15)}35%{transform:translate(-50%,-20px) scale(1)}100%{opacity:0;transform:translate(-50%,-52px)}}
/* Task check: the box pops and fills, the title strikes through, then the row slides away */
@keyframes check-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes row-leave{0%,55%{opacity:1;transform:none}100%{opacity:0;transform:translateX(18px)}}
.task-row.completing .task-check{background:var(--accent);border-color:var(--accent);animation:check-pop .32s ease-out}
.task-row.completing .task-check:after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.task-row.completing .task-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent);transition:color .2s}
.task-row.completing{animation:row-leave .45s ease-in both}
/* Habit completion */
@keyframes habit-pop{0%{transform:scale(1)}35%{transform:scale(1.3) rotate(-6deg)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.habit-complete.just-done .habit-icon{animation:habit-pop .45s ease-out}
.habit-complete.just-done .xp-badge{animation:habit-pop .45s ease-out .08s}
/* Level up */
@keyframes chip-glow{0%,100%{box-shadow:none;transform:scale(1)}25%{box-shadow:0 0 0 3px var(--cat),0 0 22px var(--cat);transform:scale(1.12)}}
.stat-chip.leveled{animation:chip-glow 1.4s ease-out}
@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-30px) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1.05)}20%{transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}
.level-banner{position:fixed;top:84px;left:50%;display:flex;align-items:center;gap:12px;padding:10px 22px 10px 10px;border-radius:14px;background:var(--panel);border:1.5px solid var(--cat,var(--accent));box-shadow:0 12px 40px #1710202e,0 0 30px color-mix(in srgb,var(--cat,var(--accent)) 30%,transparent);animation:banner-in 2.6s ease-out both}
.level-banner.body{--cat:var(--body)}.level-banner.mind{--cat:var(--mind)}.level-banner.soul{--cat:var(--soul)}.level-banner.heart{--cat:var(--heart)}
.level-banner-icon{width:40px;height:40px;border-radius:10px;background:var(--cat);color:var(--panel);display:flex;align-items:center;justify-content:center}
.level-banner-icon .icon{width:22px;height:22px}
.level-banner small{display:block;font-size:9px;letter-spacing:2px;color:var(--cat);font-weight:700}
.level-banner strong{font-size:16px;font-family:var(--heading)}
/* Seal earned */
@keyframes seal-arrive{0%{opacity:0;transform:translateY(20px) scale(.85)}60%{opacity:1;transform:translateY(-4px) scale(1.03)}100%{transform:none}}
@keyframes seal-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes seal-bounce{0%{transform:scale(.3) rotate(-25deg)}55%{transform:scale(1.18) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shine-sweep{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
.badge-unlock{position:relative;overflow:hidden;animation:seal-arrive .5s cubic-bezier(.2,.9,.3,1.2) both;box-shadow:0 10px 34px #1710202a,0 0 24px color-mix(in srgb,var(--gold) 28%,transparent)}
.badge-unlock:after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);animation:shine-sweep 1.1s ease-out .45s both;pointer-events:none}
.seal-wrap{position:relative;display:flex;flex-shrink:0}
.seal-wrap .seal-art{position:relative;animation:seal-bounce .6s cubic-bezier(.2,.9,.3,1.3) .1s both}
.seal-rays{position:absolute;left:50%;top:50%;width:92px;height:92px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--gold) 45%,transparent) 0 10deg,transparent 10deg 30deg);mask:radial-gradient(circle,#000 25%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);animation:seal-spin 6s linear infinite}
/* Shop */
@keyframes card-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}35%{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 45%,transparent),0 0 26px #f2cf6b55}100%{box-shadow:0 0 0 0 transparent}}
.shop-item.just-changed{animation:card-glow 1s ease-out}
.shop-item.just-changed .item-art:after{content:'';position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,#ffffff40,transparent);animation:shine-sweep .9s ease-out both}
.shop-item .item-art{position:relative;overflow:hidden}
/* Combat */
@keyframes stage-shake{0%,100%{transform:none}15%{transform:translate(-6px,2px)}30%{transform:translate(5px,-3px)}45%{transform:translate(-4px,1px)}60%{transform:translate(3px,-1px)}80%{transform:translate(-1px,0)}}
.battle-stage.impacted.heavy-blow{animation:stage-shake .38s ease-out}
.battle-stage.impacted.heavy-blow:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#ffffff55,transparent 60%);animation:flash .3s ease-out both;pointer-events:none;z-index:2}
.battle-stage.impacted.finishing-strike{animation:stage-shake .5s ease-out}
@keyframes flash{from{opacity:1}to{opacity:0}}
.confetti-layer{position:absolute;inset:-30px 0 0;overflow:hidden;pointer-events:none;z-index:5}
.confetti-layer i{position:absolute;top:-14px;left:var(--x);width:7px;height:12px;background:var(--color);border-radius:1px;animation:confetti-fall var(--fall) cubic-bezier(.25,.4,.6,1) both}
.confetti-layer i.round{width:8px;height:8px;border-radius:50%}
@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--drift),340px) rotate(var(--spin))}}
.victory-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center}
.victory-banner strong{position:relative;font-family:var(--heading);font-size:34px;font-weight:800;letter-spacing:6px;color:#f2cf6b;-webkit-text-stroke:1px #a8782a;text-shadow:0 3px 0 #a8782a,0 6px 18px #00000040,0 0 30px #f2cf6b88;animation:victory-stamp .7s cubic-bezier(.2,.9,.3,1.35) .15s both,victory-fade .6s ease-in 2.6s forwards}
.victory-rays{position:absolute;left:50%;top:50%;width:260px;height:260px;border-radius:50%;background:repeating-conic-gradient(#f2cf6b55 0 8deg,transparent 8deg 24deg);mask:radial-gradient(circle,#000 15%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 15%,transparent 68%);animation:seal-spin 9s linear infinite,rays-in .6s ease-out .1s both,victory-fade .6s ease-in 2.6s forwards}
@keyframes victory-stamp{0%{opacity:0;transform:scale(2.6) rotate(-8deg)}60%{opacity:1;transform:scale(.92) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes rays-in{from{opacity:0}to{opacity:1}}
@keyframes victory-fade{to{opacity:0}}
@keyframes loot-in{0%{opacity:0;transform:translateY(14px) scale(.9)}60%{opacity:1;transform:translateY(-3px) scale(1.04)}100%{transform:none}}
.loot-reveal{position:relative;overflow:hidden;animation:loot-in .55s cubic-bezier(.2,.9,.3,1.2) .75s both;box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent),0 0 24px #f2cf6b40}
.loot-reveal:after{content:'';position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,#ffffff66,transparent);animation:shine-sweep 1s ease-out 1.2s both}
.loot-reveal>svg{animation:seal-bounce .6s cubic-bezier(.2,.9,.3,1.3) 1s both}
.outcome.victory #modal-title,.battle-modal .modal-header h2{transition:color .3s}
@media (prefers-reduced-motion:reduce){.burst-particle,.confetti-layer,.victory-rays{display:none}}
[data-motion=reduced] .victory-rays,[data-motion=reduced] .seal-rays{display:none}
[data-motion=reduced] .victory-banner{display:none}@media (prefers-reduced-motion:reduce){.victory-banner{display:none}}
.battle-result{margin-top:12px}
.battle-result .loot-box{margin-top:0}
/* Game depth: helmets, tonics, styles */
.shop-tabs{overflow-x:auto;scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tabs button{padding-left:10px;padding-right:10px}
.shop-item.legendary .item-tier{color:var(--gold)}
.shop-item.legendary{border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.shop-item.legendary .item-art{background:radial-gradient(ellipse at 50% 60%,var(--gold-bg),transparent 73%)}
.style-art{display:flex;align-items:center;justify-content:center}
.style-art .avatar-face{width:92px;height:92px}
.style-swatch{width:64px;height:64px;border-radius:50%;background:var(--swatch);border:4px solid var(--panel);outline:1px solid var(--line);box-shadow:0 6px 18px #0000001a}
.style-item>.text-button{margin-top:6px}
.appearance-swatch.locked{opacity:.55;background:repeating-linear-gradient(45deg,var(--swatch) 0 5px,color-mix(in srgb,var(--swatch) 70%,#fff) 5px 7px)}
.appearance-swatch.locked .icon{width:11px;height:11px}
.appearance-swatch.locked.selected{opacity:1}
.style-option.locked{border-style:dashed;color:var(--muted)}
.style-option small{display:inline-flex;align-items:center;gap:2px;margin-left:5px;color:var(--gold);font-size:9px}
.style-option small .icon{width:9px;height:9px}
.style-preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-size:11px}
.style-preview-bar>div{display:flex;align-items:center;gap:10px}
.style-preview-bar .button{min-height:30px;padding:5px 12px;font-size:10px}
.appearance-save-note .icon{width:10px;height:10px;vertical-align:-1px}
/* Progress history */
.history-modal{width:780px}
.history-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;padding:20px 25px 0}
.history-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.history-nav h3{font-size:14px;font-family:var(--heading)}
.history-nav .flip{transform:rotate(180deg)}
.history-weekdays,.history-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.history-weekdays span{font-size:9px;color:var(--muted);text-align:center;padding-bottom:4px}
.history-day{position:relative;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:4px 5px;font-size:10px;color:var(--secondary);transition:transform .12s,border-color .12s}
.history-day:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.history-day:disabled{opacity:.35;cursor:default}
.history-day.heat-1{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.history-day.heat-2{background:color-mix(in srgb,var(--accent) 26%,var(--panel))}
.history-day.heat-3{background:color-mix(in srgb,var(--accent) 42%,var(--panel));color:var(--text)}
.history-day.heat-4{background:color-mix(in srgb,var(--accent) 62%,var(--panel));color:#fff}
.history-day.today{border-color:var(--accent);border-width:1.5px}
.history-day.selected{outline:2px solid var(--accent);outline-offset:1px}
.history-day .marks{display:flex;gap:2px}
.mark{display:inline-block;width:6px;height:6px;border-radius:50%}
.mark.task{background:#e2b84f}
.mark.level{background:var(--soul);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);width:8px;height:8px;border-radius:0}
.mark.win{background:var(--body)}
.history-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px;font-size:9px;color:var(--muted)}
.history-legend>i{width:11px;height:11px;border-radius:3px;border:1px solid var(--line)}
.history-legend>i.heat-0{background:var(--panel)}
.history-legend>i.heat-1{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.history-legend>i.heat-2{background:color-mix(in srgb,var(--accent) 26%,var(--panel))}
.history-legend>i.heat-3{background:color-mix(in srgb,var(--accent) 42%,var(--panel))}
.history-legend>i.heat-4{background:color-mix(in srgb,var(--accent) 62%,var(--panel))}
.legend-marks{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.legend-marks .mark{margin-left:6px}
.history-details{background:var(--surface);border-radius:12px;padding:14px 16px;align-self:start}
.history-details h3{font-size:13px;font-family:var(--heading);margin-bottom:8px}
.history-empty{font-size:11px;color:var(--muted)}
.history-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--secondary)}
.history-facts>span{display:inline-flex;align-items:center;gap:4px}
.history-facts .icon{width:13px;height:13px}
.history-facts .gold-value{font-size:10px;color:var(--gold)}
.history-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.history-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:3px 8px;border-radius:999px;background:var(--cat-bg);color:var(--cat)}
.history-chip .icon{width:11px;height:11px}
.history-chip.body,.growth-row.body,.history-level.body,.history-dot.body{--cat:var(--body);--cat-bg:var(--body-bg)}
.history-chip.mind,.growth-row.mind,.history-level.mind,.history-dot.mind{--cat:var(--mind);--cat-bg:var(--mind-bg)}
.history-chip.soul,.growth-row.soul,.history-level.soul,.history-dot.soul{--cat:var(--soul);--cat-bg:var(--soul-bg)}
.history-chip.heart,.growth-row.heart,.history-level.heart,.history-dot.heart{--cat:var(--heart);--cat-bg:var(--heart-bg)}
.history-dot.harm{--cat:var(--harm)}
.history-levels,.history-habits{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:5px;font-size:11px}
.history-level{display:flex;align-items:center;gap:6px;color:var(--cat);font-weight:600}
.history-level .icon{width:13px;height:13px}
.history-habits{max-height:170px;overflow:auto}
.history-habits li{display:flex;align-items:center;gap:7px}
.history-habits small{margin-left:auto;color:var(--muted);font-size:9px}
.history-dot{width:7px;height:7px;border-radius:50%;background:var(--cat);flex-shrink:0}
.history-extras{font-size:10px;color:var(--muted);margin-top:10px}
.history-month-summary{margin:18px 25px 22px;padding-top:16px;border-top:1px solid var(--line)}
.history-totals{display:flex;flex-wrap:wrap;gap:8px}
.history-totals span{display:flex;flex-direction:column;font-size:9px;color:var(--muted);background:var(--surface);border-radius:9px;padding:7px 12px;min-width:74px}
.history-totals strong{font-size:16px;color:var(--text);font-family:var(--heading)}
.history-month-summary h4{font-size:11px;margin:16px 0 8px}
.growth-row{display:grid;grid-template-columns:80px 1fr 44px;align-items:center;gap:10px;font-size:10px;margin-bottom:6px}
.growth-row>span{display:inline-flex;align-items:center;gap:5px;color:var(--cat)}
.growth-row .icon{width:12px;height:12px}
.growth-bar{height:8px;border-radius:99px;background:var(--surface-hover);overflow:hidden}
.growth-bar>div{height:100%;border-radius:99px;background:var(--cat);transition:width .4s ease-out}
.growth-row strong{text-align:right;font-size:10px}
@media(max-width:640px){.history-body{grid-template-columns:1fr;padding:16px 18px 0}.history-month-summary{margin:16px 18px 20px}.history-day{padding:3px;font-size:9px;border-radius:6px}}
/* Every voxel gold pile needs an explicit size: an unsized SVG renders full-width in some browsers.
   This low-specificity default applies wherever no more specific rule sizes the pile. */
.gold-pile{width:26px;height:21px;flex-shrink:0}
.style-preview-bar .button{white-space:nowrap;gap:6px}
.style-preview-bar .button .gold-value{display:inline-flex;align-items:center;gap:3px}
.style-preview-bar .button .gold-pile{width:24px;height:19px}
.style-preview-bar>span{flex:1 1 140px;min-width:0}
.task-form-secondary{display:flex;flex-wrap:wrap;gap:6px}
.task-form-secondary .icon{width:14px;height:14px}
/* Vault note selection and export: click a note to select it; a download button joins the tab row */
.vault-tab-row{display:flex;align-items:center;gap:10px;margin:0 25px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.vault-tab-row .vault-tabs{margin:0;padding-bottom:0;border-bottom:0;flex:1;min-width:0}
#vault-download{display:flex;flex-shrink:0}
.vault-download{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:650;animation:pop-in .18s ease-out}
.vault-download:hover{background:var(--accent-hover)}
.vault-download .icon{width:14px;height:14px}
@keyframes pop-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.note-card.selectable{cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.note-card.selectable:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.note-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.note-card.selectable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note-card.selectable .note-text{user-select:text}
@media(max-width:560px){.vault-tab-row{margin:0 18px}}
#vault-download{align-items:center;gap:10px}
.vault-select-all{font-size:10px;white-space:nowrap}
/* Hashtag autocomplete */
.tag-suggest{position:absolute;z-index:20;min-width:160px;max-width:260px;padding:4px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 30px #1710201f;font-size:12px}
.tag-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 9px;border-radius:7px;cursor:pointer;color:var(--accent)}
.tag-option small{font-size:9px;color:var(--muted)}
.tag-option.active,.tag-option:hover{background:var(--accent-soft)}
.vault-merge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);animation:pop-in .18s ease-out}
.vault-merge:hover{background:var(--accent);color:#fff}
.vault-merge .icon{width:15px;height:15px}
@keyframes merged-glow{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.note-card.just-merged{animation:merged-glow 1.2s ease-out;border-color:var(--accent)}
.toast.update-ready{pointer-events:auto;background:var(--accent);color:#fff}
.toast.update-ready button{color:#fff;font-weight:700;text-decoration:underline}
/* Delights */
.delight-layer{position:fixed;inset:0;z-index:115;pointer-events:none;overflow:hidden}
.balloon{position:absolute;bottom:-90px;width:46px;height:56px;border-radius:50% 50% 47% 47%;background:radial-gradient(circle at 32% 28%,#ffffffb0 0 9%,transparent 10%),var(--color);box-shadow:inset -6px -8px 0 #0000001a;pointer-events:auto;cursor:pointer;padding:0;animation-name:balloon-rise,balloon-sway;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-fill-mode:forwards,none}
.balloon:before{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:7px;transform:translateX(-50%);background:var(--color);clip-path:polygon(50% 0,100% 100%,0 100%)}
.balloon:after{content:'';position:absolute;left:50%;top:100%;width:1px;height:58px;background:#8a8796aa}
@keyframes balloon-rise{to{transform:translateY(calc(-100vh - 180px))}}
@keyframes balloon-sway{from{margin-left:calc(var(--sway) * -1)}to{margin-left:var(--sway)}}
.pet-companion.treat-hop{animation:treat-hop 1.3s cubic-bezier(.3,1.6,.5,1)}
@keyframes treat-hop{0%,100%{transform:none}25%{transform:translateY(-22px) rotate(-12deg)}50%{transform:translateY(0) rotate(360deg)}70%{transform:translateY(-10px) rotate(360deg)}}
.treat-heart{position:fixed;transform:translate(-50%,-50%);color:#e86f7f;font-size:26px;text-shadow:0 2px 6px #e86f7f66;animation:heart-float 1.7s ease-out forwards}
@keyframes heart-float{0%{opacity:0;transform:translate(-50%,0) scale(.4)}25%{opacity:1;transform:translate(-50%,-30px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-80px) scale(1)}}
.delight-layer.night{background:linear-gradient(#060818,#151a3a);opacity:0;animation:night-fall 8.6s ease-in-out forwards}
@keyframes night-fall{0%{opacity:0}8%,85%{opacity:.93}100%{opacity:0}}
.rocket{position:absolute;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:linear-gradient(#fff6d8,#f2c14e);box-shadow:0 10px 14px #f2c14e88;animation:rocket-rise .75s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes rocket-rise{to{transform:translateY(var(--rise))}}
.spark{position:absolute;width:3px;height:14px;margin:-7px -1.5px;border-radius:2px;background:linear-gradient(transparent,var(--color));box-shadow:0 0 10px var(--color);animation:spark-fly 1.8s cubic-bezier(.12,.75,.3,1) forwards}
@keyframes spark-fly{0%{opacity:1;transform:rotate(var(--angle)) scaleY(.3)}15%{opacity:1}75%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 60px)) rotate(var(--angle)) scaleY(.6)}}
.burst-flash{position:absolute;width:160px;height:160px;margin:-80px;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 6%,color-mix(in srgb,var(--color) 60%,transparent) 16%,transparent 60%);animation:burst-flash .7s ease-out forwards}
@keyframes burst-flash{0%{opacity:0;transform:scale(.2)}20%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
.delight-layer.disco{animation:disco-dim 12.8s ease-in-out forwards}
@keyframes disco-dim{0%,100%{background:#12091f00}6%,92%{background:#12091f8c}}
.disco-ball{position:absolute;left:50%;top:-140px;width:96px;height:96px;margin-left:-48px;animation:ball-drop 1s cubic-bezier(.3,1.4,.5,1) .2s forwards,ball-lift .8s ease-in 12s forwards}
.disco-ball:before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:120px;background:#c9c7d6}
.disco-ball i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 6%,transparent 22%),repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,#0003 0 1px,transparent 1px 9px),linear-gradient(135deg,#f4f6fb,#9aa6bf 55%,#dfe4ef);background-size:auto,auto,36px 100%,auto;box-shadow:0 0 30px #ffffff88,0 0 80px #b48be866;animation:ball-spin 1.6s linear infinite}
@keyframes ball-drop{to{top:20px}}
@keyframes ball-lift{to{top:-160px}}
@keyframes ball-spin{to{background-position:0 0,0 0,36px 0,0 0}}
.beam{position:absolute;left:50%;top:68px;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:conic-gradient(from 0deg,transparent 0 8deg,color-mix(in srgb,var(--color) 55%,transparent) 10deg 14deg,transparent 16deg 360deg);mix-blend-mode:screen;opacity:0;animation:beam-in .6s ease-out 1s forwards,beam-sweep 5s ease-in-out calc(var(--i) * -1.2s) infinite alternate,beam-out .6s ease-in 12s forwards}
@keyframes beam-in{to{opacity:.85}}
@keyframes beam-out{to{opacity:0}}
@keyframes beam-sweep{from{transform:rotate(calc(120deg + var(--i) * 25deg))}to{transform:rotate(calc(240deg + var(--i) * 25deg))}}
.disco-sparkles{position:absolute;inset:0;background-image:radial-gradient(circle,#ffffffcc 0 1.5px,transparent 2px),radial-gradient(circle,#ffd36fbb 0 2px,transparent 2.5px),radial-gradient(circle,#9be7ffb0 0 1px,transparent 1.5px);background-size:97px 83px,173px 141px,61px 109px;background-position:13px 29px,71px 7px,37px 53px;animation:sparkle-drift 3s linear infinite,beam-in .6s ease-out 1s both,beam-out .6s ease-in 12s forwards;opacity:0}
@keyframes sparkle-drift{to{background-position:110px 112px,-102px 148px,98px 162px}}
.disco-dancing #app .avatar-scene svg.avatar-art{animation:dance .5s ease-in-out infinite alternate;transform-origin:50% 90%}
.disco-dancing #app .pet-companion{animation:dance .5s ease-in-out infinite alternate-reverse}
@keyframes dance{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-8px) rotate(6deg)}}
.delight-layer.gentle{animation:gentle-glow 2.6s ease-in-out forwards}
@keyframes gentle-glow{0%,100%{box-shadow:inset 0 0 0 0 transparent}40%{box-shadow:inset 0 0 120px 20px #b48be844}}
.ambience{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ambience i{position:absolute;top:-24px;width:var(--size);height:var(--size);animation-name:drift-fall,drift-sway;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite;animation-direction:normal,alternate}
.ambience.petals i{background:#f4b6c8;border-radius:80% 0 80% 0;opacity:.85}
.ambience.leaves i{background:#d9894a;border-radius:0 80% 0 80%;opacity:.8}
.ambience.leaves i:nth-child(3n){background:#c45c3b}
.ambience.leaves i:nth-child(4n){background:#e2b04f}
.ambience.snow i{background:#fff;border-radius:50%;box-shadow:0 0 4px #c9d6ea;opacity:.9}
@keyframes drift-fall{to{transform:translateY(calc(100vh + 40px)) rotate(540deg)}}
@keyframes drift-sway{from{margin-left:calc(var(--sway) * -1)}to{margin-left:var(--sway)}}
[data-motion=reduced] .ambience{display:none}
/* The monster joins the disco (overrides its idle float while dancing) */
.disco-dancing #app .monster-scene .monster-art{animation:monster-dance .62s ease-in-out infinite alternate;transform-origin:50% 92%}
@keyframes monster-dance{0%{transform:translateY(0) rotate(5deg) scaleY(1)}50%{transform:translateY(-10px) rotate(0) scaleY(1.04)}100%{transform:translateY(0) rotate(-5deg) scaleY(.97)}}

/* Sync stays in Settings, with a quiet status beside the daily summary. */
.app-footer .footer-sync {display:inline-flex;align-items:center;gap:7px;text-align:left;}
.sync-body form {display:grid;gap:14px;}
.sync-body form .button {justify-self:start;}
.sync-status {font-weight:600;color:var(--text);}
.sync-copies {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sync-copy {padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0;overflow-wrap:anywhere;}
.sync-copy h3 {margin-bottom:12px;}
.sync-copy p {font-size:12px;line-height:1.7;}
.sync-conflict-modal {width:650px;max-width:calc(100vw - 24px);}
@media(max-width:520px){.sync-copies{grid-template-columns:1fr}.sync-body .form-actions{flex-wrap:wrap}.sync-body .form-actions .button{flex:1 1 100%}}

/* Keep sync metadata quiet and give nested sign-in labels the standard field spacing. */
.sync-settings-actions {flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;}
.sync-settings-actions>.button {flex:0 0 auto;}
.sync-settings-status {font-size:10px;font-weight:400;line-height:1.5;color:var(--secondary);}
.sync-body>p:first-child {margin-bottom:20px;}
.sync-body form label {display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:550;}
.sync-body #sync-details {margin:12px 0;}
.sync-body #sync-auth-message:empty {display:none;}

/* Focus, manual task order, and small steps. */
.task-list{min-height:12px;padding-bottom:8px}
.task-item{position:relative;border-bottom:1px solid var(--line)}.task-item:last-child{border-bottom:0}
.task-item>.task-row{border:0;gap:7px;padding:11px 0;min-height:55px}
.task-grip{display:flex;align-items:center;justify-content:center;flex:0 0 14px;width:14px;align-self:stretch;color:var(--muted);opacity:.55;cursor:grab;touch-action:none;border-radius:4px}
.task-grip>.icon{width:12px;height:16px}.task-grip:hover,.task-grip:focus-visible{opacity:1;color:var(--accent);background:var(--accent-soft)}
.task-item .task-meta{font-size:8px;gap:6px;flex-wrap:wrap;line-height:1.6}.task-meta>span{display:inline-flex;align-items:center;gap:3px}
.task-item .task-title{font-size:12px}.task-item .task-reward{font-size:9px}.task-item .voxel-gold-value{gap:2px}
.task-step-summary{display:flex;align-items:center;align-self:flex-start;gap:5px;color:var(--muted);font-size:9px;padding:4px 0 0;line-height:1.6}
.task-step-summary:hover{color:var(--accent)}.task-step-summary>.icon{width:11px;height:11px}.task-step-summary[aria-expanded=true]>.icon{transform:rotate(180deg)}
.step-progress{display:block;width:28px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}.step-progress>span{display:block;height:100%;background:var(--accent);border-radius:3px}
.task-steps{padding:0 4px 10px 40px}.task-steps[hidden]{display:none}
.task-step{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.6;padding:5px 0;overflow-wrap:anywhere;cursor:pointer;color:var(--secondary)}
.task-step input{appearance:auto;accent-color:var(--accent);width:14px;height:14px;margin:2px 0 0;flex-shrink:0}.task-step.done>span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.task-step-editor{border:0;padding:0;margin:22px 0 0;min-width:0}.task-step-editor legend{font-size:11px;color:var(--secondary);font-weight:600;margin-bottom:10px}.task-step-editor legend>span{font-weight:400;color:var(--muted);font-size:10px;margin-left:5px}
.step-editor-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}.step-editor-row input[name=stepTitle]{flex:1;min-width:0;margin:0;font-size:12px}.step-editor-row>.icon-button{flex-shrink:0;width:25px;height:30px;color:var(--muted)}
.task-step-editor .add-step{font-size:11px;padding:6px 0;min-height:28px;gap:5px}.task-step-editor .add-step>.icon{width:13px;height:13px}.task-step-editor .form-help{margin:5px 0 0}
.task-dragging{user-select:none;cursor:grabbing}.task-dragging .task-grip{cursor:grabbing}
.task-being-dragged{opacity:.3}.task-drop-before{box-shadow:inset 0 2px var(--accent)}.task-drop-after{box-shadow:inset 0 -2px var(--accent)}
.task-drag-ghost{position:fixed;z-index:1000;pointer-events:none;width:200px;background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:12px;font-size:12px;color:var(--text);box-shadow:0 8px 26px #0002;overflow-wrap:anywhere}
@media(max-width:560px){.task-item>.task-row{gap:6px}.task-grip{flex-basis:18px;width:18px}.task-step{padding:8px 0}.task-steps{padding-left:42px}.step-editor-row input[name=stepTitle]{font-size:16px}.task-item .task-title{font-size:12px}}

/* A lighter task dialog: tactile reward choices, quiet repeat chips, compact steps. */
.task-modal{width:490px}
.task-modal .modal-header{padding:22px 25px 16px;border-bottom:0}
.task-dialog-title{display:flex;align-items:center;gap:10px}
.task-dialog-mark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent)}
.task-dialog-mark>.icon{width:16px;height:16px}
.task-modal .task-form{padding:0 25px 22px}
.task-name-field>label,.task-form fieldset>legend{display:block;font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--secondary);margin-bottom:8px}
.task-name-field>input{font-size:15px;line-height:1.5;padding:11px 13px;background:var(--surface);border-radius:10px}
.task-name-field>p{font-size:10px;line-height:1.5;color:var(--muted);margin:5px 2px 0;font-weight:400}
.task-name-field>p>span{color:var(--accent)}
.task-form fieldset{min-width:0;padding:0;border:0;margin:21px 0 0}
.task-size-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.task-size-choice,.task-repeat-choice{position:relative;cursor:pointer;min-width:0}
.task-size-choice>input,.task-repeat-choice>input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0}
.task-size-face{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-height:49px;transition:background .15s,border-color .15s}
.task-size-face>span:first-child{font-size:11px;font-weight:500;color:var(--secondary)}
.task-size-face .gold-value{font-size:11px;gap:4px}.task-size-face .gold-pile{width:33px;height:25px}
.task-size-choice:hover .task-size-face{background:var(--surface)}
.task-size-choice>input:checked+.task-size-face{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:var(--accent-soft)}
.task-size-choice>input:checked+.task-size-face>span:first-child{color:var(--accent);font-weight:650}
.task-size-choice>input:focus-visible+.task-size-face,.task-repeat-choice>input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.task-size-choice:has(input:disabled){cursor:default}.task-size-choice>input:disabled+.task-size-face{opacity:.6}
.task-repeat-picker>legend .icon{width:12px;height:12px;vertical-align:-2px;margin-right:5px;color:var(--muted)}
.task-repeat-options{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:9px}
.task-repeat-choice>span{display:flex;align-items:center;justify-content:center;min-height:29px;padding:5px 4px;border-radius:6px;font-size:10px;line-height:1.4;color:var(--muted);border:1px solid transparent;transition:background .15s,color .15s}
.task-repeat-choice:hover>span{color:var(--text)}
.task-repeat-choice>input:checked+span{background:var(--panel);border-color:var(--line);color:var(--accent);font-weight:600;box-shadow:0 1px 3px #00000006}
.task-form .task-step-editor{margin-top:20px}
.task-form .task-step-editor>legend{margin-bottom:7px}
.task-form .step-editor-row{gap:7px;margin-bottom:5px}
.task-form .step-editor-row input[name=stepTitle]{height:34px;padding:7px 10px;font-size:12px;line-height:18px;border-radius:7px;background:var(--surface)}
.task-form .step-editor-row>.icon-button{width:24px;height:28px}.task-form .step-editor-row>.icon-button>.icon{width:13px;height:13px}
.task-form .task-step-editor .add-step{display:inline-flex;width:auto;min-height:28px;height:28px;padding:4px 7px;border:0;border-radius:6px;margin-left:-4px;color:var(--accent);font-weight:500;font-size:11px}
.task-form .task-step-editor .add-step:hover{background:var(--accent-soft)}
.task-form .task-dialog-actions{padding-top:17px;margin-top:18px;border-top:1px solid var(--line)}
.task-dialog-actions .task-form-secondary{flex-wrap:nowrap;gap:2px;align-items:center}
.task-dialog-actions .task-form-secondary .button{font-size:10px;padding:6px 8px;min-height:32px;color:var(--muted);font-weight:400;gap:5px}
.task-dialog-actions .task-delete{width:28px;height:30px;color:var(--muted);border-radius:6px}
.task-dialog-actions .task-delete:hover{color:var(--danger);background:var(--heart-bg)}.task-dialog-actions .task-delete>.icon{width:14px;height:14px}
.task-dialog-actions>.button{min-height:36px;padding:8px 15px}
.task-form>.checkbox-label{margin:14px 0 0}
@media(max-width:560px){.task-modal .modal-header{padding:20px 20px 15px}.task-modal .task-form{padding:0 20px 20px}.task-name-field>input{font-size:16px}.task-size-face{padding:10px 9px;gap:4px}.task-size-face>span:first-child{font-size:10px}.task-size-face .gold-pile{width:28px;height:23px}.task-size-face .gold-value{font-size:10px;gap:2px}.task-repeat-choice>span{font-size:9px;padding:5px 2px}.task-form .step-editor-row input[name=stepTitle]{font-size:16px;height:36px}.task-form fieldset{margin-top:18px}}

/* A pocket-sized adventure above the Vault. Its dimensions never change during a drag. */
.quest-card{position:relative;flex:0 0 163px;height:163px;margin:10px 0 8px;padding:10px 13px 8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:background .18s,box-shadow .18s}
.quest-card.quest-drop-ready{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.quest-heading{display:flex;align-items:center;gap:7px;height:23px;position:relative;z-index:1}
.quest-symbol{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:7px;color:var(--accent);background:var(--panel)}
.quest-symbol>.icon{width:16px;height:16px}.quest-heading h3{font-size:11px;font-weight:650;letter-spacing:-.1px;white-space:nowrap}
.quest-choose{margin-left:auto;display:flex;align-items:center;gap:3px;padding:5px 0 5px 6px;font-size:9px;color:var(--secondary)}.quest-choose:hover{color:var(--accent)}.quest-choose>.icon{width:11px;height:11px;transform:rotate(-90deg)}
.quest-choose.quest-manage{width:26px;height:26px;justify-content:center;padding:0;border-radius:6px}.quest-choose.quest-manage:hover{background:var(--accent-soft)}.quest-choose.quest-manage>.icon{width:16px;height:16px;transform:none}
.quest-task-slot{height:44px;margin:6px 0 4px;position:relative;z-index:1}
.quest-task{display:flex;align-items:center;gap:7px;height:100%;padding:5px 7px;border-radius:8px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);min-width:0}
.quest-task>.task-check{width:18px;height:18px;flex:0 0 18px;border-radius:5px}.quest-task-text{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0;gap:1px}
.quest-title{padding:0;text-align:left;font-size:11px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;color:var(--text)}.quest-title:hover{color:var(--accent)}
.quest-task-text:has(.quest-step-link) .quest-title{-webkit-line-clamp:1}
.quest-step-link{font-size:8px;padding:0;color:var(--secondary);line-height:1.4}.quest-step-link:hover{color:var(--accent)}.quest-task .task-reward{font-size:9px}.quest-task .task-reward .gold-value{font-size:9px}
.quest-bottom{display:flex;align-items:center;gap:11px;height:66px;position:relative}
.quest-dial{position:relative;width:66px;height:66px;flex:0 0 66px;touch-action:none;cursor:grab;border-radius:50%;user-select:none;color:var(--accent)}.quest-dial:active{cursor:grabbing}.quest-dial[aria-disabled=true]{cursor:default}.quest-dial>svg{display:block;width:100%;height:100%;overflow:visible}.quest-dial circle{fill:none;stroke-width:2}.quest-dial .dial-track{stroke:var(--line);stroke-dasharray:75 100;transform:rotate(135deg);transform-origin:center}.quest-dial .dial-fill{stroke:var(--accent);stroke-linecap:round;transform:rotate(135deg);transform-origin:center}.quest-dial .dial-knob{fill:var(--accent);stroke:var(--panel);stroke-width:2}.quest-dial>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.quest-dial strong{font-size:14px;letter-spacing:-.5px;line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}.quest-dial small{font-size:5px;letter-spacing:1.1px;color:var(--muted);margin-top:2px}.quest-card:not(.has-quest) .quest-dial{opacity:.45}
.quest-controls{min-width:0;flex:1;align-self:center;z-index:1}.quest-controls>small:empty{display:none}.quest-controls>small{display:block;font-size:8px;color:var(--muted);white-space:nowrap}.quest-play-row{display:flex;align-items:center;gap:4px;margin:4px 0 3px}.quest-play{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 9px;min-height:27px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:7px;color:var(--accent);font-size:10px;background:var(--panel);white-space:nowrap}.quest-play:hover:not(:disabled){background:var(--accent-soft)}.quest-play>.icon{width:11px;height:11px;fill:currentColor;stroke-width:1.2}.quest-play-row>.icon-button{width:23px;height:23px;color:var(--muted)}.quest-play-row>.icon-button>.icon{width:12px;height:12px}
.quest-trail{position:relative;flex:0 0 65px;height:80px;align-self:flex-end;pointer-events:none;color:var(--body);margin:0 0 -3px -7px}.trail-ground{position:absolute;inset:auto 0 0;width:100%;height:65px;opacity:.7}.trail-path{fill:none;stroke:color-mix(in srgb,var(--gold) 40%,var(--line));stroke-width:7;stroke-linecap:round;stroke-dasharray:2 1}.journey-walker{display:block;position:absolute;width:53px;height:65px;bottom:1px;left:8px}.journey-walker>svg{width:100%;height:100%;position:absolute;inset:0}.journey-walker>svg+svg{visibility:hidden}
.is-walking .journey-walker{animation:quest-step-bob .7s ease-in-out infinite}.is-walking .journey-walker>svg:first-child{animation:quest-gait-a .7s steps(1) infinite}.is-walking .journey-walker>svg+svg{animation:quest-gait-b .7s steps(1) infinite}.is-walking .trail-path{animation:quest-trail 2s linear infinite}
.quest-session-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent}.quest-session-progress>span{display:block;height:100%;background:var(--accent);opacity:.45}
.quest-modal{width:440px}.quest-modal .modal-header h2{display:flex;align-items:center;gap:9px}.quest-modal .modal-header h2>.icon{width:20px;height:20px;color:var(--accent)}.quest-options{padding:10px 22px 22px;max-height:60vh;overflow:auto}.quest-option{display:flex;align-items:center;gap:11px;text-align:left;width:100%;padding:12px 6px;border-bottom:1px solid var(--line);border-radius:6px}.quest-option:last-child{border:0}.quest-option:hover,.quest-option.selected{background:var(--accent-soft)}.quest-option>span:first-child{color:var(--accent);display:flex}.quest-option>.gold-value{margin-left:auto;font-size:10px;flex-shrink:0}.quest-option .gold-pile{width:27px;height:24px}.quest-option strong{font-weight:450;font-size:12px;overflow-wrap:anywhere}.quest-option .icon{width:16px;height:16px}.quest-options>p{font-size:12px;color:var(--secondary);padding:10px 0}.quest-options>.task-step{padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}
.quest-return{display:flex;align-items:center;gap:9px;width:100%;margin-top:12px;padding:12px 6px;border-top:1px solid var(--line);font-size:11px;color:var(--secondary);text-align:left}.quest-return:hover{color:var(--accent)}.quest-return>.icon{width:15px;height:15px}
@keyframes quest-gait-a{0%,100%{visibility:visible}50%{visibility:hidden}}@keyframes quest-gait-b{0%,100%{visibility:hidden}50%{visibility:visible}}@keyframes quest-step-bob{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1.5px)}}@keyframes quest-trail{to{stroke-dashoffset:12}}
@media(prefers-reduced-motion:reduce){.is-walking .journey-walker,.is-walking .journey-walker>svg,.is-walking .trail-path{animation:none!important}.is-walking .journey-walker>svg+svg{visibility:hidden}}
[data-motion=reduced] .is-walking .journey-walker,[data-motion=reduced] .is-walking .journey-walker>svg,[data-motion=reduced] .is-walking .trail-path{animation:none!important}[data-motion=reduced] .is-walking .journey-walker>svg+svg{visibility:hidden}
@media(max-width:1100px) and (min-width:851px){.quest-card{padding-left:10px;padding-right:10px}.quest-bottom{gap:7px}.quest-trail{flex-basis:48px;margin-left:-14px}.quest-heading h3{font-size:10px}.quest-task{padding-left:10px}.quest-controls>small{font-size:7px}.journey-walker{left:0}}
@media(max-width:560px){.quest-card{margin-top:12px;padding-left:12px;padding-right:12px}.quest-heading h3{font-size:12px}.quest-title{font-size:12px}.quest-choose{min-height:28px;font-size:10px}.quest-task{padding-left:11px;gap:6px}.quest-play{min-height:30px}.quest-play-row>.icon-button{width:28px;height:28px}.quest-trail{flex-basis:62px}.quest-option{min-height:48px}}
/* Adventure controls: icon-only play/pause and a matching reset button */
.quest-play-row{gap:7px;margin:6px 0 0}
.quest-play{width:34px;height:34px;min-height:0;padding:0;border-radius:50%;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);transition:background .15s,color .15s,transform .1s}
.quest-play:hover:not(:disabled){background:var(--accent);color:#fff}
.quest-play:active:not(:disabled){transform:scale(.94)}
.quest-play.is-running{background:var(--accent);color:#fff;border-color:var(--accent)}
.quest-play>.icon{width:13px;height:13px}
.quest-play:not(.is-running)>.icon{margin-left:2px}
.quest-play.is-running>.icon{fill:none;stroke-width:2.6}
.quest-reset{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--secondary);transition:border-color .15s,color .15s,transform .1s}
.quest-reset:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.quest-reset:active:not(:disabled){transform:scale(.94) rotate(-25deg)}
.quest-reset:disabled{opacity:.4;cursor:default}
.quest-reset>.icon{width:14px;height:14px}
.quest-play:disabled{opacity:.45;cursor:default}
/* Focus meter: current HP and what this session can restore */
.focus-meter{display:flex;align-items:center;gap:5px;max-width:118px}
.focus-meter>.icon{width:11px;height:11px;flex-shrink:0;color:var(--heart)}
.focus-meter.is-full>.icon{fill:var(--heart)}
.focus-bar{position:relative;flex:1;height:6px;border-radius:99px;background:var(--surface-hover);overflow:hidden}
.focus-hp{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--heart);transition:width .6s ease-out}
.focus-gain{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--heart) 38%,transparent) 0 2px,color-mix(in srgb,var(--heart) 16%,transparent) 2px 4px);transition:left .6s ease-out,width .6s ease-out}
.focus-earned{display:block;height:100%;background:color-mix(in srgb,var(--heart) 75%,#fff);transition:width .5s linear}
.is-walking .focus-gain{animation:focus-shimmer 2.4s ease-in-out infinite}
@keyframes focus-shimmer{50%{opacity:.6}}
.reward-pop.hp{color:var(--heart)}
/* Smaller adventure buttons with room for the focus ring below the health meter */
.quest-play-row{gap:6px;margin-top:10px}
.quest-play{width:30px;height:30px}
.quest-play>.icon{width:12px;height:12px}
.quest-reset{width:26px;height:26px}
.quest-reset>.icon{width:13px;height:13px}
.quest-play:focus-visible,.quest-reset:focus-visible{outline-offset:2px}
/* A clearer little landscape behind the adventurer: two hill layers, two trees, and the path */
.trail-ground{opacity:1}
.trail-hill.far{fill:color-mix(in srgb,var(--body) 14%,var(--panel))}
.trail-hill.near{fill:color-mix(in srgb,var(--body) 26%,var(--panel))}
.trail-tree{fill:color-mix(in srgb,var(--body) 62%,var(--panel))}
.trail-tree rect{fill:color-mix(in srgb,#7a5a46 55%,var(--panel))}
.trail-tree.round circle{fill:color-mix(in srgb,var(--body) 48%,var(--panel))}
.trail-tree .trail-shine{fill:color-mix(in srgb,#fff 35%,transparent)}
.trail-path{stroke:color-mix(in srgb,var(--gold) 34%,var(--panel));stroke-width:6;stroke-dasharray:none}
.trail-ground{-webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 60% 64% at 50% 50%,#000 58%,transparent 100%)}
/* Dragging the adventure task back to the list */
.quest-grip{flex:0 0 14px;width:14px;height:100%;margin-left:-3px}
.quest-task.task-being-dragged{opacity:.45}
.tasks-panel.task-drop-end{box-shadow:inset 0 0 0 2px var(--accent)}
/* Task rows: everything lines up on the title's first line; steps nest under the title */
.task-item>.task-row{align-items:flex-start;padding:12px 0;min-height:0}
.task-item .task-grip{align-self:flex-start;height:24px}
.task-item .task-row>.task-check{margin-top:3px}
.task-item .task-text{padding-top:3px;gap:0}
.task-item .task-title{line-height:18px}
.task-item .task-row>.icon-button{height:24px;align-self:flex-start}
.task-side{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.task-side>.task-reward{height:24px;display:flex;align-items:center}
.task-side>.task-meta{font-size:8px;line-height:1.4;white-space:nowrap;color:var(--muted)}
.task-side>.task-meta .icon{width:10px;height:10px}
/* Steps: a compact summary right under the title, then the list on a faint guide line */
.task-step-summary{gap:6px;padding:5px 0 0;font-size:9px}
.step-progress{width:36px;height:3px}
.task-text>.task-steps{padding:0;margin:7px 0 2px;border-left:1.5px solid var(--line);padding-left:10px;display:flex;flex-direction:column;gap:2px}
.task-text>.task-steps[hidden]{display:none}
.task-text .task-step{padding:3px 0;font-size:11px;line-height:1.5;gap:8px;align-items:flex-start}
.task-step input{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin:2.5px 0 0;border:1.5px solid #d9d7e1;border-radius:4px;background:var(--panel);display:grid;place-content:center;flex-shrink:0;cursor:pointer;transition:background .15s,border-color .15s}
.task-step input:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.task-step input:checked{background:var(--accent);border-color:var(--accent)}
.task-step input:checked::after{content:'';width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:translate(0,-.5px) rotate(45deg)}
.task-step input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.task-step.done>span{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.task-step input{padding:0;min-width:0;box-sizing:border-box;width:13px;height:13px}
.task-side>.task-meta{display:flex;flex-direction:column;align-items:flex-end;gap:0}
/* Repeat schedule beside the gold, separated by a thin rule, on the title's line */
.task-side{flex-direction:row;align-items:center;gap:7px;height:24px}
.task-side>.task-meta{flex-direction:row;align-items:center;gap:3px;font-size:9px;line-height:1;white-space:nowrap}
.task-side>.task-meta .icon{width:11px;height:11px}
.task-side-rule{width:1px;height:13px;background:var(--line)}
@media(max-width:420px){.task-side .task-meta-text{display:none}}
/* Collapsible steps inside the adventure box */
.quest-step-summary{padding-top:2px;font-size:8px}
.quest-step-summary .step-progress{width:28px}
.quest-card.steps-open{height:auto;flex-basis:auto}
.quest-card.steps-open .quest-task-slot{height:auto;min-height:44px}
.quest-card.steps-open .quest-task{height:auto;align-items:flex-start}
.quest-card.steps-open .quest-title{-webkit-line-clamp:2}
.quest-task-text>.task-steps{margin:6px 0 3px}
.quest-task-text .task-step{font-size:10px;padding:2px 0}
.quest-task-text>.task-steps{border-left:1.5px solid color-mix(in srgb,var(--accent) 22%,var(--line));padding-left:9px;display:flex;flex-direction:column;gap:1px;align-self:stretch}
.quest-task-text>.task-steps[hidden]{display:none}
.quest-task-text:has(.quest-step-summary) .quest-title{-webkit-line-clamp:1}
.quest-card.steps-open .quest-task-text .quest-title{-webkit-line-clamp:2}
/* With steps, the adventure task lines up on its title like list rows do */
.quest-task:has(.quest-step-summary){align-items:flex-start;padding-top:7px}
.quest-task:has(.quest-step-summary)>.task-check{margin-top:0}
.quest-task:has(.quest-step-summary)>.quest-grip{height:18px}
.quest-task:has(.quest-step-summary)>.task-reward{margin-top:-3px}
/* Habit grips live in the row's left gutter, so the habit layout never shifts; they appear on hover or focus */
.habit-row{position:relative}
.habit-grip{position:absolute;left:-10px;top:0;bottom:0;width:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0;cursor:grab;touch-action:none;border-radius:4px;transition:opacity .15s,color .15s}
.habit-grip>.icon{width:9px;height:14px}
.habit-row:hover>.habit-grip{opacity:.5}
.habit-grip:hover,.habit-grip:focus-visible{opacity:1;color:var(--cat)}
@media(hover:none){.habit-grip{opacity:.35}}
.task-dragging .habit-grip{cursor:grabbing}
.habit-row.task-being-dragged{opacity:.3}
.habit-row.task-drop-before{box-shadow:0 -2px var(--cat)}
.habit-row.task-drop-after{box-shadow:0 2px var(--cat)}
.habit-name small .icon{width:8px;height:8px;margin-right:3px;vertical-align:-1px}
.habit-row.is-adventure .habit-complete{background:color-mix(in srgb,var(--cat-bg) 55%,transparent)}
.habits-panel.task-drop-end{box-shadow:inset 0 0 0 2px var(--accent)}
/* A habit on the adventure: its icon is the check, tinted by its category */
.quest-habit{background:var(--cat-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 18%,transparent)}
.quest-habit-check{position:relative;width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:var(--panel);color:var(--cat);display:flex;align-items:center;justify-content:center}
.quest-habit-check .icon{width:12px;height:12px}
.quest-habit-tick{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.quest-habit-check:hover,.quest-habit-check:focus-visible{background:var(--cat);color:var(--panel)}
.quest-habit-check:hover .quest-habit-tick,.quest-habit-check:focus-visible .quest-habit-tick{opacity:1}
.quest-habit-check:hover .quest-habit-glyph,.quest-habit-check:focus-visible .quest-habit-glyph{opacity:0}
.quest-habit .quest-title:hover{color:var(--cat)}
.quest-habit .xp-badge{margin-left:auto}
/* Checkboxes align with the tabs; handles sit in the panel’s left gutter without shifting row content. */
.tasks-scroll{--task-gutter:20px;margin-left:calc(-1 * var(--task-gutter));padding-left:var(--task-gutter)}
.task-item .task-grip{position:absolute;left:calc(-1 * var(--task-gutter));top:12px}
.task-item .task-grip:focus-visible{outline-offset:-2px}
@media(min-width:561px) and (max-width:1100px){.tasks-scroll{--task-gutter:16px}}
/* Handles appear on hover or keyboard focus, and stay faintly visible on touch screens. */
.task-grip{opacity:0;transition:opacity .15s,color .15s,background .15s}
.task-item:hover .task-grip,.quest-task:hover>.quest-grip,.task-grip:focus-visible{opacity:.55}
.task-grip:hover,.task-grip:focus-visible{opacity:1}
@media(hover:none){.task-grip{opacity:.4}}
.habit-icon[data-habit-drag]{cursor:grab}
.task-dragging .habit-icon[data-habit-drag]{cursor:grabbing}
/* Full screen is a desktop and tablet affair; phones have no room for it in the top bar */
@media(max-width:560px){.fullscreen-button{display:none}}
/* Quick capture: a bolt and its shortcut, no label */
.capture-button{gap:7px;padding:6px 7px 6px 9px}
.capture-button kbd{margin-left:0}
.capture-button:hover .icon{color:var(--accent)}
/* Group headings in the Armor tab (body armor, shields, helmets, boots) */
.shop-group{grid-column:1/-1;margin:10px 0 -2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.shop-group:first-child{margin-top:0}
/* Pet treat: a tossed biscuit, nibbled in three bites before the happy hop */
.treat-biscuit{position:fixed;width:30px;height:20px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 3px 4px #0002)}
.treat-biscuit>svg{width:100%;height:100%;transition:transform .12s ease-out}
.treat-biscuit.bitten>svg{transform:scale(var(--bite,1))}
.pet-companion.treat-munch{animation:treat-munch .24s ease-in-out 3;transform-origin:50% 100%}
@keyframes treat-munch{0%,100%{transform:none}50%{transform:scale(1.06,.92) translateY(2px)}}
.modal.redrawn{animation:none}

/* The Vault: writing objects and a separate, quieter palette for each shelf. */
.vault-modal,.review-modal,.vault-capture{--vault-color:#626d7b}
[data-vault-tone=inbox],.vault-shelf-inbox{--vault-color:#9a7423}
[data-vault-tone=kept],.vault-shelf-kept,.capture-note{--vault-color:#347b77}
[data-vault-tone=journal],.vault-shelf-journal,.capture-journal{--vault-color:#a15d43}
[data-vault-tone=all],.vault-shelf-all{--vault-color:#626d7b}
[data-vault-tone=archived],.vault-shelf-archived{--vault-color:#857260}
[data-theme=dark] [data-vault-tone=inbox],[data-theme=dark] .vault-shelf-inbox{--vault-color:#d3af62}
[data-theme=dark] [data-vault-tone=kept],[data-theme=dark] .vault-shelf-kept,[data-theme=dark] .capture-note{--vault-color:#7bbab0}
[data-theme=dark] [data-vault-tone=journal],[data-theme=dark] .vault-shelf-journal,[data-theme=dark] .capture-journal{--vault-color:#d79c7c}
[data-theme=dark] [data-vault-tone=all],[data-theme=dark] .vault-shelf-all{--vault-color:#a3adbd}
[data-theme=dark] [data-vault-tone=archived],[data-theme=dark] .vault-shelf-archived{--vault-color:#b7a58f}
.vault-object{display:block;width:100%;height:100%;flex-shrink:0;overflow:visible}
.vault-modal{width:830px}.vault-modal .modal-header,.review-modal .modal-header{padding:22px 27px 14px;border-bottom:0;gap:12px}
.vault-modal .modal-header>div,.review-modal .modal-header>div{flex:1;min-width:0}.vault-modal .modal-header h2,.review-modal .modal-header h2{width:100%}
.vault-title{display:flex;align-items:center;gap:12px;min-width:0;font-size:21px;letter-spacing:-.5px}.vault-title-art{display:block;width:43px;height:42px;flex-shrink:0}
.vault-wallet{margin-left:auto;display:flex;align-items:center;padding:5px 9px;background:var(--gold-bg);border:1px solid color-mix(in srgb,var(--gold) 12%,transparent);border-radius:9px;flex-shrink:0;letter-spacing:0}.vault-wallet .gold-value{font-size:12px;gap:5px;color:var(--gold)}.vault-wallet .gold-pile{width:30px;height:25px}
.vault-modal .vault-toolbar{padding:10px 27px 17px;gap:9px}.vault-modal .search-box{border-radius:9px;background:var(--surface);min-width:0}.vault-modal .search-box input{font-size:12px;padding:10px 10px 10px 34px;background:transparent}.vault-modal .vault-toolbar .button{min-height:37px;font-size:11px;padding:8px 11px;white-space:nowrap;border-radius:9px}.vault-toolbar [data-action=review-notes]{--vault-color:#9a7423;color:var(--vault-color);background:color-mix(in srgb,#ad8436 7%,var(--panel))}.vault-toolbar [data-action=review-notes]>.vault-object{width:23px;height:22px}.vault-toolbar [data-action=review-notes]>span{border-radius:4px;background:color-mix(in srgb,#ad8436 12%,var(--panel));font-size:10px;padding:0 4px}
.vault-modal .vault-tab-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 27px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.vault-modal .vault-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:1 1 100%;gap:6px;background:none;border:0;padding:0}
.vault-modal .vault-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;min-height:43px;min-width:0;border-radius:9px;border:1px solid transparent;font-size:11px;background:transparent;color:var(--vault-color);transition:background .15s,border-color .15s,color .15s}
.vault-modal .vault-tabs button>.vault-object{width:25px;height:25px}.vault-modal .vault-tabs button>small{font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}.vault-modal .vault-tabs button>span{white-space:nowrap}.vault-modal .vault-tabs button:hover{background:color-mix(in srgb,var(--vault-color) 6%,var(--panel))}.vault-modal .vault-tabs button.selected{background:color-mix(in srgb,var(--vault-color) 10%,var(--panel));color:var(--vault-color);border-color:color-mix(in srgb,var(--vault-color) 21%,var(--line));box-shadow:0 2px 5px #00000003}.vault-modal .vault-tabs button.selected>small{color:var(--vault-color)}
.vault-modal #vault-download:empty{display:none}.vault-modal #vault-download{margin-left:auto}.vault-modal .vault-tag-chips{margin:12px 27px 0}.vault-modal .vault-tag-chips .selected{color:var(--vault-color);background:color-mix(in srgb,var(--vault-color) 10%,var(--panel));border-color:color-mix(in srgb,var(--vault-color) 30%,var(--line))}
.vault-modal .vault-results{padding:17px 27px 20px;max-height:55vh;min-height:140px;background:linear-gradient(180deg,color-mix(in srgb,var(--vault-color) 2%,var(--panel)),var(--panel));overscroll-behavior:contain}
.vault-modal .note-card,.review-modal .review-card{position:relative;border:1px solid color-mix(in srgb,var(--vault-color) 15%,var(--line));border-left:3px solid color-mix(in srgb,var(--vault-color) 62%,var(--line));background:linear-gradient(115deg,color-mix(in srgb,var(--vault-color) 3%,var(--panel)),var(--panel) 75%);border-radius:11px;padding:14px 16px 11px;margin-bottom:12px;box-shadow:0 2px 7px #00000003}
.vault-modal .note-card:last-child{margin-bottom:0}.note-top{display:flex;align-items:center;gap:11px;min-height:41px;color:var(--muted)}.note-emblem{display:block;width:40px;height:39px;flex:0 0 40px;padding:3px;border-radius:9px;background:color-mix(in srgb,var(--vault-color) 7%,var(--panel))}.note-identity{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.note-identity>strong{font-family:var(--heading);font-size:11px;font-weight:650;color:var(--vault-color);letter-spacing:.2px}.note-identity>small{display:flex;align-items:center;gap:3px;flex-wrap:wrap;font-size:9px;color:var(--muted);letter-spacing:0;line-height:1.6}.note-identity>small .icon{width:9px;height:9px}.note-capture-gold{margin-left:auto;flex-shrink:0;opacity:.8}.note-capture-gold .gold-value{font-size:10px;gap:2px;color:var(--gold)}.note-capture-gold .gold-pile{width:27px;height:23px}
.vault-modal .note-text{font-size:13px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 13px;padding:0 0 0 1px;color:var(--text)}.vault-modal .note-text .hashtag,.review-modal .review-text .hashtag{color:var(--vault-color);background:color-mix(in srgb,var(--vault-color) 7%,var(--panel));border-radius:4px;padding:0 3px}
.vault-modal .note-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--vault-color) 10%,var(--line))}.vault-modal .note-actions .text-button{font-size:10px;color:var(--muted);gap:4px;min-height:24px}.vault-modal .note-actions .text-button:hover{color:var(--vault-color)}.vault-modal .note-actions [data-action=keep-note]{color:var(--vault-color);font-weight:600}.vault-modal .note-actions [data-action=keep-note]>.icon{width:14px;height:14px;padding:1px;border:1px solid color-mix(in srgb,var(--vault-color) 35%,var(--line));border-radius:4px}.vault-modal .note-actions .converted{font-size:9px}
.vault-modal .note-card.pinned{border-color:color-mix(in srgb,var(--vault-color) 45%,var(--line))}.vault-modal .note-card.selectable:hover{border-color:color-mix(in srgb,var(--vault-color) 45%,var(--line))}.vault-modal .note-card.selected{border-color:var(--vault-color);box-shadow:0 0 0 1px var(--vault-color);background:color-mix(in srgb,var(--vault-color) 7%,var(--panel))}.vault-modal .note-card:focus-visible{outline-color:var(--vault-color)}
.vault-modal .vault-footer{padding:13px 27px;background:var(--surface);border-top:1px solid var(--line)}.vault-review-bonus{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:var(--secondary)}.vault-review-bonus>.gold-value{font-size:10px;gap:3px;color:var(--gold)}.vault-review-bonus .gold-pile{width:27px;height:23px}.vault-review-bonus>.icon{width:13px;height:13px;color:var(--gold)}.vault-review-bonus.earned{color:var(--muted)}
.review-modal{width:590px;--vault-color:#9a7423}.review-modal .review-progress{padding-top:10px}.review-modal .review-card{margin-top:14px;padding:16px 18px}.review-modal .review-text{font-size:15px;line-height:1.9;margin-top:17px;margin-bottom:9px;max-height:36vh}.review-modal .review-actions{padding-top:17px}.review-modal [data-action=review-keep]{background:color-mix(in srgb,#347b77 9%,var(--panel));color:#347b77}.review-modal .review-help{padding-top:17px}.review-modal .review-done .empty-symbol{background:color-mix(in srgb,#aa7e23 10%,var(--panel));color:var(--gold)}
.capture-title{display:flex;align-items:center;gap:11px}.capture-title>.vault-object{width:36px;height:35px}.vault-capture .capture-kind{background:var(--surface);padding:5px;gap:5px;border-radius:10px}.vault-capture .capture-kind button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;min-height:38px}.vault-capture .capture-kind button>.vault-object{width:27px;height:26px}.vault-capture .capture-kind button.selected{color:var(--vault-color);background:var(--panel);box-shadow:0 1px 5px #00000008}.vault-capture .capture-kind button[data-kind=journal].selected{color:#a15d43}.vault-capture textarea{border-color:color-mix(in srgb,var(--vault-color) 20%,var(--line));background:color-mix(in srgb,var(--vault-color) 2%,var(--panel));font-size:14px;line-height:1.9}.vault-capture textarea:focus-visible{outline-color:var(--vault-color)}
.vault-card .vault-symbol:has(.vault-object){width:38px;height:38px;background:transparent;padding:2px}
@media(max-width:600px){.vault-modal .modal-header,.review-modal .modal-header{padding:19px 18px 10px}.vault-title{font-size:19px;gap:9px}.vault-title-art{width:36px;height:36px}.vault-wallet{padding:4px 6px}.vault-wallet .gold-pile{width:25px;height:22px}.vault-wallet .gold-value{font-size:11px}.vault-modal .vault-toolbar{padding:9px 18px 13px;gap:6px;flex-wrap:wrap}.vault-modal .search-box{flex:1 1 100%}.vault-modal .vault-toolbar .button{flex:1;justify-content:center;font-size:10px;min-height:34px}.vault-modal .vault-tab-row{margin:0 18px;gap:8px}.vault-modal .vault-tabs{gap:4px}.vault-modal .vault-tabs button{flex-direction:column;gap:3px;padding:7px 3px;font-size:8px;min-height:66px;position:relative}.vault-modal .vault-tabs button>.vault-object{width:24px;height:23px}.vault-modal .vault-tabs button>small{position:absolute;right:4px;top:3px;font-size:8px}.vault-modal .vault-results{padding:14px 18px;max-height:48vh;min-height:100px}.vault-modal .vault-tag-chips{margin:10px 18px 0}.vault-modal .note-card{padding:12px 12px 9px;border-radius:10px}.note-emblem{width:35px;height:35px;flex-basis:35px}.note-top{gap:8px}.note-identity>strong{font-size:11px}.note-identity>small{font-size:8px}.vault-modal .note-text{font-size:13px;margin-top:10px}.vault-modal .note-actions{gap:8px}.vault-modal .note-actions .text-button{font-size:9px;min-height:28px}.vault-modal .vault-footer{padding:10px 18px}.vault-review-bonus{font-size:9px;gap:5px}.review-modal .vault-title{font-size:17px}.review-modal .review-text{font-size:14px}.vault-capture textarea{font-size:16px}}

[data-theme=dark] .vault-toolbar [data-action=review-notes],[data-theme=dark] .review-modal{--vault-color:#d3af62}[data-theme=dark] .review-modal [data-action=review-keep]{color:#7bbab0}

/* A live payout beside the word count, shared by notes, journals, and reflections. */
.vault-capture .capture-meta{align-items:center;gap:12px;margin-top:10px;font-size:10px;flex-wrap:wrap}
.capture-reward{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:5px 10px;background:var(--gold-bg);border:1px solid color-mix(in srgb,var(--gold) 15%,transparent);border-radius:9px;color:var(--gold)}
.capture-reward-label{font-size:10px;font-weight:500}
.capture-reward .gold-value{font-size:14px;gap:5px;font-variant-numeric:tabular-nums}
.capture-reward .gold-pile{width:35px;height:29px}
.capture-healing-hint{font-size:10px;color:var(--muted);margin-top:8px}

/* Stable turn panel: all upcoming frames share one invisible sizing grid. */
.battle-step{display:grid}
.battle-step-current,.battle-step-reserve{grid-area:1/1;min-width:0}
.battle-step-reserve{display:grid;visibility:hidden;pointer-events:none;user-select:none}
.battle-step-reserve>.battle-step-content{grid-area:1/1;min-width:0}
/* Spell layers live over the arena so casting never changes the layout. */
.combat-spell{--spell:#efac56;position:absolute;inset:0 0 75px;pointer-events:none;z-index:4;color:var(--spell)}
.spell-storm{--spell:#7ccde6}.spell-ward{--spell:#a5bb94}.spell-starfall{--spell:#c2a4ee}
.spell-charge{position:absolute;left:23%;top:58%;width:68px;height:68px;border:2px solid var(--spell);box-shadow:0 0 20px color-mix(in srgb,var(--spell) 40%,transparent),inset 0 0 14px color-mix(in srgb,var(--spell) 20%,transparent);transform:translate(-50%,-50%) rotate(45deg);animation:spell-charge .4s ease-out both}
.spell-projectile{position:absolute;left:23%;top:53%;width:62px;height:62px;overflow:visible;filter:drop-shadow(0 0 8px var(--spell));animation:spell-flight .4s ease-in both}
.spell-storm .spell-projectile{width:83px;height:83px}.spell-starfall.spell-attack .spell-projectile{animation-name:starfall-dive}
.spell-ward-shield{position:absolute;left:23%;top:54%;width:128px;height:140px;overflow:visible;filter:drop-shadow(0 0 9px var(--spell));transform:translate(-50%,-50%);animation:ward-rise .4s ease-out both}
.spell-impact{position:absolute;left:77%;top:54%;width:130px;height:130px;overflow:visible;opacity:0;transform:translate(-50%,-50%);filter:drop-shadow(0 0 7px var(--spell))}
.spell-guard .spell-impact{left:23%}.spell-guard .spell-charge{opacity:.3}
.impacted .spell-impact{animation:spell-burst .7s ease-out both}.impacted .spell-ward-shield{animation:ward-impact .85s ease-out both}
@keyframes spell-charge{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4)}65%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.2)}}
@keyframes spell-flight{0%{opacity:0;left:23%;transform:translate(-50%,-50%) scale(.4) rotate(-20deg)}20%{opacity:1}85%{opacity:1}100%{opacity:0;left:77%;transform:translate(-50%,-50%) scale(1.1) rotate(15deg)}}
@keyframes starfall-dive{0%{opacity:0;left:62%;top:3%;transform:translate(-50%,-50%) scale(.4) rotate(-30deg)}20%,85%{opacity:1}100%{opacity:0;left:77%;top:54%;transform:translate(-50%,-50%) scale(1.2) rotate(15deg)}}
@keyframes spell-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}35%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes ward-rise{0%{opacity:0;transform:translate(-50%,-40%) scale(.65)}100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}}
@keyframes ward-impact{0%{opacity:1;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 18px var(--spell))}35%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@media(max-width:560px){.combat-spell{bottom:68px}.spell-charge{width:48px;height:48px}.spell-projectile{width:47px;height:47px}.spell-storm .spell-projectile{width:59px;height:59px}.spell-ward-shield{width:91px;height:104px}.spell-impact{width:92px;height:92px}}
@media(prefers-reduced-motion:reduce){.spell-projectile{display:none}.spell-charge{animation:none;opacity:.5}.spell-ward-shield{animation:none!important;opacity:.65}.impacted .spell-impact{animation:none;opacity:.7}}
:root[data-motion=reduced] .spell-projectile{display:none}:root[data-motion=reduced] .spell-charge{animation:none;opacity:.5}:root[data-motion=reduced] .spell-ward-shield{animation:none!important;opacity:.65}:root[data-motion=reduced] .impacted .spell-impact{animation:none;opacity:.7}

/* Weapon and creature attack signatures, all confined to the arena. */
.combat-attack{position:absolute;inset:0 0 75px;z-index:3;pointer-events:none;color:var(--attack-color);--target:77%;--source:23%}
.attack-monster{--target:23%;--source:77%}
.combat-attack>svg{position:absolute;width:135px;height:135px;left:var(--target);top:54%;transform:translate(-50%,-50%);opacity:0;overflow:visible;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--attack-color) 40%,transparent))}
.combat-attack .attack-projectile{width:75px;height:75px;left:var(--source);animation:creature-projectile .4s ease-in both}
.impacted .attack-trail{animation:signature-strike .4s ease-out both}
.impacted .attack-impact{animation:signature-impact .6s ease-out both}
.attack-twig .attack-trail{width:117px;height:117px}.attack-iron .attack-trail{width:155px;height:155px}.attack-dawn .attack-trail{width:163px;height:163px}
.motion-thrust .attack-trail{width:120px;height:120px}.impacted .motion-thrust .attack-trail{animation-name:signature-thrust}
.motion-chop .attack-trail{width:158px;height:158px}.impacted .motion-chop .attack-trail{animation-name:signature-chop}
.attack-twin .attack-trail{transform:translate(-50%,-50%) scaleX(-1)}.impacted .attack-twin .attack-trail{animation-name:signature-twin;animation-duration:.28s}
.attack-missed{--target:12%}.impacted .attack-missed .attack-trail{animation:signature-miss .45s ease-out both;opacity:.45}
.combat-attack .attack-power{width:155px;height:155px}.impacted .attack-power{animation:signature-power .9s ease-out both}
.combat-attack .power-freeze{width:150px;height:180px}.impacted .power-freeze{animation:signature-freeze 1.3s ease-out both}
.combat-attack .power-venom{color:#83b88a}.combat-attack .power-critical{color:#dfb0ed}.combat-attack .power-sunder{color:#c1a68f}
.combat-attack .attack-drain{left:77%;width:65px;height:65px;color:#cf9fc6}.impacted .attack-drain{animation:signature-drain .9s ease-in-out both}
.battle-stage.actor-player.motion-thrust .player .fighter-motion{animation:dagger-thrust 1.1s ease-in-out both}
.battle-stage.actor-player.motion-chop .player .fighter-motion{animation:axe-chop 1.3s ease-in-out both}
.battle-stage.actor-player.motion-punch .player .fighter-motion{animation:unarmed-jab 1.1s ease-in-out both}
.battle-stage.actor-player.quick-strike .player .fighter-motion{animation:dagger-thrust .8s ease-in-out both}
.battle-stage.actor-monster.motion-root .monster .fighter-motion{animation:root-lash 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-breath .monster .fighter-motion{animation:fire-breath 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-hover .monster .fighter-motion{animation:wisp-gust 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-snap .monster .fighter-motion{animation:pincer-snap 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-ram .monster .fighter-motion{animation:antler-charge 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-bloom .monster .fighter-motion{animation:crystal-bloom 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-slam .monster .fighter-motion{animation:golem-slam 1.3s ease-in-out both}
.battle-stage.actor-monster.motion-flutter .monster .fighter-motion{animation:lunar-flutter 1.3s ease-in-out both}
.battle-stage.event-stagger .player .fighter-motion{animation:none}
@keyframes signature-strike{0%{opacity:0;transform:translate(-50%,-50%) rotate(-25deg) scale(.6)}25%,65%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(12deg) scale(1.15)}}
@keyframes signature-thrust{0%{opacity:0;transform:translate(-75%,-30%) scale(.5)}25%,65%{opacity:1}100%{opacity:0;transform:translate(-35%,-65%) scale(1.1)}}
@keyframes signature-chop{0%{opacity:0;transform:translate(-50%,-65%) rotate(-45deg) scale(.7)}25%,65%{opacity:1}100%{opacity:0;transform:translate(-50%,-40%) rotate(15deg) scale(1.2)}}
@keyframes signature-twin{0%{opacity:0;transform:translate(-40%,-65%) scaleX(-1) scale(.6)}25%,60%{opacity:1}100%{opacity:0;transform:translate(-65%,-35%) scaleX(-1) scale(1.1)}}
@keyframes signature-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}20%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes signature-miss{0%{opacity:0;transform:translate(-20%,-65%) scale(.6)}25%{opacity:.5}100%{opacity:0;transform:translate(-70%,-40%) scale(1.1)}}
@keyframes signature-power{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%,65%{opacity:.9}100%{opacity:0;transform:translate(-50%,-58%) scale(1.2)}}
@keyframes signature-freeze{0%{opacity:0;transform:translate(-50%,-40%) scaleY(.5)}20%,80%{opacity:.85;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes signature-drain{0%{opacity:0;left:77%;transform:translate(-50%,-50%) scale(.4)}20%,75%{opacity:.9}100%{opacity:0;left:23%;transform:translate(-50%,-50%) scale(.7)}}
@keyframes creature-projectile{0%{opacity:0;left:var(--source);transform:translate(-50%,-50%) scale(.4)}20%,85%{opacity:.9}100%{opacity:0;left:var(--target);transform:translate(-50%,-50%) scale(1)}}
@keyframes dagger-thrust{0%,100%{transform:none}20%{transform:translateX(-5px) rotate(-4deg)}32%,40%{transform:translateX(var(--lunge)) rotate(3deg)}65%{transform:translateX(8px)}}
@keyframes axe-chop{0%,100%{transform:none}18%{transform:translate(-8px,-9px) rotate(-12deg)}32%,40%{transform:translateX(var(--lunge)) rotate(14deg)}65%{transform:translateX(9px) rotate(-3deg)}}
@keyframes unarmed-jab{0%,100%{transform:none}18%{transform:translateX(-5px) rotate(-6deg)}33%,41%{transform:translateX(calc(var(--lunge)*.8)) rotate(9deg)}}
@keyframes root-lash{0%,100%{transform:none}18%{transform:rotate(9deg)}32%,41%{transform:translateX(calc(var(--lunge)*-.6)) rotate(-13deg)}65%{transform:rotate(3deg)}}
@keyframes fire-breath{0%,100%{transform:none;filter:none}18%{transform:translateX(7px) rotate(5deg)}32%,48%{transform:translateX(-12px) rotate(-4deg);filter:drop-shadow(0 0 8px var(--attack-color))}}
@keyframes wisp-gust{0%,100%{transform:none}20%{transform:translate(6px,-14px) rotate(8deg)}35%,50%{transform:translate(-12px,-5px) rotate(-10deg)}}
@keyframes pincer-snap{0%,100%{transform:none}16%{transform:translateX(6px) scale(1.05,.95)}29%,38%{transform:translateX(calc(var(--lunge)*-.75)) scale(.96,1.04)}48%{transform:translateX(-8px)}56%{transform:translateX(-18px)}}
@keyframes antler-charge{0%,100%{transform:none}17%{transform:translateX(8px) rotate(7deg)}32%,42%{transform:translateX(calc(var(--lunge)*-1)) rotate(-14deg)}65%{transform:translateX(-8px) rotate(3deg)}}
@keyframes crystal-bloom{0%,100%{transform:none;filter:none}22%{transform:translateY(-9px) scale(1.04)}34%,50%{transform:translateY(-3px) scale(1.07);filter:drop-shadow(0 0 7px var(--attack-color))}}
@keyframes golem-slam{0%,100%{transform:none}20%{transform:translate(8px,-15px) rotate(8deg)}32%,43%{transform:translate(-18px,7px) rotate(-7deg)}60%{transform:translate(-5px,3px)}}
@keyframes lunar-flutter{0%,100%{transform:none}15%{transform:translateY(-8px) scaleX(.85)}30%{transform:translate(-8px,-14px) scaleX(1.07)}42%{transform:translate(-12px,-8px) scaleX(.85)}60%{transform:translateY(-4px) scaleX(1.03)}}
@media(max-width:560px){.combat-attack{bottom:68px}.combat-attack>svg{width:98px;height:98px}.combat-attack .attack-projectile{width:56px;height:56px}.attack-iron .attack-trail,.attack-dawn .attack-trail,.motion-chop .attack-trail{width:112px;height:112px}.attack-twig .attack-trail,.motion-thrust .attack-trail{width:91px;height:91px}.combat-attack .attack-power{width:110px;height:110px}.combat-attack .power-freeze{width:104px;height:130px}.combat-attack .attack-drain{width:45px;height:45px}}
@media(prefers-reduced-motion:reduce){.combat-attack .attack-projectile{display:none}.impacted .attack-trail,.impacted .attack-impact,.impacted .attack-power{animation:none;opacity:.65}.impacted .attack-drain{animation:none;opacity:.6;left:23%}}
:root[data-motion=reduced] .combat-attack .attack-projectile{display:none}:root[data-motion=reduced] .impacted .attack-trail,:root[data-motion=reduced] .impacted .attack-impact,:root[data-motion=reduced] .impacted .attack-power{animation:none;opacity:.65}:root[data-motion=reduced] .impacted .attack-drain{animation:none;opacity:.6;left:23%}

/* Keep the brand, date, and every control readable on the narrowest phones. */
@media(max-width:400px){.topbar{height:auto;min-height:90px;padding-top:10px;padding-bottom:10px;flex-direction:column;align-items:stretch;gap:5px}.topbar-brand{width:100%;justify-content:space-between;flex-shrink:0}.topbar-date{max-width:none;white-space:nowrap;padding-left:0;border-left:0;font-size:9px;text-align:right}.topbar-actions{align-self:flex-end}}