/* Smocza Matematyka — module 'poznaj-pieniadze' (Poznaj pieniądze), js/modules/poznaj-pieniadze.js.
 * Module area 1040 x 712: task band 0–110 | material zone 110–592 (.pp-zone) | action bar 592–712.
 * Every selector starts with .mod-poznaj-pieniadze. Error = amber (--err), success = gold (--gold).
 */

.mod-poznaj-pieniadze {
  background: radial-gradient(ellipse at 50% 38%, #fcf7ea 0%, #f5ead2 62%, #eedfc0 100%);
}

/* ---------- frame ---------- */

.mod-poznaj-pieniadze .pp-zone {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1040px;
  height: 482px;
}
.mod-poznaj-pieniadze .pp-band .task-content {
  font-family: var(--font);
}
.mod-poznaj-pieniadze .pp-band-text {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* flights inside the module area */
.mod-poznaj-pieniadze .pp-fly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 10px 8px rgba(30, 20, 10, 0.3));
}

/* ---------- L1–L3: three-period lesson highlights (period 1: colour and number) ---------- */

.mod-poznaj-pieniadze .pp-hl {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-dasharray: 7 4;
  stroke-linecap: round;
  pointer-events: none;
  animation: pp-ants 0.9s linear infinite;
}
.mod-poznaj-pieniadze .mat-note .pp-hl {
  stroke-width: 4.5;
}
/* the ring is shown by its two edges */
.mod-poznaj-pieniadze .pp-hl-ring {
  stroke-width: 3;
}
@keyframes pp-ants {
  to { stroke-dashoffset: -22; }
}

/* ---------- L4: boxes (szkatułki) and the tray ---------- */

.mod-poznaj-pieniadze .pp-boxes {
  position: absolute;
  left: 0;
  top: 14px; /* breathing room under the task band */
  width: 1040px;
  height: 214px;
  display: flex;
  justify-content: center;
  gap: 64px;
}
.mod-poznaj-pieniadze .pp-boxes-3 {
  gap: 30px;
}
.mod-poznaj-pieniadze .pp-box {
  position: relative;
  width: 340px;
  height: 214px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
}
.mod-poznaj-pieniadze .pp-boxes-3 .pp-box {
  width: 304px;
}
.mod-poznaj-pieniadze .pp-box:active {
  transform: translateY(3px);
}
.mod-poznaj-pieniadze .pp-box-lid {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 48px;
  border-radius: 20px 20px 6px 6px;
  background: linear-gradient(180deg, #84522a 0%, #643a18 100%);
  border-bottom: 5px solid #d9a441;
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, 0.25), 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.mod-poznaj-pieniadze .pp-box-lid::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 12px;
  width: 34px;
  height: 14px;
  margin-left: -17px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f3d27a, #c99632);
}
.mod-poznaj-pieniadze .pp-box-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #c98a52 0%, #a3683a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 232, 196, 0.4),
    inset 0 -5px 0 rgba(70, 38, 14, 0.25),
    0 6px 0 rgba(70, 40, 16, 0.35),
    0 12px 22px rgba(42, 34, 56, 0.18);
}
.mod-poznaj-pieniadze .pp-box-in {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 84px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 28%, #8a5aa8 0%, #5e3478 64%, #4a2862 100%);
  box-shadow: inset 0 6px 14px rgba(20, 8, 30, 0.55);
  overflow: hidden;
}
.mod-poznaj-pieniadze .pp-thumbs {
  position: absolute;
  inset: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0;
}
.mod-poznaj-pieniadze .pp-thumb {
  display: flex;
  animation: pp-pop-in 0.3s ease;
}
.mod-poznaj-pieniadze .pp-thumb + .pp-thumb {
  margin-left: -8px;
}
/* banknotes overlap like a small stack, so four of them still fit in one row */
.mod-poznaj-pieniadze .pp-thumb + .pp-thumb.is-note {
  margin-left: -40px;
}
.mod-poznaj-pieniadze .pp-thumb.is-hidden {
  visibility: hidden;
  animation: none;
}
.mod-poznaj-pieniadze .pp-box-plate {
  position: absolute;
  left: 50%;
  bottom: 12px;
  height: 60px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffaea 0%, #f4e3ba 100%);
  border: 3px solid #d9a441;
  box-shadow: 0 2px 0 rgba(70, 40, 16, 0.25);
  white-space: nowrap;
}
.mod-poznaj-pieniadze .pp-box-word {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  color: #4a2e14;
}
.mod-poznaj-pieniadze .pp-box-unit {
  min-width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #d9a441;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  color: #6a4520;
}
.mod-poznaj-pieniadze .pp-box-ico {
  flex: none;
}
/* something is in her hand: the boxes invite a tap */
.mod-poznaj-pieniadze .pp-boxes.is-ready .pp-box-body {
  animation: pp-box-ready 1.4s ease-in-out infinite;
}
@keyframes pp-box-ready {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 232, 196, 0.4), 0 6px 0 rgba(70, 40, 16, 0.35), 0 0 0 0 rgba(242, 183, 5, 0.5); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 232, 196, 0.4), 0 6px 0 rgba(70, 40, 16, 0.35), 0 0 0 10px rgba(242, 183, 5, 0); }
}
.mod-poznaj-pieniadze .pp-box.is-full .pp-box-in {
  box-shadow: inset 0 6px 14px rgba(20, 8, 30, 0.55), 0 0 0 4px var(--gold);
}

