/*
 * Orange Road : design sobre et clair, au service des illustrations steampunk victorien (ARCHITECTURE §7).
 * Pas d'animation ; papier, encre et laiton.
 */

:root {
    --paper: #f5f0e6;
    --paper-dark: #e9e0cf;
    --card: #fffdf8;
    --ink: #2b2620;
    --ink-soft: #6b6255;
    --line: #d6cab3;
    --brass: #9c7233;
    --brass-dark: #74521f;
    --steel: #4f5d66;
    --danger: #9a3324;
    --shadow: 0 2px 10px rgba(43, 38, 32, 0.18);
    --title-font: Georgia, "Times New Roman", serif;
    --body-font: "Segoe UI", system-ui, sans-serif;
    --radius: 4px;
}

* {
    box-sizing: border-box;
}

/* Un élément masqué le reste, quel que soit son display. */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--paper-dark);
    color: var(--ink);
    font: 14px/1.45 var(--body-font);
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
    font-family: var(--title-font);
    font-weight: normal;
    margin: 0 0 0.5em;
}

a {
    color: var(--brass-dark);
}

button {
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.35em 0.9em;
    cursor: pointer;
}

button:hover {
    border-color: var(--brass);
}

button.primary {
    background: var(--brass);
    border-color: var(--brass-dark);
    color: var(--card);
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

input {
    font: inherit;
    padding: 0.35em 0.5em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

/* Barre des ressources et menu. */

.bar {
    display: flex;
    align-items: center;
    gap: 1.2em;
    padding: 0.3em 1em;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 3px solid var(--brass);
}

.bar .brand {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--title-font);
    font-size: 1.35em;
    color: #e5c48a;
    white-space: nowrap;
}

.bar .brand .logo {
    width: 2em;
    height: 2em;
}

/* Le menu occupe la place libre de la barre, ses entrées réparties sur toute la largeur. */
.bar nav {
    flex: 1;
    display: flex;
    justify-content: space-around;
    gap: 0.3em;
    flex-wrap: wrap;
}

/* Une entrée du menu (ARCHITECTURE §7) : son pin's, son nom dessous. */
.menu-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    padding: 0.15em 0.25em;
    background: transparent;
    color: var(--paper);
    border: 0;
    font-size: 0.92em;
    line-height: 1.1;
}

.menu-entry span {
    max-width: 7.5em;
    text-align: center;
}

.menu-entry .menu-pin {
    width: 3.8em;
    height: 3.8em;
    transition: transform 0.1s;
}

.menu-entry:hover .menu-pin {
    transform: translateY(-1px);
    filter: brightness(1.12);
}

.menu-entry:disabled {
    opacity: 0.45;
}

.bar .resources {
    margin-left: auto;
    display: flex;
    gap: 1.1em;
    font-variant-numeric: tabular-nums;
}

.bar .resource {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.bar .resource b {
    color: #e5c48a;
    font-weight: 600;
}

.currency-icon {
    width: 1.6em;
    height: 1.6em;
}

.bar .player {
    color: var(--paper-dark);
}

/* Le pseudo, dans la barre, ouvre « Mon compte ». */
.bar button.player {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-decoration: underline dotted;
    cursor: pointer;
}

.account-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3em 1em;
    margin: 0 0 1em;
}

.account-details dt {
    color: var(--ink-soft);
}

.account-details dd {
    margin: 0;
}

/* Page de connexion : la nuit sur Æthelburg ; le titre, la carte et le descriptif côte à côte, le Discord dessous. */
.login-page {
    position: fixed;
    inset: 0;
    display: grid;
    overflow: auto;
    z-index: 50;
}

.login-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Centrée par ses marges : si la page défile, le haut reste visible. */
.login-layout {
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6em;
    padding: 2.5em 16px 1.5em;
}

.login-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.4em;
}

