@charset "utf-8";
/* ==========================================================================
   Naruto Chronicles - PROPOSTA DE VISUAL v2 ("dark underground"; paleta azul-noite + laranja do por do sol desde 27/10)
   So camada de aparencia: sobrescreve cores e acabamento de style.css. Nenhum HTML, rota ou banco muda.
   E o visual PADRAO desde 25/10. Ver o antigo: ?preview=1 (cookie). Voltar ao novo: ?preview=2.
   Backup do visual atual: tag git site-v1-2026-10-25 e /root/backup-site-v1-20261025.tar.gz na VM.
   ========================================================================== */

:root {
	--bg: #0a1124;
	--bg-elevated: #0f1830;
	--surface: #141f3b;
	--surface-alt: #1b2849;
	--border: rgba(255, 255, 255, 0.10);
	--border-soft: rgba(255, 255, 255, 0.06);

	--text: #f4ece1;
	--text-muted: #b9c3d8;
	--text-faint: #7f8bab;

	--accent: #e8730f;
	--accent-strong: #ff8a2b;
	--accent-deep: #5a2406;
	--gold: #d4a24c;
	--gold-soft: #e8c98c;
	--sakura: #d98aa0;
	--sky: #4da6f0;
	--sky-soft: #a9d6ff;
	--danger: #ef5350;
	--offline: #ef5350;

	--radius: 8px;
	--radius-lg: 16px;
}

body {
	background:
		radial-gradient(900px 520px at 88% -8%, rgba(255, 138, 43, 0.15), transparent 62%),
		radial-gradient(800px 520px at 2% 14%, rgba(77, 166, 240, 0.09), transparent 62%),
		radial-gradient(1400px 700px at 50% 130%, rgba(255, 138, 43, 0.08), transparent 60%),
		linear-gradient(rgba(10, 17, 36, 0.72), rgba(10, 17, 36, 0.72)),
		url("images/fx/texture-dark.webp?v=3") 0 0 / 640px 640px,
		var(--bg);
	background-attachment: fixed;
}
/* grao fino por cima de tudo (textura "underground"), sem pegar clique */
body::before {
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.05; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#petals { opacity: 0.4; }

/* ---- barra superior: mesma disposicao, agora vidro escuro ---- */
#topbar {
	background: rgba(8, 14, 32, 0.62);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	border-bottom: 1px solid var(--border-soft);
	box-shadow: none;
}
#topbar::after { height: 1px; opacity: 0.55; }
.nav-label { font-weight: 600; letter-spacing: 0.03em; border-radius: 999px; padding: 10px 15px; }
.nav-group:hover .nav-label, .nav-group.open .nav-label { background: rgba(255, 255, 255, 0.06); }
.nav-drop { background: rgba(13, 21, 44, 0.94); backdrop-filter: blur(14px); border-color: var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); }
.nav-drop a { border-radius: 8px; }
.nav-drop a:hover { background: rgba(255, 255, 255, 0.06); }
.sharingan { filter: drop-shadow(0 0 10px rgba(255, 138, 43, 0.45)); }
#brand-text b { font-weight: 700; }
#searchbox input { background: rgba(255, 255, 255, 0.04); border-color: var(--border); border-radius: 999px; }

/* ---- capa ---- */
#hero {
	padding: 84px 16px 140px;
	background:
		radial-gradient(ellipse at 50% 118%, rgba(255, 138, 43, 0.28), transparent 58%),
		radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(180deg, #09101f 0%, #0c1530 45%, #101a38 78%, #080e1e 100%);
	border-bottom: 1px solid rgba(255, 138, 43, 0.35);
}
#hero .moon { width: 380px; height: 380px; margin-left: -190px; top: 36px; opacity: 0.42; filter: blur(2px) saturate(0.9); box-shadow: 0 0 140px rgba(255, 138, 43, 0.45); }
#hero .mountains { opacity: 0.9; }
#hero .torii { opacity: 0.6; }
#hero-kicker { color: #fbeede; letter-spacing: 0.5em; font-weight: 600; font-size: 11.5px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
#hero-title { font-weight: 700; letter-spacing: 0.07em; text-shadow: 0 0 60px rgba(255, 138, 43, 0.45), 0 2px 0 rgba(0, 0, 0, 0.5); }
#hero-tagline { color: var(--text-muted); font-size: 17px; }
#hero-tagline b { color: var(--text); }

