/* ==========================================================================
   Lineage II Chronicle 3: Rise of Darkness - L2 Dolomita Server Stylesheet
   Faithfully inspired by legacy-lineage2.com (2004-2007 NCSoft Era)
   ========================================================================== */

html, body, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, form, fieldset, table, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

ul { list-style-type: none; }

body {
    background: #000 url('../assets/images/body.bg.jpg') top center no-repeat;
    background-color: #03080e;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #e0e0e0;
    font-size: 11px;
    line-height: 1.5;
    min-width: 980px;
}

a {
    color: #43bcc6;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: #ffd868;
    text-decoration: underline;
}

/* ==========================================================================
   MASTER CONTAINER & TWO-COLUMN FLEX LAYOUT
   ========================================================================== */
#main {
    position: relative;
    width: 980px;
    margin: 0 auto 30px auto;
    min-height: 100vh;
}

/* Flex container holding Left Nav & Right Content Column */
#body-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 980px;
    position: relative;
    margin-top: 10px;
}

/* Right Column: stacks Promo Carousel, Content Frame, and Footer vertically */
#main-column {
    flex: 0 0 773px;
    width: 773px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header {
    height: 210px;
    position: relative;
    overflow: visible;
}

#header h1#logo {
    margin: 30px 0 0 7px;
    float: left;
}

#header h1#logo a {
    display: block;
    width: 568px;
    height: 122px;
    background: transparent url('../assets/images/h1.logo.bg.png') no-repeat;
    overflow: hidden;
    text-indent: -5000px;
}

.c3-chronicle-badge {
    position: absolute;
    top: 152px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(8, 25, 45, 0.95), rgba(16, 42, 68, 0.8), transparent);
    border-left: 3px solid #d2ba5b;
    padding: 3px 12px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.c3-chronicle-badge .badge-title {
    font-family: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffd868;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
}

.c3-chronicle-badge .badge-sub {
    font-size: 10px;
    color: #56c8d0;
    letter-spacing: 0.8px;
}

/* Header Quick Top Bar (Server Clock, Status, Discord) */
.header-top-status {
    position: absolute;
    top: 12px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(4, 15, 27, 0.85);
    border: 1px solid #1a3c57;
    padding: 6px 14px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #2ed573;
    border-radius: 50%;
    box-shadow: 0 0 6px #2ed573;
    animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.status-dot.is-offline {
    background-color: #ff4757;
    box-shadow: 0 0 6px #ff4757;
    animation: none;
}

.status-dot.is-pending {
    background-color: #8fa7be;
    box-shadow: none;
    animation: none;
}

.status-text {
    font-weight: bold;
    color: #a4e0ff;
    letter-spacing: 0.5px;
}

.header-clock {
    color: #ffd868;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #5865f2;
    color: #fff !important;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none !important;
    transition: background 0.2s;
}
.header-discord-btn:hover {
    background: #4752c4;
}

/* Header "Entrar" (acesso ao painel da conta) */
.header-login-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, #d2ba5b 0%, #8c7322 100%);
    border: 1px solid #ffd868;
    color: #120e03 !important;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    text-decoration: none !important;
}

.header-login-btn:hover {
    background: linear-gradient(180deg, #ffd868 0%, #a6892a 100%);
}

/* Header Language Selector */
.header-lang-picker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-left: 1px solid #1a4263;
    padding-left: 10px;
    margin-left: 2px;
}

.lang-btn {
    background: #081d30;
    border: 1px solid #19466c;
    color: #8da4be;
    font-family: Verdana, sans-serif;
    font-size: 9.5px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    outline: none;
}

.lang-btn:hover {
    color: #ffd868;
    border-color: #ffd868;
    background: #0f3454;
}

.lang-btn.active {
    background: linear-gradient(180deg, #d2ba5b 0%, #8c7322 100%);
    border-color: #ffd868;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* ==========================================================================
   LEFT NAV CONTAINER (Authentic Stone Frame)
   ========================================================================== */
#nav {
    flex: 0 0 203px;
    width: 203px;
    position: relative;
    background: url('../assets/images/nav/nav.bg.png') repeat-y;
    margin: 48px 0 0 0;
    padding: 32px 16px 14px 15px;
    z-index: 20;
    box-sizing: border-box;
}

#nav-top {
    position: absolute;
    top: -51px;
    left: 0;
    background: url('../assets/images/nav/nav.top.png') top no-repeat;
    width: 203px;
    height: 51px;
    z-index: -1;
}

#nav-bottom {
    position: absolute;
    bottom: -50px;
    left: 0;
    background: url('../assets/images/nav/nav.bottom.png') bottom no-repeat;
    width: 203px;
    height: 50px;
    z-index: -1;
}

#nav-main {
    width: 172px;
    margin-top: -51px;
    margin-bottom: -50px;
    overflow: visible;
}

/* LEFT NAV FIRST LEVEL (Authentic 32px Sprite Buttons) */
#nav-primary a img { border: 0; }

#nav-primary a.nav-primary-button {
    display: block;
    width: 172px;
    height: 32px;
    text-indent: -5000px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: filter 0.15s ease;
}

#nav-home { background: url('../assets/images/nav/nav.buttons.png') center 0px no-repeat; }
#nav-news { background: url('../assets/images/nav/nav.buttons.png') center -32px no-repeat; }
#nav-gamebackground { background: url('../assets/images/nav/nav.buttons.png') center -64px no-repeat; }
#nav-newplayerguide { background: url('../assets/images/nav/nav.buttons.png') center -96px no-repeat; }
#nav-thelibrary { background: url('../assets/images/nav/nav.buttons.png') center -128px no-repeat; }
#nav-community { background: url('../assets/images/nav/nav.buttons.png') center -160px no-repeat; }
#nav-downloads { background: url('../assets/images/nav/nav.buttons.png') center -192px no-repeat; }
#nav-support { background: url('../assets/images/nav/nav.buttons.png') center -224px no-repeat; }
#nav-myaccount { background: url('../assets/images/nav/nav.buttons.png') center -256px no-repeat; }

