/* EscapeVerse → Edukacja wczesnoszkolna: aplikacje ćwiczeń (wcz.js) – duże przyciski dla dzieci, jasny i ciemny motyw, telefon.
   Kolor aplikacji: --wc (ustawiany na sekcji .wcz). Animacje tylko transform/opacity. */
.wcz { --wc: #2F9E44; --wc2: #1B7A33; --ok: #16A34A; --bad: #DC2626; margin-top: 1.5rem; scroll-margin-top: 84px; }
.wcz-intro { display: grid; gap: .6rem; margin-bottom: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--border); }
.wcz-intro p { font-size: .95rem; line-height: 1.6; color: var(--muted); }
.wcz-intro b { color: var(--text); }
.wcz-intro small { font-size: .8rem; color: var(--muted); }
.wcz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.wcz-lbl { font: 600 .9rem 'Space Grotesk', sans-serif; color: var(--muted); }
.wcz-seg { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--border); }
.wcz-seg button { padding: .5rem 1rem; border: 0; border-radius: 99px; cursor: pointer; font: 600 .9rem 'Inter', sans-serif; color: var(--muted); background: transparent; transition: background-color .2s, color .2s; }
.wcz-seg button[aria-checked="true"] { color: #fff; background: var(--wc); }
.wcz-seg button:focus-visible, .wcz-act:focus-visible, .wcz-ch button:focus-visible, .wcz-next:focus-visible, .wcz-say:focus-visible { outline: 3px solid var(--wc); outline-offset: 2px; }

.wcz-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.wcz-act { position: relative; display: grid; gap: .3rem; align-content: start; min-height: 128px; padding: 1rem 1rem .9rem; border-radius: var(--r); cursor: pointer; text-align: left; color: var(--text); background: var(--bg2); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.wcz-act:hover { transform: translateY(-3px); border-color: var(--wc); }
.wcz-act > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 1.15rem; color: var(--wc); background: color-mix(in srgb, var(--wc) 14%, transparent); }
.wcz-act b { font: 700 1.05rem 'Space Grotesk', sans-serif; }
.wcz-act small { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.wcz-pp { position: absolute; top: .8rem; right: .8rem; padding: .1rem .45rem; border-radius: 6px; font: 600 .7rem 'Space Mono', monospace; color: var(--muted); background: var(--glass2); }
.wcz-act--mix > i, .wcz-act--rev > i { color: #fff; background: var(--wc); }
.wcz-act--rev { border-color: color-mix(in srgb, var(--wc) 55%, transparent); background: color-mix(in srgb, var(--wc) 8%, var(--bg2)); }

.wcz-log { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--border); }
.wcz-log h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font: 700 1rem 'Space Grotesk', sans-serif; }
.wcz-log h3 i { color: var(--wc); }
.wcz-log p { font-size: .9rem; color: var(--muted); }
.wcz-log ul { display: grid; gap: .35rem; list-style: none; }
.wcz-log li { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .6rem; align-items: baseline; padding: .4rem 0; font-size: .9rem; border-bottom: 1px solid var(--border); }
.wcz-log li span, .wcz-log li em { color: var(--muted); font-style: normal; font-size: .82rem; }
.wcz-link { margin-top: .6rem; padding: .3rem 0; border: 0; cursor: pointer; font: 600 .85rem 'Inter', sans-serif; color: var(--blue); background: none; text-decoration: underline; text-underline-offset: 3px; }

.wcz-play { max-width: 760px; margin: 0 auto; }
.wcz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.wcz-top b { font: 700 1.05rem 'Space Grotesk', sans-serif; }
.wcz-top .wcz-link { margin: 0; }
.wcz-dots { display: flex; gap: 6px; }
.wcz-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--glass2); border: 1px solid var(--border); }
.wcz-dots i.done { background: var(--wc); border-color: var(--wc); }
.wcz-dots i.cur { background: color-mix(in srgb, var(--wc) 40%, transparent); border-color: var(--wc); transform: scale(1.25); }
.wcz-card { padding: 1.4rem; border-radius: 20px; background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .35); animation: wcz-in .35s ease both; }
@keyframes wcz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wcz-kind { margin-bottom: .4rem; font: 600 .78rem 'Space Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--wc); }
body:not(.light) .wcz-kind { color: color-mix(in srgb, var(--wc) 60%, #fff); }
.wcz-q { display: flex; align-items: flex-start; gap: .8rem; }
.wcz-q p { flex: 1; font: 600 1.3rem/1.5 'Inter', sans-serif; }
.wcz-word { padding: 0 .25rem; border-radius: 6px; color: var(--wc2); background: color-mix(in srgb, var(--wc) 14%, transparent); }
body:not(.light) .wcz-word { color: color-mix(in srgb, var(--wc) 45%, #fff); }
.wcz-big { display: inline-block; font: 700 1.9rem/1.3 'Space Grotesk', sans-serif; letter-spacing: .02em; }
.wcz-say { flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; color: var(--wc); background: color-mix(in srgb, var(--wc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent); }
.wcz-vis { display: flex; justify-content: center; margin: 1rem 0 .4rem; }
.wcz-ch { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin-top: 1.1rem; }
.wcz-ch--mid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.wcz-ch--long { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wcz-ch button { min-height: 64px; padding: .7rem 1rem; border-radius: 16px; cursor: pointer; font: 700 1.35rem 'Space Grotesk', sans-serif; color: var(--text); background: var(--bg); border: 2px solid var(--border); transition: transform .15s, border-color .2s, background-color .2s; touch-action: manipulation; min-width: 0; line-height: 1.2; }
.wcz-ch--mid button { font-size: 1.15rem; }
.wcz-ch--long button { font-size: 1.05rem; }
/* ostatnia deska ratunku (bardzo wąski ekran): długie słowo łamie się w przycisku zamiast wychodzić poza niego */
.wcz-ch--wrap button { font-size: .98rem; overflow-wrap: anywhere; }
.wcz-ch button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--wc); }
.wcz-ch button.ok { color: #fff; background: var(--ok); border-color: var(--ok); }
.wcz-ch button.bad { color: var(--bad); border-color: var(--bad); opacity: .55; animation: wcz-shake .35s; }
.wcz-ch button:disabled { cursor: default; }
@keyframes wcz-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.wcz-fb { min-height: 1rem; margin-top: 1rem; }
.wcz-fb p { padding: .8rem 1rem; border-radius: 14px; font-size: 1rem; line-height: 1.55; }
.wcz-fb.ok p { color: #14532D; background: #DCFCE7; }
.wcz-fb.bad p { color: #7C2D12; background: #FFEDD5; }
body:not(.light) .wcz-fb.ok p { color: #BBF7D0; background: rgba(22, 163, 74, .18); }
body:not(.light) .wcz-fb.bad p { color: #FED7AA; background: rgba(234, 88, 12, .18); }
.wcz-next { display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .8rem 1.4rem; border: 0; border-radius: 14px; cursor: pointer; font: 700 1rem 'Space Grotesk', sans-serif; color: #fff; background: var(--wc); }

/* Rysunki */
.wcz-clock { width: min(220px, 60vw); }
.wcz-clock circle { fill: var(--bg); stroke: var(--wc); stroke-width: 2.5; }
.wcz-clock text { font: 700 7.5px 'Space Grotesk', sans-serif; text-anchor: middle; fill: var(--text); }
.wcz-clock line.h { stroke: var(--text); stroke-width: 1.2; } .wcz-clock line.m { stroke: var(--muted); stroke-width: .5; }
.wcz-clock .hh { stroke: var(--text); stroke-width: 3.6; stroke-linecap: round; }
.wcz-clock .mh { stroke: var(--wc); stroke-width: 2.2; stroke-linecap: round; }
.wcz-clock circle.c { fill: var(--text); stroke: none; }
.wcz-pie { width: min(180px, 50vw); }
.wcz-pie path { fill: var(--bg); stroke: var(--text); stroke-width: 1.2; stroke-linejoin: round; }
.wcz-pie path.on { fill: var(--wc); }
.wcz-rect { width: min(320px, 80vw); max-height: 220px; }
.wcz-rect rect { fill: color-mix(in srgb, var(--wc) 16%, transparent); stroke: var(--wc); stroke-width: 2.5; }
.wcz-rect text { font: 700 12px 'Space Grotesk', sans-serif; text-anchor: middle; fill: var(--text); }
.wcz-coins { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.wcz-coin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font: 700 1rem 'Space Grotesk', sans-serif; color: #3F2D00; background: radial-gradient(circle at 35% 30%, #FFF3BF, #FCC419 60%, #E67700); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12); }
.wcz-coin.gr { width: 54px; height: 54px; font-size: .9rem; color: #4A2600; background: radial-gradient(circle at 35% 30%, #FFE8CC, #E8590C 70%); }
.wcz-coin.note { width: 96px; height: 56px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #5C940D, #2B8A3E); }
.wcz-seq { font: 700 1.6rem/1.6 'Space Grotesk', sans-serif; letter-spacing: .04em; text-align: center; }
.wcz-seq span { display: inline-grid; place-items: center; min-width: 2.2rem; padding: 0 .3rem; border-radius: 10px; color: var(--wc); border: 2px dashed var(--wc); }
.wcz-txt { max-width: 560px; padding: 1rem 1.2rem; border-radius: 14px; font: 500 1.05rem/1.6 'Inter', sans-serif; background: color-mix(in srgb, var(--wc) 7%, var(--bg)); border-left: 4px solid var(--wc); }

/* Podsumowanie */
.wcz-sum { display: grid; gap: .9rem; }
.wcz-sum h3 { font: 700 1.6rem 'Space Grotesk', sans-serif; }
.wcz-box { padding: 1rem 1.2rem; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); }
.wcz-box h4 { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font: 700 1rem 'Space Grotesk', sans-serif; }
.wcz-box.ok h4 i { color: var(--ok); } .wcz-box.help h4 i { color: #E8590C; } .wcz-box h4 i { color: var(--wc); }
.wcz-box p { font-size: .95rem; line-height: 1.55; color: var(--muted); }
.wcz-box ul { display: grid; gap: .4rem; margin-bottom: .6rem; list-style: none; }
.wcz-box li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .5rem .7rem; border-radius: 10px; font-size: .92rem; background: var(--glass); }
.wcz-box li .wcz-big { font-size: 1rem; }
.wcz-box li > b { color: var(--ok); }
.wcz-self p { margin-bottom: .5rem; font-weight: 600; }
.wcz-self div { display: flex; flex-wrap: wrap; gap: .6rem; }
.wcz-self button { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 99px; cursor: pointer; font: 600 .95rem 'Inter', sans-serif; color: var(--text); background: var(--bg2); border: 2px solid var(--border); }
.wcz-self button span { font-size: 1.3rem; }
.wcz-self button[aria-pressed="true"] { border-color: var(--wc); background: color-mix(in srgb, var(--wc) 12%, var(--bg2)); }

@media (max-width: 600px) {
  .wcz-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .wcz-act { min-height: 118px; padding: .8rem; }
  .wcz-act small { font-size: .78rem; }
  .wcz-pp { position: static; justify-self: start; }
  .wcz-card { padding: 1rem; }
  .wcz-q p { font-size: 1.12rem; }
  .wcz-big { font-size: 1.55rem; }
  .wcz-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcz-ch--mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcz-ch--mid button { font-size: 1.05rem; }
  .wcz-ch--long, .wcz-ch--wrap { grid-template-columns: minmax(0, 1fr); }
  .wcz-log li { grid-template-columns: 1fr; gap: .1rem; }
  .wcz-seg button { padding: .45rem .7rem; font-size: .85rem; }
}
/* rysunki obszarów: przyroda, społeczna, plastyka i muzyka, technika (emoji, próbki barw, flaga, rytm, plansza robota) */
.wcz-emoji { display: block; font-size: 3.2rem; line-height: 1.1; text-align: center; }
.wcz-sw { display: inline-flex; align-items: center; gap: .6rem; }
.wcz-sw i { width: 54px; height: 54px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 18%, transparent); }
.wcz-sw b { font-size: 1.6rem; color: var(--muted); }
.wcz-flag { width: 120px; height: auto; border-radius: 4px; }
.wcz-rhythm { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.wcz-rhythm span { display: grid; place-items: center; min-width: 58px; padding: .35rem .5rem; border-radius: 12px; font-size: 2rem; line-height: 1.1;
  background: color-mix(in srgb, var(--wc) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--wc) 30%, transparent); }
.wcz-rhythm small { font: 700 .8rem 'Space Mono', monospace; color: var(--wc); }
.wcz-rhythm .r-pauza { color: var(--muted); }
.wcz-cmds { font-size: 1.25em; letter-spacing: .15em; white-space: nowrap; }
.wcz-grid { display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; width: min(100%, calc(var(--n) * 52px)); }
.wcz-grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: clamp(1.1rem, 4.5vw, 1.6rem); background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.wcz-grid span.start { background: color-mix(in srgb, var(--wc) 25%, var(--bg)); outline: 2px solid var(--wc); }
@media (prefers-reduced-motion: reduce) { .wcz-card, .wcz-ch button.bad { animation: none; } .wcz-act, .wcz-ch button { transition: none; } }