/* Intrigue Chat login theme: ink, violet smoke, ember and gilded parchment */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@1,500;1,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
	--ic-ink: #07040b;
	--ic-ink-2: #110818;
	--ic-violet: #b02cff;
	--ic-violet-deep: #6a12c9;
	--ic-ember: #ff8a1e;
	--ic-gold: #f7b955;
	--ic-gold-pale: #ffe0a3;
	--ic-text: #f5eefb;
	--ic-muted: rgba(236, 222, 250, .72);
	--ic-line: rgba(247, 185, 85, .28);
	--ic-glass: rgba(18, 8, 26, .62);
	--ic-display: 'Cinzel', Georgia, serif;
	--ic-script: 'Cormorant Garamond', Georgia, serif;
	--ic-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { background: var(--ic-ink); }

#login_wrap.ic-wrap {
	position: relative;
	min-height: 100vh;
	overflow-x: hidden;
	background: var(--ic-ink);
	color: var(--ic-text);
	font-family: var(--ic-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
#login_wrap.ic-wrap *, #login_wrap.ic-wrap *::before, #login_wrap.ic-wrap *::after { box-sizing: border-box; }

/* ---------- Atmosphere ---------- */
.ic-atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
	background:
		radial-gradient(ellipse 60% 45% at 50% 0%, rgba(106, 18, 201, .22), transparent 70%),
		radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 138, 30, .10), transparent 70%),
		var(--ic-ink);
}
.ic-atmos::after { /* fine grain so gradients don't band */
	content: ''; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ic-smoke { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.ic-smoke--violet { width: 46vw; height: 46vw; top: -12vw; right: -8vw; background: radial-gradient(circle, var(--ic-violet), transparent 65%); animation: ic-drift 26s ease-in-out infinite alternate; }
.ic-smoke--ember  { width: 38vw; height: 38vw; bottom: -14vw; left: -10vw; background: radial-gradient(circle, var(--ic-ember), transparent 65%); opacity: .35; animation: ic-drift 32s ease-in-out infinite alternate-reverse; }
.ic-smoke--gold   { width: 24vw; height: 24vw; top: 38%; left: 30%; background: radial-gradient(circle, var(--ic-violet-deep), transparent 70%); opacity: .3; animation: ic-drift 40s ease-in-out infinite alternate; }
@keyframes ic-drift {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(-4vw, 3vw) scale(1.08); }
	100% { transform: translate(3vw, -2vw) scale(.96); }
}

.ic-embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
	background: var(--ic-gold-pale); box-shadow: 0 0 8px 2px var(--ic-ember); opacity: 0;
	animation: ic-rise 14s linear infinite; }
.ic-embers i:nth-child(odd) { background: #f2c6ff; box-shadow: 0 0 8px 2px var(--ic-violet); }
.ic-embers i:nth-child(1)  { left: 6%;  animation-delay: 0s;   animation-duration: 13s; }
.ic-embers i:nth-child(2)  { left: 14%; animation-delay: 3s;   animation-duration: 17s; }
.ic-embers i:nth-child(3)  { left: 23%; animation-delay: 7s;   animation-duration: 12s; }
.ic-embers i:nth-child(4)  { left: 31%; animation-delay: 1.5s; animation-duration: 19s; }
.ic-embers i:nth-child(5)  { left: 42%; animation-delay: 9s;   animation-duration: 15s; }
.ic-embers i:nth-child(6)  { left: 51%; animation-delay: 4s;   animation-duration: 21s; }
.ic-embers i:nth-child(7)  { left: 60%; animation-delay: 11s;  animation-duration: 14s; }
.ic-embers i:nth-child(8)  { left: 68%; animation-delay: 6s;   animation-duration: 18s; }
.ic-embers i:nth-child(9)  { left: 77%; animation-delay: 2s;   animation-duration: 16s; }
.ic-embers i:nth-child(10) { left: 85%; animation-delay: 8s;   animation-duration: 20s; }
.ic-embers i:nth-child(11) { left: 92%; animation-delay: 5s;   animation-duration: 13s; }
.ic-embers i:nth-child(12) { left: 97%; animation-delay: 12s;  animation-duration: 17s; }
@keyframes ic-rise {
	0%   { transform: translate(0, 0); opacity: 0; }
	10%  { opacity: .9; }
	100% { transform: translate(-40px, -105vh); opacity: 0; }
}

/* ---------- Layout ---------- */
.ic-page { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px 24px; }

.ic-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: min(calc(100vh - 56px), 880px); }

