@charset "utf-8";
/* ==========================================================================
   Narutibia — tema MyAAC
   Aura Uchiha (carmesim + noite), tom japones, aventura RPG: misterioso mas acolhedor
   (lanternas douradas, petalas de sakura, lua vermelha). Informacao em poucos cliques.
   ========================================================================== */

:root {
	--bg: #0a0910;
	--bg-elevated: #110e19;
	--surface: #1a1625;
	--surface-alt: #231e31;
	--border: #3a3150;
	--border-soft: #2a2339;

	--text: #f1e8dd;
	--text-muted: #c1b4c9;
	--text-faint: #8d819a;

	--accent: #b80f2b;          /* carmesim Uchiha */
	--accent-strong: #e0243f;
	--accent-deep: #5d0a1a;
	--gold: #f0b24b;            /* lanterna */
	--gold-soft: #ffd98a;
	--sakura: #f4a6b8;
	--jade: #5fc9a5;

	--online: #5fc9a5;
	--offline: #e0243f;

	--radius: 6px;
	--radius-lg: 12px;

	--font-display: "Shippori Mincho", "Times New Roman", serif;
	--font-nav: "Zen Kaku Gothic New", "Segoe UI", Arial, sans-serif;
	--font-body: "Zen Kaku Gothic New", "Segoe UI", Verdana, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(184, 15, 43, 0.18), transparent 60%),
		radial-gradient(900px 500px at 5% 20%, rgba(240, 178, 75, 0.06), transparent 60%),
		var(--bg);
	background-attachment: fixed;
}

#petals { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* --------------------------------------------------------------------
   Barra de navegacao fixa
   -------------------------------------------------------------------- */

#topbar {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10, 9, 16, 0.88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-soft);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
#topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--gold) 50%, var(--accent) 75%, transparent); opacity: 0.8; }

#topbar-inner { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; }

#brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
#brand:hover { text-decoration: none; }
.sharingan { width: 40px; height: 40px; animation: spin 24s linear infinite; filter: drop-shadow(0 0 8px rgba(224, 36, 63, 0.55)); }
@keyframes spin { to { transform: rotate(360deg); } }
#brand-text { display: flex; flex-direction: column; line-height: 1.1; }
#brand-text b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; color: var(--text); }
#brand-text small { font-size: 10.5px; letter-spacing: 0.12em; color: var(--gold); text-transform: lowercase; }

#mainnav { display: flex; gap: 2px; flex: 1 1 auto; }
.nav-group { position: relative; }
.nav-label {
	display: block; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 13.5px;
	letter-spacing: 0.04em; color: var(--text-muted); border-radius: var(--radius);
	transition: color .15s, background .15s;
}
.nav-group:hover .nav-label, .nav-label:focus { color: var(--text); background: rgba(255, 255, 255, 0.05); outline: none; }
.nav-shop .nav-label { color: var(--gold); }
.nav-drop {
	display: none; position: absolute; top: 100%; left: 0; min-width: 240px; padding: 8px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: block; }
.nav-drop a { display: block; padding: 8px 12px; border-radius: var(--radius); color: var(--text-muted) !important; font-weight: 500; font-size: 14px; text-decoration: none; }
.nav-drop a:hover { background: var(--surface-alt); color: var(--gold-soft) !important; text-decoration: none; }

#searchbox input {
	width: 220px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
	background: var(--bg-elevated); color: var(--text); font-size: 13.5px;
}
#searchbox input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 178, 75, 0.18); width: 260px; }
#searchbox input { transition: width .2s; }

#serverstate { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--online); box-shadow: 0 0 8px var(--online); }
.dot.off { background: var(--offline); }

#nav-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--text); font-size: 22px; line-height: 1; padding: 6px 12px; border-radius: var(--radius); }

/* --------------------------------------------------------------------
   Hero (pagina inicial)
   -------------------------------------------------------------------- */