#nav-primary a.nav-primary-button:hover {
    filter: brightness(1.22) drop-shadow(0 0 4px rgba(210, 186, 91, 0.4));
}

#nav-primary li.nav-item.nav-open > a.nav-primary-button,
#nav-primary li.active > a.nav-primary-button {
    filter: brightness(1.28) drop-shadow(0 0 6px rgba(255, 216, 104, 0.6));
}

/* LEFT NAV SECOND LEVEL (Accordion: Hidden by default) */
.nav-secondary {
    display: none;
    margin: 2px 0 6px 3px;
    padding: 0 0 3px 0;
    overflow: hidden;
}

/* Accordion Active / Open State */
.nav-item.nav-open > .nav-secondary {
    display: block !important;
}

.nav-secondary li {
    margin: 1px 0;
}

.nav-secondary a {
    display: block;
    line-height: 16px;
    vertical-align: middle;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    color: #e0e0e0;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 2px;
}

.nav-secondary a:hover,
.nav-secondary a.active {
    color: #ffd868;
    background-color: rgba(30, 60, 90, 0.35);
    text-decoration: none;
}

.nav-secondary a.nav-expand {
    background: url('../assets/images/nav/nav-trinary-expand.gif') right center no-repeat;
    padding-right: 14px;
}

.nav-secondary a.nav-collapse {
    background: url('../assets/images/nav/nav-trinary-collapse.gif') right center no-repeat;
    padding-right: 14px;
}

/* LEFT NAV TRINARY LEVEL */
.nav-trinary {
    display: none;
    margin-left: 8px;
    padding-left: 4px;
    border-left: 1px dotted #1a3c57;
    overflow: hidden;
}

.nav-trinary.nav-open {
    display: block !important;
}

.nav-trinary li {
    margin: 1px 0;
}

.nav-trinary a {
    display: block;
    line-height: 15px;
    vertical-align: middle;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    color: #9cb4cc;
    text-decoration: none;
    padding: 1px 4px;
}

.nav-trinary a.active,
.nav-trinary a:hover {
    color: #ffd868;
    background-color: rgba(30, 60, 90, 0.4);
    text-decoration: none;
}

/* Nav bottom badges (Retail C3 & Security) */
.nav-server-badge {
    margin-top: 18px;
    padding: 10px;
    background: rgba(4, 18, 32, 0.85);
    border: 1px solid #14354f;
    border-radius: 4px;
    text-align: center;
}

.nav-server-badge h4 {
    font-size: 10px;
    color: #d2ba5b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.nav-server-badge p {
    font-size: 9px;
    color: #8da4be;
    line-height: 1.3;
}

.nav-server-badge .badge-tag {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 6px;
    background: #0d283f;
    border: 1px solid #1a4d77;
    color: #56c8d0;
    font-size: 9px;
    font-weight: bold;
    border-radius: 2px;
}

/* ==========================================================================
   PROMO CAROUSEL BOX (Top of Right Column)
   ========================================================================== */
#promo {
    position: relative;
    margin: 8px 0 0 0;
    padding: 14px 6px 12px 7px;
    width: 773px;
    height: 196px;
    overflow: hidden;
    box-sizing: border-box;
}

#promo-frame {
    position: absolute;
    top: 0;
    left: 0;
    background: url('../assets/images/promo.bg.png') no-repeat;
    width: 773px;
    height: 196px;
    pointer-events: none;
    z-index: 5;
}

#promo-carousel {
    display: block;
    width: 760px;
    height: 174px;
    overflow: hidden;
    background-color: #000;
    position: relative;
}

#promo-carousel li.promo-banner {
    display: none;
    width: 760px;
    height: 174px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#promo-carousel li.promo-banner.active {
    display: block;
    opacity: 1;
}

.promo-graphic {
    float: left;
    width: 450px;
    height: 174px;
    background-color: #000;
    overflow: hidden;
}

.promo-graphic img {
    width: 450px;
    height: 174px;
    object-fit: cover;
    display: block;
}

.promo-blurb {
    float: right;
    width: 310px;
    height: 174px;
    background: linear-gradient(135deg, #021220 0%, #000810 100%);
    padding: 10px 14px 34px 14px;
    box-sizing: border-box;
    position: relative;
}

.promo-blurb h2 {
    margin: 0 0 5px 0;
    font-size: 20px;
    color: #ffbe54;
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    font-weight: normal;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
}

.promo-blurb .promo-body {
    font-size: 10.5px;
    color: #d1d8e0;
    line-height: 1.4;
    margin-bottom: 6px;
}

.promo-blurb .promo-link {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-size: 11px;
    z-index: 8;
}

.promo-blurb .promo-link a {
    color: #56c8d0;
    font-weight: bold;
}

.promo-blurb .promo-link a:hover {
    color: #ffd868;
}

#promo-carousel-nav {
    position: absolute;
    bottom: 12px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 5px;
}

#promo-carousel-nav li {
    display: inline;
}

#promo-carousel-nav li a {
    display: block;
    width: 14px;
    height: 14px;
    background: #14324a url('../assets/images/promo-nav.bg.png') no-repeat center;
    border: 1px solid #23567e;
    text-align: center;
    line-height: 14px;
    font-size: 8px;
    color: #8da4be;
    text-decoration: none;
    border-radius: 2px;
    cursor: pointer;
}

