:root {
    --ink: #18312d;
    --muted: #68746f;
    --paper: #f4f1e8;
    --surface: #fffdf7;
    --surface-2: #eef1e9;
    --line: #d9ded4;
    --brand: #1f665a;
    --brand-dark: #153f38;
    --brand-soft: #dcebe4;
    --gold: #b58a43;
    --spring: #cb829c;
    --summer: #279ca2;
    --autumn: #b46b39;
    --winter: #609ebd;
    --central: #907455;
    --friendly: #2b8c5d;
    --neutral: #ad851e;
    --hostile: #b84d4d;
    --boss: #8f60b2;
    --shadow: 0 18px 46px rgba(25, 48, 43, .09);
    --sidebar-width: 264px;
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 85% 0, rgba(75, 142, 126, .08), transparent 26rem),
        var(--paper);
    font-family: Inter, "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 47.5h48M47.5 0v48' fill='none' stroke='%23889890' stroke-opacity='.11'/%3E%3C/svg%3E");
}

a {
    color: var(--brand);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--brand-dark);
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    display: block;
    max-width: 100%;
}

code,
kbd,
pre {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

code {
    overflow-wrap: anywhere;
}

pre {
    margin: 0;
    padding: 1.35rem;
    overflow: auto;
    color: #eaf4ee;
    background: #142e2a;
    border: 1px solid #2b4a44;
    border-radius: 14px;
    line-height: 1.65;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: .8rem;
    left: .8rem;
    padding: .65rem 1rem;
    color: white;
    background: var(--brand-dark);
    border-radius: 8px;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: none;
}

.site-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    z-index: 60;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    padding: 1.35rem 1rem;
    color: #eaf4ef;
    background:
        radial-gradient(circle at 15% 8%, rgba(122, 187, 164, .16), transparent 13rem),
        linear-gradient(165deg, #173e37 0%, #102c29 72%, #0c2422 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 12px 0 30px rgba(19, 43, 39, .08);
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem .35rem 1.35rem;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand:hover {
    color: white;
}

.brand img {
    image-rendering: pixelated;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

.brand span {
    min-width: 0;
}

.brand strong {
    display: block;
    overflow: hidden;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1rem;
    text-overflow: ellipsis;
}

.brand small {
    display: block;
    margin-top: .1rem;
    color: #9ec4b8;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.side-navigation {
    display: grid;
    gap: .23rem;
    margin-top: 1.25rem;
}

.side-navigation a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .62rem .75rem;
    color: #bed1ca;
    font-size: .85rem;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: .18s ease;
}

.side-navigation a:hover {
    color: white;
    background: rgba(255, 255, 255, .055);
}

.side-navigation a.is-active {
    color: white;
    background: rgba(114, 177, 157, .15);
    border-color: rgba(145, 205, 186, .14);
    box-shadow: inset 3px 0 #7ab7a4;
}

.nav-icon {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    color: #93bfaf;
    font-family: monospace;
    font-size: 1rem;
}

.sidebar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: auto;
    padding: 1rem .35rem .2rem;
}

.sidebar-meta span {
    padding: .15rem .45rem;
    color: #8db7aa;
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .06em;
    border: 1px solid rgba(142, 192, 177, .17);
    border-radius: 999px;
}

.content-shell {
    min-width: 0;
    margin-left: var(--sidebar-width);
}

.topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    display: flex;
    height: 68px;
    align-items: center;
    gap: 1rem;
    padding: .75rem clamp(1rem, 3vw, 2.5rem);
    background: rgba(244, 241, 232, .91);
    border-bottom: 1px solid rgba(161, 170, 161, .4);
    backdrop-filter: blur(18px);
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.global-search {
    display: flex;
    width: min(680px, 100%);
    height: 42px;
    align-items: center;
    gap: .65rem;
    padding: 0 .75rem;
    background: rgba(255, 253, 247, .86);
    border: 1px solid var(--line);
    border-radius: 11px;
    transition: .18s ease;
}

.global-search:focus-within {
    background: white;
    border-color: #75a89a;
    box-shadow: 0 0 0 3px rgba(54, 117, 102, .1);
}

.global-search > span {
    color: var(--muted);
    font-size: 1.25rem;
}

.global-search input {
    width: 100%;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
}

.global-search kbd {
    padding: .08rem .38rem;
    color: #87928e;
    background: #f0eee7;
    border: 1px solid #d9dbd4;
    border-bottom-width: 2px;
    border-radius: 5px;
    font-size: .65rem;
    white-space: nowrap;
}

.version-pill {
    margin-left: auto;
    padding: .35rem .65rem;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid #c7ded5;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}

.main-content {
    width: min(1480px, 100%);
    min-height: calc(100vh - 130px);
    margin: 0 auto;
    padding: clamp(1.4rem, 3.4vw, 3.6rem);
    outline: none;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem clamp(1.4rem, 3.4vw, 3.6rem) 2rem;
    color: var(--muted);
    font-size: .72rem;
    border-top: 1px solid var(--line);
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin-bottom: 1.1rem;
    color: var(--muted);
    font-size: .74rem;
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--brand);
}

.eyebrow {
    margin: 0 0 .35rem;
    color: var(--brand);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}

.page-heading h1,
.hero h1,
.detail-heading h1,
.not-found h1 {
    margin: 0;
    font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
    letter-spacing: -.035em;
    line-height: 1.18;
}

.page-heading h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.page-lead {
    max-width: 760px;
    margin: .55rem 0 0;
    color: var(--muted);
    font-size: .96rem;
}

.page-actions,
.hero-actions,
.biome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    font-size: .8rem;
    font-weight: 750;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: white;
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 8px 20px rgba(31, 102, 90, .18);
}

