/* Tableau de bord de la partie de joute : tout est sans fond (ombre portée pour rester lisible sur le décor), sans interaction. */
@font-face { font-family: Columna; src: url('natif/Columna.ttf'); }
:root { --vert: #3ecf6a; --rouge: #e5483c; --or: #e2c98f; --u: calc(100vh / 1000); }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; pointer-events: none; color: #f6ead0; font: clamp(13px, 1.4vw, 20px) Columna, serif; }
[hidden] { display: none !important; }
.etiquette, .barre, .gauche { text-shadow: 0 0 3px #000, 0 1px 4px #000, 0 0 10px #000, 0 0 18px #000c; }

/* Main de l'adversaire : des dos de cartes, juste sous les barres de vie. */
.haut { position: fixed; left: 0; right: 0; top: 8.6vh; display: flex; justify-content: center; }
.main-adv { display: flex; justify-content: center; min-height: 3em; }
.main-adv .dos { margin: 0 -.6em; width: 2.1em; height: 2.35em; }
.dos { position: relative; flex: none; filter: drop-shadow(0 2px 3px #000b); }
.dos::before, .dos::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 40%, 82% 100%, 18% 100%, 0 40%); }
.dos::before { inset: 0; background: linear-gradient(150deg, #f0d890, #9c7a2e 55%, #6b5120); }
.dos::after { inset: 8%; background: radial-gradient(ellipse at 50% 42%, #3a4a6e, #182138 60%, #0b101e); }
.dos i { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: #e2c98fcc; font-style: normal; font-size: .9em; }

/* Piles de cartes, de part et d'autre de la bande centrale du plateau (entre les deux rangées) : celle de l'adversaire sur le bord gauche, la mienne sur le bord droit.
   L'étiquette passe à la ligne pour ne pas dépasser le tas. Le texte du tour (.gauche) commence à droite de la pile adverse. */
.piles { --tas: clamp(56px, 7vw, 100px); position: fixed; left: 2.5vw; right: 2.5vw; top: 49vh; transform: translateY(-50%); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: var(--tas); text-align: center; }
.tas { position: relative; width: var(--tas); aspect-ratio: 1.1; }
.tas .dos { position: absolute; inset: 0; width: 100%; height: 100%; }
.pile b { font-size: 1.5em; color: #fff3c9; text-shadow: 0 0 3px #000, 0 2px 4px #000; }
.etiquette { font-size: .68em; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: #d9cba7; }
.pile.vide .tas { opacity: .25; }

/* Texte du tour, à gauche de la bande centrale du plateau (entre les deux rangées) : l'état du tour et ce qu'on peut faire. */
.gauche { position: fixed; left: 13vw; top: 38vh; max-height: 22vh; width: 44vw; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.statut p { margin: 0 0 3px; font-size: 1em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff3c9; line-height: 1.25; }
.statut p.secondaire { font-size: .82em; font-weight: 400; color: #d9cba7; }
.conseils { display: flex; flex-direction: column; gap: 4px; }
.conseils p { margin: 0; font-size: .74em; line-height: 1.3; color: #cfe3c8; padding-left: .9em; position: relative; }
.conseils p::before { content: '›'; position: absolute; left: 0; color: #f3dd9a; }

/* Ligne d'état du bas : seulement avant la partie (attente, lancement). */
.barre { position: fixed; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: .45em; padding: 0 16px; text-transform: uppercase; letter-spacing: .06em; }
.rang { display: flex; align-items: center; justify-content: center; gap: .9em; flex-wrap: nowrap; white-space: nowrap; }
.titre { color: #e2c98f; }
.info b { font-weight: 700; }
.sep::before { content: '·'; color: #b89a63; }
.aide { display: flex; align-items: center; gap: .4em; color: #d9cba7; font-size: .92em; }
.touche { height: 1.9em; width: auto; flex: none; filter: drop-shadow(0 1px 3px #000); }

/* Zoom d'une carte (écran de jeu) : le plateau est assombri par un voile, le texte et les piles sont floutés. */
.voile { position: fixed; inset: 0; background: #04080e99; }
body.flou .gauche, body.flou .piles, body.flou .haut { filter: blur(5px) brightness(.6); }

/* Chaque bloc du tableau de bord est indépendant : un changement de texte dans l'un ne remet pas en page les autres. */
.gauche, .piles, .haut { contain: layout style; }

/* Animations 3D désactivées (réglage du menu Échap) : les animations en boucle s'arrêtent (celles d'entrée finissent aussitôt, dans leur état final). */
.sans-3d *, .sans-3d *::before, .sans-3d *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }