*{box-sizing:border-box}html,body{color:#fff;background:#000;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}#app{touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}#game{width:100%;height:100%;display:block;position:absolute;inset:0}#ui{pointer-events:none;position:absolute;inset:0}#ui .overlay[hidden]{display:none}:root{--ui-font:system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;--ink:#0b0d16;--panel:#101320e0;--panel-line:#ffffff1f;--text:#f4f6ff;--text-dim:#a3a9c2;--escape:#33d6ff;--chase:#ff4a3d;--hot:#ff3b5c;--gold:#ffd23f;--gold-deep:#e89b00;--x:#000;--btn-h:60px;--fade:.15s}#ui{font-family:var(--ui-font);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;font-weight:700}#ui .overlay{z-index:10;pointer-events:none;position:absolute;inset:0}.screen{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));overscroll-behavior:contain;pointer-events:auto;animation:screen-in var(--fade) ease-out both;background:radial-gradient(at 50% 40%,#0b0d168c,#0b0d16e0 70%),#00000040;flex-direction:column;align-items:center;gap:clamp(10px,2.4vmin,22px);display:flex;position:absolute;inset:0;overflow-y:auto}.screen>:first-child{margin-top:auto}.screen>:last-child{margin-bottom:auto}.screen--leave{animation:screen-out var(--fade) ease-in both;pointer-events:none}.screen--passive{pointer-events:none;background:0 0}@keyframes screen-in{0%{opacity:0}to{opacity:1}}@keyframes screen-out{0%{opacity:1}to{opacity:0}}#ui .btn{font:inherit;letter-spacing:.04em;min-height:var(--btn-h);min-width:180px;color:var(--text);box-shadow:inset 0 0 0 2px var(--panel-line);cursor:pointer;touch-action:manipulation;background:#ffffff1a;border:0;border-radius:999px;padding:0 28px;font-size:clamp(17px,2.6vmin,22px);font-weight:800;transition:transform 90ms ease-out,filter 90ms,background-color 90ms}#ui .btn:hover{filter:brightness(1.12)}#ui .btn:active{transform:translateY(2px)scale(.98)}#ui :is(.btn,.mode-card):focus-visible{outline-offset:4px;outline:3px solid #fff}#ui .btn--primary{color:#1a0505;background:linear-gradient(180deg, #ff6b5e, var(--chase));box-shadow:0 6px #a3170e,0 10px 24px #ff4a3d59}#ui .btn--primary:active{transform:translateY(4px);box-shadow:0 2px #a3170e,0 4px 12px #ff4a3d4d}#ui .btn--xl{letter-spacing:.18em;min-width:260px;min-height:72px;padding-left:calc(28px + .18em);font-size:clamp(24px,4.4vmin,34px);font-weight:900}#ui .btn--secondary{background:#ffffff1f}#ui .btn--ghost{min-width:140px;color:var(--text-dim);background:0 0}#ui .btn--share{background:var(--x);box-shadow:inset 0 0 0 2px #ffffff59}.title-block{text-align:center;margin-bottom:clamp(6px,2.4vmin,20px)}.logo{letter-spacing:-.02em;margin:0;font-size:clamp(48px,13vmin,140px);font-weight:900;line-height:1;animation:.42s cubic-bezier(.2,1.6,.4,1) both logo-in;display:inline-grid;position:relative;transform:rotate(-6deg)skew(-8deg)}.logo>span{white-space:nowrap;grid-area:1/1;position:relative}.logo__main{color:#fff;-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill}.logo__echo{-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill}.logo__echo--1{color:var(--chase);transform:translate(.07em,.07em)}.logo__echo--2{color:#b3261c;transform:translate(.14em,.14em)}.logo__echo--3{color:#6a1610;transform:translate(.21em,.21em)}@keyframes logo-in{0%{opacity:0;transform:rotate(-6deg)skew(-8deg)scale(1.6)}to{opacity:1;transform:rotate(-6deg)skew(-8deg)scale(1)}}.subtitle{letter-spacing:.22em;text-transform:uppercase;color:var(--escape);margin:clamp(28px,6vmin,56px) 0 0;font-size:clamp(16px,3.2vmin,28px);font-style:italic;font-weight:900}.howto{color:var(--text-dim);flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:0;padding:0;font-size:clamp(13px,2vmin,16px);list-style:none;display:flex}.kbd{color:var(--text);background:#ffffff1a;border-radius:6px;padding:2px 8px;font-size:.92em;display:inline-block;box-shadow:inset 0 -2px #ffffff1f}.screen-heading{letter-spacing:.1em;margin:0;font-size:clamp(20px,4vmin,34px);font-weight:900}.mode-cards{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:clamp(12px,3vmin,28px);width:100%;display:grid}#ui .mode-card{--accent:var(--escape);min-height:56px;font:inherit;text-align:left;color:var(--text);background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), var(--panel) 55%);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 12px 30px #00000059;cursor:pointer;touch-action:manipulation;border:0;border-radius:20px;flex-direction:column;align-items:flex-start;gap:clamp(6px,1.4vmin,12px);padding:clamp(16px,3vmin,28px);transition:transform .12s ease-out,box-shadow .12s;display:flex;position:relative}#ui .mode-card--chase{--accent:var(--chase)}#ui .mode-card:hover{box-shadow:inset 0 0 0 3px var(--accent), 0 16px 36px #00000073;transform:translateY(-4px)rotate(-1deg)}#ui .mode-card:active{transform:scale(.98)}.mode-card__key{width:28px;height:28px;color:var(--text-dim);box-shadow:inset 0 0 0 2px var(--panel-line);border-radius:8px;place-items:center;font-size:15px;display:grid;position:absolute;top:14px;right:16px}@media (pointer:coarse){.mode-card__key{display:none}}.mode-card__name{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.mode-card__ja{font-size:clamp(26px,5.4vmin,44px);font-weight:900;line-height:1.05}.mode-card__en{letter-spacing:.16em;color:var(--accent);font-size:clamp(13px,2.2vmin,18px);font-style:italic;font-weight:900}.mode-card__desc{color:var(--text-dim);font-size:clamp(13px,2.2vmin,17px);font-weight:700;line-height:1.5}.mode-card__best{align-items:baseline;gap:10px;margin-top:auto;padding-top:8px;display:flex}.mode-card__best-label{color:var(--text-dim);letter-spacing:.08em;font-size:12px}.mode-card__best-value{font-variant-numeric:tabular-nums;font-size:clamp(18px,3.2vmin,26px);font-weight:900}.screen--countdown{justify-content:center}.count{color:#fff;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--chase), 0 0 .4em #00000080;font-variant-numeric:tabular-nums;margin:auto;font-size:clamp(120px,34vmin,320px);font-weight:900;line-height:1;animation:.9s cubic-bezier(.2,1.4,.4,1) both count-pop}.count--go{color:var(--gold);text-shadow:.05em .05em 0 var(--chase), 0 0 .5em #ffd23f80;font-style:italic;animation:.65s cubic-bezier(.2,1.6,.4,1) both go-pop;transform:rotate(-6deg)}@keyframes count-pop{0%{opacity:0;transform:scale(1.8)}25%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(.94)}to{opacity:.85;transform:scale(.9)}}@keyframes go-pop{0%{opacity:0;transform:rotate(-6deg)scale(.4)}40%{opacity:1;transform:rotate(-6deg)scale(1.1)}to{opacity:1;transform:rotate(-6deg)scale(1.25)}}.result-card{--accent:var(--escape);background:var(--panel);width:min(560px,100%);max-width:min(92vw,720px);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 20px 50px #00000080;border-radius:24px;flex-direction:column;align-items:center;gap:clamp(8px,2vmin,16px);padding:clamp(16px,3.4vmin,32px);animation:.26s cubic-bezier(.2,1.3,.4,1) both card-in;display:flex}.result--chase .result-card{--accent:var(--chase)}@keyframes card-in{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:none}}.result-mode{letter-spacing:.18em;color:var(--accent);margin:0;font-size:14px}.result-headline{margin:0;font-size:clamp(32px,7.4vmin,64px);font-weight:900;line-height:1;transform:rotate(-3deg)}.result--win .result-headline{color:var(--gold);text-shadow:.05em .05em 0 var(--chase);font-style:italic}.result--lose .result-headline{color:var(--hot)}.result--timeup .result-headline{color:#fff;text-shadow:.05em .05em 0 var(--chase);font-style:italic}.result-main{justify-content:center;align-items:center;gap:clamp(16px,5vmin,44px);width:100%;display:flex}.result-score{flex-direction:column;align-items:center;gap:4px;display:flex}.result-score__label{letter-spacing:.22em;color:var(--text-dim);font-size:13px}.result-score__value{font-variant-numeric:tabular-nums;font-size:clamp(40px,9vmin,76px);font-weight:900;line-height:1}.best-badge{color:#2a1a00;background:linear-gradient(180deg, #ffe680, var(--gold));border-radius:999px;margin-top:4px;padding:4px 12px;font-size:clamp(13px,2vmin,16px);font-weight:900;animation:.38s cubic-bezier(.2,1.8,.4,1) .85s both badge-in;box-shadow:0 0 18px #ffd23f73}.golden-badge{border:1px solid var(--gold);letter-spacing:.06em;color:var(--gold);border-radius:999px;margin:-4px 0 0;padding:2px 10px;font-size:clamp(11px,1.8vmin,13px);font-weight:700}@keyframes badge-in{0%{opacity:0;transform:scale(.3)rotate(-12deg)}to{opacity:1;transform:rotate(-4deg)}}.rank{--rank:#c9cede;flex-direction:column;align-items:center;animation:.42s cubic-bezier(.2,1.8,.4,1) .8s both rank-in;display:flex}.rank__label{letter-spacing:.22em;color:var(--text-dim);font-size:13px}.rank__letter{color:var(--rank);-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em #00000073;font-size:clamp(72px,17vmin,150px);font-style:italic;font-weight:900;line-height:.95}.rank--S{--rank:var(--gold)}.rank--S .rank__letter{background:linear-gradient(180deg, #fff6c2 0%, var(--gold) 45%, var(--gold-deep) 100%);color:#0000;-webkit-text-stroke:0;text-shadow:none;filter:drop-shadow(0 0 18px #ffd23f99)drop-shadow(.05em .05em #7a4b00);-webkit-background-clip:text;background-clip:text}.rank--A{--rank:var(--chase)}.rank--B{--rank:var(--escape)}.rank--C{--rank:#7be07b}.rank--D{--rank:#8a90a8}@keyframes rank-in{0%{opacity:0;transform:scale(2.4)rotate(12deg)}to{opacity:1;transform:none}}.stats{border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);flex-wrap:wrap;justify-content:center;gap:8px 28px;width:100%;margin:0;padding:10px 0;display:flex}.stat{align-items:baseline;gap:8px;display:flex}.stat dt{color:var(--text-dim);font-size:13px}.stat dd{font-variant-numeric:tabular-nums;margin:0;font-size:clamp(17px,2.8vmin,22px);font-weight:900}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;display:flex}#ui .result-actions .btn{white-space:nowrap;flex:140px;min-width:0;max-width:100%;padding:0 16px;font-size:clamp(16px,2.4vmin,20px)}@media (height<=480px){:root{--btn-h:56px}.screen{gap:8px}#ui .btn--xl{min-height:60px}.result-card{flex-flow:wrap;justify-content:center;gap:8px 20px;width:min(760px,100%);padding:14px 18px}.result-card>.result-mode,.result-card>.result-headline{text-align:center;width:100%}.result-main{width:auto}.stats{border:0;grid-template-columns:repeat(2,auto);justify-content:center;gap:4px 18px;width:auto;padding:0;display:grid}.stat{justify-content:space-between}}@media (width<=520px){.mode-cards{grid-template-columns:minmax(0,340px)}}.touch{z-index:5;pointer-events:none;display:none;position:absolute;inset:0}#ui.has-touch .touch{display:block}.touch__zone{pointer-events:auto;touch-action:none;position:absolute;inset:0 50% 0 0}.touch__stick{--stick-r:60px;width:calc(var(--stick-r) * 2);height:calc(var(--stick-r) * 2);margin:calc(var(--stick-r) * -1) 0 0 calc(var(--stick-r) * -1);pointer-events:none;opacity:0;background:#ffffff14;border-radius:50%;transition:opacity .12s;position:absolute;box-shadow:inset 0 0 0 2px #ffffff59}.touch__stick.is-active{opacity:1}.touch__knob{background:#ffffffd9;border-radius:50%;width:56px;height:56px;margin:-28px 0 0 -28px;position:absolute;top:50%;left:50%;box-shadow:0 4px 12px #0006}.touch__dash{right:max(28px, env(safe-area-inset-right));bottom:max(28px, env(safe-area-inset-bottom));letter-spacing:.08em;color:#fff;pointer-events:auto;touch-action:none;opacity:.85;background:radial-gradient(circle at 35% 30%,#ff786ee6,#ff4a3db3);border-radius:50%;place-items:center;width:104px;height:104px;font-size:18px;font-weight:900;display:grid;position:absolute;box-shadow:0 6px #8c140ccc,0 0 0 3px #ffffff40}.touch__dash:before{content:"";border-radius:50%;position:absolute;inset:-18px}.touch__dash.is-active{opacity:1;transform:translateY(4px)scale(.94);box-shadow:0 2px #8c140ccc,0 0 0 3px #ffffff80}#ui:is([data-screen=title],[data-screen=select],[data-screen=result]) :is(.touch__zone,.touch__stick,.touch__dash){display:none}.rotate-hint{z-index:30;text-align:center;pointer-events:auto;background:#0b0d16f0;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:none;position:absolute;inset:0}@media (orientation:portrait){#ui.has-touch:not(.rotate-dismissed) .rotate-hint{display:flex}}.rotate-hint__icon{border-radius:8px;width:44px;height:72px;animation:1.6s ease-in-out infinite rotate-phone;box-shadow:inset 0 0 0 4px #fff}.rotate-hint__text{font-size:24px;font-weight:900}.rotate-hint__sub{color:var(--text-dim);font-size:14px}@keyframes rotate-phone{0%,25%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (prefers-reduced-motion:reduce){#ui *,#ui :before,#ui :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0s!important}}