/* Smocza Matematyka — module 'bank' (Smoczy bank). All selectors start with .mod-bank. */

/* ---------- scenes: one mat per phase, the old one fades out ---------- */

.mod-bank .bk-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mod-bank .bk-scene.is-entering {
  animation: bk-scene-in 0.34s ease both;
}
.mod-bank .bk-scene.is-leaving {
  animation: bk-scene-out 0.26s ease both;
}
.mod-bank .bk-scene.is-leaving * {
  pointer-events: none !important;
}
@keyframes bk-scene-in {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-scene-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

.mod-bank .bk-band {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.mod-bank .bk-band-ico {
  display: flex;
  flex: none;
  width: 64px;
  height: 64px;
}
.mod-bank .bk-band-ico svg {
  width: 64px;
  height: 64px;
}
.mod-bank .bk-band-text {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.mod-bank .bk-band-num {
  font-family: var(--font-num);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin: 0 -4px;
}
.mod-bank .bk-cards {
  animation: bk-pop 0.45s ease both;
  filter: drop-shadow(0 3px 0 rgba(42, 34, 56, 0.12));
}
@keyframes bk-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- reading: the keypad panel and the answer field ---------- */

/* keypad column (§3.0.1: the keypad's ✓ is the main button, so the column may reach into the action strip):
   field 56 + 12 + four rows of 96 px keys with 12 px gaps = 488 px, 114–602 (clear of the demo button at 604) */
.mod-bank .bk-keys {
  position: absolute;
  left: 712px;
  top: 114px;
  width: 316px;
  height: 488px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: bk-keys-in 0.36s ease both;
}
@keyframes bk-keys-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}
.mod-bank .bk-keys .numin {
  gap: 12px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mod-bank .bk-keys .keypad-phone {
  grid-auto-rows: 96px;
  gap: 12px;
}
.mod-bank .bk-keys.is-done .numin {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
.mod-bank .bk-disp {
  width: 316px;
  height: 56px;
  flex: none;
  border-radius: 18px;
  background: #fff;
  border: 4px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 46px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mod-bank .bk-dg {
  display: inline-block;
  padding: 0 3px;
  border-radius: 10px;
  line-height: 1.12;
}
.mod-bank .bk-dg.grp {
  margin-left: 16px;
}
.mod-bank .bk-dg.is-ph {
  color: #c4b9a4;
}
.mod-bank .bk-dg.is-err {
  background: var(--err-soft);
  box-shadow: 0 0 0 4px var(--err);
}
.mod-bank .bk-disp.is-err {
  border-color: var(--err);
  box-shadow: 0 0 0 5px var(--err-soft);
}
.mod-bank .bk-disp.is-ok {
  border-color: var(--gold-deep);
  background: #fffaf0;
  box-shadow: 0 0 0 6px var(--gold-soft), 0 0 22px rgba(242, 183, 5, 0.6);
}

/* digits "jump" into the row above the columns (rung 2: counted, rung 3: demo, success) */
.mod-bank .bk-coldigit {
  position: absolute;
  top: 116px;
  width: 80px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 48px;
  font-weight: 700;
  color: var(--cat);
  background: #fffdf7;
  border: 3px dashed var(--cat);
  box-shadow: 0 3px 0 rgba(42, 34, 56, 0.08);
}
.mod-bank .bk-coldigit.is-ghost {
  border-color: var(--err);
  animation: bk-ghost 1.4s ease-in-out infinite;
}
@keyframes bk-ghost {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.mod-bank .bk-coldigit.is-demo {
  border: 3px solid var(--gold);
}
.mod-bank .bk-coldigit.is-ok {
  border: 3px solid var(--gold-deep);
  background: var(--gold-soft);
  box-shadow: 0 4px 0 rgba(201, 143, 0, 0.35), 0 0 16px rgba(242, 183, 5, 0.45);
}

/* ---------- L4: Pani Sowa, her bowl and the counter "jeszcze n" ---------- */

.mod-bank .bk-owlpanel {
  position: absolute;
  left: 816px;
  top: 112px;
  width: 218px;
  height: 478px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.mod-bank .bk-owl {
  position: relative;
  margin-top: 2px;
  animation: bk-owl-in 0.6s ease both;
  filter: drop-shadow(0 6px 6px rgba(42, 34, 56, 0.18));
}
.mod-bank .bk-owl svg {
  display: block;
}
@keyframes bk-owl-in {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: none; }
}
.mod-bank .bk-owl .bk-owl-joy {
  display: none;
}
.mod-bank .bk-owl.is-happy .bk-owl-joy {
  display: inline;
}
.mod-bank .bk-owl.is-happy .bk-owl-eyes {
  display: none;
}
.mod-bank .bk-owl.is-happy .bk-owl-wingl {
  transform-box: fill-box;
  transform-origin: 80% 20%;
  animation: bk-wing-l 0.5s ease-in-out 3;
}
.mod-bank .bk-owl.is-happy .bk-owl-wingr {
  transform-box: fill-box;
  transform-origin: 20% 20%;
  animation: bk-wing-r 0.5s ease-in-out 3;
}
@keyframes bk-wing-l {
  50% { transform: rotate(18deg); }
}
@keyframes bk-wing-r {
  50% { transform: rotate(-18deg); }
}
.mod-bank .bk-owl-bubble {
  position: absolute;
  top: 192px;
  left: 50%;
  margin-left: -82px;
  width: 164px;
  text-align: center;
  padding: 10px 18px;
  border-radius: 20px;
  background: #fffdf7;
  border: 3px solid var(--line);
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 50% 0;
  z-index: 2;
}
.mod-bank .bk-owl-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -21px;
  margin-left: -9px;
  border: 9px solid transparent;
  border-bottom: 12px solid var(--line);
}
.mod-bank .bk-owl-bubble.is-on {
  animation: bk-bubble 0.4s ease forwards;
}
@keyframes bk-bubble {
  to { opacity: 1; transform: scale(1); }
}
.mod-bank .bk-counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  height: 58px;
  margin-top: 6px;
  padding: 0 18px;
  border-radius: 29px;
  background: #fffdf7;
  border: 3px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.mod-bank .bk-counter-label {
  align-self: center;
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-soft);
}
.mod-bank .bk-counter-num {
  align-self: center;
  font-family: var(--font-num);
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
}
.mod-bank .bk-counter.is-full {
  background: var(--gold-soft);
  border-color: var(--gold);
}
.mod-bank .bk-counter.is-full .bk-counter-label {
  color: var(--ink);
}
.mod-bank .bk-counter.is-gone {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mod-bank .bk-bowl {
  margin-top: 16px;
  transition: transform 0.55s cubic-bezier(0.3, 0, 0.2, 1.2);
}
.mod-bank .bk-bowl.is-units {
  gap: 2px;
}
.mod-bank .bk-bowl.is-tens {
  gap: 2px;
}
.mod-bank .bk-bowl.is-taken {
  transform: translateY(-34px) scale(0.94);
}
.mod-bank .bk-bowl-item {
  animation: bk-drop 0.3s ease both;
}
@keyframes bk-drop {
  from { transform: translateY(-14px) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* the bank in L4 breaks items only (bank: {tray: false}): a teller window under the roof */
.mod-bank .bk-teller {
  position: absolute;
  left: 0;
  top: 66px;
  pointer-events: none;
}

/* ---------- arrow to the column above ("Rozmień setkę!") ---------- */

.mod-bank .bk-arrow {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  z-index: 6;
  animation: bk-arrow 0.9s ease-in-out infinite;
}
.mod-bank .bk-arrow path {
  stroke: var(--gold-deep);
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.9));
}
.mod-bank .bk-arrow.is-amber path {
  stroke: var(--err);
}
.mod-bank .bk-arrow .bk-arrow-head {
  fill: var(--gold-deep);
}
.mod-bank .bk-arrow.is-amber .bk-arrow-head {
  fill: var(--err);
}
@keyframes bk-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- golden sparkle (success) ---------- */

.mod-bank .bk-sparkle {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}
.mod-bank .bk-sparkle i {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: bk-spark 0.9s ease-out forwards;
}
.mod-bank .bk-sparkle i:nth-child(3n) {
  background: #ffe27a;
}
@keyframes bk-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mod-bank .bk-scene.is-entering,
  .mod-bank .bk-keys,
  .mod-bank .bk-owl,
  .mod-bank .bk-arrow,
  .mod-bank .bk-coldigit.is-ghost {
    animation: none;
  }
  .mod-bank .bk-sparkle {
    display: none;
  }
}