/* Add containment to the fast-updating text inputs */
#moneypers input {
    contain: layout paint;
}

.tab-content {
    display: none;
}

/* Basic styling for the page layout */
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* Main content wrapper adjusted */
        .game-wrapper {
            display: flex;
            width: 100%;
            height: 100%;
        }
        .save-controls {
            padding: 10px;
            position: fixed; 
            bottom: 0; 
            width: 100%; 
            display: flex; 
            justify-content: center; 
            gap: 10px; 
            padding: 10px; 
            background-color: #f0f0f0; 
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .save-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 12px;
        }
        .load-button {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 12px;
        }
        .delete-button {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 12px;
        }
        /* Left side with burger button */
        .game-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: fit-content;
            overflow-y: auto; /* Enable scrolling within this section */
            padding: 20px;
        }

        /* Right side with controls */
        .game-right {
            width: 300px;
            padding-left: 20px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 4px;
            /* Space for the save button */
       
        }

        /* Money display section */
        #moneypers {
            margin-bottom: 20px;
            width: auto;  /* Allow natural width */
        }

        #moneypers input {
            display: block;
            margin-bottom: 8px;
            padding: 8px 12px;
            width: 200px;  /* Fixed width for text boxes */
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: white;
            font-size: 14px;
        }

        /* Sections styling */
        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
.purchase-options {
  display: flex;
  flex-wrap: wrap;     /* ← allow wrapping */
  gap: 10px;
  margin-bottom: 10px;
  /* optional, to keep them left‑aligned: */
  justify-content: flex-start;
}

        /* Container and upgrade sections */
        #container,
        #upgrade, #rebirth {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Add spacing between buttons */
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 600px;
    overflow-y: auto;

        }
        #container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;     /* ↓ smaller spacing between upgrade buttons */
  padding: 5x; /* ↓ less inner padding around the whole section */
}

#container button {
  padding: 6px 10px; /* ↓ tighten button padding if you want smaller buttons */
  font-size: 14px;   /* optional, slightly smaller text */
}
        #container {
  flex: 1 1 auto;         /* fill all vertical space in .game-right */
  max-height: none;       /* remove your old max-height */
  overflow-y: auto;       /* scroll if its content is too tall */
}

        .upgrade {
    min-height: fit-content;
    max-height: 250px; 
    
}
  #upgrade, #rebirth {
    flex: 0 0 auto;    /* don’t shrink or grow—just size to content height */
  overflow: visible; /* disable any scrollbar */
max-height: none;

    display: flex;
    flex-direction: column;
    gap: 0.3px;               /* small vertical gap */
    padding: 20px;
  }
  #upgrade .tooltip-container {
    margin: 0;
  }
  #upgrade .tooltip-container.burger-upgrade {
    order: 100;
  }
  #container {
 flex: 1 1 auto;  /* take up all leftover vertical space */
  min-height: 0;   /* super-important so flexbox allows it to shrink */
  overflow-y: auto;
}
.rebirth-upgrades-grid .tooltip-container {
    width: 100%;
}
        /* Center the main burger button */
        #button {
            display: flex;
            justify-content: center;
            align-items: center;
            
        }

        /* Default button styling */
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 12px;
            width: 100%;
            transition: background-color 0.3s ease;

        }

        /* Style for disabled buttons */
        button:disabled {
            background-color: #dddddd;
            color: #666666;
        }

        /* Main burger button styling */
        .image-button {
            z-index: 1;
            width: 100%;
            max-width: 500px;
            min-width: 300px;
            height: 100%;
            max-height: 500px;
            min-height: 300px;
            background-color: transparent;
            background-image: url('Burger-images/Burger.webp');
            background-size: cover;
            border: none;
            cursor: pointer;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 9px #999;
            transition: max-width 0.3s, max-height 0.3s, width 0.3s, height 0.3s;
        }

        /* Animation for burger button click */
.image-button.fake-active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

