:root {
    --ink: #121318;
    --night: #080a0e;
    --paper: #f0e8d9;
    --paper-deep: #d7c8ae;
    --gold: #cba45c;
    --red: #943b42;
    --blue: #416f89;
    --panel: #171a20;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 320px;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    display: grid;
    place-items: center;
    min-height: var(--app-height, 100dvh);
    color: var(--paper);
    background: var(--night);
    font-family: "Segoe UI", sans-serif;
}

#game {
    position: relative;
    width: min(var(--app-width, 100vw), calc(var(--app-height, 100dvh) * 16 / 9));
    height: min(var(--app-height, 100dvh), calc(var(--app-width, 100vw) * 9 / 16));
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 80px rgba(0, 0, 0, .72);
}

:fullscreen,
:-webkit-full-screen {
    background: #000;
}

:fullscreen #game,
:-webkit-full-screen #game {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    box-shadow: none;
}

button,
a {
    color: inherit;
    font: inherit;
}

button {
    cursor: pointer;
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.screen.active {
    display: flex;
}

.title-screen {
    position: relative;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #02050b;
}

.title-screen-art,
.title-screen-readability,
.title-screen-grain {
    position: absolute;
    inset: 0;
}

.title-screen-art {
    z-index: -3;
}

.title-screen-art img,
.title-screen-readability img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title-screen-readability {
    z-index: -2;
    pointer-events: none;
}

.title-screen-grain {
    z-index: -1;
    opacity: .12;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 17% 31%, rgba(255, 255, 255, .28) 0 1px, transparent 1.35px),
        radial-gradient(circle at 69% 58%, rgba(203, 164, 92, .2) 0 1px, transparent 1.4px);
    background-position: 0 0, 29px 23px;
    background-size: 59px 61px, 71px 67px;
    mix-blend-mode: soft-light;
}

.title-menu-shell {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: min(39vw, 610px);
    min-width: 420px;
    margin-left: clamp(28px, 7vw, 118px);
    padding: clamp(18px, 2.5vh, 30px) clamp(34px, 3vw, 54px) clamp(25px, 3vh, 40px);
    background-image: var(--title-menu-panel);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 24px 38px rgba(0, 0, 0, .62));
}

.title-logo-lockup {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 520px);
    height: clamp(118px, 19vh, 190px);
    margin-bottom: clamp(-12px, -1vh, -4px);
}

.title-logo-backplate,
.title-logo-image {
    position: absolute;
    display: block;
}

.title-logo-backplate {
    width: 132%;
    max-width: none;
    opacity: .92;
}

.title-logo-image {
    width: 102%;
    height: auto;
    transform: translateY(-1%);
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .68));
    mix-blend-mode: screen;
}

.title-menu-actions {
    display: grid;
    width: min(100%, 500px);
    gap: clamp(7px, 1vh, 11px);
}

.title-menu-button {
    position: relative;
    display: grid;
    grid-template-columns: clamp(44px, 4vw, 58px) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: clamp(62px, 8vh, 76px);
    padding: 8px clamp(26px, 3vw, 42px);
    overflow: hidden;
    border: 0;
    color: #f2ead8;
    text-align: left;
    background-color: transparent;
    background-image: var(--title-button-idle);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    text-shadow: 0 2px 4px #000;
    transition: color 140ms ease, filter 140ms ease, transform 140ms ease;
}

.title-menu-button:hover,
.title-menu-button:focus-visible {
    outline: 0;
    color: #fff8dc;
    background-image: var(--title-button-hover);
    filter: drop-shadow(0 0 13px rgba(224, 197, 119, .18));
    transform: translateX(4px);
}

.title-menu-button:active {
    background-image: var(--title-button-pressed);
    transform: translate(3px, 2px);
}

.title-menu-button:disabled {
    cursor: not-allowed;
    color: rgba(209, 213, 222, .48);
    background-image: var(--title-button-idle);
    filter: grayscale(.7) brightness(.62);
    transform: none;
}

.title-menu-button[hidden] {
    display: none;
}

.title-menu-button > img {
    width: clamp(38px, 3.6vw, 52px);
    height: clamp(38px, 3.6vw, 52px);
}

.title-menu-button > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.title-menu-button strong {
    font: 600 clamp(1.02rem, 1.45vw, 1.3rem)/1.05 Georgia, serif;
    letter-spacing: .025em;
}

