@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#23213c;--muted:#777995;--violet:#6d54e9;--soft:#f7f7ff;--shadow:0 16px 45px rgba(55,51,109,.085);--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:500 16px/1.5 'Heebo','Arial',sans-serif;min-height:100vh}
button,a{-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button:focus-visible,a:focus-visible{outline:3px solid #7765f3;outline-offset:3px}
.hidden,[hidden]{display:none!important}
.site-shell{max-width:1000px;margin:auto;padding:20px 24px 40px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 26px}
.site-brand{display:flex;align-items:center;gap:10px}
.brand-blob{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#f2edff;font-size:27px}
.site-brand b{display:block;font-size:20px;font-weight:900;letter-spacing:-.5px}
.site-brand small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:-4px}
.header-pill{border:1px solid #ede9ff;background:#f8f6ff;color:#795add;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.home-hero{position:relative;min-height:315px;border-radius:32px;background:linear-gradient(112deg,#f2edff 0%,#faf6ff 53%,#fff3ed 100%);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding:32px 42px;isolation:isolate;border:1px solid #f4efff}
.hero-glow{position:absolute;border-radius:100%;z-index:-1}
.glow-one{width:245px;height:245px;left:-60px;top:-80px;background:#e9d9ff88;filter:blur(25px)}
.glow-two{width:210px;height:210px;right:-50px;bottom:-110px;background:#ffe4b288;filter:blur(23px)}
.eyebrow{display:inline-block;font-weight:900;font-size:12px;letter-spacing:.15px;color:#855ddd;background:#fffafded;border:1px solid #f3eaff;border-radius:999px;padding:7px 13px;margin-bottom:13px}
.hero-copy h1{font-size:clamp(30px,4.6vw,49px);letter-spacing:-1.7px;line-height:1.18;font-weight:900;margin:0 0 11px}
.hero-copy h1 span{color:#7c5ae6}
.hero-copy p{font-size:15px;color:#77728f;font-weight:600;max-width:400px;margin:0 0 18px}
.hero-traits{display:flex;gap:8px;flex-wrap:wrap}
.hero-traits span{display:inline-flex;background:#fff9;color:#665f82;border:1px solid #fff;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800}
.hero-people{height:260px;position:relative;display:flex;justify-content:center;align-items:center;direction:ltr;gap:0}
.hero-person{width:50%;max-width:160px;min-width:117px;position:relative;transform:rotate(-5deg);background:#fff;box-shadow:0 17px 40px #7956bc22;border:6px solid #fff;border-radius:23px;overflow:visible;padding:4px 4px 0;text-align:center}
.hero-person img{display:block;aspect-ratio:1.08;object-fit:contain;width:100%;background:white;border-radius:15px}
.hero-person b{font-size:14px;display:block;color:#6650b4;margin:4px 0 5px}
.hero-ranael{transform:rotate(7deg);margin-left:-14px;margin-top:27px;z-index:1}
.hero-ilai{margin-top:-15px}
.person-star{position:absolute;top:-21px;left:-14px;color:#ffbc4a;font-size:30px;text-shadow:0 5px 10px #f2b65177}
.floating-shape{position:absolute;font-size:26px;pointer-events:none;animation:float 3s ease-in-out infinite}
.shape-a{top:0;right:9%}.shape-b{bottom:7px;left:5%;animation-delay:1s}
@keyframes float{50%{transform:translateY(-11px) rotate(10deg)}}
.games-section{padding:38px 4px 18px}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.kicker{color:#8d80b3;font-size:12px;font-weight:900}
.section-heading h2{margin:4px 0 0;font-size:30px;letter-spacing:-.8px;line-height:1.25;font-weight:900}
.games-count{font-size:12px;color:#7760cb;font-weight:800;background:#f5f1ff;border-radius:12px;padding:7px 10px;white-space:nowrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filter-chip{border:1px solid #eaebf5;border-radius:999px;background:#fff;color:#73718a;padding:10px 17px;font-weight:800;font-size:13px;min-height:43px;transition:transform .15s,background .15s}
.filter-chip.selected{background:#6853d9;color:#fff;border-color:#6853d9;box-shadow:0 7px 15px #6853d933}
.filter-chip:active{transform:scale(.97)}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game-card{display:block;background:#fff;border:1px solid #efeff6;border-radius:24px;overflow:hidden;box-shadow:0 7px 27px #38316e0a;transition:transform .2s,box-shadow .2s}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-art{height:174px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;isolation:isolate}
.art-learning{background:linear-gradient(135deg,#e8ddff,#f6eeff)}
.art-memory{background:linear-gradient(135deg,#d4f9ed,#edfff7)}
.art-ttt{background:linear-gradient(135deg,#ffe9d9,#fff4e9)}
.art-runner{background:linear-gradient(180deg,#dbf4ff,#e5fce6)}
.art-spark{position:absolute;top:14px;right:16px;color:#fff;font-size:26px}
.puzzle-main{font-size:91px;filter:drop-shadow(0 10px 9px #6a53ab22);animation:float 4s ease-in-out infinite}
.puzzle-bubble{position:absolute;width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:#fff8;font-size:32px;transform:rotate(-13deg);box-shadow:0 7px 21px #6e4bb514}
.puzzle-bubble.b1{top:30px;right:18%}.puzzle-bubble.b2{bottom:25px;left:17%;transform:rotate(13deg)}
.memory-tile{display:grid;place-items:center;background:#fff;border-radius:16px;font-size:49px;width:88px;height:106px;box-shadow:0 12px 20px #207f6840;border:3px solid #fff}
.memory-tile.front{transform:rotate(-13deg);z-index:1}
.memory-tile.back{background:#61cdb0;color:#fff;font-size:65px;font-weight:900;transform:rotate(7deg);margin:0 -16px}
.memory-tile.second{transform:rotate(16deg);z-index:2}
.mini-ttt{display:grid;grid-template-columns:repeat(3,47px);grid-template-rows:repeat(3,47px);gap:5px;transform:rotate(-7deg);filter:drop-shadow(0 7px 12px #de835b30)}
.mini-ttt i{background:#fff;border-radius:9px;display:grid;place-items:center;font:900 36px/1 Arial;color:#ff9466;font-style:normal}
.mini-ttt i:nth-child(2n){color:#8d71ea}
.running-cloud{position:absolute;font-size:46px;top:9px;left:16%;color:#fff}
.runner-hill{position:absolute;background:#75d69b;width:160%;height:60px;bottom:-28px;left:-20%;border-radius:50% 50% 0 0;z-index:-1}
.runner-character{font-size:97px;transform:scaleX(-1);z-index:2;filter:drop-shadow(0 10px 8px #1b4f5020);animation:runhop .5s ease-in-out infinite alternate}
.runner-coin{font-size:57px;position:absolute;right:21%;top:25px;animation:float 2s ease-in-out infinite}
@keyframes runhop{to{transform:scaleX(-1) translateY(-7px)}}
.card-information{padding:18px 22px 19px}
.genre-label{font-size:12px;font-weight:900;color:#8366d7}
.card-memory .genre-label{color:#249a76}.card-ttt .genre-label{color:#d88455}.card-runner .genre-label{color:#39a27e}
.card-information h3{font-size:25px;letter-spacing:-.5px;font-weight:900;margin:5px 0 5px}
.card-information p{font-size:14px;color:var(--muted);font-weight:600;margin:0;min-height:44px}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px;color:#8a86a2;font-size:12px;font-weight:800}
.play-circle{width:42px;height:42px;border-radius:15px;background:#f2edff;display:grid;place-items:center;color:#7459d5;font-size:22px}
.card-memory .play-circle{background:#defaf0;color:#209876}.card-ttt .play-circle{background:#fff1e8;color:#d68452}.card-runner .play-circle{background:#e2f7eb;color:#188d63}
.together-strip{margin-top:30px;display:flex;align-items:center;gap:16px;border-radius:23px;background:#faf7ff;border:1px solid #eee9fb;padding:18px 22px}
.strip-icon{font-size:36px}.together-strip strong{font-size:17px;font-weight:900}
.together-strip p{color:var(--muted);font-size:12px;margin:1px 0 0;font-weight:600}
.strip-stars{margin-right:auto;color:#e4a744;font-size:22px}
.site-footer{text-align:center;color:#9896aa;padding:26px 0 5px;font-size:12px;font-weight:700}
.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:900;padding:10px 13px;border-radius:13px;color:#6554b9;background:#f5f1ff}
.game-tag{font-size:12px;font-weight:900;color:#9990ad}
.game-layout{max-width:720px;margin:auto}
.game-title-row{text-align:center;margin:18px auto 20px}
.game-title-row h1{font-size:clamp(27px,6vw,40px);font-weight:900;letter-spacing:-.9px;margin:0}
.game-title-row p{color:var(--muted);font-size:14px;margin:4px 0}
.game-panel{border:1px solid #eeedf6;border-radius:27px;background:#fff;box-shadow:0 11px 38px #4440790b;padding:23px}
.game-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:0 0 18px}
.small-button{border:1px solid #eae6f9;background:#f9f7ff;color:#6958bc;padding:10px 14px;border-radius:13px;font-weight:900;font-size:13px;min-height:42px}
.small-button.selected{background:#6d53df;color:#fff;border-color:#6d53df}
.player-status{display:flex;gap:10px;margin:0 auto 17px}
.player-score{flex:1;display:flex;align-items:center;gap:9px;border:2px solid #f0edf7;border-radius:17px;padding:8px;background:#fff;min-width:0;transition:border-color .2s,background .2s}
.player-score.active{border-color:#9c85f0;background:#f8f6ff;box-shadow:0 4px 14px #9c85f012}
.player-score img{width:47px;height:47px;object-fit:contain;border-radius:11px;background:#fff}
.player-score .score-info{min-width:0;display:flex;flex-direction:column}
.score-info strong{font-size:15px;font-weight:900;white-space:nowrap}
.score-info span{font-size:11px;color:#8e899e;font-weight:800;white-space:nowrap}
.player-score .score-num{margin-right:auto;color:#7656db;font-weight:900;font-size:24px}
.announce{text-align:center;min-height:49px;display:grid;place-items:center;border-radius:15px;background:#f7f4ff;color:#6554b1;font-size:17px;font-weight:900;padding:9px 12px;margin-bottom:16px}
.announce.green{background:#edfff7;color:#12865e}.announce.orange{background:#fff4e8;color:#bd7340}
.big-action{width:100%;min-height:58px;display:grid;place-items:center;border:0;border-radius:17px;color:#fff;background:linear-gradient(135deg,#7455ef,#9f70fa);box-shadow:0 10px 24px #8466e638;font-size:19px;font-weight:900;margin-top:17px}
.big-action:active{transform:translateY(2px)}
.results-panel{display:grid;gap:12px;justify-items:center;text-align:center;background:linear-gradient(120deg,#f2efff,#fff);border:1px solid #e8e2ff;border-radius:19px;padding:18px;margin-top:15px}
.results-panel h2{font-size:25px;letter-spacing:-.4px;margin:0}
.results-panel p{color:#76718c;margin:0}
.result-photos{display:flex;gap:5px;justify-content:center;align-items:center}
.result-photos img{width:104px;height:85px;object-fit:contain;background:#fff;border-radius:15px}
.result-photos span{font-size:23px}
.memory-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:500px;margin:0 auto}
.memory-card{aspect-ratio:.92;min-height:70px;border:0;border-radius:16px;background:linear-gradient(145deg,#8d75f5,#6b54d8);position:relative;display:grid;place-items:center;box-shadow:0 7px 0 #5b42c0,0 13px 16px #6650b329;transition:transform .16s,background .22s;transform-style:preserve-3d;user-select:none}
.memory-card::before{content:'✦';font-size:33px;color:#c4b6ff;transition:opacity .15s}
.memory-card .symbol{display:none;font-size:clamp(31px,6vw,53px);line-height:1}
.memory-card.flipped,.memory-card.matched{background:#fff;border:2px solid #e9e5f8;box-shadow:0 4px 12px #584e9613;transform:translateY(3px)}
.memory-card.flipped::before,.memory-card.matched::before{display:none}
.memory-card.flipped .symbol,.memory-card.matched .symbol{display:block}
.memory-card.matched{background:#eafff4;border-color:#b8e9d3}
.memory-card:disabled{cursor:default}
.progress-label{text-align:center;font-size:12px;font-weight:800;color:#918ba6;margin-top:15px}
.tic-grid{max-width:410px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tic-cell{width:100%;aspect-ratio:1;background:#f8f8ff;border:2px solid #efebf9;border-radius:22px;display:grid;place-items:center;color:#7657e0;font:bold clamp(50px,15vw,88px)/1 Arial,sans-serif;box-shadow:0 6px 12px #4b43900b}
.tic-cell.mark-x{color:#ef8b79}.tic-cell.mark-o{color:#7159e9}
.tic-cell.winning{background:#eafff4;border-color:#7cddb4;animation:winpop .5s ease-in-out}
@keyframes winpop{50%{transform:scale(1.065)}}
.tic-cell:disabled{cursor:default}
.tic-legend{display:flex;justify-content:center;gap:14px;margin:2px 0 12px;color:#8a83a6;font-size:13px;font-weight:800}
.legend-x{color:#ee8c7a;font-weight:900}.legend-o{color:#745ee8;font-weight:900}
.runner-panel{padding:12px}
.runner-hud{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:4px 7px 11px}
.runner-hud div{display:flex;align-items:center;gap:4px;font-weight:900;font-size:15px}
.runner-hud span{font-size:12px;color:#7b78a0}
.runner-canvas-wrap{width:100%;max-width:510px;margin:auto;border-radius:21px;overflow:hidden;position:relative;touch-action:manipulation;background:#e6f9ff}
#runner-canvas{display:block;width:100%;height:auto;aspect-ratio:360/395;touch-action:manipulation}
.runner-overlay{position:absolute;inset:0;background:#ffffffd9;backdrop-filter:blur(4px);display:grid;place-content:center;justify-items:center;gap:9px;text-align:center;padding:16px}
.runner-overlay h2{font-size:24px;line-height:1.25;margin:2px 0;color:#393653}
.runner-overlay p{font-size:14px;max-width:275px;color:#776f92;font-weight:700;margin:0}
.runner-overlay img{width:126px;height:84px;object-fit:contain;border-radius:16px;background:#fff;border:2px solid #fff}
.runner-overlay .big-action{width:min(260px,100%);margin-top:8px}
.runner-overlay .result-photos img{width:96px;height:75px}
.runner-bottom{display:flex;align-items:center;justify-content:space-between;gap:11px;margin:12px auto 2px;max-width:510px}
.jump-button{border:0;min-height:68px;flex:1;border-radius:18px;background:linear-gradient(120deg,#ffae55,#ff7f61);box-shadow:0 8px 0 #df674b;color:#fff;font-size:22px;font-weight:900;touch-action:manipulation}
.jump-button:active{transform:translateY(4px);box-shadow:0 4px 0 #df674b}
.jump-button:disabled{opacity:.48;box-shadow:none}
.pause-button{border:1px solid #e5e1f3;background:#faf8ff;border-radius:17px;padding:12px 14px;color:#7355c5;font-size:15px;font-weight:900;min-height:65px}
.runner-tip{text-align:center;font-size:12px;color:#777c92;font-weight:700;margin:14px 0 2px}
.toast{padding:12px;border-radius:14px;font-size:14px;font-weight:800}
@media(max-width:720px){
 .site-shell{padding:15px 17px 28px}
 .home-hero{padding:25px 22px;grid-template-columns:1fr;min-height:0}
 .hero-copy h1{font-size:35px}
 .hero-people{height:185px;justify-content:center;margin-top:16px}
 .hero-person{width:145px;min-width:0}
 .hero-ranael{margin-left:-12px}
 .games-section{padding-top:28px}
 .section-heading h2{font-size:26px}
 .card-art{height:155px}
 .game-grid{gap:11px}
 .card-information{padding:14px}
 .card-information h3{font-size:21px}
 .card-information p{font-size:12px;min-height:56px}
 .game-panel{padding:15px}
}
@media(max-width:440px){
 .site-header{margin-bottom:16px}
 .site-brand b{font-size:18px}
 .home-hero{border-radius:25px;padding:24px 18px}
 .hero-copy h1{font-size:31px}
 .hero-copy p{font-size:13px}
 .hero-traits span{font-size:10px;padding:6px 8px}
 .hero-people{height:163px}
 .hero-person{width:125px}
 .hero-people .hero-person img{aspect-ratio:1.18}
 .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-left:-7px}
 .filter-chip{white-space:nowrap;padding:9px 13px;font-size:12px;min-height:39px}
 .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .card-art{height:120px}
 .puzzle-main{font-size:65px}
 .puzzle-bubble{width:42px;height:42px;font-size:22px}
 .memory-tile{width:52px;height:72px;font-size:32px;border-radius:10px}
 .mini-ttt{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);gap:4px}
 .mini-ttt i{font-size:27px;border-radius:7px}
 .runner-character{font-size:74px}
 .runner-coin{font-size:41px}
 .card-information{padding:11px 11px 13px}
 .genre-label{font-size:10px}
 .card-information h3{font-size:18px}
 .card-information p{font-size:11px;line-height:1.48;min-height:67px}
 .card-bottom{font-size:10px;margin-top:10px}
 .play-circle{width:32px;height:32px;border-radius:11px;font-size:17px}
 .together-strip{padding:14px}
 .game-title-row{margin:15px 0}
 .game-title-row h1{font-size:29px}
 .player-score{gap:4px;padding:6px}
 .player-score img{width:40px;height:43px}
 .score-info strong{font-size:13px}
 .score-info span{font-size:10px}
 .player-score .score-num{font-size:19px}
 .memory-board{gap:7px}
 .memory-card{min-height:65px;border-radius:12px;box-shadow:0 5px 0 #5b42c0}
 .tic-grid{gap:8px}
 .tic-cell{border-radius:17px}
 .game-panel.runner-panel{padding:9px}
 .runner-hud div{font-size:12px}
 .runner-hud span{font-size:11px}
 .runner-bottom{gap:6px}
 .jump-button{font-size:19px}
}
@media(max-width:345px){.card-information h3{font-size:16px}.card-information p{font-size:10px}.hero-traits span{padding:5px 6px;font-size:9px}.brand-blob{width:41px;height:41px}.site-brand b{font-size:16px}.header-pill{font-size:11px}.game-panel{padding:10px}.player-score img{width:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* הצגת כל הקטגוריות בשתי שורות בטלפון, ללא צורך בגלילה הצידה */
@media(max-width:440px){.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin-left:0}.filter-chip{width:100%;white-space:nowrap;text-align:center}}