:root{--ink:#493f63;--purple:#8270d9;--light:#f5f1ff;--yellow:#ffd96a;--mint:#8dddc3;--peach:#ffad9f;--line:#ddd6ee}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;background:linear-gradient(135deg,#f8f5ff,#fff9ed)}button,input{font:inherit}button{cursor:pointer}nav{height:54px;display:flex;justify-content:center;gap:28px;align-items:center;background:#fff;border-bottom:1px solid var(--line)}nav a{color:var(--ink);text-decoration:none;font-weight:800}main{width:min(1080px,calc(100% - 28px));margin:auto}.hero{text-align:center;padding:40px 10px 25px}.hero h1{margin:8px;font-size:clamp(30px,5vw,52px)}.hero p{margin:0;color:#756c87}.eyebrow{display:inline-block;color:#6d58ca;font-size:13px;font-weight:900;letter-spacing:.12em}.game-layout{display:grid;grid-template-columns:minmax(0,720px) 250px;gap:18px;align-items:start}.game-card,.side-card,.ranking-card,.how{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 38px #67559d18}.game-card{padding:16px}.difficulty,.ranking-tabs{display:flex;gap:8px;margin-bottom:14px}.difficulty button,.ranking-tabs button{flex:1;border:0;border-radius:14px;padding:10px;background:#f1edfa;color:var(--ink);font-weight:900}.difficulty button.active,.ranking-tabs button.active{background:var(--purple);color:#fff;box-shadow:0 5px 14px #8270d966}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.stats div{text-align:center;padding:8px 4px;background:var(--light);border-radius:14px}.stats small{display:block;font-size:11px;color:#827893}.stats strong{font-size:18px}.canvas-wrap{position:relative;overflow:hidden;margin:auto;width:min(100%,420px);border-radius:22px;border:3px solid #cfc4ec;background:#fbf7ee;box-shadow:inset 0 0 0 4px #fff}canvas{display:block;width:100%;height:auto;touch-action:manipulation}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;background:#4b405fbd;color:#fff;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.overlay b{font-size:25px}.overlay p{max-width:300px;line-height:1.6}.overlay button,.ranking-form button{border:0;border-radius:16px;padding:13px 22px;background:var(--yellow);color:#4e4119;font-weight:1000;box-shadow:0 6px 0 #d7ae37}.message{position:absolute;top:18%;left:50%;transform:translate(-50%,-50%) scale(.8);font-weight:1000;font-size:25px;color:#715bd3;text-shadow:0 2px #fff;opacity:0;pointer-events:none}.message.show{animation:pop .65s}@keyframes pop{40%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}80%{opacity:1}}.main-controls{display:flex;gap:10px;justify-content:center;margin-top:14px}.main-controls button{border:0;border-radius:17px;background:#eee9fa;color:var(--ink);font-weight:1000;min-width:54px;padding:12px}.main-controls .drop{flex:1;max-width:270px;background:var(--yellow);box-shadow:0 5px 0 #d8ad38;font-size:20px}.drop span{font-size:11px;margin-left:5px}.keys{text-align:center;color:#827893;font-size:12px}kbd{background:#eee9f7;border-radius:5px;padding:2px 6px}.side-card{padding:22px;position:sticky;top:15px}.side-card h2{font-size:17px;margin:5px 0 12px}.next-cup{height:55px;margin:8px auto 24px;width:110px;background:var(--peach);border:4px solid #fff;border-radius:9px 9px 20px 20px;box-shadow:0 5px 0 #d98376}.side-card ul{padding-left:19px;line-height:1.8;font-size:13px}.secondary,.icon-button{border:0;border-radius:13px;padding:10px 14px;background:#eee9fa;color:var(--ink);font-weight:900;width:100%}.ranking-card,.how{margin-top:20px;padding:25px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{margin:5px 0 18px}.icon-button{width:auto;font-size:22px}.ranking-list{list-style:none;padding:0;margin:0}.ranking-list li{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;border-bottom:1px solid #eee9f7;padding:12px}.ranking-list li:nth-child(-n+3){background:#fffaf0}.ranking-status{display:block!important;text-align:center;color:#8a8297}.rank-meta{font-size:12px;color:#897f96}.ranking-form{margin-top:18px;padding:16px;border-radius:18px;background:var(--light);text-align:center}.ranking-form div{display:flex;gap:8px;max-width:480px;margin:auto}.ranking-form input{flex:1;min-width:0;border:2px solid var(--line);border-radius:14px;padding:12px}.ranking-form button{padding:10px 15px;box-shadow:none}.ranking-form small{display:block;margin-top:10px}.how{line-height:1.8}.how h2{margin-top:0}.ad-container{margin:28px auto;min-height:90px;text-align:center}footer{text-align:center;padding:24px;color:#887f97;font-size:13px}@media(max-width:800px){nav{gap:16px;font-size:13px}.hero{padding:26px 5px 18px}.game-layout{display:block}.side-card{position:static;margin-top:16px}.side-card .next-cup,.side-card h2:first-child{display:none}.game-card{padding:10px;border-radius:20px}.stats strong{font-size:15px}.canvas-wrap{max-height:58vh;width:min(100%,390px)}canvas{max-height:58vh;object-fit:contain}.keys{font-size:11px}.ranking-card,.how{padding:18px;border-radius:20px}.ranking-form div{flex-direction:column}.ranking-form button{width:100%}}@media(max-width:390px){main{width:calc(100% - 14px)}.stats{gap:4px}.stats div{padding:6px 2px}.difficulty button{padding:8px 4px}.hero h1{font-size:29px}}