/* HUD Element Styles */
.ui-element {
    /* position: absolute;  Removed default absolute positioning */
    color: var(--text-color);
    white-space: nowrap;
}

/* Top Left Container */
.top-left-hud-container {
    position: absolute; /* Position the container itself */
    top: 10px; /* Adjust offset as needed */
    left: 10px;
    background-color: var(--hud-bg-color);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    border: 1px solid var(--secondary-color); /* Uses new --ui-theme-secondary (Green/Teal) */
    max-height: calc(100% - 40px - 60px);
    overflow-y: auto;
    pointer-events: auto; /* Allow interaction if needed */
    text-align: left;
    line-height: 1.4;
}

/* Styles for elements INSIDE the top-left container */
.top-left-hud-container .ui-element {
    display: block; /* Stack vertically */
    margin-bottom: 4px; /* Space between lines */
    text-shadow: 0 0 5px currentColor; /* Generic shadow, color set by JS */
}
.top-left-hud-container .ui-element:last-child {
    margin-bottom: 0;
}
.top-left-hud-container .level-display {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}
.top-left-hud-container .score-display {
    font-size: 14px;
    color: var(--gem-color);
    font-weight: bold;
    white-space: nowrap;
}
.top-left-hud-container .gems-display {
    font-size: 14px;
    color: var(--gem-color);
    font-weight: bold;
    white-space: nowrap;
}
.top-left-hud-container .trerks-display {
    font-size: 14px;
    color: var(--secondary-color); /* Uses new --ui-theme-secondary (Green/Teal) */
}
.top-left-hud-container .trerks-display br {
    display: block; /* Ensure line breaks work */
    content: "";
    margin-top: 4px;
}

/* NEW: Stats Display Styles */
.stats-display-container {
    margin-top: 8px; /* Space above the stats list */
    border-top: 1px solid rgba(var(--ui-theme-secondary-rgb), 0.3);
    padding-top: 8px;
}

.stats-display-title {
    font-size: 10px; /* Smaller title */
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.stat-line {
    font-size: 12px; /* Slightly smaller for stat lines */
    line-height: 1.5; /* Increased line height for readability */
    margin-bottom: 2px;
    display: flex; /* Use flex for alignment */
    justify-content: space-between; /* Pushes value+points to the right */
    align-items: center; /* Center vertically to match icon size */
}

.stat-label {
    /* color will be set by JS or inherit from stat-line */
    margin-right: 8px; /* Space between label and value */
    text-shadow: none; /* Remove individual text shadow if stat-line has one */
}

.stat-value {
    font-weight: bold;
    /* color will be set by JS or inherit from stat-line */
    text-shadow: none;
}

.stat-points {
    font-size: 0.7em; /* Make superscript smaller */
    vertical-align: super;
    margin-left: 2px; /* Space before superscript */
    font-weight: normal; /* Normal weight for superscript */
    color: var(--text-secondary); /* Dimmer color for points */
    text-shadow: none;
    min-width: 8px; /* Ensure some space for the number */
    display: inline-block; /* Allow min-width */
    text-align: left; /* Align number to left of its box */
}

/* Ensure left label area keeps consistent alignment when icons present */
.stat-left {
    display: flex;
    align-items: center;
}

/* NEW: Style for the right side of the stat line (value + points) */
.stat-right {
    display: flex;
    align-items: baseline;
}

/* Stat icon sizing and spacing (moved from inline styles) */
.stat-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    margin-right: 8px;
}

/* Spacer uses same dimensions but invisible */
.stat-icon--spacer {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-right: 8px;
    opacity: 0;
}

/* Ensure SVG icons inherit color from their container (currentColor) */
.stat-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
    stroke: none;
}

/* Affinity classes for stat-line to replace inline color/text-shadow.
   These map to the existing CSS variables defined in variables.css. */
.stat-line.affinity-accent-primary {
    color: var(--stage-slingapult-color);
    text-shadow: 0 0 5px var(--stage-slingapult-color);
}
.stat-line.affinity-accent-secondary {
    color: var(--stage-sorcerarcher-color);
    text-shadow: 0 0 5px var(--stage-sorcerarcher-color);
}
.stat-line.affinity-accent-tertiary {
    color: var(--stage-samurocket-color);
    text-shadow: 0 0 5px var(--stage-samurocket-color);
}
.stat-line.affinity-text-secondary {
    color: var(--text-secondary);
    text-shadow: none;
}

/* Specific HUD element positioning and styles */
/* Positions are now mostly set via inline styles in JS, but keep base styles */

.score-display {
    /* Styles now handled within .top-left-hud-container */
}

