body {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body::before {
    position: fixed;
    inset: 0;
    background-image: url(../images/background63C.png);
    //    background-size: cover;
    background-position: top left;
    background-repeat: repeat;
    background-size: auto;
    content: " ";
    z-index: -1;
    filter: blur(0px);
}

body,
html {
    height: 100%;
    margin: 0;
}

a {
    text-decoration: underline;
}

.title-link {
    font-weight: 800;
//    font-size: 1.05em;
    color: #ffffff;
    text-decoration: underline;
}

.top-index {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    background-color: #566f91;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 6px;
}

.top-index a {
    margin-right: 10px;
//    font-weight: bold;
}

.letter-section {
    color: white; /* White text color */
    margin-bottom: 40px;
}

.letter-section ul {
    list-style: none;
    padding-left: 10px;
}

.letter-section li {
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400; /* Normal text */
    margin: 6px 0;
}

.back-to-top {
    font-size: 12px;
    display: inline-block;
    margin-top: 10px;
}

header {
    width: 1200px; /* Take up full width of the page */
    background-color: #464d42; /* Dark background color */
    border-radius: 10px 10px 0 0; /* top-left | top-right | bottom-right | bottom-left */
    color: white; /* White text color */
    text-align: center; /* Center text inside the footer */
    padding: 20px; /* Add some padding for spacing */
    top: 0; /* Align it at the top */
    left: 0; /* Align the footer to the left edge of the page */
    right: 0; /* Align the footer to the right edge of the page */
    margin: auto;
    z-index: 2;
}

.site-header {
    display: flex;
    align-items: center; /* vertically center image & text */
    justify-content: space-between;
    padding: 24px 0px 0px 0px;
}

.left-header {
    display: flex;
    width: 250px;
    height: 186px;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.right-header {
    width: 950px;
    height: 186px;
}

main {
    flex: 1;
    width: 1200px; /* Take up full width of the page */
    //  background-color: #cccccc;background-color /* Dark background color */
    //  background-color: #464d42;background-color;
    border-radius: 10px 10px 10px 10px; /* top-left | top-right | bottom-right | bottom-left */
    //    color: white;              /* White text color */
    //    text-align: center;        /* Center text inside the footer */
    //  padding: 20px;padding             /* Add some padding for spacing */
    left: 0; /* Align the footer to the left edge of the page */
    right: 0; /* Align the footer to the right edge of the page */
    margin: auto;
    z-index: 1;
}

.site-main {
    display: flex;
}

.left-main {
    width: 250px;
    padding-top: 30px;
    background-color: #464d42;
    z-index: 3;
}

.left-filler {
    height: 16px;
}

.right-main {
    width: 950px;
    //    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #6882a5;
    z-index: 3;
}

.quickpath {
    padding-top: 4px;
    padding-bottom: 4px;
}

.quickpath-paragraph {
    color: #000000;
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 12px;
}

.quickpath a:link,
.quickpath a:visited {
    color: #000000;
    text-decoration: underline;
}

.quickpath a:hover,
.quickpath a:focus {
    color: #000000;
    text-decoration: underline;
}

.review > p:first-of-type::first-letter {
/* The greater-than makes it target only direct paragraph children of review, not paragraphs inside nested elements */
    float: left;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background: #6882a5;
    padding: 6px 10px;
    margin: 0.1em 0.2em 0 0;
    border-radius: 6px;
}

.review-first-paragraph {
    padding-top: 20px;
}

.review-first-paragraph a:link,
.review-first-paragraph a:visited {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.review-first-paragraph a:hover,
.review-first-paragraph a:focus {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.review-normal-paragraph {
    padding-top: 20px;
}

.review-normal-paragraph a:link,
.review-normal-paragraph a:visited {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.review-normal-paragraph a:hover,
.review-normal-paragraph a:focus {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.walkthrough-title {
    color: #00ff00;
    font-family: "Zeyada", cursive;
    font-size: 50px;
    font-weight: 400; /* Normal text */
    font-stretch: 100%;
}

.walkthrough-intro-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 60px 0px 40px 0px;
}

.walkthrough-intro-paragraph {
    padding-top: 10px;
}

.walkthrough-normal-paragraph {
    padding-top: 10px;
    padding-bottom: 10px;
}

.walkthrough-gameover-paragraph {
    padding-top: 10px;
    padding-bottom: 5px;
}

.walkthrough-section-divider {
    padding-top: 10px;
    padding-bottom: 10px;
}

.general-section-divider {
    padding-top: 10px;
    padding-bottom: 10px;
}


.highlight {
    font-family: Georgia, serif;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

p {
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400; /* Normal text */
    font-stretch: 100%;
    line-height: 20px;
    //    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    color: #ffffff; /* White text color */
    font-family: "Bitcount Single", "Montserrat", monospace;
    font-size: 36px;
    text-shadow: 2px 2px #000000;
}

h2 {
    color: #ffffff; /* White text color */
    font-family: "Bitcount Single", "Montserrat", monospace;
    font-size: 28px;
    text-shadow: 2px 2px #000000;
}

h3 {
    color: #ffffff; /* White text color */
    font-family: "Bitcount Single", "Montserrat", monospace;
    font-size: 22px;
    text-shadow: 2px 2px #000000;
}

.review-screenshot {
    display: flex;
    justify-content: center; /* horizontal */
    padding-top: 20px;
}

.walkthrough-screenshot {
    display: flex;
    justify-content: center; /* horizontal */
}

.update-box {
    border: 1px solid #ccc;
    // padding: 20px; 
    padding: 10px 20px; 10px 20px; /* top → right → bottom → left */
    // margin: 20px 0; /* top & bottom → left & right */
    margin: 20px 20px 0; /* top → left & right → bottom*/
    // background: #7893b6; /* lighter */
    background: #5a7393; /* darker */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.update-box-paragraph {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400; /* Normal text */
    font-stretch: 100%;
    line-height: 20px;
}

.warning-icon {
    color: #ff0000;
}

figure {
    display: inline-block; /* Keeps figure and image inline */
    text-align: center; /* Centers the caption */
    //  margin: 10px;
    //  margin-left: auto;
    //  margin-right: auto;
    // padding-top: 20px;
}

.caption-text {
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
}

.fb-page {
    //  width: 250px;
    //    margin: auto;
    padding-top: 20px;
    margin-left: 7px;
    z-index: 4;
}

.fb-text {
    margin-left: 44px;
    padding-top: 20px;
}

.fb-text-paragraph {
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
}

.fb-text-paragraph a:link,
.fb-text-paragraph a:visited {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.fb-text-paragraph a:hover,
.fb-text-paragraph a:focus {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.gamecard-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
}

.gamecard {
    border: 0px;
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400; /* Normal text */
    font-stretch: 100%;
    clear: both; /* Ensures no floated elements are on the same line */
    margin-bottom: 20px;
}

.gamecard-cell1 {
    width: 80px;
}

.gamecard-cell2 {
    width: 240px;
}

.gamecard-cell3 {
    width: 500px;
}

.gamecard td,
th {
    vertical-align: middle; /* top | middle | bottom */
    padding: 10px;
}

.gameover-intro-container {
}

.gameover-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
}

.gameover {
    border: 0px;
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400; /* Normal text */
    font-stretch: 100%;
    clear: both; /* Ensures no floated elements are on the same line */
    margin-bottom: 20px;
}

.gameover-cell1 {
    width: 500px;
}

.gameover-cell2 {
}

.gameover td,
th {
    vertical-align: middle; /* top | middle | bottom */
    padding: 10px;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%;
    display: block;
}

.overlay-caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    font-size: 16px;
    font-style: italic;
    display: none; /* Hidden by default */
}

.image-container:hover .overlay-caption {
    display: block; /* Display on hover */
}

.overlay-caption {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none; /* optional */
}

.section {
    //  width: 600px;
    //  margin: 40px auto;
}

.divider {
    border: none;
    height: 1px;
    //  background-color: #aaa;
    background-color: #cccccc;
    margin: 20px 0px 20px 0px;
}

.divider-full {
    border: none;
    height: 1px;
    //  background-color: #aaa;
    background-color: #cccccc;
    margin: 10px 0px 20px 0px;
}

.scummbar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 30px 0px 30px 0px;
}

.scummbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 0px;
    color: #ffffff;
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
}

.scummbar a:link,
.scummbar a:visited {
    //  color: #6882a5;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.scummbar a:hover,
.scummbar a:focus {
    //  color: #9bb3d6;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
}

.scummbar-span {
    float: left;
    margin-right: 20px;
    width: 136px;
}

.also-available {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    align-items: flex-start;
    border: 0px;
    color: #ffffff;
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
}

.content-box a:active {
    color: #3d567a;
}

.gallery {
    width: 800px;
    margin: 10px auto;
    text-align: center;
}

#mainImage {
    width: 100%;
    //  border-radius: 8px;
    //  margin-bottom: 12px;
}

.thumbnails {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.thumbnails img {
    width: 120px;
    cursor: pointer;
    opacity: 0.6;
    border-radius: 4px;
    transition: opacity 0.2s, transform 0.2s;
}

.thumbnails img:hover {
    opacity: 1;
    transform: scale(1.05);
}

#mainImage {
    width: 100%;
    //  border-radius: 8px;
    opacity: 1;
    transition: opacity 0.35s ease;
}

figcaption {
    //  margin-top: 8px;
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.game-finished {
    display: inline-block;
    //      margin: 3rem auto;
    margin: 20px auto;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #fbc02d, #f57c00);
    border-radius: 999px;
    text-align: center;

    /* Text shadow for readability */
    // text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.5);
}

.game-finished-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.game-finished-screenshot {
    display: flex;
    justify-content: center; /* horizontal */
}

footer {
    width: 1200px; /* Take up full width of the page */
    background-color: #464d42; /* Dark background color */
    border-radius: 0 0 10px 10px; /* top-left | top-right | bottom-right | bottom-left */
    color: white; /* White text color */
    text-align: center; /* Center text inside the footer */
    padding: 20px 0 20px 0; /* Add some padding for spacing */
    bottom: 0; /* Align it at the bottom */
    left: 0; /* Align the footer to the left edge of the page */
    right: 0; /* Align the footer to the right edge of the page */
    margin: auto;
    z-index: 2;
}

.site-footer {
}

.footer_primary {
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 14px;
    padding: 3px;
}

.footer_secondary {
    color: #ffffff; /* White text color */
    font-family: "Oxygen", Arial, sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 1px;
}

.footer_secondary a:link,
.footer_secondary a:visited {
    color: #ffffff;
    text-decoration: underline;
}

.footer_secondary a:hover,
.footer_secondary a:focus {
    color: #ffffff;
    text-decoration: underline;
}