/* ==========================================================================
   FCSM Deck — Duels (terrains, match en direct, résultat)
   S'appuie sur les jetons de app.css.
   ========================================================================== */

.arena { padding-block: clamp(2.25rem, 5vw, 3.5rem) 5rem; }
.arena__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; }
.arena__lead { margin: 0.75rem 0 0; color: var(--muted); font-size: 1.1rem; max-width: 62ch; }
.arena__resume {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
    margin-top: 1.75rem; padding: 0.9rem 1.1rem; border-radius: 6px;
    background: color-mix(in srgb, var(--yellow) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
}
.arena__resume--muted { background: var(--surface); border-color: var(--line-strong); }
.arena__h2 { margin: 0 0 1rem; font: 800 1.6rem/1 var(--font-display); text-transform: uppercase; }
.arena__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Terrains : une pelouse vue du ciel par terrain */
.fields { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; }
.field {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.25rem 1.1rem; align-items: center;
    padding: 1rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--line);
    transition: border-color 0.25s;
}
.field:hover { border-color: var(--line-strong); }
.field--waiting { border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.field__pitch {
    grid-row: span 2; position: relative; width: 96px; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden;
    background: repeating-linear-gradient(90deg, #1f6b3a 0 12px, #23773f 12px 24px);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), inset 0 0 0 3px #1f6b3a;
}
.field__pitch::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; translate: -50% 0; background: rgba(255, 255, 255, 0.55); }
.field__circle { position: absolute; left: 50%; top: 50%; width: 22px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); }
.field--composing .field__pitch { filter: saturate(0.5) brightness(0.7); }
.field__body { min-width: 0; }
.field__name { margin: 0; font: 800 1.45rem/1 var(--font-display); text-transform: uppercase; }
.field__tag { margin: 0.2rem 0 0; color: var(--faint); font-size: 0.9rem; }
.field__status { display: flex; align-items: center; gap: 0.45rem; margin: 0.55rem 0 0; font-size: 0.92rem; color: var(--muted); }
.field__action { grid-column: 2; justify-self: start; margin-top: 0.5rem; }
.field__action form { margin: 0; }
.field__busy { font: 600 0.8rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.dot-live { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.dot-live--free { background: var(--ok); }
.dot-live--wait { background: var(--yellow); animation: blink 1.2s ease-in-out infinite; }
.dot-live--live { background: var(--danger); animation: blink 0.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.rules__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.65rem; color: var(--muted); }
.rules__list b { color: var(--text); }
.results { list-style: none; margin: 0; padding: 0; }
.results a { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.results a:hover .results__opp { color: var(--yellow); }
.results__opp { flex: 1; font-weight: 600; }
.results__opp small { color: var(--faint); font-weight: 400; }
.results__score { font-size: 1rem; }
.result-chip { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 4px; font: 800 1.05rem/1 var(--font-display); color: var(--on-yellow); }
.result-chip--V { background: var(--ok); }
.result-chip--N { background: var(--r-base); }
.result-chip--D { background: var(--danger); }

/* Match : tableau d'affichage */
.match { padding-block: 2rem 5rem; }
.match__view { margin-top: 2rem; }

.scoreboard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem;
    padding: 1.1rem 1.4rem; border-radius: 6px;
    background: linear-gradient(180deg, #121626, #0d101b); border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-1);
}
.scoreboard__side { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.8rem; align-items: center; min-width: 0; }
.scoreboard__side--opp { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.scoreboard__side--opp .scoreboard__avatar { grid-column: 2; grid-row: 1 / span 2; }
.scoreboard__side--opp .scoreboard__name, .scoreboard__side--opp .scoreboard__flag { grid-column: 1; }
.scoreboard__avatar {
    grid-row: span 2; display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%;
    background: var(--yellow); color: var(--on-yellow); font: 800 1.2rem/1 var(--font-display);
}
.scoreboard__avatar--opp { background: var(--blue); color: #fff; }
.scoreboard__name { font: 800 clamp(1.15rem, 2.4vw, 1.6rem)/1 var(--font-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard__flag { font: 600 0.75rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); min-height: 1em; }
.scoreboard__center { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.scoreboard__field { font: 600 0.72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.scoreboard__clock {
    font: 700 clamp(2rem, 5vw, 3rem)/1 var(--font-mono); letter-spacing: -0.03em; color: var(--yellow);
    padding: 0.35rem 0.8rem; border-radius: 4px; background: #07080e; box-shadow: inset 0 0 0 1px rgba(255, 210, 31, 0.2);
    font-variant-numeric: tabular-nums; min-width: 6.2ch; text-align: center;
}
.scoreboard__clock.is-urgent { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.4); animation: blink 1s steps(2) infinite; }
.scoreboard__bar { display: block; width: 100%; height: 3px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.scoreboard__bar span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width 0.25s linear; }

/* Attente */
.waiting-room { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.waiting-room p { max-width: 52ch; margin: 0; }
.waiting-room form { margin: 0; }
.radar { position: relative; width: 90px; aspect-ratio: 1; }
.radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--yellow); opacity: 0; animation: radar 2.4s var(--ease-out) infinite; }
.radar span:nth-child(2) { animation-delay: 0.8s; }
.radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }

/* Composition */
.compose__intro { max-width: 62ch; }
.compose__intro p { margin: 0.75rem 0 0; }
.lineup { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 0; padding: 0; }
.lineup__slot {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 0.7rem; border-radius: 6px;
    background: var(--surface); border: 1px dashed var(--line-strong); cursor: grab;
    transition: border-color 0.2s, transform 0.25s var(--ease-out), opacity 0.2s;
}
.lineup__slot:hover { border-color: var(--yellow); }
.lineup__slot.is-dragging { opacity: 0.45; transform: scale(0.97); }
.lineup.is-locked .lineup__slot { cursor: default; border-style: solid; border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.lineup__round { font: 700 0.75rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); }
.lineup__slot .fcard { --w: 100%; pointer-events: none; }
.lineup__tools { display: flex; gap: 0.4rem; }
.lineup__move {
    width: 36px; height: 32px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
    font: 700 1rem/1 var(--font-body); cursor: pointer;
}
.lineup__move:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
.lineup__move:disabled { opacity: 0.3; cursor: not-allowed; }

.opp-lineup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 6px; background: var(--ground-2); border: 1px solid var(--line); }
.opp-lineup__label { color: var(--muted); font-weight: 600; }
.opp-lineup__label.is-ready { color: var(--ok); }
.opp-lineup__backs { display: flex; gap: 0.5rem; }
.mini-back {
    display: grid; place-items: center; width: 40px; height: 56px; border-radius: 3px;
    background: repeating-linear-gradient(115deg, #1b3fc4 0 7px, #2448e0 7px 8px, #1b3fc4 8px 15px, var(--yellow) 15px 18px);
    box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 4px rgba(255, 210, 31, 0.5);
}
.mini-back b { font: 800 0.55rem/1 var(--font-display); background: var(--ground); padding: 2px 3px; border-radius: 2px; color: var(--yellow); }
.compose__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.compose__actions form { margin: 0; }
.compose__note { margin: 0.75rem 0 0; color: var(--faint); font-size: 0.92rem; }

/* Résultat */
.verdict { display: grid; justify-items: center; gap: 0.4rem; padding: clamp(1.5rem, 4vw, 2.5rem) 1rem; text-align: center; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-strong); }
.verdict__label { font: 900 clamp(2.6rem, 8vw, 4.6rem)/0.9 var(--font-display); text-transform: uppercase; animation: verdict-in 0.7s var(--ease-out) both; }
.verdict--win { border-color: color-mix(in srgb, var(--yellow) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 12%, var(--surface)), var(--surface)); }
.verdict--win .verdict__label { color: var(--yellow); }
.verdict--loss .verdict__label { color: var(--danger); }
.verdict--draw .verdict__label { color: var(--text); }
.verdict__score { display: flex; align-items: center; gap: 0.8rem; font: 700 clamp(2rem, 6vw, 3rem)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.verdict__score i { font-style: normal; color: var(--faint); }
.verdict__sub { color: var(--muted); }
@keyframes verdict-in { from { opacity: 0; transform: scale(0.85); } }
.verdict__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

.rounds { list-style: none; display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; }
.round {
    display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem;
    padding: 1rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--line);
    animation: deal 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 0.35s);
}
.round--win { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.round--loss { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.round__head { font: 800 1.2rem/1 var(--font-display); text-transform: uppercase; color: var(--muted); }
.round__side { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.9rem; align-items: center; }
.round__side .fcard { --w: 92px; grid-row: span 2; }
.round__calc { margin: 0; font-size: 0.92rem; color: var(--muted); }
.round__calc span { display: block; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.round__calc b { color: var(--text); font-family: var(--font-mono); }
.round__calc strong { font-family: var(--font-mono); color: var(--yellow); }
.round__pts { justify-self: start; margin-top: 0.4rem; padding: 0.25rem 0.55rem; border-radius: 4px; font: 700 0.8rem/1 var(--font-mono); background: var(--surface-2); color: var(--muted); }
.round__pts--3 { background: var(--ok); color: var(--on-yellow); }
.round__pts--1 { background: var(--r-base); color: var(--on-yellow); }
.round__vs { font: 900 1.4rem/1 var(--font-display); color: var(--faint); }

/* Classement des duels */
.form-chip { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 3px; font: 800 0.72rem/1 var(--font-display); color: var(--on-yellow); margin-left: 2px; }
.form-chip--V { background: var(--ok); }
.form-chip--N { background: var(--r-base); }
.form-chip--D { background: var(--danger); }

@media (max-width: 960px) {
    .arena__cols { grid-template-columns: 1fr; }
    .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .round { grid-template-columns: 1fr; }
    .round__vs { justify-self: center; }
}
@media (max-width: 640px) {
    .fields { grid-template-columns: 1fr; }
    .scoreboard { grid-template-columns: 1fr auto 1fr; padding: 0.8rem; gap: 0.5rem; }
    .scoreboard__avatar { width: 36px; font-size: 0.95rem; }
    .scoreboard__flag { display: none; }
    .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opp-lineup__backs { display: none; }
}