#promo-carousel-nav li.active a,
#promo-carousel-nav li a:hover {
    background-color: #d2ba5b;
    border-color: #ffd868;
    color: #000;
    font-weight: bold;
}

/* ==========================================================================
   CONTENT CONTAINER (Authentic Stone Border & Dark Blue Core)
   ========================================================================== */
#content {
    position: relative;
    background: url('../assets/images/content.bg.png') repeat-y;
    margin: 38px 0 25px 0;
    padding: 6px 9px 9px 9px;
    width: 773px;
    min-height: 500px;
    box-sizing: border-box;
}

#content-top {
    position: absolute;
    top: -36px;
    left: 0;
    background: url('../assets/images/content.top.png') no-repeat;
    width: 773px;
    height: 36px;
}

#content-bottom {
    position: absolute;
    bottom: -33px;
    left: 0;
    background: url('../assets/images/content.bottom.png') no-repeat;
    width: 773px;
    height: 35px;
}

#content-main {
    background: #00213b;
    background: linear-gradient(180deg, #001f38 0%, #001424 50%, #000d17 100%);
    width: 755px;
    margin-top: -36px;
    margin-bottom: -33px;
    padding: 20px 14px 25px 14px;
    overflow: hidden;
    border-left: 1px solid #133a57;
    border-right: 1px solid #133a57;
    box-sizing: border-box;
}

/* Left Column: Articles, News, Content Sections */
#news,
.content-body {
    float: left;
    display: inline;
    width: 540px;
    overflow: hidden;
}

.section {
    padding: 6px 0 14px 0;
    overflow: hidden;
}

.section h2,
h2.section-header {
    background: url('../assets/images/section.h2.bg.png') left bottom no-repeat;
    padding: 4px 0 8px 0;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: normal;
    font-variant: small-caps;
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    color: #56c8d0;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.section h2 small {
    font-size: 10px;
    color: #ffd868;
    font-family: Verdana, sans-serif;
    font-variant: normal;
    font-weight: normal;
}

.article {
    width: 100%;
    padding: 8px 0 12px 0;
    border-bottom: 1px solid rgba(22, 60, 92, 0.4);
    margin-bottom: 10px;
    overflow: hidden;
}

.article:last-child {
    border-bottom: none;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.article-title {
    font-size: 12px;
    font-weight: bold;
    color: #d2ba5b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-title.new::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 11px;
    background: url('../assets/images/new.gif') no-repeat center;
}

.article-date {
    font-size: 10px;
    color: #56c8d0;
}

.article-body {
    font-size: 11px;
    font-weight: normal;
    color: #d1d8e0;
    line-height: 1.55;
    margin-bottom: 8px;
}

.article-body p + p {
    margin-top: 8px;
}

.article-link {
    font-size: 11px;
    margin-top: 4px;
}

.article-quote {
    font-size: 12px;
    font-style: italic;
    color: #ffd868;
    text-align: center;
    margin: 12px 0 6px 0;
    padding: 8px 14px;
    background: rgba(7, 27, 46, 0.6);
    border-left: 2px solid #d2ba5b;
    border-right: 2px solid #d2ba5b;
    border-radius: 2px;
}

/* ==========================================================================
   RIGHT COLUMN INSIDE CONTENT (Server Status, Rates, Bosses, Quick Actions)
   ========================================================================== */
#rightCol {
    float: right;
    width: 174px;
    display: inline;
    margin-right: -2px;
}

.sidebar-widget {
    background: rgba(4, 18, 33, 0.9);
    border: 1px solid #163e60;
    border-radius: 4px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.widget-title {
    background: linear-gradient(180deg, #103250 0%, #082033 100%);
    border-bottom: 1px solid #1b4970;
    padding: 6px 8px;
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    font-size: 11px;
    color: #ffd868;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-body {
    padding: 8px;
}

/* Quick Action CTA Buttons */
.cta-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 8px 6px;
    margin-bottom: 7px;
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 3px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.6);
}

