/*
 * THEME: the site's colours, in one place.  Loaded LAST (see views/includes/head.ejs).
 *
 * The idea comes from the logo: steel-silver metal with a blue rune glow.
 *   - Everything is steel/silver at rest.
 *   - Blue appears only as LIGHT: on hover and on keyboard focus.
 *   - One bright "primary" button per area; every other button is dim steel ("secondary").
 *   - Gold is kept for money and rewards only (the Buy buttons, --c-gold).
 *
 * To re-colour the site, change the values in :root below. Nothing else needs editing.
 */
:root {
	/* ---- steel: the resting accent colour (text emphasis, links, selected tab, underlines) ---- */
	--c-accent: #d3deea;
	--c-accent-rgb: 200, 215, 230;
	--c-accent-deep: #6c7d91;
	--c-hi: #ffffff;
	--c-title: #dfe8f1;
	--g-title: linear-gradient(180deg, #ffffff 0%, #cfdae6 55%, #8396ab 100%);

	/* ---- rune blue: light that shows on hover / focus only ---- */
	--c-glow: #4aa8ff;
	--c-glow-soft: #6cb6ff;
	--c-glow-rgb: 63, 160, 255;
	--glow-text: 0 0 12px rgba(var(--c-glow-rgb), 0.95), 0 0 4px rgba(var(--c-glow-rgb), 0.8);
	--glow-box: 0 0 0 1px var(--c-glow), 0 0 16px rgba(var(--c-glow-rgb), 0.6);

	/* ---- buttons: primary = bright, secondary = dim steel ---- */
	--g-btn-primary: linear-gradient(180deg, #ffffff 0%, #e4ecf4 45%, #a7b6c6 100%);
	--g-btn-primary-hover: linear-gradient(180deg, #f2f9ff 0%, #8fc8ff 50%, #2f6fb8 100%);
	--c-btn-primary-text: #07111d;
	--g-btn-secondary: linear-gradient(180deg, #4a5b70 0%, #2f3d4e 100%);
	--g-btn-secondary-hover: linear-gradient(180deg, #4d6f95 0%, #2f4d70 100%);
	--c-btn-secondary-text: #c3d0de;
	--c-btn-secondary-line: rgba(160, 180, 200, 0.38);
	--bg-btn-ghost: rgba(30, 42, 58, 0.65);

	/* ---- money and rewards (Buy buttons only) ---- */
	--c-gold: #ffb400;
	--c-gold-hover: #e4a106;

	/* ---- surfaces: navy-steel instead of neutral grey ---- */
	--bg-page: #030a15;
	--bg-page-rgb: 3, 10, 21;
	--bg-panel: #0d1623;
	--bg-panel-2: #08111d;
	--bg-raised: #172334;
	--bg-raised-2: #1a2739;
	--bg-deep: #070d18;
	--bg-field: #0b1827;
	--line: #233349;
	--line-2: #26354b;
	--line-steel: #3b4c63;

	/* ---- text ---- */
	--text-dim: #4c6078;
	--text-dim-2: #586a80;
	--text-muted: #71849b;
	--text-soft: #a3b4c8;
}

/* a highlighted word inside body text (the player's name, "shown only once", ...) */
.hl { color: var(--c-accent); font-weight: 700; }

/* ================================================================= buttons */

/* PRIMARY: the bright main action. (.custom-button gets its gradient from --g-btn-primary in style.css.) */
.custom-button {
	box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* SECONDARY: everything else is dim steel. */
.custom-button.btn-secondary {
	background: var(--g-btn-secondary);
	color: var(--c-btn-secondary-text);
	box-shadow: inset 0 0 0 1px var(--c-btn-secondary-line);
}
.sing-up-button,
.passkey-btn,
.social-btn {
	background: var(--bg-btn-ghost);
	color: var(--c-btn-secondary-text);
	border: 1px solid var(--c-btn-secondary-line);
}
.social-btn { border-radius: 0; }

/* ================================================================= hover: blue light spills in */

.custom-button:hover,
.custom-button.btn-primary:hover {
	background: var(--g-btn-primary-hover);
	box-shadow: inset 0 0 22px rgba(var(--c-glow-rgb), 0.95);
	filter: none;
}
.custom-button.btn-secondary:hover {
	background: var(--g-btn-secondary-hover);
	color: #fff;
	box-shadow: inset 0 0 0 1px var(--c-glow-soft), inset 0 0 18px rgba(var(--c-glow-rgb), 0.8);
	filter: none;
}
.sing-up-button:hover,
.passkey-btn:hover,
.social-btn:hover {
	border-color: var(--c-glow-soft);
	color: #fff;
	background: rgba(var(--c-glow-rgb), 0.08);
	box-shadow: var(--glow-box);
}

/* menu, tabs, breadcrumbs, table rows */
.header-menu li a:hover { color: #fff; text-shadow: var(--glow-text); }
.header-menu li a:hover::after { background: var(--c-glow-soft); box-shadow: 0 0 10px rgba(var(--c-glow-rgb), 0.9); }
.header-menu .nav-submenu a:hover { color: #fff; text-shadow: var(--glow-text); background-color: rgba(var(--c-glow-rgb), 0.1); }
.server-tabs button:hover { color: #fff; text-shadow: var(--glow-text); background-color: rgba(var(--c-glow-rgb), 0.06); }
.breadcrumbs ul li a:hover { color: #fff; text-shadow: var(--glow-text); }
.table-top-rank tr:hover { color: #fff; background-color: rgba(var(--c-glow-rgb), 0.1); box-shadow: inset 3px 0 0 var(--c-glow); }
.rules-link:hover { color: #fff; text-shadow: var(--glow-text); }

/* ================================================================= keyboard focus: always a visible blue ring */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.custom-checkbox:focus-visible + label::before {
	outline: 2px solid var(--c-glow);
	outline-offset: 2px;
}
.custom-button:focus-visible { outline-offset: 3px; }
.form-control:focus { box-shadow: var(--glow-box); }

/* ================================================================= pop-up messages (SweetAlert) */

.swal2-popup {
	--swal2-background: var(--bg-panel);
	background: var(--bg-panel);
	color: var(--text-soft);
	border: 1px solid var(--line);
	border-radius: 2px;
}
.swal2-title { color: var(--c-title); }
.swal2-html-container { color: var(--text-soft); }
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix { background: var(--bg-panel) !important; }
.swal2-popup .swal2-styled.swal2-confirm {
	background: var(--g-btn-primary) !important;
	color: var(--c-btn-primary-text) !important;
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 #fff !important;
}
.swal2-popup .swal2-styled.swal2-confirm:hover { background: var(--g-btn-primary-hover) !important; box-shadow: var(--glow-box) !important; }
.swal2-popup .swal2-styled.swal2-confirm:focus { box-shadow: var(--glow-box) !important; }
.swal2-popup .swal2-styled.swal2-cancel {
	background: var(--g-btn-secondary) !important;
	color: var(--c-btn-secondary-text) !important;
	border-radius: 2px;
}


/* ---- News article body (text converted from Discord / the admin page) ---- */
.news-post-body { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.news-post-body p { margin: 0 0 18px; }
.news-post-body h4 { margin: 26px 0 12px; font-size: 20px; color: var(--c-title, #fff); }
.news-post-body ul, .news-post-body ol { margin: 0 0 18px; padding-left: 26px; }
.news-post-body li { margin-bottom: 6px; }
.news-post-body blockquote { margin: 0 0 18px; padding: 8px 16px; border-left: 3px solid rgba(var(--c-accent-rgb), 0.6); background: rgba(255, 255, 255, 0.04); }
.news-post-body code { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); font-size: 0.92em; }
.news-post-body pre { margin: 0 0 18px; padding: 14px 16px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); overflow-x: auto; }
.news-post-body pre code { padding: 0; background: none; }
.news-post-body a { color: var(--c-accent); text-decoration: underline; }
.news-post-body a:hover { color: #fff; text-shadow: var(--glow-text); }
.news-post-body .dc-mention { color: var(--c-accent); }
.news-post-body time { white-space: nowrap; }

/* ---- Home page: Latest News cards ---- */
.home-news { margin: 50px 0 20px; }
.home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0 26px; }
.home-news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: 6px; background: rgba(0, 0, 0, 0.45); color: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.home-news-card:hover { border-color: rgba(var(--c-glow-rgb), 0.65); box-shadow: 0 0 18px rgba(var(--c-glow-rgb), 0.22); transform: translateY(-2px); }
.home-news-image { display: block; height: 170px; background: #0b1018; overflow: hidden; }
.home-news-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-news-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.home-news-title { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.home-news-text { color: #c4ccd8; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-news-date { margin-top: auto; color: #8d99aa; font-size: 12px; }
.home-news-all { margin: 0 auto; }
@media (max-width: 900px) { .home-news-grid { grid-template-columns: 1fr; } .home-news-image { height: 190px; } }

/* ---- Header block spacing: clock, logo, status tiles, then the page title ----
   Every page set <main style="margin-top:170px"> under the status tiles, which left a big empty band above the page title
   (title already has its own 70px top margin). The logo also sat 63px under the clock on PC and 150px above the tiles on phones. */
main.main { margin-top: 0 !important; }
@media (min-width: 769px) { .logo { margin-top: 80px; } }
@media (max-width: 768px) { .logo { margin-bottom: 80px; } }

/* ---- Footer: copyright left, logo centred (the "developed by" block that used to balance it is gone) ---- */
@media (min-width: 769px) {
	.footer-container { display: grid; grid-template-columns: 1fr auto 1fr; }
	.footer-logo { justify-self: center; }
}

/* ---- Home page picture blocks (video / Vote / Community): make them stand out from the dark page ---- */
.links-block { gap: 12px; }
.video-img,
.banner-1,
.banner-2 {
	border: 2px solid rgba(var(--c-accent-rgb), 0.85);
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(var(--c-glow-rgb), 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
	transition: border-color .25s, box-shadow .25s;
}
.video-img:hover,
.banner-1:hover,
.banner-2:hover {
	border-color: rgba(var(--c-glow-rgb), 0.95);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 26px rgba(var(--c-glow-rgb), 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* less darkening on top of the pictures so their colours show */
.video-img::after { background: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0) 0%, rgba(var(--bg-page-rgb), 0.35) 100%); }
.banner-1::before,
.banner-2::before { background: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0.05) 0%, rgba(var(--bg-page-rgb), 0.4) 100%); }
/* a little lift in brightness and colour */
.video-img img { filter: brightness(1.25) saturate(1.2); }
.banner-1 { background-blend-mode: normal; }

/* ---- Discord link page: the one-time code ---- */
.discord-code {
	margin: 6px auto 18px;
	padding: 18px 12px;
	max-width: 460px;
	text-align: center;
	font-family: Consolas, 'Courier New', monospace;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: 6px;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(var(--c-accent-rgb), 0.85);
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(var(--c-glow-rgb), 0.35);
	user-select: all;
}
.discord-code-help code { white-space: nowrap; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #fff; user-select: all; }
.discord-code-actions { display: flex; justify-content: center; margin-top: 4px; }
.discord-code-actions .session-btn { width: auto; min-width: 180px; }
@media (max-width: 480px) { .discord-code { font-size: 30px; letter-spacing: 3px; } }.discord-generate { display: flex; justify-content: center; margin-top: 10px; }
.discord-generate .session-btn { width: auto; min-width: 240px; max-width: 100%; white-space: nowrap; flex: none; }

/* ---- Full-page cards (verify email, reset password, two-step ...): the logo sits INSIDE the card, not hanging above the box
   over the page title. (The login / register popups keep their hanging logo: those are real .modal windows.) ---- */
.pageContent .modal-logo { position: static; transform: none; width: auto; height: auto; display: flex; justify-content: center; margin: 0 0 4px; }
.pageContent .modal-logo img { width: 230px; height: auto; max-height: none; max-width: 100%; }
@media (max-width: 773px) { .pageContent .modal-logo img { width: 170px; } }

/* ---- Profile page: account buttons (same style as Vote / Guild Settings) ---- */
.banner-compact .banner-title { font-size: 26px; }
.banner-pw     { background-image: url(/images/news/night-skirmish-2.jpg); }
.banner-logins { background-image: url(/images/news/forest-ruins-3.jpg); }
.banner-2fa    { background-image: url(/images/news/crystal-canyon-1.jpg); }
.banner-discord { background-image: url(/images/news/spell-duel-2.jpg); }.banner-compact::before { background: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0.35) 0%, rgba(var(--bg-page-rgb), 0.7) 100%); }
.banner-compact .banner-title, .banner-compact span { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.8); }