/* Main Priston Tale sobre o template WestWar (Pixarts, /tpl). Aqui só ficam os
   ajustes: fonte local (a CSP não deixa carregar o Google Fonts), a nossa logo no
   lugar da do template e os blocos que o template não tem (eventos, classes). */

@font-face { font-family: 'Open Sans'; font-weight: 300; font-display: swap; src: url(/fonts/open-sans-latin-300-normal.woff2) format('woff2') }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url(/fonts/open-sans-latin-400-normal.woff2) format('woff2') }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url(/fonts/open-sans-latin-600-normal.woff2) format('woff2') }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url(/fonts/open-sans-latin-700-normal.woff2) format('woff2') }
@font-face { font-family: 'Open Sans'; font-weight: 800; font-display: swap; src: url(/fonts/open-sans-latin-800-normal.woff2) format('woff2') }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
a { color: #fabc86 }

/* cursor do jogo (assets/ui/cursors): seta padrão no site todo e a de ATAQUE (pedra
   vermelha) no que é clicável. !important porque o template põe cursor: pointer
   avulso em várias classes. Campos de texto mantêm o cursor de digitação. */
html, body, body * { cursor: url(/images/cursors/default.png) 0 0, auto !important }
a, a *, button, button *, summary, select, label, [role="button"], [role="button"] *,
[data-tab], [data-tab] *, [data-tab-link], .selector, .rank-switch, .rmt-btn, .rkf-btn,
.page, .cs-face, .cs-face *, .avatar-edit, .avatar-edit *, .pres-nav-link, input[type="checkbox"],
input[type="submit"], input[type="file"] { cursor: url(/images/cursors/attack.png) 0 0, pointer !important }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea { cursor: text !important }

/* ---------- navbar ---------- */
.pixarts-nav .logo-head { position: relative }
.pixarts-nav .logo-head img {
    width: auto; height: 80px; left: 50%; top: -6px;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8))
}
.pixarts-nav .l-menu a.active span, .pixarts-nav .r-menu a.active span { color: #fabc86 }
.subpage-header .pixarts-nav.sub-nav { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3 }

.pixarts-nav i.sign {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; color: #c9a27a
}
.pixarts-nav i.sign svg, .box-ico svg { width: 100%; height: 100%; display: block }
.pixarts-nav a.active i.sign { color: #fabc86 }
.c-right-side .widget-box .head .title .box-ico { display: inline-block; width: 15px; height: 15px; margin-right: 8px; color: #fabc86; vertical-align: -2px }
/* o template referencia content-bg.jpg, que não vem no pacote: evita o 404 em toda página */
.pixarts-site-content { background-image: none }

/* ---------- hero ---------- */
/* cenário: Coração de Perum à meia-noite, capturado no jogo (tools_map_shot) e
   tratado (tools/map_grade.py) — no lugar do templo do template */
.pixarts-header { background-image: url(/images/hero/perum-bg.jpg) }
.subpage-header::before { background-image: url(/images/hero/perum-bg.jpg) }
.pixarts-header .logo-hero {
    width: 660px; height: auto;
    left: calc(50% - 640px);
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .85))
}
.pixarts-header:hover .logo-hero { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .85)) brightness(112%) }
.sub-hero-text { display: flex; flex-direction: column; align-items: center; margin-top: 50px; width: 100% }
h1.subpage-hero-title { margin: 0; font-weight: normal; line-height: 1.2 }

