/* ================================================================
   WISIELEC
================================================================ */
#page-wisielec .container { max-width: 720px; gap: 8px; }

/* WISIELEC tło — kreski liter */
#page-wisielec::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 50% 60% at 15% 50%, rgba(231,76,60,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 30%, rgba(26,122,58,0.08) 0%, transparent 60%);
}
.hm-structure { stroke: rgba(240,244,239,0.75); stroke-width: 5; stroke-linecap: round; fill: none; }
.hm-rope { stroke: #c4a882; stroke-width: 3.5; stroke-linecap: round; fill: none; }
.hm-part { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; fill: none; opacity: 0; transition: opacity 0.3s; }
.hm-part.vis { opacity: 1; animation: partPop 0.3s ease; }
.hm-head { fill: none; stroke: var(--gold); stroke-width: 4; opacity: 0; transition: opacity 0.3s; }
.hm-head.vis { opacity: 1; animation: partPop 0.3s ease; }
@keyframes partPop { from { opacity: 0; } to { opacity: 1; } }
.lives-row { display: flex; gap: 8px; align-items: center; }
.lives-label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: rgba(240,244,239,0.7); margin-right: 4px; }
.life-ball { width: 32px; height: 32px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.3s; }
.life-ball.lost { font-size: 20px; color: #e88080; opacity: 1; }
.cat-badge { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); opacity: 0.8; }
.hint-text { font-size: 14px; letter-spacing: 1px; color: rgba(240,244,239,0.45); text-align: center; font-style: italic; min-height: 18px; }
.word-display { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 8px 0; width: 100%; }
.letter-box { width: clamp(24px, 5vw, 36px); height: clamp(32px, 6vw, 44px); border-bottom: 3px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: clamp(16px, 3.5vw, 24px); color: var(--white); transition: all 0.3s; }
.letter-box.space { border-bottom: none; width: clamp(8px, 2vw, 14px); }
.letter-box.revealed { border-bottom-color: var(--gold); color: var(--gold); }
.letter-box.wrong-reveal { border-bottom-color: var(--red); color: var(--red); }
.keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 540px; }
.key-row { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.key { width: clamp(26px, 6.5vw, 40px); height: clamp(34px, 6.5vw, 44px); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 5px; color: var(--white); font-family: 'Bebas Neue', sans-serif; font-size: clamp(13px, 2.8vw, 19px); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.key:hover:not(:disabled) { background: rgba(245,200,66,0.2); border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.key:disabled { opacity: 0.22; cursor: default; transform: none; }
.key.hit { background: rgba(46,204,113,0.2); border-color: #2ecc71; color: #2ecc71; }
.key.miss { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.4); color: rgba(231,76,60,0.6); }
.w-status { font-family: 'Bebas Neue', sans-serif; font-size: clamp(18px, 4vw, 28px); letter-spacing: 4px; text-align: center; min-height: 34px; transition: all 0.3s; }
.w-status.win { color: #2ecc71; }
.w-status.lose { color: var(--red); }


/* ===== WISIELEC LITERA SPADA ===== */
@keyframes letterDrop {
  0%   { opacity: 0; transform: translateY(-20px) scale(1.4); }
  60%  { transform: translateY(4px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.letter-box.letter-dropping {
  animation: letterDrop 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
}