.title-menu-button small {
    overflow: hidden;
    color: rgba(213, 220, 232, .62);
    font-size: clamp(.52rem, .67vw, .66rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.title-save-summary {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    width: min(100%, 500px);
    min-height: 94px;
    margin-top: 8px;
    padding: 10px 30px 10px 24px;
    background-image: var(--title-save-slot);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.title-save-summary[hidden] {
    display: none;
}

.title-save-medallion {
    display: grid;
    place-items: center;
}

.title-save-medallion img {
    width: 54px;
    height: 54px;
}

.title-save-summary > div:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.title-save-summary p,
.title-save-summary strong,
.title-save-summary small {
    margin: 0;
}

.title-save-summary p {
    overflow: hidden;
    color: #ddc77f;
    font: 700 .61rem/1.1 "Segoe UI", sans-serif;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.title-save-summary strong {
    overflow: hidden;
    font: 600 .95rem/1.2 Georgia, serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-save-summary small {
    color: rgba(215, 222, 233, .62);
    font-size: .6rem;
    letter-spacing: .06em;
}

.title-save-message {
    min-height: 1.4em;
    margin: 8px 0 -2px;
    color: rgba(220, 227, 238, .66);
    font-size: .62rem;
    letter-spacing: .06em;
    text-align: center;
}

.title-save-message[data-state="corrupt"] {
    color: #e49a93;
}

.title-copyright {
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: max(11px, env(safe-area-inset-bottom));
    left: 20px;
    color: rgba(232, 237, 244, .62);
    font: 500 clamp(.54rem, .7vw, .7rem)/1.2 "Segoe UI", sans-serif;
    letter-spacing: .06em;
    text-align: center;
    text-shadow: 0 2px 5px #000;
}

.title-confirmation-dialog {
    width: min(680px, calc(100vw - 32px));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    color: #f0e8d9;
    background: transparent;
}

.title-confirmation-dialog::backdrop {
    background: rgba(1, 3, 8, .78);
    backdrop-filter: blur(7px);
}

.title-confirmation-dialog form {
    display: grid;
    place-items: center;
    min-height: 340px;
    padding: 48px 70px 42px;
    text-align: center;
    background-image: var(--title-confirmation-frame);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .78));
}

.title-confirmation-dialog form > img {
    width: 56px;
    height: 56px;
    margin-bottom: 2px;
}

.title-confirmation-dialog .eyebrow {
    margin: 0;
}

.title-confirmation-dialog h2 {
    margin: 5px 0 8px;
    color: #fff8e4;
    font: 600 clamp(1.4rem, 3vw, 2rem)/1.05 Georgia, serif;
}

.title-confirmation-dialog form > p:not(.eyebrow) {
    max-width: 48ch;
    margin: 0 0 20px;
    color: rgba(220, 226, 236, .72);
    font: .88rem/1.45 Georgia, serif;
}

.title-confirmation-dialog .confirmation-actions {
    width: min(100%, 420px);
}

.autosave-toast {
    position: absolute;
    z-index: 70;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    min-width: 260px;
    padding: 9px 16px 9px 10px;
    border: 1px solid rgba(215, 185, 100, .65);
    color: #f4ead3;
    background: linear-gradient(110deg, rgba(12, 19, 31, .98), rgba(4, 8, 15, .96));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(78, 94, 118, .36);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.autosave-toast[hidden] {
    display: none;
}

.autosave-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.autosave-toast-rune {
    width: 48px;
    height: 48px;
    background-image: var(--autosave-sprite);
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: autosave-rune 720ms steps(8) infinite;
}

.autosave-toast > span:last-child {
    display: grid;
    gap: 2px;
}

.autosave-toast strong {
    font: 600 .82rem/1.1 Georgia, serif;
    letter-spacing: .025em;
}

.autosave-toast small {
    color: rgba(214, 221, 232, .58);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@keyframes autosave-rune {
    to { background-position: -384px 0; }
}

.opening-screen {
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    color: #f1eee7;
    background: #030405;
}

.opening-grain,
.opening-vignette,
.opening-viewport {
    position: absolute;
    inset: 0;
}

.opening-grain {
    z-index: -1;
    opacity: .16;
    background-image:
        radial-gradient(circle at 18% 27%, rgba(255, 255, 255, .2) 0 1px, transparent 1.4px),
        radial-gradient(circle at 72% 61%, rgba(255, 255, 255, .15) 0 1px, transparent 1.5px);
    background-position: 0 0, 23px 31px;
    background-size: 47px 53px, 61px 67px;
}

.opening-vignette {
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, .48) 82%, #000 100%),
        linear-gradient(#000 0, transparent 14%, transparent 82%, #000 100%);
}

.opening-viewport {
    z-index: 1;
    overflow: hidden;
    mask-image: linear-gradient(transparent 0, #000 12%, #000 80%, transparent 100%);
}

.opening-crawl {
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(760px, calc(100vw - 48px));
    text-align: center;
    text-wrap: balance;
    transform: translateX(-50%);
    animation: opening-crawl 24s linear forwards;
}

.opening-crawl header {
    margin-bottom: clamp(42px, 7vh, 76px);
}

.opening-crawl header p {
    margin: 0 0 .55rem;
    color: #bca979;
    font: 600 clamp(.72rem, 1.2vw, .92rem)/1.2 "Segoe UI", sans-serif;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.opening-crawl h1 {
    margin: 1.2rem 0 0;
    color: #fff;
    font: 500 clamp(2.3rem, 7vw, 5.6rem)/.92 Georgia, serif;
    letter-spacing: -.045em;
}

.opening-crawl > p {
    margin: 0 auto clamp(34px, 5vh, 54px);
    max-width: 690px;
    font: 400 clamp(1.08rem, 2.2vw, 1.55rem)/1.55 Georgia, serif;
    letter-spacing: .015em;
}

.opening-crawl .opening-final-line {
    margin-top: clamp(64px, 10vh, 110px);
    color: #d5bd7e;
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.opening-loader {
    position: absolute;
    z-index: 4;
    right: clamp(20px, 4vw, 58px);
    bottom: clamp(20px, 4vh, 42px);
    left: clamp(20px, 4vw, 58px);
    display: grid;
    grid-template-columns: minmax(120px, 320px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: rgba(241, 238, 231, .66);
}

.opening-loader p {
    margin: 0;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.opening-progress {
    width: 100%;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .18);
}

.opening-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #d5bd7e;
    box-shadow: 0 0 12px rgba(213, 189, 126, .6);
    transition: width 220ms ease;
}

.opening-skip {
    position: absolute;
    z-index: 5;
    top: clamp(18px, 3vw, 36px);
    right: clamp(18px, 3vw, 42px);
    padding: .7rem .9rem;
    border: 0;
    color: rgba(255, 255, 255, .7);
    background: transparent;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: color 160ms ease;
}

.opening-skip:hover,
.opening-skip:focus-visible {
    color: #fff;
}

.sound-gate {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: clamp(24px, 6vw, 72px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(203, 164, 92, .13), transparent 19rem),
        linear-gradient(rgba(3, 4, 5, .94), #030405);
    transition: opacity 520ms ease, visibility 520ms ease;
}

.sound-gate.leaving {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.sound-gate-logo {
    width: clamp(270px, 48vw, 560px);
    aspect-ratio: 2.7;
    margin: 0 0 clamp(.65rem, 1.8vh, 1.15rem);
    overflow: hidden;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .58));
}

.sound-gate-logo img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(-10%);
    mix-blend-mode: screen;
}

.sound-gate-icon {
    width: clamp(42px, 5vw, 60px);
    height: clamp(42px, 5vw, 60px);
    margin-bottom: clamp(.55rem, 1.4vh, .9rem);
    filter: drop-shadow(0 0 16px rgba(203, 164, 92, .22));
}

.sound-gate h1 {
    max-width: 15ch;
    margin: 0;
    color: #fff;
    font: 500 clamp(2rem, 5vw, 4.5rem)/.96 Georgia, serif;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.sound-gate-copy {
    max-width: 42ch;
    margin: 1.15rem 0 1.7rem;
    color: rgba(241, 238, 231, .68);
    font: clamp(.88rem, 1.3vw, 1.05rem)/1.55 Georgia, serif;
}

.sound-gate-button {
    padding: .9rem 1.25rem;
    border: 1px solid rgba(213, 189, 126, .72);
    border-radius: 999px;
    color: #fff;
    background: rgba(148, 59, 66, .88);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sound-gate-button:hover,
.sound-gate-button:focus-visible {
    border-color: #f0d99b;
    background: #a9424a;
    transform: translateY(-2px);
}

.sound-gate-button:disabled {
    cursor: wait;
    opacity: .65;
}

.sound-gate-status {
    min-height: 1.2em;
    margin: .85rem 0 0;
    color: rgba(241, 238, 231, .48);
    font-size: .65rem;
    letter-spacing: .08em;
}

@media (orientation: landscape) and (max-height: 600px) {
    .sound-gate {
        padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }

    .sound-gate-logo {
        width: clamp(230px, 36vw, 380px);
        aspect-ratio: 3.15;
        margin-bottom: .35rem;
    }

    .sound-gate-logo img {
        transform: translateY(-12%);
    }

    .sound-gate h1 {
        max-width: 18ch;
        font-size: clamp(1.55rem, 7vh, 2.5rem);
    }

    .sound-gate-copy {
        margin: .5rem 0 .75rem;
        font-size: .78rem;
    }

    .sound-gate-status {
        margin-top: .45rem;
    }
}

.fullscreen-control {
    position: absolute;
    z-index: 40;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    padding: .58rem .78rem;
    border: 1px solid rgba(213, 189, 126, .48);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    background: rgba(3, 4, 5, .7);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.fullscreen-control[hidden] {
    display: none !important;
}

body.audio-locked .opening-crawl {
    animation-play-state: paused;
}

body.audio-locked .opening-skip {
    visibility: hidden;
    pointer-events: none;
}

.opening-screen.skip-requested .opening-crawl {
    animation: none;
    opacity: 0;
}

.opening-screen.leaving {
    animation: opening-fade-out 650ms ease forwards;
    pointer-events: none;
}

@keyframes opening-crawl {
    from {
        transform: translate(-50%, 0);
    }
    to {
        transform: translate(-50%, calc(-100% - 105vh));
    }
}

@keyframes opening-fade-out {
    to {
        opacity: 0;
    }
}

.cinematic-screen {
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    opacity: 0;
}

.cinematic-screen.active {
    animation: cinematic-fade-in 700ms ease forwards;
}

.cinematic-screen.leaving {
    animation: cinematic-fade-out 650ms ease forwards;
    pointer-events: none;
}

.intro-cinematic {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.cinematic-skip {
    position: absolute;
    z-index: 5;
    top: clamp(18px, 3vw, 36px);
    right: clamp(18px, 3vw, 42px);
    padding: .7rem .9rem;
    border: 0;
    color: rgba(255, 255, 255, .72);
    background: rgba(0, 0, 0, .42);
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.cinematic-playback {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    color: #f1eee7;
    background: rgba(0, 0, 0, .68);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.cinematic-playback.visible {
    opacity: 1;
    pointer-events: auto;
}

.cinematic-playback p {
    margin: 0;
    font: 400 clamp(1.1rem, 2vw, 1.45rem)/1.3 Georgia, serif;
}

.cinematic-playback button {
    padding: .78rem 1.15rem;
    border: 1px solid rgba(213, 189, 126, .72);
    border-radius: 999px;
    color: #f1eee7;
    background: rgba(18, 19, 24, .82);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@keyframes cinematic-fade-in {
    to {
        opacity: 1;
    }
}

@keyframes cinematic-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.story-screen {
    position: relative;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    background: #cbbfae;
}

@media (max-width: 620px) {
    .opening-crawl {
        width: calc(100vw - 38px);
        animation-duration: 27s;
    }

    .opening-loader {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .opening-loader p {
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .opening-viewport {
        overflow-y: auto;
        mask-image: none;
    }

    .opening-crawl {
        position: relative;
        top: auto;
        padding: 14vh 0 24vh;
        transform: translateX(-50%);
        animation: none;
    }
}

.scene-backdrop,
.scene-camera,
.transition-curtain,
.advance-hitbox {
    position: absolute;
    inset: 0;
}

.scene-backdrop {
    z-index: -4;
    background-position: center;
    background-size: cover;
    transform: scale(1.05);
    transition: filter 800ms ease, opacity 450ms ease, transform 8s ease-out;
}

.story-screen[data-mood="day"] .scene-backdrop {
    filter: saturate(.72) brightness(1.22) sepia(.08);
}

.story-screen[data-mood="lower"] .scene-backdrop {
    filter: saturate(.74) brightness(.72) sepia(.1);
}

.story-screen[data-mood="danger"] .scene-backdrop {
    filter: saturate(.68) brightness(.56) contrast(1.08);
}

.story-screen::before {
    position: absolute;
    z-index: -3;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(246, 234, 208, .38), transparent 34%, rgba(15, 17, 22, .15)),
        linear-gradient(0deg, rgba(7, 9, 12, .88), transparent 46%);
    transition: background 700ms ease;
}

.story-screen[data-mood="lower"]::before,
.story-screen[data-mood="danger"]::before {
    background:
        radial-gradient(circle at 68% 20%, rgba(198, 133, 71, .18), transparent 24rem),
        linear-gradient(0deg, rgba(5, 7, 10, .95), transparent 58%),
        rgba(5, 8, 11, .18);
}

.scene-camera {
    z-index: -1;
    overflow: hidden;
}

.family-portrait {
    position: absolute;
    top: 10%;
    left: 50%;
    display: none;
    align-items: flex-end;
    justify-content: center;
    width: min(24vw, 330px);
    height: min(25vw, 310px);
    gap: 2%;
    padding: 11% 8%;
    border: 12px solid rgba(80, 53, 31, .68);
    background: rgba(226, 211, 183, .55);
    box-shadow: 0 16px 50px rgba(35, 24, 16, .3);
    filter: blur(3px) saturate(.45);
    opacity: .7;
    transform: translateX(-50%);
}

.story-screen[data-framing="kitchen"] .family-portrait {
    display: none;
}

.family-portrait span {
    width: 18%;
    height: 60%;
    border-radius: 50% 50% 20% 20%;
    background: #584b43;
}

.family-portrait span:nth-child(1),
.family-portrait span:nth-child(5) {
    height: 84%;
}

.actor-layer {
    position: absolute;
    inset: 0;
}

.actor {
    --actor-color: #526575;
    position: absolute;
    bottom: clamp(176px, 24vh, 255px);
    left: var(--actor-x, 50%);
    width: clamp(120px, 16vw, 245px);
    height: clamp(290px, 53vh, 620px);
    opacity: .56;
    transform: translateX(-50%) scale(.96) scale(var(--actor-scale, 1));
    transform-origin: 50% 100%;
    transition:
        left 650ms cubic-bezier(.16, 1, .3, 1),
        opacity 300ms ease,
        filter 300ms ease,
        transform 300ms ease;
}

.actor::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 50% 13%, var(--actor-color) 0 13%, transparent 13.5%),
        linear-gradient(104deg, transparent 18%, var(--actor-color) 19% 82%, transparent 83%) 50% 31% / 100% 42% no-repeat,
        linear-gradient(84deg, transparent 26%, var(--actor-color) 27% 73%, transparent 74%) 50% 100% / 100% 58% no-repeat;
    filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .5));
}

.actor::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 72%;
    height: 20px;
    border-radius: 50%;
    content: "";
    background: rgba(0, 0, 0, .46);
    filter: blur(8px);
    transform: translateX(-50%);
}

.actor span {
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: white;
    background: color-mix(in srgb, var(--actor-color), #080a0e 28%);
    font: 700 1.25rem Georgia, serif;
    transform: translateX(-50%);
}

.actor.has-cutout {
    width: clamp(180px, 25vw, 390px);
    opacity: .7;
}

.actor.has-cutout::before {
    display: none;
}

.actor.has-cutout > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .55));
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 160ms ease,
        transform 200ms cubic-bezier(.22, .72, .22, 1);
}

.actor.has-cutout.is-mirrored > img {
    transform: translateY(0) scaleX(-1);
}

.actor.has-cutout.pose-changing > img {
    opacity: 0;
    transform: translateY(7px);
}

.actor.has-cutout.is-mirrored.pose-changing > img {
    transform: translateY(7px) scaleX(-1);
}

.actor.has-cutout > span {
    display: none;
}

.actor.has-cutout.focused {
    opacity: 1;
}

.actor.focused {
    z-index: 2;
    opacity: .96;
    filter: brightness(1.12);
    transform: translateX(-50%) scale(var(--actor-scale, 1));
}

.actor.enter-left {
    left: -14%;
    opacity: 0;
}

.actor.enter-right {
    left: 114%;
    opacity: 0;
}

.position-left { --actor-x: 21%; }
.position-center-left { --actor-x: 38%; }
.position-center { --actor-x: 50%; }
.position-center-right { --actor-x: 63%; }
.position-right { --actor-x: 76%; }
.position-far-right { --actor-x: 91%; }

.story-screen[data-framing="freight"] .actor {
    width: clamp(210px, 18vw, 340px);
    height: clamp(360px, 50vh, 540px);
}

@media (min-width: 1101px) and (min-height: 601px) {
    .story-screen[data-framing="market"] .actor[data-actor="oren"] {
        width: clamp(220px, 16vw, 300px);
        height: clamp(390px, 50vh, 540px);
    }

    .story-screen[data-framing="market"] .actor[data-actor="enfant"] {
        width: clamp(170px, 13vw, 240px);
        height: clamp(320px, 39vh, 420px);
    }

    .story-screen[data-framing="market"] .actor[data-actor="marchande"] {
        width: clamp(220px, 16vw, 300px);
        height: clamp(390px, 48vh, 520px);
    }

    .story-screen[data-framing="market"] .actor[data-actor="inconnu"] {
        width: clamp(230px, 18vw, 330px);
        height: clamp(300px, 35vh, 380px);
    }

}

.foreground-mask {
    position: absolute;
    inset: 0 auto 0 0;
    width: 7%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(22, 17, 14, .92), rgba(22, 17, 14, .45), transparent);
}

.story-screen[data-framing="market"] .foreground-mask {
    z-index: 4;
    inset: 0;
    width: auto;
    overflow: hidden;
    background: none;
    transform: scale(1.05);
}

.story-screen[data-framing="market"] .foreground-mask::before,
.story-screen[data-framing="market"] .foreground-mask::after {
    position: absolute;
    inset: 0;
    content: "";
    background-image: var(--scene-background);
    background-position: center;
    background-size: cover;
}

.story-screen[data-framing="market"] .foreground-mask::before {
    clip-path: polygon(0 27%, 10% 31%, 17% 100%, 0 100%);
}

.story-screen[data-framing="market"] .foreground-mask::after {
    clip-path: polygon(89% 31%, 100% 27%, 100% 100%, 82% 100%);
}

.insert-visual {
    position: absolute;
    z-index: 5;
    top: 13%;
    left: 50%;
    display: grid;
    place-items: center;
    width: min(56vw, 680px);
    aspect-ratio: 16 / 7;
    border: 1px solid rgba(240, 232, 217, .28);
    opacity: 0;
    pointer-events: none;
    background: rgba(12, 14, 18, .88);
    background-position: center;
    background-size: cover;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
    transform: translate(-50%, 18px);
    transition: opacity 300ms ease, transform 400ms ease;
}

.insert-visual.has-image::before {
    display: none;
}

.insert-visual.has-image::after {
    position: absolute;
    inset: 0;
    border: 10px solid rgba(221, 199, 158, .72);
    content: "";
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(55, 39, 26, .72);
}

.insert-visual.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.insert-visual::before {
    color: var(--paper);
    font: 500 clamp(1.2rem, 3vw, 2.6rem) Georgia, serif;
    letter-spacing: .08em;
    text-align: center;
}

.insert-visual[data-visual="cupboard"]::before { content: "PLACARD OUVERT · COUVERTURES ABSENTES"; }
.insert-visual[data-visual="coffer"]::before { content: "PETIT COFFRE DE VOYAGE · BOIS NOIR"; }
.insert-visual[data-visual="seal"]::before { content: "◈  SCEAU INCONNU  ◈"; color: var(--gold); }
.insert-visual[data-visual="page"]::before { content: "…ACCÈS RÉVOQUÉ… PROCÉDURE EXCEPTIONNELLE…"; font-size: clamp(.9rem, 2vw, 1.55rem); }

.location-card {
    position: absolute;
    z-index: 5;
    top: clamp(22px, 4vw, 52px);
    left: clamp(22px, 5vw, 72px);
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    text-shadow: 0 2px 15px #000;
}

.advance-hitbox {
    z-index: 3;
    width: 100%;
    border: 0;
    background: transparent;
}

.dialogue-panel {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 24px;
    width: min(1040px, calc(100% - 48px));
    min-height: 152px;
    margin: 0 0 clamp(54px, 7vh, 82px);
    border: 1px solid rgba(79, 62, 48, .62);
    color: #27231f;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, .52), transparent 26%),
        var(--paper);
    box-shadow: 12px 16px 0 rgba(5, 7, 10, .45);
    clip-path: polygon(0 0, 97% 0, 100% 20%, 100% 100%, 3% 100%, 0 80%);
    pointer-events: none;
}

.speaker-portrait {
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(79, 62, 48, .25);
    background: var(--speaker-color, #5d5360);
}

.speaker-portrait.has-image {
    background-image: var(--portrait);
    background-position: center 18%;
    background-size: cover;
}

.speaker-portrait::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(17, 18, 22, .28), transparent 60%);
}

.speaker-portrait > span {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .85);
    font: 500 2.6rem Georgia, serif;
}

.speaker-portrait.has-image > span {
    display: none;
}

.dialogue-copy {
    align-self: center;
    padding: 20px 28px;
}

.dialogue-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.speaker,
.thought-label {
    margin: 0;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.speaker {
    color: #72521d;
}

.thought-label {
    display: none;
    color: #7d7480;
}

.dialogue-panel.thought .thought-label {
    display: block;
}

.dialogue-text {
    max-width: 780px;
    margin: 8px 0 0;
    font: 500 clamp(1.03rem, 1.55vw, 1.32rem)/1.42 Georgia, serif;
}

.continue-mark {
    align-self: end;
    width: 11px;
    aspect-ratio: 1;
    margin: 0 0 25px;
    border-right: 2px solid #72521d;
    border-bottom: 2px solid #72521d;
    animation: continue-pulse 900ms ease-in-out infinite;
    transform: rotate(45deg);
}

.story-tools {
    position: absolute;
    z-index: 8;
    right: 24px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, .64);
    font-size: .7rem;
}

.story-tools a,
.story-tools button {
    padding: 0;
    border: 0;
    text-decoration: none;
    background: transparent;
}

.story-tools a:hover,
.story-tools button:hover {
    color: white;
}

.transition-curtain {
    z-index: 12;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #080a0e;
    transition: opacity 450ms ease, visibility 450ms;
}

.transition-curtain span {
    color: var(--gold);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.transition-curtain.active {
    opacity: 1;
    visibility: visible;
}

.transition-curtain.descent {
    background:
        repeating-linear-gradient(90deg, transparent 0 11%, rgba(8, 10, 14, .84) 11.5% 13%),
        linear-gradient(#d8bf83, #1c262a 46%, #080a0e);
    background-size: 100% 180%;
    animation: descend 1.15s linear both;
}

.transition-curtain.workers {
    background:
        linear-gradient(90deg, #080a0e 0 18%, transparent 18% 23%, #080a0e 23% 48%, transparent 48% 54%, #080a0e 54% 100%);
    animation: workers-pass 900ms ease-in-out both;
}

.battle-screen {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
    padding: clamp(8px, 1.1vw, 16px);
    background:
        linear-gradient(rgba(6, 8, 11, .8), rgba(6, 8, 11, .94)),
        url("../game/scenes/06-freight/background/quai-fret-v1.png") center / cover fixed;
}

.battle-screen.active {
    display: grid;
}

.battle-outcome-announcement {
    --outcome-accent: #f4d277;
    --outcome-deep: #9a6b19;
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(34, 29, 18, .46) 0 22%, rgba(4, 6, 9, .88) 74%),
        linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .22) 50%, rgba(0, 0, 0, .72));
    backdrop-filter: blur(2px) saturate(.75);
}

.battle-outcome-announcement[hidden] {
    display: none;
}

.battle-outcome-announcement[data-outcome="defeat"] {
    --outcome-accent: #d98377;
    --outcome-deep: #6f2825;
}

.battle-outcome-announcement.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: battle-outcome-curtain-in 340ms ease-out both;
}

.battle-outcome-announcement.leaving {
    animation: battle-outcome-curtain-out 360ms ease-in both;
}

.battle-outcome-content {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(92vw, 1200px);
    padding: clamp(28px, 5vw, 60px) 0;
    isolation: isolate;
}

.battle-outcome-content::before,
.battle-outcome-content::after {
    content: "";
    width: min(78vw, 820px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--outcome-accent) 20% 80%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--outcome-accent) 72%, transparent);
    transform: scaleX(0);
}

.battle-outcome-announcement.visible .battle-outcome-content::before,
.battle-outcome-announcement.visible .battle-outcome-content::after {
    animation: battle-outcome-rule 520ms 180ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.battle-outcome-kicker {
    margin-bottom: clamp(10px, 2vw, 20px);
    color: #f6f0df;
    font-size: clamp(.65rem, 1.4vw, 1rem);
    font-weight: 900;
    letter-spacing: clamp(.22em, 1vw, .58em);
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000;
}

.battle-outcome-title {
    display: block;
    max-width: 100%;
    color: var(--outcome-accent);
    font: 700 clamp(3.25rem, 14vw, 10.5rem)/.82 Georgia, serif;
    letter-spacing: clamp(.03em, .9vw, .12em);
    text-align: center;
    text-indent: .08em;
    text-shadow:
        0 2px 0 #fff6c6,
        0 7px 0 var(--outcome-deep),
        0 13px 24px rgba(0, 0, 0, .95),
        0 0 38px color-mix(in srgb, var(--outcome-accent) 58%, transparent);
    transform-origin: center;
}

.battle-outcome-announcement.visible .battle-outcome-kicker {
    animation: battle-outcome-kicker-in 440ms 120ms ease-out both;
}

.battle-outcome-announcement.visible .battle-outcome-title {
    animation: battle-outcome-title-in 620ms 90ms cubic-bezier(.15, .92, .25, 1.18) both;
}

.battle-outcome-reward {
    margin-top: clamp(22px, 4vw, 38px);
    padding: .58em 1.1em;
    border: 1px solid color-mix(in srgb, var(--outcome-accent) 72%, transparent);
    border-radius: 999px;
    color: #fff4c4;
    background: rgba(10, 12, 16, .72);
    box-shadow:
        inset 0 0 16px rgba(255, 221, 121, .12),
        0 0 24px color-mix(in srgb, var(--outcome-accent) 34%, transparent);
    font-size: clamp(1rem, 2.4vw, 1.55rem);
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.battle-outcome-announcement.visible .battle-outcome-reward {
    animation: battle-outcome-kicker-in 440ms 420ms ease-out both;
}

@keyframes battle-outcome-curtain-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0) saturate(1);
    }
}

@keyframes battle-outcome-curtain-out {
    to {
        visibility: hidden;
        opacity: 0;
        backdrop-filter: blur(0) saturate(1);
    }
}

@keyframes battle-outcome-title-in {
    0% {
        opacity: 0;
        filter: blur(7px);
        transform: scale(1.5);
    }
    58% {
        opacity: 1;
        filter: blur(0);
        transform: scale(.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes battle-outcome-kicker-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes battle-outcome-rule {
    to {
        transform: scaleX(1);
    }
}

.battle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.battle-header > div:first-child {
    min-width: 0;
}

.battle-title-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.battle-header h1,
.result-screen h1 {
    margin: 0;
    font: 500 clamp(2.4rem, 7vw, 5.6rem)/.95 Georgia, serif;
}

.battle-header h1 {
    flex: none;
    font-size: clamp(1.35rem, 2.5vw, 2.25rem);
    line-height: 1;
}

.battle-header p:last-child {
    overflow: hidden;
    margin: 0;
    color: #a9a39b;
    font-size: clamp(.68rem, 1vw, .88rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turn-counter {
    color: #aaa4b0;
}

.turn-counter strong {
    color: white;
    font-size: 1.15rem;
}

.battle-header-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
}

.battle-restart-button {
    padding: 7px 11px;
    border: 1px solid rgba(202, 171, 103, .58);
    border-radius: 3px;
    color: #e7d4a7;
    background: rgba(13, 15, 20, .78);
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.battle-restart-button:hover,
.battle-restart-button:focus-visible {
    border-color: var(--gold);
    background: rgba(91, 69, 32, .78);
}

.battle-restart-button:disabled {
    cursor: default;
    opacity: .34;
}

.objective {
    width: 100%;
    margin: 0 auto;
    padding: 7px 11px;
    border-left: 3px solid var(--gold);
    background: rgba(22, 25, 31, .9);
}

.objective span {
    margin-right: 12px;
    color: var(--gold);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.battle-layout {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 5px;
    min-height: 0;
    width: 100%;
    margin: 0 auto;
}

.battle-arena {
    position: relative;
    min-height: 0;
    width: 100%;
}

.board {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 1px solid #5a5561;
    border-radius: 6px;
    background:
        linear-gradient(rgba(8, 11, 15, .12), rgba(8, 11, 15, .4)),
        var(--map-background) center / cover;
    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, .55),
        0 24px 70px rgba(0, 0, 0, .35);
    isolation: isolate;
}

.board.touch-camera {
    cursor: grab;
    touch-action: none;
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}

.board.touch-camera.is-dragging {
    cursor: grabbing;
}

.board.touch-camera ~ .map-pan-controls {
    display: none;
}

.map-pan-controls {
    position: absolute;
    z-index: 450;
    top: 50%;
    right: 9px;
    display: grid;
    gap: 4px;
    transform: translateY(-50%);
}

.map-pan-controls button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(214, 183, 112, .75);
    border-radius: 3px;
    color: #f4e8cd;
    background: rgba(17, 19, 24, .88);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .5);
}

.map-pan-controls button:hover,
.map-pan-controls button:focus-visible {
    color: #171717;
    background: var(--gold);
}

.iso-stage {
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: 50% 0;
}

.iso-terrain-layer,
.iso-path-layer,
.iso-object-layer {
    position: absolute;
    inset: 0;
}

.iso-terrain-layer {
    z-index: 1;
}

.iso-path-layer {
    z-index: 2;
    pointer-events: none;
}

.iso-object-layer {
    z-index: 3;
    pointer-events: none;
}

.iso-move-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.iso-move-path-glow,
.iso-move-path-rail,
.iso-move-path-pulse {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.iso-move-path-glow {
    stroke: rgba(58, 207, 255, .3);
    stroke-width: 17;
    filter: blur(5px);
}

.iso-move-path-rail {
    stroke: rgba(17, 39, 55, .94);
    stroke-width: 10;
}

.iso-move-path-pulse {
    stroke: #bff4ff;
    stroke-width: 5;
    stroke-dasharray: 2 14;
    filter:
        drop-shadow(0 0 3px #4dd7ff)
        drop-shadow(0 0 7px rgba(33, 176, 255, .78));
    animation: iso-move-path-flow 720ms linear infinite;
}

.iso-move-path-node {
    fill: #e9fbff;
    stroke: #2fafd8;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px #4fdcff);
}

.iso-move-path-destination {
    fill: rgba(246, 195, 68, .28);
    stroke: #ffeaa1;
    stroke-width: 4;
    filter:
        drop-shadow(0 0 5px #f4c546)
        drop-shadow(0 0 12px rgba(255, 199, 54, .72));
    animation: iso-move-destination-pulse 900ms ease-in-out infinite alternate;
}

.iso-move-path-cost rect {
    fill: rgba(8, 17, 26, .94);
    stroke: #e9c765;
    stroke-width: 2;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .8));
}

.iso-move-path-cost text {
    fill: #fff2c1;
    font: 800 11px/1 system-ui, sans-serif;
    letter-spacing: .02em;
}

.iso-move-height-marker circle {
    fill: rgba(13, 26, 37, .96);
    stroke: #87e1fb;
    stroke-width: 2;
}

.iso-move-height-marker text {
    fill: #fff7d8;
    font: 900 11px/1 system-ui, sans-serif;
}

@keyframes iso-move-path-flow {
    to {
        stroke-dashoffset: -16;
    }
}

@keyframes iso-move-destination-pulse {
    to {
        fill: rgba(255, 213, 86, .52);
        stroke-width: 5;
    }
}

.board::after {
    position: absolute;
    z-index: 300;
    inset: 0;
    border: 1px solid rgba(240, 217, 168, .14);
    content: "";
    pointer-events: none;
    box-shadow: inset 0 -90px 100px rgba(4, 6, 9, .38);
}

.iso-cell {
    position: absolute;
    width: var(--tile-width, 128px);
    height: calc(var(--tile-height, 64px) + var(--cell-elevation, 0) * var(--elevation-height, 32px));
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;
    transform: translate(-50%, calc(-1 * var(--tile-half-height, 32px)));
    transition: filter 120ms ease;
}

.iso-tile-top,
.iso-quay-edge,
.iso-quay-waterline,
.iso-platform-shadow {
    position: absolute;
    display: block;
    pointer-events: none;
}

.iso-tile-top {
    z-index: 3;
    top: 0;
    left: 0;
    width: var(--tile-width, 128px);
    height: var(--tile-height, 64px);
    border: 1px solid rgba(218, 204, 174, .16);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    cursor: pointer;
    pointer-events: auto;
    background:
        url("../game/terrain/dark-stone/top/dark-stone-top-v1.png")
        center / 128px 64px no-repeat;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .18);
    transition:
        background-color 100ms ease,
        border-color 100ms ease,
        box-shadow 100ms ease,
        filter 100ms ease;
}

.iso-cell:disabled .iso-tile-top {
    cursor: default;
    pointer-events: none;
}

.iso-quay-edge,
.iso-quay-waterline,
.iso-platform-shadow {
    z-index: 2;
    top: calc(var(--face-level, 0) * var(--elevation-height, 32px));
    left: 0;
    width: 128px;
    height: 96px;
    background-position: 0 0;
    background-size: 128px 96px;
    background-repeat: no-repeat;
}

.iso-quay-edge {
    border: 0;
    background-image:
        linear-gradient(
            96deg,
            rgba(255, 255, 255, .08),
            transparent 28%,
            rgba(0, 0, 0, .28) 76%
        ),
        linear-gradient(#41454a, #22262b) !important;
    filter: none;
}

.iso-quay-edge[data-orientation="ne"] {
    clip-path: polygon(50% 0, 100% 33.333%, 100% 66.666%, 50% 33.333%);
}

.iso-quay-edge[data-orientation="se"] {
    clip-path: polygon(100% 33.333%, 50% 66.666%, 50% 100%, 100% 66.666%);
}

.iso-quay-edge[data-orientation="sw"] {
    clip-path: polygon(50% 66.666%, 0 33.333%, 0 66.666%, 50% 100%);
}

.iso-quay-edge[data-orientation="nw"] {
    clip-path: polygon(0 33.333%, 50% 0, 50% 33.333%, 0 66.666%);
}

.iso-quay-waterline {
    z-index: 3;
}

.iso-quay-corner {
    display: block;
    clip-path: none;
    background-image: var(--corner-asset) !important;
}

.iso-quay-corner.inner {
    filter: none;
}

.iso-platform-shadow {
    z-index: 1;
}

.iso-cell[data-terrain="water"] .iso-tile-top {
    border-color: rgba(91, 157, 176, .2);
    background-image:
        url("../game/terrain/canal-water/animations/idle/canal-water-idle-sheet-v1.png");
    background-position: 0 0;
    background-size: 1792px 64px;
    box-shadow:
        inset 0 0 12px rgba(10, 29, 36, .45),
        0 0 9px rgba(39, 112, 132, .15);
    animation: canal-water-idle 1960ms steps(14) var(--water-delay, 0ms) infinite;
}

.iso-cell[data-terrain="concrete"] .iso-tile-top {
    border-color: rgba(179, 193, 200, .18);
    background:
        url("../game/terrain/warehouse-concrete/top/warehouse-concrete-top-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-terrain="metal"] .iso-tile-top {
    border-color: rgba(218, 204, 174, .16);
    background:
        url("../game/terrain/metal-plate/top/metal-plate-top-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-terrain="wood"] .iso-tile-top {
    border-color: rgba(172, 128, 79, .24);
    background:
        url("../game/terrain/wood-planks/top/wood-planks-top-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-terrain="grate"] .iso-tile-top {
    border-color: rgba(155, 132, 103, .22);
    background:
        url("../game/terrain/industrial-grate/top/industrial-grate-top-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-shape="stairs-ne"] .iso-tile-top {
    border-color: rgba(188, 181, 166, .22);
    background:
        url("../game/terrain/industrial-stairs/top/industrial-stairs-ne-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-shape="stairs-sw"] .iso-tile-top {
    border-color: rgba(188, 181, 166, .22);
    background:
        url("../game/terrain/industrial-stairs/top/industrial-stairs-sw-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-shape="bridge"] .iso-tile-top {
    border-color: rgba(167, 147, 118, .25);
    background:
        url("../game/terrain/industrial-bridge/top/industrial-bridge-top-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell[data-shape="warehouse-bridge"] .iso-tile-top {
    border-color: rgba(197, 165, 93, .34);
    background:
        url("../game/terrain/warehouse-bridge/top/warehouse-bridge-top-v1.png")
        center / 128px 64px no-repeat;
}

.iso-cell.reachable .iso-tile-top {
    border-color: rgba(142, 219, 255, .92);
    background-color: rgba(47, 137, 177, .58);
    background-blend-mode: screen;
    filter: drop-shadow(0 0 7px rgba(74, 184, 238, .6));
}

.iso-cell.path-destination .iso-tile-top {
    border-color: rgba(255, 239, 168, 1);
    background-color: rgba(230, 174, 47, .88);
    background-blend-mode: screen;
    box-shadow:
        inset 0 0 18px rgba(255, 244, 190, .5),
        0 0 0 2px rgba(255, 216, 103, .72);
    filter:
        brightness(1.15)
        drop-shadow(0 0 10px rgba(255, 201, 72, .9));
}

.iso-stage[data-mode="move"] .iso-cell.reachable:focus-visible {
    outline: none;
}

.iso-stage[data-mode="move"]
    .iso-cell.reachable:is(:hover, :focus-visible, :active)
    .iso-tile-top {
    border-color: rgba(255, 239, 168, 1);
    background-color: rgba(230, 174, 47, .88);
    background-blend-mode: screen;
    box-shadow:
        inset 0 0 18px rgba(255, 244, 190, .5),
        0 0 0 2px rgba(255, 216, 103, .72);
    filter:
        brightness(1.15)
        drop-shadow(0 0 10px rgba(255, 201, 72, .9));
}

@media (prefers-reduced-motion: reduce) {
    .iso-move-path-pulse,
    .iso-move-path-destination {
        animation: none;
    }
}

.iso-cell.attackable .iso-tile-top {
    border-color: rgba(255, 157, 139, .95);
    background-color: rgba(173, 49, 46, .68);
    background-blend-mode: screen;
    filter: drop-shadow(0 0 8px rgba(236, 82, 69, .65));
}

.iso-cell.scenario-objective .iso-tile-top {
    filter: brightness(1.16) saturate(1.18);
    box-shadow:
        inset 0 0 0 3px rgba(246, 207, 101, .92),
        inset 0 0 22px rgba(255, 214, 92, .42),
        0 0 18px rgba(255, 203, 68, .54);
    animation: scenario-objective-pulse 1.45s ease-in-out infinite;
}

.iso-cell.scenario-objective .iso-tile-top::after {
    position: absolute;
    inset: 16% 30%;
    content: "";
    border: solid rgba(255, 238, 168, .94);
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
}

.iso-cell.reinforcement-warning {
    z-index: 240 !important;
}

.iso-cell.reinforcement-warning .iso-tile-top {
    border-color: rgba(255, 178, 111, 1);
    background-color: rgba(178, 25, 25, .82);
    background-blend-mode: screen;
    box-shadow:
        inset 0 0 0 3px rgba(255, 211, 137, .86),
        inset 0 0 24px rgba(255, 54, 39, .84),
        0 0 22px rgba(255, 57, 36, .9);
    filter: brightness(1.2) saturate(1.35);
    animation: reinforcement-cell-warning 520ms ease-in-out infinite alternate;
}

.iso-cell.reinforcement-warning::after {
    position: absolute;
    z-index: 20;
    top: -37px;
    left: 50%;
    min-width: 68px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 209, 132, .9);
    border-radius: 2px;
    color: #fff3d3;
    background: rgba(91, 15, 17, .94);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, .72),
        0 0 14px rgba(255, 59, 38, .58);
    content: "ARRIVÉE";
    font: 900 9px/1 var(--font-display);
    letter-spacing: .1em;
    text-align: center;
    text-shadow: 0 1px 2px #270303;
    transform: translateX(-50%);
}

.iso-objective-beacon {
    position: absolute;
    z-index: 30;
    top: -90px;
    left: 50%;
    display: grid;
    justify-items: center;
    width: 110px;
    height: 94px;
    pointer-events: none;
    transform: translateX(-50%);
    animation: objective-beacon-reveal 620ms cubic-bezier(.2, .8, .2, 1) both;
}

.iso-objective-beacon::before {
    position: absolute;
    top: 24px;
    width: 60px;
    height: 78px;
    content: "";
    background: linear-gradient(
        rgba(255, 239, 155, .72),
        rgba(255, 197, 56, .18) 64%,
        transparent
    );
    clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%);
    filter: blur(4px);
}

.iso-objective-beacon b {
    position: relative;
    z-index: 2;
    padding: 5px 12px;
    border: 1px solid #ffe89a;
    color: #fff4c5;
    background: rgba(24, 19, 9, .94);
    box-shadow: 0 0 18px rgba(255, 200, 56, .8);
    font: 900 12px/1 var(--font-display);
    letter-spacing: .14em;
}

.iso-objective-beacon i {
    position: relative;
    z-index: 2;
    width: 25px;
    height: 25px;
    margin-top: 12px;
    border: solid #fff0a8;
    border-width: 0 6px 6px 0;
    filter: drop-shadow(0 0 5px #f9c64c);
    transform: rotate(45deg);
    animation: objective-beacon-arrow 760ms ease-in-out infinite alternate;
}

.iso-cell.guard-direction {
    cursor: default;
}

.iso-map-prop {
    position: absolute;
    width: 256px;
    height: var(--prop-height, 120px);
    pointer-events: none;
    transform: translate(-50%, calc(-100% + var(--prop-ground-offset, 0px)));
}

.iso-map-prop img {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    width: auto;
    max-width: none;
    height: var(--prop-height, 120px);
    user-select: none;
    transform: translateX(-50%);
    transition: opacity 240ms ease;
    will-change: opacity;
}

.iso-prop-shadow {
    position: absolute;
    z-index: 0;
    bottom: var(--prop-shadow-lift, 0);
    left: 50%;
    width: var(--prop-shadow-width, 72px);
    height: var(--prop-shadow-height, 20px);
    border-radius: 50%;
    background: rgba(3, 5, 7, .3);
    content: "";
    filter: blur(6px);
    transform: translateX(-50%);
    transition: opacity 240ms ease;
}

.iso-map-prop.is-unit-occluder img {
    opacity: .22;
    transition-duration: 140ms;
}

.iso-map-prop.is-unit-occluder .iso-prop-shadow {
    opacity: .12;
    transition-duration: 140ms;
}

.iso-prop-light-pool,
.iso-prop-light-glow,
.iso-prop-light-bulb {
    position: absolute;
    pointer-events: none;
    opacity: var(--prop-light-intensity, .9);
    will-change: opacity;
}

.iso-prop-light-pool {
    z-index: 1;
    bottom: var(--prop-light-pool-bottom, -5px);
    left: calc(50% + var(--prop-light-pool-offset-x, 0px));
    width: var(--prop-light-pool-width, 190px);
    height: var(--prop-light-pool-height, 70px);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(var(--prop-light-color, 255, 218, 138), .29),
        rgba(var(--prop-light-color, 255, 218, 138), .13) 42%,
        transparent 74%
    );
    mix-blend-mode: screen;
    filter: blur(7px);
    transform: translateX(-50%) skewX(-12deg);
}

.iso-prop-light-glow {
    z-index: 1;
    top: var(--prop-glow-top, 0);
    left: 50%;
    width: var(--prop-glow-size, 80px);
    height: var(--prop-glow-size, 80px);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 245, 208, .48),
        rgba(var(--prop-light-color, 255, 218, 138), .32) 28%,
        rgba(var(--prop-light-color, 255, 218, 138), .12) 52%,
        transparent 72%
    );
    mix-blend-mode: screen;
    filter: blur(5px);
    transform: translateX(-50%);
}

.iso-prop-light-bulb {
    z-index: 3;
    top: var(--prop-bulb-top, 2px);
    left: 50%;
    width: var(--prop-bulb-width, 60px);
    height: var(--prop-bulb-height, 76px);
    border-radius: 46%;
    background: radial-gradient(
        ellipse at 50% 48%,
        rgba(255, 255, 238, .72),
        rgba(var(--prop-light-color, 255, 218, 138), .26) 48%,
        transparent 73%
    );
    mix-blend-mode: screen;
    filter: blur(2px);
    transform: translateX(-50%);
}

.iso-map-prop[data-light-mode="unstable"] .iso-prop-light-pool,
.iso-map-prop[data-light-mode="unstable"] .iso-prop-light-glow,
.iso-map-prop[data-light-mode="unstable"] .iso-prop-light-bulb {
    animation:
        prop-light-unstable
        var(--prop-light-cycle, 8300ms)
        steps(1, end)
        var(--prop-light-delay, 0ms)
        infinite;
}

.iso-map-prop[data-light-mode="unstable"] img {
    animation:
        prop-fixture-unstable
        var(--prop-light-cycle, 8300ms)
        steps(1, end)
        var(--prop-light-delay, 0ms)
        infinite;
    will-change: filter, opacity;
}

.iso-map-prop[data-light-mode="off"] .iso-prop-light-pool,
.iso-map-prop[data-light-mode="off"] .iso-prop-light-glow,
.iso-map-prop[data-light-mode="off"] .iso-prop-light-bulb {
    display: none;
}

.iso-map-prop[data-light-mode="off"] img {
    filter: brightness(.52) saturate(.54);
}

.iso-unit {
    position: absolute;
    width: 192px;
    height: 192px;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;
    transform: translate(-50%, -82%);
    transition:
        left var(--move-duration, 220ms) linear,
        top var(--move-duration, 220ms) linear;
}

.iso-unit.reinforcement-entering {
    opacity: 0;
    filter: blur(2px) brightness(.72);
    transform:
        translate(
            calc(-50% + var(--reinforcement-entry-x, 0px)),
            calc(-82% + var(--reinforcement-entry-y, 0px))
        )
        scale(.94);
    transition:
        left var(--move-duration, 220ms) linear,
        top var(--move-duration, 220ms) linear,
        opacity 180ms ease,
        filter var(--reinforcement-entry-duration, 1100ms) ease,
        transform var(--reinforcement-entry-duration, 1100ms)
            cubic-bezier(.16, .78, .24, 1);
}

.iso-unit.reinforcement-entering.arriving {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -82%) scale(1);
}

.iso-unit-hitbox {
    position: absolute;
    z-index: 6;
    bottom: 18px;
    left: 50%;
    width: 72px;
    height: 118px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transform: translateX(-50%);
}

.iso-unit.downed .iso-unit-hitbox {
    bottom: 8px;
    width: 112px;
    height: 64px;
}

.iso-unit.downed .iso-unit-health {
    display: none;
}

.iso-downed-counter {
    position: absolute;
    z-index: 7;
    bottom: 12px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid #f0c6b8;
    border-radius: 50%;
    color: #fff4ee;
    background: radial-gradient(circle at 35% 30%, #c85d50, #651f21 72%);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .85),
        0 0 12px rgba(214, 73, 60, .7);
    font: 900 18px/1 var(--font-display);
    text-shadow: 0 2px 2px #3a0b0d;
    transform: translateX(-50%);
}

.iso-downed-counter[hidden] {
    display: none;
}

.iso-damage-popup {
    position: absolute;
    z-index: 9;
    top: 35px;
    left: 50%;
    display: grid;
    place-items: center;
    min-width: 52px;
    padding: 4px 9px 5px;
    border: 1px solid rgba(255, 184, 143, .78);
    border-radius: 7px;
    color: #fff4df;
    background:
        linear-gradient(135deg, rgba(81, 20, 20, .94), rgba(27, 9, 14, .94));
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .72),
        0 0 12px rgba(235, 76, 54, .42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(.82);
}

.iso-damage-popup.visible {
    animation: iso-damage-popup 1080ms cubic-bezier(.18, .74, .26, 1) both;
}

.iso-damage-popup strong {
    color: #fff8e9;
    font: 900 24px/.88 Georgia, serif;
    text-shadow:
        0 2px 2px #240407,
        0 0 8px rgba(255, 126, 88, .85);
}

.iso-damage-popup span {
    margin-top: 3px;
    color: #ffb991;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .15em;
}

.iso-damage-popup[data-angle="dos"] {
    border-color: rgba(255, 218, 108, .92);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .72),
        0 0 15px rgba(255, 183, 52, .68);
}

.iso-damage-popup[data-angle="dos"] span {
    color: #ffe08c;
}

.iso-damage-popup[data-angle="garde"] {
    border-color: rgba(139, 221, 247, .9);
    background:
        linear-gradient(135deg, rgba(22, 65, 83, .95), rgba(9, 24, 36, .95));
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .72),
        0 0 13px rgba(85, 191, 230, .55);
}

.iso-damage-popup[data-angle="garde"] span {
    color: #bdefff;
}

.iso-damage-popup[data-kind="healing"] {
    border-color: rgba(133, 238, 188, .92);
    background:
        linear-gradient(135deg, rgba(17, 75, 59, .96), rgba(7, 29, 31, .96));
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .72),
        0 0 16px rgba(76, 225, 160, .68);
}

.iso-damage-popup[data-kind="healing"] strong {
    text-shadow:
        0 2px 2px #05221a,
        0 0 9px rgba(117, 255, 197, .9);
}

.iso-damage-popup[data-kind="healing"] span {
    color: #a9f5d1;
}

.iso-stage[data-mode="move"] .iso-unit-hitbox {
    pointer-events: none;
}

.iso-sprite,
.iso-effect,
.iso-shadow {
    position: absolute;
    inset: 0;
    display: block;
    width: 192px;
    height: 192px;
    background-repeat: no-repeat;
}

.iso-shadow {
    z-index: 0;
    background-image: url("../game/effects/duel/shadow-standing/sheet-v1.png");
    background-position: 0 0;
}

.iso-sprite {
    z-index: 2;
}

.iso-effect {
    z-index: 3;
}

.iso-level-up-burst,
.iso-level-up-label {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
}

.iso-level-up-burst {
    bottom: 18px;
    left: 50%;
    width: 112px;
    height: 112px;
    border: 4px solid rgba(255, 221, 116, .9);
    border-radius: 50%;
    box-shadow:
        0 0 16px rgba(255, 224, 117, .95),
        inset 0 0 18px rgba(255, 236, 166, .72);
    transform: translateX(-50%) scale(.15);
}

.iso-level-up-burst::before,
.iso-level-up-burst::after {
    position: absolute;
    inset: -36px 49px;
    content: "";
    background: linear-gradient(
        transparent,
        rgba(255, 234, 154, .95) 38%,
        white 50%,
        rgba(255, 211, 83, .9) 62%,
        transparent
    );
}

.iso-level-up-burst::after {
    transform: rotate(90deg);
}

.iso-level-up-label {
    top: -22px;
    left: 50%;
    padding: 5px 12px;
    border: 1px solid rgba(255, 231, 157, .9);
    border-radius: 999px;
    color: #fff6ce;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .12em;
    text-shadow: 0 2px 4px #311f08, 0 0 10px #ffcf5a;
    white-space: nowrap;
    background: rgba(45, 31, 12, .82);
    transform: translate(-50%, 12px);
}

.iso-unit.leveling-up:not(.bespoke-level-up) .iso-level-up-burst {
    animation: level-up-burst var(--level-up-duration, 1800ms) ease-out 1;
}

.iso-unit.leveling-up .iso-level-up-label {
    animation: level-up-label var(--level-up-duration, 1800ms) ease-out 1;
}

.iso-unit.generic-level-up {
    animation: level-up-unit-jump var(--level-up-duration, 1800ms) ease-in-out 1;
}

.iso-sprite,
.iso-effect,
.iso-shadow {
    transform: scale(var(--unit-scale, 1));
    transform-origin: 50% 88%;
}

.iso-sprite.playing,
.iso-effect.playing {
    animation: sprite-action-eight var(--animation-duration, 640ms) steps(8) 1;
    transform:
        translateY(var(--action-ground-offset, 0))
        scaleX(var(--action-mirror, 1))
        scale(var(--animation-scale, 1))
        scale(var(--unit-scale, 1));
}

.iso-sprite.playing.reverse {
    animation-direction: reverse;
}

.iso-unit.incapacitated .iso-unit-health,
.iso-unit.incapacitated .iso-facing {
    display: none;
}

.iso-unit.neutral .iso-sprite {
    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, .8))
        saturate(.74)
        brightness(.84);
}

.battle-scenario-card {
    position: absolute;
    z-index: 250;
    top: 50%;
    left: 50%;
    width: min(620px, calc(100% - 28px));
    padding: 18px 28px;
    border: 1px solid rgba(220, 181, 92, .82);
    color: #f8edcf;
    text-align: center;
    background:
        linear-gradient(90deg, transparent, rgba(188, 142, 57, .2), transparent),
        rgba(8, 12, 18, .94);
    box-shadow:
        0 20px 55px rgba(0, 0, 0, .75),
        inset 0 0 28px rgba(80, 111, 138, .14);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: battle-scenario-card-in 280ms ease-out both;
}

.battle-scenario-card.leaving {
    animation: battle-scenario-card-out 280ms ease-in both;
}

.battle-scenario-card > strong {
    display: block;
    color: #f3cb68;
    font: 900 clamp(25px, 4vw, 46px)/1 var(--font-display);
    letter-spacing: .16em;
    text-shadow: 0 3px 16px rgba(226, 161, 45, .48);
}

.battle-scenario-card > p {
    margin: 8px 0 0;
}

.map-dialogue-bubble {
    --dialogue-paper: #d9d1bc;
    --dialogue-paper-dark: #b7ad96;
    --dialogue-ink: #211f1b;
    --dialogue-line: #5d574a;
    position: absolute;
    z-index: 460;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    grid-template-areas:
        "content portrait"
        "continue portrait";
    gap: 3px 16px;
    width: min(470px, calc(100% - 24px));
    min-height: 124px;
    padding: 16px 17px 11px 21px;
    border: 2px solid #4b473d;
    border-radius: 5px;
    color: var(--dialogue-ink);
    text-align: left;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .4), transparent 36%),
        repeating-linear-gradient(0deg, rgba(65, 58, 44, .028) 0 1px, transparent 1px 4px),
        linear-gradient(145deg, #e7dfca, var(--dialogue-paper) 54%, var(--dialogue-paper-dark));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .58),
        0 0 0 1px rgba(217, 184, 105, .7),
        inset 0 0 0 1px rgba(255, 250, 225, .62),
        inset 0 -12px 26px rgba(67, 59, 43, .1);
    appearance: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transform-origin: var(--dialogue-tail-x, 50%) bottom;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.2, .86, .28, 1);
}

