/* =========================================================================
   ШКОЛА СОВ — «Игры и развитие»
   Витрина игр, бейджи-вознаграждения, таблица рекордов и игра
   «Совёнок ищет пару» (memory-match).

   Подключать ПОСЛЕ style.css — переиспользует токены/слои, объявленные
   там (@layer tokens, reset, base, components, layout, sections, motion,
   utilities, responsive), новых слоёв не создаёт.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ВИТРИНА (games_home.html)
------------------------------------------------------------------------- */
@layer sections {

  .games-hub__header { margin-bottom: 1.75rem; }
  .games-hub__header p { color: var(--ink-soft); margin-top: 0.375rem; max-width: 40rem; }

  /* Заглушка для неодобренного аккаунта */
  .locked-card {
    display: flex; align-items: center; gap: 1.25rem;
    background: var(--sheet); border: 1px dashed var(--paper-line);
    border-radius: var(--card-radius); padding: 1.75rem;
  }
  .locked-card i { font-size: 1.75rem; color: var(--ochre-deep); flex-shrink: 0; }
  .locked-card h3 { margin-bottom: 0.25rem; }
  .locked-card p { color: var(--ink-soft); margin: 0; }

  /* ── Полоска статистики ── */
  .stat-strip {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-gap-sm); margin-bottom: var(--card-gap);
  }
  .stat-chip {
    background: var(--sheet); border: 1px solid var(--paper-line-soft);
    border-radius: var(--card-radius-xs); box-shadow: var(--shadow-clay-sm);
    padding: 1rem 1.125rem; text-align: left;
  }
  .stat-chip__value {
    font-family: var(--font-head); font-size: 1.625rem; font-weight: 700;
    color: var(--ink); line-height: 1.1; display: flex; align-items: baseline; gap: 0.3125rem;
  }
  .stat-chip__value i { font-size: 1rem; color: var(--terracotta); }
  .stat-chip__label { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.25rem; }

  /* ── Карточки игр ── */
  .game-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--card-gap); margin-bottom: var(--card-gap);
  }
  .game-tile {
    display: flex; flex-direction: column; gap: 0.875rem;
    background: var(--sheet); border: 1px solid var(--paper-line-soft);
    border-radius: var(--card-radius); box-shadow: var(--shadow-clay-sm);
    padding: var(--card-pad);
    transition: box-shadow var(--dur) var(--ease-clay), transform var(--dur) var(--ease-clay);
  }
  .game-tile:hover { box-shadow: var(--shadow-clay); transform: translateY(-3px); }
  .game-tile__icon {
    width: 3rem; height: 3rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #fff;
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta-deep));
    box-shadow: 0 0.25rem 0.625rem -0.1875rem rgba(200,107,74,0.35);
  }
  .game-tile__age {
    font-size: var(--fs-xs); font-weight: 700; color: var(--ochre-deep);
    background: var(--ochre-soft); border-radius: 999px; padding: 0.1875rem 0.5625rem;
    align-self: flex-start;
  }
  .game-tile h3 { font-size: var(--fs-h3); }
  .game-tile p { color: var(--ink-soft); font-size: var(--fs-sm); }
  .game-tile__skills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: -0.25rem; }
  .game-tile__skills .chip { background: var(--paper-2); color: var(--ink-soft); font-weight: 600; }
  .game-tile__cta { margin-top: auto; }

  /* ── Вознаграждения ── */
  .reward-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--card-gap-sm);
  }
  .reward-chip {
    display: flex; align-items: center; gap: 0.75rem;
    border-radius: var(--card-radius-xs); padding: 0.875rem 1rem;
    background: var(--paper-2); border: 1px solid var(--paper-line-soft);
    opacity: 0.55; filter: grayscale(0.6);
    transition: opacity var(--dur) var(--ease-soft), filter var(--dur) var(--ease-soft), transform var(--dur) var(--ease-clay);
  }
  .reward-chip.is-earned {
    opacity: 1; filter: none; background: var(--sheet); box-shadow: var(--shadow-clay-sm);
  }
  .reward-chip.is-earned:hover { transform: translateY(-2px); }
  .reward-chip__icon {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;
  }
  .reward-chip--terracotta .reward-chip__icon { background: linear-gradient(135deg, var(--terracotta), var(--terracotta-deep)); }
  .reward-chip--ochre .reward-chip__icon { background: linear-gradient(135deg, var(--ochre), var(--ochre-deep)); }
  .reward-chip--teal .reward-chip__icon { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
  .reward-chip--lavender .reward-chip__icon { background: linear-gradient(135deg, var(--lavender), #8877AA); }
  .reward-chip--moss .reward-chip__icon { background: linear-gradient(135deg, var(--moss), #5F6B49); }
  .reward-chip__title { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
  .reward-chip__desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.125rem; }
  .reward-chip__earned-at { font-size: var(--fs-xs); color: var(--teal-deep); margin-top: 0.125rem; font-weight: 700; }

  /* ── Таблица рекордов ── */
  .leaderboard__tabs { display: inline-flex; gap: 0.375rem; background: var(--paper-2); padding: 0.3125rem; border-radius: 999px; margin-bottom: 1.125rem; }
  .leaderboard__tab {
    padding: 0.5rem 1.0625rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700;
    color: var(--ink-soft); transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  }
  .leaderboard__tab.is-active { background: var(--sheet); color: var(--terracotta-deep); box-shadow: var(--shadow-clay-sm); }
  .leaderboard__tab:not(.is-active):hover { color: var(--ink); }

  .leaderboard-table { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; }
  .leaderboard-table th {
    text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); font-weight: 700; padding: 0 0.875rem 0.375rem;
  }
  .leaderboard-table td { background: var(--sheet); padding: 0.75rem 0.875rem; font-size: var(--fs-sm); }
  .leaderboard-table tr.is-me td { background: var(--terracotta-tint); }
  .leaderboard-table td:first-child { border-radius: var(--card-radius-xs) 0 0 var(--card-radius-xs); font-weight: 700; width: 2.5rem; }
  .leaderboard-table td:last-child { border-radius: 0 var(--card-radius-xs) var(--card-radius-xs) 0; text-align: right; }
  .leaderboard-table__player { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; }
  .leaderboard-table__points { font-weight: 700; color: var(--terracotta-deep); }
  .rank-medal { font-size: 1.0625rem; }
  .leaderboard-empty { color: var(--muted); font-size: var(--fs-sm); padding: 1.25rem; text-align: center; }
  .leaderboard-me-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--card-radius-xs);
    background: var(--terracotta-tint); font-size: var(--fs-sm); font-weight: 700; color: var(--terracotta-deep);
  }
}

/* -------------------------------------------------------------------------
   ИГРА «СОВЁНОК ИЩЕТ ПАРУ» (game_memory.html)
------------------------------------------------------------------------- */
@layer sections {
  .memory-game__header { margin-bottom: 1.25rem; }

  .memory-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.875rem; margin-bottom: 1.25rem;
  }
  .memory-diff { display: inline-flex; gap: 0.375rem; background: var(--paper-2); padding: 0.3125rem; border-radius: 999px; }
  .memory-diff__btn {
    display: flex; flex-direction: column; align-items: center; line-height: 1.2;
    padding: 0.5rem 0.9375rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700;
    color: var(--ink-soft); transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  }
  .memory-diff__btn small { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); }
  .memory-diff__btn.is-active { background: var(--sheet); color: var(--terracotta-deep); box-shadow: var(--shadow-clay-sm); }
  .memory-diff__btn.is-active small { color: var(--terracotta-deep); }

  .memory-hud { display: flex; gap: 0.75rem; }
  .memory-hud__item {
    display: flex; align-items: center; gap: 0.4375rem;
    background: var(--sheet); border: 1px solid var(--paper-line-soft);
    border-radius: var(--card-radius-xs); padding: 0.5rem 0.875rem;
    font-weight: 700; font-size: 0.875rem; box-shadow: var(--shadow-clay-sm);
  }
  .memory-hud__item i { color: var(--terracotta); }

  .memory-child-name {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;
    font-size: var(--fs-sm); color: var(--ink-soft);
  }
  .memory-child-name input {
    background: var(--sheet); border: 1.5px solid var(--paper-line);
    border-radius: var(--card-radius-pill); padding: 0.4375rem 0.9375rem;
    font-weight: 700; color: var(--ink); min-width: 12rem;
  }
  .memory-child-name input:focus-visible { border-color: var(--terracotta); }

  /* ── Поле игры ── */
  .memory-board {
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    max-width: 40rem; margin: 0 auto;
  }
  .memory-card {
    aspect-ratio: 1; perspective: 62.5rem; border-radius: var(--card-radius-xs);
  }
  .memory-card__inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform 0.5s var(--ease-clay);
  }
  .memory-card.is-flipped .memory-card__inner,
  .memory-card.is-matched .memory-card__inner { transform: rotateY(180deg); }
  .memory-card__face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: var(--card-radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
  .memory-card__face--back {
    background: linear-gradient(160deg, #E8B98C 0%, var(--terracotta) 55%, var(--terracotta-deep) 100%);
    box-shadow: var(--shadow-clay-sm);
    color: rgba(255,255,255,0.85); font-size: 1.375rem;
  }
  .memory-card__face--front {
    background: var(--sheet); border: 1.5px solid var(--paper-line-soft);
    transform: rotateY(180deg);
  }
  .memory-card.is-matched .memory-card__face--front {
    background: var(--teal-soft); border-color: var(--teal);
    animation: matchPulse 0.5s var(--ease-clay);
  }
  .memory-card:not(.is-flipped):not(.is-matched) .memory-card__inner:hover {
    transform: translateY(-2px) rotateY(0);
  }
  .memory-card.is-locked { pointer-events: none; }

  /* ── Итоговое окно ── */
  .memory-result {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; background: rgba(45,35,24,0.42); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-soft);
  }
  .memory-result.is-open { opacity: 1; pointer-events: auto; }
  .memory-result__panel {
    background: var(--sheet); border-radius: var(--card-radius-sm);
    box-shadow: var(--shadow-clay-lg); padding: 2rem; max-width: 24rem; width: 100%;
    text-align: center; transform: scale(0.92); transition: transform var(--dur) var(--ease-clay);
  }
  .memory-result.is-open .memory-result__panel { transform: scale(1); }
  .memory-result__stars { font-size: 2rem; letter-spacing: 0.25rem; margin: 0.75rem 0; color: var(--paper-line); }
  .memory-result__stars i.is-lit { color: var(--gold); animation: pulseBadge 0.6s var(--ease-clay); }
  .memory-result__stats { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0 1.25rem; }
  .memory-result__stat b { display: block; font-family: var(--font-head); font-size: 1.375rem; }
  .memory-result__stat span { font-size: var(--fs-xs); color: var(--muted); }
  .memory-result__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.25rem; }
  .memory-result__actions { display: flex; gap: 0.625rem; }
  .memory-result__actions .btn { flex: 1; }

  @keyframes matchPulse {
    0% { transform: rotateY(180deg) scale(1); }
    45% { transform: rotateY(180deg) scale(1.08); }
    100% { transform: rotateY(180deg) scale(1); }
  }
}

/* -------------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------------- */
@layer responsive {
  @media (max-width: 720px) {
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .memory-toolbar { flex-direction: column; align-items: stretch; }
    .memory-hud { justify-content: space-between; }
    .memory-board { max-width: 100%; }
  }
  @media (max-width: 480px) {
    .memory-board { gap: 0.5rem; }
    .memory-card__face { font-size: 1.5rem; }
  }
}