/* Smocza Matematyka — module 'pietra-wiezy' (Piętra Wieży). All selectors start with .mod-pietra-wiezy.
 * Module area 1040 x 712: task band 0–110, tower (left) + right panel 110–592, action bar 592–712.
 * Tower geometry (module px): top 122, roof 0–66, floors 96 px each (black 66, grey 162, white 258), number line 492.
 */

.mod-pietra-wiezy {
  background: var(--bg);
}

/* ---------- task band ---------- */

.mod-pietra-wiezy .task-band {
  z-index: 4;
}
.mod-pietra-wiezy .task-content {
  font-family: var(--font);
  font-size: 32px;
}
.mod-pietra-wiezy .pw-band-text {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.mod-pietra-wiezy .pw-challenge {
  flex: none;
  min-height: 72px;
  height: 72px;
  margin-right: 8px; /* band gap 16 + 8 = 24 px to the ear */
  font-size: 24px;
  padding: 0 20px;
  color: var(--accent);
  border-color: #d6cbff;
}
.mod-pietra-wiezy .pw-challenge .btn-icon {
  display: flex;
}

.mod-pietra-wiezy .pw-dict {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mod-pietra-wiezy .pw-dict-btn {
  height: 88px;
  min-width: 176px;
  flex: none;
  padding: 0 22px 0 16px;
  border-radius: 22px;
  border: 4px solid #d6cbff;
  background: #fff;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.mod-pietra-wiezy .pw-dict-btn:active {
  transform: translateY(3px);
}
.mod-pietra-wiezy .pw-dict-q {
  font-family: var(--font-num);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: #b9ad96;
  letter-spacing: 0.08em;
}
.mod-pietra-wiezy .pw-dict-q.is-known {
  letter-spacing: 0;
  animation: pw-fade 0.4s ease;
}

/* "mała gromadka / duża gromada" (WORD_FORM) */
.mod-pietra-wiezy .pw-gromadka {
  position: absolute;
  left: 0;
  right: 96px;
  top: 0;
  bottom: 3px;
  padding: 10px 16px 10px 16px;
  background: var(--panel-2);
  display: flex;
  gap: 14px;
  z-index: 3;
  animation: pw-fade 0.3s ease;
}
.mod-pietra-wiezy .pw-gr-cell {
  flex: 1;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  column-gap: 10px;
  padding: 2px 12px;
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 18px;
}
.mod-pietra-wiezy .pw-gr-cell.is-hit {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 4px rgba(242, 183, 5, 0.25);
}
.mod-pietra-wiezy .pw-gr-dots {
  grid-row: 1 / span 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 60px;
  justify-content: center;
}
.mod-pietra-wiezy .pw-gr-dots i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.mod-pietra-wiezy .pw-gr-label {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font);
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mod-pietra-wiezy .pw-gr-nums {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.mod-pietra-wiezy .pw-gr-form {
  grid-column: 2;
  grid-row: 3;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.05;
}

/* ---------- sky + tower ---------- */

.mod-pietra-wiezy .pw-sky {
  position: absolute;
  left: 12px;
  top: 116px;
  width: 478px;
  height: 472px;
  border-radius: 30px;
  background: linear-gradient(180deg, #d3e4f6 0%, #e4eef5 45%, #f1ecdf 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.mod-pietra-wiezy .pw-tower {
  position: absolute;
  left: 25px;
  top: 122px;
  width: 452px;
  height: 362px;
}

.mod-pietra-wiezy .pw-roof {
  position: absolute;
  left: 0;
  top: 0;
  width: 452px;
  height: 70px;
}
.mod-pietra-wiezy .pw-roof-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.mod-pietra-wiezy .pw-flag {
  position: absolute;
  left: 223px;
  top: -8px;
  width: 50px;
  height: 38px;
  animation: pw-flag 3.2s ease-in-out infinite;
  transform-origin: 3px 36px;
}
.mod-pietra-wiezy .pw-flag svg {
  display: block;
}

.mod-pietra-wiezy .pw-floor {
  position: absolute;
  left: 0;
  width: 452px;
  height: 99px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 14px;
  border: 3px solid #d2c3a3;
  transition: box-shadow 0.25s ease;
  z-index: 1;
}
.mod-pietra-wiezy .pw-f2 {
  top: 66px;
  border-radius: 6px 6px 0 0;
  background-color: #1d1b26;
  border-color: #3d3852;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px);
  background-size: 56px 24px;
}
.mod-pietra-wiezy .pw-f1 {
  top: 162px;
  background-color: #b5b0bf;
  border-color: #948ea3;
  background-image:
    linear-gradient(rgba(60, 50, 80, 0.09) 2px, transparent 2px),
    linear-gradient(90deg, rgba(60, 50, 80, 0.09) 2px, transparent 2px);
  background-size: 56px 24px;
}
.mod-pietra-wiezy .pw-f0 {
  top: 258px;
  background-color: #fffdf8;
  border-color: #d2c3a3;
  background-image:
    linear-gradient(rgba(150, 125, 80, 0.11) 2px, transparent 2px),
    linear-gradient(90deg, rgba(150, 125, 80, 0.11) 2px, transparent 2px);
  background-size: 56px 24px;
}
.mod-pietra-wiezy .pw-floor.is-glow,
.mod-pietra-wiezy .pw-floor.is-current {
  z-index: 3;
  box-shadow: 0 0 0 5px var(--gold), 0 0 28px 8px rgba(242, 183, 5, 0.5);
}
.mod-pietra-wiezy .pw-floor.is-err {
  z-index: 4;
  box-shadow: 0 0 0 6px var(--err), 0 0 22px 4px rgba(240, 140, 46, 0.45);
}
.mod-pietra-wiezy .pw-ground {
  position: absolute;
  left: -14px;
  top: 352px;
  width: 480px;
  height: 12px;
  border-radius: 6px;
  background: #8b7a5c;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

/* family plaque */
.mod-pietra-wiezy .pw-sign {
  flex: none;
  width: 110px;
  height: 64px;
  border-radius: 14px;
  border: 3px solid #d2c3a3;
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow-sm);
}
.mod-pietra-wiezy .pw-sign-text {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.mod-pietra-wiezy .pw-f1 .pw-sign {
  background: #8a8499;
  border-color: #736d84;
  color: #fff;
}
.mod-pietra-wiezy .pw-f2 .pw-sign {
  background: #2f2a42;
  border-color: #4c4566;
  color: #fff;
}
.mod-pietra-wiezy .pw-eyes {
  display: block;
  animation: pw-blink 5s infinite;
  transform-origin: 50% 50%;
}

/* rooms: doors S (red) D (blue) J (green); digits are the residents */
.mod-pietra-wiezy .pw-rooms {
  display: flex;
  gap: 12px;
}
.mod-pietra-wiezy .pw-room {
  position: relative;
  width: 88px;
  height: 78px;
  border-radius: 44px 44px 10px 10px;
  border: 6px solid;
  background: #fffaf0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.05), 0 3px 0 rgba(0, 0, 0, 0.12);
  transition: outline-color 0.2s;
}
.mod-pietra-wiezy .pw-room.pw-k2 {
  border-color: var(--m-hundreds);
}
.mod-pietra-wiezy .pw-room.pw-k1 {
  border-color: var(--m-tens);
}
.mod-pietra-wiezy .pw-room.pw-k0 {
  border-color: var(--m-units);
}
.mod-pietra-wiezy .pw-digit {
  font-family: var(--font-num);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.mod-pietra-wiezy .pw-k2 .pw-digit,
.mod-pietra-wiezy .pw-fly.pw-k2 {
  color: var(--m-hundreds);
}
.mod-pietra-wiezy .pw-k1 .pw-digit,
.mod-pietra-wiezy .pw-fly.pw-k1 {
  color: var(--m-tens);
}
.mod-pietra-wiezy .pw-k0 .pw-digit,
.mod-pietra-wiezy .pw-fly.pw-k0 {
  color: var(--m-units);
}
.mod-pietra-wiezy .pw-door {
  position: absolute;
  inset: 0;
  border-radius: 38px 38px 4px 4px;
  display: none;
  background-image: linear-gradient(90deg, transparent 31%, rgba(0, 0, 0, 0.08) 31% 34%, transparent 34% 64%, rgba(0, 0, 0, 0.08) 64% 67%, transparent 67%);
}
.mod-pietra-wiezy .pw-k2 .pw-door {
  background-color: #f5c7ce;
}
.mod-pietra-wiezy .pw-k1 .pw-door {
  background-color: #c5d6f2;
}
.mod-pietra-wiezy .pw-k0 .pw-door {
  background-color: #c6e7cd;
}
.mod-pietra-wiezy .pw-knob {
  position: absolute;
  right: 13px;
  top: 40px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(42, 34, 56, 0.3);
}
.mod-pietra-wiezy .pw-room.is-empty .pw-door {
  display: block;
}
.mod-pietra-wiezy .pw-room.is-enter .pw-digit {
  animation: pw-drop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.mod-pietra-wiezy .pw-room.is-zero.is-enter .pw-digit {
  animation: pw-zero 0.8s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.mod-pietra-wiezy .pw-room.is-land {
  animation: pw-land 0.4s ease;
}
.mod-pietra-wiezy .pw-room.is-lit {
  outline: 5px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 18px 4px rgba(242, 183, 5, 0.55);
}
.mod-pietra-wiezy .pw-room.is-err {
  outline: 6px solid var(--err);
  outline-offset: 3px;
}
.mod-pietra-wiezy .pw-room.is-pulse {
  outline: 5px solid var(--err);
  outline-offset: 3px;
  animation: pw-pulse 1s ease-in-out infinite;
}
.mod-pietra-wiezy .pw-room.is-ghost {
  outline: 4px dashed var(--err);
  outline-offset: 4px;
  animation: pw-ghost 1.4s ease-in-out infinite;
}
.mod-pietra-wiezy .pw-room.is-ghost.is-err {
  outline: 6px solid var(--err);
  outline-offset: 3px;
  animation: pw-pulse 1s ease-in-out infinite;
}
/* the dragon's pointing glow (App.demo highlight) keeps the shapes of the tower */
.mod-pietra-wiezy .pw-floor.fx-highlight {
  border-radius: 0;
  z-index: 3;
  animation: pw-floor-glow 1.2s ease-in-out infinite;
}
.mod-pietra-wiezy .pw-f2.fx-highlight {
  border-radius: 6px 6px 0 0;
}
.mod-pietra-wiezy .pw-room.fx-highlight {
  border-radius: 44px 44px 10px 10px;
  outline: 5px solid var(--gold);
  outline-offset: 3px;
  animation: pw-room-glow 1.2s ease-in-out infinite;
}
.mod-pietra-wiezy .pw-sign.fx-highlight {
  border-radius: 14px;
}

/* the black floor waits in the clouds (L1–L5) */
.mod-pietra-wiezy .pw-clouds {
  position: absolute;
  left: -18px;
  top: -10px;
  width: 488px;
  height: 172px;
  z-index: 5;
  pointer-events: none;
}
.mod-pietra-wiezy .pw-clouds::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 58px;
  height: 114px;
  border-radius: 44px;
  background: #fbfdff;
  transition: opacity 0.6s ease;
}
.mod-pietra-wiezy .pw-tower.clouds-open .pw-clouds::before {
  opacity: 0;
}
.mod-pietra-wiezy .pw-tower.is-cloudy:not(.clouds-open) .pw-flag {
  opacity: 0;
}
.mod-pietra-wiezy .pw-tower.is-open .pw-clouds {
  display: none;
}
.mod-pietra-wiezy .pw-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 35%, #ffffff 0 58%, #f3f7fc 78%, #e6eef8 100%);
  box-shadow: 0 8px 0 rgba(150, 172, 205, 0.32);
  transition: transform 0.9s ease, opacity 0.9s ease;
}
.mod-pietra-wiezy .pw-puff:nth-child(odd) {
  animation: pw-drift 9s ease-in-out infinite;
}
.mod-pietra-wiezy .pw-puff:nth-child(even) {
  animation: pw-drift 11s ease-in-out infinite reverse;
}
.mod-pietra-wiezy .pw-tower.clouds-open .pw-puff {
  animation: none;
}
.mod-pietra-wiezy .pw-tower.clouds-open .pw-puff:nth-child(odd) {
  transform: translate(-90px, -70px) scale(0.6);
  opacity: 0;
}
.mod-pietra-wiezy .pw-tower.clouds-open .pw-puff:nth-child(even) {
  transform: translate(90px, -70px) scale(0.6);
  opacity: 0;
}

/* number line under the tower */
.mod-pietra-wiezy .pw-numline {
  position: absolute;
  left: 12px;
  top: 494px;
  width: 478px;
  height: 94px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.mod-pietra-wiezy .pw-numline .mat-num {
  animation: pw-fade 0.35s ease;
}
.mod-pietra-wiezy .pw-numline .mat-num-label-text {
  font-size: 22px;
  margin-top: 16px;
  color: var(--ink-soft);
}
.mod-pietra-wiezy .pw-num-q {
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 700;
  color: #c4b9a4;
  letter-spacing: 0.1em;
}

/* ---------- right panel ---------- */

.mod-pietra-wiezy .pw-right {
  position: absolute;
  left: 512px;
  top: 118px;
  width: 504px;
  height: 466px;
}
.mod-pietra-wiezy .pw-right.is-veiled {
  visibility: hidden;
}
/* the keypad owns the bottom-right corner: a demo's "Dalej / Pomiń" moves to the middle of the action strip */
.mod-pietra-wiezy.pw-pad-on .demo-skip {
  right: auto;
  left: 440px; /* 40 px to the keypad (left edge at 700) */
}

/* reading: 3 spoken readings */
.mod-pietra-wiezy .pw-right-read {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.mod-pietra-wiezy .pw-opt-row {
  display: flex;
  align-items: center;
  gap: 24px;
  transition: opacity 0.4s ease;
}
.mod-pietra-wiezy .pw-opt {
  flex: 1;
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  text-align: left;
  border: 4px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, transform 0.08s;
}
.mod-pietra-wiezy .pw-opt:active {
  transform: translateY(3px);
}
.mod-pietra-wiezy .pw-opt-ear {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-pietra-wiezy .pw-opt-words {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
}
.mod-pietra-wiezy .pw-w-fam {
  color: var(--accent);
}
.mod-pietra-wiezy .pw-ok {
  flex: none;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  visibility: hidden;
}
.mod-pietra-wiezy .pw-ok:active {
  transform: translateY(4px);
}
.mod-pietra-wiezy .pw-opt-row.is-armed .pw-opt {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.mod-pietra-wiezy .pw-opt-row.is-armed .pw-ok {
  visibility: visible;
  animation: pw-pop 0.35s ease;
}
.mod-pietra-wiezy .pw-opt-row.is-out .pw-opt {
  border-color: var(--err);
  border-style: dashed;
  background: var(--err-soft);
  opacity: 0.6;
}
.mod-pietra-wiezy .pw-opt-row.is-ok .pw-opt {
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, #fff4c9, #ffe07a);
}
.mod-pietra-wiezy .pw-opt-row.is-ok .pw-ok {
  visibility: visible;
}
.mod-pietra-wiezy .pw-opt-row.is-gone {
  opacity: 0;
  pointer-events: none;
}

.mod-pietra-wiezy .pw-right-read.is-long .pw-opt {
  font-size: 23px;
}
.mod-pietra-wiezy .pw-right-read.is-xlong {
  gap: 24px; /* spacing between targets stays 24 px also for 5-line readings (3 x 141 + 48 <= 476) */
}
.mod-pietra-wiezy .pw-right-read.is-xlong .pw-opt {
  font-size: 22px;
  line-height: 1.1;
  min-height: 104px;
  padding: 6px 12px 6px 10px;
  gap: 10px;
}
.mod-pietra-wiezy .pw-right-read.is-xlong .pw-opt-ear {
  width: 36px;
  height: 36px;
}
.mod-pietra-wiezy .pw-right-read.is-xlong .pw-opt-ear svg {
  width: 24px;
  height: 24px;
}

/* dictation: the keypad column (its ✓ is the main button) */
.mod-pietra-wiezy .pw-right-write .pw-pad {
  position: absolute;
  right: 0;
  top: 70px;
}
.mod-pietra-wiezy .pw-pad .numin-display {
  min-width: 316px;
  font-size: 52px;
  padding: 0 14px;
}
.mod-pietra-wiezy .pw-pad.is-long .numin-display {
  font-size: 44px;
}
.mod-pietra-wiezy .pw-key-press {
  background: var(--gold-soft) !important;
  transform: translateY(3px);
  box-shadow: 0 0 0 4px var(--gold);
}
.mod-pietra-wiezy .pw-right.is-cards .pw-pad {
  visibility: hidden;
}
.mod-pietra-wiezy .pw-cards {
  position: absolute;
  left: 40px;
  right: 0;
  top: 20px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  animation: pw-fade 0.3s ease;
}
/* EXTRA_ZEROS rung 1: spread cards in the free column left of the keypad (keypad stays usable) */
.mod-pietra-wiezy .pw-side-cards {
  position: absolute;
  left: 0;
  top: 70px;
  width: 168px;
  max-height: 396px;
  padding: 20px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 3px dashed var(--err);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  animation: pw-fade 0.3s ease;
}
.mod-pietra-wiezy .pw-cards .mat-card {
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.3, 1);
}

/* success: the words of each floor next to it */
.mod-pietra-wiezy .pw-cap {
  position: absolute;
  left: 28px;
  width: 470px;
  min-height: 70px;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.3em;
  padding: 8px 18px;
  border-radius: 18px;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: var(--shadow-sm);
  animation: pw-cap-in 0.4s ease both;
  transition: box-shadow 0.25s ease;
}
.mod-pietra-wiezy .pw-cap::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 50%;
  margin-top: -13px;
  border: 13px solid transparent;
  border-left: 0;
  border-right: 16px solid var(--cap-edge, #d2c3a3);
}
.mod-pietra-wiezy .pw-cap-f0 {
  background: #fffdf8;
  border: 3px solid #d2c3a3;
  color: var(--ink);
  --cap-edge: #d2c3a3;
}
.mod-pietra-wiezy .pw-cap-f1 {
  background: #c6c1cf;
  border: 3px solid #948ea3;
  color: var(--ink);
  --cap-edge: #948ea3;
}
.mod-pietra-wiezy .pw-cap-f2 {
  background: #1d1b26;
  border: 3px solid #4c4566;
  color: #fff;
  --cap-edge: #4c4566;
}
.mod-pietra-wiezy .pw-cap-f2 .pw-w-fam {
  color: #cdbcff;
}
.mod-pietra-wiezy .pw-cap.is-skip {
  background: transparent;
  border: 3px dashed #c9bda4;
  color: var(--ink-soft);
  font-weight: 400;
  box-shadow: none;
  --cap-edge: #c9bda4;
}
.mod-pietra-wiezy .pw-cap.is-reading {
  box-shadow: 0 0 0 5px var(--gold), 0 0 26px 6px rgba(242, 183, 5, 0.5);
}

/* word puzzle (Wyzwanie, L4–L6) */
.mod-pietra-wiezy .pw-slots {
  position: absolute;
  left: 0;
  top: 0;
  width: 504px;
  min-height: 84px;
  padding: 10px 12px;
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 24px;
}
.mod-pietra-wiezy .pw-slot {
  position: relative;
  min-width: 100px;
  height: 64px;
  padding: 0 13px;
  border: 3px dashed #b8ab90;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--font);
  font-size: 25px;
  font-weight: 700;
  color: var(--ink);
}
.mod-pietra-wiezy .pw-slot::after {
  content: '';
  position: absolute;
  inset: -12px; /* hit area 88 px high; touches the neighbour's at the 24 px gap */
}
.mod-pietra-wiezy .pw-slot.is-full {
  border-style: solid;
  border-color: var(--accent);
  background: #fff;
  box-shadow: var(--shadow-sm);
  animation: pw-pop 0.3s ease;
}
.mod-pietra-wiezy .pw-slot.is-err {
  outline: 5px solid var(--err);
  outline-offset: 2px;
}
.mod-pietra-wiezy .pw-slot.is-ok {
  border-color: var(--gold-deep);
  background: var(--gold-soft);
}
.mod-pietra-wiezy .pw-tiles {
  position: absolute;
  left: 0;
  top: 196px;
  width: 504px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* material hit area ≥ 88 px: the tile (72) + 8 px of the 24 px gaps around it */
.mod-pietra-wiezy .pw-tile::after {
  content: '';
  position: absolute;
  inset: -8px -12px;
}
.mod-pietra-wiezy .pw-tile {
  position: relative;
  height: 72px;
  border: 4px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}
.mod-pietra-wiezy .pw-tile:active {
  transform: translateY(3px);
}
.mod-pietra-wiezy .pw-tile.is-used {
  visibility: hidden;
}
.mod-pietra-wiezy .pw-built {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.mod-pietra-wiezy .pw-chip {
  padding: 6px 14px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
}

/* ---------- effects ---------- */

.mod-pietra-wiezy .pw-fly {
  position: absolute;
  z-index: 40;
  font-family: var(--font-num);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%);
}
.mod-pietra-wiezy .pw-spark {
  position: absolute;
  z-index: 45;
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(242, 183, 5, 0.8);
  transform: translate(-50%, -50%);
  animation: pw-spark 0.9s ease-out both;
}

@keyframes pw-drop {
  0% { transform: translateY(-40px) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes pw-zero {
  0% { transform: translateY(-46px) scale(0.5); opacity: 0; }
  60% { transform: translateY(4px) scale(1.25); opacity: 1; text-shadow: 0 0 14px rgba(242, 183, 5, 0.9); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pw-land {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); box-shadow: 0 0 16px 4px rgba(242, 183, 5, 0.7); }
  100% { transform: scale(1); }
}
@keyframes pw-floor-glow {
  0%, 100% { box-shadow: 0 0 0 5px var(--gold), 0 0 10px 2px rgba(242, 183, 5, 0.45); }
  50% { box-shadow: 0 0 0 7px var(--gold), 0 0 30px 10px rgba(242, 183, 5, 0.6); }
}
@keyframes pw-room-glow {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(242, 183, 5, 0.5); }
  50% { box-shadow: 0 0 22px 8px rgba(242, 183, 5, 0.75); }
}
@keyframes pw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 140, 46, 0.85); }
  50% { box-shadow: 0 0 0 12px rgba(240, 140, 46, 0); }
}
@keyframes pw-ghost {
  0%, 100% { outline-color: rgba(240, 140, 46, 1); }
  50% { outline-color: rgba(240, 140, 46, 0.35); }
}
@keyframes pw-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pw-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes pw-cap-in {
  from { opacity: 0; transform: translate(-16px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}
@keyframes pw-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); }
}
@keyframes pw-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
@keyframes pw-flag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
}
@keyframes pw-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.15); }
}

@media (prefers-reduced-motion: reduce) {
  .mod-pietra-wiezy .pw-puff,
  .mod-pietra-wiezy .pw-flag,
  .mod-pietra-wiezy .pw-eyes {
    animation: none;
  }
}