/* Remove manual @font-face declarations - let Google Fonts handle it */

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    cursor: default;
    
    /* Multi-touch support */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Red cursor for hovering over enemies/asteroids */
body.cursor-red {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="red" stroke-width="2"/><circle cx="8" cy="8" r="2" fill="red"/></svg>') 8 8, auto;
}


h2 {
    margin-bottom: 0;
}

canvas {
    display: block;
    background-color: #000;
    /* Debug: Ensure canvas is visible */
    position: relative;
    z-index: 1;
    cursor: none; /* Hide default cursor - we'll draw our own */
    
    /* Multi-touch support for canvas */
    touch-action: none;
    -webkit-touch-callout: none;
}

canvas.asteroid-hover {
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12H17M12 21C7.02944 21 3 16.9706 3 12M12 21V17M3 12C3 7.02944 7.02944 3 12 3M3 12H7M12 3V7M12 12H12.01" stroke="%23ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 12 12, crosshair;
}

.ui-element {
    position: absolute;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    z-index: 10;
}

#lives-display {
    display: none; /* Lives are rendered on the game canvas */
}

/* Dim all HUD elements when the shop overlay is active. The shop overlay
   itself carries `.ui-element` (so it inherits the same z-index/font setup),
   so exclude it from the dimming via :not(#shop-overlay). */
body.shop-open .ui-element:not(#shop-overlay) {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#score {
    position: absolute;
    top: 30px;
    left: 350px; /* Moved right to make room for lives display */
    font-size: 12px;
    color: #FFD700;
    z-index: 10;
    display: none; /* Hidden since money is now rendered on canvas */
}

#game-message-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 50;
    pointer-events: none;
    text-align: center;
}

.message-title {
    font-size: 48px;
    text-shadow: 0 0 15px #f0f;
    animation: pulse 1.5s ease-in-out infinite;
}

.message-subtitle {
    font-size: 20px;
    margin-top: 20px;
    line-height: 1.5;
}

#pause-overlay {
    /* Backdrop is the see-through layer behind the menu so the player can
       still read the game state through it. Menu itself is fully opaque. */
    background-color: rgba(0, 0, 0, 0.25);
    display: none;
    pointer-events: all;
    z-index: 100;
}

#pause-menu {
    /* Fullscreen pause panel — fills the entire viewport with a 75%-opaque
       backdrop so the underlying game world is faintly visible. */
    background-color: rgba(0, 0, 0, 0.78);
    padding: 40px;
    border-radius: 0;
    text-align: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

/* Center the tab content vertically inside the fullscreen menu. */
#pause-menu .pause-tab-content.active {
    width: min(900px, 100%);
    margin: 0 auto;
}

/* Kill the inherited .ui-element text-shadow inside the pause menu — it
   makes body text look blurred (visible on the SKILLS tab instructions in
   particular). Empty skill slots opt back into a faint dim look via their
   own classes; they don't need this glow. */
#pause-menu,
#pause-menu * {
    text-shadow: none;
}

/* Center the controls list as a block while keeping each row left-justified. */
#controls-tab {
    text-align: center;
}
#controls-tab .control-list {
    display: inline-block;
    text-align: left;
    margin-top: 14px;
}
#controls-tab .control-list > div {
    margin: 10px 0;
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Goldenrod scrollbars throughout the pause menu.
   Dark yellow-goldenrod track + bright goldenrod thumb.
   Two notes on why this is split between Firefox and WebKit and uses no
   `scrollbar-width: thin`:
     - Firefox only honors `scrollbar-color` (no ::-webkit-scrollbar support).
     - Chromium / Safari respect ::-webkit-scrollbar pseudo-elements ONLY
       when the legacy scrollbar is in use; setting `scrollbar-width: thin`
       opts into the native thin scrollbar which ignores those pseudos and
       leaves the bar gray. So we omit `scrollbar-width`. */