.ic-mark { position: relative; display: flex; justify-content: center; }
.ic-mark::before { /* halo behind the scroll */
	content: ''; position: absolute; inset: 12%; border-radius: 50%;
	background: radial-gradient(circle, rgba(176, 44, 255, .35), rgba(255, 138, 30, .12) 45%, transparent 70%);
	filter: blur(30px); animation: ic-pulse 6s ease-in-out infinite;
}
.ic-mark picture { display: block; width: 100%; max-width: 560px; }
.ic-logo {
	position: relative; display: block; width: 100%; height: auto;
	mix-blend-mode: screen; /* drops the logo's black backdrop into the scene */
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 72%);
	        mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 72%);
	animation: ic-float 9s ease-in-out infinite;
}
@keyframes ic-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ic-pulse { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

/* ---------- Panel ---------- */
.ic-panel {
	position: relative; padding: 44px 40px 36px; border-radius: 22px;
	background: linear-gradient(160deg, rgba(34, 14, 48, .72), var(--ic-glass) 55%, rgba(30, 12, 8, .6));
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 224, 163, .08);
}
.ic-panel::before { /* gilded hairline border */
	content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(135deg, rgba(247, 185, 85, .7), rgba(176, 44, 255, .45) 45%, rgba(255, 138, 30, .55));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}

.ic-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
	font: 600 .74rem/1 var(--ic-display); letter-spacing: .32em; text-transform: uppercase; color: var(--ic-gold); }
.ic-eyebrow span { flex: 0 0 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--ic-gold)); }
.ic-eyebrow span:last-child { background: linear-gradient(90deg, var(--ic-gold), transparent); }