/* ---- botoes: um forte (criar conta), dois discretos ---- */
.btn { padding: 12px 26px; font-weight: 600; letter-spacing: 0.05em; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent-strong); box-shadow: 0 6px 26px rgba(255, 138, 43, 0.35); }
.btn-primary:hover { background: #ffa04d; box-shadow: 0 10px 34px rgba(255, 138, 43, 0.5); }
.btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--border); color: var(--text) !important; backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.25); }
.btn-gold { background: transparent; color: var(--gold-soft) !important; border-color: rgba(212, 162, 76, 0.45); box-shadow: none; }
.btn-gold:hover { background: rgba(212, 162, 76, 0.1); border-color: var(--gold); }

/* ---- atalhos: cartoes de vidro ---- */
.tile {
	background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); border-radius: var(--radius-lg);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	animation: nbRise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.tile:nth-child(2) { animation-delay: .06s; }
.tile:nth-child(3) { animation-delay: .12s; }
.tile:nth-child(4) { animation-delay: .18s; }
@keyframes nbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tile:hover { transform: translateY(-4px); border-color: rgba(255, 138, 43, 0.55); background: rgba(255, 255, 255, 0.06); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 138, 43, 0.12); }
.tile i {
	border-radius: 12px; color: var(--accent-strong); font-weight: 700;
	background: rgba(255, 138, 43, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 138, 43, 0.35);
}
.tile:hover i { background: rgba(255, 138, 43, 0.22); }
.tile b { font-weight: 600; letter-spacing: 0.01em; }
.tile span { color: var(--text-faint); }
.tile-shop { border-color: rgba(212, 162, 76, 0.4); }
.tile-shop i { background: rgba(212, 162, 76, 0.14); color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(212, 162, 76, 0.4); }

/* ---- caixas laterais, tabelas e paginas internas ---- */
.side-box, #statusbar, .g-filters, .g-card {
	background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.side-box-title { background: transparent; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.side-box-list li { border-bottom-color: var(--border-soft); }
.g-table th { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.1em; border-bottom: 1px solid var(--border); }
.g-table td { border-bottom-color: var(--border-soft); }
.g-hero h1, h1 { font-weight: 700; letter-spacing: 0.02em; }
.g-tab { background: rgba(255, 255, 255, 0.035); border-color: var(--border); }
.g-tab:hover, .g-tab.g-on { border-color: rgba(255, 138, 43, 0.6); background: rgba(255, 138, 43, 0.1); color: var(--text) !important; }
.TableContainer .CaptionContainer .Text { letter-spacing: 0.08em; }
input[type="search"], input[type="text"], input[type="password"], input[type="email"], textarea, select { background: rgba(255, 255, 255, 0.04); border-color: var(--border); border-radius: 10px; }
input[type="submit"], input[type="button"], button { border-radius: 999px; }
a:hover { color: var(--accent-strong); }
#copyrights { color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
	.tile { animation: none; }
	#hero .moon { animation: none; }
}

/* ==========================================================================
   Limpeza dos blocos "antigos" do MyAAC (tabelas bege, menu da conta, faixa de noticia)
   Eles trazem cor fixa no HTML (bgcolor) ou em <style> proprio; aqui trocamos tudo por vidro escuro.
   ========================================================================== */
[bgcolor] { background-color: rgba(255, 255, 255, 0.035) !important; color: var(--text); }
tr[bgcolor]:nth-child(even) { background-color: rgba(255, 255, 255, 0.055) !important; }
/* cabecalhos de bloco (cor "vdarkborder": #505050 padrao ou a bege configurada) */
[bgcolor="#505050" i], [bgcolor="#afab89" i] {
	background-color: rgba(255, 138, 43, 0.16) !important; color: var(--text) !important; font-weight: 600; letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(255, 138, 43, 0.35);
}
td[bgcolor], th[bgcolor] { border-color: var(--border-soft) !important; }
table { border-color: var(--border-soft); }
table[border], table[border] td, table[border] th { border-color: var(--border-soft) !important; }

