*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
:root{--s:1}   /* skala interfejsu ustawiana w game.js (resize): rośnie na dużych ekranach, na telefonach zostaje 1 */
html,body{margin:0;height:100%;overflow:hidden;background:#0b0f1a;color:#e8f1ff;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;touch-action:none}
html,body{position:fixed;inset:0;overscroll-behavior:none;-webkit-touch-callout:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;font-size:calc(16px*var(--s));padding:max(.75em,env(safe-area-inset-top)) max(1em,env(safe-area-inset-right)) max(.75em,env(safe-area-inset-bottom)) max(1em,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 0%,#1b2540 0%,#0b0f1a 70%)}
.hidden{display:none!important}
/* górny i dolny pasek oraz lista bohaterów: wyśrodkowane, nie rozciągają się na całą szerokość ekranu */
.top,.bottom,#heroes{width:100%;max-width:75em;margin-inline:auto}
.top{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:.5em}
.stats{margin-left:auto;font-size:1.25em}
h1{margin:0;font-size:2em;letter-spacing:.12em;font-weight:800;color:#19e3ff;text-shadow:0 0 .45em #19e3ff88;margin-right:.6em}
h1 span{color:#ff3d8b;text-shadow:0 0 .45em #ff3d8b88}
h2{font-size:2.9em;text-align:center;color:#19e3ff;margin:0;text-shadow:0 0 .4em #19e3ff88}
#result{align-items:center;justify-content:center;gap:.9em}
#result p{text-align:center;font-size:1.25em;white-space:pre-line}
#heroes{display:flex;gap:.7em;overflow-x:auto;padding:.5em 0;flex:1;align-items:center}
/* środkowanie, które nie ucina lewej strony, gdy karty się nie mieszczą (wtedy lista się przewija) */
#heroes>.card:first-child{margin-left:auto}
#heroes>.card:last-child{margin-right:auto}
.card{flex:0 0 10.75em;border:2px solid #26324f;border-radius:.9em;padding:.6em;background:#121a2ecc;text-align:center;cursor:pointer}
.card.sel{border-color:#19e3ff;box-shadow:0 0 1em #19e3ff66}
.card.locked{opacity:.65}
.card .portrait{width:4.9em;height:4.9em;display:block;margin:0 auto .4em;border-radius:50%}
.card h3{margin:.15em 0;font-size:1.12em}
.card small{display:block;color:#93a4c8;font-size:.75em;line-height:1.35}
.card button{margin-top:.4em;font-size:.8em;padding:.4em .6em;font-family:inherit;border:1px solid #19e3ff;background:#0e2a3a;color:#e8f1ff;border-radius:.45em;cursor:pointer}
.bottom{display:flex;justify-content:center;flex-wrap:wrap;gap:.75em}
.btn{font-family:inherit;font-size:1.25em;font-weight:800;padding:.6em 1.4em;border-radius:.6em;border:2px solid #ff3d8b;background:linear-gradient(#a3175a,#5d0d34);color:#fff;cursor:pointer;letter-spacing:.05em}
.btn.alt{background:linear-gradient(#0e5a74,#08303f);border-color:#19e3ff}
.btn.small{font-size:.875em;padding:.45em 1em}
.btn:active{transform:scale(.97)}
#pick{background:rgba(5,8,16,.82);align-items:center;justify-content:center;gap:1.25em}
#pickCards{display:flex;gap:.9em;flex-wrap:wrap;justify-content:center}
.up{width:12.5em;border:2px solid #19e3ff;border-radius:.9em;padding:1em;background:#121a2e;text-align:center;cursor:pointer;box-shadow:0 0 1em #19e3ff44}
.up:active{transform:scale(.97)}
.up .rar{display:block;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35em;color:#93a4c8}
.up em{display:block;margin-top:.5em;font-style:normal;font-size:.78em;color:#ffd24a}
.up.r1{border-color:#4aa3ff;box-shadow:0 0 1em #4aa3ff66}.up.r1 b,.up.r1 .rar{color:#4aa3ff}
.up.r2{border-color:#b04dff;box-shadow:0 0 1.3em #b04dffaa}.up.r2 b,.up.r2 .rar{color:#d08cff}
.up .rr{display:block;margin:.7em auto 0;font-family:inherit;font-size:.8em;font-weight:800;padding:.3em .8em;border-radius:.5em;border:1px solid #8fa3c8;background:#0e2a3a;color:#e8f1ff;cursor:pointer}
#fpsBtn.on{border-color:#3dff9a;color:#3dff9a}
.up b{display:block;font-size:1.25em;margin-bottom:.4em;color:#19e3ff}
.up span{color:#c4d2f0;font-size:.875em}
#pickTimer{font-size:1.4em;color:#c4d2f0;min-height:1.75em}
#lobby,#auth{background:radial-gradient(ellipse at 50% 0%,#1b2540 0%,#0b0f1a 70%)}
#lobbyBody,#authBody{flex:1;display:flex;align-items:center;justify-content:center}
#lobbyJoin,#lobbyRoom,#authForm,#authInfo{display:flex;flex-direction:column;gap:.9em;align-items:center;min-width:17.5em}
#lobby input,#auth input{font:inherit;font-size:1.25em;padding:.4em .6em;border-radius:.5em;border:2px solid #26324f;background:#121a2e;color:#e8f1ff;text-transform:none;user-select:text;-webkit-user-select:text}
#authName,#authPass{width:14em}
#codeIn{width:5.5em;text-align:center;text-transform:uppercase;letter-spacing:.2em}
#lobby .row,#auth .row{display:flex;gap:.6em}
#lobby .or{color:#93a4c8;font-size:.875em}
#lobby .code,#auth .code{font-size:1.4em}
#lobby .code b{color:#19e3ff;letter-spacing:.2em;font-size:1.45em}
#auth .code b{color:#19e3ff}
#auth details{width:min(24em,100%);border:2px solid #26324f;border-radius:.7em;padding:.5em .8em;background:#121a2ecc}
#auth details[open]{display:flex;flex-direction:column;gap:.6em}
#auth summary{cursor:pointer;font-weight:700}
#auth details input{width:100%;font-size:1.05em}
#auth summary.danger,.btn.danger{color:#ff8a8a}
.btn.danger{border-color:#ff5a5a;background:linear-gradient(#5a1620,#33090f)}
#authMsg.ok{color:#3dff9a}
#recoverForm,#recBox{display:flex;flex-direction:column;gap:.8em;align-items:center;width:min(26em,100%)}
#recoverForm input{width:100%}
#recBox h3{margin:0;color:#ffd24a}
#recBox .hint{text-align:center;max-width:26em}
a.btn{text-decoration:none;display:inline-block}
#quitBtn{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 10px);z-index:25;opacity:.75;padding:.35em .8em}
#quitBtn.hidden{display:none}
#tut{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 58px);display:flex;justify-content:center;pointer-events:none;z-index:30;padding:0 12px}
#tut.hidden{display:none}
.tutCard{pointer-events:auto;max-width:34em;width:100%;background:#0b1226ee;border:2px solid #19e3ff;border-radius:.8em;padding:.7em 1em;text-align:center;box-shadow:0 0 1.2em #19e3ff44}
.tutCard small{color:#8fa3c8;letter-spacing:.08em;font-size:.75em}
.tutCard h3{margin:.15em 0;color:#19e3ff;font-size:1.15em}
.tutCard p{margin:.3em 0 .6em;font-size:.95em;line-height:1.4}
.tutCard .row{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}
.tutCard .btn.hidden{display:none}
.ageBox{display:flex;gap:1.2em;flex-wrap:wrap;justify-content:center}
.chk.legal{font-size:.82em;max-width:26em;align-items:flex-start;text-align:left;color:#93a4c8;line-height:1.35}.chk.legal a{color:#19e3ff}.chk.legal input{margin-top:.2em;flex:none}
.codeOut{font-family:Consolas,'Courier New',monospace;font-size:1.5em;letter-spacing:.12em;padding:.6em 1em;border:2px dashed #ffd24a;border-radius:.6em;color:#ffd24a;background:#121a2e;text-align:center;user-select:text;-webkit-user-select:text}
.chk{display:flex;gap:.5em;align-items:center;font-size:1em}
.chk input{width:1.2em;height:1.2em;accent-color:#19e3ff}
.btn:disabled{opacity:.4;cursor:default}
#auth .hint,#lobby .hint{color:#93a4c8;font-size:.875em;margin:0}
#auth .hint{max-width:23em;text-align:center}
#roomPlayers{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4em;min-width:16.25em}
#roomPlayers li{padding:.45em .9em;border:2px solid #26324f;border-radius:.6em;background:#121a2e;font-size:1.125em}
#lobbyMsg,#authMsg{text-align:center;color:#ff8a8a;min-height:1.5em;font-size:1.125em}
#msg{position:absolute;left:0;right:0;bottom:5.6em;text-align:center;font-size:1.25em;color:#19e3ff;pointer-events:none}
/* poziom operatora w menu */
#opBar{display:flex;align-items:center;gap:.5em;font-size:.95em}
#opBar b{color:#ffd24a;white-space:nowrap}
.xpbar{width:8em;height:.7em;border-radius:.35em;background:#ffffff1c;overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#19e3ff,#ff3d8b)}
#opBar small{color:#93a4c8;font-size:.75em;white-space:nowrap}
/* ustawienia dźwięku */
.setRow{display:flex;justify-content:space-between;align-items:center;gap:1em;width:min(32em,100%);padding:.55em .9em;border:2px solid #26324f;border-radius:.7em;background:#121a2ecc;font-size:1.05em}
.setRow select{font:inherit;padding:.3em .5em;border-radius:.4em;border:2px solid #26324f;background:#0e1626;color:#e8f1ff}
.setRow input[type=range]{width:11em;accent-color:#19e3ff}
.setRow input[type=checkbox]{width:1.3em;height:1.3em;accent-color:#19e3ff}
.setRow .btns{display:flex;gap:.4em}
/* ekrany skrzynek, kolekcji i misji */
.panelBody{flex:1;display:flex;flex-direction:column;align-items:center;gap:1em;overflow-y:auto;width:100%;max-width:75em;margin-inline:auto;padding:.5em 0;user-select:none}
.panelBody .hint{color:#93a4c8;font-size:.875em;margin:0;text-align:center}
.fr{margin-left:auto;margin-right:1em;font-size:1.1em}
.fr b{color:#ffd24a}
.chest.b{--rc:#cd7f32}.chest.s{--rc:#c9d1e0}.chest.g{--rc:#ffd24a}.chest.e{--rc:#b04dff}.chest.l{--rc:#ff7a1a}
#chestRow{display:flex;gap:.8em;flex-wrap:wrap;justify-content:center}
.chest.g .ico{box-shadow:0 0 .5em var(--rc)}
.chest.e .ico,.chest.l .ico{box-shadow:0 0 1em var(--rc)}
.chest.l{box-shadow:0 0 1.2em #ff7a1a55}
.chest{width:10.6em;border:2px solid var(--rc);border-radius:.9em;padding:.8em;background:#121a2ecc;text-align:center;box-shadow:0 0 1em #00000066}
.chest .ico{width:4em;height:3em;margin:0 auto .5em;border-radius:.4em;background:linear-gradient(var(--rc),#0b0f1a);border:2px solid var(--rc);position:relative}
.chest .ico:before{content:'';position:absolute;left:0;right:0;top:36%;height:.3em;background:var(--rc)}
.chest h3{margin:.1em 0;color:var(--rc);font-size:1.15em}
.chest .cico{display:block;width:7em;height:7em;margin:-.6em auto -.4em;pointer-events:none}
.loot .cico.open{display:block;width:9em;height:9em;margin:-1.2em auto -1em}
.chest .cnt{font-size:1.4em;font-weight:800;margin:.2em 0}
.chest .odds{font-size:.72em;color:#93a4c8;line-height:1.45;text-align:left;margin-top:.5em}
.chest button{font-family:inherit;font-weight:800;border:2px solid var(--rc);background:#0e2a3a;color:#fff;border-radius:.5em;padding:.4em 1em;cursor:pointer;font-size:.95em}
.chest button:disabled{opacity:.4;cursor:default}
#lootBox{min-height:7em;display:flex;align-items:center;justify-content:center}
.loot{border:2px solid var(--rc,#8fa3c8);border-radius:.9em;padding:.8em 1.4em;background:#121a2e;text-align:center;font-size:1.15em;animation:pop .45s ease-out;box-shadow:0 0 1.2em #00000088}
.loot b{display:block;font-size:1.2em;color:var(--rc,#fff)}
.loot small{display:block;color:#93a4c8;margin-top:.2em}
@keyframes pop{0%{transform:scale(.4) rotate(-6deg);opacity:0}70%{transform:scale(1.1) rotate(1deg);opacity:1}100%{transform:scale(1) rotate(0)}}
#colPrev{font-size:1.4em;font-weight:800;min-height:1.6em;text-align:center}
#colPrev small{display:block;font-size:.55em;color:#93a4c8;font-weight:600}
#colGrid{display:flex;flex-wrap:wrap;gap:.7em;justify-content:center}
.cos{width:9.5em;border:2px solid var(--rc);border-radius:.8em;padding:.6em;background:#121a2ecc;text-align:center}
.cos.locked{opacity:.55}
.cos.common{--rc:#8fa3c8}.cos.rare{--rc:#4aa3ff}.cos.epic{--rc:#b04dff}.cos.legendary{--rc:#ffb02e}
.cos .nm{font-weight:800;font-size:1.05em;margin:.15em 0}
.cos .kind{font-size:.7em;color:#93a4c8;text-transform:uppercase;letter-spacing:.06em}
.cos .eqd{color:#3dff9a;font-size:.8em;font-weight:800}
.cos button{margin-top:.4em;font-family:inherit;font-size:.8em;font-weight:800;padding:.35em .7em;border-radius:.45em;border:1px solid var(--rc);background:#0e2a3a;color:#e8f1ff;cursor:pointer}
.cos button:disabled{opacity:.4;cursor:default}
#misList{display:flex;flex-direction:column;gap:.7em;width:min(34em,100%)}
.mis{border:2px solid #26324f;border-radius:.8em;padding:.7em .9em;background:#121a2ecc}
.mis.done{border-color:#3dff9a}
.mis .row2{display:flex;justify-content:space-between;gap:1em;font-size:1.05em}
.mis .rw{font-size:.8em;color:#93a4c8;margin-top:.3em}
.mbar{height:.6em;border-radius:.3em;background:#ffffff1c;overflow:hidden;margin-top:.4em}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,#19e3ff,#3dff9a)}
#misInfo{color:#c4d2f0;text-align:center;line-height:1.6}
/* niski ekran (telefon poziomo): mniejsze przyciski i karty, żeby wszystko zmieściło się bez ucinania */
@media (max-height:520px){
  .btn{font-size:1em;padding:.5em .9em}
  .btn.small{font-size:.75em}
  h1{font-size:1.4em}
  .stats{font-size:1em}
  .card{flex-basis:9em;padding:.4em}
  .card .portrait{width:3.6em;height:3.6em}
  .card small{font-size:.7em}
  .bottom{flex-wrap:nowrap}
  #msg{bottom:4.2em}
}
/* pionowy ekran telefonu: węższe menu, przyciski w kilku rzędach */
@media (orientation:portrait){
  .btn{font-size:1em;padding:.65em 1em}
  .btn.small{font-size:.8em}
  h1{font-size:1.25em;letter-spacing:.1em}
  .stats{font-size:1em}
  #heroes{align-items:flex-start;padding-top:1em}
  .card{flex-basis:9.4em}
  h2{font-size:1.9em}
  .up{width:16em}
  #pickCards{flex-direction:column;align-items:center}
}

/* otwieranie skrzyń: drżenie, błysk, iskry */
.chestStage{position:relative;display:flex;align-items:center;justify-content:center;min-height:9.5em;cursor:pointer}
.chestStage .cico{display:block;width:9em;height:9em;margin:0;position:relative;z-index:1}
.chestStage:before{content:'';position:absolute;width:13em;height:13em;border-radius:50%;background:radial-gradient(circle,var(--rc) 0%,transparent 65%);opacity:0;animation:glowUp 1.2s ease-in forwards}
@keyframes glowUp{to{opacity:.5}}
.cico.shake{animation:chShake .12s linear infinite}
@keyframes chShake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-3deg)}50%{transform:translate(3px,-1px) rotate(3deg)}75%{transform:translate(-2px,-2px) rotate(-2deg)}100%{transform:translate(0,0) rotate(0)}}
.chestStage .flash{position:absolute;inset:-3em;z-index:2;background:radial-gradient(circle,#fff,var(--rc) 40%,transparent 70%);opacity:0;animation:flashA .45s ease-out forwards;pointer-events:none}
@keyframes flashA{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.chestStage .spark{position:absolute;left:50%;top:50%;z-index:3;width:.5em;height:.5em;border-radius:50%;background:var(--rc);box-shadow:0 0 .7em var(--rc);animation:sparkA .9s ease-out forwards;pointer-events:none}
@keyframes sparkA{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.bigBanner{font-weight:900;letter-spacing:.14em;font-size:1.1em;color:var(--rc);text-shadow:0 0 .7em var(--rc);animation:pop .5s ease-out}
#chestScr.bump{animation:screenBump .35s ease-out}
@keyframes screenBump{0%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.cico.shake,.chestStage .spark,.chestStage .flash,.chestStage:before,#chestScr.bump{animation:none}}

/* ankieta */
.surveyBody{max-width:34em;margin:0 auto;display:flex;flex-direction:column;gap:.9em;text-align:left}
.surveyBody fieldset{border:1px solid #223055;border-radius:.6em;padding:.6em .8em}
.surveyBody legend{color:#8fa3c8;padding:0 .4em}
.rate{display:flex;gap:.6em;justify-content:center}
.rate label{display:flex;flex-direction:column;align-items:center;gap:.2em;font-weight:800;font-size:1.1em;cursor:pointer}
.svRow{display:flex;flex-direction:column;gap:.3em;color:#c4d2f0;font-size:.95em}
.svRow select,.svRow textarea{font:inherit;padding:.5em;border-radius:.5em;border:1px solid #2c3c66;background:#0e1730;color:#e8f1ff}
#surveyMsg{min-height:1.4em;text-align:center;color:#ff9aa8}#surveyMsg.ok{color:#3dff9a}