/* Avelia2 presentation - "epic" layer on top of the base styles */
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&display=swap");

body { background: #070504 url("img/avelia2_page_dark_2026.jpg") center top / cover fixed; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
	background: radial-gradient(ellipse at 50% 20%, rgba(179, 38, 30, .18), rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75)); }
header.top, .wrap, footer { position: relative; z-index: 1; }
main { gap: 54px; }

/* --- panel: painted background, double gold frame, ornate corners --- */
.panel {
	padding: 46px 48px 40px; border: 0; border-radius: 2px; overflow: visible;
	background:
		linear-gradient(180deg, rgba(22, 14, 9, .93), rgba(12, 8, 6, .96)),
		url("img/avelia2_page_dark_2026.jpg") center / cover;
	box-shadow:
		0 0 0 1px #2a1a0d, 0 0 0 3px #b8883d, 0 0 0 4px #3a2412, 0 0 0 6px rgba(184, 136, 61, .35),
		0 24px 60px rgba(0, 0, 0, .75), inset 0 0 90px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(233, 196, 120, .12);
}
.panel::before, .panel::after {
	content: "\25C6"; position: absolute; top: -13px; width: 24px; height: 24px; line-height: 22px; text-align: center;
	color: #f3d18b; font-size: 15px; background: #1a100a; border: 2px solid #b8883d; transform: rotate(0deg);
	box-shadow: 0 0 12px rgba(255, 180, 80, .45); border-radius: 50%; left: auto; right: auto; height: 24px;
}
.panel::before { left: -13px; }
.panel::after { right: -13px; }
.panel .corner-b { position: absolute; bottom: -13px; width: 24px; height: 24px; line-height: 22px; text-align: center; color: #f3d18b; font-size: 15px;
	background: #1a100a; border: 2px solid #b8883d; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 180, 80, .45); }
.panel .corner-b.l { left: -13px; } .panel .corner-b.r { right: -13px; }

/* --- title banner with ornaments --- */
.panel h2 {
	display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; margin: 0 0 24px;
	font: 900 27px "Cinzel Decorative", serif; letter-spacing: 1px;
	background: linear-gradient(180deg, #fff4d2 0%, #f0c96a 45%, #a8712a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 14px rgba(255, 170, 60, .25));
}
.panel h2::before, .panel h2::after {
	content: ""; flex: 1; max-width: 150px; height: 2px; margin: 0; vertical-align: 0;
	background: linear-gradient(90deg, transparent, #c9953e); -webkit-background-clip: border-box; background-clip: border-box;
}
.panel h2::after { background: linear-gradient(90deg, #c9953e, transparent); }
.panel p, .panel li { font-size: 15.5px; }
.panel b, .panel strong { color: #f6d992; }

/* --- characters breaking out of the frame --- */
.panel.has-char { padding-right: 250px; min-height: 360px; }
.panel .char { position: absolute; right: -60px; bottom: -6px; height: 400px; width: auto; z-index: 2; pointer-events: none;
	filter: drop-shadow(0 0 22px rgba(179, 38, 30, .55)) drop-shadow(0 18px 20px rgba(0, 0, 0, .8)); }
.panel .char.left { right: auto; left: -60px; }
.panel.has-char.char-left { padding-right: 48px; padding-left: 250px; }
.panel .char-glow { position: absolute; right: 0; bottom: 0; width: 320px; height: 320px; z-index: 1; pointer-events: none;
	background: radial-gradient(circle at 60% 70%, rgba(179, 38, 30, .35), transparent 65%); }

/* --- feature cards --- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0 6px; }
.card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(184, 136, 61, .35); border-radius: 4px;
	background: linear-gradient(180deg, rgba(58, 36, 18, .45), rgba(20, 12, 8, .55)); }
.card img { width: 44px; height: 44px; flex: 0 0 44px; }
.card b { display: block; font: 700 15px "Cinzel", serif; color: #f3d18b; }
.card span { font-size: 13.5px; color: #cdbfa8; line-height: 1.45; }

/* --- hero --- */
.panel.hero { padding: 0; overflow: hidden; }
.panel.hero::before, .panel.hero::after { z-index: 3; }
.hero .hero-art { position: relative; height: 330px; background: url("img/avelia2_header_2026.png") center / cover; }
.hero .hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(12, 8, 6, .95) 100%); }
.hero .wordmark {
	position: relative; display: inline-block; font: 900 72px/1 "Cinzel Decorative", serif; margin-top: -60px; z-index: 2;
	background: linear-gradient(180deg, #fff7da 0%, #f6d27a 30%, #b9822c 55%, #f3cf7c 72%, #7a4c17 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 5px 0 rgba(20, 10, 3, .9)) drop-shadow(0 0 18px rgba(255, 150, 40, .45));
}
.hero .wordmark::after { content: attr(data-text); position: absolute; inset: 0;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 250, 225, .95) 50%, rgba(255, 255, 255, 0) 60%);
	background-size: 260% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
	animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 10% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
.hero .tag { margin-top: 8px; color: #e9a092; }
.hero .facts div { background: linear-gradient(180deg, rgba(58, 36, 18, .55), rgba(12, 8, 6, .7)); border-color: rgba(184, 136, 61, .45); }
.hero .facts b { font-size: 22px; }

/* --- event tiles --- */
.events figure { position: relative; }
.events img { border: 1px solid #b8883d; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); transition: transform .2s; }
.events img:hover { transform: scale(1.03); }
.classes figure { border-color: rgba(184, 136, 61, .45); background: radial-gradient(ellipse at 50% 85%, rgba(179, 38, 30, .5), rgba(0, 0, 0, .35) 70%); transition: transform .2s; }
.classes figure:hover { transform: translateY(-4px); }
.classes img { height: 210px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .8)); }

/* --- navigation --- */
nav.side a { background: linear-gradient(180deg, rgba(40, 26, 16, .95), rgba(20, 13, 9, .95)); border-color: rgba(184, 136, 61, .3); font-family: "Cinzel", serif; }
nav.side a.on, nav.side a:hover { background: linear-gradient(180deg, #b13a2e, #6e1a13); border-color: #e0a15a; box-shadow: 0 0 14px rgba(179, 38, 30, .45); }

/* --- divider --- */
.divider { width: 750px; max-width: 100%; height: 22px; margin: -38px 0; text-align: center; color: #c9953e; font-size: 12px; letter-spacing: 10px; opacity: .8; }

@media (max-width: 860px) {
	.panel.has-char, .panel.has-char.char-left { padding: 40px 22px 300px; }
	.panel .char, .panel .char.left { height: 290px; right: 50%; left: auto; transform: translateX(50%); }
	.cards { grid-template-columns: 1fr; }
	.hero .wordmark { font-size: 46px; }
}

.panel.char-left .char-glow { right: auto; left: 0; background: radial-gradient(circle at 40% 70%, rgba(179, 38, 30, .35), transparent 65%); }
.panel.hero { overflow: visible; }
.hero .hero-art { border-bottom: 1px solid rgba(184, 136, 61, .4); }
/* export: leave room for characters that break out of the frame */
body.export .panel.show { margin: 26px 70px 20px; }
body.export .wrap { padding: 0; }

/* --- in-game screenshots --- */
.shot { display: block; margin: 16px auto 4px; max-width: 100%; border: 2px solid #b8883d; border-radius: 3px;
	box-shadow: 0 0 0 3px rgba(20, 12, 8, .9), 0 14px 34px rgba(0, 0, 0, .75), 0 0 22px rgba(179, 38, 30, .25); }
.shots { display: flex; gap: 14px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.shots .shot { margin: 0; }
.npcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.npcs figure { margin: 0; text-align: center; border: 1px solid rgba(184, 136, 61, .45); border-radius: 4px; overflow: hidden;
	background: radial-gradient(ellipse at 50% 90%, rgba(179, 38, 30, .35), rgba(10, 6, 4, .8) 70%); transition: transform .2s; }
.npcs figure:hover { transform: translateY(-4px); }
.npcs img { width: 100%; height: 200px; object-fit: cover; object-position: center 20%; display: block; }
.npcs figcaption { padding: 7px 4px; font: 700 13px "Cinzel", serif; color: #f3d18b; background: rgba(10, 6, 4, .85); border-top: 1px solid rgba(184, 136, 61, .45); }
@media (max-width: 860px) { .npcs { grid-template-columns: repeat(2, 1fr); } }

/* --- NPC lineup (background removed) --- */
.lineup { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 18px -20px 6px; padding-bottom: 6px;
	background: radial-gradient(ellipse at 50% 100%, rgba(233, 180, 90, .28), rgba(0, 0, 0, 0) 60%); }
.lineup figure { margin: 0 -6px; text-align: center; flex: 0 1 auto; }
.lineup img { height: 210px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .8)); transition: transform .2s, filter .2s; }
.lineup figure:hover img { transform: translateY(-5px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .8)) drop-shadow(0 0 12px rgba(255, 190, 90, .6)); }
.lineup figcaption { font: 700 12px "Cinzel", serif; color: #f3d18b; margin-top: 4px; white-space: nowrap; }
.dealers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.dealer { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border: 1px solid rgba(184, 136, 61, .35); border-radius: 4px;
	background: radial-gradient(ellipse at 25% 100%, rgba(179, 38, 30, .35), rgba(10, 6, 4, .55) 70%); }
.dealer .fig { text-align: center; }
.dealer .fig img { height: 230px; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .8)); }
.dealer .fig b { display: block; font: 700 13px "Cinzel", serif; color: #f3d18b; }
.dealer .shot { margin: 0; width: 150px; }
@media (max-width: 860px) { .lineup { flex-wrap: wrap; } .lineup img { height: 150px; } .dealers { grid-template-columns: 1fr; } }
.lineup { margin: 18px 0 6px; gap: 6px; }
.lineup figure { flex: 1 1 0; min-width: 0; margin: 0; }
.lineup img { height: auto; max-height: 200px; max-width: 100%; }

/* --- in-game system bar, rebuilt from the icon files --- */
.sysbar { display: flex; justify-content: center; gap: 10px; margin: 22px 0 8px; flex-wrap: wrap; }
.sysbar div { width: 52px; text-align: center; }
.sysbar span { display: block; font-size: 11px; line-height: 1.2; height: 28px; color: #f1d18b; text-shadow: 0 0 3px #000, 0 1px 2px #000;
	display: flex; align-items: flex-end; justify-content: center; }
.sysbar img { width: 44px; height: 44px; margin-top: 4px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); transition: transform .15s; }
.sysbar div:hover img { transform: translateY(-3px); }
.sysbar { gap: 3px; flex-wrap: nowrap; margin-left: -20px; margin-right: -20px; }
.sysbar div { width: 58px; flex: 0 0 58px; }
.sysbar span { white-space: nowrap; font-size: 10.5px; height: 16px; overflow: visible; }