@font-face {
    font-family: Nunito;
    src: url('assets/nunito.woff2') format('woff2');
    font-weight: 200 1000;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --ink: #eaf1e4;
    --gold: #f5d18a;
    --deep: #0b2426;
    --muted: #aac0b6;
    --line: #e7cc9250;
    --console: 202px;
}
* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #071b1e;
    color: var(--ink);
    font-family: Nunito, system-ui, sans-serif;
}
button,
input {
    font: inherit;
}
button {
    cursor: pointer;
    touch-action: manipulation;
}
button:disabled {
    cursor: wait;
    opacity: 0.5;
}
button {
    color: inherit;
}
button:focus-visible,
input:focus-visible,
canvas:focus-visible {
    outline: 3px solid #fff3b4;
    outline-offset: 4px;
}
button {
    border: 0;
}
button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
button:active {
    translate: 0 1px;
}
[hidden] {
    display: none !important;
}
h1,
h2,
p {
    margin: 0;
}
.game {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    user-select: none;
    background: #112f30;
}
.game > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#world {
    touch-action: none;
}
#effects {
    pointer-events: none;
    z-index: 12;
}
.world-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(#06181b88, transparent 19%, transparent 72%, #061c2288),
        radial-gradient(ellipse, transparent 45%, #0623243d);
    z-index: 1;
}
.hud {
    position: absolute;
    z-index: 24;
    top: max(22px, env(safe-area-inset-top));
    left: max(28px, env(safe-area-inset-left));
    right: max(28px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.signature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Georgia, serif;
    font-size: 20px;
    letter-spacing: 0.19em;
    text-shadow: 0 2px 9px #092624;
}
.sig-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--gold);
    font-size: 28px;
}
.signature small {
    display: block;
    font-family: Nunito, sans-serif;
    font-size: 8px;
    letter-spacing: 0.22em;
    margin-top: 4px;
    color: #c7d2bd;
}
.tools {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}
.icon-button {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #0c2529b8;
    border: 1px solid #c1d2bd42;
    backdrop-filter: blur(10px);
    color: #e4e4ca;
}
.icon-button:hover {
    border-color: var(--gold);
}
.eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: var(--gold);
}
.intro {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        linear-gradient(90deg, #061b1cdd, #0b252648 50%, #081b1c99),
        linear-gradient(0deg, #04191de8, transparent 60%);
}
.intro-copy {
    position: relative;
    padding: 70px 24px;
    max-width: 700px;
    filter: drop-shadow(0 4px 24px #031c1f90);
}
.intro .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.intro .eyebrow span {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e8c879);
}
.intro .eyebrow span:last-child {
    rotate: 180deg;
}
.intro h1 {
    font-family: Georgia, serif;
    font-size: clamp(86px, 13vw, 160px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.035em;
    color: #f6e2b8;
    text-shadow:
        0 3px 0 #5d4627,
        0 5px 24px #f4b75d26;
    margin-top: 20px;
}
.chapter-title {
    font-family: Georgia, serif;
    font-size: clamp(24px, 3vw, 36px);
    font-style: italic;
    color: #fff4dc;
    letter-spacing: 0.04em;
}
.ornament {
    color: #e7cb8b;
    font-size: 20px;
    letter-spacing: 0.3em;
    margin: 20px 0;
}
.intro-line {
    color: #d6dfc9;
    font-size: 15px;
    margin-bottom: 29px;
    line-height: 1.6;
}
.gold-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    min-height: 52px;
    padding: 13px 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f3dba6, #d8ae66);
    color: #28392d;
    box-shadow:
        inset 0 1px 0 #fff6dbaa,
        0 6px 24px #061c2466;
    border: 1px solid #f5dfae;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.025em;
    transition:
        filter 0.2s,
        box-shadow 0.2s;
}
.gold-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 35px #dbbd6e33;
}
.gold-button > span:last-child {
    font-size: 22px;
    font-weight: 400;
}
.load-status {
    font-size: 10px;
    color: #a6b8ad;
    min-height: 15px;
    margin-top: 13px;
    letter-spacing: 0.08em;
}
.intro-foot {
    position: absolute;
    bottom: 26px;
    left: 20px;
    right: 20px;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #afc0b0;
}
.intro-foot span {
    margin: 0 9px;
    color: var(--gold);
}
.objective {
    position: absolute;
    z-index: 4;
    left: max(28px, env(safe-area-inset-left));
    top: 95px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: linear-gradient(90deg, #0b2429d9, #0b242985);
    backdrop-filter: blur(12px);
    padding: 13px 18px;
    border: 1px solid #d4c5943d;
    border-left: 2px solid #dabd77;
    border-radius: 5px;
    max-width: 350px;
    pointer-events: none;
}
.objective-star {
    color: var(--gold);
    font-size: 25px;
}
.objective small {
    color: #b4c4ad;
    font-size: 8px;
    letter-spacing: 0.17em;
    font-weight: 900;
}
.objective p {
    font-size: 12px;
    font-weight: 700;
    margin-top: 3px;
}
#compass {
    font-size: 25px;
    color: var(--gold);
    margin-left: 6px;
}
.world-action {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    min-width: 100px;
    min-height: 54px;
    transform: translate(-50%, -100%);
    background: transparent;
    filter: drop-shadow(0 4px 8px #071e24);
    white-space: nowrap;
}
.target-rune {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid #edca8c99;
    border-radius: 50%;
    background: #0e333ba8;
    color: #ffe2a1;
    font-size: 23px;
    animation: rune 2.4s ease-in-out infinite;
}
.world-action > span:last-child {
    padding: 5px 10px;
    border-radius: 4px;
    color: #f2dfb7;
    font-size: 10px;
    font-weight: 900;
    background: #102c32dc;
    border: 1px solid #d1c49a4a;
}
.walk-hint {
    position: absolute;
    bottom: 24px;
    left: 160px;
    right: 160px;
    z-index: 4;
    font-size: 10px;
    letter-spacing: 0.035em;
    text-align: center;
    text-shadow: 0 2px 5px #03252b;
    color: #e0e3ca;
    pointer-events: none;
}
.walk-hint span {
    padding: 0 8px;
    color: var(--gold);
}
.joystick {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: max(25px, env(safe-area-inset-left));
    z-index: 5;
    width: 106px;
    height: 106px;
    border: 1px solid #dce3c35c;
    border-radius: 50%;
    background: radial-gradient(#19464b40, #0c2f3650);
    box-shadow: inset 0 0 18px #071e2460;
    backdrop-filter: blur(4px);
    touch-action: none;
}
.joystick > span {
    position: absolute;
    width: 38px;
    height: 38px;
    left: 33px;
    top: 33px;
    border-radius: 50%;
    border: 1px solid #e5d09a8a;
    background: #b8c4a72a;
    pointer-events: none;
    box-shadow: 0 2px 12px #082d2d;
}
.joystick button {
    position: absolute;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    background: transparent;
    color: #f1e3b8aa;
    font-size: 13px;
    touch-action: none;
}
.joystick [data-dir='up'] {
    top: 1px;
    left: 35px;
}
.joystick [data-dir='right'] {
    right: 1px;
    top: 35px;
}
.joystick [data-dir='down'] {
    bottom: 1px;
    left: 35px;
}
.joystick [data-dir='left'] {
    left: 1px;
    top: 35px;
}
.interact {
    position: absolute;
    right: max(30px, env(safe-area-inset-right));
    bottom: max(33px, env(safe-area-inset-bottom));
    z-index: 5;
    min-width: 90px;
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #0e333bdc;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    color: var(--gold);
}
.interact > span {
    display: block;
    font-size: 24px;
    margin-bottom: 2px;
}
.talk {
    position: absolute;
    left: max(30px, env(safe-area-inset-left));
    right: max(30px, env(safe-area-inset-right));
    bottom: max(30px, env(safe-area-inset-bottom));
    z-index: 20;
    min-height: 132px;
    display: flex;
    align-items: center;
    padding: 21px 26px 21px 135px;
    gap: 22px;
    border: 1px solid #d7c89777;
    border-radius: 9px;
    background: linear-gradient(110deg, #0c262ef5, #102d31ed);
    box-shadow:
        0 15px 60px #041c1d99,
        inset 0 1px 0 #e8deaa20;
    backdrop-filter: blur(12px);
}
.talk > img {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 130px;
    height: 160px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 3px 8px #091b2a);
}
.talk small {
    display: block;
    color: var(--gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-bottom: 9px;
}
.talk p {
    font-family: Georgia, serif;
    font-size: 19px;
    line-height: 1.5;
    color: #f3efdd;
}
.talk-body {
    min-width: 0;
    flex: 1;
}
.talk-actions {
    display: grid;
    flex: none;
    gap: 8px;
    width: 160px;
}
.talk-actions > button {
    min-height: 48px;
    padding: 11px 18px;
    border: 1px solid #f7e7ad;
    border-radius: 7px;
    background: linear-gradient(135deg, #f9e5a6, #dcb966);
    color: #163a36;
    font: 900 15px/1.25 Nunito, sans-serif;
    cursor: pointer;
}
.talk-actions > button:hover {
    filter: brightness(1.08);
}
.talk-hint {
    color: #d4dcce;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

.battle {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #0b2a2c;
    overflow: hidden;
}
.battle-backdrop {
    position: absolute;
    inset: 0;
    background: url('assets/arene.webp') center center/cover no-repeat;
    transform: scale(1.025);
}
.battle-backdrop:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(#06262c55, transparent 25%, transparent 66%, #09283155);
}
.battle-mist {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 73% 40%, #54edd70b, transparent 40%),
        linear-gradient(0deg, #113c4120, transparent);
    pointer-events: none;
}
.arena {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--console);
}
.battle-label {
    position: absolute;
    left: 30px;
    top: 94px;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: #fff2c4;
    text-shadow: 0 2px 5px #112d2a;
}
.battle-label > span {
    color: #eec775;
    font-size: 16px;
    margin-right: 8px;
}
.health {
    position: absolute;
    z-index: 5;
    width: 235px;
    background: linear-gradient(120deg, #0a252de8, #12393ad9);
    border: 1px solid #d6c6956b;
    border-radius: 7px;
    padding: 11px 15px 9px;
    box-shadow: 0 5px 22px #08262c44;
}
.health-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.health-title strong {
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}
.health-title > span {
    font-size: 10px;
    color: #d7d0ad;
}
.health-track {
    height: 5px;
    margin: 10px 0 6px;
    border-radius: 6px;
    background: #031d25;
    overflow: hidden;
}
.health-track i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #74ddbf, #cde79a);
    border-radius: 6px;
    transition: width 0.55s ease;
}
.enemy-health .health-track i {
    background: linear-gradient(90deg, #8170a2, #c3a8df);
}
.health > p {
    font-size: 9px;
    color: #b9cdb8;
}
.health > p > span {
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}
.energy {
    float: right;
    color: var(--gold);
    letter-spacing: 0.15em;
}
.enemy-health {
    right: 30px;
    top: 104px;
}
.player-health {
    left: 30px;
    bottom: 24px;
}
.battle-actor {
    position: absolute;
    pointer-events: none;
    transform-origin: 50% 85%;
    will-change: transform;
}
.battle-actor > img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 5px #082b284a);
    animation: breathe 3s ease-in-out infinite;
}
.player-actor {
    left: 7%;
    bottom: 20px;
    width: 42%;
    height: 83%;
    max-width: 520px;
}
.enemy-actor {
    right: 9%;
    top: 19%;
    width: 35%;
    height: 63%;
    max-width: 430px;
}
.enemy-actor > img {
    transform: scaleX(-1);
    animation: enemy-breathe 3.2s ease-in-out infinite;
}
.actor-shadow {
    position: absolute;
    width: 48%;
    height: 10%;
    bottom: 10%;
    left: 25%;
    border-radius: 50%;
    background: #0e2c2a55;
    filter: blur(7px);
    z-index: 0;
}
.dark-aura {
    position: absolute;
    inset: 12% 10% 5%;
    border-radius: 50%;
    background: radial-gradient(ellipse, #5525585e, transparent 68%);
    filter: blur(6px);
    animation: taint 3s ease-in-out infinite;
    z-index: 1;
}
.dark-aura:before,
.dark-aura:after {
    content: '';
    position: absolute;
    inset: 11% 13%;
    border: 2px solid #8d6db94d;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    rotate: 33deg;
    transform: scaleY(0.5);
}
.dark-aura:after {
    rotate: -26deg;
    inset: 17% 6%;
}
.battle.is-calmed .dark-aura {
    opacity: 0;
    transition: opacity 1.2s;
}
.player-actor.is-casting > img {
    animation: cast 0.75s ease-out;
}
.enemy-actor.is-hit > img {
    animation: enemy-hit 0.65s ease-out;
}
.player-actor.is-hit > img {
    animation: player-hit 0.65s ease-out;
}
.enemy-actor.is-attacking > img {
    animation: enemy-strike 0.7s ease-out;
}
.shield {
    position: absolute;
    inset: 18% 8% 3%;
    border: 2px solid #bce8ac88;
    border-radius: 50%;
    background: radial-gradient(ellipse, #b4eab208, #b4eab21f);
    box-shadow: 0 0 25px #a9f2c53d;
    z-index: 3;
}
.battle-callout {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 8;
    text-align: center;
    color: #ffe5ad;
    font-size: clamp(22px, 3vw, 38px);
    font-family: Georgia, serif;
    text-shadow: 0 3px 10px #133c31;
    animation: callout 0.5s ease-out;
}
.console {
    position: absolute;
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    bottom: max(15px, env(safe-area-inset-bottom));
    height: calc(var(--console) - 28px);
    padding: 16px 23px;
    border: 1px solid #d7bd8270;
    border-radius: 12px;
    background: linear-gradient(115deg, #0a232af5, #113438f5);
    box-shadow:
        0 0 0 5px #061e264d,
        0 18px 50px #03191f99;
    backdrop-filter: blur(12px);
    z-index: 9;
}
.console:before {
    content: '✧';
    position: absolute;
    top: -12px;
    left: calc(50% - 15px);
    width: 30px;
    text-align: center;
    background: #102e31;
    color: var(--gold);
    font-size: 18px;
}
.console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #d8d8af20;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.console-top p {
    font-family: Georgia, serif;
    color: #e7ecd5;
    font-size: 15px;
    line-height: 1.3;
}
.console-top > span {
    font-size: 8px;
    letter-spacing: 0.15em;
    font-weight: 900;
    color: #d5c891;
    white-space: nowrap;
}
.moves {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.move {
    position: relative;
    display: flex;
    gap: 13px;
    align-items: center;
    min-height: 80px;
    text-align: left;
    border-radius: 7px;
    border: 1px solid #8cb4a145;
    background: linear-gradient(135deg, #d6e5b808, #37655c30);
    padding: 12px 15px;
    box-shadow: inset 0 1px 0 #e9deb410;
    transition:
        background 0.2s,
        border-color 0.2s,
        translate 0.2s;
}
.move:hover {
    background: #c5e3b71a;
    border-color: #d9cd8a;
    translate: 0 -2px;
}
.move-icon {
    font-size: 32px;
    color: #f1d69d;
    min-width: 28px;
}
.move span:nth-child(2) {
    display: block;
}
.move b {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: #f3e6bf;
}
.move small {
    display: block;
    font-size: 10px;
    color: #a9c1af;
    margin-top: 7px;
}
.move em {
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    color: #ceb97c;
    letter-spacing: 0.08em;
    margin-left: auto;
    align-self: flex-start;
    white-space: nowrap;
}
.move-guard .move-icon {
    color: #a7dab3;
}
.move-heal .move-icon {
    color: #d8b5d6;
}
.question {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 24px;
    height: calc(100% - 40px);
    align-items: center;
}
.question-prompt {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 6px 18px;
    align-items: center;
    padding: 0 12px;
}
.question-prompt > small {
    grid-column: 1/-1;
    font-size: 8px;
    letter-spacing: 0.16em;
    color: #d9c588;
    font-weight: 900;
}
.question-prompt > label {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.025em;
    color: #fbefd0;
    white-space: nowrap;
}
.answer-wrap {
    position: relative;
    height: 52px;
    border: 1px solid #efcf83;
    border-radius: 6px;
    background: #eff0d80c;
    box-shadow: 0 0 16px #f4d0930d;
    display: grid;
    place-items: center;
}
.answer-wrap input {
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: center;
    color: #f4d48b;
    font-size: 32px;
    font-weight: 800;
    outline: 0;
    caret-color: transparent;
    padding: 5px;
    letter-spacing: 0.1em;
}
.answer-wrap:has(input:placeholder-shown) {
    border-color: #fff;
}
#question-help {
    grid-column: 1/-1;
    color: #a5beb0;
    font-size: 9px;
    line-height: 1.4;
}
.keypad {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}
.keypad button {
    min-height: 42px;
    border: 1px solid #a1bda540;
    background: #a6d5b310;
    border-radius: 5px;
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.keypad button:hover {
    background: #b8d6bb2b;
    border-color: #cdbf8d;
}
.keypad .key-enter {
    background: #cdb171;
    color: #142f2a;
    border-color: #edd9a9;
}
.key-enter > span {
    font-size: 10px;
}
.key-back {
    color: #ccd5be;
}
.result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 43px);
}
.result > p {
    font-size: 16px;
    line-height: 1.6;
    color: #edf0d6;
    max-width: 58ch;
}
.result .gold-button {
    white-space: nowrap;
}
.victory {
    position: absolute;
    inset: 0;
    z-index: 11;
    background: linear-gradient(#092b316b, #0a3037a8);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    text-align: center;
    padding: 80px 24px 7vh;
    backdrop-filter: blur(2px);
}
.victory h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(50px, 10vw, 100px);
    color: #f5dfaa;
    text-shadow: 0 4px 35px #d8b26144;
    line-height: 1.2;
    margin-top: 8px;
}
.victory > p:not(.eyebrow) {
    font-size: 14px;
    color: #d4e1c8;
    margin: 8px 0 23px;
}
.victory-orbit {
    position: absolute;
    width: 42vmin;
    height: 42vmin;
    border: 1px solid #f7dea16e;
    border-radius: 50%;
    top: 13%;
    left: calc(50% - 21vmin);
    box-shadow:
        0 0 60px #f9d47822,
        inset 0 0 60px #f9d47822;
    animation: orbit 18s linear infinite;
}
.victory-orbit:before,
.victory-orbit:after {
    content: '✧';
    position: absolute;
    left: calc(50% - 10px);
    top: -17px;
    color: #ffe3a6;
    font-size: 25px;
}
.victory-orbit:after {
    top: auto;
    bottom: -17px;
}
.victory-orbit .victory-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: orbit 18s linear reverse infinite;
    filter: drop-shadow(0 0 20px #f3da8666);
}
.ending {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: linear-gradient(#0928244d, #072428bb);
    backdrop-filter: blur(2px);
    padding: 80px 22px 25px;
}
.ending h2 {
    font-family: Georgia, serif;
    color: #f6e1b5;
    font-size: clamp(36px, 6vw, 70px);
    font-weight: 400;
    margin: 15px 0 15px;
    text-shadow: 0 4px 18px #092829;
}
.ending > p:not(.eyebrow) {
    color: #dce6cc;
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.6;
}
.companion-chip {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0;
    background: linear-gradient(100deg, #10393fe3, #1d4543c7);
    padding: 12px 24px 12px 12px;
    border: 1px solid #cbb77975;
    border-radius: 10px;
    text-align: left;
}
.companion-chip > img {
    width: 75px;
    height: 65px;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px #efbd754d);
}
.companion-chip small {
    display: block;
    font-size: 8px;
    letter-spacing: 0.14em;
    color: #c6ba8a;
    font-weight: 900;
    margin-bottom: 5px;
}
.companion-chip b {
    font-size: 14px;
    color: #e8ebd3;
}
.companion-chip > span:last-child {
    color: #f5d88d;
    margin-left: 10px;
    font-size: 25px;
}
.ending-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.text-button {
    background: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    min-height: 44px;
    padding: 5px 10px;
    color: #d0d9c1;
    font-size: 11px;
}
.wipe {
    position: absolute;
    z-index: 30;
    inset: 0;
    background: #f8e7b5;
    pointer-events: none;
    opacity: 0;
}
.wipe.is-transition {
    animation: wipe 1s ease-in-out;
}
.is-playing .hud .signature small {
    opacity: 0.8;
}
.is-battle .objective,
.is-battle .joystick,
.is-battle .walk-hint,
.is-battle .interact {
    display: none !important;
}
.is-battle .hud {
    pointer-events: none;
}
.is-battle .hud .tools {
    pointer-events: auto;
}
.is-loading #world {
    filter: blur(8px);
    opacity: 0.5;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
noscript {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #122c2d;
    color: #fff;
}
@keyframes rune {
    0%,
    100% {
        opacity: 0.7;
        scale: 0.95;
    }
    50% {
        opacity: 1;
        scale: 1.04;
    }
}
@keyframes breathe {
    0%,
    100% {
        transform: translateY(0) rotate(-0.4deg);
    }
    50% {
        transform: translateY(-5px) rotate(0.4deg);
    }
}
@keyframes enemy-breathe {
    0%,
    100% {
        transform: scaleX(-1) translateY(0) rotate(-0.5deg);
    }
    50% {
        transform: scaleX(-1) translateY(-7px) rotate(0.5deg);
    }
}
@keyframes taint {
    50% {
        opacity: 0.6;
        scale: 1.07;
    }
}
@keyframes cast {
    20% {
        transform: translateX(-16px) rotate(-3deg);
    }
    55% {
        transform: translateX(30px) rotate(4deg);
        filter: brightness(1.3) drop-shadow(0 0 15px #ffe8a766);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes enemy-hit {
    15% {
        filter: brightness(2) drop-shadow(0 0 15px #f6d983);
        transform: scaleX(-1) translateX(-22px) rotate(-6deg);
    }
    45% {
        transform: scaleX(-1) translateX(12px) rotate(3deg);
    }
    100% {
        transform: scaleX(-1);
    }
}
@keyframes player-hit {
    15% {
        transform: translateX(-22px) rotate(-6deg);
        filter: brightness(1.6);
    }
    45% {
        transform: translateX(9px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes enemy-strike {
    40% {
        transform: scaleX(-1) translateX(30px) rotate(5deg);
    }
    100% {
        transform: scaleX(-1);
    }
}
@keyframes callout {
    from {
        opacity: 0;
        translate: 0 12px;
        scale: 0.9;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}
@keyframes orbit {
    to {
        rotate: 360deg;
    }
}
@keyframes wipe {
    0%,
    100% {
        opacity: 0;
    }
    47%,
    53% {
        opacity: 1;
    }
}
@media (min-width: 1500px) {
    :root {
        --console: 220px;
    }
    .console {
        padding-left: 32px;
        padding-right: 32px;
    }
    .move {
        min-height: 90px;
    }
    .arena {
        max-width: 1700px;
        margin: auto;
    }
    .player-actor {
        left: 14%;
    }
    .enemy-actor {
        right: 16%;
    }
}
@media (max-width: 700px) {
    :root {
        --console: 266px;
    }
    .hud {
        top: max(14px, env(safe-area-inset-top));
        left: 16px;
        right: 16px;
    }
    .signature {
        gap: 7px;
        font-size: 16px;
    }
    .sig-mark {
        width: 31px;
        height: 31px;
        font-size: 24px;
    }
    .signature small {
        font-size: 6px;
        letter-spacing: 0.15em;
    }
    .tools {
        gap: 6px;
    }
    .icon-button {
        width: 40px;
        height: 40px;
    }
    .objective {
        left: 16px;
        top: 77px;
        max-width: calc(100% - 32px);
        padding: 10px 12px;
        gap: 9px;
    }
    .objective small {
        font-size: 7px;
    }
    .objective p {
        font-size: 11px;
    }
    .objective-star {
        font-size: 22px;
    }
    .world-action > span:last-child {
        font-size: 9px;
    }
    .joystick {
        bottom: max(24px, env(safe-area-inset-bottom));
        left: 20px;
        width: 96px;
        height: 96px;
    }
    .joystick > span {
        left: 28px;
        top: 28px;
    }
    .joystick [data-dir='up'] {
        left: 30px;
    }
    .joystick [data-dir='right'] {
        top: 30px;
    }
    .joystick [data-dir='down'] {
        left: 30px;
    }
    .joystick [data-dir='left'] {
        top: 30px;
    }
    .interact {
        right: 20px;
        bottom: 33px;
        min-width: 84px;
    }
    .walk-hint {
        bottom: 12px;
        left: 8px;
        right: 8px;
        font-size: 8px;
    }
    .walk-hint span {
        padding: 0 4px;
    }
    .talk {
        left: 12px;
        right: 12px;
        bottom: max(15px, env(safe-area-inset-bottom));
        padding: 19px 10px 19px 88px;
        gap: 4px;
        min-height: 139px;
    }
    .talk > img {
        width: 92px;
        height: 124px;
        left: -2px;
        bottom: 3px;
    }
    .talk p {
        font-size: 16px;
        line-height: 1.5;
    }
    .talk small {
        font-size: 8px;
        margin-bottom: 7px;
    }
    .talk {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .talk-actions {
        width: 100%;
        gap: 6px;
    }
    .talk-actions > button {
        min-height: 48px;
        font-size: 15px;
    }
    .battle-label {
        left: 17px;
        top: 75px;
        font-size: 7px;
        letter-spacing: 0.15em;
    }
    .enemy-health {
        top: 102px;
        right: 14px;
        width: 182px;
    }
    .health {
        padding: 9px 11px 7px;
        border-radius: 6px;
    }
    .health-title strong {
        font-size: 16px;
    }
    .health-title > span {
        font-size: 8px;
    }
    .health-track {
        margin-top: 7px;
        height: 4px;
    }
    .health > p {
        font-size: 8px;
    }
    .player-health {
        width: 162px;
        left: 14px;
        bottom: 14px;
    }
    .player-actor {
        left: -8%;
        bottom: 16px;
        width: 76%;
        height: 61%;
        max-width: none;
    }
    .enemy-actor {
        right: -1%;
        top: 23%;
        width: 65%;
        height: 53%;
        max-width: none;
    }
    .battle-backdrop {
        background-position: 52% center;
    }
    .console {
        left: 9px;
        right: 9px;
        bottom: max(10px, env(safe-area-inset-bottom));
        height: calc(var(--console) - 17px);
        padding: 14px 13px;
    }
    .console-top {
        padding-bottom: 9px;
        margin-bottom: 10px;
        gap: 6px;
    }
    .console-top p {
        font-size: 13px;
    }
    .console-top > span {
        font-size: 6px;
        letter-spacing: 0.12em;
    }
    .moves {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .move {
        min-height: 53px;
        gap: 11px;
        padding: 8px 12px;
    }
    .move-icon {
        font-size: 25px;
        min-width: 24px;
    }
    .move b {
        font-size: 15px;
    }
    .move small {
        display: inline;
        font-size: 8px;
        margin: 0 0 0 8px;
    }
    .move em {
        align-self: center;
        font-size: 7px;
    }
    .question {
        grid-template-columns: 1fr;
        gap: 9px;
        height: auto;
    }
    .question-prompt {
        grid-template-columns: 1fr 72px;
        gap: 2px 16px;
        padding: 0 9px;
    }
    .question-prompt > small {
        font-size: 7px;
        grid-column: 1;
    }
    .question-prompt > label {
        font-size: 31px;
        line-height: 1.2;
        grid-column: 1;
    }
    .answer-wrap {
        grid-column: 2;
        grid-row: 1/3;
        height: 48px;
    }
    .answer-wrap input {
        font-size: 29px;
    }
    .question-prompt > p {
        font-size: 8px;
        grid-column: 1/-1;
    }
    #question-help {
        font-size: 8px;
        line-height: 1.3;
    }
    .keypad {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .keypad button {
        min-height: 41px;
        font-size: 18px;
    }
    .keypad .key-enter {
        font-size: 15px;
    }
    .key-enter > span {
        font-size: 8px;
    }
    .result {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        text-align: center;
        height: calc(100% - 35px);
    }
    .result > p {
        font-size: 14px;
        line-height: 1.6;
        max-width: 30ch;
    }
    .result .gold-button {
        min-height: 45px;
        padding: 10px 18px;
        font-size: 11px;
    }
    .battle-callout {
        top: 47%;
        font-size: 25px;
        width: 80%;
    }
    .victory {
        padding: 80px 22px 7vh;
    }
    .victory h2 {
        font-size: 64px;
    }
    .victory > p:not(.eyebrow) {
        font-size: 12px;
    }
    .victory-orbit {
        top: 20%;
        width: 62vw;
        height: 62vw;
        left: 19vw;
    }
    .ending h2 {
        font-size: 38px;
        max-width: 12ch;
    }
    .ending > p:not(.eyebrow) {
        font-size: 18px;
    }
    .companion-chip {
        gap: 8px;
        padding: 9px 13px 9px 7px;
        margin: 23px 0;
    }
    .companion-chip > img {
        width: 60px;
    }
    .companion-chip b {
        font-size: 12px;
    }
    .companion-chip small {
        font-size: 6px;
    }
    .companion-chip > span:last-child {
        font-size: 20px;
        margin-left: 4px;
    }
    .ending .gold-button {
        font-size: 11px;
        gap: 15px;
        min-height: 48px;
    }
    .intro h1 {
        font-size: 98px;
    }
    .intro .eyebrow {
        font-size: 7px;
        letter-spacing: 0.15em;
        gap: 8px;
    }
    .intro .eyebrow span {
        width: 19px;
    }
    .chapter-title {
        font-size: 26px;
    }
    .intro-line {
        font-size: 13px;
    }
    .intro .gold-button {
        font-size: 12px;
        gap: 24px;
    }
    .intro-foot {
        font-size: 8px;
        letter-spacing: 0.04em;
    }
    .intro-copy {
        padding-bottom: 85px;
    }
}
@media (max-height: 550px) and (min-width: 600px) {
    :root {
        --console: 160px;
    }
    .hud {
        top: 10px;
    }
    .signature {
        font-size: 16px;
    }
    .signature small {
        font-size: 6px;
    }
    .sig-mark {
        width: 30px;
        height: 30px;
    }
    .icon-button {
        width: 36px;
        height: 36px;
    }
    .objective {
        top: 65px;
        padding: 8px 13px;
    }
    .battle-label {
        top: 61px;
    }
    .enemy-health {
        top: 64px;
        right: 20px;
        width: 190px;
        padding: 8px 11px;
    }
    .health-title strong {
        font-size: 15px;
    }
    .player-health {
        left: 18px;
        bottom: 11px;
        width: 195px;
        padding: 8px 11px;
    }
    .health-track {
        margin: 6px 0 4px;
    }
    .health > p {
        font-size: 8px;
    }
    .player-actor {
        height: 85%;
        width: 35%;
        left: 12%;
        bottom: 0;
    }
    .enemy-actor {
        top: 26%;
        height: 64%;
        width: 31%;
        right: 18%;
    }
    .console {
        bottom: 9px;
        left: 13px;
        right: 13px;
        height: calc(var(--console) - 17px);
        padding: 11px 18px;
    }
    .console-top {
        margin-bottom: 8px;
        padding-bottom: 7px;
    }
    .console-top p {
        font-size: 12px;
    }
    .move {
        min-height: 65px;
        padding: 9px 12px;
    }
    .move b {
        font-size: 15px;
    }
    .move small {
        font-size: 9px;
    }
    .move em {
        font-size: 7px;
    }
    .question-prompt > label {
        font-size: 32px;
    }
    .question-prompt > small {
        font-size: 7px;
    }
    .answer-wrap {
        height: 40px;
    }
    .answer-wrap input {
        font-size: 28px;
    }
    .keypad button {
        min-height: 34px;
        font-size: 16px;
    }
    .keypad {
        gap: 5px;
    }
    .victory {
        padding-bottom: 22px;
    }
    .victory h2 {
        font-size: 48px;
    }
    .victory-orbit {
        top: 12%;
        width: 35vh;
        height: 35vh;
        left: calc(50% - 17.5vh);
    }
    .victory .gold-button {
        min-height: 42px;
        font-size: 11px;
    }
    .victory > p:not(.eyebrow) {
        font-size: 11px;
        margin-bottom: 14px;
    }
    .intro h1 {
        font-size: 80px;
        margin-top: 8px;
    }
    .intro-copy {
        padding: 45px 20px;
    }
    .intro .eyebrow {
        font-size: 7px;
    }
    .chapter-title {
        font-size: 24px;
    }
    .ornament {
        margin: 9px 0;
        font-size: 15px;
    }
    .intro-line {
        font-size: 12px;
        margin-bottom: 13px;
    }
    .intro .gold-button {
        min-height: 43px;
        font-size: 11px;
    }
    .intro-foot {
        bottom: 12px;
        font-size: 8px;
    }
    .load-status {
        margin-top: 5px;
        font-size: 8px;
    }
    .talk {
        bottom: 15px;
        min-height: 104px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .talk > img {
        height: 130px;
    }
    .talk p {
        font-size: 16px;
    }
    .ending h2 {
        font-size: 38px;
        margin: 9px 0;
    }
    .ending > p:not(.eyebrow) {
        font-size: 16px;
        line-height: 1.4;
    }
    .companion-chip {
        margin: 14px 0;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .companion-chip > img {
        height: 45px;
    }
    .ending-actions {
        flex-direction: row;
        gap: 20px;
    }
    .ending .gold-button {
        min-height: 43px;
    }
}
#compass {
    background: none;
    padding: 0;
    min-width: 32px;
    min-height: 40px;
    pointer-events: auto;
}
#compass:disabled {
    opacity: 1;
    cursor: default;
}
@media (max-width: 700px) and (min-height: 551px) {
    :root {
        --console: 286px;
    }
}
@media (max-width: 599px) and (max-height: 700px) {
    .enemy-health {
        top: 76px;
        right: 12px;
        width: 164px;
    }
    .battle-label {
        top: 63px;
        font-size: 6px;
    }
    .enemy-actor {
        right: -7%;
        top: 35%;
        height: 58%;
    }
    .player-actor {
        height: 70%;
        bottom: 7px;
    }
    .player-health {
        bottom: 10px;
    }
    .console-top p {
        font-size: 12px;
    }
    .console-top > span {
        font-size: 5px;
    }
    .ending {
        padding-top: 65px;
    }
    .ending h2 {
        font-size: 33px;
    }
    .ending > p:not(.eyebrow) {
        font-size: 16px;
    }
    .companion-chip {
        margin: 16px 0;
    }
    .intro h1 {
        font-size: 84px;
    }
    .intro-copy {
        padding-top: 60px;
        padding-bottom: 65px;
    }
    .ornament {
        margin: 14px 0;
    }
    .intro-foot {
        bottom: 18px;
    }
}
@media (max-height: 550px) and (min-width: 600px) {
    .enemy-actor {
        right: 29%;
    }
    .moves {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .move {
        gap: 7px;
        padding: 8px;
    }
    .move-icon {
        font-size: 23px;
        min-width: 22px;
    }
    .move b {
        font-size: 13px;
    }
    .move small {
        display: block;
        margin: 5px 0 0;
        font-size: 8px;
    }
    .question {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 18px;
        height: calc(100% - 33px);
    }
    .question-prompt {
        grid-template-columns: 1fr 64px;
        padding: 0 4px;
        gap: 3px 8px;
    }
    .question-prompt > small {
        grid-column: 1;
        font-size: 7px;
    }
    .question-prompt > label {
        grid-column: 1;
        font-size: 28px;
    }
    .answer-wrap {
        grid-column: 2;
        grid-row: 1 / 3;
        height: 40px;
    }
    #question-help {
        font-size: 7px;
        line-height: 1.3;
    }
    .keypad {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }
    .keypad button {
        min-height: 34px;
    }
    .result {
        flex-direction: row;
        text-align: left;
        gap: 18px;
        height: calc(100% - 33px);
    }
    .result > p {
        font-size: 13px;
        max-width: 60ch;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .health-track i {
        transition: none;
    }
    .wipe.is-transition {
        animation-duration: 0.3s !important;
    }
}

/* Raccord du premier bourgeon au Sentier effacé. */
#game[hidden], #sequel[hidden] { display:none!important; }
#sequel { position:fixed;inset:0;background:#0b2428;isolation:isolate; }
#sequel .scene-root { width:100%;height:100%; }
.lumo-seal { position:absolute;z-index:3;width:68px;height:55px;left:52%;top:42%;filter:drop-shadow(0 0 10px #9e76be);pointer-events:none; }
.enemy-actor.is-fractured .lumo-seal { opacity:.5;transform:rotate(12deg); }
.is-calmed .lumo-seal { display:none; }

/* Cursed poses already face Plume; keep their true orientation during motion. */
.enemy-actor.is-bewitched > img {
    transform: none;
    animation-name: curse-breathe;
}
.enemy-actor.is-bewitched.is-hit > img { animation-name: curse-hit; }
.enemy-actor.is-bewitched.is-attacking > img { animation-name: curse-strike; }
@keyframes curse-breathe {
    0%, 100% { transform: translateY(0) rotate(-.5deg); }
    50% { transform: translateY(-7px) rotate(.5deg); }
}
@keyframes curse-hit {
    15% { filter: brightness(2) drop-shadow(0 0 15px #f6d983); transform: translateX(22px) rotate(6deg); }
    45% { transform: translateX(-12px) rotate(-3deg); }
    100% { transform: none; }
}
@keyframes curse-strike {
    40% { transform: translateX(-30px) rotate(-5deg); }
    100% { transform: none; }
}
.ending-actions { flex-direction:column;flex-wrap:nowrap;gap:12px; }
.ending-actions #continue-story { flex:0 0 auto;min-height:54px; }
.sequel-loading { display:grid;place-content:center;height:100%;font:22px Georgia,serif;color:#f4edcf; }
.chapter-pause { position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#061e25b8;backdrop-filter:blur(5px);color:#f4edcf; }
.chapter-pause>div { max-width:560px;max-height:100%;overflow:auto;padding:30px;border:1px solid #d8c38590;border-radius:14px;background:#133735; }
.chapter-pause h2 { font:32px/1.2 Georgia,serif;margin:12px 0; }
.chapter-pause p { font:16px/1.65 Nunito,sans-serif; }
.chapter-pause button { margin-top:14px; }
#sequel .plume-scene .utilities { gap:5px; }
@media(max-width:600px) { #sequel .plume-scene .identity { max-width:calc(100% - 145px); } #sequel .plume-scene h1 { font-size:21px; } #sequel .plume-scene .eyebrow { font-size:8px;letter-spacing:.12em; } }
@media(max-height:500px) { #sequel .plume-scene { min-height:0; } #sequel .plume-scene .top { top:10px; } #sequel .plume-scene h1 { font-size:20px;margin:2px 0; } #sequel .plume-scene .eyebrow { font-size:8px; } #sequel .plume-scene .status { display:none; } #sequel .plume-scene .bottom { bottom:8px; } #sequel .plume-scene .touch-pad { bottom:75px;width:90px;height:90px; } #sequel .plume-scene .touch-stick { left:26px;top:26px; } #sequel .plume-scene .modal-wrap { padding:10px; } #sequel .plume-scene .dialog { max-height:100%;overflow:auto;padding:14px; } #sequel .plume-scene .line { font-size:17px;min-height:0; } #sequel .plume-scene .dialog-actions { margin-top:8px; } #sequel .plume-scene .overlay { padding:10px; } #sequel .plume-scene .panel { padding:20px; } #sequel .plume-scene .toast { top:100px; } }

#sequel .plume-scene .objective { position:static;display:block;inset:auto;z-index:auto;gap:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;width:auto;align-items:normal; }
#sequel .plume-scene .eyebrow { margin:0; }
#sequel .plume-scene .text-button { text-decoration:none; }
@media(max-height:500px) { .ending-actions { flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center; } .ending-actions #continue-story { min-height:43px; } }

/* Chapter navigation, scene styles isolated in their own ShadowRoot. */
#sequel .chapter-shell{position:absolute;inset:0;display:grid;grid-template-rows:48px minmax(0,1fr);color:#f4edcf;background:#0b2428}
#sequel .chapter-nav{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid #c6b57655;background:#102f30;padding:4px 14px;z-index:2}
#sequel .chapter-nav button{font:700 12px Nunito,sans-serif;color:#f7e9bd;background:transparent;border:1px solid #b9bc9266;border-radius:7px;min-height:36px;padding:5px 12px;cursor:pointer}
#sequel .chapter-nav p{font:14px Georgia,serif;margin:0;text-align:center}
#sequel .chapter-viewport,#sequel .chapter-isolation{height:100%;min-height:0;overflow:auto;position:relative}
#sequel .chapter-menu{position:absolute;inset:48px 0 0;z-index:8;background:#09292cf5;display:grid;place-items:center;padding:24px;overflow:auto}
#sequel .chapter-menu[hidden]{display:none}
#sequel .chapter-menu>div{width:min(650px,100%);max-height:100%;overflow:auto}
#sequel .chapter-menu h2,#sequel .chapter-error h2{font:32px Georgia,serif;margin:15px 0}
#sequel .chapter-menu p{font:14px/1.6 Nunito,sans-serif}
#sequel .chapter-menu ol{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;margin:20px 0}
#sequel .chapter-menu li button{width:100%;text-align:left;border:1px solid #ccbd8d70;border-radius:8px;background:#173e40;padding:12px 15px;min-height:44px;color:#f4edcf;font:700 13px Nunito,sans-serif;cursor:pointer}
#sequel .chapter-menu li button:disabled{opacity:.35;cursor:default}
#sequel .chapter-menu li button[aria-current=step]{border-color:#ffe8a7;background:#315655}
#sequel button:focus-visible{outline:3px solid #ffe9a5;outline-offset:2px}
#sequel .chapter-menu .gold-button{height:auto;min-height:48px;margin-top:14px}
#sequel .chapter-menu .text-button{display:block;margin:18px 0;color:#e8d494}
#sequel .chapter-error{padding:30px;color:#f4edcf}
@media(max-width:500px){#sequel .chapter-nav{padding:4px 8px;gap:6px}#sequel .chapter-nav p{font-size:12px}#sequel .chapter-nav button{font-size:11px;padding:5px 8px}#sequel .chapter-menu{padding:16px}#sequel .chapter-menu ol{grid-template-columns:1fr}#sequel .chapter-nav button span{display:none}}

@font-face{font-family:Plume03Nunito;src:url('assets/nunito.woff2') format('woff2');font-display:swap}
@font-face{font-family:Plume04Nunito;src:url('assets/nunito.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Plume05;src:url('assets/nunito.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:PlumeScene06;src:url('assets/nunito.woff2') format('woff2');font-display:swap}
@font-face{font-family:PlumeVillageNunito;src:url('assets/nunito.woff2') format('woff2');font-display:swap}
@font-face{font-family:Plume09;src:url('assets/nunito.woff2') format('woff2');font-display:swap}
@font-face{font-family:RelieurNunito;src:url('assets/nunito.woff2') format('woff2');font-display:swap}
@font-face{font-family:Plume11Nunito;src:url('assets/nunito.woff2') format('woff2');font-display:swap}

@media (max-width: 700px) {
    .enemy-actor.is-bewitched { right: 8%; width: 60%; }
}

/* Ouverture : le décor montre le sujet de chaque courte carte. */
.talk.is-narration { padding-left:26px; }
.talk-step { float:right; margin:0 0 8px 12px; color:var(--gold); font:800 11px/1.4 Nunito,sans-serif; }
.story-marker { position:absolute; z-index:15; transform:translate(-50%,-100%); pointer-events:none; display:grid; justify-items:center; width:max-content; max-width:220px; color:#fff2c4; font:800 12px/1.3 Nunito,sans-serif; text-align:center; filter:drop-shadow(0 2px 4px #031a1d); }
.story-marker span { padding:7px 12px; border:1px solid #e6d28f; border-radius:20px; background:#123237f2; }
.story-marker i { width:2px; height:32px; background:linear-gradient(#e6d28f,#baffed); position:relative; }
.story-marker i:after { content:''; position:absolute; width:9px; height:9px; left:-4px; bottom:-3px; border:2px solid #fff4bc; border-radius:50%; background:#79ffe2; box-shadow:0 0 12px #8cffe8; }
@media(max-width:650px) {
  .talk.is-narration { padding-left:18px; padding-right:18px; }
  .talk.is-opening { max-height:calc(100% - 90px); overflow:auto; }
  .talk.is-opening p { font-size:17px; line-height:1.5; }
  .story-marker { font-size:11px; max-width:210px; }
}
@media(max-height:480px) and (min-width:651px) {
  .talk.is-opening { min-height:0; padding-top:12px; padding-bottom:12px; }
  .talk.is-opening p { font-size:16px; line-height:1.35; }
}

/* The voyage, party and notebook share the same pausing and return lifecycle. */
.replay-confirm{width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;border:1px solid #e5cf8b;border-radius:16px;padding:28px;background:#123638;color:#f8edce;box-shadow:0 24px 80px #0008}
.replay-confirm::backdrop{background:#03191dd9;backdrop-filter:blur(5px)}
.replay-confirm h2{font:30px/1.2 Georgia,serif;margin:12px 0}
.replay-confirm p{font-size:16px;line-height:1.6}
.replay-confirm>div{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.replay-confirm .gold-button{min-height:48px;height:auto;padding:12px}
.replay-confirm .text-button{color:#efd5a2;white-space:normal;line-height:1.5}
.ending-actions #replay{white-space:normal;line-height:1.5}
#sequel .chapter-nav p{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sequel .chapter-nav button{flex-shrink:0}
#sequel .chapter-menu>.voyage-map,#sequel .chapter-menu>.voyage-journal{width:min(1080px,100%);max-height:none;align-self:start;padding-block:12px 30px}
#sequel .voyage-tools{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
#sequel .voyage-tools button{min-height:44px;border:1px solid #cfbe8b88;border-radius:9px;padding:9px 14px;background:#214b4b;color:#fff0c8;font:800 14px Nunito,system-ui;cursor:pointer}
#sequel .voyage-tools button:hover,#sequel .voyage-tools button:focus-visible{background:#3e6760;outline:2px solid #eed89a;outline-offset:2px}
#sequel .voyage-regions{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#sequel .voyage-region{border:1px solid #d1bf8666;border-radius:13px;background:#153d40;overflow:hidden;box-shadow:0 12px 30px #031b204d}
#sequel .voyage-region>img{width:100%;height:128px;object-fit:cover;display:block;object-position:center 55%}
#sequel .voyage-region h3{font:700 21px/1.2 Georgia,serif;margin:16px 16px 0;color:#ffedb7}
#sequel .chapter-menu .voyage-region ol{grid-template-columns:1fr;margin:12px;padding:0;gap:6px}
#sequel .chapter-menu .voyage-region li button{font-size:13px;line-height:1.4;padding:10px 12px;background:#0d2c31}
#sequel .chapter-menu .voyage-region li button:disabled{opacity:.6}
#sequel .voyage-finale{padding-block:16px}
#sequel .voyage-finale h2{color:#ffedba}
#sequel .journal-mission{padding:18px 22px;border-left:3px solid #edd593;background:linear-gradient(115deg,#2d5654,#153c40);border-radius:0 12px 12px 0;margin:24px 0}
#sequel .journal-mission h3{font:24px/1.3 Georgia,serif;margin:8px 0;color:#ffe8ae}
#sequel .journal-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#sequel .journal-fact{padding:14px;border:1px solid #c9bc8a55;border-radius:12px;background:#12383b}
#sequel .journal-fact img{display:block;width:100%;height:144px;object-fit:contain;margin-bottom:16px;border-radius:8px;background:#0a2b30}
#sequel .journal-fact h3{font:21px/1.2 Georgia,serif;margin:10px 0;color:#ffe7ae}
#sequel .journal-fact p{margin:0}
#sequel .voyage-journal>h3{font:25px Georgia,serif;margin:28px 0 16px}
#sequel .journal-regions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#sequel .journal-region{border:1px solid #c9bc8a44;border-radius:12px;padding:13px;background:#13363a}
#sequel .journal-region img{width:100%;height:110px;object-fit:cover;border-radius:7px}
#sequel .journal-region h4{font:19px Georgia,serif;margin:12px 0}
#sequel .journal-unseen{display:grid;place-items:center;height:110px;font:50px Georgia,serif;color:#91b1a3;background:radial-gradient(#234944,#102e34);border-radius:7px}
#sequel .journal-restored{color:#b9e6cc}
#sequel .journal-memory{border-top:1px solid #cbb67b44;padding-top:16px;color:#bacfc4}
@media(max-width:760px){#sequel .journal-facts,#sequel .journal-regions{grid-template-columns:1fr 1fr}}
@media(max-width:500px){#sequel .chapter-nav{gap:4px;padding-inline:5px}#sequel .chapter-nav button{font-size:11px;padding-inline:7px}#sequel .chapter-nav p{font-size:11px}#sequel .voyage-regions,#sequel .journal-facts,#sequel .journal-regions{grid-template-columns:1fr}#sequel .voyage-region>img{height:115px}#sequel .journal-fact img{height:170px}#sequel .chapter-menu>.voyage-map,#sequel .chapter-menu>.voyage-journal{padding-top:0}#sequel .chapter-menu h2{font-size:28px}#sequel .journal-mission{padding:15px}#sequel .voyage-tools button{flex:1;font-size:12px}}

/* The file action stays reachable in the title screen and every opened place. */
.intro-resume{display:block;margin:12px auto 0;min-height:42px;color:#e7dba9}.tools #save-game{font:800 25px/1 system-ui,sans-serif}.chapter-file-pause{max-width:600px;margin:auto;padding:48px 24px;text-align:center}.chapter-nav [data-chapter="file"]{white-space:nowrap}@media(max-width:560px){.chapter-nav{gap:4px;padding:5px}.chapter-nav button{padding:7px;min-width:34px}.chapter-nav p{min-width:0;font-size:11px}.chapter-nav [data-chapter="file"] span{display:none}}
/* Keep the complete chapter bar within a phone, including the optional sound control. */
#sequel .chapter-shell{min-width:0;width:100%;grid-template-columns:minmax(0,1fr)}
#sequel .chapter-nav,#sequel .chapter-viewport,#sequel .chapter-isolation{min-width:0;max-width:100%;box-sizing:border-box}
#sequel .chapter-nav{padding-block:1px;overflow:hidden}
#sequel .chapter-nav p{flex:1 1 0;width:0}
#sequel .chapter-nav button{min-height:44px;min-width:44px}
@media(max-width:360px){#sequel .chapter-nav p{display:none}#sequel .chapter-nav{justify-content:space-between;gap:2px}#sequel .chapter-nav button{padding-inline:5px}}

/* Completed scenes retain a physical portal and an explicit route back to it. */
#sequel .chapter-shell{grid-template-rows:48px auto minmax(0,1fr)}
#sequel .chapter-nav{grid-row:1}#sequel .chapter-viewport{grid-row:3}
#sequel .chapter-portal-strip{grid-row:2;padding:5px 10px;background:#173a35;border-bottom:1px solid #cbd79a66}
#sequel .chapter-portal-strip[hidden]{display:none}
.root-portal-control{font:800 13px/1.35 Nunito,system-ui,sans-serif;min-height:44px;border:1px solid #d6e59b99;border-radius:9px;background:linear-gradient(120deg,#315648,#233f3d);color:#fff0ba;padding:8px 14px;cursor:pointer;box-sizing:border-box}
#sequel .chapter-portal-strip .root-portal-control{display:block;width:100%}.root-portal-control[hidden]{display:none!important}.root-portal-control:focus-visible{outline:3px solid #fff0a5;outline-offset:2px}
#game>.clearing-portal-actions{position:absolute;z-index:8;top:194px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:max-content;max-width:calc(100% - 24px)}
#game>.clearing-portal-actions[hidden]{display:none}
#game>.clearing-portal-actions button{font:800 12px/1.35 Nunito,system-ui,sans-serif;min-height:44px;max-width:100%;white-space:normal}
@media(max-width:600px){#sequel .chapter-portal-strip{padding:4px 7px}.root-portal-control{font-size:12px;padding:7px 9px}#game>.clearing-portal-actions{top:188px;width:calc(100% - 28px)}}
@media(max-height:500px){#game>.clearing-portal-actions{top:154px;left:auto;right:14px;transform:none;width:min(310px,50%)}#sequel .chapter-portal-strip{padding-block:2px}.root-portal-control{font-size:11px}}

.clearing-portal-preview{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px auto;max-width:480px;text-align:left}.clearing-portal-preview img{width:72px;height:108px;object-fit:contain;flex:0 0 auto}.clearing-portal-preview figcaption{font-size:14px;line-height:1.5}.ending{overflow-y:auto;max-height:calc(100% - 24px)}@media(max-height:600px){.clearing-portal-preview img{width:48px;height:72px}.clearing-portal-preview{margin:4px auto;max-width:420px}}

/* Keep the clearing’s route guide reachable by touch after Lumo. */
#game #compass{min-width:44px;min-height:44px}

@media(max-height:500px) and (orientation:portrait){#game>.clearing-portal-actions{top:188px}}