/* menu lateral da conta (Minha conta, Criar personagem...) */
body .vertical-menu a {
	background: rgba(255, 255, 255, 0.04) !important; color: var(--text-muted) !important; border: 1px solid var(--border);
	border-radius: 10px; margin-bottom: 6px; padding: 10px 14px; font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s, color .15s;
}
body .vertical-menu a:hover { background: rgba(255, 138, 43, 0.14) !important; border-color: rgba(255, 138, 43, 0.5); color: var(--text) !important; text-decoration: none; }
body div#one { width: 190px; }
body div#two { margin-left: 190px; }

/* noticias: faixa vermelha com textura vira cartao */
.Content #NewsArchive .NewsHeadlineBackground, .Content .NewsHeadlineBackground {
	background: linear-gradient(90deg, rgba(255, 138, 43, 0.22), rgba(255, 255, 255, 0.03)) !important;
	border: 1px solid var(--border); border-radius: 12px;
}
.Content #NewsTicker, .Content #News .BoxContent, .Content .BoxContent { background: transparent; }
.Content #NewsTicker .BoxContent .Row { border-bottom-color: var(--border-soft); }

/* linhas de tabela com cor FIXA no style="" (paginas da conta, personagem, rankings): vira vidro escuro */
table tr[style*="background-color"], table td[style*="background-color"], table th[style*="background-color"] {
	background-color: rgba(255, 255, 255, 0.035) !important; color: var(--text) !important;
}
table tr[style*="background-color"]:nth-child(even), table tr[style*="background"]:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.06) !important; }
table tr[style*="background-color"] td { border-bottom: 1px solid var(--border-soft); padding: 9px 12px; }
table tr[style*="background-color"] td:first-child { color: var(--text-muted) !important; font-weight: 600; }
table[width="100%"] { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
font[color="red" i], font[color="#ff0000" i], span[style*="color: red" i], span[style*="color:red" i] { color: var(--accent-strong) !important; }
font[color="green" i], font[color="#00ff00" i], span[style*="color: green" i] { color: var(--jade) !important; }

/* ---- capa com a arte nova (hero-desktop.webp): cidade ninja sob a lua vermelha ---- */
#hero {
	padding: 110px 16px 170px;
	background:
		radial-gradient(ellipse 60% 55% at 50% 52%, rgba(8, 14, 32, 0.72), rgba(8, 14, 32, 0.2) 70%, transparent 100%),
		linear-gradient(180deg, rgba(8, 14, 32, 0.55) 0%, rgba(8, 14, 32, 0) 22%, rgba(8, 14, 32, 0) 62%, var(--bg) 100%),
		url("images/hero-desktop.webp?v=3") center top / cover no-repeat,
		#080f20;
}
#hero .moon, #hero .mountains, #hero .torii { display: none; }
#hero-title { text-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 90px rgba(255, 138, 43, 0.35), 0 2px 0 rgba(0, 0, 0, 0.5); }
#hero-tagline { color: #d8dff0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); }
@media (max-width: 900px) {
	#hero { padding: 80px 16px 130px; background-image:
		radial-gradient(ellipse 80% 55% at 50% 52%, rgba(8, 14, 32, 0.75), rgba(8, 14, 32, 0.25) 75%, transparent 100%),
		linear-gradient(180deg, rgba(8, 14, 32, 0.55) 0%, rgba(8, 14, 32, 0) 22%, rgba(8, 14, 32, 0) 62%, var(--bg) 100%),
		url("images/hero-mobile.webp?v=3"); background-size: auto, auto, cover; background-position: center, center, center top; min-height: 640px; }
}

#brand-text small { text-transform: none; }


