/* Pixel Wall : thème « sapin et cuivre », police monospace.
   --fond et --fond-haut sont réglables depuis /admin (Apparence) : common.js en dérive
   --cadre, --surface, --champ, --secondaire… pour garder des teintes assorties. */

:root {
  --fond: #0f2a24;        /* vert sapin : fond */
  --fond-haut: #173a32;   /* halo léger en haut de page */
  --cadre: #071a16;       /* cadres, bordures */
  --surface: #1d4a3f;     /* boutons, tuiles */
  --surface-haut: #245a4d; /* survol des boutons */
  --indice: #6f8f84;      /* texte d'exemple des champs */
  --champ: #0a201b;       /* champs de saisie */
  --secondaire: #8fb3a6;  /* vert-de-gris : textes secondaires */
  --texte: #f2ede1;       /* crème : texte principal */
  --accent: #d98e4a;      /* cuivre : chiffres, sélection, bannière */
  --rush: #e4572e;        /* orange brûlé : rush, free for all */
  --gel: #5fa8d3;         /* bleu glacier : toile gelée */
  --ok: #9bd17a;          /* confirmation */
  --erreur: #f2a08c;      /* messages d'erreur */
  --police: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; color: var(--texte); font-family: var(--police); background: var(--fond); }
body { background: radial-gradient(120% 80% at 50% -10%, var(--fond-haut) 0%, transparent 60%), var(--fond); }

.wordmark { font-family: var(--police); font-weight: 800; color: var(--texte); line-height: 1;
  letter-spacing: -.02em; white-space: nowrap; }
.wordmark .num { color: var(--accent); }
.sub { color: var(--secondaire); }

