@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap');

:root {
    --background: #090808;
    --surface: #100e0e;
    --surface-raised: #171313;
    --border: #352525;
    --blood: #8f2028;
    --blood-bright: #c42b35;
    --text: #d1c5b8;
    --muted: #796d65;
    --health: #7e302e;
    --hunger: #a16a32;
    --heal: #5f8a5a;
    --heading-font: 'Cinzel', Georgia, serif;
    --body-font: 'Share Tech Mono', monospace;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--background);
}

body {
    position: relative;
    isolation: isolate;
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(ellipse at 50% 0%, #251313 0%, transparent 48%),
        linear-gradient(180deg, #0d0a0a 0%, #070606 100%);
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.7;
}

button {
    font: inherit;
}

button:focus-visible {
    outline: 2px solid var(--blood-bright);
    outline-offset: 4px;
}

/* The two scrollable logs are keyboard stops (so they can be scrolled without a mouse). */
.event-log:focus-visible,
.combat-log:focus-visible {
    outline: 2px solid var(--blood-bright);
    outline-offset: -2px;
}

/* Panels that only ever receive focus from script (keeps focus inside a window while its buttons are locked). */
[tabindex="-1"]:focus {
    outline: none;
}

button:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

.hidden {
    display: none !important;
}

.horror-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 68% 42%, rgba(100, 19, 27, .22), transparent 48%),
        linear-gradient(90deg, rgba(7, 6, 6, .96), rgba(7, 6, 6, .76) 45%, rgba(7, 6, 6, .42)),
        #090808;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.horror-backdrop.has-skull {
    background-image:
        linear-gradient(90deg, rgba(7, 6, 6, .96), rgba(7, 6, 6, .78) 40%, rgba(7, 6, 6, .42)),
        url("images/skull.jpg");
    background-size: cover;
    background-position: center;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    opacity: .13;
    background-image: repeating-linear-gradient(
        0deg, transparent, transparent 3px, rgba(255,255,255,.025) 4px
    );
}

/* INTRO */

.intro-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.intro-content {
    width: min(760px, 100%);
    padding: clamp(28px, 6vw, 66px);
    text-align: center;
    background: linear-gradient(145deg, rgba(23,19,19,.96), rgba(12,10,10,.98));
    border: 1px solid var(--border);
    box-shadow: 0 24px 90px rgba(0,0,0,.55);
    animation: fade-in .9s ease both;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--blood-bright);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.intro-content h1,
.game-brand h1 {
    margin: 0;
    color: #e4d7c8;
    font-family: var(--heading-font);
    font-size: clamp(27px, 5vw, 48px);
    font-weight: 700;
    letter-spacing: clamp(2px, .6vw, 6px);
    line-height: 1.35;
    text-shadow: 0 0 22px rgba(143,32,40,.3);
}

.intro-divider {
    width: 100px;
    height: 1px;
    margin: 30px auto;
    background: var(--blood-bright);
    box-shadow: 0 0 14px rgba(196,43,53,.45);
}

.intro-content h2 {
    margin: 0 0 20px;
    color: #d8bcae;
    font-family: var(--heading-font);
    font-weight: 500;
    letter-spacing: 4px;
}

.intro-description {
    max-width: 560px;
    margin: 0 auto 18px;
    color: #b9aa9b;
    line-height: 2;
}

.intro-warning {
    max-width: 540px;
    margin: 0 auto 34px;
    color: #a16a65;
    line-height: 1.9;
}

.primary-button {
    display: block;
    width: min(260px, 100%);
    margin: 0 auto;
    padding: 15px 30px;
    color: #eee0d3;
    background: #321417;
    border: 1px solid #8f303a;
    letter-spacing: 4px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .2s;
}

.primary-button:hover {
    background: #501920;
    box-shadow: 0 0 28px rgba(196,43,53,.2);
    transform: translateY(-2px);
}

.intro-footnote {
    margin: 25px 0 0;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 2px;
}

/* GAME LAYOUT */

.game-container {
    position: relative;
    z-index: 1;
    width: min(1200px, 92%);
    margin: 0 auto;
    padding: 38px 0 22px;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
}

.scenario-label {
    margin: 8px 0 0;
    color: #9a756e;
    font-family: var(--heading-font);
    font-size: 12px;
    letter-spacing: 3px;
}

.world-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--blood-bright);
    box-shadow: 0 0 12px rgba(196,43,53,.8);
    animation: pulse 2s infinite;
}

.game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(250px, .8fr);
    align-items: start;
    gap: 22px;
    margin-top: 26px;
}

.story-panel,
.status-panel {
    min-width: 0;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(23,19,19,.96), rgba(12,10,10,.98));
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
}

