/**
 * Networld Games Core - Game Hall Lobby & Arena Styles
 *
 * Dense PlayOK-style information architecture combined with
 * modern Networld SaaS/gaming visual design system.
 *
 * @package Networld_Games_Core
 * @version 1.0.0
 */

:root {
	--nw-blue-50: #eff6ff;
	--nw-blue-100: #dbeafe;
	--nw-blue-200: #bfdbfe;
	--nw-blue-500: #3b82f6;
	--nw-blue-600: #1d68f0;
	--nw-blue-700: #1a56db;
	--nw-blue-800: #1e40af;

	--nw-slate-50: #f8fafc;
	--nw-slate-100: #f1f5f9;
	--nw-slate-200: #e2e8f0;
	--nw-slate-300: #cbd5e1;
	--nw-slate-400: #94a3b8;
	--nw-slate-500: #64748b;
	--nw-slate-600: #475569;
	--nw-slate-700: #334155;
	--nw-slate-800: #1e293b;
	--nw-slate-900: #0f172a;

	--nw-green-50: #f0fdf4;
	--nw-green-100: #dcfce7;
	--nw-green-200: #bbf7d0;
	--nw-green-500: #22c55e;
	--nw-green-600: #16a34a;
	--nw-green-700: #15803d;

	--nw-yellow-50: #fefce8;
	--nw-yellow-100: #fef9c3;
	--nw-yellow-200: #fef08a;
	--nw-yellow-600: #ca8a04;
	--nw-yellow-700: #a16207;

	--nw-red-50: #fef2f2;
	--nw-red-100: #fee2e2;
	--nw-red-500: #ef4444;
	--nw-red-600: #dc2626;
	--nw-red-700: #b91c1c;

	--nw-radius-sm: 6px;
	--nw-radius-md: 8px;
	--nw-radius-lg: 14px;
	--nw-radius-full: 9999px;

	--nw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--nw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--nw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Base Wrapper & Scope Guard */
.networld-lobby-wrap {
	max-width: 1200px;
	margin: 20px auto;
	padding: 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--nw-slate-900);
	box-sizing: border-box;
	overflow-x: hidden;
}

.networld-lobby-wrap *,
.networld-lobby-wrap *::before,
.networld-lobby-wrap *::after {
	box-sizing: border-box;
}

/* Accessibility Focus Ring */
.networld-lobby-wrap button:focus-visible,
.networld-lobby-wrap input:focus-visible,
.networld-lobby-wrap select:focus-visible,
.networld-lobby-wrap a:focus-visible {
	outline: 2px solid var(--nw-blue-600);
	outline-offset: 2px;
}

/* -------------------------------------------------------------
 * 1. Game Hall Header Bar
 * ------------------------------------------------------------- */
.networld-hall-header {
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	padding: 20px 24px;
	box-shadow: var(--nw-shadow-sm);
	margin-bottom: 20px;
}

.networld-hall-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.networld-hall-identity {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Game Hero & Switcher Icons */
.networld-hall-game-icon {
	width: 56px;
	height: 56px;
	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;
}

.networld-switcher-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 4px;
	flex-shrink: 0;
}

.dashicons.networld-switcher-icon {
	background: none;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 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-hall-titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.networld-hall-title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--nw-slate-900);
	line-height: 1.2;
}

.networld-hall-tagline {
	margin: 0;
	font-size: 14px;
	color: var(--nw-slate-500);
	font-weight: 500;
}

/* Online Pill Badge */
.networld-hall-online-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: #ecfdf5;
	border: 1px solid #d1fae5;
	border-radius: var(--nw-radius-full);
	font-size: 13px;
	font-weight: 600;
	color: #065f46;
}

.networld-online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10b981;
	display: inline-block;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.networld-hall-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Dynamic Game Switcher Bar */
.networld-hall-switcher {
	border-top: 1px solid var(--nw-slate-100);
	margin-top: 16px;
	padding-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.networld-switcher-zone {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.networld-switcher-zone-left {
	justify-content: flex-start;
}

.networld-switcher-zone-right {
	margin-left: auto;
	justify-content: flex-end;
}

.networld-switcher-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: var(--nw-radius-md);
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-slate-700);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
	line-height: 1.3;
}

