/* ==========================================================================
   JERSEY DEVIL — CHARACTER PROFILE REDESIGN v2
   Entirely scoped to .jdcp-profile.
   ========================================================================== */

.jdcp-profile {
	width: 100%;
	box-sizing: border-box;
	color: var(--jd-text);
}

.jdcp-profile svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* HERO -------------------------------------------------------------------- */

.jdcp-profile .jdcp-hero {
	position: relative;
	display: grid;
	grid-template-columns: 330px minmax(0, 1fr);
	gap: 42px;
	align-items: center;
	min-height: 350px;
	margin: 0 0 20px;
	padding: 28px 46px 28px 56px;
	box-sizing: border-box;
	overflow: hidden;

	background-color: var(--jd-paper);
	background-image:
		linear-gradient(rgba(255,249,232,.46), rgba(231,213,170,.18)),
		url(../../../images/parchment-texture.png);
	background-size: auto, 420px 420px;

	border: 1px solid #8d672d;
	box-shadow:
		0 4px 14px rgba(0,0,0,.20),
		inset 0 0 0 1px rgba(255,245,216,.18);
}

.jdcp-profile .jdcp-hero::before,
.jdcp-profile .jdcp-hero::after {
	content: "";
	position: absolute;
	width: 32px;
	height: 32px;
	pointer-events: none;
	z-index: 3;
}

.jdcp-profile .jdcp-hero::before {
	top: -1px;
	left: -1px;
	border-top: 3px solid #8d672d;
	border-left: 3px solid #8d672d;
	border-top-left-radius: 20px;
}

.jdcp-profile .jdcp-hero::after {
	right: -1px;
	bottom: -1px;
	border-right: 3px solid #8d672d;
	border-bottom: 3px solid #8d672d;
	border-bottom-right-radius: 20px;
}

.jdcp-profile .jdcp-hero-watermark {
	position: absolute;
	right: 18px;
	bottom: -18px;
	width: min(365px, 30vw);
	aspect-ratio: 390 / 380;
	z-index: 0;
	pointer-events: none;

	background:
		url(../../../images/jd-profile-ship-watermark.png)
		center bottom / contain no-repeat;

	opacity: .18;
}

.jdcp-profile .jdcp-avatar,
.jdcp-profile .jdcp-identity {
	position: relative;
	z-index: 2;
}

.jdcp-profile .jdcp-avatar {
	text-align: left;
}

.jdcp-profile .jdcp-avatar img {
	display: block;
	width: 100%;
	max-width: 330px;
	height: 235px;
	object-fit: cover;
	object-position: center center;
	box-sizing: border-box;
	padding: 5px;

	background: #0b1822;
	border: 2px solid var(--jd-gold);
	box-shadow:
		0 0 0 1px rgba(255,235,193,.12) inset,
		0 3px 10px rgba(0,0,0,.17);
}

.jdcp-profile .jdcp-identity {
	max-width: 760px;
	padding-right: 105px;
}

.jdcp-profile .jdcp-name {
	margin: 0;
	color: var(--jd-navy);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(40px, 4vw, 58px);
	font-weight: 700;
	line-height: .98;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-name,
.jdcp-profile .jdcp-name * {
	color: var(--jd-navy) !important;
}

.jdcp-profile .jdcp-type {
	display: inline-block;
	margin-top: 14px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jd-teal);
}

.jdcp-profile .jdcp-divider {
	display: flex;
	align-items: center;
	gap: 9px;
	width: min(320px, 100%);
	margin: 12px 0 20px;
}

.jdcp-profile .jdcp-divider span {
	height: 1px;
	flex: 1;
	background: linear-gradient(
		to right,
		rgba(141,103,45,.92),
		rgba(141,103,45,.12)
	);
}

.jdcp-profile .jdcp-divider span:last-child {
	background: linear-gradient(
		to left,
		rgba(141,103,45,.92),
		rgba(141,103,45,.12)
	);
}

.jdcp-profile .jdcp-divider i {
	display: block;
	width: 6px;
	height: 6px;
	background: #8d672d;
	transform: rotate(45deg);
}


