/* public/assets/gat.css — L'Aula de la Laia · Minuts de gat i llauna de sardines
 * (I4-RECOMPENSES I4-C-gat, docs/briefs/I4-RECOMPENSES-BRIEF.md §10.3).
 * ── I4-C gat ──
 *
 * Només variables del sistema de pells ja existent (var(--...)); cap color hexadecimal escrit a
 * mà, cap !important, cap font externa. Reutilitza .card/.card-title d'app.css -- aquest fitxer
 * només n'afegeix les peces NOVES (llauna, comptador, missatge, animació de substitució).
 */

/* ── #targeta-gat ── */
.targeta-gat{display:flex;flex-direction:column;gap:8px;}

/* ── Comptador de minuts (SÍ visible, §13.3-ter.6): temps que baixa, mai un número de punts. ── */
.gat-comptador{margin:0;font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent);text-align:center;letter-spacing:.04em;}

/* ── Llauna: N botons .gat-sardina, CAP xifra visible (T42.9). ── */
.gat-llauna{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:34px;position:relative;}
.gat-llauna-buida{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-dim);text-align:center;}
.gat-sardina{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);cursor:pointer;position:relative;padding:0;transition:transform .15s ease;}
.gat-sardina::before{content:"";position:absolute;inset:0;margin:auto;width:16px;height:9px;background:var(--accent2);border-radius:0 60% 60% 0/0 100% 100% 0;transform:rotate(-15deg);}
.gat-sardina:hover{transform:translateY(-2px) scale(1.06);}
.gat-sardina:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.gat-missatge{margin:0;font-size:12.5px;line-height:1.5;color:var(--text);min-height:1.4em;}

/* ── Substitució CSS (§10.3): la sardina "viatja" cap a en Casanova i s'esvaeix en 700 ms. ── */
.gat-sardina-vola{position:absolute;top:8px;right:8px;width:14px;height:8px;background:var(--accent2);border-radius:0 60% 60% 0/0 100% 100% 0;pointer-events:none;animation:aula-gat-vola .7s ease-in forwards;}
@keyframes aula-gat-vola{
  0%{opacity:1;transform:translate(0,0) rotate(0deg);}
  100%{opacity:0;transform:translate(-60px,26px) rotate(-40deg);}
}
@media (prefers-reduced-motion:reduce){
  .gat-sardina-vola{animation-duration:.01ms;animation-iteration-count:1;}
}