/* ---- banners das paginas internas: a arte fica no bloco do titulo (.g-hero), com o lado esquerdo escuro para o texto ---- */
.g-hero {
	position: relative; overflow: hidden; min-height: 190px; padding: 52px 34px 34px; margin-bottom: 20px;
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: linear-gradient(90deg, rgba(8, 14, 32, 0.9) 0%, rgba(8, 14, 32, 0.55) 48%, rgba(8, 14, 32, 0.12) 100%), #0a1124;
	background-size: cover; background-position: center;
}
.g-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }
.g-hero p { color: #d8dff0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
.g-hero a { color: var(--gold-soft); }
@media (max-width: 700px) { .g-hero { padding: 36px 18px 22px; min-height: 150px; } }


/* ==========================================================================
   Pack de imagens (25/10): cards da home, faca a sua historia, CTA, vilas, divisores e nevoa
   ========================================================================== */

/* cards da home com a arte de fundo */
.tile { background-size: cover; background-position: center; transition: transform .18s, border-color .18s, box-shadow .18s, background-size .5s; }
#portal .tile:nth-child(1) { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.9) 0%, rgba(8, 14, 32, 0.6) 55%, rgba(8, 14, 32, 0.3) 100%), url("images/tile-primeiros-passos.webp?v=3"); }
#portal .tile:nth-child(2) { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.9) 0%, rgba(8, 14, 32, 0.6) 55%, rgba(8, 14, 32, 0.3) 100%), url("images/tile-bestiario.webp?v=3"); }
#portal .tile:nth-child(3) { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.9) 0%, rgba(8, 14, 32, 0.6) 55%, rgba(8, 14, 32, 0.3) 100%), url("images/tile-itens.webp?v=3"); }
#portal .tile:nth-child(4) { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.9) 0%, rgba(8, 14, 32, 0.6) 55%, rgba(8, 14, 32, 0.3) 100%), url("images/tile-jutsus.webp?v=3"); }
.tile:hover { background-size: 108%; }

/* nevoa na base da capa */
#hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 220px; z-index: 1; pointer-events: none; opacity: 0.55;
	background: url("images/fx/fog-overlay.webp?v=3") center bottom / 100% 100% no-repeat; }

/* divisores de tinta no lugar das linhas simples */
hr { border: 0; height: 30px; margin: 22px 0; background: url("images/fx/ink-divider-2.webp?v=3") center / contain no-repeat; opacity: 0.85; }

/* faca a sua historia */
#story { max-width: 1200px; margin: 46px auto 8px; padding: 0 16px; position: relative; z-index: 5; }
.story-head { max-width: 760px; margin: 0 0 22px; }
.story-head h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.story-head p { margin: 0; color: var(--text-muted); font-size: 16px; }
.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.story-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); text-decoration: none !important; }
.story-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s; filter: saturate(0.95) brightness(0.9); }
.story-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 16px 14px; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: 0.04em; background: linear-gradient(0deg, rgba(8, 14, 32, 0.88), transparent); }
.story-card:hover { border-color: rgba(255, 138, 43, 0.55); }
.story-card:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.story-big { grid-column: span 2; grid-row: span 2; }
.story-wide { grid-column: span 2; }
@media (max-width: 900px) { .story-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .story-big { grid-column: span 2; } .story-wide { grid-column: span 2; } }