.button-primary:hover {
    color: white;
    background: var(--brand-dark);
}

.button-secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.button-ghost {
    color: var(--brand);
    background: transparent;
    border-color: #b8cdc5;
}

.hero {
    position: relative;
    display: grid;
    min-height: 520px;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
    color: #edf5f1;
    background:
        linear-gradient(105deg, rgba(13, 48, 43, .97), rgba(28, 82, 70, .91)),
        #173e37;
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(20, 52, 46, .2);
}

.hero::after {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -280px;
    bottom: -360px;
    content: "";
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .02);
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.hero .eyebrow {
    color: #a8d1c3;
}

.hero h1 {
    font-size: clamp(2.35rem, 5vw, 4.45rem);
}

.hero h1 span {
    color: #d9bd7c;
}

.hero-copy > p:not(.eyebrow) {
    max-width: 660px;
    margin: 1.25rem 0 1.5rem;
    color: #c1d5ce;
    font-size: 1rem;
}

.hero .button-primary {
    color: #15352f;
    background: #e0c789;
    border-color: #e0c789;
}

.hero .button-secondary {
    color: white;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.45rem;
}

.hero-tags span {
    padding: .28rem .6rem;
    color: #a9c8be;
    font-size: .66rem;
    border: 1px solid rgba(164, 208, 194, .18);
    border-radius: 999px;
}

.hero-visual {
    position: relative;
    z-index: 1;
    justify-self: end;
}

.hero-visual img {
    width: min(480px, 100%);
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.hero-version {
    position: absolute;
    right: 0;
    bottom: 6%;
    padding: .65rem 1rem;
    color: var(--ink);
    background: rgba(255, 253, 247, .94);
    border: 1px solid white;
    border-radius: 11px;
    box-shadow: var(--shadow);
}

.hero-version strong,
.hero-version span {
    display: block;
}

.hero-version strong {
    font-size: 1.25rem;
}

.hero-version span {
    color: var(--muted);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    margin: 1.1rem 0 3.4rem;
}

.stat-card {
    display: grid;
    min-height: 132px;
    align-content: center;
    padding: 1.15rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(33, 57, 51, .045);
}

.stat-card strong {
    font-family: Georgia, serif;
    font-size: 2.3rem;
    line-height: 1;
}

.stat-card span {
    margin-top: .45rem;
    font-weight: 760;
}

.stat-card small {
    color: var(--muted);
    font-size: .68rem;
}

.mini-stats {
    margin-bottom: 1.3rem;
}

.mini-stats .stat-card {
    min-height: 108px;
}

.section-block {
    margin: 4rem 0;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.35rem;
}

.section-heading h2,
.content-card h2,
.info-panel h2,
.world-facts h2,
.gate-materials h2 {
    margin: 0;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    line-height: 1.25;
}

.section-heading > a,
.text-link {
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}

.section-heading.small {
    margin-bottom: 1rem;
}

.section-heading.small h2 {
    font-size: 1.35rem;
}

.season-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.season-card {
    display: flex;
    min-height: 126px;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--season-color, var(--brand));
    border-radius: 14px;
    text-decoration: none;
    transition: .18s ease;
}

.season-card:hover {
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.season-spring { --season-color: var(--spring); }
.season-summer { --season-color: var(--summer); }
.season-autumn { --season-color: var(--autumn); }
.season-winter { --season-color: var(--winter); }
.season-central { --season-color: var(--central); }

.season-symbol {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--season-color);
    background: color-mix(in srgb, var(--season-color) 12%, white);
    border-radius: 50%;
    font-size: 1.25rem;
}

.season-card span:nth-child(2) {
    min-width: 0;
}

.season-card small,
.season-card strong,
.season-card em {
    display: block;
}

.season-card small,
.season-card em {
    color: var(--muted);
    font-size: .64rem;
    font-style: normal;
}

.season-card strong {
    margin: .1rem 0;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1.1rem;
}

.season-card b {
    margin-left: auto;
    color: var(--season-color);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
}

.feature-grid a {
    min-height: 190px;
    padding: 1.35rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    transition: .18s ease;
}

.feature-grid a:hover {
    transform: translateY(-3px);
    border-color: #aac6bb;
    box-shadow: var(--shadow);
}

.feature-grid span {
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: .78rem;
}

.feature-grid h3 {
    margin: 1rem 0 .35rem;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1.2rem;
}

