/* ==========================================================================
   Naruto Shinobi Evolution — custom MyAAC theme
   ========================================================================== */

:root{
	--bg: #0a0a0f;
	--bg-elev: #14141c;
	--bg-elev-2: #1b1b26;
	--bg-elev-3: #23232f;
	--border: rgba(255,255,255,0.08);
	--border-strong: rgba(255,255,255,0.16);
	--text: #f2f2f5;
	--text-muted: #a5a5b3;
	--text-dim: #7a7a88;

	--fire: #ff6b1a;
	--fire-deep: #e63946;
	--arcane: #9b59d0;
	--electric: #3ec8ff;
	--gold: #ffb703;

	--accent-grad: linear-gradient(90deg, var(--fire) 0%, var(--fire-deep) 45%, var(--arcane) 100%);
	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 8px 24px rgba(0,0,0,0.45);
}

*{ box-sizing: border-box; }

html, body{
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

body{
	background-image:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,107,26,0.10), transparent 60%),
		radial-gradient(ellipse 900px 500px at 85% 0%, rgba(155,89,208,0.12), transparent 60%);
	background-repeat: no-repeat;
}

a{ color: var(--fire); text-decoration: none; transition: color .15s ease; }
a:hover{ color: var(--electric); }

h1,h2,h3,h4{ color: var(--text); font-weight: 700; letter-spacing: .2px; margin: 0 0 12px; }
h1{ font-size: 26px; }
h2{ font-size: 20px; }
h3{ font-size: 16px; }

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

img{ max-width: 100%; }

::selection{ background: var(--fire); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Layout shell                                                           */
/* ---------------------------------------------------------------------- */

#page{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 18px 40px;
}

/* Header / brand bar ----------------------------------------------------- */

#nse-header{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10,10,15,0.88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}

#nse-header-inner{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 18px;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 68px;
}

#nse-logo{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
#nse-logo img{ height: 46px; width: auto; display: block; }
#nse-logo span{
	font-size: 18px;
	font-weight: 800;
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
}

#nse-status{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--text-muted);
	flex-shrink: 0;
}
.nse-dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nse-dot.online{ background: #33d17a; box-shadow: 0 0 8px #33d17a; }
.nse-dot.offline{ background: #ff4d4f; box-shadow: 0 0 8px #ff4d4f; }

#nse-social{
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding-left: 10px;
	margin-left: 10px;
	border-left: 1px solid var(--border);
}
.nse-social-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-sm);
	background: var(--surface, rgba(255,255,255,.06));
	color: var(--text-muted);
	transition: background .15s, color .15s, transform .15s;
}
.nse-social-btn svg{ width: 14px; height: 14px; }
.nse-social-btn:hover{ color: #fff; transform: translateY(-1px); }
.nse-social-discord:hover{ background: #5865F2; }
.nse-social-whatsapp:hover{ background: #25D366; }

#nse-account{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding-left: 14px;
	margin-left: 14px;
	border-left: 1px solid var(--border);
}
#nse-account-name, #nse-account-login{
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}
#nse-account-name:hover, #nse-account-login:hover{ color: var(--electric); }
#nse-account-logout, #nse-account-create{
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	background: var(--accent-grad);
	color: #fff !important;
	transition: filter .15s ease;
}
#nse-account-logout:hover, #nse-account-create:hover{ filter: brightness(1.12); color: #fff; }

/* Nav --------------------------------------------------------------------*/

#nse-nav{
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
#nse-nav .nse-cat{
	position: relative;
}
#nse-nav .nse-cat-label{
	display: inline-block;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: default;
	border-radius: var(--radius-sm);
	transition: color .15s ease, background .15s ease;
}
#nse-nav .nse-cat:hover .nse-cat-label{
	color: var(--text);
	background: var(--bg-elev-2);
}
#nse-nav .nse-dropdown{
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 6px;
	display: none;
	flex-direction: column;
}
#nse-nav .nse-cat:hover .nse-dropdown{ display: flex; }
#nse-nav .nse-dropdown a{
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
}
#nse-nav .nse-dropdown a:hover{ background: var(--bg-elev-3); color: var(--fire); }

/* Mobile nav toggle */
#nse-nav-toggle{ display: none; }