#hero {
	position: relative; overflow: hidden; text-align: center;
	padding: 90px 16px 150px;
	background:
		radial-gradient(ellipse at 50% 120%, rgba(240, 178, 75, 0.22), transparent 55%),
		linear-gradient(180deg, #170a1d 0%, #1d0b22 38%, #2a0f26 70%, #12091a 100%);
	border-bottom: 2px solid var(--accent);
}
#hero .moon {
	position: absolute; left: 50%; top: 40px; width: 420px; height: 420px; margin-left: -210px; border-radius: 50%;
	background: radial-gradient(circle at 38% 36%, #ff5b6a 0%, #d3162f 38%, #7a0a1c 72%, rgba(122, 10, 28, 0) 74%);
	opacity: 0.85; filter: blur(0.3px); animation: pulse 9s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 1; transform: scale(1.03); } }
#hero .mountains { position: absolute; left: 0; bottom: -1px; width: 100%; height: 190px; }
#hero .torii { position: absolute; right: 7%; bottom: 40px; width: 150px; opacity: 0.9; }
#hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
#hero-kicker { margin: 0 0 10px; font-weight: 700; letter-spacing: 0.35em; font-size: 12px; color: var(--gold-soft); text-transform: uppercase; }
#hero-title {
	margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 9vw, 92px); line-height: 1.05; letter-spacing: 0.05em;
	color: #fff; text-shadow: 0 0 40px rgba(224, 36, 63, 0.7), 0 4px 0 rgba(0, 0, 0, 0.35);
}
#hero-tagline { margin: 18px auto 32px; max-width: 640px; font-size: 18px; color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
#hero-tagline b { color: var(--gold-soft); }
#hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
	display: inline-block; padding: 13px 28px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
	text-decoration: none !important; border: 1px solid transparent; transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #fff !important; box-shadow: 0 8px 22px rgba(184, 15, 43, 0.5); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--text) !important; border-color: rgba(255, 255, 255, 0.28); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #2b1a05 !important; box-shadow: 0 8px 22px rgba(240, 178, 75, 0.35); }

/* --------------------------------------------------------------------
   Portal: atalhos grandes
   -------------------------------------------------------------------- */

#portal {
	max-width: 1200px; margin: -70px auto 10px; padding: 0 16px; position: relative; z-index: 5;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.tile {
	position: relative; display: block; padding: 18px 18px 16px 76px; min-height: 92px; border-radius: var(--radius-lg);
	background: linear-gradient(160deg, var(--surface-alt), var(--surface)); border: 1px solid var(--border);
	text-decoration: none !important; transition: transform .15s, border-color .15s, box-shadow .15s; overflow: hidden;
}
.tile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(240, 178, 75, 0.25); }
.tile i {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 12px;
	display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 26px;
	color: #fff; background: linear-gradient(145deg, var(--accent-strong), var(--accent-deep)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.tile b { display: block; color: var(--text); font-size: 16px; font-weight: 700; }
.tile span { display: block; color: var(--text-faint); font-size: 12.5px; margin-top: 2px; }
.tile-shop { border-color: rgba(240, 178, 75, 0.5); }
.tile-shop i { background: linear-gradient(145deg, var(--gold-soft), #b97a12); color: #2b1a05; }

/* --------------------------------------------------------------------
   Estrutura da pagina
   -------------------------------------------------------------------- */

#page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 32px; position: relative; z-index: 3; }
body.is-inner #page { padding-top: 28px; }

/* ---------------------------------------------------------------------
/* --------------------------------------------------------------------
   Body columns: content + sidebar
   -------------------------------------------------------------------- */

#body-columns {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 20px;
}

#content { width: auto; flex: 1 1 auto; min-width: 0; background: none; float: none; }
#margins { width: auto; margin: 0; text-align: left; }

#sidebar {
	flex: 0 0 250px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.side-box {
	background: var(--surface);
	border: 1px solid var(--border-soft);
}

.side-box-title {
	font-family: var(--font-nav);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-soft);
	background: var(--surface-alt);
}

.side-box-list { list-style: none; margin: 0; padding: 0; }

.side-box-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 14px;
	border-bottom: 1px solid var(--border-soft);
	font-size: 13px;
}

.side-box-list li:last-child { border-bottom: none; }
.side-box-list a { color: var(--text); font-weight: 600; }
.side-box-list a:hover { color: var(--accent-strong); text-decoration: none; }
.side-box-meta { color: var(--text-faint); font-size: 12px; }

