/* The Singing Garland / Dizi Dizi Boncuk (D-172) - kf-garland.js styles.
 * Loaded AFTER kf-games.css (the shared .kfe-confetti lives there).
 * Nova spec 05-nova-design-spec.md, built on the kf-sudoku.css shell
 * (two-orientation Game Shell grid, invisible-at-rest message band).
 *
 * Tokens only, NO new tokens (Nova's rule). Buttons wear the V38 house
 * pill dialect: gold gradient primary + calm surface secondary, both on
 * a 3px deep-purple border with the hard 0 4px 0 shadow (the exact pair
 * kf-hidden-color-echoes.css ships); the Hear the Pattern pill is the
 * house gold-soft lantern pill (same file's .hce-hint dress).
 *
 * MOTION BUDGET: the only looping animations are the active gap's breath
 * (scale 1.0 -> 1.06, 2.4s) and the cord's slow sway (translateY 3px,
 * 6s); both die under prefers-reduced-motion. Every glow is a fade to a
 * STATIC state; opacity ceilings keep a flash physically impossible. */

.kf-garland {
  position: relative;
}

/* ---------- stage (Game Shell, two orientations) ---------- */

.kfgl-stage {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--kf-lilac-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2);
  display: grid;
}
/* LANDSCAPE: toolbar top, tray as a right-hand rail (15rem; 19rem from
   900px up, Nova), message band under the scene at the scene's width */
.kfgl-stage[data-orient='l'] {
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'bar bar'
    'scene tray'
    'msg tray';
  gap: 8px 12px;
}
@media (min-width: 900px) {
  .kfgl-stage[data-orient='l'] {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
}
/* PORTRAIT: scene, band, tray, toolbar at the bottom (thumb zone) */
.kfgl-stage[data-orient='p'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    'scene'
    'msg'
    'tray'
    'bar';
  gap: 8px;
}

.kfgl-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kfgl-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;
  text-decoration: none;
  padding: 0;
}
.kfgl-barbtn:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kfgl-fs { margin-left: auto; }

/* ---------- the scene: posts, cord, Melo ---------- */

.kfgl-boardwrap {
  grid-area: scene;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  min-width: 0;
}
.kfgl-scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: url('/games/garland/stage-bg.webp?v=1') center / cover no-repeat;
  box-shadow: var(--shadow-soft);
}
/* the slide-in wrapper: a fresh string arrives from the right (300ms);
   reduced motion never adds the class, so nothing moves */
.kfgl-slide {
  position: absolute;
  inset: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.kfgl-slide--in {
  transform: translateX(48px);
  opacity: 0;
  transition: none;
}
/* the sway group: rope + slots breathe as one piece, slowly */
.kfgl-swing {
  position: absolute;
  inset: 0;
  animation: kfgl-sway 6s ease-in-out infinite alternate;
}
@keyframes kfgl-sway {
  from { transform: translateY(0); }
  to { transform: translateY(3px); }
}
.kfgl-rope {
  position: absolute;
  inset: 0;
  display: block;
}
.kfgl-rope-under {
  fill: none;
  stroke: var(--kf-purple-deep);
  stroke-width: 7;
  stroke-linecap: round;
}
.kfgl-rope-over {
  fill: none;
  stroke: var(--kf-gold);
  stroke-width: 4;
  stroke-linecap: round;
}
.kfgl-hanger {
  stroke: var(--kf-purple-deep);
  stroke-width: 2;
  stroke-linecap: round;
}

.kfgl-slots {
  position: absolute;
  inset: 0;
  pointer-events: none; /* DISPLAY ONLY: the tray charms are the targets */
}
.kfgl-slot {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}
.kfgl-slot--full .kfgl-charmimg,
.kfgl-slot--full .kfgl-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--rim-sprite); /* readable over the painted background */
}
/* the ACTIVE gap: dashed gold circle, soft breath (static when reduced) */
.kfgl-slot--active::before {
  content: '';
  position: absolute;
  inset: 6%;
  border: 3px dashed var(--kf-gold);
  border-radius: 50%;
  background: rgba(253, 250, 244, 0.16);
  animation: kfgl-breath 2.4s ease-in-out infinite alternate;
}
@keyframes kfgl-breath {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
/* later gaps wait, faint (40%, Nova) */
.kfgl-slot--later::before {
  content: '';
  position: absolute;
  inset: 6%;
  border: 3px dashed var(--kf-gold);
  border-radius: 50%;
  opacity: 0.4;
}
/* the string's tune: one charm at a time lights up (a fade to a static
   glow, never a pulse on any single element) */
.kfgl-slot--lit .kfgl-charmimg,
.kfgl-slot--litall .kfgl-charmimg {
  filter: var(--rim-sprite) drop-shadow(0 0 10px rgba(212, 168, 67, 0.8));
  transition: filter 150ms ease;
}
.kfgl-fallback {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--kf-cream);
  background: rgba(45, 27, 78, 0.55);
  border-radius: 50%;
}