.feature-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
}

.wide-preview {
    position: relative;
    display: block;
    height: min(56vw, 580px);
    overflow: hidden;
    background: #182b28;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.wide-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    image-rendering: pixelated;
}

.wide-preview span {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: .5rem .8rem;
    color: white;
    background: rgba(12, 37, 33, .86);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.download-panel {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 2rem;
    align-items: center;
    margin: 4rem 0 1rem;
    padding: 2rem;
    color: white;
    background: linear-gradient(135deg, #173e37, #1f5e53);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.download-panel .eyebrow {
    color: #9ed0bf;
}

.download-panel h2 {
    margin: 0;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1.8rem;
}

.download-panel p {
    margin: .5rem 0 0;
    color: #bdd3cc;
    font-size: .8rem;
}

.download-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.download-links a {
    display: block;
    padding: .65rem .8rem;
    color: white;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    text-decoration: none;
}

.download-links a:hover {
    background: rgba(255, 255, 255, .12);
}

.download-links span,
.download-links small {
    display: block;
}

.download-links span {
    font-size: .76rem;
    font-weight: 700;
}

.download-links small {
    overflow: hidden;
    color: #a6c6bc;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: end;
    margin: 1.2rem 0;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(28, 50, 45, .035);
}

.filter-panel label {
    display: grid;
    min-width: 150px;
    gap: .3rem;
}

.filter-panel label > span {
    color: var(--muted);
    font-size: .65rem;
    font-weight: 750;
}

.filter-panel .filter-search {
    min-width: min(260px, 100%);
    flex: 1;
}

.filter-panel input,
.filter-panel select,
.search-page-form input {
    height: 42px;
    padding: 0 .7rem;
    color: var(--ink);
    background: white;
    border: 1px solid #cfd6ce;
    border-radius: 9px;
    outline: none;
}

.filter-panel input:focus,
.filter-panel select:focus,
.search-page-form input:focus {
    border-color: #70a496;
    box-shadow: 0 0 0 3px rgba(50, 115, 99, .1);
}

.filter-reset {
    align-self: center;
    padding: .4rem;
    font-size: .7rem;
}

.result-summary {
    display: flex;
    gap: .45rem;
    align-items: baseline;
    margin: 1rem 0;
    color: var(--muted);
    font-size: .72rem;
}

.result-summary strong {
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 1.6rem;
}

.result-summary span:last-child:not(:nth-child(2)) {
    margin-left: auto;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: .75rem;
}

.catalog-card {
    display: flex;
    min-width: 0;
    min-height: 130px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--season-color, var(--brand));
    border-radius: 13px;
    transition: .16s ease;
}

.catalog-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--season-color, var(--brand)) 50%, var(--line));
    box-shadow: 0 12px 30px rgba(24, 49, 45, .08);
}

.catalog-image {
    display: grid;
    width: 112px;
    flex: 0 0 112px;
    place-items: center;
    background:
        linear-gradient(45deg, rgba(57, 83, 76, .045) 25%, transparent 25%, transparent 75%, rgba(57, 83, 76, .045) 75%),
        linear-gradient(45deg, rgba(57, 83, 76, .045) 25%, transparent 25%, transparent 75%, rgba(57, 83, 76, .045) 75%),
        #f1f0e8;
    background-position: 0 0, 6px 6px;
    background-size: 12px 12px;
}

.catalog-image img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 5px rgba(22, 40, 36, .13));
}

.catalog-card-body {
    min-width: 0;
    padding: .8rem .65rem;
}

.card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .42rem;
    color: #52615c;
    background: #eef1eb;
    border: 1px solid #dce2da;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 750;
    line-height: 1.5;
}

