*{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 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 .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}
/* 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}
}