#pause-menu,
#pause-menu * {
    scrollbar-color: #FFC107 #5a4509; /* thumb, track — Firefox */
}
#pause-menu::-webkit-scrollbar,
#pause-menu *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
#pause-menu::-webkit-scrollbar-track,
#pause-menu *::-webkit-scrollbar-track {
    background: #5a4509; /* dark yellow-goldenrod */
    border-radius: 6px;
}
#pause-menu::-webkit-scrollbar-thumb,
#pause-menu *::-webkit-scrollbar-thumb {
    background: #FFC107; /* bright goldenrod */
    border-radius: 6px;
    border: 2px solid #5a4509; /* keeps thumb visually inset against the track */
}
#pause-menu::-webkit-scrollbar-thumb:hover,
#pause-menu *::-webkit-scrollbar-thumb:hover {
    background: #FFD740; /* even brighter on hover */
}
#pause-menu::-webkit-scrollbar-corner,
#pause-menu *::-webkit-scrollbar-corner {
    background: #5a4509;
}

.pause-tabs {
    /* 4-column grid forces two rows for the 7 tabs (4 + 3 layout). */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
    justify-items: stretch;
}

.pause-tab {
    /* Per-tab color is supplied by the data-tab[…] selectors below. */
    --tab-color: #cccccc;
    --tab-glow: rgba(204, 204, 204, 0.35);
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid color-mix(in srgb, var(--tab-color) 55%, transparent);
    color: white;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 18px;
    border-radius: 5px;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.pause-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--tab-color) 18%, transparent);
    border-color: var(--tab-color);
    box-shadow: 0 0 15px var(--tab-glow);
    transform: translateY(-2px);
}

.pause-tab.active {
    background: color-mix(in srgb, var(--tab-color) 32%, transparent);
    border-color: var(--tab-color);
    box-shadow: 0 0 12px var(--tab-glow);
}

