/* ══════════════════════════════════════════════════════════════════════
   Sliding Tile Puzzle — Design System

   Same mechanism as the Cacho design system (CSS custom properties, no
   build step, semantic token names), different values. Cacho is warm-neutral
   and restrained because adults play it; this is saturated and chunky
   because the reference product is a pocket toy for children.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. Design tokens ─────────────────────────────────────────────────── */
:root {
  --c-bg:        #FFF7ED;
  --c-bg-2:      #FFEDD5;
  --c-surface:   #FFFFFF;
  --c-surface-2: #FEF3C7;
  --c-border:    #FDBA74;
  --c-border-2:  #FB923C;

  --c-text:    #1C1917;
  --c-text-2:  #78716C;
  --c-text-3:  #A8A29E;
  --c-text-inv:#FFFFFF;

  --c-primary:       #F97316;
  --c-primary-hover: #EA580C;
  --c-primary-active:#C2410C;
  --c-primary-light: #FFEDD5;

  --c-accent:      #7C3AED;
  --c-accent-light:#EDE9FE;

  --c-success:     #16A34A;
  --c-success-light:#DCFCE7;
  --c-warn:        #CA8A04;
  --c-danger:      #DC2626;
  --c-danger-bg:   #FEF2F2;

  --c-hint:        #0EA5E9;
  --c-hint-light:  #E0F2FE;

  /* Bezel palette — one per puzzle, echoing the moulded plastic frames */
  --b0: #FB923C; --b1: #D946A6; --b2: #38BDF8; --b3: #27272A;
  --b4: #EC4899; --b5: #C026D3; --b6: #FACC15; --b7: #7C3AED;

  --font:         'Nunito', 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-display: 'Nunito', 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.85rem;
  --text-3xl:  2.4rem;

  --fw-med:  600;
  --fw-semi: 700;
  --fw-bold: 800;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-10: 2.5rem;

  /* Chunkier than Cacho throughout — this is a toy, not a scorecard */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 9999px;

  --sh-sm: 0 2px 4px rgba(120, 53, 15, 0.10);
  --sh-md: 0 6px 12px -2px rgba(120, 53, 15, 0.16);
  --sh-lg: 0 14px 28px -6px rgba(120, 53, 15, 0.22);

  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slide:cubic-bezier(0.22, 1, 0.36, 1);

  --slide-ms: 150ms;
}

/* ── 1. Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background:
    radial-gradient(circle at 12% 8%,  var(--c-bg-2) 0%, transparent 45%),
    radial-gradient(circle at 88% 92%, #FEF9C3      0%, transparent 45%),
    var(--c-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.15; }
h1:focus { outline: none; }

a { color: var(--c-primary-hover); font-weight: var(--fw-semi); }

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 2. Buttons ───────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-weight: var(--fw-semi);
  font-size: var(--text-base);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.12s var(--ease);
  /* the "pressable plastic" shelf under every control */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), var(--sh-sm);
  touch-action: manipulation;
  user-select: none;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary   { background: var(--c-primary); color: var(--c-text-inv); }
.btn--primary:hover { background: var(--c-primary-hover); }
.btn--secondary { background: var(--c-surface); color: var(--c-text); }
.btn--hint      { background: var(--c-hint); color: var(--c-text-inv); }
.btn--ghost     { background: transparent; color: var(--c-text-2); box-shadow: none; font-weight: var(--fw-med); }
.btn--ghost:hover { background: rgba(0,0,0,0.05); transform: none; }
.btn--sm        { font-size: var(--text-sm); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); }
.btn--lg        { font-size: var(--text-lg); padding: var(--sp-4) var(--sp-8); }

/* ── 3. Home ──────────────────────────────────────────────────────────── */
.home {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-10);
}

.home__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-2);
}

/* ── 3b. Language picker ──────────────────────────────────────────────── */
.langpick {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  box-shadow: var(--sh-sm);
}

.langpick__icon { font-size: var(--text-base); line-height: 1; }

.langpick__select {
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  background: transparent;
  border: none;
  min-height: 36px;
  padding-right: var(--sp-1);
  cursor: pointer;
}
.langpick__select:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.home__hero { text-align: center; margin-bottom: var(--sp-8); }

.home__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-primary-active);
}

.home__tagline {
  margin: var(--sp-2) 0 0;
  color: var(--c-text-2);
  font-size: var(--text-lg);
  font-weight: var(--fw-med);
}

.home__section-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}

.home__section-desc {
  color: var(--c-text-2);
  font-size: var(--text-sm);
  margin: 0 0 var(--sp-5);
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-5);
}

