/* Smocza Matematyka — module 'smocza-mapa' (Seguin boards, hundred board). All selectors start with .mod-smocza-mapa.
 * Colours: tens blue (--m-tens), units green (--m-units), golden beads, error amber (--err), success gold (--gold).
 */

/* ---------- shared: band, sparkles, pulses, flights ---------- */

.mod-smocza-mapa .sm-bandrow {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.mod-smocza-mapa .sm-blabel {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mod-smocza-mapa .sm-bword {
  font-family: var(--font);
  font-size: 54px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.mod-smocza-mapa .sm-bandtext {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
}
.mod-smocza-mapa .task-content .mat-num {
  font-family: var(--font-num);
}

.mod-smocza-mapa .sm-fly {
  position: absolute;
  z-index: 50;
  margin: 0;
  pointer-events: none;
}
.mod-smocza-mapa .sm-sparks {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 55;
}
.mod-smocza-mapa .sm-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: sm-spark 0.8s ease-out forwards;
}
@keyframes sm-spark {
  0% { transform: rotate(var(--a)) translateY(0) scale(0.6); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-58px) scale(1); opacity: 0; }
}
.mod-smocza-mapa .sm-pulse {
  animation: sm-pulse 0.62s ease-out;
}
@keyframes sm-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.22); filter: brightness(1.18) drop-shadow(0 0 6px rgba(242, 183, 5, 0.9)); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mod-smocza-mapa .sm-glowing {
  filter: drop-shadow(0 0 6px rgba(242, 183, 5, 0.95)) drop-shadow(0 0 14px rgba(242, 183, 5, 0.6));
  animation: sm-glow 0.9s ease-in-out infinite alternate;
}
@keyframes sm-glow {
  from { filter: drop-shadow(0 0 4px rgba(242, 183, 5, 0.7)); }
  to { filter: drop-shadow(0 0 12px rgba(242, 183, 5, 1)) drop-shadow(0 0 22px rgba(242, 183, 5, 0.6)); }
}

/* =====================================================================================
 * L1–L2 Seguin boards
 * ===================================================================================== */

