/**
 * Networld Games Core - Frontend Styles
 */

/* Inherit from Networld 2026 Global Design System */
:root {
	--nw-bg-card: var(--nw-bg-surface, #0d1424);
	--nw-border: var(--nw-border, rgba(255, 255, 255, 0.09));
	--nw-text-main: var(--nw-text-main, #f8fafc);
	--nw-text-muted: var(--nw-text-muted, #94a3b8);
	--nw-primary: var(--nw-primary, #f59e0b);
	--nw-primary-hover: var(--nw-primary-hover, #d97706);
	--nw-radius: var(--nw-radius-md, 14px);
	--nw-shadow: var(--nw-shadow, 0 10px 30px rgba(0, 0, 0, 0.45));
}

.networld-profile-wrap,
.networld-games-directory,
.networld-spillhub-wrap {
	max-width: 900px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: var(--nw-text-main);
	line-height: 1.5;
}

.networld-card {
	background: var(--nw-bg-card);
	border: 1px solid var(--nw-border);
	border-radius: var(--nw-radius);
	padding: 24px;
	box-shadow: var(--nw-shadow);
	margin-bottom: 20px;
}

.networld-profile-header {
	display: flex;
	gap: 24px;
	align-items: center;
}

@media (max-width: 640px) {
	.networld-profile-header {
		flex-direction: column;
		text-align: center;
	}
}

.networld-avatar-col {
	position: relative;
	flex-shrink: 0;
}

.networld-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--nw-primary);
	display: block;
}

.networld-level-badge {
	position: absolute;
	bottom: -6px;
	right: -6px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	font-weight: 800;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 2px solid #fff;
	display: flex;
	gap: 2px;
	align-items: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.networld-identity-col {
	flex: 1;
	min-width: 0;
	width: 100%;
}

.networld-player-name {
	margin: 0 0 10px 0;
	font-size: 24px;
	font-weight: 700;
}

/* XP Bar */
.networld-xp-bar-container {
	margin-bottom: 12px;
}

.networld-xp-labels {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.networld-xp-track {
	height: 12px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.networld-xp-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--nw-primary), #8b5cf6);
	border-radius: 999px;
	transition: width 0.4s ease-in-out;
}

.networld-xp-subtext {
	font-size: 11px;
	color: var(--nw-text-muted);
	margin-top: 4px;
}

/* Bio */
.networld-bio-section {
	font-size: 14px;
	color: var(--nw-text-muted);
	margin-top: 8px;
}

.networld-bio-text {
	margin: 0 0 4px 0;
	font-style: italic;
}

.networld-btn-link {
	background: none;
	border: none;
	color: var(--nw-primary);
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.networld-bio-input {
	width: 100%;
	border: 1px solid var(--nw-border);
	border-radius: 6px;
	padding: 8px;
	font-size: 13px;
	margin-top: 6px;
	box-sizing: border-box;
}

.networld-bio-actions {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

/* Stats Grid */
.networld-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.networld-stat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	margin-bottom: 0;
	text-align: center;
}

.networld-stat-num {
	font-size: 26px;
	font-weight: 800;
	color: var(--nw-text-main);
	line-height: 1.1;
}

.networld-stat-label {
	font-size: 12px;
	color: var(--nw-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}

.networld-stat-wins .networld-stat-num {
	color: var(--nw-success);
}

.networld-stat-losses .networld-stat-num {
	color: var(--nw-danger);
}

.networld-stat-winrate .networld-stat-num {
	color: var(--nw-primary);
}

/* Achievements */
.networld-achievements-card {
	padding: 24px;
}

.networld-section-title {
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 700;
}

.networld-achievements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.networld-achievement-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	background: #f8fafc;
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	position: relative;
}

.networld-ach-icon {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: #eab308;
	flex-shrink: 0;
}

.networld-ach-details {
	flex: 1;
	min-width: 0;
}

.networld-ach-title {
	margin: 0 0 2px 0;
	font-size: 14px;
	font-weight: 600;
}

.networld-ach-desc {
	margin: 0 0 4px 0;
	font-size: 12px;
	color: var(--nw-text-muted);
	line-height: 1.3;
}

.networld-ach-date {
	font-size: 10px;
	color: #94a3b8;
}

.networld-ach-xp {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #ecfdf5;
	color: #059669;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
	border: 1px solid #a7f3d0;
}

/* Games Directory */
.networld-directory-header {
	margin-bottom: 24px;
	text-align: center;
}

.networld-directory-header h2 {
	margin: 0 0 8px 0;
	font-size: 28px;
	font-weight: 800;
}

.networld-directory-header p {
	margin: 0;
	color: var(--nw-text-muted);
}

.networld-games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.networld-game-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.networld-game-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.networld-game-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.dashicons.networld-game-icon {
	background: none;
	width: 52px;
	height: 52px;
	font-size: 36px;
	line-height: 52px;
	color: var(--nw-primary);
}

/* Distinct Game Icons (Pure SVG Data-URIs) */
.networld-icon-reversi {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='rg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2316a34a'/%3E%3Cstop offset='100%25' stop-color='%2315803d'/%3E%3C/linearGradient%3E%3CradialGradient id='rbk' cx='35%25' cy='35%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%23475569'/%3E%3Cstop offset='45%25' stop-color='%231e293b'/%3E%3Cstop offset='100%25' stop-color='%23090d16'/%3E%3C/radialGradient%3E%3CradialGradient id='rwh' cx='35%25' cy='35%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='70%25' stop-color='%23f1f5f9'/%3E%3Cstop offset='100%25' stop-color='%23cbd5e1'/%3E%3C/radialGradient%3E%3Cfilter id='sh' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='1.5' flood-color='%23000000' flood-opacity='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='56' height='56' rx='12' fill='url(%23rg)'/%3E%3Ccircle cx='22' cy='22' r='11.5' fill='url(%23rbk)' stroke='rgba(255,255,255,0.2)' stroke-width='0.8' filter='url(%23sh)'/%3E%3Ccircle cx='34' cy='34' r='11.5' fill='url(%23rwh)' stroke='rgba(0,0,0,0.12)' stroke-width='0.8' filter='url(%23sh)'/%3E%3C/svg%3E");
}

.networld-icon-connect-four {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='cg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%232563eb'/%3E%3Cstop offset='100%25' stop-color='%231d4ed8'/%3E%3C/linearGradient%3E%3ClinearGradient id='crk' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%231e40af'/%3E%3Cstop offset='100%25' stop-color='%23172554'/%3E%3C/linearGradient%3E%3CradialGradient id='cyel' cx='35%25' cy='35%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%23fef08a'/%3E%3Cstop offset='45%25' stop-color='%23f59e0b'/%3E%3Cstop offset='100%25' stop-color='%23b45309'/%3E%3C/radialGradient%3E%3CradialGradient id='cred' cx='35%25' cy='35%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='%23fca5a5'/%3E%3Cstop offset='50%25' stop-color='%23ef4444'/%3E%3Cstop offset='100%25' stop-color='%23991b1b'/%3E%3C/radialGradient%3E%3Cfilter id='csh' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='1.5' flood-color='%23000000' flood-opacity='0.3'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='56' height='56' rx='12' fill='url(%23cg)'/%3E%3Crect x='8' y='8' width='40' height='40' rx='6' fill='url(%23crk)' stroke='rgba(255,255,255,0.15)' stroke-width='0.8' filter='url(%23csh)'/%3E%3Ccircle cx='15' cy='15.5' r='3.2' fill='%230f172a' opacity='0.7'/%3E%3Ccircle cx='23.5' cy='15.5' r='3.2' fill='%230f172a' opacity='0.7'/%3E%3Ccircle cx='32' cy='15.5' r='3.2' fill='%230f172a' opacity='0.7'/%3E%3Ccircle cx='40.5' cy='15.5' r='3.2' fill='url(%23cyel)'/%3E%3Ccircle cx='15' cy='24' r='3.2' fill='%230f172a' opacity='0.7'/%3E%3Ccircle cx='23.5' cy='24' r='3.2' fill='%230f172a' opacity='0.7'/%3E%3Ccircle cx='32' cy='24' r='3.2' fill='url(%23cyel)'/%3E%3Ccircle cx='40.5' cy='24' r='3.2' fill='url(%23cred)'/%3E%3Ccircle cx='15' cy='32.5' r='3.2' fill='url(%23cred)'/%3E%3Ccircle cx='23.5' cy='32.5' r='3.2' fill='url(%23cyel)'/%3E%3Ccircle cx='32' cy='32.5' r='3.2' fill='url(%23cred)'/%3E%3Ccircle cx='40.5' cy='32.5' r='3.2' fill='url(%23cred)'/%3E%3Ccircle cx='15' cy='41' r='3.2' fill='url(%23cyel)'/%3E%3Ccircle cx='23.5' cy='41' r='3.2' fill='url(%23cred)'/%3E%3Ccircle cx='32' cy='41' r='3.2' fill='url(%23cyel)'/%3E%3Ccircle cx='40.5' cy='41' r='3.2' fill='url(%23cred)'/%3E%3C/svg%3E");
}

.networld-icon-ludo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='lg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f59e0b'/%3E%3Cstop offset='100%25' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3ClinearGradient id='lwh' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='100%25' stop-color='%23f1f5f9'/%3E%3C/linearGradient%3E%3Cfilter id='lsh' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='1.8' flood-color='%23000000' flood-opacity='0.35'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='56' height='56' rx='12' fill='url(%23lg)'/%3E%3Ccircle cx='9' cy='9' r='3.5' fill='%23ef4444'/%3E%3Ccircle cx='47' cy='9' r='3.5' fill='%2322c55e'/%3E%3Ccircle cx='9' cy='47' r='3.5' fill='%23facc15'/%3E%3Ccircle cx='47' cy='47' r='3.5' fill='%233b82f6'/%3E%3Crect x='14.5' y='14.5' width='27' height='27' rx='6' fill='url(%23lwh)' stroke='%23e2e8f0' stroke-width='0.8' filter='url(%23lsh)'/%3E%3Ccircle cx='21' cy='20' r='1.9' fill='%230f172a'/%3E%3Ccircle cx='21' cy='28' r='1.9' fill='%230f172a'/%3E%3Ccircle cx='21' cy='36' r='1.9' fill='%230f172a'/%3E%3Ccircle cx='35' cy='20' r='1.9' fill='%230f172a'/%3E%3Ccircle cx='35' cy='28' r='1.9' fill='%230f172a'/%3E%3Ccircle cx='35' cy='36' r='1.9' fill='%230f172a'/%3E%3C/svg%3E");
}

.networld-icon-chess {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='chg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2310b981'/%3E%3Cstop offset='100%25' stop-color='%23047857'/%3E%3C/linearGradient%3E%3ClinearGradient id='nwg-w' x1='15%25' y1='0%25' x2='85%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='35%25' stop-color='%23f7f2e7'/%3E%3Cstop offset='75%25' stop-color='%23e8dcbf'/%3E%3Cstop offset='100%25' stop-color='%23cfbe98'/%3E%3C/linearGradient%3E%3Cfilter id='chsh' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='2.5' stdDeviation='1.8' flood-color='%23000000' flood-opacity='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='56' height='56' rx='12' fill='url(%23chg)'/%3E%3Cg filter='url(%23chsh)' transform='translate(5.5, 4.5) scale(0.80)'%3E%3Cpath d='M 13 46 C 13 43 18 42 28 42 C 38 42 43 43 43 46 L 43 48 C 43 49.5 38 50.5 28 50.5 C 18 50.5 13 49.5 13 48 Z' fill='url(%23nwg-w)' stroke='%235c4836' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cellipse cx='28' cy='42' rx='13.5' ry='2.2' fill='url(%23nwg-w)' stroke='%235c4836' stroke-width='1.4'/%3E%3Cpath d='M 17 41 C 19 39 21.5 35 21 29 C 19 28 14 26 12.5 22 C 11 19.5 12.5 18 16 17.5 C 19 17 21 15.5 24 11 C 25 9 26.5 7 28 7 C 29.5 7 29.5 9 30 10.5 C 31.5 9.5 33.5 10 34 11.5 C 36 16 38.5 21.5 39.5 29 C 40 35 38 39 39.5 41 Z' fill='url(%23nwg-w)' stroke='%235c4836' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M 12.5 22 C 15 23 18 23 20.5 21.5' fill='none' stroke='%235c4836' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='20' r='0.9' fill='%235c4836'/%3E%3Cellipse cx='21.5' cy='16' rx='1.3' ry='1.8' transform='rotate(15 21.5 16)' fill='%235c4836'/%3E%3Ccircle cx='21.2' cy='15.7' r='0.5' fill='%23ffffff'/%3E%3Cpath d='M 29.5 11.5 C 31 13 34 13 35.5 16 M 32 17.5 C 34 19.5 36.5 20.5 37.5 23.5 M 34 24.5 C 36 26.5 37.5 29 38.5 31.5' fill='none' stroke='%235c4836' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M 19 38 C 20.5 33.5 21 29.5 20.5 26' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.networld-game-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.networld-game-category {
	font-size: 11px;
	color: var(--nw-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.networld-game-desc {
	font-size: 13px;
	color: var(--nw-text-muted);
	margin: 0 0 16px 0;
	flex: 1;
}

.networld-game-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	font-size: 12px;
}

.networld-game-version {
	color: var(--nw-text-muted);
}

.networld-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
}

.networld-badge-active {
	background: #ecfdf5;
	color: #059669;
}

.networld-badge-coming {
	background: #f1f5f9;
	color: #64748b;
}

/* Buttons */
.networld-btn {
	display: inline-block;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	text-align: center;
	transition: background 0.15s ease;
}

.networld-btn-sm {
	padding: 4px 10px;
	font-size: 12px;
}

.networld-btn-primary {
	background: var(--nw-primary);
	color: #fff;
}

.networld-btn-primary:hover {
	background: var(--nw-primary-hover);
	color: #fff;
}

.networld-btn-secondary {
	background: #f1f5f9;
	color: var(--nw-text-main);
	border-color: var(--nw-border);
}

.networld-btn-block {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.networld-empty-text {
	color: var(--nw-text-muted);
	font-size: 14px;
	margin: 0;
}

/* Challenges & Matches Styling */
.networld-challenges-card {
	margin-top: 20px;
}

.networld-challenge-tabs {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--nw-border);
	margin-bottom: 16px;
	padding-bottom: 8px;
}

.networld-tab-btn {
	background: none;
	border: none;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nw-text-muted);
	cursor: pointer;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s ease;
}

.networld-tab-btn:hover {
	color: var(--nw-text-main);
	background: #f1f5f9;
}

.networld-tab-btn.active {
	color: var(--nw-primary);
	background: #eff6ff;
}

.networld-tab-badge {
	background: var(--nw-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
}

.networld-tab-content {
	display: none;
}

.networld-tab-content.active {
	display: block;
}

.networld-challenge-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.networld-challenge-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	background: #fafafa;
}

.networld-challenge-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.networld-challenge-info {
	flex: 1;
	min-width: 0;
}

.networld-challenge-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 4px;
}

.networld-challenge-game {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--nw-text-muted);
	background: #e2e8f0;
	padding: 2px 8px;
	border-radius: 4px;
}

.networld-challenge-msg {
	margin: 0 0 4px 0;
	font-size: 12px;
	color: var(--nw-text-muted);
	font-style: italic;
}

.networld-challenge-date {
	font-size: 11px;
	color: #94a3b8;
}

.networld-challenge-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

/* Capability Badges */
.networld-badge-mode {
	background: #f1f5f9;
	color: #475569;
}

.networld-badge-pve {
	background: #fef3c7;
	color: #92400e;
}

.networld-badge-pvp {
	background: #ede9fe;
	color: #6b21a8;
}

.networld-game-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.networld-game-actions .networld-btn {
	flex: 1;
}

/* Spillhub Navigation */
.networld-spillhub-nav {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--nw-border);
	padding-bottom: 4px;
}

.networld-spillhub-tab {
	background: none;
	border: none;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 700;
	color: var(--nw-text-muted);
	cursor: pointer;
	border-radius: 8px 8px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.15s ease;
	position: relative;
}

.networld-spillhub-tab:hover {
	color: var(--nw-text-main);
	background: #f8fafc;
}

.networld-spillhub-tab.active {
	color: var(--nw-primary);
	border-bottom: 3px solid var(--nw-primary);
	background: #eff6ff;
}

.networld-spillhub-tab .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.networld-spillhub-panel {
	display: none;
}

.networld-spillhub-panel.active {
	display: block;
}

/* Capability Challenge Badge */
.networld-badge-challenge {
	background: #dbeafe;
	color: #1e40af;
}

/* Player Controls: Search & Sort */
.networld-player-controls {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.networld-search-box {
	position: relative;
	flex: 1;
	min-width: 240px;
}

.networld-search-box .dashicons {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--nw-text-muted);
	pointer-events: none;
}

.networld-player-search-input {
	width: 100%;
	padding: 10px 12px 10px 38px;
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	background: #fff;
	transition: border-color 0.15s ease;
}

.networld-player-search-input:focus {
	outline: none;
	border-color: var(--nw-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.networld-sort-box {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nw-text-muted);
}

.networld-player-sort-select {
	padding: 8px 12px;
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	font-size: 13px;
	background: #fff;
	color: var(--nw-text-main);
	cursor: pointer;
}

/* Game Challenge Hint */
.networld-game-challenge-hint {
	background: #eff6ff;
	border-color: #bfdbfe;
	padding: 12px 16px;
	margin-bottom: 16px;
}

.networld-game-challenge-hint p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #1e40af;
}

.networld-clear-hint {
	margin-left: auto;
	font-size: 12px;
	color: #3b82f6;
}

/* Player Cards Grid */
.networld-players-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
	transition: opacity 0.2s ease;
}

