saniya_akpanova_91/emergency-cases
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

game mode: профиль/уровни/XP, достижения, рейтинг, карта тем + классическая палитра

Browse Source
This commit is contained in:
Dauren777 2026-06-26 06:34:26 +00:00
parent ae7d3fa126
commit 769387dbc3
3 changed files with 860 additions and 603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

540
app.js
View File

@ -56,6 +56,7 @@ const CASES = [
explanation:"Типичный ангинозный синдром, подъём ST в передних отведениях и реципрокная депрессия — STEMI. Время = гибнущий миокард, показана экстренная реперфузия." explanation:"Типичный ангинозный синдром, подъём ST в передних отведениях и реципрокная депрессия — STEMI. Время = гибнущий миокард, показана экстренная реперфузия."
}, },
emergency:{ emergency:{
time:60,
intro:"Пациент в острейшей стадии. У вас 60 секунд, чтобы оказать экстренную помощь.", intro:"Пациент в острейшей стадии. У вас 60 секунд, чтобы оказать экстренную помощь.",
actions:[ actions:[
{t:"Вызвать реанимационную бригаду, активировать STEMI-маршрут (door-to-balloon ≤ 90 мин)", n:true}, {t:"Вызвать реанимационную бригаду, активировать STEMI-маршрут (door-to-balloon ≤ 90 мин)", n:true},
@ -130,6 +131,7 @@ const CASES = [
explanation:"Депрессия ST + подъём тропонина + высокий риск по GRACE = NSTEMI. Тромболизис при NSTEMI НЕ показан — показана ранняя инвазивная стратегия." explanation:"Депрессия ST + подъём тропонина + высокий риск по GRACE = NSTEMI. Тромболизис при NSTEMI НЕ показан — показана ранняя инвазивная стратегия."
}, },
emergency:{ emergency:{
time:60,
intro:"Пациентка с NSTEMI высокого риска. У вас 60 секунд на оказание экстренной помощи.", intro:"Пациентка с NSTEMI высокого риска. У вас 60 секунд на оказание экстренной помощи.",
actions:[ actions:[
{t:"Двойная антитромбоцитарная терапия + антикоагулянт", n:true}, {t:"Двойная антитромбоцитарная терапия + антикоагулянт", n:true},
@ -203,6 +205,7 @@ const CASES = [
explanation:"Экспираторная одышка, свистящие хрипы, SpO₂ 91%, ПСВ < 50% — острый тяжёлый приступ астмы. Основа: бронходилататоры и системные ГКС." explanation:"Экспираторная одышка, свистящие хрипы, SpO₂ 91%, ПСВ < 50% — острый тяжёлый приступ астмы. Основа: бронходилататоры и системные ГКС."
}, },
emergency:{ emergency:{
time:60,
intro:"Пациентка задыхается. У вас 60 секунд оказать экстренную помощь.", intro:"Пациентка задыхается. У вас 60 секунд оказать экстренную помощь.",
actions:[ actions:[
{t:"Кислород до SpO₂ 94–98%", n:true}, {t:"Кислород до SpO₂ 94–98%", n:true},
@ -275,6 +278,7 @@ const CASES = [
explanation:"ХОБЛ в анамнезе, гнойная мокрота, лихорадка, SpO₂ 86%, гиперкапния по газометрии — обострение ХОБЛ с ОДН 2 типа. Кислород титровать до 88–92%." explanation:"ХОБЛ в анамнезе, гнойная мокрота, лихорадка, SpO₂ 86%, гиперкапния по газометрии — обострение ХОБЛ с ОДН 2 типа. Кислород титровать до 88–92%."
}, },
emergency:{ emergency:{
time:60,
intro:"Пациент с гиперкапнической ОДН. У вас 60 секунд оказать экстренную помощь.", intro:"Пациент с гиперкапнической ОДН. У вас 60 секунд оказать экстренную помощь.",
actions:[ actions:[
{t:"Контролируемая О₂-терапия (Venturi 24–28%, цель SpO₂ 88–92%)", n:true}, {t:"Контролируемая О₂-терапия (Venturi 24–28%, цель SpO₂ 88–92%)", n:true},
@ -348,6 +352,7 @@ const CASES = [
explanation:"Травма, массивная кровопотеря, ЧСС 130, АД 80/40, шоковый индекс 1.6, бледность, олигурия — геморрагический шок III–IV. Приоритет — остановка кровотечения и восстановление ОЦК." explanation:"Травма, массивная кровопотеря, ЧСС 130, АД 80/40, шоковый индекс 1.6, бледность, олигурия — геморрагический шок III–IV. Приоритет — остановка кровотечения и восстановление ОЦК."
}, },
emergency:{ emergency:{
time:60,
intro:"Пациент в геморрагическом шоке, нестабилен. У вас 60 секунд на оказание экстренной помощи.", intro:"Пациент в геморрагическом шоке, нестабилен. У вас 60 секунд на оказание экстренной помощи.",
actions:[ actions:[
{t:"Немедленная остановка наружного кровотечения (прямое давление/жгут)", n:true}, {t:"Немедленная остановка наружного кровотечения (прямое давление/жгут)", n:true},
@ -421,6 +426,7 @@ const CASES = [
explanation:"Инфекционный очаг (пневмония), лихорадка, гипотензия после инфузии, лактат 4.2, олигурия, спутанность сознания — септический шок. Выполняйте hour-1 bundle." explanation:"Инфекционный очаг (пневмония), лихорадка, гипотензия после инфузии, лактат 4.2, олигурия, спутанность сознания — септический шок. Выполняйте hour-1 bundle."
}, },
emergency:{ emergency:{
time:60,
intro:"Пациент в септическом шоке. У вас 60 секунд выполнить Sepsis hour-1 bundle.", intro:"Пациент в септическом шоке. У вас 60 секунд выполнить Sepsis hour-1 bundle.",
actions:[ actions:[
{t:"Измерить лактат", n:true}, {t:"Измерить лактат", n:true},
@ -459,7 +465,6 @@ function pickVoice(preferMale){
const femaleRe=/irina|katya|milena|tatiana|anna|maria|female|женский/i; const femaleRe=/irina|katya|milena|tatiana|anna|maria|female|женский/i;
if(preferMale){ const m=ru.find(v=>maleRe.test(v.name)); if(m) return m; } if(preferMale){ const m=ru.find(v=>maleRe.test(v.name)); if(m) return m; }
else { const f=ru.find(v=>femaleRe.test(v.name)); if(f) return f; } else { const f=ru.find(v=>femaleRe.test(v.name)); if(f) return f; }
// предпочесть нейросетевые/качественные движки
const q=ru.find(v=>/google|yandex|microsoft|neural|premium/i.test(v.name)); if(q) return q; const q=ru.find(v=>/google|yandex|microsoft|neural|premium/i.test(v.name)); if(q) return q;
return ru[0]; return ru[0];
} }
@ -476,15 +481,12 @@ function stopSpeak(){
} }
function splitPhrases(text){ function splitPhrases(text){
return text return text.split(/(?<=[.!?…])\s+|(?<=…)\s*/).map(s=>s.trim()).filter(Boolean);
.split(/(?<=[.!?…])\s+|(?<=…)\s*/)
.map(s=>s.trim())
.filter(Boolean);
} }
function speakPatient(text, opts, btn, avatar){ function speakPatient(text, opts, btn, avatar){
const synth=window.speechSynthesis; const synth=window.speechSynthesis;
if(!synth){ alert("Озвучка не поддерживается этим браузером."); return; } if(!synth){ return; }
if(speakState.playing){ stopSpeak(); return; } if(speakState.playing){ stopSpeak(); return; }
stopSpeak(); stopSpeak();
const phrases=splitPhrases(text); const phrases=splitPhrases(text);
@ -521,14 +523,188 @@ function playNext(){
window.addEventListener("beforeunload",()=>{ if("speechSynthesis" in window) window.speechSynthesis.cancel(); }); window.addEventListener("beforeunload",()=>{ if("speechSynthesis" in window) window.speechSynthesis.cancel(); });
/* ========================================================= /* =========================================================
Рендер карточек кейсов + фильтры Геймификация: профиль, уровни, достижения, рейтинг
========================================================= */ ========================================================= */
const grid=document.getElementById("caseGrid"); const STORE={profile:"medigra_profile_v1", progress:"medigra_progress_v1", results:"medigra_results_v1"};
const AVATARS=["🧑‍⚕️","👨‍⚕️","👩‍⚕️","🧑‍🎓","👨‍🎓","👩‍🎓","🩺","⚕️"];
const LEVELS=[
{lvl:1,name:"Стажёр",xp:0},
{lvl:2,name:"Студент",xp:500},
{lvl:3,name:"Интерн",xp:1500},
{lvl:4,name:"Ординатор",xp:3000},
{lvl:5,name:"Врач",xp:5200},
{lvl:6,name:"Специалист",xp:8000},
{lvl:7,name:"Эксперт",xp:12000},
{lvl:8,name:"Профессор",xp:18000}
];
const ACHIEVEMENTS=[
{id:"first", name:"Первый шаг", desc:"Решить первый кейс", icon:"👣", check:s=>s.completedCases>=1},
{id:"dx100", name:"Точный диагноз", desc:"100% за шаг диагноза", icon:"🎯", check:s=>s.perfectDxCount>=1},
{id:"perfect", name:"Безупречный кейс", desc:"100% за весь кейс", icon:"💎", check:s=>s.perfectCases>=1},
{id:"noerr", name:"Чистая работа", desc:"Кейс без лишних назначений", icon:"✨", check:s=>s.noErrorCases>=1},
{id:"fast", name:"Молниеносная реакция", desc:"Завершить помощь с запасом > 30 сек", icon:"⚡", check:s=>s.fastCases>=1},
{id:"aks", name:"Мастер ОКС", desc:"Пройти все кейсы темы ОКС", icon:"❤️", check:s=>s.themeDone.aks},
{id:"odn", name:"Мастер дыхания", desc:"Пройти все кейсы темы ОДН", icon:"🫁", check:s=>s.themeDone.odn},
{id:"shock", name:"Мастер шока", desc:"Пройти все кейсы темы шок", icon:"🩸", check:s=>s.themeDone.shock},
{id:"alldx", name:"Великий диагност", desc:"Все диагнозы верны", icon:"🧠", check:s=>s.allDxCases>=6},
{id:"all", name:"Полное прохождение", desc:"Пройти все 6 кейсов", icon:"🗺️", check:s=>s.completedCases>=6},
{id:"prof", name:"Профессор", desc:"Достичь максимального уровня", icon:"👑", check:s=>s.maxLevel}
];
function load(key, def){ try{ const v=JSON.parse(localStorage.getItem(key)); return v||def; }catch(e){ return def; } }
function save(key, val){ try{ localStorage.setItem(key, JSON.stringify(val)); }catch(e){} }
let profile=load(STORE.profile, {name:"", avatar:"🧑‍⚕️", xp:0, achievements:[]});
let progress=load(STORE.progress, {});
let results=load(STORE.results, []);
function saveAll(){ save(STORE.profile,profile); save(STORE.progress,progress); save(STORE.results,results); }
function levelInfo(xp){
let cur=LEVELS[0], idx=0;
for(let i=0;i<LEVELS.length;i++){ if(xp>=LEVELS[i].xp){ cur=LEVELS[i]; idx=i; } }
const next=LEVELS[idx+1];
const into=xp-cur.xp;
const span=next?(next.xp-cur.xp):1;
const pct=next?Math.min(100,Math.round(into/span*100)):100;
return {cur, next, idx, into, span, pct, isMax:!next};
}
function starsFor(score){ return score>=85?3:score>=70?2:score>=55?1:0; }
function computeStats(){
let completed=0, perfectCases=0, noErrorCases=0, fastCases=0, perfectDxCount=0, allDx=0;
const themeDone={aks:false,odn:false,shock:false};
CASES.forEach(c=>{
const p=progress[c.id];
if(p&&p.completed){
completed++;
if(p.stars>=3) perfectCases++;
if(p.noErrors) noErrorCases++;
if(p.fast) fastCases++;
if(p.perfectDx) perfectDxCount++;
if(p.dxCorrect) allDx++;
}
});
["aks","odn","shock"].forEach(t=>{
const arr=CASES.filter(c=>c.theme===t);
themeDone[t]=arr.every(c=>progress[c.id]&&progress[c.id].completed);
});
return {completedCases:completed, perfectCases, noErrorCases, fastCases, perfectDxCount, allDxCases:allDx, themeDone, maxLevel:levelInfo(profile.xp).isMax};
}
function countFP(items,picked){ let n=0; items.forEach((it,i)=>{ if(!it.n && picked.has(i)) n++; }); return n; }
function checkAchievements(){
const stats=computeStats();
const newly=[];
ACHIEVEMENTS.forEach(a=>{
if(!profile.achievements.includes(a.id) && a.check(stats)){
profile.achievements.push(a.id);
newly.push(a);
}
});
if(newly.length) save(STORE.profile,profile);
return newly;
}
function awardXp(c, score){
const prev=progress[c.id]||{bestScore:0};
const delta=Math.max(0, Math.round((score-(prev.bestScore||0))*3));
if(delta>0){ profile.xp+=delta; save(STORE.profile,profile); }
return delta;
}
function recordCase(c, score, meta){
const prev=progress[c.id]||{completed:false,bestScore:0,stars:0};
progress[c.id]={
completed:true,
bestScore:Math.max(prev.bestScore||0,score),
stars:Math.max(prev.stars||0,starsFor(score)),
dxCorrect: prev.dxCorrect||meta.dxCorrect,
perfectDx: prev.perfectDx||meta.perfectDx,
noErrors: prev.noErrors||meta.noErrors,
fast: prev.fast||meta.fast,
played:(prev.played||0)+1
};
save(STORE.progress,progress);
}
/* ---- тосты ---- */
function toast(kind, title, sub){
const wrap=document.getElementById("toasts");
const el=document.createElement("div");
el.className="toast "+kind;
const ico = kind==="lvl"?"⬆️": kind==="achv"?"🏅":"✨";
el.innerHTML=`<div class="t-ico">${ico}</div><div class="t-tx"><b>${title}</b><small>${sub}</small></div>`;
wrap.appendChild(el);
setTimeout(()=>{ el.style.transition="opacity .4s, transform .4s"; el.style.opacity="0"; el.style.transform="translateX(120%)"; setTimeout(()=>el.remove(),420); }, 4200);
}
/* =========================================================
Рендер интерфейса
========================================================= */
const $=id=>document.getElementById(id);
function renderPlayerBar(){
const li=levelInfo(profile.xp);
const bar=$("playerBar");
bar.innerHTML=`
<div class="p-ava">${profile.avatar}</div>
<div class="p-mid">
<div class="p-name">${profile.name||"Гость"} <span class="xp-num">· ${li.cur.name}</span></div>
<div class="p-lvl">Уровень ${li.cur.lvl}${li.next?` · до ${li.next.name} ${li.next.xp-profile.xp} XP`:" · максимум"}</div>
</div>
<div class="xpbar"><i style="width:${li.pct}%"></i></div>`;
}
function renderHeroStats(){
const stats=computeStats();
const li=levelInfo(profile.xp);
$("heroStats").innerHTML=`
<div class="hs"><b>${li.cur.lvl}</b><span>уровень · ${li.cur.name}</span></div>
<div class="hs"><b>${profile.xp}</b><span>опыт (XP)</span></div>
<div class="hs"><b>${stats.completedCases}/6</b><span>кейсов пройдено</span></div>
<div class="hs"><b>${profile.achievements.length}/${ACHIEVEMENTS.length}</b><span>достижений</span></div>`;
}
function renderThemes(){
const wrap=$("themes");
const themes=[
{key:"aks", ico:"❤️", name:"ОКС и инфаркт", desc:"STEMI, NSTEMI — диагностика и реперфузия.", cls:"t-aks"},
{key:"odn", ico:"🫁", name:"ОДН · астма · ХОБЛ", desc:"Астматический статус, обострение ХОБЛ.", cls:"t-odn"},
{key:"shock", ico:"🩸", name:"Шок и травма", desc:"Геморрагический и септический шок.", cls:"t-shock"}
];
wrap.innerHTML=themes.map(t=>{
const arr=CASES.filter(c=>c.theme===t.key);
const done=arr.filter(c=>progress[c.id]&&progress[c.id].completed).length;
const pct=Math.round(done/arr.length*100);
const stars=arr.reduce((a,c)=>a+((progress[c.id]&&progress[c.id].stars)||0),0);
const maxStars=arr.length*3;
return `<div class="theme ${t.cls}" data-theme="${t.key}">
<div class="theme-top"><div class="theme-ico">${t.ico}</div><div><h3>${t.name}</h3></div></div>
<p class="theme-desc">${t.desc}</p>
<div class="theme-prog"><div class="tp-track"><i style="width:${pct}%"></i></div></div>
<div class="theme-meta"><span>${done}/${arr.length} кейсов</span><span class="theme-stars">${"★".repeat(stars)}${"☆".repeat(maxStars-stars)}</span></div>
</div>`;
}).join("");
wrap.querySelectorAll(".theme").forEach(el=>el.addEventListener("click",()=>{
setFilter(el.dataset.theme);
document.getElementById("cases").scrollIntoView({behavior:"smooth"});
}));
}
function sevDots(n){let s="";for(let i=0;i<3;i++)s+=`<span class="sev-dot ${i<n?"on":""}"></span>`;return s;} function sevDots(n){let s="";for(let i=0;i<3;i++)s+=`<span class="sev-dot ${i<n?"on":""}"></span>`;return s;}
function renderCards(filter="all"){ function renderCards(filter="all"){
const grid=$("caseGrid");
grid.innerHTML=""; grid.innerHTML="";
CASES.filter(c=>filter==="all"||c.theme===filter).forEach(c=>{ CASES.filter(c=>filter==="all"||c.theme===filter).forEach(c=>{
const p=progress[c.id];
const done=p&&p.completed;
const stars=done?p.stars:0;
const starsHTML=[0,1,2].map(i=>i<stars?"★":`<span class="empty">★</span>`).join("");
const el=document.createElement("article"); const el=document.createElement("article");
el.className=`case-card t-${c.theme}`; el.className=`case-card t-${c.theme}`;
el.innerHTML=` el.innerHTML=`
@ -539,32 +715,92 @@ function renderCards(filter="all"){
<div class="case-sub">${c.patient.name}, ${c.patient.age.split(",")[0]}</div> <div class="case-sub">${c.patient.name}, ${c.patient.age.split(",")[0]}</div>
</div> </div>
</div> </div>
<p class="case-note">Пациент сам расскажет жалобы голосом. Назначьте обследования и лечение, поставьте диагноз, окажите экстренную помощь на время.</p> <p class="case-note">Говорящий пациент. Назначьте обследования и лечение, поставьте диагноз, окажите экстренную помощь на время.</p>
<div class="case-stars">${starsHTML}</div>
<div class="case-best">${done?`Лучший результат: <b>${p.bestScore}%</b> · сыграно ${p.played||1}`:"Ещё не пройден"}</div>
<div class="case-foot"> <div class="case-foot">
<span class="severity" title="Тяжесть">${sevDots(c.severity)}</span> ${done?'<span class="done-tag">✓ Пройден</span>':'<span></span>'}
<button class="case-btn" data-id="${c.id}">Решить кейс →</button> <button class="case-btn" data-id="${c.id}">${done?"Повторить":"Играть"} →</button>
</div>`; </div>`;
el.querySelector(".case-btn").addEventListener("click",e=>{e.stopPropagation(); startExam("single",c.id);}); el.querySelector(".case-btn").addEventListener("click",e=>{e.stopPropagation(); startExam("single",c.id);});
grid.appendChild(el); grid.appendChild(el);
}); });
} }
document.getElementById("filters").addEventListener("click",e=>{ function setFilter(filter){
const b=e.target.closest(".filter"); if(!b) return; document.querySelectorAll(".filter").forEach(f=>f.classList.toggle("is-active", f.dataset.filter===filter));
document.querySelectorAll(".filter").forEach(f=>f.classList.remove("is-active")); renderCards(filter);
b.classList.add("is-active"); }
renderCards(b.dataset.filter);
function renderAchv(){
const stats=computeStats();
const grid=$("achvGrid");
grid.innerHTML=ACHIEVEMENTS.map(a=>{
const unlocked=profile.achievements.includes(a.id);
return `<div class="achv ${unlocked?"":"locked"}">
${unlocked?"":'<span class="lock">🔒</span>'}
<div class="achv-ico">${a.icon}</div>
<h4>${a.name}</h4>
<p>${a.desc}</p>
</div>`;
}).join("");
$("achvCount").textContent=`Открыто ${profile.achievements.length} из ${ACHIEVEMENTS.length}.`;
}
function renderBoard(){
const wrap=$("boardList");
const sorted=[...results].sort((a,b)=>b.score-a.score).slice(0,10);
if(!sorted.length){ wrap.innerHTML=`<div class="board-empty">Пока нет результатов. Пройдите полный экзамен, чтобы попасть в рейтинг.</div>`; return; }
wrap.innerHTML=sorted.map((r,i)=>{
const me = r.name===profile.name && r.avatar===profile.avatar;
return `<div class="board-row r${i+1} ${me?'me':''}">
<div class="br-rank">${i+1}</div>
<div class="br-ava">${r.avatar}</div>
<div class="br-name">${r.name}<small>${r.date}</small></div>
<div class="br-score">${r.score}%</div>
</div>`;
}).join("");
}
function refreshAll(){
renderPlayerBar(); renderHeroStats(); renderThemes(); renderCards(currentFilter); renderAchv(); renderBoard();
}
let currentFilter="all";
/* =========================================================
Профиль (модал)
========================================================= */
let profOnDone=null;
function openProfile(onDone){
profOnDone=onDone||null;
$("profName").value=profile.name||"";
const av=$("profAvatars");
av.innerHTML=AVATARS.map(a=>`<div class="pm-av ${a===profile.avatar?'sel':''}" data-a="${a}">${a}</div>`).join("");
av.querySelectorAll(".pm-av").forEach(e=>e.addEventListener("click",()=>{
av.querySelectorAll(".pm-av").forEach(x=>x.classList.remove("sel"));
e.classList.add("sel");
}));
$("modalProfile").hidden=false;
}
function closeProfile(){ $("modalProfile").hidden=true; if(profOnDone){ const cb=profOnDone; profOnDone=null; cb(); } }
$("profSave").addEventListener("click",()=>{
profile.name=($("profName").value||"").trim().slice(0,20)||"Гость";
const sel=document.querySelector(".pm-av.sel");
if(sel) profile.avatar=sel.dataset.a;
save(STORE.profile,profile);
renderPlayerBar(); renderHeroStats(); renderBoard();
closeProfile();
}); });
$("modalProfile").addEventListener("click",e=>{ if(e.target.hasAttribute("data-close-p")){ $("modalProfile").hidden=true; } });
$("btnProfile").addEventListener("click",()=>openProfile());
$("btnAchv").addEventListener("click",()=>document.getElementById("achv").scrollIntoView({behavior:"smooth"}));
$("btnBoard").addEventListener("click",()=>document.getElementById("board").scrollIntoView({behavior:"smooth"}));
/* ========================================================= /* =========================================================
Экзамен (полноэкранный wizard) Экзамен (полноэкранный wizard)
========================================================= */ ========================================================= */
const exam=document.getElementById("exam"); const exam=$("exam"), examBody=$("examBody");
const examBody=document.getElementById("examBody");
const examProgressLabel=document.getElementById("examProgressLabel");
const examDots=document.getElementById("examDots");
const stageTrack=document.getElementById("stageTrack");
const STAGES=[ const STAGES=[
{key:"patient", label:"Пациент"}, {key:"patient", label:"Пациент"},
{key:"investigations", label:"Обследование"}, {key:"investigations", label:"Обследование"},
@ -573,78 +809,58 @@ const STAGES=[
{key:"emergency", label:"Помощь ⏱"}, {key:"emergency", label:"Помощь ⏱"},
{key:"result", label:"Результат"} {key:"result", label:"Результат"}
]; ];
const STEP_TAGS=["Пациент","Шаг 1","Шаг 2","Шаг 3","Шаг 4","Результат"];
let state=null; let state=null, timerHandle=null;
let timerHandle=null;
function startExam(mode, caseId){ function startExam(mode, caseId){
const queue = mode==="full" ? CASES.map(c=>c.id) : [caseId]; const queue = mode==="full" ? CASES.map(c=>c.id) : [caseId];
state={ mode, queue, qIdx:0, stage:0, answers:{}, caseScores:[], emergencyAuto:false }; state={mode, queue, qIdx:0, stage:0, answers:{}, caseScores:[], emergencyLeft:0, emergencyManual:false};
exam.hidden=false; exam.hidden=false; document.body.style.overflow="hidden";
document.body.style.overflow="hidden";
loadCase(); loadCase();
} }
function closeExam(){ function closeExam(){
stopSpeak(); stopSpeak(); stopTimer();
if(timerHandle){ clearInterval(timerHandle); timerHandle=null; } exam.hidden=true; document.body.style.overflow="";
exam.hidden=true; refreshAll();
document.body.style.overflow="";
state=null; state=null;
} }
function curCase(){ return CASES.find(c=>c.id===state.queue[state.qIdx]); } function curCase(){ return CASES.find(c=>c.id===state.queue[state.qIdx]); }
function loadCase(){ function loadCase(){
stopTimer(); stopTimer();
state.stage=0; state.stage=0;
state.answers={ state.answers={investigations:new Set(), medications:new Set(), diagnosis:null, emergency:new Set(), submitted:{i:false,m:false,d:false,e:false}};
investigations:new Set(), state.emergencyLeft=0; state.emergencyManual=false;
medications:new Set(),
diagnosis:null,
emergency:new Set(),
submitted:{i:false,m:false,d:false,e:false}
};
state.emergencyAuto=false;
stopSpeak(); stopSpeak();
renderExamBar(); renderExamBar(); renderStageTrack(); renderPatient();
renderStageTrack();
renderPatient();
} }
function renderExamBar(){ function renderExamBar(){
examProgressLabel.textContent=`Кейс ${state.qIdx+1} из ${state.queue.length}`; $("examProgressLabel").textContent=`Кейс ${state.qIdx+1} из ${state.queue.length}`;
examDots.innerHTML=state.queue.map((_,i)=>{ $("examDots").innerHTML=state.queue.map((_,i)=>{
const done=i<state.qIdx, cur=i===state.qIdx; const done=i<state.qIdx, cur=i===state.qIdx;
return `<span class="exam-dot ${done?"done":""} ${cur?"current":""}"></span>`; return `<span class="exam-dot ${done?"done":""} ${cur?"current":""}"></span>`;
}).join(""); }).join("");
} }
function renderStageTrack(){ function renderStageTrack(){
stageTrack.innerHTML=STAGES.map((s,i)=>{ $("stageTrack").innerHTML=STAGES.map((s,i)=>{
let cls=""; if(i<state.stage) cls="done"; else if(i===state.stage) cls="active"; let cls=""; if(i<state.stage) cls="done"; else if(i===state.stage) cls="active";
const mark=cls==="done"?"✓":(i+1); const mark=cls==="done"?"✓":(i+1);
return `<div class="stage-pill ${cls}"><span class="sp-n">${mark}</span><span class="sp-label">${s.label}</span></div>${i<STAGES.length-1?'<span class="stage-sep">→</span>':""}`; return `<div class="stage-pill ${cls}"><span class="sp-n">${mark}</span><span class="sp-label">${s.label}</span></div>${i<STAGES.length-1?'<span class="stage-sep">→</span>':""}`;
}).join(""); }).join("");
} }
/* ---- SVG кольцо ---- */
function ring(pct, size, stroke, color, track, num){ function ring(pct, size, stroke, color, track, num){
const r=(size-stroke)/2, c=2*Math.PI*r, off=c*(1-Math.max(0,Math.min(100,pct))/100); const r=(size-stroke)/2, c=2*Math.PI*r, off=c*(1-Math.max(0,Math.min(100,pct))/100);
return `<div class="timer-ring" style="width:${size}px;height:${size}px"> return `<div class="timer-ring" style="width:${size}px;height:${size}px">
<svg width="${size}" height="${size}"> <svg width="${size}" height="${size}">
<circle cx="${size/2}" cy="${size/2}" r="${r}" stroke="${track}" stroke-width="${stroke}" fill="none"/> <circle cx="${size/2}" cy="${size/2}" r="${r}" stroke="${track}" stroke-width="${stroke}" fill="none"/>
<circle cx="${size/2}" cy="${size/2}" r="${r}" stroke="${color}" stroke-width="${stroke}" fill="none" <circle cx="${size/2}" cy="${size/2}" r="${r}" stroke="${color}" stroke-width="${stroke}" fill="none" stroke-dasharray="${c}" stroke-dashoffset="${off}" stroke-linecap="round" style="transition:stroke-dashoffset .3s"/>
stroke-dasharray="${c}" stroke-dashoffset="${off}" stroke-linecap="round" style="transition:stroke-dashoffset .3s"/> </svg><div class="timer-num">${num}</div></div>`;
</svg>
<div class="timer-num">${num}</div></div>`;
} }
/* ---- Блок пациента ---- */
function patientBlock(c){ function patientBlock(c){
return ` return `<div class="patient">
<div class="patient">
<div class="patient-top"> <div class="patient-top">
<div class="patient-avatar" id="pAvatar">${c.patient.avatar}</div> <div class="patient-avatar" id="pAvatar">${c.patient.avatar}</div>
<div class="patient-info"> <div class="patient-info">
@ -661,7 +877,6 @@ function patientBlock(c){
<div class="complaint">«${c.complaint}»</div> <div class="complaint">«${c.complaint}»</div>
</div>`; </div>`;
} }
function vitalsHTML(v){ function vitalsHTML(v){
let extra=""; let extra="";
if(v.temp) extra=`<div class="vital v-temp"><b>${v.temp}</b><span>Температура</span></div>`; if(v.temp) extra=`<div class="vital v-temp"><b>${v.temp}</b><span>Температура</span></div>`;
@ -670,47 +885,35 @@ function vitalsHTML(v){
<div class="vital v-bp"><b>${v.bp}</b><span>АД</span></div> <div class="vital v-bp"><b>${v.bp}</b><span>АД</span></div>
<div class="vital v-rr"><b>${v.rr}</b><span>ЧДД</span></div> <div class="vital v-rr"><b>${v.rr}</b><span>ЧДД</span></div>
<div class="vital v-spo"><b>${v.spo2}</b><span>SpO₂</span></div> <div class="vital v-spo"><b>${v.spo2}</b><span>SpO₂</span></div>
${extra} ${extra}</div>`;
</div>`;
} }
function bindSpeak(c, root){ function bindSpeak(c, root){
const btn=root.querySelector("#speakBtn"); const btn=root.querySelector("#speakBtn"), av=root.querySelector("#pAvatar");
const av=root.querySelector("#pAvatar");
if(btn) btn.addEventListener("click",()=>speakPatient(c.complaint, c.patient.voice, btn, av)); if(btn) btn.addEventListener("click",()=>speakPatient(c.complaint, c.patient.voice, btn, av));
} }
/* ---- Шаг 0: Пациент ---- */
function renderPatient(){ function renderPatient(){
const c=curCase(); const c=curCase();
examBody.innerHTML=` examBody.innerHTML=`<div class="exam-wrap">
<div class="exam-wrap">
${patientBlock(c)} ${patientBlock(c)}
<details class="acc" open> <details class="acc" open><summary>📋 Анамнез</summary><div class="acc-body"><ul>${c.anamnesis.map(a=>`<li>${a}</li>`).join("")}</ul></div></details>
<summary>📋 Анамнез</summary> <details class="acc" open><summary>🩺 Объективный осмотр</summary><div class="acc-body">
<div class="acc-body"><ul>${c.anamnesis.map(a=>`<li>${a}</li>`).join("")}</ul></div>
</details>
<details class="acc" open>
<summary>🩺 Объективный осмотр</summary>
<div class="acc-body">
${vitalsHTML(c.objective.vitals)} ${vitalsHTML(c.objective.vitals)}
<h4>Общий осмотр</h4><p>${c.objective.exam.general}</p> <h4>Общий осмотр</h4><p>${c.objective.exam.general}</p>
<h4>Сердечно-сосудистая система</h4><p>${c.objective.exam.heart}</p> <h4>Сердечно-сосудистая система</h4><p>${c.objective.exam.heart}</p>
<h4>Дыхательная система</h4><p>${c.objective.exam.lungs}</p> <h4>Дыхательная система</h4><p>${c.objective.exam.lungs}</p>
<h4>Прочее</h4><p>${c.objective.exam.other}</p> <h4>Прочее</h4><p>${c.objective.exam.other}</p>
</div> </div></details>
</details>
<div class="step-foot"> <div class="step-foot">
<span class="score-chip">Знакомство с пациентом</span> <span class="score-chip">Знакомство с пациентом</span>
<button class="btn btn-primary" id="goNext">Начать решение →</button> <button class="btn btn-primary" id="goNext">Начать решение →</button>
</div> </div>
</div>`; </div>`;
bindSpeak(c, examBody); bindSpeak(c, examBody);
examBody.querySelector("#goNext").onclick=()=>{ state.stage=1; renderStageTrack(); renderMulti("investigations"); }; $("goNext").onclick=()=>{ state.stage=1; renderStageTrack(); renderMulti("investigations"); };
examBody.scrollTop=0; examBody.scrollTop=0;
} }
/* ---- Универсальный шаг множественного выбора ---- */
const MULTI_CFG={ const MULTI_CFG={
investigations:{tag:"Шаг 1 из 4", title:"Назначьте обследования", sub:"Выберите необходимые исследования. Не назначайте лишнее — за ошибки снижается балл.", btn:"Подтвердить назначения"}, investigations:{tag:"Шаг 1 из 4", title:"Назначьте обследования", sub:"Выберите необходимые исследования. Не назначайте лишнее — за ошибки снижается балл.", btn:"Подтвердить назначения"},
medications:{tag:"Шаг 2 из 4", title:"Назначьте лечение", sub:"Выберите препараты из перечня. Избегайте противопоказанных и неэффективных.", btn:"Подтвердить лечение"}, medications:{tag:"Шаг 2 из 4", title:"Назначьте лечение", sub:"Выберите препараты из перечня. Избегайте противопоказанных и неэффективных.", btn:"Подтвердить лечение"},
@ -723,13 +926,10 @@ function renderMulti(kind){
const items = kind==="investigations"?c.investigations : kind==="medications"?c.medications : c.emergency.actions; const items = kind==="investigations"?c.investigations : kind==="medications"?c.medications : c.emergency.actions;
const ans=state.answers[kind]; const ans=state.answers[kind];
const submitted = kind==="investigations"?state.answers.submitted.i : kind==="medications"?state.answers.submitted.m : state.answers.submitted.e; const submitted = kind==="investigations"?state.answers.submitted.i : kind==="medications"?state.answers.submitted.m : state.answers.submitted.e;
const isRadio = false;
let emergencyTop=""; let emergencyTop="";
if(kind==="emergency" && !submitted) emergencyTop=`<div class="timer-wrap" id="timerWrap"></div>`; if(kind==="emergency" && !submitted) emergencyTop=`<div class="timer-wrap" id="timerWrap"></div>`;
examBody.innerHTML=` examBody.innerHTML=`<div class="exam-wrap">
<div class="exam-wrap">
<div class="step-head"> <div class="step-head">
<span class="step-tag">${cfg.tag}</span> <span class="step-tag">${cfg.tag}</span>
<h3>${cfg.title}</h3> <h3>${cfg.title}</h3>
@ -739,7 +939,7 @@ function renderMulti(kind){
<div class="opt-list" id="optList"> <div class="opt-list" id="optList">
${items.map((it,i)=>{ ${items.map((it,i)=>{
const checked=ans.has(i)?"checked":""; const checked=ans.has(i)?"checked":"";
return `<label class="opt ${isRadio?"is-radio":""}" data-i="${i}"> return `<label class="opt" data-i="${i}">
<input type="checkbox" ${checked} ${submitted?"disabled":""}> <input type="checkbox" ${checked} ${submitted?"disabled":""}>
<span class="opt-box"></span> <span class="opt-box"></span>
<span class="opt-text">${it.t}</span> <span class="opt-text">${it.t}</span>
@ -773,41 +973,31 @@ function renderMulti(kind){
actBtn.onclick=()=>{ actBtn.onclick=()=>{
if(kind==="investigations") state.answers.submitted.i=true; if(kind==="investigations") state.answers.submitted.i=true;
else if(kind==="medications") state.answers.submitted.m=true; else if(kind==="medications") state.answers.submitted.m=true;
else { state.answers.submitted.e=true; stopTimer(); } else { state.answers.submitted.e=true; state.emergencyManual=true; stopTimer(); }
renderMulti(kind); renderMulti(kind);
if(kind==="emergency"){} // таймер уже не нужен
}; };
} }
if(kind==="emergency" && !submitted) startTimer(c);
if(kind==="emergency" && !submitted){ startTimer(c); }
if(kind==="emergency" && submitted){ /* таймер снят */ }
examBody.scrollTop=0; examBody.scrollTop=0;
} }
/* ---- Подсветка результата множественного выбора ---- */
function highlightMulti(kind){ function highlightMulti(kind){
const c=curCase(); const c=curCase();
const items = kind==="investigations"?c.investigations : kind==="medications"?c.medications : c.emergency.actions; const items = kind==="investigations"?c.investigations : kind==="medications"?c.medications : c.emergency.actions;
const ans=state.answers[kind]; const ans=state.answers[kind];
const labels=examBody.querySelectorAll(".opt"); examBody.querySelectorAll(".opt").forEach(lbl=>{
labels.forEach(lbl=>{ const i=+lbl.dataset.i, it=items[i], got=ans.has(i);
const i=+lbl.dataset.i; const it=items[i]; const got=ans.has(i);
if(it.n&&got){ lbl.classList.add("correct"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark good">верно</span>`); } if(it.n&&got){ lbl.classList.add("correct"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark good">верно</span>`); }
else if(!it.n&&got){ lbl.classList.add("wrong-pick"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark bad">лишнее</span>`); } else if(!it.n&&got){ lbl.classList.add("wrong-pick"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark bad">лишнее</span>`); }
else if(it.n&&!got){ lbl.classList.add("missed"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark warn">пропущено</span>`); } else if(it.n&&!got){ lbl.classList.add("missed"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark warn">пропущено</span>`); }
}); });
const sc=multiScore(items,ans); const ss=examBody.querySelector("#stepScore"); if(ss) ss.textContent=multiScore(items,ans)+"%";
const ss=examBody.querySelector("#stepScore");
if(ss) ss.textContent=sc+"%";
} }
/* ---- Шаг 3: Диагноз ---- */
function renderDiagnosis(){ function renderDiagnosis(){
const c=curCase(); const c=curCase();
const submitted=state.answers.submitted.d; const submitted=state.answers.submitted.d;
const ans=state.answers.diagnosis; examBody.innerHTML=`<div class="exam-wrap">
examBody.innerHTML=`
<div class="exam-wrap">
<div class="step-head"> <div class="step-head">
<span class="step-tag">Шаг 3 из 4</span> <span class="step-tag">Шаг 3 из 4</span>
<h3>Поставьте диагноз</h3> <h3>Поставьте диагноз</h3>
@ -815,7 +1005,7 @@ function renderDiagnosis(){
</div> </div>
<div class="opt-list" id="optList"> <div class="opt-list" id="optList">
${c.diagnosis.options.map((o,i)=>{ ${c.diagnosis.options.map((o,i)=>{
const checked=ans===i?"checked":""; const checked=state.answers.diagnosis===i?"checked":"";
return `<label class="opt is-radio" data-i="${i}"> return `<label class="opt is-radio" data-i="${i}">
<input type="radio" name="dx" ${checked} ${submitted?"disabled":""}> <input type="radio" name="dx" ${checked} ${submitted?"disabled":""}>
<span class="opt-box"></span> <span class="opt-box"></span>
@ -828,7 +1018,6 @@ function renderDiagnosis(){
<button class="btn btn-primary" id="actBtn">${submitted?"Следующий шаг →":"Подтвердить диагноз"}</button> <button class="btn btn-primary" id="actBtn">${submitted?"Следующий шаг →":"Подтвердить диагноз"}</button>
</div> </div>
</div>`; </div>`;
const optList=examBody.querySelector("#optList"); const optList=examBody.querySelector("#optList");
optList.addEventListener("click",e=>{ optList.addEventListener("click",e=>{
if(submitted) return; if(submitted) return;
@ -836,7 +1025,6 @@ function renderDiagnosis(){
state.answers.diagnosis=+lbl.dataset.i; state.answers.diagnosis=+lbl.dataset.i;
optList.querySelectorAll("input").forEach((inp,ii)=>inp.checked=ii===state.answers.diagnosis); optList.querySelectorAll("input").forEach((inp,ii)=>inp.checked=ii===state.answers.diagnosis);
}); });
const actBtn=examBody.querySelector("#actBtn"); const actBtn=examBody.querySelector("#actBtn");
if(submitted){ if(submitted){
highlightDiagnosis(); highlightDiagnosis();
@ -846,52 +1034,34 @@ function renderDiagnosis(){
} }
examBody.scrollTop=0; examBody.scrollTop=0;
} }
function highlightDiagnosis(){ function highlightDiagnosis(){
const c=curCase(); const c=curCase();
const labels=examBody.querySelectorAll(".opt"); examBody.querySelectorAll(".opt").forEach(lbl=>{
labels.forEach(lbl=>{ const i=+lbl.dataset.i, o=c.diagnosis.options[i];
const i=+lbl.dataset.i; const o=c.diagnosis.options[i];
if(o.c){ lbl.classList.add("correct"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark good">верный диагноз</span>`); } if(o.c){ lbl.classList.add("correct"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark good">верный диагноз</span>`); }
else if(i===state.answers.diagnosis){ lbl.classList.add("wrong-pick"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark bad">неверно</span>`); } else if(i===state.answers.diagnosis){ lbl.classList.add("wrong-pick"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`<span class="opt-mark bad">неверно</span>`); }
}); });
const sc=state.answers.diagnosis!==null&&c.diagnosis.options[state.answers.diagnosis].c?100:0; const sc=state.answers.diagnosis!==null&&c.diagnosis.options[state.answers.diagnosis].c?100:0;
const ss=examBody.querySelector("#stepScore"); if(ss) ss.textContent=sc+"%"; const ss=examBody.querySelector("#stepScore"); if(ss) ss.textContent=sc+"%";
} }
function flashChip(){ function flashChip(){
const chip=examBody.querySelector("#stepChip"); const chip=examBody.querySelector("#stepChip"); if(!chip) return;
if(!chip) return; chip.style.background="var(--red-soft)"; chip.style.color="var(--red)";
chip.style.background="var(--red-50)"; chip.style.color="var(--red)";
setTimeout(()=>{ chip.style.background=""; chip.style.color=""; },700); setTimeout(()=>{ chip.style.background=""; chip.style.color=""; },700);
} }
/* ---- Таймер экстренной помощи ---- */
function startTimer(c){ function startTimer(c){
const total=c.emergency.time||60; const total=c.emergency.time||60; let left=total;
let left=total; const tw=examBody.querySelector("#timerWrap"); if(!tw) return;
const tw=examBody.querySelector("#timerWrap");
if(!tw) return;
function tick(){ function tick(){
state.emergencyLeft=left;
const pct=left/total*100; const pct=left/total*100;
const color = left<=10 ? "var(--red)" : "var(--cyan)"; const color=left<=10?"var(--red)":"var(--gold)";
const danger=left<=10?' <span class="danger">осталось мало времени!</span>':""; const danger=left<=10?' <span class="danger">осталось мало времени!</span>':"";
tw.innerHTML=` tw.innerHTML=`${ring(pct,72,7,color,"rgba(255,255,255,.15)",left)}
${ring(pct,74,7,color,"rgba(255,255,255,.15)",left)} <div class="timer-info"><h4>⏱ Экстренная помощь</h4><p>Отмечайте действия. Время пошло.${danger}</p>
<div class="timer-info"> <div class="timer-bar"><i class="${left<=10?'low':''}" style="width:${pct}%"></i></div></div>`;
<h4>⏱ Экстренная помощь</h4> if(left<=0){ stopTimer(); if(!state.answers.submitted.e){ state.answers.submitted.e=true; state.emergencyManual=false; renderMulti("emergency"); } return; }
<p>Отмечайте действия. Время пошло.${danger}</p>
<div class="timer-bar"><i class="${left<=10?'low':''}" style="width:${pct}%"></i></div>
</div>`;
if(left<=0){
stopTimer();
if(!state.answers.submitted.e){
state.answers.submitted.e=true;
state.emergencyAuto=true;
renderMulti("emergency");
}
return;
}
left--; left--;
} }
tick(); tick();
@ -899,7 +1069,6 @@ function startTimer(c){
} }
function stopTimer(){ if(timerHandle){ clearInterval(timerHandle); timerHandle=null; } } function stopTimer(){ if(timerHandle){ clearInterval(timerHandle); timerHandle=null; } }
/* ---- Подсчёт баллов ---- */
function multiScore(items,picked){ function multiScore(items,picked){
let tp=0,tn=0,fp=0,fn=0; let tp=0,tn=0,fp=0,fn=0;
items.forEach((it,i)=>{ const need=it.n, got=picked.has(i); items.forEach((it,i)=>{ const need=it.n, got=picked.has(i);
@ -917,26 +1086,51 @@ function computeCaseScore(c){
return s; return s;
} }
/* ---- Результат кейса ---- */ function breakRow(name,val,color){
return `<div class="bd-row"><div class="bd-name">${name}</div>
<div class="bd-track"><i style="width:${val}%;background:${color}"></i></div>
<div class="bd-val">${val}%</div></div>`;
}
function renderCaseResult(){ function renderCaseResult(){
const c=curCase(); const c=curCase();
const sc=computeCaseScore(c); const sc=computeCaseScore(c);
state.caseScores.push({id:c.id, title:c.title, theme:c.theme, themeLabel:c.themeLabel, badge:c.badge, score:sc.total, breakdown:sc}); const meta={
const grade=gradeFor(sc.total); dxCorrect:state.answers.diagnosis!==null&&c.diagnosis.options[state.answers.diagnosis].c,
const col=colorFor(sc.total); perfectDx:sc.diagnosis===100,
examBody.innerHTML=` noErrors:countFP(c.investigations,state.answers.investigations)===0&&countFP(c.medications,state.answers.medications)===0&&countFP(c.emergency.actions,state.answers.emergency)===0,
<div class="exam-wrap"> fast:state.emergencyManual&&state.emergencyLeft>30
};
// награды
const prevLevel=levelInfo(profile.xp).idx;
const xpGain=awardXp(c, sc.total);
recordCase(c, sc.total, meta);
const newAchv=checkAchievements();
const newLevel=levelInfo(profile.xp).idx;
const stars=starsFor(sc.total);
state.caseScores.push({id:c.id,title:c.title,theme:c.theme,themeLabel:c.themeLabel,badge:c.badge,score:sc.total});
if(newLevel>prevLevel){ const li=levelInfo(profile.xp); toast("lvl","Новый уровень!",`${li.cur.name} — уровень ${li.cur.lvl}`); }
newAchv.forEach(a=>toast("achv","Достижение!",a.name));
const grade=gradeFor(sc.total), col=colorFor(sc.total);
const starsHTML=[0,1,2].map(i=>i<stars?"★":`<span class="empty">★</span>`).join("");
examBody.innerHTML=`<div class="exam-wrap">
<div class="result"> <div class="result">
<div class="result-head"> <div class="result-head">
<div class="score-ring">${ring(sc.total,150,12,col,"var(--gray-100)",`<b>${sc.total}%</b><span>оценка за кейс</span>`)}</div> <div class="score-ring">${ring(sc.total,146,12,col,"var(--gray-100)",`<b>${sc.total}%</b><span>оценка за кейс</span>`)}</div>
<h3>${grade.title}</h3> <h3>${grade.title}</h3>
<div class="verdict">${grade.text}</div> <div class="verdict">${grade.text}</div>
</div> </div>
<div class="reward-row">
<div class="reward"><div class="r-ico">⭐</div><div class="r-lbl">Звёзды</div><div class="stars-earned">${starsHTML}</div></div>
<div class="reward"><div class="r-ico">✨</div><div class="r-lbl">Опыт</div><div class="r-val">+${xpGain} XP</div></div>
${newAchv.length?`<div class="reward"><div class="r-ico">🏅</div><div class="r-lbl">Награды</div><div class="r-val">${newAchv.map(a=>a.icon).join(" ")}</div></div>`:""}
</div>
<div class="breakdown"> <div class="breakdown">
${breakRow("Обследования",sc.investigations,"var(--blue)")} ${breakRow("Обследования",sc.investigations,"var(--burgundy)")}
${breakRow("Лечение",sc.medications,"var(--purple)")} ${breakRow("Лечение",sc.medications,"var(--teal)")}
${breakRow("Диагноз",sc.diagnosis,"var(--cyan)")} ${breakRow("Диагноз",sc.diagnosis,"var(--gold)")}
${breakRow("Экстренная помощь",sc.emergency,"var(--red)")} ${breakRow("Экстренная помощь",sc.emergency,"var(--rust)")}
</div> </div>
<div class="review"> <div class="review">
<h4>📝 Правильный диагноз</h4> <h4>📝 Правильный диагноз</h4>
@ -954,20 +1148,12 @@ function renderCaseResult(){
<button class="btn btn-primary" id="actBtn">${nextLabel()}</button> <button class="btn btn-primary" id="actBtn">${nextLabel()}</button>
</div> </div>
</div>`; </div>`;
examBody.querySelector("#actBtn").onclick=nextAfterCase; $("actBtn").onclick=nextAfterCase;
examBody.scrollTop=0; examBody.scrollTop=0;
} }
function breakRow(name,val,color){
return `<div class="bd-row">
<div class="bd-name">${name}</div>
<div class="bd-track"><i style="width:${val}%;background:${color}"></i></div>
<div class="bd-val">${val}%</div>
</div>`;
}
function nextLabel(){ function nextLabel(){
if(state.mode==="single") return "Завершить"; if(state.mode==="single") return "Готово";
if(state.qIdx<state.queue.length-1) return "Следующий кейс →"; if(state.qIdx<state.queue.length-1) return "Следующий кейс →";
return "Итог экзамена →"; return "Итог экзамена →";
} }
@ -984,36 +1170,32 @@ function gradeFor(pct){
if(pct>=55) return {title:"Удовлетворительно",text:"Базовые навыки есть, но много ошибок — повторите тему."}; if(pct>=55) return {title:"Удовлетворительно",text:"Базовые навыки есть, но много ошибок — повторите тему."};
return {title:"Неудовлетворительно",text:"Алгоритмы требуют серьёзной проработки."}; return {title:"Неудовлетворительно",text:"Алгоритмы требуют серьёзной проработки."};
} }
function colorFor(pct){ function colorFor(pct){ return pct>=85?"var(--green)":pct>=70?"var(--teal)":pct>=55?"var(--amber)":"var(--red)"; }
if(pct>=85) return "var(--green)";
if(pct>=70) return "var(--cyan)";
if(pct>=55) return "var(--amber)";
return "var(--red)";
}
function gradeClass(pct){ return pct>=85?"g5":pct>=70?"g4":pct>=55?"g3":"g2"; } function gradeClass(pct){ return pct>=85?"g5":pct>=70?"g4":pct>=55?"g3":"g2"; }
/* ---- Итоговый экран экзамена ---- */
function renderFinal(){ function renderFinal(){
stopTimer(); stopTimer(); stopSpeak();
const scores=state.caseScores; const scores=state.caseScores;
const avg=Math.round(scores.reduce((a,s)=>a+s.score,0)/scores.length); const avg=Math.round(scores.reduce((a,s)=>a+s.score,0)/scores.length);
const col=colorFor(avg); const col=colorFor(avg), grade=gradeFor(avg);
const grade=gradeFor(avg); // запись в рейтинг
// по темам results.push({name:profile.name||"Гость", avatar:profile.avatar, score:avg, date:new Date().toLocaleDateString("ru-RU")});
if(results.length>50) results=results.slice(results.length-50);
save(STORE.results,results);
const themes={}; const themes={};
scores.forEach(s=>{ (themes[s.theme]=themes[s.theme]||[]).push(s.score); }); scores.forEach(s=>{ (themes[s.theme]=themes[s.theme]||[]).push(s.score); });
const themeRows=Object.entries(themes).map(([k,arr])=>{ const themeRows=Object.entries(themes).map(([k,arr])=>{
const t=CASES.find(c=>c.theme===k); const t=CASES.find(c=>c.theme===k);
return `<div class="ts"><b style="color:${k==="aks"?"var(--red)":k==="odn"?"var(--blue)":"var(--orange)"}">${Math.round(arr.reduce((a,b)=>a+b,0)/arr.length)}%</b><span>${t.themeLabel}</span></div>`; const col=k==="aks"?"var(--burgundy)":k==="odn"?"var(--teal)":"var(--rust)";
return `<div class="ts"><b style="color:${col}">${Math.round(arr.reduce((a,b)=>a+b,0)/arr.length)}%</b><span>${t.themeLabel}</span></div>`;
}).join(""); }).join("");
examBody.innerHTML=` examBody.innerHTML=`<div class="exam-wrap">
<div class="exam-wrap">
<div class="final"> <div class="final">
<div class="final-score">${ring(avg,180,14,col,"var(--gray-100)",`<b>${avg}%</b>`)}</div> <div class="final-score">${ring(avg,174,14,col,"var(--gray-100)",`<b>${avg}%</b>`)}</div>
<h2>Итог экзамена</h2> <h2>Итог экзамена</h2>
<div class="grade ${gradeClass(avg)}">${grade.title}</div> <div class="grade ${gradeClass(avg)}">${grade.title}</div>
<p class="sub">${grade.text} Вы прошли ${scores.length} из ${state.queue.length} кейсов.</p> <p class="sub">${grade.text} Вы прошли ${scores.length} кейсов. Результат добавлен в рейтинг.</p>
<div class="theme-summary">${themeRows}</div> <div class="theme-summary">${themeRows}</div>
<div class="final-cases"> <div class="final-cases">
${scores.map((s,i)=>`<div class="fc-row"> ${scores.map((s,i)=>`<div class="fc-row">
@ -1028,19 +1210,19 @@ function renderFinal(){
</div> </div>
</div> </div>
</div>`; </div>`;
examBody.querySelector("#again").onclick=()=>{ startExam("full"); }; $("again").onclick=()=>{ startExam("full"); };
examBody.querySelector("#closeFin").onclick=closeExam; $("closeFin").onclick=closeExam;
examBody.scrollTop=0; examBody.scrollTop=0;
} }
/* ---- Кнопки запуска экзамена ---- */ /* ---- обработчики ---- */
document.getElementById("startFullExam").addEventListener("click",()=>startExam("full")); $("filters").addEventListener("click",e=>{ const b=e.target.closest(".filter"); if(!b) return; setFilter(b.dataset.filter); });
document.getElementById("startFullExam2").addEventListener("click",()=>startExam("full")); $("heroStart").addEventListener("click",()=>document.getElementById("map").scrollIntoView({behavior:"smooth"}));
document.getElementById("examExit").addEventListener("click",()=>{ $("heroFull").addEventListener("click",()=>startExam("full"));
if(confirm("Выйти из экзамена? Текущий прогресс будет потерян.")) closeExam(); $("startFullExam2").addEventListener("click",()=>startExam("full"));
}); $("examExit").addEventListener("click",()=>{ if(confirm("Выйти из экзамена? Прогресс кейса не сохранится.")) closeExam(); });
document.addEventListener("keydown",e=>{ if(e.key==="Escape"&&!exam.hidden){ if(confirm("Выйти из экзамена?")) closeExam(); } }); document.addEventListener("keydown",e=>{ if(e.key==="Escape"&&!exam.hidden){ if(confirm("Выйти из экзамена?")) closeExam(); } });
/* ---- старт ---- */ /* ---- старт ---- */
renderCards(); refreshAll();
if(!profile.name){ /* мягко: ничего не навязываем */ }

104
index.html
View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Неотложка · Экзамен для студентов-медиков</title> <title>МедИгра · Неотложка — тренажёр для медиков</title>
<meta name="description" content="Интерактивный экзамен: клинические кейсы по неотложной помощи с говорящими пациентами. Назначьте обследования, лечение, поставьте диагноз и окажите экстренную помощь на время."> <meta name="description" content="Игровой тренажёр клинических кейсов по неотложной помощи: говорящие пациенты, уровни, опыт, достижения и рейтинг. По протоколам МЗ РК.">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
@ -12,46 +12,50 @@
</head> </head>
<body> <body>
<!-- ИГРОВАЯ ШАПКА -->
<header class="topbar">
<div class="container topbar-in">
<a class="brand" href="#top">🩺 МедИгра<span>Неотложка</span></a>
<div class="player" id="playerBar"></div>
<div class="topbar-actions">
<button class="tbtn" id="btnAchv" title="Достижения">🏅</button>
<button class="tbtn" id="btnBoard" title="Рейтинг">🏆</button>
<button class="tbtn" id="btnProfile" title="Профиль">⚙️</button>
</div>
</div>
</header>
<main id="top">
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<span class="pill">🩺 Экзамен · 6 курс · по протоколам МЗ РК</span> <span class="pill">🎮 Игровой тренажёр · 6 курс · по протоколам МЗ РК</span>
<h1>Говорящие пациенты.<br>Экзамен по неотложке.</h1> <h1>Стань профессором<br>неотложной помощи.</h1>
<p class="lead">Шесть клинических кейсов по алгоритмам клинических протоколов МЗ РК. Пациент сам рассказывает жалобы — включите звук. Вы сами назначаете обследования и лечение, ставите диагноз и оказываете экстренную помощь на время. В конце — оценка в процентах.</p> <p class="lead">Говорящие пациенты, клинические кейсы и экстренная помощь на время. Решай, копи опыт, открывай достижения и поднимайся в рейтинге — от Стажёра до Профессора.</p>
<div class="hero-actions"> <div class="hero-actions">
<a class="btn btn-primary" href="#cases">К кейсам</a> <button class="btn btn-primary" id="heroStart">▶ Начать игру</button>
<button class="btn btn-ghost" id="startFullExam">🏆 Начать полный экзамен</button> <button class="btn btn-ghost" id="heroFull">🏆 Полный экзамен</button>
</div>
<div class="hero-stats">
<div><b>6</b><span>кейсов</span></div>
<div><b>4</b><span>этапа в кейсе</span></div>
<div><b>60с</b><span>на экстренную помощь</span></div>
<div><b>%</b><span>итоговая оценка</span></div>
</div> </div>
<div class="hero-stats" id="heroStats"></div>
</div> </div>
</section> </section>
<!-- КАК ЭТО РАБОТАЕТ --> <!-- КАРТА ТЕМ -->
<section id="how" class="section section-light"> <section id="map" class="section section-light">
<div class="container"> <div class="container">
<h2 class="h2">Как устроен экзамен</h2> <h2 class="h2">Карта прохождения</h2>
<p class="sub">Каждый кейс — это 4 шага решения. За каждый шаг начисляются баллы. Чем точнее выбор, тем выше оценка.</p> <p class="sub">Три темы неотложной патологии. Открывай кейсы, зарабатывай звёзды и опыт за каждую тему.</p>
<div class="steps"> <div class="themes" id="themes"></div>
<div class="step"><div class="step-n">1</div><h3>Обследования</h3><p>Выберите необходимые исследования из списка. Не назначайте лишнее.</p></div>
<div class="step"><div class="step-n">2</div><h3>Лечение</h3><p>Назначьте препараты из перечня. Избегайте противопоказанных.</p></div>
<div class="step"><div class="step-n">3</div><h3>Диагноз</h3><p>Выберите верный диагноз из вариантов.</p></div>
<div class="step"><div class="step-n">4</div><h3>Экстренная помощь ⏱</h3><p>За 60 секунд выберите правильные действия. Время пошло!</p></div>
</div>
</div> </div>
</section> </section>
<!-- КЕЙСЫ --> <!-- КЕЙСЫ -->
<section id="cases" class="section"> <section id="cases" class="section">
<div class="container"> <div class="container">
<h2 class="h2">Клинические кейсы</h2> <h2 class="h2">Кейсы</h2>
<p class="sub">Решите кейс отдельно или пройдите весь экзамен. Карточки открывают пошаговый режим с оценкой.</p> <p class="sub">Решай кейсы по очереди или выбирай любой. За каждый — опыт, звёзды и достижения.</p>
<div class="filters" id="filters"> <div class="filters" id="filters">
<button class="filter is-active" data-filter="all">Все кейсы</button> <button class="filter is-active" data-filter="all">Все</button>
<button class="filter" data-filter="aks">ОКС / инфаркт</button> <button class="filter" data-filter="aks">ОКС / инфаркт</button>
<button class="filter" data-filter="odn">ОДН / астма / ХОБЛ</button> <button class="filter" data-filter="odn">ОДН / астма / ХОБЛ</button>
<button class="filter" data-filter="shock">Шок и травма</button> <button class="filter" data-filter="shock">Шок и травма</button>
@ -59,22 +63,41 @@
<div class="grid" id="caseGrid"></div> <div class="grid" id="caseGrid"></div>
<div class="exam-cta"> <div class="exam-cta">
<div> <div>
<h3>Готовы проверить себя целиком?</h3> <h3>Готов к большому испытанию?</h3>
<p>Полный экзамен — все 6 кейсов подряд с итоговой оценкой в процентах и разбивкой по темам.</p> <p>Полный экзамен — все 6 кейсов подряд. Результат попадёт в рейтинг игроков.</p>
</div> </div>
<button class="btn btn-primary big" id="startFullExam2">🏆 Начать полный экзамен</button> <button class="btn btn-primary big" id="startFullExam2">🏆 Полный экзамен</button>
</div> </div>
</div> </div>
</section> </section>
<!-- ДОСТИЖЕНИЯ -->
<section id="achv" class="section section-light">
<div class="container">
<h2 class="h2">Достижения</h2>
<p class="sub">Открывай бейджи за точность, скорость и мастерство. <span id="achvCount"></span></p>
<div class="achv-grid" id="achvGrid"></div>
</div>
</section>
<!-- РЕЙТИНГ -->
<section id="board" class="section">
<div class="container">
<h2 class="h2">Рейтинг игроков</h2>
<p class="sub">Топ результатов полного экзамена. Сохраняется в этом браузере.</p>
<div class="board" id="boardList"></div>
</div>
</section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p><b>Неотложка</b> — учебный экзаменационный симулятор для студентов-медиков. Алгоритмы решения основаны на клинических протоколах диагностики и лечения МЗ РК. Материалы носят обучающий характер и не заменяют первоисточники.</p> <p><b>МедИгра · Неотложка</b> — игровой тренажёр для студентов-медиков. Алгоритмы основаны на клинических протоколах диагностики и лечения МЗ РК. Материалы носят обучающий характер.</p>
</div> </div>
</footer> </footer>
</main>
<!-- ЭКЗАМЕН (полноэкранный overlay) --> <!-- ЭКЗАМЕН (overlay) -->
<div class="exam" id="exam" hidden> <div class="exam" id="exam" hidden>
<div class="exam-bar"> <div class="exam-bar">
<div class="exam-bar-l"> <div class="exam-bar-l">
@ -87,6 +110,25 @@
<div class="exam-body" id="examBody"></div> <div class="exam-body" id="examBody"></div>
</div> </div>
<!-- МОДАЛ ПРОФИЛЯ -->
<div class="modal" id="modalProfile" hidden>
<div class="modal-backdrop" data-close-p></div>
<div class="modal-card sm">
<button class="modal-close" data-close-p>✕</button>
<div class="mbody">
<h3 class="pm-title">Профиль игрока</h3>
<label class="pm-label">Ваше имя</label>
<input class="pm-input" id="profName" type="text" maxlength="20" placeholder="Например, Алиса">
<label class="pm-label">Аватар</label>
<div class="pm-avatars" id="profAvatars"></div>
<button class="btn btn-primary pm-save" id="profSave">Сохранить</button>
</div>
</div>
</div>
<!-- ТОСТЫ -->
<div class="toasts" id="toasts"></div>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>

601
style.css
View File

@ -1,26 +1,32 @@
:root{ :root{
--ink:#0F1218; --ink:#1B2430; /* графит-синий, основной тёмный */
--ink-2:#1A1F2B; --navy:#1E2A3A; /* насыщенный navy */
--cyan:#00E5FF; --navy-2:#27384C;
--cyan-50:#E8FCFF; --paper:#F4F0E8; /* кремовый фон секций */
--white:#fff; --cream:#FBF8F2;
--gray-500:#5B6573; --white:#FFFFFF;
--gray-300:#C3CAD6; --gold:#B08D57; /* приглушённое золото, акцент */
--gray-100:#F2F4F7; --gold-soft:#E9DBC4;
--red:#FF4D5E; --burgundy:#7B2D3B; /* бордо — ОКС */
--red-50:#FFF0F2; --burgundy-soft:#F1E4E6;
--blue:#3B6EF6; --teal:#2F6E6A; /* тёмно-бирюзовый — ОДН */
--blue-50:#EEF3FF; --teal-soft:#E3EEED;
--orange:#FF8A3D; --rust:#A45A2A; /* кирпичный — шок */
--orange-50:#FFF3EA; --rust-soft:#F2E7DB;
--green:#16C784; --green:#3E7D54;
--green-50:#E7FBF2; --green-soft:#E6EFE8;
--purple:#8A5BF6; --red:#9B2C2C;
--amber:#FFB020; --red-soft:#F3E3E3;
--radius:14px; --amber:#B5792A;
--radius-lg:20px; --gray-700:#3C4452;
--shadow:0 12px 40px rgba(15,18,24,.10); --gray-500:#5C6470;
--shadow-lg:0 24px 70px rgba(15,18,24,.22); --gray-300:#C9CDD4;
--gray-100:#ECE8E0;
--radius:12px;
--radius-lg:18px;
--shadow:0 10px 34px rgba(27,36,48,.10);
--shadow-lg:0 22px 60px rgba(27,36,48,.20);
--line:#E1DCD2;
} }
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
@ -31,368 +37,395 @@ body{
} }
.container{max-width:1140px;margin:0 auto;padding:0 24px} .container{max-width:1140px;margin:0 auto;padding:0 24px}
img{max-width:100%} img{max-width:100%}
h1,h2,h3{letter-spacing:-.4px}
/* ===== ИГРОВАЯ ШАПКА ===== */
.topbar{
position:sticky;top:0;z-index:50;background:rgba(251,248,242,.92);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:18px;padding:12px 24px}
.brand{font-size:19px;font-weight:800;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand span{font-size:12px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px}
.player{flex-grow:1;display:flex;align-items:center;gap:13px;min-width:0}
.player .p-ava{
width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
font-size:22px;flex-shrink:0;border:2px solid var(--gold);
}
.player .p-mid{min-width:0;flex-grow:1}
.player .p-name{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .p-lvl{font-size:11.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.3px}
.xpbar{width:min(260px,40vw);height:9px;background:var(--gray-100);border-radius:999px;overflow:hidden;flex-shrink:0}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#caa46e);border-radius:999px;transition:width .6s ease}
.xp-num{font-size:12px;font-weight:700;color:var(--gray-500);white-space:nowrap}
.topbar-actions{display:flex;gap:6px}
.tbtn{
width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);
font-size:17px;cursor:pointer;transition:.15s;display:grid;place-items:center;
}
.tbtn:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-1px)}
/* ===== HERO ===== */ /* ===== HERO ===== */
.hero{ .hero{
background:radial-gradient(120% 120% at 80% 0%, #15243a 0%, var(--ink) 60%); background:
color:var(--white);position:relative;overflow:hidden; radial-gradient(120% 120% at 85% 0%, #28384c 0%, var(--ink) 55%);
padding:96px 0 88px; color:var(--white);position:relative;overflow:hidden;padding:88px 0 80px;
} }
.hero::after{ .hero::after{
content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px; content:"";position:absolute;right:-140px;top:-140px;width:440px;height:440px;
background:radial-gradient(circle,rgba(0,229,255,.35),transparent 70%);filter:blur(8px); background:radial-gradient(circle,rgba(176,141,87,.22),transparent 70%);filter:blur(6px);
} }
.pill{ .pill{
display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan); display:inline-block;background:rgba(176,141,87,.14);color:var(--gold);
border:1px solid rgba(0,229,255,.35);padding:7px 14px;border-radius:999px; border:1px solid rgba(176,141,87,.4);padding:7px 14px;border-radius:999px;
font-size:14px;font-weight:700;letter-spacing:.2px;margin-bottom:22px; font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:22px;
} }
.hero h1{font-size:60px;font-weight:800;line-height:1.04;letter-spacing:-1px;margin-bottom:22px} .hero h1{font-size:58px;font-weight:800;line-height:1.05;margin-bottom:20px}
.lead{font-size:20px;color:#aeb8c7;max-width:680px;margin-bottom:30px} .lead{font-size:19px;color:#b9c2cf;max-width:660px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.btn{ .btn{
display:inline-flex;align-items:center;gap:8px; display:inline-flex;align-items:center;gap:8px;
padding:15px 28px;border-radius:var(--radius);font-weight:800;font-size:16px; padding:15px 28px;border-radius:var(--radius);font-weight:800;font-size:16px;
text-decoration:none;border:none;cursor:pointer;transition:.18s;font-family:inherit; text-decoration:none;border:none;cursor:pointer;transition:.18s;font-family:inherit;
} }
.btn-primary{background:var(--cyan);color:var(--ink);box-shadow:0 8px 24px rgba(0,229,255,.35)} .btn-primary{background:var(--gold);color:#fff;box-shadow:0 8px 22px rgba(176,141,87,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,229,255,.5)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(176,141,87,.45)}
.btn-primary.big{padding:18px 34px;font-size:17px} .btn-primary.big{padding:18px 34px;font-size:17px}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border:1px solid rgba(255,255,255,.2)} .btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--ink);color:#fff} .btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:#000} .btn-dark:hover{background:var(--ink)}
.hero-stats{display:flex;gap:38px;flex-wrap:wrap} .hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column} .hero-stats .hs{display:flex;flex-direction:column}
.hero-stats b{font-size:34px;color:var(--cyan);line-height:1} .hero-stats .hs b{font-size:30px;color:var(--gold);line-height:1}
.hero-stats span{font-size:14px;color:#8b95a6;margin-top:6px} .hero-stats .hs span{font-size:13px;color:#8b95a6;margin-top:6px}
/* ===== SECTIONS ===== */ /* ===== SECTIONS ===== */
.section{padding:80px 0} .section{padding:74px 0}
.section-light{background:var(--gray-100)} .section-light{background:var(--paper)}
.h2{font-size:38px;font-weight:800;letter-spacing:-.5px;margin-bottom:12px} .h2{font-size:36px;font-weight:800;margin-bottom:10px}
.sub{color:var(--gray-500);font-size:18px;max-width:700px;margin-bottom:36px} .sub{color:var(--gray-500);font-size:17px;max-width:680px;margin-bottom:32px}
/* шаги экзамена */ /* ===== КАРТА ТЕМ ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .themes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--gray-100);box-shadow:var(--shadow)} .theme{
.step-n{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--cyan); padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:pointer;transition:.18s;
display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:14px;
} }
.step h3{font-size:18px;font-weight:800;margin-bottom:6px} .theme:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step p{color:var(--gray-500);font-size:14px} .theme-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.theme-ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;flex-shrink:0}
.theme h3{font-size:19px;font-weight:800}
.theme-desc{color:var(--gray-500);font-size:14px;margin-bottom:16px}
.theme-prog{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.theme-prog .tp-track{flex-grow:1;height:8px;background:var(--gray-100);border-radius:999px;overflow:hidden}
.theme-prog .tp-track i{display:block;height:100%;border-radius:999px;transition:width .6s}
.theme-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--gray-500);font-weight:700}
.theme-stars{color:var(--gold);font-size:15px;letter-spacing:2px}
.t-aks .theme-ico{background:var(--burgundy-soft)}
.t-aks .tp-track i{background:var(--burgundy)}
.t-odn .theme-ico{background:var(--teal-soft)}
.t-odn .tp-track i{background:var(--teal)}
.t-shock .theme-ico{background:var(--rust-soft)}
.t-shock .tp-track i{background:var(--rust)}
/* фильтры */ /* ===== ФИЛЬТРЫ ===== */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px} .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter{ .filter{
background:var(--white);border:1.5px solid var(--gray-300);color:var(--ink); background:var(--white);border:1.5px solid var(--line);color:var(--ink);
padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;font-family:inherit; padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;font-family:inherit;
} }
.filter:hover{border-color:var(--ink)} .filter:hover{border-color:var(--navy)}
.filter.is-active{background:var(--ink);color:var(--white);border-color:var(--ink)} .filter.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
/* сетка кейсов */ /* ===== СЕТКА КЕЙСОВ ===== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:40px} .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:36px}
.case-card{ .case-card{
background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg); background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:26px;transition:.18s;position:relative;overflow:hidden; padding:24px;transition:.18s;position:relative;overflow:hidden;display:flex;flex-direction:column;
display:flex;flex-direction:column;
} }
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent} .case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line)}
.case-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px} .case-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.case-card.t-aks::before{background:var(--red)} .case-card.t-aks::before{background:var(--burgundy)}
.case-card.t-odn::before{background:var(--blue)} .case-card.t-odn::before{background:var(--teal)}
.case-card.t-shock::before{background:var(--orange)} .case-card.t-shock::before{background:var(--rust)}
.case-head{display:flex;align-items:center;gap:16px;margin-bottom:14px} .case-head{display:flex;align-items:center;gap:15px;margin-bottom:12px}
.case-avatar{ .case-avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--paper);flex-shrink:0}
width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:32px; .case-head h3{font-size:19px;font-weight:800;margin-bottom:2px}
background:var(--gray-100);flex-shrink:0; .case-head .case-sub{font-size:13.5px;color:var(--gray-500)}
} .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.case-head h3{font-size:20px;font-weight:800;margin-bottom:2px} .b-aks{background:var(--burgundy-soft);color:var(--burgundy)}
.case-head .case-sub{font-size:14px;color:var(--gray-500)} .b-odn{background:var(--teal-soft);color:var(--teal)}
.badge{ .b-shock{background:var(--rust-soft);color:var(--rust)}
display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800; .case-note{color:var(--gray-500);font-size:14.5px;margin-bottom:16px;flex-grow:1}
letter-spacing:.3px;text-transform:uppercase; .case-stars{color:var(--gold);font-size:16px;letter-spacing:3px;margin-bottom:8px}
} .case-stars .empty{color:var(--gray-300)}
.b-aks{background:var(--red-50);color:var(--red)} .case-best{font-size:13px;color:var(--gray-500);font-weight:700;margin-bottom:14px}
.b-odn{background:var(--blue-50);color:var(--blue)} .case-best b{color:var(--navy)}
.b-shock{background:var(--orange-50);color:var(--orange)}
.case-note{color:var(--gray-500);font-size:15px;margin-bottom:18px;flex-grow:1}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:12px} .case-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.severity{display:flex;gap:3px;align-items:center} .case-btn{background:var(--navy);color:#fff;border:none;border-radius:10px;padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s}
.sev-dot{width:9px;height:9px;border-radius:50%;background:var(--gray-300)} .case-btn:hover{background:var(--gold)}
.sev-dot.on{background:var(--red)} .done-tag{font-size:12px;font-weight:800;color:var(--green);background:var(--green-soft);padding:5px 11px;border-radius:999px}
.case-btn{
background:var(--ink);color:#fff;border:none;border-radius:10px;padding:11px 18px;
font-weight:800;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s;
}
.case-btn:hover{background:var(--cyan);color:var(--ink)}
/* CTA экзамен */ /* CTA экзамен */
.exam-cta{ .exam-cta{
background:linear-gradient(135deg,var(--ink),#16203a);color:#fff;border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--navy),#16203a);color:#fff;border-radius:var(--radius-lg);
padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; padding:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
} }
.exam-cta h3{font-size:24px;font-weight:800;margin-bottom:6px} .exam-cta h3{font-size:23px;font-weight:800;margin-bottom:6px}
.exam-cta p{color:#aeb8c7;font-size:16px} .exam-cta p{color:#b3bcc9;font-size:15.5px}
/* ===== ДОСТИЖЕНИЯ ===== */
.achv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.achv{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;text-align:center;
transition:.18s;position:relative;
}
.achv.locked{opacity:.5;filter:grayscale(.8)}
.achv:not(.locked):hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.achv-ico{font-size:36px;margin-bottom:10px;line-height:1}
.achv h4{font-size:14.5px;font-weight:800;margin-bottom:4px}
.achv p{font-size:12.5px;color:var(--gray-500);line-height:1.45}
.achv .lock{position:absolute;top:12px;right:12px;font-size:13px;color:var(--gray-300)}
/* ===== РЕЙТИНГ ===== */
.board{max-width:680px}
.board-row{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:10px}
.board-row.me{border-color:var(--gold);background:var(--gold-soft)}
.br-rank{width:34px;height:34px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--navy);flex-shrink:0}
.board-row.r1 .br-rank{background:var(--gold);color:#fff}
.board-row.r2 .br-rank{background:#9a9a9a;color:#fff}
.board-row.r3 .br-rank{background:#a8703a;color:#fff}
.br-ava{font-size:22px}
.br-name{flex-grow:1;font-weight:700;font-size:15px}
.br-name small{display:block;font-weight:600;color:var(--gray-500);font-size:12px}
.br-score{font-weight:800;font-size:17px;color:var(--navy)}
.board-empty{color:var(--gray-500);text-align:center;padding:30px;font-size:15px}
/* футер */ /* футер */
.footer{background:var(--ink);color:#8b95a6;padding:34px 0;font-size:14px} .footer{background:var(--ink);color:#8b93a0;padding:32px 0;font-size:13.5px}
.footer b{color:var(--cyan)} .footer b{color:var(--gold)}
/* ===== МОДАЛ (профиль) ===== */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,20,28,.6);backdrop-filter:blur(3px)}
.modal-card{position:relative;background:var(--white);border-radius:var(--radius-lg);width:min(460px,100%);box-shadow:var(--shadow-lg);z-index:1;overflow:hidden}
.modal-card.sm{width:min(440px,100%)}
.modal-close{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border-radius:50%;border:none;background:var(--paper);color:var(--ink);font-size:15px;cursor:pointer;display:grid;place-items:center}
.modal-close:hover{background:var(--navy);color:#fff}
.mbody{padding:30px}
.pm-title{font-size:22px;font-weight:800;margin-bottom:20px}
.pm-label{display:block;font-size:13px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.3px;margin:16px 0 8px}
.pm-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink);background:var(--cream)}
.pm-input:focus{outline:none;border-color:var(--gold)}
.pm-avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.pm-av{aspect-ratio:1;border-radius:10px;background:var(--paper);border:2px solid transparent;display:grid;place-items:center;font-size:22px;cursor:pointer}
.pm-av.sel{border-color:var(--gold);background:var(--gold-soft)}
.pm-save{margin-top:22px;width:100%;justify-content:center}
/* ===== ТОСТЫ ===== */
.toasts{position:fixed;top:78px;right:20px;z-index:300;display:flex;flex-direction:column;gap:10px;max-width:320px}
.toast{
background:var(--navy);color:#fff;border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-lg);
display:flex;gap:12px;align-items:center;animation:slideIn .35s ease;border-left:4px solid var(--gold);
}
.toast.lvl{border-left-color:var(--gold)}
.toast.achv{border-left-color:var(--green)}
.toast .t-ico{font-size:26px}
.toast .t-tx b{display:block;font-size:14px}
.toast .t-tx small{color:#b9c2cf;font-size:12.5px}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
/* ===== ЭКЗАМЕН (overlay) ===== */ /* ===== ЭКЗАМЕН (overlay) ===== */
.exam{ .exam{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;flex-direction:column;overflow:hidden}
position:fixed;inset:0;z-index:200;background:var(--gray-100);
display:flex;flex-direction:column;overflow:hidden;
}
.exam[hidden]{display:none} .exam[hidden]{display:none}
.exam-bar{ .exam-bar{background:var(--navy);color:#fff;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
background:var(--ink);color:#fff;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.exam-bar-l{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .exam-bar-l{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.exam-progress-label{font-weight:800;font-size:15px;color:var(--cyan)} .exam-progress-label{font-weight:800;font-size:14.5px;color:var(--gold)}
.exam-dots{display:flex;gap:7px} .exam-dots{display:flex;gap:7px}
.exam-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2);transition:.2s} .exam-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2);transition:.2s}
.exam-dot.done{background:var(--green)} .exam-dot.done{background:var(--green)}
.exam-dot.current{background:var(--cyan);transform:scale(1.25)} .exam-dot.current{background:var(--gold);transform:scale(1.25)}
.exam-exit{ .exam-exit{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:700}
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:700;
}
.exam-exit:hover{background:var(--red);border-color:var(--red)} .exam-exit:hover{background:var(--red);border-color:var(--red)}
.exam-stage-track{background:#fff;border-bottom:1px solid var(--line);padding:11px 28px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* трек этапов */ .stage-pill{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--gray-500);background:var(--paper)}
.exam-stage-track{ .stage-pill .sp-n{width:20px;height:20px;border-radius:50%;background:var(--gray-300);color:#fff;display:grid;place-items:center;font-size:12px}
background:#fff;border-bottom:1px solid var(--gray-100); .stage-pill.active{background:var(--navy);color:#fff}
padding:12px 28px;display:flex;gap:8px;align-items:center;flex-wrap:wrap; .stage-pill.active .sp-n{background:var(--gold);color:#fff}
} .stage-pill.done{background:var(--green-soft);color:#2c5a3c}
.stage-pill{
display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
font-size:13px;font-weight:700;color:var(--gray-500);background:var(--gray-100);
}
.stage-pill .sp-n{
width:20px;height:20px;border-radius:50%;background:var(--gray-300);color:#fff;
display:grid;place-items:center;font-size:12px;
}
.stage-pill.active{background:var(--ink);color:#fff}
.stage-pill.active .sp-n{background:var(--cyan);color:var(--ink)}
.stage-pill.done{background:var(--green-50);color:#0c6e48}
.stage-pill.done .sp-n{background:var(--green)} .stage-pill.done .sp-n{background:var(--green)}
.stage-sep{color:var(--gray-300);font-size:12px} .stage-sep{color:var(--gray-300);font-size:12px}
.exam-body{flex:1;overflow-y:auto;padding:28px 24px 56px}
/* тело */ .exam-wrap{max-width:860px;margin:0 auto}
.exam-body{flex:1;overflow-y:auto;padding:30px 28px 60px}
.exam-wrap{max-width:880px;margin:0 auto}
/* шаг пациента */ /* шаг пациента */
.patient{ .patient{background:linear-gradient(135deg,var(--navy) 0%,#16203a 100%);color:#fff;border-radius:var(--radius-lg);padding:28px;margin-bottom:18px;position:relative;overflow:hidden}
background:linear-gradient(135deg,var(--ink) 0%,#16203a 100%);color:#fff;border-radius:var(--radius-lg); .patient-top{display:flex;align-items:center;gap:18px;margin-bottom:18px}
padding:30px;margin-bottom:20px;position:relative;overflow:hidden; .patient-avatar{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:40px;flex-shrink:0;position:relative}
} .patient-avatar.is-speaking::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);animation:pulse 1.1s ease-out infinite}
.patient-top{display:flex;align-items:center;gap:18px;margin-bottom:20px} .patient-avatar.is-speaking::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(176,141,87,.4);animation:pulse 1.1s ease-out .3s infinite}
.patient-avatar{
width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.1);
display:grid;place-items:center;font-size:42px;flex-shrink:0;position:relative;
}
.patient-avatar.is-speaking::after{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:2px solid var(--cyan);animation:pulse 1.1s ease-out infinite;
}
.patient-avatar.is-speaking::before{
content:"";position:absolute;inset:-12px;border-radius:50%;
border:2px solid rgba(0,229,255,.4);animation:pulse 1.1s ease-out .3s infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.4);opacity:0}} @keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.patient-info h2{font-size:23px;font-weight:800} .patient-info h2{font-size:22px;font-weight:800}
.patient-info .meta{color:#9aa6ba;font-size:14px;margin-top:2px} .patient-info .meta{color:#9ba6b4;font-size:13.5px;margin-top:2px}
.patient-badges{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .patient-badges{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.speak-bar{background:rgba(176,141,87,.14);border:1px solid rgba(176,141,87,.4);border-radius:var(--radius);padding:15px 17px;display:flex;align-items:center;gap:13px}
.speak-bar{ .speak-ico{font-size:23px}
background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.4);border-radius:var(--radius);
padding:16px 18px;display:flex;align-items:center;gap:14px;
}
.speak-ico{font-size:24px}
.speak-text{flex-grow:1} .speak-text{flex-grow:1}
.speak-text b{display:block;font-size:15px} .speak-text b{display:block;font-size:14.5px}
.speak-text small{color:#aeb8c7;font-size:13px} .speak-text small{color:#aeb6c2;font-size:12.5px}
.speak-btn{ .speak-btn{background:var(--gold);color:#fff;border:none;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer;font-size:14px;white-space:nowrap;transition:.15s;font-family:inherit}
background:var(--cyan);color:var(--ink);border:none;border-radius:10px;
padding:11px 18px;font-weight:800;cursor:pointer;font-size:14px;white-space:nowrap;transition:.15s;font-family:inherit;
}
.speak-btn:hover{filter:brightness(1.05)} .speak-btn:hover{filter:brightness(1.05)}
.speak-btn.is-playing{background:var(--red);color:#fff} .speak-btn.is-playing{background:var(--red)}
.complaint{background:rgba(176,141,87,.12);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:16px 18px;font-size:16.5px;line-height:1.7;margin-top:16px;font-style:italic;color:#dfe5ec}
.complaint{ /* аккордеон */
background:var(--cyan-50);border-left:4px solid var(--cyan);border-radius:0 12px 12px 0; .acc{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--white)}
padding:18px 20px;font-size:17px;line-height:1.7;margin-top:18px;font-style:italic;color:#1b2740; .acc summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:800;font-size:15.5px;display:flex;align-items:center;gap:10px;background:var(--paper);user-select:none}
}
/* контекстные данные */
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.ctx-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:18px}
.ctx-card h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);font-weight:700;margin-bottom:10px}
.ctx-card ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink)}
.ctx-card li{margin-bottom:5px}
.vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.vital{border-radius:10px;padding:11px;text-align:center;color:#fff}
.vital b{display:block;font-size:21px;font-weight:800;line-height:1}
.vital span{font-size:11px;opacity:.92;display:block;margin-top:3px}
.v-hr{background:var(--red)}.v-bp{background:var(--blue)}.v-rr{background:var(--purple)}.v-spo{background:var(--green)}.v-temp{background:var(--orange);grid-column:span 4}
.ctx-full{grid-column:span 2}
/* аккордеон (details) */
.acc{border:1px solid var(--gray-100);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff}
.acc summary{
list-style:none;cursor:pointer;padding:16px 20px;font-weight:800;font-size:16px;
display:flex;align-items:center;gap:10px;background:var(--gray-100);user-select:none;
}
.acc summary::-webkit-details-marker{display:none} .acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"▾";margin-left:auto;color:var(--gray-500);transition:.2s;font-size:13px} .acc summary::after{content:"▾";margin-left:auto;color:var(--gray-500);transition:.2s;font-size:13px}
.acc[open] summary::after{transform:rotate(180deg)} .acc[open] summary::after{transform:rotate(180deg)}
.acc-body{padding:18px 20px} .acc-body{padding:16px 18px}
.acc-body h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);margin:14px 0 6px;font-weight:700} .acc-body h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);margin:12px 0 6px;font-weight:700}
.acc-body h4:first-child{margin-top:0} .acc-body h4:first-child{margin-top:0}
.acc-body p{margin-bottom:8px;font-size:14.5px} .acc-body p{margin-bottom:8px;font-size:14.5px}
.acc-body ul{margin:0;padding-left:18px;font-size:14.5px} .acc-body ul{margin:0;padding-left:18px;font-size:14.5px}
.acc-body li{margin-bottom:5px} .acc-body li{margin-bottom:5px}
/* заголовок шага */ /* витальные */
.step-head{margin-bottom:18px} .vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px;margin-bottom:6px}
.step-head .step-tag{display:inline-block;background:var(--ink);color:var(--cyan);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.3px;margin-bottom:10px} .vital{border-radius:10px;padding:11px;text-align:center;color:#fff}
.step-head h3{font-size:26px;font-weight:800;margin-bottom:6px} .vital b{display:block;font-size:20px;font-weight:800;line-height:1}
.step-head p{color:var(--gray-500);font-size:15px} .vital span{font-size:11px;opacity:.92;display:block;margin-top:3px}
.v-hr{background:var(--burgundy)}.v-bp{background:var(--navy-2)}.v-rr{background:var(--teal)}.v-spo{background:var(--green)}.v-temp{background:var(--rust);grid-column:span 4}
/* список выбора (чекбоксы) */ /* заголовок шага */
.opt-list{display:grid;gap:10px;margin-bottom:22px} .step-head{margin-bottom:16px}
.opt{ .step-head .step-tag{display:inline-block;background:var(--navy);color:var(--gold);padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.3px;margin-bottom:10px}
display:flex;align-items:flex-start;gap:13px;background:#fff;border:1.5px solid var(--gray-100); .step-head h3{font-size:25px;font-weight:800;margin-bottom:5px}
border-radius:12px;padding:15px 16px;cursor:pointer;transition:.15s;user-select:none; .step-head p{color:var(--gray-500);font-size:14.5px}
}
/* опции выбора */
.opt-list{display:grid;gap:10px;margin-bottom:20px}
.opt{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:.15s;user-select:none}
.opt:hover{border-color:var(--gray-300)} .opt:hover{border-color:var(--gray-300)}
.opt input{display:none} .opt input{display:none}
.opt-box{ .opt-box{width:23px;height:23px;border-radius:7px;border:2px solid var(--gray-300);flex-shrink:0;display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px;transition:.15s;margin-top:1px}
width:24px;height:24px;border-radius:7px;border:2px solid var(--gray-300);flex-shrink:0; .opt input:checked + .opt-box{background:var(--gold);border-color:var(--gold)}
display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px;transition:.15s;margin-top:1px;
}
.opt input:checked + .opt-box{background:var(--cyan);border-color:var(--cyan)}
.opt input:checked + .opt-box::after{content:"✓"} .opt input:checked + .opt-box::after{content:"✓"}
.opt-text{font-size:15px;line-height:1.45} .opt-text{font-size:14.5px;line-height:1.45}
.opt.is-radio .opt-box{border-radius:50%} .opt.is-radio .opt-box{border-radius:50%}
.opt.is-radio input:checked + .opt-box::after{content:""} .opt.is-radio input:checked + .opt-box::after{content:""}
.opt.correct{border-color:var(--green);background:var(--green-soft)}
/* результат проверки опций (после submit) */
.opt.correct{border-color:var(--green);background:var(--green-50)}
.opt.correct .opt-box{background:var(--green);border-color:var(--green)} .opt.correct .opt-box{background:var(--green);border-color:var(--green)}
.opt.wrong-pick{border-color:var(--red);background:var(--red-50)} .opt.wrong-pick{border-color:var(--red);background:var(--red-soft)}
.opt.wrong-pick .opt-box{background:var(--red);border-color:var(--red)} .opt.wrong-pick .opt-box{background:var(--red);border-color:var(--red)}
.opt.wrong-pick .opt-box::after{content:"✕"} .opt.wrong-pick .opt-box::after{content:"✕"}
.opt.missed{border-color:var(--amber);background:#FFF8E8;border-style:dashed} .opt.missed{border-color:var(--amber);background:#F7EEDD;border-style:dashed}
.opt-mark{margin-left:auto;font-size:13px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap} .opt-mark{margin-left:auto;font-size:12px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap}
.opt-mark.good{background:var(--green);color:#fff} .opt-mark.good{background:var(--green);color:#fff}
.opt-mark.bad{background:var(--red);color:#fff} .opt-mark.bad{background:var(--red);color:#fff}
.opt-mark.warn{background:var(--amber);color:#fff} .opt-mark.warn{background:var(--amber);color:#fff}
/* таймер */ /* таймер */
.timer-wrap{ .timer-wrap{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:24px 26px;margin-bottom:20px; .timer-ring{position:relative;width:72px;height:72px;flex-shrink:0}
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.timer-ring{position:relative;width:74px;height:74px;flex-shrink:0}
.timer-ring svg{transform:rotate(-90deg)} .timer-ring svg{transform:rotate(-90deg)}
.timer-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;color:var(--ink)} .timer-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;color:#fff}
.timer-wrap .timer-num{color:#fff;font-size:24px} .timer-wrap .timer-num{font-size:23px}
.score-ring .timer-num{font-size:40px}
.score-ring .timer-num span{font-size:12px;font-weight:600;opacity:.7;margin-top:5px}
.final-score .timer-num{font-size:54px}
.timer-info{flex-grow:1} .timer-info{flex-grow:1}
.timer-info h4{font-size:17px;font-weight:800;margin-bottom:4px} .timer-info h4{font-size:16px;font-weight:800;margin-bottom:3px}
.timer-info p{color:#aeb8c7;font-size:14px} .timer-info p{color:#aeb6c2;font-size:13.5px}
.timer-info .danger{color:var(--red);font-weight:800} .timer-info .danger{color:var(--red);font-weight:800}
.timer-bar{height:8px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden;margin-top:10px;width:100%} .timer-bar{height:8px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden;margin-top:10px;width:100%}
.timer-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width 1s linear;border-radius:999px} .timer-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#caa46e);transition:width 1s linear;border-radius:999px}
.timer-bar i.low{background:var(--red)} .timer-bar i.low{background:var(--red)}
/* футер шага / навигация */ /* футер шага */
.step-foot{ .step-foot{position:sticky;bottom:0;background:rgba(244,240,232,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:14px 0;margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:14px}
position:sticky;bottom:0;background:rgba(242,244,247,.96);backdrop-filter:blur(6px); .step-foot .score-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:800;font-size:13.5px}
border-top:1px solid var(--gray-100);padding:16px 0;margin-top:8px; .step-foot .score-chip b{color:var(--navy)}
display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.step-foot .score-chip{
background:#fff;border:1px solid var(--gray-100);border-radius:999px;padding:8px 16px;
font-weight:800;font-size:14px;
}
.step-foot .score-chip b{color:var(--ink)}
/* результат кейса */ /* результат кейса */
.result{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:30px} .result{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.result-head{text-align:center;margin-bottom:24px} .result-head{text-align:center;margin-bottom:22px}
.score-ring{position:relative;width:150px;height:150px;margin:0 auto 16px} .score-ring{position:relative;width:146px;height:146px;margin:0 auto 14px}
.score-ring svg{transform:rotate(-90deg)} .score-ring svg{transform:rotate(-90deg)}
.result-head h3{font-size:22px;font-weight:800} .score-ring .timer-num{color:var(--ink);font-size:38px}
.verdict{font-size:15px;color:var(--gray-500);margin-top:4px} .score-ring .timer-num span{font-size:12px;font-weight:600;color:var(--gray-500);margin-top:5px}
.result-head h3{font-size:21px;font-weight:800}
.breakdown{display:grid;gap:10px;margin:22px 0} .verdict{font-size:14.5px;color:var(--gray-500);margin-top:3px}
.reward-row{display:flex;justify-content:center;gap:18px;margin:18px 0;flex-wrap:wrap}
.reward{display:flex;flex-direction:column;align-items:center;gap:4px}
.reward .r-ico{font-size:28px}
.reward .r-lbl{font-size:12px;font-weight:800;color:var(--gray-500);text-transform:uppercase;letter-spacing:.3px}
.reward .r-val{font-size:18px;font-weight:800;color:var(--navy)}
.stars-earned{color:var(--gold);font-size:26px;letter-spacing:4px}
.stars-earned .empty{color:var(--gray-300)}
.breakdown{display:grid;gap:9px;margin:18px 0}
.bd-row{display:flex;align-items:center;gap:14px} .bd-row{display:flex;align-items:center;gap:14px}
.bd-name{width:170px;font-size:14px;font-weight:700;flex-shrink:0} .bd-name{width:170px;font-size:13.5px;font-weight:700;flex-shrink:0}
.bd-track{flex-grow:1;height:12px;background:var(--gray-100);border-radius:999px;overflow:hidden} .bd-track{flex-grow:1;height:11px;background:var(--paper);border-radius:999px;overflow:hidden}
.bd-track i{display:block;height:100%;border-radius:999px;transition:width .8s ease} .bd-track i{display:block;height:100%;border-radius:999px;transition:width .8s ease}
.bd-val{width:54px;text-align:right;font-weight:800;font-size:14px} .bd-val{width:50px;text-align:right;font-weight:800;font-size:13.5px}
.review{margin-top:6px}
/* разбор */ .review h4{font-size:14.5px;font-weight:800;margin:16px 0 9px;display:flex;align-items:center;gap:8px}
.review{margin-top:8px} .review-block{background:var(--paper);border-radius:12px;padding:13px 15px;margin-bottom:8px;font-size:13.5px;line-height:1.55}
.review h4{font-size:15px;font-weight:800;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.review-block{
background:var(--gray-100);border-radius:12px;padding:14px 16px;margin-bottom:8px;font-size:14px;line-height:1.55;
}
.review-block b{display:block;margin-bottom:3px} .review-block b{display:block;margin-bottom:3px}
.keypoints{display:grid;gap:8px;margin-top:6px} .keypoints{display:grid;gap:8px;margin-top:6px}
.kp{display:flex;gap:10px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.5} .kp{display:flex;gap:10px;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5}
.kp-good{background:var(--green-50);color:#0c6e48} .kp-good{background:var(--green-soft);color:#2c5a3c}
.kp-bad{background:var(--red-50);color:#a01f2e} .kp-bad{background:var(--red-soft);color:#7a2424}
.kp-ico{font-size:16px;flex-shrink:0} .kp-ico{font-size:16px;flex-shrink:0}
/* итоговый экран экзамена */ /* итоговый экран экзамена */
.final{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:36px;max-width:760px;margin:0 auto;text-align:center} .final{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;max-width:740px;margin:0 auto;text-align:center}
.final-score{position:relative;width:180px;height:180px;margin:0 auto 20px} .final-score{position:relative;width:174px;height:174px;margin:0 auto 18px}
.final-score svg{transform:rotate(-90deg)} .final-score svg{transform:rotate(-90deg)}
.final h2{font-size:28px;font-weight:800;margin-bottom:6px} .final-score .timer-num{color:var(--ink);font-size:50px}
.final .grade{font-size:18px;font-weight:800;margin-bottom:6px} .final h2{font-size:27px;font-weight:800;margin-bottom:5px}
.final .grade{font-size:17px;font-weight:800;margin-bottom:5px}
.final .grade.g5{color:var(--green)} .final .grade.g5{color:var(--green)}
.final .grade.g4{color:var(--cyan)} .final .grade.g4{color:var(--teal)}
.final .grade.g3{color:var(--amber)} .final .grade.g3{color:var(--amber)}
.final .grade.g2{color:var(--red)} .final .grade.g2{color:var(--red)}
.final p.sub{color:var(--gray-500);font-size:15px;margin-bottom:22px} .final p.sub{color:var(--gray-500);font-size:14.5px;margin-bottom:20px}
.final-cases{display:grid;gap:8px;text-align:left;margin-bottom:24px} .final-cases{display:grid;gap:7px;text-align:left;margin-bottom:20px}
.fc-row{display:flex;align-items:center;gap:12px;background:var(--gray-100);border-radius:10px;padding:10px 14px;font-size:14px} .fc-row{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:10px;padding:9px 13px;font-size:13.5px}
.fc-row .fc-badge{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:800} .fc-row .fc-badge{font-size:10.5px;padding:3px 8px;border-radius:999px;font-weight:800}
.fc-row .fc-name{flex-grow:1;font-weight:700} .fc-row .fc-name{flex-grow:1;font-weight:700}
.fc-row .fc-score{font-weight:800;font-size:15px} .fc-row .fc-score{font-weight:800;font-size:14.5px}
.theme-summary{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px} .theme-summary{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.ts{background:var(--gray-100);border-radius:10px;padding:10px 16px;text-align:center;min-width:120px} .ts{background:var(--paper);border-radius:10px;padding:10px 16px;text-align:center;min-width:118px}
.ts b{display:block;font-size:22px;font-weight:800} .ts b{display:block;font-size:21px;font-weight:800}
.ts span{font-size:12px;color:var(--gray-500)} .ts span{font-size:11.5px;color:var(--gray-500)}
.final-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .final-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* адаптив */ /* адаптив */
@media (max-width:900px){ @media (max-width:980px){
.hero h1{font-size:40px} .achv-grid{grid-template-columns:repeat(3,1fr)}
.h2{font-size:30px} .themes{grid-template-columns:1fr}
.steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:880px){
.hero h1{font-size:38px}
.h2{font-size:29px}
.grid{grid-template-columns:1fr} .grid{grid-template-columns:1fr}
.context-grid{grid-template-columns:1fr}
.vitals{grid-template-columns:repeat(2,1fr)} .vitals{grid-template-columns:repeat(2,1fr)}
.v-temp{grid-column:span 2} .v-temp{grid-column:span 2}
.exam-bar,.exam-stage-track,.exam-body{padding-left:18px;padding-right:18px}
.bd-name{width:120px}
}
@media (max-width:540px){
.hero{padding:64px 0 56px}
.hero h1{font-size:32px}
.section{padding:56px 0}
.hero-stats{gap:22px}
.steps{grid-template-columns:1fr}
.patient,.result,.final{padding:22px} .patient,.result,.final{padding:22px}
.topbar-in{flex-wrap:wrap}
.player{order:3;width:100%}
.xpbar{flex-grow:1;width:auto}
.bd-name{width:130px}
.stage-pill .sp-label{display:none} .stage-pill .sp-label{display:none}
} }
@media (max-width:560px){
.hero{padding:56px 0 50px}
.hero h1{font-size:30px}
.section{padding:50px 0}
.achv-grid{grid-template-columns:repeat(2,1fr)}
.hero-stats{gap:20px}
.exam-bar,.exam-stage-track,.exam-body{padding-left:16px;padding-right:16px}
.toasts{right:12px;left:12px;max-width:none}
}