@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{margin:0;background:#06110B}
a{color:#3BD16F}a:hover{color:#8FF0B0}
@keyframes bob-spin{to{transform:rotate(360deg)}}
@keyframes bob-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes bob-ripple{0%{transform:translateX(-50%) scale(.3);opacity:.7}100%{transform:translateX(-50%) scale(1.6);opacity:0}}
@keyframes bob-wave{to{transform:translateX(-50%)}}
@keyframes bob-chip{0%{transform:translateY(-40px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(760px) rotate(540deg);opacity:0}}
@keyframes bob-drop{0%{transform:translateY(-120px);opacity:0}60%{transform:translateY(6px);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes bob-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes bob-gnaw{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.92)}}
.bob-rings{animation:bob-spin 140s linear infinite;transform-origin:50% 50%}
.bob-rings2{animation:bob-spin 90s linear infinite reverse;transform-origin:50% 50%}
.bob-logo{animation:bob-float 6s ease-in-out infinite}
.bob-ripple{position:absolute;left:50%;bottom:-30px;width:420px;height:70px;border:2px solid rgba(59,209,111,.55);border-radius:50%;animation:bob-ripple 4s ease-out infinite}
.bob-ripple.d2{animation-delay:1.3s}.bob-ripple.d3{animation-delay:2.6s}
.bob-wave{animation:bob-wave 14s linear infinite}
.bob-wave.slow{animation-duration:22s}
.bob-chip{position:absolute;top:0;width:10px;height:5px;border-radius:2px;background:#C8A97E;animation:bob-chip 7s linear infinite;opacity:0}
.bob-chip:nth-child(1){left:8%;animation-delay:0s}
.bob-chip:nth-child(2){left:19%;animation-delay:2.1s;width:7px;background:#E3CFA8}
.bob-chip:nth-child(3){left:33%;animation-delay:4.4s}
.bob-chip:nth-child(4){left:47%;animation-delay:1.2s;width:12px;background:#9C7F57}
.bob-chip:nth-child(5){left:61%;animation-delay:5.6s}
.bob-chip:nth-child(6){left:72%;animation-delay:3.3s;width:8px;background:#E3CFA8}
.bob-chip:nth-child(7){left:84%;animation-delay:.6s;background:#9C7F57}
.bob-chip:nth-child(8){left:93%;animation-delay:4.9s}
.bob-log{position:relative;height:38px;border-radius:19px;background:linear-gradient(180deg,#B48A5A 0%,#8A6238 55%,#5E4024 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 6px 0 rgba(0,0,0,.35);animation:bob-drop .9s cubic-bezier(.3,1.4,.5,1) both}
.bob-log::before{content:"";position:absolute;left:-4px;top:-1px;width:40px;height:40px;border-radius:50%;background:repeating-radial-gradient(circle,#E9D2A6 0 3px,#C79D69 3px 5px);box-shadow:0 0 0 2px #5E4024}
.bob-log::after{content:"";position:absolute;left:60px;right:30px;top:12px;height:2px;background:rgba(0,0,0,.25);border-radius:2px;box-shadow:40px 9px 0 rgba(0,0,0,.18)}
.bob-slot{height:38px;border-radius:19px;border:2px dashed rgba(200,169,126,.35);box-sizing:border-box;animation:bob-pulse 2.4s ease-in-out infinite}
.bob-stack > div:nth-child(1){width:100%}
.bob-stack > div:nth-child(2){width:92%;margin-left:3%}
.bob-stack > div:nth-child(3){width:86%;margin-left:7%}
.bob-stack > div:nth-child(4){width:78%;margin-left:10%}
.bob-stack > div:nth-child(5){width:70%;margin-left:14%}
.bob-stack > div:nth-child(6){width:60%;margin-left:19%}
.bob-stack > div:nth-child(2) .bob-log{animation-delay:.15s}
.bob-stack > div:nth-child(3) .bob-log{animation-delay:.3s}
.bob-stack > div:nth-child(4) .bob-log{animation-delay:.45s}
.bob-stack > div:nth-child(5) .bob-log{animation-delay:.6s}
.bob-stack > div:nth-child(6) .bob-log{animation-delay:.75s}
.bob-bite{animation:bob-gnaw 1.2s ease-in-out infinite;transform-origin:left center;display:inline-block}
.bob-input::placeholder{color:#7F9486}
@keyframes bob-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bob-fall{0%{transform:translateY(-260px);opacity:0}70%{transform:translateY(4px);opacity:1}80%,100%{transform:translateY(0);opacity:1}}
@keyframes bob-trickle{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
.bob-dam-stick{animation:bob-sway 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.bob-dam-stick.d2{animation-delay:1.6s;animation-duration:6.5s}
.bob-dam-stick.d3{animation-delay:3.1s;animation-duration:4.4s}
.bob-dam-new{animation:bob-fall 6s cubic-bezier(.3,1.3,.5,1) infinite}
.bob-trickle{animation:bob-trickle 1.6s linear infinite}
/* --- dodatki wersji produkcyjnej --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none !important}
#game-canvas:focus-visible{outline:3px solid #22B356}
.bob-step{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:600}
.bob-step-ico{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bob-step.done .bob-step-ico{background:#F2EFE6;color:#14612F}
.bob-step.done .bob-step-txt{color:#F2EFE6}
.bob-step.todo .bob-step-ico{border:2px dashed rgba(242,239,230,.5)}
.bob-step.todo .bob-step-txt{color:#BFE3CB}
.bob-rank-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(232,238,233,.05)}
.bob-rank-pos{font-family:'Anton',sans-serif;font-size:22px;width:28px;color:#E3CFA8}
.bob-rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bob-rank-me{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#04140A;background:#22B356;padding:3px 8px;border-radius:999px;font-weight:800}
.bob-rank-score{font-family:'Anton',sans-serif;font-size:22px;color:#F2EFE6}
/* --- formularze, instrukcja --- */
.bob-input{border-radius:16px;border:1px solid rgba(232,238,233,.2);background:#0A1A10;color:#E8EEE9;padding:0 18px;font-size:16px;font-family:inherit;width:100%;min-height:52px}
textarea.bob-input{padding:14px 18px;resize:vertical;min-height:150px;line-height:1.5}
select.bob-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9DB0A3 50%),linear-gradient(135deg,#9DB0A3 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.bob-input:focus{outline:2px solid #22B356;outline-offset:1px;border-color:transparent}
.bob-input[aria-invalid="true"]{border-color:#F4BBA3}
.bob-btn{min-height:56px;border-radius:16px;border:0;background:#22B356;color:#04140A;font-weight:800;font-size:17px;font-family:inherit;cursor:pointer;padding:0 22px}
.bob-btn:hover{background:#3BD16F}.bob-btn:disabled{opacity:.6;cursor:wait}
.bob-btn-ghost{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(232,238,233,.2);background:transparent;color:#E8EEE9;font-weight:600;font-size:14px;font-family:inherit;cursor:pointer}
.bob-btn-ghost:hover{border-color:#22B356}
.bob-card{background:#06110B;border:1px solid rgba(232,238,233,.1);border-radius:24px;padding:32px}
.bob-row{display:flex;flex-wrap:wrap;gap:16px}.bob-row>.bob-field{flex:1 1 220px;min-width:0}
.bob-field{display:flex;flex-direction:column;gap:8px}
.bob-field label{font-size:15px;font-weight:800}
.bob-ferr{color:#F4BBA3;font-size:13px;font-weight:600;min-height:0}.bob-ferr:empty{display:none}
.bob-hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.bob-note{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:16px;background:rgba(227,207,168,.1);border:1px solid rgba(227,207,168,.35);color:#E3CFA8;font-size:14px;line-height:1.5}
.bob-howto{margin-top:12px;display:flex;flex-direction:column;gap:24px;scroll-margin-top:24px}
.bob-howto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.bob-howto-card{position:relative;background:#06110B;border:1px solid rgba(232,238,233,.1);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px;color:#B9C7BD;font-size:15px;line-height:1.55}
.bob-howto-card strong{color:#F2EFE6;font-size:18px}
.bob-howto-card b{color:#E3CFA8}
.bob-howto-ill{width:100%;height:72px;background:#04100A;border-radius:14px;margin-bottom:6px}
.bob-howto-num{position:absolute;top:16px;right:18px;font-family:'Anton',sans-serif;font-size:22px;color:#22B356;opacity:.8}
.bob-keys{font-size:13px;color:#9DB0A3;margin-top:auto}
.bob-keys em{font-style:normal;color:#E8EEE9;font-weight:700}
kbd{display:inline-block;min-width:26px;padding:3px 7px;margin-right:4px;border-radius:7px;background:#0F3F24;border:1px solid rgba(232,238,233,.18);border-bottom-width:3px;color:#E8EEE9;font:700 12px/1.3 Manrope,sans-serif;text-align:center}
.bob-howto-tip{margin:0;padding:16px 20px;border-left:3px solid #22B356;background:rgba(34,179,86,.06);border-radius:0 14px 14px 0;color:#B9C7BD;font-size:15px;line-height:1.55}
.bob-howto-tip strong{color:#E8EEE9}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}
/* --- podstrony --- */
.bob-legal{max-width:760px;margin:0 auto;padding:64px 24px 96px;color:#B9C7BD;font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.7}
.bob-legal h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(40px,6vw,64px);text-transform:uppercase;color:#F2EFE6;margin:16px 0 24px;line-height:1}
.bob-legal h2{color:#E8EEE9;font-size:20px;margin:32px 0 8px}
.bob-legal strong{color:#E8EEE9}
.bob-legal-back{font-weight:800;text-decoration:none}
.bob-legal-todo{padding:12px 16px;border-radius:12px;background:rgba(227,207,168,.1);border:1px solid rgba(227,207,168,.35);color:#E3CFA8}
.bob-legal-date{margin-top:40px;font-size:14px;color:#7F9486}

/* ===== strona, nagłówek ===== */
:root{--hdr:76px}
html{scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.bob-page{overflow:hidden;overflow:clip}
@supports (overflow:clip){.bob-page{overflow:visible;overflow-x:clip}}
.bob-header{position:sticky;top:0;z-index:100;background:rgba(6,17,11,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(232,238,233,.08);transition:background .25s,box-shadow .25s}
.bob-header.scrolled{background:rgba(6,17,11,.94);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bob-header-in{max-width:1280px;margin:0 auto;height:var(--hdr);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bob-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#E8EEE9;min-width:0}
.bob-brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;transition:width .25s,height .25s}
.bob-brand-txt{display:flex;flex-direction:column;line-height:1.05}
.bob-brand-name{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.04em;white-space:nowrap}
.bob-brand-sub{font-size:12px;color:#9DB0A3;letter-spacing:.12em;text-transform:uppercase}
.bob-brand:hover{color:#E8EEE9}
.bob-nav{display:flex;align-items:center;gap:4px 22px}
.bob-nav a{position:relative;color:#E8EEE9;text-decoration:none;font-weight:600;font-size:15px;padding:12px 4px;min-height:44px;display:inline-flex;align-items:center}
.bob-nav a:not(.bob-cta)::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:2px;border-radius:2px;background:#22B356;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.bob-nav a:hover{color:#3BD16F}
.bob-nav a[aria-current="true"]{color:#3BD16F}
.bob-nav a[aria-current="true"]::after,.bob-nav a:not(.bob-cta):hover::after{transform:scaleX(1)}
.bob-cta{background:#22B356;color:#04140A !important;font-weight:800;text-decoration:none;padding:12px 20px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;white-space:nowrap}
.bob-cta:hover{background:#3BD16F}
.bob-cta-menu{display:none !important}
.bob-burger{display:none;width:48px;height:48px;border:1px solid rgba(232,238,233,.18);border-radius:14px;background:transparent;color:#E8EEE9;cursor:pointer;align-items:center;justify-content:center;flex:none}
.bob-burger-box{position:relative;width:22px;height:16px}
.bob-burger-box span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s,top .25s}
.bob-burger-box span:nth-child(1){top:0}.bob-burger-box span:nth-child(2){top:7px}.bob-burger-box span:nth-child(3){top:14px}
.bob-burger[aria-expanded="true"] .bob-burger-box span:nth-child(1){top:7px;transform:rotate(45deg)}
.bob-burger[aria-expanded="true"] .bob-burger-box span:nth-child(2){opacity:0}
.bob-burger[aria-expanded="true"] .bob-burger-box span:nth-child(3){top:7px;transform:rotate(-45deg)}
.bob-menu-backdrop{position:fixed;inset:0;z-index:90;background:rgba(3,10,6,.6)}

@media (max-width:960px){
  :root{--hdr:64px}
  .bob-header-in{padding:0 16px}
  .bob-brand img{width:42px;height:42px}
  .bob-brand-name{font-size:20px}
  .bob-brand-sub{font-size:11px}
  .bob-cta-desk{display:none}
  .bob-burger{display:inline-flex}
  .bob-nav{position:fixed;left:0;right:0;top:var(--hdr);z-index:95;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));background:#06110B;border-bottom:1px solid rgba(232,238,233,.1);box-shadow:0 30px 60px rgba(0,0,0,.5);max-height:calc(100dvh - var(--hdr));overflow-y:auto;transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .22s ease,opacity .22s ease,visibility 0s .22s}
  .bob-nav.open{transform:none;opacity:1;visibility:visible;transition:transform .22s ease,opacity .22s ease}
  .bob-nav a{font-size:20px;font-weight:800;min-height:58px;padding:0 6px;border-bottom:1px solid rgba(232,238,233,.07)}
  .bob-nav a:not(.bob-cta)::after{display:none}
  .bob-nav a[aria-current="true"]{color:#3BD16F}
  .bob-cta-menu{display:flex !important;margin-top:16px;min-height:56px;font-size:17px;border-bottom:0 !important}
  body.menu-open{overflow:hidden}
}
@media (min-width:961px){.bob-menu-backdrop{display:none !important}}

/* ===== urządzenia dotykowe vs mysz ===== */
.only-touch{display:none}
@media (hover:none) and (pointer:coarse){.only-touch{display:inline}.only-desk{display:none !important}p.only-touch{display:block}}

/* ===== plansza i pad ===== */
.bob-stage{position:relative;display:flex;flex-direction:column;gap:12px}
#game-canvas{display:block;width:100%;height:auto;aspect-ratio:960/340;border-radius:24px;background:#04100A;touch-action:manipulation;outline-offset:4px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bob-pad{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bob-pad-btn{position:relative;min-height:64px;border:0;border-radius:18px;font:800 18px/1 Manrope,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .06s,filter .06s,box-shadow .06s;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.bob-pad-btn svg{width:24px;height:24px;flex:none}
.bob-pad-btn kbd{background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.18);color:inherit;margin:0 0 0 4px}
.bob-pad-jump{background:#22B356;color:#04140A}
.bob-pad-bite{background:#E3CFA8;color:#1E1408}
.bob-pad-btn:hover{filter:brightness(1.08)}
.bob-pad-btn.pressed,.bob-pad-btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.35);filter:brightness(.92)}
.bob-pad-btn:focus-visible{outline:3px solid #F2EFE6;outline-offset:3px}
.bob-player{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;font-size:14px;color:#9DB0A3}
.bob-rotate{margin:0;font-size:13px;color:#7F9486;text-align:center}

@media (max-width:640px){
  /* plansza od krawędzi do krawędzi – więcej miejsca na grę */
  .bob-stage{margin:0 -24px}
  #game-canvas{border-radius:0}
  .bob-pad{padding:0 12px;gap:10px}
  .bob-pad-btn{min-height:84px;font-size:20px;border-radius:20px;flex-direction:column;gap:6px}
  .bob-pad-btn svg{width:30px;height:30px}
  .bob-player{font-size:13px}
}
@media (orientation:landscape){.bob-rotate{display:none !important}}
/* telefon poziomo: przyciski po bokach planszy, pod kciukami */
@media (orientation:landscape) and (max-height:520px) and (hover:none){
  :root{--hdr:52px}
  .bob-brand img{width:36px;height:36px}
  .bob-brand-sub{display:none}
  .bob-stage{margin:0;display:grid;grid-template-columns:88px minmax(0,1fr) 88px;align-items:center;gap:10px;width:100%;max-width:calc((100dvh - var(--hdr) - 20px) * 960 / 340 + 196px);align-self:center}
  .bob-pad{display:contents}
  .bob-pad-jump{grid-column:1;grid-row:1}
  #game-canvas{grid-column:2;grid-row:1;border-radius:14px}
  .bob-pad-bite{grid-column:3;grid-row:1}
  .bob-pad-btn{width:88px;height:88px;min-height:0;border-radius:50%;flex-direction:column;gap:4px;font-size:14px;padding:0}
  .bob-pad-btn svg{width:28px;height:28px}
}