.map-dialogue-bubble::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 24px;
    height: 24px;
    border: solid #4b473d;
    background: var(--dialogue-paper-dark);
    box-shadow: 1px 1px 0 rgba(217, 184, 105, .75);
    transform: rotate(45deg);
}

.map-dialogue-bubble[data-placement="above"]::before {
    bottom: -13px;
    left: calc(var(--dialogue-tail-x) - 12px);
    border-width: 0 2px 2px 0;
}

.map-dialogue-bubble[data-placement="below"]::before {
    top: -13px;
    left: calc(var(--dialogue-tail-x) - 12px);
    border-width: 2px 0 0 2px;
    background: #e2dac5;
}

.map-dialogue-bubble[data-placement="left"]::before {
    top: calc(var(--dialogue-tail-y) - 12px);
    right: -13px;
    border-width: 2px 2px 0 0;
}

.map-dialogue-bubble[data-placement="right"]::before {
    top: calc(var(--dialogue-tail-y) - 12px);
    left: -13px;
    border-width: 0 0 2px 2px;
    background: #e2dac5;
}

.map-dialogue-bubble[data-placement="floating"]::before {
    display: none;
}

.map-dialogue-bubble.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.map-dialogue-bubble.leaving {
    opacity: 0;
    transform: translateY(-5px) scale(.985);
}

