:root {
    --gf-primary: #c0392b;
    --gf-secondary: #e74c3c;
    --gf-accent: #ffd700;
    --gf-bg: #fef5e7;
    --gf-bg-2: #f3e6d4;
    --gf-ink: #2a1a16;
    --gf-muted: #6b5348;
    --gf-border: #d9c4ae;
    --gf-glass: rgba(254, 245, 231, 0.72);
    --gf-page-w: 1120px;
    --gf-header-h: 72px;
    --gf-font-h: "JetBrains Mono", "Courier New", monospace;
    --gf-font-b: "Courier Prime", "Courier New", monospace;
    --gf-space: clamp(1rem, 2vw, 1.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--gf-font-b);
    color: var(--gf-ink);
    background: var(--gf-bg);
    line-height: 1.55;
    overflow-x: hidden;
}
body.gf-is-stage { background: #1a1210; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gf-primary); }
a:hover { color: var(--gf-secondary); }
h1, h2, h3, h4 {
    font-family: var(--gf-font-h);
    line-height: 1.2;
    margin: 0 0 0.6em;
    letter-spacing: -0.02em;
}
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; }

.gf-l-container {
    max-width: var(--gf-page-w);
    margin: 0 auto;
    padding: 0 20px;
}

.gf-m-skip {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--gf-primary);
    color: #fff;
    padding: 0.6rem 1rem;
    z-index: 10000;
}
.gf-m-skip:focus { left: 12px; top: 12px; }

.gf-l-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: var(--gf-header-h);
    background: #f7ebda;
    border-bottom: 2px solid var(--gf-border);
}
.gf-l-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--gf-header-h);
}
.gf-l-header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.gf-l-header__logo img {
    width: 180px;
    height: auto;
    min-height: 36px;
}
.gf-l-header__end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.gf-m-nav--key {
    display: flex;
    gap: 8px;
    align-items: center;
}
.gf-m-nav__link {
    text-decoration: none;
    color: var(--gf-ink);
    font-family: var(--gf-font-h);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.55rem;
    border: 1px solid transparent;
}
.gf-m-nav__link:hover,
.gf-m-nav__link.gf-is-active {
    border-color: var(--gf-primary);
    color: var(--gf-primary);
}

.gf-m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1rem;
    border: 1.5px solid var(--gf-primary);
    background: transparent;
    color: var(--gf-primary);
    text-decoration: none;
    font-family: var(--gf-font-h);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gf-m-btn:hover {
    background: var(--gf-primary);
    color: #fff;
}
.gf-m-btn--primary {
    background: var(--gf-primary);
    color: #fff;
    border-color: var(--gf-primary);
}
.gf-m-btn--primary:hover {
    background: var(--gf-secondary);
    border-color: var(--gf-secondary);
    color: #fff;
}

.gf-m-burger {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--gf-primary);
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.gf-m-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--gf-primary);
}

.gf-m-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 26, 22, 0.45);
    z-index: 950;
}
.gf-m-overlay[hidden],
.gf-m-drawer[hidden],
.gf-m-cookie[hidden],
.gf-m-tabs__panel[hidden] { display: none !important; }

.gf-m-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(75vw, 320px);
    height: 100dvh;
    background: #f7ebda;
    border-left: 2px solid var(--gf-border);
    z-index: 960;
    padding: 1.25rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
}
.gf-m-drawer__close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--gf-primary);
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--gf-primary);
}
.gf-m-drawer__link {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--gf-border);
    font-size: 1rem;
}
.gf-m-drawer__cta { margin-top: 1rem; }

#gf-main { padding-top: var(--gf-header-h); }
body.gf-is-stage #gf-main { padding-top: 0; }
body.gf-is-stage .gf-l-header,
body.gf-is-stage .gf-m-drawer,
body.gf-is-stage .gf-m-overlay { display: none !important; }

.gf-l-band {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    position: relative;
}
.gf-l-band[data-tone="grit"] {
    background:
        linear-gradient(135deg, rgba(192,57,43,0.08), transparent 40%),
        repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(42,26,22,0.035) 11px, rgba(42,26,22,0.035) 12px),
        var(--gf-bg-2);
}
.gf-l-band[data-tone="plain"] { background: var(--gf-bg); }

.gf-m-kicker {
    font-family: var(--gf-font-h);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gf-muted);
    margin-bottom: 0.75rem;
}
.gf-m-hero__title {
    font-size: clamp(1.55rem, 3.4vw, 2.45rem);
    max-width: 22ch;
}
.gf-m-hero__lead {
    max-width: 62ch;
    color: var(--gf-muted);
    font-size: 1.05rem;
}
.gf-m-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.gf-m-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 1.75rem 0 0.5rem;
}
.gf-m-mosaic__cell {
    margin: 0;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--gf-border);
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(8px);
    aspect-ratio: 16 / 10;
}
.gf-m-mosaic__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.gf-m-mosaic__cell figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.45rem 0.65rem;
    background: rgba(42,26,22,0.72);
    color: #fff;
    font-family: var(--gf-font-h);
    font-size: 0.75rem;
}

