:root{--ink:#30231f;--muted:#89756b;--orange:#ff7549;--red:#dd4539;--green:#3aa753;--line:rgba(104,72,58,.14);--paper:rgba(255,255,255,.84)}*{box-sizing:border-box}html{background:#fff5dc}body{margin:0;min-height:100vh;color:var(--ink);font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;background:radial-gradient(circle at 8% 16%,#fff0b5 0,transparent 27rem),radial-gradient(circle at 95% 90%,#ffd8c5 0,transparent 29rem),linear-gradient(145deg,#fffaf0,#fff1d6);overflow-x:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #ffb298;outline-offset:2px}header{height:74px;max-width:1240px;margin:auto;padding:0 25px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.brand>i{width:42px;height:42px;border-radius:50%;background:repeating-linear-gradient(100deg,#248c47 0 8px,#5fc66b 8px 15px);border:3px solid #288542;box-shadow:0 5px 13px #287c4938}.brand span{display:flex;flex-direction:column;line-height:1;gap:4px}.brand b{font-size:20px;letter-spacing:-.8px}.brand small{font-size:8px;color:var(--orange);font-weight:900;letter-spacing:2px}nav{display:flex;gap:8px}.icon,.rankBtn,.controls button,.rankFoot button{border:1px solid var(--line);background:#ffffffbd;box-shadow:0 5px 18px #5c382712;transition:.18s}.icon:hover,.rankBtn:hover,.controls button:hover{transform:translateY(-2px);background:#fff}.icon{width:42px;height:42px;border-radius:14px;font-weight:900}.rankBtn{height:42px;padding:0 16px;border-radius:14px;font-weight:850}main{max-width:1190px;margin:2px auto 0;padding:0 20px 22px;display:grid;grid-template-columns:215px minmax(320px,410px) 255px;justify-content:center;gap:24px;align-items:start}.side{padding-top:30px;display:flex;flex-direction:column;gap:15px}.card{border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 14px 40px #693b2712;backdrop-filter:blur(12px)}.card>label,.score>label,.title label{color:#ad998e;font-size:9px;font-weight:950;letter-spacing:1.7px}.score{padding:20px}.score strong{display:block;margin:6px 0 12px;font-size:46px;line-height:1;letter-spacing:-2px}.score div{padding-top:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:800}.bestFruitBadge{display:inline-flex;align-items:center;gap:3px;height:26px;margin-top:-7px}.bestFruitBadge small{font-size:9px}.bestFruitBadge canvas{width:34px;height:30px;display:block}.next{padding:17px;text-align:center}.next>label{display:block;text-align:left}.next canvas{display:block;width:130px;height:102px;margin:2px auto}.next b{font-size:12px}.tip{padding:14px;display:flex;align-items:flex-start;gap:8px;background:#fff9dcdb}.tip p{margin:0;font-size:10px;line-height:1.6;color:var(--muted)}.tip b{color:var(--ink)}.gamebox{width:100%;aspect-ratio:3/5;position:relative;overflow:hidden;border:7px solid #efb157;border-radius:27px 27px 33px 33px;background:#fff2c6;box-shadow:0 23px 55px #75402332,inset 0 0 0 2px #fff9;touch-action:none;user-select:none}.gamebox:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 18px 0 25px #fff3,inset -18px 0 25px #a6572412}#game{position:relative;z-index:2;width:100%;height:100%;display:block;cursor:crosshair}.danger{position:absolute;z-index:6;left:50%;top:89px;transform:translate(-50%,-6px);padding:6px 11px;border-radius:99px;color:#b9362f;background:#fff1e9;box-shadow:0 5px 18px #be3b2b2b;white-space:nowrap;font-size:9px;font-weight:900;opacity:0;transition:.2s}.danger.show{opacity:1;transform:translate(-50%,0);animation:pulse .65s infinite alternate}@keyframes pulse{to{box-shadow:0 6px 26px #d831264c}}.paused{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#35251e54;backdrop-filter:blur(5px);color:#fff;opacity:0;pointer-events:none;transition:.2s}.paused.show{opacity:1;pointer-events:auto}.paused b{font-size:27px}.paused small{margin-top:5px}.help{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);color:#6c4a3a8f;font-size:9px;font-weight:850;white-space:nowrap;opacity:0;transition:.2s}.help.show{opacity:1}.controls{display:flex;gap:9px;margin:0 0 12px}.controls button{flex:1;min-height:43px;border-radius:14px;font-size:11px;font-weight:850}.controls button:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}.mobileStats{display:none}.mini{padding:19px}.title{display:flex;justify-content:space-between}.title h2{font-size:19px;margin:4px 0 0;letter-spacing:-.7px}.title .icon{width:32px;height:32px;border-radius:10px}.mini ol{list-style:none;margin:14px 0 8px;padding:0;min-height:144px}.mini li{height:47px;display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;border-bottom:1px solid var(--line);font-size:10px}.mini li:last-child{border:0}.mini li i{width:23px;height:23px;border-radius:8px;background:#f3ece7;display:grid;place-items:center;font-style:normal;font-weight:900}.mini li:first-child i{background:#ffed9f;color:#9c6500}.mini li span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:850}.mini li b{color:var(--red)}.mini .loading{display:block;padding:55px 0;text-align:center;color:var(--muted);border:0}.more{width:100%;padding:12px 0 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--muted);font-size:10px;font-weight:850}.road{padding:17px}.road #road{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:12px}.dot{width:25px;height:25px;border-radius:50%;border:2px solid #572a2220;box-shadow:inset 0 -3px #5e302217}.arrow{font-size:9px;color:#baa79c}footer{text-align:center;color:#9e8a80;font-size:9px;padding:3px 20px 25px}footer span{display:block;margin-top:5px;color:#b5a299;font-size:8px}.back{position:fixed;z-index:100;inset:0;padding:18px;display:flex;align-items:center;justify-content:center;background:#36241d66;backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:.23s}.back.open{opacity:1;visibility:visible}.modal{position:relative;width:min(100%,410px);max-height:calc(100vh - 28px);overflow:auto;border-radius:29px;background:#fffdf7;border:1px solid #fff;box-shadow:0 30px 90px #391d124c;transform:translateY(10px) scale(.985);transition:.25s}.open .modal{transform:none}.start{padding:0 32px 25px;text-align:center}.hero{height:132px;margin:0 -32px;position:relative;overflow:hidden;background:linear-gradient(155deg,#fff0b7,#ffd87f 55%,#ffbe77)}.hero i{position:absolute;border-radius:50%;filter:drop-shadow(0 9px 8px #69331c28)}.hero .cherry{width:52px;height:52px;left:43px;bottom:27px;background:radial-gradient(circle at 32% 25%,#ff7d70,#eb4050 60%,#bf263f)}.hero .cherry:after{content:"";position:absolute;width:38px;height:45px;left:24px;top:-33px;border-left:4px solid #47873d;border-radius:50%;transform:rotate(20deg)}.hero .orange{width:75px;height:75px;right:44px;bottom:20px;background:radial-gradient(circle at 32% 25%,#ffd45c,#ff8b35 62%,#dd582a)}.hero .watermelon{width:128px;height:128px;left:50%;bottom:-68px;transform:translateX(-50%);background:repeating-linear-gradient(98deg,#299c4d 0 15px,#62ca68 15px 27px);border:4px solid #237b3d55}.hero .watermelon:after{content:"• ᴗ •";position:absolute;left:0;right:0;top:25px;color:#164c2b;font-style:normal;font-size:21px;font-weight:950}.hero span{position:absolute;left:24px;top:20px;color:#fff;font-size:20px}.copy{padding-top:19px}.modal em{display:inline-block;padding:5px 9px;border-radius:99px;background:#ffebe1;color:#df5535;font-size:8px;font-style:normal;font-weight:950;letter-spacing:.7px}.copy h1{margin:9px 0 6px;font-size:30px;line-height:1.16;letter-spacing:-1.5px}.copy mark{background:none;color:var(--green)}.copy p{margin:0 0 17px;color:var(--muted);font-size:11px}form{text-align:left}form>label{display:block;margin-bottom:7px;font-size:10px;font-weight:900}.input{position:relative}.input input{width:100%;height:48px;padding:0 57px 0 14px;border:1.5px solid #e4d6cd;border-radius:14px;background:#fff;font-weight:750}.input input:focus{border-color:var(--orange)}.input span{position:absolute;right:13px;top:17px;color:#ad998e;font-size:9px}form>small{display:block;margin:6px 2px 0;color:#9e8a80;font-size:8px}.error{min-height:15px;margin:5px 2px 0;color:#cf4037;font-size:9px;font-weight:800}.cta{width:100%;height:50px;padding:0 9px 0 20px;border:0;border-radius:15px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--orange),#ff9855);color:#fff;box-shadow:0 12px 25px #ee5b343b;font-weight:950}.cta:disabled{opacity:.55}.cta b{width:32px;height:32px;border-radius:10px;background:#fff3;display:grid;place-items:center;font-size:17px}.link{margin:13px auto 0;border:0;background:none;color:var(--muted);font-size:9px;font-weight:850}.close{position:absolute;right:16px;top:15px;width:33px;height:33px;border:0;border-radius:11px;background:#f6ede7;color:#8b7468;font-size:22px}.result{padding:27px 32px;text-align:center}.resultIcon{width:68px;height:68px;margin:2px auto 11px;display:grid;place-items:center;border-radius:22px;background:#eaf7d4;font-size:40px}.result h2{margin:9px 0 3px;font-size:23px}.result>p{margin:0;color:var(--muted);font-size:10px}.resultScore{margin:18px 0 10px;padding:14px;border-radius:17px;background:linear-gradient(135deg,#fff2d7,#ffe2bd)}.resultScore small{display:block;color:#9d7660;font-size:8px;font-weight:900}.resultScore strong{display:block;color:var(--red);font-size:38px;line-height:1}.resultGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.resultGrid div{padding:11px;border:1px solid var(--line);border-radius:13px}.resultGrid small{display:block;color:#9e8a80;font-size:8px}.resultGrid b{font-size:12px}.result .save{min-height:17px;margin:7px 0!important;font-size:9px}.ranking{width:min(100%,700px);padding:27px}.rankHead{display:flex;gap:12px;align-items:center}.rankHead>span{width:49px;height:49px;border-radius:16px;background:#fff0ba;display:grid;place-items:center;font-size:27px}.rankHead h2{margin:3px 0 0;font-size:24px}.ranking>p{color:var(--muted);font-size:10px}.tableWrap{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}table{width:100%;border-collapse:collapse;font-size:10px}th{position:sticky;top:0;background:#fff8f2;color:#99857a;height:37px;font-size:8px}td{height:43px;border-top:1px solid #eee4de;padding:0 11px}th:first-child,td:first-child{text-align:center;width:55px}th:nth-child(3),td:nth-child(3){text-align:right}.badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#f2ece8;font-weight:950}tr:nth-child(1) .badge{background:#ffec9a;color:#9b6300}td.points{color:var(--red);font-weight:950}.empty{text-align:center!important;height:140px;color:var(--muted)}.rankFoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:9px}.rankFoot button{height:34px;border-radius:11px;font-size:9px;font-weight:850}.toast{position:fixed;z-index:200;left:50%;bottom:24px;transform:translate(-50%,18px);padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 10px 30px #281a143f;font-size:10px;font-weight:750;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:920px){main{grid-template-columns:minmax(310px,410px) 245px}.left{display:none}.mobileStats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:8px;padding:9px;border-radius:16px;border:1px solid var(--line);background:#ffffffbd}.mobileStats div{text-align:center;border-right:1px solid var(--line)}.mobileStats div:last-child{border:0}.mobileStats small{display:block;color:#99857a;font-size:7px}.mobileStats b{font-size:12px}.mobileStats canvas{display:block;width:42px;height:35px;margin:-1px auto -4px}.mobileStats .scoreStat{display:flex;flex-direction:column;justify-content:center}.mobileStats .scoreStat b{font-size:15px;margin-top:3px}}
@media(max-width:680px){header{height:62px;padding:0 13px}.brand>i{width:35px;height:35px}.brand b{font-size:17px}.rankBtn{padding:0 11px}main{display:block;max-width:430px;padding:0 10px 17px}.right{display:none}.gamebox{border-width:6px;border-radius:23px 23px 28px 28px}footer{line-height:1.5}.back{padding:11px}.start{padding-left:23px;padding-right:23px}.hero{margin-left:-23px;margin-right:-23px}.ranking{padding:21px 13px}.rankHead{padding-right:36px}th,td{padding:0 7px}th:nth-child(4),td:nth-child(4){display:none}.tableWrap{max-height:55vh}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 휴대폰에서는 실제 모바일 수박게임처럼 플레이 영역은 정사각형으로 유지하면서 한 화면에 맞춘다. */
@media(max-width:680px){
  .gamebox{box-sizing:content-box;width:calc(100% - 12px);aspect-ratio:360/460}
  .controls{margin:0 0 8px}
  .controls button{min-height:39px}
  main{padding-bottom:8px}
  footer{display:none}
}


/* 새 게임 확인창 */
.confirmReset{width:min(100%,370px);padding:0 24px 24px;text-align:center;overflow:hidden}
.resetArt{height:116px;margin:0 -24px 18px;position:relative;display:grid;place-items:end center;background:radial-gradient(circle at 22% 22%,#fff9 0 4px,transparent 5px),radial-gradient(circle at 79% 34%,#fff8 0 3px,transparent 4px),linear-gradient(145deg,#fff1b6,#ffd886 55%,#ffc98c)}
.resetArt:after{content:"";position:absolute;left:17%;right:17%;bottom:9px;height:10px;border-radius:50%;background:#9c5b3720;filter:blur(4px)}
.resetArt canvas{position:relative;z-index:1;width:180px;height:94px;display:block}
.resetArt i{position:absolute;z-index:2;right:24px;top:18px;width:31px;height:31px;display:grid;place-items:center;border-radius:11px;background:#fff9;color:#dd633e;box-shadow:0 5px 16px #9b52282b;font-size:19px;font-style:normal;font-weight:950}
.confirmReset>em{background:#fff0e6;color:#dc613f}
.confirmReset h2{margin:9px 0 7px;font-size:24px;letter-spacing:-1px}
.confirmReset>p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}
.confirmActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.confirmActions button{height:48px;border-radius:15px;border:1px solid var(--line);font-size:11px;font-weight:900;transition:.18s}
.confirmActions button:hover{transform:translateY(-1px)}
#resetCancel{background:#f7f0eb;color:#715d53}
#resetConfirm{border-color:#ef6b45;background:linear-gradient(135deg,var(--orange),#ff9855);color:#fff;box-shadow:0 10px 22px #ee5b3432}
@media(max-width:680px){.confirmReset{padding:0 20px 20px}.resetArt{height:106px;margin:0 -20px 16px}.confirmActions{margin-top:17px}.confirmActions button{height:45px}}