.map-dialogue-bubble:focus-visible {
    outline: 3px solid #f2cb69;
    outline-offset: 4px;
}

.map-dialogue-content {
    grid-area: content;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-self: center;
}

.map-dialogue-kicker {
    margin-bottom: 4px;
    color: #806329;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.map-dialogue-speaker {
    display: block;
    margin-bottom: 5px;
    color: #302b22;
    font: 800 1rem/1.05 var(--font-display);
    letter-spacing: .02em;
}

.map-dialogue-copy {
    display: block;
    color: var(--dialogue-ink);
    font: 600 .88rem/1.38 var(--font-body);
    text-wrap: pretty;
}

.map-dialogue-portrait-frame {
    position: relative;
    grid-area: portrait;
    align-self: stretch;
    min-height: 88px;
    overflow: hidden;
    border: 1px solid #5d574b;
    border-radius: 2px;
    background:
        linear-gradient(135deg, rgba(240, 215, 154, .38), transparent 45%),
        #25282c;
    box-shadow:
        0 0 0 1px rgba(255, 246, 211, .65),
        0 4px 11px rgba(44, 38, 28, .35);
}

.map-dialogue-portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(218, 178, 91, .34);
    pointer-events: none;
}

.map-dialogue-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.map-dialogue-bubble.portrait-left {
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas:
        "portrait content"
        "portrait continue";
    padding-right: 21px;
    padding-left: 17px;
}

