/* Smocza Matematyka — mat & exchange engine (App.mata, js/core/mata.js).
 * Everything is absolutely positioned in module-area px; the root lets taps through except on its targets.
 */

.mata {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.mata [data-key] {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mata.is-locked [data-key] {
  cursor: default;
}

/* ---------- the mat (work rug) ---------- */

.mata-board {
  position: absolute;
  border-radius: 24px;
  background: linear-gradient(180deg, #fffaf0 0%, #fbf3e0 100%);
  box-shadow:
    inset 0 0 0 3px #e7d8b4,
    0 3px 0 rgba(42, 34, 56, 0.06),
    0 8px 18px rgba(42, 34, 56, 0.07);
}
.mata-col {
  position: absolute;
  border-radius: 20px;
  transition: box-shadow 0.25s, background-color 0.25s;
}
/* dashed separator BETWEEN columns: columns are in the DOM from units (right) to the left, so every column but
   the units one draws it on its right edge (the border it shares with the lower category) */
.mata-col + .mata-col::after {
  content: '';
  position: absolute;
  left: auto;
  right: -3px;
  top: 14px;
  bottom: 14px;
  border-left: 2px dashed #e4d4ae;
}
.mata-col::before {
  /* colour code of the category: a short bar at the top of the column */
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  top: 4px;
  height: 6px;
  border-radius: 3px;
  background: var(--cat);
  opacity: 0.55;
}
.mata-col.is-share-active {
  background: rgba(242, 183, 5, 0.12);
  box-shadow: inset 0 0 0 4px var(--gold);
}
.mata-col.hl-amber {
  background: rgba(240, 140, 46, 0.1);
  box-shadow: inset 0 0 0 5px var(--err);
}
.mata-col.hl-gold {
  box-shadow: inset 0 0 0 5px var(--gold);
}

.mata-row {
  position: absolute;
  border-radius: 16px;
  transition: background-color 0.25s;
}
.mata-row + .mata-row {
  border-top: 2px dashed #eadcb9;
  border-radius: 0 0 16px 16px;
}
.mata-row.is-result {
  background: rgba(255, 255, 255, 0.55);
}
.mata-row.has-line {
  border-top: 5px solid #6a5f80;
  border-radius: 2px 2px 16px 16px;
}
.mata-row.is-active {
  background: rgba(242, 183, 5, 0.13);
  box-shadow: inset 6px 0 0 var(--gold);
}
.mata-row.hl-amber {
  box-shadow: inset 0 0 0 5px var(--err);
}
.mata-row-label {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 36px;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--ink-soft);
}

/* whole cell = hit target */
.mata-cell {
  position: absolute;
  border-radius: 16px;
  transition: box-shadow 0.25s, background-color 0.25s;
}
.mata-cell.is-ten {
  background: rgba(255, 228, 120, 0.22);
  box-shadow:
    inset 0 0 0 4px var(--gold),
    0 0 16px 3px rgba(242, 183, 5, 0.55);
  animation: mata-ten-glow 1.8s ease-in-out infinite;
}
@keyframes mata-ten-glow {
  0%, 100% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 10px 2px rgba(242, 183, 5, 0.45); }
  50% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 22px 6px rgba(242, 183, 5, 0.75); }
}
.mata-cell.hl-amber {
  background: rgba(240, 140, 46, 0.1);
  box-shadow: inset 0 0 0 5px var(--err);
  animation: none;
}
.mata-cell.hl-gold {
  box-shadow: inset 0 0 0 5px var(--gold);
}

/* ---------- supply: drawers / stamp box / cash box ---------- */

