:root{--ink:#17141f;--paper:#f5f1e8;--panel:#fffdf8;--violet:#6c45f5;--violet2:#977dfd;--lime:#d9ff4f;--coral:#ff6c63;--cyan:#55dce1;--line:#d9d4ca;--muted:#6f6979;--shadow:0 24px 70px rgba(34,23,65,.2)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;overscroll-behavior:none}body{min-height:100dvh}.skip{position:fixed;top:-5rem;left:1rem;z-index:50;background:var(--ink);color:white;padding:.7rem 1rem}.skip:focus{top:1rem}.game-app{width:min(1440px,100%);margin:auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 24px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;letter-spacing:.08em;font-size:.88rem}.logo-blocks{width:40px;height:36px;display:flex;align-items:end;gap:3px;transform:skewY(-5deg)}.logo-blocks i{display:block;width:12px;border-radius:3px 3px 2px 2px;background:var(--violet);position:relative}.logo-blocks i:before{content:'';position:absolute;width:7px;height:4px;border-radius:3px 3px 0 0;background:inherit;top:-3px;left:2px}.logo-blocks i:nth-child(1){height:23px}.logo-blocks i:nth-child(2){height:34px;background:var(--coral)}.logo-blocks i:nth-child(3){height:27px;background:var(--lime)}.top-actions{display:flex;gap:8px;align-items:center}.icon-button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(20,14,35,.05)}.label-button{width:auto;padding:0 15px;font-size:.7rem;letter-spacing:.08em}.offline-badge{font-size:.6rem;font-weight:900;letter-spacing:.08em;color:#7d3900;background:#ffe3b8;padding:7px 9px;border-radius:8px}.game-frame{position:relative;flex:1;min-height:0;aspect-ratio:16/9;max-height:calc(100dvh - 126px);margin:auto;width:100%;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#cbc4fa;box-shadow:var(--shadow);touch-action:none;user-select:none}canvas{width:100%;height:100%;display:block}.hud{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;color:white;text-shadow:0 2px 10px rgba(0,0,0,.25)}.hud div{display:grid}.hud div:last-child{text-align:right}.hud span{font-size:.58rem;font-weight:900;letter-spacing:.15em}.hud strong{font-size:clamp(1.35rem,3vw,2.8rem);font-variant-numeric:tabular-nums;line-height:1}.phase-label{position:absolute;top:25px;left:50%;transform:translate(-50%,-15px);opacity:0;background:rgba(20,15,35,.78);color:white;padding:7px 13px;border-radius:20px;font-size:.62rem;font-weight:900;letter-spacing:.12em;transition:.4s}.phase-label.show{opacity:1;transform:translate(-50%,0)}.jump-hint{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);background:rgba(23,20,31,.8);color:white;border-radius:12px;padding:9px 14px;font-size:.7rem;font-weight:900;letter-spacing:.08em;opacity:0;transition:.3s;pointer-events:none}.jump-hint.show{opacity:1}.rotate-hint{display:none;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:12;color:white;background:rgba(20,15,35,.75);border-radius:9px;padding:6px 9px;font-size:.6rem}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:linear-gradient(120deg,rgba(245,241,232,.94),rgba(245,241,232,.78));backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.brand-hero{text-align:center;position:relative}.mascot-preview{position:absolute;width:70px;height:68px;left:50%;top:-85px;transform:translateX(-50%);background:var(--violet);border-radius:24px 24px 18px 18px;box-shadow:inset 0 -9px rgba(0,0,0,.12),0 14px 25px rgba(83,54,188,.22);animation:bob 1.6s ease-in-out infinite}.mascot-preview .antenna{position:absolute;width:5px;height:17px;top:-13px;left:33px;background:var(--ink);border-radius:3px}.mascot-preview .antenna:after{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:var(--lime);left:-3px;top:-6px}.mascot-preview .face{position:absolute;left:15px;right:15px;top:22px;height:23px;background:#efeaff;border-radius:10px;display:flex;justify-content:center;gap:12px;align-items:center}.mascot-preview .face i{width:7px;height:10px;border-radius:50%;background:var(--ink)}.mascot-preview .feet:before,.mascot-preview .feet:after{content:'';position:absolute;width:22px;height:9px;border-radius:5px;background:var(--ink);bottom:-4px}.mascot-preview .feet:before{left:7px}.mascot-preview .feet:after{right:7px}.kicker{color:var(--violet);font-size:.62rem;font-weight:900;letter-spacing:.2em;margin:0 0 6px}.brand-hero h1{font-size:clamp(3.2rem,9vw,8rem);letter-spacing:-.08em;margin:0;line-height:.82}.brand-hero h1 span{color:var(--violet)}.tagline{font-weight:900;letter-spacing:.22em;font-size:clamp(.68rem,1.4vw,1rem);margin:20px 0 24px}.primary-button{border:0;border-radius:14px;background:var(--ink);color:white;min-height:54px;padding:0 24px;font-size:.72rem;font-weight:900;letter-spacing:.1em;cursor:pointer;box-shadow:0 8px 0 #0003;transition:.15s}.primary-button:hover{background:var(--violet);transform:translateY(-2px)}.primary-button:active{transform:translateY(4px);box-shadow:0 3px 0 #0003}.mobile-copy{display:none}.brand-hero nav{display:flex;justify-content:center;gap:20px;margin-top:25px}.brand-hero nav button,.text-button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:.68rem;font-weight:800;color:var(--muted);cursor:pointer}.compact-overlay{background:rgba(23,20,31,.72)}.result-card{background:var(--panel);border-radius:24px;padding:26px;width:min(440px,88%);text-align:center;box-shadow:var(--shadow)}.result-card h2{font-size:clamp(3rem,8vw,5.5rem);line-height:.9;margin:5px 0;color:var(--ink);font-variant-numeric:tabular-nums}.score-caption{font-size:.6rem;letter-spacing:.14em;color:var(--muted);font-weight:900}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.result-grid div{background:var(--paper);border-radius:12px;padding:10px;display:grid}.result-grid span{font-size:.58rem;color:var(--muted);text-transform:uppercase}.result-grid strong{font-size:1rem}.result-card>.primary-button{width:100%}.result-card>.text-button{margin:16px 0}.result-card>small{display:block;color:var(--muted);font-size:.58rem}footer{min-height:52px;display:flex;align-items:center;justify-content:space-between;font-size:.62rem;color:var(--muted)}footer nav{display:flex;gap:16px}footer a{color:inherit;text-decoration:none}dialog{border:0;border-radius:24px;padding:26px;width:min(520px,calc(100% - 28px));background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(20,16,30,.68);backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:14px}.dialog-head h2{font-size:2rem;margin:0;letter-spacing:-.04em}.close-button{border:0;background:var(--paper);border-radius:50%;width:37px;height:37px;font-size:1.4rem;cursor:pointer}.ranking-list{display:grid;gap:5px;max-height:55vh;overflow:auto}.rank-row{display:grid;grid-template-columns:35px 1fr auto;gap:10px;padding:10px 12px;border-radius:10px;background:var(--paper);align-items:center}.rank-row:first-child{background:var(--lime)}.rank-row small{color:var(--muted)}.rank-row strong:last-child{font-variant-numeric:tabular-nums}.loading,.empty{text-align:center;color:var(--muted);padding:30px}.info-copy{line-height:1.7;color:var(--muted)}#aliasForm{display:grid;gap:15px}#aliasForm label{display:grid;gap:7px;font-size:.7rem;font-weight:800}#aliasForm input{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--paper);font:inherit}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,100px);opacity:0;z-index:100;background:var(--ink);color:white;padding:11px 16px;border-radius:10px;font-size:.72rem;font-weight:800;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.legal-page{padding:8vw 24px}.legal-page main{max-width:720px;margin:auto}.legal-page h1{font-size:clamp(3rem,8vw,6rem);letter-spacing:-.06em;line-height:.95}.legal-page p{line-height:1.8}.back-link{color:var(--muted);text-decoration:none;font-weight:800}.legal-warning{padding:15px;border-radius:12px;background:#fff0be;margin:25px 0;font-weight:800}
@keyframes bob{50%{transform:translate(-50%,-7px) rotate(2deg)}}
@media(max-width:760px){.game-app{padding:0 10px}.topbar{height:58px}.game-frame{border-radius:20px;aspect-ratio:auto;height:calc(100dvh - 100px);max-height:none}.label-button{display:none}.hud{top:14px;left:14px;right:14px}.brand-hero{transform:scale(.88)}.desktop-copy{display:none}.mobile-copy{display:inline}.start-screen .mascot-preview{top:-78px}.rotate-hint{display:block}footer{display:none}.game-frame canvas{object-fit:cover}.result-card{padding:20px}.result-grid{margin:14px 0}.top-actions{gap:5px}.icon-button{width:38px;height:38px}}
@media(orientation:landscape) and (max-height:520px){.topbar{position:absolute;z-index:20;left:10px;right:10px;top:5px;height:44px}.logo{color:white;text-shadow:0 1px 4px #0008}.game-frame{height:100dvh;border-radius:0;border:0}.game-app{padding:0;max-width:none}.brand-hero{transform:scale(.65)}.mascot-preview{display:none}.brand-hero nav{margin-top:12px}.result-card{transform:scale(.78)}.rotate-hint{display:none}}
.game-frame>canvas{position:absolute;inset:0;width:100%;height:100%}.result-card>small{margin-top:9px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}