@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#293d28;--muted:#73806a;--green:#42613a;--lime:#cee989;--paper:#f4f5eb}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 55% 44%,#e3e9ce 0%,#f3f4e9 63%);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #789c38;outline-offset:5px}header{height:103px;max-width:1420px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #324b2614}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:800 25px Manrope,sans-serif;letter-spacing:-1px}.brand-light{font-weight:400}.brand-icon{display:grid;place-items:center;background:var(--ink);color:#ddedb8;width:39px;height:39px;border-radius:13px;font-size:25px}.header-note{font-size:11px;letter-spacing:2.5px;color:#6c7963}.header-actions{display:flex;gap:10px}.icon-button{height:40px;min-width:40px;border:1px solid #34482925;border-radius:50%;background:transparent;font-size:20px}.icon-button:first-child{border-radius:22px;padding:0 13px}.icon-button span{font-size:12px;margin-left:7px}main{max-width:1140px;margin:38px auto 28px;display:grid;grid-template-columns:270px minmax(260px,360px) 210px;gap:65px;align-items:start;padding:0 20px}.intro{padding-top:44px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700}h1{font:500 75px/.99 Manrope,sans-serif;letter-spacing:-5px;margin:25px 0 24px}h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-4px;color:#668849}p{font-size:15px;line-height:1.75;color:var(--muted)}.blend-card{margin-top:37px;padding:24px 20px 18px;background:#e3e9d4;border:1px solid #34482910;border-radius:16px}.blend-card h2{font-size:22px;font-weight:500;letter-spacing:-.7px;margin:16px 0 10px}.blend-line{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}#level{font-size:21px;color:var(--green)}.progress-track{height:4px;background:#bdc9a9;border-radius:5px;margin:16px 0 10px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:#58773c;transition:width .4s}.blend-foot{display:flex;justify-content:space-between;font-size:10px;color:#6b785a}.how{display:grid;grid-template-columns:22px auto;gap:12px 9px;margin-top:28px;align-items:center;font-size:12px;color:#66765d}.small-circle{border:1px solid #abb99a;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:10px}.aside-footer{font-size:8px;letter-spacing:1.1px;color:#879078;margin-top:42px;display:flex;align-items:center;justify-content:space-between}.aside-footer span{font-size:22px}.board-top{display:flex;justify-content:space-between;align-items:center;margin:0 9px 12px;font-size:10px;letter-spacing:1.7px;color:#6e7c61}.board-top i{display:inline-block;width:6px;height:6px;background:#849f5c;border-radius:50%;margin-right:5px}.board-top button{border:0;background:transparent;font-size:19px;padding:0 8px;height:28px}.board-shell{position:relative;aspect-ratio:10/18;isolation:isolate;border-radius:22px;background:#e5ebd9;border:1px solid #afbf9955;box-shadow:0 15px 45px #43582c15,inset 0 0 0 7px #ffffff55;overflow:hidden}#game{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;background:#eaf0dfbf;backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:3}.overlay[hidden]{display:none}.overlay-mark{width:70px;height:70px;border-radius:24px;background:#567a3a;box-shadow:inset 0 3px 8px #b3d77b,inset 0 -7px 10px #29471f50,0 14px 20px #3d5d2820;color:#e5f2ba;display:grid;place-items:center;font:500 49px Georgia;margin-bottom:28px}.overlay .eyebrow{color:#6b8457;font-size:9px}.overlay h2{font:500 40px/1.07 Manrope,sans-serif;letter-spacing:-2px;margin:20px 0 6px}.overlay p{font-size:13px;line-height:1.7}.primary{border:0;background:#304b2c;color:#f0f7df;padding:17px 23px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 7px 14px #243b2420}.overlay .primary{width:83%;margin-top:20px;display:flex;justify-content:space-between}.primary:hover{background:#496d37}.overlay-hint{font-size:9px;margin-top:20px;color:#7c8970}.touch-controls{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:8px;margin-top:14px}.touch-controls button{height:47px;border:1px solid #aaba9566;border-radius:11px;background:#f7f8efaa;box-shadow:0 3px 0 #c6cfb755;font-size:25px}.touch-controls button:active{transform:translateY(2px);box-shadow:none;background:#dbe5c7}.touch-controls .drop-button{background:#3c5732;color:#f2f7e8;font-size:13px;display:flex;align-items:center;justify-content:space-evenly}.drop-button span{font-size:20px}.keyboard-hint{display:flex;justify-content:center;gap:15px;font-size:9px;color:#8a937f;margin-top:15px}kbd{font:9px 'DM Sans',sans-serif;background:#e8ebdf;border:1px solid #cfd6c3;border-radius:3px;padding:2px 4px;margin-right:3px}.score-panel{padding-top:48px}.score-block{border-bottom:1px solid #cfd7c2;padding-bottom:27px}#score{font:500 52px Manrope,sans-serif;letter-spacing:-3px;margin:8px 0 8px;font-variant-numeric:tabular-nums}.best{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#8a957d}.best b{color:#506642}.next-card{margin-top:26px;background:#fafbf366;border:1px solid #bdcaa455;border-radius:15px;padding:17px}.card-title{display:flex;justify-content:space-between;align-items:center}.card-title>span:last-child{color:#8ca76c}#next{display:block;width:100%;height:auto;margin-top:4px}.session-stats{margin-top:23px;display:grid;gap:17px}.session-stats div{display:flex;justify-content:space-between;font-size:12px;color:#7b876d}.session-stats b{color:#435b33;font-weight:500}.quote{font:22px/1.4 Georgia,serif;margin-top:29px;color:#7a8a66}.quote>span{display:block;font-size:39px;line-height:.8;color:#a5b58d}.quote em{color:#4a6739}.text-button{border:0;background:transparent;color:#7c8a6b;padding:0;margin-top:26px;font-size:11px}footer{max-width:1300px;margin:auto;padding:18px 35px 25px;border-top:1px solid #324b2614;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.7px;color:#97a08b}footer i{font-style:normal;margin-left:12px;font-size:17px}.mobile-stats{display:none}#toast{position:absolute;left:0;right:0;top:42%;text-align:center;font:800 30px Manrope,sans-serif;color:#faffdd;text-shadow:0 2px 10px #264223;pointer-events:none;opacity:0;z-index:2;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translateY(-15px)}dialog{border:1px solid #bac7a3;border-radius:24px;max-width:440px;width:calc(100% - 32px);padding:35px;background:#f5f7ec;color:var(--ink);box-shadow:0 30px 100px #162c2455}dialog::backdrop{background:#24382177;backdrop-filter:blur(6px)}dialog h2{font:500 31px Manrope;letter-spacing:-1.5px}dialog p{font-size:14px}dialog dl{display:grid;grid-template-columns:90px auto;gap:12px;font-size:13px}dialog dd{margin:0;color:#77846a}.help-small{font-size:12px!important}.close{position:absolute;right:15px;top:13px;border:0;background:transparent;font-size:25px}dialog .primary{width:100%;margin-top:12px}@media(min-width:900px) and (max-height:850px){main{grid-template-columns:250px 300px 190px;gap:55px;margin-top:22px;max-width:960px}header{height:76px}.intro,.score-panel{padding-top:30px}h1{font-size:63px}.blend-card{margin-top:23px}.aside-footer{margin-top:24px}.board-shell{border-radius:18px}.quote{margin-top:20px}.overlay h2{font-size:35px}footer{padding-top:12px}}@media(max-width:980px){main{gap:30px;grid-template-columns:220px minmax(250px,330px) 170px}.intro h1{font-size:63px}.header-note{display:none}}@media(max-width:790px){header{height:70px;padding:0 22px}main{display:block;max-width:390px;margin:18px auto 20px;padding:0 18px}.intro,.score-panel,footer,.keyboard-hint{display:none}.brand{font-size:21px}.brand-icon{width:32px;height:32px;font-size:23px;border-radius:10px}.header-actions{gap:8px}.icon-button{height:35px;min-width:35px}.mobile-stats{display:flex;justify-content:space-between;margin:0 5px 17px;color:#7e8a70;font-size:9px;letter-spacing:1.3px}.mobile-stats b{display:block;font:600 24px Manrope;color:#30492a;margin-top:3px;letter-spacing:-1px}.mobile-stats div:last-child{text-align:right}.board-top{margin-bottom:8px}.board-shell{max-height:calc(100svh - 255px);min-height:330px;width:auto;aspect-ratio:10/18;margin:auto}.game-area{width:100%}.touch-controls{max-width:350px;margin:14px auto 0}.overlay-mark{width:56px;height:56px;font-size:39px;margin-bottom:20px}.overlay h2{font-size:34px}.overlay-hint{font-size:8px}.overlay .primary{margin-top:12px}.overlay .eyebrow{font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}} 