/* Hero -------------------------------------------------------------------*/

#nse-hero{
	position: relative;
	margin: 22px 0 28px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	min-height: 220px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center 20%;
	perspective: 1400px;
	transform-style: preserve-3d;
	transition: transform .25s ease, box-shadow .25s ease;
	will-change: transform;
}

/* Entrance: banner "unrolls" out of the scroll like the ones painted on its
   own edges, instead of just fading in like every other element on the page. */
@keyframes nse-hero-unroll-kf{
	0%{
		transform: perspective(1400px) rotateX(35deg) scaleY(.04) translateY(-10px);
		opacity: 0;
		filter: blur(3px);
		box-shadow: 0 0 0 rgba(0,0,0,0);
	}
	55%{ opacity: 1; filter: blur(0); }
	100%{
		transform: perspective(1400px) rotateX(0deg) scaleY(1) translateY(0);
		opacity: 1;
		filter: blur(0);
		box-shadow: var(--shadow);
	}
}
.nse-hero-unroll{
	animation: nse-hero-unroll-kf 1.15s cubic-bezier(.16,1,.3,1) both;
}
@media (prefers-reduced-motion: reduce){
	.nse-hero-unroll{ animation: none; }
}
#nse-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,15,0.15) 0%, rgba(10,10,15,0.75) 75%, rgba(10,10,15,0.95) 100%);
}
#nse-hero-content{
	position: relative;
	padding: 22px 26px;
	z-index: 2;
}
#nse-hero-content .nse-eyebrow{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--electric);
	margin-bottom: 6px;
}
#nse-hero-content h1{
	font-size: 30px;
	margin: 0 0 6px;
	text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
#nse-hero-content p{
	color: var(--text-muted);
	max-width: 560px;
	margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Breadcrumb / status bar (replaces old table strip)                     */
/* ---------------------------------------------------------------------- */

#nse-subbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--text-dim);
	font-size: 12px;
	margin-bottom: 14px;
}
#nse-subbar a{ color: var(--text-muted); }
#nse-subbar a:hover{ color: var(--fire); }

/* ---------------------------------------------------------------------- */
/* Content card system (re-skins MyAAC's legacy table classes)            */
/* ---------------------------------------------------------------------- */

.Content, #ContentHelper{
	background: transparent;
}

.TableContainer{
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 0 0 18px;
	overflow: hidden;
}

.CaptionContainer, .TableContainer > div:first-child{
	background: var(--bg-elev-2);
	border-bottom: 1px solid var(--border);
	padding: 12px 16px;
	font-weight: 700;
	font-size: 14px;
	color: var(--text);
}
.CaptionContainer .Text{ font-weight: 700; }
.CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionBorderTop,
.CaptionVerticalLeft, .CaptionVerticalRight, .CaptionBorderBottom,
.CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
.CaptionInnerContainer{
	background: none !important;
	display: none;
}
.CaptionInnerContainer{ display: block; }

table.Table1{
	width: 100%;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 18px;
	overflow: hidden;
	border-collapse: separate;
}

.TableContentContainer, .TableContent{
	padding: 16px;
	background-color: var(--bg-elev) !important;
	background-image: none !important;
}

.OptionContainer{
	background-color: var(--bg-elev-2) !important;
	background-image: none !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px;
	margin-bottom: 10px;
}

/* any element carrying an old beige inline background */
[style*="background-color: #D4C0A1"], [style*="background-color:#D4C0A1"],
[style*="background-color: #F1E0C6"], [style*="background-color:#F1E0C6"],
[style*="background-color: #e5e3d7"], [style*="background-color: #d0cdb4"]{
	background-color: var(--bg-elev-2) !important;
}