.mod-poznaj-pieniadze .pp-tray {
  position: absolute;
  left: 20px;
  top: 252px; /* >= 24 px between the boxes and the first row of pieces */
  width: 1000px;
  height: 228px;
  box-sizing: border-box;
  padding: 6px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, #ecd8ae 0%, #dcc08c 100%);
  box-shadow: inset 0 5px 12px rgba(90, 60, 20, 0.28), 0 4px 0 rgba(120, 80, 30, 0.22);
}
.mod-poznaj-pieniadze .pp-tray-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.mod-poznaj-pieniadze .pp-piece {
  position: relative;
  min-width: 100px;
  height: 96px;
  border: 0;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mod-poznaj-pieniadze .pp-piece.is-note {
  min-width: 196px;
}
.mod-poznaj-pieniadze .pp-face {
  display: flex;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.mod-poznaj-pieniadze .pp-piece:active .pp-face {
  transform: translateY(3px) rotate(var(--rot, 0deg));
}
.mod-poznaj-pieniadze .pp-piece.is-up {
  z-index: 5;
}
.mod-poznaj-pieniadze .pp-piece.is-up .pp-face {
  transform: translateY(-14px) scale(1.08);
  filter: drop-shadow(0 14px 10px rgba(30, 20, 10, 0.35));
}
.mod-poznaj-pieniadze .pp-piece.is-up .mat {
  box-shadow: 0 0 0 5px var(--gold), 0 0 0 11px rgba(242, 183, 5, 0.35);
}
.mod-poznaj-pieniadze .pp-piece .mat-note {
  border-radius: 6px;
}
.mod-poznaj-pieniadze .pp-piece.is-gone,
.mod-poznaj-pieniadze .pp-piece.is-flying {
  visibility: hidden;
}
.mod-poznaj-pieniadze .pp-piece.is-err .mat {
  box-shadow: 0 0 0 6px var(--err), 0 0 0 12px var(--err-soft);
}

/* rung 2: the piece grows in place (look closely), the box labels pulse for comparing */
.mod-poznaj-pieniadze .pp-piece.is-look {
  z-index: 8;
}
.mod-poznaj-pieniadze .pp-piece.is-look .pp-face {
  transform: translateY(-18px) scale(1.5);
  filter: drop-shadow(0 12px 10px rgba(30, 20, 10, 0.3));
}
.mod-poznaj-pieniadze .pp-boxes.is-compare .pp-box-plate {
  animation: pp-plate 1.2s ease-in-out infinite;
}
@keyframes pp-plate {
  0%, 100% { box-shadow: 0 2px 0 rgba(70, 40, 16, 0.25), 0 0 0 0 rgba(242, 183, 5, 0.7); }
  50% { box-shadow: 0 2px 0 rgba(70, 40, 16, 0.25), 0 0 0 10px rgba(242, 183, 5, 0); }
}

/* ---------- L5a: banknote stairs ---------- */

.mod-poznaj-pieniadze .pp-stairs {
  position: absolute;
  left: 0;
  top: 0;
  width: 470px;
  height: 482px;
  pointer-events: none;
}
.mod-poznaj-pieniadze .pp-wall {
  position: absolute;
  left: 18px;
  top: 2px;
  width: 18px;
  height: 474px;
  border-radius: 9px;
  background: linear-gradient(90deg, #7d4f24 0%, #b47e45 50%, #7d4f24 100%);
  box-shadow: 3px 0 5px rgba(60, 35, 10, 0.25);
}
.mod-poznaj-pieniadze .pp-slot {
  position: absolute;
  left: 40px;
  width: 140px;
  height: 62px;
  box-sizing: border-box;
  border: 3px dashed rgba(122, 90, 50, 0.32);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.25);
}
.mod-poznaj-pieniadze .pp-note {
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mod-poznaj-pieniadze .pp-nface {
  display: flex;
}
.mod-poznaj-pieniadze .pp-note .mat-note {
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(40, 25, 10, 0.25);
  transition: box-shadow 0.2s ease;
}
.mod-poznaj-pieniadze .pp-note:active .pp-nface {
  transform: translateY(2px);
}
.mod-poznaj-pieniadze .pp-note.is-err .mat-note {
  box-shadow: 0 0 0 6px var(--err), 0 0 0 11px var(--err-soft);
}
.mod-poznaj-pieniadze .pp-note.is-pulse .mat-note {
  animation: pp-amber 1s ease-in-out infinite;
}
.mod-poznaj-pieniadze .pp-note.is-count .mat-note {
  box-shadow: 0 0 0 6px var(--gold), 0 0 16px rgba(242, 183, 5, 0.7);
}
.mod-poznaj-pieniadze .pp-stairs.is-ok .pp-wall {
  box-shadow: 0 0 0 4px var(--gold), 0 0 22px rgba(242, 183, 5, 0.8);
}
.mod-poznaj-pieniadze .pp-zone.is-stairs-ok .pp-note .mat-note {
  box-shadow: 0 0 0 4px var(--gold), 0 0 18px rgba(242, 183, 5, 0.6);
}
@keyframes pp-amber {
  0%, 100% { box-shadow: 0 0 0 5px var(--err), 0 0 0 5px rgba(240, 140, 46, 0.6); }
  50% { box-shadow: 0 0 0 5px var(--err), 0 0 0 16px rgba(240, 140, 46, 0); }
}

/* ---------- L5b: which coin is worth more ---------- */

.mod-poznaj-pieniadze .pp-coinbtn {
  position: absolute;
  top: 50px;
  width: 270px;
  height: 410px;
  border: 0;
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mod-poznaj-pieniadze .pp-coinbtn.is-left {
  left: 24px;
}
.mod-poznaj-pieniadze .pp-coinbtn.is-right {
  right: 24px;
}
.mod-poznaj-pieniadze .pp-coinwrap {
  width: 262px;
  height: 262px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  background: radial-gradient(ellipse at 50% 40%, #fffdf6 0%, #f5ead1 100%);
  border: 4px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mod-poznaj-pieniadze .pp-coinbtn:active .pp-coinwrap {
  transform: translateY(3px);
}
.mod-poznaj-pieniadze .pp-coinbtn.is-err .pp-coinwrap {
  border-color: var(--err);
  box-shadow: 0 0 0 7px var(--err-soft), var(--shadow-sm);
}
.mod-poznaj-pieniadze .pp-coinbtn.is-ok .pp-coinwrap {
  border-color: var(--gold);
  box-shadow: 0 0 0 9px rgba(242, 183, 5, 0.35), 0 0 26px rgba(242, 183, 5, 0.6);
}
.mod-poznaj-pieniadze .pp-mag {
  visibility: hidden;
  min-width: 170px;
  padding: 2px 22px 6px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 20px;
  background: #fffdf5;
  border: 4px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: 60px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mod-poznaj-pieniadze .pp-coinbtn.show-mag .pp-mag {
  visibility: visible;
  animation: pp-pop-in 0.35s ease;
}
.mod-poznaj-pieniadze .pp-coinbtn.is-ok .pp-mag {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.mod-poznaj-pieniadze .pp-mid {
  position: absolute;
  left: 320px;
  top: 14px;
  width: 400px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mod-poznaj-pieniadze .pp-qmark {
  font-family: var(--font-num);
  font-size: 150px;
  font-weight: 700;
  color: rgba(93, 84, 112, 0.18);
  transform: translateY(-40px);
}
.mod-poznaj-pieniadze .pp-mid.is-done .pp-qmark {
  visibility: hidden;
}
.mod-poznaj-pieniadze .pp-scale {
  animation: pp-fade-in 0.4s ease;
}
.mod-poznaj-pieniadze .pp-sqs {
  display: flex;
  align-items: flex-end;
  gap: 36px;
  animation: pp-fade-in 0.4s ease;
}
.mod-poznaj-pieniadze .pp-sqs.is-big {
  gap: 28px;
}
.mod-poznaj-pieniadze .pp-sq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mod-poznaj-pieniadze .pp-sq-set {
  display: flex;
  gap: 8px;
}
.mod-poznaj-pieniadze .pp-sq .money-gsq-label {
  font-size: 26px;
}
.mod-poznaj-pieniadze .pp-eqbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 28px;
  background: #fffdf5;
  border: 4px solid var(--line);
  box-shadow: var(--shadow);
  animation: pp-fade-in 0.35s ease;
}
.mod-poznaj-pieniadze .pp-eq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}
.mod-poznaj-pieniadze .pp-eq-sign {
  font-family: var(--font-num);
  font-size: 56px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1;
}
.mod-poznaj-pieniadze .pp-pop-in {
  animation: pp-pop-in 0.35s ease;
}

/* ---------- L6: exchange ---------- */

.mod-poznaj-pieniadze .pp-ped {
  position: absolute;
  left: 18px;
  top: 34px;
  width: 280px;
  height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.mod-poznaj-pieniadze .pp-ped-cushion {
  position: relative;
  width: 264px;
  height: 236px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 44px;
  background: radial-gradient(ellipse at 50% 32%, #a964b2 0%, #74397f 66%, #5a2a64 100%);
  border: 4px solid #d9a441;
  box-shadow: inset 0 -12px 20px rgba(30, 5, 40, 0.45), inset 0 8px 12px rgba(255, 210, 255, 0.18), 0 8px 0 rgba(60, 20, 70, 0.3);
}
.mod-poznaj-pieniadze .pp-ped-piece {
  display: flex;
}
.mod-poznaj-pieniadze .pp-ped-piece.is-gone {
  visibility: hidden;
}
.mod-poznaj-pieniadze .pp-ped-pile {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 6px;
}
.mod-poznaj-pieniadze .pp-ped-pile.is-many {
  gap: 2px;
}
.mod-poznaj-pieniadze .pp-ped-pile .is-hidden {
  visibility: hidden;
}
.mod-poznaj-pieniadze .pp-ped-label {
  min-width: 150px;
  padding: 2px 22px 6px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 20px;
  background: #fffdf5;
  border: 4px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
}
.mod-poznaj-pieniadze .pp-ped.is-done .pp-ped-cushion {
  box-shadow: inset 0 -12px 20px rgba(30, 5, 40, 0.45), 0 0 0 6px var(--gold), 0 0 26px rgba(242, 183, 5, 0.6);
}
.mod-poznaj-pieniadze .pp-eqsign {
  position: absolute;
  left: 302px;
  top: 128px;
  font-family: var(--font-num);
  font-size: 64px;
  font-weight: 700;
  color: var(--ink-soft);
}
.mod-poznaj-pieniadze .pp-counter {
  position: absolute;
  left: 342px;
  top: 4px;
}
.mod-poznaj-pieniadze .pp-drawer {
  position: absolute;
  left: 342px;
  top: 346px; /* 346 + 134 = 480: the bank stays inside the material zone */
}
/* §1.4: >= 24 px between compartments (the shared drawer packs them 6–10 px apart; here at most 2 fit easily) */
.mod-poznaj-pieniadze .pp-drawer .money-drawer-row {
  gap: 32px !important;
}
.mod-poznaj-pieniadze .pp-counter.pp-moved .money-lada-area .money-item {
  visibility: hidden;
}
.mod-poznaj-pieniadze .pp-counter.pp-full-shake .money-strip-track {
  animation: shake 0.45s ease;
}

/* ---------- the dragon's gold glow (demos, "together") follows the shape of the material ---------- */
/* (round coins, rounded boxes and notes) instead of the square hit area around it */
.mod-poznaj-pieniadze .pp-piece.fx-highlight,
.mod-poznaj-pieniadze .pp-box.fx-highlight,
.mod-poznaj-pieniadze .pp-note.fx-highlight,
.mod-poznaj-pieniadze .pp-coinbtn.fx-highlight {
  animation: none;
}
.mod-poznaj-pieniadze .pp-piece.fx-highlight .mat,
.mod-poznaj-pieniadze .pp-note.fx-highlight .mat-note,
.mod-poznaj-pieniadze .pp-coinbtn.fx-highlight .pp-coinwrap {
  animation: pp-glow 1.2s ease-in-out infinite;
}
.mod-poznaj-pieniadze .pp-box.fx-highlight .pp-box-body,
.mod-poznaj-pieniadze .pp-boxes.is-ready .pp-box.fx-highlight .pp-box-body {
  animation: pp-glow-box 1.2s ease-in-out infinite;
}
@keyframes pp-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0.9); }
  50% { box-shadow: 0 0 0 14px rgba(242, 183, 5, 0); }
}
@keyframes pp-glow-box {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 232, 196, 0.4), 0 6px 0 rgba(70, 40, 16, 0.35), 0 0 0 0 rgba(242, 183, 5, 0.9); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 232, 196, 0.4), 0 6px 0 rgba(70, 40, 16, 0.35), 0 0 0 14px rgba(242, 183, 5, 0); }
}

/* ---------- shared animations ---------- */

@keyframes pp-pop-in {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes pp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}