:root{color:#fff;font-family:Inter,Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif;font-synthesis:none;background:#07163d;touch-action:none;-webkit-user-select:none;user-select:none}*{box-sizing:border-box}html,body,#game-shell{width:100%;height:100%;margin:0;overflow:hidden}body{background:#07163d}#game-shell{position:relative;isolation:isolate;min-height:100dvh;background:linear-gradient(#3ac8ff 0 62%,#0069c7 62% 100%)}#game{display:block;width:100%;height:100%;outline:none}.hidden{opacity:0!important;pointer-events:none!important}.hud{position:absolute;z-index:10;inset:max(14px,env(safe-area-inset-top)) 18px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:14px;transition:opacity .2s ease;pointer-events:none;text-shadow:0 2px 0 #05133a,0 0 12px rgba(0,0,0,.28)}.hud-card{display:flex;align-items:baseline;width:max-content;min-width:160px;padding:9px 15px;border:2px solid rgba(255,255,255,.75);border-radius:14px 5px;background:linear-gradient(135deg,#051239eb,#0a366ed1);box-shadow:0 8px 22px #04133438,inset 0 0 0 2px #33d7ff21}.hud-card span:first-child{color:#6be9ff;font-size:11px;font-weight:900;letter-spacing:.15em;margin-right:10px}.hud-card strong{font-size:clamp(20px,3vw,30px);font-style:italic;letter-spacing:.04em}.score-card{justify-self:start}.status-card{justify-self:end;gap:8px}.status-card #hearts{color:#ff3d69;font-size:clamp(17px,2.5vw,27px);letter-spacing:2px}.status-card small{color:#ffe238;font-size:10px;font-weight:900}.hud-center{text-align:center}.melon-meter{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:999px;background:#051239e6;border:2px solid #fff;font-size:23px}.melon-icon{filter:drop-shadow(0 2px 0 #10234d)}#mission{margin-top:6px;color:#fff164;font-size:12px;font-weight:900;letter-spacing:.08em}.combo{position:absolute;z-index:12;left:50%;top:25%;transform:translate(-50%,-50%) rotate(-5deg) scale(.7);opacity:0;color:#fff;font-size:clamp(42px,8vw,86px);font-weight:1000;font-style:italic;-webkit-text-stroke:3px #081a50;text-shadow:7px 7px 0 #ff176e,10px 10px 0 #07163d;transition:opacity .15s,transform .15s;pointer-events:none}.combo.show{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1)}.toast{position:absolute;z-index:12;left:50%;top:16%;transform:translate(-50%);min-width:min(520px,82vw);padding:12px 22px;border-radius:8px;background:#081848e8;border:2px solid #fff;text-align:center;font-weight:1000;letter-spacing:.08em;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(8px)}.overlay{position:absolute;z-index:30;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#fffffffa 0 18%,#ffffffd1 38%,#0823674d 80%),linear-gradient(135deg,#22d8ff,#ff1777);transition:opacity .3s ease,visibility .3s}.overlay.closed{opacity:0;visibility:hidden;pointer-events:none}.overlay.friend-result{align-items:start;padding-top:clamp(12px,4vh,42px);background:linear-gradient(180deg,#0a12312e,#0a123108 70%,#0a12312e)}.overlay.friend-result .sunburst{opacity:.08}.overlay.friend-result .panel{transform:scale(.78);transform-origin:top center}.sunburst{position:absolute;width:140vmax;height:140vmax;background:repeating-conic-gradient(from -10deg,rgba(255,255,255,.18) 0 7deg,transparent 7deg 15deg);animation:spin 50s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.panel{position:relative;width:min(760px,calc(100vw - 30px));padding:clamp(25px,5vw,52px);border:4px solid #07163d;border-radius:30px 8px;background:#ffffffed;color:#07163d;text-align:center;box-shadow:16px 16px #ff176e,-9px -9px #25d9ee,0 26px 80px #04113759}.panel:before,.panel:after{content:"";position:absolute;width:120px;height:14px;background:#ffe338;transform:skew(-20deg)}.panel:before{top:-12px;left:42px}.panel:after{bottom:-12px;right:42px;background:#ff176e}.eyebrow{margin:0 0 8px;color:#0874b8;font-weight:1000;letter-spacing:.2em}h1{margin:0;line-height:.82;transform:skew(-5deg)}h1 span,h1 b{display:block}h1 span{font-size:clamp(27px,6.5vw,66px);letter-spacing:-.05em}h1 b{color:#ff176e;font-size:clamp(54px,12vw,122px);letter-spacing:-.08em;text-shadow:5px 5px 0 #07163d;-webkit-text-stroke:2px #07163d}.lead{margin:22px 0 18px;font-size:clamp(18px,3vw,28px);font-weight:1000}.control-guide{display:flex;justify-content:center;gap:clamp(8px,3vw,26px);margin-bottom:22px}.control-guide div{display:flex;align-items:center;gap:6px}kbd{padding:5px 9px;border:2px solid #07163d;border-bottom-width:5px;border-radius:7px;background:#fff;font:900 12px inherit}.control-guide span{font-size:12px;font-weight:900}#start-button{min-width:min(380px,90%);padding:13px 28px 10px;border:0;border-radius:14px 4px;background:linear-gradient(135deg,#ff176e,#ff5a35);color:#fff;box-shadow:0 8px #07163d,0 13px 24px #ff176e4d;cursor:pointer;transform:translateY(-3px);transition:transform .1s,box-shadow .1s}#start-button:hover{filter:brightness(1.08)}#start-button:active{transform:translateY(5px);box-shadow:0 1px #07163d}#start-button span{display:block;font-size:clamp(23px,4vw,38px);font-weight:1000;font-style:italic;letter-spacing:.06em}#start-button small{font-weight:800}.best-score{margin:18px 0 0;color:#0874b8;font-size:13px;font-weight:1000;letter-spacing:.18em}.touch-controls{position:absolute;z-index:20;inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;justify-content:space-between;pointer-events:none;transition:opacity .2s}.touch-left,.touch-right{display:flex;align-items:end;gap:10px}.touch-controls button{width:clamp(62px,16vw,92px);height:clamp(62px,16vw,92px);border:3px solid rgba(255,255,255,.9);border-radius:50%;color:#fff;background:#07163dad;box-shadow:inset 0 0 0 4px #35d5ff33,0 6px 18px #00000038;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font:1000 clamp(16px,4vw,24px) inherit;pointer-events:auto;touch-action:none}.touch-controls button.pressed{transform:scale(.9);background:#20a9d9}.touch-controls .attack{width:clamp(86px,22vw,126px);height:clamp(72px,17vw,100px);border-radius:18px 6px;background:#ff176ee0}.rotate-note{display:none}@media(pointer:coarse),(max-width:820px){.touch-controls:not(.hidden){opacity:1}.hud{inset-inline:8px;gap:4px}.hud-card{min-width:0;padding:7px 9px;border-width:1px}.hud-card span:first-child,.status-card small,#mission{display:none}.hud-card strong{font-size:18px}.melon-meter{font-size:16px;padding:6px 10px;border-width:1px}.control-guide{display:none}}@media(orientation:portrait)and (pointer:coarse){.rotate-note{display:block;position:absolute;z-index:11;right:10px;top:70px;padding:6px 10px;border-radius:999px;background:#07163db3;font-size:10px;font-weight:800}.panel{padding-block:28px}.lead{margin-block:14px 18px}}@media(prefers-reduced-motion:reduce){.sunburst{animation:none}*{scroll-behavior:auto!important}}