body {
    background-image: url('background_pattern_1998.png');
    background-repeat: repeat;
    font-family: "Comic Sans MS", "Arial Black", "Arial", sans-serif;
    color: #FFFFFF; /* Default text color, can be overridden */
    margin: 0;
    padding: 0;
}

#mainTable {
    background-color: #000080; /* Dark blue, like old Windows apps */
    border: 5px outset #C0C0C0;
    margin-top: 10px;
    margin-bottom: 10px;
}

#header {
    background-color: #C0C0C0; /* Light gray, like title bars */
    padding: 10px;
    border-bottom: 3px inset #808080;
}

#header img {
    max-width: 100%;
    height: auto;
}

#nav {
    background-color: #808080; /* Medium gray */
    padding: 10px;
    border-right: 3px inset #C0C0C0;
    color: #FFFF00; /* Yellow text for nav */
    font-size: 14px;
}

#nav b {
    color: #FFFFFF; /* White for "NAVIGATION" */
    font-size: 16px;
}

hr_1998 { /* Custom hr for nav */
    display: block;
    height: 2px;
    border: 0;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #FFFFFF;
    margin: 5px 0;
}

#nav a.nav-link {
    color: #00FFFF; /* Cyan links */
    text-decoration: none;
    font-weight: bold;
    display: inline-block; /* For consistent spacing with icon */
    margin-bottom: 5px;
}

#nav a.nav-link:hover {
    color: #FF00FF; /* Magenta on hover */
    text-decoration: underline;
}

.new-icon-style {
    vertical-align: middle;
    margin-left: 3px;
    height: 16px; /* Adjust as needed */
}

#content {
    padding: 15px;
    background-color: #000040; /* Darker blue for content area */
    color: #FFFFFF; /* White text for content */
}

#content h1 {
    font-family: "Impact", "Arial Black", sans-serif;
    color: #FFFF00; /* Yellow headings */
    text-align: center;
    font-size: 28px;
    letter-spacing: 2px;
    text-shadow: 2px 2px #FF0000; /* Red shadow */
}

#content h2 {
    font-family: "Arial Black", "Arial", sans-serif;
    color: #00FF00; /* Green subheadings */
    font-size: 20px;
    border-bottom: 2px dashed #FFFF00;
    padding-bottom: 3px;
}

#content p {
    font-size: 14px;
    line-height: 1.6;
}

#content table.content-table {
    background-color: #C0C0C0;
    color: #000000; /* Black text in table */
    border: 2px outset #808080;
    width: 100%;
}

#content table.content-table td {
    border: 1px inset #808080;
    padding: 8px;
    font-size: 12px;
}

.game-thumbnail {
    border: 2px solid #000000;
    margin-bottom: 5px;
    width: 128px; /* Standard size for thumbnails */
    height: 128px;
}

.clickable-game { /* New style for clickable game thumbnails */
    cursor: pointer;
}

.clickable-game:hover {
    border-color: #FFFF00; /* Yellow border on hover */
    box-shadow: 0 0 10px #FFFF00;
}

.blink {
    animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
    font-weight: bold;
    color: #FF00FF; /* Magenta blinking text */
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

#downloadButton {
    border: 3px outset #FFFFFF; /* White 3D border */
}

#downloadButton:active {
    border: 3px inset #FFFFFF; /* Pressed effect */
}

.download-feedback {
    display: none;
    color: #00FF00; /* Green text */
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    background-color: #000000;
    padding: 5px;
    border: 1px dashed #00FF00;
}

.sysreq {
    font-size: 12px;
    list-style-type: square; /* Classic square bullets */
    color: #CCCCCC; /* Light gray for less important text */
}

.sysreq li {
    margin-bottom: 3px;
}

#gameViewContainer {
    text-align: center;
    padding: 20px;
    min-height: 400px; /* Ensure it takes up some space */
}

.loading-game-text {
    font-size: 20px;
    color: #FFFF00; /* Yellow loading text */
    font-weight: bold;
    font-family: "Impact", "Arial Black", sans-serif;
    text-shadow: 1px 1px #FF0000; /* Red shadow */
}

.loading-dots::after { /* Animated dots for loading text */
    content: ' .';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% { color: rgba(255,255,0,0); text-shadow: .25em 0 0 rgba(255,255,0,0), .5em 0 0 rgba(255,255,0,0), .75em 0 0 rgba(255,255,0,0);}
    40% { color: #FFFF00; text-shadow: .25em 0 0 rgba(255,255,0,0), .5em 0 0 rgba(255,255,0,0), .75em 0 0 rgba(255,255,0,0);}
    60% { text-shadow: .25em 0 0 #FFFF00, .5em 0 0 rgba(255,255,0,0), .75em 0 0 rgba(255,255,0,0);}
    80% { text-shadow: .25em 0 0 #FFFF00, .5em 0 0 #FFFF00, .75em 0 0 rgba(255,255,0,0);}
    100% { text-shadow: .25em 0 0 #FFFF00, .5em 0 0 #FFFF00, .75em 0 0 #FFFF00;}
}

.loading-bar-image { /* Style for the loading bar GIF */
    margin-top: 20px;
    margin-bottom: 20px;
    border: 3px outset #C0C0C0;
    width: 250px; /* Adjust as needed */
    height: auto;
}

.game-screen-image { /* Style for the in-game mock screenshot */
    border: 4px inset #808080; /* Dark inset border */
    margin: 15px auto;
    display: block;
    max-width: 90%;
    height: auto; /* Maintain aspect ratio */
    background-color: #000000; /* Black background in case image is transparent */
    cursor: pointer; /* Indicate it's interactive */
}

.game-action-feedback {
    animation: game-image-pulse-feedback 0.3s 1 ease-out;
}

@keyframes game-image-pulse-feedback {
    0% {
        box-shadow: 0 0 0px rgba(255, 255, 0, 0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 15px 5px #FFFF00; /* Yellow glow */
        transform: scale(1.01); /* Slight pulse */
    }
    100% {
        box-shadow: 0 0 0px rgba(255, 255, 0, 0);
        transform: scale(1);
    }
}

#gameViewContainer h2 { /* Specific H2 style for game titles in this view */
    font-family: "Impact", "Arial Black", sans-serif;
    color: #FF9900; /* Orange game titles */
    font-size: 26px;
    text-shadow: 2px 2px #000000; /* Black shadow */
    border-bottom: none; /* Override default H2 underline if present */
}

#gameViewContainer p {
    font-size: 14px;
    color: #DDDDDD; /* Lighter text for game descriptions */
}

#backToMainButton { /* Style for the 'Back to Main Page' button */
    background-color: #C0C0C0; /* Standard button gray */
    color: #000000;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 16px;
    padding: 10px 20px;
    border: 3px outset #FFFFFF;
    cursor: pointer;
    margin-top: 20px;
    text-transform: uppercase;
}

#backToMainButton:hover {
    background-color: #D0D0D0;
}

#backToMainButton:active {
    border-style: inset;
    background-color: #A0A0A0;
}

#footer {
    background-color: #C0C0C0; /* Light gray footer */
    color: #000000; /* Black text in footer */
    font-size: 10px;
    padding: 10px;
    text-align: center;
    border-top: 3px inset #808080;
}

#footer p {
    margin: 3px 0;
}

#footer img { /* For IE/Netscape logos and counter */
    vertical-align: middle;
    margin: 0 5px;
}

#visitorCount {
    font-weight: bold;
    color: #FF0000; /* Red visitor count */
}