.story-panel {
    display: flex;
    flex-direction: column;
    min-height: 530px;
    padding: clamp(20px, 4vw, 36px);
}

.location-heading h2,
.status-panel h2,
.modal-panel h2 {
    margin: 0 0 16px;
    color: #e0d0bf;
    font-family: var(--heading-font);
    font-weight: 500;
}

.location-heading h2 {
    font-size: clamp(21px, 3vw, 29px);
}

.location-heading > p:last-child {
    max-width: 650px;
    color: #a79a8e;
    line-height: 1.9;
}

.story-divider,
.panel-divider,
.modal-divider {
    height: 1px;
    margin: 22px 0;
    background: linear-gradient(90deg, var(--blood), var(--border), transparent);
}

.event-log {
    flex: 1;
    min-height: 120px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 8px 20px 0;
    scrollbar-color: #4c2929 #100e0e;
}

.log-entry {
    margin: 0 0 12px;
    color: #b9aa9b;
    line-height: 1.8;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.log-prefix {
    margin-right: 8px;
    color: var(--blood-bright);
}

.action-panel {
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.action-buttons button,
#movement-choices button,
#pickup-choices button,
#replay-button,
#turn-button {
    min-width: 140px;
    padding: 12px 18px;
    color: #e6d9cd;
    border: 1px solid #653039;
    background: #291416;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.action-buttons button:hover:not(:disabled),
#movement-choices button:hover:not(:disabled),
#pickup-choices button:hover:not(:disabled),
#replay-button:hover:not(:disabled),
#turn-button:hover:not(:disabled) {
    background: #48191e;
    border-color: var(--blood-bright);
    box-shadow: 0 0 18px rgba(196,43,53,.12);
    transform: translateY(-1px);
}

/* END TURN
   Lives in its own container beneath every other choice panel so it
   never sits between a decision and its options. */

#turn-area {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed #40302c;
}

#turn-area:empty,
#turn-area.hidden {
    display: none;
}

#turn-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 18px;
    color: #bca9a0;
    background:
        linear-gradient(180deg, rgba(143,32,40,.10), transparent),
        #171111;
    border: 1px solid #40302c;
    border-left: 3px solid var(--blood);
    letter-spacing: 4px;
    text-align: center;
}

#turn-button:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(196,43,53,.16), transparent),
        #261416;
    border-color: #75404a;
    border-left-color: var(--blood-bright);
}

#movement-choices,
#pickup-choices,
#encounter-choices,
#game-ending {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

#movement-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#movement-choices p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 1px;
}

#movement-choices button {
    width: 100%;
    text-align: left;
}

#pickup-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#encounter-choices h3,
#game-ending h3 {
    width: 100%;
    margin: 0 0 8px;
    color: #e0c7b8;
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 500;
}

#encounter-choices p,
#game-ending p {
    width: 100%;
    color: #b9aa9b;
    white-space: pre-line;
}

/* STATUS */

.status-panel {
    padding: 26px 24px;
}

.status-panel h2 {
    font-size: 19px;
    letter-spacing: 2px;
}

.stat {
    margin-top: 22px;
}

.stat-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #b7a99b;
    font-size: 11px;
    letter-spacing: 1px;
}

.stat-track {
    height: 5px;
    overflow: hidden;
    background: #2a2220;
}

.stat-fill {
    width: 0%;
    height: 100%;
    transition: width 300ms ease;
}

.health-fill {
    background: var(--health);
    box-shadow: 0 0 10px rgba(126,48,46,.5);
}

.hunger-fill {
    background: var(--hunger);
    box-shadow: 0 0 10px rgba(161,106,50,.4);
}

#inventory-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#inventory-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    color: #b9aa9b;
    border-bottom: 1px solid #241d1b;
}

#inventory-list li::before {
    content: "›";
    margin-right: 10px;
    color: var(--blood-bright);
}

#inventory-list li .inv-name {
    flex: 1;
}

.inv-use {
    padding: 2px 10px;
    color: #d8c7b8;
    background: #291416;
    border: 1px solid #653039;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}

.inv-use:hover:not(:disabled) {
    background: #48191e;
    border-color: var(--blood-bright);
}

.inventory-capacity {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.game-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 18px;
    color: #5f514a;
    border-top: 1px solid var(--border);
    font-size: 10px;
    letter-spacing: 1px;
}

/* COMBAT MODAL */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 22px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(5px);
}

