:root {
  --navy:#203249;--ink:#24334b;--muted:#6c7b90;--sky:#edf8ff;--cream:#fffefa;
  --violet:#7561df;--mint:#dff8e6;--pink:#ffe6ee;--blue:#ddf2ff;
  --shadow:0 20px 60px rgba(46,65,115,.11);--border:#e9edf7;
}
* {box-sizing:border-box}
html{font-family:"Arial","Noto Sans Hebrew",sans-serif;font-size:16px}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 82% 8%,#fef0fc 0%,transparent 29%),radial-gradient(circle at 6% 39%,#ddf3ff 0%,transparent 33%),linear-gradient(145deg,#f5faff,#fefdf8 82%);color:var(--ink)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid #6455c7;outline-offset:4px}
button:disabled{cursor:default;opacity:.8}
.hidden{display:none!important}.screen{display:none;animation:enter .35s ease}.screen.active{display:block}
@keyframes enter {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.75)}65%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes hover{50%{transform:translateY(-8px)}}
@keyframes wiggle{20%,60%{transform:rotate(-4deg)}40%,80%{transform:rotate(4deg)}}
.decor{position:fixed;color:#b7b1f1;pointer-events:none;opacity:.55;z-index:0}
.decor-a{font-size:68px;left:5%;top:17%}.decor-b{font-size:47px;right:5%;top:43%}.decor-c{font-size:47px;left:8%;bottom:12%}
.app{position:relative;z-index:1;max-width:840px;margin:0 auto;padding:0 17px 26px}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-icon{font-size:28px;display:grid;place-items:center;width:45px;height:45px;background:#fff;box-shadow:0 7px 23px #abc1d244;border-radius:14px}
.brand strong{font-size:17px;display:block;font-weight:900;letter-spacing:-.5px}
.brand-sub{font-size:11px;display:block;margin-top:5px;color:#8696a8;font-weight:600}
.icon-button{display:grid;place-items:center;width:45px;height:45px;background:white;border:1px solid #e6eaf7;border-radius:14px;font-size:21px;box-shadow:0 6px 18px #aab9cb22}
.welcome-card,.play-card,.final-card{background:#fff;border:1px solid #ebedf4;box-shadow:var(--shadow);border-radius:28px;overflow:hidden}
.welcome-card{text-align:center;padding:34px clamp(15px,5vw,45px) 35px}
.small-label{font-size:12px;font-weight:900;letter-spacing:.5px;color:#7865db;background:#f0ebff;display:inline-block;padding:9px 16px;border-radius:99px}
h1{font-size:clamp(31px,6.5vw,49px);letter-spacing:-1.8px;line-height:1.2;margin:20px 0 12px;font-weight:950}
h1 em{font-style:normal;color:#7665df}
.welcome-copy{font-size:16px;line-height:1.8;max-width:545px;color:#61728a;margin:0 auto}
.hero-scene{height:158px;max-width:470px;margin:6px auto 5px;position:relative;display:flex;align-items:center;justify-content:center}
.rainbow{font-size:115px;line-height:1;filter:drop-shadow(0 14px 7px #d7bce733);animation:hover 5s ease-in-out infinite}
.scene-cloud{position:absolute;font-size:39px;opacity:.85}.c1{left:6%;top:45px}.c2{right:4%;top:20px}
.floor-stars{position:absolute;bottom:0;left:0;right:0;font-size:25px;letter-spacing:15px}
.players{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:580px;margin:20px auto 16px}
.player-card{border-radius:19px;padding:20px 10px 19px;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;min-width:0;border:2px solid transparent}
.player-card.ron{background:#fff2f6;border-color:#ffdfeb}
.player-card.ilai{background:#eaf3ff;border-color:#d5e8ff}
.avatar-wrap{width:85px;height:85px;border-radius:50%;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 3px #fff8,0 6px 18px #3146651c}
.avatar-wrap img{width:100%;height:100%;object-fit:cover}
.ron .avatar-wrap,.avatar-wrap.ron{background:linear-gradient(135deg,#ffe2ba,#f5aecb)}
.ilai .avatar-wrap,.avatar-wrap.ilai{background:linear-gradient(135deg,#c7e4ff,#9fbef7)}
.avatar-emoji{font-size:51px;line-height:1}
.player-name{font-weight:950;font-size:23px;letter-spacing:-.5px}
.player-card small{font-weight:700;color:#667a8e;font-size:12px;line-height:1.55}
.intro-features{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:#64758c;font-weight:700;font-size:12px;margin:16px 0 25px}
.primary-button{display:block;width:100%;max-width:430px;margin:0 auto;background:linear-gradient(125deg,#6853da,#9b7df1);color:#fff;border:0;border-radius:18px;min-height:64px;padding:15px 17px;font-size:21px;font-weight:950;box-shadow:0 12px 26px #735ee247;transition:transform .15s,box-shadow .15s}
.primary-button:active{transform:scale(.975);box-shadow:0 5px 16px #735ee233}
.text-button,.quit-link{display:block;background:none;border:0;color:#8370ca;font-weight:800;font-size:13px;margin:14px auto 0;padding:10px}
.journey-header{background:#fff;padding:20px 22px 23px;border:1px solid #e8edf6;border-radius:25px;margin-bottom:16px;box-shadow:0 9px 20px #8998b014}
.journey-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:900;color:#5c6c89;font-size:14px}
.star-pill{display:inline-flex;align-items:center;background:#fff3ce;color:#876318;border-radius:99px;padding:8px 14px;font-size:14px}
.map-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;position:relative;margin-top:15px}
.map-node{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;padding:9px 2px;border-radius:13px;color:#91a0b2;min-width:0;border:2px solid transparent;background:#f5f7fa;transition:all .2s}
.map-node span{font-size:25px;filter:grayscale(1);opacity:.5}
.map-node small{font-size:10px;font-weight:900;line-height:1.3;text-align:center}
.map-node.current{background:#ede9ff;border-color:#ac9df6;color:#6b55cf}
.map-node.current span{filter:none;opacity:1;animation:pop .5s}
.map-node.passed{background:#e5f9ed;border-color:#bceacf;color:#318764}
.map-node.passed span{filter:none;opacity:1}
.play-card{min-height:460px}
.phase-panel{padding:32px clamp(17px,4vw,42px);text-align:center;min-height:460px}
.handoff-icon{font-size:31px;display:block;margin:2px auto 8px}
.your-turn{font-size:15px;color:#8692a8;font-weight:800}
.player-spotlight{display:grid;place-items:center;width:125px;height:125px;background:#fff1f6;border:7px solid #ffdfea;border-radius:50%;margin:21px auto 11px;box-shadow:0 15px 30px #d08fac20}
.player-spotlight.ilai{background:#e7f2ff;border-color:#d2e6ff}
.player-spotlight .avatar-emoji{font-size:73px}
.player-spotlight img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#handoff-panel h2,#success-panel h2{font-size:clamp(26px,6vw,34px);letter-spacing:-.7px;margin:15px 0 7px}
.phase-explainer{color:#6d7d92;font-size:15px;line-height:1.75;max-width:410px;margin:7px auto 23px}
.cooperative-note{font-weight:700;font-size:13px;color:#88764b;margin-top:20px}
.question-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.question-person{display:flex;gap:10px;align-items:center;text-align:right}
.question-person small{font-size:11px;color:#8291a5;font-weight:700;display:block}
.question-person strong{font-size:18px;font-weight:950;display:block}
.mini-avatar{display:grid;place-items:center;border-radius:50%;width:48px;height:48px;background:#fff0f6;font-size:32px;overflow:hidden}
.mini-avatar.ilai{background:#e8f1ff}
.mini-avatar img{width:100%;height:100%;object-fit:cover}
.round-chip{font-size:12px;font-weight:900;background:#f1f2ff;color:#7665cf;padding:9px 12px;border-radius:99px;white-space:nowrap}
.question-kind{display:inline-block;font-size:13px;font-weight:950;color:#667bc2;background:#edf4ff;border-radius:99px;padding:9px 14px;margin-top:24px}
.question-title{font-size:clamp(23px,5.2vw,31px);font-weight:950;line-height:1.35;letter-spacing:-.6px;margin:15px auto 9px;max-width:580px}
.question-illustration{min-height:80px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:47px;letter-spacing:5px;direction:ltr;line-height:1.35;color:#50627b;font-weight:950}
.question-illustration.equation{font-size:50px;letter-spacing:1px;color:#5a5daa}
.question-illustration.small-symbols{font-size:37px}
.speak-button{background:#fff;border:1px solid #dce0f0;color:#755dcc;box-shadow:0 4px 9px #8c80b316;border-radius:99px;padding:9px 15px;font-size:14px;font-weight:850;margin:9px auto 18px;display:inline-flex;align-items:center;gap:7px}
.answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-width:540px;margin:4px auto 0;direction:rtl}
.answer{border:2px solid #e1e7f4;background:#fbfcff;min-height:112px;border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 7px 0 #edf0f8,0 10px 15px #8593a512;transition:transform .12s,border .12s,background .12s;padding:8px 3px}
.answer:active{transform:translateY(5px);box-shadow:0 2px 0 #edf0f8}
.answer:hover{border-color:#c5baf4;background:#f9f7ff}
.answer.correct{background:#e3faed;border-color:#50c789;box-shadow:0 4px 0 #bcebd3}
.answer.wrong{background:#fff1f3;border-color:#efadb9;animation:wiggle .25s}
.answer .symbol{font-size:45px;line-height:1.13;white-space:nowrap}
.answer .symbol.xlarge{font-size:68px}
.answer .symbol.tiny{font-size:25px}
.answer .symbol.medium{font-size:42px}
.answer .choice-title{font-size:16px;font-weight:900;line-height:1.1;color:#465572}
.choice-color{width:61px;height:61px;border-radius:50%;display:inline-block;box-shadow:inset -10px -12px 0 #00000012,inset 5px 5px 0 #ffffff50,0 5px 14px #2423412b}
.choice-color.yellow{background:#ffc93c}.choice-color.red{background:#f77d91}.choice-color.blue{background:#6daffa}.choice-color.green{background:#5bd7ad}.choice-color.purple{background:#ab8bf8}
.answer-feedback{min-height:30px;font-size:16px;font-weight:950;margin-top:16px;color:#cf647b}
.answer-feedback.good{color:#20865f}
.answer-help{margin:8px 0 0;color:#92a0b1;font-size:12px;font-weight:700}
.success-icon{font-size:89px;line-height:1;margin:3px 0 13px;display:block;animation:pop .6s,hover 3.6s ease-in-out infinite}
#success-panel .small-label{background:#fff5d5;color:#a37727}
.big-stars{font-size:26px;letter-spacing:3px;margin:8px auto 28px;word-break:break-word}
#success-panel .primary-button{background:linear-gradient(120deg,#12986a,#50c394);box-shadow:0 12px 24px #58bb9660}
.final-card{text-align:center;padding:36px 20px 34px}
.final-illustration{font-size:76px;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:15px;margin:0 auto 16px}
.final-illustration span{font-size:35px}
.final-card h1{font-size:clamp(29px,5vw,44px)}
.final-card>p{color:#6e7c91;line-height:1.8;font-size:16px;max-width:455px;margin:10px auto 19px}
.final-avatars{display:flex;justify-content:center;align-items:center;gap:12px;margin:17px auto}
.final-avatars .avatar-wrap{width:78px;height:78px}
.heart{font-size:27px}
.grand-score{display:flex;flex-direction:column;align-items:center;gap:0;background:#fff8dc;border:2px dashed #ffdf79;border-radius:20px;padding:14px;margin:0 auto 17px;max-width:280px}
.grand-score strong{font-size:50px;line-height:1;color:#bd8c1c}
.grand-score span{font-size:16px;font-weight:950;color:#9b772e;margin-top:5px}
.certificate{color:#755dcc;background:#f2efff;border-radius:13px;padding:12px 10px;font-size:14px;font-weight:950;max-width:420px;margin:0 auto 23px}
footer{text-align:center;color:#8493a7;font-size:12px;font-weight:650;margin:23px auto}
@media(max-width:540px){
  .app{padding:0 10px 15px}
  .topbar{height:68px;padding:0 5px}
  .brand strong{font-size:14px}.brand-sub{font-size:10px}
  .brand-icon{width:39px;height:39px;font-size:24px}
  .welcome-card,.play-card,.final-card{border-radius:22px}
  .welcome-card{padding:27px 16px 28px}
  .welcome-copy{font-size:14px}
  .hero-scene{height:129px}.rainbow{font-size:94px}
  .scene-cloud{font-size:25px}.floor-stars{font-size:20px}
  .players{gap:9px;margin-top:15px}
  .player-card{padding:13px 5px}
  .avatar-wrap{width:69px;height:69px}.avatar-emoji{font-size:44px}
  .player-name{font-size:19px}.player-card small{font-size:11px}
  .intro-features{gap:10px;font-size:11px;margin-bottom:20px}
  .primary-button{min-height:58px;font-size:19px}
  .journey-header{padding:14px 9px 13px;border-radius:20px;margin-bottom:12px}
  .journey-top{padding:0 8px;font-size:12px}
  .map-track{gap:4px;margin-top:10px}
  .map-node{border-radius:9px;gap:4px;padding:9px 1px;border-width:1.5px}
  .map-node span{font-size:21px}.map-node small{font-size:8px}
  .phase-panel{padding:26px 13px;min-height:430px}
  .question-title{font-size:24px;margin-top:13px}
  .question-illustration{min-height:75px;font-size:40px;letter-spacing:3px}
  .question-illustration.equation{font-size:43px}
  .question-illustration.small-symbols{font-size:32px}
  .answer-grid{gap:8px}
  .answer{min-height:95px;border-radius:15px;box-shadow:0 5px 0 #edf0f8;padding:8px 2px}
  .answer .symbol{font-size:38px}
  .answer .symbol.xlarge{font-size:58px}
  .answer .symbol.tiny{font-size:24px}
  .answer .symbol.medium{font-size:37px}
  .answer .choice-title{font-size:13px}
  .choice-color{width:51px;height:51px}
  .question-kind{margin-top:14px}
}
@media(max-width:360px){.map-node small{font-size:7px}.answer .symbol{font-size:34px}.player-card small{font-size:10px}.brand strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* חגיגת זכייה שקטה: אנימציית כפיים במקום סאונד של כפיים */
.celebration-stage{
  position:relative;isolation:isolate;display:flex;justify-content:center;
  align-items:center;gap:24px;max-width:425px;height:178px;margin:0 auto 12px;
  background:radial-gradient(ellipse at 50% 53%,#fff8d4 0%,#f4f2ff 45%,transparent 76%);
}
.celebration-stage::before{
  content:"";position:absolute;inset:5px 35px;border:3px dashed #e8d4ff;
  border-radius:50%;opacity:.57;animation:celebrate-halo 6s linear infinite;z-index:-1;
}
.celebration-photo{
  width:125px;height:125px;flex:none;display:grid;place-items:center;
  border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#fff8cd,#dcbcff);
  border:7px solid white;box-shadow:0 12px 25px #8e6cc344,0 0 0 4px #d7c6ff;
  animation:celebrate-pop .65s cubic-bezier(.2,1.35,.4,1) both;
}
.celebration-photo .avatar-emoji{font-size:76px}
.celebration-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.clap-hand{
  font-size:67px;line-height:1;display:inline-block;
  filter:drop-shadow(0 8px 7px #bba4ac30);z-index:2;
  transform-origin:50% 87%;user-select:none;
}
.clap-left{animation:clap-left 1.15s ease-in-out infinite}
.clap-right{animation:clap-right 1.15s ease-in-out infinite .13s}
.celebrate-spark{
  position:absolute;font-size:25px;z-index:3;pointer-events:none;
  animation:twinkle 1.6s ease-in-out infinite;
}
.spark-one{top:10px;right:14%;animation-delay:0s}
.spark-two{top:20px;left:14%;animation-delay:.36s}
.spark-three{bottom:8px;right:19%;animation-delay:.82s}
.spark-four{bottom:17px;left:15%;animation-delay:1.14s}
#success-panel .small-label{margin-top:3px}
#success-panel h2{margin-top:14px}
.final-avatars .avatar-wrap img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes clap-left{
  0%,100%{transform:translateY(5px) rotate(-22deg) scale(.95)}
  24%,60%{transform:translateY(-12px) rotate(13deg) scale(1.1)}
  42%,78%{transform:translateY(2px) rotate(-12deg) scale(1)}
}
@keyframes clap-right{
  0%,100%{transform:translateY(5px) rotate(22deg) scale(.95)}
  24%,60%{transform:translateY(-12px) rotate(-13deg) scale(1.1)}
  42%,78%{transform:translateY(2px) rotate(12deg) scale(1)}
}
@keyframes celebrate-pop{
  0%{opacity:0;transform:scale(.55) rotate(-10deg)}
  75%{opacity:1;transform:scale(1.09) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes twinkle{
  0%,100%{opacity:.38;transform:translateY(3px) scale(.78) rotate(-14deg)}
  50%{opacity:1;transform:translateY(-11px) scale(1.24) rotate(14deg)}
}
@keyframes celebrate-halo{to{transform:rotate(360deg)}}
@media(max-width:400px){
  .celebration-stage{gap:9px;height:153px}
  .celebration-photo{width:105px;height:105px}
  .clap-hand{font-size:51px}
  .celebrate-spark{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .celebration-stage::before,.clap-hand,.celebrate-spark,.celebration-photo{animation:none!important}
}


/* 2026-11-01: Three photo-based emotions per child, all portraits on pure white */
body{background:#fff}
.decor{opacity:.23}
.welcome-card,.play-card,.final-card,.journey-header{background:#fff}
.player-card.ron,.player-card.ilai{background:#fff}
.player-card .avatar-wrap{
  width:140px;height:95px;border-radius:17px;background:#fff!important;
  box-shadow:0 4px 14px rgba(30,50,80,.075);
}
.player-card .avatar-wrap img,.player-spotlight img,.mini-avatar img{
  display:block;width:100%;height:100%;object-fit:contain;
}
.player-spotlight,.player-spotlight.ilai{
  width:210px;height:140px;border-radius:20px;
  background:#fff;border:2px solid #e4defa;
  box-shadow:0 8px 25px #564c911b;
}
.player-spotlight img{border-radius:16px}
.question-mood-photo{
  width:min(235px,100%);height:157px;margin:8px auto 3px;
  background:#fff;border:1px solid #f0f0f4;border-radius:18px;
  box-shadow:0 5px 20px #343a4e0c;display:grid;place-items:center;
  overflow:hidden;transition:box-shadow .18s,border-color .18s;
}
.question-mood-photo img{width:100%;height:100%;object-fit:contain;display:block}
.question-mood-photo[data-mood="happy"]{border-color:#c9e8d8;box-shadow:0 5px 20px #47bd8a15}
.question-mood-photo[data-mood="sad"]{border-color:#f2dfe3;box-shadow:0 5px 20px #e8839110}
.mini-avatar{width:62px;height:47px;border-radius:11px;background:#fff!important;border:1px solid #eef0f5}
.celebration-stage{background:#fff;height:190px;gap:8px}
.celebration-stage::before{border-color:#e9dbff}
.celebration-photo{
  background:#fff;width:222px;height:150px;border:3px solid #fff;
  border-radius:18px;box-shadow:0 10px 30px #7c6fa721,0 0 0 3px #e7dcff;
}
.celebration-photo img{width:100%;height:100%;object-fit:contain;border-radius:15px}
.clap-hand{font-size:47px}
.final-avatars .avatar-wrap{
  width:153px;height:105px;background:#fff!important;
  border:1px solid #e9edf6;border-radius:16px;
}
.final-avatars .avatar-wrap img{width:100%;height:100%;object-fit:contain}
@media(max-width:540px){
  .player-card .avatar-wrap{width:137px;max-width:100%;height:91px}
}
@media(max-width:400px){
  .player-card .avatar-wrap{width:124px;height:83px}
  .celebration-stage{height:162px;gap:5px}
  .celebration-photo{width:190px;height:127px}
  .clap-hand{font-size:40px}
  .question-mood-photo{width:min(225px,100%);height:150px}
  .final-avatars .avatar-wrap{width:132px;height:90px}
}
@media(max-width:345px){
  .celebration-photo{width:175px;height:118px}
  .clap-hand{font-size:34px}
  .player-card .avatar-wrap{width:115px;height:77px}
  .final-avatars .avatar-wrap{width:122px;height:83px}
}