/* Druga tura: bohater, album, dyżur, trening, Gluton X. Uzupełnia dwa-alarmy.css. */

/* ---------- wybór bohatera ---------- */
.bohaterowie-wybor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .bohaterowie-wybor { grid-template-columns: repeat(3, 1fr); } }
.bohater-karta {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  border: 2px solid var(--line); background: rgba(255, 255, 255, .06);
  border-radius: var(--radius); padding: 12px 10px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.bohater-karta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .11); }
.bohater-karta-wybrana { border-color: var(--gold); background: rgba(255, 195, 0, .16); box-shadow: 0 0 22px rgba(255, 195, 0, .35); }
.bohater-karta-portret { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.bohater-karta strong { font-family: 'Baloo 2', sans-serif; font-size: 1.05em; }
.bohater-karta-moc { font-size: .78em; color: var(--gold2); font-weight: 700; letter-spacing: .05em; }
.bohater-karta-opis { font-size: .74em; opacity: .75; line-height: 1.3; }

/* pasek bohatera w menu i na liście rozdziałów */
.bohater-pasek {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .07);
  border-radius: var(--radius); padding: 10px 12px;
}
.bohater-pasek:hover { background: rgba(255, 255, 255, .12); }
.bohater-pasek-portret { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex: none; }
.bohater-pasek-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .86em; }
.bohater-pasek-tresc strong { font-family: 'Baloo 2', sans-serif; font-size: 1.1em; }
.bohater-pasek-tresc .postep-tor { height: 6px; margin-top: 2px; }
.xp-info { margin: -4px 0 0; text-align: center; font-size: .82em; color: var(--gold2); }