.side-box-body { padding: 10px 14px; }
.side-box-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-muted); }
.side-box-row .status-online { color: var(--online); font-weight: 700; }
.side-box-row .status-offline { color: var(--offline); font-weight: 700; }

/* --------------------------------------------------------------------
   Status bar
   -------------------------------------------------------------------- */

#statusbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	font-size: 12px;
	color: var(--text-faint);
	margin-bottom: 16px;
}

#statusbar-crumb a { color: var(--text-muted); }
#statusbar-crumb .crumb-sep { color: var(--text-faint); margin: 0 2px; }

#statusbar-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.status-pill {
	display: inline-block;
	padding: 1px 9px;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 1px solid currentColor;
}

.status-online { color: var(--online); }
.status-offline { color: var(--offline); }
.status-item { color: var(--text-faint); }

#content-bot { display: none; }

#copyrights {
	width: auto;
	float: none;
	padding: 24px 10px 0;
	text-align: center;
	color: var(--text-faint);
	font-size: 12px;
}

/* --------------------------------------------------------------------
   Links / base text
   -------------------------------------------------------------------- */

a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

.white, .whites { color: var(--text); }

h1, h2, h3 { font-family: var(--font-nav); color: var(--text); }

hr { border: none; border-top: 1px solid var(--border-soft); margin: 16px 0; }

/* --------------------------------------------------------------------
   Generic content tables (used across account/highscores/character pages)
   -------------------------------------------------------------------- */

.TableContainer {
	border: 1px solid var(--border);
	position: relative;
	width: 100%;
	font-size: 13px;
	background: var(--surface);
	margin-bottom: 18px;
}

.TableContainer .Odd { background-color: var(--surface); }
.TableContainer .Even { background-color: var(--surface-alt); }

.TableContainer .CaptionContainer {
	position: relative;
	font-size: 14px;
	background: var(--surface-alt) !important;
	border-bottom: 2px solid var(--accent);
	width: 100%;
	text-align: left;
}

.TableContainer .CaptionContainer .CaptionInnerContainer {
	position: relative;
	background: transparent;
	width: 100%;
	padding: 9px 14px;
}

.TableContainer .CaptionContainer .Text {
	font-family: var(--font-nav);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	color: var(--text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0;
}

.TableContainer .CaptionContainer .CaptionEdgeLeftTop,
.TableContainer .CaptionContainer .CaptionEdgeRightTop,
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom,
.TableContainer .CaptionContainer .CaptionEdgeRightBottom,
.TableContainer .CaptionContainer .CaptionBorderTop,
.TableContainer .CaptionContainer .CaptionBorderBottom,
.TableContainer .CaptionContainer .CaptionVerticalLeft,
.TableContainer .CaptionContainer .CaptionVerticalRight {
	display: none;
}

.TableContentContainer {
	border: none;
	position: relative;
	margin: 0;
	background-color: var(--surface);
	padding: 0;
}

.TableContent { width: 100%; border-collapse: collapse; color: var(--text); }
.TableContent td { padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }

.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
	width: 100%;
	background-color: var(--surface);
	border: none;
}

.TableContainer .Table1 .InnerTableContainer { padding: 14px; }
.TableContainer .Table2 .InnerTableContainer td,
.TableContainer .Table3 .TableContentAndRightShadow td {
	padding: 8px 10px;
	border: 1px solid var(--border-soft);
}

.TableShadowContainerRightTop, .TableShadowRightTop, .TableShadowContainer,
.TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow {
	display: none;
}

/* Labels (form field labels inside content tables) */

.LabelV, .LabelV120, .LabelV150, .LabelV200 {
	font-weight: 700;
	color: var(--text-muted);
	padding-right: 12px;
	white-space: nowrap;
	vertical-align: top;
}

.LabelH {
	font-weight: 700;
	color: var(--text);
	padding-right: 10px;
	white-space: nowrap;
	background-color: var(--surface-alt);
}

.LabelH td { background-color: var(--surface-alt); padding: 6px 10px; }

