@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Sunset WoW theme
   ========================================================================== */

:root {
	--bg:        #0a0610;
	--panel-1:   #1b1220;
	--panel-2:   #120b17;
	--panel-3:   #0e0812;
	--line:      #4d3326;
	--line-soft: rgba(232,194,106,.10);
	--gold:      #e8c26a;
	--gold-2:    #ffd98a;
	--amber:     #ff8a3d;
	--ember:     #c8452b;
	--text:      #cdbdae;
	--muted:     #8c7b6d;
	--font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--text);
	background:
		linear-gradient(180deg, rgba(10,6,16,.10) 0, rgba(10,6,16,.50) 300px, var(--bg) 720px),
		var(--bg) url(../images/hero_bg.jpg) no-repeat center top;
	background-size: auto, 1600px auto;
	min-height: 100vh;
}

ul, li, h1, h2, h3, p { margin: 0; padding: 0; list-style: none; }
img { border: 0; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-2); }
*:focus { outline: none; }
.clear { clear: both; }

.wrap { width: 1200px; margin: 0 auto; }

/* ---------- Announcement bar ---------- */
#announce {
	background: linear-gradient(90deg, #120a10, #241017 50%, #120a10);
	border-bottom: 1px solid rgba(232,194,106,.18);
	font-size: 11px;
	letter-spacing: .5px;
}
#announce .wrap {
	display: flex; align-items: center; gap: 10px;
	height: 32px;
}
.announce_label {
	color: #7bd88f; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.announce_text { color: var(--text); flex: 1; }
.announce_links a {
	margin-left: 16px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;
	color: var(--amber);
}
.announce_links a:hover { color: var(--gold-2); }
.announce_links a.announce_discord { color: #8ea1ff; }
.announce_links a.announce_discord:hover { color: #b7c2ff; }

/* ---------- Payments notice (site-wide + in-page) ---------- */
#pay_notice {
	background: linear-gradient(90deg, #2a1a08, #3a230a 50%, #2a1a08);
	border-bottom: 1px solid rgba(255,176,64,.35);
	font-size: 12px;
}
#pay_notice .wrap { display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 4px 0; }
.pay_notice_label {
	color: #1a0f05; background: #ffb040; font-weight: 800; text-transform: uppercase;
	letter-spacing: 1px; font-size: 10px; padding: 2px 8px; border-radius: 3px;
}
.pay_notice_text { color: #ffe2b8; flex: 1; }
.pay_notice_text a, .pay_notice_box a { color: #8ea1ff; font-weight: 700; text-decoration: underline; }
.pay_notice_box {
	margin: 0 0 16px 0; padding: 12px 16px; border-radius: 6px;
	background: rgba(255,176,64,.12); border: 1px solid rgba(255,176,64,.55);
	color: #ffe2b8; font-size: 13px; line-height: 1.5;
}
.pay_notice_box strong { color: #ffb040; }
#top_menu a.nav_discord { color: #8ea1ff; }
#top_menu a.nav_discord:hover { color: #b7c2ff; }

/* ---------- Header ---------- */
#site_header {
	background: linear-gradient(180deg, rgba(20,11,20,.92), rgba(14,8,16,.86));
	border-bottom: 1px solid var(--line);
	box-shadow: 0 6px 26px rgba(0,0,0,.55), inset 0 -1px 0 rgba(232,194,106,.10);
	backdrop-filter: blur(6px);
}
#site_header .wrap {
	display: flex; align-items: center; height: 74px; gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand_sun {
	width: 40px; height: 40px; border-radius: 50%;
	background:
		radial-gradient(circle at 50% 42%, #fff2c2 0, #ffcf6b 28%, #ff8a3d 62%, #b3401f 100%);
	box-shadow: 0 0 0 2px #2a1710, 0 0 0 3px rgba(232,194,106,.55), 0 0 22px rgba(255,138,61,.55);
	position: relative;
}
.brand_sun::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
	border-radius: 0 0 40px 40px;
	background: linear-gradient(180deg, rgba(20,8,16,.0), rgba(20,8,16,.75));
}
.brand_text {
	font-family: var(--font-head); font-weight: 900; font-size: 24px; letter-spacing: 3px;
	background: linear-gradient(180deg, #fff1c4 0%, #ffd06a 45%, #ff9b3e 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,138,61,.35));
}
.brand_text em { font-style: normal; letter-spacing: 4px; }

#main_nav { flex: 1; }
#top_menu { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
#top_menu li { position: relative; }
#top_menu li a {
	display: block; padding: 8px 10px; white-space: nowrap;
	font-family: var(--font-head); font-weight: 700; font-size: 12px;
	letter-spacing: 1.2px; text-transform: uppercase;
	color: #d8c7b2; border-radius: 4px;
	transition: color .2s, background .2s, text-shadow .2s;
}
#top_menu li a:hover {
	color: var(--gold-2); background: rgba(255,138,61,.08);
	text-shadow: 0 0 12px rgba(255,138,61,.7);
}

.auth_buttons { display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.btn, .nice_button, input[type="submit"] {
	display: inline-block; cursor: pointer; text-align: center;
	font-family: var(--font-head); font-weight: 700; font-size: 11.5px;
	letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
	padding: 12px 18px; border-radius: 4px; border: 1px solid var(--line);
	text-shadow: none; height: auto; margin-top: 0;
	transition: all .2s;
}
.btn_ghost, .nice_button, input[type="submit"] {
	color: var(--gold);
	background: linear-gradient(180deg, #2a1a20, #1a0f16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.4);
}
.btn_ghost:hover, .nice_button:hover, input[type="submit"]:hover {
	color: var(--gold-2); border-color: var(--gold);
	background: linear-gradient(180deg, #3a2328, #241319);
	box-shadow: 0 0 16px rgba(255,138,61,.25);
}
.btn_gold {
	color: #2a1206;
	border-color: #ffb45c;
	background: linear-gradient(180deg, #ffd98a, #ff9b3e);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px rgba(255,138,61,.35);
}
.btn_gold:hover {
	color: #1a0a03; filter: brightness(1.08);
	box-shadow: 0 6px 22px rgba(255,138,61,.55);
}

/* ---------- Layout ---------- */
#page { padding-top: 26px; padding-bottom: 20px; }

.frame, #right article, #left article.sidebox {
	position: relative;
	background: linear-gradient(180deg, var(--panel-1), var(--panel-2) 60%, var(--panel-3));
	border: 1px solid var(--line);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--line-soft), 0 10px 30px rgba(0,0,0,.5);
}
/* corner gems */
.frame::before, #right article::before, #left article.sidebox::before,
.frame::after,  #right article::after,  #left article.sidebox::after {
	content: ""; position: absolute; width: 9px; height: 9px;
	background: linear-gradient(135deg, var(--gold-2), var(--amber));
	transform: rotate(45deg); box-shadow: 0 0 8px rgba(255,138,61,.7);
	z-index: 3;
}
.frame::before, #right article::before, #left article.sidebox::before { top: -5px; left: -5px; }
.frame::after,  #right article::after,  #left article.sidebox::after  { bottom: -5px; right: -5px; }

/* Hero */
#slider_bg { display: flex; gap: 24px; margin-bottom: 26px; }
.hero_slider { width: 820px; height: 238px; padding: 6px; flex: none; }
#slider {
	width: 806px; height: 224px; overflow: hidden; border-radius: 4px; position: relative;
	background: #000;
}
#slider img { width: 806px; height: 224px; }
#slider_next, #slider_previous { display: none; }
.caption {
	background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
	color: var(--gold-2); font-family: var(--font-head); font-weight: 700; letter-spacing: 1px;
}

.hero_card {
	flex: 1; padding: 26px 26px 22px;
	display: flex; flex-direction: column; justify-content: center;
}
.hero_card h2 {
	font-family: var(--font-head); font-weight: 900; font-size: 22px; line-height: 1.25;
	color: #fff; letter-spacing: 1px; margin-bottom: 10px;
}
.hero_card h2 span {
	background: linear-gradient(180deg, #fff1c4, #ff9b3e);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero_card p { color: var(--text); font-size: 12.5px; margin-bottom: 18px; }
.hero_cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Content column + sidebar */
#main { display: flex; flex-direction: row; gap: 24px; align-items: flex-start; }
#right { width: 820px; }
#left  { width: 356px; }

/* ---------- Panels ---------- */
#right article, #left article.sidebox { margin-bottom: 22px; }

#right article .top, #left article .top {
	display: block; position: relative;
	font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: 2.5px;
	text-transform: uppercase; color: var(--gold);
	padding: 15px 22px 14px 40px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(90deg, rgba(255,138,61,.10), rgba(255,138,61,0) 70%);
	border-radius: 6px 6px 0 0;
}
#right article .top::before, #left article .top::before {
	content: ""; position: absolute; left: 20px; top: 50%; margin-top: -4px;
	width: 8px; height: 8px; transform: rotate(45deg);
	background: linear-gradient(135deg, var(--gold-2), var(--amber));
	box-shadow: 0 0 8px rgba(255,138,61,.6);
}
#right article a.top:hover { color: var(--gold-2); }

#right article .body { padding: 20px 24px 22px; }
#left article .body  { padding: 16px 18px 18px; }

#right article .body p, #right article .body ul, #right article .body ol { margin-bottom: 10px; }
#right article .body ul { list-style: disc; padding-left: 20px; }
#right article .body ul li { list-style: disc; }
#right article .body ol { padding-left: 22px; }
#right article .body ol li { list-style: decimal; margin-bottom: 4px; }
#right article .body strong { color: #f0dfc8; }

/* News */
.avatar { float: left; margin: 2px 16px 8px 0; }
.avatar img { border-radius: 4px; border: 1px solid var(--line); }
#right article .news_bottom {
	margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft);
	color: var(--muted); font-size: 12px;
}
#right article .news_bottom a { color: var(--amber); }
#right article .comments_button { float: right; display: block; }
#news_pagination a, #messages_pagination a { margin: 0; display: block; }

/* ---------- Sideboxes ---------- */
/* Server status */
.realm { margin-bottom: 4px; }
.realm_online {
	float: right; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	color: #7bd88f;
}
.realm_bar, .poll_bar {
	height: 10px; margin: 8px 0 12px;
	background: #07040b; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.realm_bar_fill, .poll_bar_fill {
	height: 100%;
	background: linear-gradient(90deg, #2f7a45, #7bd88f);
	box-shadow: 0 0 10px rgba(123,216,143,.5);
}
.side_divider { display: none; }
#realmlist {
	margin-top: 10px; padding: 10px 12px; text-align: center;
	font-family: var(--font-head); letter-spacing: 1px; font-size: 12px; color: var(--gold);
	background: rgba(0,0,0,.35); border: 1px dashed var(--line); border-radius: 4px;
}

/* Login sidebox + forms */
#sidebox_login { text-align: left !important; display: block; }
#sidebox_login input[type="submit"] { margin-top: 4px; position: static !important; width: 100%; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea {
	width: 100%; padding: 11px 12px;
	font-family: var(--font-body); font-size: 13px; color: #eadbc8;
	background: #0a060d; border: 1px solid var(--line); border-radius: 4px;
	margin: 0 0 10px;
	box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
	transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, textarea:focus {
	border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,138,61,.18), inset 0 2px 6px rgba(0,0,0,.5);
}
::placeholder { color: #75665a; }

/* User info sidebox */
.sidebox_info table { width: 100%; }
.sidebox_info td { padding: 5px 0; color: var(--text); font-size: 12px; }
.sidebox_info td:first-child { color: var(--muted); }
.sidebox_info center { display: flex; gap: 8px; margin-top: 12px; }
.sidebox_info center a { flex: 1; }

/* Top PvP */
.toppvp_select {
	font-family: var(--font-head); font-weight: 700; letter-spacing: 1px; color: var(--gold);
	margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.toppvp_next, .toppvp_previous { color: var(--amber); }
.toppvp_character {
	padding: 6px 4px; border-bottom: 1px solid var(--line-soft); font-size: 12px;
}
.toppvp_character:last-child { border-bottom: 0; }
.toppvp_character b { color: var(--amber); display: inline-block; width: 20px; font-family: var(--font-head); }
.toppvp_character a { color: #eadbc8; }
.toppvp_character a:hover { color: var(--gold-2); }

/* ---------- Tables & misc content ---------- */
#right table { width: 100%; border-collapse: collapse; }
#right table th {
	text-align: left; padding: 9px 10px; color: var(--gold);
	font-family: var(--font-head); letter-spacing: 1px; font-size: 12px; text-transform: uppercase;
	border-bottom: 1px solid var(--line);
}
#right table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
#right table tr:hover td { background: rgba(255,138,61,.04); }

.online_realm_button, #ucp_characters h1 {
	border: 1px solid var(--line) !important; height: auto !important;
	background: linear-gradient(180deg, #2a1a20, #1a0f16) !important;
	color: var(--gold) !important; padding: 8px 12px !important; border-radius: 4px;
}

.comment, .message_box {
	width: auto !important;
	background: rgba(255,255,255,.02) !important; border: 1px solid var(--line-soft) !important;
	box-shadow: none !important; border-radius: 4px; color: var(--text) !important;
}
.comment_author, .message_box_author { color: var(--gold) !important; }
.comment_date, .message_box_date { color: var(--muted); }

/* ---------- Footer ---------- */
#site_footer {
	margin-top: 30px; padding: 26px 0 30px; text-align: center;
	background: linear-gradient(180deg, rgba(10,6,16,0), #07040a 40%);
	border-top: 1px solid var(--line);
}
.footer_links { margin-bottom: 12px; }
.footer_links a {
	margin: 0 14px; font-family: var(--font-head); font-weight: 700; font-size: 11.5px;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.footer_links a:hover { color: var(--gold-2); }
.footer_copy { color: var(--muted); font-size: 12px; letter-spacing: .5px; }

/* Responsive fallback */
@media (max-width: 1240px) {
	.wrap { width: 96%; }
	#right { width: calc(100% - 380px); }
}

/* ==========================================================================
   Store
   ========================================================================== */
#store_wrapper { position: relative; }
#store { min-width: 0 !important; }

/* filters */
#store form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 2px 0 12px; }
#store form .filter_field {
	float: none !important; height: auto !important; padding: 0 !important; border: 0 !important;
	display: flex; align-items: center; gap: 8px;
}
#store form label { margin: 0 !important; color: var(--muted); }
#store form input[type="text"], #store form select { width: auto !important; min-width: 140px; margin: 0 !important; }
#store form .filter_field a { float: none !important; margin: 0 !important; display: inline-flex !important; align-items: center; gap: 6px; }
#store .ucp_divider { height: 0; border-top: 1px solid var(--line); margin: 4px 0 18px; }

/* catalogue + cart */
#store #store_content { margin: 0 !important; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 22px; }
#store #store_realms { float: none !important; width: auto !important; flex: 1; min-width: 0; }
#store #cart {
	float: none !important; flex: none; width: 250px !important; position: sticky; top: 16px;
	background: rgba(0,0,0,.30); border: 1px solid var(--line); border-radius: 6px; padding: 12px;
}
#store #cart #empty_cart { padding: 14px 6px; color: var(--muted); opacity: 1; }
#store #cart .store_item { padding: 8px 0 !important; height: auto !important; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
#store #cart #cart_price { padding-top: 8px; }
#store #cart #cart_price a { float: none; display: block; width: 100%; margin-top: 10px; }
#store #cart #dp_price_full, #store #cart #vp_price_full { margin: 10px 12px 0 0; }

#store .realm_items { padding: 0 !important; }

/* group headings */
#store .item_group_title {
	margin: 18px 0 10px; padding: 9px 12px; border-radius: 4px; border-bottom: 1px solid var(--line);
	font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
	background: linear-gradient(90deg, rgba(255,138,61,.12), rgba(255,138,61,0) 75%);
}
#store .item_group_title a.hide_group { color: var(--amber); margin-right: 8px; }

/* item cards */
#store .item_group { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 0 6px; }
#store #store_realms .store_item {
	position: relative; display: flex; flex-direction: column; height: auto !important; min-height: 96px;
	padding: 13px 14px 13px 76px !important; color: var(--muted); font-size: 12px; line-height: 1.5;
	background: linear-gradient(180deg, #1a1119, #120b16); border: 1px solid var(--line); border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--line-soft); transition: border-color .2s, transform .2s, box-shadow .2s;
}
#store #store_realms .store_item:hover { border-color: var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 0 0 1px var(--line-soft); transform: translateY(-1px); }
#store #store_realms .store_item .item_icon {
	position: absolute; left: 14px; top: 14px; width: 50px; height: 50px; margin: 0 !important;
	border: 2px solid #000; border-radius: 6px; box-shadow: 0 0 0 1px var(--line);
}
#store #store_realms .store_item .item_name { order: -1; font-size: 14px; line-height: 1.3; font-weight: 700; margin-bottom: 3px; }
#store #store_realms .store_item br, #store #store_realms .store_item .clear { display: none; }
#store #store_realms .store_item .store_buttons { order: 2; float: none !important; margin: 10px 0 0 !important; display: flex; gap: 8px; }
#store #store_realms .store_item .store_buttons a { margin: 0 !important; padding: 8px 12px; font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }

