/* The Lost Starlight (D-031) - engine styles.
 * CSS draws UI chrome only: glows, rings, chips, focus states, the lantern
 * meter and the constellation line overlay. Scene art lives in
 * /games/lost-light/ (placeholder SVG for now, produced art later; same
 * filenames, same layout coordinates).
 * Layout follows the D-027 pattern: SQUARE stage, Miri and Ori guide from
 * the chip above the stage and the side panel (desktop) / tray (mobile).
 * Spot coordinates are percentages of the square stage.
 * Reduced motion: the site-wide rule in tokens.css freezes animations and
 * transitions; the engine also swaps in calm static variants. */

.kf-lost-light {
  width: 100%;
  box-sizing: border-box;
}

.kf-lost-light *,
.kf-lost-light *::before,
.kf-lost-light *::after {
  box-sizing: border-box;
}

/* The hidden attribute must always win, even over display: flex rules. */
.kf-lost-light [hidden],
.kfll-finale[hidden] {
  display: none !important;
}

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

/* ---------------- top bar: progress dots + controls ---------------- */

.kfll-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
}

.kfll-spacer {
  flex: 1;
}

.kfll-dotsrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.kfll-dot {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  overflow: visible;
}

.kfll-dot img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.65;
}

.kfll-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 11px;
  border: 3px solid transparent;
  pointer-events: none;
}

.kfll-dot.is-current img {
  opacity: 1;
}

.kfll-dot.is-current::after {
  border-color: var(--kf-gold);
}

.kfll-dot.is-done img {
  opacity: 1;
}

.kfll-dot.is-done::after {
  border-color: var(--kf-teal);
}

.kfll-dot-check {
  position: absolute;
  right: -7px;
  top: -7px;
  display: none;
  line-height: 0;
}

.kfll-dot.is-done .kfll-dot-check {
  display: block;
}

.kfll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem; /* 44px control floor */
  min-width: 2.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--kf-purple-deep);
  background: var(--kf-lilac-soft);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.kfll-btn:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

.kfll-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.kfll-mute {
  padding: 0.4rem 0.65rem;
}

.kfll-muted-note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* ---------------- layout: stage + side panel / tray ---------------- */

.kfll-layout {
  position: relative;
}

/* The panel holds the guide portrait, the lantern meter, the scene label +
   line mirror, and the dock tray. Below 1024px it is the tray under the
   stage (portrait and text hidden); from 1024px it is the right column. */
.kfll-panel {
  margin-top: 0.65rem;
}

.kfll-portrait,
.kfll-rail {
  display: none;
}

.kfll-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1c163e;
  box-shadow: var(--shadow-soft);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.kfll-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: filter 0.8s ease;
}

/* Placeholder-art "solved" state: the same scene breathes brighter and a
   warm wash rises. Final produced art will bring real -open images; the
   engine then crossfades those instead (scene.open in the config). */
.kfll-scene-open {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.kfll-scene-open.kfll-open-shown {
  opacity: 1;
}

.kfll-solved .kfll-scene {
  filter: brightness(1.18) saturate(1.18);
}

.kfll-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  background: radial-gradient(circle at 50% 42%, rgba(255, 233, 176, 0.32), rgba(255, 233, 176, 0) 62%);
  z-index: 2;
}

.kfll-solved .kfll-wash {
  opacity: 1;
}

.kfll-dimmed .kfll-scene {
  filter: brightness(0.72) saturate(0.85);
}

/* ---------------- speech chip (Miri and Ori take turns) ---------------- */

.kfll-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--kf-cream);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  box-shadow: var(--shadow-soft);
  margin: 0 0 10px;
  min-height: 72px;
}

/* Miri's portrait is a square bust shot with her face in the upper half,
   so the circle crop aims at the face. */
.kfll-chip-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--kf-teal-soft);
  border: 2px solid var(--kf-teal);
}

.kfll-chip-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  line-height: 1.35;
  color: var(--kf-purple-deep);
}

/* Voice bar in the chip: replay, mute toggle and (while sound is on) the
   volume slider. One row, never on the artwork. */
.kfll-voicebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

/* "Hear it again" is .kf-speak (bare, --sm): circle, glyph, hover, focus and
   its 56px target all come from src/styles/speak.css. Only its place in this
   bar is decided here. */