.networld-player-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	margin-bottom: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.networld-player-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
}

.networld-player-card-head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}

.networld-player-card-avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.networld-avatar-sm {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--nw-primary);
	display: block;
}

.networld-level-badge-sm {
	position: absolute;
	bottom: -4px;
	right: -4px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	font-weight: 800;
	font-size: 9px;
	padding: 1px 5px;
	border-radius: 999px;
	border: 1px solid #fff;
}

.networld-player-card-info {
	flex: 1;
	min-width: 0;
}

.networld-player-card-name {
	margin: 0 0 2px 0;
	font-size: 16px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.networld-player-card-xp {
	font-size: 12px;
	color: var(--nw-text-muted);
}

.networld-player-card-bio {
	font-size: 12px;
	color: var(--nw-text-muted);
	font-style: italic;
	margin: 0 0 12px 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.networld-player-card-stats {
	display: flex;
	justify-content: space-between;
	background: #f8fafc;
	padding: 8px 12px;
	border-radius: 6px;
	margin-top: auto;
	margin-bottom: 12px;
}

.networld-card-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.networld-card-stat-val {
	font-size: 14px;
	font-weight: 700;
	color: var(--nw-text-main);
}

.networld-card-stat-lbl {
	font-size: 10px;
	color: var(--nw-text-muted);
	text-transform: uppercase;
}

.networld-text-success {
	color: var(--nw-success);
}

.networld-player-card-actions {
	display: flex;
	gap: 8px;
}

.networld-player-card-actions .networld-btn {
	flex: 1;
}

/* Pagination Bar */
.networld-pagination-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.networld-page-info {
	font-size: 13px;
	color: var(--nw-text-muted);
	font-weight: 600;
}

/* Public Profile View Subview */
.networld-profile-back-bar {
	margin-bottom: 12px;
}

.networld-back-to-directory {
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.networld-profile-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.networld-profile-title-row .networld-player-name {
	margin-bottom: 0;
}

/* Generic Challenge Modal Dialog */
.networld-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(4px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	padding: 16px;
	box-sizing: border-box;
}

.networld-modal-dialog {
	background: #ffffff;
	border-radius: 12px;
	width: 100%;
	max-width: 480px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	animation: networldFadeIn 0.2s ease-out;
}

@keyframes networldFadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.networld-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--nw-border);
	background: #f8fafc;
}

.networld-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--nw-text-main);
}

