@charset "UTF-8";
:root{font-family:"Trebuchet MS",system-ui,sans-serif;color:#293d68;background:#fff9ee;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #dba74b;outline-offset:5px}button:disabled{opacity:.45;cursor:wait}[hidden]{display:none!important}
#stage{width:min(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9;position:relative;overflow:hidden;background:#e8f2ff;container-type:inline-size;isolation:isolate}body:fullscreen{width:100vw;height:100svh;background:#fff9ee}#game{position:absolute;inset:0}canvas{display:block}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;background:#fff9ee;font-size:clamp(12px,1.6cqw,20px);z-index:20}.loader-paw{font-size:40px;color:#dcad51;animation:breathe 1s ease-in-out infinite alternate}@keyframes breathe{to{transform:scale(.7);opacity:.5}}
#toolbar{position:absolute;top:3.5%;left:3.5%;right:3.5%;display:flex;justify-content:space-between;align-items:center;z-index:6;pointer-events:none}.brand{font-size:clamp(9px,1.05cqw,15px);font-weight:800;letter-spacing:.13em;display:flex;align-items:center;gap:1cqw}.brand-paw{font-size:2.2cqw;color:#365ed1}.brand-divider{opacity:.25;margin:0 .2cqw}.brand-sub{font-size:.8em;letter-spacing:.16em;opacity:.68}.tools{display:flex;gap:.6cqw;pointer-events:auto}.icon-button{border:1px solid #ffffff9c;background:#fff9;width:3.4cqw;height:3.4cqw;min-width:30px;min-height:30px;display:grid;place-content:center;border-radius:50%;color:#293d68;font-size:clamp(17px,1.8cqw,26px);position:relative;backdrop-filter:blur(8px)}.icon-button:hover{background:#fff}.off-mark{position:absolute;font-size:11px;right:5px;bottom:3px}.icon-button[aria-pressed=true] .off-mark{display:none}
.menu{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,#fff9eef5 0%,#fff9eedd 30%,#fff9ee4d 55%,transparent 74%)}.menu-copy{position:absolute;left:6.5%;top:24%;max-width:56%}.eyebrow{display:flex;align-items:center;gap:.7cqw;font-size:clamp(8px,.95cqw,14px);font-weight:800;letter-spacing:.18em;color:#5b5590}.eyebrow>span{width:.5cqw;height:.5cqw;background:#d7aa51;border-radius:50%}h1{font-size:clamp(26px,5.25cqw,72px);line-height:1.03;letter-spacing:-.065em;margin:1.5cqw 0;color:#293d68;font-weight:800}h1 em{font-family:Georgia,serif;font-weight:400;color:#c4415b}p{font-size:clamp(10px,1.35cqw,19px);line-height:1.7;color:#52617a;margin:0 0 2cqw}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:4cqw;border:0;background:#365ed1;color:#fff;border-radius:100px;padding:1.2cqw 1.8cqw;font-weight:700;font-size:clamp(12px,1.4cqw,20px);box-shadow:0 6px 0 #1f52450c;transition:background .2s,transform .2s}.primary-button:hover{background:#284bac;transform:translateY(-2px)}.primary-button span{font-size:1.4em;color:#e7f1ff}.menu-meta{display:flex;gap:2cqw;font-size:clamp(7px,.9cqw,13px);margin-top:1.4cqw;color:#576580}.menu-meta span+span{border-left:1px solid #d4e3f8;padding-left:2cqw}.dog-note{position:absolute;top:27%;right:10%;font-family:Georgia,serif;font-style:italic;transform:rotate(7deg);font-size:1.45cqw;line-height:1.4;color:#52617a}.dog-note svg{display:block;width:6cqw;height:4cqw;margin-left:3cqw;fill:none;stroke:#9c8bc6;stroke-width:2;stroke-linecap:round}.menu-footer{position:absolute;bottom:4%;left:6.5%;right:4%;display:flex;align-items:center;justify-content:space-between;font-size:clamp(7px,.85cqw,12px);color:#52617a}.menu-footer>span:first-child{display:flex;align-items:center;gap:.55cqw}kbd{border:1px solid #9c8bc666;background:#ffffff80;border-radius:5px;padding:.35cqw .6cqw;font:inherit;font-weight:700}i{width:1cqw}.footer-note{letter-spacing:.12em;font-size:.72cqw;opacity:.65}
#hud{position:absolute;top:13%;left:3.5%;right:3.5%;display:flex;align-items:start;justify-content:space-between;z-index:4;pointer-events:none;gap:2cqw}.hud-left{display:flex;gap:.7cqw}.hud-chip{display:flex;align-items:center;gap:.7cqw;padding:.8cqw 1.2cqw;background:#fffffff0;box-shadow:0 3px 12px #3059450b;border-radius:100px;font-size:1.5cqw}.bone-symbol{font-size:2cqw}.hud-chip strong{font-size:1.8cqw}.hud-chip #bone-total{font-size:1.2cqw;color:#576580}.hearts{color:#e78d75;font-size:1.8cqw;letter-spacing:.1cqw}.level-chip{display:flex;flex-direction:column;align-items:center;gap:.8cqw;font-size:1.1cqw;font-weight:700;background:#ffffffe6;padding:1cqw 2cqw;border-radius:1.3cqw}.progress-track{display:block;background:#dce8f5;height:.35cqw;min-height:3px;border-radius:10px;width:13cqw;overflow:hidden}.progress-track span{display:block;height:100%;background:#8b71c6;width:0;transition:width .3s}.score{flex-direction:column;gap:.2cqw;border-radius:1.3cqw;min-width:8cqw}.score>span{font-size:.6cqw;letter-spacing:.16em;color:#576580}.score strong{font-size:1.55cqw;letter-spacing:.05em}
.hint{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);background:#ffffffe6;backdrop-filter:blur(8px);padding:.8cqw 1.5cqw;border-radius:100px;font-size:.95cqw;white-space:nowrap;z-index:4;color:#52617a}.hint span{color:#9c8bc6;margin:0 .6cqw}#toast{position:absolute;left:50%;top:27%;transform:translate(-50%,-8px);padding:.9cqw 1.7cqw;background:#fff8e6f5;border:1px solid #fff;border-radius:100px;color:#6e6b3e;font-size:1.3cqw;font-weight:700;opacity:0;transition:opacity .2s,transform .2s;z-index:9;pointer-events:none;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}
#touch{position:absolute;inset:0;z-index:5;pointer-events:none;touch-action:none}.direction-buttons{position:absolute;left:4%;bottom:7%;display:flex;gap:12px}#touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #fff9;background:#fffc;backdrop-filter:blur(8px);border-radius:50%;color:#365ed1;width:clamp(42px,6cqw,70px);height:clamp(42px,6cqw,70px);font-size:clamp(22px,3cqw,36px);box-shadow:0 3px 0 #30594511}#touch button:active,#touch button.held{background:#365ed1;color:#fff}.jump-button{position:absolute;right:4%;bottom:7%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.jump-button small{font-size:8px;font-weight:800;margin-top:3px}
.dialog-layer{position:absolute;inset:0;display:grid;place-items:center;z-index:12;background:#293d684f;backdrop-filter:blur(7px)}.dialog-card{background:#fff9ee;border:1px solid #fff;width:43%;padding:3.4cqw;border-radius:2.5cqw;box-shadow:0 20px 80px #293d6833;text-align:center}.dialog-card .eyebrow{justify-content:center}.dialog-card h2{font-size:3.3cqw;line-height:1.1;letter-spacing:-.06em;margin:1.4cqw 0}.dialog-card p{font-size:1.2cqw;margin-bottom:1.8cqw}.dialog-card .primary-button{width:100%;justify-content:center}.text-button{border:0;background:transparent;color:#52617a;font-size:1.05cqw;margin:1.2cqw auto 0;padding:.5cqw}#result-stats{display:flex;justify-content:center;gap:2cqw;margin:0 0 2cqw;color:#52617a;font-size:1cqw}#result-stats strong{display:block;color:#365ed1;font-size:2.2cqw;margin-bottom:.3cqw}
@media(pointer:coarse){#hint{display:none}.menu-footer>span:first-child{font-size:0}.menu-footer>span:first-child:after{content:"PRZYCISKI NA EKRANIE · 2× SKOK = WYŻEJ";font-size:1.1cqw}.menu-footer kbd,.menu-footer i{display:none}}
@media(max-width:600px){.brand-sub,.brand-divider,.footer-note,.dog-note{display:none}.menu-copy{top:23%;left:5%}h1{margin:1.3cqw 0;font-size:5.6cqw}.menu-copy p{font-size:2.1cqw;line-height:1.5;margin-bottom:2cqw}.eyebrow{font-size:1.5cqw}.primary-button{font-size:2.4cqw;padding:1.7cqw 2.5cqw}.menu-meta{font-size:1.65cqw;gap:1.5cqw}.menu-footer{left:5%;bottom:3%;font-size:1.4cqw}.menu-footer>span:first-child:after{font-size:1.5cqw}.dialog-card{width:67%;padding:4cqw}.dialog-card h2{font-size:5cqw}.dialog-card p{font-size:2.3cqw}.text-button{font-size:2.2cqw}#result-stats{font-size:2cqw}#result-stats strong{font-size:3.8cqw}#toolbar{top:3%}#hud{top:21%;gap:1cqw}.level-chip{font-size:1.8cqw}.hud-chip{font-size:2cqw;padding:1cqw 1.8cqw}.hud-chip strong,.hearts{font-size:2.5cqw}.hud-chip #bone-total{font-size:2cqw}.bone-symbol{font-size:3cqw}.score>span{font-size:1.2cqw}#toast{top:37%;font-size:2.3cqw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Portrait phones: readable UI and a real play area, rather than a tiny 16:9 strip. */
@media (max-width:639px) and (max-aspect-ratio:1/1){
 #stage{width:min(100vw,calc(100svh * 4 / 5));aspect-ratio:4/5}
 #toolbar{top:12px;left:12px;right:12px}.brand{font-size:9px;gap:6px}.brand-paw{font-size:22px}.brand-sub,.brand-divider,.dog-note,.footer-note{display:none}
 .tools{gap:6px}.icon-button{width:44px;height:44px;min-width:44px;min-height:44px;font-size:23px}
 .menu-copy{left:6%;top:17%;max-width:88%}.eyebrow{font-size:10px;gap:8px}.eyebrow>span{width:6px;height:6px}
 h1{font-size:clamp(30px,10cqw,44px);margin:12px 0;line-height:1.03}.menu-copy p{font-size:13px;line-height:1.5;max-width:260px;margin-bottom:16px}.desktop-break{display:none}
 .primary-button{font-size:15px;min-height:48px;padding:12px 20px;gap:35px}.menu-meta{font-size:10px;gap:12px;margin-top:14px}.menu-meta span+span{padding-left:12px}
 .menu-footer{left:6%;bottom:18px;font-size:10px}.menu-footer>span:first-child{font-size:0;flex-wrap:wrap;gap:5px}.menu-footer kbd,.menu-footer i{display:none}.menu-footer>span:first-child:after{content:"PRZYCISKI NA EKRANIE · 2× SKOK = WYŻEJ";font-size:9px}
 #hud{top:68px;left:12px;right:12px;gap:8px}.hud-left{gap:6px}.hud-chip{padding:8px 12px;gap:6px;font-size:14px;min-height:40px}.hud-chip strong{font-size:18px}.hud-chip #bone-total{font-size:13px}.bone-symbol{font-size:21px}.hearts{font-size:17px;letter-spacing:1px}
 .score{padding:6px 12px;min-width:58px;border-radius:12px;gap:1px}.score>span{font-size:7px}.score strong{font-size:15px}.level-chip{position:absolute;top:48px;left:0;align-items:start;gap:5px;padding:7px 10px;font-size:10px;border-radius:9px}.progress-track{width:95px;height:3px}
 #hint{display:none}#toast{top:170px;max-width:calc(100% - 24px);font-size:12px;line-height:1.4;white-space:normal;text-align:center;padding:9px 14px;border-radius:14px}
 .direction-buttons{left:max(12px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));gap:10px}#touch button{width:58px;height:58px;font-size:30px}.jump-button{right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}.jump-button small{font-size:9px}
 .dialog-card{width:calc(100% - 28px);max-width:360px;padding:24px;border-radius:22px}.dialog-card h2{font-size:30px;margin:16px 0}.dialog-card p{font-size:14px;line-height:1.5;margin-bottom:18px}.dialog-card .eyebrow{font-size:10px}.text-button{font-size:14px;min-height:44px;margin-top:8px}#result-stats{gap:20px;font-size:12px;margin-bottom:20px}#result-stats strong{font-size:24px;margin-bottom:4px}
}
/* Avoid browser panning and selection only over the touch controls. */
#touch button{min-width:44px;min-height:44px}
@media (any-pointer:coarse){#hint{display:none}}

.level-picker{display:flex;align-items:center;gap:12px;margin:12px 0 16px;font-size:13px;color:#52617a}.level-picker select{max-width:230px;padding:10px 12px;border:1px solid #d4e3f8;border-radius:12px;background:#fffaf0;color:#293d68;font:inherit}.level-picker select:focus-visible{outline:3px solid #b58a47;outline-offset:2px}
