:root {
    --china-bg: #0f0803;
    --china-panel: rgba(27, 16, 8, 0.88);
    --china-panel-soft: rgba(43, 25, 13, 0.72);
    --china-gold: #d6b35a;
    --china-gold-soft: rgba(214, 179, 90, 0.32);
    --china-red: #8f1f18;
    --china-red-dark: #3b0e09;
    --china-ink: #080403;
}

html {
    background: var(--china-bg);
}

body {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0%, rgba(143, 31, 24, 0.18), transparent 34rem),
        linear-gradient(90deg, rgba(214, 179, 90, 0.07) 0 1px, transparent 1px 18px),
        linear-gradient(0deg, rgba(214, 179, 90, 0.045) 0 1px, transparent 1px 18px),
        #0f0803 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 18%, rgba(214, 179, 90, 0.13), transparent 18rem),
        radial-gradient(ellipse at 84% 26%, rgba(143, 31, 24, 0.17), transparent 22rem),
        radial-gradient(ellipse at 50% 100%, rgba(214, 179, 90, 0.09), transparent 26rem);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.2;
    background:
        radial-gradient(circle at 16px 16px, transparent 0 11px, rgba(214,179,90,0.35) 12px 13px, transparent 14px) 0 0 / 72px 36px,
        radial-gradient(circle at 52px 18px, transparent 0 11px, rgba(214,179,90,0.28) 12px 13px, transparent 14px) 0 8px / 72px 36px;
    mask-image: linear-gradient(90deg, black, transparent 18%, transparent 82%, black);
}

nav {
    background:
        linear-gradient(90deg, rgba(143,31,24,0.42), rgba(26,18,9,0.96) 18%, rgba(26,18,9,0.96) 82%, rgba(143,31,24,0.42)),
        var(--china-panel) !important;
    border-bottom-color: rgba(214, 179, 90, 0.48) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

nav::before,
nav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(18vw, 190px);
    pointer-events: none;
    opacity: 0.36;
    background:
        linear-gradient(90deg, var(--china-gold) 0 2px, transparent 2px 14px) 0 12px / 28px 14px,
        linear-gradient(0deg, var(--china-gold) 0 2px, transparent 2px 14px) 0 12px / 28px 14px;
}

nav::before {
    left: 0;
}

nav::after {
    right: 0;
    transform: scaleX(-1);
}

.section-title {
    color: #f3dfac;
    text-shadow: 0 2px 0 rgba(0,0,0,0.55), 0 0 18px rgba(214,179,90,0.26);
}

.section-title::before {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 0.7em;
    margin-right: 0.35em;
    vertical-align: 0.08em;
    border-top: 2px solid var(--china-gold);
    border-bottom: 2px solid var(--china-gold);
    background:
        linear-gradient(90deg, transparent 0 34%, var(--china-gold) 34% 43%, transparent 43% 58%, var(--china-gold) 58% 67%, transparent 67%);
    opacity: 0.82;
}

.section-title::after {
    height: 4px !important;
    width: 100% !important;
    background:
        linear-gradient(90deg, transparent, var(--china-gold), transparent),
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(214,179,90,0.55) 8px 11px) !important;
}

.quest-card,
.task-card,
.game-container,
.story-text,
[class*="bg-[#1a1209]"],
[class*="bg-[#111]"] {
    border-color: rgba(214, 179, 90, 0.45) !important;
}

.quest-card,
.task-card,
.game-container,
.story-text,
div[class*="rounded-3xl"][class*="border"],
div[class*="rounded-2xl"][class*="border"],
a[class*="rounded-3xl"][class*="border"] {
    position: relative;
    background:
        linear-gradient(135deg, rgba(214,179,90,0.08), transparent 22%, transparent 78%, rgba(143,31,24,0.14)),
        var(--china-panel) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 166, 0.06),
        0 18px 44px rgba(0, 0, 0, 0.34);
}

.quest-card::before,
.task-card::before,
.game-container::before,
.story-text::before,
div[class*="rounded-3xl"][class*="border"]::before,
a[class*="rounded-3xl"][class*="border"]::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background:
        linear-gradient(var(--china-gold), var(--china-gold)) left top / 34px 2px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) left top / 2px 34px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) right top / 34px 2px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) right top / 2px 34px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) left bottom / 34px 2px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) left bottom / 2px 34px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) right bottom / 34px 2px no-repeat,
        linear-gradient(var(--china-gold), var(--china-gold)) right bottom / 2px 34px no-repeat;
}

.quest-card > *,
.task-card > *,
.game-container > *,
.story-text > *,
div[class*="rounded-3xl"][class*="border"] > *,
a[class*="rounded-3xl"][class*="border"] > * {
    position: relative;
    z-index: 1;
}

.quest-card::after,
.task-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    background:
        radial-gradient(circle at 18px 18px, transparent 0 10px, var(--china-gold) 11px 12px, transparent 13px) 0 0 / 48px 28px,
        radial-gradient(circle at 42px 20px, transparent 0 10px, var(--china-gold) 11px 12px, transparent 13px) 0 9px / 48px 28px;
}

.task-card:hover,
.quest-card:hover {
    border-color: rgba(246, 216, 138, 0.9) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 166, 0.1),
        0 22px 54px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(214, 179, 90, 0.13) !important;
}

button,
a[class*="rounded-full"] {
    box-shadow: inset 0 0 0 1px rgba(255, 238, 190, 0.15);
}

img[class*="border"] {
    border-color: rgba(214,179,90,0.72) !important;
    box-shadow:
        0 0 0 1px rgba(143,31,24,0.8),
        0 22px 58px rgba(0,0,0,0.58) !important;
}

#demo,
#web3 {
    background:
        linear-gradient(90deg, rgba(143,31,24,0.22), rgba(26,18,9,0.95) 15%, rgba(26,18,9,0.95) 85%, rgba(143,31,24,0.22)),
        var(--china-panel) !important;
    border-color: rgba(214,179,90,0.34) !important;
}

#demo::before,
#web3::before {
    content: "";
    display: block;
    height: 10px;
    margin: -2.2rem 0 2rem;
    opacity: 0.55;
    background:
        repeating-linear-gradient(90deg, var(--china-gold) 0 16px, transparent 16px 22px, var(--china-gold) 22px 25px, transparent 25px 34px);
}

.character-gif {
    background:
        radial-gradient(circle, rgba(214,179,90,0.11), transparent 62%),
        #130b06;
}

@media (max-width: 768px) {
    nav::before,
    nav::after {
        width: 88px;
        opacity: 0.2;
    }

    .section-title::before {
        width: 1em;
    }

    .quest-card::before,
    .task-card::before,
    .game-container::before,
    div[class*="rounded-3xl"][class*="border"]::before,
    a[class*="rounded-3xl"][class*="border"]::before {
        inset: 8px;
        opacity: 0.42;
    }
}