.map-dialogue-bubble.without-portrait {
    grid-template-columns: 1fr;
    grid-template-areas:
        "content"
        "continue";
    min-height: 0;
}

.map-dialogue-continue {
    grid-area: continue;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-self: end;
    align-self: end;
    margin-top: 5px;
    color: #66562f;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.map-dialogue-continue i {
    width: 8px;
    height: 8px;
    border-right: 2px solid #8c6a2e;
    border-bottom: 2px solid #8c6a2e;
    transform: rotate(45deg);
    animation: map-dialogue-mark 900ms ease-in-out infinite;
}

.iso-unit.elevation-change .iso-sprite.playing {
    animation:
        sprite-action-eight var(--animation-duration, 640ms) steps(8) 1,
        sprite-jump-arc var(--animation-duration, 640ms) cubic-bezier(.22, .72, .28, 1) 1;
}

.iso-sprite.held-final {
    transform:
        translateY(var(--action-ground-offset, 0))
        scaleX(var(--action-mirror, 1))
        scale(var(--animation-scale, 1))
        scale(var(--unit-scale, 1));
}

.iso-sprite.idle-loop {
    animation:
        sprite-idle-eight
        var(--idle-duration, 4000ms)
        steps(8)
        var(--idle-delay, 0ms)
        infinite;
}

.iso-sprite.guard-loop {
    transform:
        scaleX(var(--action-mirror, 1))
        scale(var(--animation-scale, 1))
        scale(var(--unit-scale, 1));
}

.iso-unit.active .iso-sprite {
    filter:
        drop-shadow(0 0 2px white)
        drop-shadow(0 0 8px rgba(111, 201, 255, .9));
}

.iso-unit.enemy.active .iso-sprite {
    filter:
        drop-shadow(0 0 2px white)
        drop-shadow(0 0 8px rgba(255, 121, 104, .9));
}

.iso-unit.selected::after {
    position: absolute;
    z-index: 1;
    bottom: 25px;
    left: 50%;
    width: 70px;
    height: 34px;
    border: 3px solid #f4d17b;
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
    filter: drop-shadow(0 0 5px #f4d17b);
}

.iso-unit.attack-preview::after {
    border-color: #f0a24e;
    background: radial-gradient(ellipse, rgba(184, 53, 35, .22), transparent 68%);
    filter:
        drop-shadow(0 0 4px #ffb258)
        drop-shadow(0 0 10px rgba(221, 73, 48, .85));
}

.iso-unit.attack-preview-locked::after {
    border-width: 4px;
    border-color: #ffe094;
    background: radial-gradient(ellipse, rgba(213, 80, 38, .34), transparent 68%);
    animation: attack-target-lock 720ms ease-in-out infinite alternate;
}

@keyframes attack-target-lock {
    to {
        transform: translateX(-50%) scale(1.1);
        filter:
            drop-shadow(0 0 5px #fff0ad)
            drop-shadow(0 0 14px rgba(237, 89, 46, .95));
    }
}

.iso-loot-chest {
    position: absolute;
    width: 192px;
    height: 192px;
    pointer-events: none;
    transform: translate(-50%, -82%);
    animation: loot-chest-appear 420ms cubic-bezier(.18, .9, .28, 1.2) both;
}

.iso-loot-chest img {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 12px;
    width: 168px;
    height: 168px;
    object-fit: contain;
    pointer-events: none;
}

.iso-loot-shadow {
    position: absolute;
    z-index: 1;
    bottom: 15px;
    left: 50%;
    width: 92px;
    height: 25px;
    border-radius: 50%;
    opacity: .62;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .82), transparent 72%);
    transform: translateX(-50%);
}

.iso-loot-hitbox {
    position: absolute;
    z-index: 4;
    bottom: 17px;
    left: 50%;
    width: 102px;
    height: 80px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transform: translateX(-50%);
}

.iso-stage[data-mode="move"] .iso-loot-hitbox {
    pointer-events: auto;
}

.iso-loot-chest.selected img {
    filter:
        drop-shadow(0 0 2px #fff2c2)
        drop-shadow(0 0 10px rgba(231, 186, 87, .92));
}

.iso-facing {
    position: absolute;
    z-index: 4;
    bottom: 28px;
    left: 50%;
    width: 0;
    height: 0;
    border-right: 7px solid transparent;
    border-bottom: 16px solid rgba(244, 209, 123, .9);
    border-left: 7px solid transparent;
    opacity: 0;
    transform: translate(-50%, 20px);
}

.iso-unit.guarding .iso-facing,
.iso-unit.preview-facing .iso-facing {
    opacity: 1;
}

.iso-unit[data-facing="north-east"] .iso-facing { transform: translate(-50%, 20px) rotate(45deg); }
.iso-unit[data-facing="south-east"] .iso-facing { transform: translate(-50%, 20px) rotate(135deg); }
.iso-unit[data-facing="south-west"] .iso-facing { transform: translate(-50%, 20px) rotate(225deg); }
.iso-unit[data-facing="north-west"] .iso-facing { transform: translate(-50%, 20px) rotate(315deg); }

.iso-unit-health {
    position: absolute;
    z-index: 5;
    top: 13px;
    left: 50%;
    overflow: hidden;
    width: 64px;
    height: 5px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 5px;
    background: rgba(10, 12, 16, .8);
    transform: translateX(-50%);
}

.iso-unit-health > span {
    display: block;
    height: 100%;
    background: #6cc5ec;
    transition: width 180ms ease;
}

.iso-unit.enemy .iso-unit-health > span {
    background: #df7267;
}

.hint {
    min-height: 1.5em;
    margin: 0;
    color: #b4aeb8;
}

.battle-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
    min-height: 0;
}

.battle-command-panel {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
}

.timeline-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    min-width: 0;
    min-height: 58px;
    padding: 7px 32px;
    background:
        url("../game/ui/battle-hud/ornaments/corner-cap-left-v1.svg") left center / auto 100% no-repeat,
        url("../game/ui/battle-hud/ornaments/corner-cap-right-v1.svg") right center / auto 100% no-repeat,
        url("../game/ui/battle-hud/frames/timeline-rail-v1.svg") center / 100% 100% no-repeat;
}

.timeline-label {
    flex: none;
    min-width: 116px;
    padding-left: 8px;
    color: #e5cb85;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-shadow: 0 1px 3px #000;
    text-transform: uppercase;
}

.unit-context-menu {
    position: relative;
    z-index: 10;
    overflow: visible;
    width: 100%;
    color: var(--paper);
    background: transparent;
}

.facing-overlay {
    position: absolute;
    z-index: 500;
    width: 232px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.unit-context-menu.guard-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #8d713f;
    background: rgba(9, 15, 24, .96);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .46);
}

.unit-context-menu.attack-forecast-mode {
    overflow: visible;
}

.attack-forecast-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(150px, .58fr) minmax(250px, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 118px;
    padding: 14px 24px 40px;
    color: #f2e8d4;
    background:
        url("../game/ui/battle-hud/frames/attack-forecast-frame-v1.svg")
        center / 100% 100% no-repeat;
    border: 0;
    clip-path: polygon(0 8%, 47% 8%, 50% 0, 53% 8%, 100% 8%, 100% 92%, 53% 92%, 50% 100%, 47% 92%, 0 92%);
    box-shadow:
        inset 0 0 0 2px rgba(202, 164, 83, .08),
        inset 0 0 32px rgba(3, 6, 10, .72),
        0 9px 20px rgba(0, 0, 0, .62);
}