.networld-switcher-tab:hover {
	background: var(--nw-slate-50);
	border-color: var(--nw-slate-300);
	color: var(--nw-slate-900);
}

.networld-switcher-tab.is-active {
	background: var(--nw-blue-600);
	border-color: var(--nw-blue-600);
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(29, 104, 240, 0.25);
}

.networld-switcher-pve,
.networld-switcher-local {
	background: var(--nw-slate-50);
	border-style: dashed;
}

/* -------------------------------------------------------------
 * 2. Guest Banner
 * ------------------------------------------------------------- */
.networld-lobby-guest-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--nw-blue-50);
	border: 1px solid var(--nw-blue-200);
	padding: 14px 20px;
	border-radius: var(--nw-radius-lg);
	margin-bottom: 20px;
	gap: 16px;
	flex-wrap: wrap;
}

.networld-lobby-guest-banner p {
	margin: 0;
	font-size: 14px;
	color: var(--nw-blue-800);
	font-weight: 500;
}

/* -------------------------------------------------------------
 * 3. Main Grid Layout (Table Directory Left, Sidebar Right)
 * ------------------------------------------------------------- */
.networld-lobby-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 20px;
	align-items: start;
}

/* -------------------------------------------------------------
 * 4. Lobby Toolbar (Filters & Sort)
 * ------------------------------------------------------------- */
.networld-hall-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 12px;
	flex-wrap: wrap;
}

.networld-hall-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.networld-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-full);
	font-size: 13px;
	font-weight: 600;
	color: var(--nw-slate-700);
	cursor: pointer;
	transition: all 0.15s ease;
}

.networld-filter-pill:hover {
	background: var(--nw-slate-50);
	border-color: var(--nw-slate-300);
}

.networld-filter-pill.is-active {
	background: var(--nw-blue-600);
	border-color: var(--nw-blue-600);
	color: #ffffff;
}

.networld-filter-count {
	padding: 1px 7px;
	border-radius: var(--nw-radius-full);
	background: var(--nw-slate-100);
	font-size: 11px;
	font-weight: 700;
	color: var(--nw-slate-600);
}

.networld-filter-pill.is-active .networld-filter-count {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

.networld-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.networld-dot-green {
	background: var(--nw-green-500);
}

.networld-dot-yellow {
	background: var(--nw-yellow-600);
}

.networld-dot-red {
	background: var(--nw-red-500);
}

.networld-hall-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.networld-sort-label {
	font-size: 13px;
	color: var(--nw-slate-500);
	font-weight: 500;
}

.networld-sort-select {
	padding: 6px 12px;
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-md);
	font-size: 13px;
	font-weight: 600;
	color: var(--nw-slate-700);
	cursor: pointer;
	outline: none;
}

/* -------------------------------------------------------------
 * 5. Primary Table Directory (PlayOK Information Architecture)
 * ------------------------------------------------------------- */
.networld-lobby-tables-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.networld-hall-table-wrap {
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	box-shadow: var(--nw-shadow-sm);
	overflow: hidden;
}

.networld-hall-table-header {
	display: grid;
	grid-template-columns: 50px 80px minmax(180px, 1fr) 70px 95px 110px 32px;
	gap: 8px;
	padding: 10px 16px;
	background: var(--nw-slate-50);
	border-bottom: 1px solid var(--nw-slate-200);
	font-size: 12px;
	font-weight: 700;
	color: var(--nw-slate-500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	align-items: center;
}

.networld-tables-list {
	display: flex;
	flex-direction: column;
}

.networld-table-card.networld-hall-row {
	display: grid;
	grid-template-columns: 50px 80px minmax(180px, 1fr) 70px 95px 110px 32px;
	gap: 8px;
	padding: 12px 16px;
	background: #ffffff;
	border-bottom: 1px solid var(--nw-slate-200);
	align-items: center;
	transition: background 0.12s ease;
	cursor: pointer;
}

.networld-table-card.networld-hall-row:last-child {
	border-bottom: none;
}

.networld-table-card.networld-hall-row:hover {
	background: var(--nw-slate-50);
}

.networld-table-card.networld-hall-row.is-selected {
	background: #f0f7ff;
	box-shadow: inset 3px 0 0 var(--nw-blue-600);
}

/* Row Columns */
.networld-col-id {
	font-weight: 700;
	font-size: 13px;
	color: var(--nw-slate-600);
}

.networld-col-status {
	display: flex;
	align-items: center;
}

.networld-table-status-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--nw-radius-full);
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.networld-status-open {
	background: var(--nw-green-100);
	color: var(--nw-green-700);
}