.blocks-display {
    position: absolute;
    top: 20px; /* matches JS topOffset previously used */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    font-size: 18px;
    text-align: center;
    line-height: 1.2;
    min-height: 62px; /* Keep existing spacing */
}

.blocks-display .label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.blocks-display .blocks-count {
    font-size: 30px;
    font-weight: bold;
    color: var(--accent-color);
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.25s cubic-bezier(.17,.67,.83,.67), color 0.25s cubic-bezier(.17,.67,.83,.67);
}

.blocks-display .blocks-count.bulge {
    transform: scale(1.35);
    color: #fff275;
    text-shadow: 0 0 15px #fff275, 0 0 20px var(--accent-color);
}

.blocks-display .blocks-total {
    font-size: 30px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 8px;
    vertical-align: middle;
}

.gems-display {
    /* Styles now handled within .top-left-hud-container */
}

.level-display {
    /* Styles now handled within .top-left-hud-container */
}

.stage-indicator {
    /* Position handled by JS (top right) */
    position: absolute; /* Ensure it respects top/right */
    font-size: 18px;
    /* Default text-shadow in CSS is overridden by JS with stage-specific (projectile) color */
    text-shadow: 0 0 10px var(--secondary-color); /* Default shadow uses new --ui-theme-secondary */
    pointer-events: none; /* Ensure no interaction */
}

.trerks-display {
    /* Styles now handled within .top-left-hud-container */
}

.equipped-items-display {
    /* Position handled by JS (bottom right) */
    position: absolute; /* Ensure it respects bottom/right */
    font-size: 14px; /* Reduced size slightly */
    line-height: 1.4;
    text-shadow: 0 0 8px var(--accent-color); /* Uses new --ui-theme-accent (Orange) */
    background-color: var(--hud-bg-color);
    padding: 8px 12px; /* Adjusted padding */
    border-radius: var(--border-radius);
    border: 1px solid var(--accent-color); /* Uses new --ui-theme-accent (Orange) */
    max-height: calc(100% - 40px - 60px);
    overflow-y: auto;
    pointer-events: auto;
    text-align: right;
}
.equipped-items-display br {
    display: block; /* Ensure line breaks work */
    content: "";
    margin-top: 4px;
}

/* NEW: Altitude Ruler Styles */
.altitude-ruler {
    position: absolute;
    right: 15px; /* Adjusted to not overlap scrollbars if any */
    top: 50%;
    transform: translateY(-50%);
    width: 80px; /* Increased width */
    min-height: 300px; /* Added min-height */
    height: 75%; /* Added height */
    background-color: rgba(var(--hud-bg-color-rgb, 10, 10, 26), 0.6); /* Use RGB for opacity control */
    border-top: 1px solid var(--ui-theme-secondary); /* New border top */
    border-bottom: 1px solid var(--ui-theme-secondary); /* New border bottom */
    border-left: none; /* Remove left border */
    border-right: none; /* Remove right border */
    border-radius: 4px;
    box-sizing: border-box;
    pointer-events: none; 
    overflow: hidden; 
    z-index: 5; /* Below other top-level HUD but above general UI */
}

.altitude-ruler-track { 
    position: relative;
    width: 100%;
    height: 100%;
}

/* Central line for the ruler */
.altitude-ruler-track::before {
    content: '';
    position: absolute;
    left: 40px; /* Center of the 80px width */
    top: 0;
    width: 2px;
    height: 100%;
    background-color: rgba(var(--ui-theme-secondary-rgb), 0.4);
}

.altitude-ruler-notch {
    position: absolute; /* JS will set 'top' */
    left: 40px; /* Align with the center line start (center of 80px width) */
    transform: translateX(-50%); /* Center the notch line itself on the central line */
    width: 20px; /* Length of the notch line */
    height: 2px; /* Thickness of notch */
    background-color: var(--ui-theme-secondary);
    transition: top 0.05s linear; /* Smooth notch movement slightly */
}

.altitude-ruler-notch.minor {
    width: 12px; /* Shorter for minor */
    background-color: rgba(var(--ui-theme-secondary-rgb), 0.6);
}

.altitude-ruler-notch-label {
    position: absolute;
    right: calc(100% - 15px); /* Position label to the left of the notch line, adjust for wider ruler */
    margin-right: 5px; /* Space between label and notch line */
    top: 50%;
    transform: translateY(-50%); 
    font-size: 10px;
    color: var(--text-color);
    white-space: nowrap;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
    width: 20px; /* Give label some width */
    text-align: right; /* Align text to the right */
}