.login-card,
.login-about {
    width: min(28em, calc(100vw - 32px));
    padding: 1em 1.4em 1.2em;
    background: var(--paper);
    border: 2px solid var(--brass);
    border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

.login-card {
    text-align: center;
}

.login-card .logo {
    width: 7.5em;
    height: 7.5em;
}

.login-card form {
    width: 100%;
    text-align: left;
}

.login-about h2 {
    margin: 0.2em 0 0.4em;
    font-family: var(--title-font);
    color: var(--brass-dark);
    text-align: center;
}

.login-about p,
.login-about li {
    margin: 0.5em 0;
}

.login-about ul {
    padding-left: 1.2em;
}

.login-lead,
.login-closing {
    font-style: italic;
    color: var(--ink-soft);
}

.login-discord {
    margin: 0;
    color: var(--paper);
    text-align: center;
}

.login-discord a {
    color: var(--paper);
    font-size: 1.05em;
    text-shadow: 0 1px 4px #000;
}

.login-discord a:hover {
    color: #f0b46a;
}

/* Titre du jeu en pin's : une lettre par pin's, de travers, un mot par ligne si la place manque. */
.title-pins {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2em 1.4em;
    margin: 0;
}

.title-word {
    display: flex;
}

.title-pin {
    width: clamp(2.6em, 7.5vw, 5.5em);
    aspect-ratio: 228 / 248;
    margin: 0 -0.25em;
    transform: translateY(var(--shift, 0)) rotate(var(--angle, 0));
}

.title-letter {
    font: bold 128px var(--title-font);
}

/* Bureau et fenêtres en cascade. */

.desktop {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Une fenêtre : son cadre (barre de titre, contenu) et, à côté, les onglets de ses feuilles. */
.window {
    position: absolute;
}

.window-frame {
    min-width: 260px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Redimensionnable par le coin bas droit ; la taille maximale suit le bureau (windows.js). */
    resize: both;
    overflow: hidden;
}

.window.focused .window-frame {
    border-color: var(--brass);
}

.window-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.5em 0.35em 0.8em;
    border-bottom: 2px solid var(--brass);
    font-family: var(--title-font);
    font-size: 1.1em;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.window-title span {
    flex: 1;
}

.window-title button {
    padding: 0 0.5em;
    line-height: 1.4;
}

.window-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.8em 1em 1em;
    overflow: auto;
}

/* Formulaires, messages et textes d'aide. */

.form {
    display: grid;
    gap: 0.6em;
    width: 320px;
}

.form label {
    display: grid;
    gap: 0.2em;
    color: var(--ink-soft);
}

/* La case des conditions, à l'inscription : la case puis son texte, sur une ligne. */
.form label.terms {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
}

.form .actions {
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
}

.hint {
    color: var(--ink-soft);
    font-size: 0.9em;
}

.error {
    color: var(--danger);
}

.error:empty {
    display: none;
}

.rich p {
    margin: 0 0 0.7em;
    max-width: 36em;
}

.rich a {
    cursor: pointer;
}

/* Bouton qui se présente comme un lien (« Mot de passe oublié ? »). */
.link-button {
    display: block;
    margin: 0.6em auto 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--brass-dark);
    text-decoration: underline;
    cursor: pointer;
}

.message {
    margin: 0 0 0.6em;
    color: var(--steel);
}

.message:empty {
    display: none;
}

.compact {
    margin: 0;
}

/* Fenêtres larges (listes de cartes). */

.window.wide .window-frame {
    width: 820px;
}

/* Divinités : les 4 quêtes proposées au plus tiennent sur une ligne (4 cartes de 200 px et leurs marges). */
.window.divinities .window-frame {
    width: 900px;
}

/* Cartes : héros, classes, objets, sorts, quêtes. */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.8em;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.card.busy {
    opacity: 0.7;
}

.card-art {
    border-bottom: 1px solid var(--line);
    line-height: 0;
}

.class-art {
    width: 100%;
    height: auto;
}

/* Planches de blasons, posées dans la page sans s'afficher (display: none couperait leurs dégradés). */
.blason-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Planche de contrôle des blasons (outils de développement). */
.blason-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6em;
}

.blason-board figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    background: var(--card);
}

.blason-board figcaption {
    padding: 0.3em 0.5em;
    line-height: 1.3;
    font-size: 0.85em;
    color: var(--ink-soft);
}

.card-title {
    margin: 0.5em 0.7em 0;
    font-size: 1.15em;
}

.card-subtitle {
    margin: 0 0.7em;
    color: var(--ink-soft);
    font-size: 0.9em;
}

.card-body {
    flex: 1;
    padding: 0.4em 0.7em 0.6em;
    display: grid;
    gap: 0.5em;
    align-content: start;
}

