/*
 * LN10: the question kinds of the quizzes (multiselect, sort, label, dragfill, estimate, and ordering and matching as
 * true drag and drop), the course's final quiz on the course page, and the medal a passed final quiz earns. Pictures
 * in questions are drawn large and clear on phones and desktops. Light and dark, the three looks, right to left.
 */

/* ---------- Pictures in questions: large and clear ---------- */
.ln-qbox .ln-q-pic { width: 100%; max-height: min(46vh, 380px); padding: 8px; border-radius: 20px; box-shadow: var(--ln-shadow), inset 0 0 0 1.5px var(--ln-line); }
.ln-qbox--dragfill .ln-q-pic, .ln-qbox--estimate .ln-q-pic { max-height: min(30vh, 260px); }
.ln-qbox .ln-opts--pics { grid-template-columns: repeat(auto-fit, minmax(min(46%, 170px), 1fr)); gap: 12px; }
.ln-qbox .ln-opt.has-pic img { aspect-ratio: 4 / 3; }
.ln-qbox .ln-chip.has-pic { flex: 0 1 150px; flex-direction: column; gap: 6px; padding: 8px 10px 10px; font-size: 14px; text-align: center; }
.ln-qbox .ln-chip.has-pic img { width: 100%; max-width: 124px; height: 84px; border-radius: 12px; }
.ln-qbox .ln-bucket-items .ln-chip.has-pic { flex-direction: row; text-align: start; }
.ln-qbox .ln-bucket-items .ln-chip.has-pic img { width: 64px; height: 52px; }
/* In a bucket the list runs top to bottom, so the tray's 150px basis would become a height (a tall empty card with a
   small picture): size by content instead, and a picture with no words keeps a picture you can see (LR9, LN11). */
.ln-qbox .ln-bucket-items .ln-chip.has-pic { flex: 0 0 auto; }
.ln-qbox .ln-bucket-items .ln-chip.has-pic:not(:has(.ln-chip-text)) { justify-content: center; }
.ln-qbox .ln-bucket-items .ln-chip.has-pic:not(:has(.ln-chip-text)) img { width: 112px; height: 76px; }
/* The hint or marking after an answer is scrolled into view clear of the sticky bottom bar (questions.js, LR11). */
.ln-qbox .ln-feedback { scroll-margin-top: 72px; scroll-margin-bottom: calc(108px + env(safe-area-inset-bottom)); }
/* A marked question has no Check button left (the buttons' own display would otherwise keep it). */
.ln-qbox .ln-check[hidden] { display: none; }
.ln-qbox .ln-order--pics .ln-order-body img { width: 96px; height: 76px; }
.ln-qbox .ln-matchgrid--pics .ln-match-item img { width: 96px; height: 76px; border-radius: 12px; background: var(--w-soft); }
.ln-qbox .ln-matchgrid--pics .ln-match-item { min-height: 92px; }

