body {
    margin: 0;
    padding: 0;
    font-family: 'verdana', sans-serif;
    overflow: hidden;
    background: #000;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.game {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    background: #000;
}

.game__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: background-image .6s ease-in-out;
    z-index: 0;
}

.game__background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: none;
    pointer-events: none;
}

.game__background-video.active {
    display: block;
}

/* Android WebView: hide native play overlays on passive background videos */
.main-menu__background,
.game__background-video {
    pointer-events: none;
}

.main-menu__background::-webkit-media-controls,
.main-menu__background::-webkit-media-controls-enclosure,
.main-menu__background::-webkit-media-controls-panel,
.main-menu__background::-webkit-media-controls-start-playback-button,
.main-menu__background::-webkit-media-controls-overlay-play-button,
.game__background-video::-webkit-media-controls,
.game__background-video::-webkit-media-controls-enclosure,
.game__background-video::-webkit-media-controls-panel,
.game__background-video::-webkit-media-controls-start-playback-button,
.game__background-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
}

/* Android WebView: hide the grey play overlay / native controls on ALL videos
   (menu background, scene background, and intro/transition videos). None of the
   game's videos use native controls, so suppressing them everywhere is safe and
   kills the grey play button that flashes at the start of each video. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.game__characters {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    z-index: 10;
    pointer-events: none;
    flex-wrap: nowrap;
    min-height: 25vh;
}

.game__character {
    --char-scale: 1;
    max-height: 95vh;
    width: auto;
    height: auto;
    flex-shrink: 1;
    min-width: 0;
    object-fit: contain;
    object-position: bottom center;
    transition: filter .45s ease, transform .45s ease, margin-top .45s ease;
    /* ← smooth scale, filter & offsetY */
    border-radius: 8px;
    transform-origin: bottom center;
    transform: scale(var(--char-scale));
}

.game__character--speaking {
    filter: brightness(1.10);
    transform: scale(calc(var(--char-scale) * 1.02));
    z-index: 12;
}

/* Character positioning via data-position attribute */
.game__character[data-position="left"] {
    position: absolute;
    left: 5%;
    transform-origin: bottom left;
}

.game__character[data-position="right"] {
    position: absolute;
    right: 5%;
    transform-origin: bottom right;
}

.game__character[data-position="center"] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(var(--char-scale));
}

.game__character[data-position="center"].game__character--speaking {
    transform: translateX(-50%) scale(calc(var(--char-scale) * 1.02));
}

.game__character[data-position="center"].game__character--dimmed {
    transform: translateX(-50%) scale(var(--char-scale));
}

.game__character[data-position="far-left"] {
    position: absolute;
    left: 0;
    transform-origin: bottom left;
}

.game__character[data-position="far-right"] {
    position: absolute;
    right: 0;
    transform-origin: bottom right;
}

.game__character--dimmed {
    filter: brightness(0.62) saturate(0.68) contrast(0.92);
    transform: scale(var(--char-scale));
}

.game__choices {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    z-index: 25;
    width: 100%;
    max-width: 520px;
    padding: 0 24px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

button {
    background: rgba(30, 30, 30, 0.94);
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #f0f0f0;
    padding: 16px 32px;
    font-size: 1.12rem;
    cursor: pointer;
    transition: all .22s ease;
    font-family: inherit;
    border-radius: 8px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.game__choices button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.choice-label {
    display: block;
}

.choice-effects {
    display: block;
    font-size: 0.78rem;
    line-height: 1.15;
    opacity: 0.55;
    font-weight: 400;
}

button:hover {
    background: rgba(245, 245, 245, 0.96);
    color: #111;
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
}

.game__ui {
    background: rgba(0, 0, 0, 0.86);
    color: #e8e8e8;
    padding: calc(22px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1));
    margin: 5%;
    min-height: calc(140px * var(--ui-scale, 1));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 4px solid #555;
    border-radius: 2rem;
    z-index: 20;
    background: rgba(0, 0, 0, 0.92);
    /* backdrop-filter: blur(6px);  ← remove */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: relative;
}

.game__ui.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.game__choices.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.game__story-text {
    font-size: calc(1.5rem * var(--text-scale, 1));
    line-height: 1.58;
    color: #f0f0f0;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    white-space: pre-wrap;
    min-height: 3.2em;
    margin-right: 40px;
    flex: 1;
}

.game__story-text em {
    font-style: italic;
    color: #c9c9c9;
}

.game__story-text strong {
    font-weight: bold;
    color: #fff;
}

.game__continue,
.game__back {
    display: flex;
    justify-content: center;
    height: 90%;
}

.game__continue {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    transition: all 0.3s ease;
}

.game__continue.expanded {
    background: rgba(30, 30, 30, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 2rem;
    padding: 8px 12px;
}

.game__nav-btn {
    top: 16px;
    left: 16px;
    height: 100%;
    width: 50px;
    background: rgba(40, 40, 40, 0.78);
    border: 1px solid #777;
    padding: 8px 16px;
    font-size: 0.93rem;
    z-index: 30;
    opacity: 0.88;
    border-radius: 2rem;
    text-align: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.intro-back-btn {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    width: fit-content;
    padding: 10px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 2rem;
    transition: all 0.3s ease;
    z-index: 1001;
    display: none;

}

.intro-back-btn.visible {
    display: block;
}

.intro-back-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.8);
}

.game__nav-btn:hover {
    opacity: 1;
    background: rgba(90, 90, 90, 0.95);
}

.game__nav-btn:focus,
.game__nav-btn:focus-visible {
    outline: none;
}

.game__nav-btn:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.game__autoplay-quick-actions {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.game__autoplay-btn,
.game__skip-btn {
    position: relative;
    top: auto;
    right: auto;
    height: 50px;
    border-radius: 50%;
    background: rgba(40, 40, 40, 0.78);
    border: 0 solid #777;
    padding: 0;
    font-size: 0.9rem;
    z-index: 30;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, width 0.3s ease, margin 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
}

.game__autoplay-btn.visible,
.game__skip-btn.visible {
    opacity: 0.88;
    width: 50px;
    pointer-events: auto;
    margin-left: 8px;
    border-width: 1px;
}

.game__skip-btn.visible {
    margin-top: 4px;
}

.game__skip-btn:hover,
.game__autoplay-btn:hover {
    opacity: 1 !important;
    background: rgba(90, 90, 90, 0.95);
}

.game__skip-btn:focus,
.game__skip-btn:focus-visible,
.game__autoplay-btn:focus,
.game__autoplay-btn:focus-visible {
    outline: none;
}

.game__skip-btn:active,
.game__autoplay-btn:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.game__autoplay-btn.active {
    background: rgba(100, 200, 100, 0.8);
    border-color: #4a4;
}

.game__nav-btn.active {
    background: rgba(100, 200, 100, 0.8);
    border-color: #4a4;
    opacity: 1;
}

.game__story-speaker {
    flex: 0 0 calc(100px * var(--ui-scale, 1));
    width: calc(100px * var(--ui-scale, 1));
    height: calc(100px * var(--ui-scale, 1));
    margin: 0px 40px;
    border-radius: 50%;
    background-color: rgba(90, 90, 90, 0.95);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game__story-speaker__icon {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 50% 50%;
}

.game__speaker-info {
    position: absolute;
    top: -2px;
    left: calc(124px * var(--ui-scale, 1) + 114px);
    transform: translateY(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 15;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.game__speaker-info.active {
    display: flex;
}

.game__speaker-name {
    background: rgba(50, 50, 50, 0.95);
    color: #e8e8e8;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: calc(0.95rem * var(--text-scale, 1));
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-transform: capitalize;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.game__speaker-expression {
    background: rgba(40, 40, 40, 0.9);
    color: #bbb;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: calc(0.75rem * var(--text-scale, 1));
    font-style: italic;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    display: none;
}

.game__speaker-expression.active {
    display: block;
}

.intro-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.intro-video-container.active {
    display: block;
}

.intro-video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: #000;
}

.skip-intro-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 10px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 2rem;
    transition: all 0.3s ease;
    z-index: 1001;
}

.skip-intro-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.8);
}

.settings-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 16px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none;
    width: 100%;
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}

.settings-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Backlog button — sits below the settings button */
.backlog-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 16px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none;
    width: 100%;
}

.backlog-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}

.backlog-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Help button — sits below the backlog button */
.help-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 16px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none;
    width: 100%;
}

.top-right-actions {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 500;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: max-content;
}

.top-right-actions .settings-btn,
.top-right-actions .backlog-btn,
.top-right-actions .help-btn {
    min-width: 0;
}

.help-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}

.help-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* File save/load button — top-left corner (mirrors settings button style) */
.filemenu-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 16px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    z-index: 500;
    width: auto;
    box-shadow: none;
}

.filemenu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}

.filemenu-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.filemenu-popup {
    position: fixed;
    top: 74px;
    left: 20px;
    display: none;
    flex-direction: column;
    gap: 6px;
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px;
    z-index: 501;
    min-width: 190px;
}

.filemenu-popup.open {
    display: flex;
}

.filemenu-popup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.filemenu-popup__item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f0f0f0;
    padding: 10px 12px;
    font-size: 0.95rem;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.filemenu-popup__item:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
    transform: none;
}

/* Help shortcuts list */
.help-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-row {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.help-row kbd {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    padding: 3px 9px;
    font-family: monospace;
    font-size: 0.82rem;
    color: #e8e8e8;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.help-row i {
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
}

.help-row--touch {
    color: rgba(255, 255, 255, 0.55);
}

/* Backlog overlay */
.backlog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.backlog-overlay.active {
    display: flex;
}

.backlog-panel {
    background: rgba(20, 20, 20, 0.97);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 1400px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.75);
}

.backlog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.backlog-header span {
    color: #e8e8e8;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.backlog-close {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 6px 14px;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    width: auto;
    box-shadow: none;
    line-height: 1;
}

.backlog-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}

.backlog-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05);
}