.kfll-say {
  flex: none;
}

/* The bell beside it grew from 44px to 56px to match. It is not a speaker and
   keeps its own two-tone drawing, but two circles sitting side by side at
   different diameters read as an accident, and the shared component's floor is
   56. Sized by hand rather than by borrowing .kf-speak, which would have put a
   speaker's chrome on a mute button. */
.kfll-chip-mute {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kf-lilac-soft);
  border: 2px solid var(--kf-lilac);
  cursor: pointer;
}

.kfll-chip-mute:hover {
  background: #fff;
}

.kfll-vol {
  flex: none;
  width: clamp(64px, 12vw, 110px);
  height: 32px;
  margin: 0;
  accent-color: var(--kf-teal);
  cursor: pointer;
}

/* ---------------- play targets ---------------- */

/* Spots are real buttons for keyboard and screen readers; pointer taps are
   routed by the stage listener to the nearest target. Visible ring size
   comes per scene from the engine (--ring, % of stage width). */
.kfll-spot {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 50%;
  pointer-events: none;
  cursor: pointer;
  width: calc(var(--ring, 16.5) * 1%);
  aspect-ratio: 1;
  z-index: 4;
}

/* A found spark: a warm gold star bloom held on the spot. */
.kfll-spot.kfll-found::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 176, 0.95) 0%, rgba(255, 217, 138, 0.5) 45%, rgba(255, 217, 138, 0) 72%);
}

.kfll-spot.kfll-done {
  box-shadow: var(--glow-hint-soft);
}

/* Echo stones: the singing state is a bright, steady bloom while the note
   plays; never a strobe. */
.kfll-spot.kfll-sing {
  box-shadow: 0 0 26px 10px rgba(253, 250, 244, 0.55);
  background: radial-gradient(circle, rgba(253, 250, 244, 0.35) 0%, rgba(253, 250, 244, 0) 70%);
}

/* Star stairs: the next star breathes gold until tapped. */
.kfll-spot.kfll-twinkle {
  animation: kfllTwinkle 2s ease-in-out infinite;
}

@keyframes kfllTwinkle {
  0%, 100% { box-shadow: 0 0 12px 3px rgba(212, 168, 67, 0.2); }
  50% { box-shadow: 0 0 22px 8px rgba(212, 168, 67, 0.55); }
}

/* A woken star keeps a steady warm glow. */
.kfll-spot.kfll-lit {
  box-shadow: 0 0 20px 7px rgba(255, 223, 158, 0.5);
}

.kfll-spot.kfll-lit::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 176, 0.8) 0%, rgba(255, 217, 138, 0) 70%);
}

/* Constellation line overlay: the drawn path between woken stars. */
.kfll-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.kfll-lines polyline {
  fill: none;
  stroke: #ffe9b0;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.2 1.6;
  filter: drop-shadow(0 0 1.2px rgba(255, 233, 176, 0.9));
}

/* Dock items are plain tray buttons (side panel on desktop, row below the
   stage on mobile). They never sit on the artwork. */
.kfll-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  padding: 0;
  background: var(--kf-cream);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.kfll-item img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(15, 10, 36, 0.3));
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.kfll-item .kfll-dot-check {
  right: -6px;
  top: -6px;
}

.kfll-item.is-held {
  transform: translateY(-4px);
  box-shadow: var(--halo-select);
}

/* Re-tapping the held item: a tiny re-lift, "still in your hand". */
.kfll-item.is-held.kfll-relift {
  animation: kfllRelift 0.32s ease;
}

@keyframes kfllRelift {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(-12px); }
}

.kfll-item.is-placing img {
  transform: scale(0.35);
  opacity: 0.25;
}

.kfll-item.is-placed {
  background: var(--kf-teal-soft);
  border-color: var(--kf-teal);
  cursor: default;
}

.kfll-item.is-placed img {
  opacity: 0.85;
}

.kfll-item.is-placed .kfll-dot-check {
  display: block;
}

/* When a drop is picked up, every open flower shows a cream outline. */
.kfll-show-spots .kfll-spot:not(.kfll-done) {
  border: 3px dashed var(--kf-cream);
  box-shadow: 0 0 10px 2px rgba(253, 250, 244, 0.45);
}

