/* Oś czasu (serial / aktor / bohater) — komputer: pionowo, telefon: poziomo */
.osc { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 12px 16px; }
:where(.osc) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(.osc) a { color: inherit; text-decoration: none; }

.osc-c0 { --c: var(--bar-1, #2DC76D); } .osc-c1 { --c: var(--bar-2, #C653C6); }
.osc-c2 { --c: var(--bar-3, #B8C020); } .osc-c3 { --c: var(--bar-4, #1BB5C8); }
.osc-c4 { --c: var(--bar-5, #E8821A); } .osc-c5 { --c: var(--bar-6, #4A90D9); }
.osc-c6 { --c: var(--bar-7, #E03A5C); } .osc-c7 { --c: var(--bar-8, #7B5EA7); }

.osc-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; background: var(--accent, #B5271E); color: #fff; font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--border); }
.osc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osc-av--m { width: 30px; height: 30px; font-size: .85rem; box-shadow: none; }

/* ---------- KOMPUTER (pionowo) ---------- */
.osc-v { --osc-kol: minmax(64px, 132px); overflow-x: auto; }
.osc-v__glowy, .osc-v__wykres { display: grid; grid-template-columns: 52px repeat(var(--osc-n), var(--osc-kol)); justify-content: center; column-gap: 8px; min-width: min-content; }
.osc-v__glowa { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 2px 10px; text-align: center !important; border-radius: 8px; transition: background .15s; }
.osc-v__glowa:hover { background: var(--bg3); }
.osc-v__nazwa { font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--txt); }
.osc-v__pod { font-size: .7rem; line-height: 1.2; color: var(--txt2); }
.osc-v__wykres { height: clamp(360px, 52vh, 560px); }
.osc-v__os { position: relative; }
.osc-v__rok { position: absolute; right: 6px; transform: translateY(-50%); font-size: .72rem; color: var(--txt2); font-variant-numeric: tabular-nums; }
.osc-v__pole { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; position: relative;
  background: var(--bg3); border-radius: 8px; }
.osc-v__linia { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); pointer-events: none; }
.osc-v__kol { position: relative; }
.osc-v__pasek { position: absolute; left: 6px; right: 6px; min-height: 30px; box-sizing: border-box; border-radius: 6px;
  background: var(--c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 6px 2px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: filter .15s, transform .15s; }
.osc-v__pasek:hover { filter: brightness(1.1); transform: scaleX(1.06); z-index: 2; }
.osc-v__lata { font-size: .72rem; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.osc-v__opis { font-size: .65rem; line-height: 1.15; opacity: .92; text-align: center; }

/* ---------- TELEFON (poziomo) ---------- */
.osc-h { display: none; }
.osc-h__skala { position: relative; height: 18px; margin: 0 4px 6px; border-bottom: 1px solid var(--border); }
.osc-h__skala span { position: absolute; transform: translateX(-50%); font-size: .7rem; color: var(--txt2); font-variant-numeric: tabular-nums; }
.osc-h__wiersz { display: block; width: 100%; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.osc-h__wiersz:last-child { border-bottom: 0; }
.osc-h__glowa { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.osc-h__txt { font-size: .88rem; line-height: 1.2; color: var(--txt); }
.osc-h__txt small { color: var(--txt2); font-size: .78rem; }
.osc-h__tor { position: relative; display: block; height: 22px; background: var(--bg3); border-radius: 11px; }
.osc-h__tor i { position: absolute; top: 3px; bottom: 3px; border-left: 1px dashed var(--border); }
.osc-h__pasek { position: absolute; top: 0; bottom: 0; min-width: 22px; border-radius: 11px; background: var(--c);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.osc-h__pasek em { font-style: normal; font-size: .7rem; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); }

@media (max-width: 700px) {
  .osc { padding: 10px; }
  .osc-v { display: none; }
  .osc-h { display: block; }
}

.osc-h__pasek--waski em { position: absolute; left: calc(100% + 4px); color: var(--txt); text-shadow: none; padding: 0; }
.osc-h__pasek--waski.osc-h__pasek--prawo em { left: auto; right: calc(100% + 4px); }

/* Tabela ról na telefonie → karty */
@media (max-width: 700px) {
  .role-table thead { display: none; }
  .role-table, .role-table tbody, .role-table tr { display: block; width: 100%; }
  .role-table tr { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 10px 12px; margin-bottom: 10px; }
  .role-table td { display: inline; border: 0 !important; padding: 0 !important; background: none !important; font-size: .9rem; }
  .role-table td:first-child { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
  .role-table td:not(:first-child):not(:empty)::after { content: " · "; color: var(--txt2); }
  .role-table td:last-child::after { content: "" !important; }
  .role-table td:empty { display: none; }
}