/* Look and Remember / Bak ve Hatırla (Memory & Focus Games)
   Engine prefix kflr-. Written against the same house rules as the difference
   game: one grid row per child, air on every edge, and no animation that loops
   or flashes. */

.kf-look-remember { display: block; }
.kf-look-remember:not(.kflr-ready) { min-height: 60vh; }

.kflr-stage {
  position: relative;
  width: var(--kflr-w, auto);
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--kf-lilac-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  /* AIR ON EVERY SIDE, and more of it than felt necessary: measured at 19px
     under the top and Deniz threw it back ("kenarlara bu kadar yanasamazsin").
     24px on a board, 16px on a phone where height is worth more, and never
     less than that. */
  padding: var(--space-4);
  display: grid;
  /* ONE ROW PER CHILD, and only the picture's row stretches. Adding a child
     without adding a row here shifts every child up one and the picture gets
     drawn over the buttons.
     Title, Ori's line + the ready button, the bar, the picture. The message
     used to be a fifth row along the BOTTOM; it read as fine print there and
     it took the ready button down with it. */
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}
.kflr-stage--phone { padding: var(--space-3) var(--space-3) var(--space-4); }
.kflr-fslead { height: 0; }
/* The shared layer pads the FIRST CHILD by 24px in wide mode, to put air above
   a game's own button row. Our first child is this zero-height lead, so that
   padding did nothing but push the whole board 24px down and off the bottom of
   the screen (measured at 1280, 1440 and 1920: the board ended 28px past the
   fold every time). The layer's selector is
   [data-kf-fs].kf-fs-on[data-kf-fs-wide] > :first-child, which outranks a
   two-class rule even with !important, so this one is written long enough to
   win. */
[data-kf-fs].kf-look-remember.kf-fs-on[data-kf-fs-wide] > .kflr-fslead,
[data-kf-fs].kf-look-remember.kf-fs-fake[data-kf-fs-wide] > .kflr-fslead { padding-top: 0 !important; }
/* A 16:9 picture on an upright phone can only be so tall, so there is always
   space left over there. It splits above and below the board rather than
   pooling under it, which reads as a deliberate frame instead of a page that
   ran out. */
[data-kf-fs].kf-look-remember.kf-fs-on[data-kf-fs-wide],
[data-kf-fs].kf-look-remember.kf-fs-fake[data-kf-fs-wide] { display: flex; flex-direction: column; justify-content: center; }
[data-kf-fs].kf-look-remember.kf-fs-on[data-kf-fs-wide] > .kflr-stage,
[data-kf-fs].kf-look-remember.kf-fs-fake[data-kf-fs-wide] > .kflr-stage { flex: 0 1 auto; }

.kflr-title {
  /* the board's own heading, at heading size: it was 21px and read as a label */
  margin: 6px 0 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--kf-purple-deep);
}
.kflr-stage--phone .kflr-title { font-size: 1.35rem; margin: 8px 0 10px; }

/* WHAT ORI SAYS, at the top and impossible to miss: gold, centred, heading
   weight. Deniz, 2026-08-20: "uste Ne kayboldu nun altinda yer altin ortali
   dikkat cekici sekilde". */
/* Ori's line and the button under it are two different things, so they get
   room between them (8px read as one crowded block). */
.kflr-head { display: grid; justify-items: center; gap: 16px; }
.kflr-stage--phone .kflr-head { gap: 14px; }
.kflr-say { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.kflr-msg-text {
  margin: 0;
  max-width: 46rem;
  text-align: center;
  /* the line breaks where the SENTENCE breaks: the copy carries its own
     newline and this honours it, instead of letting the box decide */
  white-space: pre-line;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.3;
  /* --kf-gold-deep is the token that PASSES on our grounds (5.07:1 on cream,
     4.61:1 on gold-soft); raw --kf-gold is 2.13:1 and is for rules and borders,
     never for a sentence a child has to read. */
  color: var(--kf-gold-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.kflr-stage--phone .kflr-msg-text { font-size: 1rem; }
.kflr-head-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.kflr-head-row:empty { display: none; }

.kflr-ready-btn {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--kf-purple-deep);
  background: linear-gradient(180deg, #ffd94d 0%, #f0b929 100%);
  border: 3px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  padding: 14px 40px;
  min-height: 64px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.28), var(--shadow-soft);
}
.kflr-ready-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.kflr-ready-btn:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
.kflr-ready-btn:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 4px; }
.kflr-stage--phone .kflr-ready-btn { font-size: 1.1rem; padding: 12px 28px; min-height: 56px; }

/* ---------- top bar: score left, tools right, the way out last ---------- */
.kflr-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 72px;
}
.kflr-stage--phone .kflr-bar { min-height: 56px; row-gap: 6px; }
.kflr-stage--phone .kflr-barright { flex: 1 0 100%; order: 1; justify-content: center; }
.kflr-stars {
  flex: 0 1 auto;
  margin-right: auto;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-on-art);
  box-shadow: var(--rim-on-art);
  max-width: 100%;
  flex-wrap: wrap;
}
.kflr-star { display: inline-flex; color: rgba(253, 250, 244, 0.28); }
.kflr-star.is-lit { color: var(--kf-gold); }
.kflr-star svg { display: block; width: 26px; height: 26px; }
.kflr-stage--phone .kflr-star svg { width: 18px; height: 18px; }

