/* Optiquest (Haenggi & Associés): the look of the game's interface, in the colours of the prototype
   (reference/optiquest-hd/index.html: cream, plum ink, gold — a board game's light pieces).
   The --iso-* variables dress what the engine draws (dialogue, objective, notices, prompts, arrows, tags,
   markers, the introduction): .engine/docs/api/interface.md « Thème ». The .hq-* classes are the game's own
   (its title, the « IA indisponible » mark): each rule sets everything it shows, so that they look the same in
   the editor's Tester, the preview and the cooked game (which loads Bootstrap). The prototype's fonts (Fraunces,
   Nunito Sans) are used when the device has them; nothing is fetched from a font service. */
:root {
    --iso-font: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --iso-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --iso-text: #3b2530;
    --iso-text-soft: #6a4d58;
    --iso-panel: #fff6e4;
    --iso-panel-head: #f6e2bf;
    --iso-border: #3b2530;
    --iso-accent: #f5c04e;
    --iso-accent-text: #3b2530;
    --iso-focus: #2f7f86;
    --iso-radius: 16px;
    --iso-shadow: 0 5px 0 rgba(59, 37, 48, 0.22);
    --iso-bubble: #ffffff;
    --iso-bubble-text: #3b2530;
    --iso-player-bubble: #2f7f86;
    --iso-player-text: #ffffff;
    --iso-note: #fff0c9;
    --iso-success: #4f9a45;
    --iso-warning: #d9603f;
    --iso-info: #2f7f86;
    --iso-notice-bg: #3b2530;
    --iso-notice-text: #fff6e4;
    --iso-prompt-bg: #f5c04e;
    --iso-prompt-text: #3b2530;
    --iso-pointer-bg: #f5c04e;
    --iso-tag-bg: rgba(59, 37, 48, 0.86);
    --iso-tag-text: #fff6e4;
    --iso-marker-bg: #fff6e4;
    --iso-marker-text: #3b2530;
    --iso-marker-seen-bg: #f6e2bf;
}

/* ---------------------------------------------------------------- the title: a card over the map */
.hq-title {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: min(480px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    margin: 0;
    padding: 28px 28px 24px;
    pointer-events: auto;
    background: var(--iso-panel);
    color: var(--iso-text);
    border: 3px solid var(--iso-border);
    border-radius: 20px;
    box-shadow: var(--iso-shadow), 0 18px 48px rgba(59, 37, 48, 0.3);
    font-family: var(--iso-font);
    font-size: calc(16px * var(--iso-font-scale, 1));
    line-height: 1.45;
    text-align: center;
}
.hq-title__eyebrow {
    margin: 0 0 6px;
    color: var(--iso-text-soft);
    font-family: var(--iso-font);
    font-size: calc(13px * var(--iso-font-scale, 1));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hq-title__name {
    margin: 0 0 10px;
    color: var(--iso-text);
    font-family: var(--iso-font-display);
    font-size: calc(40px * var(--iso-font-scale, 1));
    font-weight: 700;
    line-height: 1.05;
}
.hq-title__lede {
    margin: 0 0 12px;
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: calc(17px * var(--iso-font-scale, 1));
    font-weight: 700;
    line-height: 1.4;
}
.hq-title__promises {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.hq-title__promise {
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--iso-panel-head);
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: calc(12px * var(--iso-font-scale, 1));
    font-weight: 800;
    letter-spacing: 0.04em;
}
.hq-title__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.hq-title__text,
.hq-title__soon {
    margin: 0;
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: inherit;
    line-height: 1.45;
}
/* Empty, out of sight but still there: a live region (role="status") is only read when it was there already. */
.hq-title__soon:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.hq-title__who {
    margin: 4px 0 0;
    color: var(--iso-text);
    font-family: var(--iso-font-display);
    font-size: calc(20px * var(--iso-font-scale, 1));
    font-weight: 700;
    line-height: 1.2;
}
.hq-title__profiles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* A profile: a big button (its title, what it is for, « À venir » when its day does not exist yet). */
.hq-profile,
.hq-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--iso-panel);
    color: var(--iso-text);
    border: 3px solid var(--iso-border);
    border-radius: 14px;
    box-shadow: var(--iso-shadow);
    font-family: var(--iso-font);
    font-size: calc(16px * var(--iso-font-scale, 1));
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    cursor: pointer;
}
.hq-profile { background: var(--iso-accent); color: var(--iso-accent-text); }
.hq-profile--soon { background: var(--iso-panel); opacity: 0.75; cursor: default; }
.hq-profile:hover,
.hq-button:hover { filter: brightness(1.04); }
.hq-profile:focus-visible,
.hq-button:focus-visible {
    outline: 3px solid var(--iso-focus);
    outline-offset: 2px;
}
.hq-profile__title {
    display: block;
    margin: 0;
    color: inherit;
    font-family: var(--iso-font-display);
    font-size: calc(19px * var(--iso-font-scale, 1));
    font-weight: 700;
}
.hq-profile__label,
.hq-button__hint {
    display: block;
    margin: 0;
    color: inherit;
    font-family: var(--iso-font);
    font-size: calc(14px * var(--iso-font-scale, 1));
    font-weight: 600;
    opacity: 0.85;
}
.hq-profile__badge {
    display: inline-block;
    margin: 4px 0 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--iso-text);
    color: var(--iso-panel);
    font-family: var(--iso-font);
    font-size: calc(12px * var(--iso-font-scale, 1));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hq-button--main { background: var(--iso-accent); color: var(--iso-accent-text); }