.networld-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: var(--nw-text-muted);
	cursor: pointer;
	padding: 0;
}

.networld-modal-close:hover {
	color: var(--nw-text-main);
}

.networld-modal-body {
	padding: 20px;
}

.networld-modal-opponent {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f8fafc;
	border: 1px solid var(--nw-border);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 16px;
}

.networld-modal-opponent-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--nw-primary);
}

.networld-modal-opponent-label {
	font-size: 11px;
	color: var(--nw-text-muted);
	text-transform: uppercase;
	display: block;
}

.networld-modal-opponent-name {
	font-size: 15px;
	color: var(--nw-text-main);
}

.networld-form-group {
	margin-bottom: 16px;
}

.networld-form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--nw-text-main);
	margin-bottom: 6px;
}

.networld-select-game,
.networld-challenge-message {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nw-border);
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	background: #fff;
	color: var(--nw-text-main);
}

.networld-select-game:focus,
.networld-challenge-message:focus {
	outline: none;
	border-color: var(--nw-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.networld-modal-feedback {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	margin-bottom: 16px;
}

.networld-feedback-success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.networld-feedback-error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.networld-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

@media (max-width: 640px) {
	.networld-spillhub-nav {
		flex-direction: column;
		gap: 4px;
	}
	.networld-spillhub-tab {
		width: 100%;
		border-radius: 8px;
	}
	.networld-spillhub-tab.active {
		border-bottom: none;
		border-left: 3px solid var(--nw-primary);
	}
	.networld-player-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.networld-search-box {
		width: 100%;
	}
	.networld-sort-box {
		width: 100%;
		justify-content: space-between;
	}
	.networld-sort-box select {
		flex: 1;
	}
	.networld-profile-title-row {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* =============================================================
   Authentication & Onboarding (v0.4.0)
   ============================================================= */

/* Guest Welcome Banner */
.networld-guest-banner {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border: 1px solid #334155;
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.networld-guest-banner-content {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 280px;
}

.networld-guest-banner-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.2);
	border: 2px solid rgba(59, 130, 246, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #60a5fa;
}

.networld-guest-banner-icon .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.networld-guest-banner-text {
	flex: 1;
}

.networld-guest-banner-title {
	margin: 0 0 4px 0;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
}

.networld-guest-banner-desc {
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
	line-height: 1.4;
}

.networld-guest-banner-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Authenticated Player Status Bar */
.networld-player-bar {
	background: #ffffff;
	border: 1px solid var(--nw-border);
	border-radius: 12px;
	padding: 14px 20px;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.networld-player-bar-identity {
	display: flex;
	align-items: center;
	gap: 14px;
}

.networld-player-bar-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--nw-primary);
	flex-shrink: 0;
}

.networld-player-bar-user {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.networld-player-bar-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.networld-player-bar-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--nw-text-main);
}

.networld-player-bar-xp-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.networld-player-bar-xp-track {
	width: 110px;
	height: 6px;
	background: #e2e8f0;
	border-radius: 3px;
	overflow: hidden;
}

.networld-player-bar-xp-fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #10b981);
	border-radius: 3px;
	transition: width 0.3s ease;
}

.networld-player-bar-xp-text {
	font-size: 11px;
	color: var(--nw-text-muted);
	font-weight: 600;
}

.networld-player-bar-stats {
	display: flex;
	gap: 20px;
	align-items: center;
}

.networld-player-bar-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
}

