/* What is selected in a list (the combatant unfolded, the recruit placed on the map, the player put forward): a tinted
   background, the same everywhere. */
:root {
    --selection-background: rgba(122, 46, 29, .14);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* A new version of the game is ready (index.html): above everything, at the bottom, until the player reloads. */
#update-banner {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    z-index: 2000;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    border-radius: 6px;
    background: #3d3222;
    color: #f2e6c8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    font: 400 .9rem Roboto, sans-serif;
}

    #update-banner.shown {
        display: flex;
    }

    #update-banner button {
        flex: none;
        border: 0;
        border-radius: 4px;
        padding: 6px 12px;
        background: #7a2e1d;
        color: #fff;
        font: 500 .85rem Roboto, sans-serif;
        cursor: pointer;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* The loading screen (index.html): the title, the players' coats of arms, dim until the loading reaches each of them,
   then lit, and the percentage. */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 10vh 16px 0;
}

.loading-title {
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(1.3rem, 5vw, 2rem);
    color: #3d2a0e;
    text-align: center;
}

.loading-blazons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.6rem, 3vw, 1.2rem);
    width: min(78vw, 400px, calc((88vh - 150px) / 1.25));
}

    .loading-blazons img {
        width: 100%;
        aspect-ratio: 20.6 / 24.6;
        opacity: .25;
        filter: grayscale(1) drop-shadow(0 0 0 transparent);
        transform: scale(.86);
        transition: opacity .35s, filter .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
    }

        .loading-blazons img.lit {
            opacity: 1;
            filter: drop-shadow(0 3px 4px rgba(46, 28, 15, .35));
            transform: none;
        }

.loading-progress-text {
    font-family: Cinzel, Georgia, serif;
    font-size: 1.1rem;
    color: #3d3222;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Chargement");
    }

/* The server waking up (MainLayout): the loading screen over everything, its coats of arms lit in turn, one every 400 ms,
   round and round. */
.waking-screen {
    position: fixed;
    inset: 0;
    z-index: 1350;
    overflow: auto;
    background-color: #f3ead3;
}

    .waking-screen .loading-blazons img {
        transition: none;
        animation: blazon-turn 3.6s infinite;
    }

@keyframes blazon-turn {
    0%, 100% {
        opacity: .25;
        filter: grayscale(1) drop-shadow(0 0 0 transparent);
        transform: scale(.86);
    }

    5%, 13% {
        opacity: 1;
        filter: grayscale(0) drop-shadow(0 3px 4px rgba(46, 28, 15, .35));
        transform: none;
    }

    22% {
        opacity: .25;
        filter: grayscale(1) drop-shadow(0 0 0 transparent);
        transform: scale(.86);
    }
}

.waking-text {
    font-family: Cinzel, Georgia, serif;
    font-size: 1.05rem;
    color: #3d3222;
    text-align: center;
}

/* The parchment colour from the first paint, before the theme takes over. */
body {
    background-color: #f3ead3;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Cendias */
.cendias-title {
    font-family: Cinzel, Georgia, serif;
    font-size: 1.15rem;
    color: #f2e6c8 !important;
    letter-spacing: .04em;
}

.cendias-main {
    padding: 12px;
}

.cendias-heading {
    font-family: Cinzel, Georgia, serif !important;
}

/* A combatant in the orders: a big shield in its player's colour with its strength. */
.combatant-shield {
    width: 26px;
    height: 31px;
    flex: none;
}

.combatant-shield.small {
    width: 24px;
    height: 29px;
}

/* A player's coat of arms in white, outlined, inside their shield. */
.combatant-shield .blazon {
    fill: #fff;
    stroke: #1d160c;
    stroke-width: 36px;
    paint-order: stroke;
    stroke-linejoin: round;
}

.combatant-shield text {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    fill: #fff;
    stroke: #1d160c;
    stroke-width: 1.6px;
    paint-order: stroke;
    stroke-linejoin: round;
}

/* An offered combatant the player set aside. */
.passed {
    opacity: .55;
}

/* The orders: rows separated by a line rather than boxed, buttons in normal case, the rules behind an info icon. */
.mud-button-root,
.mud-tab {
    text-transform: none !important;
}

/* The orders tabs are an icon and a fraction: narrow enough for all of them to fit. */
.orders-tabs .mud-tab {
    min-width: 0 !important;
    padding: 6px 12px !important;
}

/* The icon of an orders tab, its name in the tooltip. */
.tab-icon {
    width: 30px !important;
    height: 30px !important;
}

/* A province with none of its owner's combatants earns nothing: its management is greyed out. */
.order-row.ungarrisoned {
    opacity: 0.5;
}

.order-row {
    padding: 6px 2px;
    border-bottom: 1px solid rgba(43, 34, 22, .12);
}

.order-group {
    margin-top: 10px;
    padding: 2px;
    border-bottom: 1px solid rgba(43, 34, 22, .3);
}

.combatant-row {
    padding-left: 4px;
}

/* A combatant's row: the rank, the shield and the orders it may add (tiles) on top, the name, the province and the
   orders given under them, across the whole row; a click on it unfolds the editing. */
.combatant-head {
    display: grid;
    grid-template-columns: 24px auto 1fr auto auto;
    grid-template-areas:
        "rank shield actions count chevron"
        ". title title title title";
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    cursor: pointer;
}

/* Folded, the row has no order tiles: the name comes up beside the shield, on a single line. */
.combatant-row:not(.open) > .combatant-head {
    grid-template-areas: "rank shield title count chevron";
}

/* Sorted by strength, the list is the action order itself: no rank, no column for it. */
.combatant-row.no-rank > .combatant-head {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
        "shield actions count chevron"
        "title title title title";
}

.combatant-row.no-rank:not(.open) > .combatant-head {
    grid-template-areas: "shield title count chevron";
}

/* The simple screen: no rank, no tiles, no count, no chevron; the shield and the name. */
.combatant-row.simple > .combatant-head {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "shield title marker";
}

.combatant-head > .detailed-orders {
    grid-area: marker;
}

.combatant-head > .combatant-rank {
    grid-area: rank;
}

.combatant-head > .combatant-shield {
    grid-area: shield;
}

.combatant-head > .combatant-actions {
    grid-area: actions;
}

.combatant-head > .combatant-chevron {
    grid-area: chevron;
}

.combatant-head > .combatant-count {
    grid-area: count;
    white-space: nowrap;
}

/* A combatant without any order: its count (or the simple screen's question marks) in the colour of what is left to decide. */
.combatant-count.undecided,
.combatant-simple.undecided {
    color: #b8620a;
    font-weight: 700;
}

.combatant-head > .combatant-title {
    grid-area: title;
}

.combatant-identity {
    column-gap: 6px;
    row-gap: 0;
}

.combatant-identity .combatant-summary {
    flex: 0 1 auto;
}

/* The combatant unfolded: selected. */
.combatant-row.open {
    background: var(--selection-background);
}

.combatant-rank {
    width: 24px;
    white-space: nowrap;
    flex: none;
    text-align: right;
    font-size: .75rem;
    color: #9a8a70;
}

.combatant-title {
    min-width: 0;
    flex: 1 1 auto;
}

.combatant-place {
    font-size: .75rem;
    color: #7a6a52;
    white-space: nowrap;
}

/* The simple screen: orders given on the detailed one, marked by the colour of the warning under the list. */
.detailed-orders {
    color: #b8620a;
    flex: none;
}

/* The simple screen: where the combatant fights, in a word, instead of its orders. */
.combatant-simple {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: .4rem;
}

.combatant-summary,
.combatant-summary.order-default {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
    min-height: 0;
    line-height: 1.3;
}

/* The orders it may add, at the top right of the row: small tiles, an icon over a short word. */
.combatant-actions {
    display: flex;
    gap: 2px;
}

.combatant-chevron {
    align-self: center;
}

.action-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 42px;
    padding: 3px 1px 2px;
    border: 1px solid rgba(122, 46, 29, .45);
    border-radius: 4px;
    background: transparent;
    color: #7a2e1d;
    font: inherit;
    font-size: .62rem;
    line-height: 1;
    cursor: pointer;
}

.action-tile:hover {
    background: rgba(122, 46, 29, .08);
}

.action-tile.chosen {
    background: #7a2e1d;
    color: #fff;
}

.action-tile .action-icon {
    width: 20px !important;
    height: 20px !important;
    color: inherit;
    fill: currentColor;
}

/* The « Tous » row of the recruits: the same tiles, joined, as wide together as the − amount +
   of the rows below (the amount widened to fill). */
.recruit-all,
.recruit-row {
    --recruit-control-width: 118px;
}

.recruit-all .tile-bar {
    width: var(--recruit-control-width);
}

/* A bar of tiles (the orders of a row, or of a « Tous » row): the tiles joined, shared borders, rounded at the ends
   only. */
.tile-bar .tile-bar-item {
    border-radius: 0;
}

.tile-bar .tile-bar-item + .tile-bar-item {
    margin-left: -1px;
}

.tile-bar .tile-bar-item:first-child {
    border-radius: 4px 0 0 4px;
}

