html {
    height: 100%; /* Ensure html element takes full height */
}

body {
    background-color: #222;
    color: #eee;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Ensure items vertically centered */
    height: 100%; /* Use 100% to match html */
    margin: 0;
    overflow: hidden; /* Prevent scrollbars on body due to scaling */
    /* Body already centers the wrapper */
}

/* Restore .game-wrapper rule */
.game-wrapper {
    display: flex; /* Keep flex */
    /* gap: 30px; */ /* Remove gap */
    /* align-items: flex-start; */ /* Remove align-items */
    justify-content: center; /* Center the single child horizontally */
    align-items: center; /* Center the single child vertically */
    transform-origin: center center; /* Ensure scale from the center */
    /* width/height determined by content, scale applied via JS */
}

.title-area {
    /* text-align: center; */ /* Remove center alignment */
    /* margin-bottom: 20px; */
    color: #ccc;
    width: 100%; /* Take full width of parent (.hold-area) */
    padding: 15px 15px 0 15px; /* Adjust padding */
    box-sizing: border-box; /* Add box-sizing */
    /* margin-top: auto; */ /* REMOVED AGAIN - Let .hold-bottom-content handle pushing */
    text-align: center; /* Center text */
    /* flex-shrink: 0; */ /* Remove flex-shrink */
}

.title-area h2 {
    /* margin: 0 0 5px 0; */ /* Adjust margin */
    margin: 0 0 10px 0;
    color: #eee;
    font-size: 1.8em;
}

.title-area p {
    margin: 3px 0;
    font-size: 0.8em;
    color: #aaa;
}


.game-container {
    display: flex;
    gap: 25px; /* Increase gap */
    background-color: #333;
    padding: 25px;
    border-radius: 10px; /* Slightly increase border-radius */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* Slightly increase shadow */
    width: auto; /* Let content determine width initially */
    /* transform-origin: center center; */ /* Remove origin from container */
}

.hold-area,
.next-area,
.info-area,
.controls-area {
    background-color: #444;
    padding: 15px; /* Keep padding for info/controls */
    border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    width: 160px; /* REVERT WIDTH */
    box-sizing: border-box;
}

/* Add flex styles to info-area for button layout */
.info-area {
    display: flex;
    flex-direction: row; /* Arrange buttons horizontally */
    gap: 10px; /* Restore original gap for horizontal spacing */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Align buttons vertically */
    margin-top: 15px; /* Add margin like the original start button */
}

.hold-area,
.next-area {
    /* Reduce vertical padding further */
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* overflow: hidden; */ /* Temporarily REMOVED to check if action text appears */
    padding-bottom: 20px; /* Increase bottom padding further */
    /* Inherit background, border-radius, box-shadow, width, box-sizing from above rule */
}

/* Add specific styles for score display moved to hold area */
.hold-area .score-display {
    width: calc(100% - 30px); /* Full width minus padding */
    margin: 5px 15px 0 15px; /* Adjust top margin and horizontal margin */
    /* Inherit .info-item styles */
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
}
.hold-area .score-display span:first-child {
     color: #bbb;
}

/* .hold-top-content rule REMOVED */

.action-text {
    margin-top: 10px; /* RESTORED - Add space above action text */
    height: 2.4em; /* Increase height for larger font / two lines */
    line-height: 1.2em; /* Adjust line height */
    font-size: 1.1em; /* Increase font size */
    font-weight: bold;
    color: #ffc107; /* Yellow/Gold color for emphasis */
    white-space: pre-wrap; /* Allow wrapping and respect \n */
    text-align: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.2s ease-out; /* Fade out effect */
}

/* Push the bottom group (settings, action text, title) to the bottom */
.hold-bottom-content {
    margin-top: auto;
    width: 100%; /* Ensure it takes full width */
}

.panel-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #bbb;
    text-align: center;
    font-size: 1.1em; /* Increase font size */
}

