:root{color-scheme:light;--ink:#283e3a;--muted:#78817a;--paper:#faf8ef;--green:#527e70;--red:#b96854;--line:#d8ded1}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#f3f2e8;background-image:radial-gradient(ellipse at 10% 20%,#dce7dc80,transparent 45%),radial-gradient(ellipse at 95% 80%,#e2d8bf55,transparent 50%);min-height:100vh}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#ffffff70;padding:10px 18px;transition:background .15s,transform .15s}button:hover{background:#e8eee4}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bc885c;outline-offset:3px}a{color:inherit;text-decoration:none}header{max-width:1220px;margin:auto;padding:30px 44px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:13px;align-items:center;font-size:28px;letter-spacing:5px;font-family:serif}.brand small{display:block;font-family:sans-serif;font-size:10px;letter-spacing:3px;color:var(--muted);margin-top:6px}.seal{background:#af624f;color:#fff7e7;padding:7px 9px;font-size:24px;border-radius:5px 2px 7px 2px;transform:rotate(-5deg)}nav{display:flex;align-items:center;gap:25px;font-size:14px}nav button{border:0;background:none;padding:8px}main{max-width:1100px;margin:0 auto;padding:15px 30px 40px}#home{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;min-height:68vh}.eyebrow{color:#7c947e;font-size:12px;letter-spacing:4px;margin:20px 0}h1,h2{font-family:"STKaiti","KaiTi",serif;font-weight:500}h1{font-size:44px;line-height:1.6;margin:10px 0 18px}h2{margin:0 0 8px;font-size:26px}.subtitle{font-size:14px;line-height:2.2;color:var(--muted)}.sample{display:flex;align-items:center;gap:12px;margin-top:10px;color:#729385;font-size:35px}.sample img{width:115px;height:115px;object-fit:contain}.mode{width:100%;display:flex;align-items:center;text-align:left;gap:22px;padding:26px 24px;margin:18px 0;background:#fffdf4b0;border:1px solid #dbe1d2;box-shadow:0 8px 25px #415b3f05;border-radius:3px 18px 4px 18px}.mode:hover{transform:translateY(-3px)}.mode div{flex:1}.mode h2{font-size:25px;letter-spacing:3px}.mode p{margin:0;color:var(--muted);font-size:12px;letter-spacing:1px}.mode-number{font-family:serif;font-size:33px;color:#8c9c83}.rule{font-size:11px;color:var(--muted);text-align:center;line-height:2}.paper{background:#fffdf5cc;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 10px 40px #3e523807}.back{border:0;background:none;padding:8px 0;font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}label{display:flex;flex-direction:column;gap:12px;font-size:14px}select,input[type=number],textarea{font:inherit;padding:12px;background:#f7f7ed;border:1px solid var(--line);border-radius:5px;color:var(--ink);width:100%}input[type=range]{width:100%;accent-color:var(--green)}label small,.muted{font-size:12px;line-height:1.9;color:var(--muted)}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#3d695b}.secondary{background:#e2e9dc}.paper .primary{margin-top:15px}#race-import{margin-top:22px}textarea{min-height:100px;resize:vertical;margin:12px 0}#levels{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}#levels button{padding:14px 3px;background:#fffdf3}.level-stars{display:block;font-size:12px;color:#bd9556;margin-top:8px;letter-spacing:2px}.game-top{display:flex;align-items:center;gap:18px;margin-bottom:12px}.game-top>span{margin-left:auto;font-size:13px;color:var(--muted)}.stats{display:flex;align-items:center;justify-content:space-around;padding:15px 10px;max-width:760px;margin:auto}.stats small{font-size:11px;display:block;color:var(--muted);margin-bottom:5px}.stats strong{font:25px Georgia,serif;font-variant-numeric:tabular-nums}.stats button{font-size:13px;padding:8px 12px}.target{text-align:center;font-size:12px;color:var(--muted);min-height:18px;line-height:1.7}#board-wrap{position:relative;max-width:760px;margin:auto;background:#e9ebdf85;border-radius:16px;border:1px solid #d5ddcf;padding:clamp(15px,3.4vw,32px);overflow:hidden;box-shadow:inset 0 0 35px #88937a12}#board{display:grid;gap:clamp(3px,.7vw,7px)}.tile{position:relative;padding:0;min-width:0;aspect-ratio:1;border:1px solid #d9dfd0;border-radius:7px;background:#fffdf7e6;box-shadow:0 2px 2px #47614309;display:grid;place-items:center;transition:opacity .15s,background .15s}.tile img{width:98%;height:98%;object-fit:contain;pointer-events:none;user-select:none}.tile.selected{border-color:#658676;background:#dbe8d7;box-shadow:0 0 0 2px #7d9b7b}.tile.hinted{animation:hint 1s 2}.tile.empty{visibility:hidden}.tile.wrong{background:#edd4c8}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#ink{z-index:2}#effects{z-index:3}#veil{position:absolute;inset:0;z-index:4;background:#edf0e8;display:grid;place-items:center;text-align:center;padding:20px}#veil p{font-size:13px;color:var(--muted)}.tools{max-width:760px;margin:18px auto;display:flex;gap:12px;align-items:center}.tools button{font-size:12px}.tools span{font-size:11px;color:var(--muted);margin-left:auto}footer{text-align:center;color:#9ca497;font-size:10px;letter-spacing:4px;padding:15px}dialog{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:32px;max-width:460px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 100px #15282035}dialog::backdrop{background:#233d3655;backdrop-filter:blur(4px)}dialog p{line-height:1.9;font-size:14px}.switch{flex-direction:row;justify-content:space-between;align-items:center;margin:25px 0}.switch small{display:block;margin-top:5px}.switch input{width:22px;height:22px;accent-color:var(--green)}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}#stars{font-size:38px;color:#bc9454;letter-spacing:10px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#334b42ee;color:#fff;padding:12px 20px;border-radius:8px;font-size:13px;max-width:90vw;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}[hidden]{display:none!important}@keyframes hint{50%{background:#c4dbc1;box-shadow:0 0 0 3px #88a884}}@media(max-width:700px){header{padding:20px}main{padding:8px 14px 25px}#home{grid-template-columns:1fr;gap:5px;min-height:0}.intro{text-align:center}h1{font-size:32px}.sample{justify-content:center}.sample img{width:78px;height:78px}.mode{margin:12px 0;padding:20px}.subtitle{font-size:12px}.eyebrow{margin:12px 0}.form-grid{grid-template-columns:1fr;gap:20px}#levels{grid-template-columns:repeat(5,1fr);gap:8px}.paper{padding:18px}.tools{flex-wrap:wrap;gap:8px}.tools span{width:100%;text-align:center;margin:0}.tile{border-radius:4px}#copy-code{font-size:11px;padding:8px}.game-top{gap:12px}.game-top>span{font-size:11px}.brand{font-size:23px}nav{gap:14px}}

nav{white-space:nowrap}.stats>div{min-width:0}.stats small{white-space:nowrap}@media(max-width:360px){.stats small{font-size:9px}.stats strong{font-size:22px}.brand small{letter-spacing:1px;font-size:8px}nav{gap:10px}.game-top{gap:8px}}

/* Desktop window: keep the complete board and controls in view. */
:root[data-desktop] header{padding:10px 24px}
:root[data-desktop] main{padding-top:5px;padding-bottom:10px}
:root[data-desktop] #board-wrap{max-width:min(760px,calc((100dvh - 300px) * var(--board-ratio,1)))}
:root[data-desktop] footer{padding:8px}

:root[data-desktop] .brand{font-size:23px}
:root[data-desktop] .brand small{font-size:9px;letter-spacing:2px}
:root[data-desktop] .seal{font-size:20px;padding:5px 7px}
:root[data-desktop] .stats{padding:9px 10px}
:root[data-desktop] .game-top{margin-bottom:6px}
:root[data-desktop] .target{margin:8px 0}
:root[data-desktop] .tools{margin:10px auto}

#atlas-panel{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:100;background:var(--paper)}body.atlas-open{overflow:hidden}body.atlas-open>header,body.atlas-open>main,body.atlas-open>footer{visibility:hidden}

#settings-dialog{width:min(460px,calc(100vw - 28px));max-height:90dvh;overflow-y:auto}
.audio-settings{border:0;border-top:1px solid #d9decc;margin:18px 0 12px;padding:12px 0 0;min-width:0}.audio-settings legend{font-size:16px;padding:0 8px;color:#4e705e}.audio-switch{display:flex;justify-content:space-between;align-items:center;margin:13px 0 7px;gap:18px}.audio-switch small{display:block;font-size:11px;color:#7f8b76;font-weight:normal}.audio-volume{display:block;margin:7px 0 14px;font-size:12px;color:#6f7f6c}.audio-volume span{display:flex;justify-content:space-between}.audio-volume input{display:block;width:100%;margin:7px 0;accent-color:#63856b}.audio-switch input{accent-color:#63856b;width:19px;height:19px}.audio-caption{font-size:11px!important;line-height:1.7}.audio-settings button{font-size:12px}.audio-volume input:disabled{opacity:.45}
.audio-switch{flex-direction:row;gap:14px}.audio-settings{margin-top:14px}.audio-volume{gap:5px}.audio-switch small{margin-top:3px}

/* Browser layout: preserve desktop composition and fit touch screens. */
@media(min-width:701px){header{padding:18px 30px}#board-wrap{max-width:min(760px,max(300px,calc((100dvh - 335px)*var(--board-ratio,1))))}.stats{padding:11px 10px}.game-top{margin-bottom:8px}.tools{margin:12px auto}footer{padding:9px}}
@media(max-width:700px){#board-wrap{max-width:min(760px,calc((100dvh - 310px)*var(--board-ratio,1)));padding:15px}dialog{padding:22px}#settings-dialog{max-height:88dvh}}