/* Styles mécaniques uniquement : tout le reste passe par les classes Tailwind
   directement dans le HTML. Ce fichier ne gère que ce que Tailwind ne peut pas
   faire (positions calculées en JS, transitions pilotées par état). */
   :root{
    --club:#B91C1C; --club-deep:#7F1D1D; --gold:#D4A017;
    --away:#F1F5F9; --away-ink:#1E293B;
    --grass-a:#1D6340; --grass-b:#1A5A3A;
    --dur:640ms; --ease:cubic-bezier(.22,.75,.26,1);
  }
  @media (prefers-reduced-motion: reduce){ :root{ --dur:1ms; } }
  *{-webkit-tap-highlight-color:transparent}
  
  /* Feuille de match : bascule bas d'écran + fondu */
  .sheet{transform:translateY(103%);transition:transform 280ms var(--ease)}
  .sheet.open{transform:none}
  .scrim{opacity:0;pointer-events:none;transition:opacity 240ms}
  .scrim.on{opacity:1;pointer-events:auto}
  .toast{opacity:0;transform:translate(-50%,-14px);transition:opacity 200ms,transform 200ms;pointer-events:none}
  .toast.on{opacity:1;transform:translate(-50%,0)}
  
  /* ============ Tableau tactique ============ */
  .pb{position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 auto;user-select:none;-webkit-user-select:none}
  .pb-wrap{flex:1 1 auto;display:grid;place-items:center;min-height:0}
  .pb-pitch{
    position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:105/68;
    border-radius:8px;overflow:hidden;
    background:repeating-linear-gradient(90deg,var(--grass-a) 0 9.09%,var(--grass-b) 9.09% 18.18%);
    box-shadow:inset 0 0 60px rgba(0,0,0,.25);
  }
  .pb-pitch.vert{aspect-ratio:68/105}
  .pb-pitch svg,.pb-pitch canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .pb-pitch.vert svg{inset:auto;left:50%;top:50%;width:var(--sw);height:var(--sh);transform:translate(-50%,-50%) rotate(-90deg)}
  .pb-pitch canvas{pointer-events:none}
  .pb.draw .pb-pitch{cursor:crosshair}
  .pb-tray{flex:0 0 auto;height:92px;margin-top:10px;position:relative;border-top:1px solid rgb(51 65 85)}
  .pb-tray i{position:absolute;top:8px;left:2px;font-style:normal;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:rgb(148 163 184);pointer-events:none}
  .tok{
    position:absolute;top:0;left:0;display:grid;place-items:center;
    border-radius:50%;font-weight:600;
    background-size:cover;background-position:center 22%;
    transition:transform var(--dur) var(--ease),width var(--dur) var(--ease),height var(--dur) var(--ease);
    touch-action:none;z-index:3;will-change:transform;padding:0;
  }
  .tok.home{background-color:var(--club);color:#fff;box-shadow:0 0 0 2px var(--club-deep),0 4px 10px rgba(0,0,0,.4)}
  .tok.away{background-color:var(--away);color:var(--away-ink);box-shadow:0 0 0 2px #94A3B8,0 4px 10px rgba(0,0,0,.4)}
  .tok.gk{background-color:#1E293B;color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.4)}
  .tok.ball{background:radial-gradient(circle at 34% 30%,#fff,#C6CBD0);box-shadow:0 4px 10px rgba(0,0,0,.5);z-index:4}
  .tok.has-photo{color:transparent}
  .tok.drag{transition:none;filter:brightness(1.06)}
  .pb.draw .tok{pointer-events:none}
  .tok .num{line-height:1;pointer-events:none}
  .tok.has-photo .num{
    position:absolute;bottom:-3px;right:-5px;color:#fff;background:var(--club-deep);
    width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;
    font-size:.44em;box-shadow:0 0 0 2px rgba(0,0,0,.35);
  }
  .tok.away.has-photo .num{background:#334155}
  .tok .nm{
    position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);
    font-size:11px;letter-spacing:.02em;color:#fff;white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none;
  }