.modal-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    padding: clamp(24px, 5vw, 40px);
    border: 1px solid #653039;
    background:
        radial-gradient(ellipse at top, rgba(91,20,28,.18), transparent 55%),
        linear-gradient(145deg, #191313, #0c0a0a);
    box-shadow: 0 25px 90px rgba(0,0,0,.7), 0 0 35px rgba(143,32,40,.12);
    animation: modal-in .2s ease both;
    scrollbar-color: #4c2929 #100e0e;
}

.modal-panel h2 {
    font-size: clamp(22px, 4vw, 30px);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    color: #b9a69a;
    background: transparent;
    border: 0;
    font-size: 30px;
    cursor: pointer;
}

.modal-description {
    color: #b9aa9b;
    line-height: 1.9;
}

/* Combatant health bars */

.combatants {
    display: grid;
    gap: 14px;
    margin: 22px 0 24px;
}

.combatant {
    padding: 14px 16px;
    background: #120e0e;
    border: 1px solid #392626;
    border-left-width: 3px;
}

.enemy-card {
    border-left-color: var(--blood-bright);
}

.player-card {
    border-left-color: #8a7a6c;
}

.combatant-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.combatant-name {
    color: #e0d0bf;
    font-family: var(--heading-font);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.combatant-hp {
    color: #b7a99b;
    font-size: 12px;
    letter-spacing: 1px;
}

.combat-track {
    position: relative;
    height: 12px;
    overflow: hidden;
    background: #2a2220;
    border: 1px solid #3a2a28;
}

.combat-fill,
.combat-ghost {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
}

.combat-fill {
    z-index: 2;
    transition: width 380ms ease;
}

/* The ghost bar trails behind, showing how much was just lost. */
.combat-ghost {
    z-index: 1;
    background: rgba(226, 190, 170, .55);
    transition: width 900ms ease 420ms;
}

.enemy-fill {
    background: linear-gradient(90deg, #7a1d25, var(--blood-bright));
    box-shadow: 0 0 10px rgba(196,43,53,.45);
}

.player-fill {
    background: linear-gradient(90deg, #6a2a28, #9a3a34);
    box-shadow: 0 0 10px rgba(126,48,46,.5);
}

.combatant.hit {
    animation: hit-shake .38s ease both;
}

.combatant.heal {
    animation: heal-flash .8s ease both;
}

/* Combat log */

.combat-log {
    height: 160px;
    overflow-y: auto;
    padding: 12px 14px;
    background: #0d0a0a;
    border: 1px solid #2c1f1f;
    scrollbar-color: #4c2929 #100e0e;
}

.combat-log p {
    margin: 0 0 8px;
    color: #b9aa9b;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
    animation: fade-in .25s ease both;
}

.clog-player_attack { color: #e6d9cd; }
.clog-player_miss   { color: var(--muted); }
.clog-enemy_attack  { color: #d0585f; }
.clog-enemy_miss    { color: #a8887f; }
.clog-heal          { color: #8fbf88; }
.clog-info          { color: #b9a58f; font-style: italic; }
.clog-victory       { color: #e0c7a0; }
.clog-escape        { color: #e0c7a0; }
.clog-defeat        { color: #d0585f; }
.clog-notice        { color: #a16a65; }

/* Combat actions and supplies */

.fight-inventory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}

.fight-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    color: #d1c5b8;
    background: #151010;
    border: 1px solid #392626;
}

.fight-item strong {
    font-weight: 400;
}

.fight-item span {
    flex: 1;
    color: var(--muted);
    font-size: 11px;
}

.fight-item button {
    width: 100%;
    padding: 9px;
    color: #e6d9cd;
    background: #291416;
    border: 1px solid #653039;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.fight-item button:hover:not(:disabled) {
    background: #48191e;
}

.fight-item button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.modal-panel #fight-actions button {
    flex: 1 1 140px;
}

#fight-actions .danger-action {
    border-color: #8f303a;
}

#fight-actions .continue-action {
    flex-basis: 100%;
    letter-spacing: 4px;
}

#game-ending {
    padding: 22px;
    background: rgba(9,8,8,.55);
    border: 1px solid #4c2929;
}

#replay-button {
    margin-top: 18px;
    width: 100%;
}

/* ANIMATIONS */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hit-shake {
    0%, 100% { transform: translateX(0); border-color: #392626; }
    20% { transform: translateX(-5px); border-color: var(--blood-bright); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes heal-flash {
    0%   { box-shadow: 0 0 0 rgba(95,138,90,0); }
    30%  { box-shadow: 0 0 22px rgba(95,138,90,.45); border-color: var(--heal); }
    100% { box-shadow: 0 0 0 rgba(95,138,90,0); }
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .game-container {
        width: 94%;
        padding-top: 22px;
    }

    .game-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .game-layout {
        grid-template-columns: 1fr;
    }

    .story-panel {
        min-height: 430px;
    }

    .status-panel {
        width: 100%;
    }

    .game-footer {
        flex-direction: column;
        gap: 4px;
    }

    .action-buttons button {
        flex: 1 1 130px;
    }

    .intro-content {
        padding: 30px 22px;
    }

    .combat-log {
        height: 130px;
    }

    .modal-panel {
        padding: 22px 18px;
    }
}

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

/* ==================================================
   ENDING WINDOW BUTTONS
   ================================================== */

.ending-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 24px;
}

#game-ending .ending-actions .ending-button {
    display: block;
    width: 100%;
    max-width: 280px;
    min-height: 46px;
    margin: 0;
    padding: 12px 18px;

    background: var(--surface-raised);
    color: var(--text);

    border: 1px solid var(--border);
    border-radius: 2px;

    font-family: var(--body-font);
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

/* Play Again */
#game-ending .replay-button {
    background: #291416;
    border-color: #653039;
    color: #e6d9cd;
}

#game-ending .replay-button:hover:not(:disabled) {
    background: #48191e;
    border-color: var(--blood-bright);
    box-shadow: 0 0 18px rgba(196, 43, 53, .12);
}

/* Quit to Main Menu */
#game-ending .menu-button {
    background: var(--surface);
    border-color: #352525;
    color: #a99a90;
}

#game-ending .menu-button:hover:not(:disabled) {
    background: #211313;
    border-color: var(--blood);
    color: var(--text);
    box-shadow: 0 0 14px rgba(143, 32, 40, .12);
}

#game-ending .ending-button:focus-visible {
    outline: 2px solid var(--blood-bright);
    outline-offset: 4px;
}

@media (max-width: 480px) {
    .ending-actions {
        gap: 12px;
    }

    #game-ending .ending-actions .ending-button {
        max-width: 100%;
    }
}

/* ==================================================
   V2 ADDITIONS
   Everything below reuses the palette variables and fonts
   declared at the top of this file. Nothing above is changed.
   ================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- TITLE PAGE ---------- */

.title-content {
    width: min(920px, 100%);
    padding-top: clamp(14px, 3vw, 28px);
}

.title-logo {
    display: block;
    width: min(100%, 620px);
    height: auto;
    max-height: 340px;
    object-fit: contain;
    margin: -12px auto 0;

    /* Blend dark areas into the title screen */
    mix-blend-mode: lighten;

    /* Fade the image edges into the background */
    -webkit-mask-image:
        radial-gradient(
            ellipse 55% 65% at 50% 50%,
            #000 48%,
            rgba(0,0,0,.85) 65%,
            transparent 100%
        );
    mask-image:
        radial-gradient(
            ellipse 55% 65% at 50% 50%,
            #000 48%,
            rgba(0,0,0,.85) 65%,
            transparent 100%
        );

    filter:
        drop-shadow(0 0 18px rgba(0,0,0,.8))
        drop-shadow(0 0 12px rgba(75,130,65,.12));

    user-select: none;
    -webkit-user-drag: none;
}

.title-chapter {
    margin: 0 0 18px;
    color: #d8bcae;
    font-family: var(--heading-font);
    font-size: clamp(15px, 2.6vw, 20px);
    font-weight: 500;
    letter-spacing: 4px;
}

.link-button {
    display: block;
    margin: 20px auto 0;
    padding: 6px 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-bottom: 1px dashed #40302c;
    font-size: 11px;
    letter-spacing: 3px;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}

.link-button:hover,
.link-button:focus-visible {
    color: var(--text);
    border-bottom-color: var(--blood-bright);
}

.link-button span {
    color: var(--blood-bright);
}

/* ---------- CONNECTION SCREEN ---------- */

.connect-content {
    max-width: 620px;
}

.connect-signal {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 34px;
    margin: 0 auto 22px;
}

.connect-signal span {
    width: 6px;
    height: 100%;
    background: var(--blood);
    box-shadow: 0 0 10px rgba(196, 43, 53, .35);
    transform-origin: bottom;
    animation: signal-bar 1.2s ease-in-out infinite;
}

.connect-signal span:nth-child(2) { animation-delay: .12s; }
.connect-signal span:nth-child(3) { animation-delay: .24s; }
.connect-signal span:nth-child(4) { animation-delay: .36s; }
.connect-signal span:nth-child(5) { animation-delay: .48s; }

.connect-content.failed .connect-signal span {
    animation: none;
    transform: scaleY(.15);
    background: #4a2326;
    box-shadow: none;
}

.connect-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.primary-button.secondary {
    background: var(--surface);
    border-color: var(--border);
    color: #a99a90;
}

.primary-button.secondary:hover {
    background: #211313;
    border-color: var(--blood);
    color: var(--text);
}

.intro-error {
    max-width: 520px;
    margin: 18px auto 0;
    color: #d0585f;
    font-size: 12px;
    line-height: 1.8;
}

.reconnect-bar {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 65;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(720px, calc(100vw - 24px));
    padding: 10px 14px;
    color: #d8b6b0;
    background: #1c1011;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .7);
    transform: translateX(-50%);
    border: 1px solid #653039;
    border-left: 3px solid var(--blood-bright);
    font-size: 11px;
    letter-spacing: 1px;
}

.reconnect-bar button {
    flex-shrink: 0;
    padding: 6px 14px;
    color: #e6d9cd;
    background: #291416;
    border: 1px solid #653039;
    letter-spacing: 2px;
    cursor: pointer;
}

.reconnect-bar button:hover:not(:disabled) {
    background: #48191e;
    border-color: var(--blood-bright);
}

/* The bar lives outside #game-screen (that container is a stacking context, so a bar inside
   it would sit under the encounter / death windows). It is only meaningful in a run, so it
   disappears with the game screen. */
#game-screen.hidden ~ .reconnect-bar {
    display: none;
}