.backlog-body::-webkit-scrollbar {
    width: 8px;
}

.backlog-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.backlog-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.backlog-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.backlog-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.backlog-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.backlog-speaker {
    font-size: calc(1rem * var(--text-scale, 1));
    font-weight: 700;
    color: #d6b455;
    text-transform: capitalize;
    letter-spacing: 0.04em;
}

.backlog-speaker.unknown {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.backlog-text {
    font-size: calc(1.1rem * var(--text-scale, 1));
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.backlog-text em {
    font-style: italic;
    color: #c9c9c9;
}

.backlog-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: calc(1rem * var(--text-scale, 1));
    text-align: center;
    padding: 40px 0;
}

.dev-btn {
    position: fixed;
    top: 20px;
    left: 84px;
    background: rgba(255, 165, 0, 0.2);
    border: 2px solid rgba(255, 165, 0, 0.5);
    color: #ffa500;
    padding: 10px 16px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    z-index: 1000;
    width: auto;
    box-shadow: none;
    font-weight: bold;
}

.dev-btn:hover {
    background: rgba(255, 165, 0, 0.35);
    border-color: rgba(255, 165, 0, 0.8);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}

.dev-btn i {
    margin-right: 6px;
}

.minigame-back-btn {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    width: fit-content;
    padding: 10px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 2rem;
    transition: all 0.3s ease;
    z-index: 1001;
    display: none;
}

.minigame-back-btn.visible {
    display: block;
}

.minigame-back-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.8);
}

.dev-skip-minigame-btn {
    position: absolute;
    width: fit-content;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 165, 0, 0.2);
    border: 2px solid rgba(255, 165, 0, 0.5);
    color: #ffa500;
    padding: 8px 14px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    z-index: 1001;
    transition: all 0.3s ease;
}

.dev-skip-minigame-btn:hover {
    background: rgba(255, 165, 0, 0.35);
    border-color: rgba(255, 165, 0, 0.8);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}

.dev-skip-minigame-btn i {
    margin-right: 6px;
}

.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.settings-modal.active {
    display: flex;
}

.game-finish-panel {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    z-index: 2100;
}

.game-finish-panel.active {
    display: flex;
}

.game-finish-panel__content {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    color: #e8e8e8;
    text-align: center;
}

.game-finish-panel__title {
    color: #e8e8e8;
    margin: 0;
    font-size: 2rem;
}

.game-finish-panel__subtitle {
    margin: 10px 0 0;
    color: rgba(232, 232, 232, 0.55);
    font-size: 0.9rem;
}

.game-finish-panel__actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.game-finish-panel__follow {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.game-finish-panel__follow>span {
    display: block;
    color: rgba(232, 232, 232, 0.6);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.game-finish-panel__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.game-finish-panel__links a {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8e8e8;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.3s ease;
    white-space: normal;
    text-align: center;
    min-width: 0;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.game-finish-panel__links a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
}

#finishFollowPatreon {
    background: rgba(255, 66, 77, 0.18);
    border-color: rgba(255, 66, 77, 0.45);
    color: #ff7b85;
}

#finishFollowPatreon:hover {
    background: rgba(255, 66, 77, 0.32);
    border-color: rgba(255, 66, 77, 0.75);
    color: #fff;
}

#finishFollowMail {
    background: rgba(0, 120, 212, 0.18);
    border-color: rgba(0, 120, 212, 0.45);
    color: #6ab4f5;
}

#finishFollowMail:hover {
    background: rgba(0, 120, 212, 0.32);
    border-color: rgba(0, 120, 212, 0.75);
    color: #fff;
}

#finishFollowDiscord {
    background: rgba(88, 101, 242, 0.18);
    border-color: rgba(88, 101, 242, 0.45);
    color: #a5abf8;
}

#finishFollowDiscord:hover {
    background: rgba(88, 101, 242, 0.32);
    border-color: rgba(88, 101, 242, 0.75);
    color: #fff;
}

#finishFollowX {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.2);
    color: #c8c8c8;
}

#finishFollowX:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

@media (max-width: 700px) {
    .game-finish-panel__links {
        grid-template-columns: 1fr;
    }
}

.settings-modal-content {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05);
}

.settings-modal-content::-webkit-scrollbar {
    width: 8px;
}

.settings-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.settings-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.settings-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.settings-modal-header h2 {
    color: #e8e8e8;
    margin: 0;
    font-size: 2rem;
}

.settings-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 12px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    width: auto;
    box-shadow: none;
}

.settings-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}

.settings-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.settings-tab-btn {
    background: transparent;
    border: none;
    color: rgba(232, 232, 232, 0.6);
    font-size: 1.15rem;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    font-weight: bold;
}

.settings-tab-btn.active {
    color: #e8e8e8;
    border-bottom-color: #e8e8e8;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}

.save-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    color: #e8e8e8;
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.save-slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.save-slot.empty {
    opacity: 0.6;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.save-slot.autosave {
    border-color: rgba(180, 140, 60, 0.5);
    background: rgba(180, 140, 60, 0.08);
}

.save-slot.autosave:hover {
    border-color: rgba(180, 140, 60, 0.8);
    background: rgba(180, 140, 60, 0.15);
}

.save-slot.autosave .save-slot-title {
    color: #c8a84b;
}

.save-slot-thumbnail {
    width: 140px;
    min-width: 140px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.save-slot-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.save-slot-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.save-slot-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.save-slot-scene {
    font-size: 0.85rem;
    color: rgba(232, 232, 232, 0.55);
    margin-bottom: 2px;
}

.save-slot-info {
    font-size: 0.8rem;
    color: rgba(232, 232, 232, 0.45);
}

.save-slot-name {
    color: #c8a84b;
    font-weight: 600;
}

.save-slot-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    flex-shrink: 0;
}

.save-slot-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #e8e8e8;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.save-slot-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.save-slot-btn.delete {
    background: rgba(200, 50, 50, 0.15);
    border-color: rgba(200, 50, 50, 0.35);
}

.save-slot-btn.delete:hover {
    background: rgba(200, 50, 50, 0.3);
    border-color: rgba(200, 50, 50, 0.55);
}

.save-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.save-page-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(232, 232, 232, 0.7);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-page-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #e8e8e8;
}

.save-page-btn.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    font-weight: bold;
}

.save-page-btn.nav {
    width: auto;
    padding: 0 10px;
}

.no-saves {
    color: rgba(232, 232, 232, 0.6);
    text-align: center;
    padding: 30px 10px;
}

.settings-group {
    margin-bottom: 20px;
}

.settings-group-title {
    color: rgba(232, 232, 232, 0.5);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    color: #e8e8e8;
    font-size: 1.1rem;
}

.settings-row label {
    flex: 1;
}

.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    transition: background 0.2s;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8e8e8;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.settings-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8e8e8;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.settings-value {
    width: 48px;
    text-align: right;
    color: rgba(232, 232, 232, 0.6);
    font-size: 1rem;
    margin-left: 8px;
}

.settings-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
    border: none;
    padding: 0;
}

.settings-toggle.active {
    background: rgba(100, 200, 100, 0.5);
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e8e8e8;
    transition: transform 0.3s;
}

.settings-toggle.active::after {
    transform: translateX(20px);
}

.game__image-display {
    position: absolute;
    bottom: calc(240px + 10% + 5%);
    left: 50%;
    translate: -50% 0;
    max-width: 80%;
    max-height: 60vh;
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 10px;
    z-index: 22;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.game__image-display.active {
    opacity: 1;
    pointer-events: auto;
}

.game__image-display.fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    translate: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    z-index: 5;
}

.game__image-display.fullscreen img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.game__image-display img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.game__image-display.is-item-image {
    max-width: 92%;
    max-height: 68vh;
}

.game__image-display.is-item-image img {
    max-height: 68vh;
}

/* ===== IMAGE & BACKGROUND ANIMATIONS ===== */

/* Animation keyframes */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px);
    }
}

@keyframes shake-intense {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-15px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(15px);
    }
}

@keyframes shake-bg {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-8px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(8px, 0);
    }
}

@keyframes shake-bg-intense {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-15px, -5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(15px, 5px);
    }
}

@keyframes zoom-pan-down {
    0% {
        transform: scale(1.3) translateY(-10%);
    }

    100% {
        transform: scale(1) translateY(0%);
    }
}

@keyframes zoom-pan-up {
    0% {
        transform: scale(1.3) translateY(10%);
    }

    100% {
        transform: scale(1) translateY(0%);
    }
}

@keyframes kenburns {
    0% {
        transform: scale(1.2) translate(-5%, -3%);
    }

    50% {
        transform: scale(1.1) translate(3%, 2%);
    }

    100% {
        transform: scale(1) translate(0%, 0%);
    }
}

