#start-screen, #game-over-screen {
    position: fixed; /* was relative — make menu a full-screen overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Keep an opaque base so underlying canvas/UI never shows through while images crossfade */
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200; /* raised so it sits above UI (orb-progress, pause, inventory) */
    color: white;
    text-align: left; /* Change text align */
    padding-left: 10vw; /* Add some padding */
    /* removed previous single-rule background-image layering — now handled via pseudo-elements for crossfade */
}

/* Layered crossfade backgrounds using pseudo-elements */
#start-screen::before,
#start-screen::after,
#start-screen {
    /* ensure background tiles align and cover area nicely */
    background-repeat: repeat-x;
    background-size: auto 110%;
    background-position: center center;
}

/* base layer (image 1) assigned to the element itself for compatibility */
#start-screen {
    /* element provides solid opaque backdrop; image layers live in pseudo-elements above this background */
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 300; /* ensure main menu is absolutely on top */
    /* keep an opaque background color — move static menu image to ::after to avoid being affected by opacity animations */
    background-image: none;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 1;
    /* element-level opacity animation removed so children (buttons/UI) don't fade */
}

/* ensure start screen content (buttons / title) stays above animated pseudo-backgrounds */
#start-screen > * {
    position: relative;
    z-index: 10;
}

/* middle layer (image 2) */
#start-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("seemless menu scroller 2.jpg");
    background-repeat: repeat-x;
    background-size: auto 110%;
    background-position: 350% 50%;
    opacity: 0;
    animation: bg-pan 50s linear infinite, bg-opacity-2 50s linear infinite;
}

/* top layer (image 3) */
#start-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Use ::after as the fixed-on-top static screen image so UI remains above animated tiles,
       and keep its own pan for tiling but DO NOT animate its opacity (stays fully visible). */
    background-image: url("seemless menu scroller screen.png");
    background-repeat: repeat-x;
    background-size: auto 110%;
    background-position: 250% 50%;
    opacity: 1;
    animation: bg-pan 50s linear infinite; /* only pan; opacity controlled by the two moving layers (::before + element if needed) */
}

/* unified pan animation: move all layers from right to left together */
@keyframes bg-pan {
  0%   { background-position: 200% 50%; }
  100% { background-position: -100% 50%; }
}

/* Opacity cycles staggered so one image fades in to 100% while another stays at 100% until handoff.
   Timings ensure at least one layer is fully opaque at all times during the 50s loop. */

/* image 1 (element background) opacity timeline */
@keyframes bg-opacity-1 {
  0%   { opacity: 1; }
  15%  { opacity: 1; }
  33%  { opacity: 0; }
  66%  { opacity: 0; }
  84%  { opacity: 1; }
  100% { opacity: 1; }
}

/* image 2 (::before) opacity timeline - centered in middle of cycle */
@keyframes bg-opacity-2 {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  50%  { opacity: 1; }
  67%  { opacity: 0; }
  100% { opacity: 0; }
}

/* image 3 (::after) opacity timeline - late in cycle */
@keyframes bg-opacity-3 {
  0%   { opacity: 0; }
  49%  { opacity: 0; }
  67%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* apply opacity animation to base element as well */
#start-screen::before, #start-screen::after { will-change: background-position, opacity; }

/* Create a dedicated pseudo-layer for the first image so we can animate all three together without affecting element opacity.
   Use an inner absolutely-positioned layer (via an extra pseudo stacked under ::before/::after) by repurposing a CSS variable trick:
   we reassign the element's background-image via a data attribute if available; fallback: create a lightweight overlay div in fragment loader if needed.
   For simplicity ensure base element stays opaque; to preserve original image1 behavior, also create a small helper style using mask via a child element if needed. */

.main-title {
    /* remove absolute positioning so title participates in normal flow and scales cleanly */
    position: static;
    transform: none;
    top: auto;
    left: auto;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    margin: 8vh 0 4vh;
    text-align: center;
}

.start-container {
    /* container for buttons */
}

.start-container h1, .game-over-container h1 {
    font-size: 4em;
    color: #00ffcc;
    margin-bottom: 20px;
    text-shadow: 0 0 15px #00ffcc;
}

#start-game-button {
    display: block; /* Make it a block element */
    padding: 15px 40px;
    font-size: 36px; /* Larger font size */
    background-color: transparent;
    color: #00ffcc;
    border: 3px solid #00ffcc;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 25px; /* Space below */
    text-align: center;
}