/* Buttons inside generated pages */

.InnerTableButtonRow { width: 100%; padding: 6px 0; border: 0; }
.InnerTableButtonRow td { padding-right: 8px; }

.BigButton, .BigButtonOver, .ButtonText {
	position: relative;
	width: auto;
	height: auto;
	display: inline-block;
}

/* --------------------------------------------------------------------
   Forms — inputs, selects, buttons, submit
   -------------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"],
textarea, select {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	padding: 8px 10px;
	font-family: var(--font-body);
	font-size: 14px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
textarea:focus, select:focus {
	outline: none;
	border-color: var(--accent-strong);
}

input[type="submit"], input[type="button"], button {
	background: var(--accent);
	color: #ece5dd;
	border: 1px solid var(--accent-strong);
	border-radius: var(--radius);
	padding: 9px 20px;
	font-family: var(--font-nav);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.12s ease;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover {
	background: var(--accent-strong);
}

/* --------------------------------------------------------------------
   News / ticker / featured article
   -------------------------------------------------------------------- */

.Content .BoxContent .Odd { background-color: var(--surface); padding: 8px; }
.Content .BoxContent .Even { background-color: var(--surface-alt); padding: 8px; }
.Content .NewsCategoryIconSmall { display: none; }

.Content #NewsTicker .BoxContent { padding: 10px 14px; min-height: 0; height: auto !important; }
.Content #NewsTicker .BoxContent .Row { position: relative; width: 100%; padding: 4px 0; border-bottom: 1px dashed var(--border-soft); }
.Content #NewsTicker .NewsTickerIcon { display: none; }
.Content #NewsTicker .NewsTickerText { font-size: 13px; margin-left: 0; color: var(--text-muted); }
.Content #NewsTicker .NewsTickerDate { font-size: 11px; position: static; color: var(--text-faint); margin-right: 8px; }
.Content #NewsTicker .NewsTickerShortText { margin-left: 0; height: auto; }
.Content #NewsTicker .NewsTickerFullText { margin-left: 0; margin-right: 0; }
.Content #NewsTicker .NewsTickerExtend { filter: invert(1); cursor: pointer; }

.Content #FeaturedArticle .BoxContent,
.Content #News .BoxContent {
	position: relative;
	padding: 14px;
	height: auto !important;
	min-height: 0;
}

.Content #FeaturedArticle #TeaserThumbnail {
	height: 100px;
	width: 150px;
	margin-left: 10px;
	background-color: var(--bg-elevated);
	float: right;
}

.Content #FeaturedArticle #TeaserText { height: auto; overflow: visible; color: var(--text-muted); }

.Content #FeaturedArticle .NewsHeadlineBackground,
.Content #News .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground {
	position: relative;
	height: auto;
	padding: 10px 14px;
	margin: -14px -14px 14px;
	background: var(--surface-alt);
	border: none;
	border-bottom: 2px solid var(--accent);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.Content #FeaturedArticle .NewsHeadlineIcon,
.Content #News .NewsHeadlineIcon { display: none; }

.Content #FeaturedArticle .NewsHeadlineDate,
.Content #News .NewsHeadlineDate,
.Content #NewsArchive .NewsHeadlineDate {
	font-size: 11px;
	position: static;
	color: var(--text-faint);
	width: auto;
}

.Content #FeaturedArticle .NewsHeadlineText,
.Content #News .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText {
	position: static;
	font-family: var(--font-nav);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
}

.Content #News .NewsHeadlineAuthor {
	position: static;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-faint);
}

/* --------------------------------------------------------------------
   Messages / errors (login, forms)
   -------------------------------------------------------------------- */

.FormFieldError { font-size: 12px; color: var(--accent-strong); }

.SmallBox { position: relative; overflow: hidden; margin-bottom: 14px; }

.SmallBox .ErrorMessage {
	font-size: 13px;
	color: #e8b9b9;
	background-color: rgba(138, 20, 24, 0.15);
	border: 1px solid var(--accent);
	padding: 12px 16px;
}

.SmallBox .Message {
	font-size: 14px;
	background-color: var(--surface);
	border: 1px solid var(--border-soft);
	padding: 14px 16px;
	color: var(--text);
}

