:root{--ink:#23312e;--sage:#7ccac0;--bubble:#fdfaf2;--accent:#d9533f;--display:"Dela Gothic One", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;--arcade:"Press Start 2P", ui-monospace, monospace;--gold:#f2c14e}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--sage);font-family:system-ui,sans-serif;overflow:hidden}.game-canvas{z-index:0;position:fixed;inset:0}canvas{display:block}.hud{z-index:10;pointer-events:none;color:var(--ink);font-family:var(--display);position:fixed;inset:0}.title-card{text-align:center;background:var(--bubble);border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);border-radius:18px;max-width:100%;padding:22px 30px 18px;position:relative}.title-card h1{letter-spacing:.04em;margin:0;font-size:clamp(34px,7vw,64px);line-height:1}.title-card__jp{opacity:.7;margin:6px 0 14px;font-size:15px}.controls{text-align:left;grid-template-columns:auto auto;align-items:center;gap:6px 12px;margin:0 0 10px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;display:inline-grid}.controls dt{white-space:nowrap;justify-self:end}.controls dd{margin:0}.controls__or{opacity:.45;margin:0 3px}.title-card__rule{margin:0 0 8px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600}.title-card__mode{margin:0 0 14px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600}kbd{border:2px solid var(--ink);min-width:24px;box-shadow:1px 2px 0 var(--ink);font-family:var(--display);background:#fff;border-radius:6px;margin:0 2px;padding:0 6px;font-size:12px;line-height:20px;display:inline-block}.kbd--arrow{font-family:system-ui,sans-serif;font-size:14px;font-weight:700}.title-card__tops{flex-wrap:wrap;justify-content:center;gap:10px 44px;margin:0 0 16px;display:flex}.title-card__top{flex-direction:column;align-items:center;gap:6px;display:flex}.title-card__board{letter-spacing:.04em;text-transform:uppercase;font-size:18px;line-height:1}.title-card__hi{font-family:var(--arcade);color:var(--accent);font-size:11px}.title-card__go{margin:0;font-size:14px;animation:1.2s steps(2,jump-none) infinite blink}@keyframes blink{50%{opacity:.3}}.hud-score{background:var(--bubble);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);border-radius:14px;flex-direction:column;padding:4px 14px;display:flex;position:absolute;top:16px;left:16px}.hud-board{letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-top:4px;font-size:11px;line-height:1}.hud-score__now{align-items:baseline;gap:8px;display:flex}.hud-score__n{font-size:28px}.hud-score__combo{color:var(--accent);font-size:18px}.hud-speed{background:var(--bubble);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);font-variant-numeric:tabular-nums;border-radius:14px;flex-direction:column;align-items:flex-end;padding:4px 14px;font-size:26px;display:flex;position:absolute;top:16px;right:16px}.hud-speed small{margin-left:4px;font-size:12px}.hud-streak{opacity:.55;font-size:15px}.hud-streak small{font-size:10px}.hud-streak--on{opacity:1;color:var(--accent)}.hud-pr{font-variant-numeric:tabular-nums;align-items:center;font-size:12px;display:flex}.hud-pr small{opacity:.6;margin:0 5px 0 0;font-size:10px}.hud-pr--beating{color:var(--accent)}.hud-trophy{width:15px;height:15px;margin-right:4px;overflow:visible}.hud-trophy--pop{transform-origin:50% 80%;animation:.8s ease-out trophy-pop}@keyframes trophy-pop{30%{filter:drop-shadow(0 0 5px #ffcd50f2);transform:scale(2.1)rotate(-10deg)}55%{transform:scale(.88)rotate(6deg)}75%{transform:scale(1.08)rotate(-2deg)}}.hud-crown{width:15px;height:15px;margin-right:4px;overflow:visible}.hud-crown__gem{fill:var(--accent);stroke:var(--ink);stroke-width:1.5px}.hud-wr__name{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;max-width:8em;margin-left:5px;font-size:10px;overflow:hidden}.hud-trophy__cup{fill:#f2c14e;stroke:var(--ink);stroke-width:2px;stroke-linejoin:round}.hud-trophy__handles{fill:none;stroke:var(--ink);stroke-width:2px;stroke-linecap:round}.hud-flame{transform-origin:50% 90%;width:1em;height:1em;margin-left:3px;animation:.35s ease-out flame-in,.5s ease-in-out .35s infinite alternate flicker,.9s ease-in-out .35s infinite flame-pulse;overflow:visible}.hud-score__now .hud-flame{width:22px;height:22px;margin-left:-2px}.hud-flame__outer{fill:#f07a2e;stroke:var(--ink);stroke-width:2px;stroke-linejoin:round}.hud-flame__inner{fill:#ffd75e}.hud-flame--wr .hud-flame__outer{fill:#3fa9ff}.hud-flame--wr .hud-flame__inner{fill:#dff4ff}@keyframes flame-in{0%{transform:scale(0)}60%{transform:scale(1.3)}}@keyframes flame-pulse{0%,to{filter:drop-shadow(0 0 #ffaa3c00);scale:1}50%{filter:drop-shadow(0 0 4px #ffaa3ce6);scale:1.3}}@keyframes flicker{0%{transform:scale(1)rotate(-4deg)}to{transform:scale(.92,1.1)rotate(4deg)}}.record-card{background:var(--bubble);border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink);white-space:nowrap;opacity:0;border-radius:14px;align-items:center;gap:10px;padding:6px 18px 6px 10px;animation:2.8s ease-out forwards record-card;display:flex;position:absolute;top:14px;left:50%}.record-card__trophy{transform-origin:50% 80%;width:40px;height:40px;animation:.8s ease-out .2s record-trophy;overflow:visible}.record-card__title{color:var(--accent);font-size:22px;line-height:1.1;display:block}.record-card__what{font-size:12px;display:block}.record-card__what b{font-weight:inherit;margin-left:4px;font-size:15px}@keyframes record-card{0%{opacity:0;transform:translate(-50%,-30px)scale(.7)}10%{opacity:1;transform:translate(-50%)scale(1.08)}18%,85%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-12px)}}@keyframes record-trophy{30%{filter:drop-shadow(0 0 6px #ffcd50f2);transform:scale(1.4)rotate(-12deg)}55%{transform:scale(.92)rotate(7deg)}75%{transform:scale(1.05)rotate(-2deg)}}@keyframes record-card-still{0%,85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%)}}.street-card{color:#fbfaf3;-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px 0 var(--ink);flex-direction:column;animation:3.4s ease-out forwards card;display:flex;position:absolute;bottom:28px;left:24px}.street-card__jp{font-size:22px}.street-card__en{letter-spacing:.05em;font-size:clamp(26px,5vw,44px);line-height:1}@keyframes card{0%{opacity:0;transform:translate(-24px)}12%,75%{opacity:1;transform:none}to{opacity:0}}.toast{color:#fbfaf3;-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px 0 var(--ink);white-space:nowrap;flex-direction:column;align-items:center;font-size:clamp(26px,5vw,40px);animation:.9s ease-out forwards pop;display:flex;position:absolute;top:30%;left:50%}.toast--hit{color:var(--accent)}.toast--speed{color:var(--sage)}.toast__points{color:var(--gold);font-size:1.6em;line-height:1}.toast__points+span{font-size:.7em}@keyframes pop{0%{opacity:0;transform:translate(-50%,10px)scale(.6)}20%{opacity:1;transform:translate(-50%)scale(1.1)}70%{opacity:1;transform:translate(-50%,-8px)scale(1)}to{opacity:0;transform:translate(-50%,-20px)scale(1)}}.turns{gap:90px;font-size:30px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.turns span{opacity:0;transition:opacity .2s}.turns span.on{opacity:.9;color:#fbfaf3;-webkit-text-stroke:1.5px var(--ink);text-shadow:2px 2px 0 var(--ink)}.hud-keys{gap:8px;display:flex;position:absolute;bottom:16px;right:16px}.hud-key{background:var(--bubble);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);border-radius:14px;align-items:center;gap:4px;padding:4px 6px 4px 10px;display:flex}.hud-note{width:20px;height:20px;overflow:visible}.hud-key--off .hud-note>:not(.hud-note__off){opacity:.45}.hud-note__off{stroke:var(--accent);stroke-width:2.6px;stroke-linecap:round}.overlay{z-index:20;color:var(--ink);font-family:var(--display);background:#23312e40;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:auto}.title-card__boards{text-align:left;flex-wrap:wrap;justify-content:center;gap:18px 56px;margin:0 0 16px;display:flex}.board__title{letter-spacing:.04em;text-align:center;text-transform:uppercase;margin:0;font-size:clamp(24px,3.4vw,32px);line-height:1}.board__jp{opacity:.7;text-align:center;margin:6px 0 2px;font-size:13px}.board__what{opacity:.5;text-align:center;margin:0 0 10px;font-size:11px}.board__pr{font-family:var(--arcade);justify-content:center;align-items:center;margin:8px 0 0;font-size:10px;display:flex}.board ol{min-width:250px;font-family:var(--arcade);margin:0;padding:0;font-size:10px;line-height:2.1;list-style:none}.board__row{grid-template-columns:3.4em 1fr auto;gap:10px;display:grid}.board__rank{opacity:.5}.board__row:first-child{color:var(--accent)}.board__row:first-child .board__rank{opacity:1}.board__name{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;overflow:hidden}.board__value{text-align:right}.entry{width:min(540px,100%)}.entry h1{margin-bottom:14px;font-size:clamp(26px,5vw,42px)}.entry__results{font-family:var(--arcade);margin:0 0 16px;padding:0;font-size:11px;line-height:2.4;list-style:none}.entry__results b{margin:0 6px;font-size:16px;font-weight:400}.entry__rank{color:var(--accent)}.entry__pr{background:var(--accent);color:var(--bubble);border-radius:6px;margin-left:10px;padding:3px 6px;font-size:9px}.entry__label{font-size:14px;display:block}.entry__field{width:calc(12ch + 30px);max-width:100%;font-family:var(--arcade);text-align:center;text-transform:uppercase;color:var(--ink);caret-color:var(--accent);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);background:#fff;border-radius:10px;outline:none;margin:10px auto 16px;padding:10px 12px;font-size:16px;display:block}.entry__field:focus{box-shadow:2px 3px 0 var(--ink), 0 0 0 4px #d9533f4d}.overlay--wr .title-card{animation:.7s cubic-bezier(.2,1.6,.4,1) both wr-card}.entry__crown{width:60px;height:60px;margin:-6px auto 6px;animation:.9s ease-in-out infinite alternate wr-crown;display:block;overflow:visible}.entry__title--wr{animation:.6s step-end infinite rainbow}.wr-burst{pointer-events:none;position:fixed;inset:0;overflow:hidden}.wr-burst__rays{background:repeating-conic-gradient(#f2c14e4d 0 9deg, transparent 9deg 18deg);width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;animation:.6s ease-out both fade-in,16s linear infinite spin;position:absolute;top:50%;left:50%}.wr-burst__flash{opacity:0;background:#fff;animation:.7s ease-out wr-flash;position:absolute;inset:0}.wr-burst__star{color:var(--gold);text-shadow:2px 2px 0 var(--ink);opacity:0;animation:wr-star 1.6s ease-out var(--delay) infinite;font-size:28px;position:absolute;top:50%;left:50%}@keyframes rainbow{0%{color:var(--accent)}25%{color:#e8962e}50%{color:#2f8f84}75%{color:#c94f8f}}@keyframes wr-card{0%{opacity:0;transform:scale(.3)rotate(-8deg)}}@keyframes wr-crown{0%{transform:translateY(0)rotate(-7deg)scale(1)}to{transform:translateY(-7px)rotate(7deg)scale(1.1)}}@keyframes wr-flash{0%{opacity:.9}}@keyframes wr-star{0%{opacity:1;transform:translate(-50%,-50%)scale(.4)}65%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx) * 1vmin), calc(-50% + var(--dy) * 1vmin)) scale(1.4) rotate(200deg)}}@keyframes fade-in{0%{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}.landing{z-index:15;color:var(--ink);font-family:var(--display);pointer-events:none;position:fixed;inset:0}.landing button{pointer-events:auto}.landing:before{content:"";background:linear-gradient(100deg,#23312e42,#23312e14 42%,#0000 62%);transition:opacity .6s;position:absolute;inset:0}.landing__body{flex-direction:column;gap:clamp(16px,3.4vh,30px);width:min(600px,100% - 32px);display:flex;position:absolute;top:clamp(16px,6vh,72px);left:clamp(16px,5vw,80px)}.landing__title{letter-spacing:.02em;color:var(--bubble);-webkit-text-stroke:clamp(2px, .03em, 4px) var(--ink);text-shadow:.05em .06em 0 var(--ink);margin:0;font-size:clamp(52px,min(9.5vw,15vh),136px);font-weight:400;line-height:.92}.landing__word{white-space:nowrap;display:block}.landing__word span{animation:letter-drop .7s cubic-bezier(.2, 1.5, .4, 1) calc(.15s + var(--i) * 60ms) both;display:inline-block}.landing__off{flex-direction:column;align-items:center;margin-left:.85em;display:inline-flex}.landing__word--off{color:var(--accent);transform-origin:0 100%;transform:rotate(-4deg)}.landing__jp{background:var(--ink);color:var(--bubble);letter-spacing:normal;white-space:nowrap;-webkit-text-stroke:0;text-shadow:none;border-radius:8px;margin-top:14px;padding:5px 10px;font-size:15px;line-height:1.3;animation:.5s ease-out .65s both rise;transform:rotate(-3deg)}.landing__go{flex-direction:column;align-items:flex-start;gap:16px;display:flex}.landing__modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(540px,100%);animation:.5s ease-out .85s both rise;display:grid}.mode-card{text-align:left;color:var(--ink);font:inherit;background:var(--bubble);border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);cursor:pointer;border-radius:18px;flex-direction:column;align-items:flex-start;gap:2px;padding:18px 16px 12px;transition:transform .12s ease-out,box-shadow .12s ease-out;display:flex;position:relative;overflow:hidden}.mode-card:before{content:"";border-bottom:3px solid var(--ink);background:var(--accent);height:8px;position:absolute;inset:0 0 auto}.mode-card--free:before{background:var(--sage)}.mode-card:hover{box-shadow:6px 8px 0 var(--ink);transform:translate(-2px,-3px)}.mode-card:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,4px)}.mode-card:focus-visible,.chip:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.mode-card__name{letter-spacing:.03em;font-size:clamp(20px,2.2vw,26px);line-height:1.1}.mode-card__jp{opacity:.6;font-size:12px}.mode-card__what{margin:8px 0 10px;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;line-height:1.35}.mode-card__key{opacity:.75;margin-top:auto;font-family:system-ui,sans-serif;font-size:12px;font-weight:600}.landing__keys{border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink);background:#fdfaf2e6;border-radius:14px;flex-wrap:wrap;gap:6px 14px;margin:0;padding:7px 14px;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;animation:.5s ease-out 1s both rise;display:flex}.landing__keys span{white-space:nowrap}.landing__touch{background:var(--bubble);border:3px solid var(--ink);width:100%;box-shadow:4px 5px 0 var(--ink);border-radius:18px;flex-direction:column;gap:2px;padding:18px 16px 14px;animation:.5s ease-out .85s both rise;display:none;position:relative;overflow:hidden}.landing__touch:before{content:"";border-bottom:3px solid var(--ink);background:var(--gold);height:8px;position:absolute;inset:0 0 auto}.landing__touch p{margin:0}.landing__touch-title{letter-spacing:.03em;text-wrap:balance;font-size:clamp(16px,4.4vw,24px);line-height:1.1}.landing__touch-jp{opacity:.6;font-size:12px}.landing__touch .landing__touch-what{margin-top:8px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1.35}.landing__chips{gap:10px;animation:.5s ease-out 1.1s both fade-in;display:flex;position:absolute;top:16px;right:16px}.chip{color:var(--ink);font-family:var(--display);background:var(--bubble);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);cursor:pointer;border-radius:14px;align-items:center;gap:4px;padding:4px 8px 4px 10px;font-size:13px;display:flex}.chip kbd{order:-1}.chip .hud-note{order:1}.chip:active{box-shadow:0 1px 0 var(--ink);transform:translate(2px,2px)}.chip--off .hud-note>:not(.hud-note__off){opacity:.45}.landing__start{white-space:nowrap;font-family:var(--arcade);color:var(--bubble);text-shadow:3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink);margin:0;font-size:clamp(14px,1.6vw,20px);animation:.4s ease-out 1.3s both fade-in,1.2s steps(2,jump-none) 1.7s infinite blink;position:absolute;bottom:62px;left:50%;transform:translate(-50%)}.marquee{background:var(--ink);border-top:3px solid var(--gold);height:40px;color:var(--bubble);font-family:var(--arcade);align-items:center;font-size:11px;animation:.5s ease-out .3s both marquee-in;display:flex;position:absolute;inset:auto 0 0;overflow:hidden}.marquee__track{width:max-content;animation:48s linear infinite marquee;display:flex}.marquee__copy{display:flex}.marquee__item{white-space:nowrap;gap:16px;padding-left:24px;display:flex}.marquee__item b{color:var(--gold);font-weight:400}.marquee__item i{color:var(--accent);font-style:normal}.landing--off:before{opacity:0}.landing--off button{pointer-events:none}.landing--off .landing__head{animation:.45s ease-in both leave-up}.landing--off .landing__go,.landing--off .landing__start,.landing--off .landing__chips{animation:.4s ease-in both leave-down}.landing--off .marquee{animation:.4s ease-in .1s both marquee-out}@keyframes letter-drop{0%{opacity:0;transform:translateY(-.7em)rotate(-10deg)scale(1.4)}50%{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}@keyframes leave-up{to{opacity:0;transform:translateY(-60px)}}@keyframes leave-down{to{opacity:0;transform:translateY(40px)}}@keyframes marquee{to{transform:translate(-50%)}}@keyframes marquee-in{0%{transform:translateY(100%)}}@keyframes marquee-out{to{transform:translateY(100%)}}@media (max-width:700px){.landing__body{justify-content:space-between;top:64px;bottom:56px}.landing:before{background:linear-gradient(#23312e38,#0000 35% 60%,#23312e38)}.landing__modes{gap:10px}.mode-card{padding:16px 10px 10px}.mode-card__name{font-size:18px}}@media (hover:none) and (pointer:coarse){.landing__body{justify-content:space-between;bottom:56px}.landing__modes,.landing__keys,.landing__start,.chip--scores{display:none}.landing__touch{display:flex}}.landing--no3d .landing__modes,.landing--no3d .landing__keys,.landing--no3d .landing__start{display:none}.landing--no3d .landing__touch{display:flex}@media (prefers-reduced-motion:reduce){.title-card__go,.hud-flame,.hud-trophy--pop,.record-card__trophy,.overlay--wr .title-card,.entry__crown,.entry__title--wr,.wr-burst__rays,.wr-burst__star{animation:none}.wr-burst__flash{display:none}.record-card{animation-name:record-card-still}.landing__word span,.landing__jp,.landing__modes,.landing__touch,.landing__keys,.landing__chips,.landing__start,.marquee,.marquee__track{animation:none}.landing--off .landing__head,.landing--off .landing__go,.landing--off .landing__start,.landing--off .landing__chips,.landing--off .marquee{animation:.3s both fade-out}}@keyframes fade-out{to{opacity:0}}