:root{color-scheme:light;--ink:#294b45;--muted:#6b7f79;--accent:#327867;--bg:#f4f8f6;--line:#dfe9e4;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #296f61;outline-offset:4px}button:not(.cell){transition:transform .12s,background .12s}button:active:not(:disabled):not(.cell):not(.node):not(.route-node){transform:translateY(2px)}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.game{width:min(100% - 32px,490px);margin:24px auto 30px}.game-header{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px}.heading{text-align:center}.brand{font-size:12px;letter-spacing:3px;color:var(--muted)}h1{font-size:29px;line-height:1.3;margin:6px 0 3px;letter-spacing:2px}.heading p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}.round-button{width:48px;height:48px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:17px;font-size:14px;box-shadow:0 3px 0 #dfe8e3}.round-button:first-child{font-size:25px}.rule-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:21px 0 19px;padding:13px 2px;border:1px solid var(--line);border-radius:16px;background:#ffffff9c}.rule-strip>div{display:flex;gap:8px;align-items:center;justify-content:center}.rule-strip>div+div{border-left:1px solid var(--line)}.rule-strip p{font-size:13px;line-height:1.7;margin:0;color:var(--muted)}.rule-strip strong{font-weight:650;color:var(--ink)}.rule-symbol{width:26px;text-align:center;font-size:21px;font-weight:600;line-height:.65}.color-rule{display:grid;grid-template-columns:repeat(2,11px);gap:3px}.color-rule i{width:11px;height:11px;background:#e9b55c;border-radius:3px}.color-rule i:nth-child(2){background:#87bcab}.color-rule i:nth-child(3){background:#b29ad6}.color-rule i:nth-child(4){background:#e4a0af}.spacing-rule{font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;gap:1px;width:32px}.spacing-rule svg{width:20px;height:26px;flex-shrink:0}.game-info{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 3px 15px}.cat-progress{display:flex;align-items:center;gap:10px;min-width:0}.cat-progress>svg{width:25px;height:25px;color:var(--accent)}progress{width:110px;max-width:22vw;height:10px;appearance:none;border:0;border-radius:20px;overflow:hidden;background:#dfe9e3}progress::-webkit-progress-bar{background:#dfe9e3}progress::-webkit-progress-value{background:#5f9b81;border-radius:20px;transition:width .2s}progress::-moz-progress-bar{background:#5f9b81;border-radius:20px}.cat-progress strong{font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}.timer-group{display:flex;align-items:center;gap:8px}#timer{font-size:14px;font-variant-numeric:tabular-nums;color:var(--muted)}.pause-button{border-radius:8px;width:32px;height:32px;background:#e5eee8;font-size:16px}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(4px,1.4vw,7px);user-select:none;-webkit-user-select:none;touch-action:none}.cell{display:grid;place-items:center;position:relative;aspect-ratio:1;min-width:0;padding:0;background:var(--cell-color);border-radius:clamp(6px,1.7vw,12px);color:#294b45;box-shadow:inset 0 -3px 0 #294b450d;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.cell:hover:not(:disabled){filter:brightness(1.025)}.cell:focus-visible{outline:3px solid #294b45;outline-offset:1px;z-index:2}.cell:disabled{opacity:1}.cell .cat{width:65%;height:65%;filter:drop-shadow(0 3px 0 #ffffff40);pointer-events:none}.cell .cross{width:64%;height:64%;color:#fff;filter:drop-shadow(0 1px 1px #294b4550);pointer-events:none}.cell .region-letter{position:absolute;left:5px;top:4px;font-size:10px;line-height:1;font-weight:650;display:none;pointer-events:none}.show-letters .cell .region-letter{display:block}.cell.conflict{box-shadow:inset 0 0 0 3px #bd3b50}.cell.conflict:after{content:'!';position:absolute;right:3px;top:3px;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;background:#b62e45;color:white;font-size:12px;font-weight:800}.cell.pressing{transform:scale(.96);filter:brightness(.98)}.board.painting{cursor:crosshair}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:23px 0 15px}.tool-button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:42px;padding:4px;background:transparent;font-size:13px;color:var(--muted)}.tool-button>span{font-size:27px;line-height:1.1;font-weight:500;color:var(--ink)}.mode-group{display:flex;gap:3px;padding:4px;background:#e4eee7;border-radius:13px}.mode-group button{display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 13px;border-radius:10px;background:transparent;font-size:14px;white-space:nowrap}.mode-group button[aria-pressed=true]{background:#fff;box-shadow:0 2px 4px #294b4512;font-weight:650}.mode-group svg{width:17px;height:17px}.gesture-note{text-align:center;font-size:12px;line-height:1.9;color:var(--muted);margin:0}.gesture-note strong{font-weight:500;color:#53796a}.status{text-align:center;font-size:13px;line-height:1.7;margin:15px 0 0;min-height:23px;color:var(--muted)}.status.error{color:#b12e46}.status.success{color:var(--accent)}.pause-cover{position:absolute;inset:0;border-radius:15px;background:#f0f7f2ed;backdrop-filter:blur(14px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3}.pause-cover>svg{width:65px;height:65px;color:#76a18b;margin-bottom:20px}.pause-cover h2{font-size:25px;margin:0}.pause-cover p{color:var(--muted);font-size:14px;margin:10px 0 24px}.primary{background:var(--accent);color:white;border-radius:13px;padding:13px 28px;min-height:46px;font-weight:650}.primary:hover{background:#286452}.win{text-align:center;background:#fff;border:1px solid #dce9e0;border-radius:20px;padding:22px;margin-top:20px;box-shadow:0 10px 30px #294b4508}.win-spark{font-size:30px;color:#e4b456}.win h2{font-size:22px;margin:4px 0 8px}.win p{font-size:14px;color:var(--muted);margin:0 0 18px}#celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}#celebration i{position:absolute;top:0;left:var(--x);width:8px;height:13px;background:var(--color);border-radius:3px;animation:confetti 1.2s ease-out both;animation-delay:var(--delay)}@keyframes confetti{from{transform:translateY(-20px) rotate(0);opacity:0}20%{opacity:1}to{transform:translateY(420px) rotate(260deg);opacity:0}}dialog{color:var(--ink);width:min(100% - 32px,480px);max-height:86dvh;border:1px solid var(--line);border-radius:24px;background:#fbfdfb;padding:25px;box-shadow:0 25px 90px #1e40342c}dialog::backdrop{background:#223e3655;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.dialog-heading h2{font-size:23px;margin:0}.dialog-heading p{font-size:13px;color:var(--muted);margin:5px 0 0}.close-button{background:#eaf0eb;width:36px;height:36px;border-radius:50%;font-size:26px;flex-shrink:0}.settings-options{display:grid}.settings-options label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}.settings-options small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.6}.settings-options input{accent-color:var(--accent);width:20px;height:20px;flex-shrink:0}.secondary{width:100%;margin-top:22px;padding:12px;background:#e5eee8;border-radius:12px;font-size:15px}.small-note,details{font-size:12px;line-height:1.8;color:var(--muted)}details{margin-top:22px}summary{cursor:pointer;font-size:14px}.level-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.level-button{min-width:0;min-height:66px;padding:8px 3px;background:#edf3ee;border:2px solid transparent;border-radius:12px;text-align:center;position:relative}.level-button[aria-current=true]{background:#e1eee4;border-color:#548d72}.level-no{display:block;font-size:20px;font-weight:650}.level-size{display:block;color:var(--muted);font-size:11px;margin-top:5px}.level-complete{position:absolute;right:3px;top:1px;color:var(--accent);font-size:12px}.level-button:hover{background:#dcece1}.embed .game{margin-top:12px}.embed .brand{display:none}@media(max-width:400px){.game{width:calc(100% - 24px);margin-top:15px}.game-header{grid-template-columns:42px 1fr 42px}.round-button{width:42px;height:42px;border-radius:14px}.rule-strip{margin:17px 0 13px;padding:10px 1px}.rule-strip>div{gap:5px}.rule-strip p{font-size:12px}.rule-symbol{width:23px}.spacing-rule{width:28px}.mode-group button{padding:10px 9px}.toolbar{margin-top:18px;gap:5px}.level-list{gap:6px}dialog{padding:20px}.cell .region-letter{font-size:9px;left:3px;top:3px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.no-motion *,body.no-motion *:before,body.no-motion *:after{animation:none!important;transition:none!important}

/* Rules are small examples of the actual board, rather than symbolic icons. */
.rule-examples{padding:12px 2px;margin:17px 0 15px}.rule-examples>div{flex-direction:column;gap:8px;text-align:center}.rule-grid{width:56px;height:56px;display:block}.rule-examples p{font-size:12px;line-height:1.65}.rule-examples strong{font-size:13px}.trial-panel{margin:0 0 13px;padding:10px 12px;background:#e9f0eb;border-radius:12px;border:1px solid transparent}.trial-summary{display:flex;align-items:center;justify-content:space-between;gap:8px}.trial-summary p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}.trial-start{padding:8px 10px;background:#fff;border-radius:8px;font-size:13px;white-space:nowrap;font-weight:650}.trial-panel.active-trial{background:#fff6de;border-color:#e0c271}.trial-panel.active-trial .trial-summary p{color:#805515;font-weight:600}.trial-panel.returned-trial{background:#f7efe1}.trial-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.trial-actions button{padding:8px 9px;font-size:12px;border-radius:8px;background:#fff9ed;color:#825817;border:1px solid #e8d6ae}.trial-actions #trial-reject{background:#825817;color:#fff;border-color:#825817}.trial-message{font-size:12px;line-height:1.7;color:#805515;margin:9px 0 0}.trial-message.has-contradiction{color:#aa3348}.cell.trial-change{outline:2px dashed #946a20;outline-offset:-4px}.cell.trial-root{box-shadow:inset 0 0 0 3px #946a20}.cell.trial-rejected{box-shadow:inset 0 0 0 2px #b35154}.cell.trial-tried{outline:2px dotted #8c6740;outline-offset:-3px}.trial-badge{position:absolute;left:3px;top:3px;background:#805515;color:#fff;font-size:10px;line-height:1;padding:3px;border-radius:4px;pointer-events:none;z-index:1}.trial-rejected .trial-badge{background:#a64750}.trial-tried .trial-badge{background:#8c6740}.show-letters .cell .region-letter{top:auto;bottom:4px}.cell.trial-change .cross{color:#805515;filter:drop-shadow(0 1px 0 #ffffff66)}.cell.trial-change .cat{color:#805515}.cell.conflict{box-shadow:inset 0 0 0 3px #bd3b50}.trial-root.conflict{outline-color:#bd3b50}@media(max-width:400px){.rule-grid{width:50px;height:50px}.rule-examples p{font-size:11px}.rule-examples strong{font-size:12px}.trial-panel{padding:8px 10px}.trial-summary p{font-size:11px}.trial-actions button{font-size:11px;padding:8px}.trial-badge{font-size:9px;padding:2px}}

.missing-notice{margin:12px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff9;font-size:12px;line-height:1.7;color:var(--muted)}.missing-notice>strong{color:var(--ink);font-weight:600}.missing-notice>div{display:grid;grid-template-columns:32px 1fr;gap:8px;margin-top:5px}.missing-regions{display:flex;flex-wrap:wrap;gap:5px}.missing-region{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}.missing-region:before{content:'';width:15px;height:15px;border-radius:4px;background:var(--region-color);border:1px solid #294b4515}.missing-warning{color:#b12e46;margin:7px 0;line-height:1.7}

/* Stable controls: all changing copy lives outside the document flow. */
.game{padding-bottom:54px}.trial-panel{padding:6px;margin-bottom:13px;height:58px}.trial-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0;height:44px}.trial-actions button{min-width:0;height:44px;padding:0 3px;font-size:12px;white-space:nowrap}.trial-actions .trial-start{background:#fff}.trial-panel.active-trial{border-color:#e0c271}.trial-panel.returned-trial{background:#f7efe1}.trial-actions #trial-reject:disabled{background:#fff9ed;color:#825817}.notice-toggle{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:10;min-width:64px;height:42px;padding:0 15px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 4px 18px #294b4520;font-size:13px}.notice-toggle.has-warning:before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#b12e46}.notice-window{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:min(calc(100% - 24px),330px);max-height:min(32dvh,300px);display:flex;flex-direction:column;z-index:20;background:#fffffff5;backdrop-filter:blur(12px);border:1px solid #d7e4dc;border-radius:16px;box-shadow:0 12px 44px #294b452b;overflow:hidden}.notice-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;flex-shrink:0}.notice-heading button{width:32px;height:32px;border-radius:50%;font-size:22px;background:#eaf0eb}.notice-content{padding:12px 14px;overflow:auto;overscroll-behavior:contain;min-height:0}.notice-content .trial-message{margin-top:5px}.notice-content .missing-notice{margin:10px 0 0;padding:10px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}.notice-content .status{text-align:left;margin:8px 0 0;min-height:0;font-size:12px}.notice-footer{display:block;font-size:10px;color:var(--muted);padding:8px 14px;border-top:1px solid var(--line);flex-shrink:0}.win{position:fixed;z-index:25;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 32px),400px);max-height:80dvh;overflow:auto;margin:0;box-shadow:0 20px 100px #294b4544}@media(max-width:400px){.trial-panel{padding:6px}.trial-actions{gap:4px}.trial-actions button{font-size:11px;padding:0 2px}}

.mode-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:240px;max-width:calc(100% - 94px)}.mode-group button{min-width:0;padding:10px 3px;font-size:13px}@media(max-width:350px){.mode-group button{font-size:12px;gap:2px}.mode-group svg{width:14px;height:14px}}

.learning-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px;height:42px}.learning-tools button{border-radius:12px;background:#e7efe9;font-size:13px}.learning-tools #hint-request{background:#fff0c9;color:#73521a}.cell.hint-target{outline:3px solid #217b6e;outline-offset:-4px;box-shadow:inset 0 0 0 6px #ffffffb3}.hint-card{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}.hint-card h3{font-size:15px;margin:0 0 8px}.hint-card p{font-size:12px;line-height:1.75;margin:6px 0}.hint-card #hint-caution{font-size:10px;color:var(--muted)}.hint-card button{font-size:12px;padding:9px 12px;border-radius:8px;min-height:36px;margin:7px 5px 0 0}.hint-card #hint-dismiss{background:#eaf0eb}.notice-window.has-hint{max-height:min(48dvh,390px)}.tutorial-level{width:100%;margin-bottom:16px;padding:14px;background:#fff0c9;border-radius:12px;text-align:left;font-weight:600}.board.hinting .cell:not(.hint-target):not(.hint-evidence){opacity:.28;filter:saturate(.45)}.board.hinting .cell.hint-evidence{box-shadow:inset 0 0 0 2px #fff9}.board .cell.hint-target{outline:3px solid #217b6e;outline-offset:-4px;box-shadow:inset 0 0 0 6px #ffffffb3}.hint-preview{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.cell .hint-preview .cross{width:42%;height:42%;color:#fff;filter:drop-shadow(0 1px 1px #294b4566)}.cell .hint-preview .cat{color:#fff;opacity:.7}

.unit-banner{height:62px;margin-top:16px;border-radius:13px;background:#e8f0ea;padding:10px 13px}.unit-banner>div{display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:1.6}.unit-banner>div>span{color:var(--muted);font-variant-numeric:tabular-nums}.unit-banner p{margin:3px 0 0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-list{display:block}.unit-map{margin:0 0 13px;border:1px solid var(--line);border-radius:15px;padding:12px;background:#f3f7f3}.unit-map>summary{font-size:14px;color:var(--ink);font-weight:600}.unit-intro{width:100%;text-align:left;font-size:12px;border-radius:8px;padding:9px;margin:10px 0;background:#fff0ce;color:#795720}.unit-nodes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.cell.given-cat:before{content:'定';position:absolute;left:3px;top:3px;font-size:9px;line-height:1;padding:3px;border-radius:4px;background:#ffffffa6;color:#294b45}.tutorial-footer label[hidden]{display:none}.tutorial-header #tutorial-step{line-height:1.6}.unit-map[open]{background:#edf5ef}

.hint-dialog{padding:0;width:min(calc(100% - 20px),440px);height:min(92dvh,780px);max-height:92dvh;overflow:hidden}.hint-dialog[open]{display:flex;flex-direction:column}.hint-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0;font-size:14px}.hint-dialog-header button{width:32px;height:32px;background:#eaf0eb;border-radius:50%;font-size:22px}.hint-dialog .hint-card{overflow:auto;flex:1;min-height:0;margin:0;padding:16px;border:0}.hint-dialog .hint-card h3{font-size:19px;margin:0 0 10px}.hint-dialog .hint-card>p{font-size:13px;line-height:1.8}.hint-board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;width:min(100%,330px);margin:16px auto}.hint-board .cell{opacity:.24;filter:saturate(.5)}.hint-board .cell.hint-target,.hint-board .cell.hint-evidence{opacity:1;filter:none}.hint-board .cell.hint-evidence{box-shadow:inset 0 0 0 2px #fff8}.hint-dialog-footer{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0}.hint-dialog-footer button{flex:1;min-height:44px;border-radius:10px;font-size:13px;padding:10px;background:#e7efe9}.hint-dialog-footer .primary{background:var(--accent)}.hint-color{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:20px;padding:0 3px;margin:0 2px;background:var(--region-color);color:#294b45;border-radius:4px;font-weight:600;font-size:12px;vertical-align:baseline}@media(max-height:750px){.hint-board{width:min(100%,255px)}.hint-dialog .hint-card>p{font-size:12px}.hint-dialog .hint-card{padding:12px}.hint-dialog .hint-card h3{font-size:17px}}

/* In-place coaching: fixed copy and inset highlights never change board/control geometry. */
.coach{position:fixed;z-index:21;width:340px;max-width:calc(100vw - 24px);padding:12px 16px 14px;border:1px solid #e6d8a6;border-radius:20px;background:#fffcf3;box-shadow:0 12px 42px #294b4530;pointer-events:none}.coach-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#96752b;font-size:11px;letter-spacing:.3px}.coach-heading button{pointer-events:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#f1ead7;font-size:20px;color:#7d7051}.coach h2{font-size:19px;line-height:1.45;margin:2px 0 6px}.coach p{font-size:13px;line-height:1.8;margin:0 0 9px}.coach strong{display:block;font-size:12px;color:#8c6216}.coach small{display:block;margin-top:8px;font-size:10px;color:#8a8e7d}.coach:after{content:'';position:absolute;width:12px;height:12px;background:#fffcf3;border-right:1px solid #e6d8a6;border-bottom:1px solid #e6d8a6;transform:rotate(45deg);left:var(--coach-tip,25px);bottom:-7px}.coach[data-side=right]:after{left:-7px;top:27px;transform:rotate(135deg)}.coach[data-side=left]:after{left:auto;right:-7px;top:27px;transform:rotate(-45deg)}.coach[data-side=below]:after{bottom:auto;top:-7px;transform:rotate(225deg)}
.board.coaching .cell:not(.coach-target):not(.coach-evidence):not(.coach-scope):not([data-state='1']):not([data-state='2']){background-image:linear-gradient(rgba(20,46,38,.3),rgba(20,46,38,.3));filter:saturate(.75) brightness(.52)}
.board.coaching .cell:not(.coach-target):not(.coach-evidence):not([data-state='1']):not([data-state='2']) .cat,.board.coaching .cell:not(.coach-target):not(.coach-evidence):not([data-state='1']):not([data-state='2']) .cross,.board.coaching .cell:not(.coach-target):not(.coach-evidence):not([data-state='1']):not([data-state='2']) .region-letter,.board.coaching .cell:not(.coach-target):not(.coach-evidence):not([data-state='1']):not([data-state='2']) .coach-arrow{opacity:.34}.board.coaching .cell.coach-evidence{box-shadow:inset 0 0 0 2px #ffffffbf}.cell.coach-target{outline:3px solid #7b5914;outline-offset:-3px;box-shadow:inset 0 0 0 6px #fff7d9,0 0 0 4px #ffd8732e,0 6px 20px #0d28236b;animation:coach-breathe 2.4s ease-in-out infinite;z-index:2}.cell .cell .coach-arrow{position:absolute;bottom:2px;right:6px;font-size:20px;color:#66450c;pointer-events:none;line-height:1}.coach-control{outline:3px solid #9b711d;outline-offset:2px;animation:coach-breathe 2.4s ease-in-out infinite}.skill-dialog details{padding:12px 0;margin:0;border-bottom:1px solid var(--line)}.skill-dialog summary{font-size:14px;color:var(--ink)}.skill-dialog details p{font-size:13px}.skill-dialog details button{padding:10px 14px;border-radius:9px;background:#fff0c9;font-size:12px;color:#73521a}@keyframes coach-breathe{0%,100%{outline-color:#8b651c;box-shadow:inset 0 0 0 5px #fff9da}50%{outline-color:#e8ae37;box-shadow:inset 0 0 0 7px #fff4bf,0 0 16px #dfb45380}}@media(max-width:550px){.coach{padding:9px 13px 10px;border-radius:16px}.coach h2{font-size:17px}.coach p{font-size:12px;line-height:1.7;margin-bottom:7px}.coach small{margin-top:5px}}

/* One requested hint, on the actual interactive board. No notification rail or cloned board. */
.hint-panel{position:fixed;z-index:24;width:370px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:#fffcf5;border:1px solid #e6d7af;border-radius:20px;padding:13px 16px;box-shadow:0 14px 46px #294b4530}.hint-panel>header{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#94752c}.hint-panel>header button{width:30px;height:30px;flex-shrink:0;font-size:23px;background:#f1ead9;border-radius:50%;color:#7f714e}.hint-panel h2{margin:2px 0 7px;font-size:18px;line-height:1.45}.hint-panel #hint-short{font-size:12px;line-height:1.65;margin:7px 0}.hint-equation{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:28px}.hint-token{padding:3px 7px;border-radius:7px;background:#f1eddf;font-size:12px;font-weight:600}.hint-equation .hint-color{min-width:29px;height:26px;margin:0;border:1px solid #294b4520;font-size:12px}.hint-legend{display:flex;gap:13px;font-size:10px;color:#796841;margin:5px 0 8px}.hint-panel details{margin:7px 0 9px;font-size:12px}.hint-panel summary{font-size:11px;color:#718477}.hint-panel details p{font-size:12px;line-height:1.7}.hint-panel footer{display:flex;gap:9px}.hint-panel footer button{min-height:38px;padding:8px 12px;font-size:12px;border-radius:10px;background:#e9f0e9;flex:1}.hint-panel footer .primary{background:#e5ae3e;color:#46330b}.hint-panel footer button:active{transform:none}
#board-shell{position:relative}.hint-lines{position:absolute;left:0;top:0;z-index:5;pointer-events:none;overflow:visible}.hint-lines rect,.hint-lines path{fill:none;stroke:#b97e0c;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #fff)}.board.hinting .cell:not(.hint-target):not(.hint-evidence){opacity:.25;filter:saturate(.5)}.board.hinting .cell.hint-evidence{box-shadow:inset 0 0 0 3px #ffda75;outline:1px solid #a97a21;outline-offset:-1px}.board.hinting .cell.hint-target{outline:3px dashed #fff7d5;outline-offset:-5px;box-shadow:inset 0 0 0 2px #9d7824;animation:hint-breathe 2.4s ease-in-out infinite}.hint-step{position:absolute;left:2px;top:2px;z-index:6;min-width:16px;height:16px;border-radius:5px;display:grid;place-items:center;background:#fff4cf;color:#614715;font-size:11px;font-weight:700;pointer-events:none}.cell .hint-preview .cat{color:#fff;opacity:.8}.cell .hint-preview .cross{width:46%;height:46%;color:#fff;filter:drop-shadow(0 1px 1px #45381899)}.hint-lost-x{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(25px,5vw,46px);font-weight:400;color:#b52b44;pointer-events:none}.cell.hint-choice:after{content:'?';font-size:22px;color:#fff;font-weight:700}.board.hinting .hint-evidence:not(.hint-target) .region-letter{display:block;top:auto;bottom:3px;background:#ffffffc9;padding:2px;border-radius:3px}.cell.hint-lost{box-shadow:inset 0 0 0 3px #cb4559!important}@keyframes hint-breathe{0%,100%{outline-color:#fff7d5}50%{outline-color:#c59528}}
@media(max-width:550px){.hint-panel{padding:9px 12px;border-radius:16px}.hint-panel h2{font-size:16px}.hint-panel>header button{width:26px;height:26px}.hint-panel #hint-short{font-size:11px;margin:5px 0}.hint-panel footer button{min-height:34px}.hint-legend{font-size:9px;margin-bottom:5px}.hint-token{font-size:11px}.hint-panel details{margin:5px 0}.hint-step{font-size:10px;min-width:13px;height:13px}}

.board[data-hint-kind=check] .cell.hint-evidence:after{content:'•';font-size:26px;color:#fff;pointer-events:none}.board[data-hint-kind=contradiction] .cell.hint-evidence{outline-color:#b74255;box-shadow:inset 0 0 0 3px #b74255}

/* Fixed control row with directly accessible consumables. */
.toolbar{position:relative;display:block;margin:14px 0 10px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:18px;transition:background .16s,border-color .16s,box-shadow .16s}
.tool-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.toolbar .tool-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-width:0;padding:6px 2px;border-radius:12px;background:transparent;font-size:12px;color:var(--muted)}
.toolbar .btn-label{font-weight:400}
.toolbar .tool-button .tool-icon{display:block;width:26px;height:26px;color:var(--accent)}
.toolbar .tool-button .icon-trial{display:none}
.toolbar .tool-button:not(:disabled):hover{background:#f1f6f2}
.toolbar .tool-button:not(:disabled):active{background:#e7efea}
.round-button{white-space:nowrap}
.toolbar #hint-request{color:#7a5a1c}.toolbar #hint-request .tool-icon{color:#c08a1e}
.toolbar #hint-request[aria-expanded=true]{background:#fdf2d9}
/* 假设进行中：底栏整体换装，四个按钮改成本轮推演的操作。 */
.toolbar.trial-mode{background:#fff5e2;border-color:#dcb45f;box-shadow:0 0 0 4px #e9c8772e}
.toolbar.trial-mode .morph .icon-base{display:none}
.toolbar.trial-mode .morph .icon-trial{display:block}
.toolbar.trial-mode .tool-button{color:#7d5514}
.toolbar.trial-mode .morph .tool-icon{color:#946a20}
.toolbar.trial-mode .tool-button:not(:disabled):hover{background:#fbe8bd}
.toolbar.trial-mode .tool-button:not(:disabled):active{background:#f5dc9f}
.toolbar.trial-mode .morph:not(:disabled){background:#fff9ed;border-radius:12px;box-shadow:inset 0 0 0 1px #e6cd9a}
.toolbar.trial-mode #trial-open[aria-pressed=true]{background:#fbe8bd;color:#7d5514}
.toolbar.trial-mode #hint-request[aria-expanded=true]{background:#fbe8bd}

/* Phone: the desktop composition on one screen — brand title, rule cards and the gesture
   note all stay. The stack is vertically centred so leftover height pools at the screen
   edges instead of opening gaps between the board and the modules around it. Tiers drop
   the gesture note, then the rule cards, on shorter screens. */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}
@media (max-width:560px){
 html,body{height:100%}
 body{overflow:hidden;overscroll-behavior:none}
 .game{width:100%;max-width:560px;height:100vh;height:100dvh;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:calc(10px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom))}
 dialog{max-height:82dvh}
 .game-header{grid-template-columns:44px 1fr 44px;gap:8px}
 .round-button{width:42px;height:42px;border-radius:13px}
 .round-button:first-child{font-size:21px}
 .game-header .heading{min-width:0}
 .game-header h1{font-size:20px;margin:1px 0 0;letter-spacing:1px;white-space:nowrap}
 .game-header .heading p{font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rule-strip{margin:0;padding:9px 2px;border-radius:16px}
 .rule-strip>div{gap:5px}
 .rule-strip p{font-size:11px;line-height:1.5}
 .rule-strip .rule-grid{width:44px;height:44px}
 .game-info{margin:0;height:26px;gap:10px}
 .cat-progress>svg{width:20px;height:20px}
 .cat-progress strong{font-size:15px}
 #timer{font-size:13px}
 .pause-button{width:28px;height:28px;font-size:14px}
 .board-wrap{flex:0 0 auto;display:grid;place-items:center}
 #board-shell{width:min(100%,calc(100dvh - 370px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));aspect-ratio:1}
 .toolbar{margin:0;gap:0;padding:5px;border-radius:16px}
 .tool-row{gap:4px}
 .toolbar .tool-button{font-size:11px;padding:5px 1px}
 .toolbar .tool-button .tool-icon{width:24px;height:24px}
 .gesture-note{display:block;margin:0;font-size:11px;line-height:1.55}
}
@media (max-height:730px){.gesture-note{display:none}#board-shell{width:min(100%,calc(100dvh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}}
@media (max-height:640px){.rule-strip{display:none}#board-shell{width:min(100%,calc(100dvh - 220px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}}
@media (max-height:520px){.game{justify-content:flex-start}.toolbar{margin:12px 0 8px}}

/* ---------- App shell: home trail, tabs, and the board as its own view ---------- */
.view[hidden],.tabbar[hidden]{display:none!important}
body[data-view="home"] .game,body[data-view="shop"] .game,body[data-view="rank"] .game,body[data-view="me"] .game{display:none}
.view{width:100%;max-width:520px;min-height:100dvh;margin:0 auto;padding:18px 16px 104px;display:flex;flex-direction:column}
/* The home view is an app shell, but its scroll box must still stop above the fixed tab bar: the bar
   floats over the bottom 62-68px of the viewport, and a level rung rendered under it cannot be tapped
   - the tap lands on the tab bar and switches tabs instead. That reads as "some levels won't open". */
body[data-view="home"] .view-home{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
/* The home view is an app shell at every width: the header stays put and the trail scrolls inside
   its own box, so the page itself never grows to the 12,000px that 162 levels would need. */
body[data-view="home"]{overflow:hidden}
.view-home{height:100vh;height:100dvh;min-height:0}
.view-top h1{font-size:22px;margin:6px 0 4px}
.view-top p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.6}
.view-note{margin:16px 2px 0;font-size:12px;color:var(--muted);line-height:1.7}
.cards{display:grid;gap:10px}
.card{position:relative;padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:#fff}
.card h2{margin:0 0 5px;font-size:15px;font-weight:600}
.card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.65}
.card-tag{position:absolute;top:12px;right:13px;padding:2px 8px;border-radius:999px;background:#eef4f0;color:var(--muted);font-size:11px}
.rank-row h2{font-size:14px}
.rank-bar{display:block;height:7px;margin:8px 0 6px;border-radius:999px;background:#eef4f0;overflow:hidden}
.rank-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.me-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:15px;text-align:left}
.me-row b{font-size:12px;font-weight:500;color:var(--muted)}

/* Accounts and leaderboards. The board itself is untouched; these only dress the rank/me tabs. */
.rank-tabs{display:flex;gap:7px;margin:0 0 12px}.rank-tabs button{flex:1;min-height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);font-size:13px}.rank-tabs button.is-on{border-color:transparent;background:var(--accent);color:#fff;font-weight:600}
.rank-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.rank-item{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}.rank-item.is-me{border-color:var(--accent)}.rank-no{flex:0 0 26px;font-size:13px;font-weight:600;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}.rank-item:nth-child(-n+3) .rank-no{color:var(--accent)}.rank-who{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-size:14px}.rank-who>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-avatar{flex:0 0 30px;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#eef4f0;display:grid;place-items:center;font-size:13px;color:var(--accent);font-weight:600}.rank-avatar svg,.rank-avatar img{display:block;width:100%;height:100%;object-fit:cover}.rank-score{flex:0 0 auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}.rank-empty{margin:0;padding:24px 14px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:13px;line-height:1.7;text-align:center}.rank-me{margin:12px 2px 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7}
.me-account{display:grid;margin:0 0 10px}.account-card{display:flex;align-items:center;gap:11px;padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:#fff}.account-avatar{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#eef4f0;color:var(--accent);font-size:16px;font-weight:600;overflow:hidden}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-who{flex:1;min-width:0}.account-who b{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-who span{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.55}.account-in,.account-out{flex:0 0 auto;padding:9px 17px;border-radius:999px;font-size:13px}.account-in{background:var(--accent);color:#fff}.account-out{background:#fff;border:1px solid var(--line);color:var(--muted)}
.account-card.is-link{cursor:pointer}.account-card.is-link:active{transform:translateY(1px)}.account-go{flex:0 0 auto;color:var(--muted);font-size:17px;line-height:1}
.account-avatar.is-lg{flex-basis:52px;width:52px;height:52px;font-size:20px}
.account-avatar svg{display:block;width:100%;height:100%}

/* ---- 账号中心。"我的"是分组行；点进去是独立一屏子页，底部标签保持不动。 */
.me-home,.me-page{display:flex;flex-direction:column}
.set-group{margin:0 0 14px}
.set-title{margin:0 0 7px 4px;font-size:12px;color:var(--muted)}
.me-row span{font-size:15px}
.me-row b{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-row.is-warn b{color:#b3452f}
.me-row:active{transform:translateY(1px)}
.page-head{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;margin:2px 0 15px}
.page-head h1{margin:0;font-size:19px;letter-spacing:1px}
.page-back{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:#fff;font-size:18px;color:var(--accent);box-shadow:0 2px 0 #dfe8e3}
.page-note{margin:0 0 14px;font-size:12px;color:var(--muted);line-height:1.75}
.page-note strong{color:var(--ink);font-weight:600}

.field{display:block;margin:0 0 14px}
.field>span{display:block;margin:0 0 6px 3px;font-size:12.5px;color:var(--muted)}
.field input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:15px;color:var(--ink);font-family:inherit}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #32786726}
.field small{display:block;margin:6px 3px 0;font-size:11.5px;color:var(--muted);line-height:1.6}

.avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:2px 0 16px}
.avatar-opt{position:relative;padding:0;border-radius:50%;background:none;aspect-ratio:1}
.avatar-opt svg{display:block;width:100%;height:100%;border-radius:50%}
.avatar-opt.is-on{box-shadow:0 0 0 3px var(--accent)}
.avatar-opt.is-on:after{content:'✓';position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;line-height:18px;text-align:center}

.me-primary,.me-ghost,.me-danger{display:block;width:100%;min-height:47px;margin:0 0 9px;border-radius:14px;font-size:15px;font-weight:600}
.me-primary{background:var(--accent);color:#fff}
.me-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500}
.me-danger{background:#fff8f6;border:1px solid #e6cfc7;color:#b3452f;font-weight:500}
.me-primary:active,.me-ghost:active,.me-danger:active{transform:translateY(1px)}

.bind-card{padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:#fff;margin:0 0 10px}
.bind-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bind-head>strong{font-size:15px;font-weight:600}
.bind-state{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.bind-state:before{content:'';width:7px;height:7px;border-radius:50%;background:#cbd8d2}
.bind-state.is-on{color:var(--accent)}
.bind-state.is-on:before{background:var(--accent)}
.bind-card>p{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.7}
.bind-actions{display:flex;gap:8px;margin-top:11px}
.bind-actions button{flex:1;min-height:41px;border-radius:12px;font-size:13.5px;background:#eef4f0;color:var(--ink)}
.bind-actions .primary{background:var(--accent);color:#fff}
.bind-actions .danger{background:#fff8f6;border:1px solid #e6cfc7;color:#b3452f}

.code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.code-row .field{margin:0}
.code-row>button{min-height:48px;padding:0 15px;border-radius:14px;background:#eef4f0;font-size:13.5px;white-space:nowrap}
.code-row>button:disabled{opacity:.5}

.device-list{display:grid;gap:9px;margin:0 0 6px}
.device-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:15px;background:#fff}
.device-item.is-current{border-color:var(--accent)}
.device-name{display:flex;align-items:center;gap:7px;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-tag{padding:1px 7px;border-radius:999px;background:#eef4f0;color:var(--accent);font-size:10.5px;flex:0 0 auto}
.device-meta{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.device-kick{padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--muted);flex:0 0 auto}

.set-list{display:grid;gap:10px;margin:0 0 14px}
.set-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:#fff}
.set-copy{min-width:0}
.set-copy b{display:block;font-size:14.5px;font-weight:600}
.set-copy small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.55}
.set-toggle{flex:0 0 auto;position:relative;width:50px;height:29px;border-radius:999px;background:#dbe6e0;transition:background .16s}
.set-toggle::after{content:'';position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #294b4533;transition:transform .18s}
.set-toggle[aria-pressed=true]{background:var(--accent)}
.set-toggle[aria-pressed=true]::after{transform:translateX(21px)}
.fact-list{display:grid;gap:9px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:4px 15px;margin:0 0 14px}
.fact{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;font-size:14px}
.fact+.fact{border-top:1px solid var(--line)}
.fact b{font-weight:600;font-size:13.5px;color:var(--muted)}

/* 二次确认弹窗：解绑 / 清除 / 注销共用，按钮与说明都比设置弹窗更紧凑。 */
.confirm-text{margin:0;font-size:14px;line-height:1.85;color:var(--muted)}
#confirm-field{margin:15px 0 0}
.confirm-actions{display:flex;gap:10px;margin-top:20px}
.confirm-actions button{flex:1;min-width:0;min-height:46px;margin:0;padding:12px;border-radius:13px;font-size:15px}
.confirm-actions .secondary{width:auto;margin-top:0;background:#e5eee8;font-weight:500}
.confirm-actions .primary.is-danger{background:#b3452f}

.toast{position:fixed;left:50%;bottom:calc(94px + env(safe-area-inset-bottom));z-index:70;max-width:min(88vw,420px);margin:0;padding:11px 18px;border-radius:999px;background:#203c36;color:#fff;font-size:13px;line-height:1.5;text-align:center;box-shadow:0 10px 30px #294b4533;opacity:0;transform:translate(-50%,10px);transition:opacity .24s,transform .24s;pointer-events:none}.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* home header */
.home-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 4px 12px}
.home-brand b{display:block;font-size:20px;letter-spacing:2px}
.home-brand span{font-size:12px;color:var(--muted)}
.home-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.home-badges span{padding:3px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--muted)}

/* the trail */
.path-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:0 4px 8px}
.path{position:relative}
.trail{position:relative}
.trail-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trail-line path{fill:none;stroke:#d7e4dc;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 9}
.trail-cat{position:absolute;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 5px 16px #294b4533,0 0 0 3px #3278672e;display:grid;place-items:center;pointer-events:none;transition:left .5s cubic-bezier(.34,1.35,.5,1),top .5s cubic-bezier(.34,1.35,.5,1)}
.trail-cat svg{width:27px;height:27px;color:var(--ink)}
.trail-cat.is-moving{animation:cat-hop .6s ease}
@keyframes cat-hop{0%{margin-top:-23px}40%{margin-top:-72px}72%{margin-top:-13px}100%{margin-top:-23px}}
.node{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:2px solid #d7e4dc;background:#fff;color:var(--muted);font-size:14px;font-weight:600;display:grid;place-items:center;padding:0}
.node.is-done{border-color:var(--accent);background:var(--accent);color:#fff}
.node.is-here{width:58px;height:58px;font-size:16px;border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 5px #3278671f}
.node.is-here::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid #32786766;animation:node-pulse 1.9s ease-out infinite}
.node-no{line-height:1}
.node-tick{position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--accent);font-size:11px;line-height:17px;box-shadow:0 1px 3px #294b4533}
/* A rung is centered on its route point with translate(-50%,-50%), so it must never inherit the
   global press nudge (button:active{transform:translateY(2px)}). That one declaration replaces the
   whole transform, drops the centering, and slides the rung half its own size down-right while the
   finger is still down. By the time it comes up the pressed pixel sits on the rim - outside the round
   hit area - so the browser hands the click to the trail instead of the rung and the level never
   opens. Quick taps had moved less and still worked, which is what made it read as "only some levels
   open". Keep the centering and nudge 2px instead. */
button.node:active:not(:disabled){transform:translate(-50%,-50%) translateY(2px)}
@keyframes node-pulse{0%{transform:scale(.82);opacity:.85}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}

/* bottom tabs */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:12;width:100%;max-width:520px;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#fffffff2;backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border-radius:12px;background:none;color:var(--muted);font-size:11px}
.tab svg{width:23px;height:23px}
.tab.is-on{color:var(--accent);font-weight:600}

/* gesture rehearsal on the highlighted cell */
.coach-demo-single::before,.coach-demo-double::before,.coach-demo-drag::before{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #b97e0c;pointer-events:none}
.coach-demo-single::before{animation:tap 1.5s ease-out infinite}
.coach-demo-double::before{animation:tap 1.5s ease-out .28s infinite,tap 1.5s ease-out infinite}
.coach-demo-drag::before{animation:press 1.9s ease-in-out infinite}
.cell.coach-demo-drag{animation:drag-step 1.9s ease-in-out infinite;animation-delay:calc(var(--demo-order,0)*.16s)}
@keyframes tap{0%{transform:scale(.35);opacity:.95}55%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes press{0%{transform:scale(1.5);opacity:0}25%{transform:scale(.7);opacity:.95}60%{transform:scale(.7);opacity:.95}100%{transform:scale(1.5);opacity:0}}
@keyframes drag-step{0%,100%{transform:translateX(0)}45%{transform:translateX(3px)}}
body.no-motion .coach-demo-single::before,body.no-motion .coach-demo-double::before,body.no-motion .coach-demo-drag::before,body.no-motion .cell.coach-demo-drag{animation:none}

@media (prefers-reduced-motion:reduce){.node.is-here::after,.coach-demo-single::before,.coach-demo-double::before,.coach-demo-drag::before,.cell.coach-demo-drag{animation:none!important}}

@media (max-width:560px){
 html,body{height:100%}
 body{overflow:hidden;overscroll-behavior:none}
 .view{height:100dvh;min-height:0;padding:calc(10px + env(safe-area-inset-top)) 14px 0}
 body[data-view="home"] .view-home{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
 .view-home{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
 .view-top{padding-top:4px}
 .cards{gap:9px}
 .node{width:42px;height:42px;font-size:13px}
 .node.is-here{width:54px;height:54px}
 .tabbar{padding-bottom:env(safe-area-inset-bottom)}
}

/* Phone: a shorter coach card so it clears the progress row above the board. */
@media (max-width:560px){
 .coach{width:min(340px,calc(100vw - 28px));padding:9px 12px 10px;border-radius:15px}
 .coach h2{font-size:16px;line-height:1.4;margin:1px 0 4px}
 .coach p{font-size:12px;line-height:1.65;margin:0 0 7px}
 .coach strong{font-size:11.5px}
 .coach-heading{font-size:10.5px}
 .coach-heading button{width:24px;height:24px;font-size:18px}
}

.cell.coach-scope{background-image:none;filter:saturate(.95) brightness(1.03);box-shadow:inset 0 0 0 2px #ffd87366}
.board.coaching .cell.coach-scope .cat,.board.coaching .cell.coach-scope .cross,.board.coaching .cell.coach-scope .region-letter{opacity:1}
.board.coaching .cell.coach-scope .cross{color:#fff}
.coach-frame{position:absolute;z-index:4;border:2.5px dashed #d9a233;border-radius:14px;background:#ffd87312;box-shadow:0 0 0 3px #ffd8731c,0 0 20px #dfb4534d;pointer-events:none;animation:coach-frame-in .3s ease-out}
.coach-frame.is-row{border-radius:12px}
.coach-frame.is-column{border-radius:12px}
.coach-frame.is-scattered{border-style:solid;border-color:#d9a2335c;background:none}
@keyframes coach-frame-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.coach-frame{animation:none!important}}

/* Spotlight: while the coach talks, every cell that is not lit up goes dark, so the one to tap is
   unmistakable. The layer sits behind the grid (absolute, no padding) so no geometry shifts. */
body.coaching #board-shell::before{content:'';position:absolute;inset:-10px;border-radius:18px;background:rgba(15,34,29,.5);z-index:0}
body.coaching .board{position:relative;z-index:1}

/* While the coach talks, everything except the lit-up cells steps back. */
.game-header,.rule-strip,.game-info,.gesture-note,.toolbar{transition:opacity .22s,filter .22s}
body.coaching .game-header,body.coaching .rule-strip,body.coaching .game-info,body.coaching .gesture-note{opacity:.22;filter:saturate(.25) grayscale(.35)}
body.coaching .toolbar{opacity:.34;filter:saturate(.4)}
body.coaching.coach-on-control .toolbar{opacity:1}

/* The trail is a scroll box now, so .path is just a plain block: no centering, no page-height padding. */

/* Grid picker: the whole catalogue in rows, done levels ticked. */
.picker{width:min(100% - 24px,560px)}
.picker-filter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}
.picker-filter button{padding:7px 0;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:13px}
.picker-filter button.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:7px;max-height:min(56dvh,460px);overflow-y:auto;overscroll-behavior:contain;padding:2px}
.pick-node{position:relative;aspect-ratio:1;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;display:grid;place-items:center;padding:0}
.pick-node::before{content:'';position:absolute;left:5px;right:5px;bottom:4px;height:3px;border-radius:2px;background:var(--node-color);opacity:.55}
.pick-node.is-done{background:var(--accent);border-color:var(--accent);color:#fff}
.pick-node.is-done::before{background:#fff;opacity:.5}
.pick-node.is-here{border-color:var(--accent);box-shadow:0 0 0 3px #32786726;color:var(--accent)}
.pick-node.is-here.is-done{color:#fff}
.pick-node i{position:absolute;top:1px;right:4px;font-size:11px;font-style:normal}
.picker-grid[data-filter=todo] .pick-node.is-done,.picker-grid[data-filter=done] .pick-node:not(.is-done){display:none}
.picker-note{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.picker-open{padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--accent);font-size:12.5px}

/* Difficulty read-out: a cat count in the subtitle, a pip strip in the picker.
 * The game theme is cats, so difficulty is measured in cats rather than stars - 2 to 5 of them. */
.pick-diff{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:2px;font-size:6px;line-height:1;color:var(--muted);text-decoration:none;pointer-events:none}
.pick-node[data-level='4'] .pick-diff{color:#c08a3e}
.pick-node[data-level='5'] .pick-diff{color:#b3553f}
.pick-node.is-done .pick-diff{color:#ffffffb3}
.picker-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.picker-legend .pick-diff{position:static;font-size:6px;gap:2px;display:inline-flex;vertical-align:middle;margin-right:3px}
@media(max-width:400px){.pick-diff{bottom:8px}}

/* When a cell is both a lit candidate and the one to try, the target treatment has to win: same
   specificity as .cell.coach-scope but declared later, so the brighter ring and the breathing animation
   are what the eye lands on. */
.cell.coach-target.coach-scope{background-image:none;filter:saturate(1) brightness(1.06);box-shadow:inset 0 0 0 6px #fff7d9,0 0 0 4px #ffd8732e,0 6px 20px #0d28236b}

/* Spotlight, take two: on a board that is mostly × already, excluding the placed symbols from dimming
 * left nothing to dim - the board stayed fully lit and the lit cells did not read as special. So during
 * coaching every cell that is not a target dims, including the × and the cats, but only to a level where
 * the marks stay readable. The player's own work is still legible; it just stops competing with the
 * cell the coach is pointing at. */
.board.coaching .cell:not(.coach-target){filter:saturate(.5) brightness(.5)}
.board.coaching .cell:not(.coach-target) .cat,.board.coaching .cell:not(.coach-target) .cross{opacity:.5}
.board.coaching .cell.coach-scope{filter:saturate(1) brightness(1.08);box-shadow:inset 0 0 0 3px #ffd873a8,0 0 14px #dfb45340}
.board.coaching .cell.coach-scope .cat,.board.coaching .cell.coach-scope .cross{opacity:1}
.board.coaching .cell.coach-scope .cross{color:#fff}
.board.coaching .cell.coach-target{filter:none;box-shadow:inset 0 0 0 6px #fff7d9,0 0 0 4px #ffd87340,0 6px 22px #0d282378}
.board.coaching .cell.coach-target .cat,.board.coaching .cell.coach-target .cross{opacity:1}
/* Continuous route and completed-run feedback. Board geometry stays unchanged. */
.tabbar{grid-template-columns:repeat(4,1fr)!important}
#home-done{display:none}
/* An uninterrupted garden path; all visual landmarks are decorative. */
body[data-view="home"] .view-home{padding-left:0;padding-right:0;background:#edf5ef;overflow:hidden;position:relative}
.view-home .home-top{padding:8px 20px 13px;align-items:center;background:#f6faf6;flex:none;z-index:2}
.view-home .home-brand span{font-size:11px}.view-home #home-skill{display:none}
.view-home>.route-progress{flex:none;height:3px;margin:0;background:#dfeae1;z-index:2}.route-progress i{display:block;height:100%;background:#95b79e;border-radius:3px;transition:width .3s}
.view-home .path-scroll{padding:0;position:relative;scrollbar-width:none;overflow-x:hidden;background:#edf5ef;mask-image:linear-gradient(to bottom,transparent,#000 18px,#000 calc(100% - 15px),transparent)}
.view-home .path-scroll::-webkit-scrollbar{display:none}
.view-home .path{width:100%;position:relative;background:repeating-linear-gradient(to top,#e7f1df 0,#eff6e9 520px,#f4f4e9 920px,#eaf3f0 1440px,#edf0f7 1950px,#eff5ee 2500px,#e7f1df 3000px)}
.journey-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.journey-road path{fill:none;stroke-linecap:round;stroke-linejoin:round}.road-shadow{stroke:#aac4aa;stroke-width:28;opacity:.24;transform:translateY(3px)}.road-edge{stroke:#fffdf0;stroke-width:26}.road-fill{stroke:#d7dec0;stroke-width:18}.road-dashes{stroke:#f9fbef;stroke-width:3;stroke-dasharray:2 11}
.route-node{position:absolute;z-index:2;display:grid;place-items:center;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;padding:0;background:linear-gradient(#fffffc,#f5f8ec);border:3px solid #fff;color:#718771;font-size:20px;font-weight:750;box-shadow:0 5px 0 #c7d6c1,0 7px 12px #63836819;isolation:isolate}
.route-node::before{content:'';position:absolute;inset:4px;border:1px solid #e3e9da;border-radius:50%;z-index:-1}
/* Keep the circular hit target fixed for both taps and long mouse presses. */
button.route-node:active:not(:disabled){transform:translate(-50%,-50%);filter:brightness(.96);box-shadow:0 2px 0 #b7c9b1}
.route-node.is-done{background:linear-gradient(#79b394,#559375);color:#fff;border-color:#ecf6e8;box-shadow:0 5px 0 #40765c,0 7px 12px #63836820}.route-node.is-done::before{border-color:#ffffff35}
.route-node.is-here{width:66px;height:66px;background:linear-gradient(#f7d88b,#efbf5b);color:#694d25;border-color:#fff7db;box-shadow:0 5px 0 #c89d45,0 0 0 8px #eec66d24,0 8px 18px #b08d3724;font-size:24px}.route-node.is-here::before{border-color:#ffffff70}
.route-node .route-tick{position:absolute;right:-4px;bottom:0;width:21px;height:21px;border-radius:50%;background:#fff;color:#528f70;box-shadow:0 2px 4px #244d3020;font-size:12px;font-style:normal;line-height:21px}
.route-node .route-cat{position:absolute;right:-9px;top:-13px;width:30px;height:30px;display:grid;place-items:center;border:2px solid #fff7db;border-radius:50%;background:#fff7db;color:#528570;box-shadow:0 2px 6px #99762924}.route-cat svg{width:23px;height:23px}
.route-here{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:12px;background:#365c49;color:#fff;white-space:nowrap;font-size:11px;font-weight:600;box-shadow:0 3px 8px #365c4915}.route-here::after{content:'';position:absolute;top:100%;left:calc(50% - 4px);border:4px solid transparent;border-top-color:#365c49}
.route-scenery{position:absolute;width:18%;max-width:82px;pointer-events:none;opacity:.85}.route-scenery svg{display:block;width:100%}.route-start,.route-ahead{position:absolute;left:0;width:100%;text-align:center;pointer-events:none;color:#8b9d83;font-size:11px;letter-spacing:2px}.route-ahead{top:24px;font-size:12px}
.route-continue{display:flex;align-items:center;gap:12px;flex:none;margin:0;padding:10px 18px 12px;background:#f5f9f3;z-index:3;box-shadow:0 -7px 22px #ebf3e650}
.route-continue #continue-game{display:flex;align-items:center;justify-content:center;gap:18px;flex:1;min-height:49px;border-radius:17px;padding:10px 18px;background:#365f4d;color:white;box-shadow:0 4px 0 #254a39;font-size:17px}.route-continue #continue-game>span{color:#efcd81;font-size:23px;line-height:1}
.route-continue #route-locate{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid #dce6d7;border-radius:15px;background:#fff;color:#64816c;box-shadow:0 3px 0 #e0e9dc}.route-continue #route-locate svg{width:23px;height:23px}
@media(max-height:640px){.route-continue{padding:8px 14px 10px}.route-continue #continue-game{min-height:43px;font-size:15px}.view-home .home-top{padding:4px 16px 9px}}
.trial-tools{position:fixed;z-index:22;left:50%;transform:translateX(-50%);bottom:calc(98px + env(safe-area-inset-bottom));width:min(calc(100% - 28px),360px);padding:10px 13px;border:1px solid #ead49d;border-radius:16px;background:#fffaf0;box-shadow:0 8px 30px #294b4530;text-align:center}
.trial-tools>span{font-size:12px;color:#81652f;display:block;margin-bottom:7px}.trial-tools>div{display:flex;justify-content:center;gap:8px}.trial-tools button{padding:9px 11px;border-radius:9px;background:#f2e7cb;font-size:12px;min-height:36px}
.win-time{display:block;font-size:48px;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-2px;color:var(--ink)}.win-badge{display:inline-block;padding:5px 11px;border-radius:99px;background:#edf5ee;color:#327867;font-size:12px;font-weight:650}.win #win-best{margin:5px 0 9px;color:#9d7127;font-weight:650}.win #win-detail{margin:0 0 12px;font-size:12px}
.level-ranking{border-top:1px solid var(--line);margin:12px 0 18px;padding-top:9px;text-align:left}.level-ranking summary{color:#327867;font-weight:650;text-align:center}.level-ranking .rank-tabs{margin:10px 0}.level-ranking button[aria-pressed=true]{background:#327867;color:white}.level-ranking p{font-size:12px;margin:10px 0}.level-ranking ol{list-style:none;padding:0;margin:10px 0;max-height:210px;overflow:auto}.level-ranking li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:5px 8px;padding:9px 5px;border-bottom:1px solid var(--line);font-size:12px}.level-ranking li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-ranking li>small{grid-column:2/4;color:var(--muted);font-size:10px}.level-ranking li.is-me{background:#eaf4ed;border-radius:8px}.level-ranking small{font-size:10px;line-height:1.6}.level-ranking .rank-empty{display:block}

/* Optional supplies, with stable gameplay controls and a modal inventory. */
.view-shop{padding-bottom:100px!important}.shop-eyebrow{display:block;color:#8b9e8c;font-size:10px;letter-spacing:3px;margin-bottom:8px}.view-shop .view-top h1{font-size:27px}
.wallet-card{display:flex;align-items:center;gap:17px;border-radius:24px;padding:24px;background:linear-gradient(120deg,#315c49,#477963);color:#fff;box-shadow:0 10px 24px #315c4918}.paw-coin{display:grid;place-items:center;width:57px;height:57px;border-radius:50%;background:linear-gradient(145deg,#ffe8a3,#e8b953);border:4px solid #ffe4a0;box-shadow:0 4px 0 #b38a3b;color:#9b702a;font-size:34px}.wallet-card small{display:block;color:#d7e6da;font-size:11px}.wallet-card strong{font-size:35px;line-height:1.2;font-variant-numeric:tabular-nums}.wallet-caption{margin-left:auto;color:#d5e4d8;font-size:10px;text-align:right;line-height:1.9}
.shop-account-note{font-size:11px;color:#7f9289;min-height:28px;margin:12px 3px 18px;line-height:1.8}.shop-items{display:grid;gap:12px}.supply{display:grid;grid-template-columns:54px 1fr;gap:10px 14px;padding:19px;border:1px solid #e0e9e0;border-radius:22px;background:#fff}.supply-icon{display:grid;place-items:center;width:54px;height:58px;border-radius:17px;background:#fff4d9;color:#be934b}.supply.brush .supply-icon{background:#edf2fb;color:#7c8ea7}.supply-icon svg{width:32px;height:32px}.supply h2{font-size:17px;margin:0 0 5px}.supply p{font-size:12px;line-height:1.7;color:#819188;margin:0}.supply-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:3px}.supply-foot small{color:#799281;font-size:12px}.supply-foot button{min-height:39px;border-radius:12px;padding:9px 17px;background:#eef5ed;color:#365c49;font-size:13px;font-weight:650}.supply-foot button:disabled{opacity:.5}.supply-foot button:not(:disabled):hover{background:#e0ecdd}
.reward-rules{margin-top:25px;padding:19px 21px;background:#edf3eb;border-radius:20px}.reward-rules h2{font-size:14px;margin:0 0 15px}.reward-rules p{display:flex;justify-content:space-between;gap:8px;margin:10px 0;font-size:11px}.reward-rules b{font-weight:500;color:#79907e}.reward-rules span{color:#547461}.reward-rules small{display:block;color:#8b9a8b;font-size:10px;line-height:1.9;margin-top:16px}
.bag-button{position:relative;margin-left:auto}.bag-button svg{width:24px;height:24px}.bag-button small{position:absolute;right:-2px;top:-2px;border-radius:12px;background:#d9b267;color:#fff;min-width:17px;font-size:10px;line-height:17px}.bag-dialog{max-width:400px}.bag-dialog .dialog-heading{margin-bottom:15px}.bag-dialog .supply{padding:15px}.bag-dialog #bag-shop{width:100%;margin-top:13px}.bag-free-note{display:block;text-align:center;font-size:10px;color:#8d9b91;margin-top:12px}.bag-dialog[aria-busy="true"]{cursor:progress}.win-reward{border-radius:14px;padding:12px;margin:0 0 15px;background:#fff4d6;color:#89682f;font-size:13px;line-height:1.8}.win-reward b{font-size:20px}.win-reward:empty{display:none}
@media(max-width:380px){.game-header{gap:6px}.game-header .heading{min-width:0}.bag-button{width:34px;height:34px}.supply{padding:15px;gap:10px}.wallet-card{padding:20px}.view-shop .view-top h1{font-size:24px}}

.game-header{grid-template-columns:40px minmax(0,1fr) 40px 40px;gap:8px}.game-header .round-button{width:40px;height:40px}.game-header .heading p{font-size:10px}.cell.item-flash{outline:3px solid #ffdd86;outline-offset:-3px;filter:brightness(1.12)}
@media(max-width:380px){.game-header{grid-template-columns:34px minmax(0,1fr) 34px 34px;gap:6px}.game-header .round-button{width:34px;height:34px;font-size:12px}.game-header .heading h1{font-size:22px}}

/* Direct item shortcuts share the bottom row; they never shift when counts change. */
.tool-row{grid-template-columns:repeat(5,minmax(0,1fr))}.toolbar .item-tool .tool-icon{position:relative;color:#b68b41}.toolbar #item-brush .tool-icon{color:#7d8fac}.item-count{position:absolute;right:-10px;top:-5px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:#b68b41;color:#fff;font-size:10px;line-height:1;font-weight:650;font-variant-numeric:tabular-nums;border:1px solid #fff}.toolbar #item-brush .item-count{background:#7d8fac}.toolbar .item-tool.is-empty .item-count{background:#a9b4ad}.toolbar .item-tool .btn-label{white-space:nowrap;font-size:11px}.toolbar .item-tool .tool-icon svg{display:block;width:100%;height:100%}
.game-header{grid-template-columns:40px minmax(0,1fr) 40px}
@media(max-width:380px){.game-header{grid-template-columns:34px minmax(0,1fr) 34px}.tool-row{gap:2px}.toolbar .item-tool .btn-label{font-size:10px}}

.rank-period{margin:0 2px 4px;color:var(--muted);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}