.card-section h4 {
    margin: 0 0 0.2em;
    font: 600 0.75em var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.card-actions {
    display: flex;
    gap: 0.4em;
    justify-content: flex-end;
    padding: 0.5em 0.7em;
    border-top: 1px solid var(--line);
    background: var(--paper);
}

.badge {
    margin-left: 0.5em;
    padding: 0 0.45em;
    border-radius: var(--radius);
    background: var(--steel);
    color: var(--card);
    font-size: 0.8em;
}

/* Valeurs par type de dégâts et sorts. */

.type-values, .spells {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15em;
}

.type-values li {
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-variant-numeric: tabular-nums;
}

.type-values li.negative {
    color: var(--danger);
}

.res-icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

.spells .slot {
    display: inline-block;
    min-width: 4.5em;
    color: var(--ink-soft);
    font-size: 0.85em;
}

/* Progression des PQ. */

.progress {
    position: relative;
    height: 1.3em;
    background: var(--paper-dark);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #e5c48a;
}

.progress-label {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.6em;
    font-variant-numeric: tabular-nums;
}

/* Objets : qualité, lignes de bonus, légendaires. */

.stars {
    color: var(--brass);
    letter-spacing: 0.1em;
}

.card.legendary {
    border-color: #c99a2e;
}

.badge.legendary {
    background: #c99a2e;
}

.bonuses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15em;
}

.bonuses li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3em;
    font-variant-numeric: tabular-nums;
}

/* Filtres cumulables des listes d'objets. */

.filters {
    display: grid;
    gap: 0.3em;
    margin-bottom: 0.5em;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3em;
}

.filter-label {
    min-width: 5em;
    color: var(--ink-soft);
    font-size: 0.85em;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.6em;
    font-size: 0.9em;
}

.chip.on {
    background: var(--brass);
    border-color: var(--brass-dark);
    color: var(--card);
}

.filtered-list > .hint {
    margin-bottom: 0.5em;
}

/* Marchand. */

.section-title {
    margin: 1em 0 0.4em;
    font: 600 0.8em var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.merchant-time {
    padding: 0.6em 0.8em;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.merchant-time h4 {
    margin: 0;
    font-family: var(--title-font);
    font-weight: normal;
}

.inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.4em;
}

.quantity {
    width: 5em;
}

/* Feuilles d'une fenêtre : onglets accrochés au bord gauche, hors du cadre, comme des intercalaires. */

.sheet-tabs {
    position: absolute;
    top: 2.8em;
    right: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3em;
}

.sheet-tab {
    margin-right: -1px;
    padding: 0.45em 0.8em;
    white-space: nowrap;
    background: var(--paper-dark);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: -2px 2px 6px rgba(43, 38, 32, 0.12);
    color: var(--ink-soft);
}

.sheet-tab:hover {
    color: var(--ink);
}

/* L'onglet actif prend la couleur de la fenêtre et se fond dans son bord. */
.sheet-tab.on {
    position: relative;
    z-index: 1;
    padding-left: 1.1em;
    background: var(--paper);
    border-color: var(--line);
    border-left: 3px solid var(--brass);
    color: var(--ink);
    font-weight: 600;
}

/* Fiche d'un héros. */

.hero-sheet {
    display: grid;
    gap: 0.9em;
}

.hero-header {
    display: flex;
    gap: 1em;
    align-items: center;
}

.hero-art {
    width: 160px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}

.hero-identity {
    flex: 1;
    display: grid;
    gap: 0.4em;
}

.hero-name {
    font-family: var(--title-font);
    font-size: 1.3em;
    width: 16em;
    max-width: 100%;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8em;
}

.card-section h4.sub {
    margin-top: 0.8em;
}

.card.clickable {
    cursor: pointer;
}

.card.clickable:hover {
    border-color: var(--brass);
}

.empty-slot {
    display: grid;
    place-items: center;
    min-height: 8em;
    padding: 1em;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    text-align: center;
    font-size: 0.9em;
}

/* Sorts : emplacements et pastilles. */

/* Les 5 emplacements sur une ligne : starter, 3 fillers, finisher. */
.spell-slots {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4em;
}

.spell-slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3em;
    min-height: 4.2em;
    padding: 0.35em;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.spell-slot .slot {
    min-width: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75em;
}

.spell-slot .spell-chip {
    justify-content: space-between;
}

.spell-slot .hint {
    text-align: center;
}

.spell-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}