.gf-m-sechead { margin-bottom: 1.5rem; max-width: 62ch; }
.gf-m-sechead h2 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

.gf-m-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--gf-border);
    padding-bottom: 8px;
}
.gf-m-tabs__tab {
    border: 1.5px solid var(--gf-border);
    background: var(--gf-glass);
    backdrop-filter: blur(6px);
    color: var(--gf-ink);
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    font-family: var(--gf-font-h);
    font-weight: 600;
    font-size: 0.8rem;
}
.gf-m-tabs__tab.gf-is-active,
.gf-m-tabs__tab[aria-selected="true"] {
    border-color: var(--gf-primary);
    background: var(--gf-primary);
    color: #fff;
}

.gf-m-tabcard {
    position: relative;
    border: 1.5px solid var(--gf-border);
    background: var(--gf-glass);
    backdrop-filter: blur(10px);
    padding: 1.35rem 1.1rem 1.1rem;
    margin-top: 0.75rem;
}
.gf-m-tabcard__tab {
    position: absolute;
    top: -11px;
    left: 14px;
    background: var(--gf-accent);
    color: var(--gf-ink);
    font-family: var(--gf-font-h);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border: 1px solid #d4af00;
}

.gf-m-rank { list-style: none; display: grid; gap: 1.5rem; }
.gf-m-rank__top {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.gf-m-rank__icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 2px solid var(--gf-border);
    object-fit: cover;
    flex-shrink: 0;
}
.gf-m-rank__name { margin: 0 0 0.25rem; font-size: 1.2rem; }
.gf-m-rank__dev,
.gf-m-rank__facts,
.gf-m-rank__tag { color: var(--gf-muted); font-size: 0.9rem; margin: 0 0 0.35rem; }
.gf-m-rank__tag {
    display: inline-block;
    border: 1px dashed var(--gf-primary);
    padding: 0.15rem 0.45rem;
    color: var(--gf-primary);
    font-family: var(--gf-font-h);
    font-size: 0.72rem;
}
.gf-m-rank__preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    margin: 0.85rem 0 1rem;
    border: 2px solid var(--gf-border);
}
.gf-m-rank__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.gf-m-scroll { overflow-x: auto; border: 1.5px solid var(--gf-border); background: var(--gf-glass); backdrop-filter: blur(8px); }
.gf-m-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 0.9rem;
}
.gf-m-table th,
.gf-m-table td {
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--gf-border);
    vertical-align: top;
}
.gf-m-table th {
    font-family: var(--gf-font-h);
    background: rgba(192,57,43,0.08);
}

.gf-m-criteria {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.gf-m-criteria h3 { font-size: 1rem; margin-top: 0.35rem; }

.gf-m-readgrid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.gf-m-readcard {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.gf-m-readcard__title {
    display: block;
    font-family: var(--gf-font-h);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.45rem;
}

.gf-m-cta__inner { max-width: 46rem; }
.gf-m-cta h2 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); }

.gf-m-clip {
    clip-path: inset(8% 0 8% 0);
    opacity: 0;
    animation: gf-clip-in 0.7s ease forwards;
}
.gf-m-mosaic__cell--0 { animation-delay: 0.05s; }
.gf-m-mosaic__cell--1 { animation-delay: 0.15s; }
.gf-m-mosaic__cell--2 { animation-delay: 0.25s; }
@keyframes gf-clip-in {
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .gf-m-clip { animation: none; clip-path: none; opacity: 1; }
}

.gf-m-stage {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #1a1210;
    color: #f7ebda;
}
.gf-m-stage__bar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #2a1a16;
    border-bottom: 2px solid #4a322a;
}
.gf-m-stage__close {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 44px;
    border: 1.5px solid #f7ebda;
    color: #f7ebda;
    text-decoration: none;
    font-family: var(--gf-font-h);
    font-weight: 700;
}
.gf-m-stage__title {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}
.gf-m-stage__note {
    margin: 0;
    grid-column: 2;
    font-size: 0.78rem;
    color: #cbb5a4;
}
.gf-m-stage__frame {
    flex: 1;
    width: 100%;
    min-height: calc(100dvh - 76px);
    border: 0;
    background: #000;
}

