/* Smocza Matematyka — three-period lesson (App.lesson3) and demo helpers (App.demo), js/core/lesson3.js.
 * The lesson layer covers the whole 1040 x 712 module area:
 *   task band 0–110 (command) | tiles in 110–592 | words / main button 592–712.
 */

.l3 {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg);
}

/* command text: Polish letters -> text font, not the digits-only number font; 28–32 px (§1.4) */
.l3 .l3-band .task-content {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.l3-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1040px;
  height: 592px;
  /* the stage overlaps the task band: let taps through to the band's ear (§3.0.1), only the tiles take them */
  pointer-events: none;
}
.l3-stage .l3-tile {
  pointer-events: auto;
}

/* ---------- item tiles (the whole tile is the hit area) ---------- */

.l3-tile {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: left 0.62s cubic-bezier(0.45, 0.05, 0.3, 1), opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.l3-tile:focus-visible {
  outline: none;
}
.l3-tile:focus-visible .l3-card {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
}
.l3 .l3-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 34px;
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.1s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.l3-tile:active .l3-card {
  transform: translateY(4px) scale(0.985);
}
.l3-art {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.l3-tile.is-hidden {
  visibility: hidden;
}
.l3 .l3-card.is-enter {
  animation: l3-enter 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.l3 .l3-card.is-wobble {
  animation: l3-wobble 0.75s ease-in-out;
}
.l3 .l3-card.is-ok {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.l3 .l3-card.fx-highlight {
  border-color: var(--gold);
}
.l3-tile.is-dim {
  opacity: 0.28;
  filter: saturate(0.4);
  cursor: default;
}
.l3-tile.is-focus {
  transform: scale(1.05);
  z-index: 2;
}
.l3.is-shuffling .l3-tile .l3-card {
  transform: translateY(-10px) scale(0.97);
  transition: transform 0.25s ease;
}
/* reduced motion: the shuffle is a crossfade (js), no lift */
.l3.is-shuffling.is-calm .l3-tile .l3-card {
  transform: none;
}

/* gold sparkles around a correctly named / shown item */
.l3-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.l3-sparks i {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  background: var(--gold);
  filter: drop-shadow(0 1px 0 var(--gold-deep));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: rotate(var(--a)) translateY(0) scale(0.4);
  opacity: 0;
  animation: l3-spark 0.85s ease-out forwards;
}

/* ---------- period 3: word-only buttons in the bottom band ---------- */

.l3-words {
  position: absolute;
  left: 0;
  top: 592px;
  width: 1040px;
  height: 120px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 24px;
  z-index: 2;
}
.l3.show-words .l3-words {
  display: flex;
}
.l3.show-words .l3-bar {
  visibility: hidden;
}
.l3 .l3-word {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 700;
  min-width: 240px;
  max-width: 320px;
  height: 104px;
  padding: 0 26px;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
  border-width: 4px;
  animation: pop-in 0.3s ease;
}
.l3 .l3-word.is-armed {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.l3 .l3-word.is-ok {
  border-color: var(--gold-deep);
  background: var(--gold);
}
.l3 .l3-word.is-wobble {
  animation: l3-wobble 0.75s ease-in-out;
}
.l3-words.is-locked .l3-word:not(.is-picked) {
  opacity: 0.45;
}
/* the first ~400 ms after the words appear: locked (a tap aimed at "Już!" must not pick a word), but not dimmed */
.l3-words.is-locked.is-arming .l3-word:not(.is-picked) {
  opacity: 1;
}
.l3-words.is-arming {
  pointer-events: none;
}

@keyframes l3-enter {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes l3-wobble {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-5deg); }
  40% { transform: rotate(4.5deg); }
  62% { transform: rotate(-3deg); }
  82% { transform: rotate(1.5deg); }
}
@keyframes l3-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-215px) scale(1.15); }
}

/* ---------- App.demo ---------- */

/* transparent layer over the module area while a scripted demo plays */
.demo-shield {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: transparent;
}
/* "Dalej" (first visit, after 10 s) / "Pomiń" (later visits) in the main-button corner */
.demo-skip {
  position: absolute;
  right: 24px;
  top: 604px;
  z-index: 61;
  min-width: 220px;
  height: 96px;
  font-size: 32px;
}
.demo-skip.is-waiting {
  visibility: hidden;
}
.demo-has-skip .action-bar .btn-main {
  visibility: hidden;
}
/* errorless "together" task: everything but the next element is quiet */
.demo-together .demo-dim {
  opacity: 0.35;
  filter: grayscale(0.6);
  transition: opacity 0.25s ease, filter 0.25s ease;
}