.spell-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.6em;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--steel);
    border-radius: var(--radius);
}

.spell-chip.slot-starter {
    border-left-color: #3a5f8a;
}

.spell-chip.slot-filler {
    border-left-color: var(--brass);
}

.spell-chip.slot-finisher {
    border-left-color: var(--danger);
}

/* Pastille illustrée : le blason du sort seul, son nom en infobulle. */
.spell-chip.has-art {
    position: relative;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.spell-art {
    display: block;
    width: 3.2em;
    height: 3.2em;
}

.spell-chip.has-art .chip-clear {
    position: absolute;
    top: -0.3em;
    right: -0.3em;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 50%;
}

.chip-clear {
    padding: 0 0.3em;
    line-height: 1.2;
    border: none;
    background: transparent;
    color: var(--ink-soft);
}

/* Glisser-déposer. */

.draggable {
    cursor: grab;
}

.dragging {
    opacity: 0.5;
}

.drop-over {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
    background: #f3e6c8;
}

.spell-chip {
    cursor: pointer;
}

/* Carte d'un sort : ses effets. */

.spell-card {
    width: 26em;
    max-width: 100%;
}

.effects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4em;
}

.effect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
}

.effect-types {
    display: inline-flex;
    gap: 0.15em;
}

.effect-target {
    color: var(--ink-soft);
    font-size: 0.9em;
}

.spell-card .rich p {
    margin: 0.4em 0 0;
    color: var(--ink-soft);
    font-size: 0.85em;
}

/* Divinités et quêtes proposées. */

.themes .theme {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

button.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--card);
}

.bonuses li.negative {
    color: var(--danger);
}

.rewards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1em;
    font-variant-numeric: tabular-nums;
}

/* Fenêtre de confirmation modale : le reste de la page est voilé et inaccessible. */

.confirm-dialog {
    max-width: 30em;
    padding: 1em 1.2em;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.confirm-dialog::backdrop {
    background: rgba(43, 38, 32, 0.45);
}

.confirm-dialog .actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    margin-top: 0.8em;
}

/* Fenêtre de combat : archonte, groupe ennemi, votre groupe ; places 4 2 1 3 5 en arc. */

.window.combat .window-frame {
    width: 900px;
}

.combat-sheet {
    display: grid;
    gap: 0.6em;
}

.archon {
    justify-self: center;
    display: grid;
    justify-items: center;
    gap: 0.2em;
    width: 170px;
    padding: 0.3em;
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-size: 0.85em;
}

