/* Smocze skoki (module 'skoki') — every selector starts with .mod-skoki.
 * Layout (module area 1040 x 712): task band 0–110, material 16–684 x 122–362, number line 374–584,
 * keypad 712–1028, action bar 592–712. Colours: tokens from css/base.css (error = amber, success = gold). */

/* module palette: the island teal (--teal) and its deeper shade for lines and labels; the rug is warm parchment */
.mod-skoki {
  --sk-teal-deep: #13807e;
  --sk-teal-line: #6ec2bf;
  --sk-shadow-line: #a49d93;
  --sk-shadow-ink: #6f685f;
  --sk-rug-edge: #dccaa2;
  --sk-glow: #ffd54a;
}

/* ---------- task band: 38 + 5 = [  ] ---------- */

.mod-skoki .sk-eq {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 6px;
}
.mod-skoki .sk-eq .mat-num {
  font-weight: 700;
}
.mod-skoki .sk-op {
  display: block;
  flex: none;
  stroke: var(--ink);
  stroke-width: 6.5;
  stroke-linecap: round;
}
.mod-skoki .sk-ans {
  min-width: 156px;
  height: 86px;
  padding: 0 20px;
  border-radius: 22px;
  border: 4px dashed #bfae86;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 60px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mod-skoki .sk-ans.empty {
  color: #cfc2a5;
}
.mod-skoki .sk-ans.is-err {
  border: 4px solid var(--err);
  background: var(--err-soft);
}
.mod-skoki .sk-ans.is-ok {
  border: 4px solid var(--gold);
  background: var(--gold-soft);
  animation: sk-gold 1.1s ease-out 1;
}
@keyframes sk-gold {
  0% { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0.85); transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { box-shadow: 0 0 0 22px rgba(242, 183, 5, 0); transform: scale(1); }
}

/* ---------- work area ---------- */

.mod-skoki .sk-work {
  position: absolute;
  left: 16px;
  top: 122px;
  width: 668px;
  height: 462px;
}

/* the work rug with the golden material */
.mod-skoki .sk-mat {
  position: absolute;
  left: 0;
  top: 0;
  width: 668px;
  height: 240px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #efe3c7, #e6d6b2);
  box-shadow: inset 0 0 0 3px var(--sk-rug-edge), inset 0 0 0 9px rgba(255, 255, 255, 0.35), var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.mod-skoki .sk-mat.is-amber {
  box-shadow: inset 0 0 0 5px var(--err), var(--shadow-sm);
}
.mod-skoki .sk-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mod-skoki .sk-ownframe {
  position: absolute;
  top: 4px;
  height: 232px;
  border-radius: 22px;
  pointer-events: none;
}
.mod-skoki .sk-tray {
  position: absolute;
  top: 4px;
  height: 232px;
  border-radius: 22px;
  border: 3px dashed var(--sk-teal-line);
  background: rgba(31, 162, 160, 0.08);
  pointer-events: none;
}
.mod-skoki .sk-tray.is-shadow {
  border-color: var(--sk-shadow-line);
  background: rgba(80, 74, 66, 0.07);
}
.mod-skoki .sk-tray-label {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  color: var(--sk-teal-deep);
  white-space: nowrap;
}
.mod-skoki .sk-tray.is-shadow .sk-tray-label {
  color: var(--sk-shadow-ink);
}

/* one hit area per cluster (whole column, >= 96 x 200) — also the amber outline of the "place";
   it ends above the tray label (+5 / −28), so an outline never crosses the number */
.mod-skoki .sk-hit {
  position: absolute;
  top: 4px;
  height: 202px;
  border-radius: 22px;
  border: 4px solid transparent;
  background: transparent;
  z-index: 20;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mod-skoki .sk-hit:active {
  background: rgba(255, 255, 255, 0.25);
}
.mod-skoki .sk-hit.is-amber {
  border-color: var(--err);
  background: rgba(240, 140, 46, 0.1);
}
.mod-skoki .sk-hit.is-gold {
  border-color: var(--gold);
  animation: sk-pulse 1.3s ease-in-out infinite;
}
/* errorless "together" task: the place to tap next has a clear gold frame (the hit areas themselves are invisible) */
.mod-skoki.demo-together .sk-hit.demo-target {
  border-color: var(--gold);
  background: rgba(242, 183, 5, 0.12);
}
@keyframes sk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0.7); }
  50% { box-shadow: 0 0 0 12px rgba(242, 183, 5, 0); }
}