.hq-button--link {
    min-height: 44px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .hq-title { padding: 22px 18px 18px; }
    .hq-title__name { font-size: calc(32px * var(--iso-font-scale, 1)); }
}
/* A phone in landscape (a screen of 520 px high at most): the title on one screen, the profiles side by side. */
@media (max-height: 520px) {
    .hq-title { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 16px); padding: 14px 20px; }
    .hq-title__eyebrow { margin: 0 0 2px; }
    .hq-title__name { margin: 0 0 4px; font-size: calc(28px * var(--iso-font-scale, 1)); }
    .hq-title__lede { margin: 0 0 8px; font-size: calc(15px * var(--iso-font-scale, 1)); }
    .hq-title__promises { margin: 0 0 8px; }
    .hq-title__body { gap: 8px; }
    .hq-title__who { margin: 0; font-size: calc(18px * var(--iso-font-scale, 1)); }
    .hq-title__profiles { flex-direction: row; }
    .hq-title__profiles .hq-profile { flex: 1 1 0; min-width: 0; }
}

/* ---------------------------------------------------------------- « IA indisponible » in a dialogue */
.hq-ai-off {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    padding: 6px 12px;
    border: 2px dashed var(--iso-text-soft);
    border-radius: 12px;
    background: transparent;
    color: var(--iso-text-soft);
    font-family: var(--iso-font);
    font-size: calc(14px * var(--iso-font-scale, 1));
    line-height: 1.35;
    text-align: left;
}
.hq-ai-off__title {
    margin: 0;
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: inherit;
    font-weight: 800;
}
.hq-ai-off__text,
.hq-ai-off__why {
    margin: 0;
    color: inherit;
    font-family: var(--iso-font);
    font-size: inherit;
    font-weight: 400;
}
.hq-ai-off__why { font-style: italic; }

