*{box-sizing:border-box} :root{font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#293553;background:#f8f7f2;font-synthesis:none}body{margin:0;background:radial-gradient(ellipse at 50% 0,#fffdf1,transparent 65%),#f8f7f2}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #db9750;outline-offset:4px}.app{width:min(1040px,94%);margin:28px auto 0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font-size:23px;font-weight:900;letter-spacing:-1px}.brand-icon{display:grid;place-items:center;background:#28385b;color:#ffe5a2;border-radius:12px;width:39px;height:39px;font-size:31px}.brand small{font-size:13px;font-weight:400;letter-spacing:0;color:#8b8c94;margin-left:8px}#pause{border:1px solid #dedfdc;border-radius:10px;padding:10px 16px;background:#fff;color:#5e6473;font-size:13px}#pause:disabled{opacity:.45;cursor:default}.dashboard{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:#fff;border:1px solid #e8e7e0;border-radius:16px 16px 0 0;padding:19px 5px}.dashboard>div{padding-left:26px;border-right:1px solid #eeede7}.dashboard>div:last-child{border:0}.dashboard span{display:block;color:#858896;font-size:11px;letter-spacing:1.3px;font-weight:700}.dashboard strong{display:block;font-size:28px;margin-top:5px;font-variant-numeric:tabular-nums}.dashboard .hearts{color:#e88895;font-size:25px;letter-spacing:4px}.progress{height:4px;background:#e7e5dd}.progress div{height:100%;background:#e8ba6b;transition:width .3s;width:0}.stage{position:relative;background:#202d51;border-radius:0 0 19px 19px;overflow:hidden;box-shadow:0 14px 35px #25345612;aspect-ratio:960/620}canvas{position:relative;z-index:0;display:block;width:100%;height:100%;touch-action:none}.stage-top{position:absolute;z-index:2;top:22px;left:26px;right:26px;display:flex;justify-content:space-between;pointer-events:none;font-size:13px;color:#eee1bc;letter-spacing:.4px}#boost{border:1px solid #e4cd8e66;background:#253657;padding:7px 12px;border-radius:20px;margin-top:-7px}#announcement{position:absolute;z-index:3;top:39%;left:0;width:100%;padding:12px 18px;text-align:center;color:#fff3d1;font-size:clamp(30px,4vw,48px);font-weight:900;letter-spacing:.035em;line-height:1.25;pointer-events:none;text-shadow:0 2px 3px #17243be6,0 0 20px #f5d78d75;opacity:0}#announcement.show{animation:announce 1.7s ease both}@keyframes announce{0%{opacity:0;transform:scale(.7)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px)}}.overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:#14213c38;backdrop-filter:blur(3px);transition:opacity .2s}.overlay[hidden]{display:none}.modal{text-align:center;color:#f8f3e8;padding:23px;width:min(520px,96%);animation:enter .4s ease}.eyebrow{font-size:11px;letter-spacing:4px;color:#d9c995;font-weight:700}.moon-mark{font-size:52px;color:#f8dc98;height:69px}.moon-mark span{font-size:20px;vertical-align:top}h1{font-size:57px;letter-spacing:-3px;margin:2px 0 17px;font-weight:900}h1 em{font-style:normal;color:#f4d69c}p{line-height:1.9;font-size:15px;color:#cad0de}.instructions{display:flex;flex-direction:column;gap:10px;font-size:13px;margin:23px 0;color:#d2d8e4}kbd{display:inline-block;border:1px solid #a5b3ca66;border-radius:5px;padding:1px 5px;font:inherit;font-size:12px}.primary{display:block;margin:20px auto 15px;border:0;border-radius:12px;background:#f6dba0;color:#393b47;padding:15px 26px;width:255px;max-width:95%;font-size:16px;font-weight:800;box-shadow:0 5px 0 #bda475;transition:transform .15s}.primary:hover{transform:translateY(-2px);background:#ffe4ac}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #bda475}.primary span{float:right}.modal>small{font-size:11px;color:#a8b4cb}#results{font-size:18px;line-height:2;color:#e4dbca}#results strong{display:block;color:#ffe1a3;font-size:44px}.touch-controls{display:none}footer{display:flex;align-items:center;gap:23px;margin:22px 5px;font-size:12px;color:#707580}footer>span{display:flex;align-items:center;gap:7px}.dot{width:13px;height:10px;border-radius:60% 60% 40% 40%;display:inline-block}.pink{background:#e9a9bc}.gold{background:#e9c261}.green{background:#a7bb89}.rainbow{background:linear-gradient(90deg,#e8a3b4,#edcd80,#a0c0a2,#ada3d6)}.pause-hint{margin-left:auto}.bottom-note{text-align:center;font-size:11px;letter-spacing:2px;color:#969a9e;margin:23px 0}@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media(max-width:650px){.app{width:94%;margin-top:14px}header{margin-bottom:15px}.brand{font-size:19px;gap:8px}.brand small{display:none}#pause{padding:9px 11px}#pause span{display:none}.dashboard{padding:14px 0}.dashboard>div{padding-left:12px}.dashboard span{font-size:9px;letter-spacing:.3px}.dashboard strong{font-size:23px}.dashboard .hearts{font-size:18px;letter-spacing:1px}.stage{aspect-ratio:3/4;max-height:66svh;min-height:360px}.stage-top{top:17px;left:16px;right:16px;font-size:11px}h1{font-size:43px}.moon-mark{height:55px;font-size:42px}.modal{padding:18px 10px}.instructions{margin:18px 0;gap:8px}.modal p{font-size:13px}.primary{margin-top:17px}footer{gap:12px;flex-wrap:wrap;justify-content:center;margin:17px 0;font-size:11px}.pause-hint{display:none}.bottom-note{margin:15px 0}.touch-controls{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:18px}.touch-controls button{touch-action:none;user-select:none;width:30%;height:53px;background:#fff;border:1px solid #dedfdc;color:#384766;border-radius:14px;font-size:26px;box-shadow:0 3px 0 #e8e6df}.touch-controls button:active{background:#f3deb0}.touch-controls span{font-size:11px;color:#91949d;white-space:nowrap}}@media(pointer:coarse) and (min-width:651px){.touch-controls{display:flex;justify-content:space-between;margin-top:12px}.touch-controls button{width:130px;height:48px;touch-action:none}.touch-controls span{align-self:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}}
[hidden]{display:none!important}

#songpyeon-basket{display:block;width:240px;height:150px;max-width:75%;object-fit:contain;margin:0 auto}.game-over .modal{padding:12px 18px}.game-over h1{margin:0 0 5px}.game-over #results{font-size:15px;line-height:1.5}.game-over #results strong{font-size:36px}.game-over .primary{margin:12px auto}.heart-guide{color:#bd587e}footer{flex-wrap:wrap}@media(max-width:650px){.game-over #songpyeon-basket{width:190px;height:119px}.game-over .eyebrow{display:none}.game-over h1{font-size:28px!important}.game-over .modal>small{font-size:10px}.game-over #results strong{font-size:30px}}
.game-over #songpyeon-basket{width:300px;height:167px;max-width:90%}@media(max-width:650px){.game-over #songpyeon-basket{width:250px;height:139px}}

.header-actions{display:flex;gap:8px;align-items:center}#sound{border:1px solid #dedfdc;border-radius:10px;padding:10px 12px;background:#fff;color:#5e6473;font-size:12px;white-space:nowrap}@media(max-width:650px){.header-actions{gap:5px}#sound{padding:9px 8px;font-size:11px}}

.site-return{display:inline-block;margin:0 0 15px;color:#626c7e;font-size:13px;text-decoration:none;padding:5px 0}.site-return:hover{text-decoration:underline}

/* Reduced-motion users still need time to read gameplay alerts. */
@media(prefers-reduced-motion:reduce){#announcement.show{animation:none;opacity:1;transform:none}}