html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#fullScreenCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
}
#toolbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 11;
}

#menu {
    position: absolute;
    top: 1vh;
    left: 1vw;
    padding: 1vh;
    z-index: 10;
}

.menulist {
    z-index: 4;
    position: absolute;
    top: 8vh; 
    left: 1vh; 
    background: rgba(35,139,102,1);
    padding: 10px;
    color: white;
    width: 20vh;
    font-size: 3vh;
}

.menulist ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menulist li {
    border: 1px solid #ffffff78;
    padding: 5px;
    margin-bottom: 1vh;
}

.menulist li:hover {
    font-weight: bold;
    cursor: pointer;
}

.menulist a {
    color: inherit;
    text-decoration: none;
    font-weight: normal;
    display: block;
    width: 100%;
}
.menulist a:hover {
    font-weight: bold !important;
    cursor: pointer;
}
.menulist a {
    font-weight: normal !important;
}

.menuicon {
    width: 5vh;
    height: 5vh;
    border: 1px solid #00000088;
    background: rgba(35,139,102,1);
    float: left;
    margin-right: 0.5vh;
    cursor: pointer;
}

.menuicon:hover {
    background: #58ABA7;
}

.button {
    position: relative;
    width: 6vh;
    height: 6vh;
    background: rgba(42,187,142,1);
    border: 1px solid black;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    text-align: center;
    color: black;
    cursor: pointer;
}

.button.enabled {
    background: rgba(35,139,102,1);
}

.button.toggled {
    background: #58A7AB;
}

.button.hidden {
        display: none;
}

/* Show content for enabled buttons */
.button.enabled .icon, .button.enabled .label {
    display: block;
}

.icon {
    position: absolute;
    width: 5vh;
    height: 5vh;
}

.label {
    color: white;
    position: absolute;
    bottom: 3px;
    font-size: 1.5vh;
}

.view {
    position: absolute;
    background-color: #52AE8C;
    width: 80vw;
    height: 50vh;
    border: 1vh solid #467761;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.viewContent {
    width: 100%;
    color: white;
    font-size: 2vh;
    padding: 1vh;
    box-sizing: border-box;
    /* allow the interior to scroll if content is taller than the overlay */
    max-height: 100%;
}

.flashing {
    animation: flash 0.5s alternate infinite;
}

@keyframes flash {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.optionsView {
    position: absolute;
    background-color: #52AE8C;
    width: 36vh;
    height: 20vh;
    border: 1vh solid #467761;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.techTreeView {
    overflow: hidden;
    position: absolute;
    background-color: #52AE8C;
    width: 36vh;
    height: 29vh;
    border: 1vh solid #467761;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fullView {
    position: absolute;
    background-color: #52AE8C;
    width: 36vh;
    height: 80vh;
    border: 1vh solid #467761;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tutorialView {
    position: absolute;
    background-color: #52AE8C;
    width: 34vh;
    /* use a max-height so the overlay never exceeds the viewport */
    height: 73vh;
    max-height: 73vh;
    max-width: 95vw;
    border: 1vh solid #467761;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.techTreeUpgradeButton {
    border: 1px solid black;
    background-color: #336633;
    cursor: pointer;
    width: 33.6vh;
    text-align: center;
    margin-bottom: 1vh;
    padding: 1vh 0;
    height: 6vh;
}

.techTreeUpgradeCost {
    width: 32vh;
    text-align: center;
    margin-bottom: 1vh;
    padding-left: 1vh;
    padding-right: 1vh;
}

/* When shown at the top center (always visible) */
.techTreeUpgradeCost.topCenter {
    position: fixed;
    top: 1vh;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* allow content to size naturally */
    max-width: 60vw;
    z-index: 10001; /* above menu but below full-screen overlays */
    display: flex;
    gap: 0.6vh;
    align-items: center;
}

.techTreeUpgradeButton:hover { background-color: #003300; }
.techTreeUpgradeButtonHeadline { font-weight: bold; color: lightgreen; }

.techTreeCostRow { display: flex; align-items: center; }

.techTreeCostItem {
    position: relative;
    min-width: 8vh;
    overflow: hidden;
    background: rgba(0,0,0,0.15);
    padding: 0.4vh 0.8vh;
    border-radius: 0.6vh;
}

.techTreeCostProgress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,0.2);
    z-index: 1;
    transition: width 200ms linear;
}