#holdCanvas,
#nextCanvas {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 3px;
    box-sizing: border-box; /* Ensure border doesn't add to size */
    display: block; /* Prevent extra space below inline elements */
    /* margin-bottom: 5px; */ /* Ensure margin is removed */
}

#nextCanvas {
     /* Assuming NEXT_BLOCK_SIZE is 40 (160/4)
        4 pieces * (max 4 block height * 40px) + 3 gaps * (approx 20px)
        4 * 160 + 60 = 700. Let's use the height set in HTML (480px) for now.
     */
     /* Height is set in HTML now: height="480" */
     /* Remove fixed height from CSS to allow HTML attribute to control it */
}


.game-board-area {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack canvas wrapper and controls vertically */
    align-items: center; /* Center items horizontally */
    line-height: 0;
}

/* NEW: Wrapper for game canvas and garbage indicator */
.game-canvas-wrapper {
    display: flex; /* Arrange canvases side-by-side */
    align-items: flex-start; /* Align to the top */
}

/* NEW: Styles for the garbage indicator canvas */
#garbageIndicatorCanvas {
    background-color: #2a2a2a; /* Match other canvas backgrounds */
    border: 1px solid #555; /* Match other canvas borders */
    border-right: none; /* Remove right border to stick to game canvas */
    box-sizing: border-box;
    display: block; /* Prevent extra space */
}

/* Adjust game canvas border */
#gameCanvas {
    /* background-color: #1a1a1a; */ /* REMOVED - Grid/blocks will cover this */
    border: 1px solid #555;
    /* Grid will be drawn via JavaScript on the canvas */
    /* Dimensions set in HTML */
    display: block; /* Add display block for consistency */
}

/* NEW: Garbage Controls Area */
.garbage-controls {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    align-items: center;
    background-color: #3a3a3a; /* Match settings panel */
    padding: 8px 10px; /* Add some padding */
    margin-top: 10px; /* Space above the controls */
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    /* Width will be determined by the parent .game-board-area */
    width: 100%; /* Take full width of game-board-area */
}

.garbage-control-item {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between label and input */
}

.garbage-control-item label {
    color: #bbb;
    font-size: 0.9em;
}

.garbage-control-item input[type="checkbox"] {
    cursor: pointer;
    /* Optional: Style checkbox */
}

.garbage-control-item input[type="number"] {
    width: 50px; /* Adjust width as needed */
    padding: 3px 5px;
    background-color: #555;
    color: #eee;
    border: 1px solid #666;
    border-radius: 3px;
    font-size: 0.9em;
    box-sizing: border-box;
    text-align: center;
}

/* Optional: Style for number input arrows (browser-specific) */
.garbage-control-item input[type=number]::-webkit-inner-spin-button,
.garbage-control-item input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.garbage-control-item input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

.right-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 160px; /* REVERT WIDTH */
}

.info-area h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #ddd;
}

.info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.info-item span:first-child {
    color: #bbb;
}

#startButton {
    display: block;
    width: 100%;
    padding: 10px;
    /* margin-top: 15px; */ /* REMOVED - Let .info-area handle top margin */
    background-color: #555;
    color: #eee;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#startButton:hover {
    background-color: #666;
}

#startButton:active {
    background-color: #777;
}

/* Styles for Restart and Pause buttons */
#restartButton,
#pauseButton {
    /* Inherit common styles from #startButton (or define them explicitly) */
    display: block; /* Keep as block */
    /* width: 100%; */ /* REMOVED - Let width be auto */
    padding: 10px; /* Restore original padding */
    background-color: #555; /* Match background */
    color: #eee; /* Match text color */
    border: none; /* Match border */
    border-radius: 5px; /* Match border-radius */
    font-size: 1em; /* Match font size */
    cursor: pointer; /* Match cursor */
    transition: background-color 0.2s ease; /* Match transition */
    /* No margin-top here, rely on gap from .info-area */
}

