:root{--px:3px;--lavender:#e9d9f7;--pink:#ff7ccf;--cyan:#74f5ff;--ink:#2a2350}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:linear-gradient(90deg, transparent 0 6%, var(--pink) 6% 22%, transparent 22% 78%, var(--pink) 78% 94%, transparent 94%) top / 100% 6px no-repeat, linear-gradient(90deg, transparent 0 10%, var(--cyan) 10% 40%, transparent 40% 62%, var(--cyan) 62% 90%, transparent 90%) bottom / 100% 6px no-repeat, radial-gradient(circle at 50% 40%, #f6ecff, var(--lavender) 70%);color:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:12px;font:600 14px/1.4 ui-rounded,SF Pro Rounded,system-ui,sans-serif;display:flex;overflow:hidden}.tv{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--pink), 0 18px 40px #3c145a59;background:linear-gradient(160deg,#8fe8e2,#3b8fdb);border-radius:26px;padding:10px;position:relative}.screen{border-radius:18px;line-height:0;position:relative;overflow:hidden}.screen canvas{image-rendering:pixelated;filter:blur(calc(var(--px) * .16)) saturate(1.25) contrast(1.05);display:block}.screen:after{content:"";pointer-events:none;background:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--px) * .6), #00001e38 calc(var(--px) * .6), #00001e38 var(--px)), radial-gradient(ellipse at center, transparent 60%, #00002859 100%);position:absolute;inset:0}.help{flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0;padding:0;list-style:none;display:flex}kbd{text-align:center;min-width:1.6em;font:inherit;background:#fff;border-radius:5px;padding:0 5px;display:inline-block;box-shadow:0 2px #b9a6d6}.touch-only,.rotate{display:none}body.touch{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;gap:0;height:100dvh;padding:0}body.touch .help{display:none}body.touch .tv{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--pink);border-radius:16px;padding:4px}body.touch .screen{border-radius:12px}body.touch #touch-zone{z-index:10;touch-action:none;display:block;position:fixed;inset:0}.stick{opacity:.55;pointer-events:none;width:104px;height:104px;top:calc(100% - 76px - env(safe-area-inset-bottom));background:radial-gradient(circle,#ffffff40,#ffffff14 70%);border:3px solid #ffffff8c;border-radius:50%;margin:-52px 0 0 -52px;position:absolute;box-shadow:0 0 0 2px #ff7ccf80}.stick.p1{left:calc(76px + env(safe-area-inset-left))}.stick.p2{left:calc(100% - 76px - env(safe-area-inset-right));border-color:#ffba78cc;display:none}body[data-players="2"] .stick.p2{display:block}.stick.active{opacity:.9}.knob{background:radial-gradient(circle at 35% 35%, #fff, #ffd1f0 60%, var(--pink));border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;position:absolute;top:50%;left:50%;box-shadow:0 3px 8px #3c145a66}.stick.p2 .knob{background:radial-gradient(circle at 35% 35%,#fff,#ffe0b8 60%,#ffa040)}body.touch[data-mode=play] .stick,body.touch[data-mode=paused] .stick{visibility:visible}body.touch[data-mode=menu] .stick{visibility:hidden}.touch-menu,.touch-corner{z-index:20;gap:12px;position:fixed}body.touch[data-mode=menu] .touch-menu{left:50%;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;transform:translate(-50%)}body.touch .touch-corner{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));display:flex}body.touch[data-mode=menu] #btn-pause{display:none}.touch-menu button,.touch-corner button{color:var(--ink);border:3px solid var(--pink);touch-action:manipulation;background:linear-gradient(#fff,#ffe9f8);border-radius:999px;padding:12px 20px;font:800 16px/1 ui-rounded,SF Pro Rounded,system-ui,sans-serif;box-shadow:0 4px #c45aa0}.touch-corner button{opacity:.85;width:44px;height:44px;padding:0}.touch-corner button.off{opacity:.5;text-decoration:line-through}.touch-menu button:active,.touch-corner button:active{transform:translateY(3px);box-shadow:0 1px #c45aa0}@media (orientation:portrait){body.touch .rotate{z-index:50;background:var(--lavender);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:20px;display:flex;position:fixed;inset:0}.rotate .phone{font-size:64px;animation:1.6s ease-in-out infinite tilt}}@keyframes tilt{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}