.attack-forecast-unit {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.attack-forecast-unit.defender {
    grid-template-columns: minmax(0, 1fr) 76px;
    text-align: right;
}

.attack-forecast-unit > img {
    width: 74px;
    height: 74px;
    padding: 8px;
    object-fit: cover;
    object-position: top;
    background: url("../game/ui/battle-hud/frames/portrait-frame-v1.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .75));
}

.attack-forecast-unit.defender > img {
    filter:
        sepia(.12)
        drop-shadow(0 4px 5px rgba(0, 0, 0, .75))
        drop-shadow(0 0 5px rgba(199, 79, 68, .35));
}

.attack-forecast-unit.team-ally > img {
    filter:
        drop-shadow(0 4px 5px rgba(0, 0, 0, .75))
        drop-shadow(0 0 5px rgba(83, 185, 224, .35));
}

.attack-forecast-unit > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.attack-forecast-unit small {
    color: #87cde6;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.attack-forecast-unit.defender small {
    color: #e78477;
}

.attack-forecast-unit.team-ally small {
    color: #87cde6;
}

.attack-forecast-unit.team-enemy small {
    color: #e78477;
}

.attack-forecast-unit strong {
    overflow: hidden;
    color: #f6ecd9;
    font: 700 clamp(.88rem, 1.5vw, 1.12rem)/1.05 Georgia, serif;
    text-overflow: ellipsis;
    text-shadow: 0 2px 3px #000;
    white-space: nowrap;
}

.attack-forecast-unit span {
    overflow: hidden;
    color: #9da9b5;
    font-size: .51rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attack-forecast-unit > div > em {
    color: #d9d1c3;
    font-size: .56rem;
    font-style: normal;
    font-weight: 900;
}

.attack-forecast-unit > div > em b {
    color: #ff9b8d;
    font-size: .72rem;
}

.attack-forecast-health {
    position: relative;
    display: block;
    overflow: hidden;
    height: 8px;
    margin-top: 3px;
    border: 1px solid #273746;
    border-radius: 5px;
    background: #05090e;
    box-shadow: inset 0 1px 2px #000;
}

.attack-forecast-health > b {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
}

.attack-forecast-health.ally > b {
    background: linear-gradient(90deg, #2d7e9f, #7ddcf1);
    box-shadow: 0 0 6px rgba(112, 201, 232, .8);
}

.attack-forecast-health.ally > .before {
    z-index: 1;
    background: rgba(54, 135, 166, .4);
}

.attack-forecast-health.ally > .after {
    z-index: 2;
    background: linear-gradient(90deg, #2d7e9f, #7ddcf1);
    box-shadow: 0 0 6px rgba(112, 201, 232, .8);
}

.attack-forecast-health.enemy > b {
    background: linear-gradient(90deg, #772d28, #dc7062);
    box-shadow: 0 0 6px rgba(215, 91, 78, .72);
}

.attack-forecast-health.enemy > .before {
    z-index: 1;
    background: rgba(154, 62, 53, .4);
}

.attack-forecast-health.enemy > .after {
    z-index: 2;
    background: linear-gradient(90deg, #772d28, #dc7062);
    box-shadow: 0 0 6px rgba(215, 91, 78, .72);
}

.attack-forecast-result {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 92px;
    text-align: center;
}

.attack-forecast-result::before {
    position: absolute;
    z-index: -1;
    width: 126px;
    height: 82px;
    border: 0;
    content: "";
    background:
        url("../game/ui/battle-hud/ornaments/damage-medallion-v1.svg")
        center / contain no-repeat;
    clip-path: none;
    filter: drop-shadow(0 0 9px rgba(203, 158, 65, .24));
}

.attack-forecast-result small {
    color: #b9a578;
    font-size: .44rem;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.attack-forecast-result > strong {
    color: #fff7df;
    font: 700 clamp(1.9rem, 4vw, 3.1rem)/.88 Georgia, serif;
    text-shadow:
        0 2px 3px #000,
        0 0 12px rgba(242, 196, 91, .32);
}

.attack-forecast-result > span {
    color: #cfbd98;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.attack-forecast-result > em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 10px 2px 4px;
    border: 1px solid rgba(234, 191, 91, .72);
    border-radius: 999px;
    color: #ffe8a5;
    background: rgba(92, 58, 17, .62);
    font-size: .58rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .14em;
}

.attack-forecast-result > em img {
    width: 24px;
    height: 24px;
    margin: -6px 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}

.attack-forecast-result > em span {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.attack-forecast-shell[data-angle="front"] .attack-forecast-result > em {
    border-color: rgba(180, 184, 192, .66);
    color: #e4e6ea;
    background: rgba(62, 67, 74, .62);
}

.attack-forecast-shell[data-angle="side"] .attack-forecast-result > em {
    border-color: rgba(224, 153, 66, .8);
    color: #ffd09b;
    background: rgba(105, 51, 18, .66);
}

.attack-forecast-shell[data-angle="back"] .attack-forecast-result > em {
    border-color: rgba(245, 190, 68, .9);
    color: #fff0a8;
    background: rgba(121, 39, 28, .72);
    box-shadow: 0 0 10px rgba(224, 91, 52, .38);
}

.attack-forecast-shell[data-angle="guarded"] .attack-forecast-result > em {
    border-color: rgba(103, 192, 227, .86);
    color: #c9f2ff;
    background: rgba(28, 70, 91, .72);
}

.attack-forecast-actions {
    position: absolute;
    right: 22px;
    bottom: 9px;
    left: 22px;
    display: grid;
    grid-template-columns: minmax(80px, .4fr) 1fr minmax(100px, .55fr);
    align-items: center;
    gap: 8px;
}

.attack-forecast-actions > span {
    color: #aa9f8c;
    font-size: .52rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.attack-forecast-actions button {
    min-height: 27px;
    padding: 4px 12px;
    border: 1px solid rgba(176, 151, 98, .72);
    border-radius: 3px;
    color: #e8dfcf;
    background: rgba(20, 25, 33, .9);
    font-size: .61rem;
    font-weight: 900;
}

.attack-forecast-actions button.primary {
    border-color: #d0aa5d;
    color: #19150d;
    background: linear-gradient(#e1c477, #b88a3f);
}

.attack-forecast-actions button:disabled {
    cursor: default;
    filter: grayscale(.8);
    opacity: .42;
}

.attack-forecast-actions.incoming {
    grid-template-columns: 1fr;
}

.attack-forecast-actions.incoming > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffb0a2;
    letter-spacing: .14em;
}

.attack-forecast-actions.incoming > span > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff7a67;
    box-shadow: 0 0 9px rgba(255, 102, 84, .9);
    animation: incoming-attack-pulse 620ms ease-in-out infinite alternate;
}

.attack-forecast-shell[data-incoming="true"] {
    box-shadow:
        inset 0 0 0 2px rgba(210, 78, 65, .11),
        inset 0 0 34px rgba(70, 12, 15, .38),
        0 9px 22px rgba(0, 0, 0, .66);
}

.guard-title {
    color: var(--gold);
    font-size: .72rem;
}

.facing-picker {
    position: relative;
    width: 232px;
    height: 158px;
    margin: 0 auto;
}

.facing-choice {
    position: absolute;
    width: 52px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
    transition: filter 140ms ease, transform 140ms ease;
}

.facing-choice::before {
    position: absolute;
    inset: 3px;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 17% 50%);
    content: "";
    background: linear-gradient(90deg, #fff1bd, #e4b84e);
    box-shadow: inset 0 0 0 2px rgba(88, 61, 15, .38);
}

.facing-choice:hover,
.facing-choice:focus-visible {
    outline: 0;
    filter:
        drop-shadow(0 0 3px #fff4c4)
        drop-shadow(0 0 8px rgba(226, 181, 73, .88));
}

.facing-choice.selected {
    filter:
        drop-shadow(0 0 2px #fff0ac)
        drop-shadow(0 0 10px rgba(211, 155, 34, .95));
}

.facing-choice.selected::before {
    background: linear-gradient(90deg, #d59a21, #9f6810);
    box-shadow:
        inset 0 0 0 2px rgba(255, 233, 157, .75),
        0 0 10px rgba(220, 167, 53, .65);
}

.facing-nw { top: 10px; left: 18px; transform: rotate(45deg); }
.facing-ne { top: 10px; right: 18px; transform: rotate(135deg); }
.facing-sw { bottom: 12px; left: 18px; transform: rotate(-45deg); }
.facing-se { right: 18px; bottom: 12px; transform: rotate(225deg); }

.facing-nw.selected { transform: rotate(45deg) scale(1.13); }
.facing-ne.selected { transform: rotate(135deg) scale(1.13); }
.facing-sw.selected { transform: rotate(-45deg) scale(1.13); }
.facing-se.selected { transform: rotate(225deg) scale(1.13); }

.facing-confirm {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 6px;
    width: min(174px, 55%);
    margin: 0;
    pointer-events: auto;
}

.facing-confirm button {
    min-height: 30px;
    padding: 5px 6px;
    border: 1px solid rgba(201, 178, 125, .78);
    border-radius: 3px;
    color: var(--paper);
    background: rgba(28, 30, 35, .82);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .38);
    font-size: .67rem;
    font-weight: 800;
    backdrop-filter: blur(3px);
}

.facing-confirm .primary {
    border-color: #b89655;
    color: #171717;
    background: var(--gold);
}

.unit-context-menu.loot-mode {
    overflow: hidden;
    border: 1px solid #9b8659;
    border-radius: 4px;
    background: rgba(19, 20, 25, .97);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .46);
}

.hud-command-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, .88fr) minmax(510px, 1.12fr);
    gap: 12px;
    min-height: 118px;
    padding: 17px 22px 15px;
    background:
        linear-gradient(90deg, rgba(7, 12, 19, .16), rgba(16, 24, 35, .3)),
        url("../game/ui/battle-hud/frames/unit-panel-frame-v1.svg") center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5));
}

.hud-command-shell::after {
    position: absolute;
    z-index: -1;
    inset: 19px 28px;
    content: "";
    background:
        linear-gradient(rgba(8, 13, 21, .76), rgba(8, 13, 21, .83)),
        url("../game/ui/battle-hud/textures/hud-forged-vellum-texture-v1.png") center 62% / cover;
    opacity: .5;
}

.hud-unit-summary {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.hud-unit-portrait {
    position: relative;
    width: 82px;
    height: 82px;
    padding: 10px;
    background: url("../game/ui/battle-hud/frames/portrait-frame-v1.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .7));
}

.hud-unit-portrait img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
    object-position: top;
}

.hud-unit-copy {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.hud-unit-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hud-unit-title > strong {
    overflow: hidden;
    color: #f4ead4;
    font: 700 clamp(.95rem, 1.5vw, 1.2rem)/1.05 Georgia, serif;
    text-overflow: ellipsis;
    text-shadow: 0 2px 3px #000;
    white-space: nowrap;
}

.hud-unit-title > span,
.hud-unit-copy > small {
    color: #c6a668;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hud-unit-copy > small {
    color: #95a5b6;
}

.hud-health-row {
    display: grid;
    grid-template-columns: 20px minmax(50px, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: .58rem;
    font-weight: 900;
}

.hud-health-row > span {
    color: #91d9f1;
}

.hud-health-row > i {
    overflow: hidden;
    height: 7px;
    border: 1px solid #263746;
    border-radius: 5px;
    background: #05090e;
    box-shadow: inset 0 1px 2px #000;
}

.hud-health-row > i > b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2d7e9f, #7ddcf1);
    box-shadow: 0 0 6px rgba(112, 201, 232, .8);
}

.hud-command-shell[data-team="enemy"] .hud-health-row > i > b {
    background: linear-gradient(90deg, #743029, #d66d5f);
}

.hud-command-shell .unit-experience {
    height: 9px;
    margin: 0;
    border-color: #3b4350;
}

.hud-command-shell .unit-experience span {
    padding: 0 4px;
    font-size: .48rem;
    line-height: 8px;
}

.hud-command-shell .unit-experience i {
    background: linear-gradient(90deg, #604120, #c79c50);
}

.hud-quick-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: #8495a7;
    font-size: .54rem;
    white-space: nowrap;
}

.hud-quick-stats span {
    padding-right: 8px;
    border-right: 1px solid rgba(170, 139, 75, .32);
}

.hud-quick-stats span:last-child {
    overflow: hidden;
    padding-right: 0;
    border: 0;
    color: #c2b7a5;
    text-overflow: ellipsis;
}

.hud-quick-stats strong {
    color: #ecdfc6;
}

.hud-target-chip {
    position: absolute;
    z-index: 3;
    top: -7px;
    right: calc(54% + 6px);
    display: grid;
    grid-template-columns: 46px minmax(90px, 1fr);
    gap: 7px;
    width: clamp(190px, 19vw, 255px);
    min-height: 58px;
    padding: 9px 16px 8px 11px;
    color: #e9ded0;
    background: url("../game/ui/battle-hud/frames/target-panel-enemy-v1.svg") center / 100% 100% no-repeat;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .72));
}

.hud-target-chip > img {
    width: 44px;
    height: 44px;
    border: 1px solid #a95b50;
    object-fit: cover;
    object-position: top;
}

.hud-target-chip > div {
    display: grid;
    align-content: center;
    min-width: 0;
}

.hud-target-chip small {
    color: #e88778;
    font-size: .45rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hud-target-chip strong,
.hud-target-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-target-chip strong {
    font: 700 .76rem/1 Georgia, serif;
}

.hud-target-chip span {
    color: #b5a8a1;
    font-size: .49rem;
}

.hud-target-health {
    overflow: hidden;
    height: 4px;
    margin-top: 3px;
    background: #180b0c;
}

.hud-target-health b {
    display: block;
    height: 100%;
    background: #c95c50;
}

.hud-target-chip > em {
    position: absolute;
    right: 16px;
    bottom: 3px;
    color: #ffb2a5;
    font-size: .45rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.hud-target-chip.ally {
    filter: hue-rotate(145deg) drop-shadow(0 5px 7px rgba(0, 0, 0, .72));
}

.hud-unit-details {
    margin: -6px 24px 8px;
    border: 1px solid rgba(132, 110, 67, .58);
    box-shadow: 0 7px 16px rgba(0, 0, 0, .46);
}

.unit-context-menu header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-bottom: 1px solid #49434a;
    background: linear-gradient(90deg, #252935, #15171d);
}

.unit-context-menu header img {
    width: 48px;
    height: 48px;
    border: 1px solid #8f7d5b;
    object-fit: cover;
    object-position: top;
}

.unit-context-menu header div {
    display: grid;
    gap: 3px;
}

.unit-context-menu small,
.unit-context-menu p {
    color: #aaa3ad;
    font-size: .7rem;
}

.unit-context-menu p {
    margin: 0;
    padding: 7px 10px;
}

.unit-experience {
    position: relative;
    display: block;
    overflow: hidden;
    height: 22px;
    margin: 8px 10px 5px;
    border: 1px solid #5a535d;
    background: #111319;
}

.unit-experience span {
    position: relative;
    z-index: 2;
    display: block;
    padding: 3px 7px;
    color: #eee9df;
    font-size: .62rem;
    font-weight: 800;
}

.unit-experience i {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    display: block;
    background: linear-gradient(90deg, #8d6131, #d3b169);
}

.unit-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0 10px 7px;
    background: #413c44;
}

.unit-stat-grid span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 7px;
    color: #aaa3ad;
    background: #1c1e24;
    font-size: .63rem;
}

.unit-stat-grid strong {
    color: #f2ede4;
}

.unit-downed-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 10px 7px;
    padding: 8px 10px;
    border: 1px solid rgba(205, 91, 76, .66);
    color: #efc0b7;
    background: linear-gradient(90deg, rgba(91, 27, 29, .82), rgba(35, 18, 23, .82));
}

.unit-downed-status strong {
    color: #fff0eb;
    letter-spacing: .1em;
}

.unit-downed-status span,
.loot-context-copy {
    font-size: .66rem;
}

.unit-revival-hint {
    margin: -2px 10px 8px;
    color: #b7a9a3;
    font-size: .62rem;
}

.loot-context-header img {
    object-fit: contain !important;
    object-position: center !important;
}

.loot-context-copy {
    margin: 2px 10px 9px;
    color: #c5bcae;
}

.loot-context-actions {
    grid-template-columns: 1fr;
}

.loot-context-actions button.primary {
    color: #171717;
    background: var(--gold);
}

.context-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.context-actions button,
.facing-menu button,
.primary {
    padding: 11px 9px;
    border: 1px solid #57515e;
    color: var(--paper);
    background: #292c34;
    font-weight: 800;
}

.context-actions button:hover:not(:disabled),
.facing-menu button:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.context-actions button:disabled,
.primary:disabled {
    cursor: not-allowed;
    opacity: .3;
}

.context-actions button:last-child {
    grid-column: auto;
    color: #171717;
    background: var(--gold);
}

.hud-command-shell .context-actions {
    display: grid;
    grid-template-columns: repeat(7, minmax(58px, 1fr));
    align-items: stretch;
    gap: 5px;
    padding: 6px 4px 5px 0;
}

.hud-command-shell .context-actions button {
    position: relative;
    display: grid;
    place-items: center;
    gap: 1px;
    min-width: 0;
    padding: 3px 4px 5px;
    border: 1px solid rgba(97, 111, 126, .52);
    border-radius: 3px;
    color: #d9d4cc;
    background:
        linear-gradient(rgba(8, 13, 21, .6), rgba(13, 19, 28, .88)),
        url("../game/ui/battle-hud/textures/hud-forged-vellum-texture-v1.png") center / 420px auto;
    box-shadow:
        inset 0 0 0 1px rgba(201, 158, 80, .08),
        0 4px 7px rgba(0, 0, 0, .34);
    font-size: .56rem;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px #000;
    transition: border-color 130ms ease, color 130ms ease, transform 130ms ease;
}

.hud-command-shell .context-actions button img {
    width: clamp(38px, 3.7vw, 51px);
    height: clamp(38px, 3.7vw, 51px);
    pointer-events: none;
    transition: filter 130ms ease, transform 130ms ease;
}

.hud-command-shell .context-actions button span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-command-shell .context-actions button:hover:not(:disabled),
.hud-command-shell .context-actions button:focus-visible,
.hud-command-shell .context-actions button.active {
    z-index: 2;
    outline: 0;
    border-color: #c99e50;
    color: #f3d98f;
    transform: translateY(-2px);
}

.hud-command-shell .context-actions button:hover:not(:disabled) img,
.hud-command-shell .context-actions button:focus-visible img,
.hud-command-shell .context-actions button.active img {
    filter: drop-shadow(0 0 6px rgba(112, 201, 232, .82));
    transform: scale(1.05);
}

.hud-command-shell .context-actions .end-turn-command {
    color: #f0d792;
    background:
        linear-gradient(rgba(49, 33, 14, .52), rgba(19, 16, 14, .9)),
        url("../game/ui/battle-hud/textures/hud-forged-vellum-texture-v1.png") center / 420px auto;
}

.hud-command-shell .context-actions button:disabled {
    filter: grayscale(.65);
    transform: none;
}

.command-item-count {
    position: absolute;
    top: 3px;
    right: 5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(148, 238, 192, .7);
    border-radius: 999px;
    color: #d8ffeb;
    background: rgba(19, 77, 60, .92);
    font-size: .56rem;
    line-height: 1;
    box-shadow: 0 0 8px rgba(74, 216, 151, .4);
}

.hud-command-shell .context-actions button.tutorial-attention:not(:disabled) {
    border-color: #79e0ad;
    color: #d9ffeb;
    box-shadow:
        inset 0 0 0 1px rgba(119, 232, 175, .25),
        0 0 14px rgba(69, 211, 143, .62);
    animation: item-command-attention 760ms ease-in-out infinite alternate;
}

.item-context-shell {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, .42fr);
    gap: 8px 18px;
    min-height: 116px;
    padding: 13px 18px 10px;
    border: 1px solid rgba(192, 159, 91, .58);
    color: #eee5d4;
    background:
        linear-gradient(110deg, rgba(9, 17, 25, .97), rgba(17, 30, 32, .94)),
        url("../game/ui/battle-hud/textures/hud-forged-vellum-texture-v1.png")
        center / 420px auto;
    box-shadow:
        inset 0 0 28px rgba(78, 184, 137, .1),
        0 8px 20px rgba(0, 0, 0, .5);
}

.item-context-shell > header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.item-context-shell > header > img {
    width: 68px;
    height: 68px;
}

.item-context-shell > header > div {
    display: grid;
    gap: 2px;
}

.item-context-shell > header small {
    color: #83d8ad;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.item-context-shell > header strong {
    color: #f5e8c9;
    font: 800 1.15rem/1 Georgia, serif;
}

.item-context-shell > header span {
    color: #a9b7b2;
    font-size: .58rem;
}

.item-context-shell > header > b {
    color: #b9f2d4;
    font: 900 1.25rem/1 Georgia, serif;
}

.item-healing-preview {
    display: grid;
    place-items: center;
    align-content: center;
    border-left: 1px solid rgba(199, 165, 91, .28);
    text-align: center;
}

.item-healing-preview > span,
.item-healing-preview > small {
    color: #8fa39c;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.item-healing-preview > strong {
    color: #f8eed9;
    font: 800 1.18rem/1.2 Georgia, serif;
}

.item-healing-preview > strong i {
    color: #6fd4a4;
    font-style: normal;
}

.item-healing-preview > small {
    color: #82e0b0;
}

.item-context-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(90px, .4fr) minmax(140px, .7fr);
    justify-content: end;
    gap: 8px;
}

.item-context-actions button {
    min-height: 29px;
    border: 1px solid rgba(153, 139, 108, .65);
    border-radius: 3px;
    color: #ddd6ca;
    background: rgba(14, 20, 27, .9);
    font-size: .62rem;
    font-weight: 900;
}

.item-context-actions button.primary {
    border-color: #70c99a;
    color: #081a13;
    background: linear-gradient(#9ce0ba, #58a77e);
}

.item-context-actions button:disabled {
    cursor: not-allowed;
    filter: grayscale(.8);
    opacity: .4;
}

.facing-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.facing-menu button {
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: 1.2rem;
}

.facing-menu span {
    font-size: .62rem;
}

.timeline-strip {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    width: 100%;
    min-width: 0;
    padding: 0 3px;
    scrollbar-width: none;
}

.timeline-strip::-webkit-scrollbar {
    display: none;
}

.timeline-portrait {
    position: relative;
    flex: 0 0 43px;
    overflow: visible;
    width: 43px;
    height: 43px;
    padding: 5px;
    border: 0;
    border-radius: 50%;
    background: url("../game/ui/battle-hud/markers/turn-ally-v1.svg") center / contain no-repeat;
    scroll-snap-align: start;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .75));
    transition: filter 130ms ease, transform 130ms ease;
}

.timeline-portrait.enemy {
    background-image: url("../game/ui/battle-hud/markers/turn-enemy-v1.svg");
}

.timeline-portrait.current {
    background-image: url("../game/ui/battle-hud/markers/turn-current-v1.svg");
    filter:
        drop-shadow(0 0 5px rgba(229, 191, 101, .85))
        drop-shadow(0 3px 3px rgba(0, 0, 0, .75));
    transform: translateY(-1px) scale(1.08);
}

.timeline-portrait.downed {
    background-image: url("../game/ui/battle-hud/markers/turn-downed-v1.svg");
}

.timeline-portrait.downed img {
    opacity: .58;
    filter: grayscale(1) contrast(.92);
}

.timeline-downed-count {
    position: absolute;
    z-index: 3;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 1px solid #f1c2b9;
    border-radius: 50%;
    color: #fff;
    background: #8e2f31;
    box-shadow: 0 1px 5px #000;
    font-size: .65rem;
}

.timeline-portrait img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

.timeline-portrait span {
    position: absolute;
    right: 50%;
    bottom: -8px;
    overflow: hidden;
    max-width: 64px;
    padding: 1px 4px;
    border-radius: 4px;
    color: #eee4d2;
    background: rgba(5, 7, 10, .9);
    font-size: .42rem;
    text-overflow: ellipsis;
    transform: translateX(50%);
    white-space: nowrap;
}

.result-screen {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(28px, 8vw, 120px);
    background: #090b0f;
}

.result-copy {
    max-width: 620px;
    color: #ada7b0;
    font: 1.2rem/1.6 Georgia, serif;
}

.result-reward {
    display: grid;
    gap: 4px;
    min-width: min(100%, 310px);
    margin: 8px 0 28px;
    padding: 16px 20px;
    border: 1px solid rgba(229, 190, 96, .58);
    border-radius: 4px;
    background:
        linear-gradient(120deg, rgba(229, 190, 96, .12), transparent 62%),
        #11141a;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
}

.result-reward[hidden] {
    display: none;
}

.result-reward > span {
    color: #c4b58f;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.result-reward > strong {
    color: #f2cf72;
    font: 700 clamp(1.45rem, 4vw, 2.15rem)/1.1 Georgia, serif;
}

.result-reward > small {
    color: #99949e;
    font-size: .78rem;
}

.result-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.result-actions a {
    color: #aaa4ae;
}

.confirmation-dialog {
    width: min(92vw, 480px);
    padding: 0;
    border: 1px solid rgba(202, 171, 103, .7);
    border-radius: 5px;
    color: #f4f0e8;
    background: linear-gradient(145deg, #1b1e25, #0b0d12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
}

.confirmation-dialog::backdrop {
    background: rgba(3, 4, 7, .76);
    backdrop-filter: blur(3px);
}

.confirmation-dialog form {
    display: grid;
    gap: 14px;
    padding: clamp(22px, 5vw, 36px);
}

.confirmation-dialog h2,
.confirmation-dialog p {
    margin: 0;
}

.confirmation-dialog h2 {
    font: 500 clamp(1.45rem, 5vw, 2rem)/1.1 Georgia, serif;
}

.confirmation-dialog > form > p:not(.eyebrow) {
    color: #bbb5ad;
    line-height: 1.55;
}

.confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.confirmation-actions button {
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid #5b5862;
    color: #eee9df;
    background: #2b2e36;
}

.confirmation-actions button:hover,
.confirmation-actions button:focus-visible {
    border-color: #d2b56e;
    color: white;
    background: #3a3d46;
}

.confirmation-actions button.primary {
    border-color: #d6b568;
    color: #18140d;
    background: #d0ae62;
}

@keyframes continue-pulse {
    50% { opacity: .28; transform: translateY(5px) rotate(45deg); }
}

@keyframes loot-chest-appear {
    from {
        opacity: 0;
        filter: brightness(1.8);
        transform: translate(-50%, -82%) scale(.52);
    }
    to {
        opacity: 1;
        filter: brightness(1);
        transform: translate(-50%, -82%) scale(1);
    }
}

@keyframes iso-damage-popup {
    0% {
        opacity: 0;
        transform: translate(-50%, 8px) scale(.82);
    }

    14%,
    68% {
        opacity: 1;
    }

    28% {
        transform: translate(-50%, -8px) scale(1.08);
    }

    72% {
        transform: translate(-50%, -20px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -34px) scale(.96);
    }
}

@keyframes incoming-attack-pulse {
    from {
        opacity: .46;
        transform: scale(.78);
    }

    to {
        opacity: 1;
        transform: scale(1.18);
    }
}

@keyframes item-command-attention {
    from {
        filter: brightness(.96);
        transform: translateY(0);
    }

    to {
        filter: brightness(1.2);
        transform: translateY(-2px);
    }
}

@keyframes sprite-action-eight {
    from { background-position: 0 0; }
    to { background-position: -1536px 0; }
}

@keyframes scenario-objective-pulse {
    0%,
    100% { opacity: .82; }
    50% { opacity: 1; }
}

@keyframes reinforcement-cell-warning {
    from {
        opacity: .7;
        filter: brightness(.94) saturate(1.18);
    }
    to {
        opacity: 1;
        filter: brightness(1.3) saturate(1.55);
    }
}

@keyframes objective-beacon-reveal {
    from {
        opacity: 0;
        transform: translate(-50%, 24px) scale(.7);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes objective-beacon-arrow {
    to {
        transform: translateY(8px) rotate(45deg);
    }
}

@keyframes map-dialogue-mark {
    0%,
    100% {
        opacity: .45;
        transform: translateY(-2px) rotate(45deg);
    }
    50% {
        opacity: 1;
        transform: translateY(2px) rotate(45deg);
    }
}

@keyframes battle-scenario-card-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 20px)) scale(.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes battle-scenario-card-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 14px)) scale(.98);
    }
}

@keyframes sprite-jump-arc {
    0%,
    100% {
        transform:
            translateY(var(--action-ground-offset, 0))
            scaleX(var(--action-mirror, 1))
            scale(var(--unit-scale, 1));
    }

    48% {
        transform:
            translateY(
                calc(var(--action-ground-offset, 0px) - var(--jump-height, 32px))
            )
            scaleX(var(--action-mirror, 1))
            scale(var(--unit-scale, 1));
    }
}

@keyframes sprite-idle-eight {
    from { background-position: 0 0; }
    to { background-position: -1536px 0; }
}

@keyframes level-up-unit-jump {
    0%,
    18%,
    100% {
        transform: translate(-50%, -82%);
    }

    47% {
        transform: translate(-50%, calc(-82% - 38px));
    }

    65% {
        transform: translate(-50%, calc(-82% + 4px));
    }
}

@keyframes level-up-burst {
    0%,
    22% {
        opacity: 0;
        transform: translateX(-50%) scale(.15) rotate(0);
    }

    42% {
        opacity: 1;
        transform: translateX(-50%) scale(.72) rotate(45deg);
    }

    74% {
        opacity: .82;
        transform: translateX(-50%) scale(1.08) rotate(90deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.35) rotate(110deg);
    }
}

@keyframes level-up-label {
    0%,
    34% {
        opacity: 0;
        transform: translate(-50%, 12px) scale(.8);
    }

    50%,
    78% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -12px) scale(.96);
    }
}

