:root{--bg:#07041a;--fg:#fdf7ff;--muted:#b9a8e8;--accent:#ff5fa2;--accent2:#3fffff;--gold:#fff35c;--panel:#12082c9e;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--fg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;overflow:hidden}.app{touch-action:manipulation;height:100dvh;position:fixed;inset:0;overflow:hidden}button{touch-action:manipulation}.stage{touch-action:none;overscroll-behavior:none;position:absolute;inset:0}.game-canvas{touch-action:none;width:100%;height:100%;display:block}.joy-base{pointer-events:none;opacity:0;background:radial-gradient(circle,#ff5fa22e,#ffffff0a);border:2px solid #ffffff59;border-radius:50%;width:104px;height:104px;margin:-52px 0 0 -52px;transition:opacity .12s;position:absolute}.joy-knob{background:radial-gradient(circle at 35% 35%,#fff,#ff9bc8 60%,#ff5fa2);border-radius:50%;width:46px;height:46px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px #ff5fa2cc}.hud{pointer-events:none;padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 12px) 0 calc(var(--safe-l) + 12px);position:absolute;top:0;left:0;right:0}.hud-row{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.hud-block{text-shadow:0 2px 6px #000000b3;min-width:90px}.hud-block.center{text-align:center}.hud-block.right{text-align:right}.label{letter-spacing:.18em;color:var(--muted);font-size:11px;font-weight:700}.value{font-variant-numeric:tabular-nums;font-size:22px;font-weight:900}.value.small{font-size:16px}.sub{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.lives{justify-content:flex-end;gap:5px;margin-top:4px;display:flex}.life{background:radial-gradient(circle at 35% 35%,#ffe0b8 25%,#ff9b3d 60%);border-radius:50%;width:18px;height:18px;box-shadow:0 0 8px #ff9b3dcc}.progress{background:#ffffff1f;border:1px solid #ffffff40;border-radius:8px;max-width:520px;height:14px;margin:8px auto 0;position:relative;overflow:visible}.progress .bar{background:linear-gradient(90deg, var(--accent2), var(--accent), var(--gold));border-radius:8px;height:100%;transition:width .35s ease-out}.progress .target{background:var(--gold);width:3px;box-shadow:0 0 6px var(--gold);border-radius:2px;margin-left:-1.5px;position:absolute;top:-4px;bottom:-4px}.progress .pct{font-variant-numeric:tabular-nums;font-size:13px;font-weight:800;position:absolute;top:16px;right:0}.progress .pct span{color:var(--muted);font-weight:600}.buttons{right:calc(var(--safe-r) + 12px);top:calc(var(--safe-t) + 124px);pointer-events:auto;flex-direction:column;gap:8px;display:flex;position:absolute}.icon-btn{background:var(--panel);width:44px;height:44px;color:var(--fg);cursor:pointer;-webkit-backdrop-filter:blur(6px);border:1px solid #ffffff4d;border-radius:12px;font-size:17px;font-weight:800}.icon-btn.on{border-color:var(--gold);color:var(--gold)}.drawing-badge{left:50%;top:calc(var(--safe-t) + 100px);letter-spacing:.3em;color:#ff4fa0;text-shadow:0 0 10px #ff4fa0e6;font-size:12px;font-weight:900;animation:.5s steps(2,end) infinite blink;position:absolute;transform:translate(-50%)}.hint{left:0;right:0;bottom:calc(var(--safe-b) + 28px);text-align:center;color:var(--fg);opacity:.85;pointer-events:none;text-shadow:0 2px 8px #000;font-weight:800;animation:1.6s ease-in-out infinite pulse;position:absolute}.toasts{pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%)}.toast{text-shadow:0 3px 10px #000c;font-size:28px;font-weight:900;animation:1.4s ease-out forwards toast}.toast.good{color:var(--gold)}.toast.bad{color:#ff4a5e;font-size:34px}.toast.info{color:var(--accent2);font-size:20px}.overlay{text-align:center;padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0;overflow-y:auto}.overlay.dim{-webkit-backdrop-filter:blur(4px);background:#07041ab3}.overlay.title{background:radial-gradient(#07041a33,#07041ad9);justify-content:center}.overlay.clear{padding-top:calc(var(--safe-t) + 120px);padding-bottom:calc(var(--safe-b) + 40px);justify-content:space-between}.overlay.clear .clear-top{flex-direction:column;align-items:center;gap:8px;display:flex}.overlay.intro{cursor:pointer;background:#07041a59}.overlay h2{letter-spacing:.06em;margin:0;font-size:clamp(36px,9vw,64px);font-weight:900}.logo{letter-spacing:.02em;margin:0;font-size:clamp(64px,18vw,140px);font-weight:900;line-height:.9}.logo span{background:linear-gradient(#fff,#ff9bc8 55%,#ff5fa2);color:#0000;filter:drop-shadow(0 6px 18px #ff5fa299);-webkit-background-clip:text;background-clip:text}.logo b{color:var(--accent2);vertical-align:top;text-shadow:0 0 20px #3fffffcc;margin-left:4px;font-size:.6em}.tagline{letter-spacing:.4em;color:var(--muted);margin:0;font-size:16px;font-weight:700}.big-btn{color:#200830;cursor:pointer;background:linear-gradient(180deg, #fff79a, var(--gold) 50%, #ffb13d);border:none;border-radius:999px;margin-top:6px;padding:16px 40px;font-size:20px;font-weight:900;box-shadow:0 6px #b8701a,0 10px 30px #fff35c73}.big-btn:active{transform:translateY(4px);box-shadow:0 2px #b8701a}.big-btn.delayed{animation:.4s 1.2s both appear}.mode-switch{background:var(--panel);border:1px solid #ffffff59;border-radius:999px;gap:0;display:flex;overflow:hidden}.mode-switch button{color:var(--muted);cursor:pointer;touch-action:manipulation;background:0 0;border:none;padding:8px 16px;font-size:13px;font-weight:800}.mode-switch button.sel{background:var(--accent2);color:#120830}.ghost-btn{color:var(--fg);cursor:pointer;background:0 0;border:1px solid #fff6;border-radius:999px;padding:10px 28px;font-size:15px;font-weight:700}.howto{flex-wrap:wrap;justify-content:center;gap:14px;max-width:760px;margin-top:8px;display:flex}.howto-col{text-align:left;background:var(--panel);-webkit-backdrop-filter:blur(6px);border:1px solid #ffffff26;border-radius:14px;flex:300px;padding:10px 16px}.howto h3{letter-spacing:.2em;color:var(--accent2);margin:4px 0 6px;font-size:14px}.howto ul{margin:0;padding-left:18px;font-size:13px;line-height:1.65}.howto b{color:var(--gold)}.dot{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin:0 4px 0 2px;display:inline-block}.dot.red{background:#ff2a4a;box-shadow:0 0 6px #ff2a4a}.dot.eye{background:radial-gradient(circle,#050010 25%,#18b8ff 30% 50%,#fff 55%)}.hi{color:var(--muted);letter-spacing:.2em;font-size:13px;font-weight:700}.stage-no{color:var(--gold);text-shadow:0 0 24px #fff35c99;font-size:clamp(40px,11vw,72px);font-weight:900;animation:.5s ease-out zoomin}.stage-name{font-size:26px;font-weight:900}.stage-target{color:var(--accent2);font-size:18px;font-weight:800}.blink{margin-top:18px;font-weight:800;animation:1.2s ease-in-out infinite pulse}.stat{color:var(--muted);font-size:18px;font-weight:700}.stat b{color:var(--fg);font-variant-numeric:tabular-nums;margin-left:8px;font-size:24px}.record{color:var(--gold);font-size:24px;font-weight:900;animation:.8s infinite pulse}.over{color:#ff4a5e}.sub-note{color:var(--muted);margin-top:-6px;font-size:13px}.reveal{color:var(--gold);text-shadow:0 2px 10px #000c;font-size:20px;font-weight:900;animation:.5s .4s both appear}.rainbow{background:linear-gradient(90deg,#3fffff,#ff5fa2,#fff35c,#3fffff) 0 0/200% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:2s linear infinite shine,.5s ease-out zoomin}@keyframes blink{50%{opacity:.3}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes toast{0%{opacity:0;transform:translateY(10px)scale(.6)}15%{opacity:1;transform:translateY(0)scale(1.15)}30%{transform:scale(1)}to{opacity:0;transform:translateY(-50px)}}@keyframes zoomin{0%{opacity:0;transform:scale(2.2)}to{opacity:1;transform:scale(1)}}@keyframes appear{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes shine{to{background-position:200% 0}}@media (width<=520px){.value{font-size:18px}.hud-block{min-width:70px}.howto ul{font-size:12px}}@media (height<=520px){.howto{display:none}}
