/* Smocza Matematyka — module 'ulamki' (Smocze placki). Every selector starts with .mod-ulamki.
 * Montessori fraction insets: red pieces with a brass knob in green square frames (§3.8.1).
 * Layout (§3.0.1): band 0–110, material zone 110–592, action bar 592–712; keypad tasks: material 0–680, keypad 700–1016.
 */

.mod-ulamki .uk-band .task-content {
  font-family: var(--font);
}
.mod-ulamki .uk-band-in {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.mod-ulamki .uk-band-text {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.mod-ulamki .uk-chip {
  flex: none;
  min-width: 96px;
  height: 72px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- zone ---------- */

.mod-ulamki .uk-zone {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1040px;
  height: 482px;
  overflow: visible;
}

/* while the dragon counts with her (rung 2) the material waits */
.mod-ulamki.uk-helping .uk-zone,
.mod-ulamki.uk-helping .uk-zone * {
  pointer-events: none !important;
}

/* ---------- pieces ---------- */

.mod-ulamki .uk-piece {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.18s ease, filter 0.2s ease;
}
.mod-ulamki .uk-piece .uk-rot {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.mod-ulamki .uk-piece svg {
  display: block;
  pointer-events: none;
  overflow: visible;
}
.mod-ulamki .uk-piece .uk-hit {
  pointer-events: all;
  cursor: pointer;
}
.mod-ulamki .uk-piece.is-base .uk-hit,
.mod-ulamki .uk-piece.is-overlay .uk-hit,
.mod-ulamki .uk-piece.is-flying .uk-hit,
.mod-ulamki .uk-piece.in-tray .uk-hit {
  pointer-events: none;
}
.mod-ulamki .uk-piece .uk-pc-svg {
  filter: drop-shadow(0 3px 2px rgba(80, 20, 20, 0.28));
}
.mod-ulamki .uk-piece.is-up {
  transform: translateY(-12px) scale(1.06);
  z-index: 30 !important;
}
.mod-ulamki .uk-piece.is-up .uk-pc-svg {
  filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 7px rgba(242, 183, 5, 0.85)) drop-shadow(0 10px 8px rgba(80, 20, 20, 0.3));
}
.mod-ulamki .uk-piece.is-base .uk-pc-svg {
  filter: brightness(0.82) saturate(0.85) drop-shadow(0 2px 1px rgba(60, 20, 10, 0.3));
}
.mod-ulamki .uk-piece.is-laid .uk-pc-svg {
  filter: drop-shadow(0 0 1.5px #fff6ea) drop-shadow(0 0 1px #fff6ea) drop-shadow(0 6px 5px rgba(60, 20, 10, 0.35));
}
/* the piece laid ON the group (L2 "Co to?"): lifted a little, with a bright edge, so it reads as lying on top */
.mod-ulamki .uk-piece.is-overlay {
  opacity: 0.9;
}
.mod-ulamki .uk-piece.is-overlay .uk-pc-svg {
  filter: drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 12px 9px rgba(60, 20, 10, 0.45));
}
.mod-ulamki .uk-piece.is-overlay.is-off .uk-pc-svg {
  filter: drop-shadow(0 0 2px var(--err)) drop-shadow(0 0 2px var(--err)) drop-shadow(0 0 1.5px var(--err)) drop-shadow(0 12px 9px rgba(60, 20, 10, 0.4));
}
.mod-ulamki .uk-piece.uk-amber .uk-pc-svg {
  filter: drop-shadow(0 0 3px var(--err)) drop-shadow(0 0 3px var(--err));
}
.mod-ulamki .uk-piece.uk-pulse {
  animation: uk-pulse 0.6s ease;
}
.mod-ulamki .uk-wiggle {
  animation: uk-wiggle 0.5s ease;
}
/* the errorless "together" task: taps on other pieces fall through to the frame below */
.mod-ulamki.demo-together .uk-piece:not(.demo-target) .uk-hit {
  pointer-events: none;
}
.mod-ulamki.demo-together .uk-piece.demo-target .uk-pc-svg,
.mod-ulamki .uk-piece.fx-highlight .uk-pc-svg {
  animation: uk-glow 1.2s ease-in-out infinite;
}
/* pieces are round: the square box-shadow glow of App.ui.highlight is replaced by a glow that follows the shape */
.mod-ulamki .uk-piece.fx-highlight {
  animation: none;
  box-shadow: none;
}
@keyframes uk-glow {
  0%, 100% { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 4px rgba(242, 183, 5, 0.9)); }
  50% { filter: drop-shadow(0 0 7px var(--gold)) drop-shadow(0 0 14px rgba(242, 183, 5, 0.75)); }
}
.mod-ulamki .uk-piece.demo-dim {
  opacity: 0.45;
}

@keyframes uk-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.1); }
}
@keyframes uk-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  60% { transform: rotate(5deg); }
}