/* The echo replay button lives in the tray: same body as a dock item but
   wider, with a label, because "hear it again" is a sentence, not a thing.
   The label NEVER wraps: the pill grows to fit its text (Deniz rule: no
   two-line buttons, size controls by eye, not by squeezing). */
.kfll-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 64px;
  padding: 0.5rem 1.6rem;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--kf-purple-deep);
  background: var(--kf-cream);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.kfll-replay:hover:not(:disabled) {
  background: #fff;
}

.kfll-replay:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Round pips for the echo scene: one pip per song, filled when echoed. */
.kfll-rounds {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.kfll-round-pip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--kf-lilac);
  background: transparent;
}

.kfll-round-pip.is-done {
  border-color: var(--kf-teal);
  background: var(--kf-teal);
}

.kfll-round-pip.is-current {
  border-color: var(--kf-gold);
}

/* ---------------- the lantern meter (panel) ---------------- */

/* Produced lantern art (transparent PNG). --lit runs 0..1, one step per
   collected spark: the lantern warms from grey-dim to a full golden glow. */
.kfll-lantern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.kfll-lantern-img {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: contain;
  filter: grayscale(calc(0.9 - 0.9 * var(--lit, 0)))
    brightness(calc(0.55 + 0.55 * var(--lit, 0)))
    drop-shadow(0 0 calc(14px * var(--lit, 0)) rgba(255, 223, 158, 0.85));
  transition: filter 0.7s ease;
}

.kfll-lantern-slots {
  display: flex;
  gap: 0.35rem;
}

.kfll-slot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--kf-lilac);
  background: transparent;
}

.kfll-slot.is-filled {
  border-color: var(--kf-gold);
  background: var(--kf-gold);
  box-shadow: 0 0 8px 2px rgba(212, 168, 67, 0.55);
}

/* ---------------- help ladder visuals ---------------- */

.kfll-wiggle {
  animation: kfllWiggle 0.36s ease-in-out;
}

@keyframes kfllWiggle {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -4px; }
  75% { margin-left: 4px; }
}

.kfll-ring-miss {
  border: 3px dashed var(--kf-lilac);
}

.kfll-pulse {
  animation: kfllPulse 2.4s ease-in-out infinite;
}

@keyframes kfllPulse {
  0%, 100% { box-shadow: 0 0 12px 3px rgba(212, 168, 67, 0.16); }
  50% { box-shadow: 0 0 18px 6px rgba(212, 168, 67, 0.4); }
}

.kfll-ring-soft {
  box-shadow: var(--glow-hint-soft);
}

.kfll-glow-full {
  box-shadow: var(--glow-hint-full);
}

/* ---------------- sparkle burst (correct answer) ---------------- */

.kfll-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.kfll-burst {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  width: 0;
  height: 0;
}

.kfll-burst span {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kf-gold);
  box-shadow: 0 0 8px 2px rgba(212, 168, 67, 0.7);
  transform: rotate(var(--a, 0deg)) translateY(0);
  animation: kfllBurst 0.85s ease-out forwards;
}

@keyframes kfllBurst {
  to {
    transform: rotate(var(--a, 0deg)) translateY(-48px);
    opacity: 0;
  }
}

/* ---------------- advance pill and start button ---------------- */

.kfll-pill,
.kfll-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 72px;
  padding: 0.5rem 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 3px solid #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
}

.kfll-pill {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  z-index: 7;
}

.kfll-pill span {
  white-space: nowrap;
}

.kfll-pill-arrow {
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .kfll-pill:not([hidden]) {
    animation: kfllPillIn 0.5s ease;
  }
}

@keyframes kfllPillIn {
  0% { transform: translateX(-50%) scale(0.7); opacity: 0; }
  65% { transform: translateX(-50%) scale(1.05); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.kfll-startover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

.kfll-start-btn {
  box-shadow: 0 0 28px 8px rgba(212, 168, 67, 0.6), var(--shadow-lift);
  animation: kfllBreathe 2.6s ease-in-out infinite;
}

@keyframes kfllBreathe {
  0%, 100% { box-shadow: 0 0 22px 5px rgba(212, 168, 67, 0.5), var(--shadow-lift); }
  50% { box-shadow: 0 0 32px 11px rgba(212, 168, 67, 0.75), var(--shadow-lift); }
}

/* ---------------- dock tray (shared panel slot) ---------------- */

.kfll-dock {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
}

/* ---------------- finale popup ---------------- */

.kfll-finale {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 10, 36, 0.55);
  padding: 1rem;
  z-index: 60;
}

.kfll-finale-card {
  background: var(--kf-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  width: 100%;
  max-width: 30rem;
  max-height: 92dvh;
  overflow: auto;
  text-align: center;
  box-shadow: var(--shadow-lift);
}

.kfll-finale-card h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.kfll-finale-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.kfll-finale-line {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-weight: 700;
}

.kfll-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-3);
}

