/* Smocza Matematyka — module 'gniazda' (Gniazda smoczątek): unit division board. All selectors: .mod-gniazda */

/* ---------- task band ---------- */
.mod-gniazda .g-eq {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 4px 14px;
  border-radius: 20px;
  position: relative;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.mod-gniazda .g-eq .mat-num {
  font-weight: 700;
}
.mod-gniazda .g-sign {
  font-size: 56px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1;
}
.mod-gniazda .g-sign-r {
  font-family: var(--font);
  font-size: 44px;
}
.mod-gniazda .g-slot {
  min-width: 74px;
  height: 82px;
  padding: 0 10px;
  border: 4px dashed #cdbf9f;
  border-radius: 18px;
  background: var(--panel);
  color: #c4b9a4;
  font-size: 52px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mod-gniazda .g-slot.has {
  border-style: solid;
  border-color: #b9a782;
}
.mod-gniazda .g-slot.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 7px var(--gold-soft);
  animation: gniazda-slot-glow 1.6s ease-in-out infinite;
}
@keyframes gniazda-slot-glow {
  0%, 100% { box-shadow: 0 0 0 5px var(--gold-soft); }
  50% { box-shadow: 0 0 0 11px var(--gold-soft); }
}
.mod-gniazda .g-eq.is-done {
  transition: background 0.3s ease, box-shadow 0.3s ease;
  background: var(--gold-soft);
  box-shadow: 0 0 0 4px var(--gold), 0 0 26px rgba(242, 183, 5, 0.55);
}
.mod-gniazda .g-instr {
  flex: 1;
  min-width: 0;
  margin-left: 18px;
  font: 700 30px/1.15 var(--font);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-gniazda .g-instr.is-mul {
  font-family: var(--font-num);
  font-size: 40px;
  color: var(--gold-deep);
}
.mod-gniazda .g-spark {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  animation: gniazda-spark 1.1s ease-out forwards;
}
@keyframes gniazda-spark {
  0% { transform: scale(0) rotate(0); opacity: 1; }
  60% { transform: scale(1.2) rotate(40deg); opacity: 1; }
  100% { transform: scale(0.4) rotate(80deg); opacity: 0; }
}

/* ---------- material zone (110–592) ---------- */
.mod-gniazda .g-zone {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1040px;
  height: 482px;
}
.mod-gniazda .g-zone.is-fade {
  animation: fade-in 0.28s ease;
}
.mod-gniazda .g-zone.g-reset,
.mod-gniazda .g-zone.g-reset * {
  transition: none !important;
}

/* the wooden board: green nest strip on top, 9 × 9 holes, row numbers (quotient) on the left */
.mod-gniazda .g-board {
  position: absolute;
  left: 16px;
  top: 9px;
  width: 832px;
  height: 464px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f2dbb4 0%, #e6c595 100%);
  box-shadow: inset 0 0 0 3px #c99a64, 0 6px 0 rgba(110, 72, 34, 0.2), 0 12px 24px rgba(42, 34, 56, 0.14);
  transform-origin: 0 0;
  transition: transform 0.55s ease, left 0.55s ease, top 0.55s ease, box-shadow 0.3s ease;
}
.mod-gniazda .g-zone.is-read .g-board {
  transform: scale(0.74);
  top: 4px;
}
.mod-gniazda .g-strip {
  position: absolute;
  left: 40px;
  top: 0;
  width: 792px;
  height: 104px;
  display: flex;
  border-radius: 0 22px 8px 8px;
  background: linear-gradient(180deg, #74c582 0%, #46a259 100%);
  box-shadow: inset 0 -4px 0 rgba(20, 80, 35, 0.25);
}
.mod-gniazda .g-nest {
  position: relative;
  width: 88px;
  height: 104px;
  flex: none;
  cursor: pointer;
  border-radius: 14px;
}
.mod-gniazda .g-nest-back,
.mod-gniazda .g-nest-front {
  position: absolute;
  left: 0;
  bottom: 2px;
  pointer-events: none;
}
.mod-gniazda .g-nest-back {
  bottom: 18px;
}
.mod-gniazda .g-baby {
  position: absolute;
  left: 11px;
  bottom: 18px;
  width: 65px;
  height: 66px;
  opacity: 0;
  transform: translateY(14px) scale(0.6);
  transform-origin: 50% 100%;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
.mod-gniazda .g-baby.on {
  opacity: 1;
  transform: none;
}
.mod-gniazda .g-baby.g-hop.on {
  animation: gniazda-hop 0.42s ease;
}
@keyframes gniazda-hop {
  0% { transform: translateY(-34px) scale(0.8); }
  60% { transform: translateY(3px) scale(1.04, 0.94); }
  100% { transform: none; }
}
.mod-gniazda .g-baby.g-no {
  animation: gniazda-headshake 0.6s ease;
}
@keyframes gniazda-headshake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  70% { transform: rotate(-6deg); }
}
.mod-gniazda .g-nest.is-off .g-nest-back,
.mod-gniazda .g-nest.is-off .g-nest-front {
  opacity: 0.45;
}
.mod-gniazda .g-baby-ghost {
  position: absolute;
  left: 18px;
  bottom: 24px;
  width: 52px;
  height: 56px;
  border-radius: 50% 50% 42% 42%;
  border: 4px dashed var(--err);
  background: rgba(255, 233, 212, 0.55);
  opacity: 0;
  pointer-events: none;
}
.mod-gniazda .g-baby-ghost.on {
  opacity: 1;
}
.mod-gniazda .g-badge {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font: 700 30px/40px var(--font-num); /* >= 22 px also on the smaller reading board (× 0.74) */
  text-align: center;
  box-shadow: 0 2px 0 var(--gold-deep);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
  z-index: 3;
}
.mod-gniazda .g-badge.on {
  opacity: 1;
  transform: none;
}
.mod-gniazda .g-say {
  position: absolute;
  left: 58px; /* beside the refusing dragon: its own pearls (the reason) stay visible below it */
  top: 84px;
  z-index: 8;
  padding: 8px 14px;
  border-radius: 16px;
  background: #fff;
  border: 3px solid var(--err);
  font: 700 26px/1 var(--font);
  color: var(--ink);
  white-space: nowrap;
  transform: scale(0.7);
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.mod-gniazda .g-say::before {
  content: '';
  position: absolute;
  left: 10px;
  top: -12px;
  border: 9px solid transparent;
  border-bottom-color: var(--err);
  border-top: 0;
}
.mod-gniazda .g-say.on {
  opacity: 1;
  transform: none;
}
.mod-gniazda .g-nest.is-full {
  background: rgba(255, 241, 191, 0.35);
}

/* rows and holes */
.mod-gniazda .g-rows {
  position: absolute;
  left: 0;
  top: 104px;
  width: 832px;
  height: 360px;
}
.mod-gniazda .g-row {
  display: flex;
  height: 40px;
  border-radius: 12px;
  transition: background 0.25s ease;
}
.mod-gniazda .g-row.is-current {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 2px rgba(242, 183, 5, 0.55);
}
.mod-gniazda .g-rnum {
  width: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 30px/1 var(--font-num);
  color: #8a6440;
}
.mod-gniazda .g-row.is-full .g-rnum {
  color: var(--ink);
}
.mod-gniazda .g-hole {
  position: relative;
  width: 88px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-gniazda .g-hole::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #6a4627 0%, #86603b 62%, #a77d52 100%);
  box-shadow: inset 0 3px 5px rgba(40, 20, 5, 0.45), 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: opacity 0.25s ease;
}
.mod-gniazda .g-row.is-later .g-hole::before {
  opacity: 0.55;
}
.mod-gniazda .g-hole.is-off::before {
  opacity: 0.28;
}
.mod-gniazda .g-item,
.mod-gniazda .g-ghost {
  position: absolute;
  left: 31px;
  top: 7px;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.mod-gniazda .g-item {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.12s ease, transform 0.18s ease;
}
.mod-gniazda .g-item.on {
  opacity: 1;
  transform: none;
}
.mod-gniazda .g-item.on.g-gone {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mod-gniazda .g-ghost {
  opacity: 0;
  background: none !important;
  box-shadow: none !important;
  border: 3px dashed var(--m-units);
}
.mod-gniazda .g-ghost.on {
  opacity: 0.7;
  animation: gniazda-ghost 1.4s ease-in-out infinite;
}
@keyframes gniazda-ghost {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}
.mod-gniazda.g-po .g-item,
.mod-gniazda.g-po .g-ghost {
  left: 32px;
  top: 4px;
  width: 24px;
  height: 31px;
}

/* the pearls (green, like the Montessori unit division board) and the dragon eggs (L4) */
.mod-gniazda .is-pearl {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0, #d9f6de 9%, #63d27a 30%, var(--m-units) 60%, #135a28 100%);
  box-shadow: 0 1px 2px rgba(10, 50, 25, 0.45);
}
.mod-gniazda .is-egg {
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 30% 64%, #4f9d5c 0 7%, transparent 9%),
    radial-gradient(circle at 66% 44%, #4f9d5c 0 8%, transparent 10%),
    radial-gradient(circle at 46% 24%, #6bb377 0 6%, transparent 8%),
    radial-gradient(circle at 60% 78%, #6bb377 0 5%, transparent 7%),
    radial-gradient(ellipse at 36% 30%, #ffffff 0, #f7f3df 32%, #e2e8c2 70%, #b8c78c 100%);
  box-shadow: 0 1px 2px rgba(60, 60, 20, 0.4);
}
.mod-gniazda .g-ghost.is-egg {
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
}
.mod-gniazda .g-fly {
  position: absolute;
  z-index: 70;
  pointer-events: none;
  will-change: transform;
}

/* row glow after a full round / a full nest */
.mod-gniazda .g-rowglow {
  animation: gniazda-rowglow 0.9s ease;
}
@keyframes gniazda-rowglow {
  0% { background: rgba(242, 183, 5, 0); }
  30% { background: rgba(242, 183, 5, 0.45); }
  100% { background: rgba(242, 183, 5, 0); }
}

/* help: amber outline of the place (rung 1), counting pulses (rung 2) */
.mod-gniazda .g-err {
  outline: 5px solid var(--err) !important;
  outline-offset: 3px;
  border-radius: 16px;
  box-shadow: 0 0 0 10px rgba(240, 140, 46, 0.18);
}
.mod-gniazda .g-errhole::before {
  box-shadow: 0 0 0 4px var(--err), inset 0 3px 5px rgba(40, 20, 5, 0.45);
}
.mod-gniazda .g-extra {
  animation: gniazda-extra 1s ease-in-out infinite;
  border-radius: 14px;
}
@keyframes gniazda-extra {
  0%, 100% { background: rgba(240, 140, 46, 0); }
  50% { background: rgba(240, 140, 46, 0.4); }
}
.mod-gniazda .g-pulse {
  animation: gniazda-pulse 0.45s ease;
}
@keyframes gniazda-pulse {
  0% { transform: scale(1); filter: none; }
  40% { transform: scale(1.35); filter: drop-shadow(0 0 6px var(--gold)); }
  100% { transform: scale(1); filter: none; }
}
.mod-gniazda .g-baby.g-pulse.on {
  animation: gniazda-pulse 0.45s ease;
}
.mod-gniazda .g-hibox {
  position: absolute;
  left: -2px;
  width: 836px;
  border-radius: 14px;
  outline: 5px solid var(--err);
  outline-offset: 2px;
  box-shadow: 0 0 0 10px rgba(240, 140, 46, 0.18);
  pointer-events: none;
  opacity: 0;
}
.mod-gniazda .g-hibox.on {
  opacity: 1;
}
.mod-gniazda .g-chips {
  position: absolute;
  left: 250px;
  top: 220px;
  display: flex;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.25s ease;
}
.mod-gniazda .g-chips.on {
  opacity: 1;
}
.mod-gniazda .g-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-radius: 20px;
  background: #fff;
  border: 4px solid var(--err);
  box-shadow: var(--shadow-sm);
}
.mod-gniazda .g-chip.is-want {
  border-color: var(--gold);
}
.mod-gniazda .g-chip-l {
  font: 700 26px/1 var(--font);
  color: var(--ink-soft);
}
.mod-gniazda .g-chip b {
  font: 700 46px/1 var(--font-num);
  color: var(--ink);
}

/* ---------- jar, bowl and remainder dish ---------- */
.mod-gniazda .g-jar,
.mod-gniazda .g-bowl,
.mod-gniazda .g-dish {
  position: absolute;
  cursor: pointer;
  transition: left 0.55s ease, top 0.55s ease, opacity 0.35s ease;
}
.mod-gniazda .g-jar {
  left: 864px;
  top: 6px;
  width: 160px;
  height: 140px;
  display: none;
}
.mod-gniazda .g-jar.on {
  display: block;
}
.mod-gniazda .g-jar-art {
  position: absolute;
  left: 0;
  top: 0;
}
.mod-gniazda .g-bowl {
  left: 864px;
  top: 56px;
  width: 160px;
  height: 130px;
}
.mod-gniazda.g-na .g-bowl {
  top: 168px;
}
.mod-gniazda .g-bowl .mat-bowl,
.mod-gniazda .g-dish .mat-bowl {
  position: relative;
  display: block;
}
.mod-gniazda .g-dish {
  left: 869px;
  top: 300px;
  width: 150px;
  height: 128px;
}
.mod-gniazda.g-na .g-dish {
  top: 330px;
}
.mod-gniazda .g-dish-label {
  position: absolute;
  left: 0;
  top: 100px;
  width: 150px;
  text-align: center;
  font: 700 22px/28px var(--font);
  color: #5e5390;
}
.mod-gniazda .g-pile {
  position: absolute;
  pointer-events: none;
}
.mod-gniazda .g-pile-jar {
  left: 0;
  top: 0;
  width: 160px;
  height: 140px;
}
.mod-gniazda .g-pile-bowl {
  left: 18px;
  top: 17px;
  width: 124px;
  height: 96px;
}
.mod-gniazda .g-pile-dish {
  left: 23px;
  top: 18px;
  width: 104px;
  height: 64px;
}
.mod-gniazda .g-pi {
  position: absolute;
  opacity: 0;
}
.mod-gniazda .g-pi.on {
  opacity: 1;
}

/* reading layout: smaller board, dish under it, keypad on the right */
.mod-gniazda .g-zone.is-read .g-jar {
  opacity: 0;
  pointer-events: none;
}
.mod-gniazda .g-zone.is-read .g-bowl {
  left: 24px;
  top: 346px;
  opacity: 0;
  pointer-events: none;
}
.mod-gniazda .g-zone.is-read .g-dish {
  left: 60px;
  top: 350px;
}
.mod-gniazda.g-bez .g-zone.is-read .g-dish {
  left: 210px;
}
.mod-gniazda.g-bez .g-zone.is-open .g-bowl {
  opacity: 1;
  pointer-events: auto;
}
.mod-gniazda.g-bez .g-zone:not(.is-open) .g-dish {
  opacity: 0;
  pointer-events: none;
}

/* L5: the board waits under a lid ("Pokaż na desce") */
.mod-gniazda .g-lid {
  position: absolute;
  left: 0;
  top: 104px;
  width: 832px;
  height: 360px;
  border: 0;
  border-radius: 8px 8px 22px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(120, 76, 36, 0.08) 0 3px, transparent 3px 46px),
    linear-gradient(180deg, #d9a96c 0%, #c58f50 100%);
  box-shadow: inset 0 0 0 4px #a8743f, inset 0 8px 18px rgba(255, 255, 255, 0.25), 0 6px 0 rgba(110, 72, 34, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #4a2f12;
  font: 700 46px/1 var(--font);
  cursor: pointer;
  transition: transform 0.45s ease, opacity 0.45s ease;
  z-index: 4;
}
.mod-gniazda .g-lid:active {
  transform: translateY(4px);
}
.mod-gniazda .g-lid-ico svg {
  width: 96px;
  height: 84px;
  display: block;
}
.mod-gniazda .g-lid.is-open {
  transform: translateY(60px);
  opacity: 0;
  pointer-events: none;
}

/* bead bars of "Sprawdź mnożeniem" */
.mod-gniazda .g-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.mod-gniazda .g-barrow {
  position: absolute;
  left: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  animation: gniazda-bar-in 0.45s ease;
}
@keyframes gniazda-bar-in {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* helper buttons in the material zone (L5) */
.mod-gniazda .g-helper {
  position: absolute;
  left: 392px;
  top: 370px;
  min-height: 88px;
  font-size: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mod-gniazda .g-helper.on {
  opacity: 1;
  pointer-events: auto;
}
.mod-gniazda .g-helper .btn-icon svg {
  display: block;
}

/* ---------- keypad (reading, L5) ---------- */
.mod-gniazda .g-pad {
  position: absolute;
  left: 704px;
  top: 112px;
  width: 316px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 10;
}
.mod-gniazda .g-pad.on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ---------- "Starczy na cały rząd?" Tak / Nie ---------- */
.mod-gniazda .g-choices {
  position: absolute;
  right: 268px; /* the main-button corner stays free (skip button of demos, "Dalej") */
  top: 604px;
  display: flex;
  gap: 24px;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mod-gniazda .g-choices.on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mod-gniazda .g-choices .btn {
  min-width: 210px;
  height: 96px;
  font-size: 34px;
}

@media (prefers-reduced-motion: reduce) {
  .mod-gniazda .g-board,
  .mod-gniazda .g-jar,
  .mod-gniazda .g-bowl,
  .mod-gniazda .g-dish {
    transition: opacity 0.15s ease !important;
  }
}

/* rows already turned into bead bars: the empty holes step back */
.mod-gniazda .g-row.is-bar .g-hole::before {
  opacity: 0.18;
}
.mod-gniazda .g-item.on.g-gone {
  transition-delay: 0s;
}

/* gold success flash (the core's flash 'ok' is green, which means "units" here) */
.mod-gniazda .g-okflash {
  animation: gniazda-okflash 0.8s ease;
}
@keyframes gniazda-okflash {
  0% { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0.9); }
  100% { box-shadow: 0 0 0 18px rgba(242, 183, 5, 0); }
}
/* "one more round" ghost when the board has no next row (q = 9): in front of each dragon */
.mod-gniazda .g-nestghost {
  left: 31px;
  top: 74px;
  z-index: 4;
}
.mod-gniazda.g-po .g-nestghost {
  top: 70px;
}
/* compact keypad: it ends >= 24 px above the main-button corner (Dalej / Pomiń of a demo); keys stay 96 x 88 with
   12 px gaps (§1.4 c) — 112 + 72 + 8 + 4 x 88 + 3 x 12 = 580 */
.mod-gniazda .g-pad .numin {
  gap: 8px;
}
.mod-gniazda .g-pad .numin-display {
  height: 72px;
  font-size: 52px;
}
.mod-gniazda .g-pad .keypad {
  gap: 12px;
}

/* L5: the board is shown smaller (× 0.74) — keep the dragon's bubble readable */
.mod-gniazda.g-bez .g-say {
  font-size: 32px;
}
/* a real pearl tried in front of a dragon (no tenth row on the board) */
.mod-gniazda .g-nestghost.is-real {
  opacity: 1;
  animation: none;
  border: 0;
  background: radial-gradient(circle at 34% 30%, #ffffff 0, #d9f6de 9%, #63d27a 30%, var(--m-units) 60%, #135a28 100%) !important;
  box-shadow: 0 1px 2px rgba(10, 50, 25, 0.45) !important;
}