#restartButton:hover,
#pauseButton:hover {
    background-color: #666; /* Match hover */
}

#restartButton:active,
#pauseButton:active {
    background-color: #777; /* Match active */
}

.controls-area h3 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    color: #ddd;
}

.controls-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    color: #ccc;
}

.controls-area li {
    margin-bottom: 5px;
}

/* --- Settings Panel Styles (Inside .hold-area) --- */
.settings-panel {
    background-color: #3a3a3a; /* Slightly different background */
    padding: 10px; /* Reduced padding */
    border-radius: 6px; /* Match other panels */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Reduced shadow */
    /* margin-bottom: 15px; */ /* REMOVED */
    /* margin-top: auto; */ /* REMOVED - Let it stack naturally */
    /* width: calc(100% - 40px); */ /* REMOVED - Let it fill parent */
    /* max-width: 750px; */ /* REMOVED */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* Space between title and items */
}

.settings-panel h3 {
    margin: 0 0 10px 0;
    text-align: center;
    color: #ddd;
    font-size: 1.2em;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

.setting-item {
    display: flex;
    flex-direction: column; /* Stack label/value and slider */
    align-items: flex-start; /* Align items to start */
    margin-bottom: 8px; /* Space between setting items */
    font-size: 0.9em;
    padding: 0 5px; /* Add horizontal padding to item container */
    box-sizing: border-box; /* Include padding in width calculation */
}

.setting-label-value {
    display: flex;
    justify-content: space-between; /* Push label left, value right */
    width: 100%; /* Take full width */
    margin-bottom: 3px; /* Space between label/value and slider */
}

.setting-item label {
    /* width: 55px; */ /* REMOVED */
    /* text-align: right; */ /* REMOVED */
    color: #bbb;
    /* flex-shrink: 0; */ /* REMOVED */
}

.setting-item input[type="range"] {
    /* flex-grow: 1; */ /* REMOVED */
    width: 100%; /* Slider takes full width of its container (.setting-item with padding) */
    cursor: pointer;
    height: 10px; /* Make slider track slightly thinner */
    margin-top: 2px; /* Add small space above slider */
}

.setting-item span {
    /* width: 35px; */ /* REMOVED */
    /* text-align: right; */ /* REMOVED */
    font-weight: bold;
    color: #eee;
    /* flex-shrink: 0; */ /* REMOVED */
}

/* --- Attack Table Controls Styles --- */
.attack-table-controls {
    display: flex; /* Keep flex */
    /* flex-direction: column; */ /* REMOVE - Use default row direction */
    /* align-items: flex-start; */ /* REMOVE */
    justify-content: center; /* Center the single item */
    align-items: center; /* Vertically center */
    background-color: #3a3a3a; /* Match garbage controls */
    padding: 8px 10px; /* Match garbage controls */
    margin-top: 10px; /* Space above the controls */
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    width: 100%; /* Take full width of game-board-area */
    /* gap: 5px; */ /* REMOVE - Gap handled by item */
}

/* Style for the single item container */
.attack-table-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between label and radio group */
}

/* Style for the main label */
.attack-table-item > label {
    color: #bbb;
    font-size: 0.9em;
    flex-shrink: 0; /* Prevent label from shrinking */
}

/* Group for radio buttons and their labels */
.attack-options-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between the two radio options */
}

/* Style for individual radio button + label pair (if needed, maybe not) */
/* .attack-table-option { ... } */ /* REMOVED - Using attack-options-group */


.attack-options-group input[type="radio"] { /* Target radios inside the group */
    cursor: pointer;
    margin: 0 5px 0 0; /* Add small right margin */
    /* Optional: Style radio button appearance */
    accent-color: #eee; /* Change the checked color */
}

.attack-options-group label { /* Target labels inside the group */
    color: #bbb;
    font-size: 0.9em;
    cursor: pointer;
    margin-right: 5px; /* Space before the next radio button */
}