/* Memory Shuffle: editor (topic tabs + card rows) + play (shuffle board + tray). */

/* ---- Editor ------------------------------------------------------------ */
.field { max-width: 460px; margin-bottom: 1.5rem; }
.ms-memorize-field { max-width: 220px; }

.editor-head { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 .75rem; }
.editor-head h2 { margin: 0; font-size: 1.1rem; }
.editor-head .meta { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.editor-head .btn { margin-inline-start: auto; }
.section-hint { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .75rem; }

.topic-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.topic-tab {
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: .88rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-tab.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.topic-tab:hover:not(.active) { border-color: var(--accent); color: var(--ink); }

.editor-grid { display: grid; gap: .75rem; max-width: 620px; }
.card-item { padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.card-item:last-child { border-bottom: none; padding-bottom: 0; }
.card-row { display: grid; grid-template-columns: 2rem 1fr 2.2rem; gap: .6rem; align-items: center; }
.card-row .card-index { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: center; }
.card-row .word-input { font-size: 1.15rem; }
.card-image-row { margin: .4rem 0 0 2.6rem; }
.btn.icon { padding: .45rem; width: 2.4rem; }

/* ---- Topic picker -------------------------------------------------------- */
/* Growth-only: keeps today's sizes as a floor on typical windows, but keeps
   growing past them on wider ones instead of plateauing. */
.ms-main { max-width: max(1000px, 90vw); }
.ms-picker-head { text-align: center; margin-bottom: .5rem; }
.ms-picker-head .deck-name { font-weight: 700; font-size: 1.2rem; }
.ms-topic-list { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1rem; }
.ms-topic-btn {
  padding: .9rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.ms-topic-btn:hover { transform: translateY(-2px); border-color: var(--accent); }

/* ---- Scorebar ------------------------------------------------------------ */
.scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.1rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.scorebar .deck-name { font-weight: 700; font-size: 1.05rem; }
.scorebar .stats { display: flex; gap: 1.25rem; }
.scorebar .stat { color: var(--ink-soft); font-size: .9rem; }
.scorebar .stat strong { color: var(--ink); font-size: 1.1rem; margin-inline-start: .3rem; }

/* ---- Memorize timer (unobtrusive, above the board) ------------------------ */
.ms-timer { display: flex; align-items: center; gap: .6rem; justify-content: center; margin: 0 0 .75rem; }
.ms-timer-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; color: var(--accent); min-width: 1.4em; text-align: center; }
.ms-timer-track { width: 160px; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ms-timer-bar { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px; transition: width 1s linear; }

.ms-status { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: 0 0 1rem; min-height: 1.4em; }

/* ---- Board row (stage + tray side by side, to avoid vertical scrolling) ---- */
.ms-board-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* ---- Board stage ----------------------------------------------------------- */
/* The min(92vw, max(670px, Nvw)) shape below preserves today's shrink-to-fit
   behaviour on narrow/typical viewports exactly (92vw always wins there,
   unchanged), but past the point where 92vw would have flattened at the old
   670px ceiling, it now keeps growing at the gentler Nvw rate instead of
   staying flat — Nvw is sized so stage+tray (see .ms-tray-area below) grow
   in lockstep without outgrowing .ms-main's own growing width. */
.ms-stage {
  position: relative;
  width: min(92vw, max(670px, 46vw));
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%,
      var(--surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ms-card {
  position: absolute;
  width: clamp(90px, 25vw, max(146px, 10vw));
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  perspective: 700px;
}
.ms-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  transform-style: preserve-3d;
}
.ms-card-inner.flipped { transform: rotateY(180deg); }

/* NOTE: don't put `filter` on .ms-card (or any 3D-transform ancestor of the
   flipping faces) — combined with clip-path + backface-visibility, Chromium
   fails to repaint a face that's been flipped back to resting position (it
   stays invisible even though every computed style looks correct). Shadow
   AND edge definition both live on the faces themselves instead, via
   box-shadow (a plain `border` would only trace the rectangular box, not
   the rough clip-path silhouette — an inset box-shadow is clipped along
   with everything else, so it hugs the jagged edge correctly). */
.ms-card-front, .ms-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(20, 20, 20, .35);
  display: flex; align-items: center; justify-content: center;
}
.ms-card-front {
  background: linear-gradient(150deg, var(--accent), #24534680);
  color: var(--accent-ink);
  font-size: clamp(1.8rem, 7vw, max(2.5rem, 2.8vw));
}
.ms-card-face {
  background: var(--surface);
  transform: rotateY(180deg);
  flex-direction: column;
  padding: .35rem;
  gap: .25rem;
  overflow: hidden;
}
.ms-card-image { max-width: 82%; max-height: 60%; object-fit: contain; border-radius: 6px; }
.ms-card-word { font-size: clamp(.87rem, 4.2vw, max(1.2rem, 1.3vw)); font-weight: 700; text-align: center; line-height: 1.15; direction: rtl; }

/* Slot a card was pulled from — a clear empty gap, not just missing content. */
.ms-card.ms-card-empty .ms-card-inner { visibility: hidden; }
.ms-card.ms-card-empty::after {
  content: '';
  position: absolute; inset: 0;
  border: 2px dashed var(--border);
  border-radius: 10px;
}

/* ---- Tray (sits beside the stage, in .ms-board-row, not below it) ---------- */
.ms-tray-area { text-align: center; flex: 0 0 auto; width: clamp(126px, 30vw, max(190px, 13vw)); }
.ms-tray-label { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .5rem; }
.ms-tray { display: flex; justify-content: center; align-items: center; min-height: 210px; }
.ms-tray .ms-card {
  position: static;
  transform: none;
  width: clamp(126px, 30vw, max(190px, 13vw));
  cursor: pointer;
}

@keyframes ms-tray-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ms-tray-pop { animation: ms-tray-pop .35s cubic-bezier(.2, .8, .3, 1.2) both; }

/* ---- Game-complete overlay -------------------------------------------------- */
.ms-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 50;
  backdrop-filter: blur(3px);
}
.ms-card-panel {
  background: var(--surface);
  border-radius: 20px;
  padding: 2rem clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 420px; width: 100%;
}
.ms-card-panel h2 { margin: .25rem 0 .5rem; }
.ms-over-summary { color: var(--ink-soft); font-size: 1rem; }
.result-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 520px) {
  .scorebar { justify-content: center; text-align: center; }
}