.InnerTableContainer{
	background: var(--bg-elev-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px;
	margin-bottom: 10px;
}

.TableShadowContainer, .TableShadowContainerRightTop, .TableShadowRightTop,
.TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow,
.TableContentAndRightShadow{
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	height: auto !important;
}

/* Generic tables (highscores, item lists, etc.) --------------------------*/

table{ border-collapse: collapse; width: 100%; }

table.Table1 td, table.Table2 td, table.Table3 td,
table.tabledatabg td, table.tableheadbg td{
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: 13px;
}

/* Legacy inline bgcolor="" attributes used by many system pages ---------*/
td[bgcolor], tr[bgcolor], table[bgcolor]{
	background-color: var(--bg-elev-2) !important;
	background-image: none !important;
}
td[bgcolor="#F1E0C6"], tr[bgcolor="#F1E0C6"]{ background-color: var(--bg-elev-2) !important; }
td[bgcolor="#D4C0A1"], tr[bgcolor="#D4C0A1"]{ background-color: var(--bg-elev-3) !important; }

table td, table th{ color: var(--text); }
a.white, .white{ color: var(--text) !important; }

table.tableheadbg td, thead td, thead th, tr.tableheadbg td{
	background: var(--bg-elev-3) !important;
	color: var(--text-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 700;
	border-bottom: 1px solid var(--border-strong);
}

tr:hover td{ background: rgba(255,255,255,0.03); }

/* Forms --------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select{
	background: var(--bg-elev-3);
	border: 1px solid var(--border-strong);
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus{
	border-color: var(--fire);
	box-shadow: 0 0 0 3px rgba(255,107,26,0.15);
}

.LabelV, .LabelV120, .LabelV150, .LabelV200, .LabelH{
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 0;
}

.FormFieldError{ color: var(--fire-deep); font-size: 12px; }

/* Buttons ----------------------------------------------------------------*/

input[type="submit"], input[type="button"], button, .BigButton, a.nse-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--accent-grad) !important;
	background-image: var(--accent-grad) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--radius-sm);
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease, transform .1s ease;
	box-shadow: 0 4px 14px rgba(230,57,70,0.25);
}

/* Some pages (e.g. points.html.twig Sair/Avançar) set the stock tibia.com
   sbutton_*.gif as an INLINE background-image on .BigButton -- inline style
   beats this class for that property unless we !important it too, which is
   why those buttons showed the old red/green gif behind our pill styling. */
.BigButton[style*="background-image"]{ background-image: var(--accent-grad) !important; }
input[type="submit"]:hover, input[type="button"]:hover, button:hover,
.BigButton:hover, a.nse-btn:hover{ filter: brightness(1.12); }
input[type="submit"]:active, button:active{ transform: translateY(1px); }