/* ---------- GAME HEADER AND ACTION PANEL ---------- */

.header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.counter-button {
    margin: 0;
    padding: 2px 0;
    font-size: 10px;
    letter-spacing: 2px;
}

.action-hint {
    margin: 0 0 12px;
    color: #a16a65;
    font-size: 12px;
    line-height: 1.7;
}

#move-button.hidden {
    display: none;
}

#pending-choices {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ---------- WEAPON DURABILITY ---------- */

.weapon-block {
    margin-top: 22px;
}

.weapon-name {
    margin: 0 0 8px;
    color: #e0d0bf;
    font-family: var(--heading-font);
    font-size: 14px;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.weapon-fill {
    background: linear-gradient(90deg, #5b4a3f, #8a7a6c);
    box-shadow: 0 0 8px rgba(138, 122, 108, .3);
}

.weapon-fill.low {
    background: linear-gradient(90deg, #6a2a28, var(--blood-bright));
    box-shadow: 0 0 10px rgba(196, 43, 53, .4);
}

.weapon-block.worn {
    animation: hit-shake .38s ease both;
}

#inventory-list li .inv-wear {
    color: var(--muted);
    font-size: 11px;
}

#inventory-list li.is-equipped .inv-name {
    color: #e0d0bf;
}

/* ---------- ENCOUNTER WINDOW ---------- */

.enc-banner {
    margin: 4px 0 18px;
    padding: 9px 14px;
    color: #e0b9b2;
    background: rgba(91, 20, 28, .22);
    border: 1px solid #653039;
    border-left: 3px solid var(--blood-bright);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: banner-pulse 3.2s ease-in-out infinite;
}

.enc-banner.swap {
    color: #f0d4cc;
    border-color: var(--blood-bright);
    animation: fade-in .5s ease both;
}

#encounter-modal.important .modal-panel {
    border-color: var(--blood);
    box-shadow:
        0 25px 90px rgba(0, 0, 0, .7),
        0 0 46px rgba(143, 32, 40, .28),
        inset 0 0 40px rgba(91, 20, 28, .18);
}