.SmallBox .ErrorMessage ul { padding-left: 18px; margin: 4px 0 0; }

.SmallBox .BoxFrameHorizontal, .SmallBox .BoxFrameVerticalRight, .SmallBox .BoxFrameVerticalLeft,
.SmallBox .BoxFrameEdgeLeftTop, .SmallBox .BoxFrameEdgeLeftBottom,
.SmallBox .BoxFrameEdgeRightTop, .SmallBox .BoxFrameEdgeRightBottom, .SmallBox .AttentionSign {
	display: none;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 860px) {
	#body-columns { flex-direction: column; }
	#sidebar { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; }
	.side-box { flex: 1 1 240px; }
}

@media (max-width: 620px) {
	#hero-title { font-size: 34px; }
	#header { padding: 32px 16px; }
	#statusbar { flex-direction: column; align-items: flex-start; }
	.Content #FeaturedArticle #TeaserThumbnail { display: none; }
}

/* ==========================================================================
   Narutibia — ajustes finais e componentes das paginas do guia (plugin narutibia-guia)
   ========================================================================== */

.side-box { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.side-box-title { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.08em; color: var(--gold-soft); border-bottom: 1px solid var(--border); }
.quick-list a { font-weight: 500; }
#statusbar { border-radius: var(--radius-lg); }

.TableContainer { border-radius: var(--radius-lg); overflow: hidden; }
.TableContainer .CaptionContainer { border-bottom: 2px solid var(--accent) !important; }
.TableContainer .CaptionContainer .Text { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; text-transform: none; color: var(--gold-soft); }
.Content #FeaturedArticle .NewsHeadlineText, .Content #News .NewsHeadlineText { font-family: var(--font-display); text-transform: none; color: var(--gold-soft); font-size: 17px; }
.Content #News .BoxContent, .Content #FeaturedArticle .BoxContent { border-radius: var(--radius-lg); }

h1, h2, h3, h4 { font-family: var(--font-display); }
a { color: var(--gold); }
a:hover { color: var(--gold-soft); }
#copyrights { border-top: 1px solid var(--border-soft); margin-top: 28px; }
.foot-kanji { font-family: var(--font-display); font-size: 18px; color: var(--text-muted); margin: 0 0 6px; }

/* ---- componentes do guia ---- */
.g-wrap { display: block; }
.g-hero { padding: 6px 2px 18px; }
.g-hero h1 { margin: 0 0 6px; font-size: 30px; color: var(--gold-soft); }
.g-hero p { margin: 0; color: var(--text-muted); max-width: 760px; }
.g-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 14px 0 22px; }
.g-card { background: linear-gradient(160deg, var(--surface-alt), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.g-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--gold-soft); }
.g-card p { margin: 0 0 6px; color: var(--text-muted); font-size: 14px; }
.g-card ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 14px; }
.g-step { counter-increment: step; position: relative; padding-left: 56px; margin: 0 0 14px; }
.g-step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; background: linear-gradient(145deg, var(--accent-strong), var(--accent-deep)); box-shadow: 0 0 0 3px rgba(224, 36, 63, 0.25); }
.g-steps { counter-reset: step; }
.g-step h3 { margin: 0 0 2px; font-size: 17px; }
.g-step p { margin: 0; color: var(--text-muted); }
.g-note { border-left: 3px solid var(--gold); background: rgba(240, 178, 75, 0.08); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin: 12px 0; color: var(--text-muted); font-size: 14px; }
.g-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 18px; }
.g-table th { text-align: left; padding: 9px 12px; background: var(--surface-alt); color: var(--gold-soft); font-weight: 700; border-bottom: 2px solid var(--accent); position: sticky; top: 52px; }
.g-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.g-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.g-small { color: var(--text-faint); font-size: 12.5px; }