.season-badge {
    color: color-mix(in srgb, var(--season-color, var(--brand)) 70%, #222);
    background: color-mix(in srgb, var(--season-color, var(--brand)) 10%, white);
    border-color: color-mix(in srgb, var(--season-color, var(--brand)) 25%, white);
}

.badge-ore {
    color: #74551e;
    background: #f4e8c9;
    border-color: #e5d29d;
}

.badge-boss {
    color: #6a388b;
    background: #eee1f6;
    border-color: #d9bdea;
}

.catalog-card h2 {
    margin: .45rem 0 .05rem;
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-card h2 a {
    color: var(--ink);
    text-decoration: none;
}

.catalog-card p {
    margin: 0 0 .25rem;
    overflow: hidden;
    color: var(--muted);
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-card code {
    display: block;
    overflow: hidden;
    color: #63716c;
    font-size: .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-card {
    border-left-color: var(--disposition-color, var(--season-color));
}

.disposition-friendly { --disposition-color: var(--friendly); }
.disposition-neutral { --disposition-color: var(--neutral); }
.disposition-hostile { --disposition-color: var(--hostile); }
.disposition-boss { --disposition-color: var(--boss); }

.disposition-friendly .disposition-badge { color: #226645; background: #e0f2e8; border-color: #badfc9; }
.disposition-neutral .disposition-badge { color: #735a14; background: #f5edce; border-color: #e5d591; }
.disposition-hostile .disposition-badge { color: #883a3a; background: #f7e1df; border-color: #e8beb9; }
.disposition-boss .disposition-badge { color: #70468c; background: #eee3f5; border-color: #dcc4ea; }

.pagination {
    display: flex;
    gap: .35rem;
    justify-content: center;
    margin: 2rem 0;
}

.pagination a,
.pagination span {
    display: grid;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    padding: .35rem .6rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .7rem;
    text-decoration: none;
}

.pagination .is-current {
    color: white;
    background: var(--brand);
    border-color: var(--brand);
}

.pagination .is-disabled {
    opacity: .45;
}

.empty-state {
    display: grid;
    min-height: 300px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--surface);
    border: 1px dashed #bdc8c0;
    border-radius: 16px;
}

.empty-state > span {
    color: #8aa098;
    font-size: 2.4rem;
}

.empty-state h2 {
    margin: .5rem 0 0;
}

.empty-state p {
    margin: .2rem 0;
    color: var(--muted);
}

.content-card,
.info-panel {
    padding: 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 25px rgba(27, 50, 45, .035);
}

.content-card h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
}

.content-card p:last-child {
    margin-bottom: 0;
}

.two-column-info,
.season-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .7rem;
}

.theme-grid a {
    padding: .85rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
}

.theme-grid a:hover {
    border-color: #9fbbb1;
    box-shadow: 0 10px 24px rgba(27, 51, 45, .06);
}

.palette-strip {
    display: flex;
    height: 8px;
    overflow: hidden;
    margin: -.1rem -.1rem .75rem;
    border-radius: 999px;
}

.palette-strip i {
    flex: 1;
    background: var(--swatch);
}

.theme-grid strong,
.theme-grid span,
.theme-grid code {
    display: block;
}

.theme-grid strong {
    font-size: .85rem;
}

.theme-grid span {
    color: var(--muted);
    font-size: .64rem;
}

.theme-grid code {
    margin-top: .25rem;
    color: #697670;
    font-size: .58rem;
}

.detail-page {
    margin-bottom: 4rem;
}

.detail-hero {
    --detail-color: var(--season-color, var(--brand));
    position: relative;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: clamp(1.4rem, 3.5vw, 3rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 25%, color-mix(in srgb, var(--detail-color) 13%, transparent), transparent 18rem),
        var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--detail-color);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.detail-hero::after {
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 300px;
    height: 300px;
    content: "";
    border: 1px solid color-mix(in srgb, var(--detail-color) 15%, transparent);
    border-radius: 50%;
}

.detail-image {
    position: relative;
    z-index: 1;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    background:
        linear-gradient(45deg, rgba(80, 100, 94, .055) 25%, transparent 25%, transparent 75%, rgba(80, 100, 94, .055) 75%),
        linear-gradient(45deg, rgba(80, 100, 94, .055) 25%, transparent 25%, transparent 75%, rgba(80, 100, 94, .055) 75%),
        #efeee7;
    background-position: 0 0, 9px 9px;
    background-size: 18px 18px;
    border: 1px solid #d8ddd6;
    border-radius: 18px;
}

.detail-image img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 12px 11px rgba(30, 51, 45, .18));
}

.detail-heading {
    position: relative;
    z-index: 1;
}

.detail-heading h1 {
    font-size: clamp(2.1rem, 4vw, 3.8rem);
}

.detail-heading .eyebrow {
    margin-top: 1rem;
}

.english-name {
    margin: .25rem 0 .8rem;
    color: var(--muted);
    font-family: Georgia, serif;
    font-style: italic;
}

.detail-summary {
    max-width: 760px;
    margin: 1rem 0 0;
    color: #53625d;
}

.copy-value {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    overflow: hidden;
    background: #edf1ed;
    border: 1px solid #d7dfd9;
    border-radius: 8px;
}

.copy-value code {
    padding: .35rem .5rem;
    overflow: auto;
    color: #35554c;
    font-size: .7rem;
    white-space: nowrap;
}

.copy-button {
    align-self: stretch;
    padding: 0 .5rem;
    color: #48665d;
    background: #e1e9e3;
    border: 0;
    border-left: 1px solid #d1dcd5;
    font-size: .59rem;
    font-weight: 750;
    cursor: pointer;
}

.copy-button:hover {
    color: white;
    background: var(--brand);
}

.detail-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.detail-main {
    display: grid;
    gap: 1rem;
}

.detail-aside {
    display: grid;
    gap: 1rem;
}

.info-panel h2 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.info-panel dl,
.world-facts dl {
    margin: 0;
}

.info-panel dl > div,
.world-facts dl > div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid #e3e6e0;
}

.info-panel dl > div:last-child,
.world-facts dl > div:last-child {
    border-bottom: 0;
}

.info-panel dt,
.world-facts dt,
.data-list dt {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 700;
}

.info-panel dd,
.world-facts dd,
.data-list dd {
    margin: 0;
    font-size: .72rem;
}

.info-panel > p {
    color: var(--muted);
    font-size: .7rem;
}

.code-block {
    display: block;
    margin: .4rem 0;
    padding: .55rem .65rem;
    color: #dcece6;
    background: #173832;
    border-radius: 8px;
    font-size: .65rem;
}

.recipe-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(220px, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.recipe-grid {
    display: grid;
    aspect-ratio: 1;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 8px;
    background: #bbc1b8;
    border: 2px solid #8e998f;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #e6e8e1;
}

.recipe-cell {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
    padding: .25rem;
    color: var(--ink);
    background: #e9e7de;
    border: 1px solid #a8afa6;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 2px 2px #f9f8f3, inset -2px -2px #c8cbc3;
}

.recipe-cell:hover {
    color: var(--ink);
    background: #f2f0e8;
}

.recipe-cell img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

.recipe-cell-label {
    display: -webkit-box;
    margin-top: .15rem;
    overflow: hidden;
    font-size: .52rem;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.recipe-cell.is-empty {
    color: #9ba29b;
    background: #deded8;
}

.recipe-cell.is-empty span {
    font-size: .55rem;
}

.material-glyph {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #2f4e46;
    background: #cbd8d0;
    border: 2px solid #94a79d;
    border-radius: 5px;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: 800;
}

.recipe-legend {
    display: grid;
    gap: .55rem;
}

.recipe-legend > div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .1rem .55rem;
    align-items: center;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e0e5de;
}

.recipe-legend kbd {
    grid-row: span 2;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: white;
    background: var(--brand);
    border-radius: 5px;
    font-size: .7rem;
}

.recipe-legend span {
    font-size: .72rem;
    font-weight: 700;
}

.recipe-legend code {
    color: var(--muted);
    font-size: .59rem;
}

.recipe-output {
    margin: 1rem 0 0;
    text-align: right;
}

.recipe-output strong {
    color: var(--brand);
    font-size: 1.35rem;
}

.notice {
    margin: 1rem 0 0;
    padding: .9rem 1rem;
    background: #edf4f0;
    border: 1px solid #cfe0d8;
    border-left: 4px solid var(--brand);
    border-radius: 10px;
}

.notice strong {
    display: block;
    color: #214b41;
}

.notice p {
    margin: .2rem 0 0;
    color: #586a64;
    font-size: .75rem;
}

.notice ul {
    margin-bottom: 0;
}

.notice-ore {
    background: #f5eddb;
    border-color: #e3d5ae;
    border-left-color: var(--gold);
}

.notice-ore strong {
    color: #6d511d;
}

.notice-warning {
    background: #f7eee1;
    border-color: #e8d5b9;
    border-left-color: #c77c3c;
}

.notice-warning strong {
    color: #77461e;
}

.notice-boss {
    background: #f2eafa;
    border-color: #dfc9ee;
    border-left-color: var(--boss);
}

.notice-boss strong {
    color: #603a79;
}

.data-list {
    margin: 1rem 0 0;
}

.data-list > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid #e0e4de;
}

.data-list.compact > div {
    grid-template-columns: 120px minmax(0, 1fr);
    padding: .4rem 0;
}

.palette-detail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
    margin-top: 1rem;
}

.palette-detail span {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem;
    background: #f2f2ec;
    border: 1px solid #dfe3dc;
    border-radius: 8px;
}

.palette-detail i {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    background: var(--swatch);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
}

.palette-detail code {
    font-size: .62rem;
}

.check-list {
    display: grid;
    gap: .45rem;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.45rem;
}

.check-list li::before {
    position: absolute;
    top: .12rem;
    left: 0;
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    content: "✓";
    color: white;
    background: var(--brand);
    border-radius: 50%;
    font-size: .58rem;
    font-weight: 800;
}

.compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .65rem;
}