.kflr-barright { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kflr-barbtn {
  min-width: 64px;
  min-height: 64px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  color: var(--kf-purple-deep);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.kflr-barbtn:hover { border-color: var(--kf-gold); }
.kflr-barbtn:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kflr-stage--phone .kflr-barbtn { min-width: 56px; min-height: 56px; }
/* THE HINT, rebuilt. It was a 64px square with a 0.7rem word under a badly
   drawn glyph, and Deniz threw it out ("Ipucu da cok cirkin ve hic
   anlasilmiyor"). It is a gold pill now, with the house lantern at a size that
   reads and its word beside it rather than under it. */
.kflr-hintbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 22px 0 16px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff6dc 0%, #ffe9a8 100%);
  border: 3px solid var(--kf-gold);
  border-radius: var(--radius-pill);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  -webkit-tap-highlight-color: transparent;
}
.kflr-hintbtn:hover { filter: brightness(1.04); }
.kflr-hintbtn:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kflr-hintbtn svg { display: block; }
.kflr-stage--phone .kflr-hintbtn { min-height: 56px; font-size: 0.95rem; padding: 0 16px 0 12px; }
/* the way out is not a fifth tool: no card, and bigger than the tools */
.kflr-exit { background: transparent; border-color: transparent; min-width: 72px; min-height: 72px; margin-left: 4px; }
.kflr-exit:hover { border-color: transparent; }
.kflr-exit-img { width: 66px; height: 66px; display: block; filter: drop-shadow(0 2px 4px rgba(15, 10, 36, 0.28)); }
.kflr-stage--phone .kflr-exit { min-width: 56px; min-height: 56px; margin-left: 0; }
.kflr-stage--phone .kflr-exit-img { width: 48px; height: 48px; }

/* ---------- the picture and its layers ---------- */
.kflr-main { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
.kflr-pic {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--kf-teal-soft);
  box-shadow: var(--shadow-soft);
}
.kflr-img, .kflr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* THE FILM IS NOT A PLAYER. No controls are ever added, it swallows no taps,
   and it only exists on screen while it is running. Its first and last frames
   are the two pictures, so switching to and from it is invisible. */
.kflr-video { opacity: 0; pointer-events: none; z-index: 2; }
.kflr-video.is-on { opacity: 1; }
.kflr-marks, .kflr-items, .kflr-fx { position: absolute; inset: 0; }
.kflr-items, .kflr-fx { pointer-events: none; }

.kflr-item { position: absolute; display: block; }
.kflr-item.is-arriving { animation: kflr-arrive 700ms ease-out both; }
@keyframes kflr-arrive {
  from { opacity: 0; filter: brightness(1.9) drop-shadow(0 0 18px rgba(255, 236, 168, 0.95)); }
  60% { opacity: 1; filter: brightness(1.35) drop-shadow(0 0 14px rgba(255, 236, 168, 0.8)); }
  to { opacity: 1; filter: none; }
}

/* ---------- the question marks ---------- */
.kflr-mark {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 70%;
}
.kflr-mark img { width: 100%; height: 100%; display: block; }
.kflr-mark:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 4px; border-radius: 12px; }
.kflr-mark:hover { filter: drop-shadow(0 0 10px rgba(255, 232, 150, 0.9)); }
/* a finger landed: one hop, once */
.kflr-mark.is-hit { animation: kflr-hop 420ms ease-out; }
@keyframes kflr-hop { 0% { transform: scale(1); } 45% { transform: scale(1.16) translateY(-4%); } 100% { transform: scale(1); } }
/* the nudge, when the child has gone quiet: a slow wave, three times, then it
   stops. It never loops for ever and it never flashes. */
.kflr-mark.is-wave { animation: kflr-wave 1500ms ease-in-out 2; }
@keyframes kflr-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}
/* the hint: a soft light around this one, three breaths */
.kflr-mark.is-shown { animation: kflr-shown 700ms ease-in-out 3; }
@keyframes kflr-shown {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 232, 150, 0)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 232, 150, 0.95)); }
}
.kflr-mark.is-gone { animation: kflr-fade 400ms ease-in both; pointer-events: none; }
@keyframes kflr-fade { to { opacity: 0; transform: scale(0.6); } }

.kflr-sparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: radial-gradient(circle, #fff8dc 0%, #ffd970 45%, rgba(255, 217, 112, 0) 70%);
  animation: kflr-twinkle 900ms ease-out both;
}
@keyframes kflr-twinkle {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.7); }
}

