/*
 * config/config.css — styles for the "בחירת תמונות" configuration tile.
 *
 * Self-contained: every selector is prefixed `cfg-` (or scoped under
 * .app--config / html[data-game="config"]) so nothing here can leak into
 * the rest of the suite. Reuses the shared design tokens (--accent, --ink,
 * --card, …) defined in shared/style.css :root, but overrides NOTHING in
 * that file.
 */

html[data-game="config"] {
  --accent:  #2f6da6;   /* sea-blue — calm, "settings"-ish; distinct from
                           the game accents, harmonises with the cream. */
  --bg-deep: #d4e3f0;
}

.app--config {
  height: auto;          /* neutralise .app's height:100% — this page scrolls */
  min-height: 100dvh;
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 14px calc(96px + env(safe-area-inset-bottom)); /* room for sticky footer */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header--bare { margin-bottom: 2px; }
.cfg-head-actions { display: flex; gap: 8px; }

.cfg-title {
  font-family: var(--letter-font);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 38px);
  color: color-mix(in oklch, var(--accent) 78%, var(--ink));
  margin: 4px 0 0;
  text-align: center;
}
/* ── Icon buttons (no text — clear glyphs + aria-label only) ──────────────── */
.cfg-iconbtn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 2px 8px -3px rgba(43, 33, 24, .4);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .1s, background .15s;
}
.cfg-iconbtn svg { width: 22px; height: 22px; }
.cfg-iconbtn:active { transform: scale(.93); }
.cfg-iconbtn--primary { background: var(--accent); color: #fff; }
.cfg-iconbtn--lg { width: 64px; height: 64px; }
.cfg-iconbtn--lg svg { width: 30px; height: 30px; }

/* ── Sticky top: coverage strip + always-on category bar ─────────────────── */
.cfg-stickytop {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(var(--bg) 88%, transparent);
  /* The wrapper itself lets taps through; only the category buttons (which
     are opaque chips) re-enable pointer events. The coverage row stays
     tap-transparent so tiles scrolling under it remain tappable. */
  pointer-events: none;
}

.cfg-coverage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 2px;
  /* Purely informational — must never intercept taps on the tiles that
     scroll beneath the sticky bar. */
  pointer-events: none;
}
.cfg-coverage__count {
  font-family: var(--ui-font);
  font-weight: 800;
  font-size: clamp(15px, 4vw, 19px);
  color: var(--accent);
}
.cfg-coverage__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  direction: rtl;
}
.cfg-dot {
  font-family: var(--letter-font);
  font-size: 12px;
  line-height: 1;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-soft);
  background: color-mix(in oklch, var(--ink) 8%, var(--card));
  transition: background .2s, color .2s, transform .2s;
}
.cfg-dot[data-on="1"] {
  color: #fff;
  background: var(--good);
  transform: scale(1.05);
}

/* ── Category bar (always-on theme cards) ────────────────────────────────── */
.cfg-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The chips are the one interactive part of the sticky header. */
  pointer-events: auto;
}
.cfg-cats::-webkit-scrollbar { display: none; }
.cfg-cat {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid color-mix(in oklch, var(--accent) 38%, transparent);
  background: var(--card);
  color: var(--ink);
  font-family: var(--letter-font);
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 2px 8px -4px rgba(43, 33, 24, .4);
  transition: transform .1s, background .15s, border-color .15s;
  touch-action: manipulation;
}
.cfg-cat:active { transform: translateY(1px); background: color-mix(in oklch, var(--accent) 10%, var(--card)); }

/* ── Theme sections + gallery grid ───────────────────────────────────────── */
.cfg-themes { display: flex; flex-direction: column; gap: 16px; }
.cfg-theme__name {
  font-family: var(--letter-font);
  font-weight: 700;
  font-size: clamp(18px, 4.6vw, 24px);
  color: var(--ink);
  margin: 4px 2px;
  padding-bottom: 4px;
  border-bottom: 2px solid color-mix(in oklch, var(--accent) 30%, transparent);
}