/* Per-tab colors — palette mirrors the shop tabs where applicable. */
.pause-tab[data-tab="controls"] { --tab-color: #cccccc; --tab-glow: rgba(204, 204, 204, 0.35); }
.pause-tab[data-tab="primary"]  { --tab-color: #00ccff; --tab-glow: rgba(0,   204, 255, 0.40); }
.pause-tab[data-tab="power"]    { --tab-color: #ff4444; --tab-glow: rgba(255,  68,  68, 0.40); }
.pause-tab[data-tab="skills"]   { --tab-color: #aa66ff; --tab-glow: rgba(170, 102, 255, 0.40); }
.pause-tab[data-tab="powerups"] { --tab-color: #ffd700; --tab-glow: rgba(255, 215,   0, 0.40); }
.pause-tab[data-tab="music"]    { --tab-color: #44dd88; --tab-glow: rgba( 68, 221, 136, 0.40); }
.pause-tab[data-tab="sfx"]      { --tab-color: #ffa500; --tab-glow: rgba(255, 165,   0, 0.40); }

.pause-tab-content {
    display: none;
    font-size: 16px;
    line-height: 2.5;
    text-align: left;
}

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

.pause-tab-content h2 {
    margin-top: 0;
    font-size: 28px;
    text-align: center;
}

/* ── SHOP OVERLAY ──────────────────────────────────────────────────────────
   Mirrors the pause-menu layout: full-viewport backdrop, centered column,
   header (title + currency), tab strip, scrollable item list. Reuses
   pause-tab styling patterns where possible. */
#shop-overlay {
    background-color: rgba(0, 0, 0, 0.25);
    display: none;
    pointer-events: all;
    z-index: 100;
}

#shop-menu {
    position: relative;
    background-color: rgba(0, 0, 0, 0.78);
    padding: 40px;
    text-align: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

#shop-menu, #shop-menu * { text-shadow: none; }

.shop-close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 40px;
    height: 40px;
    background: rgba(150, 25, 25, 0.9);
    border: 2px solid #993333;
    color: white;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    line-height: 1;
    border-radius: 5px;
    transition: all 0.2s;
    z-index: 1;
}
.shop-close:hover {
    background: rgba(220, 50, 50, 1.0);
    border-color: #ff9999;
    box-shadow: 0 0 14px rgba(255, 80, 80, 0.6);
}

.shop-title {
    color: #00ccff;
    font-size: 32px;
    margin: 0;
    font-family: 'Press Start 2P', monospace;
}

.shop-currency-row {
    display: flex;
    gap: 36px;
    justify-content: center;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    line-height: 1;
}
.shop-currency { display: inline-flex; align-items: center; gap: 8px; }
.shop-currency--coins { color: #ffd700; }
.shop-currency--sp    { color: #6ab7ff; }
.shop-currency-icon   { font-size: 18px; }
.shop-currency-label  { color: #4a90e2; font-size: 14px; }

.shop-tabs {
    /* 7 tabs: HELP + 6 category tabs. 4-column grid lays them out as
       4 + 3 (HELP / OFFENSE / PRIMARY / POWER on row 1; DEFENSE /
       DROPS / SKILLS on row 2). Width capped to keep tab cells from
       getting too wide on ultrawide screens. */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 12px 0;
    width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.shop-tab {
    --tab-color: #cccccc;
    --tab-glow: rgba(204, 204, 204, 0.35);
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid color-mix(in srgb, var(--tab-color) 55%, transparent);
    color: white;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 18px;
    border-radius: 5px;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}
.shop-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--tab-color) 18%, transparent);
    border-color: var(--tab-color);
    box-shadow: 0 0 15px var(--tab-glow);
    transform: translateY(-2px);
}
.shop-tab.active {
    background: color-mix(in srgb, var(--tab-color) 32%, transparent);
    border-color: var(--tab-color);
    box-shadow: 0 0 12px var(--tab-glow);
}

/* Per-tab category colors — matches the canvas palette. */
.shop-tab[data-tab="HELP"]    { --tab-color: #cccccc; --tab-glow: rgba(204, 204, 204, 0.35); }
.shop-tab[data-tab="OFFENSE"] { --tab-color: #ffd700; --tab-glow: rgba(255, 215,   0, 0.40); }
.shop-tab[data-tab="DEFENSE"] { --tab-color: #4a90e2; --tab-glow: rgba( 74, 144, 226, 0.40); }
.shop-tab[data-tab="DROPS"]   { --tab-color: #44dd88; --tab-glow: rgba( 68, 221, 136, 0.40); }
.shop-tab[data-tab="PRIMARY"] { --tab-color: #00ccff; --tab-glow: rgba(  0, 204, 255, 0.40); }
.shop-tab[data-tab="POWER"]   { --tab-color: #ff4444; --tab-glow: rgba(255,  68,  68, 0.40); }
.shop-tab[data-tab="SKILLS"]  { --tab-color: #aa66ff; --tab-glow: rgba(170, 102, 255, 0.40); }

.shop-content {
    width: min(900px, 100%);
    flex: 1;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.shop-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(0, 255, 0, 0.10);
    border: 2px solid #00ff00;
    border-radius: 8px;
    color: white;
    font-family: 'Press Start 2P', monospace;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-align: left;
}
.shop-item:hover:not(.shop-item--maxed) {
    background: rgba(0, 255, 0, 0.20);
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.45);
    transform: translateY(-2px);
}
.shop-item--cant-afford { background: rgba(255, 0, 0, 0.10); border-color: #ff4444; }
.shop-item--cant-afford:hover { background: rgba(255, 0, 0, 0.18); box-shadow: 0 0 14px rgba(255, 68, 68, 0.45); }
.shop-item--maxed { background: rgba(100, 100, 100, 0.20); border-color: #666; cursor: not-allowed; opacity: 0.7; }
.shop-item--owned { background: rgba(0, 150, 80, 0.20); border-color: #44ff88; }
.shop-item--owned:hover { background: rgba(0, 200, 100, 0.30); box-shadow: 0 0 14px rgba(68, 255, 136, 0.45); }
.shop-item--equipped { background: rgba(0, 140, 200, 0.30); border-color: #44ddff; }
.shop-item--equipped:hover { background: rgba(0, 180, 255, 0.40); box-shadow: 0 0 14px rgba(68, 221, 255, 0.50); }

.shop-item-icon { font-size: 32px; text-align: center; }
.shop-item-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shop-item-name { font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-item-desc { font-size: 12px; color: #cccccc; line-height: 1.4; }

.shop-item-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 110px;
}
.shop-item-price { font-size: 16px; font-weight: bold; color: #ffd700; display: inline-flex; align-items: center; gap: 6px; }
.shop-item-price--coin .shop-coin-icon { vertical-align: middle; }
.shop-item-price--sp { color: #4a90e2; }
.shop-item-price--cant { color: #ff6666; }
.shop-item-price--equipped { color: #44ddff; }
.shop-item-price--owned { color: #44ff88; }
.shop-item-status { font-size: 10px; color: #00ffff; }
.shop-item-status--maxed { color: #666; }
.shop-item-status--owned { color: #44ff88; }

.shop-item-sell {
    margin-left: 8px;
    padding: 6px 10px;
    background: rgba(160, 40, 40, 0.7);
    border: 1px solid #993333;
    color: white;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    border-radius: 4px;
    cursor: pointer;
    align-self: stretch;
    transition: all 0.15s;
}
.shop-item-sell:hover { background: rgba(220, 80, 80, 0.9); border-color: #ff9999; }

/* HELP panel — instructional content shown on the HELP shop tab. */
.shop-help {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: #e6e6e6;
    font-family: 'Press Start 2P', monospace;
}
.shop-help-intro,
.shop-help-footer {
    font-size: 13px;
    line-height: 1.7;
    color: #cccccc;
}
.shop-help-footer { color: #aaaaaa; font-style: normal; }
.shop-help-entry {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}
.shop-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.shop-help-icon--sp { color: #6ab7ff; border-color: rgba(74, 144, 226, 0.7); }
.shop-help-icon--xp { color: #ff6e6e; border-color: rgba(220, 60, 60, 0.7); }
.shop-help-text { display: flex; flex-direction: column; gap: 6px; }
.shop-help-title { font-size: 16px; font-weight: bold; letter-spacing: 1px; }
.shop-help-title--gold { color: #ffd700; }
.shop-help-title--sp   { color: #6ab7ff; }
.shop-help-title--xp   { color: #ff6e6e; }
.shop-help-body { font-size: 12px; color: #d8d8d8; line-height: 1.7; }

.pause-menu-actions {
    /* SHOP/RESUME row sits at the very top of the pause menu. The divider
       (border-bottom) sits inside this container, so the button→divider gap
       is `padding-bottom`. The divider→tabs gap below is the flex `gap` of
       #pause-menu (18px). Match `padding-bottom` to that gap so the divider
       is visually equidistant from the buttons and the tab row beneath it. */
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 0;
    padding-top: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-top: none;
}

.pause-action-btn {
    padding: 12px 24px;
    background: rgba(0, 200, 255, 0.2);
    border: 2px solid rgba(0, 200, 255, 0.6);
    color: white;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    border-radius: 5px;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

.pause-action-btn:hover {
    background: rgba(0, 200, 255, 0.4);
    border-color: #00ccff;
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.5);
    transform: translateY(-2px);
}

.pause-btn-icon {
    font-size: 26px;
    line-height: 1;
    position: relative;
    top: -3px; /* icon sits low in em square — nudge up */
}

.pause-btn-label {
    line-height: 1;
    position: relative;
    top: 2px; /* Press Start 2P has large ascender, text renders high — nudge down */
}

#pause-shop-button {
    background: rgba(255, 165, 0, 0.2);
    border-color: rgba(255, 165, 0, 0.6);
}

#pause-shop-button:hover {
    background: rgba(255, 165, 0, 0.4);
    border-color: #ffaa00;
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
}

/* No-powerups placeholder text — suppress inherited text-shadow from .ui-element parent */
#no-powerups {
    text-shadow: none;
}

/* HUD shop button — top-right, sits to the LEFT of the pause button so
   the player can pop into the shop at any time without first pausing.
   Same visual language as the pause button (goldenrod, dim until hover). */
#hud-shop-btn {
    position: fixed;
    top: 16px;
    right: 70px; /* width of pause btn (~38px) + 16px gap */
    z-index: 90;
    display: none; /* shown via showHudShopBtn() */
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(218, 165, 32, 0.08);
    border: 2px solid rgba(218, 165, 32, 0.3);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.4;
    font-size: 22px;
    line-height: 1;
    transition: opacity 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
#hud-shop-btn:hover {
    opacity: 1;
    background: rgba(218, 165, 32, 0.28);
    border-color: goldenrod;
    box-shadow: 0 0 14px rgba(218, 165, 32, 0.8), 0 0 28px rgba(218, 165, 32, 0.35);
}
body.shop-open #hud-shop-btn {
    opacity: 0;
    pointer-events: none;
}

/* Mobile pause menu — smaller, scrollable */
/* HUD pause button — top-left, goldenrod, semi-transparent until hovered */
#hud-pause-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 90;
    display: none; /* shown via showHudPauseBtn() */
    align-items: center;
    gap: 5px;
    padding: 9px 11px;
    background: rgba(218, 165, 32, 0.08);
    border: 2px solid rgba(218, 165, 32, 0.3);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

#hud-pause-btn:hover {
    opacity: 1;
    background: rgba(218, 165, 32, 0.28);
    border-color: goldenrod;
    box-shadow: 0 0 14px rgba(218, 165, 32, 0.8), 0 0 28px rgba(218, 165, 32, 0.35);
}

.hud-pause-bar {
    display: block;
    width: 5px;
    height: 22px;
    background: goldenrod;
    border-radius: 2px;
}

/* Hide HUD pause button when shop canvas is active */
body.shop-open #hud-pause-btn {
    opacity: 0;
    pointer-events: none;
}

#customize-button {
    display: block;
    margin: 20px auto 0;
    padding: 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: white;
    background: #333;
    border: 2px solid white;
    cursor: pointer;
}

#customize-button:hover {
    background: #555;
}

.control-symbol {
    font-size: 1.75rem;
}

#touch-fire {
    position: absolute;
    right: 18%;
    bottom: 18%;
    width: 20vmin; /* was 16vmin */
    height: 20vmin; /* was 16vmin */
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10vmin; /* was 8vmin */
    color: rgba(255, 255, 255, 0.6);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: all;
    box-sizing: border-box;
    transition: transform 0.05s ease-out;
    z-index: 201;
}
#touch-thrust {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 16vmin;
    height: 16vmin;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8vmin;
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: all;
    box-sizing: border-box;
    transition: transform 0.05s ease-out;
    z-index: 201;
}
#touch-fire:active {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}
#touch-thrust:active {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

#touch-tractor {
    position: absolute;
    right: 5%;
    bottom: 28%;
    width: 16vmin;
    height: 16vmin;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8vmin;
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: all;
    box-sizing: border-box;
    transition: transform 0.05s ease-out;
    z-index: 201;
}
#touch-tractor:active,
#touch-tractor.pressed {
    background-color: #eee !important;
    color: #333 !important;
    border-color: #bbb !important;
}



#customization-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 300;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: all;
}

#customization-overlay h2 { 
    font-size: 24px; 
    margin-bottom: 15px; 
}

#customization-overlay p { 
    font-size: 16px; 
    max-width: 80%; 
    margin-bottom: 30px; 
    line-height: 1.5; 
}

#customization-overlay .draggable {
    border: 2px dashed #f0f;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% { border-color: #f0f; }
    50% { border-color: #0ff; }
    100% { border-color: #f0f; }
}

#save-layout-button {
     margin-top: 30px;
     padding: 15px 30px;
     font-family: 'Press Start 2P',  monospace;
     font-size: 18px;
     color: black;
     background: white;
     border: 2px solid white;
     cursor: pointer;
}

/* #loading-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000;
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Press Start 2P',  monospace;
} */

/* #loading-screen h1 {
    font-size: 8vmin;
    margin-bottom: 60px;
    text-align: center;
    animation: color-cycle 10s linear infinite;
}

#loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#loading-bar {
    width: 300px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

#loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #00F, #4B0082, #8A2BE2, #FF00FF, #FF4500, #F00);
    width: 0%;
    transition: width 0.3s ease-out;
    border-radius: 8px;
}

#loading-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
} */

/* #title-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 400;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
} */

#game-title {
    font-size: 10vmin;
    text-align: center;
}

.title-char {
    display: inline-block;
    position: relative;
    animation: color-cycle 10s linear infinite, wave 2s ease-in-out infinite;
}

#start-prompt {
    font-size: 2.5vmin;
    animation: pulse-opacity 2s ease-in-out infinite;
    margin-top: 40px;
}

#high-score-display {
    margin-top: 20px;
    font-size: 2vmin;
    color: #ffd700;
    text-shadow: 0 0 8px #ffd700;
}

/* Mobile / tablet block — replaces the old orientation overlay. Shown via
   inline style by main.js when isMobileOrTabletDevice() is true. When this
   is visible, no game code runs at all. */
#desktop-only-block {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    color: #fff;
    z-index: 9999;
    display: none; /* flipped to flex by main.js when blocking */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    padding: 24px;
    box-sizing: border-box;
}

#desktop-only-block .desktop-only-icon {
    font-size: 96px;
    margin-bottom: 24px;
}

#desktop-only-block h1 {
    font-size: 28px;
    margin: 0 0 24px 0;
    color: goldenrod;
    letter-spacing: 2px;
}

#desktop-only-block p {
    max-width: 520px;
    line-height: 1.7;
    font-size: 14px;
    margin: 0 0 16px 0;
}

#desktop-only-block .desktop-only-sub {
    font-size: 11px;
    color: #aaa;
}

/* When the desktop-only block is up, hide everything else so leftover DOM
   never peeks through. */
body.desktop-only-blocked > *:not(#desktop-only-block) {
    display: none !important;
}

#energy-bar-row {
    position: absolute;
    top: 18px;
    left: 24px;
    display: flex;
    align-items: center;
    z-index: 90;
}

#energy-bar-container {
    position: relative;
    width: 220px;
    height: 16px;
    background: rgba(64,64,64,0.5);
    border-radius: 3px;
    margin-left: 45px;
}

#energy-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
}
#energy-value {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1em;
    font-weight: bold;
    color: #00ff00;
    text-shadow: none;
    width: 36px;
    display: block;
    text-align: right;
    transition: color 0.2s;
}
/* Critical/flashing effects removed */

/* Music Info Display */
#music-info {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 250px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px;
    border-radius: 10px;
    z-index: 90;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

#track-name {
    height: 30px;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
}

#track-name-text {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Silkscreen', 'Press Start 2P', 'Courier New', monospace;
    font-size: 18px;
    color: #00ff00;
    line-height: 30px;
}

#current-track-name {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 18px;
    color: #00ff00;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#music-info-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

#music-info-current-time,
#music-info-duration {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    min-width: 35px;
}

#music-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

#music-progress {
    height: 100%;
    background: #0088ff;
    width: 0%;
    transition: width 0.1s;
}

#shop-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #FFD700;
    color: #FFD700;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
    z-index: 2; /* Above canvas (z-index 1) but behind shop overlay */
    border-radius: 8px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

#shop-button:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #FFFF00;
    color: #FFFF00;
    text-shadow: 0 0 12px rgba(255, 255, 0, 1);
    transform: translateX(-50%) scale(1.05);
}