/* ---------- frames ---------- */

.mod-ulamki .uk-frame {
  position: absolute;
  border-radius: 20px;
  cursor: pointer;
  z-index: 1;
  transition: box-shadow 0.25s ease;
}
.mod-ulamki .uk-frame svg {
  display: block;
}
.mod-ulamki .uk-frame.is-gold {
  box-shadow: 0 0 0 6px var(--gold), 0 0 28px 6px rgba(242, 183, 5, 0.55);
}
.mod-ulamki .uk-frame.fx-highlight {
  border-radius: 20px;
}

/* the work rug where loose pieces lie (L1) */
.mod-ulamki .uk-mat {
  position: absolute;
  left: 40px;
  top: 250px;
  width: 960px;
  height: 222px;
  border-radius: 28px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, rgba(0, 0, 0, 0) 6px 12px),
    linear-gradient(180deg, #e8d9b8, #dfcda6);
  box-shadow: inset 0 3px 10px rgba(110, 80, 30, 0.22), 0 2px 0 rgba(255, 255, 255, 0.6);
  border: 3px solid #d2bd92;
}

/* ---------- boards (L2) ---------- */

.mod-ulamki .uk-board {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(120, 72, 28, 0.18) 59%, rgba(0, 0, 0, 0) 61%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 74%, rgba(120, 72, 28, 0.16) 75%, rgba(0, 0, 0, 0) 77%),
    radial-gradient(circle at 40% 35%, #f1cf98, #d9a865 70%, #c48f4e);
  border: 4px solid #a8743a;
  box-shadow: 0 8px 0 rgba(120, 72, 28, 0.25), 0 14px 26px rgba(80, 50, 20, 0.2);
  transition: box-shadow 0.3s ease;
}
.mod-ulamki .uk-board.is-covered {
  box-shadow: 0 0 0 5px rgba(242, 183, 5, 0.45), 0 8px 0 rgba(120, 72, 28, 0.25), 0 14px 26px rgba(80, 50, 20, 0.2);
}
.mod-ulamki .uk-board.is-gold {
  box-shadow: 0 0 0 7px var(--gold), 0 0 34px 8px rgba(242, 183, 5, 0.55);
}
.mod-ulamki .uk-board.uk-amber {
  outline: 6px solid var(--err);
  outline-offset: 6px;
}

/* dashed outline of a whole pie, the cut of "połowa połowy", the region (L2 B) */
.mod-ulamki .uk-marks {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.mod-ulamki .uk-marks-top {
  z-index: 25;
}
.mod-ulamki .uk-outline {
  stroke: #8a6a3a;
  stroke-width: 3;
  stroke-dasharray: 8 8;
  opacity: 0.75;
}
.mod-ulamki .uk-outline.is-on {
  stroke: var(--gold-deep);
  stroke-width: 4;
  opacity: 1;
}
.mod-ulamki .uk-region {
  stroke: none;
}
.mod-ulamki .uk-region.is-shown {
  stroke: #fff4c6;
  stroke-width: 5;
  stroke-dasharray: 10 8;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(120, 80, 0, 0.8));
}
.mod-ulamki .uk-cut {
  stroke: #fff4c6;
  stroke-width: 5;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(120, 80, 0, 0.8));
}
.mod-ulamki .uk-cut-on .uk-cut {
  animation: uk-blink 0.9s ease-in-out 3;
}
@keyframes uk-blink {
  50% { opacity: 0.3; }
}