@keyframes kenburns-reverse {
    0% {
        transform: scale(1) translate(0%, 0%);
    }

    50% {
        transform: scale(1.1) translate(-3%, 2%);
    }

    100% {
        transform: scale(1.2) translate(5%, -3%);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes pulse-bg {

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

    50% {
        filter: brightness(1.15);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flash {
    0% {
        filter: brightness(1);
    }

    25% {
        filter: brightness(2.5);
    }

    50% {
        filter: brightness(1);
    }

    75% {
        filter: brightness(1.8);
    }

    100% {
        filter: brightness(1);
    }
}

@keyframes flash-white {

    0%,
    100% {
        opacity: 0;
    }

    10%,
    40% {
        opacity: 1;
    }
}

@keyframes flash-out {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes flash-orgasm {
    /* Radial gradient is static via background-image; we animate opacity + background-color */

    /* Pulse 1 — gentle */
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0.25;
    }

    4% {
        opacity: 0;
    }

    /* Pulse 2 — slightly stronger */
    6% {
        opacity: 0;
    }

    8% {
        opacity: 0.4;
    }

    10% {
        opacity: 0;
    }

    /* Pulse 3 — building */
    12% {
        opacity: 0;
    }

    14% {
        opacity: 0.6;
    }

    16% {
        opacity: 0;
    }

    /* Pulse 4 — intense */
    18% {
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    22% {
        opacity: 0.1;
    }

    /* Pulse 5 — very intense, rapid */
    24% {
        opacity: 0.1;
    }

    26% {
        opacity: 0.9;
    }

    28% {
        opacity: 0.15;
    }

    /* Pulse 6 — climax peak */
    29% {
        opacity: 0.15;
        background-color: rgba(255, 255, 255, 0);
    }

    31% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    50% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Slow fade out — afterglow pulses (alternating up/down) */
    55% {
        opacity: 0.6;
        background-color: rgba(255, 255, 255, 0);
    }

    59% {
        opacity: 0.3;
    }

    63% {
        opacity: 0.5;
    }

    67% {
        opacity: 0.15;
    }

    72% {
        opacity: 0.35;
    }

    77% {
        opacity: 0.1;
    }

    82% {
        opacity: 0.2;
    }

    88% {
        opacity: 0.05;
    }

    94% {
        opacity: 0.1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes flash-orgasm-fadeout {

    /* Starts at full white, smooth fade out — pair with flash-orgasm-climax */
    0% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    15% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    30% {
        opacity: 0.7;
        background-color: rgba(255, 255, 255, 0.3);
    }

    50% {
        opacity: 0.35;
        background-color: rgba(255, 255, 255, 0);
    }

    75% {
        opacity: 0.1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes flash-orgasm-climax {
    /* Same build-up as flash-orgasm but ENDS at the white peak (for autoTransition at climax) */

    /* Pulse 1 — gentle */
    0% {
        opacity: 0;
    }

    4% {
        opacity: 0.25;
    }

    8% {
        opacity: 0;
    }

    /* Pulse 2 — slightly stronger */
    12% {
        opacity: 0;
    }

    16% {
        opacity: 0.4;
    }

    20% {
        opacity: 0;
    }

    /* Pulse 3 — building */
    24% {
        opacity: 0;
    }

    28% {
        opacity: 0.6;
    }

    32% {
        opacity: 0;
    }

    /* Pulse 4 — intense */
    36% {
        opacity: 0;
    }

    40% {
        opacity: 0.8;
    }

    44% {
        opacity: 0.1;
    }

    /* Pulse 5 — very intense, rapid */
    48% {
        opacity: 0.1;
    }

    52% {
        opacity: 0.9;
    }

    56% {
        opacity: 0.15;
    }

    /* Climax — ends on full white */
    58% {
        opacity: 0.15;
        background-color: rgba(255, 255, 255, 0);
    }

    65% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    100% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }
}

@keyframes flash-orgasm-intense {
    /* Radial gradient is static via background-image; we animate opacity + background-color */

    /* Start */
    0% {
        opacity: 0;
    }

    /* Build-up */
    10% {
        opacity: 0.4;
    }

    16% {
        opacity: 0.1;
    }

    18% {
        opacity: 0.7;
    }

    21% {
        opacity: 0.12;
    }

    /* Peak 1 */
    23% {
        opacity: 0.12;
        background-color: rgba(255, 255, 255, 0);
    }

    24% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Dip 1 */
    34% {
        opacity: 0.25;
        background-color: rgba(255, 255, 255, 0);
    }

    38% {
        opacity: 0.55;
    }

    41% {
        opacity: 0.12;
    }

    /* Peak 2 */
    43% {
        opacity: 0.12;
        background-color: rgba(255, 255, 255, 0);
    }

    44% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Dip 2 */
    54% {
        opacity: 0.3;
        background-color: rgba(255, 255, 255, 0);
    }

    57% {
        opacity: 0.65;
    }

    60% {
        opacity: 0.15;
    }

    /* Peak 3 — longest hold */
    63% {
        opacity: 0.15;
        background-color: rgba(255, 255, 255, 0);
    }

    64% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    70% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Fade out — afterglow pulses */
    76% {
        opacity: 0.4;
        background-color: rgba(255, 255, 255, 0);
    }

    80% {
        opacity: 0.5;
    }

    85% {
        opacity: 0.2;
    }

    90% {
        opacity: 0.25;
    }

    95% {
        opacity: 0.08;
    }

    100% {
        opacity: 0;
    }
}

@keyframes flash-orgasm-intense-climax {
    /* Same build-up as flash-orgasm-intense but ENDS at the white peak (for autoTransition at climax) */

    /* Start */
    0% {
        opacity: 0;
    }

    /* Build-up */
    14% {
        opacity: 0.4;
    }

    23% {
        opacity: 0.1;
    }

    26% {
        opacity: 0.7;
    }

    30% {
        opacity: 0.12;
    }

    /* Peak 1 */
    33% {
        opacity: 0.12;
        background-color: rgba(255, 255, 255, 0);
    }

    34% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Dip 1 */
    49% {
        opacity: 0.25;
        background-color: rgba(255, 255, 255, 0);
    }

    54% {
        opacity: 0.55;
    }

    59% {
        opacity: 0.12;
    }

    /* Peak 2 */
    61% {
        opacity: 0.12;
        background-color: rgba(255, 255, 255, 0);
    }

    63% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Dip 2 */
    77% {
        opacity: 0.3;
        background-color: rgba(255, 255, 255, 0);
    }

    81% {
        opacity: 0.65;
    }

    86% {
        opacity: 0.15;
    }

    /* Climax — ends on full white */
    90% {
        opacity: 0.15;
        background-color: rgba(255, 255, 255, 0);
    }

    91% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }

    100% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1);
    }
}

@keyframes breathe-loop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoom-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoom-out {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes blur-in {
    0% {
        filter: blur(10px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes reveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes glitch {

    0%,
    100% {
        transform: translateX(0);
        filter: none;
    }

    7% {
        transform: translateX(5px);
        filter: hue-rotate(90deg);
    }

    10% {
        transform: translateX(-3px);
        filter: hue-rotate(0deg);
    }

    27% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(2px);
        filter: hue-rotate(180deg);
    }

    35% {
        transform: translateX(0);
        filter: none;
    }

    52% {
        transform: translateX(-4px);
        filter: hue-rotate(90deg);
    }

    55% {
        transform: translateX(0);
    }
}

@keyframes tremble {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px) translateY(-1px);
    }

    50% {
        transform: translateX(1px) translateY(1px);
    }

    75% {
        transform: translateX(-1px) translateY(-1px);
    }
}

@keyframes dramatic-zoom {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    30% {
        transform: scale(1.15);
        filter: brightness(1.2);
    }

    100% {
        transform: scale(1.05);
        filter: brightness(1.1);
    }
}

@keyframes opening-eyes {
    0% {
        clip-path: inset(50% 0 50% 0);
        filter: brightness(0);
    }

    30% {
        clip-path: inset(40% 0 40% 0);
        filter: brightness(0.4);
    }

    60% {
        clip-path: inset(20% 0 20% 0);
        filter: brightness(0.7);
    }

    80% {
        clip-path: inset(5% 0 5% 0);
        filter: brightness(0.9);
    }

    100% {
        clip-path: inset(0 0 0 0);
        filter: brightness(1);
    }
}

@keyframes blinding-flash {
    0% {
        filter: brightness(8) blur(15px) saturate(0);
        opacity: 1;
    }

    15% {
        filter: brightness(6) blur(10px) saturate(0.2);
        opacity: 1;
    }

    35% {
        filter: brightness(4) blur(6px) saturate(0.4);
        opacity: 1;
    }

    55% {
        filter: brightness(2.5) blur(3px) saturate(0.6);
        opacity: 1;
    }

    75% {
        filter: brightness(1.5) blur(1px) saturate(0.85);
        opacity: 1;
    }

    100% {
        filter: brightness(1) blur(0) saturate(1);
        opacity: 1;
    }
}

@keyframes closing-eyes {
    0% {
        clip-path: inset(0 0 0 0);
        filter: brightness(1);
    }

    40% {
        clip-path: inset(20% 0 20% 0);
        filter: brightness(0.6);
    }

    100% {
        clip-path: inset(50% 0 50% 0);
        filter: brightness(0);
    }
}

/* Max safe translateY = -(scale - 1) / scale * 100%
   scale 1.2 → -16.67%  |  scale 1.3 → -23.08%
   scale 1.4 → -28.57%  |  scale 1.5 → -33.33% */
@keyframes zoom-pan-loop-img {
    0% {
        transform: scale(1) translateY(0%);
    }

    20% {
        transform: scale(1.2) translateY(0%);
    }

    55% {
        transform: scale(1.2) translateY(-16.67%);
    }

    65% {
        transform: scale(1.2) translateY(-16.67%);
    }

    90% {
        transform: scale(1) translateY(0%);
    }

    100% {
        transform: scale(1) translateY(0%);
    }
}

@keyframes zoom-pan-loop-bottom-img {
    0% {
        transform: scale(1) translateY(0%);
    }

    20% {
        transform: scale(1.2) translateY(0%);
    }

    55% {
        transform: scale(1.2) translateY(16.67%);
    }

    65% {
        transform: scale(1.2) translateY(16.67%);
    }

    90% {
        transform: scale(1) translateY(0%);
    }

    100% {
        transform: scale(1) translateY(0%);
    }
}

/* Animation classes for dialogue images */
.game__image-display.anim-shake {
    animation: shake 0.5s ease-in-out;
}

.game__image-display.anim-shake-intense {
    animation: shake-intense 0.5s ease-in-out;
}

.game__image-display.anim-shake-loop {
    animation: shake 0.5s ease-in-out infinite;
}

.game__image-display.anim-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.game__image-display.anim-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

.game__image-display.anim-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

.game__image-display.anim-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
}

.game__image-display.anim-slide-in-left {
    animation: slide-in-left 0.5s ease-out forwards;
}

.game__image-display.anim-slide-in-right {
    animation: slide-in-right 0.5s ease-out forwards;
}

.game__image-display.anim-flash {
    animation: flash 0.5s ease-in-out;
}

.game__image-display.anim-float {
    animation: float 3s ease-in-out infinite;
}

.game__image-display.anim-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

.game__image-display.anim-breathe-loop {
    animation: breathe-loop 2s linear infinite;
}

.game__image-display.anim-zoom-in {
    animation: zoom-in 0.4s ease-out forwards;
}

.game__image-display.anim-zoom-out {
    animation: zoom-out 0.4s ease-out forwards;
}

.game__image-display.anim-blur-in {
    animation: blur-in 0.6s ease-out forwards;
}

.game__image-display.anim-reveal {
    animation: reveal 0.8s ease-out forwards;
}

.game__image-display.anim-glitch {
    animation: glitch 0.8s ease-in-out;
}

.game__image-display.anim-tremble {
    animation: tremble 0.3s linear infinite;
}

.game__image-display.anim-opening-eyes {
    animation: opening-eyes 2s ease-out both;
}

.game__image-display.anim-closing-eyes {
    animation: closing-eyes 1.5s ease-in both;
}

.game__image-display.anim-zoom-pan-loop {
    animation: zoom-pan-loop 10s ease-in-out infinite;
    overflow: hidden;
}

.game__image-display.anim-zoom-pan-loop img {
    transform-origin: top center;
    animation: zoom-pan-loop-img 10s ease-in-out infinite;
}

.game__image-display.anim-zoom-pan-loop-bottom {
    animation: zoom-pan-loop 10s ease-in-out infinite;
    overflow: hidden;
}

.game__image-display.anim-zoom-pan-loop-bottom img {
    transform-origin: bottom center;
    animation: zoom-pan-loop-bottom-img 10s ease-in-out infinite;
}

/* Animation classes for background - applied to .game__background */
.game__background.bg-anim-shake {
    animation: shake-bg 0.5s ease-in-out;
}

.game__background.bg-anim-shake-intense {
    animation: shake-bg-intense 0.6s ease-in-out;
}

.game__background.bg-anim-shake-loop {
    animation: shake-bg 0.5s ease-in-out infinite;
}

.game__background.bg-anim-shake-intense-loop {
    animation: shake-bg-intense 0.6s ease-in-out infinite;
}

.game__background.bg-anim-zoom-pan-down {
    animation: zoom-pan-down 4s ease-out forwards;
}

.game__background.bg-anim-zoom-pan-up {
    animation: zoom-pan-up 4s ease-out forwards;
}

.game__background.bg-anim-kenburns {
    animation: kenburns 8s ease-in-out forwards;
}

.game__background.bg-anim-kenburns-reverse {
    animation: kenburns-reverse 8s ease-in-out forwards;
}

.game__background.bg-anim-kenburns-loop {
    animation: kenburns 8s ease-in-out infinite alternate;
}

.game__background.bg-anim-pulse {
    animation: pulse-bg 2s ease-in-out infinite;
}

.game__background.bg-anim-fade-in {
    animation: fade-in 1s ease-out forwards;
}

.game__background.bg-anim-opening-eyes {
    animation: opening-eyes 2s ease-out both;
}

.game__background.bg-anim-closing-eyes {
    animation: closing-eyes 1.5s ease-in both;
}

.game__background.bg-anim-blinding-flash {
    animation: blinding-flash 5s ease-out both;
    /* Pre-promote to its own GPU layer so the compositor doesn't have to
       allocate render targets mid-animation. This is the main cause of the
       "stuttering in intervals" feel — filter+blur on a freshly-promoted
       layer hitches on each new blur radius. */
    will-change: filter, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.game__background.bg-anim-flash {
    animation: flash 0.5s ease-in-out;
}

.game__background.bg-anim-dramatic-zoom {
    animation: dramatic-zoom 1.5s ease-out forwards;
}

/* Flash overlay for background flash-white effect */
.game__flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

.game__flash-overlay.active {
    animation: flash-white 0.4s ease-out forwards;
}

.game__flash-overlay.flash-out {
    animation: flash-out 1.5s ease-in forwards;
    z-index: 15;
}

.game__flash-overlay.flash-orgasm {
    animation: flash-orgasm 4s ease-in-out both;
    z-index: 15;
    background-color: rgba(255, 255, 255, 0);
    background-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, white 100%);
    opacity: 0;
    filter: brightness(var(--brightness));

    /* Tweak these in DevTools to test */
    --brightness: 2;
    /* Glow intensity multiplier (1 = normal, 2 = very bright) */
}

.game__flash-overlay.flash-orgasm-fadeout {
    animation: flash-orgasm-fadeout 3s ease-in-out both;
    z-index: 15;
    background-color: rgba(255, 255, 255, 1);
    background-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, white 100%);
    opacity: 1;
    filter: brightness(var(--brightness));

    --brightness: 2;
}

.game__flash-overlay.flash-orgasm-climax {
    animation: flash-orgasm-climax 3s ease-in-out both;
    z-index: 15;
    background-color: rgba(255, 255, 255, 0);
    background-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, white 100%);
    opacity: 0;
    filter: brightness(var(--brightness));

    /* Tweak these in DevTools to test */
    --brightness: 2;
}

.game__flash-overlay.flash-orgasm-intense {
    animation: flash-orgasm-intense 6s ease-in-out both;
    z-index: 15;
    background-color: rgba(255, 255, 255, 0);
    background-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, white 100%);
    opacity: 0;
    filter: brightness(var(--brightness));

    /* Tweak these in DevTools to test */
    --brightness: 2;
}

.game__flash-overlay.flash-orgasm-intense-climax {
    animation: flash-orgasm-intense-climax 5s ease-in-out both;
    z-index: 15;
    background-color: rgba(255, 255, 255, 0);
    background-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, white 100%);
    opacity: 0;
    filter: brightness(var(--brightness));

    /* Tweak these in DevTools to test */
    --brightness: 2;
}

/* ===== MAIN MENU ===== */

.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #000;
}