.networld-status-seated {
	background: var(--nw-yellow-100);
	color: var(--nw-yellow-700);
}

.networld-status-in-match {
	background: var(--nw-red-100);
	color: var(--nw-red-700);
}

.networld-status-closed {
	background: var(--nw-slate-100);
	color: var(--nw-slate-500);
}

.networld-col-players {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex-wrap: nowrap;
}

.networld-row-players-group {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.networld-row-player {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.networld-player-sep {
	color: var(--nw-slate-400);
	font-weight: 700;
	font-size: 14px;
	user-select: none;
	padding: 0 2px;
}

.networld-row-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--nw-slate-200);
}

.networld-row-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--nw-slate-800);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 90px;
}

.networld-seats-badge {
	font-size: 11px;
	font-weight: 600;
	color: var(--nw-slate-400);
	margin-left: auto;
	padding-right: 4px;
	white-space: nowrap;
}

.networld-col-time {
	font-size: 12px;
	color: var(--nw-slate-500);
	white-space: nowrap;
}

.networld-col-match {
	font-size: 12px;
	color: var(--nw-slate-700);
	line-height: 1.2;
}

.networld-match-num {
	font-weight: 700;
	display: block;
}

.networld-match-seq {
	font-size: 11px;
	color: var(--nw-slate-500);
}

.networld-match-none {
	color: var(--nw-slate-400);
}

.networld-col-action {
	display: flex;
	align-items: center;
}

.networld-col-more {
	display: flex;
	align-items: center;
	justify-content: center;
}

.networld-btn-icon {
	background: none;
	border: none;
	color: var(--nw-slate-400);
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	padding: 4px;
	border-radius: var(--nw-radius-sm);
	letter-spacing: 0.1em;
}

.networld-btn-icon:hover {
	color: var(--nw-slate-700);
	background: var(--nw-slate-100);
}

/* Empty State */
.networld-empty-tables {
	text-align: center;
	padding: 48px 24px;
	background: #ffffff;
	border: 1px dashed var(--nw-slate-300);
	border-radius: var(--nw-radius-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.networld-empty-icon {
	font-size: 36px;
	margin-bottom: 12px;
	line-height: 1;
}

.networld-empty-title {
	margin: 0 0 6px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--nw-slate-800);
}

.networld-empty-desc {
	margin: 0 0 20px 0;
	font-size: 14px;
	color: var(--nw-slate-500);
	max-width: 380px;
	line-height: 1.5;
}

/* -------------------------------------------------------------
 * 6. Community & Selected Table Sidebar
 * ------------------------------------------------------------- */
.networld-lobby-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.networld-hall-roster-card,
.networld-hall-preview-card {
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	padding: 18px;
	box-shadow: var(--nw-shadow-sm);
}

.networld-roster-header,
.networld-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 8px;
}

.networld-roster-title,
.networld-preview-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--nw-slate-900);
}

.networld-roster-online-badge {
	font-size: 12px;
	font-weight: 600;
	color: #065f46;
	background: #ecfdf5;
	border: 1px solid #d1fae5;
	padding: 3px 9px;
	border-radius: var(--nw-radius-full);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.networld-roster-grid-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 8px;
	max-height: 260px;
	overflow-y: auto;
}

.networld-roster-player-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.networld-roster-player-item.is-challengeable {
	cursor: pointer;
	padding: 4px 6px;
	margin: -4px -6px;
	border-radius: 6px;
	transition: background 0.15s ease;
	position: relative;
}

.networld-roster-player-item.is-challengeable:hover,
.networld-roster-player-item.is-challengeable:focus-visible {
	background: var(--nw-slate-100);
	outline: none;
}

.networld-roster-challenge-action {
	margin-left: auto;
	color: var(--nw-slate-300);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	flex-shrink: 0;
	opacity: 0.6;
	transition: all 0.15s ease;
}

.networld-roster-challenge-action .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

.networld-roster-player-item.is-challengeable:hover .networld-roster-challenge-action,
.networld-roster-player-item.is-challengeable:focus-visible .networld-roster-challenge-action {
	opacity: 1;
	color: #2563eb;
	background: #eff6ff;
}