.eli-speech {
    margin: 4px 0 20px;
    padding: 12px 16px;
    background: #120e0e;
    border: 1px solid #392626;
    border-left: 3px solid #a16a65;
}

.eli-line {
    margin: 0 0 10px;
    color: #e6d3cb;
    line-height: 1.8;
    animation: fade-in .6s ease both;
}

.eli-line:last-child {
    margin-bottom: 0;
}

.eli-name {
    margin-right: 10px;
    color: #c98a84;
    font-size: 11px;
    letter-spacing: 3px;
}

.eli-delivery {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
}

.enc-choices {
    margin-top: 6px;
}

.enc-choices button {
    flex: 1 1 160px;
}

/* A recovered survival record: torn, stained, still readable. */
.record-paper {
    position: relative;
    margin: 6px 0 20px;
    padding: 26px 24px 46px;
    color: #cdbfa9;
    background:
        radial-gradient(ellipse at 88% 94%, rgba(110, 18, 26, .55), transparent 42%),
        radial-gradient(ellipse at 6% 8%, rgba(70, 40, 24, .45), transparent 36%),
        radial-gradient(ellipse at 52% 100%, rgba(90, 14, 20, .35), transparent 30%),
        linear-gradient(170deg, #211b16, #17120f);
    border: 1px solid #3d2e27;
    box-shadow: inset 0 0 36px rgba(0, 0, 0, .55), 0 6px 24px rgba(0, 0, 0, .5);
    /* The torn edge is measured in px from the bottom (not % of the height), so on a
       tall page it can never climb into the footer line above it (bottom padding 46px). */
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 22px), 96% calc(100% - 14px), 92% calc(100% - 24px),
        87% calc(100% - 10px), 81% calc(100% - 22px), 75% calc(100% - 8px),
        69% calc(100% - 20px), 62% calc(100% - 6px), 55% calc(100% - 20px),
        47% calc(100% - 8px), 40% calc(100% - 22px), 33% calc(100% - 10px),
        25% calc(100% - 24px), 17% calc(100% - 10px), 9% calc(100% - 22px),
        4% calc(100% - 10px), 0 calc(100% - 20px)
    );
}

