/* Style du concours : ciel, herbe, panneaux épais et boutons en relief */
:root {
  --fond: #0e1511;
  --carte: #1a231c;
  --carte-clair: #2c3a2f;
  --noir: #0a0f0b;
  --texte: #f1efe6;
  --texte-doux: #aeb8a8;
  --vert: #62c94c;
  --vert-clair: #8be074;
  --vert-fonce: #3d8f2f;
  --jaune: #f5c451;
  --rouge: #c4483a;
  --rouge-clair: #ff9a8a;
  --pixel: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fond);
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
}
a { color: var(--vert-clair); }
[hidden] { display: none !important; }

/* ----- bandeau ciel ----- */
.ciel { position: relative; overflow: hidden; background: linear-gradient(#2468b8, #5bb0f0); }
.ciel::before, .ciel::after { content: ''; position: absolute; background: #fff; opacity: .92; }
.ciel::before { top: 34px; right: 38%; width: 128px; height: 24px; box-shadow: 24px -16px 0 -4px #fff; }
.ciel::after { top: 96px; right: 5%; width: 160px; height: 28px; box-shadow: -32px -18px 0 -6px #fff; opacity: .85; }
.ciel-contenu { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sol { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; z-index: 0; }
.sol::before { content: ''; position: absolute; left: 0; right: 0; bottom: 28px; height: 14px; background: var(--vert); box-shadow: inset 0 4px 0 var(--vert-clair); }
.sol::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: repeating-linear-gradient(90deg, #6a4426 0 16px, #7a5230 16px 32px); }
.titre-pixel { margin: 0; font-family: var(--pixel); font-size: clamp(20px, 5vw, 34px); line-height: 1.3; color: #fff; text-shadow: 4px 4px 0 #123a6b; }
.titre-section { margin: 0; font-family: var(--pixel); font-size: 14px; line-height: 1.5; }
.sous-titre { display: inline-block; margin-top: 16px; background: var(--fond); padding: 10px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 0 0 3px var(--noir); }

.conteneur { max-width: 1180px; margin: 0 auto; padding: 36px 24px 64px; display: flex; flex-direction: column; gap: 32px; }

/* ----- panneaux, champs, boutons ----- */
.carte { background: var(--carte); padding: 22px; box-shadow: inset 0 3px 0 var(--carte-clair), 0 0 0 3px var(--noir), 0 8px 0 3px var(--noir); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.carte.petite { padding: 16px 20px; }
.etiquette { font-size: 13px; color: var(--texte-doux); font-weight: 600; }
.grand-nombre { font-family: var(--pixel); font-size: 22px; line-height: 1.3; }
.jaune { color: var(--jaune); }
.vert { color: var(--vert-clair); }
.doux { color: var(--texte-doux); }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ligne.bout { align-items: flex-end; }
.ecart { justify-content: space-between; }
.grille-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.grille-stats > .carte { flex: 1 1 200px; }

.champ, select.champ, textarea.champ {
  min-height: 48px; padding: 0 14px; background: var(--fond); color: var(--texte); border: 0; font: inherit; font-size: 15px;
  box-shadow: inset 0 3px 0 #070b08, 0 0 0 3px var(--carte-clair); max-width: 100%;
}
textarea.champ { padding: 12px 14px; min-height: 84px; resize: vertical; width: 100%; }
.champ:focus, .btn:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.etiq-champ { display: flex; flex-direction: column; gap: 10px; font-size: 14px; font-weight: 600; }
.etiq-champ.souple { flex: 1 1 220px; }
.etiq-champ.souple .champ { width: 100%; }

.btn {
  min-height: 48px; padding: 0 20px; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; background: #3a4a3d; color: var(--texte);
  box-shadow: inset 0 -4px 0 #26332a, inset 0 3px 0 #54695a, 0 0 0 3px var(--noir);
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.vert { background: var(--vert); color: #0c1a08; box-shadow: inset 0 -4px 0 var(--vert-fonce), inset 0 3px 0 var(--vert-clair), 0 0 0 3px var(--noir); }
.btn.jaune { background: var(--jaune); color: #2a1d00; box-shadow: inset 0 -4px 0 #b8892a, inset 0 3px 0 #ffe08a, 0 0 0 3px var(--noir); }
.btn.rouge { background: var(--rouge); color: #fff; box-shadow: inset 0 -4px 0 #8f2f25, inset 0 3px 0 #e07a6c, 0 0 0 3px var(--noir); }
.btn.petit { min-height: 44px; padding: 0 14px; font-size: 13px; }

.badge { display: inline-block; padding: 7px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge.a_faire { background: var(--carte-clair); color: var(--texte); box-shadow: 0 0 0 2px #54695a; }
.badge.attente { background: #4a3a14; color: var(--jaune); box-shadow: 0 0 0 2px #8a6a1c; }
.badge.valide { background: #1d3d1a; color: var(--vert-clair); box-shadow: 0 0 0 2px #3f8a31; }
.badge.refuse { background: #4a211c; color: var(--rouge-clair); box-shadow: 0 0 0 2px #9a4136; }

.message { padding: 14px 18px; font-size: 14px; font-weight: 600; box-shadow: 0 0 0 3px var(--carte-clair); background: var(--carte); }
.message.ok { background: #1d3d1a; color: var(--vert-clair); box-shadow: 0 0 0 3px #3f8a31; }
.message.erreur { background: #4a211c; color: var(--rouge-clair); box-shadow: 0 0 0 3px #9a4136; }
.message.info { background: #4a3a14; color: var(--jaune); box-shadow: 0 0 0 3px #8a6a1c; }

.barre { height: 22px; background: var(--noir); padding: 3px; }
.barre > div { height: 100%; min-width: 0; background: var(--vert) repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.25) 10px 12px); box-shadow: inset 0 3px 0 var(--vert-clair); }

/* ----- liste de défis (page joueur) ----- */
.cartes-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px; }
.defi { gap: 16px; }
.defi-haut { display: flex; align-items: center; gap: 16px; }
.icone { flex: none; width: 60px; height: 60px; background: var(--fond); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 3px 0 #070b08, 0 0 0 3px var(--carte-clair); }
.defi h3 { margin: 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.defi .pts { font-family: var(--pixel); font-size: 11px; color: var(--jaune); }
.defi p { margin: 0; font-size: 14px; color: var(--texte-doux); }
.defi-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.defi-bas .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.raison { background: #4a211c; color: var(--rouge-clair); padding: 10px 12px; font-size: 13px; }

.filtres { display: flex; flex-wrap: wrap; gap: 14px; }
.filtres .btn { font-weight: 600; }
.filtres .btn.actif { background: var(--vert); color: #0c1a08; font-weight: 700; box-shadow: inset 0 -4px 0 var(--vert-fonce), inset 0 3px 0 var(--vert-clair), 0 0 0 3px var(--noir); }

/* ----- tableaux ----- */
.defile { overflow: auto; background: var(--fond); padding: 4px; box-shadow: inset 0 3px 0 #070b08, 0 0 0 3px var(--carte-clair); }
.defile.haut { max-height: 640px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { position: sticky; top: 0; z-index: 1; background: var(--fond); text-align: left; color: var(--texte-doux); padding: 10px 12px; border-bottom: 3px solid var(--carte-clair); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 2px solid var(--carte); vertical-align: middle; }
td .champ { width: 100%; min-height: 44px; font-size: 14px; background: var(--carte); }
td .champ.nb { width: 96px; color: var(--jaune); font-weight: 700; }
.lien-joueur { width: 300px; font-size: 13px; }
.classement td:first-child { font-family: var(--pixel); font-size: 12px; width: 70px; }
.classement tr.moi td { background: #1d3d1a; font-weight: 700; }

/* ----- fenêtres ----- */
dialog { border: 0; padding: 0; background: transparent; color: var(--texte); max-width: min(560px, 94vw); width: 100%; }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog .carte { max-height: 90vh; overflow: auto; }
dialog.large { max-width: min(980px, 96vw); }
.apercu { max-width: 100%; max-height: 260px; align-self: center; box-shadow: 0 0 0 3px var(--carte-clair); }
.grande-image { max-width: 100%; max-height: 72vh; align-self: center; }
.zone-envoi { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--fond); box-shadow: inset 0 3px 0 #070b08, 0 0 0 3px var(--carte-clair); }

/* ----- admin ----- */
.onglets { display: flex; flex-wrap: wrap; gap: 14px; }
.onglets .btn.actif { background: var(--vert); color: #0c1a08; box-shadow: inset 0 -4px 0 var(--vert-fonce), inset 0 3px 0 var(--vert-clair), 0 0 0 3px var(--noir); }
.pastille { background: var(--rouge); color: #fff; font-size: 12px; padding: 2px 7px; margin-left: 8px; }
.preuve { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.preuve .image { flex: 1 1 360px; min-width: 0; }
.preuve .image img { width: 100%; max-height: 420px; object-fit: contain; background: var(--fond); display: block; cursor: zoom-in; box-shadow: 0 0 0 3px var(--carte-clair); }
.preuve .infos { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.preuve h3 { margin: 0; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.note { background: var(--fond); padding: 12px 14px; font-size: 14px; box-shadow: inset 0 3px 0 #070b08, 0 0 0 3px var(--carte-clair); overflow-wrap: anywhere; }
.logs-liste { display: flex; flex-direction: column; gap: 12px; }
.log-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; background: var(--fond); }
.log-ligne .nom { flex: 1 1 200px; overflow-wrap: anywhere; font-weight: 600; font-size: 14px; }
.analyse { margin: 6px 0 0; padding: 12px; background: var(--fond); font-size: 12px; line-height: 1.6; overflow: auto; max-height: 260px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
.centre { max-width: 460px; margin: 0 auto; width: 100%; }
.conteneur-vue { display: flex; flex-direction: column; gap: 32px; }
#appli { display: flex; flex-direction: column; gap: 32px; }
#appli[hidden] { display: none !important; }
pre.code { background: var(--fond); padding: 12px; overflow: auto; font-size: 13px; }
.vide { padding: 28px; text-align: center; color: var(--texte-doux); }

@media (max-width: 640px) {
  .ciel::before { top: 18px; right: 12px; width: 84px; height: 16px; box-shadow: 16px -10px 0 -2px #fff; }
  .ciel::after { display: none; }
  .grille-stats { gap: 16px; }
  .grille-stats > .carte { flex: 1 1 140px; padding: 16px; }
  .grand-nombre { font-size: 17px; }
  .ciel-contenu { padding: 28px 16px 56px; }
  .conteneur { padding: 24px 16px 48px; }
  .lien-joueur { width: 220px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Bouton « Menu craftstack » : retour au menu principal du site, en haut à gauche du bandeau. */
.retour-menu { position: absolute; top: 12px; left: 14px; z-index: 2; text-decoration: none; }
.retour-menu + .ciel-contenu { padding-top: 78px; }   /* place pour le bouton, qui ne doit jamais recouvrir le titre */