.metric-grid > div {
    display: grid;
    min-height: 88px;
    align-content: center;
    padding: .8rem;
    background: #f0f2ec;
    border: 1px solid #dce1d9;
    border-radius: 10px;
}

.metric-grid span {
    color: var(--muted);
    font-size: .62rem;
}

.metric-grid strong {
    font-family: Georgia, serif;
    font-size: 1.25rem;
}

.acquisition-list,
.mini-entity-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.acquisition-list a,
.mini-entity-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem;
    color: var(--ink);
    background: #f0f2ec;
    border: 1px solid #dce1d9;
    border-radius: 9px;
    text-decoration: none;
}

.acquisition-list img,
.mini-entity-list img {
    image-rendering: pixelated;
}

.acquisition-list strong,
.acquisition-list small {
    display: block;
}

.acquisition-list small {
    color: var(--muted);
    font-size: .62rem;
}

.mini-entity-list a {
    font-size: .68rem;
}

.bond-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.bond-card > a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    color: var(--ink);
    background: #edf3ee;
    border: 1px solid #d5e1d8;
    border-radius: 11px;
    text-decoration: none;
}

.bond-card img,
.boss-reward img {
    image-rendering: pixelated;
}

.bond-card small,
.bond-card strong,
.bond-card code,
.boss-reward small,
.boss-reward a,
.boss-reward code {
    display: block;
}

