.interactive-duty{position:relative;isolation:isolate}
.held-tool{position:absolute;z-index:5;pointer-events:none;max-width:110px;filter:drop-shadow(3px 7px 4px #10151166);transform:rotate(-22deg)}
.held-tool[hidden],.duty-result[hidden]{display:none}
.held-tool .carried-taper{display:block;width:8px;height:66px;background:#e8d4a7;border-bottom:7px solid #ab8e57;position:relative;box-shadow:inset -2px 0 #c7ad7a}
.held-tool .carried-taper:after{display:none}
.held-tool .carried-taper:before{content:"";position:absolute;width:8px;height:17px;left:0;top:-19px;border-radius:70% 30% 60% 40%;background:#ffe5a3;box-shadow:0 0 15px #e7ab5855}
.carried-book{display:block;width:58px;min-height:74px;background:#695449;border:2px solid #aa8a57;border-left:7px solid #46372e;padding:12px 4px;color:#f5e1b9;font:12px Georgia;text-align:center}
.held-tool>.duty-prop{display:block}.held-tool>.duty-prop+span{display:none}
.duty-result{position:absolute;inset:auto 0 35px;display:grid;place-items:center;pointer-events:none;z-index:4;animation:duty-seal .45s ease-out both}
.duty-result svg{width:42px;height:42px;padding:9px;background:#40593d;color:#f0e1b3;border:1px solid #acb18b;border-radius:50%;stroke-width:2}
.duty-finished .duty-feedback{color:#e6d7aa;font-size:15px;text-align:center;padding-top:28px}
.duty-finished .duty-workspace{transition:filter .3s ease-out;filter:saturate(.8)}
.duty-workspace.candles .votive.lit .candle-flame{animation:wick-lit .4s ease-out, fire 2.3s .4s infinite alternate}
.votive:not(:disabled):hover .candle-wick{background:#ffdea0;box-shadow:0 0 10px #e6b96655}
.placement-slot.filled .shelf-volume,.placement-slot.filled .duty-prop{animation:object-placed .25s ease-out}
.mortar-scene.ground .pestle{transform:translateY(8px) rotate(-14deg);transition:transform .2s ease-out}
.mortar-scene.mixed .mortar-bowl{box-shadow:inset 0 12px #9f9d63}
.trace-point.next{outline:2px solid #a28655;outline-offset:4px}
@keyframes duty-seal{from{transform:translateY(7px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes wick-lit{from{transform:scale(.2);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes object-placed{from{transform:translateY(-8px)}to{transform:translateY(0)}}
@media(pointer:coarse){.held-tool{display:none}.duty-feedback{font-size:13px}}
@media(prefers-reduced-motion:reduce){.interactive-duty *{animation:none!important;transition:none!important}}
.sequence-scene{height:150px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;border-bottom:9px solid #756044}
.sequence-scene.scene-cloister{background:radial-gradient(ellipse 62% 68% at 50% 108%,#596e6a 0 38%,#3a4a44 39% 55%,#1d2a26 56%)}
.sequence-scene.scene-dormitory{background:linear-gradient(#20261f,#20261f 70%,#3a3f33 70%);border-bottom-color:#5e5642}
.sequence-scene[data-stage="1"].scene-cloister{background:radial-gradient(ellipse 62% 68% at 50% 108%,#5f7772 0 38%,#3f5049 39% 55%,#1d2a26 56%)}
.sequence-scene[data-stage="3"].scene-cloister{background:radial-gradient(ellipse 62% 68% at 50% 108%,#6d8a84 0 38%,#46595a 39% 55%,#1d2a26 56%)}
.sequence-scene[data-stage="4"].scene-cloister{background:radial-gradient(ellipse 62% 68% at 50% 108%,#7fa29b 0 38%,#4c6466 39% 55%,#1d2a26 56%)}
.sequence-scene.scene-dormitory:before{content:"";position:absolute;left:12%;right:12%;bottom:24px;height:44px;background:#b9b2a0;border:1px solid #7c7a68;transform:perspective(220px) rotateX(38deg)}
.sequence-scene.scene-dormitory[data-stage="4"]:before{background:#d6cfb9;box-shadow:0 -8px 0 -3px #c6bfa9}
.sequence-stages{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sequence-stage{font:11px Arial;color:#c9c4a8;background:#1e2925cc;border:1px solid #57624e;padding:4px 8px;border-radius:11px}
.sequence-stage.done{color:#a9c6a2;border-color:#5e7d5e;text-decoration:line-through}
.sequence-stage.next{color:#ffe3ac;border-color:#a98e5e}
.sequence-next{margin:10px 0 0;text-align:center;font:12px Arial;color:#e0d3ae}
.tool-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-top:14px}
.sequence-tool{min-height:44px;min-width:44px;flex:1;max-width:150px;padding:12px 8px;background:#263a2d;border:1px solid #8b9875;color:#dfdbc0;font:12px Arial}
.sequence-tool:disabled{opacity:.28}
.sequence-tool:not(:disabled):hover{background:#31493a}
.herb-plots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 10px}
.herb-plot{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#263a2d;border:1px solid #8b9875;color:#dfdbc0;font:12px Arial}
.herb-plot .plot-soil{display:flex;gap:8px;align-items:flex-end;height:34px}
.herb-plot .plot-soil i{display:block;width:9px;height:22px;background:#5f7a4f;border-radius:60% 40% 45% 45%;transform:rotate(-7deg)}
.herb-plot .plot-soil i:nth-child(2){height:30px;background:#577a53;transform:rotate(4deg)}
.herb-plot .plot-soil i:nth-child(3){height:18px;background:#688552;transform:rotate(9deg)}
.herb-plot.watered{background:#2d4437;border-color:#a4bd8d;border-style:solid}
.herb-plot.watered .plot-soil i{background:#79a05d;box-shadow:0 0 8px #89b06d55}
.herb-plot:disabled{opacity:.85}
.herb-plot.watered:after{content:"Watered";font-size:10px;color:#a9c6a2}
.store-bins{display:flex;gap:9px;padding:18px 10px 0;background:#262a20;border-bottom:12px solid #6b573d}
.store-bin{min-height:96px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:8px 4px;background:none;border:1px dashed #8d9275;color:#dcd1b0;font:12px Arial}
.store-bin.filled{border-style:solid;background:#53604644}
.store-bin .duty-prop{opacity:.35}
.store-bin.filled .duty-prop{opacity:1;animation:object-placed .25s ease-out}
.store-object{background:none;border:1px solid #8e9272;color:#e2d7b7;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:22%;min-height:85px;padding:12px 4px;font-size:11px}
.store-object.selected{outline:2px solid #e8c886;outline-offset:4px}
.store-object:disabled{opacity:.18}
.prop-grain{width:44px;height:34px;background:#a08a58;border-radius:46% 46% 12px 12px;border-bottom:7px solid #7c6a42;position:relative}
.prop-grain:before{content:"";position:absolute;inset:-7px 9px auto;height:15px;background:#c2ac72;border-radius:50%}
.prop-oil{width:26px;height:44px;background:#77807a;border-radius:8px 8px 12px 12px;border-top:9px solid #4e5a52;position:relative}
.prop-oil:before{content:"";position:absolute;left:8px;top:-17px;width:10px;height:13px;background:#96a096;border-radius:4px 4px 0 0}
.prop-wine{width:24px;height:46px;background:#5e3d3d;border-radius:9px 9px 12px 12px;position:relative}
.prop-wine:before{content:"";position:absolute;left:7px;top:-18px;width:10px;height:16px;background:#7a5650;border-radius:4px 4px 2px 2px}
.prop-wine:after{content:"";position:absolute;left:0;right:0;top:14px;height:9px;background:#cbb98b}
.prop-beans{width:44px;height:30px;background:#8a6f4c;border-radius:50% 50% 10px 10px;border-bottom:7px solid #6a5539;position:relative}
.prop-beans:before{content:"";position:absolute;inset:-6px 8px auto;height:13px;background:#a8885e;border-radius:50%}
@media(max-width:800px){.sequence-scene{height:120px}.sequence-tool{font-size:11px}.herb-plots{gap:9px;padding:12px 6px}.herb-plot{min-height:84px}.store-bin{min-height:84px}}

/* Votives: a teardrop flame with a bright core, set on its wick, and a warm pool of light on
   the rack behind each lit candle. */
.votive{isolation:isolate}
.votive .candle-flame{width:12px;height:22px;margin-bottom:-2px;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#fff4cf 0 24%,#ffc45e 50%,#e98a33);transform-origin:50% 100%}
.votive.lit::before{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(var(--candle-height) + 52px);width:120px;height:120px;transform:translate(-50%,50%);background:radial-gradient(closest-side,#ffc86e66,#ffc86e1f 55%,transparent);pointer-events:none}
.votive.lit .candle-wax{background:linear-gradient(90deg,#b49e68,#f6e3ae 45%,#c9b27f);box-shadow:inset 0 7px 6px -4px #fff3c8}
.candle-rack{overflow:hidden}
.candle-rack:has(.votive.lit){background:radial-gradient(120% 90% at 50% 100%,#3a3524,#18221e 70%)}