/* Keep the complete play surface inside the phone's safe viewport. */
.board-actions{display:flex;align-items:center;gap:8px}#mobile-restart{display:none}
html{min-width:280px}body{overscroll-behavior-y:none}canvas,.touch-controls{-webkit-user-select:none;user-select:none}.touch-controls button{touch-action:none}#mobile-next{display:block;width:66px;height:38px;margin-top:0}.mobile-next-wrap{min-width:66px}dialog{max-height:calc(100svh - 32px);overflow-y:auto}
@media(max-width:790px){
header{height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
main{margin:10px auto 0;padding:0 14px calc(12px + env(safe-area-inset-bottom));max-width:410px}.mobile-stats{margin-bottom:6px}.mobile-stats b{font-size:22px}.board-top{margin-bottom:4px;height:38px}.board-top button{min-width:44px;height:44px}.board-actions{gap:2px}#mobile-restart{display:inline-block}.icon-button{min-width:44px;height:44px}
.board-shell{width:min(100%,calc((100svh - 247px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*0.555556));height:auto;min-height:0;max-height:none;aspect-ratio:10/18;border-radius:16px}.touch-controls{margin-top:10px;gap:8px}.touch-controls button{height:48px;min-width:44px}.overlay{padding:12px}.overlay-mark{width:49px;height:49px;font-size:34px;margin-bottom:15px}.overlay h2{font-size:clamp(24px,8vw,34px);margin:12px 0 3px}.overlay p{font-size:12px;margin:7px 0}.overlay .primary{padding:14px 16px;margin-top:10px;width:90%;min-height:44px}.overlay-hint{margin-top:13px;font-size:8px}
}
@media(max-width:790px) and (max-height:680px){.overlay-mark{display:none}.overlay-hint{display:none}.overlay h2{font-size:27px}.overlay .eyebrow{font-size:8px}.board-shell{width:min(100%,calc((100svh - 232px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*0.555556))}header{height:calc(53px + env(safe-area-inset-top))}.mobile-stats{margin-bottom:0}}
@media(orientation:landscape) and (max-height:500px){
header{height:53px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}.header-note,.intro,.score-panel,footer,.keyboard-hint{display:none}main{display:block;max-width:590px;margin:8px auto 0;padding:0 16px max(8px,env(safe-area-inset-bottom))}.game-area{display:grid;grid-template-columns:auto 220px;grid-template-rows:60px 45px auto;gap:10px 28px;align-items:start;justify-content:center}.board-shell{grid-column:1;grid-row:1/4;width:calc((100svh - 80px - env(safe-area-inset-bottom))*0.555556);height:auto;min-height:0;max-height:none;aspect-ratio:10/18}.mobile-stats{display:flex;grid-column:2;grid-row:1;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#73806a;margin:0}.mobile-stats b{display:block;font-size:23px;font-weight:600;margin-top:3px;color:#293d28}.board-top{grid-column:2;grid-row:2;margin:0;letter-spacing:1px}.board-top button{height:44px;min-width:44px}#mobile-restart{display:inline-block}.touch-controls{grid-column:2;grid-row:3;grid-template-columns:repeat(3,1fr);width:220px;margin:0}.touch-controls .drop-button{grid-column:1/4}.touch-controls button{height:48px}.overlay-mark,.overlay-hint{display:none}.overlay{padding:10px}.overlay h2{font-size:25px;margin:10px 0}.overlay p{font-size:10px}.overlay .eyebrow{font-size:7px}.overlay .primary{font-size:12px;min-height:44px;padding:12px;margin-top:8px;width:95%}}

.sound-choices{border:0;padding:0;margin:24px 0;display:flex;gap:8px;flex-wrap:wrap}.sound-choices legend{font-size:14px;margin-bottom:12px;color:#516544}.sound-choices label{padding:11px 10px;background:#e7edd9;border-radius:9px;display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer}.sound-choices input{accent-color:#42613a}.audio-range{display:block;margin:23px 0}.audio-range span{display:flex;justify-content:space-between;font-size:14px;margin-bottom:9px}.audio-range output{font-size:12px;color:#6c7e58}.audio-range input{width:100%;height:24px;accent-color:#587a3e;cursor:pointer}.header-actions{gap:7px}.sound-choices:has(input:focus-visible){outline:2px solid #71954b;outline-offset:6px}
@media(max-width:390px){header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.brand{font-size:20px;gap:8px}.header-actions{gap:4px}#sound-state{display:none}.header-actions .icon-button:first-child{padding:0;min-width:44px}}

.touch-controls{grid-template-columns:1fr 1fr 1.6fr}
@media(orientation:landscape) and (max-height:500px){.touch-controls{grid-template-columns:repeat(2,1fr)}.touch-controls .drop-button{grid-column:1/3}}