/* ---------- word buttons (L2 B) ---------- */

.mod-ulamki .uk-words {
  position: absolute;
  left: 620px;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mod-ulamki .uk-word {
  width: 320px;
  height: 104px;
  border-radius: 24px;
  border: 4px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  font-family: var(--font);
  font-size: 38px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.mod-ulamki .uk-word:active {
  transform: translateY(4px);
  box-shadow: var(--shadow-sm);
}
.mod-ulamki .uk-word.is-armed {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mod-ulamki .uk-word.is-ok {
  border-color: var(--gold-deep);
  background: var(--gold-soft);
  box-shadow: 0 0 0 5px rgba(242, 183, 5, 0.35), var(--shadow);
}
.mod-ulamki .uk-word.is-locked {
  pointer-events: none;
}

/* ---------- ghosts (rung 2) ---------- */

.mod-ulamki .uk-ghost {
  position: absolute;
  pointer-events: none;
  z-index: 20;
}
.mod-ulamki .uk-ghost-piece {
  overflow: visible;
}
.mod-ulamki .uk-ghost-piece path {
  fill: rgba(242, 183, 5, 0.16);
  stroke: var(--gold-deep);
  stroke-width: 4;
  stroke-dasharray: 9 7;
  stroke-linejoin: round;
}
.mod-ulamki .uk-ghost-bottle {
  border: 4px dashed var(--gold-deep);
  border-radius: 12px 12px 14px 14px;
  background: rgba(242, 183, 5, 0.12);
}
.mod-ulamki .uk-ghost-bag {
  width: 52px;
  height: 52px;
  border: 4px dashed var(--gold-deep);
  border-radius: 10px;
  background: rgba(242, 183, 5, 0.14);
}
.mod-ulamki .uk-ghost.uk-pulse,
.mod-ulamki .uk-bottle.uk-pulse,
.mod-ulamki .uk-bag.uk-pulse {
  animation: uk-pulse 0.6s ease;
}

/* ---------- keypad (right column) ---------- */

.mod-ulamki .uk-pad {
  position: absolute;
  left: 700px;
  top: 108px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.3, 0.7, 0.25, 1);
}
.mod-ulamki .uk-pad.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mod-ulamki .uk-pad .numin {
  gap: 8px;
}
.mod-ulamki .uk-pad .numin-display {
  height: 68px;
  font-size: 46px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.mod-ulamki .uk-pad .keypad {
  gap: 10px 14px;
}
.mod-ulamki .uk-pad .numin-display.uk-err {
  border-color: var(--err);
}
.mod-ulamki .uk-pad .numin-display.uk-amber {
  border-color: var(--err);
  box-shadow: 0 0 0 5px var(--err-soft);
}
.mod-ulamki .uk-pad .numin-display.uk-ok {
  border-color: var(--gold-deep);
  background: var(--gold-soft);
  color: var(--gold-deep);
  box-shadow: 0 0 0 5px rgba(242, 183, 5, 0.35);
}
.mod-ulamki .uk-pad .keypad {
  transition: opacity 0.35s ease;
}
/* after the answer the keys step back: the gold answer stays, "Dalej" gets the corner to itself */
.mod-ulamki .uk-pad.is-solved .keypad {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* ---------- juice (L3) ---------- */

.mod-ulamki .uk-jug {
  position: absolute;
  width: 120px;
  height: 222px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  z-index: 3;
}
.mod-ulamki .uk-jug svg {
  display: block;
  overflow: visible;
}
.mod-ulamki .uk-jug.is-pouring {
  z-index: 8;
}
.mod-ulamki .uk-jug.fx-highlight,
.mod-ulamki .uk-jug.demo-target {
  border-radius: 26px;
}
.mod-ulamki .uk-jug.uk-amber {
  outline: 6px solid var(--err);
  outline-offset: 2px;
  border-radius: 26px;
}
.mod-ulamki .uk-juice {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.45s ease;
}
.mod-ulamki .uk-svg-label {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  fill: #6b4a12;
}
.mod-ulamki .uk-bottle {
  position: absolute;
  z-index: 3;
}
.mod-ulamki .uk-bottle svg {
  display: block;
}
.mod-ulamki .uk-stream {
  position: absolute;
  width: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd27a, #f5a33a);
  z-index: 2;
  animation: uk-stream 0.5s ease-in-out both;
  transform-origin: 50% 0;
}
@keyframes uk-stream {
  0% { transform: scaleY(0); opacity: 0.6; }
  30% { transform: scaleY(1); opacity: 1; }
  85% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.mod-ulamki .uk-shelf {
  position: absolute;
  top: 382px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(180deg, #d4a464, #a87437);
  box-shadow: 0 5px 0 rgba(110, 70, 25, 0.3), 0 10px 18px rgba(80, 50, 20, 0.18);
  transition: box-shadow 0.3s ease;
}
.mod-ulamki .uk-shelf.uk-amber {
  outline: 6px solid var(--err);
  outline-offset: 10px;
}
.mod-ulamki .uk-shelf.is-gold {
  box-shadow: 0 0 0 6px var(--gold), 0 0 30px 6px rgba(242, 183, 5, 0.55);
}
.mod-ulamki .uk-sign {
  position: absolute;
  top: 414px;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  background: #fffaf0;
  border: 3px solid #d8bf8c;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  color: #6b4a12;
  pointer-events: none;
}

/* ---------- balance (L3) ---------- */

.mod-ulamki .uk-scale {
  position: absolute;
  pointer-events: none;
  border-radius: 28px;
  z-index: 1;
}
.mod-ulamki .uk-scale svg {
  display: block;
  overflow: visible;
}
.mod-ulamki .uk-scale.uk-amber {
  outline: 6px solid var(--err);
  outline-offset: 2px;
}
.mod-ulamki .uk-scale.is-level .uk-level-mark,
.mod-ulamki .uk-scale.is-gold .uk-level-mark {
  fill: var(--gold);
}
.mod-ulamki .uk-scale.is-gold {
  box-shadow: 0 0 0 6px rgba(242, 183, 5, 0.75), 0 0 30px 6px rgba(242, 183, 5, 0.4);
}
.mod-ulamki .uk-pan {
  position: absolute;
  width: 180px;
  height: 152px;
  padding: 0;
  border: 0;
  background: none;
  z-index: 4;
}
.mod-ulamki .uk-pan-left {
  cursor: pointer;
}
.mod-ulamki .uk-pan-right {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 32px;
  pointer-events: none;
}
.mod-ulamki .uk-weight svg {
  display: block;
}
.mod-ulamki .uk-svg-weight {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  fill: #ffffff;
}
.mod-ulamki .uk-bag {
  position: absolute;
  width: 60px;
  height: 70px;
}
.mod-ulamki .uk-bag svg {
  display: block;
}
.mod-ulamki .uk-bag-fly {
  z-index: 40;
}
.mod-ulamki .uk-svg-bag {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  fill: #5a3a10;
}
.mod-ulamki .uk-basket {
  position: absolute;
  left: 36px;
  top: 336px;
  width: 200px;
  height: 130px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 22px;
  z-index: 3;
}
.mod-ulamki .uk-basket > svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.mod-ulamki .uk-basket-bags {
  position: absolute;
  left: 34px;
  top: 12px;
  display: flex;
}
.mod-ulamki .uk-bag-mini + .uk-bag-mini {
  margin-left: -16px;
}
.mod-ulamki .uk-bag-mini svg {
  display: block;
}
.mod-ulamki .uk-sign-bag {
  left: 262px;
  top: 404px;
}

/* ---------- table (L3) ---------- */

.mod-ulamki .uk-tray {
  position: absolute;
  padding: 0;
  border: 4px solid #a8743a;
  border-radius: 24px;
  background: linear-gradient(180deg, #e9c38a, #d6a462);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), 0 6px 0 rgba(120, 72, 28, 0.3), 0 12px 20px rgba(80, 50, 20, 0.18);
  cursor: pointer;
  z-index: 1;
}
.mod-ulamki .uk-tray:active {
  transform: translateY(3px);
}
.mod-ulamki .uk-table {
  position: absolute;
  left: 56px;
  top: 184px;
  width: 928px;
  height: 278px;
  border-radius: 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(0, 0, 0, 0) 2px 46px),
    linear-gradient(180deg, #caa070, #b8895a);
  border: 4px solid #8f6334;
  box-shadow: inset 0 4px 12px rgba(60, 35, 10, 0.25), 0 8px 0 rgba(110, 70, 30, 0.3);
  transition: box-shadow 0.3s ease;
}
.mod-ulamki .uk-table.uk-amber {
  outline: 6px solid var(--err);
  outline-offset: 6px;
}
.mod-ulamki .uk-table.is-gold {
  box-shadow: 0 0 0 7px var(--gold), 0 0 34px 8px rgba(242, 183, 5, 0.55);
}
.mod-ulamki .uk-plate {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0 58%, #f1ebde 59% 70%, #e2d7c2 71%);
  box-shadow: 0 5px 0 rgba(80, 50, 20, 0.22), 0 8px 14px rgba(60, 35, 10, 0.22);
  cursor: pointer;
  z-index: 1;
}
.mod-ulamki .uk-plate.uk-pulse {
  animation: uk-pulse 0.6s ease;
}

/* ---------- three-period lesson art (L1) ---------- */

.mod-ulamki .uk-lt-art {
  position: relative;
  display: block;
}
.mod-ulamki .uk-lt-art > svg.uk-lt-ghost {
  position: absolute;
  left: 0;
  top: 0;
}
.mod-ulamki .uk-lt-ghost circle {
  stroke: #b49a6a;
  stroke-width: 3;
  stroke-dasharray: 8 8;
}
.mod-ulamki .uk-lt-sib,
.mod-ulamki .uk-lt-me {
  position: absolute;
  left: 6px;
  top: 6px;
  transform-origin: 50% 50%;
}
.mod-ulamki .uk-lt-sib svg,
.mod-ulamki .uk-lt-me svg {
  display: block;
  filter: drop-shadow(0 3px 2px rgba(80, 20, 20, 0.28));
}
.mod-ulamki .uk-lt-sib {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.mod-ulamki .uk-lt-art.is-whole .uk-lt-sib {
  opacity: 1;
  transition: none;
}
.mod-ulamki .uk-lt-art.uk-pulse {
  animation: uk-pulse 0.6s ease;
}

/* ---------- sparkles ---------- */

.mod-ulamki .uk-sparks {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 50;
}
.mod-ulamki .uk-sparks i {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0%, var(--gold) 60%, rgba(242, 183, 5, 0) 100%);
  transform: rotate(var(--a)) translateY(0);
  animation: uk-spark 0.8s ease-out forwards;
}
@keyframes uk-spark {
  0% { transform: rotate(var(--a)) translateY(0) scale(0.6); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-90px) scale(1); opacity: 0; }
}

/* reduced motion: no lifts, flights are fades (JS) */
.mod-ulamki.uk-reduced .uk-piece.is-up {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mod-ulamki .uk-piece.is-up {
    transform: none;
  }
}