/* faixa final: chamada para criar conta */
#cta { position: relative; max-width: 1200px; margin: 34px auto 10px; border-radius: 20px; border: 1px solid var(--border); background-size: cover; background-position: center; overflow: hidden; }
.cta-inner { padding: 54px 40px; max-width: 620px; }
.cta-inner h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }
.cta-inner p { margin: 0 0 22px; color: #d8dff0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
@media (max-width: 700px) { .cta-inner { padding: 36px 22px; } }

/* vilas (pagina do mapa) */
.vilas-h { margin: 8px 0 4px; }
.vilas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 26px; }
.vila-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); aspect-ratio: 16 / 9; background: #0a1124; }
.vila-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vila-card:hover img { transform: scale(1.06); }
.vila-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px; background: linear-gradient(0deg, rgba(8, 14, 32, 0.9), transparent); display: flex; flex-direction: column; }
.vila-name b { color: #fff; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em; }
.vila-name span { color: var(--text-muted); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 800px) { .vilas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vilas-grid { grid-template-columns: 1fr; } }

#story, #cta, .vilas-h { display: block; }
.vilas-grid { display: grid; }

/* cabecalho em janelas medias (1020-1280 px): esconde o contador de status e encolhe a busca, sem barra de rolagem lateral */
@media (max-width: 1280px) { #serverstate { display: none; } #searchbox input { width: 170px; } #topbar-inner { gap: 12px; } .nav-label { padding: 10px 11px; } }
@media (max-width: 1140px) { #searchbox input { width: 120px; } }
html, body { overflow-x: clip; }
@media (max-width: 1140px) { #searchbox { display: none; } }
@media (max-width: 1140px) { #topbar-inner { padding: 8px 10px; gap: 8px; } #langflags { gap: 3px; } .nav-label { padding: 10px 9px; } }

/* legenda das caveiras (pagina "Quem esta online") */
.skull-legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 8px; }
.skull-legend .sk { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); backdrop-filter: blur(6px); }
.skull-legend .sk i { font-style: normal; font-size: 13px; letter-spacing: 0.03em; color: var(--text-muted); }
.skull-legend .sk img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); }
.skull-legend .sk-red { border-color: rgba(255, 138, 43, 0.45); }
.skull-legend .sk-red i { color: #ffc08a; }
.skull-legend .sk-black { border-color: rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.35); }
/* qualquer tabela antiga do MyAAC que ainda venha bege */
.myaac-table { background: rgba(255, 255, 255, 0.03) !important; color: var(--text); }
.myaac-table td, .myaac-table th { background-color: transparent !important; }

/* logo: emblema da lua com kunais, fixo (nao gira) */
.sharingan { animation: none; border-radius: 50%; filter: drop-shadow(0 0 10px rgba(255, 138, 43, 0.45)); transition: transform .3s; }
#brand:hover .sharingan { transform: rotate(-8deg) scale(1.05); }


/* ---- senha / e-mail de backup / cadastro ---- */
.pw-form { display: grid; gap: 14px; max-width: 460px; margin: 16px 0; }
.pw-form label { display: grid; gap: 6px; color: var(--text-muted); font-weight: 600; font-size: 14px; }
.pw-form input[type="text"], .pw-form input[type="email"], .pw-form input[type="password"] { width: 100%; padding: 11px 14px; }
.pw-how { display: grid; gap: 8px; margin: 14px 0 18px; max-width: 560px; }
.pw-how div { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.pw-how .n { font-style: normal; font-weight: 700; flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 138, 43, 0.2); color: var(--accent-strong); }
.g-note.g-ok { border-color: rgba(95, 201, 165, 0.5); }
.g-note.g-err { border-color: rgba(255, 138, 43, 0.6); }
.nb-tip { position: relative; display: inline-block; margin-left: 8px; cursor: help; color: #f0b24b; font-size: 18px; line-height: 1; vertical-align: middle; }
.nb-tip > span { display: none; position: absolute; right: -14px; left: auto; top: 150%; width: min(360px, 78vw); padding: 12px 14px; border-radius: 12px; background: #1b2849; border: 1px solid rgba(240, 178, 75, 0.5); color: #f4ece1; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); z-index: 80; }
.nb-tip:hover > span, .nb-tip:focus > span, .nb-tip:focus-within > span { display: block; }
.nb-opt { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-faint); }

.pg-senha .g-hero, .pg-conta-backup .g-hero, .pg-account .g-hero { min-height: auto; padding: 26px 34px; }


/* ---- paginas legais, rodape e lista de online ---- */
.legal { max-width: 860px; }
.legal article { line-height: 1.75; }
.legal h1 { font-size: 30px; margin: 6px 0 4px; }
.legal h2 { font-size: 20px; margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--border-soft); color: var(--gold-soft); }
.legal ol, .legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.legal th, .legal td { text-align: left; padding: 9px 12px; border: 1px solid var(--border-soft); }
.legal th { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); }
.legal hr { margin: 22px 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.legal-nav a { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; background: rgba(255, 255, 255, 0.03); }
.legal-nav a:hover { border-color: rgba(255, 138, 43, 0.6); text-decoration: none; }
.foot-links a { color: var(--text-muted); }
.foot-disclaimer { max-width: 760px; margin: 10px auto 0; font-size: 12px; color: var(--text-faint); line-height: 1.6; }
.loja-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.03); font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.loja-consent input { margin-top: 4px; flex: 0 0 auto; }
.online-names { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.online-name { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); font-weight: 600; }
#accept_rules + label, #accept_rules ~ label { font-size: 13.5px; line-height: 1.55; }

