@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica.woff2') format('woff2'),
url('../fonts/Helvetica.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica-Oblique.woff2') format('woff2'),
url('../fonts/Helvetica-Oblique.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica-Bold.woff2') format('woff2'),
url('../fonts/Helvetica-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
:root {
--bg-body-stripes: rgb(24, 25, 28);
--bg-body: rgb(20, 21, 24);
--bg-code: rgb(26, 27, 29);
--bg-filter: rgb(48, 49, 52);
--bg-main: rgb(32, 33, 36);
--bg-panel: rgb(40, 41, 44);
--color-aqua: rgb(66, 133, 244);
--color-bardo: rgb(211, 61, 47);
--color-black: rgb(0, 0, 0);
--color-border: rgb(95, 99, 104);
--color-dark: rgb(58, 59, 62);
--color-grapefruit: rgb(234, 67, 53);
--color-green: rgb(52, 168, 83);
--color-grey: rgb(189, 193, 198);
--color-lavender: rgb(150, 122, 220);
--color-mint: rgb(52, 168, 83);
--color-orange-hover: rgb(229, 137, 0);
--color-orange: rgb(255, 153, 0);
--color-red-light: rgb(234, 67, 53);
--color-ribbon2-end: rgb(2, 166, 45);
--color-ribbon2-start: rgb(8, 69, 46);
--color-ribbon3-end: rgb(255, 0, 168);
--color-ribbon3-start: rgb(51, 8, 103);
--color-rose: rgb(215, 112, 173);
--color-white: rgb(232, 234, 237);
--text-code: rgb(160, 212, 104);
--text-dim: rgb(154, 160, 166);
--shadow-def: 0 5px 10px rgba(0, 0, 0, 0.5);
--shadow-min: 0 2px 5px rgba(0, 0, 0, 0.3);
--shadow-elements: 0 0 5px rgba(229, 137, 0, 0.5);
--shadow-hover: 0 0 10px rgba(229, 137, 0, 0.5);
--shadow-ribbon: 0 3px 6px rgba(0, 0, 0, 0.8);
--shadow-ins: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
--shadow-cover:inset 0 0 10px rgba(0, 0, 0, 0.5);
--glow-def: 0 0 8px;
--radius-ribbon: 0 6px 6px 0;
--radius-cover: 20px;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: var(--bg-main);
}
::-webkit-scrollbar-track {
background-color: var(--bg-main);
}
::-webkit-scrollbar-thumb {
background-color: var(--color-orange);
border: 1px solid var(--color-orange);
border-radius: var(--radius-cover);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Helvetica', Helvetica, Arial, sans-serif;
color: var(--color-white);
background-color: var(--bg-body);
background-image: repeating-linear-gradient(45deg, var(--bg-body-stripes) 0px, var(--bg-body-stripes) 30px, var(--bg-body) 30px, var(--bg-body) 60px);
font-weight: 400;
margin: 0;
min-height: 100vh;
}
.app-wrapper {
max-width: 1280px;
width: 100%;
height: 100vh;
margin: 0 auto;
display: flex;
position: relative;
background-color: var(--bg-main);
border-left: 2px solid var(--color-dark);
border-right: 2px solid var(--color-dark);
overflow: hidden;
}
.white { color: var(--color-white); }
.orange { color: var(--color-orange); }
.red { color: var(--color-bardo); }
.spacer { flex: 10; }
.alt-link {
color: var(--color-orange);
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
}
.alt-link,
.mobile-app-title,
.app-title,
.nav-group-title,
.ribbon,
.ribbon2,
.ribbon3,
.game-info h3,
.game-info span.title-alt,
.meta-list li span,
.tag-badge,
.franchise-text {
font-weight: 700;
}
.mobile-header {
display: none;
background: var(--bg-code);
border-bottom: 2px solid var(--color-dark);
padding: 0 20px;
z-index: 1000;
width: 100%;
height: 60px;
}
.mobile-app-title {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-orange);
text-decoration: none;
}
.mobile-menu-btn {
background: var(--bg-filter);
color: var(--color-orange);
border: 2px solid var(--color-border);
padding: 8px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
transition: 0.3s;
}
.mobile-menu-btn:active {
border-color: var(--color-orange);
}
.help-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--color-orange);
font-size: 13px;
font-weight: bold;
cursor: help;
margin-left: 6px;
position: relative;
vertical-align: middle;
background: var(--bg-panel);
transition: 0.2s;
outline: none;
border: 1px solid var(--bg-main);
transform: rotate(45deg);
border-radius: 0;
}
.help-tip > span:not(.help-bubble) {
transform: rotate(-45deg);
}
.help-tip:hover,
.help-tip:focus {
background: var(--color-orange);
color: var(--color-black);
box-shadow: var(--shadow-hover);
}
.help-tip .help-bubble {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
transform-origin: bottom center;
width: 170px;
background: var(--bg-panel);
border: 1px solid var(--color-orange);
padding: 12px;
font-size: 13px;
line-height: 1.4;
color: var(--color-grey);
text-align: left;
font-weight: normal;
text-transform: none;
z-index: 1100;
transition: 0.3s ease;
pointer-events: none;
box-shadow: var(--shadow-def);
white-space: normal;
overflow-wrap: break-word;
}
.help-tip .help-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-left: 0;
border-width: 6px;
border-style: solid;
border-color: var(--color-orange) transparent transparent transparent;
}
.help-tip:hover .help-bubble,
.help-tip:focus .help-bubble {
visibility: visible;
opacity: 1;
bottom: 25px;
}
.sidebar {
width: 300px;
background: var(--bg-panel);
padding: 30px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
border-right: 3px solid var(--color-dark);
z-index: 20;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--color-border) var(--bg-panel);
}
.app-title {
font-size: 24px;
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-orange);
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.search-container {
position: relative;
margin-bottom: 10px;
}
.clear-search-btn {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-dim);
font-size: 22px;
font-weight: bold;
cursor: pointer;
display: none;
padding: 0 5px;
line-height: 1;
}
.clear-search-btn:hover {
color: var(--color-orange);
}
.search-bar {
width: 100%;
background: var(--color-dark);
border: 2px solid var(--color-border);
padding: 10px 40px 10px 15px;
color: var(--color-orange);
outline: none;
transition: 0.3s;
text-transform: uppercase;
}
.search-bar:focus {
border-color: var(--color-orange-hover);
box-shadow: 0 0 10px var(--color-orange);
background: var(--bg-code);
}
.reset-filters-btn, .info-block {
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
background: var(--bg-filter);
padding: 15px;
border: 2px solid var(--color-border);
transition: 0.2s;
flex: 1;
min-width: 200px;
height: auto;
color: var(--color-white);
box-shadow: var(--shadow-min);
text-align: left;
cursor: pointer;
outline: none;
}
.reset-filters-btn h3, .info-block h3 {
text-transform: uppercase;
font-size: 16px;
color: var(--text-dim);
margin: 0 0 8px 0;
padding-bottom: 5px;
border-bottom: 3px solid var(--color-dark);
transition: border-color 0.2s, color 0.2s;
width: 100%;
}
.reset-filters-btn p, .info-block p {
flex-grow: 1;
width: 100%;
font-size: 13px;
color: var(--text-dim);
line-height: 1.4;
transition: color 0.2s;
}
.reset-filters-btn:hover, .info-block:hover {
border-color: var(--color-orange);
background: var(--bg-main);
}
.reset-filters-btn:hover h3, .info-block:hover h3 {
border-bottom-color: var(--color-orange);
}
.reset-filters-btn:active, .info-block:active {
background: var(--color-orange);
border-color: var(--color-orange-hover);
}
.reset-filters-btn:active h3, .info-block:active h3 {
color: var(--bg-body);
border-bottom-color: var(--color-white);
}
.reset-filters-btn:active p, .info-block:active p {
color: var(--bg-body);
}
.nav-group-title {
font-size: 15px;
text-transform: uppercase;
color: var(--text-dim);
margin: 15px 0 5px 5px;
letter-spacing: 2px;
border-bottom: 2px solid var(--color-border);
cursor: pointer;
display: flex;
align-items: center;
padding-bottom: 5px;
user-select: none;
}
.nav-group-title::after {
content: '▼';
margin-left: auto;
margin-right: 5px;
font-size: 10px;
color: var(--color-orange);
transition: transform 0.2s ease;
}
.nav-group-title.collapsed::after {
transform: rotate(-90deg);
}
.filter-label {
display: flex;
align-items: center;
padding: 8px 12px;
cursor: pointer;
background: var(--bg-filter);
transition: 0.2s;
user-select: none;
border-left: 2px solid transparent;
}
.filter-label a {
text-decoration: none;
}
.filter-label input[type="checkbox"] {
display: none;
}
.filter-icon {
height: 14px;
width: auto;
vertical-align: middle;
margin: 0 3px 1px 3px;
}
.checkbox-custom {
width: 14px;
height: 14px;
border: 2px solid var(--color-orange);
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
background: var(--color-dark);
transform: rotate(45deg);
flex-shrink: 0;
}
.filter-label input:checked + .checkbox-custom {
border-color: var(--color-orange);
background: var(--color-white);
box-shadow: var(--shadow-elements);
}
.filter-label input:checked + .checkbox-custom::after {
content: '✔︎';
font-size: 10px;
color: var(--color-black);
font-weight: 900;
transform: rotate(-45deg);
display: block;
line-height: 1;
}
.filter-label input:checked ~ .label-text {
color: var(--color-orange);
}
.label-text {
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
color: var(--color-white);
transition: 0.2s;
}
.format {
font-size: 11px;
color: var(--text-dim);
margin-left: 5px;
}
.info-blocks-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
width: 100%;
}
.info-block img {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 12px;
flex-shrink: 0;
}
.info-block code {
display: block;
font-family: 'IBM Plex Mono','Consolas', 'Courier New', monospace;
font-size: 11px;
line-height: 1.4;
color: var(--color-orange);
padding-top: 8px;
margin-top: auto;
width: 100%;
background: var(--bg-code);
padding: 8px;
border: 1px solid var(--color-dark);
word-break: break-all;
box-shadow: var(--shadow-ins);
}
.info-block h3 {
text-transform: uppercase;
font-size: 16px;
color: var(--text-dim);
margin: 0 0 8px 0;
padding-bottom: 5px;
border-bottom: 3px solid var(--color-dark);
transition: border-color 0.2s;
width: 100%;
}
.info-block.info-block-orange {
background: var(--color-orange);
border: 2px solid var(--color-orange-hover);
}
.info-block.info-block-orange:hover {
background: var(--color-orange-hover);
border-color: var(--color-orange-hover);
}
.info-block.info-block-orange h3 {
color: var(--color-black);
border-bottom: 3px solid var(--bg-filter);
}
.info-block.info-block-orange:active h3 {
border-bottom-color: var(--bg-filter);
}
.info-block.info-block-orange p {
color: var(--color-dark);
}
.info-block.info-block-orange code {
color: var(--color-orange);
background: var(--color-black);
border-color: var(--color-black);
}
.main-content {
flex: 1;
padding: 40px;
overflow-y: scroll;
position: relative;
overflow-x: hidden;
}
.games-grid {
width: 100%;
margin-top: 30px;
}
.game-card {
width: calc(50% - 10px);
margin: 0 0 20px 0;
position: relative;
background-color: var(--bg-filter);
border: 2px solid var(--color-border);
transition: all 0.3s ease-in-out;
cursor: pointer;
height: auto;
min-height: 280px;
overflow: hidden;
box-shadow: var(--shadow-min);
}
.game-card:hover {
border-color: var(--color-orange);
z-index: 10;
}
.card-front, .card-back {
width: 100%;
height: 100%;
padding: 30px;
display: flex;
transition: opacity 0.3s ease;
}
.card-front {
opacity: 1;
flex-direction: column;
gap: 20px;
align-items: stretch;
}
.card-back {
flex-direction: column;
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
background: var(--bg-panel);
z-index: 50;
}
.game-card.active {
border-color: var(--color-orange);
z-index: 100;
}
.game-card.active .card-front {
opacity: 0;
pointer-events: none;
}
.game-card.active .card-back {
opacity: 1;
pointer-events: auto;
}
.description-text {
font-family: 'IBM Plex Mono','Consolas', 'Courier New', monospace;
font-size: 15px;
line-height: 1.8;
color: var(--color-white);
margin-top: 30px;
overflow-y: auto;
flex: 1;
}
.description-text::before {
content: 'info: ';
color: var(--color-orange);
font-weight: bold;
}
.close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: var(--bg-filter);
border: 2px solid var(--color-dark);
color: var(--text-dim);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s ease;
z-index: 60;
box-shadow: var(--shadow-min);
transform: rotate(45deg);
outline: none;
}
.close-btn span {
transform: rotate(-45deg);
font-size: 32px;
line-height: 1;
pointer-events: none;
}
.close-btn:hover {
border-color: var(--color-orange);
background: var(--bg-main);
color: var(--color-orange);
}
.close-btn:active {
border-color: var(--color-orange-hover);
background: var(--color-orange);
color: var(--bg-body);
}
.ribbon,
.ribbon2,
.ribbon3 {
transition: opacity 0.2s;
}
.game-card.active .ribbon,
.game-card.active .ribbon2,
.game-card.active .ribbon3,
.game-card.active .best-badge {
opacity: 0;
}
.ribbon {
position: absolute;
top: 25px; right: -42px;
width: 150px;
color: var(--color-dark);
text-align: center;
font-size: 14px;
line-height: 28px;
transform: rotate(45deg);
border: 1px solid var(--color-dark);
z-index: 20;
text-transform: uppercase;
background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--color-orange-hover) 8px, var(--color-orange-hover) 16px), var(--color-orange);
box-shadow: var(--shadow-min);
}
.ribbon2 {
border-radius: var(--radius-ribbon);
position: absolute;
top: 20px;
left: -12px;
background: linear-gradient(120deg, var(--color-ribbon2-start) 0%, var(--color-ribbon2-end) 100%);
color: var(--color-white);
padding: 6px 20px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 10;
box-shadow: var(--shadow-ribbon);
}
.ribbon3 {
position: absolute;
top: 20px;
left: -12px;
background: linear-gradient(120deg, var(--color-ribbon3-start) 0%, var(--color-ribbon3-end) 100%);
color: var(--color-white);
padding: 6px 20px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 10;
border-radius: var(--radius-ribbon);
box-shadow: var(--shadow-ribbon);
}
.best-badge {
position: absolute;
bottom: 30px;
right: 30px;
width: 120px;
height: 120px;
z-index: 30;
pointer-events: none;
filter: drop-shadow(0 5px 5px var(--color-black));
}
.best-badge img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cover-art {
width: 100%;
aspect-ratio: 4/3;
background: var(--color-dark);
position: relative;
overflow: hidden;
margin-bottom: 0;
border: 3px solid var(--color-dark);
border-radius: var(--radius-cover);
flex-shrink: 0;
align-self: center;
box-shadow: var(--shadow-cover);
}
.cover-art::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, var(--color-border) 4px);
pointer-events: none;
z-index: 2;
}
.game-card:hover .cover-art::after {
background: none;
}
.cover-placeholder {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
filter: grayscale(0.8) contrast(1.2) sepia(0.2); object-fit: cover;
display: block;
}
.game-card:hover .cover-placeholder {
transform: scale(1.05);
filter: grayscale(0) contrast(1.1) sepia(0);
}
.game-info {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1;
}
.game-info h3 {
font-size: 18px;
color: var(--color-orange);
margin: 0 0 8px 0;
text-transform: uppercase;
letter-spacing: 1px;
white-space: normal;
overflow: visible;
width: 100%;
}
.game-info h3::before {
content: '◆ ';
color: var(--color-white);
}
.game-info span.title-alt {
font-size: 16px;
color: var(--text-dim);
margin-bottom: 15px;
display: -webkit-box;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.3;
}
.meta-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
font-family: 'IBM Plex Mono','Consolas', 'Courier New', monospace;
font-size: 13px;
color: var(--color-grey);
display: flex;
flex-direction: column;
gap: 8px;
}
.meta-list li {
display: flex;
align-items: center;
gap: 8px;
}
.meta-list li::before {
content: '';
width: 5px;
height: 5px;
background-color: var(--color-orange);
box-shadow: var(--shadow-elements);
}
.meta-list li span {
color: var(--color-white);
}
.tags-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
.tag-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
text-transform: uppercase;
padding: 4px 10px;
background: var(--color-dark);
color: var(--text-dim);
border: 1px solid var(--color-border);
white-space: nowrap;
}
.tag-badge.platform {
color: var(--color-dark);
}
.tag-badge.platform.nes {
background: var(--color-grapefruit);
border-color: var(--color-grapefruit);
}
.tag-badge.platform.sega {
background: var(--color-aqua);
border-color: var(--color-aqua);
}
.tag-badge.platform.sega2 {
background: var(--color-aqua);
border-color: var(--color-aqua);
}
.tag-badge.platform.snes {
background: var(--text-dim);
border-color: var(--text-dim);
}
.tag-badge.platform.engine {
background: var(--color-white);
border-color: var(--color-white);
}
.tag-badge.platform.engine2 {
background: var(--color-white);
border-color: var(--color-white);
}
.tag-badge.platform.neogeo {
background: var(--color-mint);
border-color: var(--color-mint);
}
.tag-badge.platform.neogeo2 {
background: var(--color-mint);
border-color: var(--color-mint);
}
.tag-badge img {
height: 14px;
width: auto;
display: block;
}
.tag-badge.icon-only {
padding: 4px 6px;
}
.tag-badge.players {
color: var(--color-white);
}
.tag-badge.format-tag {
color: var(--color-orange);
}
.sys-logs {
margin-top: auto;
padding-top: 12px;
margin-top: 20px;
width: 100%;
background: var(--bg-code);
padding: 12px;
border: 1px solid var(--color-dark);
box-shadow: var(--shadow-ins);
}
.sys-logs code {
display: block;
font-family: 'IBM Plex Mono','Consolas', 'Courier New', monospace;
font-size: 11px;
line-height: 1.5; color: var(--text-code); opacity: 0.7;
}
.scroll-top-btn {
position: sticky;
bottom: 40px;
margin-left: auto;
margin-right: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
z-index: 800;
background: var(--bg-filter);
border: 2px solid var(--color-dark);
color: var(--text-dim);
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.2s, background-color 0.2s, color 0.2s;
transform: translateY(150px) rotate(45deg);
opacity: 0;
pointer-events: none;
box-shadow: var(--shadow-min);
outline: none;
}
.scroll-top-btn span {
transform: rotate(-45deg);
font-size: 30px;
line-height: 1;
pointer-events: none;
}
.scroll-top-btn.visible {
transform: translateY(0) rotate(45deg);
opacity: 1;
pointer-events: auto;
}
.scroll-top-btn:hover {
border-color: var(--color-orange);
background: var(--bg-main);
color: var(--color-orange);
}
.scroll-top-btn:active {
border-color: var(--color-orange-hover);
background: var(--color-orange);
color: var(--bg-body);
}
.filter-status {
margin: 0;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
color: var(--text-dim);
}
.grid-no-results {
display: none;
width: 100%;
text-align: center;
padding-top: 50px;
}
@keyframes blink {
50% { opacity: 0; }
}
.spoiler {
margin: 30px 0 0 0;
}
.spoiler-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
cursor: default;
list-style: none;
background: var(--bg-panel);
border: 2px solid var(--color-dark);
transition: border-color 0.2s;
box-shadow: var(--shadow-min);
}
.spoiler[open] .spoiler-header {
border-color: var(--color-orange);
}
.spoiler-header::-webkit-details-marker {
display: none;
}
.spoiler-button {
font-family: inherit;
cursor: pointer;
text-decoration: none;
color: var(--color-orange);
background: var(--bg-filter);
padding: 8px 15px;
border: 2px solid var(--color-border);
font-weight: 700;
text-transform: uppercase;
transition: 0.2s;
font-size: 14px;
white-space: nowrap;
box-shadow: var(--shadow-min);
}
.spoiler-button:hover {
border-color: var(--color-orange);
background: var(--bg-main);
color: var(--color-orange);
}
.spoiler-button:active {
border-color: var(--color-orange-hover);
background: var(--color-orange);
color: var(--bg-body);
}
.spoiler-content {
padding: 0 30px 10px 30px;
}
.franchise-filters {
display: flex;
flex-wrap: wrap;
gap: 15px 10px;
margin-top: 15px;
margin-left: -16px;
}
.franchise-btn {
display: inline-flex;
cursor: pointer;
user-select: none;
transition: filter 0.2s;
}
.franchise-btn input {
display: none;
}
.franchise-text {
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 15px;
margin: 0 16px;
background: var(--bg-main);
border-top: 2px solid var(--color-dark);
border-bottom: 2px solid var(--color-dark);
color: var(--text-dim);
font-size: 13px;
text-transform: uppercase;
transition: all 0.2s;
box-sizing: border-box;
z-index: 1;
background: var(--bg-filter);
}
.franchise-text::before,
.franchise-text::after {
content: '';
position: absolute;
top: 50%;
width: 22.6px;
height: 22.6px;
background: inherit;
transition: inherit;
z-index: -1;
box-sizing: border-box;
}
.franchise-text::before {
left: 0;
transform: translate(-50%, -50%) rotate(45deg);
border-bottom: 2px solid var(--color-dark);
border-left: 2px solid var(--color-dark);
}
.franchise-text::after {
right: 0;
transform: translate(50%, -50%) rotate(45deg);
border-top: 2px solid var(--color-dark);
border-right: 2px solid var(--color-dark);
}
.franchise-btn:hover {
filter: drop-shadow(0 0 5px rgba(229, 137, 0, 0.8));
}
.franchise-btn:hover .franchise-text {
border-color: var(--color-orange);
color: var(--color-orange);
}
.franchise-btn:hover .franchise-text::before {
border-bottom-color: var(--color-orange);
border-left-color: var(--color-orange);
}
.franchise-btn:hover .franchise-text::after {
border-top-color: var(--color-orange);
border-right-color: var(--color-orange);
}
.franchise-btn input:checked + .franchise-text {
background: var(--color-orange);
border-color: var(--color-orange-hover);
color: var(--color-black);
}
.franchise-btn input:checked + .franchise-text::before {
border-bottom-color: var(--color-orange-hover);
border-left-color: var(--color-orange-hover);
}
.franchise-btn input:checked + .franchise-text::after {
border-top-color: var(--color-orange-hover);
border-right-color: var(--color-orange-hover);
}
.franchise-btn input:active + .franchise-text {
background: var(--color-orange-hover);
border-color: var(--color-orange);
color: var(--color-black);
}
.franchise-btn input:active + .franchise-text::before {
border-bottom-color: var(--color-orange);
border-left-color: var(--color-orange);
}
.franchise-btn input:active + .franchise-text::after {
border-top-color: var(--color-orange);
border-right-color: var(--color-orange);
}
.large-cards-section {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 30px;
margin-bottom: 40px;
width: 100%;
}
.mini-card {
justify-content: space-between;
padding: 20px;
cursor: default;
list-style: none;
background: var(--bg-panel);
border: 2px solid var(--color-dark);
transition: border-color 0.2s;
box-shadow: var(--shadow-min);
}
.mini-card:hover {
border-color: var(--color-orange);
}
.large-card {
background-color: var(--bg-filter);
border: 2px solid var(--color-border);
padding: 30px;
box-shadow: var(--shadow-min);
transition: border-color 0.3s ease-in-out;
}
.large-card:hover {
border-color: var(--color-orange);
}
.large-card h2 {
font-size: 22px;
color: var(--color-orange);
margin: 0 0 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.large-card .subtitle {
font-family: 'IBM Plex Mono','Consolas', 'Courier New', monospace;
font-size: 14px;
color: var(--text-dim);
margin-bottom: 25px;
text-transform: uppercase;
}
.large-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: start;
}
.large-card .text-content {
font-family: 'IBM Plex Mono','Consolas', 'Courier New', monospace;
font-size: 15px;
line-height: 1.8;
color: var(--color-white);
}
.large-card .img-content img {
width: 100%;
height: auto;
border: 3px solid var(--color-dark);
border-radius: var(--radius-cover);
box-shadow: var(--shadow-cover);
object-fit: cover;
display: block;
}
@media (max-width: 850px) {
.app-wrapper {
flex-direction: column;
}
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar {
position: absolute;
top: 60px;
left: -100%;
width: 100%;
height: calc(100vh - 60px);
transition: left 0.3s ease;
z-index: 990;
}
.sidebar.open {
left:0;
}
.main-content {
padding: 20px;
}
.card-front {
padding: 20px;
}
.info-block {
flex-basis: calc(50% - 7.5px);
min-width: 0;
}
.info-block:first-child {
flex-basis: 100%;
}
.scroll-top-btn {
bottom: 20px;
}
.large-card-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.game-card {
width: 100%;
}
}
@media (max-width: 550px) {
.best-badge {
bottom: 20px;
right: 20px;
}
}