body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
}

#game-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#fix-status-list {
    margin-top: 20px;
    text-align: left;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#fix-status-list h2 {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #555;
}

#fix-status-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#fix-status-list li {
    margin-bottom: 5px;
    padding: 5px 8px;
    border-radius: 3px;
    transition: background-color 0.3s, color 0.3s, text-decoration 0.3s;
    color: #d9534f; /* Red - Not fixed */
    position: relative; /* For pseudo-element */
    padding-left: 25px; /* Space for icon */
}
#fix-status-list li::before {
    content: '✖'; /* Cross mark */
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #d9534f;
}


#fix-status-list li.fixed {
    color: #5cb85c; /* Green - Fixed */
    text-decoration: line-through;
    background-color: #e9f7e9;
}
#fix-status-list li.fixed::before {
    content: '✔'; /* Check mark */
     color: #5cb85c;
}


#battery-area {
    margin-bottom: 20px; /* Space below battery */
}

#battery-container {
    margin: 20px 0;
    position: relative; /* For positioning elements like cracks */
}

#battery-svg {
    /* SVG size adjusted for larger viewBox */
    width: 400px; /* Increased width */
    height: 200px; /* Increased height */
    display: block; /* Prevent extra space below */
    margin: 0 auto; /* Center SVG */
    /* border: 1px dashed #ccc; /* Remove temporary border */
}

/* --- Battery SVG Styles --- */
.battery-body {
    fill: none;
    stroke: #555;
    stroke-width: 2;
}

.battery-terminal {
    fill: #555;
    transition: fill 0.3s ease, transform 0.3s ease; /* Smooth transition for fix */
}

#battery-level {
    transition: width 0.5s ease-in-out, fill 0.3s ease; /* Smoother transition */
}

/* States */
.battery-level-empty {
    fill: #eee;
    width: 0;
}

/* New partial charge state */
.battery-level-partial {
    fill: #ffcc00; /* Yellowish for charging/partial */
}

.battery-level-full {
    fill: #00cc00; /* Green */
    /* Updated width based on new viewBox and element coords */
    width: 140;
}

/* --- Broken State Styles --- */
#battery-svg.broken .battery-body {
    stroke: #aaa; /* Dimmed body */
}

/* Keep terminal grey unless explicitly fixed */
#battery-svg.broken .battery-terminal:not(.fixed) {
    fill: #aaa; /* Dimmed terminal */
    /* transform applied in JS */
}
/* Style for fixed terminal even when other things are broken */
#battery-svg.broken .battery-terminal.fixed {
    fill: #555; /* Normal color when fixed */
    transform: none;
}

#battery-svg.broken:not(.charged) #battery-level {
    fill: #ddd; /* Slightly different empty color */
    /* Updated width based on new viewBox and element coords */
    width: 5; /* Show a tiny bit */
}
/* Style for when charged but still broken */
#battery-svg.broken.charged #battery-level {
     fill: #ffcc00; /* Show partial charge color */
     /* Updated width based on new viewBox and element coords */
     width: 70; /* Show partial charge width */
}

#battery-svg.broken #crack-line {
    /* display is handled by JS based on fixes.crackFixed */
    stroke: #8b0000; /* Dark red */
    stroke-dasharray: 3, 3; /* Dashed line for crack */
    pointer-events: none; /* Don't interfere with click area */
}
#battery-svg.broken #loose-wire {
     /* display is handled by JS based on fixes.wireFixed */
     stroke: #888;
     pointer-events: none; /* Don't interfere with click area */
}

/* --- Clickable Area Hint Styling --- */
.clickable-area {
    fill: transparent; /* Base style: invisible */
    cursor: pointer;
}

.clickable-area.fixed {
    display: none;
}

/* --- Leaderboard Styles --- */
#leaderboard {
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#leaderboard h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: #337ab7; /* Blue */
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px; /* Limit height if many scores */
    overflow-y: auto; /* Add scroll if needed */
}

#leaderboard-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    font-size: 1em;
}

#leaderboard-list li:last-child {
    border-bottom: none;
}

#leaderboard-list li .rank {
    font-weight: bold;
    color: #555;
    min-width: 30px; /* Ensure alignment */
    text-align: right;
    margin-right: 15px;
}

#leaderboard-list li .username {
    flex-grow: 1; /* Take available space */
    text-align: left;
    overflow: hidden; /* Prevent long names breaking layout */
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 15px; /* Space before time */
    display: flex; /* Align avatar and name */
    align-items: center;
}

#leaderboard-list li .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

#leaderboard-list li .time {
    font-weight: bold;
    color: #009688; /* Teal */
    min-width: 60px; /* Ensure alignment */
    text-align: right;
}

#leaderboard-list li:nth-child(1) {
    background-color: #fffbe5; /* Highlight top score */
    font-weight: bold;
}

#leaderboard-list li:nth-child(1) .rank {
    color: #f59e0b; /* Gold */
}

#leaderboard-list li:nth-child(2) .rank {
    color: #aaa; /* Silver */
}
#leaderboard-list li:nth-child(3) .rank {
    color: #cd7f32; /* Bronze */
}

/* --- General Text & Buttons --- */
#instructions {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 10px;
}

#message {
    font-weight: bold;
    min-height: 1.5em; /* Prevent layout shifts */
    margin-top: 10px;
    font-size: 1.1em;
}

#timer-display {
    margin-top: 15px;
    font-size: 1.1em;
    color: #337ab7; /* Blue */
    font-weight: bold;
    min-height: 1.3em; /* Reserve space */
}

.message-error {
    color: #d9534f; /* Red */
}

.message-success {
     color: #5cb85c; /* Green */
}

.message-info { /* New style for general info messages */
    color: #17a2b8; /* Blue/Info */
}

/* Style for potential Reset Button */
#reset-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #6c757d; /* Grey */
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 15px;
    transition: background-color 0.2s;
}

#reset-button:hover {
    background-color: #5a6268;
}