@media (hover: none) {
	.networld-roster-challenge-action {
		opacity: 0.85;
		color: var(--nw-slate-400);
	}
}

.networld-self-tag {
	font-size: 11px;
	color: var(--nw-slate-400);
	font-weight: 500;
}

.networld-roster-avatar-wrap {
	position: relative;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

.networld-roster-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--nw-slate-200);
}

.networld-avatar-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--nw-slate-100);
	color: var(--nw-slate-700);
	font-weight: 700;
	font-size: 11px;
}

.networld-avatar-fallback-lg {
	width: 44px;
	height: 44px;
	font-size: 18px;
}

.networld-roster-avatar-wrap .networld-online-dot {
	position: absolute;
	bottom: -1px;
	right: -1px;
	border: 1.5px solid #ffffff;
}

.networld-roster-player-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	line-height: 1.2;
}

.networld-roster-player-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--nw-slate-800);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.networld-roster-player-lv {
	font-size: 11px;
	color: var(--nw-slate-400);
	font-weight: 600;
}

.networld-roster-footer {
	border-top: 1px solid var(--nw-slate-100);
	margin-top: 14px;
	padding-top: 10px;
	text-align: right;
}

.networld-roster-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--nw-blue-600);
	text-decoration: none;
}

.networld-roster-link:hover {
	text-decoration: underline;
}

/* Selected Table Preview Card */
.networld-preview-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.networld-preview-time {
	font-size: 11px;
	color: var(--nw-slate-400);
}

.networld-preview-h2h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 10px;
	background: var(--nw-slate-50);
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	margin-bottom: 14px;
	gap: 8px;
}

.networld-preview-player-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	min-width: 0;
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: 10px;
	padding: 12px 8px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.networld-preview-avatar-wrap {
	position: relative;
	width: 44px;
	height: 44px;
	margin-bottom: 6px;
}

.networld-preview-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ffffff;
	box-shadow: var(--nw-shadow-sm);
}

.networld-preview-avatar-empty {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--nw-slate-100);
	color: var(--nw-slate-400);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 6px;
	border: 2px dashed var(--nw-slate-300);
}

.networld-preview-player-name {
	font-weight: 700;
	font-size: 13px;
	color: var(--nw-slate-800);
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 2px;
}

.networld-preview-player-lv {
	font-size: 11px;
	color: var(--nw-slate-500);
	margin-bottom: 4px;
}

.networld-preview-vs {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	font-size: 11px;
	font-weight: 800;
	color: var(--nw-slate-400);
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.networld-ready-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--nw-radius-full);
	line-height: 1.2;
}

.networld-ready-yes {
	background: var(--nw-green-100);
	color: var(--nw-green-700);
}

.networld-ready-no {
	background: var(--nw-slate-100);
	color: var(--nw-slate-500);
}

.networld-preview-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--nw-slate-700);
}

.networld-preview-detail-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.networld-detail-icon {
	font-size: 14px;
	width: 20px;
	text-align: center;
	color: var(--nw-slate-500);
}

.networld-preview-actions {
	margin-bottom: 12px;
}

.networld-btn-block {
	width: 100%;
	justify-content: center;
	min-height: 42px;
	font-weight: 700;
}

.networld-preview-tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	font-size: 12px;
	color: #166534;
	line-height: 1.45;
}

.networld-tip-icon {
	font-size: 15px;
	flex-shrink: 0;
	line-height: 1.2;
}

.networld-tip-text {
	margin: 0;
}

/* -------------------------------------------------------------
 * 7. Help Modal ("Hvordan spille?")
 * ------------------------------------------------------------- */
.networld-help-modal-card {
	max-width: 520px;
}

.networld-help-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
	text-align: left;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 4px;
}

.networld-help-section h4 {
	margin: 0 0 4px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--nw-slate-800);
}

.networld-help-section p {
	margin: 0;
	font-size: 13px;
	color: var(--nw-slate-600);
	line-height: 1.5;
}

/* -------------------------------------------------------------
 * 8. Persistent Arena Container (Table & Match Surface)
 * ------------------------------------------------------------- */
.networld-arena-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.networld-arena-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	box-shadow: var(--nw-shadow-sm);
	flex-wrap: wrap;
	gap: 12px;
}

