@font-face{font-family:"Rubik";src:url(fonts/rubik-heb.woff2) format("woff2");font-weight:300 900;unicode-range:U+0590-05FF,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";src:url(fonts/rubik-lat.woff2) format("woff2");font-weight:300 900;unicode-range:U+0000-00FF,U+2000-206F,U+2212;font-display:swap}
:root{--ink:#16233b;--mut:#5b6b85;--bg:#eef6ff;--card:#fff;--line:#dbe6f4;--acc:#1d8fe1;--acc2:#0b6fb8;--accs:#e2f1fd;
--good:#22b573;--warn:#f5a524;--bad:#ef4b5c;--gold:#ffc83d;--r:18px;--sh:0 6px 22px rgba(22,35,59,.10);--sh2:0 14px 40px rgba(22,35,59,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Rubik",system-ui,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:17px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--acc2)}
:focus-visible{outline:3px solid #ffb703;outline-offset:2px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logo-corner{position:fixed;top:8px;left:8px;z-index:60;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;overflow:hidden}
.logo-corner img{width:46px;height:46px;object-fit:contain}
.site-foot{margin-top:auto;text-align:center;padding:14px 12px 18px;color:var(--mut);font-size:14px}
.site-foot b{color:var(--ink)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:16px;border:0;background:var(--acc);color:#fff;font-weight:700;font-size:18px;box-shadow:0 5px 0 var(--acc2),0 8px 18px rgba(0,0,0,.12);transition:transform .08s,box-shadow .08s,filter .15s;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--acc2),0 3px 8px rgba(0,0,0,.12)}
.btn.big{min-height:62px;font-size:22px;padding:12px 34px;border-radius:20px}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 5px 0 #c9d6e8,0 8px 18px rgba(0,0,0,.06)}
.btn.ghost:active{box-shadow:0 1px 0 #c9d6e8}
.btn.gold{background:var(--gold);color:#3a2a00;box-shadow:0 5px 0 #d49b00,0 8px 18px rgba(0,0,0,.12)}
.btn.green{background:var(--good);box-shadow:0 5px 0 #16865292,0 8px 18px rgba(0,0,0,.12)}
.btn:disabled{filter:grayscale(.7) opacity(.55);cursor:not-allowed;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--accs);color:var(--acc2);font-weight:700;font-size:14px}
/* ===== game shell ===== */
.g-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(22,35,59,.06)}
.g-bar{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;padding-left:70px;max-width:1240px;margin:0 auto}
.g-title{font-weight:800;font-size:19px;display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.g-title span.t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-title .em{font-size:26px}
.ib{width:44px;height:44px;border-radius:14px;border:0;background:var(--accs);display:grid;place-items:center;font-size:20px;flex:none;text-decoration:none;color:inherit}
.ib:active{transform:scale(.94)}
.g-round{flex:none;background:var(--acc);color:#fff;font-weight:800;border-radius:999px;padding:6px 14px;font-size:15px;white-space:nowrap}
.g-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 8px;padding:2px 12px 10px;max-width:1240px;margin:0 auto}
.mt{background:#f6f9fe;border:1px solid var(--line);border-radius:14px;padding:5px 10px 7px;min-width:0;position:relative;transition:background .3s}
.mt .mh{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--mut);font-weight:600;white-space:nowrap}
.mt .mh b{margin-inline-start:auto;color:var(--ink);font-size:16px;font-weight:800}
.mt .mh .ic{font-size:17px}
.mt .bar{height:10px;border-radius:99px;background:#e3ebf6;overflow:hidden;margin-top:4px}
.mt .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#4cc9f0,#1d8fe1);transition:width .6s cubic-bezier(.3,1.4,.5,1),background .4s}
.mt.ok .bar i{background:linear-gradient(90deg,#57e39a,#22b573)}
.mt.warn .bar i{background:linear-gradient(90deg,#ffd56b,#f5a524)}
.mt.bad .bar i{background:linear-gradient(90deg,#ff8a95,#ef4b5c)}
.mt.bad{background:#fff1f2;border-color:#ffd0d5}
.mt.pulse{animation:pulse .6s}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.mt .delta{position:absolute;top:-8px;inset-inline-start:8px;font-size:13px;font-weight:800;padding:0 7px;border-radius:99px;background:#fff;box-shadow:var(--sh);opacity:0;transform:translateY(4px);transition:.3s;pointer-events:none}
.mt .delta.show{opacity:1;transform:none}
.mt .delta.up{color:var(--good)}.mt .delta.down{color:var(--bad)}
.g-main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:12px 12px 8px}
.g-stage{position:relative}
.g-dock{position:sticky;bottom:0;z-index:30;pointer-events:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.g-dock .in>*{pointer-events:auto}
.g-dock .in{max-width:1240px;margin:0 auto;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;border:1px solid var(--line)}
.panel h3{margin:0 0 8px;font-size:19px}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.grid2{grid-template-columns:1.35fr 1fr}}
/* overlays */
.ov{position:fixed;inset:0;z-index:80;background:rgba(14,26,48,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 12px 40px;animation:fade .2s}
.ov[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.card{background:#fff;border-radius:26px;box-shadow:var(--sh2);width:100%;max-width:640px;padding:22px 20px 20px;position:relative;animation:pop .28s cubic-bezier(.3,1.5,.6,1);margin:auto 0}
@keyframes pop{from{transform:scale(.88) translateY(20px);opacity:0}}
.card h2{margin:4px 0 8px;font-size:26px;line-height:1.25}
.card .kick{font-size:14px;font-weight:700;color:var(--acc2);letter-spacing:.3px}
.card .bigem{font-size:64px;line-height:1;text-align:center;margin:4px 0 6px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.15))}
.card p{margin:6px 0}
.say{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:50%;border:0;background:var(--accs);font-size:19px}
.say.on{background:var(--gold)}
.box{border-radius:16px;padding:10px 14px;margin:10px 0;background:var(--accs)}
.box h4{margin:0 0 4px;font-size:16px}
.box ul,.box ol{margin:4px 0;padding-inline-start:22px}
.box li{margin:3px 0}
.box.goal{background:#fff7dd}
.box.fact{background:#e9fbf2;border-inline-start:5px solid var(--good)}
.box.warn{background:#fff1f2}
.cbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.choices{display:grid;gap:10px;margin-top:12px}
.choice{display:flex;align-items:center;gap:12px;text-align:start;border:2px solid var(--line);background:#fff;border-radius:18px;padding:12px 14px;min-height:62px;box-shadow:0 4px 0 #dbe6f4;transition:.1s}
.choice:hover{border-color:var(--acc);background:#f6fbff}
.choice:active{transform:translateY(3px);box-shadow:0 1px 0 #dbe6f4}
.choice .ce{font-size:30px;flex:none}
.choice b{display:block;font-size:17.5px}
.choice small{display:block;color:var(--mut);font-size:14.5px;line-height:1.35}
.tag{display:inline-block;font-size:13px;font-weight:800;padding:3px 10px;border-radius:99px;background:#ffe6c7;color:#9a4b00}
.tag.news{background:#ffe0e5;color:#a1162b}.tag.good{background:#d8f8e7;color:#0f7a49}
/* toast & float */
#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);z-index:90;background:#16233b;color:#fff;padding:10px 18px;border-radius:14px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;max-width:92vw;text-align:center;box-shadow:var(--sh2)}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.good{background:#0f8a55}#toast.bad{background:#c2283a}
.float{position:fixed;z-index:95;font-weight:900;font-size:20px;pointer-events:none;animation:floatUp 1.1s ease-out forwards;text-shadow:0 2px 0 #fff,0 0 8px #fff}
.float.good{color:var(--good)}.float.bad{color:var(--bad)}
@keyframes floatUp{to{transform:translateY(-60px);opacity:0}}
/* end */
.stars{text-align:center;font-size:44px;letter-spacing:6px;margin:2px 0}
.stars i{font-style:normal;display:inline-block;animation:starIn .5s both}
.stars i.off{filter:grayscale(1) opacity(.3)}
@keyframes starIn{from{transform:scale(0) rotate(-90deg)}}
.score{text-align:center;font-size:20px;font-weight:700;color:var(--mut)}
.score b{font-size:40px;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.stat{background:#f6f9fe;border-radius:14px;padding:8px 10px;text-align:center}
.stat .si{font-size:22px}.stat b{display:block;font-size:19px}.stat small{color:var(--mut);font-size:13px}
.refl label{display:block;font-weight:700;margin:10px 0 4px}
.refl textarea{width:100%;min-height:64px;border:2px solid var(--line);border-radius:14px;padding:8px 10px;font:inherit;font-size:16px;resize:vertical}
.refl textarea:focus{border-color:var(--acc);outline:none}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:99}
/* start screen */
.start-hero{text-align:center}
.start-hero .bigem{font-size:78px}
.meta-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
/* tiles (home) */
.home-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#1d8fe1 0%,#2bb5a0 55%,#ffc83d 130%);color:#fff;padding:70px 16px 40px;text-align:center}
.home-hero h1{font-size:clamp(32px,7vw,58px);margin:6px 0 6px;line-height:1.1;text-shadow:0 4px 18px rgba(0,0,0,.18)}
.home-hero p{font-size:clamp(17px,2.6vw,21px);max-width:720px;margin:0 auto;opacity:.95}
.home-hero .globe{width:min(230px,52vw);height:auto;display:block;margin:0 auto 6px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.25))}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;max-width:1240px;margin:-26px auto 0;padding:0 14px 20px;position:relative;z-index:2}
.tile{display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:var(--sh);overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.tile .art{height:150px;display:grid;place-items:center;font-size:72px;position:relative;overflow:hidden}
.tile .art svg{position:absolute;inset:0;width:100%;height:100%}
.tile .art .em{position:relative;filter:drop-shadow(0 8px 10px rgba(0,0,0,.2))}
.tile .tb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile h2{margin:0;font-size:23px}
.tile p{margin:0;color:var(--mut);font-size:16px}
.tile .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tile .go{margin-top:8px;align-self:flex-start}
.sec{max-width:1240px;margin:0 auto;padding:10px 14px}
/* teacher */
.tnav{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tnav a{text-decoration:none}
.tsec{scroll-margin-top:16px;margin:16px 0}
.tsec h2{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.tsec h3{margin:14px 0 4px;font-size:18px}
.tsec ul,.tsec ol{padding-inline-start:22px;margin:4px 0}
.tsec li{margin:3px 0}
.ans{background:#f2fbf6;border-radius:12px;padding:6px 12px;margin:4px 0 10px;border-inline-start:4px solid var(--good)}
@media(max-width:520px){
 body{font-size:16px}
 .g-bar{padding-right:8px;padding-left:66px;gap:6px}
 .g-title{font-size:16px;line-height:1.15}.g-title .em{font-size:22px}.g-title span.t{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px}
 .ib{width:40px;height:40px;font-size:18px;border-radius:12px}
 .g-round{padding:5px 10px;font-size:13.5px}
 .g-meters{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 5px;padding:2px 6px 6px}
 .mt{padding:3px 6px 5px;border-radius:11px}.mt .mh{font-size:11.5px;gap:3px}.mt .mh .lb{overflow:hidden;text-overflow:ellipsis}.mt .mh b{font-size:13.5px}.mt .mh .ic{font-size:14px}.mt .bar{height:7px;margin-top:3px}
 .card{padding:18px 14px 16px;border-radius:22px}.card h2{font-size:23px}
 .btn.big{font-size:20px;padding:10px 24px}
 .g-main{padding:10px 8px 6px}
}
@media(min-width:1500px){body{font-size:19px}.btn{font-size:20px;min-height:58px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}