/* 대격변 테마 - style.css 뒤에 불러와서 리치왕(얼음) 색을 용암/불꽃 색으로 덮어씀 */
:root {
    --cata-accent: #ff8a3d;
    --cata-accent-strong: #ff6a1a;
    --cata-glow: #ff5a12;
}

body {
    background-color: #0b0505;
    color: #d9c7bd;
}

#cataBg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #0b0505 url(../images/cata/bg.svg) center bottom / cover no-repeat;
}

/* 떠오르는 불씨 */
#cataBg::before,
#cataBg::after {
    content: "";
    position: absolute;
    inset: -100% 0 0 0;
    background-image:
        radial-gradient(2px 2px at 10% 90%, #ffb347, transparent),
        radial-gradient(2px 2px at 30% 80%, #ff8a3d, transparent),
        radial-gradient(1.5px 1.5px at 55% 95%, #ffd27a, transparent),
        radial-gradient(2px 2px at 75% 85%, #ff8a3d, transparent),
        radial-gradient(1.5px 1.5px at 90% 92%, #ffb347, transparent);
    background-size: 100% 50%;
    animation: cata-embers 18s linear infinite;
    opacity: .7;
}
#cataBg::after {
    animation-duration: 27s;
    animation-delay: -9s;
    opacity: .45;
    transform: scaleX(-1);
}
@keyframes cata-embers {
    from { transform: translateY(0); }
    to { transform: translateY(50%); }
}
@media (prefers-reduced-motion: reduce) {
    #cataBg::before, #cataBg::after { animation: none; }
}

.main-box {
    background-color: rgba(20, 8, 6, 0.72);
    border: 1px solid rgba(255, 138, 61, 0.35);
    box-shadow: 0 0 30px rgba(255, 90, 18, 0.25);
}

#myCarousel {
    border: 1px solid var(--cata-accent);
    box-shadow: 0 0 20px rgba(255, 90, 18, 0.35);
}

.box1 {
    background-color: rgba(10, 4, 3, 0.78);
    border: 1px solid rgba(255, 138, 61, 0.25);
    color: #f3e6de;
}

.box1 hr,
#pills-main hr {
    border-color: var(--cata-accent) !important;
}

nav.navbar.bootsnav ul.nav > li > a {
    color: var(--cata-accent);
}

nav.navbar ul.nav > li > a:hover,
nav.navbar ul.nav > li.active > a:hover,
nav.navbar ul.nav li.active > a,
nav.navbar.navbar-transparent ul.nav > li > a:hover,
nav.navbar.no-background ul.nav > li > a:hover {
    color: #fff !important;
    text-shadow: 0 0 6px var(--cata-glow) !important;
}

.btn-info,
.btn-primary {
    background-color: var(--cata-accent-strong);
    border-color: #c94a0c;
    color: #fff;
}
.btn-info:hover, .btn-info:focus,
.btn-primary:hover, .btn-primary:focus {
    background-color: #e25510;
    border-color: #a83c08;
    color: #fff;
}

.cata-info h4 {
    color: #ffb347;
    margin-top: 18px;
}
.cata-info ul {
    text-align: left;
    padding-left: 22px;
}
.cata-info .realm {
    font-weight: bold;
    color: #ffcc80;
}
.cata-connect .realmlist {
    text-align: center;
    font-weight: bold;
    color: #ffb347;
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed var(--cata-accent);
    padding: 6px;
    border-radius: 4px;
}

/* 상단 번개 장식 바: 얼음색 이미지를 주황으로 색 변환한 버전 사용 */
nav.navbar.bootsnav {
    background: url(../images/cata/headerbar_bg.png) no-repeat center 38px, url(../images/cata/headerbar_bg2.png) no-repeat right 38px;
}
nav.navbar.bootsnav:before, nav.navbar.bootsnav:after {
    background-image: url(../images/cata/headerbar_bg.png);
}
.box1 a { color: #ffb347; }