/* ── 4. Level card ────────────────────────────────────────────────────── */
.level-card {
  background: var(--c-surface);
  border: none;
  border-radius: var(--r-xl);
  padding: var(--sp-3);
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: 0 5px 0 rgba(0,0,0,0.12), var(--sh-md);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  touch-action: manipulation;
}
.level-card:hover  { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(0,0,0,0.12), var(--sh-lg); }
.level-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.level-card:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.level-card__frame {
  border-radius: var(--r-lg);
  padding: 10px;
  background: var(--bezel, var(--c-primary));
  box-shadow: inset 0 -4px 0 var(--bezel-shade, rgba(0,0,0,0.25));
}

.level-card__thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
  background-color: var(--c-surface-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
}

.level-card__thumb-cell { border: 1px solid rgba(255,255,255,0.35); }
.level-card__thumb-cell--blank { background: rgba(255,255,255,0.55); border-color: transparent; }

.level-card__numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  aspect-ratio: 1;
  gap: 4px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.level-card__number {
  background: var(--c-surface);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--c-text);
}
.level-card__number--blank { background: rgba(255,255,255,0.35); }

.level-card__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.level-card__best {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  min-height: 1em;
}

/* ── 5. Play page ─────────────────────────────────────────────────────── */
/* Phone-width column at every breakpoint. On a desktop this reads as a handheld toy
   sitting in the middle of the page, which is what the thing is. */
.play {
  flex: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.play__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.play__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  text-align: center;
  flex: 1;
}

/* ── 6. HUD ───────────────────────────────────────────────────────────── */
.hud {
  display: flex;
  gap: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  box-shadow: var(--sh-sm);
}

.hud__stat {
  flex: 1;
  text-align: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md);
}

.hud__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--c-text-3);
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hud__value {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.hud__stat--progress .hud__value { color: var(--c-success); }

.hud__bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  overflow: hidden;
  margin-top: var(--sp-1);
}

.hud__bar-fill {
  height: 100%;
  background: var(--c-success);
  border-radius: var(--r-full);
  transition: width 0.3s var(--ease);
}

/* ── 7. Board ─────────────────────────────────────────────────────────── */
.board-frame {
  background: var(--bezel, var(--c-primary));
  border-radius: var(--r-xl);
  padding: 14px;
  box-shadow: inset 0 -8px 0 var(--bezel-shade, rgba(0,0,0,0.28)), var(--sh-lg);
}

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  padding: 3px;
  border: none;
  background: transparent;
  font-family: var(--font);
  cursor: pointer;
  /* One cell of travel is 100% of the tile's own width, so this stays correct at
     any board size without recomputing pixel offsets. */
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  transition: transform var(--slide-ms) var(--ease-slide);
  touch-action: manipulation;
}

.tile__face {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: var(--c-surface);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 9vw, 2.6rem);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.22);
  overflow: hidden;
}

.tile--picture .tile__face {
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
}

.tile--movable:hover  .tile__face { filter: brightness(1.06); }
.tile--movable:active .tile__face { transform: scale(0.96); }

/* Tiles that cannot move stay tappable — the engine rejects the move and plays a thud.
   Disabling them swallowed taps during fast play. */
.tile--stuck        { cursor: default; }
.tile--stuck:active .tile__face { transform: scale(0.99); filter: brightness(0.97); }

/* A tile already in its goal cell gets a quiet green edge — this is what makes the
   row-by-row technique legible instead of something the player has to trust. */
.tile--home .tile__face { box-shadow: inset 0 0 0 3px var(--c-success), inset 0 -3px 0 rgba(0,0,0,0.18); }

.tile--hint .tile__face {
  animation: hint-pulse 0.9s var(--ease) infinite;
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--c-hint), 0 2px 5px rgba(0,0,0,0.22); }
  50%      { box-shadow: inset 0 0 0 6px var(--c-hint), 0 0 18px 3px var(--c-hint); }
}

.board--solved .tile__face { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18); }
.board--solved .tile      { transition: transform var(--slide-ms) var(--ease-slide); }

/* Marks the row to work on next, so "solve the top row, then lock it" is a visible
   instruction rather than advice buried in the rules.

   Kept soft and slowly breathing on purpose: at full strength it read as a selection
   box around stuck tiles rather than as a coaching overlay. */
.board__row-guide {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% / var(--rows));
  pointer-events: none;
  border: 2px dashed rgba(255, 255, 255, 0.32);
  border-radius: var(--r-md);
  transform: translateY(calc(var(--target-row) * 100%));
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
  animation: guide-breathe 2.8s var(--ease) infinite;
}

@keyframes guide-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.board__row-guide--hidden { opacity: 0; }