/* For context, it should go near your existing :active rule */
.image-button:active {
    background-color: transparent;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
.tooltip-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* FIX: Base buttons need a low z-index */
}
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    overflow: hidden;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 28px;
}

.slider.round:before {
    border-radius: 50%;
}
        .tooltip-container button {
            width: 100%;
        }

.tooltip-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* FIX: Base buttons need a low z-index */
}

.tooltip-container:hover {
    z-index: 100000; /* FIX: Hovering now actually brings it to the front! */
}

.tooltip {
    visibility: hidden;
    position: fixed;
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 999999999;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
}

/* Tooltip is on the RIGHT side of the button (Arrow points LEFT) */
.tooltip.right-side::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
}

/* Tooltip is on the LEFT side of the button (Arrow points RIGHT) */
.tooltip.left-side::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}
        .franchise-section {
            z-index: 90;
           width: 100%;
            max-width: 100%;
           
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow-y: auto; /* Enable scrolling within this section */
          
        }

        .franchise-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .franchise-button {
            background-color: #4CAF50;
            color: white;
            padding: 15px 30px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 20px 0;
            transition: background-color 0.3s;
        }

        .franchise-button:hover {
            background-color: #45a049;
        }

        .franchise-button:disabled {
            background-color: #dddddd;
            cursor: default;
        }

        .restaurant-container {
            display: flex;
            gap: 40px;
            justify-content: center;
            flex-wrap: wrap;
            padding: 20px 0;
        }

        .restaurant {
            position: relative;
            width: 300px;
        }

        .restaurant-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .purchase-options button {
            width: auto;
            flex: 1;
            flex-wrap: wrap;
        }
        .restaurant-label {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
        }

        .new-franchise {
            display: none;
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .tabs {
            display: flex;
            gap: 2px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            padding: 5px;
            border-radius: 8px;
            justify-content: flex-start;
        }

        .tab-button {
            flex: 1;
            padding: 12px 24px;
            background-color: #e0e0e0;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            color: #666;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
        }

        .tab-button.active {
            background-color: #4CAF50;
            color: white;
        }

        .tab-content {
            display: none;
        }

        /* Display the active tab */
        .tab-content.active {
            display: block;
        }

        /* Highlight tab in red if an achievement is unlocked or an upgrade can be purchased */
        .tab-button.highlight {
            background-color: red;
            color: white;
        }

        /* Features Tab */
        .buttons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .feature-button {
            padding: 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            width: 100%;
        }

        .feature-button:hover {
            background-color: #45a049;
        }

        .feature-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
/* Dark mode base */

html.dark-mode {
  background-color: #110f0f; /* Prevents the unstyled flash */
  color: #f0f0f0;
}

.dark-mode {
  background-color: rgba(17, 15, 15, 0.808);
  color: #f0f0f0;
}

/* Body in dark mode */
.dark-mode body {
  background-color: rgba(17, 15, 15, 0.808);
  color: #f0f0f0;
}

/* Franchise section in dark mode */
.dark-mode .franchise-section {
  background-color: #222;
  color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
}

/* Upgrade section in dark mode */
.dark-mode #upgrade {
  background-color: #222;
  color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}
.dark-mode #rebirth {
  background-color: #222;
  color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

/* Employee section in dark mode */
.dark-mode #container {
  background-color: #222;
  color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

/* Money per second section in dark mode */
.dark-mode #moneypers {
  background-color: #222;
  color: #f0f0f0;
  border: 1px solid #444;
}

/* Input fields inside moneypers */
.dark-mode #moneypers input {
  background-color: #333;
  color: #f0f0f0;
  border: 1px solid #555;
}

/* Buttons in dark mode */
.dark-mode button {
  background-color: #555;
  color: white;
}