/* ---------- Choose all that apply ---------- */
.ln-opt--multi { padding-inline-start: 50px; }
.ln-opt--multi.has-pic { padding: 10px 10px 12px; }
.ln-tick { position: absolute; top: 50%; inset-inline-start: 14px; width: 24px; height: 24px; transform: translateY(-50%); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ln-line-2); background: var(--ln-card); transition: background .15s, box-shadow .15s; z-index: 1; }
.ln-opt--multi.has-pic .ln-tick { top: 16px; transform: none; }
.ln-opt--multi[aria-pressed="true"] { box-shadow: var(--ln-shadow), inset 0 0 0 2.5px var(--w-accent); background: color-mix(in srgb, var(--w-accent) 10%, var(--ln-card)); }
.ln-opt--multi[aria-pressed="true"] .ln-tick { background: var(--w-accent); box-shadow: none; }
.ln-opt--multi[aria-pressed="true"] .ln-tick::after { content: ""; position: absolute; inset: 5px 7px 8px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ln-opt--multi.is-right::after { top: 50%; transform: translateY(-50%); }
.ln-opt--multi.has-pic.is-right::after { top: 14px; transform: none; }
.ln-opt.is-missed { box-shadow: 0 0 0 3px var(--ln-good), var(--ln-shadow); background: repeating-linear-gradient(135deg, var(--ln-good-soft) 0 10px, var(--ln-card) 10px 20px); }
.ln-opt.is-missed .ln-tick { box-shadow: inset 0 0 0 2px var(--ln-good); }
.ln-multi-count { min-height: 1.2em; font-size: 13px; font-weight: 750; color: var(--w-ink); }

/* ---------- Sort (LN6's board inside a question) ---------- */
.ln-qsort { display: grid; gap: 12px; }
.ln-qsort .ln-bucket { min-height: 140px; }

/* ---------- Label a picture ---------- */
.ln-label-stage { position: relative; border-radius: 22px; overflow: visible; background: var(--ln-card); box-shadow: var(--ln-shadow), inset 0 0 0 1.5px var(--ln-line); padding: 6px; user-select: none; }
/* The places sit in a frame that is exactly the drawn picture (pictureFrame in questions.js, .ln-pic-frame in
   player.css), so a label's x% and y% land on the picture at every size, never on a letterboxed box (LN11). */
.ln-label-stage .ln-pic-frame { --pic-max-h: min(46vh, 460px); container-type: inline-size; }
.ln-label-stage .ln-pic-frame > img { border-radius: 16px; }
/* Room for placed names that hang past the picture (kinds.js sets how much), so they never cover the tray below. */
.ln-label-stage { padding-top: calc(6px + var(--hang-above, 0px)); padding-bottom: calc(6px + var(--hang-below, 0px)); transition: padding .2s; }
.ln-spot { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 0; height: 0; }
.ln-spot-dot { position: absolute; top: 0; left: 0; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; background: var(--w-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-accent) 55%, transparent), 0 8px 18px -6px rgba(0, 0, 0, .5); transition: transform .2s var(--ln-ease), box-shadow .2s; }
.ln-spot-dot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--w-accent) 70%, transparent); animation: ln-spot-turn 9s linear infinite; }
.ln-spot.is-over .ln-spot-dot { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 7px var(--w-accent), 0 10px 22px -6px rgba(0, 0, 0, .55); }
.ln-spot.is-filled .ln-spot-dot { width: 18px; height: 18px; font-size: 0; }
.ln-spot.is-filled .ln-spot-dot::after { display: none; }
.ln-spot .ln-chip { position: absolute; top: 16px; left: 0; transform: translateX(-50%); min-height: 34px; padding: 5px 12px; font-size: 13.5px; white-space: nowrap; box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px var(--w-accent); }
.ln-spot .ln-chip::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: inherit; box-shadow: -2px -2px 0 0 var(--w-accent); }
.ln-spot .ln-chip.is-right { box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px var(--ln-good); }
.ln-spot .ln-chip.is-wrong { box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px var(--ln-bad); }
.ln-spot-answer { position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; color: #fff; background: var(--ln-good); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
/* Places close together (marks on a line, tiles in a row; LR8, LR9, LR11, LR12): names wrap at 10.5em rather than one
   word a line; each name hangs below or above its mark (is-above), close or further off (--drop, is-far), wherever it
   covers no other name (kinds.js works it out); empty places stay above placed names; and while a name is dragged, or
   picked to be tapped onto a place, the placed names let the drop or tap through to the picture, where it goes to the
   nearest place (kinds.js). */
.ln-spot .ln-chip, .ln-spot-answer { width: max-content; max-width: 10.5em; white-space: normal; text-align: center; line-height: 1.2; }
.ln-label-stage .ln-spot .ln-chip { top: var(--drop, 16px); }
.ln-label-stage .ln-spot.is-above .ln-chip { top: auto; bottom: var(--drop, 16px); }
.ln-spot.is-above .ln-chip::before { top: auto; bottom: -7px; box-shadow: 2px 2px 0 0 var(--w-accent); }
/* A name hung further off (is-far) is joined to its mark by a leader line. */
.ln-spot.is-far.is-filled::after { content: ""; position: absolute; z-index: 0; left: -1px; top: 0; width: 2px; height: var(--drop); background: var(--w-accent); }
.ln-spot.is-far.is-filled.is-above::after { top: auto; bottom: 0; }
.ln-spot.is-above .ln-spot-answer { bottom: auto; top: 14px; }
/* Layers over the picture: leader lines, then the dots of filled places, then every placed name (so no dot sits on
   another place's name, LR13), then empty places; a hovered or focused name comes to the front. */
.ln-label-stage .ln-pic-frame { isolation: isolate; }
.ln-spot.is-filled { z-index: auto; }
.ln-spot.is-filled .ln-spot-dot { z-index: 1; }
.ln-spot.is-filled .ln-chip, .ln-spot.is-filled .ln-spot-answer { z-index: 2; }
.ln-spot:not(.is-filled) { z-index: 3; }
.ln-spot .ln-chip:hover, .ln-spot .ln-chip:focus-visible { z-index: 4; }
body:has(.ln-ghost) .ln-spot .ln-chip, .ln-label-stage.is-picking .ln-spot .ln-chip { pointer-events: none; }
.ln-label-stage.is-picking .ln-pic-frame { cursor: crosshair; }
/* On a narrow picture (a phone) the marks and names are smaller, so places close together keep apart. */
@container (max-width: 520px) {
  .ln-label-stage .ln-spot-dot, .ln--kid .ln-label-stage .ln-spot-dot { width: 26px; height: 26px; font-size: 12.5px; }
  .ln-label-stage .ln-spot-dot::after { inset: -6px; }
  .ln-label-stage .ln-spot.is-filled .ln-spot-dot { width: 14px; height: 14px; }
  .ln-label-stage .ln-spot .ln-chip { min-height: 26px; padding: 3px 8px; font-size: 12px; max-width: 8.5em; }
}
/* A name never runs off the picture: it moves along its mark by the place's own x (--x, 0 to 100), centred in the
   middle, starting at the mark near the left edge and ending at it near the right, with its arrow kept on the mark.
   Places are on the picture, so this is the same in right to left. */
.ln-spot .ln-chip, .ln-spot-answer { transform: translateX(calc(var(--x, 50) * -1%)); }
.ln-spot .ln-chip::before { left: calc(var(--x, 50) * 1%); }
.ln-label-tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 10px; border-radius: 18px; border: 2px dashed var(--ln-line-2); background: var(--ln-card-2); }
.ln-label-tray.is-over { border-color: var(--w-accent); }
.ln-label-tray:empty { opacity: .5; }
@keyframes ln-spot-turn { to { transform: rotate(1turn); } }
/* A mark is a ring the picture shows through (a star's Arabic under it, a town's dot; LR13), with its number on a
   small badge at its top corner; a filled place keeps a small dot on the exact spot. */