.mata-drawer {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  font-family: var(--font);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s, opacity 0.2s;
}
.mata-drawer:active {
  transform: translateY(3px);
}
.mata-drawer .mata-art {
  position: relative;
  display: block;
  pointer-events: none;
}
.mata-drawer-word {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #4a3a22;
}
.mata-skin-golden .mata-drawer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #d9a46b, #b97d43);
  box-shadow:
    inset 0 0 0 3px #8f5a2a,
    inset 0 0 0 9px #c99057,
    inset 0 4px 14px 9px rgba(90, 50, 15, 0.35),
    0 4px 0 #7a4a20,
    0 7px 12px rgba(42, 34, 56, 0.18);
}
.mata-skin-golden .mata-drawer-word {
  color: #fff6df;
  text-shadow: 0 2px 0 rgba(80, 40, 10, 0.55);
}
.mata-skin-stamps .mata-drawer {
  background: linear-gradient(180deg, #f7ead0, #ecd9b2);
  box-shadow:
    inset 0 0 0 3px #c8a46a,
    inset 0 5px 10px rgba(120, 85, 30, 0.22),
    0 4px 0 #b8925a,
    0 6px 10px rgba(42, 34, 56, 0.14);
}
.mata-skin-coins .mata-drawer {
  background: linear-gradient(180deg, #e5ebf2, #c8d3df);
  box-shadow:
    inset 0 0 0 3px #8c9bb0,
    inset 0 5px 10px rgba(40, 60, 90, 0.2),
    0 4px 0 #7f8ea4,
    0 6px 10px rgba(42, 34, 56, 0.14);
}
.mata-lock {
  position: absolute;
  right: 10px;
  top: 8px;
  display: none;
}
.mata-drawer.is-idle {
  filter: saturate(0.6);
  opacity: 0.75;
}
.mata-drawer.is-locked {
  filter: grayscale(0.9);
  opacity: 0.5;
}
.mata-drawer.is-locked .mata-lock {
  display: block;
}
.mata-drawer.hl-amber,
.mata-head.hl-amber,
.mata-window.hl-amber,
.mata-baby-col.hl-amber,
.mata-bank.hl-amber,
.mata-baby.hl-amber,
.mata-slide.hl-amber {
  outline: 5px solid var(--err);
  outline-offset: 3px;
}
.mata-drawer.hl-gold,
.mata-head.hl-gold,
.mata-window.hl-gold,
.mata-baby-col.hl-gold,
.mata-bank.hl-gold,
.mata-baby.hl-gold,
.mata-slide.hl-gold {
  outline: 5px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- column headers (letter + finger = count) ---------- */

.mata-head {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 3px solid #e4d4ae;
  border-radius: 16px;
  background: #fffdf7;
  color: #8a7f99;
  box-shadow: 0 3px 0 rgba(42, 34, 56, 0.1);
  transition: transform 0.08s ease, background-color 0.2s, border-color 0.2s;
}
.mata-head:active {
  transform: translateY(2px);
}
/* hit box ≥ 72 px for headers / digit windows drawn lower (App.mata sets --hit-ext; §1.4 (d)) */
.mata-head::before,
.mata-window::before {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: calc(-3px - var(--hit-ext, 0px));
  bottom: calc(-3px - var(--hit-ext, 0px));
}
.mata-head-label {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--cat);
}
.mata-head-label.is-money {
  font-family: var(--font);
  font-size: 24px;
  color: var(--ink);
  white-space: nowrap;
}
.mata-head .ico {
  flex: none;
}
.mata-head.is-narrow {
  gap: 2px;
}
.mata-head.is-narrow .ico {
  width: 24px;
  height: 24px;
}
.mata-head.is-narrow .mata-head-label {
  font-size: 32px;
}
.mata-head.is-counting {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--ink);
}

/* ---------- digit windows ---------- */

.mata-window {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 4px solid var(--cat);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 3px 0 rgba(42, 34, 56, 0.06), 0 3px 0 rgba(42, 34, 56, 0.1);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.mata-window-digit {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--cat);
  font-variant-numeric: tabular-nums;
}
.mata-window.is-blocked {
  background: #f3eee4;
  border-style: dashed;
}
.mata-window.is-editing {
  box-shadow: 0 0 0 5px var(--gold), 0 0 18px rgba(242, 183, 5, 0.6);
}
.mata-window.is-editing .mata-window-digit:empty::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--cat);
  animation: mata-caret 1s steps(2) infinite;
}
@keyframes mata-caret {
  50% { opacity: 0; }
}
.mata-window.is-ok {
  box-shadow: 0 0 0 5px var(--gold), 0 0 16px rgba(242, 183, 5, 0.7);
}
.mata-window.is-err {
  box-shadow: 0 0 0 5px var(--err);
}

/* ---------- bank with the exchange tray ---------- */

