/* Optional rule workshop. The short playable introduction is styled below. */
body:has(.tutorial-board) .masthead{height:48px;min-height:48px;flex-basis:48px;padding:6px 24px}
main:has(.tutorial-board){padding:12px 24px;max-width:1500px;width:100%;min-height:0}
.board.tutorial-board{height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:10px}
.tutorial-board .board-top{height:auto;min-height:30px;gap:12px;flex-wrap:wrap}
.tutorial-board .board-top .mode-tag{font-size:12px;max-width:none}
.tutorial-board .board-top .text-link{font-size:12px;padding:6px}
.tutorial-board .players{margin:0;gap:24px;min-height:72px}
.tutorial-board .player-title{font-size:15px;min-height:22px}
.tutorial-board .player-metrics{gap:18px}
.tutorial-board .hp-stat>span,.tutorial-board .score-stat>span{font-size:12px}
.tutorial-board .hp-stat>b,.tutorial-board .score-stat>b{font-size:25px}
.tutorial-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.tutorial-track>span{padding:7px 8px;font-size:12px;line-height:1.5;color:var(--muted);border-bottom:2px solid transparent}
.tutorial-track b{font:16px Georgia,serif;margin-right:4px}
.tutorial-track .is-current{color:var(--paper);border-color:var(--orange);background:#334734}
.tutorial-track .is-past{color:var(--good)}
.tutorial-board .table-content.scrabble-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(350px,1fr);gap:22px;min-height:0;align-items:stretch;overflow:hidden}
.tutorial-board .shared-table{display:flex;flex-direction:column;height:100%;min-height:0;overflow:auto}
.tutorial-board .shared-table>.rack-header{font-size:13px;margin:0 0 8px}
.tutorial-board #tut-grid{display:flex;justify-content:center;min-height:0;flex:1;container-type:size}
.tutorial-grid-wrap{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:18px minmax(0,1fr);width:min(100cqw,100cqh);height:min(100cqw,100cqh);aspect-ratio:1;gap:3px;align-self:flex-start}
.tutorial-columns{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));padding:0 5px;gap:2px;font:11px 'Segoe UI',sans-serif;text-align:center;color:var(--muted)}
.tutorial-rows{display:grid;grid-template-rows:repeat(15,minmax(0,1fr));padding:5px 0;gap:2px;font:11px 'Segoe UI',sans-serif;text-align:center;color:var(--muted);align-items:center}
.tutorial-board .crossword{width:100%;height:100%;margin:0;aspect-ratio:1}
.tutorial-board .cell{font-size:12px}
.tutorial-board .cell.placed,.tutorial-board .cell.ghost{font-size:clamp(14px,1.6vw,25px)}
.tutorial-board .cell small{font-size:8px}
.tutorial-board .cell:disabled{opacity:1}
.tutorial-board .cell.ghost{border:2px dashed var(--orange)}
.tutorial-board .tutorial-cross-mark{outline:3px solid var(--bad);outline-offset:-3px}
.tutorial-board .board-key{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:10px 0;font-size:11px;line-height:1.5;height:auto}
.tutorial-board .turn-panel{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;gap:12px;padding:0 10px 12px 2px;scrollbar-gutter:stable}
.tutorial-board .tutorial-note{padding:12px 14px;border-left:3px solid var(--orange);background:#2b4031;flex:none}
.tutorial-goal-tag{display:inline-block;color:var(--orange);font-size:11px;letter-spacing:1px;margin-bottom:5px}
.tutorial-board .tutorial-note h2{font-size:23px;line-height:1.35;margin:0 0 8px}
.tutorial-board .tutorial-note>p{font-size:15px;line-height:1.65;margin:0;color:var(--paper)}
.tutorial-tasks,.tutorial-checklist{margin:9px 0 0;padding:0 0 0 20px;font-size:13px;line-height:1.7;color:var(--paper)}
.tutorial-checklist{list-style:none;padding:0}
.tutorial-checklist li{display:flex;gap:8px}.tutorial-checklist li>span{color:var(--orange)}.tutorial-checklist .is-complete,.tutorial-checklist .is-complete>span{color:var(--good)}
.tutorial-why{font-size:13px;line-height:1.65;margin-top:8px;color:var(--muted)}.tutorial-why summary{cursor:pointer;color:var(--orange);padding:3px 0}.tutorial-board .tutorial-why p{font-size:13px;line-height:1.65;margin:6px 0 0}
.tutorial-board .table-hands{gap:9px;flex:none}
.tutorial-board .table-hands .rack-header{font-size:12px;line-height:1.5;height:auto;min-height:18px;margin:0 0 5px}
.tutorial-board .hand-area{padding:0;margin:0}
.tutorial-board .hand-area .rack .tile,.tutorial-board .opponent-hand .tile{height:40px;font-size:24px;min-width:0}
.tutorial-board .tile small{font-size:9px;right:3px;bottom:3px}
.tutorial-board .tile.selected{background:var(--orange);border-color:#bd7749;transform:translateY(-3px)}
.tutorial-board .opponent-hand{padding:8px 10px}
.tutorial-board .public-tile{height:40px;min-width:0;display:flex;align-items:flex-start;justify-content:center;padding-top:3px;position:relative}
.tutorial-board .public-tile b{font-size:22px;line-height:1}
.tutorial-board .public-tile small{font-size:8px;line-height:1;right:2px;bottom:3px}
.tutorial-board .tutorial-controls{display:flex;flex-direction:column;gap:10px;flex:none}
.tutorial-board .tutorial-controls .primary,.tutorial-board .tutorial-controls .secondary{height:auto;min-height:43px;padding:10px 12px;font-size:14px;line-height:1.5;margin:0}
.tutorial-board .tutorial-controls .answer-option{min-height:44px;font-size:15px;padding:10px 12px;line-height:1.5}
.tutorial-board .tutorial-controls .question-word{font-size:28px;margin:0;line-height:1.4;overflow-wrap:anywhere}
.tutorial-board .tutorial-controls .question-label{font-size:13px;line-height:1.5;margin:0}
.tutorial-board .tutorial-controls .word-entry input{height:44px;font-size:22px;padding:6px 10px}
.tutorial-board .tutorial-controls .compact{height:44px;width:44px;flex:none}
.tutorial-board .tutorial-controls .placement-controls{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;margin:0}
.tutorial-board .placement-controls .secondary{min-height:38px;font-size:13px;padding:6px 10px;width:auto}
.tutorial-board .placement-controls .text-link{font-size:12px}
.tutorial-board .tutorial-controls .word-preview{font-size:13px;line-height:1.6;padding:9px 11px;margin:0}
.tutorial-board .tutorial-controls .feedback{padding:12px 14px;margin:0;line-height:1.6}
.tutorial-board .tutorial-controls .feedback p{font-size:13px;line-height:1.6}
.tutorial-board .tutorial-controls .round-tally{gap:10px}.tutorial-board .round-tally b{font-size:24px}
.tutorial-board .tutorial-error{font-size:14px;line-height:1.6;padding:0 2px;margin:0;color:var(--bad);flex:none;min-height:0}
.tutorial-error:empty{display:none}
.tutorial-demo-label,.tutorial-cross-reason,.tutorial-round-notice{font-size:13px;line-height:1.6;margin:0;padding:9px 11px;background:#2b4031;border-left:2px solid var(--orange)}
.tutorial-cross-reason{border-color:var(--bad)}
.tutorial-formula{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 0}
.tutorial-formula>span{padding:10px;background:var(--paper);color:#203325;min-width:50px;font:24px Georgia,serif;border-bottom:3px solid #bcb493}
.tutorial-formula small{font:13px 'Segoe UI',sans-serif}.tutorial-formula>b{font-size:20px}
.tutorial-bronze,.tutorial-completion{padding:14px 16px;background:#304532;border:1px solid #9c9a6a;line-height:1.7}
.tutorial-bronze>b{color:#e6bc87}.tutorial-bronze p,.tutorial-completion p{font-size:14px;margin:6px 0 0}
.tutorial-round-flow{display:flex;flex-wrap:wrap;gap:10px}.tutorial-round-flow span{padding:10px;border-left:3px solid var(--orange);background:#2b4031;font-size:14px;line-height:1.5}
.tutorial-spelling{display:flex;flex-direction:column;gap:12px}.tutorial-spelling label{font-size:14px}.tutorial-spelling input{font-size:22px;min-height:46px}
.tutorial-board.review-lesson .shared-table{display:none}.tutorial-board.review-lesson .table-content.scrabble-layout{grid-template-columns:minmax(0,680px);justify-content:center}
.tutorial-board.review-lesson .view-tabs{visibility:hidden;height:0;min-height:0;overflow:hidden}
.practice-bot-summary{padding:7px 10px;border-left:2px solid var(--orange);background:#2b4031}
.board.intro-board{height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:12px}
.intro-top{display:flex;align-items:center;gap:16px;min-height:32px;font-size:12px;color:var(--muted)}.intro-top .eyebrow{color:var(--orange);margin-right:auto}.intro-top .text-link{padding:6px;font-size:12px}
.intro-path{display:flex;gap:20px;border-bottom:1px solid var(--line);padding-bottom:10px;font-size:13px}.intro-path span{color:var(--muted)}.intro-path .is-current{color:var(--paper);font-weight:700}.intro-path .is-past{color:var(--good)}
.intro-board .players{margin:0;min-height:75px;gap:24px}.intro-board .player-title{font-size:16px}.intro-board .hp-stat>b,.intro-board .score-stat>b{font-size:28px}.intro-board .player-metrics{gap:24px}.intro-board .hp-pending{font-size:11px}
.intro-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:32px;min-height:0;overflow:hidden}.intro-table{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;min-height:0}.intro-table>.rack-header{font-size:11px;margin:0;gap:12px}.intro-table #tut-grid{display:grid;place-items:center;container-type:size;min-height:0}.intro-board .intro-grid{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:none;margin:0;aspect-ratio:1}.intro-grid .cell{font-size:9px}.intro-grid .cell.placed,.intro-grid .cell.ghost{font-size:clamp(14px,1.6vw,26px)}.intro-grid .cell small{font-size:7px}.intro-grid .cell:disabled{opacity:1}.intro-grid .cell.ghost{border:1px dashed var(--orange)}.intro-grid .intro-target{position:relative;outline:3px solid var(--orange);outline-offset:-3px;background:#a96a3b;color:var(--paper);animation:intro-target-pulse 1.8s ease-in-out infinite}.intro-grid .intro-target:after{content:'↓';position:absolute;inset:0;display:grid;place-items:center;font-size:24px;background:#a96a3b}.intro-grid .intro-borrowed{outline:3px solid #9ccbd1;outline-offset:-3px}
.intro-table .hand-area{padding:0;margin:0;border:0}.intro-table .hand-area .rack-header{font-size:12px;margin:0 0 7px}.intro-table .rack{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin:0}.intro-table .rack .tile{min-width:0;width:100%;height:47px;font-size:28px}.intro-table .rack .tile:disabled{opacity:1}.intro-table .rack .tile small{font-size:9px;right:3px;bottom:3px}.intro-table .rack .intro-tile-cue{outline:3px solid var(--orange);outline-offset:2px;transform:translateY(-3px)}
.intro-coach{min-height:0;overflow:auto;padding:4px 10px 16px 0;scrollbar-gutter:stable}.intro-goal{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}.intro-goal>span{font-size:11px;letter-spacing:1px;color:var(--orange)}.intro-goal h2{font-size:27px;line-height:1.35;margin:9px 0 12px}.intro-goal p{font-size:16px;color:var(--paper);line-height:1.7;margin:0;max-width:36em}.intro-command{display:flex;flex-direction:column;gap:12px}.intro-command .primary,.intro-command .secondary{min-height:45px;height:auto;padding:11px 14px;line-height:1.5;font-size:15px;margin:0}.intro-command .word-entry{display:flex;gap:9px}.intro-command .word-entry input{width:100%;min-width:0;height:48px;font:26px Georgia,serif;padding:8px 12px;color:var(--paper);background:#14271d;border:1px solid var(--line)}.intro-command .compact{width:46px;flex:0 0 46px}.intro-input-label{font-size:12px;color:var(--muted)}.intro-command .placement-controls{display:flex;align-items:center;gap:12px;margin:0;font-size:12px}.intro-command .placement-controls button{width:auto;min-height:38px;font-size:13px;padding:6px 12px}.intro-preview{font-size:13px;line-height:1.6;color:var(--muted);margin:0;min-height:24px}.intro-coach:has([data-focus=input]) #tut-word,.intro-coach:has([data-focus=direction]) #tut-direction,.intro-coach:has([data-focus=submit]) #tut-submit{outline:2px solid var(--orange);outline-offset:3px}.intro-notice{font-size:13px;line-height:1.6;padding:10px 12px;border-left:2px solid #9ccbd1;background:#2b4031;color:var(--paper);margin:0 0 16px}.intro-command .question-word{font-size:34px;margin:0}.intro-command .answers{gap:10px}.intro-command .answer-option{min-height:48px;font-size:16px;line-height:1.5;padding:11px 14px}.intro-command .answer-option b{flex:0 0 24px;color:var(--orange)}.intro-answer-result{border-left:3px solid var(--good);padding:12px 14px;background:#304a35}.intro-answer-result.is-wrong{border-color:var(--bad);background:#453b2c}.intro-answer-result>b{color:var(--good)}.intro-answer-result.is-wrong>b{color:var(--bad)}.intro-answer-result p{font-size:15px;line-height:1.6;margin:8px 0 0}.intro-answer-result .intro-right-answer{background:#304a35;color:var(--paper);padding:10px;border-left:2px solid var(--good)}.intro-earned{display:flex;gap:32px;padding:4px 0 12px}.intro-earned>div{display:flex;flex-direction:column;gap:6px}.intro-earned span{font-size:11px;color:var(--muted)}.intro-earned strong{font:700 36px Georgia,serif;color:var(--orange)}.intro-recovery{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}.intro-recovery .text-link{font-size:13px}.intro-completed{display:flex;align-items:center;gap:16px;color:var(--good);padding:10px 0 20px}.intro-completed>span{font-size:36px}.intro-completed p{font-size:17px;line-height:1.6;margin:0}.intro-rules details{border-top:1px solid var(--line);padding:12px 0}.intro-rules summary{font-size:16px;color:var(--paper);cursor:pointer}.intro-rules p{font-size:14px;line-height:1.7;margin:10px 0 0}.intro-board .tutorial-error{margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--bad)}
@keyframes intro-target-pulse{50%{box-shadow:0 0 16px #ef995d88}}
@media(max-width:850px){.intro-layout{gap:18px;grid-template-columns:minmax(0,1fr) minmax(300px,1fr)}.intro-goal h2{font-size:24px}.intro-top>span:nth-child(2){display:none}.intro-board .player-metrics{gap:12px}}
@media(max-width:680px){.board.intro-board{gap:8px}.intro-top{min-height:26px;gap:8px}.intro-top .text-link{font-size:11px}.intro-path{gap:0;justify-content:space-between;font-size:11px;padding-bottom:7px}.intro-board .players{min-height:65px;gap:16px}.intro-board .player-title{font-size:13px}.intro-board .hp-stat>b,.intro-board .score-stat>b{font-size:24px}.intro-layout{display:flex;flex-direction:column;overflow:auto;gap:16px;padding-bottom:12px}.intro-table{flex:0 0 auto;height:clamp(310px,47dvh,405px);gap:7px}.intro-table>.rack-header{font-size:10px}.intro-table>.rack-header span+span{display:none}.intro-table .rack .tile{height:40px;font-size:24px}.intro-table .rack{gap:4px}.intro-table .rack .tile small{font-size:8px;right:2px;bottom:2px}.intro-grid .cell{font-size:7px}.intro-grid .cell.placed,.intro-grid .cell.ghost{font-size:17px}.intro-grid .cell small{font-size:6px}.intro-coach{overflow:visible;flex:0 0 auto;padding:0 2px}.intro-goal{margin-bottom:14px;padding-bottom:14px}.intro-goal h2{font-size:23px;margin:6px 0 8px}.intro-goal p{font-size:15px}.intro-command{gap:10px}.intro-layout:has(.intro-goal[data-focus=board]){scroll-behavior:smooth}.intro-grid .intro-target:after{font-size:18px}}
@media(prefers-reduced-motion:reduce){.intro-grid .intro-target{animation:none}}
@media(max-width:680px){.intro-coach{display:contents}.intro-goal{order:0;position:sticky;top:0;z-index:3;background:#1d3024;padding:10px 12px;margin:0;border-left:3px solid var(--orange)}.intro-notice{order:1;margin:0}.intro-table{order:2}.intro-command{order:3}.intro-board .tutorial-error{order:4}}
.intro-board[data-intro-stage=first] .cell.premium>span,.intro-board[data-intro-stage=borrow] .cell.premium>span{opacity:.2}.intro-board[data-intro-stage=first] .cell.intro-target>span,.intro-board[data-intro-stage=borrow] .cell.intro-target>span{opacity:1}
.intro-board[data-intro-stage=done] .intro-table,.intro-board[data-intro-stage=done] .intro-notice{display:none}.intro-board[data-intro-stage=done] .intro-layout{grid-template-columns:minmax(0,620px);justify-content:center}.intro-board[data-intro-stage=done] .intro-completed{padding:0 0 10px}.intro-board[data-intro-stage=done] .intro-goal{margin-bottom:16px}.intro-board[data-intro-stage=done] .intro-layout{gap:12px}
@media(max-width:1000px){.tutorial-board .table-content.scrabble-layout{grid-template-columns:minmax(0,1fr) minmax(310px,1fr);gap:14px}.tutorial-track>span{font-size:11px;padding:6px 4px}.tutorial-board .cell{font-size:10px}}
@media(max-width:680px){
  body:has(.tutorial-board) .masthead{height:38px;min-height:38px;flex-basis:38px;padding:4px 12px}
  main:has(.tutorial-board){padding:6px 12px}
  .board.tutorial-board{grid-template-rows:auto auto auto 34px minmax(0,1fr);gap:7px}
  .tutorial-board .board-top{gap:6px;min-height:26px}.tutorial-board .board-top .mode-tag{display:none}.tutorial-board .board-top .text-link{font-size:11px;padding:5px}
  .tutorial-board .players{gap:16px;min-height:65px}.tutorial-board .player-title{font-size:12px;min-height:18px}.tutorial-board .player-metrics{gap:10px}.tutorial-board .hp-stat>b,.tutorial-board .score-stat>b{font-size:22px}
  .tutorial-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding-bottom:5px}.tutorial-track>span{font-size:10px;padding:3px 4px}.tutorial-track b{font-size:12px}
  .tutorial-board .view-tabs{display:flex;gap:8px}.tutorial-board .view-tabs button{font-size:13px}
  .tutorial-board .table-content.scrabble-layout{display:block;overflow:hidden}.tutorial-board .shared-table{height:100%}.tutorial-board .turn-panel{width:100%;padding:0 4px 12px 0;gap:10px}
  body[data-mobile-panel=action] .tutorial-board .shared-table{display:none}body[data-mobile-panel=board] .tutorial-board .turn-panel{display:none}
  .tutorial-grid-wrap{gap:2px;grid-template-columns:15px minmax(0,1fr);grid-template-rows:15px minmax(0,1fr)}
  .tutorial-columns,.tutorial-rows{font-size:9px}.tutorial-board .cell{font-size:8px}.tutorial-board .cell.placed,.tutorial-board .cell.ghost{font-size:16px}.tutorial-board .cell small{font-size:6px}
  .tutorial-board .tutorial-note h2{font-size:21px}.tutorial-board .tutorial-note{padding:10px 12px}.tutorial-board .tutorial-note>p{font-size:14px}
  .tutorial-board .hand-area .rack .tile,.tutorial-board .opponent-hand .tile{height:40px;font-size:22px}.tutorial-board .table-hands .rack-header{font-size:11px}.tutorial-board .rack .tile small{font-size:8px}
  .board.tutorial-board.review-lesson{grid-template-rows:auto auto auto 0 minmax(0,1fr)}.tutorial-board.review-lesson .turn-panel{display:flex!important}
}