/* Melo at the left post, non-interactive; his ears are two measured
   radial layers that answer a right pick (ceiling opacity 0.55) */
/* Melo's height is set by the ENGINE from the measured scene (Deniz,
   2026-08-27: "Melo çok küçük kalmış" - the old 150px cap kept him a
   thumbnail on a tall scene). These are only the fallbacks for the frame
   before the first layout runs. */
/* Melo stands CENTRED at the bottom and the scene crops him at the waist
   (Deniz's mock-up): both his height and his negative bottom offset are
   set by the engine from the measured scene, so he never covers a charm.
   These are only the fallbacks for the frame before the first layout. */
.kfgl-melo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -24%;
  height: 60%;
  min-height: 200px;
  aspect-ratio: 529 / 1100;
  pointer-events: none;
  user-select: none;
}
.kfgl-melo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.kfgl-earglow {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 67, 0.9) 0%, rgba(212, 168, 67, 0.35) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.kfgl-earglow--on {
  animation: kfgl-earglow 1.4s ease-in-out forwards;
}
@keyframes kfgl-earglow {
  0% { opacity: 0; }
  22% { opacity: 0.55; } /* ~300ms fade-in, the Nova floor */
  70% { opacity: 0.55; }
  100% { opacity: 0; }
}
/* reduced motion: appears at once, holds static, engine removes it */
.kfgl-earglow--static {
  opacity: 0.55;
}

/* progress medallions, top-left (28px; 22px on phones) */
.kfgl-medals {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
}
.kfgl-medal {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid var(--kf-cream);
  background: rgba(15, 10, 36, 0.35);
  box-shadow: var(--shadow-soft);
}
.kfgl-medal--full {
  background: var(--kf-gold);
  border-color: var(--kf-cream);
}
@media (max-width: 480px) {
  .kfgl-medal { width: 22px; height: 22px; border-width: 2px; }
}

/* ---------- message band: invisible at rest, zero CLS ---------- */

.kfgl-msg {
  grid-area: msg;
  min-height: 3.25rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: background-color 250ms ease, box-shadow 250ms ease;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--color-text);
}
.kfgl-msg--on {
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

/* ---------- tray: the only touch targets ---------- */

.kfgl-traypanel {
  grid-area: tray;
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
  display: flex;
  min-height: 0;
  min-width: 0;
  gap: var(--space-3);
}
.kfgl-stage[data-orient='l'] .kfgl-traypanel {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  max-height: 100%;
  overflow-y: auto;
}
.kfgl-stage[data-orient='p'] .kfgl-traypanel {
  flex-direction: row-reverse; /* charms by the thumb, the pill beside */
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}
.kfgl-tray {
  display: grid;
  /* 2/3/4 choices share one grid, at most 2 columns (Nova) */
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  max-width: 232px;
  gap: var(--space-2);
  justify-items: center;
}
/* the charm choice: circular calm-surface pill, white ground, 3px deep
   purple border (the V38 dialect), sprite at 80% */
.kfgl-choice {
  width: 104px;
  height: 104px;
  min-width: var(--tap-play-min);
  min-height: var(--tap-play-min);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid var(--kf-purple-deep);
  background: #fff;
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.22), var(--shadow-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.kfgl-choice .kfgl-charmimg,
.kfgl-choice .kfgl-fallback {
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
}
.kfgl-choice .kfgl-fallback {
  color: var(--kf-purple-deep);
  background: transparent;
}
@media (hover: hover) {
  .kfgl-choice:hover { transform: translateY(-2px); }
}
.kfgl-choice:focus-visible {
  outline: 3px solid var(--kf-purple-deep);
  outline-offset: 3px;
}
/* the honest scaffold: the correct charm's soft static glow after a listen */
.kfgl-choice--hint {
  box-shadow: var(--glow-hint-soft), 0 4px 0 rgba(45, 27, 78, 0.22);
}
/* the wrong pick's drift home: lift, drop back, tiny 2px bob; no red,
   no shake (transform-only, ~400ms) */
.kfgl-choice--drift {
  animation: kfgl-drift 420ms ease-out;
}
@keyframes kfgl-drift {
  0% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  80% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
/* reduced motion: a quiet opacity dip instead */
.kfgl-choice--dim {
  opacity: 0.85;
}

/* the Hear the Pattern pill: the house gold-soft lantern pill */
.kfgl-hear {
  min-height: 64px;
  box-sizing: border-box;
  width: 100%;
  max-width: 232px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--kf-gold);
  background: linear-gradient(180deg, #fff6dc 0%, #ffe9a8 100%);
  box-shadow: var(--shadow-soft);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.4rem var(--space-3);
  cursor: pointer;
}
.kfgl-hear svg { display: block; flex: 0 0 auto; }
.kfgl-hear:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kfgl-hear[aria-disabled='true'] { opacity: 0.6; cursor: default; }
.kfgl-stage[data-orient='p'] .kfgl-hear {
  width: auto;
  flex-direction: column;
  min-width: 84px;
  font-size: 0.9rem;
  padding: 0.4rem var(--space-2);
}
.kfgl-stage[data-orient='p'] .kfgl-tray {
  max-width: none;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
}

@media (max-width: 480px) {
  .kfgl-choice { width: 84px; height: 84px; }
}

/* ---------- the flying clone ---------- */

.kfgl-fly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  filter: var(--rim-sprite);
}

/* ---------- celebration (house pattern 7) ---------- */

.kfgl-overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-navy);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  z-index: 6;
}
.kfgl-wincard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-4);
  margin: var(--space-3);
  max-width: 30rem;
  text-align: center;
  max-height: calc(100% - 2 * var(--space-3));
  overflow-y: auto;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .kfgl-wincard { max-width: 90vw; }
}
.kfgl-winimg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
}
.kfgl-wincard h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--kf-purple-deep);
  margin: 0 0 var(--space-3);
}
.kfgl-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* the V38 pair: gold gradient primary, calm surface secondary, both on
   the 3px deep-purple border with the hard 0 4px 0 shadow */
