@font-face{font-family:"Rubik";src:url(fonts/rubik-hebrew.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";src:url(fonts/rubik-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--pitch:#1f8a44;--pitch2:#17703a;--dark:#0d3b20;--gold:#ffcc29;--orange:#ff7a1a;--blue:#2d7ff9;--red:#e8453c;--white:#fff;--ink:#12261a;--card:#ffffff;--soft:#eaf7ee;--r:22px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 80px,rgba(0,0,0,.035) 80px 160px),
  radial-gradient(ellipse at 50% -10%,#3fb466 0%,var(--pitch) 45%,var(--pitch2) 100%);background-attachment:fixed;background-color:#17703a;min-height:100%}
html,body{margin:0;min-height:100%}
body{font-family:"Rubik","Assistant","Arial Hebrew",Arial,sans-serif;color:var(--ink);direction:rtl;min-height:100%;font-size:20px;line-height:1.5}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}
#app{max-width:1180px;margin:0 auto;padding:10px 16px 24px}
.topbar{display:flex;align-items:center;gap:12px;color:#fff;padding:4px 2px 10px}
.brand{margin:0;font-weight:900;font-size:30px;line-height:inherit;letter-spacing:.5px;text-shadow:0 3px 0 rgba(0,0,0,.25);flex:1}
.brand span{display:inline-block;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
.top-stats{display:flex;gap:8px;align-items:center}
.pill{background:rgba(0,0,0,.28);border-radius:999px;padding:6px 14px;font-size:20px;white-space:nowrap}
.icon-btn{background:rgba(0,0,0,.28);color:#fff;border:0;border-radius:14px;font-size:24px;min-width:48px;height:48px}
.icon-btn:active{transform:scale(.94)}
/* home */
.hero{display:grid;grid-template-columns:1fr;gap:12px}
.player-card{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#ffffff,#f1fff5);border-radius:var(--r);padding:14px 18px;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.avatar{width:120px;height:120px;flex:none}
.avatar svg,.preview svg{width:100%;height:100%}
.player-info{flex:1;min-width:0}
.hello{font-size:22px;font-weight:500}
.league-name{font-size:34px;font-weight:900;color:var(--pitch2)}
.progress{height:18px;background:#d9eadf;border-radius:99px;overflow:hidden;margin:6px 0 2px}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:99px;transition:width .8s}
.progress-label{font-size:17px;color:#3c5b47}
.link-btn{background:none;border:0;color:var(--blue);font-size:18px;padding:6px 0;font-weight:500}
.league-pick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.league-pick button{border:0;border-radius:999px;padding:8px 18px;font-size:18px;font-weight:700;background:rgba(255,255,255,.25);color:#fff}
.league-pick button.on{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.league-pick button:disabled{opacity:.55;cursor:default}
.league-pick .lbl{color:#fff;font-size:17px;align-self:center}
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.game-card{border:0;border-radius:var(--r);padding:18px 10px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;box-shadow:0 8px 0 rgba(0,0,0,.22);transition:transform .15s}
.game-card:hover{transform:translateY(-3px)}
.game-card:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.22)}
.g1{background:linear-gradient(160deg,#ffb020,#ff7a1a)}
.g2{background:linear-gradient(160deg,#4d8dff,#2559d6)}
.g3{background:linear-gradient(160deg,#a35bff,#6f2fd8)}
.g4{background:linear-gradient(160deg,#ff5a5a,#d42f4a)}
.g-ico{font-size:46px;line-height:1}
.g-title{font-size:26px;font-weight:900}
.g-sub{font-size:17px;opacity:.95}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{background:rgba(255,255,255,.95);border-radius:var(--r);padding:12px 18px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.panel h2{margin:0 0 6px;font-size:22px}
.records{list-style:none;margin:0;padding:0}
.records li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed #cfe3d6;font-size:19px}
.records li:last-child{border:0}
.records b{color:var(--pitch2)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.badge{text-align:center;font-size:14px;line-height:1.25;padding:6px 2px;border-radius:14px;background:#f2f4f3;color:#8a948e}
.badge .b-ico{font-size:30px;display:block;filter:grayscale(1);opacity:.45}
.badge.got{background:#fff6d6;color:var(--ink);font-weight:700}
.badge.got .b-ico{filter:none;opacity:1}
.foot{text-align:center;margin-top:16px}
.foot a{color:#fff;font-size:18px;opacity:.9}
/* game */
.match-bar{display:flex;align-items:center;justify-content:space-between;color:#fff;margin-bottom:8px;gap:10px}
.match-title{font-size:24px;font-weight:900}
.dots{display:flex;gap:6px}
.dot{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;font-size:14px}
.dot.ok{background:#fff}
.dot.miss{background:rgba(0,0,0,.3)}
.dot.cur{outline:3px solid var(--gold)}
.stage{background:rgba(255,255,255,.97);border-radius:var(--r);padding:22px;min-height:440px;box-shadow:0 8px 0 rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative}
.prompt{font-size:24px;font-weight:700;text-align:center;color:#244a33}
.flash-box{width:min(560px,100%);height:150px;border-radius:20px;background:var(--dark);display:grid;place-items:center;color:#fff;font-size:72px;font-weight:700;letter-spacing:2px;position:relative;overflow:hidden}
.flash-box .q{font-size:60px;opacity:.5}
.flash-box .timer-line{position:absolute;bottom:0;right:0;height:6px;background:var(--gold)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(640px,100%)}
.opt{border:0;border-radius:18px;background:#eef6f1;font-size:44px;font-weight:700;padding:16px 10px;min-height:84px;box-shadow:0 6px 0 #c5dccd;color:var(--ink);transition:transform .1s}
.opt:active{transform:translateY(4px);box-shadow:0 2px 0 #c5dccd}
.opt.right{background:#3cc46a;color:#fff;box-shadow:0 6px 0 #23934a}
.opt.wrong{background:#ffd9d6;color:#9b2a22;box-shadow:0 6px 0 #f0aaa4;animation:shake .4s}
.opt:disabled{cursor:default}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.btn{border:0;border-radius:18px;background:var(--gold);color:var(--ink);font-size:24px;font-weight:900;padding:14px 28px;box-shadow:0 6px 0 #c99a00;min-height:60px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c99a00}
.btn.big{font-size:28px;padding:16px 36px}
.btn.green{background:#2fbf5f;color:#fff;box-shadow:0 6px 0 #1d8a42}
.btn.blue{background:var(--blue);color:#fff;box-shadow:0 6px 0 #1b56b3}
.btn.red{background:var(--red);color:#fff;box-shadow:0 6px 0 #a82a22}
.btn.ghost{background:#eef3f0;box-shadow:0 6px 0 #c9d6ce}
.btn:disabled{opacity:.45}
.feedback{font-size:26px;font-weight:700;min-height:40px;text-align:center}
.feedback.good{color:#1d8a42}
.feedback.soft{color:#b4521a}
.ref{font-size:44px}
.sentence{display:flex;flex-wrap:wrap;gap:12px 10px;justify-content:center;max-width:900px}
.w{border:0;border-radius:14px;background:#eef6f1;font-size:38px;font-weight:500;padding:8px 16px;box-shadow:0 5px 0 #c5dccd;color:var(--ink)}
.w.right{background:#ffe27a;box-shadow:0 5px 0 #d6b02c}
.w.wrong{background:#ffd9d6;animation:shake .4s}
.w.found{background:#3cc46a;color:#fff;box-shadow:0 5px 0 #23934a}
.fix{display:block;font-size:22px;color:#1d8a42;font-weight:700}
.answer-line{min-height:90px;width:100%;max-width:980px;border:3px dashed #9cc9ab;border-radius:18px;padding:12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;align-items:center;background:#f6fbf8}
.answer-line:empty::before{content:"לחץ על המילים לפי הסדר";color:#8aa595;font-size:22px;margin:auto}
.bank{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:70px;max-width:980px}
.tile{border:0;border-radius:14px;background:#7c3aed;color:#fff;font-size:34px;font-weight:500;padding:8px 18px;box-shadow:0 5px 0 #5221a8}
.answer-line .tile{background:#fff;color:var(--ink);box-shadow:0 5px 0 #c9d6ce;border:2px solid #d8e4dc}
.tile.pop{animation:pop .25s}
@keyframes pop{from{transform:scale(.7)}to{transform:scale(1)}}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.correct-sent{font-size:30px;font-weight:700;color:#1d8a42;text-align:center}
/* race */
.race-head{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.clock{font-size:40px;font-weight:900;font-variant-numeric:tabular-nums;background:var(--dark);color:var(--gold);border-radius:14px;padding:4px 18px;min-width:150px;text-align:center}
.passage{font-size:30px;line-height:2.05;max-width:900px;background:#fbfdf9;border-radius:16px;padding:16px 22px;border:2px solid #e2efe6;transition:filter .3s}
.passage h3{margin:0 0 4px;font-size:30px;color:var(--pitch2)}
.passage.blur{filter:blur(9px);user-select:none}
.q-title{font-size:30px;font-weight:700;text-align:center}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(820px,100%)}
.q-opts .opt{font-size:26px;min-height:70px}
.wpm-big{font-size:56px;font-weight:900;color:var(--pitch2);line-height:1}
/* summary */
.summary{background:#fff;border-radius:var(--r);padding:26px;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.18);display:flex;flex-direction:column;gap:14px;align-items:center}
.scoreboard{display:flex;gap:18px;align-items:center;background:var(--dark);color:#fff;border-radius:18px;padding:12px 28px;font-size:26px}
.scoreboard b{font-size:60px;color:var(--gold);font-variant-numeric:tabular-nums}
.summary h2{font-size:38px;margin:0}
.new-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.new-badges .badge{min-width:110px}
/* modal & overlays */
.modal,.promo{position:fixed;inset:0;background:rgba(5,30,15,.65);display:grid;place-items:center;z-index:50;padding:12px}
.modal-box,.promo-box{background:#fff;border-radius:24px;padding:20px 24px;width:min(520px,100%);max-height:96vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.modal-box h2,.promo-box h2{margin:0;font-size:30px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700}
.field input{font-family:inherit;font-size:26px;padding:8px 14px;border-radius:14px;border:3px solid #cfe3d6;direction:rtl}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:48px;height:48px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px #cfd8d2}
.sw.on{box-shadow:0 0 0 4px var(--ink)}
.preview{width:110px;height:110px;margin:0 auto}
.tiny{font-size:15px;color:#6b7c71;margin:0;text-align:center}
.promo-box{text-align:center;align-items:center;animation:pop .4s}
.trophy{font-size:90px;animation:bounce 1s infinite}
@keyframes bounce{50%{transform:translateY(-12px)}}
.goal-overlay{position:fixed;inset:0;pointer-events:none;z-index:40;display:grid;place-items:center}
.goal-overlay .goal-text{font-size:120px;font-weight:900;color:#fff;text-shadow:0 6px 0 var(--orange),0 0 30px rgba(0,0,0,.4);animation:goalText 1.1s ease-out forwards}
.goal-overlay .ball{position:absolute;font-size:80px;animation:shoot .7s ease-in forwards}
.goal-overlay .net{position:absolute;width:300px;height:170px;border:8px solid #fff;border-bottom:0;border-radius:6px 6px 0 0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 16px),repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 16px);opacity:0;animation:net 1.1s forwards}
@keyframes shoot{0%{transform:translate(0,40vh) scale(1.3) rotate(0)}100%{transform:translate(0,-10px) scale(.7) rotate(-540deg)}}
@keyframes goalText{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.15);opacity:1}55%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
@keyframes net{0%{opacity:0}25%{opacity:.9}85%{opacity:.9}100%{opacity:0}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:16px;font-size:20px;z-index:60;animation:pop .3s}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.cf{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
/* phones */
@media (max-width:760px){
 body{font-size:18px}
 #app{padding:8px 10px 18px}
 .brand{font-size:20px;white-space:nowrap}
 .brand span{display:none}
 .pill{font-size:16px;padding:5px 10px}
 .icon-btn{min-width:42px;height:42px;font-size:20px}
 .avatar{width:86px;height:86px}
 .league-name{font-size:26px}
 .games{grid-template-columns:1fr 1fr;gap:10px}
 .game-card{min-height:120px}
 .g-title{font-size:21px}.g-ico{font-size:36px}.g-sub{font-size:15px}
 .panels{grid-template-columns:1fr}
 .stage{padding:14px;min-height:0;gap:14px}
 .flash-box{height:120px;font-size:56px}
 .opt{font-size:34px;min-height:72px}
 .w{font-size:28px;padding:6px 12px}
 .tile{font-size:26px;padding:6px 12px}
 .passage{font-size:23px;padding:12px 14px;line-height:1.95}
 .q-opts{grid-template-columns:1fr}
 .q-opts .opt{font-size:22px;min-height:60px}
 .goal-overlay .goal-text{font-size:80px}
 .goal-overlay .net{width:220px;height:130px}
 .match-title{font-size:19px}
 .dot{width:16px;height:16px}
}
@media (max-height:800px) and (min-width:761px){
 .game-card{min-height:118px;padding:12px 10px}
 .g-ico{font-size:38px}
 .stage{min-height:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}

/* ---- v3: stages ---- */
.g-prog{margin-top:6px;font-size:15px;font-weight:700;background:rgba(0,0,0,.22);border-radius:999px;padding:3px 12px;white-space:nowrap}
.stages-head{text-align:center;color:#fff;margin:6px 0 12px}
.stages-head h2{margin:0;font-size:34px;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.stages-sub{font-size:19px;opacity:.95;margin-top:4px}
.stage-map{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.lg-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;background:rgba(255,255,255,.95);border-radius:var(--r);padding:10px 14px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.lg-name{font-weight:900;font-size:20px;color:var(--pitch2)}
.lg4 .lg-name{color:#b8860b}.lg5 .lg-name{color:#7c3aed}
.lg4{background:linear-gradient(90deg,#fff8dc,#fff)}.lg5{background:linear-gradient(90deg,#f1e8ff,#fff)}
.lg-stages{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stage-btn{border:0;border-radius:18px;background:var(--gold);color:var(--ink);box-shadow:0 5px 0 #c99a00;padding:8px 6px;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:inherit}
.stage-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c99a00}
.stage-btn.done{background:#2fbf5f;color:#fff;box-shadow:0 5px 0 #1d8a42}
.stage-btn.next{animation:pulse 1.4s ease-in-out infinite;outline:4px solid #fff;outline-offset:-4px}
.stage-btn.locked{background:#d9dfdb;color:#7b867f;box-shadow:0 5px 0 #b5beb8;cursor:default}
.st-num{font-size:30px;font-weight:900;line-height:1}
.st-lbl{font-size:15px;font-weight:700}
.st-stars{font-size:20px;letter-spacing:2px;color:#fff3b0;min-height:22px}
.stage-btn:not(.done) .st-stars{color:#a07a00}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.stage-tag{font-size:19px;font-weight:700;color:var(--pitch2)}
.stars-big{font-size:54px;letter-spacing:6px;color:#f5b400;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.12)}
.stars-big.zero{color:#c9d1cc}
.summary .row{flex-wrap:wrap;justify-content:center}
@media (max-width:760px){
 .lg-row{grid-template-columns:1fr;gap:6px;padding:10px}
 .lg-name{text-align:center;font-size:19px}
 .stage-btn{min-height:76px}
 .stages-head h2{font-size:28px}
 .g-prog{font-size:13px;padding:2px 8px}
 .stars-big{font-size:46px}
 .summary .btn.big{font-size:22px;padding:12px 18px}
}
.flash-box .fw{display:inline-block;white-space:nowrap}
.options .opt{white-space:normal;line-height:1.15}
@media (max-width:760px){.match-title .gn{display:none}.options .opt.long{font-size:24px}}
@media (max-width:760px){.match-bar{flex-wrap:wrap;row-gap:6px}.match-title{white-space:nowrap}}

/* ---- v4: credit, feedback, teacher stats ---- */
.credit{text-align:center;color:#fff;opacity:.85;font-size:15px;margin-top:18px;letter-spacing:.3px}
.credit:before{content:"⚽ ";}
.foot .sep{color:#fff;opacity:.7;margin:0 6px}
.fbx{max-width:640px;margin:20px auto;background:#fff;border-radius:22px;padding:22px 26px;box-shadow:0 8px 0 rgba(0,0,0,.18);font-size:20px;line-height:1.6}
.fbx h1{margin:0 0 6px;color:#17703a;font-size:30px}
.fbx label{display:block;font-weight:700;margin:14px 0 6px}
.fbx select,.fbx textarea,.pin-row input{font:inherit;font-size:19px;border:2px solid #cfe0d5;border-radius:14px;padding:10px 12px;background:#f7fbf8;color:var(--ink);width:100%;box-sizing:border-box}
.fbx select{width:auto;min-width:180px}
.fbx textarea{min-height:150px;resize:vertical}
.fbx select:focus,.fbx textarea:focus,.pin-row input:focus{outline:3px solid var(--gold);border-color:var(--pitch)}
.fb-meta{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#6b7c71;margin-top:4px}
.fb-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}
.fb-err{color:#b3261e;font-size:17px;min-height:1.4em;margin:8px 0 0}
.fb-thanks{text-align:center;padding:10px 0}
.fb-thanks .big-ico{font-size:64px;line-height:1.1}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.stats-box{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--dark);color:#fff;border-radius:16px;padding:12px 18px;font-size:22px}
.stats-box b{color:var(--gold);font-size:30px;font-variant-numeric:tabular-nums}
.pin-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pin-row input{width:130px;letter-spacing:6px;text-align:center}
.fb-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.fb-item{background:#f3f8f5;border-radius:14px;padding:10px 14px;border-right:5px solid var(--gold)}
.fb-item .fb-head{display:flex;justify-content:space-between;gap:8px;font-size:15px;color:#5d6e63}
.fb-item .fb-text{white-space:pre-wrap;word-break:break-word;margin-top:4px;font-size:19px}
.fb-item .fb-del{background:none;border:0;color:#b3261e;font-size:15px;cursor:pointer;padding:0}
@media (max-width:600px){.fbx{margin:10px;padding:18px}.fbx h1{font-size:26px}.stats-box{font-size:19px}.stats-box b{font-size:26px}}