/* ==== Google Font Import (Already in HTML ) ==== */
/* ==== CSS Variables for Theming ==== */
:root {
--font-primary: 'Orbitron', sans-serif;
--color-bg-light: #ffffff; /* White */
--color-bg-dark: #1a1a1a; /* Very dark grey */
--color-text-light: #e5e7eb; /* Light grey */
--color-text-dark: #1f2937; /* Dark grey */
--color-accent: #3b82f6; /* Electric blue */
--color-accent-hover: #2563eb; /* Darker blue */
--color-border: #4b5563; /* Medium grey for borders */
--container-max-width: 1100px; /* Max width for centered content */
}
/* ==== Global Resets & Base Styles ==== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%; /* Ensure html takes full height */
}
body {
font-family: var(--font-primary);
background-color: var(--color-bg-light);
color: var(--color-text-dark);
line-height: 1.6;
display: flex; /* Make body a flex container */
flex-direction: column; /* Stack children vertically */
min-height: 100vh; /* Ensure body takes at least full viewport height */
}
h1, h2, h3 {
margin-bottom: 0.8em;
line-height: 1.3;
}
h1 {
font-size: 2.2rem; /* Larger heading */
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.4rem;
}
p {
margin-bottom: 1.2em;
}
ul {
margin-left: 20px;
margin-bottom: 1.2em;
}
li {
margin-bottom: 0.5em;
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
color: var(--color-accent-hover);
text-decoration: underline;
}
strong {
font-weight: bold;
}
/* ==== Header ==== */
header {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
padding: 1rem 1rem; /* Add horizontal padding directly */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
flex-shrink: 0; /* Prevent header from shrinking */
}
/* Select the direct div child for flex layout */
header > div {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-max-width); /* Optional: Limit inner content width */
margin: 0 auto; /* Center inner content if max-width is set */
}
#logo {
font-size: 1.8rem; /* Adjusted size */
font-weight: bold;
color: var(--color-accent);
}
header nav button {
font-family: inherit; /* Use body font */
padding: 0.4rem 0.8rem;
border: 1px solid var(--color-accent);
border-radius: 4px;
background-color: var(--color-bg-light);
color: var(--color-accent);
cursor: pointer;
margin-left: 0.5rem;
font-size: 0.9rem;
transition: background-color 0.2s, color 0.2s;
}
header nav button:hover {
background-color: var(--color-accent-hover);
color: var(--color-bg-light);
border-color: var(--color-accent-hover);
}
header nav button.active {
background-color: var(--color-accent);
color: var(--color-bg-light);
}
/* ==== Main Content ==== */
main {
padding: 2rem 1rem; /* Add horizontal padding */
flex-grow: 1; /* Allow main content to grow and push footer down */
/* Removed margin-top/bottom, padding handles spacing */
}
/* ==== Game Section ==== */
#game-section {
margin-bottom: 2rem; /* Space below game */
position: relative; /* Needed for fullscreen button positioning */
max-width: var(--container-max-width); /* Optional: Limit game width */
margin-left: auto;
margin-right: auto;
}
#game-container {
position: relative; /* For aspect ratio and iframe positioning */
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
background-color: var(--color-bg-dark);
border: 4px solid var(--color-accent);
border-radius: 8px; /* Rounded corners */
overflow: hidden; /* Ensure iframe stays within bounds */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#game-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none; /* Remove default iframe border */
}
#fullscreen-btn {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 10;
font-family: inherit;
padding: 0.5rem 1rem;
background-color: var(--color-accent);
color: var(--color-bg-light);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s;
}
#fullscreen-btn:hover {
background-color: var(--color-accent-hover);
}
/* ==== Content Article (Dark Theme) ==== */
#content-article {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
padding: 2rem; /* Keep padding for inner spacing */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Removed max-width and horizontal auto margin */
margin-top: 2rem; /* Keep vertical margin */
margin-bottom: 2rem; /* Keep vertical margin */
}
#content-article h1,
#content-article h2,
#content-article h3 {
color: var(--color-accent); /* Accent color for headings on dark bg */
}
#content-article a {
color: var(--color-accent); /* Keep links blue */
}
#content-article a:hover {
color: #60a5fa; /* Lighter blue hover on dark bg */
}
#content-article ul {
list-style: disc; /* Standard bullet points */
}
#content-article section {
margin-top: 2rem; /* Space between sections */
padding-top: 1rem;
border-top: 1px solid var(--color-border); /* Separator line */
}
#content-article section:first-of-type {
border-top: none; /* No border above the first section */
padding-top: 0;
}
/* ==== Reviews Section ==== */
#reviews {
/* Styles specific to the reviews section container if needed */
}
.reviews-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
gap: 1rem; /* Space between cards */
}
.review-card {
background-color: var(--color-bg-light);
color: var(--color-text-dark);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid var(--color-border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.review-card p:first-of-type {
font-style: italic; /* Italicize the review text */
}
.review-author {
text-align: right;
margin-top: 1rem;
font-weight: bold;
color: var(--color-accent);
}
/* ==== Footer ==== */
footer {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
margin-top: auto; /* Push footer to bottom in flex container */
padding: 2rem 1rem; /* Add horizontal padding directly */
text-align: center;
font-size: 0.9rem;
flex-shrink: 0; /* Prevent footer from shrinking */
}
/* Select the direct div child */
footer > div {
max-width: var(--container-max-width); /* Optional: Limit inner content width */
margin: 0 auto; /* Center inner content if max-width is set */
}
/* Styles for elements inside the footer div */
footer div > div {
margin-bottom: 0.5rem;
}
footer a {
color: var(--color-text-light); /* Lighter links in footer */
}
footer a:hover {
color: var(--color-accent); /* Accent color hover */
}
footer span#year {
/* Specific styling for the year if needed */
}
footer div[data-lang-key="game_credit"] {
font-size: 0.8rem;
color: #9ca3af; /* Subtler grey for credit */
margin-top: 1rem;
}
/* ==== Responsive Adjustments ==== */
@media (max-width: 768px) {
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
#logo {
font-size: 1.5rem;
}
/* Adjust header layout on smaller screens */
header > div {
flex-direction: column; /* Stack logo and nav */
gap: 0.8rem;
}
header nav {
margin-top: 0.5rem; /* Add some space */
/* Adjust button spacing if needed */
}
/* Remove max-width constraints on smaller screens if full bleed is desired */
/* header > div, main, footer > div, #game-section, #content-article { */
/* max-width: none; */
/* } */
}
@media (max-width: 480px) {
header nav button {
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
margin-left: 0.3rem;
}
/* Adjust padding on smaller screens */
header, main, footer {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
#content-article {
padding: 1rem; /* Less padding on small screens */
}
}