.bond-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin: 0;
}

.bond-card dl div {
    display: grid;
    align-content: center;
    padding: .7rem;
    background: #f0f2ec;
    border: 1px solid #dce1d9;
    border-radius: 9px;
}

.bond-card dt {
    color: var(--muted);
    font-size: .62rem;
}

.bond-card dd {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.boss-reward {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1rem 0;
    padding: .85rem;
    background: #f1eaf6;
    border: 1px solid #dfcee9;
    border-radius: 11px;
}

.boss-reward a {
    color: #68427e;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.creature-metrics {
    margin-top: 1rem;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7rem;
}

.process-grid > div {
    position: relative;
    min-height: 180px;
    padding: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.process-grid b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: white;
    background: var(--brand);
    border-radius: 50%;
    font-family: Georgia, serif;
}

.process-grid h3 {
    margin: 1.1rem 0 .35rem;
    font-size: .9rem;
}

.process-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
}

.realm-overview {
    display: grid;
    grid-template-columns: minmax(420px, 1.25fr) minmax(300px, .75fr);
    gap: 1rem;
}

.realm-map {
    position: relative;
    display: grid;
    min-height: 520px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    background: #193d36;
    border: 1px solid #34564f;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.realm-quadrant {
    display: grid;
    place-items: center;
    align-content: center;
    color: #243b36;
    text-align: center;
}

.realm-quadrant strong,
.realm-quadrant span {
    display: block;
}

.realm-quadrant strong {
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1.4rem;
}

.realm-quadrant span {
    font-size: .66rem;
    opacity: .7;
}