.gf-l-footer {
    background: #2a1a16;
    color: #f3e6d4;
    padding: 2.5rem 0 2rem;
    border-top: 4px solid var(--gf-primary);
}
.gf-l-footer a { color: var(--gf-accent); }
.gf-l-footer__inner { display: grid; gap: 1.5rem; }
.gf-m-minifaq__title {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.75rem;
}
.gf-m-minifaq__item {
    border: 1px solid #4a322a;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.45rem;
    background: rgba(255,255,255,0.03);
}
.gf-m-minifaq__item summary {
    cursor: pointer;
    font-family: var(--gf-font-h);
    font-weight: 600;
}
.gf-m-minifaq__item p { margin: 0.55rem 0 0.2rem; color: #cbb5a4; font-size: 0.92rem; }
.gf-l-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    align-items: center;
}
.gf-l-footer__links a,
.gf-m-cookie-reopen {
    background: none;
    border: 0;
    color: var(--gf-accent);
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}
.gf-l-footer__legal,
.gf-l-footer__note {
    color: #cbb5a4;
    font-size: 0.85rem;
    margin: 0;
}

.gf-m-cookie {
    position: fixed;
    z-index: 980;
    width: min(360px, calc(100vw - 24px));
    bottom: 16px;
    right: 16px;
    background: #f7ebda;
    border: 2px solid var(--gf-primary);
    padding: 1rem;
    box-shadow: 0 12px 40px rgba(42,26,22,0.2);
}
.gf-m-cookie__title {
    font-family: var(--gf-font-h);
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.gf-m-cookie__text { font-size: 0.9rem; color: var(--gf-muted); }
.gf-m-cookie__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.gf-m-page { padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; }
.gf-m-page__title { font-size: clamp(1.4rem, 3vw, 2rem); max-width: 22ch; }
.gf-m-prose { max-width: 68ch; }
.gf-m-prose h2 { margin-top: 1.75rem; font-size: 1.2rem; }
.gf-m-prose h3 { margin-top: 1.25rem; font-size: 1.05rem; }
.gf-m-crumbs { margin: 0 0 0.85rem; }
.gf-m-crumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--gf-muted);
}
.gf-m-crumbs__item:not(:last-child)::after {
    content: "/";
    margin-left: 0.35rem;
    color: var(--gf-border);
}
.gf-m-crumbs a { color: var(--gf-muted); }

.gf-m-cardgrid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.gf-m-sidefacts {
    border: 1.5px solid var(--gf-border);
    background: var(--gf-glass);
    backdrop-filter: blur(8px);
    padding: 1rem;
    margin: 1.25rem 0;
}
.gf-m-sidefacts h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gf-muted);
}
.gf-m-sidefacts dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.85rem;
    font-size: 0.9rem;
}
.gf-m-sidefacts dt { font-family: var(--gf-font-h); font-weight: 600; }
.gf-m-sidefacts dd { margin: 0; color: var(--gf-muted); }

.gf-m-contact-card {
    border: 2px solid var(--gf-border);
    background: var(--gf-glass);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    max-width: 34rem;
}
.gf-m-contact-card address { font-style: normal; line-height: 1.7; }

.gf-m-az {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 1.5rem;
}
.gf-m-az a {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gf-border);
    text-decoration: none;
    font-family: var(--gf-font-h);
    font-size: 0.8rem;
}
.gf-m-gloss {
    border-top: 1px solid var(--gf-border);
    padding: 0.85rem 0;
}
.gf-m-gloss dt {
    font-family: var(--gf-font-h);
    font-weight: 700;
}
.gf-m-gloss dd { margin: 0.25rem 0 0; color: var(--gf-muted); }

.gf-m-tips { list-style: none; counter-reset: tip; display: grid; gap: 0.85rem; }
.gf-m-tips li {
    counter-increment: tip;
    border: 1.5px solid var(--gf-border);
    background: var(--gf-glass);
    backdrop-filter: blur(8px);
    padding: 1rem 1rem 1rem 3.2rem;
    position: relative;
}
.gf-m-tips li::before {
    content: counter(tip, decimal-leading-zero);
    position: absolute;
    left: 0.85rem;
    top: 1rem;
    font-family: var(--gf-font-h);
    font-weight: 700;
    color: var(--gf-primary);
}

@media (max-width: 900px) {
    .gf-l-header__row { justify-content: space-between; }
    .gf-m-nav--key { display: none; }
    .gf-l-header__logo img { width: 120px; min-height: 28px; }
    .gf-m-mosaic { grid-template-columns: 1fr; }
    .gf-m-mosaic__cell { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
    .gf-l-header__cta { display: none; }
    .gf-m-hero__actions .gf-m-btn { width: 100%; }
    .gf-m-stage__bar {
        grid-template-columns: 1fr;
    }
    .gf-m-stage__close { grid-row: auto; width: 100%; }
}