/* ==========================================================================
   arena-theme.css — Identidade visual única do site (mesma da tela de login)
   Espaço profundo + vidro fosco + dourado. Carregado DEPOIS do CSS do template
   Aurum, apenas sobrescrevendo cores/superfícies (não muda a estrutura).
   ========================================================================== */

:root {
	--void: #02030a;
	--ink: #eef1ff;
	--ink-dim: #a9b0d4;
	--ink-faint: #6f78a6;
	--cyan: #4fe3ff;
	--violet: #8b5cff;
	--magenta: #ff5cd6;
	--gold-2: #ff9d2e;
	--ok: #5bf0a0;
	--bad: #ff6b81;
	--glass-bg: linear-gradient(150deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 55%, rgba(180, 160, 255, .06) 100%);
	--font-display: "Cinzel", "Trajan Pro", ui-serif, Georgia, "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* variáveis do template Aurum remapeadas para a paleta do jogo */
	--bg: #02030a;
	--panel: rgba(14, 18, 48, .55);
	--panel-light: rgba(255, 255, 255, .07);
	--gold: #ffd36a;
	--gold-light: #fff0b0;
	--text: #eef1ff;
	--muted: #a9b0d4;
	--border: rgba(255, 255, 255, .14);
	--green: #5bf0a0;
	--radius: 20px;
	font-family: var(--font-body);
}