/* Music Player Styles */
#music-player {
    margin-top: 0;
}

#current-track-name {
    margin-bottom: 20px;
    padding: 0 20px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
}

#music-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

#music-player-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}

#music-player-progress {
    height: 100%;
    background: #0088ff;
    width: 0%;
    transition: width 0.1s;
}

#music-current-time,
#music-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    min-width: 45px;
}

#music-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.music-main-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.music-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.music-control-btn.large {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.music-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.music-control-btn.active {
    background: rgba(0, 255, 0, 0.2);
    border-color: #00ff00;
}

.music-control-btn.left {
    margin-right: auto;
}

.music-control-btn.right {
    margin-left: auto;
}

/* Playlist Styles */
#playlist-container {
    margin-top: 20px;
}

#playlist-container h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #00ff00;
    text-align: center;
}

#playlist-tracks {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

#playlist-tracks::-webkit-scrollbar {
    width: 8px;
}

#playlist-tracks::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#playlist-tracks::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#playlist-tracks::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.playlist-track {
    padding: 0 15px;
    cursor: pointer;
    font-family: 'Silkscreen', monospace;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
    position: relative;
}

.playlist-track-content {
    display: inline-block;
    white-space: nowrap;
}

.playlist-track:nth-child(odd) {
    background: rgba(255, 255, 255, 0.05);
}