/* ---------------------------------------------------------------- the AI's answers: a small « IA », a mention */
/* A line the AI wrote (its reaction, an explanation, an answer): a discreet « IA » in its corner. */
.iso-say--npc.hq-ai { position: relative; padding-right: 40px; }
.iso-say--npc.hq-ai::after {
    content: "IA";
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 5px;
    border-radius: 6px;
    border: 1.5px solid var(--iso-text-soft);
    color: var(--iso-text-soft);
    font-family: var(--iso-font);
    font-size: calc(10px * var(--iso-font-scale, 1));
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.5;
}
/* Once in a dialogue (and on the end screen): « Réponses générées par une IA… ». */
.hq-ai-note {
    margin: 0;
    padding: 0 2px;
    color: var(--iso-text-soft);
    font-family: var(--iso-font);
    font-size: calc(12px * var(--iso-font-scale, 1));
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

/* ---------------------------------------------------------------- the end of the day: the recap */
.hq-end {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: min(680px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    margin: 0;
    padding: 26px 28px 22px;
    pointer-events: auto;
    background: var(--iso-panel);
    color: var(--iso-text);
    border: 3px solid var(--iso-border);
    border-radius: 20px;
    box-shadow: var(--iso-shadow), 0 18px 48px rgba(59, 37, 48, 0.3);
    font-family: var(--iso-font);
    font-size: calc(16px * var(--iso-font-scale, 1));
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;            /* a long free answer (a link…) wraps: the card never scrolls sideways */
}
/* Focused at the open (screen readers start at its title), as the engine's dialogue: no ring around the card. */
.hq-end:focus { outline: none; }
.hq-end__eyebrow {
    margin: 0 0 4px;
    color: var(--iso-text-soft);
    font-family: var(--iso-font);
    font-size: calc(13px * var(--iso-font-scale, 1));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hq-end__title {
    margin: 0 0 14px;
    color: var(--iso-text);
    font-family: var(--iso-font-display);
    font-size: calc(28px * var(--iso-font-scale, 1));
    font-weight: 700;
    line-height: 1.15;
}
.hq-end__section { margin: 18px 0 0; }
.hq-end__heading {
    margin: 0 0 8px;
    padding: 0 0 4px;
    border-bottom: 2px solid var(--iso-panel-head);
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: calc(13px * var(--iso-font-scale, 1));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hq-end__list { margin: 0; padding: 0 0 0 20px; }
.hq-end__item,
.hq-end__none,
.hq-end__next,
.hq-end__q,
.hq-end__a {
    margin: 0 0 6px;
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: inherit;
    line-height: 1.4;
}
.hq-end__none { color: var(--iso-text-soft); font-style: italic; }
.hq-end__group { margin: 0 0 12px; }
.hq-end__who {
    margin: 0 0 6px;
    color: var(--iso-text);
    font-family: var(--iso-font-display);
    font-size: calc(17px * var(--iso-font-scale, 1));
    font-weight: 700;
}
.hq-end__qa {
    margin: 0 0 8px;
    padding: 0 0 0 12px;
    border-left: 3px solid var(--iso-panel-head);
}
.hq-end__qa--dk { border-left-color: var(--iso-accent); }
.hq-end__q {
    margin: 0;
    color: var(--iso-text-soft);
    font-size: calc(14px * var(--iso-font-scale, 1));
}
.hq-end__a { margin: 0; font-weight: 700; }
.hq-end__tag {
    display: inline-block;
    margin: 2px 0 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--iso-accent);
    color: var(--iso-accent-text);
    font-family: var(--iso-font);
    font-size: calc(12px * var(--iso-font-scale, 1));
    font-weight: 800;
}
.hq-end__next { margin-top: 14px; font-weight: 700; }
.hq-end__fine {
    margin: 14px 0 0;
    color: var(--iso-text-soft);
    font-family: var(--iso-font);
    font-size: calc(13px * var(--iso-font-scale, 1));
}
.hq-end__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
}
.hq-end__actions .hq-button { width: auto; flex: 1 1 200px; }
.hq-end .hq-ai-off { margin: 0 0 4px; }
/* The last adviser's summary of the day (the AI's). */
.hq-end__synthesis { margin: 0; }
.hq-end__bilan {
    margin: 0 0 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--iso-bubble);
    border: 2px solid var(--iso-panel-head);
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: inherit;
    line-height: 1.45;
}
.hq-end__sub {
    margin: 10px 0 4px;
    color: var(--iso-text);
    font-family: var(--iso-font);
    font-size: calc(14px * var(--iso-font-scale, 1));
    font-weight: 800;
}
.hq-end__wait { margin: 0; color: var(--iso-text-soft); font-family: var(--iso-font); font-style: italic; }
.hq-end__synthesis .hq-ai-note { margin: 6px 0 0; }

@media (max-width: 640px) {
    .hq-end { padding: 20px 16px 16px; }
    .hq-end__title { font-size: calc(24px * var(--iso-font-scale, 1)); }
}
@media (max-height: 520px) {
    .hq-end { max-height: calc(100% - 16px); padding: 16px 20px 14px; }
    .hq-end__title { margin: 0 0 8px; font-size: calc(22px * var(--iso-font-scale, 1)); }
}

/* ---------------------------------------------------------------- the engine's interface, fitted to the game */
/* An adviser's question stands out from what leads to it, in bold (the prototype's « .say.npc.question »). */
.iso-say--npc.hq-question { font-weight: 800; }

/* The objective's first line: the moment of the day in full (« Le lendemain matin », never « LE MA… »), the steps,
   the fold button; the time left on a line of its own under them (the engine hides it on a phone). */
.iso-objective__top { flex-wrap: wrap; row-gap: 2px; }
.iso-objective__title { flex: 0 0 auto; max-width: calc(100% - 52px); }
.iso-objective__steps { flex: 1 1 60px; gap: 4px; }
.iso-objective__step { width: 14px; }
.iso-objective__note { order: 1; flex: 1 0 100%; padding: 0 2px; }

/* The end of the day's recap (the game's own card, over the map): the objective and the notices step aside meanwhile. */
:has(> .iso-game-layer .hq-end) > .iso-hud { visibility: hidden; }

/* A phone in landscape: the dialogue takes most of the height; the objective (nothing to do while a dialogue is
   open) steps aside instead of showing a strip of itself above it, and the time left is hidden as on a phone. */
@media (max-height: 520px) {
    .iso-objective__note { display: none; }
    :has(> .iso-dialogues .iso-dialogue) > .iso-hud > .iso-objective { visibility: hidden; }
}