:root{--bg:#fff8e7;--ink:#5a2d0c;--ink2:#7a4a24;--accent:#e8522c;--accent-d:#b53a1a;--card:#fff3d6;--alt:#fdeccb;--green:#2eb85c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:.2em 0 .4em}
h1{font-size:clamp(32px,6vw,54px);font-weight:900}
h2{font-size:clamp(24px,4vw,34px);font-weight:900}
h3{font-size:20px;font-weight:800}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:rgba(255,248,231,.92);backdrop-filter:blur(6px);border-bottom:2px solid #f3dfb8;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:900;font-size:22px;color:var(--accent)}
.nav nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav nav a{text-decoration:none;font-weight:700}
.lang{border:2px solid var(--ink);border-radius:10px;padding:0 8px;font-size:14px}
.btn{display:inline-block;text-decoration:none;font-weight:900;color:#fff;background:var(--accent);border:3px solid var(--accent-d);border-bottom-width:7px;border-radius:22px;transition:transform .12s}
.btn:hover{transform:translateY(-2px) scale(1.03)}.btn:active{transform:scale(.95)}
.btn-big{font-size:26px;padding:14px 40px;margin:12px 0}
.btn-small{font-size:15px;padding:6px 16px;border-bottom-width:4px;border-radius:14px}
.hero{position:relative;overflow:hidden;text-align:center;padding:70px 20px 50px}
.bunting{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,100%);height:64px}
.pill{display:inline-block;background:#ffe27a;border-radius:20px;padding:4px 14px;font-weight:900;font-size:13px;letter-spacing:1px}
.lead{font-size:19px;color:var(--ink2);max-width:640px;margin:0 auto 12px}
.wordmark{font-size:clamp(56px,11vw,120px);font-weight:900;color:#fff3dc;letter-spacing:-1px;transform:rotate(-3deg);margin:10px 0 6px;-webkit-text-stroke:3px #8a4a1c;text-shadow:0 3px 0 #c9783a,0 6px 0 #a85d26,0 10px 16px rgba(90,45,12,.35);animation:wobble 4s ease-in-out infinite}
@keyframes wobble{50%{transform:rotate(-1deg) scale(1.03)}}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.store{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;background:#111;color:#fff;border-radius:12px;padding:8px 18px;line-height:1.1}
.store small{font-size:12px}.store b{font-size:22px}
.float{position:absolute;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(90,45,12,.25))}
.f1{left:5%;top:22%}.f2{right:6%;top:20%;animation-delay:.4s}.f3{left:12%;bottom:10%;animation-delay:.8s}.f4{right:12%;bottom:8%;animation-delay:1.2s}
.marquee{overflow:hidden;padding:10px 0 30px}
.track{display:flex;gap:18px;width:max-content;animation:scroll 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.scene{position:relative;flex:none;width:260px;height:230px;border-radius:24px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;text-decoration:none;box-shadow:0 8px 20px rgba(90,45,12,.18);transition:transform .2s}
.scene:hover{transform:translateY(-6px) rotate(-1deg)}
/* samograjki: wszystkie pętle trwają 5 s */
.scene{overflow:hidden;align-items:center;padding:0}
.scene .eq i{font-style:normal}
.scene .an{display:none}
.scene .qm{animation:d-q 5s infinite}
.scene .an{display:inline;position:absolute;margin-left:-.65em;animation:d-a 5s infinite}
@keyframes d-q{0%,58%{opacity:1}62%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes d-a{0%,58%{opacity:0}62%,92%{opacity:1}96%,100%{opacity:0}}
.d-grid{display:grid;grid-template-columns:repeat(3,40px);gap:2px;margin-top:40px}
.d-pop{display:flex;justify-content:center;animation:d-pop 5s infinite both}
@keyframes d-pop{0%{transform:scale(0)}6%{transform:scale(1.2)}9%,92%{transform:scale(1)}100%{transform:scale(0)}}
.d-opts{position:absolute;bottom:10px;display:flex;gap:8px}
.d-opts b{position:relative;background:#fff1cc;border:2px solid #e0b56b;border-bottom-width:4px;border-radius:10px;padding:2px 12px;font-size:18px}
.d-win{animation:d-win 5s infinite}
@keyframes d-win{0%,55%{background:#fff1cc;transform:scale(1)}58%{transform:scale(.9)}62%,92%{background:#9be7ae;border-color:#2eb85c;transform:scale(1.12)}100%{background:#fff1cc}}
.d-tick{position:absolute;top:-16px;right:-12px;font-style:normal;font-weight:900;color:#fff;background:#2eb85c;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:15px;animation:d-tick 5s infinite}
@keyframes d-tick{0%,58%{transform:scale(0)}64%{transform:scale(1.4)}68%,90%{transform:scale(1)}95%,100%{transform:scale(0)}}
.d-vault{margin-top:30px;animation:d-spin 5s infinite}
@keyframes d-spin{0%{transform:rotate(0)}28%{transform:rotate(45deg)}48%{transform:rotate(90deg)}66%{transform:rotate(450deg) scale(1.08)}72%,90%{transform:rotate(450deg) scale(1)}100%{transform:rotate(360deg)}}
.d-disp{position:absolute;bottom:14px;background:#1b232b;border-radius:10px;padding:2px 16px;min-width:90px;height:34px;display:flex;justify-content:center;gap:4px;color:#7CFC9A;font:900 26px/30px monospace;animation:d-disp 5s infinite}
.d-disp i{font-style:normal}
.d-dg1{animation:d-dg1 5s infinite}.d-dg2{animation:d-dg2 5s infinite}
@keyframes d-dg1{0%,24%{opacity:0}28%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes d-dg2{0%,44%{opacity:0}48%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes d-disp{0%,60%{background:#1b232b}64%,92%{background:#1d5a33}}
.d-tick-safe{top:auto;bottom:40px;right:70px}
.d-rail{position:absolute;top:58px;left:10px;right:10px;height:5px;background:#7d8a97;border-radius:3px}
.d-claw{position:absolute;top:58px;left:50%;margin-left:-22px;animation:d-clawx 5s infinite}
@keyframes d-clawx{0%{transform:translateX(-80px)}38%,80%{transform:translateX(42px)}100%{transform:translateX(-80px)}}
.d-drop{display:flex;flex-direction:column;align-items:center;margin-top:16px;animation:d-drop 5s infinite}
@keyframes d-drop{0%,42%{transform:translateY(0)}52%,56%{transform:translateY(62px)}72%,100%{transform:translateY(0)}}
/* linka wisi od szyny: 16 px w spoczynku, 16 + 62 px przy zjeździe (te same klatki co d-drop) */
.d-cable{position:absolute;top:0;left:50%;margin-left:-1.5px;width:3px;height:80px;background:#555;transform-origin:top;transform:scaleY(.2);animation:d-cable 5s infinite}
@keyframes d-cable{0%,42%{transform:scaleY(.2)}52%,56%{transform:scaleY(1)}72%,100%{transform:scaleY(.2)}}
.d-prizes{position:absolute;bottom:8px;display:flex;gap:30px}
.d-prizes span{display:flex;flex-direction:column;align-items:center}
.d-prizes b{color:#5a2d0c;font-size:18px}
.d-caught{animation:d-lift 5s infinite}
@keyframes d-lift{0%,56%{transform:translateY(0)}72%,88%{transform:translateY(-58px)}100%{transform:translateY(0)}}
.d-train{position:absolute;bottom:22px;animation:d-train 5s infinite}
@keyframes d-train{0%{transform:translateX(280px)}22%,62%{transform:translateX(0)}90%,100%{transform:translateX(-300px)}}
.d-crates{position:absolute;top:-30px;left:84px;display:flex;gap:4px}
.d-cr{animation:d-crate 5s infinite both}
@keyframes d-crate{0%,30%{opacity:0;transform:translateY(-70px)}40%{opacity:1;transform:translateY(4px)}44%,100%{opacity:1;transform:translateY(0)}}
.d-track{position:absolute;bottom:16px;left:0;right:0;height:6px;background:#7d4a1f}
.d-gift{position:absolute;animation:d-gift 5s infinite}
@keyframes d-gift{0%,4%{transform:rotate(0)}8%{transform:rotate(-12deg)}12%{transform:rotate(12deg)}16%{transform:rotate(0)}24%{transform:rotate(-12deg)}28%{transform:rotate(12deg)}32%,44%{transform:rotate(0) scale(1)}50%,96%{transform:scale(0)}100%{transform:scale(1)}}
.d-trophy{position:absolute;animation:d-trophy 5s infinite}
.d-trophy em{position:absolute;top:0;right:-24px;background:#e8344f;color:#fff;font-style:normal;font-weight:900;font-size:14px;border-radius:10px;padding:2px 8px;transform:rotate(12deg)}
@keyframes d-trophy{0%,48%{transform:scale(0)}56%{transform:scale(1.2)}60%,92%{transform:scale(1)}96%,100%{transform:scale(0)}}
.d-masc{margin-top:30px;animation:d-jump 5s infinite}
@keyframes d-jump{0%,52%{transform:translateY(0)}56%{transform:translateY(4px) scale(1.1,.9)}64%{transform:translateY(-26px) scale(.95,1.08)}72%{transform:translateY(0) scale(1.05,.95)}76%,100%{transform:none}}
.d-banner{position:absolute;bottom:40px;background:#ff5c99;color:#fff;font-weight:900;font-size:24px;border:3px solid #fff;border-radius:30px;padding:4px 20px;animation:d-banner 5s infinite}
@keyframes d-banner{0%,56%{transform:scale(0) rotate(-14deg)}64%{transform:scale(1.15) rotate(-4deg)}68%,90%{transform:scale(1) rotate(-4deg)}96%,100%{transform:scale(0)}}
@media (prefers-reduced-motion:reduce){.track,.scene *{animation:none!important}.scene .an{opacity:0}}
.promos{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.promo{width:250px;border-radius:24px;padding:18px 14px 0;overflow:hidden;background:repeating-conic-gradient(from 0deg at 50% 70%,#e8344f 0 10deg,#ff5a4a 10deg 20deg);box-shadow:0 10px 26px rgba(90,45,12,.25)}
.promo h3{color:#fff;font-size:30px;line-height:1;font-weight:900;margin:0 0 14px;text-shadow:0 3px 0 #a31d33}
.phone{margin:0 auto -40px;width:200px;border:8px solid #1f1f1f;border-radius:30px 30px 0 0;border-bottom:0;overflow:hidden;background:#fff8e7}
.phone img{display:block;width:100%;height:auto}
.app-icon{display:inline-flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:28px;background:linear-gradient(#ffd0e2,#ff9cc6);box-shadow:0 8px 20px rgba(90,45,12,.25);transform:rotate(-6deg);margin-bottom:8px}
.scene .eq{position:absolute;top:14px;left:50%;transform:translateX(-50%) rotate(-2deg);background:#fff6df;border:3px solid #e8a54a;border-radius:14px;padding:4px 14px;font-size:24px;font-weight:900;white-space:nowrap}
@keyframes bob{50%{transform:translateY(-10px)}}
.section{padding:50px 20px;max-width:1080px;margin:0 auto;text-align:center}
.section.alt{max-width:none;background:var(--alt)}
.section.alt>*{max-width:1040px;margin-left:auto;margin-right:auto}
.sub{color:var(--ink2);margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px;text-align:left}
.card{background:var(--card);border:3px solid #f0cf94;border-bottom-width:7px;border-radius:20px;padding:18px;text-decoration:none;transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-.5deg)}
.card-icon{height:70px;display:flex;align-items:center}
.card p{margin:0;color:var(--ink2)}
.guide .more{display:inline-block;margin-top:10px;font-weight:800;color:var(--accent)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;text-align:left}
.steps li{display:flex;gap:12px;background:#fff;border-radius:18px;padding:16px}
.num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:20px}
.steps p{margin:0;color:var(--ink2)}
.tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:20px}
.table-link{background:#fff;border:3px solid #f0cf94;border-bottom-width:6px;border-radius:16px;padding:12px;text-decoration:none;display:flex;flex-direction:column;align-items:center;transition:transform .15s}
.table-link:hover,.table-link.active{transform:translateY(-3px);border-color:var(--accent)}
.table-link b{font-size:30px;color:var(--accent)}
.table-link span{font-size:14px;color:var(--ink2)}
.faq{max-width:760px;margin:20px auto 0;text-align:left}
details{background:var(--card);border-radius:16px;padding:14px 18px;margin-bottom:10px;border:2px solid #f0cf94}
summary{font-weight:800;cursor:pointer}
details p{margin:.6em 0 0;color:var(--ink2)}
.cta svg{animation:bob 1.6s ease-in-out infinite}
.page-head{padding-top:40px}
.crumbs{font-size:14px;color:var(--ink2)}.crumbs a{color:var(--accent)}
.chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:820px;margin:20px auto 0}
.cell{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:12px 16px;border:2px solid #f0cf94;font-size:20px}
.cell b{font-size:24px;color:var(--accent)}
.tricks{max-width:720px;margin:0 auto;text-align:left;font-size:19px}
.tricks li{margin-bottom:10px}
.article{max-width:760px;text-align:left}
.article h2{font-size:24px;margin-top:1.4em}
.cta-inline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border-radius:20px;padding:16px;margin-top:30px}
.cta-inline p{margin:0;color:var(--ink2)}
.cta-inline .btn{margin-left:auto;font-size:20px;padding:8px 24px}
.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:24px 20px;border-top:2px solid #f3dfb8;font-size:15px}
.footer>div{display:flex;align-items:center;gap:8px}
.footer .links{gap:16px}
.modal{position:fixed;inset:0;z-index:50;background:rgba(58,30,8,.7);display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden]{display:none}
.modal-box{position:relative;width:min(430px,100%);height:min(860px,100%);border-radius:28px;overflow:hidden;background:var(--bg);box-shadow:0 20px 60px rgba(0,0,0,.4);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.modal-box iframe{width:100%;height:100%;border:0}
.modal-close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:#fff;font-size:20px;font-weight:900;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@media (max-width:640px){.nav nav a:not(.btn):not(.lang){display:none}.float{display:none}.btn-big{font-size:22px;padding:12px 28px}.modal{padding:0}.modal-box{width:100%;height:100%;border-radius:0}.scene{width:200px;height:180px}}