.dark-mode button:hover {
  background-color: #666;
}

        /* Achievements Tab */
        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding-bottom: 80px; /* Add extra padding at bottom to prevent overlap */
    margin-bottom: 60px; /* Add margin to ensure content doesn't get cut off */
   /* Adjust height to account for save controls */

        } 
.hidden {
  display:none;
}
        .achievement {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: transform 0.2s;
        }

        .achievement:hover {
            transform: translateY(-2px);
        }

        .achievement-icon {
            width: 40px;
            height: 40px;
            background-color: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

        .achievement-info {
            flex-grow: 1;
        }

        .achievement-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .achievement-description {
            font-size: 14px;
            color: #666;
        }

        .achievement.locked {
            opacity: 0.7;
            background-color: #eaeaea;
        }

        .achievement.locked .achievement-icon {
            background-color: #999;
        }

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

        /* Hide elements completely when not displayed */
        .tooltip-container button[style*="display: none"] {
            display: none !important;
        }

        .purchase-options {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
        }
        .slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.6);
    z-index: 2147483647;
}
.overlay.visible { display: flex; }

.overlay-panel {
    width: min(900px, 90%);
    max-height: 80%;
    background: #fff;
    color: #000;
    padding: 12px;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
}

.overlay-title {
    font-weight: 600;
    font-size: 14px;
}

#exportOverlay textarea,
#importOverlay textarea {
    width: 100%;
    height: 260px;
    resize: vertical;
    font-family: monospace;
    font-size: 12px;
    padding: 8px;
    box-sizing: border-box;
}

.overlay .btn-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* Dark mode for overlay */
/* Dark mode for overlay */
.dark-mode .overlay-panel {
    background: #222;
    color: #f0f0f0;
}

/* Make export/import textarea follow dark mode */
.dark-mode #exportOverlay textarea,
.dark-mode #importOverlay textarea {
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #444;
}
.dark-mode .achievements-grid {
    background-color: #151515;
    box-shadow: 0 2px 6px rgba(255,255,255,0.03);
}

.dark-mode .achievement {
    background-color: #1f1f1f;
    color: #e8e8e8;
    box-shadow: none;
    opacity: 1;
}

.dark-mode .achievement.locked {
    background-color: #191919;
    opacity: 0.92;
}

.dark-mode .achievement-icon {
    background-color: #444;
    color: #fff;
}

.dark-mode .achievement-title {
    color: #fff;
}

.dark-mode .achievement-description {
    color: #cfcfcf;
}

#settingsTab button {
    max-width: fit-content;
}
.dark-mode .buttons-grid {
  background-color: #1b1b1b;
  color: #eaeaea;
  box-shadow: 0 2px 6px rgba(255,255,255,0.03);
}

.dark-mode .buttons-grid .feature-button {
  background-color: #333;
  color: #f0f0f0;
  border: 1px solid #444;
}

.dark-mode .buttons-grid .feature-button:hover {
  background-color: #444;
}

/* Inputs showing ice counts/rates */
.dark-mode #ice,
.dark-mode #icepers {
  background-color: #2b2b2b;
  color: #eaeaea;
  border: 1px solid #444;
}

/* Tooltips inside the buttons-grid already dark, ensure arrow matches */
.dark-mode .buttons-grid .tooltip {
  background-color: #333;
  color: #fff;
}

.dark-mode .buttons-grid .tooltip::before {
  border-color: transparent transparent transparent #333;
}

/* Keep subtle contrast for disabled/hidden feature buttons */
.dark-mode .buttons-grid .feature-button:disabled {
  background-color: #222;
  color: #777;
  border-color: #333;
}
.dark-mode .buttons-grid {
  background-color: #1b1b1b;
  color: #eaeaea;
  box-shadow: 0 2px 6px rgba(255,255,255,0.03);
}

.dark-mode .buttons-grid .feature-button {
  background-color: #333;
  color: #f0f0f0;
  border: 1px solid #444;
}

.dark-mode .buttons-grid .feature-button:hover {
  background-color: #444;
}

