/* Waystone lessons reuse the game art, stone tiles, bottles and reward objects. */
.shell.stage>.quest-tutorial{display:grid;grid-template-rows:auto minmax(100px,1fr) auto 24px 44px;gap:12px;max-width:620px;box-sizing:border-box;height:100%;min-height:0;padding:62px 24px 30px;overflow:hidden;text-align:center}
.stage-tutorial:before{background:linear-gradient(#08140ed9,#08140ee0)!important}
.quest-tutorial header{min-width:0}.tutorial-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px}.quest-tutorial .eyebrow{margin:0;font:700 9px/1.2 Georgia;letter-spacing:1.5px;color:#d0b879}
.quest-tutorial h1{margin:12px 0 0;font:28px/1.18 'Knightle Herald',Georgia;color:#f5e3b2;letter-spacing:1px}
.tutorial-skip{padding:4px 0;background:none;border:0;border-bottom:1px solid #c4bb9760;font:11px/1.2 Georgia;color:#d1cbb2;white-space:nowrap}.tutorial-skip:disabled{opacity:.35}
.tutorial-film{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;max-height:230px;width:100%;align-self:center;height:100%;background:radial-gradient(ellipse,#223425aa,transparent 72%);isolation:isolate}

.tutorial-copy{max-width:480px;margin:0 auto}.tutorial-copy p{font:15px/1.45 Georgia;color:#e8e3d0;margin:0}.tutorial-copy b{color:#fff0c6}.tutorial-copy .tutorial-note{font:12px/1.4 Georgia;color:#b8c1ab;margin-top:10px}
.tutorial-slide-time{display:flex;flex-direction:column;gap:7px;width:100%;align-self:center}.tutorial-white-track{height:3px;background:#ebeee12a;overflow:hidden}.tutorial-white-track i{display:block;height:100%;background:#fff7e5;transform-origin:left;will-change:transform}.tutorial-slide-time small{font:10px/1 Georgia;color:#c7cbbc;letter-spacing:.4px}
.quest-tutorial footer{display:grid;grid-template-columns:76px 1fr;gap:12px;min-height:0}.quest-tutorial footer .btn{margin:0;min-height:44px;font:700 12px Georgia;letter-spacing:1px;padding:8px}.quest-tutorial footer .btn:disabled{opacity:.35}
.tutorial-word-demo,.tutorial-bonus-demo{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.tutorial-word-row{display:flex;justify-content:center;gap:6px;width:100%}
.tutorial-film .tutorial-stone{flex:none;display:grid;place-items:center;min-width:0;width:42px;height:46px;padding:0;font:700 24px/1 Georgia;letter-spacing:0;color:#f4e8bc;transition:filter .2s,opacity .2s;box-sizing:border-box}
.tutorial-film .tutorial-stone:not(.demo-revealed){filter:brightness(.55)}.tutorial-film .tutorial-stone.crit{background:linear-gradient(#526f47,#294333);border-color:#a6be87}.tutorial-film .tutorial-stone.hit{background:linear-gradient(#a08344,#62502d);border-color:#d6bb74}.tutorial-film .tutorial-stone.miss{background:linear-gradient(#38443a,#19281f);border-color:#77806a}
.tutorial-mini-keys{display:flex;justify-content:center;gap:5px}.tutorial-mini-keys .key{display:grid;place-items:center;flex:none;width:31px;height:33px;font:700 16px Georgia}
.tutorial-demo-strike{display:inline-block;padding:8px 22px;border:1px solid #bd846d;background:linear-gradient(#874139,#4d2628);color:#ffe3c2;font:700 11px/1 Georgia;letter-spacing:1px;transition:filter .15s,transform .15s}
.demo-pressed{filter:brightness(1.7)!important;transform:translateY(2px)}
.tutorial-colors{display:flex;justify-content:center;gap:30px}.tutorial-colors>div{display:flex;flex-direction:column;gap:15px;align-items:center}.tutorial-colors .tutorial-stone{width:52px;height:60px;font-size:30px}.tutorial-colors small{font:700 11px Georgia;color:#dbd4b8;letter-spacing:1.3px}
.tutorial-temper{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(360px,100%)}.tutorial-temper .strike-gauge{height:26px;margin:0;width:100%;box-sizing:border-box}.tutorial-temper .tutorial-stone{width:43px;height:44px}.tutorial-temper>strong{min-height:18px;font:700 11px Georgia;color:#e2edba;letter-spacing:.6px}
.tutorial-clock-demo{display:block;width:100%;max-width:350px}.tutorial-clock-demo .turn-clock{top:0}.tutorial-clock-demo>small{display:block;margin-top:22px;min-height:25px;font:11px/1.5 Georgia;color:#dfc3a1}

.tutorial-enemy-demo{width:100%;max-width:410px;display:grid;gap:20px;justify-items:center}.tutorial-enemy-demo>canvas{width:100%;height:auto;image-rendering:pixelated}.tutorial-demo-warning{font:700 11px Georgia;letter-spacing:1px;padding:9px 13px;border:1px solid #be8e66;background:#2a2019d9;color:#f5d6ad;transition:opacity .3s}
.tutorial-supplies{display:flex;gap:30px;justify-content:center;width:100%}.tutorial-draught-demo{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;width:135px}.tutorial-draught-demo>.provision-icon{width:48px;height:56px;image-rendering:pixelated}.tutorial-draught-demo>strong{font:700 10px Georgia;letter-spacing:.7px;white-space:nowrap}.tutorial-draught-demo>b{font:700 15px Georgia;color:#bcdca5}.tutorial-health-demo{display:block;width:100px;height:7px;background:#132519;border:1px solid #7c986f}.tutorial-health-demo i{display:block;height:100%;width:40%;background:#aed18a}.tutorial-shield-confirm{font:10px/1.3 Georgia;color:#b1d7de;background:#1e333bd6;border:1px solid #8bafbb;padding:8px 5px;transition:opacity .3s}
.tutorial-revive-demo{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:4px;padding-bottom:25px;box-sizing:border-box}.tutorial-revive-demo>[data-tutorial-knight]{width:auto;height:100%;max-width:70%;object-fit:contain;image-rendering:pixelated}.tutorial-revive-demo>.provision-icon{width:64px;height:75px;image-rendering:pixelated}.tutorial-revive-demo>span{position:absolute;bottom:5px;left:0;right:0;font:700 11px Georgia;letter-spacing:1.6px;color:#c4dfb4}
.tutorial-bonus-demo>strong{font:21px 'Knightle Herald',Georgia;color:#ead398;letter-spacing:2px}.tutorial-bonus-demo>span{font:700 12px Georgia;letter-spacing:.9px;color:#c9d7a8;min-height:18px}
.tutorial-loot-demo{display:grid;justify-items:center;align-content:center;width:min(360px,100%);height:100%;grid-template-columns:1fr auto;grid-template-rows:minmax(50px,1fr) 14px 18px;gap:12px}.tutorial-loot-demo>[data-tutorial-chest]{height:100%;max-height:140px;width:auto;max-width:170px;object-fit:contain;image-rendering:pixelated}.tutorial-coins{display:flex;align-items:center;gap:7px;align-self:center;padding-right:20px}.tutorial-coins canvas{width:24px;height:24px;image-rendering:pixelated}.tutorial-coins>b{font:24px 'Knightle Herald',Georgia;color:#efcf87;min-width:28px}.tutorial-loot-demo>.legacy-xp-track{grid-column:1/-1;width:90%;height:12px;margin:0;box-sizing:border-box}.tutorial-loot-demo>strong{grid-column:1/-1;font:700 11px Georgia;color:#d0d9b2;letter-spacing:.7px}
@media(max-height:650px){.shell.stage>.quest-tutorial{padding:46px 20px 23px;gap:9px;grid-template-rows:auto minmax(100px,1fr) auto 24px 40px}.quest-tutorial h1{font-size:25px;margin-top:9px}.tutorial-copy p{font-size:13px;line-height:1.4}.tutorial-copy .tutorial-note{font-size:11px;margin-top:8px}.quest-tutorial footer .btn{min-height:40px}.tutorial-word-demo,.tutorial-bonus-demo{gap:12px}.tutorial-temper{gap:13px}.tutorial-colors{gap:24px}}
@media(max-width:350px){.quest-tutorial .eyebrow{font-size:8px;letter-spacing:1px}.tutorial-skip{font-size:10px}.tutorial-film .tutorial-stone{width:36px;height:41px;font-size:22px}.tutorial-colors .tutorial-stone{width:48px;height:55px}.tutorial-supplies{gap:18px}.tutorial-draught-demo>strong{font-size:9px}.tutorial-demo-warning{font-size:10px}.tutorial-revive-demo>.provision-icon{width:51px;height:60px}}
@media(orientation:landscape) and (max-height:500px){.shell.stage>.quest-tutorial{max-width:1000px;padding:39px 28px 15px;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) 22px 34px;gap:7px 28px}.quest-tutorial header{grid-column:1;grid-row:1}.quest-tutorial h1{font-size:21px;margin-top:7px}.tutorial-film{grid-column:2;grid-row:1/5;height:100%;max-height:none}.tutorial-copy{grid-column:1;grid-row:2;align-self:center}.tutorial-copy p{font-size:12px;line-height:1.3}.tutorial-copy .tutorial-note{font-size:10px;margin-top:6px}.tutorial-slide-time{grid-column:1;grid-row:3}.quest-tutorial footer{grid-column:1;grid-row:4}.quest-tutorial footer .btn{min-height:34px;padding:6px}.tutorial-skip{font-size:10px}.tutorial-kicker .eyebrow{font-size:8px}.tutorial-kicker{padding-left:40px}}
@media(prefers-reduced-motion:reduce){.tutorial-film *{transition:none!important;animation:none!important}}
