/* ======================= RESPONSIVE DU TABLEAU DE BORD =======================
   Les écrans de préparation rangent chacun leurs règles d'écran étroit dans
   leur propre fichier. Ici : la descente et le combat, où chaque pixel de
   hauteur rendu au plateau compte. */

@media (max-width: 1280px) {
    .tac-main { grid-template-columns: minmax(0, 1fr) 220px; }
}

@media (max-width: 1000px) {
    /* Le journal cède la place au plateau. */
    .stage-log { display: none; }
    .tac-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }

    /* ---- Combat ----
       À 980 × 760, la fiche, la frise et la barre sur deux rangs ne laissaient
       que 57 px au plateau ; à 800 × 600, plus rien. */
    #combat-view { gap: 6px; padding: 6px 10px 4px; }
    .tac-top { min-height: 0; gap: 10px; }
    .tl-unit { width: 56px; padding: 3px 3px 2px; gap: 2px; }
    .tl-avatar { width: 30px; height: 24px; }
    .tl-img { height: 46px; }
    .tl-emoji { font-size: 1.15rem; }
    .turn-status { font-size: 0.62rem; letter-spacing: 0.12em; }

    /* La fiche tient sur une ligne : qui, ses PV, son armure, son prochain coup. */
    .tac-inspect { flex-direction: row; align-items: center; gap: 12px; padding: 5px 12px; overflow: hidden; }
    .tac-inspect .inspect-head { flex: 0 1 auto; min-width: 0; gap: 8px; }
    .tac-inspect .inspect-avatar { width: 30px; height: 30px; font-size: 1.3rem; }
    .tac-inspect .inspect-avatar .tl-img { height: 56px; margin-top: 2px; }
    .tac-inspect .inspect-ident h3 { margin-bottom: 0; font-size: 0.76rem; }
    .tac-inspect .elem-badges,
    .tac-inspect .inspect-res-title,
    .tac-inspect .res-cell:not(.faible),
    .tac-inspect .inspect-sub,
    .tac-inspect .inspect-effects,
    .tac-inspect .inspect-hint,
    .tac-inspect .armor-bar-bg,
    .tac-inspect .inspect-stats > span:not(.elan-inline) { display: none; }
    .tac-inspect .armor-wrap { flex: 0 0 auto; margin: 0; }
    .tac-inspect .enemy-hp-wrap { flex: 1 1 120px; min-width: 90px; }
    .tac-inspect .hp-bar-bg { height: 9px; }
    .tac-inspect .inspect-stats { flex: 0 0 auto; }
    /* Sur une ligne, seul le point faible reste : c'est lui qui décide du sort. */
    .tac-inspect .res-row { display: flex; flex: 0 0 auto; }
    .tac-inspect .enemy-intent { flex: 0 1 auto; min-width: 0; margin-top: 0; padding: 3px 10px; gap: 8px; }
    .tac-inspect .enemy-intent .intent-body small { display: none; }
    .tac-inspect .enemy-intent .intent-icon { font-size: 1.05rem; }
    .tac-inspect .enemy-intent .intent-text { font-size: 0.76rem; white-space: nowrap; }
    .tac-inspect .enemy-intent .intent-value { font-size: 0.9rem; }

    .combat-ticker { height: 36px; padding: 3px 10px; font-size: 0.7rem; }
    .combat-ticker .log-line:nth-child(3) { display: none; }

    /* Tableau de bord : globes réduits ; en combat, la barre d'action reste sur
       une seule rangée, centrée si elle tient, défilante sinon. */
    .hud-bottom { gap: 12px; padding: 6px 14px 8px; }
    .orb { width: 72px; height: 72px; }
    .orb-small .orb { width: 56px; height: 56px; }
    .orb-value { font-size: 1rem; }
    .orb-caption { font-size: 0.62rem; }
    .game-layout.in-combat .xp-strip { display: none; }
    .hud-center { gap: 4px; }
    .action-bar.combat {
        flex-wrap: nowrap;
        justify-content: flex-start;
        justify-content: safe center;
        overflow-x: auto;
        /* Place pour le lever du bouton survolé ou sélectionné. */
        padding: 6px 2px 2px;
        scrollbar-width: thin;
    }
    .action-bar.combat > * { flex-shrink: 0; }
    .action-bar.combat .act-btn { min-width: 72px; min-height: 64px; padding: 1px 2px; }
    .action-bar.combat .act-icon { font-size: 1.1rem; }
    /* Auto, Finir et Fuir restent à droite : ce sont les sorts qui défilent dessous. */
    .action-bar.combat .act-tools {
        position: sticky;
        right: 0;
        z-index: 1;
        margin-left: 4px;
        padding-left: 8px;
        background: linear-gradient(90deg, transparent, var(--ink) 8px);
    }
}

/* Écran étroit et bas : le bandeau de combat cède sa place au plateau. */
@media (max-width: 1000px) and (max-height: 640px) {
    .combat-ticker { display: none; }
}

@media (max-width: 780px) {
    .menu-container { padding: 10px; }
    .keys-list { grid-template-columns: 1fr; }

    .hud-top { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
    .hud-depth { order: 3; flex-basis: 100%; max-width: none; }
    .hud-chips { margin-left: 0; }

    /* Les globes rétrécissent mais restent aux mêmes coins. */
    .hud-bottom { gap: 10px; padding: 8px 12px 10px; }
    .orb { width: 68px; height: 68px; }
    .orb-small .orb { width: 54px; height: 54px; }
    .orb-value { font-size: 0.95rem; }
    .orb-caption { font-size: 0.6rem; }
    .act-btn, .act-toggle { min-width: 66px; min-height: 60px; padding: 2px 3px; }
    .act-btn.wide-act { min-width: 84px; }
    .act-policy { min-width: 58px; min-height: 60px; }
    .act-tools { margin-left: 0; padding-left: 8px; }
}

/* Réglage système : on coupe tout ce qui bouge. */
@media (prefers-reduced-motion: reduce) {
    #player-token::before { animation: none; opacity: 0.85; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .title-bg-inner, .title-haze-inner { animation: none; }
}