.mod-smocza-mapa .sm-board {
  position: absolute;
  border-radius: 18px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 72, 26, 0.07) 0 3px, rgba(255, 255, 255, 0) 3px 17px),
    linear-gradient(180deg, #e7bf80 0%, #d9a862 100%);
  box-shadow: inset 0 0 0 3px #b98443, inset 0 4px 0 rgba(255, 255, 255, 0.35), 0 6px 0 rgba(90, 56, 20, 0.25), 0 12px 22px rgba(42, 34, 56, 0.16);
}
.mod-smocza-mapa .sm-row {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 88px; /* the whole row is the hit area (≥ 88 px) */
  border-radius: 12px;
}
.mod-smocza-mapa .sm-row-blank {
  background: rgba(120, 72, 26, 0.08);
  box-shadow: inset 0 2px 4px rgba(90, 56, 20, 0.15);
}
.mod-smocza-mapa .sm-hit,
.mod-smocza-mapa.sm-teen .sm-row.is-built {
  cursor: pointer;
}
.mod-smocza-mapa .sm-hit:active .sm-plank {
  transform: translateY(2px);
}
.mod-smocza-mapa .sm-plank {
  position: absolute;
  left: 4px;
  top: 6px;
  width: 128px;
  height: 76px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf6, #f7ecd2);
  box-shadow: inset 0 0 0 2px #caa169, 0 3px 0 rgba(90, 56, 20, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.mod-smocza-mapa.sm-tens .sm-plank {
  left: 8px;
  width: 124px;
}
.mod-smocza-mapa.sm-teen .sm-plank {
  width: 116px;
}
.mod-smocza-mapa .sm-dt {
  color: var(--m-tens);
  margin-right: 5px;
}
.mod-smocza-mapa .sm-du {
  position: relative;
  color: var(--m-units);
}
.mod-smocza-mapa .sm-zero {
  display: inline-block;
}
/* the unit tile covers the zero (Seguin) */
.mod-smocza-mapa .sm-ptile {
  position: absolute;
  left: -5px;
  top: -9px;
  width: 44px;
  height: 78px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffaf0, #fbefd3);
  box-shadow: inset 0 0 0 2px #c9a46a, 0 4px 0 rgba(90, 56, 20, 0.28), 0 6px 10px rgba(42, 34, 56, 0.18);
  color: var(--m-units);
  font-family: var(--font-num);
  font-size: 62px;
  font-weight: 700;
  line-height: 78px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
/* the placed tile is drawn 44 px wide; its hit area is 88 × 90 px (§1.4) */
.mod-smocza-mapa .sm-row .sm-ptile::after {
  content: '';
  position: absolute;
  left: -12px;
  right: -32px;
  top: -6px;
  bottom: -6px;
}
.mod-smocza-mapa .sm-row.is-sel .sm-plank {
  background: linear-gradient(180deg, #fffbe6, #fff0bd);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 0 0 4px rgba(242, 183, 5, 0.45), 0 3px 0 rgba(90, 56, 20, 0.22);
}
.mod-smocza-mapa .sm-row.is-built .sm-plank {
  background: linear-gradient(180deg, #fffbe6, #fff3c9);
}
.mod-smocza-mapa .sm-row.is-ok .sm-plank {
  animation: sm-okflash 1.1s ease;
}
@keyframes sm-okflash {
  0%, 100% { box-shadow: inset 0 0 0 2px #caa169, 0 3px 0 rgba(90, 56, 20, 0.22); }
  30% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 8px rgba(242, 183, 5, 0.5), 0 0 26px rgba(242, 183, 5, 0.7); background: var(--gold-soft); }
}
.mod-smocza-mapa .sm-row.sm-err .sm-plank {
  box-shadow: inset 0 0 0 4px var(--err), 0 0 0 5px var(--err-soft), 0 3px 0 rgba(90, 56, 20, 0.22);
}
/* L1: beads beside the plank — the bead bar n sits ON the golden ten bar */
.mod-smocza-mapa .sm-lane {
  position: absolute;
  left: 126px;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  padding-left: 6px;
  border-radius: 12px;
  background: rgba(255, 248, 230, 0.28);
  box-shadow: inset 0 2px 5px rgba(90, 56, 20, 0.14);
}
.mod-smocza-mapa .sm-lane .mat {
  display: block;
}

/* unit tiles 1–9 */
.mod-smocza-mapa .sm-tiles {
  position: absolute;
}
.mod-smocza-mapa .sm-tile {
  position: absolute;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf0, #f8e9c8);
  box-shadow: inset 0 0 0 3px #c9a46a, 0 6px 0 rgba(90, 56, 20, 0.3), 0 10px 16px rgba(42, 34, 56, 0.14);
  color: var(--m-units);
  font-family: var(--font-num);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.mod-smocza-mapa .sm-tile:active {
  transform: translateY(4px);
  box-shadow: inset 0 0 0 3px #c9a46a, 0 2px 0 rgba(90, 56, 20, 0.3);
}
.mod-smocza-mapa .sm-tile.is-out {
  background: rgba(255, 250, 240, 0.35);
  box-shadow: inset 0 0 0 3px rgba(201, 164, 106, 0.6);
  outline: 3px dashed rgba(185, 132, 67, 0.55);
  outline-offset: -10px;
}
.mod-smocza-mapa .sm-tile.is-out .sm-tile-d {
  opacity: 0;
}
.mod-smocza-mapa .sm-tile.sm-ghost {
  position: absolute;
}

/* L2 tray with the beads */
.mod-smocza-mapa .sm-tray {
  position: absolute;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbf3df, #f3e4c1);
  box-shadow: inset 0 0 0 3px #d9bd8a, inset 0 6px 14px rgba(120, 80, 30, 0.1), 0 4px 0 rgba(90, 56, 20, 0.12);
}
.mod-smocza-mapa .sm-tray.sm-err {
  box-shadow: inset 0 0 0 4px var(--err), 0 0 0 5px var(--err-soft);
}
.mod-smocza-mapa .sm-tray.is-ok {
  animation: sm-trayok 1.1s ease;
}
@keyframes sm-trayok {
  30% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 8px rgba(242, 183, 5, 0.45), 0 0 28px rgba(242, 183, 5, 0.6); }
}
.mod-smocza-mapa .sm-beads {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 70px;
  height: 210px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
}
.mod-smocza-mapa .sm-tens {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 200px;
}
.mod-smocza-mapa .sm-tens.sm-err,
.mod-smocza-mapa .sm-units.sm-err {
  outline: 4px solid var(--err);
  outline-offset: 6px;
  border-radius: 10px;
}
.mod-smocza-mapa .sm-units {
  display: flex;
  align-items: flex-end;
  min-width: 18px;
  min-height: 200px;
}
.mod-smocza-mapa .sm-tens .mat,
.mod-smocza-mapa .sm-units .mat {
  display: block;
}
.mod-smocza-mapa .sm-plus {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 150px;
  height: 104px;
  margin-left: -75px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff6d1, #ffe58a);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 6px 0 rgba(150, 105, 0, 0.35), 0 10px 18px rgba(42, 34, 56, 0.16);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}
.mod-smocza-mapa.sm-plusmode .sm-plus {
  display: flex;
}
.mod-smocza-mapa .sm-plus:active {
  transform: translateY(4px);
}
.mod-smocza-mapa .sm-plus-t {
  font-family: var(--font-num);
  font-size: 46px;
  font-weight: 700;
  color: var(--ink);
}
.mod-smocza-mapa .sm-plus.is-ready {
  animation: sm-ready 1.3s ease-in-out infinite;
}
@keyframes sm-ready {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--gold-deep), 0 6px 0 rgba(150, 105, 0, 0.35), 0 0 0 0 rgba(242, 183, 5, 0.7); }
  50% { box-shadow: inset 0 0 0 3px var(--gold-deep), 0 6px 0 rgba(150, 105, 0, 0.35), 0 0 0 14px rgba(242, 183, 5, 0); }
}
.mod-smocza-mapa .sm-chips {
  display: flex;
  gap: 10px;
  margin-left: 8px;
}
.mod-smocza-mapa .sm-chip {
  min-width: 64px;
  height: 52px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-soft);
}
.mod-smocza-mapa .sm-chip.is-done {
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 3px var(--gold);
  color: var(--ink);
  animation: sm-chip 0.4s ease;
}
@keyframes sm-chip {
  40% { transform: scale(1.18); }
}

/* L1 three-period lesson cards: "1" + tile on the zero, the bar sitting on the ten, the split word */
.mod-smocza-mapa .sm-lt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mod-smocza-mapa .sm-lt-plank {
  position: relative;
  left: auto;
  top: auto;
  width: 150px;
  height: 100px;
  font-size: 82px;
}
.mod-smocza-mapa .sm-lt-plank .sm-ptile {
  left: -8px;
  top: -12px;
  width: 64px;
  height: 104px;
  font-size: 82px;
  line-height: 104px;
  transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.35s;
}
.mod-smocza-mapa .sm-lt-beads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 42px;
}
.mod-smocza-mapa .sm-lt-beads .mat {
  display: block;
}
.mod-smocza-mapa .sm-lt-bar {
  transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s, opacity 0.35s 0.15s;
}
.mod-smocza-mapa .sm-lt-card.is-pre .sm-lt-plank .sm-ptile {
  transform: translateY(-70px);
  opacity: 0;
}
.mod-smocza-mapa .sm-lt-card.is-pre .sm-lt-bar {
  transform: translateY(-40px);
  opacity: 0;
}
.mod-smocza-mapa .sm-lt-caption {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: opacity 0.4s;
}
.mod-smocza-mapa .sm-lt-caption .sm-cu {
  color: var(--m-units);
}
.mod-smocza-mapa .sm-lt-caption .sm-ct {
  color: var(--m-tens);
}
.mod-smocza-mapa .sm-lt-card.is-pre .sm-lt-caption {
  opacity: 0;
}
/* the split word is a period-1 picture only (periods 2 and 3 are recall) */
.mod-smocza-mapa .l3:not([data-period='1']) .sm-lt-caption {
  visibility: hidden;
}