.g-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); position: sticky; top: 56px; z-index: 10; }
.g-filters input[type="search"] { flex: 1 1 220px; }
.g-filters select { flex: 0 0 auto; }
.g-count { margin-left: auto; color: var(--text-faint); font-size: 13px; }
.chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.chip.r-E { color: #b8c4bd; border-color: #55655d; }
.chip.r-D { color: #7fd1a0; border-color: #3f7a58; }
.chip.r-C { color: #6fb9ff; border-color: #2f6da6; }
.chip.r-B { color: #b99bff; border-color: #6a4aa8; }
.chip.r-A { color: #ff9f6b; border-color: #a65a2f; }
.chip.r-S, .chip.r-S1, .chip.r-S2, .chip.r-S3, .chip.r-S4 { color: #ffd98a; border-color: #b9891f; background: rgba(240, 178, 75, 0.1); }
.g-name { font-weight: 700; color: var(--text); }
.g-pt { color: var(--text-faint); font-size: 12.5px; display: block; }
.g-more { text-align: center; margin: 16px 0; }
.g-loot { color: var(--text-muted); font-size: 12.5px; }
.g-loot b { color: var(--gold-soft); }
.g-coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.g-coin { text-align: center; padding: 16px 10px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-alt), var(--surface)); border: 1px solid var(--border); }
.g-coin strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--gold-soft); }
.g-coin span { display: block; color: var(--text-muted); font-size: 13px; }

/* --------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------- */

@media (max-width: 1020px) {
	#portal { grid-template-columns: repeat(2, 1fr); }
	#searchbox { display: none; }
	#serverstate { margin-left: auto; }
}

@media (max-width: 860px) {
	#nav-toggle { display: block; margin-left: auto; }
	#mainnav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg-elevated); padding: 8px 12px 14px; border-bottom: 2px solid var(--accent); }
	body.nav-open #mainnav { display: flex; }
	.nav-drop { display: block; position: static; box-shadow: none; border: none; background: transparent; padding: 0 0 6px 10px; }
	.nav-label { color: var(--gold-soft); }
	#serverstate { display: none; }
	#body-columns { flex-direction: column; }
	#sidebar { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; width: 100%; }
	.side-box { flex: 1 1 240px; }
	#hero { padding: 60px 14px 120px; }
	#hero .moon { width: 300px; height: 300px; margin-left: -150px; }
	#hero .torii { display: none; }
	.g-coins { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	#portal { grid-template-columns: 1fr; margin-top: -50px; }
	#hero-tagline { font-size: 16px; }
	.g-filters { position: static; }
	.g-table th { position: static; }
	.g-hero h1 { font-size: 24px; }
	#statusbar { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.sharingan, #hero .moon { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---- imagens do bestiario/itens, login, botao da loja (18/10) ---- */
.g-mon { white-space: nowrap; }
.g-mon .g-name { display: inline-block; vertical-align: middle; margin-left: 10px; white-space: normal; }
.g-img { image-rendering: pixelated; vertical-align: middle; }
.g-img-m { width: 64px; height: 64px; object-fit: contain; }
.g-img-i { width: 32px; height: 32px; object-fit: contain; }
.g-drops { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.g-drop { display: inline-flex; flex-direction: column; align-items: center; width: 74px; text-align: center; }
.g-drop img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.g-drop em { font-style: normal; font-size: 10.5px; line-height: 1.15; color: var(--text-muted); margin-top: 2px; }

input:not([type]), input[type="tel"], input[type="url"] {
	background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 8px 10px; font-family: var(--font-body); font-size: 14px;
}

#loginbox { position: relative; display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.btn-login, .btn-logout { display: inline-block; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none !important; }
.btn-login { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #fff !important; }
.btn-logout { border: 1px solid var(--border); color: var(--text-muted) !important; }
.login-group { position: relative; }
.login-drop { display: none; position: absolute; right: 0; top: 100%; width: 260px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(0,0,0,.55); z-index: 60; }
.login-group:hover .login-drop, .login-group:focus-within .login-drop { display: block; }
.login-drop label { display: block; font-size: 12px; color: var(--text-muted); margin: 8px 0 3px; }
.login-drop input[type="text"], .login-drop input[type="password"] { width: 100%; }
.login-drop .remember { display: flex; gap: 6px; align-items: center; }
.login-drop button { width: 100%; margin-top: 12px; }
.login-drop p { margin: 10px 0 0; font-size: 12px; text-align: center; }

.side-box-shop { background: linear-gradient(145deg, #3a2208, #1d1209); border: 1px solid rgba(240, 178, 75, 0.6); }
.shop-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none !important; }
.shop-btn:hover { background: rgba(240, 178, 75, 0.12); }
.shop-btn i { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #2b1a05; background: linear-gradient(145deg, var(--gold-soft), #b97a12); }
.shop-btn b { display: block; font-family: var(--font-display); font-size: 20px; color: var(--gold-soft); }
.shop-btn small { color: var(--text-muted); font-size: 12px; }

@media (max-width: 1020px) { #loginbox { margin-left: auto; } #nav-toggle { margin-left: 0; } }
@media (max-width: 860px) { .login-drop { right: -40px; } }

/* ---- loja de Chronicles Coins e acompanhamento do pedido ---- */
.loja-box h3 { margin: 18px 0 8px; font-size: 17px; color: var(--gold-soft); }
.loja-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.loja-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px; border-radius: var(--radius-lg); cursor: pointer; background: linear-gradient(160deg, var(--surface-alt), var(--surface)); border: 2px solid var(--border); transition: border-color .15s, transform .15s; }
.loja-pack:hover { transform: translateY(-3px); }
.loja-pack input { position: absolute; opacity: 0; }
.loja-pack:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 178, 75, 0.2); }
.loja-coins { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--gold-soft); }
.loja-unit { font-size: 12px; color: var(--text-muted); }
.loja-price { margin-top: 6px; font-weight: 700; font-size: 16px; }
#loja-pay { max-width: 420px; margin-top: 8px; }

.ped-head { padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; }
.ped-steps { list-style: none; margin: 0; padding: 0; }
.ped-step { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-left: 3px solid var(--border); margin-left: 12px; position: relative; }
.ped-ic { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--surface-alt); color: var(--text-faint); margin-left: -29px; border: 2px solid var(--border); }
.ped-tx b { display: block; }
.ped-tx small { color: var(--text-faint); font-size: 12.5px; }
.ped-done { border-left-color: #3fbf8f; } .ped-done .ped-ic { background: #1d6b4f; color: #fff; border-color: #3fbf8f; }
.ped-wait { border-left-color: var(--gold); } .ped-wait .ped-ic { background: #4a3410; color: var(--gold-soft); border-color: var(--gold); animation: pedpulse 1.4s ease-in-out infinite; }
.ped-bad { border-left-color: var(--accent-strong); } .ped-bad .ped-ic { background: var(--accent-deep); color: #fff; border-color: var(--accent-strong); }
.ped-on { color: #5fe0b0; font-weight: 700; } .ped-off { color: var(--text-faint); font-weight: 700; }
@keyframes pedpulse { 50% { transform: scale(1.12); } }
div.ped-ok { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-lg); background: rgba(31, 138, 94, 0.18); border: 1px solid #3fbf8f; color: #8df0c4; font-weight: 700; font-size: 16px; }
div.ped-bad { margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-lg); background: rgba(184, 15, 43, 0.15); border: 1px solid var(--accent-strong); color: #ffb3bf; }
.chip.st-delivered { color: #5fe0b0; border-color: #2a8f6c; } .chip.st-paid, .chip.st-approved { color: var(--gold-soft); border-color: var(--gold); } .chip.st-failed { color: #ff9aa8; border-color: var(--accent-strong); }

/* ---- bandeiras de idioma (topo, a direita) ---- */
#langflags { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; margin-left: 4px; }
#langflags .flag { width: 28px; height: 19px; padding: 0; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: none; cursor: pointer; opacity: .6; transition: opacity .15s, transform .15s, box-shadow .15s; line-height: 0; }
#langflags .flag svg { width: 100%; height: 100%; display: block; }
#langflags .flag:hover { opacity: 1; transform: translateY(-1px); }
#langflags .flag.on { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 860px) { #langflags { margin-left: auto; } }

.g-teaser { margin: 28px 0 8px; text-align: center; font-size: 20px; font-style: italic; color: var(--gold, #e8b04a); letter-spacing: .02em; }