.kfgl-pill {
  min-height: 64px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--kf-purple-deep);
  padding: 0 var(--space-4);
  cursor: pointer;
  text-decoration: none;
}
.kfgl-pill--gold {
  background: linear-gradient(180deg, #ffd94d 0%, #f0b929 100%);
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.28), var(--shadow-soft);
}
.kfgl-pill--calm {
  background: var(--color-surface);
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.22), var(--shadow-soft);
}
.kfgl-pill:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }

/* ---------- full screen: grows, never recomposes ---------- */

.kfgl-stage.kfgl-full {
  max-width: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* ---------- screen-reader only ---------- */

.kfgl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- reduced motion: everything rests ---------- */

@media (prefers-reduced-motion: reduce) {
  .kfgl-swing { animation: none; }
  .kfgl-slot--active::before { animation: none; }
  .kfgl-slide { transition: none; }
  .kfgl-choice { transition: none; }
  .kfgl-choice--drift { animation: none; }
  .kfgl-earglow--on { animation: none; opacity: 0.55; }
}

/* ---------- the How-to-Play button + panel (Deniz 2026-08-28) ----------
   The button sits ABOVE the Hear pill: the calm V38 surface pill (the
   gold pill stays the one primary). The panel is the house pattern-6
   modal: child-opened, three ways out, focus trapped. */

.kfgl-howbtn {
  min-height: 56px;
  box-sizing: border-box;
  width: 100%;
  border: 3px solid var(--kf-purple-deep);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.22), var(--shadow-soft);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.35rem var(--space-3);
  cursor: pointer;
}
.kfgl-howbtn:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }

.kfgl-hp-overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-navy);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  z-index: 7;
}
.kfgl-hp {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-4);
  margin: var(--space-3);
  max-width: min(28rem, calc(100% - 2 * var(--space-3)));
  max-height: calc(100% - 2 * var(--space-3));
  overflow: auto;
  box-sizing: border-box;
}
.kfgl-hp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.kfgl-hp-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--kf-purple-deep);
  margin: 0;
}
.kfgl-hp-close {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0 var(--space-3);
  cursor: pointer;
  flex: none;
}
.kfgl-hp-close:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 2px; }
.kfgl-hp-body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}
.kfgl-hp-listen {
  min-height: 56px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--kf-gold);
  background: linear-gradient(180deg, #fff6dc 0%, #ffe9a8 100%);
  box-shadow: var(--shadow-soft);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.35rem var(--space-4);
  cursor: pointer;
}
.kfgl-hp-listen svg { display: block; flex: 0 0 auto; }
.kfgl-hp-listen:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }
.kfgl-hp-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  color: var(--color-text);
}