/* Eclipse - custom rules on top of Tailwind (shipped in assets/js/tailwind.js).
   The design lives in the utility classes; this file adds the display font,
   the copy-button state, and styling for raw ZnoteX pages that have no view. */

.font-brand { font-family: 'Cinzel', serif; letter-spacing: .02em; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: -.012em; }

[data-ec-copy].is-copied {
	color: #34d399 !important;
	border-color: rgba(16, 185, 129, .4) !important;
	background: rgba(16, 185, 129, .1) !important;
}

/* ---- navbar dropdowns -------------------------------------------------- */
.ec-dd-menu {
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ec-dd:hover > .ec-dd-menu,
.ec-dd.is-open > .ec-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ec-dd:hover .ec-dd-caret,
.ec-dd.is-open .ec-dd-caret { transform: rotate(180deg); }
.ec-dd [data-ec-dd] { background: none; border: 0; font: inherit; cursor: pointer; }

/* mobile drawer sections (<details>) */
.ec-m-group summary::-webkit-details-marker { display: none; }
.ec-m-group[open] .ec-m-caret { transform: rotate(180deg); }
.ec-m-caret { transition: transform .15s ease; }

/* changelog box (<details> per entry) */
.ec-cl summary { list-style: none; }
.ec-cl summary::-webkit-details-marker { display: none; }
.ec-cl[open] .ec-cl-mark { border-color: #f59e0b; }
.ec-cl[open] .ec-cl-mark::before { content: "\2212"; }
.ec-cl .ec-cl-mark::before { content: "+"; }
.ec-cl .ec-cl-mark { font-size: 0; }
.ec-cl .ec-cl-mark::before { font-size: 13px; }
.ec-cl[open] .ec-cl-short { display: none; }

/* news slider (3 per page, client-side pages) */
.ec-news { overflow: hidden; }
.ec-news-track { will-change: transform; }
.ec-news-dot.is-active { color: #1a1400; background: linear-gradient(180deg, #fbbf24, #f59e0b); border-color: transparent; }
.ec-news-arrow:disabled { opacity: .35; cursor: default; }
.ec-news-page { align-content: start; }

.ec-lang, .ec-lang select, .ec-lang a { color: #cbd5e1; }
.ec-lang select { background: #0f172a; border: 1px solid #1e293b; border-radius: .5rem; padding: 4px 8px; font-size: 12px; }

/* ---- raw ZnoteX page content (login, highscores, guilds, myaccount, …) ---- */
.ec-content { color: #cbd5e1; font-size: 14px; line-height: 1.7; }
.ec-content a { color: #fbbf24; text-decoration: none; }
.ec-content a:hover { color: #fcd34d; }
.ec-content h1, .ec-content h2, .ec-content h3, .ec-content h4 {
	font-family: 'Cinzel', serif; color: #f8fafc; font-weight: 800; margin: 0 0 .6em; letter-spacing: .01em;
}
.ec-content h1 { font-size: 1.55rem; } .ec-content h2 { font-size: 1.25rem; } .ec-content h3 { font-size: 1.05rem; }
.ec-content p { margin: 0 0 .9em; }
.ec-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.ec-content hr, .ec-content .bighr { border: 0; border-top: 1px solid #1e293b; margin: 1.4rem 0; }

.ec-content table {
	width: 100%; border-collapse: collapse; margin: 0 0 1.4rem;
	background: #0b1120; border: 1px solid #1e293b; border-radius: .75rem; overflow: hidden;
}
.ec-content th, .ec-content td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #1e293b; }
.ec-content thead th, .ec-content tr.yellow td, .ec-content .zheadline {
	background: #131c31; color: #fcd34d; font-weight: 700;
}
.ec-content tr:last-child td { border-bottom: 0; }
.ec-content tr:hover td { background: rgba(251, 191, 36, .05); }

.ec-content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.ec-content select, .ec-content textarea {
	width: auto; max-width: 100%; background: #0b1120; color: #e2e8f0;
	border: 1px solid #334155; border-radius: .5rem; padding: 9px 12px; font: inherit;
}
.ec-content input:focus, .ec-content select:focus, .ec-content textarea:focus {
	outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
}
.ec-content ul:not([class]) { list-style: none; padding: 0; }
.ec-content ul:not([class]) li { padding: 4px 0; }

.ec-content input[type=submit], .ec-content input[type=button],
.ec-content button, .ec-content .btn, .ec-content .button {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	padding: 10px 18px; font: inherit; font-weight: 700; letter-spacing: .3px;
	color: #0b1120; border: 0; border-radius: .6rem;
	background: linear-gradient(to right, #f59e0b, #fbbf24, #f59e0b);
}
.ec-content input[type=submit]:hover, .ec-content button:hover, .ec-content .btn:hover { filter: brightness(1.07); }

.ec-article a { color: #fbbf24; }
.ec-article img { margin: 10px 0; }

/* ---- narrow single-form pages (register, login, …) ------------------- */
.ec-narrow.ec-content { font-size: 13px; }
.ec-narrow h1 { font-size: 1.35rem; margin-bottom: .25em; }
.ec-narrow h2 { font-size: 1rem; }
.ec-narrow form ul, .ec-content form ul:not([class]) { display: flex; flex-direction: column; gap: 14px; }
.ec-narrow form li { padding: 0; }
.ec-narrow input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.ec-narrow select, .ec-narrow textarea { width: 100%; background: #030712; border-radius: .6rem; padding: 11px 14px; }
.ec-narrow input[type=submit], .ec-narrow button[type=submit] { width: 100%; justify-content: center; padding: 12px 18px; margin-top: 4px; }
.ec-narrow font[color=red], .ec-content font[color=red] { display: block; color: #f87171 !important; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); border-radius: .6rem; padding: 10px 12px; margin-bottom: 12px; font-size: 12px; }

/* ---- dashboard-ish raw pages (myaccount, helpdesk) ------------------- */
.ec-content font[color=green], .ec-content font[color="green"] {
	display: block; color: #34d399 !important; background: rgba(16,185,129,.08);
	border: 1px solid rgba(16,185,129,.25); border-radius: .6rem; padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
#myaccount > div, .ec-content .znoteTable { background: #0b1120; border: 1px solid #1e293b; border-radius: .75rem; padding: 14px 16px; margin: 0 0 14px; }
.ec-content .forumReply { width: 100% !important; height: 150px !important; }
.ec-content .g-recaptcha { margin: 4px 0; }