/* pieces (App.mat.golden) */
.mod-skoki .sk-pc {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.3, 0.75, 0.3, 1);
  will-change: transform;
}
.mod-skoki .sk-pc > .mat {
  display: block;
}
.mod-skoki .sk-p2 > .mat {
  filter: drop-shadow(-2px 1px 0 rgba(110, 72, 0, 0.45));
}
.mod-skoki .sk-pc.is-shadow > .mat {
  filter: grayscale(1) brightness(0.95) contrast(0.8);
  opacity: 0.78;
}
.mod-skoki .sk-pc.is-glow > .mat {
  filter: drop-shadow(0 0 5px var(--sk-glow)) drop-shadow(0 0 2px #fff6c8);
}
.mod-skoki .sk-pc.is-count > .mat {
  animation: sk-count 0.42s ease-out 1;
  filter: drop-shadow(0 0 4px rgba(242, 183, 5, 0.95));
}
.mod-skoki .sk-pc.is-shadow.is-count > .mat {
  filter: grayscale(1) drop-shadow(0 0 4px rgba(90, 80, 70, 0.8));
}
@keyframes sk-count {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
/* rung 0: the pieces of a place tremble; addition: a tap on her own pieces makes the arrivals hop ("tap us") */
.mod-skoki .sk-pc.is-shake > .mat {
  animation: sk-shake 0.4s ease-in-out 1;
}
@keyframes sk-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.mod-skoki .sk-pc.is-nudge > .mat {
  animation: sk-nudge 0.5s ease-out 1;
}
@keyframes sk-nudge {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-9px); }
  70% { transform: translateY(2px); }
}
.mod-skoki .sk-pc.is-gone {
  opacity: 0 !important;
  transition-duration: 0.2s !important;
}
.mod-skoki .sk-pc.is-born > .mat {
  animation: sk-born 0.38s ease-out 1;
}
@keyframes sk-born {
  0% { transform: scale(0.55); filter: drop-shadow(0 0 8px var(--sk-glow)); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.mod-skoki .sk-pc.is-lift > .mat {
  animation: sk-lift 0.3s ease-out forwards;
}
@keyframes sk-lift {
  to { transform: translateY(-10px); filter: drop-shadow(0 0 7px var(--sk-glow)); opacity: 0.4; }
}
.mod-skoki .sk-ghost {
  position: absolute;
  z-index: 8;
  border: 3px dashed var(--gold-deep);
  border-radius: 10px;
  background: rgba(242, 183, 5, 0.14);
  animation: sk-ghost 1.4s ease-in-out infinite;
}
@keyframes sk-ghost {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- number line ---------- */

.mod-skoki .sk-axis {
  position: absolute;
  left: 0;
  top: 252px;
  width: 668px;
  height: 210px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: inset 0 0 0 3px var(--line), var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.mod-skoki .sk-axis.is-amber {
  box-shadow: inset 0 0 0 5px var(--err), var(--shadow-sm);
}
.mod-skoki .sk-axis-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.mod-skoki .sk-line {
  stroke: var(--ink-soft);
  stroke-width: 5;
  stroke-linecap: round;
}
.mod-skoki .sk-tick {
  stroke: #c8b896;
  stroke-width: 2;
}
.mod-skoki .sk-tick-5 {
  stroke: #a8987a;
  stroke-width: 2.5;
}
.mod-skoki .sk-tick-major {
  stroke: var(--ink-soft);
  stroke-width: 4;
  stroke-linecap: round;
}
.mod-skoki .sk-num {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  fill: var(--ink-soft);
}
.mod-skoki .sk-num.is-hidden {
  visibility: hidden;
}
.mod-skoki .sk-pill-leg {
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}
.mod-skoki .sk-pill.is-result .sk-pill-leg {
  stroke: var(--gold-deep);
}
.mod-skoki .sk-pill rect {
  fill: var(--ink);
}
.mod-skoki .sk-pill text {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  fill: var(--panel);
}
.mod-skoki .sk-pill.is-result rect {
  fill: var(--gold);
  stroke: var(--gold-deep);
  stroke-width: 2;
}
.mod-skoki .sk-pill.is-result text {
  fill: var(--ink);
}
.mod-skoki .sk-pill.is-result {
  animation: sk-fade 0.4s ease-out 1;
}
@keyframes sk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mod-skoki .sk-arc-path,
.mod-skoki .sk-arc-head {
  fill: none;
  stroke: var(--sk-teal-deep);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mod-skoki .sk-arc-label {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  fill: var(--sk-teal-deep);
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.mod-skoki .sk-arc.is-ghost .sk-arc-path,
.mod-skoki .sk-arc.is-ghost .sk-arc-head {
  stroke: #bba984;
  stroke-width: 3.5;
  stroke-dasharray: 7 7;
}
.mod-skoki .sk-arc.is-ghost .sk-arc-head {
  display: none;
}
.mod-skoki .sk-arc.is-ghost.is-on .sk-arc-path,
.mod-skoki .sk-arc.is-ghost.is-on .sk-arc-head {
  stroke: var(--gold-deep);
  stroke-width: 4;
}
.mod-skoki .sk-land {
  fill: rgba(242, 183, 5, 0.25);
  stroke: var(--gold-deep);
  stroke-width: 3;
  stroke-dasharray: 5 4;
}
.mod-skoki .sk-jumper {
  position: absolute;
  left: 0;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
}
.mod-skoki .sk-jfb {
  font-size: 40px;
}
.mod-skoki .sk-jhit {
  position: absolute;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  z-index: 7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mod-skoki .sk-jhit:active {
  background: rgba(123, 92, 214, 0.1);
}

/* ---------- cover (L4–L6: the material waits in its box) ---------- */

.mod-skoki .sk-cover {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, #f6edd9, #ecdfc2);
  box-shadow: inset 0 0 0 3px var(--sk-rug-edge), var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mod-skoki .sk-cover.is-open {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  pointer-events: none;
}
.mod-skoki .sk-cover.no-anim {
  transition: none;
}
.mod-skoki .sk-cover.is-none {
  display: none;
}
.mod-skoki .sk-box {
  position: relative;
  width: 220px;
  height: 178px;
}
.mod-skoki .sk-box-bars {
  position: absolute;
  inset: 0;
}
.mod-skoki .sk-box-bar {
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
}
.mod-skoki .sk-box-front {
  position: absolute;
  left: 0;
  bottom: 0;
  filter: drop-shadow(0 6px 6px rgba(60, 40, 20, 0.2));
}
.mod-skoki .sk-open {
  min-height: 96px;
  font-size: 30px;
  padding: 0 32px;
}
.mod-skoki .sk-open .mat {
  display: block;
}

/* ---------- keypad column ---------- */

.mod-skoki .sk-pad {
  position: absolute;
  left: 712px;
  top: 134px;
  width: 316px;
}
/* the keypad has no display here (the answer box is in the task band): full 96 x 96 keys fit (§1.4 c) */
.mod-skoki .sk-pad .keypad-phone {
  grid-auto-rows: 96px;
}