.techTreeCostLabel {
    position: relative;
    z-index: 2;
    font-weight: bold;
    font-size: 2.2vh;
    text-shadow: 0.12vh 0.12vh 0.18vh rgba(0,0,0,0.85);
}

.gallery {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  box-sizing: border-box;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
  scroll-behavior: smooth;
}

.gallery-cell {
   position: relative;
   flex: 0 0 80%;
   min-width: 32vh;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   scroll-snap-align: center;
   scroll-snap-stop: always;
   overscroll-behavior-x: contain;
   box-sizing: border-box;
}

.gallery::-webkit-scrollbar { display: none; }

/* When an overlay is open, block pointer events on underlying layers */
.overlay-open #canvasGrid,
.overlay-open #canvasConveyers,
.overlay-open #canvasComponents,
.overlay-open #toolbar,
.overlay-open #menu,
.overlay-open .menuicon,
.overlay-open .button { pointer-events: none; }

.tutorialText {
    text-align: center;
    padding: 0.5vh;
    font-size: 2.4vh;
    color: white;
    bottom: 0px;
    width: 100%;
    z-index: 100000;
}

canvas { position: absolute; top: 0; left: 0; background-color: transparent; }
#canvasGrid { z-index: 1; }
#canvasConveyers { z-index: 2; }
#canvasComponents { z-index: 3; }

html, body, * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

/* tutorial gallery pan arrows */
.tutorial-arrow {
    position: absolute;
    top: 30vh;
    width: 3vh;
    height: 3vh;
    border-radius: 2vh;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: none;
    font-size: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.tutorial-arrow.left { left: 1vw; }
.tutorial-arrow.right { right: 1vw; }
@media (max-width: 420px) { .tutorial-arrow { display: none; } }

.image-container { position: relative; display: inline-block; }
.image-container img { display: block; width: 32vh; }

.overlay {
    position: absolute;
    top: 0; left: 0;
    background: rgba(255, 255, 255, 0.6);
    color: white;
    border-radius: 2vh;
    z-index: 10;
    pointer-events: none;
    width: 4vh; height: 4vh;
}

/* Options toggle styles */
.options-row { display: flex; justify-content: flex-start; align-items: center; gap: 1.5vh; padding: 1vh 0; }
.options-label { font-size: 2.2vh; }
.switch { position: relative; display: inline-block; width: 5vh; height: 2.8vh; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #467761; transition: .2s; border-radius: 2vh; }
.slider:before { position: absolute; content: ""; height: 2.2vh; width: 2.2vh; left: 0.3vh; bottom: 0.3vh; background-color: white; transition: .2s; border-radius: 50%; }
input:checked + .slider { background-color: #333333; }
input:checked + .slider:before { transform: translateX(2.2vh); }
.slider.round { border-radius: 2vh; }
.slider.round:before { border-radius: 50%; }

.hidden { display: none; }

.tutorialText { text-align: center; }

.techTreeCostItem {
    position: relative;
    min-width: 8vh;
    overflow: hidden;
    background: rgba(0,0,0,0.15);
}

.techTreeCostProgress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,0.2);
    z-index: 1;
    transition: width 200ms linear;
}

.techTreeCostLabel {
    position: relative;
    z-index: 2;
    font-weight: bold;
    font-size: 2.5vh;
    /* Single drop shadow for readability: subtle offset and small blur */
    text-shadow: 0.12vh 0.12vh 0.18vh rgba(0,0,0,0.85);
}
 
 .gallery {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   gap: 1rem;
   overflow-x: auto;
   overflow-y: hidden;               /* prevent vertical scroll while swiping horizontally */
   -webkit-overflow-scrolling: touch; /* smooth swipe on iOS */
   scroll-snap-type: x mandatory;     /* snap while scrolling */
   box-sizing: border-box;
   /* allow horizontal touch/pointer gestures to scroll this element */
   touch-action: pan-x;
   -ms-touch-action: pan-x;
   /* smooth programmatic scrolling for prev/next buttons and keyboard */
   scroll-behavior: smooth;
 }
 
 .gallery-cell {
    position: relative; /* added so absolute children are positioned relative to the cell */
    flex: 0 0 80%;            /* keep each cell at ~80% of container width */
    min-width: 32vh;
    height: 100%;             /* adjust to taste - reduced on small screens via media query */
    display: flex;
    flex-direction: column;   /* stack tutorial animation above text */
    justify-content: space-between; /* push text to bottom */
    align-items: center;
    scroll-snap-align: center; /* snap target */
    scroll-snap-stop: always;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
 }
 
 /* Optional: hide scroll bar on Webkit browsers */
 .gallery::-webkit-scrollbar {
     display: none;
 }
 
 /* When an overlay (tutorial, tech tree, stats) is open we want mouse/touch gestures
   to reach the overlay (gallery) instead of canvas/tool handlers. Disable pointer
   events on interactive game layers while overlay is shown. */
.overlay-open #canvasGrid,
.overlay-open #canvasConveyers,
.overlay-open #canvasComponents,
.overlay-open #toolbar,
.overlay-open #menu,
.overlay-open .menuicon,
.overlay-open .button {
    pointer-events: none;
}
/* Allow the overlay itself to receive pointer events (default) */

.tutorialText {
    text-align: center;
    padding: 0.5vh;
    font-size: 2.4vh;
    color: white;
    bottom: 0px;
    width: 100%;
    z-index: 100000;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}
#canvasGrid {
    z-index: 1;
}
#canvasConveyers {
    z-index: 2;
}
#canvasComponents {
    z-index: 3;
}
html, body, * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

