@import './leaderboard.css';
:root{font-family:"Trebuchet MS",Arial,sans-serif;color:#fff5dc;background:#19162a;font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{--telegram-top:0px;--telegram-bottom:0px;--telegram-left:0px;--telegram-right:0px;--game-top:max(env(safe-area-inset-top,0px),var(--telegram-top),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));--game-bottom:max(env(safe-area-inset-bottom,0px),var(--telegram-bottom),calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)));--game-left:max(env(safe-area-inset-left,0px),var(--telegram-left),calc(var(--tg-safe-area-inset-left,0px) + var(--tg-content-safe-area-inset-left,0px)));--game-right:max(env(safe-area-inset-right,0px),var(--telegram-right),calc(var(--tg-safe-area-inset-right,0px) + var(--tg-content-safe-area-inset-right,0px)))}
body #game,#panel>.home,#panel>.overlay{position:fixed;top:var(--game-top);left:var(--game-left);right:var(--game-right);margin-inline:auto;width:min(100vw,calc(100dvh * .64),520px);height:calc(100dvh - var(--game-top) - var(--game-bottom));max-width:calc(100vw - var(--game-left) - var(--game-right))}
body{margin:0;height:calc(100dvh + var(--sheet-guard,0px));overflow:hidden;display:grid;place-items:center;background:#292844}
html,body{overscroll-behavior:none}
:where(#game,#panel) button{font:inherit;font-weight:900;cursor:pointer;color:inherit;border:0;touch-action:manipulation;min-height:48px}
:where(#game,#panel) button:focus-visible{outline:3px solid #fff3a9;outline-offset:4px}
:where(#game,#panel) button:disabled{cursor:default;filter:saturate(.25);opacity:.65}
:where(#game,#panel) button:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 2px 0 #ffffff55,0 2px 0 var(--edge,#56466e)}
[hidden]{display:none!important}
#game{position:relative;width:min(100vw,calc(100dvh * .64),520px);height:100dvh;overflow:hidden;background:transparent;isolation:isolate;z-index:1;pointer-events:none}
#game button,#game input,#game .card{pointer-events:auto}
canvas#canvas{position:fixed;inset:0;display:block;width:100vw;height:100dvh;touch-action:none;z-index:0}
#hud{position:absolute;inset:0 0 auto;display:flex;gap:12px;padding:max(18px,env(safe-area-inset-top)) 18px 12px;align-items:flex-start;pointer-events:none}
.score-badge{min-width:110px;padding:9px 18px;background:linear-gradient(#5d527d,#413653);border:3px solid #241d3c;border-radius:15px;box-shadow:inset 0 2px #a49ab766,0 4px #140e2855;text-align:center}
.score-badge span,.floor-badge span{display:block;font-size:10px;font-weight:900;letter-spacing:1px;color:#dfd6f0}
.score-badge strong{display:block;font-size:31px;line-height:1.1;color:#ffe291;text-shadow:0 2px #805034}
.floor-badge{margin-left:auto;padding:10px 0;text-align:center}.floor-badge b{font-size:23px}
#boost-status{align-self:center;flex:1;min-width:0;text-align:center;font-size:13px;font-weight:bold;color:#ffe291;white-space:pre-line;line-height:1.35}
.square{display:grid;place-items:center;min-width:48px;height:48px;padding:0 9px;border:3px solid #302444;border-radius:14px;background:linear-gradient(#9683b1,#675581);box-shadow:inset 0 2px #d0c1d999,0 4px #382742;color:#fff0d3;text-shadow:0 2px #3b294b;pointer-events:auto;font-size:24px}
.square.small{min-width:42px;height:42px;min-height:42px;font-size:22px}
#panel{position:fixed;inset:0;pointer-events:none;z-index:3;isolation:isolate}
#panel[data-modal="true"]::before{content:"";position:absolute;inset:0;background:#1711299e;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:auto}
#panel button,#panel input,#panel .card{pointer-events:auto}
.overlay{height:100%;display:flex;align-items:center;justify-content:center;padding:24px 20px}
.card{position:relative;width:100%;max-height:100%;overflow:auto;padding:26px 20px 20px;border:4px solid #2d203e;border-radius:24px;background:linear-gradient(145deg,#74618a,#4c3d68);box-shadow:inset 0 3px #b3a1c3,0 8px 0 #1d152d,0 16px 35px #100b2855;text-align:center;scrollbar-width:thin;overscroll-behavior:contain}
.card h2{font-size:29px;font-weight:900;line-height:1.1;margin:10px 0 16px;text-shadow:0 3px #382644;letter-spacing:-.7px}
.card h2 em{font-style:normal;color:#ffdd87}
.card p{color:#e0d4e9;font-size:13px;line-height:1.55;margin:12px 0 18px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.card-top h2{margin:0}
.eyebrow{font-size:10px;letter-spacing:2px;color:#e5c995;font-weight:900}
.primary{--edge:#97722f;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:15px 10px;border:3px solid #62442d;border-radius:18px;background:linear-gradient(#fff3a1 0%,#ffdb6f 45%,#f4b848 100%);color:#644024;box-shadow:inset 0 3px #fff9c8,0 6px 0 #956a31,0 9px 0 #281a3144;text-shadow:0 1px #fff1b2;font-size:21px;font-weight:1000}
.primary .play-icon{font-size:26px}
.secondary{--edge:#35385e;display:block;width:100%;margin-top:14px;padding:12px;border:3px solid #312840;border-radius:14px;background:linear-gradient(#9e91be,#796698);box-shadow:inset 0 2px #d1c3e077,0 4px #3e2d55;font-size:14px}
.quiet{display:block;margin:14px auto 0;padding:8px 12px;min-height:44px;background:none;color:#efe0f1;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.tag{display:inline-block;padding:6px 14px;border-radius:20px;background:#38294d;border:2px solid #95839e;font-size:10px;font-weight:900;letter-spacing:1px;color:#f7d587}
.result{font-size:64px;font-weight:1000;line-height:1.15;color:#ffe28d;text-shadow:0 4px #976036,0 6px #37223e;margin:15px 0}
.result-caption{font-size:11px;color:#dbc7e3;font-weight:900;letter-spacing:1.4px}
.ribbon{display:inline-block;background:linear-gradient(#b0d6f7,#76a1d3);border:3px solid #3b4165;padding:8px 20px;border-radius:8px;color:#263c63;font-size:12px;font-weight:1000;box-shadow:0 3px #322945;transform:rotate(-3deg)}
#controls{--charge:0%;position:absolute;bottom:22px;left:16px;right:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}
.direction-pad{display:flex;gap:8px;padding-bottom:3px}
.stick-button,.gesture-hint{display:none!important}
#controls[data-mode="stick"] .direction-pad,#controls[data-mode="swipe"] .direction-pad,#controls[data-mode="tilt"] .direction-pad{display:none}
#controls[data-mode="stick"] .stick-button{display:flex!important}
#controls[data-mode="auto"] .direction-pad,#controls[data-mode="auto"] .manual-hint,#controls[data-mode="auto"] .manual-power-label,.auto-hint,.auto-power-label{display:none}
#controls[data-mode="auto"] .gesture-hint{display:flex!important}
#controls[data-mode="auto"] .auto-hint,#controls[data-mode="auto"] .auto-power-label{display:block}
#controls[data-mode="swipe"] .gesture-hint,#controls[data-mode="tilt"] .gesture-hint{display:flex!important}
.gesture-hint{flex-direction:column;gap:8px;font-size:11px;text-shadow:0 2px #21172b;padding-bottom:16px}.gesture-hint small{font-size:8px;color:#e0cdeb}
.tilt-hint{display:none}#controls[data-mode="tilt"] .swipe-hint{display:none}#controls[data-mode="tilt"] .tilt-hint{display:block}
#controls .stick-button{width:150px;height:76px;border-radius:40px;background:linear-gradient(#4a395e,#6d537f)}
.stick-track{position:absolute;width:100px;height:8px;background:#30213f;border-radius:5px;box-shadow:0 2px #b294c366}
.stick-knob{display:grid;place-items:center;width:58px;height:58px;border:3px solid #3b274e;border-radius:50%;background:linear-gradient(#c0a3d2,#8b6aa4);box-shadow:inset 0 3px #edd9f4aa,0 3px #3b274e;transform:translateX(var(--stick-x,0px));font-size:32px;pointer-events:none}
#controls .stick-button.pressed{transform:none}
.control-options{border:0;padding:0;margin:20px 0;text-align:left}.control-options legend{font-size:11px;font-weight:900;letter-spacing:1px;color:#ffe291;margin-bottom:8px}
.control-options button{display:block;width:100%;padding:10px 12px;margin:7px 0;border:2px solid #382647;border-radius:12px;background:#59446e;text-align:left;box-shadow:0 3px #35243f}
.control-options button[aria-pressed="true"]{border-color:#ffdd88;background:#806542;color:#fff2c4}.control-options b{font-size:12px}.control-options small{display:block;font-size:10px;font-weight:400;line-height:1.4;margin-top:4px}
.control-options .sensitivity-setting{margin-top:22px}.card .sensitivity-help{font-size:10px;margin:8px 0 0;color:#ddcee7;text-align:center}
.game-control{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0;pointer-events:auto;touch-action:none;border:3px solid #30213f;border-radius:22px;background:linear-gradient(#a18aba,#725888);box-shadow:inset 0 3px #dec7ea99,inset 0 -3px #594068,0 6px #30213f,0 9px 14px #160c2944;transition:transform .07s,filter .07s;color:#fff0cf}
.direction-button{width:clamp(58px,17vw,76px);height:72px}
.game-control svg{position:relative;width:43px;height:43px;fill:currentColor;stroke:#49304e;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 2px 0 #4b315c66);pointer-events:none}
.game-control.pressed,.game-control:active:not(:disabled){transform:translateY(5px);box-shadow:inset 0 2px #fff4c866,0 1px #30213f;filter:brightness(1.13)}
.jump-button{width:92px;height:96px;border-color:#65432d;border-radius:29px;background:linear-gradient(#fff0a3,#ffd064 60%,#eca83e);color:#704626;box-shadow:inset 0 3px #fff9d1,inset 0 -3px #cb8e35,0 6px #744a2d,0 9px 14px #160c2944;overflow:hidden}
.jump-button svg{width:38px;height:38px;stroke:#704626;stroke-width:2.5;filter:none}
.jump-label{position:relative;font-size:14px;letter-spacing:1px;font-weight:1000;line-height:18px;pointer-events:none}
.jump-hint{position:relative;font-size:7px;letter-spacing:.2px;line-height:13px;pointer-events:none}
.jump-fill{position:absolute;inset:auto 0 0;height:var(--charge);background:#fff8cfaa;pointer-events:none}
.jump-button.charged{filter:brightness(1.15);box-shadow:inset 0 0 0 3px #fff7c7,0 6px #744a2d,0 0 20px #ffda7288}
@media(max-height:500px){#controls{bottom:14px}.direction-button{height:58px}.jump-button{height:80px;width:82px}}
#combo{position:absolute;top:125px;width:100%;text-align:center;color:#ffe38d;font-weight:1000;font-size:27px;pointer-events:none;text-shadow:0 3px #75421e,2px 0 #3f264e,-2px 0 #3f264e;transform:rotate(-6deg)}
#toast{position:fixed;bottom:calc(var(--game-bottom) + 85px);left:var(--game-left);right:var(--game-right);margin-inline:auto;width:min(calc(100vw - var(--game-left) - var(--game-right) - 40px),480px);padding:14px 18px;background:#fff0c3;color:#563d36;border:3px solid #916c47;box-shadow:0 4px #251b39;border-radius:14px;font-size:13px;line-height:1.4;font-weight:bold;z-index:5;pointer-events:none}
#ad-state{position:fixed;inset:0;background:#211833f2;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;padding:var(--game-top) var(--game-right) var(--game-bottom) var(--game-left);z-index:4;pointer-events:auto}
#game[data-state="playing"]~#toast{bottom:calc(var(--game-bottom) + 136px)}
.spinner{width:40px;height:40px;border:4px solid #6e557c;border-top-color:#ffe19b;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px) and (orientation:portrait){body #game,#panel>.home,#panel>.overlay{width:100vw}}
@media(max-height:620px){.card{padding:18px 14px}.card h2{font-size:24px}.card p{margin:8px 0}.result{font-size:44px}.overlay{padding:14px}.primary{padding:10px}.secondary{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}