/* readable quality colours on the dark theme */
#store .q3, #store .q3 a { color: #4da6ff; }
#store .q4, #store .q4 a { color: #b565f5; }

/* ---------- Downloads page ---------- */
#right article .body .dl-lead { font-size: 14px; line-height: 1.65; margin-bottom: 6px; }
#right article .body .dl-h {
	display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; padding-bottom: 9px;
	font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--gold-2); border-bottom: 1px solid var(--line);
}
#right article .body .dl-h span {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	font-size: 14px; color: #2a1206; background: linear-gradient(180deg, #ffd98a, #ff9b3e); border-radius: 50%;
}
#right article .body .dl-h small { margin-left: auto; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: .4px; text-transform: none; color: var(--muted); }
#right article .body .dl-h3 { margin: 22px 0 10px; font-family: var(--font-head); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.dl-list { display: flex; flex-direction: column; gap: 10px; }
.dl-item {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px;
	background: linear-gradient(180deg, #1a1119, #120b16); border: 1px solid var(--line); border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--line-soft); transition: border-color .2s, box-shadow .2s;
}
.dl-item:hover { border-color: var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 0 0 1px var(--line-soft); }
.dl-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-name { font-family: Consolas, 'Courier New', monospace; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #f0dfc8; }
.dl-desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dl-side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.dl-size { min-width: 58px; text-align: right; font-size: 12px; color: var(--muted); }
.dl-side .btn { min-width: 118px; }
#right article .body .dl-hint { margin-top: 10px; font-size: 12px; color: var(--muted); }
#right article .body .dl-steps { margin: 0 0 12px; }
#right article .body .dl-steps li { margin-bottom: 8px; line-height: 1.6; }
#right article .body .dl-steps ul { margin: 6px 0 4px; }
#right article .body code, #right article .body kbd {
	padding: 1px 6px; font-family: Consolas, 'Courier New', monospace; font-size: 12px; color: var(--gold-2);
	background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 3px; white-space: nowrap;
}
#right article .body kbd { color: #f0dfc8; }
.dl-note { margin: 16px 0; padding: 14px 18px 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; }
.dl-note.dl-warn { border-left-color: var(--ember); background: rgba(200,69,43,.07); }
.dl-note h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 14px; letter-spacing: .8px; color: var(--gold-2); }
.dl-note h3 small { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--muted); }
.dl-hash { margin: 6px 0 10px; padding: 10px 12px; overflow-x: auto; font-family: Consolas, 'Courier New', monospace; font-size: 11px; line-height: 1.7; color: var(--text); background: #0b060f; border: 1px solid var(--line); border-radius: 4px; }
/* ==========================================================================
   Site-wide mobile layout
   The rules above only ever had a real fluid step down to 1240px - below that,
   the header/nav, hero slider and #right+#left two-column layout all kept
   their desktop fixed pixel widths (main_nav 730px, hero_slider 820px, #right
   820px + #left 356px, ...), so a phone had no choice but to render the whole
   1200px design and shrink it, or overflow sideways. This stacks everything
   to one fluid column and needs the <meta viewport> tag in views/header.tpl
   (without it none of this - or the 1240px rule above - ever gets seen by a
   real phone at all, since it reports a fake ~980px-wide screen instead).
   ========================================================================== */
@media (max-width: 760px) {
	#announce .wrap, #pay_notice .wrap { height: auto; min-height: 0; flex-wrap: wrap; padding: 6px 0; gap: 4px 10px; }
	.announce_text { flex: 1 1 100%; order: 3; }
	.announce_links a { margin-left: 0; margin-right: 14px; }

	#site_header .wrap { height: auto; flex-wrap: wrap; padding: 12px 0; gap: 10px 16px; }
	.brand { flex: 1 1 auto; }
	#main_nav { flex: 1 1 100%; order: 3; }
	#top_menu { flex-wrap: wrap; gap: 4px; }
	#top_menu li a { padding: 6px 8px; font-size: 11px; }
	.auth_buttons { flex: 0 1 auto; }

	#slider_bg { flex-direction: column; gap: 14px; }
	.hero_slider { width: 100%; height: auto; }
	#slider, #slider img { width: 100%; height: auto; aspect-ratio: 806 / 224; }
	.hero_card { padding: 4px 4px 2px; }

	#main { flex-direction: column; gap: 22px; }
	#right, #left { width: 100%; }
}

@media (max-width: 720px) {
	.dl-item { flex-direction: column; align-items: stretch; gap: 10px; }
	.dl-side { justify-content: space-between; }
	#right article .body code { white-space: normal; word-break: break-all; }
}

/* Beta launch refinement: restrained gold, clear hierarchy and keyboard focus. */
.beta-launch { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:24px 0; padding:28px 32px; border:1px solid rgba(227,175,94,.3); border-radius:12px; background:linear-gradient(120deg,rgba(74,33,36,.9),rgba(17,14,24,.96)); box-shadow:0 12px 36px rgba(0,0,0,.2); }
.beta-eyebrow { color:#e5b671; font-size:10px; letter-spacing:2.5px; font-weight:700; }
.beta-launch h2 { margin:8px 0 10px; color:#fff0d7; font-family:Georgia,serif; font-size:27px; line-height:1.25; }
.beta-launch p { max-width:680px; margin:0; color:#cec1bc; font-size:14px; line-height:1.8; }
.beta-launch .btn { flex-shrink:0; }
#site_header { box-shadow:0 8px 32px rgba(0,0,0,.2); }
.btn { transition:background .18s ease,box-shadow .18s ease; }
.btn_gold:hover { box-shadow:0 4px 20px rgba(227,175,94,.2); }
a:focus-visible,button:focus-visible { outline:2px solid #f1c785; outline-offset:4px; }
@media(max-width:760px) { .beta-launch { flex-direction:column; align-items:flex-start; padding:22px; gap:18px; } .beta-launch h2 { font-size:23px; } }
.realm-state{clear:both;text-align:center;font-family:Georgia,serif;font-size:28px!important;font-weight:900!important;letter-spacing:3px;padding:14px 0 8px}.realm-state-online{color:#39ff75!important;text-shadow:0 0 14px rgba(57,255,117,.45)!important}.realm-state-offline{color:#ef6f6f!important}