.networld-arena-title-area {
	display: flex;
	align-items: center;
	gap: 12px;
}

.networld-arena-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* Seat Strip */
.networld-seat-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.networld-seat-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #ffffff;
	border: 2px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	box-shadow: var(--nw-shadow-sm);
	gap: 12px;
}

.networld-seat-card.is-active-turn {
	border-color: var(--nw-blue-600);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.networld-seat-player {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.networld-seat-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--nw-slate-200);
	flex-shrink: 0;
}

.networld-seat-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.networld-seat-name {
	font-weight: 700;
	font-size: 14px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.networld-seat-subtext {
	font-size: 11px;
	color: var(--nw-slate-500);
}

.networld-seat-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex-shrink: 0;
}

.networld-seat-empty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-style: dashed;
	background: #fcfcfc;
}

/* Arena Central Stage */
.networld-arena-stage {
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	padding: 24px;
	box-shadow: var(--nw-shadow-sm);
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
}

.networld-staging-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 440px;
}

.networld-staging-box h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.networld-staging-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.networld-arena-board {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.networld-match-turn-banner {
	width: 100%;
	padding: 10px 16px;
	border-radius: var(--nw-radius-md);
	margin-bottom: 16px;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.networld-turn-yours {
	background: var(--nw-blue-50);
	color: var(--nw-blue-800);
	border: 1px solid var(--nw-blue-200);
}

.networld-turn-opponents {
	background: var(--nw-slate-50);
	color: var(--nw-slate-600);
	border: 1px solid var(--nw-slate-200);
}

/* Post Match Results */
.networld-result-banner {
	width: 100%;
	max-width: 520px;
	padding: 24px;
	background: #ffffff;
	border: 2px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	margin: 16px auto;
	text-align: center;
	box-shadow: var(--nw-shadow-md);
}

.networld-result-banner h3 {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 800;
}

.networld-result-banner.is-winner h3 {
	color: var(--nw-green-600);
}

.networld-result-banner.is-draw h3 {
	color: var(--nw-yellow-600);
}

.networld-result-banner.is-loser h3 {
	color: var(--nw-red-600);
}

.networld-result-desc {
	margin: 0 0 20px 0;
	font-size: 14px;
	color: var(--nw-slate-500);
}

.networld-result-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.networld-rematch-status {
	margin-top: 14px;
	font-size: 13px;
	padding: 8px 12px;
	border-radius: var(--nw-radius-md);
	background: var(--nw-blue-50);
	color: var(--nw-blue-800);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------------------
 * 9. Replay Stepper Widget
 * ------------------------------------------------------------- */
.networld-replay-widget {
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	padding: 20px;
	box-shadow: var(--nw-shadow-sm);
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.networld-replay-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--nw-slate-200);
	padding-bottom: 12px;
	flex-wrap: wrap;
	gap: 10px;
}

.networld-replay-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.networld-replay-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.networld-replay-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 40px;
	padding: 0 14px;
	background: var(--nw-slate-100);
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-md);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: var(--nw-slate-800);
	transition: background 0.15s ease;
}

.networld-replay-btn:hover:not(:disabled) {
	background: var(--nw-slate-200);
}

.networld-replay-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.networld-replay-btn-play {
	background: var(--nw-blue-600);
	color: #ffffff;
	border-color: var(--nw-blue-600);
}

.networld-replay-btn-play:hover:not(:disabled) {
	background: var(--nw-blue-700);
}

.networld-replay-timeline {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.networld-replay-slider {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: var(--nw-slate-200);
	outline: none;
	cursor: pointer;
}

.networld-replay-counter {
	text-align: center;
	font-size: 13px;
	color: var(--nw-slate-500);
	font-weight: 600;
}

.networld-replay-event-log {
	max-height: 180px;
	overflow-y: auto;
	background: var(--nw-slate-50);
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-md);
	padding: 10px;
	font-family: monospace;
	font-size: 12px;
	text-align: left;
}

.networld-replay-event-item {
	padding: 4px 8px;
	border-radius: var(--nw-radius-sm);
	margin-bottom: 2px;
	cursor: pointer;
}

.networld-replay-event-item.is-current {
	background: var(--nw-blue-100);
	color: var(--nw-blue-800);
	font-weight: bold;
}

