:root{--blue:#155ed0;--deep:#10264c;--cyan:#08b4ce;--yellow:#ffc83e;--muted:#64748b;--white:#fff;--bg:#f5f9ff;--line:#e3edfa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--deep)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg)}.container{width:min(1160px,calc(100% - 40px));margin:auto}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #ffbb17;outline-offset:4px}h1,h2,h3,p{margin-top:0}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.header-content{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:20px}.brand{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:27px;letter-spacing:-1.2px;white-space:nowrap}.brand-accent{color:var(--cyan)}.brand-symbol{height:44px;width:44px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));border-radius:15px;color:#fff;font-size:27px;position:relative;box-shadow:0 7px 18px #1462c333}.brand-symbol span{position:absolute;top:2px;right:2px;font-size:12px;color:var(--yellow)}nav{display:flex;gap:30px}nav a{font-weight:700;color:#344868;font-size:14px}nav a:hover{color:var(--blue)}.future-label{font-size:12px;font-weight:700;background:#edf3fc;border:1px solid var(--line);color:#59708b;border-radius:25px;padding:11px 14px}.hero{min-height:450px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:45px;padding-top:46px;padding-bottom:54px}.eyebrow,.section-kicker{color:#147ca4;font-size:12px;font-weight:900;letter-spacing:1.3px}.hero h1{font-size:clamp(38px,5vw,64px);line-height:1.07;letter-spacing:-2.4px;margin:18px 0 21px}.hero h1 span{color:var(--blue)}.hero-copy>p{font-size:17px;line-height:1.75;color:#526581;max-width:560px;margin-bottom:27px}.primary-button{display:inline-flex;gap:32px;align-items:center;background:var(--yellow);border-radius:14px;padding:15px 23px;font-weight:900;box-shadow:0 8px 0 #e5ae1a;color:#243353}.primary-button:hover{transform:translateY(-2px)}.hero-note{margin-top:29px;color:#667994;font-size:12px;line-height:1.8}.hero-art{height:360px;border-radius:38px;background:linear-gradient(125deg,#d3f4fc,#dce8ff 70%,#f4efff);position:relative;overflow:hidden;display:grid;place-items:center}.art-orbit{position:absolute;border:2px dashed #fff9;border-radius:50%;width:370px;height:370px}.orbit-two{width:265px;height:265px}.art-card{position:relative;width:min(78%,340px);padding:22px;border-radius:23px;background:#fff;box-shadow:0 25px 45px #14528e2a;transform:rotate(-5deg);z-index:2}.art-head{font-weight:900;color:var(--blue);display:flex;justify-content:space-between}.art-math{margin:30px 0 21px;text-align:center;font-size:37px;font-weight:900}.art-math span{color:#0bb4c9}.art-options{display:flex;gap:9px;justify-content:center}.art-options span{padding:11px 14px;background:#f0f4fb;border-radius:10px;font-weight:900}.art-options .correct{background:#cff4dd;color:#138e55}.art-progress{height:8px;background:#e4eaf4;border-radius:10px;margin-top:22px;overflow:hidden}.art-progress span{display:block;width:68%;height:100%;background:#1cbb8b}.math-bubble{position:absolute;display:grid;place-items:center;width:65px;height:65px;border-radius:20px;box-shadow:0 12px 27px #376a9c22;font-size:42px;font-weight:900;z-index:3}.plus{background:#ffcb43;color:#fff;top:28px;left:28px;transform:rotate(-15deg)}.division{background:#0cbacc;color:#fff;bottom:22px;right:26px;transform:rotate(14deg)}.equals{background:#9775ef;color:#fff;top:35px;right:32px;transform:rotate(11deg)}.sparkle{position:absolute;color:#ffba32;font-size:50px}.s1{bottom:25px;left:24px}.s2{top:112px;right:4px}.games-section{padding:63px 0 78px;background:#fff}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:30px}.section-heading h2,.about h2{font-size:clamp(27px,3vw,35px);letter-spacing:-.8px;margin:8px 0}.section-heading p,.about p{color:var(--muted);line-height:1.6;margin-bottom:0}.count-pill{color:var(--blue);background:#eaf3ff;padding:10px 15px;font-weight:900;border-radius:30px;font-size:13px;white-space:nowrap}.empty-state{border:2px dashed #bad2f1;border-radius:24px;background:#f9fcff;text-align:center;padding:50px 20px}.empty-icon{font-size:52px;margin-bottom:13px}.empty-state h3{font-size:24px;margin-bottom:8px}.empty-state p{max-width:560px;margin:0 auto;color:var(--muted);line-height:1.7}.categories{padding-top:66px;padding-bottom:78px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.category-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:27px;min-height:205px;box-shadow:0 10px 25px #193b6508}.category-icon{display:grid;place-items:center;background:#eaf3ff;border-radius:16px;width:56px;height:56px;font-size:30px;margin-bottom:18px}.violet .category-icon{background:#f0e9ff}.amber .category-icon{background:#fff4db}.category-card h3{font-size:22px;margin-bottom:7px}.category-card p{color:var(--muted);font-size:14px;margin-bottom:15px}.category-count{font-size:12px;font-weight:800;color:#6782a3}.about{display:flex;align-items:center;gap:24px;background:linear-gradient(110deg,#e7f3ff,#e7f9f6);padding:34px;border-radius:24px;margin-bottom:70px}.about-icon{display:grid;place-items:center;background:#fff;border-radius:18px;width:76px;min-width:76px;height:76px;font-size:41px}.about p{max-width:790px}footer{background:#112d57;color:#d3e1f6}.footer-content{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:107px}.footer-content .brand{color:#fff;font-size:22px}.footer-content .brand-symbol{width:36px;height:36px;font-size:23px}.footer-content>span{font-size:13px}@media(max-width:900px){.header-content{flex-wrap:wrap;padding:15px 0}.header-content nav{order:3;width:100%;justify-content:center;gap:25px}.hero{grid-template-columns:1fr;gap:12px;padding-top:43px}.hero-art{max-width:620px;width:100%;margin:auto}.category-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.container{width:min(100% - 28px,1160px)}.brand{font-size:23px}.header-content{gap:10px}.future-label{font-size:10px;padding:8px}.header-content nav{gap:18px}nav a{font-size:12px}.hero h1{letter-spacing:-1.2px}.hero-art{height:290px}.math-bubble{height:46px;width:46px;font-size:29px}.art-card{padding:17px}.art-math{font-size:30px}.art-options span{padding:9px}.section-heading{align-items:flex-start}.category-grid{grid-template-columns:1fr}.about{align-items:flex-start;flex-direction:column;padding:25px}.footer-content{flex-direction:column;justify-content:center;padding:24px 0;text-align:center}.hero-note{font-size:11px}}

.game-tile{display:flex;align-items:center;gap:20px;padding:25px;background:#f5f9ff;border:1px solid #dce9fa;border-radius:24px;max-width:650px;transition:.2s}.game-tile:hover{transform:translateY(-3px);box-shadow:0 12px 30px #155ed01c}.tile-icon{width:66px;height:66px;display:grid;place-items:center;border-radius:18px;background:#dff8ff;color:#155ed0;font-size:34px}.game-tile strong,.game-tile small{display:block}.game-tile strong{font-size:22px}.game-tile small{color:#64748b;margin-top:7px}.tile-arrow{margin-left:auto;background:#ffc83e;border-radius:12px;padding:12px 18px;font-weight:800;white-space:nowrap}@media(max-width:520px){.game-tile{flex-wrap:wrap}.tile-arrow{margin-left:0}}
/* Gra dostepna w kategorii Liczby */
.category-play{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 15px;margin-top:14px;border-radius:12px;background:#155ed0;color:white;text-decoration:none;font-size:14px;font-weight:800;transition:background .2s,transform .2s}
.category-play:hover{background:#0d4dad;transform:translateY(-1px)}
.category-play:focus-visible{outline:3px solid #ffb020;outline-offset:3px}

.games-section .container>.game-tile+.game-tile{margin-top:16px}.category-card.blue .category-play{margin-right:8px}

/* Jednolity licznik w prawym górnym rogu każdej kategorii */
.category-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.category-top .category-icon{margin-bottom:0;flex-shrink:0}
.category-top .category-count{display:inline-flex;align-items:center;justify-content:center;background:#eaf3ff;color:#155ed0;border-radius:999px;padding:9px 12px;white-space:nowrap;font-size:13px}
.category-games{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:17px}
.category-games .category-play{margin:0;max-width:100%;text-align:left}

/* Przegląd kategorii nad pełną listą ćwiczeń */
.category-games .category-play{display:block;background:#f0f6ff;color:#155ed0;padding:9px 12px;font-weight:700;border-radius:10px;text-align:left;width:100%;font-size:14px;min-height:auto;}
.category-games .category-play:hover{background:#deebff;transform:none;}
.category-card{height:100%;}
.games-section .game-tile{max-width:none;padding:17px 22px;border-radius:14px;margin-bottom:0;}
.games-section .game-tile strong{font-size:18px;}
.games-section .game-tile:hover{border-color:#155ed0;}

/* Hasło motywacyjne MatGraj */
.hero-copy .motivation-slogan{font-size:clamp(19px,2.5vw,26px);font-weight:800;line-height:1.35;color:#155ed0;margin:12px 0 16px;letter-spacing:-.02em}

/* Kategoria ułamków dziesiętnych */
.category-card.decimal-category{border-color:#c9e9e7;background:linear-gradient(150deg,#f5fffe,#fff 65%)}
.category-card.decimal-category .category-icon{display:grid;place-items:center;font-size:17px;font-weight:850;color:#087e85;background:#d7f7f2;border-radius:13px;width:44px;height:44px}
.category-card.decimal-category .category-play{background:#e9f9f7;color:#0d6972;border-color:#c9e9e7}