/* night-sub.css — 内页 · 蒂芙尼蓝浅色主题 · 统一 15px */

body.inner-page { background: var(--page-canvas); }

.inner-content-section,
.seo-section,
.inner-page section.container.py-5 {
    padding-block: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.inner-section-title,
.seo-section-title,
.inner-page section.container.py-5 > .row:first-child h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    color: var(--text-heading);
    font-weight: 700;
    margin: 0 0 8px;
    text-align: center;
}

.inner-section-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.72;
}

.content-text p,
.seo-content p,
.content-block p,
.inner-page .games-intro,
.inner-page .games-text,
.inner-page .games-link,
.card .card-content,
.card p {
    font-size: 15px;
    line-height: 1.72;
    color: var(--text-soft);
    margin: 0 0 12px;
}

.seo-section > .container { padding-inline: var(--nav-pad-x); }

.seo-section.bg-primary {
    background: var(--surface-primary);
    border-block: 1px solid var(--accent-border);
}

.seo-section.bg-primary .seo-section-title,
.seo-section.bg-primary .seo-section-title.text-white {
    color: var(--text-heading);
}

.cards-grid { display: grid; gap: 10px; }
.cards-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
    padding: 14px;
    border-radius: 12px;
    background: var(--surface-card);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
}

.card-icon { display: block; font-size: 1.6rem; margin-bottom: 8px; }

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 8px;
}

.content-list { padding-left: 1.2rem; margin: 0 0 12px; }
.content-list li { font-size: 15px; color: var(--text-soft); margin-bottom: 6px; }

.inner-page section.container.py-5 .games-category {
    font-size: 15px;
    color: var(--text-heading);
    margin: 14px 0 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-card);
    border: 1px solid var(--line-soft);
}

.image-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.image-grid:not(:has(.image-grid-main)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.image-grid-main,
.image-grid-item {
    padding: 12px;
    border-radius: 12px;
    background: var(--surface-card);
    border: 1px solid var(--line-soft);
    min-width: 0;
    max-width: 100%;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
}

.image-grid-main img,
.image-grid-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    box-sizing: border-box;
    background: var(--surface-card-inner);
}

.image-title { font-size: 15px; color: var(--text-heading); margin: 0 0 6px; }
.image-description { font-size: 15px; color: var(--text-soft); margin: 0; line-height: 1.72; }
.image-caption { padding: 10px 0 0; }

.image-grid-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.content-block {
    min-width: 0;
    max-width: 100%;
}

.content-block img,
.content-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    margin: 0 0 12px;
    box-sizing: border-box;
    background: var(--surface-card-inner);
}

body.inner-page .hero-stack__media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.inner-page .hero-stack__media a {
    display: block;
    overflow: visible;
    width: 100%;
    max-width: 512px;
    margin-inline: auto;
    box-sizing: border-box;
}

body.inner-page .hero-stack__media img {
    width: 100%;
    max-width: 512px;
    height: auto;
    display: block;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
}

body.inner-page .site-main img:not(.app-bar__icon):not(.site-logo img) {
    max-width: 100%;
    height: auto;
}

.hero-section .hero-h1 { font-size: clamp(1.35rem, 5vw, 1.75rem); color: var(--text-heading); }
.hero-description p { font-size: 15px; color: var(--text-soft); }

.inner-page .bg-primary.py-2 { padding-block: 10px; }
.inner-page .bg-primary.py-2 h2 { font-size: 15px; margin: 0; color: var(--text-heading); }

.inner-page section.container#login,
section.container#login { display: none; }

.inner-page .site-footer {
    background: var(--surface-footer);
}

@media (max-width: 420px) {
    .cards-grid-2, .cards-grid-4, .image-grid-row,
    .image-grid:not(:has(.image-grid-main)) {
        grid-template-columns: 1fr;
    }
}

html:has(body.inner-page) {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html:has(body.inner-page)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body.inner-page {
    overflow-x: hidden;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.inner-page::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body.inner-page .site-main {
    overflow-x: hidden;
    max-width: 100%;
}

body.inner-page .site-main > * {
    max-width: 100%;
    box-sizing: border-box;
}

body.inner-page .hero-section > .container,
body.inner-page .inner-content-section > .container,
body.inner-page .seo-section > .container,
body.inner-page section.container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--nav-pad-x);
    box-sizing: border-box;
}

body.inner-page .inner-content-section,
body.inner-page .seo-section,
body.inner-page section.container.py-5 {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

body.inner-page .row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.inner-page .col-12,
body.inner-page [class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

body.inner-page .image-grid,
body.inner-page .image-grid-row,
body.inner-page .content-block,
body.inner-page .seo-content,
body.inner-page .content-text {
    max-width: 100%;
    min-width: 0;
}

body.inner-page section.bg-primary {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-inline: var(--nav-pad-x);
}