/* Papier à lettres du navigateur — sans police ni image distante. */
:root {
    --nav-paper: #f2e5c9;
    --nav-ink: #293f48;
    --nav-brass: #ac8958;
    --nav-seal: #9d443c;
    --nav-grain: repeating-linear-gradient(0deg, #715e3610 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, #fffae814 0 1px, transparent 1px 5px);
}
.message, .message.narratif, .custom-popup {
    background-color: var(--nav-paper);
    background-image: var(--nav-grain), repeating-linear-gradient(0deg, transparent 0 26px, #44606c10 26px 27px);
    color: var(--nav-ink);
    border: 1px solid var(--nav-brass);
    border-radius: 2px;
    box-shadow: 0 9px 24px #10253150, inset 0 0 0 5px #f9eed7, inset 0 0 0 6px #bca37880;
    text-shadow: none;
    font-family: Georgia, 'Times New Roman', serif;
}
.message {
    width: calc(100% - 32px);
    max-width: 510px;
    padding: 42px 25px 30px;
    font-size: clamp(17px, 4.5vw, 21px);
    line-height: 1.55;
    max-height: calc(100% - 32px);
    overflow-y: auto;
}
.message.narratif { padding: 28px 23px 24px; bottom: 80px; }
.message::before {
    content: '✦  ⚓  ✦';
    display: block;
    color: #987645;
    font: 18px Georgia, serif;
    letter-spacing: 8px;
    margin-bottom: 14px;
    pointer-events: none;
}
.message::after {
    content: '✒';
    display: block;
    text-align: right;
    color: #7c6545;
    font: 25px Georgia, serif;
    margin-top: 10px;
    pointer-events: none;
}
.custom-popup { overflow-y: auto; max-height: calc(100dvh - 32px); }
.custom-popup::before { height: 3px; background: #ac8958; }
.custom-popup-header { padding-top: 26px; }
.custom-popup-title, .custom-popup-message { font-family: Georgia, 'Times New Roman', serif; color: var(--nav-ink); }
.custom-popup-title { font-size: 23px; }
.custom-popup-message { font-size: 16px; line-height: 1.65; }
.custom-popup-icon { color: var(--nav-brass); }
.message-button, .custom-popup-btn, #install-button {
    background: #294a55;
    color: #fff0d1;
    border: 1px solid #ab8a57;
    border-radius: 2px;
    box-shadow: 2px 3px 0 #142e37;
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: none;
    min-height: 44px;
    transition: background .15s, transform .15s;
}
.message-button:hover, .custom-popup-btn:hover, #install-button:hover {
    background: #3d6470;
    box-shadow: 2px 3px 0 #142e37;
    transform: translateY(-1px);
}
.custom-popup-btn-cancel { background: #93473e; box-shadow: 2px 3px 0 #62332f; }
.custom-popup-btn-cancel:hover { background: #aa574a; }
.message-button:focus-visible, .custom-popup-btn:focus-visible, #install-button:focus-visible {
    outline: 3px solid #b25442; outline-offset: 4px;
}
.custom-popup-buttons { flex-wrap: wrap; padding-bottom: 24px; }
@media (max-width: 380px) {
    .message { padding: 28px 19px 22px; }
    .custom-popup-btn { min-width: 100px; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .message.show, .custom-popup, .custom-popup-icon { animation: none; }
    .message-button, .custom-popup-btn { transition: none; }
}

.message .text-animator-display {
    color: var(--nav-ink) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor;
}
.message .ta-typewriter { border-right-color: var(--nav-ink); }
.message .ta-digital { color: #365e6a; text-shadow: none; }
/* Le terrain doit toujours tenir dans la fenêtre, y compris dans le panneau navigateur. */
html, body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    min-height: 0;
}
body { inset: 0; }
.game-container {
    flex: none;
    max-width: 100%;
    max-height: 100dvh;
}
#gameCanvas { display: block; flex: none; }
@media (max-width: 499px) {
    .game-container { width: 100%; height: 100%; height: 100dvh; }
}
@media (min-width: 500px) {
    .game-container {
        width: min(450px, 100vw, calc(100dvh * 9 / 16));
        height: min(800px, 100dvh, calc(100vw * 16 / 9));
        border-radius: 8px;
    }
}

.navigation-reset {
    position: fixed;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff0d1;
    background: #93473e;
    border: 1px solid #b99a68;
    border-radius: 3px;
    box-shadow: 2px 2px 0 #62332f;
    cursor: pointer;
    touch-action: manipulation;
}
.navigation-reset[hidden] { display: none; }
.navigation-reset:hover { background: #aa574a; }
.navigation-reset:focus-visible { outline: 3px solid #294a55; outline-offset: 3px; }
.navigation-reset svg { pointer-events: none; }