/*
* Retro / neobrutalism design system for the games subsection.
* Mirrors the tokens from /Retro UI Project (HSL channels, Tailwind config).
* Drop into any games-subsection page with:
*
*
* (toggle to "dark")
*/
:root,
[data-theme="light"] {
--background: 45 15% 97%;
--foreground: 0 0% 5%;
--card: 0 0% 100%;
--card-foreground: 0 0% 5%;
--primary: 0 85% 45%;
--primary-foreground: 0 0% 100%;
--secondary: 50 100% 55%;
--secondary-foreground: 0 0% 10%;
--accent: 216 85% 45%;
--accent-foreground: 0 0% 100%;
--muted: 45 10% 88%;
--muted-foreground: 0 0% 25%;
--border: 0 0% 15%;
--shadow-color: 0 0% 0%;
--radius: 0px;
--shadow-sm: 4px 4px 0 0 hsl(var(--shadow-color) / 0.7);
--shadow: 6px 6px 0 0 hsl(var(--shadow-color) / 1);
--shadow-lg: 10px 10px 0 0 hsl(var(--shadow-color) / 1);
}
[data-theme="dark"] {
--background: 0 0% 8%;
--foreground: 0 0% 95%;
--card: 0 0% 12%;
--card-foreground: 0 0% 95%;
--primary: 0 90% 60%;
--primary-foreground: 0 0% 5%;
--secondary: 50 95% 65%;
--secondary-foreground: 0 0% 10%;
--accent: 216 90% 60%;
--accent-foreground: 0 0% 5%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 70%;
--border: 0 0% 85%;
--shadow-color: 0 0% 0%;
--shadow-sm: 4px 4px 0 0 hsl(var(--shadow-color) / 0.9);
--shadow: 6px 6px 0 0 hsl(var(--shadow-color) / 1);
--shadow-lg: 10px 10px 0 0 hsl(var(--shadow-color) / 1);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: "DM Sans", system-ui, -apple-system, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
transition: background-color 0.2s ease, color 0.2s ease;
}
h1,
h2,
h3,
h4 {
font-family: "DM Sans", system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
color: hsl(var(--foreground));
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; }
code,
.retro-mono {
font-family: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}
a { color: hsl(var(--accent)); }
/* Page shell */
.retro-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.retro-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Top bar */
.retro-topbar {
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
border-bottom: 3px solid hsl(var(--border));
}
.retro-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 0;
gap: 1rem;
}
.retro-brand {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: "Space Mono", monospace;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: hsl(var(--secondary-foreground));
text-decoration: none;
}
.retro-brand img {
width: 36px;
height: 36px;
display: block;
}
.retro-eyebrow {
display: inline-block;
font-family: "Space Mono", monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
background: hsl(var(--accent));
color: hsl(var(--accent-foreground));
padding: 0.35rem 0.65rem;
border: 2px solid hsl(var(--border));
box-shadow: var(--shadow-sm);
}
/* Hero */
.retro-hero {
padding: 4rem 0 3rem;
border-bottom: 3px solid hsl(var(--border));
}
.retro-hero h1 { margin-bottom: 1rem; }
.retro-hero p {
font-size: 1.1rem;
line-height: 1.55;
max-width: 56ch;
color: hsl(var(--muted-foreground));
margin: 0;
}
/* Card */
.retro-card {
background: hsl(var(--card));
color: hsl(var(--card-foreground));
border: 3px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.retro-card:hover {
transform: translate(-3px, -3px);
box-shadow: var(--shadow-lg);
}
.retro-card--disabled { opacity: 0.6; }
.retro-card--disabled:hover { transform: none; box-shadow: var(--shadow); }
.retro-card-media {
aspect-ratio: 16 / 9;
background: hsl(var(--secondary));
border-bottom: 3px solid hsl(var(--border));
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: hsl(var(--secondary-foreground));
position: relative;
overflow: hidden;
}
.retro-card-media--accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.retro-card-media--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.retro-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.75rem;
}
.retro-card-title { font-size: 1.4rem; }
.retro-card-desc {
color: hsl(var(--muted-foreground));
line-height: 1.55;
flex: 1;
margin: 0;
}
.retro-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-family: "Space Mono", monospace;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--muted-foreground));
}
.retro-tag {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
border: 2px solid hsl(var(--border));
padding: 0.2rem 0.5rem;
font-family: "Space Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Button */
.retro-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
padding: 0.8rem 1.4rem;
border: 3px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
background: hsl(var(--card));
color: hsl(var(--foreground));
cursor: pointer;
text-decoration: none;
transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
text-transform: uppercase;
}
.retro-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.retro-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 hsl(var(--shadow-color)); }
.retro-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.retro-btn--accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.retro-btn--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.retro-btn--ghost {
background: transparent;
box-shadow: none;
}
.retro-btn--ghost:hover { background: hsl(var(--muted)); transform: none; box-shadow: none; }
.retro-btn:disabled,
.retro-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: var(--shadow-sm);
}
.retro-icon-btn {
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: hsl(var(--card));
color: hsl(var(--foreground));
border: 3px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.retro-icon-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.retro-icon-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 hsl(var(--shadow-color)); }
/* Grid */
.retro-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
padding: 2.5rem 0 4rem;
}
@media (min-width: 720px) {
.retro-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
.retro-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Panel — used inside games for score/info boxes */
.retro-panel {
background: hsl(var(--card));
border: 3px solid hsl(var(--border));
box-shadow: var(--shadow-sm);
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
font-family: "Space Mono", monospace;
}
.retro-panel-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
}
.retro-panel-value {
font-size: 1.6rem;
font-weight: 700;
color: hsl(var(--foreground));
line-height: 1;
}
/* Footer */
.retro-footer {
margin-top: auto;
border-top: 3px solid hsl(var(--border));
background: hsl(var(--card));
padding: 1.5rem 0;
font-family: "Space Mono", monospace;
font-size: 0.85rem;
color: hsl(var(--muted-foreground));
text-align: center;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.retro-card,
.retro-btn,
.retro-icon-btn {
transition: none;
}
.retro-card:hover,
.retro-btn:hover,
.retro-icon-btn:hover {
transform: none;
}
}