@keyframes canal-water-idle {
    from { background-position: 0 0; }
    to { background-position: -1792px 0; }
}

@keyframes prop-light-unstable {
    0%,
    46% {
        opacity: var(--prop-light-intensity, .9);
    }

    46.7% {
        opacity: .04;
    }

    47.3% {
        opacity: var(--prop-light-intensity, .9);
    }

    48% {
        opacity: .26;
    }

    48.4% {
        opacity: var(--prop-light-intensity, .9);
    }

    49% {
        opacity: .03;
    }

    50%,
    79% {
        opacity: var(--prop-light-intensity, .9);
    }

    79.4%,
    85.2% {
        opacity: .02;
    }

    85.8% {
        opacity: .34;
    }

    86.4% {
        opacity: .05;
    }

    87%,
    100% {
        opacity: var(--prop-light-intensity, .9);
    }
}

@keyframes prop-fixture-unstable {
    0%,
    46% {
        filter: brightness(1) saturate(1);
    }

    46.7% {
        filter: brightness(.58) saturate(.62);
    }

    47.3% {
        filter: brightness(1.04) saturate(1.05);
    }

    48% {
        filter: brightness(.74) saturate(.76);
    }

    48.4% {
        filter: brightness(1) saturate(1);
    }

    49% {
        filter: brightness(.56) saturate(.6);
    }

    50%,
    79% {
        filter: brightness(1) saturate(1);
    }

    79.4%,
    85.2% {
        filter: brightness(.52) saturate(.54);
    }

    85.8% {
        filter: brightness(.76) saturate(.76);
    }

    86.4% {
        filter: brightness(.57) saturate(.6);
    }

    87%,
    100% {
        filter: brightness(1) saturate(1);
    }
}

@keyframes descend {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

@keyframes workers-pass {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (orientation: portrait) and (max-width: 900px) {
    #game {
        width: var(--app-width, 100vw);
        height: var(--app-height, 100dvh);
        box-shadow: none;
    }

    .title-screen {
        justify-content: center;
    }

    .title-menu-shell {
        width: min(94vw, 520px);
        min-width: 0;
        margin: 0;
        padding: clamp(18px, 3vh, 28px) clamp(24px, 7vw, 44px)
            clamp(26px, 4vh, 40px);
    }

    .title-logo-lockup {
        height: clamp(112px, 18vh, 160px);
    }

    .title-menu-button {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 66px;
        padding-inline: clamp(22px, 7vw, 38px);
    }

    .title-menu-button > img {
        width: 42px;
        height: 42px;
    }

    .title-menu-button strong {
        font-size: clamp(.98rem, 4.7vw, 1.2rem);
    }

    .title-menu-button small {
        font-size: clamp(.48rem, 2.2vw, .6rem);
    }

    .title-save-summary {
        grid-template-columns: 66px minmax(0, 1fr);
        min-height: 84px;
        padding: 8px 24px 8px 20px;
    }

    .title-save-medallion img {
        width: 47px;
        height: 47px;
    }

    .title-copyright {
        bottom: max(8px, env(safe-area-inset-bottom));
        font-size: .52rem;
    }

    .title-confirmation-dialog form {
        min-height: 310px;
        padding: 40px clamp(34px, 10vw, 66px) 34px;
    }

    .autosave-toast {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
        min-width: 0;
    }
}

@media (display-mode: fullscreen), (display-mode: standalone) {
    #game {
        width: var(--app-width, 100vw);
        height: var(--app-height, 100dvh);
        box-shadow: none;
    }
}

