:root {
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #eef1f5;
--border: #dde2ea;
--text: #111621;
--muted: #5b6675;
--green: #0fb567;
--cyan: #0aa5cc;
--amber: #d98200;
--red: #e0483d;
--purple: #7d54e0;
--ink: #04140b;
--shadow:
0 1px 2px rgba(16, 22, 33, 0.06), 0 10px 26px rgba(16, 22, 33, 0.07);
--disp: "Chakra Petch", system-ui, sans-serif;
--body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--maxw: 1240px;
--r: 12px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0b0e12;
--surface: #141922;
--surface-2: #1b2330;
--border: #26303f;
--text: #eaf0f6;
--muted: #8b97a6;
--green: #2fe38a;
--cyan: #34d1ff;
--amber: #ffb020;
--red: #ff5a4d;
--purple: #a98bff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.4);
}
}
:root[data-theme="dark"] {
--bg: #0b0e12;
--surface: #141922;
--surface-2: #1b2330;
--border: #26303f;
--text: #eaf0f6;
--muted: #8b97a6;
--green: #2fe38a;
--cyan: #34d1ff;
--amber: #ffb020;
--red: #ff5a4d;
--purple: #a98bff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.4);
} .c-news {
--cat: var(--cyan);
}
.c-review {
--cat: var(--amber);
}
.c-upcoming {
--cat: var(--green);
}
.c-hardware {
--cat: var(--purple);
}
.c-guide {
--cat: #ff8fb0;
}
.c-horror {
--cat: #ff6a4d;
}
.cat-color {
--cat: var(--green);
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--bg);
}
body {
margin: 0;
background: transparent;
color: var(--text);
font-family: var(--body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
} #mlg-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.55;
}
@media (max-width: 767px) {
html,
body {
background: var(--bg);
}
#mlg-bg {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
#mlg-bg {
display: none;
}
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--cyan);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5 {
font-family: var(--body);
line-height: 1.2;
margin: 0;
font-weight: 700;
text-wrap: balance;
}
p {
margin: 0 0 1em;
}
button {
font-family: var(--body);
cursor: pointer;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 2px;
border-radius: 4px;
}
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 18px;
}
.eyebrow {
font-family: var(--disp);
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ico {
width: 1.15em;
height: 1.15em;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
vertical-align: -0.15em;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--green);
color: var(--ink);
padding: 10px 16px;
z-index: 200;
border-radius: 0 0 8px 0;
}
.skip-link:focus {
left: 0;
}
.hide {
display: none !important;
} .art {
position: absolute;
inset: 0;
z-index: 0;
}
.art::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
120% 90% at 15% 10%,
color-mix(in srgb, var(--cat, var(--green)) 55%, transparent),
transparent 60%
),
radial-gradient(
110% 80% at 88% 25%,
color-mix(in srgb, var(--cyan) 30%, transparent),
transparent 55%
),
linear-gradient(180deg, #0c1016, #05070a);
}
.art::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(
color-mix(in srgb, #fff 6%, transparent) 1px,
transparent 1px
),
linear-gradient(
90deg,
color-mix(in srgb, #fff 6%, transparent) 1px,
transparent 1px
);
background-size: 34px 34px;
mask: linear-gradient(180deg, transparent, #000 88%);
opacity: 0.5;
} #progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--green), var(--cyan));
z-index: 90;
}
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.hrow {
display: flex;
align-items: center;
gap: 18px;
height: 62px;
}
.brand {
font-family: var(--disp);
font-weight: 700;
font-size: 1.28rem;
letter-spacing: 0.02em;
color: var(--text);
display: flex;
align-items: center;
gap: 9px;
}
.brand img,
.brand .custom-logo {
max-height: 44px;
width: auto;
height: auto;
}
.brand .custom-logo-link {
display: inline-flex;
align-items: center;
line-height: 0;
}
.brand .lv {
font-family: var(--mono);
font-size: 0.66rem;
background: var(--green);
color: var(--ink);
padding: 3px 6px;
border-radius: 5px;
font-weight: 700;
}
.brand b {
color: var(--green);
}
.brand .lv {
min-width: 46px;
text-align: center;
transition:
background 0.1s,
color 0.1s;
}
.brand .lv.glitch {
background: var(--red);
color: #fff;
transform: skewX(-6deg);
}
.main-nav {
display: flex;
gap: 2px;
margin-left: 6px;
}
.main-nav ul {
list-style: none;
display: flex;
gap: 2px;
margin: 0;
padding: 0;
}
.main-nav li {
position: relative;
}
.main-nav a {
color: var(--muted);
font-weight: 600;
font-size: 0.92rem;
font-family: var(--disp);
padding: 8px 11px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.main-nav a:hover,
.main-nav .current-menu-item > a {
color: var(--text);
background: var(--surface-2);
text-decoration: none;
}
.main-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: 0.16s;
z-index: 70;
flex-direction: column;
}
.main-nav li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.main-nav .sub-menu a {
width: 100%;
}
.htools {
margin-left: auto;
display: flex;
gap: 9px;
align-items: center;
}
.searchbox {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 9px;
padding: 0 12px;
height: 38px;
width: 200px;
transition:
width 0.2s,
border-color 0.2s;
}
.searchbox:focus-within {
border-color: var(--green);
width: 240px;
}
.searchbox input {
border: none;
background: none;
outline: none;
color: var(--text);
font-family: var(--body);
width: 100%;
font-size: 0.88rem;
}
.searchbox .ico {
color: var(--muted);
}
.icon-btn {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
width: 38px;
height: 38px;
border-radius: 9px;
display: grid;
place-items: center;
}
.icon-btn:hover {
border-color: var(--green);
color: var(--green);
}
.btn {
background: var(--green);
color: var(--ink);
border: none;
font-weight: 700;
padding: 9px 15px;
border-radius: 9px;
font-size: 0.9rem;
display: inline-flex;
gap: 7px;
align-items: center;
font-family: var(--disp);
}
.btn:hover {
filter: brightness(1.05);
text-decoration: none;
}
.nav-toggle {
display: none;
}
@media (max-width: 820px) {
.main-nav,
.searchbox {
display: none;
}
.nav-toggle {
display: grid;
}
.main-nav.open {
display: block;
position: absolute;
top: 62px;
left: 0;
right: 0;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 12px;
}
.main-nav.open ul {
flex-direction: column;
}
.main-nav.open .mobile-search {
display: flex;
width: 100%;
margin: 0 0 12px;
}
}
.mobile-search {
display: none;
} .ticker {
display: flex;
gap: 14px;
align-items: center;
border-bottom: 1px solid var(--border);
font-size: 0.82rem;
padding: 9px 0;
overflow: hidden;
}
.ticker .tag {
font-family: var(--disp);
font-weight: 700;
color: var(--ink);
background: var(--amber);
padding: 3px 8px;
border-radius: 5px;
text-transform: uppercase;
font-size: 0.66rem;
letter-spacing: 0.08em;
flex: none;
display: flex;
gap: 5px;
align-items: center;
}
.ticker .run {
display: flex;
gap: 10px;
white-space: nowrap;
animation: tk 30s linear infinite;
}
.ticker .run a {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--green);
border-radius: 7px;
padding: 4px 12px;
color: var(--text);
font-weight: 600;
}
.ticker .run a::before {
content: "";
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--green);
flex: none;
}
.ticker .run a:nth-child(3n + 1) {
border-left-color: var(--cyan);
}
.ticker .run a:nth-child(3n + 1)::before {
background: var(--cyan);
}
.ticker .run a:nth-child(3n + 2) {
border-left-color: var(--amber);
}
.ticker .run a:nth-child(3n + 2)::before {
background: var(--amber);
}
.ticker .run a:hover {
border-color: var(--muted);
background: var(--surface);
}
@keyframes tk {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
} .hero {
display: grid;
grid-template-columns: 1.65fr 1fr;
gap: 22px;
padding: 24px 0;
}
@media (max-width: 860px) {
.hero {
grid-template-columns: 1fr;
}
}
.carousel {
position: relative;
border-radius: var(--r);
overflow: hidden;
border: 1px solid var(--border);
min-height: 452px;
}
.slides {
display: flex;
height: 100%;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide {
position: relative;
min-width: 100%;
min-height: 452px;
isolation: isolate;
}
.slide > a.cover {
position: absolute;
inset: 0;
z-index: 3;
}
.slide > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
} .slide .byline .avatar {
position: static;
width: 26px;
height: 26px;
flex: none;
}
.slide .byline .avatar img {
position: static;
inset: auto;
width: 100%;
height: 100%;
object-fit: cover;
z-index: auto;
}
.slide .grad {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 28%, rgba(3, 5, 9, 0.88));
z-index: 1;
}
.slide .in {
position: absolute;
bottom: 0;
padding: 28px;
z-index: 2;
color: #fff;
pointer-events: none;
}
.slide .in a {
pointer-events: auto;
}
.badge-cat {
display: inline-flex;
gap: 5px;
align-items: center;
font-family: var(--disp);
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink);
background: var(--cat, var(--green));
padding: 5px 9px;
border-radius: 6px;
}
.slide h2 {
font-family: var(--body);
font-size: clamp(1.7rem, 3.3vw, 2.45rem);
margin: 12px 0 8px;
color: #fff;
font-weight: 800;
}
.slide h2 a {
color: #fff;
}
.slide p {
color: #cdd5df;
max-width: 560px;
margin: 0 0 14px;
}
.byline {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.82rem;
color: #aeb8c4;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green), var(--cyan));
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-weight: 700;
font-family: var(--mono);
font-size: 0.72rem;
line-height: 1;
text-align: center;
letter-spacing: 0;
overflow: hidden;
flex: none;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.score-badge {
position: absolute;
bottom: 18px;
right: 18px;
z-index: 3;
width: 60px;
height: 60px;
border-radius: 14px;
background: color-mix(in srgb, var(--amber) 22%, #05070a);
border: 2px solid var(--amber);
display: grid;
place-items: center;
font-family: var(--mono);
font-weight: 700;
color: var(--amber);
font-size: 1.3rem;
box-shadow: 0 0 22px color-mix(in srgb, var(--amber) 40%, transparent);
}
.score-badge small {
display: block;
font-size: 0.48rem;
letter-spacing: 0.1em;
color: #fff;
text-align: center;
}
.cbtn {
position: absolute;
top: 14px;
z-index: 4;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(5, 7, 10, 0.55);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
display: grid;
place-items: center;
backdrop-filter: blur(4px);
}
.cbtn:hover {
background: rgba(5, 7, 10, 0.8);
}
.cbtn.prev {
left: 14px;
}
.cbtn.next {
right: 14px;
}
.cbtn.pause {
right: 60px;
font-size: 12px;
line-height: 1;
}
.cbtn.pause[aria-pressed="true"] {
background: rgba(15, 181, 103, 0.85);
border-color: rgba(15, 181, 103, 0.6);
}
.dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: 7px;
}
.dots button {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
border: none;
padding: 0;
}
.dots button.on {
background: var(--green);
width: 22px;
border-radius: 5px;
}
.hero-stack {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 15px;
min-height: 452px;
}
@media (max-width: 860px) {
.hero-stack {
grid-template-rows: none;
min-height: 0;
}
}
.mini {
position: relative;
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
box-shadow: var(--shadow);
min-height: 96px;
} .mini .thumb {
position: absolute;
inset: 0;
width: 66%;
z-index: 0;
-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
}
.mini .thumb img,
.mini .thumb .art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .mini .mb {
position: relative;
z-index: 1;
padding: 12px 15px 12px 42%;
min-height: 96px;
display: flex;
flex-direction: column;
justify-content: center;
}
.mini .badge-cat {
align-self: flex-start;
font-size: 0.58rem;
padding: 3px 7px;
}
.mini h3 {
font-size: 1rem;
margin: 8px 0 0;
color: var(--text);
font-family: var(--body);
text-shadow: 0 1px 6px color-mix(in srgb, var(--surface) 80%, transparent);
}
.mini h3 a {
color: var(--text);
}
.mini .m {
font-size: 0.74rem;
color: var(--muted);
margin-top: 6px;
font-family: var(--mono);
display: flex;
gap: 6px;
align-items: center;
} .sechead {
display: flex;
align-items: center;
gap: 14px;
margin: 30px 0 18px;
flex-wrap: wrap;
}
.sechead h2 {
font-size: 1.32rem;
display: flex;
gap: 8px;
align-items: center;
}
.sechead h2 .ico {
color: var(--green);
}
.sechead h2 b {
color: var(--green);
}
.tabs {
display: flex;
gap: 6px;
margin-left: auto;
flex-wrap: wrap;
}
.tab {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
border-radius: 999px;
padding: 7px 14px;
font-weight: 600;
font-size: 0.85rem;
font-family: var(--disp);
}
.tab[aria-selected="true"] {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.tab:hover {
color: var(--text);
} .layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 38px;
padding-bottom: 30px;
}
@media (max-width: 940px) {
.layout {
grid-template-columns: 1fr;
}
} .cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
gap: 20px;
}
.card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
transition:
transform 0.18s,
border-color 0.18s;
}
.card:hover {
transform: translateY(-4px);
border-color: var(--cat, var(--green));
}
.card .top {
position: relative;
aspect-ratio: 16/9;
background: var(--surface-2);
}
.card .top img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .top .badge-cat {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
}
.card .cscore {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
font-family: var(--mono);
font-weight: 700;
font-size: 0.8rem;
color: var(--amber);
background: rgba(5, 7, 10, 0.62);
border: 1px solid var(--amber);
padding: 2px 8px;
border-radius: 6px;
}
.card .body {
padding: 14px 15px 15px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}
.card h3 {
font-size: 1.05rem;
font-family: var(--body);
}
.card h3 a {
color: var(--text);
}
.card h3 a:hover {
color: var(--cat, var(--green));
}
.card .excerpt {
font-size: 0.86rem;
color: var(--muted);
margin: 0;
}
.card .foot {
margin-top: auto;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.75rem;
color: var(--muted);
font-family: var(--mono);
}
.card .foot .mi {
display: flex;
gap: 5px;
align-items: center;
}
.loadmore {
display: flex;
justify-content: center;
margin: 26px 0;
} .mlg-ad {
margin: 22px 0;
border: 1px dashed var(--border);
border-radius: var(--r);
min-height: 100px;
display: grid;
place-items: center;
color: var(--muted);
background: var(--surface-2);
text-align: center;
overflow: hidden;
}
.mlg-ad:has(iframe),
.mlg-ad:has(ins),
.mlg-ad:has(img) {
border-style: solid;
background: transparent;
min-height: 0;
}
.mlg-ad .lbl {
font-family: var(--disp);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mlg-ad:has(iframe) .lbl,
.mlg-ad:has(ins) .lbl {
display: none;
} .sidebar .box,
.widget {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px;
margin-bottom: 22px;
box-shadow: var(--shadow);
}
.sidebar .sticky {
position: sticky;
top: 80px;
}
.widget-title,
.box h3.bh {
font-size: 1rem;
font-family: var(--body);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.box h3.bh .ico {
color: var(--green);
}
.rank {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed var(--border);
}
.rank:last-child {
border-bottom: none;
}
.rank .n {
font-family: var(--mono);
font-weight: 700;
color: var(--green);
font-size: 1.1rem;
width: 22px;
}
.rank a {
color: var(--text);
font-weight: 600;
font-size: 0.9rem;
line-height: 1.35;
}
.rank span {
display: block;
font-size: 0.72rem;
color: var(--muted);
font-family: var(--mono);
margin-top: 3px;
}
.hub {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 11px 0;
border-bottom: 1px dashed var(--border);
color: var(--text);
font-weight: 600;
}
.hub:last-child {
border-bottom: none;
}
.hub .ico {
color: var(--green);
margin-top: 2px;
}
.hub span {
display: block;
font-size: 0.72rem;
color: var(--muted);
font-family: var(--mono);
font-weight: 400;
margin-top: 2px;
}
.news-box {
background: linear-gradient(
160deg,
color-mix(in srgb, var(--green) 16%, var(--surface)),
var(--surface)
);
border-color: color-mix(in srgb, var(--green) 30%, var(--border));
}
.news-box p {
font-size: 0.87rem;
color: var(--muted);
margin: 0 0 12px;
}
.news-box form {
display: flex;
gap: 6px;
flex-wrap: nowrap;
}
.news-box input {
flex: 1 1 auto;
min-width: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 9px;
padding: 8px 10px;
font-size: 0.82rem;
color: var(--text);
font-family: var(--body);
}
.news-box form .btn {
flex: none;
padding: 8px 12px;
}
.news-box input:focus {
outline: none;
border-color: var(--green);
} .breadcrumb {
display: flex;
gap: 8px;
align-items: center;
font-size: 0.8rem;
color: var(--muted);
padding: 16px 0 4px;
flex-wrap: wrap;
}
.breadcrumb a {
color: var(--muted);
}
.breadcrumb a:hover {
color: var(--text);
}
.breadcrumb .ico {
width: 0.9em;
height: 0.9em;
}
.archive-head {
padding: 22px 0 8px;
}
.archive-head .eyebrow {
color: var(--green);
}
.archive-head h1 {
font-size: 2rem;
margin: 6px 0;
}
.archive-head p {
color: var(--muted);
max-width: 640px;
} .artlayout {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 330px;
gap: 26px;
padding: 8px 0 40px;
}
@media (max-width: 1040px) {
.artlayout {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
@media (max-width: 940px) {
.artlayout {
grid-template-columns: 1fr;
}
}
.share-rail {
position: sticky;
top: 80px;
height: max-content;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
}
@media (max-width: 1040px) {
.share-rail {
display: none;
}
}
.share-rail button,
.share-rail a {
width: 44px;
height: 44px;
border-radius: 11px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
display: grid;
place-items: center;
box-shadow: var(--shadow);
}
.share-rail button:hover,
.share-rail a:hover {
color: var(--green);
border-color: var(--green);
}
.share-rail .cnt {
font-family: var(--mono);
font-size: 0.6rem;
color: var(--muted);
margin-top: -4px;
}
.post-full {
min-width: 0;
max-width: 760px;
}
.post-full h1.title {
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
margin: 14px 0 10px;
font-weight: 800;
}
.post-full .dek {
font-size: 1.15rem;
color: var(--muted);
margin: 0 0 18px;
line-height: 1.5;
}
.metarow {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 14px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.author-chip {
display: flex;
align-items: center;
gap: 10px;
}
.author-chip .avatar {
width: 40px;
height: 40px;
font-size: 0.85rem;
}
.author-chip b {
font-weight: 600;
font-size: 0.9rem;
}
.author-chip span {
display: block;
font-size: 0.76rem;
color: var(--muted);
}
.metarow .m {
font-size: 0.8rem;
color: var(--muted);
display: flex;
gap: 5px;
align-items: center;
font-family: var(--mono);
}
.metarow .sharemini {
margin-left: auto;
display: flex;
gap: 7px;
}
.metarow .sharemini a {
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--muted);
display: grid;
place-items: center;
}
.metarow .sharemini a:hover {
color: var(--text);
border-color: var(--green);
}
.hero-figure {
aspect-ratio: 16/9;
border-radius: var(--r);
margin: 20px 0;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
isolation: isolate;
}
.hero-figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-figure figcaption {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px 14px 10px;
background: linear-gradient(transparent, rgba(3, 5, 9, 0.7));
color: #cdd5df;
font-size: 0.76rem;
z-index: 1;
}
.toc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
margin: 22px 0;
}
.toc h4 {
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
display: flex;
gap: 7px;
align-items: center;
}
.toc ol {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 7px;
}
.toc a {
color: var(--text);
font-size: 0.92rem;
}
.toc a:hover {
color: var(--green);
}
.entry {
font-size: 1.08rem;
}
.entry p {
margin: 0 0 1.25em;
}
.entry h2 {
font-size: 1.6rem;
margin: 1.6em 0 0.5em;
scroll-margin-top: 80px;
}
.entry h3 {
font-size: 1.25rem;
margin: 1.4em 0 0.4em;
}
.entry a {
color: var(--cyan);
text-decoration: underline;
text-underline-offset: 2px;
}
.entry ul,
.entry ol {
margin: 0 0 1.25em;
padding-left: 22px;
}
.entry li {
margin: 0.3em 0;
}
.entry blockquote {
margin: 1.4em 0;
padding: 14px 18px;
border-left: 3px solid var(--green);
background: var(--surface);
border-radius: 0 var(--r) var(--r) 0;
color: var(--muted);
font-style: italic;
}
.entry img {
border-radius: var(--r);
margin: 1.5em 0;
}
.entry iframe,
.entry video,
.entry .wp-block-embed iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: var(--r);
margin: 1.5em 0;
}
.entry .wp-block-embed {
margin: 1.5em 0;
}
.entry .wp-block-embed__wrapper {
max-width: 100%;
}
.entry figure {
margin: 1.5em 0;
}
.entry table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
}
.entry th,
.entry td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
} .review-box {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--amber);
border-radius: var(--r);
padding: 22px;
margin: 28px 0;
box-shadow: var(--shadow);
}
.review-box .rtop {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 16px;
}
.review-box .rscore {
width: 78px;
height: 78px;
border-radius: 16px;
background: color-mix(in srgb, var(--amber) 16%, var(--surface));
border: 2px solid var(--amber);
display: grid;
place-items: center;
font-family: var(--mono);
font-weight: 700;
color: var(--amber);
font-size: 1.7rem;
line-height: 1;
flex: none;
}
.review-box .rscore small {
font-size: 0.5rem;
letter-spacing: 0.1em;
color: var(--muted);
display: block;
text-align: center;
margin-top: 2px;
}
.review-box .rtop h3 {
font-size: 1.2rem;
}
.review-box .rtop p {
margin: 3px 0 0;
color: var(--muted);
font-size: 0.9rem;
}
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 560px) {
.pros-cons {
grid-template-columns: 1fr;
}
}
.pros-cons h4 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
display: flex;
gap: 7px;
align-items: center;
margin-bottom: 8px;
}
.pros-cons .pros h4 {
color: var(--green);
}
.pros-cons .cons h4 {
color: var(--red);
}
.pros-cons ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.9rem;
}
.pros-cons li {
display: flex;
gap: 8px;
align-items: flex-start;
}
.pros-cons .pros .ico {
color: var(--green);
}
.pros-cons .cons .ico {
color: var(--red);
}
.tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 24px 0;
}
.tags a {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--muted);
padding: 5px 12px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 500;
}
.tags a:hover {
color: var(--text);
border-color: var(--green);
text-decoration: none;
}
.sharebar {
display: flex;
gap: 10px;
align-items: center;
padding: 18px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 8px 0 26px;
flex-wrap: wrap;
}
.sharebar .grow {
margin-left: auto;
display: flex;
gap: 8px;
}
.sharebar a {
display: flex;
gap: 7px;
align-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 8px 13px;
font-weight: 600;
font-size: 0.85rem;
}
.sharebar a:hover {
border-color: var(--green);
color: var(--green);
text-decoration: none;
}
.author-box {
display: flex;
gap: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 20px;
margin: 26px 0;
box-shadow: var(--shadow);
}
.author-box .avatar {
width: 66px;
height: 66px;
font-size: 1.3rem;
flex: none;
}
.author-box h4 {
font-size: 1.05rem;
}
.author-box .role {
color: var(--green);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 2px 0 8px;
}
.author-box p {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
}
.author-box .links {
display: flex;
gap: 12px;
margin-top: 10px;
}
.author-box .links a {
color: var(--muted);
font-size: 0.82rem;
display: flex;
gap: 5px;
align-items: center;
}
.author-box .links a:hover {
color: var(--text);
} .relhead {
display: flex;
align-items: center;
gap: 10px;
margin: 34px 0 16px;
}
.relhead h2 {
font-size: 1.35rem;
}
.relhead .ico {
color: var(--green);
}
.related {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 640px) {
.related {
grid-template-columns: 1fr;
}
} .comments {
margin: 34px 0;
}
.comments h2 {
font-size: 1.3rem;
margin-bottom: 14px;
display: flex;
gap: 8px;
align-items: center;
}
.comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.comment-list .children {
list-style: none;
margin: 0 0 0 40px;
padding: 0;
}
.comment-body {
display: flex;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--border);
}
.comment-body b {
font-size: 0.9rem;
}
.comment-body .ct {
font-size: 0.72rem;
color: var(--muted);
font-family: var(--mono);
}
.comment-body p {
margin: 6px 0 0;
font-size: 0.92rem;
}
.comment-form {
display: grid;
gap: 12px;
margin-bottom: 22px;
}
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px;
color: var(--text);
font-family: var(--body);
}
.comment-form textarea:focus,
.comment-form input:focus {
outline: none;
border-color: var(--green);
} .pagination {
display: flex;
gap: 8px;
justify-content: center;
margin: 34px 0;
flex-wrap: wrap;
} .pagination .nav-links {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.pagination .page-numbers {
display: grid;
place-items: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text);
font-weight: 600;
font-family: var(--mono);
}
.pagination .current {
background: var(--green);
color: var(--ink);
border-color: var(--green);
}
.pagination a.page-numbers:hover {
border-color: var(--green);
text-decoration: none;
} .center-state {
text-align: center;
padding: 64px 0;
}
.center-state .big {
font-family: var(--mono);
font-size: 5rem;
font-weight: 700;
color: var(--green);
line-height: 1;
}
.center-state h1 {
font-size: 1.8rem;
margin: 10px 0;
}
.center-state p {
color: var(--muted);
max-width: 440px;
margin: 0 auto 20px;
}
.center-state form {
max-width: 420px;
margin: 0 auto;
} .site-footer {
border-top: 1px solid var(--border);
background: var(--surface);
padding: 40px 0 46px;
margin-top: 20px;
}
.fgrid {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
color: var(--muted);
font-size: 0.9rem;
}
.fgrid nav {
display: flex;
gap: 14px;
margin-left: auto;
flex-wrap: wrap;
}
.fgrid nav a {
color: var(--muted);
display: flex;
gap: 6px;
align-items: center;
}
.fgrid nav a:hover {
color: var(--text);
}
.copyline {
color: var(--muted);
font-size: 0.8rem;
margin-top: 16px;
font-family: var(--mono);
} #toast {
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--text);
color: var(--bg);
padding: 11px 18px;
border-radius: 10px;
font-weight: 600;
font-size: 0.88rem;
opacity: 0;
pointer-events: none;
transition: 0.25s;
z-index: 100;
box-shadow: var(--shadow);
display: flex;
gap: 8px;
align-items: center;
}
#toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.ticker .run,
.slides,
.card {
animation: none !important;
transition: none !important;
}
} .cal-head-wrap {
padding-bottom: 4px;
}
.hide {
display: none !important;
} .cal-toolbar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 8px 0 18px;
}
.cal-views {
display: flex;
gap: 4px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px;
}
.cal-vbtn {
border: none;
background: none;
color: var(--muted);
font-family: var(--disp);
font-weight: 600;
font-size: 0.85rem;
padding: 7px 15px;
border-radius: 999px;
display: flex;
gap: 6px;
align-items: center;
}
.cal-vbtn.on {
background: var(--green);
color: var(--ink);
}
.cal-legend {
margin-left: auto;
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 0.76rem;
color: var(--muted);
font-family: var(--mono);
}
.cal-legend .lg {
display: flex;
gap: 6px;
align-items: center;
}
.cal-legend .lg i {
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--cat, var(--green));
display: block;
} .cal-monthbar {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.cal-nav {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
display: grid;
place-items: center;
box-shadow: var(--shadow);
}
.cal-nav:hover {
border-color: var(--green);
color: var(--green);
text-decoration: none;
}
.cal-nav .ico {
width: 1.5em;
height: 1.5em;
stroke-width: 2.4;
}
.cal-mtitle {
text-align: center;
min-width: 200px;
}
.cal-mtitle h2 {
font-family: var(--disp);
font-size: 1.4rem;
}
.cal-mtitle span {
font-family: var(--mono);
font-size: 0.74rem;
color: var(--green);
}
.cal-today-btn {
margin-left: auto;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 9px;
padding: 9px 15px;
font-family: var(--disp);
font-weight: 600;
font-size: 0.85rem;
}
.cal-today-btn:hover {
border-color: var(--green);
color: var(--green);
text-decoration: none;
} .cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.cal-dows {
margin-bottom: 8px;
}
.cal-dow {
text-align: center;
font-family: var(--disp);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding: 4px 0;
}
.cal-cell {
min-height: 118px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
padding: 8px;
display: flex;
flex-direction: column;
gap: 5px;
overflow: hidden;
box-shadow: var(--shadow);
}
.cal-cell.empty {
background: transparent;
border: none;
box-shadow: none;
min-height: 0;
}
.cal-cell.has {
border-color: color-mix(in srgb, var(--green) 40%, var(--border));
}
.cal-cell.past {
opacity: 0.55;
}
.cal-cell.today {
outline: 2px solid var(--green);
outline-offset: -1px;
opacity: 1;
}
.cal-daynum {
font-family: var(--mono);
font-size: 0.8rem;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
}
.cal-daynum b {
font-size: 0.56rem;
background: var(--green);
color: var(--ink);
padding: 1px 5px;
border-radius: 4px;
letter-spacing: 0.05em;
}
.cal-cell.has .cal-daynum {
color: var(--green);
font-weight: 700;
}
.cal-game {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.72rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--cat, var(--green));
border-radius: 6px;
padding: 4px 6px;
color: var(--text);
overflow: hidden;
}
.cal-game:hover {
border-color: var(--cat, var(--green));
text-decoration: none;
}
.cal-game .cg-thumb {
width: 26px;
height: 26px;
border-radius: 5px;
background-size: cover;
background-position: center;
flex: none;
}
.cal-game .cg-t {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.cal-more {
font-family: var(--mono);
font-size: 0.66rem;
color: var(--muted);
} .cal-agenda {
max-width: 760px;
}
.agenda-month {
font-family: var(--disp);
font-size: 1.05rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 22px 0 10px;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
.agenda-row {
display: flex;
align-items: center;
gap: 14px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--cat, var(--green));
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 10px;
box-shadow: var(--shadow);
}
.agenda-row:hover {
border-color: var(--cat, var(--green));
transform: translateX(3px);
text-decoration: none;
}
.agenda-row {
transition:
transform 0.15s,
border-color 0.15s;
}
.ag-date {
flex: none;
width: 48px;
text-align: center;
font-family: var(--mono);
color: var(--cat, var(--green));
line-height: 1;
}
.ag-date b {
display: block;
font-size: 1.4rem;
}
.ag-date {
font-size: 0.72rem;
text-transform: uppercase;
}
.ag-thumb {
flex: none;
width: 66px;
height: 44px;
border-radius: 8px;
overflow: hidden;
position: relative;
background: var(--surface-2);
}
.ag-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ag-body {
flex: 1;
min-width: 0;
}
.ag-cat {
display: block;
font-family: var(--disp);
font-size: 0.64rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cat, var(--green));
}
.ag-title {
display: block;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ag-when {
flex: none;
font-family: var(--mono);
font-size: 0.76rem;
color: var(--muted);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 10px;
}
.cal-empty-note {
text-align: center;
color: var(--muted);
font-family: var(--mono);
font-size: 0.85rem;
margin-top: 18px;
}
@media (max-width: 700px) {
.cal-cell {
min-height: 92px;
padding: 6px;
}
.cal-dow {
font-size: 0.56rem;
}
.cal-game .cg-t {
font-size: 0.6rem;
}
.cal-game .cg-thumb {
display: none;
}
.cal-legend {
width: 100%;
margin-left: 0;
}
}  .artlayout.no-sidebar {
grid-template-columns: 56px minmax(0, 1fr);
}
@media (max-width: 1040px) {
.artlayout.no-sidebar {
grid-template-columns: 1fr;
}
} .artlayout.layout-wide .post-full {
max-width: 920px;
} .artlayout.layout-text {
grid-template-columns: 1fr;
}
.artlayout.layout-text .post-full {
max-width: 680px;
margin: 0 auto;
} .artlayout.layout-hero .hero-figure {
aspect-ratio: 21 / 9;
}
.artlayout.layout-hero .post-full {
max-width: 860px;
}  .tfont-chakra .post-full h1.title {
font-family: var(--disp);
letter-spacing: -0.01em;
}
.tfont-arcade .post-full h1.title {
font-family: "Orbitron", var(--disp);
letter-spacing: 0.01em;
font-size: clamp(1.6rem, 3.2vw, 2.3rem);
line-height: 1.15;
}
.tfont-rajdhani .post-full h1.title {
font-family: "Rajdhani", var(--disp);
font-weight: 700;
letter-spacing: 0.01em;
}
.tfont-russo .post-full h1.title {
font-family: "Russo One", var(--disp);
letter-spacing: 0.005em;
} .hfont-chakra .entry h2,
.hfont-chakra .entry h3 {
font-family: var(--disp);
letter-spacing: -0.01em;
}
.hfont-arcade .entry h2,
.hfont-arcade .entry h3 {
font-family: "Orbitron", var(--disp);
letter-spacing: 0.01em;
}
.hfont-rajdhani .entry h2,
.hfont-rajdhani .entry h3 {
font-family: "Rajdhani", var(--disp);
font-weight: 700;
letter-spacing: 0.01em;
}
.hfont-russo .entry h2,
.hfont-russo .entry h3 {
font-family: "Russo One", var(--disp);
} .bfont-reading .entry p,
.bfont-reading .entry li {
font-family: "Lora", Georgia, "Times New Roman", serif;
font-size: 1.08rem;
line-height: 1.75;
}
.bfont-condensed .entry p,
.bfont-condensed .entry li {
font-family: "Rajdhani", system-ui, sans-serif;
font-size: 1.12rem;
letter-spacing: 0.005em;
} .mlg-cookie {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 120;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: 14px 18px;
max-width: 760px;
margin: 0 auto;
}
.mlg-cookie[hidden] {
display: none;
}
.mlg-cookie__in {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.mlg-cookie p {
margin: 0;
font-size: 0.9rem;
color: var(--muted);
flex: 1;
min-width: 240px;
}
.mlg-cookie a {
color: var(--cyan);
}
.mlg-cookie__btns {
display: flex;
gap: 8px;
margin-left: auto;
}
.mlg-cookie__decline {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
border-radius: 9px;
padding: 9px 16px;
font-weight: 600;
font-family: var(--disp);
}
.mlg-cookie__decline:hover {
border-color: var(--muted);
}
.mlg-contact {
max-width: 620px;
display: flex;
flex-direction: column;
gap: 14px;
}
.mlg-contact label {
display: flex;
flex-direction: column;
gap: 6px;
font-weight: 600;
font-size: 0.9rem;
}
.mlg-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 560px) {
.mlg-form-row {
grid-template-columns: 1fr;
}
}
.mlg-contact input[type="text"],
.mlg-contact input[type="email"],
.mlg-contact textarea {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
padding: 11px 13px;
color: var(--text);
font-family: var(--body);
font-size: 1rem;
font-weight: 400;
}
.mlg-contact input:focus,
.mlg-contact textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 1px var(--green);
}
.mlg-contact .btn {
align-self: flex-start;
}
.mlg-form-ok {
background: color-mix(in srgb, var(--green) 14%, var(--surface));
border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border));
color: var(--text);
border-radius: var(--r);
padding: 14px 18px;
margin-bottom: 18px;
font-weight: 600;
}
.mlg-form-err {
background: color-mix(in srgb, var(--red) 12%, var(--surface));
border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border));
color: var(--text);
border-radius: var(--r);
padding: 14px 18px;
margin-bottom: 18px;
}  .entry .is-style-mlg-gamer {
font-family: var(--disp);
letter-spacing: -0.01em;
}
.entry .is-style-mlg-arcade {
font-family: "Orbitron", var(--disp);
letter-spacing: 0.01em;
}
.entry .is-style-mlg-neon {
color: var(--green);
text-shadow: 0 0 16px color-mix(in srgb, var(--green) 45%, transparent);
}
.entry p.is-style-mlg-lead {
font-size: 1.2rem;
color: var(--muted);
line-height: 1.5;
}
.entry .is-style-mlg-framed img {
border-radius: var(--r);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.entry .wp-block-group.is-style-mlg-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 22px;
box-shadow: var(--shadow);
}
.entry .wp-block-quote.is-style-mlg-neon,
.entry .wp-block-pullquote.is-style-mlg-neon {
border-left: 3px solid var(--green);
background: var(--surface);
border-radius: 0 var(--r) var(--r) 0;
padding: 14px 20px;
color: var(--text);
font-style: normal;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 20%, transparent);
} .entry .alignleft {
float: left;
margin: 6px 24px 16px 0;
max-width: 50%;
}
.entry .alignright {
float: right;
margin: 6px 0 16px 24px;
max-width: 50%;
}
.entry .aligncenter {
margin-left: auto;
margin-right: auto;
}
.entry .alignwide {
width: min(1000px, 92vw);
margin-left: calc(50% - min(1000px, 92vw) / 2);
}
.entry .wp-block-media-text {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: center;
margin: 1.5em 0;
}
.entry .wp-block-media-text.has-media-on-the-right {
grid-template-columns: 1fr 1fr;
}
.entry .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
order: 2;
}
.entry .wp-block-media-text img {
border-radius: var(--r);
}
@media (max-width: 620px) {
.entry .alignleft,
.entry .alignright {
float: none;
max-width: 100%;
margin: 1.2em 0;
}
.entry .wp-block-media-text {
grid-template-columns: 1fr;
}
.entry .alignwide {
width: 100%;
margin-left: 0;
}
} .mlg-keyfacts {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
margin: 1.5em 0;
box-shadow: var(--shadow);
}
.mlg-keyfacts h4 {
font-size: 0.95rem;
display: flex;
gap: 7px;
align-items: center;
margin-bottom: 8px;
}
.mlg-keyfacts h4 .ico {
color: var(--green);
}
.mlg-keyfacts .specs {
margin: 0;
} .mlg-callout {
border: 1px solid var(--border);
border-left: 4px solid var(--cat, var(--green));
background: var(--surface);
border-radius: var(--r);
padding: 14px 18px;
margin: 1.5em 0;
color: var(--text);
font-weight: 500;
box-shadow: var(--shadow);
}
.mlg-callout--green {
--cat: var(--green);
}
.mlg-callout--cyan {
--cat: var(--cyan);
}
.mlg-callout--amber {
--cat: var(--amber);
}
.mlg-callout--red {
--cat: var(--red);
} .relside {
list-style: none;
margin: 0;
padding: 0;
}
.relside li {
border-bottom: 1px dashed var(--border);
}
.relside li:last-child {
border-bottom: none;
}
.relside a {
display: block;
padding: 8px 0;
font-size: 0.9rem;
line-height: 1.35;
color: var(--text);
font-weight: 600;
}
.relside a:hover {
color: var(--green);
} .admin-bar .site-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
} .mlg-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 22px 0;
}
.mlg-sentinel {
height: 1px;
width: 100%;
}
.mlg-more-spin {
color: var(--muted);
font-family: var(--mono);
font-size: 0.85rem;
}
.mlg-pagenums {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.mlg-pagenums button {
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text);
font-weight: 600;
font-family: var(--mono);
background: var(--surface);
}
.mlg-pagenums button.is-on {
background: var(--green);
color: var(--ink);
border-color: var(--green);
}
.mlg-pagenums button:hover {
border-color: var(--green);
} .genres-hub {
padding: 28px 0 60px;
}
.genres-head h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
margin: 0 0 6px;
}
.genres-head p {
color: var(--muted);
margin: 0 0 22px;
}
.genres-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.genre-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 16px 18px;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
color: inherit;
transition:
transform 0.15s ease,
border-color 0.15s ease;
}
.genre-card:hover {
transform: translateY(-3px);
border-color: var(--green);
}
.genre-name {
font-weight: 800;
font-size: 1.05rem;
}
.genre-count {
font-family: ui-monospace, monospace;
font-size: 0.8rem;
color: var(--green);
}
.genre-desc {
font-size: 0.82rem;
color: var(--muted);
} .franchise-hub {
padding: 28px 0 60px;
}
.fh-head {
margin-bottom: 22px;
}
.fh-eyebrow {
font-family: ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--green);
}
.fh-head h1 {
font-size: clamp(2rem, 5vw, 3rem);
margin: 6px 0 4px;
line-height: 1.05;
}
.fh-meta {
font-family: ui-monospace, monospace;
font-size: 0.85rem;
color: var(--green);
margin: 0;
}
.fh-desc {
color: var(--muted);
margin: 8px 0 0;
max-width: 60ch;
}
.fh-pager {
margin-top: 26px;
} .franchise-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 18px 0 6px;
}
.franchise-row .fr-label {
font-family: ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.fr-chip {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--green) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
color: var(--green);
font-weight: 700;
font-size: 0.82rem;
text-decoration: none;
}
.fr-chip:hover {
background: color-mix(in srgb, var(--green) 24%, transparent);
}