@charset "utf-8";
/* --- General Body and Font --- */
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; }
body {display: flex;flex-direction: column;align-items: center;padding: 0;box-sizing: border-box;min-height: 100vh;background-color: #000;color: #00ff00;padding: 1em;/* font-size: 12px; */}

/* ADDED: Touch optimization */
html {
    touch-action: manipulation; /* Optimizes touch actions */
}

/* This ensures no selection is possible during gameplay */
#gameCanvas, #specialWeaponsUI, #controlsContainer {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Additional mobile optimization */
* {
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
    box-sizing: border-box;
}

.pwa-install-instructions {
  display: none; /* Hidden by default */
  position: fixed; /* Or absolute/relative depending on placement */
  bottom: 10px; /* Example positioning */
  left: 10px;
  right: 10px;
  max-width: 400px; /* Adjust width */
  margin: 0 auto; /* Center if using fixed/absolute */
  padding: 15px;
  background-color: rgba(50, 50, 50, 0.9); /* Dark background */
  color: #ffffff; /* White text */
  border: 1px solid #888888;
  border-radius: 8px;
  z-index: 1000; /* Make sure it's on top */
  font-size: clamp(11px, 2.5vw, 14px); /* Responsive font size */
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.pwa-install-instructions p {
  margin: 0 0 10px 0;
  font-weight: bold;
  color: #ffff00; /* Yellow heading text */
}

.pwa-install-instructions ol {
  list-style-position: inside;
  text-align: left;
  padding: 0 10px;
  margin: 0 0 15px 0;
}

.pwa-install-instructions li {
  margin-bottom: 8px;
}

/* Style for the optional dismiss button */
.pwa-install-instructions button {
  font-family: 'Press Start 2P', cursive; /* Match your game's font */
  background-color: #444;
  color: #cccccc;
  border: 1px solid #aaaaaa;
  padding: 5px 10px;
  font-size: clamp(10px, 2.2vw, 12px);
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.pwa-install-instructions button:hover {
    background-color: #555;
    color: #ffffff;
}

/* Use display-mode media query to show ONLY when running in a browser tab */
@media all and (display-mode: browser) {
  .pwa-install-instructions.show-instructions { /* Target only when JS adds 'show-instructions' class */
    display: block;
  }
}

/* Optional: Hide the regular install button on iOS since it won't work */
.ios-device #installPwaButton { /* If you add 'ios-device' class via JS */
    display: none !important;
}

/* --- Game Title --- */
h1#mainTitle {color: #ff0000;font-size: clamp(36px, 5vw, 48px);text-shadow: 2px 2px #ffff00;text-align: center;}

/* --- Game Canvas Container --- */
#canvasContainer {position: relative;width: 100%;max-width: 800px;aspect-ratio: 800 / 600;margin: 0 1em 1em;}

/* --- Game Canvas --- */
#gameCanvas {display: none;background-color: #111;border: 3px solid #ff0000;box-shadow: 0 0 15px #ff0000;border-radius: 4rem;cursor: crosshair;width: 100%;height: 100%;image-rendering: pixelated;position: absolute;top: 0;left: 0;}

/* --- UI Container --- */
#uiContainer {display: none;flex-wrap: wrap;justify-content: space-around;align-items: center;width: 100%;max-width: 800px;padding-bottom: 8px;font-size: clamp(9px, 2.5vw, 11px);gap: 8px;margin-bottom: 5px;}
#score, #highScore, #wave, #citiesLeft, #multiplier,#bonusIndicator {flex-grow: 1;text-align: center;}
#highScore { color: #aaa; }
#multiplier { color: #ffff00; font-weight: bold; text-shadow: 1px 1px #000; }

/* --- Bonus Indicator --- */
#bonusIndicator {color: #ffaa00;}

/* --- Controls Container --- */
#controlsContainer {display: none;flex-wrap: wrap;justify-content: center;gap: 10px;width: 100%;max-width: 800px;}

/* --- Special Weapons UI --- */
#specialWeaponsUI {display: none;flex-wrap: wrap;gap: 15px;justify-content: center;align-items: center;width: auto;max-width: 95%;}
.weaponControl { display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 2px solid transparent; padding: 5px; border-radius: 5px; transition: border-color 0.3s, background-color 0.3s; }
.weaponControl.armed { border-color: #ff0000; background-color: rgba(255, 0, 0, 0.2); }
.weaponControl.disabled { opacity: 0.4; cursor: not-allowed; }
.weaponIcon { font-size: clamp(18px, 4vw, 24px); width: 30px; height: 30px; line-height: 30px; text-align: center; border: 2px solid red; border-radius: 4px; margin-bottom: 4px; }
.weaponCount { font-size: clamp(10px, 2vw, 12px); color: red; font-weight: bold;}

/* --- Start Menu --- */
#startMenuContainer { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 600px; padding: 10px; box-sizing: border-box; }
#difficultySelection { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0; padding: 15px; border: 2px solid #ffff00; border-radius: 10px; background-color: rgba(30, 30, 0, 0.5); width: 100%; box-sizing: border-box; }
#difficultySelection h3 { margin: 0 0 10px 0; color: #ffff00; font-size: clamp(16px, 4vw, 18px); text-align: center; }
#startHighScore { color: #aaa; font-size: clamp(12px, 3vw, 14px); margin-top: 15px; text-align: center; }

/* --- Buttons --- */
button {background-color: #333;color: #00ff00;border: 2px solid #00ff00;padding: 8px 15px;font-size: clamp(10px, 3vw, 13px);cursor: pointer;box-shadow: 0 0 8px #00ff00 inset;transition: background-color 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s;border-radius: 5px;white-space: nowrap;flex-grow: 0;flex-shrink: 1;}
.difficulty-button { border-color: #ffff00; color: #ffff00; box-shadow: 0 0 8px #ffff00 inset; min-width: auto; text-align: center; }
.difficulty-button:hover:not(:disabled), .difficulty-button:focus:not(:disabled) { color: #00ff00;border: 2px solid #00ff00;box-shadow: 0 0 12px #00ff00 inset, 0 0 8px #00ff00; background-color: #444; }
.difficulty-button.selected { background-color: #555500; box-shadow: 0 0 12px #ffff00 inset, 0 0 12px #ffff00; color: #fff; }
#actualStartButton { margin-top: 20px; display: none; }
button:hover:not(:disabled), button:focus:not(:disabled) { background-color: #444; outline: none; }
button:not(.difficulty-button):hover:not(:disabled) { box-shadow: 0 0 12px #00ff00 inset, 0 0 8px #00ff00; }
button:active:not(:disabled) { background-color: #222; }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* --- Message Box --- */
#messageBox {position: fixed;top: 8em;left: 50%;transform: translate(-50%, 0);text-align: center;color: #fffb05;background: rgba(0, 0, 0, 0.75);box-shadow: 0 0 10em #fffb05;display: none;z-index: 30;border-radius: 10px;width: 80%;max-width: 670px;max-height: calc(100vh - 12em);overflow-y: auto;padding: 1em;}
#messageBox h2 {margin: 1rem;font-size: clamp(18px, 4vw, 24px);}
#messageBox p {margin: 10px 0;color: #ffff00;}
#messageText, #messageSubText { /* This makes the message text left-aligned */}
/* For the unordered lists in the AI advice section */
#messageSubText ul {
    text-align: left;
    padding-left: 20px; /* Add some indentation for the list */
    margin-top: 5px;
    margin-bottom: 5px;
}

#messageSubText li {
    margin-bottom: 4px; /* Spacing between list items */
}
#messageBox p.bonus-alert { color: #ffaa00; font-weight: bold; display: block; min-height: 1em; margin-top: 8px; }
#statsContainer {margin-top: 15px;padding-top: 10px;border-top: 1px solid;font-size: clamp(10px, 2.5vw, 11.5px);color: #ccc;text-align: left;display: grid;grid-template-columns: 1fr 1fr;gap: 5px 15px;}
#statsContainer span { display: block; margin-bottom: 4px; white-space: nowrap; }
.messageBoxButtons {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
#goToStoreButton, #skipStoreButton { display: none; }

/* --- Pause Overlay --- */
#pauseOverlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);border: 3px solid;color: #ffff00;box-shadow: 0 0 15px #ffff00;border-radius: 4rem;display: none;align-items: center;justify-content: center;font-size: clamp(30px, 10vw, 48px);text-shadow: 3px 3px #ff0000;z-index: 15;pointer-events: none;}

/* --- Store Modal --- */
#storeModal {position: fixed;top: 8em;left: 50%;transform: translate(-50%, 0);width: 80%;max-width: 740px;max-height: calc(100vh - 12em);border-radius: 15px;padding: 15px;z-index: 20;display: none;color: #00ff00;background: rgba(0, 0, 0, 0.75);box-shadow: 0 0 10em #00ff00;font-size: clamp(10px, 2.5vw, 11px);box-sizing: border-box;overflow-y: auto;}
#storeModal h2 { font-size: clamp(20px, 5vw, 22px); margin: 0 0 15px 0; text-align: center; color: #ffff00; }
#storeScore { font-size: clamp(14px, 3.5vw, 15px); margin-bottom: 15px; text-align: center; color: #fff; }
#storeItemsContainer {display: grid;grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));gap: 10px;margin-bottom: 15px;}
.storeItem {padding: 10px;background-color: rgba(0, 50, 0, 0.7);border-radius: 5px;border: 1px solid #008800;display: flex;flex-direction: column;justify-content: space-between;min-height: 100px;}
.storeItemInfo { margin-bottom: 8px; }
.storeItemInfo span { display: block; margin-bottom: 3px; }
.itemCost { color: #ffff00; }
.itemStock, .itemLevel { color: #aaa; font-size: clamp(10px, 2vw, 12px); }
.storeItemButtons { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; margin-top: 5px; }
.buyButton {padding: 0 4px;min-height: 1em;font-size: clamp(10px, 2.5vw, 11px);min-width: auto;flex-shrink: 1;}
.buyMultipleButton {border-color: #00aaaa;color: #00cccc;box-shadow: 0 0 6px #00aaaa inset;font-size: clamp(10px, 2.2vw, 12px);}
.buyMultipleButton:hover:not(:disabled) { box-shadow: 0 0 10px #00aaaa inset, 0 0 6px #00aaaa; }
#storeContinueButton { display: block; margin: 20px auto 0 auto; }

/* --- Footer --- */
footer {width: 100%;max-width: 800px;padding: 2em 0;/* border-top: 1px solid #005500; */font-size: clamp(10px, 2.5vw, 12px);display: flex;flex-direction: column; /* Stack items vertically */align-items: center; /* Center items horizontally */gap: 15px; /* Increased gap */}
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; /* Center links within their container */ }
.footer-links .link-group { margin-right: 10px; } /* Spacing between link groups */
footer a { color: #00ff00; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; display: inline-block; vertical-align: middle; line-height: 1; margin: 0 5px; }
footer a:hover, footer a:focus { color: #ffff00; text-shadow: 0 0 5px #ffff00; outline: none; }
footer a img { vertical-align: middle; margin: 0 3px; height: 20px; width: auto; }
/* --- Sound Controls Styling (Moved from inline) --- */
.sound-controls { display: flex; flex-direction: row; /* Default: side-by-side */ flex-wrap: wrap; /* Allow wrapping if needed */ justify-content: center; /* Center items if they wrap */ align-items: center; gap: 15px; /* Gap between music/sfx groups */ }
.sound-controls > div { display: flex; align-items: center; gap: 8px; } /* Keep inner items aligned */
.sound-controls button { padding: 4px 8px; font-size: 9.5px; min-width: 90px; }
.sound-controls label { font-size: 10px; }
.sound-controls input[type="range"] { width: 80px; height: 8px; cursor: pointer; vertical-align: middle; /* Align slider better */ }

/* --- Player Stats Modal --- */
#playerStatsModal h3 {
    margin: 0 0 10px 0;
    font-size: clamp(14px, 4vw, 16px);
}

#playerStatsModal p {
    margin: 5px 0;
    font-size: clamp(9px, 2.5vw, 11px);
    line-height: 1.4;
}

#closeStatsButton {
    background-color: #333;
    color: #00ff00;
    border: 2px solid #00ff00;
    padding: 8px 15px;
    font-size: clamp(10px, 3vw, 12px);
    cursor: pointer;
    box-shadow: 0 0 8px #00ff00 inset;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-radius: 5px;
    min-height: 34px; /* Match other button heights for mobile */
}

#closeStatsButton:hover {
    background-color: #444;
    box-shadow: 0 0 12px #00ff00 inset;
}

/* Leaderboard item hover effect */
#leaderboardList li {
    transition: background-color 0.2s;
}

#leaderboardList li:hover {
    background-color: rgba(0, 255, 255, 0.1);
}

/* Media queries for player stats modal */
@media (max-width: 768px) {
    #playerStatsModal {
        padding: 12px;
        width: 95%;
    }
    
    #playerStatsModal h2 {
        font-size: clamp(16px, 5vw, 20px);
    }
    
    /* Make grid single column on smaller tablets */
    #playerStatsModal .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #playerStatsModal {
        padding: 10px;
        max-height: 85vh;
    }
    
    #playerStatsModal h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    #playerStatsModal h3 {
        font-size: 12px;
    }
    
    #playerStatsModal p {
        font-size: 9px;
        margin: 3px 0;
    }
    
    #closeStatsButton {
        padding: 6px 12px;
        font-size: 10px;
        margin-top: 15px;
    }
}

/* Landscape mode optimizations */
@media (orientation: landscape) and (max-height: 500px) {
    #playerStatsModal {
        top: 50%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    #playerStatsModal > div {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    /* Adjust padding to use space more efficiently */
    #playerStatsModal > div > div {
        padding: 6px;
    }
}

/* About Game Modal Styles */
#aboutGameModal {
    display: none;
    position: fixed;
    top: 8em; /* Default for desktop */
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    background-color: rgba(0, 20, 0, 0.95);
    border: 3px solid #00ff00;
    border-radius: 15px;
    box-shadow: 0 0 20px #00ff00, 0 0 0 100vmax rgba(0,0,0,0.85);
    padding: clamp(8px, 3vw, 15px);
    z-index: 20;
    color: #00ff00;
    font-size: clamp(10px, 2.5vw, 11.5px);
    box-sizing: border-box;
    overflow-y: auto;
}

/* 移动设备适配 */
@media (max-width: 768px) {
    #uiContainer { gap: 6px; padding: 5px 0; font-size: clamp(9px, 2.2vw, 11px); }
    #controlsContainer { gap: 8px; }
    #specialWeaponsUI {gap: 10px;}
    #difficultySelection { gap: 8px; padding: 10px; }
    button { padding: 6px 12px; }
    #messageBox {padding: 15px;}
    #storeModal { padding: 10px; }
    #storeModal h2 { font-size: 14px; }
    #storeScore { font-size: 10px; }
    #storeItemsContainer {gap: 8px;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
    footer { margin-top: 15px; gap: 8px; }
    footer a { margin: 0 4px; }
    footer a img { height: 18px; }
    .storeItem { flex-direction: column; align-items: stretch; padding: 8px 10px; min-height: 0; gap: 8px; }
    .storeItemInfo { margin-bottom: 5px; flex-grow: 0; }
    .storeItemInfo span { display: block; margin-bottom: 2px; line-height: 1.2; }
    .storeItemButtons { justify-content: space-between; }
    .buyButton { align-self: center; flex-shrink: 0; }
}
#shareModal{
	color: #00ff00;
}