/* Guided practice shares the selected tradition's cards, font and backdrop. */
.lf #tutorial-open{min-height:44px;margin-top:6px;padding:10px 0;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.lf .tutorial{max-width:1120px;margin:0 auto;padding:24px 0 28px}
.lf .tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.lf #tutorial-progress{margin:0;color:#d8cdb4;font-size:10px;letter-spacing:1px}
.lf #tutorial-skip{min-height:44px;flex-shrink:0;font-size:12px}
.lf #tutorial-title{font-size:clamp(28px,3.5vw,44px);line-height:1.15;letter-spacing:-.5px;margin:0 0 12px;text-wrap:balance;scroll-margin-block:20px}
.lf #tutorial-copy{max-width:70ch;margin:0 0 20px;font-size:15px;line-height:1.65;color:#e8e1cf}
.lf .tutorial-workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:start}
.lf .tutorial-practice{min-width:0}
.lf #tutorial-context{margin:0 0 4px;color:#c8c7b9;font-size:11px;line-height:1.5}
.lf #tutorial-hand{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 12px;padding:22px 0 20px;max-width:720px}
.lf #tutorial-hand:empty{display:none}
.lf #tutorial-hand .playing-card{max-width:155px;justify-self:center;scroll-margin-block:30px}
.lf #tutorial-hand .playing-card:disabled{opacity:1;cursor:default}
.lf .tutorial-rewards small{display:block;margin-top:6px;font-size:12px;font-weight:400;line-height:1.5}
.lf #tutorial-hand .tutorial-required:not(.chosen){outline:2px dashed #d7b873;outline-offset:3px}
.lf #tutorial-hand .tutorial-required:not(.chosen):before{content:'Try this';position:absolute;z-index:3;top:-17px;left:50%;transform:translateX(-50%);padding:1px 5px;white-space:nowrap;background:#24332a;color:#f2e3bd;border-radius:3px;font:600 10px/1.4 var(--sans)}
.lf #tutorial-hand .playing-card.chosen:after{content:'✓';display:block;position:absolute;z-index:3;top:-8px;right:-5px;width:20px;height:20px;border:1px solid #f8e6cb;border-radius:50%;background:#943c2d;color:#fff3df;text-align:center;font:700 12px/18px var(--sans)}
.lf #tutorial-hand .tutorial-held:not(.chosen){border:2px solid #d7b873}
.lf #tutorial-hand .tutorial-held:not(.chosen):after{content:'Held · scores';position:absolute;bottom:-19px;left:0;right:0;color:#edd49b;text-align:center;font:600 10px/1.4 var(--sans);white-space:nowrap}
.lf .tutorial-rules,.lf .tutorial-rewards{display:flex;flex-wrap:wrap;gap:10px}
.lf .tutorial-rules button,.lf .tutorial-rewards button{min-height:48px;flex:1 1 230px;text-align:left;font:600 13px/1.5 var(--sans);padding:12px 15px;white-space:normal}
.lf .tutorial-rules button[aria-pressed="true"],.lf .tutorial-rewards button[aria-pressed="true"]{border-color:#d7b873;border-left-width:4px;background:#d7b87312;color:#f0dfba;opacity:1;cursor:default}
.lf .tutorial-rule-note{font-size:13px;line-height:1.6;color:#ded7c3;margin:10px 0 18px}
.lf .tutorial-rule-note:empty{display:none}
.lf .tutorial-score{background:#17241feb;border:1px solid #b9aa7959;border-radius:3px;padding:18px;min-width:0}
.lf .tutorial-score>.overline{margin:0 0 8px;color:#d0c7af;font-size:10px}
.lf #tutorial-gathering{margin:0 0 14px;color:#e4cea0;font:italic 22px/1.25 var(--serif);text-wrap:balance}
.lf .tutorial-points{display:flex;align-items:baseline;gap:7px;margin-bottom:15px}
.lf #tutorial-points{font:500 42px/1.1 var(--serif);font-variant-numeric:tabular-nums;color:#f0dca7;overflow-wrap:anywhere}
.lf .tutorial-points>span,.lf .tutorial-equation span{font:12px/1.5 var(--sans);color:#cdd0be}
.lf .tutorial-equation{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:12px}
.lf .tutorial-equation>div{display:flex;flex-direction:column;gap:2px}
.lf .tutorial-equation strong{font:500 25px/1.1 var(--serif);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lf #tutorial-chips{color:#a5d1d0}
.lf #tutorial-mult{color:#eba58d}
.lf .tutorial-equation>b{color:#c2c4b1;font:24px var(--serif)}
.lf .tutorial-score-note{margin:14px 0 0;color:#c6cbbb;font-size:11px;line-height:1.6}
.lf .tutorial-feedback{min-height:26px;max-width:75ch;font-size:14px;line-height:1.6;color:#f0dfba;margin:20px 0 12px}
.lf .tutorial-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;border-top:1px solid var(--line);padding:14px 0 0}
.lf .tutorial-actions button{min-height:48px;justify-content:center;min-width:130px;font-size:14px}
.lf .tutorial-score.score-pop #tutorial-points,.lf #tutorial-points.score-pop{animation:tutorial-score-pop .35s ease-out}
@keyframes tutorial-score-pop{0%{transform:scale(.94);opacity:.6}65%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
@media(min-width:1100px){.lf #tutorial-hand{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px}}
@media(max-width:760px){
  .lf .tutorial{padding-top:16px}
  .lf .tutorial-workspace{grid-template-columns:minmax(0,1fr);gap:16px}
  .lf #tutorial-copy{font-size:14px;line-height:1.6;margin-bottom:16px}
  .lf #tutorial-hand{gap:25px 10px;max-width:none;padding-bottom:20px}
  .lf .tutorial-score{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:14px}
  .lf .tutorial-score>.overline{grid-column:1/-1;margin-bottom:0}
  .lf #tutorial-gathering{margin:0;font-size:20px;align-self:center}
  .lf .tutorial-points{margin:0;justify-content:flex-end}
  .lf #tutorial-points{font-size:32px}
  .lf .tutorial-equation{border:0;padding-top:0;gap:12px}
  .lf .tutorial-equation>div{flex-direction:row;align-items:baseline;gap:5px}
  .lf .tutorial-equation strong{font-size:19px}
  .lf .tutorial-score-note{margin:0;text-align:right;align-self:center;max-width:18ch}
  .lf .tutorial-feedback{margin-top:16px;font-size:13px}
  .lf .tutorial-actions{position:sticky;bottom:0;z-index:5;background:#17241f;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:12px;gap:8px}
  .lf .tutorial-actions button{flex:1;min-width:0;padding:12px 10px;font-size:13px}
}
@media(max-width:360px){
  .lf #tutorial-title{font-size:27px}
  .lf #tutorial-hand{gap:24px 8px}
  .lf .tutorial-rules button,.lf .tutorial-rewards button{font-size:12px}
  .lf #tutorial-progress{letter-spacing:.4px}
  .lf .tutorial-score{gap:8px}
  .lf .tutorial-equation{gap:8px}
  .lf .tutorial-equation span,.lf .tutorial-points>span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .lf #tutorial-hand .playing-card{transition:none}
  .lf .tutorial-score.score-pop #tutorial-points,.lf #tutorial-points.score-pop{animation:none}
}