.networld-player-bar-stat-val {
	font-size: 16px;
	font-weight: 700;
	color: var(--nw-text-main);
	line-height: 1.1;
}

.networld-player-bar-stat-lbl {
	font-size: 10px;
	color: var(--nw-text-muted);
	text-transform: uppercase;
	font-weight: 600;
}

.networld-player-bar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.networld-btn-logout {
	background: #f8fafc;
	color: #64748b;
	border: 1px solid var(--nw-border);
}

.networld-btn-logout:hover {
	background: #f1f5f9;
	color: #334155;
}

.networld-btn-success {
	background: #10b981;
	color: #ffffff;
	border: 1px solid #059669;
}

.networld-btn-success:hover {
	background: #059669;
	color: #ffffff;
}

/* Guest Challenge Card */
.networld-auth-guest-card {
	text-align: center;
	padding: 40px 24px;
	max-width: 500px;
	margin: 20px auto;
}

.networld-guest-card-icon {
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: var(--nw-primary);
	margin-bottom: 12px;
	display: inline-block;
}

.networld-auth-guest-card h3 {
	margin: 0 0 8px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--nw-text-main);
}

.networld-auth-guest-card p {
	font-size: 14px;
	color: var(--nw-text-muted);
	line-height: 1.5;
	margin-bottom: 20px;
}