/* -------------------------------------------------------------
 * 10. Modals
 * ------------------------------------------------------------- */
.networld-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 100000;
	backdrop-filter: blur(3px);
}

.networld-modal-card {
	background: #ffffff;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-lg);
	width: 100%;
	max-width: 440px;
	padding: 24px;
	box-shadow: var(--nw-shadow-lg);
	position: relative;
}

.networld-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

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

.networld-modal-close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: var(--nw-slate-400);
	padding: 4px 8px;
	border-radius: var(--nw-radius-sm);
}

.networld-modal-close:hover {
	color: var(--nw-slate-700);
	background: var(--nw-slate-100);
}

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

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

.networld-form-input,
.networld-form-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nw-slate-200);
	border-radius: var(--nw-radius-md);
	font-size: 14px;
	color: var(--nw-slate-900);
	background: #ffffff;
}

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

/* -------------------------------------------------------------
 * 11. Buttons & Utility Micro-Components
 * ------------------------------------------------------------- */
.networld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--nw-radius-md);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: all 0.15s ease;
	line-height: 1.4;
	min-height: 38px;
}

.networld-btn-primary {
	background: var(--nw-blue-600);
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(29, 104, 240, 0.2);
}

.networld-btn-primary:hover:not(:disabled) {
	background: var(--nw-blue-700);
	box-shadow: 0 2px 4px rgba(29, 104, 240, 0.3);
}

.networld-btn-soft-primary {
	background: var(--nw-blue-50);
	color: var(--nw-blue-600);
	border-color: var(--nw-blue-200);
}

.networld-btn-soft-primary:hover:not(:disabled) {
	background: var(--nw-blue-100);
	border-color: var(--nw-blue-500);
	color: var(--nw-blue-700);
}

.networld-btn-secondary {
	background: #ffffff;
	color: var(--nw-slate-700);
	border-color: var(--nw-slate-200);
}

.networld-btn-secondary:hover:not(:disabled) {
	background: var(--nw-slate-50);
	border-color: var(--nw-slate-300);
}

.networld-btn-success {
	background: var(--nw-green-600);
	color: #ffffff;
}

.networld-btn-success:hover:not(:disabled) {
	background: var(--nw-green-700);
}

.networld-btn-danger {
	background: var(--nw-red-600);
	color: #ffffff;
}

.networld-btn-danger:hover:not(:disabled) {
	background: var(--nw-red-700);
}

.networld-btn-sm {
	padding: 5px 12px;
	font-size: 12px;
	min-height: 30px;
}

.networld-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* -------------------------------------------------------------
 * 12. Responsive Breakpoints & Overflow Invariants
 * ------------------------------------------------------------- */
/* Tablet & Medium Screens (<= 960px) */
@media (max-width: 960px) {
	.networld-lobby-grid {
		grid-template-columns: 1fr;
	}

	.networld-lobby-sidebar {
		margin-top: 10px;
	}
}

/* Mobile Screens (<= 768px, <= 640px and down to 390px) */
@media (max-width: 768px), (max-width: 640px) {
	.networld-lobby-wrap {
		padding: 0 10px;
		margin: 12px auto;
	}

	.networld-hall-switcher {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.networld-switcher-zone-right {
		margin-left: 0;
		justify-content: flex-start;
	}

	.networld-hall-top-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.networld-hall-identity {
		justify-content: flex-start;
	}

	.networld-hall-actions {
		width: 100%;
		justify-content: stretch;
	}

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

	.networld-hall-table-header {
		display: none;
	}

	/* Mobile Table Card Row Layout */
	.networld-table-card.networld-hall-row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px;
	}

	.networld-col-players {
		flex-wrap: wrap;
	}

	.networld-col-action {
		width: 100%;
	}

	.networld-col-action .networld-btn {
		width: 100%;
		min-height: 40px;
	}

	.networld-col-more {
		display: none;
	}

	.networld-roster-grid-2col {
		grid-template-columns: 1fr;
	}

	.networld-seat-strip {
		grid-template-columns: 1fr;
	}

	.networld-arena-header {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* Extra small mobile screens (<= 480px down to 390px) */
@media (max-width: 480px) {
	.networld-switcher-zone {
		gap: 6px;
	}

	.networld-switcher-tab {
		padding: 7px 11px;
		font-size: 13px;
	}
}