/* Boutons, tuiles, pastilles */
.verre {
  font: inherit; color: var(--texte); cursor: pointer;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%), var(--surface);
  border: 3px solid var(--cadre); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  padding: 8px 14px; line-height: 1.2;
}
.verre:hover { background-color: var(--surface-haut); }
.verre:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; }
.verre.rubis { background-color: var(--rush); color: #fff; }
.verre.rubis:hover { background-color: #ee6a43; }
.verre.azur { background-color: var(--gel); color: #08202e; }
.verre.azur:hover { background-color: #74b6dc; }
.verre.or { background-color: var(--accent); color: #2a1606; }
.verre.danger { background-color: #5a1f14; }
.verre.danger:hover { background-color: #6e2819; }

input[type=text], input[type=number], input[type=password] {
  font: inherit; color: var(--texte); background: var(--champ);
  border: 3px solid var(--cadre); border-radius: 4px; padding: 7px 10px;
}
input::placeholder { color: var(--indice); }

/* Pastille de mode de jeu */
.mode { display: inline-block; font-weight: 700; white-space: nowrap; }
.mode.cooldown { background-color: var(--surface); }
.mode.rush, .mode.free { background-color: var(--rush); color: #fff;
  box-shadow: 0 0 2.4vh rgba(228,87,46,.55), inset 0 0 0 1px rgba(255,255,255,.15); }
.mode.frozen { background-color: var(--gel); color: #08202e; }
@media (prefers-reduced-motion: no-preference) {
  .mode.rush { animation: lueur 1.2s ease-in-out infinite; }
  @keyframes lueur { 50% { box-shadow: 0 0 4.5vh rgba(228,87,46,.9), inset 0 0 0 1px rgba(255,255,255,.2); } }
}

/* La toile encadrée, avec un halo cuivré */
.serti { position: relative; background: var(--cadre); padding: 6px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(217,142,74,.35), 0 0 8vh rgba(217,142,74,.10), 0 2vh 6vh rgba(0,0,0,.45); }
.serti canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Jauge */
.jauge { height: 10px; background: var(--champ); border: 2px solid var(--cadre); border-radius: 2px; overflow: hidden; }
.jauge span { display: block; height: 100%; transition: width .6s; }

/* Pastille de couleur d'équipe */
.pastille { display: inline-block; width: .8em; height: .8em; border: 2px solid var(--cadre);
  border-radius: 2px; vertical-align: -.05em; margin-right: .35em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

/* Événements : calque d'effets posé sur la toile */
.fx { position: absolute; inset: 6px; overflow: hidden; pointer-events: none; }
.fx-onde { position: absolute; aspect-ratio: 1; border: 3px solid; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2); opacity: 1;
  background: radial-gradient(circle, #fff 0%, var(--c) 35%, transparent 70%);
  animation: onde 1.1s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes onde { 60% { opacity: .9; } to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
.fx-seisme { animation: seisme 1.2s linear; }
@keyframes seisme {
  0%, 100% { transform: none; }
  10% { transform: translate(calc(var(--amp) * -1), calc(var(--amp) * .5)) rotate(-.4deg); }
  20% { transform: translate(var(--amp), calc(var(--amp) * -.6)) rotate(.4deg); }
  30% { transform: translate(calc(var(--amp) * -.8), calc(var(--amp) * -.3)); }
  40% { transform: translate(calc(var(--amp) * .7), calc(var(--amp) * .6)) rotate(-.3deg); }
  55% { transform: translate(calc(var(--amp) * -.5), 0); }
  70% { transform: translate(calc(var(--amp) * .3), calc(var(--amp) * -.2)); }
  85% { transform: translate(calc(var(--amp) * -.15), 0); }
}
.fx-dore { position: absolute; width: max(12px, 1.8vh); aspect-ratio: 1; transform: translate(-50%, -50%); }
.fx-dore::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg);
  background: #ffd84a; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(217,142,74,.6), 0 0 18px 6px rgba(255,216,74,.8); }
.fx-dore::after { content: attr(data-pts); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  font: 700 max(12px, 1.9vh) var(--police); color: #ffd84a; text-shadow: 0 1px 3px #000, 0 0 2px #000; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .fx-dore::before { animation: scintille 1s ease-in-out infinite; }
  @keyframes scintille { 50% { box-shadow: 0 0 0 3px rgba(217,142,74,.9), 0 0 32px 12px rgba(255,216,74,1); } }
}
/* Annonce d'événement */
.annonce { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); max-width: 86%;
  background: var(--cadre); color: var(--texte); border: 3px solid var(--accent); border-radius: 4px;
  padding: 1vh 1.6vw; font-weight: 700; text-align: center; box-shadow: 0 1vh 4vh rgba(0,0,0,.5);
  opacity: 0; transition: opacity .3s; pointer-events: none; }
.annonce.on { opacity: 1; }
.mode.mult { background-color: var(--accent); color: #2a1606; }

/* Zones interdites et brouillard */
.fx-interdit { position: absolute; border: 3px dashed #ff8a6a;
  background: repeating-linear-gradient(45deg, rgba(228,87,46,.5) 0 6px, color-mix(in srgb, var(--cadre) 55%, transparent) 6px 12px); }
.fx-interdit span { position: absolute; left: 4px; top: 3px; font: 700 max(11px, 1.5vh) var(--police);
  color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.fx-brume { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #0f2a24; font: 800 max(20px, 6vh) var(--police);
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(50% 50% at 75% 65%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(35% 45% at 55% 20%, rgba(255,255,255,.35), transparent 70%),
    #b9cbc4;
  background-size: 200% 200%; }
.fx-brume small { display: block; font-size: .4em; font-weight: 700; margin-top: .4em; }
@media (prefers-reduced-motion: no-preference) {
  .fx-brume { animation: brume 9s ease-in-out infinite alternate; }
  @keyframes brume { to { background-position: 100% 60%; } }
}
.mode.prime { background-color: #3b1d14; border-color: var(--rush); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.badges .pastille { margin-right: .3em; }

/* Préavis d'impact */
.fx-cible { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px dashed #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.4);
  background:
    linear-gradient(#fff, #fff) center / 2px 40% no-repeat,
    linear-gradient(#fff, #fff) center / 40% 2px no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent) 0 60%, transparent 61%); }
.fx-cible i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c);
  box-shadow: 0 0 10px var(--c); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fx-cible { animation: alerte .32s steps(2, jump-none) infinite; }
  .fx-cible i { animation: compte var(--d) linear forwards; }
  @keyframes alerte { 50% { border-color: #ff6b4a; } }
  @keyframes compte { from { transform: scale(2.4); opacity: .25; } to { transform: scale(.15); opacity: 1; } }
}
.fx-meteore { position: absolute; width: max(60px, 9vh); height: max(8px, 1.1vh); margin-top: calc(max(8px, 1.1vh) / -2);
  margin-left: calc(max(60px, 9vh) * -1); transform-origin: 100% 50%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, transparent) 55%, #fff 92%);
  filter: drop-shadow(0 0 6px var(--c)); }
.fx-meteore::after { content: ""; position: absolute; right: -25%; top: 50%; width: 1.8em; aspect-ratio: 1;
  transform: translate(0, -50%); border-radius: 50%; font-size: max(8px, 1.1vh);
  background: radial-gradient(circle, #fff 0 30%, var(--c) 60%, transparent 72%); }

/* Séisme : ondes depuis l'épicentre */
.fx-onde-sismique { position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.05);
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 0 0 3px rgba(217,142,74,.5), 0 0 14px rgba(255,255,255,.4);
  opacity: 0; animation: sismique 1.3s ease-out forwards; }
@keyframes sismique { 10% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }