/* /JackalL/frontend/styles/vocab_match.css
   Match game — board, tiles, stats, animations, category picker
   ============================================================ */

   .match-area {
    padding: 16px 28px 32px;
  }
  .match-area.hidden { display: none; }
  
  /* ============================================================
     CATEGORY PICKER — multi-select chips above the stats bar
     ============================================================ */
  
  .match-cat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border-light);
    border-radius: 10px;
  }
  .match-cat-picker-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
  }
  
  .match-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 0.5px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .match-cat-chip:hover {
    border-color: var(--border);
    color: var(--text-primary);
  }
  .match-cat-chip.active {
    background: rgba(114, 216, 239, 0.12);
    border-color: var(--accent);
    color: var(--accent);
  }
  .match-cat-chip-count {
    font-size: 9px;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
  }
  .match-cat-chip.active .match-cat-chip-count {
    color: var(--accent);
  }
  
  /* ============================================================
     STATS BAR
     ============================================================ */
  
  .match-stats {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border-light);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
  }
  .match-stat {
    display: flex;
    flex-direction: column;
    min-width: 56px;
  }
  .match-stat-num {
    font-size: 18px;
    font-weight: 500;
    color: var(--accent);
    font-family: ui-monospace, monospace;
  }
  .match-stat-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
  }
  .match-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  /* FR · EN / EN · FR direction toggle */
  .match-dir-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 3px;
    gap: 2px;
  }
  .match-dir-opt {
    padding: 5px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.05em;
    transition: all 0.15s;
  }
  .match-dir-opt:hover { color: var(--text-primary); }
  .match-dir-opt.active {
    background: var(--accent);
    color: var(--bg-primary);
  }
  
  .match-btn-shuffle {
    background: transparent;
    border: 0.5px solid var(--border-light);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .match-btn-shuffle:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  
  /* ============================================================
     BOARD — equal column heights via shared grid rows
     ============================================================ */
  
  /* Two columns are now independent grids that share the same row count.
     Setting `grid-auto-rows: 1fr` on each column ensures every tile in that
     column gets identical height. Both columns end up the same height too
     because they have the same number of tiles AND each tile is 1fr of an
     equal-height parent. */
  .match-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .match-col {
    display: grid;
    grid-auto-rows: 1fr;     /* every row in this column = same height */
    gap: 8px;
  }
  
  /* ============================================================
     TILES
     ============================================================ */
  
  .match-tile {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 16px;
    min-height: 64px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
  }
  .match-tile:hover {
    border-color: rgba(114, 216, 239, 0.4);
    background: var(--bg-tertiary);
  }
  .match-tile.selected {
    background: rgba(114, 216, 239, 0.12);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(114, 216, 239, 0.15);
  }
  .match-tile-text {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 400;
    line-height: 1.3;
  }
  .match-tile-sub {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.03em;
  }
  
  /* Match success — green flash, then fade */
  .match-tile.match-success {
    background: rgba(93, 202, 165, 0.18);
    border-color: #5DCAA5;
    color: #5DCAA5;
    animation: match-success-flash 0.45s ease-out;
  }
  .match-tile.match-success .match-tile-text {
    color: #5DCAA5;
  }
  @keyframes match-success-flash {
    0%   { transform: scale(1.0); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(0.95); opacity: 0.4; }
  }
  
  /* Match failure — red shake */
  .match-tile.match-fail {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--danger);
    animation: match-fail-shake 0.4s ease-in-out;
  }
  @keyframes match-fail-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
  }
  
  /* ============================================================
     VICTORY SCREEN
     ============================================================ */
  
  .match-victory {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .match-victory-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(93, 202, 165, 0.15);
    border: 2px solid #5DCAA5;
    color: #5DCAA5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  .match-victory-title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .match-victory-sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
    font-family: ui-monospace, monospace;
  }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  
  @media (max-width: 600px) {
    .match-area { padding: 12px 16px 24px; }
    .match-stats { padding: 8px 10px; gap: 8px; }
    .match-stat-num { font-size: 15px; }
    .match-tile { padding: 10px 12px; min-height: 56px; }
    .match-tile-text { font-size: 14px; }
    .match-actions { width: 100%; justify-content: space-between; }
  }