.mata-bank {
  position: absolute;
  border-radius: 20px;
  background: linear-gradient(180deg, #fdf6e4, #f6e9c8);
  box-shadow:
    inset 0 0 0 3px #dcc28a,
    0 4px 0 rgba(120, 90, 30, 0.18),
    0 8px 16px rgba(42, 34, 56, 0.1);
}
.mata-bank-roof {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.mata-bank-door {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.mata-bank.is-eating .mata-bank-door {
  animation: mata-chomp 0.4s ease-in-out 2;
}
@keyframes mata-chomp {
  50% { transform: scale(1.35, 1.2); fill: #241d3b; }
}
.mata-tray {
  position: absolute;
  border-radius: 16px;
  background: #efdfba;
  box-shadow: inset 0 3px 8px rgba(120, 85, 30, 0.25);
}
.mata-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px dashed #cfb47c;
  border-radius: 12px;
  background: rgba(255, 252, 240, 0.55);
}
.mata-slot-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  color: rgba(120, 95, 50, 0.35);
}
.mata-bank.is-busy .mata-tray {
  box-shadow: inset 0 3px 8px rgba(120, 85, 30, 0.25), 0 0 0 4px var(--gold);
}

.mata-minibank {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 14px;
  background: #fdf6e4;
  box-shadow: inset 0 0 0 2px #dcc28a, 0 4px 10px rgba(42, 34, 56, 0.18);
  pointer-events: none;
  animation: pop-in 0.2s ease;
}
.mata-minibank span {
  display: none;
}
.mata-minibank svg {
  margin-bottom: 6px;
}

/* ---------- items (absolutely positioned, scaled from their base art) ---------- */

.mata-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* own stacking context: items never cover chips or the keypad */
}
.mata-item {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.mata-item > .mat {
  display: block;
}
.mata-item > .mat-stamp {
  display: flex; /* keep the printed value centred (block would push it to the top-left corner) */
}
/* the printed value is the symbol (§1.6: green 1 vs green 1000): at least 14 px on screen however small the
   stamp is drawn (--k = the item's scale, set by App.mata), capped so it still fits the 64 px stamp art */
.mata-item > .mat-stamp .mat-stamp-val {
  font-size: max(1em, min(calc(14px / var(--k, 1)), 50px));
}
/* "100" / "1000" are wider: on stamps smaller than ≈ 28 / 38 px the value keeps its 14 px height and is narrowed
   instead (scaleX = the width of 32 px "100" / 23 px "1000" in the 64 px art — "1000" stays inside the white
   frame), so a 29 px "1000" stamp still reads "1000" 14 px tall. Font caps 44 / 40 px of the art. */
.mata-item > .mat-stamp-100 .mat-stamp-val {
  font-size: max(1em, min(calc(14px / var(--k, 1)), 44px));
  transform: scaleX(min(1, max(calc(32 * var(--k, 1) / 14), 0.727)));
}
.mata-item > .mat-stamp-1000 .mat-stamp-val {
  font-size: max(1em, min(calc(14px / var(--k, 1)), 40px));
  transform: scaleX(min(1, max(calc(23 * var(--k, 1) / 14), 0.575)));
}
.mata-item.is-lifted {
  translate: 0 -16px;
  filter: drop-shadow(0 14px 10px rgba(30, 20, 50, 0.4)) drop-shadow(0 0 10px rgba(242, 183, 5, 0.9));
  transition: translate 0.15s ease;
}
.mata-item.is-pulse {
  animation: mata-pulse 0.42s ease;
}
@keyframes mata-pulse {
  0% { translate: 0 0; filter: brightness(1); }
  40% { translate: 0 -10px; filter: brightness(1.3) drop-shadow(0 0 12px rgba(242, 183, 5, 1)); }
  100% { translate: 0 0; filter: brightness(1); }
}
.mata-item.is-counted {
  filter: drop-shadow(0 0 8px rgba(242, 183, 5, 0.95));
}
.mata-item.is-extra {
  /* static amber glow first: under reduced motion the pulse is switched off, the mark must stay */
  filter: drop-shadow(0 0 8px rgba(240, 140, 46, 0.95)) drop-shadow(0 0 3px rgba(240, 140, 46, 1));
  animation: mata-extra 1.1s ease-in-out infinite;
}
@keyframes mata-extra {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 140, 46, 0)); translate: 0 0; }
  50% { filter: drop-shadow(0 0 12px rgba(240, 140, 46, 1)) drop-shadow(0 0 4px rgba(240, 140, 46, 1)); translate: 0 -6px; }
}
.mata-item.is-new-carry {
  animation: mata-carry 0.9s ease;
}
@keyframes mata-carry {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 14px rgba(242, 183, 5, 1)) brightness(1.2); }
}

/* ---------- floating UI: chips, slide buttons, badges, ghosts, keypad ---------- */