.kfll-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0.5rem 1.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
}

.kfll-again {
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 3px solid #fff;
  box-shadow: var(--shadow-soft);
}

.kfll-back {
  color: var(--kf-purple-deep);
  background: var(--kf-lilac-soft);
  border: 3px solid var(--kf-lilac);
}

.kfll-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.kfll-confetti span {
  position: absolute;
  top: -18px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  animation: kfllFall 1.8s ease-in forwards;
}

@keyframes kfllFall {
  to {
    transform: translateY(105vh) rotate(320deg);
    opacity: 0.4;
  }
}

/* ---------------- desktop side panel (1024px and up) ---------------- */

@media (min-width: 1024px) {
  .kfll-layout {
    display: grid;
    /* 22rem -> 24rem: a four-across tray needs the width, or the drops fall
       under the 75px a child's finger needs (SR-057). */
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: var(--space-3);
    align-items: start;
  }

  .kfll-stage {
    grid-column: 1;
    width: min(100%, 70vh, 40rem);
    min-width: 20rem;
    margin-inline: auto;
  }

  .kfll-panel {
    grid-column: 2;
    margin-top: 0;
    /* never taller than the picture it sits beside: the stage is a square of
       min(100%, 70vh, 40rem), so the panel takes the same ceiling */
    max-height: min(70vh, 40rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 2px solid var(--kf-lilac-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  /* Miri's framed portrait at the top of the panel (square produced art,
     shown as-is: she holds the lantern and looks at the player).

     SIZED FROM THE SCREEN, NOT FROM THE PANEL WIDTH. At full panel width it was
     370px tall, which made the panel 641px against a 504px picture and pushed
     the drop tray off the bottom of a tablet (Deniz, 2026-08-18: "yandaki
     resmin blogundan daha uzun olmamali" / "tablette yarim kaliyor"). It stays
     a SQUARE and only gets smaller, so nothing is cropped - the rule is that
     cropping is never done without asking, and shrinking a square square is not
     cropping. */
  .kfll-portrait {
    display: block;
    /* AS BIG AS THE ROOM ALLOWS, not a fixed ceiling. A first attempt capped it
       at 26vh and Deniz was right to push back - "Miri'nin resmini neden
       kuculttun ... yerin var". It is a flex item now: it takes its natural
       square size (the panel's width) and only SHRINKS when the rail and the
       drop tray need the height. Stays square either way, so nothing is
       cropped; on a screen with room it is full size again. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    flex: 0 1 auto;
    min-height: 0;
    margin-inline: auto;
    object-fit: cover;
    border: 2px solid var(--kf-teal);
    border-radius: var(--radius-md);
  }

  .kfll-rail {
    display: block;
  }

  .kfll-rail-scene {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-kicker);
  }

  .kfll-rail-line {
    margin: 0;
    font-weight: 700;
    color: var(--kf-purple-deep);
  }

  /* ONE ROW of four, not two rows of two. On a tablet the second row fell
     past the bottom of the screen: the bottom two drops could not be seen and
     could not be tapped (Deniz, 2026-08-18: "Tablette yarim kaliyor alttaki 2
     ikon gorunmuyor ve secilemiyor"). A single row also keeps the panel from
     growing taller than the picture beside it, which was the other half of the
     same complaint. Measured in fr rather than fixed px so four always fit the
     panel instead of overflowing it. */
  .kfll-dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: center;
    gap: 0.5rem;
  }

  /* The replay button and round pips span both tray columns. */
  .kfll-dock .kfll-replay,
  .kfll-dock .kfll-rounds {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .kfll-item {
    width: 100%;
    max-width: 88px;
    height: auto;
    aspect-ratio: 1;
  }

  .kfll-item img {
    width: 72%;
    height: 72%;
  }
}