: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}.overlay.hit-result{align-items:start;padding-top:clamp(12px,4vh,42px);background:linear-gradient(180deg,#07163d57,#07163d14 62%,#07163d33)}.overlay.hit-result .sunburst{opacity:.035}.overlay.hit-result .panel{z-index:2;transform:scale(.78);transform-origin:top center;background:#ffffffe0}.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)}}.hit-watermelon{display:none}.overlay.hit-result .hit-watermelon{display:block;position:absolute;z-index:1;right:clamp(18px,7vw,130px);bottom:clamp(28px,11vh,120px);width:min(280px,26vw);height:auto;transform:rotate(7deg);filter:drop-shadow(0 18px 12px rgba(8,17,38,.38))}.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}.mode-switch{display:flex;justify-content:center;gap:8px;margin:14px auto 10px}.mode-button{min-width:150px;padding:9px 16px;border:2px solid #07163d;border-radius:999px;background:#e7f5ff;color:#0874b8;font:1000 15px inherit;cursor:pointer}.mode-button.selected{background:#07163d;color:#fff;box-shadow:0 4px #ff176e}.room-menu{margin:10px auto 20px;max-width:620px;text-align:left}.online-options.mode-hidden{display:none}.room-field{display:grid;gap:5px;color:#0874b8;font-size:12px;font-weight:1000}.room-field input{width:100%;padding:10px 12px;border:2px solid #9bb9d8;border-radius:8px;background:#f6fbff;color:#07163d;font:900 18px inherit;outline:none}.room-field input:focus{border-color:#ff176e;box-shadow:0 0 0 3px #ff176e24}.room-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:8px}.room-button,.room-start,.role-buttons button{min-height:42px;padding:8px 13px;border:2px solid #07163d;border-radius:8px;background:#25c7e8;color:#07163d;font:1000 13px inherit;cursor:pointer}.room-button.secondary{background:#ffe338}.room-status{min-height:20px;margin-top:8px;color:#516c8a;font-size:12px;font-weight:900;text-align:center}.role-picker{margin-top:10px;padding:12px;border:2px dashed #ff176e;border-radius:12px;background:#ffefb480;text-align:center}.room-code-display{color:#0874b8;font-size:13px;font-weight:1000;letter-spacing:.12em}.room-code-display strong{color:#ff176e;font-size:30px;letter-spacing:.18em}.room-players{margin:5px 0 9px;color:#334e71;font-size:12px;font-weight:900}.role-buttons{display:flex;justify-content:center;gap:8px}.role-buttons button[data-role=player]{background:#ff5a72;color:#fff}.role-buttons button[data-role=friend]{background:#76d9a1}.role-buttons button.selected{outline:4px solid #07163d;transform:translateY(-2px)}.room-start{display:block;margin:10px auto 0;background:#ff176e;color:#fff}.guide-controls{position:absolute;z-index:20;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);display:grid;gap:7px;min-width:min(620px,92vw);padding:10px;border:2px solid rgba(255,255,255,.88);border-radius:14px;background:#07163dbd;text-align:center;transition:opacity .2s}.guide-controls>div{display:flex;justify-content:center;gap:7px}.guide-controls button{min-width:86px;min-height:40px;border:2px solid #fff;border-radius:8px;background:#2b86bd;color:#fff;font:1000 16px inherit;cursor:pointer}.guide-controls button:active{transform:scale(.95);background:#ff176e}.guide-controls .guide-swing{background:#ff176e}.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}.mode-button{min-width:0;flex:1}.room-row{grid-template-columns:1fr 1fr}.room-row .room-code-field{grid-column:1 / -1}.room-row .room-button{min-height:38px}.guide-controls{min-width:96vw}}@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}.overlay.hit-result .hit-watermelon{right:8px;bottom:8vh;width:170px}}@media(prefers-reduced-motion:reduce){.sunburst{animation:none}*{scroll-behavior:auto!important}}