.mata-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.mata-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line), 0 4px 0 rgba(42, 34, 56, 0.14), 0 6px 12px rgba(42, 34, 56, 0.12);
  transition: transform 0.08s ease, opacity 0.2s, filter 0.2s;
  animation: pop-in 0.18s ease;
}
.mata-btn:active {
  transform: translateY(3px);
}
.mata-btn .ico {
  width: 34px;
  height: 34px;
}
.mata-slide {
  background: linear-gradient(180deg, #fff6d6, #ffe9a6);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 4px 0 rgba(150, 105, 0, 0.35), 0 6px 12px rgba(42, 34, 56, 0.12);
}
.mata-slide.is-inactive {
  opacity: 0.4;
  filter: grayscale(0.8);
  box-shadow: inset 0 0 0 3px var(--line);
}
.mata-slideall {
  font-size: 22px;
  line-height: 1.05;
  padding: 0 10px;
  text-align: left;
  background: linear-gradient(180deg, #fff6d6, #ffe9a6);
  box-shadow: inset 0 0 0 3px var(--gold-deep), 0 4px 0 rgba(150, 105, 0, 0.35);
}
.mata-quick {
  font-family: var(--font-num);
  font-size: 30px;
  gap: 4px;
  background: linear-gradient(180deg, #ffd54a, #f2b705);
  box-shadow: inset 0 0 0 3px #c98f00, 0 4px 0 #a77700, 0 6px 12px rgba(42, 34, 56, 0.2);
  z-index: 3;
}
.mata-breakchip,
.mata-sharechip {
  background: linear-gradient(180deg, #ffd54a, #f2b705);
  box-shadow: inset 0 0 0 3px #c98f00, 0 4px 0 #a77700, 0 8px 16px rgba(42, 34, 56, 0.25);
  z-index: 6;
}
.mata-ten {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  box-shadow: 0 0 0 3px #fff8dc, 0 3px 8px rgba(150, 105, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}
.mata-flash {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 140, 0.95) 0%, rgba(242, 183, 5, 0.6) 40%, rgba(242, 183, 5, 0) 70%);
  pointer-events: none;
  animation: mata-flash 0.6s ease-out forwards;
}
@keyframes mata-flash {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}
.mata-countbadge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 28px;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(42, 34, 56, 0.3);
  pointer-events: none;
  z-index: 9;
}
.mata-ghost {
  position: absolute;
  border: 3px dashed var(--err);
  border-radius: 18%;
  background: rgba(240, 140, 46, 0.1);
  pointer-events: none;
  animation: mata-ghost 1.4s ease-in-out infinite;
}
.mata-ghost.is-round {
  border-radius: 50%;
}
@keyframes mata-ghost {
  50% { background: rgba(240, 140, 46, 0.26); }
}
.mata-keypad {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line), 0 10px 0 rgba(42, 34, 56, 0.1), 0 16px 34px rgba(42, 34, 56, 0.28);
  pointer-events: auto;
  z-index: 10;
  animation: pop-in 0.16s ease;
}

/* ---------- together mode, locks, rung-0 shake ---------- */

.mata .is-off {
  opacity: 0.32;
  filter: grayscale(0.85);
}
.mata-cell.is-off {
  opacity: 1;
  filter: none;
  background: rgba(120, 110, 140, 0.08);
}
.mata-shake {
  animation: mata-shake 0.38s ease;
}
@keyframes mata-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -9px 0; }
  45% { translate: 8px 0; }
  70% { translate: -5px 0; }
  85% { translate: 3px 0; }
}

/* ---------- division: baby dragons, remainder cauldron, quotient windows ---------- */

.mata-share {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mata-baby {
  position: absolute;
  border-radius: 22px;
  background: rgba(255, 253, 247, 0.85);
  box-shadow: inset 0 0 0 3px #eadcb9, 0 3px 0 rgba(42, 34, 56, 0.06);
  transition: box-shadow 0.2s;
}
.mata-baby:active .mata-baby-art {
  translate: 0 3px;
}
.mata-baby-art {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transform-origin: 50% 90%;
}
.mata-baby-art.is-refusing {
  animation: mata-headshake 0.6s ease;
}
@keyframes mata-headshake {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -9deg; }
  40% { rotate: 8deg; }
  60% { rotate: -6deg; }
  80% { rotate: 4deg; }
}
.mata-baby-tray {
  position: absolute;
  border-radius: 14px;
  background: #fbf3df;
  box-shadow: inset 0 0 0 2px #eadcb9, inset 0 3px 6px rgba(120, 85, 30, 0.12);
  pointer-events: none;
}
.mata-baby-col {
  position: absolute;
  border-radius: 10px;
  background: var(--cat-soft, rgba(255, 255, 255, 0.4));
  border-top: 4px solid var(--cat);
}
.mata-baby-col + .mata-baby-col {
  border-left: 2px dashed #eadcb9;
}
.mata-rem {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}
.mata-rem svg {
  margin-top: 2px;
}
.mata-rem-label {
  height: 30px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--ink-soft);
}
.mata-share-label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-soft);
  pointer-events: none;
  white-space: nowrap;
}

/* together ("razem") mode dims headers with opacity — hide the column colour bars that would show through */
.demo-together .mata-col::before {
  visibility: hidden;
}