/* przycisk mocy: pojawia się dopiero po pierwszej pomyłce */
.moc {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border-radius: 999px; border: 1px solid var(--gold);
  background: rgba(255, 195, 0, .18); color: var(--gold2);
  padding: 6px 12px; font-size: .8em; font-weight: 700; font-family: 'Baloo 2', sans-serif;
}
.moc:hover { background: rgba(255, 195, 0, .3); }
.moc-ikona { font-size: 1.1em; }
.moc-nowa { animation: mocIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes mocIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.pasek-zadania { flex-wrap: wrap; }

/* podpowiedzi mocy */
.hotspot-przygaszony { opacity: .25; pointer-events: none; }
.hotspot-zly .hotspot-pierscien { border-color: var(--bad); animation: none; opacity: .5; }
.panelik-podpowiedz { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(255, 195, 0, .5), 0 0 24px rgba(255, 195, 0, .6); }
.strefa-podpowiedz { border-color: var(--gold) !important; background: rgba(255, 195, 0, .18) !important; animation: hotPuls 1.1s ease-in-out 2; }
.krok-podpowiedz { border-color: var(--gold) !important; box-shadow: 0 0 18px rgba(255, 195, 0, .6); }
.wybor-przygaszony, .bohater-przygaszony { opacity: .3; text-decoration: line-through; pointer-events: none; }
.bohater { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.bohater-portret { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); }

/* ---------- Gluton X ---------- */
.gluton {
  display: flex; gap: 14px; align-items: center;
  background: linear-gradient(135deg, rgba(120, 40, 140, .35), rgba(20, 26, 60, .5));
  border: 1px solid rgba(220, 120, 255, .35); border-radius: var(--radius); padding: 14px;
}
.gluton-img { width: 120px; flex: none; filter: drop-shadow(0 8px 18px rgba(200, 80, 255, .45)); animation: glutonIn .6s ease both; }
@keyframes glutonIn { from { opacity: 0; transform: translateX(-16px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.gluton-tresc { min-width: 0; }
.gluton-imie { margin: 0 0 6px; font-family: 'Baloo 2', sans-serif; font-weight: 800; letter-spacing: .1em; font-size: .8em; color: #e9a6ff; }
@media (max-width: 420px) { .gluton { flex-direction: column; text-align: center; } .gluton-img { width: 140px; } }

/* ---------- menu: kafelki Album / Dyżur / Trening ---------- */
.menu-siatka { display: grid; grid-template-columns: 1fr; gap: 8px; text-align: left; }
.kafel {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06);
  border-radius: var(--radius); padding: 10px 12px; min-height: 58px;
  transition: background .12s ease, transform .12s ease;
}
.kafel:hover:not(:disabled) { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.kafel-zablokowany { opacity: .5; cursor: not-allowed; }
.kafel-ikona { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 20px; border-radius: 50%; background: rgba(255, 195, 0, .16); color: var(--gold2); }
.kafel-tresc { display: flex; flex-direction: column; min-width: 0; }
.kafel-tresc strong { font-family: 'Baloo 2', sans-serif; letter-spacing: .04em; font-size: .95em; }
.kafel-opis { font-size: .78em; opacity: .75; }
.misja-box { text-align: left; border-left: 4px solid var(--gold); }

/* ---------- album ---------- */
.album-kat { margin: 10px 0 2px; letter-spacing: .08em; text-transform: uppercase; font-size: .9em; }
.album-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .album-siatka { grid-template-columns: repeat(3, 1fr); } }
.album-karta {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1px solid var(--line); border-top: 4px solid var(--kat, var(--gold));
  background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 12px 8px; min-height: 96px;
  transition: transform .12s ease, background .12s ease;
}
.album-karta:hover:not(:disabled) { transform: translateY(-2px); background: rgba(255, 255, 255, .13); }
.album-karta-brak { opacity: .4; border-top-color: rgba(255, 255, 255, .2); cursor: default; }
.album-karta-zlota { border-color: var(--gold); background: rgba(255, 195, 0, .12); box-shadow: 0 0 16px rgba(255, 195, 0, .25); }
.album-karta-ikona { font-size: 22px; color: var(--kat, var(--gold)); }
.album-karta-zlota .album-karta-ikona { color: var(--gold); }
.album-karta-tytul { font-size: .8em; font-weight: 700; line-height: 1.25; }
.album-duza {
  border: 1px solid var(--line); border-top: 6px solid var(--kat, var(--gold));
  background: rgba(255, 255, 255, .07); border-radius: 22px; padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 8px;
}
.album-duza-zlota { border-color: var(--gold); box-shadow: 0 0 30px rgba(255, 195, 0, .3); }
.album-duza-ikona { font-size: 40px; color: var(--kat, var(--gold)); }
.album-duza-tekst { margin: 0; font-size: 1.05em; }
.album-zrodlo { margin: 0; font-size: .74em; opacity: .55; }

/* toast: nowa karta */
.karta-toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 70; transform: translate(-50%, 40px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(8, 13, 32, .95); border: 1px solid var(--gold); border-radius: 999px;
  padding: 10px 18px 10px 12px; color: #fff; font-size: 14px; opacity: 0; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .3s ease, opacity .3s ease;
  max-width: calc(100vw - 32px);
}
.karta-toast-widoczny { transform: translate(-50%, 0); opacity: 1; }
.karta-toast-ikona { font-size: 20px; color: var(--gold); }
.karta-toast strong { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.karta-toast-zlota { background: linear-gradient(180deg, #5a4400, #2a2000); }

/* ---------- dyżur i trening ---------- */
.dyzur-stat { display: flex; gap: 8px; }
.dyzur-kafel {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px;
}
.dyzur-kafel strong { font-family: 'Baloo 2', sans-serif; font-size: 1.4em; color: var(--gold2); line-height: 1; }
.dyzur-kafel-ikona { font-size: 18px; }
.dyzur-kafel-nazwa { font-size: .7em; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.zycia { display: flex; gap: 3px; flex: none; }
.zycie { font-size: 20px; color: rgba(255, 255, 255, .2); transition: color .25s ease, transform .25s ease; }
.zycie-ma { color: var(--bad); text-shadow: 0 0 10px rgba(255, 138, 128, .6); }
.panele-gesto { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 520px) { .panele-gesto { grid-template-columns: repeat(4, 1fr); } }
.panele-gesto .panelik { min-height: 74px; padding: 10px 6px; }
.panele-gesto .panelik-nazwa { font-size: .62em; }
.panel-blysk { box-shadow: 0 0 0 4px rgba(255, 138, 128, .55), 0 0 60px rgba(255, 138, 128, .5); }
.wynik-duzy { margin: 0; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(30px, 8vw, 46px); color: var(--gold2); }

/* ---------- pokaż rodzicowi ---------- */
.rodzic-lista { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 1.05em; }
.rodzic-lista li::marker { color: var(--gold); font-weight: 800; }