.cta-button.cta-gold {
    background: linear-gradient(180deg, #d2ba5b 0%, #8c7322 100%);
    border: 1px solid #ffd868;
    color: #120e03 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.cta-button.cta-gold:hover {
    background: linear-gradient(180deg, #ffd868 0%, #a6892a 100%);
    transform: translateY(-1px);
}

.cta-button.cta-blue {
    background: linear-gradient(180deg, #2b6cb0 0%, #1a446c 100%);
    border: 1px solid #4299e1;
    text-shadow: 0 1px 2px #000;
}

.cta-button.cta-blue:hover {
    background: linear-gradient(180deg, #3182ce 0%, #205384 100%);
    transform: translateY(-1px);
}

.cta-button.cta-dark {
    background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
    border: 1px solid #4a5568;
    text-shadow: 0 1px 2px #000;
}

.cta-button.cta-dark:hover {
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 100%);
    transform: translateY(-1px);
}

.cta-button.cta-teal {
    background: linear-gradient(180deg, #2a8f97 0%, #16535a 100%);
    border: 1px solid #56c8d0;
    text-shadow: 0 1px 2px #000;
}

.cta-button.cta-teal:hover {
    background: linear-gradient(180deg, #36a9b2 0%, #1d666e 100%);
    transform: translateY(-1px);
}

/* Server Status Grid */
.status-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;
    font-size: 10px;
}

.status-label {
    color: #8fa7be;
}

.status-val {
    font-weight: bold;
    color: #fff;
    text-align: right;
}

.status-val.online-count {
    color: #2ed573;
    font-size: 11px;
}

.status-val.is-online { color: #2ed573; }
.status-val.is-offline { color: #ff4757; }
.status-val.is-pending { color: #8fa7be; }

.rates-list {
    font-size: 10px;
    line-height: 1.6;
}

.rates-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(22, 62, 96, 0.4);
}

.rates-row:last-child {
    border-bottom: none;
}

.rates-name {
    color: #9cb4cc;
}

.rates-multiplier {
    font-weight: bold;
    color: #ffd868;
}

/* Seven Signs mini bar */
.seven-signs-mini {
    margin-top: 4px;
}

.cabal-bar {
    width: 100%;
    height: 10px;
    background: #111;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    border: 1px solid #234b6e;
    margin: 4px 0 6px 0;
}

.cabal-bar-dawn {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
    height: 100%;
}

.cabal-bar-dusk {
    background: linear-gradient(90deg, #8e44ad, #9b59b6);
    height: 100%;
}

.cabal-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
}

.cabal-label-dawn { color: #2ecc71; font-weight: bold; }
.cabal-label-dusk { color: #a55eea; font-weight: bold; }

/* Cat mascot donate box */
.donate {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    color: #9cb4cc;
    text-align: center;
    padding: 10px 6px;
}

.donate img.cat-img {
    max-width: 90px;
    height: auto;
    display: block;
    margin: 0 auto 6px auto;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}

.donate p {
    margin: 4px 0 8px 0;
    font-size: 10px;
    color: #b5c7d8;
}

/* ==========================================================================
   FOOTER (Authentic NCSoft frame and credits)
   ========================================================================== */
#footer {
    position: relative;
    background: url('../assets/images/content.bg.png') repeat-y;
    margin: 25px 0 35px 0;
    padding: 6px 9px 9px 9px;
    width: 773px;
    box-sizing: border-box;
}

#footer-top {
    position: absolute;
    top: -36px;
    left: 0;
    background: url('../assets/images/content.top.png') no-repeat;
    width: 773px;
    height: 36px;
}

#footer-bottom {
    position: absolute;
    bottom: -33px;
    left: 0;
    background: url('../assets/images/content.bottom.png') no-repeat;
    width: 773px;
    height: 35px;
}

#footer-main {
    position: relative;
    background: #00213b;
    background: linear-gradient(180deg, #001b30 0%, #000c17 100%);
    width: 755px;
    min-height: 110px;
    margin-top: -36px;
    margin-bottom: -33px;
    overflow: hidden;
    padding: 12px 16px;
    box-sizing: border-box;
    border-left: 1px solid #133a57;
    border-right: 1px solid #133a57;
}

#footer-ncsoft {
    float: right;
    display: inline;
    width: 102px;
    height: 90px;
    background: url('../assets/images/footer-ncsoft.png') right center no-repeat;
    text-indent: -5000px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

#footer-ncsoft:hover {
    opacity: 1;
}

#footer-rating-esrb {
    display: block;
    float: left;
    width: 164px;
    height: 73px;
    background: url('../assets/images/footer-rating-esrb.png') no-repeat;
    text-indent: -5000px;
    margin-right: 20px;
    opacity: 0.85;
}

.footer-info-block {
    float: left;
    max-width: 440px;
}

#footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

#footer-nav li a {
    font-size: 10px;
    color: #ffd868;
    text-decoration: none;
}

#footer-nav li a:hover {
    color: #fff;
    text-decoration: underline;
}

#footer-copyright {
    font-size: 9.5px;
    color: #7b92a8;
    line-height: 1.45;
}

/* ==========================================================================
   INTERIOR CONTENT STYLES (Tables, Forms, Badges, Tabs)
   ========================================================================== */
.table-l2 {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 11px;
}