.ln-label-stage .ln-spot-dot { width: 32px; height: 32px; background: color-mix(in srgb, var(--w-deep) 8%, transparent); box-shadow: inset 0 0 0 3px var(--w-deep), inset 0 0 0 4.5px rgba(255, 255, 255, .75), 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 14px -6px rgba(0, 0, 0, .45); }
.ln-spot-n { position: absolute; top: -9px; right: -11px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1; color: #fff; background: var(--w-deep); box-shadow: 0 0 0 2px #fff; }
.ln-label-stage .ln-spot.is-over .ln-spot-dot { box-shadow: inset 0 0 0 3px var(--w-accent), 0 0 0 4px var(--w-accent), 0 10px 22px -6px rgba(0, 0, 0, .55); }
.ln-label-stage .ln-spot.is-filled .ln-spot-dot { width: 12px; height: 12px; background: var(--w-deep); box-shadow: 0 0 0 2px #fff, 0 3px 8px -2px rgba(0, 0, 0, .5); }
.ln-spot.is-filled .ln-spot-n { display: none; }
.ln--teen .ln-label-stage .ln-spot-dot { background: rgba(139, 92, 246, .1); box-shadow: inset 0 0 0 3px #8b5cf6, inset 0 0 0 4.5px rgba(255, 255, 255, .6), 0 0 0 2px #22d3ee, 0 6px 14px -6px rgba(0, 0, 0, .6); }
.ln--teen .ln-spot-n { background: linear-gradient(135deg, #8b5cf6, #22d3ee); }
.ln--teen .ln-label-stage .ln-spot.is-filled .ln-spot-dot { background: #8b5cf6; }
.ln--kid .ln-label-stage .ln-spot-dot { width: 38px; height: 38px; background: rgba(43, 89, 195, .1); box-shadow: inset 0 0 0 4px #2b59c3, inset 0 0 0 6px rgba(255, 255, 255, .75), 0 0 0 2px #fff, 0 6px 14px -6px rgba(0, 0, 0, .45); }
.ln--kid .ln-spot-n { min-width: 24px; height: 24px; font-size: 14px; background: #2b59c3; }
.ln--kid .ln-label-stage .ln-spot.is-filled .ln-spot-dot { width: 14px; height: 14px; background: #2b59c3; }
@container (max-width: 520px) {
  /* Thinner rings with no turning dashes: on a small picture what is under the mark is small too. */
  .ln-label-stage .ln-spot-dot, .ln--kid .ln-label-stage .ln-spot-dot { width: 24px; height: 24px; box-shadow: inset 0 0 0 2px var(--w-deep), inset 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 1.5px rgba(255, 255, 255, .85); }
  .ln--teen .ln-label-stage .ln-spot-dot { box-shadow: inset 0 0 0 2px #8b5cf6, 0 0 0 1.5px #22d3ee; }
  .ln--kid .ln-label-stage .ln-spot-dot { box-shadow: inset 0 0 0 2.5px #2b59c3, 0 0 0 1.5px #fff; }
  .ln-label-stage .ln-spot-dot::after { display: none; }
  .ln-spot-n, .ln--kid .ln-spot-n { top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; }
  .ln-label-stage .ln-spot.is-filled .ln-spot-dot, .ln--kid .ln-label-stage .ln-spot.is-filled .ln-spot-dot { width: 10px; height: 10px; }
}

/* ---------- Drag words into a sentence ---------- */
.ln-fill-sentence { line-height: 2.4; }
.ln-fillgap { display: inline-flex; align-items: center; vertical-align: middle; min-width: 7ch; min-height: 44px; margin: 0 4px; padding: 2px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--w-accent) 60%, var(--ln-line-2)); background: color-mix(in srgb, var(--w-accent) 6%, transparent); transition: border-color .2s, background .2s, transform .2s; }
.ln-fillgap.is-over, .ln-fillgap.is-target { border-color: var(--w-accent); border-style: solid; background: color-mix(in srgb, var(--w-accent) 16%, transparent); transform: scale(1.04); }
.ln-fillgap.is-filled { border-color: transparent; border-style: solid; background: none; transform: none; }
.ln-fillgap.is-filled .ln-fillgap-empty { display: none; }
.ln-fillgap-empty { flex: 1; align-self: stretch; min-width: 7ch; border-radius: 10px; }
.ln-fillgap .ln-chip { min-height: 38px; padding: 6px 14px; font-size: 17px; }
.ln-fill-right { margin-inline-start: 6px; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff; background: var(--ln-good); }
.ln-fill-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 58px; padding: 12px; border-radius: 18px; background: var(--ln-card-2); box-shadow: inset 0 0 0 1.5px var(--ln-line); }
.ln-fill-bank.is-over { box-shadow: inset 0 0 0 2px var(--w-accent); }
.ln-chip--word { font-size: 17px; }

/* ---------- Estimate ---------- */
.ln-qestimate { display: grid; gap: 4px; }
.ln-est-verdict { text-align: center; font-size: 17px; font-weight: 800; color: var(--w-ink); }
.ln-est-verdict .ln-est-off { font-weight: 600; color: var(--ln-muted); }

/* ---------- Ordering and matching as drag and drop ---------- */
.ln-order-item:hover { box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px var(--w-accent); }
/* An item is dragged by a finger anywhere on it, not only by its handle (LR13); the page scrolls at the screen's edge. */
.ln-qbox .ln-order-item { touch-action: none; }
.ln-order-item.is-dragging { opacity: 1; z-index: 2; transform: scale(1.03) rotate(-.6deg); box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .45), 0 0 0 2.5px var(--w-accent); }
.ln-match-item:not(.ln-match-right) { cursor: grab; touch-action: none; }
.ln-match-right.is-over { transform: scale(1.03); box-shadow: inset 0 0 0 3px var(--w-accent), var(--ln-shadow-lift); }
.ln-match-item.ln-ghost { width: auto; }

/* ---------- The course's final quiz (course page) ---------- */
.ln-final { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; margin-top: 26px; padding: 30px 26px 24px; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--w-glow) 22%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--w-accent) 12%, var(--ln-card)), var(--ln-card) 60%); }
.ln-final::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--w-accent) 7%, transparent) 22px 24px); mask: linear-gradient(90deg, #000, transparent 70%); }
.ln-final-pin .ln-emblem { stroke: currentColor; }
.ln-final-medal { width: 104px; height: 104px; filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--w-accent) 35%, transparent)); }
.ln-final-medal svg { width: 100%; height: 100%; }
.ln-final-medal path { fill: color-mix(in srgb, var(--w-accent) 55%, transparent); }
.ln-final-medal circle { fill: var(--w-deep); }
.ln-final-medal .ln-final-ring { fill: none; stroke: var(--w-glow); stroke-width: 2.5; stroke-dasharray: 4 5; }
.ln-final-medal text { font-family: var(--ln-display); font-size: 30px; font-weight: 700; fill: var(--w-glow); }
.ln-final.is-done .ln-final-medal circle:not(.ln-final-ring) { fill: var(--ln-good); }
.ln-final.is-done .ln-final-medal text { fill: #fff; }
.ln-final.is-waiting .ln-final-medal, .ln-final.is-locked .ln-final-medal { filter: grayscale(.7) opacity(.75); }
.ln-final.is-next .ln-final-medal { animation: ln-final-breathe 3.2s ease-in-out infinite; }
.ln-final-copy { display: grid; gap: 6px; min-width: 0; }
.ln-final-tag { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; letter-spacing: .08em; background: var(--w-deep); color: var(--w-glow); }
.ln-final h3 { font-size: clamp(20px, 2.2vw, 26px); }
.ln-final-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-final-meta li { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--ln-ink-2); background: var(--ln-card); box-shadow: inset 0 0 0 1px var(--ln-line-2); }
.ln-final-meta b { color: var(--ln-ink); }
.ln-final-best { box-shadow: inset 0 0 0 1.5px var(--w-accent) !important; }
.ln-final-action { display: grid; justify-items: end; gap: 8px; text-align: end; max-width: 300px; }
.ln-final-state { font-weight: 800; color: var(--w-ink); }
.ln-final.is-done .ln-final-state { color: var(--ln-good); }
.ln-final-pips { display: flex; gap: 6px; }
.ln-final-pips i { width: 28px; height: 8px; border-radius: 999px; background: var(--ln-line-2); }
.ln-final-pips i.is-done { background: linear-gradient(90deg, var(--w-accent), var(--w-glow)); }
.ln-level-pip--final { background: var(--w-deep); color: var(--w-glow); }
.ln-level-pip--final.is-done { background: var(--ln-good); color: #fff; }
@keyframes ln-final-breathe { 50% { transform: scale(1.05) rotate(4deg); } }
@media (max-width: 760px) {
  .ln-final { grid-template-columns: auto minmax(0, 1fr); padding: 30px 18px 20px; }
  .ln-final-medal { width: 76px; height: 76px; }
  .ln-final-action { grid-column: 1 / -1; justify-items: stretch; text-align: start; max-width: none; }
  .ln-final-action .ln-btn { justify-content: center; }
}

/* ---------- The medal of a passed final quiz (quiz result) ---------- */
.ln-medal { display: grid; justify-items: center; gap: 4px; margin-bottom: 6px; animation: ln-medal-in .7s var(--ln-ease) both; }
.ln-medal svg { width: 132px; height: 132px; filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--w-accent) 45%, transparent)); animation: ln-medal-spin 1.1s var(--ln-ease) both; }
.ln-medal b { font-family: var(--ln-display); font-size: 26px; font-weight: 700; color: var(--w-ink); }
.ln-medal span { font-size: 14px; color: var(--ln-muted); }
.ln-medal--teen b { background: linear-gradient(90deg, #8b5cf6, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; letter-spacing: .06em; }
.ln-medal--kid svg { width: 156px; height: 156px; }
.ln-medal--kid b { color: #ff8a00; font-size: 30px; }
.ln-medal[hidden] { display: none; }
.ln-end-kept { margin: 0 auto 4px; padding: 6px 14px; width: fit-content; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ln-ink-2); background: var(--ln-card); box-shadow: inset 0 0 0 1px var(--ln-line-2); }
.ln-end-kept[hidden] { display: none; }
@keyframes ln-medal-in { from { opacity: 0; transform: translateY(16px) scale(.8); } }
@keyframes ln-medal-spin { from { transform: rotateY(180deg) scale(.6); } }

/* ---------- Looks ---------- */
.ln--teen .ln-final { background: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, .28), transparent 55%), linear-gradient(135deg, rgba(34, 211, 238, .12), var(--ln-card) 60%); box-shadow: 0 0 0 1px rgba(139, 92, 246, .35), 0 18px 40px -24px rgba(0, 0, 0, .9); }
.ln--teen .ln-final-tag { background: linear-gradient(90deg, #8b5cf6, #22d3ee); color: #12081f; }
.ln--teen .ln-spot-dot { background: linear-gradient(135deg, #8b5cf6, #22d3ee); }
.ln--kid .ln-final { border-radius: 32px; }
.ln--kid .ln-final-tag { background: #ffb020; color: #3b2300; }
.ln--kid .ln-spot-dot { width: 42px; height: 42px; font-size: 17px; background: #2b59c3; }
.ln--kid .ln-fillgap, .ln--kid .ln-label-tray, .ln--kid .ln-fill-bank { border-radius: 22px; }
.ln--kid .ln-tick { border-radius: 50%; }
.ln--kid .ln-qbox .ln-chip.has-pic img { max-width: 136px; height: 92px; }
@media (max-width: 560px) {
  .ln-qbox .ln-chip.has-pic { flex-basis: calc(50% - 4px); }
  .ln-qbox .ln-chip.has-pic img, .ln--kid .ln-qbox .ln-chip.has-pic img { height: 72px; }
}

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ln-spot-dot::after, .ln-final.is-next .ln-final-medal, .ln-medal, .ln-medal svg { animation: none; }
}