/* ═══════════════════════════════════════════════
   GamerDNA Toolkit – GAMIVIA Style Guide v2.5
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────── */

:root {
	--accent: #6B35E9;
	--accent-light: #8E64F0;
	--accent-bg: #F0EBFE;
	--link: #0969DA;
	--dark: #1C1139;

	--bg: #f8f8f9;
	--white: #FFFFFF;
	--border: #E1E0E6;
	--border-light: #F0EEF5;
	--icon-bg: #F0EEF5;

	--text: #1C1139;
	--text-secondary: #5A5775;
	--text-muted: #8E8BA3;

	--success: #16A34A;
	--success-bg: rgba(34,197,94,0.08);
	--error: #E24B4A;
	--error-bg: rgba(226,75,74,0.08);

	--cat-kf: #6B35E9;
	--cat-bf: #06B6D4;
	--cat-mf: #F59E0B;
	--cat-ef: #EC4899;
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	user-select: none;
	line-height: 1;
}


/* ── Radar Chart + Tooltip ──────────────────── */

.gdna-radar-wrap{display:flex;justify-content:center;align-items:center;padding:20px;margin:0 auto}
.gdna-radar-inner{position:relative;display:inline-block;width:100%}
.gdna-radar-inner canvas{display:block;max-width:100%;height:auto}

.gdna-radar-tooltip{
	position:absolute;
	background:var(--dark);
	color:var(--white);
	padding:8px 12px;
	border-radius:8px;
	font-family:"Figtree",sans-serif;
	font-size:13px;
	font-weight:600;
	pointer-events:none;
	opacity:0;
	transition:opacity .15s ease;
	white-space:nowrap;
	z-index:100;
	transform:translate(-50%,-130%);
	box-shadow:0 4px 12px rgba(28,17,57,.2);
}
.gdna-radar-tooltip::after{
	content:'';
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(-50%);
	border:5px solid transparent;
	border-top-color:var(--dark);
}
.gdna-radar-tooltip.visible{opacity:1}
.gdna-radar-tooltip-pct{margin-left:4px}


/* ── Skill Category Score Cards ─────────────── */

.gdna-scores-wrap{display:flex;flex-direction:column;gap:16px}
.gdna-scores-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.gdna-score-card{
	background:var(--white);
	border:1px solid var(--border);
	border-radius:12px;
	padding:20px;
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
	font-family:"Figtree",sans-serif;
}
.gdna-score-card:hover{
	transform:translateY(-2px);
	box-shadow:0 4px 16px rgba(28,17,57,.06);
	border-color:var(--text-muted);
}

.gdna-score-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:8px}
.gdna-score-label{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.gdna-score-label-abbr{display:block;font-size:11px;color:var(--text-muted);font-weight:500;margin-top:2px;letter-spacing:1px}
.gdna-score-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0}

.gdna-score-value{font-size:32px;font-weight:700;color:var(--text);line-height:1;margin-bottom:12px;font-feature-settings:'tnum'}
.gdna-score-value-suffix{font-size:18px;color:var(--text-muted);font-weight:600}

.gdna-score-bar{height:6px;background:var(--border-light);border-radius:100px;position:relative;margin-bottom:14px;overflow:visible}
.gdna-score-bar-fill{height:100%;border-radius:100px}
.gdna-score-bar-avg{position:absolute;top:-3px;width:2px;height:12px;background:var(--text);border-radius:1px;transform:translateX(-50%)}

.gdna-score-delta{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:8px}
.gdna-delta-label{color:var(--text-muted)}
.gdna-delta-value{font-weight:700;display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:4px}
.gdna-delta-value .material-symbols-outlined{font-size:14px}
.gdna-delta-positive{color:var(--success);background:var(--success-bg)}
.gdna-delta-negative{color:var(--error);background:var(--error-bg)}

.gdna-score-legend{
	background:var(--white);
	border:1px solid var(--border);
	border-radius:12px;
	padding:16px 20px;
	font-family:"Figtree",sans-serif;
	font-size:13px;
	color:var(--text-secondary);
	line-height:1.6;
}
.gdna-score-legend strong{color:var(--text);font-weight:700}


/* ── Top Skill Cards ────────────────────────── */

.gdna-skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.gdna-skill-card{
	background:var(--white);
	border:1px solid var(--border);
	border-radius:12px;
	padding:20px;
	transition:transform .2s ease,box-shadow .2s ease;
	display:flex;
	flex-direction:column;
	font-family:"Figtree",sans-serif;
	min-width:0;
}
.gdna-skill-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(28,17,57,.06)}

.gdna-skill-rank-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px}
.gdna-skill-rank{font-size:13px;font-weight:700;color:var(--text-muted);font-feature-settings:'tnum'}

