/* Mythic Arena : « l'arène des panthéons ». Pierre sombre et bronze, frise grecque, colonnes,
   plateau 4 × 4 dont les cases passent d'un camp à l'autre (bleu grec / rouge nordique). Rien sur la boîte. */
.sm--mythic-arena {
  --sm-fond: #271d1b; --sm-fond-2: #f4ece0; --sm-encre: #271d1b; --sm-doux: #5a4a40;
  --sm-accent: #8a5a1c; --sm-accent-fonce: #5f3d10; --sm-carte: #fffaf2;
  --sm-police: "Cinzel", var(--titre);
  --ma-grec: #2f5f9e; --ma-nord: #a3322a; --ma-bronze: #e3b87e;
}
.sm--mythic-arena .sm-ouverture { background: radial-gradient(ellipse at 50% 0%, #3d2d28 0, #271d1b 70%); color: #f3e6d2; }
.sm--mythic-arena .sm-ouverture h1 { color: #f3e6d2; font-weight: 800; letter-spacing: 0.02em; }
.sm--mythic-arena .sm-sur { color: var(--ma-bronze); }
.sm--mythic-arena .sm-accroche { color: #d4c2a7; }
.sm--mythic-arena .fil-ariane, .sm--mythic-arena .fil-ariane a { color: #d4c2a7; }
.sm--mythic-arena .sm-boite img { filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.65)); }
.sm--mythic-arena .sm-carte h2, .sm--mythic-arena .sm-cote__titre { font-weight: 700; }

/* Frise grecque (méandre) en haut, colonnes sur les bords (grands écrans seulement) */
.ma-frise {
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--ma-bronze) 0 3px, transparent 3px 14px) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, var(--ma-bronze) 7px 10px, transparent 10px 14px) 0 3px / 100% 8px no-repeat,
    linear-gradient(var(--ma-bronze), var(--ma-bronze)) bottom / 100% 3px no-repeat;
  opacity: 0.55;
}
.ma-colonne {
  display: none; position: absolute; top: 3rem; bottom: clamp(6rem, 12vw, 9rem); width: 3.4rem;
  background: repeating-linear-gradient(90deg, #4a3833 0 0.5rem, #3a2b27 0.5rem 0.85rem);
  border-top: 0.9rem solid #5a453e; border-bottom: 0.9rem solid #5a453e; opacity: 0.8;
}
.ma-colonne--g { left: 1.2rem; } .ma-colonne--d { right: 1.2rem; }
@media (min-width: 88rem) { .ma-colonne { display: block; } }

/* L'arène : plateau 4 × 4 au centre, les deux camps de chaque côté */
.ma-sol { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); background: #1d1513; border-top: 3px solid #5a453e; }
.ma-plateau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 78%; aspect-ratio: 1; padding: 4px; background: #5a453e; border-radius: 6px; }
.ma-case { border-radius: 3px; background: var(--ma-grec); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.ma-case:nth-child(odd) { background: var(--ma-nord); }
.ma-case--1, .ma-case--6, .ma-case--11, .ma-case--16 { background: var(--ma-nord); }
.ma-case--4, .ma-case--7, .ma-case--10, .ma-case--13 { background: var(--ma-grec); }
.ma-camp { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-family: "Cinzel", var(--titre); font-weight: 700; font-size: clamp(0.8rem, 1.6vw, 1rem); letter-spacing: 0.12em; text-transform: uppercase; color: #f3e6d2; }
.ma-pion { width: 1.1rem; aspect-ratio: 1; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.ma-pion--grec { background: var(--ma-grec); } .ma-pion--nord { background: var(--ma-nord); }

@media (prefers-reduced-motion: no-preference) {
  .ma-case { animation: ma-capture 9s ease-in-out infinite; }
  .ma-case:nth-child(odd) { animation-name: ma-capture-inverse; }
  .ma-case--2 { animation-delay: 0.5s; } .ma-case--3 { animation-delay: 1s; } .ma-case--4 { animation-delay: 1.5s; }
  .ma-case--5 { animation-delay: 2s; } .ma-case--6 { animation-delay: 2.5s; } .ma-case--7 { animation-delay: 3s; }
  .ma-case--8 { animation-delay: 3.5s; } .ma-case--9 { animation-delay: 4s; } .ma-case--10 { animation-delay: 4.5s; }
  .ma-case--11 { animation-delay: 5s; } .ma-case--12 { animation-delay: 5.5s; } .ma-case--13 { animation-delay: 6s; }
  .ma-case--14 { animation-delay: 6.5s; } .ma-case--15 { animation-delay: 7s; } .ma-case--16 { animation-delay: 7.5s; }
  @keyframes ma-capture { 0%, 40% { background: var(--ma-grec); rotate: y 0deg; } 50%, 90% { background: var(--ma-nord); rotate: y 180deg; } 100% { background: var(--ma-grec); rotate: y 360deg; } }
  @keyframes ma-capture-inverse { 0%, 40% { background: var(--ma-nord); rotate: y 0deg; } 50%, 90% { background: var(--ma-grec); rotate: y 180deg; } 100% { background: var(--ma-nord); rotate: y 360deg; } }
}