/* tutorial gallery pan arrows */
.tutorial-arrow {
    position: absolute;
    top: 30vh; /* place arrows near the bottom of the tutorial overlay */
    transform: translateY(0);
    width: 3vh;
    height: 3vh;
    border-radius: 2vh;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: none;
    font-size: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.tutorial-arrow.left {
    left: 1vw;
}
.tutorial-arrow.right {
    right: 1vw;
}
/* hide arrows on very small screens to avoid overlay issues */
@media (max-width: 420px) {
    .tutorial-arrow { display: none; }
}

.image-container {
  position: relative; /* Creates a positioning context */
  display: inline-block; /* Keeps container sized to image */
}

.image-container img {
  display: block; /* Removes small gap below images */
  width: 32vh;
}

.overlay {
    position: absolute; /* Position relative to the container */
    top: 0;             /* Top edge of image */
    left: 0;            /* Left edge of image */
    background: rgba(255, 255, 255, 0.6); /* Optional: semi-transparent background */
    color: white;       /* Text color */
    border-radius: 2vh; /* Optional style */
    z-index: 10;        /* appear above the image */
    pointer-events: none; /* allow clicks to pass through the overlay to gallery scrolling if needed */
    width: 4vh;
    height: 4vh;
}

/* Options toggle styles (iPhone-style) */
.options-row {
    display: flex;
    justify-content: flex-start; /* place switch to the left of the label */
    align-items: center;
    gap: 1.5vh;
    padding: 1vh 0;
}
.options-label {
    font-size: 2.2vh;
}
.switch {
    position: relative;
    display: inline-block;
    width: 5vh;
    height: 2.8vh;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #467761;
    transition: .2s;
    border-radius: 2vh;
}
.slider:before {
    position: absolute;
    content: "";
    height: 2.2vh;
    width: 2.2vh;
    left: 0.3vh;
    bottom: 0.3vh;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #333333;
}
input:checked + .slider:before {
    transform: translateX(2.2vh);
}

/* Rounded sliders */
.slider.round {
    border-radius: 2vh;
}
.slider.round:before {
    border-radius: 50%;
}

.hidden {
  display: none;
}