/* Ekran „Pakiety słówek” w stylu WRD + ikony pakietów (assets/pk-*.png z Desktop/ikony_do_aplikacji) */

.pk-back { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #131d4c; display: grid; place-items: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.pk-back svg { width: 24px; height: 24px; }
.pk-back:hover { background: rgba(97, 67, 255, 0.08); transform: translateX(-2px); }

.pk-list { display: grid; gap: 14px; }
.pk-empty { margin: 48px 16px; text-align: center; font-size: 17px; font-weight: 700; color: #7a7f95; }

.pk-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 150px; padding: 18px 16px 18px 24px; border: 0; border-radius: 28px; cursor: pointer; text-align: left; font: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 82%, #6b7599 18%) 0 12px, var(--tint) 12px);
  box-shadow: 0 6px 18px rgba(40, 50, 100, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pk-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(40, 50, 100, 0.13); }
.pk-card:active { transform: scale(0.985); }
.pk-card .ripple { background: rgba(255, 255, 255, 0.6); }
.pk-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pk-name { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.15; color: #1b1f3e; }
.pk-chev { display: inline-block; margin-left: 2px; color: #1b1f3e; transition: transform 0.2s ease; }
.pk-card:hover .pk-chev { transform: translateX(4px); }
.pk-count { margin-top: 2px; font-size: 18px; font-weight: 700; color: #7c8196; }
.pk-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; height: 42px; padding: 0 18px 0 12px; border-radius: 99px;
  background: var(--pill); color: #fff; font-family: var(--display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -6px var(--pill);
}
.pk-pill svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.pk-img { width: 112px; height: 112px; flex-shrink: 0; border-radius: 26px; transform: rotate(-4deg); filter: drop-shadow(0 10px 14px rgba(30, 40, 90, 0.2)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pk-img.svg { display: grid; place-items: center; filter: none; }
.pk-img.svg svg { width: 100%; height: auto; }
.pk-card:hover .pk-img { transform: rotate(3deg) scale(1.08); }
.pk-card:focus-visible,
.pk-back:focus-visible { outline: 3px solid #5a4dff; outline-offset: 3px; }

/* ikony pakietów i tematów w innych miejscach */
.pack-img { width: 72px; height: 72px; border-radius: 18px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pack:has(.pack-img) .pack-art { width: 76px; height: 76px; }
.pack:hover .pack-img { transform: rotate(-5deg) scale(1.06); }

@media (max-width: 380px) {
  .pk-name { font-size: 22px; }
  .pk-img { width: 96px; height: 96px; }
}

/* ---- ekran pakietu / tematu / listy (jak w WRD): nagłówek, szukaj, słówka z ikonami, „Ucz się” na dole ---- */

.cv-menu { position: relative; }
.cv-menu > summary { list-style: none; }
.cv-menu > summary::-webkit-details-marker { display: none; }

.cv-pop { position: absolute; right: 0; top: 50px; z-index: 10; min-width: 220px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(30, 30, 80, 0.18); animation: cv-pop 0.18s ease-out; }
.cv-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: 700 15px/1.2 Nunito, sans-serif; color: #1b1f3e; text-align: left; }
.cv-pop button svg { width: 20px; height: 20px; color: #6143ff; }
.cv-pop button:hover:not(:disabled) { background: #f3f0ff; }
.cv-pop button:disabled { opacity: 0.4; cursor: default; }
.cv-pop button.danger,
.cv-pop button.danger svg { color: #d33b3b; }
@keyframes cv-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

/* wiersz słówka (też w zakładce Słówka) */
.word-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-radius: 16px; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.word-row:hover { background: rgba(97, 67, 255, 0.05); }
.word-row:active { transform: scale(0.99); }
/* cały wiersz klika się przez rozciągnięty przycisk nazwy; głośnik leży nad nim */
.wr-open { display: block; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wr-open::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.wr-open:focus-visible { outline: none; }
.wr-open:focus-visible::after { outline: 3px solid #5a4dff; outline-offset: 2px; }
.wr-open b { display: block; }
.wr-lvl { flex-shrink: 0; }
.wr-icon { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; }
.wr-img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; box-shadow: 0 4px 10px rgba(30, 40, 90, 0.12); }
.wr-emoji { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; }
.wr-main { gap: 2px; }
.wr-en { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wr-en b { font-family: var(--display); font-size: 20px; font-weight: 600; color: #1b1f3e; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-say { position: relative; z-index: 1; flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: #a3a8bd; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.wr-say svg { width: 18px; height: 18px; }
.wr-say:hover { color: #6143ff; background: #f0edff; transform: scale(1.1); }
.wr-pl { font-size: 16px !important; font-weight: 600; color: #7a7f95; }
.wr-known { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #2fcf6b; color: #fff; box-shadow: 0 3px 8px rgba(47, 207, 107, 0.4); }
.wr-known svg { width: 16px; height: 16px; stroke-width: 3.4; }

.cv-list { padding: 4px 6px; margin-bottom: 8px; }

.cv-cta { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 4; margin: 0 -16px; padding: 18px 16px 6px; background: linear-gradient(180deg, rgba(245, 244, 253, 0), #f5f4fd 45%); }
.cv-learn {
  position: relative; overflow: hidden; width: 100%; height: 64px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-size: 26px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #7a4bff, #6143ff); box-shadow: 0 14px 30px -10px rgba(97, 67, 255, 0.75);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.cv-learn > span { position: relative; z-index: 2; }
.cv-learn::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 0.75s ease; }
.cv-learn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 36px -10px rgba(97, 67, 255, 0.85); filter: saturate(1.15); }
.cv-learn:hover::after { left: 125%; }
.cv-learn:active:not(:disabled) { transform: scale(0.98); }
.cv-learn:disabled { opacity: 0.5; cursor: default; }
.cv-learn .ripple { background: rgba(255, 255, 255, 0.45); }
.cv-learn:focus-visible,
.cv-menu > summary:focus-visible,
.wr-say:focus-visible { outline: 3px solid #5a4dff; outline-offset: 3px; }

@media (max-width: 380px) {
  .wr-icon,
.wr-img { width: 48px; height: 48px; }
  .wr-emoji { width: 46px; height: 46px; font-size: 24px; }
  .wr-en b { font-size: 18px; }
}

/* ---- karta „Wznów” (ostatni pakiet) ---- */
.rs-card { position: relative; display: flex; align-items: center; gap: 16px; margin: 14px 0 6px; padding: 12px 14px 12px 12px; border-radius: 28px; background: #fff; box-shadow: 0 8px 24px rgba(40, 50, 100, 0.08); cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.rs-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(40, 50, 100, 0.14); }
.rs-open { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rs-open::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.rs-open:focus-visible { outline: none; }
.rs-open:focus-visible::after { outline: 3px solid #5a4dff; outline-offset: 3px; }
.rs-art { width: 118px; height: 118px; flex-shrink: 0; display: grid; place-items: center; border-radius: 24px; background: var(--tint); }
.rs-img { width: 92px; height: 92px; border-radius: 20px; box-shadow: 0 6px 14px rgba(30, 40, 90, 0.18); transform: rotate(-4deg); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rs-card:hover .rs-img { transform: rotate(3deg) scale(1.06); }
.rs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rs-text b { font-family: var(--display); font-size: 24px; font-weight: 700; color: #131d4c; line-height: 1.15; }
.rs-text > span { font-size: 17px; font-weight: 700; color: #7a7f95; }
.rs-go { position: relative; z-index: 1; overflow: hidden; margin-top: 10px; padding: 0 26px; height: 46px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #7a4bff, #6143ff); box-shadow: 0 10px 22px -8px rgba(97, 67, 255, 0.8); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.rs-go:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(97, 67, 255, 0.9); }
.rs-go:active { transform: scale(0.96); }
.rs-go .ripple { background: rgba(255, 255, 255, 0.5); }
.rs-chev { font-size: 30px; color: #9096ad; padding-right: 4px; transition: transform 0.2s ease; }
.rs-card:hover .rs-chev { transform: translateX(3px); color: #6143ff; }

/* ---- wspólne: zielony „Ucz się” i przyciski pod nim ---- */
.pick-go { position: relative; overflow: hidden; width: 100%; height: 64px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #5fd61c, #3fc40f); box-shadow: 0 14px 30px -10px rgba(76, 200, 20, 0.8); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.pick-go > span { position: relative; z-index: 2; }
.pick-go::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); transition: left 0.75s ease; }
.pick-go:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -10px rgba(76, 200, 20, 0.9); filter: saturate(1.1); }
.pick-go:hover::after { left: 125%; }
.pick-go:active { transform: scale(0.98); }
.pick-go .ripple { background: rgba(255, 255, 255, 0.5); }
.wd-actions { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; margin-top: 18px; }
.wd-actions > span { height: 34px; background: #dfe2ec; }
.wd-actions.one { grid-template-columns: 1fr; }
.wd-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 0; background: none; cursor: pointer; font: 700 19px Nunito, sans-serif; color: #7a86a8; border-radius: 12px; transition: color 0.2s ease, background 0.2s ease; }
.wd-link svg { width: 20px; height: 20px; }
.wd-link:hover { color: #6143ff; background: #f0edff; }
.wa-img { width: 150px; height: 150px; border-radius: 30px; box-shadow: 0 10px 24px rgba(30, 40, 90, 0.2); }
.wa-emoji { font-size: 110px; line-height: 1; filter: drop-shadow(0 8px 12px rgba(30, 40, 90, 0.18)); }
.wd-say { width: 44px; height: 44px; margin-left: 10px; border: 0; border-radius: 50%; background: none; vertical-align: middle; display: inline-grid; place-items: center; cursor: pointer; color: #a3a8bd; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.wd-say svg { width: 28px; height: 28px; }
.wd-say:hover { color: #6143ff; background: rgba(97, 67, 255, 0.1); transform: scale(1.08); }

/* ---- ekran „Nauka”: wybór nowych słów ---- */
.pick-top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; margin: -4px 0 8px; }
.pick-top h2 { margin: 0; text-align: center; font-family: var(--display); font-size: 26px; font-weight: 800; color: #131d4c; }
.pick-count { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: #efeaff; color: #5a3fe0; font-family: var(--display); font-size: 17px; }
.pick-count svg,
.pick-count img { width: 20px; height: 20px; object-fit: contain; }
.pick-progress { display: block; height: 4px; margin: 0 -16px 10px; background: rgba(19, 29, 76, 0.07); }
.pick-progress i { display: block; height: 100%; background: linear-gradient(90deg, #5fd61c, #3fc40f); border-radius: 0 4px 4px 0; transition: width 0.35s ease; }
.pick-card { text-align: center; animation: pick-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pick-in { from { opacity: 0; transform: translateX(28px); } }
.pick-label { margin: 18px 0 20px; font-size: 22px; font-weight: 700; color: #7a86a8; }
.pick-label span { display: block; margin-top: 2px; font-size: 14px; color: #a3a8bd; }
.pick-tile { width: min(250px, 66vw); aspect-ratio: 1; margin: 0 auto 30px; display: grid; place-items: center; border-radius: 44px; background: var(--tint); box-shadow: 0 7px 0 color-mix(in srgb, var(--tint) 80%, #c0673f 20%); }
.pick-en { margin: 0; font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.15; color: #131d4c; }
.pick-pl { margin: 4px 0 0; font-size: 24px; font-weight: 600; color: #7a86a8; }
.pick-actions { max-width: 420px; margin: 40px auto 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

/* ---- ekran słówka ---- */
.wd-hero { margin: -14px -16px 0; padding: 10px 16px 26px; text-align: center; background: var(--tint); }
.wd-bar { display: flex; justify-content: space-between; }
.wd-fav svg { width: 26px; height: 26px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.2s ease; }
.wd-fav.on { color: #ef4b6c; }
.wd-fav.on svg { fill: #ef4b6c; transform: scale(1.1); }
.wd-fav:active svg { transform: scale(0.8); }
.wd-art { display: grid; place-items: center; min-height: 170px; margin: 6px 0 18px; animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pick-pop { from { opacity: 0; transform: scale(0.85); } }
.wd-en { margin: 0; font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1.15; color: #131d4c; }
.wd-hero .wd-say { color: #d06a55; }
.wd-pron { margin: 6px 0 0; font-size: 24px; color: #d06a55; }
.wd-body { margin: 0 -16px; padding: 0 16px 10px; background: #fff; }
.wd-pl { display: flex; flex-direction: column; align-items: center; padding: 22px 0 18px; border-bottom: 1px solid #eceef6; }
.wd-pl b { font-size: 30px; font-weight: 700; color: #1b1f3e; text-align: center; }
.wd-pl span { font-size: 20px; color: #a3a8bd; }
.wd-chip-row { text-align: center; padding: 18px 0 6px; }
.wd-topic { border: 0; padding: 6px 18px; border-radius: 999px; background: #edf0f7; cursor: pointer; font: 700 17px Nunito, sans-serif; color: #7a86a8; transition: background 0.2s ease, color 0.2s ease; }
.wd-topic:hover { background: #e4ddff; color: #5a3fe0; }
.wd-block { padding: 14px 4px; border-bottom: 1px solid #f1f2f7; }
.wd-block:last-child { border-bottom: 0; }
.wd-block h3 { margin: 0 0 8px; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9096ad; }
.wd-block p { margin: 0; font-size: 17px; color: #1b1f3e; }

/* krótki gradient: przycisk zasłania jak najmniej tekstu nad sobą */
.wd-cta { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 12px); }
.wd-body { padding-bottom: 18px; }
.wd-state { display: flex; align-items: center; justify-content: center; gap: 12px; height: 64px; border-radius: 999px; font-family: var(--display); font-size: 24px; font-weight: 700; }
.wd-state svg { width: 26px; height: 26px; stroke-width: 3.2; }
.wd-state.known { color: #fff; background: linear-gradient(90deg, #2fcf6b, #20b85a); box-shadow: 0 14px 30px -12px rgba(34, 184, 90, 0.8); animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wd-state.learning { color: #6f7a9c; background: #eef1f8; }
.wd-ring { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#2fcf6b calc(var(--p) * 360deg), #d7f3df 0); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); }
@media (max-width: 380px) {
  .pick-en,
.wd-en { font-size: 32px; }
  .rs-art { width: 92px; height: 92px; }
  .rs-img { width: 72px; height: 72px; }
}

/* ---- okienko w stylu aplikacji (ask) ---- */
dialog.ask { width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 28px; background: #fff; color: #131d4c; box-shadow: 0 30px 70px rgba(20, 20, 60, 0.3); animation: ask-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); }
dialog.ask::backdrop { background: rgba(19, 22, 50, 0.45); backdrop-filter: blur(3px); animation: ask-fade 0.2s ease; }
@keyframes ask-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes ask-fade { from { opacity: 0; } }
.ask-box { padding: 24px 22px 20px; }
.ask-box h2 { margin: 0 0 6px; font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.2; }
.ask-box p { margin: 0 0 14px; font-size: 16px; color: #6f7590; }
.ask-input { width: 100%; height: 52px; margin: 6px 0 4px; padding: 0 16px; border: 2px solid #e4e1f2; border-radius: 16px; background: #f7f6fd; font: 700 18px Nunito, sans-serif; color: #131d4c; outline: none; transition: border-color 0.2s ease, background 0.2s ease; }
.ask-input:focus { border-color: #6143ff; background: #fff; }
.ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ask-btn { height: 52px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #7a4bff, #6143ff); box-shadow: 0 10px 22px -10px rgba(97, 67, 255, 0.8); transition: transform 0.15s ease, filter 0.15s ease; }
.ask-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ask-btn:active { transform: scale(0.97); }
.ask-btn.ghost { color: #5a5f7a; background: #eef0f7; box-shadow: none; }
.ask-btn.danger { background: linear-gradient(90deg, #f0566b, #d93a52); box-shadow: 0 10px 22px -10px rgba(217, 58, 82, 0.8); }
.ask-btn:focus-visible { outline: 3px solid #5a4dff; outline-offset: 3px; }

/* ---- przypomnienie o kopii zapasowej (strona główna) ---- */
.backup-nag { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 14px 10px 14px 16px; border-radius: 22px; background: #fff7e6; border: 1.5px solid #ffe1a6; animation: ask-in 0.3s ease-out; }
.bn-icon { font-size: 28px; }
.bn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bn-text b { font-family: var(--display); font-size: 18px; font-weight: 700; color: #6b4300; }
.bn-text span { font-size: 14px; color: #8a6a2c; line-height: 1.35; }
.bn-go { flex-shrink: 0; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 17px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ffb020, #f08c00); box-shadow: 0 8px 18px -8px rgba(240, 140, 0, 0.8); transition: transform 0.15s ease; }
.bn-go:hover { transform: translateY(-1px); }
.bn-go:active { transform: scale(0.96); }
.bn-close { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: #b08a40; }
.bn-close svg { width: 18px; height: 18px; }
.bn-close:hover { background: #ffecc4; }

/* ---- panel dewelopera: ikony słówek ---- */
.dv-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dv-entry h3 { margin: 0 0 2px; }
.dv-bulk { margin: 4px 0 8px; height: 58px; font-size: 18px; }
.dv-count { margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: #efeaff; color: #5a3fe0; font-size: 14px; vertical-align: middle; }
.dv-list { padding: 4px 12px; }
.dv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f1f6; }
.dv-row:last-child { border-bottom: 0; }
.dv-img { width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; box-shadow: 0 4px 10px rgba(30, 40, 90, 0.12); }
.dv-img.empty { display: grid; place-items: center; box-shadow: none; border: 2px dashed #d9d5ee; color: #b3b0c8; font-family: var(--display); font-size: 22px; font-weight: 800; }
.dv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dv-text b { font-family: var(--display); font-size: 18px; font-weight: 700; color: #1b1f3e; }
.dv-text span { font-size: 14px; color: #7a7f95; }
.dv-text em { font-style: normal; font-size: 13px; color: #c92a2a; }
.dv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dv-btn { height: 38px; min-width: 38px; padding: 0 12px; border: 1.5px solid #e4e1f2; border-radius: 12px; background: #fff; cursor: pointer; font: 800 14px Nunito, sans-serif; color: #3f4566; transition: transform 0.15s ease, background 0.15s ease; }
.dv-btn:hover:not(:disabled) { transform: translateY(-1px); background: #f5f3ff; }
.dv-btn:disabled { opacity: 0.45; cursor: default; }
.dv-btn.go { border-color: #6143ff; background: #6143ff; color: #fff; }
.dv-btn.ok { border-color: #22b85a; background: #22b85a; color: #fff; }
.dv-btn.danger { color: #c92a2a; }
.dv-busy { font-size: 13px; font-weight: 800; color: #6143ff; }
.dv-spin { width: 22px; height: 22px; border: 3px solid #e4e1f2; border-top-color: #6143ff; border-radius: 50%; animation: dv-spin 0.8s linear infinite; }
@keyframes dv-spin { to { transform: rotate(360deg); } }
/* skrót do panelu dewelopera na stronie głównej (tylko przy lokalnym serwerze) */

.dv-hint { margin: -6px 4px 10px; font-size: 14px; color: #6f7590; }
.dv-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dv-topics .lk-chip { height: auto; padding: 8px 14px; text-align: left; }

/* ---- panel dewelopera: wymowa ---- */
.dv-tabs { margin: 0 0 14px; }
.dv-sub { margin-top: 14px; }
.dv-select { width: 100%; padding: 11px 12px; border-radius: 14px; border: 1.5px solid #e4e1f2; background: #fff; font: 700 15px Nunito, sans-serif; color: #1b1f3e; }
.dv-voice { display: flex; gap: 8px; align-items: center; }
.dv-voice .dv-select { flex: 1; min-width: 0; }
.dv-voice .dv-btn { height: 44px; flex-shrink: 0; }
.dv-err { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff0f0; color: #c92a2a; font-size: 14px; }
.dv-snd { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: #f3f2f8; color: #b3b0c8; font-size: 18px; font-weight: 800; }
.dv-snd.on { background: #e3f8ea; }
.dv-snd.new { background: #efeaff; }
.pp-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-stats.four b { font-size: 22px; }
/* ikona słowa wypełnia cały kafelek w oknie nauki */
.pick-tile:has(.wa-img) { overflow: hidden; }
.pick-tile .wa-img { width: 100%; height: 100%; border-radius: inherit; box-shadow: none; }
/* część mowy obok kropek postępu */
.wr-pos { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 6px; border-radius: 999px; background: var(--pb); color: var(--pf); font-size: 12px; font-weight: 800; white-space: nowrap; }
.wr-pos i { font-style: normal; font-size: 13px; line-height: 1; display: inline-flex; }
.wr-pos i img { width: 17px; height: 17px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); }
.pick-meta .wr-pos i img { width: 20px; height: 20px; }
@media (max-width: 420px) { .wr-pos { padding: 0 6px; } .wr-pos span { display: none; } }
/* obrazek słówka w odpowiedzi (ćwiczenia ze słuchu i „co to znaczy?”) */
.opt.has-pic { padding-top: 10px; padding-bottom: 10px; }
.opt-pic { flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; }
.opt-pic .wr-img,
.opt-pic .wr-emoji { width: 46px; height: 46px; border-radius: 13px; }
.opt-pic .wr-emoji { display: grid; place-items: center; font-size: 24px; }
/* obrazek słowa na ekranie „Nowe słowo” w sesji */
.intro-tile { width: min(170px, 46vw); border-radius: 34px; margin: 14px auto 18px; }
.intro-tile .wa-emoji { font-size: 84px; }
/* ćwiczenia ze słuchu: przycisk „wolniej” obok głośnika */
.listen-row { position: relative; display: flex; justify-content: center; }
.listen-row .listen { margin: 4px 0 10px; }

/* Pakiety słówek: przeciąganie myszą */
.packs { cursor: grab; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.packs.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.packs.dragging .pack { pointer-events: none; }
.packs img { -webkit-user-drag: none; user-select: none; }
/* komunikat z „Cofnij” */
.toast.has-undo { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; overflow: hidden; }
.toast.has-undo[hidden] { display: none; }
.toast-undo { flex-shrink: 0; border: 0; border-radius: 10px; padding: 8px 14px; background: rgba(255, 255, 255, 0.16); color: #b9a8ff; font: 800 15px Nunito, sans-serif; cursor: pointer; }
.toast-undo:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.toast-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #8b6cff; transform-origin: left; animation: toast-time linear forwards; }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ćwiczenie „Czy to jest prawidłowe tłumaczenie?” */
.tf-tile { margin: 6px auto 4px; max-width: 340px; padding: 22px 18px 20px; border-radius: 32px; background: #e6e5ff; box-shadow: 0 6px 0 #c3c0ff; text-align: center; }
.tf-art { width: 92px; height: 92px; display: block; margin: 0 auto 10px; }
.tf-pl { font-family: var(--display); font-size: 34px; font-weight: 700; color: #1b1f3e; line-height: 1.15; overflow-wrap: anywhere; }
.tf-en { margin-top: 8px; font-size: 22px; font-weight: 800; color: #8f86d9; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 14px; }
.tf-btn { height: 72px; border: 2px solid #eceaf6; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px -10px rgba(30, 40, 90, 0.3); cursor: pointer; display: grid; place-items: center; transition: transform 0.15s ease, background 0.2s ease; }
.tf-btn svg { width: 38px; height: 38px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tf-btn.no svg { stroke: #f16aa9; }
.tf-btn.yes svg { stroke: #4cc81a; }
.tf-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: #d8d3f5; }
.tf-btn:active:not(:disabled) { transform: scale(0.96); }
.tf-btn:disabled { cursor: default; }
.tf-btn.ok { border-color: var(--green); background: var(--ok-bg); }
.tf-btn.bad { border-color: var(--bad); background: var(--bad-bg); }
.tf-btn.picked { border-color: var(--accent); background: var(--accent-soft); }
.tf-btn.dim { opacity: 0.45; }
:root[data-theme="dark"] .tf-tile { background: #2b2a4a; box-shadow: 0 6px 0 #3c3a6b; }
:root[data-theme="dark"] .tf-pl { color: #f1f0ff; }
:root[data-theme="dark"] .tf-btn { background: #242640; }
/* ćwiczenie „Dopasuj kartę” */
.pic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 14px; }
.pic-card { position: relative; aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 30px; background: var(--tint, #f2f3f8); overflow: hidden; cursor: pointer; box-shadow: 0 8px 18px -12px rgba(30, 40, 90, 0.35); transition: transform 0.15s ease, border-color 0.2s ease, opacity 0.2s ease; }
.pic-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pic-card kbd { position: absolute; top: 8px; left: 8px; min-width: 22px; padding: 1px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); font-size: 12px; color: #5b6180; }
.pic-card:hover:not(:disabled) { transform: translateY(-3px); }
.pic-card:active:not(:disabled) { transform: scale(0.97); }
.pic-card:disabled { cursor: default; }
.pic-card.ok { border-color: var(--green); }
.pic-card.bad { border-color: var(--bad); }
.pic-card.picked { border-color: var(--accent); }
.pic-card.dim { opacity: 0.45; }
.pic-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: rgba(20, 22, 45, 0.72); color: #fff; font-size: 14px; font-weight: 800; text-align: center; }
/* ustawienia: rodzaje ćwiczeń */
.ex-hint { margin: 0 0 12px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ex-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid #e8e6f3; border-radius: 16px; background: #fafaff; text-align: left; cursor: pointer; opacity: 0.6; transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; }
.ex-chip.on { opacity: 1; border-color: #7c63ff; background: #f1edff; }
.ex-ic { font-size: 22px; flex-shrink: 0; }
.ex-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ex-tx b { font-size: 14px; color: #1b1f3e; }
.ex-tx small { font-size: 12px; color: #7a7f95; }
.ex-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid #cfcbe6; }
.ex-chip.on .ex-check { border-color: #6143ff; background: #6143ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
:root[data-theme="dark"] .ex-chip { background: #22243c; border-color: #34375a; }
:root[data-theme="dark"] .ex-chip.on { background: #2d2854; border-color: #7c63ff; }
:root[data-theme="dark"] .ex-tx b { color: #eceaff; }
/* 🔊 i 🐢 obok słowa: równe, okrągłe przyciski w jednej linii */
.prompt-en .icon-btn,
.word-en .icon-btn,
.tf-en .icon-btn,
.bw-say .icon-btn { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; vertical-align: middle; border-radius: 50%; font-size: 18px; line-height: 1; }
.tf-en { gap: 2px; }
.tf-en .icon-btn:hover,
.bw-say .icon-btn:hover { background: rgba(255, 255, 255, 0.7); }

/* „Utwórz prawidłowe słowo” */
.bw-pic { width: min(150px, 42vw); border-radius: 32px; margin: 10px auto 6px; }
.bw-say { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.bw-level { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #8b90a8; }
.bw-slots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; min-height: 56px; margin: 6px 0 22px; }
.bw-slot { width: 30px; height: 44px; display: grid; place-items: end center; padding-bottom: 4px; border-bottom: 4px solid #b9bdcc; font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; color: #1b1f3e; transition: border-color 0.2s ease; }
.bw-slot.on { border-color: #6143ff; }
.bw-fix { font-family: var(--display); font-size: 30px; font-weight: 700; color: #8b90a8; padding-bottom: 8px; }
.bw-sp { width: 14px; }
.bw-word { min-height: 44px; padding: 6px 12px; border-bottom: 4px solid #b9bdcc; font-family: var(--display); font-size: 24px; font-weight: 700; color: #1b1f3e; }
.bw-word.on { border-color: #6143ff; }
.bw-slots.ok .bw-slot,
.bw-slots.ok .bw-word { border-color: var(--green); color: #15803d; }
.bw-slots.bad .bw-slot,
.bw-slots.bad .bw-word { border-color: var(--bad); color: #c92a2a; }
.bw-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 16px; }
.bw-tile { min-width: 58px; height: 62px; padding: 0 16px; border: 2px solid #eceaf6; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 #e4e1f2; cursor: pointer; font-family: var(--display); font-size: 28px; font-weight: 700; color: #1b1f3e; transition: transform 0.12s ease, opacity 0.2s ease; }
.bw-tile:hover:not(:disabled) { transform: translateY(-2px); }
.bw-tile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #e4e1f2; }
.bw-tile.used { opacity: 0.25; box-shadow: none; }
.bw-tile:disabled { cursor: default; }
.bw-back { width: 66px; height: 62px; border: 0; border-radius: 20px; background: #a3acb9; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 0 #8a93a1; }
.bw-back svg { width: 30px; height: 30px; fill: #fff; stroke: #a3acb9; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bw-back svg path:first-child { stroke: none; }
.bw-back:disabled { opacity: 0.45; cursor: default; }

/* „Dopasuj dwa słowa o tym samym znaczeniu” */
.pr-hint { margin: 4px 0 0; font-size: 14px; color: #8b90a8; }
.pr-wrap { display: grid; gap: 22px; margin-bottom: 16px; }
.pr-col { display: grid; gap: 10px; }
.pr-btn { min-height: 56px; padding: 10px 18px; border: 3px solid transparent; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgba(30, 40, 90, 0.35); cursor: pointer; font-size: 19px; font-weight: 700; color: #1b1f3e; transition: border-color 0.15s ease, opacity 0.3s ease, transform 0.15s ease; }
.pr-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pr-btn.sel { border-color: #4cc81a; }
.pr-btn.bad { border-color: var(--bad); background: var(--bad-bg); animation: pr-shake 0.35s ease; }
.pr-btn.done { opacity: 0.3; border-color: #4cc81a; background: var(--ok-bg); cursor: default; }
@keyframes pr-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* szczegóły słowa: ścieżka etapów nauki */
.wd-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 10px; }
.wd-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wd-step::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 4px; background: #e4e1f2; z-index: 0; }
.wd-step:first-child::before { display: none; }
.wd-step i { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #d9d5ee; }
.wd-step small { font-size: 12px; font-weight: 700; color: #9a9fb6; }
.wd-step.done::before,
.wd-step.cur::before { background: #6143ff; }
.wd-step.done i { background: #6143ff; border-color: #6143ff; }
.wd-step.cur i { border-color: #6143ff; box-shadow: 0 0 0 5px rgba(97, 67, 255, 0.18); }
.wd-step.cur small { color: #5a3fe0; }
.wd-level { margin: 0 0 4px; font-size: 15px; color: #4b5170; }
.wd-level b { color: #1b1f3e; }
.wd-meta { margin: 0; font-size: 14px; color: #8b90a8; }

/* ciemny motyw dla nowszych elementów sesji */
:root[data-theme="dark"] .bw-tile,
:root[data-theme="dark"] .pr-btn { background: #242640; border-color: #34375a; color: #eceaff; box-shadow: 0 6px 0 #1a1c30; }
:root[data-theme="dark"] .bw-slot,
:root[data-theme="dark"] .bw-word { color: #eceaff; border-color: #4a4e70; }
:root[data-theme="dark"] .pic-card kbd { background: #242640; border-color: #34375a; color: #c9c6e8; }
:root[data-theme="dark"] .opt-pic .wr-emoji,
:root[data-theme="dark"] .intro-tile { filter: brightness(0.92); }
:root[data-theme="dark"] .toast.has-undo { background: #eceaff; color: #1b1f3e; }
:root[data-theme="dark"] .toast-undo { background: rgba(97, 67, 255, 0.12); color: #5a3fe0; }
:root[data-theme="dark"] .wd-step i { background: #242640; border-color: #4a4e70; }
:root[data-theme="dark"] .wd-level,
:root[data-theme="dark"] .wd-level b { color: #d9d7f0; }
/* ikony 🔊 / 🐢 jako SVG */
.prompt-en .icon-btn,
.word-en .icon-btn,
.bw-say .icon-btn,
.example .icon-btn,
.mistake .icon-btn { color: #8b90a8; }
.icon-btn:hover svg { color: #6143ff; }

.tf-en .icon-btn { color: #8f86d9; }

/* tak/nie: obrazek angielskiego słowa (jak w WRD) */
.tf-img { width: 120px; height: 120px; margin: 0 auto 12px; }
.tf-img .wa-img { width: 100%; height: 100%; border-radius: 26px; }
.tf-img .wa-emoji { font-size: 80px; }
/* długie słowo: pola w jednej linii (mniejsze), zamiast łamać się jak dwa wyrazy */
.bw-slots.long { flex-wrap: nowrap; gap: 4px; }
.bw-slots.long .bw-slot { flex: 0 1 26px; min-width: 0; font-size: 22px; height: 38px; }
.bw-slots.long .bw-fix { font-size: 22px; }

/* profil: synchronizacja */
.sync-card .set-head { display: flex; align-items: center; gap: 10px; }
.sync-card .set-head .btn { margin-left: auto; }
.sync-ok { font-size: 14px; font-weight: 700; color: #15803d; }
.sync-bad { font-size: 14px; font-weight: 700; color: #c92a2a; }
.sync-code { letter-spacing: 2px; }
.sync-pin { display: flex; gap: 8px; margin: 8px 0; }
.sync-pin input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1.5px solid #e4e1f2; font: 700 18px Nunito, sans-serif; letter-spacing: 3px; }

/* ciemny motyw: rakieta ma jasne tło w pliku — miękko wygaszamy rogi, zostaje okrągła poświata */
:root[data-theme="dark"] .ph-art img { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
/* ciemny motyw: pastelowe tła z kodu (--tint) przyciemnione, żeby jasny tekst był czytelny */
:root[data-theme="dark"] .wd-hero,
:root[data-theme="dark"] .rs-art { background: color-mix(in srgb, var(--tint) 18%, #1a1830); }
:root[data-theme="dark"] .pick-tile,
:root[data-theme="dark"] .pic-card { background: color-mix(in srgb, var(--tint) 30%, #1f1c2b); box-shadow: 0 7px 0 color-mix(in srgb, var(--tint) 20%, #120f1e); }
:root[data-theme="dark"] .wd-hero .wd-pron { color: #ffb089; }
:root[data-theme="dark"] .pk-card { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 45%, #0f0d1c) 0 12px, color-mix(in srgb, var(--tint) 22%, #1f1c2b) 12px); }

/* ---- grafiki 3D z assets/ui/ (zamiast płaskich SVG; core.js: ART3D) ---- */
.art3d { display: block; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(40, 50, 110, 0.18)); }

.sticker .art3d { width: 58px; height: 58px; }
.pnode.trophy .art3d { width: 44px; height: 44px; filter: none; }

.cel-art .art3d { width: 210px; height: 210px; }
.badge-card .art3d { width: 54px; height: 54px; flex-shrink: 0; }
.badge-item .art3d { width: 46px; height: 46px; filter: none; }

.ph-art-icon:has(.art3d) { background: #fff6d6; }
.ph-art-icon .art3d { width: 40px; height: 40px; filter: none; }
.set-icon.glossy {
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(40, 60, 120, 0.16);
}
.set-icon.glossy svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15)); }

/* główne przyciski w całej aplikacji — ten sam gradient i zaokrąglenie co „Ucz się” w Planie dnia */
.btn.pill { border-radius: 999px; background: linear-gradient(90deg, #38a5f1 0%, #5981f3 50%, #715bfa 100%); box-shadow: 0 14px 28px -10px rgba(89, 110, 245, 0.7); }
.btn.pill:hover:not(:disabled) { background: linear-gradient(90deg, #4f8ff6 0%, #6a6cfb 45%, #8a4dff 100%); box-shadow: 0 20px 36px -10px rgba(113, 91, 250, 0.8); }
.btn.pill:disabled { opacity: 0.55; }
/* rodzaje ćwiczeń: ikony 3D (assets/ui/ex-*.png) */
.ex-ic .ex-img { width: 42px; height: 42px; display: block; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(40, 60, 120, 0.18)); }
.ex-chip:not(.on) .ex-img { filter: grayscale(0.6); }

/* ---- sesja: przycisk odtwarzania, „wolniej” i odpowiedzi (ramki, efekty, ikony 3D) ---- */
.listen {
  position: relative; display: grid; place-items: center; width: 108px; height: 108px; padding: 0;
  background: linear-gradient(145deg, #5fb4ff 0%, #6a7dfb 50%, #7b55ff 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 0 rgba(40, 20, 120, 0.25), 0 16px 30px -10px rgba(99, 87, 250, 0.75);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.listen::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(123, 104, 255, 0.35); animation: listen-ring 2.2s ease-out infinite; pointer-events: none; }
.listen::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(95, 180, 255, 0.3); animation: listen-ring 2.2s ease-out 1.1s infinite; pointer-events: none; }
@keyframes listen-ring { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.listen:hover { transform: translateY(-2px) scale(1.04); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 0 rgba(40, 20, 120, 0.25), 0 22px 38px -10px rgba(99, 87, 250, 0.85); }
.listen:active { transform: scale(0.95); }
.listen-img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(20, 20, 80, 0.3)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.listen:hover .listen-img { transform: rotate(-8deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) { .listen::before,
.listen::after { animation: none; opacity: 0; } }

/* odpowiedzi: karta z ramką, akcent z lewej i lekkie uniesienie */
.opt {
  position: relative; overflow: hidden; border: 2px solid #ebe8f7; border-radius: 20px; background: #fff;
  box-shadow: 0 6px 0 #ece9f7, 0 10px 22px -14px rgba(60, 60, 140, 0.35);
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.opt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #5fb4ff, #7b55ff); opacity: 0; transition: opacity 0.2s ease; }
.opt:hover:not(:disabled) { transform: translateY(-2px); border-color: #b9aaff; box-shadow: 0 8px 0 #e3dcff, 0 14px 26px -14px rgba(97, 67, 255, 0.45); }
.opt:hover:not(:disabled)::before { opacity: 1; }
.opt:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #e3dcff; }
.opt kbd { min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 6px; border: 0; border-radius: 9px; background: #f0edff; color: #6a4cff; font: 800 13px Nunito, sans-serif; box-shadow: inset 0 -2px 0 #ddd5ff; }
.opt.ok { border-color: var(--green); background: var(--ok-bg); box-shadow: 0 6px 0 #bfe8cd; }
.opt.ok::before { opacity: 1; background: var(--green); }
.opt.bad { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 6px 0 #f4c5c5; }
.opt.bad::before { opacity: 1; background: var(--bad); }
.opt.picked { border-color: #7b55ff; box-shadow: 0 6px 0 #d9cfff; }
.opt-pic .wr-img { box-shadow: 0 4px 10px rgba(40, 60, 120, 0.2); }
.study { background: linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%); }

/* ---- Słownictwo: karty podpowiedzi (przewijane) i działy ---- */
.promos { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 6px -16px 18px; padding: 6px 16px 14px; scrollbar-width: none; cursor: grab; }
.promos::-webkit-scrollbar { display: none; }
.promos.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.promo {
  position: relative; flex: 0 0 min(300px, 78vw); scroll-snap-align: start; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; column-gap: 8px;
  padding: 18px 16px 16px 20px; border-radius: 28px; background: var(--bg);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 10px 24px -14px rgba(60, 60, 140, 0.35);
}
.promo b { grid-column: 1; font-family: var(--display); font-size: 21px; font-weight: 700; color: #1b1f3e; line-height: 1.15; padding-right: 4px; }
.promo span { grid-column: 1; margin-top: 4px; font-size: 15px; font-weight: 600; color: #6b7090; line-height: 1.3; }
.promo-img { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(40, 50, 110, 0.2)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.promo:hover .promo-img { transform: rotate(-6deg) scale(1.06); }
.promo-go { grid-column: 1; justify-self: start; align-self: end; margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--ink); }
.promo-go:hover { text-decoration: underline; }
.promo-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.6); color: #7a7f95; cursor: pointer; z-index: 1; }
.promo-x svg { width: 14px; height: 14px; }
.promo-x:hover { background: #fff; color: #1b1f3e; }

.voc-menu { display: flex; flex-direction: column; padding: 6px; border-radius: 28px; background: #fff; box-shadow: 0 10px 28px -16px rgba(60, 60, 140, 0.3); }
.voc-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 0; border-radius: 20px; background: none; cursor: pointer; text-align: left; font: inherit; transition: background 0.15s ease, transform 0.15s ease; }
.voc-row + .voc-row { box-shadow: 0 -1px 0 #f1eff8; }
.voc-row:hover { background: #f6f4ff; }
.voc-row:hover .voc-ic { transform: scale(1.1) rotate(-6deg); }
.voc-row:active { transform: scale(0.99); }
.voc-ic { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(40, 50, 110, 0.18)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.voc-row b { flex: 1; font-family: var(--display); font-size: 20px; font-weight: 600; color: #1b1f3e; }
.voc-n { font-family: var(--display); font-size: 19px; font-weight: 600; color: #9696a2; font-variant-numeric: tabular-nums; }
.voc-n.alert { min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; background: linear-gradient(160deg, #ff8ac2, #f0509b); color: #fff; font-weight: 800; box-shadow: 0 4px 10px rgba(240, 80, 155, 0.35); }
.voc-chev { font-size: 22px; color: #c3c0d6; }
.sh-empty { margin: 0; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.6); color: #4b5170; font-weight: 600; }

/* Nowy słownik: tematy bez własnej grafiki pokazują swoje emoji, poziom CEFR na ekranie słówka */
.pk-img.svg .pk-emoji { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; font-size: 56px; line-height: 1; background: linear-gradient(160deg, #ffffff, #f1f3fb); box-shadow: 0 10px 18px rgba(30, 40, 90, 0.16), inset 0 -4px 0 rgba(30, 40, 90, 0.06); }

.words-more { display: block; margin: 14px auto 0; }

/* ---- karuzela „Nowe słówka” (word.js: viewPick) — jak w WRD: sąsiednie karty wystają po bokach, przechylone ---- */
.pick-top { position: relative; z-index: 10; } /* podpowiedź nad kartami */
.pc-stage { position: relative; height: calc(min(240px, 62vw) + 34px); margin: 14px -16px 20px; overflow: hidden; touch-action: pan-y; }
.pc-card {
  position: absolute; top: 12px; left: 50%; width: min(240px, 62vw); aspect-ratio: 1; margin-left: calc(min(240px, 62vw) / -2);
  display: grid; place-items: center; border-radius: 44px; background: var(--tint);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--tint) 80%, #c0673f 20%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-card .wa-img { width: 100%; height: 100%; border-radius: inherit; box-shadow: none; }
.pc-card:has(.wa-img) { overflow: hidden; }
.pc-card .wa-emoji { font-size: 110px; }
.pc-card.cur { z-index: 2; transform: translateX(var(--dx, 0px)) rotate(calc(var(--dr, 0) * 1deg)); }
.pc-card.prev { transform: translateX(calc(-96% + var(--dx, 0px) * 0.6)) rotate(-6deg) scale(0.82); opacity: 0.9; }
.pc-card.next { transform: translateX(calc(96% + var(--dx, 0px) * 0.6)) rotate(6deg) scale(0.82); opacity: 0.9; }
/* przejście: dalej (Naucz się / Później / Wiem) i wstecz (Cofnij) */
.pc-stage.next .pc-card.cur { animation: pc-from-next 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pc-stage.next .pc-card.prev { animation: pc-cur-to-prev 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pc-stage.next .pc-card.next { animation: pc-in-next 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s backwards; }
.pc-stage.prev .pc-card.cur { animation: pc-from-prev 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pc-stage.prev .pc-card.next { animation: pc-cur-to-next 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pc-stage.prev .pc-card.prev { animation: pc-in-prev 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s backwards; }
/* --fx: przesunięcie karty pod palcem w chwili puszczenia (0 przy klikaniu przycisków) — bez skoku */
@keyframes pc-from-next { from { transform: translateX(calc(96% + var(--fx, 0px) * 0.6)) rotate(6deg) scale(0.82); opacity: 0.9; } }
@keyframes pc-from-prev { from { transform: translateX(calc(-96% + var(--fx, 0px) * 0.6)) rotate(-6deg) scale(0.82); opacity: 0.9; } }
@keyframes pc-cur-to-prev { from { transform: translateX(var(--fx, 0px)) rotate(calc(var(--fr, 0) * 1deg)); opacity: 1; } }
@keyframes pc-cur-to-next { from { transform: translateX(var(--fx, 0px)) rotate(calc(var(--fr, 0) * 1deg)); opacity: 1; } }
@keyframes pc-in-next { from { transform: translateX(150%) rotate(12deg) scale(0.7); opacity: 0; } }
@keyframes pc-in-prev { from { transform: translateX(-150%) rotate(-12deg) scale(0.7); opacity: 0; } }
/* tekst słowa wjeżdża z tej samej strony co karta */
.pc-stage.next + .pc-text { animation: pc-text-next 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.pc-stage.prev + .pc-text { animation: pc-text-prev 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pc-text-next { from { opacity: 0; transform: translateX(36px); } }
@keyframes pc-text-prev { from { opacity: 0; transform: translateX(-36px); } }
.pc-text { animation: pick-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

.pc-dots { display: flex; justify-content: center; align-items: center; gap: 14px; height: 18px; margin: 22px 0 0; }
.pc-dots i { width: 11px; height: 11px; border-radius: 50%; background: #dcdfea; transition: all 0.3s ease; }
.pc-dots i.d0 { width: 16px; height: 16px; background: #7c4dff; box-shadow: 0 3px 8px rgba(124, 77, 255, 0.4); }
.pc-dots i.d2 { width: 8px; height: 8px; }
.pc-dots i.d3 { width: 5px; height: 5px; }
.pick-actions .pick-go { background: linear-gradient(90deg, #8b5cff, #7c3aed); box-shadow: 0 16px 30px -12px rgba(124, 58, 237, 0.75); }
.pick-actions .pick-go:hover { box-shadow: 0 20px 36px -10px rgba(124, 58, 237, 0.9); }

/* komunikat z ikonką słowa (Przeskoczyłeś słowo / Już wyuczone) */
.toast-ic { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; }
.toast-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
@media (prefers-reduced-motion: reduce) { .pc-stage .pc-card,
.pc-text { animation: none !important; } }
:root[data-theme="dark"] .pc-card { background: color-mix(in srgb, var(--tint) 30%, #1f1c2b); box-shadow: 0 7px 0 color-mix(in srgb, var(--tint) 20%, #120f1e); }

/* przeciąganie palcem: karty bez opóźnienia, po puszczeniu wracają płynnie */
.pc-stage { cursor: grab; user-select: none; -webkit-user-select: none; }
.pc-stage.dragging { cursor: grabbing; }
.pc-stage.dragging .pc-card { transition: none; animation: none !important; }
/* poziom i część mowy nad słowem */
.pick-meta { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 26px; margin: 0 0 8px; }
.pick-meta .wr-pos { margin: 0; height: 28px; padding: 0 11px 0 8px; font-size: 13px; }
.pick-meta .wr-pos span { display: inline; } /* na ekranie wyboru zawsze z nazwą części mowy */
.pick-meta .wr-pos i { font-size: 15px; }
.pick-meta .ln-cefr { line-height: 22px; }
/* „?” obok głośnika — po najechaniu / dotknięciu: uwagi, przykład, skojarzenie */
.pc-text { position: relative; z-index: 5; }
.pick-q { width: 30px; height: 30px; margin-left: 6px; flex-shrink: 0; border: 0; border-radius: 50%; vertical-align: middle; cursor: pointer; background: #efeaff; color: #5a3fe0; font-family: var(--display); font-size: 17px; font-weight: 800; transition: transform 0.2s ease, background 0.2s ease; }
.pick-q:hover,
.pick-q:focus { background: #e2d9ff; transform: scale(1.1); outline: none; }
.pick-q:focus-visible { box-shadow: 0 0 0 3px #5a4dff; }

/* pojedyncza karta „Nowe słówko” po pierwszym pytaniu (jak w WRD): bez sąsiednich kart, zielone „Ucz się” */
.pc-stage.single { cursor: default; }
.pc-stage.single .pc-card.cur { animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pick-label { margin: 10px 0 0; text-align: center; }
.pick-actions.single { margin-top: 44px; }
.pick-actions.single .pick-go { background: linear-gradient(90deg, #5fd61c, #3fc40f); box-shadow: 0 14px 30px -10px rgba(76, 200, 20, 0.8); }
.pick-actions.single .pick-go:hover { box-shadow: 0 20px 36px -10px rgba(76, 200, 20, 0.9); }

/* ---- podsumowanie sesji jak „Dobra robota!” w WRD (views.js: viewSummary) ---- */
.summary-wrd { max-width: 460px; margin: 0 auto; padding-bottom: 8px; }

@keyframes sm-arc { from { stroke-dashoffset: var(--len); } }

  

  

.sm-cta { position: sticky; bottom: 0; margin-top: 26px; padding: 16px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg, #f3f2fb) 75%, transparent); text-align: center; }
.sm-go { background: linear-gradient(90deg, #8b5cff, #7c3aed); box-shadow: 0 16px 30px -12px rgba(124, 58, 237, 0.75); }
.sm-go:hover { box-shadow: 0 20px 36px -10px rgba(124, 58, 237, 0.9); }
.sm-more { display: inline-block; margin-top: 10px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 800 15px Nunito, sans-serif; color: #6143ff; }
.sm-more:hover { background: #f0edff; }

@media (prefers-reduced-motion: reduce) {  }

/* listy Pomyłki / Wyuczone (views.js: REVIEW_LISTS): zakładki okresu, „Powtórz” i „Słuchaj” na dole */
.cv-tabs { display: flex; gap: 22px; margin: 4px 0 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e6e4f2; }
.cv-tabs::-webkit-scrollbar { display: none; }
.cv-tabs button { flex-shrink: 0; padding: 10px 0; border: 0; border-bottom: 4px solid transparent; background: none; cursor: pointer; font-family: var(--display); font-size: 17px; font-weight: 700; color: #8a90a8; }
.cv-tabs button.on { color: #131d4c; border-bottom-color: #7c4dff; }
.cv-learn > span:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cv-learn > span svg { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; }
.cv-links { display: flex; justify-content: center; margin-top: 8px; }
.cv-links button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 12px; background: none; cursor: pointer; font-family: var(--display); font-size: 18px; font-weight: 700; color: #6d3df0; }
.cv-links button:hover:not(:disabled) { background: #f0edff; }
.cv-links button:disabled { opacity: 0.45; cursor: default; }
.cv-links svg { width: 22px; height: 22px; }

/* ---- pakiety egzaminacyjne w „Przygotuj się do egzaminu” (views.js: examPacksRow) ---- */
.xp-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 14px -16px 4px; padding: 6px 16px 14px; }
.xp-row::-webkit-scrollbar { display: none; }

.section-head .link { white-space: nowrap; flex-shrink: 0; } /* „Wszystkie ›” nie łamie się przy długim tytule sekcji */
/* „Wiem”: w tym samym miejscu pojawia się następne słowo */
.pc-stage.swap .pc-card.cur { animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* filtr poziomów nowych słów (ustawienia planu) */
.lvl-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lvl-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 2px solid #e6e2f5; border-radius: 16px; background: #ffffff; cursor: pointer; font: inherit; color: #8a90a8; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.lvl-chip b { font-family: var(--display); font-size: 20px; font-weight: 800; }
.lvl-chip span { font-size: 12px; font-weight: 700; }
.lvl-chip.on { border-color: transparent; color: #ffffff; background: linear-gradient(180deg, #9d82ff, #6a4cff); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -4px rgba(97, 67, 255, 0.55); }
.lvl-chip:hover:not(:disabled) { transform: translateY(-2px); }
.lvl-chip:disabled { opacity: 0.4; cursor: default; }

/* ekran Pakietów: rozwijane działy */
.pg-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.pg { border-radius: 24px; background: #ffffff; box-shadow: 0 8px 22px -12px rgba(60, 50, 140, 0.28); overflow: hidden; }
.pg-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.pg-ic { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; font-size: 28px; background: linear-gradient(180deg, #f3efff, #e6e0ff); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.8); }
.pg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-text b { font-family: var(--display); font-size: 18px; font-weight: 800; color: #191c32; }
.pg-text > span:not(.pg-bar) { font-size: 13px; font-weight: 700; color: #8a90a8; }
.pg-bar { height: 6px; margin-top: 4px; border-radius: 99px; background: #eceaf6; overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9d82ff, #6a4cff); }
.pg-chev { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(97, 67, 255, 0.1); color: #5a3fe0; transition: transform 0.25s ease; }
.pg-chev svg { width: 20px; height: 20px; }
.pg.open .pg-chev { transform: rotate(180deg); }
.pg-head:hover .pg-chev { background: rgba(97, 67, 255, 0.18); }
.pg-list { padding: 0 12px 12px; animation: pg-in 0.25s ease; }
@keyframes pg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* panel dewelopera: powiększony podgląd ikony */
.dv-zoomable { cursor: zoom-in; transition: transform 0.15s ease; }
.dv-zoomable:hover { transform: scale(1.08); }
.dv-zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 40, 0.62); backdrop-filter: blur(6px); cursor: zoom-out; animation: pg-in 0.2s ease; }
.dv-zoom-card { margin: 0; width: min(420px, 100%); padding: 18px; border-radius: 28px; background: #ffffff; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5); text-align: center; }
.dv-zoom-card > img { display: block; width: 100%; aspect-ratio: 1; border-radius: 22px; image-rendering: auto; }
.dv-zoom-card figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.dv-zoom-card b { font-family: var(--display); font-size: 22px; color: #191c32; }
.dv-zoom-card span { color: #8a90a8; font-weight: 700; }
.dv-zoom-card em { color: #e09a00; font-size: 13px; font-style: normal; font-weight: 700; }
.dv-zoom-card small { color: #6a6f88; font-size: 12px; line-height: 1.4; }
.dv-zoom-sizes { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-top: 8px; }
.dv-zoom-sizes img { border-radius: 22%; box-shadow: 0 4px 10px rgba(30, 40, 90, 0.15); }

/* panel dewelopera: ocena ikony (Jev) */
.dv-review { display: block; margin-top: 4px; padding: 4px 8px; border-radius: 10px; font-size: 12px; line-height: 1.35; }
.dv-review b { font-weight: 800; }
.dv-review.good { background: #e3f7ec; color: #11724a; }
.dv-review.warn { background: #fff4d6; color: #8a5a00; }
.dv-review.bad { background: #ffe3e0; color: #b3261e; }

/* panel dewelopera: „Sprawdź znaczenie” */
.dv-issues,
.dv-fix,
.dv-hint { display: block; margin-top: 4px; }
.dv-fix s { opacity: 0.6; }
.dv-fix-btns { display: flex; gap: 6px; margin-top: 6px; }
.dv-fix-btns .dv-btn { height: 30px; padding: 0 12px; font-size: 13px; }
.dv-hint { color: #5a5f78; font-style: italic; }
.dv-actions { flex-wrap: wrap; justify-content: flex-end; }

/* suwak tempa mowy pod głośnikiem */
.rate-pop { position: fixed; z-index: 1200; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 18px; background: #ffffff; box-shadow: 0 14px 34px -12px rgba(40, 30, 110, 0.35), 0 0 0 1px rgba(97, 67, 255, 0.08); animation: pg-in 0.18s ease; }
.rate-pop input { width: 150px; accent-color: #6143ff; }
.rate-pop .rp-ic { font-size: 18px; }
.rate-pop .rp-val { min-width: 42px; text-align: right; font-family: var(--display); font-size: 15px; color: #5a3fe0; }

/* wynik odpowiedzi: okienko na środku ekranu, pytanie pod spodem przyciemnione */
.fb-overlay { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 40, 0.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fb-fade 0.2s ease; }
.fb-sheet { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 14px; border-radius: 30px; background: #ffffff; box-shadow: 0 28px 70px -20px rgba(20, 18, 60, 0.55); animation: fb-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1); }
.fb-sheet .feedback { margin-bottom: 12px; }
.fb-sheet .btn.wide { width: 100%; }
@keyframes fb-fade { from { opacity: 0; } }
@keyframes fb-pop { from { opacity: 0; transform: translateY(18px) scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .fb-overlay,
.fb-sheet { animation: none; } }

/* pytanie pl→en: ikona słowa obok polskiego słowa */
.prompt-pl.has-art { display: flex; align-items: center; justify-content: center; gap: 14px; }
.prompt-art { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; box-shadow: 0 6px 14px -6px rgba(30, 40, 90, 0.35); animation: pick-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* „Dopasuj pary”: ikona przy polskim słowie */
.pr-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pr-img { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; box-shadow: 0 3px 8px -4px rgba(30, 40, 90, 0.35); }

.fb-mastered { margin: 6px auto 10px; padding: 6px 12px; width: fit-content; border-radius: 999px; background: #fff4cc; color: #8a5a00; font-weight: 800; font-size: 14px; animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* „Dopasuj pary”: numery, wejście kafelków, wybór, trafienie, pomyłka */
.pr-count { margin: -6px 0 10px; text-align: center; font-size: 14px; font-weight: 700; color: #8b90a8; }
.pr-count b { color: #22a35a; }
.pr-btn { position: relative; justify-content: flex-start; padding-left: 12px; text-align: left; transition: border-color 0.15s ease, opacity 0.35s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease; }
.pr-btn > span { flex: 1; text-align: center; padding-right: 30px; }
.pr-num { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #f1eeff; color: #7c69ff; font: 800 14px/1 var(--display); box-shadow: inset 0 -2px 0 rgba(97, 67, 255, 0.15); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.pr-wrap:not(.played) .pr-btn { animation: pr-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes pr-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.pr-btn:active:not(:disabled) { transform: scale(0.97); }
.pr-btn.sel { border-color: #4cc81a; background: #f3fdef; transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 5px rgba(76, 200, 26, 0.18), 0 12px 22px -12px rgba(40, 150, 20, 0.55); }
.pr-btn.sel .pr-num { background: #4cc81a; color: #fff; transform: rotate(-8deg) scale(1.1); }
.pr-btn.hit { border-color: #22c55e; background: #dcfce7; animation: pr-hit 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pr-btn.hit .pr-num { background: #22c55e; color: #fff; }
@keyframes pr-hit { 0% { transform: scale(1); } 35% { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.25); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.pr-btn.done { opacity: 0.38; transform: scale(0.97); }
.pr-btn.done .pr-num { background: #22c55e; color: #fff; }
.pr-btn.bad { background: #fff1f0; }
.pr-btn.bad .pr-num { background: var(--bad); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pr-btn,
.pr-btn.hit,
.pr-wrap .pr-btn { animation: none !important; transition: none; } }
:root[data-theme="dark"] .pr-num { background: #2e2a4a; color: #b8aaff; }
:root[data-theme="dark"] .pr-btn.sel { background: #1f3322; }
:root[data-theme="dark"] .pr-btn.hit { background: #1d3a26; }

.fb-given { margin: 4px auto 10px; padding: 6px 12px; width: fit-content; max-width: 100%; border-radius: 12px; background: rgba(220, 38, 38, 0.08); color: #9b1c1c; font-size: 14px; }
.fb-given.ok { background: rgba(34, 197, 94, 0.1); color: #11724a; }
.prompt-hint { margin: 10px auto 0; max-width: 420px; padding: 6px 12px; border-radius: 12px; background: #fff8e1; color: #7a5a00; font-size: 14px; line-height: 1.4; }

/* ---------- ćwiczenia z wyborem: efekty ---------- */
/* wejście: słowo w pytaniu wskakuje, odpowiedzi wjeżdżają po kolei */
.card.study.fx-in .prompt-en,
.card.study.fx-in .prompt-pl { animation: q-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes q-pop { from { opacity: 0; transform: translateY(8px) scale(0.85); } }
.options.fresh .opt { animation: opt-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.08s + var(--i) * 0.06s); }
@keyframes opt-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
/* najechanie: obrazek się przechyla, numer podskakuje */
.opt { position: relative; }
.opt-pic,
.opt kbd { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease; }
.opt:hover:not(:disabled) .opt-pic { transform: rotate(-7deg) scale(1.1); }
.opt:hover:not(:disabled) kbd { transform: translateY(-2px); background: #6a4cff; color: #fff; box-shadow: none; }
/* dobra odpowiedź: puls, pierścień, ✓, iskierki, obrazek podskakuje */
.fx-hit .opt.ok { animation: opt-ok 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes opt-ok { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.fx-hit .opt.ok::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid var(--green); pointer-events: none; animation: opt-ring 0.7s ease-out forwards; }
@keyframes opt-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.08, 1.35); } }
.opt.ok kbd { background: var(--green); color: #fff; box-shadow: none; animation: kbd-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fx-hit .opt.ok .opt-pic { animation: pic-hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pic-hop { 0% { transform: none; } 35% { transform: translateY(-7px) rotate(-6deg) scale(1.12); } 100% { transform: none; } }
@keyframes kbd-pop { from { transform: scale(0.4) rotate(-30deg); } }
.opt-sparks { position: absolute; left: 70px; top: 50%; width: 0; height: 0; pointer-events: none; }
.opt:not(.has-pic) .opt-sparks { left: 26px; }
.opt-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 6px rgba(255, 200, 61, 0.8); opacity: 0; animation: spark 0.7s ease-out forwards; }
.opt-sparks i:nth-child(even) { background: #4cd080; width: 6px; height: 6px; }
@keyframes spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(4px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(46px) scale(0.3); } }
/* zła odpowiedź: potrząśnięcie, ✗; dobra odpowiedź obok pulsuje, żeby było widać, która była właściwa */
.fx-hit .opt.bad { animation: opt-shake 0.45s ease; }
@keyframes opt-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.opt.bad kbd { background: var(--bad); color: #fff; box-shadow: none; animation: kbd-pop 0.4s ease; }
.fx-hit .opt.ok.opt-right { animation: opt-reveal 1.1s ease 0.25s 2; }
@keyframes opt-reveal { 50% { box-shadow: 0 6px 0 #bfe8cd, 0 0 0 7px rgba(34, 197, 94, 0.22); } }
/* pozostałe przygasają */
.opt.dim { transition: opacity 0.35s ease, transform 0.35s ease; transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .card.study.fx-in .prompt-en,
.card.study.fx-in .prompt-pl,
.options.fresh .opt,
.opt.ok,
.opt.bad,
.opt.ok.opt-right,
.opt.ok .opt-pic,
.opt kbd { animation: none !important; }
  .opt.ok::after,
.opt-sparks { display: none; }
}
/* okienko wyniku pojawia się po chwili — najpierw widać efekt dobrej / złej odpowiedzi */
.fb-overlay { animation: fb-fade 0.25s ease 0.5s both; }
.fb-overlay .fb-sheet { animation: fb-pop 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) 0.5s both; }
@media (prefers-reduced-motion: reduce) { .fb-overlay,
.fb-overlay .fb-sheet { animation: none; } }

/* ================= efekty we wszystkich ćwiczeniach (fx-in — wejście pytania, fx-hit — po odpowiedzi) ================= */
@keyframes fx-fade-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes fx-hop { 0% { opacity: 0; transform: scale(0.5) translateY(12px); } 60% { opacity: 1; transform: scale(1.08) translateY(-6px); } 100% { transform: none; } }

/* karta pytania: wjeżdża, etykieta wskakuje; po odpowiedzi krótka zielona / czerwona poświata */
.card.study.fx-in { animation: fx-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes fx-card-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.card.study.fx-in .badge { animation: fx-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s backwards; }
@keyframes fx-badge-in { from { opacity: 0; transform: translateY(-8px) scale(0.8); } }
.card.study.fx-hit.st-ok { animation: fx-card-ok 0.8s ease; }
@keyframes fx-card-ok { 30% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.28); } }
.card.study.fx-hit.st-bad { animation: fx-card-bad 0.8s ease; }
@keyframes fx-card-bad { 30% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.22); } }

/* iskierki */
.fx-sparks { --dist: 62px; position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.fx-sparks.big { --dist: 96px; }
.fx-sparks.small { --dist: 38px; }
.fx-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 6px rgba(255, 200, 61, 0.8); opacity: 0; animation: fx-spark 0.75s ease-out forwards; animation-delay: var(--d, 0ms); }
.fx-sparks i:nth-child(3n) { width: 6px; height: 6px; background: #4cd080; box-shadow: 0 0 6px rgba(76, 208, 128, 0.7); }
.fx-sparks i:nth-child(3n + 1) { width: 7px; height: 7px; background: #8b74ff; box-shadow: 0 0 6px rgba(139, 116, 255, 0.7); }
@keyframes fx-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(6px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--dist)) scale(0.3); } }

/* czy to dobre tłumaczenie: karta się obraca, przyciski z boków, pieczątka ✓ / ✗ */
.tf-tile { position: relative; transition: box-shadow 0.3s ease; }
.card.study.fx-in .tf-tile { animation: fx-flip-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s backwards; }
@keyframes fx-flip-in { from { opacity: 0; transform: perspective(700px) rotateX(-70deg) scale(0.9); } }
.card.study.fx-in .tf-img,
.card.study.fx-in .tf-art { animation: fx-hop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s backwards; }
.card.study.fx-in .tf-pl { animation: q-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards; }
.card.study.fx-in .tf-en { animation: fx-fade-up 0.45s ease 0.4s backwards; }
.tf-tile.ok { box-shadow: 0 6px 0 #a7e3bb, 0 0 0 4px rgba(34, 197, 94, 0.22); }
.tf-tile.bad { box-shadow: 0 6px 0 #f4c5c5, 0 0 0 4px rgba(220, 38, 38, 0.16); }
.tf-stamp { position: absolute; top: -14px; right: -10px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 900 32px/1 var(--display); transform: rotate(-12deg); border: 4px solid #fff; box-shadow: 0 8px 18px -8px rgba(20, 20, 60, 0.45); }
.tf-stamp.ok { background: #22c55e; }
.tf-stamp.bad { background: var(--bad); }
.card.study.fx-hit .tf-stamp { animation: fx-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes fx-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(0.92) rotate(-8deg); } 100% { transform: rotate(-12deg); } }
.tf-btn { position: relative; }
.tf-btn svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tf-btns.fx-in .tf-btn.no { animation: fx-from-left 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s backwards; }
.tf-btns.fx-in .tf-btn.yes { animation: fx-from-right 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.36s backwards; }
@keyframes fx-from-left { from { opacity: 0; transform: translateX(-40px) scale(0.9); } }
@keyframes fx-from-right { from { opacity: 0; transform: translateX(40px) scale(0.9); } }
@media (hover: hover) {
  .tf-btn.no:hover:not(:disabled) svg { animation: fx-wiggle 0.5s ease; }
  .tf-btn.yes:hover:not(:disabled) svg { animation: fx-nod 0.5s ease; }
}
@keyframes fx-wiggle { 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes fx-nod { 30% { transform: translateY(-5px) scale(1.14); } 60% { transform: translateY(1px); } }
.tf-btns.fx-hit .tf-btn.ok { animation: opt-ok 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tf-btns.fx-hit .tf-btn.ok svg { animation: fx-nod 0.5s ease 0.1s; }
.tf-btns.fx-hit .tf-btn.ok::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid var(--green); pointer-events: none; animation: opt-ring 0.7s ease-out forwards; }
.tf-btns.fx-hit .tf-btn.bad { animation: opt-shake 0.45s ease; }
.tf-btn.dim { transform: scale(0.96); }

/* dopasuj kartę: karty są rozdawane, po najechaniu się przechylają; ✓ / ✗, iskierki, puls właściwej */
.pic-grid.fx-in .pic-card { animation: fx-deal 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) backwards; animation-delay: calc(0.1s + var(--i, 0) * 0.08s); }
@keyframes fx-deal { from { opacity: 0; transform: perspective(800px) rotateY(80deg) translateY(10px) scale(0.9); } }
.pic-card img { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (hover: hover) {
  .pic-card:hover:not(:disabled) { transform: translateY(-4px) rotate(-1.2deg); box-shadow: 0 16px 26px -14px rgba(30, 40, 90, 0.45); }
  .pic-card:hover:not(:disabled) img { transform: scale(1.07); }
}
.pic-card.ok { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.22), 0 10px 20px -12px rgba(30, 40, 90, 0.35); }
.pic-card.ok kbd { background: #22c55e; color: #fff; }
.pic-card.bad kbd { background: var(--bad); color: #fff; }
.pic-card.dim { transform: scale(0.95); }
.pic-grid.fx-hit .pic-card.ok { animation: fx-pic-ok 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fx-pic-ok { 40% { transform: scale(1.06) rotate(-1.5deg); } }
.pic-grid.fx-hit .pic-card.ok kbd,
.pic-grid.fx-hit .pic-card.bad kbd { animation: kbd-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pic-grid.fx-hit .pic-card.bad { animation: opt-shake 0.45s ease; }
.pic-grid.fx-hit .pic-card.pic-right { animation: fx-pulse-green 1.1s ease 0.25s 2; }
@keyframes fx-pulse-green { 50% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0.28); } }
.pic-grid.fx-hit .pic-label { animation: fx-label-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards; }
@keyframes fx-label-up { from { transform: translateY(100%); } }

/* utwórz słowo: kreski rozwijają się, kafelki spadają; litery „wpadają”, cofnięty kafelek wraca; fala liter po dobrej odpowiedzi */
.bw-slots { position: relative; }
.bw-ch { font: inherit; display: inline-block; }
.bw-slots.fx-in .bw-slot,
.bw-slots.fx-in .bw-word,
.bw-slots.fx-in .bw-fix { animation: fx-slot-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(0.08s + var(--n, 0) * 0.035s); }
@keyframes fx-slot-in { from { opacity: 0; transform: scaleX(0.2) translateY(6px); } }
.bw-tiles.fx-in .bw-tile,
.bw-tiles.fx-in .bw-back { animation: fx-tile-drop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(0.18s + var(--i, 0) * 0.05s); }
@keyframes fx-tile-drop { from { opacity: 0; transform: translateY(-26px) rotate(calc(var(--r, 6) * 1deg)) scale(0.8); } }
@media (hover: hover) { .bw-tile:hover:not(:disabled) { transform: translateY(-3px) rotate(-2deg); } }
.bw-slot.new { animation: fx-underline 0.45s ease; }
@keyframes fx-underline { 30% { border-color: #a78bfa; } }
.bw-slot.new .bw-ch,
.bw-word.new { animation: fx-letter-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(var(--k, 0) * 0.05s); }
@keyframes fx-letter-in { from { opacity: 0; transform: translateY(-18px) scale(1.5); color: #6143ff; } }
.bw-tile.used { transform: scale(0.9); }
.bw-tile.used.just { animation: fx-tile-used 0.3s ease; }
@keyframes fx-tile-used { from { opacity: 1; transform: scale(1.1); } }
.bw-tile.back { animation: fx-tile-back 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fx-tile-back { from { opacity: 0.3; transform: scale(0.7) translateY(-8px); } }
.bw-slots.fx-hit.ok .bw-slot,
.bw-slots.fx-hit.ok .bw-word,
.bw-slots.fx-hit.ok .bw-fix { animation: fx-wave 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); animation-delay: calc(var(--n, 0) * 0.045s); }
@keyframes fx-wave { 40% { transform: translateY(-10px); } }
.bw-slots.fx-hit.bad { animation: opt-shake 0.45s ease; }

/* napisz / dyktando: pole wjeżdża i „stuka” przy każdym znaku; po odpowiedzi znak ✓ ≈ ✗ */
.type-box { position: relative; }
.type-box input { padding-right: 56px; }
.type-form input:focus { box-shadow: 0 0 0 4px rgba(97, 67, 255, 0.14); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.type-form.fx-in .type-box { animation: fx-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards; }
.type-form.fx-in .type-actions { animation: fx-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s backwards; }
.type-box.key input { animation: fx-key 0.16s ease; }
@keyframes fx-key { 50% { transform: scale(1.012); } }
.type-mark { position: absolute; right: 12px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 900 18px/1 var(--display); }
.type-box.ok .type-mark { background: #22c55e; }
.type-box.typo .type-mark { background: #ff9f43; }
.type-box.bad .type-mark { background: var(--bad); }
.type-box .fx-sparks { left: auto; right: 29px; }
.type-form.fx-hit .type-mark { animation: fx-mark-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes fx-mark-pop { from { opacity: 0; transform: scale(2) rotate(-30deg); } }
.type-form.fx-hit .type-box.ok input { animation: fx-pop-ok 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fx-pop-ok { 40% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.22); } }
.type-form.fx-hit .type-box.typo input { animation: fx-wobble 0.5s ease; }
@keyframes fx-wobble { 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
.type-form.fx-hit .type-box.bad input { animation: opt-shake 0.45s ease; }

/* słuchanie: głośnik wskakuje, przy odtwarzaniu „bije” */
.listen-row.fx-in .listen { animation: fx-listen-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes fx-listen-in { from { opacity: 0; transform: scale(0.5); } }
.listen.playing .listen-img,
.listen-row.fx-in .listen-img { animation: fx-beat 0.34s ease-in-out 4; }
.listen-row.fx-in .listen-img { animation-delay: 0.4s; }
@keyframes fx-beat { 50% { transform: scale(1.15) rotate(-6deg); } }

/* nowe słowo: obrazek wskakuje i się unosi, przycisk pulsuje */
.card.study.intro .intro-tile { animation: fx-float 3.2s ease-in-out 1s infinite; }
.card.study.intro.fx-in > * { animation: fx-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards; }
.card.study.intro.fx-in > .intro-tile { animation: fx-hop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards, fx-float 3.2s ease-in-out 1s infinite; }
@keyframes fx-float { 50% { transform: translateY(-6px); } }
.btn.fx-cta { animation: fx-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards, fx-cta-pulse 1.6s ease-in-out 1.1s 2; }
@keyframes fx-cta-pulse { 50% { transform: scale(1.03); } }

/* pasek postępu i diamenty */
.session-top .bar i { position: relative; overflow: hidden; }
.session-top .bar i.grew { animation: fx-bar-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fx-bar-grow { from { width: var(--from); } }
.session-top .bar i.grew::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); animation: fx-shine 0.8s ease 0.1s both; }
@keyframes fx-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.gem-count.up svg { animation: fx-gem 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gem-count.up b { display: inline-block; animation: fx-gem-num 0.5s ease; }
@keyframes fx-gem { 40% { transform: scale(1.45) rotate(-12deg); } }
@keyframes fx-gem-num { 40% { transform: translateY(-4px); color: #8b5cf6; } }

@media (prefers-reduced-motion: reduce) {
  .card.study,
.card.study *,
.tf-btns *,
.pic-grid *,
.bw-slots,
.bw-slots *,
.bw-tiles *,
.type-form *,
.listen,
.listen-img,
.btn.fx-cta,
.session-top .bar i,
.session-top .bar i::after,
.gem-count * { animation: none !important; }
  .fx-sparks { display: none; }
}

/* ================= usprawnienia ćwiczeń ================= */
/* „Nie wiem” pod odpowiedziami (zamiast zgadywania) */
.dunno-link { display: block; margin: -2px auto 14px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: #8b90a8; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; }
.dunno-link:hover { color: #5a3fe0; background: rgba(97, 67, 255, 0.08); }
@media (hover: hover) { .dunno-link::after { content: " (0)"; font-weight: 700; opacity: 0.55; } }
/* utwórz słowo: mrugające następne pole; ułożoną literę / wyraz można kliknąć, żeby cofnąć od niej */
.bw-slot.next,
.bw-word.next { animation: fx-caret 1.1s ease-in-out infinite; }
.bw-slots.fx-in .bw-slot.next,
.bw-slots.fx-in .bw-word.next { animation: fx-slot-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, fx-caret 1.1s ease-in-out 0.6s infinite; animation-delay: calc(0.08s + var(--n, 0) * 0.035s), 0.6s; }
@keyframes fx-caret { 50% { border-color: #8b74ff; } }
.bw-slot[data-act],
.bw-word[data-act] { cursor: pointer; }
@media (hover: hover) { .bw-slot[data-act]:hover .bw-ch,
.bw-word[data-act]:hover { opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 2px; } }
/* tak / nie: właściwy przycisk, gdy wybrałeś zły albo „Nie wiem” — tylko pulsuje (bez świętowania) */
.tf-btns.fx-hit .tf-btn.ok.tf-right { animation: fx-pulse-green 1.1s ease 0.25s 2; }
.tf-btns.fx-hit .tf-btn.ok.tf-right::after { display: none; }
/* porównanie pisowni w okienku wyniku */
.fb-diff { display: grid; gap: 6px; margin: 4px auto 12px; padding: 10px 14px; width: fit-content; max-width: 100%; border-radius: 14px; background: rgba(255, 255, 255, 0.75); text-align: left; }
.fb-diff div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fb-diff span { min-width: 124px; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #8b90a8; }
.fb-diff b { font-family: var(--display); font-size: 22px; letter-spacing: 0.06em; color: #1b1f3e; overflow-wrap: anywhere; }
.fb-diff mark { padding: 0 1px; border-radius: 4px; background: none; color: inherit; }
.fb-diff mark.d-bad { color: #c92a2a; background: rgba(220, 38, 38, 0.12); text-decoration: line-through; text-decoration-thickness: 2px; }
.fb-diff mark.d-gap { color: #c92a2a; background: rgba(220, 38, 38, 0.12); }
.fb-diff mark.d-miss { color: #15803d; background: rgba(34, 197, 94, 0.18); text-decoration: underline; text-decoration-thickness: 2px; }

/* karta słowa po kliknięciu „?” (word.js: openWordCard) */
dialog.wcard { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 34px; overflow: auto; background: #fff; color: #131d4c; box-shadow: 0 30px 70px rgba(20, 20, 60, 0.35); animation: wc-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1); }
dialog.wcard::backdrop { background: rgba(19, 22, 50, 0.55); backdrop-filter: blur(3px); animation: ask-fade 0.2s ease; }
dialog.wcard.out { animation: wc-out 0.18s ease forwards; }
dialog.wcard.out::backdrop { opacity: 0; transition: opacity 0.18s; }
@keyframes wc-in { from { opacity: 0; transform: translateY(24px) scale(0.94); } }
@keyframes wc-out { to { opacity: 0; transform: translateY(16px) scale(0.96); } }
.wc-top { position: relative; padding: 26px 20px 20px; text-align: center; background: color-mix(in srgb, var(--tint, #ffe3dc) 45%, #fff); }
.wc-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.6); color: #131d4c; font-size: 20px; font-weight: 800; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.wc-x:hover,
.wc-x:focus-visible { background: #fff; transform: rotate(90deg); outline: none; }
.wc-art { height: 150px; display: grid; place-items: center; margin: 4px 0 10px; }
.wc-art .wa-img { max-height: 150px; max-width: 70%; object-fit: contain; animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wc-art .wa-emoji { font-size: 96px; line-height: 1; }
.wc-en { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; font-family: var(--display); font-size: 34px; font-weight: 800; }
.wc-pron { margin: 6px 0 0; font-size: 22px; color: #c0584a; }
.wc-pl { display: flex; flex-direction: column; align-items: center; padding: 16px 20px; border-bottom: 1px solid #eceef5; }
.wc-pl b { font-size: 26px; font-weight: 700; }
.wc-pl small,
.wc-mt small { font-size: 16px; color: #7a8099; }
.wc-sec { padding: 16px 22px 22px; }
.wc-sec h3 { margin: 0 0 10px; text-align: center; font-family: var(--display); font-size: 24px; font-weight: 800; }
.wc-mean { display: flex; align-items: center; gap: 16px; padding: 10px 6px; border-radius: 16px; animation: wc-row 0.35s ease both; }
.wc-mean:nth-child(3) { animation-delay: 0.06s; } .wc-mean:nth-child(4) { animation-delay: 0.12s; } .wc-mean:nth-child(5) { animation-delay: 0.18s; }
@keyframes wc-row { from { opacity: 0; transform: translateX(-10px); } }
.wc-mean.cur { background: #f4f1ff; }
.wc-ic { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; font-size: 36px; }
.wc-ic img { max-width: 56px; max-height: 56px; object-fit: contain; }
.wc-mt { flex: 1; display: flex; flex-direction: column; }
.wc-mt b { font-size: 20px; font-weight: 600; }
.wc-mean i { font-style: normal; font-size: 24px; color: #5a3fe0; font-weight: 800; }

/* „?” jako ikona 3D (Ming) — bez fioletowego kółka pod spodem */
.pick-q.q-3d { width: 34px; height: 34px; padding: 0; background: none; display: inline-grid; place-items: center; }
.pick-q.q-3d img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(90, 63, 224, 0.3)); }
.pick-q.q-3d:hover,
.pick-q.q-3d:focus { background: none; transform: scale(1.12) rotate(-6deg); }
:root[data-theme="dark"] .pick-q.q-3d,
:root[data-theme="dark"] .pick-q.q-3d:hover { background: none; }

/* ekran wyboru słówek: głośnik 3D, unosząca się grafika, wyraźniejsze słowo */
.wd-say.say-3d { width: 46px; height: 46px; }
.wd-say.say-3d img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.25)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wd-say.say-3d:hover { background: none; transform: none; }
.wd-say.say-3d:hover img { transform: scale(1.15) rotate(-6deg); }
.wd-say.say-3d:active img { transform: scale(0.9); }
.pc-card.cur .wa-emoji { font-size: 120px; animation: pc-float 3.2s ease-in-out infinite; }
@keyframes pc-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.pc-card.cur::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.75), transparent 68%); z-index: -1; }
.pc-card.cur { isolation: isolate; }
.pick-en { font-size: 46px; letter-spacing: 0.01em; }
.pick-pl { font-size: 26px; }
.pick-actions { margin-top: 56px; }
@media (prefers-reduced-motion: reduce) { .pc-card.cur .wa-emoji { animation: none; } }
/* tempo mowy: żółw i królik 3D; licznik z gwiazdką jak w zadaniach */
.rate-pop img.rp-ic { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(40, 70, 140, 0.2)); }
.pick-count img { width: 26px; height: 26px; }
.pick-count { padding: 4px 12px 4px 6px; }

/* ekran wyboru słówek: tło z miękkimi plamami, grubszy pasek, przyciski „pigułki” z krawędzią 3D */
.app:has(.pick-top) { position: relative; }
body:has(.pick-top) { background: radial-gradient(60% 34% at 12% 8%, rgba(150, 120, 255, 0.16), transparent 70%), radial-gradient(55% 30% at 92% 46%, rgba(110, 200, 255, 0.16), transparent 70%), radial-gradient(70% 26% at 30% 100%, rgba(120, 220, 120, 0.14), transparent 70%), #f2f0ff; background-attachment: fixed; }
.pick-progress { height: 8px; margin: 0 0 10px; border-radius: 999px; overflow: hidden; background: rgba(97, 67, 255, 0.1); }
.pick-progress i { border-radius: 999px; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 10px rgba(80, 200, 20, 0.5); }
.pc-stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, var(--stage-glow, rgba(255, 180, 150, 0.4)), transparent 66%); filter: blur(8px); pointer-events: none; }
.pick-go { height: 66px; box-shadow: 0 6px 0 #2f9a0a, 0 16px 26px -8px rgba(60, 170, 10, 0.55); }
.pick-go:hover { box-shadow: 0 6px 0 #2f9a0a, 0 20px 30px -8px rgba(60, 170, 10, 0.65); }
.pick-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #2f9a0a, 0 6px 12px -6px rgba(60, 170, 10, 0.5); }
.pick-actions:not(.single) .pick-go { box-shadow: 0 6px 0 #5b28b8, 0 16px 26px -8px rgba(124, 58, 237, 0.55); }
.pick-actions:not(.single) .pick-go:hover { box-shadow: 0 6px 0 #5b28b8, 0 20px 30px -8px rgba(124, 58, 237, 0.65); }
.pick-actions:not(.single) .pick-go:active { box-shadow: 0 1px 0 #5b28b8, 0 6px 12px -6px rgba(124, 58, 237, 0.5); }
.pick-actions .wd-actions { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.pick-actions .wd-actions > span { display: none; }
.pick-actions .wd-link { height: 52px; border-radius: 999px; background: #fff; border: 2px solid #e3e0f7; box-shadow: 0 4px 0 #e3e0f7; font-size: 19px; color: #6a7396; transition: transform 0.15s, box-shadow 0.15s, color 0.2s, border-color 0.2s; }
.pick-actions .wd-link:hover { background: #fff; color: #5a3fe0; border-color: #cfc6ff; box-shadow: 0 4px 0 #cfc6ff; }
.pick-actions .wd-link:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3e0f7; }
.pick-actions .wd-link[data-act="pick-known"] { color: #2f8f12; border-color: #cdeec0; box-shadow: 0 4px 0 #cdeec0; background: #f4fff0; }
.pick-actions .wd-link[data-act="pick-known"]:hover { color: #23760b; border-color: #a9de92; box-shadow: 0 4px 0 #a9de92; }
.pick-actions .wd-link[data-act="pick-known"]::before { content: '✓'; font-weight: 800; }
.pick-actions .wd-link[data-act="pick-later"]::before { content: '⏭'; font-size: 16px; }
:root[data-theme="dark"] body:has(.pick-top) { background: radial-gradient(60% 34% at 12% 8%, rgba(110, 80, 220, 0.22), transparent 70%), radial-gradient(55% 30% at 92% 46%, rgba(60, 130, 200, 0.18), transparent 70%), #13111a; }
:root[data-theme="dark"] .pick-actions .wd-link { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #2e2a3d; color: #b8bed0; }
:root[data-theme="dark"] .pick-actions .wd-link[data-act="pick-known"] { background: #16261a; border-color: #23442a; box-shadow: 0 4px 0 #23442a; color: #8fe06f; }

/* animacje ekranu wyboru: gwiazdka podskakuje przy nowym słowie, elementy wjeżdżają po kolei, przycisk „oddycha” */
.pick-count img { animation: star-idle 3.6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes star-idle { 0%, 82%, 100% { transform: rotate(0) scale(1); } 88% { transform: rotate(-14deg) scale(1.12); } 94% { transform: rotate(10deg) scale(1.08); } }
.pick-count.bump { animation: count-bump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pick-count.bump img { animation: star-spin 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes count-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); background: #ffefb8; } 100% { transform: scale(1); } }
@keyframes star-spin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(200deg) scale(1.5); } 100% { transform: rotate(360deg) scale(1); } }
.pick-meta,
.pick-en,
.pick-pl,
.pc-dots { animation: pk-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pick-meta { animation-delay: 0.05s; } .pick-en { animation-delay: 0.12s; } .pick-pl { animation-delay: 0.2s; } .pc-dots { animation-delay: 0.26s; }
.pick-actions { animation: pk-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
@keyframes pk-up { from { opacity: 0; transform: translateY(14px); } }
.pick-go { animation: go-breathe 2.8s ease-in-out 1.2s infinite; }
@keyframes go-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08) saturate(1.1); } }
.pick-go::after { animation: go-shine 4.5s ease-in-out 1.8s infinite; }
@keyframes go-shine { 0%, 70% { left: -70%; } 100% { left: 130%; } }
.pick-actions .wd-link[data-act="pick-known"]:hover::before { animation: tick-pop 0.35s ease; display: inline-block; }
@keyframes tick-pop { 50% { transform: scale(1.5) rotate(-12deg); } }
.pc-dots i.d0 { animation: dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 3px 8px rgba(124, 77, 255, 0.4); } 50% { box-shadow: 0 3px 14px rgba(124, 77, 255, 0.75); transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .pick-count img,
.pick-go,
.pick-go::after,
.pc-dots i.d0 { animation: none; } }

/* karta słowa v2: odsłuch zwykły i wolny, plakietki, karty z uwagami, przykład z odsłuchem, stopka z akcjami */
dialog.wcard { width: min(420px, calc(100vw - 24px)); border-radius: 36px; scrollbar-width: none; }
dialog.wcard::-webkit-scrollbar { display: none; }
.wc-top { padding: 22px 20px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #ffe3dc) 60%, #fff), color-mix(in srgb, var(--tint, #ffe3dc) 22%, #fff)); }
.wc-top::before { content: ''; position: absolute; left: 50%; top: 40px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent 65%); pointer-events: none; }
.wc-art { position: relative; height: 140px; margin: 10px 0 6px; }
.wc-art .wa-img { max-height: 140px; border-radius: 26px; }
.wc-art .wa-emoji { font-size: 100px; animation: pc-float 3.2s ease-in-out infinite; }
.wc-en { position: relative; margin: 4px 0 0; font-size: 38px; letter-spacing: 0.01em; }
.wc-pron { position: relative; display: inline-block; margin: 6px 0 0; padding: 3px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 19px; font-weight: 700; color: #b5523f; }
.wc-say { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.wc-sb { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 12px; border: 2px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 0 rgba(30, 40, 90, 0.1); color: #2b3a7a; font: 800 16px Nunito, sans-serif; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.wc-sb img { width: 30px; height: 30px; object-fit: contain; }
.wc-sb:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(30, 40, 90, 0.1); }
.wc-sb:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 40, 90, 0.1); }
.wc-sb.pop img,
.wc-exsay.pop { animation: wc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wc-pop { 40% { transform: scale(1.3) rotate(-8deg); } }
.wc-pl { padding: 18px 20px 16px; border-bottom: 0; }
.wc-pl b { font-family: var(--display); font-size: 30px; }
.wc-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.wc-chips .wr-pos span { display: inline; }
.wc-chips .wr-pos i img { width: 20px; height: 20px; }
.wc-st { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 800; background: #eef0fa; color: #4b5170; }
.wc-st.learning { background: #e4eeff; color: #2b5bd7; }
.wc-st.known { background: #fff4cc; color: #a16207; }
.wc-cards { display: grid; gap: 10px; padding: 4px 16px 6px; }
.wc-note { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 12px; border-radius: 22px; background: #f5f3ff; animation: wc-row 0.4s ease both; }
.wc-note:nth-child(2) { animation-delay: 0.07s; } .wc-note:nth-child(3) { animation-delay: 0.14s; }
.wc-note.n-ex { background: #eaf5ff; }
.wc-note.n-mnemo { background: #fff6dd; }
.wc-ni { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: #fff; font-size: 21px; box-shadow: 0 2px 0 rgba(30, 40, 90, 0.08); }
.wc-note h4 { margin: 0 0 3px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7c62f0; }
.n-ex h4 { color: #2f7fe6; } .n-mnemo h4 { color: #c98a00; }
.wc-note p { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; }
.wc-note > div { flex: 1; min-width: 0; }
.wc-exen { font-style: italic; font-weight: 700 !important; }
.wc-exen mark { background: linear-gradient(transparent 55%, rgba(255, 210, 60, 0.75) 55%); color: inherit; padding: 0 1px; border-radius: 3px; }
.wc-expl { margin-top: 4px !important; color: #6f7590; font-size: 14.5px !important; font-weight: 600; }
.wc-exsay { flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(30, 40, 90, 0.1); font-size: 18px; cursor: pointer; transition: transform 0.15s; }
.wc-exsay:hover { transform: scale(1.1); }
.wc-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 18px; }
.wc-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; border: 2px solid #e3e0f7; background: #fff; box-shadow: 0 4px 0 #e3e0f7; color: #4b5170; font: 800 16px Nunito, sans-serif; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.wc-act:hover { border-color: #cfc6ff; box-shadow: 0 4px 0 #cfc6ff; color: #5a3fe0; }
.wc-act:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3e0f7; }
.wc-act svg { width: 20px; height: 20px; }
.wc-act b { font-size: 22px; line-height: 1; }
.wc-fav.on { border-color: #ffc4d4; box-shadow: 0 4px 0 #ffc4d4; background: #fff1f5; color: #e0305f; }
.wc-fav.on svg { fill: currentColor; animation: wc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (max-width: 520px) { dialog.wcard { margin-bottom: 12px; } dialog.wcard[open] { animation-name: wc-sheet; } }
@keyframes wc-sheet { from { opacity: 0; transform: translateY(60px); } }
@media (prefers-reduced-motion: reduce) { .wc-art .wa-emoji { animation: none; } }
:root[data-theme="dark"] .wc-top { background: linear-gradient(180deg, #2a2438, #201d2a); }
:root[data-theme="dark"] .wc-top::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 65%); }
:root[data-theme="dark"] .wc-pron,
:root[data-theme="dark"] .wc-sb { background: rgba(255, 255, 255, 0.08); border-color: transparent; color: #d4d7e5; }
:root[data-theme="dark"] .wc-note { background: #251f38; } :root[data-theme="dark"] .wc-note.n-ex { background: #182335; } :root[data-theme="dark"] .wc-note.n-mnemo { background: #33291a; }
:root[data-theme="dark"] .wc-ni,
:root[data-theme="dark"] .wc-exsay,
:root[data-theme="dark"] .wc-act { background: #2a2733; border-color: #3a3550; box-shadow: none; color: #d4d7e5; }
:root[data-theme="dark"] .wc-expl { color: #a8adc2; }

/* karta słowa: ikony 3D w kartach, przyciski „klawisze” z krawędzią, sprężyste animacje */
.wc-ni { width: 46px; height: 46px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.09); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wc-ni img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(30, 40, 90, 0.18)); }
.wc-note:hover .wc-ni { transform: rotate(-8deg) scale(1.1); }
.wc-note { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wc-note:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(60, 50, 140, 0.35); }
.wc-exsay { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; box-shadow: 0 3px 0 rgba(30, 40, 90, 0.1); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s; }
.wc-exsay img { width: 30px; height: 30px; object-fit: contain; }
.wc-exsay:hover { transform: scale(1.1) rotate(-6deg); }
.wc-exsay:active { transform: translateY(3px) scale(0.95); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.wc-act { height: 56px; gap: 10px; font-size: 17px; border-width: 2px; box-shadow: 0 5px 0 #e3e0f7; position: relative; overflow: hidden; }
.wc-act::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; }
.wc-act:hover::after { left: 130%; }
.wc-act:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #cfc6ff; }
.wc-act:active { transform: translateY(4px); box-shadow: 0 1px 0 #e3e0f7; }
.wc-act img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(30, 40, 90, 0.2)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wc-act:hover img { transform: scale(1.15) rotate(-6deg); }
.wc-act b { transition: transform 0.2s; } .wc-act:hover b { transform: translateX(3px); }
.wc-fav:not(.on) img { filter: grayscale(1) opacity(0.55); }
.wc-fav.on { box-shadow: 0 5px 0 #ffc4d4; }
.wc-fav.on:hover { box-shadow: 0 7px 0 #ffb0c6; }
.wc-fav.burst img { animation: heart-beat 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes heart-beat { 0% { transform: scale(0.6); } 40% { transform: scale(1.5) rotate(-10deg); } 70% { transform: scale(0.95); } 100% { transform: scale(1); } }
.wc-fav.burst::before { content: '❤ ❤ ❤'; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 12px; color: #ff5c86; letter-spacing: 6px; animation: hearts-up 0.8s ease-out forwards; pointer-events: none; }
@keyframes hearts-up { from { opacity: 1; transform: translate(-50%, 8px); } to { opacity: 0; transform: translate(-50%, -22px); } }
.wc-sb { box-shadow: 0 5px 0 rgba(30, 40, 90, 0.1); }
.wc-sb:active img { transform: scale(0.85); }
.wc-sb img { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wc-sb:hover img { transform: scale(1.15) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .wc-act::after { display: none; } }
:root[data-theme="dark"] .wc-ni { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
:root[data-theme="dark"] .wc-fav.on { background: #341a24; border-color: #5a2a3d; box-shadow: 0 5px 0 #5a2a3d; }
.wc-act { white-space: nowrap; padding: 0 10px; font-size: 16px; }
.wc-act b { display: none; }

/* ekran ćwiczenia: przycisk zamknięcia 3D, pasek postępu z połyskiem, licznik diamentów, karta pytania, głośnik 3D, „Nie wiem” jako przycisk */
.session-top { gap: 12px; }
.session-top > .icon-btn { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border-radius: 50%; background: #fff; border: 2px solid #e6e2f8; box-shadow: 0 4px 0 #e6e2f8; color: #6a7396; transition: transform 0.15s, box-shadow 0.15s, color 0.2s, background 0.2s; }
.session-top > .icon-btn svg { width: 20px; height: 20px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.session-top > .icon-btn:hover { color: #e0305f; background: #fff5f8; transform: translateY(-1px); }
.session-top > .icon-btn:hover svg { transform: rotate(90deg); }
.session-top > .icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
.session-top .bar.thick { height: 16px; padding: 3px; background: rgba(97, 67, 255, 0.1); box-shadow: inset 0 2px 3px rgba(60, 50, 140, 0.12); overflow: visible; }
.session-top .bar.thick i { position: relative; height: 100%; min-width: 0; border-radius: 99px; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 12px rgba(80, 200, 20, 0.55); overflow: hidden; }
.session-top .bar.thick i:not([style*="width:0%"])::before { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); }
.session-top .bar.thick i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(255, 255, 255, 0.16) 10px 20px); background-size: 28px 100%; animation: bar-stripes 1.2s linear infinite; }
@keyframes bar-stripes { to { background-position: 28px 0; } }
.session-top .bar.thick i.grew::after { animation: bar-stripes 1.2s linear infinite; }
.gem-count { gap: 5px; padding: 4px 12px 4px 6px; border-radius: 999px; background: #efeaff; color: #5a3fe0; font-family: var(--display); font-size: 17px; }
.gem-count img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(90, 63, 224, 0.35)); }
.gem-count.up img { animation: fx-gem 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gem-count.up { animation: count-bump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card.study { position: relative; border-radius: 32px; border: 2px solid #ebe8fa; background: linear-gradient(180deg, #fff, #f8f6ff); box-shadow: 0 6px 0 #e6e2f8, 0 20px 34px -22px rgba(80, 60, 190, 0.45); }
.card.study > .badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 6px; background: #efeaff; color: #5a3fe0; font-weight: 800; font-size: 13px; }
.card.study > .badge img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(60, 50, 140, 0.25)); }
.card.study > .badge:not(:has(img)) { padding-left: 14px; }
.card.study .prompt-en .icon-btn,
.card.study .prompt-pl .icon-btn,
.card.study .tf-en .icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 32px no-repeat; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); }
.card.study .prompt-en .icon-btn svg,
.card.study .prompt-pl .icon-btn svg,
.card.study .tf-en .icon-btn svg { display: none; }
.card.study .prompt-en .icon-btn:hover,
.card.study .prompt-pl .icon-btn:hover,
.card.study .tf-en .icon-btn:hover { background-color: transparent; transform: scale(1.15) rotate(-6deg); }
.card.study .prompt-en .icon-btn:active,
.card.study .prompt-pl .icon-btn:active,
.card.study .tf-en .icon-btn:active { transform: scale(0.88); }
.dunno-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px auto 14px; padding: 0 24px; height: 46px; border: 2px solid #e6e2f8; background: #fff; box-shadow: 0 4px 0 #e6e2f8; color: #6a7396; transition: transform 0.15s, box-shadow 0.15s, color 0.2s, border-color 0.2s; }
.dunno-link::before { content: '🤔'; font-size: 18px; }
.dunno-link:hover { background: #fff; color: #5a3fe0; border-color: #cfc6ff; box-shadow: 0 4px 0 #cfc6ff; transform: translateY(-1px); }
.dunno-link:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
@media (prefers-reduced-motion: reduce) { .session-top .bar.thick i::after { animation: none; } }
:root[data-theme="dark"] .session-top > .icon-btn,
:root[data-theme="dark"] .dunno-link { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #2e2a3d; color: #b8bed0; }
:root[data-theme="dark"] .gem-count,
:root[data-theme="dark"] .card.study > .badge { background: #1d123f; color: #b9a8ff; }
:root[data-theme="dark"] .card.study { background: linear-gradient(180deg, #201d2a, #1b1924); border-color: #2e2a3d; box-shadow: 0 6px 0 #2a2638, 0 20px 34px -22px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .session-top .bar.thick { background: rgba(255, 255, 255, 0.08); }

/* okienko odpowiedzi (Dobrze / Źle): karta z krawędzią 3D, diament 3D, głośnik 3D, przycisk „Dalej” z krawędzią i błyskiem */
.fb-sheet { padding: 12px; border-radius: 34px; background: linear-gradient(180deg, #fff, #f8f6ff); box-shadow: 0 8px 0 rgba(255, 255, 255, 0.35), 0 28px 70px -20px rgba(20, 18, 60, 0.6); }
.fb-sheet .feedback { position: relative; border-radius: 26px; padding: 18px 16px 16px; border: 2px solid transparent; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.06); overflow: hidden; }
.fb-sheet .feedback.ok { border-color: #bfe8cd; box-shadow: 0 5px 0 #bfe8cd; }
.fb-sheet .feedback.bad { border-color: #f4c5c5; box-shadow: 0 5px 0 #f4c5c5; }
.fb-sheet .feedback.typo { border-color: #f6d9b4; box-shadow: 0 5px 0 #f6d9b4; }
.fb-sheet .feedback::before { content: ''; position: absolute; left: 50%; top: -60px; width: 220px; height: 130px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 70%); pointer-events: none; }
.fb-sheet .fb-title { position: relative; font-family: var(--display); font-size: 24px; font-weight: 800; animation: fb-title-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards; }
@keyframes fb-title-pop { from { opacity: 0; transform: scale(0.6) translateY(6px); } }
.fb-sheet .gain { padding: 3px 11px 3px 12px; background: #fff; box-shadow: 0 3px 0 rgba(90, 63, 224, 0.15); font-family: Nunito, sans-serif; font-size: 16px; font-weight: 800; animation: gain-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s backwards; }
.gain img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(90, 63, 224, 0.35)); }
@keyframes gain-pop { 0% { opacity: 0; transform: translateY(8px) scale(0.5); } 60% { transform: translateY(-4px) scale(1.2) rotate(-4deg); } }
.fb-sheet .word-en,
.fb-sheet .pron,
.fb-sheet .word-pl { position: relative; animation: fx-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.fb-sheet .word-en { font-size: 30px; animation-delay: 0.68s; } .fb-sheet .pron { animation-delay: 0.74s; } .fb-sheet .word-pl { font-size: 20px; animation-delay: 0.8s; }
.fb-sheet .word-en .icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 32px no-repeat; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fb-sheet .word-en .icon-btn svg { display: none; }
.fb-sheet .word-en .icon-btn:hover { background-color: transparent; transform: scale(1.15) rotate(-6deg); }
.fb-sheet .word-en .icon-btn:active { transform: scale(0.88); }
.fb-sheet .pron { display: inline-block; padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-weight: 700; }
.fb-sheet .btn.wide { position: relative; overflow: hidden; height: 58px; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; background: linear-gradient(90deg, #7b55ff, #5a3fe0); box-shadow: 0 5px 0 #3f2aa8, 0 14px 22px -8px rgba(90, 63, 224, 0.5); transition: transform 0.15s, box-shadow 0.15s, filter 0.2s; }
.fb-sheet:has(.feedback.ok) .btn.wide { background: linear-gradient(90deg, #6ee02b, #3fc40f); box-shadow: 0 5px 0 #2f9a0a, 0 14px 22px -8px rgba(60, 170, 10, 0.5); }
.fb-sheet:has(.feedback.bad) .btn.wide { background: linear-gradient(90deg, #ff7a6b, #f0483a); box-shadow: 0 5px 0 #b8281d, 0 14px 22px -8px rgba(230, 60, 40, 0.5); }
.fb-sheet:has(.feedback.typo) .btn.wide { background: linear-gradient(90deg, #ffb340, #f48a12); box-shadow: 0 5px 0 #b76208, 0 14px 22px -8px rgba(240, 140, 20, 0.5); }
.fb-sheet .btn.wide:hover { transform: translateY(-2px); filter: brightness(1.05); }
.fb-sheet .btn.wide:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.fb-sheet .btn.wide::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 3.8s ease-in-out 1.6s infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fb-sheet .btn.wide::after { display: none; } }
:root[data-theme="dark"] .fb-sheet { background: linear-gradient(180deg, #201d2a, #1b1924); }
:root[data-theme="dark"] .fb-sheet .gain { background: #2a2733; }
:root[data-theme="dark"] .fb-sheet .pron { background: rgba(255, 255, 255, 0.08); }

/* badge pytania: prosta „pigułka” z kropką (bez ikony) */
.card.study > .badge { padding: 6px 16px 6px 12px; gap: 8px; font-size: 14px; }
.card.study > .badge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #a58bff, #6143ff); box-shadow: 0 0 0 3px rgba(97, 67, 255, 0.15); animation: dot-pulse 1.8s ease-in-out infinite; }

/* okienko pytania (Zakończyć sesję? itp.): ikona 3D, przyciski z krawędzią 3D */
dialog.ask { border-radius: 34px; background: linear-gradient(180deg, #fff, #f8f6ff); box-shadow: 0 8px 0 rgba(255, 255, 255, 0.3), 0 30px 70px rgba(20, 20, 60, 0.4); }
.ask-box { text-align: center; padding: 26px 22px 22px; }
.ask-ic { display: block; width: 84px; height: 84px; margin: -4px auto 6px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(60, 50, 140, 0.3)); animation: ask-ic-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards, fx-float 3.2s ease-in-out 0.8s infinite; }
@keyframes ask-ic-in { from { opacity: 0; transform: scale(0.4) rotate(-14deg); } }
.ask-box h2 { font-size: 26px; animation: fx-fade-up 0.4s ease 0.15s backwards; }
.ask-box p { animation: fx-fade-up 0.4s ease 0.22s backwards; }
.ask-input { text-align: left; }
.ask-actions { animation: fx-fade-up 0.45s ease 0.3s backwards; }
.ask-btn { position: relative; overflow: hidden; height: 54px; font-size: 18px; box-shadow: 0 5px 0 #4a2fc0, 0 12px 20px -8px rgba(97, 67, 255, 0.55); background: linear-gradient(90deg, #8b5cff, #6143ff); transition: transform 0.15s, box-shadow 0.15s, filter 0.2s; }
.ask-btn:hover { transform: translateY(-2px); }
.ask-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #4a2fc0; }
.ask-btn:not(.ghost)::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 4s ease-in-out 1.2s infinite; pointer-events: none; }
.ask-btn.ghost { color: #6a7396; background: #fff; border: 2px solid #e3e0f7; box-shadow: 0 5px 0 #e3e0f7; }
.ask-btn.ghost:hover { color: #5a3fe0; border-color: #cfc6ff; box-shadow: 0 5px 0 #cfc6ff; filter: none; }
.ask-btn.ghost:active { box-shadow: 0 1px 0 #e3e0f7; }
.ask-btn.danger { background: linear-gradient(90deg, #ff7a6b, #f0483a); box-shadow: 0 5px 0 #b8281d, 0 12px 20px -8px rgba(230, 60, 40, 0.5); }
.ask-btn.danger:active { box-shadow: 0 1px 0 #b8281d; }
@media (prefers-reduced-motion: reduce) { .ask-ic,
.ask-btn::after { animation: none; } }
:root[data-theme="dark"] dialog.ask { background: linear-gradient(180deg, #201d2a, #1b1924); }
:root[data-theme="dark"] .ask-btn.ghost { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 5px 0 #2e2a3d; color: #b8bed0; }

/* okienko odpowiedzi: skojarzenie i przykład jako karty; lektor czyta tylko angielskie zdanie */
.fb-sheet .mnemo,
.fb-sheet .example.fb-ex { position: relative; display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 18px; text-align: left; font-size: 15px; font-weight: 600; animation: fx-fade-up 0.45s ease backwards; }
.fb-sheet .mnemo { background: rgba(255, 246, 221, 0.9); animation-delay: 0.88s; }
.fb-sheet .example.fb-ex { background: rgba(234, 245, 255, 0.9); animation-delay: 0.96s; }
.fb-sheet .fb-ic { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(60, 50, 140, 0.25)); }
.fb-sheet .fb-ex > span { flex: 1; min-width: 0; }
.fb-sheet .fb-ex i { font-weight: 700; }
.ex-pl { display: block; margin-top: 3px; color: #6f7590; font-size: 13.5px; font-style: normal; font-weight: 600; }
.fb-sheet .fb-ex .icon-btn { flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 28px no-repeat; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fb-sheet .fb-ex .icon-btn svg { display: none; }
.fb-sheet .fb-ex .icon-btn:hover { background-color: transparent; transform: scale(1.15) rotate(-6deg); }
.fb-sheet .fb-ex .icon-btn:active { transform: scale(0.88); }
:root[data-theme="dark"] .fb-sheet .mnemo { background: #33291a; } :root[data-theme="dark"] .fb-sheet .example.fb-ex { background: #182335; }
:root[data-theme="dark"] .ex-pl { color: #a8adc2; }

/* okienko odpowiedzi: ikony 3D w tytule, pasek narzędzi (wolno / ulubione / karta), podświetlone słowo w przykładzie */
.fb-sheet .fb-title { gap: 8px; }
.fb-tic { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(40, 60, 90, 0.3)); animation: ask-ic-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards; }
.fb-tools { position: relative; display: flex; justify-content: center; gap: 8px; margin-top: 12px; animation: fx-fade-up 0.45s ease 0.84s backwards; }
.fb-tool { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 8px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.1); color: #4b5170; font: 800 13.5px Nunito, sans-serif; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, color 0.2s; }
.fb-tool img { width: 22px; height: 22px; object-fit: contain; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fb-tool:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(30, 40, 90, 0.1); color: #5a3fe0; }
.fb-tool:hover img { transform: scale(1.18) rotate(-6deg); }
.fb-tool:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.fb-fav:not(.on) img { filter: grayscale(1) opacity(0.55); }
.fb-fav.on { color: #e0305f; background: #fff1f5; }
.fb-fav.burst img { animation: heart-beat 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fb-sheet .fb-ex mark { background: linear-gradient(transparent 55%, rgba(255, 210, 60, 0.75) 55%); color: inherit; padding: 0 1px; border-radius: 3px; }
:root[data-theme="dark"] .fb-tool { background: #2a2733; border-color: #3a3550; box-shadow: none; color: #d4d7e5; }
.fb-tools { gap: 6px; flex-wrap: wrap; }
.fb-tool { padding: 0 10px 0 6px; gap: 5px; font-size: 13px; height: 36px; }

/* Tak / Nie: duże kolorowe przyciski 3D z podpisem; kafelek ze słowem lżejszy, grafika unosi się */
.tf-btns { gap: 12px; margin: 6px 0 12px; }
.tf-btns .tf-btn { height: 74px; grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; border: 0; color: #fff; font: 800 22px var(--display); letter-spacing: 0.02em; overflow: hidden; }
.tf-btns .tf-btn::after { content: 'Tak'; }
.tf-btns .tf-btn.no::after { content: 'Nie'; }
.tf-btns .tf-btn svg { width: 30px; height: 30px; stroke: #fff !important; stroke-width: 3.2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.tf-btns .tf-btn.no { background: linear-gradient(180deg, #ff8a7a, #f0483a); box-shadow: 0 6px 0 #b8281d, 0 16px 22px -10px rgba(230, 60, 40, 0.5); }
.tf-btns .tf-btn.yes { background: linear-gradient(180deg, #7be835, #3fc40f); box-shadow: 0 6px 0 #2f9a0a, 0 16px 22px -10px rgba(60, 170, 10, 0.5); }
.tf-btns .tf-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.tf-btns .tf-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.tf-btns .tf-btn.ok,
.tf-btns .tf-btn.bad,
.tf-btns .tf-btn.picked { border: 0; }
.tf-btns .tf-btn.no.ok,
.tf-btns .tf-btn.no.bad,
.tf-btns .tf-btn.no.picked { background: linear-gradient(180deg, #ff8a7a, #f0483a); }
.tf-btns .tf-btn.yes.ok,
.tf-btns .tf-btn.yes.bad,
.tf-btns .tf-btn.yes.picked { background: linear-gradient(180deg, #7be835, #3fc40f); }
.tf-btns .tf-btn:not(:disabled)::before { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); animation: go-shine 4.2s ease-in-out 1.5s infinite; pointer-events: none; }
.card.study:has(.tf-tile) { padding: 16px 14px 18px; }
.card.study .tf-tile { background: linear-gradient(180deg, #eceaff, #e0defc); }
.card.study .tf-img { width: 132px; height: 132px; animation: fx-float 3.2s ease-in-out 1s infinite; }
.card.study .tf-img .wa-img { box-shadow: 0 10px 20px -10px rgba(60, 50, 140, 0.5); }
.card.study .tf-pl { font-size: 36px; }
:root[data-theme="dark"] .tf-btns .tf-btn { background: unset; }
:root[data-theme="dark"] .tf-btns .tf-btn.no { background: linear-gradient(180deg, #e0685a, #c0392b); }
:root[data-theme="dark"] .tf-btns .tf-btn.yes { background: linear-gradient(180deg, #5cc42a, #3a9a0e); }
@media (prefers-reduced-motion: reduce) { .tf-btns .tf-btn::before,
.card.study .tf-img { animation: none; } }

/* Dopasuj kartę: długi badge zawija się ładnie, karty z krawędzią 3D i numerami-klawiszami */
.card.study > .badge { max-width: 100%; text-align: center; line-height: 1.3; }
.card.study > .badge::before { flex-shrink: 0; }
.card.study { padding: 20px 16px 18px; }
.pic-grid { gap: 16px; margin: 6px 0 16px; }
.pic-card { border: 4px solid #fff; border-radius: 32px; box-shadow: 0 6px 0 color-mix(in srgb, var(--tint, #f2f3f8) 55%, #a86a1c 45%), 0 16px 24px -14px rgba(30, 40, 90, 0.4); }
.pic-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 35%); pointer-events: none; }
.pic-card kbd { top: 10px; left: 10px; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 7px; border-radius: 10px; background: #fff; color: #6a4cff; font: 800 14px Nunito, sans-serif; box-shadow: 0 2px 0 #ddd5ff; z-index: 2; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s; }
.pic-card:hover:not(:disabled) kbd { background: #6a4cff; color: #fff; transform: translateY(-2px) scale(1.1); }
.pic-card:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.pic-card.ok { border-color: var(--green); box-shadow: 0 6px 0 #3aa860, 0 0 0 5px rgba(34, 197, 94, 0.22); }
.pic-card.bad { border-color: var(--bad); box-shadow: 0 6px 0 #b03030; }
:root[data-theme="dark"] .pic-card { border-color: #2a2738; }
:root[data-theme="dark"] .pic-card kbd { background: #2a2738; color: #c9c6e8; box-shadow: none; }

/* Dopasuj pary: kolumny z podpisami i własnym kolorem, przyciski 3D, zaliczona para z ptaszkiem, licznik jako „pigułka” */
.pr-wrap { gap: 26px; }
.pr-col { position: relative; gap: 12px; }
.pr-col::before { content: 'Angielski'; display: block; margin: 0 0 -2px 6px; font: 800 12px Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #6a4cff; }
.pr-col + .pr-col::before { content: 'Polski'; color: #d9622b; }
.pr-btn { min-height: 60px; border: 2px solid #e4e0fb; background: linear-gradient(180deg, #fff, #f8f7ff); box-shadow: 0 5px 0 #dcd6f7, 0 12px 18px -12px rgba(60, 50, 140, 0.4); }
.pr-col + .pr-col .pr-btn { border-color: #f6e0d2; background: linear-gradient(180deg, #fff, #fffaf6); box-shadow: 0 5px 0 #f1d6c4, 0 12px 18px -12px rgba(160, 90, 40, 0.35); }
.pr-col + .pr-col .pr-num { background: #fff0e6; color: #d9622b; box-shadow: inset 0 -2px 0 rgba(217, 98, 43, 0.18); }
.pr-btn:hover:not(:disabled):not(.done) { transform: translateY(-3px); }
.pr-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #dcd6f7; }
.pr-btn.sel { border-color: #4cc81a; background: linear-gradient(180deg, #f6fff1, #eafbe1); box-shadow: 0 5px 0 #98dc78, 0 0 0 5px rgba(76, 200, 26, 0.18), 0 14px 22px -12px rgba(40, 150, 20, 0.55); }
.pr-btn.hit,
.pr-btn.done { border-color: #22c55e; background: #e4f8ea; box-shadow: 0 5px 0 #a7e3bb; }
.pr-btn.done { opacity: 0.55; }
.pr-btn.bad { border-color: var(--bad); background: #fff1f0; box-shadow: 0 5px 0 #f4c5c5; }
.pr-btn.done .pr-num,
.pr-btn.hit .pr-num { font-size: 0; }
.pr-btn.done .pr-num::after,
.pr-btn.hit .pr-num::after { content: '✓'; font-size: 17px; }
.pr-img { width: 42px; height: 42px; }
.pr-count { display: table; margin: -4px auto 14px; padding: 5px 16px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 #e6e2f8; color: #6a7396; font-size: 14px; font-weight: 800; }
.pr-count b { font-size: 16px; }
:root[data-theme="dark"] .pr-btn,
:root[data-theme="dark"] .pr-col + .pr-col .pr-btn { background: #242640; border-color: #34375a; box-shadow: 0 5px 0 #1a1c30; }
:root[data-theme="dark"] .pr-col + .pr-col .pr-num { background: #3a2a22; color: #ffb48a; }
:root[data-theme="dark"] .pr-count { background: #201d2a; box-shadow: 0 3px 0 #2e2a3d; }
:root[data-theme="dark"] .pr-btn.done,
:root[data-theme="dark"] .pr-btn.hit { background: #1d3a26; border-color: #2f8f55; box-shadow: 0 5px 0 #17301f; }

/* flagi w kółkach przy nazwach kolumn */
.pr-col::before { padding-left: 30px; min-height: 22px; line-height: 22px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2229%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%200l60%2060M60%200%200%2060%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2212%22%2F%3E%3Cpath%20d%3D%22M0%200l60%2060M60%200%200%2060%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M30%200v60M0%2030h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2216%22%2F%3E%3Cpath%20d%3D%22M30%200v60M0%2030h60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%229%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2229%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") left center / 22px 22px no-repeat; }
.pr-col + .pr-col::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2229%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20y%3D%2230%22%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23DC143C%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2229%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") left center / 22px 22px no-repeat; }
.pr-col::before { font-size: 13px; }

/* ćwiczenia z odpowiedziami: flaga języka w kółku po prawej, flaga polskiego prompta, mocniejsze krawędzie odpowiedzi */

.prompt-pl.has-art:not(:has(.prompt-art))::before { content: ""; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2229%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20y%3D%2230%22%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23DC143C%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2229%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / cover; box-shadow: 0 3px 6px rgba(30, 40, 90, 0.25); }
.opt { border-radius: 22px; min-height: 60px; }
.dunno-link::before { content: ''; width: 24px; height: 24px; background: url(assets/ui/question.png) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(90, 63, 224, 0.3)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dunno-link:hover::before { transform: rotate(-12deg) scale(1.15); }
.prompt-pl.has-art:not(:has(.prompt-art))::before { content: none; display: none; }

/* „Nie wiem” z okiem 3D; podpowiedź do słowa jako karta z żarówką 3D */
.dunno-link::before { background-image: url(assets/ui/dunno-eye.png); width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(90, 63, 224, 0.35)); }
.dunno-link:hover::before { transform: scale(1.18); }
.prompt-hint { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 18px; border: 2px solid #ffe7a3; background: linear-gradient(180deg, #fffbe9, #fff4cc); box-shadow: 0 4px 0 #ffe7a3; text-align: left; font-weight: 600; animation: fx-fade-up 0.45s ease 0.3s backwards; }
.prompt-hint img { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(180, 120, 0, 0.35)); animation: fx-float 3.2s ease-in-out infinite; }
.prompt-hint span { flex: 1; }
:root[data-theme="dark"] .prompt-hint { background: #33291a; border-color: #4d3d1e; box-shadow: 0 4px 0 #4d3d1e; color: #f0d9a0; }
@media (prefers-reduced-motion: reduce) { .prompt-hint img { animation: none; } }
/* Utwórz słowo: obrazek przy polskim słowie większy */
.card.study:has(.bw-level) .prompt-art,
.card.study:has(.bw-say) .prompt-pl .prompt-art { width: 84px; height: 84px; border-radius: 20px; }
.card.study:has(.bw-level) .prompt-pl.has-art,
.card.study:has(.bw-say) .prompt-pl.has-art { flex-direction: column; gap: 10px; }
.card.study:has(.bw-level) .prompt-art,
.card.study:has(.bw-say) .prompt-pl .prompt-art { width: 96px; height: 96px; }
/* Polskie słowo pod obrazkiem (Jak to powiesz / Napisz po angielsku / Utwórz słowo) */
.prompt-pl.has-art:has(.prompt-art) { flex-direction: column; gap: 10px; }
.prompt-pl.has-art .prompt-art { width: 96px; height: 96px; border-radius: 22px; }
.prompt-pl .pl-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Napisz po angielsku: pole i przyciski w stylu reszty (krawędź 3D), podpowiedź w polu się mieści */
.type-box input { height: 60px; border-radius: 22px; border: 2px solid #e4e1f2; background: #fff; box-shadow: 0 5px 0 #e6e2f8; font-size: 20px; font-weight: 700; }
.type-box input::placeholder { font-size: 15px; font-weight: 600; color: #a3a8bd; }
.type-actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; margin-top: 14px; }
.type-actions .btn { height: 54px; padding: 0 8px; border-radius: 999px; font-family: var(--display); font-size: 16px; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s; }
.type-actions .btn.ghost { border: 2px solid #e6e2f8; background: #fff; color: #6a7396; box-shadow: 0 5px 0 #e6e2f8; }
.type-actions .btn.ghost:hover { color: #5a3fe0; border-color: #cfc6ff; box-shadow: 0 5px 0 #cfc6ff; transform: translateY(-2px); }
.type-actions .btn.primary { border: 0; color: #fff; background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 5px 0 #4a2fc0, 0 12px 20px -8px rgba(97, 67, 255, 0.55); font-size: 18px; }
.type-actions .btn.primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.type-actions .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
:root[data-theme="dark"] .type-actions .btn.ghost,
:root[data-theme="dark"] .type-box input { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 5px 0 #2e2a3d; color: #d4d7e5; }
.type-actions .btn { width: 100%; min-width: 0; margin: 0; }

/* tło ćwiczeń (Ming): jasny wzór z drobnymi ikonami, bardzo delikatny */

/* podpowiedź kosztuje 1 diament: plakietka „−1” na przycisku, lot „−1” z licznika, wstrząs przy braku diamentów */
.type-actions .hint-btn { position: relative; flex-direction: column; gap: 0; line-height: 1.1; }
.hint-cost { display: inline-flex; align-items: center; gap: 2px; margin-top: 1px; font: 800 12px Nunito, sans-serif; font-style: normal; color: #8b5cf6; }
.hint-cost img { width: 16px; height: 16px; object-fit: contain; }
.hint-btn.broke { opacity: 0.6; }
.hint-btn.broke .hint-cost { color: #e0305f; }
.hint-btn.shake { animation: opt-shake 0.45s ease; }
.gem-count { position: relative; }
.gem-count.down { animation: gem-down 0.5s ease; }
@keyframes gem-down { 30% { transform: scale(0.88) rotate(-4deg); background: #ffe3e8; } 60% { transform: scale(1.05); } }
.gem-fly { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font: 800 18px var(--display); color: #e0305f; pointer-events: none; animation: gem-fly 0.9s ease-out forwards; }
@keyframes gem-fly { from { opacity: 1; transform: translate(-50%, 0) scale(1.2); } to { opacity: 0; transform: translate(-50%, 26px) scale(0.8); } }

/* efekty w ćwiczeniu pisania: pole świeci przy pisaniu, „Sprawdź” pulsuje, gdy jest odpowiedź */
.type-box input:focus { border-color: #8b5cff; box-shadow: 0 5px 0 #d9ceff, 0 0 0 5px rgba(97, 67, 255, 0.14); }
.type-box:has(input:not(:placeholder-shown):not([readonly])) ~ .type-actions .btn.primary { animation: send-pulse 1.4s ease-in-out infinite; }
@keyframes send-pulse { 0%, 100% { box-shadow: 0 5px 0 #4a2fc0, 0 12px 20px -8px rgba(97, 67, 255, 0.55); } 50% { box-shadow: 0 5px 0 #4a2fc0, 0 12px 30px -4px rgba(97, 67, 255, 0.95); transform: translateY(-2px); } }
.type-actions .btn.primary::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 4s ease-in-out 1.5s infinite; pointer-events: none; }
.type-actions .btn { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .type-box:has(input) ~ .type-actions .btn.primary,
.type-actions .btn.primary::after { animation: none; } }

/* animowane tło ćwiczeń (js/app/views.js: syncBgFx) */
#bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bgfx-scene { position: absolute; inset: -10%; background-position: center; background-size: cover; animation: bgfx-pan 38s ease-in-out infinite alternate; will-change: transform; }
[data-scene="sky"] .bgfx-scene { background-image: url(assets/ui/bgfx/sky.jpg); }
[data-scene="hills"] .bgfx-scene { background-image: url(assets/ui/bgfx/hills.jpg); }
[data-scene="bokeh"] .bgfx-scene { background-image: url(assets/ui/bgfx/bokeh.jpg); filter: blur(7px); }
[data-scene="doodle"] .bgfx-scene { inset: 0; background-image: url(assets/ui/bgfx/doodle.jpg); background-size: 620px auto; background-repeat: repeat; animation: bgfx-drift 70s linear infinite; }
.bgfx-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 244, 255, 0.72), rgba(246, 244, 255, 0.5) 60%, rgba(246, 244, 255, 0.66)); }
[data-scene="doodle"] .bgfx-veil { background: linear-gradient(180deg, rgba(246, 244, 255, 0.5), rgba(246, 244, 255, 0.3)); }
.bgfx-orb { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(46px); opacity: 0.5; animation: bgfx-orb 16s ease-in-out infinite alternate; }
.bgfx-orb.a { left: -110px; top: 6%; background: rgba(150, 120, 255, 0.5); }
.bgfx-orb.b { right: -120px; bottom: 4%; background: rgba(110, 200, 255, 0.45); animation-delay: -8s; }
#bgfx > img { position: absolute; top: 0; height: auto; opacity: 0.5; filter: drop-shadow(0 6px 8px rgba(60, 50, 140, 0.18)); animation: bgfx-rise var(--d) linear var(--dl) infinite, bgfx-sway var(--sw) ease-in-out infinite alternate; will-change: transform; }
@keyframes bgfx-rise { from { transform: translateY(112vh) rotate(var(--r)); } to { transform: translateY(-20vh) rotate(calc(var(--r) * -1.6)); } }
@keyframes bgfx-sway { from { translate: -18px 0; } to { translate: 18px 0; } }
@keyframes bgfx-pan { from { transform: scale(1.02) translate(-1.5%, -1%); } to { transform: scale(1.12) translate(1.5%, 1.5%); } }
@keyframes bgfx-drift { to { background-position: 620px 620px; } }
@keyframes bgfx-orb { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 60px) scale(1.25); } }
:root[data-theme="dark"] .bgfx-veil { background: linear-gradient(180deg, rgba(19, 17, 26, 0.9), rgba(19, 17, 26, 0.82)); }
:root[data-theme="dark"] #bgfx > img { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { .bgfx-scene,
.bgfx-orb,
#bgfx > img { animation: none; } #bgfx > img { display: none; } }

/* ===== Podsumowanie sesji (viewSummary): puchar z konfetti, kafelki 3D, seria, przyciski — w stylu apki ===== */
.sx { max-width: 460px; padding-bottom: 6px; }
.sx > * { animation: sx-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.12s + var(--i, 0) * 0.08s); }
@keyframes sx-up { from { opacity: 0; transform: translateY(22px) scale(0.97); } }

/* — bohater: puchar, promienie, konfetti — */
.sx-hero { position: relative; overflow: hidden; margin: 2px 0 6px; padding: 18px 16px 18px; border-radius: 36px; text-align: center; background: linear-gradient(160deg, #f2ecff, #e4e9ff 60%, #dff3ff); border: 2px solid #fff; box-shadow: 0 7px 0 #d9d2f7, 0 24px 34px -22px rgba(80, 60, 190, 0.5); animation-delay: 0s; }
.sx-rays { position: absolute; left: 50%; top: 18px; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.55) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: sx-spin 26s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
.sx-trophy { position: relative; display: block; width: 138px; height: 138px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(120, 80, 20, 0.35)); animation: sx-trophy-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards, fx-float 3.4s ease-in-out 1.2s infinite; }
@keyframes sx-trophy-in { 0% { opacity: 0; transform: translateY(-60px) scale(0.3) rotate(-25deg); } 60% { transform: translateY(6px) scale(1.12) rotate(6deg); } }
.sx-title { position: relative; margin: 6px 0 8px; font-family: var(--display); font-size: 40px; font-weight: 800; color: #131d4c; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.9); animation: pick-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s backwards; }
.sx-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.sx-chips span { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.08); color: #5a5f7a; font-size: 14px; font-weight: 700; animation: fx-fade-up 0.5s ease 0.7s backwards; }
.sx-chips span + span { animation-delay: 0.82s; }
.sx-chips b { color: #131d4c; font-family: var(--display); font-size: 17px; }
.sx-chips img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(40, 70, 140, 0.25)); }
.sx-confetti { position: absolute; inset: 0; pointer-events: none; }
.sx-confetti i { position: absolute; top: -14px; width: var(--w); height: calc(var(--w) * 1.6); border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: sx-fall var(--du) ease-in var(--dl) 1 both; }
@keyframes sx-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(330px) translateX(24px) rotate(calc(var(--r) + 540deg)); } }

/* — nagłówki i kafelki dnia — */
.sx-h { margin: 22px 2px 10px; font-family: var(--display); font-size: 24px; font-weight: 800; color: #131d4c; animation-delay: 0.3s; }
.sx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation: none; }
.sx-tile { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 6px 12px; border-radius: 26px; background: #fff; border: 2px solid #ebe8fa; box-shadow: 0 6px 0 #e3defa, 0 16px 22px -16px rgba(60, 50, 140, 0.45); text-align: center; animation: sx-tile-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(0.4s + var(--i) * 0.1s); transition: transform 0.2s, box-shadow 0.2s; }
.sx-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 0 #e3defa, 0 20px 26px -16px rgba(60, 50, 140, 0.5); }
@keyframes sx-tile-in { from { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(0.9); } }
.sx-ti { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(60, 50, 140, 0.28)); animation: fx-float 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s); }
.sx-num { margin-top: 4px; font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.t-new .sx-num { color: #45c411; } .t-ex .sx-num { color: #7c3aed; } .t-acc .sx-num { color: #f08a12; }
.sx-tl { font-size: 13px; font-weight: 700; color: #6f7590; }
.sx-tile small { margin-top: 6px; font-size: 12px; font-weight: 700; color: #a0a5bb; }
.sx-bar { display: block; width: 78%; height: 8px; margin-top: 8px; border-radius: 99px; background: rgba(97, 67, 255, 0.1); overflow: hidden; position: relative; }
.sx-bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #7be835, #3fc40f); transform-origin: left; animation: sx-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards; }
.t-ex .sx-bar::before { background: linear-gradient(90deg, #a58bff, #7c3aed); }
.t-acc .sx-bar::before { background: linear-gradient(90deg, #ffc83d, #f08a12); }
@keyframes sx-grow { from { transform: scaleX(0); } }

/* — karty: Rozumiesz, seria, Wczoraj / 7 dni, do przećwiczenia — */
.sx-card,
.sx-mini { position: relative; margin-top: 16px; padding: 16px 16px 16px; border-radius: 28px; background: #fff; border: 2px solid #ebe8fa; box-shadow: 0 6px 0 #e3defa, 0 16px 22px -16px rgba(60, 50, 140, 0.4); }
.sx-lang { display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, #f4fff0, #fff); border-color: #d6f0c8; box-shadow: 0 6px 0 #cfeabf, 0 16px 22px -16px rgba(60, 150, 30, 0.35); }
.sx-flag { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px -2px rgba(30, 40, 90, 0.35); animation: sx-flag 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards; }
@keyframes sx-flag { from { transform: scale(0) rotate(-90deg); } }
.sx-flag svg { display: block; width: 100%; height: 100%; }
.sx-lbody { flex: 1; min-width: 0; }
.sx-lrow { display: flex; align-items: baseline; justify-content: space-between; }
.sx-lrow h3 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 800; color: #131d4c; }
.sx-lrow .sx-num { margin: 0; font-size: 26px; color: #3aa80f; }
.sx-track { display: block; height: 12px; margin: 8px 0 6px; border-radius: 99px; background: rgba(60, 170, 30, 0.14); overflow: hidden; }
.sx-track em { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 10px rgba(80, 200, 20, 0.5); animation: sx-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards; transform-origin: left; }
.sx-lang small { font-size: 12.5px; font-weight: 700; color: #7a8099; }

.sx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sx-head img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(40, 60, 90, 0.25)); }
.sx-head h3 { flex: 1; margin: 0; font-family: var(--display); font-size: 21px; font-weight: 800; color: #131d4c; }
.sx-head b { padding: 3px 12px; border-radius: 999px; background: #efeaff; color: #5a3fe0; font-size: 14px; font-weight: 800; }
.sx-streak { background: linear-gradient(160deg, #fff6ea, #fff); border-color: #ffe0b8; box-shadow: 0 6px 0 #ffd9a8, 0 16px 22px -16px rgba(220, 130, 30, 0.4); }
.sx-streak .sx-head b { background: #ffe9cf; color: #c76a08; }
.sx-days { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.sx-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 1; animation: fx-fade-up 0.45s ease backwards; animation-delay: calc(0.8s + var(--k, 5) * 0.08s); }
.sx-day i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid #eadfcf; box-shadow: 0 4px 0 #eadfcf; font: 800 19px var(--display); font-style: normal; color: #b7a48a; }
.sx-day i img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(220, 90, 20, 0.45)); animation: heart-beat 1.6s ease-in-out infinite; }
.sx-day.now i { border-color: #ffb45c; color: #d97706; box-shadow: 0 4px 0 #ffcf99, 0 0 0 4px rgba(255, 180, 92, 0.25); }
.sx-day.done i { background: linear-gradient(180deg, #fff2dd, #ffe0b8); border-color: #ffb45c; }
.sx-day.prize i { background: #f1ecff; border-color: #d9ceff; box-shadow: 0 4px 0 #d9ceff; }
.sx-day.prize i img { width: 34px; height: 34px; animation: fx-float 3s ease-in-out infinite; }
.sx-day small { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; color: #a19078; }
.sx-day.prize small { color: #6d4ce0; }
.sx-note { margin: 12px 0 0; padding: 9px 12px; border-radius: 14px; background: #fff1dc; color: #a35a00; font-size: 13.5px; font-weight: 700; text-align: center; }

.sx-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; animation: none; }
.sx-mini { margin-top: 0; padding: 14px 12px; animation: sx-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.12s + var(--i) * 0.08s); }
.sx-mini h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-family: var(--display); font-size: 17px; font-weight: 800; color: #131d4c; }
.sx-mini h4 img { width: 26px; height: 26px; object-fit: contain; }
.sx-mrows { display: grid; gap: 6px; }
.sx-mrows span { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 700; color: #7a8099; }
.sx-mrows b { min-width: 34px; font-family: var(--display); font-size: 20px; font-weight: 800; color: #4a3fd0; }

.sx-wrong .mini-word { padding: 8px 0; }
.sx-wrong .mini-word .icon-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 30px no-repeat; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sx-wrong .mini-word .icon-btn svg { display: none; }
.sx-wrong .mini-word .icon-btn:hover { background-color: transparent; transform: scale(1.15) rotate(-6deg); }
.sx-wrong .mini-word b { font-size: 17px; }

/* — dolny pasek: nagroda + przyciski 3D — */
.sx-cta { position: sticky; bottom: 0; margin-top: 20px; padding: 14px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg, #f3f2fb) 78%, transparent); animation: none; }

.sx-cta .sm-go { position: relative; overflow: hidden; height: 66px; font-size: 25px; background: linear-gradient(90deg, #6ee02b, #3fc40f); box-shadow: 0 6px 0 #2f9a0a, 0 16px 26px -8px rgba(60, 170, 10, 0.55); animation: sx-up 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 1.2s backwards, go-breathe 2.8s ease-in-out 2s infinite; }
.sx-cta .sm-go:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #2f9a0a, 0 20px 30px -8px rgba(60, 170, 10, 0.65); }
.sx-cta .sm-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #2f9a0a; }
.sx-cta .sm-go::after { animation: go-shine 4.5s ease-in-out 2.2s infinite; }
.sx-cta .sm-more { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin-top: 12px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 5px 0 #4a2fc0, 0 12px 20px -8px rgba(97, 67, 255, 0.55); color: #fff; font: 700 20px var(--display); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; animation: sx-up 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 1.32s backwards; }
.sx-cta .sm-more:hover { transform: translateY(-2px); background: linear-gradient(90deg, #8b5cff, #6143ff); }
.sx-cta .sm-more:active { transform: translateY(4px); box-shadow: 0 1px 0 #4a2fc0; }

@media (prefers-reduced-motion: reduce) { .sx > *,
.sx-tile,
.sx-trophy,
.sx-rays,
.sx-confetti i,
.sx-ti,
.sx-day,
.sx-day i img,
.sx-cta .sm-go { animation: none !important; } .sx-confetti { display: none; } }

/* ciemny motyw */
:root[data-theme="dark"] .sx-hero { background: linear-gradient(160deg, #2a2545, #1f2140); border-color: #2e2a3d; box-shadow: 0 7px 0 #2a2638; }
:root[data-theme="dark"] .sx-rays { opacity: 0.25; }
:root[data-theme="dark"] .sx-title,
:root[data-theme="dark"] .sx-h,
:root[data-theme="dark"] .sx-lrow h3,
:root[data-theme="dark"] .sx-head h3,
:root[data-theme="dark"] .sx-mini h4 { color: #f1f0ff; text-shadow: none; }
:root[data-theme="dark"] .sx-chips span { background: #2a2733; color: #b8bed0; border-color: #3a3550; box-shadow: none; }
:root[data-theme="dark"] .sx-chips b { color: #f1f0ff; }
:root[data-theme="dark"] .sx-tile,
:root[data-theme="dark"] .sx-card,
:root[data-theme="dark"] .sx-mini { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 6px 0 #2a2638; }
:root[data-theme="dark"] .sx-lang { background: linear-gradient(160deg, #1a2a1c, #201d2a); border-color: #2c4a2f; box-shadow: 0 6px 0 #1d331f; }
:root[data-theme="dark"] .sx-streak { background: linear-gradient(160deg, #33291a, #201d2a); border-color: #4d3d1e; box-shadow: 0 6px 0 #3d2f16; }
:root[data-theme="dark"] .sx-day i { background: #2a2733; border-color: #3a3550; box-shadow: 0 4px 0 #3a3550; }
:root[data-theme="dark"] .sx-note { background: #3a2d18; color: #ffcf99; }
:root[data-theme="dark"] .sx-mrows b { color: #b9a8ff; }
:root[data-theme="dark"] .sx-cta { background: linear-gradient(to top, #13111a 78%, transparent); }
.sx-chips span.prize { background: linear-gradient(180deg, #fff6d6, #ffe9a8); box-shadow: 0 3px 0 #f3d375; color: #8a5a00; }
.sx-chips span.prize b { color: #b86e00; min-width: 26px; text-align: right; }
.sx-chips span.prize img { animation: fx-float 2.6s ease-in-out infinite; }
.sx-cta { margin-top: 16px; padding-top: 12px; }
:root[data-theme="dark"] .sx-chips span.prize { background: #3a2d18; color: #ffcf99; box-shadow: none; }
:root[data-theme="dark"] .sx-chips span.prize b { color: #ffc46b; }
.sx-cta { background: linear-gradient(to top, rgba(243, 240, 255, 0.92) 70%, transparent); }
:root[data-theme="dark"] .sx-cta { background: linear-gradient(to top, rgba(19, 17, 26, 0.94) 70%, transparent); }

/* podsumowanie: bez jasnego prostokąta pod przyciskami; pomarańczowa błyskawica → liczby ćwiczeń pomarańczowe, dokładność fioletowa */
.sx-cta,
:root[data-theme="dark"] .sx-cta { background: none; }
.t-ex .sx-num { color: #f08a12; } .t-acc .sx-num { color: #7c3aed; }
.t-ex .sx-bar::before { background: linear-gradient(90deg, #ffc83d, #f08a12); }
.t-acc .sx-bar::before { background: linear-gradient(90deg, #a58bff, #7c3aed); }
.sx-cta .sm-go,
.sx-cta .sm-more { filter: drop-shadow(0 8px 10px rgba(50, 30, 120, 0.18)); }

/* ekran słowa: przyciski 3D, odsłuch zwykły i wolny, plakietki, karty z ikonami, przyciski akcji */
.wd-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 100%, #fff 0%), color-mix(in srgb, var(--tint) 45%, #fff)); position: relative; overflow: hidden; }
.wd-hero::before { content: ''; position: absolute; left: 50%; top: 40px; width: 280px; height: 280px; margin-left: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent 65%); pointer-events: none; }
.wd-hero > * { position: relative; }
.wd-bar .pk-back { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 0 rgba(30, 40, 90, 0.12); transition: transform 0.15s, box-shadow 0.15s; }
.wd-bar .pk-back:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(30, 40, 90, 0.12); }
.wd-bar .pk-back:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 40, 90, 0.12); }
.wd-fav img { width: 30px; height: 30px; object-fit: contain; filter: grayscale(1) opacity(0.5); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s; }
.wd-fav.on img { filter: none; transform: scale(1.1); animation: heart-beat 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wd-art .wa-img { border-radius: 30px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.06), 0 20px 28px -16px rgba(60, 50, 140, 0.5); }
.wd-art .wa-emoji { animation: pc-float 3.2s ease-in-out infinite; }
.wd-pron { display: inline-block; margin-top: 8px; padding: 3px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 20px; font-weight: 700; }
.wd-sayrow { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.wd-sb { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 12px; border: 2px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 5px 0 rgba(30, 40, 90, 0.1); color: #2b3a7a; font: 800 16px Nunito, sans-serif; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.wd-sb img { width: 30px; height: 30px; object-fit: contain; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wd-sb:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(30, 40, 90, 0.1); }
.wd-sb:hover img { transform: scale(1.15) rotate(-6deg); }
.wd-sb:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 40, 90, 0.1); }
.wd-body { border-radius: 30px 30px 0 0; margin-top: -18px; position: relative; }
.wd-pl { border-bottom: 0; padding: 22px 0 8px; }
.wd-pl b { font-family: var(--display); }
.wd-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.wd-badges .wr-pos span { display: inline; }
.wd-badges .wr-pos i img { width: 20px; height: 20px; }
.wd-topic { border: 2px solid #e6e2f8; background: #fff; box-shadow: 0 4px 0 #e6e2f8; font-weight: 800; transition: transform 0.15s, box-shadow 0.15s; }
.wd-topic:hover { transform: translateY(-2px); background: #fff; border-color: #cfc6ff; box-shadow: 0 6px 0 #cfc6ff; }
.wd-cards { display: grid; gap: 10px; padding: 8px 0 4px; }
.wd-cards .wc-exsay { align-self: center; }
.wd-block.wd-prog { margin: 8px 0 0; padding: 16px 14px; border: 2px solid #ebe8fa; border-radius: 26px; background: linear-gradient(160deg, #faf8ff, #fff); box-shadow: 0 5px 0 #e3defa; }
.wd-block h3 { font-size: 16px; color: #5a3fe0; }
.wd-cta .wd-link { height: 52px; padding: 0 20px; border-radius: 999px; border: 2px solid #e3e0f7; background: #fff; box-shadow: 0 5px 0 #e3e0f7; font-weight: 800; transition: transform 0.15s, box-shadow 0.15s; }
.wd-cta .wd-link:hover { transform: translateY(-2px); color: #5a3fe0; border-color: #cfc6ff; box-shadow: 0 7px 0 #cfc6ff; background: #fff; }
.wd-cta .wd-link:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3e0f7; }
.wd-cta .wd-actions { grid-template-columns: 1fr 1fr; gap: 12px; }
.wd-cta .wd-actions.one { grid-template-columns: 1fr; }
.wd-cta .wd-actions > span { display: none; }
.wd-cta .pick-go { height: 66px; box-shadow: 0 6px 0 #2f9a0a, 0 16px 26px -8px rgba(60, 170, 10, 0.55); }
.wd-cta .pick-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #2f9a0a; }
.wd-state { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12); }
.wd-state img { width: 34px; height: 34px; object-fit: contain; }
.wd-state.known { box-shadow: 0 6px 0 #1a9048; }
.wd-hero .wd-en,
.wd-hero .wd-pron,
.wd-hero .wd-art,
.wd-sayrow { animation: fx-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.wd-en { animation-delay: 0.1s; } .wd-pron { animation-delay: 0.17s; } .wd-sayrow { animation-delay: 0.24s; }
:root[data-theme="dark"] .wd-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 30%, #1f1c2b), #1b1924); }
:root[data-theme="dark"] .wd-bar .pk-back,
:root[data-theme="dark"] .wd-sb,
:root[data-theme="dark"] .wd-topic,
:root[data-theme="dark"] .wd-cta .wd-link { background: #2a2733; border-color: #3a3550; box-shadow: 0 4px 0 #3a3550; color: #d4d7e5; }
:root[data-theme="dark"] .wd-pron { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .wd-block.wd-prog { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 5px 0 #2a2638; }

/* plakietka poziomu CEFR na ekranie słowa: wyraźna, z połyskiem */
.wd-badges .ln-cefr { position: relative; overflow: hidden; height: 28px; padding: 0 14px; display: inline-flex; align-items: center; color: #fff; font: 800 14px var(--display); background: linear-gradient(135deg, #a58bff, #6143ff); box-shadow: 0 3px 0 #4a2fc0, 0 8px 14px -6px rgba(97, 67, 255, 0.6); animation: pick-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards; }
.wd-badges .ln-cefr::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); animation: go-shine 3.6s ease-in-out 1s infinite; }

/* Twój postęp: ścieżka z zielonym wypełnieniem, ptaszkami i pulsującym bieżącym etapem */
.wd-track { gap: 0; margin: 10px 0 14px; }
.wd-step::before { top: 12px; height: 6px; border-radius: 6px; background: #e6e2f8; }
.wd-step i { width: 30px; height: 30px; display: grid; place-items: center; border: 3px solid #d9d5ee; background: #fff; box-shadow: 0 3px 0 #e3defa; font-style: normal; transition: transform 0.2s; }
.wd-step.done::before { background: linear-gradient(90deg, #7be835, #3fc40f); transform-origin: left; animation: sx-grow 0.6s ease backwards; animation-delay: calc(0.3s + var(--n, 0) * 0.12s); }
.wd-step.cur::before { background: linear-gradient(90deg, #3fc40f, #e6e2f8); }
.wd-step.done i { background: linear-gradient(180deg, #7be835, #3fc40f); border-color: #fff; box-shadow: 0 3px 0 #2f9a0a; animation: pick-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(0.35s + var(--n, 0) * 0.12s); }
.wd-step.done i::after { content: '✓'; color: #fff; font: 900 15px/1 var(--display); }
.wd-step.cur i { background: linear-gradient(180deg, #a58bff, #6143ff); border-color: #fff; box-shadow: 0 3px 0 #4a2fc0, 0 0 0 5px rgba(97, 67, 255, 0.2); animation: step-pulse 1.8s ease-in-out infinite; }
.wd-step.cur i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
@keyframes step-pulse { 0%, 100% { box-shadow: 0 3px 0 #4a2fc0, 0 0 0 4px rgba(97, 67, 255, 0.2); transform: scale(1); } 50% { box-shadow: 0 3px 0 #4a2fc0, 0 0 0 10px rgba(97, 67, 255, 0.05); transform: scale(1.12); } }
.wd-step small { margin-top: 2px; font-size: 11.5px; }
.wd-step.done small { color: #3aa80f; }
.wd-level { padding: 10px 12px; border-radius: 16px; background: #f1eeff; color: #4b5170; font-size: 14.5px; }
.wd-level b { color: #5a3fe0; }
@media (prefers-reduced-motion: reduce) { .wd-step.cur i,
.wd-badges .ln-cefr::after { animation: none; } }
:root[data-theme="dark"] .wd-step i { background: #2a2733; border-color: #3a3550; box-shadow: none; }
:root[data-theme="dark"] .wd-level { background: #251f38; color: #c9c6e8; }

/* ekran słowa — dopracowanie: plakietki, statystyki, listy, dolny pasek */
.wd-badges .wr-pos { height: 28px; padding: 0 11px 0 7px; }
.wd-badges .wr-pos span { color: var(--pf); font-size: 13px; font-weight: 800; }
.wd-badges .ln-cefr { font-size: 14px; }
.wd-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.wd-meta span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 9px; border-radius: 18px; background: #fff; border: 2px solid #ebe8fa; box-shadow: 0 4px 0 #e3defa; font-size: 11.5px; font-weight: 700; color: #8a90a8; animation: sx-up 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; }
.wd-meta span:nth-child(2) { animation-delay: 0.08s; } .wd-meta span:nth-child(3) { animation-delay: 0.16s; }
.wd-meta img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(60, 50, 140, 0.25)); }
.wd-meta b { font: 800 17px var(--display); color: #4a3fd0; }
.wd-meta .bad b { color: #e0305f; }
.wd-block .list-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wd-block .chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 2px solid #e6e2f8; background: #fff; box-shadow: 0 4px 0 #e6e2f8; color: #4b5170; font: 800 14px Nunito, sans-serif; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, color 0.2s, background 0.2s; }
.wd-block .chip:hover { transform: translateY(-2px); color: #5a3fe0; box-shadow: 0 6px 0 #cfc6ff; border-color: #cfc6ff; }
.wd-block .chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
.wd-block .chip.on { background: linear-gradient(180deg, #a58bff, #6143ff); border-color: #6143ff; color: #fff; box-shadow: 0 4px 0 #4a2fc0; }
.wd-block .chip.dashed { border-style: dashed; box-shadow: none; background: transparent; color: #8a90a8; }
.wd-cta { background: none; border: 0; box-shadow: none; padding-top: 6px; }
.wd-cta::before { display: none; }
.wd-state.learning { position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 6px 0 #4a2fc0, 0 14px 22px -8px rgba(97, 67, 255, 0.5); font-family: var(--display); font-size: 22px; }
.wd-state.learning::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); animation: go-shine 4s ease-in-out 1.2s infinite; }
.wd-state.learning .wd-ring { background: conic-gradient(#7be835 calc(var(--p) * 360deg), rgba(255, 255, 255, 0.3) 0); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); animation: step-pulse 2.4s ease-in-out infinite; }
.wd-state.learning .wd-ring::after { background: #6143ff; }
:root[data-theme="dark"] .wd-meta span { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #2a2638; }
:root[data-theme="dark"] .wd-block .chip { background: #2a2733; border-color: #3a3550; box-shadow: 0 4px 0 #3a3550; color: #d4d7e5; }
:root[data-theme="dark"] .wd-cta { background: none; }

/* ostatni etap „umiem”: puchar (kolorowy po osiągnięciu, szary przed) */
.wd-step:last-child i { width: 38px; height: 38px; margin: -4px 0; background: url(assets/ui/sx-trophy.png) center / 30px no-repeat; border: 0; box-shadow: none; filter: grayscale(1) opacity(0.4); transition: filter 0.3s; }
.wd-step:last-child i::after { display: none; }
.wd-step:last-child.cur i,
.wd-step:last-child.done i { filter: drop-shadow(0 4px 5px rgba(160, 110, 20, 0.45)); background-size: 36px; animation: fx-float 2.6s ease-in-out infinite; }
.wd-step:last-child.cur small { color: #c98a00; }
.wd-step:last-child.cur::before { background: linear-gradient(90deg, #3fc40f, #ffc83d); }
.wd-state.known img { width: 42px; height: 42px; margin: -6px 0; filter: drop-shadow(0 4px 4px rgba(0, 60, 20, 0.35)); animation: fx-float 2.6s ease-in-out infinite; }
.wd-state.known { position: relative; overflow: hidden; font-family: var(--display); font-size: 22px; }
.wd-state.known::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); animation: go-shine 4s ease-in-out 1.2s infinite; }
.wd-link .wd-ri { width: 30px; height: 30px; object-fit: contain; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wd-link:hover .wd-ri { transform: rotate(180deg) scale(1.1); }
.wd-meta img { width: 32px; height: 32px; }

/* lista działów na ekranie Pakiety: karty 3D z ikonami z Ming, nagłówki sekcji, animacje */
.pg-groups { gap: 14px; }
.pg-cap { margin: 8px 4px -4px; font: 800 13px Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #6a4cff; animation: fx-fade-up 0.45s ease backwards; animation-delay: calc(var(--i, 0) * 0.06s); }
.pg-cap:first-child { margin-top: 0; }
.pg { border: 2px solid #ebe8fa; border-radius: 28px; box-shadow: 0 6px 0 #e3defa, 0 16px 22px -16px rgba(60, 50, 140, 0.4); overflow: hidden; animation: sx-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 0.06s); transition: transform 0.2s, box-shadow 0.2s; }
.pg:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #e3defa, 0 20px 26px -16px rgba(60, 50, 140, 0.45); }
.pg.open { border-color: #cfc6ff; box-shadow: 0 6px 0 #cfc6ff, 0 16px 22px -16px rgba(97, 67, 255, 0.45); }
.pg-ic { width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(160deg, #f6f2ff, #e9e2ff); box-shadow: inset 0 -3px 0 rgba(97, 67, 255, 0.12), 0 3px 0 #e3defa; font-size: 30px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pg-ic img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(60, 50, 140, 0.3)); }
.pg-head:hover .pg-ic { transform: rotate(-6deg) scale(1.08); }
.pg.open .pg-ic { background: linear-gradient(160deg, #efe8ff, #dcd2ff); }
.pg-text b { font-size: 19px; }
.pg-bar { height: 8px; background: rgba(97, 67, 255, 0.1); }
.pg-bar i { min-width: 6px; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 8px rgba(80, 200, 20, 0.4); transition: width 0.6s ease; }
.pg-chev { width: 38px; height: 38px; background: #fff; border: 2px solid #e6e2f8; box-shadow: 0 3px 0 #e6e2f8; }
.pg-head:hover .pg-chev { background: #fff; border-color: #cfc6ff; box-shadow: 0 3px 0 #cfc6ff; }
:root[data-theme="dark"] .pg { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 6px 0 #2a2638; }
:root[data-theme="dark"] .pg-ic { background: linear-gradient(160deg, #2a2545, #221f3a); box-shadow: none; }
:root[data-theme="dark"] .pg-chev { background: #2a2733; border-color: #3a3550; box-shadow: none; }
:root[data-theme="dark"] .pg-cap { color: #b9a8ff; }
@media (prefers-reduced-motion: reduce) { .pg,
.pg-cap { animation: none; } }

/* ===== żywe i energiczne kafelki podkategorii, ikony 3D tematów, sekcja egzaminu ===== */
.pk-list { gap: 16px; }
.pk-card { min-height: 138px; padding: 16px 14px 18px 20px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 30px; background: radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.75), transparent 45%), linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 72%, #7c5cff 28%)); box-shadow: 0 6px 0 color-mix(in srgb, var(--tint) 55%, #5a4a9a 45%), 0 18px 24px -14px rgba(60, 50, 140, 0.5); animation: sx-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.pk-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.35) 0 16px, transparent 17px), radial-gradient(circle at 60% 12%, rgba(255, 255, 255, 0.3) 0 9px, transparent 10px), radial-gradient(circle at 96% 78%, rgba(255, 255, 255, 0.3) 0 22px, transparent 23px); }
.pk-card::after { content: ''; position: absolute; top: 0; left: -70%; width: 38%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 5.5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.5s + 1.5s); pointer-events: none; }
.pk-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 0 color-mix(in srgb, var(--tint) 55%, #5a4a9a 45%), 0 24px 30px -14px rgba(60, 50, 140, 0.55); }
.pk-card:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tint) 55%, #5a4a9a 45%); }
.pk-name { font-size: 22px; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.pk-count { font-size: 15px; color: #5f6788; }
.pk-pill { border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.18); }
.pk-img.svg { width: 118px; height: 118px; transform: none; }
.pk-tp { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(50, 40, 120, 0.35)); animation: fx-float 3.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.6s); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pk-card:hover .pk-tp { transform: rotate(-6deg) scale(1.12); }
.pk-list .pk-card:nth-child(2) { --k: 1; animation-delay: 0.06s; } .pk-list .pk-card:nth-child(3) { --k: 2; animation-delay: 0.12s; } .pk-list .pk-card:nth-child(4) { --k: 3; animation-delay: 0.18s; }
.pk-list .pk-card:nth-child(5) { --k: 4; animation-delay: 0.24s; } .pk-list .pk-card:nth-child(6) { --k: 5; animation-delay: 0.3s; }
:root[data-theme="dark"] .pk-card { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 26%, #1f1c2b), color-mix(in srgb, var(--tint) 14%, #2a2545)); border-color: #2e2a3d; box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .pk-name { color: #f1f0ff; text-shadow: none; } :root[data-theme="dark"] .pk-count { color: #b8bed0; }
@media (prefers-reduced-motion: reduce) { .pk-card,
.pk-card::after,
.pk-tp { animation: none; } }

/* sekcja „Przygotuj się do egzaminu” na ekranie głównym */

 

 
@media (prefers-reduced-motion: reduce) {  }

/* ikony 3D pakietów (assets/ui/pk3d) — przezroczyste, bez ramek i obrotu */
img.pk-img { width: 112px; height: 112px; object-fit: contain; border-radius: 0; transform: none; filter: drop-shadow(0 12px 12px rgba(50, 40, 120, 0.35)); animation: fx-float 3.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.6s); }
.pk-card:hover img.pk-img { transform: rotate(-6deg) scale(1.12); }
.pack-img { object-fit: contain; border-radius: 0; width: 84px; height: 78px; }
.rs-art { background: transparent; }
.rs-img { object-fit: contain; border-radius: 0; box-shadow: none; transform: none; width: 104px; height: 104px; filter: drop-shadow(0 10px 10px rgba(50, 40, 120, 0.3)); }
@media (prefers-reduced-motion: reduce) { img.pk-img { animation: none; } }

/* ===== nagłówek podstron (Pakiety słówek itp.): tło z ruchem, ramki 3D, animacje ===== */
.sub-hero { background: radial-gradient(38% 55% at 14% 62%, rgba(212, 215, 254, 0.85), transparent 72%), radial-gradient(55% 70% at 0% 100%, rgba(221, 213, 254, 0.95), transparent 70%), radial-gradient(45% 60% at 100% 55%, rgba(167, 233, 231, 0.9), transparent 70%), linear-gradient(115deg, #cbe0fd 0%, #c8dcfb 45%, #c9f2ee 100%); }
.sub-hero::before { animation: hero-ring 24s ease-in-out infinite alternate; }
.sub-hero::after { animation: hero-ring 30s ease-in-out infinite alternate-reverse; }
@keyframes hero-ring { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(30px, -20px) rotate(25deg) scale(1.08); } }
.sub-hero .sh-back { width: 50px; height: 50px; background: #fff; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 5px 0 rgba(30, 40, 90, 0.13); transition: transform 0.15s, box-shadow 0.15s; }
.sub-hero .sh-back:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(30, 40, 90, 0.13); }
.sub-hero .sh-back:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 40, 90, 0.13); }
.sub-hero .ph-title { font-size: 33px; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7); animation: pick-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.sub-hero .ph-art { position: relative; margin: 2px 0 6px; }
.sub-hero .ph-art img { max-width: 250px; filter: drop-shadow(0 16px 18px rgba(50, 40, 120, 0.3)); animation: sx-trophy-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards, ph-float 5s ease-in-out 1s infinite; }
.sub-hero .ph-art::before,
.sub-hero .ph-art::after { content: ''; position: absolute; width: 34px; height: 34px; background: url(assets/ui/sparkle.png) center / contain no-repeat; animation: twinkle 2.6s ease-in-out infinite; pointer-events: none; }
.sub-hero .ph-art::before { left: 16%; top: 12%; }
.sub-hero .ph-art::after { right: 14%; bottom: 20%; width: 26px; height: 26px; animation-delay: -1.3s; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.sub-hero .ph-tasks { gap: 14px; }
.sub-hero .ph-task { min-height: 72px; padding: 9px 18px 9px 12px; border: 2px solid #fff; border-radius: 28px; background: linear-gradient(180deg, #fff, #f8f6ff); box-shadow: 0 6px 0 rgba(120, 110, 190, 0.22), 0 16px 22px -14px rgba(60, 50, 140, 0.45); animation: sx-up 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) backwards; animation-delay: calc(0.25s + var(--i, 0) * 0.09s); }
.sub-hero .ph-task:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(120, 110, 190, 0.22), 0 22px 28px -14px rgba(60, 50, 140, 0.5); }
.sub-hero .ph-task:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(120, 110, 190, 0.22); }
.sub-hero .ph-task.sel { border-color: #7b55ff; background: linear-gradient(180deg, #f7f3ff, #ede6ff); box-shadow: 0 6px 0 #a58bff, 0 0 0 5px rgba(123, 85, 255, 0.18), 0 16px 24px -12px rgba(97, 67, 255, 0.55); }
.sub-hero .ph-icon { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(50, 40, 120, 0.3)); animation: fx-float 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s); }
.sub-hero .ph-task.sel .ph-icon { animation: fx-float 2.4s ease-in-out infinite; }
.sub-hero .ph-label { font-weight: 800; font-size: 20px; }
.sub-hero .ph-num { min-width: 46px; padding: 4px 12px; border-radius: 999px; background: #f1eeff; text-align: center; box-shadow: 0 3px 0 #e3defa; color: #6a4cff; }
.sub-hero .ph-num b { color: inherit; }
.sub-hero .ph-task.going .ph-num { background: #e2efff; color: #2f7fe6; box-shadow: 0 3px 0 #c9defa; }
.sub-hero .ph-bar { height: 11px; padding: 2px; background: rgba(var(--tint), 0.14); }
.sub-hero .ph-bar i { box-shadow: 0 0 10px rgba(var(--tint), 0.6); min-width: 8px; }
:root[data-theme="dark"] .sub-hero .ph-task { background: linear-gradient(180deg, #2a2733, #221f2c); border-color: #3a3550; box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .sub-hero .ph-task.sel { background: #2a2545; border-color: #8b6cff; }
:root[data-theme="dark"] .sub-hero .sh-back { background: #2a2733; border-color: #3a3550; box-shadow: 0 5px 0 #17141f; }
:root[data-theme="dark"] .sub-hero .ph-num { background: #2a2545; color: #b9a8ff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .sub-hero::before,
.sub-hero::after,
.sub-hero .ph-art::before,
.sub-hero .ph-art::after,
.sub-hero .ph-task,
.sub-hero .ph-icon,
.sub-hero .ph-art img { animation: none; } }

/* ===== ekran „Nowe słowo” (intro): ikony, karty, przyciski 3D i animacje ===== */
.fb-ic { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(60, 50, 140, 0.25)); }
.card.study.intro { text-align: center; }
.card.study.intro .word-en { font-size: 40px; font-weight: 800; letter-spacing: 0.01em; animation: fx-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards; }
.card.study.intro .word-en .icon-btn { width: 46px; height: 46px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 34px no-repeat; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card.study.intro .word-en .icon-btn svg { display: none; }
.card.study.intro .word-en .icon-btn:hover { background-color: transparent; transform: scale(1.15) rotate(-6deg); }
.card.study.intro .word-en .icon-btn:active { transform: scale(0.88); }
.card.study.intro .pron { display: inline-block; margin-top: 6px; padding: 3px 16px; border-radius: 999px; background: #efeaff; color: #7c62f0; font-size: 17px; font-weight: 800; animation: fx-fade-up 0.5s ease 0.38s backwards; }
.card.study.intro .word-pl { margin-top: 10px; font-family: var(--display); font-size: 28px; font-weight: 800; color: #131d4c; animation: fx-fade-up 0.5s ease 0.46s backwards; }
.card.study.intro .mnemo,
.card.study.intro .example.fb-ex { position: relative; display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 22px; text-align: left; font-size: 15.5px; font-weight: 600; animation: fx-fade-up 0.5s ease backwards; }
.card.study.intro .mnemo { background: #fff6dd; border: 2px solid #ffe7a3; box-shadow: 0 4px 0 #ffe7a3; animation-delay: 0.55s; }
.card.study.intro .example.fb-ex { background: #eaf5ff; border: 2px solid #cfe6fb; box-shadow: 0 4px 0 #cfe6fb; animation-delay: 0.65s; }
.card.study.intro .fb-ex > span { flex: 1; min-width: 0; }
.card.study.intro .fb-ex i { font-weight: 700; }
.card.study.intro .fb-ex mark { background: linear-gradient(transparent 55%, rgba(255, 210, 60, 0.75) 55%); color: inherit; padding: 0 1px; border-radius: 3px; }
.card.study.intro .fb-ex .icon-btn { flex-shrink: 0; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: #fff url(assets/ui/btn-speaker.png) center / 28px no-repeat; box-shadow: 0 3px 0 rgba(30, 40, 90, 0.1); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card.study.intro .fb-ex .icon-btn svg { display: none; }
.card.study.intro .fb-ex .icon-btn:hover { background-color: #fff; transform: scale(1.12) rotate(-6deg); }
.card.study.intro > .muted.small { display: inline-flex; margin-top: 12px; padding: 3px 12px; border-radius: 999px; background: #f1eeff; color: #7c62f0; font-weight: 800; }
.card.study.intro .intro-tile { animation: fx-hop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards, fx-float 3.2s ease-in-out 1s infinite; }
.card.study.intro .intro-tile .wa-img,
.card.study.intro .intro-tile img { box-shadow: 0 10px 20px -10px rgba(60, 50, 140, 0.5); }

/* przyciski: „Naucz się” zielony 3D z błyskiem, „Później” i „Wiem” jako „pigułki” */
.card.study.intro ~ .btn.wide { position: relative; overflow: hidden; height: 66px; margin-top: 4px; border: 0; border-radius: 999px; font: 700 25px var(--display); color: #fff; background: linear-gradient(90deg, #6ee02b, #3fc40f); box-shadow: 0 6px 0 #2f9a0a, 0 16px 26px -8px rgba(60, 170, 10, 0.55); animation: sx-up 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.8s backwards, go-breathe 2.8s ease-in-out 1.6s infinite; transition: transform 0.15s, box-shadow 0.15s; }
.card.study.intro ~ .btn.wide::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 4.2s ease-in-out 2s infinite; pointer-events: none; }
.card.study.intro ~ .btn.wide:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #2f9a0a, 0 20px 30px -8px rgba(60, 170, 10, 0.65); }
.card.study.intro ~ .btn.wide:active { transform: translateY(5px); box-shadow: 0 1px 0 #2f9a0a; }
.intro-actions { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; animation: fx-fade-up 0.5s ease 0.95s backwards; }
.intro-actions > span { display: none; }
.intro-actions .wd-link { height: 52px; border-radius: 999px; background: #fff; border: 2px solid #e3e0f7; box-shadow: 0 4px 0 #e3e0f7; font-size: 19px; color: #6a7396; transition: transform 0.15s, box-shadow 0.15s, color 0.2s, border-color 0.2s; }
.intro-actions .wd-link:hover { background: #fff; color: #5a3fe0; border-color: #cfc6ff; box-shadow: 0 4px 0 #cfc6ff; transform: translateY(-2px); }
.intro-actions .wd-link:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3e0f7; }
.intro-actions .wd-link[data-act="intro-known"] { color: #2f8f12; border-color: #cdeec0; box-shadow: 0 4px 0 #cdeec0; background: #f4fff0; }
.intro-actions .wd-link[data-act="intro-known"]::before { content: '✓'; font-weight: 800; }
.intro-actions .wd-link[data-act="intro-later"]::before { content: '⏭'; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .card.study.intro ~ .btn.wide,
.card.study.intro ~ .btn.wide::after { animation: none; } }
:root[data-theme="dark"] .card.study.intro .word-pl { color: #f1f0ff; }
:root[data-theme="dark"] .card.study.intro .pron,
:root[data-theme="dark"] .card.study.intro > .muted.small { background: #1d123f; color: #b9a8ff; }
:root[data-theme="dark"] .card.study.intro .mnemo { background: #33291a; border-color: #4d3d1e; box-shadow: 0 4px 0 #4d3d1e; }
:root[data-theme="dark"] .card.study.intro .example.fb-ex { background: #182335; border-color: #24364f; box-shadow: 0 4px 0 #24364f; }
:root[data-theme="dark"] .intro-actions .wd-link { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #2e2a3d; color: #b8bed0; }
:root[data-theme="dark"] .intro-actions .wd-link[data-act="intro-known"] { background: #16261a; border-color: #23442a; box-shadow: 0 4px 0 #23442a; color: #8fe06f; }

/* ===== ekran pakietu / tematu / listy (viewWords): bohater z ikoną 3D, wyszukiwarka, karty słówek, przyciski 3D ===== */
.cx-hero { position: relative; overflow: hidden; isolation: isolate; margin: -14px -16px 12px; padding: 14px 16px 18px; border-radius: 0 0 38px 38px; text-align: center; background: radial-gradient(60% 50% at 88% 12%, rgba(255, 255, 255, 0.75), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tint) 100%, #fff 0%), color-mix(in srgb, var(--tint) 62%, #a58bff 38%)); box-shadow: 0 8px 0 color-mix(in srgb, var(--tint) 55%, #6a56b8 45%), 0 24px 30px -22px rgba(60, 50, 140, 0.55); }
.cx-hero::before,
.cx-hero::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.cx-hero::before { width: 420px; height: 420px; left: -220px; bottom: -260px; border: 46px solid rgba(255, 255, 255, 0.28); animation: hero-ring 22s ease-in-out infinite alternate; }
.cx-hero::after { width: 320px; height: 320px; right: -170px; top: -190px; border: 38px solid rgba(255, 255, 255, 0.24); animation: hero-ring 28s ease-in-out infinite alternate-reverse; }
.cx-bar { display: flex; justify-content: space-between; align-items: center; }
.cx-btn { width: 50px; height: 50px; display: grid; place-items: center; list-style: none; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%; background: #fff; box-shadow: 0 5px 0 rgba(30, 40, 90, 0.15); color: #131d4c; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.cx-btn svg { width: 24px; height: 24px; }
.cx-btn .btn-3d { width: 36px; height: 36px; object-fit: contain; }
.cx-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(30, 40, 90, 0.15); }
.cx-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 40, 90, 0.15); }
.cx-dots { display: flex; gap: 4px; }
.cx-dots i { width: 6px; height: 6px; border-radius: 50%; background: #6143ff; animation: dot-pulse 1.8s ease-in-out infinite; }
.cx-dots i:nth-child(2) { animation-delay: 0.2s; } .cx-dots i:nth-child(3) { animation-delay: 0.4s; }
.cx-menu { position: relative; }
.cx-menu > summary::-webkit-details-marker { display: none; }
.cx-pop { top: 58px; min-width: 250px; padding: 8px; border: 2px solid #ebe8fa; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 #e3defa, 0 24px 34px -14px rgba(50, 40, 120, 0.55); animation: wc-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); text-align: left; }
.cx-pop button { gap: 12px; padding: 10px 12px; border-radius: 18px; font-weight: 800; font-size: 16px; color: #2b3a7a; transition: background 0.15s, transform 0.15s; }
.cx-pop button img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(50, 40, 120, 0.25)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cx-pop button:hover:not(:disabled) { background: #f3f0ff; transform: translateX(2px); }
.cx-pop button:hover:not(:disabled) img { transform: scale(1.15) rotate(-8deg); }
.cx-pop button.danger { color: #d33b3b; }
.cx-art { position: relative; height: 128px; margin: 0 auto 4px; display: grid; place-items: center; }
.cx-art::before,
.cx-art::after { content: ''; position: absolute; width: 30px; height: 30px; background: url(assets/ui/sparkle.png) center / contain no-repeat; animation: twinkle 2.6s ease-in-out infinite; pointer-events: none; }
.cx-art::before { left: calc(50% - 96px); top: 10px; } .cx-art::after { right: calc(50% - 100px); bottom: 14px; width: 24px; height: 24px; animation-delay: -1.3s; }
.cx-art img,
.cx-art .pk-emoji,
.cx-art .art3d { position: relative; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(50, 40, 120, 0.4)); animation: sx-trophy-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards, fx-float 3.4s ease-in-out 1s infinite; border-radius: 0; box-shadow: none; transform: none; }
.cx-art .pk-emoji { display: grid; place-items: center; font-size: 76px; background: none; }
.cx-title { margin: 4px 8px 8px; font-family: var(--display); font-size: 33px; font-weight: 800; line-height: 1.12; color: #131d4c; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7); animation: pick-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards; overflow-wrap: anywhere; }
.cx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.cx-chips span { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.1); color: #5a5f7a; font-size: 13.5px; font-weight: 700; animation: fx-fade-up 0.45s ease 0.4s backwards; }
.cx-chips span:nth-child(2) { animation-delay: 0.48s; } .cx-chips span:nth-child(3) { animation-delay: 0.56s; }
.cx-chips b { color: #131d4c; font: 800 16px var(--display); }
.cx-chips .ok { padding-left: 6px; background: linear-gradient(180deg, #fff6d6, #ffe9a8); box-shadow: 0 3px 0 #f3d375; color: #8a5a00; }
.cx-chips .ok b { color: #b86e00; }
.cx-chips img { width: 22px; height: 22px; object-fit: contain; }
.cx-prog { position: relative; height: 18px; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 2px 3px rgba(60, 50, 140, 0.15); }
.cx-prog i { display: block; width: var(--w); min-width: 12px; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 12px rgba(80, 200, 20, 0.6); animation: sx-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards; transform-origin: left; }
.cx-prog b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 800 11px Nunito, sans-serif; color: #2b3a7a; }
.cx-desc { margin: 12px 4px 0; color: #4b5170; font-size: 14px; font-weight: 700; }

.cx-tools { display: flex; gap: 10px; margin-bottom: 12px; animation: fx-fade-up 0.45s ease 0.3s backwards; }
.cx-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px 0 10px; border: 2px solid #e6e2f8; border-radius: 999px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; transition: border-color 0.2s, box-shadow 0.2s; }
.cx-search:focus-within { border-color: #8b5cff; box-shadow: 0 5px 0 #d9ceff, 0 0 0 5px rgba(97, 67, 255, 0.12); background: #fff; }
.cx-search img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cx-search:focus-within img { transform: rotate(-12deg) scale(1.12); }
.cx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 700 16px Nunito, sans-serif; color: #131d4c; }
.cx-search input::placeholder { color: #a3a8bd; font-weight: 600; font-size: 14.5px; }
.cx-sort { display: inline-flex; align-items: center; gap: 6px; height: 54px; padding: 0 14px 0 8px; border: 2px solid #e6e2f8; border-radius: 999px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; color: #4b5170; font: 800 13px Nunito, sans-serif; cursor: pointer; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, color 0.2s; }
.cx-sort img { width: 30px; height: 30px; object-fit: contain; }
.cx-sort.on { border-color: #8b5cff; color: #5a3fe0; background: #f7f3ff; }
.cx-sort:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #e6e2f8; }
.cx-sort:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }

.cx-filters { margin-bottom: 4px; }
.cx-filters .chips { gap: 8px; padding-bottom: 8px; }
.cx-filters .chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid #e6e2f8; background: #fff; box-shadow: 0 4px 0 #e6e2f8; color: #4b5170; font: 800 14px Nunito, sans-serif; transition: transform 0.15s, box-shadow 0.15s, color 0.2s; }
.cx-filters .chip span { margin-left: 4px; opacity: 0.6; }
.cx-filters .chip:hover { transform: translateY(-2px); color: #5a3fe0; box-shadow: 0 6px 0 #cfc6ff; border-color: #cfc6ff; }
.cx-filters .chip.on { background: linear-gradient(180deg, #a58bff, #6143ff); border-color: #6143ff; color: #fff; box-shadow: 0 4px 0 #4a2fc0; }
.cx-filters .segmented { padding: 4px; border-radius: 999px; background: #fff; border: 2px solid #e6e2f8; box-shadow: 0 4px 0 #e6e2f8; }
.cx-filters .seg { border-radius: 999px; font-weight: 800; }
.cx-filters .seg.on { background: linear-gradient(180deg, #a58bff, #6143ff); color: #fff; box-shadow: 0 3px 0 #4a2fc0; }
.cx-tabs { border-bottom: 0; gap: 8px; margin: 2px 0 12px; }
.cx-tabs button { padding: 0 18px; height: 42px; border: 2px solid #e6e2f8; border-bottom-width: 2px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 #e6e2f8; font-weight: 800; color: #4b5170; }
.cx-tabs button.on { background: linear-gradient(180deg, #a58bff, #6143ff); border-color: #6143ff; color: #fff; box-shadow: 0 4px 0 #4a2fc0; }
.cx-note { margin: 4px 0 12px; padding: 12px 14px; border-radius: 20px; background: #fff6dd; border: 2px solid #ffe7a3; color: #8a5a00; font-weight: 700; font-size: 14px; }

/* lista słówek jako karty */
.cx-list { display: grid; gap: 12px; padding: 4px 2px 8px; background: none; box-shadow: none; overflow: visible; margin-bottom: 8px; }
.cx-list .word-row { gap: 12px; padding: 12px 12px 12px 12px; border: 2px solid #ebe8fa; border-bottom-width: 2px; border-radius: 26px; background: linear-gradient(180deg, #fff, #faf9ff); box-shadow: 0 5px 0 #e3defa, 0 14px 20px -16px rgba(60, 50, 140, 0.4); animation: sx-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; transition: transform 0.18s, box-shadow 0.18s; }
.cx-list .word-row:nth-child(2) { animation-delay: 0.05s; } .cx-list .word-row:nth-child(3) { animation-delay: 0.1s; } .cx-list .word-row:nth-child(4) { animation-delay: 0.15s; } .cx-list .word-row:nth-child(n+5) { animation-delay: 0.2s; }
.cx-list .word-row:hover { background: linear-gradient(180deg, #fff, #f6f2ff); transform: translateY(-3px); box-shadow: 0 8px 0 #e3defa, 0 20px 26px -16px rgba(60, 50, 140, 0.5); }
.cx-list .word-row:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3defa; }
.cx-list .wr-icon { width: 60px; height: 60px; }
.cx-list .wr-img { width: 60px; height: 60px; border-radius: 18px; border: 2px solid #fff; box-shadow: 0 5px 10px -3px rgba(40, 60, 120, 0.3); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cx-list .wr-emoji { width: 58px; height: 58px; border-radius: 18px; border: 2px solid #fff; box-shadow: 0 5px 10px -3px rgba(40, 60, 120, 0.25); }
.cx-list .word-row:hover .wr-img,
.cx-list .word-row:hover .wr-emoji { transform: rotate(-6deg) scale(1.08); }
.cx-list .wr-say { width: 34px; height: 34px; background: url(assets/ui/btn-speaker.png) center / 26px no-repeat; filter: drop-shadow(0 2px 3px rgba(40, 70, 140, 0.25)); }
.cx-list .wr-say svg { display: none; }
.cx-list .wr-say:hover { background-color: transparent; transform: scale(1.18) rotate(-6deg); }
.cx-list .wr-en b { font-size: 21px; font-weight: 800; }
.cx-list .wr-pl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wr-due { padding: 1px 9px; border-radius: 999px; background: #e9f1ff; color: #2f7fe6; font-size: 11.5px; font-style: normal; font-weight: 800; }
.wr-due.now { background: #ffe9d2; color: #d9620a; animation: step-pulse 2.2s ease-in-out infinite; }
.cx-list .wr-lvl.dots { display: flex; gap: 4px; padding: 5px 8px; border-radius: 999px; background: #f1eeff; }
.cx-list .wr-lvl.dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9d5ee; }
.cx-list .wr-lvl.dots i.on { background: linear-gradient(180deg, #a58bff, #6143ff); box-shadow: 0 0 6px rgba(97, 67, 255, 0.5); }
.cx-list .wr-known { width: 38px; height: 38px; background: none; }
.cx-list .wr-known img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(160, 110, 20, 0.4)); animation: fx-float 3s ease-in-out infinite; }
.wr-chev { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #f1eeff; color: #6143ff; font: 800 20px/1 var(--display); transition: transform 0.2s, background 0.2s; }
.word-row:hover .wr-chev { transform: translateX(3px); background: #e3dcff; }
.cx-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; color: #7a8099; font-weight: 700; }
.cx-empty img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(60, 50, 140, 0.3)); animation: fx-float 3.2s ease-in-out infinite; }
.cx-empty b { font: 800 22px var(--display); color: #131d4c; }

/* dolny pasek: „Ucz się” / „Powtórz” 3D, „Słuchaj” jako pigułka */
.cx-cta { background: none; padding-top: 10px; }
.cx-go { height: 66px; font-size: 25px; background: linear-gradient(90deg, #6ee02b, #3fc40f); box-shadow: 0 6px 0 #2f9a0a, 0 16px 26px -8px rgba(60, 170, 10, 0.55); animation: go-breathe 2.8s ease-in-out 1.5s infinite; }
.cx-go.review { background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 6px 0 #4a2fc0, 0 16px 26px -8px rgba(97, 67, 255, 0.55); }
.cx-go:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 8px 0 #2f9a0a, 0 20px 30px -8px rgba(60, 170, 10, 0.65); }
.cx-go.review:hover:not(:disabled) { box-shadow: 0 8px 0 #4a2fc0, 0 20px 30px -8px rgba(97, 67, 255, 0.65); }
.cx-go:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.cx-go > span { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cx-go > span img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.cx-links { margin-top: 12px; }
.cx-links button { height: 50px; padding: 0 20px 0 12px; border: 2px solid #e6e2f8; border-radius: 999px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; color: #4b5170; font: 800 16px Nunito, sans-serif; transition: transform 0.15s, box-shadow 0.15s; }
.cx-links button img { width: 30px; height: 30px; object-fit: contain; }
.cx-links button:hover:not(:disabled) { background: #fff; transform: translateY(-2px); color: #5a3fe0; box-shadow: 0 7px 0 #cfc6ff; border-color: #cfc6ff; }
.cx-links button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
@media (prefers-reduced-motion: reduce) { .cx-hero::before,
.cx-hero::after,
.cx-art::before,
.cx-art::after,
.cx-art img,
.cx-list .word-row,
.cx-go,
.wr-due.now,
.cx-dots i,
.cx-empty img { animation: none; } }

/* ciemny motyw */
:root[data-theme="dark"] .cx-hero { background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 24%, #211d33), #1a1726); box-shadow: 0 8px 0 #14111c; }
:root[data-theme="dark"] .cx-title { color: #f1f0ff; text-shadow: none; }
:root[data-theme="dark"] .cx-btn,
:root[data-theme="dark"] .cx-pop,
:root[data-theme="dark"] .cx-search,
:root[data-theme="dark"] .cx-sort,
:root[data-theme="dark"] .cx-links button,
:root[data-theme="dark"] .cx-filters .chip,
:root[data-theme="dark"] .cx-tabs button { background: #2a2733; border-color: #3a3550; box-shadow: 0 4px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .cx-search input { color: #f1f0ff; }
:root[data-theme="dark"] .cx-chips span { background: rgba(255, 255, 255, 0.1); color: #c9c6e8; box-shadow: none; }
:root[data-theme="dark"] .cx-chips b { color: #f1f0ff; }
:root[data-theme="dark"] .cx-list .word-row { background: linear-gradient(180deg, #232030, #1d1a28); border-color: #2e2a3d; box-shadow: 0 5px 0 #17141f; }
:root[data-theme="dark"] .cx-list .wr-en b { color: #f1f0ff; }
:root[data-theme="dark"] .cx-list .wr-lvl.dots,
:root[data-theme="dark"] .wr-chev { background: #2a2545; }
:root[data-theme="dark"] .cx-empty b { color: #f1f0ff; }
.cx-list .wr-main { overflow: visible; }
.cx-list .wr-pl { overflow: visible; text-overflow: clip; line-height: 1.5; }
.cx-list .wr-main span.wr-pl { overflow: visible; }
.cx-filters .chip.on span { opacity: 0.85; color: #fff; }
@media (max-width: 520px) {
  .cx-list .word-row { gap: 9px; padding: 11px 10px; }
  .cx-list .wr-icon,
.cx-list .wr-img { width: 54px; height: 54px; }
  .cx-list .wr-emoji { width: 52px; height: 52px; font-size: 26px; }
  .cx-list .wr-chev { display: none; }
  .cx-list .wr-lvl.dots { gap: 3px; padding: 5px 7px; }
  .cx-list .wr-lvl.dots i { width: 7px; height: 7px; }
  .cx-list .wr-en b { font-size: 19px; }
  .cx-list .wr-pos { padding: 0 6px; }
}

/* przełącznik okresu „Wyuczone” na karcie Nauka + okienko wyboru */
.ln-rv-sel { border: 0; padding: 0; background-color: #fff; box-shadow: 0 3px 0 #e3defa; width: 30px; height: 30px; transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s; }
.ln-rv-sel:hover { transform: translateY(-1px); background-color: #f3f0ff; box-shadow: 0 4px 0 #cfc6ff; }
.ln-rv-sel:active { transform: translateY(2px); box-shadow: 0 1px 0 #e3defa; }
dialog.rg .ask-box { text-align: center; }
.rg-list { display: grid; gap: 10px; margin: 6px 0 4px; }
.rg-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border: 2px solid #e6e2f8; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; cursor: pointer; text-align: left; font: 800 17px Nunito, sans-serif; color: #2b3a7a; transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s; animation: sx-up 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; }
.rg-opt:nth-child(2) { animation-delay: 0.06s; } .rg-opt:nth-child(3) { animation-delay: 0.12s; }
.rg-opt img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(50, 40, 120, 0.3)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rg-opt span { flex: 1; }
.rg-opt i { font-style: normal; font-weight: 900; color: #3aa80f; font-size: 20px; }
.rg-opt:hover { transform: translateY(-2px); border-color: #cfc6ff; box-shadow: 0 7px 0 #cfc6ff; }
.rg-opt:hover img { transform: scale(1.15) rotate(-8deg); }
.rg-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
.rg-opt.on { border-color: #7bd14a; background: linear-gradient(180deg, #f4fff0, #eafbe1); box-shadow: 0 5px 0 #b9e6a3; }
.ask-actions.one { grid-template-columns: 1fr; }
:root[data-theme="dark"] .rg-opt { background: #2a2733; border-color: #3a3550; box-shadow: 0 5px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .rg-opt.on { background: #16261a; border-color: #2f6a3a; box-shadow: 0 5px 0 #17301f; }
:root[data-theme="dark"] .ln-rv-sel { background-color: #2a2733; box-shadow: none; }
/* menu sortowania (lista słówek) */
.cx-sortmenu > summary { list-style: none; }
.cx-sortmenu > summary::-webkit-details-marker { display: none; }
.cx-sortpop { top: 60px; right: 0; min-width: 240px; }
.cx-sortpop button { justify-content: space-between; }
.cx-sortpop button.sel { background: #f3f0ff; color: #5a3fe0; }
.cx-sortpop button i { font-style: normal; font-weight: 900; color: #3aa80f; }
.cx-sortmenu { flex-shrink: 0; }
.cx-sort { list-style: none; }

/* ===== Gry: kafelki na ekranie głównym, lista gier, ekrany Memory / Szybka runda / Wisielec / Słowa w wężu ===== */
.gm-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 6px 16px 18px; }
.gm-row::-webkit-scrollbar { display: none; }
.gm-mini { position: relative; overflow: hidden; flex: 0 0 158px; height: 176px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 8px 10px 14px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 30px; cursor: pointer; text-align: center; font: inherit; background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.75), transparent 48%), linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 70%, var(--pill) 30%)); box-shadow: 0 6px 0 color-mix(in srgb, var(--tint) 50%, var(--pill) 50%), 0 18px 24px -14px rgba(60, 50, 140, 0.5); animation: sx-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--k, 0) * 0.07s); transition: transform 0.18s, box-shadow 0.18s; }
.gm-mini::after { content: ''; position: absolute; top: 0; left: -70%; width: 38%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 5.5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.7s + 1.5s); pointer-events: none; }
.gm-mini img { width: 96px; height: 96px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 12px 12px rgba(50, 40, 120, 0.35)); animation: fx-float 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.7s); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gm-mini:hover { transform: translateY(-4px); }
.gm-mini:hover img { transform: rotate(-8deg) scale(1.12); }
.gm-mini:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tint) 50%, var(--pill) 50%); }
.gm-mini b { font: 800 18px var(--display); color: #131d4c; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.gm-mini span { font-size: 12px; font-weight: 800; color: #5f6788; }
.gm-pill { border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.18); background: var(--pill); font-size: 14px; }
.gm-card .pk-count { font-size: 14px; line-height: 1.35; }

/* ekran gry */
.gm-top { margin-bottom: 10px; }
.gm-bar i { transition: width 0.15s linear, background 0.3s; }
.gm-bar i.low { background: linear-gradient(90deg, #ff9a6b, #f0483a) !important; box-shadow: 0 0 12px rgba(240, 72, 58, 0.6) !important; animation: gm-blink 0.7s ease-in-out infinite; }
@keyframes gm-blink { 50% { opacity: 0.6; } }
.gm-score img { animation: fx-float 2.6s ease-in-out infinite; }
.gm-hint { margin: 2px 4px 12px; text-align: center; font-weight: 800; font-size: 15px; color: #5f6788; }
.gm-stats { margin: 12px 0 0; text-align: center; font-weight: 800; font-size: 14px; color: #7a8099; }
.gm-stats b { font: 800 18px var(--display); color: #5a3fe0; }
.gm-stage { position: relative; }
.gm-float { position: absolute; left: 50%; top: 30%; z-index: 5; transform: translateX(-50%); font: 900 30px var(--display); pointer-events: none; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8); animation: gm-float 0.9s ease-out forwards; }
.gm-float.ok { color: #2fa10a; } .gm-float.bad { color: #e0305f; }
@keyframes gm-float { from { opacity: 1; transform: translate(-50%, 0) scale(0.8); } 30% { transform: translate(-50%, -14px) scale(1.25); } to { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

/* Memory */
.mm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; perspective: 900px; }
.mm-card { position: relative; height: 122px; padding: 0; border: 0; background: none; cursor: pointer; animation: sx-up 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(var(--i, 0) * 0.04s); }
.mm-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
.mm-card.up .mm-in,
.mm-card.ok .mm-in { transform: rotateY(180deg); }
.mm-back,
.mm-front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid #fff; }
.mm-back { background: repeating-linear-gradient(45deg, #8b5cff 0 10px, #7a4bff 10px 20px); box-shadow: 0 6px 0 #4a2fc0, 0 14px 18px -10px rgba(97, 67, 255, 0.6); }
.mm-back img { width: 62px; height: 62px; object-fit: contain; opacity: 0.95; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); }
.mm-card:hover:not(.up):not(.ok) .mm-in { transform: translateY(-4px) rotate(-2deg); }
.mm-front { transform: rotateY(180deg); background: linear-gradient(180deg, #fff, #f4f0ff); box-shadow: 0 6px 0 #d9d2f7, 0 14px 18px -10px rgba(60, 50, 140, 0.5); text-align: center; }
.mm-front.pl { background: linear-gradient(180deg, #fffaf3, #fff0dc); box-shadow: 0 6px 0 #f1d6a8, 0 14px 18px -10px rgba(160, 100, 30, 0.45); }
.mm-front img { width: 60px; height: 60px; object-fit: cover; border-radius: 16px; }
.mm-front b { font: 800 18px var(--display); color: #131d4c; line-height: 1.1; overflow-wrap: anywhere; }
.mm-front small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8b90a8; }
.mm-card.ok .mm-front { background: linear-gradient(180deg, #f4fff0, #e2f8d8); box-shadow: 0 6px 0 #a7e3bb, 0 0 0 4px rgba(76, 200, 26, 0.25); animation: opt-ok 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mm-card.miss .mm-front { background: linear-gradient(180deg, #fff5f4, #ffe3e0); box-shadow: 0 6px 0 #f4c5c5; animation: opt-shake 0.45s ease; }

/* Szybka runda */
.sp-meta,
.sn-meta,
.hm-top { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; }
.sp-time,
.sn-solved,
.hm-round { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; border: 2px solid #ebe8fa; box-shadow: 0 3px 0 #e3defa; font-size: 14px; font-weight: 800; color: #5f6788; }
.sp-time img,
.sn-solved img { width: 28px; height: 28px; object-fit: contain; }
.sp-time b,
.sn-solved b,
.hm-round b { font: 800 20px var(--display); color: #131d4c; min-width: 24px; text-align: center; }
.sp-mult { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; background: #efeaff; color: #7c62f0; font: 800 20px var(--display); transition: transform 0.2s, background 0.2s; }
.sp-mult img { width: 28px; height: 28px; object-fit: contain; filter: grayscale(1) opacity(0.5); }
.sp-mult.hot { background: linear-gradient(180deg, #ffe9cf, #ffd39a); color: #c2560a; animation: step-pulse 1.4s ease-in-out infinite; }
.sp-mult.hot img { filter: drop-shadow(0 2px 3px rgba(220, 90, 20, 0.5)); }
.sp-card,
.hm-card,
.sn-card { padding: 16px 14px 20px; border-radius: 32px; border: 2px solid #ebe8fa; text-align: center; background: linear-gradient(180deg, #fff, #f8f6ff); box-shadow: 0 6px 0 #e3defa, 0 20px 30px -22px rgba(80, 60, 190, 0.5); transition: box-shadow 0.25s, border-color 0.25s; }
.sp-card.good { border-color: #7bd14a; box-shadow: 0 6px 0 #a7e3bb, 0 0 0 5px rgba(76, 200, 26, 0.22); }
.sp-card.bad { border-color: #f08a8a; box-shadow: 0 6px 0 #f4c5c5, 0 0 0 5px rgba(240, 72, 58, 0.18); animation: opt-shake 0.4s ease; }
.sp-card.next .sp-en,
.sp-card.next .sp-pl,
.sp-card.next .sp-img { animation: q-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.sp-img { height: 92px; display: grid; place-items: center; }
.sp-img img { width: 88px; height: 88px; object-fit: cover; border-radius: 22px; box-shadow: 0 8px 14px -6px rgba(40, 60, 120, 0.4); }
.sp-en { margin-top: 6px; font: 800 38px var(--display); color: #131d4c; }
.sp-eq { margin: 4px 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a3a8bd; }
.sp-pl { display: inline-block; padding: 6px 20px; border-radius: 999px; background: #fff0dc; box-shadow: 0 3px 0 #f1d6a8; font: 800 26px var(--display); color: #a5460a; }
.sp-btns { margin-top: 16px; }

/* Wisielec */
.hm-lives { display: inline-flex; gap: 3px; }
.hm-lives img { width: 26px; height: 26px; object-fit: contain; filter: grayscale(1) opacity(0.3); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s; }
.hm-lives img.on { filter: drop-shadow(0 2px 3px rgba(224, 48, 95, 0.4)); animation: heart-beat 2.4s ease-in-out infinite; }
.hm-img { height: 108px; display: grid; place-items: center; }
.hm-img img { width: 100px; height: 100px; object-fit: cover; border-radius: 26px; box-shadow: 0 8px 14px -6px rgba(40, 60, 120, 0.4); }
.hm-img img.hm-mascot { object-fit: contain; box-shadow: none; filter: drop-shadow(0 10px 10px rgba(50, 40, 120, 0.3)); animation: fx-float 3s ease-in-out infinite; }
.hm-pl { margin: 8px 0 12px; font: 800 26px var(--display); color: #131d4c; }
.hm-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.hm-slot { width: 34px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #f1eeff; border: 2px solid #e3defa; box-shadow: 0 3px 0 #e3defa; font: 800 24px var(--display); color: #131d4c; text-transform: uppercase; transition: background 0.2s; }
.hm-slot.on { background: #fff; border-color: #a58bff; box-shadow: 0 3px 0 #cfc6ff; animation: pick-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hm-slot.lost { background: #ffe3e0; border-color: #f08a8a; color: #d33b3b; box-shadow: 0 3px 0 #f4c5c5; }
.hm-card.shake { animation: opt-shake 0.4s ease; }
.hm-card.win,
.sn-card.win { border-color: #7bd14a; box-shadow: 0 6px 0 #a7e3bb, 0 0 0 5px rgba(76, 200, 26, 0.22); }
.hm-card.win .hm-slot { background: #e4f8ea; border-color: #7bd14a; box-shadow: 0 3px 0 #a7e3bb; animation: pick-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hm-keys { display: grid; gap: 8px; margin-top: 16px; }
.hm-row { display: flex; justify-content: center; gap: 5px; }
.hm-key { flex: 1; max-width: 34px; height: 46px; padding: 0; border: 2px solid #e3defa; border-radius: 12px; background: #fff; box-shadow: 0 4px 0 #e3defa; font: 800 18px var(--display); color: #2b3a7a; text-transform: uppercase; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, background 0.2s; }
.hm-key:hover:not(:disabled) { transform: translateY(-2px); border-color: #cfc6ff; box-shadow: 0 6px 0 #cfc6ff; }
.hm-key:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #e3defa; }
.hm-key.hit { background: linear-gradient(180deg, #7be835, #3fc40f); border-color: #3fc40f; color: #fff; box-shadow: 0 4px 0 #2f9a0a; }
.hm-key.miss { background: #f1f1f6; color: #b7bbc9; box-shadow: none; transform: translateY(3px); }
.hm-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; height: 46px; padding: 0 18px 0 10px; border: 2px solid #ffe7a3; border-radius: 999px; background: #fff8e1; box-shadow: 0 4px 0 #ffe7a3; font: 800 15px Nunito, sans-serif; color: #8a5a00; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.hm-hint img { width: 26px; height: 26px; object-fit: contain; }
.hm-hint em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; color: #8b5cf6; }
.hm-hint em img { width: 18px; height: 18px; }
.hm-hint:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #ffe7a3; }
.hm-hint:active { transform: translateY(3px); box-shadow: 0 1px 0 #ffe7a3; }

/* Słowa w wężu */
.sn-slots .hm-slot { cursor: pointer; }
.sn-snake { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; margin: 22px 0 6px; padding: 22px 10px; border-radius: 40px; background: linear-gradient(180deg, #e8fbe9, #d3f5d8); border: 2px solid #b9e6a3; box-shadow: 0 6px 0 #a7d98f; }
.sn-snake::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 34px; margin-top: -17px; border-radius: 30px; background: repeating-linear-gradient(90deg, rgba(60, 170, 50, 0.16) 0 14px, transparent 14px 28px); pointer-events: none; }
.sn-tile { position: relative; width: 50px; height: 56px; border: 2px solid #fff; border-radius: 18px; background: linear-gradient(180deg, #7be835, #3fc40f); box-shadow: 0 5px 0 #2f9a0a, 0 10px 12px -6px rgba(30, 120, 20, 0.5); font: 800 26px var(--display); color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 80, 0, 0.3); cursor: pointer; transform: translateY(var(--y)) rotate(var(--r)); animation: sx-up 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) backwards; animation-delay: calc(var(--i) * 0.045s); transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s; }
.sn-tile:hover:not(:disabled) { transform: translateY(calc(var(--y) - 5px)) rotate(0deg) scale(1.08); }
.sn-tile:active:not(:disabled) { transform: translateY(calc(var(--y) + 3px)) scale(0.95); box-shadow: 0 1px 0 #2f9a0a; }
.sn-tile.used { opacity: 0.18; transform: translateY(var(--y)) scale(0.85); box-shadow: none; }
.sn-actions { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.sn-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border: 2px solid #e6e2f8; border-radius: 999px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; font: 800 16px Nunito, sans-serif; color: #4b5170; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.sn-btn em { font-style: normal; color: #e0305f; font-size: 13px; }
.sn-btn:hover { transform: translateY(-2px); color: #5a3fe0; box-shadow: 0 7px 0 #cfc6ff; border-color: #cfc6ff; }
.sn-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
.sn-card.shake { animation: opt-shake 0.4s ease; }

/* wynik gry */
.gm-result { position: relative; overflow: hidden; margin-top: 8px; padding: 22px 16px 18px; border-radius: 36px; text-align: center; background: linear-gradient(160deg, #f2ecff, #e4e9ff 60%, #dff3ff); border: 2px solid #fff; box-shadow: 0 7px 0 #d9d2f7, 0 24px 34px -22px rgba(80, 60, 190, 0.5); animation: sx-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.gm-rtrophy { position: relative; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(80, 50, 20, 0.35)); animation: sx-trophy-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards, fx-float 3.2s ease-in-out 1s infinite; }
.gm-result h2 { position: relative; margin: 6px 0 4px; font: 800 32px var(--display); color: #131d4c; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8); }
.gm-newbest { position: relative; margin: 0 0 6px; display: inline-block; padding: 3px 14px; border-radius: 999px; background: linear-gradient(180deg, #fff6d6, #ffe9a8); box-shadow: 0 3px 0 #f3d375; color: #8a5a00; font-weight: 800; animation: pick-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards; }
.gm-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
.gm-stars img { width: 54px; height: 54px; object-fit: contain; filter: grayscale(1) opacity(0.3); }
.gm-stars img.on { filter: drop-shadow(0 6px 6px rgba(200, 140, 0, 0.45)); animation: star-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(0.5s + var(--i) * 0.25s); }
.gm-big { position: relative; margin: 4px 0 8px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.gm-big b { font: 800 56px var(--display); color: #6a4cff; line-height: 1; }
.gm-big span { font-weight: 800; color: #7a8099; }
.gm-lines { position: relative; list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-weight: 700; font-size: 14.5px; color: #4b5170; }
.gm-lines li { padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); }
.gm-prize { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 8px; padding: 5px 18px 5px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff6d6, #ffe9a8); box-shadow: 0 4px 0 #f3d375; font-weight: 700; color: #8a5a00; animation: sx-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards; }
.gm-prize img { width: 32px; height: 32px; object-fit: contain; animation: fx-float 2.6s ease-in-out infinite; }
.gm-prize b { font: 800 26px var(--display); color: #b86e00; min-width: 40px; text-align: right; }
.gm-cap { position: relative; margin: 4px 0 8px; font-size: 12.5px; font-weight: 700; color: #8a90a8; }
.gm-actions { position: relative; display: grid; gap: 10px; margin-top: 10px; }
.gm-again { height: 66px; font-size: 25px; background: linear-gradient(90deg, #6ee02b, #3fc40f); box-shadow: 0 6px 0 #2f9a0a, 0 16px 26px -8px rgba(60, 170, 10, 0.55); animation: go-breathe 2.8s ease-in-out 1.5s infinite; }
.gm-again:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #2f9a0a, 0 20px 30px -8px rgba(60, 170, 10, 0.65); }
.gm-again:active { transform: translateY(5px); box-shadow: 0 1px 0 #2f9a0a; }
.gm-back { height: 52px; border: 2px solid #e6e2f8; border-radius: 999px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; font: 800 17px Nunito, sans-serif; color: #4b5170; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.gm-back:hover { transform: translateY(-2px); color: #5a3fe0; box-shadow: 0 7px 0 #cfc6ff; border-color: #cfc6ff; }
.gm-back:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
@media (prefers-reduced-motion: reduce) { .gm-mini,
.gm-mini::after,
.gm-mini img,
.mm-card,
.sn-tile,
.sp-mult.hot,
.hm-lives img.on,
.gm-again,
.gm-rtrophy { animation: none; } }

/* ciemny motyw */
:root[data-theme="dark"] .gm-mini { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 24%, #1f1c2b), color-mix(in srgb, var(--tint) 12%, #2a2545)); border-color: #2e2a3d; box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .gm-mini b,
:root[data-theme="dark"] .sp-en,
:root[data-theme="dark"] .hm-pl,
:root[data-theme="dark"] .gm-result h2,
:root[data-theme="dark"] .mm-front b { color: #f1f0ff; text-shadow: none; }
:root[data-theme="dark"] .sp-card,
:root[data-theme="dark"] .hm-card,
:root[data-theme="dark"] .sn-card,
:root[data-theme="dark"] .sp-time,
:root[data-theme="dark"] .sn-solved,
:root[data-theme="dark"] .hm-round { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 6px 0 #2a2638; }
:root[data-theme="dark"] .mm-front { background: #2a2733; box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .hm-slot,
:root[data-theme="dark"] .hm-key,
:root[data-theme="dark"] .sn-btn,
:root[data-theme="dark"] .gm-back { background: #2a2733; border-color: #3a3550; box-shadow: 0 4px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .sn-snake { background: linear-gradient(180deg, #16261a, #1a2f1f); border-color: #2c4a2f; box-shadow: 0 6px 0 #10200f; }
:root[data-theme="dark"] .gm-result { background: linear-gradient(160deg, #2a2545, #1f2140); border-color: #2e2a3d; box-shadow: 0 7px 0 #2a2638; }
:root[data-theme="dark"] .gm-lines li { background: rgba(255, 255, 255, 0.07); color: #c9c6e8; }

/* przesuwane rzędy (Gry, Pakiety): przeciąganie myszą, strzałki na komputerze */
.row-wrap { position: relative; }
.row-scroll { cursor: grab; }
.row-scroll.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.row-scroll.dragging * { pointer-events: none; }
.row-arr { display: none; }
@media (hover: hover) and (pointer: fine) {
  .row-arr { position: absolute; top: calc(50% - 26px); z-index: 4; width: 46px; height: 46px; display: grid; place-items: center; padding: 0 0 4px; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%; background: #fff; box-shadow: 0 5px 0 rgba(30, 40, 90, 0.16), 0 10px 18px -8px rgba(30, 40, 90, 0.4); color: #5a3fe0; font: 800 28px/1 var(--display); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s; }
  .row-arr.prev { left: -6px; } .row-arr.next { right: -6px; }
  .row-arr:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 7px 0 rgba(30, 40, 90, 0.16), 0 14px 22px -8px rgba(30, 40, 90, 0.45); }
  .row-arr:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30, 40, 90, 0.16); }
  .row-wrap.at-start .row-arr.prev,
.row-wrap.at-end .row-arr.next { opacity: 0; pointer-events: none; }
}
:root[data-theme="dark"] .row-arr { background: #2a2733; border-color: #3a3550; color: #b9a8ff; }

/* ===== Pojedynek z robotem ===== */
.dl-setup { text-align: center; padding: 4px 0; }
.dl-hero { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(50, 40, 120, 0.35)); animation: sx-trophy-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, fx-float 3.2s ease-in-out 1s infinite; }
.dl-setup h2 { margin: 6px 0 4px; font: 800 30px var(--display); color: #131d4c; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8); }
.dl-setup > p { margin: 0 8px 16px; font-weight: 700; font-size: 14px; color: #5f6788; }
.dl-bots { display: grid; gap: 14px; }
.dl-bot { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 10px; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 30px; text-align: left; cursor: pointer; font: inherit; background: radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.7), transparent 50%), linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 6px 0 var(--c3), 0 18px 24px -14px rgba(60, 50, 140, 0.5); animation: sx-up 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) backwards; animation-delay: calc(0.15s + var(--i) * 0.09s); transition: transform 0.18s, box-shadow 0.18s; }
.dl-bot.lv-easy { --c1: #e6f8e2; --c2: #c6ecc0; --c3: #9fd394; }
.dl-bot.lv-mid { --c1: #e2efff; --c2: #c2dcfb; --c3: #93bdf0; }
.dl-bot.lv-hard { --c1: #ffe7df; --c2: #ffc9b8; --c3: #f0987e; }
.dl-bot::after { content: ''; position: absolute; top: 0; left: -70%; width: 38%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: go-shine 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.8s + 1.5s); pointer-events: none; }
.dl-bot:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--c3), 0 22px 28px -14px rgba(60, 50, 140, 0.55); }
.dl-bot:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--c3); }
.dl-bot > img { width: 74px; height: 74px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 8px rgba(40, 40, 100, 0.35)); animation: fx-float 3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.8s); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dl-bot:hover > img { transform: rotate(-8deg) scale(1.1); }
.dl-bot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-bot-text b { font: 800 22px var(--display); color: #131d4c; }
.dl-bot-text small { font-size: 12.5px; font-weight: 700; color: #4b5170; line-height: 1.3; }
.dl-bot-text em { font-style: normal; font-size: 12px; font-weight: 800; color: #6a4cff; }
.dl-bot-gem { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px 4px 12px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(30, 40, 90, 0.14); font: 800 16px var(--display); color: #6d4ce0; }
.dl-bot-gem img { width: 22px; height: 22px; object-fit: contain; }

/* pojedynek: arena, licznik, pytanie, odpowiedzi */
.dl-arena { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 6px; margin: 0 0 8px; }
.dl-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 6px 8px; border-radius: 26px; background: #fff; border: 2px solid #ebe8fa; box-shadow: 0 5px 0 #e3defa; }
.dl-side.bot.lv-easy { background: linear-gradient(180deg, #f2fcef, #e3f7de); border-color: #c6ecc0; box-shadow: 0 5px 0 #b3dfa9; }
.dl-side.bot.lv-mid { background: linear-gradient(180deg, #f1f7ff, #dfeeff); border-color: #c2dcfb; box-shadow: 0 5px 0 #a9caf3; }
.dl-side.bot.lv-hard { background: linear-gradient(180deg, #fff3ee, #ffe2d6); border-color: #ffc9b8; box-shadow: 0 5px 0 #f0b09a; }
.dl-side.you { background: linear-gradient(180deg, #f7f3ff, #ede6ff); border-color: #d9ceff; box-shadow: 0 5px 0 #cfc6ff; }
.dl-side img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(50, 40, 120, 0.3)); animation: fx-float 3s ease-in-out infinite; }
.dl-side.bot img { animation-delay: -1.4s; }
.dl-side b { font: 800 15px var(--display); color: #131d4c; }
.dl-pts { font: 800 24px var(--display); color: #6a4cff; font-variant-numeric: tabular-nums; }
.dl-side.bot .dl-pts { color: #d9620a; }
.dl-mark { position: absolute; top: -10px; right: -6px; min-width: 34px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; font: 800 14px var(--display); color: #fff; }
.dl-mark.ok { background: linear-gradient(180deg, #7be835, #3fc40f); box-shadow: 0 3px 0 #2f9a0a; animation: pick-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dl-mark.bad { background: linear-gradient(180deg, #ff8a7a, #f0483a); box-shadow: 0 3px 0 #b8281d; animation: opt-shake 0.4s ease; }
.dl-mark:empty { display: none; }
.dl-think { display: inline-flex; gap: 3px; padding: 0 2px; }
.dl-think em { width: 6px; height: 6px; border-radius: 50%; background: #a3a8bd; animation: dl-dot 1s ease-in-out infinite; }
.dl-think em:nth-child(2) { animation-delay: 0.15s; } .dl-think em:nth-child(3) { animation-delay: 0.3s; }
@keyframes dl-dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }
.dl-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dl-vs { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #ffc83d, #f08a12); border: 3px solid #fff; box-shadow: 0 4px 0 #b76208; font: 900 18px var(--display); color: #fff; text-shadow: 0 2px 0 rgba(150, 70, 0, 0.4); animation: step-pulse 1.8s ease-in-out infinite; }
.dl-tug { display: block; width: 100%; height: 12px; border-radius: 99px; background: #ffb59a; overflow: hidden; box-shadow: inset 0 2px 3px rgba(60, 40, 20, 0.2); }
.dl-tug i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a58bff, #6143ff); transition: width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
.dl-mid small { font-size: 12px; font-weight: 800; color: #7a8099; }
.dl-mid small b { font: 800 15px var(--display); color: #131d4c; }
.dl-timer { position: relative; height: 22px; margin: 0 2px 10px; padding: 3px; border-radius: 99px; background: rgba(97, 67, 255, 0.12); box-shadow: inset 0 2px 3px rgba(60, 50, 140, 0.15); }
.dl-timer i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 10px rgba(80, 200, 20, 0.5); transition: width 0.12s linear; }
.dl-timer i.low { background: linear-gradient(90deg, #ff9a6b, #f0483a); box-shadow: 0 0 10px rgba(240, 72, 58, 0.6); animation: gm-blink 0.7s ease-in-out infinite; }
.dl-timer b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 800 12px Nunito, sans-serif; color: #2b3a7a; }
.dl-card { padding: 14px 14px 16px; border-radius: 30px; border: 2px solid #ebe8fa; text-align: center; background: linear-gradient(180deg, #fff, #f8f6ff); box-shadow: 0 6px 0 #e3defa, 0 20px 30px -22px rgba(80, 60, 190, 0.5); animation: sx-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; transition: box-shadow 0.25s, border-color 0.25s; }
.dl-card.good { border-color: #7bd14a; box-shadow: 0 6px 0 #a7e3bb, 0 0 0 5px rgba(76, 200, 26, 0.22); }
.dl-card.bad { border-color: #f08a8a; box-shadow: 0 6px 0 #f4c5c5, 0 0 0 5px rgba(240, 72, 58, 0.18); }
.dl-q { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7c62f0; }
.dl-img { width: 84px; height: 84px; object-fit: cover; border-radius: 22px; box-shadow: 0 8px 14px -6px rgba(40, 60, 120, 0.4); margin-bottom: 4px; }
.dl-word { font: 800 34px var(--display); color: #131d4c; line-height: 1.15; overflow-wrap: anywhere; }
.dl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.dl-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 8px 10px 8px 8px; border: 2px solid #e6e2f8; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; text-align: left; cursor: pointer; font: 800 16px Nunito, sans-serif; color: #2b3a7a; animation: sx-up 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(0.08s + var(--i) * 0.06s); transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s, background 0.2s, opacity 0.2s; }
.dl-opt kbd { flex-shrink: 0; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: #f0edff; color: #6a4cff; font: 800 13px Nunito, sans-serif; box-shadow: inset 0 -2px 0 #ddd5ff; }
.dl-opt span { flex: 1; line-height: 1.2; overflow-wrap: anywhere; }
.dl-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: #cfc6ff; box-shadow: 0 7px 0 #cfc6ff; }
.dl-opt:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #e6e2f8; }
.dl-opt:disabled { cursor: default; }
.dl-opt.picked { border-color: #8b5cff; background: #f3eeff; box-shadow: 0 5px 0 #cfc6ff; }
.dl-opt.ok { border-color: #7bd14a; background: linear-gradient(180deg, #f4fff0, #e2f8d8); box-shadow: 0 5px 0 #a7e3bb; animation: opt-ok 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dl-opt.ok kbd { background: #3fc40f; color: #fff; box-shadow: none; }
.dl-opt.bad { border-color: #f08a8a; background: #fff1f0; box-shadow: 0 5px 0 #f4c5c5; animation: opt-shake 0.4s ease; }
.dl-opt.bad kbd { background: #f0483a; color: #fff; box-shadow: none; }
.dl-opt.dim { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .dl-hero,
.dl-bot,
.dl-bot::after,
.dl-bot > img,
.dl-side img,
.dl-vs,
.dl-think em,
.dl-opt,
.dl-card { animation: none; } }
:root[data-theme="dark"] .dl-setup h2,
:root[data-theme="dark"] .dl-word,
:root[data-theme="dark"] .dl-bot-text b,
:root[data-theme="dark"] .dl-side b,
:root[data-theme="dark"] .dl-mid small b { color: #f1f0ff; text-shadow: none; }
:root[data-theme="dark"] .dl-side,
:root[data-theme="dark"] .dl-side.you,
:root[data-theme="dark"] .dl-side.bot,
:root[data-theme="dark"] .dl-card { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 5px 0 #2a2638; }
:root[data-theme="dark"] .dl-bot { background: linear-gradient(135deg, #232030, #1d1a28); border-color: #2e2a3d; box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .dl-bot-text small { color: #b8bed0; }
:root[data-theme="dark"] .dl-opt { background: #2a2733; border-color: #3a3550; box-shadow: 0 5px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .dl-opt.ok { background: #16261a; border-color: #2f6a3a; }
:root[data-theme="dark"] .dl-opt.bad { background: #341a1a; border-color: #6a2f2f; }

/* ---------- Biegacz słówek ---------- */
.rn-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 2px 8px; }
.rn-lives { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: 999px; background: #fff; border: 2px solid #ebe8fa; box-shadow: 0 3px 0 #e3defa; }
.rn-lives img { width: 24px; height: 24px; object-fit: contain; transition: transform 0.3s, filter 0.3s; }
.rn-lives img.on { animation: fx-float 2.4s ease-in-out infinite; }
.rn-lives img.off { filter: grayscale(1) opacity(0.35); transform: scale(0.78); }
.rn-gates { font-size: 13px; font-weight: 800; color: #7a8099; }
.rn-gates b { font: 800 20px var(--display); color: #131d4c; }
.rn-mult { min-width: 72px; justify-content: center; }
.rn-ask { display: flex; align-items: center; gap: 12px; min-height: 76px; margin-bottom: 12px; padding: 8px 16px 8px 10px; border-radius: 24px; background: #fff; border: 2px solid #e6e2f8; box-shadow: 0 5px 0 #e6e2f8; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; }
.rn-ask.next { animation: sx-up 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
.rn-ask.good { border-color: #7bd14a; box-shadow: 0 5px 0 #a7e3bb, 0 0 0 4px rgba(76, 200, 26, 0.2); }
.rn-ask.bad { border-color: #f08a8a; box-shadow: 0 5px 0 #f4c5c5, 0 0 0 4px rgba(240, 72, 58, 0.16); }
.rn-ask-img { flex-shrink: 0; width: 56px; height: 56px; object-fit: cover; border-radius: 16px; box-shadow: 0 6px 10px -5px rgba(40, 60, 120, 0.4); }
.rn-ask-txt { min-width: 0; }
.rn-ask-txt small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7c62f0; }
.rn-ask-txt b { display: block; font: 800 30px var(--display); line-height: 1.1; color: #131d4c; overflow-wrap: anywhere; }

.rn-stage { --rn-fog: 223, 243, 255; --rn-g1: #7ed957; --rn-g2: #6ecb4b; --rn-r1: #7466d8; --rn-r2: #6a5ccf; --rn-e1: #ff5a6e; --rn-e2: #ffffff; --rn-ln: #ffffff;
  position: relative; height: clamp(340px, 56vh, 520px); overflow: hidden; border-radius: 26px; border: 3px solid #fff; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #4fa9fb 0%, #9fd6ff 12%, #dff3ff 21.4%, #7ed957 21.6%);
  box-shadow: 0 8px 0 #d6cff5, 0 22px 34px -16px rgba(70, 50, 150, 0.55); }
.rn-stage.shake { animation: rn-shake 0.45s ease; }
.rn-sky { position: absolute; inset: 0 0 78% 0; overflow: hidden; pointer-events: none; }
.rn-cloud { position: absolute; width: 74px; opacity: 0.92; animation: rn-cloud 38s linear infinite; }
.rn-cloud.c1 { top: 8%; left: -20%; }
.rn-cloud.c2 { top: 34%; left: -20%; width: 52px; opacity: 0.75; animation-duration: 56s; animation-delay: -22s; }
.rn-hills { position: absolute; left: 0; right: 0; top: 12.6%; height: 9%; pointer-events: none; overflow: hidden; }
.rn-hills::before,
.rn-hills::after { content: ''; position: absolute; bottom: -30%; border-radius: 50% 50% 0 0; }
.rn-hills::before { left: -12%; width: 62%; height: 100%; background: linear-gradient(180deg, #9be27f, #7ed957); }
.rn-hills::after { right: -14%; width: 70%; height: 82%; background: linear-gradient(180deg, #86d96b, #6ecb4b); }
.rn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rn-trees { position: absolute; inset: 0; pointer-events: none; }
.rn-tree { position: absolute; left: 0; top: 0; width: 24%; transform-origin: 50% 100%; will-change: transform; }
.rn-gate { position: absolute; left: 0; top: 0; z-index: 2; width: 94%; display: flex; transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: none; }
.rn-tile { --c: #8b5cff; position: relative; flex: 1 1 0; min-width: 0; margin: 0 1.6%; min-height: 62px; padding: 6px 4px; display: grid; place-items: center; text-align: center; border-radius: 18px; border: 3px solid var(--c);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 16%, #fff)); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 78%, #000); }
.rn-tile:nth-child(2) { --c: #38a5f1; }
.rn-tile:nth-child(3) { --c: #ff9a2e; }
.rn-tile::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 12px; border-radius: 50%; background: radial-gradient(rgba(20, 10, 60, 0.32), transparent 70%); }
.rn-tile span { font: 800 19px var(--display); line-height: 1.05; color: #1b1f3e; overflow-wrap: anywhere; hyphens: auto; }
.rn-tile.ok { --c: #2fc21a; animation: rn-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rn-tile.ok::before { content: '✓'; position: absolute; top: -13px; right: -8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #2fc21a; color: #fff; font: 900 16px Nunito, sans-serif; box-shadow: 0 3px 0 #1f8a10; }
.rn-tile.bad { --c: #f0483a; animation: opt-shake 0.4s ease; }
.rn-tile.dim { opacity: 0.4; }

.rn-hero { position: absolute; z-index: 3; left: calc(50% + var(--lane, 0) * 31.33%); top: 88%; width: 25%; transform: translate(-50%, -100%); transition: left 0.16s cubic-bezier(0.3, 1.4, 0.6, 1); pointer-events: none; }
.rn-hero-in { display: block; transform-origin: 50% 100%; }
.rn-hero-in img { display: block; width: 100%; height: auto; animation: rn-run 0.34s ease-in-out infinite; transform-origin: 50% 100%; }
.rn-shadow { position: absolute; left: 12%; right: 12%; bottom: -5%; height: 14%; border-radius: 50%; background: radial-gradient(rgba(20, 10, 60, 0.4), transparent 70%); }
.rn-hero.lean .rn-hero-in { animation: rn-lean 0.32s ease-out; }
.rn-hero.jump .rn-hero-in { animation: rn-jump 0.55s cubic-bezier(0.3, 1.3, 0.5, 1); }
.rn-hero.oops .rn-hero-in { animation: rn-oops 0.6s ease; }
.rn-spark { position: absolute; left: 50%; top: 30%; width: 22px; height: 22px; object-fit: contain; pointer-events: none; animation: rn-spark 0.8s ease-out var(--d, 0s) forwards; }
.rn-count { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.rn-count b { font: 900 92px var(--display); color: #fff; text-shadow: 0 6px 0 #6143ff, 0 12px 26px rgba(30, 10, 100, 0.4); animation: rn-count 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.rn-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.rn-flash.on { animation: rn-flash 0.5s ease-out; }
.rn-flash.bad { background: radial-gradient(circle at 50% 60%, transparent 38%, rgba(240, 72, 58, 0.6)); }
.rn-flash.ok { background: radial-gradient(circle at 50% 70%, rgba(255, 230, 120, 0.55), transparent 62%); }
.rn-stage.hot::after { content: ''; position: absolute; inset: -40%; z-index: 4; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.3) 0 1.3deg, transparent 1.3deg 10deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 68%); mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 68%); animation: rn-rays 2.4s linear infinite; }
.rn-tip { margin-top: 14px; font-size: 13px; }
.rn-tip kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; background: #f0edff; color: #6a4cff; font: 800 12px Nunito, sans-serif; box-shadow: inset 0 -2px 0 #ddd5ff; }
@keyframes rn-cloud { from { transform: translateX(0); } to { transform: translateX(640%); } }
@keyframes rn-run { 0%, 100% { transform: translateY(0) rotate(-2.5deg) scale(1, 1); } 25% { transform: translateY(-9px) rotate(0deg) scale(0.98, 1.03); } 50% { transform: translateY(0) rotate(2.5deg) scale(1.02, 0.97); } 75% { transform: translateY(-9px) rotate(0deg) scale(0.98, 1.03); } }
@keyframes rn-lean { 0% { transform: rotate(calc(var(--lean, 1) * -16deg)) scale(0.96); } 60% { transform: rotate(calc(var(--lean, 1) * 6deg)); } 100% { transform: none; } }
@keyframes rn-jump { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.1, 0.88); } 55% { transform: translateY(-34px) scale(0.94, 1.1) rotate(-6deg); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes rn-oops { 0% { transform: none; } 20% { transform: rotate(-16deg) translateX(-8px) scale(1.04, 0.94); } 45% { transform: rotate(12deg) translateX(7px); } 70% { transform: rotate(-7deg); } 100% { transform: none; } }
@keyframes rn-spark { from { opacity: 1; transform: translate(-50%, 0) scale(0.5); } 60% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.1) rotate(200deg); } }
@keyframes rn-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14) translateY(-6px); } 100% { transform: scale(1); } }
@keyframes rn-count { from { opacity: 0; transform: scale(2.2); } 30% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes rn-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rn-shake { 0%, 100% { transform: none; } 20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
@keyframes rn-rays { to { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .rn-cloud,
.rn-hero-in img,
.rn-hero.lean .rn-hero-in,
.rn-hero.jump .rn-hero-in,
.rn-hero.oops .rn-hero-in,
.rn-stage.hot::after,
.rn-stage.shake,
.rn-lives img.on,
.rn-tile,
.rn-ask.next { animation: none; } }
:root[data-theme="dark"] .rn-lives,
:root[data-theme="dark"] .rn-ask { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #2a2638; }
:root[data-theme="dark"] .rn-ask.good { border-color: #2f6a3a; box-shadow: 0 5px 0 #1d3d27; }
:root[data-theme="dark"] .rn-ask.bad { border-color: #6a2f2f; box-shadow: 0 5px 0 #3d1d1d; }
:root[data-theme="dark"] .rn-ask-txt b,
:root[data-theme="dark"] .rn-gates b { color: #f1f0ff; }
:root[data-theme="dark"] .rn-stage { --rn-fog: 44, 40, 96; --rn-g1: #2f6d45; --rn-g2: #285f3c; --rn-r1: #3d3576; --rn-r2: #362f6a; --rn-e1: #c4384d; --rn-e2: #cfd2e6; --rn-ln: #cfd2e6; border-color: #2e2a3d; background: linear-gradient(180deg, #171a44 0%, #262a68 12%, #2c2860 21.4%, #2f6d45 21.6%); box-shadow: 0 8px 0 #17141f, 0 22px 34px -16px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .rn-cloud { opacity: 0.25; }
:root[data-theme="dark"] .rn-hills::before { background: linear-gradient(180deg, #2f7a4a, #2a6a40); }
:root[data-theme="dark"] .rn-hills::after { background: linear-gradient(180deg, #2a6a40, #245a37); }
:root[data-theme="dark"] .rn-tile { background: linear-gradient(180deg, #2a2733, color-mix(in srgb, var(--c) 22%, #2a2733)); }
:root[data-theme="dark"] .rn-tile span { color: #f1f0ff; }
.rn-tile span { overflow-wrap: break-word; }
.rn-tile span.sm { font-size: 15px; }
.rn-tile span.xs { font-size: 12.5px; }
.rn-count b.go { font-size: 62px; }

/* ---------- Bańki słówek ---------- */
.bb-stage { --d: 68px; position: relative; height: clamp(360px, 60vh, 560px); overflow: hidden; border-radius: 26px; border: 3px solid #fff; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.75), transparent 42%), linear-gradient(180deg, #b7e5ff 0%, #d7efff 48%, #ffe1f0 100%);
  box-shadow: 0 8px 0 #d6cff5, 0 22px 34px -16px rgba(70, 50, 150, 0.55); }
.bb-stage.shake { animation: rn-shake 0.45s ease; }
.bb-deco { position: absolute; bottom: -12%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 45%, rgba(130, 190, 255, 0.28)); animation: bb-float 11s linear infinite; }
.bb-deco.d1 { left: 8%; width: 34px; height: 34px; }
.bb-deco.d2 { left: 38%; width: 22px; height: 22px; animation-duration: 15s; animation-delay: -6s; }
.bb-deco.d3 { left: 66%; width: 44px; height: 44px; animation-duration: 13s; animation-delay: -3s; }
.bb-deco.d4 { left: 88%; width: 26px; height: 26px; animation-duration: 17s; animation-delay: -10s; }
.bb-ceil { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 9px; background: linear-gradient(180deg, #7a4bff, #5a3fe0); box-shadow: 0 3px 0 rgba(60, 30, 160, 0.3); }
.bb-ceil i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ffd166, #ff9a2e); box-shadow: 0 0 8px rgba(255, 170, 40, 0.8); transition: width 0.1s linear; }
.bb-ceil i.low { background: linear-gradient(90deg, #ff9a6b, #f0483a); animation: gm-blink 0.6s ease-in-out infinite; }
.bb-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bb-danger { position: absolute; left: 0; right: 0; height: 0; z-index: 1; border-top: 3px dashed rgba(240, 72, 58, 0.65); pointer-events: none; }
.bb-danger span { position: absolute; right: 8px; top: -17px; font: 800 10px Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(214, 50, 50, 0.85); }
.bb-guide { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.bb-shooter { position: absolute; z-index: 5; width: calc(var(--d) * 1.95); height: calc(var(--d) * 1.95); transform: translate(-50%, -50%); pointer-events: none; }
.bb-cannon { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--a, 0deg)); transition: transform 0.05s linear; filter: drop-shadow(0 6px 6px rgba(50, 20, 120, 0.35)); }
.bb-b { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); padding: 2.5%; transition: transform 0.5s cubic-bezier(0.3, 1.35, 0.5, 1); will-change: transform; pointer-events: none; }
.bb-face { --c: #8b5cff; position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; text-align: center; border: 2px solid rgba(255, 255, 255, 0.75);
  background: radial-gradient(circle at 31% 25%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0) 13%), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 76%, #000) 100%);
  box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(255, 255, 255, 0.5), 0 4px 0 color-mix(in srgb, var(--c) 68%, #000), 0 9px 12px -6px rgba(30, 20, 90, 0.5); }
.bb-b.k1 .bb-face { --c: #38a5f1; } .bb-b.k2 .bb-face { --c: #2fbf6b; } .bb-b.k3 .bb-face { --c: #ff9a2e; } .bb-b.k4 .bb-face { --c: #ff6fa3; } .bb-b.k5 .bb-face { --c: #17b8c4; }
.bb-face span { padding: 0 3px; font: 800 14px var(--display); line-height: 1.05; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32); overflow-wrap: break-word; }
.bb-face span.sm { font-size: 11.5px; } .bb-face span.xs { font-size: 9.5px; }
.bb-b.aimed .bb-face { outline: 3px solid #fff; outline-offset: 2px; }
.bb-b.pop .bb-face { animation: bb-pop 0.4s ease-out forwards; }
.bb-b.fall .bb-face { animation: bb-fall 0.95s cubic-bezier(0.45, 0, 1, 0.6) forwards; }
.bb-b.hint .bb-face { animation: bb-hint 0.45s ease-in-out 3; }
.bb-shot { z-index: 6; transition: none; }
.bb-ammo { left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.2s, opacity 0.2s; }
.bb-ammo .bb-face { box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(255, 255, 255, 0.5), 0 0 0 4px #ffd166, 0 0 16px 5px rgba(255, 200, 60, 0.65); }
.bb-ammo.load { animation: bb-load 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bb-shooter.empty .bb-ammo { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
.bb-drop { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.2); animation: bb-drop 0.7s ease-out forwards; }
.bb-ring { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.95); animation: bb-ring 0.55s ease-out forwards; }
.bb-x { position: absolute; left: 0; top: 0; width: 40px; text-align: center; font: 900 42px Nunito, sans-serif; font-style: normal; color: #f0483a; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.9); animation: bb-x 0.7s ease-out forwards; }
@keyframes bb-float { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-560px); opacity: 0; } }
@keyframes bb-pop { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes bb-fall { to { transform: translateY(560px) rotate(80deg); opacity: 0.15; } }
@keyframes bb-hint { 50% { transform: scale(1.14); box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.16), 0 0 0 5px #ffd166, 0 0 18px 6px rgba(255, 200, 60, 0.85); } }
@keyframes bb-load { from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes bb-drop { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } to { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(0.3); } }
@keyframes bb-ring { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(0.6); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.7); } }
@keyframes bb-x { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(0.6); } 30% { transform: translate(var(--x), var(--y)) scale(1.3); } to { opacity: 0; transform: translate(var(--x), calc(var(--y) - 30px)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .bb-deco,
.bb-stage.shake,
.bb-ammo.load,
.bb-b.hint .bb-face,
.bb-ceil i.low { animation: none; } .bb-b { transition: none; } }
:root[data-theme="dark"] .bb-stage { border-color: #2e2a3d; background: radial-gradient(circle at 18% 12%, rgba(120, 130, 255, 0.18), transparent 42%), linear-gradient(180deg, #1a1e4a 0%, #262a66 50%, #3a2a5e 100%); box-shadow: 0 8px 0 #17141f, 0 22px 34px -16px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .bb-deco { opacity: 0.5; }
:root[data-theme="dark"] .bb-danger span { color: rgba(255, 120, 120, 0.9); }

/* ---------- dolne menu: ikony 3D + maskotka Słowik pośrodku ---------- */
.nav { --nav-bg: #ffffff; align-items: flex-end; padding: 0 6px calc(6px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 26px rgba(60, 40, 140, 0.1); }
.nav button { padding: 8px 2px 2px; gap: 1px; }
.nav-ic { position: relative; z-index: 1; }
.nav-ic { width: 36px; height: 36px; object-fit: contain; filter: saturate(0.72) opacity(0.85) drop-shadow(0 2px 2px rgba(60, 40, 140, 0.16)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s; }
.nav button:hover .nav-ic { transform: translateY(-2px) scale(1.07); }
.nav button:active .nav-ic { transform: scale(0.9); }
.nav .nav-ind { top: 3px; left: 50%; width: 56px; height: 42px; margin-left: -28px; border-radius: 18px; background: transparent; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav button.active .nav-ind { opacity: 1; transform: none; background: linear-gradient(180deg, rgba(139, 92, 255, 0.2), rgba(139, 92, 255, 0.07)); box-shadow: inset 0 0 0 1.5px rgba(139, 92, 255, 0.2); }
.nav button.active .nav-ic { filter: drop-shadow(0 4px 5px rgba(97, 67, 255, 0.4)); transform: translateY(-3px) scale(1.14); animation: nav-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), nav-bob 2.8s ease-in-out 0.5s infinite; }
.nav button.active > span:last-child { color: #6143ff; }

@keyframes nav-pop { from { transform: translateY(4px) scale(0.7); } 60% { transform: translateY(-6px) scale(1.22); } to { transform: translateY(-3px) scale(1.14); } }
@keyframes nav-bob { 0%, 100% { transform: translateY(-3px) scale(1.14); } 50% { transform: translateY(-6px) scale(1.14) rotate(-3deg); } }
@keyframes nm-pulse { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes nm-bob { 0%, 100% { transform: none; } 15% { transform: translateY(-3px) rotate(-2deg); } 30% { transform: none; } 45% { transform: translateY(-3px) rotate(2deg); } 60% { transform: none; } 84% { transform: none; } 88% { transform: translateY(-5px) rotate(-9deg); } 92% { transform: translateY(-5px) rotate(9deg); } 96% { transform: translateY(-2px) rotate(-4deg); } }
@keyframes nm-hop { 0% { transform: none; } 30% { transform: translateY(6px) scale(1.06, 0.92); } 60% { transform: translateY(-14px) scale(0.96, 1.06); } 100% { transform: none; } }
@keyframes nm-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
:root[data-theme="dark"] .nav { --nav-bg: #201d2a; box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .nav-ic { filter: saturate(0.75) opacity(0.8); }
:root[data-theme="dark"] .nav button.active .nav-ic { filter: drop-shadow(0 4px 6px rgba(139, 92, 255, 0.55)); }
:root[data-theme="dark"] .nav button.active .nav-ind { background: linear-gradient(180deg, rgba(139, 92, 255, 0.32), rgba(139, 92, 255, 0.1)); }
:root[data-theme="dark"] .nav button.active > span:last-child { color: #b9a4ff; }
@media (prefers-reduced-motion: reduce) { .nav button.active .nav-ic { animation: none; } }

/* ---------- zakładka Zadania z lekcji (ekran główny) ---------- */
.hm-tasks { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; margin: 14px 0 0; padding: 14px 16px 14px 12px; border: 2px solid #d3efdc; border-radius: 26px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, #f1fcf5 0%, #e5f6ed 48%, #e9efff 100%); box-shadow: 0 6px 0 #c5e6d1, 0 16px 24px -16px rgba(30, 120, 80, 0.55); transition: transform 0.18s, box-shadow 0.18s; }
.hm-tasks::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-18deg); animation: ht-shine 5s ease-in-out infinite; pointer-events: none; }
.hm-tasks:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #c5e6d1, 0 20px 28px -16px rgba(30, 120, 80, 0.55); }
.hm-tasks:active { transform: translateY(4px); box-shadow: 0 2px 0 #c5e6d1; }
.ht-art { position: relative; flex-shrink: 0; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: radial-gradient(circle at 30% 24%, #fff, #d2f0dd); box-shadow: inset 0 -4px 0 rgba(30, 120, 80, 0.12), 0 8px 14px -8px rgba(30, 120, 80, 0.6); }
.ht-art img { width: 66px; height: 66px; object-fit: contain; animation: fx-float 3s ease-in-out infinite; }
.ht-spark { position: absolute; width: 9px; height: 9px; background: #ffd166; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: nm-twinkle 2.6s ease-in-out infinite; }
.ht-spark.s1 { top: 4px; right: 3px; }
.ht-spark.s2 { bottom: 8px; left: 2px; width: 7px; height: 7px; background: #8fd3ff; animation-delay: -1.2s; }
.ht-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-text b { font: 800 21px var(--display); line-height: 1.15; color: #131d4c; }
.ht-text > span { font-size: 14px; font-weight: 700; color: #5b6b80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; white-space: normal; }
.ht-pills em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1.5px solid #cbe8d6; font: 800 12px Nunito, sans-serif; color: #1f7a4a; }
.ht-pills em.best { background: #fff3d1; border-color: #f3dc9a; color: #9a5b00; }
.ht-go { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #34d16b, #1fb356); color: #fff; font: 800 26px/1 Nunito, sans-serif; padding-bottom: 3px; box-shadow: 0 4px 0 #15803d; transition: transform 0.2s; }
.hm-tasks:hover .ht-go { transform: translateX(3px); }
@keyframes ht-shine { 0%, 60% { left: -60%; } 90%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .hm-tasks::after,
.ht-art img,
.ht-spark { animation: none; } }
:root[data-theme="dark"] .hm-tasks { border-color: #24483a; background: linear-gradient(135deg, #1b2a24, #1d2a30 55%, #1f2340); box-shadow: 0 6px 0 #15201b, 0 16px 24px -16px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .ht-art { background: radial-gradient(circle at 30% 24%, #2c4a3b, #1f3a2e); }
:root[data-theme="dark"] .ht-text b { color: #f1f0ff; }
:root[data-theme="dark"] .ht-text > span { color: #b8bed0; }
:root[data-theme="dark"] .ht-pills em { background: #24313a; border-color: #2f5a46; color: #7fe0a8; }
:root[data-theme="dark"] .ht-pills em.best { background: #3a3220; border-color: #6a5a2a; color: #ffd166; }
.nav button.on .nav-ind { opacity: 1; transform: none; background: linear-gradient(180deg, rgba(139, 92, 255, 0.2), rgba(139, 92, 255, 0.07)); box-shadow: inset 0 0 0 1.5px rgba(139, 92, 255, 0.2); }
.nav button.on .nav-ic { filter: drop-shadow(0 4px 5px rgba(97, 67, 255, 0.4)); transform: translateY(-3px) scale(1.14); animation: nav-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), nav-bob 2.8s ease-in-out 0.5s infinite; }
.nav button.on > span:last-child { color: #6143ff; font-weight: 800; }
:root[data-theme="dark"] .nav button.on > span:last-child { color: #b9a4ff; }

/* ---------- ustawienia w rogu (zamiast flagi) i zakładka AI ---------- */
.flag.gear { display: grid; place-items: center; background: #fff; border-color: #fff; overflow: visible; }
.flag.gear img { width: 40px; height: 40px; object-fit: contain; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.flag.gear:hover img { transform: rotate(90deg) scale(1.08); }
:root[data-theme="dark"] .flag.gear { background: #2a2733; border-color: #201d2a; }
.ai-chat { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; min-height: 40vh; }
.ai-hello { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; text-align: center; }
.ai-hello img { width: 120px; animation: fx-float 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(80, 50, 180, 0.35)); }
.ai-hello b { font: 800 24px var(--display); color: #131d4c; }
.ai-hello > span { font-size: 15px; font-weight: 600; color: #6f7590; }
.ai-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }
.ai-chips button { padding: 12px 16px; border: 2px solid #e6e2f8; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #e6e2f8; font: 800 15px Nunito, sans-serif; color: #2b3a7a; text-align: left; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ai-chips button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #cfc6ff; }
.ai-chips button:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
.ai-msg { display: flex; align-items: flex-end; gap: 8px; animation: sx-up 0.3s ease backwards; }
.ai-msg.me { justify-content: flex-end; }
.ai-msg img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; }
.ai-bub { max-width: 82%; padding: 10px 14px; border-radius: 20px; font: 600 15px/1.45 Nunito, sans-serif; color: #1b1f3e; background: #fff; box-shadow: 0 3px 0 #e6e2f8; overflow-wrap: anywhere; }
.ai-msg.me .ai-bub { color: #fff; background: linear-gradient(135deg, #8b5cff, #6143ff); box-shadow: 0 3px 0 #4a30c8; border-bottom-right-radius: 6px; }
.ai-msg.ai .ai-bub { border-bottom-left-radius: 6px; }
.ai-bub.typing { display: flex; gap: 5px; padding: 14px 16px; }
.ai-bub.typing i { width: 8px; height: 8px; border-radius: 50%; background: #a99cf0; animation: gm-blink 0.9s ease-in-out infinite; }
.ai-bub.typing i:nth-child(2) { animation-delay: 0.15s; } .ai-bub.typing i:nth-child(3) { animation-delay: 0.3s; }
.ai-bar { position: sticky; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: #fff; box-shadow: 0 6px 22px -8px rgba(60, 40, 140, 0.4); border: 2px solid #e6e2f8; }
.ai-bar input { flex: 1; min-width: 0; padding: 0 12px; border: 0; outline: 0; background: transparent; font: 700 16px Nunito, sans-serif; color: #1b1f3e; }
.ai-send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 18px; background: linear-gradient(135deg, #8b5cff, #6143ff); box-shadow: 0 4px 0 #4a30c8; transition: transform 0.15s; }
.ai-send:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a30c8; }
.ai-send:disabled { opacity: 0.5; }
:root[data-theme="dark"] .ai-bub,
:root[data-theme="dark"] .ai-bar,
:root[data-theme="dark"] .ai-chips button { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 3px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .ai-msg.me .ai-bub { background: linear-gradient(135deg, #7a4bff, #5a3fe0); color: #fff; }
:root[data-theme="dark"] .ai-hello b,
:root[data-theme="dark"] .ai-bar input { color: #f1f0ff; }

/* ---------- Gramatyka (kompendium) ---------- */
.gr-levels { display: flex; gap: 8px; margin: 14px 0 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.gr-levels::-webkit-scrollbar { display: none; }
.gr-lv { flex-shrink: 0; height: 38px; padding: 0 16px; border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 999px; background: #fff; color: var(--c); font: 800 15px var(--display); cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 22%, #fff); transition: transform 0.15s, background 0.2s; }
.gr-lv:hover { transform: translateY(-1px); }
.gr-lv.on { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); }
.gr-list { display: flex; flex-direction: column; gap: 10px; }
.gr-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border: 2px solid color-mix(in srgb, var(--c) 20%, #fff); border-radius: 22px; background: linear-gradient(135deg, #fff, var(--t)); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 22%, #fff); text-align: left; cursor: pointer; animation: sx-up 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(var(--i) * 0.03s); transition: transform 0.15s, box-shadow 0.15s; }
.gr-row:hover { transform: translateY(-2px); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 30%, #fff); }
.gr-row:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 22%, #fff); }
.gr-num { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: var(--c); color: #fff; font: 800 20px var(--display); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 70%, #000), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.gr-row.done .gr-num { background: #2fc21a; box-shadow: 0 4px 0 #1f8a10, inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.gr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-text b { font: 800 17px/1.2 var(--display); color: #131d4c; }
.gr-text small { font: 600 13px/1.3 Nunito, sans-serif; color: #6f7590; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gr-lvl { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--t, #eee); color: var(--c); font: 800 12px Nunito, sans-serif; }
.gr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gr-title { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.gr-title h2 { margin: 0; font: 800 22px/1.2 var(--display); color: #131d4c; }
.gr-body { padding: 4px 16px 16px; border-radius: 26px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; font: 600 15.5px/1.55 Nunito, sans-serif; color: #2b2f4a; }
.gr-body h4 { margin: 20px 0 8px; padding-left: 10px; border-left: 5px solid var(--c); font: 800 18px/1.25 var(--display); color: #131d4c; }
.gr-body p { margin: 8px 0; }
.gr-body ul,
.gr-body ol { margin: 8px 0; padding-left: 22px; }
.gr-body li { margin: 5px 0; }
.gr-body code { padding: 1px 7px; border-radius: 8px; background: var(--t); color: var(--c); font: 800 14px Nunito, sans-serif; }
.gr-body i { color: #4b3fb0; }
.gr-table { margin: 10px -6px; overflow-x: auto; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--c) 22%, #fff); }
.gr-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gr-table th { padding: 8px 10px; background: var(--c); color: #fff; font: 800 13px Nunito, sans-serif; text-align: left; white-space: nowrap; }
.gr-table td { padding: 8px 10px; border-top: 1px solid color-mix(in srgb, var(--c) 15%, #fff); vertical-align: top; }
.gr-table tr:nth-child(even) td { background: color-mix(in srgb, var(--t) 55%, #fff); }
.gr-body details { margin: 10px 0; padding: 10px 14px; border-radius: 16px; background: var(--t); }
.gr-body summary { cursor: pointer; font: 800 15px Nunito, sans-serif; color: var(--c); }
.gr-nav { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; }
.gr-nav .gr-done { flex: 1; height: 56px; font-size: 18px; }
.gr-nav .gr-done.on { background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 10px 22px -10px rgba(97, 67, 255, 0.8); }
.gr-pn { min-width: 52px; height: 52px; border: 2px solid #e6e2f8; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #e6e2f8; font: 800 17px var(--display); color: #5a3fe0; cursor: pointer; }
.gr-pn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
@media (prefers-reduced-motion: reduce) { .gr-row { animation: none; } }
:root[data-theme="dark"] .gr-row { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 5px 0 #17141f; }
:root[data-theme="dark"] .gr-lv { background: #201d2a; }
:root[data-theme="dark"] .gr-lv.on { background: var(--c); }
:root[data-theme="dark"] .gr-text b,
:root[data-theme="dark"] .gr-title h2,
:root[data-theme="dark"] .gr-body h4 { color: #f1f0ff; }
:root[data-theme="dark"] .gr-text small { color: #b8bed0; }
:root[data-theme="dark"] .gr-body { background: #201d2a; box-shadow: 0 5px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .gr-body i { color: #b9a4ff; }
:root[data-theme="dark"] .gr-body details,
:root[data-theme="dark"] .gr-body code { background: #2a2733; }
:root[data-theme="dark"] .gr-table td { border-color: #2e2a3d; }
:root[data-theme="dark"] .gr-table tr:nth-child(even) td { background: #26232f; }
:root[data-theme="dark"] .gr-pn { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #17141f; }
.gr-levels.wrap { flex-wrap: wrap; overflow: visible; margin: 8px 0 4px; }
.gr-body.gr-s { font-size: 14px; } .gr-body.gr-l { font-size: 17.5px; }
.gr-body.gr-l .gr-table table { font-size: 15.5px; }
.gr-row.locked { opacity: 0.72; border-style: dashed; filter: grayscale(0.2); }
.gr-row.locked .gr-num { background: #8e8aa0; box-shadow: 0 4px 0 #676378, inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.gr-req-hint { color: #d84315; font-weight: 700; }
.gr-trainer { margin-top: 18px; padding: 18px; border-radius: 24px; background: #ffffff; box-shadow: 0 6px 0 #e6e2f8; border: 2px solid #e6e2f8; }
.gr-trainer.locked { background: #fff8f5; border-color: #ffd0c2; box-shadow: 0 6px 0 #ffd0c2; text-align: center; }
.gr-trainer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.gr-trainer-badge { padding: 4px 12px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font: 800 13px Nunito, sans-serif; }
.gr-trainer-badge.ok { background: #e6f9ed; color: #166534; }
.gr-trainer-desc { margin: 8px 0 14px; font: 600 14.5px/1.4 Nunito, sans-serif; color: #4b5563; }
:root[data-theme="dark"] .gr-trainer { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 6px 0 #17141f; }

/* ---------- Grammar Cheat-Code & Meme Cards ---------- */
.gr-cheat-card {
  position: relative;
  overflow: hidden;
  margin: 14px 0 18px;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(165deg, #ffffff 0%, #fbfaff 60%, #f4f0ff 100%);
  border: 2px solid #ded5fa;
  box-shadow: 0 8px 0 #ded5fa, 0 16px 28px -12px rgba(97, 67, 255, 0.18);
  animation: sx-up 0.25s ease;
}
.gr-cheat-card.collapsed .gr-cheat-content { display: none; }
.gr-cheat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.gr-cheat-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-cheat-pill { display: inline-block; padding: 2px 7px; border-radius: 999px; background: #fef3c7; color: #b45309; font: 800 11px Nunito, sans-serif; margin-left: 6px; vertical-align: middle; border: 1px solid #fde68a; }
:root[data-theme="dark"] .gr-cheat-pill { background: #342813; color: #fde68a; border-color: #61461b; }
.gr-cheat-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #7e22ce;
  font: 800 13px Nunito, sans-serif;
  letter-spacing: 0.5px;
}
.gr-cheat-rarity {
  padding: 4px 12px;
  border-radius: 999px;
  color: #ffffff;
  font: 800 12px Nunito, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.gr-cheat-btn-toggle {
  background: none;
  border: none;
  color: #6366f1;
  font: 800 13px Nunito, sans-serif;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: opacity 0.15s;
}
.gr-cheat-btn-toggle:hover { opacity: 0.75; }
.gr-cheat-title {
  margin: 4px 0 6px;
  font: 900 21px/1.3 var(--display);
  color: #15132d;
}
.gr-cheat-subtitle {
  margin: 0 0 14px;
  font: 600 14px/1.4 Nunito, sans-serif;
  color: #64748b;
}
.gr-cheat-visual {
  margin: 10px 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  text-align: center;
}
.gr-cheat-visual code {
  font: 800 14px/1.4 monospace;
  color: #4338ca;
  word-break: break-word;
}
.gr-cheat-rule-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-left: 5px solid #f59e0b;
}
.gr-cheat-rule-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.gr-cheat-rule-text { margin: 0; font: 700 14.5px/1.45 Nunito, sans-serif; color: #92400e; }
.gr-cheat-rule-text b { color: #b45309; }
.gr-cheat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
@media (max-width: 600px) {
  .gr-cheat-grid { grid-template-columns: 1fr; }
}
.gr-cheat-box {
  padding: 14px;
  border-radius: 18px;
  border: 2px solid;
  transition: transform 0.15s;
}
.gr-cheat-box.bad {
  background: #fff5f5;
  border-color: #fecaca;
  box-shadow: 0 4px 0 #fee2e2;
}
.gr-cheat-box.good {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 4px 0 #dcfce7;
}
.gr-cheat-box-tag {
  display: inline-block;
  margin-bottom: 6px;
  font: 800 12px/1 Nunito, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gr-cheat-box-tag.bad { color: #dc2626; }
.gr-cheat-box-tag.good { color: #16a34a; }
.gr-cheat-ex {
  margin: 4px 0 8px;
  font: 800 15px/1.35 monospace;
}
.gr-cheat-ex.bad { color: #991b1b; }
.gr-cheat-ex.good { color: #14532d; }
.gr-cheat-expl {
  margin: 0;
  font: 600 13px/1.4 Nunito, sans-serif;
  color: #4b5563;
}
.gr-cheat-punchline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  font: 600 13.5px/1.4 Nunito, sans-serif;
  color: #3730a3;
}

:root[data-theme="dark"] .gr-cheat-card {
  background: linear-gradient(165deg, #1c192c 0%, #201b33 60%, #171424 100%);
  border-color: #3a3258;
  box-shadow: 0 8px 0 #13101e;
}
:root[data-theme="dark"] .gr-cheat-title { color: #f5f3ff; }
:root[data-theme="dark"] .gr-cheat-subtitle { color: #94a3b8; }
:root[data-theme="dark"] .gr-cheat-visual { background: #26213c; border-color: #433966; }
:root[data-theme="dark"] .gr-cheat-visual code { color: #c4b5fd; }
:root[data-theme="dark"] .gr-cheat-rule-box { background: #292015; border-color: #6b4d1b; }
:root[data-theme="dark"] .gr-cheat-rule-text { color: #fde68a; }
:root[data-theme="dark"] .gr-cheat-box.bad { background: #2b161c; border-color: #5c242c; box-shadow: 0 4px 0 #1a0e12; }
:root[data-theme="dark"] .gr-cheat-box.good { background: #132b20; border-color: #1e5a3e; box-shadow: 0 4px 0 #0d1a14; }
:root[data-theme="dark"] .gr-cheat-ex.bad { color: #fca5a5; }
:root[data-theme="dark"] .gr-cheat-ex.good { color: #86efac; }
:root[data-theme="dark"] .gr-cheat-expl { color: #cbd5e1; }
:root[data-theme="dark"] .gr-cheat-punchline { background: #22203d; border-color: #3b376b; color: #c7d2fe; }

.btn.danger-soft { margin-top: 18px; background: #fff1f0; color: #d63a2f; box-shadow: 0 4px 0 #f4c5c5; }
.btn.danger-soft:disabled { opacity: 0.45; }

/* ---------- Audio: Słuchaj / Mów, zestawy, pakiety ---------- */
.au-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.au-mode { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 14px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 26px; cursor: pointer; text-align: center;
  background: linear-gradient(160deg, #e1edff, #c9dcff); box-shadow: 0 6px 0 #a9c3f5, 0 16px 22px -14px rgba(50, 90, 200, 0.6); transition: transform 0.15s, box-shadow 0.15s; }
.au-mode.speak { background: linear-gradient(160deg, #ffe3ee, #ffc9dc); box-shadow: 0 6px 0 #f2a6c2, 0 16px 22px -14px rgba(220, 60, 120, 0.55); }
.au-mode::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-18deg); animation: ht-shine 5.5s ease-in-out infinite; pointer-events: none; }
.au-mode.speak::after { animation-delay: 1.6s; }
.au-mode:hover:not(:disabled) { transform: translateY(-2px); }
.au-mode:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #a9c3f5; }
.au-mode:disabled { opacity: 0.55; cursor: default; }
.au-mode img { width: 84px; height: 84px; object-fit: contain; animation: fx-float 3s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(40, 60, 140, 0.3)); }
.au-mode.speak img { animation-delay: -1.2s; }
.au-mode b { font: 800 22px var(--display); color: #131d4c; }
.au-mode span { font: 700 12.5px Nunito, sans-serif; color: #55607e; }
.au-sets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.au-set { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 22px; background: #fff; border: 2px solid #ece9fb; box-shadow: 0 4px 0 #e6e2f8; animation: sx-up 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(var(--i) * 0.06s); }
.au-set.locked { opacity: 0.6; }
.au-set-ic { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; }
.au-set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-set-text b { font: 800 18px var(--display); color: #131d4c; }
.au-set-text small { font: 600 13px Nunito, sans-serif; color: #6f7590; }
.au-lock { font-size: 22px; }
.au-btns { display: inline-flex; gap: 8px; }
.au-pl { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid #d3e2ff; border-radius: 50%; background: #eef4ff; box-shadow: 0 4px 0 #c3d6fb; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.au-pl.mic { border-color: #ffd0e0; background: #fff0f5; box-shadow: 0 4px 0 #f6bcd1; }
.au-pl img { width: 30px; height: 30px; object-fit: contain; }
.au-pl:hover { transform: translateY(-2px); }
.au-pl:active { transform: translateY(3px); box-shadow: 0 1px 0 #c3d6fb; }
.au-pl:disabled { opacity: 0.4; }
.au-packs { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 10px; }
.au-packs::-webkit-scrollbar { display: none; }
.au-pack { position: relative; flex: 0 0 62%; max-width: 230px; scroll-snap-align: start; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 172px; padding: 14px; border-radius: 26px; background: color-mix(in srgb, var(--bg) 30%, #fff); border: 2px solid color-mix(in srgb, var(--bg) 55%, #fff); box-shadow: 0 5px 0 color-mix(in srgb, var(--bg) 50%, #fff); animation: sx-up 0.35s ease backwards; animation-delay: calc(var(--i) * 0.05s); }
.au-pack-text { display: flex; flex-direction: column; }
.au-pack-text b { font: 800 19px/1.15 var(--display); color: #131d4c; }
.au-pack-text small { font: 700 13px Nunito, sans-serif; color: #5b6580; }
.au-pack-img { position: absolute; right: 8px; top: 34px; width: 84px; height: 84px; object-fit: contain; opacity: 0.95; }
.au-pack .au-btns { position: relative; z-index: 1; }
.au-quiz { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding: 12px 14px; border-radius: 26px; background: linear-gradient(135deg, #d4f1f0, #cfe3ff); box-shadow: 0 5px 0 #b3d6e6; }
.au-quiz-img { width: 60px; height: 60px; object-fit: contain; }
.au-quiz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-quiz-text b { font: 800 19px var(--display); color: #0f4a66; }
.au-quiz-text small { font: 600 13px Nunito, sans-serif; color: #416b82; }
.au-quiz-go { padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; color: #0f6a8a; font: 800 15px var(--display); box-shadow: 0 4px 0 #a8cfe0; cursor: pointer; }
.au-quiz-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8cfe0; }
.au-quiz-go:disabled { opacity: 0.5; }

/* ---------- Mów: ćwiczenie wymowy ---------- */

.sk-img { width: 110px; height: 110px; object-fit: cover; border-radius: 28px; box-shadow: 0 10px 16px -8px rgba(40, 60, 120, 0.45); }

  
.sk-actions { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 22px 0 8px; }

@keyframes sk-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .au-mode::after,
.au-mode img,
.au-set,
.au-pack { animation: none; } }
:root[data-theme="dark"] .au-mode { background: linear-gradient(160deg, #22304d, #1c2540); box-shadow: 0 6px 0 #141a2e; border-color: #2e3a5a; }
:root[data-theme="dark"] .au-mode.speak { background: linear-gradient(160deg, #4a2436, #3a1c2c); box-shadow: 0 6px 0 #26111b; border-color: #5a2f44; }
:root[data-theme="dark"] .au-mode b,
:root[data-theme="dark"] .au-set-text b,
:root[data-theme="dark"] .au-pack-text b { color: #f1f0ff; }
:root[data-theme="dark"] .au-mode span,
:root[data-theme="dark"] .au-set-text small,
:root[data-theme="dark"] .au-pack-text small { color: #b8bed0; }
:root[data-theme="dark"] .au-set { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #17141f; }
:root[data-theme="dark"] .au-pack { background: color-mix(in srgb, var(--bg) 16%, #201d2a); border-color: color-mix(in srgb, var(--bg) 30%, #201d2a); box-shadow: 0 5px 0 #17141f; }
:root[data-theme="dark"] .au-quiz { background: linear-gradient(135deg, #1d3a3a, #1d2c4a); box-shadow: 0 5px 0 #141f2e; }
:root[data-theme="dark"] .au-quiz-text b { color: #a8e8f0; } :root[data-theme="dark"] .au-quiz-text small { color: #9fc1d4; }
:root[data-theme="dark"] .au-pl { background: #2a2f47; border-color: #3a4166; box-shadow: 0 4px 0 #17141f; }
:root[data-theme="dark"] .au-pl.mic { background: #47283a; border-color: #5f3a50; }

/* ---------- odtwarzacz Audio: Słuchaj / Mów, karuzela, timer, lista ---------- */
.ap { display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
.ap-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ap-title { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; }
.ap-title b { font: 800 20px var(--display); color: #131d4c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-title small { font: 700 13px Nunito, sans-serif; color: #7a8099; }
.ap-space { width: 46px; }
.ap-seg { display: flex; align-self: center; gap: 4px; padding: 4px; border-radius: 999px; background: #ece9fb; box-shadow: inset 0 2px 4px rgba(60, 40, 140, 0.12); }
.ap-seg button { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px 0 12px; border: 0; border-radius: 999px; background: transparent; font: 800 16px var(--display); color: #7a8099; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.ap-seg button img { width: 26px; height: 26px; object-fit: contain; filter: grayscale(0.6) opacity(0.7); transition: filter 0.2s; }
.ap-seg button.on { background: #fff; color: #131d4c; box-shadow: 0 3px 0 #d5cff2, 0 6px 12px -6px rgba(60, 40, 140, 0.4); }
.ap-seg button.on img { filter: none; }
.ap-prog { display: block; height: 6px; margin: 14px 12px 0; border-radius: 999px; background: #e6e2f8; overflow: hidden; }
.ap-prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8b5cff, #4f8ff0); transition: width 0.4s ease; }
.ap-stage { position: relative; height: 258px; margin: 8px -16px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ap-card { position: absolute; top: 50%; left: 50%; width: 206px; height: 206px; display: grid; place-items: center; border-radius: 38px; background: var(--tint, #E7E0FF); cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.3s; }
.ap-card.cur { z-index: 2; transform: translate(-50%, -50%); box-shadow: 0 9px 0 color-mix(in srgb, var(--tint, #E7E0FF) 70%, #6b5bd0), 0 22px 30px -14px rgba(70, 50, 150, 0.55); }
.ap-card.cur.enter { animation: ap-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
.ap-card.cur.live { animation: ap-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), fx-float 3.2s ease-in-out 0.5s infinite; }
.ap-card.prev,
.ap-card.next { width: 168px; height: 168px; opacity: 0.85; box-shadow: 0 6px 0 color-mix(in srgb, var(--tint, #E7E0FF) 70%, #6b5bd0); }
.ap-card.prev { transform: translate(calc(-50% - 178px), -50%) rotate(-7deg) scale(0.92); }
.ap-card.next { transform: translate(calc(-50% + 178px), -50%) rotate(7deg) scale(0.92); }
.ap-card .wa-img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(40, 30, 100, 0.25)); }
.ap-card .wa-emoji { font-size: 92px; }
.ap-card.prev .wa-emoji,
.ap-card.next .wa-emoji { font-size: 70px; }
.ap-text { min-height: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; text-align: center; }
.ap-en { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 38px/1.15 var(--display); color: #131d4c; overflow-wrap: anywhere; }
.ap-say { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #efeaff; color: #5a3fe0; cursor: pointer; box-shadow: 0 3px 0 #ddd5ff; }
.ap-say svg { width: 22px; height: 22px; }
.ap-en.letters span { display: inline-block; animation: pick-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.ap-en.letters span.ok { color: #2fa10a; } .ap-en.letters span.bad { color: #ef4a3a; text-decoration: underline wavy; text-underline-offset: 6px; }
.ap-pron { font: 700 16px Nunito, sans-serif; color: #7c62f0; }
.ap-pl { margin: 2px 0 0; min-height: 30px; font: 700 24px var(--display); color: #6f7590; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.ap-pl.on { opacity: 1; transform: none; }
.ap-status { margin: 6px 0 0; font: 700 15px Nunito, sans-serif; color: #7a8099; }
.ap-status.live { color: #ec4a90; font-size: 18px; font-weight: 800; animation: gm-blink 1s ease-in-out infinite; }
.ap-result { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 16px 6px 8px; border-radius: 999px; font: 800 15px Nunito, sans-serif; }
.ap-result b { padding: 2px 10px; border-radius: 999px; background: #fff; font: 800 20px var(--display); }
.ap-result.ok { background: #e2f8d8; color: #2a7d10; } .ap-result.close { background: #fff3d1; color: #9a5b00; } .ap-result.no { background: #ffe9e6; color: #c23a2f; }
.ap-heard { margin: 2px 0 0; font: 600 13px Nunito, sans-serif; color: #7a8099; }
.ap-self { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.ap-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding: 16px 0 6px; }
.ap-side { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; font: 800 12px Nunito, sans-serif; color: #7a8099; }
.ap-side img { width: 40px; height: 40px; object-fit: contain; transition: transform 0.2s; }
.ap-side:hover img { transform: scale(1.08) rotate(-6deg); }
.ap-side.on { color: #6143ff; }
.ap-side.on img { animation: fx-float 2.4s ease-in-out infinite; }
.ap-listic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: #efeaff; color: #5a3fe0; box-shadow: 0 3px 0 #ddd5ff; }
.ap-listic svg { width: 22px; height: 22px; }
.ap-ico { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid #e6e2f8; border-radius: 50%; background: #fff; color: #5a3fe0; box-shadow: 0 4px 0 #e6e2f8; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ap-ico svg { width: 22px; height: 22px; }
.ap-ico:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2f8; }
.ap-ico:disabled { opacity: 0.4; cursor: default; }
.ap-big,
.ap-big-gap { position: relative; flex-shrink: 0; width: 84px; height: 84px; }
.ap-big { display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: radial-gradient(circle at 32% 26%, #a985ff, #7a4bff 58%, #5a3fe0); box-shadow: 0 8px 0 #4a30c8, 0 16px 24px -10px rgba(97, 67, 255, 0.75); transition: transform 0.15s, box-shadow 0.15s; }
.ap-big svg { width: 38px; height: 38px; }
.ap-big.mic { background: radial-gradient(circle at 32% 26%, #ff9ec7, #f0488b 60%, #d02870); box-shadow: 0 8px 0 #a71d57, 0 16px 24px -10px rgba(240, 72, 139, 0.75); }
.ap-big.mic img { position: relative; z-index: 1; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(80, 0, 40, 0.35)); }
.ap-big:active { transform: translateY(5px); box-shadow: 0 3px 0 #4a30c8; }
.ap-big i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(240, 72, 139, 0.6); opacity: 0; }
.ap-big.on i { animation: sk-ring 1.4s ease-out infinite; }
.ap-big.on i + i { animation-delay: 0.7s; }
.ap-model { align-self: center; display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 8px 18px 8px 12px; border: 2px solid #d3e2ff; border-radius: 999px; background: #eef4ff; box-shadow: 0 4px 0 #c3d6fb; font: 800 15px var(--display); color: #2f5fb0; cursor: pointer; }
.ap-model img { width: 28px; height: 28px; object-fit: contain; }
.ap-model:active { transform: translateY(3px); box-shadow: 0 1px 0 #c3d6fb; }
.ap-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 10px; }
.ap-min { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border: 2px solid #e6e2f8; border-radius: 16px; background: #fff; cursor: pointer; color: #2b3a7a; box-shadow: 0 3px 0 #e6e2f8; }
.ap-min b { font: 800 20px var(--display); } .ap-min small { font: 700 11px Nunito, sans-serif; color: #7a8099; }
.ap-min.on { background: #6143ff; border-color: #6143ff; color: #fff; box-shadow: 0 3px 0 #4a30c8; } .ap-min.on small { color: #e0d8ff; }
.ap-list .ask-box { max-height: 82vh; display: flex; flex-direction: column; }
.ap-list h2 small { font: 800 14px Nunito, sans-serif; color: #7a8099; }
.ap-rows { flex: 1; overflow-y: auto; margin: 8px -6px; padding: 0 6px; display: flex; flex-direction: column; gap: 6px; }
.ap-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 16px; cursor: pointer; }
.ap-row:hover { background: #f4f1ff; }
.ap-row.cur { background: #efeaff; box-shadow: inset 0 0 0 2px #cfc6ff; }
.ap-row-art { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: var(--tint, #eee); }
.ap-row-art .wa-img { width: 32px; height: 32px; object-fit: contain; } .ap-row-art .wa-emoji { font-size: 26px; }
.ap-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.ap-row-text b { font: 800 17px var(--display); color: #131d4c; } .ap-row-text small { font: 600 13px Nunito, sans-serif; color: #7a8099; }
.ap-row-say { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #efeaff; color: #5a3fe0; cursor: pointer; }
.ap-row-say svg { width: 20px; height: 20px; }
.ap-more { margin: 8px 0; text-align: center; font: 700 13px Nunito, sans-serif; color: #7a8099; }
@keyframes ap-in { from { opacity: 0; transform: translate(calc(-50% + 90px), -50%) scale(0.85) rotate(6deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .ap-card,
.ap-card.cur.live,
.ap-card.cur.enter,
.ap-side.on img,
.ap-big.on i,
.ap-status.live { animation: none; } }
:root[data-theme="dark"] .ap-title b,
:root[data-theme="dark"] .ap-en,
:root[data-theme="dark"] .ap-row-text b { color: #f1f0ff; }
:root[data-theme="dark"] .ap-seg { background: #26232f; } :root[data-theme="dark"] .ap-seg button.on { background: #3a3550; color: #f1f0ff; box-shadow: 0 3px 0 #17141f; }
:root[data-theme="dark"] .ap-prog { background: #2e2a3d; }
:root[data-theme="dark"] .ap-ico,
:root[data-theme="dark"] .ap-min { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .ap-listic,
:root[data-theme="dark"] .ap-say,
:root[data-theme="dark"] .ap-row-say { background: #2a2733; color: #b9a4ff; box-shadow: none; }
:root[data-theme="dark"] .ap-model { background: #26304d; border-color: #3a4166; box-shadow: 0 4px 0 #17141f; color: #b9cbff; }
:root[data-theme="dark"] .ap-row:hover { background: #26232f; } :root[data-theme="dark"] .ap-row.cur { background: #2f2a4a; box-shadow: inset 0 0 0 2px #4a4380; }

/* ---------- powiadomienia (toast) w stylu aplikacji ---------- */
.toast,
.toast.has-undo { display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 10px; border: 2px solid #e6e2f8; border-radius: 24px; background: #fff; color: #131d4c; font: 800 16px Nunito, sans-serif; box-shadow: 0 5px 0 #e6e2f8, 0 18px 30px -12px rgba(50, 30, 130, 0.45); animation: toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.toast[hidden],
.toast.has-undo[hidden] { display: none; }
.toast:not(:has(.toast-ic)) { padding-left: 20px; }
.toast-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #ece6ff); box-shadow: inset 0 -3px 0 rgba(90, 63, 224, 0.12), 0 3px 6px -2px rgba(70, 50, 150, 0.35); font-size: 22px; }
.toast-ic img { width: 28px; height: 28px; object-fit: contain; border-radius: 0; }
.toast-undo,
.toast.has-undo .toast-undo { background: #efeaff; color: #5a3fe0; box-shadow: 0 3px 0 #ddd5ff; }
.toast-undo:hover { background: #e4dcff; color: #4a30c8; }
.toast-time { background: linear-gradient(90deg, #8b5cff, #4f8ff0); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(0.92); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .toast.has-undo { background: #2a2733; border-color: #3a3550; color: #f1f0ff; box-shadow: 0 5px 0 #17141f, 0 18px 30px -12px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .toast-ic { background: radial-gradient(circle at 30% 25%, #3a3550, #2a2540); box-shadow: none; }
:root[data-theme="dark"] .toast-undo { background: #3a3550; color: #d8ccff; }
.ap-self { flex-direction: row; gap: 10px; margin-top: 8px; }
.ap-self .pick-go { flex: 1; height: 50px; font-size: 18px; }
.ap-self .gm-back { flex: 1; height: 50px; margin: 0; font-size: 15px; }
.ap-big.mic { background: radial-gradient(circle at 32% 24%, #fff, #ffdbe9 62%, #ffc2d9); box-shadow: 0 8px 0 #e58fb3, 0 16px 24px -10px rgba(240, 72, 139, 0.6); }
.ap-big.mic:active { box-shadow: 0 3px 0 #e58fb3; }
.ap-big.mic img { width: 60px; height: 60px; }
:root[data-theme="dark"] .ap-big.mic { background: radial-gradient(circle at 32% 24%, #5a3a4d, #4a2a3d 62%, #3a2030); box-shadow: 0 8px 0 #1f0f18, 0 16px 24px -10px rgba(0, 0, 0, 0.6); }
/* ---------- ekran główny: Gra dnia, kafelek Gramatyka, Audio w skrócie ---------- */
.gm-mini { position: relative; }
.gm-daily { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #ffbf3d); color: #7a4a00; font: 800 11px Nunito, sans-serif; font-style: normal; box-shadow: 0 3px 0 #d99a1c; animation: fx-float 2.6s ease-in-out infinite; }
.gm-daily.inline { position: static; display: inline-block; margin-top: 6px; animation: none; }
.hm-tasks.gram { border-color: #cfdcff; background: linear-gradient(135deg, #f1f5ff 0%, #e4ecff 50%, #efe9ff 100%); box-shadow: 0 6px 0 #bccbf3, 0 16px 24px -16px rgba(50, 80, 190, 0.55); }
.hm-tasks.gram:hover { box-shadow: 0 8px 0 #bccbf3, 0 20px 28px -16px rgba(50, 80, 190, 0.55); }
.hm-tasks.gram:active { box-shadow: 0 2px 0 #bccbf3; }
.hm-tasks.gram .ht-art { background: radial-gradient(circle at 30% 24%, #fff, #d6e2ff); box-shadow: inset 0 -4px 0 rgba(50, 80, 190, 0.12), 0 8px 14px -8px rgba(50, 80, 190, 0.6); }
.hm-tasks.gram .ht-pills em { border-color: #c5d5fb; color: #2f5fb0; }
.hm-tasks.gram .ht-go { background: linear-gradient(180deg, #5b8cff, #3d6bea); box-shadow: 0 4px 0 #2a4fb8; }
.hm-tasks.gram + .hm-tasks { margin-top: 12px; }
.au-modes.home { margin-bottom: 12px; }
.au-modes.home .au-mode { padding: 10px 8px; }
.au-modes.home .au-mode img { width: 64px; height: 64px; }
:root[data-theme="dark"] .hm-tasks.gram { border-color: #2a3a63; background: linear-gradient(135deg, #1b2136, #1d2440 55%, #241f3d); box-shadow: 0 6px 0 #14182a, 0 16px 24px -16px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .hm-tasks.gram .ht-art { background: radial-gradient(circle at 30% 24%, #2c3a63, #1f2a4a); }
:root[data-theme="dark"] .hm-tasks.gram .ht-pills em { background: #232c48; border-color: #34426e; color: #a8c0ff; }
@media (prefers-reduced-motion: reduce) { .gm-daily { animation: none; } }

/* ---------- Test poziomu ---------- */
.pl-top { margin-bottom: 14px; }
.pl-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px 28px; border-radius: 30px; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 0 #e6e2f8, 0 18px 30px -18px rgba(70, 50, 150, 0.5); text-align: center; animation: sx-up 0.35s ease backwards; }
.pl-q { margin: 0; font: 800 12px Nunito, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #7c62f0; }
.pl-word { display: flex; align-items: center; gap: 10px; font: 800 40px/1.15 var(--display); color: #131d4c; overflow-wrap: anywhere; }
.pl-opts { display: grid; gap: 10px; margin-top: 14px; }
.pl-opt { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 14px 8px 10px; border: 2px solid #e6e2f8; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #e6e2f8; text-align: left; cursor: pointer; font: 800 18px Nunito, sans-serif; color: #2b3a7a; animation: sx-up 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: calc(0.1s + var(--i) * 0.05s); transition: transform 0.15s, box-shadow 0.15s, background 0.2s, border-color 0.2s, opacity 0.2s; }
.pl-opt kbd { flex-shrink: 0; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: #f0edff; color: #6a4cff; font: 800 13px Nunito, sans-serif; box-shadow: inset 0 -2px 0 #ddd5ff; }
.pl-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: #cfc6ff; box-shadow: 0 7px 0 #cfc6ff; }
.pl-opt:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #e6e2f8; }
.pl-opt:disabled { cursor: default; }
.pl-opt.ok { border-color: #7bd14a; background: linear-gradient(180deg, #f4fff0, #e2f8d8); box-shadow: 0 5px 0 #a7e3bb; animation: opt-ok 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pl-opt.ok kbd { background: #3fc40f; color: #fff; box-shadow: none; }
.pl-opt.bad { border-color: #f08a8a; background: #fff1f0; box-shadow: 0 5px 0 #f4c5c5; animation: opt-shake 0.4s ease; }
.pl-opt.bad kbd { background: #f0483a; color: #fff; box-shadow: none; }
.pl-opt.dim { opacity: 0.45; }
.pl-dk { display: block; margin: 14px auto 0; padding: 10px 22px; border: 0; border-radius: 999px; background: transparent; color: #7a8099; font: 800 15px Nunito, sans-serif; cursor: pointer; }
.pl-dk:hover:not(:disabled) { background: #f0edff; color: #5a3fe0; }
.pl-dk:disabled { opacity: 0.4; }
.pl-mascot { width: 130px; height: 130px; object-fit: contain; animation: fx-float 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(80, 50, 180, 0.35)); }
.pl-lvl { display: inline-block; padding: 0 14px; border-radius: 16px; background: linear-gradient(180deg, #8b5cff, #6143ff); color: #fff; box-shadow: 0 4px 0 #4a30c8; }
.pl-sub { margin: 4px 0 10px; font: 700 15px Nunito, sans-serif; color: #7a8099; }
.pl-bars { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 6px 0 14px; }
.pl-bar { display: grid; grid-template-columns: 32px 1fr 44px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); font: 800 14px Nunito, sans-serif; color: #55607e; }
.pl-bar.me { background: #efeaff; box-shadow: inset 0 0 0 2px #cfc6ff; color: #4a30c8; }
.pl-bar span { height: 10px; border-radius: 999px; background: #e6e2f8; overflow: hidden; } .pl-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #38d16b, #8bd23a); }
.pl-bar small { text-align: right; font: 800 13px Nunito, sans-serif; }
.pl-none { margin-top: 4px; padding: 8px; border: 0; background: none; color: #7a8099; font: 700 14px Nunito, sans-serif; cursor: pointer; }
.pl-banner { position: relative; display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 14px 12px 10px; border-radius: 26px; background: linear-gradient(135deg, #efe9ff, #dfe9ff); border: 2px solid #d9d0ff; box-shadow: 0 6px 0 #c9bcf5, 0 16px 24px -16px rgba(90, 63, 224, 0.55); overflow: hidden; }
.pl-banner > img { width: 62px; height: 62px; flex-shrink: 0; object-fit: contain; animation: fx-float 3s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(80, 50, 180, 0.35)); }
.pl-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-banner-text b { font: 800 19px var(--display); color: #131d4c; } .pl-banner-text small { font: 600 13px/1.3 Nunito, sans-serif; color: #5b6580; }
.pl-banner-btns { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pl-go { padding: 9px 16px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #7a4bff, #6143ff); color: #fff; font: 800 15px var(--display); box-shadow: 0 4px 0 #4a30c8; cursor: pointer; }
.pl-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a30c8; }
.pl-later { border: 0; background: none; color: #7a8099; font: 700 12px Nunito, sans-serif; cursor: pointer; padding: 4px; }
@media (prefers-reduced-motion: reduce) { .pl-mascot,
.pl-banner > img,
.pl-card,
.pl-opt { animation: none; } }
:root[data-theme="dark"] .pl-card,
:root[data-theme="dark"] .pl-opt { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 5px 0 #17141f; color: #d4d7e5; }
:root[data-theme="dark"] .pl-word,
:root[data-theme="dark"] .pl-banner-text b { color: #f1f0ff; }
:root[data-theme="dark"] .pl-banner { background: linear-gradient(135deg, #2a2545, #1f2a4a); border-color: #3a3560; box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .pl-bar { background: #26232f; color: #b8bed0; } :root[data-theme="dark"] .pl-bar.me { background: #2f2a4a; color: #d8ccff; }

/* ---------- Statystyki ---------- */
.hm-tasks.stats { border-color: #ffe0b8; background: linear-gradient(135deg, #fff8ec 0%, #ffefd9 50%, #fff0e3 100%); box-shadow: 0 6px 0 #f3d3a4, 0 16px 24px -16px rgba(200, 120, 20, 0.5); margin-bottom: 12px; }
.hm-tasks.stats:hover { box-shadow: 0 8px 0 #f3d3a4, 0 20px 28px -16px rgba(200, 120, 20, 0.5); }
.hm-tasks.stats:active { box-shadow: 0 2px 0 #f3d3a4; }
.hm-tasks.stats .ht-art { background: radial-gradient(circle at 30% 24%, #fff, #ffe6c2); box-shadow: inset 0 -4px 0 rgba(200, 120, 20, 0.12), 0 8px 14px -8px rgba(200, 120, 20, 0.6); }
.hm-tasks.stats .ht-pills em { border-color: #f5d7a6; color: #9a5b00; }
.hm-tasks.stats .ht-go { background: linear-gradient(180deg, #ffb020, #f08c00); box-shadow: 0 4px 0 #b86a00; }
.st-card { padding: 16px 14px 14px; }
.st-bars { display: flex; align-items: flex-end; gap: 5px; height: 140px; }
.st-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.st-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.st-bar i { display: block; width: 100%; min-height: 3px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #a985ff, #6143ff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); animation: st-grow 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) backwards; transform-origin: bottom; }
.st-col.zero .st-bar i { background: #e6e2f8; box-shadow: none; }
.st-col.today .st-bar i { background: linear-gradient(180deg, #ffd166, #ff9a2e); }
.st-col b { font: 800 11px Nunito, sans-serif; color: #7a8099; } .st-col.today b { color: #e0790a; }
.st-col small { font: 700 10px Nunito, sans-serif; color: #9aa0b8; }
.st-bars.weeks { height: 130px; }
.st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.st-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 22px; background: #fff; border: 2px solid #ece9fb; box-shadow: 0 4px 0 #e6e2f8; text-align: center; }
.st-tile b { font: 800 30px var(--display); color: #131d4c; } .st-tile b small { font-size: 15px; color: #7a8099; }
.st-tile span { font: 700 13px Nunito, sans-serif; color: #6f7590; }
.st-tile small.up { color: #2fa10a; font: 800 11px Nunito, sans-serif; } .st-tile small.down { color: #e0525a; font: 800 11px Nunito, sans-serif; }
.st-tile.ring { background: conic-gradient(#4cd137 calc(var(--p) * 1%), #e6e2f8 0); position: relative; }
.st-tile.ring::before { content: ''; position: absolute; inset: 8px; border-radius: 16px; background: #fff; }
.st-tile.ring > * { position: relative; }
.st-lv { display: grid; grid-template-columns: 34px 1fr 76px; align-items: center; gap: 10px; padding: 5px 0; }
.st-lv b { font: 800 16px var(--display); color: #131d4c; } .st-lv small { text-align: right; font: 700 13px Nunito, sans-serif; color: #6f7590; }
.st-val { font: 800 18px var(--display); color: #5a3fe0; }
@keyframes st-grow { from { transform: scaleY(0.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .st-bar i { animation: none; } }
:root[data-theme="dark"] .hm-tasks.stats { border-color: #4a3a22; background: linear-gradient(135deg, #2a2418, #2c2420 55%, #2a2028); box-shadow: 0 6px 0 #17141f, 0 16px 24px -16px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .hm-tasks.stats .ht-art { background: radial-gradient(circle at 30% 24%, #4a3a22, #3a2c18); }
:root[data-theme="dark"] .hm-tasks.stats .ht-pills em { background: #3a3220; border-color: #6a5a2a; color: #ffd166; }
:root[data-theme="dark"] .st-tile { background: #201d2a; border-color: #2e2a3d; box-shadow: 0 4px 0 #17141f; }
:root[data-theme="dark"] .st-tile.ring::before { background: #201d2a; }
:root[data-theme="dark"] .st-tile b, :root[data-theme="dark"] .st-lv b { color: #f1f0ff; }
:root[data-theme="dark"] .st-col.zero .st-bar i { background: #2e2a3d; }

/* ---------- Słowik w komunikatach ---------- */
.sl-note { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 10px 16px 10px 8px; border-radius: 26px; background: linear-gradient(135deg, #f3eeff, #e6efff); border: 2px solid #ddd3ff; box-shadow: 0 5px 0 #cfc3f5; text-align: left; }
.sl-note img { width: 76px; height: 76px; flex-shrink: 0; object-fit: contain; animation: fx-float 3s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(80, 50, 180, 0.3)); }
.sl-note b { display: block; font: 800 18px var(--display); color: #131d4c; }
.sl-note small { display: block; margin-top: 2px; font: 600 13.5px/1.35 Nunito, sans-serif; color: #5b6580; }
.toast-ic:has(img[src*="mascot"]) { width: 48px; height: 48px; margin: -6px 0 -6px -2px; background: none; box-shadow: none; }
.toast-ic:has(img[src*="mascot"]) img { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(80, 50, 180, 0.35)); }
@media (prefers-reduced-motion: reduce) { .sl-note img { animation: none; } }
:root[data-theme="dark"] .sl-note { background: linear-gradient(135deg, #2a2545, #1f2a4a); border-color: #3a3560; box-shadow: 0 5px 0 #17141f; }
:root[data-theme="dark"] .sl-note b { color: #f1f0ff; } :root[data-theme="dark"] .sl-note small { color: #b8bed0; }
.toast, .toast.has-undo { width: max-content; max-width: calc(100% - 32px); }

/* ---------- Ćwiczenia z gramatyki ---------- */
.gp-crumb { display: flex; align-items: center; gap: 8px; margin: 2px 2px 10px; font: 700 13px Nunito, sans-serif; color: #7a8099; }
.gp-crumb-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-crumb b { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; background: #efeaff; color: #5a3fe0; font-weight: 800; }
.gp-card { text-align: center; }
.gp-sentence { margin: 14px 2px 4px; font: 800 24px/1.55 var(--display); color: #131d4c; }
.gp-gap { display: inline-block; min-width: 3.2em; padding: 0 8px; margin: 0 2px; border-bottom: 4px solid #a985ff; border-radius: 8px 8px 0 0; background: rgba(97, 67, 255, 0.07); color: #6143ff; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.gp-gap.ok { border-color: var(--green); background: var(--ok-bg); color: #15803d; animation: gp-gap-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gp-gap.bad { border-color: var(--bad); background: var(--bad-bg); color: #c92a2a; animation: opt-shake 0.45s ease; }
@keyframes gp-gap-pop { 40% { transform: scale(1.14); } }
.gp-word { display: block; margin-top: 10px; font: 700 13px Nunito, sans-serif; color: #7a8099; }
.gp-sub { margin: 12px 0 2px; font: 700 15px Nunito, sans-serif; color: #6f7590; }
.gp-wrong { margin: 10px 0 0; padding: 10px 14px; border: 2px dashed #f4c5c5; border-radius: 18px; background: var(--bad-bg); }
.gp-wrong small { display: block; font: 800 12px Nunito, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #c92a2a; }
.gp-wrong b { display: block; margin-top: 2px; font: 800 20px/1.35 var(--display); color: #9b1c1c; text-decoration: line-through; text-decoration-color: rgba(201, 42, 42, 0.5); }
.gp-pl-q { margin-top: 12px; }
.gp-pl-q .pl-line { font: 800 22px/1.35 var(--display); color: #131d4c; }
.gp-opts-sent .opt { align-items: flex-start; padding: 14px 16px; line-height: 1.35; }
.gp-opts-sent .opt kbd { margin-top: 1px; }
.gp-card.fx-in .gp-sentence, .gp-card.fx-in .gp-wrong, .gp-card.fx-in .gp-sub { animation: q-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* układanie zdań z kafelków: mniejsze niż przy literach */
.gp-build .bw-slots { gap: 6px 8px; min-height: 52px; margin: 14px 0 20px; justify-content: flex-start; }
.gp-build .bw-word { min-height: 38px; padding: 4px 9px; border-bottom-width: 3px; font-size: 19px; }
.gp-build .bw-tiles { gap: 9px; }
.gp-build .bw-tile { min-width: 0; height: 46px; padding: 0 14px; border-radius: 15px; font-size: 19px; box-shadow: 0 4px 0 #e4e1f2; }
.gp-build .bw-tile:active:not(:disabled) { box-shadow: 0 2px 0 #e4e1f2; transform: translateY(2px); }
.gp-build .bw-back { height: 46px; min-width: 50px; }

/* okienko po odpowiedzi */
.gp-right { margin: 2px 0 8px; font: 700 15px Nunito, sans-serif; color: #11724a; }
.gp-right b { font-family: var(--display); font-size: 18px; }
.gp-full { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 6px; font: 800 19px/1.35 var(--display); color: #131d4c; }
.gp-full .icon-btn { flex-shrink: 0; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 28px no-repeat; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); }
.gp-full .icon-btn svg { display: none; }
.gp-pl { margin: 0 0 6px; font: 600 14px/1.4 Nunito, sans-serif; color: #6f7590; }
.gp-pl s { color: #b3554f; text-decoration-color: rgba(201, 42, 42, 0.5); }
.gp-expl { margin: 8px 0 2px; padding: 9px 12px; border-radius: 14px; background: rgba(97, 67, 255, 0.07); font: 600 14px/1.45 Nunito, sans-serif; color: #4a4f6a; text-align: left; }
.fb-sheet .gp-word { margin-top: 8px; }

/* wynik sesji */
.gp-sum .gp-mascot { width: 128px; height: 128px; }
.gp-stars-big { position: relative; display: flex; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.gp-star { width: 62px; height: 62px; }
.gp-star svg { width: 100%; height: 100%; fill: #d9d5ec; stroke: #c6c1de; stroke-width: 1.2; stroke-linejoin: round; }
.gp-star.on svg { fill: #ffc83d; stroke: #e39a10; filter: drop-shadow(0 6px 6px rgba(220, 140, 20, 0.45)); }
.gp-star.on { animation: gp-star-pop 0.7s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.5s + var(--i) * 0.28s) backwards; }
.gp-star:not(.on) { animation: fx-fade-up 0.5s ease calc(0.5s + var(--i) * 0.28s) backwards; }
.gp-star:nth-child(2) { margin-top: -10px; }
@keyframes gp-star-pop { 0% { opacity: 0; transform: scale(0) rotate(-40deg); } 65% { opacity: 1; transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.gp-sum-sub { position: relative; margin: 2px 0 10px; font: 800 15px Nunito, sans-serif; color: #5a3fe0; }
.gp-sum-note { position: relative; margin: 10px 4px 0; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); font: 700 13px/1.4 Nunito, sans-serif; color: #6f7590; }
.gp-sum-note.ok { background: rgba(34, 197, 94, 0.14); color: #11724a; }
.gp-miss-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(97, 67, 255, 0.1); }
.gp-miss-row:first-of-type { border-top: 0; }
.gp-miss-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gp-miss-main b { font: 800 16px/1.35 var(--display); color: #131d4c; }
.gp-miss-main span { font: 600 13px/1.4 Nunito, sans-serif; color: #6f7590; }
.gp-miss-row .icon-btn { flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 30px no-repeat; filter: drop-shadow(0 3px 4px rgba(40, 70, 140, 0.22)); }
.gp-miss-row .icon-btn svg { display: none; }
.gp-back-link { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 0; background: transparent; font: 800 16px Nunito, sans-serif; color: #6f7590; cursor: pointer; }
.gp-back-link:hover { color: #5a3fe0; }

/* gwiazdki przy modułach */
.gr-stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; letter-spacing: 1px; }
.gr-stars i { font-style: normal; color: #d5d1e6; }
.gr-stars i.on { color: #ffb020; text-shadow: 0 1px 0 rgba(180, 100, 0, 0.35); }
.gr-stars.sm { font-size: 13px; }
.gr-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* przycisk „Ćwicz” na ekranie modułu (u góry i karta na dole) */
.gp-top-cta { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 12px 16px; border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 20px; background: linear-gradient(135deg, #fff, var(--t)); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 26%, #fff); cursor: pointer; font-family: inherit; text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.gp-top-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 30%, #fff); }
.gp-top-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 26%, #fff); }
.gp-top-ic { font-size: 22px; }
.gp-top-cta b { flex: 1; font: 800 17px var(--display); color: #131d4c; }
.gp-top-cta small { font: 700 12px Nunito, sans-serif; color: #7a8099; }
.gp-top-cta i { font-style: normal; font-size: 26px; font-weight: 800; color: var(--c); }
.gp-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; padding: 18px 16px 16px; border: 2px solid color-mix(in srgb, var(--c) 24%, #fff); border-radius: 26px; background: linear-gradient(135deg, #fff, var(--t)); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 22%, #fff); }
.gp-cta-art { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(60, 50, 140, 0.28)); animation: fx-float 3.2s ease-in-out infinite; }
.gp-cta-text { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 3px; }
.gp-cta-text b { font: 800 20px var(--display); color: #131d4c; }
.gp-cta-text span { font: 600 13.5px/1.4 Nunito, sans-serif; color: #6f7590; }
.gp-cta-rec { display: flex; align-items: center; gap: 6px; }
.gp-cta .pick-go { flex-basis: 100%; height: 58px; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .gp-star, .gp-star.on, .gp-gap, .gp-cta-art { animation: none !important; } }

/* ---------- Gramatyka: moduł, lista i ćwiczenia — ikony 3D, tła sekcji, animacje ---------- */
.gr-read { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 4px; background: rgba(97, 67, 255, 0.08); pointer-events: none; }
.gr-read i { display: block; width: 0; height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #7be835, #3fc40f); box-shadow: 0 0 10px rgba(80, 200, 20, 0.6); }

/* nagłówek modułu: ten sam hero co na liście, mniejszy */
.gr-hero { padding-bottom: 16px; }
.gr-hero-n { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 0 rgba(30, 40, 90, 0.1); color: var(--c); font: 800 13px Nunito, sans-serif; animation: pick-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards; }
.gr-hero-sp { width: 50px; }
.gr-hero .cx-art { height: 92px; }
.gr-hero .cx-art img { width: 88px; height: 88px; }
.gr-hero .cx-title { margin: 2px 6px 10px; font-size: 24px; }
.gr-hero .cx-chips { margin: 0; }
.gr-hero .cx-chips .gr-stars { margin: 0 2px; }

/* sekcje treści: kafelki z ikoną 3D i własnym kolorem */
.gr-secs { display: flex; flex-direction: column; gap: 14px; }
.gr-sec { position: relative; overflow: hidden; padding: 14px 16px 12px; border: 2px solid color-mix(in srgb, var(--sc) 22%, #fff); border-radius: 26px; background: linear-gradient(160deg, #fff 55%, var(--st)); box-shadow: 0 6px 0 color-mix(in srgb, var(--sc) 20%, #fff), 0 18px 26px -20px color-mix(in srgb, var(--sc) 55%, transparent); }
.gr-sec.pre { opacity: 0; transform: translateY(26px) scale(0.97); }
.gr-sec.in { animation: gr-sec-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.07s) backwards; }
@keyframes gr-sec-in { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
.gr-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.gr-sec-ic { flex-shrink: 0; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 19px; background: radial-gradient(circle at 30% 24%, #fff, color-mix(in srgb, var(--st) 80%, #fff)); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--sc) 14%, transparent), 0 8px 14px -8px color-mix(in srgb, var(--sc) 65%, transparent); }
.gr-sec-ic img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(40, 50, 110, 0.3)); }
.gr-sec.in .gr-sec-ic img { animation: fx-hop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards; }
.gr-sec-t { flex: 1; min-width: 0; }
.gr-sec-t h4 { margin: 0; padding: 0; border: 0; font: 800 18px/1.2 var(--display); color: #131d4c; }
.gr-sec-t small { display: block; margin-top: 2px; font: 700 12px Nunito, sans-serif; color: color-mix(in srgb, var(--sc) 78%, #444); }
.gr-sec-n { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sc); color: #fff; font: 800 13px var(--display); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 65%, #000); }
.gr-sec .gr-body { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.gr-sec .gr-body > :first-child { margin-top: 4px; }
.gr-sec.s2 li > b:first-child { display: inline-block; padding: 0 9px; border-radius: 999px; background: var(--sc); color: #fff; font: 800 12.5px/1.6 Nunito, sans-serif; }
.gr-sec .gr-table { margin: 10px 0; background: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--sc) 18%, #fff); }
.gr-mk { width: 1.2em; height: 1.2em; margin: 0 1px; vertical-align: -0.22em; object-fit: contain; }
.gr-sec.s5 ul { padding-left: 0; list-style: none; }
.gr-trap { position: relative; margin: 10px 0; padding: 11px 12px 11px 46px; border: 2px solid #ffd5d5; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #ffd5d5; }
.gr-trap::before { content: '!'; position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #ff8a8a, #e5484d); box-shadow: 0 3px 0 #b5292e; color: #fff; font: 800 15px var(--display); }
.gr-blank { display: inline-block; width: 3.2em; height: 1em; margin: 0 2px; border-bottom: 3px solid var(--sc); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--sc) 10%, transparent); vertical-align: -0.12em; }
.gr-sec.s6 ol { counter-reset: q; padding-left: 0; list-style: none; }
.gr-sec.s6 ol > li { position: relative; counter-increment: q; margin: 9px 0; padding: 11px 12px 11px 50px; border: 2px solid color-mix(in srgb, var(--sc) 22%, #fff); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 18%, #fff); }
.gr-sec.s6 ol > li::before { content: counter(q); position: absolute; left: 11px; top: 50%; width: 28px; height: 28px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 70%, #fff), var(--sc)); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 65%, #000); color: #fff; font: 800 14px var(--display); }
.gr-sec details { margin: 12px 0 4px; padding: 10px 14px; border: 2px dashed color-mix(in srgb, var(--sc) 38%, #fff); border-radius: 18px; background: #fff; }
.gr-sec summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.gr-sec summary::-webkit-details-marker { display: none; }
.gr-sum-ic { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(40, 50, 110, 0.3)); }
.gr-sec details[open] .gr-sum-ic { animation: fx-wiggle 0.6s ease; }
.gr-say { float: left; width: 36px; height: 36px; margin: 0 8px 2px 0; padding: 0; border: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 30px no-repeat; filter: drop-shadow(0 3px 3px rgba(40, 70, 140, 0.25)); cursor: pointer; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gr-say svg { display: none; }
.gr-say:hover { transform: scale(1.14) rotate(-6deg); }
.gr-say:active { transform: scale(0.94); }

/* lista modułów: numer jako kafelek 3D, zaliczone — ikona z „ptaszkiem” */
.gr-num { position: relative; overflow: hidden; width: 46px; height: 46px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 68%, #fff), var(--c)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gr-num::after { content: ''; position: absolute; left: 6px; right: 6px; top: 3px; height: 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.38); }
.gr-row:hover .gr-num { transform: rotate(-6deg) scale(1.07); }
.gr-row.done .gr-num { border: 2px solid #b8ecc7; background: linear-gradient(180deg, #fff, #dff8e6); box-shadow: 0 4px 0 #9bdcaf; }
.gr-row.done .gr-num::after { display: none; }
.gr-num-ic { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(20, 120, 50, 0.35)); animation: fx-hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards; }
.gr-lock-ic { position: relative; z-index: 1; width: 22px; height: 22px; }
.gr-trainer-badge .gr-lock-ic { width: 15px; height: 15px; vertical-align: -2px; }

/* przycisk „Ćwicz” nad treścią */
.gp-top-cta { position: relative; overflow: hidden; }
.gp-top-cta::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); animation: go-shine 4.5s ease-in-out 1.8s infinite; pointer-events: none; }
.gp-top-ic { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(60, 50, 140, 0.3)); animation: fx-float 3s ease-in-out infinite; }

/* ćwiczenia: ikony przy typie zadania i w okienkach */
.gp-card > .badge::before { display: none; }
.gp-badge-ic { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 50, 140, 0.3)); }
.gp-mini-ic { width: 20px; height: 20px; margin-right: 3px; vertical-align: -5px; object-fit: contain; }
.gp-expl { display: flex; align-items: flex-start; gap: 8px; }
.gp-expl .gp-mini-ic { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; }
.gp-word .gp-mini-ic { width: 16px; height: 16px; vertical-align: -3px; }
.gp-sum-note .gp-mini-ic, .gp-sum-sub .gp-mini-ic { width: 18px; height: 18px; vertical-align: -4px; }

/* karta Cheat-Code: ikony 3D zamiast emoji */
.gr-cheat-rule-icon img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(150, 100, 0, 0.35)); }
.gr-cheat-box-tag img { width: 20px; height: 20px; margin-right: 4px; vertical-align: -5px; object-fit: contain; }
.gr-cheat-punchline span img { width: 26px; height: 26px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) { .gr-sec.in, .gr-sec.in .gr-sec-ic img, .gr-num-ic, .gp-top-ic, .gp-top-cta::after, .gr-hero-n { animation: none; } .gr-sec.pre { opacity: 1; transform: none; } }
:root[data-theme="dark"] .gr-sec { border-color: color-mix(in srgb, var(--sc) 30%, #2e2a3d); background: linear-gradient(160deg, #201d2a 55%, color-mix(in srgb, var(--sc) 16%, #201d2a)); box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .gr-sec-t h4 { color: #f1f0ff; }
:root[data-theme="dark"] .gr-sec-ic { background: color-mix(in srgb, var(--sc) 24%, #2a2638); }
:root[data-theme="dark"] .gr-trap, :root[data-theme="dark"] .gr-sec.s6 ol > li, :root[data-theme="dark"] .gr-sec details, :root[data-theme="dark"] .gr-sec .gr-table { background: #262234; border-color: color-mix(in srgb, var(--sc) 30%, #2e2a3d); box-shadow: 0 3px 0 #17141f; }
:root[data-theme="dark"] .gr-hero-n { background: rgba(32, 29, 42, 0.92); }
:root[data-theme="dark"] .gr-row.done .gr-num { background: linear-gradient(180deg, #2a3a2f, #1f2c24); border-color: #2f6b45; box-shadow: 0 4px 0 #17141f; }
.gr-say { float: none; position: absolute; left: 8px; top: 7px; margin: 0; }
.gr-sec.s4 td:first-child { position: relative; padding-left: 52px; text-align: left; }
.gr-sec.s4 td:first-child b { display: block; text-align: left; }
.gp-top-cta b { white-space: nowrap; }
@media (max-width: 420px) { .gp-top-cta small { display: none; } }
.gr-sec.s4 td:first-child { width: 58%; padding-left: 42px; }
.gr-sec.s4 .gr-say { left: 5px; width: 32px; height: 32px; background-size: 27px; }
.gr-sec.s4 .gr-table table { table-layout: fixed; }
.gr-cheat-pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 4px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffd766, #ffab1f); box-shadow: 0 3px 0 #d98200, inset 0 1px 0 rgba(255, 255, 255, 0.6); color: #6b3a00; font: 800 12px Nunito, sans-serif; letter-spacing: 0.02em; }
.gr-cheat-pill img { width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(120, 60, 0, 0.4)); animation: fx-wiggle 3.6s ease-in-out 1.5s infinite; }
.gr-cheat-pill::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-20deg); animation: go-shine 4.5s ease-in-out 2s infinite; }
@media (prefers-reduced-motion: reduce) { .gr-cheat-pill img, .gr-cheat-pill::after { animation: none; } }
:root[data-theme="dark"] .gr-cheat-pill { background: linear-gradient(180deg, #ffd766, #ffab1f); color: #6b3a00; box-shadow: 0 3px 0 #8a5200; }
.gr-cheat-pill { background: linear-gradient(180deg, #fffaf0, #fff0cf); box-shadow: 0 2px 0 #f1dca6, inset 0 0 0 1px #f6e6b9; color: #a4650a; font-weight: 800; letter-spacing: 0; }
.gr-cheat-pill::after { display: none; }
.gr-cheat-pill img { width: 16px; height: 16px; animation: none; filter: drop-shadow(0 1px 1px rgba(120, 80, 0, 0.25)); }
:root[data-theme="dark"] .gr-cheat-pill { background: #2f2818; box-shadow: 0 2px 0 #17141f, inset 0 0 0 1px #5a4620; color: #f0cf85; }
/* lista modułów: kafelki i plakietki jak na kafelkach ekranu głównego (biały kafelek 3D, chipy z ramką) */
.gr-num { border: 0; background: radial-gradient(circle at 30% 24%, #fff, color-mix(in srgb, var(--t) 85%, #fff)); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--c) 14%, transparent), 0 8px 14px -8px color-mix(in srgb, var(--c) 65%, transparent); color: var(--c); font-size: 21px; }
.gr-num::after { display: none; }
.gr-row.done .gr-num { border: 0; background: radial-gradient(circle at 30% 24%, #fff, #e3f7e9); box-shadow: inset 0 -4px 0 rgba(47, 194, 26, 0.14), 0 8px 14px -8px rgba(47, 160, 60, 0.6); }
.gr-row.locked .gr-num { background: radial-gradient(circle at 30% 24%, #fff, #ecebf3); box-shadow: inset 0 -4px 0 rgba(90, 85, 120, 0.12); color: #8e8aa0; }
.gr-row .gr-lvl { padding: 3px 10px; border: 1.5px solid color-mix(in srgb, var(--c) 30%, #fff); background: #fff; color: var(--c); }
.gr-cheat-pill { padding: 2px 9px 2px 5px; border: 1.5px solid #f3dc9a; background: #fff3d1; box-shadow: none; color: #9a5b00; font: 800 12px Nunito, sans-serif; }
.gr-cheat-pill img { width: 15px; height: 15px; }
:root[data-theme="dark"] .gr-num { background: radial-gradient(circle at 30% 24%, #3a3550, #262234); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
:root[data-theme="dark"] .gr-row.done .gr-num { background: radial-gradient(circle at 30% 24%, #34503f, #22332a); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
:root[data-theme="dark"] .gr-row .gr-lvl { background: #262234; border-color: color-mix(in srgb, var(--c) 40%, #2e2a3d); }
:root[data-theme="dark"] .gr-cheat-pill { background: #2f2818; border-color: #5a4620; color: #f0cf85; box-shadow: none; }
.gr-cheat-pill { color: #2b3a7a; }
:root[data-theme="dark"] .gr-cheat-pill { color: #f1f0ff; }
/* dolny pasek modułu: przycisk „Przerobione” z pełną krawędzią 3D, równa wysokość z przyciskami sąsiednich modułów */
.gr-nav { gap: 12px; align-items: stretch; margin: 18px 0 8px; }
.gr-nav .gr-done { height: 58px; font-size: 19px; box-shadow: 0 6px 0 #2f9a0a, 0 14px 22px -10px rgba(60, 170, 10, 0.55); animation: none; }
.gr-nav .gr-done:active { transform: translateY(5px); box-shadow: 0 1px 0 #2f9a0a; }
.gr-nav .gr-done.on { background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 6px 0 #4a2fc0, 0 14px 22px -10px rgba(97, 67, 255, 0.7); }
.gr-nav .gr-done.on:active { box-shadow: 0 1px 0 #4a2fc0; }
.gr-pn { height: 58px; border-radius: 20px; }
.gr-nav .gr-done.static { display: grid; place-items: center; cursor: default; animation: none; }
.gr-nav .gr-done.static:hover { transform: none; filter: none; }
.gr-nav .gr-done.static:active { transform: none; box-shadow: 0 6px 0 #4a2fc0, 0 14px 22px -10px rgba(97, 67, 255, 0.7); }
.gr-nav .gr-done.static::after { display: none; }

.gp-set-ic { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(60, 50, 140, 0.28)); }
.gp-quote { font-size: 22px; }
.gp-card .listen-row { margin: 8px 0 2px; }

/* przyciski „Ćwicz z AI” */
.gp-top-cta.ai { --c: #6143ff; --t: #EFE9FF; border-color: #d8ccff; background: linear-gradient(135deg, #fff, #EFE9FF); box-shadow: 0 5px 0 #ddd3ff; }
.gp-top-cta.ai:hover { box-shadow: 0 7px 0 #d2c5ff; }
.gp-top-cta.ai:active { box-shadow: 0 1px 0 #ddd3ff; }
.gp-top-cta.ai .gp-top-ic { width: 38px; height: 38px; }
.gp-ai-btn { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; margin-top: 8px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 5px 0 #4a2fc0, 0 12px 20px -10px rgba(97, 67, 255, 0.7); color: #fff; font: 700 19px var(--display); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.gp-ai-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #4a2fc0, 0 16px 24px -10px rgba(97, 67, 255, 0.75); }
.gp-ai-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #4a2fc0; }
.gp-ai-ic { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(20, 10, 80, 0.4)); }

.gp-tip { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 2px; padding: 9px 12px; border-radius: 14px; background: #fff3d1; font: 700 13.5px/1.45 Nunito, sans-serif; color: #7a5300; text-align: left; }
.gp-tip .gp-mini-ic { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; }
:root[data-theme="dark"] .gp-tip { background: #3a3220; color: #f0cf85; }
.gp-expl span { display: block; }

/* okienko po odpowiedzi: tłumaczenie i „lekcja” w krokach */
.gp-pl.main { margin: -2px 0 8px; font: 700 15px/1.4 Nunito, sans-serif; color: #5a5f7a; font-style: italic; }
.gp-lesson { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; text-align: left; }
.gp-lesson h5 { margin: 0 0 3px; font: 800 12px Nunito, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #6f7590; }
.gp-lesson p { margin: 0; }
.gp-rule { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: #efeaff; }
.gp-rule span { font: 800 12px Nunito, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #6f7590; }
.gp-rule b { flex: 1; text-align: right; font: 800 15px var(--display); color: #4a2fc0; }
.gp-why, .gp-ex { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1.5px rgba(60, 60, 140, 0.1); }
.gp-why .gp-mini-ic, .gp-ex .gp-mini-ic { flex-shrink: 0; width: 24px; height: 24px; margin: 0; }
.gp-why ol { margin: 0; padding-left: 20px; font: 600 14.5px/1.5 Nunito, sans-serif; color: #2b3150; }
.gp-why li { margin: 3px 0; }
.gp-why p { font: 600 14.5px/1.5 Nunito, sans-serif; color: #2b3150; }
.gp-ex p { font: 600 14.5px/1.45 Nunito, sans-serif; color: #2b3150; }
.gp-ex p.pl { color: #6f7590; font-style: italic; }
.gp-say { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; vertical-align: middle; border: 0; border-radius: 50%; background: url(assets/ui/btn-speaker.png) center / 22px no-repeat; cursor: pointer; }
.gp-say svg { display: none; }
.gp-lesson .gp-tip { margin: 0; }
:root[data-theme="dark"] .gp-rule { background: #2b2545; }
:root[data-theme="dark"] .gp-rule b { color: #cdbfff; }
:root[data-theme="dark"] .gp-why, :root[data-theme="dark"] .gp-ex { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .gp-why ol, :root[data-theme="dark"] .gp-why p, :root[data-theme="dark"] .gp-ex p { color: #e6e3f7; }

/* =====================================================================================================
   PRZYCISKI — jeden system w całej aplikacji (ten blok nadpisuje wcześniejsze wersje; kolory zostają, zmienia się rozmiar i zachowanie)
   • główny: 52 px, napis 18 px, krawędź 3D 4 px;  • dodatkowy: 46 px, napis 16 px, krawędź 3 px;  • mały: 40 px
   • efekty: uniesienie 1 px po najechaniu + przesunięcie błysku, wciśnięcie 3 px po kliknięciu, jeden delikatny błysk co ok. 8 s (tylko główne)
   ===================================================================================================== */
:root { --btn-h: 52px; --btn-h2: 46px; --btn-fs: 18px; --btn-fs2: 16px; }

/* --- wspólny kształt: główne przyciski (zielone „start / dalej”, niebieskie „Ucz się”, fioletowe) --- */
.pick-go, .cx-go, .gm-again, .sx-cta .sm-go, .wd-cta .pick-go, .card.study.intro ~ .btn.wide, .gp-cta .pick-go, .gr-nav .gr-done,
.ph-cta, .hero .plan-focus .btn.pill, .btn.pill, .cv-learn, .fb-sheet .btn.wide, .ask-btn {
  position: relative; overflow: hidden; height: var(--btn-h); padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 var(--btn-fs)/1 var(--display); letter-spacing: 0; color: #fff; animation: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, filter 0.16s ease;
}
/* zielone */
.pick-go, .cx-go, .gm-again, .sx-cta .sm-go, .wd-cta .pick-go, .card.study.intro ~ .btn.wide, .gp-cta .pick-go, .gr-nav .gr-done {
  background: linear-gradient(90deg, #6ee02b, #3fc40f); box-shadow: 0 4px 0 #2f9a0a, 0 10px 16px -10px rgba(60, 170, 10, 0.65);
}
/* niebieskie (Ucz się na ekranie głównym, zwykłe „btn pill”) */
.ph-cta, .hero .plan-focus .btn.pill, .btn.pill {
  background: linear-gradient(90deg, #38a5f1 0%, #5981f3 50%, #715bfa 100%); box-shadow: 0 4px 0 #3f52c4, 0 10px 16px -10px rgba(89, 110, 245, 0.7);
}
/* fioletowe */
.cv-learn, .ask-btn { background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 4px 0 #4a2fc0, 0 10px 16px -10px rgba(97, 67, 255, 0.65); }
.ask-btn.danger { background: linear-gradient(90deg, #f0566b, #d93a52); box-shadow: 0 4px 0 #a52a3c, 0 10px 16px -10px rgba(217, 58, 82, 0.6); }
.ask-btn.ghost { color: #5a5f7a; background: #eef0f7; box-shadow: 0 3px 0 #d9dcea; }
/* okienko po odpowiedzi: kolor zależy od wyniku */
.fb-sheet .btn.wide { font-size: var(--btn-fs); letter-spacing: 0; }
.fb-sheet:has(.feedback.ok) .btn.wide { box-shadow: 0 4px 0 #2f9a0a, 0 10px 16px -10px rgba(60, 170, 10, 0.6); }
.fb-sheet:has(.feedback.bad) .btn.wide { box-shadow: 0 4px 0 #b8281d, 0 10px 16px -10px rgba(230, 60, 40, 0.55); }
.fb-sheet:has(.feedback.typo) .btn.wide { box-shadow: 0 4px 0 #b76208, 0 10px 16px -10px rgba(240, 140, 20, 0.55); }
/* stan „przerobione” */
.gr-nav .gr-done.on { background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 4px 0 #4a2fc0, 0 10px 16px -10px rgba(97, 67, 255, 0.65); }
.gr-nav .gr-done { flex: 1; }
.gr-nav .gr-done.static:active { box-shadow: 0 4px 0 #4a2fc0, 0 10px 16px -10px rgba(97, 67, 255, 0.65); }

/* po najechaniu / kliknięciu — to samo wszędzie */
.pick-go:hover:not(:disabled), .cx-go:hover:not(:disabled), .gm-again:hover:not(:disabled), .sx-cta .sm-go:hover:not(:disabled), .wd-cta .pick-go:hover:not(:disabled),
.card.study.intro ~ .btn.wide:hover:not(:disabled), .gp-cta .pick-go:hover:not(:disabled), .gr-nav .gr-done:hover:not(:disabled), .ph-cta:hover:not(:disabled),
.hero .plan-focus .btn.pill:hover:not(:disabled), .btn.pill:hover:not(:disabled), .cv-learn:hover:not(:disabled), .fb-sheet .btn.wide:hover:not(:disabled), .ask-btn:hover:not(:disabled) {
  transform: translateY(-1px); filter: brightness(1.05) saturate(1.05);
}
.pick-go:active:not(:disabled), .cx-go:active:not(:disabled), .gm-again:active:not(:disabled), .sx-cta .sm-go:active:not(:disabled), .wd-cta .pick-go:active:not(:disabled),
.card.study.intro ~ .btn.wide:active:not(:disabled), .gp-cta .pick-go:active:not(:disabled), .gr-nav .gr-done:active:not(:disabled), .ph-cta:active:not(:disabled),
.hero .plan-focus .btn.pill:active:not(:disabled), .btn.pill:active:not(:disabled), .cv-learn:active:not(:disabled), .fb-sheet .btn.wide:active:not(:disabled), .ask-btn:active:not(:disabled) {
  transform: translateY(3px); filter: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
.btn.pill:disabled, .pick-go:disabled { opacity: 0.55; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }

/* błysk: jeden, delikatny i rzadki; przy najechaniu przesuwa się raz */
.pick-go::after, .cx-go::after, .gm-again::after, .sx-cta .sm-go::after, .wd-cta .pick-go::after, .card.study.intro ~ .btn.wide::after, .gp-cta .pick-go::after,
.gr-nav .gr-done::after, .ph-cta::after, .cv-learn::after, .fb-sheet .btn.wide::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 38%; height: 100%; z-index: 1; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: go-shine 8s ease-in-out 2.5s infinite;
}
.pick-go:hover::after, .ph-cta:hover::after { left: 130%; transition: left 0.7s ease; }

/* --- dodatkowe: fioletowe „Następny moduł / Ćwicz z AI” i jasne „Nie wiem / Wstecz” --- */
.sx-cta .sm-more, .gp-ai-btn, .type-actions .btn.primary {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h2); padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #8b5cff, #6143ff); box-shadow: 0 3px 0 #4a2fc0, 0 8px 14px -10px rgba(97, 67, 255, 0.6);
  color: #fff; font: 700 var(--btn-fs2)/1 var(--display); letter-spacing: 0; animation: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, filter 0.16s ease;
}
.sx-cta .sm-more { margin-top: 10px; width: 100%; }
.gp-ai-btn { margin-top: 8px; }
.gp-ai-ic { width: 26px; height: 26px; }
.sx-cta .sm-more:hover, .gp-ai-btn:hover, .type-actions .btn.primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 3px 0 #4a2fc0, 0 8px 14px -10px rgba(97, 67, 255, 0.6); background: linear-gradient(90deg, #8b5cff, #6143ff); }
.sx-cta .sm-more:active, .gp-ai-btn:active, .type-actions .btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #4a2fc0; filter: none; }
.type-actions .btn.primary::after { display: none; }
.type-box:has(input:not(:placeholder-shown):not([readonly])) ~ .type-actions .btn.primary { animation: none; }

.type-actions .btn.ghost, .wc-act, .btn.ghost-line, .gr-pn {
  height: var(--btn-h2); border: 2px solid #e6e2f8; border-radius: 999px; background: #fff; color: #5a6086; font: 800 var(--btn-fs2)/1 Nunito, sans-serif;
  box-shadow: 0 3px 0 #e6e2f8; transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.type-actions .btn.ghost:hover, .wc-act:hover, .btn.ghost-line:hover, .gr-pn:hover { transform: translateY(-1px); border-color: #cfc6ff; color: #5a3fe0; box-shadow: 0 3px 0 #cfc6ff; }
.type-actions .btn.ghost:active, .wc-act:active, .btn.ghost-line:active, .gr-pn:active { transform: translateY(2px); box-shadow: 0 1px 0 #e6e2f8; }
.gr-pn { min-width: 48px; padding: 0 12px; font-family: var(--display); }
.gr-nav { gap: 10px; margin: 16px 0 8px; align-items: center; }
.wc-act { height: var(--btn-h2); }

/* przyciski w hero i kafelki „Ćwicz” — mniejsze i spokojniejsze */
.gp-cta .pick-go { flex-basis: 100%; }
.gp-top-cta { padding: 10px 14px; }
.gp-top-cta b { font-size: 16px; }
.dv-bulk { height: 44px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .pick-go::after, .cx-go::after, .gm-again::after, .sx-cta .sm-go::after, .wd-cta .pick-go::after, .card.study.intro ~ .btn.wide::after, .gp-cta .pick-go::after,
  .gr-nav .gr-done::after, .ph-cta::after, .cv-learn::after, .fb-sheet .btn.wide::after { animation: none; }
}
.gr-nav .gr-done { padding: 0 8px; font-size: 16px; white-space: nowrap; }
.type-actions .hint-btn { flex-direction: row; gap: 5px; padding: 0 14px; font-size: 14px; white-space: nowrap; line-height: 1; }
.type-actions .hint-btn .hint-cost { margin-top: 0; }
.type-actions { align-items: center; }
.type-actions { gap: 8px; }
.type-actions .btn { padding: 0 14px; min-width: 0; flex-shrink: 1; }
.type-actions .hint-btn { padding: 0 11px; font-size: 13px; gap: 4px; }
.type-actions .btn.primary { padding: 0 20px; flex-shrink: 0; }
.type-actions .btn { padding: 0 12px; }
.type-actions .hint-btn { padding: 0 10px; flex-shrink: 0; }
.type-actions .btn.primary { padding: 0 16px; }
.type-actions .btn.ghost.hint-btn { padding: 0 10px; font-size: 13.5px; gap: 4px; }
.type-actions { display: flex; grid-template-columns: none; }
.type-actions .btn.ghost { flex: 1 1 auto; }
.type-actions .btn.ghost.hint-btn { flex: 0 0 auto; }
.type-actions .btn.primary { flex: 0 0 auto; margin-left: 0; }
.type-actions .btn { width: auto; }
.type-actions .btn.ghost:not(.hint-btn) { flex: 1 1 0; }

/* =====================================================================================================
   PLAN „DZIŚ”: kafelek na ekranie głównym, powtórki 3 / 7 / 21 dni, „Polecany”, powiązanie lekcji z gramatyką
   ===================================================================================================== */
.hm-today { position: relative; margin: 14px 0 0; padding: 14px 12px; border: 2px solid #cfdcff; border-radius: 26px;
  background: linear-gradient(135deg, #f1f5ff 0%, #e4ecff 50%, #efe9ff 100%); box-shadow: 0 6px 0 #bccbf3, 0 16px 24px -16px rgba(50, 80, 190, 0.55); }
.hm-today.all { border-color: #cfeedd; background: linear-gradient(135deg, #f1fcf5 0%, #e5f6ed 50%, #eaf5ff 100%); box-shadow: 0 6px 0 #c5e6d1, 0 16px 24px -16px rgba(30, 120, 80, 0.5); }
.td-head { display: flex; align-items: center; gap: 12px; padding: 0 4px 12px; }
.td-art { position: relative; flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 19px; background: radial-gradient(circle at 30% 24%, #fff, #d6e2ff); box-shadow: inset 0 -3px 0 rgba(50, 80, 190, 0.12), 0 6px 12px -8px rgba(50, 80, 190, 0.6); }
.hm-today.all .td-art { background: radial-gradient(circle at 30% 24%, #fff, #d2f0dd); }
.td-art img { width: 46px; height: 46px; object-fit: contain; animation: fx-float 3s ease-in-out infinite; }
.td-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.td-ht b { font: 800 21px var(--display); line-height: 1.15; color: #131d4c; }
.td-ht span { font-size: 14px; font-weight: 700; color: #5b6b80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-prog { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1.5px solid #c5d5fb; border-radius: 999px; background: #fff; font: 800 13px Nunito, sans-serif; color: #2f5fb0; }
.td-dots { display: inline-flex; gap: 4px; }
.td-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d3dcf3; transition: background 0.3s, transform 0.3s; }
.td-dots i.on { background: #3fc40f; transform: scale(1.12); }

.td-steps { display: flex; flex-direction: column; gap: 9px; }
.td-step { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px 9px 9px; border: 2px solid #dbe4fb; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 #dbe4fb; cursor: pointer; text-align: left; color: inherit;
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, border-color 0.16s ease; }
.td-step:hover { transform: translateY(-1px); border-color: #b9c9f4; box-shadow: 0 4px 0 #cfdcf7; }
.td-step:active { transform: translateY(2px); box-shadow: 0 1px 0 #dbe4fb; }
.td-step.now { border-color: #7a95ff; box-shadow: 0 3px 0 #a9bcff; }
.td-step.now:hover { box-shadow: 0 4px 0 #a9bcff; }
.td-step.now:active { box-shadow: 0 1px 0 #a9bcff; }
.td-step.done { border-color: #e3eafc; background: #f7faff; box-shadow: 0 3px 0 #e3eafc; }
.td-step.done .td-ic { opacity: 0.6; filter: saturate(0.6); }
.td-step.done .td-tx b { color: #6b7896; }
.td-step.extra { background: rgba(255, 255, 255, 0.62); }
.td-step:disabled { cursor: default; }
.td-ic { flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: radial-gradient(circle at 30% 24%, #fff, var(--tint, #e6ecff)); box-shadow: inset 0 -3px 0 rgba(30, 40, 90, 0.08); }
.td-ic img { width: 36px; height: 36px; object-fit: contain; }
.td-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.td-tx b { font: 800 15.5px/1.2 var(--display); color: #131d4c; }
.td-tx small { font: 700 13px/1.3 Nunito, sans-serif; color: #5b6b80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-tx .td-note { color: #b25e00; }
.td-rec .td-tx .td-note { color: #5a3fe0; }
.td-tag { flex-shrink: 0; padding: 3px 9px; border: 1.5px solid #f3dc9a; border-radius: 999px; background: #fff3d1; font: 800 12px Nunito, sans-serif; font-style: normal; color: #9a5b00; }
.td-next .td-tag { border-color: #c5d5fb; background: #eaf0ff; color: #2f5fb0; }
.td-go { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; padding-bottom: 3px; border-radius: 50%; background: linear-gradient(180deg, #5b8cff, #3d6bea); box-shadow: 0 3px 0 #2a4fb8; color: #fff; font: 800 24px/1 Nunito, sans-serif; transition: transform 0.2s; }
.td-step:hover .td-go { transform: translateX(3px); }
.td-arr { flex-shrink: 0; width: 20px; text-align: center; font: 800 24px/1 Nunito, sans-serif; color: #9aa9d4; }
.td-ok { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #34d16b, #1fb356); box-shadow: 0 3px 0 #15803d; color: #fff; font: 800 15px/1 Nunito, sans-serif; }

/* ekran modułu: termin powtórki (3 · 7 · 21 dni) i „Polecany” */
.gr-srs { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 11px 14px 11px 12px; border: 2px solid #e4e0f6; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 #e4e0f6; }
.gr-srs.due { border-color: #ffd7a1; background: linear-gradient(135deg, #fff8ec, #ffefd9); box-shadow: 0 3px 0 #f3d3a4; }
.gr-srs.done { border-color: #cfeedd; background: linear-gradient(135deg, #f1fcf5, #e5f6ed); box-shadow: 0 3px 0 #c5e6d1; }
.gr-srs.rec { border-color: #d9ccff; background: linear-gradient(135deg, #f6f1ff, #ece3ff); box-shadow: 0 3px 0 #d9ccff; }
.gr-srs-ic { flex-shrink: 0; width: 38px; height: 38px; object-fit: contain; }
.gr-srs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gr-srs-tx b { font: 800 16px/1.2 var(--display); color: #131d4c; }
.gr-srs-tx small { font: 700 13px/1.35 Nunito, sans-serif; color: #5b6b80; }
.gr-srs + .gr-srs { margin-top: 10px; }
.gr-srs + .gp-top-cta { margin-top: 12px; }
.gr-pips { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gr-pips i { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: #eef0f7; box-shadow: 0 2px 0 #dfe3f0; color: #8b93b0; font: 800 12px Nunito, sans-serif; font-style: normal; }
.gr-pips i.on { background: linear-gradient(180deg, #34d16b, #1fb356); box-shadow: 0 2px 0 #15803d; color: #fff; }
.gr-pips i.cur { background: #fff3d1; box-shadow: 0 2px 0 #f3dc9a, inset 0 0 0 1.5px #f3dc9a; color: #9a5b00; }
.gr-pips small { margin-left: 1px; color: #8b93b0; font: 700 11px Nunito, sans-serif; }
.gp-sum-note.srs { display: flex; align-items: center; gap: 8px; text-align: left; }
.gp-sum-note.srs > span:not(.gr-pips) { flex: 1; }
.gp-sum-note.srs.mastered, .gp-sum-note.srs.pass { background: rgba(34, 197, 94, 0.14); color: #11724a; }
.gp-sum-note.srs.fail, .gp-sum-note.srs.weak { background: rgba(255, 170, 60, 0.18); color: #9a5b00; }

/* lekcje pasujące do modułu (ekran modułu) i gramatyka pasująca do lekcji (karta Zadania z lekcji) */
.gr-lessons { margin-top: 16px; padding: 14px; border: 2px solid #e0eee6; border-radius: 22px; background: linear-gradient(135deg, #fff, #f1fcf5); box-shadow: 0 4px 0 #d6ebdf; }
.gr-lessons > b { display: block; margin: 0 0 9px 2px; font: 800 15px var(--display); color: #131d4c; }
.gr-lchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-lchip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 40px; padding: 0 14px 0 6px; border: 2px solid #d6ebdf; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 #d6ebdf; cursor: pointer; color: #1f7a4a;
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease; }
.gr-lchip:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #c5e6d1; }
.gr-lchip:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6ebdf; }
.gr-lchip i { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #34d16b, #1fb356); color: #fff; font: 800 12px Nunito, sans-serif; font-style: normal; }
.gr-lchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px Nunito, sans-serif; }
.lk-grams { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.lk-gram { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 14px 9px 10px; border: 2px solid #dbe4fb; border-radius: 18px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 3px 0 #dbe4fb; cursor: pointer; text-align: left; color: inherit;
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease; }
.lk-gram:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #cfdcf7; }
.lk-gram:active { transform: translateY(2px); box-shadow: 0 1px 0 #dbe4fb; }
.lk-gram-ic { flex-shrink: 0; width: 36px; height: 36px; object-fit: contain; }
.lk-gram-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lk-gram-tx small { font: 700 12px Nunito, sans-serif; color: #5b6b80; }
.lk-gram-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 15px var(--display); color: #131d4c; }
.lk-gram i { flex-shrink: 0; font: 800 22px/1 Nunito, sans-serif; font-style: normal; color: #9aa9d4; }
.lk-gram.done i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #34d16b, #1fb356); box-shadow: 0 2px 0 #15803d; color: #fff; font-size: 14px; }

/* plakietki na liście modułów */
.gr-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font: 800 12px Nunito, sans-serif; vertical-align: middle; }
.gr-tag.due { border: 1.5px solid #f3dc9a; background: #fff3d1; color: #9a5b00; }
.gr-tag.rec { border: 1.5px solid #d9ccff; background: #efe9ff; color: #5a3fe0; }
.cx-chips .due { background: linear-gradient(180deg, #fff3d1, #ffe4a8); box-shadow: 0 3px 0 #f3d375; color: #8a5a00; }
.cx-chips .due b { color: #b86e00; }

@media (prefers-reduced-motion: reduce) { .td-art img { animation: none; } .td-go, .td-dots i { transition: none; } }

/* ciemny motyw: karty z kolorem modułu (--c / --t w stylu inline) i ikony kroków „Dziś” — generator dark.css nie przelicza var() */
:root[data-theme="dark"] .gp-top-cta:not(.ai), :root[data-theme="dark"] .gp-cta { border-color: color-mix(in srgb, var(--c) 34%, #2e2a3d); background: linear-gradient(135deg, #201d2a, color-mix(in srgb, var(--c) 16%, #201d2a)); box-shadow: 0 5px 0 #17141f; }
:root[data-theme="dark"] .gp-top-cta:not(.ai):hover { box-shadow: 0 7px 0 #17141f; }
:root[data-theme="dark"] .gp-top-cta:not(.ai):active { box-shadow: 0 1px 0 #17141f; }
:root[data-theme="dark"] .gp-cta { box-shadow: 0 6px 0 #17141f; }
:root[data-theme="dark"] .td-ic { background: radial-gradient(circle at 30% 24%, #38344a, #242034); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }

/* =====================================================================================================
   „Ćwicz z AI · dobrane słówka” — trzeci przycisk pod „Ćwicz z AI” i karta „Słówka z tego zestawu”
   ===================================================================================================== */

.gp-words { padding: 14px; }
.gp-words-ic { width: 30px; height: 30px; object-fit: contain; }
.gp-words-why { margin: 2px 2px 10px; font: 700 13px/1.4 Nunito, sans-serif; color: #5b6b80; }
.gp-wchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-wchip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 13px 8px; border: 2px solid #dfe6f5; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #dfe6f5; cursor: pointer; text-align: left;
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease; }
.gp-wchip:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #d3dcf0; }
.gp-wchip:active { transform: translateY(2px); box-shadow: 0 1px 0 #dfe6f5; }
.gp-wchip.new { border-color: #bfe9ee; background: linear-gradient(135deg, #fff, #e8f8fa); box-shadow: 0 3px 0 #c6e8ec; }
.gp-wc-en { display: flex; align-items: center; gap: 6px; font: 800 15px var(--display); color: #131d4c; }
.gp-wc-en i { padding: 1px 7px; border-radius: 999px; background: #d6f1f4; color: #0e8a92; font: 800 10.5px Nunito, sans-serif; font-style: normal; }
.gp-wc-pl { font: 700 12.5px Nunito, sans-serif; color: #5b6b80; }
.gp-learn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 14px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, #22b8c4, #1a8fb0); box-shadow: 0 3px 0 #146f8a, 0 8px 14px -10px rgba(20, 140, 170, 0.6); color: #fff; font: 700 16px/1 var(--display);
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, filter 0.16s ease; }
.gp-learn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gp-learn:active { transform: translateY(2px); box-shadow: 0 1px 0 #146f8a; filter: none; }
.gp-words-note { margin: 12px 2px 0; font: 700 13px Nunito, sans-serif; color: #11724a; }

/* „Dodaj wszystkie do nauki” — drugi, jasny przycisk pod „Ucz się tych słówek” */
.gp-add { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 10px; border: 2px solid #bfe9ee; border-radius: 999px; cursor: pointer; background: #fff; box-shadow: 0 3px 0 #c6e8ec; color: #0e7f94; font: 800 16px/1 var(--display);
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, border-color 0.16s ease; }
.gp-add:hover { transform: translateY(-1px); border-color: #8fd6df; box-shadow: 0 4px 0 #b7dfe5; }
.gp-add:active { transform: translateY(2px); box-shadow: 0 1px 0 #c6e8ec; }

/* słówka lecą do „Nauka” po „Dodaj wszystkie do nauki” + znacznik z przyciskiem „Zobacz w Nauce” + błysk wiersza „Z gramatyki” */
.gp-fly-target { position: fixed; left: 50%; bottom: 92px; z-index: 10000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 14px 8px 8px; border: 2px solid #bfe9ee; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 #c6e8ec, 0 14px 28px -10px rgba(20, 140, 170, 0.5); cursor: pointer; transform: translateX(-50%); animation: gp-fly-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.gp-fly-target.out { opacity: 0; transform: translateX(-50%) translateY(16px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.gp-fly-ic { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.gp-fly-tx { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.gp-fly-tx b { font: 800 15px var(--display); color: #131d4c; }
.gp-fly-tx small { font: 700 12.5px Nunito, sans-serif; color: #5b6b80; }
.gp-fly-target > i { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #34d16b, #1fb356); box-shadow: 0 2px 0 #15803d; color: #fff; font: 800 14px Nunito, sans-serif; font-style: normal; }
@keyframes gp-fly-in { from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(0.6); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.gp-flyer { box-shadow: 0 8px 18px -6px rgba(20, 140, 170, 0.55); }
.gp-seehome { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 10px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, #22b8c4, #1a8fb0); box-shadow: 0 3px 0 #146f8a, 0 8px 14px -10px rgba(20, 140, 170, 0.6); color: #fff; font: 700 16px/1 var(--display);
  transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.16s ease, filter 0.16s ease; }
.gp-seehome:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gp-seehome:active { transform: translateY(2px); box-shadow: 0 1px 0 #146f8a; filter: none; }
.ln-rv.just { animation: ln-rv-glow 1.1s ease-in-out 3; }
@keyframes ln-rv-glow { 0%, 100% { background-color: rgba(255, 255, 255, 0.55); box-shadow: none; } 50% { background-color: rgba(214, 245, 235, 0.95); box-shadow: 0 0 0 3px rgba(52, 209, 107, 0.55); } }
@media (prefers-reduced-motion: reduce) { .gp-fly-target { animation: none; } .ln-rv.just { animation: none; box-shadow: 0 0 0 3px rgba(52, 209, 107, 0.55); } }

/* ---------- okienko profilowe (awatar) zamiast zębatki + wybór awatara w Profilu ---------- */
.flag.avatar { display: grid; place-items: center; background: var(--av, #e7e0ff); border: 3px solid #3bdc1e; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 5px rgba(59, 220, 30, 0.45), 0 5px 0 5px #23a80f, 0 14px 20px -6px rgba(20, 110, 10, 0.55); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.flag.avatar img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.flag.avatar:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #5cf03a, 0 5px 0 6px #23a80f, 0 16px 24px -6px rgba(20, 110, 10, 0.6); }
.flag.avatar:active { transform: scale(0.94); }
:root[data-theme="dark"] .flag.avatar { border-color: #201d2a; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 4px; }
.av-opt { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--av); box-shadow: 0 0 0 2px rgba(97, 67, 255, 0.18), 0 6px 12px -6px rgba(60, 50, 140, 0.4); cursor: pointer; overflow: hidden; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.av-opt img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.av-opt:hover { transform: translateY(-2px) scale(1.06); }
.av-opt.on { box-shadow: 0 0 0 3px #3bdc1e, 0 8px 16px -6px rgba(35, 168, 15, 0.6); transform: scale(1.06); }
:root[data-theme="dark"] .av-opt { border-color: #201d2a; }
/* moneta „piórko” zamiast diamentu: obrazek w miejscu dawnej ikony SVG */
.gem-svg { display: inline-block; width: 1.2em; height: 1.2em; object-fit: contain; vertical-align: -0.22em; }
.gem-pill .gem-svg { width: 18px; height: 18px; }
.gem-count .gem-svg { width: 22px; height: 22px; }
.tk-gems .gem-i .gem-svg { width: 22px; height: 22px; }
.cel-reward .gem-svg { width: 34px; height: 34px; vertical-align: middle; }

/* ---------- pasek statusu: kapsuły z jaskrawozieloną ramką (3D jak przyciski), wyraźniejsze liczby, zielony awatar ---------- */
.hero .statusbar { gap: 10px; }
.hero .statusbar .pill-stat { height: 48px; padding: 0 15px 0 5px; gap: 7px; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 3px solid #3bdc1e; box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); font-size: 26px; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hero .statusbar .pill-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.hero .statusbar .pill-stat:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.hero .statusbar .pill-stat .stat-img { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); }
.hero .statusbar .stat-known b { color: #00929f; }
.hero .statusbar .stat-gems b { color: #f0a500; text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(160, 95, 0, 0.35), 0 3px 4px rgba(160, 95, 0, 0.25); }
.hero .statusbar .pill-stat.flame b, .hero .statusbar .pill-stat.flame.hot b { color: #f25a00; }
.hero .statusbar .pill-stat.flame:not(.hot) b { color: #7b7f93; }
.hero .statusbar .pill-stat.flame:not(.hot) { border-color: #b9c6b0; box-shadow: 0 4px 0 #98a590, 0 10px 16px -8px rgba(60, 80, 50, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.hero .statusbar .flag.avatar { width: 56px; height: 56px; margin-bottom: 5px; }
:root[data-theme="dark"] .hero .statusbar .pill-stat { background: #2a2733; border-color: #3bdc1e; text-shadow: none; box-shadow: 0 4px 0 #1c7a0d, 0 10px 16px -8px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .hero .statusbar .stat-known b { color: #4fd6e0; }
:root[data-theme="dark"] .hero .statusbar .stat-gems b { color: #ffd24a; }
:root[data-theme="dark"] .hero .statusbar .pill-stat.flame b, :root[data-theme="dark"] .hero .statusbar .pill-stat.flame.hot b { color: #ff9a4a; }
:root[data-theme="dark"] .flag.avatar { border-color: #3bdc1e; box-shadow: 0 0 0 3px #201d2a, 0 0 0 5px rgba(59, 220, 30, 0.5), 0 5px 0 5px #1c7a0d; }
@media (max-width: 440px) {
  .hero .statusbar { gap: 7px; }
  .hero .statusbar .pill-stat { height: 42px; padding: 0 10px 0 3px; gap: 4px; font-size: 21px; border-width: 2.5px; }
  .hero .statusbar .pill-stat .stat-img { width: 30px; height: 30px; }
  .hero .statusbar .flag.avatar { width: 48px; height: 48px; margin-bottom: 4px; }
}
/* ustawienia widoku obok awatara: okrągły przycisk w tym samym stylu (zielona ramka, 3D) */
.hero .statusbar .ph-settings { margin-left: auto; width: 48px; height: 48px; margin-bottom: 5px; flex-shrink: 0; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 3px solid #3bdc1e; box-shadow: 0 4px 0 #23a80f, 0 10px 16px -8px rgba(20, 110, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.9); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hero .statusbar .ph-settings:hover { background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); transform: translateY(-2px); box-shadow: 0 6px 0 #23a80f, 0 14px 20px -8px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.hero .statusbar .ph-settings:active { transform: translateY(3px); box-shadow: 0 1px 0 #23a80f, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.hero .statusbar .ph-settings .btn-3d { width: 30px; height: 30px; }
.hero .statusbar .ph-settings ~ .flag.avatar { margin-left: 12px; }
:root[data-theme="dark"] .hero .statusbar .ph-settings { background: #2a2733; border-color: #3bdc1e; box-shadow: 0 4px 0 #1c7a0d, 0 10px 16px -8px rgba(0, 0, 0, 0.5); }
@media (max-width: 440px) {
  .hero .statusbar .pill-stat { padding: 0 7px 0 2px; font-size: 19px; gap: 3px; }
  .hero .statusbar .pill-stat .stat-img { width: 26px; height: 26px; }
  .hero .statusbar { gap: 5px; }
  .hero .statusbar .ph-settings { width: 42px; height: 42px; margin-bottom: 4px; }
  .hero .statusbar .ph-settings .btn-3d { width: 26px; height: 26px; }
  .hero .statusbar .ph-settings ~ .flag.avatar { margin-left: 7px; }
}