/* ---------- home: mídia e notícias ---------- */
.c-left-side .media-box video { width: 610px; height: 258px; object-fit: cover; display: block }
.c-left-side .news-row .news-navbar h2.heading { margin: 0; font-weight: 700 }
.n-tag { cursor: default; pointer-events: none }
.news .avatar img { width: 51px; height: 51px; object-fit: cover; border-radius: 2px }
.news .n-desc p { word-wrap: break-word }
.news-empty { padding: 40px 30px; color: #96847a; font-size: 13px; text-align: center }
.news-list { padding: 18px 30px 26px }
.nl-row { display: flex; align-items: center; gap: 14px; height: 40px; border-bottom: 1px solid #211515; font-size: 13px; color: #d0baa4 }
.nl-row:last-child { border-bottom: none }
.nl-tag { min-width: 76px; text-align: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #96847a; border: 1px solid #2D1F17; padding: 3px 6px }
.nl-tag.upd { color: #fabc86; border-color: #6b4a2a }
.nl-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nl-date { color: #6e4948; font-size: 12px }

.c-left-side .news-row.extra-box { margin-top: 14px }
.events-row { display: flex; gap: 2px; padding: 24px 30px 30px }
.ev-card { flex: 1; background: #120A0B; border: 1px solid #2A1C1C; padding: 26px 18px; text-align: center; transition: border-color .2s }
.ev-card:hover { border-color: #4a3020 }
.ev-icon { font-size: 30px; color: #fabc86; text-shadow: 0 0 18px rgba(250, 188, 134, .45); line-height: 1 }
.ev-title { font-family: 'TrajanProBold', serif; color: #ffefeb; font-size: 15px; letter-spacing: 1px; margin: 12px 0 6px }
.ev-desc { font-size: 12px; color: #96847a }

.class-show { display: flex; gap: 30px; padding: 26px 30px 10px; align-items: center }
.cs-portrait { width: 190px; min-width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #2a1512 0%, #120A0B 70%); border: 1px solid #2A1C1C }
.cs-portrait img { width: 170px; height: 170px; object-fit: contain }
.cs-info { flex: 1 }
.cs-name { font-family: 'TrajanProBold', serif; font-size: 24px; color: #ffefeb; letter-spacing: 2px }
.cs-role { font-family: 'TrajanProRegular', serif; font-size: 11px; letter-spacing: 3px; color: #fabc86; text-transform: uppercase; margin-top: 2px }
.cs-desc { font-size: 13px; color: #96847a; margin: 10px 0 14px; line-height: 1.6 }
.cs-stats-title { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #6e4948; margin-bottom: 6px }
.cs-stat { display: flex; align-items: center; gap: 12px; height: 22px; font-size: 12px; color: #d0baa4 }
.cs-stat .k { width: 80px }
.cs-stat .bar { flex: 1; height: 6px; background: #110A0A; border: 1px solid #2D1F17 }
.cs-stat .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a4b25, #fabc86); transition: width .3s }
.cs-stat .v { width: 22px; text-align: right; color: #fabc86 }
.cs-pick { display: flex; gap: 6px; justify-content: center; padding: 14px 30px 30px; flex-wrap: wrap }
.cs-face { width: 56px; height: 56px; padding: 3px; background: #110A0A; border: 1px solid #2A1C1C; cursor: pointer; transition: border-color .2s, filter .2s; filter: grayscale(60%) brightness(.8) }
.cs-face img { width: 48px; height: 48px; display: block; object-fit: cover }
.cs-face:hover { filter: none; border-color: #4a3020 }
.cs-face.on { filter: none; border-color: #fabc86; box-shadow: 0 0 10px rgba(250, 188, 134, .35) }

/* ---------- coluna da direita ---------- */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7a3a3a; margin-right: 6px; vertical-align: 1px }
.dot.on { background: #5fd36a; box-shadow: 0 0 6px #5fd36a }
.srv-state { font-size: 12px; color: #96847a }
.user-hello { text-align: center; font-family: 'TrajanProBold', serif; font-size: 20px; color: #ffefeb; margin: 6px 0 18px; overflow: hidden; text-overflow: ellipsis }
.user-links { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px }
.c-right-side .rank-box .rank-table .r-field .f-username a { color: inherit }
.c-right-side .rank-box .rank-table .f-kingdom img.cls { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px }
.c-right-side .rank-box .rank-table .f-kingdom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.r-empty { padding: 30px 20px; text-align: center; font-size: 12px; color: #6e4948 }

/* a coluna da direita (com a moldura de baixo) passa da esquerda no registro */
.pixarts-site-content.psc-side { padding-bottom: 200px }

/* ---------- rodapé ---------- */
/* a logo de fogo é mais alta que a do template: imagem no fluxo, sem o absolute dele */
.footer .bottom-footer { height: auto; padding: 10px 0 14px }
.footer .bottom-footer .logo-footer { height: auto; min-width: 0; width: auto }
.footer .bottom-footer .logo-footer img { position: static; display: block; width: auto; height: 76px; transform: none }
.footer .bottom-footer .info { line-height: 1.7 }
.footer .bottom-footer .info.author { text-align: right }
.footer .bottom-footer .info .clock { color: #e1dfc1; font-weight: 600 }

/* ---------- rankings / clãs ---------- */
a.rmt-btn, a.rkf-btn { text-decoration: none }
.rank-filter-bar { flex-wrap: wrap }
.rank-kingdom-filters { flex-wrap: wrap }
.rkf-btn img { width: 16px; height: 16px; margin-right: 5px }
.rank-kingdom-filters .rkf-btn { padding: 0 8px; letter-spacing: 1px }
.rank-main-navbar .rank-search-holder { margin-left: auto; padding-right: 16px }
.rkf-note { font-size: 12px; color: #6e4948 }
.rt-name a { color: inherit }
.rt-empty { text-align: center; padding: 40px 0 !important; color: #6e4948 }
.clan-ico { width: 24px !important; height: 24px !important; border-radius: 0 !important; image-rendering: pixelated }
.row-btn { display: inline-flex; transform: scale(.85); text-decoration: none }
.rank-pagination a.page { text-decoration: none; color: #d0baa4; font-size: 13px; font-weight: 600 }
.rank-pagination a.page:hover { color: #fabc86; border-color: #6b4a2a }
.rank-pagination a.page.active { color: #ffd9a8; text-shadow: 0 0 8px rgba(250, 188, 134, .5) }
.clan-body { padding: 24px }
.clan-body .pres-stat-val { font-size: 18px }
.empty-state { text-align: center; padding: 60px 24px; color: #96847a }
.empty-state p { margin-bottom: 20px }

/* ---------- informações ---------- */
.pres-wrap { display: flex; flex-direction: row; min-height: 600px; width: 100% }
.pres-content h2.pres-title { margin: 0; font-weight: normal }
.pct-ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px }
.cfg-table { max-width: 420px }

/* ---------- registro ---------- */
.reg-dob-row.two .reg-field-group { flex: 1 }
.form-alert { padding: 12px 16px; margin-bottom: 18px; font-size: 13px; border: 1px solid }
.form-alert.err { color: #ffb3b3; background: #2a0f10; border-color: #7a3a3a }
.form-alert.ok { color: #b9f0c0; background: #0f2414; border-color: #3a7a48 }
input[type="date"] { color-scheme: dark }

/* ---------- painel ---------- */
.acc-deco { position: absolute; width: 280px; left: 50%; transform: translateX(-50%); bottom: -6px; z-index: 1; pointer-events: none }
a.acc-tab-btn, a.acc-nav-link { text-decoration: none; display: block }
a.acc-tab-btn { margin-left: auto }
.acc-tab-btn[role="button"], .acc-nav-link[role="button"] { cursor: pointer }
.acc-more { text-align: right; font-size: 12px; margin-top: 10px }
.acc-empty { text-align: center; padding: 40px 20px; color: #96847a; font-size: 13px; line-height: 1.7 }
.btn-small-dark.inline { display: inline-flex; text-decoration: none }
.avatar-form { position: relative; cursor: pointer }
/* a moldura (avatar-holder.png, 65x57 em -3,-3) abraça 59x51; o template usava 58x58 e vazava embaixo */
.account-widget .acc-avatar-wrap { width: 59px; height: 51px; margin-bottom: 8px }
.account-widget .acc-avatar-wrap img { width: 59px; height: 51px; object-fit: cover; object-position: top }
.avatar-edit { position: absolute; z-index: 3; right: -10px; bottom: -10px; width: 24px; height: 24px; border-radius: 50%; background: #1a0e0e; border: 1px solid #6b4a2a; color: #fabc86; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .85; transition: opacity .2s }
.avatar-edit:hover { opacity: 1 }
.avatar-edit svg { width: 13px; height: 13px }
.form-alert.small { margin: 10px 14px 0; padding: 6px 10px; font-size: 11px }
.clan-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px }
.clan-ico.big { width: 48px !important; height: 48px !important }
.login-wrap { width: 100%; max-width: 900px; margin: 0 auto }
.login-wrap .reg-input-holder img { opacity: .7 }

.acc-char-card .char-avatar img { width: 59px; height: 51px; object-fit: cover; object-position: top; display: block }
.clan-head .char-name { font-family: 'TrajanProBold', serif; font-size: 20px; color: #ffefeb; letter-spacing: 1px }
.clan-head .char-meta { font-size: 12px; color: #96847a; margin-top: 4px }
.clan-head .char-meta span { color: #fabc86 }

/* ---------- respiro no fim das caixas (o template contava com a paginação ali) ---------- */
.c-left-side .news-row .news-tab { padding-bottom: 24px }
.dl-steps-row { padding-bottom: 28px }
.rank-tab-content, .clan-body + .rank-table-full { margin-bottom: 20px }
.acc-tab-content { padding-bottom: 8px }
/* o rodapé sobe por cima do conteúdo (margem negativa do template): página curta encostava nele */
.pixarts-site-content { padding-bottom: 170px }

/* ---------- download ---------- */
.dl-intro { font-family: 'TrajanProRegular', serif; font-size: 13px; color: #d0baa4; letter-spacing: 2px }
.dl-cards-row.single { justify-content: center }
.dl-cards-row.single .dl-card { flex: 0 1 460px; opacity: 1 }
.dl-btn.disabled { opacity: .5; cursor: default }
/* ---------- marketplace (07/10/2026) ---------- */
.mk-filters { align-items: center; gap: 8px }
.mk-sep { display: inline-block; width: 1px; height: 18px; background: #6b4a2a; margin: 0 6px; vertical-align: middle }
.rank-main-navbar form.rank-search-holder { margin: 0 0 0 auto }
.mk-layout { display: flex; gap: 16px; padding: 16px; align-items: flex-start }
.mk-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px }
.mk-card { display: flex; gap: 12px; padding: 12px; background: rgba(20, 10, 6, .55); border: 1px solid #4a3220; border-radius: 4px }
.mk-card:hover { border-color: #8a6234 }
.mk-card.selected { border-color: #fabc86; box-shadow: 0 0 0 1px rgba(250, 188, 134, .35) }
.mk-icon { flex: 0 0 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); border: 1px solid #3a2616 }
.mk-icon img { max-width: 60px; max-height: 60px; image-rendering: auto }
.mk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.mk-name { font-family: 'TrajanProRegular', serif; font-size: 13px; color: #ffd9a8; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mk-aging { color: #7fd4ff }
.mk-meta { font-size: 11px; color: #96847a }
.mk-price { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; font-weight: 700 }
.mk-gold { color: #fabc86 }
.mk-coin { color: #8fd694 }
.mk-where { display: flex; justify-content: space-between; gap: 8px; font-size: 12px }
.mk-seller { color: #e1dfc1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mk-map { color: #d0baa4; white-space: nowrap }
.mk-title { font-size: 11px; color: #96847a; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mk-whisper { align-self: flex-start; margin-top: 4px; padding: 3px 10px; font-size: 11px; color: #ffd9a8; background: rgba(107, 74, 42, .35); border: 1px solid #6b4a2a; border-radius: 3px; cursor: pointer }
.mk-whisper:hover { border-color: #fabc86 }
.mk-empty { padding: 30px 16px !important }
.mk-howto { text-align: center; font-size: 12px; color: #96847a; padding: 0 16px 12px }
.mk-actions { display: flex; gap: 6px; flex-wrap: wrap }
.mk-actions .mk-whisper { margin-top: 4px }

/* ---------- tooltip de item (07/10/2026) — views/partials/item_tooltip.ejs + lib/itemInfo.js;
   ordem e rótulos = item_info_box.gd. Cores do jogo onde o pedido não diverge: tipo
   (170,160,170), aging (100,230,255), tempo (255,110,255), header do spec (255,220,0) ---------- */
.it-tip { display: inline-block; box-sizing: border-box; min-width: 184px; max-width: 320px; padding: 10px 16px 12px; background: linear-gradient(180deg, rgba(10, 10, 10, .97), rgba(24, 22, 20, .96)); border: 1px solid #a8843c; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 6px 18px rgba(0, 0, 0, .65); color: #f5f0da; font-size: 13px; line-height: 18px; text-align: left; text-shadow: 1px 1px 0 #000 }
.it-tip-name { color: #ffd65a; font-weight: 700; font-size: 14px; text-align: center; line-height: 1.3; overflow-wrap: anywhere }
.it-tip-icon { margin: 8px 0 4px; text-align: center }
.it-tip-icon img { display: inline-block; max-width: 100%; height: auto; image-rendering: auto }
.it-tip-head { margin: 2px 0 12px; text-align: center }
.it-tip-head:last-child { margin-bottom: 0 }
.it-tip-temp { color: rgb(100, 230, 255) }
.it-tip-type { color: rgb(170, 160, 170) }
.it-tip-aging { margin-top: 4px }
.it-tip-aging span { display: inline-block; padding: 0 8px; background: rgba(13, 13, 20, .9); border: 1px solid rgb(60, 130, 200); border-radius: 2px; color: #dcdcdc; font-size: 12px; line-height: 18px }
.it-tip-bar { width: 160px; max-width: 100%; height: 6px; margin: 4px auto 0; box-sizing: border-box; background: rgba(26, 26, 31, .9); border: 1px solid rgb(60, 130, 200) }
.it-tip-bar i { display: block; height: 100%; background: rgb(80, 180, 255) }
.it-tip-desc { font-size: 12px; color: rgb(245, 240, 218) }
.it-tip-desc.duration { color: rgb(180, 100, 175) }
.it-tip-block { margin: 0 }
.it-tip-block + .it-tip-block { margin-top: 12px }
.it-tip dl { margin: 0 }
.it-tip-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px }
.it-tip-line dt, .it-tip-line dd { margin: 0; padding: 0; font-weight: 400; white-space: nowrap }
.it-tip-line dt { color: #f5f0da }
.it-tip-line dd { color: #fff; text-align: right }
.it-tip-line.aging dd { color: rgb(100, 230, 255) }
.it-tip-line.temp dt, .it-tip-line.temp dd { color: rgb(255, 110, 255) }
.it-tip-line.req dt, .it-tip-line.req dd { color: #ff9b3d }
.it-tip-spec-title { color: rgb(255, 220, 0); text-align: center }
.it-tip-line.spec dt, .it-tip-line.spec dd { color: #ffd84a }