/* ── 7b. Goal preview ─────────────────────────────────────────────────── */
.peek {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.peek__toggle {
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.peek__toggle:hover { background: var(--c-surface-2); }
.peek__toggle:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }

.peek__chevron { transition: transform 0.2s var(--ease); }
.peek__chevron--open { transform: rotate(180deg); }

.peek__body {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-4);
}

/* Shared finished-puzzle thumbnail — used under the board and on the solved screen. */
.pthumb {
  flex-shrink: 0;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
  background-color: var(--c-surface-2);
  box-shadow: 0 0 0 3px var(--c-surface-2);
}

.pthumb--numbers {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 3px;
  padding: 3px;
}

.pthumb__cell {
  background: var(--c-surface);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 0.55em;
  color: var(--c-text);
}
.pthumb__cell--blank { background: transparent; }

.pthumb--md { width: 84px;  height: 84px;  font-size: var(--text-xl); }
.pthumb--lg { width: 132px; height: 132px; font-size: var(--text-3xl); }

.peek__caption {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--c-text-2);
  line-height: 1.5;
}

/* ── 8. Coach strip ───────────────────────────────────────────────────── */
.coach {
  background: var(--c-accent-light);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: #4C1D95;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  line-height: 1.5;
}

.coach__icon { font-size: var(--text-lg); line-height: 1; }
.coach strong { font-weight: var(--fw-bold); }

.play__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 9. Solved overlay ────────────────────────────────────────────────── */
.solved {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  z-index: 40;
  animation: fade-in 0.25s var(--ease);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.solved__card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sh-lg);
  animation: pop-in 0.35s var(--ease-slide);
}

@keyframes pop-in {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.solved__burst {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--sp-2);
  animation: burst 0.6s var(--ease-slide);
}

@keyframes burst {
  0%   { transform: scale(0) rotate(-25deg); }
  60%  { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.solved__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--c-success);
  margin-bottom: var(--sp-1);
}

.solved__thumb-wrap {
  display: flex;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-3);
  animation: thumb-reveal 0.5s var(--ease-slide) 0.15s backwards;
}

@keyframes thumb-reveal {
  from { transform: scale(0.7) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.solved__subtitle {
  margin: 0;
  font-size: var(--text-base);
  color: var(--c-text-2);
}

.solved__best {
  display: inline-block;
  margin: var(--sp-3) 0 0;
  background: var(--c-success-light);
  color: #14532D;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-full);
}

.solved__stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  margin: var(--sp-4) 0 var(--sp-6);
}

.solved__stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.solved__stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.solved__actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── 10. How to play ──────────────────────────────────────────────────── */
.howto {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  margin-top: var(--sp-8);
}

.howto__title { font-size: var(--text-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }

.howto__rules { margin: 0; padding-left: var(--sp-5); color: var(--c-text-2); line-height: 1.7; font-size: var(--text-sm); }
.howto__rules strong { color: var(--c-text); }

.howto__callout {
  margin-top: var(--sp-4);
  background: var(--c-primary-light);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  font-size: var(--text-sm);
  color: #7C2D12;
  line-height: 1.6;
}

/* ── 11. Error UI ─────────────────────────────────────────────────────── */
.error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
  z-index: 100;
}
.error-ui .dismiss { position: absolute; right: 1rem; top: 0.75rem; cursor: pointer; }

/* ── 12. Responsive ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .home        { padding: var(--sp-5) var(--sp-3) var(--sp-8); }
  .play        { padding: var(--sp-2) var(--sp-2) var(--sp-8); gap: var(--sp-2); }
  .home__title { font-size: var(--text-2xl); }
  .play__title { font-size: var(--text-lg); }
  .level-grid  { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-3); }
  .hud__value  { font-size: var(--text-base); }
  .hud         { padding: var(--sp-1); }
  .hud__stat   { padding: var(--sp-1); }
  .peek__body  { gap: var(--sp-3); }
  .pthumb--md  { width: 68px;  height: 68px;  font-size: var(--text-lg); }
  .pthumb--lg  { width: 112px; height: 112px; font-size: var(--text-2xl); }
  .solved__card { padding: var(--sp-6) var(--sp-5); }
  .solved__burst { font-size: 2.4rem; }
  .board-frame { padding: 10px; border-radius: var(--r-lg); }
  .howto       { padding: var(--sp-4); }
}

/* Never let the board push past the fold on a short phone: cap it against viewport
   height as well as width, so the goal preview and controls stay reachable. */
@media (max-height: 720px) {
  .board-frame { max-width: 62vh; margin: 0 auto; }
}

/* Every interactive element clears the 44px minimum touch target. */
.btn--sm { min-height: 40px; }
.btn     { min-height: 44px; }

/* ── 13. Accessibility ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}