/* GROUP COLORS ------------------------------------------------------------- */

.jdcp-profile .jdcp-type.jd-group-4  { color: #54996C; }
.jdcp-profile .jdcp-type.jd-group-9  { color: #997854; }
.jdcp-profile .jdcp-type.jd-group-10 { color: #939954; }
.jdcp-profile .jdcp-type.jd-group-11 { color: #995B54; }
.jdcp-profile .jdcp-type.jd-group-12 { color: #99547A; }
.jdcp-profile .jdcp-type.jd-group-13 { color: #547899; }
.jdcp-profile .jdcp-type.jd-group-14 { color: #845499; }
.jdcp-profile .jdcp-type.jd-group-15 { color: #AFC9AF; }
.jdcp-profile .jdcp-type.jd-group-16 { color: #549099; }
.jdcp-profile .jdcp-type.jd-group-17 { color: #54998A; }
.jdcp-profile .jdcp-type.jd-group-18 { color: #99726E; }
.jdcp-profile .jdcp-type.jd-group-19 { color: #6D9CC4; }
.jdcp-profile .jdcp-type.jd-group-20 { color: #636772; }
.jdcp-profile .jdcp-type.jd-group-21 { color: #858B99; }
.jdcp-profile .jdcp-type.jd-group-25 { color: #B5A4BD; }
.jdcp-profile .jdcp-type.jd-group-26 { color: #D49039; }
.jdcp-profile .jdcp-type.jd-group-28 { color: #5C825E; }
.jdcp-profile .jdcp-type.jd-group-30 { color: #565656; }
.jdcp-profile .jdcp-type.jd-group-31 { color: #9DE3D8; }
.jdcp-profile .jdcp-type.jd-group-32 { color: #D0B76A; }


/* CHARACTER DETAILS -------------------------------------------------------- */

.jdcp-profile .jdcp-character-details {
	display: grid;
	gap: 10px;
	max-width: 720px;
	color: #34291a;
	font-size: 14px;
}

.jdcp-profile .jdcp-detail-row {
	display: grid;
	grid-template-columns: 22px 128px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	min-width: 0;
}

.jdcp-profile .jdcp-detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #213747;
}

.jdcp-profile .jdcp-detail-icon svg {
	width: 19px;
	height: 19px;
}

.jdcp-profile .jdcp-detail-row strong {
	color: #332918;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-detail-value {
	min-width: 0;
	color: #2b2418;
	overflow-wrap: anywhere;
}

.jdcp-profile .jdcp-detail-value a {
	color: #0d6171;
}

.jdcp-profile .jdcp-quote {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-style: italic;
}


/* HERO ACTIONS ------------------------------------------------------------- */

.jdcp-profile .jdcp-primary-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}

.jdcp-profile .jdcp-primary-actions > a:not(.jdcp-message-button) {
	color: #0d6171;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.jdcp-profile .jdcp-primary-actions > a:not(.jdcp-message-button):hover {
	color: #9b6722;
	text-decoration: none;
}

.jdcp-profile .jdcp-message-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 42px;
	padding: 0 22px;
	box-sizing: border-box;

	color: var(--jd-gold-soft) !important;
	background: linear-gradient(to bottom, #0c3149 0%, #071d2e 100%);
	border: 1px solid var(--jd-gold);
	border-radius: 4px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .7px;
	text-decoration: none !important;
	text-transform: uppercase;
	box-shadow: 0 2px 5px rgba(0,0,0,.17);
}

.jdcp-profile .jdcp-message-button svg {
	width: 18px;
	height: 18px;
}

.jdcp-profile .jdcp-message-button:hover {
	color: #fff3d1 !important;
	background: linear-gradient(to bottom, #12425d 0%, #09263a 100%);
}

.jdcp-profile .jdcp-action-divider {
	width: 1px;
	height: 30px;
	background: rgba(105,79,39,.40);
}


/* LOWER CARDS -------------------------------------------------------------- */

.jdcp-profile .jdcp-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 28px;
	align-items: stretch;
}

.jdcp-profile .jdcp-card {
	min-width: 0;
	overflow: hidden;
	background-color: var(--jd-paper);
	background-image:
		linear-gradient(rgba(255,249,232,.54), rgba(231,213,170,.22)),
		url(../../../images/parchment-texture.png);
	background-size: auto, 420px 420px;

	border: 1px solid #8d672d;
	border-radius: 5px;
	box-shadow: 0 3px 10px rgba(0,0,0,.17);
}

.jdcp-profile .jdcp-card-heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 48px;
	padding: 8px 16px;
	box-sizing: border-box;

	color: var(--jd-gold-soft);
	background: linear-gradient(to bottom, #0c3149 0%, #071d2e 100%);
	border-bottom: 1px solid var(--jd-gold);

	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .7px;
	text-align: center;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-card-heading-flourished::before,
.jdcp-profile .jdcp-card-heading-flourished::after {
	content: "";
	width: 42px;
	height: 1px;
	background: linear-gradient(
		to right,
		rgba(214,165,82,0),
		rgba(214,165,82,.9)
	);
}

.jdcp-profile .jdcp-card-heading-flourished::after {
	background: linear-gradient(
		to left,
		rgba(214,165,82,0),
		rgba(214,165,82,.9)
	);
}

.jdcp-profile .jdcp-card-body {
	padding: 20px 28px 22px;
	box-sizing: border-box;
}


/* ACTIVITY ----------------------------------------------------------------- */

.jdcp-profile .jdcp-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.jdcp-profile .jdcp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 8px;
	box-sizing: border-box;
	color: #2b2418 !important;
	text-decoration: none !important;
}

.jdcp-profile .jdcp-stat:hover {
	background: rgba(255,255,255,.12);
}

.jdcp-profile .jdcp-stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: #6b4e24;
}

.jdcp-profile .jdcp-stat-icon svg {
	width: 40px;
	height: 40px;
	stroke-width: 1.65;
}

.jdcp-profile .jdcp-stat strong {
	margin: 8px 0 0;
	color: #102b40;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(38px, 4vw, 52px);
	font-weight: 400;
	line-height: 1;
}

.jdcp-profile .jdcp-stat > span:last-child {
	margin-top: 8px;
	color: #34291a;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-view-threads {
	display: block;
	margin-top: 8px;
	padding-top: 16px;
	color: #0d6171;
	border-top: 1px solid rgba(105,79,39,.28);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-view-threads:hover {
	color: #9b6722;
	text-decoration: none;
}


/* ACCOUNT DETAILS ---------------------------------------------------------- */

.jdcp-profile .jdcp-account-card .jdcp-card-body {
	display: grid;
	gap: 1px;
	padding-top: 19px;
}

.jdcp-profile .jdcp-account-row {
	display: grid;
	grid-template-columns: 26px 105px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	min-width: 0;
	padding: 7px 0;
	color: #2b2418;
}

.jdcp-profile .jdcp-account-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #34291a;
}

.jdcp-profile .jdcp-account-icon svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
}

.jdcp-profile .jdcp-account-row strong {
	color: #332918;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	letter-spacing: .35px;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-account-row > span:last-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.jdcp-profile .jdcp-account-row small {
	color: #6e6759;
	font-size: 11px;
}

.jdcp-profile .jdcp-status .online {
	color: #4f966b;
	font-weight: 700;
}

.jdcp-profile .jdcp-status .offline {
	color: #8b8a84;
	font-weight: 700;
}


/* SECONDARY / SYSTEM CONTENT ------------------------------------------------ */

.jdcp-profile .jdcp-secondary-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	text-align: center;
}

.jdcp-profile .jdcp-secondary-actions br,
.jdcp-profile .jdcp-secondary-actions img {
	display: none;
}

.jdcp-profile .jdcp-secondary-actions a {
	display: inline-block;
	margin: 0;
	padding: 6px 11px;
	color: rgba(228,194,123,.78);
	border: 1px solid rgba(214,165,82,.38);
	border-radius: 4px;
	font-size: 10px;
	letter-spacing: .4px;
	text-decoration: none;
	text-transform: uppercase;
}

.jdcp-profile .jdcp-secondary-actions a:hover {
	color: #fff3d1;
	border-color: rgba(214,165,82,.72);
	text-decoration: none;
}

.jdcp-profile .jdcp-extra-sections {
	margin-top: 18px;
}

.jdcp-profile .jdcp-extra-sections > .tborder {
	margin-bottom: 14px;
}

.jdcp-profile .jdcp-profilefields-source {
	display: none !important;
}


/* RESPONSIVE ---------------------------------------------------------------- */

@media (max-width: 1180px) {

	.jdcp-profile .jdcp-hero {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 30px;
		padding: 26px 32px;
	}

	.jdcp-profile .jdcp-avatar img {
		max-width: 260px;
		height: 210px;
	}

	.jdcp-profile .jdcp-identity {
		padding-right: 35px;
	}

	.jdcp-profile .jdcp-hero-watermark {
		width: 295px;
		opacity: .15;
	}
}

@media (max-width: 900px) {

	.jdcp-profile .jdcp-hero {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 24px;
		padding: 22px;
	}

	.jdcp-profile .jdcp-avatar img {
		max-width: 210px;
		height: 180px;
	}

	.jdcp-profile .jdcp-identity {
		padding-right: 0;
	}

	.jdcp-profile .jdcp-hero-watermark {
		width: 245px;
		opacity: .11;
	}

	.jdcp-profile .jdcp-card-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

@media (max-width: 700px) {

	.jdcp-profile .jdcp-hero {
		grid-template-columns: 1fr;
		gap: 20px;
		min-height: 0;
		padding: 20px 16px 22px;
	}

	.jdcp-profile .jdcp-avatar {
		text-align: center;
	}

	.jdcp-profile .jdcp-avatar img {
		width: min(300px, 82vw);
		max-width: none;
		height: 220px;
		margin: 0 auto;
	}

	.jdcp-profile .jdcp-name {
		font-size: 38px;
		text-align: center;
	}

	.jdcp-profile .jdcp-type {
		display: block;
		font-size: 20px;
		text-align: center;
	}

	.jdcp-profile .jdcp-divider {
		margin-left: auto;
		margin-right: auto;
	}

	.jdcp-profile .jdcp-character-details {
		font-size: 13px;
	}

	.jdcp-profile .jdcp-detail-row {
		grid-template-columns: 20px 112px minmax(0, 1fr);
		gap: 8px;
	}

	.jdcp-profile .jdcp-primary-actions {
		justify-content: center;
	}

	.jdcp-profile .jdcp-hero-watermark {
		right: -35px;
		bottom: -15px;
		width: 235px;
		opacity: .07;
	}

	.jdcp-profile .jdcp-card-body {
		padding: 18px 16px 20px;
	}

	.jdcp-profile .jdcp-account-row {
		grid-template-columns: 22px 90px minmax(0, 1fr);
		gap: 8px;
	}

	.jdcp-profile .jdcp-card-heading-flourished::before,
	.jdcp-profile .jdcp-card-heading-flourished::after {
		width: 24px;
	}
}

@media (max-width: 460px) {

	.jdcp-profile .jdcp-name {
		font-size: 32px;
	}

	.jdcp-profile .jdcp-detail-row,
	.jdcp-profile .jdcp-account-row {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.jdcp-profile .jdcp-detail-row strong,
	.jdcp-profile .jdcp-account-row strong {
		grid-column: 2;
	}

	.jdcp-profile .jdcp-detail-value,
	.jdcp-profile .jdcp-account-row > span:last-child {
		grid-column: 2;
	}

	.jdcp-profile .jdcp-primary-actions {
		gap: 10px;
	}

	.jdcp-profile .jdcp-action-divider {
		display: none;
	}

	.jdcp-profile .jdcp-message-button {
		width: 100%;
	}

	.jdcp-profile .jdcp-stats {
		gap: 4px;
	}

	.jdcp-profile .jdcp-stat {
		min-height: 128px;
	}

	.jdcp-profile .jdcp-stat strong {
		font-size: 36px;
	}
}