@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap');
:root{--ink:#403b31;--paper:#fff9df;--green:#5f8d59;--green-dark:#3f6746;--orange:#e77949;--gold:#f0c34c;--shadow:rgba(59,59,38,.18)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;overflow-x:hidden;color:var(--ink);background:linear-gradient(#b6ddd5 0 43%,#d9e8ad 43%);font-family:"ZCOOL KuaiLe","PingFang SC",sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}button,a{font:inherit;color:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:5px solid rgba(231,121,73,.48);outline-offset:3px}
.forest-paper{position:fixed;inset:auto 0 0;height:37vh;display:flex;justify-content:space-around;align-items:end;overflow:hidden;pointer-events:none;opacity:.32}.forest-paper i{width:150px;height:190px;margin-bottom:-45px;border-radius:60% 60% 25% 25%;background:#67945f}.forest-paper i:nth-child(even){width:120px;height:150px;background:#80a766}.forest-paper i::after{content:"";display:block;width:20px;height:80px;margin:130px auto 0;background:#7a5d3e}.sudoku-app{position:relative;z-index:2;width:100%;max-width:820px;width:min(100%,820px);min-height:100vh;min-height:100dvh;margin:0 auto}.sudoku-screen{display:none;min-height:100vh;min-height:100dvh;padding:20px 38px;padding-top:max(20px,env(safe-area-inset-top,0px));padding-right:max(clamp(15px,5vw,38px),env(safe-area-inset-right,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px));padding-left:max(clamp(15px,5vw,38px),env(safe-area-inset-left,0px));animation:enter .45s cubic-bezier(.2,.8,.2,1)}.sudoku-screen.is-active{display:flex}
.welcome{position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center}.back-link{position:absolute;left:20px;top:22px;left:max(20px,env(safe-area-inset-left,0px));top:max(22px,env(safe-area-inset-top,0px));padding:8px 13px;border-radius:18px;color:#4e7151;background:rgba(255,255,255,.62);text-decoration:none}.puzzle-mark{width:156px;height:156px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border:8px solid #fff0b8;border-radius:33px 13px;background:#5f8d59;box-shadow:0 10px 0 rgba(52,72,44,.14),0 18px 30px var(--shadow);transform:rotate(-3deg)}.puzzle-mark span,.puzzle-mark b{display:grid;place-items:center;border-radius:15px;background:#fff8dc;font-size:45px;font-weight:400}.puzzle-mark b{color:var(--orange);font-size:42px}.kicker{margin:18px 0 5px;color:#557954;letter-spacing:.15em}.welcome h1{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:76px;font-size:clamp(58px,15vw,88px);line-height:.87;font-weight:400;text-shadow:0 4px rgba(255,255,255,.65)}.welcome h1 em{color:var(--orange);font-style:normal}.intro{font-size:20px;font-size:clamp(18px,4vw,22px);line-height:1.55}.primary-button{min-width:224px;min-height:63px;padding:9px 13px 9px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-radius:40px;color:white;background:var(--orange);box-shadow:0 8px 0 #b85736,0 14px 25px var(--shadow);font-size:22px;cursor:pointer}.primary-button b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--orange);background:white}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #b85736}.challenge-button{min-height:44px;margin-top:18px;padding:9px 17px;display:flex;align-items:center;gap:9px;border:2px solid rgba(69,99,60,.15);border-radius:21px;color:#476b4b;background:rgba(255,249,223,.75);box-shadow:0 4px 0 rgba(61,77,47,.1);cursor:pointer}.challenge-button b{padding:3px 7px;border-radius:8px;color:white;background:var(--green);font-size:12px}.quiet-button{min-height:44px;margin-top:21px;border:0;color:#527254;background:transparent;cursor:pointer}
.game{position:relative;flex-direction:column;align-items:center;padding-top:14px}.game-header{width:100%;display:flex;align-items:center;gap:8px}.circle-button{flex:0 0 44px;height:44px;border:2px solid rgba(60,73,43,.08);border-radius:50%;background:rgba(255,249,223,.94);box-shadow:0 4px 0 rgba(60,73,43,.12);font-size:20px;cursor:pointer}.progress{flex:1;display:flex;justify-content:center;gap:3px}.progress i{width:10px;width:clamp(6px,1.5vw,13px);height:9px;border-radius:8px;background:rgba(255,255,255,.6)}.progress i.done{background:var(--gold)}.progress i.current{background:var(--orange);transform:scaleY(1.25)}.remaining-chip{min-width:69px;padding:7px 9px;border-radius:20px;background:var(--paper);box-shadow:0 3px 0 rgba(60,73,43,.1);font-size:14px}.remaining-chip span{color:var(--orange)}
.task-card{width:640px;max-width:100%;width:min(100%,640px);margin:15px 0 10px;padding:10px 13px;display:flex;align-items:center;gap:11px;border-radius:23px;background:var(--paper);box-shadow:0 6px 0 rgba(68,75,43,.1),0 12px 23px var(--shadow)}.owl{font-size:44px}.task-card>div:nth-child(2){flex:1}.task-card p{margin:0;color:#70865b;font-size:13px}.task-card h2{margin:1px 0 0;font-size:24px;font-size:clamp(20px,4.5vw,27px);font-weight:400}.hint-button{min-height:44px;padding:10px 12px;border:0;border-radius:16px;color:#735d35;background:#ffe39a;cursor:pointer}.rule-ribbon{display:flex;align-items:center;gap:9px;margin:4px 0 12px;padding:6px 13px;border-radius:18px;color:#53694d;background:rgba(255,255,255,.57);font-size:13px}.rule-ribbon i{color:var(--gold);font-style:normal}
.sudoku-board{width:520px;height:520px;max-width:80vw;max-height:80vw;width:min(80vw,520px);height:min(80vw,520px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));overflow:hidden;border:9px solid var(--green-dark);border-radius:28px 10px 28px 10px;background:var(--green-dark);box-shadow:0 11px 0 #314e38,0 20px 35px rgba(43,61,39,.25)}.sudoku-cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;margin:0;-webkit-appearance:none;appearance:none;line-height:1;border:2px solid #9abb80;background:#fff8df;font-size:68px;font-size:clamp(45px,10vw,78px);cursor:pointer}.sudoku-cell:nth-child(4n+2){border-right-width:6px;border-right-color:var(--green-dark)}.sudoku-cell:nth-child(n+5):nth-child(-n+8){border-bottom-width:6px;border-bottom-color:var(--green-dark)}.sudoku-cell.given{background:#e6edbf;cursor:default}.sudoku-cell.empty::after{content:"?";color:#b5b491;font-size:.48em;opacity:.55}.sudoku-cell.selected{z-index:2;background:#fff0a5;box-shadow:inset 0 0 0 6px var(--gold)}.sudoku-cell.peer{background:#eef2cc}.sudoku-cell.wrong{animation:shake .4s;background:#ffe0cf}.sudoku-cell.correct{animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.choose-label{margin:17px 0 9px;color:#4d674c}.animal-tray{width:570px;max-width:100%;width:min(100%,570px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.animal-button{min-width:0;width:100%;min-height:90px;border:5px solid rgba(255,255,255,.76);border-radius:25px 10px;background:rgba(255,249,223,.9);box-shadow:0 7px 0 rgba(65,75,44,.13),0 12px 20px var(--shadow);font-size:55px;cursor:pointer;transition:.15s}.animal-button.selected{transform:translateY(-5px);border-color:var(--gold);background:#fff1aa}.animal-button:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(65,75,44,.13)}.feedback{min-height:39px;margin:17px 0 10px;padding:8px 16px;border-radius:20px;color:#466247;background:rgba(255,255,255,.65);text-align:center}.feedback.good{color:#267043;background:#e5f3c8}.feedback.notice{color:#9c5b34;background:#fff0bd}
.level-overlay{position:fixed;z-index:20;inset:0;display:none;place-items:center;padding:20px;background:rgba(39,61,42,.54);backdrop-filter:blur(6px);overscroll-behavior:contain}.level-overlay.show{display:grid}.result-card{width:400px;max-width:92vw;width:min(92vw,400px);padding:26px;display:flex;flex-direction:column;align-items:center;border:7px solid #f2dda1;border-radius:38px 16px;background:var(--paper);box-shadow:0 18px 0 rgba(39,57,38,.15),0 25px 55px rgba(33,47,31,.3);text-align:center}.result-stars{color:var(--gold);font-size:25px}.result-grid{width:130px;height:130px;padding:7px;display:grid;grid-template-columns:1fr 1fr;gap:5px;border:6px solid var(--green);border-radius:25px 9px;background:var(--green)}.result-grid span{display:grid;place-items:center;border-radius:10px;background:#fff8dc;font-size:37px}.result-card h2{margin:9px 0 3px;font-family:"Ma Shan Zheng",cursive;font-size:48px;font-weight:400;color:var(--orange)}.result-card p{font-size:18px}.finish{flex-direction:column;align-items:center;justify-content:center;text-align:center}.finish h2{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:68px;font-size:clamp(52px,13vw,78px);font-weight:400;color:var(--orange);text-shadow:0 4px white}.finish-medal{font-size:100px;animation:pop .7s cubic-bezier(.2,1.5,.4,1)}.finish>p:not(.kicker){font-size:20px}.badge{margin:8px 0 25px;padding:12px 22px;display:flex;align-items:center;gap:10px;border:3px dashed #d1a641;border-radius:23px;background:var(--paper);transform:rotate(-2deg)}.badge span{font-size:52px}.badge strong{font-size:18px;font-weight:400}.finish-link{margin-top:22px;color:#476b4b;text-decoration:none}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}@keyframes shake{25%{transform:translateX(-7px)}60%{transform:translateX(7px)}}@keyframes pop{from{transform:scale(.45)}}
@media(min-width:571px) and (max-width:900px) and (orientation:portrait){.animal-tray{width:520px;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.animal-button{min-height:82px;font-size:50px}}
@media(min-width:700px) and (max-height:820px){.sudoku-app{width:100%;max-width:1050px;width:min(100%,1050px)}.sudoku-screen.game.is-active{display:grid;grid-template-columns:minmax(420px,520px) minmax(260px,1fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:22px;align-content:start;align-items:start;padding-top:10px;padding-bottom:10px;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}.game-header{grid-column:1/-1}.sudoku-board{grid-column:1;grid-row:2/7;align-self:center;justify-self:center;width:460px;height:460px;max-width:62vh;max-height:62vh;width:min(62vh,500px);height:min(62vh,500px);margin-top:12px}.task-card{grid-column:2;grid-row:2;width:100%;margin:12px 0 8px}.rule-ribbon{grid-column:2;grid-row:3;justify-content:center;flex-wrap:wrap;margin:2px 0 7px}.choose-label{grid-column:2;grid-row:4;margin:8px 0;text-align:center}.animal-tray{grid-column:2;grid-row:5;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.animal-button{min-height:78px;font-size:45px}.feedback{grid-column:2;grid-row:6;width:100%;margin:11px 0 0}.level-overlay{grid-column:1/-1}}
@media(max-width:570px){.sudoku-screen{padding-left:10px;padding-right:10px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}.sudoku-board{width:94vw;height:94vw;max-width:500px;max-height:500px;width:min(94vw,500px);height:min(94vw,500px);border-width:6px}.sudoku-cell{border-width:1px}.animal-tray{gap:6px}.animal-button{min-height:75px;border-radius:19px 8px;font-size:44px}.rule-ribbon{gap:5px;padding:5px 8px;font-size:11px}.progress i{width:5px}.game-header{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