.main-menu__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
}

/*
    Two-video cross-fade loop styles (kept for reference, currently disabled):

    .main-menu__bg-stack {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .main-menu__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        object-fit: fill;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.6s ease;
    }

    .main-menu__background--a { z-index: 2; }
    .main-menu__background--b { z-index: 1; }
*/

.main-menu__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 5vh 6vw 0;
    max-width: 50vw;
}

.main-menu__title {
    font-family: var(--map-font-title);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3rem;
    color: #000;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.35);
    text-align: left;
    letter-spacing: 4px;
    margin: 0;
}

.main-menu__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 320px;
}

/* Reusable torn-map clip-path + parchment palette */
:root {
    --map-clip: polygon(2% 0%, 10% 1.2%, 20% 0.3%, 30% 1.5%, 42% 0.5%, 54% 1.6%, 66% 0.4%, 78% 1.5%,
            88% 0.6%, 96% 1.4%, 100% 12%, 97% 22%, 100% 34%,
            98% 48%, 100% 62%, 97% 76%, 100% 88%,
            96% 98.6%, 88% 99.7%, 78% 98.5%, 66% 99.6%, 54% 98.4%, 42% 99.5%, 30% 98.5%, 20% 99.7%, 10% 98.8%,
            4% 99.4%, 0% 88%, 3% 76%, 0% 62%, 2% 48%, 0% 34%, 3% 22%, 0% 12%);
    --map-parchment:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(120, 70, 20, 0.25) 0%, transparent 60%),
        #f7cd8c;
    --map-parchment-hover:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(120, 70, 20, 0.2) 0%, transparent 60%),
        #fbd9a2;
    --map-ink: #3a230f;
    --map-ink-soft: #6b4422;
    --map-text-highlight: 0 1px 0 rgba(255, 240, 210, 0.5);
    --map-inner-shadow:
        inset 0 0 0 1px rgba(255, 240, 200, 0.4),
        inset 0 0 18px rgba(120, 70, 20, 0.35);
    --map-font-title: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --map-font-body: 'Caudex', 'Book Antiqua', Georgia, serif;


    /* ----- Backgrounds ----- */
    --ui-game-bg: #000;
    /* main game background */
    --ui-panel-bg: rgba(0, 0, 0, 0.86);
    /* story text panel background */
    --ui-panel-bg-solid: rgba(0, 0, 0, 0.92);
    /* alternate panel background */
    --ui-overlay-bg: rgba(0, 0, 0, 0.75);
    /* modal / overlay background */

    /* ----- Text Colors ----- */
    --ui-text-primary: #e8e8e8;
    /* main text colour */
    --ui-text-secondary: #f0f0f0;
    /* brighter text for buttons etc. */
    --ui-text-muted: rgba(232, 232, 232, 0.55);
    /* dimmed text */

    /* ----- Borders & Lines ----- */
    --ui-border-light: rgba(255, 255, 255, 0.35);
    --ui-border-medium: #555;
    --ui-border-strong: rgba(255, 255, 255, 0.6);

    /* ----- Buttons (UI & choices) ----- */
    --ui-btn-bg: rgba(30, 30, 30, 0.94);
    --ui-btn-bg-hover: rgba(245, 245, 245, 0.96);
    --ui-btn-text: #f0f0f0;
    --ui-btn-text-hover: #111;

    /* ----- Navigation / Quick action buttons ----- */
    --ui-nav-bg: rgba(40, 40, 40, 0.78);
    --ui-nav-bg-hover: rgba(90, 90, 90, 0.95);
    --ui-active-bg: rgba(100, 200, 100, 0.8);
    /* active (autoplay, etc.) */

    /* ----- Speaker & character UI ----- */
    --ui-speaker-name-bg: rgba(50, 50, 50, 0.95);
    --ui-expression-bg: rgba(40, 40, 40, 0.9);
    --ui-char-dimmed: brightness(0.62) saturate(0.68) contrast(0.92);

    /* ----- Flash / special effects overlay ----- */
    --ui-flash-white: white;
    /* white flash overlay */
    --ui-flash-orgasm-glow: radial-gradient(ellipse at center, transparent 0%, transparent 30%, white 100%);

    /* ----- Settings modal & Save slots ----- */
    --ui-modal-bg: rgba(30, 30, 30, 0.95);
    --ui-slot-bg: rgba(255, 255, 255, 0.05);
    --ui-slot-bg-hover: rgba(255, 255, 255, 0.1);
    --ui-slot-border: rgba(255, 255, 255, 0.2);
    --ui-autosave-border: rgba(180, 140, 60, 0.5);
    --ui-autosave-bg: rgba(180, 140, 60, 0.08);
}


