body {
    background: linear-gradient(to bottom, #111111, #050505);
    color: #eee;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    position: relative;
}

/* Grid overlay */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* Enhanced title styling */
#main-title {
    color: #e0e0e0 !important; /* Light gray text */
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Use new font */
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 1.5em;
    font-weight: 500; /* Slightly bolder */
    margin: 0;
    padding: 8px 15px; /* More padding */
    background-color: rgba(30, 30, 30, 0.85); /* Darker, less transparent background */
    text-shadow: 
        0 0 8px rgba(224, 224, 224, 0.3); /* Subtle white glow */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border */
    border-radius: 6px; /* More rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
}

/* Enhanced button styling */
.pair-selector {
    position: absolute;
    top: 70px; /* Adjusted position */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: rgba(30, 30, 30, 0.85); /* Darker, less transparent background */
    padding: 8px; /* More padding */
    border-radius: 8px; /* More rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
    display: flex; /* Use flexbox for button alignment */
    gap: 10px; /* Space between buttons */
}

.pair-selector button, #fullscreen-btn {
    background-color: #333; /* Dark gray background */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly more visible border */
    color: #ccc !important; /* Light gray text */
    padding: 6px 12px; /* Adjusted padding */
    margin: 0; /* Remove default margin */
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Use new font */
    font-size: 0.9em;
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* Smooth transitions */
}

/* Specific styling for fullscreen button position */
#fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.pair-selector button:hover, #fullscreen-btn:hover {
    background-color: #444; /* Slightly lighter gray on hover */
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important; /* White text on hover */
}

.pair-selector button.active {
    background-color: #555; /* Medium gray for active */
    color: #fff !important; /* White text for active */
    font-weight: 600; /* Bolder active button */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Highlight active border */
}

#matrix-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2; /* Ensure it appears above grid */
}

.matrix-column {
    display: flex;
    flex-direction: column; /* Arrange prices vertically within a column */
    height: 100%;
    flex-grow: 1; /* Make columns share width equally */
    position: relative; /* Context for absolutely positioned price elements */
    overflow: hidden; /* Prevent prices spilling out horizontally */
    /* Restore vertical writing mode */
    writing-mode: vertical-rl; 
    text-orientation: mixed;   
    /* align-items: center; */ /* Removed alignment */
    padding: 5px 0; /* Restore vertical padding */
}

.price-char {
    display: block;
    font-size: 1.1em; /* Slightly smaller base size */
    line-height: 1.3; /* Reduced line height */
    /* white-space: nowrap; */ /* Removed to allow wrapping */
    position: absolute;
    top: 5px; /* Shift horizontal start slightly left from right edge */
    left: 0; /* Revert vertical position adjustment */
    transform: none; /* Remove horizontal centering */
    opacity: 0;
    color: #888; /* Default neutral gray */
    font-family: 'Roboto Mono', monospace; /* Use a modern monospace font */
    /* Trail effect */
    text-shadow: 
        0 0 3px currentColor,
        0 0 6px currentColor; /* Subtle trail */
    /* Glitch effect */
    animation: 
        fall linear forwards, /* Keep fall animation */
        glitch 5s linear infinite; /* Keep glitch animation */
}

/* Enhanced first character styling - removed, handled by trade type */
/* .price-char:first-child { ... } */

/* Glitch animation */
@keyframes glitch {
    0%, 100% { transform: translateX(-50%); }
    1% { transform: translate(calc(-50% - 1px), 1px); }
    2% { transform: translate(calc(-50% + 1px), -1px); }
    3% { transform: translateX(-50%); }
    98% { transform: translateX(-50%); }
    99% { transform: translate(calc(-50% + 2px), 1px); }
}

/* Ripple effect for significant price changes */
@keyframes ripple {
    0% { 
        transform: scale(1);
        opacity: 0.5;
    }
    100% { 
        transform: scale(1.5);
        opacity: 0;
    }
}

.ripple-effect {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.3); /* Updated green ripple color */
    animation: ripple 1s linear forwards;
    pointer-events: none;
    z-index: 5;
}

/* Colors for buy/sell trades */
.price-char.buy-trade {
    color: #34c759; /* Modern green */
    font-weight: 500; /* Slightly bolder */
    text-shadow: 0 0 5px rgba(52, 199, 89, 0.5), 0 0 10px rgba(52, 199, 89, 0.3); /* Green glow */
}

.price-char.sell-trade {
    color: #ff3b30; /* Modern red */
    font-weight: 500; /* Slightly bolder */
    text-shadow: 0 0 5px rgba(255, 59, 48, 0.5), 0 0 10px rgba(255, 59, 48, 0.3); /* Red glow */
}

/* Removed :first-child specific styles */
/* .price-char.buy-trade:first-child { ... } */
/* .price-char.sell-trade:first-child { ... } */
/* .price-char:not(.buy-trade):not(.sell-trade):first-child { ... } */


/* Sell orders fall from top */
@keyframes fall {
    0% {
        top: -50px;
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        top: 105%;
        opacity: 0;
    }
}

/* Buy orders rise from bottom */
@keyframes rise {
    0% {
        top: 105%;
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        top: -50px;
        opacity: 0;
    }
}


/* Animation classes */
.price-char.falling {
    animation: fall linear forwards;
    top: -50px;
}

.price-char.rising {
    animation: rise linear forwards;
    top: 105%;
}

/* Glitch effect for both directions */
.price-char.glitch {
    animation: 
        glitch 5s linear infinite;
}

/* Footer container */
.footer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    padding: 5px 0;
    background-color: rgba(20, 20, 20, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Footer Styling */
footer {
    font-size: 0.8em;
    color: #888; /* Neutral gray */
    background-color: rgba(30, 30, 30, 0.7); /* Subtle dark background */
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    white-space: nowrap;
}

footer a {
    color: #aaa; /* Lighter gray for link */
    text-decoration: none;
    transition: color 0.2s ease;
}

footer a:hover {
    color: #fff; /* White on hover */
    text-decoration: underline;
}

/* Attribution Styling */
.attribution {
    font-size: 0.75em; /* Slightly smaller */
    color: #666; /* Darker gray */
    text-align: center;
    white-space: nowrap;
    background-color: rgba(30, 30, 30, 0.7);
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.attribution a {
    color: #888 !important; /* Force color override */
    text-decoration: none;
    transition: color 0.2s ease;
}

.attribution a:hover {
    color: #bbb; /* Lighter gray on hover */
    text-decoration: underline;
}

/* Media queries for responsive design */
@media screen and (max-width: 768px) {
    #fullscreen-btn {
        top: 5px;
        right: 5px;
        padding: 4px 8px;
        font-size: 0.8em;
    }
    
    #main-title {
        font-size: 1.2em;
        padding: 6px 10px;
    }
    
    .pair-selector {
        top: 60px;
        padding: 6px;
        gap: 5px;
    }
    
    .pair-selector button {
        padding: 4px 8px;
        font-size: 0.8em;
    }
    
    .footer-container {
        padding: 3px 0;
    }
    
    footer, .attribution {
        font-size: 0.7em;
        padding: 3px 6px;
    }
}