@media (orientation: portrait) and (max-width: 820px) {
    .attack-forecast-shell {
        grid-template-columns: minmax(90px, 1fr) 66px minmax(90px, 1fr);
        gap: 4px;
        min-height: 104px;
        padding: 10px 10px 36px;
        background:
            url("../game/ui/battle-hud/frames/attack-forecast-frame-mobile-v1.svg")
            center / 100% 100% no-repeat;
        clip-path: polygon(0 5%, 46% 5%, 50% 0, 54% 5%, 100% 5%, 100% 95%, 54% 95%, 50% 100%, 46% 95%, 0 95%);
    }

    .attack-forecast-unit,
    .attack-forecast-unit.defender {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 4px;
        text-align: left;
    }

    .attack-forecast-unit.defender {
        grid-template-columns: minmax(0, 1fr) 42px;
        text-align: right;
    }

    .attack-forecast-unit > img {
        width: 42px;
        height: 42px;
        padding: 5px;
    }

    .attack-forecast-unit strong {
        font-size: .67rem;
    }

    .attack-forecast-unit span {
        display: none;
    }

    .attack-forecast-unit small,
    .attack-forecast-unit > div > em {
        font-size: .4rem;
    }

    .attack-forecast-result {
        min-height: 62px;
    }

    .attack-forecast-result::before {
        width: 64px;
        height: 60px;
    }

    .attack-forecast-result > strong {
        font-size: 1.65rem;
    }

    .attack-forecast-result > span,
    .attack-forecast-result small {
        font-size: .36rem;
    }

    .attack-forecast-result > em {
        margin-top: 2px;
        padding: 1px 6px;
        font-size: .43rem;
    }

    .attack-forecast-result > em img {
        width: 18px;
        height: 18px;
        margin: -5px 0;
    }

    .attack-forecast-actions {
        right: 10px;
        bottom: 7px;
        left: 10px;
        grid-template-columns: 72px 1fr 82px;
        gap: 4px;
    }

    .attack-forecast-actions button {
        min-height: 24px;
        padding: 3px 6px;
        font-size: .52rem;
    }

    .attack-forecast-actions > span {
        font-size: .38rem;
    }

    .battle-screen {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-card {
        max-width: 70%;
    }

    .actor {
        bottom: 220px;
        width: 140px;
        height: 350px;
    }

    .actor.has-cutout {
        width: 210px;
    }

    .story-screen[data-framing="market"] .actor[data-actor="oren"],
    .story-screen[data-framing="market"] .actor[data-actor="marchande"] {
        width: 155px;
    }

    .story-screen[data-framing="market"] .actor[data-actor="enfant"] {
        width: 118px;
        height: 285px;
    }

    .story-screen[data-framing="market"] .actor[data-actor="inconnu"] {
        width: 145px;
        height: 285px;
    }

    .position-left { --actor-x: 14%; }
    .position-center-left { --actor-x: 34%; }
    .position-center-right { --actor-x: 66%; }
    .position-right { --actor-x: 82%; }
    .position-far-right { --actor-x: 94%; }

    .family-portrait {
        top: 15%;
        width: 220px;
        height: 210px;
    }

    .insert-visual {
        top: 16%;
        width: calc(100% - 34px);
    }

    .dialogue-panel {
        grid-template-columns: 78px minmax(0, 1fr) 18px;
        width: calc(100% - 24px);
        min-height: 148px;
        margin-bottom: 76px;
    }

    .dialogue-copy {
        padding: 16px 14px;
    }

    .dialogue-text {
        font-size: .98rem;
    }

    .story-tools {
        right: 14px;
        left: 14px;
        justify-content: space-between;
    }

    .story-tools span {
        display: none;
    }

    .battle-layout {
        grid-template-columns: 1fr;
        min-width: 0;
        max-width: 100%;
    }

    .battle-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .timeline-wrap {
        min-height: 44px;
        padding: 3px 16px;
    }

    .timeline-label {
        display: none;
    }

    .hud-command-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        min-height: 0;
        padding: 11px 14px 10px;
        background-size: auto 100%;
    }

    .hud-unit-summary {
        grid-template-columns: 52px minmax(92px, 1fr) 116px;
        gap: 6px;
    }

    .hud-unit-portrait {
        width: 50px;
        height: 50px;
        padding: 6px;
    }

    .hud-unit-title > strong {
        font-size: .86rem;
    }

    .hud-unit-title > span,
    .hud-unit-copy > small {
        font-size: .49rem;
    }

    .hud-quick-stats {
        gap: 4px;
        font-size: .45rem;
    }

    .hud-target-chip {
        position: relative;
        top: auto;
        right: auto;
        grid-column: auto;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 4px;
        width: 116px;
        min-height: 42px;
        margin: 0;
        padding: 6px 8px 5px 6px;
    }

    .hud-target-chip > img {
        width: 29px;
        height: 29px;
    }

    .hud-target-chip strong {
        font-size: .58rem;
    }

    .hud-target-chip span {
        display: none;
    }

    .hud-target-chip > em {
        right: 8px;
        bottom: 1px;
        font-size: .36rem;
    }

    .hud-unit-details {
        margin: -5px 18px 7px;
    }

    .context-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .context-actions button {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .timeline-wrap {
        width: 100%;
    }

    .timeline-strip {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .hud-command-shell .context-actions {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
        padding: 2px 0 0;
    }

    .hud-command-shell .context-actions button {
        min-height: 45px;
        padding: 1px 2px 3px;
        font-size: .43rem;
    }

    .hud-command-shell .context-actions button img {
        width: 27px;
        height: 27px;
    }

    .hud-command-shell .context-actions button span {
        white-space: normal;
    }

    .command-item-count {
        top: 1px;
        right: 2px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        font-size: .4rem;
    }

    .item-context-shell {
        grid-template-columns: minmax(0, 1fr) 102px;
        min-height: 98px;
        padding: 8px 9px 7px;
    }

    .item-context-shell > header {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 5px;
    }

    .item-context-shell > header > img {
        width: 44px;
        height: 44px;
    }

    .item-context-shell > header strong {
        font-size: .78rem;
    }

    .item-context-shell > header span {
        display: none;
    }

    .timeline-portrait {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        padding: 4px;
    }

    .hint {
        margin-top: 1px;
        font-size: .65rem;
    }

    .battle-header {
        align-items: flex-start;
    }
}

@media (orientation: landscape) and (max-height: 600px),
       (orientation: landscape) and (max-width: 1100px) {
    .attack-forecast-shell {
        grid-template-columns: minmax(190px, 1fr) 112px minmax(190px, 1fr);
        gap: 7px;
        min-height: 78px;
        padding: 8px 18px 31px;
    }

    .attack-forecast-unit,
    .attack-forecast-unit.defender {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 6px;
    }

    .attack-forecast-unit.defender {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .attack-forecast-unit > img {
        width: 46px;
        height: 46px;
        padding: 5px;
    }

    .attack-forecast-result {
        min-height: 58px;
    }

    .attack-forecast-result::before {
        width: 92px;
        height: 58px;
    }

    .attack-forecast-result > strong {
        font-size: 1.8rem;
    }

    .attack-forecast-result > em {
        margin-top: 1px;
        padding: 1px 8px;
        font-size: .46rem;
    }

    .attack-forecast-actions {
        right: 18px;
        bottom: 6px;
        left: 18px;
    }

    .attack-forecast-actions button {
        min-height: 23px;
        padding: 2px 9px;
        font-size: .52rem;
    }

    .title-menu-shell {
        width: min(43vw, 470px);
        min-width: 350px;
        margin-left: clamp(22px, 5vw, 68px);
        padding: 10px 30px 20px;
    }

    .title-logo-lockup {
        height: clamp(80px, 25vh, 128px);
        margin-bottom: -8px;
    }

    .title-menu-actions {
        gap: 4px;
    }

    .title-menu-button {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 50px;
        padding: 4px 28px;
    }

    .title-menu-button > img {
        width: 36px;
        height: 36px;
    }

    .title-menu-button strong {
        font-size: .94rem;
    }

    .title-menu-button small {
        font-size: .49rem;
    }

    .title-save-summary {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 62px;
        margin-top: 3px;
        padding: 4px 24px 4px 20px;
    }

    .title-save-medallion img {
        width: 40px;
        height: 40px;
    }

    .title-save-message {
        margin-top: 3px;
        font-size: .52rem;
    }

    .title-copyright {
        right: 12px;
        bottom: max(5px, env(safe-area-inset-bottom));
        left: 12px;
        font-size: .48rem;
    }

    .location-card {
        top: max(10px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        font-size: .56rem;
    }

    .actor {
        bottom: clamp(104px, 28vh, 150px);
        width: clamp(92px, 16vw, 160px);
        height: clamp(180px, 56vh, 330px);
    }

    .actor.has-cutout {
        width: clamp(125px, 25vw, 235px);
    }

    .story-screen[data-framing="market"] .actor[data-actor="oren"],
    .story-screen[data-framing="market"] .actor[data-actor="marchande"] {
        width: clamp(120px, 17vw, 180px);
    }

    .story-screen[data-framing="market"] .actor[data-actor="enfant"] {
        width: clamp(90px, 12vw, 130px);
        height: clamp(160px, 45vh, 260px);
    }

    .story-screen[data-framing="market"] .actor[data-actor="inconnu"] {
        width: clamp(110px, 15vw, 160px);
        height: clamp(150px, 42vh, 240px);
    }

    .family-portrait {
        top: 8%;
        width: 170px;
        height: 160px;
        border-width: 7px;
    }

    .insert-visual {
        top: 8%;
        width: min(54vw, 430px);
    }

    .dialogue-panel {
        grid-template-columns: 72px minmax(0, 1fr) 16px;
        width: min(760px, calc(100% - 28px));
        min-height: 92px;
        margin-bottom: 25px;
        box-shadow: 7px 9px 0 rgba(5, 7, 10, .45);
    }

    .dialogue-copy {
        padding: 9px 14px;
    }

    .speaker,
    .thought-label {
        font-size: .55rem;
    }

    .dialogue-text {
        margin-top: 4px;
        font-size: clamp(.76rem, 2.6vh, .94rem);
        line-height: 1.28;
    }

    .continue-mark {
        width: 8px;
        margin-bottom: 15px;
    }

    .story-tools {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(5px, env(safe-area-inset-bottom));
        gap: 12px;
        font-size: .58rem;
    }

    .story-tools span {
        display: none;
    }

    .battle-screen {
        gap: 6px;
        padding:
            max(7px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(7px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .battle-header {
        align-items: center;
    }

    .battle-header h1 {
        font-size: clamp(1.1rem, 4vh, 1.55rem);
    }

    .battle-header .eyebrow {
        margin-bottom: 2px;
        font-size: .52rem;
    }

    .battle-header p:last-child,
    .turn-counter {
        margin-top: 2px;
        font-size: .65rem;
    }

    .turn-counter strong {
        font-size: 1rem;
    }

    .objective {
        padding: 6px 10px;
        font-size: .68rem;
    }

    .objective span {
        font-size: .5rem;
    }

    .battle-layout {
        gap: 8px;
        min-height: 0;
    }

    .battle-arena {
        min-width: 0;
        min-height: 0;
    }

    .board {
        width: 100%;
        margin: 0 auto;
    }

    .hint {
        min-height: 1em;
        margin: 4px 0 0;
        font-size: .62rem;
    }

    .unit-context-menu {
        width: 100%;
    }

    .timeline-wrap {
        min-height: 38px;
        padding: 2px 20px;
    }

    .timeline-label {
        min-width: 94px;
        font-size: .49rem;
    }

    .hud-command-shell {
        grid-template-columns: minmax(300px, .78fr) minmax(430px, 1.22fr);
        min-height: 76px;
        padding: 9px 16px 8px;
    }

    .hud-unit-summary {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 6px;
    }

    .hud-unit-portrait {
        width: 52px;
        height: 52px;
        padding: 6px;
    }

    .hud-unit-title > strong {
        font-size: .84rem;
    }

    .hud-target-chip {
        top: -4px;
        right: calc(61% + 4px);
        width: 164px;
        min-height: 42px;
        grid-template-columns: 31px minmax(70px, 1fr);
        padding: 5px 10px 5px 7px;
    }

    .hud-target-chip > img {
        width: 30px;
        height: 30px;
    }

    .unit-context-menu header img {
        width: 40px;
        height: 40px;
    }

    .unit-experience {
        display: none;
    }

    .unit-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .unit-stat-grid span:not(.mobility-stat) {
        display: none;
    }

    .context-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .hud-command-shell .context-actions {
        grid-template-columns: repeat(7, minmax(48px, 1fr));
        gap: 3px;
        padding: 2px 0;
    }

    .hud-command-shell .context-actions button {
        min-height: 46px;
        padding: 1px 2px;
        font-size: .44rem;
    }

    .hud-command-shell .context-actions button img {
        width: 26px;
        height: 26px;
    }

    .context-actions button,
    .facing-menu button {
        min-width: 0;
        padding: 7px 3px;
        font-size: .6rem;
    }

    .timeline-portrait {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        padding: 4px;
    }
}

@media (max-width: 620px) {
    .map-dialogue-bubble {
        grid-template-columns: minmax(0, 1fr) 62px;
        gap: 2px 10px;
        width: min(360px, calc(100% - 18px));
        min-height: 94px;
        padding: 10px 11px 8px 13px;
    }

    .map-dialogue-bubble.portrait-left {
        grid-template-columns: 62px minmax(0, 1fr);
        padding-right: 13px;
        padding-left: 11px;
    }

    .map-dialogue-portrait-frame {
        min-height: 68px;
    }

    .map-dialogue-kicker {
        margin-bottom: 2px;
        font-size: .43rem;
    }

    .map-dialogue-speaker {
        margin-bottom: 3px;
        font-size: .76rem;
    }

    .map-dialogue-copy {
        font-size: .66rem;
        line-height: 1.28;
    }

    .map-dialogue-continue {
        margin-top: 2px;
        font-size: .4rem;
    }

    .map-dialogue-continue i {
        width: 6px;
        height: 6px;
    }

    .item-context-actions {
        grid-template-columns: 82px minmax(120px, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .iso-sprite.idle-loop {
        animation: none !important;
        background-position: 0 0 !important;
    }

    .iso-sprite.playing,
    .iso-effect.playing {
        animation:
            sprite-action-eight
            var(--animation-duration, 640ms)
            steps(8)
            1 !important;
    }

    .iso-cell[data-terrain="water"] .iso-tile-top {
        animation: none !important;
        background-position: 0 0 !important;
    }

    .iso-map-prop[data-light-mode="unstable"] .iso-prop-light-pool,
    .iso-map-prop[data-light-mode="unstable"] .iso-prop-light-glow,
    .iso-map-prop[data-light-mode="unstable"] .iso-prop-light-bulb {
        animation: none !important;
        opacity: var(--prop-light-intensity, .9) !important;
    }

    .iso-map-prop[data-light-mode="unstable"] img {
        animation: none !important;
        filter: none !important;
    }
}