:root {
    --bk-panel: rgba(15, 23, 42, 0.82);
    --bk-panel-soft: rgba(30, 41, 59, 0.62);
    --bk-line: rgba(34, 211, 238, 0.28);
    --bk-text-muted: #b8c5d6;
}

body {
    overflow-x: hidden;
}

body > .hero-section {
    padding: 64px 0;
    background: linear-gradient(135deg, #0f172a 0%, #123b63 54%, #0f766e 100%);
}

body > .hero-section::before {
    display: none;
}

body > .hero-section .row {
    min-height: 0;
    row-gap: 32px;
}

body > .hero-section h1 {
    max-width: 760px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

body > .hero-section .lead {
    max-width: 680px;
    color: var(--bk-text-muted);
}

body > .hero-section .content-image {
    width: auto !important;
    max-width: 529px;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: contain;
    image-rendering: auto;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    margin: 0;
}

body > section.py-5 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

body > section.py-5 > .container > p,
body > section.py-5 > .container > .mt-4 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    color: var(--bk-text-muted);
}

.section-title {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card,
.step-card,
.pricing-card,
.testimonial-card,
.faq-item,
.feature-box,
.highlight-box,
.privacy-alert,
.responsible-gaming,
.treasure-card,
.monster-card,
.battle-feature,
.power-box,
.fortune-feature,
.bonus-highlight,
.fish-card,
.mode-card,
.benefit-card,
.platform-card,
.content-section,
.intro-box,
.info-box,
.contact-box,
.login-container,
.app-download-card,
.news-card,
.article-card {
    border-radius: 10px !important;
}

.feature-card,
.step-card,
.pricing-card,
.testimonial-card {
    height: 100%;
}

.content-image,
.news-cover,
.article-cover {
    width: auto !important;
    max-width: 529px;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 10px !important;
    margin: 34px auto;
}

body > section.py-5 > .container > .content-image:first-child {
    max-width: 529px;
}

body > .container.py-4 {
    max-width: 1120px;
}

body > .container.py-4 > nav[aria-label="breadcrumb"] {
    margin: 18px 0 28px;
}

body > .container.py-4 > article {
    max-width: 980px;
    margin: 0 auto;
}

body > .container.py-4 > article > h1 {
    max-width: 980px;
    margin: 0 0 28px;
    padding: 30px;
    background: var(--bk-panel);
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    text-shadow: 0 0 18px rgba(251, 191, 36, 0.42);
    line-height: 1.25;
}

body > .container.py-4 article h1,
body > .container.py-4 article .hero-section h2 {
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    text-shadow: 0 0 18px rgba(251, 191, 36, 0.42);
}

body > .container.py-4 article > h2 {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--bk-line);
}

body > .container.py-4 article > h3 {
    margin-top: 28px;
}

body > .container.py-4 article > p,
body > .container.py-4 article > ul,
body > .container.py-4 article > ol {
    max-width: 880px;
    color: var(--bk-text-muted);
}

body > .container.py-4 article > img.content-image {
    max-width: 529px;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: contain;
    image-rendering: auto;
    margin: 30px auto;
    display: block;
}

body > .container.py-4 article > .row {
    row-gap: 24px;
}

body > .container.py-4 article > .feature-box,
body > .container.py-4 article > .highlight-box,
body > .container.py-4 article > .info-box,
body > .container.py-4 article > .privacy-alert,
body > .container.py-4 article > .responsible-gaming,
body > .container.py-4 article > .warning-box,
body > .container.py-4 article > .power-box,
body > .container.py-4 article > .tips-box,
body > .container.py-4 article > .game-banner,
body > .container.py-4 article > .golden-banner,
body > .container.py-4 article > .jackpot-banner,
body > .container.py-4 article > .ocean-banner,
body > .container.py-4 article > .hero-section {
    max-width: 980px;
    margin: 32px 0;
}

body > .container.py-4 article > .hero-section {
    padding: 34px;
    text-align: left;
}

.mode-grid,
.feature-grid,
.benefits-grid,
.fish-grid,
.fruit-grid,
.player-colors,
.rules-section,
.bonus-features {
    gap: 18px;
}

.stats-box,
.color-box,
.fruit-item,
.bonus-item,
.checklist-item,
.numbered-list li,
.data-table {
    border-radius: 10px;
}

img.content-image {
    display: block !important;
    width: auto !important;
    max-width: min(100%, 529px) !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    margin: 34px auto !important;
}

img.content-image + img.content-image {
    margin-top: 42px !important;
}

.content-image-grid {
    max-width: 1120px;
    margin: 36px auto 64px;
    padding: 0 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.content-image-grid img.content-image {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
}

main.container.my-5 {
    max-width: 1120px;
}

.page-header {
    padding: 64px 0;
    margin-bottom: 36px;
    background: linear-gradient(135deg, #123b63 0%, #0f766e 100%) !important;
}

.news-card,
.article-card {
    background: var(--bk-panel) !important;
}

@media (min-width: 992px) {
    body > .hero-section .col-lg-6:first-child {
        padding-right: 42px;
    }

    body > .hero-section .col-lg-6:last-child {
        padding-left: 26px;
    }

    body > section.py-5 .row > [class*="col-"] {
        margin-bottom: 24px;
    }
}

@media (max-width: 991.98px) {
    body > .hero-section {
        padding: 42px 0;
    }

    body > .hero-section .content-image,
    .content-image,
    .news-cover,
    .article-cover {
        max-width: 100%;
        height: auto !important;
        aspect-ratio: auto;
    }

    body > .container.py-4 > article > h1 {
        padding: 24px;
    }

    .content-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body > section.py-5 {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    body > .container.py-4 > article > h1 {
        font-size: 1.75rem;
    }

    .btn-lg {
        width: 100%;
        margin: 8px 0 !important;
    }

    .content-image-grid {
        grid-template-columns: 1fr;
    }
}