:root{--bg:#0b0d16;--bg-card:#151829;--bg-card-2:#1c2036;--line:#2a2f4a;--text:#f1f5f9;--text-dim:#94a3b8;--primary:#6366f1;--primary-light:#818cf8;--accent:#f472b6;--depth:#39d0ff;--juice:#f472b6;--sound:#facc15;--special:#a78bfa;color:var(--text);background:var(--bg);font-family:Hiragino Sans,Segoe UI,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}#viewport{transition:left .25s;position:fixed;inset:0}#viewport canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.status{text-align:center;color:var(--text-dim);place-items:center;margin:0;padding:24px;display:grid;position:absolute;inset:0}.hud{pointer-events:none;position:absolute;inset:0}.hud-score{text-align:center;font-weight:800;position:absolute;top:18px;left:0;right:0}.hud-score .label{letter-spacing:.2em;color:var(--text-dim);margin-right:8px;font-size:12px}.hud-score .value{font-variant-numeric:tabular-nums;font-size:30px}.hud-combo{text-align:center;opacity:0;color:#e2e8f0;font-size:28px;font-weight:900;position:absolute;top:66px;left:0;right:0}.hud-combo[data-tier="1"]{color:#4ade80}.hud-combo[data-tier="2"]{color:#facc15}.hud-combo[data-tier="3"]{color:#fb923c}.hud-combo[data-tier="4"]{color:#f472b6}.hud-combo.show{animation:.9s ease-out forwards pop}.hud-praise{position:absolute;inset:0}.praise-pop{transform:translate(-50%, -50%) rotate(var(--tilt)) scale(var(--size));white-space:nowrap;background:linear-gradient(180deg, #fff 10%, var(--c1) 55%, var(--c2));color:#0000;filter:drop-shadow(0 3px 0 #00000073) drop-shadow(0 0 16px var(--c1));--c1:#ffd43b;--c2:#ff922b;-webkit-background-clip:text;background-clip:text;font-size:clamp(34px,6.4vw,76px);font-style:italic;font-weight:900;animation:1.3s cubic-bezier(.2,1.6,.4,1) forwards praise;position:absolute}.praise-pop[data-hue="1"]{--c1:#ff6b9d;--c2:#c2255c}.praise-pop[data-hue="2"]{--c1:#74c0fc;--c2:#1c7ed6}.praise-pop[data-hue="3"]{--c1:#8ce99a;--c2:#2f9e44}.praise-pop[data-hue="4"]{--c1:#b197fc;--c2:#7048e8}.praise-pop[data-hue="5"]{--c1:#ffa94d;--c2:#e8590c}@keyframes praise{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--tilt)) scale(calc(var(--size) * 2.4))}14%{opacity:1;transform:translate(-50%, -50%) rotate(var(--tilt)) scale(calc(var(--size) * .9))}24%{transform:translate(-50%, -50%) rotate(var(--tilt)) scale(var(--size))}75%{opacity:1}to{opacity:0;transform:translate(-50%, -62%) rotate(var(--tilt)) scale(calc(var(--size) * 1.05))}}.final-title{text-shadow:none;letter-spacing:.02em;background:linear-gradient(90deg,#ff6b6b,#ffd43b,#69db7c,#4dabf7,#da77f2,#ff6b6b) 0 0/200% 100%;color:#0000;filter:drop-shadow(0 4px #00000080)drop-shadow(0 0 24px #ffd43b80);-webkit-background-clip:text;background-clip:text;font-size:clamp(44px,8vw,96px);font-style:italic;font-weight:900;animation:.9s cubic-bezier(.2,.9,.3,1.2) both stamp,3s linear infinite rainbow}@keyframes stamp{0%{opacity:0;transform:scale(2.6)rotate(-6deg)}15%{opacity:1;transform:scale(.92)rotate(0)}25%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes rainbow{to{background-position:200% 0}}.hud-msg{text-align:center;text-shadow:0 2px 10px #000c;opacity:0;font-size:18px;font-weight:700;transition:opacity .3s;position:absolute;top:46%;left:0;right:0}.hud-msg.show{opacity:1}.final-label{letter-spacing:.25em;color:var(--text-dim);font-size:14px}.final-value{font-variant-numeric:tabular-nums;text-shadow:0 0 20px #ffd43b99;font-size:64px;font-weight:900}.final-again{color:var(--text-dim);margin-top:4px;font-size:15px}.hud-3d{text-align:center;opacity:0;letter-spacing:.02em;color:#fff;text-shadow:-.06em 0 #ff3b6b,.06em 0 #39d0ff,0 0 40px #39d0ff73;font-size:clamp(64px,14vw,168px);font-style:italic;font-weight:900;position:absolute;top:30%;left:0;right:0}.hud-3d.show{animation:1.6s cubic-bezier(.2,.9,.3,1.2) forwards slam}@keyframes slam{0%{opacity:0;transform:scale(2.6)rotate(-6deg)}12%{opacity:1;transform:scale(.92)rotate(0)}20%{transform:scale(1.04)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}.cutin{opacity:0;position:absolute;inset:0;overflow:hidden}.cutin .band{background:linear-gradient(90deg,#ff3b6beb,#818cf8eb);height:14%;position:absolute;top:7%;left:-10%;right:-10%;transform:skewY(-6deg);box-shadow:0 0 0 4px #ffffffd9,0 0 40px #ff3b6b99}.cutin img{aspect-ratio:1;object-fit:cover;background:#1c2036;border:6px solid #fff;border-radius:50%;height:21%;position:absolute;top:3.5%;left:52%}.cutin .word{color:#fff;text-shadow:0 3px #00000059;white-space:nowrap;font-size:clamp(26px,4.4vw,54px);font-style:italic;font-weight:900;position:absolute;top:8.5%;left:50%;transform:translate(-115%)}.cutin.show{animation:.75s linear forwards cutin-fade}.cutin.show .band{animation:.75s cubic-bezier(.2,.9,.3,1) forwards cutin-band}.cutin.show img{animation:.75s cubic-bezier(.2,.9,.3,1) forwards cutin-char}@keyframes cutin-fade{0%,80%{opacity:1}to{opacity:0}}@keyframes cutin-band{0%{transform:skewY(-6deg)scaleY(0)}15%{transform:skewY(-6deg)scaleY(1)}to{transform:skewY(-6deg)scaleY(1)}}@keyframes cutin-char{0%{transform:translate(120vw)}25%{transform:translate(10%)}85%{transform:translate(-10%)}to{transform:translate(-120vw)}}.dim{z-index:2;perspective:420px;background:0 0;border:0;outline:none;width:64px;height:64px;padding:0;position:absolute;bottom:22px;right:22px}.dim:focus-visible{outline:2px solid var(--primary-light);outline-offset:6px;border-radius:6px}.cube{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.4,.5,1);animation:2.4s ease-in-out infinite breathe;position:absolute;inset:14px}.cube .f{background:#4dabf729;border:2px solid #8fb8ff;position:absolute;inset:0;box-shadow:inset 0 0 10px #4dabf759}.cube .front{transform:translateZ(18px)}.cube .back{transform:rotateY(180deg)translateZ(18px)}.cube .right{background:#f472b62e;border-color:#f9a8d4;transform:rotateY(90deg)translateZ(18px)}.cube .left{background:#f472b62e;border-color:#f9a8d4;transform:rotateY(-90deg)translateZ(18px)}.cube .top{background:#39d0ff33;border-color:#7ee8ff;transform:rotateX(90deg)translateZ(18px)}.cube .bottom{transform:rotateX(-90deg)translateZ(18px)}.dim:not(.is-3d):not(.reveal) .cube .f:not(.front){opacity:0}.dim:hover .cube{transform:rotateX(-8deg)rotateY(10deg)}@keyframes breathe{0%,to{scale:1}50%{scale:1.08}}.dim.reveal .cube{animation:1.35s cubic-bezier(.5,0,.3,1) forwards reveal}.dim.reveal .cube .f{opacity:1;transition:opacity .15s}@keyframes reveal{0%{transform:rotateX(0)rotateY(0)}30%{transform:rotateX(-32deg)rotateY(42deg)scale(1.5)}45%{opacity:1;transform:rotateX(-32deg)rotateY(222deg)scale(1.6)}to{opacity:0;transform:translate(-42vw,-38vh)rotateX(-32deg)rotateY(762deg)scale(9)}}.dim.is-3d:not(.reveal) .cube{animation:6s linear infinite spin}@keyframes spin{0%{transform:rotateX(-24deg)rotateY(0)}to{transform:rotateX(-24deg)rotateY(360deg)}}@keyframes pop{0%{opacity:0;transform:translateY(-14px)scale(1.5)}15%{opacity:1;transform:translateY(0)scale(1)}70%{opacity:1}to{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.hud-combo.show{opacity:1;animation-duration:10ms}.praise-pop{animation-timing-function:linear}.hud-3d.show{animation-duration:1.2s;animation-timing-function:linear}.cutin.show img{animation-timing-function:linear}.cube,.dim.is-3d:not(.reveal) .cube{animation:none}}