.gdna-skill-category-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:1px;line-height:1.4}
.gdna-tag-kf{background:#EDE9FE;color:#5B21B6}
.gdna-tag-bf{background:#CFFAFE;color:#155E75}
.gdna-tag-mf{background:#FEF3C7;color:#92400E}
.gdna-tag-ef{background:#FCE7F3;color:#9D174D}

.gdna-skill-name{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3}
.gdna-skill-stars{display:inline-flex;gap:2px;margin-bottom:10px;align-items:center}
.gdna-skill-level-text{font-size:11px;color:var(--text-muted);margin-left:6px;font-weight:600}
.gdna-skill-desc{font-size:13px;color:var(--text-secondary);line-height:1.55}


/* ── Job-Fit / Career Match Cards ───────────── */

.gdna-jobfit-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:16px}

.gdna-jobfit-card{
	background:var(--white);
	border:1px solid var(--border);
	border-radius:12px;
	padding:24px;
	transition:transform .2s ease,box-shadow .2s ease;
	position:relative;
	display:flex;
	flex-direction:column;
	font-family:"Figtree",sans-serif;
	min-width:0;
}
.gdna-jobfit-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(28,17,57,.06)}

.gdna-jobfit-card.featured{
	border:2px solid var(--accent);
	background:linear-gradient(180deg,rgba(107,53,233,.03) 0%,var(--white) 60%);
}

.gdna-featured-badge{
	position:absolute;
	top:-10px;
	left:20px;
	background:var(--accent);
	color:var(--white);
	font-size:10px;
	font-weight:700;
	padding:4px 10px;
	border-radius:100px;
	text-transform:uppercase;
	letter-spacing:1px;
}

.gdna-jobfit-percent{font-size:36px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:6px;font-feature-settings:'tnum'}
.gdna-jobfit-card.featured .gdna-jobfit-percent{font-size:44px}

.gdna-jobfit-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.gdna-jobfit-desc{font-size:13px;color:var(--text-secondary);line-height:1.55;margin-bottom:14px;flex:1}

.gdna-jobfit-link{font-size:13px;color:var(--link);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:gap .15s ease}
.gdna-jobfit-link:hover{gap:8px}
.gdna-jobfit-link .material-symbols-outlined{font-size:14px}


/* ── Career Matches Full List ────────────────── */

.gdna-career-list{display:flex;flex-direction:column;gap:8px}
.gdna-cl-row{display:grid;grid-template-columns:40px 1fr minmax(120px,200px) 50px auto;gap:12px;align-items:center;padding:18px 18px;border-radius:12px;background:var(--white);border:1px solid var(--border);transition:box-shadow .2s}
.gdna-cl-row:hover{box-shadow:0 4px 16px rgba(28,17,57,0.06)}
.gdna-cl-top{border-left:4px solid var(--accent);background:rgba(107,53,233,.03)}
.gdna-cl-rank{font-family:"Figtree",sans-serif;font-size:15px;font-weight:700;color:var(--text-muted);text-align:center}
.gdna-cl-top .gdna-cl-rank{color:var(--accent)}
.gdna-cl-name{font-family:"Figtree",sans-serif;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdna-cl-bar{height:6px;background:var(--border);border-radius:99px;overflow:hidden}
.gdna-cl-bar-fill{height:100%;border-radius:99px;background:var(--accent);transition:width .6s ease}
.gdna-cl-score{font-family:"Figtree",sans-serif;font-size:15px;font-weight:700;color:var(--text);text-align:right}
.gdna-cl-badge{display:inline-block;font-family:"Figtree",sans-serif;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--icon-bg);color:var(--accent);white-space:nowrap}


/* ── Profile Type (Text) ─────────────────────── */

.gdna-profile-type-wrap{margin:0}
.gdna-profile-type-name{font-family:"Anta",sans-serif;font-size:28px;font-weight:700;line-height:1.2;color:var(--accent)}
.gdna-profile-type-desc{font-family:"Figtree",sans-serif;font-size:15px;line-height:1.7;color:var(--text-secondary);margin-top:8px}


/* ── Profile Type Card ───────────────────────── */

.gdna-ptc{border-radius:16px;background:var(--white);overflow:hidden;box-shadow:0 1px 4px rgba(28,17,57,0.04);border:1px solid var(--border)}
.gdna-ptc-header{padding:28px 24px 20px;border-bottom:1px solid var(--border)}
.gdna-ptc-cats{display:flex;gap:6px;margin-bottom:12px}
.gdna-ptc-cat{display:inline-block;padding:3px 12px;border-radius:99px;font-family:"Figtree",sans-serif;font-size:11px;font-weight:700;color:#fff;letter-spacing:.5px}
.gdna-ptc-title{font-family:"Anta",sans-serif;font-size:24px;font-weight:700;color:var(--accent);margin:0 0 4px;line-height:1.2}
.gdna-ptc-subtitle{font-family:"Figtree",sans-serif;font-size:13px;color:var(--text-muted);margin:0}
.gdna-ptc-body{padding:20px 24px}
.gdna-ptc-desc{font-family:"Figtree",sans-serif;font-size:14px;line-height:1.7;color:var(--text-secondary);margin:0 0 20px}
.gdna-ptc-section{margin-bottom:18px}
.gdna-ptc-section:last-child{margin-bottom:0}
.gdna-ptc-section-title{font-family:"Figtree",sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin:0 0 8px}
.gdna-ptc-tags{display:flex;flex-wrap:wrap;gap:6px}
.gdna-ptc-tag{display:inline-block;padding:5px 14px;border-radius:4px;font-family:"Figtree",sans-serif;font-size:12px;font-weight:600;background:var(--icon-bg);color:var(--text-secondary)}
.gdna-ptc-tag-alt{background:var(--icon-bg);color:var(--text-secondary)}
.gdna-ptc-tag-career{background:rgba(9,105,218,0.08);color:var(--link)}
.gdna-ptc-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.gdna-ptc-score-item{text-align:center;padding:10px 4px 8px;border-radius:10px;background:var(--bg)}
.gdna-ptc-score-label{display:block;font-family:"Anta",sans-serif;font-size:12px;font-weight:700;margin-bottom:2px}
.gdna-ptc-score-value{display:block;font-family:"Anta",sans-serif;font-size:20px;font-weight:700;color:var(--text)}
.gdna-ptc-score-dev{display:block;font-family:"Figtree",sans-serif;font-size:11px;font-weight:600;margin-top:1px}
.gdna-ptc-dev-high{color:#22C55E}
.gdna-ptc-dev-mid{color:var(--text-muted)}
.gdna-ptc-dev-low{color:var(--error)}


/* ── Skill Stars (generic) ───────────────────── */

.gdna-stars{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.gdna-star{display:inline-block;width:26px;height:26px;background-color:currentColor;-webkit-mask-image:url('/wp-content/uploads/2026/02/star-rating.svg');mask-image:url('/wp-content/uploads/2026/02/star-rating.svg');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}

.gdna-ts-star{display:inline-block;width:16px;height:16px;background-color:var(--accent);-webkit-mask-image:url('/wp-content/uploads/2026/02/star-rating.svg');mask-image:url('/wp-content/uploads/2026/02/star-rating.svg');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}


/* ── Skill Cards (Full Accordion) ────────────── */

.gdna-sc-wrap{display:flex;flex-direction:column;gap:12px}

.gdna-sc-group{display:flex;flex-direction:column;gap:12px}
.gdna-sc-group-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;background:var(--white);border:1px solid var(--border);border-radius:14px;cursor:pointer;font-family:"Figtree",sans-serif;font-size:15px;font-weight:700;color:var(--text);transition:background .2s,box-shadow .2s}
.gdna-sc-group-header:hover{background:#FAFAFB}
.gdna-sc-group-open .gdna-sc-group-header{box-shadow:0 2px 8px rgba(28,17,57,0.05)}
.gdna-sc-group-label{display:flex;align-items:center;gap:10px}
.gdna-sc-group-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.gdna-sc-group-meta{display:flex;align-items:center;gap:12px}
.gdna-sc-group-count{font-size:12px;font-weight:600;color:var(--text-muted)}
.gdna-sc-group-arrow{font-size:10px;color:var(--text-muted);transition:transform .25s ease;display:inline-block}
.gdna-sc-group-open .gdna-sc-group-arrow{transform:rotate(180deg)}

.gdna-sc-group-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease,margin .3s ease;margin-top:-12px}
.gdna-sc-group-body > .gdna-sc-body-inner{overflow:hidden;min-height:0}
.gdna-sc-group-open .gdna-sc-group-body{grid-template-rows:1fr;opacity:1;margin-top:0}

.gdna-sc-card{opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
.gdna-sc-group-open .gdna-sc-card{opacity:1;transform:translateY(0);transition-delay:.08s}

.gdna-sc-grid{display:grid;gap:12px}
.gdna-sc-wrap[data-cols="1"] .gdna-sc-grid{grid-template-columns:1fr}
.gdna-sc-wrap[data-cols="2"] .gdna-sc-grid{grid-template-columns:repeat(2,1fr)}
.gdna-sc-wrap[data-cols="3"] .gdna-sc-grid{grid-template-columns:repeat(3,1fr)}
.gdna-sc-wrap[data-cols="4"] .gdna-sc-grid{grid-template-columns:repeat(4,1fr)}

.gdna-sc-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:32px 36px}

.gdna-sc-card-header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.gdna-sc-card-name{display:inline-block;font-family:"Figtree",sans-serif;font-size:18px;font-weight:700;color:#fff;background:var(--dark);padding:10px 22px;border-radius:100px;line-height:1.3;letter-spacing:-0.2px}
.gdna-sc-stars{display:inline-flex;gap:4px;flex-shrink:0;align-items:center}

.gdna-sc-text{font-family:"Figtree",sans-serif;font-size:15px;line-height:1.65;color:var(--text);margin:0 0 14px}
.gdna-sc-text:last-of-type{margin-bottom:0}
.gdna-sc-text strong{font-weight:700;color:var(--text)}

.gdna-sc-examples{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.gdna-sc-examples-label{font-family:"Figtree",sans-serif;font-size:14px;color:var(--text-secondary);font-weight:500}
.gdna-sc-chip{display:inline-block;font-family:"Figtree",sans-serif;font-size:14px;font-weight:600;padding:7px 16px;border-radius:100px;background:var(--icon-bg);color:var(--text);border:1px solid var(--border)}


/* ── Elementor Editor Placeholder ────────────── */

.gdna-editor-placeholder{padding:20px 24px;border-radius:12px;background:var(--bg);border:2px dashed var(--border);text-align:center;font-family:"Figtree",sans-serif}
.gdna-editor-placeholder-name{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:4px}
.gdna-editor-placeholder-hint{font-size:12px;color:var(--text-muted)}


/* ── Career Detail Table ─────────────────────── */

.gdna-career-detail{border-radius:12px;overflow:hidden;border:1px solid var(--border);font-size:14px}
.gdna-detail-title{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg);font-weight:700;font-size:16px;color:var(--text);border-bottom:1px solid var(--border)}
.gdna-detail-score{font-size:20px;color:var(--accent)}
.gdna-detail-header{display:grid;grid-template-columns:1fr 100px 110px 100px;gap:8px;padding:10px 16px;background:var(--icon-bg);border-bottom:1px solid var(--border);font-weight:700;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.gdna-detail-row{display:grid;grid-template-columns:1fr 100px 110px 100px;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-light);align-items:center}
.gdna-detail-row:last-child{border-bottom:none}
.gdna-detail-skill{font-weight:500;color:var(--text)}
.gdna-detail-stars{display:flex;gap:3px}
.gdna-detail-weight{font-size:12px;font-weight:600;color:var(--text-secondary)}
.gdna-detail-quality{font-size:12px;font-weight:600;padding:3px 10px;border-radius:4px;text-align:center;line-height:1.4}
.gdna-detail-perfekt .gdna-detail-quality{background:rgba(34,197,94,0.08);color:#16a34a}
.gdna-detail-gut .gdna-detail-quality{background:rgba(245,158,11,0.08);color:#b45309}
.gdna-detail-verbesserbar .gdna-detail-quality{background:rgba(226,75,74,0.08);color:#c53030}
.gdna-detail-perfekt{background:rgba(34,197,94,0.04)}
.gdna-detail-gut{background:rgba(245,158,11,0.04)}
.gdna-detail-verbesserbar{background:rgba(226,75,74,0.04)}
.gdna-career-radar-wrap{margin:0 auto}


/* ── Responsive ──────────────────────────────── */

@media (max-width: 900px){
	.gdna-scores-grid,
	.gdna-skills-grid{grid-template-columns:repeat(2,1fr)}
	.gdna-jobfit-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 768px){
	.gdna-sc-wrap[data-cols="3"] .gdna-sc-grid,
	.gdna-sc-wrap[data-cols="4"] .gdna-sc-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 640px){
	.gdna-cl-row{grid-template-columns:32px 1fr 50px;gap:8px}
	.gdna-cl-bar,.gdna-cl-badge{display:none}
}

@media (max-width: 600px){
	.gdna-sc-card{padding:24px 20px}
	.gdna-sc-card-header{gap:12px}
	.gdna-sc-examples{gap:8px}
	.gdna-detail-header,.gdna-detail-row{grid-template-columns:1fr 80px 90px 85px;gap:4px;padding:8px 12px;font-size:12px}
	.gdna-detail-title{font-size:14px;padding:12px}
	.gdna-detail-score{font-size:16px}
}

@media (max-width: 480px){
	.gdna-scores-grid,
	.gdna-skills-grid,
	.gdna-jobfit-grid{grid-template-columns:1fr}
	.gdna-ptc-scores{grid-template-columns:repeat(2,1fr)}
	.gdna-sc-wrap .gdna-sc-grid{grid-template-columns:1fr !important}
}