.ic-title { margin: 0 0 16px; font: 600 clamp(2rem, 3.4vw, 2.9rem)/1.12 var(--ic-display); letter-spacing: .01em; color: var(--ic-text); }
.ic-title em { font-family: var(--ic-script); font-style: italic; font-weight: 600; font-size: 1.12em; letter-spacing: 0;
	background: linear-gradient(100deg, var(--ic-violet) 0%, #e07bff 40%, var(--ic-ember) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.ic-lede { margin: 0 0 30px; max-width: 46ch; font-size: 1.02rem; color: var(--ic-muted); }

.ic-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ic-btn {
	flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer;
	font: 700 .82rem/1 var(--ic-display); letter-spacing: .16em; text-transform: uppercase;
	transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease, color .25s ease;
}
.ic-btn--primary {
	color: #fff; background: linear-gradient(110deg, var(--ic-violet-deep), var(--ic-violet) 45%, var(--ic-ember) 100%);
	background-size: 180% 100%; background-position: 0 0;
	box-shadow: 0 10px 30px -8px rgba(176, 44, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.ic-btn--primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(255, 138, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ic-btn--gold {
	color: var(--ic-gold-pale); background: rgba(247, 185, 85, .06);
	box-shadow: inset 0 0 0 1px rgba(247, 185, 85, .55);
}
.ic-btn--gold:hover { color: #1a0d02; background: linear-gradient(120deg, #ffd27a, var(--ic-gold) 50%, #e59a2f); transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(247, 185, 85, .7); }
.ic-btn:focus-visible, .ic-guest:focus-visible { outline: 2px solid var(--ic-gold-pale); outline-offset: 3px; }

.ic-guest {
	display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 6px 2px; border: 0; background: none; cursor: pointer;
	font: 600 .92rem/1 var(--ic-body); color: var(--ic-muted);
	border-bottom: 1px solid rgba(236, 222, 250, .2); transition: color .2s, border-color .2s, gap .2s;
}
.ic-guest:hover { color: var(--ic-gold-pale); border-color: var(--ic-gold); gap: 12px; }
.ic-guest i { font-size: .78em; }

.ic-perks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--ic-line); }
.ic-perks li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ic-muted); }
.ic-perks i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: .8rem;
	color: var(--ic-gold); background: rgba(247, 185, 85, .08); box-shadow: inset 0 0 0 1px rgba(247, 185, 85, .22); }

/* ---------- Rank showcase ---------- */
.ic-ranks { padding: 72px 0 40px; }
.ic-ranks__head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.ic-ranks__head .ic-eyebrow { justify-content: center; }
.ic-h2 { margin: 0 0 12px; font: 600 clamp(2rem, 4vw, 3rem)/1.1 var(--ic-display);
	background: linear-gradient(180deg, var(--ic-gold-pale), var(--ic-gold) 60%, #c97a1c);
	-webkit-background-clip: text; background-clip: text; color: transparent; }
.ic-ranks__sub { margin: 0; color: var(--ic-muted); }

.ic-tiers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ic-tier {
	grid-column: span 6; position: relative; padding: 26px 22px 22px; border-radius: 20px;
	background: linear-gradient(180deg, rgba(30, 12, 42, .55), rgba(12, 6, 18, .55));
	box-shadow: inset 0 0 0 1px rgba(247, 185, 85, .14);
}
.ic-tier--advisors { grid-column: span 8; }
.ic-tier--room-staff { grid-column: span 4; }
.ic-tier__name { margin: 0 0 18px; font: 600 .78rem/1 var(--ic-display); letter-spacing: .3em; text-transform: uppercase; color: var(--ic-gold); }

.ic-crests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; }
.ic-tier--leadership .ic-crests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-tier--members .ic-crests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-tier--advisors .ic-crests { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ic-crest { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ic-crest__frame {
	position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, rgba(176, 44, 255, .18), transparent 70%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1.2);
}
.ic-crest__frame::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; opacity: 0;
	background: radial-gradient(circle, rgba(255, 138, 30, .45), transparent 70%); filter: blur(10px); transition: opacity .35s; }
.ic-crest img { position: relative; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
.ic-crest__label { font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--ic-muted); transition: color .3s; }
.ic-crest:hover .ic-crest__frame { transform: translateY(-6px) scale(1.06); }
.ic-crest:hover .ic-crest__frame::before { opacity: 1; }
.ic-crest:hover .ic-crest__label { color: var(--ic-gold-pale); }

.ic-recruit { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 36px auto 0; padding: 14px 22px; max-width: 680px;
	border-radius: 999px; background: rgba(247, 185, 85, .06); box-shadow: inset 0 0 0 1px rgba(247, 185, 85, .3); }
.ic-recruit i { color: var(--ic-gold); }
.ic-recruit p { margin: 0; font-size: .92rem; color: var(--ic-muted); }
.ic-recruit strong { color: var(--ic-gold-pale); font-weight: 700; }
.ic-owner { display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; margin: 0 4px; padding: 3px 10px 3px 4px; vertical-align: middle; border-radius: 999px;
	background: linear-gradient(120deg, rgba(176, 44, 255, .22), rgba(255, 138, 30, .18)); box-shadow: inset 0 0 0 1px rgba(247, 185, 85, .55), 0 0 18px -4px rgba(247, 185, 85, .55); }
.ic-owner img { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(255, 138, 30, .6)); }
.ic-owner__name { font: 700 1.55rem/1 var(--ic-script); font-style: italic; padding-right: .06em; letter-spacing: .02em;
	background: linear-gradient(100deg, var(--ic-gold-pale), var(--ic-gold) 45%, #ff9a3c 70%, var(--ic-gold-pale)); background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent; animation: ic-shine 4s linear infinite; }
.ic-owner__tag { font: 700 .62rem/1 var(--ic-display); letter-spacing: .18em; text-transform: uppercase; color: #1a0d02; background: var(--ic-gold); padding: 3px 5px 2px; border-radius: 4px; }
@keyframes ic-shine { to { background-position: -200% 0; } }

/* ---------- Footer (stock element, restyled) ---------- */
#login_wrap.ic-wrap #main_footer { position: relative; z-index: 1; background: transparent; border-top: 1px solid rgba(247, 185, 85, .14); color: var(--ic-muted); }
#login_wrap.ic-wrap #main_footer a, #login_wrap.ic-wrap #main_footer li { color: var(--ic-muted); }
#login_wrap.ic-wrap #main_footer a:hover, #login_wrap.ic-wrap #main_footer li:hover { color: var(--ic-gold-pale); }
#login_wrap.ic-wrap #main_footer .theme_color { color: var(--ic-gold); }

/* ---------- Entrance ---------- */
.ic-mark, .ic-panel, .ic-ranks__head, .ic-tier { animation: ic-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.ic-panel { animation-delay: .15s; }
@keyframes ic-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.ic-hero { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding-top: 4px; }
	.ic-mark picture { max-width: 380px; }
	.ic-panel { max-width: 600px; margin: 0 auto; width: 100%; }
	.ic-tier, .ic-tier:nth-child(n) { grid-column: span 12; }
}
@media (max-width: 560px) {
	.ic-page { padding: 16px 16px 8px; }
	.ic-mark picture { max-width: 300px; }
	.ic-panel { padding: 30px 20px 24px; border-radius: 18px; }
	.ic-btn { flex-basis: 100%; }
	.ic-perks { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
	.ic-perks li { font-size: .82rem; }
	.ic-ranks { padding-top: 56px; }
	.ic-tier { padding: 22px 14px 18px; }
	.ic-eyebrow { letter-spacing: .22em; font-size: .68rem; }
	.ic-crests { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
	.ic-tier--leadership .ic-crests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ic-tier--members .ic-crests, .ic-tier--advisors .ic-crests { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ic-tier--room-staff .ic-crests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ic-crest__frame { width: 66px; height: 66px; }
	.ic-crest img { width: 58px; height: 58px; }
	.ic-crest__label { font-size: .7rem; }
	.ic-recruit { border-radius: 16px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.ic-smoke, .ic-embers i, .ic-logo, .ic-owner__name, .ic-mark::before, .ic-mark, .ic-panel, .ic-ranks__head, .ic-tier { animation: none !important; }
	.ic-embers { display: none; }
}