:root{--yellow:#ffd318;--ink:#08090c;--panel:rgba(8,9,12,.86);--line:rgba(255,255,255,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030407;color:white;font-family:Arial,Helvetica,sans-serif;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:none}
#app,#game{position:fixed;inset:0;width:100%;height:100%}#game{display:block;background:#05070a}
.overlay{position:fixed;inset:0;z-index:20}.hidden{display:none!important}
.menu-screen{background:#08090c;overflow:hidden}.menu-art{position:absolute;inset:0;background:url('assets/menu-clean.webp') center/cover no-repeat;filter:saturate(.92) contrast(1.05) blur(1px);transform:scale(1.01)}.menu-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,7,.96) 0%,rgba(3,4,7,.82) 38%,rgba(3,4,7,.22) 72%,rgba(3,4,7,.38) 100%)}
.menu-wrap{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(320px,42vw) 1fr;grid-template-rows:auto 1fr auto;align-items:center;padding:clamp(24px,4vw,70px);gap:18px;max-width:1500px}
.brand-block{align-self:end}.crown{color:var(--yellow);font-size:clamp(34px,5vw,70px);line-height:.8}.brand-block h1{font-size:clamp(42px,8vw,104px);line-height:.82;letter-spacing:-.065em;margin:.08em 0 0;font-style:italic;font-weight:1000;text-shadow:0 8px 32px #000}.slash{height:10px;width:min(380px,80%);background:var(--yellow);transform:skewX(-25deg);margin:18px 0 14px}.brand-block p{font-weight:900;letter-spacing:.16em;font-size:clamp(10px,1.25vw,18px)}
.menu-buttons{display:flex;flex-direction:column;gap:10px;width:min(410px,82vw);align-self:start}.menu-buttons button,.mini-card button{background:rgba(10,11,14,.92);border:1px solid var(--line);padding:14px 20px;text-align:left;font-weight:1000;letter-spacing:.04em;clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%)}.menu-buttons .primary,.mini-card .primary{background:var(--yellow);color:#090a0c;border-color:transparent}.menu-buttons button:active,.mini-card button:active{transform:translateY(1px) scale(.995)}
.character-card{grid-column:2;grid-row:1/4;justify-self:end;align-self:center;width:min(34vw,420px);background:rgba(7,8,11,.45);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);padding:12px;transform:rotate(1deg);box-shadow:0 24px 80px rgba(0,0,0,.45)}.character-card img{width:100%;height:min(54vh,520px);object-fit:cover;object-position:50% 35%;display:block}.character-card div{padding:10px 4px 2px}.character-card strong{display:block;font-size:14px}.character-card span{font-size:11px;color:#cdd1d8}
.mobile-note{position:absolute;z-index:3;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);font-size:11px;color:#d9dbe0;background:rgba(0,0,0,.42);padding:7px 12px;border-radius:999px;white-space:nowrap}
.panel-screen{background:radial-gradient(circle at 70% 30%,#172331 0,#090b0f 52%,#040506 100%);padding:clamp(18px,3vw,48px);overflow:auto}.panel-head{display:flex;align-items:center;gap:18px;margin-bottom:24px}.panel-head h2{margin:0;font-size:clamp(28px,4vw,56px);font-style:italic}.backBtn{width:48px;height:48px;border-radius:50%;background:#17191f;border:1px solid var(--line);font-size:26px}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:18px}.level-card{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#111;box-shadow:0 12px 40px rgba(0,0,0,.28)}.level-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.level-card:active img{transform:scale(1.02)}.level-info{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(0,0,0,.9));padding:42px 16px 14px;text-align:left}.level-info b{display:block;font-size:18px}.level-info span{font-size:12px;color:#e2e4e8}.level-num{position:absolute;left:12px;top:12px;background:var(--yellow);color:#090a0c;padding:5px 8px;font-weight:1000}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1200px}.how-card{background:rgba(255,255,255,.055);border:1px solid var(--line);padding:22px;min-height:130px}.how-card b{display:block;color:var(--yellow);font-size:19px;margin-bottom:8px}.how-card span{color:#d4d6dc;line-height:1.45}.keyboard{margin-top:18px;color:#b9bec8;font-size:13px}
.hud{position:fixed;z-index:10;left:0;right:0;top:0;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));display:flex;justify-content:space-between;pointer-events:none}.hud-left{background:linear-gradient(100deg,rgba(4,5,7,.88),rgba(4,5,7,.58));padding:8px 16px 9px;min-width:180px;border-left:4px solid var(--yellow);transform:skewX(-4deg);box-shadow:0 8px 30px rgba(0,0,0,.3)}.hud-left>*{display:block;transform:skewX(4deg)}#levelName{font-size:10px;color:var(--yellow);font-weight:1000;letter-spacing:.12em}#timer{font-size:clamp(24px,4vw,44px);font-style:italic;letter-spacing:.02em}#best{font-size:9px;color:#c3c7ce}.icon-btn{pointer-events:auto;width:50px;height:50px;border-radius:12px;background:rgba(6,7,10,.72);border:1px solid rgba(255,255,255,.2);font-weight:900}
.touch{position:fixed;inset:0;z-index:9;pointer-events:none}.touch-left,.touch-right{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:14px}.touch-left{left:max(18px,env(safe-area-inset-left))}.touch-right{right:max(18px,env(safe-area-inset-right))}.touch-btn{pointer-events:auto;border-radius:50%;background:rgba(6,7,10,.42);border:2px solid rgba(255,255,255,.44);box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 0 24px rgba(255,255,255,.03);backdrop-filter:blur(6px);font-size:34px;display:grid;place-items:center}.move-btn{width:90px;height:90px}.jump-btn{width:110px;height:110px;font-size:48px}.slide-btn{width:78px;height:78px;font-size:42px}.touch-btn.active{background:rgba(255,211,24,.24);border-color:var(--yellow);transform:scale(.96)}
.mini-overlay{display:grid;place-items:center;background:rgba(1,2,3,.7);backdrop-filter:blur(7px)}.mini-card{width:min(420px,86vw);background:#0b0d11;border:1px solid rgba(255,255,255,.17);padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px}.mini-card h2{font-size:34px;margin:0 0 8px;font-style:italic}.finish-card{text-align:center}.finish-crown{font-size:54px;color:var(--yellow)}.finish-time{font-size:48px;font-weight:1000;font-style:italic}.finish-best{font-size:13px;color:#c5cad2;margin-bottom:8px}
.rotate{z-index:99;display:grid;place-items:center;background:#040507}.rotate-card{text-align:center;padding:30px}.phone-icon{font-size:72px;color:var(--yellow)}.rotate-card h2{margin:8px 0 6px}.rotate-card p{color:#aeb4bd;margin:0}
@media (pointer:fine){.touch{display:none!important}.mobile-note{display:none}}
@media (max-width:820px) and (orientation:landscape){.menu-wrap{padding:18px 26px;grid-template-columns:1fr .7fr}.brand-block h1{font-size:52px}.character-card{width:28vw}.character-card img{height:42vh}.menu-buttons{width:300px}.menu-buttons button{padding:10px 16px}.level-grid{grid-template-columns:repeat(3,1fr);gap:10px}.how-grid{grid-template-columns:repeat(3,1fr);gap:8px}.how-card{padding:12px;min-height:100px}.move-btn{width:74px;height:74px}.jump-btn{width:92px;height:92px}.slide-btn{width:68px;height:68px}.touch-left,.touch-right{bottom:10px}}
@media (orientation:portrait){body.playing #rotate{display:grid!important}}