*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{font-family:Fredoka,Hiragino Maru Gothic ProN,Yu Gothic UI,system-ui,sans-serif;background:linear-gradient(#5ec8ff,#9ee2ff 45%,#dff6ff 70%,#bff0a8);-webkit-user-select:none;user-select:none;color:#fff}#app,#app canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:block}#labels{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.head-label{position:absolute;transform:translate(-50%,-100%);font-weight:700;font-size:18px;padding:1px 9px;border-radius:12px;background:var(--c, #3ccf6e);border:3px solid #fff;box-shadow:0 3px #0000002e;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.25)}.head-label.blink{animation:blink .25s steps(2) infinite}#hud{position:fixed;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none;gap:12px}.panel{width:min(324px,44vw);padding:12px 17px 14px;border-radius:20px;background:#ffffffeb;border:4px solid var(--team);box-shadow:0 5px 0 var(--team-dark);color:#334}.panel.player{--team: #4cc94a;--team-dark: #2f9a33}.panel.cpu{--team: #3d9bff;--team-dark: #2470c9}.panel-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:24px}.panel-head .dot{width:16px;height:16px;border-radius:50%;background:var(--team);border:3px solid #fff;box-shadow:0 0 0 2px var(--team)}.panel-head .name{color:var(--team-dark)}.panel-head .tag{margin-left:auto;font-size:13px;padding:2px 8px;border-radius:10px;color:#fff;background:#9aa9ff;border:2px solid #fff;box-shadow:0 0 10px #c8d0ff;visibility:hidden}.panel.bracing .tag{visibility:visible}.tongue-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:2px}.label{font-size:14px;font-weight:700;letter-spacing:.06em;color:#8a93a6}.tongue-val{font-size:41px;font-weight:700;color:var(--c, #3ccf6e);line-height:1.05}.tongue-val.blink{animation:blink .25s steps(2) infinite}.bar{position:relative;height:15px;border-radius:8px;background:#e7ebf2;overflow:hidden;flex:1}.bar .fill{position:absolute;top:0;bottom:0;left:0;width:0%;border-radius:8px}.bar.tongue{height:17px}.bar.tongue .fill{background:var(--c, #3ccf6e)}.bar.tongue .floor{position:absolute;top:0;bottom:0;left:0;border-radius:8px;background:repeating-linear-gradient(135deg,#5a14288c 0,#5a14288c 4px,#5a14284d 4px,#5a14284d 8px)}.bar.stamina .fill{background:linear-gradient(90deg,#ffd23c,#ffb020)}.bar.stamina.low .fill{background:#ff5b5b;animation:blink .3s steps(2) infinite}.bar.jump .fill{background:linear-gradient(90deg,#ff8ac0,#ff4fa0)}.bar.jump.full .fill{background:linear-gradient(90deg,#ff4fa0,#ff2d4a)}.mini{display:flex;align-items:center;gap:8px;margin-top:9px}.mini .label{width:88px;flex-shrink:0}.ready{font-size:14px;font-weight:700;color:#ff2d7a;visibility:hidden;width:54px}.mini:has(.bar.stamina) .bar{margin-right:62px}.bar.jump.full+.ready{visibility:visible;animation:pop .6s ease-in-out infinite alternate}#center{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}#banner{font-size:clamp(56px,11vw,120px);font-weight:700;letter-spacing:.04em;-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 8px 0 rgba(0,0,0,.15)}#banner.win{color:#4cc94a}#banner.lose{color:#3d9bff}#banner.draw{color:#ffb020}#banner.count{color:#ff4fa0}#banner.show{animation:bannerIn .45s cubic-bezier(.2,1.6,.4,1)}#sub{margin-top:4px;font-size:22px;font-weight:600;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}#retry{margin-top:22px;pointer-events:auto;cursor:pointer;font-family:inherit;font-size:30px;font-weight:700;color:#fff;padding:10px 40px;border-radius:40px;border:5px solid #fff;background:#ff4fa0;box-shadow:0 6px #c92d7a}#retry small{font-size:16px;opacity:.85}#retry:hover{transform:translateY(-2px)}#retry:active{transform:translateY(3px);box-shadow:0 3px #c92d7a}#difficulty{margin-top:16px;display:flex;gap:14px;pointer-events:auto}#difficulty[hidden]{display:none}#difficulty button{cursor:pointer;font-family:inherit;font-size:24px;font-weight:700;color:#fff;padding:8px 28px;border-radius:30px;border:4px solid #fff}#difficulty button[data-diff=easy]{background:#4cc94a;box-shadow:0 5px #2f9a33}#difficulty button[data-diff=normal]{background:#3d9bff;box-shadow:0 5px #2470c9}#difficulty button.current{outline:4px solid #ffd166;outline-offset:2px}#difficulty button:hover{transform:translateY(-2px)}#difficulty button:active{transform:translateY(3px)}#banner.title{color:#ff4fa0;font-size:clamp(44px,8vw,88px)}.diff-label{font-size:13px;color:#8a93a6;font-weight:600}#rules-button,#rules-dialog button,#friend-button,#room-ui button,#room-exit{padding:9px 24px;border:3px solid #fff;border-radius:24px;background:#fff;color:#287d45;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 4px #1e5a2d40}#rules-button{margin-top:18px;pointer-events:auto}#friend-button{margin-top:10px;background:#3d9bff;color:#fff;pointer-events:auto}#room-ui{margin-top:16px;padding:16px;border:3px solid #fff;border-radius:18px;background:#277943e0;text-align:center;pointer-events:auto}#room-status{max-width:min(90vw,420px);font-size:18px;font-weight:700}#room-link{display:block;width:min(80vw,400px);margin-top:10px;padding:8px;border:2px solid #fff;border-radius:8px;font:13px inherit;color:#294536}#room-ui button{margin:10px 4px 0;font-size:15px}#room-exit{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:4;pointer-events:auto;font-size:14px}#room-ui[hidden],#room-link[hidden],#room-copy[hidden],#room-exit[hidden],#friend-button[hidden]{display:none}#rules-button:hover,#rules-dialog button:hover{background:#e8f8e9}#rules-button:focus-visible,#rules-dialog button:focus-visible{outline:3px solid #ff4fa0;outline-offset:3px}#rules-dialog{margin:auto;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:4px solid #4cc94a;border-radius:24px;background:#f7fff3;color:#294536;line-height:1.7;overflow-y:auto;box-shadow:0 8px 30px #173c3840}#rules-dialog::backdrop{background:#183c416b}#rules-dialog h2{font-size:25px;margin-bottom:12px}#rules-dialog ul{padding-left:20px;margin:14px 0}#rules-dialog li+li{margin-top:8px}#rules-dialog .rules-touch{font-size:14px}#rules-dialog form{margin-top:18px;text-align:center}#rules-dialog button{background:#4cc94a;color:#173d26}#hint{position:fixed;bottom:12px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:7px 16px;border-radius:16px;background:#285a2880;font-size:14px;font-weight:500;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}#hint b{background:#fff;color:#3a6;border-radius:6px;padding:0 6px;margin-right:3px}.pop-text{position:absolute;transform:translate(-50%,-100%);font-size:30px;font-weight:700;white-space:nowrap;-webkit-text-stroke:5px #fff;paint-order:stroke fill;animation:popUp .9s ease-out forwards}@keyframes popUp{0%{transform:translate(-50%,-60%) scale(.4);opacity:0}20%{transform:translate(-50%,-100%) scale(1.15);opacity:1}70%{opacity:1}to{transform:translate(-50%,-190%) scale(1);opacity:0}}@keyframes blink{50%{opacity:.25}}@keyframes pop{0%{transform:scale(1)}to{transform:scale(1.15)}}@keyframes bannerIn{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}#touch-controls{display:none}@media(any-pointer:coarse),(max-width:600px){#room-exit{top:154px}#touch-controls{position:fixed;z-index:5;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:12px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}#touch-controls button{display:grid;place-items:center;min-width:44px;min-height:44px;border:2px solid rgba(255,255,255,.95);border-radius:14px;background:#274e2bb3;box-shadow:0 3px #16301999;color:#fff;font:700 20px Fredoka,Hiragino Maru Gothic ProN,Yu Gothic UI,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto}#touch-controls button:active{transform:translateY(2px);box-shadow:none}.touch-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px;pointer-events:auto}.touch-pad [data-direction=up]{grid-column:2;grid-row:1}.touch-pad [data-direction=left]{grid-column:1;grid-row:2}.touch-pad [data-direction=down]{grid-column:2;grid-row:2}.touch-pad [data-direction=right]{grid-column:3;grid-row:2}.touch-actions{display:flex;align-items:flex-end;gap:8px;pointer-events:auto}.touch-actions button{width:clamp(60px,18vw,76px);height:64px;padding:4px;border-radius:18px;font-size:clamp(13px,4vw,16px)!important;line-height:1.15;text-align:center}.touch-actions [data-action=brace] small{display:block;margin-top:2px;font-size:10px;opacity:.9}.touch-actions [data-action=brace]{background:#306940d1}.touch-actions [data-action=jump]{background:#d23473d6}#hint{display:none}#hud{top:max(8px,env(safe-area-inset-top,0px));left:8px;right:8px;gap:8px}.panel{width:min(270px,calc(50vw - 14px));padding:6px 8px 8px;border-width:3px;border-radius:14px}.panel-head{gap:5px;font-size:15px}.panel-head .dot{width:12px;height:12px;border-width:2px}.panel-head .tag{padding:1px 5px;font-size:10px}.diff-label{font-size:10px}.tongue-val{font-size:31px}.mini{gap:5px;margin-top:5px}.mini .label{width:60px;font-size:10px}.mini:has(.bar.stamina) .bar{margin-right:0}.ready{width:30px;font-size:9px}}@media(max-width:500px){.panel-head{white-space:nowrap}.panel-head .diff-label{display:none}}