/* Pierwsze kroki: odtwarzacz animowanych lekcji, lista lekcji i ściąga z zasadami */

.guide { flex: 1; width: 100%; max-width: 1500px; margin: 0 auto; padding: 16px 20px 48px; }
.guide-title { margin: 0; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 960px) {
  .guide { padding: 12px 16px 32px; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
}

/* link na ekranie startowym */
.home-guide {
  display: flex; align-items: center; gap: 14px; margin: 28px auto 0; max-width: 640px; padding: 12px 18px;
  font: inherit; color: var(--ink); text-align: left;
  background: rgba(247, 238, 219, 0.85); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  cursor: pointer;
}
.home-guide:hover { background: var(--paper); border-style: solid; }
.home-guide img { width: 44px; height: 44px; flex: none; opacity: 0.8; }

/* ------------------------------------------------------------ odtwarzacz */

.guide-player { padding: 12px; margin-bottom: 0; }
.guide-player:focus { outline: none; }
.guide-player::before { display: none; }
.guide-screen { position: relative; border: 1px solid var(--line-strong); border-radius: 4px 4px 0 0; overflow: hidden; }

.guide-poster {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border: 0; text-align: center;
  font: inherit; color: #f7eedb;
  background: rgba(43, 29, 20, 0.6); backdrop-filter: blur(2px);
  cursor: pointer;
}
.guide-poster.end { cursor: default; }
.guide-poster-no { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #d6bf8e; }
.guide-poster-title { font: 700 clamp(26px, 4vw, 50px)/1.15 var(--font-title); color: #f3dfb0; }
.guide-poster-sub { max-width: 560px; font-size: 16px; color: #ead9b4; }
.guide-poster-play {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px rgba(243, 223, 176, 0.25); transition: transform 0.2s;
}
.guide-poster-play svg { width: 40px; height: 40px; fill: #fff7ea; margin-left: 4px; }
.guide-poster:hover .guide-poster-play { transform: scale(1.08); }
.guide-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.guide-caption {
  min-height: 4.4em; padding: 10px 16px;
  background: #2b1d14; color: #f7eedb;
  font-size: 18px; line-height: 1.45;
  border-radius: 0 0 4px 4px;
}

.guide-progress { display: flex; gap: 3px; margin: 12px 0 8px; }
.guide-seg {
  position: relative; flex: 1 1 0; height: 10px; padding: 0; overflow: hidden;
  border: 0; border-radius: 5px; background: rgba(74, 50, 28, 0.18); cursor: pointer;
}
.guide-seg:hover { background: rgba(74, 50, 28, 0.32); }
.guide-seg.done { background: var(--gold); }
.guide-seg.current { background: rgba(168, 122, 38, 0.35); }
.guide-seg-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); }
.guide-seg-fill.running { animation: guide-seg linear forwards; }
@keyframes guide-seg { to { width: 100%; } }

.guide-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guide-ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 38px; padding: 0 9px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
}
.guide-ctl:hover:not(:disabled) { background: var(--paper-2); }
.guide-ctl:disabled { opacity: 0.4; cursor: not-allowed; }
.guide-ctl svg { width: 20px; height: 20px; fill: currentColor; }
.guide-ctl-main { min-width: 48px; height: 48px; color: #fff7ea; background: var(--accent); border-color: var(--accent); }
.guide-ctl-main:hover:not(:disabled) { background: #74220f; }
.guide-ctl-main svg { width: 26px; height: 26px; }
.guide-voice-btn.off { color: var(--ink-faint); }
.guide-counter { margin-left: 4px; font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.guide-spacer { flex: 1; }
.guide-select { font-size: 14px; padding: 4px 6px; max-width: 220px; }
.guide-voice-note { margin: 8px 2px 0; font-size: 14px; color: var(--warn); }

/* lista lekcji */
.guide-list { position: sticky; top: 12px; padding: 12px; margin-bottom: 0; }
.guide-list::before { display: none; }
.guide-lesson {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px;
  font: inherit; color: var(--ink); text-align: left;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.guide-lesson:hover { background: var(--paper-2); }
.guide-lesson.active { background: var(--ink); color: var(--paper); }
.guide-lesson.active .guide-lesson-sub, .guide-lesson.active .guide-lesson-time { color: #d6bf8e; }
.guide-lesson-no {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  font-size: 15px; font-weight: 700; border: 1px solid currentColor; border-radius: 50%;
}
.guide-lesson-no.watched { color: #fff; background: var(--ok); border-color: var(--ok); }
.guide-lesson-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.guide-lesson-title { font-weight: 700; line-height: 1.2; }
.guide-lesson-sub { font-size: 13px; line-height: 1.25; color: var(--ink-soft); }
.guide-lesson-time { flex: none; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .guide-list { position: static; }
  .guide-caption { font-size: 16px; }
}

/* ściąga */
.guide-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.guide-sheet-card { margin: 0; }
.guide-sheet-card.active { box-shadow: 0 0 0 2px var(--gold), var(--shadow); }
.guide-sheet-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guide-sheet-card .card-title { margin: 0; }
.guide-sheet-card ul { margin: 8px 0 0; padding-left: 20px; }
.guide-sheet-card li + li { margin-top: 4px; }
.guide-footnote { margin-top: 16px; text-align: center; }

/* ------------------------------------------------------------ scena (160 x 90 jednostek) */

.gs-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  container-type: inline-size;
  background: radial-gradient(ellipse at 50% 45%, #fdf7e8 0%, #f3e5c6 62%, #e0c896 100%);
}
.gs-inner {
  --u: calc(100cqw / 160);
  position: absolute; inset: 0;
  font-family: var(--font-ui); color: var(--ink); line-height: 1.2;
}

.gs-item {
  --s: calc(var(--u) * var(--size));
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8);
  text-align: center;
  transition: left 0.75s ease, top 0.75s ease, transform 0.55s ease, opacity 0.45s ease, filter 0.45s ease;
}
.gs-layer { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.45s ease; }
.gs-hidden { opacity: 0 !important; pointer-events: none; }
/* opóźnienie z kroku lekcji (styl inline elementu) obowiązuje też animacje w środku */
.gs-item > *, .gs-chips-body img, .gs-bar-head, .gs-bar-tokens img, .gs-bar-track, .gs-bar-fill, .gs-slots-row, .gs-slot { transition-delay: inherit; }
.gs-slots-body, .gs-slots-row, .gs-slot { animation-delay: inherit; }

/* tekst */
.gs-text { font-size: var(--s); white-space: nowrap; }
.gs-text.gs-wrap { white-space: normal; }
.gs-font-title { font-family: var(--font-title); font-weight: 700; }
.gs-italic { font-style: italic; }
.gs-bold { font-weight: 700; }
.gs-color-soft { color: var(--ink-soft); }
.gs-color-accent { color: var(--accent); }
.gs-color-ok { color: var(--ok); }
.gs-color-err { color: var(--err); }
.gs-box {
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.4);
  background: rgba(255, 250, 238, 0.94);
  border: 1px solid var(--line-strong); border-radius: calc(var(--u) * 1.2);
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.22);
}
.gs-ic { height: 1.15em; width: auto; vertical-align: -0.22em; }

/* grafiki: ikona, obrazek, żeton na planszy */
.gs-graphic { flex: none; width: var(--s); height: var(--s); }
.gs-icon .gs-graphic { object-fit: contain; }
.gs-label { font-size: calc(var(--u) * 3.3); font-weight: 700; white-space: nowrap; }
.gs-img-frame { position: relative; }
.gs-img-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gs-disc {
  display: grid; place-items: center; overflow: hidden;
  background: var(--paper);
  border: calc(var(--u) * 0.7) solid var(--ok); border-radius: 50%;
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(43, 29, 20, 0.35);
  transition: filter 0.5s, opacity 0.5s, rotate 0.5s, box-shadow 0.3s;
}
.gs-disc img { width: 76%; height: 76%; object-fit: contain; }
.gs-side-enemy .gs-disc { border-color: var(--accent); }
.gs-side-enemy .gs-disc img { width: 100%; height: 100%; object-fit: cover; }
.gs-token .gs-label {
  margin-top: calc(var(--u) * -0.4); padding: 0 0.35em;
  font-size: max(calc(var(--u) * 2.6), calc(var(--s) * 0.17));
  background: rgba(255, 250, 238, 0.85); border-radius: 0.4em;
}

.gs-badge-body {
  display: grid; place-items: center;
  font: 700 calc(var(--s) * 0.62)/1 var(--font-ui); color: #fff7ea;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.4);
}

/* kość */
.gs-die-body {
  position: relative; display: grid; place-items: center;
  background: #fffaf0;
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: 18%;
  box-shadow: 0 calc(var(--u) * 0.6) 0 rgba(43, 29, 20, 0.35);
  transition: opacity 0.35s, background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.gs-die-body:not(.gs-d6) { background: #f6e9cc; border-radius: 30%; }
.gs-pip { position: absolute; width: 18%; height: 18%; border-radius: 50%; background: var(--ink); }
.gs-pip.p1 { left: 15%; top: 15%; } .gs-pip.p3 { left: 67%; top: 15%; }
.gs-pip.p4 { left: 15%; top: 41%; } .gs-pip.p5 { left: 41%; top: 41%; } .gs-pip.p6 { left: 67%; top: 41%; }
.gs-pip.p7 { left: 15%; top: 67%; } .gs-pip.p9 { left: 67%; top: 67%; }
.gs-die-num { font-size: calc(var(--s) * 0.44); line-height: 1; }
.gs-die-kind { position: absolute; bottom: 4%; font-size: calc(var(--s) * 0.16); color: var(--ink-soft); }
.gs-die-body.rolling { animation: gs-roll 0.68s ease-out; }
@keyframes gs-roll {
  0% { rotate: 0deg; translate: 0 0; }
  30% { rotate: -40deg; translate: 0 -30%; }
  60% { rotate: 25deg; translate: 0 5%; }
  100% { rotate: 0deg; translate: 0 0; }
}
.gs-miss .gs-die-body { opacity: 0.4; transition-delay: 0.75s; }
.gs-hit6 .gs-die-body, .gs-max .gs-die-body {
  background: #e7f1dc; border-color: var(--ok);
  box-shadow: 0 0 0 calc(var(--u) * 0.9) rgba(63, 106, 52, 0.35);
}
.gs-hit6 .gs-die-body { transition-delay: 0.75s; }
.gs-max .gs-die-body { animation: gs-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* karta kolejki */
.gs-card { perspective: calc(var(--u) * 90); }
.gs-card-body { position: relative; height: calc(var(--s) * 1.4); transform-style: preserve-3d; transition: transform 0.6s ease; }
.gs-card-body.flipped { transform: rotateY(180deg); }
.gs-card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 8% 6%;
  background: #fffaf0; border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--s) * 0.09);
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(43, 29, 20, 0.35);
}
.gs-card-art { display: grid; place-items: center; width: 86%; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); border-radius: 50%; }
.gs-card-art img { width: 100%; height: 100%; object-fit: cover; }
.gs-card-name { font: 700 calc(var(--s) * 0.15)/1.1 var(--font-ui); }
.gs-card-back {
  justify-content: center; transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, #7a2416 0 7%, #8b2c1c 7% 14%);
  border-color: var(--gold);
}
.gs-card-back img { width: 55%; filter: invert(0.92) sepia(0.4); }

/* wartość cechy, żetony */
.gs-stat-body { display: flex; align-items: center; gap: calc(var(--u) * 1); font: 700 var(--s)/1 var(--font-ui); }
.gs-stat-body img { height: 1.05em; }
.gs-chips-body { display: flex; align-items: center; gap: calc(var(--u) * 0.8); }
.gs-chips-body img { width: var(--s); height: var(--s); object-fit: contain; transition: opacity 0.4s, filter 0.4s; }
.gs-chips-body img.used { opacity: 0.22; filter: grayscale(1); }
.gs-chips-label { margin-right: calc(var(--u) * 0.6); font-size: calc(var(--u) * 3.3); font-weight: 700; }
.gs-chips-empty { font-size: calc(var(--s) * 0.6); font-weight: 700; color: var(--ink-faint); }

/* pasek zdrowia / tarczy */
.gs-bar-body { width: 100%; font-size: var(--s); }
.gs-bar-head { display: flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.gs-bar-head > img { height: 1.25em; }
.gs-bar-label { font-weight: 700; }
.gs-bar-tokens img { height: 1.15em; vertical-align: -0.25em; transition: opacity 0.4s, filter 0.4s; }
.gs-bar-tokens img.used { opacity: 0.22; filter: grayscale(1); }
.gs-bar-value { margin-left: auto; font-variant-numeric: tabular-nums; }
.gs-bar-track {
  height: 0.95em; margin-top: 0.25em; overflow: hidden;
  background: rgba(74, 50, 28, 0.14); border: 1px solid var(--line-strong); border-radius: 999px;
}
.gs-bar-fill { height: 100%; background: linear-gradient(#c24a32, #8b2c1c); border-radius: 999px; transition: width 0.8s ease; }
.gs-bar-shield .gs-bar-fill { background: linear-gradient(#8a98a3, #56636d); }
.gs-broken .gs-bar-track { border-color: var(--err); border-style: dashed; }
.gs-broken .gs-bar-value::after { content: ' · pęka!'; color: var(--err); }

/* lista (działania, tabele) */
.gs-list-body {
  width: 100%; padding: 0.55em 0.8em; text-align: left; font-size: var(--s);
  background: rgba(255, 250, 238, 0.94); border: 1px solid var(--line-strong); border-radius: calc(var(--u) * 1.2);
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.22);
}
.gs-list-title { margin-bottom: 0.25em; font: 700 1.12em/1.2 var(--font-title); }
.gs-list-row { display: flex; align-items: center; gap: 0.45em; padding: 0.14em 0.35em; border-radius: 0.3em; transition: background 0.4s, opacity 0.4s; }
.gs-list-row.hl { background: rgba(168, 122, 38, 0.28); }
.gs-list-row.strike { opacity: 0.45; text-decoration: line-through; }
.gs-list-cost { display: inline-flex; flex: none; }
.gs-list-cost img { height: 1.15em; }

/* tor wytrzymałości */
.gs-slots-body { font-size: var(--s); }
.gs-slots-label { margin-bottom: 0.45em; font-weight: 700; white-space: nowrap; }
.gs-slots-row { display: flex; gap: 0.6em; }
.gs-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em;
  width: 5.6em; height: 5.6em; padding: 0.2em;
  background: rgba(255, 250, 238, 0.6); border: 2px dashed var(--line-strong); border-radius: 0.5em;
  transition: background 0.4s, border-color 0.4s;
}
.gs-slot.last { border-color: var(--err); }
.gs-slot.filled { background: #f6e1d7; border-style: solid; border-color: var(--accent); animation: gs-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: inherit; }
.gs-slot.filled img { height: 2.3em; }
.gs-slot small { font-size: 0.82em; line-height: 1.1; text-align: center; }
.gs-skull { height: 2.6em; opacity: 0.3; }

/* status z kumulacjami */
.gs-status-body {
  display: flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em 0.2em 0.3em; font-size: var(--s);
  background: #fffaf0; border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: 0 1px 3px rgba(60, 35, 10, 0.22);
}
.gs-status-body img { height: 1.4em; }
.gs-status-stacks {
  display: grid; place-items: center; min-width: 1.35em; height: 1.35em;
  font-size: 0.8em; font-weight: 700; color: #fff7ea; background: var(--accent); border-radius: 50%;
}

/* plansza i strzałki */
.gs-hex polygon { fill: rgba(255, 250, 238, 0.55); stroke: rgba(74, 50, 28, 0.42); stroke-width: 0.35; transition: fill 0.4s, stroke 0.4s; }
.gs-hex.path polygon { fill: rgba(196, 145, 40, 0.38); stroke: var(--gold); }
.gs-hex text { font: 700 3.4px var(--font-ui); fill: var(--ink-soft); }
.gs-arrow line { stroke: var(--ok); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease; transition-delay: inherit; }.gs-arrow.gs-hidden line { stroke-dashoffset: var(--len); }
.gs-arrow marker path { fill: var(--ok); }
.gs-arrow-enemy line { stroke: var(--accent); }
.gs-arrow-enemy marker path { fill: var(--accent); }

/* efekty */
.gs-dim { opacity: 0.32; filter: grayscale(0.8); }
.gs-glow { animation: gs-glow 1.4s ease-in-out infinite alternate; }
@keyframes gs-glow {
  from { filter: drop-shadow(0 0 calc(var(--u) * 0.4) rgba(196, 145, 40, 0.6)); }
  to { filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(196, 145, 40, 1)); }
}
.gs-hit { animation: gs-shake 0.55s ease both; }
.gs-hit .gs-disc { box-shadow: 0 0 0 calc(var(--u) * 1.1) rgba(163, 39, 27, 0.55); }
@keyframes gs-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: calc(var(--u) * -1.3) 0; }
  40% { translate: calc(var(--u) * 1.3) 0; }
  60% { translate: calc(var(--u) * -0.8) 0; }
  80% { translate: calc(var(--u) * 0.5) 0; }
}
.gs-pop { animation: gs-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes gs-pop { from { scale: 0.4; } to { scale: 1; } }
.gs-shuffle { animation: gs-shuffle 1s ease; }
@keyframes gs-shuffle {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  25% { rotate: -9deg; translate: calc(var(--u) * -3) 0; }
  50% { rotate: 7deg; translate: calc(var(--u) * 3) 0; }
  75% { rotate: -4deg; translate: calc(var(--u) * -1) 0; }
}
.gs-down .gs-disc { filter: grayscale(1); opacity: 0.55; rotate: 80deg; }
.gs-down .gs-label { opacity: 0.6; text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .gs-item, .gs-layer, .gs-card-body, .gs-bar-fill, .gs-arrow line { transition-duration: 0.01ms !important; }
  .gs-glow, .gs-hit, .gs-pop, .gs-shuffle, .gs-slot.filled, .gs-max .gs-die-body { animation: none !important; }
  .guide-seg-fill.running { animation: none; width: 100%; }
}