.tile-bar .tile-bar-item:last-child {
    border-radius: 0 4px 4px 0;
}

.tile-bar .tile-bar-item:only-child {
    border-radius: 4px;
}

/* The economy's tiles: each order's icon in its colour (red, orange, green), as beside the wealth reached;
   the « Tous » of the diplomacy: keeping, all in grey, as raising the peasants among the combatants' orders. */
.action-tile.economy-pillage:not(.chosen) .action-icon {
    color: #b3261e;
}

.action-tile.economy-tax:not(.chosen) .action-icon {
    color: #cb7519;
}

.action-tile.economy-enrich:not(.chosen) .action-icon {
    color: #2e7d32;
}

/* The economy's tiles all as wide, so that the bars line up from one province to the next; an order chosen in the
   leather of its colour, as the diplomacy's chosen buttons (below); an order not allowed (or a province without a combatant) faded. */
.action-tile.economy-tile,
.tile-bar .action-tile.economy-tile {
    width: 56px;
    flex: none;
}

.action-tile:disabled {
    opacity: .4;
    cursor: default;
    background: transparent;
}

.action-tile.chosen:disabled {
    background: #9e9e9e;
    border-color: #9e9e9e;
}

/* The diplomacy's tiles all as wide, so that the bars line up from one player to the next; a choice made in the
   leather of its colour (below). */
.action-tile.diplo-tile,
.tile-bar .action-tile.diplo-tile {
    width: 60px;
    flex: none;
}

.action-tile.diplo-tile .action-icon.relation-icon {
    width: 20px !important;
    height: 20px !important;
}

/* As Mobiliser: only the icon grey, the word and the border those of every tile. */
.action-tile.diplo-bulk-keep .action-icon {
    color: #757575;
}

.action-tile.diplo-bulk-keep {
    width: 60px;
}

/* Under a rising auction, the four arrivals of the recruits won in a bar of tiles as wide as the panel, each its rank over
   the province's shape over its name, pale until chosen; the one being chosen on the map pressed in. */
.tile-bar.arrival-tiles {
    width: 100%;
}

.tile-bar .action-tile.arrival-tile {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 2px 2px;
}

/* The top line: the rank (with « + fort » on the first, « 2ᵉ », « 3ᵉ » on the others), then a warning at the right when the
   province may not hold at recruitment time. */
.action-tile.arrival-tile .arrival-head {
    display: flex;
    align-items: center;
    gap: 3px;
    align-self: stretch;
    min-height: 16px;
    margin-bottom: 2px;
}

/* The province's shape, large, rising into the top line between the rank and the warning, which stay over it. */
.action-tile.arrival-tile .province-shape {
    margin-top: -16px;
}

.action-tile.arrival-tile .arrival-head {
    position: relative;
    z-index: 1;
}

.action-tile.arrival-tile .arrival-strength {
    text-shadow: 0 0 2px #f7efdc, 0 0 2px #f7efdc, 0 0 3px #f7efdc;
    font-size: 11px;
    white-space: nowrap;
}

.action-tile.arrival-tile .arrival-risk {
    display: inline-flex;
    margin-left: auto;
    color: #c77700;
}

.action-tile.arrival-tile .arrival-risk .arrival-risk-icon {
    width: 16px !important;
    height: 16px !important;
}

/* The rank as on the map: light figures in a green square with a light rim. */
.action-tile.arrival-tile .arrival-rank {
    display: inline-block;
    min-width: 16px;
    padding: 0 3px;
    border: 1px solid #f2e6c8;
    border-radius: 3px;
    background: #2e7d32;
    color: #f2e6c8;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(43, 34, 22, .35);
}

