.game-tutorial{max-width:640px;margin:auto;color:#28473f;line-height:1.65}.game-tutorial h2{font-size:clamp(22px,4vw,29px);margin:.2em 0 .8em}.game-tutorial h3{font-size:17px;line-height:1.65;margin:18px 0 6px}.tutorial-eyebrow{font-size:12px;letter-spacing:.12em;color:#59766b;margin:0}.tutorial-stages{display:flex;list-style:none;padding:0;gap:18px;margin:0 0 16px;font-size:12px;color:#667a72}.tutorial-stages li{display:flex;align-items:center;gap:6px}.tutorial-stages li span{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid #afc5b9;border-radius:50%}.tutorial-stages [aria-current]{font-weight:700;color:#315c4a}.tutorial-stages [aria-current] span{background:#315c4a;color:#fff;border-color:#315c4a}.tutorial-variant{padding:10px 13px;background:#edf2e8;border-left:3px solid #a6b995;border-radius:0 8px 8px 0;font-size:13px;margin:12px 0}.tutorial-explanation{font-size:14px;margin:0 0 16px;color:#4d635a}.tutorial-tools,.tutorial-number-pad,.tutorial-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.game-tutorial button{font:inherit;cursor:pointer;touch-action:manipulation}.tutorial-tools button,.tutorial-number-pad button,.tutorial-actions button{border:1px solid #b9c8bd;border-radius:8px;min-height:44px;padding:8px 14px;background:#fffdf8;color:#345449;font-size:13px}.tutorial-tools button[aria-pressed=true]{background:#315c4a;color:#fff;border-color:#315c4a}.game-tutorial button:focus-visible{outline:3px solid #a6742d;outline-offset:3px}.game-tutorial button:disabled{cursor:default;opacity:1;color:inherit}.tutorial-board-area{padding:22px 6px 12px;min-height:110px;overflow-x:auto}.tutorial-board-wrap{--tutorial-cell:52px;display:grid;grid-template-columns:auto;gap:5px;justify-content:center;margin:auto;width:max-content;max-width:none}.tutorial-board-wrap.has-row-clues{grid-template-columns:max-content minmax(0,auto)}.tutorial-grid{display:grid;grid-template-columns:repeat(var(--tutorial-cols),minmax(44px,var(--tutorial-cell)));grid-template-rows:repeat(var(--tutorial-rows),var(--tutorial-cell));gap:3px;max-width:100%;min-width:0}.tutorial-cell{position:relative;border:1px solid #97b4a4;border-radius:4px;min-width:0;min-height:44px;background:#fffdf8;font-size:19px!important;line-height:1;color:#28473f;padding:2px!important}.tutorial-cell.is-fixed{background:#e5eadf;font-weight:700}.tutorial-cell.is-color-1,.tutorial-cell.is-path{background:#3c7e65;color:#fff!important}.tutorial-cell.is-color-2{background:#e8bf64;color:#344535!important}.tutorial-cell.is-empty{background:#f0f1ea;color:#627568!important}.tutorial-cell.is-selected,.tutorial-island.is-selected{outline:3px solid #ba8436;outline-offset:2px;z-index:2}.tutorial-cell.is-rectangle{box-shadow:inset 0 0 0 2px #fff7}.tutorial-cell.is-region{border-top-width:3px;border-bottom-width:3px}.tutorial-cell.is-odd{border-radius:50%}.tutorial-cell.cage{border-style:dashed;border-width:2px}.tutorial-hole{min-height:44px;background:repeating-linear-gradient(135deg,transparent,transparent 5px,#b8c8bd33 5px,#b8c8bd33 6px);border-radius:4px}.tutorial-row-clues{display:grid;grid-template-rows:repeat(var(--tutorial-rows),var(--tutorial-cell));gap:3px;align-items:center;text-align:right;font-size:13px;padding-right:6px}.tutorial-column-clues{grid-column:2;display:grid;grid-template-columns:repeat(var(--tutorial-cols),minmax(44px,var(--tutorial-cell)));gap:3px;text-align:center;font-size:13px}.tutorial-board-caption{font-size:12px;text-align:center;margin:9px 0 0;color:#567164}.tutorial-number-pad{justify-content:center;margin:10px 0}.tutorial-number-pad button{min-width:44px;padding:8px}.tutorial-feedback{min-height:48px;margin:12px 0;font-size:13px;color:#5b6d62}.tutorial-feedback.is-success{background:#edf3e7;color:#315c4a;padding:10px 12px;border-radius:8px}.tutorial-actions{border-top:1px solid #dbe3d7;padding-top:16px}.tutorial-action-spacer{flex:1}.tutorial-actions .tutorial-primary{background:#315c4a;color:#fff;border-color:#315c4a}.tutorial-skip{display:block;margin:14px auto 0;background:none;border:none;color:#5b7066;font-size:12px!important;min-height:36px;text-decoration:underline;text-underline-offset:3px}.tutorial-path-grid{gap:14px}.tutorial-path-grid .has-next:not(:last-child):after{content:'';position:absolute;left:100%;top:calc(50% - 2px);width:18px;height:4px;background:#3c7e65;pointer-events:none}.tutorial-dot{border-radius:50%}.tutorial-path-grid .tutorial-dot.is-color-2.has-next:after{background:#c39731}.tutorial-bridges{display:flex;justify-content:center;align-items:center;padding:8px}.tutorial-island{border:2px solid #719c85;border-radius:50%;width:62px;height:62px;background:#fffdf8;font-size:23px!important;font-weight:700!important;color:#28473f}.tutorial-bridge-span{width:110px;position:relative;height:18px}.tutorial-bridge-span.bridges-1:before,.tutorial-bridge-span.bridges-2:before,.tutorial-bridge-span.bridges-2:after{content:'';display:block;position:absolute;height:3px;background:#315c4a;left:0;right:0;top:8px}.tutorial-bridge-span.bridges-2:before{top:3px}.tutorial-bridge-span.bridges-2:after{top:13px}.tutorial-symmetry{display:flex;position:relative;justify-content:center;margin:8px auto;width:min(100%,280px);height:66px;border:2px solid #789e87;border-radius:4px}.tutorial-symmetry-cell{flex:1;background:#f1f4e9}.tutorial-symmetry-edge{position:absolute;top:-1px;bottom:-1px;width:44px;transform:translateX(-50%);background:transparent;border:0!important;padding:0!important}.tutorial-symmetry-edge:nth-of-type(1){left:25%}.tutorial-symmetry-edge:nth-of-type(2){left:50%}.tutorial-symmetry-edge:nth-of-type(3){left:75%}.tutorial-symmetry-edge:before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - .5px);width:1px;background:#bdcfc2}.tutorial-symmetry-edge.is-line:before{width:4px;left:calc(50% - 2px);background:#315c4a}.tutorial-center{display:block;position:absolute;left:calc(50% - 6px);top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:#5d8f73;outline:3px solid #f1f4e9}.tutorial-loop{display:grid;grid-template-columns:44px 68px 44px 68px 44px;grid-template-rows:44px 68px 44px;justify-content:center}.tutorial-loop-edge{position:relative;border:0!important;background:transparent;min-width:44px;min-height:44px;padding:0!important;color:#5d7768;font-size:22px!important;z-index:1}.tutorial-loop-edge:before{position:absolute;content:'';background:#c1d0c3}.tutorial-loop-edge.horizontal:before{height:2px;left:0;right:0;top:calc(50% - 1px)}.tutorial-loop-edge.vertical:before{width:2px;top:0;bottom:0;left:calc(50% - 1px)}.tutorial-loop-edge.is-line:before{background:#315c4a}.tutorial-loop-edge.horizontal.is-line:before{height:4px;top:calc(50% - 2px)}.tutorial-loop-edge.vertical.is-line:before{width:4px;left:calc(50% - 2px)}.tutorial-loop-edge.is-cross:before{background:none}.tutorial-loop-clue{display:grid;place-items:center;font-size:24px;font-weight:700}.tutorial-loop-dot{place-self:center;width:7px;height:7px;border-radius:50%;background:#315c4a;z-index:2}.tutorial-loop-edge.horizontal:after{content:'';position:absolute;top:calc(50% - 1px);left:-22px;right:-22px;height:2px;background:#c1d0c3;z-index:-1}.tutorial-loop-edge.vertical:after{content:'';position:absolute;left:calc(50% - 1px);top:-22px;bottom:-22px;width:2px;background:#c1d0c3;z-index:-1}.tutorial-loop-edge.is-line:after{background:#315c4a}.tutorial-loop-edge.horizontal.is-line:after{height:4px;top:calc(50% - 2px)}.tutorial-loop-edge.vertical.is-line:after{width:4px;left:calc(50% - 2px)}.tutorial-loop-edge.is-cross:after{background:none}@media(max-width:520px){.tutorial-stages{gap:8px;font-size:11px;justify-content:space-between}.tutorial-stages li{gap:4px}.tutorial-board-wrap{--tutorial-cell:44px}.tutorial-grid{grid-template-columns:repeat(var(--tutorial-cols),44px)}.tutorial-grid:has(>:nth-child(8)){gap:2px}.tutorial-cell{font-size:16px!important}.tutorial-row-clues{font-size:11px}.tutorial-actions{gap:6px}.tutorial-actions button{padding:8px 10px;font-size:12px}.tutorial-loop{grid-template-columns:44px 44px 44px 44px 44px;grid-template-rows:44px 60px 44px}.tutorial-tools button{flex:1;padding:8px}.tutorial-number-pad{gap:5px}.tutorial-explanation{font-size:13px}.tutorial-cell,.tutorial-hole{min-height:40px}.tutorial-board-area{padding:16px 0 10px}}@media(prefers-reduced-motion:reduce){.game-tutorial *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Keep step labels and one-row picture exercises readable in narrow dialogs. */
@media(max-width:380px){
 .tutorial-stages{flex-direction:column;align-items:stretch;gap:6px}
 .tutorial-stages li{gap:8px}
 .tutorial-stages li span{flex:0 0 24px}
 .tutorial-board-wrap.has-row-clues.single-row{grid-template-columns:1fr}
 .tutorial-board-wrap.single-row .tutorial-row-clues{grid-row:1;grid-template-rows:auto;text-align:left;padding-right:0}
}

/* Graphic-first lessons: the exercise leads; full rules remain one action away. */
.visual-tutorial{--lesson-glow:#bff7d5;line-height:1.5}.visual-tutorial h2{font-size:clamp(21px,3vw,28px);letter-spacing:-.5px;margin:6px 0 18px}.visual-tutorial .tutorial-eyebrow{font-size:11px;letter-spacing:.08em}.visual-tutorial .tutorial-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.visual-tutorial .tutorial-stages li{justify-content:center;padding:8px 4px;background:#edf3ee;border:1px solid #d5e4d9;border-radius:12px;gap:7px}.visual-tutorial .tutorial-stages li span{width:26px;height:26px;border:0;background:transparent;color:inherit;flex:0 0 26px}.visual-tutorial .tutorial-stages svg{width:20px;height:20px}.visual-tutorial .tutorial-stages b{font-size:12px;font-weight:500}.visual-tutorial .tutorial-stages [aria-current]{background:#163f36;color:#d4ffe3;border-color:#477e65;box-shadow:0 4px 16px #244c3520}.visual-tutorial .tutorial-cue{font-size:15px;text-align:center;margin:12px 0}.visual-tutorial .tutorial-board-area{min-height:150px;margin:14px 0 0;padding:28px 14px;border:1px solid #bcd6c6;border-radius:20px;background:radial-gradient(ellipse at 50% 0,#ddf6e5,transparent 75%),linear-gradient(#ffffff80 1px,transparent 1px),linear-gradient(90deg,#ffffff80 1px,transparent 1px),#edf4ee;background-size:auto,22px 22px,22px 22px,auto;box-shadow:inset 0 0 30px #fff9,0 10px 30px #28473f0a}.visual-tutorial .tutorial-board-wrap{flex-shrink:0}.visual-tutorial .tutorial-cell{box-shadow:0 3px 0 #38594718;border-radius:7px}.visual-tutorial .tutorial-cell.is-color-1:not(.tutorial-dot):not(.is-path){background:#245b49;box-shadow:inset 0 1px #b6f4d655,0 3px 0 #163f3630}.visual-tutorial .tutorial-cell.is-selected{outline-color:#a06718}.visual-tutorial .tutorial-feedback{font-size:12px;min-height:22px;margin:14px 0}.visual-tutorial .tutorial-feedback.is-success{border:1px solid #a6d6b5;background:#ddf5e5}.visual-tutorial .tutorial-actions{padding-top:12px;gap:8px}.visual-tutorial .tutorial-actions button{min-width:44px;border-radius:12px}.visual-tutorial .tutorial-primary{background:#163f36;box-shadow:0 4px 12px #163f3620}.tutorial-details{margin-top:14px;border-top:1px solid #d5e4d9;font-size:13px;color:#4d635a}.tutorial-details summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-size:12px;color:#345449}.tutorial-details summary:focus-visible{outline:3px solid #a06718;outline-offset:2px}.tutorial-details h3{font-size:14px}.tutorial-details p{margin:8px 0 14px}.visual-tutorial .tutorial-skip{min-height:44px;margin-top:4px}.visual-tutorial .tutorial-tools{justify-content:center}.visual-tutorial .tutorial-tools button{min-width:44px;border-radius:12px}
@media(max-width:520px){.visual-tutorial h2{font-size:21px;margin-bottom:14px}.visual-tutorial .tutorial-board-area{padding:22px 8px;border-radius:16px}.visual-tutorial .tutorial-stages{gap:5px}.visual-tutorial .tutorial-stages li{gap:4px}.visual-tutorial .tutorial-stages b{font-size:11px}.visual-tutorial .tutorial-actions .tutorial-action-spacer{display:none}.visual-tutorial .tutorial-actions .tutorial-primary{flex:1}}