.networld-btn-group {
	display: flex;
	justify-content: center;
	gap: 12px;
}

/* Auth Modal & Dialog */
.networld-auth-dialog {
	max-width: 440px;
	width: 100%;
}

.networld-auth-modal-body {
	padding: 20px;
}

.networld-auth-prompt {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 16px;
	text-align: center;
}

.networld-auth-tabs {
	display: flex;
	border-bottom: 2px solid var(--nw-border);
	margin-bottom: 20px;
}

.networld-auth-tab {
	background: none;
	border: none;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.15s ease;
	text-decoration: none;
}

.networld-auth-tab:hover {
	color: var(--nw-text-main);
}

.networld-auth-tab.active {
	color: var(--nw-primary);
	border-bottom-color: var(--nw-primary);
}

.networld-auth-panel {
	display: none;
}

.networld-auth-panel.active {
	display: block;
}

.networld-auth-form {
	display: flex;
	flex-direction: column;
}

.networld-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nw-border);
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	background: #ffffff;
	color: var(--nw-text-main);
	transition: border-color 0.15s ease;
}

.networld-input:focus {
	outline: none;
	border-color: var(--nw-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.networld-form-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -4px;
	margin-bottom: 16px;
}

.networld-checkbox-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--nw-text-muted);
	cursor: pointer;
	user-select: none;
}