.record-paper h3 {
    margin: 0 0 4px;
    color: #e0c7b8;
    font-family: var(--heading-font);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 2px;
}

.record-byline {
    margin: 0 0 18px;
    color: #a16a65;
    font-size: 12px;
    font-style: italic;
}

.record-paper blockquote {
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid #5a2a2c;
}

.record-paper blockquote p {
    margin: 0 0 12px;
    line-height: 1.85;
}

.record-footer {
    margin: 16px 0 0;
    color: #8c5a55;
    font-size: 12px;
    font-style: italic;
}

/* ---------- COMBAT WINDOW ADDITIONS ---------- */

.combat-status {
    min-height: 26px;
    margin: 0 0 14px;
    color: #c98a84;
    font-style: italic;
}

.combat-status.waiting {
    animation: banner-pulse 1.4s ease-in-out infinite;
}

#fight-weapons-block.hidden {
    display: none;
}

.fight-item.is-current {
    border-color: #653039;
}

.clog-eli          { color: #e6bdb5; font-style: italic; }
.clog-item         { color: #8fbf88; }
.clog-loot         { color: #8fbf88; }
.clog-search       { color: #b9a58f; }
.clog-weapon_break { color: #d0585f; font-weight: 700; }
.clog-achievement  { color: #e0c7a0; }
.clog-hunger       { color: #c98f4f; }

.log-entry.log-eli { color: #e6bdb5; font-style: italic; }
.log-entry.log-eli .log-prefix { color: #c98a84; font-style: normal; }
.log-entry.log-achievement { color: #e0c7a0; }
.log-entry.log-notice { color: #a16a65; }

/* ---------- DEATH SCREEN ---------- */

.death-screen {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 28px 20px;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(110, 14, 22, .55), transparent 62%),
        radial-gradient(ellipse at 50% 120%, rgba(60, 6, 10, .9), transparent 60%),
        #050303;   /* fully opaque: the game log behind must never ghost through the death text */
    animation: death-in 1.4s ease both;
}

.death-content {
    position: relative;
    z-index: 2;
    width: min(680px, 100%);
    text-align: center;
}

.death-content h2 {
    margin: 0;
    color: var(--blood-bright);
    font-family: var(--heading-font);
    font-size: clamp(38px, 11vw, 92px);
    font-weight: 800;
    letter-spacing: clamp(3px, 1.2vw, 12px);
    line-height: 1.15;
    text-shadow:
        0 0 18px rgba(196, 43, 53, .55),
        0 3px 0 #3a0b0f,
        0 10px 26px rgba(0, 0, 0, .9);
    animation: death-title 2.6s ease-in-out infinite;
}

.death-rule {
    width: 140px;
    height: 2px;
    margin: 26px auto;
    background: var(--blood-bright);
    box-shadow: 0 0 18px rgba(196, 43, 53, .7);
}

.death-scene {
    margin: 0 auto 34px;
    max-width: 560px;
    color: #d3b8b0;
    line-height: 2;
    white-space: pre-line;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

.death-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.death-actions button {
    width: min(280px, 100%);
    min-height: 46px;
    padding: 12px 18px;
    color: #e6d9cd;
    background: #291416;
    border: 1px solid #653039;
    font-size: 12px;
    letter-spacing: 3px;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.death-actions button:hover:not(:disabled) {
    background: #48191e;
    border-color: var(--blood-bright);
    box-shadow: 0 0 22px rgba(196, 43, 53, .22);
}

#death-menu {
    background: var(--surface);
    border-color: var(--border);
    color: #a99a90;
}

/* Blood running down from the top edge. */
.death-drips {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.death-drips span {
    position: absolute;
    top: -6px;
    width: 9px;
    height: 0;
    background: linear-gradient(180deg, #5e1018, var(--blood) 70%, #3a0b0f);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 14px rgba(143, 32, 40, .55);
    animation: drip 7s ease-in forwards;
}

.death-drips span:nth-child(1) { left: 6%;  animation-delay: .4s;  --len: 34vh; }
.death-drips span:nth-child(2) { left: 17%; animation-delay: 1.2s; --len: 22vh; width: 6px; }
.death-drips span:nth-child(3) { left: 31%; animation-delay: .1s;  --len: 46vh; width: 12px; }
.death-drips span:nth-child(4) { left: 46%; animation-delay: 1.8s; --len: 26vh; }
.death-drips span:nth-child(5) { left: 59%; animation-delay: .7s;  --len: 40vh; width: 7px; }
.death-drips span:nth-child(6) { left: 73%; animation-delay: 1.5s; --len: 30vh; width: 11px; }
.death-drips span:nth-child(7) { left: 85%; animation-delay: .2s;  --len: 44vh; }
.death-drips span:nth-child(8) { left: 94%; animation-delay: 1s;   --len: 24vh; width: 6px; }

.death-screen.death-possession .death-content h2 {
    animation-duration: 4.4s;
}

/* ---------- ACHIEVEMENTS ---------- */

.achievements-panel {
    width: min(560px, 100%);
}

.achievement-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.achievement-list li {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #120e0e;
    border: 1px solid #392626;
    border-left: 3px solid #392626;
}

.achievement-list li.unlocked {
    border-left-color: var(--blood-bright);
}

.achievement-list strong {
    display: block;
    color: #e0d0bf;
    font-family: var(--heading-font);
    font-weight: 500;
    letter-spacing: 1px;
}

.achievement-list li.locked strong {
    color: var(--muted);
}

.achievement-list span {
    display: block;
    color: #a79a8e;
    font-size: 12px;
}

.achievement-list li.locked span {
    color: #5f514a;
}

.achievement-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

/* ---------- TOAST ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 60;
    max-width: min(460px, calc(100vw - 32px));
    padding: 12px 20px;
    color: #eee0d3;
    background: #1c1011;
    border: 1px solid #653039;
    border-left: 3px solid var(--blood-bright);
    box-shadow: 0 10px 36px rgba(0, 0, 0, .7), 0 0 24px rgba(143, 32, 40, .2);
    font-size: 12px;
    letter-spacing: 1px;
    transform: translateX(-50%);
    animation: toast-in .35s ease both;
}

.toast.achievement {
    border-left-color: #e0c7a0;
}

.toast strong {
    display: block;
    color: #e0c7a0;
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
}

/* ---------- ANIMATIONS ---------- */

@keyframes signal-bar {
    0%, 100% { transform: scaleY(.25); opacity: .45; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

@keyframes banner-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .62; }
}

@keyframes drip {
    0%   { height: 0; }
    60%  { height: var(--len, 30vh); }
    100% { height: var(--len, 30vh); }
}

@keyframes death-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes death-title {
    0%, 100% { text-shadow: 0 0 18px rgba(196, 43, 53, .55), 0 3px 0 #3a0b0f, 0 10px 26px rgba(0, 0, 0, .9); }
    50%      { text-shadow: 0 0 34px rgba(196, 43, 53, .85), 0 3px 0 #3a0b0f, 0 10px 26px rgba(0, 0, 0, .9); }
}

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 760px) {
    .header-side {
        align-items: flex-start;
    }

    .reconnect-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .record-paper {
        padding: 22px 16px 42px;
    }

    .enc-choices button {
        flex: 1 1 100%;
    }

    .toast {
        bottom: 12px;
    }
}

/* ---------- IDLE SCREEN ---------- */

.idle-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #090808;
}

.idle-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    animation: idle-logo-appear 1.5s ease both;
}

@keyframes idle-logo-appear {
    from {
        opacity: 0;
        transform: scale(.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile portrait */
@media (max-width: 768px) {
    .idle-logo {
        object-fit: cover;
        object-position: center;
    }
}

/* Mobile landscape */
@media (max-height: 500px) {
    .idle-logo {
        object-fit: contain;
    }
}

/* ---------- IDLE SCREEN: HORROR LAYER ----------
   The overlay sits over the live game scene instead of replacing it. Rules
   without .idle-on describe how things FADE OUT (a slow, lingering return);
   rules under .idle-on describe how they fade IN. */

.idle-screen {
    background: transparent;
}

/* While it fades away it must not catch clicks meant for the game. */
.idle-screen.idle-leaving {
    pointer-events: none;
}

.idle-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(8, 5, 5, .5) 0%, rgba(4, 2, 2, .84) 100%);
    -webkit-backdrop-filter: blur(3px) brightness(.55) saturate(.6);
    backdrop-filter: blur(3px) brightness(.55) saturate(.6);
    opacity: 0;
    transition: opacity 2.4s ease;
    pointer-events: none;
}

.idle-screen.idle-on .idle-veil {
    opacity: 1;
    transition: opacity 3s ease;
}

/* The old full-screen logo is now only a faint ghost beneath the static. */
.idle-logo {
    position: absolute;
    inset: 0;
    animation: none;
    opacity: 0;
    filter: grayscale(.75) contrast(.85) brightness(.8);
    transition: opacity 2s ease;
}

.idle-screen.idle-on .idle-logo {
    opacity: .07;
    transition: opacity 5s ease;
}

.idle-static {
    position: absolute;
    inset: -64px;
    background-image: var(--idle-noise, none);
    background-size: 128px 128px;
    mix-blend-mode: screen;
    opacity: 0;
    /* Fading out: wait a moment, so the static outlasts the darkness. */
    transition: opacity 1.6s ease .9s;
    animation: idle-static-drift .8s steps(1) infinite;
    pointer-events: none;
}

.idle-screen.idle-on .idle-static {
    opacity: .1;
    transition: opacity 3.5s ease;
}

.idle-screen.idle-flicker .idle-veil {
    animation: idle-flicker .24s steps(1) both;
}

.idle-screen.idle-flicker .idle-static {
    opacity: .2;
    transition: none;
}

@keyframes idle-static-drift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-37px, 22px); }
    40%  { transform: translate(18px, -41px); }
    60%  { transform: translate(-52px, -9px); }
    80%  { transform: translate(29px, 47px); }
}

@keyframes idle-flicker {
    0%   { opacity: 1; }
    25%  { opacity: .55; }
    50%  { opacity: 1; }
    70%  { opacity: .72; }
    100% { opacity: 1; }
}

.idle-message,
.idle-return {
    margin: 0;
    text-align: center;
    font-family: var(--heading-font);
    font-weight: 400;
    line-height: 1.5;
    color: #c4b9ac;
    text-shadow: 0 0 18px rgba(143, 32, 40, .5), 0 2px 10px #000;
    pointer-events: none;
    user-select: none;
}

.idle-message {
    position: absolute;
    left: 50%;
    top: 56%;
    width: min(86vw, 720px);
    transform: translate(-50%, -50%);
    font-size: clamp(18px, 3.2vw, 32px);
    letter-spacing: .14em;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.idle-message.idle-message-on {
    opacity: .85;
    transition: opacity 2.4s ease;
}

/* The line left behind once the player is back; sits above the fading overlay. */
.idle-return {
    position: fixed;
    left: 50%;
    top: 42%;
    z-index: 101;
    width: min(86vw, 640px);
    transform: translate(-50%, -50%);
    font-size: clamp(16px, 2.6vw, 26px);
    letter-spacing: .12em;
    opacity: 0;
    transition: opacity 2.2s ease;
}

.idle-return.idle-return-on {
    opacity: .9;
    transition: opacity 1.4s ease .5s;
}

@media (prefers-reduced-motion: reduce) {
    .idle-static,
    .idle-screen.idle-flicker .idle-veil {
        animation: none;
    }
}

/* ---------- BOSS REWARD WINDOW ---------- */

#boss-reward-modal {
    z-index: 120;
}

#boss-reward-modal .modal-panel {
    width: min(440px, calc(100% - 32px));
    border: 1px solid rgba(190, 145, 75, 0.55);
    box-shadow: 0 0 35px rgba(190, 145, 75, 0.12);
}

#boss-reward-modal .eyebrow {
    color: #c49a58;
    letter-spacing: 0.2em;
}

#boss-reward-modal h2 {
    margin-bottom: 12px;
}

#boss-reward-boss {
    color: #c9bba7;
    margin-bottom: 22px;
}

.boss-reward-item {
    padding: 12px 14px;
    margin: 8px 0;
    background: rgba(190, 145, 75, 0.08);
    border: 1px solid rgba(190, 145, 75, 0.2);
    border-radius: 6px;
    color: #e8d9c3;
}

#boss-reward-continue {
    margin-top: 18px;
    width: 100%;
}

/* ---------- BACKGROUND MUSIC TOGGLE ---------- */

.music-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 8px auto 0;
    padding: 5px 10px;

    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;

    font-family: var(--body-font);
    font-size: 10px;
    letter-spacing: 2px;

    cursor: pointer;
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.music-toggle:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(143, 32, 40, .08);
}

.music-icon {
    font-size: 14px;
    line-height: 1;
}

.music-label {
    font-size: 10px;
}

/* Keep the in-game toggle aligned with the achievements button. */
.header-side .music-toggle {
    margin: 0;
}