.main-menu__btn {
    position: relative;
    isolation: isolate;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-family: var(--map-font-body);
    /* The button itself is the BLACK outline silhouette */
    background: #000;
    border: none;
    color: var(--map-ink);
    cursor: pointer;
    border-radius: 2px;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-align: left;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    text-shadow: var(--map-text-highlight);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

/* Inner parchment layer — inset 2px so the button's black background
   shows around it as a clean outline that follows the torn edges */
.main-menu__btn::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.main-menu__btn i {
    width: 20px;
    text-align: center;
    opacity: 0.85;
    color: var(--map-ink-soft);
    text-shadow: var(--map-text-highlight);
}

.main-menu__btn:hover::before {
    background: var(--map-parchment-hover);
}

.main-menu__btn:hover {
    transform: translateX(5px);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.main-menu__btn:active {
    transform: translateX(5px) translateY(2px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Player Name Modal */
.player-name-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
}

.player-name-modal.active {
    display: flex;
}

.player-name-modal__box {
    position: relative;
    isolation: isolate;
    background: #000;
    border: none;
    border-radius: 2px;
    padding: 44px 40px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    min-width: 320px;
    max-width: 440px;
    width: 90%;
    color: var(--map-ink);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55));
}

.player-name-modal__box::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
}

.player-name-modal__title {
    color: var(--map-ink);
    font-family: var(--map-font-title);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin: 0;
    text-align: center;
    text-shadow: var(--map-text-highlight);
}

.player-name-modal__input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.05rem;
    font-family: var(--map-font-body);
    font-weight: 700;
    background: rgba(255, 245, 215, 0.55);
    border: 1px solid rgba(60, 35, 10, 0.5);
    border-radius: 2px;
    color: var(--map-ink);
    outline: none;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    box-shadow: inset 0 1px 2px rgba(60, 35, 10, 0.2);
}

.player-name-modal__input:focus {
    border-color: var(--map-ink);
    background: rgba(255, 250, 225, 0.85);
}

.player-name-modal__input::placeholder {
    color: rgba(60, 35, 10, 0.45);
    font-style: italic;
}

.player-name-modal__buttons {
    display: flex;
    gap: 14px;
    width: 100%;
}

.player-name-modal__btn {
    position: relative;
    isolation: isolate;
    flex: 1;
    padding: 10px 14px;
    font-size: 1rem;
    font-family: var(--map-font-body);
    font-weight: 700;
    background: #000;
    border: none;
    border-radius: 2px;
    color: var(--map-ink);
    cursor: pointer;
    text-shadow: var(--map-text-highlight);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s, filter 0.2s;
    box-shadow: none;
    width: auto;
}

.player-name-modal__btn::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.player-name-modal__btn:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
    background: #000;
    border: none;
    color: var(--map-ink);
}

.player-name-modal__btn:hover::before {
    background: var(--map-parchment-hover);
}

.player-name-modal__btn--confirm::before {
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(60, 110, 40, 0.3) 0%, transparent 60%),
        #c8d896;
}

.player-name-modal__btn--confirm:hover::before {
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(60, 110, 40, 0.25) 0%, transparent 60%),
        #d5e3a8;
}

/* Menu Sub-panel */
.menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
}

.menu-panel.active {
    display: flex;
}

.menu-panel__content {
    position: relative;
    isolation: isolate;
    background: #000;
    border: none;
    border-radius: 2px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    padding: 30px 36px;
    clip-path: var(--map-clip);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55));
    color: var(--map-ink);
    display: flex;
    flex-direction: column;
}

.menu-panel__content::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
}

.menu-panel__body {
    color: var(--map-ink);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-family: var(--map-font-body);
    /* Inner padding so the scrollbar/content doesn't kiss the jagged edge */
    padding-right: 6px;
}

.menu-panel__body::-webkit-scrollbar {
    width: 6px;
}

.menu-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.menu-panel__body::-webkit-scrollbar-thumb {
    background: rgba(60, 35, 10, 0.5);
    border-radius: 3px;
}

.menu-panel__content::-webkit-scrollbar {
    width: 6px;
}

.menu-panel__content::-webkit-scrollbar-track {
    background: transparent;
}

.menu-panel__content::-webkit-scrollbar-thumb {
    background: rgba(60, 35, 10, 0.5);
    border-radius: 3px;
}

.menu-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(60, 35, 10, 0.45);
    padding-bottom: 12px;
}

.menu-panel__header h2 {
    color: var(--map-ink);
    margin: 0;
    font-family: var(--map-font-title);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-shadow: var(--map-text-highlight);
}

.menu-panel__title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.menu-panel__file-btn {
    background: rgba(60, 35, 10, 0.08);
    border: 1.5px solid rgba(60, 35, 10, 0.4);
    color: var(--map-ink);
    width: auto;
    padding: 6px 12px;
    font-size: 1rem;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: none;
    text-shadow: var(--map-text-highlight);
    transition: all 0.2s ease;
}

.menu-panel__file-btn:hover {
    background: rgba(60, 35, 10, 0.18);
    border-color: rgba(60, 35, 10, 0.7);
    box-shadow: none;
    transform: none;
}

.menu-panel__close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--map-ink-soft);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin: 0;
    width: auto;
    transition: color 0.2s, transform 0.2s;
    align-self: center;
    text-shadow: none;
}

.menu-panel__close:hover {
    background: none;
    color: var(--map-ink);
    transform: rotate(90deg);
    box-shadow: none;
    border: none;
}

/* === Settings cloned into the menu panel: re-skin for parchment background === */
.menu-panel__body .settings-tabs {
    border-bottom: 2px dashed rgba(60, 35, 10, 0.45);
}

.menu-panel__body .settings-tab-btn {
    color: var(--map-ink-soft);
    text-shadow: var(--map-text-highlight);
}

.menu-panel__body .settings-tab-btn.active {
    color: var(--map-ink);
    border-bottom-color: var(--map-ink);
}

.menu-panel__body .settings-group-title {
    color: var(--map-ink-soft);
    border-bottom: 1px dashed rgba(60, 35, 10, 0.4);
    text-shadow: var(--map-text-highlight);
}

.menu-panel__body .settings-row {
    color: var(--map-ink);
    text-shadow: var(--map-text-highlight);
}

.menu-panel__body .settings-value {
    color: var(--map-ink-soft);
}

.menu-panel__body .settings-slider {
    background: rgba(60, 35, 10, 0.35);
}

.menu-panel__body .settings-slider::-webkit-slider-thumb {
    background: var(--map-ink);
    border-color: rgba(255, 240, 210, 0.6);
}

.menu-panel__body .settings-slider::-moz-range-thumb {
    background: var(--map-ink);
    border-color: rgba(255, 240, 210, 0.6);
}

.menu-panel__body .settings-toggle {
    background: rgba(60, 35, 10, 0.35);
}

.menu-panel__body .settings-toggle.active {
    background: rgba(80, 130, 60, 0.7);
}

.menu-panel__body .settings-toggle::after {
    background: #fbeed0;
    box-shadow: 0 0 0 1px rgba(60, 35, 10, 0.4);
}

/* Reset / delete button inside the parchment panel — jagged map fragment */
.menu-panel__body .save-slot-btn {
    position: relative;
    isolation: isolate;
    background: #000;
    border: none;
    border-radius: 2px;
    color: var(--map-ink);
    padding: 8px 18px;
    font-weight: 600;
    text-shadow: var(--map-text-highlight);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s, filter 0.2s;
}

.menu-panel__body .save-slot-btn::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.menu-panel__body .save-slot-btn:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}

.menu-panel__body .save-slot-btn:hover::before {
    background: var(--map-parchment-hover);
}

/* Reset/delete variant — reddish parchment tint */
.menu-panel__body .save-slot-btn.delete::before {
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(140, 30, 20, 0.35) 0%, transparent 60%),
        #e8a888;
}

.menu-panel__body .save-slot-btn.delete:hover::before {
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(140, 30, 20, 0.3) 0%, transparent 60%),
        #f0b89c;
}

/* Load game slots in menu */
.menu-load-slot {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #000;
    border: none;
    border-radius: 2px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    color: var(--map-ink);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.menu-load-slot::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.menu-load-slot:hover::before {
    background: var(--map-parchment-hover);
}

.menu-load-slot:hover {
    transform: translateX(4px);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}

.menu-load-slot__thumb {
    width: 80px;
    height: 50px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(60, 35, 10, 0.2);
    border: 1px solid rgba(60, 35, 10, 0.5);
}

.menu-load-slot__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-load-slot__info {
    flex: 1;
}

.menu-load-slot__title {
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 2px;
    color: var(--map-ink);
    text-shadow: var(--map-text-highlight);
}

.menu-load-slot__details {
    font-size: 0.75rem;
    color: var(--map-ink-soft);
}

.menu-empty-msg {
    text-align: center;
    color: var(--map-ink-soft);
    padding: 40px 0;
    font-size: 0.95rem;
    font-style: italic;
}

/* About & credits content in menu panel */
.menu-about {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--map-ink);
}

.menu-about__lead {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--map-ink-soft);
}

.menu-about__section {
    padding-top: 8px;
    border-top: 1px dashed rgba(60, 35, 10, 0.35);
}

.menu-about__section h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    font-family: var(--map-font-title);
    color: var(--map-ink);
}