/* ---- estado do servidor ---- */
.prog-overall { margin: 8px 0 26px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.prog-big { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.prog-big b { font-family: var(--font-display); font-size: 56px; line-height: 1; color: #fff; }
.prog-big span { color: var(--text-muted); font-size: 16px; }
.prog-track { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.prog-track-lg { height: 18px; }
.prog-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); box-shadow: 0 0 18px rgba(255, 138, 43, 0.45); }
.prog-list { display: grid; gap: 14px; }
.prog-row { padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.prog-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.prog-head b { color: var(--accent-strong); }
.prog-row p { margin: 8px 0 0; }
.prog-time { display: grid; gap: 0; margin: 14px 0; border-left: 2px solid var(--border); margin-left: 8px; }
.prog-ms { position: relative; display: flex; gap: 14px; padding: 4px 0 22px 26px; }
.prog-dot { position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg); }
.prog-dot.on { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 12px rgba(255, 138, 43, 0.6); }
.prog-date { color: var(--gold-soft); font-size: 14px; margin: 2px 0; }


/* ==========================================================================
   Paleta azul-noite + laranja do por do sol e pack de imagens V3 (27/10)
   ========================================================================== */
.g-hero { background-position: center 38%; }
.pg-guia .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-guia.webp?v=3"); }
.pg-jutsus .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-jutsus.webp?v=3"); }
.pg-bestiario .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-bestiario.webp?v=3"); }
.pg-itens .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-itens.webp?v=3"); }
.pg-pericias .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-pericias.webp?v=3"); }
.pg-mecanicas .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-guia.webp?v=3"); }
.pg-mapa .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-mapa.webp?v=3"); }
.pg-loja .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-loja.webp?v=3"); }
.pg-downloads .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-download.webp?v=3"); }
.pg-busca .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-busca.webp?v=3"); }
.pg-estado .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-estado.webp?v=3"); }
.pg-pedidos .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-pedidos.webp?v=3"); }
.pg-senha .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-senha.webp?v=3"); }
.pg-conta-backup .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-senha.webp?v=3"); }
.pg-metricas .g-hero { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.80) 0%, rgba(8, 14, 32, 0.45) 45%, rgba(8, 14, 32, 0.05) 100%), url("images/banner-estado.webp?v=3"); }
.pg-account #content::before, .pg-highscores #content::before, .pg-online #content::before, .pg-last-kills #content::before,
.pg-characters #content::before, .pg-houses #content::before, .pg-bans #content::before, .pg-termos #content::before,
.pg-privacidade #content::before, .pg-doacoes-reembolso #content::before, .pg-rules #content::before, .pg-news.is-inner #content::before {
	content: ""; display: block; height: 170px; margin-bottom: 18px; border-radius: 16px; border: 1px solid var(--border); background-position: center 38%; background-size: cover; background-repeat: no-repeat; }