.BigButtonOver{ display: none !important; }
.ButtonText{ color: #fff; }

/* Login page: stack Submit / Account lost buttons instead of side-by-side */
table[width="100%"] > tbody > tr[align="center"],
table[width="100%"] > tr[align="center"]{
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
table[width="100%"] > tbody > tr[align="center"] > td,
table[width="100%"] > tr[align="center"] > td{
	display: block !important;
	width: auto !important;
}

/* DataTables (Monsters, Spells, etc.) — library ships a white-background theme */
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable tbody tr>.sorting_1,
table.dataTable tbody tr>.sorting_2,
table.dataTable tbody tr>.sorting_3{
	background-color: var(--bg-elev) !important;
}
table.dataTable tbody tr:nth-child(even){
	background-color: var(--bg-elev-2) !important;
}
table.dataTable thead th, table.dataTable thead td{
	border-bottom: 1px solid var(--border-strong) !important;
	color: var(--text-muted);
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td,
table.dataTable.display tbody th, table.dataTable.display tbody td{
	border-top: 1px solid var(--border) !important;
}
table.dataTable td, table.dataTable th{ color: var(--text) !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate{ color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
	background: var(--bg-elev-3);
	border: 1px solid var(--border-strong);
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 5px 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{ color: var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	background: var(--accent-grad) !important;
	color: #fff !important;
	border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
	color: var(--text-dim) !important;
}
.dataTables_wrapper .dataTables_processing{
	background: var(--bg-elev) !important;
	color: var(--text) !important;
	border-radius: var(--radius-sm);
}

/* Account management sidebar (My Account / Register / Create Character…) */
#account-manage{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
#account-manage #one{ flex: 0 0 200px; }
#account-manage #two{ flex: 1 1 400px; min-width: 260px; }
.vertical-menu{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vertical-menu a{
	background: var(--accent-grad) !important;
	color: #fff !important;
	display: block !important;
	padding: 10px 14px !important;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(230,57,70,0.2);
	transition: filter .15s ease, transform .1s ease;
}
.vertical-menu a:hover{
	filter: brightness(1.12);
	transform: translateX(2px);
	background: var(--accent-grad) !important;
}

/* Boxes used on account/character pages ----------------------------------*/

.SmallBox{
	background: var(--bg-elev-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px;
}

/* News posts ---------------------------------------------------------- */

.news-item, .NewsHeadline{
	border-bottom: 1px solid var(--border);
	padding-bottom: 14px;
	margin-bottom: 14px;
}
.NewsHeadline{ color: var(--fire); font-weight: 700; }

/* Footer ------------------------------------------------------------------*/

#nse-footer{
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	color: var(--text-dim);
	font-size: 12px;
	text-align: center;
}
#nse-footer a{ color: var(--text-muted); }

#nse-fox-credit{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	transition: background .15s, border-color .15s;
}
#nse-fox-credit:hover{ background: rgba(255,255,255,.08); border-color: var(--electric); }
#nse-fox-credit img{ height: 28px; width: 28px; object-fit: contain; border-radius: 6px; }
#nse-fox-credit span{ font-size: 13px; color: var(--text); }
#nse-fox-credit strong{ color: var(--electric); }

/* Vocation / clan picker (character creation) -----------------------------*/

.nse-voc-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin: 12px 0;
}
.nse-voc-card{
	background: var(--bg-elev-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, transform .1s ease;
}
.nse-voc-card:hover{ border-color: var(--fire); transform: translateY(-2px); }
.nse-voc-card.selected{ border-color: var(--electric); box-shadow: 0 0 0 2px rgba(62,200,255,0.25); }

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

@media (max-width: 760px){
	#nse-header-inner{ flex-wrap: wrap; height: auto; padding: 10px 14px; }
	#nse-status{ order: 3; margin-left: 0; width: 100%; justify-content: center; padding-bottom: 8px; }
	#nse-nav{ order: 4; width: 100%; justify-content: center; }
	#nse-hero-content h1{ font-size: 22px; }
}

/* Checkout stepper (points/pix flow) -----------------------------------
   Old Tibia.com markup (#ProgressBar / .Steps / .StepIcon) used absolute
   positioning tuned for stock CDN images that don't exist in our theme,
   which made the steps stack vertically instead of in a row. Same class
   names, replaced with flexbox so the existing HTML/JS doesn't need to
   change on any of the pages that use it. */

#ProgressBar #Headline{ display: none; }
#ProgressBar #BackgroundContainer,
#ProgressBar #TubeLeftEnd,
#ProgressBar #TubeRightEnd{ display: none; }

#ProgressBar #MainContainer{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	height: auto;
	margin: 0 0 28px;
	padding: 14px 10px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

#ProgressBar #StepsContainer1,
#ProgressBar #StepsContainer2{
	display: flex;
	width: auto;
	height: auto;
	margin: 0;
	text-align: left;
}

#ProgressBar .Steps,
#ProgressBar #FirstStep{
	position: relative;
	float: none;
	top: auto;
	left: auto;
	height: auto;
	width: auto !important;
	margin: 0 18px 0 0;
	font-size: 12px;
}

#ProgressBar .Steps:last-child{ margin-right: 0; }

#ProgressBar .TubeContainer,
#ProgressBar .Tube{
	display: none;
}

#ProgressBar .SingleStepContainer,
#ProgressBar #FirstStep .SingleStepContainer{
	position: static;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

#ProgressBar .StepIcon,
#ProgressBar #FirstStep .StepIcon{
	display: none;
}

#ProgressBar .SingleStepContainer::before{
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border-strong);
}

#ProgressBar .StepText[style*="font-weight:bold"],
#ProgressBar .StepText[style*="font-weight: bold"]{
	color: var(--fire) !important;
}

#ProgressBar .SingleStepContainer:has(.StepText[style*="bold"])::before{
	background: var(--fire);
}

#ProgressBar .StepText{
	position: static;
	width: auto;
	color: var(--text-muted);
	white-space: nowrap;
}

@media (max-width: 640px){
	#ProgressBar #MainContainer{ flex-wrap: wrap; gap: 14px 10px; }
	#ProgressBar .Steps, #ProgressBar #FirstStep{ margin-right: 0; }
}