#start-game-button:hover {
    background-color: #00ffcc;
    color: #1a1a1a;
    box-shadow: 0 0 20px #00ffcc;
}

#codex-button, #guide-button, #controls-button, #admin-access-button, #settings-button, #bestiary-button {
    display: block; /* Make them block elements */
    padding: 10px 25px;
    font-size: 18px;
    background-color: transparent;
    color: #00b38f;
    border: 2px solid #00b38f;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%; /* Make them fill container width */
    text-align: center;
}

#codex-button:hover, #guide-button:hover, #controls-button:hover, #admin-access-button:hover, #settings-button:hover, #bestiary-button:hover {
    background-color: #00b38f;
    color: #1a1a1a;
    box-shadow: 0 0 15px #00b38f;
}

.start-buttons {
    /* switch to a centered column layout that adapts to vertical space */
    position: static;
    left: auto;
    top: auto;
    transform: none;
    transform-origin: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: min(80%, 360px);
    margin: 0 auto 8vh;
}

/* Make buttons' outlines invisible until hover */
#start-game-button,
#codex-button, #controls-button, #admin-access-button, #settings-button {
    border-color: transparent;
    box-shadow: none;
}

#start-game-button:hover,
#codex-button:hover, #controls-button:hover, #admin-access-button:hover, #settings-button:hover {
    border-color: currentColor;
    box-shadow: 0 0 15px currentColor;
}

/* New: visual for selected start button (gamepad focus) */
.start-buttons button.selected {
    background-color: #00ffcc;
    color: #1a1a1a;
    border-color: #00ffcc;
    box-shadow: 0 0 18px #00ffcc;
}

/* When the codex overlay is open, hide the main menu buttons and make them non-interactive.
   ui_start also disables pointer-events on the start-screen, but this CSS ensures no visual flicker. */
.codex-open #start-screen .start-buttons {
    display: none !important;
    pointer-events: none !important;
}

.codex-open #start-screen .main-title {
    display: none !important;
}

/* When settings overlay is open, keep start-screen visible but hide title/buttons so only background remains */
.settings-open #start-screen {
    /* ensure the start-screen stays visible underneath the settings overlay */
    pointer-events: none; /* prevent accidental interaction while settings open */
    opacity: 1;
}

/* Hide main title and primary buttons when settings overlay is active */
.settings-open #start-screen .main-title,
.settings-open #start-screen .start-buttons,
.settings-open #start-screen .start-container h1,
.settings-open #start-screen .start-buttons button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep any auxiliary start-screen visuals (background pseudo-elements) visible */
.settings-open #start-screen::before,
.settings-open #start-screen::after {
    opacity: 1 !important;
}

/* Ensure buttons scale and the menu doesn't overflow on tall narrow screens */
#start-screen, #game-over-screen {
    padding: 6vh 5vw;
    box-sizing: border-box;
}

@media (max-aspect-ratio: 9/16), (max-width: 420px) {
    .main-title { font-size: clamp(1.6rem, 6.5vw, 2.6rem); margin-top: 6vh; }
    .start-buttons { gap: 10px; width: 90%; margin-bottom: 6vh; }
    #start-game-button { font-size: 2rem; padding: 12px 28px; }
    #codex-button, #controls-button, #admin-access-button, #settings-button { font-size: 16px; padding: 10px 18px; }
}