:root{color-scheme:light;--ink:#3c3228;--green:#536c43;--red:#aa4733;--muted:#766b5c}*{box-sizing:border-box}body{margin:0;background:#f5f1e4;color:var(--ink);font:16px/1.6 system-ui,sans-serif;word-break:keep-all}nav{display:flex;justify-content:center;gap:20px;padding:13px;background:#fffdf6;font-size:13px}a{color:#506a42}nav a{font-weight:750;text-decoration:none}main{width:min(100% - 24px,880px);margin:16px auto}.ad{overflow:hidden;margin:14px 0}.panel{border:1px solid #e9dfcb;border-radius:22px;background:#fffdf7;box-shadow:0 14px 40px #65472717;overflow:hidden}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center}.hero img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}.copy{padding:28px}.copy p:not(.eyebrow){color:var(--muted)}.eyebrow{color:var(--red);font-size:11px;font-weight:800;letter-spacing:.12em}h1,h2{line-height:1.12;letter-spacing:-.05em;margin:8px 0}h1{font-size:clamp(34px,5vw,48px)}h1 em{color:var(--red);font-style:normal}h2{font-size:27px}.copy small,.copy a{display:block;margin-top:10px;font-size:12px;color:var(--muted)}button{touch-action:manipulation;cursor:pointer;min-height:48px;padding:9px 15px;border-radius:12px;border:1px solid #dbd4c3;background:white;color:var(--ink);font:inherit;font-weight:800}.primary{background:var(--green);border-color:var(--green);color:white}[hidden]{display:none!important}.game,.result{width:min(100%,540px);margin:auto;padding:22px}.game-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.game-head .eyebrow{margin:0}.score{display:grid;min-width:100px;text-align:center;background:#f4ead8;border-radius:13px;padding:6px 12px}.score small{font-size:11px;color:var(--muted)}.score strong{font-size:22px;line-height:1.2;color:var(--red)}#message{font-size:13px;color:var(--green);min-height:21px}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#946e4c;border:7px solid #7e5e43;border-radius:17px;padding:8px;touch-action:none;box-shadow:inset 0 3px 10px #56371f55}.cell{display:grid;place-items:center;aspect-ratio:1;background:#c8ad87;border-radius:10px;box-shadow:inset 0 2px 4px #714e3533}.filled{background:#f5e8c8}.apple{position:relative;display:grid;place-items:center;width:68%;height:66%;margin-top:8%;border-radius:45% 45% 48% 48%;background:linear-gradient(135deg,#fb9574,#d64b36 65%,#b4322c);box-shadow:inset -5px -5px 0 #902e2330,0 3px 3px #6c342323;color:#fff}.apple:before{content:'';position:absolute;width:24%;height:16%;background:#7c9f4a;top:-16%;left:49%;border-radius:100% 0;transform:rotate(-20deg)}.apple:after{content:'';position:absolute;width:7%;height:18%;background:#6a4930;top:-16%;left:47%;transform:rotate(8deg)}.apple b{font-size:clamp(16px,5vw,30px);text-shadow:0 1px 2px #7e291c}.v4 .apple{background:linear-gradient(135deg,#ffbf69,#ea7d36 70%,#ba4b20)}.v8 .apple{background:linear-gradient(135deg,#fbe083,#dba83a 70%,#ad7828)}.v16 .apple{background:linear-gradient(135deg,#d3e68e,#91b450 70%,#628234)}.v32 .apple{background:linear-gradient(135deg,#fea1a4,#ce4e62 70%,#922f48)}.v64 .apple{background:linear-gradient(135deg,#e3a7d0,#ad65a1 70%,#753e7b)}.v128 .apple{background:linear-gradient(135deg,#ffeaa0,#d78936 65%,#b53e2e)}.tip{text-align:center;font-size:12px;color:var(--muted)}.arrows{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,48px);gap:5px;justify-content:center}.arrows button{min-height:48px;background:#f3e8d3;font-size:24px;line-height:1}.up{grid-column:2}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:2}.right{grid-column:3;grid-row:2}.quiet{display:block;margin:12px auto 0;font-size:13px}.result{margin:auto}.actions{display:grid;gap:8px;margin:18px 0}.kakao{background:#fee500;border-color:#fee500}.coupang{text-align:center;overflow:hidden}.coupang iframe{max-width:100%}.coupang p{text-align:left;font-size:11px;color:var(--muted)}footer{text-align:center;font-size:12px;color:var(--muted);padding:20px}@media(max-width:680px){.hero{grid-template-columns:1fr}.hero img{min-height:0;height:auto;aspect-ratio:1.65;object-fit:cover}.copy,.game,.result{padding:18px 16px}.board{gap:5px;padding:6px}.cell{border-radius:8px}}
.cell { position: relative; }
.apple { z-index: 1; will-change: transform; }
.apple.spawn { animation: apple-arrive 220ms cubic-bezier(.2,.9,.3,1.3) both; }
.apple.merge { animation: apple-merge 260ms ease-out both; }
.arrows button:active { transform: scale(.92); background: #e9d3ad; }
@keyframes apple-arrive {
  from { opacity: 0; transform: scale(.35) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes apple-merge {
  0% { transform: scale(.86); filter: brightness(1.4); }
  48% { transform: scale(1.19) rotate(-5deg); filter: brightness(1.15); }
  75% { transform: scale(.97) rotate(2deg); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .apple.spawn, .apple.merge { animation: none; }
  .arrows button:active { transform: none; }
}
