/* ==========================================================================
   MISJA STARTOWA (mission.js) — klasy ms-
   Wyglad zatwierdzony przez Matta 7.10.2026: wariant B (kafle stanow
   w kolorach sekcji biblioteki), notatki/pierwsze-wrazenie.md.
   Ramka i tlo --sys (chrom), przyciski --accent; kolory kafli to stany
   gier (dane, nie motyw): aktywne #39ff14 jak .section-head-active,
   archiwum --accent-social, lista zyczen --zyczenia.
   ========================================================================== */

.ms-card {
  margin: 4px 0 22px;
  border: 1px solid color-mix(in srgb, var(--sys) 35%, transparent);
  border-radius: 18px;
  padding: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sys) 10%, transparent), transparent 55%),
    linear-gradient(160deg, #121219, #0b0b10);
  box-shadow: 0 0 30px color-mix(in srgb, var(--sys) 8%, transparent);
}
.ms-card, .ms-card * { min-width: 0; overflow-wrap: anywhere; }
.ms-btn, .ms-kick { overflow-wrap: normal; }

.ms-kick {
  font-size: var(--fs-tag); letter-spacing: 2px; font-weight: 800; color: var(--sys);
  display: flex; align-items: center; gap: 8px;
}
.ms-h { font-size: 22px; font-weight: 800; color: #fff; margin: 6px 0 4px; }
.ms-lead { font-size: var(--fs-body); color: var(--txt-dim); line-height: 1.5; margin: 0 0 18px; max-width: 640px; }

/* dwie drogi: Steam / baza */
.ms-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ms-path {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px;
  cursor: pointer; border: 1px solid #2a2632; background: rgba(255, 255, 255, 0.03);
  font: inherit; color: inherit; text-align: left; width: 100%; transition: 0.18s;
}
.ms-path:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ms-path i { font-size: 26px; color: var(--accent); width: 32px; text-align: center; flex-shrink: 0; }
.ms-path b { display: block; font-size: var(--fs-body); color: #fff; letter-spacing: 1px; }
.ms-path em { display: block; font-style: normal; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.4; }

.ms-sub { font-size: var(--fs-tag); letter-spacing: 2px; font-weight: 800; color: var(--txt-dim); margin: 0 0 10px; }

/* trzy kafle stanow */
.ms-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ms-tile {
  border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 6%, #0b0b10);
}
.ms-play { color: var(--stan-aktywna); }
.ms-arch { color: var(--accent-social); }
.ms-wish { color: var(--zyczenia); }
.ms-tile .ms-ic { font-size: 22px; }
.ms-tile b { font-size: var(--fs-body); letter-spacing: 1px; }
.ms-tile p { margin: 0; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.45; flex: 1; }
.ms-tile.ms-done { opacity: 0.55; }
.ms-tile .ms-ok { display: none; font-size: var(--fs-small); font-weight: 800; }
.ms-tile.ms-done .ms-ok { display: block; }
.ms-tile.ms-done .ms-btn { display: none; }

.ms-btn {
  font-family: inherit; font-size: var(--fs-small); font-weight: 800; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ms-tile .ms-btn {
  border-color: currentColor; color: inherit; align-self: flex-start;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.ms-medal { font-size: var(--fs-small); color: var(--trofeum); }
.ms-medal i { margin-right: 4px; }
.ms-bn { white-space: nowrap; overflow-wrap: normal; }

/* piec gier */
.ms-five {
  display: flex; align-items: center; gap: 8px 14px; margin-top: 14px; flex-wrap: wrap;
  font-size: var(--fs-body); color: #fff;
}
.ms-prog { flex: 1; min-width: 80px; max-width: 180px; height: 8px; border-radius: 4px; background: #1c1a22; overflow: hidden; }
.ms-prog i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

.ms-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.ms-note { font-size: var(--fs-small); color: var(--txt-dim); }
.ms-foot .ms-note i { color: var(--trofeum); }
.ms-later {
  font-family: inherit; font-size: var(--fs-small); color: var(--txt-dim);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

/* KROK 3: pasek „w trakcie” nad biblioteka (makieta 7.10, stan 2) */
.ms-bar {
  display: flex; align-items: center; gap: 10px 14px; margin: 4px 0 18px; padding: 10px 14px;
  border-radius: 12px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--sys) 30%, transparent); background: #0e0e14;
}
.ms-bar, .ms-bar * { min-width: 0; }
.ms-bar .ms-kick { white-space: nowrap; }
.ms-seg { display: flex; gap: 4px; }
.ms-seg i { width: 26px; height: 6px; border-radius: 3px; background: #2a2632; }
.ms-seg i.on { background: var(--accent); }
.ms-next { flex: 1; min-width: 160px; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.45; }
.ms-next b { color: #fff; }
.ms-x {
  background: none; border: 0; color: var(--txt-dim); font-size: 15px; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
}
.ms-x:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* rozwinieta karta z paska: „Zwin” w prawym gornym rogu */
.ms-card { position: relative; }
.ms-x-card { position: absolute; top: 12px; right: 12px; }

/* KROK 4: misja wykonana (makieta 7.10, stan 3) */
.ms-win { text-align: center; padding: 26px 22px; }
.ms-win .ms-kick { justify-content: center; }
.ms-win .ms-h { font-size: 24px; }
.ms-win .ms-lead { margin: 0 auto 16px; }
.ms-hl { color: #fff; }
.ms-medals { display: flex; justify-content: center; gap: 14px 18px; margin: 14px 0 16px; flex-wrap: wrap; }
.ms-medals span {
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 150px;
  font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.3;
  overflow-wrap: normal; /* nazwa odznaki nie peka w srodku slowa */
}
.ms-medals i { font-size: 30px; color: var(--trofeum); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--trofeum) 50%, transparent)); }

/* PC: DODAJ przewija do panelu dodawania i blyska jego ramka */
#add-game-panel.ms-flash { animation: ms-flash 1.5s ease-out; }
@keyframes ms-flash {
  0%, 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
}

/* Uklad zalezy od szerokosci KARTY, nie ekranu: na PC lewa kolumna ma
   zawsze 380 px, wiec w oknie 800-1024 px karta ma tylko 340-560 px */
#ms-root { container: ms / inline-size; }

@container ms (max-width: 520px) {
  .ms-card { padding: 16px; margin: 0 0 16px; border-radius: 16px; }
  .ms-h { font-size: 19px; }
  .ms-paths { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* pasek: „Nastepne” w osobnym wierszu, przyciski za nim */
  .ms-bar { margin: 0 0 14px; }
  .ms-bar .ms-next { order: 3; flex-basis: 100%; }
  .ms-bar .ms-btn { order: 4; margin-right: auto; }
  .ms-bar .ms-x { order: 5; }
  .ms-win { padding: 20px 16px; }
  .ms-win .ms-h { font-size: 21px; }
}

@container ms (max-width: 640px) {
  /* kafle jako zwarte wiersze: ikona | nazwa, opis, odznaka | przycisk */
  .ms-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ms-tile {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas: "ic nm bt" "ic tx bt" "ic md bt";
    column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px;
  }
  .ms-tile .ms-ic { grid-area: ic; }
  .ms-tile b { grid-area: nm; }
  .ms-tile p { grid-area: tx; }
  .ms-tile .ms-medal { grid-area: md; }
  .ms-tile .ms-btn, .ms-tile .ms-ok { grid-area: bt; align-self: center; }
}