.action-tile.arrival-tile .arrival-name {
    font-size: 13px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An arrival not chosen (the default one, or the last one chosen): pale. */
.action-tile.arrival-tile.implied:not(.selected) .province-shape,
.action-tile.arrival-tile.implied:not(.selected) .arrival-name {
    opacity: .5;
}

.action-tile.arrival-tile.selected {
    background: rgba(122, 46, 29, .14);
    box-shadow: inset 0 0 0 2px #7a2e1d;
    z-index: 1;
}

.recruit-all .tile-bar .tile-bar-item {
    flex: 1 1 0;
    min-width: 0;
}

.recruit-row .order-stepper,
.recruit-row .order-stepper .mud-button-group-root {
    width: var(--recruit-control-width);
}

.recruit-row .order-stepper .bid-amount {
    flex: 1 1 auto;
}

/* The tiles of the bars as those of the combatants' orders (icon 20 px, the word at .62rem), only a little wider. */
.action-tile.tile-bar-item {
    min-width: 52px;
}

.action-tile.tile-bar-item .action-icon {
    margin-right: 0;
}

/* A combatant without any order: to decide, as a missing order elsewhere. */
.to-decide {
    color: #b8620a;
    font-style: italic;
}

.quick-protect .mud-button-label {
    gap: 4px;
}

.quick-protect {
    padding: 0 6px !important;
    min-height: 22px;
    line-height: 1.2 !important;
}

/* An order in a folded row: its icon, its target and the setting that matters; the line breaks between orders only. */
.combatant-summary.d-flex {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    row-gap: 0;
}

.summary-order {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.summary-order.faint {
    opacity: .45;
}

.summary-icon {
    width: 16px !important;
    height: 16px !important;
}

.order-count {
    font-size: .75rem;
    color: #9a8a70;
}

.combatant-body {
    padding: 2px 0 4px 26px;
}

.combatant-body .order-line {
    padding-left: 0;
}

/* The heading of a group of combatants: their strength, or their province, as the list is sorted. */
.combatant-group {
    margin-top: 10px;
    padding: 2px 2px 4px;
    font-weight: 600;
    border-bottom: 1px solid rgba(43, 34, 22, .25);
}

.action-icon {
    width: 18px !important;
    height: 18px !important;
}

.action-button .action-icon {
    margin-right: 4px;
}

/* A recruit, as a player in the diplomacy: its strength in its shield, its name beside it at a fixed width (a long name
   on two lines rather than pushing the buttons), then the choice. */
.recruit-name {
    flex: none;
    width: 140px;
    overflow: hidden;
}

.recruit-row .arrival-select {
    flex: 1 1 120px;
    min-width: 0;
}

.recruit-native {
    font-size: .8rem;
}

/* A recruit with an offer: a click on it chooses its arrival on the map, the row lit meanwhile. */
.recruit-pick {
    cursor: pointer;
}

.order-row.picking {
    background: var(--selection-background);
}

/* A target: its shape, its name, its owner's coat of arms and its wealth. */
.target-chip .mud-button-label {
    gap: 4px;
}

/* The amount offered, between narrow − and + buttons: not clickable. */
.bid-amount {
    min-width: 40px !important;
    pointer-events: none;
}

/* The arrival province of a recruit: owner's coat of arms, shape and name; the field grows to hold them. */
.arrival-option {
    min-height: 30px;
}


.arrival-option .no-owner {
    width: 24px;
    flex: none;
}

.arrival-select .mud-input-slot {
    display: flex !important;
    align-items: center;
    height: auto !important;
    min-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

.bid-offer {
    min-width: 40px !important;
    padding: 2px 6px !important;
}

.offer-icon {
    width: 24px !important;
    height: 24px !important;
}

.bid-step {
    min-width: 32px !important;
    padding: 2px 4px !important;
}

/* − value +: no line box of its own around the buttons. */
.order-stepper {
    display: inline-flex;
}

/* An offered combatant the player is not interested in. */
.struck {
    text-decoration: line-through;
}

/* The economy rows: shape (20 px), name (80 px) and coin (20 px) before the buttons; "Tout le reste" takes the same
   width so that its buttons stand under those of the provinces. */
.economy-name {
    width: 80px;
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.economy-head {
    width: 128px;
    flex: none;
}

/* On a wide screen a row may wrap; on a phone it holds on one line (below). */
.economy-row,
.diplomacy-row {
    flex-wrap: wrap;
}

.economy-result {
    white-space: nowrap;
}

/* The gold of a province's order, in a right-aligned column. */
.income {
    display: inline-block;
    min-width: 46px;
    text-align: right;
}

/* The gold of an economy order: in bold, green when it comes in, red when it goes out. */
.income-gain {
    font-weight: 700;
    color: #2e7d32;
}

.income-loss {
    font-weight: 700;
    color: #b3261e;
}

/* Between the gold and the wealth reached: a comma, plain and in the text's colour, close to the gold. */
.income-sep {
    margin-left: -4px;
    font-weight: 400;
}

/* The wealth a province reaches, behind an arrow: green and up when it rises, red and down when it falls. */
.wealth-change {
    display: inline-flex;
    align-items: center;
}

.wealth-change .wealth-arrow {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}

/* A line of the turn report that tells what did not happen (shown with « Masquer les actions annulées » unticked): in italics. */
.report-cancelled {
    font-style: italic;
}

/* The icon of a combatant's order in the turn report, in its colour, before the verb. */
.report-action {
    width: 16px !important;
    height: 16px !important;
    vertical-align: -3px;
    margin-right: 3px;
}

/* The icon of a relation in the turn report, in the colour of the diplomacy tab: war red, peace orange, alliance green. */
.report-relation.relation-war {
    color: #b3261e;
}

.report-relation.relation-peace {
    color: #cb7519;
}

.report-relation.relation-allied {
    color: #2e7d32;
}

/* The same triangle in the turn report, before an economy order and the wealth reached. */
.report-arrow {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.report-arrow.wealth-up {
    color: #2e7d32;
}

.report-arrow.wealth-down {
    color: #b3261e;
}

.wealth-change.wealth-up .wealth-arrow {
    color: #2e7d32;
}

.wealth-change.wealth-down .wealth-arrow {
    color: #b3261e;
}

.wealth-change.wealth-same .wealth-arrow {
    color: #cb7519;
}

.over-budget {
    color: #b3261e;
}

/* The diplomacy icons: the swords red, the dove green, the flag of peace orange. */
.relation-icon {
    width: 22px !important;
    height: 22px !important;
}

.relation-icon.war {
    color: #b3261e;
}

.relation-icon.alliance {
    color: #2e7d32;
}

/* Peace is orange (the blue was too close to the alliance green on small screens). */
.relation-icon.peace {
    color: #d9730d;
}

.relation-icon.small {
    width: 16px !important;
    height: 16px !important;
}

.veteran {
    font-size: .75rem;
    font-weight: 700;
    color: #8a5a00;
}

.wealth-coin {
    width: 20px;
    height: 20px;
    flex: none;
}

.wealth-coin text {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    fill: #fff;
    stroke: #1d160c;
    stroke-width: 2px;
    paint-order: stroke;
    stroke-linejoin: round;
}

.report-line {
    font-size: .9rem;
    padding: 2px 0;
}

/* A line of the turn report: the player's coat of arms, then the sentence. */
.report-event {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* The columns at the top of a line that wraps, beside its first line of text. */
.report-event > :not(:last-child) {
    margin-top: 1px;
}

/* Under its heading (a duel or a retreat under its attack, a province under its player's economy): shifted past the
   heading's columns, behind a thin guide, like a bullet under its line. */
.report-event.report-nested {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 2px solid rgba(120, 90, 50, 0.35);
}

.report-event .combatant-shield,
.report-shield-gap {
    width: 18px;
    height: 22px;
    flex: none;
}

@media (max-width: 600px) {
    .cendias-main {
        padding: 4px;
    }
}

.cendias-map {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 60px);
    display: block;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(43, 34, 22, .35);
}

.cendias-map .coast {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.cendias-map .province {
    cursor: pointer;
}

.cendias-map .province:hover path {
    filter: brightness(1.08);
}

/* The combatants on the map: the player's own can be clicked to give them their orders. */
.cendias-map .shield.own {
    cursor: pointer;
}

.cendias-map .shield.own:hover .shield-body {
    stroke-width: 2;
    filter: brightness(1.15);
}

/* The combatant whose orders are being edited: its shield blinks three times when it is chosen, as a province aimed at
   by an order, then keeps a light outline. */
.cendias-map .shield.editing {
    animation: shield-editing 1.2s ease-in-out both;
}

.cendias-map .shield.editing .shield-body {
    stroke: #fff3c4;
    stroke-width: 2.2;
}

@keyframes shield-editing {
    0%, 33%, 67%, 100% {
        opacity: 1;
    }

    16%, 50%, 84% {
        opacity: .2;
    }
}

.cendias-map .name {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    fill: #2b2216;
    stroke: #f2e6c8;
    stroke-width: 2.2px;
    paint-order: stroke;
    stroke-linejoin: round;
    text-anchor: middle;
    letter-spacing: .04em;
}

/* White with a dark outline: readable on every player's colour and on the gold coin. */
.cendias-map .wealth,
.cendias-map .strength {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    fill: #fff;
    stroke: #1d160c;
    stroke-width: 2.2px;
    paint-order: stroke;
    stroke-linejoin: round;
}

.order-line {
    min-height: 28px;
    padding-left: 18px;
}

.order-default {
    padding-left: 18px;
    min-height: 28px;
    line-height: 28px;
    color: #7a6a52;
    font-style: italic;
}

/* The relation under a private conversation: small and grey, the buttons beside it. */
.conversation-diplomacy {
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.conversation-diplomacy .diplo-status {
    color: #7a6a52;
}

/* After a title, as the orders' default above. */
.relations-hint {
    color: #7a6a52;
    font-style: italic;
    font-weight: normal;
}

.side-panel {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

/* The tabs of the orders stay in sight while the panel scrolls (MudTabs clips its content, which defeats sticky). */
.orders-tabs {
    overflow: visible !important;
}

.orders-tabs .mud-tabs-tabbar {
    position: sticky;
    top: -12px;
    z-index: 3;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 0 rgba(43, 34, 22, .15);
}

/* Once the panel is under the map (phone, tablet), the game fills the screen without the page scrolling: the map keeps
   the top part, always in sight to choose a target, and only the orders scroll under it (one scroll, never one inside
   another). The map can be made bigger by its own button. */
@media (max-width: 959.98px) {
    .game-layout {
        height: calc(100dvh - 56px);
        flex-direction: column;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .game-layout > .mud-grid-item {
        flex: none;
        max-width: 100%;
        padding: 0 0 4px 0 !important;
    }

    .game-layout > .mud-grid-item:last-child {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: 0 !important;
    }

    .game-layout .side-panel {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* The map against the zoom buttons on the right, leaving the room on its left to the player put forward and the
       province selected, rather than over the map. */
    .game-layout .cendias-map {
        width: auto;
        max-width: 100%;
        height: 38dvh;
        max-height: none;
        margin: 0 48px 0 auto;
    }

    .game-layout .map-frame.large .cendias-map {
        height: 68dvh;
        margin: 0 auto;
    }

    /* Folded to its heading, the map left visible; a tap on the heading unfolds it. */
    .map-highlight.folded .map-highlight-more {
        display: none;
    }

    .map-highlight-head,
    .province-details-name {
        cursor: pointer;
    }

    .orders-tabs .mud-tabs-tabbar {
        top: -8px;
    }

    /* Narrower tabs, so that all of them fit on a phone without scroll arrows, sharing the whole width so as to be as
       wide as possible under the finger (the panel's margin narrowed for them). */
    .orders-tabs .mud-tab {
        padding: 6px 4px !important;
        width: 100%;
    }

    .orders-tabs .mud-tabs-tabbar-wrapper {
        width: 100%;
    }

    .orders-tabs .mud-tabs-tabbar-wrapper > .d-inline-block {
        flex: 1 1 0;
    }

    .side-panel.pa-3 {
        padding: 8px !important;
    }

    .orders-tabs .tab-icon {
        width: 28px !important;
        height: 28px !important;
    }

    /* A combatant opened from the map, or a row back from a choice on the map, is brought into view below the tabs,
       not under them. */
    .combatant-row,
    .recruit-row {
        scroll-margin-top: 60px;
    }
}

/* The button that makes the map bigger: on a phone only, where the map shares the screen with the orders. On a large
   screen, the heading of the box over the map only moves it (it does not fold it). */
@media (min-width: 960px) {
    .map-size {
        display: none !important;
    }

    .map-highlight-head,
    .province-details-name {
        cursor: move;
    }

    /* The panel beside the map takes the whole height of the screen, even when its tab has little to show. */
    .game-layout .side-panel {
        height: calc(100vh - 60px);
    }

    /* The arrow that folds the box is a phone's: the box is always unfolded here. */
    .map-highlight-fold {
        display: none !important;
    }
}

/* A phone held sideways: the map on the left, as tall as the screen, the orders scrolling on the right (still one
   scroll); the portrait layout above is left as it is. */
@media (max-width: 959.98px) and (orientation: landscape) {
    .cendias-main:has(.game-layout) {
        padding-bottom: 4px !important;
    }

    .game-layout {
        flex-direction: row;
    }

    .game-layout > .mud-grid-item {
        height: 100%;
        padding: 0 !important;
    }

    .game-layout > .mud-grid-item:first-child {
        flex: 0 0 auto;
        max-width: 55%;
        padding-right: 6px !important;
        overflow-y: auto;
    }

    .game-layout > .mud-grid-item:last-child {
        flex: 1 1 0;
        min-width: 0;
    }

    .game-layout .cendias-map,
    .game-layout .map-frame.large .cendias-map {
        height: calc(100dvh - 64px);
        margin: 0 auto;
    }

    /* A replay puts its bar beside the map, which keeps the whole height: the steps of the turn in a narrow column, its
       controls on two lines. The map's column widens to make room for it. */
    .game-layout > .mud-grid-item:first-child:has(.turn-replay) {
        max-width: 65%;
    }

    .game-layout .turn-replay {
        display: flex;
        align-items: stretch;
        gap: 6px;
        height: calc(100dvh - 64px);
    }

    .game-layout .turn-replay .map-frame {
        flex: 0 0 auto;
    }

    .game-layout .turn-replay .cendias-map {
        height: calc(100dvh - 64px);
        max-height: none;
        margin: 0;
    }

    .game-layout .turn-replay .replay-bar {
        flex: 1 1 0;
        min-width: 180px;
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }

    .game-layout .turn-replay .replay-caption {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .game-layout .turn-replay .replay-controls {
        flex-wrap: wrap;
    }

    .game-layout .turn-replay .replay-progress {
        order: 1;
        flex-basis: 100%;
        margin: 2px 0 0;
    }

    .map-size {
        display: none !important;
    }
}

.scoreboard td,
.scoreboard th {
    padding: 4px 6px !important;
}

.scoreboard th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.scoreboard th.sortable:hover {
    color: #7a2e1d;
}

.scoreboard tr.eliminated {
    opacity: .5;
}

.scoreboard tr.me td {
    font-weight: 600;
    background: rgba(122, 46, 29, .06);
}

/* A row puts its player forward on the map. */
.scoreboard tr.highlightable {
    cursor: pointer;
}

.scoreboard tr.highlighted td {
    background: var(--selection-background);
}

.scoreboard-name > span {
    overflow: hidden;
    max-width: 120px;
}

/* A game of the home page, tapped anywhere. */
.game-card {
    cursor: pointer;
}

.game-card:hover {
    background-color: #fffaf0;
}

/* Shortened headers, shown on a phone only. */
.scoreboard .label-short {
    display: none;
}

@media (max-width: 600px) {
    .scoreboard td,
    .scoreboard th {
        padding: 4px 3px !important;
    }

    .scoreboard .label-long {
        display: none;
    }

    .scoreboard .label-short {
        display: inline;
    }

    /* Room for the widest title ("Vicomtesse") and fief ("de Tarmolde"), each on its line. */
    .scoreboard-name > span {
        max-width: 80px;
    }
}

.bar-link {
    color: #f2e6c8 !important;
    white-space: nowrap;
}

/* The time left before the deadline, beside the bell. */
.turn-countdown {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 4px;
    color: #f2e6c8;
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The last 24 hours: in red, light enough for the dark bar. */
.turn-countdown.soon {
    color: #ff9e8a;
}

/* The last 3 hours: blinking, except for those who asked for less motion. */
.turn-countdown.urgent {
    animation: countdown-blink 1.2s steps(2, jump-none) infinite;
}

@keyframes countdown-blink {
    to {
        opacity: .25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .turn-countdown.urgent {
        animation: none;
    }
}

/* The "?" of the about page (credits), as narrow as its sign. */
.bar-help {
    min-width: 32px !important;
    font-weight: 700 !important;
}

.province-shape {
    flex: none;
    vertical-align: middle;
}

.gold-forecast > div {
    min-width: 110px;
}

.map-frame {
    position: relative;
}

.map-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

/* The player put forward on the map: their name in the top left corner, a cross to see everyone again; below it, the
   province selected, scrolling within the map when it holds many combatants. */
.map-highlight {
    position: absolute;
    /* Where it was dragged (see cendiasMapGestures), its heading kept on the map when the map shrinks (a phone turned). */
    top: clamp(0px, var(--box-y, 8px), calc(100% - 40px));
    left: clamp(0px, var(--box-x, 8px), calc(100% - 80px));
    max-width: min(300px, calc(100% - 64px));
    max-height: calc(100% - 16px);
    overflow-y: auto;
    border-radius: 6px;
    /* Light enough to make out the map under it, its text still readable. */
    background: rgba(251, 246, 232, .85);
    box-shadow: 0 1px 3px rgba(43, 34, 22, .35);
    z-index: 1;
}

/* Dragged by its heading: a finger there moves the box, not the page. */
.map-highlight-head,
.province-details-name {
    touch-action: none;
    user-select: none;
}

.map-highlight-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 0 8px;
    font-weight: 600;
}

.province-details {
    padding: 0 8px 6px;
    font-size: .8rem;
    line-height: 1.35;
}

.province-details-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.province-details-section,
.province-details-neighbors {
    margin-top: 4px;
}

/* A castle on the map, behind the wealth coin: dark ink, a light outline to read on any province. */
.castle {
    fill: #2b2216;
    fill-opacity: .85;
    stroke: #f3e9d2;
    stroke-width: .8;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* The starting land of a player, worth Prestige to whoever holds it: the castle of the map beside its name. */
.province-details-castle {
    flex: none;
    width: 16px;
    height: 16px;
}

/* A combatant of another player than the province's owner. */
.province-details .foreign {
    font-style: italic;
    color: #7d7466;
}

.province-details-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

/* The relations of the player put forward: per relation, its symbol then the players' shields, wrapping at the width
   the rest of the box takes (rather than widening the box over the map). */
.player-relations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 3px;
    margin-top: 2px;
    width: 0;
    min-width: 100%;
}

.player-relations > .relation-slot {
    display: inline-flex;
    flex: none;
    width: 16px;
    margin-right: 3px;
}

.player-relation {
    display: inline-flex;
    align-items: center;
}

.player-relation .combatant-shield {
    width: 18px;
    height: 22px;
}

.player-relation .combatant-shield .blazon {
    stroke-width: 20px;
}

.province-details-row .relation-slot {
    display: inline-flex;
    flex: none;
    width: 16px;
}

.province-details-row .combatant-shield {
    width: 18px;
    height: 22px;
}

/* At this size, a thinner outline, or it covers the finer coats of arms (the unicorn). */
.province-details-neighbors .combatant-shield .blazon {
    stroke-width: 20px;
}

/* One finger scrolls the page, even over the map; the pinch is the map's own (it zooms the map, not the page). */
.cendias-map {
    touch-action: pan-x pan-y;
}

.cendias-map.zoomed {
    cursor: grab;
}

/* Shown a moment when one finger slides on the zoomed map. */
.map-frame.two-fingers::after {
    content: "Deux doigts pour déplacer la carte";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 6px;
    background: rgba(43, 34, 22, .45);
    color: #fff;
    font-weight: 500;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

/* The replay of a turn on the map: the map leaves room for the controls under it. */
.turn-replay .cendias-map {
    max-height: calc(100vh - 230px);
}

.cendias-map .owner {
    transition: fill .6s ease, fill-opacity .6s ease;
}

.replay-bar {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f6eedb;
    box-shadow: 0 1px 3px rgba(43, 34, 22, .3);
}

/* The whole game replayed: which turn, and the way to the others. */
.replay-turns {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.replay-turn {
    font-weight: 600;
    color: #7a2e1d;
}

.replay-turn-count {
    font-size: .75rem;
    color: #6b5a3e;
}

.replay-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.replay-phase {
    font: inherit;
    font-size: .75rem;
    padding: 1px 8px;
    border: 1px solid #b9a37a;
    border-radius: 10px;
    background: transparent;
    color: #6b5a3e;
    cursor: pointer;
}

.replay-phase.done {
    background: #e6d6b3;
}

.replay-phase.current {
    background: #7a2e1d;
    border-color: #7a2e1d;
    color: #fff;
}

/* A fixed height, so that the page does not jump from one step to the next. */
.replay-caption {
    height: 6.6em;
    overflow-y: auto;
    margin: 4px 0;
}

.replay-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.replay-progress {
    flex: 1;
    min-width: 60px;
    margin: 0 6px;
    accent-color: #7a2e1d;
}

.cendias-map .replay-highlight {
    stroke-linejoin: round;
    animation: replay-pulse 1.1s ease-in-out infinite alternate;
}

/* The colour of a mark: the outline of a province, the text of a label. */
.cendias-map .replay-highlight.mark-gain { stroke: #2e7d32; }
.cendias-map .replay-highlight.mark-loss { stroke: #b3261e; }
.cendias-map .replay-highlight.mark-battle { stroke: #d84315; }
.cendias-map .replay-highlight.mark-taken { stroke: #f2e6c8; }
.cendias-map .replay-highlight.mark-neutral { stroke: #6b5a3e; }
.cendias-map .replay-highlight.mark-info { stroke: #1f5f9e; }
.cendias-map .replay-label.mark-gain { fill: #2e7d32; }
.cendias-map .replay-label.mark-loss { fill: #b3261e; }
.cendias-map .replay-label.mark-battle { fill: #8e1b12; }
.cendias-map .replay-label.mark-taken { fill: #2b2216; }
.cendias-map .replay-label.mark-neutral { fill: #4a3f2c; }
.cendias-map .replay-label.mark-info { fill: #1f5f9e; }

.cendias-map .replay-label {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    stroke: #fffaf0;
    stroke-width: 3px;
    paint-order: stroke;
    stroke-linejoin: round;
    animation: replay-rise .45s ease-out both;
}

.cendias-map .arrow-draw {
    stroke-dasharray: 1;
    animation: replay-draw .5s ease-out both;
}

/* The province aimed at by an order just given: it blinks three times, then fades out. */
.cendias-map .target-flash {
    pointer-events: none;
    opacity: 0;
    animation: target-flash 1.2s ease-in-out both;
}

@keyframes target-flash {
    0%, 33%, 67% {
        opacity: 0;
    }

    16%, 50%, 84% {
        opacity: .75;
    }

    100% {
        opacity: 0;
    }
}

.cendias-map .arrow-fade {
    animation: replay-appear .5s ease-out both;
}

.cendias-map .shield.arriving {
    animation: replay-slide .7s ease-in-out both;
}

.cendias-map .shield.recruited {
    transform-box: fill-box;
    transform-origin: center;
    animation: replay-pop .5s ease-out both;
}

.cendias-map .shield.falling {
    animation: replay-fall 1s ease-in forwards;
}

.cendias-map .shield.weakened .strength {
    fill: #ffb4a8;
}

@keyframes replay-pulse {
    from { stroke-opacity: .35; }
    to { stroke-opacity: 1; }
}

@keyframes replay-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes replay-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes replay-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes replay-slide {
    from { transform: translate(var(--dx, 0), var(--dy, 0)); }
    to { transform: translate(0, 0); }
}

@keyframes replay-pop {
    from { opacity: 0; transform: scale(2.2); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes replay-fall {
    0% { opacity: 1; }
    40% { opacity: 1; filter: brightness(.6) sepia(1) hue-rotate(-30deg) saturate(4); }
    100% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
    .cendias-map .target-flash {
        display: none;
    }

    .cendias-map .replay-highlight,
    .cendias-map .replay-label,
    .cendias-map .arrow-draw,
    .cendias-map .arrow-fade,
    .cendias-map .shield.arriving,
    .cendias-map .shield.recruited,
    .cendias-map .shield.falling,
    .cendias-map .shield.editing {
        animation: none;
    }

    .cendias-map .shield.falling {
        opacity: .3;
    }

    .cendias-map .owner {
        transition: none;
    }
}

/* The rules (Pages/Rules): Markdown turned into HTML. */
.rules-text {
    font-size: .95rem;
    line-height: 1.5;
}

.rules-text p,
.rules-text ul,
.rules-text ol,
.rules-text table,
.rules-text blockquote {
    margin: 0 0 .75em;
}

.rules-text ul,
.rules-text ol {
    padding-left: 1.4em;
}

.rules-text li {
    margin-bottom: .25em;
}

.rules-text h3 {
    font-family: Cinzel, Georgia, serif;
    font-size: 1rem;
    margin: 1em 0 .5em;
}

.rules-text blockquote {
    border-left: 3px solid #7a2e1d;
    background: #f3ead3;
    padding: .5em .75em;
}

.rules-text table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.rules-text th,
.rules-text td {
    border: 1px solid #d6c7a1;
    padding: .3em .5em;
    text-align: left;
    vertical-align: top;
}

.rules-text th {
    background: #efe3c4;
}

/* The top bar in leather: grain drawn from SVG noise (no image file), a sheen, darker edges and a stitched seam. */
.cendias-bar {
    background-color: #3d3222 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .55 0 0 .55 0 -.23'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 -1.4 0 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 60% 140% at 30% 0%, rgba(255, 225, 170, .14), transparent 70%),
        linear-gradient(180deg, #4a3c28 0%, #3d3222 55%, #2e2518 100%) !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .45), 0 2px 6px rgba(20, 14, 6, .45) !important;
}

.cendias-bar::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 4px;
    border-bottom: 1px dashed rgba(242, 230, 200, .45);
    pointer-events: none;
}

/* Filled buttons in the same leather as the top bar, same brown; a disabled button stays flat. */
.mud-button-filled-primary:not(:disabled) {
    background-color: #3d3222 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .55 0 0 .55 0 -.23'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 -1.4 0 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 225, 170, .14), transparent 70%),
        linear-gradient(180deg, #4a3c28 0%, #3d3222 55%, #2e2518 100%) !important;
    color: #f8ecd4 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(20, 14, 6, .45) !important;
    outline: 1px dashed rgba(242, 230, 200, .5);
    outline-offset: -4px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.mud-button-filled-primary:not(:disabled):hover {
    background-color: #463a28 !important;
    filter: brightness(1.08);
}

/* The answers to a contract in the same leather, dyed: accept green, refuse red, counter-propose orange. */
.mud-button-filled-success:not(:disabled),
.mud-button-filled-error:not(:disabled),
.mud-button-filled-warning:not(:disabled) {
    color: #f8ecd4 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .35), 0 1px 3px rgba(20, 14, 6, .45) !important;
    outline: 1px dashed rgba(242, 230, 200, .5);
    outline-offset: -4px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.mud-button-filled-success:not(:disabled) { background: linear-gradient(180deg, #4f8a35 0%, #3f7a2a 55%, #2f5e1f 100%) !important; }
.mud-button-filled-error:not(:disabled) { background: linear-gradient(180deg, #d9362b 0%, #c0221a 55%, #961711 100%) !important; }
.mud-button-filled-warning:not(:disabled) { background: linear-gradient(180deg, #c9842a 0%, #b8730f 55%, #93590a 100%) !important; }

.mud-button-filled-success:not(:disabled):hover,
.mud-button-filled-error:not(:disabled):hover,
.mud-button-filled-warning:not(:disabled):hover {
    filter: brightness(1.08);
}

/* The orders tabs look like the buttons next to them: the open one in leather with its stitched seam, the others outlined in brown. */
.orders-tabs .mud-tab {
    min-height: 36px;
    margin: 4px 0 6px -1px;
    border: 1px solid #7a2e1d;
    border-radius: 0;
    color: #7a2e1d !important;
    opacity: 1;
    background: transparent;
}

.orders-tabs .mud-tab:hover {
    background: rgba(122, 46, 29, .08);
}

.orders-tabs .mud-tab.mud-tab-active {
    border-color: #3d3222;
    background-color: #3d3222;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .55 0 0 .55 0 -.23'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 -1.4 0 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 225, 170, .14), transparent 70%),
        linear-gradient(180deg, #4a3c28 0%, #3d3222 55%, #2e2518 100%);
    color: #f8ecd4 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(20, 14, 6, .45);
    outline: 1px dashed rgba(242, 230, 200, .5);
    outline-offset: -4px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.orders-tabs .mud-tab .mud-icon-root,
.orders-tabs .mud-tab svg {
    color: inherit !important;
    fill: currentColor;
}

.orders-tabs .mud-tab-slider {
    display: none;
}

/* Joined like a button group: only the two ends are rounded. */
.orders-tabs .d-inline-block:first-child > .mud-tab {
    margin-left: 0;
    border-radius: 4px 0 0 4px;
}

.orders-tabs .d-inline-block:has(+ .mud-tab-slider) > .mud-tab {
    border-radius: 0 4px 4px 0;
}

.orders-tabs .mud-tab.mud-tab-active {
    position: relative;
    z-index: 1;
}

/* The two screens of the combatants, Simple | Détaillé, as narrow tabs in the style of the orders' tabs, on the line of
   the tools. */
.mode-tabs {
    display: inline-flex;
}

.mode-tab {
    flex: none;
    min-height: 30px;
    margin-left: -1px;
    padding: 4px 8px;
    border: 1px solid #7a2e1d;
    background: transparent;
    color: #7a2e1d;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.mode-tab:first-child {
    margin-left: 0;
    border-radius: 4px 0 0 4px;
}

.mode-tab:last-child {
    border-radius: 0 4px 4px 0;
}

.mode-tab:hover {
    background: rgba(122, 46, 29, .08);
}

.mode-tab.active {
    position: relative;
    z-index: 1;
    border-color: #3d3222;
    background-color: #3d3222;
    background-image:
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 225, 170, .14), transparent 70%),
        linear-gradient(180deg, #4a3c28 0%, #3d3222 55%, #2e2518 100%);
    color: #f8ecd4;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(20, 14, 6, .45);
    outline: 1px dashed rgba(242, 230, 200, .5);
    outline-offset: -4px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    cursor: default;
}

/* The chronicle in the message tabs: an icon as tall as the players' shields. */
.chronicle-icon {
    width: 26px !important;
    height: 29px !important;
}

/* The box to write recalls the recipient: the chronicle's horn, a little smaller. */
.send-chronicle-icon {
    width: 20px !important;
    height: 22px !important;
}

/* The messages scroll in their own box on a computer, as tall as the panel leaves it under the tabs and over the box to
   write; on a phone, where the panel is under the map, with the page. */
.messages-list {
    max-height: max(16rem, calc(100vh - 310px));
    overflow-y: auto;
}

/* Where the messages not read on opening the conversation start: a thin red line with its word. */
.unread-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
    color: #b3261e;
    font-size: 12px;
}

.unread-divider::before,
.unread-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid rgba(179, 38, 30, .5);
}

@media (max-width: 959.98px) {
    .messages-list {
        max-height: none;
        overflow-y: visible;
    }
}

/* One chapter per turn: its heading folds it, then says how many messages it holds. */
.message-chapter-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    margin: 2px 0 6px;
    padding: 2px 0;
    border: none;
    border-bottom: 1px solid rgba(43, 34, 22, .18);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.message-chapter-count {
    font-weight: 400;
    color: rgba(43, 34, 22, .6);
}

.message {
    margin-bottom: 8px;
}

/* A message read, folded to one line: who, the start of the text cut by the page, its length when long, the hour. */
.message-folded {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
    border-radius: 4px;
}

.message-folded:hover {
    background-color: rgba(43, 34, 22, .05);
}

.message-folded .message-author {
    flex: 0 1 auto;
    max-width: 40%;
}

.message-author {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-excerpt {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: rgba(43, 34, 22, .7);
}

.message-meta {
    flex: none;
    display: inline-flex;
    gap: 6px;
    font-size: 12px;
    color: rgba(43, 34, 22, .6);
}

.message-length::after {
    content: " ·";
}

/* An unfolded message: its heading on one line, the buttons at its right. */
.message-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 6px;
    min-width: 0;
}

.message-actions {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.message-text {
    white-space: pre-wrap;
}

/* A long message unfolded keeps its heading in sight while it is read: who speaks, and the way to fold it or skip it. */
.message.long > .message-head {
    position: sticky;
    top: var(--message-stick, -8px);
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/* Out of the game (« HRP »), more discreet than the characters' speech. */
.message.ooc .message-text,
.message.ooc .message-excerpt {
    font-size: 12.5px;
    color: rgba(43, 34, 22, .6);
}

.message-fold-end {
    margin-top: 2px;
}

/* The box to write, stuck at the bottom of the panel: the messages scroll above it. */
.message-composer {
    position: sticky;
    bottom: -12px;
    z-index: 2;
    padding: 6px 0;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 -1px 0 rgba(43, 34, 22, .12);
}

.message-composer .composer-text {
    flex: 1 1 auto;
}

.message-composer .composer-text .mud-input-control-input-container,
.message-composer .composer-text {
    margin-top: 0;
}

/* While one writes, a large box: the messages read above matter less then. */
.message-composer.writing .composer-text textarea {
    min-height: 11rem;
}

/* A long draft scrolls inside its box rather than pushing everything out of the screen; at rest, a few lines only,
   the messages keeping the room. */
.message-composer .composer-text textarea {
    max-height: 50vh;
    overflow-y: auto !important;
}

.message-composer:not(.writing) .composer-text textarea {
    max-height: 4.5em;
}

/* A contract of the turn on a row of the orders: the paperclip in the colour of where it stands. */
.contract-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.contract-mark .contract-mark-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.contract-mark-accepted { color: #3f7a2a; }
.contract-mark-pending { color: #b8730f; }
.contract-mark-received { color: #8a8378; }
.contract-mark-refused { color: #c0221a; }

/* On the corner of a shield: a small round badge, the row keeping its width. */
.shield-with-mark {
    position: relative;
}

.contract-mark-overlay {
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px currentColor;
}

.contract-mark-overlay .contract-mark-icon {
    font-size: .75rem;
    width: .75rem;
    height: .75rem;
}

/* An item of a contract's list: the land's shape or the player's shield, the name, the owner. */
.contract-choice {
    width: 100%;
}


/* The paperclip of an accepted contract in the report, as wide as the shields of the lines below it. */
.report-shields .contract-clip {
    width: 18px;
    height: 18px;
    font-size: 18px;
    flex: none;
}

/* The contract card in the colour of where it stands: a thick edge at its left and its title in that colour. */
.contract-card.contract-accepted { border-left: 4px solid #3f7a2a; }
.contract-card.contract-refused { border-left: 4px solid #c0221a; }
.contract-card.contract-proposed { border-left: 4px solid #b8730f; }
.contract-card.contract-accepted .contract-title { color: #3f7a2a; }
.contract-card.contract-refused .contract-title { color: #c0221a; }
.contract-card.contract-proposed .contract-title { color: #8a5409; }

/* The kinds of a group of commitments, under the groups, set in a little behind a thin guide. */
.contract-kinds {
    margin-top: 6px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 2px solid rgba(120, 90, 50, 0.35);
}

/* The terms of the contract card: bullets inside the card. */
.contract-terms {
    margin: 4px 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

/* At the right of the box, one above the other: the contract to attach, then the send button. */
.composer-buttons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.composer-attach {
    padding: 2px !important;
}

.composer-send {
    margin-bottom: 2px;
    min-width: 0 !important;
    padding: 3px 8px !important;
}

/* The arrow over the recipient, one above the other. */
.composer-send-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 0;
}

/* Nothing to send: the recipient greys out with the button. */
.mud-button-root:disabled .composer-send-icons svg {
    filter: grayscale(1);
    opacity: 0.5;
}

/* The way to see the map again while writing: on a phone held upright only, where the map gives way. */
.composer-map {
    display: none;
}

@media (max-width: 959.98px) {
    .message-composer {
        bottom: -8px;
    }

    /* Under the orders tabs and the conversation buttons, both stuck at the top of the panel. */
    .orders-tabs .messages-list {
        --message-stick: 86px;
    }

    .message-folded .message-time {
        display: none;
    }

    .message-folded .message-length::after {
        content: none;
    }
}

@media (max-width: 959.98px) and (orientation: portrait) {
    .game-layout:has(.message-composer.writing:not(.peek)) > .mud-grid-item:first-child {
        display: none;
    }

    .message-composer.writing .composer-map {
        display: block;
    }

    /* While one writes, the messages above give way too (the map can be shown again, not them): the box takes the
       room, most of what the keyboard leaves. */
    .mud-tab-panel:has(.message-composer.writing) .messages-list {
        display: none !important;
    }

    .message-composer.writing .composer-text textarea {
        min-height: 45dvh;
        max-height: 60dvh;
    }
}

/* The unread badge of the messages tab sits on the corner of the icon, over the leather. */
.unread-badge {
    display: inline-flex !important;
    line-height: 0;
}

.unread-badge .mud-badge {
    box-shadow: 0 0 0 1px #fbf6e8;
    line-height: 1;
    height: 14px;
    min-width: 14px;
    padding: 2px 4px;
    font-size: 10px;
    /* Kept inside the tab, which clips whatever sticks out. */
    translate: -7px 5px;
}

/* The conversation tabs of the messages are joined like the orders tabs above them: only the two ends are rounded. A bot is told by the tooltip. */
.message-tabs {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
}

.message-tabs > .mud-badge-root {
    display: inline-flex !important;
    margin-left: -1px;
}

.message-tabs > .mud-badge-root:first-child {
    margin-left: 0;
}

.message-tabs .mud-button-root {
    min-width: 44px;
    min-height: 40px;
    border-radius: 0;
}

.message-tabs > .mud-badge-root:first-child .mud-button-root {
    border-radius: 4px 0 0 4px;
}

.message-tabs > .mud-badge-root:last-child .mud-button-root {
    border-radius: 0 4px 4px 0;
}

.message-tabs .mud-button-filled {
    position: relative;
    z-index: 1;
}

/* On a phone, the nine conversations hold on one line: narrower and lower buttons. */
@media (max-width: 959.98px) {
    .message-tabs .mud-button-root {
        min-width: 36px;
        min-height: 34px;
        padding: 2px 6px;
    }
}

/* The seats of a new local game: the player, who plays the seat, a human's gender, the button to remove it, in columns
   under a single row of labels. */
.seat-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 170px) minmax(0, 170px) auto;
    align-items: center;
    column-gap: 8px;
}

/* On a phone, the shield alone says the seat: the two choices keep the room to be read. */
@media (max-width: 599.98px) {
    .seat-row {
        grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .seat-row .seat-name {
        display: none;
    }
}

/* The messages to a bot: icons only, buttons no wider than their icon, joined like the conversation tabs (only the two
   ends rounded). */
.bot-options {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
}

.bot-options .mud-button-root {
    min-width: 0;
    min-height: 34px;
    padding: 3px 6px;
    margin-left: -1px;
    border-radius: 0;
}

.bot-options .mud-button-root:first-child {
    margin-left: 0;
    border-radius: 4px 0 0 4px;
}

.bot-options .mud-button-root:last-child {
    border-radius: 0 4px 4px 0;
}

.bot-options .mud-button-root:only-child {
    border-radius: 4px;
}

.bot-options .mud-button-filled {
    position: relative;
    z-index: 1;
}

/* The unread badge of a conversation: above the neighbouring buttons and kept inside its own, like the one of the messages tab. */
.message-tabs .mud-badge {
    z-index: 3;
    box-shadow: 0 0 0 1px #fbf6e8;
    height: 14px;
    min-width: 14px;
    padding: 2px 4px;
    font-size: 10px;
    translate: -7px 5px;
}

/* The chosen diplomacy and economy tiles in leather of their own colour, that of their icons: war and pillage red,
   alliance and enrichment green, peace and tax orange. */
.action-tile.diplo-tile.chosen.diplo-war:not(:disabled),
.action-tile.economy-tile.chosen.economy-pillage:not(:disabled) {
    background-color: #9a2d21 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 -1.4 0 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 235, 200, .18), transparent 70%),
        linear-gradient(180deg, #b0392b 0%, #9a2d21 55%, #74201a 100%) !important;
    color: #fff6e0 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(20, 14, 6, .45) !important;
    outline: 1px dashed rgba(255, 246, 224, .55);
    outline-offset: -4px;
}

.action-tile.diplo-tile.chosen.diplo-war:not(:disabled):hover,
.action-tile.economy-tile.chosen.economy-pillage:not(:disabled):hover {
    background-color: #a33426 !important;
    filter: brightness(1.08);
}

.action-tile.diplo-tile.chosen.diplo-alliance:not(:disabled),
.action-tile.economy-tile.chosen.economy-enrich:not(:disabled) {
    background-color: #3f7d3a !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 -1.4 0 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 235, 200, .18), transparent 70%),
        linear-gradient(180deg, #4f8f48 0%, #3f7d3a 55%, #2f6129 100%) !important;
    color: #fff6e0 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(20, 14, 6, .45) !important;
    outline: 1px dashed rgba(255, 246, 224, .55);
    outline-offset: -4px;
}

.action-tile.diplo-tile.chosen.diplo-alliance:not(:disabled):hover,
.action-tile.economy-tile.chosen.economy-enrich:not(:disabled):hover {
    background-color: #478640 !important;
    filter: brightness(1.08);
}

.action-tile.diplo-tile.chosen.diplo-peace:not(:disabled),
.action-tile.economy-tile.chosen.economy-tax:not(:disabled) {
    background-color: #cb7519 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 -1.4 0 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 235, 200, .18), transparent 70%),
        linear-gradient(180deg, #e08a2c 0%, #cb7519 55%, #a85b10 100%) !important;
    color: #fff6e0 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(20, 14, 6, .45) !important;
    outline: 1px dashed rgba(255, 246, 224, .55);
    outline-offset: -4px;
}

.action-tile.diplo-tile.chosen.diplo-peace:not(:disabled):hover,
.action-tile.economy-tile.chosen.economy-tax:not(:disabled):hover {
    background-color: #d8802a !important;
    filter: brightness(1.08);
}

/* The filter of the bulk buttons: a funnel on a small square button. */
.bulk-filter {
    min-width: 36px !important;
    padding: 2px 8px !important;
}

.filter-icon {
    width: 20px !important;
    height: 20px !important;
}

/* The trash: red like the war, and a little larger, its drawing being lighter than the funnel's. */
.delete-icon {
    width: 24px !important;
    height: 24px !important;
    color: #b3261e;
}

.mud-button-root:disabled .delete-icon {
    color: inherit;
}

/* The robot of a bot's conversation, over the bottom left of its shield (the unread badge is at the top right). */
.thread-shield {
    position: relative;
    display: inline-flex;
}

.thread-bot {
    position: absolute;
    left: -6px;
    bottom: -4px;
    width: 14px !important;
    height: 14px !important;
    padding: 1px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}

/* A trash beside a line (a message, a game): small and discreet, red when pointed at, as the orders' trash. */
.mud-button-root.trash-button {
    min-width: 0;
    padding: 0 4px;
}

.trash-icon {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.55;
}

.trash-button:hover .trash-icon {
    color: #b3261e;
    opacity: 1;
}

/* A filled button has no border where an outlined one has 1 px: keep the filter the same size once ticked. */
.mud-button-filled.bulk-filter {
    border: 1px solid transparent;
}

/* In the orders tabs the badge belongs to the tab, not to its icon: in the top-right corner of the tab. */
.orders-tabs .mud-tab {
    position: relative;
}

.orders-tabs .unread-badge {
    position: static;
}

/* "Tous" at the start of the recruits' bulk line, as wide as a recruit's shield and name so that the buttons line up with theirs. */
.bulk-recruit-head {
    min-width: 174px;
}

/* The recruits' rows as tall as the others: the shield without the line gap of its tooltip, smaller icons in the − + × buttons. */
.recruit-head .mud-tooltip-root {
    display: inline-flex;
    line-height: 0;
}

.bid-step .mud-icon-root,
.bid-offer .mud-icon-root {
    width: 20px;
    height: 20px;
}

.bid-offer .offer-icon {
    width: 22px !important;
    height: 22px !important;
}

/* The buttons of a recruit's row all as tall as the − + ones, offered or not. */
.bid-offer,
.bid-step,
.bid-amount {
    box-sizing: border-box;
    height: 33px !important;
    min-height: 33px !important;
}

/* On a phone, short of room, the recruit's name narrower (on two lines if need be): the buttons stay on its line. */
@media (max-width: 600px) {
    .recruit-name {
        width: 90px;
    }
}

/* The menu of the games in the top bar: the game on screen (name, then turn and deadline), or "Parties". */
.games-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    margin-left: 12px;
    padding: 2px 4px 2px 8px;
    border: 1px solid rgba(242, 230, 200, .35);
    border-radius: 4px;
    background: transparent;
    color: #f2e6c8;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.games-menu-button:hover {
    background: rgba(242, 230, 200, .08);
}

.games-menu {
    min-width: 0;
}

.games-menu-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.games-menu-name,
.games-menu-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.games-menu-name {
    font-size: .85rem;
    font-weight: 500;
}

.games-menu-line {
    font-size: .7rem;
    opacity: .8;
}

.games-menu-item-line {
    margin-left: 8px;
    font-size: .75rem;
    color: #7a6a52;
}

/* On a phone, with a game on screen, its name takes the room of the title (the menu leads back to the games). */
@media (max-width: 600px) {
    .cendias-title.with-game {
        display: none;
    }

    .games-menu-button {
        margin-left: 0;
        max-width: 58vw;
    }
}

/* The coat of arms of the player in the top bar, before the title. */
.bar-blazon {
    display: inline-flex;
    margin-right: 8px;
}

/* "Tous" at the start of the diplomacy's bulk line, as wide as a player's shield and name so that the button lines up with theirs. */
.bulk-diplo-head {
    width: 148px;
    flex: none;
}

/* A player's name in the diplomacy tab: a fixed width, so that a long name goes on two lines instead of pushing the buttons. */
.diplomacy-name {
    flex: none;
    width: 110px;
    overflow: hidden;
}

/* The order of action at equal strength: shields joined by arrows, wrapping (the names in the tooltips). */
.action-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    font-size: .875rem;
}

.action-order-player {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.action-order-arrow {
    opacity: .6;
}

/* On a phone, short of room, the players' names give way to their shields (the name stays in the tooltip). */
@media (max-width: 600px) {
    .player-name {
        display: none !important;
    }

    .bulk-diplo-head {
        width: 30px;
        padding-left: 0;
    }

    /* Nine shields and their arrows on one line. */
    .action-order {
        gap: 2px 1px;
    }

    .action-order .combatant-shield.small {
        width: 22px;
        height: 26px;
    }
}

/* On a phone the top bar and the report header are short of room: smaller links and title, the replay button as an icon. */
@media (max-width: 600px) {
    .cendias-bar .bar-link {
        padding: 0 5px !important;
        min-width: 0 !important;
        font-size: .78rem;
    }

    .cendias-bar .cendias-title {
        font-size: .95rem;
    }

    .bar-blazon {
        margin-right: 4px;
    }

    .replay-label {
        display: none;
    }

    .bulk-recruit-head {
        min-width: 130px;
        padding-left: 0;
    }

    .replay-label + .mud-button-icon-start,
    .mud-button-root:has(.replay-label) .mud-button-icon-start {
        margin: 0;
    }
}

/* A province drawn in a line of the report, in the colour of its owner. */
.report-province {
    display: inline-flex;
    vertical-align: middle;
}

/* The relations of the player put forward: one line per relation, the other players as tappable names. */
.relations-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0;
}

.relations-label {
    flex: none;
    width: 92px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-top: 2px;
    font-size: .8rem;
    font-weight: 600;
}

.relations-player {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px 1px 3px;
    border: 1px solid #d6c7a1;
    border-radius: 12px;
    font-size: .8rem;
    cursor: pointer;
}

.relations-player:hover {
    border-color: #7a2e1d;
}

.relations-troops {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(43, 34, 22, .12);
}

.relations-province {
    flex: none;
    width: 140px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .85rem;
}

.relations-province-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.relations-host {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* A player's name where room is short (FitName): whole, on two lines if need be, broken between the title and the fief
   (kept on one line); its fief alone when even a word does not fit (the page's script sets data-fit); measured as a
   block of its own. */
.fit-name {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.15;
}

.fit-fief {
    white-space: nowrap;
}

.fit-name .fit-short,
.fit-name[data-fit="short"] .fit-full {
    display: none;
}

.fit-name[data-fit="short"] .fit-short {
    display: inline;
}

/* A player's name in a narrow place (the map's corner, a chip, the relations grid): on two lines when too long, a
   word still too wide cut. */
.name-cut {
    min-width: 0;
    max-width: min(140px, 100%);
    overflow: hidden;
}

.cendias-heading.name-cut {
    max-width: 100%;
}

/* Every pair of players: a war or an alliance icon, blank at peace. */
.relations-grid {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0 auto;
}

.relations-grid th {
    padding: 0;
    font-weight: 400;
    font-size: .8rem;
    cursor: pointer;
}

.relations-grid th.relations-row {
    text-align: left;
    padding-right: 4px;
    white-space: nowrap;
}

.relations-grid td {
    width: 26px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
    background: rgba(43, 34, 22, .05);
    cursor: pointer;
}

.relations-grid td.self {
    background: rgba(43, 34, 22, .14);
    cursor: default;
}

.relations-grid td.dim {
    opacity: .25;
}

.relations-grid tr.highlighted th.relations-row,
.relations-grid th.highlighted {
    color: #7a2e1d;
    font-weight: 700;
    background: var(--selection-background);
}

@media (max-width: 600px) {
    .relations-row-name {
        display: none;
    }

    .name-cut {
        max-width: min(110px, 100%);
    }
}

/* The legend of the statistics: each player's coat of arms and name, with a box to hide or show their line. */
.stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 4px 0;
}

.stats-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
}

.stats-legend-item input {
    accent-color: #7a2e1d;
    margin: 0;
}

/* The filter of the turn report: the funnel at the right, the count of lines hidden beside it. */
.report-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* The replay buttons at the left of the funnel's line. */
.report-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.report-filter-anchor {
    position: relative;
}

.report-filter-content {
    max-width: min(340px, calc(100vw - 32px));
}

/* The help of a tab of the orders, as the filters of the report. */
.help-anchor {
    position: relative;
}

.help-content {
    max-width: min(360px, calc(100vw - 32px));
}

/* A help text goes to the line where it says so (one line per order of the combatants). */
.help-content .mud-typography-body2 {
    white-space: pre-line;
}

/* The players' boxes indented under the box of all of them. */
.report-filter-player {
    padding-left: 20px;
}

/* A chapter of the turn report, folded or unfolded by a click on its heading. */
.report-phase {
    cursor: pointer;
    user-select: none;
    gap: 2px;
}

.report-phase-chevron {
    margin-left: -4px;
}

.report-phase-count {
    opacity: 0.7;
}

/* The combats and the movements of the report: the order's icon and the province's shape in columns before the sentence. */
.report-event .report-column-action {
    width: 18px;
    flex: none;
    margin-right: 0;
}

.report-event .report-column-place {
    width: 20px;
    flex: none;
    display: inline-flex;
    justify-content: center;
}

/* The economy orders' icons: red triangle down (pillage), orange diamond (tax), green triangle up (enrich). */
.management-pillage {
    color: #b3261e;
}

.management-tax {
    color: #cb7519;
}

.management-enrich {
    color: #2e7d32;
}

.report-event .report-management {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The economy of the report: the wealth reached and the gold in columns before the sentence. */
.report-event .report-column-coin {
    display: inline-flex;
    flex: none;
}

.report-event .report-column-strength {
    flex: none;
    min-width: 22px;
    text-align: right;
    white-space: nowrap;
}

.report-event .report-column-gold {
    flex: none;
    min-width: 46px;
    text-align: right;
    white-space: nowrap;
}

/* A proposal that came to nothing: a black no-entry sign between the two shields. */
.report-refused {
    color: #000;
}

/* A value proposed, not chosen yet (a recruit's bid of 1 gold under a rising auction): pale until touched. */
.order-stepper.suggested {
    opacity: .45;
}

.order-stepper.suggested:hover,
.order-stepper.suggested:focus-within {
    opacity: .8;
}


/* Every button of the line of the tools as tall as the order tiles (38px: the icon over its word), in every tab: the
   tabs Simple | Détaillé, the sort, the funnel, the trash and the help, beside the « Tout » / « Tous » tiles. */
.orders-tools .mud-button-root,
.orders-tools .mode-tab,
.orders-tools .action-tile {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
}

.orders-tools .bulk-filter {
    min-width: 38px;
}

/* On a phone every row of the orders holds on one line, without a horizontal scroll: the buttons of the line of the
   tools narrower, the economy's columns tighter (the name, the coin of the wealth, the tiles, the gold), and the
   diplomacy's caption wrapping in its own column at the right of the tiles rather than under them. */
@media (max-width: 599.98px) {
    .order-row.orders-tools,
    .orders-tools .ml-auto {
        gap: 2px;
    }

    .orders-tools .bulk-filter {
        width: 30px;
        min-width: 30px !important;
        padding: 0 !important;
    }

    /* Shape 20 + name 64 + coin 20, the gaps 2: the « Tout » tiles stand over those of the provinces. */
    .order-row.economy-row {
        flex-wrap: nowrap;
        gap: 2px;
    }

    .order-row.economy-row.ungarrisoned {
        flex-wrap: wrap;
    }

    .economy-name {
        flex: 0 1 64px;
        width: auto;
        min-width: 32px;
    }

    .economy-head {
        flex: 0 1 auto;
        width: 108px;
        min-width: 40px;
    }

    /* On the narrowest phones « Tout » gives way first, so that the funnel, the trash and the help stay in sight. */
    .economy-all {
        gap: 2px !important;
        min-width: 0;
    }

    .action-tile.economy-tile,
    .tile-bar .action-tile.economy-tile {
        width: 47px;
        min-width: 0;
    }

    .economy-result {
        gap: 2px !important;
    }

    .economy-result .income {
        min-width: 38px;
    }

    .order-row.diplomacy-row {
        flex-wrap: nowrap;
    }

    .diplomacy-row > .order-default,
    .conversation-diplomacy > .diplo-action {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        padding-left: 2px;
        line-height: 1.25;
    }

    /* Under a conversation too: the relation, the tiles, the choice and « Masquer » on one line. */
    .conversation-diplomacy {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .conversation-diplomacy > .diplo-status {
        flex: none;
    }
}

/* The narrowest phones (360 px): the names and the tiles of the economy a little tighter still, « Tout » kept over the tiles. */
@media (max-width: 374.98px) {
    .economy-name {
        flex-basis: 52px;
    }

    .economy-head {
        width: 96px;
    }

    .action-tile.economy-tile,
    .tile-bar .action-tile.economy-tile {
        width: 46px;
    }
}

/* On a phone the whole orders panel scrolls: the buttons of the conversations stay in sight under the tabs of the orders
   (52 px tall, stuck 8 px above the panel's padding), so that one always sees with whom one is talking. */
@media (max-width: 959.98px) {
    .orders-tabs .message-tabs {
        position: sticky;
        top: 44px;
        z-index: 2;
        padding: 4px 0;
        margin-top: -4px;
        background-color: var(--mud-palette-surface);
        box-shadow: 0 1px 0 rgba(43, 34, 22, .15);
    }
}

/* The distinctions of a finished game: a medal, the name and what won it, then the laureates' coats of arms. */
.distinctions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0;
}

.distinction {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.distinction-player {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.distinction-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
}

.distinction-main .distinction-name {
    font-size: 1.05rem;
}

/* The second distinction, smaller beside the first. */
.distinction-second {
    font-size: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
}

.distinction-second-name {
    font-weight: 600;
}


.distinction-icon {
    color: #b8860b;
    margin-top: 2px;
}

.distinction-reason {
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

.distinction-laureates {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: .9rem;
}

.distinction-mentions {
    margin: 4px 0 6px;
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

.distinction-mention {
    display: flex;
    align-items: center;
    gap: 4px;
}

.distinction-mention-name {
    font-weight: 500;
}

.distinction-laureate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The heading of the home page: its buttons keep their words on one line, the row wrapping instead. */
.home-heading {
    row-gap: 4px;
}

.home-heading .mud-button-label {
    white-space: nowrap;
}

.button-medal {
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

/* An account's record: its figures in a row, its distinctions as medals with their names below (DistinctionMedal). */
.record-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.record-player {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
}

.record-medals {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 12px;
    margin-top: 4px;
}

.record-medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
    text-align: center;
}

.record-medal .distinction-medal {
    width: 64px;
    height: 64px;
}

.record-medal-name {
    font-size: .75rem;
    line-height: 1.15;
}

.distinction-medal {
    display: block;
}

.record-rank {
    color: var(--mud-palette-text-secondary);
}

/* The gifts of gold and lands, at the foot of the diplomacy tab (TransferOrders). */
.gift-orders {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The icons of the gifts and the cessions in the brown of the game's drawn icons. */
.gift-head .gift-icon {
    color: #6b4f2a;
}

.gift-over {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.gift-rank {
    min-width: 2em;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* The receiver's name as wide on every row, so that what is given lines up below. */
.gift-name {
    flex: 0 0 9rem;
    width: 9rem;
    min-width: 0;
}

/* The player chosen under « Donner à », and the tiles of what to give them. */
.gift-receiver.chosen {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    background-color: rgba(122, 90, 43, .12);
}

.gift-what {
    padding-bottom: 6px;
}

@media (max-width: 600px) {
    .gift-name {
        flex-basis: 5.5rem;
        width: 5.5rem;
    }
}

.gift-add {
    padding: 6px 0;
}

.gift-receiver {
    background: none;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 2px 4px;
    cursor: pointer;
    display: inline-flex;
}

.gift-receiver:hover {
    border-color: var(--mud-palette-primary);
}

/* The land only as wide as its name: the arrow, the receiver and the buttons follow it rather than the panel's edge. */
.cession-land {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cession-select {
    max-width: 180px;
}