.kflr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- the question panel ---------- */
.kflr-panel {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: rgba(45, 27, 78, 0.58);
}
.kflr-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  max-width: 46rem;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.kflr-cover { width: 150px; height: auto; display: block; }
.kflr-q {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--kf-purple-deep);
}
.kflr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kflr-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  color: var(--kf-purple-deep);
  background: var(--kf-lilac-soft);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.kflr-opt:hover { border-color: var(--kf-gold); }
.kflr-opt:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kflr-opt.is-right { background: var(--kf-teal-soft); border-color: var(--kf-teal); }
/* a wrong answer steps back rather than being told off: it fades and stops
   answering, and the child tries again with no counter anywhere */
.kflr-opt.is-out { opacity: 0.42; cursor: default; }
/* answered: the other three stand down quietly. Fainter than a wrong answer,
   because nothing went wrong here - the question is simply over. */
.kflr-opt.is-quiet { opacity: 0.3; cursor: default; }
.kflr-opt.is-quiet:hover { border-color: var(--kf-lilac); }
.kflr-opt.is-right { cursor: default; }
.kflr-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 2px solid rgba(15, 10, 36, 0.35); }
/* the two-colour answers ("red and blue"): one disc cut in half, because a
   single dot cannot say two colours and a drawing cannot either */
.kflr-dot--two { border-radius: 50%; }
/* THE DRAWING BESIDE THE WORD. Big enough to be read at a glance by a child
   who cannot read the word, and never bigger than the line it sits on. */
.kflr-opt-pic {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: contain;
  /* the art is line work on transparency; nothing to crop, nothing to frame */
}
.kflr-opt.is-quiet .kflr-opt-pic { opacity: 0.75; }
@media (max-width: 34rem) {
  .kflr-opt-pic { width: 40px; height: 40px; }
}
.kflr-dot.is-rainbow { background: conic-gradient(#e0564a, #f2c53d, #5fb84f, #4aa3e0, #a07cc5, #e0564a); }
.kflr-note { margin: 10px 0 0; min-height: 1.4em; font-weight: 700; color: var(--kf-purple-deep); }
.kflr-panel-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
/* the hint inside the question: gold like the board's own hint, so a child who
   has met one recognises the other */
.kflr-panel-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px 0 12px;
  background: linear-gradient(180deg, #fff6dc 0%, #ffe9a8 100%);
  border: 3px solid var(--kf-gold);
  border-radius: var(--radius-pill);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 800;
  cursor: pointer;
}
/* `display: inline-flex` BEATS THE hidden ATTRIBUTE, and that silently broke
   two things at once. The engine has been writing `hintB.hidden = true` since
   the day the panel hint was built - when only two options are left, and now
   also when the question has been answered - and the button stayed on screen
   every single time, because [hidden]'s display:none comes from the browser's
   own sheet and loses to any class rule. A screenshot of the live page found
   it; the gate had not, because it read the PROPERTY (true) instead of what
   was on the screen. Both are fixed: this rule, and the gate now measures the
   rendered box. */
.kflr-panel-hint[hidden] { display: none; }
.kflr-panel-hint:hover { filter: brightness(1.04); }
.kflr-panel-hint:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kflr-panel-hint svg { display: block; }
.kflr-panel-back {
  margin-top: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--kf-purple-deep);
  background: none;
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  min-height: 44px;
  cursor: pointer;
}
.kflr-panel-back:hover { border-color: var(--kf-gold); }

.kflr-card--win { grid-template-columns: minmax(0, 1fr); text-align: center; max-width: 34rem; }
.kflr-win-h { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.5rem; color: var(--kf-purple-deep); }
.kflr-win-p { margin: 0 0 var(--space-3); color: var(--kf-purple-deep); }
.kflr-win-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* the same two buttons the rest of the house uses: a gold one that does the
   thing, a quiet one that leaves. Deniz rejected the flat pair. */
.kflr-win-btn {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  min-height: 64px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--kf-purple-deep);
  background: var(--color-surface);
  color: var(--kf-purple-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.22), var(--shadow-soft);
}
.kflr-win-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kflr-win-btn:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 4px; }
.kflr-win-btn--gold { background: linear-gradient(180deg, #ffd94d 0%, #f0b929 100%); }

@media (max-width: 40rem) {
  .kflr-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .kflr-cover { width: 108px; }
  .kflr-opts { grid-template-columns: minmax(0, 1fr); }
  .kflr-opt { text-align: left; }
}

/* tokens.css zeroes every animation duration under reduced motion, which would
   turn these into instant jumps rather than calm. So the still state is written
   as plain properties instead of a slower keyframe. */
@media (prefers-reduced-motion: reduce) {
  .kflr-mark.is-hit, .kflr-mark.is-wave, .kflr-mark.is-shown { animation: none; }
  .kflr-mark.is-shown { filter: drop-shadow(0 0 16px rgba(255, 232, 150, 0.9)); }
  .kflr-item.is-arriving { animation: none; }
  .kflr-sparkle { display: none; }
}