.networld-help-text {
	font-size: 11px;
	color: var(--nw-text-muted);
	margin-top: 4px;
	display: block;
}

.networld-btn-block {
	width: 100%;
	justify-content: center;
	padding: 10px;
	font-size: 15px;
	font-weight: 600;
}

.networld-auth-notice {
	background: #f8fafc;
	border: 1px solid var(--nw-border);
	border-radius: 6px;
	padding: 10px 12px;
	margin-top: 14px;
}

.networld-auth-notice p {
	margin: 0;
	font-size: 12px;
	color: var(--nw-text-muted);
	line-height: 1.4;
}

.networld-auth-switch-prompt {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: var(--nw-text-muted);
}

.networld-auth-desc {
	font-size: 13px;
	color: var(--nw-text-muted);
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 16px;
}

.networld-auth-alert {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	margin-bottom: 16px;
}

.networld-auth-alert-error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.networld-auth-alert-success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

/* Dedicated Standalone Auth Card */
.networld-auth-standalone-card {
	max-width: 460px;
	margin: 30px auto;
	padding: 32px;
}

.networld-auth-standalone-header {
	text-align: center;
	margin-bottom: 24px;
}

.networld-auth-standalone-header h2 {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--nw-text-main);
}

.networld-auth-standalone-header p {
	margin: 0;
	font-size: 14px;
	color: var(--nw-text-muted);
}

/* Responsive Mobile Rules for Auth Elements */
@media (max-width: 640px) {
	.networld-guest-banner {
		flex-direction: column;
		text-align: center;
	}
	.networld-guest-banner-content {
		flex-direction: column;
	}
	.networld-guest-banner-actions {
		width: 100%;
		justify-content: center;
	}
	.networld-guest-banner-actions .networld-btn {
		flex: 1;
	}
	.networld-player-bar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.networld-player-bar-identity {
		justify-content: center;
	}
	.networld-player-bar-stats {
		justify-content: center;
	}
	.networld-player-bar-actions {
		justify-content: center;
	}
}