@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#254735;background:#f7f8f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #dc843b;outline-offset:5px}main{max-width:1180px;margin:auto;padding:30px 36px}.header{display:flex;justify-content:space-between;align-items:center;padding-bottom:28px;border-bottom:1px solid #dce2d4}.brand{font-size:12px;font-weight:800;letter-spacing:2px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}.brand-icon{font-size:29px;color:#68865a}.sound{background:none;border:1px solid #d4ddce;border-radius:24px;padding:8px 15px;color:#62715c;font-size:12px}.intro{display:flex;justify-content:space-between;align-items:end;margin:35px 0 28px}.eyebrow{font-size:10px;letter-spacing:2px;color:#7d8c6c;font-weight:800}h1{font-size:40px;letter-spacing:-2px;margin:8px 0 0;line-height:1.3}h1 span{font-size:14px;font-weight:500;letter-spacing:0;display:block;margin-top:10px;color:#6b7b60}.description{font-size:13px;line-height:1.9;color:#7c8572;margin-bottom:2px}.description strong{color:#d75a40}.game{background:#fff;border:1px solid #dce3d2;border-radius:22px;overflow:hidden;box-shadow:0 12px 35px #304b3010}.toolbar{padding:21px 28px;display:flex;justify-content:space-between;align-items:center}.stats{display:flex;align-items:center;gap:28px}.label{font-size:10px;color:#849078;display:block;font-weight:600;margin-bottom:3px}.stats strong{font-size:26px;line-height:1.4}.stats small{font-size:11px;color:#8a967f;font-weight:500}.divider{height:32px;width:1px;background:#e5e9de}.timer{width:155px;text-align:right}.timer strong{font-size:25px;font-variant-numeric:tabular-nums}.track{height:4px;background:#e8eddf;border-radius:10px;margin-top:7px;overflow:hidden}.track i{display:block;height:100%;width:100%;background:#6c8b50;transition:width .2s}.board-wrap{margin:0 18px;position:relative;background:#edf2e2;border:1px solid #dce6cd;border-radius:12px;overflow:hidden;touch-action:none;user-select:none}.board{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));padding:18px 14px;gap:2px;background-image:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);background-size:18px 18px}.cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.apple{width:77%;height:75%;position:relative;display:flex;align-items:center;justify-content:center;margin-top:8%;background:linear-gradient(140deg,#f5654e 0%,#ef4938 45%,#df362e 100%);border-radius:39% 42% 43% 43% / 36% 37% 58% 58%;box-shadow:inset 2px 1px 1px #ffa18a,0 3px 2px #9c4a2820;color:white;font-size:clamp(12px,2.2vw,26px);font-weight:900;text-shadow:0 1px 2px #a32d27;line-height:1;transition:transform .12s,opacity .15s}.apple:before{content:'';position:absolute;width:7%;height:19%;background:#82603b;top:-13%;left:50%;transform:rotate(21deg);border-radius:4px}.apple:after{content:'';position:absolute;width:23%;height:13%;background:#6f943f;top:-9%;left:56%;transform:rotate(-28deg);border-radius:90% 0 90% 0}.cell.picked .apple{visibility:hidden}.cell.selected .apple{transform:scale(1.08);filter:brightness(1.08)}.selection{position:absolute;border:2px solid #da9b34;background:#e8bf3b30;pointer-events:none;border-radius:0;z-index:2}.selection.valid{border-color:#2b8b58;background:#69b97035}.overlay{position:absolute;inset:0;background:#edf2e2db;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:3;text-align:center}.overlay[hidden],.selection[hidden]{display:none}.welcome{padding:20px}.big-apple{font-size:54px}.welcome h2{font-size:26px;letter-spacing:-1px;margin:10px 0}.welcome p:not(.eyebrow){color:#7a866f;font-size:13px;line-height:1.9}.primary{background:#2e563e;border:0;color:white;border-radius:9px;padding:13px 23px;font-size:13px;font-weight:700;margin-top:12px;min-width:180px;box-shadow:0 4px 8px #24453418}.primary:hover{background:#416c4d}.primary span{margin-left:30px}.game-footer{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;font-size:12px;color:#839074;min-height:60px}.reset{border:0;background:#f1f4eb;color:#536b45;border-radius:7px;padding:8px 13px;font-size:11px}.game-footer .success{color:#2d8954;font-weight:700}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:17px;color:#8b967e;font-size:10px}footer p{margin:0;line-height:1.8}footer>span{font-size:9px;letter-spacing:1px;white-space:nowrap}.tip{font-size:9px;color:#687e50;font-weight:800;margin-right:8px}@media(min-width:1500px){main{padding-top:45px}}@media(max-width:650px){main{padding:18px 10px}.header{padding:0 8px 17px}.brand{font-size:10px}.intro{margin:24px 10px 20px}.description{display:none}h1{font-size:31px}h1 span{font-size:12px}.toolbar{padding:16px}.stats{gap:15px}.stats strong{font-size:23px}.timer{width:100px}.board-wrap{margin:0 6px}.board{padding:12px 3px;gap:0}.apple{width:86%;height:79%;font-size:clamp(10px,3vw,20px)}.game{border-radius:15px}.game-footer{padding:12px;font-size:10px}.welcome h2{font-size:21px}.big-apple{font-size:32px}.welcome .eyebrow{display:none}.welcome p:not(.eyebrow){font-size:11px}.primary{padding:10px 17px;margin-top:3px}.welcome{padding:10px}footer{margin:14px 5px}footer>span{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#overlay-description{color:#7a866f;font-size:13px;line-height:1.9}
.results .welcome{display:flex;flex-direction:column;align-items:center;padding:22px}
.results .big-apple,.results .eyebrow{display:none}
.results .welcome h2{font-size:14px;letter-spacing:1px;margin:0 0 30px;text-transform:uppercase}
.result-apple{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:210px;height:190px;color:#fff;background:linear-gradient(135deg,#f5654e,#ef4938 60%,#df362e);border:3px solid #fff;border-radius:42% 42% 46% 46% / 38% 38% 60% 60%;box-shadow:0 10px 25px #c83d2a25;line-height:1}
.result-apple:before{content:'';position:absolute;width:10px;height:30px;top:-27px;left:98px;background:#785332;border-radius:5px;transform:rotate(12deg)}
.result-apple:after{content:'';position:absolute;width:42px;height:18px;top:-20px;left:112px;background:#5c912e;border-radius:100% 0 100% 0;transform:rotate(-13deg)}
.result-label{font-size:15px;font-weight:800;letter-spacing:3px;margin-top:10px}
.result-apple strong{font-size:86px;line-height:1.15;font-weight:900;letter-spacing:-4px;font-variant-numeric:tabular-nums}
.result-unit{font-size:9px;font-weight:700;letter-spacing:2px}
.result-best{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:20px 0 5px;padding:10px 15px;border:1px solid #cedcc1;border-radius:10px;background:#ffffffa6;line-height:1.3}
.result-best>span{font-size:9px;letter-spacing:1px;font-weight:800;color:#6a7c58}
.result-best strong{font-size:24px;color:#31573d;font-variant-numeric:tabular-nums}
.result-best small{font-size:10px;font-weight:500;color:#77876b}
@media(max-width:650px){.results .welcome{padding:8px}.results .welcome h2{font-size:10px;margin-bottom:16px}.result-apple{width:125px;height:110px}.result-apple:before{height:19px;width:6px;left:57px;top:-17px}.result-apple:after{width:27px;height:11px;left:64px;top:-13px}.result-label{font-size:10px;letter-spacing:2px;margin-top:4px}.result-apple strong{font-size:48px;letter-spacing:-2px}.result-unit{font-size:6px;letter-spacing:1px}.result-best{margin:7px 0 3px;padding:5px 10px;gap:17px}.result-best strong{font-size:19px}.result-best>span{font-size:8px}.results .primary{padding:7px 15px;min-width:160px;font-size:11px}}

/* Playful orchard theme. Apple colors stay soft for comfortable scanning. */
:root{font-family:'Noto Sans KR',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;color:#3b5834;background:#f6f5df}
body{background:radial-gradient(ellipse at 8% 0%,#deebc8 0,transparent 42%),radial-gradient(ellipse at 100% 80%,#e9edc8 0,transparent 44%),#faf7e8}
main{max-width:1180px;padding-top:23px;padding-bottom:28px}
.header{border:0;padding-bottom:13px}.brand{letter-spacing:1.5px;color:#63834a;font-size:11px}.brand-icon{font-size:25px}
.sound{border:2px solid #d6dfbe;background:#fffdf0;box-shadow:0 3px 0 #d6dfbe;font-weight:700;color:#6a8053;padding:8px 15px}
.sound:hover,.reset:hover{background:#f5f7df}.sound:active,.reset:active,.primary:active{transform:translateY(3px);box-shadow:none}
.intro{margin:16px 5px 25px;align-items:center}.intro .eyebrow{color:#b28c45;font-size:10px;letter-spacing:2.5px;margin-bottom:2px}
h1{font-size:52px;letter-spacing:-2.5px;font-weight:900;color:#527e3d;text-shadow:0 3px 0 #fff,0 5px 0 #d9e2b9;line-height:1.2}
h1 span{font-size:13px;letter-spacing:.3px;color:#8b956f;text-shadow:none;margin-top:13px}.description{background:#fffdf4;border:2px dashed #dddcb7;border-radius:20px;padding:13px 22px;color:#82906a;font-size:12px}.description strong{display:inline-block;background:#fae3a4;color:#93692c;border-radius:7px;padding:0 6px;font-size:16px}
.game{background:#fffdf3;border:5px solid #81a760;border-radius:30px;box-shadow:0 7px 0 #648c47,0 15px 0 #e1e6c5,0 20px 35px #64733b15;overflow:hidden}
.toolbar{background:linear-gradient(#f3f6df,#edf2d6);padding:18px 24px;gap:20px}.stats{gap:13px}.stats>div{min-width:137px;background:#fffef5;border:2px solid #dde5bf;border-radius:17px;padding:8px 17px;box-shadow:0 3px 0 #dfe7c6}.stats>div:nth-of-type(2){background:#fff3d0;border-color:#eddb9e;box-shadow:0 3px 0 #ebdda9}.divider{display:none}.label{font-size:9px;letter-spacing:1px;color:#89966f;font-weight:800}.stats strong{font-size:30px;color:#54773e;line-height:1.2;font-weight:900}.stats small{font-size:10px}.stats>div:nth-of-type(2) strong{color:#a37c34}.timer{width:155px}.timer strong{font-size:32px;font-weight:900;color:#55743e;line-height:1.2}.track{height:9px;border:2px solid #dce5bd;background:#fffef0;margin-top:6px}.track i{border-radius:10px;background:linear-gradient(90deg,#9dc764,#73ad4c)}
.board-wrap{margin:0 13px;background:#edf2df;border:3px solid #d7e2bc;border-radius:18px;box-shadow:inset 0 3px 5px #5b783b0b}.board{padding:18px 12px;background-size:24px 24px;background-image:linear-gradient(#fff4 1px,transparent 1px),linear-gradient(90deg,#fff4 1px,transparent 1px)}
.apple{box-shadow:inset 2px 1px 1px #ffa18a,0 3px 1px #a6532f22}.cell.selected .apple{filter:brightness(1.08);transform:scale(1.06)}.selection{border-width:2px;border-color:#dca042;background:#f8d05c35}.selection.valid{border-color:#469b57;background:#75bf6435}
.game-footer{padding:14px 20px;color:#7e9065;font-weight:600;font-size:11px;gap:10px}.reset{background:#fff5d5;border:2px solid #e8d8a1;border-radius:12px;box-shadow:0 3px 0 #e3d29b;color:#9b7d38;font-weight:800;padding:8px 15px;white-space:nowrap}
.overlay{background:#edf2dbd9;backdrop-filter:blur(4px)}.welcome h2{color:#52753d;font-size:29px;font-weight:900}.big-apple{display:inline-block;font-size:65px;filter:drop-shadow(0 5px 0 #cbac6433)}.welcome .eyebrow{color:#93a16f;margin-top:7px}.primary{background:linear-gradient(#92bb60,#7ba84e);border:2px solid #6e9945;border-radius:16px;box-shadow:0 5px 0 #5a8437,0 7px 10px #69893920;padding:13px 25px;color:white;text-shadow:0 1px 1px #577d36;font-size:16px;font-weight:900;min-width:200px;transition:transform .12s,box-shadow .12s}.primary:hover{background:linear-gradient(#a1c96e,#87b357)}.primary span{margin-left:20px;font-size:13px}
footer{margin:27px 8px 0;color:#939c7a}.tip{display:inline-block;background:#e9eccf;border-radius:6px;padding:1px 6px;color:#7c8f59}footer>span{letter-spacing:1.3px}
.result-best{border:2px solid #d8e1b9;background:#fff9df;border-radius:14px;box-shadow:0 3px 0 #dce3c2}.results .welcome h2{font-weight:900;color:#6d8650}.results .primary{margin-top:10px}
@media(max-width:650px){main{padding:15px 8px 24px}.header{padding:0 6px 13px}.brand{font-size:9px;letter-spacing:1px}.brand-icon{font-size:21px}.sound{font-size:10px;padding:6px 10px}.intro{margin:9px 9px 20px}h1{font-size:40px}h1 span{font-size:11px;margin-top:10px}.intro .eyebrow{font-size:8px;letter-spacing:2px}.description{display:none}.game{border-width:3px;border-radius:22px}.toolbar{padding:12px 9px;gap:8px}.stats{gap:7px}.stats>div{min-width:0;border-radius:12px;padding:7px 9px}.stats strong{font-size:23px}.stats small{font-size:8px}.label{font-size:7px;letter-spacing:.3px}.timer{width:86px}.timer strong{font-size:25px}.track{height:7px}.board-wrap{margin:0 5px;border-width:2px;border-radius:12px}.board{padding:14px 3px}.game-footer{padding:12px 9px;font-size:9px;min-height:57px}.reset{font-size:10px;padding:6px 8px;border-radius:9px}.welcome h2{font-size:21px}.big-apple{font-size:34px}.primary{font-size:12px;min-width:170px;padding:9px 18px;border-radius:12px}.results .primary{margin-top:6px}footer{margin:23px 7px 0;font-size:9px}.result-best{border-radius:10px}}

.apple.harvest-apple{position:fixed;margin:0;z-index:20;pointer-events:none;user-select:none;will-change:transform,opacity;animation:harvest-flight 390ms linear both}
/* Constant horizontal speed and a parabolic vertical path: launch, apex, fall. */
@keyframes harvest-flight{
  0%{transform:translate(0,0) scale(1.08) rotate(0deg);opacity:1}
  12.5%{transform:translate(calc(var(--fly-x) * .125),calc(var(--fly-y) * -.609375)) scale(1.13) rotate(calc(var(--fly-spin) * .125));opacity:1}
  25%{transform:translate(calc(var(--fly-x) * .25),calc(var(--fly-y) * -.9375)) scale(1.1) rotate(calc(var(--fly-spin) * .25));opacity:1}
  37.5%{transform:translate(calc(var(--fly-x) * .375),calc(var(--fly-y) * -.984375)) scale(1.05) rotate(calc(var(--fly-spin) * .375));opacity:1}
  50%{transform:translate(calc(var(--fly-x) * .5),calc(var(--fly-y) * -.75)) scale(1) rotate(calc(var(--fly-spin) * .5));opacity:1}
  62.5%{transform:translate(calc(var(--fly-x) * .625),calc(var(--fly-y) * -.234375)) scale(.92) rotate(calc(var(--fly-spin) * .625));opacity:.95}
  75%{transform:translate(calc(var(--fly-x) * .75),calc(var(--fly-y) * .5625)) scale(.82) rotate(calc(var(--fly-spin) * .75));opacity:.75}
  87.5%{transform:translate(calc(var(--fly-x) * .875),calc(var(--fly-y) * 1.640625)) scale(.68) rotate(calc(var(--fly-spin) * .875));opacity:.4}
  100%{transform:translate(var(--fly-x),calc(var(--fly-y) * 3)) scale(.5) rotate(var(--fly-spin));opacity:0}
}
@media(prefers-reduced-motion:reduce){.apple.harvest-apple{display:none;animation:none}}

.time-bar{height:20px;background:#e0e7c5;border-bottom:3px solid #d0ddb1;overflow:hidden}
.time-bar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#b3d776 0%,#91bf55 45%,#7eaf45 100%);box-shadow:inset 0 3px 0 #ffffff55;transition:width .15s linear,background .3s}
.time-bar.warning i{background:linear-gradient(180deg,#f4d87c,#e8b84d)}
.time-bar.urgent i{background:linear-gradient(180deg,#f59c7c,#e76b50)}
.toolbar{justify-content:center}.stats{width:100%;gap:14px}.stats>div{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px}.stats .label{margin:0}.stats strong{white-space:nowrap}
@media(max-width:650px){.time-bar{height:16px}.stats{gap:8px}.stats>div{padding:8px 10px;gap:5px}.stats .label{font-size:7px}.stats strong{font-size:23px}}

/* Game-over celebration: ribbon, stars, a score trophy and one arcade button. */
.overlay.results{background:radial-gradient(ellipse at 50% 46%,#fff8dbed 0%,#e8edc8e8 53%,#9cb17bc9 100%);backdrop-filter:blur(5px)}
.results .welcome{position:relative;isolation:isolate;width:390px;max-width:95%;padding:25px 25px 27px}
.results .welcome:before{content:'';position:absolute;inset:6% -20%;z-index:-1;background:repeating-conic-gradient(from -8deg,#fff8d73b 0deg 13deg,transparent 13deg 30deg);border-radius:50%;mask-image:radial-gradient(ellipse,#000 10%,transparent 70%);pointer-events:none}
.results .welcome h2{position:relative;z-index:2;background:linear-gradient(#90b85c,#648e39);border:3px solid #f5f6c9;color:#fffde3;border-radius:8px;box-shadow:0 5px 0 #4e7133,0 8px 15px #54683128;text-shadow:0 2px 0 #4d7432;font-size:19px;letter-spacing:1px;transform:rotate(-3deg);padding:12px 23px;margin:0 0 12px;white-space:nowrap}
.results .welcome h2:before,.results .welcome h2:after{content:'';position:absolute;top:9px;width:23px;height:100%;background:#638a3d;z-index:-1;border-bottom:3px solid #4f7133}
.results .welcome h2:before{left:-20px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,28% 50%)}
.results .welcome h2:after{right:-20px;clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
.results #overlay-description{display:flex;flex-direction:column;align-items:center}
.result-stars{display:flex;gap:13px;align-items:center;justify-content:center;margin:0 0 19px;filter:drop-shadow(0 3px 0 #b88431);color:#ffd05a;font-size:33px;line-height:1;-webkit-text-stroke:1px #e3a33b}
.result-stars span:first-child{transform:rotate(-17deg) translateY(8px)}.result-stars span:nth-child(2){font-size:47px}.result-stars span:last-child{transform:rotate(17deg) translateY(8px)}
.results .result-apple{width:205px;height:180px;border:4px solid #fff7ce;box-shadow:0 6px 0 #c63c2d,0 13px 22px #8a633530;transform:rotate(-3deg)}
.results .result-apple>*{transform:rotate(3deg)}.results .result-label{font-size:13px;color:#fff2dc;letter-spacing:3px}.results .result-apple strong{font-size:83px;text-shadow:0 4px 0 #bd3e30;line-height:1.14}.results .result-unit{font-size:8px;letter-spacing:2px}
.results .result-best{display:flex;gap:8px;align-items:center;justify-content:center;margin:15px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#7c713d;font-size:12px;font-weight:900;letter-spacing:2px;line-height:1.2}
.results .record-crown{font-size:28px;color:#d5a040;text-shadow:0 2px 0 #fff9d3}.results .result-best>span{font-size:12px;letter-spacing:2px;color:#7c713d}.results .result-best strong{font-size:25px;color:#607c3b;margin-left:5px;letter-spacing:0;text-shadow:0 2px #fff8d8}
.results .primary{background:linear-gradient(#ffdb76,#f4b94e);border:3px solid #ffefb2;border-radius:19px;color:#885b24;text-shadow:0 1px #fff0b6;box-shadow:0 5px 0 #b7802e,0 8px 0 #fff7d18c,0 11px 14px #82703725;margin-top:19px;padding:11px 25px;min-width:224px;font-size:17px;letter-spacing:1px;transform:rotate(-2deg)}
.results .primary:hover{background:linear-gradient(#ffe493,#ffc863)}.results .primary:active{transform:rotate(-2deg) translateY(4px);box-shadow:0 1px 0 #b7802e}.results .primary .replay-icon{font-size:24px;margin:0 8px 0 0;vertical-align:-1px}
@media(max-width:650px){.results .welcome{padding:8px 15px 12px;width:260px}.results .welcome h2{font-size:12px;padding:7px 14px;margin-bottom:6px;border-width:2px}.result-stars{font-size:19px;gap:10px;margin-bottom:11px}.result-stars span:nth-child(2){font-size:27px}.results .result-apple{width:119px;height:101px;border-width:3px;box-shadow:0 4px 0 #c63c2d,0 8px 15px #8a633525}.results .result-label{font-size:8px;letter-spacing:2px}.results .result-apple strong{font-size:46px;text-shadow:0 2px 0 #bd3e30}.results .result-unit{font-size:5px;letter-spacing:1px}.results .result-best{margin-top:8px;gap:5px}.results .record-crown{font-size:19px}.results .result-best>span{font-size:9px}.results .result-best strong{font-size:19px}.results .primary{font-size:12px;padding:6px 16px;min-width:168px;margin-top:9px;border-radius:13px;border-width:2px}.results .primary .replay-icon{font-size:18px}}

/* Compact HUD: right-anchored time fill, score at the end, best below. */
.time-row{display:flex;align-items:center;gap:14px;padding:15px 18px;background:linear-gradient(#f3f6df,#edf2d6)}
.time-row .time-bar{position:relative;flex:1;height:17px;border:2px solid #d0ddb1;border-radius:12px;background:#e0e7c5}
.time-row .time-bar i{position:absolute;right:0;top:0;border-radius:8px}
.inline-score{display:flex;align-items:center;gap:6px;flex-shrink:0;color:#54773e;font-size:16px;min-width:65px;font-variant-numeric:tabular-nums}
.inline-score>span{font-size:18px}.inline-score strong{font-weight:900}.inline-score small{display:none}
.game-footer #feedback{flex:1}.footer-best{font-size:9px;letter-spacing:1px;white-space:nowrap;color:#94a079;display:flex;align-items:center;gap:7px;margin-right:6px}.footer-best strong{font-size:14px;letter-spacing:0;color:#738b54;font-variant-numeric:tabular-nums}.footer-best small{display:none}
@media(max-width:650px){.time-row{padding:11px 10px;gap:9px}.time-row .time-bar{height:14px}.inline-score{font-size:14px;min-width:47px;gap:4px}.inline-score>span{font-size:15px}.game-footer{flex-wrap:wrap;gap:10px}.game-footer #feedback{flex-basis:100%;min-height:13px}.footer-best{margin-right:auto;font-size:8px}.footer-best strong{font-size:13px}}

/* Keep interface elements level and aligned. */
.results .welcome h2,.results .result-apple,.results .result-apple>*,.results .primary{transform:none}
.result-stars span:first-child,.result-stars span:last-child{transform:translateY(8px)}
.results .primary:active{transform:translateY(4px)}

.game-header{padding:10px 5px 24px;gap:15px}.game-header h1{font-size:36px;margin:0;letter-spacing:-1px}.audio-controls{display:flex;gap:10px}.sound[aria-pressed="true"]{background:#e5efcd;border-color:#b2ca8b;color:#52773e}
@media(max-width:650px){.game-header{padding:5px 6px 20px;gap:8px}.game-header h1{font-size:27px}.audio-controls{gap:6px}.audio-controls .sound{padding:6px 9px;font-size:9px}}

.music-credit{display:block;width:fit-content;margin:18px auto 0;color:#859271;font-size:9px;text-decoration:none}.music-credit:hover{text-decoration:underline}

.volume-control{display:flex;align-items:center;gap:8px;color:#6f8256;font-size:10px;font-weight:800;letter-spacing:1px}.volume-control input{width:84px;height:18px;cursor:pointer;accent-color:#7fa754;margin:0}.volume-control input:focus-visible{outline:2px solid #b78e43;outline-offset:4px;border-radius:10px}.audio-controls{gap:20px}
@media(max-width:650px){.audio-controls{gap:7px;flex-direction:column}.volume-control{font-size:8px;gap:6px}.volume-control span{width:25px}.volume-control input{width:74px;height:14px}}

/* A small yellow accent makes selected apples easier to distinguish. */
.cell.selected .apple{outline:2px solid #ffd34e;outline-offset:1px;box-shadow:inset 2px 1px 1px #ffa18a,0 0 0 3px #ffe17b40,0 3px 2px #a6532f22}

[hidden]{display:none!important}.account-bar{display:flex;align-items:center;gap:9px;margin:0 5px 17px;font-size:11px;color:#7b8c61}.account-bar>span{flex:1}.account-bar button{font-size:10px}.online-dialog{position:fixed;width:420px;max-width:calc(100vw - 28px);max-height:85vh;overflow:auto;border:4px solid #83a95e;border-radius:24px;background:#fffbed;color:#526d3f;padding:28px;box-shadow:0 8px 0 #688c49,0 25px 80px #30452244}.online-dialog::backdrop{background:#324b3770;backdrop-filter:blur(4px)}.online-dialog h2{font-size:24px;margin:0 20px 14px 0}.online-dialog p{font-size:12px;line-height:1.7;color:#82906a}.dialog-close{position:absolute;right:12px;top:9px;background:none;border:0;color:#7c9067;font-size:25px}.online-dialog label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}.online-dialog input{width:100%;padding:12px;border:2px solid #d8dfbc;border-radius:12px;font:inherit;background:white;color:#526d3f}.online-dialog .primary{width:100%}#nickname-error{color:#bb503e}#ranking-list{padding:0;list-style:none}#ranking-list li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:12px 8px;border-bottom:1px solid #e4e6c8;font-size:13px}#ranking-list li:nth-child(-n+3){background:#fff1c6;border-radius:9px}#ranking-list li>span:nth-child(2){overflow-wrap:anywhere}.online-dialog .privacy-note{font-size:10px}.ranking-message{font-size:10px!important;max-width:240px;line-height:1.5!important;margin:7px 0 0!important;text-align:center}button:disabled{opacity:.6;cursor:wait}
@media(max-width:650px){.account-bar{flex-wrap:wrap;gap:7px}.account-bar>span{flex-basis:100%;font-size:10px}.online-dialog{padding:22px}.online-dialog h2{font-size:21px}}

.country-flag{display:inline-block;width:24px;height:18px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px #526d3f20;flex-shrink:0;vertical-align:middle}.ranking-player,#account-status{display:flex;align-items:center;gap:9px}

/* Scroll the player list inside a clean, fixed rounded frame. */
#ranking-dialog{overflow:hidden;max-height:85vh;max-height:85dvh}
#ranking-dialog[open]{display:flex;flex-direction:column}
#ranking-dialog h2,#ranking-status,#ranking-dialog>.privacy-note{flex-shrink:0}
.ranking-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 9px 0 0;border-radius:12px;scrollbar-width:thin;scrollbar-color:#b1c294 transparent}
.ranking-scroll::-webkit-scrollbar{width:6px}.ranking-scroll::-webkit-scrollbar-track{background:transparent;margin:10px 0}.ranking-scroll::-webkit-scrollbar-thumb{background:#b1c294;border:1px solid #fffbed;border-radius:10px}.ranking-scroll::-webkit-scrollbar-thumb:hover{background:#8fa76f}
#ranking-list{margin:0}#ranking-list li{align-items:center;min-height:46px}#ranking-dialog .privacy-note{margin-bottom:0}
.rank-medal{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;border:2px solid var(--medal-rim);background:linear-gradient(135deg,var(--medal-light),var(--medal-color));color:var(--medal-ink);font-size:12px;font-weight:900;box-shadow:inset 0 0 0 2px #ffffff55,0 2px 2px #4f5d2f20;text-shadow:0 1px #ffffff66;margin-top:4px}
.rank-medal:before{content:'';position:absolute;z-index:-1;top:-9px;left:4px;width:13px;height:12px;background:linear-gradient(90deg,#de6c54 0 38%,#fff1cf 38% 62%,#de6c54 62%);clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}
.medal-1{--medal-light:#ffe89c;--medal-color:#e7af35;--medal-rim:#d8a131;--medal-ink:#956615}
.medal-2{--medal-light:#f3f7f8;--medal-color:#b6c2cc;--medal-rim:#a6b4be;--medal-ink:#657581}
.medal-3{--medal-light:#f6d2a6;--medal-color:#c58d59;--medal-rim:#b57c47;--medal-ink:#80502e}

.player-summary{display:flex;align-items:center;flex:1;gap:12px;min-width:0}.player-best{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:9px;letter-spacing:.7px;color:#91a074}.player-best strong{font-size:13px;color:#738b54;letter-spacing:0;font-variant-numeric:tabular-nums}.player-best small{display:none}
@media(max-width:650px){.player-summary{flex-basis:100%;gap:10px}.player-best{font-size:8px}.player-best strong{font-size:12px}}

.my-ranking{flex-shrink:0;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:13px 14px;margin:1px 0 14px;background:#edf2d9;border:2px solid #b8cc90;border-radius:14px;font-size:13px}.my-rank-label{grid-column:1/-1;font-size:8px;letter-spacing:1.5px;font-weight:900;color:#869d66}.my-rank-place{font-size:23px;color:#5c7c3f;font-variant-numeric:tabular-nums}.my-rank-points{font-size:19px;color:#5c7c3f}.my-ranking small,.my-rank-note{grid-column:1/-1;font-size:10px;color:#899770}.my-ranking .ranking-player{min-width:0;overflow-wrap:anywhere}