.realm-quadrant.winter { background: linear-gradient(145deg, #dceaf0, #a9cad9); border-radius: 14px 0 0; }
.realm-quadrant.spring { background: linear-gradient(215deg, #f4dfe6, #d9b0be); border-radius: 0 14px 0 0; }
.realm-quadrant.autumn { background: linear-gradient(35deg, #e8cab0, #c99568); border-radius: 0 0 0 14px; }
.realm-quadrant.summer { background: linear-gradient(325deg, #cbe8df, #77c0b4); border-radius: 0 0 14px; }

.realm-center {
    position: absolute;
    place-self: center;
    display: grid;
    width: 160px;
    height: 160px;
    place-items: center;
    align-content: center;
    color: white;
    background: #183f38;
    border: 7px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(18, 49, 43, .28);
    text-align: center;
}

.realm-center span,
.realm-center strong,
.realm-center small {
    display: block;
}

.realm-center span,
.realm-center small {
    color: #a9c9bf;
    font-size: .6rem;
}

.realm-center strong {
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1.05rem;
}

.world-facts {
    padding: 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.world-facts h2 {
    margin-bottom: 1rem;
}

.season-biome-stack {
    display: grid;
    gap: 1rem;
}

.biome-card {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    min-height: 390px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--season-color);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(26, 50, 44, .055);
}

.biome-art {
    min-height: 100%;
    background: #152f2b;
}

.biome-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.biome-content {
    padding: 1.5rem;
}

.biome-content h2 {
    margin: .6rem 0 .35rem;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 1.8rem;
}

.biome-content > p {
    color: var(--muted);
}

.biome-content .data-list a {
    text-decoration: none;
}

.gate-builder {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(320px, .75fr);
    gap: 1rem;
}

.symbol-grid {
    display: grid;
    width: min(100%, 520px);
    aspect-ratio: 1;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    padding: 8px;
    margin: 0 auto;
    background: #1e3430;
    border: 1px solid #3e5751;
    border-radius: 13px;
}

.symbol-grid > div {
    display: grid;
    place-items: center;
    align-content: center;
    padding: .15rem;
    color: white;
    background: #55605e;
    border: 2px solid rgba(255, 255, 255, .24);
    border-radius: 5px;
    text-align: center;
}

.symbol-grid b {
    font-size: 1.25rem;
}

.symbol-grid small {
    font-size: clamp(.35rem, .7vw, .55rem);
}

.symbol-grid .is-air {
    color: #83a099;
    background: #173a34;
    border-style: dashed;
    border-color: #31554d;
}

.symbol-e { background: #9a9082 !important; }
.symbol-t { background: #8d7556 !important; }
.symbol-k { background: #426b6c !important; }
.symbol-s { background: #35445a !important; }
.symbol-b { background: #5c6671 !important; }

.gate-materials {
    display: grid;
    align-content: start;
    gap: .55rem;
    padding: 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gate-materials h2 {
    margin-bottom: .5rem;
}

.gate-materials > a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem;
    color: var(--ink);
    background: #f0f1eb;
    border: 1px solid #dce1da;
    border-radius: 9px;
    text-decoration: none;
}

.gate-materials img {
    image-rendering: pixelated;
}

.gate-materials a > span {
    min-width: 0;
}

.gate-materials b {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: white;
    background: var(--brand);
    border-radius: 4px;
    font-size: .6rem;
}

.gate-materials strong,
.gate-materials code {
    display: block;
}

.gate-materials strong {
    font-size: .72rem;
}

.gate-materials code {
    overflow: hidden;
    color: var(--muted);
    font-size: .55rem;
    text-overflow: ellipsis;
}

.gate-materials em {
    margin-left: auto;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}

.recipe-feature {
    display: grid;
    grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.recipe-feature > div:first-child {
    text-align: center;
}

.recipe-feature > div:first-child img {
    margin: 0 auto;
    image-rendering: pixelated;
}

.command-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.command-toolbar > span {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 700;
}

.command-list {
    display: grid;
    gap: .55rem;
}

.command-list article,
.command-list.compact > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.command-list article p,
.command-list.compact span {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .7rem;
}

.permission-code {
    color: #576b64;
    font-size: .62rem;
}

.admin-commands article {
    border-left: 3px solid var(--gold);
}

.responsive-table {
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: .7rem .85rem;
    border-bottom: 1px solid #e0e4de;
    text-align: left;
    vertical-align: top;
}

th {
    color: #42554f;
    background: #eef1eb;
    font-size: .65rem;
    letter-spacing: .03em;
}

td {
    font-size: .72rem;
}

tr:last-child td {
    border-bottom: 0;
}

.requirements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7rem;
}

.requirements > div {
    min-height: 130px;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    border-radius: 12px;
}

.requirements span,
.requirements strong,
.requirements small {
    display: block;
}

.requirements span {
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: .72rem;
}

.requirements strong {
    margin: .8rem 0 .2rem;
}

.requirements small {
    color: var(--muted);
    font-size: .65rem;
}

.step-list {
    display: grid;
    gap: .7rem;
    padding: 0;
    list-style: none;
    counter-reset: steps;
}

.step-list > li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .9rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.step-list > li > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: white;
    background: var(--brand);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
}

.step-list h3 {
    margin: 0;
    font-size: .95rem;
}

.step-list p {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .76rem;
}

.step-list pre {
    margin-top: .5rem;
}

.download-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}

.download-cards a {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
}

.download-cards a:hover {
    border-color: #91b2a6;
    box-shadow: var(--shadow);
}

.download-cards a > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    color: white;
    background: var(--brand);
    border-radius: 9px;
}

.download-cards div {
    min-width: 0;
}

.download-cards strong,
.download-cards small {
    display: block;
}

.download-cards small {
    overflow: hidden;
    color: var(--muted);
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geyser-cta {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    margin: 4rem 0;
    padding: 2rem;
    color: white;
    background: linear-gradient(125deg, #173b52, #235c70);
    border-radius: 18px;
}

.geyser-cta .eyebrow {
    color: #9ed3e0;
}

.geyser-cta h2 {
    margin: 0;
    font-family: Georgia, "Yu Mincho", serif;
}

.geyser-cta p {
    max-width: 760px;
    margin: .4rem 0 0;
    color: #bed5db;
    font-size: .78rem;
}

.geyser-cta .button-primary {
    color: #153948;
    background: #bbe1e7;
    border-color: #bbe1e7;
    white-space: nowrap;
}

.file-tree {
    color: #d7ebe5;
}

.muted {
    color: var(--muted);
}

.config-table .copy-value {
    min-width: 220px;
}

.changelog {
    display: grid;
    gap: 1rem;
}

.release {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
}

.release-version {
    display: grid;
    align-content: start;
    padding: 1.2rem;
    background: #eef1eb;
    border-right: 1px solid var(--line);
}

.release.is-latest .release-version {
    color: white;
    background: var(--brand-dark);
}

.release-version span {
    color: var(--gold);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .13em;
}

.release-version strong {
    margin: .15rem 0;
    font-family: Georgia, serif;
    font-size: 1.6rem;
}

.release-version time {
    color: var(--muted);
    font-size: .66rem;
}

.release.is-latest .release-version time {
    color: #9fc0b6;
}

.release-notes {
    padding: 1rem 1.3rem;
}

.release-notes ul {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding-left: 1.1rem;
}

.release-notes li {
    font-size: .76rem;
}

.search-page-form {
    display: flex;
    gap: .65rem;
    margin: 1.2rem 0;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.search-page-form input {
    width: 100%;
}

.search-results {
    display: grid;
    gap: .5rem;
}

.search-results > a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    text-decoration: none;
}

.search-results > a:hover {
    transform: translateX(2px);
    border-color: #9dbcb1;
}

.search-results img,
.search-symbol {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    object-fit: contain;
    image-rendering: pixelated;
    background: #eff1eb;
    border-radius: 8px;
}

.search-symbol {
    display: grid;
    place-items: center;
    color: var(--brand);
    font-family: Georgia, serif;
    font-size: 1.3rem;
}

.search-results > a > span:nth-child(2) {
    min-width: 0;
}

.search-results small,
.search-results strong,
.search-results em {
    display: block;
}

.search-results small {
    color: var(--brand);
    font-size: .58rem;
    font-weight: 750;
}

.search-results strong {
    font-size: .86rem;
}

.search-results em {
    overflow: hidden;
    color: var(--muted);
    font-size: .64rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results b {
    margin-left: auto;
    color: var(--brand);
}

.not-found {
    display: grid;
    min-height: 560px;
    place-items: center;
    align-content: center;
    text-align: center;
}

.not-found > span {
    color: #b9c8c1;
    font-family: Georgia, serif;
    font-size: clamp(5rem, 15vw, 11rem);
    font-weight: 800;
    line-height: .8;
}

.not-found h1 {
    margin-top: 1rem;
    font-size: 2rem;
}

.not-found p {
    color: var(--muted);
}

.not-found div {
    display: flex;
    gap: .6rem;
}

.toast {
    position: fixed;
    z-index: 300;
    right: 1rem;
    bottom: 1rem;
    padding: .65rem .9rem;
    color: white;
    background: #173b35;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    box-shadow: 0 12px 32px rgba(15, 38, 34, .25);
    font-size: .7rem;
}

@media (max-width: 1180px) {
    :root { --sidebar-width: 238px; }
    .hero { grid-template-columns: 1fr .8fr; min-height: 480px; }
    .hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.5rem); }
    .season-grid { grid-template-columns: 1fr 1fr; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .realm-overview { grid-template-columns: 1fr; }
    .world-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    .gate-builder { grid-template-columns: 1fr; }
    .gate-materials { grid-template-columns: 1fr 1fr; }
    .gate-materials h2 { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .sidebar {
        width: min(310px, 86vw);
        transform: translateX(-105%);
        transition: transform .22s ease;
    }
    body.sidebar-open .sidebar { transform: none; }
    .sidebar-backdrop {
        position: fixed;
        z-index: 55;
        inset: 0;
        background: rgba(10, 29, 26, .5);
        backdrop-filter: blur(3px);
    }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .content-shell { margin-left: 0; }
    .menu-toggle { display: grid; flex: 0 0 auto; place-items: center; }
    .main-content { padding-top: 2rem; }
    .hero { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .detail-hero { grid-template-columns: 210px minmax(0, 1fr); }
    .detail-columns { grid-template-columns: 1fr; }
    .detail-aside { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr 1fr; }
    .biome-card { grid-template-columns: 1fr; }
    .biome-art { max-height: 360px; }
    .download-panel { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    body { font-size: 14px; }
    .topbar { padding: .65rem .8rem; }
    .global-search kbd, .version-pill { display: none; }
    .main-content { padding: 1.25rem .85rem 2.5rem; }
    .site-footer { display: grid; padding-inline: 1rem; }
    .page-heading { display: block; }
    .page-actions { margin-top: 1rem; }
    .page-actions .button { flex: 1; }
    .hero { min-height: 510px; padding: 1.5rem; border-radius: 18px; }
    .hero h1 { font-size: 2.5rem; }
    .hero-actions .button { flex: 1; }
    .stats-grid, .season-grid, .feature-grid, .two-column-info, .season-detail-grid, .requirements, .download-cards { grid-template-columns: 1fr; }
    .stat-card { min-height: 105px; }
    .filter-panel { display: grid; grid-template-columns: 1fr 1fr; }
    .filter-panel label, .filter-panel .filter-search { min-width: 0; }
    .filter-panel .filter-search { grid-column: 1 / -1; }
    .filter-panel .button { width: 100%; }
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-card { min-height: 116px; }
    .catalog-image { width: 102px; flex-basis: 102px; }
    .catalog-image img { width: 76px; height: 76px; }
    .detail-hero { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.2rem; }
    .detail-image { width: min(240px, 100%); justify-self: center; }
    .detail-heading h1 { font-size: 2.35rem; }
    .detail-aside { grid-template-columns: 1fr; }
    .recipe-layout, .recipe-feature { grid-template-columns: 1fr; }
    .recipe-grid { width: min(100%, 380px); margin: 0 auto; }
    .palette-detail { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid > div { min-height: 150px; }
    .realm-map { min-height: 420px; }
    .realm-center { width: 128px; height: 128px; }
    .realm-quadrant strong { font-size: 1.05rem; }
    .world-facts dl { display: block; }
    .biome-content { padding: 1rem; }
    .gate-materials { grid-template-columns: 1fr; }
    .gate-materials h2 { grid-column: auto; }
    .symbol-grid small { display: none; }
    .bond-card { grid-template-columns: 1fr; }
    .command-list article { display: block; }
    .permission-code { display: block; margin-top: .6rem; }
    .geyser-cta { display: block; }
    .geyser-cta .button { margin-top: 1rem; }
    .release { grid-template-columns: 1fr; }
    .release-version { border-right: 0; border-bottom: 1px solid var(--line); }
    .search-page-form { display: grid; }
    .download-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .sidebar, .topbar, .site-footer, .page-actions, .filter-panel, .copy-button { display: none !important; }
    .content-shell { margin: 0; }
    .main-content { width: 100%; max-width: none; padding: 0; }
    body { background: white; color: black; }
    .content-card, .catalog-card, .detail-hero { break-inside: avoid; box-shadow: none; }
}