:root{
  --ink:#EAF0F6; --muted:#A5B3C1; --faint:#71808F; --line:rgba(255,255,255,.12);
  --glass:rgba(10,16,22,.68); --glass-2:rgba(255,255,255,.06);
  --accent:#9C87F5; --ok:#3CC487; --bad:#FF6D64; --amber:#FFB24A; --blue:#6FB0FF;
  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#05080c;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
#gl.look{cursor:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
kbd{font-family:var(--f-mono);font-size:.82em;font-weight:700;padding:1px 7px;border:1px solid rgba(255,255,255,.28);border-bottom-width:2px;border-radius:6px;background:rgba(255,255,255,.08);white-space:nowrap}
.bar{height:8px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:var(--ok);transition:width .3s}
.pane{background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 12px 40px rgba(0,0,0,.35)}

#hud{position:fixed;inset:0;pointer-events:none;user-select:none}
#top{position:absolute;left:18px;top:16px;display:flex;align-items:center;gap:18px;padding:8px 18px 8px 8px;background:var(--glass);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#clock{position:relative;width:52px;height:52px;display:grid;place-items:center}
#clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
#clock circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:3}
#clock #clockArc{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0}
#clock b{font-family:var(--f-mono);font-size:13px}
#clock.low #clockArc{stroke:var(--amber)}
.stat{display:flex;flex-direction:column;line-height:1.1;min-width:58px}
.stat small{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.stat b{font-family:var(--f-mono);font-size:22px}
#modeTag{font-size:13px;font-weight:700;color:var(--muted)}
#hud.study .stat,#hud.study #clock{display:none}
#hud.study #top{padding:9px 16px}
#hud.study #patient{display:none}

#map{position:absolute;right:18px;top:16px;width:224px;height:216px;border-radius:16px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#patient{position:absolute;left:18px;bottom:18px;width:310px;padding:12px 14px;background:var(--glass);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#patient .row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:700;margin-bottom:6px}
#patient .row b{font-family:var(--f-mono)}
#ptSym{font-size:13.5px;color:#ffd9b0;margin-top:7px;min-height:0}
#ptSym:empty{display:none}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
#prompt{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);padding:7px 14px;font-weight:600;font-size:15px;background:var(--glass);border:1px solid var(--line);border-radius:999px;white-space:nowrap}
#prompt:empty{display:none}
#hint{position:absolute;right:18px;bottom:18px;font-size:13px;color:var(--muted);text-align:right;line-height:1.9;text-shadow:0 1px 3px rgba(0,0,0,.8)}
#banner{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:min(560px,46vw);padding:14px 18px;background:rgba(40,14,12,.78);border:1px solid rgba(255,140,110,.4);border-radius:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .4s,transform .4s}
#banner:empty{opacity:0;transform:translate(-50%,-12px)}
#banner h3{margin:0 0 3px;font-family:var(--f-display);font-size:19px}
#banner p{margin:0;font-size:14.5px;color:#f3d8d0}
#result{position:absolute;left:50%;top:21%;transform:translate(-50%,0);text-align:center;transition:opacity .25s,transform .25s;min-width:340px}
#result:empty{opacity:0;transform:translate(-50%,10px)}
#result .card{display:inline-block;padding:14px 24px 16px;background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#result h3{margin:0;font-family:var(--f-display);font-size:26px}
#result .pts{font-family:var(--f-mono);font-size:19px;font-weight:700}
#result p{margin:3px 0 0;font-size:15px;color:var(--muted)}
#result p b{font-family:var(--f-mono);color:var(--ink)}
#result.good h3{color:var(--ok)} #result.bad h3{color:var(--bad)} #result.neutral h3{color:var(--ink)}

#panel{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:372px;padding:18px 20px;background:var(--glass);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);pointer-events:auto}
#panel:empty{display:none}
#panel h2{margin:0;font-family:var(--f-display);font-size:25px;line-height:1.15}
#panel .sub{color:var(--muted);font-size:14px;margin-top:1px}
#panel .big{font-family:var(--f-mono);font-weight:700;font-size:54px;line-height:1.1;margin:12px 0 2px;letter-spacing:-.02em}
#panel .big.words{font-size:40px}
#panel .big small{font-family:var(--f-body);font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:7px}
#panel .chip{display:inline-block;padding:2px 11px;border-radius:999px;font-weight:700;font-size:14px;background:var(--glass-2)}
#panel .chip.N{color:var(--ok)} #panel .chip.L,#panel .chip.H{color:var(--bad)}
#panel p{margin:9px 0 0;font-size:15px}
#panel .keys{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);line-height:2}
#panel .fields{display:flex;align-items:center;gap:9px;margin:13px 0 4px}
#panel input{width:112px;font-family:var(--f-mono);font-weight:700;font-size:26px;color:var(--ink);padding:8px 10px;border-radius:11px;border:1.5px solid rgba(255,255,255,.26);background:rgba(0,0,0,.28);outline:0;text-align:center}
#panel input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(156,135,245,.3)}
#panel .fields span{color:var(--muted);font-weight:600}
#panel .norm{font-family:var(--f-mono);font-weight:700;color:#8ff3c0}

#screen{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,rgba(5,8,12,.2),rgba(5,8,12,.62))}
#screen:empty{display:none}
#screen .box{width:min(620px,94vw);max-height:92vh;overflow:auto;padding:26px 28px}
#screen h1{font-family:var(--f-display);font-size:50px;line-height:1;margin:0;letter-spacing:-.02em}
#screen h2{font-family:var(--f-display);font-size:30px;line-height:1.1;margin:0}
#screen .lead{color:var(--muted);margin:9px 0 16px;font-size:16.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:13px;font-weight:700;font-size:17px;background:var(--glass-2);border:1px solid var(--line);transition:transform .12s,background .15s}
.btn:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn.main{background:var(--accent);color:#120D24;border-color:transparent}
.btn.main:hover{background:#b3a2f8}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btns .btn{flex:1 1 170px}
.progress{padding:12px 14px;border-radius:13px;background:var(--glass-2);margin-top:4px}
.progress .row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:7px;gap:12px}
.progress .row b{font-family:var(--f-mono);font-size:19px}
.progress .bar i{background:linear-gradient(90deg,var(--ok),#8ff3c0)}
.progress small{display:block;color:var(--muted);margin-top:7px;font-size:13.5px}
.how{margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:var(--muted);display:grid;gap:5px}
.how b{color:var(--ink);font-weight:600}
.stars{font-size:32px;letter-spacing:4px;color:var(--amber);margin:6px 0 2px}
.stars i{font-style:normal;color:rgba(255,255,255,.2)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.grid div{padding:9px 10px;border-radius:11px;background:var(--glass-2)}
.grid small{display:block;font-size:12.5px;color:var(--muted)}
.grid b{font-family:var(--f-mono);font-size:20px}
.worst{margin:10px 0 0;padding:0;list-style:none;font-size:15px}
.worst li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.worst b{font-family:var(--f-mono);color:#8ff3c0;white-space:nowrap}
.labs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin:12px 0}
.labs div{padding:7px 10px;border-radius:10px;background:var(--glass-2);font-size:14px}
.labs b{font-family:var(--f-mono);display:block;font-size:17px}
.opts{display:grid;gap:8px;margin-top:12px}
.opts button{text-align:left;padding:12px 15px;border-radius:12px;background:var(--glass-2);border:1px solid var(--line);font-weight:600}
.opts button:hover{background:rgba(255,255,255,.13)}
.opts button.right{background:rgba(60,196,135,.25);border-color:var(--ok)}
.opts button.wrong{background:rgba(255,109,100,.2);border-color:var(--bad)}
.explain{margin-top:12px;font-size:15px;color:var(--muted)}

#loader{position:fixed;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:#05080c;transition:opacity .7s}
#loader h1{font-family:var(--f-display);font-size:42px;margin:0}
#loader .bar{width:280px;height:6px}
#loader p{margin:0;color:var(--muted);font-size:15px}
#loader.gone{opacity:0;pointer-events:none}
@media (max-width:900px){#map{width:170px;height:164px}#panel{width:320px}#hint{display:none}#banner{top:90px;width:min(560px,92vw)}}

/* Pauza: pasek u góry ekranu, bez przyciemnienia sceny */
#pauseBar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 16px;background:var(--glass);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:14px;white-space:nowrap}
#pauseBar span{color:var(--muted)}
#pauseBar button{padding:5px 13px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line);font-weight:700;font-size:13.5px}
#pauseBar button:hover{background:rgba(255,255,255,.14)}
#pauseBar #bBack{color:var(--ok)}
/* Normy kobiet i mężczyzn w nauce */
.sxK{color:#ff9fd3!important} .sxM{color:#8fc6ff!important}
#prompt .fN{color:var(--ok)} #prompt .fL,#prompt .fH{color:var(--bad)}
#pauseBar button.off{color:var(--muted);text-decoration:line-through}
/* Odtwarzacz muzyki stoi poza ekranem */
#yt{position:fixed;left:-400px;top:0;width:200px;height:113px;pointer-events:none}