/* =====================================================================================
 * L3–L4 the hundred board
 * ===================================================================================== */

.mod-smocza-mapa .sm-grid {
  position: absolute;
  border-radius: 14px;
  background: linear-gradient(180deg, #fdf8ea, #f8eed6);
  box-shadow: 0 0 0 7px #c99a5b, 0 0 0 9px #a8763a, 0 10px 0 9px rgba(90, 56, 20, 0.22), 0 18px 28px rgba(42, 34, 56, 0.18);
}
.mod-smocza-mapa .sm-cell {
  position: absolute;
  box-shadow: inset -1px -1px 0 #e3cf9f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-smocza-mapa .sm-cell.sm-c5 {
  box-shadow: inset -3px -1px 0 #d2b277;
}
.mod-smocza-mapa .sm-cell.sm-r5 {
  box-shadow: inset -1px -3px 0 #d2b277;
}
.mod-smocza-mapa .sm-cell.sm-c5.sm-r5 {
  box-shadow: inset -3px -3px 0 #d2b277;
}
.mod-smocza-mapa .sm-cv {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.4s, color 0.3s;
}
/* L3: the empty board; the numbers are the pattern overlay */
.mod-smocza-mapa .sm-empty .sm-cv {
  opacity: 0;
  color: #8f7a52;
}
.mod-smocza-mapa .sm-empty.is-ov .sm-cv {
  opacity: 0.5;
}
.mod-smocza-mapa .sm-empty.is-ov {
  background: linear-gradient(180deg, #f7f3ff, var(--accent-soft));
}
.mod-smocza-mapa .sm-empty.is-final .sm-cv {
  opacity: 0.8;
  animation: sm-wave 1.2s ease var(--d, 0ms) both;
}
@keyframes sm-wave {
  0% { color: #8f7a52; transform: scale(1); }
  40% { color: var(--gold-deep); transform: scale(1.35); }
  100% { color: #a8843a; transform: scale(1); }
}
.mod-smocza-mapa .sm-htile {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 60px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbf1d8);
  box-shadow: inset 0 0 0 2px #c9a46a, 0 3px 0 rgba(90, 56, 20, 0.28);
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  color: var(--ink);
  z-index: 2;
  transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
}
.mod-smocza-mapa .sm-htile.is-ok {
  background: linear-gradient(180deg, #fffbe6, #fff0b8);
  box-shadow: inset 0 0 0 2px var(--gold-deep), 0 3px 0 rgba(150, 105, 0, 0.3), 0 0 10px rgba(242, 183, 5, 0.6);
}
.mod-smocza-mapa .sm-htile.is-bad {
  background: linear-gradient(180deg, #fff6ec, var(--err-soft));
  box-shadow: inset 0 0 0 3px var(--err), 0 3px 0 rgba(160, 80, 0, 0.3);
}
.mod-smocza-mapa .sm-htile.is-lift {
  transform: translateY(-4px) scale(1.08);
  animation: sm-lift 1.2s ease-in-out infinite;
  z-index: 4;
}
@keyframes sm-lift {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--err), 0 6px 0 rgba(160, 80, 0, 0.3), 0 0 0 0 rgba(240, 140, 46, 0.6); }
  50% { box-shadow: inset 0 0 0 3px var(--err), 0 6px 0 rgba(160, 80, 0, 0.3), 0 0 0 8px rgba(240, 140, 46, 0); }
}
.mod-smocza-mapa .sm-htile.sm-ghost,
.mod-smocza-mapa .sm-htile.sm-walker {
  left: auto;
  top: auto;
}
.mod-smocza-mapa .sm-htile.sm-walker {
  position: absolute;
  z-index: 45;
  background: linear-gradient(180deg, #fffbe6, #fff0b8);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 6px 12px rgba(42, 34, 56, 0.3);
  transition: left 0.18s ease, top 0.18s ease;
}
.mod-smocza-mapa .sm-cell.sm-home {
  background: rgba(242, 183, 5, 0.25);
  animation: sm-home 1.1s ease-in-out infinite;
}
@keyframes sm-home {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--gold); }
  50% { box-shadow: inset 0 0 0 3px var(--gold), 0 0 16px 4px rgba(242, 183, 5, 0.75); }
}
.mod-smocza-mapa .sm-cell.sm-err {
  box-shadow: inset 0 0 0 4px var(--err);
  background: rgba(240, 140, 46, 0.14);
  z-index: 3;
}
.mod-smocza-mapa .sm-cell.sm-pulse {
  z-index: 3;
  background: rgba(242, 183, 5, 0.3);
}
/* first tap: a row of the dense grid (§1.4 a) */
.mod-smocza-mapa .sm-rowhit {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  border-radius: 8px;
}
.mod-smocza-mapa .sm-rowhit:active,
.mod-smocza-mapa .sm-rowhit.is-open {
  background: rgba(242, 183, 5, 0.18);
  box-shadow: inset 0 0 0 3px rgba(242, 183, 5, 0.8);
}
.mod-smocza-mapa .sm-strip-back {
  position: absolute;
  left: 0;
  top: 110px;
  right: 0;
  bottom: 0;
  z-index: 39;
  background: rgba(36, 29, 59, 0.16);
}
/* second tap: the row enlarged to a 10 × 96 px strip */
.mod-smocza-mapa .sm-strip {
  position: absolute;
  z-index: 40;
  border-radius: 18px;
  background: linear-gradient(180deg, #e7bf80, #d7a65f);
  box-shadow: 0 0 0 3px #a8763a, 0 14px 30px rgba(42, 34, 56, 0.35);
}
.mod-smocza-mapa .sm-scell {
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf6, #f7ecd2);
  box-shadow: inset 0 0 0 2px #caa169;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mod-smocza-mapa .sm-scell:active {
  background: var(--gold-soft);
}
.mod-smocza-mapa .sm-stile {
  width: 86px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fbf1d8);
  box-shadow: inset 0 0 0 3px #c9a46a, 0 4px 0 rgba(90, 56, 20, 0.28);
  font-family: var(--font-num);
  font-size: 38px;
  font-weight: 700;
  line-height: 64px;
  text-align: center;
  color: var(--ink);
}
.mod-smocza-mapa .sm-stile.is-ok {
  background: linear-gradient(180deg, #fffbe6, #fff0b8);
  box-shadow: inset 0 0 0 3px var(--gold-deep);
}
.mod-smocza-mapa .sm-stile.is-bad,
.mod-smocza-mapa .sm-stile.is-lift {
  background: linear-gradient(180deg, #fff6ec, var(--err-soft));
  box-shadow: inset 0 0 0 3px var(--err);
}
.mod-smocza-mapa .sm-sov {
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  color: #a08a5c;
  opacity: 0.6;
}
/* the tile in the dragon's hand (task band) */
.mod-smocza-mapa .sm-hand {
  min-width: 112px;
  height: 84px;
  display: flex;
  align-items: center;
}
.mod-smocza-mapa .sm-handtile {
  width: 116px;
  height: 80px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #fbf1d8);
  box-shadow: inset 0 0 0 3px #c9a46a, 0 5px 0 rgba(90, 56, 20, 0.3);
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 700;
  line-height: 80px;
  text-align: center;
  color: var(--ink);
}
.mod-smocza-mapa .sm-handtile.is-fix {
  box-shadow: inset 0 0 0 3px var(--err), 0 5px 0 rgba(160, 80, 0, 0.3);
}
.mod-smocza-mapa .sm-handtile.sm-ghost {
  position: absolute;
}
.mod-smocza-mapa .sm-checkbtn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: var(--panel);
  color: #8a6a2f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex: none;
  cursor: pointer;
  padding: 0;
}
.mod-smocza-mapa .sm-checkbtn.is-off {
  opacity: 0.45;
}
.mod-smocza-mapa .sm-pile {
  position: absolute;
}
/* the box of tiles that belongs to the hundred board */
.mod-smocza-mapa .sm-stack {
  position: absolute;
  inset: 0;
}
.mod-smocza-mapa .sm-pt {
  position: absolute;
  width: 72px;
  height: 46px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff, #f6e8c6);
  box-shadow: inset 0 0 0 2px #c9a46a, 0 3px 0 rgba(90, 56, 20, 0.3);
}
.mod-smocza-mapa .sm-crate {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 318px;
  height: 84px;
  border-radius: 10px 10px 16px 16px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 72, 26, 0.08) 0 3px, rgba(255, 255, 255, 0) 3px 15px),
    linear-gradient(180deg, #d9a862, #c48d47);
  box-shadow: inset 0 0 0 3px #a8763a, inset 0 5px 0 rgba(255, 255, 255, 0.25), 0 6px 0 rgba(90, 56, 20, 0.25);
}
.mod-smocza-mapa .sm-rowhit.demo-target {
  background: rgba(242, 183, 5, 0.22);
}

/* L4: paws over hidden numbers */
.mod-smocza-mapa .sm-full .sm-cell.is-hidden {
  background: rgba(36, 29, 59, 0.06);
}
.mod-smocza-mapa .sm-paw {
  position: absolute;
  left: -3px;
  top: -8px;
  width: 70px;
  height: 56px;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.4s;
}
.mod-smocza-mapa .sm-paw svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25));
}
.mod-smocza-mapa .sm-paw.is-active svg {
  animation: sm-pawglow 1.2s ease-in-out infinite;
}
@keyframes sm-pawglow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(242, 183, 5, 0.9)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25)); }
  50% { filter: drop-shadow(0 0 10px rgba(242, 183, 5, 1)) drop-shadow(0 0 18px rgba(242, 183, 5, 0.6)); }
}
.mod-smocza-mapa .sm-paw.is-up {
  transform: translateY(-46px) rotate(-12deg);
  opacity: 0;
}
.mod-smocza-mapa .sm-paw.is-peek {
  transform: translateY(-36px) rotate(-8deg);
  opacity: 0.35;
}
.mod-smocza-mapa .sm-cell.is-found,
.mod-smocza-mapa .sm-cell.is-peek {
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 3px var(--gold);
}
.mod-smocza-mapa .sm-cell.is-found .sm-cv,
.mod-smocza-mapa .sm-cell.is-peek .sm-cv {
  color: #8a5e00;
}