html { background: var(--void); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
	background: radial-gradient(120% 90% at 50% 0%, #0a0f2a 0%, var(--void) 60%) fixed !important;
	color: var(--ink); font-family: var(--font-body); min-height: 100vh;
}
::selection { background: rgba(255, 211, 106, .35); color: #fff; }
* { scrollbar-color: rgba(255, 211, 106, .45) rgba(255, 255, 255, .05); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffe08a, #ff9d2e); border-radius: 9px; border: 2px solid #0a0f2a; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); }

/* fundo animado (criado por arena-theme.js) */
#arena-space { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.arena-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 4, .55) 100%); }
.site-header, .hero, .world-strip, .site-grid, .site-footer, .page-banner, .skip-link, .mobile-nav { position: relative; z-index: 2; }
.site-header { z-index: 30; }

/* ---------- Tipografia ---------- */
h1, h2, .brand, .hero h1 { font-family: var(--font-display); }
.hero h1, .page-banner h1 { color: var(--ink); text-shadow: 0 .12em 1em rgba(0, 0, 0, .6); letter-spacing: .01em; }
.hero h1 em, .page-banner h1 em { font-style: normal; background: linear-gradient(100deg, #fff6d0 0%, #ffd36a 35%, #ff9d2e 70%, #fff0b0 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: arenaSheen 7s linear infinite; }
.eyebrow { color: var(--gold); letter-spacing: .3em; font-weight: 600; }
a { color: var(--cyan); }
a:hover { color: #b8f4ff; }
.muted { color: var(--ink-dim); }
.gold { color: var(--gold); }

/* ---------- Cabeçalho ---------- */
.site-header {
	background: rgba(4, 6, 20, .66); border-bottom: 1px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .35);
}
.brand { color: var(--ink); }
.brand > span { background: linear-gradient(100deg, #fff6d0, #ffd36a 45%, #ff9d2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { -webkit-text-fill-color: var(--ink-faint); letter-spacing: .22em; }
.desktop-nav > a, .nav-dropdown summary { color: var(--ink-dim); font-weight: 600; transition: color .25s, text-shadow .25s; }
.desktop-nav a[aria-current], .desktop-nav > a:hover, .nav-dropdown summary:hover { color: var(--gold); text-shadow: 0 0 .9rem rgba(255, 211, 106, .5); }
.account-link { border: 1px solid rgba(255, 211, 106, .5); border-radius: 99rem; color: var(--gold); background: rgba(255, 211, 106, .07); transition: .3s; }
.account-link:hover { background: linear-gradient(135deg, #ffe58f, #ff9d2e); color: #1b1203; box-shadow: 0 .5rem 1.6rem rgba(255, 170, 50, .4); }
.nav-dropdown > div, .mobile-nav { background: rgba(8, 10, 30, .94); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, .6); }
.nav-dropdown a:hover, .mobile-nav a:hover { color: var(--gold); background: rgba(255, 255, 255, .06); }
.mobile-toggle { border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 99rem !important; color: var(--ink) !important; background: rgba(255, 255, 255, .06) !important; }

/* ---------- Hero ---------- */
.hero { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hero-art {
	background-image:
		radial-gradient(ellipse at 72% 38%, rgba(139, 92, 255, .30), transparent 62%),
		linear-gradient(90deg, rgba(2, 3, 10, .94) 0%, rgba(2, 3, 10, .62) 42%, rgba(2, 3, 10, .12) 100%),
		linear-gradient(0deg, rgba(2, 3, 10, .9) 0%, transparent 42%),
		url(templates/aurum/world.webp) !important;
	opacity: .85;
}
.hero-seal { border-color: rgba(255, 211, 106, .55) !important; box-shadow: 0 0 3rem rgba(255, 190, 70, .22); }
.hero-presence strong, .hero-bottom b { color: var(--gold); }

/* ---------- Botões ---------- */
.button, body .content-panel input[type=submit], body .content-panel button, body .content-panel input[type=button] {
	position: relative; overflow: hidden; border: 0 !important; border-radius: 14px !important; color: #1b1203 !important; font-weight: 700; letter-spacing: .02em;
	background: linear-gradient(135deg, #ffe58f 0%, #ffd36a 40%, #ff9d2e 100%) !important;
	box-shadow: 0 .6rem 1.8rem rgba(255, 160, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .7) !important; cursor: pointer;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .3s !important;
}
.button:hover, body .content-panel input[type=submit]:hover, body .content-panel button:hover { transform: translateY(-.15rem); box-shadow: 0 1rem 2.4rem rgba(255, 160, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .7) !important; }
.button.outline { background: rgba(255, 255, 255, .07) !important; color: var(--ink) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: none !important; }
.text-link { color: var(--cyan); }

/* ---------- Superfícies de vidro ---------- */
.world-strip, .panel, .content-panel, .page-banner, .play-card, .community-card, .leaderboard {
	background: var(--glass-bg) !important; border: 1px solid rgba(255, 255, 255, .13) !important; border-radius: 20px;
	-webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
	box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.world-strip { border-top: 1px solid rgba(255, 255, 255, .13) !important; border-radius: 0 0 20px 20px; }
.world-strip > div + div:before { background: rgba(255, 255, 255, .12) !important; }
.world-strip strong { color: var(--gold); }
.page-banner { padding: 1.4rem 1.6rem; }
.play-card { background: radial-gradient(ellipse at top right, rgba(255, 211, 106, .16), transparent 70%), var(--glass-bg) !important; }
.site-footer { background: rgba(4, 6, 20, .55); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px 20px 0 0; padding-left: 2rem; padding-right: 2rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.site-footer nav a { color: var(--ink-dim); }
.site-footer nav a:hover { color: var(--gold); }
.rank-row { border-bottom: 1px solid rgba(255, 255, 255, .1); transition: background .25s; }
.rank-row:hover { background: rgba(255, 211, 106, .07); }
.rank-number { background: rgba(255, 211, 106, .12) !important; color: var(--gold) !important; border-color: rgba(255, 211, 106, .4) !important; }
.status-dot.active { background: var(--ok) !important; box-shadow: 0 0 .8rem var(--ok); }

/* ---------- Conteúdo legado do MyAAC (tabelas/formulários) ---------- */
body .content-panel { color: var(--ink); }
body .content-panel a { color: var(--cyan); }
body .content-panel a:hover { color: #b8f4ff; text-shadow: 0 0 .8rem rgba(79, 227, 255, .5); }
body .content-panel h2, body .content-panel h3 { color: var(--gold); font-family: var(--font-display); }
body .content-panel td, body .content-panel th { border-bottom: 1px solid rgba(255, 255, 255, .09); color: var(--ink); }
body .content-panel th, body .content-panel .TableContent th { background: rgba(255, 211, 106, .1) !important; color: var(--gold) !important; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
body .content-panel tr:nth-child(even) td { background: rgba(255, 255, 255, .03) !important; }
body .content-panel tr:hover td { background: rgba(255, 211, 106, .06) !important; }
body .content-panel .TableContainer .CaptionContainer, body .content-panel .TableContainer .CaptionContainer .Text { color: var(--gold) !important; font-family: var(--font-display); }
body .content-panel input:not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]):not([type=button]), body .content-panel textarea, body .content-panel select {
	background: rgba(4, 6, 20, .55) !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 12px !important; color: var(--ink) !important; padding: .6rem .8rem; outline: none; transition: border-color .3s, box-shadow .3s;
}
body .content-panel input:focus, body .content-panel textarea:focus, body .content-panel select:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 .2rem rgba(79, 227, 255, .16), 0 0 1.4rem rgba(79, 227, 255, .12); }
body .content-panel select option { background: #0b0f2a; color: var(--ink); }
.notice, body .content-panel .success, body .content-panel .warning, body .content-panel .error, body .content-panel .note { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 14px; color: var(--ink); }
.notice.error, body .content-panel .error { background: rgba(255, 80, 110, .12) !important; border-color: rgba(255, 107, 129, .5) !important; color: #ffd5db; }
body .content-panel .success { background: rgba(60, 220, 140, .12) !important; border-color: rgba(91, 240, 160, .5) !important; color: #d2ffe6; }
body .content-panel .red, body .content-panel .FormFieldError { color: var(--bad) !important; }
body .content-panel .NewsHeadline, body .content-panel .NewsTable { border-color: rgba(255, 255, 255, .12) !important; }

body .content-panel .CaptionContainer, body .content-panel .TableContainer .CaptionContainer { background: linear-gradient(90deg, rgba(255, 211, 106, .14), rgba(255, 255, 255, .03)) !important; border-radius: 14px 14px 0 0; }
body .content-panel .TableContentContainer, body .content-panel .TableContentAndRightShadow { background: transparent !important; }

/* ---------- Jogo (usa a mesma identidade) ---------- */
#cw-app { --bg: transparent; }
.cw-head, .cw-card-box, .cw-cf, .cw-cm, .cw-chs button, .cw-ct, .cw-chest { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

@keyframes arenaSheen { to { background-position: -220% 0; } }
@media (max-width: 800px) { .site-footer { border-radius: 20px; margin-bottom: 1rem; } .world-strip { border-radius: 0 0 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .hero h1 em, .page-banner h1 em { animation: none; } }