.cfg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2.4vw, 14px);
}
@media (min-width: 560px) { .cfg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 820px) { .cfg-grid { grid-template-columns: repeat(6, 1fr); } }

.cfg-tile {
  position: relative;
  appearance: none;
  border: 3px solid transparent;
  background: var(--card);
  border-radius: 16px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 0 rgba(0,0,0,.04),
    0 10px 20px -12px rgba(43, 33, 24, .25);
  transition: transform .12s cubic-bezier(.3,.7,.4,1), border-color .15s, opacity .2s, filter .2s;
  /* pan-y keeps vertical scrolling working when a drag starts on a tile
     (we no longer preventDefault in pointerdown — that blocked scroll on
     iOS). The properties below suppress the iOS long-press text/callout
     that preventDefault used to mask. */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.cfg-tile:active { transform: translateY(2px); }
.cfg-tile__art {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg);
  display: grid; place-items: center;
}
.cfg-tile__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cfg-tile__letter {
  font-family: var(--letter-font);
  font-weight: 700;
  font-size: clamp(16px, 4vw, 20px);
  color: var(--ink);
  line-height: 1;
}

.cfg-tile[data-chosen="1"] {
  border-color: var(--good);
  background: color-mix(in oklch, var(--good) 8%, var(--card));
}
/* Settled-letter alternatives: grayed + inert. */
.cfg-tile[data-grayed="1"] {
  opacity: .42;
  filter: grayscale(.85);
  cursor: default;
}
.cfg-tile[data-grayed="1"]:active { transform: none; }

.cfg-tile__check {
  position: absolute;
  top: 4px; inset-inline-end: 4px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--good);
  border-radius: 50%;
  box-shadow: 0 2px 6px -2px rgba(43,33,24,.5);
}
.cfg-tile__check svg { width: 18px; height: 18px; }

/* ── Sticky continue footer ──────────────────────────────────────────────── */
.cfg-footer {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 40%);
  display: flex;
  justify-content: center;
  z-index: 6;
  /* The fixed footer spans the full width over the bottom of the gallery;
     only the continue button should catch taps, not the surrounding band. */
  pointer-events: none;
}
.cfg-footer .cfg-btn { pointer-events: auto; }

.cfg-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ui-font);
  font-weight: 800;
  font-size: clamp(14px, 3.6vw, 17px);
  border-radius: 999px;
  padding: 10px 22px;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--card);
  box-shadow: 0 2px 8px -3px rgba(43,33,24,.4);
}
.cfg-btn--ghost { padding: 8px 14px; font-size: clamp(12px, 3.2vw, 14px); }
.cfg-btn--primary { background: var(--accent); color: #fff; }
/* Continue = graphic-only circle. Bigger + green pulse when enabled, faded
   when the set isn't complete (the coverage strip shows what's left). */
.cfg-continue {
  width: 64px; height: 64px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
}
.cfg-continue svg { width: 30px; height: 30px; }
.cfg-continue:not(:disabled) {
  background: var(--good);
  animation: cfg-continue-pulse 1.6s ease-in-out infinite;
}
@keyframes cfg-continue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--good) 55%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
.cfg-btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }

/* ── Done screen ─────────────────────────────────────────────────────────── */
.cfg-done {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.cfg-done__check {
  width: clamp(90px, 26vw, 130px);
  height: clamp(90px, 26vw, 130px);
  border-radius: 50%;
  background: var(--good);
  display: grid; place-items: center;
  box-shadow: 0 18px 36px -14px rgba(47,157,110,.6);
  animation: cfg-pop .6s cubic-bezier(.2,.9,.3,1.3) both;
}
.cfg-done__check svg { width: 54%; height: 54%; }
@keyframes cfg-pop {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.cfg-done__actions { display: flex; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .cfg-tile, .cfg-dot, .cfg-cat, .cfg-iconbtn, .cfg-continue, .cfg-done__check { transition: none; animation: none; }
}