.menu-about__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-about__list li {
    line-height: 1.4;
    color: var(--map-ink-soft);
}

.menu-about__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.menu-about__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--map-ink);
    background: rgba(255, 245, 215, 0.45);
    border: 1px solid rgba(60, 35, 10, 0.35);
    border-radius: 2px;
    padding: 6px 10px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.menu-about__links a:hover {
    transform: translateY(-1px);
    background: rgba(255, 248, 228, 0.75);
}

.menu-about__note {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: rgba(60, 35, 10, 0.85);
}

.menu-about__note code {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--map-ink-soft);
}

/* Character cards in menu */
.menu-char-card {
    position: relative;
    isolation: isolate;
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: #000;
    border: none;
    border-radius: 2px;
    margin-bottom: 12px;
    align-items: center;
    color: var(--map-ink);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.menu-char-card::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
}

.menu-char-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(60, 35, 10, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 240, 210, 0.4);
}

.menu-char-card__info {
    flex: 1;
}

.menu-char-card__name {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 4px;
    text-transform: capitalize;
    color: var(--map-ink);
    text-shadow: var(--map-text-highlight);
}

.menu-char-card__desc {
    font-size: 0.8rem;
    color: var(--map-ink-soft);
    line-height: 1.4;
}

.menu-char-card.locked {
    opacity: 0.5;
}

.menu-char-card.locked img {
    filter: brightness(0);
}

/* Scene list in menu */
.menu-scene-item {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #000;
    border: none;
    border-radius: 2px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    color: var(--map-ink);
    clip-path: var(--map-clip);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.menu-scene-item::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--map-parchment);
    box-shadow: var(--map-inner-shadow);
    clip-path: var(--map-clip);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.menu-scene-item:hover::before {
    background: var(--map-parchment-hover);
}

.menu-scene-item:hover {
    transform: translateX(4px);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}

.menu-scene-item__thumb {
    width: 70px;
    height: 44px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(60, 35, 10, 0.2);
    border: 1px solid rgba(60, 35, 10, 0.5);
}

.menu-scene-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-scene-item__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    color: var(--map-ink-soft);
    opacity: 0.6;
}

.menu-scene-item__name {
    font-size: 0.9rem;
    color: var(--map-ink);
    text-shadow: var(--map-text-highlight);
}

.menu-scene-item.locked {
    opacity: 0.5;
    cursor: default;
}

/* ===== GALLERY GRID ===== */
.menu-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 4px 0;
}

.menu-gallery-item {
    position: relative;
    isolation: isolate;
    background: #000;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    clip-path: var(--map-clip);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
    padding: 3px;
}

.menu-gallery-item:not(.locked):hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.menu-gallery-item__thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: rgba(60, 35, 10, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.menu-gallery-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-gallery-item.locked .menu-gallery-item__thumb img {
    filter: blur(10px) brightness(0.55);
    transform: scale(1.05);
    /* prevents blurred edges showing */
}

.menu-gallery-item__lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.menu-gallery-item__title {
    padding: 6px 10px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--map-ink);
    background: var(--map-parchment);
    text-shadow: var(--map-text-highlight);
    font-weight: 600;
}

.menu-gallery-item.locked {
    cursor: default;
}

