/* ==========================================================================
   TWOJ AWATAR — okno awatara (avatar.js, od 11.10.2026; mockup wariant 1)
   Pierwsze okno nowej rodziny malych okienek: ramka i tlo w --sys, ikona
   tytulu i przycisk glowny w --accent, tytul bialy, przycisk niebezpieczny
   w --danger. Telefon: plywajaca karta od dolu. Zaslona BEZ backdrop-filter
   (rozmycie klatkowalo na slabszej grafice — notatki/plynnosc.md).
   Klasy z przedrostkiem „av-”.
   ========================================================================== */

.av-ovl {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(2, 3, 4, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.av-ovl[hidden] { display: none; }
.av-modal {
  width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: #08090c;
  border: 1px solid color-mix(in srgb, var(--sys) 22%, transparent);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}
.av-modal.crop { max-width: 640px; }

/* --- naglowek --- */
.av-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #191c21;
  background: radial-gradient(120% 200% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%);
}
.av-hd h2 { flex: 1; margin: 0; font-size: 0.85rem; letter-spacing: 2.5px; font-weight: 700; color: #fff; }
.av-hd h2 i { color: var(--accent); margin-right: 8px; }
.av-x {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid #191c21; color: #7b848c;
}
.av-x:hover, .av-x:focus-visible { color: #fff; border-color: #2a3138; outline: none; }

/* --- tresc i stopka --- */
.av-bd { padding: 18px 16px; }
.av-ft { display: flex; gap: 10px; padding: 0 16px 16px; }
.av-ft .av-btn { flex: 1; }
.av-txt { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: #fff; font-weight: 600; }
.av-sub { margin: 6px 0 0; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.5; }

/* --- przyciski: glowny --accent, zwykly obrys, cichy, niebezpieczny --danger --- */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 10px;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; border: 1px solid #232a31; background: #0e1115; color: #c9d1d8;
  transition: 0.15s;
}
.av-btn:hover, .av-btn:focus-visible { border-color: #33404a; color: #fff; outline: none; }
.av-btn.pri { background: var(--accent); border-color: var(--accent); color: #000; }
.av-btn.pri:hover, .av-btn.pri:focus-visible { filter: brightness(1.1); color: #000; }
.av-btn.ghost { background: none; border-color: transparent; color: var(--txt-dim); }
.av-btn.ghost:hover, .av-btn.ghost:focus-visible { color: var(--danger); border-color: transparent; }
.av-btn.dng { background: var(--danger); border-color: var(--danger); color: #000; }
.av-btn.dng:hover, .av-btn.dng:focus-visible { filter: brightness(1.1); color: #000; }

/* --- glowny widok: duzy awatar (ksztalt jak na karcie), nick, przyciski --- */
.av-main { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.av-pic {
  display: block; width: 200px; height: 200px; border-radius: 22%; object-fit: cover;
  border: 2px solid var(--rank-color, #888); background: #14141a;
  box-shadow: 0 0 40px color-mix(in srgb, var(--rank-color, #888) 22%, transparent), 0 8px 24px rgba(0, 0, 0, 0.6);
}
/* bez zdjecia: litera z nicku */
.av-pic.av-letter {
  display: grid; place-items: center; font-size: 84px; font-weight: 700; color: var(--accent); background: #1a1a1a;
}
.av-nick { margin-top: 12px; font-weight: 700; color: #fff; letter-spacing: 1px; font-size: var(--fs-lead); word-break: break-word; }
.av-acts { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 20px; }
.av-file { display: none; }

/* --- kadrowanie --- */
.av-crop-wrap { display: flex; gap: 20px; align-items: center; }
.av-crop {
  position: relative; flex: 0 0 300px; width: 300px; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; background: #000; touch-action: none; cursor: grab; user-select: none;
}
.av-crop:active { cursor: grabbing; }
/* kopia zdjecia (kanwa .av-src); wlasna warstwa — ruch nie przerysowuje maski */
.av-crop .av-src {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform;
  pointer-events: none; max-width: none; max-height: none;
}
/* ciemny brzeg poza kadrem + linie trzecich; kadr = 82% okienka (av-crop) */
.av-mask {
  position: absolute; inset: 9%; border-radius: 22%; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.62); border: 2px solid var(--accent);
}
.av-mask::before, .av-mask::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 33.1%, rgba(255, 255, 255, 0.18) 33.3%, transparent 33.6%,
    transparent 66.4%, rgba(255, 255, 255, 0.18) 66.6%, transparent 66.9%);
}
.av-mask::after { transform: rotate(90deg); }
.av-side { flex: 1; min-width: 0; }
.av-zoom { display: flex; align-items: center; gap: 10px; color: var(--txt-dim); }
.av-zoom input { flex: 1; min-width: 0; accent-color: var(--accent); }
.av-hint { font-size: var(--fs-small); color: var(--txt-dim); margin: 10px 0 0; line-height: 1.45; }
.av-prev { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.av-prev canvas { border-radius: 22%; border: 2px solid var(--rank-color, #888); background: #14141a; }
.av-prev canvas.s { border-width: 1px; border-radius: 50%; margin-left: 6px; }
.av-prev span { font-size: var(--fs-tag); color: var(--txt-dim); letter-spacing: 1px; }

/* --- potwierdzenie usuniecia --- */
.av-swap { display: flex; align-items: center; gap: 8px; color: #3a434c; }
.av-mini {
  width: 44px; height: 44px; border-radius: 22%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--rank-color, #888);
}
.av-mini.av-letter { display: grid; place-items: center; background: #1a1a1a; color: var(--accent); font-weight: 700; font-size: 20px; }
.av-del .av-txt { margin-top: 14px; }

/* --- telefon: plywajaca karta od dolu, kadrowanie jedno pod drugim --- */
@media (max-width: 768px) {
  .av-ovl { padding: 10px 8px; align-items: flex-end; }
  .av-modal { max-height: calc(100dvh - 20px); border-radius: 16px; }
  .av-crop-wrap { flex-direction: column; align-items: stretch; }
  .av-crop { flex: none; width: 100%; max-width: 340px; align-self: center; }
  .av-zoom { margin-top: 14px; }
  .av-hint { text-align: center; }
  .av-prev { justify-content: center; }
}