*{box-sizing:border-box}body{margin:0;background:#0c2229;color:#e9f8e7;font-family:system-ui,"Microsoft YaHei",sans-serif;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}header{display:flex;align-items:center;gap:12px;padding:12px 22px;background:#102c32}header div:first-child{margin-right:auto}small{font-size:10px;letter-spacing:2px;color:#9cbeb2}b{display:block;font-size:21px;letter-spacing:3px}button{border:1px solid #54796e;border-radius:13px;background:#254a4b;color:#f2ffe9;min-height:44px;padding:8px 16px;font:inherit;cursor:pointer;touch-action:none}button:active{background:#547f65}#stats{font-size:13px;font-variant-numeric:tabular-nums}main{position:relative;flex:1;min-height:0;overflow:hidden}canvas{display:block;width:100%;height:100%}#hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;background:#102c32bb;border:1px solid #47665b;padding:8px 15px;border-radius:30px;pointer-events:none}footer{height:98px;display:flex;justify-content:space-between;align-items:center;padding:10px 24px;background:#102c32;gap:18px}footer div{display:flex;gap:12px}footer button{height:62px;min-width:66px;font-size:22px}footer>button{background:#b6d184;color:#183634;min-width:100px}footer span{text-align:center;color:#c1d2bc;font-size:12px}#modal{position:absolute;inset:0;background:#061a25aa;display:grid;place-items:center;backdrop-filter:blur(5px);padding:14px}#modal.hidden{display:none}section{max-width:430px;text-align:center;border:1px solid #688579;background:linear-gradient(145deg,#244c4c,#132c35);border-radius:24px;padding:26px 32px;box-shadow:0 20px 80px #001b}h1{font-size:42px;letter-spacing:6px;margin:14px 0}p{line-height:1.9;color:#c4d7cd;font-size:14px}#start{background:#cbe49c;color:#183b32;min-width:200px;font-weight:bold}.note{font-size:12px}#record{font-size:12px;color:#cbe49c}@media(max-width:420px){header{padding:8px 12px;gap:7px}b{font-size:17px}header small{font-size:8px;letter-spacing:1px}#stats{font-size:11px}header button{padding:8px 11px}footer{padding:10px 15px}footer span{display:none}h1{font-size:32px}}@media(max-height:480px){header{padding:5px 16px}header small{display:none}b{font-size:17px}footer{height:66px;padding:4px 24px}footer button{height:52px}section{padding:12px 28px;max-width:580px}h1{font-size:26px;margin:4px}p{margin:6px}.note{display:none}#hint{top:8px;padding:5px 12px}}
header button{flex-shrink:0;white-space:nowrap}#stats{white-space:nowrap}header div:first-child{min-width:0}@media(max-width:360px){header small{display:none}header{gap:5px}b{font-size:15px;letter-spacing:1px}}

.extra{display:block;margin:8px auto;font-size:12px;min-height:44px}#modal section{max-height:95%;overflow:auto}#stats{font-size:11px} #hint{max-width:95%;white-space:normal;text-align:center}
/* Art pass: soft forest colors and tactile touch controls. */
body{background:#e3efda;color:#254953}header{background:#f3f3df;border-bottom:2px solid #bbd6b7}header small{color:#648e7b}b{color:#2b615f}button{background:#d6e9cc;border:2px solid #8fb7a4;color:#315e5d;border-radius:16px;box-shadow:0 3px 0 #7ba18b44}button:active{background:#bdddb7;transform:translateY(2px)}#stats{color:#345e61;font-weight:650}footer{background:#e9f0d9;border-top:2px solid #b6d4b4}footer span,footer small{color:#567f70}footer button{background:#cce2c2;border-color:#8eb5a0}footer>button{background:#f5d484;border-color:#c0a36b;color:#3b6157}#hint{color:#325d5c;background:#f2efcfed;border:2px solid #a3c9ab;box-shadow:0 3px 12px #245b6d1a;font-weight:550}#modal{background:#21475e66;backdrop-filter:blur(7px)}#modal section{background:linear-gradient(145deg,#fff4d8,#e2efce);border:3px solid #a6c7a0;box-shadow:0 15px 45px #1d4c6233;border-radius:28px}#modal small{color:#618876}#modal h1{color:#2c6865;letter-spacing:4px}#modal p{color:#51796a}#start{background:#edc77b;color:#35594e;border-color:#c1a775;box-shadow:0 3px 0 #ab976055}#record{color:#638675}.extra{background:#d4e5bd;color:#416d5b;border:1px solid #9fbc91;box-shadow:0 2px 0 #789b7733;min-height:44px}button:focus-visible{outline:3px solid #658eaf;outline-offset:3px}@media(max-width:420px){header{gap:5px;padding:8px 10px}header small{display:none}header b{font-size:17px;letter-spacing:1px}#stats{font-size:10px}header button{padding:8px 10px}#hint{font-size:11px}#modal section{padding:18px 20px}#modal h1{font-size:30px}}@media(max-width:350px){header{display:grid;grid-template-columns:1fr auto auto;padding:5px 8px}header div:first-child{grid-column:1;grid-row:1}#stats{grid-column:1;grid-row:2;font-size:10px}#help{grid-column:2;grid-row:1/3}#pause{grid-column:3;grid-row:1/3}footer{padding:8px 12px;height:84px}footer button{min-width:58px;height:58px}footer>button{min-width:90px}#modal section{padding:14px 16px}.extra{margin:6px auto}#message{font-size:12px}}@media(max-height:480px){header{padding:4px 14px}footer{height:62px}footer button{height:48px}#hint{font-size:10px;top:6px;padding:4px 9px}#modal section{max-height:100%;padding:12px 24px}#modal h1{font-size:25px}.extra{display:inline-block;margin:5px;font-size:11px;padding:8px 12px}#modal p{font-size:12px;line-height:1.5}.note{display:none}}
#modal{position:fixed;inset:0;z-index:10;padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}#modal section{max-height:calc(100dvh - 28px)}@media(max-height:480px){#modal section{width:min(540px,96vw)}#modal h1{margin:2px 0 6px}#modal section>small{display:none}#message{margin:6px 0}#record{display:block;margin:5px 0}.extra{margin:4px}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#language-control{display:inline-flex;flex-shrink:0;align-items:center}#language-select{width:68px;min-height:36px;border:1px solid #8aa99a;border-radius:9px;background:#e7eedc;color:#2c5054;font:inherit;font-size:11px;padding:3px;touch-action:manipulation}#language-select option{color:#243a44;background:#f3f3e6}button{overflow-wrap:anywhere}html:not([lang=zh-CN]) h1,html:not([lang=zh-CN]) b{letter-spacing:0}html:not([lang=zh-CN]) #hint{font-size:11px}
html:not([lang=zh-CN]) #modal h1{font-size:28px}html:not([lang=zh-CN]) #stats{font-size:10px}html:not([lang=zh-CN]) .extra{max-width:100%}@media(max-width:480px){header{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px;padding:5px 8px}header div:first-child{grid-column:1;grid-row:1}#stats{grid-column:1/-1;grid-row:2;white-space:normal}#help{grid-column:2;grid-row:1}#pause{grid-column:3;grid-row:1}#language-control{grid-column:4;grid-row:1}header button{font-size:11px;padding:5px 8px}#language-select{width:59px}footer>button{font-size:17px}}@media(max-height:480px){#language-select{width:62px}#modal section{overflow:auto}#modal p{font-size:11px}.extra{font-size:11px}}