.playlist-track:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.playlist-track:hover {
    background: rgba(0, 136, 255, 0.3);
    color: #fff;
}

.playlist-track.playing {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    font-weight: bold;
}

.playlist-track.playing::before {
    content: "♪ ";
    margin-right: 5px;
}

#shield-tanks {
    position: absolute;
    top: 40px;
    left: 24px;
    margin-left: 45px;
    display: flex;
    gap: 2px;
    z-index: 90;
}

.shield-tank {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(0,255,0,0.8);
    transition: background 0.2s;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes color-cycle {
    0%   { color: #00F; text-shadow: 0 0 15px #00F; }
    16%  { color: #4B0082; text-shadow: 0 0 15px #4B0082; }
    32%  { color: #8A2BE2; text-shadow: 0 0 15px #8A2BE2; }
    48%  { color: #FF00FF; text-shadow: 0 0 15px #FF00FF; }
    64%  { color: #FF4500; text-shadow: 0 0 15px #FF4500; }
    80%  { color: #F00; text-shadow: 0 0 15px #F00; }
    100% { color: #00F; text-shadow: 0 0 15px #00F; }
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* SFX Volume Slider */
#sfx-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border-radius: 4px;
    cursor: pointer;
}

#sfx-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00ff00;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

#sfx-volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #00ff00;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

#sfx-volume-value {
    color: #00ff00;
    font-size: 14px;
}

/* Music Volume Slider */
#music-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border-radius: 4px;
    cursor: pointer;
}

#music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #0088ff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

#music-volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #0088ff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

#music-volume-value {
    color: #0088ff;
    font-size: 14px;
}

/* Sound Effect Toggles */
#sfx-toggles {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

#sfx-toggles::-webkit-scrollbar {
    width: 8px;
}

#sfx-toggles::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#sfx-toggles::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#sfx-toggles::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.sfx-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    transition: background 0.2s;
}

.sfx-toggle:nth-child(odd) {
    background: rgba(255, 255, 255, 0.05);
}

.sfx-toggle:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.sfx-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

.sfx-toggle-label {
    font-family: 'Silkscreen', monospace;
    font-size: 18px;
    text-transform: capitalize;
}

.sfx-toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.sfx-toggle-switch.active {
    background: #00ff00;
}

.sfx-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

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

.sfx-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sfx-test-button {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 200, 255, 0.5);
    border-radius: 6px;
    background: rgba(0, 200, 255, 0.2);
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
}

.sfx-test-button:hover {
    background: rgba(0, 200, 255, 0.3);
    border-color: rgba(0, 200, 255, 0.7);
    transform: scale(1.05);
}

.sfx-test-button:active {
    transform: scale(0.95);
    background: rgba(0, 200, 255, 0.3);
}

/* Powerup HUD - persistent DOM overlay above survival timer */
#powerup-hud {
    bottom: 62px;
    left: 20px;
    display: flex;
    gap: 10px;
    pointer-events: none;
    align-items: flex-end;
}

.powerup-hud-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-width: 40px;
}

