:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#183052;background:#f3f7fc;font-size:14px}*{box-sizing:border-box}body{margin:0;min-width:280px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #22c4e8;outline-offset:2px}.app{min-height:100dvh;display:flex;flex-direction:column}.topbar{background:linear-gradient(110deg,#102648,#1b4877);color:white;padding:14px clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand img{width:53px;height:53px;object-fit:contain}.brand h1{font-size:21px;margin:0;letter-spacing:-.5px}.brand p{margin:2px 0 0;color:#b6d5f0;font-size:12px}.top-actions{display:flex;gap:8px;align-items:center}.lang{background:#183c64;border-radius:20px;padding:3px;display:flex}.lang button{border:0;border-radius:17px;padding:7px 12px;background:transparent;color:#d8eafb}.lang button.active{background:#fff;color:#102648;font-weight:800}.shell{width:min(1340px,100%);margin:auto;padding:25px clamp(14px,2.4vw,32px);flex:1}.hero{display:flex;gap:18px;align-items:end;justify-content:space-between;margin-bottom:19px}.hero h2{font-size:clamp(22px,3vw,32px);margin:0 0 5px}.hero p{margin:0;color:var(--muted,#66778f)}.theme-btn{border:1px solid #a9c3df;border-radius:10px;background:#fff;color:#183052;padding:10px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.game-card{background:var(--card,#fff);color:var(--text,#183052);border:2px solid var(--line,#dfebf5);border-radius:18px;padding:0;overflow:hidden;text-align:left;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}.game-card:hover,.game-card.selected{transform:translateY(-3px);border-color:#39a8d9;box-shadow:0 9px 25px #19457223}.art{height:155px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(130deg,var(--a),var(--b));display:grid;place-items:center}.art:before{content:'';position:absolute;inset:-60%;background:repeating-radial-gradient(ellipse at center,transparent 0px,transparent 22px,#ffffff15 24px,#ffffff15 27px);transform:rotate(-18deg)}.art span{font-size:77px;filter:drop-shadow(0 14px 9px #0005);transform:rotate(-13deg);z-index:1}.game-info{padding:15px}.game-info strong{display:block;font-size:17px;margin-bottom:4px}.game-info small{color:var(--muted,#66778f)}.panel{margin-top:20px;background:var(--card,#fff);border:1px solid var(--line,#dce7f3);border-radius:17px;padding:20px;color:var(--text,#183052);box-shadow:0 7px 26px #1740680b}.panel h3{margin:0 0 15px;font-size:19px}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}.field label{font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line,#ccd9e8);border-radius:10px;padding:11px;background:var(--input,#fff);color:var(--text,#183052);min-width:0}.field textarea{min-height:91px;resize:vertical}.help{font-size:12px;color:var(--muted,#66778f);line-height:1.5}.btn{border:0;border-radius:10px;padding:11px 15px;background:#175b95;color:white;font-weight:750}.btn.secondary{color:var(--text,#183052);background:var(--pale,#e9f2fb)}.btn.green{background:#087f70}.btn-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.status{border-radius:10px;padding:10px 12px;background:var(--pale,#e7f2fb);color:var(--text,#183052);font-size:13px;margin-top:10px;white-space:pre-line}.warn{color:#ae3e34}.muted{color:var(--muted,#66778f)}.hidden{display:none!important}.toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}.toggle-row input{accent-color:#087f70;width:18px;height:18px}.codearea{min-height:115px;font:12px ui-monospace,monospace!important;direction:ltr}.steps{margin:6px 0 10px;padding-left:20px;line-height:1.8}.footer{text-align:center;color:#c5dcf1;background:#122d51;padding:15px;font-size:12px}.preview-shell{border-radius:15px;overflow:hidden;background:#060f21;border:1px solid #355070}.preview-head{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#102748;color:#fff;padding:10px 12px}.preview-head small{color:#afc5dd}.game-stage{position:relative;aspect-ratio:16/9;min-height:340px;max-height:min(75dvh,700px);overflow:hidden;background:radial-gradient(ellipse at center,#193858,#051025)}#gameCanvas{width:100%;height:100%;display:block;touch-action:none}.game-hud{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:white;pointer-events:none;text-shadow:0 2px 8px #000}.hud-pill{background:#051a32d9;border:1px solid #5f9cc4;border-radius:30px;padding:7px 11px;font-weight:800;font-size:12px}.qa-overlay{position:absolute;left:3%;right:3%;bottom:3%;display:flex;flex-direction:column;gap:8px;pointer-events:none}.question{padding:9px 14px;background:#071e39e8;color:#fff;border:1px solid #4b789e;border-radius:12px;text-align:center;font-weight:800;font-size:clamp(14px,1.7vw,21px);line-height:1.5;max-height:104px;overflow:auto;pointer-events:auto}.answer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;pointer-events:auto}.answer{border:2px solid #6db2d4;border-radius:10px;color:white;background:#102b4aec;padding:11px 5px;font-weight:800;font-size:clamp(12px,1.4vw,17px);min-height:58px;overflow-wrap:anywhere}.answer:active{transform:scale(.96)}.answer.correct{background:#087c65;border-color:#70f2c4}.answer.wrong{background:#a8344b;border-color:#ffa0af}.stage-message{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);background:#071e39ee;color:#fff;border:1px solid #8bd6e5;border-radius:18px;padding:20px;max-width:85%;width:400px;text-align:center;box-shadow:0 15px 50px #0008;z-index:3}.stage-message h2{margin:0 0 9px}.stage-message p{font-size:13px;line-height:1.6}.stage-message button{margin:5px}.touch-note{position:absolute;top:51px;left:10px;color:#daecff;background:#081629ab;padding:5px 8px;border-radius:6px;font-size:11px;pointer-events:none}.result-board{background:linear-gradient(140deg,#081b34,#132a50);color:white;border-radius:15px;padding:20px;text-align:center}.result-board h2{font-size:29px;margin:6px}.result-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}.kpi{border-radius:12px;padding:15px 5px;background:#1d3a60}.kpi strong{font-size:24px;display:block;color:#76eadc}.kpi small{color:#b8cee6}.leaderboard{background:#10294a;border-radius:13px;padding:14px;color:white;margin-top:12px}.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end}.podium div{background:#224467;border-radius:10px;padding:10px;text-align:center;min-height:76px}.podium div:nth-child(2){background:#665028}.r-row{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid #3a5575}.dark{--card:#172a42;--text:#f0f7ff;--muted:#b2c3d7;--line:#31506d;--pale:#24405f;--input:#10243b;background:#0d1d31;color:#f0f7ff}.dark .theme-btn{background:#233f60;color:white;border-color:#476783}.dark .topbar{background:linear-gradient(110deg,#08162a,#123554)}[dir=rtl].question,[dir=rtl].answer{text-align:center}#exportPreview{display:none}@media(max-width:800px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}.art{height:135px}.hero{align-items:start}.game-stage{min-height:310px;aspect-ratio:4/3}}@media(max-width:530px){.shell{padding:15px 10px}.topbar{padding:10px 13px}.brand h1{font-size:17px}.brand img{width:45px;height:45px}.brand p{font-size:10px}.game-grid{gap:9px}.art{height:105px}.art span{font-size:49px}.game-info{padding:10px}.game-info strong{font-size:13px}.game-info small{font-size:11px}.panel{padding:13px}.game-stage{min-height:460px;aspect-ratio:3/5;max-height:75dvh}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.answer{min-height:48px;font-size:13px;padding:7px 5px}.qa-overlay{left:2%;right:2%;bottom:2%}.result-kpis{grid-template-columns:repeat(2,1fr)}.preview-head{flex-wrap:wrap}.hero h2{font-size:21px}}