/* Full-screen viewer */
.gallery-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.gallery-viewer__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.gallery-viewer__content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.gallery-viewer__title {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.gallery-viewer__close {
    position: absolute;
    top: -16px;
    right: -16px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s;
}

.gallery-viewer__close:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Large screens (up to 1400px) */
@media (max-width: 1400px) {
    .game__story-text {
        font-size: calc(1.35rem * var(--text-scale, 1));
    }

    .game__story-speaker {
        width: calc(90px * var(--ui-scale, 1));
        height: calc(90px * var(--ui-scale, 1));
        flex: 0 0 calc(90px * var(--ui-scale, 1));
        margin: 0 30px;
    }

    .game__speaker-info {
        left: calc(114px * var(--ui-scale, 1) + 94px);
    }

}

/* Medium-large screens (up to 1200px) */
@media (max-width: 1200px) {
    .game__story-text {
        font-size: calc(1.25rem * var(--text-scale, 1));
    }

    .game__ui {
        padding: calc(18px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
        min-height: calc(120px * var(--ui-scale, 1));
        margin: 4%;
    }

    .game__story-speaker {
        width: calc(80px * var(--ui-scale, 1));
        height: calc(80px * var(--ui-scale, 1));
        flex: 0 0 calc(80px * var(--ui-scale, 1));
        margin: 0 25px;
    }

    .game__speaker-info {
        left: calc(100px * var(--ui-scale, 1) + 84px);
    }

    .game__speaker-name {
        font-size: calc(0.9rem * var(--text-scale, 1));
        padding: 6px 14px;
    }

    .game__speaker-expression {
        font-size: calc(0.7rem * var(--text-scale, 1));
        padding: 4px 12px;
    }

    .game__characters {
        gap: 60px;
    }

    button {
        padding: 14px 28px;
        font-size: 1.05rem;
    }
}

/* Medium screens (up to 1024px) */
@media (max-width: 1024px) {
    .game__story-text {
        font-size: calc(1.15rem * var(--text-scale, 1));
        line-height: 1.5;
    }

    .game__ui {
        padding: calc(16px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
        min-height: calc(110px * var(--ui-scale, 1));
        border-radius: 1.5rem;
    }

    .game__story-speaker {
        width: calc(70px * var(--ui-scale, 1));
        height: calc(70px * var(--ui-scale, 1));
        flex: 0 0 calc(70px * var(--ui-scale, 1));
        margin: 0 20px;
    }

    .game__speaker-info {
        left: calc(88px * var(--ui-scale, 1) + 69px);
    }

    .game__nav-btn {
        width: 45px;
        padding: 6px 14px;
    }

    .game__autoplay-btn,
    .game__skip-btn {
        height: 45px;
    }

    .game__autoplay-btn.visible,
    .game__skip-btn.visible {
        width: 45px;
    }

    .game__characters {
        gap: 40px;
    }

    .game__image-display {
        max-width: 70%;
        bottom: calc(70px + 10% + 5%);

    }

    .game__choices {
        max-width: 450px;
    }
}

/* Tablets (up to 768px) */
@media (max-width: 768px) {
    .game__story-text {
        font-size: calc(1.05rem * var(--text-scale, 1));
        line-height: 1.45;
    }

    .game__ui {
        padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
        min-height: calc(100px * var(--ui-scale, 1));
        margin: 3%;
        border-width: 3px;
        border-radius: 1.25rem;
    }

    .game__story-speaker {
        width: calc(60px * var(--ui-scale, 1));
        height: calc(60px * var(--ui-scale, 1));
        flex: 0 0 calc(60px * var(--ui-scale, 1));
        margin: 0 15px;
    }

    .game__speaker-info {
        left: calc(76px * var(--ui-scale, 1) + 54px);
        top: -5px;
    }

    .game__speaker-name {
        font-size: calc(0.85rem * var(--text-scale, 1));
        padding: 5px 12px;
    }

    .game__speaker-expression {
        font-size: calc(0.65rem * var(--text-scale, 1));
        padding: 3px 10px;
    }

    .game__nav-btn {
        width: 40px;
        padding: 5px 12px;
        font-size: 0.85rem;
    }

    .game__autoplay-btn,
    .game__skip-btn {
        height: 40px;
        font-size: 0.8rem;
    }

    .game__autoplay-btn.visible,
    .game__skip-btn.visible {
        width: 40px;
        margin-left: 6px;
    }

    .game__characters {
        gap: 20px;
        top: 3%;
    }

    .game__image-display {
        max-width: 80%;
        bottom: calc(70px + 10% + 5%);
        max-height: 40vh;
    }

    .game__image-display img {
        max-height: 40vh;
    }

    .game__choices {
        max-width: 380px;
        gap: 12px;
    }

    button {
        padding: 12px 24px;
        font-size: 1rem;
    }

    /* .settings-btn {
        padding: 8px 14px;
        font-size: 1.1rem;
    } */

    .settings-modal-content {
        padding: 20px;
    }

    .settings-modal-header h2 {
        font-size: 1.5rem;
    }
}

/* Small tablets / Large phones (up to 600px) */
@media (max-width: 600px) {
    .game__story-text {
        font-size: calc(0.95rem * var(--text-scale, 1));
        line-height: 1.4;
    }

    .game__ui {
        padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        min-height: calc(90px * var(--ui-scale, 1));
        margin: 2.5%;
        flex-wrap: wrap;
    }

    .game__story-speaker {
        width: calc(50px * var(--ui-scale, 1));
        height: calc(50px * var(--ui-scale, 1));
        flex: 0 0 calc(50px * var(--ui-scale, 1));
        margin: 0 12px;
    }

    .game__speaker-info {
        left: calc(64px * var(--ui-scale, 1) + 44px);
    }

    .game__speaker-name {
        font-size: calc(0.8rem * var(--text-scale, 1));
        padding: 4px 10px;
    }

    .game__speaker-expression {
        font-size: calc(0.6rem * var(--text-scale, 1));
        padding: 3px 8px;
    }

    .game__nav-btn {
        width: 36px;
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .game__autoplay-btn,
    .game__skip-btn {
        height: 36px;
        font-size: 0.75rem;
    }

    .game__autoplay-btn.visible,
    .game__skip-btn.visible {
        width: 36px;
        margin-left: 5px;
    }

    .game__characters {
        gap: 10px;
        top: 2%;
    }

    .game__image-display {
        max-width: 90%;
        bottom: calc(90px + 5% + 5%);
        max-height: 40vh;
        padding: 8px;
    }

    .game__image-display img {
        max-height: 40vh;
    }

    .game__image-display.is-item-image {
        max-width: 96%;
        max-height: 56vh;
        bottom: calc(90px + 5% + 5%);
    }

    .game__image-display.is-item-image img {
        max-height: 56vh;
    }

    .game__choices {
        max-width: 320px;
        gap: 10px;
        padding: 0 16px;
    }

    button {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    /* .settings-btn {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 1rem;
    } */

    .skip-intro-btn,
    .intro-back-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* Mobile phones (up to 480px) */
@media (max-width: 480px) {
    .game__story-text {
        font-size: calc(0.88rem * var(--text-scale, 1));
        line-height: 1.35;
    }

    .game__ui {
        padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
        min-height: calc(80px * var(--ui-scale, 1));
        margin: 2%;
        border-width: 2px;
        border-radius: 1rem;
    }

    .game__story-speaker {
        width: calc(45px * var(--ui-scale, 1));
        height: calc(45px * var(--ui-scale, 1));
        flex: 0 0 calc(45px * var(--ui-scale, 1));
        margin: 0 10px;
    }

    .game__speaker-info {
        left: calc(57px * var(--ui-scale, 1) + 36px);
        top: -8px;
    }

    .game__speaker-name {
        font-size: calc(0.75rem * var(--text-scale, 1));
        padding: 3px 8px;
    }

    .game__speaker-expression {
        font-size: calc(0.55rem * var(--text-scale, 1));
        padding: 2px 6px;
    }

    .game__nav-btn {
        width: 32px;
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    .game__autoplay-btn,
    .game__skip-btn {
        height: 32px;
        font-size: 0.7rem;
    }

    .game__autoplay-btn.visible,
    .game__skip-btn.visible {
        width: 32px;
        margin-left: 4px;
    }

    .game__characters {
        gap: 5px;
    }

    .game__image-display {
        max-width: 94%;
        bottom: calc(80px + 4% + 5%);
        max-height: 40vh;
        padding: 6px;
        border-width: 2px;
    }

    .game__image-display img {
        max-height: 40vh;
    }

    .game__image-display.is-item-image {
        max-width: 98%;
        max-height: 52vh;
        bottom: calc(76px + 4% + 5%);
    }

    .game__image-display.is-item-image img {
        max-height: 52vh;
    }

    .game__choices {
        max-width: 280px;
        gap: 8px;
        padding: 0 12px;
    }

    button {
        padding: 8px 16px;
        font-size: 0.9rem;
        border-radius: 6px;
    }

    /* .settings-btn {
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        font-size: 0.9rem;
    } */

    .settings-modal-content {
        padding: 15px;
        max-height: 85vh;
    }

    .settings-modal-header h2 {
        font-size: 1.3rem;
    }

    .settings-tab-btn {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .save-slot {
        padding: 12px;
    }

    .save-slot-title {
        font-size: 1rem;
    }
}

/* Very small phones (up to 360px) */
@media (max-width: 360px) {
    .game__story-text {
        font-size: calc(0.82rem * var(--text-scale, 1));
    }

    .game__ui {
        padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
        min-height: calc(70px * var(--ui-scale, 1));
    }

    .game__story-speaker {
        width: calc(40px * var(--ui-scale, 1));
        height: calc(40px * var(--ui-scale, 1));
        flex: 0 0 calc(40px * var(--ui-scale, 1));
        margin: 0 8px;
    }

    .game__speaker-info {
        left: calc(50px * var(--ui-scale, 1) + 32px);
    }

    .game__speaker-name {
        font-size: calc(0.7rem * var(--text-scale, 1));
    }

    .game__speaker-expression {
        display: none;
    }

    .game__choices {
        max-width: 250px;
    }

    button {
        padding: 6px 14px;
        font-size: 0.85rem;
    }
}

/* Height-based adjustments for landscape or short screens */
@media (max-height: 600px) {
    .game__ui {
        min-height: calc(70px * var(--ui-scale, 1));
        padding: calc(10px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
        margin: 0%;
    }

    .game__story-text {
        font-size: calc(0.95rem * var(--text-scale, 1));
        min-height: 2em;
    }

    .game__story-speaker {
        width: calc(55px * var(--ui-scale, 1));
        height: calc(55px * var(--ui-scale, 1));
        flex: 0 0 calc(55px * var(--ui-scale, 1));
    }

    .game__image-display {
        bottom: calc(70px + 10% + 5%);
        max-height: 40vh;
    }

    .game__image-display img {
        max-height: 40vh;
    }
}

@media (max-height: 500px) {
    .game__ui {
        min-height: calc(60px * var(--ui-scale, 1));
        padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
    }

    .game__story-text {
        font-size: calc(0.88rem * var(--text-scale, 1));
        min-height: 1.5em;
    }

    .game__story-speaker {
        width: calc(45px * var(--ui-scale, 1));
        height: calc(45px * var(--ui-scale, 1));
        flex: 0 0 calc(45px * var(--ui-scale, 1));
    }

    .game__image-display {
        bottom: calc(60px + 10% + 5%);
        max-height: 40vh;
    }
}

/* ---------- Main menu: landscape / short-height phones ---------- */
/* Short viewports (phone in landscape) can't stack 7 buttons in one column
   without overflowing, so switch to a 2-column grid. This keeps the buttons
   large and tappable while the whole menu still fits with no scrolling. */
@media (max-height: 600px) {
    .main-menu__content {
        gap: 16px;
        padding: 3vh 5vw;
        max-width: 94vw;
        max-height: 100dvh;
        justify-content: center;
        overflow: hidden;
    }

    .main-menu__title {
        font-size: 2rem;
        letter-spacing: 2px;
        max-width: 88vw;
        margin-top: 10px;
    }

    .main-menu__buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        width: min(580px, 84vw);
    }

    .main-menu__btn {
        padding: 13px 18px;
        font-size: 1rem;
        gap: 10px;
        min-height: 48px;
    }

    .main-menu__btn i {
        width: 18px;
    }
}

@media (max-height: 450px) {
    .main-menu__content {
        gap: 10px;
        padding: 2vh 4vw;
        max-width: 96vw;
    }

    .main-menu__title {
        font-size: 1.5rem;
        letter-spacing: 1px;
        max-width: 92vw;
        margin-top: 6px;
    }

    .main-menu__buttons {
        gap: 8px 12px;
        width: min(540px, 82vw);
    }

    .main-menu__btn {
        padding: 10px 14px;
        font-size: 0.9rem;
        min-height: 42px;
    }
}

/* Start screen responsive styles */
#startScreen button {
    max-width: 90vw;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    #startScreen button {
        padding: 16px 40px !important;
        font-size: 1.5rem !important;
    }

    .settings-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .settings-tab-btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
}

@media (max-width: 400px) {
    #startScreen button {
        padding: 14px 30px !important;
        font-size: 1.3rem !important;
    }
}

/* ===== RESPONSIVE BACKGROUNDS & VIDEO ===== */

/* Ensure game background is always responsive */
.game {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Intro video responsive styles */
.intro-video-container {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Ensure video is fully visible on all screen sizes */
.intro-video-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
}

/* Ensure backgrounds scale on smaller screens */
@media (max-width: 768px) {
    .game {
        background-attachment: scroll !important;
    }
}

/* Very tall/narrow screens (portrait phones) - adjust background focus */
@media (max-aspect-ratio: 9/16) {
    .game {
        background-position: center top !important;
    }
}

/* ═══════════════════════ MINIGAME SYSTEM ═══════════════════════ */
.game__minigame-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
}

.game__minigame-container.active {
    display: flex;
}

.game__minigame-container.android-scale {
    --minigame-ui-scale: 1.15;
}

#minigame-canvas {
    max-width: calc(98% * var(--minigame-ui-scale, 1));
    max-height: calc(90% * var(--minigame-ui-scale, 1));
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    cursor: crosshair;
}

.game__minigame-container.stretch-canvas #minigame-canvas {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

.minigame-hud {
    position: absolute;
    top: max(calc(14px * var(--minigame-ui-scale, 1)), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(24px * var(--minigame-ui-scale, 1));
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 910;
}

.minigame-hud__item {
    background: rgba(30, 30, 30, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #f0f0f0;
    padding: calc(8px * var(--minigame-ui-scale, 1)) calc(18px * var(--minigame-ui-scale, 1));
    border-radius: 50px;
    font-size: calc(1rem * var(--minigame-ui-scale, 1));
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--minigame-ui-scale, 1));
}

/* Phones (landscape): keep the HUD pills on one line so a two-digit progress
   value doesn't make them wrap and stack on top of each other. */
@media (max-height: 600px) {
    .minigame-hud {
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 96vw;
    }

    .minigame-hud__item {
        padding: 5px 11px;
        font-size: 0.82rem;
        white-space: nowrap;
    }
}

.minigame-instructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #f0f0f0;
    z-index: 920;
    max-width: calc(600px * var(--minigame-ui-scale, 1));
    padding: calc(40px * var(--minigame-ui-scale, 1));
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: calc(16px * var(--minigame-ui-scale, 1));
}

.minigame-instructions h2 {
    font-size: calc(1.8rem * var(--minigame-ui-scale, 1));
    margin: 0 0 12px 0;
}

.minigame-instructions p {
    font-size: calc(1.1rem * var(--minigame-ui-scale, 1));
    margin: 0 0 24px 0;
    color: #ccc;
    line-height: 1.5;
}

.minigame-instructions button {
    width: auto;
    padding: calc(12px * var(--minigame-ui-scale, 1)) calc(36px * var(--minigame-ui-scale, 1));
    font-size: calc(1.1rem * var(--minigame-ui-scale, 1));
}

.minigame-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #f0f0f0;
    z-index: 930;
    padding: calc(40px * var(--minigame-ui-scale, 1)) calc(60px * var(--minigame-ui-scale, 1));
    background: rgba(20, 20, 20, 0.95);
    border-radius: calc(16px * var(--minigame-ui-scale, 1));
    display: none;
}

.minigame-result.passed {
    border: 3px solid rgba(100, 200, 100, 0.7);
}

.minigame-result.failed {
    border: 3px solid rgba(200, 80, 80, 0.7);
}

.minigame-result h2 {
    font-size: calc(2rem * var(--minigame-ui-scale, 1));
    margin: 0 0 16px 0;
}

.minigame-result button {
    width: auto;
    padding: calc(12px * var(--minigame-ui-scale, 1)) calc(36px * var(--minigame-ui-scale, 1));
    margin-top: 12px;
}

.minigame-result.passed .result-btn-continue {
    display: block;
    width: min(84vw, calc(420px * var(--minigame-ui-scale, 1)));
    max-width: 100%;
    margin: calc(12px * var(--minigame-ui-scale, 1)) auto 0;
    padding: calc(16px * var(--minigame-ui-scale, 1)) calc(44px * var(--minigame-ui-scale, 1));
    font-size: calc(1.22rem * var(--minigame-ui-scale, 1));
    font-weight: 700;
    background: rgba(58, 170, 84, 0.2);
    border-color: rgba(58, 170, 84, 0.5);
    color: #f3fff2;
}

.minigame-result.passed .result-btn-restart {
    display: block;
    width: min(58vw, calc(240px * var(--minigame-ui-scale, 1)));
    max-width: 100%;
    margin: calc(24px * var(--minigame-ui-scale, 1)) auto 0;
    padding: calc(9px * var(--minigame-ui-scale, 1)) calc(20px * var(--minigame-ui-scale, 1));
    font-size: calc(0.9rem * var(--minigame-ui-scale, 1));
    font-weight: 600;
    background: rgba(176, 58, 58, 0.2);
    border-color: rgba(176, 58, 58, 0.5);
    color: #ffe9e9;
}

.minigame-result.passed .result-btn-continue:hover {
    background: rgba(58, 170, 84, 0.35);
    border-color: rgba(58, 170, 84, 0.8);
    box-shadow: 0 0 10px rgba(58, 170, 84, 0.3);
}

.minigame-result.passed .result-btn-restart:hover {
    background: rgba(176, 58, 58, 0.35);
    border-color: rgba(176, 58, 58, 0.8);
    box-shadow: 0 0 10px rgba(176, 58, 58, 0.3);
}

.minigame-result.failed .result-btn-continue {
    display: block;
    width: min(84vw, calc(420px * var(--minigame-ui-scale, 1)));
    max-width: 100%;
    margin: calc(12px * var(--minigame-ui-scale, 1)) auto 0;
    padding: calc(16px * var(--minigame-ui-scale, 1)) calc(44px * var(--minigame-ui-scale, 1));
    font-size: calc(1.22rem * var(--minigame-ui-scale, 1));
    font-weight: 700;
    background: rgba(58, 170, 84, 0.2);
    border-color: rgba(58, 170, 84, 0.5);
    color: #f3fff2;
}

.minigame-result.failed .result-btn-restart {
    display: block;
    width: min(58vw, calc(240px * var(--minigame-ui-scale, 1)));
    max-width: 100%;
    margin: calc(24px * var(--minigame-ui-scale, 1)) auto 0;
    padding: calc(9px * var(--minigame-ui-scale, 1)) calc(20px * var(--minigame-ui-scale, 1));
    font-size: calc(0.9rem * var(--minigame-ui-scale, 1));
    font-weight: 600;
    background: rgba(176, 58, 58, 0.2);
    border-color: rgba(176, 58, 58, 0.5);
    color: #ffe9e9;
}

.minigame-result.failed .result-btn-continue:hover {
    background: rgba(58, 170, 84, 0.35);
    border-color: rgba(58, 170, 84, 0.8);
    box-shadow: 0 0 10px rgba(58, 170, 84, 0.3);
}

.minigame-result.failed .result-btn-restart:hover {
    background: rgba(176, 58, 58, 0.35);
    border-color: rgba(176, 58, 58, 0.8);
    box-shadow: 0 0 10px rgba(176, 58, 58, 0.3);
}

/* Quiz-specific styles */
.minigame-quiz {
    position: absolute;
    /* background-color: rgba(0, 0, 0, 0.5);
    padding: 10px; */
    border-radius: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 650px;
    z-index: 910;
}

/* Landscape phones: fit the entire quiz on screen with no scrolling. Pin the
   panel between the top HUD and the bottom edge, vertically center the content,
   and compact every piece (smaller image/question, 2-column answers). */
@media (max-height: 600px) {
    .minigame-quiz {
        top: 58px;
        bottom: 8px;
        transform: translateX(-50%);
        width: 92%;
        max-width: 760px;
        max-height: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .minigame-quiz__progress {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    .minigame-quiz__image {
        margin-bottom: 6px;
    }

    .minigame-quiz__image img {
        max-height: 84px;
    }

    .minigame-quiz__question {
        font-size: 1.05rem;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .minigame-quiz__answers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 680px;
        width: 100%;
        margin-inline: auto;
    }

    .minigame-quiz__answers button {
        padding: 9px 14px;
        font-size: 0.9rem;
    }
}

.minigame-quiz__image {
    text-align: center;
    margin-bottom: 16px;
}

.minigame-quiz__image img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.minigame-quiz__question {
    color: #f0f0f0;
    font-size: 1.4rem;
    text-align: center;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 24px;
    line-height: 1.5;
}

.minigame-quiz__progress {
    color: #999;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 16px;
}

.minigame-quiz__answers {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    gap: 12px;
}

.minigame-quiz__answers button.correct-flash {
    background: rgba(60, 180, 60, 0.85) !important;
    border-color: rgba(100, 255, 100, 0.6) !important;
    color: #fff !important;
}

.minigame-quiz__answers button.wrong-flash {
    background: rgba(180, 40, 40, 0.85) !important;
    border-color: rgba(255, 80, 80, 0.6) !important;
    color: #fff !important;
}

.minigame-timer-bar {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    z-index: 910;
}

.minigame-timer-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #4a4, #6c6);
    border-radius: 4px;
    transition: width 0.1s linear;
}

.minigame-timer-bar__fill.warning {
    background: linear-gradient(90deg, #c44, #e66);
}

/* ===== SAVE SLOTS — MOBILE LAYOUT ===== */
@media (max-width: 600px) {
    .save-slot {
        flex-wrap: wrap;
        gap: 10px;
    }

    .save-slot-thumbnail {
        width: 100px;
        min-width: 100px;
        height: 60px;
    }

    .save-slot-buttons {
        flex-direction: row;
        width: 100%;
        flex-shrink: 1;
    }

    .save-slot-btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .save-slot-thumbnail {
        width: 80px;
        min-width: 80px;
        height: 50px;
    }

    .save-slot-title {
        font-size: 0.9rem;
    }

    .save-slot-scene,
    .save-slot-info {
        font-size: 0.72rem;
    }
}

/* ===== ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable looping background ken-burns / pulse / shake */
    .game__background[class*="bg-anim-"],
    .game__character,
    .game__image-display {
        animation: none !important;
    }
}

/* ===== TOUCH-FRIENDLY INTERACTIONS ===== */

/* Apply to all interactive elements: removes 300ms tap delay,
   removes blue tap-highlight box, prevents accidental text selection */
button,
.menu-load-slot,
.menu-scene-item,
.menu-char-card,
.save-slot,
.settings-toggle,
.settings-tab-btn,
.save-page-btn,
.save-slot-btn,
.menu-panel__close,
.settings-modal-close,
.backlog-close,
.main-menu__btn,
.player-name-modal__btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== ANDROID APP TWEAKS ===== */
/* Disable text selection everywhere on the Android build (dialogue, backlog,
   UI), but keep it enabled inside real text fields so the name input works. */
html.platform-android,
html.platform-android body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

html.platform-android input,
html.platform-android textarea,
html.platform-android [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* Keyboard shortcuts are irrelevant on touch — hide the help button. */
html.platform-android .help-btn {
    display: none !important;
}

/* Tactile press feedback for touch devices (replaces hover) */
@media (hover: none) {

    /* .game__continue.expanded {
        border: 0;
        background: none;
    } */

    button:active,
    .main-menu__btn:active,
    .menu-load-slot:active,
    .menu-scene-item:active,
    .save-slot:active,
    .save-slot-btn:active,
    .settings-tab-btn:active,
    .save-page-btn:active,
    .menu-panel__close:active,
    .settings-modal-close:active,
    .backlog-close:active {
        transform: scale(0.96);
        opacity: 0.85;
        transition: transform 0.08s ease, opacity 0.08s ease;
    }

    /* Disable hover transforms on touch — they stick after tap */
    button:hover,
    .main-menu__btn:hover {
        transform: none;
    }

    /* Disable hover-only quick-action reveal — show always at low opacity */
    .game__autoplay-btn,
    .game__skip-btn {
        opacity: 0.7;
    }
}

/* Minimum 44×44 px tap targets on touch screens (Apple HIG / WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {
    .game__nav-btn {
        width: 58px;
        min-width: 58px;
        min-height: 58px;
        padding: 0;
        font-size: 1.05rem;
        border-width: 2px;
        margin-inline: 2px;
    }

    .game__autoplay-btn,
    .game__skip-btn {
        min-height: 52px;
        height: 52px;
    }

    .game__autoplay-btn.visible,
    .game__skip-btn.visible {
        min-width: 52px;
        width: 52px;
    }

    .settings-btn,
    .backlog-btn,
    .help-btn,
    .menu-panel__close,
    .settings-modal-close,
    .backlog-close,
    .save-slot-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .save-page-btn {
        min-width: 40px;
        min-height: 40px;
    }

    .settings-tab-btn {
        min-height: 44px;
    }

    .settings-toggle {
        width: 52px;
        height: 30px;
    }

    .settings-toggle::after {
        width: 22px;
        height: 22px;
        top: 4px;
        left: 4px;
    }

    .settings-toggle.active::after {
        transform: translateX(22px);
    }

    /* Larger slider thumb for fingertip */
    .settings-slider {
        height: 8px;
    }

    .settings-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .settings-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}