.powerup-hud-countdown {
    font-family: 'Silkscreen', monospace;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 6px;
    line-height: 1.2;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
}

.powerup-hud-circle {
    position: relative; /* anchor for stacks badge */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid;
    box-sizing: border-box; /* keeps total width exactly 40px so timer aligns */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.powerup-hud-stacks {
    position: absolute;
    bottom: -4px;
    right: -7px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    border-radius: 5px;
    padding: 1px 3px;
    font-size: 13px;
    font-family: 'Silkscreen', monospace;
    line-height: 1.3;
    white-space: nowrap;
}

.powerup-hud-timer {
    margin: 8px 2px 0; /* 8px gap above, 2px side insets — wider bar, centered under circle */
    align-self: stretch; /* fill full width of flex column parent */
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
}

.powerup-hud-timer-bar {
    height: 100%;
    border-radius: 2px;
    width: 100%;
    transition: width 0.15s linear;
}

.powerup-hud-name {
    font-family: 'Silkscreen', monospace;
    font-size: 13px;
    color: #aaddff;
    text-align: center;
    margin-top: 5px;
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
    line-height: 1.2;
}

#music-repeat {
    position: relative;
}

#music-repeat.repeat-one::after {
    content: '1';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: white;
    color: #00ccff;
    border-radius: 50%;
    font-size: 11px;
    font-family: 'Silkscreen', 'Press Start 2P', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    z-index: 2;
    border: 2px solid #00ccff;
    pointer-events: none;
}