.pg-account.sub-create #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-criar.webp?v=3"); }
.pg-account #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-conta.webp?v=3"); }
.pg-highscores #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-ranking.webp?v=3"); }
.pg-online #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-online.webp?v=3"); }
.pg-last-kills #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-mortes.webp?v=3"); }
.pg-characters #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-personagens.webp?v=3"); }
.pg-houses #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-casas.webp?v=3"); }
.pg-bans #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-banidos.webp?v=3"); }
.pg-termos #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-legal.webp?v=3"); }
.pg-privacidade #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-legal.webp?v=3"); }
.pg-doacoes-reembolso #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-legal.webp?v=3"); }
.pg-rules #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-regras.webp?v=3"); }
.pg-news.sub-archive #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-arquivo.webp?v=3"); }
.pg-news.is-inner #content::before { background-image: linear-gradient(90deg, rgba(8, 14, 32, 0.55), rgba(8, 14, 32, 0) 62%), url("images/banner-noticias.webp?v=3"); }
@media (max-width: 700px) { .pg-account #content::before, .pg-highscores #content::before, .pg-online #content::before, .pg-last-kills #content::before, .pg-characters #content::before, .pg-houses #content::before, .pg-bans #content::before, .pg-termos #content::before, .pg-privacidade #content::before, .pg-doacoes-reembolso #content::before, .pg-rules #content::before, .pg-news.is-inner #content::before { height: 110px; } }

/* cards das home: o escurecido lateral so garante a leitura do texto, a arte aparece */
#portal .tile:nth-child(n) { background-blend-mode: normal; }
.story-card span, .vila-name { background: linear-gradient(0deg, rgba(8, 14, 32, 0.9), transparent); }

/* texto escuro sobre laranja (contraste) */
.btn-primary, .btn-login { background: linear-gradient(180deg, #ffa04d, #ff8a2b 55%, #e8730f); color: #1b0e03 !important; box-shadow: 0 6px 26px rgba(255, 138, 43, 0.35); }
.btn-primary:hover, .btn-login:hover { background: linear-gradient(180deg, #ffb066, #ffa04d 55%, #ff8a2b); color: #1b0e03 !important; box-shadow: 0 10px 34px rgba(255, 138, 43, 0.5); }
.tile i { color: #1b0e03; background: linear-gradient(145deg, #ffa04d, #e8730f); box-shadow: none; }
.tile:hover i { background: linear-gradient(145deg, #ffb066, #ff8a2b); }
.tile-shop i { color: #2b1a05; background: linear-gradient(145deg, var(--gold-soft), #b97a12); }
.g-step::before, .pw-how .n { color: #1b0e03; background: var(--accent-strong); }

/* azul-ceu como segunda cor: foco, links de apoio, titulos de caixa */
a { color: var(--sky-soft); }
a:hover { color: var(--accent-strong); }
input:focus, textarea:focus, select:focus, #searchbox input:focus { border-color: var(--sky) !important; box-shadow: 0 0 0 3px rgba(77, 166, 240, 0.22) !important; outline: none; }
.side-box-title { color: var(--sky-soft); }
.g-tab.g-on { border-color: var(--accent-strong); color: var(--text) !important; background: linear-gradient(160deg, rgba(255, 138, 43, 0.22), rgba(20, 31, 59, 0.9)); }
.g-hero { border-color: rgba(77, 166, 240, 0.28); box-shadow: 0 10px 40px rgba(2, 6, 18, 0.45); }
.btn-ghost { border-color: rgba(169, 214, 255, 0.35); }
.btn-ghost:hover { border-color: var(--sky); background: rgba(77, 166, 240, 0.14); }
#topbar::after { background: linear-gradient(90deg, transparent, var(--accent-strong), var(--sky), transparent); }

/* erros continuam vermelhos (a cor de destaque agora e laranja) */
.SmallBox .ErrorMessage, .g-note.g-err, div.ped-bad { color: #ffc9c2; border-color: var(--danger); background-color: rgba(239, 83, 80, 0.14); }
.g-note.g-err { border-left-color: var(--danger); }
.ped-bad { border-left-color: var(--danger); }
.ped-bad .ped-ic { background: #7a1f1d; border-color: var(--danger); }
font[color="red" i], font[color="#ff0000" i], span[style*="color: red" i], span[style*="color:red" i] { color: var(--danger) !important; }
.skull-legend .sk-red { border-color: rgba(239, 83, 80, 0.5); }
.skull-legend .sk-red i { color: #ffb4ae; }

/* perícias: cartões com arte */
.pericia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 22px; }
.pericia-card { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.pericia-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pericia-card:hover img { transform: scale(1.07); }
.pericia-card b { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); background: linear-gradient(0deg, rgba(8, 14, 32, 0.9), transparent); }

/* capa das noticias */
.NewsCover { display: block; width: 100%; max-height: 190px; object-fit: cover; object-position: center 40%; border-radius: 12px; border: 1px solid var(--border); margin: 8px 0 10px; }


/* ---- campos de formulario no tema escuro (28/10): a lista aberta do <select> usava o fundo transparente e saia branca com letra clara ---- */
:root { color-scheme: dark; }
select, input, textarea, button { color-scheme: dark; }
select {
	background-color: var(--bg-elevated) !important;
	color: var(--text) !important;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8c98c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	padding-right: 34px;
	cursor: pointer;
}
select option, select optgroup {
	background-color: #0f1830;
	color: #f4ece1;
}
select option:checked, select option:hover {
	background-color: #e8730f;
	color: #1a0d03;
}
select:disabled { opacity: 0.55; cursor: not-allowed; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: var(--text);
	box-shadow: 0 0 0 1000px #0f1830 inset;
	caret-color: var(--text);
}
input[type="checkbox"], input[type="radio"] { accent-color: #ff8a2b; }
/* botoes laranja: letra escura (a creme tinha contraste 2,4:1 sobre o laranja) */
input[type="submit"], input[type="button"], button { color: #1a0d03; }
input[type="submit"]:hover, input[type="button"]:hover, button:hover { color: #1a0d03; }