/* Inputs showing ice counts/rates */
.dark-mode #ice,
.dark-mode #icepers {
  background-color: #2b2b2b;
  color: #eaeaea;
  border: 1px solid #444;
}

/* Tooltips inside the buttons-grid already dark, ensure arrow matches */
.dark-mode .buttons-grid .tooltip {
  background-color: #333;
  color: #fff;
}

.dark-mode .buttons-grid .tooltip::before {
  border-color: transparent transparent transparent #333;
}

/* Keep subtle contrast for disabled/hidden feature buttons */
.dark-mode .buttons-grid .feature-button:disabled {
  background-color: #222;
  color: #777;
  border-color: #333;
}
.dark-mode .tabs {
  background-color: #121212;
  border: 1px solid #232323;
}

.dark-mode .tab-button {
  background-color: #171717;
  color: #dcdcdc;
  border: 1px solid #262626;
}

.dark-mode .tab-button:hover {
  background-color: #262626;
}

.dark-mode .tab-button.active {
  background-color: #3f8e46; /* keep green active accent */
  color: #fff;
}

/* Dark-mode highlight uses a darker orange/tan */
.dark-mode .tab-button.highlight {
  background-color: #c66a2b; /* darker orange for dark-mode */
  color: #fff;
}
.rebirth-upgrades-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.rebirth-upgrade-button {
    background-color: #555;
    color: white;
}

.rebirth-upgrade-button:hover {
    background-color: #777;
}

.dark-mode .rebirth-upgrade-button {
    background-color: #444;
}

.dark-mode .rebirth-upgrade-button:hover {
    background-color: #666;
}

.can-afford {
    background-color: #4CAF50 !important; /* Green */
    color: white !important;
    cursor: pointer;
    opacity: 1;
}

.cannot-afford {
    background-color: #e0e0e0 !important; /* Light Gray */
    color: #888 !important;
    /* cursor: not-allowed; */
    opacity: 0.8;
}

/* DARK MODE COLORS */
/* This makes unaffordable buttons a sleek dark grey/red instead of bright white */
.dark-mode .cannot-afford {
    background-color: #2c2c2c !important; /* Dark Slate Gray */
    color: #666 !important; /* Dimmed Text */
    border: 1px solid #444; /* Subtle Border */
}

/* Optional: Make affordable buttons slightly less neon in dark mode */
.dark-mode .can-afford {
    background-color: #388E3C !important; /* Slightly darker Green */
    color: white !important;
    border: 1px solid #2e7d32;
}
#rebirth_points {
    background-color: white;
    color: #333;
    border: 1px solid #ccc;
}

/* Style for the Rebirth Points text box in Dark Mode */
.dark-mode #rebirth_points {
    background-color: #2b2b2b; /* Matches your other dark inputs */
    color: #eaeaea;            /* Light text */
    border: 1px solid #444;    /* Subtle border */
}

/* Ensure the Rebirth Button generally follows the button shape */
#rebirth_button {
    width: 100%;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    transition: background-color 0.3s ease;
}
.credits-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    text-align: center;
}

.credits-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    border-bottom: 2px solid #4CAF50; /* Matches your green theme */
    display: inline-block;
    padding-bottom: 5px;
}

.credit-group {
    margin-bottom: 15px;
}

.credits-section p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.credits-section strong {
    color: #333;
    font-weight: 700;
}

.version-number {
    margin-top: 20px !important;
    font-size: 12px !important;
    color: #999 !important;
    font-style: italic;
}

/* --- DARK MODE CREDITS --- */
.dark-mode .credits-section {
    background-color: #1f1f1f;
    border: 1px solid #333;
}

.dark-mode .credits-section h3 {
    color: #fff;
}

.dark-mode .credits-section p {
    color: #aaa;
}

.dark-mode .credits-section strong {
    color: #eee;
}

.dark-mode .version-number {
    color: #666 !important;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}