.archon .class-art {
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.archon:hover .class-art {
    border-color: var(--brass-dark);
}

.side-label {
    margin: 0.4em 0 0;
    text-align: center;
    font: 600 0.8em var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.places {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6em;
    align-items: start;
}

/* L'arc ennemi s'ouvre vers le bas, le vôtre vers le haut : les deux groupes se font face. */
.places.enemy .place-1 { margin-top: 2.4em; }
.places.enemy .place-2, .places.enemy .place-3 { margin-top: 1.2em; }
.places.ally .place-2, .places.ally .place-3 { margin-top: 1.2em; }
.places.ally .place-4, .places.ally .place-5 { margin-top: 2.4em; }

.place {
    display: grid;
    min-height: 13em;
}

.place.closed {
    place-items: center;
    background: rgba(107, 98, 85, 0.12);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.place-number {
    place-self: center;
    font: 2em var(--title-font);
    color: var(--line);
}

.place-card .card-title {
    font-size: 1em;
}

.card.locked {
    border-color: var(--brass);
}

.empty-place {
    min-height: 13em;
    border: 2px dashed var(--brass);
    background: rgba(255, 253, 248, 0.6);
    color: var(--ink-soft);
}

.empty-place:hover {
    background: var(--card);
}

.hint.gap {
    color: var(--danger);
}

.badge.rank {
    margin-left: 0;
    background: var(--danger);
}

.group-controls {
    justify-content: center;
}

.quest-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
}

.reasons {
    margin: 0;
    padding-left: 1.2em;
}

.picker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3em;
    min-width: 18em;
}

.picker-hero {
    width: 100%;
    text-align: left;
}

.picker-spell {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.picker-spell .spell-art {
    width: 2.4em;
    height: 2.4em;
}

/* Lien vers un sort (listes, lecteur de log, forgeron) : son petit blason devant son nom. */
.spell-art.inline {
    display: inline-block;
    width: 1.7em;
    height: 1.7em;
    margin-right: 0.25em;
    vertical-align: middle;
}

.spell-card .card-art {
    padding: 0.4em 0;
    background: var(--paper-dark);
}

.spell-card .card-art .spell-art {
    width: 6em;
    height: 6em;
    margin: 0 auto;
}

.archon-card {
    width: 22em;
    max-width: 100%;
}

/* Carte d'un sort pour un lanceur : ce que fait son premier lancer. */

.effect-preview {
    flex-basis: 100%;
    padding-left: 1.6em;
    color: var(--brass-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.slot-pick {
    margin-top: auto;
    padding: 0.05em 0.4em;
    font-size: 0.8em;
}

/* Quêtes en cours et bilan. */

.countdown {
    margin: 0;
    font: 1.2em var(--title-font);
    font-variant-numeric: tabular-nums;
}

.card.quest-done {
    border-color: var(--brass);
}

.sent-groups {
    margin: 0;
    padding-left: 1.1em;
}

.report-card {
    width: 26em;
    max-width: 100%;
}

/* Textes riches dans une liste (récompenses, alertes) : sans marge de paragraphe. */
.rewards .rich p,
.message .rich p {
    margin: 0;
}

.card.quest-running {
    border-color: var(--steel);
    background: var(--paper-dark);
}

/* Lecteur de log : héros à gauche, récit au centre, monstres à droite. */

.window.combat-log .window-frame {
    width: 1000px;
}

.log-controls {
    margin: 0 0 0.6em;
}

.log-controls button {
    text-align: center;
    white-space: nowrap;
}

.log-controls .log-step {
    width: 8.5em;
}

.log-controls .log-jump {
    width: 11.5em;
}

.log-counter {
    margin-left: auto;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.log-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    gap: 0.8em;
    align-items: start;
}

.log-side {
    position: sticky;
    top: 0;
    display: grid;
    gap: 0.4em;
}

.log-fighter {
    display: grid;
    gap: 0.15em;
    padding: 0.3em 0.4em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.log-fighter.ally {
    opacity: 0.75;
}

.log-fighter.involved {
    border-color: var(--brass);
}

.log-fighter.acting {
    border-color: var(--brass-dark);
    box-shadow: 0 0 0 2px var(--brass);
}

.log-fighter.wounded .progress-fill {
    background: var(--danger);
}

.log-fighter.wounded .log-name {
    color: var(--danger);
}

.log-name {
    font-size: 0.85em;
}

.log-transcript {
    display: grid;
    gap: 0.2em;
    max-height: 60vh;
    overflow: auto;
    padding-right: 0.3em;
}

.log-step {
    padding: 0.2em 0.4em;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.log-step.current {
    border-left-color: var(--brass);
    background: var(--card);
}

.log-step.future {
    display: none;
}

.log-round {
    margin: 0.6em 0 0.2em;
    font: 1.1em var(--title-font);
}

.log-phase {
    margin: 0.3em 0 0.1em;
    color: var(--ink-soft);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.log-cast,
.log-skip,
.log-result {
    margin: 0;
}

.log-result {
    font-weight: 600;
}

.log-effects {
    margin: 0;
    padding-left: 1.4em;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.hero-picker {
    margin: 0 0 0.8em;
}

.dev-section {
    margin: 0 0 0.8em;
}

.dev-section h4 {
    margin: 0 0 0.3em;
    font-family: var(--title-font);
    font-weight: normal;
}

select {
    font: inherit;
    padding: 0.3em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.help-index {
    columns: 2;
    margin: 0;
    padding-left: 1.2em;
}

.help-index a {
    cursor: pointer;
}

/* Forgeron : l'établi (objet choisi et service), au-dessus de la liste des objets. */

.forge-bench {
    margin-bottom: 1em;
}

.forge-bench .empty-slot {
    min-height: 5em;
}

.forge-bench-row {
    display: grid;
    grid-template-columns: minmax(200px, 240px) 1fr;
    gap: 1em;
    align-items: start;
}

.forge-service {
    display: grid;
    gap: 0.6em;
    justify-items: start;
}

.forge-evolutions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4em;
    width: 100%;
}

.forge-evolutions li {
    display: flex;
    gap: 0.8em;
    align-items: center;
    justify-content: space-between;
    padding: 0.3em 0.5em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.forge-evolutions .rich p,
.forge-evolutions .bonuses {
    margin: 0;
}

@media (max-width: 600px) {
    .forge-bench-row {
        grid-template-columns: 1fr;
    }
}

/* Tutoriel : le portrait de l'archonte, ses paroles dans une bulle à côté, la tâche en dessous. */
.window.tutorial .window-frame {
    width: 520px;
}

.tutorial-top {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1em;
    align-items: start;
}

.tutorial-top .portrait .class-art {
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.speech {
    position: relative;
    margin: 0;
    padding: 0.7em 0.9em;
    background: var(--card);
    border: 1px solid var(--brass);
    border-radius: 8px;
    font-family: var(--title-font);
    font-style: italic;
    white-space: pre-line;
}

/* La pointe de la bulle, tournée vers le portrait. */
.speech::before,
.speech::after {
    content: "";
    position: absolute;
    top: 1.2em;
    border: 9px solid transparent;
}

.speech::before {
    left: -18px;
    border-right-color: var(--brass);
}

.speech::after {
    left: -16px;
    border-right-color: var(--card);
}

.tutorial-bottom {
    margin-top: 1em;
    padding-top: 0.7em;
    border-top: 1px solid var(--line);
}

.tutorial-bottom .task {
    margin: 0 0 0.5em;
}

.tutorial-bottom .task::before {
    content: "○ ";
    color: var(--ink-soft);
}

.tutorial-bottom .task.done::before {
    content: "✓ ";
    color: var(--brass-dark);
}

@media (max-width: 600px) {
    .tutorial-top {
        grid-template-columns: 1fr;
    }

    .speech::before,
    .speech::after {
        display: none;
    }
}

.tutorial-bottom .actions {
    display: flex;
    justify-content: flex-end;
}

/* Remarque d'une divinité, sous son nom. */
.quip {
    font-family: var(--title-font);
    font-style: italic;
    color: var(--ink-soft);
}

/* Social : listes d'amis, de guildes et de membres, une ligne par joueur avec ses boutons à droite. */
.social-list {
    list-style: none;
    margin: 0.3em 0 0.8em;
    padding: 0;
}

.social-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.3em 0.4em;
    border-bottom: 1px solid var(--line);
}

.social-row.clickable {
    cursor: pointer;
}

.social-row.clickable:hover {
    background: var(--paper-dark);
}

.social-actions {
    margin-left: auto;
}

.social-ask input,
.social-description textarea {
    flex: 1;
    width: 100%;
}

.social-description {
    display: grid;
    gap: 0.4em;
    justify-items: end;
    margin-bottom: 0.8em;
}

/* Demandes de renfort : indicateur de couleur dans la liste, menu qui clignote (bleu ami, vert guilde, rouge
   JcJ, gris pour une demande annulée). */
.help-dot {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    flex: none;
    background: var(--line);
}

.help-dot.friend { background: #2f6fd1; }
.help-dot.guild { background: #3e9a4a; }
.help-dot.pvp { background: #c4161c; }
.help-dot.cancelled { background: #8a8378; }
.help-dot.mine { background: var(--brass); }

/* Une entrée du menu qui demande d'agir : son pin's s'entoure d'un halo de sa couleur. */
.blink .menu-pin {
    animation: blink 1.2s ease-in-out infinite;
}

.blink-friend { --blink: #2f6fd1; }
.blink-guild { --blink: #3e9a4a; }
.blink-pvp { --blink: #c4161c; }
.blink-cancelled { --blink: #8a8378; }
.blink-ready { --blink: #e5c48a; }

@keyframes blink {
    50% { filter: drop-shadow(0 0 5px var(--blink)) drop-shadow(0 0 2px var(--blink)); }
}

@media (prefers-reduced-motion: reduce) {
    .blink .menu-pin { animation: none; filter: drop-shadow(0 0 4px var(--blink)); }
}

.help-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6em;
    margin: 0.6em 0;
}

.help-slot {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.5em 0.7em;
    background: var(--card);
}

.help-slot.empty {
    border-style: dashed;
    background: transparent;
}

.help-chooser {
    display: grid;
    gap: 0.2em;
    max-height: 12em;
    overflow: auto;
    margin-bottom: 0.4em;
}