/* keypad panel (L4, L5) */
.mod-smocza-mapa .sm-pad {
  position: absolute;
  z-index: 6;
}
.mod-smocza-mapa .sm-pad .numin-display {
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.mod-smocza-mapa .sm-pad .numin-display.is-err {
  border-color: var(--err);
  box-shadow: 0 0 0 5px var(--err-soft);
}
.mod-smocza-mapa .sm-pad .numin-display.is-gold {
  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-smocza-mapa .sm-pad .keypad {
  transition: opacity 0.35s ease;
}
.mod-smocza-mapa .sm-pad.is-solved .keypad {
  opacity: 0;
  pointer-events: none;
}
.mod-smocza-mapa .sm-pad .key.sm-press {
  background: var(--gold-soft);
  transform: translateY(3px);
  box-shadow: 0 0 0 4px var(--gold);
}

/* =====================================================================================
 * L5 counting path + the thousand chain
 * ===================================================================================== */

.mod-smocza-mapa .sm-path {
  position: absolute;
}
.mod-smocza-mapa .sm-box {
  position: absolute;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line), 0 5px 0 rgba(42, 34, 56, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.25s, background 0.25s;
}
.mod-smocza-mapa .sm-box .mat-num {
  font-family: var(--font-num);
  font-weight: 700;
}
.mod-smocza-mapa .sm-box.is-start {
  background: linear-gradient(180deg, #fffdf6, #f6ecd4);
  box-shadow: inset 0 0 0 3px #caa169, 0 5px 0 rgba(90, 56, 20, 0.15);
}
.mod-smocza-mapa .sm-box.is-cur {
  box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 6px rgba(242, 183, 5, 0.3), 0 5px 0 rgba(42, 34, 56, 0.1);
}
.mod-smocza-mapa .sm-box.is-ok {
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 5px 0 rgba(150, 105, 0, 0.18);
}
.mod-smocza-mapa .sm-box.sm-err {
  box-shadow: inset 0 0 0 4px var(--err), 0 0 0 6px var(--err-soft);
}
.mod-smocza-mapa .sm-q {
  font-family: var(--font-num);
  font-size: 44px;
  font-weight: 700;
  color: #cbbd9f;
}
.mod-smocza-mapa .sm-arrow {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mod-smocza-mapa .sm-step {
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  white-space: nowrap;
}
.mod-smocza-mapa .sm-arrow-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 91px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.55;
}
.mod-smocza-mapa .sm-arrow-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -7px;
  border-left: 14px solid var(--accent);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.mod-smocza-mapa .sm-chain {
  position: absolute;
  height: 150px;
  transition: height 0.3s ease;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbf5e8, #f4e8cc);
  box-shadow: inset 0 0 0 3px var(--line);
  visibility: hidden;
}
.mod-smocza-mapa .sm-chain.is-on {
  visibility: visible;
}
.mod-smocza-mapa .sm-chain.has-x {
  height: 288px;
}
.mod-smocza-mapa .sm-u1.sm-chain-strip {
  padding-right: 26px;
}
.mod-smocza-mapa .sm-chain-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 116px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
}
/* the wire of the chain */
.mod-smocza-mapa .sm-chain-strip::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 25px;
  height: 3px;
  background: #9a917f;
  border-radius: 2px;
}
.mod-smocza-mapa .sm-u10.sm-chain-strip::before,
.mod-smocza-mapa .sm-u100.sm-chain-strip::before {
  top: 34px;
}
.mod-smocza-mapa .sm-ci {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1px;
}
.mod-smocza-mapa .sm-u10 .sm-ci {
  margin: 0 5px;
}
.mod-smocza-mapa .sm-u100 .sm-ci {
  margin: 0 6px;
}
.mod-smocza-mapa .sm-ci.is-end {
  margin-right: 12px;
}
.mod-smocza-mapa .sm-ci > .mat,
.mod-smocza-mapa .sm-cb {
  opacity: 0.22;
  filter: grayscale(0.7);
  transition: opacity 0.3s, filter 0.3s;
}
.mod-smocza-mapa .sm-ci.is-lit > .mat,
.mod-smocza-mapa .sm-ci.is-lit .sm-cb {
  opacity: 1;
  filter: none;
}
.mod-smocza-mapa .sm-cb {
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c4 0%, #f2c230 45%, #c98f00 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
/* tickets hang under the end of each ten (unit beads, ten bars) or under every hundred */
.mod-smocza-mapa .sm-ticket {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--line);
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.mod-smocza-mapa .sm-u1 .sm-ticket {
  top: 26px;
}
.mod-smocza-mapa .sm-xbadge {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 134px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.mod-smocza-mapa .sm-xbadge.is-on {
  display: flex;
}
.mod-smocza-mapa .sm-xfrom {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border-radius: 10px;
  padding: 4px;
}
.mod-smocza-mapa .sm-xfrom.sm-x1 {
  display: grid;
  grid-template-columns: repeat(2, 18px);
  gap: 2px;
}
.mod-smocza-mapa .sm-xfrom .mat,
.mod-smocza-mapa .sm-xto .mat {
  display: block;
}
.mod-smocza-mapa .sm-xarrow {
  color: var(--accent);
  display: flex;
}