.table-l2 th {
    background: linear-gradient(180deg, #1f476a 0%, #102d45 100%);
    color: #ffd868;
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    padding: 7px 10px;
    border: 1px solid #285f8c;
}

.table-l2 td {
    padding: 7px 10px;
    border: 1px solid #143753;
    color: #d1d8e0;
}

.table-l2 tr:nth-child(even) td {
    background-color: rgba(6, 24, 42, 0.65);
}

.table-l2 tr:nth-child(odd) td {
    background-color: rgba(3, 14, 25, 0.45);
}

.table-l2 tr:hover td {
    background-color: rgba(22, 59, 94, 0.5);
}

/* Feature cards grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 14px 0;
}

.feature-card {
    background: rgba(6, 25, 43, 0.7);
    border: 1px solid #164064;
    border-radius: 4px;
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #d2ba5b;
}

.feature-card h3 {
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    font-size: 12px;
    color: #ffd868;
    margin-bottom: 4px;
}

.feature-card p {
    font-size: 10.5px;
    color: #9cb4cc;
    line-height: 1.45;
}

/* Form Styles */
.form-group {
    margin-bottom: 12px;
}

.form-label {
    display: block;
    font-size: 11px;
    color: #ffd868;
    margin-bottom: 4px;
    font-weight: bold;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    background: #020f1c;
    border: 1px solid #1b4970;
    color: #fff;
    padding: 8px 10px;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #ffd868;
    box-shadow: 0 0 6px rgba(255, 216, 104, 0.4);
}

.form-help {
    font-size: 9.5px;
    color: #7b94ad;
    margin-top: 3px;
}

/* Toast alert modal */
.toast-notice {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #041d33;
    border: 1px solid #ffd868;
    color: #fff;
    padding: 12px 18px;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
    display: none;
    z-index: 10000;
    max-width: 320px;
    font-size: 11px;
}

/* Utility clearfix */
.clearBoth {
    clear: both;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   ACCOUNT PANEL (ucp/)
   ========================================================================== */
.ucp-alert {
    padding: 8px 12px;
    margin: 0 0 12px 0;
    border-radius: 3px;
    font-size: 11px;
    border: 1px solid;
}

.ucp-alert-success {
    background: rgba(8, 48, 28, 0.85);
    border-color: #2ed573;
    color: #c9f7d9;
}

.ucp-alert-error {
    background: rgba(60, 10, 14, 0.85);
    border-color: #ff4757;
    color: #ffd2d6;
}

.ucp-form {
    background: rgba(4, 21, 38, 0.7);
    border: 1px solid #1a4970;
    border-radius: 4px;
    padding: 16px;
    margin: 12px 0;
    max-width: 380px;
}

.ucp-form .cta-button {
    margin: 6px 0 0 0;
}

.ucp-form-link {
    margin-top: 10px;
    font-size: 10.5px;
    text-align: center;
}

.ucp-turnstile {
    min-height: 65px; /* reserva o espaço do widget Turnstile enquanto carrega */
}

.ucp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.cta-button.ucp-btn-inline {
    width: auto;
    display: inline-block;
    padding: 6px 14px;
    margin: 0;
}

.ucp-subheading {
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
    font-size: 12px;
    color: #ffd868;
    margin: 16px 0 6px 0;
}

.ucp-list {
    list-style: disc;
    padding-left: 16px;
    color: #9cb4cc;
    font-size: 10.5px;
}

.ucp-account-table th {
    width: 170px;
}

.ucp-chars-table td,
.ucp-chars-table th {
    padding: 6px 7px;
    vertical-align: middle;
}

.ucp-chars-table form {
    margin: 0;
}

.cta-button.ucp-btn-small {
    width: auto;
    display: inline-block;
    padding: 3px 9px;
    font-size: 9.5px;
    margin: 0;
}

button.cta-button {
    font-family: "Cinzel", "Palatino Linotype", Georgia, serif;
}

.ucp-gold { color: #ffd868; }
.ucp-ok { color: #2ed573; font-weight: bold; }
.ucp-warn { color: #ffbe54; font-weight: bold; }
.ucp-muted { color: #8fa7be; }

.ucp-small {
    font-size: 9.5px;
    color: #8fa7be;
}

.ucp-side-login {
    color: #ffd868;
    font-size: 10.5px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
    word-break: break-all;
}

.ucp-side-text {
    font-size: 10px;
    color: #9cb4cc;
    line-height: 1.5;
}

/* ==========================================================================
   LIVE SERVER DATA (js/live.js?v=bb8af05cad) + RAID BOSS MAP
   ========================================================================== */
.live-empty { font-size: 10px; color: #8fa7be; text-align: center; padding: 4px 0; }
.live-line { font-size: 9.5px; color: #8da4be; margin-bottom: 4px; }
.live-center { text-align: center; margin-top: 4px; }
.live-link { margin-top: 6px; text-align: center; font-size: 9.5px; }
.live-bosses .rates-row { align-items: center; }

.boss-status { font-size: 9.5px; font-weight: bold; }
.boss-status.boss-alive { color: #2ed573; }
.boss-status.boss-dead, .boss-dead-text { color: #ff4757; }
.boss-status.boss-unknown { color: #8fa7be; }

.live-panel { background: rgba(5, 23, 40, 0.85); border: 1px solid #1a4970; border-radius: 4px; padding: 14px; margin: 10px 0; }
.live-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.live-panel-head h3 { font-family: "Cinzel", "Palatino Linotype", Georgia, serif; font-size: 15px; color: #ffd868; }
.live-right { text-align: right; }
.live-score-labels { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; margin-bottom: 4px; }
.cabal-bar.live-bar-big { height: 14px; }
.live-seals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.live-seal { background: #020d18; border: 1px solid #183e60; padding: 8px; border-radius: 3px; font-size: 10px; }
.live-seal h4 { color: #ffd868; font-size: 11px; margin-bottom: 4px; }
.live-foot { margin-top: 10px; }

/* Conteúdo em largura total (sem a coluna lateral), usado pelo mapa. */
.content-body.content-wide { width: 100%; float: none; display: block; }

.bossmap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 8px 0; font-size: 10.5px; }
.bossmap-toolbar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.bossmap-search { width: 170px; padding: 5px 8px; }
.bossmap-zoom { margin-left: auto; display: inline-flex; gap: 4px; }
.bossmap-zoom button {
    width: 26px; height: 24px; background: #0c2640; border: 1px solid #23567e; color: #ffd868;
    font-weight: bold; border-radius: 3px; cursor: pointer;
}
.bossmap-zoom button:hover { border-color: #ffd868; }

.bossmap-viewport {
    position: relative; width: 100%; height: 560px; overflow: hidden;
    background: #0e263e; border: 2px solid #1a4970; border-radius: 4px; cursor: grab; touch-action: none;
}
.bossmap-viewport.is-dragging { cursor: grabbing; }
.bossmap-layer { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 0 0; --inv: 1; }
.bossmap-layer img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.bossmap-markers { position: absolute; inset: 0; }

.boss-marker {
    position: absolute; width: 11px; height: 11px; padding: 0; border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.75); cursor: pointer;
    transform: translate(-50%, -50%) scale(var(--inv));
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
.boss-marker.boss-alive { background: #2ed573; box-shadow: 0 0 7px #2ed573; }
.boss-marker.boss-dead { background: #ff4757; }
.boss-marker.boss-unknown { background: #9aa9b8; }
.boss-marker.is-grand { width: 16px; height: 16px; border: 3px solid #ffd868; }
.boss-marker.is-selected { outline: 3px solid #fff; outline-offset: 2px; z-index: 2; }
.boss-marker:hover { z-index: 3; filter: brightness(1.3); }

.boss-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.boss-dot.boss-alive { background: #2ed573; }
.boss-dot.boss-dead { background: #ff4757; }
.boss-dot.boss-unknown { background: #9aa9b8; }
.boss-dot.boss-grand { background: transparent; border: 2px solid #ffd868; }

.bossmap-tip {
    position: absolute; z-index: 5; min-width: 150px; max-width: 200px; pointer-events: none;
    background: rgba(2, 12, 22, 0.95); border: 1px solid #ffd868; border-radius: 3px;
    padding: 6px 8px; font-size: 10.5px; color: #e0e0e0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.bossmap-count { margin: 6px 0; text-align: right; }
.bossmap-table tr.is-selected td { background-color: rgba(255, 216, 104, 0.12); }

/* ==========================================================================
   SMARTPHONE / TABLET (< 1000px)
   O layout legacy de 980px fica intacto no desktop; abaixo disso a página vira
   uma coluna, o menu lateral vira botão "☰ Menu" (js/main.js?v=7a3b0ba714) e as molduras de
   pedra (imagens de largura fixa) viram bordas CSS com as mesmas cores.
   ========================================================================== */
.mobile-nav-toggle { display: none; }

@media (max-width: 999px) {
    body { min-width: 0; font-size: 13px; background-size: 1400px auto; }
    #main { width: auto; padding: 0 10px; margin-bottom: 16px; }
    img { max-width: 100%; height: auto; }

    /* Cabeçalho */
    #header { height: auto; margin: 0; padding: 10px 0 6px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    #header h1#logo { float: none; margin: 0; width: 100%; max-width: 420px; }
    #header h1#logo a { width: 100%; height: 0; padding-bottom: 21.5%; background-size: contain; }
    .c3-chronicle-badge { position: static; }
    .header-top-status { position: static; order: -1; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 10px; width: 100%; }
    .header-lang-picker { border-left: none; padding-left: 0; }
    .lang-btn, .header-login-btn, .header-discord-btn { padding: 6px 10px; font-size: 12px; }

    /* Uma coluna */
    #body-layout { display: block; width: auto; margin-top: 0; }
    #main-column { width: auto; display: block; }

    /* Menu: botão + acordeão */
    #nav { width: auto; margin: 0 0 10px 0; padding: 0; background: none; }
    #nav-top, #nav-bottom, .nav-server-badge { display: none; }
    #nav-main { width: auto; margin: 0; float: none; }
    .mobile-nav-toggle {
        display: block; width: 100%; padding: 12px; font-family: "Cinzel", Georgia, serif; font-size: 15px; font-weight: bold;
        color: #ffd868; background: linear-gradient(180deg, #103250 0%, #082033 100%); border: 1px solid #1b4970; border-radius: 4px; cursor: pointer;
    }
    #nav-primary { display: none; margin-top: 6px; padding: 8px; background: rgba(4, 18, 33, 0.95); border: 1px solid #163e60; border-radius: 4px; }
    body.nav-mobile-open #nav-primary { display: block; }
    #nav-primary a.nav-primary-button { margin: 4px auto; }
    .nav-secondary { margin: 4px auto 8px auto; max-width: 320px; }
    .nav-secondary a { font-size: 14px; line-height: 20px; padding: 7px 10px; }

    /* Banner */
    #promo { width: auto; height: auto; margin: 0 0 12px 0; padding: 0; border: 1px solid #1b4970; border-radius: 4px; }
    #promo-frame { display: none; }
    #promo-carousel { width: 100%; height: auto; }
    #promo-carousel li.promo-banner { position: relative; width: 100%; height: auto; }
    .promo-graphic, .promo-graphic img { float: none; width: 100%; height: 150px; }
    .promo-blurb { float: none; width: 100%; height: auto; padding: 12px 12px 44px 12px; }
    .promo-blurb .promo-body { font-size: 13px; }
    #promo-carousel-nav { bottom: 12px; right: 12px; }
    #promo-carousel-nav li a { width: 22px; height: 22px; line-height: 22px; font-size: 11px; }

    /* Conteúdo e rodapé: moldura de pedra -> borda CSS */
    #content, #footer { width: auto; margin: 0 0 12px 0; padding: 0; background: none; min-height: 0; }
    #content-top, #content-bottom, #footer-top, #footer-bottom { display: none; }
    #content-main, #footer-main {
        width: auto; margin: 0; padding: 14px 12px; float: none;
        border: 1px solid #1a4970; border-radius: 4px; box-shadow: 0 0 0 2px rgba(210, 186, 91, 0.25);
    }
    #news, .content-body { float: none; display: block; width: auto; }
    #rightCol { float: none; display: block; width: auto; margin: 16px 0 0 0; }
    #footer-rating-esrb, #footer-ncsoft { float: none; display: inline-block; vertical-align: middle; }
    .footer-info-block { float: none; max-width: none; margin: 10px 0; }
    #footer-nav li a { font-size: 13px; }

    /* Tipografia legível (inclui textos com tamanho pequeno embutido no HTML) */
    .article-body, .article-body p, .feature-card p, .rates-list, .status-grid, .form-help, .ucp-small, .live-line, .ucp-side-text { font-size: 13px; }
    .article-title, .table-l2, .table-l2 th { font-size: 13px; }
    .section h2, h2.section-header { font-size: 20px; flex-wrap: wrap; }
    #content-main [style*="font-size: 9"], #content-main [style*="font-size: 10"], #content-main [style*="font-size: 11"],
    #content-main [style*="font-size:9"], #content-main [style*="font-size:10"], #content-main [style*="font-size:11"] { font-size: 13px !important; }

    /* Tabelas largas rolam dentro da própria caixa */
    .table-l2 { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .ucp-account-table { white-space: normal; }
    .ucp-account-table th { width: auto; }

    /* Grades e blocos embutidos */
    .feature-grid, .live-seals { grid-template-columns: 1fr; }
    .m-stack { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
    .m-media { flex-direction: column; }
    .m-media img { width: 100% !important; }
    .m-wrap { flex-wrap: wrap; gap: 4px; }
    .live-panel-head, .live-score-labels { flex-direction: column; gap: 6px; }
    .live-right { text-align: left; }

    /* Botões e formulários fáceis de tocar */
    .cta-button { padding: 12px 10px; font-size: 13px; }
    .cta-button.ucp-btn-small { padding: 8px 12px; font-size: 12px; }
    .form-input, .form-select, .form-textarea { font-size: 16px; padding: 10px 12px; }
    .ucp-form { max-width: none; padding: 14px 12px; }
    .ucp-actions .cta-button.ucp-btn-inline { flex: 1 1 100%; text-align: center; }

    /* Mapa de raids */
    .bossmap-viewport { height: auto; aspect-ratio: 1642 / 1476; }
    .bossmap-table { display: table; white-space: normal; }
    .bossmap-toolbar { gap: 8px 12px; font-size: 13px; }
    .bossmap-search { width: 100%; }
    .bossmap-zoom { margin-left: 0; }
    .bossmap-zoom button { width: 40px; height: 36px; font-size: 18px; }
    .boss-marker { width: 14px; height: 14px; }
    .boss-marker.is-grand { width: 20px; height: 20px; }
}

/* ==========================================================================
   ÁRVORE DE SKILLS (skills.html / js/skilltree.js)
   ========================================================================== */
.st-races { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0 0; border-bottom: 1px solid #1a4970; }
.st-race {
    padding: 6px 14px; font-family: "Cinzel", Georgia, serif; font-size: 12px; font-weight: bold; color: #56c8d0; cursor: pointer;
    background: #071b2e; border: 1px solid #1a4970; border-bottom: none; border-radius: 4px 4px 0 0;
}
.st-race:hover { color: #ffd868; }
.st-race.is-active { color: #ffd868; background: #0e2c48; }

.st-tree { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 16px 8px; background: rgba(4, 18, 33, 0.7); border: 1px solid #1a4970; border-top: none; }
.st-branch { display: flex; flex-direction: column; align-items: center; }
.st-root { position: relative; padding-bottom: 12px; }
.st-root::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 12px; border-left: 1px solid #2f6a94; }
.st-firsts { display: flex; gap: 8px; border-top: 1px solid #2f6a94; padding-top: 12px; }
.st-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-seconds { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed #1f4d70; }

.st-node {
    display: flex; flex-direction: column; align-items: center; width: 118px; padding: 5px 4px; cursor: pointer;
    font-family: "Cinzel", Georgia, serif; line-height: 1.15; text-align: center; color: #e8dcae;
    background: linear-gradient(180deg, #5b4a22 0%, #3a2e14 100%); border: 1px solid #8d7433; border-radius: 3px;
}
.st-node.st-tier-0 { background: linear-gradient(180deg, #6e5a28 0%, #473817 100%); }
.st-node.st-tier-2 { background: linear-gradient(180deg, #3d3218 0%, #2a2210 100%); }
.st-node-name { font-size: 11px; font-weight: bold; }
.st-node-lv { font-family: Verdana, sans-serif; font-size: 9px; color: #b8a878; }
.st-node:hover { border-color: #ffd868; color: #fff; }
.st-node.is-path { border-color: #56c8d0; }
.st-node.is-active { border-color: #ffd868; color: #ffd868; box-shadow: 0 0 8px rgba(255, 216, 104, 0.55); }

.st-panel { margin-top: 14px; }
.st-panel-head h3 { font-family: "Cinzel", Georgia, serif; font-size: 16px; color: #ffd868; }
.st-panel-tier { margin-left: 6px; font-family: Verdana, sans-serif; font-size: 10px; color: #56c8d0; }
.st-path { margin: 2px 0 8px 0; font-size: 10.5px; color: #8da4be; }
.st-path strong { color: #e0e8f0; }
.st-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 10.5px; }
.st-controls label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.st-search { width: 220px; padding: 5px 8px; }
.st-table { width: 100%; }
.st-table tr.st-group td { background: #0e2c48; color: #ffd868; font-weight: bold; }
.st-num { text-align: center; white-space: nowrap; }
.st-book { color: #56c8d0; }
.st-auto { color: #2ecc71; }
.st-skill { display: flex; align-items: center; gap: 8px; }
.st-icon {
    flex: 0 0 auto; box-sizing: content-box; width: 32px; height: 32px; border: 1px solid #1a4970; border-radius: 2px; background-color: #030d18;
    background-image: url("../assets/images/skills/skill-icons.webp?v=8a5c7a9391"); background-repeat: no-repeat;
}
.st-origin { margin-left: 4px; font-size: 9px; color: #8da4be; }
.st-total { margin-top: 6px; text-align: right; color: #8da4be; }
.st-note { margin-top: 8px; font-size: 10px; color: #8da4be; }
.st-empty { padding: 12px 0; color: #8da4be; }

@media (max-width: 999px) {
    .st-race { font-size: 13px; padding: 8px 10px; }
    .st-tree { flex-direction: column; align-items: stretch; gap: 14px; padding: 12px 6px; }
    .st-firsts { flex-wrap: wrap; justify-content: center; }
    .st-node { width: 104px; }
    .st-node-name { font-size: 11px; }
    .st-search { width: 100%; }
    .st-table { white-space: normal; }
    .st-path, .st-controls, .st-note, .st-origin { font-size: 13px !important; }
}

/* ==========================================================================
   BASE DE DADOS (database.html / js/database.js)
   ========================================================================== */
.db-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px 0; border-bottom: 1px solid #1a4970; }
.db-sections { display: flex; flex-wrap: wrap; gap: 4px; }
.db-sections a {
    padding: 6px 14px; font-family: "Cinzel", Georgia, serif; font-size: 12px; font-weight: bold; color: #56c8d0; text-decoration: none;
    background: #071b2e; border: 1px solid #1a4970; border-bottom: none; border-radius: 4px 4px 0 0;
}
.db-sections a:hover, .db-sections a.is-active { color: #ffd868; background: #0e2c48; }
.db-search { flex: 0 1 300px; margin-bottom: 4px; }
.db-search .form-input { width: 100%; padding: 5px 8px; }
.db-rates { margin: 6px 0 8px 0; font-size: 10px; color: #8da4be; }
.db-view { min-height: 200px; }
.db-loading, .db-count { color: #8da4be; margin: 6px 0; }
.db-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.db-chip { padding: 3px 9px; font-size: 10.5px; color: #b5c7d8; text-decoration: none; background: #071b2e; border: 1px solid #1a4970; border-radius: 12px; }
.db-chip:hover { color: #ffd868; border-color: #2f6a94; }
.db-chip.is-active { color: #0b1a28; background: #ffd868; border-color: #ffd868; font-weight: bold; }
.db-table { width: 100%; margin: 4px 0 10px 0; }
.db-table th[data-sort] { cursor: pointer; user-select: none; }
.db-table th.is-sorted { color: #ffd868; }
.db-num { text-align: center; white-space: nowrap; }
.db-table tr.db-group td { background: #0e2c48; color: #ffd868; font-weight: bold; }
.db-pager { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; }
.db-pager button { min-width: 28px; padding: 3px 6px; color: #b5c7d8; background: #071b2e; border: 1px solid #1a4970; border-radius: 3px; cursor: pointer; }
.db-pager button.is-active { color: #0b1a28; background: #ffd868; border-color: #ffd868; }

.db-icon { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid #1a4970; border-radius: 2px; background: #030d18; vertical-align: middle; }
.db-icon-empty { display: inline-block; }
.db-item { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.db-add { color: #56c8d0; font-size: 0.92em; }
.db-title { color: #8da4be; font-size: 0.9em; }
.db-grade { display: inline-block; min-width: 14px; padding: 0 3px; font-size: 9px; font-weight: bold; line-height: 14px; text-align: center; color: #0b1a28; border-radius: 2px; background: #9aa7b4; }
.db-grade-d { background: #9ec7e0; } .db-grade-c { background: #7fd37f; } .db-grade-b { background: #e0c060; } .db-grade-a { background: #e89a4c; } .db-grade-s { background: #e86a6a; }
.db-flag { display: inline-block; margin: 0 1px; padding: 0 4px; font-size: 9px; font-weight: bold; color: #0b1a28; background: #56c8d0; border-radius: 2px; }
.db-flag-s { background: #ffd868; }

.db-head { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px 0; }
.db-head h3 { font-family: "Cinzel", Georgia, serif; font-size: 16px; color: #ffd868; }
.db-sub { font-size: 10px; color: #8da4be; }
.db-desc { margin: 4px 0 8px 0; color: #b5c7d8; white-space: pre-line; }
.db-stats { display: grid; grid-template-columns: repeat(auto-fill, 130px 120px); gap: 3px 10px; margin: 6px 0 10px 0; }
.db-stats dt { color: #8da4be; }
.db-stats dd { margin: 0; color: #e0e8f0; }
.db-section { margin: 12px 0; }
.db-section h3 { margin-bottom: 4px; font-family: "Cinzel", Georgia, serif; font-size: 13px; color: #56c8d0; }
.db-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.db-list-npc span { white-space: nowrap; }
.db-skill { display: inline-flex; align-items: center; gap: 6px; }
.db-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; border-bottom: 1px solid #1a4970; }
.db-tab { padding: 5px 12px; color: #56c8d0; text-decoration: none; background: #071b2e; border: 1px solid #1a4970; border-bottom: none; border-radius: 4px 4px 0 0; }
.db-tab.is-active, .db-tab:hover { color: #ffd868; background: #0e2c48; }
.db-tab small { color: #8da4be; }
.db-note { font-size: 10px; color: #8da4be; }
.db-recipe { margin: 6px 0; padding: 6px 8px; background: rgba(4, 18, 33, 0.7); border: 1px solid #1a4970; border-radius: 3px; }
.db-recipe-mats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; }
.db-mat { display: inline-block; margin: 2px 8px 2px 0; }
.db-set { margin: 8px 0; padding: 8px; background: rgba(4, 18, 33, 0.7); border: 1px solid #1a4970; border-radius: 3px; }
.db-set-skills { margin-top: 6px; }
.db-map { margin: 6px 0 10px 0; border: 1px solid #1a4970; background: #030d18; }
.db-map svg { display: block; width: 100%; height: auto; max-height: 520px; }
.db-map-area { fill: rgba(255, 90, 60, 0.35); stroke: #ff5a3c; stroke-width: 2; vector-effect: non-scaling-stroke; }
.db-map-point { fill: #ff5a3c; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

@media (max-width: 999px) {
    .db-sections a { font-size: 13px; padding: 8px 10px; }
    .db-search { flex-basis: 100%; }
    .db-chip { font-size: 13px; padding: 5px 10px; }
    .db-rates, .db-sub, .db-note { font-size: 12px !important; }
    .db-stats { grid-template-columns: 1fr 1fr; }
    .db-table { white-space: normal; }
    .db-table td { font-size: 13px; }
}