* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #10131a; color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
#scena, #scena canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ukryty { display: none !important; }

#wynik, #prawy, #combo, #pomoc, #balans, #blad { position: fixed; z-index: 2; pointer-events: none; }
#wynik, #prawy, #combo { text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); }

#wynik { top: 18px; left: 22px; display: flex; flex-direction: column; }
#wynik span { font-size: 12px; letter-spacing: .18em; opacity: .8; }
#wynik b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }

#special { margin-top: 8px; width: 150px; height: 9px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(20, 16, 34, .55); overflow: hidden; }
#specialPasek { height: 100%; width: 0; background: #8f6be0; transition: width .12s linear; }
#special.pelny { border-color: #f2c230; box-shadow: 0 0 10px rgba(242, 194, 48, .8); }
#special.pelny #specialPasek { background: #f2c230; }
#wynik #specialOpis { margin-top: 3px; font-size: 10px; }

#prawy { top: 18px; right: 22px; text-align: right; }
#predkosc { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#stan { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #f2c230; min-height: 18px; }

#combo { left: 50%; bottom: 34px; transform: translateX(-50%); width: min(880px, 92vw); text-align: center; }
#comboTekst { font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
#comboPkt { margin-top: 4px; font-size: 30px; font-weight: 800; color: #f2c230; font-variant-numeric: tabular-nums; }
#combo.zaliczone #comboPkt { color: #7dffa0; }
#combo.gleba #comboTekst { color: #ffb3a8; text-decoration: line-through; }
#combo.gleba #comboPkt { color: #ff5a44; }

#balans { left: 50%; bottom: 150px; width: 260px; height: 18px; transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 10px; background: rgba(20, 16, 34, .55); }
#balans::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .5); }
#balans.pion { left: auto; right: 64px; bottom: 50%; width: 18px; height: 240px; transform: translateY(50%); }
#balans.pion::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
#balansZnak { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #f2c230; box-shadow: 0 0 0 2px #2a1d52; }
#balansZnak.groza { background: #ff5a44; }

#pomoc { left: 22px; bottom: 22px; width: min(430px, 44vw); padding: 12px 14px; border-radius: 10px;
  background: rgba(24, 18, 44, .72); border: 1px solid rgba(242, 194, 48, .45); font-size: 12.5px; line-height: 1.35; }
#pomoc h2 { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #f2c230; }
#pomoc dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
#pomoc dt { font-weight: 700; white-space: nowrap; }
#pomoc dd { margin: 0; opacity: .92; }

#blad { top: 70px; left: 50%; transform: translateX(-50%); max-width: 80vw; padding: 8px 12px; border-radius: 8px; background: #7a1f16; font-size: 13px; }

@media (max-width: 900px) {
  #pomoc { width: min(430px, 92vw); bottom: 150px; }
  #combo { bottom: 20px; }
}